.formContainer {
  width: auto;
  display: block;
  max-width: 680px;
}

div#login {
  display: flex;
  align-items: center;
  padding: 8px 0;
  gap: 20px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  div#header {
    display: block !important;
  }
  div#login {
    display: flex;
    align-items: flex-start;
    padding: 8px 0;
    gap: 12px;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
  }
  form#json > div {
    margin: 0 20px;
  }
  p#messagetag {
    width: auto;
    margin: 20px;
  }
  #login input {
    width: 100%;
    box-sizing: border-box;
    height: calc(var(--ui-component-height) + 6px);
  }
  #container div#navigation {
    min-height: 35px;
    display: flex;
    border-radius: 10px;
    width: 100%;
    background-repeat: unset !important;
    background-image: unset !important;
    background: linear-gradient(
      to bottom,
      #d4d4d4 0px 1px,
      #bbbbbb 1px 2px,
      #a1a1a1 2px 3px,
      #888888 3px 4px,
      #717171 4px 5px,
      #616161 5px 6px,
      #515151 6px 7px,
      #454545 7px 8px,
      #3c3c3c 8px 9px,
      #373737 9px 10px,
      #343434 10px 11px,
      #333333 11px calc(100% - 10px),
      #323232 calc(100% - 10px) calc(100% - 9px),
      #313131 calc(100% - 9px) calc(100% - 8px),
      #2e2e2e calc(100% - 8px) calc(100% - 7px),
      #2b2b2b calc(100% - 7px) calc(100% - 6px),
      #262626 calc(100% - 6px) calc(100% - 5px),
      #212121 calc(100% - 5px) calc(100% - 4px),
      #232323 calc(100% - 4px) calc(100% - 3px),
      #2a2a2a calc(100% - 3px) calc(100% - 2px),
      #353535 calc(100% - 2px) calc(100% - 1px),
      #464646 calc(100% - 1px) 100%
    ) !important;
  }

  div#view {
    min-height: 100%;
    margin-top: 50px;
  }
  div#jsoff {
    margin: 20px;
    padding: 10px;
    width: auto;
  }

  #jsoff.errorMsg {
    background-position: 5px 25px;
  }

  #jsoff.errorMsg p:first-of-type {
    margin-left: 20px;
  }
}