:root {
    --primary-color: #0B5449;
    --primary-color-rgb: 36,175,97;
    --primary-color-hover: #05433b;
    --primary-color-opacity-1: rgba(var(--primary-color-rgb), 0.1);

    --light-primary-color: #caffcf;
    --light-primary-color-rgb: 202, 255, 207;

    --light-primary-color-2: #117a68;

    --foreground-color: #272727;
    --background-color: #f0f0ee;

    --text-font-family: 'Raleway';
    /*--title-font-family: 'Horizon';*/
    --title-font-family: 'Raleway';

    --muted-color: #676971;
    --danger-color: #ec2f40;
    --success-color: #17aa0b;

    --white-color:#fff;
    --black-color: #000;

    --logo-width: calc(13rem + 1vw);
}

/*.c_calma:root {
    --background-color: red !important;
}*/

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

html {
    font-size: 62.5%;  /* 10px */
}

html,body {
    min-height: 100%;
}

body {
    font-size: 1rem;
    font-family: var(--text-font-family), sans-serif;
    color: var(--foreground-color);
    background-color: var(--background-color);
    line-height: 1.7;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

main {
    width: 100%;
    padding: 1rem;
}

a, ul {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

a:hover {
    color: initial;
}

a.disabled{
    opacity: .4;
    pointer-events: none;
}

/*h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: var(--title-font-family), sans-serif;
}*/

.title-font-family {
    font-family: var(--title-font-family), sans-serif !important;
}

.text-font-family {
    font-family: var(--text-font-family), sans-serif !important;
}

.alert-font-family {
    font-family: var(--text-font-family), sans-serif;
}

.text-primary {
    color: var(--primary-color) !important;
}

.text-danger {
    color: var(--danger-color) !important;
}

.text-muted {
    color: var(--muted-color) !important;
}

.text-success {
    color: #05cb6d !important;
}

.btn:hover {
    transition: all .2s ease !important;
}

.btn-pulse {
    position: relative;
    z-index: 2;
}

.btn-pulse::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    backdrop-filter: blur(10px);
}

.btn-pulse.btn-primary::before {
    background-color: var(--primary-color);
}

.btn-pulse.btn-light-primary-2::before {
    background-color: var(--light-primary-color-2);
}

.btn-pulse.btn-danger::before {
    background-color: var(--bs-danger);
}

.btn-pulse.btn-dark::before {
    background-color: #000;
}

.btn-pulse:hover::before {
    animation: btnPulse .6s ease backwards;
}

.bg-primary,
.btn-primary {
    background-color: var(--primary-color) !important;
}

.bg-primary-opacity-1 {
    background-color: rgba(var(--primary-color-rgb), .07);
}

.bg-dark,
.btn-dark {
    background-color: var(--black-color) !important;
}

.bg-danger,
.btn-danger {
    background-color: var(--bs-danger)  !important;
}

.bg-white,
.btn-white {
    background-color: var(--white-color) !important;
}

.card, .card-header, .card-body, .card-footer {
    background-color: transparent;
    box-shadow: unset;
    padding: 0;
    border: 0;
}

#formBody_clientAddress input.disabled{
    background-color: #00000024;
}

.branding-logo {
    width: var(--logo-width) !important;
}

.c_calma .branding-logo{
    --logo-width: 11rem;
}

.preschedule-page .branding-logo,
.documents-page .branding-logo,
.orders-page .branding-logo,
.profile-page .branding-logo,
.home-page .branding-logo,
.services-page .branding-logo,
.schedules-page .branding-logo {
    width: var(--logo-width) !important;
    filter: brightness(0) invert(1);
}

.cart-page .branding-logo,
.anvisa-page .branding-logo,
.payment-page .branding-logo
{
    width: var(--logo-width) !important;
}

.preschedule-page main {
    margin-top: -1px;
}

.text-light-primary {
    color: var(--light-primary-color) !important;
}

.text-light-primary-2 {
    color: var(--light-primary-color-2);
}

.form-control:focus,
.form-select:focus,
textarea {
    border-color: var(--primary-color);
}

.form-control {
    height: 5rem;
    border: 0;
    border-bottom: 1px solid var(--muted-color);
    border-radius: 0;
    background-color: transparent;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #ebebeb;
    /* não desabilitar pointer events */
    /*pointer-events: none;*/
    opacity: 1 !important;
}

.form-control:disabled::placeholder, .form-control[readonly]::placeholder {
    color: #333;
}

.form-select,
textarea {
    border: 1px solid var(--foreground-color) !important;
    border-radius: .5rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    outline: none !important;
    box-shadow: none !important;
}

.form-control,
.form-label {
    font-size: 1.6rem;
    color: rgb(86, 92, 105);
}
.form-control:not([readonly], :disabled, .disabled):focus {
    border-color: var(--primary-color) !important;
}

.form-label {
    font-family:  var(--title-font-family), sans-serif;
}

.form-label svg {
    width: 2rem;
    height: 2rem;
    stroke: var(--foreground-color);
    margin-right: .75rem;
}

.form-label svg path,
.form-label svg circle {
    transition: .3s;
}

.form-control[readonly] {
    /*não devolver isso*/
    /*pointer-events: none;*/
}

.form-control:not([readonly], :disabled, .disabled):focus {
    background-color: transparent;
}

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

.input-effect {
    width: 100%;
    position: relative;
}

.input-effect-1 ~ .focus-border {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: .4s;
}

.input-effect-1:focus ~ .focus-border,
.has-content.input-effect-1 ~ .focus-border,
.has-content-always.input-effect-1:valid ~ .focus-border,
.focus-border.active {
    width: 100%;
    transition: .4s;
    left: 0;
}

.input-effect-1 ~ label{
    position: absolute;
    left: 0;
    width: 100%;
    top: 10px;
    color: var(--foreground-color);
    transition: 0.3s;
    z-index: -1;
    letter-spacing: .5px;
}

