html {
  font-size: 12px;
}

.no-padding {
	padding-left: 0;
	padding-right: 0;
}

.keep-aspect {
	object-fit: cover
}

.header-login{
	width:100%;
	max-height: 334px;
}

.bg-iqdata{
	background-color: #1c8fcc!important;
}

.text-iqdata{
	color: #1c8fcc;
	font-weight: 500;
    line-height: 1.1;
}

.text-red{
	color: red;
	/*display: inline-block*/
	line-height: inherit;
}

.text-green{
	color: green;
}

.text-amber{
	color: orange;
}

.text-gold{
	color: gold;
}

.text-disabled{
	color: lightgrey
}

:root {
	--niqo-blue: #1198d0;
	--niqo-dark-blue: #002146;
}

.niqo-blue{
	color: var(--niqo-blue);	
}
.bg-niqo-blue{
	background-color: var(--niqo-blue);
}

.niqo-dark-blue{
	color: var(--niqo-dark-blue);
}
.bg-niqo-dark-blue{
	background-color: var(--niqo-dark-blue);
}

.icon-background {
    color: #fefefe;
}

/* nav bar with tabs */
.nav-tabs > .nav-link {
	color: #495057;
	border-color: #fff #fff #dee2e6;
	background-color: #dee2e6;	
}

.nav-tabs > .nav-link:hover {
	border-color: #fff #fff #495057;
}

/* remove bottom margin from alert */
.remove-bottom-margin > .alert {
	margin-bottom: 0px;
}

thead>tr>th { font-size: 12px; }
.dataTable td { 
	font-size: 11px; 
	padding: .3rem;
}

.dataTables_wrapper tr{
	cursor: pointer;
}

div.dataTables_wrapper label {
	margin-bottom: 1px;
}

.dropshadow {
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}

.cardshadow {
/*	-webkit-box-shadow: 0px 0px 2px 1px rgba(136,136,136,1);
	-moz-box-shadow: 0px 0px 2px 1px rgba(136,136,136,1);
	box-shadow: 0px 0px 2px 1px rgba(136,136,136,1);
*/
	-webkit-box-shadow: 0px 1px 2px 0px rgba(136,136,136,1);
	-moz-box-shadow: 0px 1px 2px 0px rgba(136,136,136,1);
	box-shadow: 0px 1px 2px 0px rgba(136,136,136,1);
}

.cardhighlight{
	-webkit-box-shadow: 0px 0px 2px 4px rgba(7, 247, 247,.8);
	-moz-box-shadow: 0px 0px 2px 4px rgba(7, 247, 247,.8);
	box-shadow: 0px 0px 2px 4px rgba(7, 247, 247,.8);
}

.inset {
	-webkit-box-shadow: inset 0px 0px -2px -1px rgba(51,51,51,1);
	-moz-box-shadow: inset 0px 0px -2px -1px rgba(51,51,51,1);
	box-shadow: inset 0px 0px -2px -1px rgba(51,51,51,1);
}

/* bootstrap dropdown over leaflet */
div.dropdown-menu.show {
	z-index: 1001;
}

/* bootstrap alternate checkbox */
input.custom-checkbox:checked {
	accent-color: rgb(64, 67, 73) !important;
}

input.custom-checkbox:focus {
	box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
	background-color: #C8FFC8;
}

/* bootstrap alternate checkbox - completion of task */
input.completion-checkbox:checked {
	accent-color: rgb(65, 131, 7) !important;
}

input.completion-checkbox:focus {
	box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
	background-color: #C8FFC8;
}



/*datatables with hidden details*/
td.details-control {
    text-align:center;
    color:#343a40;
    cursor: pointer;
}
tr.shown td.details-control {
    text-align:center; 
    color:#007bff;
}

/*datatables: used in sliding effect of appearing and disappearing of rows*/
div.slider {
    display: none;
}

/*datatables: slim header*/
tr.slim th {
	padding-top: 2px;
	padding-bottom: 1px;
}

/*datatables: no padding on sides*/
div.card.nopadding div.dataTables_wrapper div.row div.col-md-12 {
	padding: 0px;
}

