@import "/css/color.css";

#login-root {
  background-color: var(--LoginBG);
}

.Account-Options-label {
  color: var(--White);
  font-size: xx-large;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 20px;
}

.Account-label {
  color: var(--White);
  font-size: x-large;
  font-weight: 500;
  align-items: center;
  text-align: left;
  justify-content: flex-start !important; /* left aligns text to match PC app */
}

.rs-logo { width: 70px; }

#login-div {
  padding: 40px 60px !important;
  margin: 0 !important;
}

#login-div .w-100 .btn:hover {
  background: #474849;
  border-color: #909091;
}

#login-div .account-btn {
  padding: 15px;
  border: 2px solid var(--Yellow) !important;
  background-color: var(--LoginBG);
}

#login-div .account-btn:focus,
#login-div .account-btn:hover {
  border-color: var(--White) !important;
  background-color: var(--LoginBG);
}  

#app-version {
  margin-top: 30px;
  line-height: 1;
}

.logo-img {
  width: 15%;
  margin: 0 20px 0 0;
  align-self: center;
}

.microsoft-button {
  background-color: black !important;
  color: azure !important;
}

.microsoft-button:hover {
  background-color: white !important;
  color: black !important;
  border: 2px solid black !important;
}

.terms_condition_div {
  font-size: small;
}

.hover-white:hover {
  border: 2px solid var(--White) !important;
}

#rs-login {
  background-color: var(--LimeGreen);
}
#rs-login:hover {
  border: 2px solid var(--White) !important;
}
#rs-login:focus {
  border: 2px solid var(--White) !important;
}

#rs-back-button {
  background-color: var(--CBlack);
}
#rs-back-button:hover {
  border: 2px solid var(--White) !important;
}
#rs-back-button:focus {
  border: 2px solid var(--White) !important;
}

.form-control {
  height: inherit;
  padding: 10px 15px;
  font-size: 16px;
}

#login-frame {
  max-width: 550px;
  height: calc(100vh - 97px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
}

#login-frame > div { margin: 0 !important; }

#login-frame > div > div { padding: 0 !important; }

#login-frame #login-div-parent {
  max-width: 100% !important;
  flex: 1;
  padding: 0 !important;
  margin: 0 !important;
}

#login-frame #login-div-parent.rs-login { width: 400px !important; }

@media only screen and (max-width: 560px) {
  #login-frame { max-width: 96%; }

  #login-frame #login-div-parent,
  #login-frame #login-div-parent.rs-login { width: 96vw !important; }

  #login-div { padding: 20px 30px !important; }

  .Account-Options-label {
    font-size: 22px;
    padding-bottom: 0;
  }

  .Account-label { font-size: 18px; }
  #app-version { margin-top: 15px; }
}