* {
  box-sizing: border-box;
}

@media screen and (max-width: 1023px) {
  .navbar {
    display: flex;
    flex-shrink: 2;
    justify-content: space-between;
  }

  .navbar-menu {
    background-color: inherit;
    box-shadow: none;
    padding: 0;
    display: flex;
  }

  .navbar-start {
    display: flex;
  }

  .navbar-item {
    flex: auto;
    display: flex;
    align-items: center;
  }
}

@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

.navbar-brand {}
  .navbar-brand .primary { font-size: 20px; }
  .navbar-brand .secondary { display: none; }
  .navbar-brand:hover .primary {
    display: none;
    animation: fadeOut 700ms;
  }
  .navbar-brand:hover .secondary {
    display: inline;
    animation: fadeIn 700ms;
  }

  .navbar-brand .button { margin-left: 4px; }

.rs-widget {}
.rs-state-sign-in {
  position: absolute;
  right: 0;
  top: 0;
  min-width: 400px;
}

.container {
  margin-top: 12px;
  margin-bottom: 12px;
}

#input > div {
  min-height: 40vh !important;
  margin: 10px;
  font-family: monospace;
  font-size: 1.1em;
}
  #input textarea {
    min-height: 40vh !important;
    font-family: monospace;
  }

.help {
  text-align: justify;
}
  .help .title { margin-top: 1em; }
  .help p { font-size: 1.5em; }

@media print {
  .notie-container,
  #save,
  #input,
  .navbar,
  .footer,
  .help {
    display: none;
  }
  #output {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 23;
  }
}

.unit {
  page-break-inside: avoid;
}