/* Estilos para el contenedor del calendario */
.calendar-container {
    background-color: #f8f9fa; /* Fondo gris claro */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
  }

  /* Estilos para los encabezados de los días */
  .fc-day-header {
    background-color: #e9ecef; /* Fondo gris claro */
    border: none; /* Sin borde */
    text-align: center; /* Centrar texto */
    padding: 10px; /* Espaciado interno */
  }

  /* Estilos para los días del calendario */
  .fc-day {
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #dee2e6; /* Borde gris claro */
    padding: 10px; /* Espaciado interno */
  }

  /* Estilos para los eventos del calendario */
  .fc-event {
    background-color: #007bff; /* Fondo azul */
    color: #ffffff; /* Texto blanco */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados */
    padding: 4px 8px; /* Espaciado interno */
    margin-bottom: 4px; /* Margen inferior */
  }

  .custom-container {
    border-radius: 10px; /* Bordes redondos */
    background-color: white; /* Fondo blanco */
    padding: 10px; /* Espaciado interior */
  }

  .circle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px; /* Tamaño del círculo exterior */
    height: 150px; /* Tamaño del círculo exterior */
    background-color: #01897B; /* Color del círculo exterior */
    border-radius: 50%; /* Hace que el contenedor sea un círculo */
    margin: 15px;
    color: white; /* Color del texto/icono dentro del círculo */
    font-size: 24px; /* Tamaño del texto/icono dentro del círculo */
    overflow: hidden; /* Oculta contenido que sobresale */
  }

  .inner-circle {
    position: absolute;
    width: calc(100% - 20px); /* Tamaño del círculo interno, ajustable */
    height: calc(100% - 20px); /* Tamaño del círculo interno, ajustable */
    background-color: white; /* Color del círculo interno */
    border-radius: 50%; /* Hace que el círculo interno sea redondeado */
    top: 50%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta para centrar correctamente */
  }

  .bi {
    position: relative;
    z-index: 2;
  }

  .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px; /* Espacio entre cada círculo y flecha */
  }

  .arrow i {
    font-size: 24px; /* Tamaño del ícono de flecha */
    color: #01897B; /* Color de la flecha */
  }

  .selected-card {
    border: 2px solid blue;
    /* Puedes agregar más estilos aquí para resaltar la tarjeta seleccionada */
  }
  mark{
    background-color: rgb(71, 147, 128);
    color: white;
    /* border-radius: 20px; */
}