
<style>

:root {
 --page-back-color: rgba(200, 200, 200, 0.9);
 --white: #ffffff;
}
div{ /*cant select any text in div */
   -webkit-user-select: none; /* Safari */        
   -moz-user-select: none;  Firefox 
   -ms-user-select: none; /* IE10+/Edge */
   user-select: none; /* Standard */
}

/*Common Components Start*/
   /*Button*/
      .m-btn{
         background-color: #fff; /* Green */
         padding: 1px 30px 1px 30px;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         font-size: 16px;
         font-weight: 400;
         margin: 4px 2px;
         cursor: pointer;
         color: #d34e4f; 
         border: 1px solid #fff;
         border-radius: 10px;
         box-shadow: 3px 6px 8px rgba(0,0,0,0.3);
      }
      .m-btn:hover{
         box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.5);
         letter-spacing: 1.5px;
      }
      .m-btn:disabled{
         box-shadow: 1px 4px 4px 0 rgba(0,0,0,0.4);
         letter-spacing: 0px;
         cursor: default;
      }
      @media only screen and (max-width: 600px) {
         .m-btn{
            font-size: 14px;
         }
         .m-btn:hover{
            letter-spacing: 1px;
         }
      }
   /*Button*/
   /*Table*/
      /*Default*/
         .common-table{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: auto;
            overflow-y: auto;
            overflow-x: auto;
            background-color: #bcbcbc;
            border-radius: 10px;
         }
         .common-table.t-back{
            background-color: rgba(188, 188, 188, 0.6);
         }
         .common-table table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            font-size: 15px;
            border: none;
         }
         .common-table.sticky-header table thead{
            position: sticky;
            top: 0;
         }
         .common-table table thead tr th{
            text-align: center;
         }
         .common-table thead th {
             padding: 10px;
             text-align: left;
             text-shadow: 1px 1px 1px #000;
             color: #fff;
             background-color: #676364;
             border: none;
         }
         .common-table.t-back thead th {
             background-color: rgba(103, 99, 100, 0.8);
         }
         .common-table thead th:first-child {
             border-radius: 15px 0 0 15px;
         }
         .common-table thead th:last-child {
             border-radius: 0 15px 15px 0;
         }
         .common-table table tbody{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 98%;
            margin-left: 1%;
         }
         .common-table table thead,tbody tr{
            display: table;
            table-layout: fixed;
            width: 100%;
         }
         .common-table table tbody tr td{
            height: 15px;
            text-align: center;
            /*transition: all 0.5s;*/
         }
         .common-table table tbody tr td:hover{
         }
         .common-table tbody td {
             padding: 5px;
             text-shadow: 1px 1px 1px #fff;
         }
         .common-table.t-back tbody td {
             text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
         }
         .common-table tbody td {
             border: none;
             background-color: #fff;
             color: #d34e4f;
         }
         .common-table.t-back tbody td {
            background-color: rgba(255, 255, 255, 0.7);
             /*color: #d34e4f;*/
             color: #eb3133;
         }
         .common-table tbody tr{
            border-top: 1px solid #bcbcbc;
            border-bottom: 1px solid #bcbcbc;
            cursor: pointer;
         }
         .common-table.t-back tbody tr{
            border-top: 1px solid rgba(0, 0, 0, 0);
            border-bottom: 1px solid rgba(0, 0, 0, 0);
         }
         .common-table tbody tr td:first-child {
             border-radius: 10px 0 0 10px;
         }
         .common-table tbody tr td:last-child {
             border-radius: 0 10px 10px 0;
         }      
         @media only screen and (max-width: 600px) {
            .common-table table{
               font-size: 12px;
            }
            .common-table tbody td {
                padding: 3px;
            }
            .common-table table tbody tr td{
               height: 12px;
               text-align: center;
               /*transition: all 0.5s;*/
            }
            .common-table table tbody tr td:hover{
               height: 15px;
            }
         }
      /*Default*/
      /*Transparent Table*/
         .trans-table{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: auto;
            overflow-y: auto;
            overflow-x: auto;
            background-color: #bcbcbc;
            border-radius: 5px;  
         }
         .trans-table table{
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            font-size: 15px ;
            background-color: rgba(188, 188, 188, 0.5);
            border: none;
         }
         .trans-table.sticky-header table thead{
            position: sticky;
            top: 0;
         }
         .trans-table table thead tr th{
            text-align: center;
         }
         .trans-table thead th {
             padding: 10px;
             text-align: left;
             text-shadow: 1px 1px 1px #000;
             color: #fff;
             background-color: #676364;
             border: none;
         }
         .trans-table thead th:first-child {
             border-radius: 10px 0 0 10px;
         }
         .trans-table thead th:last-child {
             border-radius: 0 10px 10px 0;
         }

         .trans-table table tbody{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 98%;
            margin-left: 1%;
         }
         .trans-table table thead,tbody tr{
            display: table;
            table-layout: fixed;
            width: 100%;
         }
         .trans-table table tbody tr td{
            height: 15px;
            text-align: center;
            /*transition: all 0.5s;*/
         }
         .trans-table table tbody tr td:hover{
         }
         .trans-table tbody td {
             padding: 5px;
             text-shadow: 1px 1px 1px #fff;
         }
         .trans-table tbody td {
             border: none;
             background-color: #fff;
             color: #d34e4f;
         }
         .trans-table tbody tr{
            border-top: 1px solid #bcbcbc;
            border-bottom: 1px solid #bcbcbc;
            cursor: pointer;
         }
         .trans-table tbody tr td:first-child {
             border-radius: 10px 0 0 10px;
         }
         .trans-table tbody tr td:last-child {
             border-radius: 0 10px 10px 0;
         }      
         @media only screen and (max-width: 600px) {
            .trans-table table{
               font-size: 13px;
            }
            .trans-table tbody td {
                padding: 3px;
            }
            .trans-table table tbody tr td{
               height: 12px;
               text-align: center;
               /*transition: all 0.5s;*/
            }
            .trans-table table tbody tr td:hover{
               height: 15px;
            }
         }
      /*Transparent Table*/
   /*Table*/

/*Common Components End*/

