html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

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

body {
  margin-bottom: 60px;
}

/*
    ICON STYLES
*/

.icon-lg {
  font-size: 2rem;
  line-height: 1.5rem;
  vertical-align: middle;
}

.icon-m {
  font-size: 1rem;
  line-height: 1.5rem;
  vertical-align: middle;
}

.icon-sm {
  font-size: 0.875rem;
  line-height: 1.5rem;
  vertical-align: middle;
}

.icon-xs {
  font-size: 0.75rem;
  line-height: 1.5rem;
  vertical-align: middle;
}

.icon-lg:hover,
.icon-m:hover,
.icon-sm:hover,
.icon-xs:hover {
  color: #258cfb;
  cursor: pointer;
}

.modal-backdrop.show {
  opacity: .8 !important
}

.icon-hover {
  font-size: x-large
}

.icon-hover:hover {
  cursor: pointer;
  opacity: .8
}

:root {
  color-scheme: only dark;
}