@font-face {
    font-family: 'opendyslexic';
    src: url('../fonts/OpenDyslexic-Regular.otf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'opendyslexicbold';
    src: url('../fonts/OpenDyslexic-Bold.otf');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'opendyslexicitalic';
    src: url('../fonts/OpenDyslexic-Italic.otf');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'opendyslexicbolditalic';
    src: url('../fonts/OpenDyslexic-BoldItalic.otf');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'marker_fatregular';
    src: url('../fonts/marker-fat-webfont.eot');
    src: url('../fonts/marker-fat-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/marker-fat-webfont.woff') format('woff'), url('../fonts/marker-fat-webfont.ttf') format('truetype'), url('../fonts/marker- fat-webfont.svg#marker_fatregular') format('svg');
    font-weight: normal;
    font-style: normal;
}



/*! normalize.css v9.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    font-weight: bold;
    background-color: transparent;
}
a:hover {
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
/** QUESTIO CARE **/
/* typography */
* {
    font-family: 'Open Sans', sans-serif;
    color: #3D3D3D;
    font-size: 14px;
    line-height: 1.4em;
}
h1, h2, h3, h4,
h1 *, h2 *, h3 *, h4 * {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 700;
}
h1,
h1 * {
    font-size: 2rem;
    margin: 0 0 0.6em 0;
    color: #FFF !important;
    font: 30px/30px 'Archivo Black', proximanova, Helvetica, Helvetica Neue, Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-weight: 900;
    margin: 0;
}
h1 {
    height: 60px;
    width: calc(100% - 26px);
    background: rgba(238,112,3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* left: 13px; */
    padding-left: 20px;
    box-sizing: border-box;
    margin-bottom: 25px;
    clip-path: polygon(14px 0%, calc(100% - 14px) 0%, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}
/*
h1:before {
    display: block;
    top: 0;
    content: '';
    position: absolute;
    margin-left: -26px;
    width: 0;
    height: 0;
    border-width: 30px 13px 30px 0;
    border-color: transparent rgba(238,112,3,1) transparent transparent;
    border-style: solid;
}
h1:after {
    display: block;
    top: 0;
    content: '';
    position: absolute;
    right: -13px;
    width: 0;
    height: 0;
    border-width: 30px 0px 30px 13px;
    border-color: transparent transparent transparent rgba(238,112,3,1);
    border-style: solid;
}
*/
h2,
h2 * {
    font-size: 1.8rem;
    margin: 0 0 0.2em 0;
}
h3,
h3 * {
    font-size: 1.6rem;
    margin: 0 0 0.6em 0;
}
h4 *,
h4 {
    font-size: 1.4rem;
}
h4 {
    margin: 0 0 0.6em 0;
}
a,
a:hover,
a:focus,
a:active,
a:visited {
    color: rgba(8,97,90,1);
}
/* main */
html {
    height: 100%;
}
body {
	background-color: #f8ac01;
	background: url(../images/bg-doodles.png), url(../images/bg-grid.png), linear-gradient(180deg, #f8ac01 0%, #e6007e 100%);
	background-repeat: no-repeat, repeat !important;
    /* background: url('../images/qc-background.png'), rgb(25,211,197);
    background: url('../images/qc-background.png'), linear-gradient(90deg, rgba(25,211,197,1) 0%, rgba(16,148,138,1) 100%); */
    background-attachment: fixed !important;
    color: #000;
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 12px;
}
body.summarydocument {
    background: rgba(0,0,0,0.05);
    height: initial;
}
body.summarydocument .summary {
    background: url('../images/vertrouwelijk.png') #FFF;
    background-size: contain;
    background-repeat: no-repeat;
}
body > * {
}
.spacer {
    height: 15px;
}
/* header */
header {
    min-height: 250px;
    margin-bottom: 40px;
    flex-grow: 1;
}
img.extralogo,
img.logo {
    max-width: 160px;
    width: 100%;
}
img.extralogo {
    margin-bottom: 30px;
    margin-top: 100px;
}
div.logo {
    padding: 25px 25px 0 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
header .row > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
header nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 100%;
}
header nav ul li {
    margin-left: 2px;
}
header nav ul li a {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 15px;
    border-bottom: 5px solid #CCC;
    text-decoration: none;
}
header nav ul li a:hover {
    border-bottom: 5px solid #FF6B00;
}

.spacer-45 {
    display: block;
    min-height: 45px;
}
.checontainer {
    width: 100%;
    max-width: 1000px;
    background-color: #FFF;
    clip-path: polygon(0% 0%, calc(100% - 65px) 0%, 100% 65px, 100% 100%, 0% 100%);
    margin-left: auto;
    margin-right: auto;
    height: fit-content;
    position: relative;
}
.checontainer:before {
    display: block;
    content: '';
    background-color: #e8e8e8;
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
    width: 60%;
    height: 300px;
    position: absolute;
    z-index: -1;
}

.checontainer.summary {
    box-shadow: 4px 4px 12px rgba(0,0,0,0.2);
    clip-path: initial;
    margin: 20px auto 80px auto;
}
.checontainer.summary:before {
    display: none;
}
.chegroup {
    width: 100%;
    min-height: 97px;
    background-image: url('../images/group.jpg');
    background-repeat: no-repeat;
    background-position: top 0 right 10%;
    background-size: contain;
    position: relative;
}
.logout {
    position: relative;
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.logout .button {
    position: relative;
    top: 0;
    font-size: 1.2em;
    height: 32px;
    left: initial;
    right: -20px;
    z-index: 99;
    padding-right: 55px;
    margin-right: -40px;
}
.logout .button:last-of-type {
    margin-right: 30px;
}
.logout .button.contact {
    background-color: #c5c5c5;
    color: #000;
}
.logout .button:before,
.logout .button:after {
    display: none;
}

footer {
    margin: 15px auto;
    width: 100%;
    max-width: 1000px;
}
footer a,
footer a:active,
footer a:focus,
footer a:visited {
    color: #000;
}
footer ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    list-style-type: none;
    width: 100%;
}
footer ul li {
    padding-left: 30px;
}
@media only screen and (max-width: 768px) {
    footer ul {
        flex-wrap: wrap;
    }
    footer ul li {
        width: 100%;
        text-align: center;
    }
}
footer ul li a {
    display: inline-block;
    padding: 8px 0;
    font: 14px/14px 'Archivo Black', Helvetica, Helvetica Neue, Arial;
    font-weight: bold;
}
#dyslexic {
    display: inline-block;
    padding: 8px 12px;
    background-color: #FFF;
    border-radius: 3px;
    text-decoration: none;
    font-family: 'opendyslexicbold';
    position: relative;
}
#dyslexic .dysclose {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #000;
    color: #FFF;
    border-radius: 100px;
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.loginoptions {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    flex-wrap: nowrap;
}
.loginoptions > div {
    border-left: 1px solid grey;
    padding-left: 30px;
    padding-right: 30px;
    width: 50%;
}
.loginoptions > div:first-of-type {
    border-left: 0px;
    padding-left: 0px;
}
.loginoptions > div:last-of-type {
    padding-right: 0px;
}
@media only screen and (max-width: 768px) {
    .loginoptions {
        flex-direction: column;
    }
    .loginoptions > div {
        width: 100%;
        border-top: 1px solid grey;
        border-left: 0px;
        padding-left: 0px;
        padding-top: 15px;
    }
    .loginoptions > div:first-of-type {
        border-top: 0px;
    }
}
button.chebutton,
a.button,
input[type=submit] {
    white-space: nowrap;
    position: relative;
    height: 40px;
    background-color: rgba(238,112,3,1);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    color: #000;
    font: 18px/18px 'Archivo Black', Helvetica, Helvetica Neue, Arial;
    text-transform: uppercase;
    text-decoration: none;
    /*left: 13px; */
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    width: fit-content;
    font-weight: 900;
    border: 0;
    text-align: center;
    /* margin-right: 30px; */
    margin-bottom: 15px;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}
a.button.lite {
    padding-left: 16px;
    padding-right: 16px;
    height: 32px;
    font: 14px/14px 'Archivo Black', Helvetica, Helvetica Neue, Arial;
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
button.chebutton *,
a.button *,
input[type=submit] * {
    white-space: nowrap;
    color: #000;
    font: 18px/18px 'Archivo Black', Helvetica, Helvetica Neue, Arial;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    font-weight: 900;
}
/*
button.chebutton:before,
a.button:before,
input[type=submit]:before {
    display: block;
    top: 0;
    content: '';
    position: absolute;
    margin-left: -20px;
    width: 0;
    height: 0;
    border-width: 20px 10px 20px 0;
    border-color: transparent rgba(238,112,3,1) transparent transparent;
    border-style: solid;
}
button.chebutton:after,
a.button:after,
input[type=submit]:after {
    display: block;
    top: 0;
    content: '';
    position: absolute;
    right: -10px;
    width: 0;
    height: 0;
    border-width: 20px 0px 20px 10px;
    border-color: transparent transparent transparent rgba(238,112,3,1);
    border-style: solid;
}*/
#rs-controlpanel button:before,
#rs-controlpanel button:after,
.rsbtn button:before,
.rsbtn button:after {
    content: none;
}
a.button.inline {
    display: inline-block;
}
button.chebutton:hover,
a.button:hover,
input[type=submit]:hover {
    color: #FFF;
}
.button.back {
    background-color: #A6A6A6;
    color: #FFF;
    position: absolute;
    left: 0;
    border-bottom: 3px solid #A6A6A6;
}
a.button.back:hover {
    border-bottom: 3px solid #3D3D3D;
}
.btright {
    display: block;
    right: 0px;
    left: auto;
    align-self: flex-end;
}
.btleft {
    align-self: flex-end;
    float: left !important;
}
.qc-center {
    margin-left: auto;
    margin-right: auto;
}

/* forms */
form {
    margin-bottom: 0;
    position: relative;
}
label {
    width: 100%;
    margin-bottom: 5px;
}
label.large {
    padding-top: 15px;
    padding-bottom: 15px;
}
label.large,
label.large * {
    font: 18px / 20px 'Archivo Black', proximanova, Helvetica, Helvetica Neue, Arial;
}
label input[type=text] {
    padding: 5px 10px;
}
select,
input[type=text],
input[type=number],
input[type=password],
input[type=date],
input[type=tel],
input[type=email],
textarea {
    background-color: #F0F3F2;
    padding: 15px 25px;
    border: 0;
    width: 100%;
    max-width: 400px;
    margin-bottom: 10px;
    outline: none;
    border-bottom: 3px solid #F0F3F2;
    transition: border-bottom 0.2s;
}
input[type=number] {
    padding: 10px 20px;
    max-width: 120px;
}
textarea {
    max-width: 100%;
}
select:focus,
input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=date]:focus,
input[type=tel]:focus,
input[type=email]:focus,
textarea:focus {
    margin-bottom: 10px;
    border-bottom: 3px solid #3D3D3D;
}
input[type=radio],
input[type=checkbox] {
    margin-right: 10px;
    vertical-align: baseline;
}
::placeholder {
    color: #3D3D3D;
}
div.scale {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
div.scale > label {
    max-width: initial;
    min-width: initial;
    flex-basis: fit-content;
}
input[type=range],
.form-range {
    width: calc(100% - 1em);
    margin-left: 0.5em;
    flex-basis: calc(100% - 1em);
}
div.scale > div {
    width: 2em;
    text-align: center;
}
div.scale-v2 div.scalelabels {
    display: flex;
    flex-direction: row;
    width: 100%;
}
div.scale-v2 div.scalelabels > label {
    display: block;
    width 50%;
    text-align: right;
}
div.scale-v2 div.scalelabels > label:first-of-type {
    text-align: left;
}
div.scale-v2 div#markers,
div.scale-v2 div.ranger {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
}
div.scale-v2 div.ranger:before {
    display: block;
    content: '';
    position: absolute;
    height: 8px;
    border: 1px solid grey;
    border-radius: 100px;
    top: 16px;
    width: 100%;
    background-color: #efefef;
    z-index: 0;
}
div.scale-v2 div#markers > label,
div.scale-v2 div.ranger div.marker {
    width: 24px;
    height: 40px;
    display: block;
    z-index: 1;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
}
div.scale-v2 div.ranger div.marker input[type=radio] {
    position: absolute;
    top: -50000px;
}
div.scale-v2 div.ranger div.marker label {
    display: block;
    width: 24px;
    height: 40px;
    border: 1px solid rgba(0,0,0,0);
    border-radius: 100px;
    cursor: pointer;
    margin: 0;
}
div.scale-v2 div.ranger div.marker label .mark {
    display: block;
    content: '';
    width: 2px;
    background-color: #e6e6e6;
    height: 20px;
    margin: 10px 11px;
    border-radius: 100px;
    padding: 0;
}
div.scale-v2 div.ranger div.marker input:checked ~ label .mark {
    width: 8px;
    height: 32px;
    margin: 4px 8px;
    background-color: #0d6efd;
    border-radius: 100px;
}
datalist {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 1em);
    margin-left: 0.5em;
    flex-basis: calc(100% - 1em);
    margin-top: 4px;
}
datalist option {
    padding: 0;
    text-align: center;
}
.qno {
    position: absolute;
    left: 30px;
    width: 50px;
    height: 50px;
    border-radius: 999px;
    background-color: #19D3C5;
    border: 3px solid #FFFFFF;
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    top: -23px;
    display: none;
}
.qno span {
    display: block;
    height: 1.4rem;
    color: #FFFFFF;
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
}
option,
optgroup {
    padding: 10px 20px;
}
fieldset {
    border: 1px solid #F0F3F2;
    padding: 20px;
}
fieldset legend {
    color: #10948a;
    font-size: 1rem;
    font-weight: bold;
    float: initial;
    width: fit-content;
    padding: 0 10px;
}
table.matrix {
    margin-right: 80px;
}
table.matrix tr td {
    border-right: 1px solid #3D3D3D;
    border-bottom: 1px solid #3D3D3D;
    text-align: center;
}
table.matrix tr td label {
    min-width: initial;
    max-width: initial;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    margin-bottom: 0;
    align-items: center;
}
table.matrix tbody tr:first-of-type td {
    border-top: 1px solid #3D3D3D;
}
table.matrix tr td:first-of-type {
    min-width: 240px;
    padding: 10px;
    text-align: left;
}
table.matrix tr:nth-of-type(odd) td {
    background-color: #F0F3F2;
}
table.matrix input[type=radio] {
    margin-right: 0;
}
th.diagonal {
    /* Something you can count on */
    height: 146px;
    white-space: nowrap;
    width: 30px;
}
th.diagonal > div {
    transform:
    translate(26px, 44px)
    rotate(315deg);
    width: 45px;
}
th.diagonal > div > span {
    /* border-bottom: 1px solid #3D3D3D; */
    padding: 5px 10px;
    display: inline-flex;
    height: 40px;
    flex-direction: column;
    justify-content: center;
}
th.diagonal > div > span:after {
    display: block;
    content: '';
    height: 1px;
    width: 120px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,0.8) 40%, rgba(0,0,0,0) 100%);
}

input[type=range][value="0"]::-webkit-slider-thumb {
    opacity: 0;
}
input[type=range][value="0"]::-moz-range-thumb {
    opacity: 0;
}
input[type=range][value="0"]::-slider-thumb {
    opacity: 0;
}
input[type=range].rangechanged::-webkit-slider-thumb {
    opacity: 1;
}
input[type=range].rangechanged::-mox-range-thumb {
    opacity: 1;
}
input[type=range].rangechanged::-slider-thumb {
    opacity: 1;
}
div.gotfeedback {
    background-color: #e8e8e8;
    padding: 15px;
    text-align: center;
    margin-right: 15px;
    margin-bottom: 30px;
}
div.feedback {
    padding-bottom: 80px;
}
div.feedback table {
    border: 0;
}
div.feedback td {
    vertical-align: top;
}
div.singlefeedback {
    margin-bottom: 30px;
}
h2.feedbackheading {
    font-family: inherit;
    font-size: 2em;
    font-weight: normal;
}
.singlefeedbacknav {
    padding-top: 20px;
    text-align: right;
    width: fit-content;
    float: right;
}
@media only screen and (max-width: 768px) {
    .singlefeedbacknav {
        margin-top: -40px;
    }
}
nav.feedbacknav {
    padding: 15px 0;
}
nav.feedbacknav > ul {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    flex-wrap: nowrap;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    width: 100%;
}
nav.feedbacknav > ul > li {
    position: relative;
    text-align: center;
    flex-grow: 1;
    display: block;
    overflow: visible;
}
nav.feedbacknav > ul > li > span {
    height: 36px;
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
    font-weight: bold;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
nav.feedbacknav > ul > li > ul {
    display: none;
    position: absolute;
    padding-left: 0;
    list-style-type: none;
    left: 0;
    top: 36px;
    z-index: 99;
    text-align: left;
    margin-left: 8px;
    padding: 2px 20px 6px 2px;
}
nav.feedbacknav > ul > li > ul > li {
    padding: 4px 6px 2px 6px;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
}
nav.feedbacknav > ul > li > ul > li i {
    flex-basis: 1.2rem;
}
nav.feedbacknav > ul > li > ul > li a {
    flex-basis: calc(100% - 1.2rem);
    max-width: calc(100% - 1.2rem);
}
nav.feedbacknav > ul > li:focus > ul,
nav.feedbacknav > ul > li:hover > ul {
    display: block;
}
@media only screen and (max-width: 768px) {
    nav.feedbacknav > ul {
        flex-wrap: wrap;
    }
    nav.feedbacknav > ul > li {
        width: 100%;
        overflow: initial;
    }
    nav.feedbacknav > ul > li > ul {
        margin-left: 8px;
        margin-right: 8px;
        position: relative;
        top: 0;
    }
}
h3.personal,
h3.personal span {
    font: 50px marker_fatregular, Helvetica, Helvetica Neue, Arial !important;
    margin: 0 0 0.8em 0;
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
    line-height: 0.5em !important;
}
h3.personal span {
    line-height: 0.7em !important;
    margin-left: 75px;
}
.relative {
    position: relative;
}

.summarycontent {
    padding: 45px;
}
.summarycontent ul {
    list-style-type: none;
    padding-left: 0;
}
.summarycontent span > i,
.summarycontent span > i:before {
    color: inherit;
}
.summarycontent span > i {
    min-width: 28px;
}
.summarycontent > ul > li > ul {
    margin-bottom: 30px;
}
.summarycontent .remarks {
    margin-bottom: 30px;
}
.summarydocument .participantinfo {
    padding: 30px 45px 0px 0px;
}
.summarydocument .logo img {
    max-width: 90%;
    padding-top: 35px;
    padding-left: 25px;
}
.feedbackoverview ul {
    list-style-type: none;
    padding-left: 0;
}
.feedbackoverview > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    justify-content: flex-start;
}
.feedbackoverview > ul > li {
    flex-basis: 33.3%;
    padding: 15px 50px;
    margin-bottom: 20px;
    position: relative;
}
.feedbackoverview > ul > li li {
    display: flex;
    flex-direction: row;
}
i.noicon,
.feedbackoverview > ul > li li i {
    flex-basis: 1.2rem;
    line-height: 1.4rem;
}
.feedbackoverview > ul > li li a {
    flex-basis: calc(100% - 1.2rem);
    max-width: calc(100% - 1.2rem);
}
.feedbackoverview a {
    text-decoration: underline;
}
.feedbackoverview a:hover {
    text-decoration: underline;
}
li.feedbackcat {
    margin: 0px;
    height: 280px;
    clip-path: polygon(44px 0%, calc(100% - 44px) 0%, 100% 50%, calc(100% - 44px) 100%, 44px 100%, 0 50%);
}
/*
li.feedbackcat:before {
    display: block;
    top: 0;
    content: '';
    position: absolute;
    margin-left: -44px;
    width: 0;
    height: 0;
    border-width: 140px 34px 140px 0;
    border-color: transparent rgba(238,112,3,1) transparent transparent;
    border-style: solid;
}
li.feedbackcat:after {
    display: block;
    top: 0;
    content: '';
    position: absolute;
    right: -34px;
    width: 0;
    height: 0;
    border-width: 140px 0px 140px 34px;
    border-color: transparent transparent transparent rgba(238,112,3,1);
    border-style: solid;
}
*/
.alcohol-drugs-en-gamen {
    background-color: #009baf;
}
.alcohol-drugs-en-gamen:before {
    border-color: transparent #009baf transparent transparent;
}
.alcohol-drugs-en-gamen:after {
    border-color: transparent transparent transparent #009baf;
}
.alcohol-drugs-en-gamen,
.alcohol-drugs-en-gamen * {
    color: #000;
}
.gezondheid {
    background-color: #ee7003;
}
.gezondheid:before {
    border-color: transparent #ee7003 transparent transparent;
}
.gezondheid:after {
    border-color: transparent transparent transparent #ee7003;
}
.gezondheid,
.gezondheid * {
    color: #000;
}
.gevoel {
    background-color: #312783;
}
.gevoel:before {
    border-color: transparent #312783 transparent transparent;
}
.gevoel:after {
    border-color: transparent transparent transparent #312783;
}
.gevoel,
.gevoel * {
    color: #FFF;
}
.lichaam {
    background-color: #b31080;
}
.lichaam:before {
    border-color: transparent #b31080 transparent transparent;
}
.lichaam:after {
    border-color: transparent transparent transparent #b31080;
}
.lichaam,
.lichaam * {
    color: #FFF;
}
.relaties {
    background-color: #e6007e;
}
.relaties:before {
    border-color: transparent #e6007e transparent transparent;
}
.relaties:after {
    border-color: transparent transparent transparent #e6007e;
}
.relaties,
.relaties * {
    color: #000;
}
.seksuele-ontwikkeling {
    background-color: #782182;
}
.seksuele-ontwikkeling:before {
    border-color: transparent #782182 transparent transparent;
}
.seksuele-ontwikkeling:after {
    border-color: transparent transparent transparent #782182;
}
.seksuele-ontwikkeling,
.seksuele-ontwikkeling * {
    color: #FFF;
}

@media only screen and (max-width: 1024px) {
    .feedbackoverview > ul > li {
        flex-basis: 50%;
    }
}
@media only screen and (max-width: 768px) {
    .feedbackoverview > ul > li {
        flex-basis: 100%;
    }
}


.checategories {
    width: 100%;
    max-width: 1000px;
    margin: 10px auto;
    padding: 2px;
    display: flex;
    flex-direction:row;
    justify-content: stretch;
    background-color: #FFF;
    height: 54px;
    position: relative;
    clip-path: polygon(14px 0%, calc(100% - 14px) 0%, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}
/*
.checategories:before {
    display: block;
    top: 0;
    content: '';
    position: absolute;
    margin-left: -12px;
    width: 0;
    height: 0;
    border-width: 27px 12px 27px 0;
    border-color: transparent #FFF transparent transparent;
    border-style: solid;
}
.checategories:after {
    display: block;
    top: 0;
    content: '';
    position: absolute;
    right: -12px;
    width: 0;
    height: 0;
    border-width: 27px 0px 27px 12px;
    border-color: transparent transparent transparent #FFF;
    border-style: solid;
}*/
.checat {
    display: flex;
    flex-basis: calc(100% / 6);
    height: 50px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-color: #ee7003;
    margin: 0;
    padding: 0 10px;
    position: relative;
    z-index: 2;
    color: #FFF;
    font-weight: bold;
    line-height: 1;
    clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
.checat:first-of-type {
    margin-left: 2px;
}
.checat:last-of-type {
    margin-right: 2px;
}
/*
.checat:before {
    display: block;
    top: 0;
    content: '';
    position: absolute;
    margin-left: -9px;
    width: 0;
    height: 0;
    border-width: 25px 10px 25px 0;
    border-color: transparent #ee7003 transparent transparent;
    border-style: solid;
}
.checat:after {
    display: block;
    top: 0;
    content: '';
    position: absolute;
    right: -9px;
    width: 0;
    height: 0;
    border-width: 25px 0px 25px 10px;
    border-color: transparent transparent transparent #ee7003;
    border-style: solid;
}*/
.checat.alcohol-drugs-en-gamen {
    background-color: #009baf;
    color: #000;
}
.checat.alcohol-drugs-en-gamen:before {
    border-color: transparent #009baf transparent transparent;
}
.checat.alcohol-drugs-en-gamen:after {
    border-color: transparent transparent transparent #009baf;
}
.checat.gezondheid {
    background-color: #ee7003;
    color: #000;
}
.checat.gezondheid:before {
    border-color: transparent #ee7003 transparent transparent;
}
.checat.gezondheid:after {
    border-color: transparent transparent transparent #ee7003;
}
.checat.gevoel {
    background-color: #312783;
}
.checat.gevoel:before {
    border-color: transparent #312783 transparent transparent;
}
.checat.gevoel:after {
    border-color: transparent transparent transparent #312783;
}
.checat.lichaam {
    background-color: #b31080;
}
.checat.lichaam:before {
    border-color: transparent #b31080 transparent transparent;
}
.checat.lichaam:after {
    border-color: transparent transparent transparent #b31080;
}
.checat.relaties {
    color: #000;
    background-color: #e6007e;
}
.checat.relaties:before {
    border-color: transparent #e6007e transparent transparent;
}
.checat.relaties:after {
    border-color: transparent transparent transparent #e6007e;
}
.checat.seksuele-ontwikkeling {
    background-color: #782182;
}
.checat.seksuele-ontwikkeling:before {
    border-color: transparent #782182 transparent transparent;
}
.checat.seksuele-ontwikkeling:after {
    border-color: transparent transparent transparent #782182;
}

#dialog-container {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
}
.dialog-inner {
    width: 100%;
    height: 100%;
    position: relative;
}
#dialog-config {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20vh;
    background-color: #FFF;
    width: 300px;
    padding: 30px;
    text-align: center;
}
#dialog-config .confirmtext {
    font-size: 1.1rem;
}
#dialog-config .confirm {
    border: 0;
    background-color: green;
    color: #FFF;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 8px 20px;
    min-width: 80px;
}
#dialog-config .cancel {
    border: 0;
    color: #000;
    font-weight: bold;
    background-color: #d7d7d7;
    padding: 8px 20px;
    padding: 8px 20px;
    min-width: 80px;
    font-size: 1.2rem;
}