.input-effect-1:focus ~ label,
.has-content.input-effect-1 ~ label,
.has-content-always.input-effect-1 ~ label {
    top: -1.4rem;
    font-size: 1.4rem;
    color: var(--primary-color) !important;
    transition: 0.3s;
}

.input-effect-1:focus ~ label svg,
.has-content.input-effect-1 ~ label svg,
.has-content-always.input-effect-1 ~ label svg {
    stroke: var(--primary-color) !important;
    width: 1.7rem;
    height: 1.7rem;
}

.input-effect-1:focus ~ label svg   [stroke="#272727"]  ,
.has-content.input-effect-1 ~ label svg [stroke="#272727"],
.has-content-always.input-effect-1 ~ label svg [stroke="#272727"]{
    stroke: var(--primary-color) !important;
}

.input-effect-1:focus ~ label [fill="#272727"],
.has-content.input-effect-1 ~ label [fill="#272727"],
.has-content-always.input-effect-1 ~ label svg [fill="#272727"]{
    fill: var(--primary-color);
}

.has-content.input-effect-1 {
    color: #212529;
}

.modal-dialog {
    padding: 2rem 0;
}

.z-index-2 {
    z-index: 2;
}

.eye-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.5rem;
    width: 3.2rem;
    height: 3.2rem;
    stroke: #989898 !important;
    padding: .5rem 0 .5rem .5rem;
    cursor: pointer;
}

.password-input {
    padding-right: 6rem !important;
}

.form-label,
.form-label span {
    font-family: var(--text-font-family), sans-serif;
}

.form-label span.text-danger {
    font-size: 2.3rem !important;
}

.form-label svg {
    width: 1.85rem;
    height: 1.85rem;
}

input.input-effect-1:-webkit-autofill,
input.input-effect-1:-webkit-autofill:hover,
input.input-effect-1:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    transition: background-color 5000s ease-in-out 0s !important;
}

.input-effect-1:focus ~ label,
.has-content.input-effect-1 ~ label,
.has-content-always.input-effect-1 ~ label {
    top: -2.2rem;
}

.range-line {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - .1rem));
    left: 0;
    height: 1rem;
    border-radius: 10px;
    width: 100%;
    z-index: -1;
    background: #ddd;
    margin-left: auto;
    margin-right: auto;
}

.custom-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    background: transparent !important;
    outline: none;
    transition: background 0.3s;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--primary-color) !important;
    cursor: pointer;
    border: none !important;
    outline: none !important;
    border: 0 !important;
    padding: 0;
    transform: translateY(-30%);
}

.custom-range::-webkit-slider-runnable-track {
    background: transparent !important;
}

.custom-range::-moz-range-thumb {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--primary-color) !important;
    cursor: pointer;
    border: none !important;
    padding: 0;
}

.custom-range::-moz-range-track {
    height: 10px;
    border-radius: 5px;
    background: transparent !important;
}

.range-scales span {
    display: block;
    font-weight: 500;
    width: 2rem;
    text-align: center;
    transition: all .15s ease;
    position: relative;
}

.range-scales span::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    background-color: rgba(var(--primary-color-rgb), .075);
    opacity: 0;
    transition: all .1s ease;
    z-index: -1;
}

.range-scales span.active::before {
    opacity: 1;
}

.custom-radio-box,
.custom-check-box {
    padding: 1rem;
    border: 1px solid #555;
    border-radius: .75rem;
    user-select: none;
}

.custom-radio-box,
.custom-radio-box > *,
.custom-check-box {
    transition: all .15s ease;
}

.custom-radio-input,
.custom-check-input {
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.custom-radio-input:checked + .custom-radio-box {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.custom-check-input:checked + .custom-check-box.bg-light-primary {
    background-color: rgba(var(--primary-color-rgb), 1);
    border-color: rgba(var(--primary-color-rgb), 1);
    color: #fff;
}

.custom-radio-input:checked + .custom-radio-box > * {
    color: #fff;
}

.selected-objective-box {
    background-color: var(--primary-color);
    margin-left: -7.5vw;
    margin-right: -7.5vw;
    padding: 2rem 7.5vw;
}

a, a:hover {
    text-decoration: none !important;
}

.selection-circle {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--background-color);
    margin-top: .7rem;
    margin-right: .2rem;
    position: relative;
}

.selection-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 2.3rem;
    height: 2.3rem;
    border: 2px solid var(--background-color);
}

.text-white-75 {
    color: rgba(255,255,255,.75);
}

.fs-2 {
    font-size: calc(1.65rem + .2vw) !important;
}

.bg-light-primary-2 {
    background-color: var(--light-primary-color-2);
}

.scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
    max-width: 450px;
    margin-left: -7.5vw;
    margin-right: -7.5vw;
    padding: 0 calc(50% + 7.5vw);
    position: relative;
    background-color: rgba(255,255,255,.8);
}

.scroll-container:active {
    cursor: grabbing;
    user-select: none;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.scroll-item {
    flex: 0 0 auto;
    width: 80px;
    height: 9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    scroll-snap-align: center;
    font-size: 1.5rem;
    color: #545454;
    transition: 0.2s ease;
}

.scroll-item.active {
    font-weight: bold;
    color: #333;
    font-size: 1.7rem;
}

.indicator {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid green;
    margin: 5px auto 0;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) rotate(180deg);
}

.name-abbreviation {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    font-size: 1.65rem;
    color: #000;
    font-weight: bolder;
    position: relative;
}

.name-abbreviation .abbrev-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(20%, 45%);
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--light-primary-color);
    border: 4px solid var(--primary-color);
    overflow: hidden;
}

.name-abbreviation .abbrev-icon svg {
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: 2rem;
}

.name-abbreviation:hover,
.name-abbreviation:focus,
.name-abbreviation:active {
    color: var(--primary-color);
}

.name-abbreviation .abbrev-icon svg.arrow-icon {
    top: -100%;
}

.name-abbreviation:focus .abbrev-icon svg.arrow-icon ,
.name-abbreviation:active .abbrev-icon svg.arrow-icon  {
    animation: abbrevIconFadeBottom .1s .1s ease both;
}

