.uniqueClassName {
    text-align: center;
}

.allado {
    float: left;

}@media (min-width:992px) {
    .line-chart {
        height: 100%;
    }
}

.login-page .text-wrap {
    color: white;
    font-size: 150%;
}

.login-page .text-wrap h2 {
    font-size: 1.3em;
    margin-bottom:2rem
}

.login-page .brand-wrap {
    margin-bottom: 3rem;
}

.login-page .left-contianer {
    flex-direction: column;
    padding: 0px 5rem;
}
.login-page .left-contianer strong {
    color:white;
}

.btn-old {
    background-color: #092287;
    color: white;
    border-radius: 18px;
    padding: 10px 15px;
} 
.btn-old:hover, .btn-old:active, .btn-old:focus {
    color: white;
    background-color: #2a49c4;
}

.group-legacy {
    margin-top:2rem;
    display: flex;
    justify-content: center;
}

.login-page .right-container {
    padding:15px;
}

.login-page .featured-text {
    font-weight: 800;
    text-align: center;
    font-size: 1.5rem;
    display: block;
    color:black;
}

.login-form-wrap .fa-exclamation-circle {
    margin-right:10px;
    display: inline-block;
}

/*Boton blanco con bordes redondos*/
.contenedor {
    text-align: left;
}

.boton-blanco {
    background-color: white;
    color: #333; /* Puedes ajustar este valor para hacer el texto más claro u oscuro según tus preferencias */
    border: none; /* Elimina el borde del botón */
    padding: 10px 20px; /* Puedes ajustar este valor para cambiar el espaciado interno del botón */
    border-radius: 5px; /* Puedes ajustar este valor para cambiar la curvatura de los bordes del botón */
    cursor: pointer;
    font-size: 18px; /* Puedes ajustar este valor para cambiar el tamaño del texto */
  }
  
  .boton-blanco:hover {
    background-color: #f0f0f0; /* Puedes ajustar este valor para cambiar el color de fondo cuando el botón se encuentra en estado hover */
  }

  .boton-gris {
    background-color: #949494;
    color: #fff; /* Puedes ajustar este valor para hacer el texto más claro u oscuro según tus preferencias */
    border: none; /* Elimina el borde del botón */
    padding: 5px 5px; /* Puedes ajustar este valor para cambiar el espaciado interno del botón */
    border-radius: 5px; /* Puedes ajustar este valor para cambiar la curvatura de los bordes del botón */
    cursor: pointer;
    font-size: 13px; /* Puedes ajustar este valor para cambiar el tamaño del texto */
  }

  .boton-gris:hover {
    background-color: #f0f0f0; /* Puedes ajustar este valor para cambiar el color de fondo cuando el botón se encuentra en estado hover */
  }

  /*Tabla con bordes redondos*/
  .tabla-contenedor {
    width: 700px; /* Ancho específico */
    /*margin: 0 auto; /* Centro horizontal */
  }
  
  .tabla-redondeada {
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid #555; /* Borde externo */
    border-radius: 10px; /* Esquinas redondeadas */
    width: 100%; /* Ancho específico */
    margin: 0 auto; /* Centro horizontal */
  }

  .tabla-redondeada th, .tabla-redondeada td {
    padding: 5px;
    border: none; /* Sin bordes internos */
  }

  .tabla-redondeada th {
    background-color: #fff; /* Color de fondo para las cabeceras */
    /*font-weight: bold; /* Texto en negrita */
    text-align: center; /* Alineación centrada */
  }

  .tabla-redondeada-dashboard {
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid #d6d7d9; /* Borde externo */
    border-radius: 10px; /* Esquinas redondeadas */
    width: 98%; /* Ancho específico */
    margin: 5px auto; /* Centro horizontal */
    overflow: hidden;
  }

  .tabla-redondeada-dashboard th {
    background-color: #fff; /* Color de fondo para las cabeceras */
    /*font-weight: bold; /* Texto en negrita */
    text-align: left; /* Alineación centrada */
    padding: 5px;
    border: none; /* Sin bordes internos */
  }

  .tabla-redondeada-dashboard td {
    background-color: #fff; /* Color de fondo para las cabeceras */
    /*font-weight: bold; /* Texto en negrita */
    text-align: center; /* Alineación centrada */
    padding: 5px;
    border: none; /* Sin bordes internos */
  }

  canvas {
    display: block; /* Elimina márgenes extra */
    max-width: 90%; /* Ajusta el ancho al contenedor */
    max-height: 90%; /* Ajusta el alto al contenedor */
  }

  /*Tamaño del grafico Donus*/
  .chart-container {
    width: 350px; /* Ancho deseado */
    height: 250px; /* Alto deseado */
    margin: 0 auto; /* Centro horizontal */
  }

  .chart-container2 {
    width: 350px; /* Ancho deseado */
    height: 250px; /* Alto deseado */
    margin: 0 auto; /* Centro horizontal */
    display: flex; /* Activa Flexbox */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    text-align: center; /* Alineación centrada */
  }

  .elementos {
    flex: 1; /* Los elementos ocuparán el mismo espacio dentro del contenedor */
    margin-right: 10px; /* Espacio entre los elementos */
  }

  .container-grupo {
    display: flex; /* Utilizamos flexbox para alinear los elementos */
  }

