/* 
   -----------------------
   General styling
   -----------------------
*/

@font-face {
    font-family: "Exo2";
    src: url("/fonts/Exo2-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
}

* {
    box-sizing: border-box;
    font-family: "Exo2" !important;
}

    *::before,
    *::after {
        box-sizing: border-box;
        clear: both;
    }

body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0 auto; /* Center the page horizontally*/
    padding: 0;
    background-color: inherit;
    overflow-x: clip;
}

ul,
li {
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
}

.sky-main {
    /*height: calc(100dvh - var(--navbarHeight));*/
    flex: 1 1 auto !important;
    display: flex;
    flex-direction: column;
    z-index: var(--baseZIndex);
    justify-content: flex-start;
    align-items: center;
    background-color: #f3f4f8;
}

    .sky-main > .sky-management-page,
    .sky-main > .sky-page,
    .sky-main > #sky-content-frame {
        /*height: 100%;*/
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        overflow-y: visible;
        margin: 0 auto;
        border: 0;
    }

.sky-management-page {
    max-width: var(--maxWidth);
    width: 100%;
}

/*
-----------------------
Flexbox Utilities
-----------------------
*/

.fb-row {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.sky-hide {
    display: none;
}

.sky-fbc {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sizeS);
}

.sky-fbcs {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--sizeS);
    /*  background-color: purple;*/
}

.sky-fbce {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: var(--sizeS);
    /*    background-color: orange;*/
}

.sky-fbr {
    display: flex;
    justify-content: center;
    gap: var(--sizeM);
}

/*Flexbox Top Center*/
.sky-fbtc {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

/* Flexbox Bottom Start */
.sky-fbbs {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: end;
    gap: var(--sizeS);
    /*  background-color: purple;*/
}

.sky-login-disabled {
    background-color: rgb(0,0,0, 0.9);
    z-index: 9999;
    width: 100%;
    height: 100vh;
    color: yellow;
    font-size: 4rem;
}

/*
-----------------------
Core Styling Variables (Overides are done in themes?)
-----------------------
*/
:root {
    /* Activily Used Items */
    /* Dimensions */
    --maxWidth: 100rem; /* 1600px */
    --mobileWidth: 56.25rem; /* 900px */
    --sizeS: 0.25rem; /* 4px */
    --sizeM: 0.5rem; /* 8px */
    --sizeM2: 0.625rem; /* 10px */
    --sizeM3: 0.75rem; /* 12px */
    --sizeM4: 0.875rem; /* 14px */
    --sizeL: 1rem; /* 16px */
    --sizeL2: 1.25rem; /* 20px */
    --sizeL3: 1.5rem; /* 24px */
    --sizeL4: 1.625rem; /* 26px */
    --sizeL5: 1.875rem; /* 30px */
    --sizeL6: 2.5rem; /* 40px */
    --sizeXL: 2rem; /* 32px */
    --sizeXL1: 3rem; /* 48px */
    --sizeXL2: 3.125rem; /* 50px */
    --sizeXL3: 3.5rem; /* 56px */
    --sizeXL4: 3.5rem; /* 56px */
    --sizeXXL: 5rem; /* 80px */
    --titleBarHeight: var(--sizeXL3);
    --titleBarIcon: var(--sizeXL1);
    --navLinkBlockWidth: 14rem;
    --taskLinkBlockWidth: 20rem;
    --pillMinWidth: 2rem;
    --profileImg: 2.75rem;
    --profileImgLg: 9rem;
    --navbarInteralHeight: var(--sizeXL2);
    --navbarTopBorder: var(--sizeS); /* 0.3125 */
    --navbarHeight: calc(var(--navbarInteralHeight) + var(--navbarTopBorder));
    /* Font Sizes */
    --fSizeXS: 0.875rem; /* 14PX */
    --fSizeS: 1rem; /* 16PX*/
    --fSizeS2: 1.125rem; /* 18PX*/
    --fSizeM: 1.25rem; /* 20PX*/
    --fSizeL: 1.5rem; /* 24PX*/
    --fSizeXXL: 2.5rem; /* 40PX*/
    /* Positions Z-Index */
    --baseZIndex: 100;
    --zIndexNavBar: 1000;
    --zIndexEditPanel: 1000;
    --zIndexMegaMenu: 1001;
    --zIndexSessionModal: 1002;
    /* Colours */
    --green: #547579;
    --greenDullOpt: rgba(0, 104, 72, 0.2);
    --greenDark: #3F4245;
    --white: rgb(255, 255, 255);
    --whiteOpt1: rgba(255, 255, 255, 0.95);
    --black: rgb(0,0,0);
    --blackOpt: rgba(43,43,43, 0.75);
    --greyDark0: rgb(225,225,225);
    --grey: rgb(247,247,247);
    --greyDark2: rgb(247,247,247);
    --greyDark: rgb(52, 52, 52);
    --grey3: rgb(128, 128, 128);
    --grey4: rgb(200, 200, 200);
    --greyLight: #E5E5E7;
    --greyDarkOpt: rgba(154, 156, 160, 0.8);
    --red: rgb(185, 40, 21);
    --redLight: rgba(131, 29, 16, 0.25);
    --redLightDisabled: rgba(131, 29, 16, 0.1);
    --blueLight: rgb(44, 133, 185);
    --blue: rgb(34, 99, 135);
    --blueDark: rgb(26, 79, 109);
    --yellow: rgb(255, 221, 72);
    /* Theme Items */
    --navbarColor: var(--white);
    --stdBackground: var(--whiteSoft);
    --stdBoxShadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    --navButtonTextSize: var(--fSizeS2);
    --navButtonTextWeight: 600;
    --tableBorder: 1px solid #EAECF0;
    --tableHeadBackgroundColor: #f9fafb;
    --tablePaddingX: 24px;
    --tablePaddingY: 12px;
    --tableBodyFontSize: 0.875rem;
    --tableBodyFontColor: #4D4D4D;
    --tableHeadFontSize: 0.75rem;
    --tableHeadFontColor: #667085;
    --tableFontWeight: 500;
    --tableCellPadding: var(--fSizeXS);
    --tableBaseFontSize: var(--fSizeXS);
    --tableRowBackgroundColor: #FFFFFF;
    --tableAlternateRowBackgroundColor: rgb(253,253,253);
}