/*-----------------------------------------
Theme Name: Statisch - Responsive (Static)
Author: Ger
Vorm: Licht Thema
Laatst aangepast: 2026-09-27, 11:10 uur

Kleuren:
Lichtgrijs: #F2F2F2
Donker rood: #78000e
Donker blauw: #09048C
Knop Hover: #147004
Background: #597090

------------------------------------------*/

/********* Begin - Normale CSS *********/

*, *:before, *:after {
    box-sizing: inherit;
}
 
:root {
  --responsive-padding: 1rem;
}

body,html {
    box-sizing: border-box;
    background-color: #597090;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px; /* Is Browser standard */
    text-align: center;
    padding: 0;
    margin: 0 auto 0 auto;

    /* Om te voorkomen dat Anker achter Menu gaat */
    scroll-padding-top: 6.2rem;
    scroll-behavior: smooth;
}

/*** BEGIN - Blokken ***/
/* https://michalsnik.github.io/aos/ */

#rap {
    /* background-color: #ff6600; /* */
    /* border: 1px solid red; /* #e2e4e2 */
    /* Alles in responsive */
}

/*** Van AI - Laten staan zodat 3px padding onder een header verdwijnt ***/
header img {
  display: block;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.header-01 {
    display: block;
    /* background-color: red; */
    /* border: 10px solid #D3D3D3; */
}

#content-column {
    /* background-color: #ff6600; /* */
    /* border: 1px solid blue; /* blue */
    padding: 4px 0 10px 0;
    width: 100%;
    text-align: left;
}

.rap-center {
    /* background-color: orange; /* */
    /* border: 1px solid black; /* */
    padding: 0 0 0 0;
    /* laten staan voor later */
}

#rap-title {
    display: block;
    text-align: center;
    background-color: #78000e; /* #597091 */
    color: white;
    padding: 0 0 1px 0; /* laten staan */
    margin: -5px 0 0 0; /* door img in header */
    /* border-left: 10px solid #D3D3D3; */
    /* border-right: 10px solid #D3D3D3; */
}

.titel-categorie {
    padding: 10px;
    float: left;
}

.title {
    text-align: center;
    padding: 5px 5px 1px 5px;
}

.title h1 {
    color: white;    
}

.blok-info-01 {
    padding: 0 10px 10px 10px;
}

.blok-links {
    float: left;
}

.blok-center {
    margin: 0 auto;
}

.blok-rechts {
    float: right;
    padding: 0 0 0 30px ;
}

.flex-index {
    background: #ebffea;
    min-width: 270px;
    padding: 10px;
    margin: 10px;
}


/* BEGIN - Map en Nr */
.rap-file-map-nr {
    display: block;
    float: right;
    background-color: white;
    padding: 1px 5px 1px 5px;
    border-bottom-left-radius: 10px
}

.file-map, .file-nr, .file-txt {
    display: block;
    float: right;
    font-size: 12px;
    text-align: right;
    border-radius: 5px;
    padding: 1px 5px 1px 5px;
}

.file-txt {
    color: grey;
    margin: 5px 0 0 0;
}

.file-map {
    color: black;
    margin: 5px 0 0 0;
}

.file-nr {
    color: black;
    margin: 5px 3px 0 0;
}
/* EINDE - Map en Nr */

.admin-gelezen {
    background-color: white;
    /* border: 10px solid #D3D3D3; */
    font-size: 0.9em;
    text-align: left;
    padding: 10px 15px 10px 15px;
    margin: -5px 0 0 0;
}

.p-blok-wit,
.p-blok-grijs,
.p-blok-geel,
.p-wit,
.p-rood, 
.p-groen, 
.p-wit-rood, 
.p-wit-groen,
.p-wit-geel,
.p-wit-rose
{
    padding: 10px 15px 10px 15px;
    margin: 15px 0 15px 0;
}

.p-blok-wit {
     background-color: white;
}

.p-wit-rood {
     background-color: white;
     border: 2px solid red;
}

.p-wit-groen {
     background-color: white;
     border: 2px solid green;
}

.p-wit-geel {
     background-color: white;
     border: 5px solid #f9d145;
}

.p-wit-rose {
     background-color: white;
     border: 5px solid #ff00e7;
}

.p-wit {
     background-color: white;
     border: 1px solid #e7e6ed;
}

.p-groen {
    background-color: #f0fff6;
}

.p-blok-grijs {
    background-color: #efefef;
}

.p-blok-geel {
    background-color: #f9fade;
}

.p-rood {
    background-color: #ffe1d1;
    color: black;
}

.blok-niets {
    margin: 0 0 15px 0;
}

.boven-artikel {
    background-color: #f9fce9;
    border: 5px solid #d3d3d3;
    padding: 10px 20px 10px 20px;        
}

.blok-grijs-01 {
    background-color: white ;/* #f3f4fa; */
    /* padding: bij Responsive */
    line-height: 1.5em;
    margin: 0 0 20px 0; 
}

.blok-grijs-01 li {
    /* In Responsive */
}

.blok-grijs-01 a:link, a:visited {
    font-weight: normal;
}

.blok-grijs-01 a:hover {
    color: red;
    font-weight: normal;
}

.blok-clean-01, .blok-clean-02 {
    /* border: 1px solid yellow; /* */
    display: block;
    max-width: 900px;
    padding: 0 0 0 0;
    margin: 0 0 16px 0;
}

.blok-clean-01 {

}


.blok-reactie-02 {
    /* border: in media screen /* */
    display: block;
    max-width: 900px;
    padding: 0 0 0 0;
    margin: 0 0 16px 0;
}


.blok-wit-02, .blok-groen-02, .blok-geel-02, .blok-blauw-02, .blok-rood-02 {
    box-shadow: 0px 0px 16px -4px rgba(0,0,0,0.75);
    padding: 10px 5px 10px 15px; 
    margin: 0 0 15px 0;
}

.blok-wit-02 {
    background-color: white;
}

.blok-groen-02 {
    background-color: #e5f7d9;
}

.blok-geel-02 {
    background-color: #fffea6;
}

