.button-row {
	margin-top: 28px;
}

.btn {
	display: inline-block;
	width: 100%;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 11px;
	font-weight: normal;
	line-height: 1.428571429;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.btn-primary {
	color: #ffffff;
	background-color: #2D3C7D;
	border-color: #2D3C7D;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
	.btn-primary.active, .open .dropdown-toggle.btn-primary {
	color: #fff;
	background-color: #3276b1;
	border-color: #285e8e;
}

.btn-default {
	background-color: #fff;
	border: 1px solid #999999;
}

.btn-default:hover, .btn-default:focus, .btn-default:active,
	.btn-default.active, .open .dropdown-toggle.btn-default {
	color: #333;
	background-color: #ebebeb;
	border-color: #adadad;
}

.user-activation-body {
	display: flex;
	/*    background-image: url('../webtech/styles/img/in-bg.png'); */
	background-size: 50% ! important;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 100vh;
	justify-content: center;
	align-items: center;
	padding: 0;
}

html, body {
	min-height:100vh;
    height:auto;
	margin: 0;
}

.user-activation-head {
	font-size: 18px;
	font-weight: bold;
	line-height: 28.75px;
	padding: 15px;
	margin-bottom: 20px;
	margin-top: 8px;
}

.user-activationbox {
	/* 	max-width: 100%; */
	/* 	max-height: 100vh; */
	box-sizing: border-box;
	position: absolute;
	width: 540px;
	top: 50%;
	right: 31%;
	transform: translateY(-50%);
	background: #F7F7F7;
	border: 1px solid rgba(153, 153, 153, 0.3);
	border-radius: 20px;
	text-align: center;
	padding: 40px;
	padding-bottom: 40px;
	padding-top: 40px;
	padding-left: 40px;
	z-index: 1;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
}

.user-activation-logo {
	width: 172px;
	margin: 0 auto;
}

.activation-icon {
	width: 20px;
}

.activation-input {
	width: 100%;
}

.activation-icon-column {
	border: 1px solid #ccc;
}

.form-content {
	margin: 0 auto;
}

.rebutton-style {
	height: 36px;
	font-size: 13px;
}

.has-search .form-control-feedback {
	right: initial;
	left: 0;
	color: #ccc;
	border: 1px solid #ccc;
	padding: 10px;
	padding-bottom: 12px;
	border-radius: 5px;
	width: 100%;
}

.re-slashstyle {
	position: absolute;
	top: 50%;
	right: 27px;
	font-size: 13px;
	transform: translateY(-50%);
	cursor: pointer;
}

.has-search .form-control {
	padding-right: 12px;
	padding-left: 34px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 14px;
	width: 100%;
}

#content {
	margin-left: -3px;
}

@media screen and(max-width: 767px) {
	.user-activationbox {
		position: relative;
		width: 80%;
		top: 50%;
		right: 0px;
		left: 0px;
		transform: translateY(-50%);
		background: #FFFFFF;
		border: 1px solid rgba(153, 153, 153, 0.3);
		border-radius: 5px;
		text-align: center;
		padding: 25px;
	}
}

/* .input-img-wrap { */
/* 	display: flex; */
/* 	align-items: center; */
/* } */

/* .input-img-wrap .input-icon { */
/* 	width: 42px; */
/* 	height: 42px; */
/* 	margin-right: 8px; */
/* } */

/* .input-img-wrap .form-control { */
/* 	flex: 1; */
/* } */
.input-img-wrap .input-with-icon {
	background-image: url("../img/confirmpassword.png");
	background-position: 10px center;
	background-repeat: no-repeat;
	padding-left: 40px;
	background-size: 20px 20px;
}

.buttonstyle {
	margin-top: 66px;
	margin-left: 28px;
}

.re-headstyle {
	margin-left: 202px;
}

.re-labelstyle {
	margin-left: -10px;
}

.re-footerstyle {
	gap: 3px;
	width: 115%
}

.re-rowstyle {
	margin-top: 33px;
}

.passin-style {
	width: 143% ! important;
	margin-left: -43%
}

.passslash-style {
	position: absolute;
	top: 39%;
	right: 25px;
	font-size: 13px;
	transform: translateY(-50%);
	cursor: pointer;
}

.passspan-style {
	font-size: 13px;
	left: -80px;
	position: absolute;
	top: 44px;
}

.passbu1 {
	margin-left: -8px;
	height: 38px;
	font-size: 13px;
	width: 104%
}

.passbu2 {
	margin-left: 5px;
	height: 38px;
	font-size: 13px;
	width: 104%
}

.actbu-style {
	height: 38px;
}

#errorDesc {
	color: red;
	text-align: center;
	font-size: 16px;
	line-height: 1.5;
	padding-top: 40px;
	margin-left: -29px;
}

