html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}


@media (max-width: 979px) {
    body {
        padding-top: 0px;
    }
}






.navbar-light .nav-item .nav-link,
.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link {
        color: #002B57;
        font-size: 1.1em;
        font-weight: bold;
}

.navbar-light .nav-item .nav-link.active,
.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link {
        color: black;
        font-size: 1.1em;
        font-weight: bold;
}




.bg-navbar {
    background: #EDEEF3;
}

.bg-infocustom {
     background: #17A4BA;
     font-weight: bold;
     h5 {
         
         color: #010101;
     }
}

.bg-firma {
     background: #E8E8E8;
}

.badge {
  display: block;
}

.badge.block-badge {
  display: block;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;

}

.btn-link {
    color: #0056B3;
  }
btn-link:hover {color: #002B57;}


.btn-blue {
    color: #FFFFFF;
    background-color:#0056B3;
    
}
.btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue.active, .open>.dropdown-toggle.btn-blue {
    color: #fff;
    background-color: #007bff;
    border-color: #285e8e; /*set the color you want here*/
}

.btn-blue-accesible {
    color: #FFFFFF;
    background-color:#0056B3;
}

a.btn-blue-accesible {
    position:relative;
    z-index:24;
    background-color:#ccc;
    color:#000;
    text-decoration:none
}
a.btn-blue-accesible:hover, a.btn-blue-accesible:focus, a.btn-blue-accesible:active {
    z-index:25;
    background-color:#ff0
}
a.btn-blue-accesible span {
    position: absolute;
    left: -9000px;
    width: 0;
    overflow: hidden;
}
a.btn-blue-accesible:hover span, a.btn-blue-accesible:focus span, a.btn-blue-accesible:active span {
    display:block;
    position:absolute;
    top:1em; left:1em; width:12em;
    border:1px solid #0cf;
    background-color:#cff;
    color:#000;
    text-align: center
}


/* Añade este CSS para asegurar que el indicador de enfoque sea visible */
.btn:focus {
    outline: 3px solid #0056b3; /* Cambia el color y el grosor según tu diseño */
    outline-offset: 2px; /* Añade un poco de espacio entre el borde del botón y el contorno */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* Añade una sombra para mayor visibilidad */
}

/* Estilo para el enfoque del campo de entrada */
/* Enfoque visible para inputs y selects */
.form-control:focus,
.form-select:focus {
    outline: 3px solid #0056b3;      /* Borde resaltado */
    outline-offset: 2px;             /* Separación del contorno */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Sombra para mayor visibilidad */
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.h5-like {
    font-size: 1.25rem; /* Tamaño similar a h5 */
    font-weight: bold;
    color: #010101; /* Ajusta el color según tu diseño */
    background-color: #17A4BA; /* Color de fondo si es necesario */
    text-align: center;

}

.h6-like {
    font-size: 1rem; /* Ajusta según el tamaño original de tu h6 */
    font-weight: bold;
    /* Agrega aquí cualquier otro estilo que normalmente aplicarías a h6 */
}


a {
    color: #0056B3;
  }
a:hover {color: #002B57;}

a:focus {
    outline: 2px solid #17A4BA; /* Cambia el color según tu paleta de diseño */
    outline-offset: 2px;
}

p {color: #002B57;}

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 18-dic-2017, 11:13:09
    Author     : root
*/

    .columna-busqueda {
        background-color: #f8f8f8;
        padding-top: 0px;
    }
    .columna-videos {
        padding-top: 0px;
        padding-left: 20px;
        padding-right: 20px;
        max-width: 1380px;
    }

    .label
    {
        display: block;
        text-align: left;
        max-width: 100%;
        white-space: normal;
    }



    

    @media (min-width: 408px){

        #left {
            position: relative;
            top: 0;
            bottom: 0;
            left: 0;
            height: 100%;
            overflow-y: auto;

        }
    }

    #left {
        background-color: #F9F9F9;
        height: 100%;
        margin-top: 0;
        margin-bottom: 0;

    }


#acordeonaccesibleaa {
    /* Ocúpalo todo respecto al viewport, menos el espacio que ocupen header/video */
    max-height: calc(100vh - 290px); /* ajusta el 120px al alto de cabecera + márgenes */
    overflow-y: auto;
    /* Opcional: para que el scroll sea visible siempre */
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}

/* Estilos para navegadores WebKit */
#acordeonaccesibleaa::-webkit-scrollbar {
    width: 8px;
}
#acordeonaccesibleaa::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 4px;
}


/* Ocultar cualquier UL de menú de Video.js que esté vacío */
.vjs-menu-content:empty {
    display: none !important;
}

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
.btn:focus,
.form-control:focus,
.accordion-button:focus {
    outline: 3px solid #0056b3 !important;
    outline-offset: 2px;
}