.blok-blauw-02 {
    background-color: #c5e5f1;
}

.blok-rood-02 {
    background-color: #f9d7d2;
}
/*** EINDE - Blokken ***/



/*** BEGIN - H Style ***/
h1 {
    color: black;
    font-weight: bold;
}

h2 {
    font-size: 1.5em;
    color: #800000;
    font-weight: bold;
}

h3 {
    font-size: 1.2em;
    /* font-style: italic; */
    color: darkgreen;
    font-weight: bold;
    margin: 10px 0 5px 0;
}

h4 {
    font-size: 1.0em;
    font-style: italic;
    color: black;
    font-weight: bold;
}

h5 {
    font-size: 1.0em;
    color: black;
    font-weight: normal;
    margin: 0 0 0 10px;
    text-decoration: underline;   
}

h6 {
    font-size: 1.0em;
    color: black;
    font-weight: normal;
    margin: 0 0 0 20px;
}

h1, h2, h3, h4, h5, h6 {
    clear: left;  /* Laten staan */
}

.vrij {
    margin: 10px 0 0 20px;
    
}
/*** EINDE - H Style ***/


a { /* laten staan vanwege windows explorer */
    border: none;
    outline: none;
}

a:link, a:visited {
    color: #3333FF;
    font-weight: normal;
    text-decoration: none;  
}

a:hover {
    color: #CC0000; /* 3:1 */
    font-weight: normal;
}

.no-underline a {
    text-decoration: none;
}

i {
    color: #98151b;
    font-style: normal;
}

.dik {
    font-weight: bold;
}

/* BEGIN - Achtergrondkleur */

.bg-lichtgrijs {
    background-color: #F2F2F2;
}

.bg-lichtgeel {
    background-color: lightyellow;
}

.bg-lichtblauw {
    background-color: #d8f0fd;
}

.bg-lichtgroen {
    background-color: #ddffdc;
}

.bg-rood {
    background-color: #da0002;
}

.bg-drood {
    background-color: #78000e;
}

.bg-groen {
    background-color: #008500;
}

.bg-oranje {
    background-color: #ff8300;
}

.bg-blauw {
    background-color: blue;
}

/* Einde - Achtergrondkleur */

.noborder {
    border: none !important;
}

/* Begin - Kleuren */

.blauw {
    color: #0F3FFB;
}

.geel {
    color: yellow;
}

.groen {
    color: #1e980a;
}

.licht-groen {
    color: #91f7a2;
}

.licht-grijs {
    color: #BDBBB9;
}

.licht-rood {
    color: #ff9da1;
}

.oranje {
    color: orange;
}

.rood {
    color: #b50000;
}

.rose {
    color: #e600e0;
}

.wit {
    color: white;
}

.zwart {
    color: black;
}

/* Einde - Kleuren */


.it {
    background-color: #ff0000;
    color: white;
    padding: 0 1px 0 1px;
    border: 1px solid #D5D5D5;
}

/* https://css-tricks.com/examples/hrs/ */
hr {
    clear: left;
    border: 0;
    height: 1px;
    background: lightgray;
}

.hr_tref {
    border: 0;
    height: 4px;
    background: #488f27 linear-gradient(to right, #CCCCCC, #488f27, #CCCCCC);
    margin: 4px 0 20px 0;
}

.links {
    text-align: left;
}

.center {
    text-align: center;
}

.rechts {
    text-align: right;
}

/*.right {
    float: right;
    margin: 0 0 15px 15px;
}*/

code {
    font-family: Verdana, Helvetica, sans-serif;
    color: #c70a13;
    background-color: #ebebeb;
}
                 
.code {
    /* Als span gebruiken */
    background: black;
    color: white;
    font-family: monospace;
    font-size: 0.8em;
    border-radius: 8px;
    padding: 10px 20px 10px 20px;
    margin: 15px 0 15px 0;
}

.klein {
    font-size: 0.9em;
}

.midden {
    font-size: 1.0em;
}

.groot {
    font-size: 1.2em;
}

.zegt {
    /* color: black;*/
    display: inline-block;
    /* background-color: #e5f8eb; */
    border-radius: 15px;
    margin: 10px 0 10px 0;
    padding: 10px 15px 10px 15px;
}

.border-1px-black {
    border: 1px solid black;
}

.prio-1, .prio-2, .prio-3 {
    background-color: white;
    padding: 5px;
    margin: 0 0 5px 0;
    color: black;
}

.admin {
    color: black;
    background-color: lightyellow;
    border: 1px solid grey;
    border-radius: 5px;
    margin: 10px 0 10px 0;
    padding: 10px 15px 10px 15px;
}

.arceer {
    background: #3a3a3a;
    margin: 0 0 0 0;
    padding: 1px 5px 1px 5px;
    text-align: center;
    font-size: 1.0em;
    color: #6dff55;
}

/*** BEGIN - Knop ***/

.knop {
    margin: 5px 0 5px 0;
}

.knop a:link, .knop a:visited, .knop a:hover {
    text-decoration: none;
    line-height: 32px;
    border-radius: 15px;
    padding: 5px 12px 5px 12px;
    margin: 0 10px 0 5px;
}

.knop a:link, .knop a:visited {
    background-color: #000000;
    color: white;
}

.knop a:hover {
    background-color: #147004;
    color: #ffffff;
}

/*** EINDE - Knop ***/


.item {
    background-color: #f7f8d4;
    border: 1px solid #ddded8;
    padding: 0 3px 0 3px;
}

.span-reacties {
    background-color: black;
    color: white;
    padding: 0 5px 0 5px;
}

.ToTop a {
  position: fixed;
  bottom: 15px;
  right: 20px;
  z-index: 99;
  outline: none;
  background-color: black;
  color: white;
  cursor: pointer; /* Add a mouse pointer on hover */
  border: 1px solid white;
  border-radius: 10px;
  padding: 5px 10px 5px 10px;
}

.ToTop a:hover {
  background-color: #147004;
  color: white;
  border: 1px solid white
}