@media ( max-width : 768px) {
	.user-activationbox {
		box-sizing: border-box;
		position: absolute;
		width: 93% !important;
		top: 50%;
		right: 3.5% !important;
		transform: translateY(-50%);
		background: #F7F7F7;
		border: 1px solid rgba(153, 153, 153, 0.3);
		border-radius: 20px;
		text-align: center;
		padding: 20px !important;
		/* padding-bottom: 32px; */
		/* padding-top: 40px; */
		/* padding-left: 14px; */
		z-index: 1;
		box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
	}
	.user-activation-head {
		font-size: 16px;
		font-weight: bold;
		line-height: 28.75px;
		padding: 15px;
		margin-bottom: 20px;
		margin-top: 8px;
	}
	#content {
		margin-left: -3px;
		font-size: 12px !important;
	}
	.user-activation-logo {
		width: 152px !important;
		margin: 0 auto;
	}
}

#hidebutton{
	margin-top:-3px;
}

#activate{
	margin-left: 9px;
}

#resendCodeBtn{
	margin-left: 5px;
	cursor: pointer;
}

.password-search{
	margin-top:43px;
}

.btn-row{
	margin-top:52px;
}

.forgot-username{
	margin-left:0px;
}

.forgot-row{
	margin-left:1px;
}

.back-to-login-bt{
	margin-left:-31px;
}

.reset-img{
	width: 100%;
}

.user-activation-logo{
	width:150px;
	display:flex;
	align-items:center;
}

.reset-form{
	margin-left:25px;
}

#secPwdErrlbl, #cnfSecPwdErrlbl{
  position: static; 
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: red;
}


.confirm-btn:hover{
	background-color: #1f2c5f;
}
.success-btn:hover{
	background-color:#1f2c5f ;
}

body{
  height:100vh;
  margin:0;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow-x: hidden !important;
  position:relative;  
  z-index:0;
  font-family:'Montserrat',sans-serif;
  background:linear-gradient(
    to right,
    #2D3C7D 50%,
    #ffffff 50%
  );
}

.main-card,
#checkemail-main{
  width:1300px;
  height:auto;
}

.blue-box,
.card-box{
  overflow:hidden;
}
.main-card{
max-height: fit-content;
display:flex;
border-radius:14px;
overflow:visible;
background:rgba(255,255,255,0.65);
}
#checkemail-main{
display:flex;
border-radius:14px;
overflow:visible;
background:rgba(255,255,255,0.65);
box-shadow:0 15px 40px rgba(0,0,0,0.2);
height: 500px !important;
}
.blue-box{
width:50%;
background: #505D93;
position:relative;
padding:40px 60px;
color:white;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.left-content{
  position:absolute;
  top:53%;
  transform:translateY(-50%);
}

.left-content h2{
font-size:26px;
margin-bottom:10px;
}

.left-content p{
font-size:14px;
opacity:0.9;
}

.dots{
position:absolute;
top:100px;
left:70px;
width:110px;
height:100px;
background-image:radial-gradient(white 1.5px,transparent 1.5px);
background-size:14px 14px;
}

.dots2{
top:auto;
bottom:60px;
left:70px;
width:90px;
height:70px;
}
.circle{
position:absolute;
border-radius:50%;
}
.form-group input:focus{
	outline: none;
}

.circle1{
width:160px;
height:160px;
border:3px solid rgba(255,255,255,0.8);
top:-80px;
left:55px;
background-color: transparent;
}
.circle1::after{
	content: '';
    position: absolute;
    width: 130px;
    height: 130px;
    top: 10px;
    left: 12px;
    background-color: #fff;
    border-radius: 50%;
}
.circle2{
width:22px;
height:22px;
background:white;
top:110px;
right:120px;
}

.circle3{
width:40px;
height:40px;
border:2px solid white;
top:170px;
right:170px;
}

.circle3::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    top: 8px;
    left: 8px;
}

