﻿/* =========== text decoration end size =============*/

.form-control, output { color:#000}

.font-green-meadow {color: #2bbdb9!important;}
.bg-green-meadow {background: #2bbdb9!important;}
.border-after-green-meadow:after, .border-before-green-meadow:before, .border-green-meadow {border-color: #2bbdb9!important;}
.btn.green-meadow:not(.btn-outline) { color: #FFF; background-color: #2bbdb9;border-color: #2bbdb9;}
.btn.green-meadow:not(.btn-outline).active.focus, 
.btn.green-meadow:not(.btn-outline).active:focus, 
.btn.green-meadow:not(.btn-outline).active:hover, 
.btn.green-meadow:not(.btn-outline):active.focus, 
.btn.green-meadow:not(.btn-outline):active:focus, 
.btn.green-meadow:not(.btn-outline):active:hover, 
.btn.green-meadow:not(.btn-outline):focus, 
.btn.green-meadow:not(.btn-outline).focus,
.btn.green-meadow:not(.btn-outline):active, 
.btn.green-meadow:not(.btn-outline).active,
.btn.green-meadow:not(.btn-outline):hover,
.open > .btn.green-meadow:not(.btn-outline).dropdown-toggle.focus, 
.open > .btn.green-meadow:not(.btn-outline).dropdown-toggle:focus, 
.open > .btn.green-meadow:not(.btn-outline).dropdown-toggle:hover,
.open > .btn.green-meadow:not(.btn-outline).dropdown-toggle{ color: #FFF; background-color: #28b0ac; border-color: #28b0ac;}
.btn.btn-outline.green-meadow.active,
.btn.btn-outline.green-meadow:active,
.btn.btn-outline.green-meadow:active:focus,
.btn.btn-outline.green-meadow:active:hover,
/*.btn.btn-outline.green-meadow:focus,
.btn.btn-outline.green-meadow:hover {    border-color: #28b0ac;color: #FFF;background-color: #28b0ac;}
.btn:not(.md-skip):not(.bs-select-all):not(.bs-deselect-all) { border-radius:3px; box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1), 0 0px 0px rgba(0, 0, 0, 0.18);}
.btn:not(.md-skip):not(.bs-select-all):not(.bs-deselect-all).btn-lg { padding:12px 26px 11px 26px}
.form-group.form-md-line-input{margin: 0 0 20px 0; padding-top:24px;}
label { font-size:14px;}
.form-group.form-md-line-input.combo-form-md-line { padding-top:0;}
.form-group.form-md-line-input .form-control { border:1px solid #cedcdc; background:#fff; height:48px; font-size:15px; border-radius:3px; padding-left:12px; color:#000; padding-right:12px;}
.form-group.form-md-line-input textarea.form-control { height:auto}
.form-group.form-md-line-input .form-control:focus{border-color:#337ab7}
.form-group.form-md-line-input.form-md-floating-label .form-control ~ label { left:12px; top:38px; font-size:15px; transition:0.3s ease all; color:rgba(0,0,0,0.6); z-index:4}
.form-group.form-md-line-input.form-md-floating-label .form-control[readonly] ~ label,
.form-group.form-md-line-input.form-md-floating-label .form-control.edited ~ label,
.form-group.form-md-line-input.form-md-floating-label .form-control.form-control-static ~ label,
.form-group.form-md-line-input.form-md-floating-label .form-control:focus:not([readonly]) ~ label,
.form-group.form-md-line-input.form-md-floating-label .form-control.focus:not([readonly]) ~ label 
{ top:0px; left:0; color:#555; font-size:14px;}
*/
.custom-login { margin:auto !important; background:#f5f5f5 !important}
.user-login-5 .login-bg { background-color:#222b2b; background-size:cover; background-position: center center; }
.custom-login .custom-login-logo { margin-top:0; position:absolute; width:100%; padding:20px;}
.login-footer { left:0;}
.custom-login-content, .custom-login-caption { display:table; height:100vh; position:relative }
.custom-login-caption { width:100%; min-height:100vh; margin:auto;}
.login-body, .custom-login-caption-content { display:table-cell; vertical-align:middle; padding-bottom:70px; padding-top:60px;}
.custom-login-caption-body { padding:20px; margin:auto; max-width:540px;}
.custom-login-caption-body > h3 { font-weight:600; font-size:34px;}
.custom-login-caption-body > p { font-size:20px;}
.custom-login-caption-body img { max-width:100%; width:100%;}
/*.custom-login-caption-body > .btn:not(.md-skip):not(.bs-select-all):not(.bs-deselect-all) { box-shadow:0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);}*/
.login-body-custom { max-width:480px; width:100%; margin:auto; padding:0 20px;}
.login .language-switch-area {padding-left:20px; text-align: left;}
.user-login-5 .login-container .login-copyright{padding: 0 20px;}
.login-body-custom .btn:not(.md-skip):not(.bs-select-all):not(.bs-deselect-all).btn-lg { padding-top:20px; padding-bottom:17px}
.register-form .progress { margin-bottom:0; position:absolute; bottom:-4px; height:6px; left:0; right:0; z-index:6; background:none;}
/*.register-form .password-verdict:before { content:"Password strength: "}*/
.register-form .password-verdict { position:absolute; bottom:-20px; right:0;}
.register-form .password-strenth { position:relative}
.user-login-5 .custom-form-group.has-error { border-bottom: 2px solid #ed6b75 !important; }
.user-login-5 .custom-form-group.valid { border-bottom: 1px solid #a0a9b4 !important; }
.hike-padd-right-20 { padding-right:20px}
/*=========== login animation start ===========*/
/*.page-load { border:0px solid blue;}
.page-load-caption-1, .page-load-caption-2, .page-load-caption-3 { border:0px solid red; padding: 10px; width: 460px; margin: auto; text-align: center; position: absolute; opacity: 0; font-size:28px; font-weight:600; left:calc(50% - 230px)}
	.page-load-caption-1 { animation: slide 5s; animation-delay: 0s}
	.page-load-caption-2 { animation: slide 5s; animation-delay: 5s}
	.page-load-caption-3 {animation: abc4 5s; animation-delay: 10s;  animation-fill-mode: forwards;}
	
@keyframes slide {
	0% { transform: translateY(30px); opacity: 0 }
	30%, 60%{transform: translateY(0px); opacity: 1;}
	100% { transform: translateY(-50px); opacity: 0 }
}
@keyframes abc4 {
	0% { transform: translateY(30px); opacity: 0 }
	30%, 100%{transform: translateY(0px); opacity: 1}
}*/
.page-load { border:0px solid blue; padding-top:20px}
.page-load-caption-1, .page-load-caption-2, .page-load-caption-3, .page-load-caption-4 { border:0px solid red; padding: 10px; width: 460px; margin: auto; text-align: center; position: absolute; opacity: 0; 
                                                                   font-size:28px; font-weight:600; left:calc(50% - 230px)}
	.page-load-caption-1 { animation: slide 5s; animation-delay: 0s}
	.page-load-caption-2 { animation: slide 5s; animation-delay: 5s}
	.page-load-caption-3 { animation: slide 5s; animation-delay: 10s}
	.page-load-caption-4 {animation: abc4 5s; animation-delay: 15s;  animation-fill-mode: forwards;}
	
@keyframes slide {
	0% { transform: translateY(30px); opacity: 0 }
	30%, 60%{transform: translateY(0px); opacity: 1;}
	100% { transform: translateY(-50px); opacity: 0 }
}
@keyframes abc4 {
	0% { transform: translateY(30px); opacity: 0 }
	30%, 100%{transform: translateY(0px); opacity: 1}
}
/*=========== login animation end =============*/




/* custom input only for login page start*/
.custom-form-controller.form-group.form-md-line-input { padding-top:0px;}
.custom-form-controller { /*border:1px solid #d5d5d5; background:#fff;*/  /*padding:10px 10px 0px 10px;*/}
.custom-form-controller.form-group.form-md-line-input .form-control { border:1px solid #d5d5d5; background:#fff;  padding:30px 10px 10px 12px; height:60px; width:100% !important}
.custom-form-controller.form-group.form-md-line-input .form-control:focus{border-color:#2bbdb9}
.custom-form-controller.form-group.form-md-line-input.form-md-floating-label .form-control ~ label { left:10px; top:20px;}

.custom-form-controller.form-group.form-md-line-input .form-control.edited:not([readonly]) ~ label:after, 
.custom-form-controller.form-group.form-md-line-input .form-control.edited:not([readonly]) ~ .form-control-focus:after, 
.custom-form-controller.form-group.form-md-line-input .form-control:focus:not([readonly]) ~ label:after, 
.custom-form-controller.form-group.form-md-line-input .form-control:focus:not([readonly]) ~ .form-control-focus:after 
{ background:none;}
.custom-form-controller.form-group.form-md-line-input .form-control:focus:not([readonly]) ~ label:after { background:none;}

.custom-form-controller.form-group.form-md-line-input .form-control[readonly] ~ label,
.custom-form-controller.form-group.form-md-line-input .form-control.edited ~ label,
.custom-form-controller.form-group.form-md-line-input .form-control.form-control-static ~ label,
.custom-form-controller.form-group.form-md-line-input .form-control:focus:not([readonly]) ~ label,
.custom-form-controller.form-group.form-md-line-input .form-control.focus:not([readonly]) ~ label 
{ top:5px; left:12px}

.custom-group.custom-form-controller.form-group.form-md-line-input .form-control { padding-right:100px}

.custom-input-addon, .custom-link-addon { position:absolute; top:22px; right:10px; transition: 0.2s ease all;}

.custom-form-controller.form-group.form-md-line-input .form-control[readonly] ~ .custom-input-addon,
.custom-form-controller.form-group.form-md-line-input .form-control.edited ~ .custom-input-addon,
.custom-form-controller.form-group.form-md-line-input .form-control.form-control-static ~ .custom-input-addon,
.custom-form-controller.form-group.form-md-line-input .form-control:focus:not([readonly]) ~ .custom-input-addon,
.custom-form-controller.form-group.form-md-line-input .form-control.focus:not([readonly]) ~ .custom-input-addon 
{ top:31px;}

/*.sweet-alert.swal-dark .cancel, .sweet-alert.sweet-alert-info .cancel{ background-color: #2bbdb9 !important;}
.sweet-alert.swal-dark .confirm, .sweet-alert.error .confirm, .sweet-alert.sweet-alert-info .confirm { background-color: #2f353b !important; }*/

.sweet-alert.sweet-alert-info { padding-bottom:35px;}
.sweet-alert.sweet-alert-info .icon.warning { display:none !important}

.sweet-alert p{font-size: 18px; color: #000; margin-bottom: 20px;}
.sweet-alert button{margin-bottom: 20px;}

[data-custom-class="error"] p{
  color:red; font-size:18px; font-weight: 400; line-height: 27px;
}
[data-custom-class="error"] h2{
  color:red;
}

.blockUI.blockOverlay { opacity: 0 !important;}

.custom-input-addon .tooltip { min-width:150px;}

@media (max-width: 1023px) {
    .user-login-5 .col-md-push-4  { left:0%; }
    .user-login-5 .col-md-pull-8 { right:0%; }
    .user-login-5 .login-container > .login-footer { position:absolute; margin-top:10px; padding-bottom:10px;    }
}
@media (max-width: 440px) {
    .forget-password { margin-top: 0px; }
}