* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", "Helvetica Neue", "Lucida Grande", "Roboto", "Ebrima", "Nirmala UI", "Gadugi", "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", "Tunga", "Lao UI", "Raavi", "Iskoola Pota", "Latha", "Leelawadee", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
}

html,
body {
    background-color: #ffffff;
    background-image: url("illustration.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative; /* Needed for absolute positioning of the overlay */
    height: 100vh; /* Ensure the body covers the full viewport height */
    overflow: hidden; /* Prevent scrollbars caused by the overlay */
}

/* Overlay to dim the background */
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity here (0.3 = 30% dim) */
    z-index: 1; /* Place the overlay behind the sections */
    pointer-events: none; /* Ensure the overlay doesn't block interactions */
}

section {
    position: relative; /* Ensure sections are above the overlay */
    z-index: 2; /* Place sections above the overlay */
    display: flex; /* Use Flexbox for layout */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Full viewport height */
    width: 100%; /* Full viewport width */
    max-width: 100%; /* Ensure it doesn't exceed the viewport width */
}
.title {
    line-height: 1.75rem;
    color: #1b1b1b;
    font-size: 1.5rem;
    font-weight: 600;
}

.auth-wrapper {
    max-width: 440px;
    width: calc(100% - 40px);
    padding: 44px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    min-width: 320px;
}

.opts {
    padding: 10px 44px;
    max-width: 440px;
    cursor: pointer;
    margin: auto;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.opts:hover {
    background-color: rgba(0, 0, 0, .1);
}

.input {
    padding: 4px 8px;
    border-style: solid;
    border-width: 2px;
    border-color: rgba(0, 0, 0, .4);
    background-color: rgba(255, 255, 255, .4);
    height: 32px;
    height: 2rem;
    padding: 6px 10px;
    padding-left: 10px;
    border-width: 1px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-color: #666;
    border-color: rgba(0, 0, 0, .6);
    height: 36px;
    outline: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    background-color: transparent;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    padding-left: 0;
    width: calc(100% - 20px);
}

.input:hover {
    border-color: #323232;
    border-color: rgba(0, 0, 0, .8);
}

.input::placeholder {
    font-size: 15px;
}

.mb-0 {
    margin-bottom: 0;
}

a.link {
    text-decoration: none;
    color: #0067b8
}

a:hover {
    text-decoration: underline !important;
    color: #666;
}

a:focus {
    border: 1px dotted #000;
    text-decoration: underline !important;
}

.btn {
    margin: 0 0 0 auto;
    display: block;
    background-color: #0067b8;
    color: #fff;
    border: 2px solid #0067b8;
    padding: 5px 30px;
    font-size: 15px;
    cursor: pointer;
}

.btn:hover {
    background-color: #005da6;
}

.has-icon {
    display: flex;
    gap: 5px;
    align-items: center;
}

.mb-16 {
    margin-bottom: 16px;
}

.has-icon .icon {
    display: inline-flex;
}

.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow: visible;
    z-index: 99;
    clear: both;
    min-height: 28px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: end;
}

.footer a,
.footer span {
    color: #ffffff;
    font-size: 12px;
    line-height: 28px;
    margin-left: 8px;
    margin-right: 8px;
    text-decoration: none;
}

.footer span {
    font-size: 20px;
    line-height: 20px;
}

.footer a:hover {
    text-decoration: underline;
}

.d-none {
    display: none !important;
}

.back {
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    background-color: unset;
    cursor: pointer;
}

.identity {
    display: inline-flex;
    gap: 5px;
}

.d-block {
    display: block;
}

.w-100 {
    width: 100%;
}

.back:hover {
    background-color: #e6e6e6;
    background-color: rgba(0, 0, 0, .1);
}

.mt-16 {
    margin-top: 16px;
}

.mb-16 {
    margin-bottom: 16px;
}

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

.error-inp {
    border-bottom-color: var(--error) !important;
}

.btn-group {
    text-align: right;
    width: 100%;
    margin: 16px 0;
}

.btn-group>.btn {
    display: inline;
}

.btn-group>.btn:not(:last-child) {
    margin-right: 5px;
}

.btn-sec {
    background-color: #b2b2b2;
    color: #000;
    border-color: #b2b2b2;
}

.btn-sec:hover {
    background-color: rgba(0, 0, 0, .3);
}

#btn_final:hover {
    text-decoration: underline;
}

.text-title {
    font-size: 1.5rem;
}

label.has-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.checkbox {
    width: 20px;
    height: 20px;
}

.p {
    font-weight: 400;
    font-size: 15px;
    margin: 16px 0;
}

.fs-13 {
    font-size: 13px;
}

#user_identity {
    font-size: 15px;
    color: #1b1b1b;
}

img {
    vertical-align: middle;
    max-height: 36px;
}

@media screen and (max-width: 600px) {
    html,
    body {
        background-color: #fff;
    }

    section {
        display: block !important;
    }

    .auth-wrapper {
        box-shadow: none !important;
        padding: 24px !important;
        width: unset !important;
        max-width: unset !important;
    }

    .opts {
        box-shadow: none !important;
        padding: 8px 24px !important;
        border: 1px solid #999;
        max-width: calc(100% - 48px);
        margin: 12% auto !important;
    }

    .footer {
        justify-content: start;
    }
}

:root {
    --error: #e81123;
}