@font-face{
  font-family: latoregular;
  font-display:swap;
  src: url("../font/Lato-Regular.ttf") format("truetype");
}
@font-face{
  font-family: Gotham-Book;
  font-display:swap;
  src: url("../font/Gotham-Book.ttf") format("truetype");
}
@font-face{
  font-family: Gotham-Bold;
  font-display:swap;
  src: url("../font/Gotham-Bold.ttf") format("truetype");
}
@font-face{
  font-family: Gotham-Ultra;
  font-display:swap;
  src: url("../font/Gotham-Ultra.ttf") format("truetype");
}
@font-face{
  font-family: DINCon;
  font-display:swap;
  src: url("../font/DINCondensed-Bold.ttf") format("truetype");
}
@font-face{
  font-family: Express;
  font-display:swap;
  src: url("../font/expressway rg.ttf") format("truetype");
}

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none!important;
  }
}

.text-bold{
  font-weight: 900;
}
.glyphicon-time{
  font-size: 1.8rem!important;
  position: relative;
  padding-right: 10rem!important;
}
.glyphicon-time:after{
  content: "Set-Waktu";
  font-weight: bold;
  text-decoration: underline;
  /*margin-left: 10px;*/
  position: absolute;
  top: -5%;
  right: 25%;
}
.glyphicon-calendar{
  font-size: 1.8rem!important;
  position: relative;
  padding-right: 12.5rem!important;
}
.glyphicon-calendar:after{
  content: "Set-Tanggal";
  font-weight: bold;
  text-decoration: underline;
  /*margin-left: 10px;*/
  position: absolute;
  top: -5%;
  right: 25%;
}

:root {
  --maincolor: rgba(251,254,239,1);
  --maincolor2: #e2e2d6;
  --maincolor3: #c14d03;
  --mainbtn_color: rgba(193,77,3,1);
}

.maincolor{
  background-color: var(--maincolor);
}
.maincolor2{
  background-color: var(--maincolor2);
}
.maincolor3{
  background-color: var(--maincolor3);
}
.errorcolor{
  background-color: #CD0C1E !important;
}
.main-fontcolor{
  color: var(--maincolor);
}
.main-fontcolor3{
  color: var(--maincolor3);
}

.bg-translucent{
  background-color: rgba(255,255,255,0.25) !important;
}

.no-gutters {
  margin-right: 0!important;
  margin-left: 0!important;
}
.no-gutters > .col, .no-gutters > [class*="col-"] {
  padding-right: 0!important;
  padding-left: 0!important;
}

.header-fontcolor{
  color: #00dce8!important;
}
.error-fontcolor{
  color: #CD0C1E !important;
}
.sub-fontcolor{
  color: #828282!important
}

