/* ROOT */

:root {
    --scale: 100;
    /*Width - tab*/
    --left-tab-track-tech: -20000000px;
    --left-tab-track-wait: -20000000px;
    --left-tab-tech: -200;
    --w-tab-header: calc(115px * var(--scale) / 100);
    /*Size text*/
    --s-8: calc(8px * var(--scale) / 100) / calc(11px * var(--scale) / 100) Montserrat, sans-serif;
    --s-10: calc(10px * var(--scale) / 100) / calc(13px * var(--scale) / 100) Montserrat, sans-serif;
    --s-11: calc(11px * var(--scale) / 100) / calc(14px * var(--scale) / 100) Montserrat, sans-serif;
    --s-12: calc(12px * var(--scale) / 100) / calc(15px * var(--scale) / 100) Montserrat, sans-serif;
    --s-13: calc(13px * var(--scale) / 100) / calc(16px * var(--scale) / 100) Montserrat, sans-serif;
    --s-14: calc(14px * var(--scale) / 100) / calc(15px * var(--scale) / 100) Montserrat, sans-serif;
    --s-15: calc(15px * var(--scale) / 100) / calc(19px * var(--scale) / 100) Montserrat, sans-serif;
    --s-16: calc(16px * var(--scale) / 100) / calc(19px * var(--scale) / 100) Montserrat, sans-serif;
    --s-18: calc(18px * var(--scale) / 100) / calc(22px * var(--scale) / 100) Montserrat, sans-serif;
    --s-19: calc(19px * var(--scale) / 100) / calc(23px * var(--scale) / 100) Montserrat, sans-serif;
    --s-20: calc(20px * var(--scale) / 100) / calc(24px * var(--scale) / 100) Montserrat, sans-serif;
    --s-22: calc(22px * var(--scale) / 100) / calc(27px * var(--scale) / 100) Montserrat, sans-serif;
    --s-24: calc(24px * var(--scale) / 100) / calc(37px * var(--scale) / 100) Montserrat, sans-serif;
    --s-25: calc(25px * var(--scale) / 100) / calc(30px * var(--scale) / 100) Montserrat, sans-serif;
    --s-26: calc(26px * var(--scale) / 100) / calc(32px * var(--scale) / 100) Montserrat, sans-serif;
    --s-28: calc(28px * var(--scale) / 100) / calc(34px * var(--scale) / 100) Montserrat, sans-serif;
    --s-30: calc(30px * var(--scale) / 100) / calc(37px * var(--scale) / 100) Montserrat, sans-serif;
    --s-32: calc(32px * var(--scale) / 100) / calc(39px * var(--scale) / 100) Montserrat, sans-serif;
    --s-45: calc(45px * var(--scale) / 100) / calc(55px * var(--scale) / 100) Montserrat, sans-serif;
    --s-50: calc(50px * var(--scale) / 100) / calc(61px * var(--scale) / 100) Montserrat, sans-serif;
    --s-54: calc(54px * var(--scale) / 100) / calc(66px * var(--scale) / 100) Montserrat, sans-serif;
    --s-80: calc(80px * var(--scale) / 100) / calc(98px * var(--scale) / 100) Montserrat, sans-serif;
    /*Size box*/
    --px-2: calc(2px * var(--scale) / 100);
    --px-3: calc(3px * var(--scale) / 100);
    --px-4: calc(4px * var(--scale) / 100);
    --px-5: calc(5px * var(--scale) / 100);
    --px-6: calc(6px * var(--scale) / 100);
    --px-7: calc(7px * var(--scale) / 100);
    --px-8: calc(8px * var(--scale) / 100);
    --px-9: calc(9px * var(--scale) / 100);
    --px-10: calc(10px * var(--scale) / 100);
    --px-11: calc(11px * var(--scale) / 100);
    --px-12: calc(12px * var(--scale) / 100);
    --px-13: calc(13px * var(--scale) / 100);
    --px-14: calc(14px * var(--scale) / 100);
    --px-15: calc(15px * var(--scale) / 100);
    --px-16: calc(16px * var(--scale) / 100);
    --px-18: calc(18px * var(--scale) / 100);
    --px-20: calc(20px * var(--scale) / 100);
    --px-21: calc(21px * var(--scale) / 100);
    --px-22: calc(22px * var(--scale) / 100);
    --px-23: calc(23px * var(--scale) / 100);
    --px-24: calc(24px * var(--scale) / 100);
    --px-25: calc(25px * var(--scale) / 100);
    --px-28: calc(28px * var(--scale) / 100);
    --px-30: calc(30px * var(--scale) / 100);
    --px-32: calc(32px * var(--scale) / 100);
    --px-33: calc(33px * var(--scale) / 100);
    --px-35: calc(35px * var(--scale) / 100);
    --px-36: calc(36px * var(--scale) / 100);
    --px-40: calc(40px * var(--scale) / 100);
    --px-42: calc(42px * var(--scale) / 100);
    --px-45: calc(45px * var(--scale) / 100);
    --px-48: calc(48px * var(--scale) / 100);
    --px-50: calc(50px * var(--scale) / 100);
    --px-52: calc(52px * var(--scale) / 100);
    --px-55: calc(55px * var(--scale) / 100);
    --px-60: calc(60px * var(--scale) / 100);
    --px-64: calc(64px * var(--scale) / 100);
    --px-65: calc(65px * var(--scale) / 100);
    --px-70: calc(70px * var(--scale) / 100);
    --px-73: calc(73px * var(--scale) / 100);
    --px-75: calc(75px * var(--scale) / 100);
    --px-80: calc(80px * var(--scale) / 100);
    --px-85: calc(85px * var(--scale) / 100);
    --px-88: calc(88px * var(--scale) / 100);
    --px-90: calc(90px * var(--scale) / 100);
    --px-95: calc(95px * var(--scale) / 100);
    --px-100: calc(100px * var(--scale) / 100);
    --px-105: calc(105px * var(--scale) / 100);
    --px-108: calc(108px * var(--scale) / 100);
    --px-110: calc(110px * var(--scale) / 100);
    --px-115: calc(115px * var(--scale-keyboard) / 100);
    --px-120: calc(120px * var(--scale) / 100);
    --px-125: calc(125px * var(--scale) / 100);
    --px-130: calc(130px * var(--scale) / 100);
    --px-135: calc(130px * var(--scale) / 100);
    --px-140: calc(140px * var(--scale) / 100);
    --px-145: calc(145px * var(--scale) / 100);
    --px-150: calc(150px * var(--scale) / 100);
    --px-155: calc(155px * var(--scale) / 100);
    --px-157: calc(157px * var(--scale) / 100);
    --px-160: calc(160px * var(--scale) / 100);
    --px-165: calc(165px * var(--scale) / 100);
    --px-175: calc(175px * var(--scale) / 100);
    --px-180: calc(180px * var(--scale) / 100);
    --px-185: calc(185px * var(--scale) / 100);
    --px-190: calc(190px * var(--scale) / 100);
    --px-200: calc(200px * var(--scale) / 100);
    --px-210: calc(210px * var(--scale) / 100);
    --px-220: calc(220px * var(--scale) / 100);
    --px-225: calc(225px * var(--scale-keyboard) / 100);
    --px-228: calc(228px * var(--scale) / 100);
    --px-250: calc(250px * var(--scale) / 100);
    --px-270: calc(270px * var(--scale) / 100);
    --px-290: calc(290px * var(--scale) / 100);
    --px-300: calc(300px * var(--scale) / 100);
    --px-320: calc(320px * var(--scale) / 100);
    --px-340: calc(340px * var(--scale) / 100);
    --px-350: calc(350px * var(--scale) / 100);
    --px-380: calc(380px * var(--scale) / 100);
    --px-400: calc(400px * var(--scale) / 100);
    --px-440: calc(440px * var(--scale) / 100);
    --px-450: calc(450px * var(--scale) / 100);
    --px-460: calc(460px * var(--scale) / 100);
    --px-480: calc(480px * var(--scale) / 100);
    --px-500: calc(500px * var(--scale) / 100);
    --px-550: calc(550px * var(--scale) / 100);
    --px-570: calc(570px * var(--scale) / 100);
    --px-600: calc(600px * var(--scale) / 100);
    --px-620: calc(620px * var(--scale) / 100);
    --px-640: calc(640px * var(--scale) / 100);
    --px-650: calc(650px * var(--scale) / 100);
    --px-690: calc(690px * var(--scale) / 100);
    --px-700: calc(700px * var(--scale) / 100);
    --px-710: calc(710px * var(--scale) / 100);
    --px-800: calc(800px * var(--scale) / 100);
    --px-900: calc(900px * var(--scale) / 100);
    --px-950: calc(950px * var(--scale) / 100);
    --px-970: calc(970px * var(--scale) / 100);
    --px-1100: calc(1100px * var(--scale) / 100);
    --px-1200: calc(1200px * var(--scale) / 100);
}

:root {
    --screen-sm-min: 768px;
    --screen-md-min: 992px;
    --screen-lg-min: 1200px;
    /*------------------------------------------------ */
    --image-tech-size: 90px;
    --image-tech-size-minus: -50px;
    /*------------------------------------------------ */
    --image-adjust-size: 40px;
    /*------------------------------------------------ */
    --size-ticket-salon-h: 125px;
    --size-ticket-salon-w: 165px;
    /*------------------------------------------------ */
    --size-tech-salon-h: 165px;
    --size-tech-salon-w: 118px;
    /* ------------------------------------------------ */
    --ticket-ins-bgr: #dbdbdb;
    --ticket-ins-bgr-number: #a7a7a7;
    --ticket-ins-border: #a7a7a7;
    /* ------------------------------------------------ */
    --ticket-wait-bgr: #e6e5f3;
    --ticket-wait-bgr-number: #9b97cb;
    --ticket-wait-border: #8b85ca;
    /* ------------------------------------------------ */
    --ticket-appointment-bgr: #daf5f9;
    --ticket-appointment-bgr-number: #42ccdd;
    --ticket-appointment-border: #00bed6;
    /* ------------------------------------------------ */
    --salon-center-large: normal normal 600 14px/20px Montserrat;
    --salon-center-large-client: normal normal 600 14px/15px Montserrat;
    /* ------------------------------------------------ */
    --salon-center-large-header: normal normal 600 12px/20px Montserrat;
    /* ------------------------------------------------ */
    --salon-center-normal: normal normal 500 11px/15px Montserrat;
    /* ------------------------------------------------ */
    --salon-center-normal-600: normal normal 600 11px/13px Montserrat;
    /* ------------------------------------------------ */
    --salon-center-large-14: normal normal 500 13px/13px Montserrat;
    /* ------------------------------------------------ */
    --mg-color-green: #93d500;
    --mg-color-green-thin: #93d50080;
    --mg-color-dark-green: #00bed6;
    --mg-color-purple: #8b85ca;
    --mg-color-yellow: #ffcd00;
    --mg-color-orange: #f28500;
    --mg-color-white: #fff;
    --mg-color-gray: #eee;
    --mg-color-dark-gray: #a7a7a7;
    --mg-color-black: #505050;
    /* ------------------------------------------------ */
    --size-popup-h: 630px;
    --size-popup-w: 1200px;
    /* ------------------------------------------------ */
    --left-switch: 2%;
}

html,
body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
}

body {
    touch-action: manipulation !important;
    -ms-touch-action: manipulation !important;
    margin: 0;
    padding: 0;
    background-color: #ecf0f5;
    font-weight: 100;
    font-style: normal;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #7a878e;
    height: 100vh;
    width: 100vw;
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.form-search-all-view {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.navbar {
    background-color: #00bed6;
    border-color: transparent;
    height: 45px;
    width: 100%;
    display: block;
}

.navbar-brand img {
    height: 40px;
}

.navbar-nav .nav-link {
    color: #fff;
}

.wspace_header_main {
    width: 230px;
    min-width: 230px;
}

#left-panel {
    width: 250px;
    left: 0px;
    top: 0px;
    height: 100%;
    max-height: 100%;
    position: fixed;
    z-index: 999;
    display: block;
    background-color: #fff;
    font-size: 13px;
}

#left-panel {
    overflow: hidden;
    position: fixed;
    top: 66px;
}

