:root , [data-bs-theme=light] {
    /** primary **/
    --color-primary: #3a51c1;
    --color-primary-tint: #737df5;
    --color-primary-shade: #002990;
    --color-primary-opacity: rgba(58, 81, 193, 0.08);

    /** secondary **/
    --color-secondary: #658ce3;
    --color-secondary-tint: #9abcff;
    --color-secondary-shade: #2b5fb1;
    --color-secondary-opacity: rgba(101, 140, 227, 0.08);

    /** tertiary **/
    --color-tertiary: #23a5c2;
    --color-tertiary-tint: #67d7f5;
    --color-tertiary-shade: #007692;
    --color-tertiary-opacity: rgba(35, 165, 194, 0.08);

    /** quaternary **/
    --color-quaternary: #ec8978;
    --color-quaternary-tint: #ffbaa7;
    --color-quaternary-shade: #b65a4c;
    --color-quaternary-opacity: rgba(236, 137, 120, 0.08);

    /** success **/
    --color-success: #20aa65;
    --color-success-tint: #5fdd93;
    --color-success-shade: #007a3a;
    --color-success-opacity: rgba(32, 170, 101, 0.08);

    /** warning **/
    --color-warning: #ffaa00;
    --color-warning-tint: #ffdc4a;
    --color-warning-shade: #c67b00;
    --color-warning-opacity: rgba(255, 170, 0, 0.08);

    /** danger **/
    --color-danger: #f26060;
    --color-danger-tint: #ff928d;
    --color-danger-shade: #ba2c36;
    --color-danger-opacity: rgba(242, 96, 96, 0.08);

    /** light **/
    --color-light: #f4f5f8;
    --color-light-tint: #f5f6f9;
    --color-light-shade: #d7d8da;
    --color-light-opacity: rgba(244, 245, 248, 0.08);

    /** medium **/
    --color-medium: #92949c;
    --color-medium-tint: #9d9fa6;
    --color-medium-shade: #808289;
    --color-medium-opacity: rgba(146, 148, 156, 0.08);

    /** dark **/
    --color-dark: #222428;
    --color-dark-tint: #383a3e;
    --color-dark-shade: #1e2023;
    --color-dark-opacity: rgba(34, 36, 40, 0.08);

    /** black **/
    --color-black: #000000;
    --color-black-opacity: rgba(0, 0, 0, 0.08);

    /** white **/
    --color-white: #ffffff;
    --color-white-opacity: rgba(255, 255, 255, 0.08);

    /** text **/
    --color-md-text: #545454;
    --color-md-text-opacity: rgba(84, 84, 84, 0.08);

    /** other **/
    --color-border: #dde2e9;
    --color-menu-hover: rgba(115, 125, 245, 0.6);
    --color-submenu-active: rgba(58, 81, 193, 0.16);
}

#page-container {
    background-color: var(--color-white);
}

#main-container .content {
    max-width: 400px !important;
}

.content-header, #page-footer .content {
    max-width: unset !important;
}

h2, h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 29px;
}

h3 {
    color: var(--color-medium);
    margin-bottom: 0;
}

h2 {
    color: var(--color-black);
    margin-bottom: 32px;
}

.material-symbols-outlined {
    font-size: 20px;
    align-self: center;
    color: var(--color-medium);
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1;
}

footer {
    color: var(--color-medium);
}

a, a.footer-link:hover {
    color: var(--color-primary);
}

a.footer-link {
    color: var(--color-medium);
}

a:not(.dropdown-item):not(.btn):hover {
    opacity: .8;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #c6c8cc;
    border-radius: 15px;
}

::-webkit-scrollbar-thumb {
    background-color: #c6c8cc;
    border-radius: 15px;
}

::-webkit-scrollbar-track {
    background-color: white;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #adb5cd;
}

.container {
    --bs-gutter-x: 0;
}

.row {
    --bs-gutter-x: 0;
}

.row>* {
    padding: 0;
    margin: 0;
}

@media (max-width: 768px) {
    .row:not(.g-sm):not(.g-0) {
        --bs-gutter-x: 0;
    }
    .row:not(.g-sm):not(.g-0)>.col, .row:not(.g-sm):not(.g-0)>[class*=col-] {
        padding-left: 0;
        padding-right: 0;
    }
}