/*Page Start*/
   *{
      padding: 0;
      margin: 0;
   }
   body{
      top: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
      display: block;
      float: none;
      position: relative;
      background-color: rgba(0, 0, 0, 1);
      z-index: -5;
   }
   .container-page{
      position: absolute;
      margin-top: 80px;
      padding-bottom: 40px;
      width: 100%;
      height: auto;
      background-color: rgba(0, 0, 0, 0);
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: -1;
   }

   .container{
      width: 50%;
      height: auto;
      min-height: 100vh;
      background-color: rgba(200, 200, 200, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: -3;
   }
   .container.print{
      width: 100%;
   }
   @media only screen and (max-width: 600px) {
      .container-page{
          margin-top: 40px;
      }
      .container{
          width: 100%;
      }
   }        
/*Page End*/

/*Header Start*/
   /*main base*/
      .header{
         position: fixed;
         top: 0;
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         z-index: 1;
      }
      .header-container{
         width: 50%;
         height: 100px;
         background-color: #fff;
         border-radius: 0px 0px 25px 25px;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
      }
      .logo{
         width: auto;
         height: auto;
         margin-left: 20px;
         cursor: default;
         display: flex;
         flex-direction: row;
      }
      .logo img{
         width: 140px;
         height: auto;
      }
      .logo .uname{
         font-family: 'Fira Sans Condensed', sans-serif;
         margin-top: 11%;
         margin-left: 15px;
      }
      .m-minicart{
         margin-right: 20px;
         width: auto;
         height: 90%;
         display: flex;
         flex-direction: column;
         align-items: center;
         align-content: center;
         /*justify-content: space-between;*/
         cursor: pointer;
      } 
      .basket-and-qty{
         width: auto;
         height: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*background-color: red;*/
      }
      .m-minicart:hover .basket-and-qty .basket{
         color: rgba(100, 100, 100, 0.8);
      }
      .basket-and-qty .basket{
         font-size: 30px;
         color: rgba(150, 150, 150, 0.7);
      }
      .basket-and-qty .qty{
         margin-top:-10px;
         margin-left: -5px;
         font-size: 12px;
         font-weight: bold;
         background-color: #000;
         color: #fff;
         border-radius: 50%;
         padding: 0px 5px 0px 5px;
      }
      .m-minicart-total{
         margin: -20px 0px 0px 10px;
         width: auto;
         text-align: center;
         font-family: 'Open Sans', sans-serif;
         font-size: 14px;
         font-weight: bold;
      }
      @media only screen and (max-width: 600px) {
         .header-container{
             width: 100%;
             height: 60px;
             border-radius: 0px 0px 15px 15px;
         }
         .logo img{
             width: 80px;
             height: auto;
         }
         .basket-and-qty .basket{
             font-size: 25px;
         }
         .basket-and-qty .qty{
             font-size: 10px;
         }
         .m-minicart-total{
             margin: -10px 0px 0px 10px;
             font-size: 11px;
         }
      }
   /*main base*/   
   /*whole cart start*/
      .all-cart{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.3);
         display: none;
         flex-direction: column;
         align-items: center;
      }
      .card-details{
         margin-top: -600px;
         width: 400px;
         height: auto;
         max-height: 550px;
         background-color: white;
         border-radius: 20px 20px 20px 20px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*transition: all 0.5s;*/
      }
      .card-details.show-cart{
         margin-top: 150px;
      }
      .card-details .inner{
         width: 330px;
         height: 85%;
         border: 1px solid #ff1e22;
         border-radius: 20px 20px 20px 20px;
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .card-details .inner .close{
         margin-top: -30px;
         margin-left: 350px;
         font-size: 18px;
         color: red;
         cursor: pointer;
      }
      .card-details .inner .topic{
         margin-top: -5px;
         padding: 0px 20px 0px 20px;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 18px;
         font-weight: bold;
         color: #880406;
         background-color: #fff;
      }
      .card-details .inner .if-empty{
         width: 90%;
         height: 90%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 30px;
         font-weight: bold;
         text-align: center;
         color: #880406;
         background-color: #fff;
      }
      .card-details .inner .items{
         margin-top: 5px;
         width: 90%;
         /*height: auto;*/
         max-height:200px;
         overflow-y: auto;
         display: flex;
         flex-direction: column;
         align-items: center;
         /*background-color: rgba(0, 0, 0, 0.5);*/
      }
      .card-details .inner .items .itm{
         margin-top: 10px;
         margin-bottom: 10px;
         padding: 5px;
         width: 95%;
         min-height: 75px;
         /*
         max-height: 85px;*/
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
         border-radius: 10px;
         box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
         overflow: hidden;
      }
      .card-details .inner .items .itm:hover{
         box-shadow: 0px 3px 10px 0 rgba(0,0,0,0.5);
      }
      .card-details .inner .items .itm .prd-img{
         width: 40%;
         height: 95%;
         border: 1px solid #fff;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         background-color: rgba(0, 0, 0, 0);
      }
      .card-details .inner .items .itm .prd-img img{
         width: 100%;
         height: auto;
      }
      .card-details .inner .items .itm .prd-det{
         padding-left: 20px;
         width: 50%;
         height: auto;
         border: 1px solid #fff;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         color: rgba(50, 50, 50, 0.8)
         background-color: rgba(0, 0, 0, 0.2);
      }
      .card-details .inner .items .itm .prd-det .itm-name{
         font-size: 16px;
         font-weight: bold;
      }
      .card-details .inner .items .itm .prd-det .itm-imc{
         font-size: 14px;
      }
      .card-details .inner .items .itm .prd-det .itm-qty{
         font-size: 16px;
      }
      .card-details .inner .items .itm .prd-det .itm-price{
         font-size: 16px;
      }
      .card-details .inner .items .itm .prd-delete{
         width: 10%;
         height: 95%;
         border: 1px solid #fff;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         background-color: rgba(0, 0, 0, 0);
      }
      .card-details .inner .items .itm .prd-delete i{
         color: red;
         font-size: 20px;
         cursor: pointer;
      }
      .card-details .inner .items .itm .prd-delete i:hover{
         color: red;
         font-size: 23px;
      }
      .card-details .inner .items .itm .prd-delete i:hover{
         color: red;
         font-size: 23px;
      }
      .card-details .inner .prd-delete-all{
         margin-top: 5px;
         width: auto;
         height: 80px;
         min-height: 50px;
         border: 1px solid #fff;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*background-color: rgba(0, 0, 0, 0.5);*/
      }
      .card-details .inner .prd-delete-all i{
         font-size: 25px;
         color: red;
         cursor: pointer;
      }
      .card-details .inner .prd-delete-all i:hover{
         font-size: 27px;
      }
      .card-details .inner .prd-delete-all .txt{
         font-size: 14px;
         color: gray;
      }
      .card-details .inner .cart-total-container{
         margin-top: 5px;
         margin-bottom: 5px;
         padding: 7px;
         box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
         border-radius: 10px;
         width: 60%;
         height: auto;
         border: 1px solid #fff;
         display: flex;
         flex-direction: column;
         align-items: center;
         color: #000;
         font-size: 16px;
         font-weight: bold;
      }
      .card-details .inner .cart-total-container .row{
         margin-top: 5px;
         margin-bottom: 5px;
         width: 100%;
         height: auto;
         border: 1px solid #fff;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
      }
      .card-details .inner .cart-total-container .row .left{
         width: 50%;
         height: auto;
         border: 1px solid #fff;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
      }
      .card-details .inner .cart-total-container .row .right{
         width: 50%;
         height: auto;
         border: 1px solid #fff;
         display: flex;
         flex-direction: column;
         align-items: flex-end;
         justify-content: center;
      }
      .card-details .inner .checkout-btn{
         margin-top: 15px;
         margin-bottom: 40px;
         font-size: 25px;
      }

      @media only screen and (max-width: 600px) {
         .all-cart{
             width: 100%;
         }
         .card-details{
            width: 300px;
            max-height: 450px;
         }
         .card-details.show-cart{
            margin-top: 70px;
         }
         .card-details .inner{
            width: 250px;
            height: 85%;
            border-radius: 20px;
         }
         .card-details .inner .close{
            margin-top: -25px;
            margin-left: 260px;
         }         
         .card-details .inner .items{
            height: auto;
            min-height: 100px;
            max-height: 40%;
            margin-top: 5px;
            margin-bottom: 5px;
         }
         .card-details .inner .items .itm{
            padding: 3px;
         }
         .card-details .inner .items .itm .prd-img{
            width: 35%;
         }
         .card-details .inner .items .itm .prd-det{
            padding-left: 2px;
            width: 57%;
         }
         .card-details .inner .items .itm .prd-det .itm-name{
            font-size: 15px;
            font-weight: bold;
         }
         .card-details .inner .items .itm .prd-det .itm-imc{
            font-size: 11px;
         }
         .card-details .inner .items .itm .prd-det .itm-qty{
            font-size: 13px;
         }
         .card-details .inner .items .itm .prd-det .itm-price{
            font-size: 13px;
         }
         .card-details .inner .prd-delete-all{
            margin-top: 1px;
            min-height: 30px;
            max-height: 40px;
         }
         .card-details .inner .items .itm .prd-delete{
            width: 8%;
         }
         .card-details .inner .items .itm .prd-delete i{
            font-size: 15px;
         }
         .card-details .inner .items .itm .prd-delete i:hover{
            font-size: 17px;
         }
         .card-details .inner .prd-delete-all i{
            font-size: 18px;
         }
         .card-details .inner .prd-delete-all i:hover{
            font-size: 20px;
         }
         .card-details .inner .prd-delete-all .txt{
            font-size: 11px;
            color: gray;
         }
         .card-details .inner .cart-total-container{
            margin-top: 5px;
            width: 80%;
            margin-bottom: 5px;
         }
         .card-details .inner .cart-total-container .row{
            margin-top: 1px;
            margin-bottom: 1px;
         }
         .card-details .inner .checkout-btn{
            margin-top: 15px;
            /*margin-bottom: 40px;*/
            font-size: 20px;
         }
      }
   /*whole cart end*/
   /*loading start*/
      .loading{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .loader-txt{
         margin-bottom: 10px;
         color: #fff;
         font-size: 30px;
         font-weight: bold;
      }
      .loader {
        border: 13px solid #f3f3f3;
        border-radius: 50%;
        border-top: 13px solid #04a2b4;
        width: 80px;
        height: 80px;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      
      @-webkit-keyframes spin { 
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
        
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      @media only screen and (max-width: 600px) {
         .loading{
            width: 100%;
         }
         .loader-txt{
            font-size: 20px;
         }
         .loader{
            width: 50px;
            height: 50px;
            border: 10px solid #f3f3f3;
            border-radius: 50%;
            border-top: 10px solid #04a2b4;
         }
      }
   /*loading end*/
   /*under-construction start*/
      .under-construction{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 1);
         display: none;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .under-loader-txt{
         margin-bottom: 10px;
         color: red;
         font-size: 30px;
         font-weight: bold;
         text-align: center;
      }
      .loader {
        border: 13px solid #f3f3f3;
        border-radius: 50%;
        border-top: 13px solid #04a2b4;
        width: 80px;
        height: 80px;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      
      @-webkit-keyframes spin { 
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
        /* Safari */
      }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      @media only screen and (max-width: 600px) {
         .under-construction{
            width: 100%;
         }
         .loader-txt{
            font-size: 20px;
         }
         .loader{
            width: 50px;
            height: 50px;
            border: 10px solid #f3f3f3;
            border-radius: 50%;
            border-top: 10px solid #04a2b4;
         }
      }
   /*under-construction end*/
   /*guide-line start*/
      .guide{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      @media only screen and (max-width: 600px) {
         .guide{
            width: 100%;
         }
      }
   /*guide-line end*/
   /*transfer start*/
      .transfer-container{
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
         /*transition: all 0.5s;*/
      }
      .transfer-ui{
         margin-top: 1000px;
         margin-bottom: 20px;
         width: 70%;
         height: auto;
         border-radius: 10px;
         background-color: #fff;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*transition: all 0.5s;*/
      }
      .transfer-ui.show-trans{
         margin-top: 150px;
      }
      .transfer-ui.go-up{
         margin-top: -1750px;
         margin-bottom: 800px;
      }
      .transfer-ui .inner{
         padding-bottom: 20px;
         width: 90%;
         height: 80%;
         border: 1px solid #ff1e22;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .transfer-ui .inner .close{
         margin-top: -30px;
         margin-left: 103%;
         font-size: 18px;
         color: red;
         cursor: pointer;
      }
      .transfer-ui .inner .topic{
         margin-top: -12px;
         padding: 0px 20px 0px 20px;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 18px;
         font-weight: bold;
         color: #880406;
         background-color: #fff;
      }      
      .transfer-ui .inner .details{
         margin-top: 10px;
         padding-top: 10px;
         width: 90%;
         height: 400px;
         display: flex;
         flex-direction: column;
         align-items: center;
         overflow-y: auto;
         /*transition: all 0.5s;*/
      }
      .transfer-ui .inner .details.shrink{
         margin-top: 0px;
         padding-top: 0px;
         height: 0px;
      }
      .transfer-ui .inner .addBank-container{
         margin-top: 10px;
         width: 40%;
         height: 25px;
         display: flex;
         flex-direction: column;
         align-items: center;
         overflow:hidden;
         box-shadow: 0px 2px 6px 0 rgba(0,0,0,0.4);
         border-radius: 15px;
         /*transition: all 0.5s;*/
      }
      .transfer-ui .inner .addBank-container.expand{
         height: 420px;
         width: 90%;
      }
      .transfer-ui .inner .addBank-container .add-bank-topic{
         width: 100px;
         height: 20px;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         font-size: 17px;
         font-weight: bold;
         color: #880406;
      }
      .transfer-ui .inner .addBank-container .add-bank-topic .plus{
         margin-top: 2px;
         width: auto;
         height: auto;
         cursor: pointer;
         /*transition: all 0.5s;*/
      }
      .transfer-ui .inner .addBank-container .add-bank-topic .plus.rotate{
         transform: rotate(45deg);
      }
      .transfer-ui .inner .addBank-container .add-bank-form{
         padding-left: 10px;
         padding-right: 10px;
         width: 80%;
         height: auto;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
      }
      .transfer-ui .inner .addBank-container .add-bank-form span{
         margin-top: 10px;
         font-size: 17px;
      }
      .transfer-ui .inner .addBank-container .add-bank-form input[type=text] {
         width: 100%;
         box-sizing: border-box;
         border: none;
         border-bottom: 2px solid red;
      }
      .transfer-ui .inner .addBank-container .add-bank-form input[type=text]:focus{
         outline: none !important;
         border-bottom: 2px solid red;
      }
      .transfer-ui .inner .addBank-container .add-bank-form .search-branch{
         display: flex;
         flex-direction: row;
         align-items: center;
         width: 100%;
      }
      .transfer-ui .inner .addBank-container .add-bank-form .search-branch input[type=text] {
         margin: 2px 0px;
         padding: 2px;
         width: 100%;
         box-sizing: border-box;
         border: 1px solid #ddd;
         border-radius: 5px;
      }
      .transfer-ui .inner .addBank-container .add-bank-form .search-branch input[type=text]:focus{
         outline: none !important;
      }
      .transfer-ui .inner .addBank-container .add-bank-form .search-branch button{
         background-color: white;
         border: none;
         color: black;
         padding: 2px 5px;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         font-size: 12px;
         margin: 0;
         transition-duration: 0.4s;
         cursor: pointer;
         border: 1px solid #ddd;
         border-radius: 5px;
      }
      .transfer-ui .inner .addBank-container .add-bank-form .search-branch button:hover{
         background-color: #ddd;
         color: white;         
      }
      .transfer-ui .inner .details .acc-container{
         width: 90%;
         min-height: 80px;
         margin-top: 7px;
         margin-bottom: 7px;
         border-radius: 10px;
         box-shadow: 0px 2px 6px 0 rgba(0,0,0,0.4);
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
      }
      .transfer-ui .inner .details .acc-container:hover{
         box-shadow: 0px 2px 7px 0 rgba(0,0,0,0.6);
      }
      .transfer-ui .inner .details .acc-container .col_1{
         width: 10%;
         height: 95%;
         background-color: rgba(0, 0, 0, 0);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .transfer-ui .inner .details .acc-container .col_1 input{
         transform: scale(1.2);
      }
      .transfer-ui .inner .details .acc-container .col_2{
         width: 65%;
         height: auto;
         padding-left: 10px;
         background-color: rgba(0, 0, 0, 0);
         display: flex;
         flex-direction: column;
         align-items: flex-start;
      }
      .transfer-ui .inner .details .acc-container .col_2 .name{
         font-size: 17px;
         color: red;
      }
      .transfer-ui .inner .details .acc-container .col_2 .accNo{
         font-size: 15px;
         color: gray;
      }
      .transfer-ui .inner .details .acc-container .col_2 .bank{
         font-size: 15px;
         color: black;
      }
      .transfer-ui .inner .details .acc-container .col_2 .branch{
         font-size: 15px;
         color: black;
      }
      .transfer-ui .inner .details .acc-container .col_3{
         width: 30%;
         height: 95%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .transfer-ui .inner .details .acc-container .col_3 input[type=text] {
         margin-top: 35px;
         width: 90%;
         box-sizing: border-box;
         border: none;
         border-bottom: 2px solid red;
      }
      .transfer-ui .inner .details .acc-container .col_3 input[type=text]:focus{
         outline: none !important;
         border-bottom: 2px solid red;
      }
      .transfer-ui .inner .total-container{
         margin-top: 10px;
         padding-bottom: 5px;
         width: 90%;
         height: auto;
         border-radius: 10px;
         box-shadow: 0px 2px 6px 0 rgba(0,0,0,0.4);
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .transfer-ui .inner .total-container .total-amount{
         margin-top: 10px;
         margin-bottom: 10px;
         width: 70%;
         height: auto;
         display: flex;         
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         font-size: 18px;
      }
      .transfer-ui .inner .total-container .total-amount input[type=text] {
         font-size: 15px;
         width: 100px;
         box-sizing: border-box;
         border: none;
         border-bottom: 2px solid red;
      }
      .transfer-ui .inner .total-container .total-amount input[type=text]:focus{
         outline: none !important;
         border-bottom: 2px solid red;
      }
      .transfer-ui .inner .total-container .total-amount input[type=text]:disabled{
         background-color: #fff;
      }

      .trans-complete-ui{
         margin-top: -10px;
         width: 60%;
         height: 300px;
         border-radius: 10px;
         background-color: #fff;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*transition: all 0.5s;*/
         transform: scale(0);
      }
      .trans-complete-ui.go-up{
         margin-top: 550px;
         transform: scale(1.0);
         /*margin-top: -1750px;*/
      }
      .trans-complete-ui .inner{
         padding-bottom: 5px;
         width: 90%;
         height: 77%;
         border: 1px solid #ff1e22;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .trans-complete-ui .inner .details{
         margin-top: 10px;
         padding-top: 10px;
         width: 90%;
         height: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         overflow-y: auto;
         /*transition: all 0.5s;*/
      }

      @media only screen and (max-width: 600px) {
         .transfer-container{
            width: 100%;
         }
         .transfer-ui{
            width: 90%;
            height: auto;
            border-radius: 10px;
         }
         .transfer-ui .inner{
            width: 85%;
         }
         .transfer-ui .inner .close{
            margin-top: -20px;   
            margin-left: 102%;
         }
         .transfer-ui .inner .topic{
            margin-top: -15px;
         }
         .transfer-ui .inner .details{
            width: 95%;
            height: 300px;
         }
         .transfer-ui .inner .addBank-container{
            margin-top: 5px;
            width: 50%;
         }
         .transfer-ui .inner .addBank-container .add-bank-topic{
            font-size: 16px;
         }         
         .transfer-ui .inner .addBank-container .add-bank-form span{
            margin-top: 7px;
            font-size: 16px;
         }
         .transfer-ui .inner .addBank-container .add-bank-form input[type=text] {
            width: 100%;
            box-sizing: border-box;
            border: none;
            border-bottom: 2px solid red;
         }

         .transfer-ui .inner .details .acc-container{
            min-height: 90px;
         }         
         .transfer-ui .inner .details .acc-container .col_2 .name{
            font-size: 15px;
            color: red;
         }
         .transfer-ui .inner .details .acc-container .col_1 input{
            transform: scale(1);
         }
         .transfer-ui .inner .details .acc-container .col_2 .accNo{
            font-size: 15px;
            color: gray;
         }
         .transfer-ui .inner .details .acc-container .col_2 .bank{
            font-size: 15px; 
            color: black;
         }
         .transfer-ui .inner .details .acc-container .col_2 .branch{
            font-size: 15px;
            color: black;
         }
         .transfer-ui .inner .total-container .total-amount{
            margin-top: 2px;
            margin-bottom: 2px;
            width: 80%;
            font-size: 14px;
         }
         .transfer-ui .inner .total-container .total-amount input[type=text] {
            font-size: 12px;
            width: 70px;
            box-sizing: border-box;
            border: none;
            border-bottom: 2px solid red;
         }         

         .trans-complete-ui{
            margin-top: 0px;
            width: 90%;
            height: 300px;
         }
         .transfer-ui.show-trans{
            margin-top: 70px;
         }

      }
   /*transfer end*/
   /*send start*/
      .send-container{ 
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
         overflow: hidden;
      }
      .send-ui{
         margin-top: 1000px;
         margin-bottom: 600px;
         width: 70%;
         height: 300px;
         border-radius: 10px;
         background-color: #fff;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*transition: all 0.5s;*/
      }
      .send-ui.show-send{
         margin-top: 300px;
      }

      .send-ui.go-up{
         margin-top: -400px;
         margin-bottom: 350px;
      }
      .send-ui .inner{
         width: 90%;
         height: 75%;
         border: 1px solid #ff1e22;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .send-ui .inner .close{
         margin-top: -20px;
         margin-left: 103%;
         font-size: 18px;
         color: red;
         cursor: pointer;
      }
      .send-ui .inner .topic{
         margin-top: -10px;
         padding: 0px 20px 0px 20px;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 18px;
         font-weight: bold;
         color: #880406;
         background-color: #fff;
      }      
      .send-ui .inner .details{
         margin-top: 10px;
         padding-top: 10px;
         width: 90%;
         height: 100%;
         min-height: 300px;
         display: flex;
         flex-direction: column;
         align-items: center;
         overflow-y: hidden;
      }      
      .send-ui .inner .details .send-search-container{
         width: 80%;
         min-height: 40px;
         background-color: red;
         border-radius: 20px;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
      }
      .send-ui .inner .details .send-search-container input{
         width: 80%;
         margin-left: 10px;
         border-radius: 10px;
         font-size: 15px;
         padding-left: 7px;
      }
      .send-ui .inner .details .send-search-container i{
         margin-right: 10px;
         color: #fff;
         font-size: 20px;
         cursor: pointer;
      }
      .send-ui .inner .details .send-result-container{
         margin-top: 1000px;
         width: 90%;
         height: 80px;
         border-radius: 20px;
         box-shadow: 0px 2px 6px 0 rgba(0,0,0,0.4);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*transition: all 0.5s;*/
      }
      .send-ui .inner .details .send-result-container.show-result{
         margin-top: 20px;
      }
      .send-ui .inner .details .send-result-container .no-result{
         width: 90%;
         height: 95%;
         display: none;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         font-size: 20px;
         color: #880406;
      }
      .send-ui .inner .details .send-result-container .found-result{
         width: 90%;
         height: 95%;
         display: flex;
         flex-direction: column;
         align-items: center;
         font-family: 'Open Sans', sans-serif;
      }
      .send-ui .inner .details .send-result-container .found-result .uname{
         font-size: 16px;
         font-weight: bold;
         color: #04a2b4;
      }
      .send-ui .inner .details .send-result-container .found-result .mobile{
         font-size: 15px;
         font-weight: bold;
         color: red;
      }
      .send-ui .inner .details .send-result-container .found-result .sending{
         margin-top: 2px;
         width: 90%;
         height: auto;
         display: flex;
         flex-direction: row;
         align-items: center;
         font-size: 14px;

      }
      .send-ui .inner .details .send-result-container .found-result .sending input[type=text] {
         margin-right: 15px;
         width: 80px;
         box-sizing: border-box;
         border: none;
         border-bottom: 2px solid red;
      }
      .send-ui .inner .details .send-result-container .found-result .sending input[type=text]:focus{
         outline: none !important;
         border-bottom: 2px solid red;
      }
      .send-complete-ui{
         margin-top: 1000px;
         width: 60%;
         height: 300px;
         border-radius: 10px;
         background-color: #fff;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*transition: all 0.5s;*/
         transform: scale(1);
      }
      .send-complete-ui.go-up{
         margin-top: 0px;
         transform: scale(1);
         /*margin-top: -1750px;*/
      }
      .send-complete-ui .inner{
         padding-bottom: 5px;
         width: 90%;
         height: 77%;
         border: 1px solid #ff1e22;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .send-complete-ui .inner .details{
         margin-top: 10px;
         padding-top: 10px;
         width: 90%;
         height: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         overflow-y: auto;
         /*transition: all 0.5s;*/
      }

      @media only screen and (max-width: 600px) {
         .send-container{ 
            width: 100%;
         }
         .send-ui{
            margin-top: 1000px;
            margin-bottom: 1000px;
            width: 90%;
         }
         .send-ui.show-send{
            margin-top: 200px;
         }
         .send-ui.go-up{
            margin-top: -400px;
            margin-bottom: 270px;
         }
         .send-ui .inner .details{
            width: 100%;
            min-height: 220px;
         }
         .send-ui .inner .details .send-result-container .found-result{
            width: 100%;
         }
         .send-ui .inner .details .send-result-container .found-result .sending{
            margin-top: 2px;
            width: 100%;
            font-size: 13px;
            padding-left: 30px;
         }
         .send-ui .inner .details .send-result-container .found-result .sending input[type=text] {
            margin-right: 5px;
            width: 60px;
         }
         .send-ui .inner .details{
            width: 100%;
         }
         .send-complete-ui{
            margin-top: 0px;
            width: 90%;
            height: 300px;
         }

      }
   /*send end*/
   /*singup start*/
      .signup-container{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
      }
      .signup-ui{
         margin-top: -700px;
         margin-bottom: 0px;
         width: 70%;
         height: 460px;
         border-radius: 10px;
         background-color: #fff;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*transition: all 0.5s;*/
      }
      .signup-ui.show-signup{
         margin-top: 110px;
      }
      .signup-ui .inner{
         width: 90%;
         height: 90%;
         border: 1px solid #ff1e22;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .signup-ui .inner .close{
         margin-top: -20px;
         margin-left: 103%;
         font-size: 18px;
         color: red;
         cursor: pointer;
      }
      .signup-ui .inner .topic{
         margin-top: -13px;
         padding: 0px 20px 0px 20px;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 18px;
         font-weight: bold;
         color: #880406;
         background-color: #fff;
      }      
      /*details 1*/
         .signup-ui .inner .details{
            margin-top: 10px;
            width: 90%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-y: hidden;
            /*transition: all 0.5s;*/
         }            
         .signup-ui .inner .details.hide{
            transform: scaleY(0.0);
         }
         .signup-ui .inner .details .form-wrap{
            height: auto;
            width: 70%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            overflow-y: auto;
         }
         .signup-ui .inner .details .form-wrap span{
            margin-top: 5px;
            width: 100%;
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            font-weight: bold;
         }
         .signup-ui .inner .details .form-wrap input[type=text]{
            font-family: 'Open Sans', sans-serif;
            padding-left: 5px;
            font-size: 14px;
            font-weight: 300;
            width: 100%;
            box-sizing: border-box;
            border: none;
            border-bottom: 2px solid red;         
         }
         .signup-ui .inner .details .form-wrap input[type=text]:focus{
            outline: none !important;
            border-bottom: 2px solid red;
         }
         .signup-ui .inner .details .form-wrap input[type=password]{
            font-family: 'Open Sans', sans-serif;
            padding-left: 5px;
            font-size: 14px;
            font-weight: 300;
            width: 100%;
            box-sizing: border-box;
            border: none;
            border-bottom: 2px solid red;
         }
         .signup-ui .inner .details .form-wrap input[type=password]:focus{
            outline: none !important;
            border-bottom: 2px solid red;
         }
         .signup-ui .inner .details .form-wrap input[type=email]{
            font-family: 'Open Sans', sans-serif;
            padding-left: 5px;
            font-size: 14px;
            font-weight: 300;
            width: 100%;
            box-sizing: border-box;
            border: none;
            border-bottom: 2px solid red;
         }
         .signup-ui .inner .details .form-wrap input[type=email]:focus{
            outline: none !important;
            border-bottom: 2px solid red;
         }
         .signup-ui .inner .details .reg-btn{
            font-size: 17px;
         }
         .signup-ui .inner .details .agree{
            display: flex;
            flex-direction: row;
            align-items: center;
         }
         .signup-ui .inner .details .agree input{
            margin-right: 5px;
         }
      /*details 1*/
      /*details 2*/
         .signup-ui .inner .details2{
            margin-top: 10px;
            width: 90%;
            height: 100%;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow-y: hidden;
            /*transition: all 0.5s;*/
            transform: scaleY(0);
         }
         .signup-ui .inner .details2.show{
            transform: scaleY(1);
         }
         .signup-ui .inner .details2 .send-otp-container{
            width: 100%;
            height: 105px;
            display: flex;
            flex-direction: column;
            align-items: center;
            /*transition: all 0.5s;*/
         }
         .signup-ui .inner .details2 .send-otp-container.hide{
            transform: scaleY(0);
         }
         .signup-ui .inner .details2 .send-otp-container input[type=text]{
            font-family: 'Open Sans', sans-serif;
            margin-top: 7px;
            padding-left: 5px;
            font-size: 17px;
            font-weight: 300;
            text-align: center;
            width: 40%;
            box-sizing: border-box;
            border: none;
            border-bottom: 2px solid red;
         }
         .signup-ui .inner .details2 .send-otp-container input[type=text]:focus{
            outline: none !important;
         }
         .signup-ui .inner .details2 .send-otp-container .send-otp-btn{
            margin-top: 15px;
            font-size: 20px;
         }
         .signup-ui .inner .details2 .receive-otp-container{
            width: 100%;
            height: 105px;
            display: none;
            flex-direction: column;
            align-items: center;
            /*transition: all 0.5s;*/
            transform: scaleY(0);
            /*background-color: gray;*/
         }
         .signup-ui .inner .details2 .receive-otp-container.show{
            transform: scaleY(1);
         }
         .signup-ui .inner .details2 .receive-otp-container input[type=text]{
            font-family: 'Open Sans', sans-serif;
            margin-top: 7px;
            padding-left: 5px;
            font-size: 17px;
            font-weight: 300;
            text-align: center;
            width: 40%;
            box-sizing: border-box;
            border: none;
            border-bottom: 2px solid red;
         }
         .signup-ui .inner .details2 .receive-otp-container input[type=text]:focus{
            outline: none !important;
         }
         .signup-ui .inner .details2 .receive-otp-container .receive-otp-btn{
            margin-top: 15px;
            font-size: 20px;
         }
      /*details 2*/
      /*sup modal */
         .sup-modal{
            align-self: center;
            padding: 50px;
            margin-top: -560px;
            margin-bottom: 0px;
            width: 60%;
            height: 520px;
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0.8);
            display: none;
            flex-direction: column;
            align-items: center;
            color: #fff;
            transform: scale(0);
            /*transition: all 0.5s;         */
         }
         .sup-modal.open{
            transform: scale(1);
         }
         .sup-modal .sup-close{
            margin-top: -30px;
            margin-right: -30px;
            align-self: flex-end;
            font-size: 23px;
            color: red;
            cursor: pointer;
         }
         .sup-modal h5{
            margin-top: 5px;
            text-align: justify;
            font-weight: bold;
         }
         .sup-modal p{
            margin-top: 2px;
            text-align: justify;
         }
      /*sup modal */
      @media only screen and (max-width: 600px) {
         .signup-container{  
            width: 100%;
         }
         .signup-ui{
            margin-top: -500px;
            width: 90%;
            height: 440px;
            border-radius: 10px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /*transition: all 0.5s;*/
         }
         .signup-ui.show-signup{
            margin-top: 60px;
         }
         .signup-ui .inner .details .form-wrap{
            height: 70%;
            min-height: 220px;
            width: 90%;
            overflow-y: auto;
         }
         .signup-ui .inner .details .form-wrap span{
            margin-top: 2px;
            width: 100%;
            font-size: 13px;
            font-weight: bold;
         }
         .signup-ui .inner .details .form-wrap input[type=text]{
            padding-left: 0px;
            font-size: 12px;
            width: 100%;
         }
         .signup-ui .inner .details .form-wrap input[type=text]:focus{
            outline: none !important;
            border-bottom: 2px solid red;
         }
         .signup-ui .inner .details .form-wrap input[type=password]{
            padding-left: 5px;
            font-size: 13px;
            width: 100%;
         }
         .signup-ui .inner .details .form-wrap input[type=password]:focus{
            outline: none !important;
            border-bottom: 2px solid red;
         }
         .signup-ui .inner .details .agree input{
            margin-right: 5px;
            font-size: 13px;
         }
         .sup-modal{
            align-self:center;
            padding: 10px;
            margin-top:-520px;
            margin-bottom: 0px;
            width: 90%;
            height: 520px;
            color: #fff;
            overflow-y: auto;
         }
         .sup-modal.open{
            transform: scale(1);
         }
         .sup-modal .sup-close{
            margin-top: -5px;
            margin-right: -5px;
            align-self: flex-end;
            font-size: 18px;
            color: red;
            cursor: pointer;
         }
         .sup-modal h5{
            text-align: justify;
         }
         .sup-modal p{
            text-align: justify;
            font-size: 15px;
         }
      }
   /*singup end*/
   /*login start*/
      .log-in{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }   
      .login-container{
         margin-top: -1600px;
         width: 300px;
         height: 400px;
         border-radius: 20px;
         background-color: #fff;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         box-shadow: 1px 4px 4px 0 rgba(0,0,0,0.4);
         /*transition: all 0.5s;*/
      }
      .login-container.show-login{
         margin-top: -100px;
      }
      .login{
         width: 250px;
         height: 350px;
         border-radius: 20px;
         background-color: #fff;
         display: flex;
         flex-direction: column;
         align-items: center;
         border: 1px solid #ff1e22;
      }
      .login .close-login{
         margin-top: -15px;
         margin-right: -15px;
         align-self: flex-end;
         font-size: 18px;
         color: red;
         cursor: pointer;
      }
      .login .title{
         margin-top: -15px;
         margin-bottom: 20px;
         padding: 0px 20px 0px 20px;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 18px;
         font-weight: bold;
         color: #880406;
         background-color: #fff;
      }
      .form-login{
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .form-login form{
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .form-login form label{
         font-size: 17px;
         margin-bottom: 5px;
      }
      .form-login form input[type=text]{
         font-family: 'Open Sans', sans-serif;
         padding-left: 5px;
         font-weight: 300;
         font-size: 20px;
         text-align: center;
         width: 60%;
         box-sizing: border-box;
         border: none;
         border-bottom: 2px solid red;
         background-color: #f2f2f2;
      }
      .form-login form input[type=text]:focus{
         outline: none !important;
         border-bottom: 2px solid red;
         background-color: #ebebeb;
      }
      .form-login form input[type=password]{
         font-family: 'Open Sans', sans-serif;
         padding-left: 5px;
         font-weight: 300;
         font-size: 20px;
         text-align: center;
         width: 60%;
         box-sizing: border-box;
         border: none;
         border-bottom: 2px solid red;
         background-color: #f2f2f2;
      }
      .form-login form input[type=password]:focus{
         outline: none !important;
         border-bottom: 2px solid red;
         background-color: #ebebeb;
      }
      @media only screen and (max-width: 600px) {
         .log-in{
            width: 100%;
         }
         .login-container{
            width: 250px;
            height: 350px;
            border-radius: 20px;
         }
         .login{
            width: 200px;
            height: 300px;
            border-radius: 20px;
         }
         .form-login form input[type=text]{
            padding-left: 5px;
            width: 80%;
            font-size: 17px;
         }
         .form-login form input[type=password]{
            padding-left: 5px;
            width: 80%;
            font-size: 17px;
         }

      }
      .my-modal {
         display: none; /* Hidden by default */
         position: fixed; /* Stay in place */
         z-index: 1; /* Sit on top */
         padding-top: 200px; /* Location of the box */
         padding-left: 0;
         left: 0;
         top: 0;
         width: 100%; /* Full width */
         height: 100%; /* Full height */
         overflow: auto; /* Enable scroll if needed */
         background-color: rgb(0,0,0); /* Fallback color */
         background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
       }
       @media only screen and (max-width: 600px) {
           .my-modal {
               padding-left: 0;
           }
       }
       .my-modal-content {
         position: relative;
         background-color: #fefefe;
         margin: auto;
         padding: 0;
         border: 1px solid #888;
         border-radius: 15px;
         width: 400px;
         box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
         -webkit-animation-name: animatetop;
         -webkit-animation-duration: 0.4s;
         animation-name: animatetop;
         animation-duration: 0.4s
       }
       @media only screen and (max-width: 600px) {
           .my-modal-content {
               width: 80%;
           }
       }
       @-webkit-keyframes animatetop {
         from {top:-300px; opacity:0} 
         to {top:0; opacity:1}
       }

       @keyframes animatetop {
         from {top:-300px; opacity:0}
         to {top:0; opacity:1}
       }

       .md-close {
         color: black;
         float: right;
         font-size: 28px;
         font-weight: bold;
       }

       .md-close:hover,
       .md-close:focus {
         color: red;
         text-decoration: none;
         cursor: pointer;
       }

       .my-modal-header {
         padding: 2px 16px;
         background-color: rgba(0, 0, 0, 0.2);
         color: white;
         border-radius: 15px 15px 0px 0px;
         height: 40px;
         text-align: center;
       }
       .my-modal-body {
           margin: 0;
           padding: 0;
           width: 100%;
       }
       .my-modal-footer {
         padding: 2px 16px;
         background-color: rgba(0, 0, 0, 0);
         color: white;
         height: 20px;
       }

       .acc-list-container{
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
       }
       .acc-list-container .acc-list{
         padding: 0;
         width: 60%;
         margin-top: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
         border-width: 1px 0 0 0;
       }
       .acc-list-container .acc-list .acc-btn{
         width: 80%;
         height: 30px;
         background-color: rgba(0, 0, 0, 0.5);
         border: 1px solid rgb(0, 0, 0);
         border-width: 0 1px 1px 1px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         cursor: pointer;
         /*transition: transform 0.5s;*/
       }
       .acc-list-container .acc-list .acc-btn p{
         color: #fff;
       }
       .acc-list-container .acc-list .acc-btn:hover{
         transform: scale(1.1);
         background-color: rgba(0, 0, 0, 0.3);
       }   
   /*login end*/
   /*share start*/
      .share-container{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
      }
      .share-ui{
         margin-top: -1000px;
         width:auto; 
         height:auto; 
         padding: 30px;
         background-color: #fff;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*transition: all 0.5s;*/
      }
      .share-ui.show{
         margin-top: 150px;
      }
      .share-ui .inner{
         width: 300px;
         height: auto;
         border: 1px solid #ff1e22;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
         padding-bottom: 10px;
         padding-left: 10px;
         padding-right: 10px;
      }
      .share-ui .inner .close{
         margin-top: -30px;
         margin-right: -30px;
         align-self: flex-end;
         font-size: 18px;
         color: red;
         cursor: pointer;
      }
      .share-ui .inner .topic{
         margin-top: -3px;
         padding: 0px 20px 0px 20px;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 18px;
         font-weight: bold;
         color: #880406;
         background-color: #fff;
      }
      .share-ui .inner .chart-container{
         width: 100%;
         height: auto;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }      
      .share-ui .inner .chart-container .chart{
         width: 90%;
         height: 220px;
         border-radius: 10px;
         border: 1px solid rgba(0, 0, 0, 0.3);
         /*box-shadow: 0px 1px 6px 0 rgba(0,0,0,0.5);*/
         display: flex;
         align-items:flex-end;
         justify-content: space-between;
         padding: 5px;
      }
      .share-ui .inner .chart-container .chart .bar{
         width: 20%;
         height: 20%;
         background: #fff;
         margin: 0 5px 0px 5px;
         border-radius: 10px 10px 3px 3px;
         box-shadow: 2px 2px 6px 0 rgba(0,0,0,0.5);
         background-color: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 0px 0px 5px 0px;
         font-weight: bold;
         /*transition: all 0.3s;     */
      }
      .share-ui .inner .chart-container .chart .bar.active{
         cursor: pointer;
      }
      .share-ui .inner .chart-container .chart .bar.select{
         background-color: #3dc2ff;
         color: #fff;
         margin: 0 5px 5px 5px;
         font-size: 16px;
      }
      .share-ui .inner .chart-container .chart .bar.active:hover{
         background-color: #3dc2ff;
         color: #fff;
         margin: 0 5px 5px 5px;
         font-size: 16px;
      }
      .share-ui .inner .chart-container .chart .bar.glow{
         animation: chart-glow 1s ease-in-out infinite alternate;
      }
      @-webkit-keyframes chart-glow {
         0% {
             text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 10px rgba(31, 124, 255,0.5), 0 0 20px rgba(31, 124, 255,0.5), 0 0 30px rgba(31, 124, 255,0.5), 0 0 40px rgba(31, 124, 255,0.5), 0 0 50px rgba(31, 124, 255,0.5);
         }
         100% {
             text-shadow: 0 0 10px #fff, 0 0 10px rgba(101, 164, 252,0.5), 0 0 20px rgba(101, 164, 252,0.5), 0 0 30px rgba(101, 164, 252,0.5), 0 0 40px rgba(101, 164, 252,0.5), 0 0 50px rgba(101, 164, 252,0.5), 0 0 60px rgba(101, 164, 252,0.5);
         }
      }
      .share-ui .inner .chart-container .b-numb-container{
         width: 90%;
         height: auto;
         display: flex;
         align-items: end;
         justify-content: space-between;
         padding: 5px;
      }
      .share-ui .inner .chart-container .b-numb-container .b-numb{
         width: 20%;
         height: auto;
         background: #fff;
         margin: 0 5px 0px 5px;
         background-color: #fff;
         color: rgba(0, 0, 0, 0.4);
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 0px 0px 5px 0px;
         font-weight: normal;
      }
      .share-ui .inner .share-icons{
         width: 100%;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
      }
      .share-ui .inner .share-icons a{
         width: 50px;
         height: 50px;
         margin-top: 5px;
         font-size: 30px;
         border-radius: 10px;
         box-shadow: 0px 1px 5px 0 rgba(0,0,0,0.4);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         text-decoration: none;
      }
      .share-ui .inner .share-icons a:hover{
         box-shadow: 0px 1px 6px 0 rgba(0,0,0,0.5);
      }
      @media only screen and (max-width: 600px) {
         .share-container{
            width: 100%;
         }
         .share-ui{
            padding: 20px;
         }
         .share-ui .inner{
            width: 250px;
         }
         .share-ui .inner .close{
            margin-top: -20px;
            margin-right: -20px;
         }
         .share-ui .inner .topic{
            margin-top: -10px;
         }
         .share-ui .inner .share-icons a{
            width: 40px;
            height: 40px;
            margin-top: 5px;
            font-size: 25px;
            border-radius: 10px;
            box-shadow: 0px 1px 5px 0 rgba(0,0,0,0.4);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
         }
      }
   /*share end*/
   /*mybis_basic start*/
      .mb-basic-container{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
      }
      /*ui*/
         .mb-basic-ui{
            margin-top: -1000px;
            width:90%; 
            height:auto; 
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /*transition: all 0.5s;*/
         }
         .mb-basic-ui.show{
            margin-top: 200px;
         }
         .mb-basic-ui .inner{
            width: calc(100% - 20px);
            height: auto;
            border: 1px solid #ff1e22;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 10px;
            padding-left: 10px;
            padding-right: 10px;
         }
         .mb-basic-ui .inner .close{
            margin-top: -18px;
            margin-right: -22px;
            align-self: flex-end;
            font-size: 15px;
            color: red;
            cursor: pointer;
         }
         .mb-basic-ui .inner .topic{
            margin-top: -7px;
            padding: 0px 20px 0px 20px;
            font-family: 'Fira Sans Condensed', sans-serif;
            font-size: 18px;
            font-weight: bold;
            color: #880406;
            background-color: #fff;
         }
         .mb-basic-ui .inner .table-container{
            padding: 10px;
            width: 95%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 10px;
         }
         .mb-basic-ui .inner .table-overview{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 10px;  
         }
         .mb-basic-table{
            overflow-y: hide;
            border-radius: 10px;  
            padding-bottom: 10px;
         }
         .mb-basic-table table thead tr th:nth-child(1){
            width: 5%;
            text-align: right;
         }
         .mb-basic-table table thead tr th:nth-child(2){
            width: 20%;
            text-align: right;
         }
         .mb-basic-table table thead tr th:nth-child(3){
            width: 20%;
            text-align: right;
         }
         .mb-basic-table table thead tr th:nth-child(4){
            width: 20%;
            text-align: right;
         }
         .mb-basic-table table thead tr th:nth-child(5){
            width: 35%;
            text-align: center;
            padding-right: 10px;
         }
         .mb-basic-table table tbody tr td:nth-child(1){
            text-align: right;
            width: 5%;
         }
         .mb-basic-table table tbody tr td:nth-child(2){
            text-align: right;
            width: 20%;
         }
         .mb-basic-table table tbody tr td:nth-child(3){
            text-align: right;
            width: 20%;
            padding-left: 10px;
         }
         .mb-basic-table table tbody tr td:nth-child(4){
            text-align: right;
            /*padding-right: 40px;*/
            width: 20%;
         }
         .mb-basic-table table tbody tr td:nth-child(5){
            text-align: right;
            /*padding-right: 40px;*/
            width: 35%;
         }
         @media only screen and (max-width: 600px) {
            .mb-basic-container{
               width: 100%;
            }
            .mb-basic-ui{
               width: 85%;
               padding: 15px;
            }
            .mb-basic-ui.show{
               margin-top: 150px;
            }
            .mb-basic-ui .inner .close{
               margin-top: -15px;
               margin-right: -22px;
            }
            .mb-basic-ui .inner .topic{
               margin-top: -12px;
               font-size: 17px;
            }
            .mb-basic-ui .inner .table-container{
               padding: 5px;
               width: 97%;
            }
            .mb-basic-ui .inner .table-overview{
               padding-bottom: 5px;
            }
            .mb-basic-table table thead tr th:nth-child(1){
               width: 5%;
            }
            .mb-basic-table table thead tr th:nth-child(2){
               width: 10%;
            }
            .mb-basic-table table thead tr th:nth-child(3){
               width: 20%;
            }
            .mb-basic-table table thead tr th:nth-child(4){
               width: 25%;
            }
            .mb-basic-table table thead tr th:nth-child(5){
               width: 40%;
            }

            .mb-basic-table table tbody tr td:nth-child(1){
               width: 5%;
               /*padding-left: 10px;*/
            }
            .mb-basic-table table tbody tr td:nth-child(2){
               width: 10%;
               padding-left: 10px;
            }
            .mb-basic-table table tbody tr td:nth-child(3){
               width: 20%;
               /*padding-left: 20px;*/
            }
            .mb-basic-table table tbody tr td:nth-child(4){
               /*text-align: right;*/
               width: 25%;
               /*padding-right: 15px;*/
            }
            .mb-basic-table table tbody tr td:nth-child(5){
               /*text-align: right;*/
               width: 40%;
               /*padding-right: 15px;*/
            }
         }
      /*ui*/
      /*ui overflow*/
         .mb-basic-ui-overflow{
            margin-top: -372px;
            width: 98%;
            height: 500px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 10px;
            display: none;
            flex-direction: column;
            align-items: center;
            /*transition: all 0.5s;*/
            transform: scale(0.0);
         }
         .mb-basic-ui-overflow.show{
            transform: scale(1);
         }
         .mb-basic-ui-overflow .ui-overflow-header{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: row;
            align-items: center;
            background-color: rgba(0,0,0,0.6);
            border-radius: 10px 10px 0px 0px;
         }
         .mb-basic-ui-overflow .ui-overflow-header .back{
            font-size: 22px;
            color: red;
            cursor: pointer;
            margin-left: 10px;
            text-shadow: 0px 0px 3px #fff;
         }
         .mb-basic-ui-overflow .ui-overflow-header .topic{
            font-family: 'Fira Sans Condensed', sans-serif;
            font-size: 24px;
            font-weight: bold;
            color: #d34e4f;
            text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
            text-decoration: underline;
            margin-left: 27%;
         }

         .mb-basic-ui-overflow .table-container{
            margin-top: 0px;
            padding: 2px 10px 10px 10px;
            width: 95%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 10px;
         }
         .overflow-table{
            max-height: 332px;
         }
         .overflow-table thead th:first-child {
             border-radius: 10px 0 0 10px;
         }
         .overflow-table thead th:last-child {
             border-radius: 0 10px 10px 0;
         }
         .overflow-table tbody tr td:first-child {
             border-radius: 20px 0 0 20px;
         }
         .overflow-table tbody tr td:last-child {
             border-radius: 0 20px 20px 0;
         }      
         .overflow-table table thead tr th:nth-child(1){
            width: 5%;
         }
         .overflow-table table thead tr th:nth-child(2){
            width: 20%;
         }
         .overflow-table table thead tr th:nth-child(3){
            width: 20%;
         }
         .overflow-table table thead tr th:nth-child(4){
            width: 20%;
         }
         .overflow-table table thead tr th:nth-child(5){
            width: 30%;
         }

         .overflow-table table tbody tr td:nth-child(1){
            width: 5%;
         }
         .overflow-table table tbody tr td:nth-child(2){
            width: 20%;
         }
         .overflow-table table tbody tr td:nth-child(3){
            width: 20%;
         }
         .overflow-table table tbody tr td:nth-child(4){
            width: 20%;
         }
         .overflow-table table tbody tr td:nth-child(5){
            width: 30%;
         }
         @media only screen and (max-width: 600px) {
            .mb-basic-ui-overflow{
               margin-top: -340px;
               width: 98%;
               height: 400px;
               background-color: rgba(0, 0, 0, 0.4);
               border-radius: 10px;
               display: flex;
               flex-direction: column;
               align-items: center;
            }
            .mb-basic-ui-overflow .ui-overflow-header .topic{
               font-size: 20px;
               margin-left: 23%;
            }
            .overflow-table{
               max-height: 365px;
            }
            .overflow-table table tbody{
               font-size: 12px;
            }
            .overflow-table table thead tr th:nth-child(1){
               width: 5%;
            }
            .overflow-table table thead tr th:nth-child(2){
               width: 20%;
            }
            .overflow-table table thead tr th:nth-child(3){
               width: 20%;
            }
            .overflow-table table thead tr th:nth-child(4){
               width: 20%;
            }
            .overflow-table table thead tr th:nth-child(5){
               width: 30%;
            }

            .overflow-table table tbody tr td:nth-child(1){
               width: 5%;
            }
            .overflow-table table tbody tr td:nth-child(2){
               width: 20%;
            }
            .overflow-table table tbody tr td:nth-child(3){
               width: 20%;
            }
            .overflow-table table tbody tr td:nth-child(4){
               width: 20%;
            }
            .overflow-table table tbody tr td:nth-child(5){
               width: 30%;
            }
         }
      /*ui overflow*/
   /*mybis_basic end*/
   /*mybis_premium start*/
      .mb-premium-container{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
      }
      /*ui*/
         .mb-premium-ui{
            margin-top: -1000px;
            width:90%; 
            height:auto; 
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /*transition: all 0.5s;*/
         }
         .mb-premium-ui.show{
            margin-top: 165px;
         }
         .mb-premium-ui .inner{
            width: calc(100% - 20px);
            height: auto;
            border: 1px solid #ff1e22;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 10px;
            padding-left: 10px;
            padding-right: 10px;
         }
         .mb-premium-ui .inner .close{
            margin-top: -18px;
            margin-right: -22px;
            align-self: flex-end;
            font-size: 15px;
            color: red;
            cursor: pointer;
         }
         .mb-premium-ui .inner .topic{
            margin-top: -7px;
            padding: 0px 20px 0px 20px;
            font-family: 'Fira Sans Condensed', sans-serif;
            font-size: 18px;
            font-weight: bold;
            color: #880406;
            background-color: #fff;
         }
         .mb-premium-ui .inner .details{
            width: 95%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
         .mb-premium-ui .inner .details .shop-container{
            padding-top: 10px;
            width: 70%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
         }
         .mb-premium-ui .inner .details .shop-container .shop{
            width: 40%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0px 1px 5px rgba(0,0,0,0.4);
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            /*transition: all 0.5s;*/
            background-image: linear-gradient(#c5b611, #c5a80f);
         }
         .mb-premium-ui .inner .details .shop-container .shop:hover{
            box-shadow: 0px 1px 6px rgba(0,0,0,0.6);
         }
         .mb-premium-ui .inner .details .shop-container .shop .title{
            margin-top: 10px;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.5);
            color: #fff;
            font-size: 20px;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .mb-premium-ui .inner .details .shop-container .shop .points{
            color: #fff;
            padding: 5px;
            font-size: 35px;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .mb-premium-ui .inner .details .shop-container .shop .points-text{
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-bottom: 10px;
         }
         .mb-premium-ui .inner .details .premium-earnings-history{
            margin-top: 5px;
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
         .mb-premium-earnings-table{
            max-height: 332px;
         }
         .mb-premium-earnings-table table thead tr th:nth-child(1){
            width: 10%;
            text-align: center;
         }
         .mb-premium-earnings-table table thead tr th:nth-child(2){
            width: 35%;
            text-align: center;
         }
         .mb-premium-earnings-table table thead tr th:nth-child(3){
            width: 55%;
            text-align: center;
         }
         .mb-premium-earnings-table table tbody tr td:nth-child(1){
            width: 10%;
            text-align: center;
         }
         .mb-premium-earnings-table table tbody tr td:nth-child(2){
            width: 35%;
            text-align: center;
         }
         .mb-premium-earnings-table table tbody tr td:nth-child(3){
            width: 55%;
            text-align: center;
         }

         @media only screen and (max-width: 600px) {
            .mb-premium-container{
               width: 100%;
            }
            .mb-premium-ui{
               width: 85%;
               padding: 15px;
            }
            .mb-premium-ui.show{
               margin-top: 165px;
            }
            .mb-premium-ui .inner .close{
               margin-top: -15px;
               margin-right: -22px;
            }
            .mb-premium-ui .inner .topic{
               margin-top: -12px;
               font-size: 17px;
            }
            .mb-premium-ui .inner .details .shop-container{
               padding-top: 10px;
               width: 100%;
            }
            .mb-premium-ui .inner .details .shop-container .shop{
               width: 45%;
               height: auto;
            }
            .mb-premium-ui .inner .details .shop-container .shop .title{
               font-size: 25px;
               font-weight: 600;
            }
            .mb-premium-ui .inner .details .shop-container .shop .points{
               font-size: 26px;
               font-weight: 600;
            }
            .mb-premium-ui .inner .details .shop-container .shop .points-text{
               font-size: 13px;
               font-weight: 600;
            }
         }         
      /*ui*/
      /*ui overflow*/
         .mb-premium-ui-overflow{
            margin-top: -280px;
            width: 98%;
            height: 500px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 10px;
            display: none;
            flex-direction: column;
            align-items: center;
            /*transition: all 0.5s;*/
            transform: scale(0.0);
         }
         .mb-premium-ui-overflow.show{
            transform: scale(1);
         }
         .mb-premium-ui-overflow .ui-overflow-header{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: row;
            align-items: center;
            background-color: rgba(0,0,0,0.6);
            border-radius: 10px 10px 0px 0px;
         }
         .mb-premium-ui-overflow .ui-overflow-header .back{
            font-size: 22px;
            color: red;
            cursor: pointer;
            margin-left: 10px;
            text-shadow: 0px 0px 3px #fff;
         }
         .mb-premium-ui-overflow .ui-overflow-header .topic{
            font-family: 'Fira Sans Condensed', sans-serif;
            font-size: 24px;
            font-weight: bold;
            color: #d34e4f;
            text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
            text-decoration: underline;
            margin-left: 33%;
         }

         .mb-premium-ui-overflow .table-container{
            margin-top: 0px;
            padding: 2px 10px 10px 10px;
            width: 95%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 10px;
         }
         .mb-premium-ui-overflow .table-container .overflow-table{
            max-height: 332px;
         }
         .mb-premium-ui-overflow .table-container .overflow-table thead th:first-child {
             border-radius: 10px 0 0 10px;
         }
         .mb-premium-ui-overflow .table-container .overflow-table thead th:last-child {
             border-radius: 0 10px 10px 0;
         }
         .mb-premium-ui-overflow .table-container .overflow-table tbody tr td:first-child {
             border-radius: 20px 0 0 20px;
         }
         .mb-premium-ui-overflow .table-container .overflow-table tbody tr td:last-child {
             border-radius: 0 20px 20px 0;
         }
         .mb-premium-ui-overflow .table-container .overflow-table table thead tr th:nth-child(1){
            width: 5%;
         }
         .mb-premium-ui-overflow .table-container .overflow-table table thead tr th:nth-child(2){
            width: 20%;
         }
         .mb-premium-ui-overflow .table-container .overflow-table table thead tr th:nth-child(3){
            width: 20%;
         }
         .mb-premium-ui-overflow .table-container .overflow-table table thead tr th:nth-child(4){
            width: 20%;
         }
         .mb-premium-ui-overflow .table-container .overflow-table table thead tr th:nth-child(5){
            width: 30%;
         }
         .mb-premium-ui-overflow .table-container .overflow-table table tbody tr td:nth-child(1){
            width: 5%;
         }
         .mb-premium-ui-overflow .table-container .overflow-table table tbody tr td:nth-child(2){
            width: 20%;
         }
         .mb-premium-ui-overflow .table-container .overflow-table table tbody tr td:nth-child(3){
            width: 20%;
         }
         .mb-premium-ui-overflow .table-container .overflow-table table tbody tr td:nth-child(4){
            width: 20%;
         }
         .mb-premium-ui-overflow .table-container .overflow-table table tbody tr td:nth-child(5){
            width: 30%;
         }
         @media only screen and (max-width: 600px) {
            .mb-premium-ui-overflow{
               margin-top: -250px;
               width: 98%;
               height: 400px;
            }
            .mb-premium-ui-overflow .ui-overflow-header .topic{
               font-size: 20px;
               margin-left: 15%;
            }
            .mb-premium-ui-overflow .table-container .overflow-table{
               max-height: 285px;
            }
            .mb-premium-ui-overflow .table-container .overflow-table table tbody{
               font-size: 12px;
            }
            .mb-premium-ui-overflow .table-container .overflow-table table thead tr th:nth-child(1){
               width: 5%;
            }
            .mb-premium-ui-overflow .table-container .overflow-table table thead tr th:nth-child(2){
               width: 20%;
            }
            .mb-premium-ui-overflow .table-container .overflow-table table thead tr th:nth-child(3){
               width: 20%;
            }
            .mb-premium-ui-overflow .table-container .overflow-table table thead tr th:nth-child(4){
               width: 20%;
            }
            .mb-premium-ui-overflow .table-container .overflow-table table thead tr th:nth-child(5){
               width: 30%;
            }
            .mb-premium-ui-overflow .table-container .overflow-table table tbody tr td:nth-child(1){
               width: 5%;
            }
            .mb-premium-ui-overflow .table-container .overflow-table table tbody tr td:nth-child(2){
               width: 20%;
            }
            .mb-premium-ui-overflow .table-container .overflow-table table tbody tr td:nth-child(3){
               width: 20%;
            }
            .mb-premium-ui-overflow .table-container .overflow-table table tbody tr td:nth-child(4){
               width: 20%;
            }
            .mb-premium-ui-overflow .table-container .overflow-table table tbody tr td:nth-child(5){
               width: 30%;
            }
         }
      /*ui overflow*/
   /*mybis_premium end*/
   /*transaction history start*/
      .trans-his-container{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
      }
      @media only screen and (max-width: 600px) {
         .trans-his-container{
            width: 100%;
         }
      }
      /*ui*/
         .trans-his-ui{
            margin-top: -1000px;
            width:90%; 
            height:auto; 
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /*transition: all 0.5s;*/
         }
         .trans-his-ui.show{
            margin-top: 165px;
         }
         .trans-his-ui .inner{
            width: calc(100% - 20px);
            height: auto;
            border: 1px solid #ff1e22;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 10px;
            padding-left: 10px;
            padding-right: 10px;
         }
         .trans-his-ui .inner .close{
            margin-top: -18px;
            margin-right: -22px;
            align-self: flex-end;
            font-size: 15px;
            color: red;
            cursor: pointer;
         }
         .trans-his-ui .inner .topic{
            margin-top: -7px;
            padding: 0px 20px 0px 20px;
            font-family: 'Fira Sans Condensed', sans-serif;
            font-size: 18px;
            font-weight: bold;
            color: #880406;
            background-color: #fff;
         }
         .trans-his-ui .inner .table-container{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
         }
         .trans-his-ui .inner .table-container .trans-his-table{
            max-height: 300px;
         }
         .trans-his-ui .inner .table-container .trans-his-table thead th:first-child {
             border-radius: 15px 0 0 15px;
         }
         .trans-his-ui .inner .table-container .trans-his-table thead th:last-child {
             border-radius: 0 15px 15px 0;
         }
         .trans-his-ui .inner .table-container .trans-his-table tbody tr td:first-child {
             border-radius: 15px 0 0 15px;
         }
         .trans-his-ui .inner .table-container .trans-his-table tbody tr td:last-child {
             border-radius: 0 15px 15px 0;
         }      

         .trans-his-ui .inner .table-container .trans-his-table table thead tr th:nth-child(1){
            width: 10%;
            text-align: center;
         }
         .trans-his-ui .inner .table-container .trans-his-table table thead tr th:nth-child(2){
            width: 20%;
            text-align: center;
         }
         .trans-his-ui .inner .table-container .trans-his-table table thead tr th:nth-child(3){
            width: 20%;
            text-align: center;
         }
         .trans-his-ui .inner .table-container .trans-his-table table thead tr th:nth-child(4){
            width: 20%;
            text-align: center;
         }
         .trans-his-ui .inner .table-container .trans-his-table table thead tr th:nth-child(5){
            width: 30%;
            text-align: center;
         }
         .trans-his-ui .inner .table-container .trans-his-table table tbody tr td:nth-child(1){
            width: 10%;
            text-align: center;
         }
         .trans-his-ui .inner .table-container .trans-his-table table tbody tr td:nth-child(2){
            width: 20%;
            text-align: center;
         }
         .trans-his-ui .inner .table-container .trans-his-table table tbody tr td:nth-child(3){
            width: 20%;
            text-align: center;
         }
         .trans-his-ui .inner .table-container .trans-his-table table tbody tr td:nth-child(4){
            width: 20%;
            text-align: right;
         }
         .trans-his-ui .inner .table-container .trans-his-table table tbody tr td:nth-child(5){
            width: 30%;
            text-align: center;
         }

         @media only screen and (max-width: 600px) {
            .trans-his-ui{
               width: 85%;
               padding: 15px;
            }
            .trans-his-ui.show{
               margin-top: 100px;
            }
            .trans-his-ui .inner .close{
               margin-top: -15px;
               margin-right: -22px;
            }
            .trans-his-ui .inner .topic{
               margin-top: -12px;
               font-size: 17px;
            }
            .trans-his-ui .inner .table-container .trans-his-table{
               max-height: 300px;
               font-size: 12px;
            }
            .trans-his-ui .inner .table-container .trans-his-table table thead tr th:nth-child(1){
               width: 10%;
               text-align: center;
            }
            .trans-his-ui .inner .table-container .trans-his-table table thead tr th:nth-child(2){
               width: 20%;
               text-align: center;
            }
            .trans-his-ui .inner .table-container .trans-his-table table thead tr th:nth-child(3){
               width: 20%;
               text-align: center;
            }
            .trans-his-ui .inner .table-container .trans-his-table table thead tr th:nth-child(4){
               width: 20%;
               text-align: center;
            }
            .trans-his-ui .inner .table-container .trans-his-table table thead tr th:nth-child(5){
               width: 30%;
               text-align: center;
            }
            .trans-his-ui .inner .table-container .trans-his-table table tbody tr td:nth-child(1){
               width: 10%;
               text-align: center;
            }
            .trans-his-ui .inner .table-container .trans-his-table table tbody tr td:nth-child(2){
               width: 20%;
               text-align: right;
            }
            .trans-his-ui .inner .table-container .trans-his-table table tbody tr td:nth-child(3){
               width: 20%;
               text-align: right;
            }
            .trans-his-ui .inner .table-container .trans-his-table table tbody tr td:nth-child(4){
               width: 20%;
               text-align: right;
            }
            .trans-his-ui .inner .table-container .trans-his-table table tbody tr td:nth-child(5){
               width: 30%;
               text-align: center;
               font-size: 11px;
            }
         }
      /*ui*/
   /*transaction history end*/
   /*order history start*/
      .or-his-container{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
      }
      @media only screen and (max-width: 600px) {
         .or-his-container{
            width: 100%;
         }
      }
      /*ui*/
         .or-his-ui{
            margin-top: -1000px;
            width:90%; 
            height:auto; 
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /*transition: all 0.5s;*/
         }
         .or-his-ui.show{
            margin-top: 165px;
         }
         .or-his-ui .inner{
            width: calc(100% - 20px);
            height: auto;
            border: 1px solid #ff1e22;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 10px;
            padding-left: 10px;
            padding-right: 10px;
         }
         .or-his-ui .inner .close{
            margin-top: -18px;
            margin-right: -22px;
            align-self: flex-end;
            font-size: 15px;
            color: red;
            cursor: pointer;
         }
         .or-his-ui .inner .topic{
            margin-top: -7px;
            padding: 0px 20px 0px 20px;
            font-family: 'Fira Sans Condensed', sans-serif;
            font-size: 18px;
            font-weight: bold;
            color: #880406;
            background-color: #fff;
         }

         .or-his-ui .inner .table-container{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
         }
         .or-his-ui .inner .table-container .or-his-table{
            max-height: 300px;
         }
         .or-his-ui .inner .table-container .or-his-table thead th:first-child {
             border-radius: 15px 0 0 15px;
         }
         .or-his-ui .inner .table-container .or-his-table thead th:last-child {
             border-radius: 0 15px 15px 0;
         }
         .or-his-ui .inner .table-container .or-his-table tbody tr td:first-child {
             border-radius: 15px 0 0 15px;
         }
         .or-his-ui .inner .table-container .or-his-table tbody tr td:last-child {
             border-radius: 0 15px 15px 0;
         }      

         .or-his-ui .inner .table-container .or-his-table table thead tr th:nth-child(1){
            width: 10%;
            text-align: center;
         }
         .or-his-ui .inner .table-container .or-his-table table thead tr th:nth-child(2){
            width: 20%;
            text-align: center;
         }
         .or-his-ui .inner .table-container .or-his-table table thead tr th:nth-child(3){
            width: 20%;
            text-align: center;
         }
         .or-his-ui .inner .table-container .or-his-table table thead tr th:nth-child(4){
            width: 20%;
            text-align: center;
         }
         .or-his-ui .inner .table-container .or-his-table table thead tr th:nth-child(5){
            width: 30%;
            text-align: center;
         }
         .or-his-ui .inner .table-container .or-his-table table tbody tr td:nth-child(1){
            width: 10%;
            text-align: center;
         }
         .or-his-ui .inner .table-container .or-his-table table tbody tr td:nth-child(2){
            width: 20%;
            text-align: center;
         }
         .or-his-ui .inner .table-container .or-his-table table tbody tr td:nth-child(3){
            width: 20%;
            text-align: center;
         }
         .or-his-ui .inner .table-container .or-his-table table tbody tr td:nth-child(4){
            width: 20%;
            text-align: center;
         }
         .or-his-ui .inner .table-container .or-his-table table tbody tr td:nth-child(5){
            width: 30%;
            text-align: center;
         }
         .oh-table-btn{
            background-color: #fff;
            padding: 1px 15px 1px 15px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
            font-weight: 400;
            margin: 1px 0px;
            cursor: pointer;
            color: #d34e4f;
            border: 1px solid #fff;
            border-radius: 10px;
            box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
         }
         .oh-table-btn:hover{
            box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.5);
            letter-spacing: 1.5px;
         }
         .oh-table-btn:disabled{
            box-shadow: 1px 4px 4px 0 rgba(0,0,0,0.4);
            letter-spacing: 0px;
            cursor: default;
         }
         @media only screen and (max-width: 600px) {
            .oh-table-btn{
               font-size: 11px;
               font-size: 12px;
               margin-bottom: 2px;
            }
            .oh-table-btn:hover{
               letter-spacing: 1px;
            }
         }
         @media only screen and (max-width: 600px) {
            .or-his-ui{
               width: 85%;
               padding: 15px;
            }
            .or-his-ui.show{
               margin-top: 150px;
            }
            .or-his-ui .inner .close{
               margin-top: -15px;
               margin-right: -22px;
            }
            .or-his-ui .inner .topic{
               margin-top: -12px;
               font-size: 17px;
            }
            .or-his-ui .inner .table-container{
               padding: 3px;
            }
            .or-his-ui .inner .table-container .or-his-table{
               max-height: 300px;
               font-size: 12px;
            }
            .or-his-ui .inner .table-container .or-his-table table thead tr th:nth-child(1){
               width: 10%;
               text-align: center;
            }
            .or-his-ui .inner .table-container .or-his-table table thead tr th:nth-child(2){
               width: 20%;
               text-align: center;
               padding-left: 0px;
               padding-right: 0px;               
            }
            .or-his-ui .inner .table-container .or-his-table table thead tr th:nth-child(3){
               width: 20%;
               text-align: center;
               padding-left: 15px;
            }
            .or-his-ui .inner .table-container .or-his-table table thead tr th:nth-child(4){
               width: 20%;
               text-align: center;
            }
            .or-his-ui .inner .table-container .or-his-table table thead tr th:nth-child(5){
               width: 30%;
               text-align: center;
            }
            .or-his-ui .inner .table-container .or-his-table table tbody tr td:nth-child(1){
               width: 10%;
               text-align: center;
            }
            .or-his-ui .inner .table-container .or-his-table table tbody tr td:nth-child(2){
               width: 20%;
               text-align: center;
            }
            .or-his-ui .inner .table-container .or-his-table table tbody tr td:nth-child(3){
               width: 20%;
               text-align: center;
            }
            .or-his-ui .inner .table-container .or-his-table table tbody tr td:nth-child(4){
               width: 20%;
               text-align: center;
            }
            .or-his-ui .inner .table-container .or-his-table table tbody tr td:nth-child(5){
               width: 30%;
               text-align: center;
            }
         }
      /*ui*/
      /*overflow*/
         .oh-ui-overflow{
            width: 98%;
            height: 300px;
            margin-top: -200px;
            background-color: rgba(0,0,0, 0.5);
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            /*transition: all 0.5s;*/
            transform: scale(0);
         }
         .oh-ui-overflow.show{
            transform: scale(1);
         }
         .oh-ui-overflow .confirm-container{
            width: 80%;
            height: auto;
            min-height: 70px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 20px;
            border: 2px solid #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
         }
         .oh-ui-overflow .confirm-container .yes-or-no{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
         }
         @media only screen and (max-width: 600px) {
            .oh-ui-overflow .confirm-container{
               width: 90%;
            }
         }

      /*overflow*/
   /*order history end*/
   /*single product start*/
      .sp-container{
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0);
         display: none;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .sp-container .prd-ui{
         width: 75%;
         height: 80%;
         background-color: rgba(0, 0, 0, 0.75);
         border-radius: 20px;
         /*transition: all 0.5s;*/
         transform: scale(0);
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .sp-container .prd-ui.show{
         transform: scale(1);
      }
      .sp-container .prd-ui .ui-header-container{
         width: 100%;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         background-color: rgba(0, 0, 0, 0.5);
         border-radius: 20px 20px 0px 0px;
         padding-bottom: 2px;
      }
      .sp-container .prd-ui .ui-header-container .topic{
         width: 90%;
         margin-top: 0px;
         padding-left: 10%;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 18px;
         font-weight: bold;
         color: #fff;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .sp-container .prd-ui .ui-header-container .close{
         width: 10%;
         margin-top: 0px;
         margin-right: 0px;
         align-self: flex-end;
         font-size: 15px;
         color: red;
         cursor: pointer;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .sp-container .prd-ui .details{
         width: 95%;
         height: calc(100% - 71px);
         display: flex;
         flex-direction: column;
         align-items: center;
         overflow-y: auto;
      }
      /*prd img*/
         .sp-container .prd-ui .details .img-container-header{
            margin: 10px 0px 0px 0px;
            width: 98%;
            height: 30px;
            background-color: #000;
            border-radius: 20px 20px 0px 0px;
            border: 1px solid #fff;
            border-width: 1px 1px 0px 1px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
         }
         .sp-container .prd-ui .details .img-container-header .topic{
            width: 90%;
            padding-left: 10%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 17px;
            font-weight: bold;
         }
         .sp-container .prd-ui .details .img-container-header .topic .photo{
             background-color: rgba(0, 0, 0, 0);
             margin-left: 5px;
             color: #fff;
             padding: 0px 5px 0px 5px;
             border-radius: 5px;
             cursor: pointer;
             border: 1px solid red;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
         }
         .sp-container .prd-ui .details .img-container-header .topic .photo:hover{
             background-color: red;
         }
         .sp-container .prd-ui .details .img-container-header .topic .photo.select{
             background-color: red;
         }
         .sp-container .prd-ui .details .img-container-header .topic .video{
             background-color: rgba(0, 0, 0, 0);
             color: #fff;
             margin-right: 5px;
             padding: 0px 5px 0px 5px;
             border-radius: 5px;
             cursor: pointer;
             border: 1px solid red;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
         }
         .sp-container .prd-ui .details .img-container-header .topic .video:hover{
             background-color: red;
         }
         .sp-container .prd-ui .details .img-container-header .topic .video.select{
             background-color: red;
         }
         .sp-container .prd-ui .details .img-container-header .photos-shrink-expand{
            width: 10%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: bold;
            color: red;
            cursor: pointer;
         }
         .sp-container .prd-ui .details .img-container{
            margin: 0px 0px 0px 0px;
            padding: 0;
            width: 70%;
            height: 45%;
            overflow: hidden;
            cursor: pointer;
            background-color: #fff;
            border-radius: 0px;
            box-shadow: 0px 1px 7px rgba(0,0,0,0.9);
         }
         .sp-container .prd-ui .details .img-container.hide{
            height: 0%;
         }
         .sp-container .prd-ui .details .img-container.show{
            height: 45%;
            background-color: rgba(0, 0, 0, 0);
         }
         .sp-container .prd-ui .details.show-desc .img-container.hide{
            height: 0%;
         }
         .sp-container .prd-ui .details.show-desc .img-container.show{
            height: 0%;
         }
         .sp-container .prd-ui .details.hide-desc .img-container.hide{
            height: 0%;
         }
         .sp-container .prd-ui .details.hide-desc .img-container.show{
            height: 90%;
            width: 98%;
         }
         .sp-container .prd-ui .details .img-container .img-main{
             margin: 0;
             padding: 0;
             width: 100%;
             height: calc(100% - 40px);
             display: flex;
             flex-direction: column;
             align-items: center;
             /*justify-content: center;*/
             overflow: hidden;
             z-index: -1;
         }
         .sp-container .prd-ui .details .img-container .img-main a{
             margin: 0;
             padding: 0;
             width: 100%;
             display: flex;
             flex-direction: column;
             align-items: center;
             /*justify-content: center;*/
         }
         .sp-container .prd-ui .details .img-container .img-main a img{
             margin: 0;
             padding: 0;
             width: 100%;
             height: auto;
             /*transition: transform 1s;*/
         }
         .sp-container .prd-ui .details .img-container .img-main a img:hover{
             transform: scale(1.1);
         }
         .sp-container .prd-ui .details .img-container .img-gallery{
             margin: 0;
             padding: 0;
             width: 100%;
             height: auto;
             background-color: rgba(0, 0, 0, 0.3);
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
         }
         .sp-container .prd-ui .details .img-container .img-gallery .gallery{
             width: auto;
             height: 100%;
             /*background-color: rgba(0, 0, 0, 0.3);*/
             display: flex;
             flex-direction: row;
             align-items: center;
             justify-content: space-between;
         }
         .sp-container .prd-ui .details .img-container .img-gallery .gallery a img{
             margin-right: 5px;
             width: 35px;
             height: 35px;
             border-radius: 50%;
             border: 1px solid #fff;
             overflow: hidden;
         }
         .sp-container .prd-ui .details .img-container .img-gallery .gallery a img:hover{
             border: 1px solid #fff;
         }
         @media only screen and (max-width: 600px) {
            .sp-container .prd-ui .details .img-container{
               height: 45%;
            }
            .sp-container .prd-ui .details .img-container.video{
               width: 86%;
            }            
            .sp-container .prd-ui .details .img-container .img-gallery .gallery a img{
                width: 25px;
                height: 25px;
            }
            .sp-container .prd-ui .details .img-container .img-main{
               height: calc(100% - 30px);
               max-height: calc(100% - 30px);            }
         }
         .sp-container .prd-ui .details .img-container-footer{
            width: 98%;
            height: 30px;
            background-color: rgba(0, 0, 0, 1);
            color: #fff;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            border-radius: 0px 0px 20px 20px;
            border: 1px solid #fff;
            border-width: 0px 1px 1px 1px;
         }
      /*prd img*/
      /*prd det*/
         .sp-container .prd-ui .details .prd-det-header{
            margin: 10px 0px 0px 0px;
            width: 98%;
            height: 30px;
            background-color: #000;
            border-radius: 20px 20px 0px 0px;
            border: 1px solid #fff;
            border-width: 1px 1px 0px 1px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
         }
         .sp-container .prd-ui .details .prd-det-header .topic{
            width: 90%;
            padding-left: 10%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
            font-weight: bold;
         }
         .sp-container .prd-ui .details .prd-det-header .photos-shrink-expand{
            width: 10%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: bold;
            color: red;
            cursor: pointer;
         }      
         .sp-container .prd-ui .details .prd-det{
            width: 90%;
            height: 45%;
            overflow-y: auto;
            color: #fff;
            /*transition: all 0.5s;*/
         }
         .sp-container .prd-ui .details.show-desc .prd-det{
            height: 90%;
         }
         .sp-container .prd-ui .details.hide-desc .prd-det{
            height: 0%;
         }
         .sp-container .prd-ui .details .prd-det .price-container{
            display: flex;
            flex-direction: row;
            margin-top: 5px;
            align-items: center;
         }
         .sp-container .prd-ui .details .prd-det .price-container .actual-price{
            font-size: 35px;
            font-weight: bold;
         }
         .sp-container .prd-ui .details .prd-det .price-container .discount-price{
            font-size: 25px;
            color: #52ff33;
            font-weight: bold;
            margin-left: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .sp-container .prd-ui .details .prd-det .price-container .discount-price .d-price{
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 22px;
         }
         .sp-container .prd-ui .details .prd-det .price-container .discount-price .d-txt{
            font-size: 12px;
            color: #fff;
            margin-top: -2px;
         }
         .sp-container .prd-ui .details .prd-det .price-container .discount-price i{
            font-size: 20px;
            margin-right: 5px;
         }
         .sp-container .prd-ui .details .prd-det .pro-summary-title{
            font-size: 18px;
            font-weight: bold;
         }
         .sp-container .prd-ui .details .prd-det .pro-summary{
            font-size: 15px;
         }
         .sp-container .prd-ui .details .prd-det .sub-details{
            margin: 10px 2.5% 10px 2.5%;
            width: 95%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0px 1px 7px rgba(0,0,0,0.9);
            display: flex;
            flex-direction: row;
            align-items: center;
            padding-left: 1%;
         }
         .sp-container .prd-ui .details .prd-det .sub-details .col{
            width: 49%;
            height: 100px;
            display: flex;
            flex-direction: column;
            align-items: left;
         }
         .sp-container .prd-ui .details .prd-det .sub-details .col p{
            font-size: 15px;
            font-weight: bold;
            margin: 10px 0px 0px 0px;
         }
         .sp-container .prd-ui .details .prd-det .description{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
         .sp-container .prd-ui .details .prd-det .description .topic{
            width: 100%;
            text-align: left;
         }
         .sp-container .prd-ui .details .prd-det .description .content{
            width: 95%;
            padding-left: 10px;
            text-align: justify;
         }
         @media only screen and (max-width: 600px) {
            .sp-container .prd-ui .details .prd-det{
               width: 98%;
               height: 40%;
            }
            .sp-container .prd-ui .details .prd-det .pro-name{
               font-size: 17px;
            }
            .sp-container .prd-ui .details .prd-det .price-container .actual-price{
               font-size: 30px;
            }
            .sp-container .prd-ui .details .prd-det .price-container .discount-price{
               font-size: 17px;
            }

            .sp-container .prd-ui .details .prd-det .sub-details .col{
               height: 85px;
            }
            .sp-container .prd-ui .details .prd-det .sub-details .col p{
               font-size: 13px;
            }
            .sp-container .prd-ui .details .prd-det .description .content{
               font-size: 15px;
            }
         }
         .sp-container .prd-ui .details .prd-det-footer{
            width: 98%;
            height: 30px;
            background-color: rgba(0, 0, 0, 1);
            color: #fff;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            border-radius: 0px 0px 20px 20px;
            border: 1px solid #fff;
            border-width: 0px 1px 1px 1px;
         }         
      /*prd det*/
      /*prd action*/
         .sp-container .prd-ui .prd-action{
            width: 100%;
            height: 50px;
            border-radius: 0px 0px 20px 20px;
            background-color: rgba(0, 0, 0, 1);
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            color: #fff;
         }
         .sp-container .prd-ui .prd-action .add-to-cart{
            width: 40%; 
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 0px 0px 0px 20px;
            box-shadow: 0px 1px 7px rgba(0,0,0,0.9);
            cursor: pointer;
         }
         .sp-container .prd-ui .prd-action .add-to-cart:hover{
            background-color: rgba(255, 255, 255, 0.3);
         }
         .sp-container .prd-ui .prd-action .add-to-cart.glow{
            animation: glow 1s ease-in-out infinite alternate;
         }
         .sp-container .prd-ui .prd-action .qty{
            width: 20%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            font-size: 20px;
         }
         .sp-container .prd-ui .prd-action .qty .miuns{
            width: 40%;
            height: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .sp-container .prd-ui .prd-action .qty .miuns i{
            cursor: pointer;
         }
         .sp-container .prd-ui .prd-action .qty .miuns i:hover{
            color: gray;
            font-size: 21px;
         }
         .sp-container .prd-ui .prd-action .qty form input[type=text]{
            font-family: 'Open Sans', sans-serif;
            padding-left: 0px;
            font-weight: 300;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            width: 40px;
            box-sizing: border-box;
            border: none;
            border-bottom: 2px solid red;
            background-color: #f2f2f2;
         }
         .sp-container .prd-ui .prd-action .qty .plus{
            width: 40%;
            height: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .sp-container .prd-ui .prd-action .qty .plus i{
            cursor: pointer;
         }
         .sp-container .prd-ui .prd-action .qty .plus i:hover{
            color: gray;
            font-size: 21px;
         }

         .sp-container .prd-ui .prd-action .buy-now{
            width: 40%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 0px 0px 20px 0px;
            box-shadow: 0px 1px 7px rgba(0,0,0,0.9);
            cursor: pointer;
         }
         .sp-container .prd-ui .prd-action .buy-now:hover{
            background-color: rgba(255, 255, 255, 0.3);
         }
         .sp-container .prd-ui .prd-action .buy-now.glow{
            animation: glow 1s ease-in-out infinite alternate;
         }
         @-webkit-keyframes glow {
            0% {
                text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 10px rgba(31, 124, 255,0.5), 0 0 20px rgba(31, 124, 255,0.5), 0 0 30px rgba(31, 124, 255,0.5), 0 0 40px rgba(31, 124, 255,0.5), 0 0 50px rgba(31, 124, 255,0.5);
            }
            100% {
                text-shadow: 0 0 10px #fff, 0 0 10px rgba(101, 164, 252,0.5), 0 0 20px rgba(101, 164, 252,0.5), 0 0 30px rgba(101, 164, 252,0.5), 0 0 40px rgba(101, 164, 252,0.5), 0 0 50px rgba(101, 164, 252,0.5), 0 0 60px rgba(101, 164, 252,0.5);
            }
         }
         @media only screen and (max-width: 600px) {
            .sp-container .prd-ui .prd-action .add-to-cart{
               width: 37.5%;
               font-size: 17px;
            }
            .sp-container .prd-ui .prd-action .qty{
               width: 25%;
            }
            .sp-container .prd-ui .prd-action .qty form input[type=text]{
               width:30px;
               font-size: 15px;
               padding-top: 5px;
               padding-bottom: 5px;
            }
            .sp-container .prd-ui .prd-action .buy-now{
               width: 37.5%;
               font-size: 18px;
            }            
         }
      /*prd action*/
      @media only screen and (max-width: 600px) {
         .sp-container{
            width: 100%;
         }
         .sp-container .prd-ui{
            width: 95%;
         }
      }
   /*single product end*/
   /*profile start*/
      .profile-container{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
      }
      @media only screen and (max-width: 600px) {
         .profile-container{
            width: 100%;
         }
      }
      /*ui*/
         .profile-ui{
            margin-top: -1000px;
            width:90%; 
            height:auto; 
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /*transition: all 0.5s;*/
         }
         .profile-ui.show{
            margin-top: 165px;
         }
         .profile-ui .inner{
            width: calc(100% - 20px);
            height: auto;
            border: 1px solid #ff1e22;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 10px;
         }
         .profile-ui .inner .close{
            margin-top: -18px;
            margin-right: -22px;
            align-self: flex-end;
            font-size: 15px;
            color: red;
            cursor: pointer;
         }
         .profile-ui .inner .topic{
            margin-top: -7px;
            padding: 0px 20px 0px 20px;
            font-family: 'Fira Sans Condensed', sans-serif;
            font-size: 18px;
            font-weight: bold;
            color: #880406;
            background-color: #fff;
         }
         .profile-ui .inner .details{
            width: 100%;
            max-height: 400px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
         .profile-ui .inner .details .form-wrap{
            width: 60%;
            height: 12px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 10px;
            margin: 10px;
            border-radius: 20px;
            box-shadow: 0px 1px 7px rgba(0,0,0,0.9);
            overflow: hidden;
            /*transition: all 0.5s;*/
         }
         .profile-ui .inner .details .form-wrap .edit-btns{
            padding-left: 16px;
            padding-right: 16px;
         }
         @media only screen and (max-width: 600px) {
            .profile-ui{
               width: 85%;
               padding: 15px;
            }
            .profile-ui.show{
               margin-top: 100px;
            }
            .profile-ui .inner .close{
               margin-top: -15px;
               margin-right: -22px;
            }
            .profile-ui .inner .topic{
               margin-top: -12px;
               font-size: 17px;
            }
            .profile-ui .inner .details{
               max-height: 360px;
            }
            .profile-ui .inner .details .form-wrap{
               width: 85%;
            }
            .profile-ui .inner .details .form-wrap .edit-btns{
               padding-left: 8px;
               padding-right: 8px;
            }

         }
         /*personal info*/
            .profile-ui .inner .details .form-wrap.pr-info{
               min-height: 284px;
            }
            .profile-ui .inner .details .form-wrap .form-topic{
               width: 100%;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               font-size: 20px;
               margin-top: -5px;
               color: gray;
               text-decoration: underline;
               cursor: pointer;
            }
            .profile-ui .inner .details .form-wrap form span{
               margin-top: 5px;
               width: 100%;
               font-family: 'Open Sans', sans-serif;
               font-size: 14px;
               font-weight: bold;
            }
            .profile-ui .inner .details .form-wrap form input[type=text]{
               font-family: 'Open Sans', sans-serif;
               padding-left: 5px;
               font-size: 14px;
               font-weight: 300;
               width: 100%;
               box-sizing: border-box;
               border: none;
               border-bottom: 2px solid red;         
            }
            .profile-ui .inner .details .form-wrap form input[type=text]:focus{
               outline: none !important;
               border-bottom: 2px solid red;
            }
            .profile-ui .inner .details .form-wrap form input[type=text]:disabled{
               background: #dddddd;
               color:#000
            }
            .profile-ui .inner .details .form-wrap form input[type=email]{
               font-family: 'Open Sans', sans-serif;
               padding-left: 5px;
               font-size: 14px;
               font-weight: 300;
               width: 100%;
               box-sizing: border-box;
               border: none;
               border-bottom: 2px solid red;
            }
            .profile-ui .inner .details .form-wrap form input[type=email]:focus{
               outline: none !important;
               border-bottom: 2px solid red;
            }
            .profile-ui .inner .details .form-wrap .edit-btn-container{
               display: flex;
               flex-direction: row;
               align-items: center;
               padding: 0px 0px 0px 10px;
            }
            .profile-ui .inner .details .form-wrap .edit-username-btn-container{
               display: flex;
               width: 100%;
               height: 150px;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               padding: 0px 0px 0px 0px;
               border-radius: 10px;
               background-color: rgba(0, 0, 0, 0.1);
            }
            .profile-ui .inner .details .form-wrap .edit-username-btn-container input[type=text]{
               font-family: 'Open Sans', sans-serif;
               padding-left: 5px;
               font-size: 14px;
               font-weight: 300;
               width: 200px;
               box-sizing: border-box;
               border: none;
               border-bottom: 2px solid red;         
            }
            .profile-ui .inner .details .form-wrap .edit-username-btn-container input[type=text]:focus{
               outline: none !important;
               border-bottom: 2px solid red;
            }
            .profile-ui .inner .details .form-wrap .edit-username-btn-container input[type=text]:disabled{
               background: #dddddd;
               color:#000
            }
            @media only screen and (max-width: 600px) {
               .profile-ui .inner .details .form-wrap form span{
                  margin-top: 2px;
                  width: 100%;
                  font-size: 13px;
                  font-weight: bold;
               }
               .profile-ui .inner .details .form-wrap form input[type=text]{
                  padding-left: 0px;
                  font-size: 12px;
                  width: 100%;
               }
               .profile-ui .inner .details .form-wrap form input[type=email]{
                  padding-left: 0px;
                  font-size: 12px;
                  width: 100%;
               }
            }
         /*personal info*/
         /*address*/
            .profile-ui .inner .details .form-wrap.address{
               min-height: 250px;
               overflow-y: auto;
            }
            .profile-ui .inner .details .form-wrap .address-container{
               width: calc(100% - 10px);
               height: auto;
               display: flex;
               flex-direction: column;
               align-items: center;
               border: 1px solid #ddd;
               padding: 5px;
               border-radius: 10px;
            }
            .profile-ui .inner .details .form-wrap .address-container .my-form{
               margin: 0;
               padding: 0;
               display: flex;
               flex-direction: column;
               align-items: left;
            }
            .profile-ui .inner .details .form-wrap .address-container .my-row{
               margin-top: -10px;
               display: flex;
               flex-direction: row;
               align-items: center;
               justify-content: space-between;
            }
            .profile-ui .inner .details .form-wrap .address-container .my-row-col{
               display: flex;
               flex-direction: column;
               align-items: left;
               width: 48%;
            }
            .profile-ui .inner .details .form-wrap .address-container .my-add-col{
               margin-top: 5px;
               display: flex;
               flex-direction: column;
               align-items: left;
               width: 100%;
            }
            .profile-ui .inner .details .form-wrap .address-container .my-card-header{
               margin: 5px 0px 13px 0px;
               padding: 0;
               display: flex;
               flex-direction: row;
               align-items: center;
               width: 100%;
            }
            
            .profile-ui .inner .details .form-wrap .address-container .my-card-header h3{
               width: 100px;
            }
            .profile-ui .inner .details .form-wrap .address-container .btn-edit{
            }
            .profile-ui .inner .details .form-wrap .address-container .btn-cancel{
               display: none;
            }
            .profile-ui .inner .details .form-wrap .address-container .btn-update{
               display: none;
            }
            .profile-ui .inner .details .form-wrap .address-container .my-form input{
               font-family: 'Open Sans', sans-serif;
               padding-left: 5px;
               font-size: 14px;
               font-weight: 300;
               width: 100%;
               box-sizing: border-box;
               border: none;
               border-bottom: 2px solid red;         
            }
            .profile-ui .inner .details .form-wrap .address-container .my-form input:focus{
               outline: none !important;
               border-bottom: 2px solid red;
            }
            .profile-ui .inner .details .form-wrap .address-container .my-form input:read-only{
               background: #dddddd;
               color:#000
            }
            .profile-ui .inner .details .form-wrap .address-container .my-form input:read-only{
               background: #dddddd;
               color:#000
            }
            .profile-ui .inner .details .form-wrap .address-container .my-form label{
               font-size: 14px;
            }
            @media only screen and (max-width: 600px) {
               .profile-ui .inner .details .form-wrap .address-container .my-card-header h3{
                  width: 80px;
               }
            }
         /*address*/
      /*ui*/
   /*profile end*/
   /*inv-preview start*/
      .inv-container{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
         justify-content: flex-start;
         overflow-y: auto;
      }
      @media only screen and (max-width: 600px) {
         .inv-container{
            width: 100%;
         }
      }

      .inside{
         height: auto;
         margin: 5px 300% 0px 5%;
         border-radius: 20px;
         box-shadow: 0px 1px 7px rgba(0,0,0,0.9);
         padding: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: flex-start;
         background-color: rgba(0, 0, 0, 0.7);
         transition: all 0.5s;
         overflow-x: hidden;
         overflow-y: auto;
      }
      .inside.for-print{
         background-color: #fff;
         width: 95%;
         border:1px solid rgba(0, 0, 0, 0.5);
         border-radius: 20px;
      }
      .inside.show{
         margin: 10px 5% 0px 5%;
      }
      @media only screen and (max-width: 600px) {
         .inside{
            width: 90%;
            margin: 10px 200% 0px 2.5%;
            padding: 2px;
         }
         .inside.show{
            margin: 10px 2.5% 0px 2.5%;
         }
      }
      /*inv header*/
         .inside .pr-header{
            width: 100%;
            height: 100px;
            border-radius: 20px 20px 0px 0px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
         }
         .inside .pr-header .logo{
            width: auto;
            height: auto;
            margin-left: 10px;
            cursor: pointer;
         }
         .inside .pr-header .logo.delanka{
            margin-left: -30px;
         }
         .inside .pr-header .logo img{
            width: 140px;
            height: auto;
         }
         .inside .pr-header .inv-no-container{
            margin-right: 20px;
            width: auto;
            height: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
            align-content: center;
            justify-content: center;
            cursor: pointer;
            /*font-family: 'Anton', sans-serif;*/
            font-family: 'Fira Sans Condensed', sans-serif;

         } 
         .inside .pr-header .inv-no-container .inv-text{
            font-size: 50px;
            font-weight: bold;
            color: #fff;
         }
         .inside.for-print .pr-header .inv-no-container .inv-text{
            color: #000;
         }
         .inside .pr-header .inv-no-container .inv-no{
            font-size: 18px;
            font-weight: bold;
            color: #fff;
         }
         .inside.for-print .pr-header .inv-no-container .inv-no{
            color: #000;
         }
         @media only screen and (max-width: 600px) {
            .inside .pr-header{
               height: 50px;
            }
            .inside .pr-header .inv-no-container{
               margin-right: 10px;
            }
            .inside .pr-header .logo{
               margin-left: 10px;
            }
            .inside .pr-header .logo.delanka{
               margin-left: 3px;
            }
            .inside .pr-header .logo img{
                width: 80px;
                height: auto;
            }
            .inside .pr-header .inv-no-container .inv-text{
               font-size: 22px;
               font-weight: bold;
            }
            .inside .pr-header .inv-no-container .inv-no{
               font-size: 15px;
               font-weight: bold;
            }
         }   
      /*inv header*/
      /*inv to*/
         .inside .inv-to-container{
            margin-left: 15px;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            margin: 0px 0px 5px 0px;
         }
         .inside .inv-to-container .inv-to{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            font-size: 16px;
            color: #fff;
         }
         .inside.for-print .inv-to-container .inv-to{
            color: #000;
            
         }
         .inside .inv-to-container .inv-to .bold-txt{
            font-weight: bold;
         }
         @media only screen and (max-width: 600px) {
            .inside .inv-to-container{
               margin-left: 12px;
            }
            .inside .inv-to-container .inv-to{
               font-size: 13px;
            }
         }
      /*inv to*/
      /*inv items*/
         .inv-table{
            width: 98%;
            display: flex;
            flex-direction: column;
            align-items: center;
           background-color: rgba(188, 188, 188, 0.3);
            border-radius: 20px;
            padding: 5px;
            height: auto;
            min-height: 300px;
         }
         .inv-table table{
            width: calc(100% - 5px);
            border-collapse: collapse;
            border-spacing: 0;
            font-size: 15px;
            border: none;
         }
         .inv-table.sticky-header table thead{
            position: sticky;
            top: 0;
         }
         .inv-table table thead tr th{
            text-align: center;
         }
         .inv-table thead th {
             padding: 10px;
             text-align: left;
             text-shadow: 1px 1px 1px #000;
             color: #fff;
             background-color: #676364;
             border: none;
         }
         .inv-table.t-back thead th {
             background-color: rgba(103, 99, 100, 0.8);
         }
         .inv-table thead th:first-child {
             border-radius: 15px 0 0 15px;
         }
         .inv-table thead th:last-child {
             border-radius: 0 15px 15px 0;
         }
         .inv-table table tbody{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
         }
         .inv-table table thead,tbody tr{
            display: table;
            table-layout: fixed;
            width: 100%;
         }
         .inv-table table tbody tr td{
            height: 15px;
            text-align: center;
            /*transition: all 0.5s;*/
         }
         .inv-table table tbody tr td:hover{
         }
         .inv-table tbody td {
             padding: 5px;
             text-shadow: 1px 1px 1px #fff;
         }
         .inv-table.t-back tbody td {
             text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
         }
         .inv-table tbody td {
             border: none;
             background-color: #fff;
             color: #d34e4f;
         }
         .inv-table.t-back tbody td {
            background-color: rgba(255, 255, 255, 0.7);
             /*color: #d34e4f;*/
             color: #eb3133;
         }
         .inv-table tbody tr{
            border-top: 1px solid #bcbcbc;
            border-bottom: 1px solid #bcbcbc;
            cursor: pointer;
         }
         .inv-table.t-back tbody tr{
            border-top: 1px solid rgba(0, 0, 0, 0);
            border-bottom: 1px solid rgba(0, 0, 0, 0);
         }
         .inv-table tbody tr td:first-child {
             border-radius: 15px 0 0 15px;
         }
         .inv-table tbody tr td:last-child {
             border-radius: 0 15px 15px 0;
         }
         .inv-table table thead tr th:nth-child(1){
            width: 5%;
         }
         .inv-table table thead tr th:nth-child(2){
            width: 55%;
         }
         .inv-table table thead tr th:nth-child(3){
            width: 15%;
         }
         .inv-table table thead tr th:nth-child(4){
            width: 25%;
         }

         .inv-table table tbody tr td:nth-child(1){
            width: 5%;
            /*padding-left: 10px;*/
         }
         .inv-table table tbody tr td:nth-child(2){
            width: 55%;
            padding: 0px;
         }
         .inv-table table tbody tr td:nth-child(3){
            width: 15%;
            /*padding-left: 20px;*/
         }
         .inv-table table tbody tr td:nth-child(4){
            /*text-align: right;*/
            width: 25%;
            /*padding-right: 15px;*/
         }
         .item-det-container{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
         .item-det-container .item-det{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
         }
         .item-det-container .item-det .pr-img{ 
            width: 60px;
            height: 50px;
            margin-left: 0px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .item-det-container .item-det .pr-img img{
            width: 100%;
            height: auto;
         }
         .item-det-container .item-det .pr-det{
            width: calc(100% - 60px);
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
         }
         .item-det-container .item-det .pr-det .pr-name{
            width: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .item-det-container .item-det .pr-det .pr-name .cat{
            display: flex;
            flex-direction: column;
            width: 100%;
            font-size: 10px;
            color: rgba(0, 0, 0, 0.4);
         }
         .item-det-container .item-det .pr-det .pr-name .name{
            display: flex;
            flex-direction: column;
            width: 100%;
         }
         .item-det-container .item-det .pr-det .pr-price{
            width: 30%;
         }
         .item-det-container .item-warranty-det{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: rgba(0, 0, 0, 0.5);
            font-size: 10px;
            text-align: center;
            margin-top: -10px;
         }
         @media only screen and (max-width: 600px) {
            .inv-table{
               width: 97%;
               min-height: 250px;
            }
            .inv-table table{
               font-size: 12px;
            }
            .inv-table tbody td {
                padding: 3px;
            }
            .inv-table table tbody tr td{
               height: 12px;
               text-align: center;
               /*transition: all 0.5s;*/
            }
            .inv-table table tbody tr td:hover{
               height: 15px;
            }
            .item-det-container .item-det{
               width: 100%;
               height: auto;
            }
            .item-det-container .item-det .pr-img{
               width: 100%;
               margin-left: 0px;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
            }
            .item-det-container .item-det .pr-img img{
               width: 60px;
               height: auto;
            }
            .item-det-container .item-det .pr-det{
               width: 100%;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
            }
            .item-det-container .item-det .pr-det .pr-name{
               width: 100%;
            }
            .item-det-container .item-det .pr-det .pr-price{
               width: 100%;
            }
            .item-det-container .item-warranty-det{
               margin-top: 0;
            }
         }
      /*inv items*/
      /*inv totals*/
         .inside .inv-total-container{
            padding: 7px;
            box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
            border-radius: 10px;
            width: 40%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;
            font-size: 14px;
            align-self: center;
            margin: 5px;
         }
         .inside.for-print .inv-total-container{
            color: #000;
            box-shadow: 0px 3px 5px rgba(0,0,0,0.4);
            border: 1px solid rgba(0, 0, 0, 0.5);
            border-radius: 10px;
         }
         .inside .inv-total-container .row{
            margin-top: 2px;
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
         }
         .inside .inv-total-container .row .left{
            width: 50%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
         }
         .inside .inv-total-container .row .right{
            width: 50%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
         }
         .inside .inv-total-container .row-line{
            width: 100%;
            height: 1px;
            border: 2px solid #ddd;
            border-width: 1px 0px 0px 0px;
         }
         .inside .inv-total-container .row.status{
         }
         .inside .inv-total-container .row.status .left{
            width: 70%;
         }
         .print-body .pr-container .inside .inv-total-container .row.status .right{
            width: 30%;
         }
         .inside .inv-total-container .row.sub{
            width: 100%;
            font-size: 12px;
            margin: -2px 0px 0px 0px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .inside .inv-total-container .row.sub .left{
            width: 100%;
         }
         @media only screen and (max-width: 600px) {
            .inside .inv-total-container{
               width: 50%;
            }
         }
      /*inv totals*/
      /*inv warranty terms*/
         .inside .inv-waranty-container{
            padding: 7px;
            box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
            border-radius: 10px;
            width: 95%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;
            font-size: 14px;
            align-self: center;
            margin: 5px;
         }      
         .inside .inv-waranty-container .text{
            width: 90%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            color: rgba(0, 0, 0, 1);
         }
         .inside .inv-waranty-container .text.sinhala{
            font-size: 12px;
         }
         .inside .inv-waranty-container .text.main-topic{
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            font-weight: bold;
            color: red;
            text-decoration: underline;
         }
         .inside .inv-waranty-container .text.sub-topic{
            margin-bottom: 5px;
            font-size: 15px;
            font-weight: bold;
            color: red;
         }
      /*inv warranty terms*/
      /*inv thank you & notification*/
         .inside .thank-text{
            font-size: 15px;
            color: #fff;
            background-color: rgba(0,0,0,0.5);
            padding: 10px;
            border-radius: 10px;
            width: 90%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .inside.for-print .thank-text{
            background-color: rgba(0,0,0,0.3);
            color: #000;
         }
         .inside .thank-text.glow{
            animation: glow 1s ease-in-out infinite alternate;
         }
         @-webkit-keyframes glow {
            0% {
                text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 10px rgba(31, 124, 255,0.5), 0 0 20px rgba(31, 124, 255,0.5), 0 0 30px rgba(31, 124, 255,0.5), 0 0 40px rgba(31, 124, 255,0.5), 0 0 50px rgba(31, 124, 255,0.5);
            }
            100% {
                text-shadow: 0 0 10px #fff, 0 0 10px rgba(101, 164, 252,0.5), 0 0 20px rgba(101, 164, 252,0.5), 0 0 30px rgba(101, 164, 252,0.5), 0 0 40px rgba(101, 164, 252,0.5), 0 0 50px rgba(101, 164, 252,0.5), 0 0 60px rgba(101, 164, 252,0.5);
            }
         }      
         .inside .back-btn-conainer{
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            color: #fff;
         }
         .inside.for-print .back-btn-conainer{
            color: #000;
         }
         .inside .back-btn-conainer span{
            color: red;
            margin-right: 5px;
         }
         .inv-down-btn{
            /*transition: all 1s;*/
            margin-top: 10px; 
            margin-right:800%;
         }
         .inv-down-btn.show{
            margin: 0px 0px 0px 0px;
         }
      /*inv thank you & notification*/
   /*inv-preview end*/
   /*collect from-multi-acc start*/
      .collect-container{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      @media only screen and (max-width: 600px) {
         .collect-container{
            width: 100%;
         }
      }
      .collect-ui{
         margin-top: -1200px;
         width:90%; 
         height:auto; 
         padding: 20px;
         background-color: #fff;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*transition: all 0.5s;*/
      }
      .collect-ui.show{
         margin-top: 0px;
      }
      .collect-ui .inner{
         width: calc(100% - 20px);
         height: auto;
         border: 1px solid #ff1e22;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
         padding-bottom: 10px;
      }
      .collect-ui .inner .collect-ui-header{
         width: 107%;
         display: flex;
         flex-direction: row;
         align-items: center;
      }
      .collect-ui .inner .collect-ui-header .topic-container{
         padding-left: 10%;
         width: 90%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .collect-ui .inner .collect-ui-header .topic-container .topic{
         margin-top: -7px;
         padding: 0px 20px 0px 20px;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 18px;
         font-weight: bold;
         color: #880406;
         background-color: #fff;
         align-self: center;
      }
      .collect-ui .inner .collect-ui-header .close-container{
         width: 10%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .collect-ui .inner .collect-ui-header .close-container .close{
         margin-top: -10px;
         align-self: flex-end;
         font-size: 15px;
         color: red;
         cursor: pointer;
         align-self: flex-end;
      }
      @media only screen and (max-width: 600px) {
         .collect-ui{
            width: 80%;
         }
         .collect-ui .inner .collect-ui-header{
            width: 115%;
         }
         .collect-ui .inner .collect-ui-header .topic-container{
            padding-left: 0%;
         }         
         .collect-ui .inner .collect-ui-header .topic{
            margin-top: -7px;
            padding: 0px 20px 0px 20px;
            font-family: 'Fira Sans Condensed', sans-serif;
            font-size: 18px;
            font-weight: bold;
            color: #880406;
            background-color: #fff;
            align-self: center;
            margin-left: 15%;
         }         
         .collect-ui .inner .collect-ui-header .close {
            margin-top: -10px;
            margin-left: 21%;
            align-self: flex-end;
            font-size: 15px;
            color: red;
            cursor: pointer;
            align-self: flex-end;
         }
      }

      .collect-details{
         margin: 10px;
         padding: 10px;
         padding-bottom: 20px;
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .collect-acc{
         margin-bottom: 20px;
         padding: 0;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         width: 60%;
         height: 40px;
         text-align: center;
         font-size: 1rem;
         box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
         border-radius: 15px;
      }
      .collect-acc:hover{
         box-shadow: 0 8px 8px rgba(0, 0, 0, 0.4);
      }
      @media only screen and (max-width: 600px) {
         .collect-acc{
             width: 90%;
            font-size: 0.8rem;
         }
      }
      .collect-acc span:nth-child(1){
         margin: 0;
         padding: 0;
         width: 40%;
         border-right: 1px solid #b8b8b8 ;
      }
      .collect-acc span:nth-child(2){
         margin: 0;
         padding: 0;
         width: 40%;
         border-right: 1px solid #b8b8b8 ;
      }
      .collect-acc span:nth-child(3){
         margin: 0;
         padding: 0;
         width: 20%;
         cursor: pointer;
      }
      .collect-btn{
         padding-left: 5px;
         padding-right: 5px;
      }
   /*collect from-multi-acc end*/
   /*fogot-pass start*/
      .fogot-container{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      @media only screen and (max-width: 600px) {
         .fogot-container{
            width: 100%;
         }
      }
      /*ui*/
         .fogot-ui{
            margin-top: -1000px;
            width:90%; 
            height:auto; 
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /*transition: all 0.5s;*/
         }
         .fogot-ui.fogot-show{
            margin-top: -100px;
         }
         .fogot-ui .inner{
            width: calc(100% - 20px);
            height: auto;
            border: 1px solid #ff1e22;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 10px;
         }
         .fogot-ui .inner .close{
            margin-top: -18px;
            margin-right: -22px;
            align-self: flex-end;
            font-size: 15px;
            color: red;
            cursor: pointer;
         }
         .fogot-ui .inner .topic{
            margin-top: -7px;
            padding: 0px 20px 0px 20px;
            font-family: 'Fira Sans Condensed', sans-serif;
            font-size: 18px;
            font-weight: bold;
            color: #880406;
            background-color: #fff;
         }
         .fogot-ui .inner .details{
            width: 100%;
            max-height: 400px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
         }

         /*//find account//*/
            .fAcc_container{
               width: 100%;
               text-align: center;
               margin: 0;
               padding: 0;
            }
            .fAcc_content{
               margin: auto;
               padding: 10px;
               width: 80%;
               border: 1px solid green;
               border-radius: 15px;
               text-align: left;
            }
            .fAcc_content h3{
               width: 100%;
               text-align: center;
            }
            .fAcc_form{
               margin: 0;
               padding: 0;
               display: flex;
               align-items: center;
               justify-content: space-between;
            }
            .fAcc_form input {
               width:80%;
               margin: 5px;
            }
            @media only screen and (max-width: 600px) { 
               .fAcc_container{
                   width: 90%;
               }
               .fAcc_content{
                   width: 85%;
               }
               .fAcc_form{
                   margin: 0;
                   padding: 0;
                   display: flex;
                   flex-direction: column;
                   align-items: center;
                   justify-content: center;
               }
               .fAcc_form input {
                   width:90%;
               }
               .fAcc_form button {
                   width:50%;
               }
            }
         /*\\find account\\ */

         /*//search result//*/
            .mcard{
               width: 90%;
               margin: 15px 900px 0px 0px;
               padding: 10px;
               display: none;
               align-items: center;
               flex-direction: column;
               /*transition: all 0.5s;*/
            }
            .mcard.show-mcard{
               margin: 15px 0px 0px 0px;
            }
            .verifyMeth_row{
               margin: 0px 0px 0px 0px;
               padding: 10px;
               width: 40%;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
            }
            .verifyMeth_card{
               padding: 2px;
               min-width: 170px;
               height: 110px;
               background-color: #fff;
               box-shadow:0px 5px 5px rgba(0, 0, 0, 0.5);
               border-radius: 25px;
               cursor: pointer;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
            }
            .verifyMeth_card h4{
               width: 100%;
               color: #000;
               text-align: center;
            }
            .verifyMeth_card p{
               width: 100%;
               color: #000;
               width: 100%;
               text-align: center;
            }
            .verifyMeth_card span{
               width: 100%;
               color: #d4d4d4;
               opacity: 0.2;
               text-align: center;
               display: block;
               animation: mAnimate 0.75s infinite;
            }
            .verifyMeth_card:hover{
               box-shadow:0px 7px 7px rgba(0, 0, 0, 0.5);
            }
            @keyframes mAnimate{
                100%{
                    opacity: 1;
                }
            }

            @media only screen and (max-width: 600px) {
               .mcard{
                  width: 90%;
               }
               .verifyMeth_row{
                  width: 90%;
                  flex-direction: column;
               }
            }
         /*\\search result\\*/

         @media only screen and (max-width: 600px) {
            .fogot-ui{
               width: 85%;
               padding: 15px;
            }
            .fogot-ui.show{
               margin-top: 100px;
            }
            .fogot-ui .inner .close{
               margin-top: -15px;
               margin-right: -22px;
            }
            .fogot-ui .inner .topic{
               margin-top: -12px;
               font-size: 17px;
            }
            .fogot-ui .inner .details{
               max-height: 360px;
            }
         }
      /*ui*/
   /*fogot-pass end*/
   /*basic-chain-container Start*/
      .basic-chain-container{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      @media only screen and (max-width: 600px) {
         .basic-chain-container{
            width: 100%;
         }
      }
      /*ui*/
         .basic-chain-ui{
            margin-top: -100px;
            width:90%; 
            height:auto; 
            padding: 5px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /*transition: all 0.5s;*/
            opacity: 0;
         }
         .basic-chain-ui.show-bc{
            opacity: 1;
         }
         .basic-chain-ui .header-bc{
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
         }
         .basic-chain-ui .header-bc .topic-container{
            width: 90%;
            padding-left: 10%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .basic-chain-ui .header-bc .topic-container .topic-bc{
            font-family: 'Fira Sans Condensed', sans-serif;
            font-size: 20px;
            font-weight: bold;
            color: red;
         }
         .basic-chain-ui .header-bc .close-container{
            width: 10%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .basic-chain-ui .header-bc .close-container .close-bc{
            align-self: flex-end;
            font-size: 15px;
            color: red;
            cursor: pointer;
         }
         .basic-chain-ui .content{
            width: 100%;
            height: auto;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
         .basic-chain-ui .content .level-container{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .basic-chain-ui .content .level-container .lvl-row{
            width: 95%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 5px;
         }
         .basic-chain-ui .content .level-container .lvl-row .numb{
            color: #fff;
            font-size: 15px;
            padding: 1px 20px 1px 20px;
            border: 1px solid #ddd;
            border-radius: 7px 7px 0px 0px;
            border-width: 1px 1px 0px 1px;
         }
         .basic-chain-ui .content .level-container .lvl-row .row{
            width: 98%;
            padding: 3px 3px 3px 3px;
            overflow-x: auto;
            border-radius: 10px;
            border: 1px solid #ddd;
            display: flex;
            flex-direction: row;
            align-items: center;
         }
         .basic-chain-ui .content .level-container .lvl-row .row .u-card{
            margin: 0px 2px 0px 2px;
            min-width: 70px;
            height: 40px;
            border-radius: 5px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 11px;
         }
         @media only screen and (max-width: 600px) {
            .basic-chain-ui{
               margin-top: 0;
               width: 95%;
               padding: 5px;
            }
            .basic-chain-ui .content .level-container .lvl-row .row{
               -ms-overflow-style: none;  /* IE and Edge */
               scrollbar-width: none;  /* Firefox */
               -webkit-overflow-scrolling: touch;
            }
            .basic-chain-ui .content .level-container .lvl-row .row::-webkit-scrollbar {
               display: none;
            }
         }         
      /*ui*/
   /*basic-chain-container end*/
   /*premium-chain-container Start*/
      .premium-chain-container{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      @media only screen and (max-width: 600px) {
         .premium-chain-container{
            width: 100%;
         }
      }
      /*ui*/
         .premium-chain-ui{
            margin-top: -100px;
            width:90%; 
            height:auto; 
            padding: 5px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /*transition: all 0.5s;*/
            opacity: 0;
         }
         .premium-chain-ui.show-pc{
            opacity: 1;
         }
         .premium-chain-ui .header-pc{
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
         }
         .premium-chain-ui .header-pc .topic-container{
            width: 90%;
            padding-left: 10%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .premium-chain-ui .header-pc .topic-container .topic-pc{
            font-family: 'Fira Sans Condensed', sans-serif;
            font-size: 20px;
            font-weight: bold;
            color: red;
         }
         .premium-chain-ui .header-pc .close-container{
            width: 10%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .premium-chain-ui .header-pc .close-container .close-pc{
            align-self: flex-end;
            font-size: 15px;
            color: red;
            cursor: pointer;
         }
         .premium-chain-ui .content{
            width: 100%;
            height: auto;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
         .premium-chain-ui .content .pc-lvl-container{
            width: 100%;
            height: auto;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
         .premium-chain-ui .content .pc-lvl-container .pc-row{
            width: auto;
            height: 50px;
            overflow: hidden;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 2px;
         }
         .premium-chain-ui .content .pc-lvl-container .pc-row.mid-row{
            height: 30px;
         }
         .premium-chain-ui .content .pc-lvl-container .pc-row .pc-card{
            height: calc(100% - 2px);
            width: 70px;
            margin: 1px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .premium-chain-ui .content .pc-lvl-container .pc-row .pc-card i{
            font-size: 15px;
            color: red;
         }
         .premium-chain-ui .content .pc-lvl-container .pc-row .pc-card.pr-user{
            border-radius: 5px;
            font-size: 10px;
            text-align: center;
            background-color: #fff;
            cursor: pointer;
         }
         .premium-chain-ui .content .pc-lvl-container .pc-row .pc-card.pr-user-first{
            border-radius: 5px;
            font-size: 10px;
            text-align: center;
            background-color: #fff;
            cursor: pointer;
         }
         .premium-chain-ui .content .pc-lvl-container .pc-row .pc-card.mid-col{
            width: 40px;
         }

         .premium-chain-ui .content .level-container{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         @media only screen and (max-width: 600px) {
            .premium-chain-ui{
               margin-top: 0;
               width: 95%;
               padding: 5px;
            }
         }         
      /*ui*/
   /*basic-chain-container end*/
   /*intro-vid start*/
      .intro-vid-container{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
      }
      .intro-vid-ui{
         margin-top: -1000px;
         width:auto; 
         height:auto; 
         padding: 30px;
         background-color: #fff;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*transition: all 0.5s;*/
      }
      .intro-vid-ui.show{
         margin-top: 100px;
      }
      .intro-vid-ui .inner{
         width: 300px;
         height: auto;
         border: 1px solid #ff1e22;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
         padding-bottom: 10px;
         padding-left: 10px;
         padding-right: 10px;
      }
      .intro-vid-ui .inner .close{
         margin-top: -30px;
         margin-right: -30px;
         align-self: flex-end;
         font-size: 18px;
         color: red;
         cursor: pointer;
      }
      .intro-vid-ui .inner .topic{
         margin-top: -3px;
         padding: 0px 20px 0px 20px;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 18px;
         font-weight: bold;
         color: #880406;
         background-color: #fff;
      }
      .intro-vid-ui .inner .video-container{
         width: 100%; 
         margin-top: 5px;
         max-height: 500px;
         overflow-y: scroll;
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .intro-vid-ui .inner .video-name{
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 18px;
         font-weight: bold;
      }
      @media only screen and (max-width: 600px) {
         .intro-vid-container{
            width: 100%;
         }
         .intro-vid-ui{
            padding: 20px;
         }
         .intro-vid-ui.show{
            margin-top: 50px;
         }
         .intro-vid-ui .inner{
            width: 250px;
         }
         .intro-vid-ui .inner .close{
            margin-top: -20px;
            margin-right: -20px;
         }
         .intro-vid-ui .inner .topic{
            margin-top: -10px;
         }
      }
   /*intro-vid end*/
   /*cycle-order start*/
      .cycle-order-container{  
         position: fixed;
         top: 0;
         width: 50%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
         display: none;
         flex-direction: column;
         align-items: center;
      }
      .cycle-order-ui{
         margin-top: -1000px;
         width:auto; 
         height:auto; 
         padding: 30px;
         background-color: #fff;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*transition: all 0.5s;*/
      }
      .cycle-order-ui.show{
         margin-top: 180px;
      }
      .cycle-order-ui .inner{
         width: 300px;
         height: auto;
         border: 1px solid #ff1e22;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
         padding-bottom: 10px;
         padding-left: 10px;
         padding-right: 10px;
      }
      .cycle-order-ui .inner .close{
         margin-top: -30px;
         margin-right: -30px;
         align-self: flex-end;
         font-size: 18px;
         color: red;
         cursor: pointer;
      }
      .cycle-order-ui .inner .topic{
         margin-top: -3px;
         padding: 0px 20px 0px 20px;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 18px;
         font-weight: bold;
         color: #880406;
         background-color: #fff;
      }
      .cycle-order-ui .inner .co-details{
         margin-top: 5px;
         width: 100%;
         height: auto;
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .cycle-order-ui .inner .co-details .cod-header{
         width: 100%;
         height: auto;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
      }
      .cycle-order-ui .inner .co-details .cod-header .option{
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .cycle-order-ui .inner .co-details .cod-header .option label{
         font-size: 13px;
         color: rgba(0, 0, 0, 0.8);
      }
      .cycle-order-ui .inner .co-details .cod-header .option{
         margin: 0px 2px 0px 2px;
      }
      .cycle-order-ui .inner .co-details .cod-header .option:nth-child(2) input{
         width: 30px;
         text-align: center;
      }
      .cycle-order-ui .inner .co-details .cod-header .option input[type=submit]{
         padding: 0px 2px 0px 2px;
      }
      .cycle-order-ui .inner .co-details .cod-header .option:nth-child(3) input{
         width: 80px;
         height: 16px;
         text-align: center;
      }
      .cycle-order-ui .inner .co-details .cod-header .option:nth-child(4) input{
         width: 60px;
         text-align: center;
      }
      .cycle-order-ui .inner .co-details .cod-header-apply{
         margin-top: 2px;
         width: 100%;
         height: auto;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: flex-end;
         overflow: hidden;
      }
      .cycle-order-ui .inner .co-details .cod-header-apply .order-total{
         padding: 1px 5px 1px 5px;
         display: flex;
         flex-direction: column;
         align-items: center;
         border-radius: 5px;
         background-color: #ddd;
      }
      .cycle-order-ui .inner .co-details .cod-header-apply .order-total .tamount{
         font-size: 14px;
         font-weight: bold;
      }
      .cycle-order-ui .inner .co-details .cod-header-apply .order-total .txt{
         font-size: 13px;
         color: rgba(0, 0, 0, 0.8);
      }
      .cycle-order-ui .inner .co-details .cod-header-apply .btn{
         width: 82px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .cycle-order-ui .inner .co-details .cod-header-apply .btn button{
         background-color: #fff; /* Green */
         padding: 1px 15px 1px 15px;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         font-size: 14px;
         font-weight: 400;
         margin: 4px 2px;
         cursor: pointer;
         color: #d34e4f; 
         border: 1px solid #fff;
         border-radius: 10px;
         box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
      }
      .cycle-order-ui .inner .co-details .cod-header-apply .btn button:hover{
         box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.5);
         letter-spacing: 0px;
      }
      .cycle-order-ui .inner .co-details .cod-header-apply .btn button:disabled{
         color: #ddd;
         box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
         cursor: default;
         
      }

      @media only screen and (max-width: 600px) {
         .cycle-order-ui .inner .co-details .cod-header .option:nth-child(3) input{
            width: 65px;
            text-align: center;
         }
         .cycle-order-ui .inner .co-details .cod-header .option:nth-child(4) input{
            width: 50px;
            text-align: center;
         }
         .cycle-order-ui .inner .co-details .cod-header-apply .btn{
            width: 60px;
         }
         .cycle-order-ui .inner .co-details .cod-header-apply .btn button{
            padding: 1px 5px 1px 5px;
            font-size: 13px;
         }
      }      
      .cycle-order-ui .inner .co-details .co-orders-list{
         padding: 5px;
         margin-top: 5px;
         width: 95%;  
         max-height: 320px;
         border-radius: 10px;
         border: 1px solid #ddd;
         display: flex;
         flex-direction: column;
         align-items: center;
         overflow-y: auto;
      }
      .cycle-order-ui .inner .co-details .co-orders-list .list-items{
         margin-top: 10px;
         width: 100%;
         min-height: 52px;
         border-radius: 5px;
         box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
         display: flex;
         flex-direction: column;
         align-items: center;
         transition: all 0.5s;
         overflow: hidden;
      }
      .cycle-order-ui .inner .co-details .co-orders-list .list-items:hover{
         min-height: 140px;
      }
      /*det*/
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det{
            width: 100%;
            height: 60px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det .item-no{
            margin-left: 5px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            padding-left: 0px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            text-align: center;
            background-color: #ddd;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det .item-collect-date{
            width: 40%;
            margin-left: 0px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            text-align: center;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det .item-collect-date .date{
            width: 100%;
            font-weight: bold;
            font-size: 15px;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det .item-collect-date .text{
            width: 100%;
            color: rgba(0, 0, 0, 0.8);
            font-size: 13px;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det .item-collect-date .check{
            display: flex;
            flex-direction: row;
            align-items: center;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det .item-collect-date .check label{
            margin-left: 2px;
            font-size: 13px;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det .item-extra{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 0px 1px 0px 1px;
            border-radius: 15px;
            font-size: 12px;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det .item-extra .itm-tamount{
            font-weight: bold;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det .item-extra .itm-status{
            color: rgba(0, 0, 0, 0.8);
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det .item-add-edit-button{
            padding: 0px 2px 0px 2px;
            width: auto;
            margin-left: 0px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det .item-add-edit-button .m-btn{
            background-color: #fff; /* Green */
            padding: 1px 5px 1px 5px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
            font-weight: 400;
            margin: 4px 2px;
            cursor: pointer;
            color: #d34e4f; 
            border: 1px solid #fff;
            border-radius: 10px;
            box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det .item-add-edit-button .m-btn:hover{
            box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.5);
            letter-spacing: 0px;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det .item-add-edit-button .m-btn:disabled{
            color: #ddd;
            box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
            cursor: default;
         }
      /*det*/
      /*products*/
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .prod-container{
            padding: 5px;
            width: auto;
            height: 70px;
            max-height: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-y: auto;
            border-radius: 5px;
            border-top: 1px solid #ddd;
            overflow-x: hidden;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .prod-container .product{
            min-width: 205px;
            height: auto;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            border-bottom: 1px solid #ddd;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .prod-container .product .image{
            width: 40px;
            height: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: gray;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .prod-container .product .pname{
            width: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .prod-container .product .rqty{
            width: 25px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .prod-container .product .pamount{
            width: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
         }
      /*products*/


      @media only screen and (max-width: 600px) {
         .cycle-order-container{
            width: 100%;
         }
         .cycle-order-ui{
            padding: 20px;
         }
         .cycle-order-ui.show{
            margin-top: 60px;
         }
         .cycle-order-ui .inner{
            width: 250px;
         }
         .cycle-order-ui .inner .close{
            margin-top: -20px;
            margin-right: -20px;
         }
         .cycle-order-ui .inner .topic{
            margin-top: -10px;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .det .item-no{
            font-size: 14px;
         }
         .cycle-order-ui .inner .co-details .co-orders-list .list-items .prod-container .product{
            font-size: 13px;
         }
      }
   /*cycle-order end*/

/*Header End*/

/*Footer Start*/
   .footer{
      position: fixed;
      bottom: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
   }
   .footer-container{
      width: 50%;
      height: auto;
      background-color: #fff;
      border-radius: 0px 0px 0px 0px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 5px;
      padding-top: 2px;
   }
   .footer-container .f-icon{
      font-size: 25px;
      min-width: 20px;
      margin-left: 30px;
      margin-right: 30px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
   }
   .footer-container .f-icon .f-txt{
      display: flex;
      margin-top: -3px;
      font-size: 13px;
      color: gray;
   }
   .footer-container .f-icon a{
      color: #04a2b4;
   }
   .footer-container .f-icon:hover{
      color: #000;
   }
   @media only screen and (max-width: 600px) {
      .footer-container{
         width: 100%;
         height: 40px;
         padding-bottom: 2px;
      }
      .footer-container .f-icon{
         min-width: 17px;
         margin-left: 15px;
         margin-right: 15px;
      }
      .footer-container .f-icon .f-txt{
         margin-top: -4px;
         font-size: 12px;
         color: gray;
      }
   }
/*Footer End*/

/*Dashboard Start*/
   /*Notice Slider Start*/
      .notice-container{
         width: 100%;
         height: 160px;
         overflow-y: scroll;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         margin-top: 40px;
      }
      .notice-container::-webkit-scrollbar {
         display: none;
      }
      .notice-container{
         -ms-overflow-style: none;  /* IE and Edge */
         scrollbar-width: none;  /* Firefox */
      }
      .notice-card{
         margin: 0px 10px 20px 10px;
         min-height: 140px;
         min-width: 250px;
         max-width: 250px;
         border-radius: 10px;
         background-color: #fff;
         overflow: hidden;
         display:flex; 
         flex-direction:column; 
         align-items:center;
      }
      .notice-card img{
         width:100%; 
         height: auto;
      }
      @media only screen and (max-width: 600px) {
         .notice-container{
            margin-top: 36px;
         }
         .notice-card{
            height: 70%;
            min-height: 140px;
            margin: 0px 10px 15px 10px;
            min-width: 250px;
            max-width: 250px;
            border-radius: 10px; 
         }

      }
   /*Notice Slider End*/
   /*User Name Title Start*/
      .username-container{
         width: 90%;
         min-height: 40px;
         background-color: #fff;
         border-radius: 25px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         overflow-x:hidden;
         font-family: 'Fira Sans Condensed', sans-serif;
         /*letter-spacing: 2px;*/
         font-size: 23px;
         font-weight: 600;
         margin-bottom: 25px;
         box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.4);
      }
      @media only screen and (max-width: 600px) {
         .username-container{
            min-height: 30px;
            font-size: 20px;
            border-radius: 20px;
            margin-bottom: 20px;
         }
      }
   /*User Name Title End*/
   /*User Packages Start*/
      .packages-container{
         width: 90%;
         height: 170px;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
      }
      @media only screen and (max-width: 600px) {
         .packages-container{
            height: 120px;
         }
      }
      .basic-container{
         width: 48%;
         height: 100%;
         border-radius: 20px;
         background-image: linear-gradient(#4291a4, #16545f);
         display: flex;
         flex-direction: column;
         align-items: center;
         box-shadow: 0px 7px 10px 0 rgba(0,0,0,0.4);
         display: none;
      }
      .basic-container .title-band{
         margin-top: 15px;
         width: 100%;
         height: 30px;
         color: #fff;
         background-color: rgba(0, 0, 0, 0.5);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 25px;
         font-weight: 900;
         border-radius: 10px 10px 0px 0px;
      }
      .basic-container .imc-points{
         margin-top: 45px;
         color: #fff;
         font-size: 40px;
         font-weight: 600;
      }
      .basic-container .imc-points-txt{
         color: #fff;
      } 
      @media only screen and (max-width: 600px) {
         .basic-container{
            box-shadow: 0px 5px 5px 0 rgba(0,0,0,0.4);
         }
         .basic-container .title-band{
            font-size: 20px;
         }
         .basic-container .imc-points{
            margin-top: 23px;
            font-size: 30px;
         }
      }
      .premium-container{
         /*
         width: 48%;
         height: 100%;
         border-radius: 20px;
         background-image: linear-gradient(#c5b611, #c5a80f);
         display: flex;
         flex-direction: column;
         align-items: center;
         box-shadow: 0px 7px 10px 0 rgba(0,0,0,0.4);
         */
         width: 100%;
         height: 100%;
         border-radius: 20px;
         background-image: linear-gradient(#4291a4, #16545f);
         display: flex;
         flex-direction: column;
         align-items: center;
         box-shadow: 0px 7px 10px 0 rgba(0,0,0,0.4);
      }
      .premium-container .title-band{
         margin-top: 15px;
         width: 100%;
         height: 30px;
         color: #fff;
         background-color: rgba(0, 0, 0, 0.5);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 25px;
         font-weight: 900;
         border-radius: 10px 10px 0px 0px;
      }
      .premium-container .imc-points{
         width: 100%;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         color: #fff;
      }
      .premium-container .imc-points.switching{
         margin-top: 45px;
         color: #fff;
         font-size: 40px;
         font-weight: 600;
         justify-content: center;
      }      
      .premium-container .imc-points .shopA-container{
         width: 100%;
         margin-top: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
         border: 2px solid #fff;
         border-width: 0px 0px 0px 0px;
         overflow: hidden;
      }
      .premium-container .imc-points .shopA-container .title{
         width: 100%;
         padding: 5px 0px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         background-color: rgba(0, 0, 0, 0.25);
         font-size: 30px;
         font-weight: 600;
         border-bottom: 2px solid #fff;
      }
      .premium-container .imc-points .shopA-container:first-child() .title{
         border-radius: 20px 0px 0px 0px;
      }
      .premium-container .imc-points .shopA-container:last-child() .title{
         border-radius: 0px 20px 0px 0px;
      }
      .premium-container .imc-points .shopA-container .points{
         width: 100%;
         padding: 5px 0px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         font-size: 30px;
         font-weight: 600;
      }
      .premium-container .imc-points .shopB-container{
         width: 50%;
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .premium-container .imc-points .shopB-container .title{
         width: 97%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         background-color: rgba(250, 250, 250, 0.5);
         border: 1px solid #fff;
         border-width: 0px 0px 0px 4px;
         font-size: 40px;
         font-weight: 600;
      }
      .premium-container .imc-points .shopB-container .points{
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         font-size: 40px;
         font-weight: 600;
      }
      .premium-container .imc-points-txt{
         color: #fff;
      } 
      @media only screen and (max-width: 600px) {
         .premium-container .title-band{
            font-size: 20px;
         }
         .premium-container .imc-points{
            font-size: 30px;
         }
         .premium-container .imc-points.switching{
            margin-top: 23px;
            font-size: 30px;
         }
         .premium-container .imc-points .shopA-container .title{
            width: 100%;
            font-size: 20px;
            border-width: 0px 3px 0px 0px;
         }
         .premium-container .imc-points .shopB-container .title{
            width: 100%;
            font-size: 20px;
            border-width: 0px 0px 0px 3px;
         }
         .premium-container .imc-points .shopA-container .points{
            font-size: 20px;
         }
         .premium-container .imc-points .shopB-container .points{
            font-size: 20px;
         }
      }
   /*User Packages End*/
   /*My Bussiness Start*/
      .my-bussiness-container{
         padding: 5px 0px 5px 0px;
         margin-top: 20px;
         width: 90%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         color: #fff;
         background-color: #880406;
         border-radius: 15px;
         font-size: 20px;
         cursor: pointer;
         box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.4);
      }   
      .my-bussiness-container:hover{
         letter-spacing: 1px;
      }
      @media only screen and (max-width: 600px) {
         .my-bussiness-container{
            margin-top: 17px;
            font-size: 17px;
            padding: 2px 0px 2px 0px;
         }
      }
   /*My Bussiness End*/
   /*Withdrawals Start*/
      .withdrawals-container{
         margin-top: 20px;
         margin-bottom: 30px;
         width: 90%;
         height: auto;
         padding: 30px 0px 30px 0px;
         border-radius: 10px;
         background-color: #fff;
         box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.4);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .withdrawals-container .inner{
         width: 90%;
         height: auto;
         border: 1px solid #ff1e22;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .withdrawals-container .inner .topic{
         margin-top: -12px;
         padding: 0px 20px 0px 20px;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 18px;
         font-weight: bold;
         color: #880406;
         background-color: #fff;
      }
      .withdrawals-container .inner .details-container{
         width: 100%;
         height: auto;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
      }
      .withdrawals-container .inner .details-container .col1{
         width: 50%;
         height: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .withdrawals-container .inner .details-container .col1 .detail{
         width: 100%;
         font-size: 17px;
         font-weight: 500;
         padding: 5px 0px 10px 100px;
      }
      .withdrawals-container .inner .details-container .col2{
         width: 50%;
         height: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .withdrawals-container .inner .details-container .col2 .m-btn{
         width: 50%;
      }
      .withdrawals-container .inner .details-container .col2 .txt{
         color: rgba(0, 0, 0, 0.5);
         font-size: 12px;
      }
      .withdrawals-container .inner .trans-history{
         margin-top: 20px;
         margin-bottom: 5px;
         width: 98%;
         padding: 5px 0px 5px 0px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         background-color: rgba(100, 100, 100, 0.3);
         border-radius: 20px;
         color: #d34e4f;
         font-size: 22px;
         cursor: pointer;
      }
      .withdrawals-container .inner .trans-history:hover{
         background-color: rgba(100, 100, 100, 0.4);
         letter-spacing: 1px;
      }

      @media only screen and (max-width: 600px) {
         .withdrawals-container{
            margin-top: 17px;
            padding: 20px 0px 20px 0px;
         }
         .withdrawals-container .inner .topic{
            margin-top: -10px;
            padding: 0px 10px 0px 10px;
            font-size: 16px;
         }
         .withdrawals-container .inner .details-container .col1 .detail{
            font-size: 15px;
            font-weight: 500;
            padding: 5px 0px 5px 30px;
         }
         .withdrawals-container .inner .details-container .col2 .m-btn{
            width: 90%;
         }
         .withdrawals-container .inner .trans-history{
            margin-top: 12px;
            border-radius: 17px;
            color: #d34e4f;
            font-size: 18px;
         }
      }
   /*Withdrawals End*/
   /*Order History Start*/
      .order-his-container{
         margin-bottom: 10px;
         width: 90%;
         min-height: 50px;
         height: auto;
         border-radius: 10px;
         background-color: #fff;
         box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.4);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*transition: all 0.5s;*/
      }
      .order-his-container .order-history{
         width: 98%;
         padding: 5px 0px 5px 0px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         background-color: rgba(100, 100, 100, 0.3);
         border-radius: 20px;
         color: #d34e4f;
         font-size: 22px;
         cursor: pointer;
      }
      .order-his-container .order-history:hover{
         background-color: rgba(100, 100, 100, 0.4);
         letter-spacing: 1px;
      }
      @media only screen and (max-width: 600px) {
         .order-his-container .order-history{
            font-size: 18px;
         }
      }
   /*Order History End*/
   /*Cycle Start*/
      .cycle-container{
         margin-top: 20px;
         margin-bottom: 30px;
         width: 90%;
         height: auto;
         padding: 30px 0px 30px 0px;
         border-radius: 10px;
         background-color: #fff;
         box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.4);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .cycle-container .inner{
         width: 90%;
         height: auto;
         border: 1px solid #ff1e22;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .cycle-container .inner .topic{
         margin-top: -12px;
         padding: 0px 20px 0px 20px;
         font-family: 'Fira Sans Condensed', sans-serif;
         font-size: 18px;
         font-weight: bold;
         color: #880406;
         background-color: #fff;
      }
      .cycle-container .inner .details-container{
         width: 100%;
         height: auto;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .cycle-container .inner .details-container .cy-orders-container{
         margin-top: 10px;
         margin-bottom: 10px;
         padding: 0px 20px 0px 20px;
         max-height: 150px;
         display: flex;
         flex-direction: column;
         overflow-y: auto;
         overflow-x: hidden;
      }
      .cycle-container .inner .details-container .cy-orders-container .cy-orders{
         margin: 7px;
         width: 200px;
         min-height: 40px;
         border-radius: 20px;
         box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.4);
         display: flex;
         flex-direction: row;
         align-items: center;
         cursor: pointer;
      }
      .cycle-container .inner .details-container .cy-orders-container .cy-orders .co-name{
         width: 50%;
         height: 90%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         border-right: 1px solid rgba(0, 0, 0, 0.4);
      }
      .cycle-container .inner .details-container .cy-orders-container .cy-orders .co-status{
         width: 50%;
         height: 80%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .cycle-container .inner .details-container .cy-orders-container .cy-orders.add-new{
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
      }
      .cycle-container .inner .details-container .cy-orders-container .cy-orders.add-new i{
         font-size: 20px;
         margin-right: 10px;
      }
      @media only screen and (max-width: 600px){
         .cycle-container{
            margin-top: 17px;
            padding: 20px 0px 20px 0px;
         }
         .cycle-container .inner .topic{
            margin-top: -10px;
            padding: 0px 10px 0px 10px;
            font-size: 16px;
         }
      }
   /*Cycle End*/

/*Dashboard End*/

/*Shop Page Start*/
   .shop-btn{
      max-height: 27px;
      background-color: #fff; /* Green */
      padding: 0px 1px 0px 1px;
      text-align: center;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 400;
      margin: 0;
      cursor: pointer;
      color: #d34e4f; 
      border: 1px solid #fff;
      border-radius: 5px;
      box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
   }
   .shop-btn:hover{
      letter-spacing: 1px;
      box-shadow: 0px 3px 5px 0 rgba(0,0,0,0.6);
   }

   /*category start*/
      .cat-filter-container{
          margin-top: 30px;
          width: 99%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
      }
      .prd-search-container{
         width: 100%;
         height: auto;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
      }
      .prd-search-container input[type=text] {
         margin: 0px 0px 0px -14px;
         width: 92%;
         box-sizing: border-box;
         border: 0px solid #ccc;
         border-radius: 5px;
         font-size: 16px;
         background-color: white;
         background-position: 10px 10px; 
         background-repeat: no-repeat;
         padding: 12px 52px 12px 30px;
         -webkit-transition: width 0.4s ease-in-out;
         transition: width 0.4s ease-in-out;
         outline: none !important;
         box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
      }
      .prd-search-container .prd-search-clear{
         margin:-2px 0px 0px -47px;
      }
      .prd-search-container .prd-search-clear i{
         font-size: 19px;
         font-weight: bold;
         color: rgba(0,0,0,0.2);
         padding: 0px;
         cursor: pointer;
      }
      .prd-search-container .prd-search-clear i:hover{
         color: #f90505;
      }
      .prd-search-container .prd-search-srch{
         margin: 0px 0px 0px 8px;
      }
      .prd-search-container .prd-search-srch i{
         font-size: 19px;
         font-weight: bold;
         color: rgba(0,0,0,0.2);
         padding: 0px;
         cursor: pointer;
      }
      .prd-search-container .prd-search-srch i:hover{
         color: #21afe6;
      }
      @media only screen and (max-width: 600px){
         .prd-search-container input[type=text] {
            margin: 0px 0px 0px -18px;
            width: 94%;
         }

      }


      .cat-filter-container h2{
          margin: 0;
          padding: 5px;
          color: rgba(50, 50, 50, 0.8);
      }
      .cat-container{
          margin-bottom: 0px;
          width: 100%;
          height: 90px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          /*border: 2px solid #ddd;*/
          border-radius: 10px;
      }        
      @media only screen and (max-width: 600px) {
         .cat-filter-container{
             margin-top: 25px;
         }
          .cat-container{
              margin-bottom: 0px;
          }        
      }
      .cat-left-arrow{
          margin-top: -1px;
          width: 4%;
          height: 40%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 2.4rem;
          font-weight: 900;
          color: #03a4b6;
          transform: scaleY(2);
          border-radius: 5px 0px 0px 5px;
          border-right: 2px solid #ddd;
          cursor: pointer;
          background-color: #fff;
      }
      .cat-left-arrow:hover{
          -moz-box-shadow:    inset 0 0 30px #ddd;
          -webkit-box-shadow: inset 0 0 30px #ddd;
          box-shadow:         inset 0 0 30px #ddd;            
      }
      @media only screen and (max-width: 600px) {
          .cat-left-arrow{
              /*opacity: 0;*/
              display: none;
          }
      }
      .cat-categories{
          margin: 2px;
          padding-left: 5px;
          width: 90%;
          height: 90%;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          overflow-x: scroll;
          -ms-overflow-style: none;  /* IE and Edge */
          scrollbar-width: none;  /* Firefox */
          -webkit-overflow-scrolling: touch;
      }
      .cat-categories::-webkit-scrollbar {
          display: none;
      }
      @media only screen and (max-width: 600px) {
         .cat-categories{
            width: 100%;
            margin: 0;
            padding-left: 0;
         }
      }
      .cat-right-arrow{
          margin-top: -1px;
          width: 4%;
          height: 40%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 2.4rem;
          font-weight: 900;
          color: #03a4b6;
          transform: scaleY(2);
          border-radius: 0px 5px 5px 0px;
          border-left: 2px solid #ddd;
          cursor: pointer;
          background-color: #fff;
      }
      .cat-right-arrow:hover{
          -moz-box-shadow:    inset 0 0 30px #ddd;
          -webkit-box-shadow: inset 0 0 30px #ddd;
          box-shadow:         inset 0 0 30px #ddd;            
      }
      @media only screen and (max-width: 600px) {
          .cat-right-arrow{
              opacity: 0;
              display: none;
          }
      }
      .cat-box{
          margin: 0;
          padding: 0;
          margin-right: 10px;
          min-width: 120px;
          min-height: 70px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          box-shadow:0px 0px 5px rgba(100, 100, 100, 0.8);  
          cursor: pointer;
          border-radius: 5px;
          /*transition: all 0.2s;*/
      }
      .cat-box:hover{
          box-shadow:0px 0px 10px rgba(100, 100, 100, 0.8);  
      }
      .cat-box img{
          margin: 0;
          padding: 0;
          width: 100%;
          height: 70px;
          border-radius: 5px;
      }

   /*category end*/
   
   /*products start*/
      .prd-filter-hide{
          display: none;
      }
      .prd-filter-show{
        animation-name: show_prd;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        opacity:0%;
      }
      @keyframes show_prd {
        0%   {opacity:0%; bottom:-100%;}
        100% {opacity:100%; bottom:0%;}
      }


      .itm-flex-container{
         width: 100%;
         display: flex;
         /*flex-wrap: wrap;*/
         flex-direction: row;
         align-items: flex-start;
         justify-content: center;
         padding: 0px 0px 0px 0px;
         height: auto;
         overflow-y: hidden;
         overflow-x: hidden;          
         transition: all 1s;
         min-height: 70vh;
      }
      .itm-flex-column{
         width: 50%;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
         display: none;
      }
      /*itm loading container*/
         .itm-control-container{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 17px;
            margin-bottom: 20px;
         }
         @media only screen and (max-width: 600px) {
            .itm-control-container{
               font-size: 16px;
               margin-bottom: 20px;
            }
         }
      /*itm loading container*/
      .itm-container{
         margin: 10px 0px 10px 0px;
         padding: 0;
         width: 100%;
         height: auto;
         min-height: auto;
         display: flex;
         flex-direction: column;
         align-items: center;
         box-shadow: 2px 4px 10px rgba(100, 100, 100, 0.5);
         overflow: hidden;
         background-color: #fff;
         border-radius: 10px;
      }
         /*.itm-container{
            margin: 0px 15px 25px 15px;
            padding: 0;
            width: 27%;
            height: auto;
            min-height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow:2px 4px 10px rgba(100, 100, 100, 0.5);  
            overflow: hidden;
            background-color: #fff;
            border-radius: 10px;
         }*/
      .itm-container:hover{
          box-shadow:2px 4px 12px rgba(100, 100, 100, 0.7);  
      }
      @media only screen and (max-width: 600px) {
         .itm-container{
            width: 100%;
            height: auto;
            min-height: auto;
            margin: 10px 0px 10px 0px;
            border-radius: 10px;
         }
            /*.itm-container{
               width: 43.5%;
               height: auto;
               min-height: auto;
               margin: 0px 8px 12px 8px;
               border-radius: 10px;
            }*/
         .itm-flex-container{
            padding: 8px 0px 0px 0px;
            height: auto;
         }
      }
      .itm-container .img-container{
          margin: 0;
          padding: 0;
          width: 100%;
          height: auto;
          overflow: hidden;
          cursor: pointer;
          border-bottom: 2px solid rgba(0,0,0, 0.5);
      }
      .itm-container .img-container .img-main{
          margin: 0;
          padding: 0;
          width: 100%;
          height: 120px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          z-index: -1;
      }
      .itm-container .img-container .img-main a{
          margin: 0;
          padding: 0;
          width: 90%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
      }
      .itm-container .img-container .img-main a img{
          margin: 0;
          padding: 0;
          width: 100%;
          height: auto;
          /*transition: transform 1s;*/
      }
      .itm-container .img-container .img-main a img:hover{
          transform: scale(1.1);
      }
      .itm-container .img-container .img-gallery{
          margin: 0;
          padding: 0;
          width: 100%;
          height: 27px;
          background-color: rgba(0, 0, 0, 0.3);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
      }
      .itm-container .img-container .img-gallery .gallery{
          width: auto;
          height: 100%;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
      }
      .itm-container .img-container .img-gallery .gallery a img{
          margin-right: 5px;
          width: 25px;
          height: 25px;
          border-radius: 50%;
          border: 1px solid #fff;
      }
      .itm-container .img-container .img-gallery .gallery a img:hover{
          border: 3px solid #fff;
      }
      @media only screen and (max-width: 600px) {
         .itm-container .img-container{
            margin: 0;
            padding: 0;
            width: 100%;
            height: auto;
            overflow: hidden;
            cursor: pointer;
         }
         /*.itm-container .img-container{
            height: 65%;
         }*/

         .itm-container .img-container .img-gallery .gallery a img{
            width: 20px;
            height: 20px;
         }
         .itm-container .img-container .img-gallery .gallery a img:hover{
            border: 2px solid #fff;
         }
      }

      .itm-container .info-container{
          margin: 0;
          padding: 0;
          width: 100%;
          height: auto;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      .itm-container .info-container .details{
          width: 100%;
          height: 100%;
          /*background-color: green;*/
          /*transition: height 1s;*/
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      .itm-container .info-container .action{
          width: 100%;
          height: 0%;
          background-color: white;
          /*transition: height 1s;*/
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      /*.itm-container .info-container:hover .details{
          height: 0%;
      }
      .itm-container .info-container:hover .action{
          height: 100%;
      }*/
      .itm-container .info-container .details .itm-det-imc{
         margin: 0;
         padding: 0;
         color: #fff;
         font-size: 0.9rem;
         background: gray;
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .itm-container .info-container .details .itm-det-name{
          margin-top: 2px;
          padding: 0;
          color: rgba(0, 0, 0, 1);
          font-size: 16px;
          text-align: center;
      }
      .itm-container .info-container .details .itm-det-small-summary{
          margin-top: 1px;
          padding: 0;
          color: rgba(0, 0, 0, 0.7);
          font-size: 14px;
          text-align: center;
      }
      .itm-container .info-container .details .itm-det-price-container{
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
         width: 100%;
         border: 1px solid gray;
         border-width: 0px 0px 0px 0px;
      }
      .itm-container .info-container .details .itm-det-price-container .itm-det-price-txt{
         margin-left: -5px;
         margin-right: 3px;
         font-size: 1rem;
         font-weight: bold;
      }
      .itm-container .info-container .details .itm-det-price-container .itm-det-price{
          margin-top: 1px;
          padding: 0px;
      }
      .itm-container .info-container .details .itm-det-price-container .itm-det-price span:nth-child(1){
          margin-top: 0px;
          padding: 5px;
          color: black;
          font-size: 1rem;
          font-weight: 600; 
      }
      /*
      .itm-container .info-container .details .itm-det-price-container .itm-det-price span:nth-child(1){
          margin-top: 0px;
          padding: 0;
          color: red;
          font-size: 0.8rem;
          text-decoration-line: line-through;           
          font-weight: 600; 
      }
      .itm-container .info-container .details .itm-det-price-container .itm-det-price span:nth-child(3){
          margin-top: 0px;
          padding: 0;
          color: black;
          font-size: 1rem;
          font-weight: 600; 
      }
      */
      .itm-container .info-container .details .itm-det-imc-profit{
         width: 100%;
         height: auto;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         background-color: gray;
         color: #00e80f;
         font-size: 17px;
         font-weight: bold;
         padding: 0px;
      }
      /*animation: glow 1s ease-in-out infinite alternate;
      @-webkit-keyframes glow { 
         0% {
             text-shadow: 0 0 5px rgba(61, 255, 87,0.7), 0 0 5px rgba(61, 255, 87,0.7), 0 0 10px rgba(31, 124, 255,0.5), 0 0 20px rgba(31, 124, 255,0.5), 0 0 30px rgba(31, 124, 255,0.5), 0 0 40px rgba(31, 124, 255,0.5), 0 0 50px rgba(31, 124, 255,0.5);
         }
         100% {
             text-shadow: 0 0 10px rgba(61, 255, 87,0.7), 0 0 10px rgba(101, 164, 252,0.5), 0 0 20px rgba(101, 164, 252,0.5), 0 0 30px rgba(101, 164, 252,0.5), 0 0 40px rgba(101, 164, 252,0.5), 0 0 50px rgba(101, 164, 252,0.5), 0 0 60px rgba(101, 164, 252,0.5);
         }
      }*/
      @media only screen and (max-width: 600px) {
         /*.itm-container .info-container:hover .details{
             height: 100%;
         }
         .itm-container .info-container:hover .action{
             height: 0%;
         }*/
         .itm-container .info-container{
            height: auto;
         }
         .itm-container .info-container .details .itm-det-imc{
            font-size: 0.7rem;
         }
         .itm-container .info-container .details .itm-det-name{
            margin-top: -1px;
            font-size: 14px;
            
         }
         .itm-container .info-container .details .itm-det-small-summary{
            font-size: 12px;
         }
         .itm-container .info-container .details .itm-det-price-container{
            padding: 0px 0px 0px 0px;
         }
         .itm-container .info-container .details .itm-det-price-container .itm-det-price-txt{
            margin-left: -5px;
            margin-right: 3px;
            font-size: 17px;
            font-weight: bold;
         }
         .itm-container .info-container .details .itm-det-price-container .itm-det-price{
            margin-top: 0px;
            padding: 0;
         }
         .itm-container .info-container .details .itm-det-price-container .itm-det-price span:nth-child(1){
            font-size: 1.1rem;
         }
         /*
         .itm-container .info-container .details .itm-det-price-container .itm-det-price span:nth-child(1){
            font-size: 0.7rem;
         }
         .itm-container .info-container .details .itm-det-price-container .itm-det-price span:nth-child(3){
            font-size: 0.9rem;
         }
         */
         .itm-container .info-container .details .itm-det-imc-profit{
            font-size: 17px;
         }
      }

      .itm-container .info-container .action .itm-act-name{
          margin-top: 0px;
          padding: 0;
          color: rgba(0, 0, 0, 1);
          font-size: 1.2rem;
      }
      .itm-container .info-container .action .itm-act-btn{
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
      }
      .itm-container .info-container .action .itm-act-btn form:nth-child(1){
          margin-right: 5px;
      }
      .itm-container .info-container .action .itm-act-btn form button{
          margin-top: 5px;
          padding: 10px 5px;
          width:100%;
      }
      .itm-container .info-container .action button{
          margin-top: 5px;
          padding: 10px 5px;
      }
      @media only screen and (max-width: 600px) {
          .itm-container .info-container .action .itm-act-name{
              font-size: 0.8rem;
          }
          .itm-container .info-container .action .itm-act-btn form:nth-child(1){
              margin-right: 3px;
          }
          .itm-container .info-container .action .itm-act-btn form button{
              margin-top: 1px;
              padding: 3px 2px;
              font-size: 0.65rem;
          }
          .itm-container .info-container .action button{
              margin-top: 1px;
              padding: 3px 2px;
              font-size: 0.65rem;
          }
      }

   /*products end*/
/*Shop Page End*/

/*Checkout Start*/
   .if-not-session-container{
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }
   .if-not-session-container label{
      margin-top: -200px;
      font-size: 20px;
   }
   .card-container{
      padding-bottom: 40px;
      margin-top: 40px;
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }
   .card-container .card{
      margin-top: 10px;
      padding-bottom: 10px;
      width: 90%;
      height: auto;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0px 4px 5px 0 rgba(0,0,0,0.4);
      display: flex;
      flex-direction: column;
      align-items: center;
      /*transition: height 2s;*/
   }
   .card-container .card .card-no{
      margin-top: 5px;
      margin-left: 5px;
      width: 27px;
      height: 27px;
      border-radius: 50%;
      align-self: flex-start;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      background-color: #880406;
      font-size: 22px;
      font-weight: bold;
   }
   .card-container .card .card-topic{
      margin-top: -15px;
      margin-bottom: 10px;
      font-family: 'Fira Sans Condensed', sans-serif;
      font-size: 18px;
      text-decoration: underline;
      font-weight: bold;
      color: #880406;
   }
   /*card 1 Order Summery*/
      .card-container .card .inner{
         width: 60%;
         height: auto;
         display: flex;
         flex-direction: column;
         align-items: center;
         /*background-color: rgba(0, 0, 0, 0.5);*/
      }

      .card-container .card .inner .items{
         margin-top: 5px;
         width: 90%;
         height:250px;
         overflow-y: auto;
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .card-container .card .inner .items .itm{
         margin-top: 10px;
         margin-bottom: 10px;
         padding: 5px;
         width: 95%;
         min-height: 75px;
         /*
         max-height: 85px;*/
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
         border-radius: 10px;
         box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
         overflow: hidden;
      }
      .card-container .card .inner .items .itm:hover{
         box-shadow: 0px 3px 10px 0 rgba(0,0,0,0.5);
      }
      .card-container .card .inner .items .itm .prd-img{
         width: 40%;
         height: 95%;
         border: 1px solid #fff;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         background-color: rgba(0, 0, 0, 0);
      }
      .card-container .card .inner .items .itm .prd-img img{
         width: 100%;
         height: auto;
      }
      .card-container .card .inner .items .itm .prd-det{
         padding-left: 20px;
         width: 50%;
         height: auto;
         border: 1px solid #fff;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         color: rgba(50, 50, 50, 0.8)
         background-color: rgba(0, 0, 0, 0.2);
      }
      .card-container .card .inner .items .itm .prd-det .itm-name{
         font-size: 16px;
         font-weight: bold;
      }
      .card-container .card .inner .items .itm .prd-det .itm-imc{
         font-size: 14px;
      }
      .card-container .card .inner .items .itm .prd-det .itm-qty{
         font-size: 16px;
      }
      .card-container .card .inner .items .itm .prd-det .itm-price{
         font-size: 16px;
      }
      .card-container .card .inner .items .itm .prd-delete{
         width: 10%;
         height: 95%;
         border: 1px solid #fff;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         background-color: rgba(0, 0, 0, 0);
      }
      .card-container .card .inner .items .itm .prd-delete i{
         color: red;
         font-size: 20px;
         cursor: pointer;
      }
      .card-container .card .inner .items .itm .prd-delete i:hover{
         color: red;
         font-size: 23px;
      }
      .card-container .card .inner .items .itm .prd-delete i:hover{
         color: red;
         font-size: 23px;
      }
      .card-container .card .inner .prd-delete-all{
         margin-top: 0px;
         width: auto;
         height: 40px;
         overflow: hidden;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         /*background-color: rgba(0, 0, 0, 0.5);*/
      }
      .card-container .card .inner .prd-delete-all i{
         font-size: 22px;
         color: red;
         cursor: pointer;
      }
      .card-container .card .inner .prd-delete-all i:hover{
         font-size: 25px;
      }
      .card-container .card .inner .prd-delete-all .txt{
         font-size: 13px;
         color: gray;
      }
      .card-container .card .inner .cart-total-container{
         margin-top: 5px;
         margin-bottom: 5px;
         padding: 7px;
         box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
         border-radius: 10px;
         width: 75%;
         height: auto;
         border: 1px solid #fff;
         display: flex;
         flex-direction: column;
         align-items: center;
         color: #000;
         font-size: 16px;
         font-weight: bold;
      }
      .card-container .card .inner .cart-total-container .row{
         margin-top: 2px;
         margin-bottom: 2px;
         width: 100%;
         height: auto;
         border: 1px solid #fff;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
      }
      .card-container .card .inner .cart-total-container .row .left{
         width: 50%;
         height: auto;
         border: 1px solid #fff;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
      }
      .card-container .card .inner .cart-total-container .row .right{
         width: 50%;
         height: auto;
         border: 1px solid #fff;
         display: flex;
         flex-direction: column;
         align-items: flex-end;
         justify-content: center;
      }
      @media only screen and (max-width: 600px) {
         .card-container .card .inner .cart-total-container{
            width: 90%;
         }
         .card-container .card .inner{
            width: 95%;
         }
         .card-container .card .inner .items{
            height: 150px;
         }
      }

   /*card 1*/

   /*card 2 Delivery Meth*/
      .card-container .card .meth-selector{
         width: 220px;
         height: 50px;
         border-radius: 30px;
         background-color: #17c6aa;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         box-shadow: 0px 3px 2px 0 rgba(0,0,0,0.4);
      }
      .card-container .card .meth-selector .type{
         margin-left: 10px;
         margin-right: 10px;
         width: 100px;
         height: 30px;
         background-color: #17c6aa;
         border-radius: 20px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         font-weight: bold;
         cursor: pointer;
      }
      .card-container .card .meth-selector .type:hover{
         box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
      }
      .card-container .card .meth-selector .type.select{
         background-color: #fff;
      }
      .card-container .card .meth-pickup{
         margin-top: 5px;
         width: 95%;
         height: auto;
         display: flex;
         flex-direction: column;
         align-items: center;
         /*transition: all 0.5s;*/
         transform: scaleX(0);
      }
      .card-container .card .meth-pickup.show{
         transform: scaleX(1);
      }
      .card-container .card .meth-pickup .store-select{
         margin-top: 10px;
         font-size: 18px;
         font-weight: bold;
         margin-bottom: 5px;
      }
      .card-container .card .meth-pickup .store-select select{
         font-size: 15px;
      }

      .card-container .card .meth-pickup .showroom{
         transform: scaleY(0);
         padding: 5px;
         border-radius: 10px;
         box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
         margin: 0px 0px 10px 0px;
         display: flex;
         flex-direction: column;
         align-items: center;
      }
      .card-container .card .meth-pickup .showroom.show{
         transform: scaleY(1);
      }
      .card-container .card .meth-delivery{
         margin-top: 5px;
         width: 95%;
         height: auto;
         display: none;
         flex-direction: column;
         align-items: center;
         /*transition: all 0.5s;*/
         transform: scaleX(0);
         /*background-color: gray;*/
      }
      .card-container .card .meth-delivery.show{
         transform: scaleX(1);
      }
      .card-container .card .meth-delivery .deli-details{
         margin-top: 7px;
         width: 100%;
         height: auto;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .card-container .card .meth-delivery .deli-details ul{
         width: 200px;
         /*border: 1px solid red;*/
         background-color: #f1f1f1;
         list-style-type: none;
         padding: 10px 5px;      
         border-radius: 10px;
         box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
      }
      .card-container .card .meth-delivery .ship-address{
         margin-top: 10px;
         width: 60%;
         height: auto;
         padding: 10px;
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
         box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
      }
      .card-container .card .meth-delivery .ship-address .address-select{
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         font-size: 17px;
         font-weight: bold;
      }
      .card-container .card .meth-delivery .ship-address .address-select select{
         width: 100px;
         font-size: 13px;
         font-weight: bold;
      }
      .card-container .card .meth-delivery .ship-address .user-names{
         width: 100%;
         height: auto;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
      }
      .card-container .card .meth-delivery .ship-address .user-names .name{
         margin-top: 10px;
         width: 50%;
         height: auto;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
      }
      .card-container .card .meth-delivery .ship-address .user-names .name input[type=text]{
         font-family: 'Open Sans', sans-serif;
         padding-left: 5px;
         font-size: 14px;
         font-weight: 300;
         width: 90%;
         box-sizing: border-box;
         border: none;
         border-bottom: 2px solid red;         
      }
      .card-container .card .meth-delivery .ship-address .user-names .name input[type=text]:focus{
         outline: none !important;
         border-bottom: 2px solid red;
      }

      .card-container .card .meth-delivery .ship-address .address{
         width: 100%;
         height: auto;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
      }
      .card-container .card .meth-delivery .ship-address .address  input[type=text]{
         font-family: 'Open Sans', sans-serif;
         padding-left: 5px;
         font-size: 14px;
         font-weight: 300;
         width: 70%;
         box-sizing: border-box;
         border: none;
         border-bottom: 2px solid red;         
      }
      .card-container .card .meth-delivery .ship-address .address  input[type=text]:focus{
         outline: none !important;
         border-bottom: 2px solid red;
      }
      @media only screen and (max-width: 600px) {
         .card-container .card .meth-delivery .ship-address{
            width: 90%;
         }
         .card-container .card .meth-delivery .ship-address .address  input[type=text]{
            width: 100%;
         }
      }

   /*card 2 Delivery Meth*/
   
   /*card 3*/
      /*Old*/
         /*
         .paymeth-slct-container{
            margin: 0;
            padding: 5px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
         .paymeth-slct{
            margin: 10px;
            width: 40%;
            height: 50px;
            cursor: pointer;
            border-radius: 5px;
            box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            font-size: 1.4rem;
            transition: transform 0.5s;
         }
         @media only screen and (max-width: 600px) {
            .paymeth-slct{
               width: 60%;
               font-size: 1.2rem;
            }
         }
         .paymeth-slct p{
            margin-left: 0;
            font-weight: 800;
            color: #000;
            text-align: center;
            width: 100%;
         }
         .paymeth-slct .slct-icon{
            right: 0;
            height: 100%;
            width: 50px;
            display: flex;
            border: 2px solid #000 ;
            border-width: 0px 0px 0px 2px;
            border-radius: 0px 5px 5px 0px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #000;
            transition: transform 0.5s;
         }
         .paymeth-clicked{
            transform: scale(1.1);
         }
         .paymeth-clicked .slct-icon{
            background-color:#d34e4f;
            height: 100%;
            transform: scale(1.02);
            color: rgba(255, 255, 255, 1) ;
            -moz-box-shadow:    inset 0 0 10px rgba(0, 0, 0, 0.2);
            -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
            box-shadow:         inset 0 0 10px rgba(0, 0, 0, 0.2);
         }

         .paymeth-imc{
            margin-top: 1px;
            margin-bottom: 15px;
            padding-top: 20px;
            padding-bottom: 20px;
            width: 40%;
            cursor: pointer;
            border-radius: 10px;
            box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transform: scale(1.1);
            background-color: white;
         }
         @media only screen and (max-width: 600px) {
            .paymeth-imc{
               width: 60%;
            }
         }   
         .paymeth-imc .det-row{
            margin: 0;
            padding: 0;
            width: 80%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            font-size: 0.9rem;
         }
         .paymeth-imc .det-row:nth-child(3){
            border-top: 1px solid grey;
            border-bottom-width:1px;
            border-bottom-style:double;
         }
         .paymeth-imc .det-row span:nth-child(1){
            width: 50%;
         }
         .paymeth-imc .det-row span:nth-child(2){
            width: 50%;
            text-align: right;
         }
         .placeorder-btn{
            font-size: 35px;
         }
         */
      /*Old*/
      .paymeth-slct-container{
         margin: 0;
         padding: 5px;
         width: 400px;
         height: auto;
         display: flex;
         flex-wrap: wrap;
         align-items: center;
         justify-content: center;
      }
      .paymeth-slct{
         margin: 10px;
         width: 160px;
         height: 160px;
         /*border: 2px solid #17c6aa;*/
         cursor: pointer;
         border-radius: 5px;
         box-shadow:0px 0px 5px rgba(0, 0, 0, 0.5);
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         font-size: 1.0rem;
         /*transition: transform 0.5s;*/
      }
      @media only screen and (max-width: 600px) {
         .paymeth-slct{
            width: 100px;
            height: 100px;
            font-size: 0.8rem;
         }
         .paymeth-slct-container{
            width: 250px;
            height: auto;
         }
      }
      .paymeth-slct p{
         margin-left: 0;
         font-weight: 800;
         color: #000;
         /*color: #17c6aa;*/
         text-align: center;
         width: 100%;
      }
      .paymeth-slct .slct-icon{
         right: 0;
         height: 100%;
         width: 100%;
         display: flex;
         border-radius:5px 5px 0px 0px;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         color: #000;
         /*transition: all 0.5s;*/
         font-size: 60px;
      }
      .paymeth-clicked{
         transform: scale(1.0);
      }
      .paymeth-clicked .slct-icon{
         background-color:#d34e4f;
         transform: scale(1.0);
         color: rgba(255, 255, 255, 1) ;
         -moz-box-shadow:    inset 0 0 10px rgba(0, 0, 0, 0.2);
         -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
         box-shadow:         inset 0 0 10px rgba(0, 0, 0, 0.2);
      }


      .placeorder-btn{
         font-size: 35px;
      }

   /*card 3*/

   /*order confirmation*/
      .overfllow-container{
         margin-top: -1700px; 
         width: 100%; 
         height:220vh; 
         align-self: flex-start; 
         background-color: rgba(0, 0, 0, 0); 
         z-index: 20; 
         display: none; 
         flex-direction:column; 
         align-items:center; 
         justify-content: center;
         /*transition: all 0.5s;*/
         /*transform: scale(0);*/
      }
      .overfllow-container.show{
         /*transform: scale(1);*/
         background-color: rgba(0, 0, 0, 0.6); 
      }
      @media only screen and (max-width: 600px) {
         .overfllow-container{
            margin-top: -1440px;
            height:220vh; 
         }
      }
      /*Order Confirm*/
         .overfllow-container .confirm-container{
            position: fixed; 
            top: 105px; 
            width:auto; 
            height:auto; 
            padding: 30px;
            background-color: #fff;
            border-radius: 10px;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /*transition: all 0.5s;*/
         }
         .overfllow-container .confirm-container .inner{
            width:300px; 
            height:auto; 
            border: 1px solid #ff1e22;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-bottom: 10px;
         }
         .overfllow-container .confirm-container .inner .close{
            margin-top: -30px;
            margin-right: -25px;
            align-self: flex-end;
            font-size: 18px;
            color: red;
            cursor: pointer;
         }
         .overfllow-container .confirm-container .inner .topic{
            margin-top: -3px;
            padding: 0px 20px 0px 20px;
            font-family: 'Fira Sans Condensed', sans-serif;
            font-size: 18px;
            font-weight: bold;
            color: #880406;
            background-color: #fff;
         }
         .overfllow-container .confirm-container .inner .details{
            width: 95%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
         .overfllow-container .confirm-container .inner .details .cart-total-container{
            margin-top: 5px;
            margin-bottom: 5px;
            padding: 7px;
            box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
            border-radius: 10px;
            width: 80%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #000;
            font-size: 16px;
            font-weight: bold;
         }
         .overfllow-container .confirm-container .inner .details .cart-total-container .row{
            margin-top: 2px;
            margin-bottom: 2px;
            width: 100%;
            height: auto;
            border: 1px solid #fff;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
         }
         .overfllow-container .confirm-container .inner .details .cart-total-container .row .left{
            width: 50%;
            height: auto;
            border: 1px solid #fff;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
         }
         .overfllow-container .confirm-container .inner .details .cart-total-container .row .right{
            width: 50%;
            height: auto;
            border: 1px solid #fff;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
         }
         .overfllow-container .confirm-container .inner .details .deli-meth-container{
            margin-top: 5px;
            margin-bottom: 5px;
            padding: 7px;
            box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
            border-radius: 10px;
            width: 80%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
         .overfllow-container .confirm-container .inner .details .deli-meth-container .if-pick-container{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
         .overfllow-container .confirm-container .inner .details .deli-meth-container .if-pick-container .if-pick-topic{
            font-size: 18px;
            text-align: center;  
            text-decoration: underline;
         }
         .overfllow-container .confirm-container .inner .details .deli-meth-container .if-pick-container .pick-from{
            font-size: 16px;
         }
         .overfllow-container .confirm-container .inner .details .deli-meth-container .if-deli-container{
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
         .overfllow-container .confirm-container .inner .details .deli-meth-container .if-deli-container .if-deli-topic{
            font-size: 18px;
            text-align: center;  
            text-decoration: underline;
         }
         .overfllow-container .confirm-container .inner .details .deli-meth-container .if-deli-container .deli-address{
            font-size: 16px;
         }
         .overfllow-container .confirm-container .inner .details .pay-meth-container{
            margin-top: 5px;
            margin-bottom: 5px;
            padding: 7px;
            box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
            border-radius: 10px;
            width: 80%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
         .overfllow-container .confirm-container .inner .details .pay-meth-container .pay-meth-topic{
            font-size: 18px;
            text-align: center;  
            text-decoration: underline;
         }
         .overfllow-container .confirm-container .inner .details .pay-meth-container .pay-meth-type{
            font-size: 16px;
            text-align: center;
         }
         .paymeth-imc{
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: white;
         }
         @media only screen and (max-width: 600px) {
            .paymeth-imc{
               width: 100%;
            }
         }   
         .paymeth-imc .det-row{
            margin: 0;
            padding: 0;
            width: 80%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            font-size: 0.9rem;
         }
         .paymeth-imc .det-row:nth-child(3){
            border-top: 1px solid grey;
            border-bottom-width:1px;
            border-bottom-style:double;
         }
         .paymeth-imc .det-row span:nth-child(1){
            width: 70%;
         }
         .paymeth-imc .det-row span:nth-child(2){
            width: 30%;
            text-align: right;
         }         
         .po-btn{
            font-size: 33px;
         }

         @media only screen and (max-width: 600px) {
            .overfllow-container .confirm-container{
               top: 80px;
               width: auto;
               height: auto;
            }
            .overfllow-container .confirm-container .inner{
               width:250px; 
               height:auto; 
            }
            .overfllow-container .confirm-container .inner .close{
               margin-top: -20px;
               margin-right: -15px;
            }
            .overfllow-container .confirm-container .inner .topic{
               margin-top: -9px;
               font-size: 16px;
            }
            .overfllow-container .confirm-container .inner .details .deli-meth-container .if-pick-container .pick-from{
               font-size: 15px;
            }
            .po-btn{
               font-size: 23px;
            }
         }
      /*Order Confirm*/

   /*order confirmation*/
/*Checkout End*/

/*Payment Start*/
   .form-payment{
      margin-top: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.4);
      padding: 20px;
   }
   .form-payment .pay-icon{
      display: flex;
      flex-direction: row;
      align-items: center;
   }
   .form-payment .pay-icon span i{
      font-size: 61px;
      margin-left: 5px;
      color: #04a2b4;
      cursor: pointer;
   }
   .form-payment .pay-icon span i:hover{
      color: #000;
   }
/*Payment End*/

</style>