body {
  overflow: hidden; }

.screen {
  display: none;
  height: 100vh; }

#splash-screen {
  display: block; }
  #splash-screen .screen-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center; }
    #splash-screen .screen-inner .logo {
      width: 220px; }

#login-screen .screen-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; }

#login-screen .login-button {
  width: 308px; }

#login-screen .login-top, #login-screen .login-bottom {
  flex-grow: 1; }

#main-screen .screen-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative; }
  #main-screen .screen-inner .screen-top {
    top: 2rem;
    left: 1rem;
    right: 1rem;
    padding: 1rem;
    position: absolute;
    background-color: rgba(47, 171, 0, 0.8); }
  #main-screen .screen-inner .screen-middle {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center; }
  #main-screen .screen-inner .screen-bottom {
    bottom: 3rem;
    left: 1rem;
    right: 1rem;
    padding: 1rem;
    position: absolute;
    background-color: rgba(47, 171, 0, 0.8); }

#charging-screen .screen-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; }
  #charging-screen .screen-inner > * {
    width: 100%;
    max-width: 600px; }

#charging-screen .screen-top {
  padding: 2rem 1rem; }

#charging-screen .screen-middle {
  padding: 2rem 1rem;
  flex-grow: 1;
  width: 100%; }

#charging-screen .screen-bottom {
  text-align: right; }

.code-reader {
  box-sizing: content-box;
  max-width: 400px;
  width: 100%;
  text-align: center; }
  .code-reader video {
    width: 100%; }

#csid-reader__dashboard {
  display: none; }

#csid-reader__scan_region {
  display: flex; }

/*# sourceMappingURL=main.css.map */