@charset "UTF-8";

:root{
	--scrollbar-color:150,150,150;
	--brand-color:28,144,5;
	--bg-color:253,253,253;
	--bg-border:224,224,224;
	--topnav-height:65px;
	--topnav-padding:10px;
	--topnav-bg:249,249,250;
	--topnav-color:50,50,50; 
	--topnav-border-color:230,230,230; 
	--topnav-zindex:100;
	--leftdock-width:55px;
	--list-item-border-radius:6px;
	--list-item-min-height:60px;
	--topnav-height:60px;
	--leftnav-width:250px;
	--fab-cube:50px;
	--fab-margin:15px;
}

*{
	margin:0px;
	padding:0px;
}

a{
	cursor:pointer;
	text-decoration:none;
	color:inherit;
}

/* Scrollbar */
*{
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--brand-color),0.9) #FBFFFE;
}

*::-webkit-scrollbar {
	width: 8px;
}

*::-webkit-scrollbar-track {
	background-color:#FBFFFE;
}

*::-webkit-scrollbar-thumb {
	background-color: rgba(var(--brand-color),0.8);
	border-radius: 12px;
}


body{
	position:relative;
	background-color:#FCFCFC;
}

body.scroll-lock{
	overflow: hidden;
}

body > div#preloader{
	position:fixed;
	left:0px;
	top:0px;
	z-index:100;
	width:100vw;
	height:100vh;
	background-color:#FFF;
	opacity:0.95;
}

body.topnav{
	padding-top:var(--topnav-height);
}

body.leftnav{
	padding-left:var(--leftnav-width);
}

@media only screen and (min-width:1400px){
	body.leftnav{
		padding-left:280px;
	}
}

@media only screen and (min-width:2000px){
	body.leftnav{
		padding-left:350px;
	}
}

body > section > div.container > div.body{
	position:relative;
	width:100%;
	min-height:calc(100vh - var(--topnav-height));
	padding:10px 10px 20px 10px;
}

body > section > div.container > div.body.fab{
	padding-bottom:calc((var(--fab-margin)*2) + var(--fab-cube));
}

body > section > div.container > div.body > div.fab{
	position:fixed;
	float:left;
	bottom:0px;
	right:0px;
	cursor:pointer;
	color:#FFF;
	font-size:16px;
	text-align:center;
	line-height:var(--fab-cube);
	text-align:center;
	margin:var(--fab-margin);
	padding:0px calc(var(--fab-cube)/2);
	border-radius:10px;
	background-color:rgb(var(--brand-color));
}

body > section > div.container > div.body > div.fab>a{
	float:left;
	width:100%;
	height:100%;
	border-radius:calc(var(--fab-cube)/2);
}

body > section > div.container > div.body > div.fab i{
	position:relative;
	font-size:20px;
	bottom:-2px;
}

header#topnav{
	position:fixed;
	top:0px;
	padding:5px;
	height:var(--topnav-height);
	background-color:#FFF;
	z-index:50;
	border-bottom:1px solid #FAFAFA;
}

body header#topnav{
	width:100%;
}

body.leftnav header#topnav{
	width:calc(100% - var(--leftnav-width));
}

@media only screen and (min-width:1400px){
	body.leftnav header#topnav{
		width: calc(100% - 280px);
	}
}

@media only screen and (min-width:2000px){
	body.leftnav header#topnav{
		width: calc(100% - 350px);
	}
}

header#topnav > nav{
	float:left;
}

header#topnav > nav.menu{
	width:50px;
	height:100%;
}

header#topnav > nav.menu a{
	float:left;
	width:100%;
	height:100%;
	color:inherit;
}

header#topnav > nav.menu a:hover{
	color:rgb(var(--brand-color));
}

header#topnav > nav.menu a > svg{
	width:28px;
	height:28px;
	margin:11px;
}

