* {
    margin: 10px;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    width: 100%;
    height: auto;
}

.logo-text {
    font-size: 20px;
    color: black;
    text-align: center;
}

.btn_exit {
    color: red;
}

.nav-menu {
    width: 100%;
    text-align: center;
    padding: 10px;
}

.nav-menu a {
    text-decoration: none;
    font-size: 16px;
    color: #fff;
}
.nav-menu li {
    display:inline-block;
    width:20%;
    padding:5px 10px;
    background-color:green;
    border:none;
}

.crud .container {
    width: 100%;
    text-align: center;
}
/**Boton buscador add dieta*/
.data-content .crud button{
    background-color: #fff;
    border: none;
    border-radius: 5px;
    padding: 2px;
    font-weight: bold;
    border-bottom: 2px solid green;
}
.data-content .crud button :hover{
    background-color:green;
    color:#fff;
    border-radius: 2px;
    padding: 4px;
}

.crud-content{
    width: 100%;
    margin-top: 5px;
    text-align: center;
}

.crud-content a {
    text-decoration: none;
    font-size: 14px;
    color: #000;
}

.crud-content button {
    background-color: #fff;
    border: none;
    border-bottom: 2px solid green;
    
}

.crud-content button :hover{
    background-color:green;
    color:#fff;
    border-radius: 2px;
    padding: 4px;

}

.client .container {
    width: 100%;
    text-align: center;
}
.client p {
    font-size: 20px;
    font-weight: BOLD;
    color: green;
    
}

.client .totales{
    font-size: 14px;
    color: green;
    text-align: right;
}

.client table {
    width: 100%;
    border: 1px solid #000;
}

table {
    background-color: gray;
}
table th{
    width: auto;
    text-align: left;
    vertical-align: top;
    border: 1px solid #000;
    padding: 0.3em;
    background-color: black;
    color: #fff;
}

table td{
    padding: 1px;
    background-color: #fff;
}

table td a{
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

table td button a{
    text-decoration: none;
    color: #fff;
}
table td .up {
    border: none;
    border-radius: 20px;
    padding: 2px;
    background-color: green;
}

table td .ed {
    border: none;
    border-radius: 20px;
    padding: 2px;
    background-color: blue;
}

table td .re {
    border: none;
    border-radius: 20px;
    padding: 2px;
    color: #fff;
    background-color: red;
}

table td .di .ci {
    border: none;
    border-radius: 20px;
    padding: 2px;
    background-color: gray;
}



.main-container {
    width: 100%;
    text-align: center;
}

.data-content{
    width: 60%;
    margin-top: 5px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 100px;
    background-color: green;
    padding: 20px;
}

/*Code addclient at adding dieta*/
.data-content .crud  input[type="text"]{
    width: 50%;
    text-align: center;
	border: none;
    background: none;
    border-bottom: 1px solid #fff;
	margin:8px 0;
    outline: none;
}

.data-content  .crud input[type="submit"]{
    width: 200px;
    border-radius: 5px;
    border: none;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	padding:6px 6px;
	border-radius:5px;
	color:black;
	background-color:#fff;
    margin-left: auto;
    margin-right: auto;

}

/*table
.data-content .client table td{
    padding: 1px;
    background-color: #fff;
}

.data-content .client table td a{
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

.data-content .client table td button a{
    text-decoration: none;
    color: #fff;
}
*/
.pop-content {
    text-align: left;
}

h2{
    color: #fff;
}
form label{
    text-align: center;
	width:50%;
	font-weight:bold;
    font-size: 18px;
	display:inline-block;
}


form input[type="text"]{
    width: 50%;
    text-align: center;
	border: none;
    background: none;
    border-bottom: 1px solid #fff;
	margin:8px 0;
    outline: none;
}

form input[type="date"]{
    width: 50%;
    text-align: center;
	border: none;
    background: none;
    border-bottom: 1px solid #fff;
	margin:8px 0;
    outline: none;
}

form input[type="time"]{
    width: 50%;
    text-align: center;
	border: none;
    background: none;
    border-bottom: 1px solid #fff;
	margin:8px 0;
    outline: none;
}

form input[type="file"]{
    width: 50%;
    text-align: center;
	border: none;
    background: none;
    border-bottom: 1px solid #fff;
	margin:8px 0;
    outline: none;
}

form input[type="tel"]{
    width: 50%;
    text-align: center;
	border: none;
    background: none;
    border-bottom: 1px solid #fff;
	margin:8px 0;
    outline: none;
}

form input[type="email"]{
    width: 50%;
    text-align: center;
	border: none;
    background: none;
    border-bottom: 1px solid #fff;
	margin:8px 0;
    outline: none;
}

form input[type="password"]{
    width: 50%;
    text-align: center;
	border: none;
    background: none;
    border-bottom: 1px solid #fff;
	margin:8px 0;
    outline: none;
}

/*seleccion de genero*/
form select {
    width: 50%;
    border: none;
    background-color: green;
    font-size: 18px;
    border-bottom: 1px solid #fff;

}

form select option {
    font-size: 14px;
    background-color: green;
    border: none;
    border-bottom: 1px solid #fff;

}


form input[type="submit"]{
    width: 200px;
    border-radius: 5px;
    border: none;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	padding:6px 6px;
	border-radius:5px;
	color:black;
	background-color:#fff;
    margin-left: auto;
    margin-right: auto;

}

.under-space {
    margin-bottom: 100px;
}
/*Footer code*/
footer {
    position: fixed;
    margin-top: 20px;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(11, 156, 100);
    color: white;
    text-align: center;
}

/*CÓDIGO  PARA EL PAGINADOR DE TABLAS*/
/* Estilos personalizados para el paginador */
.custom-pagination {
    text-align: center;
    margin-top: 20px;
}

.pagination-list {
    display: inline-block;
    list-style: none;
    padding: 0;
}

.page-item {
    display: inline-block;
    margin: 0 5px;
}

.page-link {
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    border-radius: 3px;
}

.page-item.active .page-link {
    background-color: #007bff;
    color: #fff;
}

.page-item.disabled .page-link {
    pointer-events: none;
    background-color: #eee;
    color: #999;
    border: 1px solid #eee;
}

.pagination-icon {
    position: relative;
    /* Agrega aquí estilos para el icono de paginación si es necesario */
}