.main-node {
    max-height: calc(100% - 30px);
    height: calc(100% - 30px);
    overflow-y: auto;
    position: relative;
}

#content {
    height: 100%;
    width: 100%;
}

.header-main-content {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 24px;
    border-color: transparent;
    border-width: 1px 0;
    -webkit-font-smoothing: antialiased;
    font: 600 18px/1.56 "Open sans", "lucida grande", "Segoe UI", arial, verdana, tahoma, "Hiragino Kaku Gothic ProN", "Osaka", "Meiryo UI", "Yu Gothic UI", sans-serif;
    color: rgba(0, 0, 0, 0.9);
}

.body-main-widget {
    display: block;
    background: #f7f7f7;
    padding-bottom: 16px;
    padding-left: 16px;
}

.box-home {
    margin-right: 16px;
    margin-top: 16px;
}

.content-btn {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 120px;
    background: white;
    border: solid 1px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    padding: 0;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.9);
    text-align: center;
}

.icon-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 4px;
}

    .icon-btn img {
        width: 50px;
    }

.title-btn {
    -webkit-font-smoothing: antialiased;
    font: 400 12px/1.66666667 "Open sans", "lucida grande", "Segoe UI", arial, verdana, tahoma, "Hiragino Kaku Gothic ProN", "Osaka", "Meiryo UI", "Yu Gothic UI", sans-serif;
    line-height: 1.33;
}

.wr-footer {
    position: absolute;
    bottom: 0px;
}

.w-210 {
    width: 210px;
}

.panel {
    background: #fff;
}

.panel-heading {
    position: relative;
    height: 42px;
    padding: 0;
    color: #4d627b;
}

.panel-control {
    height: 100%;
    position: relative;
    float: right;
    padding: 0 15px 0 5px;
}

.panel-title {
    font-weight: normal;
    padding: 0 20px 0 20px;
    font-size: 1.15em;
    line-height: 42px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-body {
    padding: 15px 20px 25px;
}

.panel-turn-manager {
    height: 100vh;
    width: 100%;
}

.panel-turn {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.07);
    /*border-radius: 3px;*/
    box-shadow: none;
    color: inherit;
    /*margin: 10px 0 10px 0;*/
}

.header-turn {
    padding: 5px 10px 5px 10px;
    background-color: #efefef;
    color: #fff;
}

.header-turn-has {
    background: #2db1f3;
}

.img-turn {
    width: 44px;
}

.body-turn {
    padding: 5px 10px 5px 10px;
    font-size: 10px;
    padding-top: 15px;
    padding-right: 0px;
    font-size: 10px;
    color: #505050;
    font-weight: bold;
}

.footer-turn {
    /*padding-top: 10px;*/
    /*display: flex;*/
    line-height: 22px;
    font-size: 12px;
}

.t1 {
    display: inline-block;
    float: left;
}

.t2 {
    display: inline-block;
    float: right;
}

.t-r {
    float: left;
    padding-left: 10px;
    display: block;
    width: 100%;
}

.t-h {
    line-height: 14px;
    display: block;
}

.content-turn {
    display: flex;
    color: #000;
}

.turn-control {
    height: 100%;
    position: relative;
    float: right;
    padding: 0 15px 0 5px;
}

    .turn-control:before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        left: -1em;
        position: relative;
    }

.title-turn {
    text-align: left;
    color: #000;
    font-size: 12px;
    font-weight: 600;
}

.rounded225 {
    border-radius: 2.25rem !important;
}

.tab-base .tab-content {
    background-color: #fff;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    /*padding: 15px;*/
}

.tab-content > .active {
    display: block;
    position: relative;
}

.tab-base .nav-tabs.tabs-right {
    text-align: right;
}

.tab-base .nav-tabs {
    border: 0;
}

    .tab-base .nav-tabs.tabs-right > li {
        float: none;
        display: inline-block;
        margin-right: -2px;
        cursor: pointer;
    }

    .tab-base .nav-tabs > .active > a,
    .tab-base .nav-tabs > .active a:hover,
    .tab-base .nav-tabs > .active > a:focus {
        border-color: transparent;
    }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #4d627b;
    border-color: transparent;
    border-bottom-color: transparent;
}

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:focus,
    .nav-tabs > li.active > a:hover {
        color: #555;
        cursor: default;
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
        text-decoration: none;
    }

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

.nav-tabs li a {
    color: #7a878e;
    border-radius: 3px 3px 0 0;
}

    .nav-tabs li a:hover {
        text-decoration: none;
    }

.btn-group-vertical > .btn-group:after,
.btn-group-vertical > .btn-group:before,
.btn-toolbar:after,
.btn-toolbar:before,
.clearfix:after,
.clearfix:before,
.container-fluid:after,
.container-fluid:before,
.container:after,
.container:before,
.dl-horizontal dd:after,
.dl-horizontal dd:before,
.form-horizontal .form-group:after,
.form-horizontal .form-group:before,
.modal-footer:after,
.modal-footer:before,
.modal-header:after,
.modal-header:before,
.nav:after,
.nav:before,
.navbar-collapse:after,
.navbar-collapse:before,
.navbar-header:after,
.navbar-header:before,
.navbar:after,
.navbar:before,
.pager:after,
.pager:before,
.panel-body:after,
.panel-body:before,
.row:after,
.row:before {
    display: table;
    content: " ";
}

.btn-group-vertical > .btn-group:after,
.btn-toolbar:after,
.clearfix:after,
.container-fluid:after,
.container:after,
.dl-horizontal dd:after,
.form-horizontal .form-group:after,
.modal-footer:after,
.modal-header:after,
.nav:after,
.navbar-collapse:after,
.navbar-header:after,
.navbar:after,
.pager:after,
.panel-body:after,
.row:after {
    clear: both;
}

.tab-cus-r {
    display: block;
}

.modal-full {
    min-width: 90%;
    /*margin: 0;*/
}

    .modal-full .modal-content {
        min-height: 90vh;
    }

#txtPhoneFC {
    text-align: center;
}

.height-400 {
    height: 400px;
    overflow-y: auto;
}

.wrapper-modal {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: rgba(255, 255, 255, 0.6);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: none;
}

.display-flex {
    display: flex !important;
}

.ca-header {
    position: relative;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    background: #333;
    color: #fff;
    border-radius: 3px 3px 0 0;
    background: #4a9ff9;
    font-size: 16px;
}

.ca-body {
    height: calc(100% - 45px);
    background: #ecf0f5;
    padding: 10px;
}

.ca-item {
    left: 0px;
    top: 0px;
    transform: translateX(0px) translateY(0px);
    display: block;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    margin: 10px 0 10px 0;
}

.ca-title {
    /*position: relative;
    padding: 10px 5px 10px 10px;
    background: #fff;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    -webkit-box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
    box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
    text-align: center;
    min-height: 70px;
    height: 70px;
    color: #4d627b;*/
}

    /*.ca-title.active{
    background:#03A9F4;
    color:#fff;
}*/

    .ca-title.active img {
        background: #00bed6;
        color: #fff;
        border-radius: 50%;
    }

    .ca-title.active .p-cate-2 {
        border: none;
    }

.ca-title-edit.active .p-cate-2 {
    border: none;
}

.ca-title-edit.active img {
    background: #00b6cc;
    color: #fff;
    border-radius: 50%;
}

.ca-title-edit.focus {
    background: #ff82b1;
    color: #fff;
}

.panel-body-item-service {
    margin: 0 auto 0 auto;
    text-align: center;
    padding: 10px;
    font-size: 16px;
}

.row-panel-item {
    border-radius: 4px;
    cursor: pointer;
    -webkit-box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
    margin: 5px 0px 5px 0px;
}

.datepicker td,
.datepicker th {
    text-align: center;
    width: 50px !important;
    height: 50px !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: none;
}

.btn-default,
.btn-default:focus {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.07) !important;
    color: #7a878e;
    cursor: pointer;
}

.item-turn-name-box {
    -webkit-line-clamp: 2;
    height: 47px;
}

.item-turn-name {
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    font-size: 14px;
    color: #4d627b;
}

.item-turn-price {
    color: #dc3545 !important;
    font-size: 15px;
}

.icon-2x {
    font-size: 2em;
    cursor: pointer;
}

.text-tech {
    font-size: 12px;
}

.input-sm {
    font-size: 11px;
    height: 30px;
}

.bottom-scheduler {
    text-align: right;
    position: absolute;
    bottom: 0px;
    /* display: inline-block; */
    width: 98%;
}

/*.modal {
    z-index: 999999999;
}*/

.timepicker-picker .table-condensed {
    margin: auto;
}

.timepicker-minutes .table-condensed {
    margin: auto;
}

    .timepicker-minutes .table-condensed .minute {
        padding: 5px;
    }

.timepicker-hour,
.timepicker-minute {
    padding: 10px !important;
}

.timepicker-hours .table-condensed {
    margin: auto;
}

    .timepicker-hours .table-condensed .hour {
        padding: 5px;
    }

.btn-sch-h:hover {
    background: #545b62;
    color: #fff !important;
}

.e-status-icon {
    position: absolute;
    right: -22px;
}

.e-satatus-wrap {
    text-align: center;
    padding-bottom: 5px !important;
    margin-bottom: 10px;
}

    .e-satatus-wrap .e-text-ellipsis {
        font-size: 20px;
    }

.btn-v2-primary,
.btn-v2-primary:focus {
    background-color: #294f75;
    border-color: #25476a !important;
    color: #fff;
}

    .btn-v2-primary:hover {
        background-color: #1c3550 !important;
        border-color: #1c3550 !important;
        color: #fff !important;
    }

.btn-v2-default,
.btn-v2-default:focus {
    background-color: #fff !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
    color: #7a878e !important;
}

.btn-v2 {
    cursor: pointer;
    background-color: transparent;
    color: inherit;
    padding: 6px 12px;
    border-radius: 3px;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.475;
    vertical-align: middle;
    transition: all 0.25s;
}

    .btn-v2:active {
        outline: 0 !important;
    }

button,
button:focus {
    outline: 0 !important;
}

.toast-dot {
    background-color: #ff5583;
    width: 10px;
    height: 10px;
    top: -1px;
    background-size: 12px;
    position: relative;
    border-radius: 8px;
    margin: 1px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    margin-top: 3px;
}

.toast-waring {
    background-color: #ffb80f !important;
}

.toast-danger {
    background-color: #f55145 !important;
}

.toast-success {
    background-color: #92c755;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 0.65;
}

input[type="button"] {
    outline: none;
}

a.button {
    outline: none;
}

input[type="button"]::-moz-focus-inner {
    border: 0;
}

#process-apt-block .e-quick-popup-wrapper {
    min-width: inherit;
    max-width: inherit;
}

#process-apt-block .e-status-icon {
    right: 0px;
}

.w80 {
    width: 80px;
}

.status-booking {
    background-color: rgb(0, 255, 0);
}

.status-inservice {
    background-color: rgb(0, 255, 255);
}

.tab-cus-item:hover {
    text-decoration: none;
}

.group-apt {
    height: 110px;
    border: 1px solid #8bc34a;
    overflow: hidden;
    color: #7a878e;
}

    .group-apt .panel-heading {
        background-color: #8bc34a;
        height: 30px;
    }

    .group-apt .panel-title {
        color: #fff;
        padding: 0;
        line-height: inherit;
        padding: 4px 5px 0px 5px;
        font-size: 14px !important;
    }

    .group-apt .panel-body {
        padding: 4px 5px 0px 5px;
        color: #666;
    }

.f-w600 {
    font-weight: 600;
}

.f-size12 {
    font-size: 12px;
}

.flex-apt {
    height: 100vh;
    display: inline-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    align-items: stretch;
    -webkit-align-items: stretch;
    align-content: flex-start;
    padding-left: 10px;
    padding-right: 10px;
}

.before-process-turn-apt {
    display: -webkit-box;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
}

.tooltipster-sidetip .tooltipster-content {
    background-color: #fff;
    color: #000 !important;
}

