.pretty * {
  box-sizing: border-box;
}

.pretty input:not([type=checkbox]):not([type=radio]) {
  display: none;
}

.pretty {
  position: relative;
  display: inline-block;
  margin-right: 1em;
  white-space: nowrap;
  line-height: 1;
}
.pretty input {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 1em;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.pretty .state label {
  position: initial;
  display: inline-block;
  font-weight: normal;
  margin: 0;
  text-indent: 1.5em;
  min-width: calc(1em + 2px);
}
.pretty .state label:before, .pretty .state label:after {
  content: "";
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  display: block;
  box-sizing: border-box;
  border-radius: 0;
  border: 1px solid transparent;
  z-index: 0;
  position: absolute;
  left: 0;
  top: calc((0% - (100% - 1em)) - 8%);
  background-color: transparent;
}
.pretty .state label:before {
  border-color: #bdc3c7;
}
.pretty .state.p-is-hover, .pretty .state.p-is-indeterminate {
  display: none;
}

@keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes tada {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
    transform: scale(7);
  }
  38% {
    animation-timing-function: ease-out;
    opacity: 1;
    transform: scale(1);
  }
  55% {
    animation-timing-function: ease-in;
    transform: scale(1.5);
  }
  72% {
    animation-timing-function: ease-out;
    transform: scale(1);
  }
  81% {
    animation-timing-function: ease-in;
    transform: scale(1.24);
  }
  89% {
    animation-timing-function: ease-out;
    transform: scale(1);
  }
  95% {
    animation-timing-function: ease-in;
    transform: scale(1.04);
  }
  100% {
    animation-timing-function: ease-out;
    transform: scale(1);
  }
}
@keyframes jelly {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rotate {
  0% {
    opacity: 0;
    transform: translateZ(-200px) rotate(-45deg);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) rotate(0);
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0px 0px 0px 0px #bdc3c7;
  }
  100% {
    box-shadow: 0px 0px 0px 1.5em rgba(189, 195, 199, 0);
  }
}
.pretty.p-default.p-fill .state label:after {
  transform: scale(1);
}

.pretty.p-default .state label:after {
  transform: scale(0.6);
}
.pretty.p-default input:checked ~ .state label:after {
  background-color: #bdc3c7 !important;
}

.pretty.p-default.p-thick .state label:before, .pretty.p-default.p-thick .state label:after {
  border-width: 0.1428571429em;
}
.pretty.p-default.p-thick .state label:after {
  transform: scale(0.4) !important;
}

.pretty.p-icon .state .icon {
  position: absolute;
  font-size: 1em;
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  left: 0;
  z-index: 1;
  text-align: center;
  line-height: normal;
  top: calc((0% - (100% - 1em)) - 8%);
  border: 1px solid transparent;
  opacity: 0;
}
.pretty.p-icon .state .icon:before {
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  line-height: 1;
}
.pretty.p-icon input:checked ~ .state .icon {
  opacity: 1;
}
.pretty.p-icon input:checked ~ .state label:before {
  border-color: #5a656b;
}
.pretty.p-icon input:disabled ~ .p-off {
  opacity: 0.5;
}

.pretty.p-svg .state .svg {
  position: absolute;
  font-size: 1em;
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  left: 0;
  z-index: 1;
  text-align: center;
  line-height: normal;
  top: calc((0% - (100% - 1em)) - 8%);
  border: 1px solid transparent;
  opacity: 0;
}
.pretty.p-svg .state svg {
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  line-height: 1;
}
.pretty.p-svg input:checked ~ .state .svg {
  opacity: 1;
}

.pretty.p-image .state img {
  opacity: 0;
  position: absolute;
  width: calc(1em + 2px);
  height: calc(1em + 2px);
  top: 0;
  top: calc((0% - (100% - 1em)) - 8%);
  left: 0;
  z-index: 0;
  text-align: center;
  line-height: normal;
  transform: scale(0.8);
}
.pretty.p-image input:checked ~ .state img {
  opacity: 1;
}