.maingradient{
  background: #715427;
  background: -webkit-linear-gradient(215deg, rgb(73, 62, 44) 0%, var(--darkcolor) 100%);
  background: -moz-linear-gradient(215deg, rgb(73, 62, 44) 0%, var(--darkcolor) 100%);
  background: linear-gradient(215deg, rgb(73, 62, 44) 0%, var(--darkcolor) 100%);
}
.subgradient{
  background: #c14d03;
  background: -webkit-linear-gradient(15deg, #c14d03 0%, #4b3d2a 90%);
  background: -moz-linear-gradient(15deg, #c14d03 0%, #4b3d2a 90%);
  background: linear-gradient(15deg, #c14d03 0%, #4b3d2a 90%);
}

.tier-blue{
  background: #2E3192;
  background: -webkit-linear-gradient(90deg, #2E3192 0%, #00AEEF 90%);
  background: -moz-linear-gradient(90deg, #2E3192 0%, #00AEEF 90%);
  background: linear-gradient(90deg, #2E3192 0%, #00AEEF 90%);
}

.tier-silver{
  background: #707172;
  background: -webkit-linear-gradient(90deg, #707172 0%, #D2D3D4 90%);
  background: -moz-linear-gradient(90deg, #707172 0%, #D2D3D4 90%);
  background: linear-gradient(90deg, #707172 0%, #D2D3D4 90%);
}

.tier-gold{
  background: #BA8621;
  background: -webkit-linear-gradient(90deg, #BA8621 0%, #ECC448 90%);
  background: -moz-linear-gradient(90deg, #BA8621 0%, #ECC448 90%);
  background: linear-gradient(90deg, #BA8621 0%, #ECC448 90%);
}

.tier-platinum{
  background: #2D2D2D;
  background: -webkit-linear-gradient(90deg, #2D2D2D 0%, #A0A1A2 90%);
  background: -moz-linear-gradient(90deg, #2D2D2D 0%, #A0A1A2 90%);
  background: linear-gradient(90deg, #2D2D2D 0%, #A0A1A2 90%);
}

dt{
  font-family: Gotham-Bold;
  font-weight: 400;
}
dd{
  margin-left: 2ch;
}

body.v_body{
  font-family: Express;
  background: #fff;
  margin-top: 9.5rem
}

body.v_body2{
  font-family: latoregular;
  min-height: 100vh;
  background-color: #e6e7e8;
  color: #6F1C10;
}

body.op_body{
  margin-top: 7rem;
}

.mainstream-font{
  font-family: Arial;
}
.font2{
  font-family: DINCon;
}
.font3{
  font-family: Gotham-Book!important;
}
.font4{
  font-family: Gotham-Ultra!important;
}
.font5{
  font-family: Gotham-Bold!important;
}

input[type="text"],
select:focus,
textarea {
  font-size: 16px;
}

textarea{
  resize: vertical;
}

.empty-block{
    margin-top: 5rem;
}
.maincontent{
    margin-bottom: 4.5rem;
}
.shop-container{
  margin-bottom: 9rem;
  margin-top: 0;
  font-family: DINCon;
}
.checkout-container{
  padding-bottom: 2rem;
  padding-top: 4rem;
}
.op-container{
  padding-top: 2rem;
}
body.op_body .status-container{
  padding-top: 0;
}
@media (min-width: 576px) {
  .shop-container{
    margin-bottom: 9rem;
    margin-top: 20rem!important;
  }
  .op-container{
    padding-top: 4rem;
  }
  body.op_body .status-container{
    padding-top: 3rem;
  }
  .maincontent{
      margin-bottom: 11rem;
  }
}
/*=================Landing Page=================*/
.web-cont{
  background-image: url('../img/bg/resto_desktop.jpg');
  background-size: 100% 100%; 
}
.mobile-cont{
  background-image: url('../img/bg/resto_mobilev6.jpg');
  background-size: 100% 100%;
}
.visible-xs .click-here{
  width: 5.7em;
  height: 5.5em;
  line-height: 0.7;
}
.visible-md .click-here{
  width: 6.7em;
  height: 6.5em;
  line-height: 0.9;
}
.click-here{
  color: #fff;
  filter: drop-shadow(0 0 0.5rem #606060);
  text-align: center;
  border-radius: 50%;
  position: absolute;
  z-index: 9999;
}
.resto-md .click-here,.resto-xs .click-here{
    background-color: #55c5d1;
}
.shop-md .click-here,.shop-xs .click-here{
    background-color: #212070;
}
.resto-md .click-here,.resto-md .pulsating-circle{
  top: 40%;
  left: 48%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.shop-md .click-here,.shop-md .pulsating-circle{
  top: 40%;
  left: 31%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.resto-xs .click-here,.resto-xs .pulsating-circle{
  top: 43%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.shop-xs .click-here,.shop-xs .pulsating-circle{
  top: 52%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.pulsating-circle {
  position: absolute;
  z-index: 9999;
  filter: drop-shadow(0 0 0.75rem #00ffdb);
}
.visible-xs .pulsating-circle{
  width: 2.7em;
  height: 2.5em;
}
.visible-md .pulsating-circle{
  width: 3.5em;
  height: 3.3em;
}

.pulsating-circle:before {
  content: '';
  position: relative;
  display: block;
  width: 300%;
  height: 300%;
  box-sizing: border-box;
  margin-left: -100%;
  margin-top: -100%;
  border-radius: 50%;
  background-color: #01a4e9;
  animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
  

@keyframes pulse-ring {
  0% {
    transform: scale(.1);
  }
  80%, 100% {
    opacity: 0;
  }
}
footer.custom-1{
  position: absolute;
  width: 100%;
}
footer.custom-1.color-1{
  background-color: rgba(226,226,215,1);
}
footer.custom-1.color-2{
  background-color: var(--mainbtn_color);
}
footer .img-responsive{
    height: 55px;
}
@media(min-width: 576px){
    footer .img-responsive{
        height: 100px;
    }   
}
/*=================INDEX=================*/
.label-spacing{
  letter-spacing: .2ch;
}
/*=================SIGN UP=================*/
.datepicker{
  cursor:pointer!important;
}
/*=================CHECKOUT=================*/
.pp-container,.tax-container{
  font-size: 1.25rem;
}
.checkout-btncontainer{
  margin-bottom: 7rem;
}
/*=================CHECK ORDER=================*/
.checkorder-container{
  background-color: #f7f7f7;
  min-height: 100vh;
}
.itm-status-icon{
  color: #0C91CD!important;
}
.itm-status-icon::before{
  line-height: 0!important;
}
.affix {
  top: 0;
  width: 100%;
  z-index: 1059 !important;
}
/*=================Member Home=================*/
.member-container{
  transition: 0.25s all ease;
  padding: 0;
  background: linear-gradient(0deg, rgb(255 255 255) 0%, rgb(253 254 249) 15%, rgba(254,255,243,1) 100%);
}
#faq{
  width: 100%;
}
.data-area{
  min-height: 38vh;
}
.menu-container.gradient{
  background: rgb(250,1,139);
  background: -moz-linear-gradient(90deg, rgba(250,1,139,1) 0%, rgba(44,30,116,1) 15%, rgba(112,222,226,1) 100%);
  background: -webkit-linear-gradient(90deg, rgba(250,1,139,1) 0%, rgba(44,30,116,1) 15%, rgba(112,222,226,1) 100%);
  background: linear-gradient(90deg, rgba(250,1,139,1) 0%, rgba(44,30,116,1) 15%, rgba(112,222,226,1) 100%);
}
.pin-popout{
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0,0,0,0.9);
  z-index: 999999;
  transition: .3 all linear;
}
.pin-popout.show{
  display: block!important;
  transition: .3 all linear;
}
.pin-popout .content{
  margin-top: 7rem;
}
.member-container .nav-tabs  li.active  a,.member-container .nav-tabs li.active a:focus,.member-container .nav-tabs li.active a:hover{
  background-color: #0c91cd;
  color: #fff;
  border: 0;
  border-bottom: 1px solid transparent;
}
.member-container .nav-tabs li a{
  border-radius: 0 4px 0 0;
}
.menu.tab-content{
  min-height: 67vh;
  padding: 1.5rem;
}

.tier-container{
  border-radius: 15px;
  /*border-bottom-left-radius: 75px;*/
  
  padding: 0.5rem;
  background-color: #EEEEEE;
}

.coin-container{
  border-radius: 25px;
  /*border-bottom-left-radius: 75px;*/
  
  padding: 1.5rem 1rem;
  background-color: var(--mainbtn_color);
}
.coin-container img{
  height:40px;
}
.coin-container h2
.member-card{
  border-radius: 8px;
  padding: 2rem 3rem;
  background-color: #0c91cd;
  background-image: url("../img/bg/card-bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  width: 300px;
  height: 140px;
}
.member-card-logo{
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  -webkit-transform: translate(0,-50%);
}
.text-xs{
  font-size: 8px;
}
h2.text-xs{
  font-size: 15px;
}
.tab-container{
  overflow-x: auto;
}
.tab-container .nav-tabs{
  display: inline-flex;
  width: 100%;
  white-space: nowrap;
}
.member-content{
  margin-left: 6rem;
}
.transchistory-table tbody tr td{
  border-top: 2px solid #4f4f4f8a
}
.signout-mt{
  margin-top: 10rem;
}
.open-setting{
  position: absolute;
  margin-top: 7px;
  top: 0;
  right: 5%;
  transition: .15s all ease-out;
}
.open-setting:hover,.open-setting:focus{
  background-color: #0C719F !important;
  transition: .1s all linear;
}
@media (min-width: 576px){
  .menu.tab-content{
    padding: 3rem;
  }
  .text-xs{
    font-size: 14px;
  }
  h2.text-xs{
    font-size: 20px;
  }
  .coin-container{
    padding: 3rem 1.5rem;
  }
  .coin-container img{
    height:70px;
  }
}

.slide-container{
  overflow-x: auto!important;
  flex-wrap: nowrap!important;
  white-space: nowrap!important;
  justify-content: initial!important;
}

.slide-container::-webkit-scrollbar,.slide-container-md::-webkit-scrollbar {
  width: 1em;
  height: 0.5em;
}
 
.slide-container::-webkit-scrollbar-track,.slide-container-md::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
.slide-container::-webkit-scrollbar-thumb,.slide-container-md::-webkit-scrollbar-thumb {
  background-color: var(--maincolor);
  border-radius: 15px;
  min-width: 5%;
}

/*======================PRODUCT===================*/
.layout-1,.layout-1 .info-container,.layout-1 .layout-info{
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}
.layout-1{
  padding: 5px;
}
.layout-1 .info-container,.layout-1 .layout-info{
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}
.layout-1 .info-container{
  padding-top: 3px;
}
.layout-1 .layout-info{
  white-space: normal;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

.col-flex,
.col-flex-1,
.col-flex-10,
.col-flex-11,
.col-flex-12,
.col-flex-2,
.col-flex-3,
.col-flex-4,
.col-flex-5,
.col-flex-6,
.col-flex-7,
.col-flex-8,
.col-flex-9,
.col-flex-auto,
.col-flex-lg,
.col-flex-lg-1,
.col-flex-lg-10,
.col-flex-lg-11,
.col-flex-lg-12,
.col-flex-lg-2,
.col-flex-lg-3,
.col-flex-lg-4,
.col-flex-lg-5,
.col-flex-lg-6,
.col-flex-lg-7,
.col-flex-lg-8,
.col-flex-lg-9,
.col-flex-lg-auto,
.col-flex-md,
.col-flex-md-1,
.col-flex-md-10,
.col-flex-md-11,
.col-flex-md-12,
.col-flex-md-2,
.col-flex-md-3,
.col-flex-md-4,
.col-flex-md-5,
.col-flex-md-6,
.col-flex-md-7,
.col-flex-md-8,
.col-flex-md-9,
.col-flex-md-auto,
.col-flex-sm,
.col-flex-sm-1,
.col-flex-sm-10,
.col-flex-sm-11,
.col-flex-sm-12,
.col-flex-sm-2,
.col-flex-sm-3,
.col-flex-sm-4,
.col-flex-sm-5,
.col-flex-sm-6,
.col-flex-sm-7,
.col-flex-sm-8,
.col-flex-sm-9,
.col-flex-sm-auto,
.col-flex-xl,
.col-flex-xl-1,
.col-flex-xl-10,
.col-flex-xl-11,
.col-flex-xl-12,
.col-flex-xl-2,
.col-flex-xl-3,
.col-flex-xl-4,
.col-flex-xl-5,
.col-flex-xl-6,
.col-flex-xl-7,
.col-flex-xl-8,
.col-flex-xl-9,
.col-flex-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px
}
.col-flex-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%
}

.col-flex-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%
}

.col-flex-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%
}

.col-flex-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
}

.col-flex-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
}

.col-flex-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%
}

.col-flex-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
}

.col-flex-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%
}

.col-flex-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%
}

.col-flex-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%
}

.col-flex-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%
}

.col-flex-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%
}

.col-flex-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}

@media (min-width:576px) {
    .col-flex-sm {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-flex-sm-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%
    }

    .col-flex-sm-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-flex-sm-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-flex-sm-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-flex-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-flex-sm-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-flex-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-flex-sm-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-flex-sm-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-flex-sm-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-flex-sm-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-flex-sm-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-flex-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }
}

/*=================Side Navbar=================*/
.c-bodyoverlay{
  position:fixed;
  top: 0;
  right:0;
  height:100%;
  width:0;
  display: block;
  justify-content: center;
  align-items: center;
  opacity: 0;
  background-color: rgba(0,0,0,0.4);
  transition: 0.5s;
}
.c-bodyoverlay.open{
  opacity: 1;
  z-index: 9998;
  transition: 0.5s;
  width:100%;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: #0c91cd;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
}
.sidenav.open{
  width: 250px;
}
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .close-sidenavbtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
/*=================CUSTOM INPUT=================*/
input.custom-1{
  border-radius: 75px;
  border: 2px solid #ccc;
  padding: 2rem 0.5rem;
  letter-spacing: .1rem;
}
input.custom-1.transparent{
  background-color: transparent!important;
}

.input-model-2{
  background-color: rgba(128,128,128,0.1);
  padding: 20px;
  text-align: center;
  box-shadow: none!important;
  border: 0;
  border-radius: 0;
  border-bottom: 3px solid #0C91CD;
  color: #0C91CD;
}
.input-model-2:focus{
  color: #000;
  border-color: #000;
  transition: .2s all linear;
}
.input-model-2.error{
  border-color: #ed363a!important;
  transition: .2s all linear;
}
.input-model-2.white{
  background-color: rgba(255,255,255,0.8);
}
.input-model-2.white:focus{
  border-color: #fff;
}

.pin-input {
  display: block;
  margin: .3em auto;
  border: none;
  padding: 0;
  color: dodgerblue;
  /*width: calc(4*(1ch + .5*1ch));
  background: repeating-linear-gradient(90deg, #fff 0, #fff 1ch, transparent 0, transparent calc(1ch + (.5*1ch)))0 100%/ calc((4*(1ch + .5*1ch)) - (.5*1ch)) 2px no-repeat;
  font: 5ch droid sans mono, consolas, monospace;
  letter-spacing: calc(.5*1ch);*/
  width: 50%;
  border-bottom: 2px solid #ed363a;
  background-color: transparent;
  font: 2ch droid sans mono, consolas, monospace;
  letter-spacing: 1.3rem;
}
.pin-input:focus {
  outline: none;
  color: dodgerblue;
}
.pin-input.error{
  /*background: repeating-linear-gradient(90deg, #CD0C1E 0, #CD0C1E 1ch, transparent 0, transparent calc(1ch + (.5*1ch)))0 100%/ calc((4*(1ch + .5*1ch)) - (.5*1ch)) 2px no-repeat;*/
  border-bottom: 2px solid red;
}
.error-msg{
  font-size: 1.8rem;
  background-color: #fff;
}

/*=================PANE (NEW)L=================*/
.panel.custom-1{
  border: 0;
  padding: 2px 15px;
}
.panel.panel-img{
  overflow-x: hidden;
}
.panel.panel-img img{
  min-height: 100px;
}
.panel .panel-content{
  padding: 15px 12px;
}
.panel.panel-img .side-img{
  overflow: hidden;
}

.panel-group.custom-1 > .panel{
  background-color: var(--darkcolor) !important;
  border-top-right-radius: 15px !important;
  border: 0;
}
.panel-group.custom-1 > .panel > .panel-heading{
  background-color: var(--darkcolor) !important;
  color: #fff !important;
  border: 0 !important;
  border-top-right-radius: 15px !important;
}
.panel-group.custom-1 .panel-body-shadow{
  position: relative;
}
.panel-group.custom-1 .subheader{
  margin-left: -15px;
  margin-right: -15px;
  margin-top: -15px;
  padding: 1rem 1.5rem;
}
.panel-group.custom-1 .panel-body-shadow:before{
  content: "";
  height: 3px;
  display: block !important;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.09)
}
.panel-group.custom-1 .panel-body{
  min-height: 100px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.panel-group.custom-1 .panel-heading + .panel-collapse > .list-group, .panel-group.custom-1 .panel-heading + .panel-collapse > .panel-body{
  border-top: 0;
}
.panel-group [data-toggle="collapse"]{
  text-decoration: none !important;
  user-select: none;
}
[data-toggle="collapse"][aria-expanded="true"] .fa:before{   
  content: "\f106";
}
[data-toggle="collapse"][aria-expanded="false"] .fa:before {
  content: "\f107";
}


.flex-grow-0 {
  -ms-flex-positive: 0 !important;
  flex-grow: 0 !important;
}

.flex-grow-1 {
  -ms-flex-positive: 1 !important;
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  -ms-flex-negative: 0 !important;
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  -ms-flex-negative: 1 !important;
  flex-shrink: 1 !important;
}


/*=================Menu Panel=================*/
.first-panel{
  padding: 20px;
  box-shadow: 0 0.125rem 0.5rem rgb(12, 145, 205) !important;
  transition: 0.25s all ease;
}
.second-panel{
  padding: 20px;
  border-top: 2.5px solid #f9f9f9;
  border-left: 0;
  transition: 0.25s all ease;
}
.second-panel .sub-panel:nth-child(1){
  padding-bottom: 0;
}
.first-panel i{
  font-size: 3rem;
  margin-left: 1.5rem;
  color: #848e95c4;
}
.second-panel i{
  font-size: 3rem;
  margin-left: 2.5rem;
  /*color: #848e95c4;*/
}
@media (min-width: 576px) {
  .first-panel i{
    margin-left: 3rem;
  }
  .second-panel i{
    margin-left: 3rem;
  }
  .second-panel{
    border-top: 0;
    border-left: 2.5px solid #f9f9f9;
  }
}

/*=================Navbar=================*/
.navbar.custom-1{
  border-radius: 0;
}
.navbar-nav.custom-1{
  margin-top: 0;
  /*background-color: #eee;*/
  background-color: #f2f2f24d;
}
.logout{
  cursor: pointer;
  user-select: none;
}
.logout-right{
  float: right;
  font-size: 2rem
}
.member-navbar{
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}
@media(min-width: 576px){
    .navbar-nav.custom-1{
        margin-top: 2.5rem;
        background-color: transparent;
    }
    .member-navbar{
        -ms-flex-pack: normal !important;
        justify-content: normal !important;
    }
    .member-navbar li{
        margin-right:1.5rem;
    }
}
/*=================TICKETS=================*/
.promo-ticket{
  border: 2px solid black;
}
.ticket-img{
  position: absolute;
  display: block;
  top: -12%;
  left: -5%;
  width: 60px;
  height:60px;
  background-color: #fff;
  border: 2px solid black;
  box-shadow: 0.125 0.125rem 0.25rem rgba(0, 0, 0, 0.25) !important;
}
.ticket-title{
  padding-left: 5rem;
  padding-right: 3rem;
}
.ticket-description{
  padding-top: 1rem;
  padding-bottom: 2rem;
  padding-right: 3rem;
  padding-left: 3rem;
}
/*=================PROMO=================*/
.promo-panel{
  padding: 1rem!important;
}
.promo-btn{
  font-weight: bold;
  letter-spacing: .15rem;
}
@media (min-width: 576px) {
  .promo-panel{
    padding-left: 2rem!important;
    padding-right: 2rem!important;
    padding-top: 3rem!important;
    padding-bottom: 3rem!important;
  }
}
.promo-field{
  border-radius: 0px;
  border: none;
  border-bottom: 1px solid black;
  box-shadow: none;
}
.promo-field:focus{
  border-bottom: 2px solid #0C91CD!important;
  box-shadow: none;
}
.promo-field.error{
  border-bottom: 2px solid #CD0C1E !important;
}
.valid-promo{
  background-image: url("../img/bg/bg.jpg");
  background-position: center;
  border-bottom-right-radius: 10px!important;
  border-bottom-left-radius: 10px!important;
  border-top-right-radius: 0!important;
}
.promo-content{
 /* background-color: rgba(255,255,255,0.7);
  padding: 3rem;*/
  border-bottom: 2px dashed #0C91CD!important;
  border-top: 3px solid #0C91CD!important;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
@media (min-width: 576px) {
  .valid-promo-container{
    padding-left: 5rem!important;
    padding-right: 5rem!important;
  }
  .promo-content{
   /* background-color: rgba(255,255,255,0.7);
    padding: 3rem;*/
    border-right: 2px dashed #0C91CD!important;
    border-left: 3px solid #0C91CD!important;
    border-top-right-radius: 0!important;
    border-bottom-left-radius: 10px!important;
    border-top-left-radius: 10px!important;
    border-bottom: 0!important;
    border-top: 0!important;
  }
  .valid-promo{
    border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px!important;
  }
}
.promo-cancel{
  opacity: 1;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  position: absolute;
  top: 0;
  left: 1%;
  cursor: pointer;
}
.promo-name{
  font-weight: 600;
  font-size: 1.5rem;
}
.promo-desc{
  font-size: 1.25rem;
}
/*=================Custom Checkbox=================*/
.c-cbcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
 /* margin-bottom: 12px;*/
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: 400;
  line-height: 1.25;
  font-size: 1.5rem;
}

.c-cbcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.c-cbcontainer .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}

.c-cbcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

.c-cbcontainer input:checked ~ .checkmark {
  background-color: #0C91CD;
}

.c-cbcontainer .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.c-cbcontainer input:checked ~ .checkmark:after {
  display: block;
}

.c-cbcontainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*=================Custom Radio Button=================*/
.c-rcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: 400;
  line-height: 1.25;
  font-size: 1.5rem;
}
/* Hide the browser's default radio button */
.c-rcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
/* Create a custom radio button */
.c-rcontainer .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
}

.c-rcontainer:hover input ~ .checkmark {
  background-color: #ccc;
  transition: .25s background-color ease;
}
.c-rcontainer input:checked ~ .checkmark {
  background-color: #0C91CD;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.c-rcontainer .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.c-rcontainer input:checked ~ .checkmark:after {
  display: block;
}
/* Style the indicator (dot/circle) */
.c-rcontainer .checkmark:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

#set-category-list,#filter-modal .modal-body{
  text-transform: capitalize;
}

/*=================loader=================*/
.c-loader{
  position:fixed;
  top: 0;
  left:0;
  height:100%;
  width:100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}
.c-loader{
  background-color: rgba(255,255,255,0.7);
}
.c-loader.active{
  display: flex;
}
#loader-4 span{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #3498db;
  margin: 35px 5px;
  opacity: 0;
}

#loader-4 span:nth-child(1){
  animation: opacitychange 1s ease-in-out infinite;
}

#loader-4 span:nth-child(2){
  animation: opacitychange 1s ease-in-out 0.33s infinite;
}

