:root {
  --page-background-color: #f2f4f5;
  --background-color: #fff;
  --background-dashboard-color: var(--background-color);
  --background-selected-color: #f1f6f8;
  --background-table-header-color: transparent;
  --selected-card-background-color: var(--background-selected-color);
  --table-font-size: 12px;
  --selected-row-background-color: var(--background-hover-color);
  --selected-row-font-color: var(--font-dashboard-color);
  --background-dashboard-selected-color: var(--background-selected-color);
  --background-header-card-selected-color: var(--background-selected-color);
  --background-pagination-color: var(--background-color);
  --background-hover-color: #f3f2f1;
  --background-dashboard-hover-color: var(--background-hover-color);
  --background-muted-color: #c5c5c5;
  --background-menu-color: var(--border-color-back-button);
  --primary-color: #009ad9;
  --sidebar-icon-start-color: var(--primary-color);
  --sidebar-icon-end-color: var(--primary-dark-color);
  --primary-dashboard-color: var(--primary-color);
  --primary-darker-color: #0076a5;
  --primary-dark-color: #004c92;
  --primary-dark-dashboard-color: var(--primary-dark-color);
  --primary-lighter-color: #10baff;
  --primary-lightest-color: #f1f6f8;
  --primary-contrast-color: #feac09;
  --background-disabled-color: #f1f1f1;
  --background-cancel-color: rgb(190 190 190 / 0.35);
  --background-input-muted-color: rgb(90 90 90 / 0.15);
  --background-primary-color: #f1f6f8;
  --selection-background: #eff8fc;
  --background-back-button-color: var(--background-disabled-color);
  --notification-content-font-color: var(--font-color);
  --selected-font-color: var(--primary-dark-color);
  --checkbox-background-color: var(--background-color);
  --checkbox-selected-background-color: var(--primary-color);
  --checkbox-selected-tick-color: #fff;
  --checkbox-border: 1px solid var(--border-color);
  --checkbox-selected-border: 1px solid var(--primary-color);
  --disabled-input-background-color: #f2f4f5;
  --disabled-button-color: #f1f1f1;
  --disabled-button-font-color: #d9d9d9;
  --disabled-button-border-color: #f1f1f1;
  --input-background-color: transparent;
  --page-size-background-color: var(--page-background-color);
  --page-size-border-color: var(--page-background-color);
  --map-marker-background-color: var(--primary-dark-color);
  --plant-card-background-color: var(--primary-dark-color);
  --area-block-border-bottom: #ebebeb;
  --asset-block-inactive-background-color: #f7f8f8;
  --asset-block-inactive-border-color: #e1e1e1;
  --map-border-color: #d2d2d2;
  --oem-event: #cc00000d;
  --oem-event-border: #c00;
  --background-active-pagination-color: transparent linear-gradient(180deg, var(--primary-color) 0%, var(--primary-dark-color) 100%) 0% 0% no-repeat padding-box;
  --map-filter: brightness(1);


  /* Font is supposed to be displayed upon a background */
  --font-color: #323130;
  --font-dashboard-color: var(--font-color);
  --font-semi-muted-color: #5e5e5e;
  --font-muted-color: #919191;
  --font-super-muted-color: #ccc;
  --font-ok-color: #3bccc6;
  --font-ko-color: #c70303;
  --font-on-dark-color: #eee;
  --font-primary-color: #004c92;
  --font-disabled-color: #d9d9d9;
  --font-footer-color: #5e5e5e;
  --white-font-color: var(--font-color);
  --font-breadcrumb-selected-color: var(--font-muted-color);
  --light-green: #00af0c;
  --dark-green: #0b6a3a;
  --dark-yellow: #feac09;
  --light-red: #de3535;
  --dark-red: #c00;
  --pink: #f15bb5;
  --light-blue: #009ad9;
  --dark-blue: #0076a5;
  --pagination-background-first-color: var(--primary-color);
  --pagination-background-second-color: var(--primary-dark-color);
  --pagination-font-style: normal;
  --pagination-font-weight-active: medium;
  --pagination-font-weight-normal: normal;
  --pagination-font-size: var(--font-size-default);
  --pagination-line-spacing: 16px;
  --pagination-font-weight: 500;
  --pagination-color-active: var(--font-on-dark-color);
  --footer-bg-color: var(--background-color);
  --footer-width: calc(100vw - var(--sb-width) - var(--routes-content-padding));
  --footer-height: 35px;
  --gauge-dark-color: var(--primary-dark-color);
  --border-color: var(--font-super-muted-color);
  --border-color-light: var(--border-color-input);
  --border-color-back-button: var(--font-super-muted-color);
  --activity-section-width: 265px;

  /* Font family */
  --pagination-font-family: "Montserrat", sans-serif;
  --pagination-font-family-tertiary: "Font Awesome 5 Pro", sans-serif;

  /* It is used for table card circular number */
  --pagination-font-family-secondary: din-condensed, "Montserrat", sans-serif;

  /* Font size: px */
  --font-size-value-widget: 55px;
  --font-size-circular-progress-edge: 40px;
  --font-size-circular-progress-edge-icon: 35px;
  --font-size-xx-large: 25px;
  --font-size-x-large: 20px;
  --font-size-large: 15px;
  --font-size-default: 13px;
  --font-size-small: 11px;

  /* components height */
  --height-widget: 165px;
  --height-dashboard-card: 110px;
  --height-button: 40px;

  /* background for status */
  --light-red-background: #fae1e2;
  --yellow-background: #fff2df;
  --light-green-background: #dcf3de;
  --grey-background: #efefef;
  --dark-blue-background: #dcf0f9;
  --dark-yellow-background: #feac0944;
  --light-blue-background: #d5f3ff;
  --primary-contrast-background: #fee9c5;
  --base-badge-background: #d4eef9;

  /* home page */
  --home-page-background-color: #000000ad;
  --gradient-background-start-color: #21212133;
  --gradient-background-end-color: var(--primary-dark-dashboard-color);

  /* SideBar and SearchBar customizing */
  --sb-height: calc(100vh - var(--footer-height));
  --sb-width: 70px;
  --sb-color-de3535: var(--light-red);
  --stepper-container-width: 900px;

  /*  Header  */
  --header-bg-top-color: var(--primary-color);
  --header-bg-bot-color: var(--primary-dark-color);
  --header-wrapper-height: 65px;

  /* border size */
  --border-radius-scrollbar: 12px;
  --border-width: 1px;
  --border-selected-size: var(--border-width);
  --base-inputs-border-radius: 0.25rem;

  /* Base inputs: FormComboBox, FormDatePicker, FormDropdown, FormInput */
  --default-border: #d3d3d3;
  --border-color-selected: var(--primary-color);
  --border-color-input: #ebebeb;
  --base-input-border: var(--border-width) solid var(--default-border);
  --base-inputs-opacity: 1;
  --base-inputs-border-color-active: var(--primary-color);
  --base-inputs-border-color-error: var(--font-ko-color);
  --base-form-rows-margin: 24px;

  /* This was --base-inputs-border-color-isValid, but it's syntactically wrong */
  --base-inputs-border-color-is-valid: var(--font-ok-color);
  --base-inputs-box-shadow-active: 0 0 0 1px var(--base-inputs-border-color-active);

  /* This was --base-inputs-box-shadow-isValid, but it's syntactically wrong */
  --base-inputs-box-shadow-is-valid: 0 0 0 0 var(--font-ok-color);
  --base-inputs-box-shadow-error: 0 0 0 0 var(--font-ko-color);

  /* routes-content */
  --routes-content-padding: 25px;
  --routes-content-double-padding: calc(var(--routes-content-padding) * 2);
  --routes-content-border-radius: var(--base-inputs-border-radius);
  --routes-content-width: calc(100% - var(--sb-width));

  /* Breadcrumbs */
  --breadcrumbs-height: 50px;

  /* Grids */
  --grid-gap: 15px;
  --base-dashboard-margin: 26px;

  /* FullCalendar customizing */
  --fc-yellow-event: var(--primary-contrast-background);
  --fc-blue-event: var(--primary-lightest-color);
  --fc-gray-event: var(--background-selected-color);
  --fc-today-bg-color: #f6fbfd;
  --fc-event-border-color: var(--primary-dark-color);
  --fc-event-bg-color: var(--primary-dark-color);
  --fc-event-text-color: var(--font-color);
  --fc-button-bg-color: var(--primary-color);
  --fc-button-border-color: var(--primary-color);
  --fc-button-text-color: var(--font-color);
  --fc-button-active-bg-color: var(--primary-darker-color);
  --fc-button-hover-bg-color: var(--primary-darker-color);
  --fc-border-color: #ddd;
  --fc-border: var(--border-width) solid var(--fc-border-color);

  /* NoteList */
  --note-list-border: var(--border-width) solid var(--font-semi-muted-color);
  --note-list-header-height: 75px;
  --note-list-view-content-height:
    calc(
      100% - var(--note-list-right-footer-height) - var(--note-list-header-height) -
      (4 * var(--note-list-element-padding))
    );
  --note-list-right-footer-height: 70px;
  --note-list-element-padding: 5px;

  /* defaults on main page with tree view */
  --base-maintenance-asset-card-color: #fefaf1;
  --base-alarm-asset-card-color: #fcf2f2;
  --base-default-height: calc(100vh - var(--header-wrapper-height) - 68px);
  --base-footer-button: calc(var(--height-button) + 40px);

  /* box-shadows */
  --default-box-shadow: #7a7a7a0f;
  --base-default-box-shadow: 0 3px 6px var(--default-box-shadow);
  --base-top-negative-box-shadow: -3px 0 10px var(--font-muted-color);
  --base-bottom-box-shadow: 0 3px 16px var(--font-semi-muted-color);
  --base-big-box-shadow: inset 10px 0 30px 0 var(--default-box-shadow);

  /* trend parameters line colors */
  --trend-param-s1: var(--primary-color);
  --trend-param-s2: var(--primary-dark-color);
  --trend-param-s3: var(--primary-contrast-color);
  --trend-param-s4: var(--primary-darker-color);
  --trend-param-s5: var(--font-muted-color);

  /* Mobile */
  --mobile-calendar-selected-day: var(--primary-color)
}

@media screen and (max-width: 1024px) {
  :root {
    --sb-width: 0;
    --routes-content-width: 100%;
  }
}

@media screen and (max-width: 1536px) { /* 1528px used for edge browser becuase of the border radius of the page */
  :root {
    --footer-height: 25px !important;
    --header-wrapper-height: 50px !important;
    --routes-content-padding: 15px !important;
    --breadcrumbs-height: 30px !important;
    --grid-gap: 10px !important;
    --base-dashboard-margin: 10px !important;
    --height-dashboard-card: 90px !important;
    --font-size-circular-progress-edge: 35px !important;
  }
}