.btn-primary {
    --bs-btn-color: var(--color-white);
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-primary-shade);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: 68,111,221;
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: #1c45ac;
    --bs-btn-active-border-color: #1a41a1;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--color-white);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 13px;
    padding: 7px 15px;
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-medium);
    --bs-btn-border-color: #0000001A;
    --bs-btn-hover-color: var(--color-medium);
    --bs-btn-hover-bg: var(--color-light);
    --bs-btn-hover-border-color: #0000001A;
    --bs-btn-focus-shadow-rgb: none;
    --bs-btn-active-color: var(--color-medium);
    --bs-btn-active-bg: var(--color-light);
    --bs-btn-active-border-color: #0000001A;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #475569;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #475569;
    --bs-gradient: none;
    font-size: 13px;
    font-weight: 400;
    padding: 7px 15px;
    border-radius: 4px;
}

a img {
    margin-right: 4px;
}

.input-row  {
    --bs-gutter-x: 0;
    width: 100%;
    border: 1px solid #0000001A;
    border-radius: 4px;
    display: flex;
}

.input-row .form-label {
    align-content: center;
    margin-bottom: 0;
    padding: 0 0 0 16px;
    font-weight: 700;
    white-space: nowrap;
}

.input-row .action {
    margin-right: 6px;
    cursor: pointer;
}

.form-control {
    border: 0;
    padding: 8px 8px 8px 16px;
    border-radius: 0 4px 4px 0;
    background-color: transparent !important;
}

.form-control:focus {
    box-shadow: none;
}

.input-row:has(input:focus:not(:read-only)) {
    border-color: var(--color-primary);
}

.input-row:has(input:read-only) {
    background-color: var(--color-light);
}

p {
    font-size: 13px;
    color: var(--color-medium);
}

p .material-symbols-outlined {
    font-size: 18px;
}

p a {
    color: var(--color-medium);
    text-decoration: underline !important;
    text-decoration-thickness: 0.0625rem !important;
    text-underline-offset: 0.25rem !important;
    word-break: break-word;
    line-height: 1.25rem;
}

p a:hover {
    color: var(--color-primary);
}

.password-rules div {
    font-size: 13px;
    display: flex;
    align-items: center;
    color: var(--color-medium);
}

.password-rules .material-symbols-outlined {
    font-size: 16px;
    margin-right: 4px;
}

.password-rules .completed .material-symbols-outlined {
    color: var(--color-success-tint);
    font-variation-settings: 'FILL' 1;
}

.alert {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 8px;
    --bs-alert-padding-y: 8px;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border: 1px solid #3A51C114;
    --bs-alert-border-radius: .5rem;
    --bs-alert-link-color: inherit;
    position: relative;
    padding: 8px;
    margin-bottom: 0;
    color: var(--color-medium);
    background-color: var(--color-light);
    border-radius: 4px;
}

.alert.error .material-symbols-outlined {
    color: var(--color-danger-tint);
}

.alert.success .material-symbols-outlined {
    color: var(--color-success-tint);
}

.dropdown-menu {
    --bs-dropdown-min-width: unset;
    --bs-dropdown-padding-y: 0;
}

.dropdown-item.selected {
    background-color: var(--color-primary);
    color: white;
}

.dropdown-item:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.dropdown-item:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.item-dropdown {
    color: var(--color-medium);
}

.item-dropdown::before {
    content: "\f107";
    opacity: .4;
}

.item-dropdown::before {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    display: block;
    margin-top: -0.5rem;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    font-family: "Font Awesome 6 Free","Font Awesome 6 Pro", serif;
    font-weight: 900;
    font-size: .75rem;
    transition: opacity .25s ease-out,transform .25s ease-out;
}

.dropdown>.show .item-dropdown::before {
    transform: rotate(180deg);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

input:read-only:-webkit-autofill,
input:read-only:-webkit-autofill:hover,
input:read-only:-webkit-autofill:focus,
input:read-only:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--color-light) inset !important;
}

.color-primary {
    color: var(--color-primary);
}