#loader-4 span:nth-child(3){
  animation: opacitychange 1s ease-in-out 0.66s infinite;
}

@keyframes opacitychange{
  0%, 100%{
    opacity: 0;
  }

  60%{
    opacity: 1;
  }
}

/*=================search&filter=================*/
.search-product{
  /*width: 95%;*/
  border-radius: 0;
}
/*.product-filter .radio label{
  line-height: 1.5;
}*/
.floating-filter{
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translate(-50%,0);
  -moz-transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  border-radius: 10%;
  padding: .5rem 1rem;
  background-color: #fdfdfd;
  border: 3px solid rgba(142,142,142,0.08);
  cursor: pointer;
}
/*============Accordion============*/
.accordion{
    height: 60px;
    max-height: 60px;
    margin: 0 auto;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(225,225,225,1);
    overflow: hidden;
    transition: max-height 1.5s ease;
    margin-bottom: 20px;
}
.accordion .accordion_tab{
  padding: 20px;
  cursor: pointer;
  user-select: none;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  position: relative;
  color: #0C91CD;
}
.accordion .accordion_tab .accordion_arrow{
  float: right;
  transition: all 0.3s ease;
}
.accordion .accordion_tab.active .accordion_arrow{
  transform: rotate(180deg);
}
.accordion.active{
  height: auto;
  max-height: 2000px;
}
.accordion .accordion_content{
  padding: 20px;
  border-top: 1px solid #e9e9e9;
  font-size: 1.7rem;
}

