*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'MyriadPro-Regular' ,"Lato", 'AvenirNextLTPro-Regular', Arial ,'Helvetica Neue', 'MyriadPro', 'HelveticaNeue';
}
body{
  touch-action: pan-x pan-y;
  overflow-x: clip;
}
@media (min-width: 766px) {
.mdd-100{
  height: 100%;
}
.mdd-95{
  height: 95%;
}
.mdd-85{
  height: 85%;
}
.mdd-80{
  height: 80%;
}
.mdd-75{
  height: 75%;
}
.mdd-70{
  height: 70%;
}
.mdd-65{
  height: 65%;
}
.mdd-60{
  height: 60%;
}
.mdd-55{
  height: 55%;
}
.mdd-40{
  height: 40%;
}

}

@media (max-width: 766px) {
  .mdm-100{
    height: 100%;
  }
  .mdm-100-calc35{
    height: calc(100% - 35px);
  }
  .mdm-95{
    height: 95%;
  }
  .mdm-85{
    height: 85%;
  }
  .mdm-80{
    height: 80%;
  }
  .mdm-75{
    height: 75%;
  }
  .mdm-70{
    height: 70%;
  }
  .mdm-65{
    height: 65%;
  }
  .mdm-60{
    height: 60%;
  }
  .mdm-55{
    height: 55%;
  }
  .mdm-40{
    height: 40%;
  }

}

@media (min-width: 766px) {
.am-bg-shadow-full{
  background-color: #0000006e;
  z-index:2032;
  display: none;
  width: 100%;
  height: 1000%;
 position: fixed;
}
}

@media (max-width: 766px) {
.am-bg-shadow-full{
  background-color: #0000007f;
  z-index: 2032;
  width: 100%;
  height: 1000%;
 display: none;
 position: fixed;
}
}





.clickbtnactive{
  -ms-transition-duration: 0.2s;
  -ms-transform: scale(0.90);
  transition-duration: 0.2s;
  transform:scale(0.90);
}

@media (min-width: 766px) {
  .deskheight-90{
    height:90% !important;
 }
  .deskheight-80{
    height: 80% !important;
    }
    .deskheight-70{
      height: 70% !important;
     }
     .deskheight-60{
      height: 60% !important;
     }
 .deskheight-50{
  height: 50% !important;
 }


}
@media (max-width: 766px) {
  .mobheight-90{
    height: 90% !important;
    }
    .mobheight-80{
      height: 80% !important;
      }
  .mobheight-70{
     height: 70% !important;
     }
    .mobheight-60{
     height: 60% !important;
    }
    .mobheight-50{
      height: 50% !important;
     }
}



.lockscroll{
  touch-action: none;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  overflow: hidden;

}
.lockscroll::-webkit-scrollbar{
  display: none;
}


@media (min-width: 766px) {
  .am-bg-shadow{
    background-color: #0000006e;
    z-index:1027;
    display: none;
    width: 100%;
    height: 1000%;
   position: fixed;
  }

  .am-bg-shadow.show{
    background-color: #0000006e;

    z-index: 102;
    /*transition: opacity 0.5s;
    */
    display: block;
    width: 100%;
    height: 100%;
   position: fixed;
  }


  .iops-moresignup-shadow{
    background-color: #00000036;
    z-index:2028;
    display: none;
    width: 100%;
    height: 1000%;
   position: fixed;
  }

  .iops-moresignup-shadow.show{


    /*transition: opacity 0.5s;
    */
    display: block;
    width: 100%;
    height: 100%;
   position: fixed;
  }


}




@media (max-width: 766px) {
  .iops-moresignup-shadow{
    background-color:  #00000036;
    z-index: 5029;
    width: 100%;
    height: 1000%;
   display: none;
   position: fixed;
  }
  .iops-moresignup-shadow.show{
   display: block;
  }
}








.am-slide-container{
	width: 100%;
	overflow: hidden;
}