/*datatables: highlighted row by lines*/
tr.lines td {
  border-bottom:1pt solid black;
  border-top:1pt solid black;
}

/*datatables: highlighted row by yellow colour*/
tr.rowHighlight td{
	background-color:#FFFBCC;
}

/* for datatables */
.greyed-out {
	color: gray;
}

.half-transparent {
    background-color:rgba(0, 0, 0, 0.5);
}

.half-opaque {
	opacity:0.4
}

/* Because of the navbar which is fixed to the top */
body { padding-top: 40px; }

/* filter overlay underneath navbar */
#filter-overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 0px; /* Full height (cover the whole page) */
  top: 45; 
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0px 0px 5px 5px;
  padding: 20px 10px 5px 10px;
  background-color: rgba(198, 223, 246, 0.9); /* Black background with opacity */
  z-index: 500; /* Leaflet uses 400 */
  cursor: pointer; /* Add a pointer on hover */
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  overflow:hidden;
}

/* timeline */
.tm-normaal, .tm-normaalbedrijf {
    border-color: blue;
	background-color: #1198d0;
	color: white
}
.tm-laag, .tm-laagbedrijf {
	border-color:  #1198d0;
	background-color: lightblue;
	color: black	
}
.tm-vakantie, .tm-vakantiebedrijf {
	border-color:  #1198d0;
	background-color: lightgrey;
	color: darkslategrey
}
.tm-high {
	border-color: darkgrey;
	background-image: linear-gradient(lightcoral, whitesmoke);
	/* background-color: lightcoral; */
	color: black
}
.tm-high-active {
	border-color: black;
	/* background-color: red; */
	background-image: linear-gradient(red, lightcoral);
	color: white
}
.tm-low {
	border-color: black;
	background-image: linear-gradient(whitesmoke, lightcoral);
	color: black
}
.tm-low-active {
	border-color: black;
	background-image: linear-gradient(lightcoral, red);
	color: white
}
.timeline-saturday{
	background-color:lightgoldenrodyellow
}
.timeline-sunday{
	background-color: lightgoldenrodyellow
}

.tm-vlotterhoog > .vis-item-content {
	position:relative;
	padding: 1px;
	margin: 1px;
	background-color: whitesmoke;
}    
.tm-vlotterhoog > .vis-item-content:after {
    content: "\f35b"; 
	font-family: 'Font Awesome\ 5 Free';;
	font-weight: 900;
	font-size: 16;
    left:0px;
    /* position:absolute; */
    /* top:-5; */
}
.tm-vlotterlaag > .vis-item-content {
	position:relative;
	padding: 1px;
	margin: 1px;
	background-color: whitesmoke;
}    
.tm-vlotterlaag > .vis-item-content:after {
    content: "\f358"; 
	font-family: 'Font Awesome\ 5 Free';;
	font-weight: 300;
	font-size: 16;	 
    left:0px;
    /* position:absolute; */
    /* top:0; */
}

.tm-poweron > .vis-item-content {
	position:relative;
	padding: 1px;
	margin: 1px;
	min-width: 18px;
	background-color: whitesmoke;
}    
.tm-poweron > .vis-item-content:after {
    content: "\f1e6"; 
	font-family: 'Font Awesome\ 5 Free';;
	font-weight: 900;
	font-size: 16;
	left:0px;
	color: green;
    /* position:absolute; */
    /* top:-5; */
}
.tm-powerdown > .vis-item-content {
	position:relative;
	padding: 1px;
	margin: 1px;
	/* min-width: 15px; */
	background-color: whitesmoke;
}    
.tm-powerdown > .vis-item-content:after {
    content: "\f011"; 
	font-family: 'Font Awesome\ 5 Free';;
	font-weight: 900;
	font-size: 16;	 
	left:0px;
	color:red;
    /* position:absolute; */
    /* top:0; */
}

.bg-akanova {
	background-image: url("/image/backgroundSplash.png");
	background-position: right bottom;
	background-attachment: fixed;
	background-repeat: no-repeat; /*Prevent showing multiple background images*/	
}

