@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

@font-face {
    font-family: Poppins-Regular;
    src: url('../fonts/poppins/Poppins-Regular.ttf') format('truetype');
}

@font-face {
    font-family: Poppins-Bold;
    src: url('../fonts/poppins/Poppins-Bold.ttf') format('truetype');
}

@font-face {
    font-family: Poppins-BoldItalic;
    src: url('../fonts/poppins/Poppins-BoldItalic.ttf') format('truetype');
}


@font-face {
    font-family: Rouben-Bold;
    src: url('../fonts/rouben/Rouben-Bold.otf') format('opentype');
}

@font-face {
    font-family: Rouben-Light;
    src: url('../fonts/rouben/Rouben-Light.otf') format('opentype');
}

:root {
    --primary-font-family: Poppins-Regular;
}

.L {
    --h1-font-size: 3rem;
    --h2-font-size: 2.5rem;
    --h3-font-size: 2rem;
    --h4-font-size: 1.75rem;
    --h5-font-size: 1.5rem;
    --form-control-font-size: 1.5rem;
    --h6-font-size: 1.25rem;
    --label-font-size: 1.25rem;
    --p-font-size: 1.25rem;
    --btn-font-size: 1.25rem;
    --th-font-size: 1.25rem;
    --optgroup-font-size: 1.25rem;
    --option-font-size: 1rem;
    --navrib-icon-text-size: 1rem;
    --td-font-size: 1rem;
    --nav-item-font-size: 1rem;
    --secondary-th-size: 0.6rem;
    --side-navbar-expanded-width: 180px;
    --side-navbar-collapsed-width: 70px;
    --oi-width: 2rem;
    --loader-small-size: 5rem;
}

.M {
    --h1-font-size: 2.5rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.75rem;
    --h4-font-size: 1.5rem;
    --h5-font-size: 1.25rem;
    --form-control-font-size: 1.25rem;
    --h6-font-size: 1rem;
    --label-font-size: 1rem;
    --p-font-size: 1rem;
    --btn-font-size: 1rem;
    --th-font-size: 1rem;
    --optgroup-font-size: 1rem;
    --option-font-size: 0.8rem;
    --navrib-icon-text-size: 0.8rem;
    --nav-item-font-size: 0.8rem;
    --td-font-size: 0.8rem;
    --secondary-th-size: 0.6rem;
    --side-navbar-expanded-width: 180px;
    --side-navbar-collapsed-width: 70px;
    --oi-width: 2rem;
    --loader-small-size: 4rem;
}

.S {
    --h1-font-size: 2rem;
    --h2-font-size: 1.75rem;
    --h3-font-size: 1.5rem;
    --h4-font-size: 1.25rem;
    --h5-font-size: 1rem;
    --form-control-font-size: 1rem;
    --h6-font-size: 0.8rem;
    --label-font-size: 0.8rem;
    --p-font-size: 0.8rem;
    --nav-item-font-size: 0.8rem;
    --btn-font-size: 0.8rem;
    --th-font-size: 0.8rem;
    --optgroup-font-size: 0.8rem;
    --navrib-icon-text-size: 0.8rem;
    --option-font-size: 0.7rem;
    --td-font-size: 0.7rem;
    --secondary-th-size: 0.6rem;
    --side-navbar-expanded-width: 150px;
    --side-navbar-collapsed-width: 70px;
    --oi-width: 2rem;
    --loader-small-size: 3rem;
}

.XS {
    --h1-font-size: 1.75rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --h4-font-size: 1rem;
    --h5-font-size: 0.8rem;
    --form-control-font-size: 0.5rem;
    --h6-font-size: 0.5rem;
    --label-font-size: 0.5rem;
    --p-font-size: 0.5rem;
    --nav-item-font-size: 0.5rem;
    --btn-font-size: 0.5rem;
    --th-font-size: 0.5rem;
    --optgroup-font-size: 0.5rem;
    --navrib-icon-text-size: 0.6rem;
    --option-font-size: 0.5rem;
    --secondary-th-size: 0.5rem;
    --td-font-size: 0.5rem;
    --side-navbar-expanded-width: 120px;
    --side-navbar-collapsed-width: 70px;
    --oi-width: 2rem;
    --loader-small-size: 2rem;
}

.round-it-out {
    --border-radius: 25px;
}

.no-rounding {
    --border-radius: 0px;
}

/* Shared monochrome settings */
.monochrome {
    --primary-font-family: Rouben-Light;
    --secondary-font-family: Arial, Helvetica, sans-serif;
    --bold-font-family: Rouben-Bold;
    --bold-italic-font-familiy: Rouben-Light;
    --shadow-color: rgba(0, 0, 0, 0.1);
    /* Greyscale Palette */
    --white: #FFFFFF;
    --white-9: #F2F2F2;
    --white-8: #E6E6E6;
    --white-7: #D9D9D9;
    --white-6: #CCCCCC;
    --white-5: #BFBFBF;
    --white-4: #B3B3B3;
    --white-3: #A6A6A6;
    --white-2: #999999;
    --white-1: #8C8C8C;
    --black-1: #737373;
    --black-2: #666666;
    --black-3: #595959;
    --black-4: #4D4D4D;
    --black-5: #404040;
    --black-6: #333333;
    --black-7: #262626;
    --black-8: #1A1A1A;
    --black-9: #0D0D0D;
    --black: #000000;
    /* Traffic Lights */
    --success-color: green;
    --warning-color: orange;
    --danger-color: red;
    --link-color: cornflowerblue;
    /* Set Values */
    --top-nav-height: 63px;
}

