@import "buttons.css";
@import "colors.css";
@import "fonts.css";
@import "typography.css";
@import "variables.css";
body {
  min-height: 100vh;
  display: flex;
  position: relative;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  background-color: var(--body-color) !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.body-no-scroll {
  overflow: hidden;
}

@media (min-width: 992px) {
  .body-no-scroll {
    overflow: auto;
  }
}
footer {
  margin-top: auto;
}

button {
  min-height: 35px;
  min-width: 35px;
}

label {
  display: flex !important;
}
label span {
  padding: 3px;
}

select {
  min-height: 45px;
  min-width: 45px;
  color: var(--buttonText-color) !important;
}

.hero {
  color: white;
  background-color: var(--grey-500);
  padding: 2rem 0;
  min-height: 15rem;
}

.hero h1,
.hero h4 {
  color: white;
}

/*.callout-grey {
    background-color: var(--grey-200);
    padding: 2rem; // commonly overwritten to rem4 in custom override classes.
    border-radius: 8px;
    border: 1px solid var(--grey-300);
}
//boostrap md breakpoint
@media (max-width: 768px) {
    .callout-grey {
        padding: 1rem;
        border-radius: 5px;
    }
}*/
.callout-white {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid var(--grey-400);
}

@media (max-width: 768px) {
  .callout-white {
    padding: 1rem;
    border-radius: 5px;
  }
}
.authorized-section-header {
  background-color: white;
  border-bottom: 1px solid var(--grey-400);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
}

.authorized-section-header p {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0;
  align-self: center;
}

.list-view-row {
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: white;
  margin-left: 0;
  margin-right: 0;
}

.list-view-row-header {
  font-size: 0.9rem;
  color: white;
  padding-top: 1rem;
  padding-bottom: 0.25rem;
  background-color: var(--grey-600);
  margin-left: 0;
  margin-right: 0;
  align-items: end;
}

/*.pop-wrap { // can be mixed into hover-shadow
    position: relative;
    margin-bottom: 1rem;
    transition: box-shadow 0.2s ease-in-out;
}*/
/*.on-top-replace { // don't need anymore
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    width: 150%;
    max-width: 100vw;*/
/*    this roughly sizes to the base card size, to make the animation look like it's expanding from the card. exact scale needed depends on how many cards show in the row*/
/*    this property is set from js if enabled*/
/*transform: translate(-50%, -50%) scaleY(.55) scaleX(.6);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s ease, opacity 0.2s ease;
}*/
/*.on-top-replace.expand {
    transform: translate(-50%, -50%) scale(1);*/ /* can't be here with js transformation */
/*opacity: 1;
    pointer-events: auto;
}*/
/*.on-top-replace.shrink {*/
/*        transform: translate(-50%, -50%) scale(0);*/
/*}*/
/*.hover-shadow {
    transition: box-shadow 0.2s ease-in-out;
    border-radius: .375rem;
}*/
/*.hover-shadow:hover {
    box-shadow: var(--box-shadow-2);
}*/
.class-card {
  height: 100%;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  transition: box-shadow 0.2s ease-in-out;
}

.class-card:hover {
  box-shadow: var(--box-shadow-2);
}

.modal-overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  overflow-y: auto;
}

.overlay-sizing {
  /*    placeholder for overlay-sizing on larger devices*/
}

@media (max-width: 576px) {
  .overlay-sizing {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
.toggle-switch {
  width: 6rem;
  height: 2.5rem;
  background-color: var(--grey-300);
  border-radius: 5px;
  position: relative;
  display: flex;
  cursor: pointer;
}

.toggle-switch .toggle-icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.toggle-switch .toggle-box {
  width: 40%; /* leaves a little room around the edges of the box */
  height: 80%;
  background-color: white;
  border-radius: 5px;
  position: absolute;
  top: 10%; /* half of height left for margins */
  transition: left 0.5s;
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.3);
}

#components-reconnect-modal {
  display: none;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100vh;
  width: 100%;
  z-index: 10001;
}