/* global loans css start*/

*{ 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; }

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: right;}

.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: #ccc; font-size: 0.8em; opacity: 0.8; }

#table-container > table ,tr, td{ border: solid 1px #ccc; 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*/


/*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: #3e0200; outline-color: #3e0200; background-color: #3e0200; color: #ededf0;  }

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

.cl-btt{ border: none !important; outline: none !important; background: none !important; color: #3e0200 !important; float: right !important; }

.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: inline-block; color: #ffffff; background: #cf4b0d; padding: 1em; margin-top: 0.5em; margin-bottom: 0.5em; width: 80%; box-sizing: border-box; }

.contact-btn-i{ display: inline-block; color: #ffffff; background: #660602; padding: 1em; margin-top: 0.5em; margin-bottom: 0.5em; width: 80%; box-sizing: border-box; }
 
.def-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;}

.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; scroll-snap-type: none; }

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

.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;}

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

/*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; }

.unread{font-weight: 600;}

.read{font-weight: 300;}

/* Messages table styling end */


/*MEDIA QUERIES*/

/* Mobile phones and tablets */

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

    #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;}	
}
     

  /*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://127.0.0.1/webpack/webotos/webicons/dropper.svg');}

	.menutoggle.active:before{ content:url('http://127.0.0.1/webpack/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, #loan-box {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; }
}