/* Monochrome Light */
.monochromeLight {
    /* OLD */
    --site-foreground-colour: var(--site-secondary-color);
    --loading-tiles-primary-colour: var(--black-1);
    --loading-tiles-secondary-colour: var(--black-2);
    --loading-tiles-highlight-colour: var(--black-3);
    --loading-line-gradient: linear-gradient(45deg, var(--white-7), var(--white-5), var(--white-7));
    /* NEW */
    --color-scheme: light;
    --hover-bg: rgba(0, 0, 0, 0.1);
    --disabled-opacity: 0.5;
    /* Core foreground/background */
    --site-foreground-color: var(--white);
    --site-background-color: var(--white-9);
    --site-darker-background-color: var(--white-7);
    --site-primary-color: var(--white);
    --site-secondary-color: var(--black);
    --site-accent-color: #00A19B;
    --site-shadow-color: rgba(0, 0, 0, 0.1);
    --demarcation-line-color: var(--white-5);
    /* Loader */
    --loader-color: var(--site-secondary-color);
    --loader-overlay-bg: rgba(0, 0, 0, 0.1);
    /* Navigation */
    --navbar-background-color: var(--white);
    --navbar-toggler-background-color: var(--white-4);
    --navbar-toggler-hover-background-color: var(--white-1);
    --nav-ribbon-icon-border-color: var(--white-8);
    --nav-ribbon-icon-color: var(--black-1);
    --nav-ribbon-icon-hover-background-color: var(--white-8);
    --nav-modal-button-hover: var(--white-8);
    /* Button */
    --btn-primary-text: var(--white);
    --btn-primary-bg: var(--black);
    --btn-primary-hover-bg: var(--white-6);
    --btn-outline-border: var(--black);
    /* Button Card */
    --btn-card-background-color: var(--white);
    --btn-card-border-color: var(--white-8);
    --btn-card-hover-color: var(--white-8);
    /* Tables */
    --table-header-bg: var(--site-accent-color);
    --table-row-bg: var(--white-9);
    --table-stripe-bg: var(--white);
    --table-hover-bg: var(--white-8); 
    /* Bar Charts */
    --graph-primary-color: #007B8A;
    --graph-secondary-color: #FFB400;
    --graph-tertiary-color: #FF5C5C;
    /* Modals */
    --modal-background-color: var(--white-5);
    /* Form Control */
    --disabled-form-control-color: rgba(0,0,0,0.1);
}

/* Monochrome Dark */
.monochromeDark {
    /* OLD */
    --loading-tiles-primary-colour: var(--white-1);
    --loading-tiles-secondary-colour: var(--white-2);
    --loading-tiles-highlight-colour: var(--white-3);
    --loading-line-gradient: linear-gradient(45deg, var(--black-7), var(--black-5), var(--black-7));
    /* NEW */
    --color-scheme: dark;
    --hover-bg: rgba(255, 255, 255, 0.25);
    --disabled-opacity: 0.75;
    /* Core foreground/background */
    --site-foreground-color: var(--black-7);
    --site-background-color: var(--black-8);
    --site-darker-background-color: var(--black-9);
    --site-primary-color: var(--black);
    --site-secondary-color: var(--white);
    --site-accent-color: #00A19B;
    --site-shadow-color: var(--black);
    --demarcation-line-color: var(--black-5);
    /* Loader */
    --loader-color: var(--site-secondary-color);
    --loader-overlay-bg: rgba(0, 0, 0, 0.1);
    /* Navigation */
    --navbar-background-color: var(--black-9);
    --navbar-toggler-background-color: var(--black-1);
    --navbar-toggler-hover-background-color: var(--white-5);
    --nav-ribbon-icon-border-color: var(--black-1);
    --nav-ribbon-icon-color: var(--white-5);
    --nav-ribbon-icon-hover-background-color: var(--black-1);
    --nav-modal-button-hover: var(--black-1);
    /* Button */
    --btn-primary-text: var(--black);
    --btn-primary-bg: var(--white);
    --btn-primary-hover-bg: var(--black-3);
    --btn-outline-border: var(--white);
    /* Button Card */
    --btn-card-background-color: var(--black-6);
    --btn-card-border-color: var(--black-5);
    --btn-card-hover-color: var(--black-5);
    /* Tables */
    --table-header-bg: var(--site-accent-color);
    --table-row-bg: var(--black-7);
    --table-stripe-bg: var(--black-6);
    --table-hover-bg: var(--black-5); 
    /* Bar Charts */
    --graph-primary-color: #007B8A;
    --graph-secondary-color: #FFB400;
    --graph-tertiary-color: #FF5C5C;
    /* Modals */
    --modal-background-color: var(--black-5);
    /* Form Control */
    --disabled-form-control-color: var(--white-1);
}