.pretty.p-switch input {
  min-width: 2em;
}
.pretty.p-switch .state {
  position: relative;
}
.pretty.p-switch .state:before {
  content: "";
  border: 1px solid #bdc3c7;
  border-radius: 60px;
  width: 2em;
  box-sizing: unset;
  height: calc(1em + 2px);
  position: absolute;
  top: 0;
  top: calc((0% - (100% - 1em)) - 16%);
  z-index: 0;
  transition: all 0.5s ease;
}
.pretty.p-switch .state label {
  text-indent: 2.5em;
}
.pretty.p-switch .state label:before, .pretty.p-switch .state label:after {
  transition: all 0.5s ease;
  border-radius: 100%;
  left: 0;
  border-color: transparent;
  transform: scale(0.8);
}
.pretty.p-switch .state label:after {
  background-color: #bdc3c7 !important;
}
.pretty.p-switch input:checked ~ .state:before {
  border-color: #5a656b;
}
.pretty.p-switch input:checked ~ .state label:before {
  opacity: 0;
}
.pretty.p-switch input:checked ~ .state label:after {
  background-color: #5a656b !important;
  left: 1em;
}

.pretty.p-switch.p-fill input:checked ~ .state:before {
  border-color: #5a656b;
  background-color: #5a656b !important;
}
.pretty.p-switch.p-fill input:checked ~ .state label:before {
  opacity: 0;
}
.pretty.p-switch.p-fill input:checked ~ .state label:after {
  background-color: #fff !important;
  left: 1em;
}

.pretty.p-switch.p-slim .state:before {
  height: 0.1em;
  background: #bdc3c7 !important;
  top: calc(50% - 0.1em);
}
.pretty.p-switch.p-slim input:checked ~ .state:before {
  border-color: #5a656b;
  background-color: #5a656b !important;
}

.pretty.p-has-hover input:hover ~ .state:not(.p-is-hover) {
  display: none;
}
.pretty.p-has-hover input:hover ~ .state.p-is-hover {
  display: block;
}
.pretty.p-has-hover input:hover ~ .state.p-is-hover .icon {
  display: block;
}

.pretty.p-has-focus input:focus ~ .state label:before {
  box-shadow: 0px 0px 3px 0px rgb(189, 195, 199);
}

.pretty.p-has-indeterminate input[type=checkbox]:indeterminate ~ .state:not(.p-is-indeterminate) {
  display: none;
}
.pretty.p-has-indeterminate input[type=checkbox]:indeterminate ~ .state.p-is-indeterminate {
  display: block;
}
.pretty.p-has-indeterminate input[type=checkbox]:indeterminate ~ .state.p-is-indeterminate .icon {
  display: block;
  opacity: 1;
}

.pretty.p-toggle .state.p-on {
  opacity: 0;
  display: none;
}
.pretty.p-toggle .state.p-off,
.pretty.p-toggle .state .icon,
.pretty.p-toggle .state .svg,
.pretty.p-toggle .state img {
  opacity: 1;
  display: inherit;
}
.pretty.p-toggle .state.p-off .icon {
  color: #bdc3c7;
}
.pretty.p-toggle input:checked ~ .state.p-on {
  opacity: 1;
  display: inherit;
}
.pretty.p-toggle input:checked ~ .state.p-off {
  opacity: 0;
  display: none;
}

.pretty.p-plain input:checked ~ .state label:before, .pretty.p-plain.p-toggle .state label:before {
  content: none;
}
.pretty.p-plain.p-plain .icon {
  transform: scale(1.1);
}

.pretty.p-round .state label:before, .pretty.p-round .state label:after {
  border-radius: 100%;
}
.pretty.p-round.p-icon .state .icon {
  border-radius: 100%;
  overflow: hidden;
}
.pretty.p-round.p-icon .state .icon:before {
  transform: scale(0.8);
}

.pretty.p-curve .state label:before, .pretty.p-curve .state label:after {
  border-radius: 20%;
}

.pretty.p-smooth label:before,
.pretty.p-smooth label:after,
.pretty.p-smooth .icon,
.pretty.p-smooth .svg {
  transition: all 0.5s ease;
}
.pretty.p-smooth input:checked + .state label:after {
  transition: all 0.3s ease;
}
.pretty.p-smooth input:checked + .state .icon,
.pretty.p-smooth input:checked + .state .svg,
.pretty.p-smooth input:checked + .state img {
  animation: zoom 0.2s ease;
}
.pretty.p-smooth.p-default input:checked + .state label:after {
  animation: zoom 0.2s ease;
}
.pretty.p-smooth.p-plain input:checked + .state label:before {
  content: "";
  transform: scale(0);
  transition: all 0.5s ease;
}

