.login-container{
  height: 100vh; 
  background: #dfe6ff
}

.login-container.wb-view{
  background: url(/assets/images/rego-desktop.png) no-repeat center center;
  background-size: cover;
}

.wb-view .btn-purple{
	background: #8618f5 !important;
  border-color: #8618f5 !important;
}

.wb-view .btn-outline-purple{
  border-color: #8618f5 !important;
  color: #8618f5 !important;
}

.wb-view .btn-outline-purple:hover, .wb-view .btn-outline-purple:focus{
  background: #8618f5 !important;
  color: white !important;
}

.wb-view .social-media .social-icon:hover,.wb-view .social-media .social-icon:focus {
    background: #8618f5;
}

.login-container.wb-view:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(132 57 226 / 57%);
}

.login-box{
  max-width: 500px; 
  -webkit-box-shadow: 0px 10px 34px -5px rgba(0, 0, 0, 0.24); 
          box-shadow: 0px 10px 34px -5px rgba(0, 0, 0, 0.24)
}

.login-container.wb-view .login-box{
  background: rgba(255, 255, 255, 0.92) !important;
  padding-bottom: 20px !important;
}

.login-container.wb-view .login-box{
	background: rgba(255, 255, 255, 0.6) !important;
}

.login-container.wb-view .login-box input, .login-container.wb-view .login-box select{
	background: rgba(255, 255, 255, 0.6) !important;
	color: #222 !important;
}

.login-container.wb-view .form-control:focus + .form-control-placeholder, .login-container.wb-view .form-control:valid:not(.ng-empty) + .form-control-placeholder, .login-container.wb-view .form-control:focus + .form-control-placeholder, .login-container.wb-view .form-control:valid:not(.ng-empty) + .form-control-placeholder, .login-container.wb-view .form-control-placeholder.select, .login-container.wb-view .form-control.ng-not-empty + .form-control-placeholder{
	color: #8618f5;
}

.social-media .social-icon {
  display: block;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 16px;
  margin-right: 5px;
  border-radius: 50%;
}

.social-media .social-icon:hover, .social-media .social-icon:focus {
    background: #fc7768;
}

.social-media .social-icon span {
    color: #999999;
}

.social-media .social-icon:hover span, .social-media .social-icon:focus span {
    color: #fff;
}


.social-media .social-icon {
  display: block;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 16px;
  margin-right: 5px;
  border-radius: 50%;
}

.form-control:not(:-moz-placeholder-shown) + .form-control-placeholder{
  -webkit-transform: translate3d(0, -140%, 0);
  transform: translate3d(0, -140%, 0);
  padding: 7px 0 0 0;
  opacity: 1;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: #fc7768;
  font-weight: 700;
}

.form-control:not(:-ms-input-placeholder) + .form-control-placeholder{
  -webkit-transform: translate3d(0, -140%, 0);
  transform: translate3d(0, -140%, 0);
  padding: 7px 0 0 0;
  opacity: 1;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: #fc7768;
  font-weight: 700;
}

.form-control:focus + .form-control-placeholder, .form-control:valid:not(.ng-empty) + .form-control-placeholder,  .form-control:focus + .form-control-placeholder, .form-control:valid:not(.ng-empty) + .form-control-placeholder, .form-control-placeholder.select, .form-control.ng-not-empty + .form-control-placeholder{
  -webkit-transform: translate3d(0, -140%, 0);
  transform: translate3d(0, -140%, 0);
  padding: 7px 0 0 0;
  opacity: 1;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: #fc7768;
  font-weight: 700;
}

.form-control-placeholder small{
  opacity: 0;
}

.transform-0{
  transform: none !important;
}

.block-option {
  width: calc(25% - 12.5px);
  border-radius: 10px;
  margin: 8px 0px;
  padding: 12px 0px;
  background: transparent;
  text-align: left;
  position: relative;
  font-size: 14px;
}
.block-option.exam {
  width: auto;
  padding: 12px 12px;
}

.block-option i {
  width: 40px;
  height: 40px;
  line-height: 38px;
  font-size: 15px;
}

.block-option.selected {
  background: rgb(226.5384615385, 241.5384615385, 253.4615384615) !important;
}

.block-option.selected::after {
  content: "✓";
  position: absolute;
  top: -12.5px;
  right: -12.5px;
  width: 25px;
  height: 25px;
  font-size: 15px;
  text-align: center;
  line-height: 25px;
  color: #fff;
  background: #0d6efd;
  border-radius: 50%;
  z-index: 1;
  font-weight: normal;
}

.form-control:focus + .form-control-placeholder small, .form-control.error-bg + .form-control-placeholder small, .form-control-placeholder.select{
  opacity: 1 !important;
}

.form-control-placeholder{
  position: absolute;
  top: 5px;
  padding: 7px 0 0 15px;
  -webkit-transition: all 400ms;
  -o-transition: all 400ms;
  transition: all 400ms;
  opacity: 0.6;
  pointer-events: none
}

.field-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: rgba(0, 0, 0, 0.3);
}

.form-control.submit{
  background: #4f51ff;
  border-color: #4f51ff;
}



@media (max-width: 600px) {
  .login-container{
    height: auto;
    background: white
  }

  .login-box{
    max-width: 500px;
    -webkit-box-shadow: none;
            box-shadow: none
  }

}

@media (max-width: 768px) {
	.login-container.wb-view{
		background: url('/assets/images/rego-mobile.png') no-repeat center center;
		background-size: cover;
		height: 100vh;
	}

	.login-container.wb-view .login-box{
    padding-bottom: 20px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
	}
}