:root {
    /* Fonts */
    --bold: 700;
    --semi-bold: 600;
    --thin: 300;
    /* Font sizes */
    --base-font-px: 18;
    --font-size-normal: calc(0.8625rem + 1vw);
    --font-size-small: calc(1rem * 17 / 18); /* 17px */
    --font-size-small-study: calc(1rem * 16 / 24); /* 12px */
    --font-size-very-big: calc(1rem * 24 / 18); /* 24px */
    --font-size-big: calc(1rem * 20 / 18); /* 20px */
    --font-size-big-study: calc(1rem * 20 / 24); /* 15px */
    --font-size-middle-small: calc(1rem * 14 / 18); /* 14px */
    --font-size-smaller: calc(1rem * 14 / 22); /* 11px */
    --font-size-very-small: calc(1rem * 12 / 16); /* 13px */
    --font-size-tiny: calc(1rem * 10 / 18); /* 10px */
    --font-size-pretty-tiny: calc(1rem * 8 / 16); /* 9px */
    /* Application layers */
    --negative-z-index: -1;
    --front-z-index: 1;
    --front-2-z-index: 2;
    --toolbar-panel-z-index: 2;
    --toolbar-main-button-z-index: 4;
    --frame-navigation-z-index: 4;
    --unread-messages-pink-counter: 4;
    --modal-background-z-index: 9;
    --modal-z-index: 10;
    --top-toolbar-z-index: 10;
    --audio-video-remote-tile-index: 15;
    --audio-video-local-tile-index: 16;
    --audio-video-call-toolbar-index: 17;
    --loader-z-index: 19;
    --notification-z-index: 21;
    --toast-z-index: 21;
    /* Often used heights */
    --top-toolbar-height: 4.6em;
    --top-toolbar-height-expanded: 6em;
    --navigation-toolbar-height: 2.8em;
    --menu-toolbar-height: 10em;
    --menu-toolbar-height-wide: 7em;
    --menu-toolbar-button-up-position: calc(var(--menu-toolbar-height) - 0.2em);
    --menu-toolbar-button-up-position-wide: calc(var(--menu-toolbar-height-wide) - 0.2em);
    --menu-toolbar-button-down-position: calc(var(--base-toolbar-height) - 0.2em);
    --toolbar-height: calc(var(--top-toolbar-height) + var(--navigation-toolbar-height));
    --zoom-panel-height: 2.25em;
    --base-toolbar-height: 4.8em;
    --content-toolbar-height: calc(var(--base-toolbar-height) * 2 / 3);
    --main-list-padding: 0 1.25em;
    --main-list-margin: 0 1.25em;
    --photos-title-height: 1.5rem;
    --organisation-name-height: 1.7rem;
    --document-header-height: calc(3 * var(--photos-title-height));
    --photos-preview-heading: 3em;
    --photos-preview-navigation: 2.5em;
    --organisation-name-height: 1.7rem;

    /* Bleepa theme */
    --body-bg: var(--color-primary-800);
    --base-font-color: var(--color-light);

    --separator-color: var(--color-primary-100);
    --input-underline-color: var(--color-dark);

    --button-color: var(--color-dark);
    --confirm-button-color: var(--color-accent-500);

    --organisation-name-bg: var(--color-primary-900);
    --organisation-name-color: var(--color-accent-100);
    --organisation-name-bottom-bg: var(--color-primary-100);
    --organisation-name-light-color: var(--color-accent-400);

    --top-toolbar-bg: var(--color-primary-900);
    --top-toolbar-color: var(--color-light);

    --navigation-toolbar-bg: var(--color-primary-800);
    --navigation-toolbar-separator: var(--color-primary-100);
    --navigation-toolbar-color: var(--color-light);

    --preview-menu-bg: var(--color-primary-800);
    --preview-bg: var(--color-primary-700);
    --preview-color: var(--color-white);
    --preview-content-bg: var(--color-black);
    --preview-header-color: var(--color-white);
    --thumbnail-signature-color: var(--color-white);

    --filters-border-color: var(--color-white);
    --document-filters-bg: var(--color-primary-800);
    --document-filters-input-bg: var(--color-primary-800);
    --document-filters-input-color: var(--color-light);

    --list-item-color: var(--color-light);
    --list-item-first-line-color: var(--color-accent-300);
    --list-item-hover-bg: var(--color-primary-700);
    --open-record-icon: var(--color-accent-300);

    --menu-bg: var(--color-primary-50);
    --menu-color: var(--color-dark);
    --menu-separator: var(--separator-color);
    --menu-icon-color: var(--color-accent-500);

    --frame-toolbar-bg: var(--color-black);
    --toolbar-background: rgba(var(--color-primary-800-raw), 0.9);
    --toolbar-icon-color: var(--color-primary-100);
    --toolbar-menu-color: var(--color-accent-300);
    --toolbar-menu-icon-color: var(--color-accent-500);
    --toolbar-menu-header-color: var(--color-primary-100);
    --toolbar-menu-slider-bg: var(--color-accent-300);
    --toolbar-menu-slider-border-color: var(--color-black);

    --image-metadata-color: var(--color-light);

    --dropdown-list-bg: var(--color-primary-50);
    --dropdown-list-item-hover: var(--color-accent-500);

    --modal-header: var(--color-accent-500);
    --take-photo-modal-bg: var(--color-black);
    --preview-photo-modal-bg: var(--color-black);
    --disclaimer-modal-bg: var(--color-white);
    --disclaimer-modal-color: var(--color-accent-400);

    --toast-bg: var(--color-white);
    --toast-color: var(--color-accent-500);

    --monitor-contrast-header-bg: var(--color-primary-900);
    --monitor-contrast-bg: var(--color-primary-800);
    --monitor-contrast-color: var(--color-light);

    --sidebar-button-color: var(--color-accent-800);
    
    --patient-info-light-color: var(--color-accent-500);
    --group-label-text: var(--color-accent-A700);

    --loader-background: rgba(var(--color-primary-100-raw), 0.9);
    --loader-text-color: var(--color-accent-500);

    /* Other often used variables */
    --modal-shadow: 0px 1px 4px var(--color-black-transparent-2); /* Shadow for pop-ups and the notification control. */
    --modal-overlay-background: rgba(var(--color-primary-800-raw), 0.7);
    --default-font: "Source Sans Pro";
    --button-shadow: 0.1rem 0.1rem 0.2rem 0 rgba(var(--color-primary-300-raw), 0.25);

    /* Variables used in file upload wizard pages */
    --file-upload-header-height: 12em;
    --file-upload-footer-height: 3em;
}

/* Instead of recalculating the values of font-size variables (declared at the beginning of this file), 
the styles for some classes or controls require customization. This is because the required font-sizes 
for the mobile view are not equally calculated for large screens (about 75% of cases are different). */
@media (orientation: landscape) {
    :root {
        --main-list-padding: 0 5rem;
        --main-list-margin: 0 5rem;
    }
}

@media (orientation: landscape) and (max-width: 991px) {
    :root {
        --main-list-padding: 0 3rem;
        --main-list-margin: 0 3rem;
    }
}

@media (orientation: landscape) and (max-width: 1440px) {
    :root {
        --font-size-normal: var(--base-font-px);
    }
}

@media (orientation: landscape) and (min-width: 1441px) {
    :root {
        --font-size-normal: calc(0.8625rem + 0.1vw);
    }
}

@media (orientation: landscape) and (min-width: 1920px) {
    :root {
        --font-size-normal: calc(0.8625rem + 0.3vw);
    }
}