@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,1,0');

body {
    margin: 0;
    padding: 0;
    background-color: #F7F8FA;
}

a {
    text-decoration: none;
}

.e-primary {
    /*color: #0d6efd !important;*/
    color: #0d6efd;
}

body, a, span, b, h1, h2, h3, h4, h5, h6, label, div, input, option, button {
    font-family: Rethink Sans;
}

*, *::before, *::after {
    box-sizing: border-box;
}

label {
    color: #212529;
}

.custom-alert {
    color: #3833FF;
    border-radius: 4px;
    border: 1px dashed #3833FF;
    padding: 10px;
    background: #ECEBFF;
}

legend {
    width: inherit !important;
    padding: 0 10px !important;
    border-bottom: none !important;
    margin-bottom: auto !important;
    color: #000 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    float: none !important;
}

.number-rating-container {
    max-width: 300px;
    min-width: 300px;
    overflow: auto;
}

.number-rating {
    border: 1px solid #dee2e6;
    cursor: pointer;
}

    .number-rating:hover {
        border: 2px solid #000;
    }

    .number-rating.active {
        border: 2px solid #000;
    }

.number-rating-container {
    max-width: 300px;
    min-width: 300px;
    overflow: auto;
}
fieldset {
    display: block !important;
    padding-block-start: 0.35em !important;
    padding-inline-start: 0.75em !important;
    min-inline-size: min-content !important;
    border-width: 2px !important;
    border-style: groove !important;
    border-color: #000 !important;
    border-image: initial !important;
    padding-block-end: 0.35em !important;
    padding-inline-end: 0.75em !important;
}

input.e-input,
.e-input-group input.e-input,
.e-input-group input,
.e-input-group.e-control-wrapper input.e-input,
.e-input-group.e-control-wrapper input,
input.e-input:focus,
.e-input-group input.e-input:focus,
.e-input-group input:focus,
.e-input-group.e-control-wrapper input.e-input:focus,
.e-input-group.e-control-wrapper input:focus {
    background: none;
}

.e-input-group .e-input[readonly], .e-input-group.e-control-wrapper .e-input[readonly] {
    background: none;
}

    .e-input-group .e-input[readonly] ~ span.e-input-group-icon, .e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-input-group-icon {
        background: none;
    }

.disabled {
    pointer-events: none;
    opacity: 0.6;
}

input.e-input,
.e-input-group input.e-input,
.e-input-group input,
.e-input-group.e-control-wrapper input.e-input,
.e-input-group.e-control-wrapper input,
input.e-input:focus,
.e-input-group input.e-input:focus,
.e-input-group input:focus,
.e-input-group.e-control-wrapper input.e-input:focus,
.e-input-group.e-control-wrapper input:focus {
    background: none;
}

.e-date-wrapper span.e-input-group-icon.e-date-icon.e-icons.e-active {
    color: #6c757d !important;
}

.e-input-group .e-input[readonly] ~ span.e-input-group-icon, .e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-input-group-icon {
    background: none;
}

label {
    font-weight: 600;
}

span {
    font-family: Rethink Sans;
}

.form-check-input:checked {
    background-color: #3833FF;
}

.cursor-pointer {
    cursor: pointer;
}

.form-control {
    border: 1px solid #EBEDF0;
}

.form-select {
    border: 1px solid #EBEDF0;
}

.e-control-wrapper {
    border: 1px solid #EBEDF0 !important;
}

    .e-control-wrapper > .e-control {
        border: 0px !important;
    }

.profile-pic.Circle {
    border-radius: 50%;
}

.profile-pic.Square {
    border-radius: 0%;
}
.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    margin: 8px 8px;
    color: #3833FF;
}

    /*.hr-sect:before,*/
    .hr-sect:after {
        content: "";
        flex-grow: 1;
        background: #3833FF;
        height: 1px;
        font-size: 0px;
        line-height: 0px;
        margin: 0px 8px;
    }

.dropdown-menu-animate-up {
    animation: animation-dropdown-menu-fade-in 0.5s ease 1, animation-dropdown-menu-move-up 0.5s ease-out 1;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Rethink Sans;
}

@keyframes animation-dropdown-menu-move-up-scroll {
    from {
        top: 71px;
    }

    to {
        top: 70px;
    }
}

@keyframes animation-dropdown-menu-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.flex-0 {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0%;
}

.flex-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.rounded-corners {
    border-radius: 16px 16px 16px 16px !important;
}

.text-theme-color {
    color: #3833FF;
}

.user-menu {
    color: #ACB1C6;
}

.user-img {
    border: 1px solid #E7E8F1;
}

