html,body {
    height: 100%;
}

a {text-decoration: none;}
ol, ul {list-style: none;}

.fs-10 {font-size: 10px;}
.fs-11 {font-size: 11px;}
.fs-12 {font-size: 12px;}
.fs-13 {font-size: 13px;}
.fs-14 {font-size: 14px;}

.c-pointer {cursor: pointer;}
.highlighted-green {color: #00ffc3;}
.text-warning-custom {color: #f68c1f;}
.hl-gray {color: #666;}
.hl-green {color: #319f4f;}
.hl-red {color: #de4032;}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}
.nowrap {white-space: nowrap;}
.action-unauthorized {pointer-events: none;}

.align-icon * {vertical-align: middle;}

.bi-currency-euro {color: #666;}
.tooltip .bi-currency-euro {color: #ccc;}

.input-number-small {
    display: inline-block;
    width: 35px;
    text-align: center;
    padding: 3px;
}

.input-group-width-80 {max-width: 80px;}
.input-group-width-70 {max-width: 70px;}

.input-group-xxs {width: 60px; height: 22px;}
.input-group-xxs input[type="text"],
.input-group-xxs .input-group-text {height: 100%;}

input.saved {color: #319f4f !important;}
input.not-saved {color: #de4032 !important;}

.simple-hover {
    opacity: .5;
    transition: .3s;
}
.simple-hover:hover {opacity: 1;}

.bi.small {font-size: 13px;}

.textarea-one-row {height: 38px; min-height: 38px !important;}
.textarea-one-row.sm {height: 31px; min-height: 31px !important;}

body.auth {
    background-color: #f6f6f6;
    color: #666;
}

.auth-error {
    line-height: normal;
}

.wrapper {
    display: flex;
    min-height: calc(100% - 45px);
    background-color: #f9f9f9;
    overflow-x: hidden;
}

.side-nav {
    width: 200px;
    min-height: 100%;
    background-color: #1c263d;
    /* padding: 10px 0; */
    font-size: 14px;
    /* transition: .3s; */
    position: relative;
    padding-bottom: 20px;
}

.side-nav ul {
    margin: 0;
    padding: 0;
}

.side-nav li {
    position: relative;
}

.side-nav li .bi {
    margin-right: 20px;
    font-size: 16px;
    color: #00ffc3;
    /* transition: .3s; */
}

.side-nav li a {
    color: #fff;
    display: block;
    padding: 10px 30px;
    white-space: nowrap;
}

/* .side-nav li .subBtn {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding-left: 12px;
    padding-right: 12px;
}

.side-nav li.active .subBtn {
    border-left: 1px solid #0a4556;
}

.side-nav li .subBtn:hover {
    background: rgba(0,0,0,.4);
} */

.side-nav li:hover {background-color: #273146;}
.side-nav li.active {background: linear-gradient(90deg, rgb(14, 189, 148) 0%, rgb(18, 94, 142) 90%);}
.side-nav li.active .bi {color: #fff;}

/* .top-nav li a *,
.side-nav li a * {vertical-align: middle;} */

.side-nav .nav-border-top {
    border-top: 1px solid #475166;
    margin-top: 10px;
    padding-top: 10px;
}

.side-nav .nav-border-bottom {
    border-bottom: 1px solid #475166;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.side-nav.minimized {width: auto;}
.side-nav.minimized li a i {margin-right: 0;}
.side-nav.minimized li a span {display: none;}

.side-nav .toggle-nav-btn {
    position: fixed;
    right: 0;
    bottom: 0;
    cursor: pointer;
    background-color: #182033;
    width: 0;
    height: 20px;
    line-height: 20px;
    text-align: center;
    /* transition: .3s; */
    color: #fff;
    border-top: 1px solid #131a28;
    overflow: hidden;
}

.side-nav .toggle-nav-btn:hover {
    background-color: #273146;
}

.side-nav .toggle-nav-btn .closed {display: none;}
.side-nav.minimized .toggle-nav-btn .open {display: none;}
.side-nav.minimized .toggle-nav-btn .closed {display: block;}

.top-nav {
    /* box-shadow: 0 0 20px 0 rgba(0,0,0,.1); */
    border-bottom: 1px solid #1c263d;
    /* border-color: #ccc; */
    position: relative;
    z-index: 3;
}

.top-nav .clinics-nav {
    display: flex;
    margin: 0;
    padding: 0;
}

.top-nav li .bi {
    margin-right: 10px;
    font-size: 16px;
}

.top-nav .clinics-nav li a {
    color: #111;
    padding: 10px 20px;
    display: block;
}

.top-nav .clinics-nav li:hover, #sideNavMobileBtn:hover, #clinicsMobileBtn:hover {background-color: #eee;}
.top-nav .clinics-nav li.active {background-color: #1c263d;}
.top-nav .clinics-nav li.active a {color: #00ffc3;}

.top-nav .user {
    cursor: pointer;
}

.top-nav .user .image {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    overflow: hidden;
}

.top-nav .user .image img {width: 100%;}

.top-nav .user .name {
    padding: 10px;
}

.top-nav .dropdown-indicator {
    font-size: 11px;
}

#sideNavMobileBtn {
    display: none;
    cursor: pointer;
    padding: 7px 3px;
    line-height: 0;
    vertical-align: middle;
    font-size: 30px;
    color: #1c263d;
}

#clinicsMobileBtn {
    display: none;
    cursor: pointer;
    padding: 10px;
    line-height: 0;
    vertical-align: middle;
    font-size: 24px;
    color: #1c263d;
}

#clinicsMobileBtn.open,
#sideNavMobileBtn.open {
    background-color: #1c263d;
    color: #00ffc3;
}

.main-container {
    padding-top: 30px;
    padding-bottom: 30px;
}

.items-list th,
.items-list tr {vertical-align: middle;}

.items-list:not(.no-iteractions) tbody tr {cursor: pointer;}

.list-filter {
    margin-bottom: 20px;
}

.staff-image {
    display: inline-block;
    border-radius: 100%;
    /* border: 1px solid #ccc; */
    overflow: hidden;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    margin-right: 5px;
    background-color: #f1f1f1;
}

.staff-image img {
    width: 100%;
    vertical-align: top;
}

.items-list .staff-image {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
}

.staff-image.form {
    width: 80px;
    height: 80px;
}

.staff-image.small {
    width: 20px;
    height: 20px;
    margin-right: 3px;
}

.staff-image.medium {
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.dot.status-bool-0 {background-color: #de4032;}
.dot.status-bool-1 {background-color: #319f4f;}

.status.active, .status-completed {color: #319f4f;}
.status.inactive, .status-canceled {color: #de4032;}
.status-booked {color: #eeb205;}

.dot.status-book-completed {background-color: #319f4f;}
.dot.status-book-booked {background-color: #eeb205;}
.dot.status-book-canceled {background-color: #de4032;}
.dot.status-book-confirmed {background-color: #3f7ee8;}

.page-title {
    display: block;
    font-weight: bold;
    font-size: 18px;
    color: #666;
    border-bottom: 1px solid #ccc;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
}

.page-title.small {
    margin-top: 0;
    margin-bottom: 5px;
    padding-bottom: 5px;
    font-size: 16px;
}

.page-title.t-left {text-align: left;}

.model-title {
    display: block;
    font-weight: bold;
    font-size: 30px;
    color: #333;
    position: relative;
    margin-bottom: 10px;
    line-height: 24px;
}

.model-title .desc {
    display: block;
    font-size: 16px;
    color: #aaa;
    line-height: normal;
    /* margin-top: 5px; */
}

.gender-selection > .bi:not(.bi-gender-ambiguous) {display: none;}
.gender-selection.male .male {display: block;}
.gender-selection.female .female {display: block;}

.gender-selection.male .bi-gender-ambiguous,
.gender-selection.female .bi-gender-ambiguous {display: none;}

input.datetimepicker[readonly]:not([disabled]) {background-color: #fff;}

.calendar .staff-name {
    font-size: 13px;
    line-height: normal;
    /* text-shadow: 0 1px 1px rgba(0,0,0,.4); */
}

.calendar .hours {
    max-width: 50px;
    text-align: center;
    position: relative;
}

.calendar .time-interval {
    height: 20px;
    text-align: center;
    position: relative;
}

.calendar .time-interval.hour {
    font-weight: bold;
    font-size: 14px;
}

.calendar .time-interval.minute {
    color: #666;
    font-size: 13px;
}

.calendar .hours .time-interval {
    top: -11px;
}

.calendar .schedule {
    position: relative;
}

.calendar .cal-head,
.calendar .schedule {
    max-width: 250px;
}

.calendar .cal-head {
    overflow: hidden;
    padding-top: 5px;
    padding-bottom: 40px;
}

.calendar .cal-head .day {
    font-size: 13px;
    line-height: normal;
    padding-bottom: 5px;
}

.calendar .cal-head .day.current {
    font-weight: bold;
}

.calendar .cal-head .doctors {
    /* height: 140px; */
    overflow: hidden;
    position: relative;
    border-top: 1px solid #ccc;
}

.calendar .cal-head .doctor {
    text-align: left;
    position: relative;
    cursor: pointer;
    padding: 0 75px 0 25px;
    line-height: 20px;
}

.calendar .cal-head .doctor:hover {
    background-color: #f4f4f4;
}

.calendar .cal-head .doctor.active {
    font-weight: bold;
}

/* .calendar .cal-head .doctor .staff-image {
    width: 15px;
    height: 15px;
    margin-right: 0;
    vertical-align: -3px;
} */

.calendar .cal-head .doctor .name {
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
}

.calendar .cal-head .doctor .working-times {
    position: absolute;
    top: 0;
    right: 13px;
    font-size: 11px;
}

.calendar .cal-head .doctor .color {
    position: absolute;
    top: 0;
    left: 5px;
    padding: 0 5px;
    transition: .3s;
}

.calendar .cal-head .doctor .color:hover {
    background-color: #e3e3e3;
}

.calendar .cal-head .doctor .color .circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #ccc;
    vertical-align: 2px;
}

.calendar .staff-wrapper {
    display: inline-block;
    padding: 3px 15px;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
}

.calendar .staff-wrapper.active {
    border-color: #e3e3e3;
    background-color: #fff;
}

.calendar .schedule .hour-interval:nth-child(odd) {
    background-color: #f4f4f4;
}

.calendar .hours .time-interval.minute {
    text-align: right;
    padding-right: 8px;
}

.calendar .schedule .time-interval {
    border: 1px solid #ccc;
    border-bottom-width: 0;
    border-left-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar .schedule .time-interval:not(.inactive) {
    cursor: pointer;
}

.calendar .schedule .hour-interval:last-child .time-interval:last-child {
    border-bottom-width: 1px;
}

/* .calendar .schedule:last-child .time-interval {border-right: none;} */

.modal-schedule .schedule .time-interval {
    cursor: default;
}

.calendar .schedule .time-interval .bi {
    color: #1c263d;
    font-size: 0;
}

.calendar .schedule .time-interval .time {
    position: absolute;
    right: 5px;
    top: 1px;
    font-size: 11px;
    color: #666;
}

.calendar .schedule .time-interval > * {
    transition: .1s;
    opacity: 0;
}

.calendar .schedule .time-interval:hover > * {
    opacity: 1;
}

.calendar .schedule .time-interval:hover .bi {
    font-size: 14px;
}

.calendar .schedule.current .time-interval {
    /* background-color: #d9fff6; */
    /* background-color: #d8f1f9; */
    background-color: #d8f1f98a;
}

.calendar:not(.modal-schedule) .schedule .time-interval:not(.inactive):hover {
    background-color: #fff;
}

.calendar:not(.modal-schedule) .schedule.current .time-interval:hover {
    /* background-color: #edfffb; */
    background-color: #d8f1f9;

}

.calendar .schedule .availability-period,
.calendar .schedule .booking {
    position: absolute;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 5px;
    z-index: 1;
}

.calendar .schedule .availability-period.unavailable {
    opacity: .7;
    background: repeating-linear-gradient(24deg,rgba(196,205,220,.85) 3px,rgba(196,205,220,.85) 8px,hsla(0,0%,72%,.15) 0,hsla(0,0%,72%,.15) 13px);
    background-color: rgba(0,0,0,.4);
    border-color: #999;
}

.calendar .schedule .availability-period.available {
    background-color: rgba(49,159,79,.2);
    border-color: rgba(49,159,79,.2);
}

.calendar.events-disabled .schedule .availability-period.available {
    pointer-events: none;
}

.calendar .schedule .booking {
    cursor: pointer;
    overflow: hidden;
    background-color: #666;
    right: 0;
    border-left-width: 5px;
    width: 0;
    height: 0;
    z-index: 2;
}

.calendar .schedule .booking:hover {
    filter: brightness(1.3);
}

/* .calendar:not(.week) .schedule .booking.status-canceled {background-color: rgba(215,59,41,1);}
.calendar:not(.week) .schedule .booking.status-booked {background-color: rgb(55,118,224,1);}
.calendar:not(.week) .schedule .booking.status-completed {background-color: rgb(42,154,72,1);} */

.calendar .schedule .booking.status-canceled {border-color: rgba(215,59,41,1);}
.calendar .schedule .booking.status-booked {border-color: rgb(238,178,5,1);}
.calendar .schedule .booking.status-completed {border-color: rgb(42,154,72,1);}
.calendar .schedule .booking.status-confirmed {border-color: rgb(55,118,224,1);}

.calendar .schedule .booking .info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 13px;
    line-height: 18px;
    color: #fff;
    padding: 0 3px;
    white-space: nowrap;
}

.calendar .pick-time-box {
    position: absolute;
    left: 0;
    width: 100%;
    border: 1px solid rgba(66,133,245,1);
    background-color: rgba(66,133,245,.7);
    border-radius: 5px;
    pointer-events: none;
}

.calendar .pick-time-box span {
    font-size: 14px;
    line-height: 20px;
    color: #333;
    margin: 2px 0 0 5px;
}

.calendar .calendar-error-msg {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: #666;
    margin-top: 50px;
}

.calendar .current-time-pointer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
    pointer-events: none;
}

.calendar .hours .current-time-pointer {
    left: 0;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 6px solid #de3f32;
    border-bottom: 6px solid transparent;
    margin-top: -5px;
}

.calendar .schedule .current-time-pointer {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #de3f32;
    /* border-radius: 50%; */
}

.calendar .schedule .current-time-pointer:before {
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 6px solid #de3f32;
    border-bottom: 6px solid transparent;
}

.calendar .schedule .current-time-pointer:after {
    content: '';
    position: absolute;
    top: -5px;
    right: 0;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: 6px solid #de3f32;
    border-bottom: 6px solid transparent;
}

.calendar.day .schedule .current-time-pointer:before,
.calendar.day .schedule .current-time-pointer:after {display: none;}
.calendar.day .schedule:nth-child(2) .current-time-pointer:before,
.calendar.day .schedule:last-child .current-time-pointer:after {display: block;}

.calendar-filter .current-date {
    display: inline-block;
}

.calendar-booking-tooltip.show {
    opacity: 1;
}

.calendar-booking-tooltip .tooltip-inner {
    text-align: left;
    max-width: none;
    padding: 10px;
    border: 1px solid #475166;
}

.calendar-booking-tooltip .section {
    margin-bottom: 20px;
}

.calendar-booking-tooltip .section:last-child {
    margin-bottom: 0;
}

.calendar-booking-tooltip .section .title {
    font-weight: bold;
    margin-bottom: 5px;
}

.calendar-booking-tooltip .service {
    border-bottom: 1px solid #475166;
    position: relative;
    padding-right: 100px;
    padding-bottom: 3px;
    margin-bottom: 3px;
    line-height: normal;
}

.calendar-booking-tooltip .service .time {
    position: absolute;
    top: 0;
    right: 0;
}

.calendar-booking-tooltip .service .doctor {
    padding-left: 10px;
    color: #999;
}

.calendar-booking-tooltip .service:last-child {
    border-bottom: none;
}

.calendar-settings-tooltip {
    padding: 10px;
    background-color: #1c263d;
    color: #fff;
    position: absolute;
    top: 0;
    right: calc(100% + 5px);
}

.doctors-schedule-modal .current-date {
    font-size: 14px;
}

.input-loading .loader .spinner-border {
    border-width: 1px;
    display: none;
}

.input-loading.active .loader .bi {
    display: none;
}

.input-loading.active .loader .spinner-border {
    display: inline-block;
}

#booking_form .items-pack,
#booking_form .items-service,
#booking_form .items-product {
    margin-top: 40px;
}

.booking-modal-view .items {
    margin-bottom: 20px;
}

/* .booking-modal-view .items:last-child {
    margin-bottom: 0;
} */

#booking_form .items-title,
.booking-modal-view .items .title {
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    margin: 5px 10px;
    color: #666;
}

#booking_form .items .item,
.booking-modal-view .items .item {
    margin-bottom: 10px;
    /* padding: 10px 0 5px; */
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    position: relative;
}

.booking-modal-view .items .item {
    margin-bottom: 5px;
}

#booking_form .items .item.ui-sortable-helper {border-bottom: none;}

/* #booking_form .items .item:first-child {padding-top: 0;} */
/* #booking_form .items .item:last-child {border-bottom: none;} */
#booking_form .items .item:last-child,
.booking-modal-view .items .item:last-child {margin-bottom: 0;}

#booking_form .item .drag-handler {
    position: absolute;
    z-index: 1;
    width: 33px;
    height: 100%;
    top: 0;
    left: 0;
    /* background-color: #eee;
    opacity: 0;
    transition: .3s; */
    cursor: ns-resize;
}

/* #booking_form .item:hover .drag-handler {
    opacity: 1;
} */

#booking_form .items:not(.ui-sortable) .drag-handler {
    display: none;
}

#booking_form .item #removeItemBtn {
    position: absolute;
    top: 1px;
    left: 0;
    z-index: 2;
}

#booking_form .item #removeItemBtn,
#booking_form .item #applyDiscountBtn,
#booking_form .item #removeDiscountBtn,
#booking_form .item #changeDoctorToAllServicesBtn {
    transition: .3s;
}

#booking_form .item #removeItemBtn,
#booking_form .item #changeDoctorToAllServicesBtn {
    /* opacity: 0; */
    opacity: .3;
}

#booking_form .item #applyDiscountBtn,
#booking_form .item #removeDiscountBtn,
#booking_form .item:hover #removeItemBtn,
#booking_form .item:hover #changeDoctorToAllServicesBtn {opacity: .3;}

#booking_form .item #removeItemBtn:hover,
#booking_form .item #applyDiscountBtn:hover,
#booking_form .item #removeDiscountBtn:hover,
#booking_form .item #changeDoctorToAllServicesBtn:hover {opacity: 1;}

#booking_form .item #removeDiscountBtn .bi {
    font-size: 20px;
    line-height: 1;
}

#booking_form .item .item-name,
.booking-modal-view .item .item-name {
    font-weight: bold;
    color: #555;
    line-height: 24px;
    /* padding-top: 7px; */
    display: inline-block;
}

#booking_form .item .item-name {
    padding-left: 20px;
    /* align-items: center; */
}

#booking_form .item .prop {
    padding-left: 35px;
    margin-top: 5px;
}

.booking-modal-view .item .prop {
    padding-left: 15px;
    margin: 5px 0;
}

.prop-label {
    color: #666;
    margin-right: 5px;
}

#booking_form .item .original-price.discounted,
.booking-modal-view .item .original-price.discounted {
    text-decoration: line-through;
    color: #d73b29;
}

#booking_form .item .srv-duration,
.booking-modal-view .item .srv-duration {
    margin-left: 5px;
}

#booking_form .item .price,
.booking-modal-view .item .price {
    position: relative;
}

#booking_form .item .price > .amount .bi-currency-euro,
.booking-modal-view .price > .amount .bi-currency-euro {letter-spacing: -4px;}

#booking_form .item .price .custom-discount-container {
    position: absolute;
    bottom: 100%;
    width: 250px;
}

#booking_form .item .price .custom-discount-container .amount {
    flex: 0 0 50px;
    text-align: center;
}

#booking_form .item .price .custom-discount-container input.is-invalid {
    background-image: none;
    padding-right: .5rem;
}

#booking_form .item .select-doctor-btn {
    cursor: pointer;
    border: 1px solid transparent;
    transition: .3s;
    position: relative;
    font-size: 0;
    display: inline-block;
    padding-right: 5px;
}

#booking_form .item .select-doctor-btn:hover {
    border-color: #ccc;
}

#booking_form .item .select-doctor-btn.is-invalid {
    border-color: #dc3545;
}

#booking_form .item .select-doctor-btn .staff-image {
    vertical-align: -5px;
    margin: 2px 0 2px 5px;
}

#booking_form .item .select-doctor-btn .doctor-name {
    font-size: 16px;
    padding: 5px;
}

#booking_form .item #doctorsScheduleBtn {
    font-size: .75em;
    line-height: 1;
    padding: .10em .65em .35em;
    vertical-align: 2px;
}

#booking_form .item .select2 {
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100% !important; */
    height: 100%;
    opacity: 0;
    overflow: hidden;
}

#booking_form .select-doctor-dropdown {
    min-width: 200px;
}

