/* Global */

:root {
    --font-normal: "Montserrat", sans-serif;
    --font-header: "Exo", sans-serif;
    --body-background: #F8F9FC;
    --font-size-default: 14px;
    --font-weight-default: 400;
    --line-height-default: 21px;
    --letter-spacing-default: calc(-0.02em);
    --grid-spacing: 24px;
    /* --text-color: #414860; */
    --text-color: #1F2844;
    --text-error: #B91C1C;
    --button-radius: 100px;
    --button-padding: 12px 28px;
    --button-primary-bg: #1F2844;
    --button-primary-color: #FFFFFF;
    --button-secondary-bg: #E6E9F4;
    --button-secondary-outline: #A1ADD4;
    --button-secondary-color: #1F2844;
    --form-input-height: 44px;
    --form-input-padding: 8px 12px;
    --form-input-gap: 12px;
    --form-input-radius: 8px;
    --form-input-border: 1px solid #D2D5DF;
    --form-input-bg: #FFFFFF;
    --form-input-fsize: 16px;
    --form-input-weight: 500;
    --form-input-lheight: 24px;
    --form-input-color: #414860;
    --form-input-boxshadow: 0 0 0 4px #E6E9F4;
    --dropdown-toggle-bg-pos: 0.75rem center, calc(100% - 0.75rem) center;
    --checkbox-bg: #CD75AA;
    --button-selected-bg: #F5E3EE;
    --navbar-bg: #FFFFFF;
    --progressbar-bg: #D1E8F3;
    --progressbar-width-bg: #1A8EC1;
    --pricing-bg-low: #D1E8F3;
    --pricing-bg-med: #F5E3EE;
    --pricing-bg-high: #F7F2DD;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: var(--text-color);
}

html {
    height: 100%;
}

body {
    font-family: var(--font-normal);
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-default);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-default);
    background-color: var(--body-background);
    color: var(--text-color);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.container {
    padding: 24px;
}

body > .container {
    flex-shrink: 0;
}

.card {
    background-color: var(--body-background);
    padding: var(--grid-spacing);
}

hr {
    border-color: #7d7e81;
}

a {
    text-decoration: unset;
}

.container-white {
    border-radius: 12px;
    border: var(--form-input-border);
    background-color: #FFFFFF;
    padding: 16px;
}

.card-white {
    padding: 12px;
    background-color: #FFFFFF;
    border-radius: 12px;
}

/* Text */

.section-title {
    font-family: var(--font-header);
    font-size: 25px;
    line-height: 30px;
    letter-spacing: 0;
    font-weight: 800;
}

.section-subtitle {
    font-family: var(--font-header);
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0;
    font-weight: 800;
}

.header {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: var(--letter-spacing-default);
    font-weight: 600;
    margin-bottom: 4px;
}

.form-label {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: var(--letter-spacing-default);
    font-weight: 600;
    margin-bottom: 4px;
    width: 100%;
}

.form-extra-label {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: var(--letter-spacing-default);
    font-weight: 400;
    margin-bottom: 0px;
    margin-top: 8px;
    width: 100%;
}

.form-sublabel {
    width: 100%;
    /* margin-bottom: 4px; */
}

.form-label.disabled,
.form-sublabel.disabled {
    color: #BABEC9;
}

.valid-feedback {
    font-size: var(--font-size-default);
    font-weight: 500;
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-default);
    color: var(--text-color);
    margin-bottom: .25rem;
}

.valid-feedback svg {
    fill: #16A34A;
    margin-top: -3px;
}

.submit-invalid-feedback,
.invalid-feedback {
    font-size: var(--font-size-default);
    font-weight: 500;
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-default);
    margin-top: 12px;
    color: var(--text-error);
}

.submit-invalid-feedback span,
.invalid-feedback span {
    color: var(--text-error);
}

.submit-invalid-feedback svg,
.invalid-feedback svg {
    fill: var(--text-error);
}

.form-label-helper {
    cursor: pointer;
}

.form-label-helper svg {
    margin-left: 4px;
    margin-bottom: 3px;
    margin-right: 4px;
}

.textarea-counter {
    margin-top: 12px;
    margin-bottom: unset;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: var(--letter-spacing-default);
    color: #5E6478;
    text-align: end;
}

