/* BC Variables */
:root {
    /* 1. COLOURS */
    /* Primary */
    --primary-base: #2E183B;
    --primary-shade: #170C1D;
    --primary-tint: #49265E;
    --primary-wash: #E4D3ED;
    /* Neutrals */
    --neutral-1000: #050505;
    --neutral-800: #303634;
    --neutral-600: #606C68;
    --neutral-400: #C1C8C5;
    --neutral-200: #E9ECEB;
    --neutral-0: #fff;
    /* Brand Accents */
    --accent1-base: #8390FA;
    --accent1-tint: #CDD3FD;
    --accent2-base: #45C4A7;
    --accent2-tint: #A6E3D5;
    --accent3-base: #C84B90;
    --accent3-tint: #E6ADCC;
    /* Super Admin element */
    --superadmin: #c9d527;
    /* 1.4 RAG */
    --red: #EB5757;
    --amber: #F2C94C;
    --green: #64CE6B;
    /* 2. RADIUS */
    --radius-lg: 1.5rem;
    --radius-md: 1rem;
    --radius-sm: 0.5rem;
    --radius-roundel: 9999px;
    /* 3. SPACING */
    --space-4xs: 4px;
    --space-3xs: 8px;
    --space-2xs: 12px;
    --space-xs: 16px;
    --space-s: 20px;
    --space-m: 24px;
    --space-l: 32px;
    --space-xl: 40px;
    --space-2xl: 64px;
    --space-3xl: 72px;
    --space-4xl: 80px;
    --dashboard-bg: url('/img/beach.png');
}

/* FLEX Overrides */
body.flex {
    /* 1. COLOURS */
    /* Primary */
    --primary-base: #000000;
    --primary-shade: #000000;
    --primary-tint: #2E2E2E;
    --primary-wash: #CDD5ED;
    /* Neutrals */
    --neutral-1000: #000000;
    --neutral-800: #2E2E2E;
    --neutral-600: #666666;
    --neutral-400: #C8C8B7;
    --neutral-200: #E9E9E2;
    --neutral-0: #fff;
    /* Brand Accents */
    --accent1-base: #8296D1;
    --accent1-tint: #CDD5ED;
    --accent2-base: #FACA6C;
    --accent2-tint: #FDEAC4;
    --accent3-base: #EB5D44;
    --accent3-tint: #F7BEB4;
    /* 2. RADIUS */
    --radius-lg: 0;
    --radius-md: 0;
    --radius-sm: 0;
    --dashboard-bg: url('/img/freshgrass.jpg');
}

html, body {
    font-family: "Inter",sans-serif;
    margin: 0;
    padding: 0;
    border: none;
    font-size:16px;
    background-color:var(--neutral-400);
}

main {
    padding-top: 5rem;
    padding-left: 0rem;
    padding-right: 0rem;
    color: var(--neutral-0);
    padding-bottom: 1rem;
}

body.portfolio main {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 0;
}

.danger {
    background-color:var(--red);
}

.success {
    background-color: var(--green);
}

.inactive {
    background-color: var(--neutral-200);
}

.container {
    max-width: 2000px;
    padding: 0;
    padding-left: 5rem;
    padding-right: 5rem;
    width: auto;
}

.container-xxl {
    background-image: url('/img/portal-images-1294x400-man-on-beach.jpg?v=DP1Z7DBs9A6GXF-1U5u3dUopfdcx');
    background-size: cover;
    max-width: 100%;
    height: 300px;
    max-width: 2000px;
    background-position-y: -40px;
    padding: 0;
    position: relative;
    background-repeat: no-repeat;
    padding-top: 12rem 
}

.portfolio .container-xxl {
    background-image: var(--dashboard-bg);
    height: 360px;
    padding-top: 8rem;
    background-position-y: -130px;
}

/*.admin .container-xxl {
    background-image:none;
    padding-top:0;
}

.admin main {
    padding-top:0px;
}

.admin .heading.dark {
    padding-top:80px;
}
    */

a {
    text-decoration:none;
    color:var(--accent1-base);
}

sub {
    bottom:0;
}

.rad-tl { border-start-start-radius: var(--radius-md);}
.rad-tr { border-start-end-radius: var(--radius-md);}
.rad-bl { border-end-start-radius: var(--radius-md);}
.rad-br { border-end-end-radius: var(--radius-md);}

.radius-md {
    border-radius: var(--radius-md);
}
.b-r-lg { border-right:1px solid var(--neutral-400);}

.primary-base {
    background-color: var(--primary-base);
}
.primary-tint { background-color: var(--primary-tint); }
.primary-wash { background-color: var(--primary-wash); }

.neutral-1000 { background-color:var(--neutral-1000); }
.neutral-800 { background-color:var(--neutral-800); }
.neutral-600 { background-color:var(--neutral-600); }
.neutral-400 { background-color:var(--neutral-400); }
.neutral-200 { background-color:var(--neutral-200); }
.neutral-0 { background-color:var(--neutral-0); }

.accent1-base { background-color: var(--accent1-base); }
.accent1-tint { background-color: var(--accent1-tint); }
.accent2-base { background-color: var(--accent2-base); }
.accent2-tint { background-color: var(--accent2-tint); }
.accent3-base { background-color: var(--accent3-base); }
.accent3-tint { background-color: var(--accent3-tint); }

.rag-red { background-color:var(--red);}
.rag-amber { background-color:var(--amber);}
.rag-green { background-color:var(--green);}