.loaderbox2{
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index:999;
  display:none;
  
 
}
.loader2,
.loader2:before,
.loader2:after {
  border-radius: 50%;
  width: 1.0em;
  height: 1.0em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load72 1.8s infinite ease-in-out;
  animation: load72 1.8s infinite ease-in-out;
   
}
.loader2 {
  color: #ffffff;
  font-size: 10px;
  margin: 230px auto;
  margin-right:50px;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
 z-index:9999;
 
  
}
.loader2:before,
.loader2:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader2:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader2:after {
  left: 1.5em;
}
@-webkit-keyframes load72 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load72 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

.errorlbl
{
	display:none; color:#C23321; text-align:center; position:fixed; top:12px; right:0px; left:0px; font-size:1.1em;
	}
.logintop
{
	border-radius:10px 10px 0px 0px;

    padding-left: 20px !important;
	}
.logintop h2
{font-size: 20px;
    padding: 20px 0;
    }	
		
.box {
   position: relative;
   top: 0;
   opacity: 1;
   float: left;
   padding: 10px 30px 10px 30px;
   width: 100%;

   border-radius: 0px 0px 10px 10px;
   transform: scale(1);
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
   z-index: 5;
    box-shadow: 0 0 15px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px -15px -15px);
 
  }
  .intbox {
    position: relative;
    top: 0;
    opacity: 1;
    float: left;
    padding: 10px 30px 10px 30px;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    z-index: 5;
   }
.box.back {
   transform: scale(.95);
   -webkit-transform: scale(.95);
   -ms-transform: scale(.95);
   top: -20px;
   opacity: .8;
   z-index: -1;
}

.box:before {
   content: "";
   width: 100%;
   height: 0px;
   border-radius: 10px;
   position: absolute;
   top: -10px;
   background: rgba(255, 255, 255, .6);
   left: 0;
   transform: scale(.95);
   -webkit-transform: scale(.95);
   -ms-transform: scale(.95);
   z-index: -1;
}

.overbox .title {
   color: #fff;
}

.overbox .title:before {
   background: #fff;
}

.title {
   width: 100%;
   float: left;
   line-height: 36px;
   font-size: 30px;
   font-weight: 700;
   letter-spacing: 2px;
   color: #ED2553;
   position: relative;
}

.title:before {
   content: "";
   width: 5px;
   height: 100%;
   position: absolute;
   top: 0;
   left: -50px;
   background: #ED2553;
}

.input,
.input select,
.input textarea,
.input label,
.input input,
.input .spin,
.button,
.button button .button.login button i.fa,
.material-button .shape:before,
.material-button .shape:after,
.button.login button {
   transition: 300ms cubic-bezier(.4, 0, .2, 1);
   -webkit-transition: 300ms cubic-bezier(.4, 0, .2, 1);
   -ms-transition: 300ms cubic-bezier(.4, 0, .2, 1);
}

.material-button,
.alt-2,
.material-button .shape,
.alt-2 .shape,
.box {
   transition: 400ms cubic-bezier(.4, 0, .2, 1);
   -webkit-transition: 400ms cubic-bezier(.4, 0, .2, 1);
   -ms-transition: 400ms cubic-bezier(.4, 0, .2, 1);
}

.input,
.input label,
.input input,
.input .spin,.input select,.input textarea,
.button,
.button button {
   width: 100%;
   float: left;
}

.input,
.button {
   margin-top: 30px;
   height: 55px;
}

.input,
.input input,.input select,.input textarea,
.button,
.button button {
   position: relative;
}

.input input,.input select {
   height: 50px;
   top: 5px;
   border: none;
   background: transparent;
}
.input textarea
{

   top: 15px;
   border: none;
   background: transparent;
   resize: none;
   }
   .textaria label
{
	padding-bottom:135px;}   
.input select
{outline:0px;
	border:0px;
	padding-left:0px;
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0);
	}
.input select:focus
{outline:0px;
	border:0px;
	padding-left:0px;
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0);
	}	

input[type="date"]::-webkit-inner-spin-button,input[type="date"]::-webkit-datetime-edit,input[type="date"]::-webkit-clear-button{
    display: none;
}
input[type="date"]::-webkit-calendar-picker-indicator{
    position: absolute;
    
    right: 0;
    color: black;
    opacity: 1;
}
input[type="date"]:before {
    content: attr(data-date);
 }	
