/**
 * Boostrap Core Framework Overrides
 * ========================================================================== */
 
 #login-background .container { max-width: 100%; width: 100%; }
.centered { text-align: center; } 
 
.no-pad { padding: 0px; margin: 0px; }
.no-pad-left { padding-left: 0px; margin-left: 0px; }
.no-pad-right { padding-right: 0px; margin-right: 0px; }

body { background-color: #fff; font-family: 'Poppins', sans-serif; }

h2 { font-family: 'Poppins', sans-serif; }
h3 { font-family: 'Poppins', sans-serif; }
h4 { font-family: 'Poppins', sans-serif; }
h5 { font-family: 'Poppins', sans-serif; }
h6 { font-family: 'Poppins', sans-serif; }
p { font-family: 'Poppins', sans-serif; }
a { text-decoration: none; }

.btn { font-size: 18px; line-height: 18px; font-weight: 500; border-radius: 10px; padding: 10px 30px 9px 30px; text-transform: uppercase; box-shadow: none; font-family: 'Poppins', sans-serif; }

.btn-yellow { background: #ffcc03; border-color: #ffcc03; color: #ffffff; width: 100%; }
.btn-yellow:hover { background: #ffb403; border-color: #ffb403; color: #ffffff; }
.btn-yellow:focus { color: #ffffff; background: #ffb403; }

.btn-facebook { background: #355c9b; border-color: #355c9b; color: #ffffff; width: 100%; line-height: 26px; font-weight: 300; margin-bottom: 15px; }
.btn-facebook:hover { background: #2f5086; border-color: #2f5086; color: #ffffff; }
.btn-facebook:focus { color: #ffffff; background: #2f5086; }
.btn-facebook span { background: #ffffff; border-radius: 50%; line-height: 20px; width: 23px; height: 23px; display: inline-block; }
.btn-facebook span i { color: #355c9b; vertical-align: middle; font-size: 16px; }

.btn-google { background: #e14c34; border-color: #e14c34; color: #ffffff; line-height: 26px; width: 100%; font-weight: 300; }
.btn-google:hover { background: #d7442d; border-color: #d7442d; color: #ffffff; }
.btn-google:focus { color: #ffffff; background: #d7442d; }
.btn-google span { background: #ffffff; border-radius: 50%; line-height: 20px; width: 23px; height: 23px; display: inline-block; }
.btn-google span i { color: #e14c34; vertical-align: middle; font-size: 16px; }

.btn-yellow-line { color: #666666; font-size: 20px; line-height: 26px; font-weight: 700; border-bottom: 3px #fff solid; border-radius: 0px; padding: 0px 0px 5px 0px; text-transform: auto; }
.btn-yellow-line:hover { color: #ffcc03; border-bottom: 3px #ffcc03 solid; box-shadow: none; }
.btn-yellow-line.active { color: #ffcc03; border-bottom: 3px #ffcc03 solid; box-shadow: none; }

.btn-blue { background: #00689d; color: #fff!important; border-color: #00689d; }
.btn-blue:hover { background: #045b87!important; border-color: #045b87; color: #fff!important; }

.btn-blue-keyline { background: none; color: #00689d!important; border-color: #00689d; }
.btn-blue-keyline:hover { background: #00689d!important; border-color: #00689d; color: #fff!important; }

.btn-yellow-line.left { float: left; }
.btn-yellow-line.right { float: right; }

a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; }

/**
 * Error Panel
 * ========================================================================== */

#login-background .alert.alert-danger { color: #cc0000; font-size: 16px; font-weight: 600; border: 1px #cc0000 solid; padding: 15px; margin-bottom: 16px; }
    #login-background .alert.alert-danger h2 { color: #cc0000; font-size: 25px; line-height: 32px; margin: 0px 0px 4px 0px; }
    #login-background .alert.alert-danger p { color: #d94343; margin: 0px; }
    #login-background .alert.alert-danger .close { font-size: 25px; opacity: 0.4; top: 0px; right: 0px; display: none; }

#login-background .alert.alert-error { background: none; color: #cc0000; font-size: 16px; font-weight: 600; border: none; border-radius: 0px; padding: 0px 0px 0px 0px; margin-bottom: 12px; }
	#login-background .alert.alert-error .close { font-size: 25px; opacity: 0.4; top: 0px; right: 0px; display: none; }


/**
 * Login
 * ========================================================================== */

#login-background { background: url(../img/digital-cyberspace-data-network-connections.jpg) 50px top no-repeat; background-size: cover; height: 100vh; }
#login-background .container { width: 100%; max-width: 100%; padding: 0px; }
#login-background .row { width: 100%; max-width: 100%; padding: 0px; }

#login-background.cover { min-height: 1300px; }
    #login-background.cover .login-content { min-height: 1300px; }

#login-background .login-content { background: #fff; padding: 40px 100px 50px 100px; max-width: 540px; min-height: 600px;  height: 100vh; }
    #login-background .login-content .icon { width: 90px; margin-bottom: 30px; }
    #login-background .login-content .logo { width: 120px; margin-top: 100px; }
    #login-background .login-content h2 { color: #244567; font-size: 35px; line-height: 40px; font-weight: 600; margin: 0px 0px 8px 0px; }
    #login-background .login-content h3 { color: #7ccfda; font-size: 21px; line-height: 26px; font-weight: 600; margin: 0px 0px 36px 0px; }
    #login-background .login-content p { color: #666; font-size: 16px; line-height: 22px; font-weight: 500; margin: 0px 0px 10px 0px; }
    #login-background .login-content p a { color: #7ccfda; }
    #login-background .login-content p a:hover { color: #61b5c0 }
    #login-background .login-content label { color: #999; font-size: 16px; font-weight: 400; }
    #login-background .login-content .form-control { font-size: 16px; height: 40px; }
    #login-background .login-content form { margin-top: 0px; margin-bottom: 70px; }
    #login-background .login-content .btn { min-width: 100%; margin-bottom: 15px; }
    #login-background .login-content .btn:last-child { margin-right: 0px; }
    #login-background .login-content h4 { color: #333; font-size: 15px; line-height: 22px; font-weight: 300; margin: 22px 0px 25px 0px; }
    #login-background .login-content h4 a { color: #333; }
    #login-background .login-content h4 a:hover { color: #0099cc; }
    #login-background .login-content h4.title { color: #333333; font-size: 24px; line-height: 32px; font-weight: 600; margin: 80px 0px 225px 0px; }
    #login-background .login-content h5 { color: #666; font-size: 14px; line-height: 20px; font-weight: 300; margin: 0px 0px 40px 0px; }
    #login-background .login-content h5 a { color: #666; }
    #login-background .login-content h5 a:hover { color: #0099cc; }
    #login-background .login-content .btn-blue { margin-top: 10px; }
    #login-background .login-content .form-group { position: relative; }
    .error { color: #cc0000!important; font-weight: 600!important; }

    .field-error { border-color: #cc0000!important; }
    .is-invalid { border-color: #cc0000!important; }
    .checkbox-is-invalid label { color: #cc0000!important; }
    .invalid-feedback { color: #cc0000; padding-top: 5px; display: block; }
        

    .togglePassword i { color: #999; font-size: 22px; line-height: 38px; cursor: pointer; position: absolute; top: 0px; right: 0px; height: 40px; width: 35px; pointer-events: initial;  z-index: 500; }

.modal { font-family: 'Poppins', sans-serif; overflow-y: auto; }
    .modal-dialog { z-index: 1200; margin: 30px auto 30px auto;  }
    .modal-lg { width: 90%; max-width: 1000px; }
    .modal-backdrop { display: none!important; }
    .modal .modal-backdrop { display: block!important; }
    .modal-backdrop.in { opacity: .9; }
    .modal-content { border-radius: 10px; }
    
    .modal-content .modal-error-panel { border-radius: 0px; padding-left: 30px; margin: 0px; }
        .modal-content .modal-error-panel .error-messages h2 { color: #7f0101; font-size: 16px; line-height: 20px; font-weight: 400; }
        .modal-content .modal-error-panel .close { margin-top: 2px; }
    
    
    .modal-header { border: none; padding: 26px 65px 24px 65px; display: block; text-align: center; }
        .modal-header h2 { color: #00689d; font-size: 30px; line-height: 32px; font-weight: 600; }
        .modal-header h3 { font-size: 18px; line-height: 24px; margin-top: 7px; float: left; }
        .modal-header .close { color: #cccccc; border: 1px #cccccc solid; font-size: 32px; border-radius: 50%; line-height: 18px; font-weight: 300; width: 35px; height: 35px; padding: 8px 6px; margin: 5px 0px 0px 15px; opacity: 1; text-shadow: none; position: absolute; top: 20px; right: 18px; }
        .modal-header .close:hover { background: #7ccfda; border-color: #7ccfda; color: #ffffff; }
    
    
    .modal-body { background: #f7f7f7; border: none; padding: 20px 20px 20px 20px; }
        .modal-body h4 { color: #98bdbc; font-size: 24px; font-weight: 300; margin-bottom: 10px; }
        .modal-body p { color: #666666; font-size: 16px; line-height: 24px; margin: 0px 0px 20px 0px; }
        .modal-body p.no-pad { margin: 0px; }
    
        .modal-body .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #999 !important; width: 7px; border-radius: 2px; }
        
        .modal-body .cke { margin-bottom: 15px; }
    
        .modal-body .checkbox { margin-top: 5px!important; margin-bottom: 10px; }
            .modal-body .checkbox label { color: #4f4f4f; padding-left: 7px; }
            .modal-body .checkbox input { width: 100%; margin-top: 0px; height: 25px; }
            .modal-body .checkbox label::before { width: 20px; height: 20px; }
            .modal-body .checkbox label::after { font-size: 14px; padding-top: 0px; }
    
        .modal-body .radio { margin-top: 5px!important; margin-bottom: 10px; }
            .modal-body .radio label { color: #4f4f4f; padding-left: 7px; }
            .modal-body .radio input { width: 100%; margin-top: 0px; height: 25px; }
            .modal-body .radio label::before { width: 20px; height: 20px; }
            .modal-body .radio label::after { width: 14px; height: 14px; background-color: #2d86b0; }
    
        .modal-body .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width: 100%; }
        .modal-body .btn.dropdown-toggle { height: 34px; color: #555; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; font-weight: 400; border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); }
        .modal-body .btn.dropdown-toggle:hover { background: #fff; color: #555; }
        .modal-body .open .btn.dropdown-toggle { background: #fff; border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); }
        .modal-body .btn.dropdown-toggle:focus { background: #fff; border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); }
        .modal-body .bootstrap-select li.selected.active a { color: #2d86b0; font-weight: 700; }
        .modal-body .bs-searchbox { padding: 4px 0px 12px 0px; }
    
    
    .modal-footer { border: none; padding: 20px 20px 20px 20px; text-align: center; }
        .modal-footer .btn { font-size: 16px; margin: 0px 10px; }
        .modal-footer .btn-grey-keyline { float: none; }
        .modal-footer .btn-green { float: right; }


@media screen and (max-width: 1600px) {

#login-background { min-height: 1000px; }

#login-background .login-content { min-height: 1000px; }

#login-background.cover { min-height: 1300px; }
    #login-background.cover .login-content { min-height: 1300px; }

}

@media screen and (max-width: 1500px) {

#login-background { min-height: 920px; }

#login-background .login-content { min-height: 920px; }

#login-background.cover { min-height: 1300px; }
    #login-background.cover .login-content { min-height: 1300px; }

#login-background .login-content { padding: 40px 100px 40px 100px; }
    #login-background .login-content img { width: 150px; }
    #login-background .login-content h4 { margin-bottom: 20px; }

#login-background .login-content form { margin-bottom: 30px; }

}

@media screen and (max-width: 767px) {

#login-background { background: url(../img/digital-cyberspace-data-network-connections.jpg) center top no-repeat; height: auto!important; min-height: auto!important; padding: 25px 25px 25px 25px; }

#login-background .row { margin: 0px; }

#login-background .login-content { padding: 30px 25px 30px 25px; margin: 0px auto 0px auto; height: auto!important; min-height: auto!important; }
    #login-background .login-content h5 { margin-bottom: 0px; }

}
	
/**
 * Media Queries
 * ========================================================================== */	

@media screen and (max-width: 1200px) {

#login-background { background-size: cover; }

}


@media screen and (max-width: 1020px) {

	.info-panel { width: 350px; padding-bottom: 50px; }

	.login-panel .form { width: 360px; }
	
}

@media screen and (max-width: 930px) {

	.login-panel { padding: 40px 20px 30px 60px; }

}


@media screen and (max-width: 860px) {

	.login-panel { padding: 40px 20px 30px 40px; }

}

@media screen and (max-width: 800px) {
	.info-panel { width: 100%; min-height: auto; padding: 20px; }
		.info-panel .text { width: auto; margin: 0px; }
			.info-panel .text .logo { margin-bottom: 30px; }
			.info-panel .text h2 { margin-bottom: 5px; }
			.info-panel .text p { display: none; }
		.info-panel .bg-img { display: none; }

	.login-panel { width: 100%; min-height: auto; padding: 40px 20px 40px 20px; }
}


@media screen and (max-width: 767px) {

	.info-panel { padding: 30px 20px; }
		.info-panel .text h2 { margin: 5px 0px 0px 0px; }
		.info-panel .text .logo { float: right; width: 110px; margin: -6px 0px 0px 0px; }

}


@media screen and (max-width: 410px) {


	.info-panel .text .logo { width: 100px; margin: -10px 0px 0px 0px; }


	.login-panel .form { width: 100%; }
		.login-panel .form .tabs { margin-bottom: 50px; }
		.login-panel .btn-yellow-line { font-size: 18px; line-height: 24px; }
	
}