.e-btn.e-flat,
.e-css.e-btn.e-flat {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.87);
}

.close-scheduler-pop {
    position: absolute;
    right: 0px;
    top: 5px;
}

.e-control,
.e-css {
    font-size: 14px;
    font-weight: normal;
}

.tooltipster-base {
    max-width: 300px !important;
}

.e-button {
    display: inline-block;
    padding: 7px 9px 11px;
    width: calc(50% - 1px);
    outline: none;
    background: none;
    background: none;
    border: none;
    cursor: pointer;
    float: none;
    color: #000;
}

.e-button33 {
    display: inline-block;
    padding: 5px 10px;
    width: calc(33% - 1px);
    outline: none;
    background: none;
    border: none;
    cursor: pointer;
    float: none;
    color: #000;
}

.e-popup-footer {
    border-top: 1px solid #e5e5e5;
    font-size: 0;
    display: block;
}

.e-button-content {
    height: 24px;
    font-size: 12px;
    line-height: 2;
}

.e-vertical-line {
    background: #e5e5e5;
    width: 1px;
    height: 14px;
    vertical-align: middle;
    display: inline-block;
    margin-top: -7px;
}

.footer-apt-turn {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
}

.btn-turn img {
    width: 145px;
}

.btn-turn:hover {
    text-decoration: none;
}

.c-content-turn {
    min-height: 100%;
    max-height: 100%;
}

.w-270 {
    width: 270px;
    height: 270px;
}

.flex-parent.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    z-index: 9999;
    background: #fff;
    height: 100vh;
    place-content: flex-start !important;
    background: #ecf0f5;
    padding-top: 15px;
    padding-left: 10px;
}

.box-turn.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    z-index: 9999;
    background: #fff;
    height: 100vh;
    place-content: flex-start !important;
    background: #ecf0f5;
    padding-top: 0;
    padding-left: 0;
    max-width: 100%;
}

    .box-turn.fullscreen .flex-parent {
        place-content: flex-start;
        height: 100vh;
    }

.fullscreen-techturn {
    cursor: pointer;
}

.fullscreen-techturn-after {
    cursor: pointer;
}

.flex-parent-turn-apt {
    height: calc(100vh - 200px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow-x: scroll;
}

.wl-heading {
    position: relative;
    padding: 0;
    color: #4d627b;
}

.wl-control {
    height: 100%;
    position: relative;
    float: right;
    padding: 0 15px 0 5px;
}

.wl-title {
    font-weight: normal;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

.wl-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.wl-group-item {
    position: relative;
    display: block;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

    .wl-group-item:hover {
        background: oldlace;
        cursor: pointer;
    }

.border-le-orange {
    border-left: 3px solid #f0ad4e;
}

.border-le-green {
    border-left: 3px solid #8bc34a;
}

.flex-parent-turn-inservice {
    height: calc(100vh - 180px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow-x: auto;
    flex-flow: column wrap;
    place-content: flex-start;
    align-items: stretch;
    background-color: #fff;
    padding: 5px;
}

.flex-child-turn-inservice {
    color: #ffffff;
    width: 230px;
    height: 135px;
    overflow: hidden;
    margin: 3px;
}

.group-apt-inservice {
    height: 135px;
}

.inservice-content {
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    float: none;
}

.inservice-content-c {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: normal;
    overflow-wrap: normal;
    text-align: left;
    color: rgb(96, 103, 112);
}

.footer-left-payment {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 120px;
}

.f-1 {
    background-color: #f5f5f5;
    height: 120px;
    margin-right: 0px;
    margin-left: 0px;
}

.left-payment {
    min-height: calc(100vh - 90px);
    max-height: calc(100vh - 90px);
}

.p1 {
    padding: 5px;
    text-align: center;
    background: #bcbec0;
    color: #fff;
}

.p2 {
    background: #a7a9ac;
    color: #25476a;
    margin-left: 0;
    margin-right: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

.payment-4 {
    color: #bcbec0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    position: absolute;
    bottom: 120px;
    width: 100%;
}

.payment-4-1 {
    background-color: #a7a9ac;
    height: 120px;
    margin-right: 0px;
    margin-left: 0px;
    width: 100%;
    display: block;
    color: #28496b;
}

.payment-3 {
    min-height: calc(100vh - 445px);
    max-height: calc(100vh - 445px);
}

.footer-center-payment {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
}

.f2 {
    background: #0c3868;
    height: 60px;
    font-size: 24px;
    color: #fff;
}

.f2-s {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.payment-5 {
    min-height: calc(100vh - 100px);
    max-height: calc(100vh - 100px);
    text-align: center;
}

.p-cate {
    position: relative;
}

.p-cate-1 {
    border: 5px solid #1f3b57;
    margin: 5px 15px 5px 15px;
    position: relative;
}

.p-cate-2 {
    border: 5px solid #d1d2d2;
    height: 95px;
    background: #25476a;
}

.p-cate-3 {
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
}

.footer-right-payment {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
}

.f3 {
    background-color: #f5f5f5;
    height: 60px;
    margin-right: 0px;
    margin-left: 0px;
}

.right-payment {
    padding-left: 0px;
    position: relative;
}

.payment-6 {
    background-color: #fff;
    margin-right: -15px;
    overflow: auto;
}

.btn-payment {
    border: 2px solid #25476a;
    height: 60px;
    background: #fafafa;
    display: block;
    overflow: hidden;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 0;
    padding: 0px;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    outline: none;
}

.btn-payment-quick {
    border: 2px solid #ef8a24;
    height: 60px;
    background: #fff3d4;
    display: block;
    overflow: hidden;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 0;
    padding: 0px;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    outline: none;
}

.btn-payment:focus,
.btn-payment:active,
.btn-payment:hover {
    outline: none !important;
    background: #25476a;
    color: #fff;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
}

.btn-payment-quick:focus,
.btn-payment-quick:active,
.btn-payment-quick:hover {
    outline: none !important;
    background: #ef8a24;
    color: #fff;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
}

.btn-payment:focus > .top-but,
.btn-payment:active > .top-but,
.btn-payment:hover > .top-but {
    border: 1px solid #5d7691;
}

.top-but {
    height: 24px;
    margin: 2px;
    background: #25476a;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    border: 1px solid transparent;
    line-height: 19px;
}

.top-but-quick {
    height: 24px;
    margin: 2px;
    background: #ffab3c;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
    border: 1px solid transparent;
    line-height: 19px;
}

.footer-but {
    height: 24px;
}

.box-turn {
    padding-left: 0;
    padding-right: 0;
    height: calc(100vh - 170px);
    position: relative;
}

.right-turn {
    padding-left: 0;
    padding-right: 0;
}

.flex-parent {
    height: calc(100vh - 170px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow-x: scroll;
    flex-flow: column wrap;
    place-content: stretch flex-start;
    align-items: stretch;
    background-color: #fff;
    padding: 5px;
    padding-left: 0px;
    align-content: flex-start;
    padding-top: 5%;
}

.flex-child {
    background: white;
    width: 90px;
    height: 95px;
    overflow: hidden;
    border: 1px solid #505050;
}

#CM_ManagerClient.flex-child {
    border: none !important;
}

.span-text {
    font-weight: normal;
    color: #fff;
    padding: 0 20px 0 20px;
    font-size: 1.15em;
    line-height: 42px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.tab-r {
    height: calc(100vh - 172px);
    overflow: hidden;
    margin-top: -4px;
    margin-left: 4px;
}

#demo-rgt-tab-3 {
    position: relative;
    min-height: 200px !important;
    max-height: calc(100vh - 172px);
    height: 100vh;
}

.pd-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.pd-5 {
    padding-left: 5px;
    padding-right: 5px;
}

.btn-pos-default {
    color: #7a878e;
}

    .btn-pos-default:hover,
    .btn-pos-default:focus,
    .btn-pos-default:active {
        outline: none !important;
        box-shadow: none !important;
        background: #ededed;
    }

.mar-no {
    margin: 0 !important;
}

.list-group.bg-trans .list-group-item:not(.active):not(.disabled) {
    background-color: transparent;
    border-color: transparent;
    color: inherit;
}

.mar-no .list-group-item {
    padding: 5px;
}

.tab-cus-r-panel.active {
    background-color: #25476a !important;
    color: #fff;
}

.btn-scheduler {
    width: 145px;
    height: 57px;
    position: relative;
    display: inline-block;
    padding: 0px;
    margin: 0px;
}

.sch-1 {
    width: 145px;
    height: 50px;
    position: relative;
    padding: 0px;
    margin: 0px;
    background: #ecf0f5;
    margin-top: 5px;
    float: right;
    margin-left: 5px;
    -webkit-box-shadow: 6px 9px 7px -10px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 6px 9px 7px -10px rgba(0, 0, 0, 0.75);
    box-shadow: 6px 9px 7px -10px rgba(0, 0, 0, 0.75);
    outline: none;
}

    .sch-1:hover {
        -webkit-box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
        box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
    }

.sch-2 {
    height: 40px;
    width: 40px;
    background-color: #25476a;
    display: inline-block;
    float: left;
    margin: 5px 5px 5px 5px;
    position: relative;
}

    .sch-2 img {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-box-shadow: 6px 9px 7px -10px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 6px 9px 7px -10px rgba(0, 0, 0, 0.75);
        box-shadow: 6px 9px 7px -10px rgba(0, 0, 0, 0.75);
    }

.sch-3 {
    display: inline-block;
    float: left;
    padding-left: 10px;
    width: 84px;
    font-size: 11px;
    height: 50px;
    position: absolute;
}

.sch-4 {
    width: 84px;
    line-height: normal;
    word-wrap: break-word;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #385778;
    font-weight: bold;
}

.sch-5 {
    position: absolute;
    width: 145px;
    height: 50px;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.left-make-apt {
    background-color: #fff;
    position: relative;
    padding-left: 0px;
    padding-right: 0px;
    min-height: calc(100vh - 90px);
    max-height: calc(100vh - 90px);
}

.footer-left-make {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
}

.span-ok {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
}

.btn-ok-make {
}

.ok-1 {
    margin: 2px;
    background: #25476a;
    height: 52px;
    position: relative;
    padding: 2px;
}

.ok-2 {
    position: relative;
    border: 1px solid #fff;
    height: 48px;
}

.btn-make:focus,
.btn-make:active,
.btn-make:hover {
    outline: none !important;
    background: #25476a !important;
    color: #fff;
}

    .btn-make:focus .ok-2,
    .btn-make:active .ok-2,
    .btn-make:hover .ok-2 {
        border: none;
    }

    .btn-make:focus .ok-1,
    .btn-make:active .ok-1,
    .btn-make:hover .ok-1 {
        background: #25476a;
    }

.m1 {
    background: #fff;
    color: #656565;
    padding-left: 15px;
    border-bottom: 1px dotted #ecf0f5;
}

.m1-1 {
    width: 100%;
    padding: 10px;
}

.footer-top-left-make {
    background: #fff;
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.bl-name {
    background-color: #e9ecef;
    display: inline-block;
    width: 100%;
    height: 30px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-color: #fff;
    background-clip: padding-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    float: left;
}

.left-lb {
    display: inline-block;
    float: left;
    font-size: 13px;
    line-height: 20px;
    float: right;
}

.right-lb {
    border: none;
    display: inline-block;
    border-radius: 5px;
    margin-top: -4px;
    background: #fff;
    float: right;
    border: 1px solid #ddd;
    margin-right: -10px;
    height: 24px;
}

.panel-from {
    padding-top: 5px;
    padding-bottom: 0px;
    border-left: 1px solid #ddd;
}

.date-make {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.right-f {
    padding-left: 0;
}

.footer-top-left-make .datepicker-inline {
    width: 200px;
}

.l-1t {
    position: relative;
    height: 60px;
    background: #0c3868;
}

.l-t1s {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
}

.ca-body {
    width: 100%;
    min-height: calc(100vh - 127px);
    max-height: calc(100vh - 127px);
    overflow: hidden;
    margin-left: 0;
    margin-right: 15px;
    background: #fff;
    border-left: 1px solid #58595a;
    border-right: 1px solid #58595a;
}

.row-fix {
    margin-right: 0;
    margin-left: 0;
}

.row-make-service {
    max-height: calc(100vh - 415px);
    min-height: calc(100vh - 415px);
    overflow: visible;
    position: relative;
    margin-right: 15px;
    margin-left: 15px;
    background: #fff;
}

.removeservice {
    padding-left: 10px;
    padding-top: 10px;
}

.removeservice-edit {
    padding-left: 10px;
    padding-top: 10px;
}

.modal-content-process-sm .modal-header {
    background: #0c3868;
    color: #fff;
}

.modal-content {
    border-radius: 0;
}

.modal-header {
    border-radius: 0;
}

.close-modal {
    color: #fff !important;
}

.modal-content {
    border: none;
}

.num-1 {
    background-color: #fff;
    position: relative;
    border-radius: 50%;
}

    .num-1:hover {
        background-color: #fff;
        cursor: pointer;
    }

        .num-1:hover .num-2 {
            border: 2px solid #999;
            cursor: pointer;
        }

.num-2 {
    width: 39px;
    height: 39px;
    border: 2px solid #d3d3d3;
    position: relative;
    border-radius: 50%;
}

.num-3 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #d3d3d3;
}

.fr-g {
    margin-top: 20px;
}

.modal-content-process .modal-header {
    background: #0c3868;
    color: #fff;
}

.modal-content-large .modal-header {
    background: #0c3868;
    color: #fff;
}

.font-14 {
    font-size: 14px;
}

.ui-span-l-cus-infor {
    float: left;
}

.ui-span-r-cus-infor {
    float: right;
    color: #4d627b;
}

.clear-both {
    clear: both;
}

.ui-left-cus-name {
    text-align: center;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
}

.ui-left-cus-infor {
    margin-top: 5px;
}

.nav-left-scheduler {
    float: left;
    display: inline-block;
}

.box-scheduler {
    min-height: calc(100vh - 193px);
    max-height: calc(100vh - 193px);
    overflow: auto;
}

.col-fix {
    padding-left: 0px;
    padding-right: 0px;
}

.square {
    border-radius: 5px;
    float: left;
    width: 25px;
    background-color: rgb(63, 81, 181);
    margin-right: 5px;
}

.fz16 {
    font-size: 16px !important;
}

.t-ico-l {
    display: inline-block;
}

.t-h-r {
    display: inline-block;
}

.popover-header {
    display: none;
}

.sc-tbl tr {
    border-bottom: 1px dashed #737373;
}

    .sc-tbl tr:last-child {
        border-bottom: none;
    }

.sc-tbl thead th {
    border-bottom: 1px solid #737373 !important;
    border-top: 1px solid #737373 !important;
}

.sc-tbl .sc-td1,
.sc-tbl .sc-td2,
.sc-tbl .sc-td3 {
    border: none !important;
    color: #505050;
    font-weight: 500;
    vertical-align: middle;
    font-family: Montserrat;
    font-size: 10px;
}

.sc-tbl .sc-td4 {
    color: #00bed6;
    font-weight: 600;
    vertical-align: middle;
    font-size: 10px;
    font-family: Montserrat;
}

body #schedule .popover > .arrow {
    display: block !important;
    background: rgba(0, 0, 0, 0.2);
    height: 1px;
    align-items: center;
    justify-content: center;
}

body #schedule .popover .arrow::before,
body #schedule .popover .arrow::after {
    content: none;
}

#loading-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(167, 167, 167, 0.3);
    z-index: 300;
    display: none !important;
}

#loading-text {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ffdd00;
    width: 100px;
    height: 30px;
    margin: -40px 0px 0px -55px;
    text-align: center;
    font-family: "PT Sans Narrow", sans-serif;
    font-size: 20px;
}

#loading-content {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin: -73px 0 0 -51px;
}

    #loading-content:after {
        content: "";
        position: absolute;
        border: 3px solid #0f0;
        left: 15px;
        right: 15px;
        top: 15px;
        bottom: 15px;
    }

    #loading-content:before {
        content: "";
        position: absolute;
        border: 3px solid #00f;
        left: 5px;
        right: 5px;
        top: 5px;
        bottom: 5px;
    }

#loading-content {
    border: 3px solid transparent;
    border-top-color: white;
    border-bottom-color: white;
    border-radius: 50%;
    -webkit-animation: loader 2s linear infinite;
    -moz-animation: loader 2s linear infinite;
    -o-animation: loader 2s linear infinite;
    animation: loader 2s linear infinite;
}

    #loading-content:before {
        border: 3px solid transparent;
        border-radius: 50%;
        -webkit-animation: loader 3s linear infinite;
        -moz-animation: loader 2s linear infinite;
        -o-animation: loader 2s linear infinite;
        animation: loader 3s linear infinite;
    }

    #loading-content:after {
        border: 3px solid transparent;
        border-top-color: white;
        border-bottom-color: white;
        border-radius: 50%;
        -webkit-animation: loader 1.5s linear infinite;
        animation: loader 1.5s linear infinite;
        -moz-animation: loader 2s linear infinite;
        -o-animation: loader 2s linear infinite;
    }