.readonly-message {
    width: 100%;
    display: none;
    font-size: var(--font-size-default);
    font-weight: 500;
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-default);
    margin-top: 12px;
    color: #5E6478;
}

.readonly-message svg {
    fill: #5E6478;
    margin-top: -3px;
}

/* Form Control */

.input-wrapper {
    margin-top: 12px;
    position: relative;
    display: inline-block;
    width: 100%;
}

.input-wrapper .form-control:-webkit-autofill,
.input-wrapper .form-control:-webkit-autofill:hover,
.input-wrapper .form-control:-webkit-autofill:focus,
.input-wrapper .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #FFFFFF inset !important;
    box-shadow: 0 0 0 30px #FFFFFF inset !important;
}

.input-wrapper::before {
    content: "";
    background-size: 14px !important;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    pointer-events: none;
    transition: background-image 0.3s ease;
}

.input-wrapper::after {
    content: "";
    background-size: 14px !important;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    pointer-events: none;
    transition: background-image 0.3s ease;
}

.input-wrapper .form-control {
    padding: 8px 12px;
    border-radius: 8px;
    border: var(--form-input-border);
    background-color: var(--form-input-bg);
    font-size: var(--form-input-fsize);
    font-weight: var(--form-input-weight);
    line-height: var(--form-input-lheight);
    color: var(--form-input-color);
}

.input-wrapper .form-control:not(:disabled):hover {
    border-color: #7A8FCD;
}

.input-wrapper .form-control:focus {
    border-color: #536BB1;
    box-shadow: var(--form-input-boxshadow);
}

.input-wrapper .form-control::placeholder {
    color: #9A9EAB;
}

.input-wrapper .form-control.is-valid,
.was-validated .input-wrapper .form-control:valid {
    border: var(--form-input-border);
    background-size: 14px;
    background-position: calc(100% - 0.75rem) 0.8rem;
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 14 14" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM10.2437 5.86872C10.5854 5.52701 10.5854 4.97299 10.2437 4.63128C9.90201 4.28957 9.34799 4.28957 9.00628 4.63128L6.125 7.51256L4.99372 6.38128C4.65201 6.03957 4.09799 6.03957 3.75628 6.38128C3.41457 6.72299 3.41457 7.27701 3.75628 7.61872L5.50628 9.36872C5.84799 9.71043 6.40201 9.71043 6.74372 9.36872L10.2437 5.86872Z" fill="%2316A34A"/>%20</svg>');
}

.input-wrapper.tooltip-wrapper .form-control.is-valid,
.was-validated .input-wrapper.tooltip-wrapper .form-control:valid {
    background-position: calc(100% - 2.5rem) 0.8rem;
}

.input-wrapper .form-control.is-invalid,
.was-validated .input-wrapper .form-control:invalid {
    background-image: none;
    border-color: #EF4444;
}

.input-wrapper .form-control.is-invalid:hover,
.was-validated .input-wrapper .form-control:invalid:hover {
    border-color: #c43535;
}

.input-wrapper .form-control.is-invalid:focus,
.was-validated .input-wrapper .form-control:invalid:focus {
    box-shadow: 0 0 0 .25rem rgba(239, 68, 68, .10);
}

.input-wrapper .form-control.is-valid:not([required]),
.was-validated .input-wrapper .form-control:not([required]):valid {
    background-image: unset;
}

.input-wrapper .form-control.is-valid:disabled,
.was-validated .input-wrapper .form-control:disabled:valid {
    background-image: unset;
}

.input-wrapper .form-control.is-valid:focus,
.was-validated .input-wrapper .form-control:valid:focus {
    border-color: #536BB1;
    box-shadow: var(--form-input-boxshadow);
}

.input-wrapper .form-control[required] {
    padding-right: 35px !important;
}

.input-wrapper.dropdown-input .dropdown-toggle.dropdown-readonly {
    cursor: pointer;
    caret-color: transparent;
}

.input-wrapper.dropdown-input::after {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="14" height="14" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> </svg>');
}

.input-wrapper.dropdown-input.show::after {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" /> </svg>');
}

