/*** Kleuren *******************************************/
body {
     font-family: Arial;
     }

a {
    color: inherit;
    background-color: inherit;
}

.rood {
	color: var(--rood);
}

.port-tegel-info {
    border: 2px solid var(--rood);
	background-color: var(--blauw-licht);
	color: var(--wit);
}

.port-tegel-doen {
    border: 2px solid var(--rood);
	background-color: var(--geel);
	color: var(--zwart);
}

.port-tegel-bezig {
    border: 2px solid var(--rood);
	background-color: var(--groen-donker);
	color: var(--wit);
}

.port-tegel-urgent {
    border: 2px solid var(--geel);
	background-color: var(--rood);
	color: var(--wit);
}

.port-tegel-voet {
    border-top: 1px solid var(--kleur1);
}

p.port-opmerking {
   color: var(--rood);
}

.filter-svg {
    filter: invert(43%) sepia(5%) saturate(991%) hue-rotate(330deg) brightness(92%) contrast(86%);
    filter: invert(14%) sepia(4%) saturate(991%) hue-rotate(330deg) brightness(92%) contrast(86%);
    
}

#port-inhoud {
   -moz-border-radius: 0px;  /* for Firefox */
   -webkit-border-radius: 0px; /* for Webkit-Browsers */
   border-radius: 0px; /* regular */
   background-color: var(--wit);
   border: 0px solid var(--rood);
}
.port-achtergrond {
   background: var(--kleur1);
}
.port-waarschuwing {
   background:var(--oranje);
}
.port-tabel-kop {
   -moz-border-radius-topright:0px;
   -moz-border-radius-topleft:0px;
   -webkit-border-top-right-radius:0px;
   -webkit-border-top-left-radius:0px;
   border-top-left-radius:0px;
   border-top-right-radius:0px;
   background:var(--kleur1);
   color: var(--wit);
}
.port-zijblok-rechts {
   background-color: var(--wit);
   border: 0px solid var(--rood);
}
.port-portaal {
    border: 0px solid var(--blauw);
}

.port-header {
   -moz-border-radius-topright:0px;
   -moz-border-radius-topleft:0px;
   -webkit-border-top-right-radius:0px;
   -webkit-border-top-left-radius:0px;
   border-top-left-radius:0px;
   border-top-right-radius:0px;
   padding: 5px 5px 5px 5px;
   background:var(--kleur1);
   color: var(--wit);
}
.port-titel {
   	background:var(--kleur1);
   	color: var(--wit);
}
.port-lijn  {
   border: 1px solid var(--kleur1);
   /** border: 3px solid var(--kleur3); **/
}
.port-button, .port-button-secundair
  {
  border-radius: 0px;
  }
  
.port-button
  {
  color: var(--wit);
  border: 1px solid var(--kleur1);
  }
.inline-button
  {
  color: var(--wit);
  border: 1px solid var(--kleur1);
  }
.port-button-secundair
  {
  border: 1px solid var(--kleur1);
  background: var(--wit);
  color: var(--zwart);
  }
  
.port-button:hover {
   background: var(--kleur3);
   color: var(--wit);
}
.port-button.gekozen
   {
   color: var(--wit);
   background: var(--kleur3);
   }
.port-button-terug
  {
  color: var(--wit);
  border: 1px solid var(--kleur1);
  }
.port-button-terug:hover {
   background-color: var(--kleur3);
   color: var(--wit);
}
.port-button-terug.gekozen
   {
   color: var(--wit);
   background: var(--kleur3);
   }
.port-button-reverse {
  color: var(--geel);
  background: var(--kleur3);
  border: 1px solid var(--kleur3);
}
.port-button-reverse:hover {
   background-color: var(--kleur3);
   color: var(--wit);
}
.port-button-reverse.gekozen {
   color: var(--geel);
}
.inputlabel {
    background-color: var(--blauw-licht);
    border: 0.5px solid var(--grijs-licht);
}
.port-label {
    background-color: var(--wit);
}
.port-waarschuwing-opmaak {
    color: var(--oranje);
    font-weight: bold;
}
.port-error-opmaak {
    color: var(--rood);
}
.port-melding-opmaak {
    color: var(--groen-donker); 
}

span.port-port-accent {
   color: var(--groen-donker);
}

.port-lv {
    background-color: var(--wit);
    border: 1px solid var(--grijs-licht);
}

#port-groep a {
    color: var(--wit);
    background: var(--kleur1);
}
table.display tr {
    background-color: var(--wit);
}
table.display tr.odd {
    background-color: var(--kleur2);
}

table.display tr.even {
    background-color: var(--wit);
}
nav ul li {
   -moz-border-radius: 0px;  /* for Firefox */
   -webkit-border-radius: 0px; /* for Webkit-Browsers */
   border-radius: 0px; /* regular */
    background-color: var(--kleur1);
    color: var(--wit);
}
.gekozen {
    color: var(--wit);
}

.site-box, #port-inhoud {
    box-shadow: 0px 0px 0px var(--zwart);
}

.site-box {
   -moz-border-radius: 0px;  /* for Firefox */
   -webkit-border-radius: 0px; /* for Webkit-Browsers */
   border-radius: 0px; /* regular */
}

.site-menu {
   /* background: var(--licht-blauw); */
   border-top: var(--kleur1) 2px solid;
   border-bottom: var(--kleur1) 2px solid;
   margin-left: 10px;
   margin-right: 10px;
}
.site-voet {
   /* background: var(--licht-blauw); */
   border-top: var(--kleur1) 2px solid;
   border-bottom: var(--kleur1) 2px solid;
   padding: 10px 10px 25px 10px;
}

.port-box {
   -moz-border-radius: 0px;  /* for Firefox */
   -webkit-border-radius: 0px; /* for Webkit-Browsers */
   border-radius: 0px; /* regular */
}

/* accordion */

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 0px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 0px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 0px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 0px;
}

/* Overlays */
.ui-widget-overlay {
	background: var(--grijs-donker);
	opacity: .3;
	filter: Alpha(Opacity=30);
}
.ui-widget-shadow {
	margin: 4px 0 0 4px;
	padding: 0px;
	background: var(--grijs-licht);
	opacity: .3;
	filter: Alpha(Opacity=30);
	border-radius: 4px;
}

/* Accordion */

td.inputlabel2
    {
    background-color: var(--kleur3);
    border-radius: 0px;
    }

.ui-widget-content {
	border: 1px solid var(--kleur3);
	background: var(--wit);
	color: var(--zwart);
}
    
/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid var(--kleur1);
	background: var(--kleur1);
	font-weight: normal;
	color: var(--zwart);
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	color: var(--zwart);
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid var(--groen-licht);
	background: var(--kleur3);
	font-weight: normal;
	color: var(--zwart);
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
	color: var(--zwart);
	text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid var(--kleur3);
	background: var(--kleur3);
	font-weight: normal;
	color: var(--zwart);
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: var(--zwart);
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid var(--geel);
	background: var(--geel-licht);
	color: var(--grijs);
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: var(--grijs);
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid var(--geel);
	background: var(--geel-licht);
	color: var(--grijs-donker);
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: var(--grijs-donker);
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: var(--grijs-donker);
}

.ui-widget-shadow {
	border-radius: 0px;
}