html {
  position: relative;
  min-height: 100%;
}

body {
  background-color: #f5f5f5;
  padding-bottom: 5rem;
  margin-bottom: 2em;
}

main {
  padding-top: 1em;
}

header nav {
  background-color: #000000;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #dddbdb;
  padding: 0.8rem;
  border-top: 1px solid #d0cdcd;
  color: #003694;
}

footer svg {
  height: 24px;
  width: 24px;
  cursor: pointer;
}

#spinner-overlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  cursor: pointer;
}

.afni-card > .card-header {
  background-color: rgb(0, 124, 195);
  color: white;
  border-bottom: 6px solid rgb(115, 203, 213);
  padding: 0.5em 1.4em;
  margin-bottom: 0.4em;
}

data-feedback-item {
  display: none;
}

#notify-count:empty {
  display: none;
}

#notify-count {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-left: -0.8em;
  line-height: 1.1em;
  font-size: 0.75em;
}

.nav-box {
  display: none;
  width: 23em;
  font-size: 0.875rem;
  max-height: 80%;
  overflow-y: auto;
  z-index: 999;
  top: 4em;
  right: 1em;
}

.notify-item {
  margin-bottom: 2px !important;
}

#notify-msgs:empty::after {
  content: "No notifications found";
  display: inline-block;
  padding: 0.75em;
}

.notify-buttons {
  top: 0;
  z-index: 999;
}

.notify-timestamp {
  right: 1em;
  bottom: 0;
}

#notify-toasts {
  z-index: 2;
  top: 4em;
  right: 1em;
}

#notify-toasts .toast {
  width: 23em !important;
}

nav .avatar {
  width: 41px;
  height: 41px;
  background-size: cover;
  background-position: top center;
  border-radius: 50%;
}

#userMenu li:not(:first-child):hover {
  background-color: rgba(0, 0, 0, 0.08);
}

.blocker {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.afni-link {
  cursor: pointer !important;
  color: #007bff !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

.afni-link:hover {
  color: #0056b3 !important;
  text-decoration: underline !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.stepper-links .nav-link:not(.active) {
  pointer-events: inherit;
  cursor: not-allowed !important;
}