.pretty.p-tada:not(.p-default) input:checked + .state .icon,
.pretty.p-tada:not(.p-default) input:checked + .state .svg,
.pretty.p-tada:not(.p-default) input:checked + .state img,
.pretty.p-tada:not(.p-default) input:checked + .state label:before,
.pretty.p-tada:not(.p-default) input:checked + .state label:after {
  animation: tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1 alternate;
  opacity: 1;
}

.pretty.p-jelly:not(.p-default) input:checked + .state .icon,
.pretty.p-jelly:not(.p-default) input:checked + .state .svg,
.pretty.p-jelly:not(.p-default) input:checked + .state img,
.pretty.p-jelly:not(.p-default) input:checked + .state label:before,
.pretty.p-jelly:not(.p-default) input:checked + .state label:after {
  animation: jelly 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}
.pretty.p-jelly:not(.p-default) input:checked + .state label:before {
  border-color: transparent;
}

.pretty.p-rotate:not(.p-default) input:checked ~ .state .icon,
.pretty.p-rotate:not(.p-default) input:checked ~ .state .svg,
.pretty.p-rotate:not(.p-default) input:checked ~ .state img,
.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before,
.pretty.p-rotate:not(.p-default) input:checked ~ .state label:after {
  animation: rotate 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 1;
}
.pretty.p-rotate:not(.p-default) input:checked ~ .state label:before {
  border-color: transparent;
}

.pretty.p-pulse:not(.p-switch) input:checked ~ .state label:before {
  animation: pulse 1s;
}

.pretty input[disabled] {
  cursor: not-allowed;
  display: none;
}
.pretty input[disabled] ~ * {
  opacity: 0.5;
}

.pretty.p-locked input {
  display: none;
  cursor: not-allowed;
}

