.calendar-component{
  width:100%;
}

.calendar-header{
  text-align:center;
  margin-bottom:2rem;
}

.calendar-title{
  font-size:2.25rem;
  font-weight:800;
  color:var(--blue-deep) !important;
  margin-top:.75rem;
}

.calendar-subtitle{
  max-width:700px;
  margin:1rem auto 0 !important;
  color:var(--text-muted);
}

.calendar-card{

  background:#fff;

  border-radius:28px;

  padding:1.5rem;

  border:
    1px solid rgba(30,90,173,.08);

  box-shadow:
    0 20px 40px rgba(30,90,173,.05);

}

/* ==========================
   FULLCALENDAR
========================== */

.fc{

  font-family:
    inherit;

}

.fc .fc-toolbar-title{

  font-size:1.5rem;
  font-weight:700;

  color:
    var(--blue-deep);

}

.fc .fc-button{

  background:
    var(--blue-deep) !important;

  border:none !important;

  border-radius:12px !important;

  padding:
    .6rem 1rem !important;

  box-shadow:none !important;

}

.fc .fc-button:hover{

  background:
    var(--blue-bright) !important;

}

.fc .fc-button-active{

  background:
    var(--blue-bright) !important;

}

.fc-button-group{
    gap:0.5rem;
}

.fc-theme-standard td,
.fc-theme-standard th{

  border-color:
    rgba(30,90,173,.08);

}

.fc-col-header-cell{

  background:
    #f4f7fb;

}

.fc-daygrid-day-number{

  color:
    var(--text-main);

  font-weight:600;

}

.fc-event{

  border:none !important;

  background:
    rgba(40,114,212,.12) !important;

  color:
    var(--blue-deep) !important;

  border-radius:
    8px !important;

  padding:
    2px 6px;

  font-weight:
    600;

}

.fc-day-today{

  background:
    rgba(40,114,212,.05) !important;

}

@media(max-width:768px){

  .fc-toolbar{
    flex-direction:column;
    gap:1rem;
  }

}