@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 100 900;
    src: url(../fonts/montserrat/Montserrat-VariableFont_wght.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: Montserrat;
    font-style: italic;
    font-weight: 100 900;
    src: url(../fonts/montserrat/Montserrat-Italic-VariableFont_wght.ttf) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: TT Hoves Pro;
    font-style: normal;
    font-weight: 100 900;
    src: url("../fonts/tt-hoves-pro/TT Hoves Pro Trial Variable.ttf") format("truetype")
}

@font-face {
    font-display: swap;
    font-family: TT Hoves Pro;
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/tt-hoves-pro/TT Hoves Pro Trial Italic.ttf") format("truetype")
}

@font-face {
    font-display: swap;
    font-family: TT Hoves Pro;
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/tt-hoves-pro/TT Hoves Pro Trial Bold.ttf") format("truetype")
}

.modal .modal-dialog .modal-content {
    border-radius: .75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-block: 1.5rem
}

.modal .modal-dialog .modal-content .modal-header {
    align-items: center;
    border: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 1.5rem
}

.modal .modal-dialog .modal-content .modal-header .modal-title {
    color: #185a96;
    font-family: TT Hoves Pro, sans-serif;
    font-size: 1.125rem;
    font-weight: 600
}

.modal .modal-dialog .modal-content .modal-header .close {
    height: 1rem;
    line-height: 0;
    margin: 0;
    opacity: .6;
    padding: 0;
    width: 1rem
}

.modal .modal-dialog .modal-content .modal-header .close:hover {
    opacity: 1
}

.modal .modal-dialog .modal-content .modal-header .close svg {
    height: 1rem;
    width: 1rem
}

.modal .modal-dialog .modal-content .modal-body {
    padding: 0 1.5rem
}

.modal .modal-dialog .modal-content .modal-footer {
    border: none;
    padding: .75rem 1.5rem 0
}

.modal .modal-dialog .modal-content .modal-footer>* {
    margin: 0
}

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

.btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 12px;
    box-sizing: border-box;
    display: inline-flex;
    font-family: TT Hoves Pro, sans-serif;
    font-size: .875rem;
    font-weight: 500;
    gap: .5rem;
    justify-content: center;
    line-height: 1.65;
    padding: .325rem 1rem;
    white-space: nowrap;
    width: 100%
}

.btn:disabled {
    cursor: not-allowed;
    opacity: .5;
    pointer-events: none
}

.btn.btn-primary {
    background-color: #185a96;
    border-color: #185a96;
    color: #fff
}

.btn.btn-outline-primary {
    background-color: #fff;
    border-color: #185a96;
    color: #185a96
}

.btn.btn-outline-primary:not(:disabled):is(:hover, :active, :focus) {
    background-color: #f5f6f8;
    border-color: #185a96;
    color: #185a96
}

.btn.btn-secondary {
    background-color: #11aa98;
    border-color: #11aa98;
    color: #fff
}

.btn.btn-secondary:hover {
    background-color: #119d8d
}

.btn.btn-outline-secondary {
    background-color: #fff;
    border-color: #11aa98;
    color: #11aa98
}

.btn.btn-outline-secondary:not(:disabled):is(:hover, :active, :focus) {
    background-color: #f5f6f8;
    border-color: #11aa98;
    color: #11aa98
}

.btn svg {
    height: 1rem;
    width: 1rem
}

.btn.btn-outline-danger {
    border: 1px solid #dc2626;
    color: #dc2626
}

.btn.btn-outline-danger:hover {
    background-color: #dc2626;
    color: #fff
}

