/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* CSS Reset Einde */
.mb-0 {
  margin-bottom: 0;
}

.mb-8 {
  margin-bottom: 8px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-24 {
  margin-bottom: 24px;
}

.page__container {
  display: flex;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  height: auto;
}
.page__container aside {
  display: none;
  background: #fefefe;
  border-right: 1px solid #E7EEF0;
  width: 230px;
  z-index: 400;
  padding: 0 20px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  min-height: 100%;
}
@media (min-width: 1030px) {
  .page__container aside {
    display: block;
  }
}
.page__container aside.open {
  display: block;
}
@media (min-width: 1030px) {
  .page__container aside {
    position: relative;
    top: unset;
    bottom: unset;
    flex: 230px 0 0;
  }
}
.page__container .page__content {
  flex: 100% 1 1;
  position: relative;
  width: 100%;
}
@media (min-width: 1030px) {
  .page__container .page__content {
    max-width: calc(100% - 230px);
  }
}
.page__container .page__content header {
  background: #2580C3;
  position: relative;
  display: flex;
  width: 100%;
  height: 60px;
  padding: 0 60px;
  box-sizing: border-box;
  color: #ffffff;
}
@media (min-width: 1030px) {
  .page__container .page__content header {
    padding: 0 40px;
  }
}
.page__container .page__content header.eventHeader {
  display: block;
  height: unset;
  padding: 30px 40px;
}
.page__container .page__content header.eventHeader h1 {
  font-size: 26px;
  line-height: 40px;
  display: inline-block;
  margin-bottom: 0;
}
.page__container .page__content main {
  box-sizing: border-box;
  padding: 20px;
}
@media (min-width: 690px) {
  .page__container .page__content main {
    padding: 40px;
  }
}
.page__container.menu-closed .page__content {
  max-width: 100%;
}

.header__row {
  display: flex;
  flex-direction: column;
}
@media (min-width: 690px) {
  .header__row {
    flex-direction: row;
  }
}
@media (min-width: 690px) {
  .header__row .header__cell__left,
.header__row .header__cell__right {
    flex: 50% 0 0;
  }
}
@media (min-width: 690px) {
  .header__row .header__cell__right {
    text-align: right;
  }
}
.header__row.second__row {
  line-height: 34px;
}

.row {
  display: flex;
  margin-bottom: 16px;
  width: 100%;
  flex-wrap: wrap;
  gap: 16px;
}
@media (min-width: 1030px) {
  .row {
    flex-wrap: nowrap;
    gap: 32px;
    margin-bottom: 24px;
  }
}
.row .col {
  flex: 100% 1 1;
  max-width: 100%;
}
.row .col.col-350p {
  width: 100%;
}
@media (min-width: 1030px) {
  .row .col.col-350p {
    flex: 352px 0 0;
    width: 352px;
  }
}
.row .col.col-400 {
  width: 100%;
}
@media (min-width: 1030px) {
  .row .col.col-400 {
    flex: 400px 0 0;
    width: 400px;
  }
}
.row .col.col-half {
  width: 100%;
}
@media (min-width: 1030px) {
  .row .col.col-half {
    flex: 50% 1 1;
  }
}
.row .col.col-inherit {
  flex-basis: auto;
}

.gridRow {
  display: flex;
  flex-wrap: wrap;
}
.gridRow .col,
.gridRow .col-1,
.gridRow .col-2,
.gridRow .col-3,
.gridRow .col-4,
.gridRow .col-5,
.gridRow .col-6 {
  flex: 100% 0 0;
  margin-bottom: 32px;
}

@media (min-width: 900px) {
  .gridRow {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 32px;
  }
  .gridRow .col-1 {
    grid-column: span 1/span 1;
  }
  .gridRow .col-2 {
    grid-column: span 2/span 2;
  }
  .gridRow .col-3 {
    grid-column: span 3/span 3;
  }
  .gridRow .col-4 {
    grid-column: span 4/span 4;
  }
  .gridRow .col-5 {
    grid-column: span 5/span 5;
  }
  .gridRow .col-6,
.gridRow .col {
    grid-column: span 6/span 6;
  }
}
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  position: relative;
  display: block;
}

h1 {
  font-size: 24px;
}

h2 {
  color: #2580C3;
  margin-bottom: 16px;
}

h3 {
  font-size: 16px;
  line-height: 26px;
}

h5 {
  font-size: 14px;
}

.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: bold;
  position: relative;
  display: block;
  line-height: 1.25em;
  margin-bottom: 16px;
}

.h1 {
  font-size: 32px;
}

.h2 {
  font-size: 24px;
}

.h3 {
  font-size: 20px;
}

.h4 {
  font-size: 16px;
}

.h5, .h6 {
  font-size: 14px;
}

.text-small {
  font-size: 14px;
}

html, body {
  width: 100%;
  height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #333333;
  background: #F4F4F5;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 690px) {
  body {
    font-size: 16px;
    line-height: 26px;
  }
}
body.fixed {
  overflow: hidden;
}

.notMobile {
  display: none;
}
@media (min-width: 690px) {
  .notMobile {
    display: unset;
  }
}

strong,
b {
  font-weight: 700;
}

i,
em {
  font-style: italic;
}

u {
  text-decoration: underline;
}

p {
  margin-bottom: 16px;
}

h1, h3, h4, h5, h6 {
  margin-bottom: 10px;
}

h1.primary, h2.primary, h3.primary, h4.primary, h5.primary, h6.primary {
  color: #2580C3;
}

a {
  color: #333333;
}
a.error {
  color: #e74c3c;
}
a:focus {
  border: 1px solid #2580C3;
}

u {
  text-decoration: underline;
}

hr {
  border: none;
  border-top: 1px solid rgba(51, 51, 51, 0.3);
}

.a11y_link {
  top: 0;
  left: 0;
  position: absolute;
  transform: translateX(-100%);
  padding: 8px;
}
.a11y_link:focus {
  transform: translateX(0%);
}

a:focus {
  background: #fd0 !important;
  color: #000000 !important;
  border: none;
  border-bottom: 2px solid #000000;
  margin-bottom: -2px;
  outline: none;
}

mark.green {
  background-color: #66d313;
}
mark.blue {
  background-color: #03a8a0;
}
mark.rose {
  background-color: #ff0984;
}
mark.yellow {
  background-color: #fedf17;
}

/*
*   Section
*/
.section__header {
  display: flex;
  margin-top: -20px;
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #E7EEF0;
}
.section__header .section__control {
  flex-basis: auto;
  padding: 5px;
  display: flex;
  gap: 4px;
}
.section__header .section__control .cta {
  margin-bottom: 0;
  align-self: flex-start;
}
.section__header .section__title {
  flex: 100% 1 1;
  font-size: 16px;
  color: #2580C3;
  font-weight: bold;
  padding: 0 16px;
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 26px;
}

.section__content.no_padding {
  margin: -20px;
}

/*
*   Custom
*/
.text-light {
  color: rgba(0, 0, 0, 0.3);
}

.text-align-center {
  text-align: center;
}

.link {
  text-decoration: underline;
  cursor: pointer;
}
.link:hover {
  color: #2580C3;
}

canvas {
  max-width: 100%;
}

main ul,
main ol {
  margin-left: 20px;
}

main ul {
  list-style-type: disc;
}

.ta-right {
  text-align: right;
}

.ta-center {
  text-align: center;
}

.icon-positive {
  color: #27AE60;
}

.icon-neutral {
  color: #e67e22;
}

.icon-negative {
  color: #e74c3c;
}

/*
*   Table
*/
table {
  width: 100%;
}
table th {
  font-weight: 700;
  background: #E7EEF0;
  text-align: left;
}
table tr.totaal td {
  font-weight: 700;
}
table tr.active td {
  background: rgba(37, 128, 195, 0.3);
}
table.jaarCijfers {
  font-size: 14px;
}
table.jaarCijfers tr td {
  border-bottom: 1px solid #E7EEF0;
}
table.jaarCijfers tr th,
table.jaarCijfers tr td {
  padding: 2px 5px;
}
table.jaarCijfers tr:hover th, table.jaarCijfers tr:hover td {
  background: rgba(231, 238, 240, 0.4);
}

/*
*   Table (divs)
*/
.grid-table {
  box-sizing: border-box;
}
.grid-table.table-invoices .grid-table-row {
  grid-template-areas: "invoicenumber details amount status method";
  grid-template-columns: 80px minmax(100px, 1fr) 80px 90px 200px;
}
.grid-table.table-invoices-complete .grid-table-row {
  grid-template-areas: "invoicenumber invoicedate company details amount status method ";
  grid-template-columns: 80px 90px minmax(120px, 1fr) minmax(100px, 1fr) 80px 80px 30px;
}
.grid-table.table-companies-admin .grid-table-row {
  grid-template-areas: "companyname tablereservation license demostatus";
  grid-template-columns: minmax(120px, 1fr) 200px 200px 200px;
}
.grid-table.table-formitable-list .grid-table-row {
  grid-template-areas: "uid companyname city phone";
  grid-template-columns: 100px minmax(120px, 1fr) 230px 160px;
}
.grid-table.table-systemlog .grid-table-row {
  grid-template-areas: "date event action page user company";
  grid-template-columns: 130px 230px 240px minmax(160px, 1fr) 230px minmax(150px, 1fr);
}
.grid-table.table-systemlog .grid-table-row a {
  position: relative;
}
.grid-table .grid-table-row {
  box-sizing: border-box;
  position: relative;
  display: grid;
  border-bottom: 1px solid #E7EEF0;
  padding: 10px;
  grid-template-rows: 1fr;
  font-size: 15px;
}
.grid-table .grid-table-row.grid-table-row-alert {
  color: #e74c3c;
  font-weight: bold;
}
.grid-table .grid-table-row.grid-table-row-small {
  padding: 6px 10px;
}
.grid-table .grid-table-row.grid-table-row-default {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-table .grid-table-row.grid-table-row-head {
  font-weight: bold;
  padding: 5px 10px;
}
.grid-table .grid-table-row a {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.grid-table .grid-table-row a:hover {
  background: rgba(37, 128, 195, 0.05);
  z-index: 1;
}
.grid-table .grid-table-cell {
  min-width: 0;
  max-width: 100%;
}

.grid-table-cell.invoicenumber {
  grid-row-start: invoicenumber;
  grid-column-start: invoicenumber;
  grid-row-end: invoicenumber;
  grid-column-end: invoicenumber;
}
.grid-table-cell.invoicedate {
  grid-row-start: invoicedate;
  grid-column-start: invoicedate;
  grid-row-end: invoicedate;
  grid-column-end: invoicedate;
}
.grid-table-cell.company {
  grid-row-start: company;
  grid-column-start: company;
  grid-row-end: company;
  grid-column-end: company;
}
.grid-table-cell.date {
  grid-row-start: date;
  grid-column-start: date;
  grid-row-end: date;
  grid-column-end: date;
}
.grid-table-cell.details {
  grid-row-start: details;
  grid-column-start: details;
  grid-row-end: details;
  grid-column-end: details;
}
.grid-table-cell.amount {
  grid-row-start: amount;
  grid-column-start: amount;
  grid-row-end: amount;
  grid-column-end: amount;
  text-align: right;
  justify-self: end;
  padding-right: 15px;
}
.grid-table-cell.method {
  grid-row-start: method;
  grid-column-start: method;
  grid-row-end: method;
  grid-column-end: method;
}
.grid-table-cell.inline-status {
  grid-row-start: status;
  grid-column-start: status;
  grid-row-end: status;
  grid-column-end: status;
}
.grid-table-cell.inline-status .status {
  margin-left: unset;
}
.grid-table-cell.noResult {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 100;
  grid-column-end: 100;
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
}

.text-shortener {
  text-overflow: ellipsis;
  padding-right: 5px;
  overflow: hidden;
  white-space: nowrap;
}

/*
*   Form elements
*/
form,
.form {
  /*** custom checkboxes ***/
}
form label,
.form label {
  display: inline-block;
  width: 150px;
  box-sizing: border-box;
  position: relative;
}
form label.notInline,
.form label.notInline {
  width: unset;
  display: block;
}
form label.inline,
.form label.inline {
  display: inline-block;
  width: 150px;
}
form input[type=text],
form input[type=time],
form input[type=date],
form input[type=datetime],
form input[type=datetime-local],
form input[type=tel],
form input[type=file],
form input[type=password],
form input[type=email],
form input[type=number],
form input[type=search],
.form input[type=text],
.form input[type=time],
.form input[type=date],
.form input[type=datetime],
.form input[type=datetime-local],
.form input[type=tel],
.form input[type=file],
.form input[type=password],
.form input[type=email],
.form input[type=number],
.form input[type=search] {
  height: 30px;
  line-height: 30px;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  width: 240px;
  padding: 0 5px;
  font-size: 14px;
  font-weight: 400;
  font-family: "Fira Sans", sans-serif;
  margin-bottom: 8px;
  box-sizing: border-box;
}
form input[type=text]:disabled, form input[type=text].disabled,
form input[type=time]:disabled,
form input[type=time].disabled,
form input[type=date]:disabled,
form input[type=date].disabled,
form input[type=datetime]:disabled,
form input[type=datetime].disabled,
form input[type=datetime-local]:disabled,
form input[type=datetime-local].disabled,
form input[type=tel]:disabled,
form input[type=tel].disabled,
form input[type=file]:disabled,
form input[type=file].disabled,
form input[type=password]:disabled,
form input[type=password].disabled,
form input[type=email]:disabled,
form input[type=email].disabled,
form input[type=number]:disabled,
form input[type=number].disabled,
form input[type=search]:disabled,
form input[type=search].disabled,
.form input[type=text]:disabled,
.form input[type=text].disabled,
.form input[type=time]:disabled,
.form input[type=time].disabled,
.form input[type=date]:disabled,
.form input[type=date].disabled,
.form input[type=datetime]:disabled,
.form input[type=datetime].disabled,
.form input[type=datetime-local]:disabled,
.form input[type=datetime-local].disabled,
.form input[type=tel]:disabled,
.form input[type=tel].disabled,
.form input[type=file]:disabled,
.form input[type=file].disabled,
.form input[type=password]:disabled,
.form input[type=password].disabled,
.form input[type=email]:disabled,
.form input[type=email].disabled,
.form input[type=number]:disabled,
.form input[type=number].disabled,
.form input[type=search]:disabled,
.form input[type=search].disabled {
  background: #F6F6F6;
}
form input[type=text].error,
form input[type=time].error,
form input[type=date].error,
form input[type=datetime].error,
form input[type=datetime-local].error,
form input[type=tel].error,
form input[type=file].error,
form input[type=password].error,
form input[type=email].error,
form input[type=number].error,
form input[type=search].error,
.form input[type=text].error,
.form input[type=time].error,
.form input[type=date].error,
.form input[type=datetime].error,
.form input[type=datetime-local].error,
.form input[type=tel].error,
.form input[type=file].error,
.form input[type=password].error,
.form input[type=email].error,
.form input[type=number].error,
.form input[type=search].error {
  border-color: #e74c3c;
}
form input[type=text].size-big,
form input[type=time].size-big,
form input[type=date].size-big,
form input[type=datetime].size-big,
form input[type=datetime-local].size-big,
form input[type=tel].size-big,
form input[type=file].size-big,
form input[type=password].size-big,
form input[type=email].size-big,
form input[type=number].size-big,
form input[type=search].size-big,
.form input[type=text].size-big,
.form input[type=time].size-big,
.form input[type=date].size-big,
.form input[type=datetime].size-big,
.form input[type=datetime-local].size-big,
.form input[type=tel].size-big,
.form input[type=file].size-big,
.form input[type=password].size-big,
.form input[type=email].size-big,
.form input[type=number].size-big,
.form input[type=search].size-big {
  height: 40px;
  line-height: 40px;
  padding: 0 8px;
}
form input[type=submit]:disabled,
.form input[type=submit]:disabled {
  background-color: #F6F6F6;
}
form input[type=text],
form input[type=date],
form input[type=tel],
form input[type=email],
form input[type=number],
form input[type=file],
form input[type=password],
form input[type=search],
form select,
.form input[type=text],
.form input[type=date],
.form input[type=tel],
.form input[type=email],
.form input[type=number],
.form input[type=file],
.form input[type=password],
.form input[type=search],
.form select {
  appearance: none;
}
form input[type=text].fout,
form input[type=date].fout,
form input[type=tel].fout,
form input[type=email].fout,
form input[type=number].fout,
form input[type=file].fout,
form input[type=password].fout,
form input[type=search].fout,
form select.fout,
.form input[type=text].fout,
.form input[type=date].fout,
.form input[type=tel].fout,
.form input[type=email].fout,
.form input[type=number].fout,
.form input[type=file].fout,
.form input[type=password].fout,
.form input[type=search].fout,
.form select.fout {
  border: 1px solid #e67e22;
}
form input[type=text]:hover,
form input[type=date]:hover,
form input[type=tel]:hover,
form input[type=email]:hover,
form input[type=number]:hover,
form input[type=file]:hover,
form input[type=password]:hover,
form input[type=search]:hover,
form select:hover,
.form input[type=text]:hover,
.form input[type=date]:hover,
.form input[type=tel]:hover,
.form input[type=email]:hover,
.form input[type=number]:hover,
.form input[type=file]:hover,
.form input[type=password]:hover,
.form input[type=search]:hover,
.form select:hover {
  border-color: #2580C3;
}
form input[type=text]:read-only,
.form input[type=text]:read-only {
  background: #F6F6F6;
}
form input[type=submit],
.form input[type=submit] {
  appearance: none;
  background: #27AE60;
  color: #fff;
  font-weight: 700;
  font-family: "Fira Sans", sans-serif;
  font-size: 13px;
  padding: 0 16px;
  line-height: 38px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  width: auto;
  cursor: pointer;
}
form input[type=submit]:hover,
.form input[type=submit]:hover {
  background: #2A8751;
  border-color: #2A8751;
}
form input[type=submit]:active,
.form input[type=submit]:active {
  background-color: #1d5e38;
  border-color: #1d5e38;
}
form input[type=submit]:disabled,
.form input[type=submit]:disabled {
  color: rgba(51, 51, 51, 0.6);
  cursor: not-allowed;
  background: #F6F6F6;
  border-color: #F6F6F6;
}
form input[type=submit]:disabled:hover,
.form input[type=submit]:disabled:hover {
  background: rgba(51, 51, 51, 0.2);
  border-color: rgba(51, 51, 51, 0.2);
}
form label.disabled,
.form label.disabled {
  text-decoration: line-through;
  color: rgba(51, 51, 51, 0.6);
}
form input[type=checkbox] + label,
form input[type=radio] + label,
.form input[type=checkbox] + label,
.form input[type=radio] + label {
  width: 100%;
  cursor: pointer;
  font-size: 14px;
}
form .annuleer,
.form .annuleer {
  margin-left: 15px;
}
form select,
.form select {
  height: 30px;
  line-height: 30px;
  border: 1px solid #D1D1D1;
  border-radius: 3px;
  width: 240px;
  padding: 0 5px;
  font-size: 14px;
  font-weight: 400;
  font-family: "Fira Sans", sans-serif;
  margin-bottom: 8px;
  margin-right: 10px;
  background: url(../images/form_select.svg) no-repeat right 10px top 12px;
  box-sizing: border-box;
}
form select.size-big,
.form select.size-big {
  height: 40px;
  line-height: 40px;
  background-position: right 10px top 17px;
}
form textarea,
.form textarea {
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 100px;
  border-radius: 3px;
  border: 1px solid #D1D1D1;
  margin-bottom: 8px;
  font-size: 14px;
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  padding: 10px;
  box-sizing: border-box;
  color: #333333;
}
form textarea.minderHoog,
.form textarea.minderHoog {
  min-height: 40px;
}
form textarea.minderBreed,
.form textarea.minderBreed {
  min-width: 500px;
  max-width: 500px;
  width: 500px;
}
form textarea.opmerking,
.form textarea.opmerking {
  padding: 5px 10px;
  min-height: unset;
  line-height: 24px;
  margin-top: 5px;
  margin-bottom: unset;
  max-width: 100%;
  background: rgba(51, 51, 51, 0.03);
}
form #postcode,
.form #postcode {
  text-transform: uppercase;
}
form .foutief,
.form .foutief {
  color: #e74c3c;
  font-size: 14px;
}
form input.w115,
form select.w115,
.form input.w115,
.form select.w115 {
  width: 115px;
}
form input.w80,
.form input.w80 {
  width: 80px;
}
form input.w330,
.form input.w330 {
  width: 330px;
}

/*
*
*/
.aanbetalingPaneel.show {
  display: block;
}
.aanbetalingPaneel.hide {
  display: none;
}

::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-weight: normal;
}

