html,
body {
    margin: 0;
    padding: 0;
    background: var(--black-1);
}

* {
    box-sizing: border-box;
    max-width: 100%;
    padding: 0px 0px;
    margin: 0;
}

:root {
    --black-1: #1E262A;
    --blue-1: #3792E6;
    --blue-hover-1: #1871C3;
    --blue-2: #4EABE5;
    --verde-1: #3eb9c9;
    --verde-2: #8AD4D0;
    --gris-black: #787878;
    --gris-bold: #B2C6D4;
    --gris-medium: #5A5F69;
    --gris-light: #838994;
    --blanco: #ffffff;
    --backround-card: #F8F8F8;
    --yellow-1: #F9DA49;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/Avenir-Black.ttf') format('opentype'), url('../fonts/Gotham-XLight.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/Avenir-Regular.ttf') format('opentype'), url('../fonts/Gotham-XLight.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/Avenir-Heavy.ttf') format('opentype'), url('../fonts/Avenir-Heavy.ttf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Light.ttf') format('opentype'), url('../fonts/Avenir-Heavy.ttf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bison';
    src: url('../fonts/Bison-Bold.ttf') format('opentype'), url('../fonts/Avenir-Heavy.ttf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

h2 {
    font-family: 'Avenir', sans-serif;
    font-weight: 900;
    margin: 0px;
}

h3 {
    font-family: Arial, Helvetica, sans-serif;
    margin: 6px 0;
}

.hidden {
    display: none!important;
}

.show {
    display: flex!important;
}

.padding-global {
    padding: 0 32px;
    width: 100%;
    box-sizing: border-box;
}

.container-large {
    width: 100%;
    max-width: 1400px;
    margin: auto;
}

.component-form {
    width: 100%;
    padding-top: 76px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
    min-height: 90vh;
}

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

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

.text-weight-normal {
    font-weight: 500!important;
}

.text-weight-bold {
    font-weight: 900!important;
}

.text-aling-center {
    text-align: center;
}

.desktopNone {
    display: none!important;
}

.wrapper-titles {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.title-1 {
    font-family: 'Avenir';
    font-weight: 900;
    color: var(--blanco);
    font-size: 42px;
    line-height: 120%;
}

.title-2 {
    font-family: 'Avenir';
    font-weight: 800;
    color: var(--blanco);
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 0px;
}

.title-center {
    text-align: center;
}

.existe {
    padding: 0 40px;
}

.paragraph-1 {
    font-family: 'Avenir';
    font-weight: 300;
    font-size: 16px;
    color: var(--blanco);
    line-height: 1.5em;
}

.paragraph-3 {
    font-family: 'Avenir';
    font-weight: 200;
    font-size: 24px;
    color: var(--blanco);
    line-height: 1.5em;
}

.inactive {
    display: none!important;
}

.btn-siguiente {
    padding: 10px 22px;
    border-radius: 20pc;
    background-color: var(--blanco);
    color: var(--black-1);
    border-style: none;
    font-family: 'Avenir';
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    cursor: pointer;
    margin-top: 20px;
    border: 1px solid transparent;
    transition: 0.3s;
}

.btn-siguiente:hover {
    background: transparent;
    border: 1px solid var(--blanco);
    color: var(--blanco);
}

.popAlert {
    border-radius: 30px;
    background-color: var(--black-1) !important;
}

.popAlert h4 {
    color: var(--blanco) !important;
}

.general-container {
    height: 100%;
    width: 400px;
    margin: 0 auto;
}

.general-container-second {
    height: 100%;
    width: 520px;
    margin: 0 auto;
}

.container440 {
    width: 100%;
    max-width: 440px;
    margin: auto;
}

.component-load-dpi {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/*NAV BAR*/

.navBar {
    height: 76px;
    width: 100%;
    display: flex;
    align-items: center;
    position: fixed;
    background: transparent;
    border-bottom: 1px solid rgb(236, 226, 226);
    background: var(--black-1);
    z-index: 15;
}

.navBar-logo {
    width: 90px;
}


/*Wraper all*/

.werapper-all {
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--black-1);
    min-height: 100vh;
}


/*COLUMN NAV*/

.column-nav {
    background: transparent;
    width: 50%;
    min-width: 50%;
    display: flex;
    justify-content: start;
    border-right: 1px solid;
    border-image: linear-gradient(to bottom, rgb(236, 226, 226), transparent) 1;
}

.steps {
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: fixed;
}

.linetimline {
    position: absolute;
    background: #F8EDBA;
    width: 2px;
    height: 150px;
    top: 20px;
    left: 11px;
    z-index: 5;
}

.wrapper-line-mobile {
    display: none;
}

.warpper-step {
    display: flex;
    gap: 24px;
    opacity: 1;
    z-index: 10;
    color: #F8EDBA!important;
}

.step-active {
    display: flex;
    gap: 24px;
    color: var(--yellow-1)!important;
}

.number-step {
    font-family: 'Avenir';
    font-weight: 800;
    color: var(--black-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--yellow-1);
    width: 24px;
    height: 24px;
    border-radius: 50px;
}

.text-step {
    font-family: 'Avenir';
    font-weight: 500;
    font-size: 20px;
}

.active {
    color: var(--yellow-1);
}

.completed {
    color: #F8EDBA;
}


/*COLUMN FUNCTION*/

.wrapper-arrow-prev {
    display: flex;
    align-items: center;
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    gap: 12px;
    margin-top: 120px;
    margin-bottom: 32px;
    color: var(--blanco);
}

.wrapper-arrow-prev-space {
    margin-top: 120px;
    margin-bottom: 32px;
}

.wrapper-arrow-prev a {
    display: flex;
    padding: 10px;
    background: #EFF0F6;
    border: 1px solid transparent;
    border-radius: 30px;
    cursor: pointer;
    color: var(--black-1);
    transition: 0.3s ease-in-out;
}

.wrapper-arrow-prev a:hover {
    background: transparent;
    border: 1px solid var(--blanco);
    color: var(--blanco)!important;
}

.content-function {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 0px 32px;
}


/*Buscador*/

.section-load-email {
    display: block;
    height: 100%;
    width: 100%;
    margin: 0 auto;
}

.form-search-name {
    padding: 32px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}

.wrapper-content-alert img {
    width: 60px;
    margin-bottom: 30px;
}

.wrapper-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.label-input {
    font-family: 'Avenir';
    font-weight: 500;
    font-size: 18px;
    color: var(--blanco);
}

.form-search-name input {
    width: 100%;
    border-width: 1px;
    border-radius: 30px;
    padding: 14px 16px;
    font-family: 'Inter';
    font-weight: 300;
    color: var(--blanco);
    font-size: 16px;
    background: transparent;
    border: 1px solid var(--blanco);
}

.button {
    border-radius: 30px;
    border-style: none;
    padding: 10px 22px;
    background: var(--blanco);
    color: var(--black-1);
    font-family: 'Avenir';
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    border: 1px solid transparent;
    transition: 0.3s ease-in-out;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: transparent;
    border: 1px solid var(--blanco);
    color: var(--blanco);
}

.button.is-secondary {
    background: transparent;
    border: 1px solid var(--blanco);
    color: var(--blanco);
    transition: 0.3s ease-in-out;
}

.button.is-secondary:hover {
    background: var(--blanco);
    color: var(--black-1);
    border: 1px solid var(--blanco);
}


/*Alerta no existe*/

.container-contactar-borgatta {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wrapper-content-alert {
    display: flex;
    flex-direction: column;
    color: aliceblue;
    align-items: center;
    justify-content: center;
    gap: 0px;
    width: 100%;
    margin-top: 35%;
}

.paciente-no-existe img {
    width: 64px;
}


/*Alerta Existe*/

.alerta-registrarse {
    background: var(--blue-1);
    display: flex;
    flex-direction: column;
    width: 400px;
    padding: 20px 32px;
    border-radius: 20px;
}


/*Medico registrado*/

.medicoRegistrado {
    background: var(--verde-2);
    display: flex;
    flex-direction: column;
    width: 400px;
    padding: 20px 32px;
    border-radius: 20px;
    color: #fff;
    justify-content: center;
    align-items: center;
}

.medicoRegistrado img {
    width: 48px;
}


/*FORM UPDATE*/

.section-form-update {
    display: block;
    width: 100%;
}

.component-form-update {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.content-grid-form {
    margin-top: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20PX;
    margin-bottom: 16px;
}

.object-form {
    display: flex;
    flex-direction: column;
    gap: 8PX;
}

.object-form label {
    font-family: 'Avenir';
    font-size: 18px;
    font-weight: 500;
}

.inputForm {
    width: 100%;
    border-radius: 16px;
    padding: 8.5px 17px;
    background: transparent;
    border-radius: 30px;
    border: 1px solid #BDBDBDB2;
    font-family: 'Avenir';
    font-size: 18px;
    color: #E1E1E1;
}


/* Estilos para autofill */

.inputForm:-webkit-autofill,
.inputForm:-webkit-autofill:hover,
.inputForm:-webkit-autofill:focus,
.inputForm:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--black-1) inset !important;
    -webkit-text-fill-color: #E1E1E1 !important;
    transition: background-color 5000s ease-in-out 0s;
}

.serch-input:-webkit-autofill,
.serch-input:-webkit-autofill:hover,
.serch-input:-webkit-autofill:focus,
.serch-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--black-1) inset !important;
    -webkit-text-fill-color: #E1E1E1 !important;
    transition: background-color 5000s ease-in-out 0s;
}

.inputFormSelect {
    width: 100%;
    border-radius: 16px;
    padding: 10px 17px;
    background: transparent;
    border-radius: 30px;
    border: 1px solid #BDBDBDB2;
    font-family: 'Avenir';
    font-size: 18px;
    color: #E1E1E1;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('../asets/vector arrow.svg');
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 16px;
}

.inputFormSelect option {
    background-color: var(--black-1);
    color: #E1E1E1;
}

.style-form-fact {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-t-2 {
    padding: 14px 32px;
    border-radius: 20pc;
    background-color: var(--blue-1);
    color: var(--blanco);
    border-style: none;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

.btn-t-2:hover {
    background-color: var(--gris-black);
}

.btn-t-3 {
    padding: 14px 32px;
    border-radius: 20pc;
    background-color: var(--verde-1);
    color: var(--blanco);
    border-style: none;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

.btn-t-3:hover {
    background-color: var(--gris-black);
}


/*COMPROBANTE*/

.wrapper-card-btn-upl {
    margin-top: 25px;
}

.paragraph-2 {
    margin-top: 18px;
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    color: var(--blanco);
}

.card-info-pago {
    font-family: 'Avenir';
    font-size: 32px;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 48px;
    margin-bottom: 28px;
}

.title-price {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 800;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #4EABE5;
}

.divider {
    height: 1px;
    background: #C8C8C8;
}

.price {
    display: flex;
    flex-direction: row;
    align-items: end;
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 50px;
    color: #4F4F4F;
}

.price span {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 8px;
}

.datos-paog {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 850;
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 8px;
    color: #4F4F4F;
}

.nombre-cuenta {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 27px;
    color: #c8c8c8;
}

.title-dat-pago {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 800;
    font-size: 16px;
    line-height: 19px;
    color: var(--blanco);
}

.texto-info-2 {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 27px;
    color: #c8c8c8;
}

.comprobanteImg {
    width: 290px;
    border-radius: 20px;
    object-fit: cover;
    overflow: hidden;
    margin-top: 16px;
}


/*Alerta*/

.text-alert {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 400;
    font-size: 20px;
}

.obj {
    width: 150px;
}


/*FORM INVOICE*/

.form-invoice {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 600px;
}

.wrapper-btn-si-no {
    width: 100%;
    max-width: 434px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 8px;
    gap: 8px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)), rgba(78, 171, 229, 0.05);
    border-radius: 500px;
    margin: 30px 0px;
}

.btn-select-invoice {
    width: 50%;
}

.wrapp-btn-sig-upload {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    margin-top: 25px;
}

.btn-select-invoice span {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 9px 22px;
    border-radius: 64px;
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #fff;
    cursor: pointer;
    border-style: solid;
    border-width: 2px;
    border-color: #00000005;
    transition: 0.3s;
}

.btn-select-invoice span:hover {
    background: #fff;
    border-width: 2px;
    border-color: #fff;
    color: var(--black-1);
}

input[type="radio"] {
    display: none;
    color: #308BBE;
}

.wrapper-radio-edad {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.wrapper-radio-edad label {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    cursor: pointer;
}

.wrapper-radio-edad input[type="radio"] {
    display: block;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.wrapper-radio-edad-container {
    width: 250px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

input:checked+span {
    background: #FFFFFF;
    box-shadow: 0px 2px 8px rgba(52, 139, 219, 0.1);
    cursor: pointer;
    color: var(--black-1)
}

#wrapper-data-factura {
    margin-bottom: 30px;
}

select {
    appearance: none;
}

.wrapper-select {
    position: relative;
}

.wrapper-select i {
    position: absolute;
    right: 20px;
    top: calc(60% - 13px);
    width: 16px;
    height: 16px;
    display: block;
}

.btn-t-2-finalizar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 22px;
    width: 267px;
    height: 57px;
    background: #3792E6;
    border-radius: 35px;
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0.02em;
    color: #FBFBFD;
    border-style: none;
    transition: 0.3s;
}

.btn-t-2-finalizar:hover {
    background: var(--blue-hover-1);
}

.section-form-invoice {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: 100%;
    min-height: 350px;
}


/*

.btn-si {
    width: 50%;
    padding: 8px 24px;
    background: var(--blue-1);
    color: var(--blanco);
    text-decoration: none;
    border-style: none;
    border-radius: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    cursor: pointer;
}

.btn-no {
    width: 50%;
    align-items: center;
    padding: 8px 24px;
    background: var(--verde-1);
    color: var(--blanco);
    text-decoration: none;
    border-style: none;
    border-radius: 20px;
    font-size: 20px;
    cursor: pointer;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
*/

.flex-column {
    display: flex;
    gap: 8px;
}

.icon-ok {
    width: 48px;
    margin: auto;
}

.succes-mesage {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    background: #4EABE5;
    display: flex;
    align-items: center;
}

.succes-mesage {
    position: fixed;
    display: block;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
}

.wrapp-succes-content {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    top: 0;
}

.img-gracias {
    width: 900px;
    position: absolute;
    bottom: -250px;
}

.component-ok {
    width: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
}

.component-ok h3 {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 26px;
    text-align: center;
    letter-spacing: 0.01em;
}

.component-ok h2 {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 700;
    font-size: 42px;
    line-height: 110%;
    /* or 46px */
    text-align: center;
    color: #F4F4F4;
    margin-bottom: 24px;
}

.btns-finalizar {
    display: flex;
}


/*Line footer*/

.line-footer {
    width: 100%;
    display: flex;
    min-width: 100%;
    top: auto;
    bottom: 0px;
    z-index: 2;
    height: 89px;
    align-items: center;
    padding: 0px 32px;
    gap: 20%;
    justify-content: space-between;
    background: var(--black-1);
    z-index: 20;
}

.wrapp-footer {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.text-footer {
    font-family: 'Avenir';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    /* identical to box height */
    display: flex;
    align-items: center;
    text-align: center;
    color: #FBFBFD;
}