[data-bs-theme=origin-blue] {
    /* Variables */
    /* Resetting native style */
    --bs-body-bg: #CFCFCF;
    --bs-body-bg-rgb: 207, 207, 207;
    --bs-primary: #1F4670;
    --bs-primary-rgb: 31, 70, 112;
    --bs-secondary: #7E0303;
    --bs-secondary-rgb: 126, 3, 3;
}
[data-bs-theme=origin-blue] .tone-25 {
    background-image: linear-gradient(to bottom, #1F4670 25%, rgba(255, 255, 255, 0) 0%);
}
[data-bs-theme=origin-blue] .tone-45 {
    background-image: linear-gradient(to bottom, #1F4670 45%, rgba(255, 255, 255, 0) 0%);
}
[data-bs-theme=origin-blue] .tone-55 {
    background-image: linear-gradient(to bottom, #1F4670 55%, rgba(255, 255, 255, 0) 0%);
}
[data-bs-theme=origin-blue] [class^=tone] {
    background-repeat: no-repeat;
    background-attachment: fixed;
}

[data-bs-theme=origin-red] {
    /* Variables */
    /* Resetting native style */
    --bs-body-bg: #CFCFCF;
    --bs-body-bg-rgb: 207, 207, 207;
    --bs-primary: #7E0303;
    --bs-primary-rgb: 126, 3, 3;
    --bs-secondary: #7E0303;
    --bs-secondary-rgb: 126, 3, 3;
}
[data-bs-theme=origin-red] .page-desc, [data-bs-theme=origin-red] .page-badge {
    display: none;
}
[data-bs-theme=origin-red] .tone-25 {
    background-image: linear-gradient(to bottom, #7E0303 25%, rgba(255, 255, 255, 0) 0%);
}
[data-bs-theme=origin-red] .tone-45 {
    background-image: linear-gradient(to bottom, #7E0303 45%, rgba(255, 255, 255, 0) 0%);
}
[data-bs-theme=origin-red] .tone-55 {
    background-image: linear-gradient(to bottom, #7E0303 55%, rgba(255, 255, 255, 0) 0%);
}
[data-bs-theme=origin-red] [class^=tone] {
    background-repeat: no-repeat;
    background-attachment: fixed;
}

[data-bs-theme=origin-grey] {
    /* Variables */
    /* Resetting native style */
    --bs-body-bg: #CFCFCF;
    --bs-body-bg-rgb: 207, 207, 207;
    --bs-primary: #7D7D7D;
    --bs-primary-rgb: 125, 125, 125;
    --bs-secondary: #7E0303;
    --bs-secondary-rgb: 126, 3, 3;
}
[data-bs-theme=origin-grey] .tone-25 {
    background-image: linear-gradient(to bottom, #7D7D7D 25%, rgba(255, 255, 255, 0) 0%);
}
[data-bs-theme=origin-grey] .tone-45 {
    background-image: linear-gradient(to bottom, rgb(130, 130, 130) 0, rgba(255, 255, 255, 0) 45%), linear-gradient(to bottom, rgb(88, 88, 88) 45%, rgba(255, 255, 255, 0) 0%);
}
[data-bs-theme=origin-grey] .tone-55 {
    background-image: linear-gradient(to bottom, #7D7D7D 55%, rgba(255, 255, 255, 0) 0%);
}
[data-bs-theme=origin-grey] [class^=tone] {
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Page Badge */
.page-badge {
    background-color: #319B77;
    width: 135px;
    height: 100%;
    color: white;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
    left: calc(86vw - 67px);
}

.page-badge::after {
    content: "";
    position: absolute;
    bottom: -12.7px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 67.5px solid transparent;
    border-right: 67.5px solid transparent;
    border-top: 13px solid #319B77;
}

/* Page Badge */
/* Page Footer */
.page-footer {
    grid-area: foot;
    width: 100vw;
    height: 5vh;
}

/* Page Footer */
/* Page Copyright */
.page-copyright {
    color: #585858;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100vw;
}

/* Page Copyright */
/* Announcement */
.mini-announcement {
    background-color: #FFB800;
    color: #585858;
    text-align: center;
    font-size: 16px;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
    border-radius: 10px 10px 0 0;
    position: fixed;
    left: calc(80vw - 93px);
    bottom: 0;
    padding: 0.7rem 1.2rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.mini-announcement::after {
    font: var(--fa-font-regular);
    content: "\f2d0";
    margin-left: 1rem;
}

/* Announcement */
/* Loading Spinner */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    display: none;
}

.spinner {
    border: 5px solid #ccc;
    border-top: 5px solid var(--bs-primary);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* Loading Spinner */
/* By colors */
.btn-deepblue {
    --bs-btn-font-weight: 400;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: #1F4670;
    --bs-btn-border-color: #1F4670;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg:#1c3f65;
    --bs-btn-hover-border-color: #1c3f65;
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #19385a;
    --bs-btn-active-border-color: #19385a;
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: #19385a;
    --bs-btn-disabled-border-color: #19385a;
}

.btn-outline-deepblue {
    --bs-btn-font-weight: 400;
    --bs-btn-color: #1F4670;
    --bs-btn-border-color: #1F4670;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #1c3f65;
    --bs-btn-hover-border-color: #1c3f65;
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #19385a;
    --bs-btn-active-border-color: #19385a;
    --bs-btn-disabled-color: #19385a;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #19385a;
}

/* By types */
.btn-brand {
    background-color: #EAEAEA;
    width: 50px !important;
    height: 50px;
    box-shadow: 0px 12px 20px 0px rgba(88, 88, 88, 0.1490196078);
    border-radius: 50%;
    color: #7E0303;
    font-size: 24px;
}

.btn-brand:hover {
    --bs-btn-bg: #7E0303;
    --bs-btn-color: var(--bs-white);
    --bs-btn-hover-bg: #710303;
}

/* Add any other main styles or components here */
.login-page {
    display: grid;
    grid-template-areas: "head" "main" "foot";
}

.login-header {
    grid-area: head;
    width: 100vw;
    height: 5vh;
}

.login-content {
    grid-area: main;
    width: 100vw;
    height: 90vh;
}

.container-500 {
    max-width: 500px;
    padding: 0 5px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100%;
    color: white;
    position: relative;
}

.login-form {
    color: #1F4670;
    display: flex;
    justify-content: center;
    align-content: flex-end;
    flex-wrap: wrap;
    height: calc(51px + 40vh);
}
.login-form .clip-board {
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    padding: 0.7rem 1.2rem;
    background-color: #EAEAEA;
    border-radius: 10px 10px 10px 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin-bottom: auto;
    color: #1F4670;
}
.login-form .clip-board hr {
    color: initial;
}
.login-form .clip-board .form-control {
    border: none;
    color: inherit;
    background-color: inherit;
}
.login-form .clip-board .form-control:focus {
    box-shadow: none;
    background-color: none;
}
.login-form .clip-board .btn {
    color: inherit;
}
.login-form .clip-board .btn:active {
    border-color: white;
    color: black;
}
.login-form .clip-desc {
    width: 100%;
    color: white;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-form .clip-logo {
    width: 100%;
    color: white;
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-form .clip-logo img {
    width: 70%;
    height: -moz-fit-content;
    height: fit-content;
}

.msg-error {
    color: #7E0303;
    font-weight: 400;
    font-size: 12px;
    line-height: 13.8px;
    margin-top: 1.2rem;
}

.msg-error::before {
    font: var(--fa-font-solid);
    content: "\f06a";
    margin-right: 1rem;
}

.msg-default {
    color: #585858;
    font-weight: 400;
    font-size: 12px;
    line-height: 13.8px;
    margin-top: 1.2rem;
}

.login-button {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.4rem;
}
.login-button .btn {
    width: 100%;
}

.page-msg {
    min-height: 4vh;
}

.page-desc {
    color: #585858;
    font-weight: 400;
    font-size: 16px;
    line-height: 18.4px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 13vh;
}

.page-divider {
    color: #585858;
    text-align: center;
    margin: 2rem 0 0;
    width: 80%;
    display: flex;
    align-items: center;
}

.page-divider::before,
.page-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #585858;
    margin: 0 10px;
}