@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: sourcesanspro-regular, Roboto;
}

body {
    margin: 0;
    padding: 0;   
    background-color:#ffffff;
}

a, .btn-link {
    color: #0366d6;
}
.main_header {
    
    background-color: transparent;
    color:#ffffff;
}

.main_header_nolayout {
    background-color: #ffffff;
    color: #273576;
}
.main_menu {
    background-color: #fdfdfd;
    color: #ffffff;
}
.nav-link2 {
    color: #7F7F7F;
}
    .nav-link2:hover {
        color: #008BB0;
       
    }

.fondo_gris_oscuro {
    background-color: #0092BC;
    color: #ffffff;
}
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
    .tabla{
        display:table;
    }
    .celda{
        display:table-cell;
        padding:3px;
    }
    .fila{
        display:table-row;
    }
    .round_button{
        border-radius:5px;
        border:1px solid #f7f7ff;
        padding:5px;
        width:180px;
    }
    .logo{
        height:100px;
    }
    .fondo_rojo_oscuro {
        background-color: #CC3333;
    }
    .fondo_rojo_claro {
        background-color: #FF3333;
    }
.fondo_rojo_claro2 {
    background-color: #dc8178;
}
   
    .fondo_gris_claro2 {
        background-color: #eeeff2;
    }
    .fondo_gris_claro {
        background-color: #84929f;
    }
    .fondo_encabezado_grid {
        background-color:#f3f5f7;
        vertical-align:middle;
        border-radius:10px;
    }
.texto_rojo_oscuro {
    color: #CC3333;
}

    .texto_rojo_claro {
        color: #FF3333;
    }

    .texto_gris_oscuro {
        color: #273576;
    }
.texto_gris_oscuro2 {
    color: #505b63;
}

.texto_gris_oscuro3 {
    border-top: 1px solid #84929f;
}

.texto_gris_claro {
    color: #84929f;
    font-size: 14px;
    line-height: 2em;
}
.texto_gris_claro_16 {
    color: #84929f;
    font-size: 16px;
}

.texto_blanco {
    color: #fff;
}
.fondo_blanco {
    background-color: #fff;
}

    .texto_gris_claro {
        color: #84929f;
    }
    .texto_gris_claro2 {
        color: #eeeff2;
    }