.accordion .accordion_content .accordion_item{
  margin-bottom: 20px;
}
/*=================TABLE=================*/
.ordersummary .table-responsive{
  border: none!important;
}
.ordersummary .table td{
  border: none!important;
}
.tablestyle tr td{
  vertical-align: middle!important;
}
.tablestyle i{
  font-size: 1.7rem;
}

/*=================UTILITIES=================*/
.d-block {
  display: block !important;
}
.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}
.no-border{
  border:0!important;
}
.text-shadow-solid{
 text-shadow: 1px 1px 0.25px #000000ba;
}
.text-between-line{
  overflow: hidden;
  text-align: center;
}

.text-between-line:before,
.text-between-line:after{
  background-color: #fff;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: super;
  width: 10%;
}

.text-between-line:before {
  right: 0.5em;
  margin-left: -50%;
}
.text-between-line:after {
  left: 0.5em;
  margin-right: -50%;
}
.text-secondary{
    color:#6c757d !important;
}
.custom-padding-form{
  padding-left: 1rem;
  padding-right: 1rem;
}
@media(min-width: 576px){
  .custom-padding-form{
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
 /* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden;
  min-width: 280px; 
  margin-left: -140px; /* Divide value of min-width by 2 */
  background-color: rgba(255,255,255,0.9);
  color: #0C91CD;
  text-align: center;
  border: 1px solid #0C91CD;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 60px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.25s, fadeout 0.5s 1.5s;
  animation: fadein 0.25s, fadeout 0.5s 1.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 60px; opacity: 1;}
}
@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 60px; opacity: 1;}
}
@-webkit-keyframes fadeout {
  from {bottom: 60px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
} 

.paystatus-content{
  border-top-left-radius: 75px;
  padding: 5rem 5rem!important;
  flex-direction: column;
  flex-wrap: nowrap;
}
/*=================UTILITIES=================*/
.w-100{
  width: 100%;
}
.float-right{
  float: right;
}
.cursor-pointer{
  cursor: pointer;
  user-select: none;
}
.break-word{
  word-wrap: break-word;
}
.text-white{
  color: #fff!important;
}
.text-center{
  text-align: center;
}
.flex-column {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}
.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}
.justify-content-end {
  -ms-flex-pack: end !important;
  justify-content: end !important;
}
.justify-content-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}
.justify-content-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
}
.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}
.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}
.bg-white{
  background-color: #fff!important;
}
.bg-warning{
  background-color: #ffe24a!important;
}
.bg-alice{
  background-color: aliceblue;
}
.bg-transparent{
  background-color: transparent!important;
}
.text-error{
  color: red;
}
.text-skyblue{
  color: #0C91CD;
}
.text-dark-1{
  color: #27395ce6;
}
.border-skyblue{
  border: 2px solid #0C91CD;
  border-radius: 6px;
}
.text-success{
  color: #10d910;
}
.coin-fontcolor{
  color: #fdca00e6;
}
.coin-fontcolor-0{
  color: #b7af40
}
.edit-note{
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  right: -2%;
  border: 2px solid #CD0C1E;
  cursor: pointer;
}
.edit-note i::before{
  line-height: 1.1em!important;
  margin-left: 1px;
}
.round-notif,.round-notif2{
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 1.5!important;
  font-size: 1.3rem!important;
  font-weight: 600!important;
  font-style: normal!important;
  text-align: center;
  background-color: #0c91cde0;
  color: #fff;
  position: absolute;
}
.round-notif{
  top: -45%;
  left: 55%;
}
.round-notif2{
  top: 20%;
  right: 0;
}
@media (min-width: 576px) {
  .round-notif2{
    top: 25%;
  }
}
.btn{
    white-space: normal;
}
.btn.btn-model-2{
  border-radius: 25px;
}
.btn.skyblue-border{
  background-color: #fff;
  border: 1px solid #0C91CD;
  color: #0C91CD;
  transition: .2s all ease-in-out;
}
.btn.forestgreen-border{
  background-color: #fff;
  border: 1px solid forestgreen;
  color: forestgreen;
  transition: .2s all ease-in-out;
}
.cartdone-btn{
  margin-bottom: 7rem;
  width: 80%;
}
.cartdone-btn.disabled,.epayment-btn.disabled,.submit-pin.disabled,.c-btn-success.disabled{
  background-color: lightgray;
  color: #b0b0b0;
  border-color: #fff!important;
  box-shadow: none!important;
}
.btn.skyblue-border:hover{
  background-color: #0C91CD;
  border: 1px solid #fff;
  color: #fff;
  transition: .2s all ease-in-out;
}
.c-icongroup{
  position: relative;
  overflow: hidden;
}
.c-icongroup.active .round-border{
  border: 2px solid #0C91CD;
  color: #0C91CD;
}
.c-icongroup.active .middleline{
  background-color: #0C91CD;
}
.round-border{
  width: 35px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #e1e1e1;
  color: #e1e1e1;
  text-align: center;
}
.round-border i{
  font-size: 1.5rem;
}
.border-top-1{
  border-top: 1px solid #e5e5e5;
}
.border-bottom-1{
  border-bottom: 1px solid #e5e5e5!important;
}
.middleline{
  background-color: #e1e1e1;
  content: "";
  display: block;
  height: 3px;
  position: absolute;
  vertical-align: middle;
  width: 100%;
  top: 50%;
  transform: translate(0,-50%);
  -moz-transform: translate(0,-50%);
  -webkit-transform: translate(0,-50%);
  margin-right: -100%;
  margin-left: 4.5rem;
}