.notification-btn {
    border: 1px solid #E7E8F1;
    display: flex;
    align-items: center;
    padding: 7px;
    color: #ACB1C6;
}


    .notification-btn:focus {
        outline: none;
        box-shadow: none;
    }

    .notification-btn:active {
        outline: none;
        box-shadow: none;
    }

        .notification-btn:active:focus {
            outline: none;
            box-shadow: none;
        }

.navbar {
    display: flex !important;
    justify-content: end !important;
    flex-direction: row !important;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    align-items: center;
    gap: 15px;
}

.main-button {
    /*width: 124px;*/
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: solid 1px #e7e8f1;
    background-color: #ecebff;
    color: #3833FF;
    font-family: Rethink Sans;
}

.main-button2 {
    color: #fff !important;
    background-color: #3833FF;
    width: auto;
    border: 0;
    padding: 10px;
    border-radius: 8px;
    display: flex;
}

    .main-button:hover {
        color: #3833FF;
        border: 2px solid #3833FF;
    }

.two-card-setup {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    /* flex-wrap: wrap; */
    margin-top: calc(var(--bs-gutter-y)* -1);
    margin-right: calc(var(--bs-gutter-x)* -.5);
    margin-left: calc(var(--bs-gutter-x)* -.5);
}



.card-header {
    /*height: 72px;*/
    background-color: #fff;
    border-radius: 16px 16px 0 0 !important;
    /*box-shadow: 3px 2px 9px 0px rgba(0,0,0,0.23);*/
    color: #000;
    font-weight: 500;
}

.custom-lookup-height {
    height: 69vh;
    max-height: 69vh !important;
}

.custom-card-height {
    height: 69vh !important;
    max-height: 69vh !important;
}

.no-overflow-container {
    height: calc(100vh - 100px);
}

.card-body {
    background-color: #fff;
    border-radius: 0 0 16px 16px;
    /* box-shadow: 3px 2px 9px 0px rgba(0,0,0,0.23);*/
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    /* border: 1px solid rgba(0, 0, 0, .125); */
    border-radius: 16px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 4px 2px 8px rgba(0, 0, 0, 0.06);
}

.sidebar {
    background-color: #fff;
    padding-top: 20px;
    position: fixed;
    overflow-y: auto;
    width: 100%;
    padding-left: 25px;
    padding-right: 25px;
}

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

.menu-item {
    display: block;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    position: relative;
}

    .menu-item > a {
        display: flex;
        align-items: center;
        color: #71839B;
    }
a:not([href]):not([class]), a:not([href]):not([class]):hover {
    color: #71839B;
}
.menu-item > .item-wrapper {
    display: flex;
    align-items: center;
    color: #71839B;
}


    .menu-item .material-symbols-rounded {
        margin-right: 10px;
    }

.menu-title {
    font-family: Rethink Sans;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.14;
    letter-spacing: 0.28px;
    color: #71839B;
    display: flex;
    align-items: center;
}

.submenu {
    list-style: none;
    margin: 0;
    display: none;
    position: relative;
}

    .submenu.expanded {
        display: block;
    }

.has-submenu > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-item {
    color: #0046ff;
}

    .menu-item.expanded.is-parent > a {
        background: #ECEBFF;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
    }

    .menu-item.expanded.is-parent > .item-wrapper {
        background: #ECEBFF;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
    }

    .menu-item.is-parent:hover > a {
        background: #ECEBFF;
        border-radius: 8px;
    }

    .menu-item.is-parent:hover > .item-wrapper {
        background: #ECEBFF;
        border-radius: 8px;
    }

    .menu-item:hover > a > .menu-title {
        color: #3833FF;
    }

    .menu-item:hover > .item-wrapper > .menu-title {
        color: #3833FF;
    }

    .menu-item > a {
        margin-top: 5px;
        padding: 12px 20px;
        display: flex;
        justify-content: space-between;
    }

    .menu-item > .item-wrapper {
        margin-top: 5px;
        padding: 12px 20px;
        display: flex;
        justify-content: space-between;
    }

    .menu-item.expanded.is-parent > a > .menu-title {
        background: #ECEBFF;
        border-radius: 8px;
        color: #3833FF;
    }

    .menu-item.expanded.is-parent > .item-wrapper > .menu-title {
        background: #ECEBFF;
        border-radius: 8px;
        color: #3833FF;
    }

    .menu-item.expanded.is-parent > a > .menu-title {
        background: #ECEBFF;
        border-radius: 8px;
        color: #3833FF;
    }

    .menu-item.expanded.is-parent > .item-wrapper > .menu-title {
        background: #ECEBFF;
        border-radius: 8px;
        color: #3833FF;
    }

    .menu-item.expanded.is-parent > a > .menu-title > span {
        background: #ECEBFF;
        border-radius: 8px;
        color: #3833FF;
    }

    .menu-item.expanded.is-parent > .item-wrapper > .menu-title > span {
        background: #ECEBFF;
        border-radius: 8px;
        color: #3833FF;
    }

    .menu-item.active > a > .menu-title {
        color: #3833FF;
    }

    .menu-item.active > .item-wrapper > .menu-title {
        color: #3833FF;
    }

    .menu-item.expanded > a {
        color: #3833FF;
    }

    .menu-item.expanded > .item-wrapper {
        color: #3833FF;
    }