.texto_azul {
    color: #273576;
}
.fondo_azul {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2c539e+47,2c539e+59&0.83+32,1+37,0.83+65 */
    background: linear-gradient(to bottom, rgba(44,83,158,0.83) 32%,rgba(44,83,158,1) 37%,rgba(44,83,158,0.94) 47%,rgba(44,83,158,0.87) 59%,rgba(44,83,158,0.83) 65%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.fondo_azul_60 {
    background-color: #8698B0;
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    border-radius:10px;
}
.fondo_azul_30 {
    background-color: #2D3661;
}
    .fondo_verde{
        background-color:#97bf0d;
    }
    .fondo_verde_60{
        background-color:#c5d882;
    }
    .fondo_verde_30{
        background-color:#e3ecc5;
    }
    .fondo_amarillo{
        background-color:#ffed00;
    }
    .fondo_amarillo_30 {
        background-color:#fff381;
    }
    .fondo_amarillo_60 {
        background-color:#fff9c6;
    }
    .fondo_naranja{
        background-color:#f6a700;
    }
    .fondo_naranja_60 {
        background-color: #fccb77;
    }
    .fondo_naranja_30 {
        background-color: #fee6be;
    }

.titulo_gradiente {
    padding:10px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f6f8+0,d8e1e7+50,b5c6d0+51,e0eff9+100;Grey+Gloss+%232 */
    background: linear-gradient(to bottom, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgba(181,198,208,1) 51%,rgba(224,239,249,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.sidebar {
    /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/
    background-color: #fdfdfd;
}

.sidebar .top-row {
    background-color: rgba(0,0,0,0.4);
}

.sidebar .navbar-brand {
    font-size: 1.1rem;
}

.sidebar .oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
    }

.sidebar .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.sidebar .nav-item:first-of-type {
    padding-top: 1rem;
}

.sidebar .nav-item:last-of-type {
    padding-bottom: 1rem;
}

.sidebar .nav-item a {
    color: #273576;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

.sidebar .nav-item a.active {
    background-color: rgba(255,255,255,0.25);
    color: #273576;
}

.sidebar .nav-item a:hover {
    background-color: rgba(255,255,255,0.1);
    color: #273576;
}
.sidebar {
    width: 250px;
    height: 100vh;
    position: sticky;
    top: 0;
}

.sidebar .collapse {
    /* Never collapse the sidebar for wide screens */
    display: block;
}
.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    app {
        flex-direction: row;
    }

  

    .main .top-row {
        position: sticky;
        top: 0;
    }

  
    .navbar-toggler {
        display: none;
    }
  
}
.txt_pdf{
    font-size:small;
}
.smoothShadow {
    box-shadow: 10px 10px 34px -17px rgba(0,0,0,0.75);
    -webkit-box-shadow: 10px 10px 34px -17px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 34px -17px rgba(0,0,0,0.75);
}



.edit_dialog {
    width: 50%;
    margin: 0 auto;
    background-color: #fcfcfc;
    z-index: 999999;
    position: absolute;
    margin-left: 15%;
}

.table {
    display: table;
}

.table-cell {
    display: table-cell;
    padding: 3px;
}

.table-row {
    display: table-row;
}

.img-button {
    width: 36px;
}

#chartdiv {
    width: 100%;
    height: 500px;
}
.table_headers {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.row-hover {
    background-color: #ffffff;
    border-bottom: 1px solid #f4f4f4;
   
    
    color: #000000;
}

    .row-hover:hover {
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100 */
        background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

        color: #080B1A;
        cursor: pointer;
    }

.gradientbackground {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#30184f+0,000000+100&0.65+0,0+100 */
    background: -moz-linear-gradient(left, rgba(48,24,79,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(48,24,79,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(48,24,79,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a630184f', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 9000;
    width: 100%;
    height: 100%;
    opacity: 0.80;
}

.modalcontainer {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 9000;
    width: 100%;
    height: 100%;
    
}


.modaldialogontop {
    width: 40%;       
    opacity: 1;   
    z-index: 10000;    
    height:100%;
    overflow:auto;
    opacity:1;
    margin-left:60%;
    position:fixed;
    float:right;
    
}

/* Default box-shadow */
.box {
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

.tableFixHead {
    overflow-y: auto;
    height: 600px;
}

    .tableFixHead thead th {
        position: sticky;
        top: 0;
    }

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    padding: 8px 16px;
    border-bottom: 1px solid #ccc;
}

th {
    background: #f6f6f7;
}

.titulo {
    color: #595959;
    font-weight: bold;
    font-size: large;
}

.titulo_segmento {
    color: darkblue;
    font-weight: bold;
    font-size: medium;
}

.tabla {
    display: table;
}

.fila {
    display: table-row;
}

.celdaSegtitle {
    background-color: orangered;
    color: #fff;
}

.celda {
    display: table-cell;
    padding: 2px;
}

.celda_centrada {
    display: table-cell;
    text-align: center;
    padding: 2px;
}

.borde_redondo {
    border: 1px solid #afafaf;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
}

.boton_azul {
    background-color: #1294d7;
    border: 1px rgb(72 131 241);
    border-radius: 5px;
    color: #ffffff;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.linea_naranja {
    color: orangered;
    outline-color: orangered;
    background-color: orangered;
}

.celda_azul {
    display: table-cell;
    background-color: #008BB0;
    color: #ffffff;
    text-align: left;
}

.celda_blanca {
    background-color: #ffffff;
    color: #000000;
    text-align: left;
}

.celda_azul_claro {
    display: table-cell;
    background-color: #008BB0;
    color: #000000;
    text-align: left;
}

.centrado {
    text-align: center;
    width: 100%;
}

.boton_azul {
    border-color: #1861ac;
    border-radius: 5px;
    background-color: #83ace9;
    color: #ffffff;
    text-align: center;
    height: 36px;
    font-size: 16px;
    white-space: nowrap;
}

.boton_gris {
    border-color: #d6d5d5;
    border-radius: 5px;
    background-color: #87a0b0;
    color: #ffffff;
    text-align: center;
    height: 36px;
    font-size: 16px;
    white-space: nowrap;
}

.circulo_azul {
    width: 48px;
}

.circulo_azul_grande {
    width: 64px;
}

.error_msg {
    background-color: #f75b5b;
    color: #503131;
    font-size: 11px;
    font-weight: bold;
    font-style: italic;
}

.foto {
    height: 80%;
    border: 1px solid #f7f8fa;
}

.opcion {
    padding: 5px;
    border: 1px #1861ac solid;
    color: #000000;
}

.opcionElegida {
    padding: 5px;
    border: 1px #d6d5d5 solid;
    background-color: #83ace9;
    color: #ffffff;
}

.btn-circle {
    padding: 6px 0px;
    border-radius: 10px;
    text-align: center;
    line-height: 1.42857;
    padding-left:5px;
    padding-right:5px;
}

.form-circle {
    padding: 6px 0px;
    border-radius: 10px;
    padding-left:15px;
    line-height: 1.42857;
    border: 1 px solid
}

.break-word {
    -ms-word-break: break-all;
    word-break: break-all;
    // Non standard for webkit word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

.fondo_ventana {
    background-color: #f9fafd;
}

.break-word {
    -ms-word-break: break-word;
    word-break: break-word;
    
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
.grid_header {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4f85bb+0,4f85bb+100;Blue+3D+%239 */
    background: #8698B0;
    color: #ffffff;
    font-family: Roboto;
    font-weight: bold;
    padding: 5px;
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}
.modal_topbar {
    margin-bottom: 0;
    margin-right: 0;
    float: right;
    width: 100%
}
.celda_border{
    border:1px solid #000000;
}

.hideOnPrint{

}

@media print {
    .noprint {
        display: none;
    }
    .pagebreak {
        clear: both;
        page-break-after: always;
        break-after: page;
    }
}
.mejora_header {
    font-size: 32px;
    color: #ffffff;
    background: rgb(242,34,57);
    background: linear-gradient(0deg, rgba(242,34,57,1) 0%, rgba(241,115,112,0.5665616588432247) 63%, rgba(255,0,27,1) 100%);
    border-radius: 3px;
    padding: 5px;
    vertical-align: middle;
    justify-content: safe center;
}

@page {
    size: 25cm 35.7cm;
    margin: 5mm 5mm 5mm 5mm; /* change the margins as you want them to be. */
}
.texto_mediano{
    font-size:small;
}
.fondo_gris_claro3{
    background-color:#f7f9fc;
}
.pie_pagina_noticia{
    font-size:xx-small;
    font-style:italic;
    color:#273576;
}
.tablahover {
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    padding: 5px;
}
    .tablahover:hover {
        border-radius: 10px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
        border: 2px solid #273576;
        padding: 5px;
    }


.titulo_publicacion {
    color: #5b9bd5;
    font-weight: bold;
    font-size:large;
}

.divisor_noticias {
    background-color:#647e95; 
    height: 2px; border: 0;
}
.barra_herramientas{
    float:right;
    top:5px;
    margin-right:5px;
    position:relative;
}

.barra_herramientas_izq {
    float: left;
    top: 5px;
    margin-left: 5px;
    position: fixed;
}

.barra_comentarios {
    float: left;
    top: 5px;
    margin-left: 5px;
    position: relative;
}
.comentarios{
    font-size:medium;
    font-family:Calibri;
    font-style :oblique;
}
.comentarios:hover {
    font-size: medium;
    font-family: Calibri;
    font-style: oblique;
    background-color:#f8eddc;
}
.divisor_comentarios {
    background-color: #99ccfc;
    height: 1px;
    border: 0;
}
.box_shadow {
    box-shadow: 0 2px 6px rgba(0, 0.1, 0.3, 0.5);
}

.versionsmodal {
    opacity: 1;
    z-index: 10000;
    overflow: auto;
    opacity: 1;
    position: fixed;
    float: right;   
    box-shadow: 0 2px 6px rgba(0, 0.1, 0.3, 0.5);
    background-color: #fcfcfc;
}

.modal_on_top {
    opacity: 1;
    width: 80%;
    margin: 0 auto;
    background-color: #fcfcfc;
    z-index: 999999;
    position: absolute;
    top:10px;
    margin-right:50px;
    margin-top:0px;
    border-radius:3px;
    box-shadow: 0 2px 6px rgba(0, 0.1, 0.3, 0.5);
    background-color: #fcfcfc;
    height:100%;
    margin-bottom:10px;
}
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.checkboxlist{
    display:none;
}

    .checkboxlist + .checkboxlistlabel {
        cursor: pointer;
    }

.checkboxlistlabel:before {
    content: '';
    background: transparent;
    border: 2px solid #008BB7;
    border-radius:5px;
    display:inline-block;
    height:20px;
    margin-right:5px;
    text-align:center;
    vertical-align:middle;
    width:20px;
}
.checkboxlist:checked + .checkboxlistlabel:before {
    content: '✓';
    font-size: 15px;
    font-family: "Times New Roman";
    color: black;
    background-color: #008BB7;
}

.center {
    text-align: center;
    width: 100%;
}
.center:first-child {
    text-align: left;
}

.middlr {
    display: block;
    margin: auto;
}

.main_window_view {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top: 10px;
   
}
.secondary_window_view {
    width: 94%;
    height: 90vh;
    background-color: #ffffff;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 10px;
    border-radius: 10px;
    margin-top: 5px;
    box-shadow: 10px 10px 34px -17px rgba(0,0,0,0.75);
    -webkit-box-shadow: 10px 10px 34px -17px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 34px -17px rgba(0,0,0,0.75);
    z-index: 100;
    overflow: auto;   
}

@-webkit-keyframes bg-scrolling-reverse {
    100% {
        background-position: 100% 100%;
    }
}

@-moz-keyframes bg-scrolling-reverse {
    100% {
        background-position: 100% 100%;
    }
}

@-o-keyframes bg-scrolling-reverse {
    100% {
        background-position: 100% 100%;
    }
}

@keyframes bg-scrolling-reverse {
    100% {
        background-position: 100% 100%;
    }
}

@-webkit-keyframes bg-scrolling {
    0% {
        background-position: 200% 200%;
    }
}

@-moz-keyframes bg-scrolling {
    0% {
        background-position: 200% 200%;
    }
}

@-o-keyframes bg-scrolling {
    0% {
        background-position: 200% 200%;
    }
}

@keyframes bg-scrolling {
    0% {
        background-position: 200% 200%;
    }
}
.back_animated {
   
    -webkit-animation: bg-scrolling-reverse 3s infinite;
    /* Safari 4+ */
    -moz-animation: bg-scrolling-reverse 3s infinite;
    /* Fx 5+ */
    -o-animation: bg-scrolling-reverse 3s infinite;
    /* Opera 12+ */
    animation: bg-scrolling-reverse 3s infinite;
    /* IE 10+ */
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes myAnim {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.6);
    }
}

@-moz-keyframes myAnim {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.6);
    }
}

@-o-keyframes myAnim {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.6);
    }
}

@keyframes myAnim {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.6);
    }
}

.appear_animation {
    animation: myAnim 0.5s ease 0s 1 reverse forwards;
}



@-webkit-keyframes myAnim2 {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

@-moz-keyframes myAnim2 {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

@-o-keyframes myAnim2 {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

@keyframes myAnim2 {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.flashing_animation {
    animation: myAnim2 2s ease 0s 1 reverse forwards;
}


@keyframes grad_anim {
    from {
        left: -300px;
    }

    to {
        left: 300px;
    }
}

@-webkit-keyframes grad_anim {
    from {
        left: -300px;
    }

    to {
        left: 300px;
    }
}

.logo_insight {
    width: 300px;
    height: 250px;
    background-color: transparent;
    
    overflow: hidden;
    
}

    .logo_insight:after {
        content: "";
        position:relative;
        top:0px;
        left:0px;
        width: 100%;
        height: 100%;
        z-index:0;
        background: rgb(255, 255, 255);
        background: linear-gradient( 90deg, rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0.5) 60%, rgba(250, 250, 250, 0) 100% );
        animation: grad_anim 3s ease-in-out infinite;
    }
.div100x100 {
    width: 100%;
    height: 100%;
    
}

.centrarelementos {
    display: flex;
    justify-content: center;
    align-content: center;
}
.texboxsinfondo {
    text-align: center;
    background-color: transparent !important;
    border-width: 0 !important;
    
}
.divmapa {
    border-radius: 10px !important;
    background-image: url('../img/mapabase.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
}
.divradius {
    background-color: #E0E3F6;
    border-radius: 10px;
    margin-right: 1%;
    margin-left: 1%;
}
.titulomapa {
    color: #273576;
    font-weight: 900;
}
.textomapa {
    color: #414D86;
    font-weight: 300;
}
.divradiusalt {
    background-color: #273576;
    border-radius: 10px;
   
}
.titulomapaalt {
    color: #F6F6FA;
    font-weight: 900;
}

.textomapaalt {
    color: #F6F6FA;
    font-weight: 300;
}
.etiquetadiv {
    border-radius: 20px;
    border: 2px solid #414D86;
    margin: 2%;
    padding:1%;
    min-width:8%;

}


/* video background */
#background-video {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}
.circular {
    border-top-left-radius: 50% 50%;
    border-top-right-radius: 50% 50%;
    border-bottom-right-radius: 50% 50%;
    border-bottom-left-radius: 50% 50%;
}

.carousel {
    width: 200px;
    height: 200px;
    aspect-ratio: auto;
    border-radius: 10px;
    border: 1px #495383 solid;
}
    .carousel:hover {
        cursor: pointer;
        width: 400px;
        height: 400px;
        border-radius: 15px;
        aspect-ratio: auto;
        border: 1px #ffffff solid;
        box-shadow: 10px 10px 34px -17px rgba(0,0,0,0.75);
        -webkit-box-shadow: 10px 10px 34px -17px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 34px -17px rgba(0,0,0,0.75);
        filter: contrast(200%);
    }

.circle {
    height: 80px;
    width: 80px;
    border-color: #f1f2f3;
    color: #ffffff;
    background-color: #008BB0;
    border-radius: 50%;
    display: inline-block;
}

.circle_small {
    height: 40px;
    width: 40px;
    border-color: #f1f2f3;
    color: #586BBF;
    background-color: #ffffff;
    border-radius: 50%;
    display: inline-block;
}

.circle_small_nolayout {
    height: 40px;
    width: 40px;
    border-color: #f1f2f3;
    color: #ffffff;
    background-color: #273576;
    border-radius: 50%;
    display: inline-block;
}
.card_search{
    width:30%;    
}
.card_toolbar {
    background-color: #ffffff;
    opacity: 0.8;
    color: #1b6ec2;
    z-index:9999;
    position:relative;
   top:-50px;
    
    width:100%;
}
.card_image {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #f1f1f1;
}

input[type="checkbox"] {
    accent-color: desired-color
}

.dropdown-toggle::after {
    
    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" height="24px"  viewBox="0 0 384 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="white" d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>');
    border: none;
    width: 10px;
    height: auto;
    margin-left: 0.4rem;
    vertical-align: middle;
  
}

@import url('https://fonts.googleapis.com/css2?family=Roboto');
.roboto_16 {
    margin: 1px;
    font-family: 'Roboto';
    font-size:16px;
}
.pager_bar {
    background-color: #008BB0;
    color:#ffffff;
    border:none;
}
.standard_button {
    background-color: #E8E8E8;
    padding: 15px;
    border-radius: 10px;
    color: #7F7F7F;
    border:none;
}










/*-------------------------------------------------------------------------------------------------*/

li {
    list-style: none;
}

a {
    text-decoration: none;
}

@font-face {
    font-family: 'sourcesanspro-regular';
    src: url('open-iconic/font/fonts/sourcesanspro-regular.otf') format('opentype');
}

/* Start: Styles on navbar */

.header {
    /*border-bottom: 1px solid #E2E8F0;*/
    background-color: white;
    width: 100%;
    /*
            position: fixed;
    */
    padding: 0;
    margin: 0;
}

.nav-item {
    margin-left: 3rem;
}

.nav-link {
    font-size: 1.3rem;
    font-family: "sourcesanspro-regular";
    color: #6F6F6E;
}

.nav-link:hover, .nav-link:focus, .nav-link:active {
    color: #35A8E0;
}

.nav-logo img {
    height: 2rem;
}

.nav-iconsNav {
    margin-left: 3rem;
    display: flex;
}

    .nav-iconsNav svg {
        height: 1rem;
        fill: #6F6F6E;
    }

        .nav-iconsNav svg:hover, .nav-iconsNav svg:focus, .nav-iconsNav svg:active {
            fill: #35A8E0;
        }

.nav-rigth {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: black;
}

/* End: Styles on navbar */

/* Start: Styles on footer */

.footer {
    display: flex;
    justify-content: center;
    padding: 0;
    padding-top: 2.5%;
    padding-bottom: 2.5%;
    margin: 0;
    position: relative;
    width: 100%;
    font-size: 1.2rem;
    font-family: "sourcesanspro-regular";
}

.gray-rectangle {
    display: flex;
    width: 95%;
    max-width: 6000px;
    margin: 0;
    padding: 3rem;
    background-color: #6f6f6e;
    border-radius: 3rem;
    color: white;
}

.layout-c1 {
    min-width: 370px;
    width: 40%;
}

.layout-c2 {
    min-width: 135px;
    width: 20%;
}

.layout-c3 {
    min-width: 135px;
    width: 20%;
    padding-right: 0.8rem;
}

.layout-c4 {
    min-width: 256px;
    width: 20%;
    padding-left: 0.5rem;
}

.layout-c1, .layout-c2, .layout-c3, .layout-c4 {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.Icon-Footer .Icon {
    width: 95%;
    height: auto;
}


.Icon-Footer .Icon-Img {
    width: 18%;
    height: auto;
}

.Icon-Footer .Icon-Text {
    width: 62%;
    height: auto;
}

.nav-iconsNav img {
    height: 1rem;
}

.input-correo {
    padding: 0.75rem 0;
    border: none;
    background: none;
    font-weight: 500;
    transition: border 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    border-radius: 0;
    width: 100%;
    font-size: 1.05rem;
    font-weight: bolder;
    color: var(--light);
}

    .input-correo:focus {
        outline: none;
    }

.input-correoV2 {
    font-family: "sourcesanspro-regular";
    padding: 0.75rem 0;
    border: none;
    background: none;
    transition: border 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    border-radius: 0;
    width: 100%;
    font-size: 1.2rem;
    color: #6f6f6e;
}

    .input-correoV2:focus {
        outline: none;
    }

    .input-correoV2::placeholder {
        color: #6f6f6e;
    }

.Contenedor-Mail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    width: 80%;
    border-bottom: 1px solid #6f6f6e;
}

.Contenedor-Mail svg {
    width: auto; 
    height: 1.2rem;
    margin-right: 8px;
    fill: #6f6f6e;
}

.Newsletter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    width: 80%;
    border-bottom: 1px solid var(--light);
}

    .Newsletter img {
        margin-right: 0.5rem;
        height: 1rem;
    }

.Send {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--light);
}

.Ul-Footer {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

    .Ul-Footer li {
        position: relative;
        padding: 0 0 0 0.5em;
        line-height: 1.2;
    }

        .Ul-Footer li::before {
            content: "-";
            position: absolute;
            left: 0;
        }

.gray-rectangle a {
    color: #ffffff;
    text-decoration: none;
}

    .gray-rectangle a:hover {
        text-decoration: underline;
    }

.layout-c3 img {
    height: 1.5rem;
    margin-right: 15%;
}

.layout-c3 > label, .layout-c4 > div {
    line-height: 1.1;
}

.layout-c4 img {
    margin-right: 0.2rem;
    height: 1rem;
}
/* End: Styles on footer */

/* Start: Styles on Home */
.Card-Fill {
    color: white;
    background: #76c7fd;
}

.Card-Empty {
    color: #6f6f6e;
    border: 1px solid #6f6f6e;
}

.Card-Gray {
    color: #6f6f6e;
    background-color: #ececec;
}

/* End: Styles on Home */
.div-Contactanos {
    display: flex;
    justify-content: center;
    padding: 0;
    padding-top: 2.5%;
    margin: 0;
    position: relative;
    width: 100%;
    font-family: "sourcesanspro-regular";
}

.Banner {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 95%;
    max-width: 6000px;
    margin: 0;
    padding-top: 7%;
    padding-bottom: 7%;
    padding-left: 4%;
    padding-right: 4%;
    border-radius: 3rem;
}

.header-Text {
    font-size: 2rem;
    text-align: center;
}

.body-Text {
    font-size: 1.5rem;
    text-align: center;
}

/*--------------------------------------------*/
.style-flex {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.style-flex-Only {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.style-flex div {
    flex: 1;
}

.style-flex-More {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

    .style-flex-More div {
        flex: 1;
    }


.style-flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
}

.style-Text-Center {
    text-align: center;
    font-family: "sourcesanspro-regular";
    line-height: 1;
}

.style-Img-home {
    width: 18%;
    height: auto;
}

.style-Title {
    color: #6f6f6e;
    font-size: 2rem;
}

.style-Body {
    color: #6f6f6e;
    font-size: 1.5rem;
}

.style-flex-column-Tab {
    display: flex;
    flex-direction: column;
    justify-content: left;
    margin: 0;
    padding: 0;
    margin-bottom: 1rem;
}

    .style-flex-column-Tab label {
        font-size: 1.3rem;
        margin: 0;
        text-indent: 1em;
        line-height: 1;
    }

/*---------------------------------*/
.Descriptions {
    width: 80%;
}

.Cards {
    width: 95%;
}
/*---------------------------------*/

.style-Parents-Center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.style-Card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*ccccc*/
    border-radius: 3rem;
}

    .style-Card Img {
        height: 30%;
        width: auto;
        margin-bottom: 10%;
    }

.style-Card-H {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 1.5rem;
    border-radius: 3rem;
    gap: 1rem;
}

    .style-Card-H Img {
        width: 45%;
        height: auto;
    }

.style-Card-Text-Small {
    font-size: 1.3rem;
    line-height: 1.1;
}

.style-Card-Text {
    font-size: 2rem;
    line-height: 1.1;
}

.style-Card-Text-Medium {
    font-size: 1.6rem;
    line-height: 1;
}

.style-Card-Text-Big {
    font-size: 2.4rem;
    line-height: 1;
}
/*
.style-Card-Text {
    font-size: 2rem;
    line-height: 2.3rem;
}
*/
.Banner-Gray {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 95%;
    max-width: 6000px;
    margin: 0;
    background-color: #ececec;
    border-radius: 3rem;
}

.style-Card-Empty {
    color: #6f6f6e;
    border: 1px solid #6f6f6e;
    border-radius: 2rem;
    padding: 2rem 1rem;
}

.style-Separated {
    margin-bottom: 4rem;
}

/*-------*/
/*
#Testimonials {
    width: 90%;
    margin: 0 auto;
}
*/
#Soluciones_Testimonials {
    padding: 3rem 2rem;
}

    #Soluciones_Testimonials > label {
        margin-bottom: 2rem;
    }

#Testimonials div label {
    max-width: 100%;
    width: 100%;
    text-align: left;
    display: block;
}

    #Testimonials div label:nth-child(2),
    #Testimonials div label:nth-child(3),
    #Testimonials div label:nth-child(4) {
        font-weight: bolder;
    }

    #Testimonials div label:nth-child(1) {
        padding-bottom: 1rem;
        border-bottom: 1px solid #6f6f6e;
    }
/*----------*/
.slider-container {
    width: 90%;
    overflow: hidden;
    margin: auto;
}

.slider {
    display: flex;
    transition: transform 0.5s;
    gap: 2rem;
}

.slide {
    box-sizing: border-box;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    height: 25rem;
    display: flex;
    align-items: stretch;
}

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

.slide label {
    max-width: 100%;
    width: 100%;
    text-align: left;
    display: block;
    padding:0;
    margin: 0;
}

    .slide label:nth-child(2),
    .slide label:nth-child(3),
    .slide label:nth-child(4) {
        font-weight: bolder;
    }

    .slide label:nth-child(1) {
        margin-bottom: 0.6rem;
        border-bottom: 1px solid #6f6f6e;
    }
/*-------*/
.scroll-div label:nth-child(1) {
    height: 14rem; /* Ajusta la altura máxima */
    overflow-y: auto; /* Habilita el scroll vertical */
    display: block; /* Asegura que se comporte como bloque */
}

    .scroll-div label:nth-child(1)::-webkit-scrollbar {
        width: 3px; /* Hace el scrollbar delgado */
    }

    .scroll-div label:nth-child(1)::-webkit-scrollbar-track {
        background: transparent; /* Fondo transparente */
    }

    .scroll-div label:nth-child(1)::-webkit-scrollbar-thumb {
        background-color: #6f6f6e; /* Color de la rayita */
        border-radius: 10px; /* Hace la rayita más redondeada */
    }
/*-------*/
#CardInformation {
    display: flex;
    transition: transform 0.5s ease;
    gap: 2rem;
    /*width: 100%;  Ajusta el contenedor para que su ancho sea adecuado */
}

.CardInformation-Card-Empty {
     /* Limita el ancho máximo de cada tarjeta */
    box-sizing: border-box;
    padding: 1rem;
    padding-bottom: 2rem;
    border: 1px solid #6f6f6e;
    border-radius: 2rem;
    color: #6f6f6e;
    
}

.slider-CardInformation {
    overflow: hidden;
    width: 85%;
    position: relative;
}

#Soluciones_CardInformation {
    padding: 6rem 8rem;
    display: flex;
    justify-content: center;
    width: 95%;
    max-width: 6000px;
    margin: 0;
    background-color: #ececec;
    border-radius: 3rem;
}

