@import url("custom.css");

hr {
	  border-top: 1px solid #ccc;
}

.signup-panel {
	color:#fff;
	background-color:#1879B9;
	padding: 0 7.5%;	
}
.signin-page {
	 background-image: url(../images/Artwork-BG-Signup.png) ; 
	 background-repeat: no-repeat; 
	 background-position: 50% 50%; 
	 background-size: 105%;	 
}

#signup-panel {
	background-color:#fff;
	color:dark;
	min-height:300px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);	
	padding: 1rem;
}
.signin-panel, .forgot-panel {
	background-color:#fff;
	color:dark;
	min-height:300px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);	
	margin-top: -5%;
	margin-bottom: -5%;
	
}
.signup-content {
	padding: 10rem 0.5rem;
}
.signin-panel {
	padding: 5rem 15%;
}
.forgot-panel {
	padding: 5rem 15%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.forgot-panel {
	padding: 5rem 10% 5rem 8%;
	}
}
.button-panel {
	margin:2rem 0;
}

#btn-signup, #btn-signin {
	padding: 5px 30px;
}

.form-group label {
	font-weight:500;
}

.form-group {
    margin-bottom: 0.5rem;
}

p {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.otp {
	min-width:40px;
}
.captcha {
	/* height:70%;*/
	width:100%;
	margin-top:0.5rem;
}

.width-panel{
	max-width: 100%;
	display:inline-block;
	text-align:justify;
	
}
.sub-width-panel{
	text-align:justify;
	margin:0 auto;
	max-width: 100%;
	display:inline-block;
}
.textContainer{
	text-align:center;
}
@media only screen and (max-width: 499px) {
	.signin-panel {
		min-height:300px;
		box-shadow:none;	
		margin:0;
		padding: 2rem;
	}
	.signup-panel {
		padding:0;
	}
	.signup-content {
		padding: 5rem 2rem;
	}
	.jumbotron {
		padding: 0;
		margin-top:-10px;
	}
	#right-notification {
		margin-right:10px;
	}

}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.otp {
		min-width:36px;
	}
	.signin-panel {
		padding: 2rem 10%;
	}
	h3 {
		font-size:1.3rem;
	}

}
.title {
	font-weight: bold;
}
h4.title {
	padding: 1rem 0;
}
#signup-complete-panel {
	padding: 15% 10%;
}
.button-panel {
	padding: 10px 0;
}
.form-group label {
    color: #6c757d;
}
.forgot_image {
	padding: 4rem 0;
}

.welcome-item:hover{
	background-color: #f8f9fa!important;
}

.welcome-option-item {
	padding: 1.5rem;
}
@media only screen and (max-width: 1199px) {
	.welcome-option-item {
		padding: 1rem;
	}
}

a.binding-option:hover {
	text-decoration:none;
}

.option-text {
	color: #0c2461;
    font-weight: 500;   
}

.option-icon {
	border: 0.2rem solid #c5d44d;
	width:100px;
    height:100px;
    border-radius:50%;
    margin: 1rem;
    padding: 1rem;
    background-color: #fff;
}

.active .option-text{
	font-weight:bold;
}
.active .option-icon {
    background-color: #c5d44d;	
}

.personal-icon {
	margin-top:5px;
	margin-left:2px;
}
.company-icon {
	margin-top:5px;
	margin-left:-5px;
}

.tooltip-inner {
	max-width: 350px;
	width: 350px;
	background-color: white;
	color:black;
	border: #0c2461;
	box-shadow: 1px 1px 2px #333333;
	font-size: 18px;
	text-align: left;
}

#school-welcome-panel {
    background-image: url(../images/book.png);
    background-repeat: no-repeat;
    background-position: 0% 98%;
    background-size: 25%;
}

#gov-welcome-panel {
    background-image: url(../images/hongkongbuildings.png);
    background-repeat: no-repeat;
    background-position: 80% 30%;
    background-size: 0%;
}