:root {
    /* Stops the @reach/dialog styles warning in dev */
    --reach-dialog: 1;
    /* This varaible is used to change the body background color via the useBodyColor hook */
    --body-bg-color: transparent;
  }
  
  body {
    opacity: 1;
    background-color: var(--body-bg-color);
  }
  
  .draggable {
    cursor: move;
    z-index: 9999;
  }
  
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  
  html,
  body {
    height: 100%;
  }
  
  body,
  #__next {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
  
  .slider-control-bottomcenter {
    transform: translateX(0) !important;
  }
  
  @media only screen and (max-width: 52em) {
    .has-auth-header {
      padding-bottom: 96px;
    }
  }
  
  .safari .center-box {
    display: block;
  }
  
  .slider-frame {
    border-radius: 10px;
    overflow: hidden;
  }
  
  [data-reach-dialog-content] {
    outline: none;
  }
  
  [data-tippy-root] {
    z-index: 900 !important;
  }
  
  .body-fixed {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
  }
  
  #portal {
    position: relative;
    z-index: 1000;
  }
  
  .blue-background {
    background: #0101ff;
  }
  
  .webkit-fit-content {
    height: -webkit-fit-content;
  }
  
  .black-background {
    background-color: #000;
  }