.hidden {
	display: none;
}

/* progress bar */

.progress_bar .pro-bar {
    background: hsl(0, 0%, 97%);
    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.1) inset;
    height:4px;
    margin-bottom: 12px;
    margin-top: 12px;
    position: relative;
}
.progress_bar .progress_bar_title{
    color: hsl(218, 4%, 50%);
    font-size: 15px;
    font-weight: 300;
    position: relative;
    top: -28px;
    z-index: 1;
}
.progress_bar_title{
	/* color: hsl(218, 4%, 50%); */
    /* font-size: 15px; */
    /* font-weight: 300; */
	width: 100%;
    position: relative;
    z-index: 1;
}
.progress_bar .progress_number{
    float: right;
    margin-top: 0px;
}
.progress_bar .progress-bar-inner {
    background-color: hsl(0, 0%, 88%);
    display: block;
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 1s linear 0s;
}
.progress_bar .progress-bar-inner:before {
    content: "";
    background-color: hsl(0, 0%, 100%);
    border-radius: 50%;
    width: 4px;
    height: 4px;
    position: absolute;
    right: 1px;
    top: 0;
    z-index: 1;
}
.progress_bar .progress-bar-inner:after {
    content: "";
    width: 14px;
    height: 14px;
    background-color: inherit;
    border-radius: 50%;
    position: absolute;
    right: -4px;
    top: -5px;
}

/* progress dots */
.circle-progress-value {
	stroke-width: 2px;
	stroke: #1198d0;
	stroke-dasharray: 0 10;
	stroke-linecap: round;
}

.progress[aria-valuenow="0"] .circle-progress-value {
	display: none;
}

.circle-progress-circle {
	stroke: transparent;
}

.circle-progress-text {
	font-family: "Gotham rounded";
	font-size: 6px;
	fill: #1198d0;
}

/* flex */

.flexrow{
	display:flex
}

.flexrow > .center-items {
	align-items: stretch;
	justify-content: center;
}

.flexchild{
	min-width: 0;
}

/* truncate div */
.truncate {
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;	
}

/* stretch to full height */
.stretch-vert{
	min-height: 100vh;
}
.stretch-vert80{
	min-height: 80vh;
}
.stretch-vert-from-header{
	min-height: calc(90vh - 200px);
}
.stretch-vert50{
	min-height: 50vh;
}


.with-linebreaks{   
	word-wrap: break-word;      /* IE 5.5-7 */   
	white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */   
	white-space: pre-wrap;      /* current browsers */ 
}

/* loader */
.lds-ellipsis {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 18px;
}

.lds-ellipsis div {
	position: absolute;
	top: 2px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #555;
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
	left: 8px;
	animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
	left: 8px;
	animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
	left: 32px;
	animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
	left: 56px;
	animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes lds-ellipsis3 {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(0);
	}
}

@keyframes lds-ellipsis2 {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(24px, 0);
	}
}


/* status indicators */
@import "compass/css3";

body {
	margin: 20px;
}


ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.status {
	&.green:before {
		background-color: #94E185;
		border-color: #78D965;
		box-shadow: 0px 0px 4px 1px #94E185;
	}

	&.amber:before {
		background-color: #FFC182;
		border-color: #FFB161;
		box-shadow: 0px 0px 4px 1px #FFC182;
	}

	&.red:before {
		background-color: #C9404D;
		border-color: #C42C3B;
		box-shadow: 0px 0px 4px 1px #C9404D;
	}

	&:before {
		content: ' ';
		display: inline-block;
		width: 7px;
		height: 7px;
		margin-right: 5px;
		border: 1px solid #000;
		border-radius: 7px;
	}
}

/* A more interesting checkbox */

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 22px;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 18px;
	width: 18px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked+.slider {
	background-color: #2196F3;
}

input:focus+.slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
	-webkit-transform: translateX(20px);
	-ms-transform: translateX(20px);
	transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 22px;
}

.slider.round:before {
	border-radius: 50%;
}

/* font sizes */
.large {
	font-size: 1.2em;
}
.small {
	font-size: 0.8em;
}