label.tile {
  display: block;
  border: 1px solid #2580C3;
  border-radius: 5px;
  padding: 15px 20px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
}
label.tile .tile__input {
  flex: 30px 0 0;
}
label.tile .tile__label {
  flex: 100% 1 1;
}
label.tile .tile__header {
  display: flex;
}
label.tile .tile__header .tile__title {
  flex: 100% 1 1;
  font-weight: bold;
  color: #2580C3;
}
label.tile .tile__header .tile__price {
  flex: 100% 1 1;
  text-align: right;
}
label.tile .tile__content {
  flex: 100% 1 1;
}
label.tile .description {
  font-weight: normal;
}
label.tile:hover {
  background: rgba(37, 128, 195, 0.05);
}

.annuleer {
  font-size: 14px;
  font-weight: 400;
  color: #333;
}
.annuleer:hover {
  color: #000;
}

/* Custom */
.totalen {
  border-top: 1px solid #E7EEF0;
  margin-top: 4px;
  padding-top: 4px;
  margin-bottom: 16px;
}
.totalen .totalen_regel {
  display: flex;
  justify-content: space-between;
}
.totalen .totalen_regel.totalen_regel_bold {
  font-weight: bold;
}
.totalen .totalen_regel.totalen_regel_small {
  font-size: 14px;
}
.totalen .totalen_regel .totalen_bedrag {
  text-align: right;
}

.topBar {
  display: block;
  position: relative;
  font-weight: 400;
  padding: 10px 5px;
  background: #e74c3c;
  color: #fff;
  text-align: center;
  z-index: 10;
  box-shadow: 0 0px 5.3px rgba(0, 0, 0, 0.02), 0 0px 17.9px rgba(0, 0, 0, 0.03), 0 0px 80px rgba(0, 0, 0, 0.05);
}
.topBar.friendly {
  background: #27AE60;
}
.topBar a {
  color: rgba(255, 255, 255, 0.9);
}

/*
*   PopUp
*/
.overlay {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 850;
}

.popup {
  z-index: 900;
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  max-width: calc(100% - 40px);
  padding: 0;
  box-sizing: border-box;
  min-height: 440px;
  max-height: 100%;
  background: #fff;
}
.popup.groot {
  width: 800px;
}
.popup.hoog {
  height: 90vh;
}
.popup h2 {
  position: fixed;
  z-index: 5002;
  top: 20px;
  left: 20px;
  right: 20px;
  background: #FFFFFF;
  margin: -20px -20px 0 -20px !important;
  line-height: 60px;
  padding: 0 20px;
  border-bottom: 1px solid #E7EEF0;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.popup h2 .closePopup {
  display: block;
  width: 60px;
  height: 60px;
  color: #2580C3;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}
.popup .statusblok {
  display: block;
  position: relative;
  border-radius: 3px;
  background: #2580C3;
  padding: 15px;
  width: 140px;
  height: 80px;
  text-align: center;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}
.popup .statusblok:hover {
  background: #195988;
}
.popup .statusblok img {
  margin: 0 auto;
  width: 60px;
}
.popup .statusblok span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
}
.popup textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 200px;
  box-sizing: border-box;
}

.popup .popupContainer {
  position: absolute;
  z-index: 901;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100% - 60px);
  box-sizing: border-box;
  padding: 20px 20px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  color: #333333;
}

/*
*   Header
*/
header .menutrigger {
  flex: 60px 0 0;
  display: inline-block;
  line-height: 60px;
  background: #2580C3;
  margin-left: -60px;
  text-align: center;
  cursor: pointer;
  color: #ffffff;
}
@media (min-width: 1030px) {
  header .menutrigger {
    margin-left: -40px;
    display: none;
  }
}
header .menutrigger.menutrigger__eventHeader {
  position: absolute;
  flex: unset;
  margin-left: -40px;
  margin-right: unset;
  width: 40px;
  line-height: 40px;
}
header .pageTitle {
  flex: 100% 1 1;
  text-align: center;
}
@media (min-width: 1240px) {
  header .pageTitle {
    text-align: left;
  }
}
@media (min-width: 1030px) {
  header .pageTitle {
    text-align: left;
  }
}
header .pageTitle h1 {
  display: inline-block;
  line-height: 60px;
  font-size: 20px;
  margin-bottom: 0;
}
header .pageTitle h2 {
  line-height: 60px;
  font-size: 20px;
  margin-left: 5px;
  margin-bottom: 0;
  color: #fff !important;
  display: none;
}
@media (min-width: 690px) {
  header .pageTitle h2 {
    display: inline-block;
  }
}
header .toggleRestaurant {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 60px;
  text-align: center;
  width: 60px;
  color: #ffffff;
  cursor: pointer;
}
@media (min-width: 1240px) {
  header .toggleRestaurant {
    right: 0;
  }
}
header .toggleRestaurant:hover {
  background: rgba(255, 255, 255, 0.1);
}
header .adminSwitch {
  position: absolute;
  right: 5px;
  top: 0;
  line-height: 60px;
}
@media (min-width: 1240px) {
  header .adminSwitch {
    right: 40px;
  }
}
header .adminSwitch select {
  background: rgba(255, 255, 255, 0.1) url(../images/form_select.svg) no-repeat right 10px top 12px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 100px;
}
@media (min-width: 1240px) {
  header .adminSwitch select {
    width: 240px;
  }
}

/*
*   Zoekbalk
*/
.zoekbalk {
  display: block;
  position: relative;
  padding: 16px 16px 8px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 24px;
  box-shadow: 0 0px 5.3px rgba(0, 0, 0, 0.02), 0 0px 17.9px rgba(0, 0, 0, 0.03), 0 0px 80px rgba(0, 0, 0, 0.05);
}
.zoekbalk .cta {
  margin-bottom: 0;
}

h2 .actie {
  display: block;
  position: absolute;
  right: 20px;
  top: 0;
  overflow: hidden;
  font-size: 16px;
}

section h2 {
  line-height: 60px;
  padding: 0px 20px;
  margin: -21px -21px 20px -21px;
  border-bottom: 1px solid #E7EEF0;
}
section h2 .wijzig {
  display: block;
  position: absolute;
  right: 10px;
  top: 10px;
}
section .onboardingToDo {
  position: relative;
  display: block;
  margin: 0 -20px 0 -20px;
  padding: 16px 24px 16px 48px;
  border-top: 1px solid #E7EEF0;
}
section .onboardingToDo .toDoTitle {
  position: relative;
  font-weight: 700;
}
section .onboardingToDo .toDoTitle i {
  position: absolute;
  left: -24px;
  top: 5px;
  color: #2580C3;
}
section .onboardingToDo p {
  margin-bottom: 20px;
}
section .onboardingToDo .toDoTag {
  display: inline-block;
  font-size: 14px;
  background: rgba(51, 51, 51, 0.1);
  padding: 2px 10px;
  border-radius: 4px;
}
section .onboardingToDo .toDoTag i {
  color: rgba(51, 51, 51, 0.6);
}
section .onboardingToDo.finished .toDoTitle {
  text-decoration: line-through;
}
section .onboardingToDo.finished p,
section .onboardingToDo.finished .cta {
  display: none;
}
section .onboardingToDo:last-child {
  margin-bottom: -20px;
}

.bestanden .bestand {
  display: flex;
  border-bottom: 1px solid #E7EEF0;
}
.bestanden .bestand:last-child {
  border-bottom: none;
}
.bestanden .bestand .bestand_link {
  flex: 100% 1 1;
  display: flex;
  padding: 8px;
  text-decoration: none;
}
.bestanden .bestand .bestand_link:hover {
  background: rgba(37, 128, 195, 0.1);
}
.bestanden .bestand .bestand_link .bestand_icon {
  flex: 20px 0 0;
}
.bestanden .bestand .bestand_link .bestand_naam {
  flex: auto 1 1;
}
.bestanden .bestand .bestand_link .bestand_size {
  flex: 120px 0 0;
  text-align: right;
  color: rgba(51, 51, 51, 0.5);
}
.bestanden .bestand .bestand_link .bestand_type {
  flex: 120px 0 0;
  text-align: right;
  color: rgba(51, 51, 51, 0.5);
}
.bestanden .bestand .bestand_actie {
  flex: 40px 0 0;
  text-align: center;
  line-height: 40px;
}
.bestanden .bestand .bestand_actie:hover {
  background: rgba(37, 128, 195, 0.1);
}

.fileContainer {
  display: block;
  border: 1px dashed #BDC3C7;
  padding: 5px 10px;
  font-size: 14px;
  margin-top: 10px;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.fileContainer:hover {
  background: #F8F9F9;
}

input[type=file] {
  display: none;
}
input[type=file]#knop {
  display: none;
}

