@import url('https://fonts.googleapis.com/css?family=Montserrat:200,400,600&subset=latin-ext');

*:focus {outline:0 !important;  -webkit-box-shadow: none !important;  box-shadow: none !important}
::-webkit-input-placeholder {color: #d9d9d9 !important; font-weight: 400;}
:-ms-input-placeholder {color: #d9d9d9 !important; font-weight: 400;}
::-ms-input-placeholder {color: #d9d9d9 !important; font-weight: 400}
::placeholder {color: #d9d9d9 !important; font-weight: 400}

@-webkit-keyframes scaleOut {
	0%   { -webkit-transform: scale(1.4); transform: scale(1.4); }
	100% { -webkit-transform: scale(1); transform: scale(1);  }
}

@keyframes scaleOut {
	0%   { -webkit-transform: scale(1.4); transform: scale(1.4); }
	100% { -webkit-transform: scale(1); transform: scale(1);  }
}

.eye-icon{width: 27px; height: 25px; background-image: url('/admin/images/eye_icon.png'); background-repeat: no-repeat; background-position: center; display: inline-block; position: absolute;bottom: 10px; right: 0; cursor: pointer; z-index: 10;}
.eye-icon.closed{ background-image: url('/admin/images/eye_icon_closed.png');}

.login-panel {background: #fff !important; font-family: 'Montserrat', sans-serif; font-weight: 200; color: #000;}
.login-panel h1{ font-family: 'Montserrat', sans-serif; color: #fff; font-weight: 200; line-height: 120%;}
.login-panel .wrapper{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100vh;}
.form-signin { padding: 0; margin: 0 auto;}
.form-signin .form-signin-heading {font-weight: normal; font-size: 12px;}
.login-panel .form-control {position: relative; height: auto; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.login-panel .form-control:focus {z-index: 2;}
.panel-wrapper input[type="text"],
.panel-wrapper input[type="password"], .panel-wrapper input[type="email"] {color: #000; padding-left: 0; padding-right: 0;border-radius: 0; border: 0; background: none; -webkit-box-shadow: none; box-shadow: none; border-bottom: 1px solid #d7d7d7; display: inline-block; font-size: 16px; font-family: 'Montserrat', sans-serif; margin-top: 30px;}
.login-header.panel {background: none; border: 0; width: auto; -webkit-box-shadow: none; box-shadow: none;}
.login-header div.panel-heading {background: none; border: 0; padding: 0; position: relative; z-index: 9;}
.login-header div.panel-heading h2 {color: #12b1ef; font-size: 30px; font-weight: 200; letter-spacing: 1px; margin: 0;}
.login-panel .submit-button {-webkit-transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000);-o-transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000);transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); width: 100%; background-size: 200% auto; background-image: -webkit-gradient(linear, left top, right top, from(#12b1ef), color-stop(51%, #0096ff), to(#12b1ef)); background-image: -webkit-linear-gradient(left, #12b1ef 0%, #0096ff 51%, #12b1ef 100%); background-image: -o-linear-gradient(left, #12b1ef 0%, #0096ff 51%, #12b1ef 100%); background-image: linear-gradient(to right, #12b1ef 0%, #0096ff 51%, #12b1ef 100%); height: 58px;  border: 0; border-radius: 3px; padding: 0; margin: 0; text-transform: none; font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 2px; color: #fff; text-transform: uppercase;}
.login-panel .submit-button:hover{background-position: right center; -webkit-transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000);}

.form-signin .alert-danger {border: 1px solid #f76b6b; border-width: 1px 0; background: none; color: #df2525; text-align: center; font-size: 14px; margin: 70px auto 0; border-radius: 0; max-width: 80%;}


.form-signin .checkbox-wrapper {position: relative; display: inline-block; margin: 20px 0;}
.form-signin .checkbox-wrapper p {display: inline-block; line-height: 14px; color: #000; font-size: 12px; font-weight: normal;padding: 0; margin: 0; padding-left: 20px; vertical-align: middle;}

.login-panel.loading .panel-image{-webkit-transform: translate3d(-20%,0,0);transform: translate3d(-20%,0,0); opacity: 0; -webkit-transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000);}
.login-panel .panel-image{ -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; -webkit-transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); width: 540px; padding: 70px; height: 100vh; position: relative; background-color: #000; z-index: 1; overflow: hidden}
.login-panel .panel-image:before{content: ''; background-position: center;  -webkit-animation: scaleOut 40s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;  animation: scaleOut 40s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards; background-image: url('/admin/images/login_sideBg.jpg'); background-size: cover; opacity: 0.6; height: 100%; width: 100%; display: inline-block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: -1;}
.login-panel .panel-image:after {content: '';  background-position: center; background-image: -webkit-gradient(linear, left bottom, left top, from(#3888cc), color-stop(20%, #337cba), to(transparent)); background-image: -webkit-linear-gradient(bottom, #3888cc 0%, #337cba 20%, transparent 100%); background-image: -o-linear-gradient(bottom, #3888cc 0%, #337cba 20%, transparent 100%); background-image: linear-gradient(to top, #3888cc 0%, #337cba 20%, transparent 100%); height: 40vh; position: absolute; bottom: 0; left: 0; right: 0; z-index: -1;}
.login-panel .panel-image .content-wrapper{height: 100%;}
.login-panel .panel-wrapper{ margin-left: 180px; padding-right: 300px; position: relative; overflow: hidden}
.login-panel .info-wrapper {position: relative}
.login-panel .info-wrapper-grey{display: none;}
.login-panel .info-wrapper p{color: #fff; padding-left: 40px; font-size: 14px;}
.login-panel .info-wrapper p img{position: absolute; left: 0;}
.login-panel .info-wrapper .support-mail{font-weight: 600; color: #fff;}
.login-panel .bottom-row{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align:  center; -ms-flex-align:  center; align-items:  center}
.login-panel .bottom-row .password-reset, .login-panel .bottom-row .back-to-login{text-decoration: underline; font-size: 12px; background-color: transparent; border: none;     margin: 20px 0;}
.login-panel .input{position: relative}
.login-panel .input .invalid-tooltip{padding: 15px; background-color: #f50034; left: calc(100%  + 40px); top: 0; width: 240px;}
.login-panel .input .invalid-tooltip:after {right: 100%;top: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(136, 183, 213, 0);border-right-color: #f50034;border-width: 10px;margin-top: -10px;}
.login-panel .custom-checkbox label p{color: #000;}

.reset-box {position: absolute;top: 0;width: 100%;}
.reset-box .bottom-row{margin-top: 64px;}
.reset-box .bottom-row .submit-button{width: 230px;}

.login-panel.loading .login-box.active{-webkit-transform: translate3d(0,20%,0);transform: translate3d(0,20%,0); opacity: 0; -webkit-transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000);}
.panel-box{width: 510px;}
.reset-box, .login-box{-webkit-transform: translate3d(-100%,0,0);transform: translate3d(-100%,0,0); opacity: 0; -webkit-transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); padding-left: 5px;}
.reset-box.active, .login-box.active{-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0); opacity: 1; -webkit-transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); -o-transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); transition: 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000); -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s;}

/* CUSTOM CHECKBOX */
.custom-checkbox {
	padding: 0;
}
.custom-checkbox label {
	cursor: pointer;
	font-size: 12px;
	line-height: 18px;
	padding-left: 1.8rem;
	line-height: 140%;
	color: #000;
}
.custom-checkbox .custom-control-label:before {
	position: absolute;
	border-radius: 0;
	top: -1px;
	left: 0;
	width: 18px;
	height: 18px;
	display: inline-block;
	background-color: #fff;
	margin-right: 5px;
	vertical-align: middle;
	margin-bottom: 3px;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
	background-color: #ededed;
	-webkit-box-shadow: none;
	        box-shadow: none;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
	top: 0px;
	left: 0;
	-webkit-box-shadow: none;
	        box-shadow: none;
	width: 18px;
	height: 18px;
	mix-blend-mode: difference;
}
/* FORM FEEDBACK */
.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
	color: #000;
}
.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
	border-color: #d7d7d7;
}
.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
	color: #000;
}
.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
	border-color: #d7d7d7;
	background-color: #fff;
}
.custom-control-input:checked~.custom-control-label::before, .custom-control-input.is-valid~.custom-control-label::before, .was-validated .custom-control-input:valid~.custom-control-label::before, .custom-control-input.is-valid:checked~.custom-control-label::before, .was-validated .custom-control-input:valid:checked~.custom-control-label::before{
	border-color: #d7d7d7 !importat;
}
.form-control.is-invalid, .was-validated .form-control:invalid{
	background-image: none;
}

.was-validated button[type="submit"]{ background-color: #d7d7d7; background-image: none;}

.form-control.is-valid, .was-validated .form-control:valid{border-color: #d7d7d7; background-image: none;}
input:-internal-autofill-previewed, input:-internal-autofill-selected, textarea:-internal-autofill-previewed, textarea:-internal-autofill-selected, select:-internal-autofill-previewed, select:-internal-autofill-selected {
	background-color: transparent !important;
}


@media screen and (max-width: 1300px){
	.login-panel .panel-image{padding: 20px; }
	.login-panel h1{font-size: 24px;}
}

@media screen and (max-width: 1100px){
	.login-panel .logo{height: 65px;}
	.login-panel .wrapper{display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
	.login-panel .panel-image{width: 100%; height: 25vh;}
	.login-panel h1{font-size: 28px;}
	.login-panel h1 br{display: none;}
	.panel-wrapper{padding-top: 30px;}

	.info-wrapper{display: none;}
	.info-wrapper-grey{display: block !important; position: absolute !important; left: 20px;bottom: 0;}
	.info-wrapper-grey p br{display: none;}
	.info-wrapper-grey p, .info-wrapper-grey .support-mail{color: #9b9b9b !important; font-size: 10px;}
	.login-panel .panel-image:after{height: 10vh;}
	.bottom-row{display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;}
	.bottom-row div, .bottom-row button{width: 100%;}
	.password-reset, .back-to-login{text-align: left;}
	.login-panel .bottom-row .password-reset, .login-panel .bottom-row .back-to-login{margin: 10px 0;}
	.form-signin .checkbox-wrapper{margin: 0; margin-top: 20px;}
	.form-signin .checkbox-wrapper p{padding-left: 0;}
	.reset-box .bottom-row .submit-button{width: 100%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2;}
	.reset-box{top: 30px;}
	.reset-box .bottom-row{margin-top: 30px;}

}
@media screen and (max-width: 768px){
	.login-header div.panel-heading h2{font-size: 20px;}
	.panel-box{width: 100%}
	.login-panel .panel-wrapper{padding-right: 0; margin-left: 0px; width: 360px;}
	.login-panel .input .invalid-tooltip{left: 0; top: 100%;}
	.login-panel .input .invalid-tooltip:after{display: none;}

}
@media screen and (max-width: 500px){
	.login-panel .panel-wrapper{ width: 290px;}

}