#Header.cmt-login-screen {
  text-align: center;
}

#MainBox.Login {
  flex: 1;
  padding-top: 3.4em;

  #Slider {
    height: initial;
    overflow: visible;
    width: initial;
  }

  #Login,
  #Reset,
  #Signup {
    background-color: #fff;
    border-radius: 4px;
    box-shadow:
      0 3px 1px -2px rgb(0 0 0 / 20%),
      0 2px 2px 0 rgb(0 0 0 / 14%),
      0 1px 5px 0 rgb(0 0 0 / 12%);
    height: auto;
    margin: 0 auto;
    padding: 20px;
    padding-top: 0;
    min-width: 400px;
    width: fit-content;

    h2 {
      border-top: none;
      border-radius: 4px 4px 0 0;
      font-size: initial;
      margin-bottom: -10px;
      margin-left: -20px;
      margin-right: -20px;
      margin-top: -20px;
      padding: 20px;

      // From .v-card__title
      line-height: 2rem;
      font-weight: 500;
      letter-spacing: 0.0125em;
      font-size: 1.25rem;
    }

    h2 + p {
      margin-bottom: 0;
    }

    form {
      padding-top: 20px;

      & > div {
        float: none;
        margin: 0;
        margin-bottom: 20px;
        display: flex;
        align-items: center;

        label {
          color: rgba(0, 0, 0, .6) !important;
          flex: 1;
          font-size: initial;
          margin: 0;
          padding: 0;
          position: initial;

          &::after {
            content: ":";
          }

          .Marker {
            color: rgba(0, 0, 0, .4);
            top: initial;
          }
        }

        input {
          background: #fff;
          flex: 2;
          font-size: initial;
          line-height: 1.375rem;
          min-height: 40px;
          padding: 0 12px;
          position: initial;
          width: auto;

          &:-webkit-autofill {
            z-index: 10;
          }
        }

        button[type="submit"] {
          @include primary-button;

          display: block;
          margin: auto;

          // Based on customer-ticket.vue
          background-color: rgb(33, 150, 243);
          border-color: rgb(33, 150, 243);
          box-shadow:
            0 3px 1px -2px rgb(0 0 0 / 20%),
            0 2px 2px 0 rgb(0 0 0 / 14%),
            0 1px 5px 0 rgb(0 0 0 / 12%);
          color: #fff !important;
          caret-color: #fff !important;
          font-size: initial;
          font-weight: 500;
          height: 44px;
          letter-spacing: 0.025em;
          min-width: 78px;
          padding-left: 32px !important;
          padding-right: 32px !important;
          text-transform: none;
        }
      }
    }

    p {
      text-align: center;
    }

    & > a.InlineNavigation:first-child {
      left: 0;
      top: -40px;

      &::before {
        content: mdi("arrow-left") + " ";
        font-family: "Material Design Icons";
      }

      &::first-letter {
        display: none;
      }
    }
  }

  #Reset,
  #Signup {
    margin-top: 40px;
  }

  .ErrorBox ~ #Slider,
  .MessageBox ~ #Slider,
  .SuccessBox ~ #Slider {
    #Reset,
    #Signup {
      margin-top: calc(40px + 36px);
    }
  }

  #Signup {
    min-width: 500px;

    .NewLine:nth-last-child(2),
    .Clear:last-child {
      margin-bottom: 0;
    }
  }

  #Login:not(:target),
  #Reset:not(:target),
  #Signup:not(:target) {
    display: none;
  }

  .ErrorBox {
    @include msg-box("error");
  }

  .SuccessBox {
    @include msg-box("success");
  }

  .ErrorBox,
  .SuccessBox {
    margin: auto;
    margin-bottom: 40px;
    padding: 0;
    position: relative;
    width: 400px;

    p {
      margin: 0;
    }
  }
}