.need-popover {
    z-index: 1030 !important;
}

    .need-popover .arrow {
        display: none;
    }

    .need-popover .popover-body {
        padding: 0;
    }

.GCmGe > a {
    padding: 5px 10px;
    text-align: center;
    color: #505050;
    display: block;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
}

    .GCmGe > a:hover {
        color: #00bedf;
        cursor: pointer;
    }

.s8837 {
    border-bottom: 1px dotted #999;
}

.mx7eu {
    height: calc(100vh - 98px);
    overflow: auto;
    font-size: 13px;
}

.hd-T9I2k {
    font-size: 16px;
    color: #00bed6;
    margin-top: 10px;
    font-weight: bold;
}

.WXXzI {
    border: 1px solid #999;
    border-radius: 10px;
    margin-top: 20px;
    padding: 0;
}

.KP420 {
    color: #00bed6;
}

.T9I2k {
    border-bottom: 1px solid #999;
    padding: 10px 15px;
}

.DTgx1 {
    border-bottom: 1px solid #999;
    padding: 10px 15px;
    text-align: center;
}

.h3-DTgx1 {
    font-size: 16px;
    text-transform: uppercase;
    color: #00bed6;
}

.text-2-DTgx1 {
    margin-bottom: 15px;
}

.box-phone-DTgx1,
.box-email-DTgx1 {
    margin-bottom: 15px;
}

.WdJdm {
    border-bottom: 1px solid #999;
    padding: 10px 15px;
    text-align: center;
}

.input-WdJdm {
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    text-align: center;
}

.how-WdJdm {
    text-align: center;
}

.span-XBpHv {
    border: 1px solid #999;
    padding: 5px;
    text-align: center;
    display: block;
    border-radius: 5px;
    text-transform: uppercase;
    cursor: pointer;
}

.span-XBpHvt {
    padding: 5px;
    text-align: center;
    display: block;
    text-transform: uppercase;
    cursor: pointer;
}

.XBpHv {
    width: 180px;
    display: block;
}

.check-reasons-WdJdm {
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border: 1px solid #999;
    border-radius: 100%;
    background: none;
    margin: 5px;
    display: inline-block;
}

    .check-reasons-WdJdm.active {
        border: 1px solid #00bed6;
    }

.check-o-reasons-WdJdm {
    content: "";
    width: 12px;
    height: 12px;
    background: #ffffff;
    position: absolute;
    top: 11px;
    left: 11px;
    border-radius: 100%;
}

.check-reasons-WdJdm.active .check-o-reasons-WdJdm {
    background: #00bed6;
}

.kQ3hk {
    display: inline-block;
}

.label-WdJdm {
    font-size: 14px;
}

.bnt-spmxY {
    line-height: 20px;
    color: #fff;
    background: #00bed6;
    text-align: center;
    display: block;
    width: 100%;
}

.l-T9I2k {
    display: inline-block;
    width: 70%;
}

.r-T9I2k {
    display: inline-block;
    float: right;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 83px;
}

.img-r-T9I2k {
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

.cate-XBpHv {
    position: absolute;
    top: 0;
    width: 180px;
    background: #fff;
    border: 1px solid #999;
    border-radius: 5px;
}

.span-XBpHvt:not(:last-child) {
    border-bottom: 1px dotted #999;
}

.rNbxW {
    text-align: center;
    color: #00bed6;
}

.l-uHnf6 {
    display: inline-block;
    width: 100px;
    color: #505050;
    font-size: 14px;
}

.r-uHnf6 {
    display: inline-block;
    color: #505050;
    font-size: 14px;
}

.ZGf6e {
    padding: 15px;
    padding-bottom: 25px;
}

.CLxNw {
    padding: 10px;
    border: 1px dashed #505050;
    color: #505050;
    white-space: pre-wrap;
    font-size: 14px;
}

.zU6ML {
    color: #505050;
    text-align: center;
    margin-top: 20px;
}

@-webkit-keyframes loaders {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#content-wrapper {
    color: #fff;
    position: fixed;
    left: 0;
    top: 20px;
    width: 100%;
    height: 100%;
}

.opacity3 {
    opacity: 0.3;
}

/*#header {
    width: 800px;
    margin: 0 auto;
    text-align: center;
    height: 100px;
    background-color: #666;
}

#content {
    width: 800px;
    height: 1000px;
    margin: 0 auto;
    text-align: center;
    background-color: #888;
}*/

.bg-group {
    background-color: rgb(240, 91, 132) !important;
}

.cursor-pointer {
    cursor: pointer;
}

.panelImage {
    width: 150px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 20px;
}

.flex-pos-item {
    overflow: hidden !important;
}

.item-col {
    width: 33% !important;
}

.header-col-item {
    padding-bottom: 8px;
    text-align: center;
    min-height: 35px;
}

.column-title {
    text-align: center;
    border: none !important;
    font-size: 14px;
    font-weight: bold;
    color: #505050;
    background: transparent;
}

.body-col-item {
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    position: relative;
    height: calc(100vh - 230px);
    padding: 5px;
}

.item-1 {
    width: var(--px-110);
    height: var(--px-75);
    border: 1px dashed #999;
    position: relative;
    margin: 5px 5px 10px 5px;
}

.item-1-1 {
    height: var(--px-73);
    position: relative;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.item-1-1-1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #505050;
    text-align: center;
    width: 100%;
    padding-left: var(--px-5);
    padding-right: var(--px-5);
    line-height: var(--px-13);
    font-weight: bold !important;
    text-overflow: clip;
    overflow: hidden;
    max-width: calc(100% - var(--px-5));
    max-height: calc(100% - var(--px-5));
}

.item-1-2 {
    left: 50%;
    top: 93%;
    transform: translate(-50%, -50%);
    height: var(--px-20);
    text-align: center;
    color: #fff;
    cursor: pointer;
    width: var(--px-48);
    color: #000;
    position: absolute;
    background: #fff;
    font-weight: 600;
    color: #18bdd2;
    margin-top: 5px;
    border-radius: 4px;
    border: 1px dashed #999;
    font: normal normal 600 var(--s-14);
}

.div-portrait {
    display: none;
}

@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait), (min-device-width: 600px) and (max-device-width: 1024px) and (orientation: portrait) {
    .FExr4 {
        display: none;
    }

    .div-portrait {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        background: white;
        position: fixed;
        z-index: 1111111111111;
        position: fixed;
        top: 45px;
        z-index: 99999;
    }

    .phone {
        height: 70px;
        width: 110px;
        border: 3px solid #505050;
        border-radius: 10px;
        position: relative;
        animation: rotate 1.5s ease-in-out infinite alternate;
    }

    .message {
        color: #505050;
        font-size: 1em;
        margin-top: 40px;
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(-90deg);
        }

        100% {
            transform: rotate(-90deg);
        }
    }

    @media only screen and (max-device-width: 812px) and (orientation: landscape) {
        .phone,
        .message {
            display: block;
        }
    }
}

