/* Helvetica Neue Thin */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueThin.otf') format('opentype');
    font-weight: 100; /* Thin */
    font-style: normal;
}

/* Helvetica Neue Thin Italic */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueThinItalic.otf') format('opentype');
    font-weight: 100; /* Thin */
    font-style: italic;
}

/* Helvetica Neue Ultra Light */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueUltraLight.otf') format('opentype');
    font-weight: 200; /* Ultra Light */
    font-style: normal;
}

/* Helvetica Neue Ultra Light Italic */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueUltraLightItalic.otf') format('opentype');
    font-weight: 200; /* Ultra Light */
    font-style: italic;
}

/* Helvetica Neue Light */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueLight.otf') format('opentype');
    font-weight: 300; /* Light */
    font-style: normal;
}

/* Helvetica Neue Light Italic */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueLightItalic.otf') format('opentype');
    font-weight: 300; /* Light */
    font-style: italic;
}

/* Helvetica Neue Medium */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueMedium.otf') format('opentype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

/* Helvetica Neue Medium Italic */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueMediumItalic.otf') format('opentype');
    font-weight: 500; /* Medium */
    font-style: italic;
}

/* Helvetica Neue Roman (Regular) */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueRoman.otf') format('opentype');
    font-weight: 400; /* Regular */
    font-style: normal;
}

/* Helvetica Neue Italic */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueItalic.ttf') format('truetype');
    font-weight: 400; /* Regular */
    font-style: italic;
}

/* Helvetica Neue Bold */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueBold.otf') format('opentype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

/* Helvetica Neue Bold Italic */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueBoldItalic.otf') format('opentype');
    font-weight: 700; /* Bold */
    font-style: italic;
}

/* Helvetica Neue Heavy */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueHeavy.otf') format('opentype');
    font-weight: 800; /* Heavy */
    font-style: normal;
}

/* Helvetica Neue Heavy Italic */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueHeavyItalic.otf') format('opentype');
    font-weight: 800; /* Heavy */
    font-style: italic;
}

/* Helvetica Neue Black */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueBlack.otf') format('opentype');
    font-weight: 900; /* Black */
    font-style: normal;
}

/* Helvetica Neue Black Italic */
@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueBlackItalic.otf') format('opentype');
    font-weight: 900; /* Black */
    font-style: italic;
}


html,body,input{
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue' !important;
    font-weight: 500;
    font-size: 16px;
}

body{
    background-color: #E7EEF0;
}

::placeholder {
    color: #B2B2B2;
    opacity: 1;
}

::-ms-input-placeholder {
    color: #B2B2B2;
}

.fz-12{
    font-size: 14px;
}
.fz-16{
    font-size: 16px;
}
.fz-18{
    font-size: 18px;
}
.fz-28{
    font-size: 28px;
}
.fz-20{
    font-size: 20px;
}
.fz-30{
    font-size: 30px;
}
.fz-63{
    font-size: 63px;
    line-height: 63px;
}
.fz-50{
    font-size: 50px;
    line-height: 50px;
}

.fw-400{
    font-weight: 400;
}

.fw-700{
    font-weight: 700;
}

.left-0{
    left: 0;
}
.w-30{
    width: 30%;
}
.bg-none{
    background-color: unset !important;
}
.btn-secondary.disabled, .btn-secondary:disabled{
    background-color: #717171 !important;
    opacity: 1 !important;
}

.alert-warning{
    border-radius: 10px;
    background-color: #FFF1C0;
    color: #824F20;
    padding: 15px 0;
}
.category-description ol{
    margin-bottom: 0 !important;
}

.bg-primary,
.btn-primary,
button.bg-primary:hover{
    background: #009343 !important;
    color: #fff;
    border: unset;
    outline: unset;
}

.row.center{
    min-height: 100vh;
    align-items: center;
}
#btn-back{
    position: absolute;
    top: 0;
    left: 0;
}

