@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans Regular'), url('../fonts/NotoSans-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 500;
    src: local('Noto Sans Medium'), url('../fonts/NotoSans-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans Bold'), url('../fonts/NotoSans-Bold.woff') format('woff');
}

/* PF v5 */
:where(:root) {
    /* these are patternfly colors, here is the documentation: https://www.patternfly.org/v4/guidelines/colors/ */
    /* NCA Colors */
    /* Blue */
    --pf-v5-global--palette--blue-50: #0700B1;    /* Light */
    --pf-v5-global--palette--blue-100: #0700B1;
    --pf-v5-global--palette--blue-200: #0700B1;
    --pf-v5-global--palette--blue-300: #040066;   /* Main */
    --pf-v5-global--palette--blue-400: #040066;
    --pf-v5-global--palette--blue-500: #040066;
    --pf-v5-global--palette--blue-600: #040066;
    --pf-v5-global--palette--blue-700: #040066;
    --pf-v5-global--palette--blue-800: #020035;   /* Dark */
    --pf-v5-global--palette--blue-900: #020035;
    --pf-v5-global--palette--blue-1000: #020035;

    /* Red */
    --pf-v5-global--palette--red-50: #EFACBB;    /* Light */
    --pf-v5-global--palette--red-100: #EFACBB;
    --pf-v5-global--palette--red-200: #EFACBB;
    --pf-v5-global--palette--red-300: #DA4162;   /* Main */
    --pf-v5-global--palette--red-400: #DA4162;
    --pf-v5-global--palette--red-500: #DA4162;
    --pf-v5-global--palette--red-600: #DA4162;
    --pf-v5-global--palette--red-700: #DA4162;
    --pf-v5-global--palette--red-800: #9E1F3A;   /* Dark */
    --pf-v5-global--palette--red-900: #9E1F3A;
    --pf-v5-global--palette--red-1000: #9E1F3A;

    /* Green */
    --pf-v5-global--palette--green-50: #CAFFE7;    /* Light */
    --pf-v5-global--palette--green-100: #CAFFE7;
    --pf-v5-global--palette--green-200: #CAFFE7;
    --pf-v5-global--palette--green-300: #00C167;   /* Main */
    --pf-v5-global--palette--green-400: #00C167;
    --pf-v5-global--palette--green-500: #00C167;
    --pf-v5-global--palette--green-600: #00C167;
    --pf-v5-global--palette--green-700: #00C167;
    --pf-v5-global--palette--green-800: #008145;   /* Dark */
    --pf-v5-global--palette--green-900: #008145;
    --pf-v5-global--palette--green-1000: #008145;

    /* Orange */
    --pf-v5-global--palette--orange-50: #FFE6D3;    /* Light */
    --pf-v5-global--palette--orange-100: #FFE6D3;
    --pf-v5-global--palette--orange-200: #FFE6D3;
    --pf-v5-global--palette--orange-300: #FF872A;   /* Main */
    --pf-v5-global--palette--orange-400: #FF872A;
    --pf-v5-global--palette--orange-500: #FF872A;
    --pf-v5-global--palette--orange-600: #FF872A;
    --pf-v5-global--palette--orange-700: #FF872A;
    --pf-v5-global--palette--orange-800: #C65600;   /* Dark */
    --pf-v5-global--palette--orange-900: #C65600;
    --pf-v5-global--palette--orange-1000: #C65600;

    /* Grey */
    --pf-v5-global--palette--grey-50: #E8E8E8;
    --pf-v5-global--palette--grey-100: #E8E8E8;
    --pf-v5-global--palette--grey-200: #E8E8E8;
    --pf-v5-global--palette--grey-300: #B9B9B9;
    --pf-v5-global--palette--grey-400: #B9B9B9;
    --pf-v5-global--palette--grey-500: #5D5D5D;
    --pf-v5-global--palette--grey-600: #5D5D5D;
    --pf-v5-global--palette--grey-700: #2E2E2E;
    --pf-v5-global--palette--grey-800: #2E2E2E;
    --pf-v5-global--palette--grey-900: #2E2E2E;
    --pf-v5-global--palette--grey-1000: #2E2E2E;

    /* Assign colors */
    --pf-v5-global--primary-color--100: var(--pf-v5-global--palette--blue-200);
    --pf-v5-global--primary-color--200: var(--pf-v5-global--palette--blue-700);
    --pf-v5-global--primary-color--300: var(--pf-v5-global--palette--blue-1000);
    
    /* Assign colors */
    --pf-v5-global--secondary-color--100: #CAF6FF;
    --pf-v5-global--secondary-color--200: #00D4FF;
    --pf-v5-global--secondary-color--300: #008DAA;

    /* Links */
    --pf-v5-global--link--Color: var(--pf-v5-global--palette--blue-500);
    --pf-v5-global--link--Color--hover: var(--pf-v5-global--secondary-color--200);
    --pf-v5-global--link--Color--light: var(--pf-v5-global--palette--blue-300);
    --pf-v5-global--link--Color--light--hover: var(--pf-v5-global--secondary-color--200);
    --pf-v5-global--link--Color--dark: var(--pf-v5-global--palette--blue-700);
    --pf-v5-global--link--Color--dark--hover: var(--pf-v5-global--secondary-color--200);

    /* Active Color */
    --pf-v5-global--active-color--100: var(--pf-v5-global--palette--blue-500);
    --pf-v5-global--active-color--200: var(--pf-v5-global--palette--blue-600);
    --pf-v5-global--active-color--300: var(--pf-v5-global--palette--blue-600);
    --pf-v5-global--active-color--400: var(--pf-v5-global--palette--blue-700);

    /* Success Color */
    --pf-v5-global--success-color--100: var(--pf-v5-global--palette--green-500);
    --pf-v5-global--success-color--200: var(--pf-v5-global--palette--green-700);
    
    /* Danger Color */
    --pf-v5-global--danger-color--100: var(--pf-v5-global--palette--red-500);
    --pf-v5-global--danger-color--200: var(--pf-v5-global--palette--red-600);
    --pf-v5-global--danger-color--300: var(--pf-v5-global--palette--red-700);
    
    /* Info Color */
    --pf-v5-global--info-color--100: var(--pf-v5-global--secondary-color--100);
    --pf-v5-global--info-color--200: var(--pf-v5-global--secondary-color--200);
    
    /* Warning Color */
    --pf-v5-global--warning-color--100: var(--pf-v5-global--palette--orange-500);
    --pf-v5-global--warning-color--200: var(--pf-v5-global--palette--orange-700);
    
    /* Primary Color */
    --pf-v5-global--primary-color--light-100: var(--pf-v5-global--secondary-color--200);
    --pf-v5-global--primary-color--dark-100: var(--pf-v5-global--secondary-color--300);
    
    /* Background Color */
    --pf-v5-global--BackgroundColor--100: #fff;
    --pf-v5-global--BackgroundColor--150: var(--pf-v5-global--palette--grey-50);
    --pf-v5-global--BackgroundColor--200: var(--pf-v5-global--palette--grey-50);
    --pf-v5-global--BackgroundColor--light-100: #fff;
    --pf-v5-global--BackgroundColor--light-200: var(--pf-v5-global--palette--grey-50);
    --pf-v5-global--BackgroundColor--light-300: var(--pf-v5-global--palette--grey-50);
    --pf-v5-global--BackgroundColor--dark-100: var(--pf-v5-global--palette--grey-900);
    --pf-v5-global--BackgroundColor--dark-200: var(--pf-v5-global--palette--grey-700);
    --pf-v5-global--BackgroundColor--dark-300: var(--pf-v5-global--palette--grey-1000);
    --pf-v5-global--BackgroundColor--dark-400: var(--pf-v5-global--palette--grey-700);
    --pf-v5-global--BackgroundColor--dark-transparent-100: rgba(56, 56, 59, .62);
    --pf-v5-global--BackgroundColor--dark-transparent-200: rgba(56, 56, 59, .32);

    /* Font */
    --pf-v5-global--FontFamily--heading: 'Noto Sans', Arial, sans-serif;
    --pf-v5-global--FontFamily--body: 'Noto Sans', Arial, sans-serif;
    --pf-v5-global--FontFamily--text: 'Noto Sans', Arial, sans-serif;
    --pf-v5-global--FontFamily--monospace: 'Noto Sans', Arial, sans-serif;

    --pf-v5-global--BorderRadius--sm: 4px;
    --pf-v5-global--BorderRadius--lg: 4px;
}