#Soluciones_CardInformation section {
    margin-right: 2rem;
    width: 22%;
}

#CardInformation div label {
    width: 100%;
    text-align: left;
    display: block;
}

#CardInformation div img {
    width: 100%;
    height: auto;
}

#CardInformation div label:nth-child(2) {
    font-weight: bolder;
    padding-bottom: 1rem;
    border-bottom: 1px solid #6f6f6e;
}
/*----------*/
.nosotros_Description {
    color: #6f6f6e;
    text-align: left;
}

.nosotros_Description-Medium {
    color: #6f6f6e;
    font-size: 1.5rem;
    line-height: 1.2;
    text-align: left;
}

.nosotros_Title {
    width: 60%;
}

#nosotros_TextImg img {
    width: 50%;
}

#nosotros_TextImg label {
    width: 50%;
}

.grid-container-Text {
    column-count: 2;
    column-gap: 2rem;
}

    .grid-container-Text img {
        margin-left: 1rem;
    }









.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Crea 2 columnas */
    grid-template-rows: auto auto; /* Crea 2 filas */
    grid-template-areas:
        "cuadrante1 cuadrante3"
        "cuadrante2 cuadrante4"; /* Define las áreas del grid */
    gap: 2rem; /* Espacio entre los elementos */
    margin: 0 auto; /* Centra el grid */
}