header#topnav > nav.group{
	width:calc(40% - (250px/2));
	height: 100%;
	padding:5px 20px;
	color:rgb(var(--brand-color));
	overflow: hidden;
}

header#topnav > nav.group span{
	line-height:38px;
}

header#topnav > nav.group a{
	color:inherit;
}

header#topnav > nav.search{
	width:calc(60% - (250px/2));
	padding:5px 20px;
}

header#topnav > nav.search *{
	float:left;
}

header#topnav > nav.search > form{
	position:relative;
	width:100%;
}

header#topnav > nav.search > form > input{
	width:100%;
	padding-right:50px;
}

header#topnav > nav.search > form > button{
	position:absolute;
	right:0px;
	top:0px;
	width:40px;
	color:inherit;
	background:none;
}

header#topnav > nav.search > form > button:hover{
	color:rgb(var(--brand-color));
}

header#topnav > nav.search > form > button > svg{
	width:20px;
	height:20px;
	margin:10px;
}

header#topnav > nav.user{
	width:200px;
	padding:10px;
}

header#topnav > nav.user > span{
	position: relative;
	cursor: pointer;
	float:right;
	width:20px;
	height:20px;
	margin-left:20px;
}

header#topnav > nav.user > span.profile{
	border:1px solid #333;
	border-radius:50%;
	margin-top:3.5px;
	background-image:none;
	background-size:18px;
	background-position:center;
	background-repeat:no-repeat;
}

header#topnav > nav.user > span:hover{
	color:rgb(var(--brand-color));
	border-color:rgb(var(--brand-color));
}

header#topnav nav.user div#pane{
	display:none;
	position: absolute;
	top:40px;
	right:0px;
	width:270px;
	max-height:calc(100vh - 50px);
	padding: 10px;
	background-color: #FFF;
	border:1px solid #F5F5F5;
	border-radius:5px;
}

header#topnav nav.user span.notifications div#pane{
	right:-55px;
	overflow-x: hidden;
	overflow-y: auto;
}

header#topnav nav.user span.settings div#pane{
	right:-95px;
	width: 220px;
	font-size: 1.02em;
}
header#topnav nav.user span.settings div#pane > div.option{
	float: left;
	width: 100%;
	padding:3px;
}
header#topnav nav.user span.settings div#pane > div.option > a{
	color: #777;
}
header#topnav nav.user span.settings div#pane > div.option > a:hover{
	color:rgb(var(--brand-color));
}
header#topnav nav.user span.settings div#pane div.option i{
	padding-right: 8px;
}
header#topnav nav.user span.switch > a > i, header#topnav nav.user span.switch > i{
	font-size: 19px;
	padding-top: 5px;
	opacity: 0.8;
}
header#topnav nav.user > span > a:hover{
	color: rgb(var(--brand-color));
}
header#topnav nav.user div#pane.show{
	display: block;
}

header#topnav nav.user div#pane.notifications > div.notification{
	font-size: 0.9em;
	letter-spacing: normal;
	color:#444;
	padding:10px;
	border-radius:5px;
	border:1px solid transparent;
}

header#topnav nav.user div#pane.notifications > div.notification > div.header{
	position: relative;
	padding-right: 25px;
	min-height: 20px;
}

header#topnav nav.user div#pane.notifications > div.notification > div.header > span{
	position: absolute;
	right: 0px;
	top: 0px;
	width: 20px;
	height:20px;
	line-height: 17px;
	text-align: center;
	border:1px solid transparent;
	border-radius:50%;
}

header#topnav nav.user div#pane.notifications > div.notification > div.header > span:hover{
	cursor: pointer;
	background-color: #e2a872;
	color:#000;
	border-color: #999;
}

header#topnav nav.user div#pane.notifications > div.notification.empty{
	display: none;
}

header#topnav nav.user div#pane.notifications > div.notification.empty.show{
	display: block;
}

