@charset "UTF-8";
/* CSS Document */


/* //////////////////////// COLOURS /////////////////////// */

:root {
/* ________________ WAD Neutral Colours (RGB) ___________ */ 
 --white: 255, 255, 255; /* #ffffff */
--cod-gray-50: 246, 246, 245; /* #f6f6f5 */
--cod-gray-100: 231, 231, 230; /* #e7e7e6 */
--cod-gray-200: 210, 209, 207; /* #d2d1cf */
--cod-gray-300: 179, 178, 173; /* #b3b2ad */
--cod-gray-400: 140, 139, 132; /* #8c8b84 */
--cod-gray-500: 113, 112, 105; /* #717069 */
--cod-gray-600: 96, 95, 90; /* #605f5a */
--cod-gray-700: 81, 81, 77; /* #51514d */
--cod-gray-800: 71, 71, 67; /* #474743 */
--cod-gray-900: 62, 62, 59; /* #3e3e3b */
--cod-gray-950: 18, 18, 17; /* #121211 */
--cod-gray-990: 15, 15, 14; /* #0f0f0e */ 
--black: 0, 0, 0; /* #000000 */
    
/* ________________ WAD Accent Colours (RGB) ___________ */

--color-wadzul-50: 239, 248, 255; /* #eff8ff */
--color-wadzul-100: 222, 240, 255; /* #def0ff */
--color-wadzul-200: 182, 227, 255;/* #b6e3ff */
--color-wadzul-300: 117, 206, 255; /* #75ceff */
--color-wadzul-400: 44, 182, 255; /* #2cb6ff */
--color-wadzul-500: 0, 148, 234; /* #0094ea */
--color-wadzul-600: 0, 124, 212; /* #007cd4 */
--color-wadzul-700: 0, 98, 171; /* #0062ab */
--color-wadzul-800: 0, 83, 141; /* #00538d */
--color-wadzul-900: 6, 70, 116; /* #064674 */
--color-wadzul-950: 4, 44, 77; /* #042c4d */
--color-wadzul-980: 3, 30, 52; /* #031e34 */    
 
    
/*filter to convert from black to target WAD Neutral Colour */
--black_to_white: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); /* Loss: 0.0. This is a perfect result. */
--black_to_color-cod-gray-50: invert(98%) sepia(96%) saturate(283%) hue-rotate(296deg) brightness(109%) contrast(93%); /* Loss: 0.1. This almost perfect. */
--black_to_color-cod-gray-100: invert(87%) sepia(50%) saturate(3%) hue-rotate(14deg) brightness(99%) contrast(91%); /* Loss: 0.1. This almost perfect. */    
--black_to_color-cod-gray-200: invert(82%) sepia(28%) saturate(13%) hue-rotate(2deg) brightness(95%) contrast(100%); /* Loss: 0.1. This almost perfect. */    
--black_to_color-cod-gray-300: invert(85%) sepia(3%) saturate(367%) hue-rotate(13deg) brightness(83%) contrast(94%); /* Loss: 0.1. This almost perfect. */ 
--black_to_color-cod-gray-400: invert(59%) sepia(3%) saturate(674%) hue-rotate(15deg) brightness(93%) contrast(87%); /* Loss: 0.0. This is a perfect result. */    
--black_to_color-cod-gray-500: invert(44%) sepia(6%) saturate(358%) hue-rotate(15deg) brightness(97%) contrast(94%); /* Loss: 0.0. This is a perfect result. */
--black_to_color-cod-gray-600: invert(38%) sepia(4%) saturate(489%) hue-rotate(13deg) brightness(94%) contrast(91%); /* Loss: 0.0. This is a perfect result. */    
--black_to_color-cod-gray-700: invert(31%) sepia(4%) saturate(471%) hue-rotate(22deg) brightness(92%) contrast(85%); /* Loss: 0.0. This is a perfect result. */
--black_to_color-cod-gray-800: invert(25%) sepia(5%) saturate(455%) hue-rotate(22deg) brightness(94%) contrast(86%); /* Loss: 0.0. This is a perfect result. */
--black_to_color-cod-gray-900: invert(20%) sepia(6%) saturate(402%) hue-rotate(22deg) brightness(92%) contrast(83%); /* Loss: 0.0. This is a perfect result. */    
--black_to_color-cod-gray-950: invert(4%) sepia(5%) saturate(783%) hue-rotate(22deg) brightness(96%) contrast(92%); /* Loss: 0.0. This is a perfect result. */
--black_to_black: invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(96%) contrast(104%); /* Stay or return to black, as it is. */
    
 /*filter to convert from black to target VPO2 Accent Colour */    
--black_to_color-wadzul-50: invert(90%) sepia(5%) saturate(1162%) hue-rotate(192deg) brightness(105%) contrast(104%); /* Loss: 0.0. This is a perfect result. */
--black_to_color-wadzul-100: invert(88%) sepia(4%) saturate(1911%) hue-rotate(188deg) brightness(106%) contrast(101%); /* Loss: 0.0. This is a perfect result. */
--black_to_color-wadzul-200: invert(86%) sepia(10%) saturate(1480%) hue-rotate(176deg) brightness(100%) contrast(102%); /* Loss: 0.0. This is a perfect result. */
--black_to_color-wadzul-300: invert(73%) sepia(24%) saturate(1114%) hue-rotate(173deg) brightness(100%) contrast(102%); /* Loss: 0.0. This is a perfect result. */
--black_to_color-wadzul-400: invert(57%) sepia(35%) saturate(984%) hue-rotate(159deg) brightness(101%) contrast(102%); /* Loss: 0.0. This is a perfect result. */
--black_to_color-wadzul-500: invert(37%) sepia(51%) saturate(3801%) hue-rotate(180deg) brightness(102%) contrast(102%); /* Loss: 0.0. This is a perfect result. */
--black_to_color-wadzul-600: invert(31%) sepia(95%) saturate(1239%) hue-rotate(181deg) brightness(96%) contrast(105%); /* Loss: 0.1. This almost perfect */
--black_to_color-wadzul-700: invert(26%) sepia(64%) saturate(2036%) hue-rotate(186deg) brightness(91%) contrast(101%); /* Loss: 0.0. This is a perfect result. */
--black_to_color-wadzul-800: invert(21%) sepia(58%) saturate(2757%) hue-rotate(186deg) brightness(89%) contrast(101%); /* Loss: 0.0. This is a perfect result. */
--black_to_color-wadzul-900: invert(22%) sepia(91%) saturate(745%) hue-rotate(171deg) brightness(89%) contrast(103%); /* Loss: 0.0. This is a perfect result. */
--black_to_color-wadzul-950: invert(14%) sepia(99%) saturate(773%) hue-rotate(176deg) brightness(91%) contrast(103%); /* Loss: 0.1. This almost perfect. */ 
--black_to_color-wadzul-980: invert(12%) sepia(28%) saturate(1587%) hue-rotate(168deg) brightness(88%) contrast(104%); /* Loss: 0.1. This almost perfect. */ 
    
}