/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.EmpNoContainer,.EmpEmailMblContainer,.CaptchaContainer {
    display: flex;
    position: relative;
    color: black;
}
.EmpNoContainer .EmpNolabel,.EmpEmailMblContainer .EmpEmailMbllabel,.CaptchaContainer .Captchalabel{
    font-size: 15px;
    padding-left: 10px;
    position: absolute;
    top: 13px;
    transition: 0.3s;
    pointer-events: none;
    font-weight: bold;
    color: #42423e;
}
.EmpNoTxtCls,.EmpEmailMblTxtCls,.CaptchaTxtCls{
    outline: none;
    padding: 10px 7px;
    border-radius: 6px;
    font-size: 15px;
    background-color: transparent;
    border: 1px solid #e9e9e9;
    /* text-transform: capitalize; */
}
.EmpNoTxtCls,.EmpEmailMblTxtCls{width: 80%;}
.EmpNoTxtCls:focus,.EmpEmailMblTxtCls:focus,.CaptchaTxtCls:focus{border: 0.1px solid black;}
.EmpNoContainer .EmpNoTxtCls:valid ~ .EmpNolabel,
.EmpNoContainer .EmpNoTxtCls:focus ~ .EmpNolabel {
    transition: 0.3s;
    padding-left: 2px;
    transform: translateY(-35px);
}

