.login-form input.login-btn, .login-form .forgot-pwd-btn, .login-form .forgot-pwd-btn{
	border: 0 none !important;
    color: #fff !important;
    cursor: pointer;
    margin-top: 15px;
    padding: 5px 0 !important;
    text-align: center !important;
    width: 94.5%;
}

div#login-forgot-password {
    text-align: center;
	padding: 10px 0 ;
	border-radius: 5px;
	font-size: 14px;
}
div#login-create-account{
    border-radius: 5px;
}
.login-form a.forgot-pwd-btn, .login-form .forgot-pwd-btn a:active, .login-form .forgot-pwd-btn a:visited{
	color:#fff!important;
}
.login-form input.login-btn:hover{
	background:#ccc!important;
	color:#fff!important;
}
.login-form .forgot-pwd-btn a:hover, .login-form .forgot-pwd-btn a:hover{
	color:#fff!important;
}
a.forgot-pwd-link,a.forgot-pwd-link:visited,a.forgot-pwd-link:active{
	color:#fff!important;
}
.login-form .key-icon{
	margin:20px 10px 10px 10px;
}

.login-form h1.heading, .user-cp-info h1.heading{
	font-weight:bolder;
	line-height: 2em;
	padding:10px;
	color:#848181;
	font:170% "Century Gothic", Verdana,  Arial,Helvetica,Sans-serif;
}

.login-form h2.heading, .user-cp-info h2.heading{
	font-weight:bolder;
	line-height: 2em;
	padding:10px;
	color:#CE1212;
	font:170% "Century Gothic", Verdana,  Arial,Helvetica,Sans-serif;
}
.login-form .inputboxes{
	width:100%;
	padding:0 0 10px 0;
	display:block;
}

.login-form .inputboxes .field{
	width:300px;
	text-align:left;
	word-wrap: break-word;
	padding:5px;
	font:120% "Century Gothic", Verdana,  Arial,Helvetica,Sans-serif;
}
.login-form  .inputboxes .data{
	width:300px;
	float:left;
	text-align:left;
}
.login-form  .password-tips{
	width:500px;
}
.login-form  .password-tips h2{
	font-weight:bolder;
	line-height: 2em;
	color:#37464F;
	font:150% "Century Gothic", Verdana,  Arial,Helvetica,Sans-serif;
}
.login-form  .password-tips ul{
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
	margin: 0 auto;	
}
.login-form  .password-tips ul li{
	color: #000;
	font-size: 11px;
	font-family: "Century Gothic", Verdana,  Arial,Helvetica,Sans-serif;
	display: block;
	background:#fff no-repeat 4px;
	padding:10px 0 5px 20px;
}



.login-form  .inputboxes input[type=text],.login-form  .inputboxes input[type=password] {
	outline:none;
	background: #F1F3F5 !important;
}
.login-form  .inputboxes input[type=text]:hover, .login-form  .inputboxes input[type=password]:hover{
	background: #fff !important;
	outline:none;
}

.avatar-wrap {
	width: 68px;
	height: 68px;
	position: relative;
	border: 8px solid #E8E8E8;
	margin: 0 0 3px 0;
}

.resource_list{
	background: #E9F1F2;
	padding:10px;
}
.resource_list .column{
	float: left;
	border:1px double #ccc;
	margin:5px;
}
.resource_list .component{
	font-family: verdana,sans-serif;
	color:#336699;
	font-size:90%;
	padding:5px;
	font-weight:bolder;
}

.resource_list .item{
	min-width:350px;
	width:100%!important;
}

.resource_list .on{
	background: #2E4E8C;
	color:#fff;
}

.resource_list .off{
	background: #6C9BA6;
}
.resource_list .component{
	background: #3C3C3C;
	color:#F1F3F5;
	text-transform:uppercase;
}

.resource_list .module, .resource_list .options span{
	float:left!important;
	display: block;
}

.resource_list table.item{
	border:1px solid #827A69;
	border-bottom:0px;
}
.user-list .picture, .user-list .picture img{
	border-radius:100px;
}
.user-container{
	width:98%!important;
	border:1px solid #CAC6BB;
	background-color:#fff;
	color: #888888;
	margin:0px;	
	font-size: 10px;
	display: inline-block;
	padding: 0px;
	
}
.user-container .main-data {
	padding:10px;
}
.user-container .main-data .holder{
	width: 140px!important;
	float:left!important;
}
.user-container .main-data .holder .picture{
	width: 128px;
	height: 128px;	
	position: relative;
	border: 4px solid #E8E8E8;
	margin: 0 0 3px 0;
	border-radius:100px;
	
}
.user-container .main-data .holder .picture img{
	position: relative;
	border-radius:100px;

}
.user-container .main-data .profile-details{
	float:left!important;
	width:80%;
	padding:10px;
}
.user-container .main-data .profile-details .name{
	font-size:175%;
	color:#363636;
	margin-left:15px;
}
.user-container .security{
	margin:10px;
	background:#E4EBF2;
	text-align:left;
	padding: 10px;
	margin-bottom: 5px; 
	width:95%;
	clear: both;
	font:12px "Century Gothic", Verdana, Arial,Helvetica,Sans-serif;
	color:#000;
	display:block!important;
	outline: none!important;
}
.user-container .security h1{
	font-weight: bold;
	font-size: 135%;
}
.user-container small{
	font-size:9px; font-weight:normal;
}