.grid-item {

}

/* Asignar áreas a los elementos */
#cuadrante1 {
    grid-area: cuadrante1;
}

#cuadrante2 {
    grid-area: cuadrante2;
}

#cuadrante3 {
    grid-area: cuadrante3;
}

#cuadrante4 {
    grid-area: cuadrante4;
}








.grid-container-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 1.5rem;
}

.grid-container-3-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 1.5rem;
    border-radius: 2rem;
}

.style-Card-V {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*ccccc*/
    border-radius: 3rem;
    padding: 2.6rem 1.5rem;
}

    .style-Card-V Img {
        height: auto;
        width: 100%;
        margin-bottom: 10%;
    }

/*------------------------------------------*/
.Soluciones-Title {
    font-size: 1.3rem;
    line-height: 1;
    border-bottom: 1.5px solid #6f6f6e;
    width: 100%;
}

.Soluciones_Img {
    padding-left: 3rem;
    padding-right: 3rem;
    width: 60%;
}

    .Soluciones_Img img {
        border-bottom: 1.5px solid #6f6f6e;
        padding-bottom: 2rem;
        margin-bottom: 2rem;
        width: 100%;
    }

.text-overlay {
    font-size: 2.5rem;
    color: white; /* Color del texto */
    line-height: 1.2;
}

