#idTabPdProductAttributesList table {}

#idTabPdProductAttributesList input.qtyfield {
    width: 40px;
    height: 38px;
    padding: 0 6px;
    margin-right:10px;
    float: left;
    line-height: 38px;
}
#idTabPdProductAttributesList .old_price {
    padding-bottom: 15px;
    font-size: 12px;
    text-decoration: line-through;
    display: inline-block;
    line-height: 23px;
}

#idTabPdProductAttributesList .price {
    font-weight: bold
}


#idTabPdProductAttributesList table td.option_infos .product-title {
    text-transform: capitalize;
    margin: .5rem 0;
    text-align: unset;
}

/** RESPOINSIVE TABLE **/

#idTabPdProductAttributesList td, #idTabPdProductAttributesList th { 
    vertical-align: middle;
    text-align: center;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    #idTabPdProductAttributesList table { 
        width: 100%; 
    }

    /* Force table to not be like tables anymore */
    #idTabPdProductAttributesList table, 
    #idTabPdProductAttributesList thead, 
    #idTabPdProductAttributesList tbody, 
    #idTabPdProductAttributesList th, 
    #idTabPdProductAttributesList td, 
    #idTabPdProductAttributesList tr { 
        display: block; 
    }
    
    /* Hide table headers (but not display: none;, for accessibility) */
    #idTabPdProductAttributesList thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    #idTabPdProductAttributesList tr { border: 1px solid #ccc; }
    
    #idTabPdProductAttributesList td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }

    #idTabPdProductAttributesList td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        /* Label the data */
        content: attr(data-column);

        color: #000;
        font-weight: bold;
        text-align: center;
    }
}

#idTabPdProductAttributesList .grid .product-description {
  height: 120px;
}

#idTabPdProductAttributesList .grid .thumbnail-container {
  height: 388px;
}

#idTabPdProductAttributesList .grid .thumbnail-container form {
  text-align: center;
  margin: 10px 0 10px 0;
}

#idTabPdProductAttributesList .grid .thumbnail-container:hover .highlighted-informations {
  bottom: 8.625rem;
}

#idTabPdProductAttributesList .grid .thumbnail-container:hover .highlighted-informations.no-variants {
  bottom: 6.375rem;
}

#idTabPdProductAttributesList .grid  .add-to-cart-or-refresh {text-align: center;}

#idTabPdProductAttributesList .grid input.qtyfield {
    padding: 0 6px;
    margin: 0 5px 0 5px;
    vertical-align: bottom;
    display: inline;
    float: unset;
}

#idTabPdProductAttributesList .product-quantity input.qtyfield {
  width: 100%;
  text-align: center;
  height: 48px;
  border: 0;
  border-radius: 5px;
}

#idTabPdProductAttributesList  .product-quantity .qty {

  margin-right: 10px;
}


@media (max-width: 768px) {
  #idTabPdProductAttributesList .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid #d6d4d4; }
    #idTabPdProductAttributesList .table-responsive > .table {
      margin-bottom: 0;
      background-color: #fff; }
      #idTabPdProductAttributesList .table-responsive > .table > thead > tr > th,
      #idTabPdProductAttributesList .table-responsive > .table > thead > tr > td,
      #idTabPdProductAttributesList .table-responsive > .table > tbody > tr > th,
      #idTabPdProductAttributesList .table-responsive > .table > tbody > tr > td,
      #idTabPdProductAttributesList .table-responsive > .table > tfoot > tr > th,
      #idTabPdProductAttributesList .table-responsive > .table > tfoot > tr > td {
        white-space: nowrap; }
    #idTabPdProductAttributesList .table-responsive > .table-bordered {
      border: 0; }
      #idTabPdProductAttributesList .table-responsive > .table-bordered > thead > tr > th:first-child,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > thead > tr > td:first-child,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > tbody > tr > th:first-child,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > tbody > tr > td:first-child,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > tfoot > tr > th:first-child,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > tfoot > tr > td:first-child {
        border-left: 0; }
      #idTabPdProductAttributesList .table-responsive > .table-bordered > thead > tr > th:last-child,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > thead > tr > td:last-child,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > tbody > tr > th:last-child,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > tbody > tr > td:last-child,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > tfoot > tr > th:last-child,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > tfoot > tr > td:last-child {
        border-right: 0; }
      #idTabPdProductAttributesList .table-responsive > .table-bordered > thead > tr:last-child > th,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > thead > tr:last-child > td,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > tbody > tr:last-child > th,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > tbody > tr:last-child > td,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > tfoot > tr:last-child > th,
      #idTabPdProductAttributesList .table-responsive > .table-bordered > tfoot > tr:last-child > td {
        border-bottom: 0; }
}

#idTabPdProductAttributesList td.option_gty {min-width: 320px;}