.sticky-icon{
  line-height: 3!important;
  padding: 5px .6rem;
 /* margin-top: 8px;*/
  margin-right: 7px;
/*  margin-bottom: 8px;*/
}

.set-storagelist .list-group-item{
  cursor: pointer;
  user-select: none;
}

.c-border-bottom{
  border-bottom: 1px solid lightgrey;
  box-shadow: 0 0.5rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
@media (max-width: 570px) {
  .c-border-bottom{
    border-bottom: 1px solid lightgrey;
    box-shadow: none !important;
  } 
}
.c-sub-content{
  font-weight: 600;
  font-size: 2rem;
}
.notebar{
  color: #fff;
  justify-content: center;
}
.c-sub-title{
  font-size: 18px;
  color: #959494;
  font-weight: 600;
}
.middle-block{
  margin-top: auto;
  margin-bottom: auto;
}
.c-blockquote{
  border-left : 3px solid #0C91CD;
}
.qty-btn {
  background-color: transparent;
  border-color: #aeaeae;
  border-radius: 0!important;
}
.qty-btn:hover,{
  background-color: #00a832;
  color: #fff;
  border-color: #11998e;
  transition: .1s all linear;
}
.checkout-btn{
  letter-spacing: .15rem;
  /*font-size: 1.5rem;*/
  font-weight: bold;
}
.remove-item-btn{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-45%,-50%);
  -moz-transform: translate(-45%,-50%);
  -webkit-transform: translate(-45%,-50%);
  border-radius: 50%;
  padding-top: .2rem;
  padding-bottom: .2rem;
  padding-left: .6rem;
  padding-right: .6rem;
  background-color: #fff!important;
  border: 1px solid #aeaeae;
  z-index: 2;
}
.remove-item-btn:hover{
  cursor: pointer;
  background-color: #d0d0d0 !important;
}