.input-wrapper.dropdown-input .form-control.is-valid,
.was-validated .input-wrapper.dropdown-input .form-control:valid {
    padding-left: 40px;
    background-image: unset;
}

.input-wrapper.dropdown-input.is-valid::before {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 14 14" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM10.2437 5.86872C10.5854 5.52701 10.5854 4.97299 10.2437 4.63128C9.90201 4.28957 9.34799 4.28957 9.00628 4.63128L6.125 7.51256L4.99372 6.38128C4.65201 6.03957 4.09799 6.03957 3.75628 6.38128C3.41457 6.72299 3.41457 7.27701 3.75628 7.61872L5.50628 9.36872C5.84799 9.71043 6.40201 9.71043 6.74372 9.36872L10.2437 5.86872Z" fill="%2316A34A"/>%20</svg>');
}

.input-wrapper.search .form-control {
    padding-left: 40px !important;
}

.input-wrapper.search::before {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="14" height="14" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /> </svg>');
}

.input-wrapper.dropdown-input.search::after {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="14" height="14" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> </svg>');
}

.input-wrapper.dropdown-input.search.show::after {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" /> </svg>');
}

.input-wrapper.dropdown-input.search .form-control.is-valid,
.was-validated .input-wrapper.dropdown-input.search .form-control:valid {
    background-image: unset;
}

.input-wrapper.dropdown-input.search.is-valid::before {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 14 14" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM10.2437 5.86872C10.5854 5.52701 10.5854 4.97299 10.2437 4.63128C9.90201 4.28957 9.34799 4.28957 9.00628 4.63128L6.125 7.51256L4.99372 6.38128C4.65201 6.03957 4.09799 6.03957 3.75628 6.38128C3.41457 6.72299 3.41457 7.27701 3.75628 7.61872L5.50628 9.36872C5.84799 9.71043 6.40201 9.71043 6.74372 9.36872L10.2437 5.86872Z" fill="%2316A34A"/>%20</svg>');
}

.input-wrapper.location .form-control,
.input-wrapper.email .form-control {
    padding-left: 40px !important;
}

.input-wrapper.location::before {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="14" height="14" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" /> </svg>');
}

.input-wrapper.email::before {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" /> </svg>');
}

.input-wrapper.is-invalid + div .invalid-feedback {
    display: block;
}

.input-wrapper textarea.form-control {
    margin-bottom: -8px;
}

.input-wrapper > .form-label-helper {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.dropdown-input-group {
    display: flex;
}

.dropdown-input-group .btn {
    border-radius: 8px 0 0 8px;
    border: var(--form-input-border);
    background-color: #E7E8EF;
    padding: 8px 8px 8px 12px;
}

.dropdown-input-group .dropdown-menu {
    width: fit-content;
    min-width: unset;
}

.dropdown-input-group .dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
    vertical-align: middle;
    margin-bottom: 2px;
    margin-left: 2px;
    transition: background-image 0.3s ease;
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M12 6.40002L8 10.4L4 6.40002" stroke="%23313953"%20stroke-width="1.5"%20stroke-linecap="round"%20stroke-linejoin="round"/>%20</svg>');
}

.dropdown-input-group .dropdown-toggle[aria-expanded="true"]::after {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="none"> <path d="M15 13L10 8L5 13" stroke="%23313953" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/> </svg>') !important;
}

.dropdown-input-group .dropdown-menu li,
.dropdown-input-group .dropdown-item {
    width: fit-content;
}

.dropdown-item.disabled {
    color: gray !important;
    text-align: center;
    font-size: 14px;
}

.dropdown-item.disabled:hover {
    background-color: #FFF;
}

.amount-input-group {
    display: flex;
}

.amount-input-group .input-group-text {
    color: #4B5563;
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-default);
    line-height: 20px;
}

.amount-input-group .form-control {
    border-right-color: #FFF !important;
    clip-path: inset(-5px 1px -5px -5px);
}

.amount-input-group .form-control:not(:disabled):hover + .btn.dropdown-toggle {
    border-color: #7A8FCD;
}

.amount-input-group .form-control:not(:disabled):focus + .btn.dropdown-toggle {
    border-color: #536BB1;
    box-shadow: var(--form-input-boxshadow);
}