.blok-zegt {
    display: inline-block;
    border: 1px solid grey;
    background-color: #f9f9f9;
    margin: 10px 10px 10px 10px;
    padding: 20px 30px 20px 30px;
    border-radius: 10px;
    /* box-shadow: 5px 5px 8px 5px #888888;*/
}

.split01 {
    display: block;
    width: 950px;
    height: 20px;
    clear: both;
    background-color: #d4893e;
    margin:0 0 0 -20px;
}

.tijdstip-02 {
    float: left;
    color: black;
    border-radius: 5px;
    padding: 1px 10px 1px 10px;
    margin: 15px 10px 1px 10px;
}  
    
.tijdstip-02 {
    background-color: #e2fef6;
}
  
.tijdstip-info {
    float: left;
    color: black;
    background-color: #e2fef6;
    border: 1px solid #e3e5e3;
    border-radius: 5px;
    padding: 1px 5px 1px 5px;
    margin: 10px 0 10px 0;
}

.spacer1px, .spacer10px, .spacer20px  {
    display: block;
    width: 100%;
    clear: both;
}

.spacer1px {height: 1px;}.spacer10px {height: 10px;}.spacer20px {height: 20px;}

.split-01, .split-02 {
    display:block;
    width: 100%;
    height: 10px;
    clear: both;
    margin: 10px 0 10px 0;
}

.split-01 {
    background-color: #9fa09f;
}

.split-02 {
    background-color: #586f90;
}

.mededeling {
     background: red;
     color: white;
     display: inline-block;
     width: 100%;
     padding: 5px 5px 5px 5px;
}

.mededeling a {
    color: #eaee3c;
}

.img-vertical-center img {
    vertical-align: middle;
}

.rap-caps {
    text-align: center;
    margin: 8px 0 0 0;
}

.caps_text_01, .caps_text_02 {
    padding: 2px 10px 2px 10px;   
}

.caps_text_01 {
    color: black;
}

.caps_text_02 {
    color: #98151b;
}

/* Begin - Trefwoorden */
.letter {
    float: left;
    clear: left;
    font-size: 1.7em;
    text-align: center;
    font-weight: bolder;
    background-color: #CCCCCC;
    border: 1px solid black;
    width: 40px;
    padding: 8px;
    margin: 5px 10px 5px 1px;
}

.spanlink a:link, .spanlink a:visited, .spanlink a:hover {
    font-size: 1.0em;
    border: 1px solid #b9bab7;
    white-space: nowrap;
    padding: 2px 8px 2px 8px;
    margin: 5px 5px 5px 0;
}

.spanlink a:link, .spanlink a:visited {
    background-color: white;/* #007900 #ffdf08; */
    color: blue;
}

.spanlink a:hover {
    background-color: black;
    color: white;
}
/* Einde - Trefwoorden */

/* Google zoeken */
.gsc-control-cse {
    border-radius: 15px;
}

/* Ronde vorm */
.link-knop-02 {
    font-size: 1.0em;
    background-color: #ffffff; 
    border: 1px solid #009000;
    border-radius: 25px;
    padding: 3px 12px 3px 12px;
}

.groen {
    color: green;
}

.blauw {
    color: blue;
}

/* Om iets te verbergen in formulier */
.verberg {
    position: absolute;
    left: -9999px;
}

iframe {
    width: 100%;
}

/*https://webstick.nl/youtube-video-responsive-maken */
.video-container {
    position: relative;
    height: 0;
    overflow: hidden;
    border-radius: 15px;
    padding-bottom: 56.25%;
    padding-top: 30px;
    margin: 30px 10px 30px 10px;
}

.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.border-w {
    border: 1px solid #ffffff;
    padding: 3px 5px 3px 5px;
    background-color: #ffffff;
}




.tijdstip {
    float: left;
    background-color: white;
    color: black;
    border-radius: 5px;
    margin: 10px 10px 25px 0;
    padding: 1px 10px 1px 10px;
}

.kop-01, .kop-02, .kop-03 {
    margin: 0 0 0 10px;
}

.kop-01 {
    color: black;
}

.kop-02 {
    color: #9b0000;
}

.kop-03 {
    color: brown;
}


/*** BEGIN - Blinkt Tekst ***/
.blink {
    animation: blinker 2s linear infinite;
}

.blink-red-01, .blink-green-01, .blink-blue-01 {
    font-weight: bold;
    animation: blinker 2s linear infinite;
}

.blink-red-01 {
    color: red;
}

.blink-green-01 {
    color: green;
}

.blink-blue-01 {
    color: blue;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}
/*** EINDE - Blinkt Tekst ***/




a.link_div:link, a.link_div:visited {
    color: #080a7d;
}

a.link_div:hover {
    color: #649dff;
}

.groene-regel {
    width: 100%;
    background-color: #ff6600;
    display: inline-block;
    margin: -30px 0 0 0;
}




/*** BEGIN - Font Family ***/
.font-fam-01 { font-family: helvetica; }
.font-fam-02 { font-family: times; }
.font-fam-03 { font-family: sans-serif; }
.font-fam-04 { font-family: monospace; }
.font-fam-05 { font-family: cursive; }
.font-fam-06 { font-family: fantasy; }
.font-fam-07 { font-family: verdana; }

.font-style-italic { font-style: italic; }
.font-weight-bold { font-weight: bold; }
.font-weight-100 { font-weight: 100; }
/*** EINDE - Font Family ***/


/* Begin - Vrij Internet */
.vrij-internet {
    font-size: 14px;
    background: lightgoldenrodyellow;
    padding: 5px 10px 5px 10px;
    border: 1px solid #e8e8e8;
    border-radius: 15px;
}

.logo-vrij {
    float: right;
    margin: 5px 5px 5px 5px;
}

.logo-vrij img {

}
/* Einde - Vrij Internet */

.Software_Versie {
    text-align: center;
    font-size: 0.8em;
}


/********* Einde - Normale CSS *********/



/* BEGIN - Bovenste menu-hoofd */

