body{
  margin:0;
  font-family:"Atlas Grotesk Web", Arial, sans-serif;
  padding: 0;
}

.login-right {
    flex: 1;
    position: relative;
    display: flex;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
    align-self: stretch;
    background-image: url("/wp-content/plugins/pmg-vms-client/media/LoginPageStock.jpeg");
    background-size: cover;
    background-position: 35% center;
    background-repeat: no-repeat;
}
		
.login-page {
  display:flex;
  min-height:100vh;
  width:100%;
  overflow: hidden;
}

.login-left {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:24px;
  gap:48px;
  background:linear-gradient(135deg,#31315B 13.9%,#15152A 85.26%);
  box-shadow:0 0 10px rgba(0,0,0,0.5);
}

.login-card{
  width:463px;
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:24px;
  border-radius:12px;
  border:1px solid #DBDBDB;
  background:#F3F3F3;
  box-shadow:0 0 8px rgba(14,14,81,0.26);
}

.login-title-row{
  display:flex;
  justify-content:center;
  align-items:center;
}

.login-title{
  font-size:28px;
  font-weight:500;
  line-height:45px;
  letter-spacing:-0.853px;
  color:#27274C;
}

.login-subtitle{
  text-align:center;
  font-size:18px;
  font-weight:300;
  line-height:32px;
  letter-spacing:-0.427px;
  color:#474747;
}

.input-pill{
  display:flex;
  height:48px;
  padding:8px 20px;
  align-items:center;
  gap:10px;
  border-radius:100px;
  border:1px solid #DBDBDB;
  background:#FFF;
}

.input-pill input{
  border:none;
  outline:none;
  width:100%;
  font-size:18px;
  font-weight:300;
  background:transparent;
}

.input-pill input:-webkit-autofill,
.input-pill input:-webkit-autofill:hover,
.input-pill input:-webkit-autofill:focus,
.input-pill input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
  -webkit-text-fill-color: #000 !important;
  border-radius: 100px;
}

.input-pill input::placeholder{
  color:#DBDBDB;
}

.remember-section{
  display:flex;
  height:48px;
  align-items:center;
  gap:8px;
}

.toggle-button{
  display:flex;
  height:22px;
  padding:1px;
  align-items:center;
  border-radius:100px;
  background:#6AB9FF;
  cursor:pointer;
}

.toggle-button svg{
  width:20px;
  height:20px;
}

.toggle-button.off{
  background:#DBDBDB;
}
#closeIcon{
  display:flex;
  width: 7.764px;
height: 7.764px;
  padding:6px 6.5px 6.5px 6px;
  justify-content:center;
  align-items:center;
  aspect-ratio:1/1;
}
 
#closeIcon svg{
  width:7.5px;
  height:7.5px;
  flex-shrink:0;
}
 
.toggle-button svg:nth-child(1){
  margin-left:auto;
}
 
.toggle-button svg:nth-child(2){
  margin-right:auto;
}

.remember-text{
  color:#474747;
  font-size:14px;
  font-weight:300;
}

.button-row{
  display:flex;
  justify-content:space-between;
}

.btn-back{
  display:flex;
  height:48px;
  padding:17px 30px;
  align-items:center;
  gap:12px;
  border-radius:30px;
  border:1px solid #373997;
  background:transparent;
  color:#373997;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
}

.btn-login{
  display:flex;
  height:48px;
  padding:17px 30px;
  align-items:center;
  gap:12px;
  border-radius:30px;
  border:1px solid #373997;
  background:#373997;
  color:#FFF;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
}

.forgot-section,
.signup-section{
  font-size:14px;
}

.forgot-text,
.signup-text{
  color:#474747;
  font-weight:300;
}

.reset-link,
.speak-link{
  color:#373997;
  font-weight:500;
  cursor:pointer;
  text-decoration: none;
}

.divider{
  width:100%;
  height:1px;
  background:#DBDBDB;
}

.brand-logo{
  display:flex;
  padding:24px 0;
  flex-direction:column;
  align-items:center;
}

.brand-logo img{
  height:22px;
}

.login-right video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.error strong {
    font-weight: 500;
}
 
.error {
    font-size: 14px;
    color: red;
    text-align: center;
    font-weight: 300;
}

/* Mobile */
@media(max-width:768px){

.login-page{
  position:relative;
  min-height:100vh;
  padding:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

.login-page::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(39,39,76,0.40);
  backdrop-filter:blur(2px);
  z-index:1;
}

.login-right{
  position:absolute;
  inset:0;
  z-index:0;
}

.login-left{
  position:relative;
  z-index:2;
  width:100%;
  background:none;
  box-shadow:none;
  padding:0;
  gap:20px;
  right: 10px;
}

.login-card{
  width:100%;
  max-width:352px;
  padding:12px;
  gap:12px;
}

.login-title{
  font-size:18px;
}

.login-subtitle{
  font-size:16px;
}

.forgot-section,
.signup-section{
  font-size:12px;
}

.brand-logo{
  max-width:352px;
  padding:20px 0;
}
}