/* =================================================
   PRIMARY COLOR: #00a898
================================================= */

/* TEXT COLOR */
a,
a:hover,
.accordion-wrapper .card-header button,
.accordion-wrapper .card-header button:hover,
.accordion-wrapper .card-header button::before,
.nav-link:hover,
.nav-link:focus,
.link-primary,
.link-primary:hover,
.link-primary:focus,
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active,
.page-link:hover,
.page-link:focus,
.page-item.active .page-link {
  color: #00a898;
}

/* BACKGROUND COLOR */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle,
.form-check-input:checked,
.tooltip-inner {
  background-color: #00a898;
}

/* BORDER COLOR */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
blockquote {
  border-color: #00a898;
}


/* =================================================
   BLUE COLOR: #0c4a59
================================================= */

/* TEXT COLOR */
.text-primary,
a.text-reset:hover,
.sidebar nav .nav-link.active {
  color: #0c4a59 !important;
}

/* BACKGROUND COLOR */
.bg-primary {
  background-color: #0c4a59 !important;
}

.btn-primary.btn-circle.ripple::before,
.btn-primary.btn-circle.ripple::after {
  background: #0c4a59;
}

/* BORDER COLOR */
.border-primary {
  border-color: #0c4a59 !important;
}


/* =================================================
   SOFT PRIMARY SHADES
================================================= */

.bg-soft-primary {
  background-color: #f2f8fb !important;
}

.bg-pale-primary {
  background-color: #e4f1f6 !important;
}

.btn-soft-primary {
  background-color: #f2f8fb;
}


/* =================================================
   FORM STATES
================================================= */

.form-control:focus {
  border-color: #aad4e3;
}

form.dark-fields .form-control:focus {
  border-color: rgba(84, 168, 199, 0.5);
}


/* =================================================
   MODAL
================================================= */

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, 0.7);
  transition: all 0.4s;
}

.modal:target {
  visibility: visible;
  opacity: 1;
}

.modal__content {
  position: relative;
  width: 500px;
  max-width: 90%;
  padding: 1em 2em;
  border-radius: 4px;
  background: #ffffff;
}

.modal__footer {
  text-align: right;
}

.modal__footer a {
  color: #585858;
}

.modal__footer i {
  color: #d02d2c;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #585858;
  text-decoration: none;
}