.list-item-by-category-container-item-price {
    width: auto !important;
    min-width: 85%;
    max-width: 85%;
    padding: 2px 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.list-item-by-category-container-item-price-value {
    font-size: var(--px-16);
    white-space: nowrap;
}

.mango-global-spinner,
.mango-spinner {
    top: 0px !important;
    width: 100% !important;
    height: 3px !important;
    border-radius: 8px !important;
    z-index: 200 !important;
    left: 0px !important;
}

.mango-spinner {
    position: fixed !important;
}

.mango-global-spinner {
    position: absolute !important;
}

    .mango-global-spinner.active,
    .mango-spinner.active {
        display: block !important;
    }

.mango-global-spinner-box,
.mango-spinner-box {
    border-radius: 8px !important;
    width: 0%;
    height: 100%;
}

.mango-select-label {
    border-radius: 5px;
    border: 1px solid #a7a7a7;
    display: inline-flex;
    width: 200px;
    padding: 3px;
    position: relative;
}

.mango-select-label-input {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    flex-flow: wrap;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 20px;
    max-height: 60px;
}

.mango-select-label-input-placeholder {
    font-size: 12px;
    color: #505050;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mango-select-label-input-item {
    font-size: 9px;
    background-color: #00bed6;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px;
    margin-right: 2px;
    margin-bottom: 2px;
    padding: 2px;
    color: #fff;
}

.mango-select-label-input-item-remove,
.mango-select-label-input-remove-all {
    border: none;
    background: none;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
    background-image: url(../image/ImageIcon/0036_cancel-01.svg);
    background-repeat: no-repeat;
}

.mango-select-label-input-remove-all {
    margin-left: 3px;
    width: 20px;
    height: 20px;
}

.mango-select-label-input-item-remove {
    width: 16px;
    height: 16px;
    margin-left: 2px;
}

.mango-select-label-list {
    position: absolute;
    left: 0px;
    border-radius: 5px;
    border: 1px solid #a7a7a7;
    width: 100%;
    top: 107%;
    z-index: 200;
    overflow: hidden;
    background-color: #fff;
    display: none;
}

.mango-select-label-list-filter {
    width: 100%;
    padding: 2px 4px;
}

.mango-select-label-list-data {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 160px;
}

.mango-select-label-list-filter-input {
    width: 100%;
    border-radius: 5px;
    border: 1px solid #a7a7a7;
    padding: 2px 4px;
    color: #505050;
    font-size: 12px;
    outline: none;
}

.mango-select-label-list.active {
    display: block;
}

.mango-select-label-list-table {
    width: 100%;
}

.mango-select-label-list-table-body-row {
    border-bottom: 1px dashed #a7a7a7;
    text-align: left;
}

    .mango-select-label-list-table-body-row:nth-last-of-type(1) {
        border-bottom: none;
    }

.mango-select-label-list-table-body-row-column {
    text-align: left;
    font-size: 9px !important;
    padding: 3px;
    transition: all 0.15s linear;
    color: #505050;
}

    .mango-select-label-list-table-body-row-column:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }

button:active,
a:active,
input[type="submit"]:active,
input[type="button"]:active {
    opacity: 0.5;
}

.cc-7doi.cc-1ada {
    width: 36px !important;
    height: 36px !important;
    border-radius: 36px !important;
}

.ui-loader-default {
    display: none !important;
}

#content-right {
    width: calc(100% - 250px);
    height: calc(100vh - 45px);
    padding: 0px !important;
    margin: auto !important;
    margin-right: 0 !important;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    -ms-transition: all 0.3s !important;
    -o-transition: all 0.3s !important;
}

.div-body table tr td {
    max-width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unShow {
    display: none !important;
}

.repeatERB-area,
.repeatERB-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.repeatERB-area {
    width: 100%;
    height: 150px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    text-align: center;
}

.repeatERB-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    flex-direction: column;
}

.repeatERB-title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    height: 45px;
    min-height: 45px;
}

.repeatERB-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.repeatERB-btn-book,
.repeatERB-btn-future {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    width: auto;
    height: 35px;
    cursor: pointer;
}

.img-repeatERB {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.repeatERB-sub-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
}

.img-repeatERB.active {
    content: url(../../../../Content/image/clientinfo/24px-04.svg);
}

.item-1.new-menu {
    border: 1px solid #707070;
    border-radius: 4px;
}

.item-1-1-1.new-menu {
    position: absolute !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600;
    color: #505050;
    text-overflow: clip;
    overflow: hidden;
    max-width: calc(100% - 5px);
    max-height: calc(100% - 5px);
}

.item-1-2.new-menu {
    color: #00a2b7 !important;
    padding: 0 8px !important;
    border-radius: 4px !important;
    top: 90% !important;
    width: unset !important;
    max-width: 85% !important;
    min-width: 85% !important;
    border-style: solid;
}

span.new-menu {
    font-weight: bold;
}

.tl.active {
    background-color: #00bed6 !important;
}

/*
    TECH
*/

.form-modal-clock-in-out {
    border: 1px solid #fff;
    border-radius: 5px;
    max-width: 1700px;
    padding: 0;
    top: 0px;
    box-shadow: 3px 4px 11px 0px #00000033;
}

#emp-clock-list {
    width: 100%;
    display: flex;
}

    #emp-clock-list #emp-clock-list-login,
    #emp-clock-list #emp-clock-list-logout {
        flex: 1;
        display: flex;
        height: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #emp-clock-list .grid-tech-turn-general {
        height: calc(100vh - 150px) !important;
    }

    #emp-clock-list .dashed-border {
        max-height: calc(100vh - 100px);
        width: 100%;
        display: flex;
        overflow-x: auto;
        position: sticky;
        padding: 0 20px;
        position: relative;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: flex-start;
        height: 740px;
        border-width: 1px 1px 0px 0px;
        border-color: #a7a7a7;
        border-style: solid;
    }

#emp-clock-list-logout .dashed-border:last-of-type {
    border-width: 1px 0px 0px 0px;
}

.footer-model-loginout-tech {
    height: 60px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.header-clock-in-out {
    width: 100%;
    text-align: center;
    height: 55px;
    background: #d1d1d120 0% 0% no-repeat padding-box;
    border-radius: 5px 5px 0px 0px;
    margin: 0 !important;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

    .header-clock-in-out .loginbonmot,
    .header-clock-in-out .notloginbonmot {
        font: normal normal 600 22px/27px Montserrat;
        letter-spacing: 0px;
        color: #231f20;
        text-transform: uppercase;
    }

    .header-clock-in-out .techbonmot {
        font: normal normal 500 14px/18px Montserrat;
        letter-spacing: 0px;
        color: #a7a7a7;
    }

.font-tech-cus-pop {
    height: 90%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow-x: auto;
    flex-flow: row wrap;
    place-content: stretch flex-start;
    align-items: stretch;
    background-color: #fff;
    padding: 10px;
    padding-top: 30px;
    align-content: flex-start;
}

#emp-clock-list-login li {
    cursor: all-scroll;
}

#emp-clock-list-logout div {
    cursor: all-scroll;
}

#ul-list-tech-login .grid-tech-child.tech-login-all {
    opacity: 0;
    -webkit-animation: 0.4s 0.3s drop-in forwards;
    animation: 0.4s 0.3s drop-in forwards;
}

#ul-list-tech-logout .grid-tech-child.tech-logout-all {
    opacity: 0;
    -webkit-animation: 0.4s 0.3s drop-out forwards;
    animation: 0.4s 0.3s drop-out forwards;
}

.notloginbonmot,
.loginbonmot {
    margin-right: 10px;
    font-size: 1.8em;
    font-weight: 600;
    color: #505050;
}

.count-quantity-salon-center-login,
.count-quantity-salon-center-logout,
.countbonmot {
    font-size: 0.8em;
}

#emp-clock-list #emp-clock-list-logout .font-tech-cus-pop {
    border: 1px dashed #a7a7a7;
}

.editing-turn,
.popupw-from-tech {
    background: #ffcd0040 0% no-repeat padding-box;
    border: 2px solid #94d500;
}

.btn-excute-clock-emp {
    border: none;
    height: 40px;
    font: normal normal 600 25px/30px Montserrat;
    color: #ffffff;
    text-transform: uppercase;
    padding-top: 3px;
    border-radius: 4px;
    min-width: 300px;
}

.btn-clockout-tech-saloncenter {
    display: flex;
    width: var(--px-120);
    height: var(--px-40);
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px var(--px-5) #0000004d;
    border: 1px solid #00bed6;
    border-radius: var(--px-5);
    position: absolute;
    bottom: -45px;
    font: normal normal bold var(--s-14);
    letter-spacing: 0px;
    color: #00bed6;
    text-transform: uppercase;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    align-items: center;
}

    .btn-clockout-tech-saloncenter:hover {
        background: #00bed6 0% 0% no-repeat padding-box;
        color: #ffffff;
    }