.position-Banner {
    position: absolute;
    width: 40%;
}

.position-Banner-Left {
    text-align: left;
    margin-left: 10%;
}

.position-Banner-Right {
    right: 0;
    text-align: right;
    margin-right: 10%;
}
/*-----------------------------------------------*/
.carousel-container {
    position: relative;
    width: 100%;
}

.carousel-wrapper {
    position: relative;
    width: 80%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
    margin-right: 1rem;
}

.carousel-images {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: all 0.5s ease;
    width: calc(100% * 2);
}

.carousel-slide {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2%;
}
/*
    .carousel-slide img {
        width: 100%;
        height: auto;
    }
*/





.carousel-button {
    background-color: #e1e1e1;
    border: none;
    border-radius: 3rem;
    width: 2.3rem;
    color: #6f6f6e;
    cursor: pointer;
    font-size: 1.5rem;
}






/*-----------------------------------------------*/






.carousel-indicators {
    display: flex;
    justify-content: center;
}

.carousel-indicator {
    display: inline-block;
    width: 6rem;
    height: 1.5px;
    margin: 10px;
    margin-bottom: 3rem;
    background-color: rgb(236, 240, 241);
    cursor: pointer;
}

    .carousel-indicator.active {
        background-color: white;
    }


.Banner-Carrusell {
    position: relative;
    width: 95%;
    margin: 0;
    border-radius: 3rem;
    overflow: hidden;
}

