/* uses class USER */

@media (min-width: 320px) {
  /* smartphones, iPhone, portrait 480x320 phones */

  #user_activate {
  }
  #user_login {
    display: flex;
  }
  #user_loggedin {
    display: block;
    padding: 0 20px;
    white-space: normal;
    flex-direction: row;
    justify-self: end;
    color: var(--white);
    border-right: 1px solid var(--white);
  }
  #user_loggedin .user_name {
    font-weight: bold;
    color: var(--white);
  }
  #user_forgotten {
  }
  #user_password {
  }
  #user_create {
  }
  #user_icons {
    display: flex;
    padding: 0 0 0 20px;
    flex-direction: row;
    justify-self: end;
    gap: 0.3rem;
  }

  [data-directive="user"] .formtitle {
    display: none;
  }
  #user_login[data-directive="user"] .formforgot a {
    font-style: italic;
    font-size: 0.8em;
    margin: 5px 0;
    color: var(--white);
  }
  #user_login[data-directive="user"] .forminput {
    margin: 5px 0;
    text-align: left;
  }
  #user_login[data-directive="user"] [data-input-name="remember"] {
    font-size: 0.8em;
    line-height: 1em;
    align-self: center;
    color: var(--white);
  }
  #user_login[data-directive="user"] input:not([type="submit"]) {
    background: var(--white);
  }
  #user_login[data-directive="user"] input[type="submit"] {
    border-radius: 2px;
    border: unset;
    padding: 5px 10px;
    margin: 0;
  }
  #user_login[data-directive="user"] input[type="submit"]:hover {
  }

  [data-directive="user"] button.usericon {
    box-sizing: content-box;
    display: inline-flex;
    position: relative;
    background: unset;
    background-position: bottom center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    color: var(--white);
    padding: 0.2rem;
    transition: all 0.2s ease;
  }
  [data-directive="user"] button.usericon svg {
    width: 100%;
    max-width: 1.3rem;
  }

  button.usericon[data-unread=""] .unreadnotification {
    display: none;
    visibility: hidden;
  }
  button.usericon .unreadnotification {
    height: 16px;
    line-height: 16px;
    width: 16px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: bold;
    overflow: hidden;
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--alert);
    color: var(--white);
  }
  button.usericon:hover {
    color: var(--primary);
    transition: all 0.2s ease;
  }
  button.usericon.currentpage {
    color: var(--primary);
  }
}
@media (min-width: 481px) {
  /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
}
@media (min-width: 641px) {
  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
}
@media (min-width: 961px) {
  /* tablet, landscape iPad, lo-res laptops ands desktops */
  [data-directive="user"] .formcontainer form {
    display: grid;
    justify-items: start;
    align-items: center;
    grid-gap: 0 10px;
    grid-auto-columns: auto;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
  }
  [data-directive="user"] [data-input-name="email"].forminput {
    grid-column: 1/ 1;
    grid-row: 1/1;
  }
  [data-directive="user"] [data-input-name="password"].forminput {
    grid-column: 2/2;
    grid-row: 1/1;
  }
  [data-directive="user"] [data-input-name="remember"].forminput {
    grid-column: 1/1;
    grid-row: 2/2;
  }
  [data-directive="user"] [data-input-name="forgot"].formforgot {
    grid-column: 2/2;
    grid-row: 2/2;
  }
  [data-directive="user"] [data-input-name="submit"].formsubmit {
    grid-column: 3/3;
    grid-row: 1/1;
  }
}
@media (min-width: 1025px) {
  /* big landscape tablets, laptops, and desktops */
}
@media (min-width: 1281px) {
  /* hi-res laptops and desktops */
}