:root {
  --background-color: #191919;
  --navbar-color: #191919;
  --nav-link-color: #000;
  --navbar-brand-color: #fff;
  --font-awesome-color: #fff;
}

body {
  background: var(--background-color);
}
.bg-main {
  background-color: #222729;
}
.bg-white {
  background-color: #fff !important;
}
.navbar {
  background: var(--navbar-color);
}

.navbar-light .navbar-nav .nav-link {
  color: var(--nav-link-color);
}

.navbar .navbar-brand {
  color: var(--navbar-brand-color);
  font-weight: 800;
}

.fa-solid,
.fas {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--font-awesome-color);
}
.btn-dark {
  background: #222729 !important;
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 18rem;
  background-color: #222729;
}
.card .card-title,
.card-text {
  color: #fff;
}
.chat-window {
  height: 70vh;
  /* Ajusta la altura */
  overflow-y: scroll;
  /* Habilita el scroll vertical */
  padding: 10px;
  background: #fff;
}

.chat-message {
  max-width: 70%;
  word-wrap: break-word;
}

/* Mensajes del cliente */
.message-client {
  background-color: #007bff;
  color: white;
  align-self: flex-end;
}

/* Mensajes del chatbot */
.message-bot {
  background-color: #f1f0f0;
  color: #000;
  align-self: flex-start;
}

#chatInput {
  flex-grow: 1;
}

.btn-info {
  --bs-btn-color: #fff !important;
  --bs-btn-bg: #0d6efd !important;
  --bs-btn-border-color: #0d6efd !important;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #0d6efd;
  --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #0d6efd;
  --bs-btn-active-border-color: #0d6efd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}
.fz-icons {
  font-size: 2rem !important;
}
/* Styles for hover effect */
.card-link {
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.card-link:hover .card {
  transform: translateY(-10px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
}

.card {
  transition: all 0.3s ease-in-out;
}
.form_attendance{
  background: #fff;
  margin-bottom: 15px;
}