header#topnav nav.user div#pane.notifications > div.notification:hover{
	background-color:#FBFFFE;
	border:1px solid #EEE;
}

header#topnav nav.user div#pane.notifications > div.notification button{
	font-size: inherit;
	padding: 3px 10px;
}

header#topnav nav.user > span > div.notification-badge{
	display: none;
	position:absolute;
	top:-8px;
	right:-5px;
	min-width: 16px;
	height: 16px;
	padding: 3px;
	border-radius: 8px;
	background-color: #BB0000;
	font-size: 10px;
	color: #FFF;
	text-align: center;
	line-height: 8px;
	font-weight: bold;
}

header#topnav nav.user > span > div.notification-badge.show{
	display: inline-block;
}

header#topnav nav.user div#pane.menu > div > a{
	float: left;
	width:100%;
}

@media only screen and (min-width:1080px){
	header#topnav > nav.group{
		width: calc(30% - 50px);
	}
	header#topnav > nav.search{
		width:35%;
	}
	header#topnav > nav.user{
		width:35%;
	}
}

@media only screen and (max-width:512px){
	header#topnav > nav.group{
		width: calc(100% - 250px);
	}
	header#topnav > nav.search{
		display:none;
	}
}

@media only screen and (max-width:300px){
	header#topnav > nav.group{
		width:calc(100% - 50px);
	}
	header#topnav > nav.search{
		display:none;
	}
	header#topnav > nav.user{
		display:none;
	}
}

div.progress{
	width:100%;
	height:10px;
	border:1px solid #EEE;
}

div.progress > div.bar{
	width:0px;
	background-color:rgb(var(--brand-color));
}

div#loanReviewModal div.modal-body label{
	width: 100%;
	text-align: center;
	color:#777;
	font-size: 0.8em;
}
div#loanReviewModal div.modal-body input[type='text']{
	text-align: center;
}
div#loanReviewModal div.modal-body > div{
	display:none;
}
div#loanReviewModal div.modal-body > div.active{
	display:block;
}
div#loanReviewModal div.modal-body > div.loanReview div.amount{
	display: inline-block;
	width: 100%;
	border:1px solid #EBEFEB;
	background-color: #fdfdfd;
	padding:5px 10px;
	text-align: center;
	border-radius: 10px;
}
div#loanReviewModal div.modal-body > div.loanReview div.loanAmount{
	font-size: 1.2em;
	font-weight: bold;
}
div#loanReviewModal div.modal-body > div.loanReview div.member{
	position: relative;
	padding-left: 100px;
	margin-bottom:20px;
	min-height: 80px;
}
div#loanReviewModal div.modal-body > div.loanReview div.member div.dp{
	position: absolute;
	top:0px;
	left:0px;
	width:80px;
	height:80px;
	background-color: #F5F5F5;
	background-image:url(/assets/images/no-dp.svg);
	background-size: 80px;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
}
div#loanReviewModal div.modal-body > div.loanReview div.member div.fullnames{
	font-size: 1.2em;
}

aside#leftnav{
	position:fixed;
	z-index:50;
	left:0px;
	top:0px;
	padding:20px;
	width:var(--leftnav-width);
	height:100%;
	background-color:#FBFFFE;
	border-right:1px solid #FAFAFA;
}

@media only screen and (min-width:1400px){
	aside#leftnav{
		width: 280px;
	}
}

@media only screen and (min-width:2000px){
	aside#leftnav{
		width: 350px;
	}
}

aside#leftnav.slide.show{
	display:inline-block;
}

aside#leftnav div.user{
	float:left;
	width:100%;
	margin-top:30px;
}

aside#leftnav div.user > div, aside#leftnav div.user > a{
	float:left;
}

aside#leftnav div.user div.dp{
	width:50px;
	height:50px;
	margin-right:10px;
	border:1px solid #F5F5F5;
	border-radius:50%;
	background-color:#FFF;
	background-image:url(/assets/images/no-dp.svg);
	background-position:center;
	background-size:50px;
	background-repeat:no-repeat;
}

