/**
 * Global V2 CSS - Dashboard & Frontend Styles
 * 
 * IMPORTANT: Settings Page Exclusion Pattern
 * ===========================================
 * The Settings page (.backstage-settings-container) has its own dedicated CSS file:
 * settings-master.css which provides complete styling isolation.
 * 
 * To prevent conflicts, any global styles that might interfere with settings
 * should use the :not(.backstage-settings-container) exclusion pattern.
 * 
 * Example:
 *   DON'T: .cbs2-input[type="text"] { ... }
 *   DO:    :not(.backstage-settings-container) .cbs2-input[type="text"] { ... }
 * 
 * This ensures global styles only apply to non-settings pages (dashboards, frontend, etc.)
 * while settings remain completely isolated and conflict-free.
 * 
 * See settings-master.css for the authoritative settings styling.
 */

.csb-horizontal-nav {
    background: #000!important;
    border-bottom: 0;
    position: relative;

}

/* Vertical menu background, border, and position moved to dedicated vertical-menu.css file */

.backstage-section .dashboard-part {
    border-right: 0;
}

.dashboard-part-items-list .items-archive {
    height: calc( 100% - 98px );
    overflow-y: auto;
    overflow-x: visible;
}

.hotel-info .group-title-info {
    flex: 1;
}


/** Heading */
.cbs2-heading {
    font-family: 'Poppins';
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
    font-size: 14px;
}

#cbs-canned-wrapper {
    margin-bottom: 20px;
}

#cbs-canned-content {
    margin-top: 10px;
}

.cbs2-heading.--large {
    font-size: 25px;
}

.cbs2-heading.--small {
    font-size: 12px;
}

.budget-total-row {
    display: contents;
    align-items: flex-end;
}

#budget-entries-container {
    display: contents;
}

#budget-entries-container .budget-entry {
    display: contents;
    align-items: flex-end;
}

