html,
body {
  height: 100%;
  margin: 0;
}

/* Set padding to keep content from hitting the edges */
.body-content {
  padding-left: 7px;
  padding-right: 7px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
  white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
  max-width: 600px;
}

.navbar {
  height: 90px;
  justify-content: space-between;
  color: #fff;
  padding: 0 10px;
  max-width: 1004px;
  width: 100%;
  margin: 0 auto;
  display: block;
}

.navbar a,
.navbar span {
  color: black;
}

.logo {
  width: 102px;
  margin-bottom: 10px; /* Espacio debajo de la imagen */
  align-items: center; /* Centra todos los elementos dentro del contenedor */
}

.Menu a {
  color: white;
}

.Titulo_aplic {
  max-width: 702px;
  height: 54px;
  width: 100%;
  padding-top: 8px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16pt;
  font-weight: bold;
  font-style: normal;
  color: #333333;
}

.Usuario {
  height: 18px;
  padding-left: 45px;
  margin-top: -15px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10pt;
  font-weight: bold;
  font-style: normal;
  color: #333333;
}

.Rol {
  height: 18px;
  padding-left: 75px;
  margin-top: 0.5px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 8pt;
  font-style: italic;
  color: #333333;
}

.Version {
  height: 18px;
  margin-top: -15px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10pt;
  font-weight: normal;
  font-style: normal;
  color: #333333;
}

.intro-text {
  font-family: Arial, sans-serif;
  font-size: 14px;
  text-align: justify;
  margin: 8px 0px 8px 20px;
}

.logout-button {
  width: 200px;
  height: 54px;
  padding-top: 13px;
  padding-left: 45px;
}

.top-section {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.bottom-section {
  height: 18px; /* Altura de la barra de menú */
  background-color: #b3b7ba; /* Color de fondo de la barra de menú */
}

/* Barra de menú */
.menu-bar {
  display: flex;
  height: 100%;
}

/* Elementos de menú */
.Menu {
  width: 143px;
  height: 100%; /* Ocupa toda la altura de la barra de menú */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-weight: bold;
  font-style: normal;
  color: #fcfcfc;
  background-color: #252440; /* Color de fondo de los elementos de menú */
}

.Titulo1 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt;
  font-weight: bold;
  font-style: normal;
  color: #333333;
}

.Titulo1Cuestionario {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt;
  font-weight: bold;
  font-style: normal;
  color: #333333;
  margin: 8px 0px 8px 20px;
}

.Titulo2 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt;
  font-weight: normal;
  font-style: normal;
  color: #333333;
}

.panel-body ul {
  line-height: 15px;
}

.Titulo3 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-weight: bold;
  font-style: normal;
  color: #333333;
  margin-bottom: 6px;
}

.Titulo3Cuestionario {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-weight: bold;
  font-style: normal;
  color: #333333;
  margin: 15px 0px 15px 20px;
}

.Contenido {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-weight: normal;
  font-style: normal;
  color: #333333;
}

.ContenidoCuestionario {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-weight: normal;
  font-style: normal;
  color: #333333;
  margin-top: 15px;
  margin-bottom: 5px;
}

.Titulo-Contacto {
  font-size: 24px;
  font-weight: bold;
  font-style: normal;
  color: #252440;
  text-align: center;         /* Centra el texto horizontalmente */
  margin-top: 40px;           /* Sangría o margen superior */
  margin-bottom: 30px;         /* Margen inferior */
}

.miListaNumerada {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-weight: normal;
  font-style: normal;
  color: #333333;
  list-style-type: none;
}

.miListaNumerada label {
  border-radius: 5px; /* Bordes redondeados */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-weight: normal;
  font-style: normal;
  color: #333333;
}

.miListaNumerada li {
  margin-bottom: 10px; /* Espacio entre elementos */
}

.miListaNumerada li input[type="checkbox"] {
  margin-right: 10px; /* Espacio entre la casilla de verificación y la etiqueta */
}

.IzquierdoCuestionario {
  padding-right: 10px !important;
  padding-left: 0px !important;
}

