/* override pseudo classes met bootstrap vars */

@font-face {
    font-family: 'Calibri';
    src: url('/fonts/calibri.ttf');
}

@font-face {
    font-family: "Calibri";
    src: url("/fonts/calibrib.ttf");
    font-weight: bold;
}

@media print 
{
	.col-lg-10 
	{
		width: 100%;
	}
	
	ul,
	h5.noprint,
	button.noprint,
	div.bg-body-tertiary,
	nav.bg-body-tertiary 
	{
		display: none !important;
	} 
}


#inlimepdf
{
	font-family: Calibri, sans-serif;
}

input[type="file"]::file-selector-button 
{
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
}

input[type="file"]:hover::file-selector-button, 
input[type="file"]:focus::file-selector-button
{
	background-color: var(--bs-btn-hover-bg) !important;
	color: var(--bs-btn-hover-color) !important;
}

.red /* testje */
{
	color: red !important;
}

a.nav-link
{
	word-break: keep-all;
	white-space: nowrap;
}

td.bgnormal
{
	/*border-bottom: 3px solid var(--bs-tertiary-bg);*/
}

/* we maken een background color bij light theme, en een bottom border bij dark theme */

td.bgred
{
	/*border-bottom: 4px solid color-mix(in oklab, red 30%, white);
	background-color: color-mix(in oklab, red 30%, white);*/
	
	background-color: light-dark( color-mix(in oklab, red 30%, white), transparent);
	border-bottom: 3px solid light-dark(transparent, color-mix(in oklab, red 70%, white) );
}

td.bggreen
{
	/*border-bottom: 4px solid color-mix(in oklab, lightgreen 30%, white);
	background-color: color-mix(in oklab, lightgreen 30%, white);*/
	
	background-color: light-dark( color-mix(in oklab, lightgreen 30%, white), transparent );
	border-bottom: 3px solid light-dark(transparent, color-mix(in oklab, lightgreen 70%, white) );
}

td.bgyellow
{
	/*border-bottom: 4px solid color-mix(in oklab, orange 30%, white);
	background-color: color-mix(in oklab, orange 30%, white);*/
	
	background-color: light-dark( color-mix(in oklab, orange 30%, white), transparent);
	border-bottom: 3px solid light-dark(transparent, color-mix(in oklab, orange 70%, white) );
}

td.bggray
{
	background-color: light-dark(color-mix(in oklab, grey 20%, white), var(--bs-gray-700));
	/* border-bottom: 3px solid light-dark(transparent, color-mix(in oklab, grey 20%, white) );	*/
}

.datepicker-checkbox
{
	margin-top: 12px;
}

.inline-block
{
	display: inline-block !important;
	width: auto;
}

.right
{
	text-align: right;
}

.nowordbreak
{
	word-break: keep-all;
	white-space: nowrap;
}

.prewrap
{
	white-space: pre-wrap;
}

td.nopadding
{
	padding-top: 1px;
	padding-bottom: 0px;
}

/*td > button
{
	padding-top: 0px !important;
}*/

.fixbottom
{
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	z-index:-1;
}

.nav-item
{
	height: 28px !important;
}

jhhjjktd
{
	padding-top: 0.25rem !important;
	padding-bottom: 0 !important;
}

div.pagebreak
{
	border-top: 0.5px solid #888;
	break-after: page;
}

/* tbv feedback slider */

input.form-range {
  //--SliderColor: hsl(50, 100%, 50%);
  -webkit-appearance: none;
  //width: 60%;
  //margin: 50px auto;
  //height: 8px;
  //border-radius: 4px;
  //margin-bottom: 15px;
  //background-color: rgb(200, 200, 200);
}

input.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  background-color: var(--bs-secondary);
  overflow: visible;
  cursor: pointer;
}

/* idem */
input.form-range::-moz-range-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  background-color: var(--bs-secondary);
  overflow: visible;
  cursor: pointer;
}

/* transposed tables */

/*
@supports (display: grid) {
   .vertical {
     display: grid;
     grid-template-columns: min-content min-content;
     grid-template-rows: auto auto;
     grid-template-areas:
       "caption caption"
       "head body";
   }
   .vertical thead {
     grid-area: head;
   }
   .vertical tbody {
     grid-area: body;
   }
   .vertical caption {
     grid-area: caption; 
   }
}

.vertical thead {
  display: flex;
  flex-shrink: 0;
  min-width: min-content;
}
.vertical tbody {
    display: flex;
}
.vertical tr {
  display: flex;
  flex-direction: column;
  min-width: min-content;
  flex-shrink: 0;
}
.vertical td, .vertical th {
  display: block;
}
.vertical caption {
  display: block;
}

*/

/* 
@mixin rangeThumb {
  width: 18px;
  height: 18px;
  margin: -8px 0  0;
  border-radius: 50%;
  background: #37adbf;
  cursor: pointer;
  border: 0 !important;
}

@mixin rangeTrack {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #b2b2b2;
}

.range {
  position: relative;
  width: 550px;
  height: 5px;
}

.range input {
	width: 100%;
	position: absolute;
	top: 2px;
	height: 0;
	-webkit-appearance: none;
	
	// Thumb
	&::-webkit-slider-thumb {
		-webkit-appearance: none; // needed again for Chrome & Safari
		@include rangeThumb;
	}
	
	&::-moz-range-thumb {
		@include rangeThumb;
	}
	
	&::-ms-thumb {
		@include rangeThumb;
	}
	
	// Track
	&::-webkit-slider-runnable-track {
		@include rangeTrack;
	}
	
	&::-moz-range-track {
		@include rangeTrack;
	}
	
	&::-ms-track {
		@include rangeTrack;
	}
	
	&:focus { // override outline/background on focus
		background: none;
		outline: none;
	}
	
	&::-ms-track { // A little somethin' somethin' for IE
		width: 100%;
		cursor: pointer;
		background: transparent;
		border-color: transparent;
		color: transparent;
	}
}

.range-labels {
	margin: 18px 37px 0;
	padding: 0;
	list-style: none;
	
	li {
		position: relative;
		float: left;
		width: 67px;
		text-align: center;
		color: #b2b2b2;
		font-size: 14px;
		cursor: pointer;
	
	/*&::before {
		position: absolute;
		top: -25px;
		right: 0;
		left: 0;
		content: "";
		margin: 0 auto;
		width: 9px;
		height: 9px;
		background: #b2b2b2;
		border-radius: 50%;
	}*/
}*/