.tracking-result-panel{
  font-size: 1.7rem;
  line-height: 1.5;
  margin-top: 7rem!important
}
.c-order-status,.c-panelbar{
  position: absolute;
  left: 50%;
  top: -4%;
  transform: translate(-50%,0%);
  -moz-transform: translate(-50%,0%);
  -webkit-transform: translate(-50%,0%);
  border-radius: 10px;
  font-size: 1.4rem;
}
.checkout-userdata .input-group-addon{
  background-color: #fff;
}
.input-style{
  /*background-color: #fbfbfb;*/
  border-radius: 0;
}
.editnote-input{
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none!important;
  border-bottom: 2px solid #0C91CD;
}
.save-note{
  border:none;
  border-radius: 5px!important;
  background-color: #07822b;
  color: #fff;
}
.position-relative{
  position: relative;
}
.qty-cont{
  width: 6rem;
  pointer-events: none;
}
.resi-panel{
  border: 2px solid #0C91CD;
  padding: 1.5rem;
  text-align: center;
  color: #828282;
  font-size: 2.8rem;
}
.resi-panel:hover{
  cursor: pointer;
}


.c-btn-success{
  background-color: #00a832;
  color: #f9f9f9;
  border-color: #1a9745;
}
.c-btn-success:hover,.c-btn-success:focus{
  color: #fff;
  background-color: #07822b;
  border-color: #11998e;
  transition: .15s all ease;
}
.c-thumbnail {
  padding: 15px!important;
  border: none;
  border-radius: 0;
}
.c-thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 2px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
  -o-transition: border .2s ease-in-out;
  transition: border .2s ease-in-out;
}
.c-thumbnail p{
  margin-top: 15px;
  color: #555;
  font-size: 1.7rem;
  letter-spacing: .1rem;
}

.c-footer{
  color: #fff;
  border-top: 1px solid #09845c;
  /*background: #fff;*/
  border-top: 1px solid #d5d5d5;
  box-shadow: 0 -0.25rem 0.25rem rgba(0, 0, 0, 0.1) !important;
}


@media (max-width: 576px) {
  .search-product{
    width: auto;
    border-radius: 0;
  }
  .c-navbar a,.c-navbar li a{
    line-height: 2em;
  }
  .c-navbar li a{
    border-top: 1px solid #f7f7f7;
  }
  .navbar-collapse:last-child{
    border-bottom: 1px solid #f7f7f7;
  }
  .rsz-font0{
    font-size: 2rem!important
  }
  .rsz-font{
    font-size: 1.5rem!important;
  }
  .rsz-font2{
    font-size: 1.3rem!important;
  }
  .rsz-font3{
    font-size: 1rem!important;
  }
  .checkout-btn{
    width: 85%!important;
    margin-top: 1.5rem!important;
    padding: 6px 12px!important;
  }
  .checkout-itemlist .btn-group button:nth-child(1),.checkout-itemlist .btn-group button:nth-child(3){
    padding-left: 0.5rem!important;
    padding-right: 0.5rem!important;
  }
}

.icon-attention{
  font-size: 4rem;
  color: #fbd232;
}
/*=================fixed=================*/
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}