section,
a.opkomend,
a.dashboardActie {
  display: block;
  position: relative;
  padding: 20px;
  border: none;
  margin-bottom: 16px;
  background: #FFFFFF;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 0 0px 5.3px rgba(0, 0, 0, 0.02), 0 0px 17.9px rgba(0, 0, 0, 0.03), 0 0px 80px rgba(0, 0, 0, 0.05);
}
@media (min-width: 690px) {
  section,
a.opkomend,
a.dashboardActie {
    margin-bottom: 24px;
  }
}
section:last-child,
a.opkomend:last-child,
a.dashboardActie:last-child {
  margin-bottom: unset;
}

.card {
  display: block;
  position: relative;
  padding: 32px;
  border: none;
  margin-bottom: 16px;
  background: #FFFFFF;
  border-radius: 5px;
  box-shadow: 0 0px 5.3px rgba(0, 0, 0, 0.02), 0 0px 17.9px rgba(0, 0, 0, 0.03), 0 0px 80px rgba(0, 0, 0, 0.05);
}
@media (min-width: 690px) {
  .card {
    margin-bottom: 24px;
  }
}
.card:last-child {
  margin-bottom: unset;
}
.card h2 {
  font-size: 18px;
  line-height: 22px;
  color: #333333;
}
.card h2.text-color-primary {
  color: #2580C3;
}
.card .card-action {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 100;
}
.card .listView {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  border-top: 1px solid #E7EEF0;
}
.card .listView a {
  border-bottom: 1px solid #E7EEF0;
  padding: 10px;
}
.card.card_statistic {
  text-align: center;
}
.card.card_statistic .cs_statistic {
  font-weight: bold;
  font-size: 32px;
  line-height: 1.2em;
}
.card.card_statistic .cs_title {
  color: rgba(0, 0, 0, 0.4);
}
.card .card_container_no_margin {
  margin-top: 0;
  margin-left: -32px;
  margin-bottom: -32px;
  margin-right: -32px;
}
.card .card_container_no_margin > span {
  display: block;
  margin: 32px;
}
.card .card_container_no_margin .cta_inline_flex {
  width: 100%;
  padding: 8px 32px;
  justify-content: space-between;
  box-sizing: border-box;
}
.card .card_container_no_margin .cta_inline_flex .cta {
  flex-grow: 0;
}

.font-size-small,
.small-font {
  font-size: 14px;
  line-height: 24px;
}

.font-size-x-small {
  font-size: 12px;
  line-height: 20px;
}

.checkbox-group {
  display: flex;
}
.checkbox-group.multiline {
  align-items: flex-start;
}
.checkbox-group label.gearchiveerd {
  color: rgba(51, 51, 51, 0.7);
}

.upcomingDatum {
  float: right;
}

.geenEvents {
  color: rgba(51, 51, 51, 0.6);
  margin-bottom: 16px;
}

a.opkomend {
  display: flex;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
a.opkomend:hover {
  transform: scale(1.05);
}
a.opkomend.done {
  opacity: 0.7;
}
a.opkomend .upcomingLeft,
a.opkomend .upcomingRight {
  flex: 100% 1 1;
  position: relative;
}
a.opkomend .upcomingLeft {
  display: none;
}
@media (min-width: 1030px) {
  a.opkomend .upcomingLeft {
    display: block;
    flex: 80px 0 0;
  }
}
a.opkomend .tijd {
  padding-top: 26px;
  font-size: 22px;
  font-weight: 700;
}
a.opkomend .evenementsoort {
  font-size: 14px;
  color: rgba(51, 51, 51, 0.5);
}
a.opkomend .naam {
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  margin-bottom: 20px;
}
a.opkomend .upcomingTijdschema {
  position: relative;
}
a.opkomend .upcomingTijdschema .upcomingLijn {
  display: block;
  width: 2px;
  position: absolute;
  left: 67px;
  top: 10px;
  bottom: 10px;
  background: #2580C3;
  z-index: 100;
}
a.opkomend .upcomingTijdschema .upcomingTijdschemaRij {
  display: flex;
}
a.opkomend .upcomingTijdschema .upcomingTijdschemaRij .upcomingTijd {
  flex: 50px 0 0;
}
a.opkomend .upcomingTijdschema .upcomingTijdschemaRij .upcomingTijdlijn {
  flex: 36px 0 0;
  position: relative;
}
a.opkomend .upcomingTijdschema .upcomingTijdschemaRij .upcomingTijdlijn .circle {
  position: relative;
  margin: 4px auto 0;
  display: block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  border: 3px solid #2580C3;
  background: #fff;
  z-index: 300;
}
a.opkomend .upcomingTijdschema .upcomingTijdschemaRij .upcomingTijdlijn .doneLine {
  position: absolute;
  top: 10px;
  left: 17px;
  width: 2px;
  background: #27AE60;
  z-index: 101;
}
a.opkomend .upcomingTijdschema .upcomingTijdschemaRij .upcomingDetails {
  flex: 100% 1 1;
}
a.opkomend .upcomingTijdschema .upcomingTijdschemaRij .upcomingDetails .upcomingLocatie {
  color: rgba(51, 51, 51, 0.6);
  margin-bottom: 10px;
}
a.opkomend .upcomingTijdschema .upcomingTijdschemaRij.done .circle {
  border-color: #27ae60;
  background: #27AE60;
}

.status {
  border: 1px solid #fff;
  border-radius: 4px;
  line-height: 18px;
  padding: 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  display: inline-block;
  font-weight: 700;
  color: #ffffff;
  margin-left: 10px;
}
.status.statusDef {
  color: #27AE60;
  border-color: #27AE60;
}
.status.statusCnl, .status.statusCxl {
  color: #e74c3c;
  border-color: #e74c3c;
}
.status.statusOpt {
  color: #2580C3;
  border-color: #2580C3;
}
.status.statusHold {
  color: #333333;
  border-color: #333333;
}
.status.paid {
  color: #27AE60;
  border-color: #27AE60;
}
.status.open {
  color: #e74c3c;
  border-color: #e74c3c;
}
.status.inline {
  margin-left: unset;
}

.pijl {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.loginOverlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(51, 51, 51, 0.4);
}

.login {
  padding: 20px;
  box-sizing: border-box;
  background-image: url("../images/login-partijensysteem-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
@media (min-width: 690px) {
  .login {
    padding: 0;
  }
}
.login #login {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 60px 30px;
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 0px 5.3px rgba(0, 0, 0, 0.02), 0 0px 17.9px rgba(0, 0, 0, 0.03), 0 0px 80px rgba(0, 0, 0, 0.05);
}
@media (min-width: 690px) {
  .login #login {
    width: 500px;
    padding: 100px 60px 60px;
    border-radius: 0;
  }
}
.login .loginmelding {
  display: block;
  position: relative;
  border: 1px solid #F5A623;
  background: rgba(245, 166, 35, 0.2);
  padding: 20px;
  margin: 20px 0;
}
.login h1 {
  margin-bottom: 40px;
}
.login .links {
  display: block;
  text-align: center;
  margin-bottom: 100px;
}
.login .links a {
  color: #2580C3;
  text-decoration: underline;
  font-size: 13px;
}
.login .wiltuook {
  padding: 30px;
  border-radius: 5px;
  font-size: 14px;
  background: rgba(51, 51, 51, 0.1);
  color: #333333;
}

.login_logo {
  max-width: 120px;
  margin-bottom: 24px;
}

#foutpagina {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  min-height: 100vh;
  height: auto;
  padding: 40px;
  box-sizing: border-box;
}

.foutpagina {
  width: 100%;
  max-width: 680px;
  padding: 32px 48px;
  background: #ffffff;
  border-radius: 4px;
}
.foutpagina .logo {
  display: flex;
  justify-content: center;
}
.foutpagina h1 {
  line-height: 30px;
  margin-bottom: 20px;
}
.foutpagina p, .foutpagina code {
  margin-bottom: 20px;
}
.foutpagina code {
  display: block;
  padding: 10px;
  font-size: 12px;
  line-height: 20px;
}
.foutpagina pre {
  text-wrap: wrap;
}

.foutbalk {
  display: block;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.foutbalk p {
  margin-bottom: 0;
}

/* 
*   Aside
*/
aside .logo {
  height: 60px;
  padding: 10px 0;
  box-sizing: border-box;
  display: flex;
}
aside .logo .aside_logo {
  flex: 80px 0 0;
}
aside .aside_logo {
  width: 80px;
}
aside.gesloten {
  display: none;
  flex: 0 0 0;
}
aside .verbergmenu {
  line-height: 60px;
  width: 60px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  color: #2580C3;
}
aside h5 {
  font-size: 14px;
  line-height: 1.5em;
  padding-left: 10px;
  font-weight: 400;
  color: #2580C3;
  margin-bottom: 4px;
}
aside ul {
  font-size: 14px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E7EEF0;
}
aside ul li {
  position: relative;
  border-radius: 4px;
}
aside ul li a {
  padding-left: 10px;
  display: block;
  line-height: 34px;
  margin-bottom: 2px;
  color: #404040;
  text-decoration: none;
}
aside ul li a .badge {
  position: absolute;
  left: -5px;
  top: 12px;
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  background: #e74c3c;
}
aside ul li a:hover {
  color: #2580C3;
}
aside ul li a i {
  text-align: center;
  margin-right: 10px;
  width: 22px;
  font-size: 14px;
}
aside ul li:hover {
  background: rgba(37, 128, 195, 0.1);
}
aside ul li.active {
  background: #2580c3;
}
aside ul li.active a {
  color: #fff;
}
aside ul li.active li a {
  padding-left: 0;
  border-left: 0;
  color: #fff;
}
aside .gebruikersMenu {
  display: block;
  position: fixed;
  font-size: 12px;
  line-height: 20px;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #E7EEF0;
  border-right: 1px solid #E7EEF0;
  width: inherit;
  background: #fff;
  box-sizing: border-box;
}
aside .gebruikersMenu .gebruikersDetails {
  padding: 10px 20px;
  border-bottom: 1px solid #E7EEF0;
}
aside .gebruikersMenu .gebruikersFuncties {
  display: flex;
  width: 100%;
  line-height: 40px;
}
aside .gebruikersMenu .gebruikersFuncties a,
aside .gebruikersMenu .gebruikersFuncties span {
  flex: 100% 1 1;
  border-right: 1px solid #E7EEF0;
  text-align: center;
  cursor: pointer;
}
aside .gebruikersMenu .gebruikersFuncties a:hover,
aside .gebruikersMenu .gebruikersFuncties span:hover {
  color: #2580c3;
  background: rgba(37, 128, 195, 0.2);
}
aside .gebruikersMenu .gebruikersFuncties a:last-child,
aside .gebruikersMenu .gebruikersFuncties span:last-child {
  border-right: none;
}
aside .asideSearch form input[type=search] {
  width: 100%;
  padding: 0 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* ===== alertContainer ===== */
.alertContainer {
  position: fixed;
  z-index: 2000;
  top: 60px;
  right: -50%;
  width: 300px;
  font-size: 14px;
  line-height: 24px;
}
.alertContainer .alert {
  background: #fff;
  padding: 8px 16px 8px 8px;
  margin-bottom: 8px;
  border-radius: 4px;
  display: flex;
  border-left: 3px solid transparent;
  box-shadow: 0 0px 5.3px rgba(0, 0, 0, 0.02), 0 0px 17.9px rgba(0, 0, 0, 0.03), 0 0px 80px rgba(0, 0, 0, 0.05);
}
.alertContainer .alert .alert-icon {
  width: 30px;
  margin-right: 8px;
}
.alertContainer .alert .alert-icon .alert-circle {
  display: block;
  width: 30px;
  line-height: 30px;
  border-radius: 15px;
  text-align: center;
}
.alertContainer .alert .alert-icon .alert-circle i {
  font-size: 12px;
  color: #fff;
}
.alertContainer .alert .alert-description .alert-title {
  font-weight: 700;
  display: block;
}
.alertContainer .alert.success {
  border-color: #27AE60;
}
.alertContainer .alert.success .alert-circle {
  background-color: rgba(39, 174, 96, 0.5);
}
.alertContainer .alert.info {
  border-color: #2580C3;
}
.alertContainer .alert.info .alert-circle {
  background-color: rgba(37, 128, 195, 0.5);
}
.alertContainer .alert.error {
  border-color: #e74c3c;
}
.alertContainer .alert.error .alert-circle {
  background-color: rgba(231, 76, 60, 0.5);
}
.alertContainer .alert .apitekst {
  display: block;
  font-family: monospace;
  background: rgba(51, 51, 51, 0.1);
  padding: 10px;
  font-size: 12px;
  line-height: 16px;
}

/* ===== Knoppen ===== */
.cta {
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  justify-content: center;
  padding: 0 16px;
  line-height: 38px;
  margin-bottom: 4px;
  border: 1px solid transparent;
}
.cta i {
  font-size: 14px;
  line-height: inherit;
}
.cta.icon-only {
  width: 38px;
  line-height: 38px;
  padding: 0;
  text-align: center;
}
.cta.icon-only i {
  margin: 0;
}
.cta.icon-big i {
  font-size: 18px;
}
.cta.size-small {
  line-height: 32px;
}
.cta.size-small.icon-only {
  width: 32px;
}
.cta.dark-bg {
  color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 0.6);
  background: transparent;
}
.cta.dark-bg:hover {
  color: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  background: transparent;
}
.cta.block {
  display: block;
}
.cta.primary {
  background-color: #27AE60;
  border-color: #27AE60;
}
.cta.primary:hover {
  background-color: #2A8751;
  border-color: #2A8751;
}
.cta.primary:active {
  background-color: #1d5e38;
  border-color: #1d5e38;
}
.cta.secondary {
  background-color: #2580C3;
  border-color: #2580C3;
}
.cta.secondary:hover {
  background-color: #195988;
  border-color: #195988;
}
.cta.secondary:active {
  background-color: #1a3c59;
  border-color: #1a3c59;
}
.cta.outlines, .cta.outline {
  background: transparent;
  border-color: #2580C3;
  color: #2580C3;
}
.cta.outlines:hover, .cta.outline:hover {
  background: #2580C3;
  border-color: #2580C3;
  color: #fff;
}
.cta.disabled {
  color: rgba(51, 51, 51, 0.6);
  cursor: not-allowed;
  background: #F6F6F6;
  border-color: #F6F6F6;
}
.cta.disabled:hover {
  background: rgba(51, 51, 51, 0.2);
  border-color: rgba(51, 51, 51, 0.2);
}
.cta.light {
  color: #2580C3;
  background: rgba(37, 128, 195, 0.05);
  border-color: rgba(37, 128, 195, 0.05);
}
.cta.light:hover {
  background: rgba(37, 128, 195, 0.2);
  border-color: rgba(37, 128, 195, 0.2);
}
.cta.delete {
  background-color: #e74c3c;
  border-color: #e74c3c;
}
.cta.delete:hover {
  background-color: #bf2718;
  border-color: #bf2718;
}
.cta.dashed {
  border: 1px dashed grey;
  color: grey;
}
.cta.dashed:hover {
  border: 1px solid grey;
  color: black;
}
.cta.favorite {
  background-color: #dfb356;
  border-color: #dfb356;
}
.cta.favorite_filter.active {
  color: #ffffff;
  background: #dfb356;
  border-color: #dfb356;
}
.cta.marginTop {
  margin-top: 20px;
}
.cta.marginBottomNone {
  margin-bottom: 0;
}
.cta.notAllowed {
  cursor: not-allowed;
}
.cta.notSucceed {
  background-color: #e74c3c;
  border-color: #e74c3c;
}
.cta .cta_status {
  display: none;
}

.cta_inline_flex {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.cta_inline_flex .cta {
  flex: auto;
}

.cta_flex {
  display: flex;
  gap: 4px;
}
.cta_flex .cta {
  flex: 100% 1 1;
  text-align: center;
}

.btn_inline_melding {
  display: none;
  color: #27AE60;
  font-size: 14px;
}
.btn_inline_melding.show {
  display: inline-block;
}

span.favorite {
  color: #dfb356;
  font-size: 14px;
  padding-left: 4px;
}

/* ===== Instellingen ===== */
.instellingen {
  display: block;
  min-height: 100px;
  padding: 0;
  position: relative;
}
.instellingen h2 {
  margin: unset;
  padding: unset;
  border-color: transparent;
}
.instellingen .nieuw {
  position: absolute;
  right: 0;
  top: 8px;
}
.instellingen .instellingenContent {
  padding: 25px 40px;
}
.instellingen .instellingenContent .content {
  position: relative;
  display: none;
}
.instellingen .instellingenContent .content h2 {
  margin-bottom: 0;
  padding: 0px 20px;
  margin: -21px -21px 0 -21px;
  border-bottom: 1px solid #E7EEF0;
}
.instellingen .instellingenContent .content#tab-basis {
  display: block;
}
.instellingen .instellingenContent #settingsFormitable {
  display: none;
}
.instellingen .instellingenContent #settingsFormitable.show {
  display: block;
}