aside#leftnav div.user div.info{
	width:calc(100% - 60px);
}

aside#leftnav div.user div.info div.name{
	font-weight:bold;
	color:rgb(var(--brand-color));
}

aside#leftnav div.user div.info div.designation{
	font-size:0.8em;
}

aside#leftnav div.menu{
	float:left;
	width:100%;
	margin-top:20px;
}

aside#leftnav div.menu > nav{
	float:left;
	width:100%;
	margin-bottom:10px;
}

aside#leftnav div.menu > nav:hover, aside#leftnav div.menu > nav.active{
	color:rgb(var(--brand-color));
}

aside#leftnav div.menu > nav.active{
	font-weight:bold;
}

aside#leftnav div.menu > nav > a{
	position:relative;
	float:left;
	color:inherit;
	padding:5px;
	padding-left:40px;
}

aside#leftnav div.menu > nav > a > svg{
	position:absolute;
	left:0px;
	top:3px;
	width:28px;
	height:28px;
	color:inherit;
}

aside#leftnav > a.group{
	float:left;
	color:rgb(var(--brand-color));
	width:100%;
	text-align:center;
	font-size:0.5em;
	border:1px solid rgb(var(--brand-color));
	border-radius:10px;
	margin:10px 0px;
	background-color:#F5FAFF;
	overflow:hidden;
}

aside#leftnav > a.group > div{
	text-align:center;
	color:#FFFFFF;
	font-size:16px;
	background-color:rgb(var(--brand-color));
}

a.koboapp-outline{
	float:left;
	color:rgb(var(--brand-color));
	width:100%;
	min-height:40px;
	padding:5px 10px;
	line-height:25px;
	text-align:center;
	font-size:0.8em;
	border:1px solid rgb(var(--brand-color));
	border-radius:10px;
}

section.root > div.container{
	max-width:initial;
	margin:0px;
}

form input[type="text"], form input[type="number"], form input[type="email"], form input[type="password"], form input[type="datetime-local"], form textarea, form select{
	width:100%;
	height:40px;
	padding:5px 10px;
	border: 1px solid #F0F0F0;
	border-radius:5px;
	outline:none;
}

form textarea{
	height:auto;
	min-height:100px;
}

form button{
	width:100%;
	height:40px;
	color:#FFF;
	background-color:rgb(var(--brand-color));
	border:0px solid #F0F0F0;
	border-radius:5px;
}

form label{
	float:left;
	margin-top:10px;
	margin-bottom:2px;
}

div.list{
	float:left;
	width:100%;
}

div.list > div.list-head{
	float:left;
	width:100%;
	min-height:60px;
	border-top:1px solid #F8F8F8;
	border-bottom:1px solid #F8F8F8;
}

div.list > div.list-body{
	float:left;
	width:100%;
}

div.list > div.list-body > div.list-item{
	float:left;
	width:100%;
	cursor:pointer;
	border-bottom:1px solid #F8F8F8;
}

div.list > div.list-body > div.list-item:hover{
	background-color:#FCFCFC;
}

div.list  ul.spacing{
	float:left;
	width:100%;
	padding:0px;
	margin:0px;
	list-style:none;
}

div.list ul.spacing > li{
	float:left;
	padding:5px;
}

div.flex{
    display: flex;
	flex-direction:column;
    height: 100%;
    padding: 15px;
    margin: 0px;
    align-items: center;
    justify-content: center;
	border:1px solid #F5F5F5;
	border-radius:10px;
	background-color:#FEFEFE;
}

@media only screen and (max-width:1079px){
	body.leftnav{
		padding-left:0px;
	}
	aside#leftnav{
		display:none;
		box-shadow:2px 0px 8px #EBEFEB;
	}	
	body.leftnav header#topnav{
		width:100%;
	}
}