.DerechoCuestionario {
  padding-right: 10px !important;
  padding-left: 5px !important;
  border: 1px solid #cccccc;
  border-radius: 4px;
  margin-bottom: 14px;
  height: calc(
    70vh
  ); /* Altura del 100% de la ventana menos el espacio superior e inferior */
  overflow-y: auto;
}

.VentanaGeneral {
  padding-right: 17px !important;
  padding-left: 11px !important;
  margin-bottom: 15px;
  height: calc(
    80vh
  ); /* Altura del 100% de la ventana menos el espacio superior e inferior */
  overflow-y: auto;
}

.Contenido-plus {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-weight: normal;
  font-style: normal;
  color: #333333;
  margin-bottom: 10px; /* Ajusta el espacio entre párrafos si es necesario */
  padding-left: 20px; /* Ajusta el valor de la sangría a tu preferencia */
}

.textarea-grande {
  width: 500%; /* Hace que el textarea ocupe el 100% del ancho de su contenedor */
  height: 150px; /* Puedes ajustar la altura según tus necesidades */
  padding: 10px; /* Agrega algo de espacio interno para que el texto no esté justo en el borde */
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
  border: 1px solid #ccc; /* Estilo opcional para el borde */
  border-radius: 4px; /* Estilo opcional para bordes redondeados */
  resize: vertical; /* Permite al usuario cambiar el tamaño verticalmente */
}

.custom-label {
  display: inline-block;
  width: 35%; /* Ajusta el ancho según tus necesidades */
  text-align: left; /* Alinea el texto a la izquierda */
  margin-right: 5px; /* Espacio entre el label y el input */
}

.custom-input {
  width: 60%; /* Ajusta el ancho según tus necesidades */
  display: inline-block;
}

.userList {
  border-collapse: separate;
  border-spacing: 5px;
  width: 100%;
}
.userList th,
.userList td {
  padding: 5px;
  text-align: left;
  width: 10%;
}

.userForm {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.form-row {
  display: flex;
  align-items: center; /* Alinea verticalmente los elementos del formulario */
  margin-bottom: 10px; /* Espacio entre los grupos de formulario */
}

.form-row label {
  flex-basis: 30%; /* Ancho base para todas las etiquetas */
  margin-right: 30px; /* Espacio entre la etiqueta y el campo de entrada */
  margin-left: 25px; /* Espacio entre la etiqueta y el campo de entrada */
}

.form-row input,
.form-row select {
  flex: 1; /* Los campos de entrada y select ocuparán el espacio restante */
  padding: 2px; /* Ajusta el relleno según sea necesario */
}

.form-row .error {
  width: 100%;
  margin-bottom: 10px;
}

.botones {
  display: flex;
  justify-content: flex-start; /* Alinea los botones al inicio del contenedor */
  margin-top: 20px; /* Ajusta este valor para aumentar o disminuir el espacio superior */
}

/* Estilos específicos para la fila de botones */
.botones .mybtn {
  display: inline-block;
  padding: 8px 16px;
  text-decoration: none;
  cursor: pointer;
  margin-right: 10px; /* Espacio entre los botones */
}

.botones .mybtn:last-child {
  margin-right: 0; /* Elimina el margen adicional del último botón */
}

.status-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%; /* Hace que el indicador sea un círculo */
  margin-right: 5px; /* Espacio a la derecha del indicador */
}

.status-indicator.admin {
  background-color: blue; /* Color azul para administradores */
}

.status-indicator.active {
  background-color: green; /* Color verde para usuarios activos */
}

.status-indicator.baja {
  background-color: grey; /* Color gris para indicar que el usuario está dado de baja */
}

.btn-group {
  display: flex; /* Utiliza Flexbox para alinear los botones en línea */
  align-items: center; /* Alinea los botones verticalmente */
  justify-content: flex-start; /* Alinea los botones al inicio del contenedor */
}

.btn-group .mybtn {
  margin-right: 5px; /* Añade un margen a la derecha de cada botón */
}

.btn-group .mybtn:last-child {
  margin-right: 0; /* Elimina el margen adicional del último botón */
}

.form-group-wrapper {
  display: flex;
  flex-direction: column;
}