.circle4{
width:25px;
height:25px;
background: linear-gradient(180deg, #505D93 0%, #2D3C7D 100%);
bottom:160px;
left:120px;
}

.circle5 {
	position:absolute;
    width: 330px;
    height: 330px;
    border: 3px solid #fff;
    bottom: -175px;
    right: 60px;
}

.circle5::after {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    background: white;
    border-radius: 50%;
    bottom: 65px;
    left: 55px;
}

.circle5::before{
content:'';
position:absolute;
width:25px;
height:25px;
background: linear-gradient(180deg, #505D93 0%, #2D3C7D 100%);
border-radius:50%;
top:60px;
right:14px;
}
.card-box{
width:50%;
padding:30px 40px;
display:flex;
background-color: #F5F6FA;
flex-direction:column;
justify-content:center;
position: relative;
z-index: 11;
}
.checkMail{
	justify-content: flex-start !important;
}
.logo img{
width:130px;
margin-bottom:5px;
}

.card-box h2 {
    margin: 5px 0;
    color: #000;
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}
.resend-code{
	text-align: center;
}
.resend-code span{
	color: #2D3C7D;
	font-weight: 500;
}

.resend-code p{
	color: #000;
	font-weight: 500;
}
.subtext{
font-size:14px;
color:#718096;
margin-bottom:12px;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
margin-top: -15px;
}

.email-link{
font-size:15px;
color:#718096;
margin-bottom:15px;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
margin-top: 15px;
}
.pass-reset{
	display: flex;
	justify-content: center;
}
.form-group{
margin-bottom:18px;
padding-left: 0px !important;
}

.form-group label{
font-size:15px;
color:#718096;
font-weight: 500;
}

.form-group input{
width:100%;
padding:12px;
border:1px solid #d6dbe6;
border-radius:6px;
margin-top:6px;
font-size: 14px;
}

.btn-group{
display:flex;
gap:15px;
margin-top:15px;
width: 100%;
}

.btn-outline{
padding:12px 22px;
border-radius:10px;
border:1px solid #2d3c7d;
background:white;
color:#2d3c7d;
cursor:pointer;
width: 49%;
font-size: 15px;
font-weight: 600;
}
.btn-outline:focus{
	outline: none;
}
.confirm-btn{
padding:12px 25px;
border-radius:10px;
border:none;
background:#2d3c7d;
color:white;
cursor:pointer;
width: 49%;
font-size: 15px;
font-weight: 600;
}
.confirm-btn:focus{
	outline: none;
}
.logo{
	display: flex;
	justify-content: center;
}

.page-wrapper{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow: hidden !important;
  min-height:100vh;
  height:auto;
}

.scale-container{
  transform-origin: center center;
}

body::before{
content:'';
position:absolute;
top:-120px;
right:-80px;
width:310px;
height:310px;
border:35px solid #2D3C7D;
border-radius:50%;
}

body::after{
    content:'';
    position:fixed;
    width:340px;
    height:340px;
    background:#2D3C7D;
    border-radius:50%;
    right:calc(-140px - 17px);
    bottom:-140px;
    z-index:-1;
}
.resend-link{
	color: #000;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	margin-top: 50px;
}
.showbtn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    cursor: pointer;
    z-index: 2;
}
.password-wrapper input {
    width: 100%;
    padding: 12px 60px 12px 12px;
    border: 1px solid #CBD5E0;
    border-radius: 5px;
    font-size: 15px;
}
.password-wrapper input:focus{
	outline: none;
	box-shadow: none;
}
.password-wrapper {
    position: relative;
    width: 100%;
}




/* OVERLAY */
.success-popup-overlay{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.25);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}
.success-popup{
    width:380px;
    background:#fff;
    border-radius:25px;
    padding:60px 30px 30px;
    text-align:center;
    position:relative;
    box-shadow:0 20px 50px rgba(0,0,0,0.2);
    overflow:visible !important;
}

