html {
        background: #bbc3c6;
        font: 62.5%/1.5em "Trebuchet Ms", helvetica;
      }

      * {
        box-sizing: border-box;
        -webkit-font-smoothing: antialiased;
        /* font-smoothing: antialiased; */
      }
      
      /* @font-face {
          font-family: 'Shopper';
          src: url('http://www.shopperfont.com/font/Shopper-Std.ttf');
      } */
      
      .shopper {
        text-transform: lowercase;
        /* font: 2em 'Shopper', sans-serif; */
        line-height: 0.5em;
        display: inline-block;
      }
      
      
      
      h1 {
        text-transform: uppercase;
        font-weight: bold;
        font-size: 2.5em;
      }
      
      p {
        font-size: 1.5em;
        color: #8a8a8a;
      }
      
      input {
        border: 0.3em solid #bbc3c6;
        padding: 0.5em 0.3em; 
        font-size: 1.4em;
        color: #8a8a8a;
        text-align: center;
      }
      
      img {
        max-width: 9em;
        width: 100%;
        overflow: hidden; 
        margin-right: 1em;
      }
      
      a {
        text-decoration: none;
      }
      
      .container {
        /* max-width: 75em; */
        width: 100%;
        /* margin: 40px auto;   */
        overflow: hidden;
        position: relative;
        
        border-radius: 0.6em;
        background: #ecf0f1;
        box-shadow: 0 0.5em 0 rgba(138, 148, 152, 0.2);
      }
      
      .heading {
        padding: 0.2em;
        position: relative;
        z-index: 1;
        color: #f7f7f7;
        background: #f34d35;
      }
      
      .cart {
        margin: 0em 0;
        overflow: hidden;
      }
      
      .cart.is-closed {
        height: 0;
        margin-top: -2.5em;
      }
      
      .table {
        padding: 5px;
        background: #ffffff;
        border-radius: 0.6em;
        overflow: hidden;
        clear: both;
        margin-bottom: 1.8em;
      }
      
      
      .layout-inline > * {
        display: inline-block;
      }
      
      .align-center {
        text-align: center;
      }
      
      .th {
        background: #f34d35;
        color: #fff;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1.5em;
      }
      
      .tf {
        background: #f7f7f7;
        text-transform: uppercase;
        text-align: right;
        font-size: 1.2em;  
        height: 60px;
      }
      .tf .col{
        padding: 0em;
        margin: 0em;
      }
      .tf p {
        color: #111;
        font-weight: bold;
        margin: auto;
      }
      
      .col {
        padding: 1em;
        width: 12%;
      }
      
      .col-pro {
        width: 44%;
      }
      .data{
        max-height: 300px;
        overflow-y: scroll;
        
      }
      .col-pro > * {
        vertical-align: middle;
      }
      
      .col-qty {
        text-align: center;
        width: 17%;
      }
      /* .col-numeric p { */
        /* font: bold 1.8em helvetica; */
      /* } */
      .col-action a {
        text-align: center;
      }
      .col-action a {

        font: bold 2.2em helvetica; 
        color: black;
      }
      .col-total p {
        color: #12c8b1;
      }
      .tf .row{
        height: 25px;
        padding: 10px 10px;

      }
      .tf .col {
        width: 20%;
      }
      
      .row > div {
        vertical-align: middle;
      }
      
      .row-bg2 {
        background: #f7f7f7;
      }
      
      .visibility-cart {
        position: absolute;
        color: #fff;
        top: 0.5em;
        right: 0.5em;
        font:  bold 2em arial;
        border: 0.16em solid #fff;
        border-radius: 2.5em;
        padding: 0 0.22em 0 0.25em ;
      }
      
      .col-qty > * {
        vertical-align: middle; 
      }
      
      .col-qty > input {
        max-width: 2.6em;
      }
      
      
      a.qty {
        width: 1em;
        line-height: 1em;
        border-radius: 2em;
        font-size: 2.5em;
        font-weight: bold;
        text-align: center;
        background: #43ace3;  
        color: #fff;
      }
      
      a.qty:hover {
        background: #3b9ac6;
      }
      
      .btn {
        padding: 10px 30px;
        border-radius: 0.3em;
        font-size: 1.4em;
        font-weight: bold;
        background: #43ace3;
        color: #fff;
        box-shadow: 0 3px 0 rgba(59,154,198, 1)
      }
      
      .btn:hover {
        box-shadow: 0 3px 0 rgba(59,154,198, 0)
      }
      
      .btn-update {
        float: right;
        margin: 0 0 1.5em 0;
      }
      
      .transition {
        transition: all 0.3s ease-in-out;
      }
      .address {
        margin-left: 10px;
        width: 99%;
      }
      #address_label {
        width: 99%;
        height: 80px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 10px;
        background-color: #f8f8f8;
        font-size: 16px;
        margin: 5px 5px;
        /* display: block;  */
        /* margin-left: auto; 
        margin-right: auto;
        margin-bottom: 40px; */
        resize: none;
      }
      .address input{
        width: 49%;
        box-sizing: border-box;
        margin: 5px 5px;
        border: 2px solid #ccc;
        border-radius: 10px;
        background-color: #f8f8f8;
        font-size: 16px;
      }
      .select2-container {
        width: 49% !important;
        box-sizing: border-box !important;
        margin: 5px 5px !important;
        border: 2px solid #ccc !important;
        border-radius: 10px !important;
        background-color: #f8f8f8 !important;
        font-size: 16px !important;
        vertical-align: middle !important;
      }
      @media screen and ( max-width: 755px) {
        .address input, #address_label{
          width: 97%;
        }
        .select2-container {
          width: 97% !important;;
        }
        .container {
          width: 100%;
        }
        .data{
        max-height: 400px;
        overflow-y: scroll;
      }
        .col-pro {
          width: 30%;
        }
        .col-price {
          width: 15%;
        }
        .col-qty {
          width: 12%;
        }
        .col-total{
          width: 15%;
        }
        .col-action{
          text-align: end;

          width: 17%;
        }
        a.qty{
          margin-left: 4px;
        }
        .tf .col {
          width: 28%;
        }
        img {
          max-width: 100%;
          margin-bottom: 1em;
        }
      }
      
      @media screen and ( max-width: 550px) {
        .container {
          width: 100%;
        }
        .data{
        max-height: 400px;
        overflow-y: scroll;
      }
        .col-pro {
          width: 28%;
        }
        .col-price {
          width: 16%;
        }
        .col-qty {
          width: 12%;
        }
        .col-total{
          width: 16%;
        }
        .col-action{
          text-align: end;
          width: 20%;
        }
        /* .wishList{
          margin-left: 15px;
        } */
        a.qty{
          margin-left: 5px;
        }
        .address input, #address_label{
          width: 95%;
        }
        .select2-container {
          width: 95% !important;;
        }
      }
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }