/* latin */
@font-face {
  font-family: 'Century Gothic';
  font-style: normal;
  font-weight: 400;
  src: url(/wp-content/themes/apex/fonts/century-gothic.ttf) format('truetype');
}

:root {

  --background: #000000;
  --content: white;
  --primary: #6334f0;




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

  /* The Malin design tokens */
  --the-malin-yellow: #ffffff;
  --the-malin-light-yellow: #FFFFFF;
  --the-malin-purple: #6334f0;
  /* 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: #07272D;
  --the-malin-dark-green: #081618;
  --the-malin-green-shade-1: #28494D;
  --the-malin-green-shade-2: #6E9093;
  --the-malin-grey: #DBDBDB;
  --the-malin-ivory: #000000;
  --the-malin-font-family: "Century Gothic", "sans";
  --the-malin-font-family-light: "Century Gothic", "sans"; /* todo: this font isn't enqueued in the theme */
  --the-malin-font-family-bold: "Century Gothic", "sans";


  /* t9s-button */
  --t9s-button-medium-height: 46px;
  --t9s-button-primary-font-family: var(--the-malin-font-family-bold);
  --t9s-button-primary-color: var(--the-malin-dark-teal);
  --t9s-button-primary-border-radius: 0px; /* 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: 22px;
  --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: uppercase !important; /* not working */
  /* missing: text transform (to uppercase) */

  /* t9s-button--secondary */
  --t9s-button-secondary-font-family: var(--the-malin-font-family-bold);
  --t9s-button-secondary-color: var(--the-malin-dark-green);
  --t9s-button-secondary-border-radius: 0px; /* 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: 22px;
  --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: uppercase !important; /* not working */

  /* t9s-input */
  --t9s-input-border-radius: 0px;
  --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: none;
  --t9s-input-medium-height: 46px;
  --t9s-input-border-width: 0;
  --t9s-input-font-family: var(--the-malin-font-family-light);
  --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: rgba(0, 0, 0, 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-content-bg: transparent;

  /* t9s-date-picker */
  --t9s-date-picker-border-radius: 0px;
  --t9s-date-picker-border: none;
  --t9s-date-picker-padding: 11px;
  --t9s-date-picker-font-family: var(--the-malin-font-family-light);
  --t9s-date-picker-font-size: 16px;
  --t9s-date-picker-color: var(--the-malin-dark-green);
  --t9s-date-picker-cell-size: 30px;
  --t9s-date-picker-cell-border-radius: 50%;
  --t9s-date-picker-cell-background: #fff;
  --t9s-date-picker-cell-font-weight: bold;
  --t9s-date-picker-cell-font-family: var(--the-malin-font-family-bold);
  --t9s-date-picker-cell-font-size: 14px;
  --t9s-date-picker-active-background: var(--primary);
  --t9s-date-picker-active-color: var(--the-malin-dark-green);
  --t9s-date-picker-active-border-radius: 50%;
  --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(--the-malin-font-family-light); 
  --t9s-date-picker-hover-background: var(--the-malin-purple);
  --t9s-date-picker-hover-color: #fff;
  --t9s-date-picker-offset-cell-background: unset;
  --t9s-date-picker-header-color: var(--the-malin-green-shade-2);
  --t9s-date-picker-font-weight: normal;
  --t9s-date-picker-header-gap: 6px;
  --t9s-date-picker-month-button-font-family: var(--the-malin-font-family-light);
  --t9s-date-picker-month-button-font-size: 16px;
  --t9s-date-picker-row-gap: 6px;
  --t9s-date-picker-calendar-background: #F8F7F2;
  --t9s-date-picker-calendar-background: #F8F7F2;
  --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: 0px;
  --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: 30px;
  --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;

  /* 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: 46px;
  --t9s-select-focus-border-color: #ddd;
  --t9s-select-border-radius: 0px;
  --t9s-select-border: none;
  --t9s-select-box-shadow: none;
  --t9s-select-font-family: var(--the-malin-font-family-light);
  --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: black;
  --t9s-select-option-hover-background-color: var(--the-malin-purple);
  --t9s-select-option-hover-color: white;
  --t9s-select-option-selected-color: white;
  --t9s-select-option-selected-background-color: var(--primary);
  --t9s-select-option-font-family: var(--the-malin-font-family-light);
  --t9s-select-option-font-size: 16px;
  --t9s-select-label-font-family: var(--the-malin-font-family-light);
  --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: 9999px;
  --t9s-radio-group-button-font-family: var(--the-malin-font-family-light);
  --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 18px;
  --t9s-radio-group-button-line-height: 1;
  --t9s-radio-group-button-color: var(black);
  --t9s-radio-group-button-hover-background: var(--the-malin-purple);;
  --t9s-radio-group-button-hover-border: none;
  --t9s-radio-group-button-hover-color: #fff;
  --t9s-radio-group-button-spacing: 11px;
  --t9s-radio-group-button-checked-background: var(--primary);
  --t9s-radio-group-button-checked-border: none;
  --t9s-radio-group-button-checked-color: var(--content);

  /* 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: var(--the-malin-deep-green);
  --t9s-close-button-primary-hover-color: var(--the-malin-yellow);
  --t9s-close-button-primary-active-color: var(--the-malin-yellow);

  /* 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;
}
  

/* 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;
  }
}