.form-group-contact {
  width: 100%;
  max-width: 400px; /* Limita el ancho del formulario para centrarlo */
  display: flex;
  flex-direction: column; /* Organiza los campos en una columna */
  align-items: center; /* Centra los elementos horizontalmente */
  margin: 0 auto; /* Centra el formulario en la página */
  margin-bottom: 5px;
}

.input-field, .textarea-field {
  width: 100%; /* Hace que el cuadro ocupe todo el ancho permitido */
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* Asegura que el padding no expanda el ancho */
  margin-bottom: 10px; /* Agrega margen entre los campos */
}

.button-field {
  padding: 10px 50px; /* Ajusta el tamaño del botón */
  font-size: 14px;
  border: none;
  border-radius: 4px;
  background-color: #007bff; /* Color de fondo del botón */
  color: white; /* Color del texto del botón */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  text-align: center; /* Centra el texto dentro del botón */
  margin-bottom: 20px; /* Agrega margen debajo del botón */
  display: block; /* Hace que el botón se comporte como un elemento de bloque */
}

.button-field:hover {
  background-color: #0056b3; /* Color de fondo del botón al pasar el cursor */
}

.custom-file-upload {
  display: inline-block;
  padding: 4px 8px; /* Tamaño del botón */
  cursor: pointer;
  background-color: #26d07c; /* Color de fondo del botón */
  color: white; /* Color del texto del botón */
  border: none; /* Elimina el borde si existe */
  border-radius: 2px; /* Bordes redondeados del botón */
  font-size: 12px; /* Tamaño del texto del botón */
}

/* Estilos adicionales para cuando el usuario pasa el mouse sobre el botón */
.custom-file-upload:hover {
  background-color: #45a049;
}

.file-input {
  display: none;
}

.subpregunta-container {
  margin-bottom: 10px; /* Espacio entre subpreguntas */
}

.input-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px; /* Espacio entre inputs */
  padding-top: 0; /* Elimina el relleno superior del contenedor de inputs si existe */
}

.checkboxes-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 -5px; /* Ajusta el espacio negativo para compensar el padding de los items */
}

.checkboxes-container .checkbox-item {
  flex-basis: calc(33.333% - 10px); /* Ajusta el margen según sea necesario */
  padding: 0 5px; /* Ajusta el padding para crear espacio entre los items */
  box-sizing: border-box; /* Asegura que el padding se incluya en el ancho total */
  margin-bottom: 10px; /* Espacio entre filas */
}

.left-column,
.right-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-row {
  display: flex;
  flex-direction: column; /* Alinea los elementos en una columna */
  margin-bottom: 5px; /* Reduce el margen inferior de cada fila de input si es necesario */
}

.input-row label {
  margin-bottom: 5px; /* Espacio entre la etiqueta y el input */
}

.input-row input {
  width: 100%; /* Asegura que el input ocupe el ancho disponible */
}

.panel-group .panel {
  margin-bottom: 7px;
  border-radius: 4px;
}

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.panel-default {
  border-color: #ddd;
}

.mybtn {
  background: #115787;
  color: white !important;
  padding: 9px 11px;
  text-decoration: none !important;
  display: inline-block;
  font-size: 11px;
  margin-right: 15px;
}

.container_fdf {
  max-width: 1004px;
  margin: 0 auto;
  width: 100%;
  padding: 0px 7px;
}

.info {
  margin-top: 15px;
}

.infocuestionario {
  margin-top: 15px;
  margin-bottom: 15px;
}

.panel-heading {
  color: black;
}

.panel-heading {
  border-bottom: 1px solid #cacaca !important;
  background: #26d07c;
  /* #115787 */
  color: white;
}

.accordion-toggle {
  text-decoration: none !important;
  cursor: pointer;
}

.panel-heading h4 {
  color: white;
  margin: 0;
  font-size: 13px;
}

.panel-body {
  padding: 5px 15px 0px 15px !important;
}

.panel-body-sup {
  padding: 10px 10px 10px 10px !important;
  cursor: pointer;
}

.panel-body-bot {
  padding: 10px 10px 10px 10px !important;
}

