/* 
This file contains styles thats reused by internal sign in page, external sign in and register pages.
Each of those pages might have their own css file containing specific styles.

Author @safwankarim
 */

:root {
  --nsw-brand-dark: #002664;
  --nsw-brand-light: #cbedfd;
  --nsw-brand-accent: #d7153a;
  --nsw-off-white: #f2f2f2;
}

/* MS Style start - https://docs.microsoft.com/en-us/power-apps/maker/portals/configure/azure-ad-b2c */
.page-heading {
  padding-top: 20px;
}
.page-copy {
  margin-bottom: 40px;
}
.highlightError {
  border: 1px solid #cb2027 !important;
  background-color: #fce8e8 !important;
}
.attrEntry .error.itemLevel {
  display: none;
  color: #cb2027;
  font-size: 0.9em;
}
.error {
  color: #cb2027;
}
.entry {
  padding-top: 8px;
  padding-bottom: 0 !important;
}

.entry-item:nth-child(2) {
  margin-bottom: 35px;
}

label[for="logonIdentifier"],
label[for="password"],
label[for="email_ver_input"] {
  display: none !important;
}

label[for="email"],
label[for="newPassword"],
label[for="reenterPassword"] {
  /* display: none !important; */
  float: left;
}

.intro {
  margin-bottom: 18px;
  display: inline-block;
}
.intro > h2 {
  font-weight: 600 !important;
}
.pageLevel {
  width: 293px;
  margin-top: 5px;
  font-size: 1.1em;
  height: auto;
}
#panel,
.pageLevel,
.panel li,
label {
  display: block;
}
#forgotPassword {
  font-size: 0.75em;
  position: relative;
  top: 65px;
}

#forgotPassword:hover {
  color: var(--nsw-brand-accent) !important;
}

#createAccount {
  margin-left: 5px;
}
.working {
  height: 10px;
  width: auto;
}
.divider {
  margin-top: 20px;
  margin-bottom: 10px;
}
.divider h2 {
  display: table;
  white-space: nowrap;
  font-size: 1em;
  font-weight: 700;
}

img {
  border: 0;
}
.divider {
  margin-top: 20px;
  margin-bottom: 10px;
}
.divider h2 {
  display: table;
  white-space: nowrap;
  font-size: 1em;
  font-weight: 700;
}
.divider h2:after,
.divider h2:before {
  border-top: 1px solid #b8b8b8;
  content: "";
  display: table-cell;
  position: relative;
  top: 0.7em;
  width: 50%;
}
.divider h2:before {
  right: 1.8%;
}
.divider h2:after {
  left: 1.8%;
}
.verificationErrorText {
  color: #d63301;
}
.options div {
  display: inline-block;
  vertical-align: top;
  margin-top: 7px;
}

button {
  background-color: var(--nsw-brand-dark) !important;
  color: var(--nsw-off-white) !important;
}
button:hover {
  background: var(--nsw-brand-accent) !important;
}

/* MS Style end */

html {
  /* hiding as height of 100vh leaves a white line bottom of screen and 102vh shows scroll bar. */
  overflow: hidden;
}

.columns {
  display: flex; /* full height */
  height: 104vh;
}

.col-right {
  background-color: white;
}

.col-left {
  background-color: var(--nsw-off-white);
  background-image: url(~/login-banner.webp);
  opacity: 1;
  background-size: cover;
}

.img-container {
  position: relative;
  top: 40%;
  right: 20%;
}

.login-form {
  z-index: 9999;
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 62%;
}

@media screen and (max-width: 768px) {
  .login-form {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

.input:focus {
  outline: none !important;
  border-color: var(--nsw-brand-dark) !important;
}

/* remove header and footer */
header,
footer,
.navbar,
.footer,
.nav-tabs,
#external-login-heading {
  display: none;
}

@media (min-width: 769px) {
  .login-form {
    left: 82%; /* don't change this as this position works on portal but weird on local. */
  }
}

button {
  width: 100%;
}

.col-left {
  height: 100vh;
  margin-left: 0;
}

@media (min-width: 769px) {
  .col-left {
    left: 0%;
  }
}

@media screen and (min-width: 1024px) {
  .container {
    max-width: 54rem;
  }
}

@media screen and (min-width: 1408px) {
  .container:not(.is-max-desktop):not(.is-max-widescreen) {
    max-width: 1236px;
  }
}