@font-face {
  font-family: 'open sans';
  src: URL('../fonts/OpenSans/OpenSans-Light.ttf') format('truetype');
  font-weight: 300; /*lighter*/
}
@font-face {
  font-family: 'open sans';
  src: URL('../fonts/OpenSans/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400; /*normal*/
}
@font-face {
  font-family: 'open sans';
  src: URL('../fonts/OpenSans/OpenSans-Medium.ttf') format('truetype');
  font-weight: 500;
}
@font-face {
  font-family: 'open sans';
  src: URL('../fonts/OpenSans/OpenSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'open sans';
  src: URL('../fonts/OpenSans/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700; /*bold*/
}
@font-face {
  font-family: 'open sans';
  src: URL('../fonts/OpenSans/OpenSans-ExtraBold.ttf') format('truetype');
  font-weight: 800; /*bolder*/
}

* {
	font-family: 'open sans', sans-serif;
}
body {
	background-color: #F5F8FA;
	font-size: .875rem;
}

.form-control {
	font-size: .875rem;
	border-radius: .12rem;
}

.input-group-sm > .custom-select, 
.input-group-sm > .form-control, 
.input-group-sm > .input-group-append > .btn, 
.input-group-sm > .input-group-append > .input-group-text, 
.input-group-sm > .input-group-prepend > .btn, 
.input-group-sm > .input-group-prepend > .input-group-text {
	border-radius: .12rem;
}

.form-control:focus {
	box-shadow: unset;
}
.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
	box-shadow: unset;
}
.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
	box-shadow: unset;
}
.form-control.is-valid, .was-validated .form-control:valid{
	padding-right: .5rem !important;
	background-image: unset;
}

form .col-form-label {
	color: rgba(0,0,0,.6) !important;
}
form .form-control {
	color: rgba(0,0,0,.7) !important;
}

sup.required{
	color: red;
}

.btn.btn-outline-matrix {
	padding: 0.375rem 1rem;
	font-size: .875rem;
  	border-radius: .1rem;
	/* letter-spacing: 0.4px; */
}

.btn.btn-outline-matrix.disabled,
.btn.btn-outline-matrix:disabled {
	opacity: .65;
	cursor: not-allowed;
}

.btn.btn-outline-matrix.btn-sm {
  	border-radius: .1rem;
	padding: 0.25rem 0.7rem;
	font-size: .875rem;
}

.btn.btn-outline-matrix:focus, 
.btn.btn-outline-matrix.focus {
	background-color: #F5F8FA;
  	box-shadow: unset;
}

.btn.btn-outline-matrix {
	color: #000;
	border-color: #8b9195;
}

.btn.btn-outline-matrix:hover {
	color: #000;
	background-color: #F5F8FA;
	border-color: #3d4042;
}

.logo-item{
  	/* border-bottom: 2px solid orange !important; */
}
.logo-item::after {
	content: '';
	display: block;
	width: 80%;
	margin: 0 auto;
	height: 3px;
	border-radius: 100px 0 100px 0;
	/* background: linear-gradient(130deg, darkorange, orange 41.07%, lightgreen 76.05%); */
	background: orange;
}

#sidebarMenu .feather {
  	width: 20px;
  	height: 20px;
  	vertical-align: text-bottom;
}

/*
 * Sidebar
 */

.sidebar {
  	position: fixed;
  	top: 0;
  	bottom: 0;
  	left: 0;
  	z-index: 1031; /* Behind the navbar */
  	padding: 0px 0 0; /* Height of navbar 48px*/
  	/* box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); */
  	box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

@media (max-width: 767.98px) {
  	.sidebar {
    	top: 5rem;
  	}
}

.sidebar-sticky {
	position: relative;
	top: 0;
	height: calc(100vh - 48px);
	/* padding-top: .5rem; */
	overflow-x: hidden;
	overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
	.sidebar-sticky {
		position: -webkit-sticky;
		position: sticky;
	}
}

.sidebar .nav-item {  
  	margin: .5rem 0;
}
.sidebar .nav-link {
	font-weight: 500;
	color: #333;
	text-align: center;
	font-size: .675rem;
}

.sidebar .nav-link .feather {
	margin-right: 4px;
	color: #999;
}

.sidebar .nav-link .icon{
	font-size: 1.46rem !important;
	color: #999;
}
.sidebar .nav-link.active, .sidebar .nav-link.active .icon {
	color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
	color: inherit;
}

.sidebar-heading {
	font-size: .75rem;
	text-transform: uppercase;
}

/*
 * Navbar
 */
 
body {
	padding-top: 3.2rem;
}
.navbar-brand {
	padding-top: .75rem;
	padding-bottom: .75rem;
	font-size: 1rem;
	font-weight: bolder;
	/* text-align: center; */
	/* background-color: rgba(0, 0, 0, .25); */
	/* box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); */
}
.navbar .navbar-toggler {
	top: .25rem;
	right: 1rem;
}
.navbar .nav-item{
	padding-right: .3rem;
	padding-left: .3rem;
}

.dropdown-item.active, .dropdown-item:active {
	color: #000;
	background-color: lightcyan;
}

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.card{
    	margin-bottom: 1rem;
  	}
	.logo-item {
	  	display: none;
	}
}

 /* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  	.card{
    	margin-bottom: 1rem;
  	}
  	.logo-item {
    	display: none;
  	}
}
 
 /* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	/* .navbar .nav-item:after{
		content: '';
		display: block;
		margin-top: -5px;
		border-bottom: 2px solid orange;
		transform: scaleX(0);
		transition: .2s ease-in-out;
	}
	.navbar .nav-item:hover:after{
  		transform: scaleX(1);
	} */
  	.logo-item {
    	display: block;
  	}
}
 
 /* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
   
}
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
   
} 

.card {
	/* overflow: auto; */
	border: 0;
	border-radius: 0.5rem;
	box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.02);
}

.bootstrap-select .dropdown-menu,
.datepicker-dropdown,
nav .dropdown-menu {
	font-size: inherit;
}
.bootstrap-select button.dropdown-toggle {
	background-color: #fff;
  	border-color: #d3d9df;
}
.bootstrap-select.show > dropdown-toggle {
	background-color: #fff;
  	border-color: #d3d9df;
}
.datepicker .table-sm td, .datepicker .table-sm th {
	padding: .2rem .3rem;
}

div.dataTables_scrollBody {
	border-left: 0 !important;
}
input.input-date {
	width: 120px;
}
input.input-time {
	width: 100px;
}
.default-width {
	width: 250px !important;
}
.small-width {
	width: 150px !important;
}
.tiny-width {
	width: 50px !important;
}

#loader{
    text-align: center !important;
    height:42px;
    width:42px;
    border: 6px solid #f3f3f3;
    border-radius:50%;
    border-top: 6px solid #FFB500;
    border-bottom: 6px solid #007BFF;
    animation: spin 2s linear infinite;
}
@keyframes spin{
    0% {transform : rotate(0deg);}
    100% {transform : rotate(360deg);}
}