.input input,
.input label,.input select,.input textarea,
.button button {
   font-family: 'Poppins', sans-serif;
   font-size: 18px;
   color: rgba(0, 0, 0, 0.8);
   font-weight: 300;
}

.input:before,
.input .spin {
   width: 100%;
   height: 1px;
   position: absolute;
   bottom: 0;
   left: 0;
}

.input:before {
   content: "";
   background: rgba(0, 0, 0, 0.1);
   z-index: 3;
}

.input .spin {
   background: #ED2553;
   z-index: 4;
   width: 0;
}

.overbox .input .spin {
   background: rgba(255, 255, 255, 1);
}

.overbox .input:before {
   background: rgba(255, 255, 255, 0.5);
}

.input label{
   position: absolute;
   top: 10px;
   left: 0;
   z-index: 2;
   cursor: pointer;
   line-height: 60px;
}
.input label[for="gender"],.input label[for="dob"],.input label[for="grad"],.input label[for="timezone"],.input label[for="usertype"]
,.input label[for="designation"],.input label[for="examId"],.input label[for="edate"],.input label[for="numOfAttempts"]{
   position: absolute;
   top: 0px;
   left: 0;
   z-index: 2;
   cursor: pointer;
   line-height: 14px;
   font-size: 16px;
}
.button.login {
   width: 60%;
  
   padding:5px;
   height:90px;

}

.button.login button,
.button button {
   width: 100%;
   line-height: 44px;
   left: 0%;
   background-color: transparent;
   border: 3px solid rgba(0, 0, 0, 0.1);
   font-weight: 900;
   font-size: 18px;
   color: rgba(0, 0, 0, 0.2);
}

.button.login {
   margin-top: 10px;
}

.button {
   margin-top: 10px;
}

.button button {
   background-color: #fff;
   color: #ED2553;
   border: none;
}

.button.login button.active {
   border: 3px solid transparent;
   color: #fff !important;
}

.button.login button.active span {
   opacity: 1;
   transform: scale(0);
   -webkit-transform: scale(0);
   -ms-transform: scale(0);
}



.button.login button:hover {
   color: #ED2553;
   border-color: #ED2553;
}

.button {
   margin: 10px 0;
   overflow: hidden;
   z-index: 2;
}

.button button {
   cursor: pointer;
   position: relative;
   z-index: 2;
}

.pass-forgot {
   width: 100%;
   float: left;
   text-align: center;
   color: rgba(0, 0, 0, 0.8);
   font-size: 15px;
   line-height:30px;
    padding-top:10px;
}
.sign-up {
   width: 100%;
   float: left;
   text-align: center;
   color: rgba(0, 0, 0, 0.8);
   font-size: 15px;
   line-height:20px;
}
.sign-up span
{
	color:#F63D48;
	}
div.sign-up2 {
   color: rgba(0, 0, 0, 0.8);
   font-size: 14px;
   line-height:20px;
   padding:10px;
   display:block;
   
}
div.sign-up2 a
{
	color:#F63D48;
	}
/* Create a custom checkbox */
.container4 {
  display: block;
  float:left;
  position: relative;
  padding-left: 35px;
  margin: 6px;

  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container4 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border-radius:4px;
  border:1px solid #C2C2C2;
}

/* On mouse-over, add a grey background color */
.container4:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container4 input:checked ~ .checkmark {
  background-color: #F05226;
   border:1px solid #F05226;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container4 input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container4 .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}.click-efect {
   position: absolute;
   top: 0;
   left: 0;
   background: #ED2553;
   border-radius: 50%;
}

.overbox {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   overflow: inherit;
   border-radius: 10px;
   padding: 60px 50px 40px 50px;
}

.overbox .title,
.overbox .button,
.overbox .input {
   z-index: 111;
   position: relative;
   color: #fff !important;
   display: none;
}

.overbox .title {
   width: 80%;
}

.overbox .input {
   margin-top: 20px;
}

.overbox .input input,
.overbox .input label {
   color: #fff;
}

.overbox .material-button,
.overbox .material-button .shape,
.overbox .alt-2,
.overbox .alt-2 .shape {
   display: block;
}