.icon-form {
    height: 85px;
    width: 85px;
    border: 1px dashed;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.menu-icon {
    height: 75px;
    width: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
}
/*.submenu::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 20px;
    left: 30px;
    border-left: 2px solid #3833FF;
}*/


.submenu-item {
    position: relative;
}

/* .submenu-item::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -10px;
        width: 10px;
        border-top: 2px solid #71839B;
    }*/


*, *::before, *::after {
    box-sizing: border-box;
}


#main-wrapper {
    min-height: 100vh;
}

.left-sidebar {
    width: 350px;
    border-right: 1px solid var(--bs-border-color);
    flex-shrink: 0;
    background: var(--bs-body-bg);
    z-index: 99;
    transition: 0.2s ease-in;
    position: fixed;
    left: 0;
    right: 0;
    /*height: 100%;*/
}

.with-vertical {
    display: block;
}

.brand-logo {
    min-height: 70px;
    padding: 0px 24px 0 24px;
}

.text-nowrap {
    white-space: nowrap !important;
}


.topbar {
    position: fixed;
    top: 0;
    right: 0;
    width: calc(100% - 350px);
    background: var(--bs-body-bg);
    z-index: 9;
    padding: 0 25px;
}

.body-wrapper {
    min-height: 100vh;
    padding-top: calc(70px + 30px);
    background-color: #F7F8FA;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 30px;
}


.e-sidebar {
    height: calc(100vh - 70px) !important;
    position: relative !important;
    width: 100% !important;
    background: #fff !important;
    transform: none !important;
    display: block !important;
    visibility: visible !important;
    /*padding: 24px 24px 0 24px;*/
}




/*@media screen and (min-width: 1300px) {
    .topbar {*/
/*width: calc(100% - 350px);*/
/*border-bottom: 1px solid var(--bs-border-color);
    }

    .left-sidebar.menu-collapsed + .page-wrapper {
        margin-left: 0;
    }

    .left-sidebar.menu-collapsed + .topbar {
        width: 100% !important;
    }

    .left-sidebar.menu-expanded + .topbar {
        width: calc(100% - 350px);
    }

    .left-sidebar.menu-expanded + .page-wrapper {
        margin-left: 350px;
    }
}*/
.topbar {
    border-bottom: 1px solid var(--bs-border-color);
}

    .topbar .navbar {
        min-height: 70px;
    }

.p-0 {
    padding: 0 !important;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #c0c0c0;
}

@media screen and (min-width: 992px) {
    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
}



.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0.5rem;
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
    --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
    --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
    --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-padding-y: 0.3359375rem;
    --bs-navbar-brand-margin-end: 1rem;
    --bs-navbar-brand-font-size: 1.09375rem;
    --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-nav-link-padding-x: 0.5rem;
    --bs-navbar-toggler-padding-y: 0.25rem;
    --bs-navbar-toggler-padding-x: 0.75rem;
    --bs-navbar-toggler-font-size: 1.09375rem;
    --bs-navbar-toggler-icon-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2890, 106, 133, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
    --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
    --bs-navbar-toggler-border-radius: 7px;
    --bs-navbar-toggler-focus-width: 0.25rem;
    --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}

html .container-fluid,
html .container-sm,
html .container-md,
html .container-lg,
html .container-xl,
html .container-xxl {
    /*max-width: 1200px;*/
    margin: 0 auto;
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* 0.5);
    padding-left: calc(var(--bs-gutter-x)* 0.5);
    margin-right: auto;
    margin-left: auto;
}

.page-wrapper .body-wrapper >
.container-fluid, .page-wrapper .body-wrapper >
.container-sm, .page-wrapper .body-wrapper >
.container-md, .page-wrapper .body-wrapper >
.container-lg, .page-wrapper .body-wrapper >
.container-xl, .page-wrapper .body-wrapper >
.container-xxl {
    transition: 0.2s ease-in;
    padding: 0 24px;
}