.pretty input:checked ~ .state.p-primary label:after, .pretty.p-toggle .state.p-primary label:after {
  background-color: #428bca !important;
}
.pretty input:checked ~ .state.p-primary .icon,
.pretty input:checked ~ .state.p-primary .svg, .pretty.p-toggle .state.p-primary .icon,
.pretty.p-toggle .state.p-primary .svg {
  color: #fff;
  stroke: #fff;
}
.pretty input:checked ~ .state.p-primary-o label:before, .pretty.p-toggle .state.p-primary-o label:before {
  border-color: #428bca;
}
.pretty input:checked ~ .state.p-primary-o label:after, .pretty.p-toggle .state.p-primary-o label:after {
  background-color: transparent;
}
.pretty input:checked ~ .state.p-primary-o .icon,
.pretty input:checked ~ .state.p-primary-o .svg,
.pretty input:checked ~ .state.p-primary-o svg, .pretty.p-toggle .state.p-primary-o .icon,
.pretty.p-toggle .state.p-primary-o .svg,
.pretty.p-toggle .state.p-primary-o svg {
  color: #428bca;
  stroke: #428bca;
}
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after {
  background-color: #428bca !important;
}
.pretty.p-switch input:checked ~ .state.p-primary:before {
  border-color: #428bca;
}
.pretty.p-switch.p-fill input:checked ~ .state.p-primary:before {
  background-color: #428bca !important;
}
.pretty.p-switch.p-slim input:checked ~ .state.p-primary:before {
  border-color: #245682;
  background-color: #245682 !important;
}
.pretty input:checked ~ .state.p-info label:after, .pretty.p-toggle .state.p-info label:after {
  background-color: #5bc0de !important;
}
.pretty input:checked ~ .state.p-info .icon,
.pretty input:checked ~ .state.p-info .svg, .pretty.p-toggle .state.p-info .icon,
.pretty.p-toggle .state.p-info .svg {
  color: #fff;
  stroke: #fff;
}
.pretty input:checked ~ .state.p-info-o label:before, .pretty.p-toggle .state.p-info-o label:before {
  border-color: #5bc0de;
}
.pretty input:checked ~ .state.p-info-o label:after, .pretty.p-toggle .state.p-info-o label:after {
  background-color: transparent;
}
.pretty input:checked ~ .state.p-info-o .icon,
.pretty input:checked ~ .state.p-info-o .svg,
.pretty input:checked ~ .state.p-info-o svg, .pretty.p-toggle .state.p-info-o .icon,
.pretty.p-toggle .state.p-info-o .svg,
.pretty.p-toggle .state.p-info-o svg {
  color: #5bc0de;
  stroke: #5bc0de;
}
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-info-o label:after {
  background-color: #5bc0de !important;
}
.pretty.p-switch input:checked ~ .state.p-info:before {
  border-color: #5bc0de;
}
.pretty.p-switch.p-fill input:checked ~ .state.p-info:before {
  background-color: #5bc0de !important;
}
.pretty.p-switch.p-slim input:checked ~ .state.p-info:before {
  border-color: #2390b0;
  background-color: #2390b0 !important;
}
.pretty input:checked ~ .state.p-success label:after, .pretty.p-toggle .state.p-success label:after {
  background-color: #5cb85c !important;
}
.pretty input:checked ~ .state.p-success .icon,
.pretty input:checked ~ .state.p-success .svg, .pretty.p-toggle .state.p-success .icon,
.pretty.p-toggle .state.p-success .svg {
  color: #fff;
  stroke: #fff;
}
.pretty input:checked ~ .state.p-success-o label:before, .pretty.p-toggle .state.p-success-o label:before {
  border-color: #5cb85c;
}
.pretty input:checked ~ .state.p-success-o label:after, .pretty.p-toggle .state.p-success-o label:after {
  background-color: transparent;
}
.pretty input:checked ~ .state.p-success-o .icon,
.pretty input:checked ~ .state.p-success-o .svg,
.pretty input:checked ~ .state.p-success-o svg, .pretty.p-toggle .state.p-success-o .icon,
.pretty.p-toggle .state.p-success-o .svg,
.pretty.p-toggle .state.p-success-o svg {
  color: #5cb85c;
  stroke: #5cb85c;
}
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-success-o label:after {
  background-color: #5cb85c !important;
}
.pretty.p-switch input:checked ~ .state.p-success:before {
  border-color: #5cb85c;
}
.pretty.p-switch.p-fill input:checked ~ .state.p-success:before {
  background-color: #5cb85c !important;
}
.pretty.p-switch.p-slim input:checked ~ .state.p-success:before {
  border-color: #357935;
  background-color: #357935 !important;
}
.pretty input:checked ~ .state.p-warning label:after, .pretty.p-toggle .state.p-warning label:after {
  background-color: #f0ad4e !important;
}
.pretty input:checked ~ .state.p-warning .icon,
.pretty input:checked ~ .state.p-warning .svg, .pretty.p-toggle .state.p-warning .icon,
.pretty.p-toggle .state.p-warning .svg {
  color: #fff;
  stroke: #fff;
}
.pretty input:checked ~ .state.p-warning-o label:before, .pretty.p-toggle .state.p-warning-o label:before {
  border-color: #f0ad4e;
}
.pretty input:checked ~ .state.p-warning-o label:after, .pretty.p-toggle .state.p-warning-o label:after {
  background-color: transparent;
}
.pretty input:checked ~ .state.p-warning-o .icon,
.pretty input:checked ~ .state.p-warning-o .svg,
.pretty input:checked ~ .state.p-warning-o svg, .pretty.p-toggle .state.p-warning-o .icon,
.pretty.p-toggle .state.p-warning-o .svg,
.pretty.p-toggle .state.p-warning-o svg {
  color: #f0ad4e;
  stroke: #f0ad4e;
}
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-warning-o label:after {
  background-color: #f0ad4e !important;
}
.pretty.p-switch input:checked ~ .state.p-warning:before {
  border-color: #f0ad4e;
}
.pretty.p-switch.p-fill input:checked ~ .state.p-warning:before {
  background-color: #f0ad4e !important;
}
.pretty.p-switch.p-slim input:checked ~ .state.p-warning:before {
  border-color: #c77c11;
  background-color: #c77c11 !important;
}
.pretty input:checked ~ .state.p-danger label:after, .pretty.p-toggle .state.p-danger label:after {
  background-color: #d9534f !important;
}
.pretty input:checked ~ .state.p-danger .icon,
.pretty input:checked ~ .state.p-danger .svg, .pretty.p-toggle .state.p-danger .icon,
.pretty.p-toggle .state.p-danger .svg {
  color: #fff;
  stroke: #fff;
}
.pretty input:checked ~ .state.p-danger-o label:before, .pretty.p-toggle .state.p-danger-o label:before {
  border-color: #d9534f;
}
.pretty input:checked ~ .state.p-danger-o label:after, .pretty.p-toggle .state.p-danger-o label:after {
  background-color: transparent;
}
.pretty input:checked ~ .state.p-danger-o .icon,
.pretty input:checked ~ .state.p-danger-o .svg,
.pretty input:checked ~ .state.p-danger-o svg, .pretty.p-toggle .state.p-danger-o .icon,
.pretty.p-toggle .state.p-danger-o .svg,
.pretty.p-toggle .state.p-danger-o svg {
  color: #d9534f;
  stroke: #d9534f;
}
.pretty.p-default:not(.p-fill) input:checked ~ .state.p-danger-o label:after {
  background-color: #d9534f !important;
}
.pretty.p-switch input:checked ~ .state.p-danger:before {
  border-color: #d9534f;
}
.pretty.p-switch.p-fill input:checked ~ .state.p-danger:before {
  background-color: #d9534f !important;
}
.pretty.p-switch.p-slim input:checked ~ .state.p-danger:before {
  border-color: #a02622;
  background-color: #a02622 !important;
}

