/* https://www.asciiart.eu/text-to-ascii-art */

/*   ___            _         ____ ____ ____   */
/*  / _ \ _   _  __| | ___   / ___/ ___/ ___|  */
/* | | | | | | |/ _` |/ _ \ | |   \___ \___ \  */
/* | |_| | |_| | (_| |  __/ | |___ ___) |__) | */
/*  \___/ \__,_|\__,_|\___|  \____|____/____/  */


.container {
  margin: 0 auto;
  padding: 5px;
}

.general-background {
  box-shadow: #555 0px 0px 3vw;
  padding: 3vw;
  padding-top: 5vw;
  margin: 0px auto;
  width: 85vw;
}

h2 {
  color: #129E99;
}

table {
  font-size: 1em;
}

table th {
  text-align: left;
}

table th.w50p {
  width: 50%;
}

table th.w20p {
  width: 20%;
}

table td {
  vertical-align: top;
}

table td.w45p {
  width: 45%;
}

.toel_note {
  width: 45%;
  float: left;
  padding: 15px 0px;
}

table.user_data {
  min-width: 300px;
  padding: 15px;
  border: 2px solid black;
}


/* question part */

table td.question {
  padding-bottom: 10px;
  padding-right: 30px;
}

form input.getalinvoer,
form select,
form input.textinvoer {
  margin: 5px 0px;
  width: 90%;
  padding: 5px;
}


table td div.previous {
  background-color: #fff;
  margin: 5px 5px;
  border: 1px solid grey;
  padding: 4px 5px;
  font-size: 1em;
}

table tr.optional,
table span.optional {
  color: #999;
}

/* table select.dropdown {
  margin: 5px 0px;
  width: 95%;
} */

.table_lastcolumn {
  padding-top: 5px;
  text-align: right;
}

.tr_autofield {
  color: grey;
}

.table_subtitle {
  border-top: 1px dotted rgb(223, 130, 68);
  padding-top: 20px;
  font-size: 1.2em;
  color: rgb(37, 56, 97);
  font-weight: bold;
}

.table_subtitle_description {
  padding-bottom: 20px;
  color: rgb(37, 56, 97);
}




.toel_hide,
.bandbreedte_hide {
  display: none;
}

.toel_color {
  border-bottom: 1px dotted #ccc;
}

.bandbreedte {
  font-size: 10px;
  color: red;
}

.opslaan_static:hover {
  cursor: pointer;
}