#booking_form .items .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    padding-left: 5px;
    padding-right: 5px;
}

#booking_form .items-total .prop-label,
.booking-modal-view .items-total .prop-label {
    padding-right: 5px;
}

#booking_form .items-total .prop-val,
.booking-modal-view .items-total .prop-val {
    text-align: right;
    min-width: 110px;
}

#booking_form .items-total .total,
.booking-modal-view .items-total .total {
    font-weight: bold;
}

#booking_form .items-total .discount,
.booking-modal-view .items-total .discount {
    border-top: 1px solid #ccc;
}

#booking_form .items-total tbody tr:nth-last-of-type(2),
.booking-modal-view .items-total tbody tr:nth-last-of-type(2) {
    border-bottom: 1px solid #ccc;
}

#booking_form .note,
.booking-modal-view .note {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

#booking_form .notes .note:last-child,
.booking-modal-view .notes .note:last-child {
    border: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#booking_form .note .note-header,
.booking-modal-view .note .note-header {
    color: #666;
    margin-bottom: 5px;
    position: relative;
    padding-right: 25px;
}

#booking_form .note-header .controls,
.booking-modal-view .note-header .controls {
    position: absolute;
    top: 0;
    right: 5px;
}

#booking_form .note-header .controls > div,
.booking-modal-view .note-header .controls > div {
    display: inline-block;
    margin-left: 5px;
}

#booking_form .note-header .controls > div.active,
.booking-modal-view .note-header .controls > div.active {
    opacity: 1 !important;
}

#booking_form .note .note-body,
.booking-modal-view .note .note-body {
    line-height: normal;
}

#booking_form .note-form textarea,
#booking_form .note-edit-form textarea,
.booking-modal-view .note-form textarea,
.booking-modal-view .note-edit-form textarea {
    /* min-height: 38px; */
    /* height: 38px; */
    line-height: normal;
    resize: none;
}

#booking_form .note-form.input-group-sm textarea,
#booking_form .note-edit-form.input-group-sm textarea,
.booking-modal-view .note-form.input-group-sm textarea,
.booking-modal-view .note-edit-form.input-group-sm textarea {
    min-height: 31px;
    height: 31px;
}

#booking_form .note-form,
.booking-modal-view .note-form {
    margin-bottom: 10px;
}

.inner-nav {
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
}

.inner-nav ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
}

.inner-nav li {
    display: block;
    list-style: none;
    position: relative;
}

.inner-nav li:before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: transparent;
    z-index: 0;
}

