form .avatar{
    width: 55px;
    margin-bottom: 15px;
}

.navbar .container-avatar{
    width: 35px;
    height: 35px;
    border-radius: 900px;
    overflow: hidden;
    margin-left: 20px;
}

.navbar .container-avatar img{
    height: 100%;
}

.navbar .container-avatar img[src=""],
img.avatar img[src=""]{
    display: none;
}

.logo{
    color:  white;
    font-family: "Agency FB";
    font-size: 50px;
}
.letrao{
    color: red;
}
.srl{
    font-size: 20px;
}

.titulo{
    float: left;
    padding-left: 20px;
    padding-right: 10px;
}

.btn-nuevo{
    display: block;
    float: right;
    margin-bottom: 15px;
}

.btn-left{
    display: block;
    margin: 10px;
    float: left;
}

.btn-right{
    display: block;
    margin: 10px;
    float: right;
}

.btn-center{
    display: block;
    margin: 10px;
}

/*color de la barra de menu*/
nav.navbar.navbar-expand-md.navbar-light.navbar-laravel {
    background-color: #1c1a1b;
}

/*colores de las letras de menú*/
.navbar-brand, .nav-link, h4.titulo{
    color: white !important;
    //    background-color: black;
}

tr, td{
    color: white;
}    



html, .row.justify-content-center, main.py-4 {
    background-color: #000000;
}

a.btn.btn-outline-primary{
    margin-bottom: 10px !important;
}

.linea_servicio{
    margin-left: 20px;
    margin-right: 20px;
}

.remove_button img, .add_button img{
    width: 5%;
}

.remove_button img:hover, .add_button img:hover{
    width: 6%;
}

.ver_button img:hover{
    width: 40%;
} 

table tr th {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sorting {
    background-color: white;
    color: black;
}

.asc:after {
    content: ' ↑';
}

.desc:after {
    content: " ↓";
}



.borderless td, .borderless th {
    border: none;
}

/*tabla de informe*/
.informe th, .informe td{
    color: black !important;
    text-align: center !important;
} 


section{
    width:100%;
    margin:0 auto;
}

/*Para que el contenedor muestre elementos aunque estos sean flotantes*/
#containerFotos:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}

#containerFotos{
    width: 90%;
    margin:0 auto;
}

/*Estructura de cada componente de la galeria (imagen + descripcion)*/
#containerFotos div{
    width: 28%;
    height: auto;
    -webkit-transition: -webkit-transform 1s;
    display:inline;
    float:left;
    margin:0px 3% 0 0;
    padding: 0;
}
#containerFotos div img{
    width: 100%;
    height: auto;
    box-shadow: 0 0 10px #666;
    border: 5px solid #FFF
}

/*Estructura de la descripcion, por defecto no se muestra*/
#containerFotos div img ~ span{
    width: 100%;
    display:block;
    opacity:0;
    -webkit-transition: opacity 1s;
    margin: 0;
    padding:2px 5px;
    color:#FFF;
    background:rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 10px #666;
    text-align:center;
}

/*Se muestra la descripcion al posicionar el cursor encima de la imagen*/
#containerFotos div img:hover + span{
    opacity:1;
}

/*Se especifica el comportamiento que tendran las imagenes al posicionar el cursor encima del contenedor*/
#containerFotos:hover div{
    opacity: 0.2;
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
}

/*Se especifica el comportamiento que tendran la imagen seleccionada*/
#containerFotos:hover div:hover{
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

/*Media query de ejemplo para pantallas de alta resolucion
  pero pueden haber mas, este media query permite mostrar hasta 5 imagenes por filas
*/
@media (min-width:1600px){
    #containerFotos div{
        width: 15%;
    }
}