.number-trash-container {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cbs-row-add-budget{
    font-family: Poppins;
}

.cbs-row-add-budget:hover{
    background: var(--event-secondary-color, #4FF6B1) !important;
    color: #FFFFFF;
    -webkit-appearance: none;
    border: 2px solid var(--event-secondary-color, #4FF6B1) !important;
}

.remove-budget-entry {
    background: none;
    display: flex;
    width: 20px;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 1.25rem;
}


/** Button */
/* Excludes settings container - settings use settings-master.css */
:not(.backstage-settings-container) .cbs2-button {
    background: var(--event-primary-color, #4323FF);
    padding: 10px 28px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 21px;
    font-family: Poppins;
    letter-spacing: 0.21875px;
    min-width: 130px;
    color: #fff;
    border: 0;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
    transition: all .4s;
}

.cbs2-button:hover {
    background: var(--event-secondary-color, #4FF6B1);
    color: #FFFFFF;
    -webkit-appearance: none;
}

.cbs2-button.--transparent {
    border: 2px solid #6707FD;
    background: none;
}

.cbs2-button.--transparent.--green {
    border-color: var(--event-secondary-color, #4FF6B1);
    color: var(--event-secondary-color, #4FF6B1);
}

.cbs2-button.--transparent.--green:hover {
    background: var(--event-secondary-color, #4FF6B1);
    color: #000;
}


/** Icon Button */
.cbs2-icon-button {
    color: #fff;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 0;
    background: #323440;
    border-radius: 4px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 10px;
}

.cbs2-icon-button img { 
    margin: 0;
}

.cbs2-icon-button .svg-icon {
    line-height: 0;
}

.cbs2-icon-button.--with-text {
    width: auto;
    height: auto;
    padding: 7px 20px;
    background: none;
    font-weight: 600;
    border: 0;
}

.cbs2-icon-button.--with-text.--normal {
    font-weight: 500;
    font-size: 12px;
}

.cbs2-icon-button.--delete {
    border-radius: 50px;
    background: #16181D;
    color: #EE0F0F;
}

.cbs2-icon-button.--delete .icon {
    margin-bottom: -5px;
}

.rfp-id-feedback.success {
    color: green;
}
.rfp-id-feedback.error {
    color: #E74C3C !important;
}
.et-gs-title-flex-rpf{
    display: flex;
}
.et-gs-title-flex-rpf span.icon {
    width: 23px;
    height: 23px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}
.et-gs-title-flex-rpf span.icon.icon-changes-log {
    background: url("../../assets/icons/2024/icon_Changes_log.svg") no-repeat;
    width: 18px;
    height: 18px;
    margin-left: 5px;
}

a.cbs-tooltip.cbs-tooltip-component.rpf-change-logs {
    padding-left: 10px;
    position: relative;
    align-items: center;
    display: flex;
}

span.lock-rfp{
    background: url("../icons/lock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}
span.unlock-rfp{
    background: url("../icons/unlock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}
.disabled-locked {
    pointer-events: none !important;
    cursor: not-allowed !important;
    background: #141416 !important;
    color: #A3A3A3 !important;
    border: 2px solid #777E90 !important;
    background: #2F2F31 !important;
    color: white !important;
}

span.lock-room-id{
    background: url("../icons/lock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}
span.room-id{
    background: url("../icons/unlock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}
.disabled-locked-room-id {
    pointer-events: none;
    cursor: not-allowed;
    border: none !important;
    background: #141416 !important;
    color: #A3A3A3 !important;
}

.room-id-change-logs.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.icon-changes-log.has-logs {
    color: green;
    cursor: pointer;
}

.icon-changes-log.no-logs {
    color: gray;
    cursor: default;
}

.cbs-rfp-id-field {
    display: flex;
    gap: 5px;
    position: relative;
    align-items: center;
    margin-bottom: 10px;
}

.cbs-room-id-field{
    display: flex;
    gap: 5px;
    position: relative;
    align-items: center;
    margin-bottom: 10px;
}

.cbs-room-id-field input {
    border: 2px solid transparent !important;
    transition: border-color 0.3s ease-in-out;
}

.cbs-room-id-field input:hover {
    border: 2px solid var(--event-primary-color, #4323FF) !important;
}
.cbs-room-id-field.input-error {
    border: 2px solid #FF6A55 !important;
    background: #262021;
}
.cbs-room-id-field input.input-error:hover {
    border: 2px solid #FF6A55 !important;
}

.cbs-room-id-field input:focus {
    border: 2px solid var(--event-primary-color, #4323FF) !important;
    outline: none;
}
.cbs-room-id-field input.input-error:focus {
    border: 2px solid #FF6A55 !important;
    outline: none;
}

.cbs-room-id-field.success {
    color: green;
}

.input-error {
    border: 1px solid #E74C3C !important;
}

.room-id-fields-header{
    cursor: pointer;
    width: 100%;
    white-space: nowrap;
}

.rfp-id-feedback.success {
    color: green;
}
.rfp-id-feedback.error {
    color:#E74C3C !important;
}
.et-gs-title-flex-rpf{
    display: flex;
}
.rfp-hotel-input{
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    height: 40px;
    padding: 12px;
    border: 2px solid #2F2F31;
    border-radius: 8px;
    background: #2F2F31;
    box-sizing: border-box;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: border 0.4s, background-color 0.4s;
}

.rfp-room-input{
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    height: 40px;
    padding: 12px;
    border: 2px solid #2F2F31;
    border-radius: 8px;
    background: #2F2F31;
    box-sizing: border-box;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    outline: none;
    transition: border 0.4s, background-color 0.4s;
}

.unlock-room-id{
    background: url("../icons/unlock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}

.room-id-locked-icon.lock-room-id:hover {
    filter: brightness(0) saturate(100%) invert(22%) sepia(92%) saturate(4200%) hue-rotate(230deg) brightness(107%) contrast(93%);
    cursor: pointer;
}

.room-id-locked-icon.lock-room-id:hover {
    filter: brightness(0) saturate(100%) invert(22%) sepia(92%) saturate(4200%) hue-rotate(230deg) brightness(107%) contrast(93%);
    cursor: pointer;
}

.rfp-locked-icon.lock.lock-rfp:hover {
    filter: brightness(0) saturate(100%) invert(22%) sepia(92%) saturate(4200%) hue-rotate(230deg) brightness(107%) contrast(93%);
    cursor: pointer;
}

.rfp-locked-icon.lock-rfp:hover {
    filter: brightness(0) saturate(100%) invert(22%) sepia(92%) saturate(4200%) hue-rotate(230deg) brightness(107%) contrast(93%);
    cursor: pointer;
}

span.lock-service-fee {
    background: url("../icons/lock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}

span.unlock-service-fee {
    background: url("../icons/unlock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}

span.lock-cc-fee {
    background: url("../icons/lock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}

span.unlock-cc-fee {
    background: url("../icons/unlock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}

span.lock-commission-share {
    background: url("../icons/lock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}

span.unlock-commission-share {
    background: url("../icons/unlock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}

span.lock-room-profit-share {
    background: url("../icons/lock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}

span.unlock-room-profit-share {
    background: url("../icons/unlock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}

span.lock-rebate-share {
    background: url("../icons/lock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}

span.unlock-rebate-share {
    background: url("../icons/unlock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}

span.lock-payment-gateway {
    background: url("../icons/lock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}

span.unlock-payment-gateway {
    background: url("../icons/unlock.svg") no-repeat;
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(81%) sepia(34%) saturate(755%) hue-rotate(91deg) brightness(104%) contrast(93%);
    display: block;
    cursor: pointer;
}

.cc-fee-locked-icon.lock-cc-fee:hover,
.service-fee-locked-icon.lock-service-fee:hover,
.commission-share-locked-icon.lock-commission-share:hover,
.room-profit-share-locked-icon.lock-room-profit-share:hover,
.rebate-share-locked-icon.lock-rebate-share:hover,
.payment-gateway-locked-icon.lock-payment-gateway:hover {
    filter: brightness(0) saturate(100%) invert(22%) sepia(92%) saturate(4200%) hue-rotate(230deg) brightness(107%) contrast(93%);
    cursor: pointer;
}


.hotel-id-input{
    display: flex;
    flex-direction: column;
}

.hotel-id-input input {
    border: 2px solid transparent !important;
    transition: border-color 0.3s ease-in-out;
}

.hotel-id-input input:hover {
    border: 2px solid var(--event-primary-color, #4323FF) !important;
}
.hotel-id-input.input-error {
    border: 2px solid #FF6A55 !important;
    background: #262021;
}
.hotel-id-input input.input-error:hover {
    border: 2px solid #FF6A55 !important;
}

.hotel-id-input input:focus {
    border: 2px solid var(--event-primary-color, #4323FF) !important;
    outline: none;
}
.hotel-id-input input.input-error:focus {
    border: 2px solid #FF6A55 !important;
    outline: none;
}

.hotel-id-input.success {
    color: green;
}

.room-id-input{
    display: flex;
    flex-direction: column;
    grid-column: span 2;
    margin-top: 15px;
}

.room-id-fields .room-id-input {
    display: none;
}
.room-id-fields.--expanded .room-id-input {
    display: block;
}

.cbs2-tooltip.new-tooltip .cbs2-tooltip-icon{
    margin-left:8px;
    border: 1px solid var(--admin-brand-accent, var(--event-secondary-color, var(--cfbc-cyan, #4FF6B1))) !important;
    fill: var(--admin-brand-accent, var(--event-secondary-color, var(--cfbc-cyan, #4FF6B1)));
    color: var(--admin-brand-accent, var(--event-secondary-color, var(--cfbc-cyan, #4FF6B1))) !important;
    width: 16px;
    height: 16px;
    background: transparent !important;
    align-items: baseline !important;
}

.error-icon {
    background: url("../icons/icon_Cancel.svg") no-repeat center;
    background-size: 15px 30px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
    filter: invert(56%) sepia(92%) saturate(600%) hue-rotate(320deg) brightness(90%) contrast(100%);
    margin-bottom: 3px;
}
.success-icon {
    background: url(../icons/icon_Chek.svg) no-repeat center;
    background-size: 15px 30px;
    display: inline-block;
    width: 30px;
    height: 30px;
    max-width: 2.0rem !important;
    max-height: 20px;
    vertical-align: middle;
    margin-bottom: 3px;
}

.hotel-id-feedback.success {
    color: #4cf6b3;
}
.hotel-id-feedback.error {
    filter: invert(56%) sepia(92%) saturate(600%) hue-rotate(320deg) brightness(90%) contrast(100%);
}

.room-id-feedback.success{
    color: #4cf6b3;
}

.room-id-feedback.error{
    filter: invert(56%) sepia(92%) saturate(600%) hue-rotate(320deg) brightness(90%) contrast(100%);
    color: #E74C3C;
}

.hotel-id-change-logs.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.icon-changes-log.has-logs {
    color: green;
    cursor: pointer;
}

.icon-changes-log.no-logs {
    color: gray;
    cursor: default;
}


/** Add Item Button */
.cbs2-add-item-button {
    width: 100%;
    display: block;
    text-align: center;
    border-radius: 2px;
    height: 40px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    gap: 10px;
    background: linear-gradient(to right, #777E90 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(#777E90 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(to right, #777E90 50%, rgba(255, 255, 255, 0) 0%), linear-gradient(#777E90 50%, rgba(255, 255, 255, 0) 0%);
    background-position: top, right, bottom, left;
    background-repeat: repeat-x, repeat-y;
    background-size: 10px 1px, 1px 10px;
}

.cbs2-add-item-button * {
    color: #fff;
}

.cbs2-add-item-button .icon img {
    margin: 0;
    max-width: 22px
}


/** Input */
/* Excludes settings container - settings use settings-master.css */
:not(.backstage-settings-container) .cbs2-input[type="text"],
:not(.backstage-settings-container) .cbs2-input[type="url"],
:not(.backstage-settings-container) .cbs2-input[type="email"],
:not(.backstage-settings-container) .cbs2-input[type="number"],
:not(.backstage-settings-container) .cbs2-select2 .select2,
:not(.backstage-settings-container) .cbs2-textarea,
:not(.backstage-settings-container) .cbs2-select,
:not(.backstage-settings-container) .cbs2-custom-select-selected {
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    height: 40px;
    padding: 8px;
    border: 2px solid #2F2F31;
    border-radius: 8px;
    background: #2F2F31;
    box-sizing: border-box;
    width: 100%;
    font-family: 'Poppins';
    outline: none;
    transition: border 0.4s, background-color 0.4s;
}

.custom-number-input.booking-limit-input input, .custom-number-input.inventory-limit-input input,
.booking-limit-wrapper input[name="booking_limit"], .inventory-limit-wrapper input[name="inventory"] {
    border: none !important;
    margin: 5px 0 !important;
    padding: 11px 10px !important;
    background-color: #2f2f31 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.booking-limit-wrapper, .inventory-limit-wrapper {
    display: flex;
}

/* Excludes settings container - settings use settings-master.css */
:not(.backstage-settings-container) .cbs2-input[type="text"].error,
:not(.backstage-settings-container) .cbs2-input[type="url"].error,
:not(.backstage-settings-container) .cbs2-input[type="email"].error,
:not(.backstage-settings-container) .cbs2-input[type="number"].error,
:not(.backstage-settings-container) .cbs2-select2 .select2.error,
:not(.backstage-settings-container) .cbs2-textarea.error,
:not(.backstage-settings-container) .cbs2-select.error,
:not(.backstage-settings-container) .cbs2-custom-select-selected.error {
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    height: 40px;
    padding: 12px;
    border: 2px solid #FF6A55;
    border-radius: 8px;
    background: rgba(255, 106, 85, 0.04);
    box-sizing: border-box;
    width: 100%;
    font-family: 'Poppins';
    outline: none;
    transition: border 0.4s, background-color 0.4s;
}

.cbs2-input[type="text"]:hover,
.cbs2-input[type="url"]:hover,
.cbs2-input[type="email"]:hover,
.cbs2-input[type="number"]:hover,
.cbs2-select2 .select2:hover,
.cbs2-textarea:hover,
.cbs2-select:hover,
.cbs2-custom-select-selected:hover {
    border: 2px solid var(--event-primary-color, #4323FF) !important;
}

.error-message {
    color: #E74C3C;
}

.event-address{
    border: none;
    background-color: #2f2f31;
    -webkit-appearance: none;
}

.cbs2-input.info.address-event {
    border: none;
    background: #2f2f31;
    -webkit-appearance: none;
}

.cbs2-textarea {
    min-height: 120px;
}

.cbs2-input[type="text"].--date.disabled {
    background-image: url(../icons/calender-gray.svg);
}

.cbs2-input[type="text"].--date {
    background-image: url(../icons/calender.svg);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: calc(100% - 12px);
}

.cbs2-input[type="text"].--date-event-hotel {
    background-image: url(../icons/calender.svg);
    background-repeat: no-repeat;
    background-color: #2f2f31;
    border: none;
    background-size: 16px;
    background-position: calc(100% - 12px);
    -webkit-appearance: none;
}

.cbs2-input[type="text"].disabled {
    color: gray !important;
    background-color: #141416;
    border: 2px solid #141416;
}

.cbs2-input[type="text"].disabled:hover {
    color: gray !important;
    background-color: #141416;
    border: 2px solid #141416;
}

.cbs2-select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;  
    background-image: url(../icons/select-arrow-white.svg);
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: calc(100% - 12px);
    cursor: pointer;
}

/** Cusom Select */
.cbs2-custom-select {
    position: relative;
    cursor: pointer;
}

.cbs2-custom-select-selected {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cbs2-custom-select.--type2 .cbs2-custom-select-selected {
    padding: 0;
    background: 0;
}

.cbs-canned-response-select.cbs2-custom-select.--type2 .cbs2-custom-select-selected:hover {
    border: 2px solid #4eecab;
    background-color: #4eecab;
    color: black;
}
.cbs2-custom-select-options {
    position: absolute;
    width: 100%;
    background: #fff;
    color: #000;
    top: calc( 100% + 10px );
    padding: 8px 15px;
    box-sizing: border-box;
    border-radius: 8px;
    font-weight: bold;
    display: none;
    z-index: 1000;
    font-size: 14px;
    max-height: 200px;
    overflow: auto;
}

.cbs2-custom-select.--type2 .cbs2-custom-select-options {
    top: 100%;
}

@media screen and (max-width: 1440px), (max-height: 900px) {
    .menu-full-current-hotel {
        top: 100%;
        right: 0%;
        width: 22vh;
    }
}

.cbs2-custom-select-options.--open {
    display: block;
}

.cbs2-custom-select-options > div {
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.cbs2-custom-select.--smallText .cbs2-custom-select-options > div  {
    font-weight: 500;
    font-size: 12px;
    padding: 5px 0;
    text-transform: capitalize;
}

.cbs2-custom-select-options > div:hover,
.cbs2-custom-select-options > div.--current {
    color: #6707FD;
}

.cbs2-custom-select .cbs2-tooltip-text {
    width: 200px;
    box-shadow: 0 0 14px 7px #0000004a;
}




/** Select2 */
.cbs2-select2 .select2 {
    width: 100%!important;
    user-select: none;
    background-image: url(../icons/select-arrow-white.svg);
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: calc(100% - 12px);
}

.cbs2-select2.--time .select2 {
    background-image: url(../icons/clock.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
}


.cbs2-select2 .select2-container--default .select2-selection--single {
    border: 0;
    background: none;
}

.cbs2-select2 .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff;
    padding: 0;
    line-height: 1.2;
    padding-right: 16px;
}

.cbs2-select2.--multiple .select2 {
    height: auto;
    padding: 3px;
}

.cbs2-select2.--multiple .select2-container--default .select2-selection--multiple {
    background: none;
    border: 0;
}

.cbs2-select2.--multiple .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: inline;
}

.cbs2-select2.--multiple .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    background: #4ef6b1;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    border: 0;
}

.cbs2-select2.--multiple .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: relative;
    color: #24262f;
    font-weight: 400;
    border-color: #24262f;
    padding-left: 0;
    background: none!important;
}

.cbs2-select2.--multiple .select2-container--default .select2-selection--multiple .select2-selection__choice__remove span {
    width: 18px;
    height: 18px;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.cbs2-select2.--multiple .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover span {
    background: var(--event-primary-color, #4323FF);
    color: #fff;
}

.cbs2-select2.--multiple .select2-container--default .select2-search--inline .select2-search__field {
    color: #fff;
}

/* Search */
.cbs2-input[type="text"].--search {
    font-size: 12px;
    font-weight: bold;
    background-image: url(../icons/search.svg);
    background-repeat: no-repeat;
    background-position: calc( 100% - 10px );
}



/** Tabs **/
.cbs2-tabs {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #353945;
}

.cbs2-tab-item {
    cursor: pointer;
	font-family: 'Poppins';
	font-size: 14px;
    line-height: 14px;
    text-align: center;
    color: #777E90;
	text-transform:uppercase;
    font-weight: bold;
    height: auto;
    padding: 15px 40px;
    flex-shrink: 0;
    width: auto;
    background: none!important;
}

.cbs2-tab-item-restore{
    cursor: pointer;
    font-family: 'Poppins';
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    color: #777E90;
    text-transform:uppercase;
    font-weight: bold;
    height: auto;
    padding: 15px 18px;
    flex-shrink: 0;
    width: auto;
    background: none!important;
    -webkit-appearance: none;
}

.cbs2-tab-item:hover {
    color: #fff;
    -webkit-appearance: none;
}

.cbs2-tab-item.selected {
    color: #fff;
    border-bottom: 2px solid #6707FD;
    -webkit-appearance: none;
}

.cbs2-tab-item-restore:hover {
    color: #fff;
}

.cbs2-tab-item-restore.selected {
    color: white;
    font-weight: bold;
    border-bottom: none;
    font-size: 14px;
    background-color: #1D1D1F !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/*.content-policies .cbs-select .info{
    width: 28% !important;
}*/

.content-policies .cbs2-tab-content{
    display: flex;
    flex-direction: column;
}

.content-policies .cbs2-tab-content-communication{
    display: flex;
    flex-direction: column;
    -webkit-appearance: none;
}

.cbs-select-department{
    max-width: 600px;
}

.content-policies .policies-container{
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.content-policies .cbs_policies_departments{
    max-width: calc(33.333% - 30px);
}

.cbs-select .info:hover{
    cursor: pointer;
    border-color: var(--event-primary-color, #4323FF);
}

.content-policies .cbs_policy_item{
    flex-basis: calc(33.333% - 30px);
    box-sizing: border-box;
    padding: 0 15px;
    margin-bottom: 20px;
}

.select2-container--default .select2-results__option--selectable:hover,
.select2-container--default .select2-results__option--selected {
    background-color: #212121 !important;
    color: #FFFFFF !important;
    border-left: 2px solid #4ef6b1 !important;
}

.select2-container--open .select2-dropdown--above {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 0px !important;
}

.select2-container--default .select2-results__option--selectable,
.select2-container--default .select2-results__option--selected {
    border-left: 2px solid #2e3031;
}
.select2-container--default .select2-results__option--selectable:last-child,
.select2-container--default .select2-results__option--selected :last-child{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}


.cbs-select2 .cbs-select:hover {
    border: 1px solid var(--event-primary-color, #4323FF);
    cursor: pointer;
}

.cbs-select2 .cbs-select option {
    background-color: transparent;
    color: #000000;
}

.cbs-select2 .cbs-select option:hover {
    background-color: var(--event-primary-color, #4323FF);
    color: #ffffff;
}


.cbs2-textarea:hover{
    cursor: pointer;
    border-color: var(--event-primary-color, #4323FF);
}

@media (max-width: 1440px) {
    .content-policies .cbs_policy_item{
        flex-basis: calc(50% - 30px);
    }

    .content-policies .cbs_policies_departments{
        max-width: calc(50% - 30px);
    }

    .content-policies .cbs-select .info{
        width: 45% !important;
    }
}

@media (max-width: 1000px) {
    .content-policies .cbs_policy_item{
        flex-basis: 100%;
    }
    .content-policies .cbs_policies_departments{
        max-width: 100%;
    }
}

.cbs2-tab-content {
    /*background: #23262F;*/
    border-radius: 12px;
    /*margin-top: 20px;*/
    /*box-shadow: 0px 0px 30px 0px #000000;*/
    /*padding: 40px;*/
    padding-top: 0px;
    -webkit-appearance: none;
}

.cbs2-tab-content-communication{
    background: #23262F;
    border-radius: 12px;
    margin-top: 20px;
    box-shadow: 0px 0px 30px 0px #000000;
    padding: 40px;
    -webkit-appearance: none;
}

.cbs2-tab-content-restore-groups-hotels{
    border-radius: 12px;
    padding: 40px;
}

.cbs2-tab-content-super-admin {
    justify-content: space-between;
    padding: 40px;
    gap: 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -webkit-appearance: none;
}

.cbs2-tab-content-super-admin > .options,
.cbs2-tab-content-super-admin > .cbs-super-admin-view {
    flex-basis: calc(33.333% - 20px);
    box-sizing: border-box;
    margin-bottom: 20px;
    -webkit-appearance: none;
}

.cbs-super-admin-view-container{
    display: grid;
    /*grid-template-columns: repeat(3, 1fr);*/
    grid-template-rows: auto;
    grid-gap: 10px;
    margin-bottom: 40px;
    margin-left: 40px;
    -webkit-appearance: none;
}



.cbs2-tab-content-groups-settings{
    margin-top: 20px;
    padding: 40px;
    -webkit-appearance: none;
}

.container-department-settings{
    display: flex;
    flex-direction: column;
    gap: 8px;
    -webkit-appearance: none;
}

.container-payment-settings{
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    -webkit-appearance: none;
}

/** Checkbox **/
.cbs2-checkbox {
    position: relative;
    width: 18px!important;
    height: 18px!important;
    color: black;
    border: 1px solid #777E90;
    border-radius: 4px!important;
    appearance: none;
    outline: 0;
    cursor: pointer;
    transition: transparent 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
    margin: 0!important;
    padding: 0!important;
}

.cbs2-checkbox::before {
    position: absolute;
    content: '';
    display: block;
    top: 1px;
    left: 6px;
    width: 4px;
    height: 10px;
    border-style: solid;
    border-color: #15171c;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

.cbs2-checkbox:checked {
    color: #ffffff;
    border-color: var(--event-secondary-color, #4FF6B1);
    background: var(--event-secondary-color, #4FF6B1);
}

.cbs2-checkbox:checked::before {
    opacity: 1;
}


/** CBS Row and Info */
.cbs2-info,
.cbs-info {
    display: grid;
    gap: 10px;
    background: #24262f;
    border-bottom: 1px solid #303234;
    padding: 0 10px;
    align-items: center;
    box-sizing: border-box;
    font-size: 12px;
    width: 100%;
}

.cbs2-info-restore-deleted-items,
.cbs-info {
    display: grid;
    gap: 10px;
    background: #24262f;
    border-bottom: 1px solid #303234;
    padding: 0 10px;
    align-items: center;
    box-sizing: border-box;
    font-size: 12px;
    width: 100%;
    -webkit-appearance: none;
}

.cbs2-info:not(.--head):hover,
.cbs2-info:not(.--head).selected,
.cbs-info:not(.--head):hover,
.cbs-info:not(.--head).row-highlighted {
    background: #16181D;
}

.cbs2-info > div,
.cbs-info > div {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 0;
}

.cbs2-info .cbs2-heading {
    margin-bottom: 0!important;
    padding-left: 0!important;
}

.cbs2-info .--span2 {
    grid-column: span 2;
}

.cbs2-info .--span3 {
    grid-column: span 3;
}

.cbs2-info .--span4 {
    grid-column: span 4;
}




/** CBS Info toggle **/
.cb2-row-toggle {
    font-size: 16px;
    cursor: pointer;
    color: var(--event-secondary-color, #4FF6B1);
    padding-right: 2px;
    line-height: 0;
    display: inline-block;
}

.cbs2-row.--expanded .cb2-row-toggle,
.cbs-row.--expanded > .cbs-info .cb2-row-toggle  {
    transform: rotate(90deg);
}

.cbs2-row .cbs2-info:not(:first-child),
.cbs-row:not(.--expanded) .cbs-info:not(:first-child) {
    display: none;
}
.rooming-list-table-area .cbs-row:not(.--expanded) .cbs-info:not(:first-child){
    display: grid;
}

.cbs2-row.--expanded .cbs2-info,
.cbs-row.--expanded .cbs-info,
.cbs-row.--expanded > .cbs-row {
    background: #000;
}

.cbs2-row.--expanded .cbs2-info,
.cbs-row.--expanded > .cbs-info {
    display: grid;
}

.cbs-row.--expanded > .cbs-row > .cbs-info:first-child {
    display: grid;
}

.cbs-row:not(.--expanded) > .cbs-row.--expanded > .cbs-info {
    display: none;
}

.cbs2-row.--expanded .cbs2-info:first-child,
.cbs-row.--expanded > .cbs-info:first-child {
    background: var(--event-primary-color, #4323FF);
    border-radius: 10px 10px 0 0;
}

.cbs-row.--expanded > .cbs-row.--expanded > .cbs-info:not(:first-child) {
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #444444;
}

.cbs2-row.--expanded .cbs2-info:last-child,
.cbs-row.--expanded .cbs-info:last-child,
.cbs-row.--expanded > .cbs-row:last-child {
    border-radius: 0 0 10px 10px;
    border-bottom-color: #000;
}

.cbs2-row.--expanded .cbs2-info:not(:first-child) > div:nth-child(2),
.cbs-row.--expanded .cbs-info:not(:first-child) > div:nth-child(2)  {
    padding-left: 18px;
}


/** Tooltip */
.cbs2-tooltip {
    position: relative;
}

.cbs2-tooltip-text {
    position: absolute;
    bottom: 100%;
    left: 50%;
    background: #fff;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.2;
    color: #000;
    transform: translateX(-50%);
    display: none;
    font-weight: normal;
    z-index: 2;
    width: max-content;
    max-width: 250px;
    min-width: 120px;
    word-wrap: break-word;
}

.cbs2-tooltip:hover .cbs2-tooltip-text:not(.disabled) {
    display: block;
}


.cbs2-tooltip-icon {
    width: 20px;
    height: 20px;
    display: flex;
    background: #000;
    color: #fff;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    cursor: help;
    font-weight: normal;
    font-size: 12px;
    line-height: 0;
}

.cbs2-tooltip.--help .cbs2-tooltip-icon {
    fill: #fff;
    width: 22px;
    height: 22px;
    background: var(--event-primary-color, #4323FF);
}

.cbs2-tooltip.--help .cbs2-tooltip-icon svg {
    margin-top: -1px;
    width: 15px;
}

.cbs2-tooltip.--help .cbs2-tooltip-text {
    width: 200px;
    padding: 10px 15px;
    line-height: 1.4;
}

.cbs2-tooltip.--help .cbs2-tooltip-text ul {
    margin: 0 0 0 10px;
}

.cbs2-tooltip.--help .cbs2-tooltip-text ul li:not(:last-child) {
    margin-bottom: 5px;
}

.rpn-quickfill-actions input[type="checkbox"] {
    position: relative;
    width: 18px;
    min-width: 18px;
    height: 18px;
    color: black;
    border: 1px solid #777E90;
    border-radius: 4px;
    appearance: none;
    outline: 0;
    cursor: pointer;
    transition: transparent 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
    margin: 0;
}
.rpn-quickfill-actions input[type="checkbox"]:checked {
    color: #ffffff;
    border-color: var(--event-secondary-color, #4FF6B1);
    background: var(--event-secondary-color, #4FF6B1);
}


.cbs2-icon-only-button {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background: none;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.cbs2-icon-only-button:hover {
    background: #232323;
}

.cbs2-icon-only-button span {
    width: 16px;
    height: 16px;
}

.cbs2-icon-only-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.max-guest-container {
    position: relative;
}

.max-guest-container > .max-guest-input.select-input,
.min-guest-container > .min-guest-input.select-input {
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    height: 40px;
    padding: 12px;
    border: 2px solid #2F2F31;
    border-radius: 8px;
    background: #2F2F31;
    box-sizing: border-box;
    width: 100%;
    font-family: 'Poppins';
    outline: none;
    transition: border 0.4s, background-color 0.4s;
}

.max-guest-container > .max-guest-options,
.min-guest-container > .min-guest-options {
    position: absolute;
    width: 100%;
    background: #2F2F31;
    color: #fff;
    top: calc( 100% + 5px );
    box-sizing: border-box;
    border-radius: 8px;
    font-weight: bold;
    z-index: 10;
    font-size: 14px;
    max-height: 150px;
    overflow: auto;
    display: none;
}

.max-guest-container > .max-guest-options > .max-guest-option,
.min-guest-container > .min-guest-options > .min-guest-option {
    padding: 8px 15px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.max-guest-container > .max-guest-options > .max-guest-option:hover,
.min-guest-container > .min-guest-options > .min-guest-option:hover {
    cursor: pointer;
    background: var(--event-primary-color, #4323FF);
}

.max-guest-container.custom-number-input,
.min-guest-container.custom-number-input {
    display: block;
}

span.select2-dropdown.new-brand-book-design.select2-dropdown--below{
    background: none !important;
    border: none !important;
}

.select2-dropdown.new-brand-book-design .select2-search--dropdown{
    padding: 0px !important;
}
.select2-dropdown.new-brand-book-design .select2-search__field{
    background-color: #2F2F31 !important;
    border-radius: 10px !important;
}
.select2-dropdown.new-brand-book-design span.select2-results{
    background-color: #2F2F31 !important;
    border-radius: 8px; /* Add top-left corner radius */
    border: 1px solid #2F2F31 !important;
}
.select2-dropdown.new-brand-book-design .select2-results__option--selectable:hover, 
.select2-dropdown.new-brand-book-design .select2-results__option--selected {
    background: #212121 !important;
    border-left: 2px solid var(--event-secondary-color, #4FF6B1) !important;
}

/* This ensures the dropdown takes full width and overrides the default WordPress Admin CSS styles */
.new-brand-book-design .select2-results__options {
    width: -webkit-fill-available;
    scrollbar-color: auto !important;
}

/* Ensure scrolling behavior */
.select2-dropdown.new-brand-book-design .select2-results__options {
    scrollbar-color: var(--event-primary-color, #4323FF) transparent; /* Thumb and track color */
}

/* WebKit (Chrome, Safari) scrollbar styling */
.select2-dropdown.new-brand-book-design .select2-results__options::-webkit-scrollbar {
    width: 8px; /* Fixed scrollbar width */
    height: 3px; /* Fixed scrollbar height */
    background: transparent;
    border-radius: 5px;
}

/* Scrollbar track (background) with 2px width */
.select2-dropdown.new-brand-book-design .select2-results__options::-webkit-scrollbar-track {
    background: transparent; /* Ensure transparency */
    border-radius: 5px;
    width: 8px; /* Track width set to 8px */
}

/* Scrollbar thumb */
.select2-dropdown.new-brand-book-design .select2-results__options::-webkit-scrollbar-thumb {
    background: var(--event-primary-color, #4323FF); 
    border-radius: 5px;
    width: 6px; /* Thumb width */
    min-height: 30px;
}


/* Ensure the search field focus remains clean */
.select2-dropdown.new-brand-book-design .select2-search__field:focus-visible {
    outline: none !important;
}

.select2-dropdown.new-brand-book-design .select2-search__field {
    background: url(../icons/search-icon.png) no-repeat calc(100% - 10px) center; /* Move icon slightly to the left */
    background-size: 16px 16px; /* Adjust the size of the icon */
    padding-right: 30px; /* Ensure enough space between the text and the icon */
    border: 2px solid #ccc; /* Optional: Border styling */
    border-radius: 4px; /* Optional: Rounded corners */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

/* Top corners for the first item */
.select2-dropdown.new-brand-book-design .select2-results__options li:first-child {
    border-top-left-radius: 8px; /* Add top-left corner radius */
    border-top-right-radius: 8px; /* Add top-right corner radius */
}

/* Bottom corners for the last item */
.select2-dropdown.new-brand-book-design .select2-results__options li:last-child {
    border-bottom-left-radius: 8px; /* Add bottom-left corner radius */
    border-bottom-right-radius: 8px; /* Add bottom-right corner radius */
}


span.cbs2-tooltip-icon.new-brand-book-design-tooltip {
    width: auto;
    height: auto;
}

/* Tooltip arrow at the bottom */
.cbs2-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%; /* Position it at the bottom of the tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #fff transparent transparent transparent; /* Arrow pointing downwards */
}

/* Dark theme for new-brand-book-design-tooltip */
span.cbs2-tooltip-text.new-brand-book-design-tooltip {
    background: #2F2F31 !important;
    color: #FFFFFF !important;
    font-family: Poppins !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    letter-spacing: -0.01em !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    min-height: auto !important;
    margin-bottom: 8px !important;
}

/* Adjust the arrow for dark tooltip */
span.cbs2-tooltip-text.new-brand-book-design-tooltip::after {
    border-color: #2F2F31 transparent transparent transparent; /* Dark arrow */
}

/* Up/Down Arrow Icon - Enlarged */
.custom-number-input .arrow-up-down {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px; /* Increased size */
    height: 18px; /* Increased size */
    background-image: url(../icons/icon_Up_Down.png);
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* Position "days" text properly in custom number inputs */
.custom-number-input span {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    pointer-events: none;
    z-index: 1;
}

#budget-entries-container .custom-number-input input {
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    height: 40px;
    padding: 12px;
    border: 2px solid #2F2F31;
    border-radius: 8px;
    background: #2F2F31;
    box-sizing: border-box;
    width: 100%;
    font-family: 'Poppins';
    outline: none;
    transition: border 0.4s, background-color 0.4s;
}

.button-add-row-budget{
    color: var(--event-secondary-color, #4FF6B1);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.button-add-row-budget:hover{
    color: #2d8a63;
}

.text-truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 2rem;

}

.ui-datepicker.branbook-new-calendar-design .ui-datepicker-title{
    display: block;
}
.ui-datepicker.branbook-new-calendar-design .cbs-header-year,.ui-datepicker.branbook-new-calendar-design .cbs-header-month {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 5px;
    width: 100%;
}

.ui-datepicker.branbook-new-calendar-design .cbs-header-month span.cbs-month-wrapper{
    width: 100%;
}
.ui-datepicker.branbook-new-calendar-design .cbs-header-year select.ui-datepicker-year {
    width: 100%;
}
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-title {
    margin: 0px !important;
}
.ui-datepicker.branbook-new-calendar-design  a.cbs-prev-month {
    padding-left: 5px !important;
}
.ui-datepicker.branbook-new-calendar-design  a.cbs-next-month {
    padding-right: 5px !important;
}
.ui-datepicker.branbook-new-calendar-design a.cbs-prev-month,
.ui-datepicker.branbook-new-calendar-design a.cbs-next-month,
.ui-datepicker.branbook-new-calendar-design a.cbs-prev-year,
.ui-datepicker.branbook-new-calendar-design a.cbs-next-year
{
    color: #4ef6b1 !important;
    cursor: pointer;
}
.ui-datepicker.branbook-new-calendar-design td.ui-datepicker-today a {
    border: 1px solid #fff !important;
    /* border-radius: 50% !important; */
    background: transparent !important;
}
/* .ui-datepicker.branbook-new-calendar-design .ui-datepicker-current-day a {
    background-color: var(--event-primary-color, #4323FF) !important;
}
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-current-day .ui-state-default,
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-current-day .ui-state-default.ui-state-active,
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-current-day .ui-state-default:hover {
    background-color: var(--event-primary-color, #4323FF) !important;
    color: #fff;
} */

.ui-datepicker.branbook-new-calendar-design tr td.cbs-datepicker__event-date .ui-state-default{
    background-color: var(--event-primary-color, #4323FF) !important;
    color: #fff !important;
    align-items: center !important;
    padding-top: inherit !important;
}
.ui-datepicker.branbook-new-calendar-design td.undefined.ui-datepicker-current-day,.ui-datepicker.branbook-new-calendar-design td.undefined.ui-datepicker-current-day a {
    background-color: transparent !important; 
    color: #a3a3a3 !important;
}
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-current-day a {
    background-color: var(--event-primary-color, #4323FF) !important;
    color: #fff;
}
.ui-datepicker.branbook-new-calendar-design td:not(.ui-state-disabled) a.ui-state-default:hover {
    background-color: grey !important;
    color: #fff !important;
}
.ui-datepicker.branbook-new-calendar-design a.ui-state-default.ui-state-highlight.ui-state-active{
    background-color: var(--event-primary-color, #4323FF) !important;
    color: #fff !important;
}

.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__event-date > .ui-state-default:after {
    content: "";
    color: rgba(0, 0, 0, 0);
    opacity: 1;
    display: block;
    background: url(../icons/bulidingIconV2.png) no-repeat;
    width: 10px;
    height: 10px;
    border-width: 0;
    background-size: contain;
    position: absolute;
    left: 85% !important;
    transform: translateX(-50%);
    filter: brightness(0.9);
    top: 0px !important;
    background-color: var(--event-secondary-color, #4FF6B1);
    border-radius: 2px;
    padding: 1px;
}
.ui-datepicker.branbook-new-calendar-design select.ui-datepicker-year,
.ui-datepicker.branbook-new-calendar-design select.ui-datepicker-month {
    color: #4ef6b1; /* Green text */
}
/* Ensure #ui-datepicker-div (jQuery UI datepicker container) allows scroll and doesn't block page */
#ui-datepicker-div.ui-datepicker.branbook-new-calendar-design,
.ui-datepicker.branbook-new-calendar-design {
    border-radius: 5px !important;
    background: #2F2F31 !important;
    padding: 12px 20px 20px 20px !important;
    text-align: center !important;
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain;
}
/* Override any overflow:hidden on #ui-datepicker-div so calendar content can scroll */
#ui-datepicker-div.branbook-new-calendar-design {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-year, .ui-datepicker.branbook-new-calendar-design .ui-datepicker-month {
    background-image: none !important;
}
.ui-datepicker.branbook-new-calendar-design select.ui-datepicker-month,.ui-datepicker.branbook-new-calendar-design select.ui-datepicker-year {
    text-align: center;
    z-index: 999;
    width: max-content;
}
.cbs-datepicker-wrapper tr th,
.ui-datepicker.cbs-datepicker-wrapper tr th,
.ui-datepicker.cbs-datepicker-wrapper thead th {
    width: 100% !important;
    font-weight: bold !important;
    padding: 20px 0px 12px !important;
    line-height: 1 !important;
    color: #fff !important;
}

.ui-datepicker.branbook-new-calendar-design .cbs-datepicker-wrapper tr th,
.ui-datepicker.branbook-new-calendar-design.cbs-datepicker-wrapper tr th,
.ui-datepicker.branbook-new-calendar-design.cbs-datepicker-wrapper thead th {
    width: 100% !important;
    font-weight: 600 !important;
    padding: 20px 0px 12px !important;
    line-height: 1 !important;
    color: #fff !important;
}
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row {
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    align-items: center;
    justify-items: center;
    gap: 10px;
    margin: 5px 0;
    width: 100%;
}
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .cbs-year-trigger,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .cbs-month-trigger {
    justify-self: center;
    text-align: center;
    color: var(--event-secondary-color, #4FF6B1) !important;
}

.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-prev,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .ui-datepicker-prev,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-next,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .ui-datepicker-next {
    cursor: pointer;
}
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-title {
    width: 100%;
    pointer-events: none;
}

.ui-datepicker.branbook-new-calendar-design .ui-datepicker-title .cbs-month-trigger,
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-title .cbs-year-trigger {
    pointer-events: auto;
}

.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-prev,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .ui-datepicker-prev,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-next,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .ui-datepicker-next {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.ui-datepicker.branbook-new-calendar-design .ui-datepicker-header {
    position: relative;
}

.ui-datepicker.branbook-new-calendar-design .ui-datepicker-header > .ui-datepicker-prev {
    position: absolute !important;
    left: 12px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
}

.ui-datepicker.branbook-new-calendar-design .ui-datepicker-header > .ui-datepicker-next {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
}

.ui-datepicker.branbook-new-calendar-design.cbs-datepicker-wrapper .ui-datepicker-title {
    pointer-events: none !important;
}

.ui-datepicker.branbook-new-calendar-design.cbs-datepicker-wrapper .ui-datepicker-title button,
.ui-datepicker.branbook-new-calendar-design.cbs-datepicker-wrapper .ui-datepicker-title select,
.ui-datepicker.branbook-new-calendar-design.cbs-datepicker-wrapper .ui-datepicker-title .ui-datepicker-month,
.ui-datepicker.branbook-new-calendar-design.cbs-datepicker-wrapper .ui-datepicker-title .ui-datepicker-year,
.ui-datepicker.branbook-new-calendar-design.cbs-datepicker-wrapper .ui-datepicker-title .cbs-month-trigger,
.ui-datepicker.branbook-new-calendar-design.cbs-datepicker-wrapper .ui-datepicker-title .cbs-year-trigger {
    pointer-events: auto !important;
}

.cbs-datepicker-wrapper.ui-datepicker .ui-datepicker-prev,
.cbs-datepicker-wrapper.ui-datepicker .ui-datepicker-next {
    position: relative;
    z-index: 3;
}

.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-prev,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .ui-datepicker-prev {
    justify-self: start;
}

.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-next,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .ui-datepicker-next {
    justify-self: end;
}

.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-prev,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-next {
    padding: 0 !important;
}

.ui-datepicker.branbook-new-calendar-design td.undefined.ui-datepicker-current-day a.ui-state-default.ui-state-active{
    color: grey !important;
    cursor: pointer;
}
.ui-datepicker.branbook-new-calendar-design select.ui-datepicker-year:hover,
.ui-datepicker.branbook-new-calendar-design select.ui-datepicker-month:hover
{
    color: grey !important;
    cursor: pointer;
}


.ui-datepicker.branbook-new-calendar-design .ui-datepicker-month option,
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-year option {
    display: none;
}

#ui-datepicker-div .cbs-month-grid,
.ui-datepicker.branbook-new-calendar-design .cbs-month-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 equal columns */
    gap: 10px;
    margin: 0 auto; /* Center the grid */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    max-height: 200px;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

.ui-datepicker.branbook-new-calendar-design .cbs-month-grid .month-option {
    padding: 10px 4px;
    text-align: center;
    background-color: transparent;
    border-radius: 5px;
    cursor: pointer;
    color: #FFFFFF;
    width: 100%; /* Make the buttons stretch to fit the available space */
    border: 2px solid transparent;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-datepicker.branbook-new-calendar-design .cbs-month-grid .month-option:hover {
    background-color: var(--event-primary-color, #4323FF);
}

.ui-datepicker.branbook-new-calendar-design button.month-option.selected{
    background: var(--event-primary-color, #4323FF);
}
#ui-datepicker-div .cbs-year-grid,
.ui-datepicker.branbook-new-calendar-design .cbs-year-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* 5 equal columns */
    gap: 12px;
    max-width: 100%;
    width: 100%;
    margin: 0 auto; /* Center the grid */
    margin-top: 28px;
    box-sizing: border-box;
    padding: 0;
    max-height: 220px;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

.ui-datepicker.branbook-new-calendar-design .cbs-year-grid + .cbs-grid-footer,
.ui-datepicker.branbook-new-calendar-design .cbs-month-grid + .cbs-grid-footer {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    grid-column: unset !important;
    clear: both !important;
}

.ui-datepicker.branbook-new-calendar-design .cbs-year-grid .year-option {
    padding: 10px 2px;
    text-align: center;
    background-color: transparent;
    border-radius: 5px;
    cursor: pointer;
    color: #FFFFFF;
    width: 100%; /* Make the buttons stretch to fit the available space */
    border: 2px solid transparent;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-datepicker.branbook-new-calendar-design .cbs-year-grid .year-option:hover
 {
    background-color: var(--event-primary-color, #4323FF);
}
.ui-datepicker.branbook-new-calendar-design button.year-option.selected{
    background: var(--event-primary-color, #4323FF);
    font-weight: 600;
}
.ui-datepicker.branbook-new-calendar-design .cbs-grid-footer {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    clear: both !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.ui-datepicker.branbook-new-calendar-design .cbs-grid-footer button.cbs-button.cbs-cancel {
    background: transparent;
    color: white;
    text-transform: capitalize;
    border: 2px solid transparent;
    font-weight: 600;
    padding: 8px 10px !important;
    min-width: auto !important;
    width: auto !important;
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
}

.ui-datepicker.branbook-new-calendar-design .cbs-grid-footer button.cbs-button.cbs-apply {
    background: var(--event-primary-color, #4323FF);
    color: white;
    text-transform: capitalize;
    border: 2px solid transparent;
    font-weight: 600;
    padding: 8px 10px !important;
    min-width: auto !important;
    width: auto !important;
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
}

.ui-datepicker.branbook-new-calendar-design td.undefined.ui-datepicker-current-day a.ui-state-default.ui-state-active {
    color: #fff !important;
    cursor: pointer;
    background-color: var(--event-primary-color, #4323FF) !important;
}
.branbook-new-calendar-design.branbook-has-current-date td.undefined.ui-datepicker-current-day a.ui-state-default.ui-state-active {
    color: #a3a3a3 !important;
    cursor: pointer;
    background-color: transparent !important;
}
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-year.selected,
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-month.selected
{
    border: 1px solid #FFFFFF;
    border-radius: 4px;

}

.ui-datepicker.branbook-new-calendar-design .cbs-year-trigger, .ui-datepicker.branbook-new-calendar-design .cbs-month-trigger {
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: 0px !important;
    text-align: center !important;
    vertical-align: middle !important;
    color: var(--event-secondary-color, #4FF6B1) !important;
    background: transparent !important;
    padding: 4px !important;
    border: 2px solid transparent !important;
}
.ui-datepicker.branbook-new-calendar-design .cbs-year-trigger:hover, .ui-datepicker.branbook-new-calendar-design .cbs-month-trigger:hover {
    color: grey !important;
    cursor: pointer;
}
.ui-datepicker.branbook-new-calendar-design .cbs-year-trigger, .ui-datepicker.branbook-new-calendar-design .cbs-month-trigger {
    text-align: center;
    z-index: 999;
    width: max-content;
}
.ui-datepicker.branbook-new-calendar-design .cbs-year-trigger.selected, .ui-datepicker.branbook-new-calendar-design .cbs-month-trigger.selected {
    border: 1px solid #FFFFFF;
    border-radius: 4px;
}

/* Datepicker arrows: green when enabled, grey when disabled (works for all branbook-new-calendar-design) */
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-prev:not(.disabled):before,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .ui-datepicker-prev:not(.disabled):before,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-next:not(.disabled):after,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .ui-datepicker-next:not(.disabled):after {
    filter: brightness(0) saturate(100%) invert(82%) sepia(28%) saturate(744%) hue-rotate(104deg) brightness(102%) contrast(101%);
}
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-prev:not(.disabled),
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .ui-datepicker-prev:not(.disabled),
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-next:not(.disabled),
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .ui-datepicker-next:not(.disabled) {
    color: var(--event-secondary-color, #4FF6B1);
}
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-prev:not(.disabled) .ui-icon,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .ui-datepicker-prev:not(.disabled) .ui-icon,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-next:not(.disabled) .ui-icon,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .ui-datepicker-next:not(.disabled) .ui-icon {
    filter: brightness(0) saturate(100%) invert(82%) sepia(28%) saturate(744%) hue-rotate(104deg) brightness(102%) contrast(101%);
}
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row {
    justify-items: center;
}
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .cbs-year-trigger,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .cbs-month-trigger {
    justify-self: center;
    text-align: center;
    color: var(--event-secondary-color, #4FF6B1) !important;
}

/* Disabled states: grey arrows, no pointer */
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-prev.disabled,
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-next.disabled,
.ui-datepicker.branbook-new-calendar-design .cbs-month-grid .disabled,
.ui-datepicker.branbook-new-calendar-design .cbs-year-grid .disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
    color: #9ca3af;
}
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-prev.disabled:before,
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-next.disabled:after {
    filter: grayscale(1) brightness(0.7);
}
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-prev.disabled .ui-icon,
.ui-datepicker.branbook-new-calendar-design .ui-datepicker-next.disabled .ui-icon {
    filter: grayscale(1) brightness(0.7);
}
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-prev span,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .ui-datepicker-prev span,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__year-row .ui-datepicker-next span,
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__month-row .ui-datepicker-next span {
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
}

/* Event date note styling for branbook-new-calendar-design */
.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__note {
    display: flex !important;
    align-items: center;
    float: left;
    margin: 18px 0 2px;
}

.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__note img {
    background: rgb(79, 246, 177);
    padding: 5px 5px 6px 5px;
    border-radius: 4px;
    margin-right: 4px;
}

.ui-datepicker.branbook-new-calendar-design .cbs-datepicker__note p {
    margin: 0;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}

.ui-datepicker.branbook-new-calendar-design .ui-datepicker-prev:before {
    content: "";
    display: inline-block;
    background: url('../icons/angle-left-small.png') no-repeat center center;
    background-size: contain;
    width: 6px; /* adjust size as needed */
    height: 10px;
}

.ui-datepicker.branbook-new-calendar-design .ui-datepicker-next:after {
    content: "";
    display: inline-block;
    background: url('../icons/angle-right-small.png') no-repeat center center;
    background-size: contain;
    width: 6px; /* adjust size as needed */
    height: 10px;
}

.cbs-datepicker-wrapper.branbook-new-calendar-design tr td.cbs-datepicker__event-date.ui-state-disabled > .ui-state-default{
    background-color: transparent !important;
    color: #515154 !important;

}
.cbs-datepicker-wrapper.branbook-new-calendar-design tr td.cbs-datepicker__event-date.ui-state-disabled > .ui-state-default{
    opacity: 1 !important;
}
.cbs-datepicker-wrapper.branbook-new-calendar-design {
    width: 360px; 
    height: max-content; 
    box-sizing: border-box;
    overflow: hidden; 
}

.ui-datepicker.branbook-new-calendar-design .ui-state-disabled .ui-state-default{
    color: #515154 !important;
}

#extras_tax_percentage::-webkit-outer-spin-button,
#extras_tax_percentage::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#extras_tax_percentage::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

#extras_tax_percentage {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Extras Empty State Styling */
.extras-empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 60px 20px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-radius: 12px;
    margin: 20px 0;
    border: 1px solid #333;
}

.empty-state-content {
    text-align: center;
    max-width: 500px;
    width: 100%;
}

.empty-state-icon {
    margin-bottom: 24px;
    opacity: 0.8;
}

.empty-state-icon svg {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.empty-state-title {
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 16px 0;
    font-family: 'Poppins', sans-serif;
}

.empty-state-description {
    font-size: 16px;
    color: #b3b3b3;
    line-height: 1.6;
    margin: 0 0 32px 0;
    font-family: 'Poppins', sans-serif;
}

.empty-state-action {
    margin-top: 32px;
}

.empty-state-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--event-secondary-color, #4FF6B1) 0%, #3dd99b 100%);
    color: #000;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(79, 246, 177, 0.3);
}

.empty-state-btn:hover {
    background: linear-gradient(135deg, #3dd99b 0%, #2bc785 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 246, 177, 0.4);
    color: #000;
    text-decoration: none;
}

.empty-state-btn:active {
    transform: translateY(0);
}

.empty-state-btn svg {
    width: 16px;
    height: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .extras-empty-state {
        min-height: 300px;
        padding: 40px 15px;
    }
    
    .empty-state-title {
        font-size: 20px;
    }
    
    .empty-state-description {
        font-size: 14px;
    }
    
    .empty-state-btn {
        padding: 12px 24px;
        font-size: 14px;
    }
}