html 
{
 font-family: "roboto", "segoe ui";
 font-size: var(--fontsize);
}

body
{
 display: flex; 
 min-height: 100vh;
 flex-direction: column;  
 margin: 0;
 padding: 0; 
}

html ::-webkit-scrollbar 
{
 width: 12px;
 height: 12px;      
 background-color: rgb(32,32,32);    
}

html ::-webkit-scrollbar-corner
{
 background-color: rgb(32,32,32);
}

html ::-webkit-scrollbar-thumb 
{
 height: 100px;
 border-radius: 8px;
 border: 4px solid transparent;
 background-clip: content-box;
 background-color: rgb(128,128,128);
}

html ::-webkit-scrollbar-thumb:hover 
{
 background-color: antiquewhite;
}

.pagelock { overflow: hidden; }

* { box-sizing: border-box; }

:root
{
 --browser-zoomscale: 1;    
 --fontsize: 14px; 
 --line-height: 32px;    

 --lg-solid-colour-1: #19508E;
 --lg-solid-colour-2: #5265AD;
 --lg-semitransparent-colour-1: #19508E64;
 --lg-semitransparent-colour-2: #5265ADA0;   

 --primary-colour-dark: #000000;
 --primary-colour-dark-900: #000000;
 --primary-colour-dark-800: #262626;
 --primary-colour-dark-700: #434343;
 --primary-colour-dark-600: #555555;  
 --primary-colour-dark-500: #7B7B7B; 
 --primary-colour-dark-400: #9D9D9D;
 --primary-colour-dark-300: #C4C4C4;
 --primary-colour-dark-200: #D9D9D9;
 --primary-colour-dark-100: #E9E9E9;
 --primary-colour-dark-50: #F5F5F5;

 --primary-colour-900: #275094;
 --primary-colour-800: #336DB3;
 --primary-colour-700: #3A7EC5;
 --primary-colour-600: #4390D8;
 --primary-colour-500: #4B9EE5;
 --primary-colour-400: #5EACE9;
 --primary-colour-300: #77BBEC;
 --primary-colour-200: #9ACEF2;
 --primary-colour-100: #C0E0F7;
 --primary-colour-50:  #E5F3FB;
    
 --complementry-colour-900: #D88B43;
 --complementry-colour-800: #E2AD53;
 --complementry-colour-700: #E7C35C;
 --complementry-colour-600: #ECD966;
 --complementry-colour-500: #EDE76B;
 --complementry-colour-400: #F0EC7D;
 --complementry-colour-300: #F3F092;
 --complementry-colour-200: #F6F5AF;
 --complementry-colour-100: #F9F9CE;
 --complementry-colour-50:  #FCFDEB;
         
 --primary-colour-grey: #808080;
 --primary-colour-disabled: #A0A0A0;  
 --primary-colour-disabled-text: #5C5C5C;   

 --dark-colour: 0,0,0;
 --grey-colour: 128,128,128;    
 --light-colour: 255,255,255;  
 --command-background-default: rgb(62,62,62);
 --command-background-hover: rgb(252,252,252);  
 --command-foreground-hover: var(--command-background-default);
    
 --ok-backgroundcolour: rgb(25,135,84);
 --info-backgroundcolour: rgb(13,202,240);
 --warning-backgroundcolour: rgb(255,193,7);
 --hazard-backgroundcolour: rgb(220,53,69); 
 --relaxing-backgroundcolour: rgb(153,102,204);
    
 --ok-foregroundcolour: rgb(56,141,60);
 --info-foregroundcolour: rgb(5,81,96);
 --warning-foregroundcolour: rgb(102,77,3);
 --hazard-foregroundcolour: rgb(88,21,28);
 --relaxing-foregroundcolour: rgb(103,51,155);
  
 --font-weight-thin: 100;
 --font-weight-extralight: 200;      
 --font-weight-light: 300;      
 --font-weight-normal: 400;
 --font-weight-medium: 500;
 --font-weight-semibold: 600;  
 --font-weight-bold: 700;    
 --font-weight-extrabold: 800;      
 --font-weight-black: 900;  
 --font-weight-extrablack: 950;   
    
 /* \/ \/ BODY \/ \/ */
 --body-backgroundcolour: #0d0d0d;
 /* /\ /\ BODY /\ /\ */
    
 /* \/ \/ HEADER \/ \/ */ 
 --header-backgroundcolour: #282828FF;
 --header-home-backgroundcolour: #80808033;
 --header-home-foregroundcolour: #FAEBD7;
 /* /\ /\ HEADER /\ /\ */
    
 --primary-colour-light: rgb(255,255,255);    
}