@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

@import url('../fonts/lineicons/bulk-icon-font/lineicons-bulk.css');
@import url('../fonts/lineicons/duotone-icon-font/lineicons-duotone.css');
@import url('../fonts/lineicons/regular-icon-font/lineicons.css');
@import url('../fonts/lineicons/solid-icon-font/lineicons-solid.css');
@import "colours.css";

/*==============================================================================
  P E M C O   A C A D E M Y
==============================================================================*/

:root {
    --lg-ink: #241d3c;
    --lg-mut: #6a6385;
    --lg-line: #e9e6f2;
    --lg-card: #ffffff;
    --lg-accent: #6942E2;
    --lg-accent2: #8d6bff;
    --lg-mint: #59d9b3;
    --lg-redbg: #fde7ea;
    --lg-red: #c0314a;
    --pp-bg: #f4f3fb;
    --pp-card: #ffffff;
    --pp-ink: #241d3c;
    --pp-mut: #6a6385;
    --pp-line: #e9e6f2;
    --pp-accent: #6942E2;
    --pp-accent2: #8d6bff;
    --pp-soft: #efe9ff;
    --pp-green: #1f8a55;
    --pp-greenbg: #e3f6ec;
    --pp-amber: #946d0d;
    --pp-amberbg: #fcf2dc;
    --pp-blue: #1f6fb6;
    --pp-bluebg: #e2effc;
    --pp-red: #c0314a;
    --pp-redbg: #fde7ea;
    --pp-purple: #5b34c9;
    --pp-purplebg: #ede8fb;
    --pp-shadow: 0 2px 16px #2b1c5514;
}

/* ─── Custom Scrollbar ────────────────────────────────────────────────────── */

.sidebar::-webkit-scrollbar {
    width: 20px;
    margin: 150px 0 60px;
}

.sidebar::-webkit-scrollbar-track {
    background-color: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: var(--neutral--200);
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

    .sidebar::-webkit-scrollbar-thumb:hover {
        background-color: var(--neutral--300);
    }

.admin .sidebar::-webkit-scrollbar {
    width: 20px;
    margin: 150px 0 60px;
}

.admin .sidebar::-webkit-scrollbar-track {
    background-color: transparent;
}

.admin .sidebar::-webkit-scrollbar-thumb {
    background-color: #cfd1d9;
    border-radius: 20px;
    border: 8px solid transparent;
    background-clip: content-box;
}

    .admin .sidebar::-webkit-scrollbar-thumb:hover {
        background-color: #aaa;
    }


/* ─── Autofill ────────────────────────────────────────────────────────────── */

&:-webkit-autofill::first-line,
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
    font-family: 'DM Sans', sofia-pro, sans-serif;
    font-weight: 500;
    font-style: normal;
}

/*input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    font-size: 1rem;
}*/


/* ─── Login ───────────────────────────────────────────────────────────────── */

#offcanvasLogin.offcanvas-lg.offcanvas-bottom {
    height: max-content;
    margin: 1rem;
    border-radius: 8px;
    width: calc(100% - 2rem);
}

.login-outer-container {
    display: flex;
    flex-direction: column;
    background-color: var(--color-indigo-700);
    height: 100vh;
}

.login-left {
    display: flex;
    flex-direction: column;
    background: var(--color-indigo-700);
    padding: 0;
}

    .login-left .login-left-inner {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 1.5rem 1.5rem 0;
    }

        .login-left .login-left-inner .top-container .logo {
            width: 180px;
            margin-bottom: 3rem;
        }

        .login-left .login-left-inner .top-container h1 {
            color: #fff;
            margin-bottom: 0.25rem;
        }

        .login-left .login-left-inner .top-container h2 {
            font-size: 1rem;
            color: #fff;
        }

        .login-left .login-left-inner .login-image {
            padding: 1rem 3rem;
        }

.login-right {
    display: flex;
    background: var(--color-indigo-700);
    padding: 0;
}

    .login-right .login-right-inner {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 1.5rem 1.5rem 0;
    }

    .login-right .card.login-card {
        border: none;
    }

    .login-right .login-right-inner .logo {
        display: none;
    }

.login-card .input-group-text {
    background: #fff;
    border-right-color: #fff;
    color: var(--neutral--400);
}

    .login-card .input-group-text i {
        line-height: 0;
        font-size: 1.25rem;
    }

/*.login-card .form-control {
        border-left-color: #fff;
    }*/

.login-outer-container.register .login-right .login-card .form-control {
    border-left-color: #dee2e6;
}

.register-box p {
    color: #fff;
}

.register-box .link-text-register {
    color: #fff;
}

.buttons-container {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}

/*.login-page .btn.btn-primary.btn-login {
        background: var(--color-indigo-700);
        color: #fff;
        width: 100%;
    }*/

.login-page .btn.btn-secondary.btn-register {
    background: var(--neutral--300);
    width: 100%;
}

.login-page .btn.btn-primary {
    width: 100%;
}

.login-page .modal-header .close {
    width: 7.5%;
    background-color: var(--color-indigo-700);
    opacity: 1;
}

.login-page .form-control {
    padding: 0.5rem 0.75rem;
}

.login-page .form-group,
.login-page .form-label {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.login-outer-container.register {
    background: var(--neutral--500);
}

    .login-outer-container.register .login-left {
        background: var(--success--500);
    }

    .login-outer-container.register .login-right {
        background: var(--success--200);
        min-height: 100%;
        height: unset;
    }
/* iPhone 16 */
@media (min-width: 390px) {
    .login-left .login-left-inner .login-image {
        padding: 2rem 1.5rem 1rem;
        display: flex;
    }
}

@media (min-width: 768px) {
    .login-left .login-left-inner {
        padding: 3rem 20% 1rem;
    }

        .login-left .login-left-inner .top-container .logo {
            width: 240px;
            margin-bottom: 5rem;
        }

    .login-right .login-right-inner {
        padding: 1rem 20% 3rem;
    }
}

@media (min-width: 992px) {
    .login-outer-container {
        flex-direction: row;
    }

    .login-left {
        width: 50%;
    }

        .login-left .login-left-inner {
            padding: 3rem;
            height: 100%;
        }

            .login-left .login-left-inner .top-container .logo {
                display: none;
            }

            .login-left .login-left-inner .login-image {
                padding: 0 4rem 4rem;
            }

            .login-left .login-left-inner .top-container h1 {
                font-size: 2.5rem;
                margin-bottom: 1rem;
            }

            .login-left .login-left-inner .top-container h2 {
                font-size: 1.25rem;
            }

            .login-left .login-left-inner .bottom-container {
                max-width: 720px;
            }

    .login-right {
        background-color: var(--primary--50);
        width: 50%;
    }

        .login-right .login-right-inner {
            padding: 2rem 3rem;
            height: 100%;
            justify-content: center;
        }

        .login-right .card .login-card {
            padding: 1.5rem;
            max-width: 400px;
        }

            .login-right .card.login-card h1 {
                font-size: 1.25rem;
                margin-bottom: 1.5rem;
            }

        .login-right .login-right-inner .logo {
            max-width: 180px;
            display: flex;
            margin: 0 auto 3rem;
        }

    .register-box p {
        color: #000;
    }

    .register-box .link-text-register {
        color: var(--color-indigo-700);
    }

    .form-container {
        max-width: 400px;
        display: flex;
        flex-direction: column;
        margin: auto;
    }

        .form-container .register-box {
            width: 75%;
        }

    .login-outer-container.register .login-left {
        position: fixed;
        height: 100%;
        width: 50%;
    }

    .login-outer-container.register .login-right {
        margin-left: 50%;
        width: 50%;
    }

        .login-outer-container.register .login-right .login-right-inner {
            min-height: unset;
            height: unset;
            justify-content: center;
            background: var(--success--200);

            .modal-body {
                color: #000;
            }
        }

    .login-outer-container.register .card.login-card {
        width: 100%;
        margin: 0;
    }
}

@media (min-width: 1200px) {
    .login-left {
        width: 55%;
    }

    .login-right {
        background-color: var(--primary--50);
        width: 45%;
    }
}

@media (min-width: 1400px) {
    .login-left {
        width: 60%;
    }

    .login-right {
        background-color: var(--primary--50);
        width: 40%;
    }
}

@media (min-width: 1800px) {
    .login-left {
        width: 65%;
    }

    .login-right {
        background-color: var(--primary--50);
        width: 35%;
    }
}
/*==============================================================================
  S T R U C T U R E
==============================================================================*/

.pa-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #eaebee;
    height: 100vh;
    background-color: #ffffff !important;
    width: 100% !important;
}

.pa-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    background-color: #f7f7f7 !important;
    margin-top: 60px;
}

    .pa-content .pa-content-inner {
        padding: 1rem 0 0 0;
    }

    .pa-content.admin {
        background-color: #fff !important;
        margin-top: 70px;
    }

        .pa-content.admin .pa-content-inner {
            padding: 0;
        }

        .pa-content.admin .content-area {
            position: relative;
        }