:where(:root) .pf-v5-c-button {
    /* Buttons */
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-v5-global--secondary-color--200);
    --pf-v5-c-button--m-primary--hover--Color: var(--pf-v5-global--palette--blue-700);
    --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--pf-v5-global--primary-color--200);
    --pf-v5-c-button--m-secondary--hover--Color: var(--pf-v5-global--secondary-color--200);
}

:where(.pf-v5-theme-dark) .pf-v5-c-button {
    --pf-v5-c-button--m-secondary--hover--Color: var(--pf-v5-global--palette--blue-700);
}

:where(a,button) {
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), 
        box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), 
        border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), 
        color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

:where(body) {
    /* Font */
    --pf-v5-global--FontFamily--heading: 'Noto Sans', Arial, sans-serif;
    --pf-v5-global--FontFamily--body: 'Noto Sans', Arial, sans-serif;
    --pf-v5-global--FontFamily--text: 'Noto Sans', Arial, sans-serif;
    --pf-v5-global--FontFamily--monospace: 'Noto Sans', Arial, sans-serif;
}

/* Dark Theme overwrites */
:where(.pf-v5-theme-dark):root {
    --pf-v5-global--palette--black-50: #e0e0e0;
    --pf-v5-global--palette--black-100: #c6c7c8;
    --pf-v5-global--palette--black-200: #aaabac;
    --pf-v5-global--palette--black-300: #868789;
    --pf-v5-global--palette--black-400: #57585a;
    --pf-v5-global--palette--black-500: #444548;
    --pf-v5-global--palette--black-600: #36373a;
    --pf-v5-global--palette--black-700: #26292d;
    --pf-v5-global--palette--black-800: #1b1d21;
    --pf-v5-global--palette--black-900: #0f1214;
    --pf-v5-global--palette--red-9999: var(--pf-v5-global--palette--red-700);
    --pf-v5-global--palette--red-8888: var(--pf-v5-global--palette--red-400);
    --pf-v5-global--palette--blue-300: var(--pf-v5-global--palette--blue-500);
    --pf-v5-global--BackgroundColor--100: #1b1d21;
    --pf-v5-global--BackgroundColor--150: #212427;
    --pf-v5-global--BackgroundColor--200: #0f1214;
    --pf-v5-global--BackgroundColor--300: #26292d;
    --pf-v5-global--BackgroundColor--400: #36373a;
    --pf-v5-global--BorderColor--100: #444548;
    --pf-v5-global--BorderColor--200: #444548;
    --pf-v5-global--BorderColor--300: #57585a;
    --pf-v5-global--BorderColor--400: #aaabac;
    --pf-v5-global--Color--100: #e0e0e0;
    --pf-v5-global--Color--200: #aaabac;
    /* Use secondary colors for primary in dark theme */
    --pf-v5-global--primary-color--100: var(--pf-v5-global--secondary-color--100);
    --pf-v5-global--primary-color--200: var(--pf-v5-global--secondary-color--200);
    --pf-v5-global--primary-color--300: var(--pf-v5-global--secondary-color--300);
    --pf-v5-global--active-color--100: var(--pf-v5-global--secondary-color--200);
    --pf-v5-global--active-color--200: var(--pf-v5-global--secondary-color--200);
    --pf-v5-global--active-color--300: var(--pf-v5-global--secondary-color--200);
    --pf-v5-global--active-color--400: var(--pf-v5-global--secondary-color--300);
    --pf-v5-global--link--Color: var(--pf-v5-global--secondary-color--200);
    --pf-v5-global--link--Color--visited: var(--pf-v5-global--secondary-color--100);
    --pf-v5-global--link--Color--light: var(--pf-v5-global--secondary-color--200);
    --pf-v5-global--link--Color--dark: var(--pf-v5-global--secondary-color--200);

    --pf-v5-global--disabled-color--100: #868789;
    --pf-v5-global--disabled-color--200: #444548;
    --pf-v5-global--disabled-color--300: #aaabac;
    --pf-v5-global--icon--Color--light: #aaabac;
    --pf-v5-global--icon--Color--dark: #e0e0e0;
    --pf-v5-global--Color--dark-100: #e0e0e0;
    --pf-v5-global--Color--dark-200: #aaabac;
    --pf-v5-global--Color--light-100: #e0e0e0;
    --pf-v5-global--Color--light-200: #aaabac;
    --pf-v5-global--Color--light-300: #3c3f42;
    --pf-v5-global--BorderColor--dark-100: #444548;
    --pf-v5-global--BorderColor--light-100: #444548;
    --pf-v5-global--primary-color--light-100: var(--pf-v5-global--secondary-color--200);
    --pf-v5-global--primary-color--dark-100: var(--pf-v5-global--secondary-color--300);
    --pf-v5-global--icon--Color--light--light: #aaabac;
    --pf-v5-global--icon--Color--dark--light: #e0e0e0;
    --pf-v5-global--icon--Color--light--dark: #aaabac;
    --pf-v5-global--icon--Color--dark--dark: #e0e0e0;
    --pf-v5-global--BackgroundColor--light-100: #1b1d21;
    --pf-v5-global--BackgroundColor--light-200: #0f1214;
    --pf-v5-global--BackgroundColor--light-300: #26292d;
    --pf-v5-global--BackgroundColor--dark-100: #1b1d21;
    --pf-v5-global--BackgroundColor--dark-200: #0f1214;
    --pf-v5-global--BackgroundColor--dark-300: #26292d;
    --pf-v5-global--BackgroundColor--dark-400: #36373a;
    --pf-v5-global--BoxShadow--sm: 0 .0625rem .125rem 0 #0303037a,0 0 .125rem 0 #0303033d;
    --pf-v5-global--BoxShadow--sm-top: 0 -.125rem .25rem -.0625rem #030303a3;
    --pf-v5-global--BoxShadow--sm-right: .125rem 0 .25rem -.0625rem #030303a3;
    --pf-v5-global--BoxShadow--sm-bottom: 0 .125rem .25rem -.0625rem #030303a3;
    --pf-v5-global--BoxShadow--sm-left: -.125rem 0 .25rem -.0625rem #030303a3;
    --pf-v5-global--BoxShadow--md: 0 .25rem .5rem 0rem #0303037a,0 0 .25rem 0 #0303033d;
    --pf-v5-global--BoxShadow--md-top: 0 -.5rem .5rem -.375rem #030303b8;
    --pf-v5-global--BoxShadow--md-right: .5rem 0 .5rem -.375rem #030303b8;
    --pf-v5-global--BoxShadow--md-bottom: 0 .5rem .5rem -.375rem #030303b8;
    --pf-v5-global--BoxShadow--md-left: -.5rem 0 .5rem -.375rem #030303b8;
    --pf-v5-global--BoxShadow--lg: 0 .5rem 1rem 0 #030303a3,0 0 .375rem 0 #03030352;
    --pf-v5-global--BoxShadow--lg-top: 0 -.75rem .75rem -.5rem #030303b8;
    --pf-v5-global--BoxShadow--lg-right: .75rem 0 .75rem -.5rem #030303b8;
    --pf-v5-global--BoxShadow--lg-bottom: 0 .75rem .75rem -.5rem #030303b8;
    --pf-v5-global--BoxShadow--lg-left: -.75rem 0 .75rem -.5rem #030303b8;
    --pf-v5-global--BoxShadow--xl: 0 1rem 2rem 0 #030303a3,0 0 .5rem 0 #03030366;
    --pf-v5-global--BoxShadow--xl-top: 0 -1rem 1rem -.5rem #030303cc;
    --pf-v5-global--BoxShadow--xl-right: 1rem 0 1rem -.5rem #030303cc;
    --pf-v5-global--BoxShadow--xl-bottom: 0 1rem 1rem -.5rem #030303cc;
    --pf-v5-global--BoxShadow--xl-left: -1rem 0 1rem -.5rem #030303cc;
    --pf-v5-global--BoxShadow--inset: inset 0 0 .625rem 0 #030303
}