:root {
  --primary-color: hsl(206.02deg 100% 83.73%);
  --primary-color-lighter: hsl(206.02deg 100% 93.73%);
  --secondary-color: hsl(211.3deg 100% 13.53%);
  --main-header-color: var(--secondary-color);
  --main-nav-a-color: white;
  --main-nav-a-hover-color: lightblue;
  --main-btn-color: hsl(202, 100%, 46%);
  --main-btn-border-color: #0094ec;
  --main-btn-hover-color: hsl(202, 100%, 35%);
  --secondary-btn-color: #bfc1c2;
  --secondary-btn-border-color: #a4a6a7;
}

/* ===================== Steps ===================== */
.step1-finish,
.step2-finish,
.step3-finish,
.step4-finish,
.step5-finish,
.step6-finish,
.step7-finish {
  background-color: var(--primary-color-lighter);
}

.step.active {
  background-color: white;
  color: white;
}

.step.active * {
  background-color: var(--secondary-color);
}

.step.active:after {
  border-color: transparent transparent transparent var(--secondary-color);
}

/* ===================== Layout ===================== */
.container {
  background-color: var(--main-header-color);
  border-radius: 20px;
}
@media (min-width: 1200px) {
  .container {
    width: 1370px;
  }
}
/* ===================== Calendar ===================== */
.fc-daygrid-event {
  background-color: var(--main-btn-color) !important;
  color: var(--main-btn-border-color) !important;
  white-space: break-spaces;
}

.fc-daygrid-event.open {
  background-color: green !important;
}

/* ===================== Navbar ===================== */
.navbar-default .navbar-nav > li > a {
  color: var(--main-nav-a-color) !important;
  background-color: transparent !important;
  border-radius: 0;
}

.navbar-default .navbar-nav > li:hover {
  background-color: var(--main-nav-a-hover-color) !important;
  border-radius: 20px;
}

.navbar-default .navbar-nav > li:hover > a {
  background-color: transparent !important;
  border-radius: 20px;
  color: #000 !important;
}

.navbar-nav > li.dropdown:hover > a {
  background-color: #f0f0f0;
  color: #000 !important;
}

.navbar-default .navbar-brand {
  color: white;
  padding-top: 5px;
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: white !important;
  background-color: transparent !important;
}

/* ===================== Buttons ===================== */
.btn {
  color: #fff;
  background-color: var(--main-btn-color);
  border-color: var(--main-btn-border-color);
}

.btn-primary:hover {
  background-color: var(--main-btn-hover-color);
}

.list-group-item.active {
  color: #fff;
  background-color: var(--main-btn-color);
  border-color: var(--main-btn-border-color);
}

/* ===================== Panels ===================== */
.panel-primary {
  border-color: var(--main-btn-border-color);
}

.panel-primary > .panel-heading {
  background-color: var(--main-btn-color);
  border-color: var(--main-btn-border-color);
}

.panel-primary > .panel-heading + .panel-collapse > .panel-body {
  border-color: var(--main-btn-border-color);
}

/* ===================== Misc ===================== */
.ui-widget-header {
  background: var(--main-header-color) !important;
  color: #fff;
}

.alert-heartbeat {
  color: white;
  background-color: #8d8d8d;
  padding: 15px;
  margin-top: 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  /* animation: heartbeat 1.5s infinite; */
}