/*----New Styles */

/* styles.css */

/* Estilos generales */
font-face /*Fonts*/ {
  font-family: arial; /*To charge text fonts and ensuring fonts, TTF fonts loaded in apache folder*/
  src: url(arial.ttf); /*Font file location, it must be in apache folder publication*/
}

/* Estilos para el encabezado */
header {
  font-family: arial;
  color: #0c316d;
  background-color: #032642;
  width: 100%;
  text-shadow: white 5px 5px 20px;
  /*background-color: #032642;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  margin-bottom: 20px;*/
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
  margin: 0;
  padding: 0;
  padding-top: 60px; /* Ajusta este valor según la altura de tu encabezado */

  width: 100%; /*ancho*/
  height: 90%; /*alto*/
  font-size: 80%;
}

head /*where  title is*/ {
  /*float:bottom;*/
  /*height:100%;*/
  color: #0c316d;
  background-color: #032642;
  width: 100%;
  font-family: arial;
}

#contact {
  color: white;
  background-color: #032642;
  width: 100%;
  font-family: arial;
  text-shadow: white 5px 5px 20px;
  font-size: 100%;
}

@media (max-width: 500px) {
  body {
    background-size: contain; /* Ajusta la imagen para que quepa completamente en la pantalla */
    background-position: center center; /* Asegura que se mantenga centrada */
  }
}

#headerfonts {
  font-size: 22px;
  color: #000;
}

#headerfonts1 {
  font-size: 24px;
  color: white;
}

h1 {
  text-align: center;
  /*font:strong 5.4em Arial;*/
  font-size: 350%;
  font-family: arial;
}

p {
  font-size: 20px;
}

h6 {
  color: white;
  font-size: 115%;
  margin: auto;
  font-family: arial;
}

tab li {
  font-size: 100%;
  font-family: arial;
}

th,
td {
  color: black;
  font-family: arial;
  text-align: center;
}

th {
  text-align: center;
}

ul {
  font-size: 115%;
  font-family: arial;
}

.container-fluid {
  padding: 20px;
}

/* Estilos para la tarjeta */
.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.btn-request {
  font-size: 20px;
}

.card-body {
  padding: 20px;
}

/* Estilos para los formularios */
.form-group {
  margin-bottom: 15px;
}

.form-control {
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 10px;
  font-size: 14px;
}

.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
/*----*/
.btn-short {
  width: 20px; /* Adjust the width as necessary */
  margin-right: 10px; /* Space between buttons */
  display: inline-block; /* Allow buttons to be next to each other */
}

.btn {
  /* Optional: Style the buttons consistently */
  padding: 10px; /* Control padding */
  text-align: center;
}


/*----*/
/* Estilos para los botones */
/*.btn {
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-success {
  background-color: #28a745;
  border: none;
  color: #fff;
}

.btn-success:hover {
  background-color: #218838;
}*/

/* Estilos para la tabla */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

table th,
table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

table th {
  /*background-color: #007bff;*/
  background-color: white;
  color: black;
}

table tr:hover {
  background-color: #f1f1f1;
}

/* Estilos para los mensajes de alerta */
.alertify-notifier .ajs-message {
  border-radius: 4px;
  font-size: 14px;
}

.alertify-notifier .ajs-success {
  background-color: #28a745;
  color: #fff;
}

.alertify-notifier .ajs-error {
  background-color: #dc3545;
  color: #fff;
}

.alertify-notifier .ajs-warning {
  background-color: #ffc107;
  color: #000;
}

/* Estilos para los iconos */
.fas {
  cursor: pointer;
  color: white;
  transition: color 0.3s ease;
}

.fas:hover {
  color: #0056b3;
}

#welcome {
  font-size: 35px;
  padding: 0%;
}

#loginbutton,
#requestaccess,
#registerbutton,
#cancelbutton,
#submitbutton {
  /*font-size: 250%;*/
  font-family: arial;
  display: inline-block;
  /*margin-left: 10px;*/
}

