/** addedb by Danish in august 25**/
:root {
--roboto-condenced:'Roboto Condensed', sans-serif;
--defaultText-color:#1E1E1E;
--fontMedium:16px;
--fontSmall:12px;
--formLabel:16px;
--labelColor:#1E1E1E;
--inputbox-height:44px;
--inputboxradius:8px;
--inputbox-border-color:#EBEBEB;
--inputbox-color:#474747;
--linkColor:#05A8A8;
--btnHeight:44px;
--btnRadius:8px;
--btnFontSize:16px;
--errorTextColor:#FF3B30;
--errorCard:#F9D7D7;
--sucessCard:rgba(39, 190, 54, 0.12);
}
.articleForm{
  text-align: center;
  max-width: 200px;
  margin-inline: auto;
  padding: 15px !important;
}
.prgrphNormal{
font-family:var(--roboto-condenced);
color:var(--defaultText-color);
font-size:14px;
font-weight:400;
line-height:16px;
}

.login-container .updatedGroup{
margin-block:30px;
}
.login-container .updatedGroup label{
font-family:var(--roboto-condenced);
font-weight:500;
font-size:var(--formLabel);
color:var(--labelColor);
padding-bottom:10px;
}
.login-container .updatedGroup .form-control,
.login-container .updatedGroup .cstmSelect{
border:2px solid var(--inputbox-border-color);
height:var(--inputbox-height);
font-size:14px!important;
font-weight:400;
border-radius:var(--inputboxradius)!important;
color:var(--inputbox-color)!important;
width:100%;
/* padding:15px; */
}
.login-container .updatedGroup .cstmSelect{
  -webkit-appearance:none;
  appearance:none;
  background:url(../images/dropdownarrow2.svg) 95% center no-repeat;
}
/*.main-container{
position:relative;
height:auto;
top:120px;
}*/
.main-container{
position:relative;
height:auto;
top:50%;
transform: translateY(-50%);
max-height: 100%;
}
.main-container .login-container{
top:0px!important;
min-width:inherit;
max-width:660px;
margin:0 auto;
display:block;
width:100%;
transform:translateY(0);
padding:40px 0px;
}
.main-container .login-container .inerCntainer{
max-width: 310px;
width: 100%;
margin: 0 auto;
}
.cstmPeregraph{
font-family:var(--roboto-condenced);
color: var(--defaultText-color);
font-size:var(--fontMedium);
line-height:var(--fontMedium);
font-weight: 400;
}
.or-divider {
display: flex;
align-items: center;
text-align: center;
margin: 20px 0;
color: var(--defaultText-color);
font-size: var(--fontSmall);
font-weight: 400;
}

.or-divider::before,
.or-divider::after {
content: "";
flex: 1;
border-bottom: 1px solid var(--defaultText-color);
}

.or-divider::before {
margin-right: 10px;
}

.or-divider::after {
margin-left: 10px;
}

.or-divider span {
padding: 0 10px;
font-weight: bold;
color: #555;
}

.password-wrapper {
position: relative;
}

.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
padding-right: 60px; /* space for the "Show" link */
}

.toggle-password {
position: absolute;
right: 10px;
bottom: -4px;
width: 25px;
transform: translateY(-50%);
border: none;
/* background: none;
border: none;
color: var(--linkColor);
cursor: pointer;
font-size: 14px;
font-weight:500; */
}

.slds-scope .toggle-password.show-icon{  
  background:url('../images/eyeshow.svg') left top no-repeat!important;  
  width: 25px;
  background-image:none;
  background-color:transparent;
  height:25px;
}

.slds-scope .toggle-password.hide-icon{  
  background:url('../images/eyehide.svg') left top no-repeat!important;
    background-image:none;
    background-color:transparent;
      height:25px;
}
.cstmBtn .loginBtn,
.cstmBtn .cancelBtn{
font-family:var(--roboto-condenced);
height:var(--btnHeight)!important;
border-radius:var(--btnRadius)!important;
font-size:var(--btnFontSize)!important;
min-width:150px!important;
}
.cstmBtn .cancelBtn{
  background-color:#fff!important;
 border:1px var(--linkColor) solid!important;
  color:var(--linkColor)!important;
}
.login-help a,
a.linkTextNormal{
font-family:var(--roboto-condenced);
font-weight:500;
color:var(--linkColor)!important;
font-size:16px;
line-height:16px!important;
padding-bottom:15px;
display:block;
}
.login-help a:hover,
a.linkTextNormal:hover,
.login-help a:focus,
a.linkTextNormal:focus,
.login-help a:active,
a.linkTextNormal:active{
text-decoration:none;
color:var(--linkColor);
}
  .login-help .helptext{
font-family:var(--roboto-condenced);
color:var(--defaultText-color);
font-size:14px;
font-weight:400;
} 
.login-help .userpassword_text{
  font-family:var(--roboto-condenced);
  color:var(--defaultText-color);
  font-size: 14px;
  font-weight:500;
}
#resetsection{
padding-top:20px;
}
.errorHeading,
.defaultHeadingtext{
font-family:var(--roboto-condenced)!important;
color:var(--errorTextColor);
font-size:16px!important;
line-height:16px;
font-weight:700!important;
text-transform:capitalize;
}
.defaultHeadingtext{
  color:#474747;
}
.passwordBox{
background-color:#F2F2F2;
padding:15px;
border-radius:12px;
margin-block:20px;
}
.passwordBox h3,
.passwordBox p{
font-family:var(--roboto-condenced);
color:#474747;
font-weight:700;
font-size:14px;
line-height:16px;
margin: 0;
padding-bottom: 8px;
text-transform: math-auto;
}
.password-rules div{
  font-family:var(--roboto-condenced);
  color:#474747;
  font-size:14px;
  font-weight:400;
}
.passwordBox p{
font-weight:400;
}
.valid::before {
content: '';
background:url('../images/tickgreen.svg') left top no-repeat;
width: 10px;
height: 10px;
display: inline-block;
margin-right: 5px;
}
input.errorClass{
  border-color:var(--errorTextColor)!important;
}
#matchMessage{
  font-family:var(--roboto-condenced);
  font-size:14px;
  font-weight:400;
  color:var(--errorTextColor);
  margin-top: 10px;
  display:block;
}
#matchMessage.success{
  color:var(--linkColor);
}
 .prgrp-login{
 font-family:var(--roboto-condenced);
 font-size:14px;
}

input[type="password"]::placeholder{
	position: relative;
	top: 2px;
}

.attemptCard{
border-radius:8px;
padding:8px 16px;
background-color:var(--errorCard);
}
.attemptCard.success{
background-color:var(--sucessCard);
}
.attemptCard h2,
.attemptCard p{
font-family:var(--roboto-condenced);
font-size:14px;
font-weight:700;
color:#474747;
line-height: 16px;
margin:0px;
padding-inline:0px;
text-transform: none;
padding-block:3px;
}
.attemptCard p{
font-weight:400;
}
.attemptCard p a{
color:#05A8A8;
}
a.helpTextContactus {
font-weight: normal;
font-size: 14px;
line-height: 21px !important;
}
.toggle-password{
bottom: 0;
top: 50%;
}
.loginError .messageText{
border-radius: 8px;
padding: 8px 16px;
background-color: var(--errorCard);
font-size: 12px;
font-weight: 600;
}
.hidden{
  display: none !important;
}
/** .invalid::before {
content: '✖ ';
color: red;
text-decoration: line-through;
}**/
/**Added below change for mobile view all login screens - danish - November 10**/
  @media(max-width:767px){
  .main-container .login-container{  
    width:90%; 
    padding-inline:40px;  
  }
}