/*=================variant=================*/
.variant-header{
  font-family: DINCon;
}
.variant-cancel{
  color: #fff;
}
.variant-submit,.variant-cancel{
  font-size: 1.6rem;
}
.del_this_variety{
  font-size: 2rem;
  user-select: none;
}
.del_this_variety:hover{
  cursor: pointer;
  color: gray!important;
  transition: .25s all ease;
}
/*=================modal=================*/
body{
  padding-right: 0!important;
}
body.modal-open {
  /*overflow: hidden;*/
  overflow-y: auto!important;
}
#additem-modal .modal-header,#checkout-modal .modal-header,#search-modal .modal-header,#summary-modal .modal-header,#variantmodal .modal-header,#del_variantmodal .modal-header,#pin-modal .modal-header,#order-modal .modal-header{
  background-color: #0c91cd;
  color: #f9f9f9;
}
#variantmodal .modal-body{
  max-height: 380px;
  overflow-y: auto;
}
#additem-modal .close,#checkout-modal .close,#search-modal .close{
  font-size: 3rem;
}
#search-modal .modal-header{
  padding: .5rem 2rem;
}
#summary-modal .modal-dialog{
  width: 100%!important;
  height: 100%!important;
  /*overflow-y: auto!important;*/
}
#summary-modal .close{
  opacity: 1;
  color: #fff;
  line-height: 1.25;
  font-size: 30px;
}
#summary-modal .table,.ordersummary .table{
  font-size: 1.4rem;
}
#summary-modal .modal-content{
  border-radius: 0!important;
  margin: 0!important;
  padding: 0!important;
  /*height: calc(100vh - 60px)!important;*/
}
#summary-modal .modal-body{
 /* height: calc(100vh - 60px)!important;
  padding-bottom: 65px;*/
  min-height: 100vh!important;
} 
.modal.custom-1 .modal-header{
  background-color: var(--mainbtn_color);
}
.modal-btnsecondary{
  color: rgba(0,0,0,0.6)!important;
}
.modal-btnsecondary:hover{
  text-decoration: none;
}
/*.modal-open {
  overflow: hidden;
}*/
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform .3s ease-out;
       -o-transition:      -o-transform .3s ease-out;
          transition:         transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
       -o-transform: translate(0, -25%);
          transform: translate(0, -25%);
}
.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
.modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.modal-header .close {
  margin-top: -2px;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.modal-body {
  position: relative;
  padding: 15px;
}
.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
@media (max-width: 576px) {
  .modal-dialog {
    /*max-height: 90%;*/
    overflow-y: scroll;
  }
  .cart-panel1{
    padding-left: 2rem!important;
    padding-right: 2rem!important;
    padding-top: 3rem!important;
    padding-bottom: 3rem!important;
  }
  .cart-panel2{
    padding: 1rem!important;
    padding-bottom: 5rem!important;
  }
}

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
  .cart-panel1{
    padding: 3rem!important;
  }
  .cart-panel2{
    padding: 3rem!important;
    padding-bottom: 5rem!important;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}


/*=================shadow=================*/
.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
/*=================card=================*/
.product-card .card:hover{
  cursor: pointer;
}
.product-card{
  padding: 0;
  margin-top: 1.9rem;
}
.add-xs{
  color: #fff;
  border-radius: 5px;
  font-size: 17px!important;
  letter-spacing: .2rem!important;
}
.qty-xs-container{
  border-radius: 5px;
  margin-left:auto;
}
.qty-btn-xs{
  padding-right: 0.75rem!important;
  padding-left: 0.75rem!important;
  font-size: 12px;
  cursor: pointer;
}
.cart-qty-cont{
  user-select: none;
}
.discount-amount{
  background-color: #fac5bf;
  font-size: 1.5rem;
  color: #ef2c1a;
}
.old-price{
  color: #686868;
  font-size: 1.5rem;
  text-decoration: line-through;
}
@media (max-width: 570px) {
  .card-container{
    padding: 0;
    margin-bottom: 0!important;
  }
  .card-footer{
    background-color: #fff!important;
    border-top: 0!important;
  }
  .card-footer-2ndrow{
    margin-top: 0!important;
  }
}
@media (min-width: 576px) {
  .product-card{
    padding: 0;
    margin-top: 0!important;
  }
  .card-container{
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 1.5rem!important;
  }
  .card-footer-2ndrow{
    margin-top: 1rem!important;
  }
}
.card .add-tocart-quick{
  font-size: 24px;
  cursor: pointer;
  user-select: none;
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  /*border-radius: 0.25rem;*/
  border-radius: 0;
}
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
.card > .list-group:first-child .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.card > .list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
  padding-bottom: 0;
}

.card-title {
  margin-bottom: 0.15rem;
  text-transform: uppercase;
  font-size: 1.9rem;
  color: #686868;
}
.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}
.card-text{
  margin-top: 0.15rem;
  color: #0C91CD;
  font-size: 1.8rem;
}
.card-text:last-child {
  margin-bottom: 0;
}
.card-link:hover {
  text-decoration: none;
}
.card-link + .card-link {
  margin-left: 1.25rem;
}
.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}
.card-header + .list-group .list-group-item:first-child {
  border-top: 0;
}
.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.card-footer:last-child {
  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}
.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}
.card-img,
.card-img-top,
.card-img-bottom {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
}
.card-img,
.card-img-top {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
.card-img,
.card-img-bottom {
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}
.card-deck .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-deck {
    display: -ms-flexbox!important;
    display: flex!important;
    -ms-flex-flow: row wrap!important;
    flex-flow: row wrap!important;
    margin-right: -15px;
    margin-left: -15px;
  }
  .card-deck .card {
    -ms-flex: 1 0 0%!important;
    flex: 1 0 0%!important;
    margin-right: 15px;
    margin-bottom: 0!important;
    margin-left: 15px;
  }
  .card-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .card-body {
    padding-bottom: 1.5rem!important;
  }
}

.card-group > .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  .card-group > .card {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}
.card-columns .card {
  margin-bottom: 0.75rem;
}