body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

:root {
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1300px;
    --bs-breakpoint-xxl: 1400px;
}

:root,
[data-bs-theme=light] {
    --bs-blue: #5d87ff;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #fa896b;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffae1f;
    --bs-green: #13deb9;
    --bs-teal: #20c997;
    --bs-cyan: #539bff;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #2a3547;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f6f9fc;
    --bs-gray-200: #eaeff4;
    --bs-gray-300: #dfe5ef;
    --bs-gray-400: #7c8fac;
    --bs-gray-500: #5a6a85;
    --bs-gray-600: #2a3547;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #5d87ff;
    --bs-secondary: #49beff;
    --bs-success: #13deb9;
    --bs-info: #539bff;
    --bs-warning: #ffae1f;
    --bs-danger: #fa896b;
    --bs-light: #f6f9fc;
    --bs-dark: #2a3547;
    --bs-muted: #5a6a85;
    --bs-indigo: #6610f2;
    --bs-light-indigo: #ebf3fe;
    --bs-primary-rgb: 93, 135, 255;
    --bs-secondary-rgb: 73, 190, 255;
    --bs-success-rgb: 19, 222, 185;
    --bs-info-rgb: 83, 155, 255;
    --bs-warning-rgb: 255, 174, 31;
    --bs-danger-rgb: 250, 137, 107;
    --bs-light-rgb: 246, 249, 252;
    --bs-dark-rgb: 42, 53, 71;
    --bs-muted-rgb: 90, 106, 133;
    --bs-indigo-rgb: 102, 16, 242;
    --bs-light-indigo-rgb: 235, 243, 254;
    --bs-primary-text-emphasis: shade-color(#5d87ff, 60%);
    --bs-secondary-text-emphasis: shade-color(#49beff, 60%);
    --bs-success-text-emphasis: shade-color(#13deb9, 60%);
    --bs-info-text-emphasis: shade-color(#539bff, 60%);
    --bs-warning-text-emphasis: shade-color(#ffae1f, 60%);
    --bs-danger-text-emphasis: shade-color(#fa896b, 60%);
    --bs-light-text-emphasis: #f6f9fc;
    --bs-dark-text-emphasis: #2a3547;
    --bs-primary-bg-subtle: #ecf2ff;
    --bs-secondary-bg-subtle: #e8f7ff;
    --bs-success-bg-subtle: #e6fffa;
    --bs-info-bg-subtle: #ebf3fe;
    --bs-warning-bg-subtle: #fef5e5;
    --bs-danger-bg-subtle: #fbf2ef;
    --bs-light-bg-subtle: #f6f9fc;
    --bs-dark-bg-subtle: #2a3547;
    --bs-primary-border-subtle: #becfff;
    --bs-secondary-border-subtle: #b6e5ff;
    --bs-success-border-subtle: #a1f2e3;
    --bs-info-border-subtle: #bad7ff;
    --bs-warning-border-subtle: #ffdfa5;
    --bs-danger-border-subtle: #fdd0c4;
    --bs-light-border-subtle: #eaeff4;
    --bs-dark-border-subtle: #5a6a85;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: "Plus Jakarta Sans", sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.875rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #5a6a85;
    --bs-body-color-rgb: 90, 106, 133;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(90, 106, 133, 0.75);
    --bs-secondary-color-rgb: 90, 106, 133;
    --bs-secondary-bg: #eaeff4;
    --bs-secondary-bg-rgb: 234, 239, 244;
    --bs-tertiary-color: rgba(90, 106, 133, 0.5);
    --bs-tertiary-color-rgb: 90, 106, 133;
    --bs-tertiary-bg: #f6f9fc;
    --bs-tertiary-bg-rgb: 246, 249, 252;
    --bs-heading-color: #2a3547;
    --bs-link-color: #2a3547;
    --bs-link-color-rgb: 42, 53, 71;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #5d87ff;
    --bs-link-hover-color-rgb: 93, 135, 255;
    --bs-code-color: #d63384;
    --bs-highlight-color: #5a6a85;
    --bs-highlight-bg: #ffefd2;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #ebf1f6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 7px;
    --bs-border-radius-sm: 5px;
    --bs-border-radius-lg: 15px;
    --bs-border-radius-xl: 12px;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.12);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-box-shadow-inset: unset;
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(93, 135, 255, 0.25);
    --bs-form-valid-color: #13deb9;
    --bs-form-valid-border-color: #13deb9;
    --bs-form-invalid-color: #fa896b;
    --bs-form-invalid-border-color: #fa896b;