.success-popup::before{
    content:"";
    position:absolute;
    top:-60px;
    left:50%;
    transform:translateX(-50%);
    width:130px;
    height:130px;
    background:#fff;
    border-radius:50%;
    z-index:1;
}
.success-popup::after{
    content:"";
    position:absolute;
    top:-30px;
    left:0;
    width:100%;
    background:#fff;
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    z-index:1;
}
.popup-top-curve {
    position: absolute;
    top: -60px;
    left: 125px;
    height: 120px;
    background: #fff;
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
    z-index: 1;
}
.popup-icon{
    position:absolute;
    top:-45px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
}

.icon-outer{
    width:80px;
    height:80px;
    background:rgba(46, 204, 113, 0.2);
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.icon-inner{
    width:55px;
    height:55px;
    background:#2ECC71;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    font-weight:bold;
}

.popup-content h2{
    margin-top:10px;
    font-size:20px;
    color:#2B4C69;
    font-weight:600;
}

.popup-content p{
    font-size:13px;
    color:#000000;
    margin:15px 0 25px;
    line-height:1.5;
}

.success-btn{
    width:100%;
    padding:10px;
    border:none;
    border-radius:8px;
    background:#2D3C7D;
    color:#fff;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}



@media (max-width: 767px){

body{
    height:auto;
    display:block;
    background:#F5F6FA; 
}

body::before,
body::after{
    display:none;
}

.main-card{
    flex-direction:column;
    width:100%;
    border-radius:0;
     position: relative;
     z-index: 10; 
    overflow: visible;
}
.form-group{
	padding-left: 0px;
}

.blue-box{
    width:100%;
    padding:20px;
    border-radius:0;
    height: 300px;
}
.blue-box{ 
    position: relative; 
}
#checkemail-main{
	flex-direction:column;
    width:100%;
    height: 700px !important;
    border-radius:0;
    padding: 20px;
}
.left-content{
    position:relative;
    text-align:center;
    top: 95px !important;
    left: 0px !important;
}
.page-wrapper {
    display: flex;
    justify-content: center;
    overflow: visible;
    
}
.left-content h2{
    font-size:20px;
}

.left-content p{
    font-size:13px;
}

.dots{
    display:none;
}


.card-box{
    width:100%;
    padding:25px 20px;
}

.logo{
    justify-content:center;
}

.card-box h2{
    font-size:20px;
}

.subtext{
    font-size:13px;
}

.form-group input{
    font-size:14px;
    padding:12px;
}

.btn-group{
    gap:10px;
}

.showbtn{
    font-size:12px;
}
.success-popup{
    width:90%;
    padding:70px 20px 20px;
}
.icon-outer{
    width:70px;
    height:70px;
}

.icon-inner{
    width:50px;
    height:50px;
    font-size:18px;
}

.popup-content h2{
    font-size:17px;
}

.popup-content p{
    font-size:13px;
}

.success-btn{
    font-size:14px;
    padding:12px;
}
.btn-outline {
	font-size: 12px;
	font-weight: 500;
}

.circle2,
.circle3,
.circle4{
    display:none;
}

.circle1{
    width:90px;
    height:90px;
    top:-50px;
    left:20px;
}

.circle1::after{
    width:70px;
    height:70px;
    top:8px;
    left:8px;
}
.circle5{
    width:180px;
    height:180px;
    bottom:-90px;
    right:10px;
}

.circle5::after{
    width:120px;
    height:120px;
    bottom:30px;
    left:30px;
}

.circle5::before{
    width:15px;
    height:15px;
    top:40px;
    right:0px;
}
.scale-container {
    transform: none !important
}
}

@media (max-width: 1200px){
  .main-card,
  #checkemail-main{
    width:100vw;
  }
  .scale-container{
 transform: scale(0.75);
}
}

.scale-container{
 transform: scale(0.75);
}

@media (max-height: 620px){
  .scale-container{
    transform: scale(0.75);
  }
}