#main {
  font-size: 250%;
  font-family: arial;
  display: inline-block;
  margin-right: 0px;
}

#bodyadminmodule,
#adminmodulecontainer {
  /*background-color: #0085c3;*/
  background-color: #e0e0e0;
  margin: 0%;
  padding: 0%;
  width: 100%;
  height: 100%;
}

#autosearch,
#tableswhite {
  background-color: white;
  text-align: center;
}

nav {
  width: 100%; /* El nav ocupa todo el ancho */
  background-color: #333; /* Fondo oscuro */
  padding: 0%;
}

nav ul {
  display: flex; /* Usamos flexbox para los elementos de la lista */
  justify-content: center; /* Centra los enlaces horizontalmente */
  list-style: none; /* Quitamos los puntos de la lista */
  padding: 0%;
}

nav ul li {
  margin: 0 20px; /* Espaciado entre los elementos del menú */
  padding: 0%;
}

nav ul li a {
  color: white; /* Color blanco para los enlaces */
  text-decoration: none; /* Quitamos el subrayado */
  font-size: 16px;
  padding: 0%;
  /*padding: 15px 20px; /* Espaciado interno para los enlaces */
  /*display: block;*/
}

/* Efecto hover para los enlaces */
nav ul li a:hover {
  background-color: #555; /* Fondo más claro al pasar el ratón */
  border-radius: 5px;
  padding: 0%;
}

/* Estilos responsive */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column; /* En pantallas pequeñas, los enlaces se apilan verticalmente */
    align-items: center; /* Alineación centrada */
    padding: 0%;
  }

  nav ul li {
    margin: 10px 0; /* Espaciado entre elementos en vista vertical */
    padding: 0%;
  }

  nav ul li a {
    font-size: 18px; /* Aumentamos el tamaño de la fuente en pantallas pequeñas */
    padding: 0%;
    /*padding: 10px 15px;*/
  }
}

form hr {
  max-width: 100%;
  width: 80%;
  border: 1px solid #ccc;
  margin: 10px auto;
  box-sizing: border-box;
}

#autosearch th,
#autoserach td {
  white-space: nowrap; /* Evita el salto de línea dentro de las celdas */
  overflow: hidden; /* Oculta cualquier contenido que se desborde */
  text-overflow: ellipsis; /* Agrega '...' si el contenido es demasiado largo */
}

#autosearch td:nth-child(2),
#autosearch th:nth-child(2) {
  /*max-width: 90px; /* Ajusta el valor según el ancho deseado*/
  width: 70px; /* Ajusta el ancho fijo si es necesario */
  word-wrap: break-word; /* Permite que los enlaces largos se ajusten al contenido */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Otros anchos opcionales para las otras columnas */
#autosearch td:nth-child(3),
#autosearch th:nth-child(3),
#autosearch td:nth-child(4),
#autosearch th:nth-child(4) {
  width: 100px;
}

#autosearch td:nth-child(5),
#autosearch th:nth-child(5) {
  width: 30px;
}
#autosearch td:nth-child(6),
#autosearch th:nth-child(6) {
  width: 10px;
}

#autosearch {
  width: 100%;
  table-layout: auto; /* Asegura que la tabla se ajuste al contenido */
  font-size: 24px;
}

#autosearch td,
#autosearch th {
  word-wrap: break-word;
  max-width: 200px; /* Ajustar el valor a tus necesidades */
}

.btn-short {
  width: 20px; /* Adjust the width as necessary */
  margin-right: 10px; /* Space between buttons */
  display: inline-block; /* Allow buttons to be next to each other */
}

.btn {
  /* Optional: Style the buttons consistently */
  padding: 10px; /* Control padding */
  text-align: center;
}

/* Personalización de las notificaciones de Alertify */