/* Het vaste hoofdmenu */
#rap-menu-hoofd {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: #597090;
    padding: 10px 5px;
    /* Geen vaste hoogte gebruiken */
    height: auto;
    min-height: 0;
}

/* Ruimte tussen het vaste menu en de website-inhoud */
body {
    padding-top: var(--menu-hoogte, 0px);
}

#rap-admin-menu {
    padding: 0 10px;
}

/* Normale én actieve links */
#rap-menu-hoofd .menu a,
#rap-menu-hoofd .menu-Active a {
    display: inline-block !important;
    box-sizing: border-box;
    color: #ffffff !important;
    padding: 5px 10px !important;
    margin: 3px 2px !important;
    border-radius: 1em !important;
    text-decoration: none !important;
    line-height: normal;
}

/* Normale links */
#rap-menu-hoofd .menu a {
    background-color: #000000 !important;
}

/* Hover op normale links */
#rap-menu-hoofd .menu a:hover {
    color: #ffffff !important;
    background-color: #147004 !important;
}

/* Actieve link */
#rap-menu-hoofd .menu-Active a,
#rap-menu-hoofd .menu-Active a:hover {
    background-color: #78000d !important;
    color: #ffffff !important;
}

/* Genummerde links */
#rap-menu-hoofd .menu-nr a {
    background-color: blue !important;
    color: #ffffff !important;
}

/* EINDE - Bovenste menu-hoofd */


/* BEGIN - Vorige - Volgende */

.rap-menu-volgende {
    display: block;
    margin-bottom: 5px;
}

.menu-volgende {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 12px;
}

.menu-volgende a {
    display: inline-block;
    width: 100px;
    box-sizing: border-box;
    margin: 0 2px;
    padding: 5px 10px;
    background: #000;
    color: #fff;
    border-radius: 1em;
    text-align: center;
    text-decoration: none;
}

.menu-volgende a:hover {
    background: #147004;
}

.menu-volgende .knop-klein a {
    background: #78000e;
}

/* EINDE - Vorige - Volgende */



/********* Begin - Flex boxen *********/

.flex-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    clear: both;
}

/********* Einde - Flex boxen *********/




/********* Begin - IMG Uitlijning *********/

img { /* laten staan vanwege windows explorer */
    border: none;
    outline: none;
}

img {
  max-width: 100%;
  height: auto;
}

.float-left {
    float: left;
    margin: 0 20px 20px 0;
}

.float-right {
    float: right;
    margin: 0 0 20px 20px;
}


/*** BEGIN - IMG/CAP/LIGHT ***/
.shadow-J {
    box-shadow: 0 4px 8px 0 rgba(0,  0,  0,  0.2), 0 6px  20px 0 rgba(0, 0, 0, 0.19);
}

.shadow-N {
    box-shadow: none;
}
/*** EINDE - IMG/CAP/LIGHT ***/

.shadow img {
    -webkit-box-shadow: 3px 3px 8px -2px rgba(0,0,0,0.84);
    box-shadow: 3px 3px 8px -2px rgba(0,0,0,0.84);
}

.noshadow img {
    box-shadow: none;
}

.radius {
    border-radius: var(--radius);
}

/*** Voor DIV randen ***/
.radius-00 {border-radius: unset;}
.radius-05 {border-radius: 5%;}
.radius-10 {border-radius: 10%;}
.radius-15 {border-radius: 15%;}
.radius-20 {border-radius: 20%;}
.radius-25 {border-radius: 25%;}
.radius-30 {border-radius: 30%;}
.radius-35 {border-radius: 35%;}
.radius-40 {border-radius: 40%;}
.radius-45 {border-radius: 45%;}
.radius-50 {border-radius: 50%;}

/********* Einde - IMG Uitlijning *********/






/********* Begin - Formulier *********/

.akkoord-knop, .akkoord-knop:hover {
    font-size: 15px; 
    padding: 4px 10px 4px 10px;
    border: 1px solid grey;
    border-radius: 15px;
    -webkit-box-shadow: 5px 5px 15px -7px #000000;
    box-shadow: 5px 5px 15px -7px #000000;
}

.akkoord-knop {
    background-color: darkgreen;
    color: white;
}

.akkoord-knop:hover {
    background-color: black;
    color: white;
}

.form-vraag {
    background-color: #e8f7e2;
    margin: 30px 0 30px 0;
    padding: 5px 9px 5px 9px;
}

input[type=text], input[type=password], input[type=email] {
    margin-left: 0px;
    margin-right: 0px;
}

fieldset {
    padding: 10px;
}

/* BEGIN - Voor Anti SPAM in formulier */
input.verberg {
    display: none;
}
/* EINDE - Anti SPAM */

.verplicht { 
    color: white;
    background-color: red;
    font-size: 0.8em;
    border: 1px solid #ddded8; 
    border-radius: 10px;
    margin: 0 5px 0 0;
    padding: 1px 7px 1px 7px;
} 

input, textarea, select {
    font-size: 0.9em;
    padding: 8px;
}

input.input01, textarea.input01 {
    background-color : #f9f9f9;
    border: 1px solid #686868;
}

textarea { 
    width: 100%; 
} 

.verstuurknop {
    background: #000000;
    color: white;
    font-size: 15px;
    /* border: 0 none; */
    border: 1px solid grey;
    cursor: pointer;
    border-radius: 15px;
    padding: 5px 15px; 
}

.verstuurknop:hover {
    background: #147004;
}

/********* Einde - Formulier *********/






/********* Begin - Tabel *********/

table {
    border-collapse: collapse;
}

table.simpel {
    /* op 0 houden vanwege IE */
    border-spacing: 0 ;
    border: 0 outset #F1F1F1;
    border-collapse: collapse;
    background-color: white;
    /* width: 100%; */
}

table.simpel td {
    border: 1px solid #F1F1F1;
    background-color: white;
    vertical-align: top;
}

.simpel a, .simpel a:visited {
    text-decoration: none;
}

/* https://html-cleaner.com/features/replace-html-table-tags-with-divs/ */

.rTable001, .rTable002 {
    display: table;
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    margin: 10px 0 10px 0;
}