.material-button,
.alt-2 {
   width: 140px;
   height: 140px;
   border-radius: 50%;
   background: #ED2553;
   position: absolute;
   top: 40px;
   right: -70px;
   cursor: pointer;
   z-index: 100;
   transform: translate(0%, 0%);
   -webkit-transform: translate(0%, 0%);
   -ms-transform: translate(0%, 0%);
}

.material-button .shape,
.alt-2 .shape {
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
}

.material-button .shape:before,
.alt-2 .shape:before,
.material-button .shape:after,
.alt-2 .shape:after {
   content: "";
   background: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(360deg);
   -webkit-transform: translate(-50%, -50%) rotate(360deg);
   -ms-transform: translate(-50%, -50%) rotate(360deg);
}

.material-button .shape:before,
.alt-2 .shape:before {
   width: 25px;
   height: 4px;
}

.material-button .shape:after,
.alt-2 .shape:after {
   height: 25px;
   width: 4px;
}

.material-button.active,
.alt-2.active {
   top: 50%;
   right: 50%;
   transform: translate(50%, -50%) rotate(0deg);
   -webkit-transform: translate(50%, -50%) rotate(0deg);
   -ms-transform: translate(50%, -50%) rotate(0deg);
}


.materialContainer {
   width: 100%;
   max-width: 460px;
   position: absolute;
   top:350px;
   left: 50%;
   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   border:1px solid #000;
}

*,
*:after,
*::before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   text-decoration: none;
   
   outline: none;
}
.hidepc{display:none;}
.input input,
    .input label,.input select,.input textarea,
    .button button {
       font-family: 'Poppins', sans-serif;
       font-size: 18px;
       color: rgba(255, 255, 255, 1);
       font-weight: 300;
    }
    .input select option{color: #333333;}
    .input label
    {color: rgba(255, 255, 255, 0.8);
      }
    .input:before {
      background:  rgba(255, 255, 255, 0.2);
     }
     .overbox .input .spin {
      background: rgba(255, 255, 255, 1);
   }
.signupformdiv .input input,
.signupformdiv .input label,.signupformdiv .input select,.signupformdiv .input textarea,
.signupformdiv .button button {
       font-family: 'Poppins', sans-serif;
       font-size: 18px;
       color: rgba(0, 0, 0, 1);
       font-weight: 400;
    }
.signupformdiv .input select option{color: #333333;}
.signupformdiv .input label
    { color: rgba(0, 0, 0, 0.6);
		font-weight: 400;
      }
.signupformdiv .input:before {
      background:  rgba(0, 0, 0, 0.4);
     }
.signupformdiv .overbox .input .spin {
      background: rgba(0, 0, 0, 1);
   }   
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
   transition: background-color 5000s ease-in-out 0s;
   -webkit-transition: background-color 5000s ease-in-out 0s;
-moz-transition: background-color 5000s ease-in-out 0s;
-ms-transition: background-color 5000s ease-in-out 0s;
-o-transition: background-color 5000s ease-in-out 0s;

   -webkit-text-fill-color: #fd2e50 !important;
}

   .overbox .input:before {
      background: rgba(255, 255, 255, 0.5);
   }
   .input:before {
    content: "";
    background:  rgba(255, 255, 255, 0.2);/*app*/
    z-index: 3;
 }
 
 .input .spin {
    background: #fff;
    z-index: 4;
    width: 0;
 }
 .signupformdiv .input .spin {
    background: #D10D2D;
    z-index: 4;
    width: 0;
 }
 
 .recover .spin {
  background: #ED2553;
  z-index: 4;
  width: 0;
}
.recover:before {
  content: "";
  background:  rgba(0, 0, 0, 0.3);/*app*/
  z-index: 3;
}
.recover label
{color: rgba(0, 0, 0, 0.9);/*app*/

  }

.recover input {
 color:#333;
}
.loginlink{font-size:15px !important;}
.nopaddxs{padding:0px;}
.fl{float:left;}
.fr{float:right;}

@media (max-width: 768px) 
{
  .hidepc{display:block;}
  .hides{display:none;}
	.box
	{
		padding: 10px 20px 10px 20px;
    }
    .boxblog
	{
		padding: 5px !important;
    }
    .boxblog .col-md-12{padding:0px !important;}
    
  }
 .signupformdiv{color:#444;} 
  
  @media (max-width: 480px) 
{
  .hidesx{display:none;}
  .signupformdiv .button.login,.socilformdiv .button.login {height:70px !important;}
  
}