/* ─── Main Header ─────────────────────────────────────────────────────────── */

header.main-header {
    height: 60px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(1px);
    width: 100%;
    position: fixed;
    margin: 0;
    padding: unset;
    left: 0;
    right: 0;
    z-index: 99;
    border-bottom: 1px solid #fff;
}

    header.main-header .main-header-brand {
        display: flex;
        justify-content: start;
        margin-left: 1rem;
    }

        header.main-header .main-header-brand .navbar-brand {
            padding: 0;
            margin-right: 0;
            line-height: 1;
        }

            header.main-header .main-header-brand .navbar-brand img {
                height: 27px;
            }

    header.main-header .main-header-title {
        display: none;
    }

        header.main-header .main-header-title .course-title {
            margin: 0;
        }

    header.main-header .main-header-navigation {
        display: flex;
        justify-content: end;
        margin-right: 0.5rem;
    }

    header.main-header .main-header-navigation-menu {
        display: flex;
        align-items: center;
    }

        header.main-header .main-header-navigation-menu a {
            padding: 0 0.65rem;
            display: flex;
            align-items: center;
            color: #000;
        }

            header.main-header .main-header-navigation-menu a i {
                font-size: 1.4rem;
                line-height: 1;
                color: #000;
            }

            header.main-header .main-header-navigation-menu a.menu i {
                font-size: 1.75rem;
            }

    header.main-header.admin {
        border-bottom: 1px solid #eaebee;
    }
/* ─── Admin Sub-Header ────────────────────────────────────────────────────── */

header.admin-sub-header {
    margin-bottom: 1rem;
    overflow-x: auto;
    white-space: nowrap;
}

    header.admin-sub-header ul {
        list-style: none;
        display: flex;
        border-bottom: #eaebee solid 1px;
        padding: 0.25rem 1rem 0 0;
        margin: 0;
    }

        header.admin-sub-header ul li {
            display: flex;
            margin: 0 0.25rem;
            font-family: 'DM Mono', Courier, monospace;
            color: #8e949b;
            line-height: 1;
        }

            header.admin-sub-header ul li a {
                padding: 0.75rem 0.5rem 1rem;
                font-size: 0.75rem;
                color: #8e949b;
                text-wrap: nowrap;
            }

                header.admin-sub-header ul li a.active {
                    color: var(--d-purple);
                    font-weight: 700;
                }

            header.admin-sub-header ul li i {
                display: none;
            }
/* ─── Sidebar ─────────────────────────────────────────────────────────────── */

.pa-sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.pa-sidebar .nav-link {
    font-weight: 500;
    color: #737373;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: 0.1s ease-in;
    gap: 0.75rem;
}

    .pa-sidebar .nav-link i {
        font-size: 1.25rem;
        line-height: 0;
    }

    .pa-sidebar .nav-link.active {
        color: var(--color-indigo-700);
    }

.pa-sidebar .nav li.nav-item:hover {
    border-radius: 0.375rem;
    background: rgba(0,0,0,0.05);
}

.pa-sidebar .nav-link.dropdown-toggle {
    border: 1px solid rgba(0,0,0,0.10);
    width: 100%;
    background: #f8f9fa;
    padding: 1rem 0.75rem;
    justify-content: space-between;
}

.pa-sidebar .sub-menu {
    margin-bottom: 0.5rem;
}

.pa-sidebar .nav-link.sub-link {
    padding-left: 2.75rem !important;
    font-size: 0.875rem;
    font-weight: 400;
    color: #8a8a8a;
}

    .pa-sidebar .nav-link.sub-link:hover {
        color: var(--color-indigo-700);
        background-color: rgba(0,0,0,0.04);
        padding-left: 3.25rem !important;
        transition: all 0.2s ease-in-out;
    }

    .pa-sidebar .nav-link.sub-link.active {
        padding-left: 2.75rem !important;
        color: var(--color-indigo-700);
        font-weight: 600;
        font-size: 0.875rem;
    }

.pa-sidebar .sub-menu .nav-link {
    padding-left: 2.75rem !important;
    font-size: 0.875rem;
    opacity: 0.8;
    transition: all 0.2s ease;
}

.offcanvas-lg .offcanvas-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.offcanvas-lg .navbar-brand img {
    height: 27px;
}
/* ─── Structure: Breakpoints ──────────────────────────────────────────────── */

@media (min-width: 768px) {
    header.main-header {
        height: 70px;
    }

    header.admin-sub-header {
        overflow: unset;
        margin-bottom: 0;
    }

        header.admin-sub-header ul {
            padding: 0.5rem 1rem 0;
            padding-left: 0;
            margin: 0;
            border-bottom: #eaebee solid 1px;
        }

            header.admin-sub-header ul li a.active {
                border-bottom: solid 3px var(--d-purple);
                font-weight: 400;
            }

    .submenu {
        padding-left: 2rem;
    }

    .pa-sidebar {
        width: 15rem !important;
    }

        .pa-sidebar .nav-link {
            font-size: 0.875rem;
            padding: 0.5rem 0.5rem;
            font-weight: 400;
        }

            .pa-sidebar .nav-link i {
                font-size: 1.5rem;
            }

    .pa-content {
        margin-top: 70px;
    }

        .pa-content.admin {
            margin-top: 90px;
        }
}

@media (min-width: 992px) {
    header.admin-sub-header {
        margin-bottom: 0;
    }

    .pa-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
    }

    .pa-content {
        width: calc(100% - 15rem);
        margin-left: 15rem;
        min-height: 100vh;
        justify-content: space-between;
        margin-top: unset;
    }

        .pa-content.admin {
            margin-top: unset;
        }

        .pa-content .content-area {
            padding: 1.5rem !important;
        }

        .pa-content .pa-content-inner {
            padding: unset;
        }

        .pa-content .offcanvas-lg .offcanvas-body {
            flex-direction: column;
        }

    .offcanvas-lg .offcanvas-header {
        display: flex;
        background: #fff;
        margin-bottom: 1rem;
    }

        .offcanvas-lg .offcanvas-header .btn-close {
            display: none;
        }

    .pa-content.admin {
        background-color: #fff !important; /*            background-color: #f4f3fb !important;
*/
    }

        .pa-content.admin .content-area .page-title {
            display: none;
        }
}

@media screen and (min-width: 768px) {
    nav.header ul {
        overflow-x: unset;
    }

    .sidebar .nav-link {
        font-size: 0.95rem;
        padding: 0.4rem 0.75rem;
        font-weight: 400;
    }

        .sidebar .nav-link i {
            font-size: 1rem;
        }
}

@media screen and (min-width: 992px) {
    .user header.main-header,
    .admin header.main-header {
        display: none;
    }
}

@media (min-width: 1200px) {
    main.dashboard {
        padding: 2rem;
    }
}
/* ─── Footer ──────────────────────────────────────────────────────────────── */

footer {
    padding: 2rem 1.5rem;
}

    footer nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        footer nav ul li {
            display: inline-flex;
            margin-right: 10px;
        }

            footer nav ul li a.link-text {
                color: #555;
                border-bottom-color: #ddd;
                font-weight: 400;
            }
/* ─── Modals ──────────────────────────────────────────────────────────────── */

.modal-title {
    line-height: 1;
}

.modal-body {
    color: #000;
}


.modal-content {
    border: none;
}

.modal-header {
    border: none;
    border-width: 2px;
    background-color: #ededed;
}

    .modal-header .btn-close {
        background-color: #c1c1c1;
    }

    .modal-header .btn-small i {
        font-size: 1.6rem;
    }
/*==============================================================================
  S T Y L I N G
==============================================================================*/

body {
    font-family: DM Sans, sans-serif;
    font-weight: 400;
    font-style: normal;
    background: #fcfcfd;
}

    body.user {
        background: #f7f9fc;
    }

h1, h2, h3, h4 {
    font-weight: 600 !important;
}

