/* 
Global variables. top level generic variables, eg defining root colours, standard sizes, padding etc.
*/
:root {
	/* Font */
	--generic-font: "Inter", "poppins", "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	
	/* Root colours */
	--root-colour-1: #223645; /* #0078c9 */
	--root-colour-1-lightest: #a0b2c1;
	--root-colour-1-brighter: #4e8abe;
	--root-colour-2: #278838;
	--root-colour-3: #1ab394;
	--darkest: #000;
	--variant0: #4a4a4a;
	--variant1: #676a6c;
	--variant2: #888;
	--variant2b: #cccccc;
	--variant3: #e2e5e7;
	--variant4: #f3f3f4;
	--variant5: #f6f6f6;
	--lightest: #ffffff;
	--highlight: #FBF8B9;
	--highlight-bg-colour: #ffb27f;
	--highlight-bg-colour-variant1: #ffc9a5; /* 30% lighter */
	--alternate-highlight: #fff7e5;
	--inner-background-colour: #fff;
	--tooltip-background-colour: #f7f1c5;
	--error-colour: #be0000; 
	--warning-colour: #ff8c00;
	--error-text-colour: #be0000;
	--warning-text-colour: #ff8c00;
	--ok-background-colour: #d2f8d2;
	--error-background-colour: #ffc0cb;
	--scrollbarBG: #CFD8DC;
	--thumbBG: #90A4AE;
	--blue-gray: #546176;
	--dark-green: #1F6D2D;

	/* ISW branding */
	--primary-green: #278838;
	--brand-blue: #007AC9;
	--green-darker: #175222;
	--green-dark: #1F6D2D;
	--green-light: #92C39B;
	--disabled-gray: #F4F6F8;
	--background-gray-light: #F8F9FA;
	--line-gray: #DEE1EA;
	--background-gray: #EDF0F3;
	--border-gray: #B8C5D5;
	--state-blue: #007AC9;
	--state-blue-light: #a1d1ef;
	--state-blue-lighter: #E8F4FC;
	--error-red: #C31818;
	--warning-orange: #F2994A;
	--soft-blue-gray: #b8c5d5;
	--light-blue-gray: #007ac9;
	--grayish-blue: #f4f6f8;
	--crimson-red: #c31818;
	--lavender-Blush: #fcf3f3;
	--prussian-Blue: #001737;
	--alice-Blue: #e8f4fc;
	--azure-blue: #026aae;
	--deep-blue: #1e2556;
	--light-gray-shade: #f8f9fa;
	--light-shade-blue-gray:#dee1ea;
	--lighter-shade-blue-gray: #edf0f3;
	--selected-item-background-color: #007AC9;
	--banner-secondary-menu-background-color: rgb(237, 240, 243);
	--banner-primary-menu-background-color: rgb(1, 150, 72);
	--minimise-menu-expanded-panel-submenu-font-colour: #001737;
    --minimise-menu-expanded-panel-submenu-font-hover-colour: #001737;
	--left-banner-options-hover-color: #00fa9a;
	--login-screen-text-color: #ffff;
    /* Text sizes */
	--heading-text-size: 15px;
	--heading-weight: 700;
	--subheading-text-size: 14px;
	--subheading-weight: 600;
	--selected-option-weight: 600;
	--intermediate-text-size: 13px;
	--standard-text-size: 13px;
	--standard-weight: 400;

	/* Spacing and padding */
	--generic-gap: 10px;
	--generic-element-gap: 9px;
	--generic-padding: 6px;
	--generic-text-padding: 4px;
	--label-input-gap: 5px;
	--button-min-width: 67px;

	/* Borders */
	--standard-border-width: 1px;
	--inner-border-width: 1px;

    /* Buttons and inputs */
	--standard-button-height: 25px;
	--standard-input-height: 23px;
	--standard-select-height: 26px;
	--button-left-right-padding: 10px;

    /* Icons */
	--standard-icon-size: 17px;
	--icon-size-menu-container: 16px;
	--nav-icon-padding: 8px;
	--left-banner-chevron-size: 10px;
	--left-banner-icon-size: 18px;
	--cogs-banner-icon-size: 14px;

    /* Layout */
	--logo-width: 168px;
	--logo-height: 56px;
	--left-hand-column-width: 250px;
	--minimise-icon-from-right: 32px;
	--minimise-icon-standard-view-top: 87px;
	
	/* When left hand menu collapsed */
	--left-hand-column-minimised-width: 60px;
	--minimise-icon-from-right-minimised: 233px;
	--minimise-icon-minimised-view-top: 65px;
	
    /* Opacity */
	--icon-opacity-value: 0.35;
	--disable-opacity: 0.3;
	--placeholder-opacity: 0.8;

 	/* Transitions */
	--transition-duration: 0.5s;
	--navbar-flyout-duration: 0.3s;

	/* Labels */
	--label-suffix: ":";

	/* Lists */
	--nested-list-indentation: 12px;

	/* Avatars */
	--user-avatar-size: 40px;
	--avatar-uploader-size: 250px;

	/* Timings */
	--tooltip-delay: 1000;

	/* Workspace-Columns */
	/* Note that these sizes are arbitrary as they will be set dynamically in workspace.js */
	--left-column-width: 400px;
	--right-column-width: 400px;
	--main-column-width: 400px;

	/*menu sizes*/
	--minimised-menu: 60px;
	--maximised-menu: 250px;
	--banner-menu-width: 250px;
}