/*

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: 'Montserrat', 'Poppins', sans-serif;
        font-size: var(--dfs);
        color: var(--ctx-100);
        padding-top: 115px;
        line-height: 1.2;
    }

    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 BUTTONS */

    .btn-primary {
        padding: 20px 50px;
        border-radius: 40px;
        color: var(--csw-100);
        text-decoration: none;
        background-color: var(--cpr-100);
        transition: var(--trb);
        border: none;
        margin-top: 25px;
    }

    .cq-btn a {
        display: inline-block;
        padding: 20px 50px;
        border-radius: 40px;
        color: var(--csw-100);
        text-decoration: none;
        margin: 25px 0px;
    }

    .cq-btn.center {
        text-align: center;
    }

    .cq-btn.light a {
        background-color: var(--cpr-100);
        transition: var(--trb);
    }

    .cq-btn.dark a {
        background-color: var(--ctx-100);
        transition: var(--trb);
    }

    .cq-btn a:is(:hover, :focus, :active),
    .btn-primary:is(:hover, :focus, :active) {
        background-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(--ca1-100);
        color: var(--csw-100);
        overflow: hidden;
    }

    .bc_white {
        overflow: hidden;
    }

    .bc_primary h1, .bc_primary h2, .bc_primary h3, .bc_primary h4, .bc_primary h5,
    .bc_dark h1, .bc_dark h2, .bc_dark h3, .bc_dark h4, .bc_dark h5 {
        color: var(--csw-100);
    }

    /* 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;
    }

    .hb-gradient.hh_045 {
        height: 75vh;
    }

    .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 */

    .alert {
        position: fixed;
        max-width: calc(100% - 60px);
        min-width: 40%;
        top: 6vh;
        right: 30px;
        z-index: 9998;
        padding: 0px;
        margin: 30px;
        border-radius: 30px;
        box-shadow: var(--bsl);
        background: unset;
        background-color: rgba(255, 255, 255, 0.7);
        backdrop-filter: saturate(150%) blur(10px);
        border: none;
        overflow: hidden;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: start;
        gap: 25px;
        transition: var(--trb);
        color: var(--ctx-100);
    }

    .scrolled .alert {
        top: 4vh;
    }

    .gin--horizontal-toolbar .alert {
        top: 17vh;
    }

    .gin--horizontal-toolbar.scrolled .alert {
        top: 15vh;
    }

    .alert .alert-icn {
        width: 100px;
        height: 100px;
    }

    .alert .alert-icn img {
        width: 100px;
        height: 100px;
    }

    .alert-success .alert-icn {
        background: linear-gradient(145deg, var(--csg-100), var(--csg-150));
    }

    .alert-danger .alert-icn {
        background: linear-gradient(145deg, var(--csr-100), var(--csr-150));
    }

    .alert-warning .alert-icn {
        background: linear-gradient(145deg, var(--cso-100), var(--cso-150));
    }

    .alert-info .alert-icn {
        background: linear-gradient(145deg, var(--csb-100), var(--csb-150));
    }

    .alert-cnt {
        width: 100%;
    }

    .aw-tit {
        font-size: 1.4rem;
        font-weight: 700;
    }

    .alert-success .aw-tit {
        color: var(--csg-100);
    }

    .alert-danger .aw-tit {
        color: var(--csr-100);
    }

    .alert-warning .aw-tit {
        color: var(--cso-100);
    }

    .alert-info .aw-tit {
        color: var(--csb-100);
    }

    .aw-message {
        font-size: 0.9rem;
    }

    .alert-dismissible .btn-close, .alert-dismissible .ui-dialog .ui-dialog-titlebar-close, .ui-dialog .alert-dismissible .ui-dialog-titlebar-close {
        position: static;
    }

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

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

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

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

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

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

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

    .alert-info a:is(:hover, :focus, :active) {
        text-decoration-color: var(--csb-150);
    }
/* #endregion */


/* #region COOKIES */

    .cookiesjsr-banner {
        right: 25px;
        bottom: 25px;
        max-width: calc(100vw - 2rem);
        max-height: calc(100vh - 2rem);
        box-shadow: var(--bsl);
        padding: 25px;
        border-radius: 30px;
        background-color: var(--cpr-015);
        color: var(--ctx-100);
        transition: var(--trb);
        font-size: 0.8rem;
    }

    .cookiesjsr-banner button.cookiesjsr-settings, .cookiesjsr-banner button.denyAll, .cookiesjsr-banner button.allowAll {
        font-weight: 700;
        padding: 15px 25px;
    }

    .cookiesjsr-banner--action {
        justify-content: start;
    }

    .cookiesjsr-banner button.denyAll, .cookiesjsr-banner button.allowAll {
        order: 2;
    }

    .cookiesjsr-banner button.allowAll {
        order: 1;
    }

    .cookiesjsr-btn.important {
        color: var(--csw-100);
        border: none;
        background-color: var(--cpr-100);
        border-radius: 15px;
    }

    .cookiesjsr-links {
        justify-content: start;
        color: var(--ctx-100);
        width: 100%;
    }

    .cookiesjsr-banner a {
        color: var(--ctx-100);
        text-decoration: underline;
    }

    .cookiesjsr-links.links--row li:before {
        background-color: var(--ctx-100);
        border-radius: 50%;
    }