.inner-nav li a {
    display: block;
    height: calc(100% + 3px);
    padding: 10px;
    border-bottom: 5px solid transparent;
    position: relative;
    z-index: 1;
    color: rgba(28,38,61,.5);
}

.inner-nav li:not(.disabled) a:hover {
    color: #1c263d;
}

.inner-nav li:not(.disabled, .active):hover a {
    border-bottom-color: rgba(28,38,61,.3);
}

.inner-nav li:not(.disabled):hover:before {
    background-color: #fff;
}

.inner-nav li.disabled {pointer-events: none;}
.inner-nav li.disabled a {cursor: default;}
.inner-nav li.disabled a .lock-icon {display: inline !important;}

.inner-nav li.active a {
    border-bottom-color: #1c263d;
    color: #1c263d;
}

.inner-nav .btn-close {
    height: 100%;
    padding: 0 15px;
}

.booking-modal-view {
    font-size: 13px;
    line-height: normal;
}

.modal .inner-nav {
    height: 50px;
}

.modal .inner-nav li a {
    padding: 10px 15px;
}

.modal .inner-nav li a .lock-icon {display: none;}

.booking-modal-view .info #status {
    padding: 0;
}

/* .booking-modal-view .items .title, */
.booking-modal-view .booking-info-section .title {
    font-weight: bold;
    color: #666;
    font-size: 16px;
    margin-bottom: 5px;
}