/* Aumentar el tamaño de la fuente en las notificaciones */
.ajs-message {
  font-size: 18px !important; /* Cambia el tamaño de la fuente */
  font-weight: bold !important; /* Cambiar a negrita si lo deseas */
  white-space: normal; /* Permite el salto de línea */
  word-wrap: break-word; /* Ajuste de palabras largas */
  /*max-width: 1000px; /* Ajusta el ancho máximo de la notificación */
}

/* Centrando las notificaciones*/
.ajs-container {
  font-size: 28px !important;
  top: 50% !important; /* Centrado vertical */
  left: 50% !important; /* Centrado horizontal */
  transform: translate(-50%, -50%) !important; /* Ajuste exacto en el centro */
  position: absolute;
  z-index: 9999; /* Asegura que la notificación quede encima de otros elementos */
  white-space: normal; /* Permite el salto de línea */
  word-wrap: break-word; /* Ajuste de palabras largas */
}

/* Personalización para las notificaciones de éxito */
.ajs-success {
  text-align: center !important;
  width: 700px !important;
  height: 30px !important;
  padding: 5px 15px; /* Añade un poco de relleno para que el texto no toque los bordes */
  font-size: 22px !important;
  font-weight: bold !important; /* Pone el texto en negrita */
  background-color: #4caf50 !important; /* Verde para éxito */
  color: white !important;
  display: inline-flex; /* Usamos inline flexbox */
  justify-content: center; /* Centra el texto horizontalmente */
  align-items: center; /* Centra el texto verticalmente */
  white-space: normal; /* Permite el salto de línea */
  word-wrap: break-word; /* Ajuste de palabras largas */
  max-width: 1000px; /* Ajusta el ancho máximo de la notificación */
}

/* Personalización para las notificaciones de error */
.ajs-error {
  text-align: center !important;
  width: 700px !important;
  height: 30px !important;
  padding: 5px 15px; /* Añade un poco de relleno para que el texto no toque los bordes */
  font-size: 22px !important;
  font-weight: bold !important; /* Pone el texto en negrita */
  background-color: #f44336 !important; /* Rojo para error */
  color: white !important;
  display: inline-flex; /* Usamos inline flexbox */
  justify-content: center; /* Centra el texto horizontalmente */
  align-items: center; /* Centra el texto verticalmente */
  white-space: normal; /* Permite el salto de línea */
  word-wrap: break-word; /* Ajuste de palabras largas */
  max-width: 1000px; /* Ajusta el ancho máximo de la notificación */
}

/* Personalización para las notificaciones de advertencia */
.ajs-warning {
  text-align: center !important;
  width: 700px !important;
  height: 200px !important;
  padding: 5px 15px; /* Añade un poco de relleno para que el texto no toque los bordes */
  font-size: 24px !important;
  font-weight: bold !important; /* Pone el texto en negrita */
  background-color: #ff9800 !important; /* Naranja para advertencia */
  color: black !important;
  display: inline-flex; /* Usamos inline flexbox */
  justify-content: center; /* Centra el texto horizontalmente */
  align-items: center; /* Centra el texto verticalmente */
  white-space: normal; /* Permite el salto de línea */
  word-wrap: break-word; /* Ajuste de palabras largas */
}

iframe {
  max-width: 100%;
  height: auto;
  position: relative;
}

.color-dark-icon {
  color: brown;
  font-size: 30px;
}

header h1 {
  margin: 0;
  font-size: 24px;
}

/* Estilos para el pie de página */
/*footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}*/

#notes {
  background-color: #0085c3; /* background color */
  width: 98%;
  font-family: arial;
  margin: 40px auto;
  border-radius: 15px;
  text-shadow: white 5px 5px 20px;
}

#resume {
  background-color: white;
  /*text-color:black;*/
  font-family: arial;
}

