@charset "utf-8";
/* CSS Document */


/* --------------------------------------------------------
   Basisstijl: nooit afbreken, toon “…” bij te lange tekst
   -------------------------------------------------------- */
.truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  max-width: 500px;
}

/* --------------------------------------------------------
   Bootstrap 5 grid breakpoints (xxl → xs)
   -------------------------------------------------------- */
@media (max-width: 1399.98px) { .truncate { max-width: 500px; } }
@media (max-width: 1199.98px) { .truncate { max-width: 400px; } }
@media (max-width: 991.98px)  { .truncate { max-width: 300px; } }
@media (max-width: 767.98px)  { .truncate { max-width: 220px; } }
@media (max-width: 575.98px)  { .truncate { max-width: 150px; } }
@media (max-width: 399.98px)  { .truncate { max-width: 120px; } }


/* Datatables dark */
[data-bs-theme=dark] .table.fixedHeader-floating thead th {
	background-color: #323232;
	border-bottom: 1px solid #323232;
	color: #fff; 
	font-weight: 400;
}

[data-bs-theme=dark] .highcharts-title {
	color: #fff !important;
	fill: #fff !important;
}
[data-bs-theme=dark] .highcharts-yaxis-grid .highcharts-grid-line {
	color: #606060;
	fill: #606060 !important; 
	stroke: #606060 !important;
} 
[data-bs-theme=dark] .highcharts-data-label {
	stroke: #fff !important;
}
[data-bs-theme=dark] .highcharts-text-outline {
	stroke: #000000 !important; 
}
[data-bs-theme=dark] .highcharts-column-series {
/*	stroke: #fff !important;  */
}
[data-bs-theme=dark] text {
	fill: #ccc !important; 
}

[data-bs-theme=dark] .highcharts-tooltip-box {
	color: #fff;
	fill: #212529 !important; 
    stroke-width: 1; 
}

[data-bs-theme=dark] .manuals {
	border-bottom: 1px solid #404040; 
}
[data-bs-theme=dark] .manuals:hover {
    color: #f1f1f1;
	background-color: #323232;
	border-bottom: 1px solid #404040;  
}


/*  Planning dark */
/*  Dag/datumweergave moet zwart zijn */
.fc-col-header-cell-cushion {
    color: #000!important;
}

.fc .fc-timeline-header-row-chrono { /* a row of times */
	color: #ccc;
  }
.fc .fc-timeline-slot-frame {
	color: #ccc; 
	background-color: #2d3238;
  }
.fc .fc-timeline-slot {
	border: 1px solid #ccc;
  }

.manuals {
	border-bottom: 1px solid #eee; 
}
.manuals:hover {
    color: #2C2C2C;
	background-color: #ccc;
	border-bottom: 1px solid #eee; 
}

a,
a:hover,
a:focus {
    text-decoration: none;
}
.btn-prisma {
	--bs-btn-color: #fff;
	--bs-btn-bg: #9933ff;
	--bs-btn-border-color: #9933ff;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #8000ff;
	--bs-btn-hover-border-color: #7300e6;
	--bs-btn-focus-shadow-rgb: 225, 83, 97;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #7300e6;
	--bs-btn-active-border-color: #6600cc;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #9933ff;
	--bs-btn-disabled-border-color: #9933ff
}
.text-bg-prisma {
	color: #fff !important;
	background-color: RGBA(153, 51, 255, var(--bs-bg-opacity, 1)) !important
}

textarea {
  field-sizing: content;
}

#scrollTopBtn {
    /* Plaatsing: Rechtsonder in het scherm */
    position: fixed; 
    bottom: 20px; /* 20 pixels vanaf de onderkant */
    right: 30px; /* 30 pixels vanaf de rechterkant */
    z-index: 99; /* Zorgt ervoor dat de knop boven alle andere elementen ligt */
    
    /* Basis Styling */
    background-color: #20ac6b; 
    color: white;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px; /* Een afgeronde hoek voor een mooier uiterlijk */
    font-size: 18px;
    
    /* Zorg dat de knop standaard verborgen is (pas zichtbaar bij scrollen) */
    display: none; 
}

#scrollTopBtn:hover {
    background-color: #198754; 
}