.btn-clockin-tech-saloncenter {
    display: flex;
    width: var(--px-120);
    height: var(--px-40);
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px var(--px-5) #0000004d;
    border: 1px solid #f28500;
    border-radius: var(--px-5);
    position: absolute;
    bottom: calc(var(--px-45) * -1);
    font: normal normal bold var(--s-14);
    letter-spacing: 0px;
    color: #f28500;
    text-transform: uppercase;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .btn-clockin-tech-saloncenter:hover {
        background: #f28500 0% 0% no-repeat padding-box;
        color: #ffffff;
    }

.grid-tech-turn-general .edit-time-turn {
    pointer-events: none;
    font: normal normal 500 var(--s-12);
}

.grid-tech-turn-general.form-allowed-adjust .edit-time-turn {
    pointer-events: all;
}

.grid-tech-turn-general {
    height: 100%;
    width: 100%;
    display: flex;
    overflow-x: auto;
    position: sticky;
    padding: var(--px-30) 0 0 0;
    position: relative;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
}

    .grid-tech-turn-general .grid-tech-child {
        border-radius: 4px;
        padding: 0;
        display: flex;
        flex-flow: column;
        align-items: center;
        position: relative;
        cursor: pointer;
        height: var(--size-tech-salon-h);
        width: var(--size-tech-salon-w);
        transition: 0.4s height;
        margin: var(--px-23) 4px;
        box-shadow: 0px 3px 15px #00000066;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        touch-action: none;
        user-select: none;
    }

        .grid-tech-turn-general .grid-tech-child.dragEnter {
            z-index: 100;
        }

        .grid-tech-turn-general .grid-tech-child.drop-target {
            background: #50505028;
        }

        .grid-tech-turn-general .grid-tech-child:hover .grid-photo-tech {
            z-index: 4;
            opacity: 0.85;
        }

        .grid-tech-turn-general .grid-tech-child.minimize-form {
            height: var(--px-108);
        }

            .grid-tech-turn-general
            .grid-tech-child.minimize-form
            .grid-row-1
            .border-bot::after,
            .grid-tech-turn-general
            .grid-tech-child.minimize-form
            .grid-row-1
            .grid-tech-time,
            .grid-tech-turn-general .grid-tech-child.minimize-form .grid-row-2,
            .grid-tech-turn-general .grid-tech-child.minimize-form .grid-tech-tix-amount {
                display: none;
            }

        .grid-tech-turn-general .grid-tech-child .grid-row-3 {
            position: absolute;
            height: var(--px-25);
            width: var(--px-40);
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            color: #505050;
            cursor: pointer;
            flex: 0;
            transition: height 0.15s;
            z-index: 10;
        }

            .grid-tech-turn-general .grid-tech-child .grid-row-3::after {
                content: " \25CF \25CF \25CF";
                z-index: 4;
            }

            .grid-tech-turn-general .grid-tech-child .grid-row-3:hover,
            .grid-tech-turn-general .grid-tech-child .grid-row-3:active,
            .grid-tech-turn-general .grid-tech-child .grid-row-3:focus {
                height: var(--px-36);
                bottom: -2px;
                background: #50505080;
                border-radius: 4px;
            }

        .grid-tech-turn-general .grid-tech-child:hover {
            animation: hold-to-drag 0.3s;
        }

        .grid-tech-turn-general .grid-tech-child .grid-row-1 {
            display: flex;
            width: 100%;
            position: relative;
            flex-grow: 0;
            margin: var(--px-45) 0 0 0;
            flex-flow: column;
            flex-direction: column;
            align-items: center;
            height: calc(100% - var(--px-45) - var(--px-13));
        }

            .grid-tech-turn-general .grid-tech-child .grid-row-1::after {
                display: none !important;
            }

        .grid-tech-turn-general .grid-tech-child .hide-amount::after {
            display: none !important;
        }

        .grid-tech-turn-general .grid-tech-child .grid-photo-tech {
            position: absolute;
            left: calc(50% - var(--image-tech-size) / 2);
            top: calc(var(--image-tech-size) / -2);
            display: flex;
            justify-content: center;
            align-items: center;
            width: var(--image-tech-size);
            height: var(--image-tech-size);
            z-index: 1;
            overflow: hidden;
            border-radius: 100%;
        }

            .grid-tech-turn-general .grid-tech-child .grid-photo-tech.turnManual {
                pointer-events: all !important;
            }

            .grid-tech-turn-general
            .grid-tech-child
            .grid-photo-tech
            .track-tech-error-box {
                height: 100%;
                width: 100%;
            }

                .grid-tech-turn-general
                .grid-tech-child
                .grid-photo-tech
                .track-tech-error-box:after {
                    height: 100%;
                    width: 100%;
                    content: "";
                    position: absolute;
                    background: #fff;
                    z-index: -1;
                }

        .grid-tech-turn-general .grid-tech-child.tech-busy-highlight::before {
            content: "BUSY";
            position: absolute;
            opacity: 1;
            mix-blend-mode: normal;
            left: calc(50% - var(--image-tech-size) / 2 + -3px);
            top: calc(var(--image-tech-size) / -2 + -3px);
            width: calc(var(--image-tech-size) + 6px);
            height: calc(var(--image-tech-size) + 6px);
            z-index: 4;
            overflow: hidden;
            border-radius: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: flex-end;
            align-items: center;
            padding: 10px;
            font: normal normal 800 12px/15px Montserrat;
            letter-spacing: 0px;
            color: #ffffff;
            text-transform: uppercase;
        }

        .grid-tech-turn-general .grid-tech-child.tech-ready .back-for-img-after {
            display: none;
        }

        .grid-tech-turn-general
        .grid-tech-child.tech-busy-highlight
        .back-for-img-after {
            content: "";
            position: absolute;
            mix-blend-mode: multiply;
            font: normal normal 800 12px/15px Montserrat;
            letter-spacing: 0px;
            color: #ffffff;
            text-transform: uppercase;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: flex-end;
            align-items: center;
            bottom: 100%;
            left: calc(50% - var(--image-tech-size) / 2 + 0px);
            width: calc(var(--image-tech-size) + 0px);
            height: calc(var(--image-tech-size) / 2 + 0px);
            z-index: 3;
            overflow: hidden;
            background: #505050 0% 0% no-repeat padding-box;
            opacity: 0.8;
            border-top-left-radius: var(--image-tech-size);
            border-top-right-radius: var(--image-tech-size);
        }

        .grid-tech-turn-general .grid-tech-child.tech-busy-highlight::after {
            content: "";
            mix-blend-mode: multiply;
            left: 0px;
            z-index: 3;
            position: absolute;
            background: #505050 0% 0% no-repeat padding-box;
            width: 100%;
            height: 100%;
            border-radius: 4px;
            bottom: 0px;
            opacity: 0.85;
            box-shadow: 0px 0px 30px #00000033;
        }

        .grid-tech-turn-general .grid-tech-child .row-index-number {
            position: absolute;
            left: calc(50% + var(--image-tech-size) / 4);
            top: calc(var(--image-tech-size) / 4);
            width: 20px;
            height: 20px;
            text-align: center;
            font: var(--salon-center-large);
            letter-spacing: 0px;
            color: #ffffff;
            opacity: 1;
            background: var(--mg-color-green);
            border-radius: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 3;
            padding: 2px;
        }

.grid-photo-tech img {
    background: #fff;
    list-style-type: none;
    border-radius: 100%;
    width: 100%;
    height: 100%;
}

.grid-row-1 .grid-tech-name {
    display: flex;
    flex-flow: column;
    width: 100%;
    align-items: center;
    flex-direction: column;
    align-content: space-around;
    justify-content: center;
    flex-wrap: nowrap;
    text-align: center;
    flex: 1;
}

    .grid-row-1 .grid-tech-name.padding-20 {
        padding: 15px 0 0 0;
    }

.grid-tech-name span {
    font: normal normal 600 var(--s-14);
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-transform: uppercase;
    color: #505050;
    word-break: break-word;
    max-height: var(--px-30);
    height: auto;
}

    .grid-tech-name span:not(.edit-time-turn):last-of-type {
        font: normal normal 600 var(--s-12);
        letter-spacing: 0px;
        color: #505050;
        opacity: 1;
        text-transform: capitalize;
        flex: 1 0 50%;
        z-index: 10;
    }

.grid-row-2 .grid-tech-adjust {
    width: 100%;
    font: normal normal 600 var(--s-12);
    letter-spacing: 0px;
    color: #505050;
    opacity: 1;
    text-transform: capitalize;
    display: flex;
    justify-content: center;
}

.grid-tech-time strong:first-of-type {
    font: normal normal 600 var(--s-12);
}

.grid-row-1 .info-turn {
    display: flex;
    justify-content: space-between;
    color: #505050;
}

.grid-row-1 .grid-tech-time {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    font: normal normal 500 var(--s-10);
    border-width: 1px 0px;
    border-style: solid;
    border-color: #d1d1d180;
    justify-content: center;
}

    .grid-row-1 .grid-tech-time .grid-info-turn {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        padding: 0 5px;
        grid-gap: 5px;
    }

    .grid-row-1 .grid-tech-time .grid-tech-adjust {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        padding: 0 5px;
        grid-gap: 5px;
        border-top: 1px solid #d1d1d150;
        margin: 2px 0px;
    }

        .grid-row-1 .grid-tech-time .grid-tech-adjust .partial {
            color: #f44c7f;
        }

        .grid-row-1 .grid-tech-time .grid-tech-adjust .total-turn {
            font: normal normal bold var(--s-10);
        }

.grid-row-1 .grid-tech-tix-amount {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    padding: 0 5px;
    grid-gap: 5px;
    font: normal normal 500 var(--s-10);
    width: 100%;
}

    .grid-row-1 .grid-tech-tix-amount .serAmount {
        font: normal normal bold var(--s-12);
    }

.grid-tech-child .grid-row-2 {
    display: flex;
    width: 100%;
    flex-grow: 1;
    flex-flow: column;
    padding: 2px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.grid-row-2 .grid-tech-tix-amount {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 10px;
    letter-spacing: 0px;
    color: #505050;
    flex: 0;
    white-space: nowrap;
}

    .grid-row-2 .grid-tech-tix-amount span:first-of-type {
        flex: 3;
        font: normal normal 500 var(--s-10);
    }

    .grid-row-2 .grid-tech-tix-amount span:last-of-type {
        flex: 1;
        font: normal normal bold var(--s-12);
    }

.grid-row-1 .grid-tech-last-checkout {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    font: normal normal 600 var(--s-10);
    letter-spacing: 0px;
    color: #00bed6;
    white-space: nowrap;
    margin-top: 3px;
}

    .grid-row-1 .grid-tech-last-checkout .show-next-appt-btn {
        width: var(--px-100);
        height: var(--px-20);
        background: #ffffff 0% 0% no-repeat padding-box;
        box-shadow: 0px 3px 6px #00000029;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        align-content: center;
        flex-wrap: nowrap;
        flex-direction: row;
        z-index: 4;
    }

        .grid-row-1 .grid-tech-last-checkout .show-next-appt-btn:hover {
            background: #00bed6 0% 0% no-repeat padding-box;
            color: #ffffff !important;
        }

        .grid-row-1 .grid-tech-last-checkout .show-next-appt-btn .next,
        .grid-row-1 .grid-tech-last-checkout .show-next-appt-btn .left {
            font: normal normal 600 var(--s-10);
            letter-spacing: 0px;
            color: #0f001a;
        }

        .grid-row-1 .grid-tech-last-checkout .show-next-appt-btn .fa {
            color: #505050;
            font-weight: 900;
            font-size: 14px;
        }

/*  HANDLE BACKGROUND && BORDER TECH  */

.grid-tech-child.have-background .grid-tech-name span,
.grid-tech-child.have-background .grid-tech-name span:last-of-type,
.grid-tech-child.have-background
.grid-row-1
.grid-tech-time
.grid-info-turn
.row-1-1,
.grid-tech-child.have-background
.grid-row-1
.grid-tech-time
.grid-info-turn
.row-1-2,
.grid-tech-child.have-background .grid-row-1 .grid-tech-time .grid-tech-adjust,
.grid-tech-child.have-background .grid-tech-tix-amount,
.grid-tech-child.have-background .grid-row-2 .grid-tech-adjust,
.grid-tech-child.have-background .grid-row-3,
.grid-tech-child.have-background .grid-row-1 .info-turn {
    color: #fff;
}

.grid-tech-name span:last-of-type {
    padding: 0 !important;
}

.grid-tech-child.have-background .grid-row-1 .grid-tech-last-checkout,
.grid-row-1 .grid-tech-time .grid-info-turn .row-1-2,
.grid-tech-child.have-background .row-index-number {
    color: #0f001a;
}

.grid-tech-child.have-background .row-index-number {
    background: #fff;
}

.grid-tech-child.tech-ready {
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 2px solid #94d500;
}

    .grid-tech-child.tech-ready.have-background-white {
        border: 2px solid #fff;
    }

.grid-tech-child.have-background.tech-ready {
    border: unset;
}

@-webkit-keyframes drop-in {
    0% {
        opacity: 0;
        -webkit-transform: rotate(20deg) translateY(-800px);
    }

    45% {
        opacity: 1;
        -webkit-transform: rotate(0deg) translateY(0px) scale(1.05, 0.9);
    }

    65% {
        -webkit-transform: rotate(-2deg) translateY(-30px);
    }

    80% {
        -webkit-transform: rotate(0deg) translateY(0px);
    }

    90% {
        -webkit-transform: rotate(0deg) translateY(-10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotate(0deg) translateY(0px);
    }
}

@keyframes drop-in {
    0% {
        opacity: 0;
        transform: rotate(20deg) translateY(-800px);
    }

    45% {
        opacity: 1;
        transform: rotate(0deg) translateY(0px) scale(1.05, 0.9);
    }

    65% {
        transform: rotate(-1deg) translateY(-30px);
    }

    80% {
        transform: rotate(0deg) translateY(0px);
    }

    90% {
        transform: rotate(0deg) translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg) translateY(0px);
    }
}

@-webkit-keyframes drop-out {
    0% {
        opacity: 0;
        -webkit-transform: rotate(20deg) translateY(-800px);
    }

    45% {
        opacity: 1;
        -webkit-transform: rotate(0deg) translateY(0px) scale(1.05, 0.9);
    }

    65% {
        -webkit-transform: rotate(-2deg) translateY(-30px);
    }

    80% {
        -webkit-transform: rotate(0deg) translateY(0px);
    }

    90% {
        -webkit-transform: rotate(0deg) translateY(-10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotate(0deg) translateY(0px);
    }
}

@keyframes drop-out {
    0% {
        opacity: 0;
        transform: rotate(-20deg) translateY(-800px);
    }

    45% {
        opacity: 1;
        transform: rotate(0deg) translateY(0px) scale(1.05, 0.9);
    }

    65% {
        transform: rotate(1deg) translateY(30px);
    }

    80% {
        transform: rotate(0deg) translateY(0px);
    }

    90% {
        transform: rotate(0deg) translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg) translateY(0px);
    }
}

.input-search-saloncenter {
    border: none;
    box-sizing: border-box;
    font-size: 15px;
    color: #505050;
    background: transparent;
    outline-width: 0;
    transition: transform 0.6s ease-in-out 0.2s;
    height: 100%;
    transition: all 200ms ease;
    cursor: text;
    transition: all 0.2s ease-in-out;
    position: relative;
    width: 0;
    font-weight: 500;
    border-bottom: 2px solid #fbfbfb;
}

    .input-search-saloncenter.active[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        height: 1em;
        width: 1em;
        background: url(/Content/image/cancel.svg) no-repeat 50% 50%;
        background-size: contain;
        opacity: 1 !important;
        pointer-events: none;
        margin: 0;
        cursor: pointer;
    }

    .input-search-saloncenter.navbar.active[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        height: 1em;
        width: 1em;
        background: url(/Content/icon/search-tech.svg) no-repeat 50% 50%;
        background-size: contain;
        opacity: 1 !important;
        pointer-events: none;
        margin: 0;
        cursor: pointer;
    }

    .input-search-saloncenter.navbar.active:focus[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        height: 1em;
        width: 1em;
        background: url(/Content/image/cancel.svg) no-repeat 50% 50%;
        background-size: contain;
        opacity: 1 !important;
        pointer-events: initial;
        margin: 0;
        cursor: pointer;
    }

    .input-search-saloncenter.active[type="search"]:focus::-webkit-search-cancel-button {
        opacity: 0.3;
        pointer-events: all;
    }

    .input-search-saloncenter.active[type="search"]:hover::-webkit-search-cancel-button:hover {
        opacity: 0.3;
        pointer-events: all;
    }

    .input-search-saloncenter.navbar {
        border-bottom: 2px solid #00bed6;
        color: #fff;
        background: #00bed6;
    }

    .input-search-saloncenter.active:not(.navbar) {
        border-bottom: 3px solid #00bed6;
        position: absolute;
        right: var(--px-30);
        width: var(--px-250);
        background: #fbfbfb;
        height: var(--px-35);
        top: -12px;
    }

.searh-bar-ticket-salon-center.for-history
.input-search-saloncenter.active:not(.navbar) {
    width: var(--px-300);
    z-index: 10000;
}

.input-search-saloncenter.active.navbar {
    top: 0;
    padding: var(--px-15) var(--px-10) var(--px-10) var(--px-15);
    margin: 0 5px;
    width: var(--px-220);
    height: var(--px-45);
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 8px !important;
    border: none;
    color: #505050;
    font: normal normal 500 var(--s-16);
}

.input-search-saloncenter::-webkit-input-placeholder {
    font: normal normal 500 var(--s-16);
    color: #a7a7a7;
}

.input-search-saloncenter.navbar::-webkit-input-placeholder {
    font: normal normal 400 var(--s-16);
    color: #a7a7a7;
}

.b-t-search-sl.navbar-sl {
    height: 25px !important;
    width: 25px !important;
}

.b-t-search-sl {
    height: 25px;
    width: 25px;
    cursor: pointer;
}

.icon-phone-handle {
    width: 20px;
    cursor: pointer;
}

.authorization-code-tech-show-phone {
    background: transparent;
    outline: none;
    border: none;
    height: 60px;
    margin-bottom: 3rem;
    font-size: 5rem !important;
    width: 100%;
    text-align: center;
    color: white;
}

#modal-emp-clock-content .modal-dialog {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

#modal-emp-clock-content .grid-tech-turn-general .grid-tech-child {
    margin: 50px 10px !important;
}

.notice-salon-mango {
    height: 27px;
    width: 27px;
    align-items: center;
    cursor: pointer;
    position: absolute;
    display: flex;
    left: 150px;
    top: 50%;
    justify-content: center;
    flex-direction: row;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index: 5;
}

    .notice-salon-mango svg path {
    }

    .notice-salon-mango:hover svg path,
    .notice-salon-mango:focus svg path {
        opacity: 0.5;
    }

.list-notice-salon {
    opacity: 0;
    visibility: hidden;
    display: flex;
    top: calc(100% + 10px);
    left: 0px;
    width: 450px;
    height: auto;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 50px #0000004d;
    border-radius: 8px;
    opacity: 1;
    position: absolute;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    transform: translateY(-50px);
    transition: opacity 250ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

    .list-notice-salon.active {
        opacity: 1;
        visibility: visible;
    }

    .list-notice-salon .header-title-notice {
        display: flex;
        text-align: left;
        font: normal normal 700 16px/14px Montserrat;
        letter-spacing: 0px;
        color: #00bed6;
        text-transform: uppercase;
        padding: 20px;
        border-bottom: 1px solid #a7a7a7;
        width: 100%;
    }

    .list-notice-salon .ui-form-color {
        display: flex;
        background: #ebebeb4d 0% 0% no-repeat padding-box;
        height: 100%;
        width: 100%;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: center;
        align-items: flex-start;
    }

        .list-notice-salon .ui-form-color .color-for-receptionest {
            display: flex;
            height: 100%;
            width: 100%;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: flex-start;
            justify-content: flex-start;
            align-items: flex-start;
            flex: 1;
            padding: 15px 0 10px 20px;
        }

            .list-notice-salon .ui-form-color .color-for-receptionest .title-reception {
                display: flex;
                width: 92px;
                height: 28px;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: center;
                align-items: center;
                background: #ffffff 0% 0% no-repeat padding-box;
                box-shadow: 0px 0px 6px #00000029;
                border: 1px solid #a7a7a7;
                border-radius: 14px;
                text-align: center;
                font: normal normal 600 14px/14px Montserrat;
                letter-spacing: 0px;
                color: #505050;
                text-transform: uppercase;
            }

            .list-notice-salon .ui-form-color .color-for-receptionest .list-receptionest {
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                align-content: flex-start;
                justify-content: flex-start;
                align-items: flex-start;
                height: 100%;
                width: 100%;
                border-right: 1px solid #a7a7a7;
                padding: 10px 0;
            }

                .list-notice-salon
                .ui-form-color
                .color-for-receptionest
                .list-receptionest
                .box-recept {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    align-content: center;
                    justify-content: center;
                    padding: 20px 0;
                    align-items: center;
                    height: 20px;
                    position: relative;
                }

                    .list-notice-salon
                    .ui-form-color
                    .color-for-receptionest
                    .list-receptionest
                    .box-recept.tech::after {
                        content: "";
                        bottom: 0;
                        width: calc(100% + 30px);
                        height: 1px;
                        background: #a7a7a7;
                        position: absolute;
                        left: 0;
                    }

                    .list-notice-salon
                    .ui-form-color
                    .color-for-receptionest
                    .list-receptionest
                    .box-recept
                    .box-color {
                        height: 20px;
                        width: 20px;
                        background: #8b95ca 0% 0% no-repeat padding-box;
                        border-radius: 4px;
                        margin-right: 10px;
                    }

                    .list-notice-salon
                    .ui-form-color
                    .color-for-receptionest
                    .list-receptionest
                    .box-recept
                    .box-name {
                        text-align: left;
                        font: normal normal 600 14px/14px Montserrat;
                        letter-spacing: 0px;
                        color: #505050;
                    }

        .list-notice-salon .ui-form-color .color-for-icons {
            display: flex;
            height: 100%;
            width: 100%;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: flex-start;
            justify-content: flex-start;
            align-items: flex-start;
            flex: 1;
            padding: 15px 0 10px 20px;
        }

            .list-notice-salon .ui-form-color .color-for-icons .title-reception {
                display: flex;
                width: 92px;
                height: 28px;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: center;
                align-items: center;
                background: #ffffff 0% 0% no-repeat padding-box;
                box-shadow: 0px 0px 6px #00000029;
                border: 1px solid #a7a7a7;
                border-radius: 14px;
                text-align: center;
                font: normal normal 600 14px/14px Montserrat;
                letter-spacing: 0px;
                color: #505050;
                text-transform: uppercase;
            }

            .list-notice-salon .ui-form-color .color-for-icons .list-icons {
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                align-content: flex-start;
                justify-content: flex-start;
                align-items: flex-start;
                height: 100%;
                width: 100%;
                padding: 10px 0;
            }

                .list-notice-salon .ui-form-color .color-for-icons .list-icons .box-icons {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    align-content: center;
                    justify-content: center;
                    align-items: center;
                    padding: 20px 0;
                    height: 20px;
                }

                    .list-notice-salon .ui-form-color .color-for-icons .list-icons .box-icons img {
                        height: 20px;
                        width: 20px;
                        margin-right: 10px;
                    }

                    .list-notice-salon
                    .ui-form-color
                    .color-for-icons
                    .list-icons
                    .box-icons
                    .box-name {
                        text-align: left;
                        font: normal normal 600 14px/14px Montserrat;
                        letter-spacing: 0px;
                        color: #505050;
                    }

.noClick {
    pointer-events: none !important;
}

.searh-bar-ticket-salon-center {
    position: relative;
}

    .searh-bar-ticket-salon-center .btn-search-navbar-head {
        position: absolute;
        top: 3px;
        display: none;
        height: 22px;
        width: 22px;
        cursor: pointer;
        background-image: url(/Content/image/MangoTech/Search-w.svg) !important;
        background-repeat: no-repeat !important;
        height: 30px;
        width: 30px;
        background: 0;
        border: none;
        right: 10px;
        bottom: 5px;
    }

#bellAreaList .page-noresult-animation {
    display: flex;
    flex-direction: column;
    align-content: space-around;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #a7a7a7;
    font-size: 10px;
    font-weight: 500;
}

    #bellAreaList .page-noresult-animation img {
        width: var(--px-50);
        height: var(--px-50);
    }