#cancel {
  font-size: 150%;
  /*background-color:#5F9EA0;*/
  margin: 40px auto;
  padding: 5px;
  background: gray;
  box-shadow: #999 5px 5px 10px;
  width: 600px;
  font-family: arial;
}

.inputdata input {
  margin-left: 8em;
  width: 56%;
  font-size: 105%;
  font-family: arial;
}

.inputdata label {
  position: absolute;
  font-family: arial;
}

.inputdata1 input {
  /*margin-left: 0.5em;*/
  width: 80%;
  height: 2em;
  font-size: 1500%;
  font-family: arial;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
}

.inputdata1 label {
  position: absolute;
  font-family: arial;
}

#username,
#access {
  font-size: 200%;
  font-family: arial;
}
#username1 {
  font-size: 24px;
  margin-left: 2em;
  font-family: arial;
}

#img_login,
#img_fix {
  size: 1200%;
  font-family: arial;
}

#form_title1 {
  font-size: 140%;
  position: absolute;
  margin-left: 0.5em;
  font-family: arial;
}
#form_title {
  font-size: 32px;
  margin-left: 0.05em;
  font-family: arial;
}

#Register,
#Signout {
  font-size: 100%;
  background-color: #0085c3;
  margin: 40px auto;
  padding: 5px;
  background: gray;
  box-shadow: #999 5px 5px 10px;
  width: 600px;
  font-family: arial;
}

#div Display {
  background-color: red;
  box-shadow: #999 5px 5px 10px;
}

div .column-custom-wrap {
  width: 90%;
  margin: auto;
}

div .card-body {
  overflow-x: scroll;
  font-size: 24px;
  text-align: center;
}

#maincategory,
#videolink,
#category,
#proforpers,
#description,
#save_link {
  font-size: 24px;
  text-align: center;
}

#tdlink {
  text-align: left;
}

#tdmaincategory,
#tdcategory,
#tdproforpers,
#tddescription {
  text-align: center;
}

/* Style the list */
ul.tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 5px double #ccc;
  background-color: #f1f1f1;
  font-family: arial;
}

/* Float the list items side by side */
ul.tab li {
  float: left;
  font-family: arial;
}

/* Style the links inside the list items */
ul.tab li a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 30px;
  font-family: arial;
}

/* Change background color of links on hover */
ul.tab li a:hover {
  background-color: #ddd;
  font-family: arial;
}

/* Create an active/current ink class */
ul.tab li a:focus,
.active {
  background-color: #ccc;
  font-family: arial;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  font-family: arial;
}

/* Style the list */
ul.tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 5px double #ccc;
  background-color: #f1f1f1;
  font-family: arial;
}

/* Float the list items side by side */
ul.tab li {
  float: left;
  font-family: arial;
}

/* Style the links inside the list items */
ul.tab li a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3;
}
/*----- End New Styles */

/* styles.css */

/* Estilos generales */
/*font-face /*Fonts*/ /*{
  /*font-family: arial; /*To charge text fonts and ensuring fonts, TTF fonts loaded in apache folder*/
/*src: url(arial.ttf); /*Font file location, it must be in apache folder publication*/
/*}

/* Estilos para el encabezado */
/*header {
  font-family: arial;
  color: #0c316d;
  background-color: #032642;
  width: 100%;
  text-shadow: white 5px 5px 20px;
  /*background-color: #032642;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  margin-bottom: 20px;*/
/*}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
  margin: 0;
  padding: 0;
  padding-top: 60px; /* Ajusta este valor según la altura de tu encabezado */

/*width: 100%; /*ancho*/
/*height: 90%; /*alto*/
/*font-size: 80%;
/*}

/*head /*where  title is*/ /*{
  /*float:bottom;*/
/*height:100%;*/
/*color: #0c316d;
  background-color: #032642;
  width: 100%;
  font-family: arial;
}

#contact {
  color: white;
  background-color: #032642;
  width: 100%;
  font-family: arial;
  text-shadow: white 5px 5px 20px;
  font-size: 100%;
}

@media (max-width: 500px) {
  body {
    background-size: contain; /* Ajusta la imagen para que quepa completamente en la pantalla */
