/* Defines standard colours used throughout the site. */
/* Modify the colours in this file to suite your site's palette. */

/* Accent */
/* ====== */

/* Accent colours are used for interactive components on a page. */
.accent-color { color: #234E4C; transition: color 0.3s; }
    .accent-color:hover { color: #269C66; }
    .accent-color:active { color: #C5E1D4; }
    .accent-color:focus { color: #C5E1D4; }
.accent-color-only { color: #234E4C; }
.accent-background { background-color: #234E4C; transition: background-color 0.3s; }
    .accent-background:hover { background-color: #269C66; }
    .accent-background:active { background-color: #C5E1D4; }
    .accent-background:focus { background-color: #C5E1D4; }
.accent-background-only { background-color: #234E4C; }
.accent-background-hover { background-color: #234E4C; }
.accent-border { border-color: #234E4C; transition: border-color 0.3s; }
    .accent-border:hover { border-color: #269C66; }
    .accent-border:active { border-color: #C5E1D4; }
    .accent-border:focus { border-color: #C5E1D4; }
.accent-border-top { border-top-color: #234E4C; }
.accent-border-bottom { border-bottom-color: #234E4C; }
.accent-border-left { border-left-color: #234E4C; }
.accent-border-right { border-right-color: #234E4C; }
.accent-border-only { border-color: #234E4C; }
.accent-fill { fill: #234E4C; transition: fill 0.3s; }
    .accent-fill:hover { fill: #269C66; }
    .accent-fill:active { fill: #C5E1D4; }
    .accent-fill:focus { fill: #C5E1D4; }

/* Accent input is used in special cases to highlight textboxes and dropdowns without distracting from user input. */
.accent-input { border-color: #F2F2F2; transition: border-color 0.3s; }
    .accent-input:hover { border-color: #C5E1D4; }
    .accent-input:active { border-color: #269C66; }
    .accent-input:focus { border-color: #269C66; }
.accent-input-only { border-color: #F2F2F2; transition: border-color 0.3s; }

/* The anchor tag is used for generic links. */
a { color: #00703C; font-weight: bolder; transition: color 0.3s; }
    a:hover { color: #269C66; }
    a:focus { color: #269C66; }
    a:active { color: #C5E1D4; }    

/* The invert set of colours are used when you want to invert the background and foreground during interaction events. */
.accent-invert-color { color: #234E4C; transition: color 0.3s; }
    .accent-invert-color:hover { color: #FFFFFF; }
    .accent-invert-color:active { color: #FFFFFF; }
    .accent-invert-color:focus { color: #FFFFFF; }
.accent-invert-background { background-color: transparent; transition: background-color 0.3s; }
    .accent-invert-background:hover { background-color: #234E4C; }
    .accent-invert-background:active { background-color: #234E4C; }
    .accent-invert-background:focus { background-color: #234E4C; }

/* This class is used for large interactive content */
.accent-background-pale { background-color: transparent; transition: background-color 0.3s; }
    .accent-background-pale:hover { background-color: #E9EDED; }
    .accent-background-pale:active { background-color: #D3DCDB; }
    .accent-background-pale:focus { background-color: #BDCAC9; }

/* Accent Tints */
/* ============ */
.accent-color-tint-1 { color: #e9eded; }
.accent-color-tint-2 { color: #d3dcdb; }
.accent-color-tint-3 { color: #bdcac9; }
.accent-color-tint-4 { color: #a7b8b7; }
.accent-color-tint-5 { color: #91a6a5; }
.accent-color-tint-6 { color: #7b9594; }
.accent-color-tint-7 { color: #658381; }
.accent-color-tint-8 { color: #4f7170; }
.accent-color-tint-9 { color: #395f5e; }
.accent-background-tint-1 { background-color: #e9eded; }
.accent-background-tint-2 { background-color: #d3dcdb; }
.accent-background-tint-3 { background-color: #bdcac9; }
.accent-background-tint-4 { background-color: #a7b8b7; }
.accent-background-tint-5 { background-color: #91a6a5; }
.accent-background-tint-6 { background-color: #7b9594; }
.accent-background-tint-7 { background-color: #658381; }
.accent-background-tint-8 { background-color: #4f7170; }
.accent-background-tint-9 { background-color: #395f5e; }
.accent-background-tint-darker { background-color: #1E4443; }
.accent-background-tint-darker-2 { background-color: #1A3B3A; }

/* Info */
/* ==== */
/* Info colours are used for informational messages. */
.info-color { color: #266592; }
.info-color-light { color: #C7DFF0; }
.info-background { background-color: #266592; }
.info-background-light { background-color: #C7DFF0; }
.info-border { border-color: #266592; }
.info-border-light { border-color: #C7DFF0; }
.info-fill { fill: #266592; }
.info-fill-light { fill: #C7DFF0; }


/* Warning */
/* ======= */

/* Warning colours are used for warning messages. */
.warning-color { color: #FBCC34; }
.warning-color-light { color: #FFF4D0; }
.warning-background { background-color: #FBCC34; }
.warning-background-light { background-color: #FFF4D0; }
.warning-border { border-color: #FBCC34; }
.warning-border-light { border-color: #FFF4D0; }
.warning-fill { fill: #FBCC34; }
.warning-fill-light { fill: #FFF4D0; }


/* Danger */
/* ====== */

/* Danger colours are used for error messages. */
.danger-color { color: #A11D21; }
.danger-color-light { color: #FFE0E0; }
.danger-background { background-color: #A11D21; }
.danger-background-light { background-color: #FFE0E0; }
.danger-border { border-color: #A11D21; }
.danger-border-light { border-color: #FFE0E0; }
.danger-fill { fill: #A11D21; }
.danger-fill-light { fill: #FFE0E0; }

/* Status */
/* ====== */

/* Statuses draw text in the specified colour and surround it with a border.  They can be used to represent different meanings and types. */
.accent-status { color: #234E4C; border: solid 0.5mm #234E4C; text-align: center; }
.accent-status-invert { color: white; background-color: #234E4C; border: solid 0.5mm #234E4C; text-align: center; }
.info-status { color: #266592; border: solid 0.5mm #266592; text-align: center; }
.info-status-invert { color: white; background-color: #266592; border: solid 0.5mm #266592; text-align: center; }
.warning-status { color: #FBCC34; border: solid 0.5mm #FBCC34; text-align: center; }
.warning-status-invert { color: white; background-color: #FBCC34; border: solid 0.5mm #FBCC34; text-align: center; }
.danger-status { color: #A11D21; border: solid 0.5mm #A11D21; text-align: center; }
.danger-status-invert { color: white; background-color: #A11D21; border: solid 0.5mm #A11D21; text-align: center; }
.green-status { color: #00703C; border: solid 0.5mm #00703C; text-align: center; }
.green-status-invert { color: white; background-color: #00703C; border: solid 0.5mm #00703C; text-align: center; }


/* White */
/* ===== */

/* Whites are used for whitespace which is great for framing and readability. */
/* These colours are defined in increments of decreasing saturation up to -20 points. */
.white-color { color: #FFFFFF; }
.white-color-5 { color: #FAFAFA; }
.white-color-10 { color: #F6F6F6; }
.white-color-15 { color: #F2F2F2; }
.white-color-20 { color: #EEEEEE; }
.white-background { background-color: #FFFFFF; }
.white-background-5 { background-color: #FAFAFA; }
.white-background-10 { background-color: #F6F6F6; }
.white-background-15 { background-color: #F2F2F2; }
.white-background-20 { background-color: #EEEEEE; }
.white-border { border-color: #FFFFFF; }
.white-border-5 { border-color: #FAFAFA; }
.white-border-10 { border-color: #F6F6F6; }
.white-border-15 { border-color: #F2F2F2; }
.white-border-20 { border-color: #EEEEEE; }
.white-fill { fill: #FFFFFF; }
.white-fill-5 { fill: #FAFAFA; }
.white-fill-10 { fill: #F6F6F6; }
.white-fill-15 { fill: #F2F2F2; }
.white-fill-20 { fill: #EEEEEE; }


/* Black */
/* ===== */

/* Black are used for text which is great for readability. */
/* These colours are defined in increments of increasing saturation up to -20 points. */
.black-color { color: #000000; }
.black-color-5 { color: #050505; }
.black-color-10 { color: #0A0A0A; }
.black-color-15 { color: #0E0E0E; }
.black-color-20 { color: #111111; }
.black-background { background-color: #000000; }
.black-background-5 { background-color: #050505; }
.black-background-10 { background-color: #0A0A0A; }
.black-background-15 { background-color: #0E0E0E; }
.black-background-20 { background-color: #111111; }
.black-border { border-color: #000000; }
.black-border-5 { border-color: #050505; }
.black-border-10 { border-color: #0A0A0A; }
.black-border-15 { border-color: #0E0E0E; }
.black-border-20 { border-color: #111111; }
.black-fill { fill: #000000; }
.black-fill-5 { fill: #050505 }
.black-fill-10 { fill: #0A0A0A; }
.black-fill-15 { fill: #0E0E0E; }
.black-fill-20 { fill: #111111; }


/* Grey */
/* ===== */

/* Greys are used for backgrounds that help to further offset black or white.  They can make a great tertiary accent. */
/* These colours are defined by their number which repeats. */
.grey-color-2 { color: #222222; }
.grey-color-3 { color: #333333; }
.grey-color-4 { color: #444444; }
.grey-color-5 { color: #555555; }
.grey-color-6 { color: #666666; }
.grey-color-7 { color: #777777; }
.grey-color-8 { color: #888888; }
.grey-color-9 { color: #999999; }
.grey-color-A { color: #AAAAAA; }
.grey-color-B { color: #BBBBBB; }
.grey-color-C { color: #CCCCCC; }
.grey-color-D { color: #DDDDDD; }
.grey-background-2 { background-color: #222222; }
.grey-background-3 { background-color: #333333; }
.grey-background-4 { background-color: #444444; }
.grey-background-5 { background-color: #555555; }
.grey-background-6 { background-color: #666666; }
.grey-background-7 { background-color: #777777; }
.grey-background-8 { background-color: #888888; }
.grey-background-9 { background-color: #999999; }
.grey-background-A { background-color: #AAAAAA; }
.grey-background-B { background-color: #BBBBBB; }
.grey-background-C { background-color: #CCCCCC; }
.grey-background-D { background-color: #DDDDDD; }
.grey-border-2 { border-color: #222222; }
.grey-border-3 { border-color: #333333; }
.grey-border-4 { border-color: #444444; }
.grey-border-5 { border-color: #555555; }
.grey-border-6 { border-color: #666666; }
.grey-border-7 { border-color: #777777; }
.grey-border-8 { border-color: #888888; }
.grey-border-9 { border-color: #999999; }
.grey-border-A { border-color: #AAAAAA; }
.grey-border-B { border-color: #BBBBBB; }
.grey-border-C { border-color: #CCCCCC; }
.grey-border-D { border-color: #DDDDDD; }
.grey-fill-2 { fill: #222222 }
.grey-fill-3 { fill: #333333; }
.grey-fill-4 { fill: #444444; }
.grey-fill-5 { fill: #555555; }
.grey-fill-6 { fill: #666666; }
.grey-fill-7 { fill: #777777; }
.grey-fill-8 { fill: #888888; }
.grey-fill-9 { fill: #999999; }
.grey-fill-A { fill: #AAAAAA; }
.grey-fill-B { fill: #BBBBBB; }
.grey-fill-C { fill: #CCCCCC; }
.grey-fill-D { fill: #DDDDDD; }

.process-block-leadership { grid-template-columns: repeat(13, 1fr) !important; }
.process-block-join { grid-template-columns: repeat(9, 1fr) !important; }