/* Top bar and menu wear the site's blue-green, the page's brightest things */
/* In dark mode they keep the blue, run into the palette's darkest color */
/* Through variables so each gradient is written once, not in two rules */
:root {
  --bar-gradient: linear-gradient(90deg, #1897FF 100%, #07E316 100%);
  --menu-gradient: linear-gradient(180deg, #1897FF 10%, #07E316 100%);
}

html[data-bs-theme="dark"] {
  --bar-gradient: linear-gradient(90deg, #0B4D8C 0%, #0B4D8C 100%);
  --menu-gradient: linear-gradient(180deg, #0B4D8C 10%, #0A0E15 100%);
}

.header {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  position: fixed;
  height: 60px !important;
  overflow: hidden;
  z-index: 10;
  background: var(--bar-gradient);
}

/* No sized parent, so use the viewport less the 60px header for min-height */
.main {
  margin: 0 auto;
  display: block;
  min-height: calc(100vh - 60px);
  margin-top: 60px;
  transition: 250ms all ease-in-out;
}

.mainInner {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}

.mainInner div {
  display: table-cell;
  vertical-align: middle;
  font-size: 3em;
  font-weight: bold;
  letter-spacing: 1.25px;
}

/* 98, since a hovered group button hits z-index 1 and a tie shows through */
/* Clears the page but stays under the hamburger (99), modals and overlay */
#sidebarMenu {
  height: 100%;
  position: fixed;
  left: 0;
  width: 250px;
  margin-top: 60px;
  transform: translateX(-250px);
  /* all cross-fades the menu on theme switch; mid-fade it reports the old color */
  transition: all 250ms ease-in-out;
  background: var(--menu-gradient);
  z-index: 98;
}

.sidebarMenuInner {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li {
  list-style: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  padding: 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li.no-linky,
.sidebarMenuInner li.no-linky a {
  cursor: default;
}

.sidebarMenuInner li span {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.50);
}

.sidebarMenuInner li a {
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

/* The one menu item that's a control, not a link */
/* No form-check indent; words line up, box at the far end, row toggles */
.sidebarMenuInner li .form-check {
  display: flex;
  align-items: center;
  padding-left: 0;
  margin-bottom: 0;
  min-height: 0;
}

.sidebarMenuInner li .form-check-label {
  flex: 1;
  cursor: pointer;
}

.sidebarMenuInner li .form-check-input {
  float: none;
  margin: 0;
  order: 1;
  cursor: pointer;
}

input[type="checkbox"]:checked~#sidebarMenu {
  transform: translateX(0);
}

@media only screen and (min-width: 1200px) {
  input[type="checkbox"]:not(checked)~#sidebarMenu {
    transform: translateX(0);
  }

  .main {
    margin-left: 250px;
    transition: 250ms all ease-in-out;
  }

  .sidebarIconToggle.menu {
    display: none;
  }
}

/* Named, not a catch-all that hid every checkbox and any new one */
#openSidebarMenu {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

.sidebarIconToggle {
  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 22px;
  height: 22px;
  width: 22px;
}

/* Padding grows a 44px tap target, a negative margin keeps the icon put */
/* Both boxes stay inside the 60px bar, or a hidden target eats taps up top */
.sidebarIconToggle.menu {
  left: 15px;
  height: 44px;
  width: 44px;
  padding: 11px;
  margin: -11px;
}

.sidebarIconToggle.back-button {
  right: 15px;
  top: 16px;
  color: #FFFFFF;
  height: 44px;
  width: 44px;
  padding: 7px;
  margin: -7px;
  /* transition:  color 1s ease */
}

.sidebarIconToggle.back-button[active="true"] {
  animation-name: pulsing-color;
  animation-duration: 1s;
  animation-iteration-count: 2;
}

/* A Feather loader, each spoke fading in turn so a bright spot travels */
.sidebarIconToggle.back-button svg.feather-loader line {
  -webkit-animation: loader-fade 1.6s linear infinite;
  animation: loader-fade 1.6s linear infinite;
}

/* Negative delays start each spoke mid-fade, full ring from frame one */
/* Feather emits opposite pairs, so this order runs 12, 1:30, 3, round */
.sidebarIconToggle.back-button svg.feather-loader line:nth-child(1) {
  animation-delay: -1.4s;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(8) {
  animation-delay: -1.2s;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(6) {
  animation-delay: -1s;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(4) {
  animation-delay: -0.8s;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(2) {
  animation-delay: -0.6s;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(7) {
  animation-delay: -0.4s;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(5) {
  animation-delay: -0.2s;
}

.sidebarIconToggle.back-button svg.feather-loader line:nth-child(3) {
  animation-delay: 0s;
}

/* Fades to a quarter, not zero, or a gap breaks the ring's circle */
@-webkit-keyframes loader-fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.25;
  }
}

@keyframes loader-fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.25;
  }
}

@keyframes pulsing-color {
  0% {}

  50% {
    color: #07E316;
    /* width: 50px; */
    stroke-width: 3px;
  }
}

.spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #fff;
}

.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}

.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}

.input-group div {
  color: #1897FF;
}

#sidebarMenu ul> :last-child {
  position: absolute;
  bottom: 60px;
}
/* Uppercase bold menu items are wrong for a sentence saying what to type */
.login-hint {
  text-transform: none;
  font-weight: normal;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 8px;
  cursor: default;
  color: rgba(255, 255, 255, 0.50);
}

/* The title over the boxes, white and a size up, the one to read first */
/* Not uppercase, like nothing else down here */
.login-title {
  text-transform: none;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 8px;
  cursor: default;
}

/* A real submit button now, not a div */
/* input-group-text colors it; these three lines strip the browser's own look */
.login-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-family: inherit;
}

/* Error state of the same line: red is unreadable on the gradient, so pink */
/* It beats the gray above by being the later of two rules one class deep */
.login-error {
  color: var(--error-pink);
}

/* Under the login boxes, not a modal, since it asks about what's in them */
/* A sentence, bigger and white since it wants an answer */
.signup-offer {
  text-transform: none;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.35;
  margin-top: 12px;
  cursor: default;
}

/* Wants a gap above and the other button's look; colors from the pin arrow */
/* Set as btn variables, not bg/border, or :hover blanks them and it vanishes */
.signup-offer button {
  margin-top: 8px;
}

.signup-button {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--bs-tertiary-bg);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-secondary-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-secondary-bg);
  --bs-btn-active-border-color: var(--bs-border-color);
}

/* The pin arrow is really a button, so give it a pointer */
/* It takes not-allowed on its own when the username can't be anyone's */
.login-button {
  cursor: pointer;
}

/* Default overlay is just a tint, so you can still log in while scores load */
/* An account request instead blocks everything and swallows the clicks */
/* 2000 clears the sidebar (99), footer (1500) and modals (1055) */
.overlay.blocking {
  z-index: 2000;
}

/* On any in-flight button: pointer-events off so no press or key lands early */
/* No z-index: a child can't escape the fixed sidebar (98) or modal (1055) */
.button-working {
  pointer-events: none;
}