.Banner-Img {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    transition: transform 0.5s ease;
}

.Banner-gallery {
    display: flex;
}

/*-----------------------------------------------*/

#Comunidad-Cards-One {
    width: 40%;
}

#Comunidad-Cards-Two {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

/*-----------------------------------------------*/


.nav-button {
    display: inline-flex; /* Alinea el icono y el texto horizontalmente */
    align-items: center; /* Centra verticalmente el contenido dentro del botón */
    padding: 10px 20px; /* Espaciado interno para que parezca un botón */
    background-color: #808080; /* Color de fondo gris */
    color: #ffffff; /* Color del texto blanco */
    border-radius: 20px; /* Bordes redondos */
    text-decoration: none; /* Quita el subrayado de los enlaces */
    font-size: 16px; /* Tamaño de la fuente */
    font-weight: bold; /* Fuente en negrita */
    border: 2px solid transparent; /* Borde invisible, pero puedes personalizarlo */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Transición suave */
}

    .nav-button:hover {
        background-color: #696969; /* Color de fondo más oscuro al pasar el ratón */
        border-color: #ffffff; /* Añade un borde blanco al pasar el ratón */
    }

.nav-button-icon {
    margin-right: 10px; /* Espacio entre el icono y el texto */
    font-size: 18px; /* Tamaño de la flecha */
}
/*-----------------------------------------------*/
.Button {
    display: inline-flex; /* Alinea el contenido en fila */
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
    white-space: nowrap;
    display: inline-block;

    font-family: sourcesanspro-regular;
    font-size: 1.4rem;
    border-radius: 1.8rem;
    padding: 0.2rem 1.8rem;
    text-decoration: none;
    color: inherit;
    margin-top: 1rem;
}

.Button svg {
    width: auto; 
    height: 1.2rem;
    margin-right: 8px; /* Espacio entre el ícono y el texto */
}

.Button:hover, .Button:focus, .Button:active {
    /*color: inherit;*/
    text-decoration: none; /* Asegura que no haya subrayado */
    outline: none; /* Elimina el borde de enfoque */
}

.Button-Type-One {
    background: #6f6f6e;
    color: white;
}

.Button-Type-One svg path {
    fill: white;
}

.Svg {
    width: auto;
    height: 1.2rem;
    margin-right: 8px; /* Espacio entre el ícono y el texto */
}

.Svg path {
    fill: #6f6f6e;
}

.Button-Type-One:hover, .Button-Type-One:focus, .Button-Type-One:active {
    color: white;
    text-decoration: none; /* Asegura que no haya subrayado */
    outline: none; /* Elimina el borde de enfoque */
}

.Button-Type-Two {
    background: white;
    color: #6f6f6e;
}

.Button-Type-Two svg path {
    fill: #6f6f6e;
}

.Button-Type-Two:hover, .Button-Type-Two:focus, .Button-Type-Two:active {
    color: #6f6f6e;
    text-decoration: none; /* Asegura que no haya subrayado */
    outline: none; /* Elimina el borde de enfoque */
}

.Button-Type-Three {
    background: #fafafa;
    color: #6f6f6e;
}

    .Button-Type-Three svg path {
        fill: #6f6f6e;
    }

.Button-Type-Three:hover, .Button-Type-Three:focus, .Button-Type-Three:active {
    color: #6f6f6e;
    text-decoration: none; /* Asegura que no haya subrayado */
    outline: none; /* Elimina el borde de enfoque */
}

.Button-Type-Four {
    background: #35A8E0;
    color: white;
}

    .Button-Type-Four svg path {
        fill: white;
    }

.Button-Type-Four:hover, .Button-Type-Four:focus, .Button-Type-Four:active {
    color: white;
    text-decoration: none; /* Asegura que no haya subrayado */
    outline: none; /* Elimina el borde de enfoque */
}
/*-----------------------------------------------*/
.grid-Directorio-Container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */
    gap: 2rem; /* Espacio entre los elementos del grid */
    width: 80%;
    justify-content: center; /* Centra el grid en el contenedor */
    grid-template-rows: auto auto; /* 2 filas automáticas */
    grid-template-areas:
        "item1 item2 item3 item4"
        ". item5 item6 ."; /* Espacio vacío a la derecha para centrar los últimos 2 elementos */
}

.grid-item:nth-child(1) {
    grid-area: item1;
}

.grid-item:nth-child(2) {
    grid-area: item2;
}

.grid-item:nth-child(3) {
    grid-area: item3;
}

.grid-item:nth-child(4) {
    grid-area: item4;
}

.grid-item:nth-child(5) {
    grid-area: item5;
}

.grid-item:nth-child(6) {
    grid-area: item6;
}
    .style-Card-Employer img {
        max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
        height: auto; /* Mantiene la proporción de la imagen */
        display: block; /* Elimina cualquier espacio extra debajo de la imagen */
        border-radius: 2rem; /* Aplica bordes redondeados a la imagen */

        border: 1px solid #6f6f6e;
        padding: 0.5rem;
        margin: 0;
    }

.employer-card{
    display: flex;
    flex-direction: column;
}

.employer-name {
    color: inherit;
    text-decoration: none;
    outline: none;
    font-family: sourcesanspro-regular;
    /*font-size: 1.5rem;
    line-height: 1.5rem;*/
    margin-top: 2rem;
    margin-left: 1rem;
    color: #6f6f6e;
    fill: #6f6f6e;
}

.employer-name svg {
    width: auto;
    height: 1.2rem;
    margin-right: 4px; /* Espacio entre el ícono y el texto */
}

.employer-name:hover, .employer-name:focus, .employer-name:active {
    color: #44a6de;
    text-decoration: none; /* Asegura que no haya subrayado */
    outline: none; /* Elimina el borde de enfoque */
    fill: #44a6de;
}

.employer-name svg:hover, .employer-name svg:focus, .employer-name svg:active {
    fill: #44a6de;
}

.style-svg svg {
    width: auto;
    height: 1.6rem;
}
.style-svg-Icon svg path {
    fill: #6f6f6e;
}


    .style-svg {
        padding-top: 0.5rem;
    }