/*background-position: center center; /* Asegura que se mantenga centrada */
/*}
}

/*#headerfonts {
  font-size: 24px;
  color: #000;
}

#headerfonts1 {
  font-size: 24px;
  color: white;
}

h1 {
  text-align: center;
  /*font:strong 5.4em Arial;*/
/*font-size: 350%;
  font-family: arial;
}

p {
  font-size: 20px;
}

h6 {
  color: white;
  font-size: 115%;
  margin: auto;
  font-family: arial;
}

tab li {
  font-size: 100%;
  font-family: arial;
}

th,
td {
  color: black;
  font-family: arial;
  text-align: center;
}

th {
  text-align: center;
}

ul {
  font-size: 115%;
  font-family: arial;
}

.container-fluid {
  padding: 20px;
}

/* Estilos para la tarjeta */
/*.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.btn-request {
  font-size: 20px;
}

.card-body {
  padding: 20px;
}

/* Estilos para los formularios */
/*.form-group {
  margin-bottom: 15px;
}

.form-control {
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 10px;
  font-size: 14px;
}

.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
/*----*/
/*.btn-short {
  width: 20px; /* Adjust the width as necessary */
/*margin-right: 10px; /* Space between buttons */
/*display: inline-block; /* Allow buttons to be next to each other */
/*}

.btn {
  /* Optional: Style the buttons consistently */
/*padding: 10px; /* Control padding */
/*text-align: center;
}
/*----*/
/* Estilos para los botones */
/*.btn {
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-success {
  background-color: #28a745;
  border: none;
  color: #fff;
}

.btn-success:hover {
  background-color: #218838;
}*/

/* Estilos para la tabla */
/*table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

table th,
table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

table th {
  /*background-color: #007bff;*/
/*background-color: white;
  color: black;
}

table tr:hover {
  background-color: #f1f1f1;
}

/* Estilos para los mensajes de alerta */
/*.alertify-notifier .ajs-message {
  border-radius: 4px;
  font-size: 14px;
}

.alertify-notifier .ajs-success {
  background-color: #28a745;
  color: #fff;
}

.alertify-notifier .ajs-error {
  background-color: #dc3545;
  color: #fff;
}

.alertify-notifier .ajs-warning {
  background-color: #ffc107;
  color: #000;
}

/* Estilos para los iconos */
/*.fas {
  cursor: pointer;
  color: black;
  transition: color 0.3s ease;
}

.fas:hover {
  color: #0056b3;
}

#welcome {
  font-size: 35px;
  padding: 0%;
}

#loginbutton,
#requestaccess,
#registerbutton,
#cancelbutton,
#submitbutton {
  /*font-size: 250%;*/
/*font-family: arial;
  display: inline-block;
  /*margin-left: 10px;*/
/*}

#main {
  font-size: 250%;
  font-family: arial;
  display: inline-block;
  margin-right: 0px;
}

#bodyadminmodule,
#adminmodulecontainer {
  /*background-color: #0085c3;*/
/*background-color: #e0e0e0;
  margin: 0%;
  padding: 0%;
  width: 100%;
  height: 100%;
}

#autosearch,
#tableswhite {
  background-color: white;
  text-align: center;
}

nav {
  width: 100%; /* El nav ocupa todo el ancho */
/*background-color: #333; /* Fondo oscuro */
/*padding: 0%;
}

nav ul {
  display: flex; /* Usamos flexbox para los elementos de la lista */
/*justify-content: center; /* Centra los enlaces horizontalmente */
/*list-style: none; /* Quitamos los puntos de la lista */
/*padding: 0%;
}

nav ul li {
  margin: 0 20px; /* Espaciado entre los elementos del menú */