.name-abbreviation:focus .abbrev-icon svg.user-icon ,
.name-abbreviation:active .abbrev-icon svg.user-icon  {
    animation: userIconFadeBottom .1s ease both;
}


.hidden-on-content-load,
.hidden-on-content-load.d-flex,
.hidden-on-content-load.block,
.hidden-on-content-load.d-inline {
    display: none !important;
}
@keyframes userIconFadeBottom {
    100% {
        top: 100%;
        transform: translate(-50%, 0);
    }
}

@keyframes abbrevIconFadeBottom {
    100% {
        top: 50%;
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.user-infos h2 {
    font-size: calc(3rem + .2vw);
    font-weight: 900;
}
.c_calma .user-infos h2 {

font-weight: unset!important;
}

.c_calma .header-wave{
    display: none!important;
    opacity: 0;
}

.user-infos h3 {
    font-size: calc(2.3rem + .2vw);
    font-weight: 700;
}

.schedule-type {
    background-color: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0;
    border: 1px solid #cccccc;
}

.filter-primary-color {
    filter: brightness(0) invert(21%) sepia(12%) saturate(6062%) hue-rotate(137deg) brightness(100%) contrast(91%);
}

.header-wave {
    width: calc(149% + 2px);
    height: 60px;
    transform: rotate(180deg) translateY(-6px);
}

.user-picture {
    width: 5rem;
    height: 5rem;
    border-radius: .35rem;
    background-color: var(--background-color);
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding: .8rem .8rem 0 .8rem;
    overflow: hidden;
}

.user-picture svg {
    transform: translateY(10px);
}

.section-title {
    font-size: calc(2.5rem + .25vw);
    position: relative;
    padding-left: 2rem;
}

.section-title.before::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: .8rem;
    background-color: var(--primary-color);
}

.fw-900 {
    font-weight: 900;
}

.py-6 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.list-style-circle {
    list-style-type: circle;
}

.list-icon {
    min-width: 2.7rem;
    width: 2.7rem;
    height: 2.7rem;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M4 12.6111L8.92308 17.5L20 6.5" stroke="%230B5449" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.modal .modal-header,
.modal .modal-body,
.modal .modal-footer {
    width: 100%;
    background-color: #eeeeee;
    border: unset;
}

.modal .btn-close {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    color: #fff;
    transition: all .15s ease;
    box-shadow: unset;
    filter: unset !important;
    opacity: 1;
}

.modal .btn-close svg {
    width: 100%;
    height: 100%;
}

.modal .btn-close.btn-close-muted:hover {
    background-color: rgba(51, 51, 51, 0.08);
}

.modal .btn-close.btn-close-white,
.modal .btn-close.btn-close-white:hover {
    background-color: #fff !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
}

.modal .modal-halfscreen .modal-content {
    padding: 3rem 0 0 0;
    border-radius: 5rem 5rem 0 0;
}

.modal .modal-dialog:not(.modal-halfscreen) .modal-content {
    border-radius: 1.2rem !important;
}

.modal.alert-modal {
    top: 100%;
    max-width: 100vw;
}

.modal.alert-modal.show {
    transform: unset;
    transition: top .15s linear;
    top: 0;
}

.alert-modal.show {
    display: flex !important;
}

.alert-modal:not(.show) {
    display: none;
}

.modal .modal-halfscreen .modal-body img {
    object-fit: cover;
}

.modal .modal-halfscreen .modal-header .modal-title {
    font-size: calc(2.2rem + .2vw);
}

.payment-value {
    font-size: calc(4rem + .4vw);
    font-weight: 900;
}

.payments-box {
    background-color: #f2f2f2;
}

.payment-method {
    color: var(--foreground-color) !important;
    background-color: #fff !important;
    border-radius: .35rem !important;
    border: 1px solid #dddddd !important;
    transition: all .2s ease;
}

.payment-method.active,
.payment-method:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

.payment-method svg {
    width: 2.4rem;
    height: 2.4rem;
    color: #1a907b;
}

.payment-method .discount {
    color: #05cb6d;
    transition: all .2s ease;
}

.payment-method.active .discount,
.payment-method:hover .discount{
    color: var(--light-primary-color);
}

.bouncing-dots-inline {
    display: inline-flex;
    margin-left: 0.3em;
    vertical-align: middle;
}

.bouncing-dots-inline span {
    width: 0.4em;
    height: 0.4em;
    margin: 0 0.08em;
    background-color:  var(--light-primary-color);
    border-radius: 50%;
    animation: bounce 1.2s infinite ease-in-out;
}

.bouncing-dots-inline span:nth-child(2) {
    animation-delay: 0.2s;
}

.bouncing-dots-inline span:nth-child(3) {
    animation-delay: 0.4s;
}

input[type="checkbox"]:not(.form-check-input) {
    display: none;
}

.file-input {
    position: absolute;
    left: calc(var(--bs-gutter-x) * .5);
    margin-top: 0.25rem;
    opacity: 0;
    width: 0 !important;
    height: 0 !important;
    border: 0;
    background-color: transparent !important;
    top: 100%;
    visibility: hidden;
}

.file-label {
    padding: 0.5rem 0.9rem;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    width: 100%;
    cursor: pointer;
    text-align: center;
    min-height: 6rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.custom-checkbox {
    background-color: transparent;
    border: 0.01rem solid rgb(40, 40, 40);
    width: 2.4rem !important;
    height: 2.4rem !important;
    min-width: 2.4rem;
    min-height: 2.4rem;
    position: relative;
    padding: 0;
    transition: border-color 150ms;
}

input[type="checkbox"]:checked + .custom-checkbox {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

input[type="checkbox"]:checked + .custom-checkbox::after {
    content: '';
    position: absolute;
    top: .5rem;
    left: .85rem;
    width: .6rem;
    height: 1rem;
    border: solid var(--white-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-switch .form-check-input {
    float: unset;
    margin: 0;
    width: 5em;
    height: 2.6em;
    cursor: pointer;
}

.form-check-input:focus {
    border-color: rgba(0,0,0,.25);
    outline: 0;
    box-shadow: unset;
}

.form-switch .form-check-input:not(:checked):focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

.form-check {
    padding: 0;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-switch .form-check-input:not(:checked) {
    background-color: rgba(0,0,0,.045);
    border-color: #c8c8c8;
}

.form-switch .form-check-input:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23353935'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input:checked {
    background-color: rgba(var(--primary-color-rgb), .9);
    border-color: var(--primary-color) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.form-switch .form-check-input:focus {
    outline: none;
    box-shadow: unset;
    color: #fff !important;
    border-color:  #d8d6de;
}

.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check .form-check-input:not(:checked):focus {
    border-color: #d8d6de;
}

.form-switch .form-check-input {
    height: 3.5rem !important;
    width: 7rem !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg width='26px' height='26px' viewBox='0 0 26 27' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3ccircle id='path-1' cx='8' cy='8' r='8'%3e%3c/circle%3e%3cfilter x='-40.6%' y='-21.9%' width='168.8%' height='168.8%' filterUnits='objectBoundingBox' id='filter-2'%3e%3cfeOffset dx='-1' dy='2' in='SourceAlpha' result='shadowOffsetOuter1'%3e%3c/feOffset%3e%3cfeGaussianBlur stdDeviation='1.5' in='shadowOffsetOuter1' result='shadowBlurOuter1'%3e%3c/feGaussianBlur%3e%3cfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0' type='matrix' in='shadowBlurOuter1'%3e%3c/feColorMatrix%3e%3c/filter%3e%3c/defs%3e%3cg id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='switches-dot' transform='translate%285.000000, 5.000000%29' fill-rule='nonzero'%3e%3cg id='Oval'%3e%3cuse fill='black' fill-opacity='1' filter='url%28%23filter-2%29' xlink:href='%23path-1'%3e%3c/use%3e%3cuse fill='%23fff' xlink:href='%23path-1'%3e%3c/use%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
    background-position: left center;
    border-radius: 3rem;
    transition: background-position 0.15s ease-in-out, background-color 0.1s ease;
}

.modal-dialog {
    width: 92.5vw;
    margin: auto;
}

.modal-dialog .modal-header,
.modal-dialog .modal-body,
.modal-dialog .modal-footer {
    padding: 2rem;
}

.modal-dialog .btn-close:hover {
    transform: scale(1.1);
    filter: grayscale(1) !important;
}

.modal-dialog .btn-close {
    font-size: 1.7rem;
    transition: all .1s ease;
}

.modal-dialog .btn-close:focus {
    outline: none;
    box-shadow: unset;
}

.modal-dialog .modal-content {
    border-radius: 10px;
}

.orientations-icon {
    width: calc(5.8rem + .2vw);
    min-width: calc(5.8rem + .2vw);
    max-width: calc(5.8rem + .2vw);
    aspect-ratio: 1 / 1;
    padding: 1.4rem;
    display: flex;
    border-radius: 50%;
    color: var(--primary-color);
    background-color: rgba(var(--primary-color-rgb), .1);
    border-color: rgba(var(--primary-color-rgb), .2);
}

.orientations-icon svg {
    max-width: 100%;
    height: auto;
}


.orientations-icon.big-icon {
    width: calc(9rem + .2vw);
    min-width: calc(9rem + .2vw);
    padding: 1.6rem;
}

.orientations-icon-2 {
    width: calc(6.2rem + .2vw);
    min-width: calc(6.2rem + .2vw);
    background-color: #fff;
    border-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
}

.orientations-icon-2.active {
    background-color: var(--light-primary-color-2);
    color: #fff;
}

.skeleton {
    background: linear-gradient(110deg, #e5e5e5 8%, #f0f0f0 18%, #e5e5e5 33%);
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
    border-radius: .25rem;
    z-index: 2;
}

.skeleton-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    animation: 1.5s shine linear infinite;
    background: linear-gradient(110deg, #e5e5e5 8%, #f0f0f0 18%, #e5e5e5 33%);
    background-size: 200% 100%;
}


@keyframes shine {
    to {
        background-position-x: -200%
    }
}

.skeleton-text {
    display: block;
    padding: 1.25rem 0;
}

.cam-test {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: auto;
}

.microphone-test span {
    width: 100%;
    height: 1rem;
    background-color: #f0f0f0;
}

.microphone-test span + span {
    margin-left: 1rem;
}

.badge-time {
    min-width: 80%;
    font-size: calc(1.4rem + .1vw);
    background-color: rgba(var(--primary-color-rgb), .075) !important;
    cursor: pointer;
}

.badge-time svg {
    width: calc(1.25rem + .05vw);
    height: calc(1.25rem + .05vw);
    margin-right: .35rem;
}

.badge-time:hover,
.badge-time.selected {
    transition: all .15s ease;
    background-color: rgba(var(--primary-color-rgb), 1) !important;
    color: #fff !important;
}

.order-timeline {
    width: calc(100% - 100px);
}

.timeline-point {
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #d9d9d9;
    z-index: 2;
}

.timeline-line {
    position: absolute;
    width: 100%;
    height: .8rem;
    top: 50%;
    transform: translate(0, -50%);
    background: #d9d9d9;
    left: 0;
    z-index: 1;
}

.order-status-icon-box {
    width: 5rem;
    height: 5rem;
    min-width: 5rem;
    min-height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.order-status-icon-box img {
    width: 50%;
    height: 50%;
}
.text-order-status {
    max-width: 500px;
}
.order-status-icon-box.order-status-1 {
    background-color: #27c747;
}

.text-order-status.order-status-1 {
    color: #27c747;
}

.order-status-icon-box.order-status-6 {
    background-color: #ff8e51;
}

.text-order-status.order-status-6 {
    color: #ff8e51;
}

.order-status-icon-box.order-status-2 {
    background-color: #d338d0;
}

.text-order-status.order-status-2 {
    color: #d338d0;
}

.order-status-icon-box.order-status-3 {
    background-color: #8494fa;
}

.text-order-status.order-status-3 {
    color: #8494fa;
}

.order-status-icon-box.order-status-4 {
    background-color: #ab84fa;
}

.text-order-status.order-status-4 {
    color: #ab84fa;
}

.order-status-icon-box.order-status-5 {
    background-color: #ec3e4e;
}

.text-order-status.order-status-5 {
    color: #ec3e4e;
}

.collapsed .collapse-icon {
    transform: rotate(0);
    fill: var(--muted-color);
}

.order-card > * {
    font-family: var(--text-font-family), sans-serif !important;
}

.order-card .collapse-icon {
    width: calc(3rem + 1vw);
    height: calc(3rem + 1vw);
}

.collapse-icon {
    transition: all .2s ease;
    transform: rotate(180deg);
    fill: var(--primary-color);
}

.order-status-1 .timeline-line {
    background: linear-gradient(to right,
    var(--primary-color) 0%,
    var(--primary-color) 14%,
    #d9d9d9 14%,
    #d9d9d9 100%);
}

.order-status-1 .timeline-point:nth-child(1) {
    background-color: var(--primary-color);
}

.order-status-6 .timeline-point:nth-child(-n+2) {
    background-color: var(--primary-color);
}

.order-status-6 .timeline-line {
    background: linear-gradient(to right,
    var(--primary-color) 0%,
    var(--primary-color) 38%,
    #d9d9d9 38%,
    #d9d9d9 100%);
}

.order-status-2 .timeline-line {
    background: linear-gradient(to right,
    var(--primary-color) 0%,
    var(--primary-color) 62%,
    #d9d9d9 62%,
    #d9d9d9 100%);
}

.order-status-2 .timeline-point:nth-child(-n+3) {
    background-color: var(--primary-color);
}

.order-status-3 .timeline-line {
    background: linear-gradient(to right,
    var(--primary-color) 0%,
    var(--primary-color) 86%,
    #d9d9d9 86%,
    #d9d9d9 100%);
}

.order-status-3 .timeline-point:nth-child(-n+4) {
    background-color: var(--primary-color);
}

.order-status-4 .timeline-line {
    background: var(--primary-color) ;
}

.order-status-4 .timeline-point:nth-child(-n+5) {
    background-color: var(--primary-color);
}

.timeline-info {
    max-width: 120px;
    width: 100%;
    text-align: center;
    white-space: normal;
}

.schedule-picker-item .box {
    width: calc(6rem + .2vw);
    color: #000;
    transition: all .15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.schedule-picker-body .schedule-picker-item .box {
    cursor: pointer;
}

.schedule-slider-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.schedule-picker-body ul li + li {
    margin-top: 1rem;
}

.schedule-picker-header .fs-1 {
    font-size: 2rem !important;
}

.schedule-picker-header li:nth-child(odd),
.schedule-picker-body ul:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.date-arrow {
    min-width: calc(4rem + .4vw);
    min-height: calc(4rem + .4vw);
    color: #000000;
    border-radius: 50%;
    background-color:  rgba(var(--primary-color-rgb), .1);
    transition: background-color .1s ease;
    box-shadow: unset;
    display: flex;
    align-items: center;
    padding: .5rem;
    justify-content: center;
}

.date-arrow:not(.disabled):hover {
    background-color: rgba(var(--primary-color-rgb), 1);
    color: #fff;
}

.date-arrow.disabled {
    filter: grayscale(1);
    cursor: default;
    pointer-events: none;
}

.mx-w-200 {
    max-width: 20rem;
}

.mx-w-300 {
    max-width: 30rem;
}

.mx-w-350 {
    max-width: 35rem;
}

.mx-w-450 {
    max-width: 45rem;
}

.mx-w-550 {
    max-width: 55rem;
}

.spacer {
    height: 4rem;
}

.letter-spacing-default {
    letter-spacing: initial;
}

.fade-right {
    animation: fadeRight .75s ease both;
}

.fade-bottom-0 {
    animation: fadeBottom .35s .35s ease both;
}

.fade-bottom-1 {
    animation: fadeBottom .75s .5s ease both;
}

.fade-bottom-2 {
    animation: fadeBottom .75s 1s ease both;
}

.bg-default {
    background-color: var(--background-color);
}

.big-success-icon {
    width: 8rem;
    aspect-ratio: 1 / 1;
    background-color: rgba(var(--light-primary-color-rgb), .2);
}

.iti-mobile .iti--container {
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
}

.iti__country.iti__highlight {
    background-color: rgba(var(--primary-color-rgb), .1);
}

.iti__country[aria-selected="true"] {
    background-color: rgba(var(--primary-color-rgb), .9) !important;
    color: #fff !important;
}

.iti__country[aria-selected="true"]  .iti__dial-code {
    color: #fff !important;
}

.cart-card,
.resume-cart {
    border-radius: 1rem;
}

.rounded-4 {
    border-radius: 1rem;
}

.resume-cart-fixed {
    width: 100%;
    border-top-left-radius: 2.4rem;
    border-top-right-radius: 2.4rem;
    background-color: #fff;
    box-shadow: 0 -6px 24px #c5c5c5;
    padding: 3rem;
    position: fixed;
    bottom: 0;
    z-index: 999;
}

.cart-page {
    padding-bottom: 12rem;
}

.btn-previous-step,
.btn-back {
    width: 4rem;
    height: 4rem;
    transition: all .15s ease;
    background-color: #fff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    color: #000;
}

.btn-back {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
}

.btn-back,
.btn-previous-step svg {
    transition: all .15s ease;
}

.btn-previous-step:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.btn-back:hover  {
    color: #000;
    background-color: rgba(255, 255, 255, 0.9);
}

.btn {
    font-size: 1.6rem;
    color: var(--white-color);
    font-weight: 700;
    border-radius: 6px;
    box-shadow: rgba(33, 35, 38, 0.1) 0 10px 10px -10px;
    padding: 1rem 1.8rem;
    border: 1px solid transparent !important;
    font-family: var(--title-font-family), sans-serif;
    position: relative;
    transition: opacity .15s ease, background-color .25s ease, color .25s ease !important;
}

.btn.floatThisbt{
    position: fixed;
    bottom: 5%;
}

.btn:hover,
.btn:focus {
    outline: none !important;
}

.btn.btn-big {
    height: 6rem;
}

.btn-primary:hover {
    background-color: var(--primary-color-hover) !important;
}

.btn-primary.btn-outline {
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color);
    background-color: transparent !important;
    transition: color .15s ease, background-color .15s ease;
}

.btn-primary.btn-outline.active {
    background-color: var(--primary-color) !important;
    color: var(--white-color);
}

.btn-primary.btn-outline.btn-hoverable:hover,
.btn-primary.btn-outline.btn-hoverable:focus {
    background-color: var(--primary-color) !important;
    color: var(--white-color);
}

.btn-primary.btn-outline.btn-hoverable:hover .stroke-primary,
.btn-primary.btn-outline.btn-hoverable:focus .stroke-primary {
    stroke: var(--white-color);
}

.btn-danger.btn-outline {
    border: 1px solid var(--bs-danger) !important;
    color: var(--bs-danger);
    background-color: transparent !important;
    transition: color .15s ease, background-color .15s ease;
}

.btn-danger.btn-outline.active {
    background-color: var(--bs-danger) !important;
    color: var(--white-color);
}

.btn-danger.btn-outline.btn-hoverable:hover,
.btn-danger.btn-outline.btn-hoverable:focus {
    background-color: var(--bs-danger) !important;
    color: var(--white-color);
}

.btn-dark {
    background-color: var(--foreground-color);
}

.btn-dark:not(.btn-outline):hover {
    background-color: #505050 !important;
}

.btn-dark.btn-outline {
    border: 1px solid var(--black-color) !important;
    background-color: transparent !important;
    color: var(--black-color);
}

.btn-dark.btn-outline svg {
    stroke: var(--black-color);
    width: auto;
    height: 2em;
    transition: all .15s ease;
}

.btn-dark.btn-outline.btn-hoverable:hover,
.btn-dark.btn-outline.btn-hoverable:focus {
    background-color: var(--black-color) !important;
    color: var(--white-color);
}

.btn-dark.btn-outline.btn-hoverable:hover svg,
.btn-dark.btn-outline.btn-hoverable:focus svg {
    stroke: var(--white-color);
}

.btn-dark.btn-outline.active {
    background-color: var(--black-color) !important;
    color: var(--white-color);
}

.btn-muted {
    background-color: var(--muted-color) !important;
}

.btn-muted:not(.btn-outline):hover,
.btn-muted:not(.btn-outline):focus {
    background-color: var(--muted-color) !important;
}

.btn-muted.btn-outline {
    background-color: transparent !important;
    border-color: var(--muted-color);
}

.btn-muted.btn-outline {
    background-color: transparent !important;
    border: 1px solid var(--muted-color) !important;
    color: var(--muted-color);
}

.btn-muted.btn-outline.btn-hoverable:hover,
.btn-muted.btn-outline.btn-hoverable:focus {
    background-color: var(--muted-color) !important;
    color: var(--white-color);
}

.btn-muted.btn-outline.active {
    background-color: var(--muted-color) !important;
    color: var(--white-color);
}

.btn-resume-cart {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: #eeeeee;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    color: #000;
    transition: all .15s ease;
}

.btn-resume-cart:hover,
.btn-resume-cart.active {
    background-color: rgba(var(--primary-color-rgb), .1);
}

.btn-resume-cart.active {
    color: var(--primary-color);
}

.btn-resume-cart svg {
    width: 60%;
    height: 60%;
    transition: all .15s ease;
}

.lh-15 {
    line-height: 1.5;
}

.quick-link {
    transition: transform .2s ease, color .2s ease;
    text-rendering: optimizeLegibility;
    color: var(--foreground-color);
}
.quick-link .icon {
    width: 6rem;
    aspect-ratio: 1 / 1;
}

.quick-link:hover {
    color: var(--primary-color);
    transform: scale(1.06);
}

.disabled,
:disabled {
    opacity: 0.55 !important;
    pointer-events: none;
    cursor: default;
}

.no-auto-fill input:-webkit-autofill,
.no-auto-fill input:-webkit-autofill:hover,
.no-auto-fill input:-webkit-autofill:focus,
.no-auto-fill input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--foreground-color);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px rgba(242, 242, 242, 0.01);
}

.filled-input {
    background-color: var(--white-color);;
    border-radius: .5rem;
    padding: 1.8rem 2rem 1.8rem 2rem;
    height: auto;
    border: 1px solid rgba(0,0,0,.1);
    font-size: 1.5rem;
    transition: all .15s ease;
}

.filled-input:not([readonly]):focus {
    background-color: var(--white-color);
    border: 1px solid var(--primary-color);
    box-shadow: var(--primary-color-opacity-1) 0 4px 12px !important;
}

.fw-600 {
    font-weight: 600;
}

.fw-500 {
    font-weight: 500;
}

.alert-message-list {
    position: fixed;
    top: 3.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 350px;
    height: auto;
    z-index: 9999;
    visibility: hidden;
}

.alert-message-list .alert-message-item {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 1.5em;
    background-color: var(--background-color);
    box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
    color: var(--white-color) !important;
    border-radius: .25rem;
    cursor: pointer;
    opacity: 0;
    transform: scale(.7);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.alert-message-list .alert-message-item.show {
    animation: alert-fade-in .3s ease forwards;
}

.alert-message-list .alert-message-item p {
    font-size: 1.35rem;
}

@keyframes alert-fade-in {
    0% {
        opacity: 0;
        transform: scale(.7);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.alert-message-list .alert-message-item.hidden {
    animation: alert-fade-out .3s ease forwards;
}

@keyframes alert-fade-out {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.alert-message-list .alert-message-item:not(:last-child) {
    margin-bottom: 1.25rem;
}

.alert-message-list .alert-message-item .alert-msg-icon,
.alert-message-list .alert-message-item .alert-close-icon {
    width: 2.6rem;
}

.alert-message-list .alert-message-item.success-alert {
    background-color: rgb(11, 183, 75);
}

.alert-message-list .alert-message-item.warning-alert {
    background-color: rgba(248, 110, 26, 1);
}

.alert-message-list .alert-message-item.error-alert {
    background-color: var(--bs-danger);
}

@keyframes btnPulse {
    0% {
        opacity: .7;
        transform: scale(1);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scaleX(1.1) scaleY(1.4);
    }
}

.skeleton {
    background: #212531;
    background: linear-gradient(110deg, #e5e5e5 8%, #f0f0f0 18%, #e5e5e5 33%);
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
    border-radius: .25rem;
    z-index: 2;
}

.filter-grayscale-1 {
    filter: grayscale(1);
}

.filter-white {
    filter: brightness(0) invert(1);
}

.mx-w-400 {
    max-width: 400px;
}

.mx-w-350 {
    max-width: 350px;
}

.mx-w-300 {
    max-width: 300px;
}

.mx-w-250 {
    max-width: 250px;
}

.mx-w-550 {
    max-width: 550px;
}

.mx-h-300 {
    max-height: 300px;
}

.product-img {
    width: 7rem;
    min-width: 7rem;
    height: auto;
    margin-right: 1rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 100%;
}

.select2-container .select2-selection--single {
    height: 6rem !important;
}

.select2-selection__placeholder {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 1.5rem;
}

.select2-container .select2-selection__single {
    background-color: var(--white-color);
    border-radius: .5rem;
    padding: 1.8rem 6rem 1.8rem 2rem;
    border: 1px solid rgba(0,0,0,.1);
    font-size: 1.5rem;
    transition: all .15s ease;
}

.select2-search--dropdown,
.select2-search--dropdown .select2-search__field {
    padding: 1rem !important;
}

.select2-search--dropdown .select2-search__field {
    font-size: 1.4rem !important;
}

.select2-search--dropdown .select2-search__field:focus {
    outline: none !important;
    box-shadow: unset !important;
    border-color: var(--primary-color) !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 2rem !important;
    padding-right: 2rem  !important;
}

.select2-results__option.select2-results__message {
    font-size: 1.25rem !important;
    padding: 0 1rem 1rem 1rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

.iti{
    width: 100%;
}

.iti .iti__selected-flag{
    background-color: unset!important;
    font-size: 1.6rem;
}

.iti__country {
    font-size: 1.4rem;
}

.text-overflow-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.cP {
    cursor: pointer;
}

.lh-175 {
    line-height: 1.75;
}

.lh-2 {
    line-height: 2;
}

.mh-100vh {
    min-height: 100vh;
}

.break-all {
    word-break: break-all;
}

.user-select-none {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.overflow-y-hidden {
    overflow-y: hidden !important;
}

.max-w-200 {
    max-width: 200px;
}

.max-w-350 {
    max-width: 350px;
}

.fs-0 {
    font-size: calc(2rem + 1.3vw);
}

.fade-in-to-bottom {
    animation: fadeIn .8s ease both;
}

.no-scrollbar {
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    scrollbar-width: none;
}


.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.loader {
    width: 5rem;
    height: 5rem;
    border: 4px solid var(--primary-color);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.btn-error {
    animation: shake 1s cubic-bezier(.36, .07, .19, .97) both;
    backface-visibility: hidden;
}

.min-h-screen {
    min-height: 100vh;
}

.info-message {
    width: 100%;
    border-radius: .25rem;
}

.info-message.info-message-green {
    background-color: rgba(5, 187, 42, 0.75)
}

.info-message .icon {
    width: 5rem;
    max-width: 5rem;
    min-width: 5rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 1.2rem;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
}

@supports (height: 100svh) {
    .min-h-screen {
        min-height: 100svh;
    }
}

@keyframes shake {
    0% {
        background-color: var(--bs-danger);
        transform: translateX(0);
    }
    100%{
        transform: translateX(0);
        background-color: var(--primary-color);
    }
    10%{
        background-color: var(--bs-danger);
        transform: translateX(-10px);
    }
    30%, 50%, 70%, 90% {transform: translateX(-10px);}
    20%, 40%, 60%, 80% {transform: translateX(0px);}
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-unset {
    flex: unset;
}

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

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

.fill-black {
    fill: var(--black-color);
}

.fill-white {
    fill: var(--white-color);
}

.stroke-black {
    stroke: var(--black-color);
}

.stroke-white {
    stroke: var(--white-color);
}

.fill-muted {
    fill: var(--muted-color);
}

.stroke-muted {
    stroke: var(--muted-color);
}

.fill-light-black {
    fill: #333;
}

.stroke-light-black {
    stroke: #333;
}

.form-container {
    width: 450px;
    max-width: 85vw;
    margin: 0 auto;
}

.input-spacer {
    height: 5rem;
}

.credit-card {
    background-color: #45b5f8;
    padding: 2rem;
    border-radius: 1.5rem;
    min-height: 16rem;
}

.credit-card .card-number {
    font-size: calc(2rem + .1vw);
}

.credit-card .dots {
    letter-spacing: .3rem;
}

.document-action {
    width: 3.2rem;
    aspect-ratio: 1;
    cursor: pointer;
    border-radius: 50%;
    padding: .35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.document-action svg {
    width: 100%;
    height: auto;
}

.selected-file-box {
    padding: 2.5rem;
    width: 100%;
    border-radius: 1.8rem;
}

#d9ex_chat #d9ex_forceclose {
    background-color: transparent !important;
    font-size: 0;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="%23000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="%23fff" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"></path></g></svg>') !important;
    background-size: 1.8rem;
    width: 1.8rem;
    height: 1.8rem;
    padding: .2rem;
    right: 15px !important;
    top: 2rem !important;
    position: absolute;
}

#d9ex_chat .d9ex_chatTabHeader .d9ex_tabTitle {
    font-size: 1.6rem !important;
    font-weight: 900;
}

#d9ex_chat .d9ex_chatFormGroup label {
    font-size: 1.25rem !important;
}

#d9ex_chat .iti__selected-dial-code,
#d9ex_chat .d9ex_chatFormGroup input {
    font-size: 1.25rem !important;
}

#d9ex_chat .d9ex_chatTab .d9ex_arrowLeft {
    width: 2.4rem !important;
    height: 2.4rem !important;
}

.profile-img-box {
    width: 9rem;
    height: 9rem;
    background-color: var(--primary-color);
    position: relative;
}

.profile-img-box svg {
    width: 90%;
    height: 90%;
    position: absolute;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--background-color);
}

.profile-user-name {
    font-size: calc(2rem + .1vw);
    font-weight: 900;
}

.profile-user-email {
    font-size: calc(1.4rem + .1vw);
    color: #787878;
    font-weight: 500;
}

.profile-info-box {
    font-size: 1rem;
    border-width: 1px;
    border-style: solid;
    border-radius: 1.5rem;
}

.profile-info-box li:not(:last-child) {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.profile-info-box,
.profile-info-box li:not(:last-child) {
    border-color: #b4b4b4;
}

.profile-info-item svg {
    width: 2em;
    min-width: 2em;
    margin-right: 1.75em;
}

.profile-info-item p {
    font-size: 1.3em;
    word-break: break-all;
}

.stepper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
}

.step {
    text-align: center;
    flex: 1;
    position: relative;
}

.step .circle {
    width: 4.2rem;
    aspect-ratio: 1;
    box-shadow: unset;
    border: 2px solid rgb(204, 204, 204);
    background-color: var(--background-color);
    color: rgb(171, 171, 171);;
    line-height: 1;
    margin: 0 auto;
    font-weight: bolder;
}

.step.completed .circle,
.step.active .circle {
    border-color: transparent;
    background-color: #4caf50;
}


.step.completed .circle {
    color: #fff;
}

.step.active .circle {
    border-color:var(--primary-color);
    background-color: #fff;
    color: var(--primary-color);
}

.step .label {
    margin-top: 5px;
    color: rgb(171, 171, 171);
}

.step.completed .label,
.step.active .label {
    color: var(--primary-color);
}

.step::after {
    content: '';
    position: absolute;
    top: 2rem;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: #e0e0e0;
    z-index: -1;
}

.step:last-child::after {
    width: 0;
}

.step.completed::after {
    background-color: var(--primary-color);
}

.service-card {
    padding: 2.4rem !important;
    border: 1px solid #cfcfcf;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.06) 0px 6px 5px 0px;
}

.list-item .circle {
    display: inline-block;
    min-width: .7rem;
    width: .7rem;
    border-radius: 50%;
    aspect-ratio: 1;
    background-color: rgba(var(--primary-color-rgb), 1);
    margin-right: 1.5rem;
}


.upload-area {
    border: 2px dashed  rgba(var(--primary-color-rgb), .7);
    background-color: rgba(var(--primary-color-rgb), .05);
    color:  rgba(var(--primary-color-rgb), .6);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.upload-area:hover {
    background-color: rgba(var(--primary-color-rgb), .14);
    border-color:  rgba(var(--primary-color-rgb), 1);
}

.upload-area input[type="file"] {
    display: none;
}

.upload-icon  {
    width: 3rem !important;
    height: 3rem !important;
    color:  rgba(var(--primary-color-rgb), 1);
}

.upload-instruction {
    font-size: calc(1.2rem + .05vw);
    font-weight: 600;
    color: #1e293b;
}

.upload-subtext {
    font-size: calc(1.1rem + .05vw);
    color: #64748b;
    margin-top: 0.25rem;
}

.min-h-7rem {
    min-height: 7rem;
}

.min-h-6rem {
    min-height: 6rem;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

h1,h2,h3,h4,h5,
h1.lh-175,h2.lh-175,h3.lh-175,h4.lh-175,h5.lh-175 {
    line-height: 1.5 !important;
}

.c_calma .header-bg {
    padding-bottom: 3rem !important;
}

@keyframes fadeRight {
    0% {
        opacity: 0;
        transform: translateX(-1.5rem);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeBottom {
    0% {
        opacity: 0;
        transform: translateY(-1.5rem);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-6px);
    }
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-6px);
    }
}

@media (min-width: 550px) {
    .selected-objective-box {
        margin-right: 0;
        margin-left: 0;
        padding: 2.5rem;
        border-radius: 1rem;
    }

    .scroll-container {
        margin-right: 0;
        margin-left: 0;
        padding: 0 50%;
    }
}

@media (min-width: 768px) {
    .preschedule-page main {
        margin-top: 0;
    }

    .profile-card {
        transform: translateY(-8.5rem);
    }

    .profile-img-box {
        background-color: var(--background-color);
    }

    .profile-img-box svg {
        color:  var(--primary-color);
    }
}

@media (min-width: 991px) {
    .alert-message-list {
        position: fixed;
        top: unset;
        bottom: 5%;
        left: unset;
        right: 3.5%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 350px;
        height: auto;
        z-index: 9999;
        visibility: hidden;
    }
}


@media (min-width: 1200px) {
    .modal .modal-halfscreen .modal-content {
        border-radius: 5rem;
        margin: auto !important;
    }

    .cam-test {
        aspect-ratio: 16 / 9;
    }

    .border-bottom.border-bottom-xl-show {
        border-bottom: 1px solid #dee2e6 !important;
    }

    .border-bottom.border-bottom-xl-hidden {
        border-bottom: 0 !important;
    }
}

@media (max-width: 380px) {
    html {
        font-size: 50%;
    }
}