h1 {
    font-size: 1.75rem;
    margin-bottom: 1.75rem;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

h3 {
    font-size: 1.25rem;
    margin-bottom: 1.375rem;
}

h4 {
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
}

h5 {
    font-size: 1.075rem;
    margin-bottom: 1.125rem;
}

h6 {
    font-size: 1rem;
    margin-bottom: 1rem;
}

p, li, dt, dl {
    font-size: 1rem;
    font-weight: 400;
}

h1.welcome {
    font-size: 1.5rem;
}

h2.welcome {
    font-size: 1.25rem;
    font-weight: 700;
}


.x-small {
    font-size: 0.75rem;
}

.xx-small {
    font-size: 0.6rem;
}

.text-highlight {
    font-family: 'DM Mono', 'Space Grotesk', monospace;
    font-weight: 400;
    font-style: normal;
    font-size: 0.8rem;
    background: var(--green);
    color: var(--d-purple);
    padding: 0.2rem;
}

.col {
    transition: 0.5s ease-in-out;
}

.purple-grad {
    background: url('../../_theme/img/purple-grad.svg');
    background-size: cover;
}
/* ─── Buttons ─────────────────────────────────────────────────────────────── */


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon {
    padding: 0.25rem;
    gap: 0.5rem;
}

    .btn-icon i {
        font-size: 1.5rem;
    }

/*.btn span {
    font-size: 0.9375rem;
}*/


.btn-primary {
    background-color: var(--color-indigo-700);
    border-color: var(--color-indigo-700);
}

    .btn-primary:hover {
        background-color: var(--color-indigo-800);
        border-color: var(--color-indigo-800);
    }


.btn-secondary {
    background-color: var(--neutral--200);
    border-color: var(--neutral--200) !important;
    color: #000;
}

    .btn-secondary:hover {
        background-color: var(--neutral--100);
        border-color: var(--neutral--100) !important;
        color: #000;
    }

    .btn-secondary:first-child:active,
    .btn-secondary:focus-visible,
    :not(.btn-check) + .btn-secondary:active {
        background-color: var(--neutral--300);
        border-color: var(--neutral--300) !important;
        color: #000;
    }

.btn-tertiary {
    background-color: transparent;
    border-color: var(--neutral--200) !important;
    color: #666;
    transition: 0.3s ease-in-out;
}

    .btn-tertiary:hover {
        border-color: var(--neutral--100) !important;
        background: var(--neutral--100) !important;
    }

:not(.btn-check) + .btn-tertiary:active {
    border-color: var(--neutral--400) !important;
    background: var(--neutral--400) !important;
}

.btn-outline-white {
    border: solid 1px #fff;
    color: #fff;
}

    .btn-outline-white:hover {
        background-color: #fff;
        border-color: #fff;
        color: #222;
    }

.btn-text-button {
    border-color: transparent;
    background-color: transparent;
    color: var(--color-indigo-700);
}

    .btn-text-button:hover {
        background: var(--l-grey);
        color: var(--color-indigo-700);
    }

.btn-complete {
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 0.8rem;
    background-color: #ebc912;
    border: solid 1px #ebc912;
    color: var(--blue);
}

    .btn-complete:hover {
        border: solid 2px #ebc912;
    }

    .btn-complete i {
        color: var(--blue);
        line-height: 1;
    }

.btn-outline-complete {
    border: solid 2px #fff;
    color: #ebc912;
    font-family: 'DM Mono', 'Space Grotesk', monospace;
    font-weight: 400;
    font-style: normal;
}

.btn-icon i {
    line-height: 1; /*margin-right: 10px;*/
}

.btn-assessment {
    font-size: 1.25rem;
    width: 100%;
    border-radius: 100px;
    padding: 1rem 1.5rem;
    font-weight: 600;
    background-color: var(--color-indigo-700);
}

.btn-br {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.btn-fine {
    background-color: transparent;
    color: #222;
    border: solid 1px #222;
    border-radius: 6px;
    font-weight: 400;
    font-size: 0.8rem;
    padding: 0.6rem 0.75rem;
}

.btn-back {
    background-color: var(--l-grey);
    border: solid 1px var(--l-grey);
}

    .btn-back:hover {
        background-color: var(--l-grey);
        border: solid 1px #d2d3d7;
        color: #84868f;
    }



.btn-link {
    color: #6E54ED;
    text-decoration: none;
}

    .btn-link:hover {
        background-color: #f5f3fe;
        color: #6E54ED;
    }




.btn-view {
    background-color: var(--color-indigo-50) !important;
    color: var(--color-indigo-500) !important;
    text-decoration: none;
    padding: 0.25rem;
}

    .btn-view:hover {
        background-color: var(--color-indigo-100) !important;
        color: var(--color-indigo-500) !important;
    }

    .btn-view:active {
        background-color: var(--color-pareto-purple-200) !important;
        border-color: var(--color-pareto-purple-200) !important;
        color: var(--color-pareto-purple-600) !important;
    }


    .btn-view.inverted {
        background-color: var(--color-gray-700);
    }



.btn-edit {
    background-color: var(--color-amber-50) !important;
    color: var(--color-amber-500) !important;
    text-decoration: none;
    padding: 0.25rem;
}

    .btn-edit:hover {
        background-color: var(--color-amber-100) !important;
        color: var(--color-amber-500) !important;
    }

    .btn-edit:active {
        background-color: var(--color-amber-200) !important;
        border-color: var(--color-amber-200) !important;
        color: var(--color-amber-600) !important;
    }

.btn-table {
    padding: 0.25rem;
    gap: 0.5rem;
}


    .btn-table i {
        font-size: 1.5rem;
    }



.btn-delete {
    color: var(--color-red-600);
    overflow: hidden;
    padding: 0.25rem;
}

    .btn-delete:hover {
        background-color: var(--color-red-100);
        color: var(--color-red-500);
    }

    .btn-delete:first-child:active, :not(.btn-check) + .btn-delete:active {
        border-color: var(--color-red-500) !important;
        background: var(--color-red-500) !important;
        color: #FFF;
    }



.btn-toggle.is-on {
    color: var(--color-green-500);
}

    .btn-toggle.is-on:hover {
        background-color: var(--color-green-50);
        color: var(--color-green-600);
    }

.btn-toggle.is-off {
    color: var(--color-gray-400);
}

    .btn-toggle.is-off:hover {
        background-color: var(--color-gray-100);
        color: var(--color-gray-500);
    }



.btn-ui {
    display: inline-flex;
    background: var(--color-gray-50);
    gap: 0.5rem;
    border-color: var(--color-gray-200);
    color: var(--color-gray-400);
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    gap: 0.5rem;
}

    .btn-ui i {
        font-size: 1.5rem;
    }

.course .btn-next {
    background: #fff;
    color: rgb(43 60 98);
    border: solid 2px #fff;
}

    .course .btn-next:hover {
        background: rgb(225,225,225);
        color: rgb(43 60 98);
        border: solid 2px rgb(225,225,225);
    }

    .course .btn-next:focus {
        color: rgb(43 60 98);
        border: solid 2px #fff;
        background: var(--green);
    }

.course .btn-prev {
    background: transparent;
    color: #fff;
    border: solid 2px #fff;
}

    .course .btn-prev:hover {
        background: #fff;
        color: #222;
        border: solid 2px #fff;
    }

@media screen and (min-width: 992px) {


    .btn-lg {
        font-size: 1.1rem;
    }

    .btn-assessment {
        width: auto;
        padding: 1.25rem 2rem;
    }
}
/* ─── Links ───────────────────────────────────────────────────────────────── */

input.link-text {
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
}

.link-text {
    text-decoration: none;
    padding-bottom: 1px;
    border: none;
    border-bottom: 1px solid;
    font-weight: 600;
    display: inline-flex;
    transition: 0.2s ease-in-out;
    cursor: pointer;
}

    .link-text.purple {
        color: var(--color-indigo-700);
        border-bottom-color: var(--color-indigo-700);
    }

    .link-text.white {
        color: #fff;
        border-bottom-color: #fff;
    }

    .link-text i {
        display: inline-block;
        margin-left: 0.15rem;
    }

    .link-text.no-border {
        border-bottom: 1px transparent;
    }

    .link-text:hover {
        border-bottom: 1px solid;
        border-bottom-color: transparent;
    }

        .link-text:hover i {
            transform: translateX(3px);
        }

    .link-text.xx-small {
        font-size: 0.6rem;
    }

    .link-text.x-small {
        font-size: 0.75rem;
    }
/* ─── Forms ───────────────────────────────────────────────────────────────── */

.login .form-box {
    background: #fff;
    box-shadow: 1px 1px 15px 0 rgba(0,0,0,0.3);
    overflow: hidden;
}

.form-select {
    color: #333;
}

.form-floating > label {
    font-weight: 500;
    padding: 1rem;
}

.form-floating > .form-control {
    background: #fff;
    border: #e1e2e6 solid 1px;
    box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.03);
    color: var(--l-grey);
    max-width: 300px;
}

input.form-control.disabled,
span.form-control.disabled {
    background: #f5f5f5;
    color: #ccc;
}

::-webkit-input-placeholder {
    color: var(--l-grey);
}

::-moz-placeholder {
    color: var(--l-grey);
}

:-ms-input-placeholder {
    color: var(--l-grey);
}

:-moz-placeholder {
    color: var(--l-grey);
}

input::placeholder {
    color: #333 !important;
}

.Login-Error {
    border-left: var(--destructive--500) solid 3px;
    background: var(--destructive--100);
}

.ErrorText {
    font-size: 0.8125rem;
    color: var(--destructive--500) !important;
    line-height: 1.3;
    padding: 0.75rem;
}

.admin .form-label {
    font-size: 0.8125rem;
    display: inline-flex;
    margin-bottom: 0.25rem;
}

.error-text {
    font-size: 0.8125rem;
    color: #dc3545;
    font-weight: 100;
    display: flex;
    letter-spacing: 0.05rem;
}
/* ─── User Instructions ───────────────────────────────────────────────────── */

.user-instructions p {
    font-weight: 500;
    color: var(--primary--80070);
    font-size: 0.75rem;
}

.user-instructions i {
    margin-right: 0.75rem;
    color: var(--color-indigo-700);
}
/*==============================================================================
  U S E R   D A S H B O A R D
==============================================================================*/

main.dashboard {
    padding: 1rem;
}

.page-title {
    display: none;
}

    .page-title h4 {
        font-weight: 500;
        font-size: 1rem;
    }

        .page-title h4 i {
            font-size: 1rem;
            margin-right: 5px;
        }

.welcome {
    font-size: 1.5rem;
}

[data-toggle='on'] {
    display: block;
}

[data-toggle='off'] {
    display: none;
}
/* ─── Switch Mode ─────────────────────────────────────────────────────────── */

.switch-mode {
    display: flex;
    align-items: center;
}

    .switch-mode a {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-decoration: none;
    }

    .switch-mode .btn-toggle {
        background: var(--ot-admin-purple);
        padding: 0.25rem 0.2rem 0.2rem;
        width: 36px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        transition: 0.25s ease-in-out;
        justify-content: flex-end;
    }

        .switch-mode .btn-toggle i {
            color: #fff;
            font-size: 0.9rem;
            transition: 0.25s ease-in-out;
            line-height: 1;
        }

        .switch-mode .btn-toggle:hover {
            background: #4204c8;
        }

            .switch-mode .btn-toggle:hover i {
                transform: translateX(-13px);
            }

    .switch-mode p {
        margin: 0;
        font-size: 0.6rem;
        text-transform: uppercase;
        color: #999;
        font-weight: 500;
        letter-spacing: 1px;
    }

    .switch-mode.admin {
        margin: 1rem 0.25rem 0;
        padding: 1rem 0;
        border-top: solid 1px #ddd;
    }

        .switch-mode.admin .btn-toggle {
            background: var(--color-indigo-700);
            justify-content: start;
            margin-right: 10px;
        }

            .switch-mode.admin .btn-toggle i {
                color: #fff;
            }

            .switch-mode.admin .btn-toggle:hover {
                background: var(--primary--500);
            }

                .switch-mode.admin .btn-toggle:hover i {
                    transform: translateX(13px);
                }

        .switch-mode.admin p {
            color: var(--ardent-grey);
        }

@media (min-width: 992px) {
    .switch-admin {
        text-align: center;
    }

        .switch-admin a {
            background: rgba(0,0,0,0.2);
            color: #fff;
            display: inline-flex;
            border-radius: 50px;
            text-decoration: none;
            padding: 0.35rem 1rem;
            font-size: 0.75rem;
            transition: 0.1s ease-in;
            font-family: 'DM Mono', 'Space Grotesk', monospace;
            align-items: center;
        }

            .switch-admin a i {
                font-size: 24px;
                margin-right: 10px;
                line-height: 18px;
                color: var(--green);
            }

            .switch-admin a:hover {
                background: rgba(0,0,0,0.1);
            }

    .navbar .switch-admin {
        flex-direction: row;
        width: auto;
        right: 20px;
        color: var(--green);
        padding-right: 2rem;
    }

        .navbar .switch-admin i {
            margin-right: 10px;
        }

        .navbar .switch-admin span {
            font-family: 'DM Mono', 'Space Grotesk', monospace;
            display: inline-flex;
            font-size: 0.75rem;
            align-items: center;
        }

    .admin .navbar-nav .switch-admin a:hover span {
        color: var(--color-indigo-700);
    }

    main.login .left-side {
        background-image: url('_theme2/img/bg-login.png');
        background-position: bottom center;
        background-size: 65%;
        background-repeat: no-repeat;
    }

    .dropdown-toggle:after {
        display: inline-block;
    }
}
/* ─── Sidebar: Customer / Client ──────────────────────────────────────────── */

.pa-sidebar .customer {
    background: rgba(255,255,255,.95);
    margin-bottom: 1rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
}

    .pa-sidebar .customer img {
        max-width: 160px;
    }

.pa-sidebar .client {
    font-weight: 400;
    font-size: 0.75rem;
    margin-top: 1.5rem;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.pa-sidebar .version {
    font-weight: 400;
    font-size: 0.75rem;
    color: #aaa;
    margin-bottom: 0.75rem;
}

.admin .sidebar .client {
    color: #777;
}

.admin .sidebar .version {
    color: #aaa;
}
/* ─── Tooltip ─────────────────────────────────────────────────────────────── */

.tooltip-inner {
    font-size: 0.75rem;
    font-family: 'DM Mono', 'Space Grotesk', monospace;
    font-weight: 400;
    max-width: 160px;
    width: fit-content;
    padding: 0.5rem;
    line-height: 1.2;
}

.bs-tooltip-top .tooltip-arrow:before {
    border-top-color: var(--red) !important;
}
/* ─── Course List ─────────────────────────────────────────────────────────── */

.modules-completed {
    border-radius: 50%;
    display: flex;
    width: 24px;
    height: 24px;
    background: var(--success--500);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: 15px;
    justify-content: center;
    align-items: center;
}

.course-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}

    .course-list li {
        font-size: 0.8rem;
        border-radius: 12px;
    }

        .course-list li .image-parent {
            max-width: 80px;
            border-radius: 3px;
            overflow: hidden;
        }

    .course-list .list-group-item {
        padding: 0;
        margin-bottom: 10px;
        border: none;
        text-decoration: none;
        transition: 0.25s ease-in;
        background: transparent;
    }

        .course-list .list-group-item:hover {
            background: #fff;
            text-decoration: none;
        }

        .course-list .list-group-item a {
            text-decoration: none;
            color: var(--blue);
            padding: 0.5rem;
        }

        .course-list .list-group-item img {
            width: 55px;
            height: 55px;
            object-fit: cover;
            border-radius: 6px;
        }

        .course-list .list-group-item h4 {
            display: inline-block;
            width: calc(100% - 55px);
            padding-left: 1rem;
        }

.dashboard .card .card-header {
    background: none;
    border-bottom: none;
}

.dashboard .card .card-footer {
    background: #fff;
    border: none;
}

    .dashboard .card .card-footer .progress-value {
        color: #9da7b9;
    }

.dashboard .card.ql .card-header {
    padding: 1.5rem 1.25rem 0;
}

.dashboard .card.ql .card-body {
    padding: 1.25rem;
}

.dashboard .card .welcome-message p {
    font-size: 0.9rem;
}
/*==============================================================================
  C O U R S E S
==============================================================================*/
/* ─── Course Filters ──────────────────────────────────────────────────────── */

.filter.courses .btn {
    border-radius: 100px;
    min-width: fit-content;
    width: auto;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    background: #fff;
    border: 1px solid #EDEDED;
}

    .filter.courses .btn.active {
        background: #000;
        border: 1px solid #000;
        color: #fff;
    }

    .filter.courses .btn:hover {
        border-color: #000;
    }

.filter.courses.mandatory-container .btn {
    border-color: #ddd;
    background: #fff;
    color: #000;
}

    .filter.courses.mandatory-container .btn.active {
        border-color: #ddd;
        background: #ddd;
    }

.tag-container,
.mandatory-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.25rem;
}

