/* titillium-web-latin-400-normal */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/titillium-web@latest/latin-400-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* titillium-web-latin-700-normal */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/titillium-web@latest/latin-700-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Colores */
    --primary-color-rgb: 0 110 181;
    --secondary-color-rgb: 115 114 114;
    --border-color-rgb: 0 110 181;
    /* Dimensiones */
    --border-radius-default: 0.5rem;
}

* {
    padding: 0;
    margin: 0;
    outline: none !important;
    box-sizing: border-box;

}

html,
body {
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    color: rgb(var(--secondary-color-rgb));
    font-family: 'Titillium Web', sans-serif;
}

.header {
    padding-top: 3rem;
    display: flex;
    justify-content: center;
}

.header-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

    .header-container img {
        width: 130px;
        aspect-ratio: 116/75;
    }

    .header-container > div {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    .header-container span {
        width: 65px;
        height: 65px;
        border: 2px solid rgb(var(--primary-color-rgb));
        border-radius: 50%;
        color: rgb(var(--primary-color-rgb));
        font-size: 2.5rem;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
        user-select: none;
    }

        .header-container span.active {
            color: rgb(255 255 255);
            background-color: rgb(var(--primary-color-rgb));
        }

        .header-container span.inactive {
            color: rgb(var(--primary-color-rgb));
            background-color: rgb(255 255 255);
        }

.separator {
    width: 150px;
    height: 3px;
    background-color: rgb(var(--primary-color-rgb));
}

.main {
    flex-direction: column;
    padding-block: 1rem;
    display: flex;
    justify-content: center;
}

    .main p,
    .main small {
        word-wrap: break-word;
    }

    .main legend {
        font-weight: 700;
        line-height: 2rem;
    }

.main-container img {
    border-radius: var(--border-radius-default);
}

.toggle {
    display: none;
}

.labelcontrato {
    display: block !important;
}

.inputcontrato {
    width: 12rem !important;
    height: 2rem !important;
}

.title {
    margin-bottom: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

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

.form-element {
    width: 100% !important;
    padding: 0.375rem 0.75rem !important;
    border: 2px solid rgb(var(--border-color-rgb)) !important;
    border-radius: var(--border-radius-default);
    color: rgb(var(--secondary-color-rgb)) !important;
    transition: box-shadow 0.15s ease-in-out;
}

    .form-element:focus {
        box-shadow: 0 0 0 0.2rem rgb(var(--border-color-rgb) / 25%);
    }

    .form-element:disabled,
    .form-element[readonly] {
        background-color: rgb(233 236 239 / 80%);
    }

.button-primary,
.button-secondary {
    padding: 0.4rem 1.5rem !important;
    border: none !important;
    border-radius: var(--border-radius-default) !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    user-select: none !important;
    transition: box-shadow 0.15s ease-in-out !important;
}

.button-primary {
    color: rgb(255 255 255) !important;
    background-color: rgb(var(--primary-color-rgb)) !important;
}

    .button-primary:focus {
        box-shadow: 0 0 0 0.2rem rgb(var(--border-color-rgb) / 25%) !important;
    }

.button-secondary {
    color: rgb(255 255 255) !important;
    background-color: rgb(var(--secondary-color-rgb)) !important;
}

    .button-secondary:focus {
        box-shadow: 0 0 0 0.2rem rgb(var(--secondary-color-rgb) / 25%) !important;
    }

.iconHelpDivDark {
    background-image: url('../images/alert-circle-black.svg');
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: auto 15px;
    width: 19px;
    height: 15px;
    display: inline-block;
}

.descripcion {
    font-size: 1em;
}

.DescripcionPaso{
    margin: 0 auto;
    font-weight: 900;
}

.DescripcionPaso3 {
    width: 100% !important;
    font-size: 1rem;
    font-weight: 900;
}

.pnlPaso1 {
    margin: 0 auto;
}

.pnlNumeroContrato {
    display: flex;
    align-items: center;
}

.pnlPaso2 {
    margin: 0 auto;
}

.pnlPaso3 {
    margin-top: 2em;
    
}

.contenedorcontrato {
    margin-right: 4rem !important;
    flex-direction: column;
    justify-content: center;
}

.informacionsol {
    font-size: 1.5rem;
    color: #006eb5;
    margin-bottom: 1rem;
}

.atiendevisita {
    z-index: 2 !important;
    opacity: 1 !important;
    border: none !important;
    width: 100% !important;
    position: relative !important;
}

.aceptaterminos {
    z-index: 1 !important;
    opacity: 1 !important;
    border: none !important;
    width: 67.8% !important;
    position: relative !important;
}

.plnDatosAtiendeVisita {
    display: none !important;
}

.solicitavisita {
    margin: 0px !important;
    padding: 0px !important;
    flex-direction: column !important;
}

.custom-control-input.atiendevisita input[type="radio"] {
    margin-bottom: 0.1rem;
    margin-left: 0.1rem;
}

.custom-control-input.aceptaterminos input[type="radio"] {
    margin-bottom: 0.1rem;
    margin-left: 0.1rem;
}

.aceptaterminos label {
    margin-bottom: 0.3rem !important;
    margin-left: 0.2rem !important;
}

.solicitavisita label {
    margin-bottom: 0.3rem !important;
    margin-left: 0.2rem !important;
}

.protecciondatos {
    font-size: 1.3rem;
    color: #006eb5;
}

.terminosycond {
    font-size: 1rem;
    font-weight: 600;
}

.popover {
    min-width: 380px;
}

.imgBanner{
    object-fit: cover;
}

.mainp3{
    align-items: center !important;
}

.btnfinal{
    margin-left: 0px !important;
}


/* Estilos POP-UP */
.ajs-header {
    background: rgb(var(--primary-color-rgb)) !important;
    color: #fff;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    font-weight: 900 !important;
}

.alertify {
    border-radius: 10px !important;
}

.ajs-footer {
    border-radius: 10px !important;
}

.ajs-dialog {
    border-radius: 10px !important;
    position: absolute !important;
    margin: 0px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 80% !important;
}

.ajs-button {
    color: rgb(255 255 255) !important;
    background-color: rgb(var(--primary-color-rgb)) !important;
    font-size: 1em !important;
    border-radius: 0.5rem !important;
    font-weight: 900 !important;
}

.ajs-content {
    color: #60636B !important;
    font-family: 'Titillium Web', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 200 !important;
}

.ajs-close {
    background-image: url('../images/close-svgrepo-com.svg') !important;
}
/* Tablet */
@media (width < 834px) {
    .header-container,
    .main-container {
        width: 80% !important;
    }
}

/* Mobile */
@media (width < 480px) {
    .header-container img {
        width: 200px;
    }

    .header-container span {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .separator {
        width: 65px;
        height: 2px;
    }

    .main {
        padding-top: 2rem;
    }
}

@media (width < 1200px) {
    .pnlNumeroContrato {
        flex-direction: column;
    }
    .contenedorcontrato {
        margin-right: 0px !important;
    }
}