@import "theme/default.css";

/*** Modal Default Style ***/
.modal-backdrop {
    background-color: #475467;
}

body{display: none}

.form-input-group .text{width: 100%;height: 48px;background: #fff; border: 1px solid #D0D5DD;box-shadow: 0px 1px 2px rgba(8, 48, 71, 0.05);border-radius: 8px;padding: 10px;font-size: 16px;line-height: 28px;font-weight: 500}
.form-input-group .text:disabled{background: #FCFCFD;border-color:#EAECF0;}
.form-input-group input::-webkit-input-placeholder, .form-input-group input:-moz-placeholder, .form-input-group input::-moz-placeholder, .form-input-group input:-ms-input-placeholder, .form-input-group input::-ms-input-placeholder, .form-input-group input::placeholder {color:#98A2B3;}

.modal-body{padding:0 24px 24px 24px}
.modal-header .btn-close{margin:-.5rem auto -.5rem -.5rem;width:16px;height:16px;padding:8px}
.modal-content{border-radius: 8px;}
.modal-content{border:0}
.modal-header{padding:24px 24px 0 24px;border-bottom:0}

.btn-close{background: transparent url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.227806 0.227806C0.531547 -0.0759353 1.02401 -0.0759353 1.32775 0.227806L7 5.90006L12.6722 0.227807C12.976 -0.0759345 13.4685 -0.0759344 13.7722 0.227807C14.0759 0.531548 14.0759 1.02401 13.7722 1.32775L8.09994 7L13.7722 12.6722C14.0759 12.976 14.0759 13.4685 13.7722 13.7722C13.4685 14.0759 12.976 14.0759 12.6722 13.7722L7 8.09994L1.32775 13.7722C1.02401 14.0759 0.531547 14.0759 0.227806 13.7722C-0.0759352 13.4685 -0.0759352 12.976 0.227806 12.6722L5.90006 7L0.227806 1.32775C-0.0759353 1.02401 -0.0759353 0.531547 0.227806 0.227806Z' fill='%23667085'/%3E%3C/svg%3E") center/1em auto no-repeat;opacity: 1}
.btn-close:hover{opacity: 1}
#langModal .modal-body{padding: 0 16px 40px 16px;}
#langModal .bottom-footer, #qrModal .bottom-footer{padding: 0 24px 24px;display: flex;align-items: center;justify-content: space-between;}
#langModal .bottom-footer button, #qrModal .bottom-footer button{width: 206px;height: 52px;border: none;border-radius: 8px;}
#langModal .bottom-footer .button-cancel, #qrModal .bottom-footer .button-cancel{background: #FFFFFF;border: 1px solid var(--dmButtonBgColor);}
#langModal .bottom-footer .button-success, #qrModal .bottom-footer .button-success{background: var(--dmButtonBgColor);;color: #fff}
.modal-dialog{width: 476px;}

.main-content .toolbar{margin: 16px auto auto;}

label.custom-radio-button input[type="radio"] {display: none;}
label.custom-radio-button .holder, label.custom-checkbox .holder{display: flex;align-items: center;gap: 8px;}
label.custom-radio-button input[type="radio"] ~ .holder .helping-el {background-color: #FFFFFF;border: 0.09rem solid #D0D5DD;border-radius: 50%;display: inline-block;padding: 9px;position: relative;}
label.custom-radio-button input[type="radio"]:checked ~ .holder .helping-el {border: 0.09rem solid var(--dmButtonBgColor);;}
label.custom-radio-button input[type="radio"]:checked ~ .holder .helping-el:after {background-color: var(--dmButtonBgColor);;border-radius: 50%;content: " ";font-size: 32px;height: 10px;position: absolute;width: 10px;top: 0;bottom: 0;margin: auto;left: 0;right: 0;}
.radio-box-item{line-height: 0}

/*.alert-box{position: fixed;width: 328px;right: -328px;bottom: 32px;background: #F6FEF9;border: 1px solid #92DEBA;box-shadow: 0px 4px 8px -2px rgba(8, 48, 71, 0.1), 0px 2px 4px -2px rgba(8, 48, 71, 0.06);border-radius: 12px;z-index: 999;padding: 13px 17px}*/
/*.alert-box .close{background: url("../images/close.png") no-repeat center;width: 16px;height: 16px;border: none}*/
/*.alert-box .open-card{display: flex;align-items: center;gap: 4px}*/
/*.alert-box .open-card:after{content: url("../images/arrow-left-notification.png");width: 16px;height: 16px}*/
/*.alert-box.open{right: 32px;transition: all 0.5s ease;}*/
/*.alert-box.close{right: -328px;transition: all 0.5s ease;}*/

.modal .question-box > button{width: 204px;height: 52px;text-align: center;border: none;}
.modal .question-box.delete > button.success{background-color: #D92D20;color: #fff;}
.modal .question-box.edit > button.success{background-color: #13727D;color: #fff;}
.modal .question-box > button.cancel{background: #FFFFFF;border: 1px solid #D0D5DD!important;}

/*.modal:nth-of-type(even) {z-index: 1062 !important;}*/
/*.modal-backdrop.show:nth-of-type(even) {z-index: 1061 !important;}*/

/*  SearchBox MAP  */
.mapboxgl-ctrl-top-right{width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center}
.pmi-geocoder-layout{width: 100% !important;margin: 0;padding: 16px}

header .single-profile-header{height: 56px;border-bottom: 1px solid #EAECF0;padding: 0 20px;}
header .single-profile-header .back-page-button > button {width: 24px;height: 24px;background: url("../images/arrow-right.svg") no-repeat center;border: none;position: absolute;right: 16px;top: 0;bottom: 0;margin: auto;}

.toolbar .breadcrumbs ul{padding: 0;margin: 0;list-style: none;}
.toolbar .breadcrumbs ul li.active{color: #475467}
.toolbar .breadcrumbs ul li:not(:last-child)::after{content: "/";font-weight: 400;font-size: 14px;color: #667085;margin: 0 4px;}
.toolbar .back-page-button > button{border: none;background: none;gap: 8px}
.toolbar .back-page-button > button:before{content: url("../images/arrow-back.png");width: 20px;height: 20px}

.button-fixed-payment{width: 100%;padding: 18px 0;position: fixed;bottom: 0;right: 0;border-top: 1px solid #EAECF0;box-shadow: 0px -4px 8px -2px rgba(8, 48, 71, 0.1), 0px -2px 4px -2px rgba(8, 48, 71, 0.06);background: #fff;z-index: 1}
.button-fixed-payment .content{max-width: 800px;width: 100%;}
.button-fixed-payment button{width: 156px}


.spinner-border {display: inline-block;width: 2rem;height: 2rem;vertical-align: middle;border: .25em solid currentColor;border-right-color: transparent;border-radius: 50%;-webkit-animation: spinner-border .75s linear infinite;animation: spinner-border .75s linear infinite;display: none;}

.spinner-border-sm {width: 1rem;height: 1rem;border-width: .2em}

button:disabled{background-color: #A8DDE3;opacity: 1;}
.food-item .food-add-box .js_foodBtn:disabled{background: #F0FBFC;opacity: 0.5}
.button-minus-number:disabled {background: #fff!important;opacity: 0.5;}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #D0D5DD!important;
}
.mCSB_buttonDown,.mCSB_buttonUp{display: none!important;}

.mCSB_scrollTools a+.mCSB_draggerContainer{margin: 0!important;}

.select-box {
    position: relative;
    display: flex;
    width: 100% !important;
    /*max-width: 483px;*/
    flex-direction: column;
}

.select-box .options-container {
    background: #FFFFFF;
    max-height: 0;
    width: 100%;
    opacity: 0;
    border-radius: 8px;
    overflow: auto;
    order: 1;
    position: absolute;
    z-index: 100;
    border: 1px solid #F2F4F7;
    box-shadow: 0px 4px 6px -2px rgba(8, 48, 71, 0.03), 0px 12px 16px -4px rgba(8, 48, 71, 0.08);
}

.selected {
    position: relative;order: 0;width: 100%;height: 54px;background: transparent;overflow: hidden;border-radius: 8px;border: 1px solid #D0D5DD;
}

.selected::after {
    content: "";
    background-size: contain;
    background-repeat: no-repeat;

    disaply: flex;
    height: 100%;
    width: 32px;
    right: 10px;
    top: 5px;

    top: 120%;

    transition: all 0.4s;
}

.select-box .options-container.active {
    max-height: 240px;
    /*min-height: 240px;*/
    opacity: 1;
    overflow-y: hidden;
    margin-top: 60px;
}

.selector-wrapper > .arrow {
    transition: 0.2s;
}

.selector-wrapper > .arrow {
    cursor: pointer;
    float: right !important;
    display: block;
    flex-direction: row;
    position: absolute;
    align-items: center;
    background-color: transparent;
    border-radius: 15px;
    height: 100%;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 10px;
    height: 24px;
    z-index: 99;
}

.rotated {
    transform: rotate(180deg) !important;
}

.select-box .options-container::-webkit-scrollbar {
    width: 8px;
    border-radius: 15px;
    scrollbar-width: 5px;
    width: 5px;
    margin-top: -10px;
    overflow: hidden;
    background: transparent;
    display: none;
}

.select-box .options-container::-webkit-scrollbar-thumb {
    background: #525861;
    border-radius: 15px;
    scrollbar-width: 5px;
    height: 5px;
    length: 10px;
    margin-top: -10px;
}

.select-box .options-container::-webkit-scrollbar-track {
    background: transparent;
    display: none;
}

.options-container {
    overflow: overlay !important;
}

.select-box .option,
.selected {
    /* padding: 12px 24px; */
    cursor: pointer;
}

.selected {
    padding: 15px 10px;
    float: left;
}

.select-box .option:hover {
    background: #F9FAFB;
}

.select-box label {
    cursor: pointer;
    display: block;
    padding: 10px;
}

.select-box .option .radio {
    display: none;
}

/* Searchbox */

.search-box input {
    width: 100%;
    padding: 12px 16px;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    position: absolute;
    border-radius: 8px 8px 0 0;
    z-index: 100;
    border: 8px solid #2f3640;

    opacity: 0;
    pointer-events: none;
}

.options-container.active {
    pointer-events: auto;
}

.options-container {
    border-radius: 8px !important;
}

.option {
    margin: 10px;
    border-radius: 10px;
}

.selector-wrapper {
    position: relative;
    display: flex;
}

.selected .placeholder{color: #98A2B3}

@-webkit-keyframes spinner-grow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    50% {
        opacity: 1
    }
}

@keyframes spinner-grow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    50% {
        opacity: 1
    }
}

.spinner-grow {display: inline-block;width: 2rem;height: 2rem;vertical-align: text-bottom;background-color: currentColor;border-radius: 50%;opacity: 0;-webkit-animation: spinner-grow .75s linear infinite;animation: spinner-grow .75s linear infinite}


.main-content{padding-bottom: 180px}
@media(max-width:768px) {
    .main-content {
        width: 100%;
        /*padding: 56px 16px 16px 16px;*/
    }
    .modal-header{padding:16px 16px 0 16px}
    .modal-body{padding:0 16px 16px 16px}

    .button-fixed-payment{max-width: 800px;width: 100%;padding: 12px 16px 16px 16px;}

    .question-box .modal-dialog {padding: 0 16px 72px!important;}
    .question-box .modal-content {border-radius: 8px!important;}

    .selected{height: 44px; padding: 10px 10px;}
    .select-box .options-container.active{margin-top: 50px}
}

/*.modal.show:nth-of-type(even) {*/
/*    z-index: 1062 !important;*/
/*}*/
/*.modal-backdrop.show:nth-of-type(even) {*/
/*    z-index: 1061 !important;*/
/*}*/

/*.modal.show:nth-of-type(odd) {*/
/*    z-index: 1062 !important;*/
/*}*/
/*.modal-backdrop.show:nth-of-type(odd) {*/
/*    z-index: 1061 !important;*/
/*}*/

@media(max-width:800px) {
    /*header .internal-header {*/
    /*    display: none !important;*/
    /*}*/

    header .single-profile-header {
        display: flex !important;
    }

    .main-content .toolbar {
        display: none !important;
    }
}
@media(max-width:600px){
    .brand-item,.nav-top-home{margin-left:24px}
    .lab-modal-body {
        position: fixed;
        bottom: -250px;
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
        height: auto;
        opacity: 0;
        -webkit-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
        -moz-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
        -o-transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
        transition: opacity 0.3s ease-out, bottom 0.3s ease-out !important;
        transform: none !important;
        min-height: unset;
    }

    .modal.show .lab-modal-body {
        bottom: 0;
        opacity: 1;
        z-index: 1000;
        width: 100%;
    }

    .modal-content{border-radius: 8px 8px 0px 0px!important;}

    .bottom-footer{display: none!important;}

    #langModal .modal-body{padding: 0 16px 48px 16px!important;}



    .modal .question-box{flex-direction: column;gap: 12px}
    .modal .question-box > button{width: 100%}
}