/*

CONCEPTION -n
The conception of the website. Things that remain consistent throughout the system.

*/

/* #region TEMPLATE */
/* #endregion */

/* #region VARIABLES */

    :root {
        /* Transitions */
        --trb:  0.4s all ease;

        /* Shadows */
        --bsl: 0.8px 0.8px 2.2px rgba(0, 0, 0, 0.02), 2px 2px 5.3px rgba(0, 0, 0, 0.028), 3.8px 3.8px 10px rgba(0, 0, 0, 0.035), 6.7px 6.7px 17.9px rgba(0, 0, 0, 0.042), 12.5px 12.5px 33.4px rgba(0, 0, 0, 0.05), 30px 30px 80px rgba(0, 0, 0, 0.07);

        /* Font Size */
        --dfs: 1.063rem
    }

/* #endregion */


/* #region BODY CONFIGURATION */

    html {
        background-color: var(--cpr-145);
    }

    body {
        font-family: 'Poppins', sans-serif;
        font-size: var(--dfs);
        color: var(--ctx-100);
        padding-top: 75px;
    }

    body.gin--horizontal-toolbar {
        margin-top: 53px;
    }

    .gin--horizontal-toolbar .head-size {
        margin-top: 0px;
    }

    .gin-secondary-toolbar--frontend {
        position: fixed;
        top: 53px !important;
        width: 100%;
    }

    .gin--horizontal-toolbar #toolbar-administration {
        z-index: 99999 !important;
    }

    .gin-secondary-toolbar--frontend {
        z-index: 99998 !important;
    }

    .h-100 {
        height: auto !important;
        min-height: 93vh !important;
    }

    .region-sidebar-first, .region-sidebar-second, .region-footer, .region-content {
        padding: 0px;
    }

/* #endregion */


/* #region HEADINGS AND TEXT */

    h1 {
        font-size: 5rem;
        color: var(--cpr-100);
        font-weight: 900;
        margin: 20px 0px 40px 0px;
    }

    h2 {
        font-size: 3rem;
        color: var(--cpr-130);
        font-weight: 700;
        margin: 15px 0px 20px 0px;
    }

    h3 {
        font-size: 2.5rem;
        color: var(--cpr-145);
        font-weight: 700;
        margin: 15px 0px 15px 0px;
    }

    h4 {
        font-size: 2rem;
        color: var(--ctx-100);
        font-weight: 600;
        margin: 15px 0px 10px 0px;
    }

    h5 {
        font-size: 1.5rem;
        color: var(--ctx-100);
        font-weight: 700;
        margin: 15px 0px 10px 0px;
    }

    h6 {
        font-size: 1.3rem;
        color: var(--ctx-100);
        font-weight: 700;
        margin: 15px 0px 10px 0px;
    }

    p {
        margin: 10px 0px 25px 0px;
    }

    a {
        color: var(--cpr-100);
        text-decoration-color: transparent;
        transition: var(--trb);
    }

    a:is(:hover, :focus, :active) {
        color: var(--cpr-130);
        text-decoration-color: var(--cpr-130);
    }

/* #endregion */


/* #region 404 PAGE STYLING */

    .e404 {
        position: absolute;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        top: 0px;
        left: 0px;
        background-color: var(--csw-100);
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        gap: 65px;
    }

    .e404 .left {
        width: 28%;
        margin-left: 10%;
    }

    .e404 .left img {
        width: 100%;
    }

    .e404 .right {
        width: 48%;
        margin-right: 10%;
    }

    .e404 h1 {
        margin: 0px;
    }

    .e404 h2 {
        margin: 0px 0px 100px 0px;
    }

    .e404 h3 {
        font-size: 1.3rem;
    }

    .e404 .act-link a {
        display: inline-block;
        padding: 10px 35px;
        border-radius: 35px;
        background-color: var(--cpr-015);
        margin: 0px 5px 0px 5px;
        text-decoration: none;
        transition: var(--trb);
    }

    .e404 .act-link a:is(:hover, :focus, :active) {
        background-color: var(--cpr-130);
        color: var(--csw-100);
    }

/* #endregion */