.user-container .security .profile-details .main-actions{
	padding:10px;
}
.user-container .main-actions a,.user-container .main-actions a:active{
	margin: 0 7px;
	text-align: center;
	font-size: 140%;
	cursor:pointer;
	font-weight:bolder;
	border:0px;
	background: #DF8942;
	color: #fff!important;
	padding:10px;
	float:left!important;
	height:24px;
	text-transform:uppercase;
	box-shadow: #B3B3B3 3px 3px 3px 3px;		
	-moz-box-shadow: 3px 3px 3px 3px #B3B3B3;
	-webkit-box-shadow: 3px 3px 3px 3px #B3B3B3;
}
.user-container .main-actions a.pwd{
	background: #DF8942;
	color: #fff!important;
}
.user-container .main-actions a.details{
	background: #008000;
	color: #fff!important;
}
.user-container .main-actions a:hover{
	background: #0076CC;
	color: #fff!important;
}
.user-container .main-data .action{
	padding:10px;
}
.user-container .main-data .action a,.user-container .main-data .action a:active{
	margin: 0 7px;
	text-align: center;
	font-size: 100%;
	cursor:pointer;
	font-weight:bolder;
	border:0px;
	background: #DF8942;
	color: #fff!important;
	padding:10px;
	float:left!important;
	text-transform:uppercase;
	box-shadow: #B3B3B3 3px 3px 3px 3px;		
	-moz-box-shadow: 3px 3px 3px 3px #B3B3B3;
	-webkit-box-shadow: 3px 3px 3px 3px #B3B3B3;
}
.user-container .main-data .action a.update{
	background: #DF8942;
	color: #fff!important;
}
.user-container .main-data .action a:hover{
	background: #0076CC;
	color: #fff!important;
}

.user-container .tab-data{
	padding:10px;
}

.user .header{
	
	font-weight: bold;
	padding: 15px;
}
.user .header .numbering{
	width:25px!important;
	
	float:left;
}
.user .header .fullname{
	width:250px;
	float:left;
}
.user .header .username{
	width:100px;
	float:left;
}
.user .header .role{
	width:150px;
	float:left;
}
.user .header .contacts{
	width:250px;
	float:left;
}
.user .header .actions{
	float:left;
}


.user-preview {
	width:100%!important;
	font-size: 60%;
}

.user-preview .main-data {
	width:100%;
}
.user-preview .main-data .holder {
	display: block;
	padding:2%;
}

.user-preview .main-data .holder .picture{
	width: 29%;
	position: relative;
	margin: 0 0 3px 0;
	float:left!important;	
	border-radius:100px;
        padding-top:10px;
}
.user-preview .main-data .holder .picture img{
	text-align:center;
	position: relative;
	z-index: 1;
	border-radius:100px;
}
.user-preview .main-data .holder .names{
	width:100%;
}
.user-preview .main-data .name{
	font-size:155%;
}
.user-preview .main-data .role{
	font-size:100%;
	font-weight:bolder;
}
.user-preview .main-data .details{
	font-size:100%;
	margin-left:15px;
}
.user-cr-list .list-item .numbering-col{
	float:left!important;
	padding:0.5%!important;
	width:5%!important;
}

.user-cr-list .list-item .title-col{
	float:left!important;
	padding:0.5%!important;
	width:15%!important;
}

.user-cr-list .list-item .status-col{
	float:left!important;
	padding:0.5%!important;
	width:8%!important;
}
.user-cr-list .list-item .date-col{
	float:left!important;
	padding:0.5%!important;
	width:15%!important;
}
.user-cr-list .list-item .requestor-col{
	float:left!important;
	padding:0.5%!important;
	width:14%!important;
}
.user-cr-list .list-item .processed-col{
	float:left!important;
	padding:0.5%!important;
	width:14%!important;
}
.user-cr-list .list-item .actions-col{
	float:left!important;
	padding:0.5%!important;
	width:16%!important;
}

.user-cr-list .list-item.header{
	color:#E53B2D;
	font-weight:bolder;
}

.user-cr-list .reason-botton{
	color:#336699;
	font-weight: bolder;
}


.user-sq-list .list-item{
	padding:5px;
	border-bottom:0.1em #E1DFD1 solid;
}


.user-sq-list .list-item .numbering-col{
	float:left!important;
	padding:0.5%!important;
	width:2%!important;
}
.user-sq-list .list-item .actions-col{
	float:left!important;
	padding:0.5%!important;
	width:10%!important;
}

.user-sq-list .list-item .question-col{
	float:left!important;
	padding:0.5%!important;
	width:30%!important;
}