@media only screen and (max-width: 768px) {
    h1 {
        width: 100%;
    }
    img.extralogo, img.logo {
        max-width: 120px;
    }
    .logout {
        position: absolute;
        top: 0;
        right: 0;
    }
    .extralogo {
        display: none;
    }
    .chegroup {
        margin-top: -80px;
    }
    .checat {
        flex-basis: calc((100% / 2));
    }
    .checategories {
        flex-wrap: wrap;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        height: auto;
        clip-path: unset;
    }
    .checategories:before,
    .checategories:after {
        display: none;
    }
    .checat:last-of-type {
        margin-right: 0px;
    }
    .checat:first-of-type {
        margin-left: 0px;
    }
    table.matrix tr td:first-of-type {
        min-width: 20vw;
    }
    th.diagonal > div {
        width: 30px;
        transform: translate(18px, 50px) rotate(301deg);
    }
    table.matrix tr td label {
        width: 39px;
        height: 25px;
    }
}
@media only screen and (max-width: 600px) {
    table.matrix tr td label {
        width: 30px;
        height: 25px;
    }
    th.diagonal > div {
        width: 20px;
        transform: translate(10px, 54px) rotate(301deg);
    }
}

.alert {
    border-radius: 0;
    border-width: 1px 1px 1px 4px;
    border-color: #535353;
    font-weight: bold;
}
.alert-success {
    background-color: #c7d5c3;
    border-color: #0f5132;
}

.iphemoji {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
}
.iphemoji img {
    width: 10%;
    max-width: 35px;
}