.pretty.p-bigger label:before,
.pretty.p-bigger label:after,
.pretty.p-bigger .icon,
.pretty.p-bigger .svg,
.pretty.p-bigger .img {
  font-size: 1.2em !important;
  top: calc(0% - (100% - 1em) - 35%) !important;
}
.pretty.p-bigger label {
  text-indent: 1.7em;
}

@media print {
  .pretty .state:before,
  .pretty .state label:before,
  .pretty .state label:after,
  .pretty .state .icon {
    color-adjust: exact;
    /* stylelint-disable */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
/* Onderstaande datalist een uitbreiding optgroup https: //github.com/yairEO/ui-range, door Erik */
.range-slider {
  --primary-color: #0d6efd;
  --value-offset-y: var(--ticks-gap);
  --value-active-color: white;
  --value-background: transparent;
  --value-background-hover: var(--primary-color);
  --value-font: 700 12px/1 Arial;
  --fill-color: var(--primary-color);
  --progress-background: #EEE;
  --progress-radius: 20px;
  --track-height: calc(var(--thumb-size)/2);
  --min-max-font: 12px Arial;
  --min-max-opacity: .5;
  --min-max-x-offset: 10%;
  --thumb-size: 22px;
  --thumb-color: white;
  --thumb-shadow: 0 0 3px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.5) inset, 0 0 0 99px var(--thumb-color) inset;
  --thumb-shadow-active: 0 0 0 calc(var(--thumb-size)/4) inset var(--thumb-color), 0 0 0 99px var(--primary-color) inset, 0 0 3px rgba(0,0,0,.4);
  --thumb-shadow-hover: var(--thumb-shadow);
  --ticks-thickness: 1px;
  --ticks-height: 5px;
  --ticks-gap: var(--ticks-height, 0);
  --ticks-color: silver;
  --step: 1;
  --ticks-count: (var(--max) - var(--min)) / var(--step);
  --maxTicksAllowed: 30;
  --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
  --x-step: Max( var(--step), var(--too-many-ticks) * (var(--max) - var(--min)) );
  --tickIntervalPerc_1: Calc( (var(--max) - var(--min)) / var(--x-step) );
  --tickIntervalPerc: calc( (100% - var(--thumb-size))/var(--tickIntervalPerc_1) * var(--tickEvery, 1) );
  --value-a: Clamp(var(--min), var(--value, 0), var(--max));
  --value-b: var(--value, 0);
  --text-value-a: var(--text-value, "");
  --completed-a: calc((var(--value-a) - var(--min) ) / (var(--max) - var(--min)) * 100);
  --completed-b: calc((var(--value-b) - var(--min) ) / (var(--max) - var(--min)) * 100);
  --ca: Min(var(--completed-a), var(--completed-b));
  --cb: Max(var(--completed-a), var(--completed-b));
  --thumbs-too-close: Clamp( -1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1 );
  --thumb-close-to-min: Min(1, Max(var(--ca) - 5, 0));
  --thumb-close-to-max: Min(1, Max(95 - var(--cb), 0));
  box-sizing: content-box;
  display: inline-block;
  height: max(var(--track-height), var(--thumb-size));
  background: linear-gradient(to right, var(--ticks-color) var(--ticks-thickness), transparent 1px) repeat-x;
  background-size: var(--tickIntervalPerc) var(--ticks-height);
  background-position-x: calc(var(--thumb-size) / 2 - var(--ticks-thickness) / 2);
  background-position-y: var(--flip-y, bottom);
  padding-bottom: var(--flip-y, var(--ticks-gap));
  padding-top: calc(var(--flip-y) * var(--ticks-gap));
  position: relative;
  z-index: 1;
}
.range-slider[data-ticks-position=top] {
  --flip-y: 1;
}
.range-slider::before, .range-slider::after {
  --offset: calc(var(--thumb-size)/2);
  content: counter(x);
  display: var(--show-min-max, block);
  font: var(--min-max-font);
  position: absolute;
  bottom: var(--flip-y, -2.5ch);
  top: calc(-2.5ch * var(--flip-y));
  opacity: clamp(0, var(--at-edge), var(--min-max-opacity));
  transform: translateX(calc(var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge));
  pointer-events: none;
}
.range-slider::before {
  --before: 1;
  --at-edge: var(--thumb-close-to-min);
  counter-reset: x var(--min);
  left: var(--offset);
}
.range-slider::after {
  --at-edge: var(--thumb-close-to-max);
  counter-reset: x var(--max);
  right: var(--offset);
}
.range-slider__values {
  position: relative;
  top: 50%;
  line-height: 0;
  text-align: justify;
  width: 100%;
  pointer-events: none;
  margin: 0 auto;
  z-index: 5;
  user-select: none;
  pointer-events: none;
}
.range-slider__values::after {
  content: "";
  width: 100%;
  display: inline-block;
  height: 0;
  background: red;
}
.range-slider__progress {
  --start-end: calc(var(--thumb-size)/2);
  --clip-end: calc(100% - (var(--cb) ) * 1%);
  --clip-start: calc(var(--ca) * 1%);
  --clip: inset(-20px var(--clip-end) -20px var(--clip-start));
  position: absolute;
  left: var(--start-end);
  right: var(--start-end);
  top: calc(var(--ticks-gap) * var(--flip-y, 0) + var(--thumb-size) / 2 - var(--track-height) / 2);
  height: calc(var(--track-height));
  background: var(--progress-background, #EEE);
  pointer-events: none;
  z-index: -1;
  border-radius: var(--progress-radius);
}
.range-slider__progress::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  clip-path: var(--clip);
  top: 0;
  bottom: 0;
  background: var(--fill-color, black);
  box-shadow: var(--progress-flll-shadow);
  z-index: 1;
  border-radius: inherit;
}
.range-slider__progress::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: var(--progress-shadow);
  pointer-events: none;
  border-radius: inherit;
}
.range-slider > input {
  -webkit-appearance: none;
  width: 100%;
  height: var(--thumb-size);
  margin: 0;
  position: absolute;
  left: 0;
  top: calc(50% - max(var(--track-height), var(--thumb-size)) / 2 + var(--ticks-gap) / 2 * var(--flip-y, -1));
  cursor: -webkit-grab;
  cursor: grab;
  outline: none;
  background: none;
}
.range-slider > input:not(:only-of-type) {
  pointer-events: none;
}
.range-slider > input::-webkit-slider-thumb {
  appearance: none;
  border: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  transform: var(--thumb-transform);
  border-radius: var(--thumb-radius, 50%);
  background: var(--thumb-color);
  box-shadow: var(--thumb-shadow);
  pointer-events: auto;
  transition: 0.1s;
}
.range-slider > input::-moz-range-thumb {
  appearance: none;
  border: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  transform: var(--thumb-transform);
  border-radius: var(--thumb-radius, 50%);
  background: var(--thumb-color);
  box-shadow: var(--thumb-shadow);
  pointer-events: auto;
  transition: 0.1s;
}
.range-slider > input::-ms-thumb {
  appearance: none;
  border: none;
  height: var(--thumb-size);
  width: var(--thumb-size);
  transform: var(--thumb-transform);
  border-radius: var(--thumb-radius, 50%);
  background: var(--thumb-color);
  box-shadow: var(--thumb-shadow);
  pointer-events: auto;
  transition: 0.1s;
}
.range-slider > input:hover {
  --thumb-shadow: var(--thumb-shadow-hover);
}
.range-slider > input:hover + output {
  --value-background: var(--value-background-hover);
  --y-offset: -5px;
  color: var(--value-active-color);
  box-shadow: 0 0 0 3px var(--value-background);
}
.range-slider > input:active {
  --thumb-shadow: var(--thumb-shadow-active);
  cursor: grabbing;
  z-index: 2;
}
.range-slider > input:active + output {
  transition: 0s;
}
.range-slider > input:nth-of-type(1) {
  --is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999,1);
}
.range-slider > input:nth-of-type(1) + output {
  --value: var(--value-a);
  --x-offset: calc(var(--completed-a) * -1%);
}
.range-slider > input:nth-of-type(1) + output:not(:only-of-type) {
  --flip: calc(var(--thumbs-too-close) * -1);
}
.range-slider > input:nth-of-type(1) + output::after {
  content: var(--prefix, "") var(--text-value-a) var(--suffix, "");
}
.range-slider > input:nth-of-type(2) {
  --is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999,1);
}
.range-slider > input:nth-of-type(2) + output {
  --value: var(--value-b);
}
.range-slider > input:only-of-type ~ .range-slider__progress {
  --clip-start: 0;
}
.range-slider > input + output {
  --flip: -1;
  --x-offset: calc(var(--completed-b) * -1%);
  --pos: calc(((var(--value) - var(--min))/(var(--max) - var(--min))) * 100%);
  pointer-events: none;
  position: absolute;
  z-index: 5;
  background: var(--value-background);
  border-radius: 10px;
  padding: 2px 4px;
  left: var(--pos);
  transform: translate(var(--x-offset), calc(150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip)));
  transition: all 0.12s ease-out, left 0s;
}
.range-slider > input + output::after {
  content: var(--prefix, "") var(--text-value-b) var(--suffix, "");
  font: var(--value-font);
}