@media (min-width: 766px) {

.iops-mini-itemsqty{
  position: absolute;
  top: 20px;
  font-size: 14pt;
  color: #000;
  left: 0;
}





  .iops-modal-v3 {
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: #f8f8f8;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-modal-v3.bottom {
    z-index: 1029;
    position: fixed;
     bottom: -100%; 
    }
  .iops-modal-v3.bottom.move {
    bottom: 0; 
    overflow-y: auto;
  }



  .iops-modal-mini-v3 {
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: #f8f8f8;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-modal-mini-v3.bottom {
    z-index: 1028;
    position: fixed;
     bottom: -100%; 
    }
  .iops-modal-mini-v3.bottom.move {
    bottom: 0; 
    overflow-y: auto;
    padding-bottom: 100px;
  }







  .iops-body-modal-mini-1{
    position: relative;
    max-width: 500px;
    padding-top: 20px;
    width: 100%;
    display: block;
    margin: 0 auto;
  }

.iops-body-modal-mini-contain{
  max-height: 80%;
  height: 100%;
  overflow-y: auto;
  padding-top: 60px;
}

.iops-body-modal-mini-contain-line{
  width: 100%;
  border-bottom:1px solid #a8a8a8;
display: block;
}

.iops-body-modal-mini-set{
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #a8a8a8;
}

.iops-body-modal-mini-set-num{
  min-width: 35px;
  max-width: 35px;
  width: 35px;
  height: 40px;
  background-color: #fff;
  border: 1px solid #c3c3c3;
  border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
  text-align: center;
  font-size: 12pt;
  color: #000;
}
.iops-body-modal-mini-set-prod{
  display: grid;
  width: 100%;
  height: 40px;
  padding-left: 15px;
}
.mini-set-prod-1{
  display: block;
  color: #000;
  font-size: 11.5pt;
}
.mini-set-prod-2{
  display: block;
  color: #525252;
  font-size: 10pt;
  margin-top: auto;
}
.mini-set-prod-2 span{
vertical-align: top;
font-size: 8pt;
}
.iops-body-modal-mini-set-price{
  font-size: #000;
  font-size: 11.5pt;
}
.iops-body-modal-mini-set-price span{
  vertical-align: top;
font-size: 8pt;
}





.iops-body-modal-v3{
  position: relative;
  max-width: 500px;
  padding-top: 50px;
  width: 100%;
  display: block;
  margin: 0 auto;
  overflow-y: auto;
}
.iops-body-modal-v3-close{
  width: 50px;
  height: 50px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 50px;
  cursor: pointer;
}
.iops-body-modal-v3-close img{
  width: 20px;
}

.iops-body-modal-mini-1-close{
  width: 50px;
  height: 50px;
  text-align: right;
  position: absolute;
  right: 0;
  top: 20px;
  cursor: pointer;
  z-index: 1025;
}


.iops-body-modal-mini-1-close img{
  width: 20px;
}



.iops-order-logo-v3{
max-width: 120px;
width: 100%;
display: block;
text-align: center;
margin-left:auto;
margin-right:auto;
margin-bottom: 25px;
}
.iops-order-logo-v3 img{
  width: 100%;
}
.iops-order-logo-v3-prod{
  width: 100%;
  display: block;
  text-align: center;
  color: #000;
  font-size: 20pt;
  margin-bottom: 50px;
}
.iops-order-logo-v3-setcontain{
  width: 100%;
  display: block;
}
.iops-order-logo-v3-set{
  border-bottom: 1px solid rgb(162, 162, 162);
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
}
  .iops-order-logo-v3-set-1{
    display: block;
    min-width: 38%;
    max-width: 38%;
    width: 38%;
  }
  
  .iops-order-logo-v3-set-1text-1{
    display: block;
    line-height: 1.5;
    font-size: 12pt;
    color: black;
  }
  .iops-order-logo-v3-set-1text-2{
    display: block;
    font-size: 12pt;
    color: rgb(84, 84, 84);
  }


  .iops-order-logo-v3-set-2{
    display: flex;
    align-items: center;
    width: 100%;
  }

  .iops-order-logo-v3-set-3{
    display: flex;
    align-items: center;
    min-width: 120px;
    max-width: 120px;
    width: 120px;
  }
  .iops-order-logo-v3-set-3-1text-1{
    color: #242424;
    font-size: 14pt;
  }
  .iops-order-logo-v3-set-3-1text-1.active{
    color: #0CA5F3;
  }


  .iops-order-logo-v3-add-contain{
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ff9300;
    border-radius: 12px;
    height: 40px;
    opacity: 0.5;
    pointer-events: none;
  }

  .iops-order-logo-v3-add-contain.active{
cursor: pointer;
opacity: 1;
pointer-events: all;
  }

  .iops-order-logo-v3-add-contain-1{
    font-size: 12pt;
    color: #fff;
  }
  .iops-order-logo-v3-add-contain-2{
    font-size: 12pt;
    color: #fff;
  }
  .iops-order-logo-v3-add-contain-3{
    text-align: right;
    min-width: 75px;
    width: 75px;
    max-width: 75px;
    font-size: 12pt;
    font-weight: bold;
    color: #fff;
  }

}
@media (max-width: 766px) {
  .iops-mini-itemsqty{
    position: absolute;
    top: 20px;
    font-size: 12pt;
    color: #000;
    left: 3%;
  }

  
  .iops-modal-v3 {
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: #f8f8f8;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-modal-v3.bottom {
    z-index: 1029;
    position: fixed;
     bottom: -100%; 
    }
  .iops-modal-v3.bottom.move {
    bottom: 0; 
    overflow-y: auto;
  }



  
  .iops-modal-mini-v3 {
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: #f8f8f8;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-modal-mini-v3.bottom {
    z-index: 1028;
    position: fixed;
     bottom: -100%; 
    }
  .iops-modal-mini-v3.bottom.move {
    bottom: 0; 
    overflow-y: auto;
    padding-bottom: 100px;
  }
  
  




  .iops-body-modal-mini-1{
    position: relative;
    padding-top: 50px;
    width: 100%;
    display: block;
  }



  .iops-body-modal-mini-contain{
    max-height: 80%;
    height: 100%;
    padding-left: 15px;
    padding-right: 15px;
    overflow-y: auto;
    padding-top: 30px;
  }
  
  .iops-body-modal-mini-contain-line{
    width: 100%;
    border-bottom:1px solid #a8a8a8;
  display: block;
  }
  
  .iops-body-modal-mini-set{
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #a8a8a8;
  }
  
  .iops-body-modal-mini-set-num{
    min-width: 35px;
    max-width: 35px;
    width: 35px;
    height: 40px;
    background-color: #fff;
    border: 1px solid #c3c3c3;
    border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
    text-align: center;
    font-size: 12pt;
    color: #000;
  }
  .iops-body-modal-mini-set-prod{
    display: grid;
    width: 100%;
    height: 40px;
    padding-left: 15px;
  }
  .mini-set-prod-1{
    display: block;
    color: #000;
    font-size: 11.5pt;
  }
  .mini-set-prod-2{
    display: block;
    color: #525252;
    font-size: 10pt;
    margin-top: auto;
  }
  .mini-set-prod-2 span{
  vertical-align: top;
  font-size: 8pt;
  }
  .iops-body-modal-mini-set-price{
    font-size: #000;
    font-size: 11.5pt;
  }
  .iops-body-modal-mini-set-price span{
    vertical-align: top;
  font-size: 8pt;
  }
  











  .iops-body-modal-v3{
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
    width: 100%;
    display: block;
  }

  .iops-body-modal-v3-close{
    width: 50px;
    height: 50px;
    text-align: center;
    position: absolute;
    right: 3%;
    top: 30px;
    cursor: pointer;
  }
  .iops-body-modal-v3-close img{
    width: 20px;
  }

  
  .iops-body-modal-mini-1-close{
    width: 70px;
    height: 50px;
    background-color: #fff;
    top: 0;

    text-align: center;
    position: absolute;
   right: 0;
   padding-top: 15px;
   padding-bottom: 15px;
    cursor: pointer;
    z-index: 1025;
    /*! margin-left: auto; */
    /*! padding-left: 25px; */
  }
  .iops-body-modal-mini-1-close img{
    width: 20px;
  }
 
  
  
  .iops-order-logo-v3{
  max-width: 120px;
  width: 100%;
  display: block;
  text-align: center;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 25px;
  }
  .iops-order-logo-v3 img{
    width: 100%;
  }
  .iops-order-logo-v3-prod{
    width: 100%;
    display: block;
    text-align: center;
    color: #000;
    font-size: 20pt;
    margin-bottom: 50px;
  }
  .iops-order-logo-v3-setcontain{
    width: 100%;
    display: block;
    padding-left: 15px;
    padding-right: 15px;
  }
  .iops-order-logo-v3-set{
    border-bottom: 1px solid rgb(162, 162, 162);
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
  }
    .iops-order-logo-v3-set-1{
      display: block;
      min-width: 40%;
      max-width: 40%;
      width: 40%;
    }
    
    .iops-order-logo-v3-set-1text-1{
      display: block;
      line-height: 1.5;
      font-size: 12pt;
      color: black;
    }
    .iops-order-logo-v3-set-1text-2{
      display: block;
      font-size: 12pt;
      color: rgb(84, 84, 84);
    }
  
  
    .iops-order-logo-v3-set-2{
      display: flex;
      align-items: center;
      width: 100%;
    }
  
    .iops-order-logo-v3-set-3{
      display: flex;
      align-items: center;
      min-width: 20%;
      max-width: 20%;
      width: 20%;
    }
    .iops-order-logo-v3-set-3-1text-1{
      color: #242424;
      font-size: 14pt;
    }
    .iops-order-logo-v3-set-3-1text-1.active{
      color: #0CA5F3;

    }


    .iops-order-logo-v3-add-contain{
      padding-left: 15px;
      padding-right: 15px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #ff9300;
      border-radius: 10px;
      height: 40px;
      opacity: 0.5;
      pointer-events: none;
    }
    .iops-order-logo-v3-add-contain.active{
      cursor: pointer;
      opacity: 1;
      pointer-events: all;
        }
    .iops-order-logo-v3-add-contain-1{
      font-size: 12pt;
      color: #fff;
    }
    .iops-order-logo-v3-add-contain-2{
      font-size: 12pt;
      color: #fff;
    }
    .iops-order-logo-v3-add-contain-3{
      text-align: right;
      min-width: 75px;
      width: 75px;
      max-width: 75px;
      font-size: 12pt;
      font-weight: bold;
      color: #fff;
    }

}