.EmpEmailMblContainer .EmpEmailMblTxtCls:valid ~ .EmpEmailMbllabel,
.EmpEmailMblContainer .EmpEmailMblTxtCls:focus ~ .EmpEmailMbllabel {
    transition: 0.3s;
    padding-left: 2px;
    transform: translateY(-35px);
}
.CaptchaContainer .CaptchaTxtCls:valid ~ .Captchalabel,
.CaptchaContainer .CaptchaTxtCls:focus ~ .Captchalabel {
    transition: 0.3s;
    padding-left: 2px;
    transform: translateY(-35px);
}
/* /////////////////////////////////////////////////////////// */
/* body{
    padding: 40px;
} */
.EmpSelfServiceImgAllDivCls{
    padding: 0px 0px 0px 52px;  
}
.EmpSelfServiceHoleAllDivCls{
    /* border: 1px solid black; */
    box-shadow: 1px 2px 9px 6px #efefef;
    padding: 10px;
    border-radius: 10px;
    margin: 2% 3% 0% 3%;
    /* margin: 5%; */
}
.EmpSelfServiceAllDivCls{
    /* border: 1px solid black; */
    padding: 30px 10px 30px 10px; 
    display: flex;
    flex-wrap: wrap;
}
.EmpSelfServiceOneAllDivCls{
    /* border: 1px solid black; */
    width: 50%;
}
.EmpSelfServiceTwoAllDivCls{
    /* border: 1px solid black; */
    width: 50%;
    text-align: center;
}
.EmpSelfServiceOneDivAllDivCls{
    /* border: 1px solid #e5e5e5; */
    border-radius: 10px;
    width: 80%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 1px 2px 9px 6px #efefef;
}
.CmpyLogoEmpLogin{
    width: 210px;
    height: 35px;
}
.CapchaDiv{
    display: flex;
}
#txtNewInput{
    /* background: radial-gradient(#ffffff 20%, #bdbdbd 20%) 0px 0px / 6px 3px, radial-gradient(#5e5b5b 100%, transparent 20%) 80px 19px #000000; */
    background: radial-gradient(#ffffff 20%, #636e4e 20%) 0px 0px / 6px 3px, radial-gradient(#3a491e 100%, transparent 20%) 80px 19px #000000;
    font-family: Arial;
    font-size: 34px;
    width: 125px;
    border: none;
    color: white;
    /* border: 1px solid black; */
}
.ReloadCls{
    width: 10%;
    margin: 2% 0% 0% 0%;
    align-self: center;
}
.imgcaptcha {
    width: 30px;
    /* margin: 3% 0% 0% -60%; */
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}
.EmpSelfServiceDivClsOne{
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    text-transform: capitalize;
    color: #3d4a1e;
    padding: 28px 0px 28px 0px;
    width: 100%;
}
.EmpNoTxtCls{text-transform: uppercase;}
.EmpNoContainer, .EmpEmailMblContainer{width: 100%;padding-left: 80px;margin-bottom: 5%;margin-top: 2%;}
.EmpSelfServiceDivClsFive{
    padding-left: 80px;
    margin-bottom: 0%;
    width: 41%;
    margin-bottom: 0%;
    margin-top: 2%;
}
.EmpSelfServiceDivClsFour{
    margin-bottom: 0%;
    border-radius: 6px;
    /* border: 1px solid #e9e9e9; */
    width: 32%;
    margin-bottom: 0%;
    margin-top: 2%;
}
.EmpSelfServiceDivClsSix{
    width: 100%;
    text-align: center;
}
.CaptchaTxtCls{
    width: 80%;
}
.ContinueBtnCls{
    width: 70%;
    padding: 8px 0px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    background-color: #3a491e;
    color: white;
    border-radius: 4px;
    border: none;
}
.EmpSelfServiceDivClsSix{
    padding: 40px 0px 40px 0px;
}
.EmpLogInGifImgCls{
    width: 595px
}
.EmpLogInNotesDivCls{
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 1% auto 0% auto;
    text-align: justify;
}
.EmpLogInNotesTwoDivCls{
    font-size: 14px;
    font-weight: bold;
    color: #384a1e;
}
/* ///////////////////////////OTP Box/////////////////// */
.otp-container {
    display: flex;
    justify-content: center;
    padding: 20px 0px;
}
.OTPmsgDiv div {
    text-align: center;
}
.otp-box {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 5px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}
.OtpMainDiv {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
}
.OTPmsgTxtDiv{margin: auto;}
.OTPnum{margin: auto;width: 100%;}
.TimerDivCls {
    font-size: 16px;
    font-weight: bold;
    color: #4e4747;
}
.OTPmsgTxtDiv div:nth-child(2){
    padding: 10px 0px;
}
.ResentCls {
    text-align: center;
    width: 100%;
    padding: 20px 0px;
}
.TimerDivID {
    color: #0962bf;
}
.ResentBtnCls{
    border: none;
    background: none;
    color: #0962bf;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.ResentBtnCls:hover{
    color: #0962bf;
    cursor: pointer;
    text-decoration: underline;
}
/* ///////////////////////////////Alert Mask////////////////////////////// */
.SidePopalert {
    position: fixed;
    top: 20px; 
    right: -400px; 
    padding: 15px;
    background-color:white; 
    /* color: white; */
    width: 20%;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: right 0.5s ease, opacity 0.5s ease; 
    opacity: 1; 
    z-index: 9999999;
}
.closebtn {
    /* margin-left: 15px; */
    color: red;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
}
.error-message {
    color: #ff4444;
    font-size: 16px;
    margin-top: 4px;
    display: none;
}
.field-success-message {
    color: #00c853;
    font-size: 12px;
    margin-top: 4px;
    display: none;
}
.error{
    border:1px solid  red;
}
.Message-pop-up{
    font-weight: bold;
    color: #084a8c;
    font-size: 16px;
}
@media (min-width: 250px)  and (max-width:349px){
    .EmpSelfServiceHoleAllDivCls{padding: 0px;margin: 0%;box-shadow: 0px 0px 0px 0px #efefef;}
    .EmpSelfServiceImgAllDivCls,.EmpSelfServiceAllDivCls {padding: 0px 0px 0px 0px;}
    .CmpyLogoEmpLogin {width: 120px;height: 20px;}
    .EmpSelfServiceTwoAllDivCls {width: 100%;}
    .EmpLogInGifImgCls {width: 170px;}
    .EmpSelfServiceOneAllDivCls {width: 100%;}
    .EmpSelfServiceOneDivAllDivCls {width: 100%;}
    .EmpNoContainer, .EmpEmailMblContainer {padding-left: 6px;}
    .EmpSelfServiceDivClsFive,.EmpSelfServiceDivClsFour {padding-left: 6px;width: 100%;}
    .SidePopalert {width: 70%;}
    .EmpSelfServiceDivClsOne {padding: 12px 0px 12px 0px;font-size: 20px;}
    .EmpLogInNotesDivCls{width: 100%;}
    .EmpLogInNotesTwoDivCls {font-size: 12px;}
    .OTPmsgTxtDiv div:nth-child(1),.OTPmsgTxtDiv div:nth-child(2) {text-align: center;}
    .otp-box {width: 40px;height: 40px;}
    .EmpSelfServiceDivClsOneTxt{display: none;}
    .EmpSelfServiceDivClsSix {padding: 8px 0px 8px 0px;}
    .ContinueBtnCls {width: 96%;}
    .EmpNoContainer .EmpNolabel, .EmpEmailMblContainer .EmpEmailMbllabel, .CaptchaContainer .Captchalabel {font-size: 12px;}
    .EmpNoContainer, .EmpEmailMblContainer {padding-left: 10px;}
    .EmpSelfServiceDivClsFive {padding-left: 10px;width: 45%;}
    .EmpNoTxtCls, .EmpEmailMblTxtCls {width: 90%;}
    .ContinueBtnCls {width: 95%;}
    .EmpNoContainer, .EmpEmailMblContainer,.EmpSelfServiceDivClsFive{margin-top: 5%;}
    .EmpSelfServiceDivClsFour{    margin-top: 4%;}
}
/* /////////////////////////////////////////////////////// */
@media (min-width: 350px)  and (max-width:700px){
    .EmpSelfServiceDivClsFour{    margin-top: 4%;}
    .EmpNoContainer, .EmpEmailMblContainer,.EmpSelfServiceDivClsFive {margin-top: 5%;}
    .ContinueBtnCls {width: 95%;}
    .EmpNoTxtCls, .EmpEmailMblTxtCls {width: 90%;}
    .EmpNoContainer .EmpNolabel, .EmpEmailMblContainer .EmpEmailMbllabel, .CaptchaContainer .Captchalabel {font-size: 12px;}
    .EmpSelfServiceHoleAllDivCls{padding: 0px;margin: 0%;box-shadow: 0px 0px 0px 0px #efefef;}
    .EmpSelfServiceImgAllDivCls,.EmpSelfServiceAllDivCls {padding: 0px 0px 0px 0px;}
    .CmpyLogoEmpLogin {width: 120px;height: 20px;}
    .EmpSelfServiceTwoAllDivCls {width: 100%;}
    .EmpLogInGifImgCls {width: 250px;}
    .EmpSelfServiceOneAllDivCls {width: 100%;}
    .EmpSelfServiceOneDivAllDivCls {width: 100%;}
    .EmpNoContainer, .EmpEmailMblContainer {padding-left: 10px;}
    .EmpSelfServiceDivClsFive {padding-left: 10px;width: 45%;}
    .SidePopalert {width: 50%;}
    .EmpSelfServiceDivClsOne {padding: 12px 0px 12px 0px;font-size: 20px;}
    .EmpLogInNotesDivCls{width: 100%;}
    .EmpLogInNotesTwoDivCls {font-size: 12px;}
    .OTPmsgTxtDiv div:nth-child(1),.OTPmsgTxtDiv div:nth-child(2) {text-align: center;}
    .otp-box {width: 40px;height: 40px;}
    .EmpSelfServiceDivClsOneTxt{display: none;}
}
@media (min-width: 701px) and (max-width: 1023px){
    .EmpSelfServiceHoleAllDivCls {padding: 0px;margin: 0%;justify-content: center;}
    .EmpSelfServiceImgAllDivCls {padding: 0px 0px 0px 0px;}
    .EmpSelfServiceAllDivCls {padding: 0px 0px 0px 0px;justify-content: center;}
    .EmpSelfServiceTwoAllDivCls {width: 100%;}
    .EmpLogInGifImgCls {width: 90%;height: 450px;}
    .EmpSelfServiceOneAllDivCls {        width: 80%;margin: 3% 0% 0% 0%;}
    .EmpSelfServiceOneDivAllDivCls {width: 100%;margin: 0% 0% 4% 0%;}
    .EmpSelfServiceDivClsOne {padding: 8px 0px 8px 0px;}
    .EmpNoContainer, .EmpEmailMblContainer {padding-left: 35px;margin-bottom: 3%;margin-top: 5%;}
    .EmpSelfServiceDivClsFive {padding-left: 36px;margin-top: 5%;}
    .EmpSelfServiceDivClsSix {padding: 20px 0px;}
    .EmpLogInNotesDivCls {width: 99%;margin: 5% auto 5% auto;font-size: 20px;}
    .EmpLogInNotesTwoDivCls {font-size: 16px;}
    .TxtCaptureCls{width: 110px;font-size: 28px;}
    .EmpSelfServiceDivClsFour{margin-top: 6%;}
    .SidePopalert{width: 46%;right: -510px;}
    .OTPmsgTxtDiv div:nth-child(1),.OTPmsgTxtDiv div:nth-child(2) {text-align: center;font-size: 20px;}
    .CmpyLogoEmpLogin {top: 0;width: 150px;height: 27px;position: absolute;margin-top: 1%;}
    .EmpSelfServiceDivClsOneTxt {margin: 3% 0% 3% 0%!important;}
    .ContinueBtnCls {width: 88%;}
    .otp-box {width: 60px;height: 60px;}
}
@media(min-width:1024px) and (max-width: 1030px){
    .EmpLogInGifImgCls {width: 430px;}
    .EmpSelfServiceAllDivCls {padding: 0px 0px 0px 0px;}
    .EmpSelfServiceImgAllDivCls {padding: 0px 0px 0px 0px;}
    .EmpSelfServiceOneDivAllDivCls {width: 100%;}
    .EmpSelfServiceDivClsOne {padding: 12px 0px 12px 0px;}
    .OTPmsgTxtDiv {text-align: center;}
    .EmpLogInNotesDivCls {width: 98%;margin: 0% auto 0% auto;}
}