* {
box-sizing: border-box;
}
html {
font-family: 'Segoe UI', sans-serif;
text-align: center;
}
body {
padding-top: 50px;
}
a {
text-decoration: none;
}
.users-form form {
display: flex;
flex-direction: column;
gap: 24px;
width: 30%;
margin: 20px auto;
text-align: center;
}
.users-form form input {
font-family: 'Segoe UI', sans-serif;
}
.users-form form input[type=text],
.users-form form input[type=password],
.users-form form input[type=email],
.users-form form input[type=number],
.users-form form input[type=date] {
padding: 8px;
border: 2px solid #aaa;
border-radius: 4px;
outline: none;
transition: 0.3s;
}
.users-form form input[type=text]:focus,
.users-form form input[type=password]:focus,
.users-form form input[type=password]:focus {
border-color: coral;
box-shadow: 0 0 6px 0 coral;
}
.users-form form input[type=submit]{
border: none;
padding: 12px 50px;
font-weight: bold;
text-decoration: none;
transition-duration: 0.15s;
cursor: pointer;
border-radius: 5px;
background-color: white;
color: coral;
border: 2px solid #000000;
}
.users-form form input[type=submit]:hover {
background-color: coral;
color: white;
}
.users-table {
margin-top: 100px;
border-top: 1px solid black;
margin-left: 100px;
margin-right: 100px;
}
.users-table table {
border-collapse: collapse;
border-radius: 100px;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table tr {
background-color: #ececec;
padding: 4px;
}
table th {
padding: 10px 10px;
width: auto;
text-align: center;
font-size: .85em;
}
thead th {
background-color: coral;
color: white;
border-right: 0.5px solid coral;
}
tbody tr {
border-bottom: 1px solid white;
word-wrap: break-word;
}
.users-table--consul,
.users-table--edit,
.users-table--delete {
border-radius: 3px;
opacity: 0.8;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
width: auto;
color: #fff;
text-align: center;
font-weight: bold;
}
.users-table--consul:hover,
.users-table--edit:hover,
.users-table--delete:hover {
border-radius: 3px;
opacity: 1;
}
.users-table--consul {
background: coral;
padding: 6px;
color: #fff;
text-align: center;
font-weight: bold;
}
.users-table--edit {
background: #0e7937;
}
.users-table--delete {
background: #a81919;
padding: 6px;
color: #fff;
text-align: center;
font-weight: bold;
}
input[type=button] {
background-color:coral;
border: 1px solid coral;
text-decoration: none;
color: white;
padding: 20px 30px;
margin: 20px;
cursor: pointer;
border-radius: 60px;
transition-duration: 0.15s;
}
input[type=button]:hover {
opacity: 0.9;
}
.crud-icon {
height: 20px;
width: 20px;
object-fit: cover;
}
select{
padding: 8px;
border: 2px solid #aaa;
border-radius: 4px;
outline: none;
transition: 0.3s;
}
/* Estilo para el paginado */
#tablaPersonas_paginate {
text-align: right;
margin-top: -12px;
}
/* Estilo para el menú de selección de longitud */
#tablaPersonas_length {
margin-top: -20px;
text-align: left;
margin-bottom: -27px;
}
/* Estilo para el cuadro de búsqueda */
#tablaPersonas_filter {
text-align: right;
margin-bottom: 10px;
}
#tablaPersonas_info{
text-align: justify;
}
/* Estilo para los botones de paginado */
#tablaPersonas_paginate .paginate_button {
display: inline-block;
padding: 5px;
margin-right: 5px;
border: 1px solid #ddd;
cursor: pointer;
}
/* Estilo para el botón activo de paginado */
#tablaPersonas_paginate .paginate_button.current {
background-color: coral;
color: #fff;
border: 1px solid coral;
}
/* Estilo para el menú de selección de longitud */
#tablaPersonas_length select {
padding: 5px;
border: 1px solid #ddd;
}
/* Estilo para el cuadro de búsqueda */
#tablaPersonas_filter input {
padding: 5px;
border: 1px solid #ddd;
margin-left: 10px;
}
#equipoElectronicoCheckbox{
display: flex;
}
canvas {
border: 1px solid #000;
}