/* -------------------------------------------------------------------------- */
/*                               root variables                               */
/* -------------------------------------------------------------------------- */

:root {
  --selected-day: #289b95;
  --bg-color: #fffcf2;
}

body {
  background-color: var(--bg-color);
}

/* --------------------------- materialize resets --------------------------- */

.container {
  width: 90%;
  margin: 5rem auto;
}

.row {
  width: 100%;
}

.modal-overlay {
  top: 0%;
}

/* ------------------------------ sticky footer ----------------------------- */

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

/* -------------------------------------------------------------------------- */
/*                                style resets                                */
/* -------------------------------------------------------------------------- */

/* --------------------------------- header --------------------------------- */

.meals-header {
  min-height: fit-content;
  max-width: 100vw;
  padding: 0;
  margin-bottom: 1rem;
}

/* --------------------------------- nav bar -------------------------------- */

.nav-links {
  list-style-type: none !important;
}

/* brand logo */
.brand-logo {
  padding: 0.3rem !important;
}

/* -------------------------------------------------------------------------- */
/*                           mini calendar stylings                           */
/* -------------------------------------------------------------------------- */

.vanilla-calendar {
  background-color: #4242422e;
}

.mini-calendar-container {
  margin-bottom: 2rem;
}

.vanilla-calendar,
.date-picker-active {
  font-family: "Quicksand", sans-serif !important;
  border: 1px solid black;
  background-color: rgba(0 0 0 0.5);
  margin-bottom: 2rem;
}

/* -------------------------- date picker stylings -------------------------- */

.date-picker-general-hidden {
  display: none;
  width: 15rem;
  transition: all 0.5;
}

.date-picker-general-visible {
  width: 15rem;
  border: 1px solid black;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------- */
/*                           full calendar stylings                           */
/* -------------------------------------------------------------------------- */

/* general */
#calendar {
  margin: 0;
  width: 100%;
  font-family: "Quicksand", sans-serif;
}

/* meal events */
.general-events {
  background-color: #289b95;
}

.habit-events {
  background-color: #ba68c8;
}

.meal-events {
  background-color: #f06292;
}

.goal-events {
  background-color: #64b5f6;
}

/* -------------------------------------------------------------------------- */
/*                              event form modal                              */
/* -------------------------------------------------------------------------- */

/* general */

#new-event-modal {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  max-height: 100vh;
}

.new-event-modal-content {
  height: 100vh;
  border-radius: 0;
  width: 100%;
}

/* label font color */
.input-field > label {
  color: #444;
}

.form-rows-container {
  width: 100% !important;
}

/* repeat when btn */
.repeat-when-button {
  width: 10rem;
}

/* form submit buttons */
.form-submit-buttons {
  margin-bottom: 2rem;
}

/* -------------------------------------------------------------------------- */
/*                        custom recurring event modal                        */
/* -------------------------------------------------------------------------- */

#custom-recurring-event {
  margin-top: 10vh;
}

/* -------------------------------------------------------------------------- */
/*                              event info modal                              */
/* -------------------------------------------------------------------------- */

#event-info-modal {
  margin-top: 10vh;
}