.image-container {
    width: 300px; /* Ancho del div */
    height: 200px; /* Alto del div */
    background-image: url('ruta-a-la-imagen.jpg'); /* Imagen de fondo */
    background-size: cover; /* La imagen de fondo cubre todo el div */
    background-position: center; /* Imagen centrada */
    position: relative; /* Relativa para posicionar el enlace */
}

/* Enlace que cubre todo el div */
.image-container a {
  display: block; /* Hace que el enlace sea un bloque */
  position: absolute; /* Para posicionarlo en todo el contenedor */
  top: 0; /* Comienza desde el borde superior */
  left: 0; /* Comienza desde el borde izquierdo */
  width: 100%; /* Ocupa el 100% del ancho del contenedor */
  height: 100%; /* Ocupa el 100% del alto del contenedor */
  text-decoration: none; /* Sin subrayado */
  z-index: 1; /* Se asegura de que el enlace esté por encima del fondo */
}

.renta-icon-upload:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0aa"; /* Código de la flecha hacia arriba */
  font-weight: 900; /* Necesario para los íconos sólidos */
  font-size: 24px;
  color: #555; /* Puedes cambiar el color aquí */
}

.renta-icon-download2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0ab"; /* Código de la flecha hacia arriba */
  font-weight: 900; /* Necesario para los íconos sólidos */
  font-size: 24px;
  color: #555; /* Puedes cambiar el color aquí */
}

/* Ajustar el tamaño del calendario */
.datepicker {
  width: 300px; /* Aumentar el ancho del calendario */
  font-size: 0.9rem; /* Incrementar el tamaño del texto */
}

/* Ajustar el tamaño de las celdas del calendario */
.datepicker table tr td,
.datepicker table tr th {
  padding: 10px; /* Más espacio entre los días */
}

/* Resaltar sábados y domingos */
.datepicker table tr td.day:nth-child(7), /* Domingo */
.datepicker table tr td.day:nth-child(6) { /* Sábado */
  color: red; /* Cambiar el color del texto */
  /*font-weight: bold; /* Resaltar en negrita */
}

.btn-custom-red {
  background-color: #cb2c30; /* Rojo personalizado */
  color: white;             /* Texto blanco */
  border: none;             /* Sin borde */
  border-radius: 20px;      /* Bordes redondeados */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transiciones suaves */
  text-transform: none; /* El texto no se transforma */
  width: 150px; /* Ancho del botón */
}

.btn-custom-red:hover {
  background-color: #e42d34; /* Fondo rojo al pasar el mouse */
  color: white; /* Texto blanco al pasar el mouse */
}

.btn-custom-red:active {
  background-color: #e42d34; /* Fondo rojo cuando se hace clic */
  color: white; /* Texto blanco cuando se hace clic */
}

.btn-custom-white {
  background-color: white; /* Rojo personalizado */
  color: #cb2c30;             /* Texto blanco */
  border: 2px solid #cb2c30; /* Bordes rojos */
  border-radius: 20px;      /* Bordes redondeados */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transiciones suaves */
  text-transform: none; /* El texto no se transforma */
  width: 150px; /* Ancho del botón */
}

.btn-custom-white:hover {
  background-color: #cb2c30; /* Fondo rojo al pasar el mouse */
  color: white; /* Texto blanco al pasar el mouse */
}

.btn-custom-white:active {
  background-color: #cb2c30; /* Fondo rojo cuando se hace clic */
  color: white; /* Texto blanco cuando se hace clic */
}

/* Estilos para la cajita */
.box-red {
  border: 1px solid #dcdcdc; /* Borde general */
  border-left: 6px solid #cb2c30; /* Borde más notorio a la izquierda */
  border-radius: 5px; /* Bordes redondeados */
  padding: 10px;
  margin: 10px;
  width: 95%; /* Ancho de la cajita */
  background-color: white; /* Fondo de la cajita */
  text-align: center; /* Alineación a la izquierda */
}