.evenementactiviteitRow {
  display: flex;
  border-bottom: 1px solid #E7EEF0;
  padding: 10px 0 5px;
  flex-direction: column;
}
@media (min-width: 1240px) {
  .evenementactiviteitRow {
    flex-direction: row;
  }
}
.evenementactiviteitRow .evenementactiviteitLabel,
.evenementactiviteitRow .evenementactiviteitVelden {
  flex: 100% 1 1;
  position: relative;
}
@media (min-width: 1240px) {
  .evenementactiviteitRow .evenementactiviteitLabel {
    flex: 160px 0 0;
    margin-right: 50px;
  }
}
.evenementactiviteitRow .evenementactiviteitFlex {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.evenementactiviteitRow .evenementactiviteitFlex .inline__melding {
  flex: 100% 0 0;
  box-sizing: border-box;
}
.evenementactiviteitRow .evenementactiviteitVeld {
  flex: 100px 0 0;
  margin-right: 0;
}
.evenementactiviteitRow .evenementactiviteitVeld.veldVW {
  flex: auto 0 0;
  margin-right: 20px;
  min-width: 140px;
}
.evenementactiviteitRow .evenementactiviteitVeld label {
  width: auto;
  font-size: 14px;
}

.settingsRow {
  display: flex;
  border-bottom: 1px solid #2580C3;
  padding: 30px 0;
  flex-direction: column;
}
@media (min-width: 1240px) {
  .settingsRow {
    flex-direction: row;
    border-bottom: 1px solid #E7EEF0;
  }
}
.settingsRow .settingsExplanation,
.settingsRow .settingsView {
  flex: 100% 1 1;
  position: relative;
}
.settingsRow .settingsExplanation {
  color: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  line-height: 20px;
}
@media (min-width: 1240px) {
  .settingsRow .settingsExplanation {
    flex: 400px 0 0;
    margin-right: 50px;
  }
}
.settingsRow .settingsView {
  padding-top: 36px;
}

.settingSection {
  flex: 100% 1 1;
}

.landKeuzes {
  display: inline-flex;
  border: 1px solid #E7EEF0;
  border-radius: 4px;
  overflow: hidden;
}
.landKeuzes .landKeuze {
  padding: 3px 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
}
.landKeuzes .landKeuze:hover {
  background: rgba(37, 128, 195, 0.2);
}
.landKeuzes .landKeuze.active {
  background: #2580C3;
  color: #ffffff;
}

.subtab {
  display: none;
}

.logoPreview {
  max-width: 300px;
  min-width: 100px;
  border: 1px solid #E7EEF0;
  margin-top: 20px;
}
.logoPreview.nothingToShow {
  display: none;
}

.settingsList {
  border-top: 1px solid #E7EEF0;
}
.settingsList div.settingsListLink,
.settingsList a.settingsListLink {
  position: relative;
  display: block;
  padding: 10px 10px;
  border-bottom: 1px solid #E7EEF0;
  text-decoration: none;
  cursor: pointer;
}
.settingsList div.settingsListLink i,
.settingsList a.settingsListLink i {
  margin-right: 10px;
}
.settingsList div.settingsListLink .status i,
.settingsList a.settingsListLink .status i {
  margin-right: 6px;
}
.settingsList div.settingsListLink.inactief,
.settingsList a.settingsListLink.inactief {
  color: rgba(51, 51, 51, 0.6);
  background: rgba(231, 238, 240, 0.4);
}
.settingsList div.settingsListLink.disabled,
.settingsList a.settingsListLink.disabled {
  cursor: not-allowed;
  color: rgba(51, 51, 51, 0.6);
  background: rgba(231, 238, 240, 0.4);
}
.settingsList div.settingsListLink:hover,
.settingsList a.settingsListLink:hover {
  background: rgba(37, 128, 195, 0.1);
}
.settingsList .noResults {
  display: block;
  padding: 10px 10px;
  color: rgba(0, 0, 0, 0.4);
}

.settingsActions {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.settingsActions .settingsAction {
  margin-right: 30px;
  margin-bottom: 30px;
  font-size: 14px;
  padding: 15px;
  flex: 300px 0 0;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
  box-shadow: 0 0px 5.3px rgba(0, 0, 0, 0.02), 0 0px 17.9px rgba(0, 0, 0, 0.03), 0 0px 80px rgba(0, 0, 0, 0.05);
}
.settingsActions .settingsAction .settingsAction__content {
  display: flex;
}
.settingsActions .settingsAction .settingsAction__content .settingsAction__check {
  flex: 20px 0 0;
}
.settingsActions .settingsAction .settingsAction__content .settingsAction__check i {
  color: rgba(51, 51, 51, 0.5);
}
.settingsActions .settingsAction .settingsAction__content .settingsAction__main {
  flex: 100% 1 1;
}
.settingsActions .settingsAction .settingsAction__title {
  font-weight: 700;
}
.settingsActions .settingsAction .settingsAction__moment {
  display: inline-block;
  border: 1px solid #2580C3;
  color: #2580C3;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}
.settingsActions .settingsAction .settingsAction__update {
  color: #2580C3;
}
.settingsActions .settingsAction.addAction {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(51, 51, 51, 0.4);
  border: 1px dashed #E7EEF0;
  box-shadow: none;
}
.settingsActions .settingsAction.addAction:hover {
  color: #333333;
  border: 1px dashed rgba(51, 51, 51, 0.4);
}

/*
 * pictogramKeuze wordt gebruikt bij de instellingen voor het kiezen van een icoon
 */
form .frmRow .frmCell .pictogramKeuze {
  display: block;
  width: 100%;
  float: none;
  overflow: hidden;
  margin-bottom: 20px;
}
form .frmRow .frmCell .pictogramKeuze .pictogramKeuzeOptie {
  width: 80px;
  height: 80px;
  display: inline-block;
  margin-right: 8px;
  position: relative;
}
form .frmRow .frmCell .pictogramKeuze .pictogramKeuzeOptie input[type=radio] {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}
form .frmRow .frmCell .pictogramKeuze .pictogramKeuzeOptie input[type=radio]:before {
  text-align: center;
  padding-right: unset;
}
form .frmRow .frmCell .pictogramKeuze input[type=radio] + label {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background: #fff;
  color: #000000;
  border-radius: 8px;
  font-size: 32px;
  cursor: pointer;
  border: 1px solid #E7EEF0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
form .frmRow .frmCell .pictogramKeuze input[type=radio]:hover + label,
form .frmRow .frmCell .pictogramKeuze input[type=radio] + label:hover {
  border-color: #2580C3;
  -moz-box-shadow: inset 0 0 3px rgba(37, 128, 195, 0.5);
  -webkit-box-shadow: inset 0 0 3px rgba(37, 128, 195, 0.5);
  box-shadow: inset 0 0 3px rgba(37, 128, 195, 0.5);
}
form .frmRow .frmCell .pictogramKeuze input[type=radio]:checked + label {
  border-color: #2580C3;
  background: rgba(37, 128, 195, 0.1);
  color: #2580C3;
}

/*
 * toevoegblok wordt gebruikt wanneer je een activiteit aan een evenement wilt toevoegen & voor de status
 */
.toevoegblokken {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.toevoegblokken .toevoegblok {
  flex: 110px 0 0;
  margin-right: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
  min-height: 110px;
  border-radius: 4px;
  padding: 15px 10px;
  background: #fff;
  border: 1px solid #E7EEF0;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.toevoegblokken .toevoegblok i {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 28px;
  margin-bottom: 5px;
}
.toevoegblokken .toevoegblok span {
  font-size: 14px;
  line-height: 18px;
}
.toevoegblokken.rijen {
  flex-direction: column;
}
.toevoegblokken.rijen .toevoegblok {
  flex-direction: row;
  flex: 100% 0 0;
  min-height: unset;
  text-align: left;
  margin-right: unset;
  margin-bottom: 10px;
}
.toevoegblokken.rijen .toevoegblok i {
  text-align: center;
  font-size: 18px;
  padding: unset;
  margin-right: 15px;
  margin-bottom: unset;
  flex: 32px 0 0;
  line-height: 18px;
}
.toevoegblokken.rijen .toevoegblok span {
  flex: 100% 0 0;
}

.toevoegblok.breed {
  width: 160px;
}
.toevoegblok:hover {
  border-color: #2580C3;
  -moz-box-shadow: inset 0 0 3px rgba(37, 128, 195, 0.5);
  -webkit-box-shadow: inset 0 0 3px rgba(37, 128, 195, 0.5);
  box-shadow: inset 0 0 3px rgba(37, 128, 195, 0.5);
}

section.agenda .dcPicker {
  position: Absolute;
  right: 10px;
  top: 10px;
}
section.agenda .dcPicker input {
  max-width: 120px;
  text-align: center;
}
section.agenda .agendaMaand {
  display: block;
  border-bottom: none;
}
@media (min-width: 690px) {
  section.agenda .agendaMaand {
    display: flex;
    flex-wrap: wrap;
  }
}
section.agenda .agendaMaand .agendaDag {
  position: relative;
  display: block;
  min-height: 80px;
  width: 100%;
  box-sizing: border-box;
  padding: 40px 2px;
  border-bottom: 1px solid #E7EEF0;
}
@media (min-width: 690px) {
  section.agenda .agendaMaand .agendaDag {
    border-right: 1px solid #E7EEF0;
    width: 14.2857142857%;
    min-height: 150px;
  }
}
section.agenda .agendaMaand .agendaDag:nth-child(7n+0) {
  border-right: 0;
}
section.agenda .agendaMaand .agendaDag.inactief {
  background: rgba(231, 238, 240, 0.3);
  display: none;
}
@media (min-width: 690px) {
  section.agenda .agendaMaand .agendaDag.inactief {
    display: block;
  }
}
section.agenda .agendaMaand .agendaDag:hover .add {
  opacity: 1;
}
section.agenda .section__content a, section.agenda .section__content article {
  position: relative;
  min-height: 25px;
  line-height: 25px;
  font-size: 13px;
  margin-bottom: 2px;
  text-decoration: none;
  display: block;
  padding: 0 5px;
  border-radius: 4px;
  cursor: pointer;
  background: rgba(39, 174, 96, 0.2);
  color: #2a8751;
}
section.agenda .section__content a .agendaDetails, section.agenda .section__content article .agendaDetails {
  display: none;
  width: 400px;
  z-index: 4000;
  position: absolute;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 4px;
  color: #333333;
  box-shadow: 0 0px 5.3px rgba(0, 0, 0, 0.02), 0 0px 17.9px rgba(0, 0, 0, 0.03), 0 0px 80px rgba(0, 0, 0, 0.05);
  line-height: 24px;
}
section.agenda .section__content a .agendaDetails .titel, section.agenda .section__content article .agendaDetails .titel {
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  margin-bottom: 5px;
}
section.agenda .section__content a .agendaDetails .evenementOmschrijving, section.agenda .section__content article .agendaDetails .evenementOmschrijving {
  margin-bottom: 10px;
}
section.agenda .section__content a .agendaDetails .table-view, section.agenda .section__content article .agendaDetails .table-view {
  border-top: 1px solid #E7EEF0;
}
section.agenda .section__content a .agendaDetails .table-view .table-row, section.agenda .section__content article .agendaDetails .table-view .table-row {
  display: flex;
  border-bottom: 1px solid #E7EEF0;
}
section.agenda .section__content a .agendaDetails .table-view .table-row .table-cell, section.agenda .section__content article .agendaDetails .table-view .table-row .table-cell {
  padding: 0 5px;
  flex: 100% 1 1;
}
section.agenda .section__content a time, section.agenda .section__content article time {
  font-weight: 400;
  float: left;
  margin-right: 5px;
}
section.agenda .section__content a h6, section.agenda .section__content article h6 {
  word-wrap: break-word;
  margin-bottom: unset;
}
section.agenda .section__content a.add, section.agenda .section__content article.add {
  opacity: 0;
  background: none;
  border: 1px dashed rgba(51, 51, 51, 0.4);
  color: rgba(51, 51, 51, 0.4);
  text-align: center;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
section.agenda .section__content a.add i, section.agenda .section__content article.add i {
  font-size: 12px;
}
section.agenda .section__content a.add:hover, section.agenda .section__content article.add:hover {
  border: 1px dashed #333333;
  color: #333333;
}
section.agenda .section__content a.option, section.agenda .section__content article.option {
  opacity: 1;
  color: #2580C3;
  background-color: transparent;
  background-image: repeating-linear-gradient(135deg, rgba(37, 128, 195, 0.1), rgba(37, 128, 195, 0.1) 10px, rgba(37, 128, 195, 0.2) 10px, rgba(37, 128, 195, 0.2) 20px);
}
section.agenda .section__content a.cancelled, section.agenda .section__content article.cancelled {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.2);
}
section.agenda .section__content a.hold, section.agenda .section__content article.hold {
  color: #333333;
  background: rgba(51, 51, 51, 0.2);
}
section.agenda .section__content a.feestdag, section.agenda .section__content article.feestdag {
  text-transform: capitalize;
  background: rgba(121, 68, 59, 0.2);
  color: #79443b;
  font-weight: 600;
}
section.agenda .section__content a.agendaitem, section.agenda .section__content article.agendaitem {
  background: rgba(241, 185, 80, 0.2);
  color: #f1b950;
}
section.agenda article.agendaitem {
  cursor: help;
}
section.agenda div.today .dagnummer {
  background: #e74c3c;
  color: #fff;
  border-radius: 15px;
}
section.agenda div span {
  line-height: 16px;
}
section.agenda div span.dag {
  position: absolute;
  top: 10px;
  left: 10px;
  color: rgba(51, 51, 51, 0.3);
}
section.agenda div span.dagnummer {
  position: absolute;
  top: 5px;
  right: 5px;
  font-weight: 700;
  width: 30px;
  line-height: 30px;
  text-align: center;
}
section.agenda div span.dagnummer a {
  background: none;
  font-size: unset;
  color: unset;
  line-height: inherit;
  margin-bottom: 0;
}
section.agenda div span.weeknummer {
  position: absolute;
  bottom: 5px;
  left: 10px;
  font-weight: 700;
  font-size: 12px;
  color: rgba(51, 51, 51, 0.3);
}

.lijstContactpersonen {
  margin-top: 10px;
}

.lijstContactpersonenRij {
  line-height: 40px;
  border-bottom: 1px solid #E7EEF0;
}

.lijstContactpersonenNieuw .lijstContactpersonenRij {
  display: flex;
}
.lijstContactpersonenNieuw .lijstContactpersonenRij .radioLijstContactpersoon {
  flex: 150px 0 0;
}
.lijstContactpersonenNieuw .lijstContactpersonenRij .formLijstContactpersoon {
  flex: 100% 1 1;
}

.lijstContactpersonenLeeg {
  color: #e74c3c;
  font-style: italic;
}

#nieuweContactpersoon {
  margin-top: 10px;
}

.inline-tag {
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  border: 1px solid #e74c3c;
  border-radius: 4px;
  padding: 0 6px;
  margin-left: 10px;
  color: #e74c3c;
}
.inline-tag i {
  font-size: 10px;
  margin-right: 5px;
}

/* Formulier */
.ck-editor__main .ck-editor__editable {
  padding-top: 0.8em;
}
.ck-editor__main p {
  margin-bottom: unset;
}

.field_prefix,
.field_suffix {
  display: inline-block;
  background: #D1D1D1;
  font-size: 12px;
  padding: 3px 5px;
}

.field_prefix {
  margin-right: -6px;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.field_suffix {
  margin-left: -16px;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  -moz-border-radius-bottomright: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.validatieOverzicht {
  width: 100%;
}
.validatieOverzicht .validatieInformatie,
.validatieOverzicht .validatieOngeldig,
.validatieOverzicht .validatieGeldig {
  border: 1px solid rgba(231, 76, 60, 0.3);
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.validatieOverzicht .validatieInformatie h3,
.validatieOverzicht .validatieOngeldig h3,
.validatieOverzicht .validatieGeldig h3 {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
  padding: 12px 20px;
  margin: -20px -20px 12px -20px;
  border-bottom: 1px solid rgba(231, 76, 60, 0.3);
}
.validatieOverzicht .validatieInformatie ul,
.validatieOverzicht .validatieOngeldig ul,
.validatieOverzicht .validatieGeldig ul {
  margin-bottom: 20px;
  list-style-type: disc;
}
.validatieOverzicht .validatieInformatie ul li,
.validatieOverzicht .validatieOngeldig ul li,
.validatieOverzicht .validatieGeldig ul li {
  margin-left: 20px;
}
.validatieOverzicht .validatieGeldig {
  border-color: rgba(39, 174, 96, 0.3);
  margin-right: 0;
}
.validatieOverzicht .validatieGeldig h3 {
  color: #27AE60;
  background: rgba(39, 174, 96, 0.1);
  border-color: rgba(39, 174, 96, 0.3);
}
.validatieOverzicht .validatieInformatie {
  border-color: rgba(37, 128, 195, 0.3);
  margin-right: 0;
}
.validatieOverzicht .validatieInformatie h3 {
  color: #2580C3;
  background: rgba(37, 128, 195, 0.1);
  border-color: rgba(37, 128, 195, 0.3);
}

.fieldCorrect {
  border-color: #27AE60;
  background: rgba(39, 174, 96, 0.1);
}

.fieldIncorrect {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
}

.factuurregel {
  display: flex;
  gap: 8px;
}
.factuurregel.kop {
  font-size: 14px;
  font-weight: bold;
}
.factuurregel.kop > div {
  padding: 8px 0;
}
.factuurregel .factuurregelTitel,
.factuurregel .factuurregelOmschrijving,
.factuurregel .factuurregelAantal,
.factuurregel .factuurregelPrijs,
.factuurregel .factuurregelBtw,
.factuurregel .factuurregelBedrag {
  box-sizing: border-box;
}
.factuurregel .factuurregelTitel input[type=text],
.factuurregel .factuurregelTitel input[type=number],
.factuurregel .factuurregelTitel select,
.factuurregel .factuurregelOmschrijving input[type=text],
.factuurregel .factuurregelOmschrijving input[type=number],
.factuurregel .factuurregelOmschrijving select,
.factuurregel .factuurregelAantal input[type=text],
.factuurregel .factuurregelAantal input[type=number],
.factuurregel .factuurregelAantal select,
.factuurregel .factuurregelPrijs input[type=text],
.factuurregel .factuurregelPrijs input[type=number],
.factuurregel .factuurregelPrijs select,
.factuurregel .factuurregelBtw input[type=text],
.factuurregel .factuurregelBtw input[type=number],
.factuurregel .factuurregelBtw select,
.factuurregel .factuurregelBedrag input[type=text],
.factuurregel .factuurregelBedrag input[type=number],
.factuurregel .factuurregelBedrag select {
  width: 100%;
}
.factuurregel .factuurregelOmschrijving {
  flex-basis: 100%;
}
.factuurregel .factuurregelAantal {
  flex: 120px 0 1;
}
.factuurregel .factuurregelPrijs,
.factuurregel .factuurregelBedrag {
  flex: 180px 0 1;
}
.factuurregel .factuurregelBtw {
  flex: 230px 0 1;
}
.factuurregel .factuurregelTitel {
  flex: 50px 0 0;
  text-align: center;
}

.invoice_total {
  font-weight: bold;
  font-size: 14px;
}

.items .item {
  display: flex;
  padding: 5px;
  border-bottom: 1px solid #E7EEF0;
}
.items .item span {
  flex: 100% 1 1;
}
.items .item .acties {
  flex: 50px 1 1;
}
.items .item .acties a {
  display: inline-block;
  padding: 0 5px;
}
.items .item:hover {
  background: rgba(37, 128, 195, 0.1);
}
.items.facturen .pdf {
  flex: 30px 0 0;
}
.items.facturen .factuurnummer {
  flex: 160px 0 0;
}

.multiselect {
  font-size: 12px;
}
.multiselect .selectAll,
.multiselect .deselectAll {
  cursor: pointer;
}
.multiselect .selectAll:hover,
.multiselect .deselectAll:hover {
  text-decoration: underline;
}

fieldset {
  border: 1px solid #2580C3;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}
fieldset legend {
  font-weight: bold;
  padding-left: 4px;
  padding-right: 4px;
}
fieldset fieldset {
  border-color: #E7EEF0;
}
fieldset fieldset legend {
  color: rgba(37, 128, 195, 0.6);
}

.mailTest {
  display: flex;
  border-radius: 5px;
  background: #2580C3;
  color: #fff;
  font-size: 14px;
  width: 200px;
  cursor: pointer;
  overflow: hidden;
}
.mailTest .mailTestIcon {
  flex: 30px 0 0;
  padding: 7px;
  background: #195988;
  text-align: center;
  font-size: 16px;
}
.mailTest .mailTestText {
  flex: 100% 1 1;
  padding: 7px 10px;
}
.mailTest.gelukt {
  background: #27AE60;
}
.mailTest.gelukt .mailTestIcon {
  background: #2A8751;
}

.rapportage__year {
  margin-bottom: 10px;
}
.rapportage__year.closed .rapportage__year__title .rapportage__year__toggle i {
  transform: rotate(-180deg);
}
.rapportage__year .rapportage__year__title {
  position: relative;
  font-weight: bold;
  text-align: left;
  line-height: 40px;
  padding: 0 10px;
  background: rgba(51, 51, 51, 0.8);
  color: #ffffff;
}
.rapportage__year .rapportage__year__title .rapportage__year__toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 40px;
  width: 40px;
  cursor: pointer;
  text-align: center;
}
.rapportage__year .rapportage__year__title .rapportage__year__toggle i {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.rapportage__year .rapportage__year__table {
  display: block;
}

.table--rapportage td, .table--rapportage th {
  text-align: right;
  padding: 2px 5px;
}
.table--rapportage td:first-child {
  text-align: left;
}
.table--rapportage td.jaar {
  text-align: left;
  font-size: 20px;
  padding: 10px 0;
}
.table--rapportage .table--rapportage--head {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.05);
}
.table--rapportage .table--rapportage--totaal {
  font-weight: bold;
}
.table--rapportage .currentMonth {
  background: rgba(37, 128, 195, 0.2);
}

.page__header {
  display: flex;
  margin-bottom: 16px;
}
.page__header .page__header_title {
  flex: 100% 1 1;
  font-size: 30px;
  font-weight: bold;
}
.page__header .page__header_prev,
.page__header .page__header_next {
  flex: 40px 0 0;
  text-align: center;
}
.page__header .page__header_action {
  flex: 100% 1 1;
  display: flex;
}

section:after {
  clear: both;
  content: "";
  display: table;
}
section .disclaimer {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 20px;
  margin-bottom: -10px;
}
section.export_zoek input,
section.export_zoek select {
  width: 120px;
}
section.section--smalltext {
  font-size: 12px;
  line-height: 20px;
}
section.section--smalltext h2 {
  font-size: 16px;
}
section.section--smalltext table {
  width: 100%;
  font-size: 14px;
  line-height: 24px;
}
section.section--smalltext table td {
  height: 20px;
}
section.section--smalltext table tr.totaal td {
  font-weight: 700;
}
section.section--smalltext table td.prijs {
  text-align: right;
  width: 90px;
}
section.section--smalltext .knoppenEvenement {
  padding-top: 20px;
  margin-bottom: -26px;
}
section.section--smalltext label {
  font-size: 12px;
}

.actielijst.actielijst--smallfont {
  font-size: 13px;
}
.actielijst.actielijst--background {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0px 5.3px rgba(0, 0, 0, 0.02), 0 0px 17.9px rgba(0, 0, 0, 0.03), 0 0px 80px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}
.actielijst.actielijst--ruim .actie {
  border-bottom: 1px solid #E7EEF0;
  padding: 10px 20px;
  margin-bottom: 0;
}
.actielijst.actielijst--ruim .actie .actieblok__content .actieblok__titel {
  font-weight: normal;
}
.actielijst.actielijst--ruim .actie .actieblok__content .actieblok__omschrijving {
  font-size: 14px;
}
.actielijst .actie {
  display: flex;
  text-decoration: none;
  margin-bottom: 10px;
}
.actielijst .actie.actie--link:hover .actieblok__titel,
.actielijst .actie.actie--link:hover .actieblok__icon {
  color: #2580C3;
}
.actielijst .actie .actieblok__icon {
  flex: 20px 0 0;
  padding-top: 3px;
}
.actielijst .actie .actieblok__icon i {
  cursor: pointer;
}
.actielijst .actie .actieblok__icon i:hover {
  color: #27AE60;
}
.actielijst .actie .actieblok__content {
  position: relative;
  width: 100%;
}
.actielijst .actie .actieblok__content.voltooid {
  text-decoration: line-through;
}
.actielijst .actie .actieblok__content.voltooid .actieblok__datum {
  background: rgba(0, 0, 0, 0.2);
}
.actielijst .actie .actieblok__content .actieblok__menutoggle {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  text-align: center;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.4);
}
.actielijst .actie .actieblok__content .actieblok__menu {
  display: none;
  position: absolute;
  right: 0;
  margin-top: -8px;
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0px 5.3px rgba(0, 0, 0, 0.02), 0 0px 17.9px rgba(0, 0, 0, 0.03), 0 0px 80px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  border: 1px solid #E7EEF0;
  z-index: 500;
}
.actielijst .actie .actieblok__content .actieblok__menu i {
  width: 16px;
}
.actielijst .actie .actieblok__content .actieblok__menu a,
.actielijst .actie .actieblok__content .actieblok__menu div {
  cursor: pointer;
  padding: 6px 14px;
  display: block;
  text-decoration: none;
}
.actielijst .actie .actieblok__content .actieblok__menu a i,
.actielijst .actie .actieblok__content .actieblok__menu div i {
  margin-right: 6px;
}
.actielijst .actie .actieblok__content .actieblok__menu a:hover,
.actielijst .actie .actieblok__content .actieblok__menu div:hover {
  color: #e74c3c;
}
.actielijst .actie .actieblok__content .actieblok__titel {
  font-weight: bold;
  line-height: 26px;
}
.actielijst .actie .actieblok__content .actieblok__datum,
.actielijst .actie .actieblok__content .actieblok__gebruiker {
  display: inline-block;
  background: #e67e22;
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 20px;
  margin-right: 10px;
  color: #ffffff;
  font-size: 13px;
}
.actielijst .actie .actieblok__content .actieblok__datum.past,
.actielijst .actie .actieblok__content .actieblok__gebruiker.past {
  background: #e74c3c;
}
.actielijst .actie .actieblok__content .actieblok__datum i,
.actielijst .actie .actieblok__content .actieblok__gebruiker i {
  margin-right: 4px;
}
.actielijst .actie .actieblok__content .actieblok__gebruiker {
  background: rgba(51, 51, 51, 0.1);
  color: rgba(0, 0, 0, 0.6);
}
.actielijst .actie .actieblok__content .actieblok__omschrijving {
  line-height: 1.4em;
  margin-top: 3px;
  margin-bottom: 3px;
}
.actielijst .actielijst__geenactie {
  padding: 10px 20px;
  font-size: 14px;
}

form .label-align-top,
.form .label-align-top {
  display: flex;
  align-items: center;
}
form .required,
.form .required {
  color: #e74c3c;
}
form .inline-checkboxes,
.form .inline-checkboxes {
  display: inline-block;
}
form .klant__type,
.form .klant__type {
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #2580C3;
  margin-bottom: 10px;
}
form .klant__type .klant__type_optie,
.form .klant__type .klant__type_optie {
  position: relative;
}
form .klant__type input[type=radio],
.form .klant__type input[type=radio] {
  position: absolute;
  left: 8px;
  top: 3px;
  z-index: 100;
}
form .klant__type label,
.form .klant__type label {
  display: inline-block;
  background: #ffffff;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  line-height: 32px;
  margin-bottom: 0;
  width: unset;
  padding: 0 16px 0 32px;
}
form .klant__type input[type=radio]:checked:before,
.form .klant__type input[type=radio]:checked:before {
  color: #ffffff;
}
form .klant__type input[type=radio]:checked + label,
.form .klant__type input[type=radio]:checked + label {
  background-color: #2580C3;
  color: #ffffff;
}
form .klant__type input[type=radio]:disabled + label,
.form .klant__type input[type=radio]:disabled + label {
  background-color: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.6);
  cursor: not-allowed;
}

.frmRow {
  display: flex;
  box-sizing: border-box;
  gap: 8px;
  flex-direction: column;
}
@media (min-width: 690px) {
  .frmRow {
    flex-direction: row;
  }
}
.frmRow.frmMobileRow {
  flex-direction: row;
}
.frmRow .frmCell {
  flex: 100% 1 1;
  box-sizing: border-box;
}
.frmRow .frmCell label {
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: bold;
}
@media (min-width: 690px) {
  .frmRow .frmCell.frmLabel {
    flex: 200px 1 1;
  }
}
.frmRow .frmCell.frmLabel label {
  font-weight: normal;
}
.frmRow .frmCell input[type=radio] + label,
.frmRow .frmCell input[type=checkbox] + label {
  font-weight: normal;
  margin-bottom: unset;
}
.frmRow .frmCell.frmCenter {
  text-align: center;
}
.frmRow .frmCell.frmRight {
  text-align: right;
}
.frmRow .frmCell.frmLh40 {
  line-height: 40px;
}
.frmRow .frmCell.w5 {
  flex: 5% 1 1;
}
.frmRow .frmCell.w10 {
  flex: 10% 1 1;
}
.frmRow .frmCell.w15 {
  flex: 15% 1 1;
}
.frmRow .frmCell.w20 {
  flex: 20% 1 1;
}
.frmRow .frmCell.w25 {
  flex: 25% 1 1;
}
.frmRow .frmCell.w30 {
  flex: 30% 1 1;
}
.frmRow .frmCell.w35 {
  flex: 30% 1 1;
}
.frmRow .frmCell.w40 {
  flex: 40% 1 1;
}
.frmRow .frmCell.w50 {
  flex: 50% 1 1;
}
.frmRow .frmCell.w60 {
  flex: 60% 1 1;
}
.frmRow .frmCell.w65 {
  flex: 65% 1 1;
}
.frmRow .frmCell.w70 {
  flex: 70% 1 1;
}
.frmRow .frmCell.w80 {
  flex: 80% 1 1;
}
.frmRow .frmCell.w90 {
  flex: 90% 1 1;
}
.frmRow .frmCell.absolute-inherit {
  flex: auto 0 0;
}
.frmRow .frmCell .topLabel {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
  width: 100%;
}
.frmRow .frmCell.frmFullWidth input[type=text],
.frmRow .frmCell.frmFullWidth input[type=date],
.frmRow .frmCell.frmFullWidth input[type=tel],
.frmRow .frmCell.frmFullWidth input[type=email],
.frmRow .frmCell.frmFullWidth input[type=number],
.frmRow .frmCell.frmFullWidth input[type=file],
.frmRow .frmCell.frmFullWidth input[type=password],
.frmRow .frmCell.frmFullWidth input[type=submit],
.frmRow .frmCell.frmFullWidth input[type=search] {
  width: 100%;
}
.frmRow .frmCell.frmFullWidth label {
  width: 100%;
}
.frmRow .frmCell.frmFullWidth select {
  width: 100%;
}
.frmRow .frmCell:last-child {
  margin-right: 0;
  margin-bottom: 0;
}
.frmRow .frmCell.label {
  flex: 150px 1 1;
}

.klant__resultaat {
  display: flex;
  font-size: 14px;
  position: relative;
  flex-direction: column;
}
@media (min-width: 900px) {
  .klant__resultaat {
    flex-direction: row;
  }
}
.klant__resultaat .klant__gegevens,
.klant__resultaat .klant__contactpersoon {
  position: relative;
  display: none;
  border: 1px solid #E7EEF0;
  border-radius: 5px;
  padding: 15px;
  flex: 100% 1 1;
}
.klant__resultaat .klant__gegevens {
  margin-bottom: 20px;
}
@media (min-width: 900px) {
  .klant__resultaat .klant__gegevens {
    flex: 300px 0 0;
    margin-right: 20px;
    margin-bottom: unset;
  }
}
.klant__resultaat .klant__gegevens span {
  display: block;
}

.logboek .details .details__diff {
  display: flex;
}
.logboek .details .details__diff .details__old,
.logboek .details .details__diff .details__new {
  flex: 45% 0 0;
}
.logboek .details .details__diff .details__icon {
  flex: 10% 0 0;
}

.inline__rij {
  display: block;
}
@media (min-width: 900px) {
  .inline__rij {
    display: flex;
  }
}
.inline__rij .inline__kol {
  margin-bottom: 20px;
}
@media (min-width: 900px) {
  .inline__rij .inline__kol {
    flex: 100% 1 1;
    margin-bottom: 0;
  }
}
.inline__rij .inline__space {
  display: none;
}
@media (min-width: 900px) {
  .inline__rij .inline__space {
    display: block;
    flex: 30px 0 0;
  }
}

.evenement__contactpersoon__container {
  display: block;
  position: relative;
}
@media (min-width: 690px) {
  .evenement__contactpersoon__container {
    border-left: 1px solid #E7EEF0;
    padding-left: 20px;
  }
}

.action__absolute {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 5px;
  border: 1px solid #E7EEF0;
  color: #333333;
  cursor: pointer;
}
.action__absolute:hover {
  border-color: #2580C3;
  background: #2580C3;
  color: #ffffff;
}
.action__absolute.action__red {
  border: 1px solid #E7EEF0;
  color: #e74c3c;
}
.action__absolute.action__red:hover {
  border-color: #e74c3c;
  background: #e74c3c;
  color: #ffffff;
}
.action__absolute.action__padding {
  right: 10px;
  top: 10px;
}

.tafeloverzicht__formitable {
  padding: 20px;
  border-radius: 5px;
  background: #F4F4F5;
  margin-bottom: 20px;
}
.tafeloverzicht__formitable .tafeloverzicht__area {
  border: 1px solid #2580C3;
  border-radius: 5px;
  margin-bottom: 5px;
  background: #ffffff;
}
.tafeloverzicht__formitable .tafeloverzicht__area .tafeloverzicht__header {
  position: relative;
  display: flex;
  background: rgba(37, 128, 195, 0.1);
  border-radius: 5px;
  line-height: 30px;
  cursor: pointer;
}
.tafeloverzicht__formitable .tafeloverzicht__area .tafeloverzicht__header .tafeloverzicht__toggle {
  flex: 40px 0 0;
  text-align: center;
  line-height: 40px;
}
.tafeloverzicht__formitable .tafeloverzicht__area .tafeloverzicht__header .tafeloverzicht__toggle .icon {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tafeloverzicht__formitable .tafeloverzicht__area .tafeloverzicht__header .tafeloverzicht__titel {
  flex: 100% 1 1;
  padding: 5px 10px 5px 0;
  font-weight: bold;
}
.tafeloverzicht__formitable .tafeloverzicht__area.tafeloverzicht__open .tafeloverzicht__header .tafeloverzicht__toggle .icon {
  transform: rotate(90deg);
}
.tafeloverzicht__formitable .tafeloverzicht__area .tafeloverzicht__area__tables {
  position: relative;
  display: none;
  padding: 10px;
}
.tafeloverzicht__formitable .tafeloverzicht__area .tafeloverzicht__area__tables .tafeloverzicht__select {
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 100;
}
.tafeloverzicht__formitable .tafeloverzicht__area .tafeloverzicht__area__tables .tafeloverzicht__multiselect,
.tafeloverzicht__formitable .tafeloverzicht__area .tafeloverzicht__area__tables .tafeloverzicht__multideselect {
  display: inline-block;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}

.listView {
  padding-left: 0;
  padding-right: 0;
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -20px;
}
.listView.mt-0 {
  margin-top: 0;
}
.listView > a {
  display: block;
  padding: 10px 20px;
  border-bottom: 1px solid #E7EEF0;
  text-decoration: none;
}
.listView > a.hover {
  background: rgba(58, 152, 253, 0.08);
  outline: 1px solid rgba(58, 152, 253, 0.5);
}
.listView > a:hover {
  background: rgba(58, 152, 253, 0.2);
  outline: none;
}
.listView > a.cancelled, .listView > a.inactief {
  background: #F4F8F9;
  color: #999;
}
.listView > a .listviewRow {
  display: flex;
  margin-bottom: 5px;
}
.listView > a .listviewRow:last-child {
  margin-bottom: 0;
}
.listView > a:last-child {
  border-bottom: none;
}
.listView div.item__arrangement {
  display: flex;
  padding: 10px 20px;
  border-bottom: 1px solid #E7EEF0;
  text-decoration: none;
}
.listView div.item__arrangement .omschrijving {
  flex: 100% 1 1;
}
.listView div.item__arrangement .prijs {
  flex: 100% 1 1;
}
.listView div.item__arrangement .acties {
  flex: 100px 0 0;
}
.listView div.item__arrangement .acties a {
  display: inline-block;
  padding: 10px;
  margin-top: -10px;
  margin-bottom: -10px;
  margin-right: 10px;
}
.listView div.item__arrangement .acties a:hover {
  color: #2580C3;
}
.listView.listCompanies {
  margin-bottom: -20px;
}
.listView.listCompanies a .naam {
  flex: 50% 1 1;
  font-weight: bold;
}
.listView.listCompanies a .contactpersoon {
  flex: 50% 1 1;
}
.listView.listCompanies a .reserveersysteem {
  flex: 50% 1 1;
}

.listItem {
  display: block;
  padding: 10px 20px;
  border-bottom: 1px solid #E7EEF0;
  text-decoration: none;
}
.listItem a {
  text-decoration: none;
}
.listItem:hover {
  background: rgba(58, 152, 253, 0.2);
}
.listItem.cancelled, .listItem.inactief {
  background: #F4F8F9;
  color: #999;
}
.listItem.highlight {
  font-weight: bold;
}
.listItem.listItemFactuur {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
.listItem.listItemFactuur > a, .listItem.listItemFactuur > div {
  padding: 10px 0;
}
.listItem.listItemFactuur .factuurdatum {
  display: inline-block;
  width: 95px;
}
.listItem .acties a {
  display: block;
  width: 26px;
  text-align: center;
}

/* ===== Evenementdetails (evenement.php) ===== */
.activiteiten .activiteit__preview {
  display: flex;
  line-height: 50px;
  margin: 0 -20px;
  padding: 0 10px 0 0;
  border-top: 1px solid #E7EEF0;
}
.activiteiten .activiteit__preview .leeg {
  padding-left: 20px;
  color: rgba(0, 0, 0, 0.3);
}
.activiteiten .activiteit__preview .locatie,
.activiteiten .activiteit__preview .prijs {
  display: none;
}
@media (min-width: 900px) {
  .activiteiten .activiteit__preview .locatie,
.activiteiten .activiteit__preview .prijs {
    display: block;
  }
}
.activiteiten .activiteit__preview .pijl,
.activiteiten .activiteit__preview .tijden,
.activiteiten .activiteit__preview .activiteit,
.activiteiten .activiteit__preview .locatie,
.activiteiten .activiteit__preview .bewerken,
.activiteiten .activiteit__preview .prijs {
  flex: 100% 1 1;
  position: relative;
  box-sizing: border-box;
}
.activiteiten .activiteit__preview .pijl,
.activiteiten .activiteit__preview .bewerken,
.activiteiten .activiteit__preview .order {
  flex: 50px 0 0;
  text-align: center;
}
.activiteiten .activiteit__preview .bewerken {
  margin-left: 10px;
}
.activiteiten .activiteit__preview .bewerken a {
  display: block;
}
.activiteiten .activiteit__preview .order {
  flex: 20px 0 0;
  cursor: pointer;
}
.activiteiten .activiteit__preview .order a {
  display: block;
}
.activiteiten .activiteit__preview .tijden {
  flex: 120px 0 0;
}
.activiteiten .activiteit__preview .prijs {
  text-align: right;
}
.activiteiten .activiteit__preview:first-child {
  margin-top: -20px;
  border-top: none;
}
.activiteiten .activiteit__preview .pijl {
  cursor: pointer;
}
.activiteiten .activiteit__preview .pijl i {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.activiteiten .activiteit__preview.open .pijl i {
  transform: rotate(90deg);
}
.activiteiten .activiteit__details {
  display: none;
  margin: 0 -20px;
  min-height: 0;
  position: relative;
  padding: 10px 50px;
  font-size: 14px;
  line-height: 26px;
  box-sizing: border-box;
}
.activiteiten .activiteit__details table {
  width: 100%;
  line-height: 22px;
}
.activiteiten .activiteit__details table .prijs {
  text-align: right;
}
.activiteiten .activiteit__details table .bijzonderheden {
  font-style: italic;
}
.activiteiten .activiteit__toevoegen {
  display: block;
  margin: 0 -20px -20px;
  padding: 0 20px;
  line-height: 50px;
  border-top: 1px solid #E7EEF0;
}
.activiteiten .activiteit__toevoegen:hover {
  text-decoration: none;
}
.activiteiten .activiteit__toevoegen i {
  margin-right: 20px;
}

.errorArea {
  display: none;
  padding: 10px;
  border-radius: 5px;
  background: rgba(231, 76, 60, 0.2);
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 10px;
}
.errorArea ul {
  list-style-type: disc;
  margin-left: 20px;
}
.errorArea ul li .foutief {
  color: #000000;
}

code {
  display: inline-block;
  background: rgba(51, 51, 51, 0.1);
  padding: 0 4px;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  font-size: 14px;
}
code.positive {
  color: #27AE60;
  background: rgba(39, 174, 96, 0.1);
}
code.negative {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
}

.support__validatie tr td,
.support__validatie tr th {
  padding: 5px 10px;
}
.support__validatie th {
  text-align: left;
  font-weight: bold;
}
.support__validatie .support__header {
  background: rgba(37, 128, 195, 0.2);
}
.support__validatie .support__prices {
  border-top: 1px solid #E7EEF0;
}
.support__validatie .support__prices td {
  border-bottom: 1px solid #E7EEF0;
}

/* ===== Evenementarrangement ===== */
.evenementarrangementengroep {
  margin-bottom: 16px;
}
.evenementarrangementengroep .evenementarrangementen {
  display: flex;
  flex-direction: column;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement {
  border-bottom: 1px solid #E7EEF0;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement:first-child {
  border-top: 1px solid #E7EEF0;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_header {
  display: flex;
  gap: 24px;
}
@media (max-width: 599px) {
  .evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_header {
    flex-direction: column;
    gap: 4px;
  }
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_header .ea_label {
  flex: 50% 1 1;
  display: flex;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_header .ea_berekening {
  flex: 50% 1 1;
  display: none;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_header .ea_berekening .evenementarrangement_berekening_display,
.evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_header .ea_berekening .evenementarrangement_totaal {
  text-align: right;
}
@media (max-width: 599px) {
  .evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_header .ea_berekening .evenementarrangement_berekening_display,
.evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_header .ea_berekening .evenementarrangement_totaal {
    text-align: left;
  }
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_header .ea_berekening .evenementarrangement_berekening_display {
  flex: 100% 1 1;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_header .ea_berekening .evenementarrangement_totaal {
  flex: 100px 0 0;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_header .ea_edit {
  display: none;
  flex: 30px 0 0;
  text-align: center;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_header .ea_edit a {
  display: block;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_header .ea_edit a:hover {
  color: #2580C3;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_description {
  display: none;
  padding-left: 20px;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement .evenementarrangement_description textarea {
  padding: 4px 8px;
  min-height: unset;
  height: auto;
  margin-bottom: 0;
  color: #333333;
  font-size: 13px;
  line-height: 24px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid #E7EEF0;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement.evenementarrangement_custom .evenementarrangement_description {
  padding-left: 0;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement.active .ea_berekening {
  display: flex;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement.active .ea_edit {
  display: block;
}
.evenementarrangementengroep .evenementarrangementen .evenementarrangement.active .evenementarrangement_description {
  display: block;
}

.admin__header .admin__header__link {
  position: absolute;
  right: 20px;
  top: 10px;
}

/* ===== Logboek ===== */
.addLogboek {
  display: none;
  margin: -20px -20px 30px -20px;
  border-bottom: 1px solid #E7EEF0;
  padding: 20px;
}
.addLogboek label {
  font-size: 12px;
}

.logboek {
  position: relative;
  font-size: 12px;
}
.logboek .lijn {
  z-index: 1;
  position: absolute;
  left: 14px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background-color: #E7EEF0;
}
.logboek .rij {
  position: relative;
  z-index: 100;
  min-height: 20px;
  line-height: 20px;
  width: 100%;
  display: block;
  clear: both;
  margin-bottom: 5px;
  overflow: hidden;
}
.logboek .rij.hascontent {
  cursor: pointer;
}
.logboek .rij.notitie .activiteit {
  color: #E67E22;
  font-weight: bold;
}
.logboek .rij .datum,
.logboek .rij .activiteit,
.logboek .rij .indicator {
  vertical-align: top;
  display: table-cell;
}
.logboek .rij .indicator {
  width: 30px;
}
.logboek .rij .indicator .bullet {
  margin: 3px auto;
  width: 10px;
  height: 10px;
  display: block;
  border: 2px solid #2580C3;
  border-radius: 10px;
  background: #fff;
}
.logboek .rij .indicator .bullet.full {
  background: #2580C3;
}
.logboek .rij .datum {
  width: 50px;
  font-weight: 700;
}
.logboek .rij .activiteit {
  width: auto;
}
.logboek .rij .activiteit .sub {
  opacity: 0.4; /* 310-40-20-5 */
}
.logboek .details {
  display: none;
  margin-left: 75px;
  width: auto;
  background: rgba(58, 152, 253, 0.2);
  padding: 5px 10px;
  margin-bottom: 20px;
  z-index: 2;
  position: relative;
  box-sizing: border-box;
}
.logboek.breed .rij .datum {
  width: 100px;
}
.logboek.breed .rij .tijd {
  display: table-cell;
  width: 60px;
}

/* ===== listView ===== */
.listView .monthName {
  padding: 10px 20px;
  background: #E7EEF0;
  font-weight: bold;
}
.listView .noResults {
  padding: 10px 20px;
  border-bottom: 1px solid #E7EEF0;
  color: #ADADAD;
}
.listView.listEvents a {
  flex-wrap: wrap;
}
.listView.listEvents a span {
  position: relative;
}
.listView.listEvents a span.datum {
  flex: 130px 0 0;
}
.listView.listEvents a span.datumTijd {
  flex: 100px 0 0;
}
.listView.listEvents a span.klant {
  flex: 100% 1 1;
  font-weight: bold;
}
.listView.listEvents a span.reserveringsnummer {
  flex: 200px 1 1;
  color: rgba(51, 51, 51, 0.3);
  text-align: right;
}
.listView.listEvents a span.opvulling {
  flex: 230px 0 0;
}
.listView.listEvents a span.omschrijving {
  flex: 30% 1 1;
}
.listView.listEvents a span.locaties {
  flex: 70% 1 1;
}

/* Responsive */
@media only screen and (max-width: 1024px) {
  .listView.listEvents .listviewRow {
    flex-wrap: wrap;
  }
  .listView.listEvents a span.datum {
    flex: 50% 1 1;
  }
  .listView.listEvents a span.datumTijd {
    flex: 50% 1 1;
  }
  .listView.listEvents a span.klant {
    flex: 100% 1 1;
  }
  .listView.listEvents a span.opvulling {
    display: none;
  }
  .listView.listEvents a span.omschrijving {
    flex: 50% 1 1;
  }
  .listView.listEvents a span.locaties {
    flex: 50% 1 1;
  }
}
/* ===== Upcoming ===== */
section.pb-0 {
  padding-bottom: 0;
}
section.upcoming {
  padding-bottom: 0;
}
section.upcoming div.item {
  min-height: 40px;
  line-height: 40px;
  margin: 0 -20px 0;
  padding: 0 20px;
  border-bottom: 1px solid #E7EEF0;
}
section.upcoming div.item:nth-child(2) {
  margin-top: -20px;
}
section.upcoming div.item > span {
  margin-right: 20px;
}
section.upcoming div.item a {
  background: #3A98FD;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 30px;
  padding: 0px 30px;
  float: right;
  border-radius: 3px;
  text-decoration: none;
  margin-top: 5px;
}
section.upcoming div.item a.nieuw {
  background: #66CD2E;
}
section.upcoming div.item a.nieuw:hover {
  background: #5BB728;
}
section.upcoming div.item.monthName {
  margin-top: 40px;
  text-align: left;
  font-weight: 500;
  border-bottom: 1px solid #D1D1D1;
}
section.upcoming div.item.inactief {
  background: #F4F8F9;
  color: #999;
}
section.upcoming div.item.cancelled {
  background: #F4F8F9;
  color: #999;
}

/* ===== Melding ===== */
.inline__melding {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  color: #e67e22;
  background: rgba(230, 126, 34, 0.1);
  border: 1px solid #e67e22;
  margin-bottom: 10px;
  font-size: 0.9em;
}
.inline__melding.positive {
  color: #2580c3;
  background: rgba(37, 128, 195, 0.1);
  border: 1px solid #2580c3;
}
.inline__melding.block {
  display: block;
}

.melding {
  display: block;
  border-radius: 4px;
  padding: 16px 16px 0 16px;
  font-size: 14px;
  margin-bottom: 16px;
}
.melding.positive {
  background: rgba(37, 128, 195, 0.1);
  border: 1px solid #2580c3;
}
.melding.negative {
  background: rgba(230, 126, 34, 0.1);
  border: 1px solid #e67e22;
}

.inline_content {
  background: #ffffff;
  padding: 16px;
  color: #000000;
}

/* ===== Logo form ===== */
.addition {
  display: block;
  font-size: 0.8em;
  opacity: 0.8;
  margin-bottom: 10px;
}

/* Toggle Switch */
.switchRow {
  display: flex;
  border-bottom: 1px solid #E7EEF0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.switchRow:hover {
  background: rgba(231, 238, 240, 0.4);
}
.switchRow .switchCell {
  flex: 100% 1 1;
}
.switchRow .switchIcon {
  flex: 50px 0 0;
  text-align: center;
  padding-top: 13px;
}
.switchRow .switchIcon i {
  font-size: 20px;
}
.switchRow .switchText {
  padding-top: 13px;
  padding-bottom: 13px;
}
.switchRow .switchFeedback {
  padding-top: 13px;
  flex: 40px 0 0;
  text-align: center;
}
.switchRow .switchFeedback i.fa-check {
  color: #27AE60;
}
.switchRow .switchFeedback i.fa-times {
  color: #e67e22;
}
.switchRow .switchSwitch {
  flex: 60px 0 0;
  padding-top: 8px;
  padding-right: 8px;
}

label.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
label.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.offerte_tekst_groep_placeholder,
.bevestiging_tekst_groep_placeholder {
  display: block;
  background: #F4F4F5;
  color: rgba(0, 0, 0, 0.4);
  padding: 5px;
  border-radius: 5px;
  text-align: center;
}

/* ===== Dagoverzicht locatie ===== */
.dayCalendar {
  display: flex;
}
.dayCalendar .dcLabel,
.dayCalendar .dcOverview {
  padding-bottom: 20px;
}
.dayCalendar .dcLabel {
  flex: 200px 0 0;
}
.dayCalendar .dcLabel .dcRow {
  border-right: 1px solid rgba(51, 51, 51, 0.5);
}
.dayCalendar .dcOverview {
  flex: 100% 1 1;
  overflow-x: auto;
  position: relative;
}
.dayCalendar .dcOverview .dcIndicator {
  position: absolute;
  width: 1px;
  background: red;
  top: 30px;
  bottom: 10px;
  z-index: 1000;
}
.dayCalendar .dcOverview .dcRow {
  width: 2600px;
  flex: 2600px 0 0;
  display: flex;
  position: relative;
}
.dayCalendar .dcOverview .dcRow .dcCell {
  flex: 100px 0 0;
  text-align: center;
  border-right: 1px solid #E7EEF0;
}
.dayCalendar .dcOverview .dcRow.dcHeader .dcCell {
  position: relative;
  border-right: 1px solid transparent;
}
.dayCalendar .dcOverview .dcRow.dcHeader .dcCell:first-child {
  opacity: 0;
}
.dayCalendar .dcOverview .dcRow.dcHeader .dcHour {
  position: absolute;
  left: 0;
  transform: translate(-50%, 0);
  font-size: 14px;
  color: rgba(51, 51, 51, 0.4);
}
.dayCalendar .dcOverview .dcRow a {
  position: absolute;
  top: 1px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  line-height: 38px;
  border-radius: 5px;
  padding: 0 10px;
  text-decoration: none;
  font-size: 13px;
}
.dayCalendar .dcRow {
  height: 40px;
  border-bottom: 1px solid #E7EEF0;
}
.dayCalendar .dcRow.hover {
  background: #F4F4F5;
}
.dayCalendar .dcCell {
  padding: 5px 10px;
  box-sizing: border-box;
}
.dayCalendar .dcLabel .dcCell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

/* ===== Einde Dagoverzicht locatie ===== */
.progress {
  width: 100%;
  height: 16px;
  border-radius: 8px;
  background: #E7EEF0;
  margin-bottom: 10px;
  overflow: hidden;
  display: flex;
}
.progress > div {
  display: inline-block;
  height: 16px;
  margin: 0;
  border-right: 2px solid #ffffff;
}
.progress > div:last-child {
  border-right: none;
}
.progress .done {
  background: #2a8751;
}
.progress .option {
  background: repeating-linear-gradient(-45deg, #2580C3, #2580C3 8px, #82BEEA 8px, #82BEEA 16px);
}
.progress .comming {
  background: repeating-linear-gradient(-45deg, #2a8751, #2a8751 8px, #8EC7A6 8px, #8EC7A6 16px);
}

.progressDetails {
  display: flex;
}
.progressDetails > div {
  flex: 50% 1 1;
}
.progressDetails > div:last-child {
  text-align: right;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.obv_gasten,
.obv_variabel {
  padding-left: 20px;
}

.obv_variabel input {
  width: 100%;
}

.evenement__rapportage {
  display: flex;
  margin-bottom: 20px;
}
.evenement__rapportage .rapportage__tile {
  flex: 50% 0 0;
}
.evenement__rapportage .rapportage__tile .rapportage__title {
  color: rgba(51, 51, 51, 0.5);
  margin-bottom: 10px;
}
.evenement__rapportage .rapportage__tile .rapportage__amount {
  font-size: 20px;
  font-weight: bold;
}

#popupSwitch .listItem {
  cursor: pointer;
}

#orderList {
  list-style-type: none;
  margin-left: 0;
}
#orderList li {
  background: #ffffff;
  border-radius: 4px;
  padding: 4px 10px;
  margin-bottom: 4px;
  cursor: grab;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#orderList li:hover {
  border: 1px solid #2580C3;
}
#orderList li.ui-sortable.helper {
  background: red;
}

.files .file {
  border: 1px solid #e7eef0;
  border-radius: 4px;
  display: flex;
  padding: 0 8px 0 16px;
  margin-bottom: 4px;
}
.files .file:hover {
  background: rgba(37, 128, 195, 0.1);
}
.files .file .file__link {
  flex: 100% 1 1;
  display: flex;
  text-decoration: none;
}
.files .file .file__icon {
  flex: 20px 1 1;
}
.files .file .file__icon,
.files .file .file__title,
.files .file .file__meta {
  margin-right: 8px;
  padding: 8px 0;
}
.files .file .file__title {
  flex: 50% 1 1;
}
.files .file .file__title a {
  text-decoration: none;
}
.files .file .file__action {
  flex: none;
  padding: 4px 0;
}
.files .file .file__action a {
  display: inline-block;
  background: rgba(37, 128, 195, 0.05);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.files .file .file__meta {
  display: flex;
  flex: 50% 1 1;
}
.files .file .file__meta > div {
  flex: 100% 1 1;
  text-align: right;
  margin-right: 16px;
  color: rgba(51, 51, 51, 0.5);
}

/* File upload */
.fileUpload label {
  width: unset;
}
.fileUpload input {
  display: block;
}
.fileUpload input[type=file] {
  padding: 4px;
}

/* ----- Navbar ----- */
.tabbar {
  /* Horizontal scroll in tabbar */
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  flex: fit-content 1 1;
  display: flex;
}
.tabbar::-webkit-scrollbar {
  display: none;
}
.tabbar ul {
  margin-left: unset;
  list-style-type: none;
}
.tabbar ul li {
  display: inline-block;
  margin-right: 8px;
}
.tabbar ul li.with_icon i {
  margin-right: 8px;
}
.tabbar ul li a {
  display: block;
  padding: 8px 4px;
  border-bottom: 4px solid transparent;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.6);
}
.tabbar ul li a:hover, .tabbar ul li a.active {
  color: rgb(0, 0, 0);
}
.tabbar ul li a:hover {
  border-color: #2580C3;
}
.tabbar ul li a.active {
  border-color: #2580C3;
}
.tabbar.flex-end {
  justify-content: end;
}

/* Deleted

.tabgroup {
  display:inline-block;
  border:1px solid $color-primary;
  border-radius:5px;
  background:#fff;

  @include dropShadow();

  a {
    display:inline-block;
    padding:5px 10px;
    border-right:1px solid $color-primary;
    text-decoration: none;
    margin:0;

    &:last-child {
      border-right:none;
    }

    &:hover {
      background: rgba($color-primary, 0.1);
      color: $color-primary;
    }

    &.active {
      background: $color-primary;
      color:#ffffff;
    }
  }

}

.settingsTabs {
  margin-top:10px;
  margin-bottom:20px;
  display:flex;
  border-bottom:2px solid rgba($color-border, 0.4);

  .settingsTab {
    padding:5px 10px;
    margin-bottom: -2px;
    cursor:pointer;

    &:hover {
      border-bottom:2px solid $color-primary;
    }

    &.active {
      border-bottom:2px solid $color-primary;
      font-weight:bold;

    }
  }

}
*/
/*
*   Dialog
*/
dialog {
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: auto;
  z-index: 100;
  padding: 32px;
  box-shadow: 0 0px 5.3px rgba(0, 0, 0, 0.02), 0 0px 17.9px rgba(0, 0, 0, 0.03), 0 0px 80px rgba(0, 0, 0, 0.05);
}
dialog h3 {
  color: #2580C3;
}
dialog .closeDialog {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 32px;
  background: none;
  z-index: 100;
}
dialog .closeDialog:focus {
  background: rgba(37, 128, 195, 0.05) !important;
  border: none !important;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
dialog.smallPopup {
  width: 400px;
}
dialog.bigPopup {
  width: 800px;
}
dialog .remove {
  display: block;
  font-size: 14px;
  text-align: center;
  color: #e74c3c;
}
dialog .remove:hover {
  color: #bf2718;
}

.cta_2 {
  display: block;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 8px;
}
.cta_2 i {
  margin-right: 16px;
}
.cta_2:hover {
  border-color: #2580C3;
  -moz-box-shadow: inset 0 0 3px rgba(37, 128, 195, 0.5);
  -webkit-box-shadow: inset 0 0 3px rgba(37, 128, 195, 0.5);
  box-shadow: inset 0 0 3px rgba(37, 128, 195, 0.5);
}
.cta_2:focus {
  margin-bottom: 7px;
}
.cta_2.current {
  border: 1px solid #2580C3;
}
.cta_2 .status {
  position: absolute;
  right: 16px;
  top: 10px;
}

/*
*   Form
*/
input[type=checkbox],
input[type=radio] {
  margin: unset;
  line-height: unset;
  cursor: pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
}
input[type=checkbox]:before,
input[type=radio]:before {
  font-family: "Font Awesome 6 Pro";
  display: inline-block;
  font-size: 14px;
  color: rgba(51, 51, 51, 0.6);
  cursor: pointer;
  padding-right: 8px;
}
input[type=checkbox]:checked:before,
input[type=radio]:checked:before {
  font-weight: 700;
  color: #2580C3;
}
input[type=checkbox]:hover:before,
input[type=radio]:hover:before {
  color: #2580C3;
}
input[type=checkbox]:disabled,
input[type=radio]:disabled {
  cursor: not-allowed;
}
input[type=checkbox]:disabled:before,
input[type=radio]:disabled:before {
  color: rgba(51, 51, 51, 0.3);
}

input[type=checkbox]:before {
  content: "\f0c8";
}
input[type=checkbox]:checked:before {
  content: "\f14a";
}

input[type=radio]:before {
  content: "\f111";
}
input[type=radio]:checked:before {
  content: "\f192";
}

.results_container {
  max-height: 200px;
  height: 200px;
  overflow: auto;
  padding: 8px 16px;
  background: #F4F4F5;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  border-radius: 4px;
}
.results_container .results {
  display: block;
}

.accordion .accordion__item {
  border: 1px solid rgba(37, 128, 195, 0.3);
  border-radius: 4px;
  margin-bottom: 16px;
}
.accordion .accordion__item .accordion__header {
  display: flex;
  justify-content: space-between;
  padding: 16px 24px;
  position: relative;
  border-bottom: 1px solid rgba(37, 128, 195, 0.3);
  text-decoration: none;
}
.accordion .accordion__item .accordion__header h3 {
  margin-bottom: unset;
  color: #2580C3;
}
.accordion .accordion__item .accordion__header .icon {
  text-align: center;
}
.accordion .accordion__item .accordion__header .icon i {
  transition: all 200ms ease;
}
.accordion .accordion__item .accordion__content {
  padding: 16px 24px;
}
.accordion .accordion__item.accordion__item_false {
  border-color: rgba(231, 76, 60, 0.3);
}
.accordion .accordion__item.accordion__item_false .accordion__header {
  border-color: rgba(231, 76, 60, 0.3);
  background: rgba(231, 76, 60, 0.1);
}
.accordion .accordion__item.accordion__item_false .accordion__header h3 {
  color: #e74c3c;
}
.accordion .accordion__item.accordion__item_true {
  border-color: rgba(39, 174, 96, 0.3);
}
.accordion .accordion__item.accordion__item_true .accordion__header {
  border-color: rgba(39, 174, 96, 0.3);
  background: rgba(39, 174, 96, 0.1);
}
.accordion .accordion__item.accordion__item_true .accordion__header h3 {
  color: #27AE60;
}
.accordion .accordion__item.close i {
  transform: rotate(45deg);
}
.accordion .accordion__item.close .accordion__header {
  border-bottom: 0;
}

/* To Do List */
.todo-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
  background: #ffffff;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 0px 5.3px rgba(0, 0, 0, 0.02), 0 0px 17.9px rgba(0, 0, 0, 0.03), 0 0px 80px rgba(0, 0, 0, 0.05);
}
.todo-list .todo-item {
  display: flex;
  border-radius: 4px;
  border-bottom: 1px solid #E7EEF0;
  padding: 8px 8px 8px 16px;
  gap: 8px;
  text-decoration: none;
}
.todo-list .todo-item:last-child {
  border-bottom: none;
}
.todo-list .todo-item .todo-item__right {
  flex: 100% 1 1;
}
.todo-list .todo-item .todo-item__label {
  display: inline-block;
  background: rgba(51, 51, 51, 0.1);
  border-radius: 4px;
  padding: 0 6px;
  line-height: 24px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}
.todo-list .todo-item .todo-item__label.date {
  background: #e67e22;
  color: #ffffff;
}
.todo-list .todo-item .todo-item__label.past {
  background: #e74c3c;
  color: #ffffff;
}
.todo-list .todo-item .todo-item__label.outline {
  background: none;
  border: 1px solid #e74c3c;
  color: #e74c3c;
}
.todo-list .todo-item .todo-item__label i {
  margin-right: 4px;
}
.todo-list .todo-item .todo-item__row {
  flex: 100% 1 1;
  display: flex;
  justify-content: space-between;
}
.todo-list .todo-item .todo-item__title {
  flex-basis: auto;
}
.todo-list .todo-item .todo-item__user {
  flex-basis: 1;
}
.todo-list .todo-item .todo-item__event {
  color: rgba(51, 51, 51, 0.5);
  font-size: 14px;
}
.todo-list .todo-item:hover {
  color: #2580C3;
}
.todo-list .geen-todo {
  padding: 8px 8px 8px 16px;
  color: rgba(51, 51, 51, 0.6);
}

.info {
  font-size: 14px;
}
.info i {
  color: rgba(51, 51, 51, 0.6);
}

.frmResponse {
  display: none;
  font-size: 14px;
  background: rgba(230, 126, 34, 0.1);
  border: 1px solid #e67e22;
  border-radius: 4px;
  padding: 8px 16px;
  margin-bottom: 16px;
}
.frmResponse h4 {
  margin-bottom: unset;
}

a.table-row:hover {
  background: rgba(37, 128, 195, 0.2);
}

.table {
  display: table;
  width: 100%;
}
.table.inline {
  display: inline-table;
  width: unset;
}
.table .table-row,
.table .table-head,
.table .table-footer {
  display: table-row;
  text-decoration: none;
}
.table .table-head .table-cell,
.table .table-footer .table-cell {
  font-weight: bold;
}
.table .table-cell {
  padding: 8px;
  display: table-cell;
  border-bottom: 1px solid #E7EEF0;
}
.table .table-cell:first-child {
  padding-left: 16px;
}
.table .table-cell:last-child {
  padding-right: 16px;
}
.table.zebra .table-row:nth-child(odd) {
  background: rgba(51, 51, 51, 0.03);
}
.table.zebra .table-cell:nth-child(odd) {
  background: rgba(51, 51, 51, 0.03);
}
.table.table-small-padding .table-cell {
  padding: 4px;
}
.table.table-hover .table-row:hover .table-cell {
  background: rgba(51, 51, 51, 0.1);
}

.tegel_jaar {
  border: 1px solid #D1D1D1;
  padding: 8px 16px 0;
  border-radius: 4px;
  margin-bottom: 4px;
}
.tegel_jaar:hover {
  border-color: #2580C3;
}
.tegel_jaar.open .tegel_jaar_header .tjh_icon i {
  rotate: 90deg;
}
.tegel_jaar .tegel_jaar_header {
  display: flex;
  gap: 8px;
  padding-bottom: 8px;
  text-decoration: none;
}
.tegel_jaar .tegel_jaar_header .tjh_icon {
  flex: 14px 0 0;
  text-align: center;
}
.tegel_jaar .tegel_jaar_header .tjh_icon i {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.tegel_jaar .tegel_jaar_header .tjh_row {
  flex: auto 1 1;
  display: flex;
}
.tegel_jaar .tegel_jaar_header .tjh_row .tjh_cell {
  flex: auto 1 1;
}
.tegel_jaar .tegel_jaar_content {
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: 1px solid #D1D1D1;
}

.ck-editor__editable {
  font-size: 14px;
}

.uitgelicht {
  background: rgba(37, 128, 195, 0.05);
  padding: 24px;
}

.editMode {
  outline: 1px solid #E7EEF0;
}

.connectMollie {
  padding: 14px;
  border-radius: 4px;
  line-height: 0;
  background: #0077FF;
  display: inline-flex;
}
.connectMollie:hover {
  background: #1463BE;
}

.connectMollie img {
  width: 172px;
}

.sortable-areas {
  max-width: 800px;
  display: flex;
  gap: 16px;
}
.sortable-areas .sortable-area {
  flex: 100% 1 1;
  padding: 16px 24px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  background: #F4F4F5;
}
.sortable-areas .ui-sortable {
  margin-left: 0;
  height: 100%;
  box-sizing: border-box;
  background: #ffffff;
  padding: 8px;
  border-radius: 8px;
}
.sortable-areas .ui-sortable li {
  border: 1px solid #D1D1D1;
  padding: 4px 8px;
  margin-bottom: 4px;
  border-radius: 4px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
  background: #ffffff;
}
.sortable-areas .ui-sortable li:hover {
  border-color: #2580C3;
}
.sortable-areas .ui-sortable .ui-state-highlight {
  border: 1px dashed #D1D1D1;
  background: rgba(37, 128, 195, 0.05);
}
.sortable-areas .ui-sortable .ui-sortable-helper {
  box-shadow: 0 0px 5.3px rgba(0, 0, 0, 0.02), 0 0px 17.9px rgba(0, 0, 0, 0.03), 0 0px 80px rgba(0, 0, 0, 0.05);
}
.sortable-areas .ui-sortable#sortable_selected li {
  border-color: green;
}
.sortable-areas .ui-sortable#sortable_selected li.ui-state-highlight {
  border: 1px dashed #D1D1D1;
}

.paginationContainer {
  margin: 0 -20px;
  background-color: #F4F4F5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.phRow {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
.phRow .phCell {
  display: flex;
  align-items: center;
}
.phRow .phCell a, .phRow .phCell h1, .phRow .phCell h2, .phRow .phCell h3 {
  margin-bottom: unset;
}

.mail_tile {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #E7EEF0;
  text-decoration: none;
  padding: 8px 16px;
}
.mail_tile:hover {
  background: rgba(37, 128, 195, 0.1);
}
.mail_tile .mail_tile_content {
  display: flex;
  flex-direction: column;
  flex: 100% 1 1;
}
.mail_tile .mail_tile_header {
  display: flex;
  justify-content: space-between;
}
.mail_tile .subject {
  font-weight: 700;
}

.recipient_status .fa-times-circle {
  color: #e74c3c;
}

#mailPreviewContent .from {
  line-height: 24px;
  margin-bottom: 8px;
}
#mailPreviewContent .subject {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
}
#mailPreviewContent .recipients {
  border-bottom: 1px solid #E7EEF0;
  margin-bottom: 16px;
}
#mailPreviewContent .recipients .row {
  margin-bottom: 0;
  border-top: 1px solid #E7EEF0;
  padding: 2px;
  font-size: 12px;
}
#mailPreviewContent .recipients .fa-clock {
  color: #e67e22;
}
#mailPreviewContent .recipients .fa-times-circle {
  color: #e74c3c;
}
#mailPreviewContent .recipients .fa-check-circle,
#mailPreviewContent .recipients .fa-check-double {
  color: #27AE60;
}
#mailPreviewContent .contentWrapper {
  display: flex;
  flex-direction: column;
}
#mailPreviewContent .content {
  background: #F4F4F5;
  padding: 16px;
  padding-bottom: 0;
  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  font-size: 12px;
  line-height: 16.8px;
}
#mailPreviewContent .attachments {
  margin-bottom: 4px;
  font-size: 12px;
  gap: 8px;
  display: inline-flex;
  flex-wrap: wrap;
  background: #F4F4F5;
  padding: 16px;
  padding-top: 0;
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
#mailPreviewContent .attachments div {
  display: inline-flex;
  border-radius: 8px;
  padding: 4px 8px;
  border: 1px solid #E7EEF0;
  line-height: 16.8px;
  gap: 4px;
  background: #ffffff;
}
#mailPreviewContent .attachments div i {
  line-height: 16.8px;
}
#mailPreviewContent .mailMeta {
  padding-left: 16px;
  font-size: 12px;
  display: flex;
  gap: 8px;
}

body:has(dialog[open]) {
  overflow: hidden;
}

/*# sourceMappingURL=dynamicStyle.css.map */