.btn.btn-primary-secondary {
    background-image: linear-gradient(90deg, #185a96, #11aa98);
    border-color: #185a96;
    color: #fff
}

.btn.btn-primary-secondary:hover {
    opacity: .9
}

.card {
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: .75rem;
    box-shadow: 2px 4px 4px #e5e5e5;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    overflow: hidden;
    padding: 1.5rem 0
}

.card .card-body,
.card .card-footer,
.card .card-header {
    background-color: #fff;
    border: 0;
    padding: 0 1.5rem
}

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

body {
    background-color: #f5f5f5
}

.form-group {
    margin: 0
}

.form-group .form-label {
    margin-bottom: .5rem
}

select.form-control {
    background-color: #fff;
    margin: 0 !important
}

.form-label {
    align-items: center;
    color: #185a96;
    display: flex;
    font-size: .875rem;
    font-weight: 500;
    gap: .5rem;
    line-height: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.group[data-disabled=true] .form-label {
    opacity: .5;
    pointer-events: none
}

.peer:disabled~.form-label {
    cursor: not-allowed;
    opacity: .5
}

.form-control {
    background-color: #f5f5f5;
    border: 1px solid #81d1c8;
    border-radius: .5rem;
    display: flex;
    font-size: 1rem;
    height: 3rem;
    line-height: 1.5rem;
    min-width: 0;
    outline: none;
    padding: .25rem .75rem;
    transition-duration: .15s;
    transition-property: color, box-shadow;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    width: 100%
}

.form-control::-moz-placeholder {
    color: #737373
}

.form-control::placeholder {
    color: #737373
}

.form-control:disabled {
    cursor: not-allowed;
    opacity: .5;
    pointer-events: none
}

@media (min-width:768px) {
    .form-control {
        font-size: .875rem;
        line-height: 1.25rem
    }
}

.form-control:focus-visible {
    border-color: #a3a3a3;
    box-shadow: 0 0 0 3px #a3a3a3
}

.form-control:focus {
    border-color: #a3a3a3
}

.form-check-input-group {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.form-check-input {
    align-items: flex-start;
    display: flex;
    gap: .5rem;
    margin-left: unset;
    margin-top: unset;
    position: static
}

.form-check-input input[type=checkbox] {
    clip: rect(0, 0, 0, 0);
    border-width: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.form-check-input label:has(input[type=checkbox]) {
    align-items: center;
    background-color: #f5f5f5;
    border: 1px solid #11aa98;
    border-radius: 4px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    display: block;
    display: flex;
    flex-shrink: 0;
    height: 1rem;
    justify-content: center;
    margin-top: .25rem;
    outline: none;
    transition: box-shadow .15s ease-in-out;
    width: 1rem
}

.form-check-input label:has(input[type=checkbox]) svg {
    color: transparent;
    height: .875rem;
    width: .875rem
}

.form-check-input label:has(input[type=checkbox]:checked) {
    background-color: #11aa98;
    border-color: #11aa98;
    color: #fff
}

.form-check-input label:has(input[type=checkbox]:checked) svg {
    color: #fff
}

.form-check-input label:has(input[type=checkbox]:focus-visible) {
    border-color: #11aa98;
    box-shadow: 0 0 0 3px #11aa98
}

.form-check-input label:has(input[type=checkbox]:disabled) {
    cursor: not-allowed;
    opacity: .5
}

.form-check-input label:not(:has(input[type=checkbox])) {
    color: #171717;
    display: block;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text
}

@media screen and (min-width:768px) {
    .form-check-input label:not(:has(input[type=checkbox])) {
        font-size: 1rem
    }
}

.form-check-input label:not(:has(input[type=checkbox])) a {
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Arial, sans-serif;
    font-size: .875rem
}

@media screen and (min-width:768px) {
    .form-check-input label:not(:has(input[type=checkbox])) a {
        font-size: 1rem
    }
}

.btn-primary-secondary {
    align-items: center;
    background-image: linear-gradient(90deg, #185a96, #11aa98);
    border-radius: .5rem;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: .875rem;
    font-weight: 500;
    gap: .5rem;
    height: 3rem;
    justify-content: center;
    outline: none;
    padding: .5rem 1rem;
    text-transform: uppercase;
    transition: all .15s cubic-bezier(.4, 0, .2, 1);
    white-space: nowrap;
    width: 100%
}

.btn-primary-secondary:hover {
    background-color: #185a96;
    opacity: .9
}

.btn-primary-secondary:disabled {
    opacity: .5;
    pointer-events: none
}

.btn-primary-secondary:focus-visible {
    border-color: #185a96;
    box-shadow: 0 0 0 3px #185a96
}

.btn-primary-secondary:has(>svg) {
    padding-left: .75rem;
    padding-right: .75rem
}

.btn-primary-secondary svg {
    flex-shrink: 0;
    pointer-events: none
}

.btn-primary-secondary svg:not([class*=size-]) {
    height: 1rem;
    width: 1rem
}

:focus {
    box-shadow: 0 0 0 3px #185a96;
    outline: none
}

.containerFormLogin {
    align-items: center;
    border-radius: 16px;
    box-shadow: 0 0 5.3px rgba(0, 0, 0, .036), 0 0 17.9px rgba(0, 0, 0, .054), 0 0 80px rgba(0, 0, 0, .09);
    color: #212529;
    display: flex;
    flex-direction: column;
    font-size: 14.4px;
    font-weight: 400;
    justify-content: center;
    line-height: 23.0333px;
    margin-inline: auto;
    max-width: 28rem;
    padding: 1.5rem 2rem;
}

h1 {
    color: #171717;
    font-family: TT Hoves Pro, sans-serif;
    font-size: 2.75rem;
    font-weight: 600;
    margin-bottom: .75rem;
    margin-top: 0
}

.containerFormLogin>span,
h1 {

    text-align: center
}

.containerFormLogin>span {
    color: #737373;
    font-size: 1rem;
    margin-bottom: 0.8rem
}

.containerFormLogin .selectDropdown,
.form-group.perfil-container {
    width: 100%
}

.containerFormLogin .selectDropdown button {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 2px solid #11aa98;
    border-radius: .5rem;
    color: #185a96;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    height: 3rem;
    padding: 0 1rem;
    text-align: center;
    transition: all .15s cubic-bezier(.4, 0, .2, 1);
    width: 100%
}

.containerFormLogin .selectDropdown button:focus {
    box-shadow: 0 0 0 2px #11aa98;
    outline: none
}

.containerFormLogin .selectDropdown button:hover {
    border-color: #11aa98
}

.containerFormLogin .selectDropdown .dropdown-item {
    background-color: transparent;
    border: 0 #212529;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    box-sizing: border-box;
    clear: both;
    color: #212529;
    display: block;
    font-family: Montserrat, sans-serif;
    font-size: 14.4px;
    font-weight: 400;
    line-height: 23.0333px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    padding: .25rem 1.5rem;
    text-align: inherit;
    text-decoration-color: #212529;
    text-decoration-line: none;
    text-decoration-style: solid;
    text-decoration-thickness: auto;
    transition: background-color 0ms;
    white-space: nowrap;
    width: 100%
}

.containerFormLogin .selectDropdown .dropdown-item:is(:hover, :focus) {
    background-color: #e9ecef !important;
    color: #16181b !important;
    text-decoration: none !important
}

.containerFormLogin hr {
    background: #e7e7e7;
    height: 1px;
    width: 20rem
}

.register {
    align-items: center;
    border-top: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Arial, sans-serif;
    font-size: 1rem;
    gap: .5rem;
    justify-content: center;
    padding-top: 0.8rem
}

.register span {
    color: #737373;
    font-weight: 400
}

.register a {
    color: #185a96;
    font-weight: 500;
    text-decoration: none
}

.formLogin {
    width: 100%
}

.formLogin>:not(:last-child) {
    margin-bottom: 0.8rem;
    margin-top: 0
}

.formLogin .inputForm {
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: .8rem 0;
    text-align: center;
    width: 100%
}

.formLogin .buttonLogin {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: var(--COLOR-GREEN);
    background-image: none;
    background-origin: padding-box;
    background-position-x: 0;
    background-position-y: 0;
    background-repeat: repeat;
    background-size: auto;
    border: 0 #fff;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: Montserrat, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 27.2px;
    margin: 0;
    overflow-x: visible;
    overflow-y: visible;
    padding: 10px 20px;
    text-align: center;
    text-transform: none;
    width: 100%
}

a {
    -webkit-font-smoothing: unset !important;
    color: #185a96;
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Arial, sans-serif;
    font-size: .875rem;
    font-weight: 500;
    text-shadow: none !important
}

a:active,
a:hover {
    text-decoration: underline
}

a:hover {
    color: #185a96
}

a.buttonRegister {
    font-size: 1rem
}

.dropdown-toggle:after {
    position: absolute;
    right: 25px;
    top: 20px
}

.breadcrumb {
    background-color: #fff;
    border: 1px solid #b4d9fd;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: .75rem 1rem
}

.breadcrumb,
ol {
    list-style: none
}

.nav-opt {
    border: 1px solid #badce4;
    border-radius: 10px;
    margin-bottom: 1rem;
    padding-top: 15px
}

.alert-container {
    width: 100%
}

.alert-container .alert {
    align-items: flex-start;
    display: flex;
    font-family: Open Sans, sans-serif;
    gap: .5rem;
    padding-right: 1.25rem
}

.alert-container .alert>i {
    font-size: 1rem;
    margin: .25rem
}

.alert-container .alert span {
    align-items: flex-start;
    color: inherit;
    display: flex;
    font-family: inherit;
    gap: .8rem;
    margin: 0
}

.alert-container .alert .close-alert-button {
    all: unset;
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    margin-left: auto;
    padding: .5rem
}

.perfil-container {
    margin-inline: auto;
    max-width: 56rem;
    padding: 3rem 1rem;
    text-align: center
}

.perfil-container h1 {
    color: #185a96
}

.perfil-container>section>p {
    color: #737373;
    font-size: 1.125rem;
    margin-bottom: 3rem
}

.perfil-container .perfils-wrapper {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    margin-bottom: 2rem
}

@media screen and (min-width:768px) {
    .perfil-container .perfils-wrapper {
        grid-template-columns: 1fr 1fr
    }
}

.perfil-container .perfils-wrapper .perfil {
    align-items: center;
    background-color: #fff;
    border: 2px solid transparent;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px #e5e5e5, 0 2px 4px -2px #e5e5e5;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    transition: all .3s
}

.perfil-container .perfils-wrapper .perfil:has(input:checked) {
    border-color: #11aa98;
    box-shadow: 0 10px 20px #e5e5e5;
    scale: 1.05
}

.perfil-container .perfils-wrapper .perfil:hover {
    border-color: #11aa98
}

.perfil-container .perfils-wrapper .perfil-title {
    color: #185a96;
    font-family: TT Hoves Pro, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: .5rem
}

.perfil-container .perfils-wrapper .perfil-description {
    color: #737373;
    font-size: .875rem;
    margin: 0
}

.perfil-container button {
    border-radius: 14px;
    font-size: 1.125rem;
    height: 3.5rem;
    line-height: 1.65;
    padding: .5rem 3rem;
    width: -moz-fit-content;
    width: fit-content
}

.perfil-icon {
    align-items: center;
    background-color: #81d1c8;
    border-radius: 50%;
    color: #fff;
    display: flex;
    height: 5rem;
    justify-content: center;
    width: 5rem
}

.perfil-icon svg {
    height: 2.5rem;
    width: 2.5rem
}

.register-section {
    margin-inline: auto;
    width: min(56.25rem, 100% - 2rem)
}

.register-section .card {
    border-radius: 16px
}

@media screen and (min-width:576px) {

    .register-section .card-body,
    .register-section .card-footer,
    .register-section .card-header {
        padding: 0 2rem
    }
}

.register-section h1 {
    color: #185a96;
    margin-bottom: 2rem
}

.register-section form>:not(:last-child) {
    margin-bottom: 2rem
}

.register-section form>:not(:last-child)>:not(:last-child) {
    margin-bottom: 1.5rem
}

.register-section form .form-section-header {
    align-items: center;
    border-bottom: 2px solid #11aa98;
    display: flex;
    gap: .5rem;
    padding-bottom: .75rem
}

.register-section form .form-section-header svg {
    color: #11aa98;
    height: 1.25rem;
    width: 1.25rem
}

.register-section form .form-section-header h2 {
    color: #185a96;
    font-family: TT Hoves Pro, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0
}

.register-section form .customer-form-row {
    display: grid;
    gap: 1rem
}

@media screen and (min-width:576px) {
    .register-section form .customer-form-row {
        grid-template-columns: 1fr 1fr
    }
}

.register-section form .customer-form-row [data-input=neighborhood] {
    grid-column: 1/3
}

.register-section form [data-selected=false] {
    display: none
}

.already-registered {
    color: #737373;
    font-family: TT Hoves Pro, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding-block: 2rem;
    text-align: center
}

.already-registered a {
    color: #185a96
}

.confirm-email {
    font-family: TT Hoves Pro, sans-serif;
    margin-inline: auto;
    padding-block: 3rem 4rem;
    text-align: center;
    width: min(32rem, 100% - 2rem)
}

.confirm-email .card-body,
.confirm-email .card-footer,
.confirm-email .card-header {
    padding-inline: 3rem
}

.confirm-email .perfil-icon {
    background-color: #ccece9;
    color: #11aa98;
    margin-inline: auto;
    margin-bottom: 1.5rem
}

.confirm-email .perfil-icon svg {
    height: 3.325rem;
    width: 3.325rem
}

.confirm-email h1 {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 1rem
}

.confirm-email h2 {
    color: #185a96;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 2rem
}

.confirm-email p {
    font-size: 1rem;
    line-height: 1.35;
    margin: 0
}

.confirm-email p:not(:last-child) {
    margin-bottom: .25rem
}

.confirm-email form:has(.btn-confirm-email) {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem
}

.confirm-email form:has(.btn-confirm-email) button {
    background-color: #11aa98;
    border-radius: 8px;
    padding: .875rem 1.325rem
}