.box-grey {
  border: 1px solid #dcdcdc; /* Borde general */
  border-left: 6px solid #CCC; /* Borde más notorio a la izquierda */
  border-radius: 5px; /* Bordes redondeados */
  padding: 10px;
  margin: 5px;
  width: 95%; /* Ancho de la cajita */
  background-color: white; /* Fondo de la cajita */
  text-align: center; /* Alineación a la izquierda */
}

 /* Estilos para el título de la fila (Monto) */
 .box-grey .title, 
 .box-red .title {
  font-weight: bold;
  color: #333;
  padding-bottom: 5px; /* Espaciado inferior */
  border-bottom: 1px solid #dcdcdc; /* Línea divisoria entre título y valor */
  margin-bottom: 5px;
  text-align: center; /* Alineación */
}

.title-box-inside {
  padding-bottom: 5px; /* Espaciado inferior */
  border-bottom: 1px solid #dcdcdc; /* Línea divisoria entre título y valor */
  margin-bottom: 5px;
  text-align: left; /* Alineación */
}

.title-box-red-value {
  padding-bottom: 5px; /* Espaciado inferior */
  border-bottom: 1px solid #dcdcdc; /* Línea divisoria entre título y valor */
  margin-bottom: 5px;
  text-align: right; /* Alineación */
  color: #cb2c30;
}

.boton-clicable {
  cursor: pointer; /* Cambia el cursor al icono de "clic" */
  background-color: white; /* Color del botón */
  /*padding: 10px 20px; /* Espaciado interno */
  /*border-radius: 5px; /* Bordes redondeados */
  text-align: center; /* Centrar texto */
  display: inline-block; /* Comportamiento tipo botón */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Sombra */
  transition: background-color 0.3s ease; /* Efecto de transición */
}

.boton-clicable:hover {
  border: 1px solid #cb2c30; /* Borde general */
  border-left: 4px solid #cb2c30; /* Borde más notorio a la izquierda */
  background-color: white; /* Fondo de la cajita */
  text-align: center; /* Alineación a la izquierda */
}

.boton-clicable:active {
  background-color: white; /* Cambia el color al hacer clic */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Reduce la sombra */
  transform: scale(0.98); /* Simula un clic */
}

.boton-clicable.marcado {
  border: 1px solid #cb2c30; /* Borde general */
  border-left: 7px solid #cb2c30; /* Línea roja a la izquierda */
  background-color: white; /* Mantener el color del fondo cuando esté marcado */
}

/*
  cajita de ayuda para las contraseñas
*/
.password-container {
  position: relative;
  max-width: 400px;
}

.helper-box {
  /*display: none;
  position: absolute;
  top: 68px; /*48px*/
  /*left: 0;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 100%;
  z-index: 10;*/

  background-color: #f8f9fa;
  border-left: 4px solid #dc3545;
  border-radius: 4px;
  padding: 10px;
  margin-top: 8px;
  display: none;
  transition: max-height 0.4s ease;
}

.helper-box p {
  margin: 6px 0;
}

.valid {
  color: green;
}

.invalid {
  color: #888;
}

.password-hints {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  /* transition: all 0.4s ease; */
  /* background-color: #f8f9fa; */
  /* padding: 0 10px; */
  /* margin-top: 8px; */
  /* border: 1px solid #ddd; */
  /* border-radius: 6px; */
}

.password-hints .valid {
  color: green;
}

.password-hints .invalid {
  color: red;
}

.password-hints.show {
  max-height: 300px;
  opacity: 1;
  padding: 10px;
}

.password-hints p {
  margin: 6px 0;
  font-size: 14px;
}

/*modal dividida*/
.modal-split {
    display: flex;
    min-height: 300px;
    padding: 0;
}

.modal-left {
    width: 40%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-right {
    width: 60%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-center {
    width: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 10;
}

.text-custom {
    color: #586575  !important;
    line-height: 1.4;
    display: inline-block;
    text-align: justify;
}

.title-modal {
    font-size: 18px;
    color: #cb2c30;
    line-height: 1.4;
    font-weight: 700;
    display: inline-block;
}

.small-switch .switch-group {
    transform: scale(0.7);
    transform-origin: left center;
}

.tooltip-inner {
    max-width: 480px;
    text-align: left;
    padding: 10px 12px;
    background-color: #ffffff;
    color: #4a5563;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-left .arrow::before,
.bs-tooltip-right .arrow::before {
    border-color: #ffffff;
}