.user-sq-list .list-item .answer-col{
	float:left!important;
	padding:0.5%!important;
	width:30%!important;
}

.user-sq-list .list-item.header{
	color:#E53B2D;
	font-weight:bolder;
}
.user-sq-list a.user-edit-sq-button{
	background: #EA761F;
	color: #000;
}

.user-sq-list a.user-delete-sq-button{
	background: #860404;
	color: #fff;
}




.user-lh-list .list-item{
	padding:5px;
	border-bottom:0.1em #E1DFD1 solid;
}


.user-lh-list .list-item .numbering-col{
	float:left!important;
	padding:0.5%!important;
	width:2%!important;
}
.user-lh-list .list-item .context-col{
	float:left!important;
	padding:0.5%!important;
	width:10%!important;
}

.user-lh-list .list-item .username-col{
	float:left!important;
	padding:0.5%!important;
	width:10%!important;
}

.user-lh-list .list-item .date-col{
	float:left!important;
	padding:0.5%!important;
	width:15%!important;
}

.user-lh-list .list-item .agent-col{
	float:left!important;
	padding:0.5%!important;
	width:25%!important;
}

.user-lh-list .list-item .ip-address-col{
	float:left!important;
	padding:0.5%!important;
	width:15%!important;
}

.user-lh-list .list-item .status-col{
	float:left!important;
	padding:0.5%!important;
	width:8%!important;
}
.user-lh-list .list-item.header{
	color:#E53B2D;
	font-weight:bolder;
}



div#login-container .field {
    color: #787878;
    /* font-weight: normal; */
}
input#login-button {
width: 100% !important;
    border-radius: 5px;
}
#forgot-password-form-container .data,
#login-form-containe .data,
#forgot-password-form-container .data {
    position: relative;
}
#form-login-wrapper  #login-form-container ,#forgot-password-form-container{
    background: #fff none repeat scroll 0 0;
    margin: auto;
    padding: 20px;
    width: 300px;
    border-radius: 25px;
    border:1px solid #ccc;
}

div#form-login-wrapper .form-control,#forgot-password-form-container  .form-control{
    padding: 10px 12px 10px 30px;
   width: 256px;
}
.totp-verify-button{padding:10px!important;text-align:center!important;}
div#form-login-wrapper,div#form-forgot-password-wrapper {
	    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#form-login-wrapper .comp-name h1,#form-forgot-password-wrapper h1{font-size:24px;color:#787878;text-align: center;    text-transform: capitalize;}
#form-login-wrapper .subtitle{
	margin-top:10px;
	padding-top:10px;
	border-top:1px #787878 solid; 
}



@media only screen and (max-width: 600px) {
    #form-login-wrapper  #create-user-form-container{
        width: 100%; 
    }
    
    .kfw-wallpaper-video-wall{visibility: hidden;}
    
}

@media only screen and (max-width: 768px) {
    #form-login-wrapper  #create-user-form-container{
        width: 300px;   
    }
}

@media only screen and (min-width: 768px) {
    #form-login-wrapper  #create-user-form-container{
        width: 500px;   border-radius: 25px;
    }
}

@media only screen and (max-width: 360px)
{
	.logged-off.user div#kfw-wrapper {
		top: 35px!important;
	}
}



.user-big-otp .data input.form-control, input.user-big-otp{
    width:95px!important;
    height:30px!important;
    line-height:30px;
    padding:0 5px;
    margin-top:-10px!important;
    font-size:80px!important;
    padding:0px!important;
}


#form-login-wrapper  #create-user-form-container{
    background: #fff none repeat scroll 0 0;
    margin: auto;
    padding: 10px 40px 30px;
}

#create-user-form-container select[name^="IN_frm_mobile_code"]{
    width:50px!important;
}
#create-user-form-container select, #create-user-form-container input{
    padding: 2px!important;
}
#create-user-form-container .form-control{
    width: 300px;
}
#create-user-form-container #login-button{
    padding:5px;
    font-size:1.5rem;
}
















#form-forgot-password-wrapper .line-seperate {
   padding: 10px 0;
    margin-top: 10px;
}
#form-forgot-password-wrapper input.forgot-password-btn.form-control {
        width: 100%;
    border-radius: 5px;
    padding: 10px;
}

.clear.inputboxes #know-pin {
    width: 100%;
    text-align: center;
    padding: 10px 0;
	color:#fff;
	    border-radius: 5px;

}
.clear.inputboxes #know-pin a{
	    font-size: 14px;
	color:#fff;
}
.profile-details .links{
	background: #fff;
	width:100%;
}
.profile-details .links div{
    border-bottom:1px solid #ccc;
}
.profile-details .links a,.profile-details .links a:visited{
	padding: 0 2px 0 2px;
	height:26px;
        font-size: 1.5rem;
        width:100%;
}
.profile-details .links a:hover{
	color:#787878;
	height:86px!important;
        font-size: 1.5rem;
        width:100%;
}