.amount-input-group .form-control.is-invalid,
.amount-input-group .form-control.is-invalid + .btn.dropdown-toggle {
    border-color: #EF4444;
}

.amount-input-group .form-control.is-invalid:focus + .btn.dropdown-toggle {
    box-shadow: 0 0 0 .25rem rgba(239, 68, 68, .10);
    border-color: #EF4444;
}

.amount-input-group .form-control.is-invalid:not(:disabled):hover + .btn.dropdown-toggle {
    border-color: #EF4444 !important;
}

.amount-input-group .btn.dropdown-toggle {
    background-color: #FFFFFF;
    border-radius: 0 8px 8px 0;
    border: var(--form-input-border);
    border-left: unset !important;
    padding: 0px 12px 0px 12px;
    font-size: 12px;
    font-weight: var(--font-weight-default);
    line-height: 18px;
    letter-spacing: var(--letter-spacing-default);
    clip-path: inset(-5px -5px -5px 0px);
}

.amount-input-group .btn.dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
    vertical-align: middle;
    margin-bottom: 2px;
    margin-left: 2px;
    transition: background-image 0.3s ease;
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M12 6.40002L8 10.4L4 6.40002" stroke="%23313953"%20stroke-width="1.5"%20stroke-linecap="round"%20stroke-linejoin="round"/>%20</svg>');
}

.amount-input-group .btn.dropdown-toggle[aria-expanded="true"]::after {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="none"> <path d="M15 13L10 8L5 13" stroke="%23313953" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/> </svg>') !important;
}

.amount-input-group .dropdown-menu {
    width: fit-content !important;
    min-width: unset;
}

.amount-input-group .dropdown-menu li,
.amount-input-group .dropdown-menu .dropdown-item {
    width: fit-content;
}