/*  padding: 0%;
}

nav ul li a {
  color: white; /* Color blanco para los enlaces */
/*text-decoration: none; /* Quitamos el subrayado */
/*font-size: 16px;
  padding: 0%;
  /*padding: 15px 20px; /* Espaciado interno para los enlaces */
/*display: block;*/
/*}

/* Efecto hover para los enlaces */
/*nav ul li a:hover {
  background-color: #555; /* Fondo más claro al pasar el ratón */
/*border-radius: 5px;
  padding: 0%;
}

/* Estilos responsive */
/*@media (max-width: 768px) {
  nav ul {
    flex-direction: column; /* En pantallas pequeñas, los enlaces se apilan verticalmente */
/*  align-items: center; /* Alineación centrada */
/*padding: 0%;
  }

  nav ul li {
    margin: 10px 0; /* Espaciado entre elementos en vista vertical */
/*padding: 0%;
  }

  nav ul li a {
    font-size: 18px; /* Aumentamos el tamaño de la fuente en pantallas pequeñas */
/*padding: 0%;
    /*padding: 10px 15px;*/
/*}
}

form hr {
  max-width: 100%;
  width: 80%;
  border: 1px solid #ccc;
  margin: 10px auto;
  box-sizing: border-box;
}

#autosearch th,
#autoserach td {
  white-space: nowrap; /* Evita el salto de línea dentro de las celdas */
/*overflow: hidden; /* Oculta cualquier contenido que se desborde */
/*text-overflow: ellipsis; /* Agrega '...' si el contenido es demasiado largo */
/*}

#autosearch td:nth-child(2),
#autosearch th:nth-child(2) {
  /*max-width: 90px; /* Ajusta el valor según el ancho deseado*/
/*width: 70px; /* Ajusta el ancho fijo si es necesario */
/*word-wrap: break-word; /* Permite que los enlaces largos se ajusten al contenido */
/*white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Otros anchos opcionales para las otras columnas */
/*#autosearch td:nth-child(3),
#autosearch th:nth-child(3),
#autosearch td:nth-child(4),
#autosearch th:nth-child(4) {
  width: 100px;
}

#autosearch td:nth-child(5),
#autosearch th:nth-child(5) {
  width: 30px;
}
#autosearch td:nth-child(6),
#autosearch th:nth-child(6) {
  width: 10px;
}

#autosearch {
  width: 100%;
  table-layout: auto; /* Asegura que la tabla se ajuste al contenido */
/*font-size: 24px;
}

#autosearch td,
#autosearch th {
  word-wrap: break-word;
  max-width: 200px; /* Ajustar el valor a tus necesidades */
/*}

.btn-short {
  width: 20px; /* Adjust the width as necessary */
/*margin-right: 10px; /* Space between buttons */
/*display: inline-block; /* Allow buttons to be next to each other */
/*}

.btn {
  /* Optional: Style the buttons consistently */
/*padding: 10px; /* Control padding */
/*text-align: center;
}

/* Personalización de las notificaciones de Alertify */

/* Aumentar el tamaño de la fuente en las notificaciones */
/*.ajs-message {
  font-size: 18px !important; /* Cambia el tamaño de la fuente */
/*font-weight: bold !important; /* Cambiar a negrita si lo deseas */
/*white-space: normal; /* Permite el salto de línea */
/*word-wrap: break-word; /* Ajuste de palabras largas */
/*max-width: 1000px; /* Ajusta el ancho máximo de la notificación */
/*}

/* Centrando las notificaciones*/
/*.ajs-container {
  font-size: 28px !important;
  top: 50% !important; /* Centrado vertical */
/*left: 50% !important; /* Centrado horizontal */
/*transform: translate(-50%, -50%) !important; /* Ajuste exacto en el centro */
/*position: absolute;
  z-index: 9999; /* Asegura que la notificación quede encima de otros elementos */