.range-slider:has(> input[type=range]:disabled) {
  --primary-color: #6c757d;
  --value-active-color: var(--primary-color);
  --value-background: transparent;
  --value-background-hover: transparent;
}
.range-slider:has(> input[type=range]:disabled) > input:disabled {
  cursor: not-allowed;
  outline: none;
  background: none;
}
.range-slider:has(> input[type=range]:disabled) > input:disabled:hover + output {
  --y-offset: 0px;
  transition: none;
  box-shadow: none;
}
.range-slider:has(> input[type=range]:disabled) > input:disabled:active {
  cursor: not-allowed;
}
.range-slider:has(> input[type=range]:disabled) > input:disabled:active + output {
  transition: none;
  box-shadow: none;
}

/*@media print {
    body {-webkit-print-color-adjust: exact;}
}*/
div.combocss .rcbInputCell input {
  cursor: pointer !important;
}

div.combocss .rcbArrowCell a {
  cursor: pointer !important;
}

div.comboflags .rcbInputCell input {
  padding-left: 22px !important;
  background-position: left bottom !important;
  cursor: pointer !important;
}

div.comboflags .rcbArrowCell a {
  cursor: pointer !important;
}

.floatright {
  float: right;
}

.cb label {
  margin-left: 10px;
}

.RadTreeView .rtUL {
  float: left !important;
}

