:root {
    font-size: 16px !important;
    /* Set the desired font size - this is fix for the malin theme */

    /* The Malin design tokens */
    --the-malin-yellow: var(--global-palette1);
    --the-malin-light-yellow: var(--global-palette1);
    --the-malin-purple: var(--global-palette3);
    /* I am under the impression that Figma colors for buttons aren't aligned with the WP version - tbc*/
    --the-malin-dark-teal: #07272D;
    /* Confusion caused by updated colors */
    --the-malin-deep-green: var(--global-palette3);
    --the-malin-dark-green: var(--global-palette5);
    --the-malin-green-shade-1: var(--global-palette4);
    --the-malin-green-shade-2: var(--global-palette4);
    --the-malin-grey: #DBDBDB;
    --the-malin-ivory: #F8F7F2;
    --the-malin-font-family: var(--global-heading-font-family, "Anek Bangla"), sans-serif !important;
    --the-malin-font-family-light: var(--global-heading-font-family, "Anek Bangla"), sans-serif !important;
    /* todo: this font isn't enqueued in the theme */
    --the-malin-font-family-bold: var(--global-heading-font-family, "Anek Bangla"), sans-serif !important;
    --primaryFontFamily: var(--global-heading-font-family, "Anek Bangla"), sans-serif !important;
    --secondaryFontFamily: var(--global-body-font-family, 'Poppins'), sans-serif !important;


    /* t9s-button */
    --t9s-button-medium-height: 32px;
    --t9s-button-primary-font-family: var(--t9s-button-secondary-font-family);
    --t9s-button-primary-color: var(--the-malin-dark-teal);
    --t9s-button-primary-border-radius: 4px;
    /* todo: replace this magic number with a variable */
    --t9s-button-primary-bg: var(--the-malin-yellow);
    --t9s-button-primary-border-color: var(--the-malin-yellow);
    --t9s-button-primary-font-size: 14px;
    --t9s-button-primary-hover-bg: var(--the-malin-light-yellow);
    --t9s-button-primary-hover-color: var(--the-malin-dark-teal);
    --t9s-button-primary-text-transform: capitalize !important;
    /* not working */
    /* missing: text transform (to uppercase) */

    /* t9s-button--secondary */
    --t9s-button-secondary-font-family: var(--global-body-font-family, 'Poppins'), sans-serif !important;
    --t9s-button-secondary-color: var(--the-malin-dark-green);
    --t9s-button-secondary-border-radius: 4px;
    /* todo: replace this magic number with a variable */
    --t9s-button-secondary-bg: transparent;
    --t9s-button-secondary-border: 1px solid var(--the-malin-dark-green);
    --t9s-button-secondary-font-size: 14px;
    --t9s-button-secondary-hover-bg: var(--the-malin-yellow);
    --t9s-button-secondary-hover-color: var(--the-malin-dark-green);
    --t9s-button-secondary-hover-border: 1px solid var(--the-malin-yellow);
    --t9s-button-secondary-text-transform: capitalize !important;
    /* not working */

    /* t9s-input */
    --t9s-input-color: var(--global-palette8);
    --t9s-input-border-radius: 4px;
    --t9s-input-padding: 10px 20px 10px 20px;
    --t9s-input-form-control-label-font-family: var(--the-malin-font-family-light);
    --t9s-input-form-control-label-font-size: 16px;
    --t9s-input-form-control-label-margin-bottom: 6px;
    --t9s-input-border: 1px;
    --t9s-input-medium-height: 43px;
    --t9s-input-border-width: 0;
    --t9s-input-font-family: var(--t9s-button-secondary-font-family);
    --t9s-input-font-size: 16px;

    /* t9s-link */
    --t9s-link-color: var(--the-malin-yellow);
    --t9s-link-font-family: var(--the-malin-font-family-light);
    --t9s-link-font-size: 20px;

    /* t9s-checkbox */
    --t9s-checkbox-border: 1px solid var(--the-malin-green-shade-1);
    --t9s-checkbox-font-family: var(--the-malin-font-family-light);
    --t9s-checkbox-font-size: 16px;
    --t9s-checkbox-border-radius: 2px;
    --t9s-checkbox-checked-bg: var(--the-malin-green-shade-1);


    /* t9s-modal */
    --t9s-modal-container-bg: rgb(16, 38, 40, 0.6);
    --t9s-modal-container-border-radius: 0px;
    --t9s-modal-container-box-shadow: none;
    --t9s-modal-container-padding: 0px;
    --t9s-modal-container-max-width: 870px;
    --t9s-modal-container-min-width: 870px;
    --t9s-modal-container-max-height: 90%;
    --t9s-modal-container-min-height: 76%;
    --t9s-modal-content-bg: transparent;

    /* t9s-date-picker */
    --t9s-date-picker-border-radius: 4px;
    --t9s-date-picker-border: 1px solid #D9CECB;
    --t9s-date-picker-padding: 11px;
    --t9s-date-picker-font-family: var(--secondaryFontFamily);
    --t9s-date-picker-font-size: 16px;
    --t9s-date-picker-color: #94908E;
    --t9s-date-picker-cell-size: 43px;
    --t9s-date-picker-cell-border-radius: 4px;
    --t9s-date-picker-cell-background: var(--global-palette8);
    --t9s-date-picker-cell-font-weight: 400;
    --t9s-date-picker-cell-font-family: var(--secondaryFontFamily);
    --t9s-date-picker-cell-font-size: 16px;
    --t9s-date-picker-active-background: var(--the-malin-yellow);
    --t9s-date-picker-active-background: var(--the-malin-yellow);
    --t9s-date-picker-active-color: var(--global-palette5);
    --t9s-date-picker-active-border-radius: 4px;
    --t9s-date-picker-active-border-width: 0px;
    --t9s-date-picker-active-border-style: solid;
    --t9s-date-picker-active-border-color: var(--the-malin-yellow);
    --t9s-date-picker-header-separator-height: 0px;
    --t9s-date-picker-header-item-font-family: var(--t9s-button-secondary-font-family);
    --t9s-date-picker-hover-background: var(--the-malin-yellow);
    --t9s-date-picker-hover-color: var(--global-palette5);
    --t9s-date-picker-offset-cell-background: unset;
    --t9s-date-picker-header-color: var(--global-palette8);
    --t9s-date-picker-font-weight: normal;
    --t9s-date-picker-header-gap: 6px;
    --t9s-date-picker-month-button-font-family: var(--t9s-button-secondary-font-family);
    --t9s-date-picker-month-button-font-size: 18px;
    --t9s-date-picker-row-gap: 6px;
    --t9s-date-picker-calendar-background: var(--color-dark-brown);
    --t9s-date-picker-menu-padding: 0;
    --t9s-date-picker-menu-border-width: 0px;
    --t9s-date-picker-menu-border-style: solid;
    --t9s-date-picker-menu-border-color: var(--the-malin-dark-green);
    --t9s-date-picker-menu-border-radius: 6px;
    --t9s-date-picker-menu-focus-border-width: 0px;
    --t9s-date-picker-menu-focus-border-style: solid;
    --t9s-date-picker-menu-focus-border-color: var(--the-malin-dark-green);
    --t9s-date-picker-menu-focus-border-radius: 0px;
    --t9s-date-picker-month-year-background: #FFF;
    --t9s-date-picker-arrow-top-display: none;
    --t9s-date-picker-month-year-row-height: 45px;
    --t9s-date-picker-month-year-row-margin-bottom: 21px;
    --t9s-date-picker-calendar-icon-top: unset;
    --t9s-date-picker-calendar-icon-transform: none;
    --t9s-date-picker-calendar-icon-bottom: 0;
    --t9s-date-picker-calendar-icon-padding: 11px 12px 11px 30px;
    --t9s-date-picker-calendar-icon-right: 0;
    --t9s-date-picker-calendar-icon-left: unset;
    --t9s-date-picker-calendar-icon-width: 24px;
    --t9s-date-picker-calendar-icon-height: 24px;
    --t9s-date-picker-calendar-icon-padding-left: 20px;
    --t9s-date-picker-calendar-icon-padding-right: 35px;
    --t9s-date-picker-label-font-family: var(--the-malin-font-family-light);
    --t9s-date-picker-label-font-size: 16px;
    --t9s-date-picker-label-margin-bottom: 6px;
    --t9s-date-picker-clear-icon-width: 16px;
    --t9s-date-picker-clear-icon-height: 16px;
    --t9s-date-picker-clear-icon-bottom: 0;
    --t9s-date-picker-clear-icon-padding: 15px 12px 15px 30px;
    --t9s-date-picker-clear-icon-top: unset;
    --t9s-date-picker-clear-icon-transform: none;
    --dp-text-color: var(--color-dark-brown);
    --dp-secondary-color: #95908E;
    --dp-cell-padding: 0;

    /* t9s-time-picker */
    --t9s-time-picker-border-radius: 0px;
    --t9s-time-picker-padding: 11px;
    --t9s-time-picker-border: none;
    --t9s-time-picker-font-family: var(--the-malin-font-family-light);
    --t9s-time-picker-font-size: 16px;
    --t9s-time-picker-color: var(--the-malin-dark-green);
    --t9s-time-picker-label-font-family: var(--the-malin-font-family-light);
    --t9s-time-picker-label-font-size: 16px;
    --t9s-time-picker-label-margin-bottom: 6px;
    --t9s-time-picker-overlay-background: #F8F7F2;
    --t9s-time-picker-menu-border: 1px solid var(--the-malin-dark-green);
    --t9s-time-picker-menu-border-radius: 0px;
    --t9s-time-picker-menu-focus-border: 1px solid var(--the-malin-dark-green);
    --t9s-time-picker-menu-focus-border-radius: 0px;
    --t9s-time-picker-arrow-top-display: none;
    --t9s-time-picker-arrow-top-display: none;
    --t9s-time-picker-time-font-family: var(--the-malin-font-family-bold);
    --t9s-time-picker-time-font-size: 40px;
    --t9s-time-picker-arrow-hover-background: var(--the-malin-purple);
    --t9s-time-picker-arrow-hover-color: #fff;
    --t9s-time-picker-calendar-icon-top: unset;
    --t9s-time-picker-calendar-icon-transform: none;
    --t9s-time-picker-calendar-icon-bottom: 0;
    --t9s-time-picker-calendar-icon-padding: 11px 12px 11px 30px;
    --t9s-time-picker-calendar-icon-right: 0;
    --t9s-time-picker-calendar-icon-left: unset;
    --t9s-time-picker-calendar-icon-width: 24px;
    --t9s-time-picker-calendar-icon-height: 24px;
    --t9s-time-picker-clear-icon-width: 16px;
    --t9s-time-picker-clear-icon-height: 16px;
    --t9s-time-picker-clear-icon-bottom: 0;
    --t9s-time-picker-clear-icon-padding: 15px 12px 15px 30px;
    --t9s-time-picker-clear-icon-top: unset;
    --t9s-time-picker-clear-icon-transform: none;
    --t9s-time-picker-calendar-icon-padding-left: 10px;
    --t9s-time-picker-calendar-icon-padding-right: 35px;

    /* t9s-select */
    --t9s-select-medium-height: 50px;
    --t9s-select-focus-border-color: #ddd;
    --t9s-select-border-radius: 6px;
    --t9s-select-border: none;
    --t9s-select-box-shadow: none;
    --t9s-select-font-family: var(--t9s-button-secondary-font-family);
    --t9s-select-font-size: 16px;
    --t9s-select-text-transform: none;
    --t9s-select-padding-inline: 20px 11px;
    --t9s-select-listbox-border-radius: 0px;
    --t9s-select-listbox-border: none;
    --t9s-select-listbox-padding: 0px;
    --t9s-select-listbox-box-shadow: none;
    --t9s-select-option-background-color: #fff;
    --t9s-select-option-padding: 10px;
    --t9s-select-option-color: var(--global-palette5);
    --t9s-select-option-hover-background-color: var(--the-malin-grey);
    --t9s-select-option-hover-color: var(--global-palette5);
    --t9s-select-option-selected-color: var(--global-palette5);
    --t9s-select-option-selected-background-color: var(--global-palette6);
    --t9s-select-option-font-family: var(--t9s-button-secondary-font-family);
    --t9s-select-option-font-size: 16px;
    --t9s-select-label-font-family: var(--t9s-button-secondary-font-family);
    --t9s-select-label-font-size: 16px;
    --t9s-select-label-margin-bottom: 6px;
    --t9s-select-expand-icon-font-size: 24px;

    /* t9s-radio-button */
    --t9s-radio-group-button-border-radius: 4px;
    --t9s-radio-group-button-font-family: var(--t9s-button-secondary-font-family);
    --t9s-radio-group-button-font-size: 16px;
    --t9s-radio-group-button-border: none;
    --t9s-radio-group-button-background: var(--the-malin-grey);
    --t9s-radio-group-button-padding: 8px 17px;
    --t9s-radio-group-button-line-height: 1;
    --t9s-radio-group-button-color: var(--the-malin-dark-green);
    --t9s-radio-group-button-hover-background: var(--the-malin-yellow);
    --t9s-radio-group-button-hover-border: none;
    --t9s-radio-group-button-hover-color: var(--the-malin-dark-green);
    --t9s-radio-group-button-spacing: 11px;
    --t9s-radio-group-button-checked-background: var(--the-malin-yellow);
    --t9s-radio-group-button-checked-border: none;
    --t9s-radio-group-button-checked-color: var(--the-malin-dark-green);

    /* t9s-tag */
    --t9s-tag-border-radius-large: 999px;
    --t9s-tag-border-radius-medium: 999px;
    --t9s-tag-border-radius-small: 999px;
    --t9s-tag-primary-color: white;
    --t9s-tag-primary-bg: #ea5435;
    --t9s-button-tag-border: none;
    --t9s-tag-primary-font-family: var(--the-malin-font-family-light);
    --t9s-tag-primary-font-size: 16px;
    --t9s-tag-success-color: white;
    --t9s-tag-success-bg: #7a7a7a;
    --t9s-tag-success-border: none;
    --t9s-tag-success-font-family: var(--the-malin-font-family-light);
    --t9s-tag-success-font-size: 16px;
    --t9s-tag-neutral-color: var(--the-malin-dark-green);
    --t9s-tag-neutral-bg: #F8F7F2;
    --t9s-tag-neutral-border: none;
    --t9s-tag-neutral-font-family: var(--the-malin-font-family-light);
    --t9s-tag-neutral-font-size: 16px;
    --t9s-tag-warning-color: white;
    --t9s-tag-warning-bg: #7a7a7a;
    --t9s-tag-warning-border: none;
    --t9s-tag-warning-font-family: var(--the-malin-font-family-light);
    --t9s-tag-warning-font-size: 0.9rem;
    --t9s-tag-danger-color: white;
    --t9s-tag-danger-bg: #7a7a7a;
    --t9s-tag-danger-border: none;
    --t9s-tag-danger-font-family: var(--the-malin-font-family-light);
    --t9s-tag-danger-font-size: 16px;

    /* textarea */
    --t9s-textarea-border-radius: 0px;
    --t9s-textarea-border: none;
    --t9s-textarea-font-family: var(--the-malin-font-family-light);
    --t9s-textarea-font-size: 16px;

    /* modal close button */
    --t9s-close-button-primary-color: #2B2624;
    --t9s-close-button-primary-hover-color: #2B2624;
    --t9s-close-button-primary-active-color: #2B2624;

    /* t9s spinner */
    --t9s-spinner-color-primary: var(--the-malin-dark-teal);

    /* td 202403270138 - Swiper styles for meeting rooms carousels */
    --swiper-pagination-bullet-inactive-color: var(--the-malin-dark-teal);
    --swiper-pagination-bullet-horizontal-gap: 12px;
    --swiper-pagination-bullet-inactive-opacity: 1.0;
    --swiper-pagination-color: var(--the-malin-yellow);
    --swiper-pagination-bottom: 0px;
}

t9s-modal[modal-id=login] {
    --t9s-modal-container-max-width: 796px;
    --t9s-modal-container-min-width: 689px;
    /* --t9s-modal-container-max-height: auto; */
    --t9s-modal-container-min-height: auto;
}

t9s-modal[modal-id=resource-booking] {
    --t9s-modal-container-min-height: 90%;
    display: block;
    height: 100%;
}

/* @media (max-width: 991px) {
    t9s-modal[modal-id=login] {
      --t9s-modal-container-max-height: auto;
    }
  } */

/* grid system */

.grid-row {
    box-sizing: border-box;
    display: flex;
    /* flex-wrap: wrap; */
    /* width: calc(100% + (var(--paddingVGR) * 2)); */
    margin: var(--marginVGR);
}

/* to do remove */
t9s-button {
    --sl-input-height-medium: 46px;
}

t9s-input {
    /* todo remove */
    --sl-input-border-width: 0;
}

@media only screen and (max-width: 870px) {
    :root {
        --t9s-modal-container-min-width: auto;
    }
}