/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    .cards-table {
      width: 100%;
    }
    thead {
      display: none;
    }
    tr {
      display: block;
      margin-bottom: 1.5rem;
      padding: 1rem 0.5rem 0.5rem 1rem;
      background-color: transparentize( white, 0.15 );
      box-shadow: 0 0 1rem transparentize( black, 0.9 );
    }
    td {
      display: inline-block;
      margin: 0 0.5rem 0.5rem 0;
      padding: 0.5rem;
      text-align: left;
      background-color: white;
      border: 1px solid transparentize( #58C25F, 0.5 );
    }
    td:before {
      float: left;
      margin: -0.5rem 0.5rem -0.5rem -0.5rem;
      padding: 0.625rem 0.5rem 0.625rem;
      font-size: 0.75em;
      font-weight: bold;
      background: transparentize( #ddd, 0.9 );
      color: #888;
    }
    td {
      height: 45px;
      border: 1px solid #555!important;
    }
    .cards-table td:before {
      content: attr(data-label) "  ";
      background: #545096;
      padding-bottom: 14px;
      vertical-align: middle;
      font-weight: 600;
      font-size: 87%;
      color: white;
      /*letter-spacing: 1px;*/
    }

    .cards-table .operate:before{
      content: none;
    }


    td[data-label*="ชื่อหน่วยนับ"] {
      display: inline-block!important;
      width: 50%;
      text-align: center;
      &:before {
      display: inline-block;
        margin-right: -0.5rem;
        margin-bottom: 0.5rem;
        float: none;
      }
      &:empty {
        display: none;
      }
    }

    td[data-label*="ยี่ห้อ"],td[data-label*="ชื่อ"],td[data-label*="ASID"],td[data-label*="ที่ตั้ง"],td[data-label*="รายละเอียด"] {
      display: block;
      float: none;

      &:before {
        display: block;
        margin-right: -0.5rem;
        margin-bottom: 0.5rem;
        float: none;
      }
      &:empty {
        display: none;
      }
    }

    .xmark{
      color: #dd4b39;
      top: 225px;
      right: 5px;
      position: absolute;
    }
    .xmark:before {
      font-size: 35px;
      cursor:pointer;
    }

  }

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
  .cards-table {
    width: 100%;

    thead {
      display: none;
    }

    tr {
      display: block;
      margin-bottom: 1.5rem;
      padding: 1rem 0.5rem 0.5rem 1rem;
      background-color: transparentize( white, 0.15 );
      box-shadow: 0 0 1rem transparentize( black, 0.9 );
    }

    td {
      display: inline-block;
      margin: 0 0.5rem 0.5rem 0;
      padding: 0.5rem;
      text-align: left;
      background-color: white;
      border: 1px solid transparentize( #58C25F, 0.5 );

      &:before {
        float: left;
        margin: -0.5rem 0.5rem -0.5rem -0.5rem;
        padding: 0.625rem 0.5rem 0.625rem;
        font-size: 0.75em;
        font-weight: bold;
        background: transparentize( #58C25F, 0.9 );
        color: #58C25F;
      }

      &:before {
        content: attr(data-label) ": ";
      }

      &[data-label*="Column A"] {
        display: block;
        float: none;

        &:before {
          display: block;
          margin-right: -0.5rem;
          margin-bottom: 0.5rem;
          float: none;
        }
      }

      &:empty {
        display: none;
      }
    }
  }
}
/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
.cards-table {
    width: 100%;
  }
  thead {
  display: none;
  }

  tr {
    display: block;
    margin-bottom: 1.5rem;
  padding: 1rem 0.5rem 0.5rem 1rem;
  background-color: transparentize( white, 0.15 );
  box-shadow: 0 0 1rem transparentize( black, 0.9 );
  }

  td {
    display: inline-block;
    margin: 0 0.5rem 0.5rem 0;
    padding: 0.5rem;
    text-align: left;
    background-color: white;
    border: 1px solid transparentize( #58C25F, 0.5 );

  &:before {
    float: left;
    margin: -0.5rem 0.5rem -0.5rem -0.5rem;
    padding: 0.625rem 0.5rem 0.625rem;
    font-size: 0.75em;
    font-weight: bold;
    background: transparentize( #58C25F, 0.9 );
    color: #58C25F;
  }

  &:before {
    content: attr(data-label) ": ";
  }

  &[data-label*="IDa"] {
    display: block;
    float: none;

    &:before {
      display: block;
      margin-right: -0.5rem;
      margin-bottom: 0.5rem;
      float: none;
    }
  }

  &:empty {
    display: none;
      }
    }
  }
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
  .cards-table {
    width: 100%;
}
    thead {
      display: none;
    }

    tr {
      display: block;
      margin-bottom: 1.5rem;
      padding: 1rem 0.5rem 0.5rem 1rem;
      background-color: transparentize( white, 0.15 );
      box-shadow: 0 0 1rem transparentize( black, 0.9 );
    }

    td {
      display: inline-block;
      margin: 0 0.5rem 0.5rem 0;
      padding: 0.5rem;
      text-align: left;
      background-color: white;
      border: 1px solid transparentize( #58C25F, 0.5 );
    }
      &:before {
        float: left;
        margin: -0.5rem 0.5rem -0.5rem -0.5rem;
        padding: 0.625rem 0.5rem 0.625rem;
        font-size: 0.75em;
        font-weight: bold;
        background: transparentize( #58C25F, 0.9 );
        color: #58C25F;
      }

      td:before {
        content: attr(data-label) ": ";
      }

      &[data-label*="Column A"] {
        display: block;
        float: none;

        &:before {
          display: block;
          margin-right: -0.5rem;
          margin-bottom: 0.5rem;
          float: none;
        }
      }

      &:empty {
        display: none;
      }
    }
  }
}
/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
  .cards-table {
    width: 100%;

    thead {
      display: none;
    }

    tr {
      display: block;
      margin-bottom: 1.5rem;
      padding: 1rem 0.5rem 0.5rem 1rem;
      background-color: transparentize( white, 0.15 );
      box-shadow: 0 0 1rem transparentize( black, 0.9 );
    }

    td {
      display: inline-block;
      margin: 0 0.5rem 0.5rem 0;
      padding: 0.5rem;
      text-align: left;
      background-color: white;
      border: 1px solid transparentize( #58C25F, 0.5 );

      &:before {
        float: left;
        margin: -0.5rem 0.5rem -0.5rem -0.5rem;
        padding: 0.625rem 0.5rem 0.625rem;
        font-size: 0.75em;
        font-weight: bold;
        background: transparentize( #58C25F, 0.9 );
        color: #58C25F;
      }

      &:before {
        content: attr(data-label) ": ";
      }

      &[data-label*="Column A"] {
        display: block;
        float: none;

        &:before {
          display: block;
          margin-right: -0.5rem;
          margin-bottom: 0.5rem;
          float: none;
        }
      }

      &:empty {
        display: none;
      }
    }
  }
}
/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  .cards-table {
    width: 100%;

    thead {
      display: none;
    }

    tr {
      display: block;
      margin-bottom: 1.5rem;
      padding: 1rem 0.5rem 0.5rem 1rem;
      background-color: transparentize( white, 0.15 );
      box-shadow: 0 0 1rem transparentize( black, 0.9 );
    }

    td {
      display: inline-block;
      margin: 0 0.5rem 0.5rem 0;
      padding: 0.5rem;
      text-align: left;
      background-color: white;
      border: 1px solid transparentize( #58C25F, 0.5 );

      &:before {
        float: left;
        margin: -0.5rem 0.5rem -0.5rem -0.5rem;
        padding: 0.625rem 0.5rem 0.625rem;
        font-size: 0.75em;
        font-weight: bold;
        background: transparentize( #58C25F, 0.9 );
        color: #58C25F;
      }

      &:before {
        content: attr(data-label) ": ";
      }

      &[data-label*="Column A"] {
        display: block;
        float: none;

        &:before {
          display: block;
          margin-right: -0.5rem;
          margin-bottom: 0.5rem;
          float: none;
        }
      }

      &:empty {
        display: none;
      }
    }
  }
}