/* #region CONTENT LAYOUT CUSTOMISATION STYLING */

    /* Container Backgrounds */
    .bc_primary {
        background-color: var(--cpr-100);
        color: var(--csw-100);
        overflow: hidden;
    }

    .bc_dark {
        background-color: var(--cpr-175);
        color: var(--csw-100);
        overflow: hidden;
    }

    .bc_light {
        background-color: var(--cpr-015);
        overflow: hidden;
    }

    .bc_alternative {
        background-color: var(--ch1-100);
        color: var(--csw-100);
        overflow: hidden;
    }

    .bc_white {
        overflow: hidden;
    }

    /* Container Widths */
    .cw_100 {
        width: 100%;
        padding: 0px 30px;
    }

    .cw_080 {
        width: 80%;
        margin: auto;
    }

    .cw_060 {
        width: 60%;
        margin: auto;
    }
    
    .cw_050 {
        width: 50%;
        margin: auto;
    }

    .cw_040 {
        width: 40%;
        margin: auto;
    }

    /* Header Heights */
    .hh_100 {
        height: 100vh;
    }

    .hh_085 {
        height: 85vh;
    }

    .hh_065 {
        height: 65vh;
    }

    .hh_045 {
        height: 45vh;
    }

    .hh_030 {
        height: 30vh;
    }

    /* Margin Top */
    .mt_115 {
        margin-top: 115px;
    }

    .mt_100 {
        margin-top: 100px;
    }

    .mt_085 {
        margin-top: 85px;
    }

    .mt_060 {
        margin-top: 60px;
    }

    .mt_045 {
        margin-top: 45px;
    }

    .mt_030 {
        margin-top: 30px;
    }

    .mt_015 {
        margin-top: 15px;
    }

    .mt_000 {
        margin-top: 0px;
    }

    /* Margin Bottom */
    .mb_115 {
        margin-bottom: 115px;
    }

    .mb_100 {
        margin-bottom: 100px;
    }

    .mb_085 {
        margin-bottom: 85px;
    }

    .mb_060 {
        margin-bottom: 60px;
    }

    .mb_045 {
        margin-bottom: 45px;
    }

    .mb_030 {
        margin-bottom: 30px;
    }

    .mb_015 {
        margin-bottom: 15px;
    }

    .mb_000 {
        margin-bottom: 0px;
    }

    /* Padding Top */
    .pt_115 {
        padding-top: 115px;
    }

    .pt_100 {
        padding-top: 100px;
    }

    .pt_085 {
        padding-top: 85px;
    }

    .pt_060 {
        padding-top: 60px;
    }

    .pt_045 {
        padding-top: 45px;
    }

    .pt_030 {
        padding-top: 30px;
    }

    .pt_015 {
        padding-top: 15px;
    }

    .pt_000 {
        padding-top: 0px;
    }

    /* Padding Bottom */
    .pb_115 {
        padding-bottom: 115px;
    }

    .pb_100 {
        padding-bottom: 100px;
    }

    .pb_085 {
        padding-bottom: 85px;
    }

    .pb_060 {
        padding-bottom: 60px;
    }

    .pb_045 {
        padding-bottom: 45px;
    }

    .pb_030 {
        padding-bottom: 30px;
    }

    .pb_015 {
        padding-bottom: 15px;
    }

    .pb_000 {
        padding-bottom: 0px;
    }

    /* 2 Column Layout */
    .tcl-wrap .content {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 60px;
    }

    .tcl-wrap .column1.colw_a,
    .tcl-wrap .column2.colw_e {
        width: 22%;
    }

    .tcl-wrap .column1.colw_b,
    .tcl-wrap .column2.colw_d {
        width: 37%;
    }

    .tcl-wrap .column1.colw_c,
    .tcl-wrap .column2.colw_c {
        width: 47%;
    }

    .tcl-wrap .column1.colw_e,
    .tcl-wrap .column2.colw_a {
        width: 72%;
    }

    .tcl-wrap .column1.colw_d,
    .tcl-wrap .column2.colw_b {
        width: 57%;
    }
    
/* #endregion */


/* #region MESSAGES STYLING */

    .messages__wrapper {
        width: 100%;
    }

    .bhh_100 .messages__wrapper {
        position: absolute;
        z-index: 10;
        top: 92vh;
    }

    .bhh_085 .messages__wrapper {
        position: absolute;
        z-index: 10;
        top: 80vh;
    }

    .bhh_065 .messages__wrapper {
        position: absolute;
        z-index: 10;
        top: 60vh;
    }

    .bhh_045 .messages__wrapper {
        position: static;
    }

    .bhh_030 .messages__wrapper {
        position: static;
    }

    .messages {
        padding: 0px;
        margin: 30px;
        border-radius: 30px;
        box-shadow: var(--bsl);
        background: unset;
        background-color: rgba(255, 255, 2555, 0.8);
        backdrop-filter: blur(8px);
        border: none;
        overflow: hidden;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: start;
    }

    .messages em {
        margin: 0px 5px;
    }

    .messages--status {
        color: var(--csg-100);
    }

    .messages--status a {
        color: var(--csg-150);
        text-decoration: underline;
        text-decoration-color: transparent;
        transition: var(--trb);
        margin: 0px 5px;
    }

    .messages--status a:is(:hover, :focus, :active) {
        text-decoration-color: var(--csg-150);
    }

    .messages--status::before {
        display: block;
        content: url('/sites/default/files/messages/check-mark.svg');
        width: 100px;
        height: 100px;
        background: linear-gradient(145deg, var(--csg-100), var(--csg-150));
        margin-right: 25px;
    }

    .messages--error {
        color: var(--csr-100);
    }

    .messages--error a {
        color: var(--csr-150);
        text-decoration: underline;
        text-decoration-color: transparent;
        transition: var(--trb);
        margin: 0px 5px;
    }

    .messages--error a:is(:hover, :focus, :active) {
        text-decoration-color: var(--csr-150);
    }

    .messages--error::before {
        display: block;
        content: url('/sites/default/files/messages/error.svg');
        width: 100px;
        height: 100px;
        background: linear-gradient(145deg, var(--csr-100), var(--csr-150));
        margin-right: 25px;
    }

    .messages--warning {
        color: var(--cso-100);
    }

    .messages--warning a {
        color: var(--cso-150);
        text-decoration: underline;
        text-decoration-color: transparent;
        transition: var(--trb);
        margin: 0px 5px;
    }

    .messages--warning a:is(:hover, :focus, :active) {
        text-decoration-color: var(--cso-150);
    }

    .messages--warning::before {
        display: block;
        content: url('/sites/default/files/messages/warning.svg');
        width: 100px;
        height: 100px;
        background: linear-gradient(145deg, var(--cso-100), var(--cso-150));
        margin-right: 25px;
    }

    .messages--info {
        color: var(--csb-100);
    }

    .messages--info a {
        color: var(--csb-150);
        text-decoration: underline;
        text-decoration-color: transparent;
        transition: var(--trb);
        margin: 0px 5px;
    }

    .messages--info a:is(:hover, :focus, :active) {
        text-decoration-color: var(--csb-150);
    }

    .messages--info::before {
        display: block;
        content: url('/sites/default/files/messages/info.svg');
        width: 100px;
        height: 100px;
        background: linear-gradient(145deg, var(--csb-100), var(--csb-150));
        margin-right: 25px;
    }

/* #endregion */