/*white-space: normal; /* Permite el salto de línea */
/*word-wrap: break-word; /* Ajuste de palabras largas */
/*}

/* Personalización para las notificaciones de éxito */
/*.ajs-success {
  text-align: center !important;
  width: 700px !important;
  height: 30px !important;
  padding: 5px 15px; /* Añade un poco de relleno para que el texto no toque los bordes */
/*font-size: 22px !important;
  font-weight: bold !important; /* Pone el texto en negrita */
/*background-color: #4caf50 !important; /* Verde para éxito */
/*color: white !important;
  display: inline-flex; /* Usamos inline flexbox */
/*justify-content: center; /* Centra el texto horizontalmente */
/*align-items: center; /* Centra el texto verticalmente */
/*white-space: normal; /* Permite el salto de línea */
/*word-wrap: break-word; /* Ajuste de palabras largas */
/*max-width: 1000px; /* Ajusta el ancho máximo de la notificación */
/*}

/* Personalización para las notificaciones de error */
/*.ajs-error {
  text-align: center !important;
  width: 700px !important;
  height: 30px !important;
  padding: 5px 15px; /* Añade un poco de relleno para que el texto no toque los bordes */
/*font-size: 22px !important;
  font-weight: bold !important; /* Pone el texto en negrita */
/*background-color: #f44336 !important; /* Rojo para error */
/*color: white !important;
  /*display: inline-flex; /* Usamos inline flexbox */
/*justify-content: center; /* Centra el texto horizontalmente */
/*align-items: center; /* Centra el texto verticalmente */
/*white-space: normal; /* Permite el salto de línea */
/*word-wrap: break-word; /* Ajuste de palabras largas */
/*max-width: 1000px; /* Ajusta el ancho máximo de la notificación */
/*}

/* Personalización para las notificaciones de advertencia */
/*.ajs-warning {
  text-align: center !important;
  width: 700px !important;
  height: 200px !important;
  padding: 5px 15px; /* Añade un poco de relleno para que el texto no toque los bordes */
/*font-size: 24px !important;
  font-weight: bold !important; /* Pone el texto en negrita */
/*background-color: #ff9800 !important; /* Naranja para advertencia */
/*color: black !important;
  display: inline-flex; /* Usamos inline flexbox */
/*justify-content: center; /* Centra el texto horizontalmente */
/*align-items: center; /* Centra el texto verticalmente */
/*white-space: normal; /* Permite el salto de línea */
/*word-wrap: break-word; /* Ajuste de palabras largas */
/*}

iframe {
  max-width: 100%;
  height: auto;
  position: relative;
}

.color-dark-icon {
  color: brown;
  font-size: 30px;
}

header h1 {
  margin: 0;
  font-size: 24px;
}

/* Estilos para el pie de página */
/*footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}*/