.searchmarker {
  background-color: yellow;
}

.dockcopycommand {
  width: 16px;
  height: 16px;
  background: url("/user/images/svg/copy-solid.svg") no-repeat !important;
}

.dockcopycommand:before {
  content: none !important;
}

.dockcombinecommand {
  width: 16px;
  height: 16px;
  background: url("/user/images/svg/delete-left-solid.svg") no-repeat !important;
}

.dockcombinecommand:before {
  content: none !important;
}

.dockdeletecommand {
  width: 16px;
  height: 16px;
  background: url("/user/images/svg/trash-solid.svg") no-repeat !important;
}

.dockdeletecommand:before {
  content: none !important;
}

.dockeditcommand {
  width: 16px;
  height: 16px;
  background: url("/user/images/svg/pen-to-square-solid.svg") no-repeat !important;
}

.dockeditcommand:before {
  content: none !important;
}

.docksettingscommand {
  width: 16px;
  height: 16px;
  background: url("/user/images/svg/gear-solid.svg") no-repeat !important;
}

.docksettingscommand:before {
  content: none !important;
}

a.nolink, a.nolink:visited, a.nolink:hover {
  /*color: #FFFFFF;*/
  text-decoration: none;
}

.editoverlay {
  border: 1px solid transparent;
  padding: 3px;
  display: block;
  overflow: hidden;
}