@keyframes tab_active {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

.check-reasons {
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border: 1px solid white;
    border-radius: 100%;
    background: none;
    position: relative;
    border: 1px solid white;
    margin-left: 0;
}

.div-check-cancel {
    display: grid;
    grid-template-columns: repeat(1, 20% 80%);
    align-items: center;
    white-space: nowrap;
}

.reason-type {
    margin: 5px;
    font-size: 15px;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.title-void {
    text-align: center;
    color: white;
    font-weight: 700;
}

.active-reasons {
    color: #ffcd00;
}

.active-c-reasons {
    background: #ffcd00;
}

.check-o-reasons {
    top: 5px !important;
    left: 5px !important;
}

.cancel-id .div-check-cancel.xyQpz {
    display: grid;
    grid-template-columns: repeat(1, 20% 80%);
    align-items: center;
    white-space: nowrap;
}

@media (min-device-width: 668px) and (max-device-width: 1400px) {
    :root {
        --scale: 75;
        --image-tech-size: calc(84px * 75 / 100) !important;
        --image-tech-size-minus: calc(84px * -75 / 100);
        --size-tech-salon-h: calc(180px * 75 / 100);
        --size-tech-salon-w: calc(120px * 75 / 100);
    }

    .grid-tech-turn-general .grid-tech-child.minimize-form {
        height: calc(120px * 75 / 100);
    }

    .history-list-view-content {
        width: calc(100% / 2);
        right: calc(100% / -2);
    }

    .searh-bar-ticket-salon-center .btn-search-navbar-head {
        display: block;
        top: 12px;
    }

    .input-search-saloncenter.navbar.active[type="search"]::-webkit-search-cancel-button {
        display: none !important;
    }

    .input-search-saloncenter.active.navbar {
        top: 0 !important;
        width: 35px !important;
        font: normal normal 500 20px/20px Montserrat !important;
        background: unset !important;
        box-shadow: unset !important;
    }

        .input-search-saloncenter.active.navbar:focus {
            width: 50vw !important;
            top: 45px !important;
            height: 40px !important;
            box-shadow: 0px 3px 50px #00000033 !important;
            background: #ffffff 0% 0% no-repeat padding-box !important;
        }

            .input-search-saloncenter.active.navbar:focus::-webkit-input-placeholder {
                font: normal normal 500 14px/12px Montserrat !important;
            }

    .input-search-saloncenter.navbar::-webkit-input-placeholder {
        font: normal normal 500 10px/12px Montserrat !important;
        color: #a7a7a7 !important;
        visibility: collapse;
    }

    .input-search-saloncenter.navbar:focus::-webkit-input-placeholder {
        visibility: visible;
    }

    .input-search-saloncenter.active:not(.navbar) {
        top: -5px;
    }

    .searh-bar-ticket-salon-center.for-history
    .input-search-saloncenter.active:not(.navbar) {
        width: var(--px-350);
        right: var(--px-45);
    }

    .grid-tech-turn-general .grid-tech-child .grid-row-3 {
        font-size: var(--px-10);
    }

    .bold {
        font-weight: 700;
    }

    .pl-30 {
        padding-left: var(--px-30);
    }
}

/*SWAL2*/
.swal2-container .title-clockin-out {
    justify-content: center;
}

.swal-clockin-manage .log_out_all {
    min-width: var(--px-500) !important;
}

.swal-clockin-manage input[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

    .swal-clockin-manage input[type="radio"]:checked + label, .swal-clockin-manage input[type="radio"]:not(:checked) + label {
        position: relative;
        padding-left: 40px;
        cursor: pointer;
        line-height: 25px;
        display: inline-block;
        font-weight: 600;
        font-size: 15px;
        margin: 0;
    }

.swal-clockin-manage [type="radio"]:checked + label:before, .swal-clockin-manage [type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border: 2px solid white;
    border-radius: 100%;
    background: none;
}

.swal-clockin-manage input[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: 5px;
    left: 5px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    background-color: transparent;
}

.swal-clockin-manage input[type="radio"]:checked + label, .swal-clockin-manage input[type="radio"]:not(:checked) + label:hover {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 25px;
    display: inline-block;
    color: #ffcd00;
}

    .swal-clockin-manage input[type="radio"]:checked + label:after, .swal-clockin-manage input[type="radio"]:not(:checked) + label:hover::after {
        background: #ffcd00;
    }

.zIn1260 {
    z-index: 12600 !important;
}


/*LOCK*/

#lock-screen-disable-hub--auto {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99999;
    opacity: 0.9;
}

    #lock-screen-disable-hub--auto #sun {
        z-index: 5;
        border-radius: 50%;
        position: absolute;
        width: 10vmax;
        height: 10vmax;
        left: 80%;
        top: calc(50% - 8vmax);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 5vmax;
        transition: all 0.3s;
        color: #fff1d2;
        cursor: pointer;
    }

        #lock-screen-disable-hub--auto #sun.center {
            transition: unset;
            background: #3d3e53;
        }

            #lock-screen-disable-hub--auto #sun.center:hover {
                border-radius: 100%;
                background: #212121;
            }

        #lock-screen-disable-hub--auto #sun:active {
            font-size: 4vmax;
        }

        #lock-screen-disable-hub--auto #sun.center {
            left: calc(50% - 10vmax / 2);
            z-index: 12;
        }


    #lock-screen-disable-hub--auto #hour {
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        top: 10%;
    }

        #lock-screen-disable-hub--auto #hour * {
            z-index: 100;
            text-align: center;
            color: white;
            padding: 0;
            margin: 0;
        }

        #lock-screen-disable-hub--auto #hour h1 {
            font-size: 6vh;
        }

        #lock-screen-disable-hub--auto #hour h2 {
            font-size: 2vh;
            font-weight: 300;
        }

    #lock-screen-disable-hub--auto .loadingio-spinner-ripple-9hrxx6hijr {
        top: calc(50% - 8vmax);
        width: 10vmax;
        height: 10vmax;
        display: flex;
        align-items: center;
        justify-content: center;
        left: calc(50% - 10vmax / 2);
        position: absolute;
        z-index: 12;
    }

    #lock-screen-disable-hub--auto .ldio-5m2p3wk1p3 {
        position: relative;
        transform: translateZ(0) scale(0.2);
        backface-visibility: hidden;
        transform-origin: 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #lock-screen-disable-hub--auto .ldio-5m2p3wk1p3 div:nth-child(1) {
            border-color: #f285008a;
        }

        #lock-screen-disable-hub--auto .ldio-5m2p3wk1p3 div {
            box-sizing: content-box;
        }

        #lock-screen-disable-hub--auto .ldio-5m2p3wk1p3 div {
            position: absolute;
            border-width: 0px;
            border-style: solid;
            opacity: 1;
            border-radius: 50%;
            animation: ldio-5m2p3wk1p3 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
        }

