/* Base */
:root {
    --clr-primary-dark-background: #FFFFFF;
    --clr-primary-light-background: #dedede;

    --clr-primary: #af882d;
    --clr-primary-highlight: #FFFFFF;

    --clr-seconary: #000000;
    --clr-seconary-highlight: #FFFFFF;

    --clr-primary-text: #222222FF;
    --clr-primary-text-light: #222222FF;
    --clr-secondary-text: #FFFFFF;
    --clr-secondary-text-light: #FFFFFF;
    --clr-tertiary-text: #af882d;
    --clr-tertiary-text-light: #af882d;
}

body, html,
p,
span,
input,
label {
    font-family: 'RobotoCondensed-Regular', serif !important;
}

/* Base */
h1,h2,h3,h4,h5,h6 {
    font-family: 'RobotoCondensed-Regular', serif !important;
}

@font-face {
    font-family: 'RobotoCondensed-Regular';
    src: url('../fonts/RobotoCondensed-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.main-layout h1 {
    color: var(--clr-primary-text) !important;
}

.btn-primary,
.btn-secondary {
    background-color: var(--clr-primary) !important;
    color: var(--clr-secondary-text) !important;
    border-color: var(--clr-primary-highlight) !important;
    border-radius: 8px !important;
}

.btn-primary:hover,
.btn-secondary:hover {
    background-color: var(--clr-secondary-text) !important;
    color: var(--clr-primary) !important;
}
/* END Base */


/* NavBar */
.navbar-top {
    background-color: var(--clr-primary-dark-background) !important;
}

.navbar-brand {
    width: 70px;
    height: auto;
}

.nav-list-item-text {
    color: var(--clr-tertiary-text) !important;
    font-weight: bold !important;
    background-color: transparent !important;
}

.nav-list-item-text:hover {
    background-color: transparent !important;
}

.nav-link-list {
    color: var(--clr-tertiary-text);
}

.nav-link-list span.MuiTouchRipple-root {
    text-transform: capitalize;
}

.drawer-toggler-wrapper,
.drawer-wrapper,
.drawer-header,
.drawer-social-form,
.drawer-divider,
.drawer-close-toggler-icon,
.drawer-menu-select-wrapper,
.navbar-logo-wrapper {
/*    */
}

button.drawer-close-toggler svg,
div.drawer-social-wrapper button svg {
    color: var(--clr-tertiary-text);
}

div.nav-link-wrapper button svg,
button.share-icon-wrapper svg.share-icon-link,
button.auth-signin-icon-wrapper svg.auth-signin-icon,
button.drawer-toggler-icon svg,
button.auth-signin div,
button.auth-signin span svg {
    color: var(--clr-tertiary-text);
}

.drawer-menu-wrapper li:hover {
    background-color: var(--clr-tertiary-text-light);
}

.navbar-expiry-timer {
    color: black;
}
/* END NavBar */


/******************************* Main *******************************/
.select-section {
    background-color: var(--clr-primary);
}

/* STEPPER */
.stepper-step-icon {
    color: var(--clr-primary-text) !important;
}

.stepper-step-icon-active {
    color: var(--clr-primary) !important;
}

.popup-content {
    background: var(--clr-secondary-text-light) !important;
    color: var(--clr-primary-text) !important;
}

.bookings-container,
.main-layout .select-section {
    background-color: var(--clr-secondary-text-light);
    filter: opacity(0.97);
}

.main-layout hr {
    background-color: rgba(65, 65, 65, 0.788);
}

.main-layout .footer {
    background-color: var(--clr-secondary-text-light);
}

.main-layout .footer-inner {
    background-color: var(--clr-secondary-text-light);
    color: var(--clr-primary-text);
}

.popup-content .btn-light {
    border: 1px solid var(--clr-primary-text) !important;
    color: var(--clr-secondary-text-light) !important;
    background-color: var(--clr-primary-light-background) !important;
}

.slide-warning {
    color: rgb(83, 83, 83);
}

.btn-view-cart {
    background-color: var(--clr-primary) !important;
    color: var(--clr-secondary-text-light) !important;
    border-color: var(--clr-primary) !important;
    box-shadow: black;
}

.btn-view-cart:hover,
.btn-floating-cart:hover,
.btn-floating-cart-expanded {
    background-color: var(--clr-primary) !important;
    color: var(--clr-secondary-text-light) !important;
}

.floating-cart-badge .MuiBadge-badge {
    background-color: var(--clr-primary-highlight) !important;
    color: var(--clr-primary-text) !important;
    border: 1px solid var(--clr-primary-text) !important;
}
/* END STEPPER */

/* STEP 1 */
.date-and-pax h1,
.date-and-pax h3,
.date-and-pax table,
.date-and-pax .checkinout,
.domesticCheckBox.Mui-checked {
    color: var(--clr-primary-text) !important;
}

.react-calendar {
    background: #ffffff !important;
    color: rgb(97, 97, 97) !important;
    border: 1px solid var(--clr-primary-text) !important;
    box-shadow: 4px 4px 8px rgba(255, 255, 255, 0.137) !important;
}

.date-and-pax .pax,
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus,
.react-calendar__navigation button[disabled],
.rdrCalendarWrapper,
.react-calendar__tile:disabled,
.rdrDayToday span::after {
    background-color: #ffffff !important;
}

.rdrDay span {
    color: var(--clr-primary) !important;
}

.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,
.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,
.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span {
    color: var(--clr-secondary-text-light) !important;
}

.rdrDayDisabled{
    background-color: transparent !important;
}

.rdrDayPassive span,
.rdrDayDisabled span {
    color: rgba(64, 60, 60, 0.65) !important;
    font-weight: normal;
}

.rdrDateDisplayItem {
    border-color: var(--clr-primary-text) !important;
}
/* END STEP 1 */

/* STEP 3 */
.category-image-box .MuiButtonBase-root{
    border:1px solid var(--clr-primary-light-background);
}

.category-image-box .MuiButtonBase-root:hover {
    border:1px solid transparent;
    filter: invert(1);
    background-color: var(--clr-secondary-text-light);
}

.category-button-normal{
    color: var(--clr-secondary-text-light) !important;
    background-color: var(--clr-primary) !important;
}

.category-button-normal:hover{
    background-color: var(--clr-primary) !important;
    color: var(--clr-secondary-text-light) !important;
    border: 1px solid var(--clr-primary) !important;
}

.category-button-normal:disabled {
    background-color: rgba(136, 135, 135, 0.62) !important;
    color: rgba(225, 225, 225, 0.94) !important;
}

.category-image-box .MuiButtonBase-root{
    border:1px solid var(--clr-primary-light-background) !important;
    color: var(--clr-secondary-text-light) !important;
}

.category-image-box .MuiButtonBase-root:hover {
    border:1px solid transparent;
    filter: none !important;
    background-color:var(--clr-primary-light-background) !important;
    color: var(--clr-secondary-text-light) !important;
}
/* END STEP 3 */

/* STEP 4 */
.select-rate-button {
    background-color: var(--clr-primary) !important;
    border-radius: 0 !important;
}

.select-rate-button:hover {
    background-color: var(--clr-primary) !important;
}

.select-rate-button svg {
    color: var(--clr-secondary-text-light) !important;
}

.room-card-accordion-summary {
    background-color: var(--clr-primary) !important;
    color: var(--clr-secondary-text-light) !important;
}

.room-card-accordion-summary:hover {
    background-color: var(--clr-primary) !important;
    color: var(--clr-secondary-text-light) !important;
}

.view-rate-mobile-button {
    color: rgb(13, 134, 255) !important;
}

.view-rate-mobile-button:hover {
    color: rgb(0, 73, 147) !important;
}

.room-card-room-description {
    text-align: left;
    color: var(--clr-primary) !important;
}

.rooms-card-special-rate-description {
    color: var(--clr-primary) !important;
}
/* END STEP 4 */

/* CART */
.cart-tc-text {
    color: var(--clr-primary-text) !important;
}
/* END CART */
/******************************* END Main *******************************/


/* AUTH Components */
.auth-box-wrapper,
.loading-box-wrapper {
    background-color: var(--clr-secondary-text-light);
}

.auth-title {
    text-transform: uppercase;
}

.ico-signin,
.support-logo {
    height: 80px !important;
    width: auto !important;
}
/* END AUTH Components */


/* Room List Entries */
.roomlist-entries {
    background: var(--clr-secondary-text-light) !important;
    color: var(--clr-primary-text) !important;
}
/* END Room List Entries */

/* Availability Grid */
.AvailabilityGrid h1 {
    color: var(--clr-primary-text) !important;
}

.react-calendar__tile--active {
    color: var(--clr-secondary-text-light) !important;
    background-color: var(--clr-primary-text) !important;
}
/* END Availability Grid */