form .eenheid_wrapper {
  background-color: #fff;
  margin: 5px 0px;
  width: 90%;
  padding: 5px;
  font-size: 1em;
  text-align: right;
  display: inline-block;
  position: relative;
  border-radius: 8px;
  border: 1px solid var(--dark-color-shade-3, #E6E8F0);
  background: var(--4, #FFF);
}

form .eenheid_wrapper span {
  z-index: 1;
  margin-top: -20px;
  display: inline;
  position: absolute;
  top: 23px;
  right: 5px;
}

form .eenheid_wrapper .getalinvoer,
form .eenheid_wrapper .text {
  border: 0px;
  padding: 0;
  margin: 0;
  margin-top: 3px;
  width: 1%;
  min-width: 100%;
  float: left;
  z-index: 5;
  background: none;
}

form div.vooringevuld {
  border: 1px solid grey;
}

#save_success {
  position: fixed;
    top: 80px;
    margin: 0px auto;
    width: 70vw;
    background-color: #a9d5d3;
    color: #379e99;
    border: 1.5px solid #379e99;
    padding: 5px;
    z-index: 9999;
    border-radius: 5px;
    -webkit-transition: opacity 3s ease-in-out; 
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
    opacity: 1;
    -webkit-animation: cssAnimation 3s forwards; 
    animation: cssAnimation 3s forwards; 
    font-weight: 700;
    left: 15%;
}

@keyframes cssAnimation {
  0% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes cssAnimation {
  0% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.slidecontainer {
  width: 95%;
}

.table_subtitle_description.section_25 {
  font-size: 0.8em;
}




/* begin aan de nieuwe style */

/*   ____ _       _           _         ____ ____ ____   */
/*  / ___| | ___ | |__   __ _| | ___   / ___/ ___/ ___|  */
/* | |  _| |/ _ \| '_ \ / _` | |/ _ \ | |   \___ \___ \  */
/* | |_| | | (_) | |_) | (_| | |  __/ | |___ ___) |__) | */
/*  \____|_|\___/|_.__/ \__,_|_|\___|  \____|____/____/  */

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  color: #333;
  font-family: 'Nunito Sans', sans-serif !important;
  padding: 0vh 0vh;
  background-color: #00000000 !important;
}

html {
  background: radial-gradient(227.54% 143.18% at 101.7% 0%, #129E99 0%, #FFF 95.1%);
  height: 100%;
  background-attachment: fixed;
}

.achtergrond-sectie {
  border-radius: 24px;
  background: #ffffffcc;
  box-shadow: 0px 1.852px 3.148px 0px rgba(0, 0, 0, 0.02), 0px 100px 80px 0px rgba(0, 0, 0, 0.07);
  padding: 20px;
  margin-bottom: 20px;
}

.achtergrond-sectie form {
  width: 800px;
}

.achtergrond-sectie form input[type="submit"] {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1em;
  background-color: #129E99;
  color: white;
  font-weight: bold;
}

.achtergrond-sectie form input[type="text"] {
  width: 500px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1em;
}

.general-content {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--white, rgba(255, 255, 255, 0.80));
  width: 100%;
  overflow-x: auto;
}

.groene-knop {
  padding: 12px 25px;
  font-family: 'Nunito Sans', sans-serif;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid #17B1AC;
  background: var(--Primary-color, #129E99);
  box-shadow: 0px 8px 16px 0px rgba(18, 158, 153, 0.16), 0px 4px 6.8px 0px rgba(18, 158, 153, 0.25), 0px 0px 24.3px 0px rgba(18, 158, 153, 0.25);
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
  text-decoration: none;
}

.groene-knop:hover {
  background-color: #17B1AC;
  /* Iets lichtere kleur voor hover */
  box-shadow: 0px 4px 8px 0px rgba(18, 158, 153, 0.16), 0px 2px 3.4px 0px rgba(18, 158, 153, 0.25), 0px 0px 12.15px 0px rgba(18, 158, 153, 0.25);
  /* Subtielere schaduw */
}

.groene-knop:active {
  transform: scale(0.98);
  /* Kleine schaalverkleining voor het click-effect */
  box-shadow: 0px 2px 4px 0px rgba(18, 158, 153, 0.16);
  /* Nog subtielere schaduw */
}

.witte-knop {
  padding: 12px 25px;
  font-family: 'Nunito Sans', sans-serif;
  color: #129E99;
  border-radius: 5px;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid #fff;
  background: var(--Primary-color, #fff);
  box-shadow: 0px 8px 16px 0px rgba(18, 158, 153, 0.16), 0px 4px 6.8px 0px rgba(18, 158, 153, 0.25), 0px 0px 24.3px 0px rgba(18, 158, 153, 0.25);
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
  text-decoration: none;
}

.witte-knop:hover {
  background-color: #fff;
  /* Iets lichtere kleur voor hover */
  box-shadow: 0px 4px 8px 0px rgba(18, 158, 153, 0.16), 0px 2px 3.4px 0px rgba(18, 158, 153, 0.25), 0px 0px 12.15px 0px rgba(18, 158, 153, 0.25);
  /* Subtielere schaduw */
}

.witte-knop:active {
  transform: scale(0.98);
  /* Kleine schaalverkleining voor het click-effect */
  box-shadow: 0px 2px 4px 0px rgba(18, 158, 153, 0.16);
  /* Nog subtielere schaduw */
}

h1 {
  font-size: 36px !important;
  color: var(--Primary-color, #129E99)!important;
  margin: 10px 0px!important;
}

h2 {
  font-size: 20spx;
  color: #111F30;
  margin: 10px 0px;
}

h3 {
  margin: 0px;
}



.general-content tr td a {
  color: var(--Dark-color, #111F30);
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 16px;
  padding: 5px 0px;
  text-decoration: none;
}

.groene-link {
  color: #129E99;
  text-decoration: none;
}

.groen-tekstvak {
  border-color: #129E99;
  border-radius: 5px;
  max-width: 430px;
  height: 50px;

}

.dropdown {
  height: 44px;
  /* Hoogte van het dropdown-menu */
  font-size: 16px;
  color: #333;
  /* Tekstkleur in het dropdown-menu */
  border-radius: 8px;
  border: 1px solid var(--Primary-color, #129E99);
  background: var(--4, #FFF);
  margin: 0px;
}

.dropdown:hover {
  background-color: #e8e8e8;
  /* Achtergrondkleur bij hover */
}

.dropdown:focus {
  border-color: #129E99;
  /* Randkleur wanneer geselecteerd of in focus */
}

.forms-row {
  display: flex;
  margin: 10px;
  flex-direction: row;
  flex-wrap: wrap;
}

.inputform {
  width: 45%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  margin: 10px;
}

.buttonform {
  display: block;
  margin-bottom: 15px;
  width: 45%;
  padding: 0px 10px;
}

.knop {
  flex: 1;
  text-align: center;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.knop:hover {
  background-color: #e0e0e0;
}

/*  _   _                _            */
/* | | | | ___  __ _  __| | ___ _ __  */
/* | |_| |/ _ \/ _` |/ _` |/ _ \ '__| */
/* |  _  |  __/ (_| | (_| |  __/ |    */
/* |_| |_|\___|\__,_|\__,_|\___|_|    */

#header {
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 999;
  background: var(--Primary-white, #FFF);
  box-shadow: 0px 8px 16px 0px rgba(143, 149, 178, 0.15);
  color: #000000;
  width: 100vw;
  margin: 0 auto;
  padding: 0px 3vw;
}

#header .center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header .center .p_left,
.p_right {
  display: flex;
  align-items: center;
}

#header .p_left {
  float: left;
  margin: 0;
  padding: 0;
  display: flex;
}

#header .p_right {
  float: right;
  display: flex;
  margin: 0;
  padding: 0;
}

#header a:link,
#header a:visited {
  color: #000000;
}

#header a:hover {
  text-decoration: none;
}

#header .p_right .pill_left {
  padding: 10px;
  margin: 0 10px;
  border-radius: 50%;
  background: var(--color-primary-opacity-1, rgba(18, 158, 153, 0.05));
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  position: relative;
  /* display: inline-block; */
}

#header .p_right .pill_left::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  background-color: #f12f2f;
  border-radius: 50%;
  border: 1px solid white;
}
#header .p_right .message {
  width: 220px;
  display: none;
  background-color: #f9f9f9;
  color: #000;
  padding: 10px;
  margin-top: 5px;
  border-radius: 15px;
  position: absolute;
  top: 50px;
  right: 0px;
}
#header .p_right .pill_left:hover .message {
  display: block;
}

#header .p_right .pill_right {
  display: flex;
  align-items: center;
  border-radius: 32px;
  background: var(--color-primary-opacity-1, rgba(18, 158, 153, 0.05));
  min-width: 200px;
  width: auto;
  box-sizing: border-box;
  height: 50px;
  cursor: pointer;
  position: relative;
  /* Add this line */

}

#header .p_right .pill_right #usernameDropdown {
  width: auto;
  display: flex;
  align-items: center;
  margin: 0px 10px;
  z-index: 2;
}


#header .p_right .pill_right .icon-profile-pic {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  background-image: url('../images/profiel_invuller.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#header .p_right .pill_right span {
  white-space: nowrap;
}

#header .p_right .pill_right span .welkom {
  font-weight: 100;
}

#header .p_right .pill_right .username {
  text-transform: capitalize;
  font-weight: bold;
  color: #123657;
  margin: 0px;
  width: auto;
}

#header .p_right .pill_right .role {
  margin: 0px;
  font-size: 10px;
  color: #129E99;
  font-family: sans-serif;
}

.icon-down {
  display: inline-block;
  content: url('../images/icons/Chevron_down.svg');
  height: 24px;
  margin-left: 10px;
}


/* Style for the dropdown menu */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  min-width: 200px;
  box-shadow: 0px 20px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  top: 80%;
  border-radius: 0px 0px 20px 20px;
  overflow: hidden;
}

.dropdown-content.show {
  display: block;
}

#header .p_right .pill_right.show {
  border-radius: 20px 20px 0px 0px;
  background-color: #f9f9f9;
}


.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;

}