/* #endregion */


/* #region AUTHENTICATION BLOCK */

    .apb-wrap {
        position: absolute;
        left: 0px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: start;
    }

    .apb-cnt {
        position: absolute;
        width: 40%;
        margin-left: 100px;
    }

    .apb-bgi img {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        object-position: center;
        background-size: cover;
        background-position: center;
    }

    .apbc-logo img {
        height: 100px;
    }

    .apbc-body {
        margin-top: 40px;
        color: var(--csw-100);
    }

    .apbc-body h1, .apbc-body h2, .apbc-body h3, .apbc-body h4, .apbc-body h5 {
        color: var(--csw-100);
    }

    .user-auth.h-100,
    .path-tfa.h-100 {
        min-height: unset !important;
        height: unset !important;
        padding-top: 0px;
    }

    .user-login-form,
    .tfa-entry-form,
    .user-pass {
        position: absolute;
        background-color: rgba(255, 255, 2555, 0.2);
        backdrop-filter: saturate(150%) blur(10px);
        padding: 50px;
        border-radius: 40px;
        margin-right: 100px;
        border: 1px solid rgba(255, 255, 2555, 0.4);
        box-shadow: var(--bsl);
        color: var(--csw-100);
        font-weight: 300;
        font-size: 0.9rem;
        width: 500px;
    }

    .user-login-form .form-control,
    .tfa-entry-form .form-control,
    .user-pass .form-control {
        padding: 15px;
        border-radius: 15px;
        border: none;
        font-size: 0.9;
        font-weight: 300;
        color: var(--ctx-100);
    }

    .user-login-form .form-control::placeholder,
    .tfa-entry-form .form-control::placeholder,
    .user-pass .form-control::placeholder {
        color: var(--ctx-045);
        font-weight: 300;
    }

    .user-login-form .btn-primary,
    .tfa-entry-form .btn-primary,
    .user-pass .btn-primary {
        width: 100%;
        background-color: var(--cpr-100);
        text-align: center;
        border: none;
        border-radius: 15px;
        padding: 15px;
        transition: var(--trb);
    }

    .user-login-form .btn-primary:is(:hover, :focus, :active),
    .tfa-entry-form .btn-primary:is(:hover, :focus, :active),
    .user-pass .btn-primary:is(:hover, :focus, :active) {
        background-color: var(--cpr-145);
    }

    .user-auth #block-cirqular5-content,
    .path-tfa #block-cirqular5-content {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: end;
        height: 100vh;
    }

    .forgot-password-link {
        text-align: right;
    }

    .forgot-password-link a {
        color: var(--csw-100);
        text-decoration-color: var(--csw-100);
        font-weight: 300;
        font-size: 0.8rem;
    }
/* #endregion */


/* #region CKEDITOR */

    .todo-list__label {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        position: relative;
        cursor: not-allowed;
    }

    .todo-list__label input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        margin: 0;
    }

    .todo-list__label::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 1rem;
        flex-shrink: 0;
        background-color: var(--csw-100);
        border: 2px solid var(--cpr-100);
        border-radius: 4px;
        transition: var(--trb);
    }

    .todo-list__label:has(input[type="checkbox"]:checked)::before {
        background-color: var(--csg-100);
        border-color: var(--csg-100);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
    }

    .todo-list input[type="checkbox"]:checked + .todo-list__label__description {
        text-decoration: line-through;
        color: var(--ctx-045);
    }

    .todo-list__label__description {
        width: calc(100% - 70px);
    }
/* #endregion */


/* #region MODALS */

    .ui-widget-overlay.ui-front {
        background: black;
    }

    .ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front {
        z-index: 9;
        border-radius: 30px;
        overflow: hidden;
        background-color: var(--csw-100);
        top: 150px !important;
    }

    .ui-front.ui-dialog-content.ui-widget-content {
        max-height: 80vh !important;
    }

    .ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix h1 {
        display: none;
    }

    .ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close {
        z-index: 999 !important;
        top: 40px !important;
        right: 20px !important;
        background: var(--csr-100) !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
    }

    .ui-button-icon.ui-icon.ui-icon-closethick {
        width: 20px !important;
        z-index: 20 !important;
        background: var(--csw-100) !important;
        top: 18px !important;
        left: 18px !important;
    }

    .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover {
        border-color: var(--csr-150) !important;
    }

    .ui-widget-content a {
        color: var(--cpr-100) !important;
        text-decoration-color: transparent !important;
        transition: var(--trb) !important;
    }

    .ui-widget-content a:is(:hover, :focus, :active) {
        color: var(--cpr-130) !important;
        text-decoration-color: var(--cpr-130) !important;
    }

    .ui-widget {
        font-family: 'Montserrat', 'Poppins', sans-serif !important;
    }

/* #endregion */