.menu-button{
    height: 214px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 20px 0 0;
    font-weight: 500;
    font-size: 16px;
    border-radius: 21px;
    cursor: pointer;
    overflow: hidden;
}
.menu-button.lock img{
    filter: blur(10px);
}
.menu-button .title-lock{
    display: none;
}
.menu-button.lock .title-produk{
    display: none;
}
.menu-button.lock .title-lock{
    display: block;
}
.seatnumber-container{

}
#seatnumber-2{
    background-color: #1B5435;
}

.block-item{
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0px 10px 20px 6px #0000000F;
}
.block-product{
    border: 2px solid #E7EEF0;
    background-color: #fff;
    border-radius: 21px;
}
.product-banner{
    background-color: #FF0909;
    color: #fff;
    font-weight: 500;
    font-style: italic;
    font-size: 11px;
    border-radius: 0px 20px 20px 20px;
    transform: translateY(-1.2rem);
}
.btn-qty{
    height: 62px;
    width: 100%;
    font-size: 20px;
    border-radius: 8px !important;
    border: 2px solid #E7EEF0 !important;
}
.text-grey{
    color: #D2D2D2;
}
.text-black{
    color: #000;
}

.popup-qty{
    width: 100%;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
    transition: all .3s ease-in-out;
}
.popup-qty.show{
    transform: translateY(0);
}
.btn-qty-update{
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    background-color: #009343 !important;
    border-radius: 0;
}
.right-border-dashed{
    border-right: 2px dashed #D7D7D7;
}

.form-control,
.select2-container--default .select2-selection--single{
    border-radius: 12px;
    border: 2px solid #E7EEF0;
    height: 62px;
    font-weight: 300;
}
.btn{
    font-weight: 500;
}
button.btn-submit{
    height: 62px;
    border-radius: 12px;
}
.select2-container--default .select2-selection--single{
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    top: 50%;
    transform: translateY(-50%);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    background-image: url(../image/dropdown-icon.svg);
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: contain;
    border: none !important;
    height: 10px !important;
    width: 15px !important;
    margin: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
    right: 0px !important;
    margin-right: 15px !important;
  }

/* .input-group{
    margin-top: -8px;
} */
.input-group-text{
    background: #E7EEF0;
    border: unset;
    border-radius: 12px 0px 0px 12px;
    font-weight: 500;
}
.input-group.verification .input-group-text{
    background-color: #fff;
}
.input-group.verification input{
    border: unset !important;
}
.select2-container{
    max-width: 100%;
}

#ui-datepicker-div{
    left: 50% !important;
    transform: translate(-50%);
    scale: 1.2;
    margin-left: 1.6rem;
}

#page-loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(255,255,255,.6);
}

#verificationForm #seatnumber-1{
    border-radius: 21px;
    position: relative;
    z-index: 2;
}
#verificationForm #seatnumber-2{
    border-radius: 0 20px 20px 0;
    color: #fff;
    margin-left: -21px;
}
#verificationForm .pill-rounded{
    border-radius: 21px;
}

#photoboothContainer{
    display: flex;
}
#btn_capture{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background-color: unset;
    width: 100px;
    border: 5px solid #fff;
    border-radius: 50%;
    padding: 20px;
}
#btn_capture img{
    width: 100%;
    filter: invert(1) brightness(2);
}

#btn_reset_capture{
    width: 80px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
}
#btn_reset_capture img{
    width: 100%;
    filter: invert(1) brightness(2);
}

#canvas_capture{
    z-index: 3;
}

#canvas_capture{
    border-radius: 21px;
}
#video_capture.d-hide{
    opacity: 0;
}
#video_capture{
    border-radius: 21px;
    max-width: 100%;
    position: relative;
    z-index: 4;
}
.signature-wrapper{
    border-radius: 21px;
    overflow: hidden;
    background-color: #fff;
    margin-top: auto;
    height: 100%;
}

.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #009343 #009343 transparent transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }
  .loader::after,
  .loader::before {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent #FF0909 #FF0909;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
  }
  .loader::before {
    width: 32px;
    height: 32px;
    border-color: #009343 #009343 transparent transparent;
    animation: rotation 1.5s linear infinite;
  }
      
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } 
  @keyframes rotationBack {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }