/* CODIGO QUE FORMATEA LA VISTA login, TABLAS, el color del body de las vistas Body= cuerpo */
.active a{
    color:red;
    text-decoration: none;
}
/* body{   background-color: #CCE4F7; }*/

.cuerpo {
    background-color: #CCE4F7;
}

#element{
    background-color : #CCE4F7;
    margin-left: 400px;
    height: 320px;
    width: 500px;

    display: flex;
    flex-direction: column; /* POR DEFECTO ES ROW: LOS ELEMENTOS SE AGREGAN UNO AL LADO DEL OTRO*/
    justify-content: center; /*Alinea los "items flex CON RESPECTO AL EJE PRINCIPAL */
    align-items: center; /*indica la alineación de un elemento dentro del bloque que lo contiene*/
    
    border-color: #8B3A6A;
    border-width: 1px;
    border-style: solid;
    
    
    /*gap: 20px;*/
}
/* este diseño de boton se hizo para el Login (DIV)*/
.contenedorlogin{
    display: flex;
    justify-content:center;
    align-items: center;
}

.botonlogin{
    width: 30mm; /*EL TAMAÑO HORIZONTAL DEL BOTON */
}





.campoTexto{
    width: 300px;
}






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

/*
este es el grid principal de ListadoLetras.blade.php
*/
.grid{
    outline : 4px solid #CCE4F7;
    width: 80%; /*ocupara el 80 % de la pantalla */
    height: 500px; /*esta altura representa total del grid */
    margin: 10px auto;
    display: grid;
    background: #CCE4F7;
    /*
    gap: 20px;
    background: #CCE4F7;
    border: 1px solid black;
    background-color:khaki;*/
}

.item0{
    /*margin: 10px 0px 0px 34mm;*/
    width: 80%;
    margin: 10px auto;
    color: black;
    font-family: sans-serif;
    background-color: #CCE4F7;
}

/*DEFINE EL TIPO DE LETRA Y EL COLOR DE LA LETRA*/
.item{
    color: black;
    font-family: sans-serif; 
    background-color: #CCE4F7;
}

.itemTabla{
    color: black;
    font-family: sans-serif;
    background-color: #CCE4F7;
    /*Estas lineas se agregaron para indicar que debe crecer el contenedor dinamicamente*/
    height: auto;
    width: 100%;
    display: inline-block;
    overflow-x:hidden;
    border: solid;
    /*
    display: flex;
    flex-direction: column;*/
    
}

.item1{
    text-align: start;
    font-size: 2rem;
    height: 50px;
    /*background-color: crimson;
     grid-area: n1;*/
}

.item2{
    text-align: start;
    font-size: 1rem;
    height: 50px;
    /*background-color: dodgerblue;
    grid-area: n2;*/

}
/*DEFINE LA ALINEACION DEL TEXTO, EL TAMÑO DE LA LETRA Y LA ALTURA DEL CONTENEDOR*/
.item2dot5{
    text-align: start;
    font-size: 1rem;
    height: 20px;
}

.item2dot6{
    text-align: start;
    font-size: 1rem;
    height: 7mm;
}

.item3{
    text-align: start;
    font-size: 1rem;
    /*background-color: coral;
    grid-area: n3;*/

}
.item4{
    font-size: 1rem;
    
    /*flex-grow: 1;
    flex-basis: 0;*/
    /*background-color: magenta;
    /*grid-area: n4;*/

} 

/* ESTE diseño de grid se utilizo para vista ListadoLetras.blade.php
   para una seccion de div que muestra la busqueda (incluye controles date y el boton buscar)
   AQUI SE ESPECIFICA EL NUMERO DE FILAS Y COLUMNAS Y SE ASOCIA COMO AREAS A LOS ELEMENTOS
    DEL GRID CONTENEDOR
*/
.gridSamuel{
    outline : 4px solid #CCE4F7;
    width: 32%;
    height: 80px;
    /* margin: 10px auto; */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: 
    "t1 t2 t2"
    "t3 t4 t5";
    /*
    border: 1px solid black;
    background-color:khaki;*/
}


.itemsam1{
    text-align: start;
    font-size: 1rem;
    /*background-color: crimson;*/
    grid-area: t1;
}
.itemsam2{
    text-align: start;
    font-size: 1rem;
    /*background-color: dodgerblue;*/
    grid-area: t2;

}
.itemsam3{
    text-align: start;
    font-size: 1rem;
    /*background-color: chocolate;*/
    grid-area: t3;

}

.itemsam4{
    text-align: start;
    font-size: 1rem;
    /*background-color: coral;*/
    grid-area: t4;

}
.itemsam5{
    text-align: start;
    font-size: 1rem;
    /*background-color: blue;*/
    grid-area: t5;
    
    display: flex;
    justify-content: center;
    
}

/*grid para edit.blade.php*/
.gridEdit{
    outline : 4px solid #CCE4F7;
    width: 80%;
    height: 500px; /*esta altura representa la altura de cada elemento del grid */
    margin: 5px auto;
    display: grid;
    background: #CCE4F7;
}   

.itemBtn{
    text-align: center;
    font-size: 15px;
    width: 35mm;
    height: 10mm;
    /*background-color: blue;*/
    /*
    display: flex;
    justify-content:center;
    align-items: center;*/
}






.botonE{
    width: 100px;
    height: 25px;
}

.Enlace{
    font-size: 20px;
}

.selectaltura{
    display: block;
    height : 25px;
    width: 120mm;
}
/* tamaño asignado a los inputs de entrada para beneficario */
.tamanioInput{
    width: 120mm;
}