/* .booking-modal-view .items .title *, */
.booking-modal-view .booking-info-section .title * {
    vertical-align: middle;
}

.booking-modal-view .left-info-panel {
    border: 0 solid #dee2e6;
    border-right-width: 1px;
}

.dropdown-item-custom-icon {
    vertical-align: middle;
}

.dropdown-item-custom-icon img {
    height: 10px;
    margin-right: 5px;
}

.permissions-page .check-all-category {
    position: absolute;
    left: 0;
}

.permissions-page .form-check-inline .form-check-label {
    line-height: 18px;
}



/* ----------------------------------------------------------------------------------------------- */
/* LOADINGS */
/* ----------------------------------------------------------------------------------------------- */
.wrapper,
.modal-body {
    position: relative;
    transition: .3s;
}

.wrapper.loading:after,
.modal-body.loading:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.15) url('../images/derma-act_loading_short.gif') center no-repeat;
    background-size: 10%;
    z-index: 99999;
}

.input-group .dropdown-select {
    width: 100%;
    flex: content;
}

.input-group .dropdown-select .dropdown-toggle {
    width: 100%;
}

.input-group .dropdown-select:not(:first-child) .dropdown-toggle {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .dropdown-select:not(:last-child) .dropdown-toggle {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.dropdown-select .dropdown-toggle {
    text-align: start;
    padding-right: 20px;
    background-color: rgba(var(--bs-white-rgb), 1);
}

.dropdown-select .dropdown-toggle:after {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    height: 1px;
}

.dropdown-select .dropdown-item {
    cursor: pointer;
}



/* ----------------------------------------------------------------------------------------------- */
/* OTHER CSS FIXES */
/* ----------------------------------------------------------------------------------------------- */

.btn-custom-sm {
    padding-top: 0;
    padding-bottom: 0;
}

.border-gray-custom {
    border-color: #ccc !important;
}

/* lc-lowercase */
.bs-badge-lc-fix {
    padding: .10em .65em .35em;
    vertical-align: 2px;
}

.bsTooltipTextLeft .tooltip-inner {text-align: left;}

.input-group-xs > .btn,
.input-group-xs > .form-control, 
.input-group-xs > .form-select, 
.input-group-xs > .input-group-text {
    font-size: 13px;
    padding: 3px 5px;
}

.input-group-xs > .form-select {
    background-position: right 6px center;
    padding-right: 25px;
}

.btn-group-xs > .btn,
.btn-xs {
    padding: 2px 5px;
    font-size: 13px;
}

.nav-link, .nav-link:focus, .nav-link:hover {color: #888;}
.nav-link.active,
.dropdown-item.active {cursor: default;}

.nav-tabs .nav-link.active {
    background-color: #f9f9f9;
    border-bottom-color: #f9f9f9;
}

/* bs tooltip on days is under the calendar - fix */
/* .flatpickr-calendar.open {z-index: 1080 !important;} */
.tooltip {z-index: 99999 !important;}

.flatpickr-calendar.inline {
    box-shadow: none;
    border: 1px solid #ccc;
}

.tooltip .tooltip-inner {background-color: #1c263d;}
.bs-tooltip-top .tooltip-arrow:before {border-top-color: #1c263d;}
.bs-tooltip-bottom .tooltip-arrow:before {border-bottom-color: #1c263d;}
.bs-tooltip-start .tooltip-arrow:before {border-left-color: #1c263d;}
.bs-tooltip-end .tooltip-arrow:before {border-right-color: #1c263d;}
.tooltip.tt-text-left .tooltip-inner {text-align: left;}

span.flatpickr-day.today:not(.selected),
span.flatpickr-day.unavailable:not(.selected) {
    border-bottom-width: 2px;
}

span.flatpickr-day.nextMonthDay.today:not(.selected), 
span.flatpickr-day.prevMonthDay.today:not(.selected), 
span.flatpickr-day.today:not(.selected) {
    border-bottom-color: #666 !important;
}

span.flatpickr-day.nextMonthDay.today:not(.selected):hover, 
span.flatpickr-day.prevMonthDay.today:not(.selected):hover, 
span.flatpickr-day.today:not(.selected):hover {
    border-color: #4285f5 !important;
}

.flatpickr-day.today:focus, 
.flatpickr-day.today:hover {
    background-color: #4285f5 !important;
}

.flatpickr-day.nextMonthDay, 
.flatpickr-day.prevMonthDay {
    color: rgba(64,72,72,.5) !important;
}

.flatpickr-day.flatpickr-disabled, 
.flatpickr-day.flatpickr-disabled:hover, 
.flatpickr-day.notAllowed, 
.flatpickr-day.notAllowed.nextMonthDay, 
.flatpickr-day.notAllowed.prevMonthDay {
    color: rgba(234,68,54,.4) !important;
}

/* .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    color: #fff !important;
} */

.select2-container--bootstrap-5.select2-container--disabled .select2-selection, 
.select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection {
    cursor: pointer !important;
}

span.flatpickr-day.unavailable:not(.selected) {border-bottom-color: #f68c1f !important;}

span.flatpickr-day.circle {position: relative;}
span.flatpickr-day.circle:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 90%;
    height: 90%;
    border: 1px solid #1c263d;
    border-radius: 100%;
}

.select2 {width: auto !important;}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role="group"] .select2-results__group {
    display: block;
    background-color: #6c757d;
    color: #fff !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled, 
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled="true"] {
    background-color: rgba(255,0,0,.05);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected *,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"] * {
    color: #fff !important;
}

.select2-container--bootstrap-5 .select2-dropdown.select-doctor-dropdown .select2-results__options .select2-results__option {
    line-height: 1;
    padding: .3rem .5rem;
}

.input-group .select2-container--bootstrap-5 {
    width: 1% !important;
    flex: 1 1 auto !important;
}

.input-group .select2-selection__rendered {
    overflow: hidden !important;
    white-space: nowrap !important;
}

.input-group-sm .select2-container--bootstrap-5 .select2-selection {
    min-height: auto !important;
}
.input-group-sm .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered:not(:empty) {
    padding-bottom: 0 !important;
}
.input-group-sm .select2-container--bootstrap-5 .select2-selection--multiple .select2-search, 
.input-group-sm .select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
    height: auto !important;
}

.table thead th {
    vertical-align: middle;
    line-height: normal;
    color: #666;
}

.table .caret-cell {
    position: relative;
    cursor: pointer;
}

.table .caret-cell:hover {
    /* background-color: #dfdfdf; */
    --bs-table-accent-bg: var(--bs-table-active-bg);
    color: var(--bs-table-active-color);
}
/* .table.table-dark .caret-cell:hover {background-color: #dfdfdf !important;} */

.table .caret-cell:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 5px solid #000;
    border-left: 5px solid transparent;
}
.table.table-dark .caret-cell:before {border-bottom-color: #fff;}