/*  ____  _     _      _                          ____             __ _ _        */
/* / ___|(_) __| | ___| |__   __ _ _ __          |  _ \ _ __ ___  / _(_) | ___   */
/* \___ \| |/ _` |/ _ \ '_ \ / _` | '__|  _____  | |_) | '__/ _ \| |_| | |/ _ \  */
/*  ___) | | (_| |  __/ |_) | (_| | |    |_____| |  __/| | | (_) |  _| | |  __/  */
/* |____/|_|\__,_|\___|_.__/ \__,_|_|            |_|   |_|  \___/|_| |_|_|\___|  */
.sidebar {
  width: 215px;
  height: 100%;
  /* Volledige hoogte */
  float: left;
  border-radius: 24px;
  background: var(--white, rgba(255, 255, 255, 0.40));
  backdrop-filter: blur(10px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 13px;
  display: flex;
}


.sidebar nav ul {
  width: 100%;
  list-style: none;
  padding: 0;
  padding-top: 10px;
  margin: 0;
}

.sidebar nav ul li {
  margin: 20px 0px;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  height: 52px;
  width: 200x;
}

.sidebar nav ul li::before {
  content: '';
  display: block;
  width: 3px;
  height: 52px;
  background-color: var(--Primary-color, #129E99);
  border-radius: 10px;
  position: absolute;
  left: 0;
  /* transition: opacity 0.3s; /* Smooth transition for the stripe */
  opacity: 0;
}

.sidebar nav ul li:hover::before {
  opacity: 1;
}

.sidebar nav ul li a {
  display: block;
  width: 100%;
  padding: 10px 15px;
  text-decoration: none;
  font-size: 16px;
  color: #000000;
}

.sidebar nav ul li:hover {
  opacity: 1;
  background: var(--white, rgba(255, 255, 255));
  color: #129E99;

}

.sidebar nav ul li:hover a {
  color: #129E99;

}

/* Active state styles */
.sidebar .active {
  background: var(--white, rgba(255, 255, 255));
  color: var(--Primary-color, #129E99);
}

.sidebar .active a {
  color: var(--Primary-color, #129E99);
}


.sidebar nav ul li.active::before {
  opacity: 1;
}

/* __     __                          _ _  _     _    */
/* \ \   / / __ __ _  __ _  ___ _ __ | (_)(_)___| |_  */
/*  \ \ / / '__/ _` |/ _` |/ _ \ '_ \| | || / __| __| */
/*   \ V /| | | (_| | (_| |  __/ | | | | || \__ \ |_  */
/*    \_/ |_|  \__,_|\__, |\___|_| |_|_|_|/ |___/\__| */
/*                   |___/              |__/          */

.questionnaire,
.export-button {
  padding-bottom: 18px;
}

.questionnaire .basic-info,
.export-button .basic-info {
  border-radius: 24px;
  background: #fffc;

  /* Light long */
  box-shadow: 0px 1.852px 3.148px 0px rgba(0, 0, 0, 0.02), 0px 100px 80px 0px rgba(0, 0, 0, 0.07);

  padding: 20px;

  color: var(--primary-color-shade-1, #65819B);
  font-feature-settings: 'clig' off, 'liga' off;

  /* Paragraph 400 */
  font-family: Nunito Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 133.333% */
}

.export-button .basic-info {
  width: 33%;
}

.questionnaire .basic-info .basic-info-header,
.questionnaire .basic-info .basic-info-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
  width: 100%;
}

.export-button .basic-info .basic-info-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
  width: 100%;
}

.export-button .basic-info .basic-info-header a:link,
.export-button .basic-info .basic-info-header a:visited {
  color: var(--Dark-color, #111F30);
  font-feature-settings: 'clig' off, 'liga' off;

  /* Paragraph 300 */
  font-family: Nunito Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
  text-decoration: none;
}

.questionnaire .basic-info .basic-info-header h4 {
  color: var(--Primary-color, #129E99);
  font-family: Nunito Sans;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 42px;
  /* 131.25% */
  padding: 0;
  margin: 0;
}

.questionnaire .basic-info .basic-info-link {
  padding-bottom: 15px;
  padding-top: 5px;
}

.questionnaire .basic-info .basic-info-card h5 {
  color: var(--Dark-color, #111F30);

  /* H5 */
  font-family: Nunito Sans;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  /* 133.333% */
  margin-bottom: 0;
  margin-top: 20px;
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--white, rgba(255, 255, 255, 0.80));
  width: 100%;
  overflow-x: auto;
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content table {
  width: 100%;
  border-collapse: collapse;
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr th {
  padding: 18px;
  color: var(--Primary-color, #129E99);
  font-feature-settings: 'clig' off, 'liga' off;

  /* Paragraph 300 */
  font-family: Nunito Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  /* 150% */
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td {
  padding: 18px;
  vertical-align: middle;
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.information_notes {
  padding: 18px;
  text-align: center;
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.border-left {
  position: relative;
  /* Nodig voor absolute positionering van het pseudo-element */
  padding: 0px;
  /*padding-right: 10px; /* Zorgt voor ruimte aan de rechterkant */
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.border-left::after {
  content: '';
  /* Nodig om het pseudo-element weer te geven */
  position: absolute;
  border-radius: 10px 0px 0px 10px;
  bottom: 0;
  right: 0;
  left: 15px;
  /*10px van de rechterkant van de cel */
  border-bottom: 3px solid #bfbfbf;
  /* De daadwerkelijke scheiding */
  width: auto;
  /* Zorgt ervoor dat de breedte automatisch wordt aangepast */
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.border {
  position: relative;
  /* Nodig voor absolute positionering van het pseudo-element */
  padding: 0px;
  /*padding-right: 10px; /* Zorgt voor ruimte aan de rechterkant */
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.border::after {
  content: '';
  /* Nodig om het pseudo-element weer te geven */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /*10px van de rechterkant van de cel */
  border-bottom: 3px solid #bfbfbf;
  /* De daadwerkelijke scheiding */
  width: auto;
  /* Zorgt ervoor dat de breedte automatisch wordt aangepast */
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.border-right {
  position: relative;
  /* Nodig voor absolute positionering van het pseudo-element */
  padding: 0px;
  /*padding-right: 10px; /* Zorgt voor ruimte aan de rechterkant */
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.border-right::after {
  content: '';
  /* Nodig om het pseudo-element weer te geven */
  position: absolute;
  border-radius: 0px 10px 10px 0px;
  bottom: 0;
  left: 0;
  right: 15px;
  /* 10px van de rechterkant van de cel */
  border-bottom: 3px solid #bfbfbf;
  /* De daadwerkelijke scheiding */
  width: auto;
  /* Zorgt ervoor dat de breedte automatisch wordt aangepast */

}



.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.page,
.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.page a:link,
.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.page a:visited {
  color: var(--Dark-color, #111F30);
  font-feature-settings: 'clig' off, 'liga' off;

  /* Paragraph 300 Bold */
  font-family: Nunito Sans;
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  /* 150% */
  text-decoration: none;
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.page .icode {
  font-size: 8px;
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.action {
  text-align: center;
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.description,
.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.progressbar,
.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.information_notes {
  color: var(--primary-color-shade-1, #65819B);
  font-feature-settings: 'clig' off, 'liga' off;
  background-color: #00000000;

  /* Paragraph 100 */
  font-family: Nunito Sans;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  /* 133.333% */
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.progressbar .progress-number .absolute {
  float: left;
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.progressbar .progress-number .relative {
  float: right;

  color: var(--Dark-color, #111F30);
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: Nunito Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  line-height: 24px;
  /* 150% */
}

/* Stijl voor de balkcontainer */
.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.progressbar .progress-bar {
  width: 100%;
  /* Breedte van de balk */
  height: 19px;
  /* Hoogte van de balk */
  border-radius: 15px;
  /* Afgeronde hoeken */
  overflow: hidden;
  /* Verberg de inhoud die buiten de balk valt */
}

/* Stijl voor de gevulde balk */
.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.progressbar .progress-bar-fill {
  height: 100%;
  /* Hoogte van de gevulde balk (100% van de ouderbalk) */
  border-radius: 15px;
  /* Afgeronde hoeken, overeenkomend met de ouderbalk */
}

.basic-info-card .selectYear {
  width: 100%;
  margin-top: 18px;
}

.basic-info-card .selectYear select {
  padding: 12px 25px;
}



.questionnaire .radio-container {
  display: flex;
  /* Zet dit op flex om de items naast elkaar te zetten */
  justify-content: center;
  /* Centreert de items horizontaal */
  flex-wrap: nowrap;
  /* Zorgt ervoor dat items naar een nieuwe regel gaan als ze niet passen */
}

.questionnaire .radio-container label {
  display: flex;
  /* Maakt het label ook een flex-container */
  flex-direction: column;
  /* Zet de items in het label (radio en tekst) boven elkaar */
  align-items: center;
  /* Centreert de items in het label verticaal */
  margin-right: 10px;
  /* Voegt wat ruimte toe tussen de labels */
}

.questionnaire .radio-container input[type="radio"] {
  margin-bottom: 5px;
  /* Voegt wat ruimte toe tussen de radio button en de tekst */
  accent-color: #129E99;

}

.questionnaire .radio-container label span {
  text-align: center;
  /* Centreert de tekst */
  word-wrap: break-word;
  /* Zorgt voor tekstterugloop binnen het element */
}


/*  __  __ _  _                          __ _      _                   _             _    */
/* |  \/  (_)(_)_ __    _ __  _ __ ___  / _(_) ___| |   ___ ___  _ __ | |_ ___ _ __ | |_  */
/* | |\/| | || | '_ \  | '_ \| '__/ _ \| |_| |/ _ \ |  / __/ _ \| '_ \| __/ _ \ '_ \| __| */
/* | |  | | || | | | | | |_) | | | (_) |  _| |  __/ | | (_| (_) | | | | ||  __/ | | | |_  */
/* |_|  |_|_|/ |_| |_| | .__/|_|  \___/|_| |_|\___|_|  \___\___/|_| |_|\__\___|_| |_|\__| */
/*         |__/        |_|                                                                */

.profile {
  margin-left: 200px;
  /* Maak ruimte voor de sidebar */
  padding-left: 40px;
  padding-top: 0px;
}

.profile .basic-info {
  background: var(--white, rgba(255, 255, 255, 0.40));
  border-radius: 24px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
}

.profile .basic-info h2 {
  margin-top: 0;
  margin-bottom: 0;
  color: #111F30;

}

/* Stijlen voor formulierelementen */
.profile .profile-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 1.2em;
  color: #333;
}

.profile .profile-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 10px 0px;
}


.profile .info-group {
  margin-bottom: 10px;
  display: flex;
  word-break: break-all;
}

.profile .info-group label {
  display: block;
  margin-bottom: 5px;
  width: 50%;
  color: var(--primary-color-shade-1, #65819B);
  font-feature-settings: 'clig' off, 'liga' off;
}

.profile .info-group label p {
  color: var(--Dark-color, #172638);
  font-feature-settings: 'clig' off, 'liga' off;
  margin: 0;
  font-weight: bold;
}


.profile .info-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1em;
}

/* Style for the block below the section */
.succes_message {
  opacity: 0;
  width: 80%;
  height: 40px;
  border-radius: 0px 0px 16px 16px;
  background: var(--color-primary-opacity-3, rgba(18, 158, 153, 0.50));
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: left;
  line-height: 40px;
  top: 100%;
  padding: 0px 15px;
  transition: opacity 1s;
  /* Add a 1-second transition for the display property */

}

/* Style for the text inside the block */
.succes_message p {
  color: white;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}





.edit-profile {
  max-width: 100%;
}

.edit-profile .titel {
  background-color: #129e992e;
  padding: 10px 20px;
}

.edit-profile .titel h2 {
  color: #129e99;
}

#editform {
  width: 100%;
}

.form-row {
  display: flex;
  margin: 10px;
}

.form-group {
  display: block;
  margin-bottom: 15px;
  width: 50%;
  padding: 0px 10px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="functie"],
.form-group input[type="resetemail"],
.form-group input[type="tel"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
}

.form-group input[type="button"] {
  float: right;
}

.form-group input[type="submit"],
.basic-info-card .selectYear input[type="submit"] {
  float: right;
}

form button {
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary-opacity-2, rgba(18, 158, 153, 0.10));
  color: var(--Accent-color, #2E7380);
  cursor: pointer;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: bold;
  font-size: 14px;
}



/*  __  __           _       _  */
/* |  \/  | ___   __| | __ _| | */
/* | |\/| |/ _ \ / _` |/ _` | | */
/* | |  | | (_) | (_| | (_| | | */
/* |_|  |_|\___/ \__,_|\__,_|_| */

.modal-html {
  background: #fefefe;
}

.modal-html body {
  margin: 0px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content-iframe {
  position: fixed;
  background-color: #fefefe;
  margin: 0px auto 0px auto;
  padding: 0;
  border: 1px solid #888;
  width: 70%;
  max-width: 800px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 32px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* The Close Button */
.close {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#editProfileFrame {
  width: 100%;
  height: 75vh;
  max-height: 620px;
  border: none;
  border-radius: 32px;
}

#editProfileFrameNoOrg {
  width: 100%;
  height: 75vh;
  max-height: 620px;
  border: none;
  border-radius: 32px;
}

/*  ___                     */
/* |_ _|___ ___  _ __  ___  */
/*  | |/ __/ _ \| '_ \/ __| */
/*  | | (_| (_) | | | \__ \ */
/* |___\___\___/|_| |_|___/ */

.icon-profile:before {
  content: url('../images/icons/bx_bx-user.svg');
  margin-right: 8px;
  vertical-align: middle;
}


.icon-right {
  content: url('../images/icons/right_button.svg');
  margin-right: 8px;
  vertical-align: middle;
  filter: invert(37%) sepia(90%) saturate(3896%) hue-rotate(156deg) brightness(97%) contrast(101%);
}


.icon-settings:before {
  content: url('../images/icons/setting.svg');
  margin-right: 8px;
  vertical-align: middle;
}

.icon-help:before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('../images/icons/cowbell\ 1.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-logo-mini-paars:before {
  display: inline-block;
  content: url('../images/icons/logo_mini_paars.svg');
  vertical-align: middle;
  margin-right: 15px;
  height: 24px;
}



/* Active state icon styles */
.sidebar .active .icon-profile:before {
  filter: invert(37%) sepia(90%) saturate(3896%) hue-rotate(156deg) brightness(97%) contrast(101%);
}

.sidebar nav ul li:hover .icon-settings:before {
  filter: invert(37%) sepia(90%) saturate(3896%) hue-rotate(156deg) brightness(97%) contrast(101%) !important;
}


/*  _                _        */
/* | |    ___   __ _(_)_ __   */
/* | |   / _ \ / _` | | '_ \  */
/* | |__| (_) | (_| | | | | | */
/* |_____\___/ \__, |_|_| |_| */
/*             |___/          */
/* BF toegevoegd */

.login {
  border-radius: 25px;
  background: url('../images/login.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 15vh;
}

.login section {
  width: 50%;
  background-color: #FFF;
  border-radius: 25px 0px 0px 25px;
  padding: 50px 50px 100px 50px;
  box-shadow: 1.057px 1.52px 3.148px 0px rgba(0, 0, 0, 0.02), 4.652px 6.689px 6.519px 0px rgba(0, 0, 0, 0.03), 11.42px 16.419px 13px 0px rgba(0, 0, 0, 0.04), 21.993px 31.622px 25.481px 0px rgba(0, 0, 0, 0.04), 37.008px 53.211px 46.852px 0px rgba(0, 0, 0, 0.05), 57.098px 82.097px 80px 0px rgba(0, 0, 0, 0.07);
}

.login h1 {
  font-size: 34px;
  color: var(--Primary-color, #129E99);
  margin-bottom: 10px;
}

.login div p {
  font-weight: 600;
}

.login div p a {
  font-weight: 100;
}

.login h2 {
  font-size: 30px;
  color: #111F30;
  margin: 10px;
  margin-left: 0px;
}

.login .inlogForm .form-group {
  width: 100%;
  padding-left: 0px;
  max-width: 450px;
}

.login .inlogForm .form-group input {
  width: 100%;
}

.login .inlogForm .form-group a:link,
.login .inlogForm .form-group a:visited {
  color: #129E99;
  text-decoration: none;
}

.login .inlogForm .form-group a:hover {
  color: #123657;
}

.login .form-row {
  margin-left: 0px;
}

/* _  __                             _                         
| |/ /___ _   _ _______   ___  ___| |__   ___ _ __ _ __ ___  
| ' // _ \ | | |_  / _ \ / __|/ __| '_ \ / _ \ '__| '_ ` _ \ 
| . \  __/ |_| |/ /  __/ \__ \ (__| | | |  __/ |  | | | | | |
|_|\_\___|\__,_/___\___| |___/\___|_| |_|\___|_|  |_| |_| |_| */


.keuzescherm {
  border-radius: 25px;
  /* background: url('images/login.png'); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 15vh;
}

.keuzescherm section {
  background-color: #ffffffcc;
  border-radius: 25px 25px;
  padding: 50px 50px 50px 50px;
  box-shadow: 1.057px 1.52px 3.148px 0px rgba(0, 0, 0, 0.02), 4.652px 6.689px 6.519px 0px rgba(0, 0, 0, 0.03), 11.42px 16.419px 13px 0px rgba(0, 0, 0, 0.04), 21.993px 31.622px 25.481px 0px rgba(0, 0, 0, 0.04), 37.008px 53.211px 46.852px 0px rgba(0, 0, 0, 0.05), 57.098px 82.097px 80px 0px rgba(0, 0, 0, 0.07);
}


.keuzescherm .dashboard-card {
  background-color: #fff;
  border-radius: 15px;
  text-align: left;
  padding: 10px;
  border-color: #3AB1AD;
  padding-left: 8px;
  padding-right: 8px;
  box-shadow: 2px 3px 6px -3px #00000075;
}

.keuzescherm .dashboard-card p {
  text-decoration: none;
  color: #000;
}

.keuzescherm .dashboard-card h5 {
  text-decoration: none;
  color: #000;
}

.keuzescherm .vragenlijst-card {
  background-color: #3AB1AD;
  border-radius: 15px;
  text-align: left;
  padding: 10px;
  border-color: #fff;
  padding-left: 8px;
  padding-right: 8px;
  box-shadow: 2px 3px 6px -3px #00000075;
}

.keuzescherm .vragenlijst-card p {
  text-decoration: none;
  color: #fff;
}

.keuzescherm .vragenlijst-card h5 {
  text-decoration: none;
  color: #fff;
}


/*  _   _                                                        
/* | | | |___  ___ _ __                                           */
/* | | | / __|/ _ \ '__|                                          */
/* | |_| \__ \  __/ |                                             */
/* \___/|___/\___|_|                                        _     */
/* |  \/  | __ _ _ __   __ _  __ _  ___ _ __ ___   ___ _ __ | |_  */
/* | |\/| |/ _` | '_ \ / _` |/ _` |/ _ \ '_ ` _ \ / _ \ '_ \| __| */
/* | |  | | (_| | | | | (_| | (_| |  __/ | | | | |  __/ | | | |_  */
/* |_|  |_|\__,_|_| |_|\__,_|\__, |\___|_| |_| |_|\___|_| |_|\__| */
/*                           |___/                                */

.usermanagement {
  margin-left: 200px;
  /* Maak ruimte voor de sidebar */
  padding-left: 40px;
  padding-top: 0px;
}

.usermanagement .basic-info {
  background: var(--white, rgba(255, 255, 255, 0.40));
  backdrop-filter: blur(10px);
  border-radius: 24px;
  margin-bottom: 20px;
  padding-bottom: 30px;
}

.usermanagement .basic-info h2 {
  margin-top: 0;
  margin-bottom: 0;
  color: #111F30;

}

.usermanagement .frame {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}


.usermanagement ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.usermanagement ul li {
  display: flex;
  width: 100%;
  min-height: 110px;
  align-items: center;
  gap: 12px;
}

.usermanagement li:nth-child(odd) {
  background: var(--white, rgba(255, 255, 255, 0.80));
}


.usermanagement .user_info {
  padding-left: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  width: 87%;
}

.usermanagement .user_name_func {
  display: flex;
  width: 19%;
  height: 30px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
}

.usermanagement .user_name {
  display: flex;
  width: 100%;
  height: 13px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;

  color: var(--Secondary-color, #123657);
  font-feature-settings: 'clig' off, 'liga' off;
  /* Paragraph 300 Bold */
  font-family: Nunito Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  /* 150% */
}

.usermanagement .user_func {
  width: 19%;
  height: 10px;
  flex-shrink: 0;

  color: var(--primary-color-shade-1, #65819B);
  font-feature-settings: 'clig' off, 'liga' off;

  /* Paragraph 100 */
  font-family: Nunito Sans;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  /* 133.333% */
}

.usermanagement .user_email {
  display: flex;
  width: 27%;
  height: 12px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  word-break: break-all;
  color: var(--primary-color-shade-1, #65819B);
  font-feature-settings: 'clig' off, 'liga' off;

  /* Paragraph 200 */
  font-family: Nunito Sans;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
}

.usermanagement .user_vragenlijsten {
  display: flex;
  width: 46%;
  flex-direction: column;
}

.usermanagement .grid-container-vragenlijst {
  display: grid;
  justify-items: start;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  width: 46%;
  margin: 5px auto;
  gap: 5px 10px;
  justify-content: space-between;
}


.usermanagement .grid-container-vragenlijst.center-items {
  justify-content: center;
}


.usermanagement .grid-item-vragenlijst {
  width: 100%;
  height: 30px;
  border-radius: 8px;
  background: #129E99;
  color: var(--Secondary-color, #ffffff);
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 14px;
  font-style: normal;
  font-weight: 100;
  line-height: 30px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 5px;
}

.usermanagement .grid-item-vragenlijst p{
margin-bottom: 0px;
}

.usermanagement .quest_limited {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usermanagement .user_acties {
  display: flex;
  align-items: center;
  gap: 20px;
}

.usermanagement .user_edit {
  display: flex;
  width: 24px;
  height: 24px;
  position: relative;
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0px;
}

.usermanagement .header {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  width: 100%;
  padding: 0px;
  background: var(--color-primary-opacity-2, rgba(18, 158, 153, 0.20));
}

.usermanagement .header_gebr_label {
  display: flex;
  width: 15%;
  height: 12px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 14px;

  color: var(--secondary-color-shade-7, #ffffff);
  font-feature-settings: 'clig' off, 'liga' off;
  /* Paragraph 200 */
  font-family: Nunito Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
}

.usermanagement .header_gebr_img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.usermanagement .header_email {
  display: flex;
  width: 22%;
  height: 12px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;

  color: var(--secondary-color-shade-7, #ffffff);
  font-feature-settings: 'clig' off, 'liga' off;
  /* Paragraph 200 */
  font-family: Nunito Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
}

.usermanagement .header_vragenlijsten {
  display: flex;
  width: 45%;
  height: 12px;
  transform: rotate(-0.181deg);
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;

  color: var(--secondary-color-shade-7, #ffffff);
  font-feature-settings: 'clig' off, 'liga' off;
  /* Paragraph 200 */
  font-family: Nunito Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
}

.usermanagement .header_acties {
  display: flex;
  width: 10%;
  height: 12px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;

  color: var(--secondary-color-shade-7, #ffffff);
  font-feature-settings: 'clig' off, 'liga' off;
  /* Paragraph 200 */
  font-family: Nunito Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 142.857% */
}

.usermanagement .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 1.2em;
  padding: 20px 20px 0px 20px;
  color: #333;
}

.usermanagement .edit-button {
  padding: 12px 25px;
  border-radius: 8px;
  border: 1px solid #17B1AC;
  background: var(--Primary-color, #129E99);
  box-shadow: 0px 8px 16px 0px rgba(18, 158, 153, 0.16), 0px 4px 6.8px 0px rgba(18, 158, 153, 0.25), 0px 0px 24.3px 0px rgba(18, 158, 153, 0.25);
  color: var(--Primary-white, var(--4, #FFF));
  text-align: center;
  cursor: pointer;
}

.user {
  max-width: 100%;
}

.add-user .titel {
  background-color: #129e992e;
  padding: 10px 20px;
}

.add-user .titel h2 {
  color: #129e99;
}

#addUserForm {
  width: 100%;
}

.add-user-form-row {
  display: flex;
  margin: 10px;
}

.add-user-form-row-bottom {
  display: flex;
  margin: 10px;
  margin-top: 40px;
}

.add-user-form-group {
  display: block;
  margin-bottom: 15px;
  width: 50%;
  padding: 0px 10px;
}

.add-user-form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.add-user-form-vragenlijst {
  display: block;
  margin-bottom: 15px;
  padding: 0px 10px;
  max-width: 100%;
}

.add-user-form-vragenlijst label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.header-label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  margin-left: 20px;
  padding-top: 10px;
  font-size: large;
}

.add-user-form-group input[type="text"],
.add-user-form-group input[type="email"],
.add-user-form-group input[type="password"],
.add-user-form-group input[type="tel"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
}

.add-user-form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  margin: 0px;
  font-family: 'Nunito Sans', sans-serif;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.add-role-select-dropdown {
  position: relative;
}

.add-role-select-dropdown:after {
  content: '';
  height: 0;
  position: absolute;
  width: 0;
  border: 6px solid transparent;
  border-top-color: #000;
  top: 50%;
  right: 10px;
  margin-top: -3px;
  background-color: white;
  transition: transform 0.3s;
  /* Add a transition for a smooth effect */
}

.add-role-select-dropdown.rotated:after {
  border-bottom-color: #000;
  border-top-color: #fff;
  margin-top: -9px;
  background-color: white;
}

.add-org-select-dropdown {
  position: relative;
}

.add-org-select-dropdown:after {
  content: '';
  height: 0;
  position: absolute;
  width: 0;
  border: 6px solid transparent;
  border-top-color: #000;
  top: 50%;
  right: 10px;
  margin-top: -3px;
  background-color: white;
  transition: transform 0.3s;
  /* Add a transition for a smooth effect */
}

.add-org-select-dropdown.rotated:after {
  border-bottom-color: #000;
  border-top-color: #fff;
  margin-top: -9px;
  background-color: white;
}

.add-user-form-group input[type="submit"] {
  float: right;
  padding: 12px 25px;
  font-family: 'Nunito Sans', sans-serif;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid #17B1AC;
  background: var(--Primary-color, #129E99);
  box-shadow: 0px 8px 16px 0px rgba(18, 158, 153, 0.16), 0px 4px 6.8px 0px rgba(18, 158, 153, 0.25), 0px 0px 24.3px 0px rgba(18, 158, 153, 0.25);
}

.add-user-form-group .warning-email-add-form {
  color: red;
  top: -27px;
  position: relative;
  right: -120px;
  margin-bottom: -22px;
}

.add-user-form-group .warning-email-add-form2 {
  color: red;
  top: -27px;
  position: relative;
  right: -120px;
  margin-bottom: -22px;
}

.add-user-form button {
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary-opacity-2, rgba(18, 158, 153, 0.10));
  color: var(--Accent-color, #2E7380);
  cursor: pointer;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: bold;
  font-size: 14px;
}

.add-user-input-with-label {
  display: block;
  margin-bottom: 15px;
  width: 100%;
  padding: 0px 10px;
}

.add-user-checkbox-item {
  margin-bottom: 8px;
}

.add-user-checkbox-dropdown {
  position: relative;
  margin: 0 auto;
  user-select: none;
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: white;
  font-size: 13px;
}


/* Display CSS arrow to the right of the dropdown text */
.add-user-checkbox-dropdown:after {
  content: '';
  height: 0;
  position: absolute;
  width: 0;
  border: 6px solid transparent;
  border-top-color: #000;
  top: 50%;
  right: 10px;
  margin-top: -3px;
  background-color: white;
  transition: transform 0.3s;
  /* Add a transition for a smooth effect */
}

/* Reverse the CSS arrow when the dropdown is active */
.add-user-checkbox-dropdown.is-active:after {
  border-bottom-color: #000;
  border-top-color: #fff;
  margin-top: -9px;
  background-color: white;
}

.add-user-checkbox-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  /* align the dropdown right below the dropdown text */
  border: inherit;
  border-top: none;
  left: -1px;
  /* align the dropdown to the left */
  right: -1px;
  /* align the dropdown to the right */
  opacity: 0;
  /* hide the dropdown */
  background-color: white;

  transition: opacity 0.4s ease-in-out;
  height: 87px;
  overflow: scroll;
  overflow-x: hidden;
  pointer-events: none;
  /* avoid mouse click events inside the dropdown */
}

.is-active .add-user-checkbox-dropdown-list {
  opacity: 1;
  /* display the dropdown */
  pointer-events: auto;
  /* make sure that the user still can select checkboxes */
  background-color: white;
}

.add-user-checkbox-dropdown-list li label {
  display: block;
  border-bottom: 1px solid silver;
  padding: 10px;

  transition: all 0.2s ease-out;
  background-color: white;
  margin-bottom: 0px;
}

.add-user-checkbox-dropdown-list li:last-child label {
  border-bottom: none;
}

.add-user-checkbox-dropdown-list li label:hover {
  background-color: #555;
  color: white;
}

.add-user-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.add-user-checkbox-list label {
  flex: 1 1 calc(50% - 10px);
  display: flex;
  align-items: center;
  border: 1px solid #e6e6e6;
  font-weight: normal;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden; /* Zorgt ervoor dat de inhoud binnen het label blijft */
}

.add-user-checkbox-list .label-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1; /* Zorgt ervoor dat de tekst de beschikbare ruimte inneemt */
}

.add-user-checkbox-list input[type="checkbox"] {
  margin-right: 5px;
  flex-shrink: 0; /* Zorgt ervoor dat de checkbox niet krimpt */
}





#addUserFrame {
  width: 100%;
  height: 75vh;
  max-height: 520px;
  border: none;
  border-radius: 32px;
}

#editUserFrame {
  width: 100%;
  height: 75vh;
  max-height: 550px;
  border: none;
  border-radius: 32px;
}

#addOrgFrame {
  width: 100%;
  height: 75vh;
  max-height: 700px;
  border: none;
  border-radius: 32px;
}

.remove-user {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
}

.remove-user .titel {
  padding: 20px 20px;
}

.remove-user .titel h2 {
  color: var(--Secondary-color, #123657);
}

#removeUserFrame {
  display: flex;
  width: 100%;
  height: 100%;
  max-height: 620px;
  border: none;
  border-radius: 32px;
}

#removeOrgFrame {
  display: flex;
  width: 100%;
  height: 100%;
  max-height: 620px;
  border: none;
  border-radius: 32px;
}

#removevlFrame {
  display: flex;
  width: 100%;
  height: 100%;
  max-height: 620px;
  border: none;
  border-radius: 32px;
}

#removesecFrame {
  display: flex;
  width: 100%;
  height: 100%;
  max-height: 620px;
  border: none;
  border-radius: 32px;
}

#removeUserForm {
  margin-top: -20px;
}

#removeOrgForm {
  margin-top: -35px;
}

#removevlForm {
  margin-top: -20px;
}

#removesecForm {
  margin-top: -20px;
}

.modal-remove {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-content-remove {
  position: fixed;
  background-color: #fefefe;
  padding: 0;
  border: 1px solid #888;
  width: 400px;
  height: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 32px;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.information_notes img {
  cursor: pointer;
}

.questionnaire .basic-info .basic-info-card .basic-info-card-content tr td.information_notes .dropdown_informatie {
  position: absolute;
  display: none;
  background-color: #f9f9f9;
  width: 35%;
  left: 50%;
  min-width: 200px;
  max-width: 500px;
  box-shadow: 0px 20px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
  border-radius: 20px 20px 20px 20px;
  padding: 10px;

  color: var(--Dark-color, #111F30);
  font-feature-settings: 'clig' off, 'liga' off;

  /* Paragraph 100 */
  font-family: Nunito Sans;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  /* 133.333% */


}


.opslaan-page {
  margin-top: 18px;
  float: right;
}


.rating-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.radio-group {
  flex-grow: 1;
  text-align: center;
  margin-right: 10px;
}

.square-radio {
  width: 20px;
  height: 20px;
  background-color: lightgray;
  border: 2px solid darkgray;
  border-radius: 0;
  margin: 0 auto;
  display: block;
}

.rating-scale label {
  display: block;
  text-align: center;
}

.notes {
  max-width: 100%;
}

.notes .titel {
  padding: 5px 10px;
}

.notes .titel h2 {
  color: #129e99;
  font-size: 14px;
}

.notes .entry {
  background-color: #129e9924;
  padding: 5px 10px;
  border-radius: 10px;
  margin: 10px;
  font-size: 13px;
}

.notes .entry .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  margin-top: 10px;
}

.notes .entry .meta .author {
  font-size: 12px;
  color: gray;
  float: left;
}

.notes .entry .meta .actions {
  font-size: 12px;
  color: gray;
  float: right;
}

.notes form {
  width: 100%
}

.notes form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.collega-toevoegen-invulveld {
  margin-top: 10px;
}

.uitgeschakelde_vraag {
  font-style: italic;
  color: #999;
  /* grijs */
  font-weight: bold;
}

.uitgeschakelde_titel {
  font-style: italic;
  color: #999;
  /* grijs */
}



/*  ____            _     _                         _  */
/* |  _ \  __ _ ___| |__ | |__   ___   __ _ _ __ __| | */
/* | | | |/ _` / __| '_ \| '_ \ / _ \ / _` | '__/ _` | */
/* | |_| | (_| \__ \ | | | |_) | (_) | (_| | | | (_| | */
/* |____/ \__,_|___/_| |_|_.__/ \___/ \__,_|_|  \__,_| */
/* hier onder zijn clasees voor de dashboard pagina's */


.dashboard .card {
  border-radius: 15px;
  /* Voeg border-radius toe aan de kaarten */
  height: 100%;
  border: none;
  box-shadow: 2px 2px 10px -4px #00000075;
}

.dashboard .card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.dashboard .groene-knop {
  margin-top: auto;
  /* Zorg ervoor dat de knop naar beneden wordt geduwd */
  border-radius: 0px 0px 15px 15px;
}

.dashboard .groene-knop:hover {
  text-decoration: none;
    color: white;
}

.dashboard i {
  color: #17B1AC;
}


/* Secties */
.dashboard .secties-card{
 background-color: #fff;
 border-radius: 16px;
 padding: 10px;
}

.dashboard .secties-card-content tr th {
  padding: 10px;
  padding-bottom: 18px;
  color: var(--Primary-color, #129E99);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.dashboard .secties-card-content .page .sub-title{
  color: var(--primary-color-shade-1, #65819B);
    font-size: 12px;
    line-height: 16px;
}

.dashboard .secties-card-content a{
  color: var(--Dark-color, #111F30);
    font-size: 16px;
    font-style: normal;
    line-height: 24px;
    text-decoration: none;
}

.dashboard .secties-card-content table td, 
.dashboard .secties-card-content table th {
    border-top: none !important;
    border-bottom: none !important;
}

.dashboard .signal-bars-container {
  display: flex;
  align-items: center;
  height: 100%;
  flex-direction: column;
}

.dashboard .signal-bars {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 55px;
  width: 100%;
  margin: 0 auto;
}
.dashboard .small-bars{
  width: 50%;
}

.dashboard .signal-bar {
  width: 20%;
  background-color: lightgray;
  position: relative;
  margin-right: 2px;
  border-radius: 5px;
  overflow: hidden;
}

.dashboard .signal-bar:nth-child(1) {
  height: 25%;
}

.dashboard .signal-bar:nth-child(2) {
  height: 50%;
}

.dashboard .signal-bar:nth-child(3) {
  height: 75%;
}

.dashboard .signal-bar:nth-child(4) {
  height: 100%;
}

.dashboard .fill {
  height: 100%;
  background-color: #17afa5;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 5px;
}

.dashboard .chart-empty {
  margin: 0;
  display: flex;
  align-items: center;
  height: 55px;
}

.dashboard .chart-label {
  text-align: center;
  font-size: 0.8em;
  margin-top: 5px;
  /* Voeg wat ruimte toe boven de labels */
}

.col-3,
.col-md-2,
.col-lg-1-7 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}


@media (min-width: 980px) {
  .col-lg-1-7 {
      flex: 0 0 auto !important;
      width: 14.2857% !important;
  }
}

.dashboard .secties-card-content .progression .chart-empty{
   color: var(--primary-color-shade-1, #65819B);
    font-size: 12px;
    line-height: 16px;
}

.dashboard .secties-card-content .action{
  text-align: center;
  padding-top: 30px;
}


/* Hier komt opmaak van de dashboard cards op de thema.php */

.dashboard .card-title{
  font-weight: 600;
  font-size: 16px;

}

.dashboard .card-source{
  border-radius: 0px 0px 15px 15px;
  background-color: #129e991f;
  color:#129E99;

}

.dashboard .card-body .badge{
  background-color: #129e99;
  border-radius: 10px;
  cursor: help;
  margin-right: 3px;
  margin-bottom: 3px;
}


/* Hier komt de opmaak voor de filter balk boven aan thema.php */
.dashboardfilter {
  position: fixed;
  left: 0px;
  top: 60px;
  z-index: 2;
  background: #129E99;
  box-shadow: 0px 8px 16px 0px rgba(143, 149, 178, 0.15);
  color: #fff;
  width: 100vw;
  margin: 0 auto;
  padding: 10px 3vw;
}

.dashboardfilter i {
  font-size: 20px;
  margin-right: 10px;
}

.dashboardfilter label {
  margin: 0;
  font-size: 14px;
  color: #fff;
  margin-right: 10px;
}

.dashboardfilter .form-select {
  background-color: #129E99;
  font-size: 14px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 5px 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  max-width: 170px;
}

.dashboardfilter .form-select-container {
  position: relative;
  display: flex;
  align-items: center;
}

.dashboardfilter .form-select-container i.pencil-icon {
  margin-left: 10px;
  color: #fff;
}

/* Hier haal ik de highcharts link mee weg */

.highcharts-credits{
  display: none!important;
}