/* #Custom-Attributes
================================================== */
[x-cloak] {
    display: none !important;
}

:root {
    --bs-primary: #322938;
    --bs-primary-rgb: 207, 200, 154;
    --bs-secondary-rgb: 255, 236, 180;
    --bs-dark-rgb: 50, 41, 56;
    --bs-light-rgb: 255, 250, 238;
    --bs-border-color: 50, 41, 56;
    --bs-border-radius: 0;
    --bs-danger-rgb: 216, 1, 60;
    --bs-danger: #D8013C;

    --color-navy: #428496;
    --color-light-blue: #B1E0DF;
}

html {
    height: 100vh;
    overflow: hidden;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    margin-top: 90px;
    padding-bottom: 90px;
}

[required]::after {
    content: '*';
    color: var(--bs-danger)
}

#main-content {
    flex-grow: 1;
}

.full-h-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.btn {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 2rem;
    --bs-btn-border-width: 4px;
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #E5771E;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: #E5771E;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: #E5771E;
    --bs-btn-disabled-border-color: transparent;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.btn.btn-sm {
    --bs-btn-padding-x: 0.875rem;
    --bs-btn-padding-y: 0.437rem;
    --bs-btn-font-size: 0.75rem;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-color: #FFFAEE;
}

.btn-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--bs-primary);
}

.btn-white {
    --bs-btn-border-color: #fffaee;
}

.btn-danger {
    --bs-btn-border-color: var(--bs-danger);
}

.sa-primary {
    background-color: var(--bs-primary) !important;
    color: rgb(var(--bs-light-rgb)) !important;
}

.sa-primary:hover, .sa-primary:active {
    background-color: #E5771E !important;
}

.sa-secondary {
    background-color: transparent !important;
    color: var(--bs-primary) !important;
    border: 4px solid var(--bs-primary);
}

.sa-secondary:hover {
    background-color: transparent !important;
    color: var(--bs-primary) !important;
    border: 4px solid var(--bs-primary);
}

.sa-danger {
    background-color: var(--bs-danger) !important;
    color: #FFFAEE !important;
}

.pagination {
    --bs-pagination-bg: #FFFAEE;
    --bs-pagination-color: var(--bs-primary);
    --bs-pagination-hover-bg: #E5771E;
    --bs-pagination-hover-color: #FFFAEE;
    --bs-pagination-focus-bg: #E5771E;
    --bs-pagination-focus-color: #FFFAEE;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(229, 119, 30, 0.25);
    --bs-pagination-active-bg: #E5771E;
    --bs-pagination-active-color: #FFFAEE;
}

table tr th, table tr td {
    white-space: nowrap;
}

.cell-min-w {
    width: 1%;
    white-space: nowrap;
}

.pb-15 {
    padding-bottom: 9rem !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

div:where(.swal2-container) div:where(.swal2-popup) {
    font-size: 16px !important;
}

tr.clickable:hover {
    cursor: pointer;
    background-color: #E5771E;
    color: #FFFAEE;
    border-color: var(--bs-primary);
}

.form-control {
    padding: 0.375rem 1rem;
    height: 60px;
}

.form-control.form-control-sm {
    padding: 0.25rem 0.75rem;
    height: 40px;
    font-size: 0.75rem;
}

.faq-image {
    width: 100%;
}

.text-navy {
    color: var(--color-navy) !important;
}

.bg-light-blue {
    background-color: var(--color-light-blue) !important;
}

.mirror-x {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.ps-80px {
    padding-left: 80px !important;
}

.max-w-200px {
    max-width: 200px !important;
}

.exam-answer-btn {
    border: 0;
    background-color: var(--exam-answer-bg-color, gray);
}

.exam-answer-btn:hover {
    filter: brightness(90%);
}

.contrast-50 {
    filter: contrast(40%);
}

.swiper {
    background-color: #fffaee;
}

@media only screen and (min-width: 768px) {
    .faq-image {
        max-width: 250px;
        float: left;
        margin-right: 10px;
    }

    .w-md-auto {
        width: auto !important;
    }
}

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

    .ps-lg-120px {
        padding-left: 120px !important;
    }

    .max-w-lg-400px {
        max-width: 400px !important;
    }

    .w-lg-auto {
        width: auto !important;
    }
}

@media only screen and (min-width: 1200px) {
    .account-container-wrapper {
        padding-left: 205px;
        padding-right: 100px;
    }

    .account-container-wrapper.first {
        background-repeat: no-repeat;
        background-position: top 17px right -45px;
        background-size: auto 480px;
        min-height: 650px;
    }

    .account-container-wrapper.bg-lecturer {
        background-image: url(../../web/images/account-bg-lecturer.svg);
    }

    .account-container-wrapper.bg-user {
        background-image: url(../../web/images/account-bg-user.svg);
        background-position: top 17px right -300px;
    }

    .account-container-wrapper.bg-manager {
        background-image: url(../../web/images/account-bg-manager.svg);
    }
}