/* global css start  web.loans */



*{ margin: 0; padding: 0; }



body{ font-family: 'Montserrat', sans-serif; text-align: center; background-color:  #f2f2f2; }



a{ text-decoration: none; }



h1, h2, h3, h4, h5, h6{ display: inline-block; margin: 0.5em; color: #4a4a4f;  }



p{ text-align: left; font-size: 0.9em; line-height: 1.5em; font-weight: 400; }

button{ cursor: pointer; }


small{ font-size: 0.8em; font-weight: 200; }



label{ display: block; padding: 0.5em; font-size: 0.9em;}



textarea{ position: relative; resize: none; overflow: scroll; padding: 0.5em; box-sizing: border-box; width: 90%;}



/* global css end*/



/* Layout css start */



.clearfix:before, .clearfix:after{ content: "";  display: table;}



.clearfix:after{ clear: both; }



#sin-col, #semi-col, #duo-col, #tri-col, #qua-col, #pen-col{ box-sizing: border-box; position: relative;  display: inline-block; margin: 0.em; overflow: hidden; }



#sin-col{ width: 100%; }



#semi-col{ width: 65%;}



#duo-col{ width: 49.5%; }



#tri-col{ width: 33.01%; }



#qua-col{ width: 24.5%; }



#pen-col{ width: 19.5%; }



#sin-con, #semi-con, #duo-con, #tri-con, #qua-con, #pen-con{  position: relative; box-sizing: border-box; display: inline-block; }



#sin-con, #semi-con{ width: 75%; padding: 0.5em;}



#duo-con{ width: 96%; padding: 0.3em;}



#tri-con{ width: 97%; padding: 0.3em;}



#qua-con{ width: 98%; padding: 0.3em;}



#pen-con{ width: 99%; padding: 0.3em;}



.auto-width{ width: 100%;}

.auto-height-box{ height: 480px;}



/*layout css end*/



/* vertical navigation css start */



.vert-nav{ width: 15%; box-sizing: border-box; text-align: left; padding: 0.3em; float: left; }



.vert-nav > ul > li{ margin-top: 0.5em; margin-bottom: 1em; list-style-type: none;}



.vert-nav > ul > li > a{ position: relative; display: block; text-align: center; font-size: 0.9em; }



/* vertical navigation css end */



/* horizontal navigation css start  */



.hori-slim-nav{ box-sizing: border-box; width: 100%;  padding: 1em; text-align: left;}



.hori-slim-nav > ul > li{ position: relative; list-style-type: none; display: inline-block; margin-left: 1em; margin-right: 0.5em; }



.hori-slim-nav > ul > li > a{ display: block; position: relative; text-align: center; font-size: 0.9em;  }



.hori-slim-nav > ul > li > a > img{ box-sizing: border-box;	border: solid 1px #12bc00; padding: 2px; width: 60px; height:60px; float: left; border-radius: 100%; margin-bottom: -1em;}



.hori-slim-nav > ul > li > form > button{ border: none; background: none; outline: none; cursor: pointer; color: #ff0039; font-size: 15px; letter-spacing: 1px; }



/* horizontal navigation css end */



/* multi-purpose form css start */



#form-container{ box-sizing: border-box; overflow: hidden; position: relative; display: inline-block; width: 315px; }



#form-container > h3{ opacity: 0.8;}



#form-container > form > #input-spacer{ margin-top: 0.8em; box-sizing: border-box; width: inherit; position: relative; }



#form-container > form > #input-spacer > label{ opacity: 0.8;}



#form-container > form > #input-spacer > input, #form-container > form > #input-spacer > select{ box-sizing: border-box; width: 98%; padding: 0.5em; border: solid 0.5px rgb(102, 99, 99); }



#form-container > form > #input-spacer > small, #form-container > form > #input-spacer > label > small{ color: brown;}



#form-container > form > #input-spacer > button{ cursor: pointer; padding-top: 0.9em; padding-bottom: 0.9em; border-radius: 0.3em; font-size: 1.1em; display: block; background: #12bc00; color: #ffffff; width: 100%;}



#radio{ width: 10px !important; float: none; cursor: pointer; }



.x_label{ margin: none !important;  display: inline-block !important; cursor: pointer;}



/* multi-purpose form css end */



/*table css start*/



#table-container{ display: inline-block; position: relative; box-sizing: border-box; padding: 1em; text-align: center; width: 100%; overflow-y: scroll; }



#table-container > table{ width: 100%; }



#table-container > table > thead{ background-color:#3e0200; color: #f2f2f2; font-weight: 600; opacity: 0.8; }



#table-container > table > tfoot{ background-color: #fff;  font-size: 0.9em; opacity: 1; }

#table-container > table > tfoot > tr > td > h3{ color: #3e0200 !important;}

#table-container > table ,tr, td{ border: solid 1px transparent; border-collapse: collapse; padding-left: 1em; padding-right: 1em; padding-top: 0.9em; padding-bottom: 0.9em; } 



#table-container > table > tbody > tr:nth-child(even) {background-color: #f2f2f2;}

/*table css end*/

/*records styling*/

.recos{ width: 155px; height: auto; float: left; margin: 1.5em; }

.recos .recoy{ list-style-type: none; text-align: center; color: #ffffff; background: #3e0200; width: 100%; padding: 0.3em; }

.recos .recox{ list-style-type: none; text-align: left; border-bottom: solid 1px #3e0200; padding: 0.1em; }

.recos .recox a{ color: #3e0200; font-size: 10pt; width: 68px; display: inline-block; }

.yelo{ color: rgb(255, 255, 0) ; }

/*dashboard css start*/



#dashboard-container{ box-sizing: border-box; width: 60%; text-align: center; display: inline-block; outline: solid 1px #fff; padding: 1em; height: auto; background-color: #ffffff; }



#dashboard-container > nav{ display: inline-block; box-sizing: border-box; width: 100%; position: relative; margin-top: 1em; margin-bottom: 2em; outline: solid 1px #ffffff; }



#dashboard-container > nav > span{ display: block; background: #3e0200; line-height: 1.8em; letter-spacing: 1.2px; text-align: left; box-sizing: border-box; padding: 1em; font-size: 0.9em; color: #ffffff; font-weight: 100; font-size: 16px; }



#dashboard-container > nav > ul > li{ list-style: none; display: block; background: #ededf0;  padding: 1em; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 0.5em; text-align: left; }



#dashboard-profile{ box-sizing: border-box; width: 33%; float: right; margin-top: 2em; margin-right: 1em; outline: solid transparent; }



#dashboard-profile > span{display: block; background: #3e0200; line-height: 1.8em; letter-spacing: 1.2px; text-align: center; box-sizing: border-box; padding: 1em; font-size: 0.9em; color: #ffffff; font-weight: 100; font-size: 16px; }



#dashboard-profile > #avatar-box{ width: 100%; text-align: center; position: relative; }



#dashboard-profile > #avatar-box > img{ position: relative; width: 250px; height: 250px; margin: 16px; border: solid 1px #b1b1b3; padding: 4px; border-radius: 100%; box-sizing: border-box;}



#profile-text{ width: 80%; box-sizing: border-box; padding: 2em; text-align: center; }



#profile-text > span{ display: block; text-align: left; box-sizing: border-box; margin: 1em; padding: 1em; border: solid 1px #b1b1b3; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; }



#dashboard-profile > a{ color: #ff0039; }



/*dashboard css end*/







/* footer css start */



footer{ float: left;  box-sizing: border-box; position: relative; margin-top: 1em;  width: 100%; padding-top: 2em; padding-bottom: 2em; background: #0c0c0d; }



footer > #tri-col > .foots { box-sizing: border-box; position: relative; height: 230px; outline: solid 1px #ccc;}



footer > #tri-col > .foots > h4{ letter-spacing: 1px; color: #4a4a4f;}



footer > #tri-col > .foots > ul > li{ color: transparent; margin: 0.7em; }



footer > #tri-col > .foots > ul > li > a, footer > #tri-col > .foots > ul > li > span{ color: #b1b1b3; font-size: 0.9em; }



footer > .credits { box-sizing: border-box; padding: 0.5em; }



footer > .credits > #duo-col > .credit-span-left { float: left; color: #4a4a4f; font-size: 0.8em; }



footer > .credits > #duo-col > .credit-span-right { float: right; color: #b1b1b3; font-size: 0.8em; }



footer > .credits > #duo-col > .credit-span-right > a { color: #b1b1b3; }



.dev-name{ color: #715100; }



/* footer css end */



/*extra css start*/



#sin-col{ background-color: #f2f2f2;}



#semi-col > #form-container{ background-color: #f8f9fa; }



#form-container > div > img{ width: 55%; }



#dashboard-container > div > img { width: 33%; }



#dashboard-container > nav > ul > li > a{font-size: 0.9em; }



#dashboard-container > nav > ul > li > a >span{ display: block; float: left; width: 180px; box-sizing: border-box; opacity: 0.5; }



td{ font-size: 0.8em; }



.defer, .approve, .pend, .refer, .inactive{ box-sizing: border-box; width: 100%; position: relative; padding-top: 0.8em; padding-bottom: 0.8em; }



.defer{ border-color: #d30c05; outline-color:  #d30c05; background-color:  #d30c05; color: #ededf0; }



.approve{ border-color: #30e60b; outline-color: #30e60b; background-color: #30e60b; color: #ededf0; }



.refer{ border-color: #800c08; outline-color: #800c08; background-color: #800c08; color: #ededf0; }



.pend{ border-color: #ff9400; outline-color: #ff9400; background-color: #ff9400; color: #ededf0;  }



.inactive{ border-color: #4a4a4f; outline-color: #4a4a4f; background-color: #4a4a4f; color: #ededf0;  }



.action-icons{ height: 20px; }



.create-acc{ display: block; color: #ffffff; background: #660602; padding: 1em; margin-top: 0.5em; margin-bottom: 0.5em; }



.contact-btn{ display: block; color: #ffffff; background: #cf4b0d; padding: 1em; margin-top: 0.5em; margin-bottom: 0.5em; }





.def-loan, .ref-loan, .app-loan{ display: inline-block; font-size: 0.9em; font-weight: 600; margin: 1em; width: auto; padding: 1em; }



.def-loan{ border-color: #d70022; border-radius: 0.5em; background-color: #d70022; color: #ededf0; }



.app-loan{ border-color: #30e60b; border-radius: 0.5em; background-color: #30e60b; color: #ededf0;}



.ref-loan{ border-color: #800c08; border-radius: 0.5em; background-color: #800c08; color: #ededf0;}



.upd-btt{ display: inline-block; font-size: 0.9em; font-weight: 600; margin: 1em; width: auto; padding: 1em; border-color: #3e0200; border-radius: 0.5em; background-color: #3e0200; color: #ededf0;}



.upd-btt-a{ display: inline-block; font-size: 0.9em; font-weight: 600; margin: 1em; width: auto; padding: 1em; border-color: #660602; border-radius: 0.5em; background-color: #660602; color: #ededf0;}



.upd-btt-b{ display: inline-block; font-size: 0.9em; font-weight: 600; margin: 1em; width: auto; padding: 1em; border-color: #cf4b0d; border-radius: 0.5em; background-color: #cf4b0d; color: #ededf0;}



#duo-height{ min-height: 350px; }



#form-container > form > #input-spacer > span > select { padding: 1em; }



.emb-height{ height: 700px; overflow: hidden; border: none; outline: none;}



.asterix{ display: inline-block; color: #d70022; font-weight: 700; }



.coded-green{ color: #12bc00 !important; font-size: 0.9em;}



.set-msg{ display: inline-block; color: #05961d; font-weight: 700; font-size: 1.3em; padding: 1em; }



.err-msg{ display: inline-block; color: #d70022; font-weight: 700; font-size: 1.3em; padding: 1em; }



#loan-box{ display: inline-block; width: 60%; box-sizing: border-box; background: #ffffff; padding: 1em; overflow: hidden;}



#loan-box > ul{ width: 45%; float: left;}



#loan-box > ul > li{ list-style-type: none; display: block; margin: 1.5em; text-align: left; padding-top: 0.5em;}



#loan-box > ul > li > a{ font-weight: 600; font-size: 0.9em;}



#loan-box > ul > li >ul >li{ list-style-type: none; padding-top: 0.5em; text-align: left;}



#loan-box > ul > li >ul >li > a{ font-size: 0.9em; }



.coded-blue{ color: #c23f03; font-size: 0.8em !important; font-weight: 600; }



.coded-brown{ color: #c23f03 !important;}



#search-box > form > input{padding: 1em; width: 250px;}



#search-box > form > button{padding: 1em; background-color: #3e0200; color: #ededf0; border: none;}



.xls{border: solid 1px #05961d; background-color: #05961d; color: #ffffff; padding: 1em; margin: 0.5em; }



#hori-sub-nav{text-align: left;}

#hori-sub-nav > ul > li{list-style-type: none; display: inline-block; margin: 0.3em; }



#hori-sub-nav > ul > li > a{ color: crimson; }



/*extra css end*/



/* Messages table styling start */





.msg-btns{ display: block; margin-top: 0.5em; border: none; outline: none; background: none; }



.expanded{ width: 130px; }



.msg-act-btns{ padding: 1em; border: solid 1px #800c08; background: #800c08; outline: #800c08; color: #f8f9fa; margin: 1em; }



.msg-adm-btns{ float: left; margin-left: 2em; background: none; border: none; color: #800c08; cursor: pointer; }



.unread{font-weight: 600;}



.read{font-weight: 300;}



#checkbox{padding: 1em; height: 2em; cursor: pointer;}







/* Messages table styling end */





/*MEDIA QUERIES*/



/* Mobile phones and tablets */



@media screen and (min-width : 240px) and (max-width: 660px){



    #loan-box, #semi-col, #duo-col, #tri-col, #qua-col, #pen-col, #sin-con, #semi-con, #duo-con, #tri-con, #qua-con, #pen-con { width: 100%;}



	#sin-con, #semi-con, #duo-con, #tri-con, #qua-con, #pen-con{ padding-left: 1em; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em;}	

}

     

.ldel{
	margin: 2em;
	font-size: 0.8rem;
	color: #660602;
	display: inline-block;
	padding: 0.5em;
}

  /*responsive navigation*/



  @media (max-width: 660px){



	.menutoggle{

		display: block;

		width: 40px;

		height: 40px;

		margin: 10px;

		float: right;

		cursor: pointer;

		text-align: center;

		font-size: 30px;

		position: relative;

		



	}





	.menutoggle:before{ content:url('http://myfriendadmin.digitalcredit.co.ke/webotos/webicons/dropper.svg');}

	

	.menutoggle.active:before{ content:url('http://myfriendadmin.digitalcredit.co.ke/webotos/webicons/locker.svg'); line-height: 3em; }



	.vert-nav{ width: 70%;}



	footer > .credits > #duo-col > .credit-span-left, footer > .credits > #duo-col > .credit-span-right { float: none;}



	#navigation, #dashboard-container, #dashboard-profile {width: 100%; position: relative; display: inline-block; }



	#navigation >  nav{ display: none; }



	#navigation >  nav.active{ display: block; position: relative; float: left;}



	#navigation >  nav.active > ul{ display: block;	text-align: left;  position: relative;}



	#navigation >  nav.active >  ul > li { display: block; margin-top: 1em; position: relative; clear: both; }



	#hori-sub-nav > ul > li{list-style-type: none; display: inline-block; margin: 0.3em; }



	#hori-sub-nav > ul > li > a{ color: crimson; font-size: 0.8em; }

}