@media (min-width: 769px) and (max-width: 1024px){
.btn-group {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    width: 100%;
}	
.confirm-btn {
    font-size: 14px;
    font-weight: 600;
}	
.btn-outline {
    font-size: 13px;
    font-weight: 600;
}
  .form-group{
    display: block !important;
    margin-bottom: 18px !important;
  }

  .form-group label{
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    background: none !important;

    font-size: 14px;
    margin-bottom: 6px;
    color: #333;
    font-weight: 500;
  }

  .form-group input{
    display: block !important;
    width: 100% !important;

    height: 42px;
    padding: 10px 12px;
    font-size: 14px;

    border: 1px solid #d6dbe6;
    border-radius: 6px;
  }
  .scale-container {
    transform: none !important;
}
  .help-block{
    display: block;
    font-size: 12px;
    margin-top: 4px;
    color: red;
  }
  
  .circle3 {
    width: 40px;
    height: 40px;
    border: 2px solid white;
    top: 160px;
    right: 170px;
}

.card-box {
    width: 50% !important;
    padding: 40px 20px !important;
    }
    
    .btn-outline {
    padding: 12px 10px;
    border-radius: 10px;
    border: 1px solid #2d3c7d;
    background: white;
    color: #2d3c7d;
    cursor: pointer;
    width: 49%;
    font-size: 14px;
    font-weight: 600;
}

.subtext {
    font-size: 13px;
    color: #718096;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.confirm-btn {
    padding: 12px 12px;
    border-radius: 10px;
    border: none;
    background: #2d3c7d;
    color: white;
    cursor: pointer;
    width: 49%;
    font-size: 14px;
    font-weight: 600;
}
.success-popup {
    width: 325px;
    padding: 60px 15px 25px;
    }
    .popup-content p {
    font-size: 12px;
    }
    .success-popup {
    width: 320px;
    background: #fff;
    border-radius: 25px;
    padding: 60px 20px 20px;
    }
}
@media (min-width: 768px) and (max-width: 1024px){
	.card-box {
    width: 50%;
    padding: 40px 20px;
    display: flex;
    background-color: #F5F6FA;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 11;
   }
   .subtext {
    font-size: 13px;
    }
   .left-content h2 {
    font-size: 24px;
    margin-bottom: 5px;
    margin-top: 25px;
}
   
.dots {
    position: absolute;
    top: 105px;
    left: 70px;
    width: 100px;
    height: 90px;
    background-image: radial-gradient(white 1.5px, transparent 1.5px);
    background-size: 14px 14px;
}

.success-popup {
    width: 320px;
    background: #fff;
    border-radius: 25px;
    padding: 60px 20px 20px;
    }
	}
@media (max-width: 600px){

  .main-card{
    flex-direction: column;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  }
  .blue-box{
    width: 100%;
    padding: 20px;
    border-radius: 0;
    text-align: center;
  }

  .left-content{
    left: 50px;
    transform: none;
    top: 30% !important;
  }

  .left-content h2{
    font-size: 18px;
  }

  .left-content p{
    font-size: 12px;
  }

  .card-box{
    width: 100%;
    padding: 20px;
  }

  .card-box h2{
    font-size: 18px;
  }

  .subtext{
    font-size: 12px;
  }

  .form-group label{
    font-size: 13px;
    margin-bottom: 5px;
  }

  .form-group input{
    height: 40px;
    font-size: 13px;
    padding: 10px;
  }

  .btn-group{
    flex-direction: row;
    gap: 10px;
  }

  .btn-outline,
  .confirm-btn{
    width: 50%;
    font-size: 14px;
    padding: 10px;
  }

  .dots{
    display: none;
  }
   .circle2,
.circle3,
.circle4{
    display:none;
}

.circle1{
    width:90px;
    height:90px;
    top:-50px;
    left:20px;
}

.circle1::after{
    width:70px;
    height:70px;
    top:8px;
    left:8px;
}
.circle5{
    width:180px;
    height:180px;
    bottom:-110px;
    right:10px;
}

.circle5::after{
    width:120px;
    height:120px;
    bottom:30px;
    left:30px;
}

.circle5::before{
    width:15px;
    height:15px;
    top:40px;
    right:0px;
}
.main-card {
    max-height: fit-content;
    display: flexx;
    border-radius: 14px;
    overflow: visible;
    background: rgba(255, 255, 255, 0.65);
    flex-direction: column;
}
.success-popup {
    width: 320px;
    background: #fff;
    border-radius: 25px;
    padding: 60px 20px 20px;
}
}