.rTableRow {
    display: table-row;
}

.rTableRow_00,.rTableRow_01 {
    display: table-row;
    margin: 0 0 10px 0;
}

.rTableRow_01 {
    color: #970408;
    font-weight: bold;
}

.rTableHeading {
    display: table-header-group;
}

.rTableBody {
    display: table-row-group;
}

.rTableCell_00, .rTableCell_01, .rTableCell_02 {
    display: table-cell;
    vertical-align: top;
    border: 1px solid #dedede;
    overflow: hidden;
    padding: 3px 5px 3px 5px;
}

.rTableCell_00, .rTableCell_01 {
    background-color: white;
}

.rTableCell_02 {
    background-color: #e9ffe7;
}

/********* Einde - Tabel *********/

/********* Einde - Algemeen *******/



/********* BEGIN - Veilige 3:1 kleurcodes *******/

.B-CC0000 {background-color: #CC0000;} .C-CC0000 {color: #CC0000;}
.B-CC0033 {background-color: #CC0033;} .C-CC0033 {color: #CC0033;}
.B-CC0066 {background-color: #CC0066;} .C-CC0066 {color: #CC0066;}
.B-CC0099 {background-color: #CC0099;} .C-CC0099 {color: #CC0099;}
.B-9900CC {background-color: #9900CC;} .C-9900CC {color: #9900CC;}
.B-6600FF {background-color: #6600FF;} .C-6600FF {color: #6600FF;}
.B-9900FF {background-color: #9900FF;} .C-9900FF {color: #9900FF;}
.B-CC3300 {background-color: #CC3300;} .C-CC3300 {color: #CC3300;}
.B-CC3333 {background-color: #CC3333;} .C-CC3333 {color: #CC3333;}
.B-993366 {background-color: #993366;} .C-993366 {color: #993366;}
.B-993399 {background-color: #993399;} .C-993399 {color: #993399;}
.B-9933CC {background-color: #9933CC;} .C-9933CC {color: #9933CC;}
.B-3333FF {background-color: #3333FF;} .C-3333FF {color: #3333FF;}
.B-6633FF {background-color: #6633FF;} .C-6633FF {color: #6633FF;}
.B-336600 {background-color: #336600;} .C-336600 {color: #336600;}
.B-666600 {background-color: #666600;} .C-666600 {color: #666600;}
.B-336633 {background-color: #336633;} .C-336633 {color: #336633;}
.B-666633 {background-color: #666633;} .C-666633 {color: #666633;}
.B-006666 {background-color: #006666;} .C-006666 {color: #006666;}
.B-336666 {background-color: #336666;} .C-336666 {color: #336666;}
.B-666666 {background-color: #666666;} .C-666666 {color: #666666;}
.B-006699 {background-color: #006699;} .C-006699 {color: #006699;}
.B-336699 {background-color: #336699;} .C-336699 {color: #336699;}
.B-666699 {background-color: #666699;} .C-666699 {color: #666699;}
.B-0066CC {background-color: #0066CC;} .C-0066CC {color: #0066CC;}
.B-3366CC {background-color: #3366CC;} .C-3366CC {color: #3366CC;}

/********* EINDE - Veilige 3:1 kleurcodes *******/





/********* BEGIN - Tickets *******/

/* Voorkomt blauwe lijn om een knop */
button:focus {outline:0;}

button {
    font-size: 1em;
}

#rap-reactie-venster {
    background-color: #a8adf2; /* #a8adf2; */ 
}

.reactie-venster {
    background-color: #fefdd8; 
    border-radius: 15px;
    -webkit-box-shadow: 2px 2px 24px -5px rgba(0,0,0,1);
    -moz-box-shadow: 2px 2px 24px -5px rgba(0,0,0,1);
    box-shadow: 2px 2px 24px -5px rgba(0,0,0,1);
    padding: 20px;
}

.rap-1-ticket {
    margin: 20px 0 0 0;
}

/*** BEGIN - Ticket Balk ***/
.balk1 {
    background-color: #fee683;
    box-shadow: 0 1px 13px 0 rgba(0,0,0,0.52); /* */
    color: black;
    min-height: 30px;
    border: 1px solid #737373;
    padding: 10px 10px 10px 10px;
}

.balk1 a:link, .balk1 a:visited, .balk1 a:hover {
    text-decoration: none;
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.75);
    line-height: 32px;
    padding: 3px 7px 3px 7px;
    margin: 0 5px 35px 0;
}

.balk1 a:link, .balk1 a:visited {
    background-color: #ffffff;
    color: #081eff;
}

.balk1 a:hover {
    background-color: #0F3FFB;
    color: #ffffff;
}

.notificatie-balk {
    background-color: white;
    padding: 10px 10px 10px 10px;
    margin: 0 0 30px 0;
}

.prio-1 textarea { 
    border: 1px solid green; 
}

prio-2 textarea { 
    border: 3px solid orange; 
}

prio-3 textarea { 
    border: 5px solid red; 
}

/*** EINDE - Ticket Balk ***/


/*** BEGIN - Blokken boven tekst ***/

.blok-ticket-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    /* background-color: #7174a3; /*  */
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.blok-ticket-01 {
    float: left;
    background-color: white;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    /* Width + Margin + Padding in responsive */
}

.blok-ticket-02 {
    float: left;
    margin: 0 3px 0 3px;
    padding: 10px 0 5px 5px;
    /* padding in responsive */
}



/*** BEGIN - Geplaatst door ***/

#rap-info-artikel {
    display: flex;
    background-color: #f8f8f8;
    flex-wrap: wrap;
    font-size: 0.9em;
    margin: 0 0 30px 0;
    padding: 10px;
}

.info-artikel-avatar {
    padding: 0;
    margin: 0 10px 10px 0;
}

.info-artikel-txt {
    flex-grow: 1;
    padding: 0;
    margin: 3px 0 0 0;
}

.geplaatst {
    background-color: white;
    padding: 3px 10px 2px 10px;
    line-height: 1.5em;
}

/*** EINDE - Geplaatst door ***/


/*** BEGIN - Avatar ***/
.profiel-mijn-account {
    float: right;
    min-width: 90px;
    min-height: 140px;
    clear: both; 
    text-align: center;
    border: 1px solid lightgrey;
    background-color: #fefdd8; 
    margin: 0 0 0 0; 
    padding: 15px 10px 5px 10px; 
}

.profiel-Admin, .profiel-Deeln {
    float: left; 
    font-size: 0.8em; 
    min-width: 90px;
    clear: both; 
    text-align: center;
    border: 1px solid lightgrey;
    padding: 5px 10px 5px 10px;
}

.profiel-Admin {
    background-color: #dcf9dc; 
    margin: 1px 1px 1px 1px; 
}

.profiel-Deeln {
    background-color: #fefdd8; 
    margin: 1px 1px 1px 1px; 
}

.profiel-MijnAccount a, .profiel-Admin a, .profiel-Deeln a {
    text-decoration: none;
}

.profiel-MijnAccount img, .profiel-Admin img, .profiel-Deeln img {
    border: 3px solid #FFFFFF;
    margin: 0 0 5px 0;
}

.avatar-01 img {
    border-radius: 15px;
    border: 3px solid #FFFFFF;
}

.avatar-txt {
    max-width: 120px;
}
/*** EINDE - Avatar ***/


.Tijdstip-Admin, .Tijdstip-Deeln, .Extra-Uren, .Prio-Status {
    float: left;
    clear: left;
    background-color: white;
    color: black;
    font-size: 0.9em;
    border: 1px solid #61625f;
    border-radius: 5px;
    margin: 1px 10px 5px 1px;
    padding: 3px 10px 3px 10px;
}

.Prio-Status {
    padding: 3px 5px 3px 5px;
}

.Prio-Status a, .Extra-Uren a {
    text-decoration: none;
}

.Extra-Uren {
    min-width: 180px;
}

/* BEGIN - Soort Ticket */
.C-Ticket, .C-E-mail, .C-WhatsApp, .C-Telefoon, .C-Admin, .C-AnyDesk  {
    float: left;
    clear: left;
    font-size: 0.9em;
    border-radius: 5px;
    border: 1px solid black;
    padding: 3px 10px 3px 10px;
    margin: 1px 1px 5px 1px;
}

.C-Ticket {
    background-color: blue;
    color: white;
}

.C-E-mail {
    background-color: red;
    color: white;
}

.C-WhatsApp {
    background-color: green;
    color: white;
}

.C-Telefoon {
    background-color: black;
    color: white;
}

.C-Admin {
    background-color: #dbf9db;
    color: black;
}

.C-AnyDesk {
    background-color: #f6c700;
    color: black;
}
/* EINDE - Soort Ticket */

/*** EINDE - Blokken boven tekst ***/


.ticket-tekst-01 {
    background-color: white; /* #eef5ff; */
    /* padding in Response */
    padding: 10px 15px 10px 15px;
    line-height: 1.3em;
    border-top-right-radius: 25px;
    margin: 0 0 20px 0;
}

.ticket-tekst-01 li
{
    margin-left: 0px;
}

.ticket-tekst-01 li li
{
    margin-left: -20px;
}

.knop-aan-01 a:link, .knop-aan-01 a:visited, .knop-uit-01 a:link, .knop-uit-01 a:visited {
    color: white;
    border: 0 none;
    cursor: pointer;
    margin: 10px 5px 3px 0;
    padding: 1px 7px; 
}

.knop-aan-01 a:link, .knop-aan-01 a:visited {
    background: green;
}

.knop-aan-01 a:hover {
    background: #CC0000; /* 3:1 */
}

.knop-uit-01 a:link, .knop-uit-01 a:visited {
    background: #CC0000; /* 3:1 */
}

.knop-uit-01 a:hover {
    background: black;
}

.img-bouw {
    text-align: center;
    max-width: 800px;
    height: auto;
    margin: 40px auto 40px auto;
}

.img-voorbeelden {
    box-shadow: 0 4px 8px 0 rgba(0,  0,  0,  0.2), 0 6px  20px 0 rgba(0, 0, 0, 0.19);
}

.ticket-nr { 
    font-size: 1.0em;
    font-weight: bold;
    background-color: #840000;
    color: white;
    line-height: 40px;
    text-align: center;
    -webkit-box-shadow: 3px 3px 8px -2px rgba(0,0,0,0.84);
    box-shadow: 3px 3px 8px -2px rgba(0,0,0,0.84);
    padding: 5px 25px;
}

.geenantwoord {
    background-color: red;
    padding: 4px 1px 4px 1px; 
    border: 3px solid red;
    /*animation: blinker 2s linear infinite;*/
}
/********* EINDE Tickets *********/









/********* Begin - Responsive *********/

/*** BEGIN - 2 kolom Responsive ***/
/*** http://jsfiddle.net/cUCvY/1/ ***/
.wrapper {
    overflow: hidden;
}

.wrapper div {

}

.blok1 {
    float: left;
    margin-right: 10px;
    width: 160px;
    text-align: center;
}

.blok2 {
    min-height: 150px;
    background-color: #F2F2F2;
    overflow: hidden;
    border: 1px solid grey;
    border-radius: 15px;
    padding: 0 15px 0 15px;
    margin: 0 0 10px 0;
}

@media screen and (max-width: 600px) {
   .blok1 {
       float: none;
       width: auto;
       text-align: center;
       margin-right: 10px;
   }
  .blok2 {
   
  }
}
/*** EINDE - 2 kolom Responsive ***/



/*--------------------------------------------------------
Begin - Alle Statische leden 
--------------------------------------------------------*/

.onderhoud-01 {
    animation: blinker 3s linear infinite;
    background-color: #ff0f23;
    color: white;
    height: 35px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    padding: 10px;
}

.onderhoud-01 a {color: #eaee3c;}
.onderhoud-01 a:hover {color: #000000;}

/*--------------------------------------------------------
Einde - Alle Statische leden 
--------------------------------------------------------*/



/*** BEGIN - Kalender ***/
.kal-kolom-01, .kal-kolom-03
{
    float: left;
    padding: 0 5px 0 5px;
    border: 1px solid #acada8;
}
 
.kal-kolom-01 {
    clear: both;
    color: black;
    min-width: 120px;
    margin: 0 0 3px 0;
}

.kal-SC
{
    float: left;
    text-align: center;
    font-size: 0.9em;
    min-width: 30px;
    border: 1px solid #acada8;
    font-size: 0.8em;
    color: blue;
    margin: 0 5px 3px 0;
    padding: 0 2px 0 2px;
}

.kal-kolom-03 {
    min-width: 40px;
    margin: 0 5px 3px 0;
}

.kal-0 { /* Vrij */
    border-right: 20px solid green;
}

.kal-1 { /* In overleg */
    border-right: 20px solid lightpink;
}

.kal-2 { /* Bezet */
    border-right: 20px solid red;
}

.uitleg {
    background-color: lightcyan;
    border: 1px solid black;
    padding: 5px 10px 5px 10px;
    margin: 0 0 10px 0;
}

.ga-naar {
    background-color: lightgoldenrodyellow;
    border: 1px solid grey;
}

.ga-naar-02 {
    background-color: white;
    border: 1px solid grey;
    padding: 5px 10px 5px 10px;
    margin: 8px 8px 8px 8px;
}

.wkd {
    background-color: lightcyan;
}
/*** EINDE - Kalender ***/




/*** BEGIN - Website Info ***/

.rap-WT-IMG {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.WT-IMG-001 {
    border: 1px solid black;
}

.clear {
    clear: left;
}

.kolom-01 {
    float: left;
    border: 1px solid #acada8;
    padding: 0 10px 0 10px;
    margin: 0 5px 3px 0;
}

.kolom-01 li {
    margin: 0 0 0 -12px;
}

.kolom-02 {
    float: left;
    min-width: 44px;
    border: 1px solid #acada8;
    text-align: center;
    font-size: 0.9em;
    margin: 0 5px 3px 0;
    padding: 0 2px 0 2px;
}

.kolom-03 {
    float: left;
    min-width: 30px;
    border: 1px solid #acada8;
    padding: 0 5px 0 5px;
    margin: 0 5px 3px 0;
}

.W-10 {min-width: 10px;}.W-20 {min-width: 20px;}.W-30 {min-width: 30px;}.W-40 {min-width: 40px;}.W-50 {min-width: 50px;}.W-60 {min-width: 60px;}.W-70 {min-width: 70px;}.W-80 {min-width: 80px;}.W-90 {min-width: 90px;}
.W-100 {min-width: 100px;}.W-110 {min-width: 110px;}.W-120 {min-width: 120px;}.W-130 {min-width: 130px;}.W-140 {min-width: 140px;}.W-150 {min-width: 150px;}.W-160 {min-width: 160px;}.W-170 {min-width: 170px;}.W-180 {min-width: 180px;}.W-190 {min-width: 190px;}
.W-200 {min-width: 200px;}.W-210 {min-width: 210px;}.W-220 {min-width: 220px;}.W-230 {min-width: 230px;}.W-240 {min-width: 240px;}.W-250 {min-width: 250px;}.W-260 {min-width: 260px;}.W-270 {min-width: 270px;}.W-280 {min-width: 280px;}.W-290 {min-width: 290px;}
.W-300 {min-width: 300px;}.W-350 {min-width: 350px;}.W-400 {min-width: 400px;}.W-450 {min-width: 450px;}.W-500 {min-width: 500px;}

.rij-C-nvt { /* 0-19 donker rood */
    border-right: 20px solid #feffdf;
}

.rij-C-000 { /* 0-19 donker rood */
    border-right: 20px solid #d50000;
}

.rij-C-001 { /* 0-19 donker rood */
    border-right: 20px solid red;
}

.rij-C-010 { /* 0-19 donker rood */
    border-right: 20px solid red;
}

.rij-C-020 { /* 20-30 */
    border-right: 20px solid red;
}

.rij-C-030 { /* 30-40 */
    border-right: 20px solid #ff6756;
}

.rij-C-040 { /* 40-49 */
    border-right: 20px solid #ff6756;
}

.rij-C-050 { /* 50-59 */
    border-right: 20px solid #ff6756;
}

.rij-C-060 { /* 60-69 */
    border-right: 20px solid #ffd7d0;
}

.rij-C-070 { /* 70-79 */
    border-right: 20px solid #d9edd5;
}

.rij-C-080 { /* 80-89 */
    border-right: 20px solid #89d580;
}

.rij-C-090 { /* 90-99 */
    border-right: 20px solid #00a700;
}

.rij-C-100 { /* 100% */
    border-right: 20px solid green;
}

.fs-20 {
    font-size: 20px;
}

.fs-25 {
    font-size: 25px;
}

.zh0 { /* niets */
    border-left: 4px solid lightgrey;  /* #acada8 */
}

.zh1 { /* verbetering mogelijk */
    border-left: 4px solid blue;
}

.zh6 { /* e-mail */
    border-left: 4px solid orange;
}

.izh7 { /* genegeerd */
    border-left: 4px solid red;
}

.zh9 { /* verbeterd */
    border-left: 4px solid green;
}

.Kop-01 {
    float: left;
    clear: left;
    background-color: black;
    color: white;
    padding: 0 5px 0 5px;
    margin: 10px 0 10px 0;
}

.Kop-02 {
    float: left;
    clear: left;
    background-color: lightcyan;
    color: black;
    border: 1px solid #acada8;
    padding: 0 5px 0 5px;
    margin: 10px 0 2px 0;
}

/*** EINDE - Website Info ***/



/*** BEGIN - Status ***/
.Balk4 {
    background-color: lightgoldenrodyellow;
    border: 1px solid #737373;
    color: black;
    padding: 10px 5px 10px 10px;
    margin: 0 0 0 0;
}

.Balk4 a:link, .Balk4 a:visited {
    background-color: #ffffff;
    color: #081ae7;
    text-decoration: none;
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.60);
    border: 1px solid #737373;;
    border-radius: 5px;
    padding: 0px 7px 0px 7px;
}

.Balk4 a:hover {
    text-decoration: none;
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.60);
    border: 1px solid #737373;;
    border-radius: 5px;
    padding: 0px 7px 0px 7px;
    background-color: #081eff;
    color: #ffffff;
}   
/*** EINDE - Status ***/


/*** BEGIN - Footer ***/
/* #rap-footer-01 + #footer-01 ook in in xxx-extra.css */
#rap-footer-01 {
    padding: 0 0 0 0;
    margin: -20px 0 20px 0;
}

#footer-01 {
    /* max-width: 430px; */
    /* border: 0 solid grey; */ 
    background-color: #78000d;
    color: white;
    text-align: center;
    padding: 6px 5px 6px 5px;
    margin: 0 auto 0 auto;
}

#footer-01 a {
    color: white;
    text-decoration: underline;
}

#footer-01 a:hover {
    color: darkgray;
}

#footer-01 img {
    vertical-align: middle;
}

/*** EINDE - Footer ***/

/* [1 van 3] - - - - Geheel breed  - Heel Groot scherm - - - */
@media screen and (min-width: 1151px) and (max-width: 8000px) {
    
    #rap {
        max-width: 900px; /* max 1280 */
        padding: 0 0 100px 0;
        margin: 0 auto 60px auto; 
    }
    
    h1 {
        font-size: 1.5em;
    }
    
    .col-inhoud {
        width: 258px;
    }
            
    .blok-grijs-01 {
        /* border: 10px solid lightgrey; */
        padding: 30px 50px 20px 50px;
    }
    
    .blok-ticket-01 {
        min-width: 170px;
        margin: 0 3px 0 0;
        padding: 30px 35px 0 40px;
    }
    
    .blok-reactie-02 {
        /* border: 10px solid #D3D3D3; */
    }
       
    .logo_01 img {
        width: 190px;
    }

    .table_resp {
        width: 700px;
    }

    .simpel td {
        padding: 2px 15px 2px 15px;
    }

    .simpel td.c1 {
        width: 160px;
    }
        
    #rap-reactie-venster {
        padding: 20px 30px 20px 30px;
    }
        
    .reactie-venster {
        padding: 20px;
    }
    
    .ticket-tekst-01 {
        padding: 10px 40px 30px 40px;
    }
    
    .einde {
        margin: 0 5px 10px 0;
    }
    
    #footer-01 {
        font-size: 0.9em;
    }
        
}

/* [2 van 3] - - - - Max Width 1150 - Groot scherm - - - */
@media screen and (min-width: 501px) and (max-width: 1150px) {

    #rap {
        max-width: 900px; /* max 1280 */
        padding: 0 10px 100px 10px;
        margin: 0 auto 60px auto;
    }
        
    h1 {
        font-size: 1.4em;
    }

    .col-inhoud {
        width: 258px;
    }
       
    .blok-grijs-01 {
        /* border: 10px solid lightgrey; */
        padding: 30px 30px 20px 30px;
    }
    
    .blok-ticket-01 {
        width: 170px;
        margin: 0 3px 0 0;
        padding: 30px 35px 0 40px;
    }
    
    .blok-reactie-02 {
        /* border: 10px solid #D3D3D3; */
    }
    
    .logo_01 img {
        width: 190px;
    }

    .table_resp {
        width: 100%;
    }

    .simpel td {
        padding: 2px 10px 2px 10px;
    }

    .simpel td.c1 {
        width: 160px;
    }

    .blok-zegt {
        font-size: 1.0em;
    }
       
    #rap-reactie-venster {
        padding: 20px 15px 20px 15px;
    }
    
    .reactie-venster {
        padding: 10px;
    }
    
    .blok-grijs-01 ul li, .blok-grijs-01 ol li {
        margin: 0 0 0 -20px;
    }
        
    .ticket-tekst-01 {
        padding: 10px 40px 30px 40px;
    }

    .einde {
        margin: 0 5px 15px 0;
    }
    
    #footer-01 {
        font-size: 0.8em;
    }
   
}

/* [3 van 3] - - - - Klein mobiel scherm - - - */
@media screen and (min-width: 2px) and (max-width: 500px) {
   
    #rap {
        max-width: 900px; /* max 1280 */
        padding: 0 3px 100px 2px;
        margin: 0 auto 60px auto;
    }
    
    #rap-title {
        /* border-left: 4px solid #D3D3D3; */
        /* border-right: 4px solid #D3D3D3; */
    }
        
    h1 {
        font-size: 1.3em;
    }
    
    .blok-grijs-01 {
        /* border: 5px solid lightgrey; */
        padding: 5px 20px 10px 15px;
    }
    
    .blok-grijs-01 ul li, .blok-grijs-01 ol li {
        margin: 0 0 0 -20px;
    }
    
    .blok-ticket-01 {
        width: 112px;
        /* border-top-left-radius: 10px; */
        border-top-right-radius: 10px;
        margin: 0 5px 0 0;
        padding: 10px 10px 0 10px;
    }
    
    .blok-reactie-02 {
        /* border: 4px solid #D3D3D3; */
    }
    
    .logo_01 img {
        width: 150px;
    }

    .table_resp {
        width: 100%;
    }

    .simpel td {
        font-size: 1.0em;
        padding: 2px 5px 2px 5px;
    }

    table.simpel td.c1 {
        width: 100px;
        font-size: 1.0em;
    }

    .blok-zegt {
        font-size: 1.0em;
    }
        
    #rap-reactie-venster {
        padding: 20px 10px 20px 10px;
    }
    
    .reactie-venster {
        padding: 10px;
    }
        
    .ticket-tekst-01 {
        padding: 10px 15px 30px 15px;
    }
        
    .einde {
        margin: 0 5px 15px 0;
    }
    
    #footer-01 {
        font-size: 0.8em;
    }
}

/********* Einde - Responsive *********/