.tag {
    padding: 5px 10px;
    margin-right: 5px;
    background-color: #eee;
    border-radius: 5px;
    min-width: fit-content;
}

.scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

    .scroll::-webkit-scrollbar {
        display: none;
    }

.flex {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}

.course-filters .item {
    flex: 0 0 auto;
}

    .course-filters .item a,
    .course-filters .item input {
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        display: block;
        text-decoration: none;
        border: none;
        background: #f7f9fc;
        transition: 0.2s ease-in-out;
        font-weight: 500;
        margin-right: 4px;
    }

        .course-filters .item a:hover {
            color: var(--green);
        }

        .course-filters .item input.ActiveFilter {
            background: var(--color-indigo-700);
            color: #fff;
        }

.filter-by {
    width: 140px;
    font-weight: 700;
}

.showing {
    font-weight: 400;
    font-size: 0.8rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 0 1rem;
}

@media screen and (min-width: 768px) {
    .filter-by {
        width: auto;
        min-width: 100px;
        padding-right: 20px;
    }

    .filter.course li a {
        font-size: 0.8rem;
    }

    .course-filters .item a:hover {
        border-color: var(--green);
        color: var(--color-indigo-700);
    }
}

@media screen and (min-width: 992px) {
    .course-filters .item a {
        padding: 0.5rem 0.65rem;
        margin-right: 8px;
    }
}
/* ─── Course Cards ────────────────────────────────────────────────────────── */