.panel-body-sup:hover,
.panel-body-bot:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.Pie {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-weight: normal;
  font-style: normal;
  background-color: #666666;
  color: #ffffff;
}

.bordeCuestionario {
  border: 1px solid #ccc;
  border-radius: 5px; /* Esquinas suaves con un radio de 5px */
}

.bordeInicio {
  border: 1px solid #ccc;
  padding: 20px 40px 0px 40px; /* Margen interno de 10px */
  border-radius: 5px; /* Esquinas suaves con un radio de 5px */
}

.TituloInicio {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12pt;
  font-weight: bold;
  font-style: normal;
  color: #333333;
}

.EspacioLogo {
  margin: 0px 0px 0x 0px;
}

.EspacioInicio {
  margin: 0px 0px 0px 0px;
}

footer {
  max-width: 1004px;
  margin: 0 auto;
  width: 100%;
  padding: 0px 7px;
}

input[type="radio"] {
  vertical-align: text-bottom;
}

.flexcheck {
  display: flex;
  align-items: flex-start;
}
.flexcheck input[type="checkbox"] {
  margin-right: 10px;
  margin-top: 3px;
}

li.pregunta-item.Contenido {
  padding-bottom: 21px;
}

input[type="submit"] {
  background: #31a1ad;
  color: white;
  padding: 6px 15px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 8pt;
  font-style: normal;
  border: 0;
  border-radius: 5px;
  transition: 0.1s all ease-in;
  text-transform: uppercase;
  font-weight: bold;
  display: inline-block; /* Asegúrate de que los botones sean elementos en línea */
  max-width: 180px; /* Establece un ancho máximo para los botones */
  text-align: center; /* Centra el texto dentro del botón */
}

input[type="submit"]:hover {
  background: #21666d;
}

.anterior,
.siguiente {
  background: #31a1ad;
  color: white;
  padding: 6px 15px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 8pt;
  font-style: normal;
  border: 0;
  border-radius: 5px;
  transition: 0.1s all ease-in;
  text-transform: uppercase;
  font-weight: bold;
  display: inline-block; /* Asegúrate de que los botones sean elementos en línea */
  max-width: 120px; /* Establece un ancho máximo para los botones */
  white-space: normal; /* Permite que el texto pase a la siguiente línea */
  text-align: center; /* Centra el texto dentro del botón */
}

.nuevo-btn {
  background: #31a1ad;
  color: white;
  padding: 6px 15px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 8pt;
  font-style: normal;
  border: 0;
  border-radius: 5px;
  transition: 0.1s all ease-in;
  text-transform: uppercase;
  font-weight: bold;
  display: inline-block; /* Asegúrate de que los botones sean elementos en línea */
  max-width: 180px; /* Establece un ancho máximo para los botones */
  white-space: normal; /* Permite que el texto pase a la siguiente línea */
  text-align: center; /* Centra el texto dentro del botón */
}

/* Estilo para el botón deshabilitado */
.nuevo-btn.disabled {
  background: #ccc; /* Fondo gris */
  color: #666; /* Texto gris oscuro */
  opacity: 0.7; /* Más translúcido */
}

/* Al pasar el mouse por el botón habilitado */
.nuevo-btn:not(.disabled):hover {
  background: #218f99;
}

.anterior:hover,
.siguiente:hover {
  background: #21666d;
}

.btn_div {
  text-align: center;
  padding-bottom: 10px;
  margin-right: 0px;
}

.toast {
  color: #333;
  animation: fadeinout 4s linear forwards;
}

.toast-icon {
  font-size: 18px;
  color: #5cb85c; /* Bootstrap's 'success' green */
}

.toast-title {
  font-size: 14px;
  flex-grow: 1;
}

i.fa-solid.fa-check.green {
  color: green;
  border: 2px solid green;
  padding: 2px 3px;
  border-radius: 50%;
  margin-right: 4px;
}

.login_btn {
  margin-bottom: 20px;
}

.login-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 10vh);
}

.anterior:disabled,
.siguiente:disabled {
  background: #205f65 !important;
  color: #bab9b9 !important;
}

.error {
  color: red;
  font-size: 0.8em;
  margin-top: 10px;
  display: block;
}

