@import url("https://fonts.googleapis.com/css2?family=Roboto");
:root{
--primary-color: #5d6eff;
--secondary-color: #5365ff;
--tertiary-color: #f2f1ff;
--text-color: #241953;
--url-color: #241953;
--background-color: #f2f3ff;
--content-background-color: #ffffff;
--button-border-radius: 23px;
--card-border-radius: 10px;
--logo-max-height: 70px;
--font-family-body: "Roboto";
--font-family-header: "Roboto";
}

.dropdown.show>.form-control.form-control-solid, .form-control.form-control-solid.active, .form-control.form-control-solid.focus, .form-control.form-control-solid:active, .form-control.form-control-solid:focus {
    background-color: var(--content-background-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-color) !important;
    transition: color .2s ease,background-color .2s ease !important;
    border-width: 1px !important;
}

.form-control.form-control-solid, .form-select.form-select-solid{
    background-color: var(--content-background-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-color) !important;
    transition: color .2s ease,background-color .2s ease !important;
    border-width: 1px !important;
    margin-bottom: 2px !important;
}

.rounded {
    border-radius: var(--card-border-radius) !important;
}

.form-check.form-check-solid .form-check-input {
    border-width: 1px !important;
}

.select2-container--bootstrap5.select2-container--focus .form-select-solid, .select2-container--bootstrap5.select2-container--open .form-select-solid {
    background-color: var(--content-background-color) !important;
    border-color: var(--primary-color) !important;
}

.dropdown.show>.form-select.form-select-solid, .form-select.form-select-solid.active, .form-select.form-select-solid.focus, .form-select.form-select-solid:active, .form-select.form-select-solid:focus {
    background-color: var(--content-background-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-color) !important;
}

body {
    font-family: var(--font-family-body) !important;
}

body, .bg-body {
    background-color: var(--content-background-color) !important;
}

.flex-root{
    background-color: var(--background-color);
}

.text-dark{
    color: #222221 !important;
    font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-header) !important;
    font-weight: 600 !important;
}

.btn-primary{
    color: #FFFFFF  !important;
    font-weight: 600;
    background-color: var(--primary-color) !important;
    border-radius: var(--button-border-radius);
}
.btn.btn-lg.btn-light-primary {
    border: 1px solid var(--primary-color) !important;
    background-color: #FFFFFF !important;
    border-radius: var(--button-border-radius);
}
.btn.btn-lg.btn-light-primary:hover, .btn.btn-lg.btn-light-primary:focus {
    background-color: var(--primary-color) !important;
    color: #FFFFFF !important;
}

.btn.btn-lg.btn-primary:hover, .btn.btn-lg.btn-primary:focus {
    background-color: var(--secondary-color) !important;
    color: #FFFFFF !important;
}
.text-center .link-primary {
    color: var(--text-color);
}
a {
    color: var(--url-color) !important;
}

label > a {
    text-decoration: underline;
}

i.text-primary {
    color: var(--primary-color) !important;
}
i.text-info {
    color:var(--primary-color) !important;
}
.form-check.form-check-solid .form-check-input:checked {
    background-color: var(--primary-color);
}
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected {
    background-color: var(--primary-color);
    color: #fff;
}
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted {
    color: #ffff !important;
    background-color: var(--primary-color) !important;
}
label > a {
    text-decoration: underline;
}

.badge-light-primary {
    color: var(--primary-color) !important;
    background-color: var(--tertiary-color) !important;
}

i.text-primary {
    color: var(--primary-color) !important;
}
.badge-light-info {
    color: var(--primary-color) !important;
    background-color: var(--tertiary-color) !important;
}
i.text-info {
    color:var(--primary-color) !important;
}
.form-check.form-check-solid .form-check-input:checked {
    background-color: var(--primary-color);
}
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected {
    background-color: var(--primary-color);
    color: #fff;
}
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted {
    color: #ffff !important;
    background-color: var(--primary-color) !important;
}

.logo-primary {
    max-height: var(--logo-max-height)px;
}