/* Dropdown */
.dropdown-menu {
    width: 100%;
    box-shadow: 0 6px 15px -2px rgba(16, 24, 40, 0.08), 0 6px 15px -2px rgba(16, 24, 40, 0.08);
    border-radius: 8px;
    border: unset;
    transform: translateY(50px) !important;
    padding: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-item {
    padding: 8px;
    border-radius: 8px;
    color: var(--text-color) !important;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: var(--letter-spacing-default);
}

.dropdown-item:not(.no-result):hover {
    background-color: #e9ecef;
}

.dropdown-item:active {
    background-color: #e9ecef;
}

/* Loading Screen */

.loading-screen {
    width: 100%;
    text-align: center;
    position: fixed;
    left: 0;
    z-index: 999999;
    height: 100dvh;
    background-color: #F8F9FC;
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.loading-screen.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.loading-screen .ls-container {
    margin: auto;
    max-width: 280px;
}

.loading-screen .lottie-container {
    margin: auto;
}

.loading-screen p {
    margin: unset;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: var(--letter-spacing-default);
}

body.showing-ls {
    overflow: hidden;
}

/* Modal */

.modal-title {
    font-family: var(--font-header);
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    margin-bottom: 12px;
}

.modal {
    background: rgba(32, 41, 70, 0.30);
    padding: 16px;
}

.modal .modal-control {
    text-align: right;
    width: 100%;
    margin-bottom: 4px;
}

.modal .modal-content {
    border-radius: 12px;
    font-size: 16px;
}

.modal .btn-close {
    background-image: unset;
    width: 20px;
    height: 20px;
    box-shadow: unset;
    padding: unset;
}

.modal .btn {
    font-size: var(--font-size-default);
}

/* Button */
.btn {
    border: unset;
    background-color: unset;
    border-radius: var(--button-radius);
    color: var(--button-primary-bg);
    font-weight: 600;
    line-height: 13.9px;
    letter-spacing: 0.278px;
    font-size: 13.9px;
    padding: var(--button-padding);
}

.btn:hover {
    color: var(--text-color);
}

.btn-primary {
    border-radius: var(--button-radius);
    padding: var(--button-padding);
    border: 1px solid var(--button-primary-bg);
    background-color: var(--button-primary-bg);
    color: var(--button-primary-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.32px;
}

.btn-primary:hover {
    background-color: #313953;
    border: 1px solid var(--button-primary-bg);
    color: var(--button-primary-color);
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 4px #213d9173;
    background-color: #313953;
    border: 1px solid var(--button-primary-bg);
}

.btn-primary:active {
    background-color: #313953 !important;
    border: 1px solid var(--button-primary-bg) !important;
    color: #C7D2FE !important;
}

.btn-primary:disabled {
    background-color: #BABEC9 !important;
    border: 1px solid #BABEC9 !important;
    color: #888D9C !important;
}

.btn-secondary {
    border-radius: var(--button-radius);
    padding: var(--button-padding);
    border: 1px solid var(--button-secondary-outline);
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.32px;
}

.btn-secondary:hover {
    background-color: #D5DAEC;
    border: 1px solid var(--button-secondary-outline);
    color: var(--button-secondary-color);
}

.btn-secondary:active {
    background-color: #C0C8E2 !important;
    border: 1px solid var(--button-secondary-outline) !important;
    color: var(--button-secondary-color) !important;
}

.btn-secondary:disabled {
    background-color: #E6E9F4 !important;
    border: 1px solid #E6E9F4 !important;
    color: #A1ADD4 !important;
}

.btn-sm {
    height: 28px;
    line-height: 14px;
    font-weight: 600;
    font-size: var(--font-size-default);
    padding: 5px 24px;
}

.btn-danger {
    border: var(--form-input-border);
    background-color: #FFFFFF;
    color: var(--text-error);
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.32px;
}

.btn-danger > svg {
    fill: var(--text-error);
}

.btn-danger:hover {
    background-color: #FAFAFA;
    border-color: #D4D4D4 !important;
    color: var(--text-error);
}

.btn-danger:active {
    color: #7d1313 !important;
    background-color: #FAFAFA !important;
    border-color: #D4D4D4 !important;
}

.btn-danger:disabled {
    border-color: #E5E5E5;
    background-color: #FFFFFF;
    color: #A3A3A3;
}

.flag-dropdown {
    width: fit-content;
}

.flag-dropdown .dropdown-menu {
    width: fit-content;
    min-width: unset;
}

.flag-dropdown li,
.flag-dropdown .dropdown-item {
    width: fit-content;
}

.btn-dropdown::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
    vertical-align: middle;
    margin-left: 8px;
    transition: background-image 0.3s ease;
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M12 6.40002L8 10.4L4 6.40002" stroke="%23313953"%20stroke-width="1.5"%20stroke-linecap="round"%20stroke-linejoin="round"/>%20</svg>');
}

.btn-dropdown.show::after {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="none"> <path d="M15 13L10 8L5 13" stroke="%23313953" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/> </svg>') !important;
}

.btn-dropdown.btn-primary.show {
    border: 1px solid var(--button-primary-bg);
    background-color: var(--button-primary-bg);
    color: var(--button-primary-color);
}

.btn-dropdown.btn-secondary.show {
    border: 1px solid var(--button-secondary-outline);
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-color);
}

/* Alert */

.alert {
    border-radius: 12px;
    border: unset;
    padding: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: var(--letter-spacing-default);
    color: #414860;
}

.alert.alert-info {
    background-color: #D1E8F3;
}

.alert-input {
    padding: 16px;
    border: 2px solid #76BBDA;
    background-color: #EBF5FA;
    border-radius: 8px;
    margin-bottom: unset;
}

.alert-input .btn-radio .btn {
    max-height: 40px;
    line-height: 0;
    padding: 20px 16px;
}

.alert p {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

/* Datepicker */

.datepicker-embed {
    display: none;
    width: 100%;
    font-size: 14px;
    opacity: 0;
    transition-property: display opacity;
    transition-duration: 0.3s;
    transition-behavior: allow-discrete;
}

.datepicker-embed.show {
    display: block;
    opacity: 1;
    
    @starting-style {
        opacity: 0;
    }
}

.datepicker-embed .datepicker {
    width: 100%;
    margin: auto;
    border-radius: 8px;
    border: var(--form-input-border);
    background: #FFFFFF;
    padding: 16px;
}

.datepicker-embed .datepicker .table-condensed {
    width: 100%;
}

.datepicker-embed .datepicker-days .dow {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: var(--letter-spacing-default);
    padding-top: 20px;
    padding-bottom: 10px;
}

.datepicker-embed .datepicker-days td {
    padding-top: 5px;
    padding-bottom: 5px;
}

.datepicker-embed thead tr:nth-child(2) {
    margin-bottom: 10px;
}

.datepicker-embed .datepicker-switch,
.datepicker-embed .prev,
.datepicker-embed .next {
    padding: 6px;
}

.datepicker-embed .datepicker-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 3px;
    background-color: var(--button-secondary-bg);
    border: 0.75px solid var(--button-secondary-outline);
    padding: 4.5px;
    border-radius: 30px;
}

.datepicker-embed .datepicker-icon.left {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="currentColor" class="size-6"> <path fill-rule="evenodd" d="M11.03 3.97a.75.75 0 0 1 0 1.06l-6.22 6.22H21a.75.75 0 0 1 0 1.5H4.81l6.22 6.22a.75.75 0 1 1-1.06 1.06l-7.5-7.5a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" /> </svg>');
}

.datepicker-embed .datepicker-icon.right {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="currentColor" class="size-6"> <path fill-rule="evenodd" d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /> </svg>');
}

.datepicker-embed .today {
    color: var(--checkbox-bg) !important;
    background: unset !important;
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6" fill="none"> <circle cx="3" cy="3" r="3" fill="%23E1ACCC"/>%20</svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
}

.datepicker-embed .next.disabled,
.datepicker-embed .prev.disabled {
    visibility: visible !important;
    opacity: 0.5;
}

.datepicker-embed table tr td.day:hover,
.datepicker-embed .datepicker-switch:hover {
    border-radius: 30px !important;
}

.datepicker-embed table tr td.day:hover:not(.active) {
    background-color: unset !important;
}

.datepicker-embed .next:hover,
.datepicker-embed .prev:hover {
    background-color: unset !important;
}

.datepicker-embed .next:hover .datepicker-icon {
    filter: brightness(0.95);
}

.datepicker-embed .active {
    background-color: var(--button-selected-bg) !important;
    border: unset !important;
    border-radius: 100px;
    box-shadow: 0 0 0 3px #FFF, 0 0 0 5px #D791BB !important;
    background-image: unset !important;
    color: var(--text-color) !important;
    text-shadow: unset !important;
}

.datepicker-input {
    display: none;
}

/* Radio Button */

.btn-radio {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

.btn-radio .btn {
    border-radius: 8px;
    border: var(--form-input-border);
    background-color: #FFF;
    font-size: var(--font-size-default);
    font-weight: 500;
    line-height: 24px;
    letter-spacing: var(--letter-spacing-default);
    padding: 16px;
    flex: 1 1 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.btn-radio.pet-type .btn {
    flex-direction: column;
}

.btn-radio .btn-radio-img {
    max-width: 66px;
    width: 100%;
    /* margin: auto; */
    display: block;
    /* margin-bottom: 12px; */
    color: var(--button-secondary-color);
}

.btn-radio .btn-check+.btn:hover {
    border: var(--form-input-border);
    background-color: #FFF;
    color: var(--button-secondary-color);
    box-shadow: 0 0 0 2px #E5E5E5;
}

.btn-radio .btn-check:checked+.btn {
    box-shadow: 0 0 0 2px #D791BB;
    border: 4px solid #FFF;
    background-color: var(--button-selected-bg);
}

.btn-radio label.btn svg {
    margin-top: -2px;
}

.btn-radio.readonly .btn-check:not(:checked)+.btn{
    color: #888D9C;
}

.btn-radio.readonly .readonly-message {
    display: block;
}

/* Radio and Checkbox */

.form-check .form-check-input {
    width: 20px;
    height: 20px;
    border: 1.5px solid #D2D5DF;
}

.form-check .form-check-input[type=checkbox] {
    border-radius: 4px;
}

.form-check .form-check-input:hover {
    box-shadow: 0 0 0 2px #E5E5E5;
}

.form-check .form-check-label {
    margin-left: 12px;
    margin-top: 3px;
}

.form-check .form-check-input:checked:hover {
    background-color: #7B4666;
}

.form-check .form-check-input:checked,
.was-validated .form-check-input:valid:checked {
    background-color: var(--checkbox-bg);
}

.form-check .form-check-input:focus {
    box-shadow: unset;
}

.form-check .form-check-input:active {
    box-shadow: 0 0 0 2px rgba(224, 231, 255, 0.80);
}

.form-check .form-check-input[type=radio] {
    border-radius: 20px;
}

.form-check .form-check-input:checked[type=radio] {
    background-color: #FFF;
    border-color: var(--checkbox-bg);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 8 8"><circle r="2" fill="%23CD75AA"/></svg>');
}

.form-check .form-check-input.is-invalid~.form-check-label,
.form-check .form-check-input.is-invalid~.form-check-label span,
.was-validated .form-check .form-check-input:invalid~.form-check-label {
    color: var(--text-error);
}

.form-check .form-check-input.is-invalid,
.was-validated .form-check .form-check-input:invalid {
    border-color: var(--text-error);
}

.form-check .form-check-input.is-valid~.form-check-label,
.was-validated .form-check .form-check-input:valid~.form-check-label {
    color: var(--text-color);
}

.form-check .form-check-input.is-valid,
.was-validated .form-check .form-check-input:valid {
    border-color: var(--checkbox-bg);
}

.form-check .form-check-input.is-valid:not(:checked),
.was-validated .form-check .form-check-input:not(:checked):valid {
    border-color: #D2D5DF;
}

.form-check .form-check-input.is-valid:focus,
.was-validated .form-check .form-check-input:valid:focus {
    box-shadow: 0 0 0 .25rem rgba(205, 117, 170, .25);
}

/* Navbar and Pills */
.nav-pills {
    margin: auto !important;
    width: fit-content;
    border-radius: var(--button-radius);
    background-color: #FFFFFF;
    padding: 4px;
    justify-content: center;
}

.nav-pills .nav-item .nav-link {
    border-radius: var(--button-radius);
    padding: 4px 12px;
    font-size: var(--font-size-default);
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0;
    color: var(--button-primary-bg);
}

.nav-pills .nav-item .nav-link.active {
    background-color: #E7E8EF;
}

/* Pricing cards */
.pricing-card {
    width: 100%;
    max-width: unset;
    margin: auto;
    text-align: center;
    border: 1px solid;
    border-radius: 12px;
}

.pricing-card .pricing-header {
    padding: 32px 24px 24px 24px;
    border-radius: 10px;
    position: relative;
} 

.pricing-card .pricing-content {
    padding: 24px;
}

.pricing-card .pricing-footer {
    padding: 8px 24px;
}

.pricing-card .title {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
}

.plan {
    font-size: 32px;
    font-weight: 800;
    line-height: 38px;
    color: var(--button-primary-bg);
    margin-bottom: unset;
}

.currency {
    font-size: 20px;
}

.plan-name {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-left: 8px;
    color: #5E6478;
}

.pricing-card.low .title {
    color: #15729A; 
}

.pricing-card.low .pricing-header {
    background-color: var(--pricing-bg-low);
}

.pricing-card.low {
    border-color: var(--pricing-bg-low);
}

.pricing-card.medium .title {
    color: #A45E88; 
}

.pricing-card.medium .pricing-header {
    background-color: var(--pricing-bg-med);
}

.pricing-card.medium {
    border-color: var(--pricing-bg-med);
}

.pricing-card.high .title {
    color: #817332; 
}

.pricing-card.high .pricing-header {
    background-color: var(--pricing-bg-high);
}

.pricing-card.high {
    border-color: var(--pricing-bg-high);
}

.pricing-card .btn-check:checked+.btn {
    background-color: var(--checkbox-bg);
    border-color: var(--checkbox-bg);
    color: var(--button-secondary-color);
}

.pricing-card:has(.btn-check:checked) {
    border-color: #F8F9FC !important;
    border: 2px solid;
    background-color: #FFFFFF;
    filter: drop-shadow(3px 0 0 var(--checkbox-bg))
        drop-shadow(-3px 0 0 var(--checkbox-bg))
        drop-shadow(0 3px 0 var(--checkbox-bg))
        drop-shadow(0 -3px 0 var(--checkbox-bg))
        drop-shadow(1px 1px 0 var(--checkbox-bg))
        drop-shadow(-1px -1px 0 var(--checkbox-bg))
        drop-shadow(1px -1px 0 var(--checkbox-bg))
        drop-shadow(-1px 1px 0 var(--checkbox-bg));
}

.pricing-card:has(.btn-check:checked) .icon {
    border: unset;
}

.pricing-card .icon {
    padding: 10px;
    width: fit-content;
    margin: auto;
    position: absolute;
    top: -25px;
    background-color: #FFF;
    border-radius: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.pricing-card.low .icon {
    border: 2px solid var(--pricing-bg-low);
}

.pricing-card.medium .icon {
    border: 2px solid var(--pricing-bg-med);
}

.pricing-card.high .icon {
    border: 2px solid var(--pricing-bg-high);
}

.pricing-card .offer {
    background-image: url("/static/assets/best_offer_badge.ed2387ad532b.svg");
    background-position: center;
    background-repeat: no-repeat;
    width: 80px;
    height: 80px;
    color: #FFF;
    position: absolute;
    bottom: -50%;
    transform: translateY(-30%);
    right: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.28px;
}

.pricing-card .pricing-content ul {
    list-style: none;
    text-align: left;
    margin: unset;
    padding: unset;
}

.pricing-card .pricing-content ul li {
    display: flex;
    align-items: center;
}

.pricing-card .pricing-content ul span {
    font-weight: 700;
    margin-right: 5px;
}

.pricing-card .pricing-content ul li:not(:last-child) {
    margin-bottom: 16px;
}

.pricing-card .pricing-content ul li::before {
    content: '';
    display: inline-block;
    width: 16px; 
    height: 16px;
    background-image: url("/static/assets/check_circle.851ac32d8ab3.svg");
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 8px;
}

.pricing-card label.btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pricing-card label.btn svg{
    margin-right: 8px;
}

/* Accordion */

.accordion .accordion-button {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    background-color: transparent;
    box-shadow: unset;
    padding-left: unset;
    padding-right: unset;
    color: var(--text-color);
    font-family: var(--font-header);
}

.accordion .accordion-button::after {
    transform: unset !important;
    transition: background-image 0.3s ease;
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.41005 6.21004C3.95678 5.6633 4.84322 5.6633 5.38995 6.21004L10 10.8201L14.6101 6.21004C15.1568 5.6633 16.0432 5.6633 16.5899 6.21004C17.1367 6.75677 17.1367 7.6432 16.5899 8.18994L10.9899 13.7899C10.4432 14.3367 9.55678 14.3367 9.01005 13.7899L3.41005 8.18994C2.86332 7.6432 2.86332 6.75677 3.41005 6.21004Z" fill="%23313953"/>%20</svg>');
}

.accordion .accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5899 13.7899C16.0432 14.3367 15.1568 14.3367 14.6101 13.7899L10 9.17989L5.38995 13.7899C4.84322 14.3367 3.95678 14.3367 3.41005 13.7899C2.86332 13.2432 2.86332 12.3568 3.41005 11.81L9.01005 6.21004C9.55678 5.6633 10.4432 5.6633 10.9899 6.21004L16.59 11.81C17.1367 12.3568 17.1367 13.2432 16.5899 13.7899Z" fill="%23313953"/> </svg>');   
}

.accordion .accordion-item {
    border: unset;
    background-color: unset;
}

.accordion .accordion-body {
    padding: unset;
}

.accordion .accordion-content {
    padding-bottom: 16px;
}

.accordion.white {
    background-color: #FFFFFF;
    border-radius: 8px;
    border: var(--form-input-border);
}

.accordion.white .accordion-header {
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion.white .accordion-item:not(:last-child) {
    border-bottom: var(--form-input-border);
}

.accordion.white .accordion-body {
    padding: 16px 12px;
    background-color: var(--body-background);
}

.accordion.white .accordion-header:has(> div.form-check > .collapsed) {
    background-color: #F5E3EE;
    border: 2px solid #D791BB;
    box-shadow: inset 0 0 0 4px #FFFFFF;
}

.accordion.white .accordion-item:first-child .accordion-header:has(> div.form-check > .collapsed) {
    border-radius: 6px 6px 0px 0px;
}