.deshabilitado {
  background-color: #ccc; /* Color de fondo para indicar deshabilitado */
  color: #666; /* Color de texto para indicar deshabilitado */
  pointer-events: none; /* Deshabilita eventos de clic */
  cursor: not-allowed; /* Cambia el cursor a no permitido */
}

@keyframes fadeinout {
  0%,
  100% {
    opacity: 0;
  }

  10%,
  90% {
    opacity: 1;
  }
}

.action-bar {
  margin-top: 10px; /* Add some space between the list item content and the buttons */
  display: flex; /* Align buttons horizontally */
  justify-content: flex-start; /* Align buttons to the left */
}

.action-bar button {
  margin-right: 10px; /* Add space between the buttons */
  padding: 5px 10px;
}

.modal-body {
  max-height: 400px;
  overflow-y: auto;
}

.file-info {
  display: none;
  margin-top: 10px;
}
.file-info span {
  margin-right: 10px;
}
.file-info button {
  background-color: red;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.fields-container {
  margin-bottom: 10px; /* Espacio entre campos y botones */
}

.button-container {
  display: inline-flex;
  gap: 8px;
}

.language-switcher {
  position: fixed; /* Posición fija en la pantalla */
  bottom: 20px; /* Distancia desde la parte inferior */
  left: 50%; /* Centrar horizontalmente */
  transform: translateX(-50%); /* Ajustar para centrar el contenido */
  text-align: center; /* Asegurar que los enlaces estén centrados */
  font-size: 16px; /* Tamaño de texto */
  background-color: #f9f9f9; /* Fondo opcional para destacar */
  padding: 10px 20px; /* Espaciado interno */
  border-radius: 5px; /* Bordes redondeados */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra opcional */
}

.language-switcher a {
  text-decoration: none; /* Quitar subrayado */
  color: #007bff; /* Color del enlace */
  margin: 0 10px; /* Separación entre enlaces */
}

.language-switcher a:hover {
  color: #0056b3; /* Color al pasar el mouse */
}

.add-button {
  margin-left: 10px;
  padding: 5px 10px;
  font-size: 14px;
  width: 50px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
}

.add-button:hover {
  background-color: #0056b3;
}

.remove-button {
  margin-left: 10px;
  padding: 5px 10px;
  font-size: 14px;
  width: 50px;
  cursor: pointer;
  color: white;
  border: none;
  border-radius: 3px;
}

.remove-button {
  background-color: #dc3545;
}

.remove-button:hover {
  background-color: #c82333;
}

#toast {
    position: fixed; /* Fijar el toast en la pantalla */
    top: 5%; /* Ubicarlo en la parte superior */
    left: 50%; /* Centrarlo horizontalmente */
    transform: translateX(-50%); /* Mantenerlo centrado */
    z-index: 9999; /* Asegurar que esté por encima de otros elementos */

    width: 70%; /* Aumentar el tamaño del mensaje */
    max-width: 600px; /* Definir un tamaño máximo */
    padding: 30px; /* Espaciado interno para hacerlo más visible */
    text-align: center; /* Centrar el contenido */
    display: flex;
    align-items: center; /* Alinear correctamente el contenido */
    justify-content: center; /* Asegurar que el texto se mantenga centrado */
}

#toast .toast-body {
    font-size: 14px !important; /* Asegurar que el texto sea grande */
    font-weight: bold; /* Hacer que el texto sea más legible */
    text-indent: 20px; /* Sangría al inicio del texto */
    padding-left: 10px; /* Espacio adicional en la izquierda */
    display: flex;
    align-items: center; /* Asegura alineación con "Éxito" */
    top:0%;
}

#toast .toast-header {
    display: flex;
    align-items: center; /* Alinea los elementos */
}

#toast .toast-header strong {
    margin-top: 3px; /* Baja el texto "Éxito" */
}

.input-wrapper {
    display: flex;
    flex-direction: column;
}

.error-msg {
    color: red;
    display: none;
    font-size: 0.875em;
}

.mybtn:disabled {
    background-color: #ccc; /* Light gray */
    color: #666;            /* Darker text */
    cursor: not-allowed;
    opacity: 0.6;
}