@charset "utf-8";
.sluit {
position: fixed;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
z-index: 2;
right: 2px;
top: 2px;
}
.center {
margin: 0px auto 0px auto;
width: 70%;
height: 85%;
border: 2px solid #73AD21;
}
.element {
max-width: fit-content;
margin-left: 15%;
margin-right: auto;
}
p {
margin: 0 0 30px 0;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 2vmin;
}
.pdf {
width: 100%;
}
.pdf,
html,
body {
height: 100%;
witdh:100%;
margin: 0;
padding: 0;
}
a {
border: 1px solid #000;
padding: 1px 5px;
font-weight: bold;
font-size: 11px;
background: #FFF;
cursor: pointer;
text-decoration: none;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 7px 1px rgba(55, 55, 90, .50);
-moz-box-shadow: 0px 0px 7px 1px rgba(55, 55, 90, .50);
box-shadow: 0px 0px 7px 1px rgba(55, 55, 90, .50);
}
a:hover {
color: aliceblue;
background-color:darkgreen;
text-decoration: underline;
}
.text1 {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
text-align: center;
color: #020BB4;
display: table;
margin: 0px auto 0px auto;
padding: 0px 15px 0px 15px;
text-decoration: underline;
font-size: 1.8vw;
}
.text2 {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
text-align: center;
border-radius: 15px;
color: #7A0709;
display: table;
margin: 3px auto 0px auto;
padding: 0px 10px 5px 10px;
background-color: aliceblue;
font-size: 1.5vw;
}
.text3 {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
text-align: center;
border-radius: 11px;
color: midnightblue;
display: table;
margin: 3px auto 2px auto;
padding: 0px 15px 1px 15px;
background-color: blanchedalmond;
font-size: calc(15px + (28 - 20) * (100vw - 640px) / (1280 - 640));
box-shadow: rgba(72, 135, 202, 0.8) 0 0 9px 3px;
}
.text4 {
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
font-weight: lighter;
text-align: center;
border-radius: 5px;
color: blanchedalmond;
display: table;
margin: 3px auto 0px auto;
padding: 0px 5px 0px 5px;
background-color: seagreen;
}
.text5 {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
text-align: left;
line-height: 2.2;
text-decoration: underline solid gold 50%;
border-radius: 5px;
color: blue;
margin: 3px 2px 0px 2px;
padding: 0px 5px 5px 5px;
background-color: gold;
}
.text6 {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
text-align: center;
font-size: calc(10px + (28 - 20) * (80vw - 640px) / (1280 - 640));
color: darkolivegreen;
margin: 3px auto 2px auto;
padding: 0px 15px 1px 15px;
}
.text7 {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-weight: normal;
text-align: center;
font-size: calc(10px + (28 - 20) * (80vw - 640px) / (1280 - 640));
margin: 3px auto 2px auto;
padding: 0px 15px 1px 15px;
color: #625E5E;
text-shadow: 3px 2px 3px rgba(255,255,255,.2);
}
.text8 {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-weight: normal;
text-align: center;
font-size: 15px;
margin: auto;
padding: 0px 15px 1px 15px;
color: #625E5E;
text-shadow: 3px 2px 3px rgba(255,255,255,.2);
}
.verberg-na-5s {
padding: 6px;
animation: verdwijn 1s ease forwards;
animation-delay: 5s;
}
@keyframes verdwijn {
to {
opacity: 0;
visibility: hidden;
}
}
img.bg {
min-height: 100%;
min-width: 1002px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -1;
opacity:.5
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
.mid {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
.kader {
background-color:#D2CFCA;
border-radius: 10px;
border: 1px solid #aaa;
padding: 5px;
line-height: 22px; 
width: 30%;
height: 3%; 
margin: 0 auto;
-webkit-box-shadow: 0px 0px 9px 1px rgba(55, 55, 90, .75);
-moz-box-shadow: 0px 0px 9px 1px rgba(55, 55, 90, .75);
box-shadow: 0px 0px 5px 1px rgba(55, 55, 90, .75);
}
.chat1 {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 200;
background: #8c6239;
color: white;
padding: 10px 14px;
border-radius: 20px;
cursor: pointer;
font-family: Georgia, serif;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.chat2 {
position: fixed;
bottom: 70px;
right: 20px;
width: 280px;
z-index: 2000;
max-height: 350px;
background: #faf7f2;
border: 1px solid #ccc;
border-radius: 10px;
display: none;
flex-direction: column;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
font-family: Georgia, serif;
}
.chat2b {
padding: 10px;
background: #e8dfd6;
border-bottom: 1px solid #ccc;
}
.chat3 {
padding: 10px;
overflow-y: auto;
flex-grow: 1;
font-size: 14px;
}
.chat4 {
padding: 8px;
border-top: 1px solid #ccc;
}
.chat5 {
width: 100%;
padding: 6px;
border-radius: 6px;
border: 1px solid #bbb;
}
.sug {
list-style: none;
padding: 0;
margin-top: 5px;
display: none;
background: white;
border: 1px solid #ddd;
border-radius: 6px;
width: 260px;
position: absolute;
top: 40px;
left: 0;
z-index: 50;
}
/* ------
   GIDSKE
   ------
*/
.chat1 {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 9000;
cursor: pointer;
}
.chat1-inner {
position: relative;
display: inline-flex;
align-items: center;
padding-left: 20px; /* Ruimte voor Gidske */
}
/* Container van Gidske */
.helper-figure {
position: absolute;
left: -28px;
bottom: -10px;
width: 28px;
height: 60px;
pointer-events: none;
transform-origin: bottom center;
}
.hf-cap,
.hf-head,
.hf-body,
.hf-book,
.hf-arm,
.hf-label {
pointer-events: none;
}
/* Hoofd */
.hf-head {
position: absolute;
top: 0;
left: 4px;
width: 20px;
height: 20px;
background: #f4d1a3;
border-radius: 50%;
box-shadow: 0 0 2px rgba(0,0,0,0.25);
}
/* Haar */
.hf-cap {
position: absolute;
top: -2px;
left: 2px;
width: 24px;
height: 8px;
background: #2c4f7a;
border-radius: 8px 8px 3px 3px;
}
.hf-cap::after {
content: "";
position: absolute;
top: 6px;
left: 5px;
width: 14px;
height: 3px;
background: #2c4f7a;
border-radius: 0 0 4px 4px;
}
/* Lichaam */
.hf-body {
position: absolute;
top: 18px;
left: 7px;
width: 14px;
height: 22px;
background: #3b6ea8;
border-radius: 5px;
}
/* Boekje */
.hf-book {
position: absolute;
top: 22px;
left: 18px;
width: 8px;
height: 14px;
background: #f5f0d8;
border: 2px solid #c2b78a;
border-radius: 2px;
transform: rotate(-10deg);
}
.hf-book::before {
content: "";
position: absolute;
left: 2px;
top: 3px;
width: 6px;
height: 1px;
background: #c2b78a;
box-shadow: 0 4px 0 #c2b78a, 0 8px 0 #c2b78a;
}
/* Arm */
.hf-arm {
position: absolute;
top: 20px;
left: 0px;
width: 5px;
height: 16px;
background: #3b6ea8;
border-radius: 3px;
transform-origin: top center;
animation: armWave 1.3s ease-in-out infinite;
}
/* Labeltje ONDER Gidske */
.hf-label {
position: absolute;
top: 48px;
left: -4px;
font-size: 10px;
font-weight: bold;
color: #2c4f7a;
background: rgba(255,255,255,0.85);
padding: 2px 5px;
border-radius: 6px;
box-shadow: 0 0 4px rgba(0,0,0,0.15);
pointer-events: none;
}
/* Ogen + mond */
.hf-head::before {
content: "";
position: absolute;
left: 5px;
top: 6px;
width: 3px;
height: 3px;
background: #5a3a1a;
border-radius: 50%;
box-shadow: 7px 0 0 #5a3a1a;
}
.hf-head::after {
content: "";
position: absolute;
left: 6px;
top: 13px;
width: 8px;
height: 3px;
border-radius: 0 0 4px 4px;
border-bottom: 2px solid #5a3a1a;
}
/* Knipperen */
.hf-head.blink::before {
height: 1px;
top: 10px;
background: #5a3a1a;
box-shadow: 7px 0 0 #5a3a1a;
}
/* Tooltip */
.helper-figure[title]:hover::after {
content: attr(title);
position: absolute;
left: 50%;
bottom: 70px;
transform: translateX(-50%);
background: #2c4f7a;
color: white;
padding: 6px 10px;
font-size: 11px;
border-radius: 6px;
white-space: nowrap;
box-shadow: 0 0 6px rgba(0,0,0,0.25);
opacity: 1;
}
.helper-figure[title]:hover::before {
content: "";
position: absolute;
left: 50%;
bottom: 62px;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: #2c4f7a transparent transparent transparent;
opacity: 1;
}
.helper-figure::after,
.helper-figure::before {
opacity: 0;
transition: opacity 0.2s ease;
}
/* Hover → arm zwaait */
.chat1:hover .hf-arm {
animation: armWave2 1.6s ease-in-out infinite;
}
@keyframes armWave {
0%   { transform: rotate(0deg); }
50%  { transform: rotate(-25deg); }
100% { transform: rotate(0deg); }
}
@keyframes armWave2 {
0%   { transform: rotate(0deg); }
50%  { transform: rotate(145deg); }
100% { transform: rotate(0deg); }
}
/* Rust */
.helper-idle {
animation: helperIdle 3s infinite ease-in-out;
}
@keyframes helperIdle {
0%   { transform: translateY(0); }
25%  { transform: translateY(-2px); }
50%  { transform: translateY(0); }
75%  { transform: translateY(-2px); }
100% { transform: translateY(0); }
}
/* Denken */
.helper-thinking {
animation: helperThinking 1.2s infinite ease-in-out;
}
@keyframes helperThinking {
0%   { transform: rotate(0deg); }
25%  { transform: rotate(-6deg); }
50%  { transform: rotate(0deg); }
75%  { transform: rotate(6deg); }
100% { transform: rotate(0deg); }
}
/* Fijn */
.helper-happy {
animation: helperHappy 0.9s ease-out 1;
}
@keyframes helperHappy {
0%   { transform: translateY(0) scale(1); }
30%  { transform: translateY(-5px) scale(1.05); }
60%  { transform: translateY(0) scale(0.96); }
100% { transform: translateY(0) scale(1); }
}
/* Tikje */
.helper-salute .hf-cap {
animation: capTip 0.5s ease-out;
}
@keyframes capTip {
0%   { transform: rotate(0deg); }
40%  { transform: rotate(-12deg); }
100% { transform: rotate(0deg); }
}
/* Spinner */
.pdf-loader {
text-align: center;
margin: 15px 0;
}
.loader {
position: relative;
width:  48px;
height: 48px;
background: #de3500;
transform: rotateX(65deg) rotate(45deg);
transform: perspective(200px) rotateX(65deg) rotate(45deg); 
color: #fff;
animation: layers1 1s linear infinite alternate;
  /* ➤ Horizontaal centreren */
margin: 0 auto;
}
.loader:after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.7);
animation: layerTr 1s linear infinite alternate;
}
@keyframes layers1 {
0% { box-shadow: 0px 0px 0 0px  }
90% , 100% { box-shadow: 20px 20px 0 -4px  }
}
@keyframes layerTr {
0% { transform:  translate(0, 0) scale(1) }
100% {  transform: translate(-25px, -25px) scale(1) }
}