.device .modal {
  touch-action: none;
}

html {
  --footerHeight: 3.5rem;
  --logoHeight: 100px;
}

html {
  --pColour: #000000;
  --sColour: #303030;
  --lightTextColour: #d5d5d5;
  --darkTextColor: #212121;
  --selectedColour: #195E0E;
  --selectedColourHighlight: #228013;
  --itemBackground: lightgrey;
  --itemBackground2: #eee;
  --background:white;
}

/* Dark mode */
html.dark {
  --pColour: #000000;
  --sColour: #303030;
  --lightTextColour: #d5d5d5;
  --darkTextColor: #212121;
  --selectedColour: #195E0E;
  --selectedColourHighlight: #228013;
  --itemBackground: #303030;
  --itemBackground2: #303030;
  --background: #201913;
}
html.dark .btn-square {
  background: var(--itemBackground2);
}
html.dark .btn-square.selected {
  border-color: var(--selectedColourHighlight);
  background: linear-gradient(var(--selectedColour), 0.9);
}
html.dark input[type=text], html.dark input[type=email], html.dark input[type=date], html.dark input[type=datetime], html.dark input[type=password], html.dark textarea, html.dark input[type=datetime-local], html.dark .form-control {
  background-color: var(--itemBackground) !important;
  color: var(--lightTextColour) !important;
}
html.dark .nav-link {
  color: var(--lightTextColour) !important;
}
html.dark .b-bar-toggler-inline {
  background: var(--lightTextColour);
  height: 3rem;
  width: 3rem;
  top: 15px;
  border-radius: 5px;
}
html.dark *:not(.snackbar-stack-center, select, option, optgroup) {
  color: var(--lightTextColour);
  fill: var(--lightTextColour);
}
html.dark .alert * {
  color: initial;
  fill: initial;
}
html.dark .snackbar-stack-center *, html.dark .btn-warning {
  color: initial !important;
}
html.dark .btn-primary {
  border-color: var(--lightTextColour) !important;
}
html.dark .btn-primary:hover {
  background-color: var(--lightTextColour) !important;
  color: var(--darkTextColor);
}
html.dark .btn-outline-secondary, html.dark .btn-outline-primary {
  background-color: var(--lightTextColour);
  color: var(--pColour);
}
html.dark .accordion, html.dark .accordion-item {
  background: var(--background);
  border-color: var(--lightTextColour);
}

.house-logo {
  background-image: url("/_content/ASB.App.Common/content/house_logo.svg");
  background-size: contain;
}

.asb-logo {
  background-image: url("/_content/ASB.App.Common/content/asb.svg");
  background-size: contain;
}

body, nav, .modal-content {
  background: var(--background) !important;
}

@media (min-width: 576px) {
  html {
    --logoHeight: 80px;
  }
}
@media (max-height: 600px) {
  html {
    --logoHeight: 70px;
  }
}
.correct-case {
  text-transform: unset !important;
}

.btn {
  text-transform: uppercase;
}
.btn.btn-primary {
  background-color: var(--pColour);
  border-color: var(--pColour);
}
.btn.btn-primary:hover, .btn.btn-primary:active {
  border-color: var(--selectedColour);
}
.btn.btn-secondary {
  background-color: var(--sColour);
  border-color: var(--sColour);
}
.btn.btn-secondary:hover, .btn.btn-secondary:active {
  border-color: var(--selectedColour);
}
.btn.btn-outline-primary {
  border-color: var(--pColour);
  color: var(--pColour);
}
.btn.btn-outline-primary:hover, .btn.btn-outline-primary:active {
  border-color: var(--selectedColour);
  background-color: var(--selectedColour);
}
.btn.btn-outline-secondary {
  border-color: var(--sColour);
  color: var(--sColour);
}
.btn.btn-outline-secondary:hover, .btn.btn-outline-secondary:active {
  border-color: var(--selectedColour);
  background-color: var(--selectedColour);
}

.b-layout.b-layout-root {
  height: var(--pageHeight);
}

.b-layout-sider-content nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1024;
}
.b-layout-sider-content nav[data-collapse=hide] + .shadow {
  display: none;
}
.b-layout-sider-content .shadow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

footer {
  min-height: var(--footerHeight);
  background: var(--pColour);
  text-align: center;
  color: --lightTextColor;
  overflow: hidden;
}
footer .btn-group {
  width: 100%;
}
footer .btn-group .btn-block + .btn-block {
  margin-top: 0;
}
footer .btn {
  height: 100%;
  padding: 0;
  font-size: 150%;
  line-height: 0 !important;
  color: --lightTextColor;
}
footer .btn .fas {
  line-height: 2.3 !important;
}
footer .btn:active, footer .btn:hover {
  background: var(--selectedColour);
}

.logo {
  object-fit: contain;
  height: 100px;
}

i.fas.graphic_eq {
  background-image: url("content/graphic_eq.svg");
  background-size: contain;
  height: 24px;
  width: 24px;
  background-repeat: no-repeat;
  margin: auto;
}

.btn-square {
  max-width: 100% !important;
  max-height: 100% !important;
  height: var(--box-size) !important;
  width: var(--box-size) !important;
}

.modal-always-top {
  z-index: 9999 !important;
}

@media (max-width: 575.98px) {
  .modal-bottom-sm {
    min-width: 100vw;
    margin: 0;
  }
  .modal-bottom-sm .modal-dialog {
    margin: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .modal-bottom-sm .modal-dialog .modal-content {
    border: none;
    border-radius: 0;
  }
  .modal-right-sm {
    max-width: 90vw;
    margin: 0;
    right: 0;
    left: unset;
    top: 0;
    bottom: 0;
  }
  .modal-right-sm .modal-dialog {
    height: 100%;
    margin: 0;
  }
  .modal-right-sm .modal-dialog .modal-content {
    height: 100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.snackbar-stack {
  z-index: 999999;
}

.form-fill-children > * {
  flex: 1;
}

.switch-radio > * {
  border: 1px solid black;
  border-right-width: 0;
  margin: 0;
  text-align: center;
}
.switch-radio > *:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.switch-radio > *:last-child {
  border-right-width: 1px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.switch-radio .form-check {
  padding: 0;
}
.switch-radio input {
  display: none;
}
.switch-radio input + label {
  height: 100%;
  width: 100%;
  display: inline-block;
  padding: 0.3rem;
}
.switch-radio input:checked + label {
  background: var(--selectedColour);
  color: white;
}

span.rating {
  font-size: 150%;
}
span.rating > * {
  margin: 0 0.1rem;
}
span.rating .far {
  color: black !important;
}
span.rating .fas {
  color: var(--selectedColour) !important;
}

.modal.fake-hide, .modal.fake-hide + .modal-backdrop {
  pointer-events: none;
  height: 0;
  overflow-y: hidden;
  width: 0;
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
}