#user-overview {
  width: 100vw;
  height: 100%;
  max-height: 100%;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  background-color: var(--board-background);
  gap: 5em;
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-left: 2em;
  padding-right: 2em;

  h2 {
    color: var(--dark-gray);
  }

  .action-bar {
    display: flex;
    justify-content: flex-end;
  }

  .button-bar {
    display: flex;
    align-items: end;
    justify-content: flex-end;

    a {
      text-decoration: underline;
      color: #111;
      font-weight: bold;
      text-underline-offset: 2px;
      margin-left: auto;
    }
  }


  #users-view,
  #sessions-view {
    display: flex;
    gap: 1em;
    flex-direction: column;
    background-color: var(--bg);
    padding: 1.5em;
    border-radius: 4px;
    outline: 1px solid black;
    box-shadow: 3px 3px 8px black;
    flex: 1 1 300px;
    max-width: 40%;
    height: fit-content;
    min-height: 200px;

    button.change-role {
      margin: 4px 0;

      &.admin {
        background-color: darkred;
      }

      &.editor {
        background-color: var(--info);
      }

      &.viewer {
        background-color: var(--success);
      }
    }

    ul {
      display: flex;
      flex-direction: column;
      gap: 0.5em;

      li {
        background: var(--bg-alt);
        padding: 1em;
        border-radius: 0.5em;
        display: flex;
        flex-direction: column;
        gap: 4px;

        &.active {
          outline: 1px solid black;
          box-shadow: 2px 2px 4px black;
        }

        .labeled-field {
          display: flex;
          gap: 1em;
          align-items: center;

          .label {
            width: 12em;
            font-weight: bold;
            display: block;
          }

          .detail {
            flex: 1 0 auto;
            color: var(--bg-active);
            display: block;
            max-width: 20em;
          }
        }

        .current-session {
          margin-bottom: -0.5em;
          /*margin-top: 1.0em;*/
          text-align: end;
          font-style: italic;
          color: black;
          font-weight: bold;
        }
      }
    }
  }
}

#access-overview {
  display: flex;
  flex: 1 0 auto;
  justify-content: space-evenly;
  height: 100%;
  background-color: var(--board-background);
  padding-top: 4em;

  form {
    opacity: 0.7;
  }

  .button-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    a {
      cursor: pointer;
      text-decoration: underline;
      color: #111;
      font-weight: bold;
      text-underline-offset: 2px;
      margin-left: auto;
    }
  }
}

#access-overview form,
#user-overview form {
  display: flex;
  gap: 1em;
  flex: 0 1 auto;
  flex-direction: column;
  height: fit-content;
  min-width: 430px;
  background-color: var(--bg);
  padding: 1.5em;
  border-radius: 4px;
  outline: 1px solid black;
  transition: all 300ms ease-in-out;
  box-shadow: 3px 3px 8px black;

  &:hover,
  &:focus-within {
    outline: 1px solid var(--bg-active);
    opacity: 1;
  }

  h1 {
    color: var(--bg-dark);
    margin-right: 0.3em;
    text-align: end;
  }

  .error-container {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    margin-top: 0.5em;
    gap: 2px;
  }

  .error-msg {
    display: flex;
    align-items: center;
    background-color: var(--bg-dark);
    color: var(--warn);
    text-align: center;
    padding: 3px 5px 3px 5px;
    border: unset;
    border-radius: 4px;
    gap: 0.5em;
    margin-left: auto;
    justify-content: end;
    font-size: 0.9em;

    svg {
      width: 1em;
    }
  }

  &#login-form label {
    display: inline-block;
    font-weight: bold;
    width: 6em;
  }

  &#register-form label {
    display: inline-block;
    font-weight: bold;
    width: 10em;
  }

  .password-view {
    display: flex;
    gap: 0.5em;
    align-items: center;

    .show-password {
      width: 1em;
      height: 1em;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      color: black;
      cursor: pointer;
      margin-bottom: auto;
      margin-top: 4px;

      svg {
        display: block;
        margin: auto;
      }
    }
  }

  input {
    background-color: var(--bg-alt);
    color: var(--bg-active);
  }

  input.error-input {
    outline: 1px solid orangered;
  }

  &#user-form {

    .header {
      display: flex;
      gap: 0.7em;
      margin-bottom: 1em;

      h2 {
        color: var(--bg-active);
      }

      h1 {
        margin-top: 0.25em;
        color: var(--dark-gray);
      }
    }

    .labeled-field {
      display: flex;
      align-items: center;
      gap: 1em;

      .label {
        width: 10em;
        font-weight: bold;
      }

      .detail {
        color: var(--bg-active);
      }
    }
  }
}