/*-----------------------------------------------*/
.section-Card-Vitual {
    display: flex;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #6f6f6e;
    font-family: sourcesanspro-regular;
    color: #6f6f6e;
}

.section-Card-Vitual div p:nth-child(1){
    font-size: 1.6rem;
}

.section-Card-Vitual div p:nth-child(2){
    font-size: 1.2rem;
}

.section-Card-Vitual div{
    display: flex;
    flex-direction: column;
    justify-content: left;
    padding: 0;
    margin: 0;
}

.section-Card-Vitual div p {
    padding: 0;
    margin: 0;
}

.section-Card-Vitual span{
    width: 3rem;
}

.section-Social-Networks{
    display: flex;
    justify-content: right;
}

.section-Card-Vitual-Title {
    padding-bottom: 2rem;
    border-bottom: 1px solid #6f6f6e;
    font-family: sourcesanspro-regular;
    color: #6f6f6e;
}

.section-Card-Vitual-Title p{
    padding: 0;
    margin: 0;
}

.section-Card-Vitual-Title p:nth-child(1) {
    font-size: 2rem;
}

.section-Card-Vitual-Title p:nth-child(2) {
    font-size: 1.6rem;
}


.section-Card-Vitual-Main {
    display: flex;
    justify-items: center;
    align-items: center;
    margin: auto;
    border-radius: 3rem;
    gap: 1rem;
    width: 70%;
}
/*-----------------------------------------------*/
.form-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-bottom: 1.5px solid #6f6f6e;
    background-color: transparent;
    font-size: 1.2rem;
    outline: none;
}

.form-input::placeholder {
    font-family: sourcesanspro-regular;
    color: #6f6f6e;
}

.form-input:focus {
    border-bottom-color: #44a6de;
}


.btn:hover {
    background-color: #44a6de;
    color: white;
}
/*-----------------------------------------------*/


.custom-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.hide-dropdown {
    display: none;
}

.show-dropdown {
    display: block;
}


/*-----------------------------------------------*/

.language-selector {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    z-index: 1000;
}

    .language-selector.show {
        display: block;
    }

    .language-selector div {
        padding: 0.2rem 0.4rem;
        cursor: pointer;
        position: relative;
    }

        .language-selector div.selected {
            border-bottom: 2px solid #000;
        }

        .language-selector div:hover {
            background-color: #35A8E0;
        }

/*-----------------------------------------------*/

.position-Text-Banner {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1rem;
    padding-right: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 5rem;
}

.Banner-Text-Size {
    width: 60%;
}

.section-Card-Vitual-Size-Img {
    width: 40%;
}

.section-Card-Vitual-Size-Inf {
    width: 60%
}

.Contacto-Main-Container {
    width: 70%;
}

.Contacto-Form-Container {
    width: 70%;
    margin: 0;
    padding: 2.5rem;
    border-radius: 3rem;
    margin-right: 3rem
}

.Contacto-Inf-Container {
    width: 30%;
}

.Contacto-EditForm {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.nav-right {
    display: flex; /* Mostrar siempre en pantallas grandes */
    align-items: center;
    margin: 0;
    padding: 0;
    margin-right: 10%;
}

.nav-menu {
    display: flex; /* Mostrar elementos en línea */
    justify-content: flex-start; /* Alinear a la izquierda */
    margin: 0;
    padding: 0;
}

    .nav-right.active {
        display: flex; /* Mostrar cuando está activo */
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
    }

.hamburger {
    display: none; /* Inicialmente oculto */
    flex-direction: column;
    justify-content: space-between;
    width: 30px; /* Ancho del botón */
    height: 25px; /* Altura del botón */
    cursor: pointer;
}

    .hamburger.active .bar {
        background-color: black; /* Color de las barras */
        transition: 0.3s; /* Transición suave para la animación */
    }

/* Estilos para las barras del botón de hamburguesa */
.bar {
    height: 3px; /* Altura de las barras */
    width: 100%; /* Ancho de las barras */
    background-color: black; /* Color de las barras */
    transition: 0.3s; /* Transición suave para la animación */
}

.style-p-Carrusel {
    padding-bottom: 12px;
    right: 0;
    color: white;
}
/*-----------------------------------------------*/
@media (max-width: 580px) {
    .layout-c1 {
        min-width: 300px;
    }

}

@media only screen and (max-width: 700px) {

    .nav-right {
        display: none; /* Ocultar por defecto en móviles */
    }

        .nav-right.active .nav-menu {
            position: absolute; /* Coloca el menú debajo del nav */
            top: 100%; /* Mueve el menú justo debajo de la barra de navegación */
            right: 0;
            padding: 1rem;
            display: flex; /* Mostrar cuando está activo */
            flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
            background: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera para el menú */
            border-radius: 8px; /* Bordes redondeados */
            z-index: 1000;
        }
        .nav-right.active .nav-menu .nav-item{
            margin: 0;
        }

    .nav-link:hover, .nav-link:focus, .nav-link:active {
        color: white;
        background: #35A8E0;
        color: white;
    }

        .nav-item:hover{
            background: #35A8E0;
            color: white;
        }
    .hamburger {
        display: block; /* Mostrar el botón en pantallas pequeñas */
    }
    .slider-CardInformation {
        margin-left: 1rem;
        width: 70%;
    }
}

@media only screen and (max-width: 767.98px) {

    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 768px) {


    app {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

@media only screen and (max-width: 800px) {
    .navbar {
        padding: 0.1rem 0.5rem 0.1rem 0.5rem;
    }
}

@media only screen and (min-width: 700px) and (max-width: 866px) {

    .style-Body {
        font-size: 1.5rem;
    }

}

/* Media query para pantallas menores a 1156px */
@media (max-width: 1156px) {

    #Comunidad-Cards-One,
    #Comunidad-Cards-Two {
        width: 95%;
    }

    .grid-container-Text {
        column-count: 1;
    }

    .nosotros_TextImg img {
        width: 50%;
    }

    .nosotros_TextImg {
        align-items: center;
        justify-content: center;
    }

        .nosotros_TextImg label {
            width: 100%;
        }

    .nosotros_Title {
        width: 95%;
    }

    #Soluciones_Img {
        width: 100%;
    }
}

/* Media query para pantallas menores a 1335px */
@media (max-width: 1335px) {

    .style-Body {
        font-size: 1rem !important;
    }
}


/* Media query para pantallas menores a 670px */
@media only screen and (max-width: 670px) {
    .gray-rectangle {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: space-between;
    }

    .layout-c1, .layout-c2, .layout-c3, .layout-c4 {
        width: 100%;
        max-width: none; /* Cambié auto a none */
        margin-bottom: 2rem;
    }

    .style-Card-Text-Big {
        font-size: 1.6rem;
    }

    .style-Card-Text-Small {
        font-size: 0.6rem;
    }

    .style-Card-Text {
        font-size: 1.2rem;
    }

    .style-Card-Text-Medium {
        font-size: 0.8rem;
    }

    .style-Card-H {
        flex-direction: column;
    }

        .style-Card-H div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .style-Card-H img {
            width: 50%;
            height: auto;
            order: -1; /* Esto hará que la imagen esté al principio */
        }

    .style-flex-More {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        justify-items: center;
        align-items: center;
    }

    .Card-Size {
        width: 60%;
    }

    #Soluciones_CardInformation {
        padding: 1rem 1.5rem;
    }

    #Soluciones_CardInformation section {
        margin-right: 3rem;
    }

    .style-flex, .style-flex-Only {
        flex-direction: column;
    }

    .style-Separated {
        margin-bottom: 1rem;
    }

    .text-overlay {
        font-size: 1rem;
        color: green;
    }

    .position-Banner {
        width: 60%;
    }

    .Button svg {
        width: auto;
        height: 0.5rem;
    }

    .Button {
        padding: 0.2rem 0.6rem;
        margin-top: 0;
    }

    .Banner-Text-Size {
        width: 80%;
    }

    .grid-container-3 {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .grid-Directorio-Container {
        grid-template-columns: repeat(1, 1fr); /* 1 columna */
        grid-template-areas:
            "item1"
            "item2"
            "item3"
            "item4"
            "item5"
            "item6";
    }

    .section-Card-Vitual-Size-Img {
        width: 80%;
    }

    .section-Card-Vitual-Size-Inf {
        width: 100%
    }

    .Contacto-Main-Container {
        width: 90%;
    }

    .Contacto-Form-Container {
        width: 100%;
        margin: 0;
    }

    .Contacto-Inf-Container {
        width: 80%;
    }

    .Contacto-EditForm {
        gap: 0rem;
    }

    .carousel-button {
        border-radius: 3rem;
        width: 1.5rem;
        cursor: pointer;
        font-size: 1rem;
    }

    .Contacto-EditForm {
        gap: 1rem;
    }

    #Soluciones_Testimonials {
        padding: 2rem 1rem;
    }

    .style-p-Carrusel {
        padding-bottom: 0px;
    }

    .position-Text-Banner {
        padding-top: 0.5rem;
    }

    .grid-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "cuadrante1"
            "cuadrante2"
            "cuadrante3"
            "cuadrante4";
        gap: 1rem;
    }
}