.courses.card { /*box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.05);*/ /*box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.05);*/
    transition: all 0.2s ease-in-out;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    padding: 0;
}

    .courses.card:hover {
        box-shadow: 1px 3px 12px 0 rgba(0,0,0,0.15);
    }

    .courses.card .module-thumbnail {
        padding: 0.25rem;
        display: block;
        position: relative;
        overflow: hidden;
        width: 160px;
        max-width: 120px;
        min-width: 160px;
        border-radius: 4px;
    }

        .courses.card .module-thumbnail .wrapper-thumb {
            overflow: hidden;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover !important;
            height: 100% !important;
            border-radius: 4px !important;
        }

    .courses.card .card-body {
        background: #fff;
        padding: 0.5rem 0.75rem 0.5rem 0.5rem;
        display: flex;
        flex-direction: column;
    }

        .courses.card .card-body h4 {
            font-size: 1rem;
        }

        .courses.card .card-body .title {
            font-size: 1rem;
            margin-bottom: 0.5rem;
        }

            .courses.card .card-body .title a {
                text-decoration: none;
                color: #000;
            }

        .courses.card .card-body .description {
            margin-bottom: 0.75rem;
            font-size: 0.8125rem;
        }

        .courses.card .card-body .meta {
            list-style-type: none;
            padding-left: 0;
            display: flex;
            margin: 0.5rem 0;
            gap: 0.5rem;
        }

            .courses.card .card-body .meta li {
                list-style: none;
                cursor: pointer;
                display: flex;
                flex-direction: row;
                align-items: center;
                margin: 0;
            }

                .courses.card .card-body .meta li:first-of-type {
                    min-width: 70px;
                }

                .courses.card .card-body .meta li i {
                    color: #7b8db1;
                    font-size: 1rem;
                    margin-right: 4px;
                    line-height: 1;
                }

                .courses.card .card-body .meta li span {
                    font-weight: 400;
                    font-size: 0.75rem;
                    line-height: 1;
                    color: #7b8db1;
                }

    .courses.card .card-footer {
        line-height: 1;
        width: 100%;
        padding: 0.5rem;
        display: none;
    }

        .courses.card .card-footer .card-footer-progress {
            display: flex;
            flex-grow: 1;
            justify-content: center;
            align-items: center;
            padding: 0;
        }

        .courses.card .card-footer .progress {
            height: 6px;
        }

        .courses.card .card-footer .percentage {
            width: 50px;
            display: flex;
            justify-content: start;
            align-items: center;
        }

        .courses.card .card-footer .progress-container {
            width: 100%;
            display: inline-block;
            padding: 0;
        }

        .courses.card .card-footer .progress-value {
            cursor: pointer;
            font-weight: 400;
            font-size: 0.8rem;
            text-align: center;
        }

        .courses.card .card-footer .progress-bar {
            background-color: var(--color-indigo-700);
        }

    .courses.card .module-mandatory {
        background: #ffef9df2;
        border-radius: 100px;
        color: #ff9800;
        padding: 0.25rem 0.375rem;
        line-height: 1;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        position: absolute;
        top: 0.75rem;
        left: 0.75rem;
        gap: 0.25rem;
    }

        .courses.card .module-mandatory i {
            color: #ff9800;
            line-height: 0;
            font-size: 1rem;
        }

        .courses.card .module-mandatory span {
            padding: 0;
            font-size: 0.75rem;
            color: #905600;
            line-height: 1;
        }

    .courses.card .btn-card {
        background: var(--neutral--100);
        height: 24px;
        width: 24px;
        border: none;
        padding: 0;
        line-height: 0;
        justify-content: center;
        align-items: center;
        display: flex;
        color: var(--neutral--400);
    }

        .courses.card .btn-card i {
            line-height: 1;
        }

        .courses.card .btn-card:hover {
            background: var(--success--500);
            color: #fff;
        }

        .courses.card .btn-card a {
            color: #c5cee0;
        }

        .courses.card .btn-card.start:hover {
            background-color: var(--green);
        }

        .courses.card .btn-card.certificate:hover {
            background: #c5cee0;
        }

            .courses.card .btn-card.certificate:hover a {
                color: #fff;
            }

    .courses.card .btn.complete {
        color: #ebc912;
    }

    .courses.card .cpd-badge .cpd-badge-inner {
        display: flex;
        align-items: center;
        justify-content: start;
        background: rgba(255,255,255,0.95);
        border-radius: 8px;
    }

        .courses.card .cpd-badge .cpd-badge-inner img {
            width: 56px;
            padding: 0.25rem 0.4rem;
        }

.certificate.module-complete {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: #ffd700;
    border-radius: 50px;
    box-shadow: 1px 3px 12px 0 rgba(0,0,0,0.15);
    transition: 0.25s ease-in;
    z-index: 10;
}

    .certificate.module-complete a {
        display: flex;
        padding: 0.45rem 0.75rem;
        text-decoration: none;
    }

        .certificate.module-complete a i {
            color: var(--blue);
            line-height: 1;
            font-size: 1rem;
            margin-right: 5px;
            transition: 0.5s ease-in-out;
        }

        .certificate.module-complete a span {
            font-family: 'DM Mono', 'Space Grotesk', monospace;
            font-size: 0.75rem;
            color: var(--blue);
            align-self: center;
            line-height: 1;
        }

    .certificate.module-complete:hover {
        background: var(--blue);
    }

        .certificate.module-complete:hover a span,
        .certificate.module-complete:hover a i {
            color: #e1c00f;
        }

    .certificate.module-complete a i.bi-file-earmark-arrow-down,
    .certificate.module-complete a:hover i.bi-check-circle-fill {
        display: none;
    }

    .certificate.module-complete a:hover i.bi-file-earmark-arrow-down,
    .certificate.module-complete a i.bi-check-circle-fill {
        display: block;
    }
/* Course Cards: Breakpoints */
@media screen and (min-width: 576px) {
    .courses.card .module-thumbnail {
        width: 100%;
        height: unset;
        max-width: unset;
    }

    .courses.card.recent .module-thumbnail {
        width: 150px;
    }

    .courses.card .card-body {
        justify-content: start;
        padding: 0.75rem;
    }

        .courses.card .card-body .description {
            margin-bottom: 0;
        }

        .courses.card .card-body .meta {
            display: flex;
            margin: 0 0 0.5rem;
        }

    .courses.card .card-footer {
        padding: 0.25rem 0.75rem 0.75rem;
    }
}

@media screen and (min-width: 768px) {
    .courses.card .card-body {
        padding: 1rem;
        gap: 0.75rem;
    }

        .courses.card .card-body .meta {
            margin: 0;
        }

        .courses.card .card-body .title {
            font-size: 1.125rem;
            margin-bottom: 0;
        }

    .courses.card .card-footer {
        line-height: 1;
        width: 100%;
        padding: 0.75rem 1rem;
        border-top: 1px solid #f0f0f0;
        display: flex;
    }
}

@media screen and (min-width: 992px) {
    .courses.card .card-body .title {
        font-size: 1.1rem;
    }
}

@media screen and (min-width: 1200px) {
    .courses.card.recent .module-thumbnail {
        width: unset;
    }
}
/*==============================================================================
  A D M I N
==============================================================================*/

.admin h1 {
    font-size: 1.125rem;
}

.admin .sidebar {
    background: #f7f9fc !important;
}

    .admin .sidebar .nav-link {
        color: #8e949b;
    }

        .admin .sidebar .nav-link:hover {
            color: #222;
        }

    .admin .sidebar .nav li.switch-admin a:hover {
        color: var(--d-purple);
    }

    .admin .sidebar .nav-link.active:hover,
    .admin .sidebar .nav-link.active {
        color: var(--color-indigo-700);
        font-weight: 600;
    }

.admin-sidebar .nav-link.nav-link-sub:after {
    content: "\F282";
    font-family: 'Bootstrap-icons';
    position: absolute;
    right: 2.5rem;
}

.admin .navbar-nav .switch-admin a {
    background: transparent;
}

.admin .navbar-nav a:focus,
.admin .navbar-nav a:hover {
    color: var(--d-purple);
}

.admin .navbar-toggler {
    color: var(--d-purple);
}
/*.admin .btn-edit {
        color: var(--color-indigo-700);
        font-size: 0.8rem;
        padding: 0;
    }*/

.admin .btn-back {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    border: 1px solid #edeff2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    left: -20px;
    top: 20px;
}

.admin .admin-card {
    border: 1px solid #f0f0f0;
    position: relative;
    z-index: 1;
    width: 100%;
    background: var(--lg-card);
    border: 1px solid var(--lg-line);
    border-radius: 1rem; /*padding: 36px 32px 28px;*/
    box-shadow: 0 18px 50px #2b1c5518;
}

    .admin .admin-card .card-header {
        border-bottom: none;
        padding: 1rem;
    }

    .admin .admin-card .card-body {
        padding: 1rem;
    }
/* ─── Filter Container ────────────────────────────────────────────────────── */

