/*************************************
* custom styles for ELANA Login
*
* Author: Alexander Dikov
* 2016
*
* version 0.1
*
*************************************/

/*************************************
* Site main elements
*
*************************************/
	body {
	    font-family: 'Roboto', sans-serif;
	    font-size: 16px;
	    font-weight: 300;
	    color: #888;
	    line-height: 30px;
	    text-align: center;
	    background-color:#fff;
	}

	strong { font-weight: 500; }

	a, a:hover, a:focus {
		color: #15c;
		text-decoration: none;
	    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
	}

	h1, h2 {
		margin-top: 10px;
		font-size: 38px;
	    font-weight: 100;
	    color: #555;
	    line-height: 50px;
	}

	h3 {
		font-size: 22px;
		font-weight: 500;
		color: #555;
		line-height: 30px;
	}

	img { max-width: 100%; }

/*************************************
* FORM elements
*
*************************************/

	input[type="text"],
	input[type="password"],
	textarea,
	textarea.form-control {
		height: 50px;
	    margin: 0;
	    padding: 0 20px;
	    vertical-align: middle;
	    background: #f8f8f8;
	    border: 3px solid #ddd;
	    font-family: 'Roboto', sans-serif;
	    font-size: 16px;
	    font-weight: 300;
	    line-height: 50px;
	    color: #888;
	    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
	    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
	}

	textarea,
	textarea.form-control {
		padding-top: 10px;
		padding-bottom: 10px;
		line-height: 30px;
	}

	input[type="text"]:focus,
	input[type="password"]:focus,
	textarea:focus,
	textarea.form-control:focus {
		outline: 0;
		background: #fff;
	    border: 3px solid #ccc;
	    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
	}

	input[type="text"]:-moz-placeholder, input[type="password"]:-moz-placeholder,
	textarea:-moz-placeholder, textarea.form-control:-moz-placeholder { color: #888; }

	input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder,
	textarea:-ms-input-placeholder, textarea.form-control:-ms-input-placeholder { color: #888; }

	input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder,
	textarea::-webkit-input-placeholder, textarea.form-control::-webkit-input-placeholder { color: #888; }

	button.btn {
		height: 50px;
	    margin: 0;
	    padding: 0 20px;
	    vertical-align: middle;
	    background: #5cb85c;
	    border: 0;
	    font-family: 'Roboto', sans-serif;
	    font-size: 16px;
	    font-weight: 300;
	    line-height: 50px;
	    color: #fff;
	    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	    text-shadow: none;
	    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
	    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
	}

	button.btn:hover { opacity: 0.6; color: #fff; }

	button.btn:active { outline: 0; opacity: 0.6; color: #fff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }

	button.btn:focus { outline: 0; opacity: 0.6; background: #5cb85c; color: #fff; }

	button.btn:active:focus, button.btn.active:focus { outline: 0; opacity: 0.6; background: #5cb85c; color: #fff; }

	.input-group-addon {
		border: 3px solid #ddd;
	}
	.input-group-addon > .fa {
		color: #777;
	}

	/***** radio *****/
	.radio.radio-inline {
	    margin-top: 0;
	}
	.radio {
	    padding-left: 12px;
	}

	.checkbox input[type="checkbox"],
	.radio input[type="radio"] {
	    opacity: 0;
	    z-index: 1;
	}

	.radio label {
		padding-left:12px;
	}

	.radio label::before {
	    background-color: #fff;
	    border: 1px solid #cccccc;
	    border-radius: 50%;
	    content: "";
	    position: absolute;
	    display: inline-block;
	    height: 17px;
	    width: 17px;
	    left: 0;
	    top: 7px;
	    transition: border 0.15s ease-in-out 0s;
	}

	.radio label::after {
	    background-color: #555555;
	    border-radius: 50%;
	    content: " ";
	    position: absolute;
	    display: inline-block;
	    height: 11px;
	    width: 11px;
	    left: 3px;
	    top: 10px;
	    transform: scale(0, 0);
	    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33) 0s;
	}

	.radio-real input[type="radio"] + label::after { background-color: #5cb85c; }
	.radio-real input[type="radio"]:checked + label::before { border-color: #5cb85c; }
	.radio-real input[type="radio"]:checked + label::after { background-color: #5cb85c; transform: scale(1, 1);}

	.radio-demo input[type="radio"] + label::after { background-color: #f0ad4e; }
	.radio-demo input[type="radio"]:checked + label::before { border-color: #f0ad4e; }
	.radio-demo input[type="radio"]:checked + label::after { background-color: #f0ad4e; transform: scale(1, 1);}

	/***** checkboxes *****/
	.checkbox {
	    padding-left: 20px;
	}

	.checkbox label::before {
		background-color: #fff;
		border: 1px solid #cccccc;
		border-radius: 3px;
		content: "";
		display: inline-block;
		height: 17px;
		left: 0;
		margin-left: -20px;
		position: absolute;
		transition: border 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
		width: 17px;
	}

	.checkbox label::after {
		color: #555555;
		display: inline-block;
		font-size: 11px;
		height: 16px;
		left: 0;
		margin-left: -20px;
		padding-left: 3px;
		padding-top: 1px;
		position: absolute;
		top: 0;
		width: 16px;
	}

	.checkbox label {
		display: inline-block;
		padding-left: 5px;
		position: relative;
		vertical-align: middle;
	}

	input.form-checkbox-agree[type="checkbox"]:checked + label::after,
	input.form-checkbox-saveuser[type="checkbox"]:checked + label::after {
		color: #5cb85c;
		content: "\f00c";
		font-family: "FontAwesome";
	}

	/*input.input-error[type="checkbox"] + label::before {
		border: 1px solid red;
	}*/


	/***** recaptcha *****/
	/*.g-recaptcha > div {
		text-align:center;
		margin: 0 auto;
		width:304px;
	}*/
	

	img.captcha { max-width: none; }

/*************************************
* Other elements
*
*************************************/

	::-moz-selection { background: #5cb85c; color: #fff; text-shadow: none; }
	::selection { background: #5cb85c; color: #fff; text-shadow: none; }


	/***** Buttons *****/
	.btn-link-1 {
		display: inline-block;
		height: 50px;
		margin: 5px;
		padding: 16px 20px 0 20px;
		background: #5cb85c;
		font-size: 16px;
	    font-weight: 300;
	    line-height: 16px;
	    color: #fff;
	    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	}
	.btn-link-1:hover, .btn-link-1:focus, .btn-link-1:active { outline: 0; opacity: 0.6; color: #fff; }

	.btn-link-1 i {
		padding-right: 5px;
		vertical-align: middle;
		font-size: 20px;
		line-height: 20px;
	}

	.btn-link-2 {
		display: inline-block;
		height: 50px;
		margin: 5px;
		padding: 15px 20px 0 20px;
		background: rgba(0, 0, 0, 0.3);
		border: 1px solid #fff;
		font-size: 16px;
	    font-weight: 300;
	    line-height: 16px;
	    color: #fff;
	    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
	}
	.btn-link-2:hover, .btn-link-2:focus,
	.btn-link-2:active, .btn-link-2:active:focus { outline: 0; opacity: 0.6; background: rgba(0, 0, 0, 0.3); color: #fff; }


	/***** Top content *****/

	.inner-bg {
	    padding: 15px 0;
	}

	.top-content .text {
		/*color: #fff;*/
	}

	.top-content .text h1 { /*color: #fff;*/ }

	.top-content .description {
		margin: 10px 0 10px 0;
	}

	.top-content .description p { opacity: 0.8; }

	.top-content .description a {
		color: #fff;
	}
	.top-content .description a:hover,
	.top-content .description a:focus { border-bottom: 1px dotted #fff; }

	.form-box {
		margin-top: 10px;
	}

	.form-top {
		overflow: hidden;
		padding: 0 15px 10px 15px;
		background: #fff;
		border: 1px solid #eee;
		-moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
		text-align: left;
	}

	.form-top-left {
		float: left;
		width: 85%;
		padding-top: 10px;
	}

	.form-top-left h3 { margin-top: 0; }

	.form-top-right {
		float: left;
		width: 15%;
		padding-top: 5px;
		font-size: 52px;
		color: #ddd;
		line-height: 80px;
		text-align: right;
	}

	.form-bottom {
		padding: 15px 15px 15px 15px;
		background: #eee;
		-moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
		text-align: left;
	}

	.form-bottom textarea {
		height: 100px;
	}

	.form-bottom button.btn {
		width: 100%;
	}

	.form-bottom .input-error {
		border-color: red;
	}

	.middle-border {
		min-height: 300px;
		margin-top: 40px;
		border-right: 1px solid #eee;
	}


	.more-links {
		margin-top:25px;
	}

	.more-links > p {
		margin: 0;
	}

	.agreement {
		text-align:left;
	}
	.agreement .checkbox > label,
	.saveuser  .checkbox > label {
		font-size:12px;
		line-height:16px;
	}

 	/***** Logo *****/
 	.img-header-logo {
 		-padding-left:10px;
 	}

 	.header-logo {
 		padding-left:26px;
 		float:left;
 	}

	/***** languages *****/
	.language-choice {
		padding-right:26px;
		float:right;
		margin-top: 30px;
	}

	.language-choice a {
		color: #777;
		font-size:12px;
	}
	.language-choice img {
		border: 3px solid #eee;
	}

	/***** alerts *****/
	.password-security,
	.setpassword-form .alert {
		font-size:12px;
		line-height:1.3;

	}


	/***** Media queries *****/

	@media (min-width: 992px) and (max-width: 1199px) {}

	@media (min-width: 768px) and (max-width: 991px) {}

	@media (max-width: 767px) {

		.middle-border { min-height: auto; margin: 65px 30px 0 30px; border-right: 0;
							border-top: 1px solid #fff; border-top: 1px solid rgba(255, 255, 255, 0.6); }

	}

	@media (max-width: 415px) {

		h1, h2 { font-size: 32px; }

	}