.lock-screen-disable.vertical-centered-box {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}

    .lock-screen-disable .vertical-centered-box:after {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -0.25em;
    }

    .lock-screen-disable .vertical-centered-box .content {
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        font-size: 0;
    }


.loader-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
    margin-left: -60px;
    margin-top: -60px;
}

.loader-line-mask {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 120px;
    margin-left: -60px;
    margin-top: -60px;
    overflow: hidden;
    transform-origin: 60px 60px;
    -webkit-mask-image: -webkit-linear-gradient(top, #000, rgba(0,0,0,0));
    animation: rotate 1.2s infinite linear;
}

    .loader-line-mask .loader-line {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
    }

#particles-background,
#particles-foreground {
    left: -51%;
    top: -51%;
    width: 202%;
    height: 202%;
    transform: scale3d(0.5, 0.5, 1);
}

#particles-background {
    background: #2c2c43;
    background-image: -moz-linear-gradient(180deg, #000 2%, #001518 100%);
    background-image: -webkit-linear-gradient(180deg, #000 2%, #001518 100%);
    background-image: linear-gradient(180deg, #000 2%, #001518 100%);
}

@-moz-keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-o-keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-moz-keyframes fade {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

@-webkit-keyframes fade {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

@-o-keyframes fade {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

@keyframes ldio-5m2p3wk1p3 {
    0% {
        width: 10vmax;
        height: 10vmax;
        border-width: 0px;
        opacity: 1;
    }

    100% {
        border-width: 10vmax;
        width: 45vmax;
        height: 45vmax;
        opacity: 0;
    }
}

@-moz-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}



.areaDisplayTerminalInfo_Name_Status {
    display: flex;
    align-items: center;
}

.pin-btn[status="un-pin"] > .fa-solid.fa-thumbtack {
    display: none;
}

.pin-btn[status="pin"] > .fa-regular.fa-thumbtack {
    display: none;
}

.check-verifyphone {
    display: inline-flex;
    align-items: center;
    width: var(--px-20);
    height: var(--px-20);
    margin: 0 4px 0 0 !important;
    position: relative;
    justify-content: center;
    bottom: -5px;
}

    .check-verifyphone.active:after {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M16.9667 7.94997L15.8333 6.6333C15.6167 6.3833 15.4417 5.91663 15.4417 5.5833V4.16663C15.4417 3.2833 14.7167 2.5583 13.8333 2.5583H12.4167C12.0917 2.5583 11.6167 2.3833 11.3667 2.16663L10.05 1.0333C9.475 0.541634 8.53334 0.541634 7.95 1.0333L6.64167 2.17497C6.39167 2.3833 5.91667 2.5583 5.59167 2.5583H4.15C3.26667 2.5583 2.54167 3.2833 2.54167 4.16663V5.59163C2.54167 5.91663 2.36667 6.3833 2.15834 6.6333L1.03334 7.9583C0.550004 8.5333 0.550004 9.46663 1.03334 10.0416L2.15834 11.3666C2.36667 11.6166 2.54167 12.0833 2.54167 12.4083V13.8333C2.54167 14.7166 3.26667 15.4416 4.15 15.4416H5.59167C5.91667 15.4416 6.39167 15.6166 6.64167 15.8333L7.95834 16.9666C8.53334 17.4583 9.47501 17.4583 10.0583 16.9666L11.375 15.8333C11.625 15.6166 12.0917 15.4416 12.425 15.4416H13.8417C14.725 15.4416 15.45 14.7166 15.45 13.8333V12.4166C15.45 12.0916 15.625 11.6166 15.8417 11.3666L16.975 10.05C17.4583 9.47497 17.4583 8.52497 16.9667 7.94997ZM12.4667 7.42497L8.44167 11.45C8.325 11.5666 8.16667 11.6333 8 11.6333C7.83334 11.6333 7.675 11.5666 7.55834 11.45L5.54167 9.4333C5.3 9.19163 5.3 8.79163 5.54167 8.54997C5.78334 8.3083 6.18334 8.3083 6.425 8.54997L8 10.125L11.5833 6.54163C11.825 6.29997 12.225 6.29997 12.4667 6.54163C12.7083 6.7833 12.7083 7.1833 12.4667 7.42497Z" stroke="white" fill="%2345C65A"/></svg>');
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
        background-repeat: no-repeat;
        background-size: contain;
    }

.popup-detail-appointment-customer-name .check-verifyphone {
    width: var(--px-25);
    height: var(--px-25);
}

#DeviceManagerVer-2 {
    margin: 0;
    border-radius: 12px;
    background: 0;
    overflow: hidden;
    height: calc(100vh - 120px);
}

.nameContent, .contentForAdmin {
    margin: 0 !important;
    margin-right: 48px !important;
}




.navigation-setting-container-datetime.logo-salon {
    padding: 0 !important;
    border: unset;
    margin: 0 !important;
    height: var(--px-40);
    width: var(--px-40);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nbar.fa-pipe {
    margin: 0 var(--px-12);
    color: #FBFBFB;
}

.dropdowm-show-device {
}

    .dropdowm-show-device .dropdown-menu.show {
        padding: 0;
        transform: translate3d(calc(-100% + var(--px-40)), 36px, 0px) !important;
    }

    .dropdowm-show-device .dropdown-toggle {
        background: white;
        border-radius: 12px;
        height: var(--px-36);
        padding: 0 var(--px-8);
        width: var(--px-36);
    }

    .dropdowm-show-device .device-card {
        width: var(--px-380);
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 16px;
    }

    .dropdowm-show-device .header {
        margin-bottom: 10px;
    }

        .dropdowm-show-device .header h2 {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }

        .dropdowm-show-device .header p {
            font-size: 12px;
            color: #666;
        }

    .dropdowm-show-device .section {
        margin-top: 14px;
    }

    .dropdowm-show-device .section-title {
        font-size: 12px;
        font-weight: 600;
        color: #666;
        margin-bottom: 6px;
        background: #f5f5f5;
        padding: 8px;
        border-radius: 4px;
    }

    .dropdowm-show-device .device-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 8px;
        border-bottom: 1px solid #eee;
        gap: 16px;
        transition: all .2s;
    }

        .dropdowm-show-device .device-item:last-child {
            border-bottom: none;
        }

        .dropdowm-show-device .device-item .btn-access-ping {
            display: none;
        }

        .dropdowm-show-device .device-item:hover .btn-access-ping {
            display: flex;
        }

    .dropdowm-show-device .device-info {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

        .dropdowm-show-device .device-info .name {
            font-size: 14px;
            color: #333;
            font-weight: 600;
        }

        .dropdowm-show-device .device-info .link {
            font-size: 12px;
            color: #1a73e8;
            cursor: pointer;
            margin-top: 2px;
            font-weight: 500;
        }

    .dropdowm-show-device .status {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .dropdowm-show-device .status-icon {
        width: 10px;
        height: 10px;
        background: #34a853;
        border-radius: 50%;
    }

    .dropdowm-show-device .status {
        background: rgb(70 196 88);
        color: white;
        font-size: 12px;
        font-weight: 500;
        padding: 2px 8px;
        border-radius: 12px;
    }

    .dropdowm-show-device .footer {
        margin-top: 16px;
        display: flex;
        justify-content: center;
    }

        .dropdowm-show-device .footer button {
            background: #f1f3f4;
            border: none;
            padding: 10px 16px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            color: #333;
            transition: background 0.2s;
        }

            .dropdowm-show-device .footer button:hover {
                background: #e0e0e0;
            }

@media (max-width: 480px) {
    .dropdowm-show-device .device-card {
        width: 100%;
    }
}

button.dropdown-toggle::after {
    content: unset;
}

.smaill-icon-logo {
    cursor: pointer;
    border-radius: 100%;
    box-shadow: 0px 2px 20px #00000020;
    margin: 0 !important;
    background: #ffffff;
    height: 100% !important;
    width: 100% !important;
}

.w-5 {
    width: 1.25rem;
}

.h-5 {
    height: 1.25rem;
}

.text-green-500 {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

.text-green-500 {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}

svg {
    overflow: hidden;
    vertical-align: middle;
}