.filter-container {
    margin-bottom: 1rem;
    background: var(--neutral--100);
    border-radius: 8px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .filter-container .radios-container {
        display: flex;
        flex-direction: row;
    }

    .filter-container .radio-blue {
        padding: 1rem 1rem 0 0;
    }

    .filter-container input.form-control,
    .filter-container span.form-control,
    .filter-container .form-select,
    .filter-container2 input.form-control,
    .filter-container2 span.form-control,
    .filter-container2 .form-select {
        width: 100%;
    }


        .filter-container input.form-control.form-control-date {
            width: 120px;
        }

.data-container {
    margin-bottom: 1rem;
    background: #eaebee;
    border-radius: 8px;
    padding: 1rem;
    gap: 0.25rem;
}


.btn-filter {
    background-color: #FFF !important;
    border: 1px solid #dee2e6;
    justify-content: flex-start;
    gap: 0.5rem;
    justify-content: space-between;
}

.dropdown-menu {
    padding: 0.25rem 0; /*width: 15rem;*/
    z-index: 1001;
    max-height: 50dvh;
    overflow: auto;
    width: 92%;
}

    .dropdown-menu li {
        margin-bottom: 0;
        padding: 0;
        list-style-type: none;
    }

        .dropdown-menu li table td {
            padding: 0.25rem !important;
        }

        .dropdown-menu li ul {
            padding-left: 0;
        }

            .dropdown-menu li ul li {
                padding: 0.25rem;
            }

                .dropdown-menu li ul li:hover {
                    background-color: var(--color-neutral-50);
                    border-radius: 0.25rem;
                }


.radio-list tbody {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-direction: column;
}

.radio-list tr {
    display: contents;
}

.radio-list th, .radio-list td {
    display: flex;
    align-items: center;
    padding: 0 !important;
}

[type="radio"]:checked, [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

    [type="radio"]:checked + label, [type="radio"]:not(:checked) + label {
        position: relative;
        padding-left: 26px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        color: #666;
        font-size: 0.875rem;
    }

        [type="radio"]:checked + label:before, [type="radio"]:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 1px solid #cbcbcb;
            border-radius: 100%;
            background: #fff;
        }

        [type="radio"]:checked + label:after, [type="radio"]:not(:checked) + label:after {
            content: '';
            width: 10px;
            height: 10px;
            background: var(--color-indigo-700);
            position: absolute;
            top: 4px;
            left: 4px;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        [type="radio"]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        [type="radio"]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }


.form-check-input:checked {
    background-color: var(--color-emerald-500);
    border-color: var(--color-emerald-500);
    box-shadow: 0 0 0 .25rem var(--color-emerald-100);
}


@media screen and (min-width: 768px) {
    .filter-container {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem;
    }

        .filter-container .collapse {
            display: flex;
        }

        /*.filter-container .btn-filter {
                display: none;
            }*/

        .filter-container input.form-control,
        .filter-container span.form-control,
        .filter-container .form-select,
        .filter-container2 input.form-control,
        .filter-container2 span.form-control,
        .filter-container2 .form-select {
            max-width: 180px;
            width: fit-content;
        }


    .dropdown-menu {
        width: unset;
    }
}
/* ─── Admin Dashboard Links ───────────────────────────────────────────────── */

.dash-links {
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

    .dash-links .icon {
        background: var(--pp-bg);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        margin-right: 15px;
    }

        .dash-links .icon i {
            color: #9899ad;
            font-size: 1.2rem;
            line-height: 1;
            transition: all 0.2s ease-in-out;
        }

    .dash-links .title {
        color: #8e949b;
        display: flex;
        font-weight: 500;
        font-size: 0.95rem;
        transition: all 0.2s ease-in-out;
        text-align: center;
    }

    .dash-links:hover .icon i {
        color: #222;
    }

    .dash-links:hover .title {
        color: #222;
    }

.social-link {
    color: #8e949b;
    text-decoration: none;
}

    .social-link:hover {
        color: var(--d-purple);
    }
/* ─── Admin Data Grid ─────────────────────────────────────────────────────── */

.mGrid {
    border-radius: 6px;
    background-color: transparent !important;
    margin: 0;
}
    /*
        .mGrid th {
            font-weight: 500;
            font-size: 0.875rem;
            background: #fff;
            color: #a6a9b1;
            border-color: #e7e7e7;
        }

            .mGrid th a {
                color: #a6a9b1;
                font-weight: 400;
                text-decoration: none;
                font-size: 0.875rem;
            }*/

    /*.mGrid th a:after {
                    content: '\F282';
                    font-family: 'Bootstrap-icons';
                    padding-left: 7px;
                    font-size: 10px;
                }

            .mGrid th:first-child a:after {
                content: unset;
            }*/

    .mGrid tbody tr th {
        text-align: left;
        color: #9b9b9b;
        padding: 1rem 0.75rem 1rem 0.5rem;
    }

    .mGrid tbody tr td {
        font-size: 0.875rem;
        vertical-align: middle;
        border-bottom: solid 1px #f6f6f6;
    }

    .mGrid tbody tr:last-of-type {
        border-bottom: none;
    }

    .mGrid tbody tr.pgr td {
        border: none !important;
    }

    .mGrid .first-col {
        width: 85px;
    }

.table-mobile-scroll {
    overflow-x: auto;
}

@media (min-width: 1200px) {
    .dropdown-menu[data-bs-popper] {
        right: 30px;
        left: inherit;
    }

    .mGrid th {
        word-break: break-word;
    }
}

div.editUser {
    position: relative;
    width: 20px;
    text-align: center;
    color: #333;
}

    div.editUser input {
        background-color: transparent;
        border: none;
        width: 20px;
        height: 20px;
        position: absolute;
        left: 0;
        padding: 0;
        outline: none;
    }

    div.editUser:before {
        content: '\f044';
        font-family: Fontawesome;
        font-size: 1rem;
        color: var(--primary--80070);
    }

.deleteUser a {
    color: var(--red);
}



a.calendar {
    color: var(--d-purple);
    position: absolute;
    right: 15px;
    top: 32px;
}

a.calendar { /* vertical-align: middle; */
}

a.editQuestion {
    color: var(--color-indigo-700);
}

.table-nav ul {
    margin: 0;
    padding: 0;
}

.table-nav li {
    list-style: none;
    display: inline-block;
    line-height: 32px;
}

    .table-nav li a {
        padding: 10px;
        width: 40px;
        height: 40px;
        border-radius: 6px;
        line-height: 10px;
        display: inline-block;
    }

    .table-nav li i {
        font-size: 1rem;
    }

.training-record table td:last-child {
    padding: 0;
    vertical-align: middle;
}



table.table th {
    color: #000;
    padding: 0 0.25rem 1.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-align: left;
}

    table.table th a {
        color: #000;
        padding: 0;
        text-decoration: none;
        display: flex;
        align-items: center;
    }

        table.table th a:after {
            content: "\e4fe";
            font-family: lineicons-solid !important;
            font-style: normal;
            font-weight: normal !important;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 0.9375rem;
            padding-left: 0.125rem;
        }

        table.table th a:hover {
            color: #666;
        }


/* ─── Admin Dashboard Cards ───────────────────────────────────────────────── */

.card-info-dash {
    border: 1px #f1f2f5 solid; /*margin: 0.5rem 0 0.5rem 0.5rem;*/
    width: 100%;
}

    .card-info-dash .card-header {
        width: 100%;
        background-color: transparent;
        padding: 0.75rem 0.75rem 0;
        border-bottom: none;
        display: flex;
        justify-content: flex-start;
        gap: 15px;
    }

        .card-info-dash .card-header h5 {
            margin: 1rem 1rem 1rem 0.5rem;
            font-size: 1rem;
        }

            .card-info-dash .card-header h5 .sub {
                display: flex;
                font-weight: 300;
                font-size: 0.75rem;
            }

        .card-info-dash .card-header .icon {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            display: flex;
            padding: 0;
            margin-right: 1rem;
            align-items: center;
            justify-content: center;
        }

.card .card-info-dash .card-header .icon svg {
    filter: invert(1);
}

.card .card-header nav .bi {
    display: flex;
    align-items: center;
}

.card-info-dash .card-header a {
    color: #aaa;
    margin: 1rem 0.5rem 1rem auto;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.card-info-dash .card-header i {
    line-height: 1;
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

.card-info-dash .tag {
    display: none;
}

.stat-value {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    margin: 0 0.75rem 0.75rem 0;
}

.stat-label {
    font-size: 0.8125rem;
    color: #666;
}

.UserCounts {
    color: #000;
    border: 1px solid #000;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25rem 0.75rem;
    margin-right: 0.5rem;
    border-radius: 100px;
}

.UserCountsLabel {
    line-height: 1.2;
    font-size: 0.75rem;
}

.radioButton {
    gap: 0.5rem; /*margin-left: 1rem;
        margin-right: 1rem;
        font-size: 0.8rem;*/
}

.check-input {
    font-size: 0.85rem;
    color: #000;
    display: flex;
    justify-content: center;
}

    .check-input label {
        margin-left: 5px;
        white-space: nowrap;
    }

.circle-stat .outer {
    align-items: center;
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow: auto;
}

.circle-stat svg {
    height: 100%;
}

.circle-stat text {
    fill: #fff;
    font-size: 3rem;
    font-weight: 600;
}

.circle {
    width: 100%;
    border-radius: 50%;
    text-align: center;
    font-size: 1.6rem;
    padding: 50% 0;
    line-height: 0;
    position: relative;
    background: var(--d-purple);
    color: #fff;
    font-weight: 500;
}

@media (min-width: 1200px) {
    .circle-stat .outer {
        max-width: 70%;
    }
}
/* ─── Alerts ──────────────────────────────────────────────────────────────── */

.complete-icon-bg {
    background: #43e443;
    padding: 5px;
    border-radius: 40px;
}

.problem-icon-bg {
    background: #f3705f;
    padding: 5px;
    border-radius: 40px;
}

.alert-success {
    background: #ebfbf5;
    color: #181818;
    border: none;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex !important;
    margin-top: 1rem;
    align-items: flex-start;
    padding: 1rem;
}

    .alert-success::before {
        font-family: 'Bootstrap-icons';
        content: '\F26A';
        color: #35d39d;
        font-size: 1rem;
        margin-right: 15px;
    }

.alert-error {
    background: #fdedef;
    color: #181818;
    border: none;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex !important;
    margin-top: 1rem;
    align-items: flex-start;
    padding: 1rem;
}

    .alert-error::before {
        font-family: 'Bootstrap-icons';
        content: '\F430';
        color: #ef4d61;
        font-size: 1rem;
        margin-right: 15px;
        line-height: 1;
    }

.alert-error2 {
    background: #fdedef;
    color: #181818;
    border: none;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 1rem;
    align-items: flex-start;
    padding: 1rem;
}

    .alert-error2::before {
        font-family: 'Bootstrap-icons';
        content: '\F430';
        color: #ef4d61;
        font-size: 1rem;
        margin-right: 15px;
        line-height: 1;
    }

.alert-sm {
    font-weight: 500;
    padding: 0.5rem;
    margin-top: 0.5rem;
    display: inline-flex;
    line-height: 1;
    font-size: 0.75rem;
}

    .alert-sm::before {
        font-size: 0.75rem;
        margin-right: 0.25rem;
    }

.alert-error-inline {
    color: #ef4d61 !important;
    padding: 0.25rem 0;
    margin: 0;
    font-weight: 500;
    font-size: 0.8rem;
    display: inline-flex !important;
}

    .alert-error-inline::before {
        font-family: 'Bootstrap-icons';
        content: '\F431';
        color: #ef4d61;
        font-size: 0.75rem;
        margin-right: 0.25rem;
    }

.alert-error-inline2 {
    color: #ef4d61 !important;
    padding: 0.25rem 0;
    margin: 0;
    font-weight: 500;
    font-size: 0.8rem;
}

    .alert-error-inline2::before {
        font-family: 'Bootstrap-icons';
        content: '\F431';
        color: #ef4d61;
        font-size: 0.75rem;
        margin-right: 0.25rem;
    }
/* ─── Pagination ──────────────────────────────────────────────────────────── */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .pagination .btn {
        background: #f8f9fa;
        height: 40px;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
        font-size: 0.8rem;
    }

        .pagination .btn:hover {
            background: #e8ecef;
        }

        .pagination .btn.btn-current {
            background: unset;
            width: unset;
        }
/*.pgr a {
        font-size: 0.8rem;
        color: var(--color-indigo-700);
        border-radius: 3px;
    }*/
/* ─── Help Panel ──────────────────────────────────────────────────────────── */

.btn-help {
    background: var(--ot-admin-purple);
    color: #fff;
    border: transparent;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .btn-help:hover,
    .btn-help:focus {
        background: #8851fd;
        color: #fff;
    }

    .btn-help:first-child:active {
        background: #602bd3;
        color: #fff;
    }

    .btn-help i {
        font-size: 1.4rem;
    }

.help-panel {
    background: #eeeff8 !important;
    border: #dee0ef solid 1px !important;
    border-radius: 4px;
    box-shadow: 1px 1px 3px #00000010;
}

    .help-panel .offcanvas-header {
        background: #d9dbe7 !important;
        padding: 0.5rem 1rem;
    }

    .help-panel.offcanvas-md.offcanvas-end {
        top: 15px;
        right: 15px;
        left: unset;
        border-radius: 4px;
        box-shadow: 1px 1px 3px #00000010;
    }

    .help-panel.offcanvas-md .offcanvas-header {
        background: #d9dbe7 !important;
        padding: 0.5rem 1rem;
    }

    .help-panel h5.offcanvas-title {
        color: #2c3058;
        font-size: 0.75rem;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .help-panel h3 {
        color: #474b6d;
        font-size: 1rem;
        line-height: 1.2;
    }

    .help-panel h4 {
        color: #555fb9;
        font-size: 0.825rem;
        margin-bottom: 0.25rem;
    }

    .help-panel p,
    .help-panel li {
        color: #6b6e8d;
        font-size: 0.8rem;
        line-height: 1.3;
        margin-bottom: 0.75rem;
    }

    .help-panel ol {
        margin-left: -1rem;
    }

    .help-panel p.notes {
        font-size: 0.75rem;
        padding-left: 1rem;
        border-left: 1px solid #bec0d9;
        color: #21251f;
        line-height: 1.2;
    }

    .help-panel .btn-sub-page-nav {
        background: #555fb9;
    }

        .help-panel .btn-sub-page-nav i {
            color: #fff;
        }

        .help-panel .btn-sub-page-nav.close {
            height: 30px;
            width: 30px;
            background: #fff;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .help-panel .btn-sub-page-nav.close:hover {
                background: rgba(255,255,255,0.5);
            }

            .help-panel .btn-sub-page-nav.close i {
                color: #555fb9;
                line-height: 0;
            }

    .help-panel .offcanvas-body-md::-webkit-scrollbar {
        width: 10px;
        margin: 150px 0 60px;
    }

    .help-panel .offcanvas-body-md::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .help-panel .offcanvas-body-md::-webkit-scrollbar-thumb {
        background-color: #bec0d9;
        border-radius: 20px;
        border: 3px solid transparent;
        background-clip: content-box;
    }

        .help-panel .offcanvas-body-md::-webkit-scrollbar-thumb:hover {
            background-color: #bec0d9;
        }

@media (min-width: 992px) {
    .help-panel.offcanvas-md.offcanvas-end {
        max-width: 355px;
        width: 300px;
    }
}
/* ─── CKEditor ────────────────────────────────────────────────────────────── */

.cke_top {
    padding: 0.75rem !important;
    background: none !important;
    background-image: none !important;
    border-bottom: 1px solid #ddd !important;
}

.cke_bottom {
    background: none !important;
    background-image: none !important;
    border-top: none !important;
}

.cke_chrome {
    border: 1px solid #ddd !important;
}

.cke_toolgroup,
.cke_combo_button {
    border: 1px solid #ddd !important;
    background: none !important;
    background-image: none !important;
}

a.cke_button {
    opacity: 0.5 !important;
}

.contact-form .modal-content h3 {
    color: #222;
}
/*==============================================================================
  W O R K S T A T I O N   R I S K   R E V I E W
==============================================================================*/

.btn.btn-primary.wrr {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
}

.wrr label {
    display: inline-flex;
    cursor: pointer;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.375em;
}

    .wrr label input {
        position: absolute;
        left: -9999px;
    }

        .wrr label input:checked + span {
            background-color: #caf2e4;
        }

            .wrr label input:checked + span:before {
                box-shadow: inset 0 0 0 0.4375em #0ec484;
            }

    .wrr label span {
        display: flex;
        align-items: center;
        padding: 0.375em 0.75em 0.375em 0.375em;
        border-radius: 99em;
        transition: 0.25s ease;
    }

        .wrr label span:hover {
            background-color: #caf2e4;
        }

        .wrr label span:before {
            display: flex;
            flex-shrink: 0;
            content: "";
            background-color: #fff;
            width: 1.5em;
            height: 1.5em;
            border-radius: 50%;
            margin-right: 0.375em;
            transition: 0.25s ease;
            box-shadow: inset 0 0 0 0.125em #0ec484;
        }

.course.wrr .course-info {
    padding: 1.25rem;
    background: #fff;
    margin-bottom: 1rem;
    border-radius: 8px;
    border: 1px solid var(--color-gray-200);
}

    .course.wrr .course-info h3 {
        font-size: 1.1rem;
    }

.course.wrr .comment {
    border: 1px solid #efefef;
    background: #fff;
    width: 100%;
    display: flex;
    margin-top: 1rem;
    padding: 0.5rem;
    font-size: 0.9rem;
}

    .course.wrr .comment::placeholder {
        color: #333;
    }

.course.wrr .content-area .assessment table {
    width: 100%;
}
/* ─── Custom Checkbox ─────────────────────────────────────────────────────── */

.checkbox-wrapper-13 {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .checkbox-wrapper-13 input[type=checkbox] {
        --active: #f8f9fa;
        --active-inner: #7537fb;
        --focus: 2px rgba(39, 94, 254, .3);
        --border: #c2c3c5;
        --border-hover: #f8f9fa;
        --background: #fff;
        --disabled: #F6F8FF;
        --disabled-inner: #E1E6F9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 1.5rem;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bs-border-color);
        background: var(--b, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }

        .checkbox-wrapper-13 input[type=checkbox]:after {
            content: "";
            display: block;
            left: 0;
            top: 0;
            position: absolute;
            transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
        }

        .checkbox-wrapper-13 input[type=checkbox]:checked {
            --b: var(--active);
            --bc: #dee2e6;
            --d-o: .3s;
            --d-t: .6s;
            --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
        }

        .checkbox-wrapper-13 input[type=checkbox]:disabled {
            --b: var(--disabled);
            cursor: not-allowed;
            opacity: 0.9;
        }

            .checkbox-wrapper-13 input[type=checkbox]:disabled:checked {
                --b: var(--disabled-inner);
                --bc: var(--border);
            }

            .checkbox-wrapper-13 input[type=checkbox]:disabled + label {
                cursor: not-allowed;
            }

        .checkbox-wrapper-13 input[type=checkbox]:focus {
            box-shadow: 0 0 0 var(--focus);
        }

        .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
            width: 1.5rem;
        }

            .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
                opacity: var(--o, 0);
            }

            .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
                --o: 1;
            }

        .checkbox-wrapper-13 input[type=checkbox] + label {
            display: inline-block;
            vertical-align: middle;
            cursor: pointer;
            font-size: 0.825rem;
        }

        .checkbox-wrapper-13 input[type=checkbox]:not(.switch) {
            border-radius: 4px;
        }

            .checkbox-wrapper-13 input[type=checkbox]:not(.switch):after {
                width: 6px;
                height: 12px;
                border: 2px solid var(--active-inner);
                border-top: 0;
                border-left: 0;
                left: 8px;
                top: 4px;
                transform: rotate(var(--r, 20deg));
            }

            .checkbox-wrapper-13 input[type=checkbox]:not(.switch):checked {
                --r: 43deg;
            }
}

.checkbox-wrapper-13 *,
.checkbox-wrapper-13 *:before,
.checkbox-wrapper-13 *:after {
    box-sizing: inherit;
}


.form-box {
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .form-box i {
        font-size: 1.25rem;
    }

@media (min-width: 550px) {
    .form-box {
        width: unset;
    }
}

/* Admin Dashboard (Admin/Dashboard.aspx) */


.pp-kpis {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
}




@media (min-width: 992px) {

    .pp-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {

    .pp-kpis {
        grid-template-columns: repeat(3, 1fr);
    }
}



    .pp-kpi {
        background: var(--pp-card);
        border: 1px solid var(--pp-line);
        border-radius: 1rem;
        padding: 0.75rem 1rem;
        box-shadow: var(--pp-shadow);
        position: relative;
        overflow: hidden;
    }

        .pp-kpi .icon-container {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            display: flex;
            padding: 0;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            background-color: var(--pp-bg);
        }

            .pp-kpi .icon-container i {
                font-size: 1.5rem;
                line-height: 1;
            }

        .pp-kpi .stat-value {
            font-size: 3rem;
            margin-bottom: 0.5rem;
            line-height: 1.3;
        }

        .pp-kpi h4 {
            margin: 0;
            font-size: 1rem;
            line-height: 1;
        }

        .pp-kpi .card-link {
            position: absolute;
            top: 1rem;
            right: 1rem;
            color: var(--pp-accent);
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

            .pp-kpi .card-link i {
                line-height: 1;
            }

            .pp-kpi .card-link span {
                font-size: 0.75rem;
                font-weight: 500;
            }

    /* ---- small link cards (icon + title + one-line description) ---- */
    .link-card-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .link-card {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem 0.9rem;
        border: 1px solid var(--pp-line);
        border-radius: 0.75rem;
        background: var(--neutral--100);
        text-decoration: none;
        color: inherit;
        transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    }

        .link-card:hover {
            border-color: var(--pp-accent);
            background: #fff;
            transform: translateY(-1px);
        }

        .link-card i {
            flex: none;
            font-size: 1.25rem;
            line-height: 1.4;
            color: var(--pp-accent);
        }

    .link-card-body {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .link-card-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: #000;
    }

    .link-card-desc {
        font-size: 0.8125rem;
        color: #666;
        line-height: 1.3;
    }


    .pp-grid {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 1rem; /*padding: 6px 18px 20px;*/
        grid-auto-flow: row dense;
    }

@media (min-width: 992px) {
    .pp-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-template-columns: repeat(3, 1fr);
    }
}


    .pp-w {
        grid-column: span var(--span, 1);
        background: var(--pp-card);
        border: 1px solid var(--pp-line);
        border-radius: 1rem;
        padding: 1rem;
        box-shadow: var(--pp-shadow);
        transform: translateY(14px);
        transition: opacity .5s, transform .5s, box-shadow .2s;
        position: relative;
    }

    .pp-w-head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 11px;
    }

    .promo-spotlight {
        position: relative;
        display: flex;
        flex-direction: column;
    }

        .promo-spotlight .promo-slide.d-none {
            display: none;
        }

    .promo-edit-link {
        font-size: 0.8rem;
        color: var(--primary--500, #7c47ff);
        text-decoration: none;
        white-space: nowrap;
    }

        .promo-edit-link:hover {
            text-decoration: underline;
        }

    .promo-dots-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
    }

    .promo-dots {
        display: flex;
        gap: 6px;
    }

        .promo-dots span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(0,0,0,0.15);
            cursor: pointer;
        }

            .promo-dots span.active {
                background: var(--primary--500, #7c47ff);
            }

    .promo-counter {
        font-size: 0.75rem;
        color: var(--neutral--500, #8a8894);
        font-family: "DM Mono", ui-monospace, monospace;
    }

    /* Layouts - arrangement of image/text within a slide */
    .promo-slide {
        border-radius: 12px;
    }

    .promo-image-wrap {
        border-radius: 10px;
        overflow: hidden;
    }

    .promo-layout-stacked .promo-slide-inner {
        display: block;
    }

    .promo-layout-stacked .promo-image-wrap {
        display: block;
        margin-bottom: 12px;
    }

    .promo-layout-stacked .promo-text-wrap .btn {
        display: block;
        width: fit-content;
        margin: 0.5rem auto 0;
    }

    .promo-layout-split .promo-slide-inner {
        display: flex;
        flex-direction:column;
        gap: 20px;
        align-items: center;
    }

@media (min-width: 768px) {
    .promo-layout-split .promo-slide-inner {
        flex-direction: row;
    }
}

@media (min-width:992px) {
    .promo-layout-split .promo-slide-inner {
        flex-direction: column;
    }
}

@media (min-width:1200px) {
    .promo-layout-split .promo-slide-inner {
        flex-direction: row;
    }
}

    .promo-layout-split .promo-image-wrap {
        flex: 0 0 42%;
    }

    .promo-layout-split .promo-text-wrap {
        flex: 1;
    }


    .carousel-control-next, .carousel-control-prev {
        width: 5% !important;
    }
    /* Themes - background treatment of a slide */
    .promo-theme-classic {
        background: transparent;
        padding: 1.5rem;
        padding: 1.5rem 3rem 5rem;
        border: 1px solid var(--pp-line)
    }

    .promo-theme-purple, .promo-theme-mint, .promo-theme-sunset, .promo-theme-dark {
        padding: 1.5rem;
        padding: 1.5rem 3rem 5rem;
        color: #fff;
    }

    .promo-theme-purple {
        background: linear-gradient(135deg, #0e1f4d 0%, #5618bf 60%, #7c47ff 100%);
    }

    .promo-theme-mint {
        background: linear-gradient(135deg, #0e1f4d 0%, #14806f 55%, #38ebd4 100%);
    }

    .promo-theme-sunset {
        background: linear-gradient(135deg, #ff5f6d 0%, #ff940a 60%, #ffce54 100%);
    }

    .promo-theme-dark {
        background: linear-gradient(135deg, #050506 0%, #1c1b22 60%, #302e38 100%);
    }

        .promo-theme-purple h4, .promo-theme-purple p, .promo-theme-mint h4, .promo-theme-mint p, .promo-theme-sunset h4, .promo-theme-sunset p, .promo-theme-dark h4, .promo-theme-dark p {
            color: inherit;
        }

        .promo-theme-purple .btn-primary, .promo-theme-mint .btn-primary, .promo-theme-sunset .btn-primary, .promo-theme-dark .btn-primary {
            background: #38ebd4;
            border-color: #38ebd4;
            background: #FFF;
            border-color: #FFF;
            color: #06352d;
        }

    .marketing-carousel-img {
        display: block;
        width: 20rem;
        height: 15rem;
        object-fit: contain;
        margin: 0 auto;
    }

        .marketing-carousel-img img {
            border-radius: 0.25rem;
            overflow: hidden;
        }

    #marketingCarousel .carousel-item {
        height: 100%;
        border-radius: 1rem;
    }

    #marketingCarousel .promo-slide-inner {
        height: 100%;
    }

    #marketingCarousel .promo-layout-stacked .promo-slide-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    input::-ms-reveal {
        display: none;
    }