.row-cols-xs-2 > * {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }

  .row-cols-sm-1 > * {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-sm-2 > * {
    -ms-flex: 0 0 50%!important;
    flex: 0 0 50%!important;
    max-width: 50%!important;
  }
  .row-cols-sm-3 > * {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-sm-4 > * {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-sm-5 > * {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-sm-6 > * {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
}


.accordion > .card {
  overflow: hidden;
}
.accordion > .card:not(:last-of-type) {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.accordion > .card:not(:first-of-type) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.accordion > .card > .card-header {
  border-radius: 0;
  margin-bottom: -1px;
}

/*=================row=================*/
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.row-cols-1 > * {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
.row-cols-2 > * {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
.row-cols-3 > * {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
.row-cols-4 > * {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
.row-cols-5 > * {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}
.row-cols-6 > * {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.rounded-0 {
  border-radius: 0 !important;
}
.rounded-lg{
    border-radius: 1rem !important;
}
.w-100{
  width: 100%!important;
}
.w-80{
  width: 80%!important;
}
.h-100 {
  height: 100% !important;
}
.full-height{
  min-height:100vh;
}
.h-auto{
  height: auto;
}

.m-auto{
  margin-right: auto;
  margin-left: auto;
}
.my-auto{
  margin-top: auto;
  margin-bottom: auto;
}
.ml-auto{
  margin-left: auto;
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}


#deliver-date,#deliver-time{
  cursor: pointer!important;
  background-color: #fff!important;
}

.flexfix:after, .flexfix:before{
  display: none!important;
}


/*=================CUSTOM BUTTON=================*/
.btn.custom-1{
  border-radius: 10px;
  padding: 0.5rem 3rem;
  transition: .1s opacity linear;
}
.btn.mainbtn:hover,.btn.mainbtn2:hover{
  opacity: 0.9;
  transition: .1s opacity linear;
}
.btn.mainbtn{
  background-color: var(--mainbtn_color);
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
.btn.mainbtn2{
  background-color: var(--maincolor);
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  padding: 2px 5px;
  width:80px;
}
.btn.mainbtn3{
  background-color: var(--maincolor2);
  color: var(--maincolor);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  padding: 2px 5px;
}
.btn.mainbtn3:hover{
  background-color: #d7d7c9;
}
/*=================RANDOM STUFF=================*/
.xsmall{
  font-size: 60%;
}
.fs-1_9r{
  font-size: 1.9rem;
}
.fs-2r{
  font-size: 2rem;
}
.fs-2_1r{
  font-size: 2.1rem;
}
.lh-1_4{
  line-height: 1.4;
}
.lh-2{
  line-height: 2em;
}
.lh-4{
  line-height: 4em;
}


.ticket{
  width: 100%;
  /*background-color: #e6e7e8;*/
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}
.ticket .top,.ticket .middle,.ticket .bottom{
  /*background-color: #fff;*/
}

.ticket .header{
  padding: 20px 7px;
}
.ticket .bottom{
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  padding: 18px;
}
.ticket .rip-area{
  border: 1px dashed var(--maincolor2);
  position: relative;
}
.ticket .rip-area:before,.ticket .rip-area:after{
  content: '';
  position: absolute;
  padding: 14px 15px;
  background-color: var(--maincolor2);
  border-radius: 50%;
  pointer-events:none;
}
.ticket .rip-area:before{
  top: -14px;
  left: -18px;
}
.ticket .rip-area:after{
  top: -14px;
  right: -18px;
}
.rounded-corner{
  content: '';
  position: absolute;
  background-color: var(--maincolor2);
  width: 10px;
  height: 20px;
}
.rounded-corner::after {
    content: "";
    position: absolute;
    border-radius: 20px;
    width: 45px;
    height: 45px;
    background-color: white;
    z-index: 2;
}
.rounded-corner.bottom-right:after{
  right: 0;
  top: 0;
}
.rounded-corner.bottom-left:after{
  left: 0;
  top: 0;
}
.rounded-corner.bottom-right{
  top: 11px;
  right: -5px;
}
.rounded-corner.bottom-left{
  top: 11px;
  left: -5px;
}
.rounded-corner.top-right{
  right: -5px;
  bottom: 11px;
}
.rounded-corner.top-left{
  left: -5px;
  bottom: 11px;
}
.rounded-corner.top-right:after{
  right: 0;
  bottom: 0; 
}
.rounded-corner.top-left:after{
  left: 0;
  bottom: 0; 
}
button.custom-2{
  background-color: var(--maincolor);
  color: #fff;
  font-weight: 700;
}

.checkbox-btn input{
  display: none;
}
.checkbox-btn label{
  margin-bottom: 0;
  width: 100%;
  text-align: center;
}
.checkbox-btn .content{
  border: 1px solid #bbbdbf;
  padding: 8px 10px;
  border-radius: 10px;
}
.checkbox-btn input:checked + .content{
  background-color: var(--maincolor2);
  border-color: var(--maincolor2);
}
.checkbox-overlay .checkbox-btn::before{
  display: block;
  rotate: 350deg;
  font-size: 80%;
  color: var(--maincolor3);
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-weight: 700;
}
.checkbox-overlay.redeem .checkbox-btn::before{
  content: "-REDEEM-";
}
.checkbox-overlay.expired .checkbox-btn::before{
  content: "-EXPIRED-";
}
.checkbox-overlay .checkbox-btn .content{
  background-color: var(--maincolor2);
  border-color: var(--maincolor2);
  color: #fff;
}
.checkbox-overlay .checkbox-btn input{
  pointer-events: none;
}

.image-container{
  width: 100%;
  height: 100%;
  border-radius: 15px;
}
.image-container img,.logo-container img{
  object-position:center;
  width: 100%;
}
.image-container img{
  object-fit:cover;
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
}

.logo-container img{
    object-fit:contain;
    object-position:center;
    width: 100%;
    height: 100%;
}
.aspect-ratio-tall{
  aspect-ratio: 3/4;
}
.aspect-ratio-square{
  aspect-ratio: 4/4;
}
.aspect-ratio-wide{
  aspect-ratio: 4/1.2;
}

.clip-polygon{
  clip-path: polygon(7% 0%, 93% 0%, 100% 7%, 100% 93%, 93% 100%, 7% 100%, 0% 93%, 0% 7%);
  /*clip-path: polygon(10% 0%, 90% 0%, 100% 5%, 100% 95%, 90% 100%, 10% 100%, 0% 95%, 0% 5%);*/
}
.drop-shadow-1{
  filter:
    drop-shadow( 0px  1px 0 #fff)
    drop-shadow( 0px -1px 0 #fff)
    drop-shadow( 1px  0px 0 #fff)
    drop-shadow(-1px  0px 0 #fff);
}
.drop-shadow-1.inset{
  padding: 2%;
}

.btn-transparent{
  background-color: transparent;
}
.btn-transparent:hover{
 opacity: 0.8; 
}

fieldset.fieldset-flex{
  border: 5px solid #fff;
  box-sizing: border-box; 
  padding: 10px; 
  flex: 0 0 65%;
  display: -ms-flexbox !important;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
}
fieldset .overflow-text{
  background-color: var(--maincolor3);
  width: max-content;
}

.z-index-0{
  z-index: 0;
}
.z-index-1{
  z-index: 1;
}

@media (orientation: landscape ) and (min-width: 700px) {
    html {
        margin:    0 auto;
        max-width: 50%;
    }
        
}


.option-group > .option-list {
    display: -ms-flexbox;
    display: flex
;
    color: #6F1C10;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px solid #cccccc;
    padding: 15px;
    user-select: none;
}