@media (min-width: 766px) {


  
  .code8-modal-v2 {
    overflow: hidden;
    height: 100%;
    max-width: 1200px;
    width: 100%;
    background: #f8f8f8;
    border-top-left-radius: 10.5px;
    border-top-right-radius: 10.5px;
    border-bottom-left-radius: 10.5px;
    border-bottom-right-radius: 10.5px;
    position: absolute;
    font: 13px/100px sans-serif;
    color: #000;
    text-align: center;
    z-index: -9999;
  }
  
  
  
  .code8-modal-v2.bottom {
    z-index: -9999;
    position: fixed;

    /*
    transition: opacity 0.5s;
    opacity: 0;
    */
display: none;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    }
  .code8-modal-v2.bottom.move {
    z-index: 1024;

/*
    transition: opacity 0.5s;
    opacity: 1;
    */
    display: block;

    top: 50%; left: 50%; transform: translate(-50%, -50%);
  }

}


@media (min-width: 766px) {




  .code8-modal-v3 {
    overflow: hidden;
    width: 100%;
    background: #fff;
  border-radius: 23px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
    display: none;
    max-width: 600px;
  }
  
  .code8-modal-v3.bottom {
    z-index: 1028;
    position: fixed;
    }
  .code8-modal-v3.bottom.move {
    display: block;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  

}
@media (max-width: 766px) {


  
  .code8-modal-v3 {
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: #f8f8f8;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .code8-modal-v3.bottom {
    z-index: 1028;
    position: fixed;
     bottom: -100%; 
    }
  .code8-modal-v3.bottom.move {
    bottom: 0; 
  }
  

}




@media (min-width: 766px) {

  .code8-modal-v4 {
    overflow: hidden;
    width: 100%;
    background: #fff;
  border-radius: 23px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
    display: none;
    max-width: 600px;
  }
  
  .code8-modal-v4.bottom {
    z-index: 1030;
    position: fixed;
    }
  .code8-modal-v4.bottom.move {
    display: block;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  

}
@media (max-width: 766px) {

  .code8-modal-v4 {
    overflow: hidden;
    width: 100%;
    background: #f8f8f8;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .code8-modal-v4.bottom {
    z-index: 1030;
    position: fixed;
     bottom: -100%; 
    }
  .code8-modal-v4.bottom.move {
    bottom: 0; 
  }
  

}







@media (min-width: 766px) {

  .iops-modal-v4 {
    overflow: hidden;
    width: 100%;
    background: #fff;

    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-modal-v4.bottom {
    z-index: 1030;
    position: fixed;
     bottom: -100%; 
    }
  .iops-modal-v4.bottom.move {
    bottom: 0; 
  }








  .iops-modal-scrll-v1 {
    overflow: hidden;
    width: 100%;
    background: #fff;

    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-modal-scrll-v1.bottom {
    z-index: 2033;
    overflow-y: auto;
    position: fixed;
     bottom: -100%; 
    }
  .iops-modal-scrll-v1.bottom.move {
    bottom: 0; 
  }





  .iops-modal-scrll-v1-chat {
    overflow: hidden;
    width: 100%;
    background: #fff;

    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-modal-scrll-v1-chat.bottom {
    z-index: 2033;
    overflow-y: auto;
    position: fixed;
     bottom: -100%; 
    }
  .iops-modal-scrll-v1-chat.bottom.move {
    bottom: 0; 
  }








  .iops-section-slide-manual-modal{
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 100%;
  }



  .iops-manual-container{
    width: 100%;
    position: absolute;
    background-color: #fff;
    color: #000;
    height: 100%;
  }



  

  .iops-page-1{
display: none;
  }
  .iops-page-1.sliding.move {
    display: block;
  }
  .iops-page-2{
   display: none;
  }
  .iops-page-2.sliding.move {
   display: block;
  }
  
  .iops-page-2.pushleft{
  display: none;
  }
  
  .iops-page-3{
 display: none;
  }
  .iops-page-3.sliding.move {
   display: block;
  }
  

}
@media (max-width: 766px) {

  .iops-modal-v4 {
    overflow: hidden;
    width: 100%;
    background: #f8f8f8;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-modal-v4.bottom {
    z-index: 1030;
    position: fixed;
     bottom: -100%; 
    }
  .iops-modal-v4.bottom.move {
    bottom: 0; 
  }




  /*
  .iops-modal-scrll-v1::-webkit-scrollbar-track {
    background-color: #e4e4e4;
    border-radius: 100px;
  }
       .iops-modal-scrll-v1::-webkit-scrollbar {
      width: 16px;
    }
  .iops-modal-scrll-v1::-webkit-scrollbar-thumb {
    background-color: #d4aa70;
    border-radius: 100px;
  }
    */
 
  
  .iops-modal-scrll-v1 {
    overflow: hidden;
    width: 100%;
    background: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-modal-scrll-v1.bottom {
    overflow-y: auto;
    z-index: 2033;
    position: fixed;
     bottom: -100%; 
    }
  .iops-modal-scrll-v1.bottom.move {
    bottom: 0; 
  }





  .iops-modal-scrll-v1-chat {
    overflow: hidden;
    width: 100%;
    background: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-modal-scrll-v1-chat.bottom {
    overflow-y: auto;
    z-index: 2033;
    position: fixed;
     bottom: -100%; 
    }
  .iops-modal-scrll-v1-chat.bottom.move {
    bottom: 0; 
  }
  

  .iops-manual-container{
    width: 100%;
    position: fixed;
    color: #000;
    transition: all 0.5s ease;
    height: 100%;
    background-color: #fff;

    border-top-left-radius: 23px;
  border-top-right-radius: 23px;
  }

  .iops-section-slide-manual-modal{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 100%;
  }



  .iops-page-1{
    position: fixed;
     left: -100%; 
  }
  .iops-page-1.sliding.move {
    left: 0; 
  }
  .iops-page-2{
    background-color: #fff;
    position: fixed;
     right: -100%; 
  }
  .iops-page-2.sliding.move {
    right: 0; 
  }
  
  .iops-page-2.pushleft{
    position: fixed;
     margin-right: 100% !important; 
  }
  
  .iops-page-3{
    position: fixed;
     right: -100%; 
  }
  .iops-page-3.sliding.move {
    right: 0; 
  }

}









@media (min-width: 766px) {


  .code8-submini-v2 {
    overflow: hidden;
    width: 100%;
    background: #fff;
  border-radius: 23px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
    display: none;
    max-width: 600px;
  }
  
  .code8-submini-v2.bottom {
    z-index: 2025;
    position: fixed;
    }
  .code8-submini-v2.bottom.move {
      display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
}
@media (max-width: 766px) {
  .code8-submini-v2 {
    overflow: hidden;
    width: 100%;
    background: #f8f8f8;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .code8-submini-v2.bottom {
    z-index: 5027;
    position: fixed;
     bottom: -100%; 
    }
  .code8-submini-v2.bottom.move {
    bottom: 0; 
  }
  
}








@media (min-width: 766px) {


  .iops-submini-v2 {
    height: 1px;
    overflow: hidden;
    width: 100%;
    background: #fff;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-submini-v2.bottom {
    z-index: 2027;
    position: fixed;
     bottom: -100%; 
    }
  .iops-submini-v2.bottom.move {
    bottom: 0; 
    height: auto
  }
  
 .modal-body-prod{
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  display: block;
  width: 100%;
  background-color: #fff;
overflow-y: auto;
position: relative;
 }

 .iopspin-frame-containerdelivery{
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
  height: 80%;
  display: block;
  position: relative;
}

 .iopspin-frame-container{
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
  height: 80%;
  display: block;
  position: relative;
}
.iopspin-frame{
  height: 100%;
}
.iops-res-height-1{
  height: 80% !important;
}
}
@media (max-width: 766px) {
  .iops-submini-v2 {
    overflow: hidden;
    height: 1px;
    width: 100%;
    background: #f8f8f8;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-submini-v2.bottom {
    z-index: 5027;
    position: fixed;
     bottom: -100%; 
    }
  .iops-submini-v2.bottom.move {
    bottom: 0; 
    height: auto;
  }
  
 .modal-body-prod{
  height: 100%;
  display: block;
  width: 100%;
  background-color: #fff;
overflow-y: auto;
position: relative;
 }

 .iopspin-frame-containerdelivery{
  width: 100%;
  height: 83%;
  display: block;
  position: relative;
}


 .iopspin-frame-container{
  width: 100%;
  height: 80%;
  display: block;
  position: relative;
}
.iopspin-frame{
  height: 100%;
}


.iops-res-height-1{
 height: 90% !important;
}

}





@media (min-width: 766px) {

  .code8-submini-v3 {
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: transparent;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .code8-submini-v3.bottom {
    z-index: 1028;
    position: fixed;
     bottom: -100%; 
    }
  .code8-submini-v3.bottom.move {
    bottom: 0; 
  }
}
@media (max-width: 766px) {

  .code8-submini-v3 {
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: transparent;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .code8-submini-v3.bottom {
    z-index: 1028;
    position: fixed;
     bottom: -100%; 
    }
  .code8-submini-v3.bottom.move {
    bottom: 0; 
  }
  

}



@media (min-width: 766px) {

  .submini-modal-body-prod-notes-old{

    position: absolute;
    height: auto;
    
      border: 1px solid rgba(58,50,41,0.20);
      border-top-left-radius: 23px;
      border-top-right-radius: 23px;
    
      transition: all 0.5s ease;
      display: block;
      width: 100%;
      background-color:rgba(240, 240, 240, 0.91);
      z-index: -9999;
  }
  .submini-modal-body-prod-notes-old.bottom {
    z-index: 1028;
    position: fixed;
     bottom: -100%; 
    }
  .submini-modal-body-prod-notes-old.move {
    bottom: 0 !important; 
  }
}


@media (max-width: 766px) {

  .submini-modal-body-prod-notes-old{

    position: absolute;
    height: auto;
    
      border: 1px solid rgba(58,50,41,0.20);
      border-top-left-radius: 23px;
      border-top-right-radius: 23px;
    
      transition: all 0.5s ease;
      display: block;
      width: 100%;
      background-color:rgba(240, 240, 240, 0.91);
      z-index: -9999;
  }
  .submini-modal-body-prod-notes-old.bottom {
    z-index: 1028;
    opacity: 0;
    pointer-events: none;
    position: fixed;
     bottom: -100%; 
    }
  .submini-modal-body-prod-notes-old.move {
    bottom: 0 !important; 
    pointer-events:all;
    opacity: 1;
  }
}









@media (min-width: 766px) {

  .iopssubmini-modal-body-prod-notes{

    position: absolute;
    height: 1px;
    overflow: hidden;
    
      border: 1px solid rgba(58,50,41,0.20);
      border-top-left-radius: 23px;
      border-top-right-radius: 23px;
    
      transition: all 0.5s ease;
      display: block;
      width: 100%;
      max-width: 770px;

      background-color:rgba(240, 240, 240, 0.91);
      z-index: -9999;
      left: 50%;
      transform: translate(-50%, 0);
  }
  .iopssubmini-modal-body-prod-notes.bottom {
    z-index: 1028;
    position: fixed;
     bottom: -100%; 
    }
  .iopssubmini-modal-body-prod-notes.move {
    bottom: 0 !important; 
    height: auto;
    overflow: auto;
  }










  
  .iopssubmini-modal-body-prod-dscnt{
    position: fixed;
    height: auto;
    
      border: 1px solid rgba(58,50,41,0.20);
      border-top-left-radius: 23px;
      border-top-right-radius: 23px;
    
      transition: all 0.5s ease;
      display: block;
      width: 100%;
      max-width: 600px;
      background-color:rgba(240, 240, 240, 0.91);
      z-index: -9999;
  }
  .iopssubmini-modal-body-prod-dscnt.bottom {
    z-index: 1028;
    opacity: 0;
    pointer-events: none;
    position: fixed;
     bottom: -100%; 
    }
  .iopssubmini-modal-body-prod-dscnt.move {
    position: fixed;
    
    bottom: 0 !important; 
    pointer-events:all;
    opacity: 1;
  }


  
}


@media (max-width: 766px) {

  .iopssubmini-modal-body-prod-notes{

    position: absolute;
    height: auto;
    
      border: 1px solid rgba(58,50,41,0.20);
      border-top-left-radius: 23px;
      border-top-right-radius: 23px;
    
      transition: all 0.5s ease;
      display: block;
      width: 100%;
      background-color:rgba(240, 240, 240, 0.91);
      z-index: -9999;
  }
  .iopssubmini-modal-body-prod-notes.bottom {
    z-index: 1028;
    opacity: 0;
    pointer-events: none;
    position: fixed;
     bottom: -100%; 
    }
  .iopssubmini-modal-body-prod-notes.move {
    bottom: 0 !important; 
    pointer-events:all;
    opacity: 1;
  }






  
  .iopssubmini-modal-body-prod-dscnt{

    position: fixed;
    height: auto;
    
      border: 1px solid rgba(58,50,41,0.20);
      border-top-left-radius: 23px;
      border-top-right-radius: 23px;
    
      transition: all 0.5s ease;
      display: block;
      width: 100%;
      background-color:rgba(240, 240, 240, 0.91);
      z-index: -9999;
  }
  .iopssubmini-modal-body-prod-dscnt.bottom {
    z-index: 1028;
    opacity: 0;
    pointer-events: none;
    position: fixed;
     bottom: -100%; 
    }
  .iopssubmini-modal-body-prod-dscnt.move {
    bottom: 0 !important; 
    pointer-events:all;
    opacity: 1;
  }
}







@media (min-width: 766px) {

  .submini-modal-body-prod-pckup{

    position: absolute;
    height: auto;
    
      border: 1px solid rgba(58,50,41,0.20);
      border-top-left-radius: 23px;
      border-top-right-radius: 23px;
    
      transition: all 0.5s ease;
      display: block;
      width: 100%;
      background-color:rgba(240, 240, 240, 0.91);
      z-index: -9999;
  }
  .submini-modal-body-prod-pckup.bottom {
    z-index: 1028;
    position: fixed;
     bottom: -100%; 
    }
  .submini-modal-body-prod-pckup.move {
    bottom: 0 !important; 
  }
}


@media (max-width: 766px) {

  .submini-modal-body-prod-pckup-old{

    position: absolute;
    height: auto;
    
      border: 1px solid rgba(58,50,41,0.20);
      border-top-left-radius: 23px;
      border-top-right-radius: 23px;
    
      transition: all 0.5s ease;
      display: block;
      width: 100%;
      background-color:rgba(240, 240, 240, 0.91);
      z-index: -9999;
  }
  .submini-modal-body-prod-pckup-old.bottom {
    z-index: 1028;
    opacity: 0;
    pointer-events: none;
    position: fixed;
     bottom: -100%; 
    }
  .submini-modal-body-prod-pckup-old.move {
    bottom: 0 !important; 
    pointer-events:all;
    opacity: 1;
  }
}









@media (min-width: 766px) {

  .iopssubmini-modal-body-prod-pckup{

    position: absolute;
    height: auto;
    
      border: 1px solid rgba(58,50,41,0.20);
      border-top-left-radius: 23px;
      border-top-right-radius: 23px;
    
      transition: all 0.5s ease;
      display: block;
      width: 100%;
      max-width: 770px;
      background-color:rgba(240, 240, 240, 0.91);
      z-index: -9999;
      left: 50%;
      transform: translate(-50%, 0);
  }
  .iopssubmini-modal-body-prod-pckup.bottom {
    z-index: 1028;
    position: absolute;
     bottom: -100%; 
    }
  .iopssubmini-modal-body-prod-pckup.move {
    bottom: 0 !important; 
    position: fixed
  }
}


@media (max-width: 766px) {

  .iopssubmini-modal-body-prod-pckup{

    position: absolute;
    height: auto;
    
      border: 1px solid rgba(58,50,41,0.20);
      border-top-left-radius: 23px;
      border-top-right-radius: 23px;
    
      transition: all 0.5s ease;
      display: block;
      width: 100%;
      background-color:rgba(240, 240, 240, 0.91);
      z-index: -9999;
  }
  .iopssubmini-modal-body-prod-pckup.bottom {
    z-index: 1028;
    opacity: 0;
    pointer-events: none;
    position: absolute;
     bottom: -100%; 
    }
  .iopssubmini-modal-body-prod-pckup.move {
    bottom: 0 !important; 
    position: fixed;
    pointer-events:all;
    opacity: 1;
  }
}







.modal-height-90{
  height: 90% !important;
}
.modal-height-85{
  height: 85% !important;
}
.modal-height-80{
  height: 80% !important;
}
.modal-height-70{
  height: 60% !important;
}
.modal-height-60{
  height: 60% !important;
}
.modal-height-50{
  height: 50% !important;
}





.close-container-flex{
  align-items: center;
  width: 100%;
}
.close-btn-img{
  width: 20px;
  cursor: pointer;
}
.customer-up-modal {
  background: #f8f8f8;
  border-top-left-radius: 10.5px;
  border-top-right-radius: 10.5px;
  position: fixed;
  height: 0;
  bottom: 0;
  transition: all 0.5s ease-in-out 0s;
  z-index: 1027;
  opacity: 0;
  margin-bottom: -110%;
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.customer-up-modal.open {
  height: 90%;
  margin-bottom: 0;
  opacity: 1;
 }


 .modal-body-1{
  height: 100%;
  display: block;
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 23px;
  border-top-right-radius: 23px;
 }

 .modal-body-overflow-1{
  width: 100%;
  overflow-y: auto;
  height: 100%;
 }



 .modal-body-prod{
  height: 100%;
  display: block;
  width: 100%;
  background-color: #fff;
overflow-y: auto;
position: relative;
 }

 .iops-ddr-20{
  height: 20px;
  width: 100%;
  display: block;
 }










 
@media (min-width: 766px) {

  .iops-modal-sva1 {
    overflow: hidden;
    width: 100%;
    background: #fff;

    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-modal-sva1.bottom {
    z-index: 1030;
    position: fixed;
     bottom: -100%; 
    }
  .iops-modal-sva1.bottom.move {
    bottom: 0; 
  }

}
@media (max-width: 766px) {

  .iops-modal-sva1 {
    overflow: hidden;
    width: 100%;
    background: #f8f8f8;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-modal-sva1.bottom {
    z-index: 1030;
    position: fixed;
     bottom: -100%; 
    }
  .iops-modal-sva1.bottom.move {
    bottom: 0; 
  }
 

}





@media (min-width: 767px) {

  .iops-more-v2 {
    height: 1px;
    overflow: hidden;
    width: 100%;
    background: #fff;

    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;
  }
  
  .iops-more-v2.bottom {
    z-index: 2027;
    position: fixed;
     bottom: -100%; 
    }
  .iops-more-v2.bottom.move {
    bottom: 0; 
    height: auto
  }


  
  .iops-morereginput-v2 {
    height: 1px;
    overflow: hidden;
    width: 100%;
    background: #fff;

    transition: all 0.5s ease;
    position: absolute;
    color: #000;
    z-index: -9999;


    max-width: 500px;
    left: 50%;
    transform: translate(-50%, 0);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  
  .iops-morereginput-v2.bottom {
    z-index: 3000;
    position: fixed;
     bottom: -100%; 
    }
  .iops-morereginput-v2.bottom.move {
    bottom: 0; 
    height: auto
  }
  
}

  @media (max-width: 766px) {
    .iops-more-v2 {
      overflow: hidden;
      height: 1px;
      width: 100%;
      background: #f8f8f8;
      border-top-left-radius: 23px;
      border-top-right-radius: 23px;
      transition: all 0.5s ease;
      position: absolute;
      color: #000;
      z-index: -9999;
    }
    
    .iops-more-v2.bottom {
      z-index: 5027;
      position: fixed;
       bottom: -100%; 
      }
    .iops-more-v2.bottom.move {
      bottom: 0; 
      height: auto;
    }


    .iops-morereginput-v2 {
      overflow: hidden;
      height: 1px;
      width: 100%;
      background: #f8f8f8;
      border-top-left-radius: 23px;
      border-top-right-radius: 23px;
      transition: all 0.5s ease;
      position: absolute;
      color: #000;
      z-index: -9999;

      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
    }
    
    .iops-morereginput-v2.bottom {
      z-index: 5030;
      position: fixed;
       bottom: -100%; 
      }
    .iops-morereginput-v2.bottom.move {
      bottom: 0; 
      height: auto;
    }
}


@media (min-width: 766px) {
.iops-morereginput-body{
  width: 100%;
  display: block;
  padding-left: 15px;
  padding-right: 15px;
}
.iops-morereginput-close{
  padding-left: 10px;
  padding-top: 15px;
  padding-bottom: 10px;
  margin-left: auto;
  display: table;
  text-align: center;
  cursor: pointer;
}
.iops-morereginput-close-img{
  width: 25px;
}


.iops-morereginputlinks-container{
  width: 100%;
  display: block;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}
.iops-morereginputlinks-div{
display: block;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid rgba(213,214,220,0.5);
cursor: pointer;
}

.iops-morereginputlinks-div.nobrbottom{
  border-bottom:none;
}

.iops-morereginputlinks-text{
  color: #000000;
  text-decoration: none;
  font-family: 'Lato_24.0.0_google',Arial;
  font-size: 11.0pt;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: none;
}
.iops-morereginputlinks-text.blue{
color: #007AFF;
}




}
@media (max-width: 766px) {
  .iops-morereginput-body{
    width: 100%;
    display: block;
    padding-left: 15px;
    padding-right: 15px;
  }
  .iops-morereginput-close{
    padding-left: 10px;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-left: auto;
    display: table;
    text-align: center;
    cursor: pointer;
  }
  .iops-morereginput-close-img{
    width: 25px;
  }
  
  
  .iops-morereginputlinks-container{
    width: 100%;
    display: block;
    padding-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .iops-morereginputlinks-div{
  display: block;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(213,214,220,0.5);
  cursor: pointer;
  }
  
  .iops-morereginputlinks-div.nobrbottom{
    border-bottom:none;
  }
  
  .iops-morereginputlinks-text{
    color: #000000;
    text-decoration: none;
    font-family: 'Lato_24.0.0_google',Arial;
    font-size: 11.0pt;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: none;
  }
  .iops-morereginputlinks-text.blue{
  color: #007AFF;
  }

}