@import url('https://fonts.googleapis.com/css?family=Karma:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700,800,900');

* {
	box-sizing: border-box;
} 
body {
	margin: 0;
	padding: 0;
	font-family: 'Fira Sans','Karma', sans-serif , serif !important;
	background-color: #FAFAFA !important;
	/* -webkit-font-smoothing: antialiased;
	  	-moz-osx-font-smoothing: grayscale; */
}


.hide{
	overflow: hidden;
}
/* logo in header(mobile version) and side-nav (tablet & desktop) */
.logo {
	height: 73px;
	padding: 10px;
	font-weight: 700;
}
.side-menu-item.active{
	border-left: 3px solid #fff;
	z-index: 2;
    color: #fff;
    background-color:transparent !important;
    border-color: none !important;
    border-left: 3px solid #fff !important;
    /*box-shadow: inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px transparent, 0 1px 0 transparent;*/
}
.bg-linear{
	background: linear-gradient(180deg, #0B2D40 -6.2%, rgba(74, 88, 153, 0.99) 115.14%); !important;
	min-height: 150vh!important;
	
}
.bg-linear-s{
	background: linear-gradient(180deg, #0B2D40 -6.2%, rgba(74, 88, 153, 0.99) 115.14%); !important;
	min-height: 100vh!important;
	
}
.bg-transparent{
	background: transparent !important;
}
.list-none{
	list-style-type: none;
}
.f-fira{
	font-family: 'Fira Sans', sans-serif;
}
.mt-4e{
	margin-top: 4em;
}
.mt-5e{
	margin-top: 5em;
}
.mt-6e{
	margin-top: 6em;
}
.width-60{
	width:60px;
}
.width-80{
	width:80px;
}
.width-110{
	width:108%;
}
.width-120{
	width:120px;
}
.width-30p{
	width:30%;
}
.width-40p{
	width:40%;
}
.h-37{
	height: 37px;
}
.mlr-adj{
	margin-left: 0px; 
    margin-right: -15px;
    padding-left: 7px;
    padding-right: 0;
}
.h-73{
	height: 73px;
}
.h-100{
	height: 100vh !important;
}
.mt-75{
	margin-top: 75px;
	width: 100%;
}
.plr-5{
	padding: 0 7px !important;
}
.blue-color{
	color:#4368A5;
}
.blue-arrow{
	color: #4564A2;
}
.logged-user::after{
	color:#4368A5 !important;
}
.reports::after{
	color:#FFF;
}
.dark_red{
	color: #B07156;
}
.mlr-0{
	margin-right: 0px;
	margin-left: -4px;
	padding-right: 0;
	padding-left: 0;
}
.search-input{
	width:80px;
	display: inline;
}

.side-menu-item{
	background: transparent;
	font-size: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 50px;
}
img.dashboard{
	padding-top: 10px 15px !important;
}
.bd-light{
	border:  1px solid #F2F2F2;;
}
.bd-b-blue{
	border-bottom: 3px solid #2B95C9;
}
.bd-b-green{
	border-bottom: 3px solid #219653;
}
.bd-b-red{
	border-bottom:3px solid #EB5757;
}
.bd-b-dark{
	border-bottom: 3px solid #0B2D40;
}
.bd-l-blue{
	border-left: 3px solid #4368A5;
}
.bd-l-red{
	border-left:3px solid #EB5757;
}
.bd-l-dark{
	border-left: 3px solid #0B2D40;
}
.bd-l-green{
	border-left: 3px solid #219653;
}
.bd-l-yellow{
	border-left: 3px solid #FED766;
}
.bd-l-light_blue{
	border-left: 3px solid #2B95C9;
}
.bd-l-purple{
	border-left: 3px solid #9B51E0;
}
.bd-r-light_blue{
	border-right: 3px solid #2B95C9;
}
.bd-r-green{
	border-right:3px solid #219653;
}
.bd-r-red{
	border-right: 3px solid #B07156;
}
.fw-700{
	font-weight: 700;
}
/*admin dashboard*/
.card-box{
	/*width: 173px;*/
	padding: 1rem;
	height: 122px;
}
.cardBox_wrapper:hover{
	text-decoration: none;
}
.card-box:hover{
	text-decoration: none;
	color: #2B95C9;
	-webkit-transform: translateY(-5px) scale(1.02);
	transform: translateY(-5px) scale(1.02);
	-webkit-box-shadow: 0px 5px 12px rgba(126, 142, 177, 0.2);
		 /*box-shadow: 0px 5px 12px rgba(126, 142, 177, 0.2);*/
		  box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);
}
.fc-center{
	color: #279CCE;
}
/*Admin employee*/
.dot{
	position: absolute;
    margin-top: 3px;
	background: #219653;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid #219653;
}
.bd-white{
	border-top: 3px solid #fff;
}
.search-input{
	width: 100px;
    display: inline-block;
    margin-right: 4px;
}
.search-btn{
	width: 40px;
    height: 40px;
    background: #fff;
    border: none;
    box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);
}
.employee-card-wrapper:hover{
	text-decoration: none;
}
.btn-delete {
	width: 199px;
	height: 40px;
	background: #EB5757;
	border-radius: 5px;
}
.mb-75{
	margin-bottom: 75px;
}
/*settings*/