/*#notes {
  background-color: #0085c3; /* background color */
  /*width: 98%;
  font-family: arial;
  margin: 40px auto;
  border-radius: 15px;
  text-shadow: white 5px 5px 20px;
}

#resume {
  background-color: white;
  /*text-color:black;*/
  /*font-family: arial;
}

#cancel {
  font-size: 150%;
  /*background-color:#5F9EA0;*/
  /*margin: 40px auto;
  padding: 5px;
  background: gray;
  box-shadow: #999 5px 5px 10px;
  width: 600px;
  font-family: arial;
}

.inputdata input {
  margin-left: 8em;
  width: 56%;
  font-size: 105%;
  font-family: arial;
}

.inputdata label {
  position: absolute;
  font-family: arial;
}

.inputdata1 input {
  /*margin-left: 0.5em;*/
  /*width: 80%;
  height: 2em;
  font-size: 1500%;
  font-family: arial;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
}

.inputdata1 label {
  position: absolute;
  font-family: arial;
}

#username,
#access {
  font-size: 200%;
  font-family: arial;
}
#username1 {
  font-size: 24px;
  margin-left: 2em;
  font-family: arial;
}

#img_login,
#img_fix {
  size: 1200%;
  font-family: arial;
}

#form_title1 {
  font-size: 140%;
  position: absolute;
  margin-left: 0.5em;
  font-family: arial;
}
#form_title {
  font-size: 32px;
  margin-left: 0.05em;
  font-family: arial;
}

#Register,
#Signout {
  font-size: 100%;
  background-color: #0085c3;
  margin: 40px auto;
  padding: 5px;
  background: gray;
  box-shadow: #999 5px 5px 10px;
  width: 600px;
  font-family: arial;
}

#div Display {
  background-color: red;
  box-shadow: #999 5px 5px 10px;
}

div .column-custom-wrap {
  width: 90%;
  margin: auto;
}

div .card-body {
  overflow-x: scroll;
  font-size: 24px;
  text-align: center;
}

#maincategory,
#videolink,
#category,
#proforpers,
#description,
#save_link {
  font-size: 24px;
  text-align: center;
}

#tdlink {
  text-align: left;
}

#tdmaincategory,
#tdcategory,
#tdproforpers,
#tddescription {
  text-align: center;
}

/* Style the list */
/*ul.tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 5px double #ccc;
  background-color: #f1f1f1;
  font-family: arial;
}

/* Float the list items side by side */
/*ul.tab li {
  float: left;
  font-family: arial;
}

/* Style the links inside the list items */
/*ul.tab li a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 30px;
  font-family: arial;
}

/* Change background color of links on hover */
/*ul.tab li a:hover {
  background-color: #ddd;
  font-family: arial;
}

/* Create an active/current ink class */
/*ul.tab li a:focus,
.active {
  background-color: #ccc;
  font-family: arial;
}

/* Style the tab content */
/*.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  font-family: arial;
}

/* Style the list */
/*ul.tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 5px double #ccc;
  background-color: #f1f1f1;
  font-family: arial;
}

/* Float the list items side by side */
/*ul.tab li {
  float: left;
  font-family: arial;
}

/* Style the links inside the list items */
/*ul.tab li a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 30px;
  font-family: arial;
}

/* Change background color of links on hover */
/*ul.tab li a:hover {
  background-color: #ddd;
  font-family: arial;
}

/* Create an active/current ink class */
/*ul.tab li a:focus,
.active {
  background-color: #ccc;
  font-family: arial;
}

/* Style the tab content */
/*.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  font-family: arial;
}

footer p {
  margin: 0;
  font-size: 14px;
}

/* styles.css */

/* Estilos para el encabezado */
/*.header {
  width: 100%;
  background-color: #007bff; /* Color de fondo del encabezado */
  /*color: #fff; /* Color del texto */
  /*padding: 10px 0;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
  /*position: relative; /* Asegura que el encabezado esté en la parte superior */
  /*z-index: 1000; /* Asegura que el encabezado esté por encima del contenido */
/*}

/* Estilos para el cuerpo */
/*.container-fluid {
  padding-top: 20px; /* Espacio entre el encabezado y el cuerpo */
/*}

iframe {
  max-width: 100%;
  height: auto;
  position: relative;
}*/

.username-style {
  font-weight: bold;
  color: #ffa500; /* Cambia este valor por el color que desees */
}

/*.error {
  border: 1px solid red !important;
}

.container1 {
  background-color: white; /* Fondo blanco */
  /*padding: 20px; /* Espaciado interno */
  /*border-radius: 10px; /* Bordes redondeados */
  /*box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
/*}

.container1 p,
.container1 h3,
.container1 label {
  text-align: left !important; /* Alineación a la izquierda */
/*}

.conditions {
  text-align: center;
}

.destacado {
  color: blue; /* Rojo, por ejemplo */
/*  font-weight: bold; /* Opcional: para hacer el texto más grueso */
/*}

#welcome {
  font-size: 35px;
  padding: 0%;
}