* {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body {
    margin: 0;
    background-color: aliceblue;
}

p {
    text-align: justify;
}


@media (max-width: 1275px) {
    .content {
        display: block;
        background-color: white;
        width: 100%;
        height: 100vh;
        margin: auto;
        padding: 20px;
    }
}

@media (min-width: 1275px) {
    .content {
        display: block;
        background-color: white;
        width: 60%;
        height: 100vh;
        margin: auto;
        padding: 20px;
    }
}

header {
    top: 0;
    position: sticky;
}

/*Estilos para los titulos*/
h1,
h2,
h3,
h4,
h5,
h6,
th {
    color: cornflowerblue;
}

li::marker {
    color: cornflowerblue;
}


.table-th {
    color: white;
    text-align: center;
}
/*Bloque de estilos para el header*/
.flex-container {
    margin: 0;
    display: flex;
    flex-direction: row;
    background-color: white;
    width: 100%;
    height: 100px;
}

.flex-item {
    margin: 25px;
    align-self: center;
}

@media (min-width: 1024px) {
    .flex-right {
        align-self: flex-start;
    }
    
}

/*Estilo de las paginas del header*/
.flex-item > a {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

.flex-item > a:hover {
    color: lightblue;
}

/*Bloque de estilos para el subheader*/
.sub-header {
    display: flex;
    width: 100%;
    align-content: flex-end;

    color: lightgray;
}

.breadcrumbs {
    margin-right: auto;
    font-size: small;
    align-self: center;
    margin-left: 5px;
}

.options {
    align-self: center;
    color: lightgray;
    margin-left: 5px;
    margin-right: 5px;
}

.options > a {
    color: lightgray;
    font-size: small;
    text-decoration: none;
}

.options > a:hover {
    color: gray;
    text-decoration: underline;
}

/*Estilos para las listas*/
.list_options {
    list-style: square;
}

.list_options > li {
    margin-top: 10px;
}

.list_options > li > a {
    color: dodgerblue;
}

.list_options > li > a:hover {
    color: mediumblue;
}

/*Estilos de las tablas*/

.tabla-all {
    display: block;
    margin: auto;
    width: max-content;
}

.all-headers {
    background-color: cornflowerblue;
    color: white;
}

.all-headers > th {
    padding: 5px;
}

/*Estilos para el bloque del titulo de registros totales*/
.rTotales {
    background-color: cornflowerblue;
    color: white;
    padding-left: 10px;
}

.nTotales {
    color: darkslateblue;
    text-align: right;
    padding: 15px;
}

.tr-data {
    border-bottom: 1px solid dodgerblue;
}

.tr-data > td {
    text-align: center;
    padding: 15px;
}

/*Estilo que esconde un bloque con un valor*/
.objectHidden {
    display: none;
}

/*Estilos para el footer*/
.footer {
    display: flex;
    bottom: 0;
    position: fixed;
    width: 100%;
    height: 30px;
    background-color: darkslateblue;
    align-content: center;
}

.footer-content {
    margin: auto;
    color: white;
}

.footer-content > a {
    font-weight: bold;
    color: aliceblue;
}

/*Estilos para el formulario de creacion de empleado, departamento,etc...*/

.form-create {
    display: block;
    width: 100%;
    margin: auto;
}

.form-create > table {
    width: 100%;
    border: 0px solid transparent;
    padding: 0px;
}

.tr-input,
.tr-label {
    display: block;
    margin-top: 10px;
    margin-bottom: 20px;
}

.tr-input > td {
    display: block;
    margin: auto;
    width: 90%;
}

.tr-label {
    display: block;
    margin-left: 5%;
    width: 90;
}

.tr-input > td > input {
    display: block;
    width: 100%;
}

.tr-input > td > input::placeholder {
    color: lightblue;
}

.tr-label > th {
    font-weight: normal;
}

.title {
    margin: 10px;
    background-color: cornflowerblue;
}

.title > td > h1 {
    padding: 10px;
    color: white;
}

td.btn-td {
    display: block;
    margin-top: 20px;
    margin-left: 40%;
}

input.btn,
.submit-btn {
    display: block;
    width: fit-content;
    margin-bottom: 5px;
    background-color: cornflowerblue;
    border: 1px solid white;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    transition: transform 1s, box-shadow 1s;
}

.submit-btn {
    display: inline-block;
    width: fit-content;
    padding-bottom: 5px;
}

input.btn:hover,
.submit-btn:hover {
    cursor: pointer;
    transform: translateY(-5px);
    box-shadow: 0px 0px transparent;
}

.tr-warning > td {
    font-size: small;
    color: dodgerblue;
}

.tr-warning {
    display: block;
    margin-bottom: 20px;
}

input[type="text"]::placeholder {
    padding-bottom: 10px;
    transition: transform 1s, color 0.5s;
}

input[type="text"]:focus::placeholder {
    transform: translateY(-30px);
    color: cornflowerblue;
}

input:focus {
    background-color: rgb(233, 233, 233);
}

input[type="text"],
input[type="date"] {
    outline: none;
    border: 0px solid white;
    border-bottom: 2px solid dodgerblue;
}

/**/
#activa {
    color: skyblue;
}

.own-navbar {
    background-color: cornflowerblue;
    color: white;
}

.nav-link-font {
    color: white;
}

.nav-link-font:hover {
    color: skyblue;
}


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

.btn {
    background-color: lightblue;
    border-color: white;
    border-radius: 10px;
    color: black;
}

.elementoHidden {
    display: none;
}

li {
    margin: 10px;
}

.tabla-departamento {
    margin: auto;
    width: 100%;
    max-width: max-content;
}

/*Estilos para la lista de atributos*/
#listaAtributos > ul{
    list-style: square;
}

.btn-borrar {
    width: fit-content;
    padding: 3px;
    color: white;
    border-radius: 5px;
    background-color: red;
}


/*Mensaje de respuesta del servidor al borrar un objeto desde la pestaña para ver todos los miembros de ese objeto (NO FUNCIONAL)*/
#mensaje {
    padding: 10px;
    font-style: italic;
    font-weight: bold;
}




#buttons {
    text-align: center;
}

.a-btn {
    padding: 10px;
    border-radius: 7px;
}

.a-btn:hover {
    background-color: whitesmoke;
    color: black;
    text-decoration: none;
}

.btn-create {
    background-color: green;
    color: white;
}

.btn-edit {
    background-color: lightgray;
    color: black;
}

.btn-delete {
    background-color: red;
    margin-right: 5px;
    color: white;
}

.img-dpto {
    width: 30px;
}

h2 {
    font-size: normal;

}

#logo {
    margin-top: 5px;
}