.tab-control:hover{
	color: #4f4f4f;
}
.tab-control.active{
	border-bottom: 2px solid #2C92C7 !important;
}
/* custom checkbox */
.color-box{
	width:20px;
	height: 20px;
	float: left;
}
.control.blue-checkbox input:checked ~ .control_indicator {
    background: #0B2D40;
}
/*modal*/
input.arrival_time{
	border-bottom:  1px solid #BDBDBD !important;
}
.tb-scroll{
	height: 300px;
	overflow: scroll;
}
button.close:hover{
	color: #EB5757;
}
.employee_thumbnail{
	width: 100px;
	margin:auto;
	margin-top: -3em;
}
.img_dot{
	width: 7px;
    height: 7px;
    /*background: #219653;*/
    position: absolute;
    border-radius: 50%;
    top: 1.3em;
    left: 9.1em;
}
.mt--3e{
	margin-top: -3.6em;
}
.mt--2e{
	margin-top: -1.5em;
}
.append-btn{
	border: 1px solid #ced4da;
    border-left-color: #fff;
    margin-left: -2px;
}
.bd-l-white{
	border-right-color: #fff;
}

.ldBar-label {
    color: red;
    font-family: tahoma;
    font-size: 1.5em;
    font-weight: 900;
    /*position: relative;*/
    text-align: center;
    margin-top: -70%;
}
.ldBar-label:after{
	content:"%";
	display:inline;
}
.btn-deep-blue{
	background-color: #13334d;
	color: #fff;
}
.tb-scroll{
	height: 300px;
	overflow: scroll;
}
.select:active{
	border: 0;
	outline: ;
	box-shadow: 0;
}
.select:focus{
	border: 0;
	outline: 0;
	box-shadow: 0;
}
.card-shdw{
	box-shadow: 0px 0px 6px #c4c4c4;
}

.okk{
	margin-left:0.1%;
}



























@media( min-width:1210px){
	.wide-navbar{
		width:113%;
		margin-left: -15px;
	}
}
@media( max-width: 1200px ){
	
	.wide-navbar{
		width:110%;
		margin-left: -15px;
		padding-right: 40px;
	}
	.element-wrapper{
		width:100%;
		padding: 0 1em;
	}
	#startDate, #endDate, #location, #employee-select, #worktime{
		margin-bottom: 20px;
	}
	.card-box{
		margin-bottom: 1em;
		height: 190px;
	}
	.img_dot{
		left: 6.4em;
	}
	#arrowDown, #arrowUp{
		float: right;
		margin-top: -1em;
	}

}
@media( max-width: 768px ){
	.side-menu-item{
		margin-left: 1em;
		padding-left: 30px;
	}
	.wide-navbar{
		width: 100%;
	    margin-left: 0;
	}
	.element-wrapper{
		width:100%;
		padding: 0 2em;
	}
	.card-box{
		margin-bottom: 1em;
	}
	#startDate, #endDate, #location, #employee-select, #worktime{
		margin-bottom: 20px;
	}
	.search-input{
		width:160px;
	}
	.employee-card{
		margin-bottom: 4em;
	}
	.password-settings{
		padding:0 2em;
	}
	.chart{
		margin-top: 20px;
	}
	.img_dot{
		left: 8em;
	}
	.table-controls button{
		margin-bottom: 10px;
	}
	.employee-card{
		margin-bottom: 20px;
	}
	#arrowDown, #arrowUp{
		float: right;
		margin-top: -1em;
	}
	

}


@media(max-width: 575px){
	
	.side-menu-item{
		padding-left: 40px;
	}
	
	.wide-navbar{
		width: 100%;
	    margin-left: 0;
	}
	.element-wrapper{
		width:100%;
		padding: 0 2em;
	}
	.card-box{
		margin-bottom: 1em;
	}
	#startDate, #endDate, #location, #employee-select, #worktime, #cardMonth{
		margin-bottom: 20px;
	}
	.search-input{
		width:200px;
	}
	.employee-card{
		margin-bottom: 4em;
	}
	.dot{
    	margin-bottom: 15px;
	}
	.password-settings{
		padding:0 2em;
	}
	.chart{
		margin-top: 20px;
	}
	.img_dot{
		left: 9.5em;
	}
	.table-controls button{
		margin-bottom: 10px;
	}
	.chart-card{
		padding-top: 30%;
	}
	#myChart{
		margin-top: 40%;
	}
	#editBtn{
		margin-bottom: 20px;
	}
	.attendance-card{
		margin-bottom: 20px;
	}
	#renewBtn{
		margin-top: 20px;
	}
}