/* Media query para pantallas entre 670px y 866px */
@media only screen and (min-width: 670px) and (max-width: 866px) {
    .gray-rectangle {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 0.1rem;
        padding: 1.5rem;
    }

    .layout-c1, .layout-c2, .layout-c3, .layout-c4 {
        width: 100%;
        justify-content: space-evenly;
    }

    .layout-c1, .layout-c2 {
        flex-basis: 50%;
    }

    .layout-c3, .layout-c4 {
        flex-basis: 50%;
    }

        .layout-c3 img, .layout-c4 img {
            height: 1.4rem;
        }

    .footer {
        font-size: 1rem;
    }

    .Icon-Footer .Icon {
        width: 80%;
        height: auto;
    }

    .style-Card-Text-Big {
        font-size: 1.8rem;
    }

    .style-Card-Text-Small {
        font-size: 0.8rem;
    }

    .style-Card-Text {
        font-size: 1.4rem;
    }

    .style-Card-Text-Medium {
        font-size: 1rem;
    }

    .style-flex-More {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    #Soluciones_CardInformation {
        padding: 1.5rem 2rem;
    }

    .style-flex, .style-flex-Only {
        flex-direction: column;
    }

    .style-Separated {
        margin-bottom: 2rem;
    }

    .text-overlay {
        font-size: 1.9rem;
        color: red;
    }

    .Button svg {
        width: auto;
        height: 0.8rem;
    }

    .Button {
        padding: 0.2rem 1.2rem;
    }

    .grid-container-3 {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
    }

    .grid-Directorio-Container {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas */
        grid-template-areas:
            "item1 item2"
            "item3 item4"
            "item5 item6";
    }

    .section-Card-Vitual-Size-Img {
        width: 60%;
    }

    .section-Card-Vitual-Size-Inf {
        width: 80%
    }

    .Contacto-Main-Container {
        width: 90%;
    }

    .Contacto-Form-Container {
        width: 90%;
        margin: 0;
    }

    .Contacto-Inf-Container {
        width: 60%;
    }

    .Contacto-EditForm {
        gap: 0rem;
    }

    .carousel-button {
        border-radius: 3rem;
        width: 1.5rem;
        cursor: pointer;
        font-size: 1rem;
    }

    .Contacto-EditForm {
        gap: 2rem;
    }

    #Soluciones_Testimonials {
        padding: 2rem 0rem;
    }

    .nav-right {
        margin-right: 2%;
    }

    .nav-item {
        margin-left: 0.5rem;
    }
}

/* Media query para pantallas entre 866px y 1036px */
@media only screen and (min-width: 866px) and (max-width: 1036px) {
    .gray-rectangle {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 1rem;
    }

    .layout-c1, .layout-c2, .layout-c3, .layout-c4 {
        width: 100%;
        justify-content: space-evenly;
    }

    .layout-c1, .layout-c2 {
        flex-basis: 50%;
    }

    .layout-c3, .layout-c4 {
        flex-basis: 50%;
    }

        .layout-c3 img, .layout-c4 img {
            height: 1.4rem;
        }

    .style-Card-Text-Big {
        font-size: 2.1rem;
    }

    .style-Card-Text-Small {
        font-size: 1rem;
    }

    .style-Card-Text {
        font-size: 1.7rem;
    }

    .style-Card-Text-Medium {
        font-size: 1.3rem;
    }

    #Soluciones_CardInformation {
        padding: 1.5rem 2rem;
    }

    .text-overlay {
        font-size: 2.2rem;
        color: blue;
    }

    .Button svg {
        width: auto;
        height: 1rem;
    }

    .Button {
        padding: 0.2rem 1.6rem;
    }

    .grid-Directorio-Container {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas */
        grid-template-areas:
            "item1 item2 item3"
            "item4 item5 item6";
    }

    .section-Card-Vitual-Size-Img {
        width: 60%;
    }

    .section-Card-Vitual-Size-Inf {
        width: 60%
    }

    .Contacto-Main-Container {
        width: 90%;
    }

    #Soluciones_Testimonials {
        padding: 2rem 0rem;
    }

    .nav-right {
        margin-right: 5%;
    }

    .nav-item {
        margin-left: 2rem;
    }
}

@media only screen and (min-width: 1036px) and (max-width: 1440px) {

    #Soluciones_CardInformation {
        padding: 3rem 4rem;
    }

    #Soluciones_Testimonials {
        padding: 2rem 0rem;
    }

}