.editoverlay:hover {
  border: 1px solid gray;
  filter: brightness(90%);
}

.editoverlaybuttons {
  display: none;
  vertical-align: top;
  position: absolute;
  right: 0;
  padding-top: 5px;
  padding-right: 5px;
}

.editclear {
  clear: both;
}

.editcontent {
  float: left;
  vertical-align: top;
}

.nowrap {
  white-space: nowrap !important;
}

.LeftSideButton {
  float: left;
  margin-right: 4px;
}

.LeftSideComboBox {
  float: left;
  margin-right: 4px;
  margin-left: 12px;
}

/* Pdf-viewer (self made) */
/*
.pdf-outer-body {
    border: 1px solid #dedede;
    width: 100%;
    padding: 0.25rem;
    overflow: scroll;
}

.pdf-inner-body {
    display: table;
    margin: 0 auto;
    border-color: #b3b3b3;
    color: #333;
    background-color: white;
    box-shadow: 0 0 15px #b3b3b3;
}
*/
/* Telerik Rad Controls aanpassingen */
.RadUpload .ruFakeInput {
  width: 400px !important;
}

/*.RadUpload .ruBrowse {
    width: 32px !important;
}*/
.RadScheduler .rsMonthView .rsLastWrap {
  height: 0 !important;
}

.RadScheduler .rsMonthView .rsAptContent {
  min-height: 50px !important;
}

.rsContentScrollArea {
  min-height: 300px !important;
}

.rsToday {
  display: none !important;
}

/* RadWindow aanpassingen */
.RadWindow .rwIcon {
  display: none !important;
}

/* RadWindow aanpassingen voor mobile en kleine schermen */
div.RadWindow.adaptiveRadWindow .rwCommandButton:before {
  font-size: 2em;
}

div.RadWindow.adaptiveRadWindow .rwCommands {
  margin-top: -1em;
}

div.RadWindow.adaptiveRadWindow .rwDialogButtons {
  bottom: inherit;
  margin: 0 30% 0 30%;
}

/* Validatie */
.valSummary ul {
  display: none;
}

div.form-group.alert-warning {
  background-color: var(--bs-alert-bg);
}

tr.valTarget.alert-warning {
  background-color: var(--bs-alert-bg);
}

.RadListView.alert-warning, div.RadListView.form-group.alert-warning, tr.RadListView.valTarget.alert-warning {
  background-color: var(--bs-alert-bg);
}

.clsInfoIcon {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  cursor: pointer;
  margin-left: 4px;
}

.c_code {
  margin-bottom: 6px;
}

.c_code pre {
  background-color: #eee;
  overflow: auto;
  margin: 0 0 1em;
  padding: 0.5em 1em;
}

.c_code pre code,
.c_code pre .line-number {
  display: block;
}

.c_code pre .line-number {
  float: left;
  margin: 0 1em 0 -1em;
  border-right: 1px solid;
  text-align: right;
  opacity: 0.5;
}

.c_code pre .line-number span {
  display: block;
  padding: 0 0.5em 0 1em;
}

.c_code pre .cl {
  display: block;
  clear: both;
}