@charset "UTF-8";
* {
  font-family: "Open Sans", sans-serif;
}

body {
  margin: 0px;
  background-color: #eeeeee;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  overflow: hidden;
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

hr {
  border: 1px solid #eeeeee;
  width: 100%;
}

h1 {
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

h2 {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  margin: 0;
  font-size: 18px;
  color: #202533;
}

h3 {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  margin: 0;
  font-size: 16px;
}

h4 {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  margin: 0;
  font-size: 16px;
}

h5 {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  margin: 0;
  font-size: 16px;
}

table tr td,
table tr th {
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  table tr td,
  table tr th {
    font-size: 14px;
  }
}

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: "liga";
}

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: #999;
}

.semi-bold {
  font-weight: 600;
}

.text-light {
  color: #858585;
}

.sub-heading {
  font-family: "Open Sans", sans-serif;
  color: #858585;
  font-size: 14px;
}

progress::-webkit-progress-bar {
  background: #eeeeee;
}

progress::-webkit-progress-value {
  background: #03a9f4;
}

.default-cursor {
  cursor: default !important;
}

.pointer {
  cursor: pointer !important;
}

p {
  margin: 0 !important;
}

.tox.tox-silver-sink.tox-tinymce-aux {
  display: none !important;
}

.card {
  height: 100%;
}

#pageHeader {
  display: block;
}

.btn-right {
  margin: auto 0 auto auto;
}

.flex {
  display: flex;
}

.flow-root {
  display: flow-root;
  position: relative;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column !important;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.mw-25 {
  width: 100%;
  max-width: 25%;
  white-space: unset !important;
}

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

.text-blue {
  color: #03a9f4 !important;
}

.col {
  flex-direction: column;
}

.row {
  flex-direction: row;
}

.row_reverse {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.d-flex {
  display: flex !important;
}

.d-flex-c {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.no-wrap {
  flex-wrap: nowrap;
}

.wrap {
  flex-wrap: wrap;
}

.fixed {
  position: fixed;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-around {
  justify-content: space-around;
}

.justify-start {
  justify-content: flex-start;
}

.important-justify-start {
  justify-content: flex-start !important;
}

.justify-end {
  justify-content: flex-end;
}

.justify-base {
  justify-content: baseline;
}

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

.align-bottom {
  align-items: flex-end;
}

.align-start {
  align-items: start;
}

.align-end {
  align-items: end;
}

.align-base {
  align-items: baseline;
}

.col-span-12 {
  column-gap: 12px;
}

.row-gap-0 {
  row-gap: 0 !important;
}

@media screen and (max-width: 1400px) {
  .col-2 {
    width: 100%;
  }
}

@media screen and (max-width: 1400px) {
  .col-3 {
    flex: 0 0 auto;
    width: 50%;
  }
}
@media screen and (max-width: 992px) {
  .col-3 {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media screen and (max-width: 1200px) {
  .col-4 {
    flex: 0 0 auto;
    width: 50%;
  }
}
@media screen and (max-width: 992px) {
  .col-4 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .col-4 {
    flex: 0 0 auto;
    width: 50%;
  }
}

@media screen and (max-width: 1200px) {
  .col-6 {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media screen and (max-width: 1400px) {
  .col-8 {
    width: 100%;
  }
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.left {
  left: 0px;
}

.left-6 {
  left: 6px;
}

.right {
  right: 0px;
}

.right-6 {
  right: 6px;
}

.right-12 {
  right: 12px;
}

.top {
  top: 0px;
}

.top-12 {
  top: 12px;
}

.absolute-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pad-3 {
  padding: 3px;
}

.pad-6 {
  padding: 6px;
}

.pad-12 {
  padding: 12px;
}

.pad-24 {
  padding: 24px;
}

.pad-top24 {
  padding-top: 24px;
}

.pad-top-12 {
  padding-top: 12px;
}

.pad-bot-6 {
  padding-bottom: 6px;
}

.pad-bot-12 {
  padding-bottom: 12px;
}

.pad-x-6 {
  padding-inline: 6px;
}

.pad-x-24 {
  padding-inline: 24px;
}

.pad-y-2 {
  padding-block: 2px;
}

.pad-y-4 {
  padding-block: 4px;
}

.pad-y-6 {
  padding-block: 6px;
}

.pad-r-6 {
  padding-right: 6px;
}

.pad-l-24 {
  padding-left: 24px;
}

.w-100 {
  width: 100%;
}

.w-95 {
  width: 95%;
}

.w-90 {
  width: 90%;
}

.w-85 {
  width: 85%;
}

.w-80 {
  width: 80%;
}

.w-75 {
  width: 75%;
}

.w-70 {
  width: 70%;
}

.w-65 {
  width: 65%;
}

.w-60 {
  width: 60%;
}

.w-55 {
  width: 55%;
}

.w-50 {
  width: 50%;
}

.w-45 {
  width: 45%;
}

.w-40 {
  width: 40%;
}

.w-38 {
  width: 38%;
}

.w-36 {
  width: 36%;
}

.w-34 {
  width: 34%;
}

.w-32 {
  width: 32%;
}

.w-30 {
  width: 30%;
}

.w-25 {
  width: 25%;
}

.h-fit {
  height: fit-content;
}

.margin-0 {
  margin: 0px;
}

.margin-3 {
  margin: 3px;
}

.margin-6 {
  margin: 6px;
}

.margin-12 {
  margin: 12px;
}

.margin-24 {
  margin: 24px;
}

.margin-top12 {
  margin-top: 12px;
}

.margin-top-24 {
  margin-top: 24px;
}

.margin-right6 {
  margin-right: 6px;
}

.margin-right-24 {
  margin-right: 24px;
}

.margin-left6 {
  margin-left: 6px;
}

.margin-bottom-3 {
  margin-bottom: 3px;
}

.margin-bottom-6 {
  margin-bottom: 6px;
}

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

.margin-left-auto {
  margin-left: auto;
}

.margin-right-auto {
  margin-right: auto;
}

.m-auto {
  margin: auto;
}

.margin-y-6 {
  margin-block: 6px;
}

.margin-x-6 {
  margin-inline: 6px;
}

.width-100 {
  width: 100%;
}

.width-75 {
  width: 75%;
}

.width-50 {
  width: 50%;
}

.width-25 {
  width: 25%;
}

.width-12-5 {
  width: 12.5%;
}

.width-9 {
  width: 9%;
}

.min-width-unset {
  min-width: 100%;
}

.min-width-215 {
  min-width: 215px;
}

.max-width-125 {
  max-width: 125px;
}

.width-15vw {
  width: 15vw;
}

.icon-sm {
  width: 15px;
}

.icon-md {
  width: 25px;
}

.icon-lg {
  width: 35px;
}

.size-sm {
  width: 150px;
}

.size-md {
  width: 250px;
}

.size-lg {
  width: 350px;
}

.border-none {
  border: none !important;
}

.bord-bot2 {
  border-bottom: 2px solid #333;
}

.bord-bot5 {
  border-bottom: 5px solid #333;
}

.bord-rad-3 {
  border-radius: 3px;
}

@media screen and (max-width: 1400px) {
  .table.bord-bot2 .rolcardheaderdiv span {
    width: 50% !important;
  }
}
@media screen and (max-width: 1400px) {
  .table.bord-bot2 .rolpermissionpageheader {
    display: none;
  }
}
@media screen and (max-width: 1400px) {
  .table.bord-bot2 tbody {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
@media screen and (max-width: 1400px) {
  .table.bord-bot2 tbody tr {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}
@media screen and (max-width: 1400px) {
  .table.bord-bot2 tbody tr td:first-child {
    width: 160px;
  }
}
@media screen and (max-width: 1400px) {
  .table.bord-bot2 tbody tr:nth-child(even) {
    background-color: #f4f4f4;
  }
}

.shadow-none {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}

.text-white {
  color: #fff !important;
}

.text-red {
  color: #D50000;
}

.header-font {
  font-family: "Open Sans", sans-serif;
}

.uppercase {
  text-transform: uppercase;
}

.font-w400 {
  font-weight: 400;
}

.font-w600 {
  font-weight: 600;
}

.font-s40 {
  font-size: 40px;
}

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

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

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

.spinner img {
  margin: auto;
  display: block;
  width: 60px;
  height: 60px;
}

.bg-spinner {
  background-color: rgba(187, 187, 187, 0.1);
  margin: 0.5rem 1rem;
}

.no-type {
  pointer-events: none;
}

.contentLoaderSpinner {
  position: absolute;
  background-color: rgba(68, 68, 68, 0.84);
  width: 160px;
  z-index: 99999999999999;
  height: 160px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.contentLoaderSpinner img {
  margin: auto;
  display: block;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}
.contentLoaderSpinner.inline {
  position: relative;
}

.original {
  transform: rotate(0deg);
  transition: transform 0.5s;
}

.inverse {
  transform: rotate(180deg);
  transition: transform 0.5s;
}

.pointer {
  cursor: pointer;
}

.popup {
  position: fixed;
  height: fit-content;
  width: 50vw;
  background-color: #FFF;
  padding: 24px;
  z-index: 999999;
  box-shadow: 0 0 4px 0 #c1c1c1;
  display: flex;
  flex-direction: column;
  gap: 1em;
  text-align: center;
  display: none;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  margin: auto;
}
.popup .select2-container {
  width: 100%;
  text-align: left;
}
.popup .closePopup,
.popup .removePopup {
  width: fit-content;
  height: fit-content;
  top: 12px;
  right: 12px;
  position: absolute;
  font-size: 32px;
  cursor: pointer;
}

.select2-dropdown {
  z-index: 99999999 !important;
}

#massEdit {
  height: 75lvh;
  display: flex;
  padding: 12px 0;
}
#massEdit .col-1,
#massEdit .col-2,
#massEdit .col-3,
#massEdit .col-4,
#massEdit .col-5,
#massEdit .col-6,
#massEdit .col-7,
#massEdit .col-8,
#massEdit .col-9,
#massEdit .col-10,
#massEdit .col-11,
#massEdit .col-12 {
  padding: 0 12px !important;
}
@media screen and (max-width: 576px) {
  #massEdit .col-1,
  #massEdit .col-2,
  #massEdit .col-3,
  #massEdit .col-4,
  #massEdit .col-5,
  #massEdit .col-6,
  #massEdit .col-7,
  #massEdit .col-8,
  #massEdit .col-9,
  #massEdit .col-10,
  #massEdit .col-11,
  #massEdit .col-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
#massEdit #massEditProductList {
  overflow: auto;
  display: flex;
  flex-direction: column;
  height: 65lvh;
}
#massEdit #massEditProductList p {
  text-align: left;
  padding: 4px 12px;
}
#massEdit #massEditProductList p:nth-child(odd) {
  background-color: #e1e1e1;
}
#massEdit label {
  text-align: left;
  width: 100%;
  display: block;
  margin-top: 0.5em;
  font-size: 18px;
  font-weight: bold;
}
#massEdit #massEditSAveItems {
  margin: 1em 0 0 auto;
}

.progress-bar {
  --height: 0.2rem;
  width: calc(var(--length) * 1px);
  height: var(--height);
  position: relative;
  overflow: hidden;
}

.flexible-class {
  --length: 260;
}

.progress {
  --speed: 30;
  --width: 45;
  --duration: calc((var(--width) + var(--length)) / var(--speed) * 1s);
  position: absolute;
  top: 0;
  left: calc(-1px * var(--width));
  background-color: #03a9f4;
  height: inherit;
  width: calc(1px * var(--width));
  animation-duration: var(--duration);
  animation-iteration-count: infinite;
  animation-delay: 200ms;
  animation-name: animation;
  animation-timing-function: linear;
}

@keyframes animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc((var(--length) + var(--width)) * 1px));
  }
}
#areYouSurePopup {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 320px;
  height: 50%;
  background-color: white;
  border-radius: 12px;
  z-index: 9999999999;
  box-shadow: 0 0 4px 0 #c1c1c1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 16px;
}
#areYouSurePopup button {
  width: 100%;
  text-align: center;
  display: block;
  font-weight: bold;
  font-size: 16px;
}
#areYouSurePopup .material-symbols-outlined {
  color: orange;
  font-size: 180px;
}

.h-800 {
  height: 800px;
  overflow: auto;
}

.red {
  color: #D50000 !important;
}

.green {
  color: #00C853 !important;
}

.bg-green {
  background-color: #00C853 !important;
}

.bg-succes {
  background-color: #B9F6CA;
  color: #00C853;
}

.bg-orange {
  background-color: #FF8F00 !important;
}

.bg-red {
  background-color: #D50000 !important;
}

.bg-white {
  background-color: #fff;
}

.bg-primary {
  background-color: #03a9f4;
  color: #FFF;
}

.bg-error {
  background-color: #D50000;
  color: #FFF;
}

.bg-gray {
  background-color: #e1e1e1 !important;
  color: #FFF;
}

.bg-darkgray {
  background-color: #8b8b8b !important;
  color: #FFF;
}

.bg-note {
  background-color: #d8d8d8 !important;
  color: #FFF;
}

.groupheader {
  background-color: #FFF;
  color: #000;
  padding: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.groupheader span {
  font-size: 30px;
}

.mobilemenutoggle {
  display: none;
  cursor: pointer;
  background-color: #202533;
  padding: 0 0px;
  margin-right: 1em;
}
@media screen and (max-width: 992px) {
  .mobilemenutoggle {
    display: block;
  }
}
.mobilemenutoggle span {
  color: #fff !important;
  font-size: 50px;
}
.mobilemenutoggle.show {
  display: block;
}

.lateDeliveryRow {
  position: relative;
}
.lateDeliveryRow:after {
  content: "";
  width: 6px;
  height: 90%;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  position: absolute;
  background: rgb(220, 175, 255);
}
@media screen and (max-width: 1400px) {
  .lateDeliveryRow:after {
    height: 100%;
  }
}

.lateDeliveryBlock {
  background: rgb(220, 175, 255);
  font-weight: bold;
  color: #000;
  padding: 6px 12px;
  border-radius: 4px;
}

.yellowLabelRow {
  position: relative;
}
.yellowLabelRow:after {
  content: "";
  width: 6px;
  height: 90%;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  position: absolute;
  background: rgb(255, 245, 140);
}
@media screen and (max-width: 1400px) {
  .yellowLabelRow:after {
    height: 100%;
  }
}

.yellowLabelBlock {
  background-color: #fff052;
  font-weight: bold;
  color: #000;
  padding: 6px 12px;
  border-radius: 4px;
}

.yellowLabelRow.lateDeliveryRow {
  position: relative;
}
.yellowLabelRow.lateDeliveryRow:after {
  content: "";
  width: 6px;
  height: 90%;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  position: absolute;
  background: linear-gradient(0deg, #dcafff 0%, #dcafff 50%, #fff58c 50%, #fff58c 100%);
}
@media screen and (max-width: 1400px) {
  .yellowLabelRow.lateDeliveryRow:after {
    height: 100%;
  }
}

.toggleProductDetailsarrow {
  transform: rotate(0deg);
  transition: transform 0.5s;
}
.toggleProductDetailsarrow.upsidedown {
  transform: rotate(180deg);
  transition: transform 0.5s;
}

@media screen and (max-width: 1400px) {
  .hide-tablet {
    display: none;
  }
}

@media screen and (max-width: 1200px) {
  .hide-mobile {
    display: none;
  }
}

@media screen and (max-width: 1200px) {
  .mobile-d-flex {
    display: flex;
  }
}

body .select2-container .select2-selection--multiple {
  padding-bottom: 0;
  min-height: 26px;
  border-radius: 0;
  border-color: #e1e1e1;
}

.bg-Online {
  background-color: #27b5fc;
  color: #FFF;
}

.bg-Outlet {
  background-color: #e43434;
  color: #FFF;
}

.bg-Partner {
  background-color: #ff6e25;
  color: #FFF;
}

.bg-DJK-Lev {
  background-color: #2382e0;
  color: #FFF;
}

.bg-DJK-Mon {
  background-color: #1c9fe0;
  color: #FFF;
}

.bg-Hornbach {
  background-color: #ffa323;
  color: #FFF;
}

.tableRowLocked {
  position: relative;
}
.tableRowLocked:after {
  content: "lock";
  font-family: "Material Symbols Outlined";
  font-size: 30px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
  z-index: 999;
  color: #03a9f4;
  background-color: rgba(0, 0, 0, 0);
  text-align: center;
  width: 40px;
  height: fit-content;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotate {
  animation: rotate 2s linear infinite;
}

.content-header-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.gap-3 {
  gap: 12px;
}

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

#language #currentLanguage {
  width: 60px;
}
#language #currentLanguage img {
  width: 100%;
  display: block;
  height: 26px;
}
#language #flags {
  position: absolute;
  top: 32px;
  left: 0;
  background-color: rgb(37.8987951807, 43.8204819277, 60.4012048193);
  z-index: 9;
  width: 100%;
  box-shadow: 0px 4px 4px 0 #202533;
}
#language #flags .flag {
  padding: 8px 10px;
}
#language #flags .flag.active {
  background-color: rgb(51.6626506024, 59.734939759, 82.3373493976);
}
#language #flags .flag:hover {
  cursor: pointer;
  background-color: rgb(71.3253012048, 82.4698795181, 113.6746987952);
}
#language #flags .flag img {
  height: 26px;
  display: block;
  width: 100%;
}

.btn-group {
  display: flex;
  align-self: center;
}
@media screen and (max-width: 768px) {
  .btn-group {
    width: 100%;
    padding-left: 8px;
  }
}

.btn {
  height: 42px;
  display: flex;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  border: 0;
  align-items: center;
  cursor: pointer;
}
.btn .material-icons {
  font-size: 18px;
}
.btn[disabled=disabled] {
  opacity: 0.4;
  cursor: default;
}
.btn[disabled=disabled]:hover {
  cursor: default;
}

.btn-outline-danger {
  background-color: #D50000;
  color: #fff;
}

.btn-grey {
  background-color: #bebebe;
  color: #202533;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
}
.btn-grey:hover {
  background-color: #03a9f4 !important;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
  color: #fff;
}

.btn-red {
  background-color: #D50000;
  color: #fff;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
}
.btn-red a,
.btn-red .material-symbols-outlined {
  color: #fff;
}
.btn-red span {
  color: #FFF !important;
}
.btn-red:hover {
  background-color: #bebebe;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
  color: #202533;
  cursor: pointer;
}
.btn-red.arrow-absolute {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-bottom-right-radius: 6px;
  border-top-left-radius: 6px;
  color: white;
}
.btn-red.arrow-absolute span {
  font-size: 12px;
}

.btn-blue {
  background-color: #03a9f4;
  color: #fff !important;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
  height: 42px;
  align-items: center;
}
.btn-blue a {
  color: #fff !important;
}
.btn-blue:hover {
  background-color: #bebebe;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
  color: #202533;
  cursor: pointer;
}
.btn-blue.arrow-absolute {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-bottom-right-radius: 6px;
  border-top-left-radius: 6px;
  color: white;
}
.btn-blue.arrow-absolute span {
  font-size: 12px;
}

.btn-hollow {
  background-color: rgba(193, 193, 193, 0);
  outline: 1px solid #03a9f4;
  color: #03a9f4 !important;
}
.btn-hollow:hover {
  background-color: #03a9f4 !important;
  color: white !important;
}

.btn-succes {
  display: inline-flex;
  background-color: #B9F6CA;
  color: #00C853;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
}
.btn-succes:hover {
  background-color: #bebebe;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
  color: #202533;
}

.btn-warning {
  display: inline-flex;
  background-color: #FFECB3;
  color: #FF8F00;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
}
.btn-warning:hover {
  background-color: #bebebe;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
  color: #202533;
}

.btn-error {
  display: inline-flex;
  background-color: #FF8A80;
  color: #D50000;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
}
.btn-error:hover {
  background-color: #bebebe;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
  color: #202533;
}

.btn-info {
  display: inline-flex;
  background-color: #ccdee7;
  color: #0277BD;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
}
.btn-info:hover {
  background-color: #bebebe;
  transition: background-color 0.2s ease-in, color 0.2s ease-in;
  color: #202533;
}

.btn-border {
  transition: background-color 0.2s ease-in;
  border: 1px solid #bebebe;
}
.btn-border.left {
  border-top: 1px solid #bebebe;
  border-left: 1px solid #bebebe;
  border-bottom: 1px solid #bebebe;
  border-right: 1px solid #bebebe;
  border-radius: 4px 0px 0px 4px;
}
.btn-border.mid {
  border-top: 1px solid #bebebe;
  border-right: 1px solid #bebebe;
  border-bottom: 1px solid #bebebe;
  border-radius: 0px;
}
.btn-border.right {
  border-top: 1px solid #bebebe;
  border-right: 1px solid #bebebe;
  border-bottom: 1px solid #bebebe;
  border-radius: 0px 4px 4px 0px;
}
.btn-border:hover {
  background-color: #bebebe;
  transition: background-color 0.2s ease-in;
}
.btn-border.bg-error {
  background-color: #FF8A80;
  color: #D50000;
}
.btn-border.bg-succes {
  background-color: #B9F6CA;
  color: #00C853;
}

button {
  border: 0px;
  border: none !important;
}

.btn-close {
  cursor: pointer;
}
.btn-close:hover {
  opacity: 0.5;
}

.btn-plus {
  justify-content: center;
  width: 20px;
}
.btn-plus img {
  width: 20px;
}

.delete-img {
  right: -12px;
  top: -12px;
}
.delete-img .material-icons {
  background-color: #eee;
  border-radius: 40px;
  padding: 3px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  font-size: 20px;
  transition: background-color 0.2s ease-in;
  cursor: pointer;
}
.delete-img .material-icons:hover {
  transition: background-color 0.1s ease-out;
  background-color: #202533;
  color: #fff;
}

.status-label {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}
.status-label.Goedgekeurd, .status-label.succes {
  background: #B9F6CA;
  color: #00C853;
}
.status-label.Afgekeurd {
  background: #FF8A80;
  color: #D50000;
}
.status-label.Beoordelen {
  background: #ffe8bd;
  color: #b1770d;
}

.label {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 4px;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  border: 0;
  width: fit-content !important;
}

.label-grey {
  background-color: #eeeeee;
  color: #858585;
}

.label-blue {
  background-color: #03a9f4;
  color: #fff;
}

.label-succes {
  background-color: #B9F6CA;
  color: #00C853;
}

.label-warning {
  background-color: #FFECB3;
  color: #FF8F00;
}

.label-error {
  background-color: #FF8A80;
  color: #D50000;
}

.label-info {
  background-color: #ccdee7;
  color: #0277BD;
}

.text-error {
  color: #D50000;
}

.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
  align-items: center;
  justify-content: center;
}
.modal.active {
  display: flex;
}
.modal.manco .main {
  display: flex;
  flex-wrap: wrap;
}
.modal.manco .main textarea {
  min-height: 60px;
}
.modal.manco .main textarea,
.modal.manco .main .file {
  width: 100%;
  max-width: 100%;
  margin-bottom: 12px;
}
.modal .content {
  width: 400px;
  background: #fff;
  border-radius: 10px;
  max-width: 80%;
}
.modal .content .header {
  padding: 24px;
}
.modal .content .main {
  padding: 24px;
  border-top: 2px solid #eeeeee;
}
.modal .content .main div {
  white-space: break-spaces;
}
.modal .content .footer {
  padding: 0 24px 24px 24px;
  display: flex;
  justify-content: space-between;
}
.modal .content .error {
  max-width: 100%;
  white-space: initial;
  padding: 24px;
  border-top: 2px solid #eeeeee;
  color: #D50000;
}
.modal .content img {
  max-width: 100%;
  background-color: black;
}

.material-symbols-outlined {
  color: black;
}
.material-symbols-outlined:hover {
  cursor: pointer;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
}

.search-input-container .search-input-wrapper {
  display: flex;
}
.search-input-container select {
  margin: 0;
  border: none;
  background: #bebebe;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  height: 42px;
  max-width: 150px;
  min-width: 100px;
  width: fit-content;
}
.search-input-container input {
  margin: 0;
  padding: 0 12px;
  border: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.search-input-container input:focus {
  outline: none;
}

.sort-filter-container {
  position: relative;
  min-width: 160px;
  height: 42px;
  max-height: 42px;
}
.sort-filter-container:hover .filter-options {
  z-index: 9;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 40px;
  background: #fff;
  width: 100%;
  border-radius: 4px;
  padding: 6px;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06);
}
.sort-filter-container .material-symbols-outlined {
  color: black;
}
.sort-filter-container .filter-options {
  display: none;
}
.sort-filter-container .btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 42px;
  max-height: 42px;
  padding: 0px 12px;
}
.sort-filter-container .btn .material-symbols-outlined {
  color: black;
}
.sort-filter-container a {
  padding: 3px 0;
}

.pagination-container .d-flex.justify-content-between.flex-fill.d-sm-none {
  display: none;
}
.pagination-container div:first-child .pagination {
  display: none;
}
.pagination-container .pagination {
  padding: 0;
  list-style-type: none;
  display: flex;
}
.pagination-container .pagination .page-item {
  padding: 0 6px;
  margin: 0 6px;
}
.pagination-container .pagination .page-item.active {
  background: #03a9f4;
  color: white;
}
.pagination-container .d-none.flex-sm-fill.d-sm-flex.align-items-sm-center.justify-content-sm-between {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.search-bar-container.card {
  flex-direction: row;
  flex-wrap: wrap;
}
.search-bar-container .title {
  width: 100%;
  max-width: 100%;
  margin-bottom: 12px;
}
.search-bar-container input,
.search-bar-container select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}
.search-bar-container input {
  margin-right: 12px;
}

.checkbox_item .checkbox_wrap {
  position: relative;
  display: block;
  cursor: pointer;
  width: 100px;
  margin: 0 auto 50px;
}

.checkbox_item:last-child .checkbox_wrap {
  margin-bottom: 0;
}

.checkbox_item .checkbox_wrap .checkbox_toggle_switch {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
}

.checkbox_item .checkbox_wrap .checkbox_mark {
  display: inline-block;
  position: relative;
  border-radius: 4px;
}

.checkbox_item .checkbox_wrap .checkbox_mark:before,
.checkbox_item .checkbox_wrap .checkbox_mark:after {
  content: "";
  position: absolute;
  transition: all 0.5s ease;
}

/* basic styles */
.checkbox_item.citem_1 .checkbox_wrap .checkbox_mark {
  background: #009c41;
  width: 100px;
  height: 50px;
  padding: 2px;
}

.checkbox_item.citem_1 .checkbox_wrap .checkbox_mark:before {
  content: "\e898";
  font-family: "Material Icons";
  top: 4px;
  left: 3px;
  width: fit-content;
  height: fit-content;
  background: #fff;
  border-radius: 4px;
  font-size: 30px;
  text-align: center;
  padding: 8px;
}

.checkbox_item.citem_1 .checkbox_wrap .checkbox_toggle_switch:checked ~ .checkbox_mark {
  background: #9d0000;
}

.checkbox_item.citem_1 .checkbox_wrap .checkbox_toggle_switch:checked ~ .checkbox_mark:before {
  content: "\e897";
  font-family: "Material Icons";
  left: 54px;
}

/* Permissions tree (roles) */
/* broaden selectors to include user edit contexts */
#rolesEdit #permissionScroller_outer_wrapper .permission-scroller,
#rolesAdd #permissionScroller_outer_wrapper .permission-scroller,
#USERS #permissionScroller_outer_wrapper .permission-scroller,
#userdetailsform #permissionScroller_outer_wrapper .permission-scroller,
.update-user #permissionScroller_outer_wrapper .permission-scroller,
#add_user #permissionScroller_outer_wrapper .permission-scroller,
#insert-user #permissionScroller_outer_wrapper .permission-scroller {
  max-height: 60vh;
  overflow: auto;
  padding: 12px;
}
#rolesEdit #permissionScroller_outer_wrapper,
#rolesAdd #permissionScroller_outer_wrapper,
#USERS #permissionScroller_outer_wrapper,
#userdetailsform #permissionScroller_outer_wrapper,
.update-user #permissionScroller_outer_wrapper,
#add_user #permissionScroller_outer_wrapper,
#insert-user #permissionScroller_outer_wrapper {
  /* 6 columns: Module + Alles + 4 actions */
}
#rolesEdit #permissionScroller_outer_wrapper .perm-grid,
#rolesAdd #permissionScroller_outer_wrapper .perm-grid,
#USERS #permissionScroller_outer_wrapper .perm-grid,
#userdetailsform #permissionScroller_outer_wrapper .perm-grid,
.update-user #permissionScroller_outer_wrapper .perm-grid,
#add_user #permissionScroller_outer_wrapper .perm-grid,
#insert-user #permissionScroller_outer_wrapper .perm-grid {
  display: grid;
  grid-template-columns: minmax(320px, 2.4fr) 90px repeat(4, 120px);
  align-items: center;
  min-width: 850px;
}
#rolesEdit #permissionScroller_outer_wrapper .perm-cell,
#rolesAdd #permissionScroller_outer_wrapper .perm-cell,
#USERS #permissionScroller_outer_wrapper .perm-cell,
#userdetailsform #permissionScroller_outer_wrapper .perm-cell,
.update-user #permissionScroller_outer_wrapper .perm-cell,
#add_user #permissionScroller_outer_wrapper .perm-cell,
#insert-user #permissionScroller_outer_wrapper .perm-cell {
  border-bottom: 1px solid #e9ecef;
  padding: 12px 12px;
}
#rolesEdit #permissionScroller_outer_wrapper .perm-center,
#rolesAdd #permissionScroller_outer_wrapper .perm-center,
#USERS #permissionScroller_outer_wrapper .perm-center,
#userdetailsform #permissionScroller_outer_wrapper .perm-center,
.update-user #permissionScroller_outer_wrapper .perm-center,
#add_user #permissionScroller_outer_wrapper .perm-center,
#insert-user #permissionScroller_outer_wrapper .perm-center {
  text-align: center;
}
#rolesEdit #permissionScroller_outer_wrapper,
#rolesAdd #permissionScroller_outer_wrapper,
#USERS #permissionScroller_outer_wrapper,
#userdetailsform #permissionScroller_outer_wrapper,
.update-user #permissionScroller_outer_wrapper,
#add_user #permissionScroller_outer_wrapper,
#insert-user #permissionScroller_outer_wrapper {
  /* Row visuals (table-like) */
}
#rolesEdit #permissionScroller_outer_wrapper .perm-row,
#rolesAdd #permissionScroller_outer_wrapper .perm-row,
#USERS #permissionScroller_outer_wrapper .perm-row,
#userdetailsform #permissionScroller_outer_wrapper .perm-row,
.update-user #permissionScroller_outer_wrapper .perm-row,
#add_user #permissionScroller_outer_wrapper .perm-row,
#insert-user #permissionScroller_outer_wrapper .perm-row {
  width: 100%;
  background: #fff;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}
#rolesEdit #permissionScroller_outer_wrapper .permission-row.is-hidden,
#rolesAdd #permissionScroller_outer_wrapper .permission-row.is-hidden,
#USERS #permissionScroller_outer_wrapper .permission-row.is-hidden,
#userdetailsform #permissionScroller_outer_wrapper .permission-row.is-hidden,
.update-user #permissionScroller_outer_wrapper .permission-row.is-hidden,
#add_user #permissionScroller_outer_wrapper .permission-row.is-hidden,
#insert-user #permissionScroller_outer_wrapper .permission-row.is-hidden {
  display: none;
}
#rolesEdit #permissionScroller_outer_wrapper,
#rolesAdd #permissionScroller_outer_wrapper,
#USERS #permissionScroller_outer_wrapper,
#userdetailsform #permissionScroller_outer_wrapper,
.update-user #permissionScroller_outer_wrapper,
#add_user #permissionScroller_outer_wrapper,
#insert-user #permissionScroller_outer_wrapper {
  /* Header tint like example */
}
#rolesEdit #permissionScroller_outer_wrapper .perm-head,
#rolesAdd #permissionScroller_outer_wrapper .perm-head,
#USERS #permissionScroller_outer_wrapper .perm-head,
#userdetailsform #permissionScroller_outer_wrapper .perm-head,
.update-user #permissionScroller_outer_wrapper .perm-head,
#add_user #permissionScroller_outer_wrapper .perm-head,
#insert-user #permissionScroller_outer_wrapper .perm-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #eef2ff;
  border-bottom: 1px solid #dde3f0;
}
#rolesEdit #permissionScroller_outer_wrapper .perm-head-title,
#rolesAdd #permissionScroller_outer_wrapper .perm-head-title,
#USERS #permissionScroller_outer_wrapper .perm-head-title,
#userdetailsform #permissionScroller_outer_wrapper .perm-head-title,
.update-user #permissionScroller_outer_wrapper .perm-head-title,
#add_user #permissionScroller_outer_wrapper .perm-head-title,
#insert-user #permissionScroller_outer_wrapper .perm-head-title {
  font-weight: 700;
}
#rolesEdit #permissionScroller_outer_wrapper,
#rolesAdd #permissionScroller_outer_wrapper,
#USERS #permissionScroller_outer_wrapper,
#userdetailsform #permissionScroller_outer_wrapper,
.update-user #permissionScroller_outer_wrapper,
#add_user #permissionScroller_outer_wrapper,
#insert-user #permissionScroller_outer_wrapper {
  /* Module cell: indent + expander */
}
#rolesEdit #permissionScroller_outer_wrapper .perm-module,
#rolesAdd #permissionScroller_outer_wrapper .perm-module,
#USERS #permissionScroller_outer_wrapper .perm-module,
#userdetailsform #permissionScroller_outer_wrapper .perm-module,
.update-user #permissionScroller_outer_wrapper .perm-module,
#add_user #permissionScroller_outer_wrapper .perm-module,
#insert-user #permissionScroller_outer_wrapper .perm-module {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: calc(12px + var(--level) * 20px);
  position: relative;
  cursor: default;
}
#rolesEdit #permissionScroller_outer_wrapper .perm-name,
#rolesAdd #permissionScroller_outer_wrapper .perm-name,
#USERS #permissionScroller_outer_wrapper .perm-name,
#userdetailsform #permissionScroller_outer_wrapper .perm-name,
.update-user #permissionScroller_outer_wrapper .perm-name,
#add_user #permissionScroller_outer_wrapper .perm-name,
#insert-user #permissionScroller_outer_wrapper .perm-name {
  font-weight: 600;
}
#rolesEdit #permissionScroller_outer_wrapper,
#rolesAdd #permissionScroller_outer_wrapper,
#USERS #permissionScroller_outer_wrapper,
#userdetailsform #permissionScroller_outer_wrapper,
.update-user #permissionScroller_outer_wrapper,
#add_user #permissionScroller_outer_wrapper,
#insert-user #permissionScroller_outer_wrapper {
  /* Parent rows a bit heavier */
}
#rolesEdit #permissionScroller_outer_wrapper .permission-row[data-has-children="1"],
#rolesAdd #permissionScroller_outer_wrapper .permission-row[data-has-children="1"],
#USERS #permissionScroller_outer_wrapper .permission-row[data-has-children="1"],
#userdetailsform #permissionScroller_outer_wrapper .permission-row[data-has-children="1"],
.update-user #permissionScroller_outer_wrapper .permission-row[data-has-children="1"],
#add_user #permissionScroller_outer_wrapper .permission-row[data-has-children="1"],
#insert-user #permissionScroller_outer_wrapper .permission-row[data-has-children="1"] {
  background: #f8fafc;
}
#rolesEdit #permissionScroller_outer_wrapper .permission-row[data-has-children="1"] .perm-name,
#rolesAdd #permissionScroller_outer_wrapper .permission-row[data-has-children="1"] .perm-name,
#USERS #permissionScroller_outer_wrapper .permission-row[data-has-children="1"] .perm-name,
#userdetailsform #permissionScroller_outer_wrapper .permission-row[data-has-children="1"] .perm-name,
.update-user #permissionScroller_outer_wrapper .permission-row[data-has-children="1"] .perm-name,
#add_user #permissionScroller_outer_wrapper .permission-row[data-has-children="1"] .perm-name,
#insert-user #permissionScroller_outer_wrapper .permission-row[data-has-children="1"] .perm-name {
  font-weight: 700;
}
#rolesEdit #permissionScroller_outer_wrapper,
#rolesAdd #permissionScroller_outer_wrapper,
#USERS #permissionScroller_outer_wrapper,
#userdetailsform #permissionScroller_outer_wrapper,
.update-user #permissionScroller_outer_wrapper,
#add_user #permissionScroller_outer_wrapper,
#insert-user #permissionScroller_outer_wrapper {
  /* Children slightly lighter */
}
#rolesEdit #permissionScroller_outer_wrapper .permission-row[data-has-children="0"] .perm-name,
#rolesAdd #permissionScroller_outer_wrapper .permission-row[data-has-children="0"] .perm-name,
#USERS #permissionScroller_outer_wrapper .permission-row[data-has-children="0"] .perm-name,
#userdetailsform #permissionScroller_outer_wrapper .permission-row[data-has-children="0"] .perm-name,
.update-user #permissionScroller_outer_wrapper .permission-row[data-has-children="0"] .perm-name,
#add_user #permissionScroller_outer_wrapper .permission-row[data-has-children="0"] .perm-name,
#insert-user #permissionScroller_outer_wrapper .permission-row[data-has-children="0"] .perm-name {
  font-weight: 500;
  opacity: 0.95;
}
#rolesEdit #permissionScroller_outer_wrapper,
#rolesAdd #permissionScroller_outer_wrapper,
#USERS #permissionScroller_outer_wrapper,
#userdetailsform #permissionScroller_outer_wrapper,
.update-user #permissionScroller_outer_wrapper,
#add_user #permissionScroller_outer_wrapper,
#insert-user #permissionScroller_outer_wrapper {
  /* Vertical guideline for tree */
}
#rolesEdit #permissionScroller_outer_wrapper .permission-row[data-level]:not([data-level="0"]) .perm-module::before,
#rolesAdd #permissionScroller_outer_wrapper .permission-row[data-level]:not([data-level="0"]) .perm-module::before,
#USERS #permissionScroller_outer_wrapper .permission-row[data-level]:not([data-level="0"]) .perm-module::before,
#userdetailsform #permissionScroller_outer_wrapper .permission-row[data-level]:not([data-level="0"]) .perm-module::before,
.update-user #permissionScroller_outer_wrapper .permission-row[data-level]:not([data-level="0"]) .perm-module::before,
#add_user #permissionScroller_outer_wrapper .permission-row[data-level]:not([data-level="0"]) .perm-module::before,
#insert-user #permissionScroller_outer_wrapper .permission-row[data-level]:not([data-level="0"]) .perm-module::before {
  content: "";
  position: absolute;
  left: calc(12px + var(--level) * 20px - 12px);
  top: -14px;
  bottom: -14px;
  width: 1px;
  background: #e5e7eb;
}
#rolesEdit #permissionScroller_outer_wrapper,
#rolesAdd #permissionScroller_outer_wrapper,
#USERS #permissionScroller_outer_wrapper,
#userdetailsform #permissionScroller_outer_wrapper,
.update-user #permissionScroller_outer_wrapper,
#add_user #permissionScroller_outer_wrapper,
#insert-user #permissionScroller_outer_wrapper {
  /* Leaf bullet */
}
#rolesEdit #permissionScroller_outer_wrapper .perm-expander-spacer,
#rolesAdd #permissionScroller_outer_wrapper .perm-expander-spacer,
#USERS #permissionScroller_outer_wrapper .perm-expander-spacer,
#userdetailsform #permissionScroller_outer_wrapper .perm-expander-spacer,
.update-user #permissionScroller_outer_wrapper .perm-expander-spacer,
#add_user #permissionScroller_outer_wrapper .perm-expander-spacer,
#insert-user #permissionScroller_outer_wrapper .perm-expander-spacer {
  width: 22px;
  height: 22px;
  display: inline-block;
  position: relative;
}
#rolesEdit #permissionScroller_outer_wrapper .permission-row[data-has-children="0"] .perm-expander-spacer::before,
#rolesAdd #permissionScroller_outer_wrapper .permission-row[data-has-children="0"] .perm-expander-spacer::before,
#USERS #permissionScroller_outer_wrapper .permission-row[data-has-children="0"] .perm-expander-spacer::before,
#userdetailsform #permissionScroller_outer_wrapper .permission-row[data-has-children="0"] .perm-expander-spacer::before,
.update-user #permissionScroller_outer_wrapper .permission-row[data-has-children="0"] .perm-expander-spacer::before,
#add_user #permissionScroller_outer_wrapper .permission-row[data-has-children="0"] .perm-expander-spacer::before,
#insert-user #permissionScroller_outer_wrapper .permission-row[data-has-children="0"] .perm-expander-spacer::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  display: inline-block;
}
#rolesEdit #permissionScroller_outer_wrapper,
#rolesAdd #permissionScroller_outer_wrapper,
#USERS #permissionScroller_outer_wrapper,
#userdetailsform #permissionScroller_outer_wrapper,
.update-user #permissionScroller_outer_wrapper,
#add_user #permissionScroller_outer_wrapper,
#insert-user #permissionScroller_outer_wrapper {
  /* Expander button */
}
#rolesEdit #permissionScroller_outer_wrapper .perm-expander,
#rolesAdd #permissionScroller_outer_wrapper .perm-expander,
#USERS #permissionScroller_outer_wrapper .perm-expander,
#userdetailsform #permissionScroller_outer_wrapper .perm-expander,
.update-user #permissionScroller_outer_wrapper .perm-expander,
#add_user #permissionScroller_outer_wrapper .perm-expander,
#insert-user #permissionScroller_outer_wrapper .perm-expander {
  width: 24px;
  height: 24px;
  border: 1px solid #d8dbe2;
  background: #fff;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
}
#rolesEdit #permissionScroller_outer_wrapper .perm-expander::before,
#rolesAdd #permissionScroller_outer_wrapper .perm-expander::before,
#USERS #permissionScroller_outer_wrapper .perm-expander::before,
#userdetailsform #permissionScroller_outer_wrapper .perm-expander::before,
.update-user #permissionScroller_outer_wrapper .perm-expander::before,
#add_user #permissionScroller_outer_wrapper .perm-expander::before,
#insert-user #permissionScroller_outer_wrapper .perm-expander::before {
  content: "▾";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
#rolesEdit #permissionScroller_outer_wrapper .permission-row[data-collapsed="1"] .perm-expander::before,
#rolesAdd #permissionScroller_outer_wrapper .permission-row[data-collapsed="1"] .perm-expander::before,
#USERS #permissionScroller_outer_wrapper .permission-row[data-collapsed="1"] .perm-expander::before,
#userdetailsform #permissionScroller_outer_wrapper .permission-row[data-collapsed="1"] .perm-expander::before,
.update-user #permissionScroller_outer_wrapper .permission-row[data-collapsed="1"] .perm-expander::before,
#add_user #permissionScroller_outer_wrapper .permission-row[data-collapsed="1"] .perm-expander::before,
#insert-user #permissionScroller_outer_wrapper .permission-row[data-collapsed="1"] .perm-expander::before {
  content: "▸";
}
#rolesEdit #permissionScroller_outer_wrapper,
#rolesAdd #permissionScroller_outer_wrapper,
#USERS #permissionScroller_outer_wrapper,
#userdetailsform #permissionScroller_outer_wrapper,
.update-user #permissionScroller_outer_wrapper,
#add_user #permissionScroller_outer_wrapper,
#insert-user #permissionScroller_outer_wrapper {
  /* Extra separation between top-level groups */
}
#rolesEdit #permissionScroller_outer_wrapper .permission-row[data-level="0"],
#rolesAdd #permissionScroller_outer_wrapper .permission-row[data-level="0"],
#USERS #permissionScroller_outer_wrapper .permission-row[data-level="0"],
#userdetailsform #permissionScroller_outer_wrapper .permission-row[data-level="0"],
.update-user #permissionScroller_outer_wrapper .permission-row[data-level="0"],
#add_user #permissionScroller_outer_wrapper .permission-row[data-level="0"],
#insert-user #permissionScroller_outer_wrapper .permission-row[data-level="0"] {
  border-top: 1px solid #e6edf7;
}

.height-fit-content {
  height: fit-content !important;
}

.content-footer {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 36px;
}
.content-footer .content-footer-mid {
  display: flex;
  flex-grow: 1;
}
.content-footer .content-footer-right {
  display: flex;
  column-gap: 12px;
}

.content-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 1400px) {
  .content-header {
    margin-bottom: 2em;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 992px) {
  .content-header {
    flex-direction: column;
    gap: 1em;
  }
}
.content-header .content-header-left {
  padding-right: 150px;
}
@media screen and (max-width: 992px) {
  .content-header .content-header-left {
    padding-right: 0;
    width: 100%;
  }
}
.content-header .content-header-mid {
  display: flex;
  flex-grow: 1;
}
@media screen and (max-width: 992px) {
  .content-header .content-header-mid {
    width: 100%;
  }
}
.content-header .content-header-mid select {
  border: 1px solid #eeeeee;
  border-radius: 4px;
  min-width: 150px;
  padding-left: 12px;
}
.content-header .content-header-right {
  display: flex;
  column-gap: 12px;
  padding-right: 1.5em;
}
@media screen and (max-width: 992px) {
  .content-header .content-header-right {
    width: 100%;
  }
}

:root {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
}

div {
  box-sizing: border-box;
}

input[disabled],
textarea[disabled],
select[disabled],
button[disabled],
.pdf-container[disabled],
.kopteksttoevoegen[disabled],
.staartteksttoevoegen[disabled],
.offerte-product-card[disabled],
.filename[disabled],
.offerteProducten[disabled] {
  background-color: #e8e8e8 !important;
  pointer-events: none;
}
input[disabled]:hover,
textarea[disabled]:hover,
select[disabled]:hover,
button[disabled]:hover,
.pdf-container[disabled]:hover,
.kopteksttoevoegen[disabled]:hover,
.staartteksttoevoegen[disabled]:hover,
.offerte-product-card[disabled]:hover,
.filename[disabled]:hover,
.offerteProducten[disabled]:hover {
  background-color: #e8e8e8 !important;
  cursor: default;
}
input[disabled].rounded-0,
textarea[disabled].rounded-0,
select[disabled].rounded-0,
button[disabled].rounded-0,
.pdf-container[disabled].rounded-0,
.kopteksttoevoegen[disabled].rounded-0,
.staartteksttoevoegen[disabled].rounded-0,
.offerte-product-card[disabled].rounded-0,
.filename[disabled].rounded-0,
.offerteProducten[disabled].rounded-0 {
  border-radius: 0px !important;
}

.main-container {
  display: flex;
  margin: auto;
}

.main-content {
  padding: 24px;
  display: block;
  width: calc(100% - 265px);
  height: calc(100vh - 73px);
  height: calc(100lvh - 73px);
  overflow: auto;
  overflow-x: hidden;
}
@media screen and (max-width: 992px) {
  .main-content {
    width: 100%;
  }
}
.main-content .main-body {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 992px) {
  .main-content > .row {
    margin-bottom: 80px;
  }
}
.main-content.maximize {
  width: 100%;
}

.overlay {
  height: 100vh;
  width: 100vw;
  background-color: rgba(32, 37, 51, 0.5);
  z-index: 999;
}

form input[type=text],
form input[type=password],
form input[type=number],
input[disabled],
textarea[disabled],
select[disabled],
button[disabled],
.pdf-container[disabled],
.kopteksttoevoegen[disabled],
.staartteksttoevoegen[disabled],
.offerte-product-card[disabled],
.filename[disabled],
.offerteProducten[disabled] {
  border-radius: 6px !important;
}
form input[type=text].rounded-0,
form input[type=password].rounded-0,
form input[type=number].rounded-0,
input[disabled].rounded-0,
textarea[disabled].rounded-0,
select[disabled].rounded-0,
button[disabled].rounded-0,
.pdf-container[disabled].rounded-0,
.kopteksttoevoegen[disabled].rounded-0,
.staartteksttoevoegen[disabled].rounded-0,
.offerte-product-card[disabled].rounded-0,
.filename[disabled].rounded-0,
.offerteProducten[disabled].rounded-0 {
  border-radius: 0px !important;
}

textarea.form-control,
input.form-control,
select.form-control:not(.bulkActions) {
  width: -webkit-fill-available;
  padding: 0 12px !important;
  border-radius: 4px !important;
  border: 1px solid lightgray !important;
  height: auto !important;
  min-height: 42px !important;
}
@media screen and (max-width: 768px) {
  textarea.form-control,
  input.form-control,
  select.form-control:not(.bulkActions) {
    min-height: 38px !important;
  }
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.h-42 {
  min-height: 42px;
  line-height: 24px;
}

.h-100 {
  height: 100%;
}

.no-wrap {
  flex-wrap: nowrap !important;
}

.p-0 {
  padding: 0 !important;
}

.pl-0 {
  padding-left: 0;
}

.pl-1 {
  padding-left: 0.5em;
}

.pl-2 {
  padding-left: 1em;
}

.pl-3 {
  padding-left: 1.5em;
}

.pt-0 {
  padding-top: 0em;
}

.pt-1 {
  padding-top: 0.5em;
}

.pt-2 {
  padding-top: 1em;
}

.pt-3 {
  padding-top: 1.5em;
}

.pb-0 {
  padding-bottom: 0em;
}

.pb-1 {
  padding-bottom: 0.5em;
}

.pb-2 {
  padding-bottom: 1em;
}

.pb-3 {
  padding-bottom: 1.5em;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.p-1 {
  padding: 0.5em;
}

.p-2 {
  padding: 1em;
}

.p-3 {
  padding: 1.5em;
}

.px-1 {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.px-2 {
  padding-left: 1em;
  padding-right: 1em;
}

.px-3 {
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.py-1 {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.py-2 {
  padding-top: 1em;
  padding-bottom: 1em;
}

.py-3 {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}

.w-fit {
  width: fit-content !important;
}

.m-right {
  margin: 0 0 0 auto !important;
}

.m-0 {
  margin: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pr-1 {
  padding-right: 0.5em !important;
}

.pr-2 {
  padding-right: 1em !important;
}

.pr-3 {
  padding-right: 1.5em !important;
}

.g-1 {
  gap: 0.5em;
}

.g-2 {
  gap: 1em;
}

.g-3 {
  gap: 1.5em;
}

.mr-1 {
  margin-right: 0.5em;
}

.mr-2 {
  margin-right: 1em;
}

.mr-3 {
  margin-right: 1.5em;
}

.mb-1 {
  margin-bottom: 0.5em;
}

.mb-2 {
  margin-bottom: 1em;
}

.mb-3 {
  margin-bottom: 1.5em;
}

.mb-x1 {
  margin: 0 0.5em;
}

.mb-x2 {
  margin: 0 1em;
}

.mb-x2 {
  margin: 0 1.5em;
}

.mt-1 {
  margin-top: 0.5em;
}

.mt-2 {
  margin-top: 1em;
}

.mt-3 {
  margin-top: 1.5em;
}

.shadow {
  box-shadow: 0 0 4px 0 #e1e1e1;
}

.canvas.sign {
  height: 300px;
  width: 100%;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.row > .col,
.row > [class^=col-] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.col-fit {
  width: fit-content;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.fw-bold {
  font-weight: 600;
}

.border-insert {
  border-bottom: 0.5em double black !important;
}

.border-bottom {
  border-bottom: 1px solid #03a9f4;
}

.border {
  border: 1px solid #03a9f4;
}

.border-silver {
  border-color: #e1e1e1;
}

.rounded-0 {
  border-radius: 0px !important;
}

.ql-editor {
  min-height: 200px;
}

.rounded-1 {
  border-radius: 5px !important;
}

.d-block {
  display: block !important;
}

.text-black {
  color: #000 !important;
}

.text-primary {
  color: #FF8F00 !important;
}

.black {
  color: #000;
}

.voorraadkozijnorder {
  background: rgb(255, 212, 133);
  background: linear-gradient(90deg, rgb(255, 212, 133) 0%, rgb(251, 232, 198) 15%, rgb(255, 255, 255) 35%);
}

.voorraadkozijnordertext {
  background-color: rgb(255, 212, 133);
  color: #494949;
  padding: 0.3em;
  border-radius: 5px;
  font-weight: bold;
  font-size: 14px;
  width: fit-content !important;
}

.psa {
  box-shadow: 0 0 4px 0 #c1c1c1;
  border-radius: 4px;
  padding: 10px;
  background-color: #fff052;
  color: #000;
  margin-bottom: 0.7em;
  align-items: center;
  display: flex;
  gap: 0.3em;
}

.opmerking {
  border: 1px solid #e1e1e1;
}

#invoicetexts {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
#invoicetexts .invoicetext {
  box-shadow: 0 0 4px 0 #e1e1e1;
  padding: 6px 12px;
}
#invoicetexts .invoicetext p,
#invoicetexts .invoicetext span {
  color: #5b5b5b;
  overflow: hidden;
  font-size: 15px;
  white-space: nowrap;
  width: 95%;
  text-overflow: ellipsis;
  display: block;
  text-align: left;
}
#invoicetexts .invoicetext .optionsdiv {
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
}
#invoicetexts .invoicetext .optionsdiv .editgroup {
  padding: 0 6px;
  height: 100%;
  background-color: orange;
  border-top-right-radius: 6px;
  display: flex;
  align-items: center;
}
#invoicetexts .invoicetext .optionsdiv .editgroup:hover {
  cursor: pointer;
  background-color: #ffb733;
}
#invoicetexts .invoicetext .optionsdiv .editgroup .edittext {
  color: #FFFFFF !important;
}
#invoicetexts .invoicetext .optionsdiv .deletegroup {
  padding: 0 6px;
  height: 100%;
  background-color: red;
  border-bottom-right-radius: 6px;
  display: flex;
  align-items: center;
}
#invoicetexts .invoicetext .optionsdiv .deletegroup:hover {
  cursor: pointer;
  background-color: #ff3333;
}
#invoicetexts .invoicetext .optionsdiv .deletegroup .deletetext {
  color: #FFFFFF !important;
}

.closepopup {
  width: fit-content;
  height: fit-content;
  top: 12px;
  right: 12px;
  position: absolute;
  font-size: 32px;
  cursor: pointer;
}

.tabs {
  margin-left: 12px;
}

.overviewtab {
  background-color: #FFF;
  color: #000;
  padding: 6px 12px;
  border-top-right-radius: 16px;
  border-top-left-radius: 16px;
  cursor: pointer;
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .overviewtab {
    font-size: 14px;
  }
}
.overviewtab.active {
  background-color: #03a9f4;
  color: #FFF;
}
.overviewtab:hover {
  background-color: rgb(70.7651821862, 196.1052631579, 252.7348178138);
  color: #FFF;
}

.iconininput {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
  height: fit-content;
}

.inputinicon {
  text-indent: 24px;
}

.kbw-signature {
  height: 200px;
  width: 100%;
}

.hoverpopupparent .topLayer {
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  width: 125px;
  display: block;
}
.hoverpopupparent .bottomLayer {
  position: absolute;
  height: fit-content;
  width: 400px;
  z-index: 99999;
  background-color: #FFF;
  padding: 12px;
  box-shadow: 0 0 4px 0 #c1c1c1;
  top: 100%;
  left: 50%;
}
.hoverpopupparent .bottomLayer span {
  display: flex;
  text-wrap: wrap;
}

.lagenda {
  height: 20px;
  width: 20px;
  margin: auto 0;
}

.fixTableHead {
  overflow-y: auto;
  height: calc(100vh - 200px);
  height: calc(100lvh - 200px);
}

.fixTableHead thead th {
  position: sticky;
  top: -1px;
  z-index: 999999;
}

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

.header-container {
  height: 73px;
  display: flex;
  justify-content: space-between;
  background-color: #202533;
}
.header-container .header-left {
  display: flex;
  align-items: center;
  padding-left: 24px;
  min-width: 265px;
  box-sizing: border-box;
}
@media screen and (max-width: 576px) {
  .header-container .header-left {
    min-width: unset;
  }
}
@media screen and (max-width: 576px) {
  .header-container .header-left .logo {
    display: none;
  }
}
.header-container .header-left a {
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 5.52px;
  display: flex;
  align-items: center;
}
.header-container .header-mid {
  display: flex;
  column-gap: 24px;
  padding-left: 24px;
}
.header-container .header-right {
  display: flex;
  align-items: center;
  column-gap: 12px;
  padding-right: 24px;
}
.header-container .header-right .item {
  font-family: "Open Sans", sans-serif;
  position: relative;
  cursor: pointer;
}
.header-container .header-right .item.high .count {
  background-color: #FF8A80;
}
.header-container .header-right .item.mid .count {
  background-color: #FFECB3;
}
.header-container .header-right .item.low .count {
  background-color: #ccdee7;
}
.header-container .header-right .item .count {
  color: #202533;
  position: absolute;
  font-size: 12px;
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 12px;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  font-weight: 600;
}
.header-container .header-right .user-icon {
  background-color: #fff;
  border-radius: 3px;
  height: 45px;
  width: 45px;
  display: flex;
  position: relative;
  cursor: pointer;
}
@media screen and (max-width: 480px) {
  .header-container .header-right .user-icon {
    display: none;
  }
}
.header-container .header-right .user-icon .user-sub {
  display: none;
  background-color: #202533;
  position: absolute;
  right: 0;
  padding: 6px;
  border-radius: 0 0 3px 3px;
  flex-direction: column;
  padding: 12px;
  top: 58px;
  position: absolute;
  min-width: 200px;
  z-index: 999;
}
.header-container .header-right .user-icon .user-sub .list {
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}
.header-container .header-right .user-icon .user-sub .list .list-item a {
  color: #bebebe;
}
.header-container .header-right .user-icon .user-sub .list .list-item a:hover {
  color: #fff;
}
.header-container .header-right #activeJobs.active {
  color: #f4b703;
}
.header-container .header-right #activeJobsCount {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #03a9f4;
  height: fit-content;
  font-size: 12px;
  padding: 0 5px;
  border-radius: 50%;
}
.header-container .header-right .activeJobsList {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  position: absolute;
  background-color: #3d414f;
  padding: 4px;
  right: 40px;
  top: 50px;
  height: fit-content;
  min-height: 100px;
  max-height: 400px;
  width: 300px;
  z-index: 99999;
  border-radius: 4px;
  box-shadow: 1px 1px 4px 0 #373737;
  overflow: auto;
}
.header-container .header-right .activeJobsList .activeJob {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px;
  background-color: #53586b;
  border-radius: 6px;
}
.header-container .header-right .activeJobsList .activeJob .activeJobText {
  overflow-wrap: anywhere;
  font-size: 14px;
}
.header-container .header-right #notifications.active {
  color: #f4b703;
}
.header-container .header-right #notificationsCount,
.header-container .header-right #inboxToggleCount {
  position: absolute;
  top: -20px;
  right: -15px;
  z-index: 5;
  background-color: #03a9f4;
  height: -moz-fit-content;
  height: fit-content;
  font-size: 12px;
  padding: 0 5px;
  border-radius: 50%;
  color: #FFF;
  padding: 4px 13px;
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.header-container .header-right .notificationslist {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  position: absolute;
  background-color: #3d414f;
  padding: 4px;
  right: 40px;
  top: 50px;
  height: fit-content;
  min-height: 100px;
  max-height: 400px;
  width: 300px;
  z-index: 99999;
  border-radius: 4px;
  box-shadow: 1px 1px 4px 0 #373737;
  overflow: auto;
}
.header-container .header-right .notificationslist .notification {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px;
  background-color: #53586b;
  border-radius: 6px;
}
.header-container .header-right .notificationslist .notification .notificationMessage {
  overflow-wrap: anywhere;
  font-size: 14px;
}
.header-container .header-right .notificationslist .notification .material-symbols-outlined {
  padding: 0px 6px 0px 6px;
}
.header-container .header-right .notificationslist .notification .material-symbols-outlined:hover {
  color: #03a9f4;
}
.header-container .header-right .notificationslist .notification.priority {
  background: rgb(255, 165, 0);
  background: linear-gradient(90deg, #ffa500 0%, #53586b 50%);
}
.header-container .header-right .notificationslist #markAllAsRead {
  margin: 0 0 0 auto;
  height: 30px;
  line-height: 13px;
  font-weight: bold;
}
.header-container .header-right #inboxToggle.active {
  color: #f4b703;
}
.header-container .header-right .miniInbox {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  position: absolute;
  background-color: #3d414f;
  padding: 4px;
  right: 40px;
  top: 50px;
  height: fit-content;
  min-height: 100px;
  max-height: 400px;
  width: 300px;
  z-index: 99999;
  border-radius: 4px;
  box-shadow: 1px 1px 4px 0 #373737;
  overflow: auto;
}
.header-container .header-right .miniInbox .inbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px;
  background-color: #53586b;
  border-radius: 6px;
}
.header-container .header-right .miniInbox .inbox .email {
  overflow-wrap: anywhere;
  font-size: 14px;
}
.header-container .header-right .miniInbox .inbox .from,
.header-container .header-right .miniInbox .inbox .subject {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}
.header-container .header-right .miniInbox .inbox:hover {
  cursor: pointer;
  background-color: rgb(100.8231578947, 106.8968421053, 129.9768421053);
}
.header-container .header-right .miniInbox #toInbox {
  margin: 0 0 0 auto;
  height: 30px;
  line-height: 13px;
  font-weight: bold;
}
.header-container #helpPage {
  color: #fff;
}
.header-container #helpPage:hover {
  color: #03a9f4;
  cursor: pointer;
}

aside {
  background-color: #202533;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  width: 265px;
}

.navbar-left {
  min-width: 265px;
  text-align: left;
  font-size: 16px;
  color: #bebebe;
  font-family: "Open Sans", sans-serif;
  align-self: stretch;
  min-height: calc(100vh - 73px);
  min-height: calc(100lvh - 73px);
  max-height: calc(100vh - 73px);
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 992px) {
  .navbar-left {
    position: absolute;
    left: -265px;
    z-index: 9999999;
    transition: 1s;
  }
}
.navbar-left.minimize {
  position: absolute;
  left: -265px;
  z-index: 9999999;
  transition: 1s;
}
.navbar-left.openMobileMenu {
  left: 0px;
}
.navbar-left #navigation-items {
  height: calc(100vh - 73px - 34px);
  overflow: auto;
}
.navbar-left #navigation-items .nav-container {
  padding-left: 24px;
  margin-bottom: 12px;
}
.navbar-left #navigation-items .nav-container .nav-main-item {
  color: #fff;
  display: inline-block;
  padding: 6px 0px 6px 0px;
  display: flex;
  cursor: pointer;
}
.navbar-left #navigation-items .nav-container .nav-main-item .material-icons {
  margin-right: 6px;
  font-size: 20px;
}
.navbar-left #navigation-items .nav-container .nav-main-item .menu-toggle {
  right: 6px;
}
.navbar-left #navigation-items .nav-container .nav-main-item .menu-toggle.invert {
  transform: scaleY(-1);
}
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper,
.navbar-left #navigation-items .nav-container .nav-sub-wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: fit-content;
}
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper.closed,
.navbar-left #navigation-items .nav-container .nav-sub-wrapper.closed {
  height: 0px;
}
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper .nav-sub-sub-item,
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper .nav-sub-item,
.navbar-left #navigation-items .nav-container .nav-sub-wrapper .nav-sub-sub-item,
.navbar-left #navigation-items .nav-container .nav-sub-wrapper .nav-sub-item {
  padding: 6px 6px 6px 26px;
  cursor: pointer;
  transition: color 0.1s ease-in-out;
}
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper .nav-sub-sub-item.selected a,
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper .nav-sub-item.selected a,
.navbar-left #navigation-items .nav-container .nav-sub-wrapper .nav-sub-sub-item.selected a,
.navbar-left #navigation-items .nav-container .nav-sub-wrapper .nav-sub-item.selected a {
  color: #03a9f4 !important;
  font-weight: 600;
  transition: color 0.1s ease-in-out;
}
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper .nav-sub-sub-item.selected a:hover,
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper .nav-sub-item.selected a:hover,
.navbar-left #navigation-items .nav-container .nav-sub-wrapper .nav-sub-sub-item.selected a:hover,
.navbar-left #navigation-items .nav-container .nav-sub-wrapper .nav-sub-item.selected a:hover {
  color: #bebebe;
  transition: color 0.1s ease-in-out;
}
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper .nav-sub-sub-item:hover,
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper .nav-sub-item:hover,
.navbar-left #navigation-items .nav-container .nav-sub-wrapper .nav-sub-sub-item:hover,
.navbar-left #navigation-items .nav-container .nav-sub-wrapper .nav-sub-item:hover {
  color: #fff;
  transition: color 0.1s ease-in-out;
}
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper .nav-sub-sub-item a,
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper .nav-sub-item a,
.navbar-left #navigation-items .nav-container .nav-sub-wrapper .nav-sub-sub-item a,
.navbar-left #navigation-items .nav-container .nav-sub-wrapper .nav-sub-item a {
  color: #bebebe;
  transition: color 0.1s ease-in-out;
}
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper .nav-sub-sub-item a:hover,
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper .nav-sub-item a:hover,
.navbar-left #navigation-items .nav-container .nav-sub-wrapper .nav-sub-sub-item a:hover,
.navbar-left #navigation-items .nav-container .nav-sub-wrapper .nav-sub-item a:hover {
  color: #007db6 !important;
  transition: color 0.1s ease-in-out;
}
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper {
  margin-left: 28px;
  border-left: 1px solid #636363;
}
.navbar-left #navigation-items .nav-container .nav-sub-sub-wrapper .nav-sub-sub-item {
  padding: 6px 6px 6px 12px;
}
.navbar-left #application-version {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 6px 12px;
  background-color: rgb(30.0337349398, 34.7265060241, 47.8662650602);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.navbar-left #application-version .item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.navbar-left #application-version .item p {
  color: #c2c2c2;
  font-weight: bold;
}
.navbar-left #application-version .item img {
  height: 25px;
  width: auto;
}
.navbar-left #application-version .item svg {
  height: 25px;
  width: auto;
}
.navbar-left #application-version .item svg path {
  fill: #c11111;
}

/*
* iziToast | v1.2.0
* http://izitoast.marcelodolce.com
* by Marcelo Dolce.
*/
.iziToast-capsule {
  font-family: "Open Sans", sans-serif !important;
  font-size: 0;
  height: 0;
  width: 100%;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.iziToast-capsule,
.iziToast-capsule * {
  box-sizing: border-box;
}

.iziToast-overlay {
  display: block;
  position: fixed;
  top: -100px;
  left: 0;
  right: 0;
  bottom: -100px;
  z-index: 9999997;
}

.iziToast {
  display: inline-block;
  clear: both;
  position: relative;
  font-family: "Lato", Tahoma, Arial;
  font-size: 14px;
  background: #FFF;
  border-color: #FFF;
  pointer-events: all;
  cursor: default;
  transform: translateX(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-height: 76px;
  top: 15px;
  margin-right: 10px;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 0.7rem;
  box-shadow: 1px 2px 4px 0 rgba(161, 161, 161, 0.6196078431);
}

.iziToast > .iziToast-progressbar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  background: rgba(255, 255, 255, 0);
}

.iziToast > .iziToast-progressbar > div {
  height: 2px;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  border-radius: 0 0 3px 3px;
}

.iziToast.iziToast-balloon:before {
  content: "";
  position: absolute;
  right: 8px;
  left: auto;
  width: 0;
  height: 0;
  top: 100%;
  border-right: 0 solid transparent;
  border-left: 15px solid transparent;
  border-top: 10px solid #000;
  border-top-color: inherit;
  border-radius: 0;
}

.iziToast.iziToast-balloon .iziToast-progressbar {
  top: 0;
  bottom: auto;
}

.iziToast.iziToast-balloon > div {
  border-radius: 0 0 0 3px;
}

.iziToast > .iziToast-cover {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  margin: 0;
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.1);
}

.iziToast > .iziToast-close {
  position: absolute;
  right: 0;
  top: 0px;
  border: 0;
  padding: 0;
  opacity: 0.4;
  width: 50px;
  height: 50px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAJPAAACTwBcGfW0QAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAD3SURBVFiF1ZdtDoMgDEBfdi4PwAX8vLFn0qT7wxantojKupmQmCi8R4tSACpgjC2ICCUbEBa8ingjsU1AXRBeR8aLN64FiknswN8CYefBBDQ3whuFESy7WyQMeC0ipEI0A+0FeBvHUFN8xPaUhAH/iKoWsnXHGegy4J0yxialOfaHJAz4bhRzQzgDvdGnz4GbAonZbCQMuBm1K/kcFu8Mp1N2cFFpsxsMuJqqbIGExGl4loARajU1twskJLLhIsID7+tvUoDnIjTg5T9DPH9EBrz8rxjPzciAl9+O8SxI8CzJ8CxKFfh3ynK8Dyb8wNHM/XDqejx/AtNyPO87tNybAAAAAElFTkSuQmCC) no-repeat 50% 50%;
  background-size: 10px;
  cursor: pointer;
  outline: 0;
}

.iziToast > .iziToast-close:hover {
  opacity: 1;
}

.iziToast > .iziToast-body {
  position: relative;
  min-height: 60px;
  text-align: left;
  height: fit-content;
  padding: 1rem !important;
  width: 380px;
}

.iziToast > .iziToast-body::after {
  content: "";
  display: table;
  clear: both;
}

.iziToast > .iziToast-body .iziToast-texts {
  display: flex;
  flex-direction: column;
  margin-left: 42px;
  color: rgb(15, 23, 42) !important;
}

.iziToast > .iziToast-body .iziToast-buttons {
  min-height: 17px;
  float: left;
  margin: 4px -2px;
}

.iziToast > .iziToast-body .iziToast-buttons > a,
.iziToast > .iziToast-body .iziToast-buttons > button,
.iziToast > .iziToast-body .iziToast-buttons > input {
  position: relative;
  display: inline-block;
  margin: 2px;
  border-radius: 2px;
  border: 0;
  padding: 5px 10px;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.1);
  color: #000;
}

.iziToast > .iziToast-body .iziToast-buttons > a:hover,
.iziToast > .iziToast-body .iziToast-buttons > button:hover,
.iziToast > .iziToast-body .iziToast-buttons > input:hover {
  background: rgba(0, 0, 0, 0.2);
}

.iziToast > .iziToast-body .iziToast-buttons > a:focus,
.iziToast > .iziToast-body .iziToast-buttons > button:focus,
.iziToast > .iziToast-body .iziToast-buttons > input:focus {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.iziToast > .iziToast-body .iziToast-buttons > a:active,
.iziToast > .iziToast-body .iziToast-buttons > button:active,
.iziToast > .iziToast-body .iziToast-buttons > input:active {
  top: 1px;
}

.iziToast > .iziToast-body .iziToast-icon {
  height: 100%;
  position: absolute;
}

.iziToast > .iziToast-body .iziToast-icon.ico-info {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAflBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACCtoPsAAAAKXRSTlMA6PsIvDob+OapavVhWRYPrIry2MxGQ97czsOzpJaMcE0qJQOwVtKjfxCVFeIAAAI3SURBVFjDlJPZsoIwEETnCiGyb8q+qmjl/3/wFmGKwjBROS9QWbtnOqDDGPq4MdMkSc0m7gcDDhF4NRdv8NoL4EcMpzoJglPl/KTDz4WW3IdvXEvxkfIKn7BMZb1bFK4yZFqghZ03jk0nG8N5NBwzx9xU5cxAg8fXi20/hDdC316lcA8o7t16eRuQvW1XGd2d2P8QSHQDDbdIII/9CR3lUF+lbucfJy4WfMS64EJPORnrZxtfc2pjJdnbuags3l04TTtJMXrdTph4Pyg4XAjugAJqMDf5Rf+oXx2/qi4u6nipakIi7CsgiuMSEF9IGKg8heQJKkxIfFSUU/egWSwNrS1fPDtLfon8sZOcYUQml1Qv9a3kfwsEUyJEMgFBKzdV8o3Iw9yAjg1jdLQCV4qbd3no8yD2GugaC3oMbF0NYHCpJYSDhNI5N2DAWB4F4z9Aj/04Cna/x7eVAQ17vRjQZPh+G/kddYv0h49yY4NWNDWMMOMUIRYvlTECmrN8pUAjo5RCMn8KoPmbJ/+Appgnk//Sy90GYBCGgm7IAskQ7D9hFKW4ApB1ei3FSYD9PjGAKygAV+ARFYBH5BsVgG9kkBSAQWKUFYBRZpkUgGVinRWAdUZQDABBQdIcAElDVBUAUUXWHQBZx1gMAGMprM0AsLbVXHsA5trZe93/wp3svQ0YNb/jWV3AIOLsMtlznSNOH7JqjOpDVh7z8qCZR10ftvO4nxeOvPLkpSuvfXnxzKtvXr7j+v8C5ii0e71At7cAAAAASUVORK5CYII=) no-repeat 50% 50%;
  background-size: 85%;
  width: 24px;
  height: 24px;
  filter: invert(25%) sepia(120%) saturate(3207%) hue-rotate(200deg) brightness(100%) contrast(130%);
}

.iziToast > .iziToast-body .iziToast-icon.ico-warning {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAkFBMVEUAAAAAAAABAAIAAAABAAIAAAMAAAABAAIBAAIBAAIAAAIAAAABAAIAAAABAAICAAICAAIAAAIAAAAAAAAAAAABAAIBAAIAAAMAAAABAAIBAAMBAAECAAIAAAIAAAIAAAABAAIBAAIBAAMBAAIBAAEAAAIAAAMAAAAAAAABAAECAAICAAIAAAIAAAMAAAQAAAE05yNAAAAAL3RSTlMAB+kD7V8Q+PXicwv7I9iYhkAzJxnx01IV5cmnk2xmHfzexsK4eEw5L7Gei39aRw640awAAAHQSURBVFjD7ZfJdoJAEEWJgCiI4oDiPM8m7///LidErRO7sHrY5u7YXLr7vKqu9kTC0HPmo9n8cJbEQOzqqAdAUHeUZACQuTkGDQBoDJwkHZR0XBz9FkpafXuHP0SJ09mGeJLZ5wwlTmcbA0THPmdEK7XPGTG1zxmInn3OiJ19zkB0jSVTKExMHT0wjAwlWzC0fSPHF1gWRpIhWMYm7fYTFcQGlbemf4dFfdTGg0B/KXM8qBU/3wntbq7rSGqvJ9kla6IpueFJet8fxfem5yhykjyOgNaWF1qSGd5JMNNxpNF7SZQaVh5JzLrTCZIEJ1GyEyVyd+pClMjdaSJK5O40giSRu5PfFiVyd1pAksjdKRnrSsbVdbiHrgT7yss315fkVQPLFQrL+4FHeOXKO5YRFEKv5AiFaMlKLlBpJuVCJlC5sJfvCgztru/3NmBYccPgGTxRAzxn1XGEMUf58pXZvjoOsOCgjL08+b53mtfAM/SVsZcjKLtysQZPqIy9HPP3m/3zKItRwT0LyQo8sTr26tcO83DIUMWIJjierHLsJda/tbNBFY0BP/bKtcM8HNIWCK3aYR4OMzgxo5w5EFLOLKDExXAm9gI4E3iAO94/Ct/lKWuM2LMGbgAAAABJRU5ErkJggg==) no-repeat 50% 50%;
  background-size: 85%;
  width: 24px;
  height: 24px;
  filter: invert(25%) sepia(120%) saturate(3207%) hue-rotate(34deg) brightness(133%) contrast(100%);
}

.iziToast > .iziToast-body .iziToast-icon.ico-error {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAeFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVyEiIAAAAJ3RSTlMA3BsB98QV8uSyWVUFz7+kcWMM2LuZioBpTUVBNcq2qaibj4d1azLZZYABAAACZElEQVRYw7WX25KCMAyGAxUoFDkpiohnV97/DXeGBtoOUprZ2dyo1K82fxKbwJJVp+KQZ7so2mX5oThVQLKwjDe9YZu4DF3ptAn6rxY0qQPOEq9fNC9ha3y77a22ba24v+9Xbe8v8x03dPOC2/NdvB6xeSreLfGJpnx0TyotKqLm2s7Jd/WO6ivXNp0tCy02R/aFz5VQ5wUPlUL5fIfj5KIlVGU0nWHm/5QtoTVMWY8mzIVu1K9O7XH2JiU/xnOOT39gnUfj+lFHddx4tFjL3/H8jjzaFCy2Rf0c/fdQyQszI8BDR973IyMSKa4krjxAiW/lkRvMP+bKK9WbYS1ASQg8dKjaUGlYPwRe/WoIkz8tiQchH5QAEMv6T0k8MD4mUyWr4E7jAWqZ+xWcMIYkXvlwggJ3IvFK+wIOcpXAo8n8P0COAaXyKH4OsjBuZB4ew0IGu+H1SebhNazsQBbWm8yj+hFuUJB5eMsN0IUXmYendAFFfJB5uEkRMYwxmcd6zDGRtmQePEykAgubymMRFmMxCSIPCRbTuFNN5OGORTjmNGc0Po0m8Uv0gcCry6xUhR2QeLii9tofbEfhz/qvNti+OfPqNm2Mq6105FUMvdT4GPmufMiV8PqBMkc+DdT1bjYYbjzU/ew23VP4n3mLAz4n8Jtv/Ui3ceTT2mzz5o1mZt0gnBpmsdjqRqVlmplcPdqa7X23kL9brdm2t/uBYDPn2+tyu48mtIGD10JTuUrukVrbCFiwDzcHrPjxKt7PW+AZQyT/WESO+1WL7f3o+WLHL2dYMSZsg6dg/z360ofvP4//v1NPzgs28WlWAAAAAElFTkSuQmCC) no-repeat 50% 50%;
  background-size: 80%;
  width: 24px;
  height: 24px;
  filter: invert(25%) sepia(120%) saturate(3207%) hue-rotate(356deg) brightness(75%) contrast(141%);
}

.iziToast > .iziToast-body .iziToast-icon.ico-success {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAIVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABt0UjBAAAACnRSTlMApAPhIFn82wgGv8mVtwAAAKVJREFUSMft0LEJAkEARNFFFEw1NFJb8CKjAy1AEOzAxNw+bEEEg6nyFjbY4LOzcBwX7S/gwUxoTdIn+Jbv4Lv8bx446+kB6VsBtK0B+wbMCKxrwL33wOrVeeChX28n7KTOTjgoEu6DRSYAgAAAAkAmAIAAAAIACQIkMkACAAgAIACAyECBKAOJuCagTJwSUCaUAEMAABEBRwAAEQFLbCJgO4bW+AZKGnktR+jAFAAAAABJRU5ErkJggg==) no-repeat 50% 50%;
  background-size: 85%;
  width: 24px;
  height: 24px;
  filter: invert(25%) sepia(100%) saturate(3207%) hue-rotate(93deg) brightness(162%) contrast(100%);
}

.iziToast > .iziToast-body .iziToast-icon.ico-question {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfhCQkUEhFovxTxAAAEDklEQVRo3s2ZTWgTQRTHf03ipTRUqghNSgsRjHgQrFUQC6JgD1Kak3gQUUoPqRdBglf1oBehBws9Cn4cGk+1SOmh2upBxAYVoeJHrR9tgq0i1Cq0lqYeks7MbpPdmU00/c8hm9n33v/t7Nt5M2+qMEWQI0QIibZKRrQpHvLL2KI2wnQzzBKrDm2RIeKEy01dTYKUI7G1ZRknQXV5yP10kTYgly1NF/5S6duZ8ES+1iZodyaocrjXxE0OFeifYYgp0mRIkwFChAkRJsIxGgrIP+I0n82fvZW5dc/zkss0O2o1c5mX6/TmaDWl77RFe5YkUW3tKEmyFv0lOvXJ/fTYnmCEFuMRbGHEZqVHLyT9DFjUJmkzJl9DG5MWWwM6Llif/gF1nukB6nhgGwUXdFrE+wiURA8QoM9i0zEWWpXQW+ZsyeRrOMuyEo5Fv4gmy4dXPvqcC+pH2VRYaMwy+OWG+iLGCgm0W0Kv9HdvR8ASjmKCXpuK/bxiV/76A/v5UdDIZuKcJGjrnec5KZ7wwsWFOp6xPX/9mt2sqDe7FO+Kf/fXHBPPDWpdXGhTpLvUG9VKwh1xMDDjkvu+cNDFBTk7ptX1QkKZ850m3duu6fcrWxwdaFFyREJ2j4vOpKP6Du6z4uJCv8sYJIVkCnJBGGZaBONO3roY2EqNrSfIPi7SKP4fdXyNUd6I6wbSAHEl33tFLe+FlSsusnK90A0+oEPcuufZgXnOi+u9LrKSJQZQw6LwqBnv2CKsfHORbFbyQhA6xN/pEuihSdj56Co7LWRjPiKie6gkB2LiKuUqK5kiPkLiz1QJ9K1cNXBAMoUCigNpQ9IqDtMI1HKA4/jyvUsaoSyZLA5kjOjDPFZen8Ql5TsvBskUgjciIPSX3QAXC86DT7VWvlEh/xZ+ij9BDVWJ0QL0SbZq6QaFxoLPcXPmBLveLCc4wXdDK6s+6/vwhCSniFLPXW0NJe5UB8zKCsviqpc7vGPVQFcyZbyPwGD+d5ZnxmNWlhG4xSBZZjivjIWHEQgoDkSMjMwTo54569JSE5IpA7EyJSMTyGTUAUFlO1ZKOtaHTMeL1PhYYFTcihmY2cQ5+ullj7EDkiVfVez2sCTz8yiv84djhg7IJVk81xFWJlPdfHBG0flkRC/zQFZ+DSllNtfDdUsOMCliyGX5uOzU3ZhIXFDof4m1gDuKbEx0t2YS25gVGpcMnr/I1kx3c6piB8P8ZoqEwfMX3ZyCXynJTmq/U7NUXqfUzCbWL1wqVKBQUeESzQYoUlW8TAcVL1RCxUu1G6BYXfFyfQ4VPbDI4T8d2WzgQ6sc/vmxnTsqfHCZQzUJxm1h5dxS5Tu6lQgTZ0ipqRVqSwzTbbLHMt+c19iO76tsx/cLZub+Ali+tYC93olEAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA5LTA5VDIwOjE4OjE3KzAyOjAwjKtfjgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wOS0wOVQyMDoxODoxNyswMjowMP325zIAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC) no-repeat 50% 50%;
  background-size: 85%;
  width: 24px;
  height: 24px;
  filter: invert(25%) sepia(100%) saturate(2000%) hue-rotate(32deg) brightness(190%) contrast(88%);
}

.iziToast > .iziToast-body .iziToast-message,
.iziToast > .iziToast-body .iziToast-title {
  padding: 0;
  font-size: 14px;
  line-height: 16px;
  text-align: left;
  float: left;
  white-space: normal;
  font-weight: 500;
}

.iziToast > .iziToast-body .iziToast-title {
  color: rgb(15, 23, 42) !important;
  margin: 0;
  font-weight: 500;
}

.iziToast > .iziToast-body .iziToast-message {
  color: rgb(100, 116, 139) !important;
  margin: 7px 0 0 0;
  font-weight: 500;
}

.iziToast.iziToast-animateInside .iziToast-buttons-child,
.iziToast.iziToast-animateInside .iziToast-icon,
.iziToast.iziToast-animateInside .iziToast-message,
.iziToast.iziToast-animateInside .iziToast-title {
  opacity: 0;
}

.iziToast-target {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.iziToast-target .iziToast-capsule {
  overflow: hidden;
}

.iziToast-target .iziToast-capsule:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.iziToast-target .iziToast-capsule .iziToast {
  width: 100%;
  float: left;
}

.iziToast-wrapper {
  z-index: 9999999;
  position: fixed;
  width: 100%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.iziToast-wrapper .iziToast.iziToast-balloon:before {
  border-right: 0 solid transparent;
  border-left: 15px solid transparent;
  border-top: 10px solid #000;
  border-top-color: inherit;
  right: 8px;
  left: auto;
}

.iziToast-wrapper-bottomLeft {
  left: 0;
  bottom: 0;
}

.iziToast-wrapper-bottomLeft .iziToast.iziToast-balloon:before,
.iziToast-wrapper-topLeft .iziToast.iziToast-balloon:before {
  border-right: 15px solid transparent;
  border-left: 0 solid transparent;
  right: auto;
  left: 8px;
}

.iziToast-wrapper-bottomRight {
  right: 0;
  bottom: 0;
  text-align: right;
}

.iziToast-wrapper-topLeft {
  left: 0;
  top: 0;
}

.iziToast-wrapper-topRight {
  top: 0;
  right: 0;
  text-align: right;
}

.iziToast-wrapper-topCenter {
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.iziToast-wrapper-bottomCenter,
.iziToast-wrapper-center {
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.iziToast-wrapper-center {
  top: 0;
  justify-content: center;
  flex-flow: column;
  align-items: center;
}

.iziToast-rtl {
  direction: rtl;
  padding: 8px 0 9px 45px;
  font-family: Tahoma, "Lato", Arial;
}

.iziToast-rtl .iziToast-cover {
  left: auto;
  right: 0;
}

.iziToast-rtl .iziToast-close {
  right: auto;
  left: 0;
}

.iziToast-rtl .iziToast-body {
  padding: 0 10px 0 0;
  margin: 0 16px 0 0;
  text-align: right;
}

.iziToast-rtl .iziToast-body .iziToast-buttons,
.iziToast-rtl .iziToast-body .iziToast-message,
.iziToast-rtl .iziToast-body .iziToast-texts,
.iziToast-rtl .iziToast-body .iziToast-title {
  float: right;
  text-align: right;
}

.iziToast-rtl .iziToast-body .iziToast-icon {
  left: auto;
  right: 0;
}

@media screen and (max-width: 576px) {
  .iziToast-wrapper {
    padding: 10px 15px;
  }
  .iziToast-cover {
    border-radius: 3px 0 0 3px;
  }
  .iziToast {
    width: auto;
  }
}
.iziToast.iziToast-theme-dark {
  background: #565c70;
  border-color: #565c70;
}

.iziToast.iziToast-theme-dark .iziToast-title {
  color: #fff;
}

.iziToast.iziToast-theme-dark .iziToast-message {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
}

.iziToast.iziToast-theme-dark .iziToast-close {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfgCR4OIQIPSao6AAAAwElEQVRIx72VUQ6EIAwFmz2XB+AConhjzqTJ7JeGKhLYlyx/BGdoBVpjIpMJNjgIZDKTkQHYmYfwmR2AfAqGFBcO2QjXZCd24bEggvd1KBx+xlwoDpYmvnBUUy68DYXD77ESr8WDtYqvxRex7a8oHP4Wo1Mkt5I68Mc+qYqv1h5OsZmZsQ3gj/02h6cO/KEYx29hu3R+VTTwz6D3TymIP1E8RvEiiVdZfEzicxYLiljSxKIqlnW5seitTW6uYnv/Aqh4whX3mEUrAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE2LTA5LTMwVDE0OjMzOjAyKzAyOjAwl6RMVgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNi0wOS0zMFQxNDozMzowMiswMjowMOb59OoAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC) no-repeat 50% 50%;
  background-size: 8px;
}

.iziToast.iziToast-theme-dark .iziToast-icon {
  color: #fff;
}

.iziToast.iziToast-theme-dark .iziToast-icon.ico-info {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAflBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////vroaSAAAAKXRSTlMA6PsIvDob+OapavVhWRYPrIry2MxGQ97czsOzpJaMcE0qJQOwVtKjfxCVFeIAAAI3SURBVFjDlJPZsoIwEETnCiGyb8q+qmjl/3/wFmGKwjBROS9QWbtnOqDDGPq4MdMkSc0m7gcDDhF4NRdv8NoL4EcMpzoJglPl/KTDz4WW3IdvXEvxkfIKn7BMZb1bFK4yZFqghZ03jk0nG8N5NBwzx9xU5cxAg8fXi20/hDdC316lcA8o7t16eRuQvW1XGd2d2P8QSHQDDbdIII/9CR3lUF+lbucfJy4WfMS64EJPORnrZxtfc2pjJdnbuags3l04TTtJMXrdTph4Pyg4XAjugAJqMDf5Rf+oXx2/qi4u6nipakIi7CsgiuMSEF9IGKg8heQJKkxIfFSUU/egWSwNrS1fPDtLfon8sZOcYUQml1Qv9a3kfwsEUyJEMgFBKzdV8o3Iw9yAjg1jdLQCV4qbd3no8yD2GugaC3oMbF0NYHCpJYSDhNI5N2DAWB4F4z9Aj/04Cna/x7eVAQ17vRjQZPh+G/kddYv0h49yY4NWNDWMMOMUIRYvlTECmrN8pUAjo5RCMn8KoPmbJ/+Appgnk//Sy90GYBCGgm7IAskQ7D9hFKW4ApB1ei3FSYD9PjGAKygAV+ARFYBH5BsVgG9kkBSAQWKUFYBRZpkUgGVinRWAdUZQDABBQdIcAElDVBUAUUXWHQBZx1gMAGMprM0AsLbVXHsA5trZe93/wp3svQ0YNb/jWV3AIOLsMtlznSNOH7JqjOpDVh7z8qCZR10ftvO4nxeOvPLkpSuvfXnxzKtvXr7j+v8C5ii0e71At7cAAAAASUVORK5CYII=) no-repeat 50% 50%;
  background-size: 85%;
}

.iziToast.iziToast-theme-dark .iziToast-icon.ico-warning {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAllBMVEUAAAD////+//3+//3+//3///////z+//3+//3+//3////////////9//3////+//39//3///3////////////+//3+//39//3///z+//z+//7///3///3///3///3////////+//3+//3+//3+//z+//3+//7///3///z////////+//79//3///3///z///v+//3///+trXouAAAAMHRSTlMAB+j87RBf+PXiCwQClSPYhkAzJxnx05tSyadzcmxmHRbp5d7Gwrh4TDkvsYt/WkdQzCITAAAB1UlEQVRYw+3XaXKCQBCGYSIIighoxCVqNJrEPfly/8vFImKXduNsf/Mc4K1y7FnwlMLQc/bUbj85R6bA1LXRDICg6RjJcZa7NQYtnLUGTpERSiOXxrOPkv9s30iGKDmtbYir3H7OUHJa2ylAuvZzRvzUfs7Ii/2cgfTt54x82s8ZSM848gJmYtroQzA2jHwA+LkBIEuMGt+QIng1igzlyMrkuP2CyOi47axRaYTL5jhDJehoR+aovC29s3iIyly3Eb+hRCvZo2qsGTnhKr2cLDS+J73GsqBI9W80UCmWWpEuhIjh6ZRGjyNRarjzKGJ2Ou2himCvjHwqI+rTqQdlRH06TZQR9ek0hiqiPp06mV4ke7QPX6ERUZxO8Uo3sqrfhxvoRrCpvXwL/UjR9GRHMIvLgke4d5QbiwhM6JV2YKKF4vIl7XIBkwm4keryJVmvk/TfwcmPwQNkUQuyA2/sYGwnXL7GPu4bW1jYsmevrNj09/MGZMOEPXslQVqO8hqykD17JfPHP/bmo2yGGpdZiH3IZvzZa7B3+IdDjjpjesHJcvbs5dZ/e+cddVoDdvlq7x12Nac+iN7e4R8OXTjp0pw5CGnOLNDEzeBs5gVwFniAO+8f8wvfeXP2hyqnmwAAAABJRU5ErkJggg==) no-repeat 50% 50%;
  background-size: 85%;
}

.iziToast.iziToast-theme-dark .iziToast-icon.ico-error {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAeFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////GqOSsAAAAJ3RSTlMA3BsB98QV8uSyWVUFz6RxYwzYvbupmYqAaU1FQTXKv7abj4d1azKNUit3AAACZElEQVRYw7WXaZOCMAyGw30UORRQBLxX/v8/3BkaWjrY2szO5otKfGrzJrEp6Kw6F8f8sI+i/SE/FucKSBaWiT8p5idlaEtnXTB9tKDLLHAvdSatOan3je93k9F2vRF36+mr1a6eH2NFNydoHq/ieU/UXcWjjk9XykdNWq2ywtp4tXL6Wb2T/MqtzzZutsrNyfvA51KoQROhVCjfrnASIRpSVUZiD5v4RbWExjRdJzSmOsZFvzYz59kRSr6V5zE+/QELHkNdb3VRx45HS1b1u+zfkkcbRAZ3qJ9l/A4qefHUDMShJe+6kZKJDD2pLQ9Q4lu+5Q7rz7Plperd7AtQEgIPI6o2dxr2D4GXvxqCiKcn8cD4gxIAEt7/GYkHL16KqeJd0NB4gJbXfgVnzCGJlzGcocCVSLzUvoAj9xJ4NF7/R8gxoVQexc/hgBpSebjPjgPs59cHmYfn7NkDb6wXmUf1I1ygIPPw4gtgCE8yDw8eAop4J/PQcBExjQmZx37MsZB2ZB4cLKQCG5vKYxMWSzMxIg8pNtOyUkvkocEmXGo69mh8FgnxS4yBwMvDrJSNHZB4uC3ayz/YkcIP4lflwVIT+OU07ZSjrbTkZQ6dTPkYubZ8GC/Cqxu6WvJZII93dcCw46GdNqdpTeF/tiMOuDGB9z/NI6NvyWetGPM0g+bVNeovBmamHXWj0nCbEaGeTMN2PWrqd6cM26ZxP2DeJvj+ph/30Zi/GmRbtlK5SptI+nwGGnvH6gUruT+L16MJHF+58rwNIifTV0vM8+hwMeOXAb6Yx0wXT+b999WXfvn+8/X/F7fWzjdTord5AAAAAElFTkSuQmCC) no-repeat 50% 50%;
  background-size: 80%;
}

.iziToast.iziToast-theme-dark .iziToast-icon.ico-success {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAIVBMVEUAAAD////////////////////////////////////////PIev5AAAACnRSTlMApAPhIFn82wgGv8mVtwAAAKVJREFUSMft0LEJAkEARNFFFEw1NFJb8CKjAy1AEOzAxNw+bEEEg6nyFjbY4LOzcBwX7S/gwUxoTdIn+Jbv4Lv8bx446+kB6VsBtK0B+wbMCKxrwL33wOrVeeChX28n7KTOTjgoEu6DRSYAgAAAAkAmAIAAAAIACQIkMkACAAgAIACAyECBKAOJuCagTJwSUCaUAEMAABEBRwAAEQFLbCJgO4bW+AZKGnktR+jAFAAAAABJRU5ErkJggg==) no-repeat 50% 50%;
  background-size: 85%;
}

.iziToast.iziToast-theme-dark .iziToast-icon.ico-question {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfhCQkUEg18vki+AAAETUlEQVRo3s1ZTWhbRxD+VlIuxsLFCYVIIQYVopBDoK5bKDWUBupDMNbJ5FBKg/FBziUQdE9yaC+FHBrwsdCfQ9RTGoLxwWl+DqHEojUFFydxnB9bInZDqOsErBrr6yGvs/ueX97bldTKo4Pe7puZb3Z33s7srIIjMY1jyCEjP6ImvyX8pF64arSHznKC06wzijY5xSKz7YbuYokV2lODsyyxqz3gSY6z6gCuqcpxJluFH+Z8U+D/0jyHoxFUBHgfvsGHIS9WMIUlVFFDFTUAGWSRQRY5HMeBEP6b+Ew9dh/7INd2jGeO59kfKdXP85zbIbfGQVf4sYC3N1hm3lo6zzIbPvk6x+zBk7wQGMEMB5xncIAzAS0XrFySSV72iS1yyBVcdA1x0afrsoUJgdFfY2+z8ADAXl7zz0KcwJiPfZKpVuABgClO+nRG+QIHDdfb4qlWwUXvKW4Z7vi6L4J9vg+vbfCeCeZH2RfOdMOc/HbCA4BvIW6EMQz7XK/ltd+hP+VzR9mgva2YSfyGI17fA7ynnocqeQNFfIJ0oHsdv6CC2+rXGBN6cQdveY3fcVRtmy/HDete+93zy8jA8zV7YkwYMrjHzRddRsCdiVCwwmh6wg9iTNC7Y9XIF1iS7kbUpsvvGEdPuTfSgAEjRpR096x0liPFD/Eqt2NMuBQzB2XhrACAApjFsuQFh9XdGAX70B3oSuNdnMVBaX+sopYxjwVpHFBVACyKTXNoktjD+6Ll8xhenS9MAAkAI/Lux2YNUOs4I413Ypg1SgEAu7kpFvWjaeJe0fJHDGe/cNaZBkekudw8PMA+0fMwlndZeAsJ5KR/qhUDUJCnSiyvRsolkJHGUgvjH8QXDgZopEzKMKDqCKrwEQ4C6MH7GEXC665buLJG8hlQc4LP4paxfJrOqYVYYY2UARfEIazTbgDg2dB98GebzJd54b8L/iWNdLyooeR6CHyZ+6xk0yKxkYg6nEVSUG4VJ9QJ9cxRCxO+9WiOyvgUeexXP1hLGH5nGuBWVtiSp4vqe3VP0UFWI9Wan4Er3v8q7jjPWVtm4FtcQQMrOKO2nOQCM5AyDMi56FDrKHA/1nyppS1ppBpYaE8wciEjGI2AaeM41kI4doDX4XiT3Qm1gevyruCgZg9P8xIv8m1nCzTKq6oiJ9xTMiZ505P5m8cdZ0CnZMVXHVljM7WMBzxpyDxygtdxoCEFTaMIWbZU85UvBjgUMYy0fBaAF8V1Lj9qWQ1aMZ5f4k9r+AGMSkMP1vZoZih6k6sicc5h/OFHM9vDqU/VIU7zJZdYYsKGH4g4nAJMGiXZRds1pVMoZ69RM5vfkbh0qkBhsnS2RLMLilQdL9MBHS9UAh0v1e6CYnXHy/WeeCcvLDwl/9OVze69tPKM+M+v7eJN6OzFpWdEF0ucDbhVNFXadnVrmJFlkVNGTS2M6pzmhMvltfPhnN2B63sVuL7fcNP3D1TSk2ihosPrAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA5LTA5VDIwOjE4OjEzKzAyOjAweOR7nQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wOS0wOVQyMDoxODoxMyswMjowMAm5wyEAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC) no-repeat 50% 50%;
  background-size: 85%;
}

.iziToast.iziToast-theme-dark .iziToast-buttons > a,
.iziToast.iziToast-theme-dark .iziToast-buttons > button,
.iziToast.iziToast-theme-dark .iziToast-buttons > input {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.iziToast.iziToast-theme-dark .iziToast-buttons > a:hover,
.iziToast.iziToast-theme-dark .iziToast-buttons > button:hover,
.iziToast.iziToast-theme-dark .iziToast-buttons > input:hover {
  background: rgba(255, 255, 255, 0.2);
}

.iziToast.iziToast-theme-dark .iziToast-buttons > a:focus,
.iziToast.iziToast-theme-dark .iziToast-buttons > button:focus,
.iziToast.iziToast-theme-dark .iziToast-buttons > input:focus {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.iziToast.iziToast-color-red {
  border-left: 4px solid rgb(239, 68, 68);
}

.iziToast.iziToast-color-orange {
  border-left: 4px solid rgb(249, 115, 22);
}

.iziToast.iziToast-color-yellow {
  border-left: 4px solid rgb(234, 179, 8);
}

.iziToast.iziToast-color-blue {
  border-left: 4px solid rgb(59, 130, 246);
}

.iziToast.iziToast-color-green {
  border-left: 4px solid rgb(74, 222, 128);
}

.iziToast.iziToast-layout2 .iziToast-body .iziToast-message {
  width: 100%;
}

.iziToast.iziToast-layout3 {
  border-radius: 2px;
}

.iziToast.iziToast-layout3::after {
  display: none;
}

.iziToast .revealIn,
.iziToast.revealIn {
  -webkit-animation: iziT-revealIn 1s cubic-bezier(0.25, 1.6, 0.25, 1) both;
  -moz-animation: iziT-revealIn 1s cubic-bezier(0.25, 1.6, 0.25, 1) both;
  animation: iziT-revealIn 1s cubic-bezier(0.25, 1.6, 0.25, 1) both;
}

.iziToast .slideIn,
.iziToast.slideIn {
  -webkit-animation: iziT-slideIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both;
  -moz-animation: iziT-slideIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both;
  animation: iziT-slideIn 1s cubic-bezier(0.16, 0.81, 0.32, 1) both;
}

.iziToast.bounceInLeft {
  -webkit-animation: iziT-bounceInLeft 0.7s ease-in-out both;
  animation: iziT-bounceInLeft 0.7s ease-in-out both;
}

.iziToast.bounceInRight {
  -webkit-animation: iziT-bounceInRight 0.85s ease-in-out both;
  animation: iziT-bounceInRight 0.85s ease-in-out both;
}

.iziToast.bounceInDown {
  -webkit-animation: iziT-bounceInDown 0.7s ease-in-out both;
  animation: iziT-bounceInDown 0.7s ease-in-out both;
}

.iziToast.bounceInUp {
  -webkit-animation: iziT-bounceInUp 0.7s ease-in-out both;
  animation: iziT-bounceInUp 0.7s ease-in-out both;
}

.iziToast.fadeIn {
  -webkit-animation: iziT-fadeIn 0.5s ease both;
  animation: iziT-fadeIn 0.5s ease both;
}

.iziToast.fadeInUp {
  -webkit-animation: iziT-fadeInUp 0.7s ease both;
  animation: iziT-fadeInUp 0.7s ease both;
}

.iziToast.fadeInDown {
  -webkit-animation: iziT-fadeInDown 0.7s ease both;
  animation: iziT-fadeInDown 0.7s ease both;
}

.iziToast.fadeInLeft {
  -webkit-animation: iziT-fadeInLeft 0.85s cubic-bezier(0.25, 0.8, 0.25, 1) both;
  animation: iziT-fadeInLeft 0.85s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

.iziToast.fadeInRight {
  -webkit-animation: iziT-fadeInRight 0.85s cubic-bezier(0.25, 0.8, 0.25, 1) both;
  animation: iziT-fadeInRight 0.85s cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

.iziToast.flipInX {
  -webkit-animation: iziT-flipInX 0.85s cubic-bezier(0.35, 0, 0.25, 1) both;
  animation: iziT-flipInX 0.85s cubic-bezier(0.35, 0, 0.25, 1) both;
}

.iziToast.fadeOut {
  -webkit-animation: iziT-fadeOut 0.7s ease both;
  animation: iziT-fadeOut 0.7s ease both;
}

.iziToast.fadeOutDown {
  -webkit-animation: iziT-fadeOutDown 0.7s cubic-bezier(0.4, 0.45, 0.15, 11) both;
  animation: iziT-fadeOutDown 0.7s cubic-bezier(0.4, 0.45, 0.15, 11) both;
}

.iziToast.fadeOutUp {
  -webkit-animation: iziT-fadeOutUp 0.7s cubic-bezier(0.4, 0.45, 0.15, 11) both;
  animation: iziT-fadeOutUp 0.7s cubic-bezier(0.4, 0.45, 0.15, 11) both;
}

.iziToast.fadeOutLeft {
  -webkit-animation: iziT-fadeOutLeft 0.5s ease both;
  animation: iziT-fadeOutLeft 0.5s ease both;
}

.iziToast.fadeOutRight {
  -webkit-animation: iziT-fadeOutRight 0.5s ease both;
  animation: iziT-fadeOutRight 0.5s ease both;
}

.iziToast.flipOutX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation: iziT-flipOutX 0.7s cubic-bezier(0.4, 0.45, 0.15, 11) both;
  animation: iziT-flipOutX 0.7s cubic-bezier(0.4, 0.45, 0.15, 11) both;
}

.iziToast-overlay.fadeIn {
  -webkit-animation: iziT-fadeIn 0.5s ease both;
  animation: iziT-fadeIn 0.5s ease both;
}

.iziToast-overlay.fadeOut {
  -webkit-animation: iziT-fadeOut 0.7s ease both;
  animation: iziT-fadeOut 0.7s ease both;
}

@-webkit-keyframes iziT-revealIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 1);
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes iziT-revealIn {
  0% {
    opacity: 0;
    -moz-transform: scale3d(0.3, 0.3, 1);
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes iziT-slideIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes iziT-slideIn {
  0% {
    opacity: 0;
    -moz-transform: translateX(50px);
  }
  to {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@-webkit-keyframes iziT-bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(280px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
  }
  70% {
    -webkit-transform: translateX(10px);
  }
  to {
    -webkit-transform: translateX(0);
  }
}
@-webkit-keyframes iziT-bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-280px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(20px);
  }
  70% {
    -webkit-transform: translateX(-10px);
  }
  to {
    -webkit-transform: translateX(0);
  }
}
@-webkit-keyframes iziT-bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(10px);
  }
  70% {
    -webkit-transform: translateY(-5px);
  }
  to {
    -webkit-transform: translateY(0);
  }
}
@-webkit-keyframes iziT-bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(-10px);
  }
  70% {
    -webkit-transform: translateY(5px);
  }
  to {
    -webkit-transform: translateY(0);
  }
}
@-webkit-keyframes iziT-fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes iziT-fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes iziT-fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes iziT-fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes iziT-fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes iziT-flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@-webkit-keyframes iziT-fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes iziT-fadeOutDown {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@-webkit-keyframes iziT-fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@-webkit-keyframes iziT-fadeOutLeft {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-200px, 0, 0);
    transform: translate3d(-200px, 0, 0);
  }
}
@-webkit-keyframes iziT-fadeOutRight {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(200px, 0, 0);
    transform: translate3d(200px, 0, 0);
  }
}
@-webkit-keyframes iziT-flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@-moz-keyframes iziT-revealIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 1);
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes iziT-revealIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 1);
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes iziT-revealIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 1);
  }
  to {
    opacity: 1;
  }
}
@keyframes iziT-revealIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 1);
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes iziT-slideIn {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@-webkit-keyframes iziT-slideIn {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@-o-keyframes iziT-slideIn {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes iziT-slideIn {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@-moz-keyframes iziT-bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(280px);
  }
  50% {
    opacity: 1;
    transform: translateX(-20px);
  }
  70% {
    transform: translateX(10px);
  }
  to {
    transform: translateX(0);
  }
}
@-webkit-keyframes iziT-bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(280px);
  }
  50% {
    opacity: 1;
    transform: translateX(-20px);
  }
  70% {
    transform: translateX(10px);
  }
  to {
    transform: translateX(0);
  }
}
@-o-keyframes iziT-bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(280px);
  }
  50% {
    opacity: 1;
    transform: translateX(-20px);
  }
  70% {
    transform: translateX(10px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes iziT-bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(280px);
  }
  50% {
    opacity: 1;
    transform: translateX(-20px);
  }
  70% {
    transform: translateX(10px);
  }
  to {
    transform: translateX(0);
  }
}
@-moz-keyframes iziT-bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(-280px);
  }
  50% {
    opacity: 1;
    transform: translateX(20px);
  }
  70% {
    transform: translateX(-10px);
  }
  to {
    transform: translateX(0);
  }
}
@-webkit-keyframes iziT-bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(-280px);
  }
  50% {
    opacity: 1;
    transform: translateX(20px);
  }
  70% {
    transform: translateX(-10px);
  }
  to {
    transform: translateX(0);
  }
}
@-o-keyframes iziT-bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(-280px);
  }
  50% {
    opacity: 1;
    transform: translateX(20px);
  }
  70% {
    transform: translateX(-10px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes iziT-bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(-280px);
  }
  50% {
    opacity: 1;
    transform: translateX(20px);
  }
  70% {
    transform: translateX(-10px);
  }
  to {
    transform: translateX(0);
  }
}
@-moz-keyframes iziT-bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-200px);
  }
  50% {
    opacity: 1;
    transform: translateY(10px);
  }
  70% {
    transform: translateY(-5px);
  }
  to {
    transform: translateY(0);
  }
}
@-webkit-keyframes iziT-bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-200px);
  }
  50% {
    opacity: 1;
    transform: translateY(10px);
  }
  70% {
    transform: translateY(-5px);
  }
  to {
    transform: translateY(0);
  }
}
@-o-keyframes iziT-bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-200px);
  }
  50% {
    opacity: 1;
    transform: translateY(10px);
  }
  70% {
    transform: translateY(-5px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes iziT-bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-200px);
  }
  50% {
    opacity: 1;
    transform: translateY(10px);
  }
  70% {
    transform: translateY(-5px);
  }
  to {
    transform: translateY(0);
  }
}
@-moz-keyframes iziT-bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
  50% {
    opacity: 1;
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(5px);
  }
  to {
    transform: translateY(0);
  }
}
@-webkit-keyframes iziT-bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
  50% {
    opacity: 1;
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(5px);
  }
  to {
    transform: translateY(0);
  }
}
@-o-keyframes iziT-bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
  50% {
    opacity: 1;
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(5px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes iziT-bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
  50% {
    opacity: 1;
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(5px);
  }
  to {
    transform: translateY(0);
  }
}
@-moz-keyframes iziT-fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes iziT-fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes iziT-fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes iziT-fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes iziT-fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes iziT-fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-o-keyframes iziT-fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes iziT-fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-moz-keyframes iziT-fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes iziT-fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-o-keyframes iziT-fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes iziT-fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-moz-keyframes iziT-fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes iziT-fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-o-keyframes iziT-fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes iziT-fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-moz-keyframes iziT-fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes iziT-fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-o-keyframes iziT-fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes iziT-fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-moz-keyframes iziT-flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@-webkit-keyframes iziT-flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@-o-keyframes iziT-flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes iziT-flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@-moz-keyframes iziT-fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes iziT-fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-o-keyframes iziT-fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes iziT-fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-moz-keyframes iziT-fadeOutDown {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@-webkit-keyframes iziT-fadeOutDown {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@-o-keyframes iziT-fadeOutDown {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes iziT-fadeOutDown {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@-moz-keyframes iziT-fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@-webkit-keyframes iziT-fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@-o-keyframes iziT-fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes iziT-fadeOutUp {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@-moz-keyframes iziT-fadeOutLeft {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-200px, 0, 0);
    transform: translate3d(-200px, 0, 0);
  }
}
@-webkit-keyframes iziT-fadeOutLeft {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-200px, 0, 0);
    transform: translate3d(-200px, 0, 0);
  }
}
@-o-keyframes iziT-fadeOutLeft {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-200px, 0, 0);
    transform: translate3d(-200px, 0, 0);
  }
}
@keyframes iziT-fadeOutLeft {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-200px, 0, 0);
    transform: translate3d(-200px, 0, 0);
  }
}
@-moz-keyframes iziT-fadeOutRight {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(200px, 0, 0);
    transform: translate3d(200px, 0, 0);
  }
}
@-webkit-keyframes iziT-fadeOutRight {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(200px, 0, 0);
    transform: translate3d(200px, 0, 0);
  }
}
@-o-keyframes iziT-fadeOutRight {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(200px, 0, 0);
    transform: translate3d(200px, 0, 0);
  }
}
@keyframes iziT-fadeOutRight {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(200px, 0, 0);
    transform: translate3d(200px, 0, 0);
  }
}
@-moz-keyframes iziT-flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@-webkit-keyframes iziT-flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@-o-keyframes iziT-flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes iziT-flipOutX {
  0% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.swal2-container {
  z-index: 900000000000000;
}
.swal2-container .swal2-actions .swal2-confirm {
  background-color: #03a9f4;
  min-width: 150px;
}
.swal2-container .swal2-actions .swal2-deny {
  background-color: #D50000;
  min-width: 150px;
}
.swal2-container .swal2-actions .swal2-cancel {
  background-color: #858585;
  min-width: 150px;
}

#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerTitle {
  background-color: #FFF;
  border-radius: 5px;
  cursor: pointer;
  padding: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerTitle span {
  height: fit-content;
  margin: auto 0;
  font-size: 30px;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #weekselect {
  background-color: #FFF;
  padding: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #weekselect span {
  font-weight: bold;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .lagenda-Zagerij {
  background-color: #FF5733;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .lagenda-Voormontage {
  background-color: #00951b;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .lagenda-Opsluiter {
  background-color: #3357FF;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .lagenda-Pr-afmontage {
  background-color: #F1C40F;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .lagenda-Afmontage {
  background-color: #8E44AD;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .lagenda-Glaslatten-plakroedes-zagerij {
  background-color: #E91E63;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .lagenda-Magazijn-expeditie-montage {
  background-color: #00c8ff;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .lagenda-Expeditie-laden-lossen- {
  background-color: #1ABC9C;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector {
  position: relative;
}
@media screen and (max-width: 768px) {
  #productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector {
    width: 100%;
  }
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .counter {
  position: absolute;
  top: 15px;
  right: 12px;
  font-weight: bold;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers {
  background-color: aliceblue;
  border-radius: 4px;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers #originalUsers {
  min-height: 140px;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers #foreignUsers {
  box-shadow: inset 0px 2px 1px 0 #bbbbbb;
  background-color: #e3e3e3;
  height: 75px;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser {
  cursor: grab !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .material-symbols-outlined {
  cursor: grab !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon {
  font-size: 40px;
  width: 110px;
  color: #000;
  text-align: center;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Zagerij {
  color: #FF5733;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Zagerij:hover {
  color: #cc2400;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Voormontage {
  color: #00951b;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Voormontage:hover {
  color: rgb(0, 47, 8.5167785235);
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Opsluiter {
  color: #3357FF;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Opsluiter:hover {
  color: #0024cc;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Pr-afmontage {
  color: #F1C40F;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Pr-afmontage:hover {
  color: rgb(145.5118110236, 118.2283464567, 8.4881889764);
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Afmontage {
  color: #8E44AD;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Afmontage:hover {
  color: rgb(81.9004149378, 39.2199170124, 99.7800829876);
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Expeditie-laden-lossen- {
  color: #1ABC9C;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Expeditie-laden-lossen-:hover {
  color: rgb(13.6074766355, 98.3925233645, 81.6448598131);
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Magazijn-expeditie-montage {
  color: #00c8ff;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Magazijn-expeditie-montage:hover {
  color: #007899;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Glaslatten-plakroedes-zagerij {
  color: #E91E63;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.sector-Glaslatten-plakroedes-zagerij:hover {
  color: rgb(146.6599190283, 14.3400809717, 59.3157894737);
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Zagerij {
  color: #FF5733 !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Zagerij:hover {
  color: #cc2400 !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Voormontage {
  color: #00951b !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Voormontage:hover {
  color: rgb(0, 47, 8.5167785235) !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Opsluiter {
  color: #3357FF !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Opsluiter:hover {
  color: #0024cc !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Pr-afmontage {
  color: #F1C40F !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Pr-afmontage:hover {
  color: rgb(145.5118110236, 118.2283464567, 8.4881889764) !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Afmontage {
  color: #8E44AD !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Afmontage:hover {
  color: rgb(81.9004149378, 39.2199170124, 99.7800829876) !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Expeditie-laden-lossen- {
  color: #1ABC9C !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Expeditie-laden-lossen-:hover {
  color: rgb(13.6074766355, 98.3925233645, 81.6448598131) !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Magazijn-expeditie-montage {
  color: #00c8ff !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Magazijn-expeditie-montage:hover {
  color: #007899 !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Glaslatten-plakroedes-zagerij {
  color: #E91E63 !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserIcon.foreignUser.original-Glaslatten-plakroedes-zagerij:hover {
  color: rgb(146.6599190283, 14.3400809717, 59.3157894737) !important;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .sectorUserName {
  font-size: 12px;
  width: 110px;
  text-align: center;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#productieCapaciteitUserPlanner #productieCapaciteitUserPlannerData #sectors .sector .sectorUsers .sectorUser .striped {
  background-image: linear-gradient(144deg, rgba(209, 209, 209, 0.4784313725) 25%, transparent 25%, transparent 50%, rgba(209, 209, 209, 0.4784313725) 50%, rgba(209, 209, 209, 0.4784313725) 75%, transparent 75%, transparent 100%);
  background-size: 187.14px 135.97px;
}

#montageCapaciteitUserPlanner #montageCapaciteitUserPlannerTitle {
  background-color: #FFF;
  border-radius: 5px;
  cursor: pointer;
  padding: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#montageCapaciteitUserPlanner #montageCapaciteitUserPlannerTitle span {
  height: fit-content;
  margin: auto 0;
  font-size: 30px;
}
#montageCapaciteitUserPlanner #montageCapaciteitUserPlannerData #montageWeekselect {
  background-color: #FFF;
  padding: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#montageCapaciteitUserPlanner #montageCapaciteitUserPlannerData #montageWeekselect span {
  font-weight: bold;
}

#settings-leveranciers-groepen .card {
  padding: 0 12px;
  border-radius: 0;
  box-shadow: none;
}
#settings-leveranciers-groepen .card .addLeverancierToGroup {
  position: absolute;
  right: 8px;
  top: 10px;
  bottom: 0;
  height: fit-content;
  font-size: 32px;
}
#settings-leveranciers-groepen .card .leverancierdata .leverancierrow {
  display: flex;
  margin-bottom: 0.3em;
}
#settings-leveranciers-groepen .card .leverancierdata .leverancierrow .leverancierNaam {
  width: 85%;
}
#settings-leveranciers-groepen .card .leverancierdata .leverancierrow .leverancierdefault {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
@media screen and (max-width: 1200px) {
  #settings-leveranciers-groepen .card .leverancierdata .leverancierrow .leverancierdefault {
    width: 33%;
  }
}
#settings-leveranciers-groepen .card .leverancierdata .leverancierrow .leverancierdefault label,
#settings-leveranciers-groepen .card .leverancierdata .leverancierrow .leverancierdefault input {
  cursor: pointer;
}
#settings-leveranciers-groepen .card .leverancierdata .leveranciersopslaan {
  margin: 0 0 0 auto;
  width: 190px;
  text-align: center;
  display: block;
  font-weight: bold;
}
#settings-leveranciers-groepen .card .leverancierdata.active {
  padding: 12px;
}
#settings-leveranciers-groepen .radio-input input {
  display: none;
}
#settings-leveranciers-groepen .radio-input {
  --container_width: 150px;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 9999px;
  background-color: #fff;
  color: #000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
}
#settings-leveranciers-groepen .radio-input label {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 14px;
}
#settings-leveranciers-groepen .selection {
  display: none;
  position: absolute;
  height: 100%;
  width: var(--container_width);
  z-index: 0;
  left: 0;
  top: 0;
  transition: 0.15s ease;
}
#settings-leveranciers-groepen .radio-input label:has(input:checked) {
  color: #fff;
}
#settings-leveranciers-groepen .radio-input label:has(input:checked) ~ .selection {
  background-color: rgb(11, 117, 223);
  display: inline-block;
}

#settings-inkoop-groepen .saveLeverancierInkoopGroepen,
#settings-inkoop-groepen .inkoopGroepToevoegen {
  margin: 0 0 0 auto;
  margin-right: 8px;
}
#settings-inkoop-groepen .inkoopgroep .inkoopgroepenname {
  width: 40%;
}
#settings-inkoop-groepen .inkoopgroep .inkoopgroepenselect,
#settings-inkoop-groepen .inkoopgroep .select2 {
  width: 60% !important;
}
#settings-inkoop-groepen .inkoopgroep .inkoopgroepenselect .select2-selection,
#settings-inkoop-groepen .inkoopgroep .select2 .select2-selection {
  min-height: 45px;
}
#settings-inkoop-groepen .inkoopgroep .inkoopgroepenselect .select2-selection .select2-selection__rendered .select2-selection__choice,
#settings-inkoop-groepen .inkoopgroep .select2 .select2-selection .select2-selection__rendered .select2-selection__choice {
  border: 1px solid rgb(2.3805668016, 134.1052631579, 193.6194331984);
  background-color: #03a9f4;
  color: #fff;
  font-weight: bold;
}
#settings-inkoop-groepen .inkoopgroep .inkoopgroepenselect .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove,
#settings-inkoop-groepen .inkoopgroep .select2 .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
  height: 100%;
  border-right: 1px solid rgb(2.3805668016, 134.1052631579, 193.6194331984);
}
#settings-inkoop-groepen .inkoopgroep .inkoopgroepenselect .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover,
#settings-inkoop-groepen .inkoopgroep .select2 .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
  background-color: rgb(45.5748987854, 188.0526315789, 252.4251012146);
}
#settings-inkoop-groepen .inkoopgroep .inkoopgroepenselect .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span,
#settings-inkoop-groepen .inkoopgroep .select2 .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span {
  height: fit-content;
  display: block;
  color: #FFF;
  margin-top: 1px;
}
#settings-inkoop-groepen .inkoopgroep .inkoopgroepenselect .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span:hover,
#settings-inkoop-groepen .inkoopgroep .select2 .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span:hover {
  background-color: rgb(45.5748987854, 188.0526315789, 252.4251012146);
}
#settings-inkoop-groepen .inkoopgroep .inkoopgroepenselect .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display,
#settings-inkoop-groepen .inkoopgroep .select2 .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display {
  height: 100%;
  display: block;
}
#settings-inkoop-groepen .inkoopgroep .inkoopgroepenselect .select2-selection .select2-search--inline,
#settings-inkoop-groepen .inkoopgroep .select2 .select2-selection .select2-search--inline {
  display: inline-block;
}
#settings-inkoop-groepen .inkoopgroep .inkoopgroepenselect .select2-selection .select2-search--inline .select2-search__field,
#settings-inkoop-groepen .inkoopgroep .select2 .select2-selection .select2-search--inline .select2-search__field {
  display: inline-block;
  margin: 0;
  margin-left: 0.5em;
  vertical-align: text-top;
}

#settingsMollieTestMode {
  width: 100%;
  max-width: 346px;
}
#settingsMollieTestMode .radio-input input {
  display: none;
}
#settingsMollieTestMode .radio-input {
  --container_width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 9999px;
  background-color: #fff;
  color: #000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
}
#settingsMollieTestMode .radio-input label {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 14px;
}
#settingsMollieTestMode .radio-input label:has(input:checked) {
  color: #fff;
}
#settingsMollieTestMode .radio-input label:has(input:checked) ~ .radio-input-selection {
  background-color: #03a9f4;
  display: inline-block;
}
#settingsMollieTestMode .radio-input label:nth-child(1):has(input:checked) ~ .radio-input-selection {
  transform: translateX(0%);
}
#settingsMollieTestMode .radio-input label:nth-child(2):has(input:checked) ~ .radio-input-selection {
  transform: translateX(100%);
}
#settingsMollieTestMode .radio-input label:nth-child(3):has(input:checked) ~ .radio-input-selection {
  transform: translateX(200%);
}
#settingsMollieTestMode .radio-input label:nth-child(4):has(input:checked) ~ .radio-input-selection {
  transform: translateX(300%);
}
#settingsMollieTestMode .radio-input label:nth-child(5):has(input:checked) ~ .radio-input-selection {
  transform: translateX(400%);
}
#settingsMollieTestMode .radio-input label:nth-child(6):has(input:checked) ~ .radio-input-selection {
  transform: translateX(500%);
}
#settingsMollieTestMode .radio-input label:nth-child(7):has(input:checked) ~ .radio-input-selection {
  transform: translateX(600%);
}
#settingsMollieTestMode .radio-input label:nth-child(8):has(input:checked) ~ .radio-input-selection {
  transform: translateX(700%);
}
#settingsMollieTestMode .radio-input label:nth-child(9):has(input:checked) ~ .radio-input-selection {
  transform: translateX(800%);
}
#settingsMollieTestMode .radio-input label:nth-child(10):has(input:checked) ~ .radio-input-selection {
  transform: translateX(900%);
}
#settingsMollieTestMode .radio-input-selection {
  display: none;
  position: absolute;
  height: 105%;
  width: calc(var(--container_width) / 2);
  z-index: 0;
  left: 0;
  top: -1px;
  transition: 0.15s ease;
}

#webshops-woo-api .webshopapis {
  border-bottom: 6px solid #c7c7c7;
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-radius: 0px;
}
#webshops-woo-api .webshopapis .webshopapiheader {
  display: flex;
  padding: 12px;
  font-weight: bold;
  border-bottom: 3px solid;
}
#webshops-woo-api .webshopapis .webshopapiheader span {
  padding: 0 6px;
}
#webshops-woo-api .webshopapis .webshopapi {
  display: flex;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
}
#webshops-woo-api .webshopapis .webshopapi > div span:first-of-type {
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  text-align: left;
  display: block;
  padding: 0 6px;
  width: 100%;
}
#webshops-woo-api .webshopapis .webshopapi > div .editItem {
  cursor: pointer;
}
#webshops-woo-api .webshopapis .webshopapi > div .editItem:hover {
  color: #03a9f4 !important;
}
#webshops-woo-api .webshopapis .webshopapi:nth-child(even) {
  background-color: rgb(206.7927125506, 239.5894736842, 254.4072874494);
}
#webshops-woo-api #editwebshopapilink {
  display: flex;
  width: 50vw;
  height: fit-content;
  top: 0;
  bottom: 0;
  margin: auto;
}
#webshops-woo-api #editwebshopapilink label {
  text-align: left;
}
#webshops-woo-api #editwebshopapilink button {
  width: fit-content;
  margin: 0 0 0 auto;
  padding: 0 32px;
}

#whitelistedDomains .whitelistedDomains {
  border-bottom: 6px solid #c7c7c7;
  margin-bottom: 1em;
  padding-bottom: 1em;
  border-radius: 0px;
}
#whitelistedDomains .whitelistedDomains .whitelistedDomain {
  display: flex;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
}
#whitelistedDomains .whitelistedDomains .whitelistedDomain > div span:first-of-type {
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  text-align: left;
  display: block;
  padding: 0 6px;
  width: fit-content;
}
#whitelistedDomains .whitelistedDomains .whitelistedDomain > div .editDomain {
  cursor: pointer;
}
#whitelistedDomains .whitelistedDomains .whitelistedDomain > div .editDomain:hover {
  color: #03a9f4 !important;
}
#whitelistedDomains .whitelistedDomains .whitelistedDomain > div .deleteDomain {
  cursor: pointer;
}
#whitelistedDomains .whitelistedDomains .whitelistedDomain > div .deleteDomain:hover {
  color: #D50000 !important;
}
#whitelistedDomains .whitelistedDomains .whitelistedDomain:nth-child(even) {
  background-color: rgb(206.7927125506, 239.5894736842, 254.4072874494);
}
#whitelistedDomains #saveNewDomain {
  height: 45px;
}
#whitelistedDomains #saveNewDomain span {
  margin: auto;
}
#whitelistedDomains #editDomainPopup {
  display: flex;
  width: 50vw;
  height: fit-content;
  top: 0;
  bottom: 0;
  margin: auto;
}
#whitelistedDomains #editDomainPopup label {
  text-align: left;
}
#whitelistedDomains #editDomainPopup button {
  width: fit-content;
  margin: 0 0 0 auto;
  padding: 0 32px;
}

#measurementQuestions {
  margin-bottom: 2em;
}
#measurementQuestions .measurementQuestionsHeader {
  display: flex;
  justify-content: space-between;
}
#measurementQuestions .measurementQuestionsHeader span {
  height: fit-content;
  margin: auto 0;
  font-size: 30px;
}
#measurementQuestions .measurementQuestionsOptions {
  background-color: #e1e1e1;
  padding: 12px 12px 12px 12px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
#measurementQuestions .measurementQuestionsOptions .addNewQuestion {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  height: 100%;
}
#measurementQuestions .measurementQuestionsOptions .addNewQuestion input {
  height: 42px !important;
  min-height: 42px !important;
}
#measurementQuestions .measurementQuestionsOptions .addNewQuestion button {
  height: 100%;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question {
  background-color: aliceblue;
  margin-top: 0.5em;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionTitle {
  justify-content: space-between;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionTitle .option {
  display: flex;
  align-items: center;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionTitle .option .editQuestion {
  color: orange;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionTitle .option .deleteQuestion {
  color: red;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionTitle .option span {
  height: fit-content;
  margin: auto 0;
  font-size: 30px;
}
@media screen and (max-width: 768px) {
  #measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionTitle .option span {
    font-size: 24px;
  }
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionOptions .addNewOption {
  padding: 9px 12px 0px 12px;
  margin-top: 0em;
  display: flex;
  justify-content: space-between;
  gap: 1em;
  background-color: aliceblue;
}
@media screen and (max-width: 576px) {
  #measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionOptions .addNewOption {
    flex-wrap: wrap;
  }
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionOptions .addNewOption input {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 0 !important;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionOptions .addNewOption button {
  height: 100%;
  border-radius: 0 !important;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionOptions .addNewOption select {
  height: 42px !important;
  min-height: 42px !important;
  background-color: #FFF;
  color: #000;
  border-radius: 0 !important;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionOptions .questionOptionsData {
  padding: 9px 12px 0px 12px;
  padding-bottom: 0.5em;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionOptions .questionOptionsData .questionOption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FFF;
  margin-bottom: 0.5em;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionOptions .questionOptionsData .questionOption h3 {
  min-width: 50%;
  width: 50%;
  max-width: 50%;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionOptions .questionOptionsData .questionOption p {
  min-width: 40%;
  width: 40%;
  max-width: 40%;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionOptions .questionOptionsData .questionOption .option {
  display: flex;
  align-items: center;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionOptions .questionOptionsData .questionOption .option .editOption {
  color: orange;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .question .questionOptions .questionOptionsData .questionOption .option .deleteOption {
  color: red;
}
#measurementQuestions .measurementQuestionsOptions .existingQuestions .noResults {
  padding: 12px;
  border: 1px solid #c5c5c5;
  font-weight: bold;
  text-align: center;
  width: 100%;
  font-size: 20px;
  margin-top: 0.5em;
  border-radius: 5px;
}
#measurementQuestions #editQuestionPopup,
#measurementQuestions #editOptionPopup {
  display: flex;
  width: 50vw;
  height: fit-content;
  top: 0;
  bottom: 0;
  margin: auto;
}
#measurementQuestions #editQuestionPopup label,
#measurementQuestions #editOptionPopup label {
  text-align: left;
}
#measurementQuestions #editQuestionPopup button,
#measurementQuestions #editOptionPopup button {
  width: fit-content;
  margin: 0 0 0 auto;
  padding: 0 32px;
}

#trucks {
  margin-bottom: 1em;
  outline: none !important;
  padding: 0 !important;
}
#trucks .trucksHeader {
  display: flex;
  justify-content: space-between;
}
#trucks .trucksHeader span {
  height: fit-content;
  margin: auto 0;
  font-size: 30px;
}
#trucks .trucksOptions {
  background-color: #e1e1e1;
  padding: 12px 12px 12px 12px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
#trucks .trucksOptions #addNewTruck {
  display: flex;
  align-items: center;
  gap: 1em;
}
#trucks #listOfTrucks {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: 1em;
}
#trucks #listOfTrucks .listOfTrucksTruck {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #FFF;
  display: flex;
  gap: 0.5em;
}
#trucks #listOfTrucks .listOfTrucksTruck div {
  padding: 1px 12px;
}
#trucks #listOfTrucks .listOfTrucksTruck .editTruck {
  border-radius: 0;
}
#trucks #editPopup {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: fixed;
  background-color: #FFF;
  box-shadow: 0 0 4px 0 #e1e1e1;
  border-radius: 4px;
  z-index: 999;
  width: 60vw;
  height: fit-content;
  margin: auto;
  padding: 24px 72px;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  gap: 1em;
}
#trucks #editPopup .head {
  width: 100%;
  text-align: center;
}
#trucks #editPopup .body {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1em;
}

#standardDeliveryTimes {
  margin-bottom: 1em;
}
#standardDeliveryTimes .standardDeliveryTimesHeader {
  display: flex;
  justify-content: space-between;
}
#standardDeliveryTimes .standardDeliveryTimesHeader span {
  height: fit-content;
  margin: auto 0;
  font-size: 30px;
}
#standardDeliveryTimes .standardDeliveryTimesOptions {
  background-color: #e1e1e1;
  padding: 12px 12px 12px 12px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
#standardDeliveryTimes .standardDeliveryTimesOptions #addNewStandardDeliveryTime {
  display: flex;
  align-items: center;
  gap: 1em;
}
#standardDeliveryTimes #listOfStandardDeliveryTimesOptions {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-top: 1em;
}
#standardDeliveryTimes #listOfStandardDeliveryTimesOptions .listOfStandardDeliveryTimesOptionsDate {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #FFF;
  display: flex;
  gap: 0.5em;
}
#standardDeliveryTimes #listOfStandardDeliveryTimesOptions .listOfStandardDeliveryTimesOptionsDate div {
  padding: 1px 12px;
}
#standardDeliveryTimes #listOfStandardDeliveryTimesOptions .listOfStandardDeliveryTimesOptionsDate .editTruck {
  border-radius: 0;
}
#standardDeliveryTimes #editPopupStandardDeliveryTime {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: fixed;
  background-color: #FFF;
  box-shadow: 0 0 4px 0 #e1e1e1;
  border-radius: 4px;
  z-index: 999;
  width: 60vw;
  height: fit-content;
  margin: auto;
  padding: 24px 72px;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  gap: 1em;
}
#standardDeliveryTimes #editPopupStandardDeliveryTime .head {
  width: 100%;
  text-align: center;
}
#standardDeliveryTimes #editPopupStandardDeliveryTime .body {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1em;
}

#products #general .card-body #price {
  pointer-events: none;
  background-color: #e1e1e1;
}
#products .card {
  height: 100%;
}
#products .card .card-body.categories {
  min-height: 360px;
  max-height: fit-content;
}
#products .card .card-body.categories form {
  width: 100%;
}
#products .card .card-body.categories form .form-data {
  min-height: 310px;
  width: 100%;
  overflow: auto;
}
#products .card .card-body.categories form .form-data .checkbox input[type=checkbox] {
  width: 20px;
  height: 20px;
  padding: 0;
  margin-right: 0.5em;
}
#products .card .card-body.categories form .form-data .checkbox label {
  cursor: pointer;
}
#products .card .card-body.categories form .form-submit {
  height: 50px;
  max-height: 50px;
}
#products #attributes [class*=col-] {
  padding: 0 12px;
}
#products #attributes .row {
  margin: 0 -12px;
}
@media screen and (max-width: 1400px) {
  #products #attributes .attribute {
    height: fit-content;
    margin-bottom: 2em;
  }
}
@media screen and (max-width: 1400px) {
  #products #attributes .col-9 {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  #products #attributes .col-9 {
    width: 100%;
  }
}
#products #attributes #cardAttributeInputter {
  margin-bottom: 1em;
  border-bottom: 1px solid #d5d5d5;
  padding-bottom: 0.5em;
}
@media screen and (max-width: 768px) {
  #products #attributes #cardAttributeInputter .col-3 {
    margin-top: 0.5em;
  }
}
@media screen and (max-width: 768px) {
  #products #attributes #cardAttributeInputter .col-9.col-3 {
    width: 100%;
  }
}
#products #attributes #cardAttributeInputter button {
  width: 100%;
  font-size: 15px;
}
#products #attributes #cardAttributeInputter button span {
  font-size: 20px;
  color: #fff;
  margin-right: 0.2em;
}
#products #attributes #cardAttributesData {
  margin-bottom: 1em;
}
@media screen and (max-width: 768px) {
  #products #attributes #cardAttributesData .select2-selection.select2-selection--multiple {
    width: 100%;
  }
}
#products #attributes #cardAttributesData .attribute {
  margin-bottom: 0.5em;
}
#products #attributes #cardAttributesData .attribute .termen {
  width: 100%;
}
#products #attributes #cardAttributesData .attribute span {
  vertical-align: -webkit-baseline-middle;
}
#products #attributes #cardAttributesData .attribute .deleteAttribute {
  width: 100%;
  font-size: 15px;
}
#products #attributes #cardAttributesData .attribute .deleteAttribute span {
  font-size: 20px;
  color: #fff;
  margin-right: 0.2em;
}
#products #attributes #cardAttributesData .attribute .select2-container--default {
  height: 36px;
  border-radius: 4px;
}
#products #attributes #cardAttributesData .attribute .select2-container--default .select2-selection {
  border-radius: 4px;
  border-color: #e1e1e1;
  padding: 3px 0 !important;
}
#products #attributes #cardAttributesData .attribute .select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice {
  margin-top: 0;
  border: 1px solid rgb(2.3805668016, 134.1052631579, 193.6194331984);
  background-color: #03a9f4;
  color: #fff;
  font-weight: bold;
}
#products #attributes #cardAttributesData .attribute .select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
  height: 100%;
  border-right: 1px solid rgb(2.3805668016, 134.1052631579, 193.6194331984);
}
#products #attributes #cardAttributesData .attribute .select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
  background-color: rgb(45.5748987854, 188.0526315789, 252.4251012146);
}
#products #attributes #cardAttributesData .attribute .select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span {
  height: fit-content;
  display: block;
  color: #fff;
  margin-top: 1px;
}
#products #attributes #cardAttributesData .attribute .select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span:hover {
  background-color: rgb(45.5748987854, 188.0526315789, 252.4251012146);
}
#products #attributes #cardAttributesData .attribute .select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display {
  height: 100%;
  display: block;
}
#products #attributes #cardAttributesData .attribute .select2-container--default .select2-selection .select2-search--inline {
  display: inline-block;
}
#products #attributes #cardAttributesData .attribute .select2-container--default .select2-selection .select2-search--inline .select2-search__field {
  display: inline-block;
  margin: 0;
  margin-left: 0.5em;
  vertical-align: text-top;
}
#products #attributes #saveAttributes {
  margin: 0 0 0 auto;
}
#products #productFotos #productFotosOpslaan {
  margin: 0 0 0 auto;
}
#products #productFotos .fotoUploadImage {
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: rgb(171.5263157895, 228.3157894737, 253.9736842105);
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  #products #productFotos .fotoUploadImage {
    object-fit: contain;
  }
}

#saveProductGeneralData {
  margin: 0 0 0 auto;
}

.select2-container--default {
  height: 36px;
  border-radius: 4px;
}
.select2-container--default .select2-selection {
  border-radius: 4px;
  border-color: #e1e1e1;
  padding: 3px 0 !important;
}
.select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice {
  margin-top: 0;
  border: 1px solid rgb(2.3805668016, 134.1052631579, 193.6194331984);
  background-color: #03a9f4;
  color: #fff;
  font-weight: bold;
}
.select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
  height: 100%;
  border-right: 1px solid rgb(2.3805668016, 134.1052631579, 193.6194331984);
}
.select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
  background-color: rgb(45.5748987854, 188.0526315789, 252.4251012146);
}
.select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span {
  height: fit-content;
  display: block;
  color: #fff;
  margin-top: 1px;
}
.select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span:hover {
  background-color: rgb(45.5748987854, 188.0526315789, 252.4251012146);
}
.select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display {
  height: 100%;
  display: block;
}
.select2-container--default .select2-selection .select2-search--inline {
  display: inline-block;
}
.select2-container--default .select2-selection .select2-search--inline .select2-search__field {
  display: inline-block;
  margin: 0;
  margin-left: 0.5em;
  vertical-align: text-top;
}

@media screen and (max-width: 1400px) {
  #form-billing .tabletexttd,
  #form-delivery .tabletexttd {
    width: 70%;
  }
}

.partGroupHeader.groupDate--desired {
  background-color: orange;
}

.partGroupHeader.groupDate--confirmed-ok {
  background-color: #28a745;
}

.partGroupHeader.groupDate--confirmed-late {
  background-color: #dc3545;
}

@media screen and (max-width: 768px) {
  #ORDERS .status-progress .card .card-heading.row > div {
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  #ORDERS .status-progress .card .card-heading.row > div {
    width: 100%;
  }
  #ORDERS .status-progress .card .card-heading.row > div:nth-child(1) label {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  #ORDERS #order_customer_info .row > div {
    width: 100%;
  }
}
@media screen and (max-width: 992px) {
  #ORDERS .card-full.offerte-flow .card-nav {
    position: relative;
    padding-top: 0;
    height: 145px;
    max-height: 34px;
    overflow: hidden;
    transition: max-height 1s ease-out;
  }
}
@media screen and (max-width: 768px) {
  #ORDERS .card-full.offerte-flow .card-nav {
    height: 165px;
  }
}
@media screen and (max-width: 480px) {
  #ORDERS .card-full.offerte-flow .card-nav {
    height: 215px;
  }
}
#ORDERS .card-full.offerte-flow .card-nav .menu {
  display: flex;
}
@media screen and (max-width: 992px) {
  #ORDERS .card-full.offerte-flow .card-nav .menu {
    flex-wrap: wrap;
    position: absolute;
    row-gap: 6px;
  }
}
@media screen and (max-width: 992px) {
  #ORDERS .card-full.offerte-flow .card-nav .menu .nav-container {
    width: 25%;
    text-align: left;
  }
}
@media screen and (max-width: 768px) {
  #ORDERS .card-full.offerte-flow .card-nav .menu .nav-container {
    width: 33.33333333%;
  }
}
@media screen and (max-width: 480px) {
  #ORDERS .card-full.offerte-flow .card-nav .menu .nav-container {
    width: 50%;
  }
}
#ORDERS .card-full.offerte-flow .card-nav .menu .offerte-nav-toggle {
  display: none;
}
@media screen and (max-width: 992px) {
  #ORDERS .card-full.offerte-flow .card-nav .menu .offerte-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #03a9f4;
    color: #fff;
    text-align: center;
    font-size: 22px;
    height: 34px;
    cursor: pointer;
    margin-bottom: 5px;
  }
}
@media screen and (max-width: 992px) {
  #ORDERS .card-full.offerte-flow .card-nav.active {
    transition: max-height 1s ease-in;
    max-height: 145px;
  }
}
@media screen and (max-width: 768px) {
  #ORDERS .card-full.offerte-flow .card-nav.active {
    max-height: 165px;
  }
}
@media screen and (max-width: 480px) {
  #ORDERS .card-full.offerte-flow .card-nav.active {
    max-height: 215px;
  }
}
@media screen and (max-width: 1200px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #opdracht.tab .col-6 {
    width: 50%;
  }
}
@media screen and (max-width: 992px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #opdracht.tab .col-6 {
    width: 100%;
  }
}
@media screen and (max-width: 992px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #bestelling.tab .col-6 {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #planning.tab .order-container {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 768px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #planning.tab .order-container .container {
    width: 50%;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #offerte.tab {
    flex-direction: column-reverse;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #offerte.tab .col-3.offertes-check,
  #ORDERS .card-full.offerte-flow .container.order-container.relative #offerte.tab .col-9.offertes-show {
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #inmeten.tab .order-container {
    display: flex;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #inmeten.tab .order-container .container,
  #ORDERS .card-full.offerte-flow .container.order-container.relative #inmeten.tab .order-container .btn.btn-blue {
    width: 33%;
  }
}
@media screen and (max-width: 576px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #inmeten.tab .order-container .container,
  #ORDERS .card-full.offerte-flow .container.order-container.relative #inmeten.tab .order-container .btn.btn-blue {
    width: 50%;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #inmeten.tab .order-container .status.container {
    display: none;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #inmeten.tab .form-container.d-flex.flex-wrap.mt-2 > .col-6 {
    width: 100%;
  }
}
@media screen and (max-width: 1200px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #inmeten.tab .form-container.d-flex.flex-wrap.mt-2 table tr td {
    width: 50%;
  }
}
@media screen and (max-width: 1200px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #ga-sync.tab .ga-sync-container {
    width: 80%;
  }
}
@media screen and (max-width: 576px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #ga-sync.tab .ga-sync-container {
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #drawing.tab {
    flex-direction: column-reverse;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #drawing.tab .col-3.offertes-check {
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #drawing.tab .col-9.technical_drawing {
    width: 100%;
  }
}
@media screen and (max-width: 576px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #inkoop.tab .inkoop-overzicht-main.card .order-container .container {
    width: 50%;
  }
}
@media screen and (max-width: 576px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #inkoop.tab .inkoop-overzicht-main.card .order-container .show-more {
    width: fit-content;
    text-align: center;
    margin: auto;
    margin-top: 0.5em;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #transport.tab .order-container .status.container {
    display: none;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #transport.tab .order-container > .row {
    width: 100%;
  }
}
@media screen and (max-width: 1200px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #transport.tab .order-container .d-flex.justify-between.w-100 {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1200px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #transport.tab .order-container .d-flex.justify-between.w-100 .container,
  #ORDERS .card-full.offerte-flow .container.order-container.relative #transport.tab .order-container .d-flex.justify-between.w-100 .btn.btn-blue {
    width: 33%;
    margin-bottom: 1em;
  }
}
@media screen and (max-width: 768px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #productie.tab .col-8 .product-column .status-progress {
    font-size: 12px;
  }
}
@media screen and (max-width: 576px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #productie.tab .col-8 .product-column .status-progress {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 576px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #productie.tab .col-8 .product-column .status-progress .header-wrapper {
    width: 45%;
    margin-bottom: 0.5em;
  }
}
@media screen and (max-width: 1200px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #montage.tab .order-container {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1200px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #montage.tab .order-container .container,
  #ORDERS .card-full.offerte-flow .container.order-container.relative #montage.tab .order-container .btn.btn-blue {
    width: 33%;
    margin-bottom: 1em;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #montage.tab .order-container .status.container {
    display: none;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #montage.tab .order-container > .row {
    width: 100%;
  }
}
@media screen and (max-width: 576px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #montage.tab canvas {
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 1200px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #factuur_40.tab .col-4,
  #ORDERS .card-full.offerte-flow .container.order-container.relative #factuur_60.tab .col-4 {
    width: 100%;
  }
}
@media screen and (max-width: 576px) {
  #ORDERS .card-full.offerte-flow .container.order-container.relative #afronden.tab button {
    width: 100%;
  }
}
#ORDERS .col-8.status-progress .card-heading {
  margin-bottom: 0;
}
@media screen and (max-width: 480px) {
  #ORDERS .extradata .row > div {
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .col-4.extradata,
  #ORDERS .col-8.status-progress {
    width: 100%;
  }
}
#ORDERS #offerteMeasuringToggle {
  width: 100%;
  max-width: 500px;
}
#ORDERS #offerteMeasuringToggle .radio-input input {
  display: none;
}
#ORDERS #offerteMeasuringToggle .radio-input {
  --container_width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 9999px;
  background-color: #fff;
  color: #000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
}
#ORDERS #offerteMeasuringToggle .radio-input label {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 14px;
}
#ORDERS #offerteMeasuringToggle .radio-input label:has(input:checked) {
  color: #fff;
}
#ORDERS #offerteMeasuringToggle .radio-input label:has(input:checked) ~ .radio-input-selection {
  background-color: #03a9f4;
  display: inline-block;
}
#ORDERS #offerteMeasuringToggle .radio-input label:nth-child(1):has(input:checked) ~ .radio-input-selection {
  transform: translateX(0%);
}
#ORDERS #offerteMeasuringToggle .radio-input label:nth-child(2):has(input:checked) ~ .radio-input-selection {
  transform: translateX(100%);
}
#ORDERS #offerteMeasuringToggle .radio-input label:nth-child(3):has(input:checked) ~ .radio-input-selection {
  transform: translateX(200%);
}
#ORDERS #offerteMeasuringToggle .radio-input label:nth-child(4):has(input:checked) ~ .radio-input-selection {
  transform: translateX(300%);
}
#ORDERS #offerteMeasuringToggle .radio-input label:nth-child(5):has(input:checked) ~ .radio-input-selection {
  transform: translateX(400%);
}
#ORDERS #offerteMeasuringToggle .radio-input label:nth-child(6):has(input:checked) ~ .radio-input-selection {
  transform: translateX(500%);
}
#ORDERS #offerteMeasuringToggle .radio-input label:nth-child(7):has(input:checked) ~ .radio-input-selection {
  transform: translateX(600%);
}
#ORDERS #offerteMeasuringToggle .radio-input label:nth-child(8):has(input:checked) ~ .radio-input-selection {
  transform: translateX(700%);
}
#ORDERS #offerteMeasuringToggle .radio-input label:nth-child(9):has(input:checked) ~ .radio-input-selection {
  transform: translateX(800%);
}
#ORDERS #offerteMeasuringToggle .radio-input label:nth-child(10):has(input:checked) ~ .radio-input-selection {
  transform: translateX(900%);
}
#ORDERS #offerteMeasuringToggle .radio-input-selection {
  display: none;
  position: absolute;
  height: 105%;
  width: calc(var(--container_width) / 2);
  z-index: 0;
  left: 0;
  top: -1px;
  transition: 0.15s ease;
}
#ORDERS .confirmation-container input[type=radio] {
  box-sizing: border-box;
  appearance: none;
  background: #eefaff;
  outline: 2px solid rgb(209.5, 209.5, 209.5);
  border: 2px solid #eefaff;
  width: 16px;
  height: 16px;
  border-radius: 1px;
}
#ORDERS .confirmation-container input[type=radio]:checked {
  outline: 2px solid #03a9f4;
  background: #03a9f4;
}
#ORDERS .offerte-container input[type=radio] {
  box-sizing: border-box;
  appearance: none;
  background: #eefaff;
  outline: 2px solid rgb(209.5, 209.5, 209.5);
  border: 2px solid #eefaff;
  width: 16px;
  height: 16px;
  border-radius: 1px;
}
#ORDERS .offerte-container input[type=radio]:checked {
  outline: 2px solid #03a9f4;
  background: #03a9f4;
}
#ORDERS .offerteProducten .card {
  padding: 12px;
  height: fit-content;
}
#ORDERS .offerteProducten .card .col-3 {
  padding: 12px !important;
}
@media screen and (max-width: 576px) {
  #ORDERS .offerteProducten .card .col-3 {
    width: 100%;
  }
}
#ORDERS .offerteProducten .card .product-column {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#ORDERS .offerteProducten .card .product-column p {
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}
#ORDERS .offerteProducten .card .product-column input {
  margin: 0;
  margin-top: 0.5em;
}
#ORDERS .offerteProducten .card .product-column button {
  margin: 0;
  margin-top: 0.5em;
  line-height: 22px;
  height: 40px;
}
#ORDERS .offerteProducten .card .product-column-1 {
  width: 100%;
}
@media screen and (max-width: 1400px) {
  #ORDERS .offerteProducten .col-2 {
    width: 33%;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .offerteProducten .col-2 .product-image {
    width: fit-content;
  }
}
#ORDERS .projectnumber,
#ORDERS .serviceNumber {
  height: 42px;
  display: flex;
  width: 100%;
  align-items: center;
  font-weight: bold;
  color: #000;
}
#ORDERS .serviceNumber {
  font-weight: 500;
}
#ORDERS .offerteProductenDisplay .card .suboptions .border-dashed-top {
  border-top: 2px dashed #e1e1e1;
}
#ORDERS .offerteProductenDisplay .card .suboptions .border-dashed-top:first-of-type {
  border-top: 0px;
}
#ORDERS .update-offerte-form .offerteCheckboxLabel {
  min-width: fit-content;
}
#ORDERS .update-offerte-form .modal .content {
  width: 65vw;
  height: 80vh;
}
#ORDERS .update-offerte-form .modal .content .main {
  overflow: auto;
  height: 85%;
}
#ORDERS .update-offerte-form .modal .content .main #product-list .row .product-image {
  display: flex;
}
#ORDERS .update-offerte-form .modal .content .main #product-list .row .product-image img {
  max-width: unset;
  height: 120px;
  width: 100%;
  background-color: white;
  object-fit: contain;
}
#ORDERS .update-offerte-form .modal .content .main #product-list .row p,
#ORDERS .update-offerte-form .modal .content .main #product-list .row label {
  text-align: left;
  width: 100%;
  display: block;
}
#ORDERS .update-offerte-form .modal .content .main #product-list .row .product-image img {
  margin: auto;
  object-fit: contain;
}
#ORDERS .update-offerte-form .modal .content .main #product-list .row .product-column {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#ORDERS .update-offerte-form .modal .content .main #product-list .row .product-column p {
  height: 30px;
  margin-top: 1em;
}
#ORDERS .update-offerte-form .modal .content .main #product-list .row .product-column input {
  margin: 0;
  margin-top: 0.5em;
}
#ORDERS .update-offerte-form .modal .content .main #product-list .row .product-column button {
  margin: 0;
  margin-top: 0.5em;
  line-height: 22px;
  height: 40px;
}
#ORDERS .customerSearchBar {
  background-color: #eefaff !important;
}
#ORDERS .customerSearchBar #searchbarData {
  padding: 10px 0;
}
#ORDERS .customerSearchBar #searchbarData .customerOption {
  background-color: #fff;
  border-radius: 10px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  font-family: "Open Sans", sans-serif;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.0392156863);
}
#ORDERS .customerSearchBar .material-symbols-outlined {
  color: #000;
  transform-origin: center;
}
#ORDERS .customerSearchBar .addCustomer {
  background-color: #03a9f4;
  height: 100%;
  width: 100%;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  position: relative;
}
#ORDERS .customerSearchBar .addCustomer .material-symbols-outlined {
  color: #fff;
  font-size: 48px;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  height: fit-content;
  width: fit-content;
}
#ORDERS #projectnumberoverviewlabel,
#ORDERS #productienummerlabel {
  color: #202533;
  font-weight: 600;
  font-size: 16px;
}
#ORDERS #letter {
  display: inline-block;
  transform-origin: center;
}
#ORDERS #projectnumberoverviewvalue {
  width: fit-content;
}
#ORDERS #projectletteroverviewvalue {
  width: fit-content;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 18px;
}
#ORDERS #projectnumberoverview,
#ORDERS #productionnumber {
  width: -webkit-fill-available;
}
#ORDERS #importantdates .dates {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 12px;
}
@media screen and (max-width: 1200px) {
  #ORDERS #importantdates .dates {
    flex-direction: column;
  }
}
#ORDERS #importantdates .dates .date {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 50%;
}
@media screen and (max-width: 1200px) {
  #ORDERS #importantdates .dates .date {
    width: 100%;
  }
}
#ORDERS #importantdates .dates .date span {
  width: 50%;
  margin-bottom: 0.3em;
}
#ORDERS .inmeet-container .order-container {
  position: relative;
}
#ORDERS .inmeet-container .order-container .inmeetID {
  position: absolute;
  top: 0;
  left: 3px;
  font-size: 14px;
}
#ORDERS .inmeet-container .form-container {
  position: relative;
  border-bottom: 0px solid #d1d1d1;
  background-color: #f8fcff;
  margin: 0;
  padding: 12px;
  padding-bottom: 48px;
}
#ORDERS .inmeet-container .form-container label {
  color: #797979;
  line-height: 35px;
  margin: 3px 0;
  display: block;
}
#ORDERS .inmeet-container .form-container .inmeet-radio input[type=radio] {
  display: none;
}
#ORDERS .inmeet-container .form-container .inmeet-radio input[type=radio]:checked + label {
  background: #03a9f4;
  border: 1px solid #03a9f4;
  color: #fff;
}
#ORDERS .inmeet-container .form-container .inmeet-radio label {
  line-height: 33px;
  padding: 0 12px;
  border: 1px solid #eee;
  border-radius: 0px;
  width: auto;
  float: left;
  margin: 3px 0;
  box-sizing: border-box;
  display: inline-block;
  min-width: 75px;
  text-align: center;
  cursor: pointer;
}
#ORDERS .inmeet-container .form-container .inmeetOpmerking {
  border: 1px solid #e7e7e7;
  padding: 5px;
  border-radius: 5px;
}
#ORDERS .inmeet-container .form-container button#saveMeasures {
  position: absolute;
  right: 14px;
  bottom: 10px;
}
#ORDERS .inmeet-container .form-container .questions {
  margin-top: 1em;
}
#ORDERS .inmeet-container .form-container .questions .question {
  width: 90%;
  border-bottom: 1px solid black;
}
#ORDERS .inmeet-container .form-container .questions .question .title {
  width: 30;
  min-width: 30%;
  border-right: 1px solid black;
  padding: 3px;
}
#ORDERS .inmeet-container .form-container .questions .question .options {
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  min-width: 70%;
  padding: 3px;
}
#ORDERS .percentagepaid-container {
  color: #fff;
  background: #ff8f00;
  padding: 7px 10px;
  border-radius: 4px;
  width: 160px;
  min-width: 160px;
}
#ORDERS .percentagepaid-container .percentagepaid {
  color: #fff;
  background: #ff8f00;
  width: 100%;
  border: none;
}
#ORDERS .parts-container .parts-table input[type=date] {
  border: none;
  box-shadow: 0 0 4px 0 #c3bbbb;
  padding: 5px 10px;
  border-radius: 4px;
}
#ORDERS .controle .modal.manco .manco-description {
  padding: 12px;
  border: 1px solid #c1c1c1;
  min-height: 200px;
  padding: 12px;
}
#ORDERS .controle .modal.manco .main div {
  word-break: break-word;
}
#ORDERS .controle .modal.manco .main div p {
  margin-bottom: 1em;
}
@media screen and (max-width: 1400px) {
  #ORDERS .productie-container .card .row > div:not(:last-of-type) {
    flex: 50%;
    max-width: 50%;
  }
}
@media screen and (max-width: 576px) {
  #ORDERS .productie-container .card .row > div:not(:last-of-type) {
    flex: 100%;
    max-width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #ORDERS .productie-container .card .row > div:last-of-type {
    flex: 100%;
    max-width: 100%;
  }
}
#ORDERS .productie-container .card .status-progress {
  display: flex;
  width: 100%;
}
#ORDERS .productie-container .card .status-progress .header-wrapper {
  position: relative;
  width: 100%;
}
#ORDERS .productie-container .card .status-progress .header-wrapper .production-status-update {
  width: 25px;
  height: 25px;
  border-radius: 9999px;
  border: 1px solid #03a9f4;
  background-color: #fff;
  z-index: 2;
  position: relative;
  box-sizing: border-box;
}
#ORDERS .productie-container .card .status-progress .header-wrapper .production-status-update.active {
  background-color: #03a9f4;
}
#ORDERS .productie-container .card .status-progress .header-wrapper .header-name {
  padding-top: 15px;
  font-weight: bold;
  width: 100%;
  font-size: 14px;
}
#ORDERS .productie-container .card .status-progress .header-wrapper .header-datum {
  width: 100%;
  color: #9f9f9f;
}
#ORDERS .productie-container .card .status-progress .header-wrapper:after {
  content: "";
  width: 100%;
  border: 1px solid #eeeeee;
  position: absolute;
  right: -28px;
  top: 12.5px;
  transform: translateY(-50%);
  z-index: 1;
}
#ORDERS .productie-container .card .status-progress .header-wrapper:last-child:after {
  content: unset;
}
#ORDERS .orderKeurenButton {
  width: 400px;
  padding: 12px;
  margin: 12px auto;
  font-size: 20px;
  height: fit-content;
}
#ORDERS .orderKeurenButton:hover {
  background-color: #c1c1c1 !important;
}
#ORDERS #orderDoneOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6117647059);
  z-index: 9999;
}
#ORDERS #orderDoneOverlay .card {
  width: fit-content;
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 250px;
  margin: auto;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
}
#ORDERS #orderDoneOverlay .card h1 {
  font-size: 45px;
  display: block;
  width: 100%;
}
#ORDERS #orderDoneOverlay .card button {
  font-size: 20px;
}
#ORDERS .Afgerond {
  background-color: #03a9f4;
  color: #fff;
  border-radius: 4px;
  padding: 0 12px;
}
#ORDERS .Geannuleerd {
  background-color: #D50000;
  color: #fff;
  border-radius: 4px;
  padding: 0 12px;
}
#ORDERS .Afgekeurd {
  background-color: #D50000;
  color: #fff;
  border-radius: 4px;
  padding: 0 12px;
}
#ORDERS #hidePopup {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 40px;
}
#ORDERS #hidePopup:hover {
  color: #03a9f4;
  cursor: pointer;
}
#ORDERS #customerMoreWorkSignature canvas,
#ORDERS #montageTeamSign canvas,
#ORDERS #clientSign canvas {
  box-shadow: 0 0 4px 0 #e1e1e1;
}
#ORDERS #transport.tab .inmeet-container .order-container .row {
  width: 100%;
}

#weekselectdiv {
  gap: 0.5em;
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}
#weekselectdiv select {
  width: fit-content;
  padding: 0px 6px;
  background-color: #FFFFFF;
  border: 0px solid #FFF;
  height: 40px;
}
#weekselectdiv span {
  color: #0277BD !important;
  font-size: 24px;
  font-weight: bold;
}
#weekselectdiv span:hover {
  color: #03a9f4 !important;
}

body {
  overflow-x: hidden;
}

#customerenviroment {
  height: 100vh;
  height: 100lvh;
  width: 100vw;
  width: 100lvw;
}
#customerenviroment #customerEnviromentBG {
  position: fixed;
  width: 100%;
  height: 50lvh;
  object-fit: cover;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  #customerenviroment #customerEnviromentBG {
    object-position: 0 0;
    height: 100vh;
    height: 100lvh;
  }
}
#customerenviroment .main-content {
  padding: 0px;
  display: block;
  width: 100%;
  height: 100vh;
}
#customerenviroment .main-content .content-body {
  display: flex;
  min-height: 100%;
  margin-top: 0;
}
#customerenviroment .main-content .content-body .card {
  margin: auto;
  display: block;
  width: 900px;
  height: fit-content;
  padding: 24px 48px;
  padding-bottom: 50px;
  margin-top: 100px;
  margin-bottom: 100px;
  max-width: unset;
}
@media screen and (max-width: 1400px) {
  #customerenviroment .main-content .content-body .card {
    width: 70vw;
    width: 70lvw;
  }
}
@media screen and (max-width: 992px) {
  #customerenviroment .main-content .content-body .card {
    width: 95vw;
    width: 95lvw;
  }
}
@media screen and (max-width: 576px) {
  #customerenviroment .main-content .content-body .card {
    width: 90vw;
    width: 90lvw;
    padding: 24px;
  }
}
#customerenviroment .main-content .content-body .card .card-body {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
@media screen and (max-width: 576px) {
  #customerenviroment .main-content .content-body .card .card-body .row > .col-6 {
    flex: 100%;
    max-width: 100%;
  }
}
#customerenviroment .main-content .content-body .card .card-body #logo {
  margin-top: 1em;
}
@media screen and (max-width: 576px) {
  #customerenviroment .main-content .content-body .card .card-body #logo {
    margin-top: 0;
  }
}
#customerenviroment .main-content .content-body .card .card-body #logo img {
  height: 65px;
  width: auto;
  display: block;
  margin: auto;
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #logo img {
    height: 45px;
  }
}
@media screen and (max-width: 576px) {
  #customerenviroment .main-content .content-body .card .card-body #logo,
  #customerenviroment .main-content .content-body .card .card-body #greeting {
    padding: 12px;
  }
}
#customerenviroment .main-content .content-body .card .card-body #orders .order-container {
  overflow: hidden;
}
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order {
  border-bottom: 1px solid #e1e1e1;
  padding: 12px 0px;
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order {
    flex-wrap: wrap;
    gap: 0;
    position: relative;
  }
}
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order .order-row {
  min-width: 150px;
  width: 150px;
  padding: 0px 12px;
}
@media screen and (max-width: 1400px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order .order-row {
    min-width: 130px;
    width: 130px;
  }
}
@media screen and (max-width: 1200px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order .order-row {
    min-width: 100px;
    width: 100px;
  }
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order .order-row {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order .order-row .toggleOrder {
    position: absolute;
    bottom: 12px;
    right: 4px;
  }
}
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order .order-row img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order .material-symbols-outlined {
  font-size: 36px;
}
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data {
  display: none;
  background: aliceblue;
  border-bottom: 2px solid #000;
}
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data h2 {
  font-size: 16px;
  padding: 6px 12px;
  background: #1baaf2;
  color: #FFF;
}
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data .order-data-div {
  padding: 6px 0;
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data .order-data-div {
    flex-wrap: wrap;
    gap: 0;
    position: relative;
    border-bottom: 1px solid #03a9f4;
  }
}
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data .order-data-div .order-data-row {
  min-width: 200px;
  width: 200px;
  padding: 0px 12px;
}
@media screen and (max-width: 1400px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data .order-data-div .order-data-row {
    min-width: 160px;
    width: 160px;
  }
}
@media screen and (max-width: 1200px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data .order-data-div .order-data-row {
    min-width: 130px;
    width: 130px;
  }
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data .order-data-div .order-data-row {
    width: 50%;
    padding: 10px 12px;
  }
}
@media screen and (max-width: 576px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data .order-data-div .order-data-row {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data .order-data-div .toggleInvoice,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data .order-data-div .toggleConfirmation,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data .order-data-div .toggleDrawing {
    position: absolute;
    bottom: 12px;
    right: 4px;
  }
}
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data .material-symbols-outlined {
  font-size: 36px;
}
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData {
  padding: 12px;
  flex-direction: column;
  background: #FBFBFB;
  box-shadow: inset 0px 0px 4px 0px #c1c1c1;
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData {
    flex-wrap: wrap;
    gap: 0;
  }
}
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row1,
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row2,
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row3,
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row1,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row2,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row3,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row4 {
    flex-wrap: wrap;
    gap: 0;
  }
}
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row1 span,
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row2 span,
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row3 span,
#customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row4 span {
  min-width: 260px;
  width: 260px;
  margin-bottom: 0.5em;
}
@media screen and (max-width: 1400px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row1 span,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row2 span,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row3 span,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row4 span {
    min-width: 230px;
    width: 230px;
  }
}
@media screen and (max-width: 1200px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row1 span,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row2 span,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row3 span,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row4 span {
    min-width: 190px;
    width: 190px;
  }
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row1 span,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row2 span,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row3 span,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row4 span {
    width: 50%;
    padding: 10px 12px;
  }
}
@media screen and (max-width: 576px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row1 span,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row2 span,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row3 span,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .row4 span {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .products table tr {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .products table tr td.productImage {
    width: 30%;
  }
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .products table tr td.productImage img {
    height: 40px;
  }
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .products table tr td.productTitel {
    width: 70%;
    padding: 12px 0;
    padding-bottom: 0px;
  }
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .products table tr td.productPrijs,
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .products table tr td.productPrijsTotaal {
    width: 30%;
    padding: 12px 0;
  }
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #orders .order-container .order-data #invoiceData .products table tr td.productAantallen {
    width: 30%;
    padding: 12px 0;
    text-align: center;
  }
}
#customerenviroment .main-content .content-body .card .card-body #serviceParts .servicePartsRow:nth-child(even) {
  background-color: #f3f3f3;
}
#customerenviroment .main-content .content-body .card .card-body #serviceParts .servicePartsRow .servicePartsRowItem {
  min-width: 33.333333%;
  padding: 8px 8px;
}
#customerenviroment .main-content .content-body .card .card-body #serviceParts .servicePartsRow .servicePartsRowItem:nth-child(1) {
  min-width: 50%;
}
#customerenviroment .main-content .content-body .card .card-body #serviceReview #blocktitle {
  font-size: 30px;
  width: 100%;
  text-align: center;
}
#customerenviroment .main-content .content-body .card .card-body #invoice h1,
#customerenviroment .main-content .content-body .card .card-body #confirmation h1,
#customerenviroment .main-content .content-body .card .card-body #drawing h1 {
  width: 100%;
  text-align: center;
  font-size: 40px;
  color: #03a9f4;
  margin: 0;
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #invoice h1,
  #customerenviroment .main-content .content-body .card .card-body #confirmation h1,
  #customerenviroment .main-content .content-body .card .card-body #drawing h1 {
    font-size: 34px;
  }
}
@media screen and (max-width: 576px) {
  #customerenviroment .main-content .content-body .card .card-body #invoice h1,
  #customerenviroment .main-content .content-body .card .card-body #confirmation h1,
  #customerenviroment .main-content .content-body .card .card-body #drawing h1 {
    padding: 12px;
    font-size: 28px;
  }
}
#customerenviroment .main-content .content-body .card .card-body #products table {
  width: 100%;
}
#customerenviroment .main-content .content-body .card .card-body #products table tr {
  border-bottom: 1px solid #e1e1e1;
}
#customerenviroment .main-content .content-body .card .card-body #products table tr td img {
  height: 70px;
  width: auto;
  object-fit: contain;
}
#customerenviroment .main-content .content-body .card .card-body #products table tr td:last-of-type {
  text-align: right;
  padding-right: 12px;
}
#customerenviroment .main-content .content-body .card .card-body #products table tr:last-of-type {
  border-bottom: none;
}
@media screen and (max-width: 576px) {
  #customerenviroment .main-content .content-body .card .card-body #newItems #newInvoices .newItem,
  #customerenviroment .main-content .content-body .card .card-body #newItems #newOrderConfirmations .newItem,
  #customerenviroment .main-content .content-body .card .card-body #newItems #newDrawings .newItem {
    gap: 1em;
  }
}
#customerenviroment .main-content .content-body .card .card-body #newItems #newInvoices,
#customerenviroment .main-content .content-body .card .card-body #newItems #newOrderConfirmations,
#customerenviroment .main-content .content-body .card .card-body #newItems #newDrawings,
#customerenviroment .main-content .content-body .card .card-body #newItems #newServices {
  display: flex;
  flex-direction: column;
}
#customerenviroment .main-content .content-body .card .card-body #newItems #newInvoices .newItem,
#customerenviroment .main-content .content-body .card .card-body #newItems #newOrderConfirmations .newItem,
#customerenviroment .main-content .content-body .card .card-body #newItems #newDrawings .newItem,
#customerenviroment .main-content .content-body .card .card-body #newItems #newServices .newItem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #03a9f4;
  color: #FFF;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 1em;
  margin: 0.5em;
}
#customerenviroment .main-content .content-body .card .card-body #newItems #newInvoices .newItem a,
#customerenviroment .main-content .content-body .card .card-body #newItems #newOrderConfirmations .newItem a,
#customerenviroment .main-content .content-body .card .card-body #newItems #newDrawings .newItem a,
#customerenviroment .main-content .content-body .card .card-body #newItems #newServices .newItem a {
  background-color: #FFF;
  border-radius: 4px;
  color: #03a9f4;
}
#customerenviroment .main-content .content-body .card .card-body #prices table {
  width: 100%;
}
#customerenviroment .main-content .content-body .card .card-body #prices table tr {
  border-bottom: 1px solid #e1e1e1;
}
#customerenviroment .main-content .content-body .card .card-body #prices table tr td {
  padding: 12px;
}
#customerenviroment .main-content .content-body .card .card-body #prices table tr td:last-of-type {
  text-align: right;
}
#customerenviroment .main-content .content-body .card .card-body #prices table tr:last-of-type {
  border-bottom: none;
}
#customerenviroment .main-content .content-body .card .card-body #statusDiv h2 {
  font-size: 100%;
}
#customerenviroment .main-content .content-body .card .card-body .PDFviewer {
  display: block;
}
@media screen and (max-width: 992px) {
  #customerenviroment .main-content .content-body .card .card-body .PDFviewer {
    display: none !important;
  }
}
#customerenviroment .main-content .content-body .card .card-body .mobilePDFViewer {
  display: none;
  background: #fbfbfb;
  color: #272727;
  box-shadow: inset 0 0 4px 0 #c1c1c1;
  padding: 12px;
  margin-bottom: 1em;
  border-radius: 6px;
}
@media screen and (max-width: 992px) {
  #customerenviroment .main-content .content-body .card .card-body .mobilePDFViewer {
    display: block;
  }
}
#customerenviroment .main-content .content-body .card .card-body .mobilePDFViewer a {
  color: #000;
  font-weight: bold;
  text-decoration: underline;
}
@media screen and (max-width: 576px) {
  #customerenviroment .main-content .content-body .card .card-body #invoiceReview #reviewButtonsDiv .row,
  #customerenviroment .main-content .content-body .card .card-body #confirmationReview #reviewButtonsDiv .row,
  #customerenviroment .main-content .content-body .card .card-body #drawingReview #reviewButtonsDiv .row {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 576px) {
  #customerenviroment .main-content .content-body .card .card-body #invoiceReview #reviewButtonsDiv .row .col-4,
  #customerenviroment .main-content .content-body .card .card-body #confirmationReview #reviewButtonsDiv .row .col-4,
  #customerenviroment .main-content .content-body .card .card-body #drawingReview #reviewButtonsDiv .row .col-4 {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0.5em;
  }
  #customerenviroment .main-content .content-body .card .card-body #invoiceReview #reviewButtonsDiv .row .col-4:first-of-type,
  #customerenviroment .main-content .content-body .card .card-body #confirmationReview #reviewButtonsDiv .row .col-4:first-of-type,
  #customerenviroment .main-content .content-body .card .card-body #drawingReview #reviewButtonsDiv .row .col-4:first-of-type {
    display: none;
  }
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview,
#customerenviroment .main-content .content-body .card .card-body #drawingReview,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview,
#customerenviroment .main-content .content-body .card .card-body #serviceReview {
  border-radius: 4px;
  background: #eeeeee;
  padding: 12px;
  gap: 1em;
  display: flex;
  flex-direction: column;
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #noteDiv,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #noteDiv,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #noteDiv,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #noteDiv {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #noteDiv label,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #noteDiv label,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #noteDiv label,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #noteDiv label {
  font-weight: 600;
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #invoiceSign,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #invoiceSign,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #invoiceSign,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #invoiceSign {
  display: flex;
  flex-direction: column;
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #invoiceSign label,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #invoiceSign label,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #invoiceSign label,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #invoiceSign label {
  font-weight: 600;
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #clearParaafKlant,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #clearParaafKlant,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #clearParaafKlant,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #clearParaafKlant {
  color: #FFF;
  cursor: pointer;
  background-color: #be0000;
  font-size: 23px;
  padding: 4px 18px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin: auto 0 auto auto;
  display: block;
  width: fit-content;
  box-shadow: 2px 2px 4px 0 #a7a7a7;
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #revieweddiv,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #revieweddiv,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #revieweddiv,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #revieweddiv {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #revieweddiv #reviewed,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #revieweddiv #reviewed,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #revieweddiv #reviewed,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #revieweddiv #reviewed {
  width: 20px;
  height: 20px;
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #revieweddiv label,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #revieweddiv label,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #revieweddiv label,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #revieweddiv label {
  font-weight: 600;
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #download,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #download,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #download,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #download {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #download input,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #download input,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #download input,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #download input {
  height: 38px;
  min-height: 38px;
  background-color: #FFF;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border: none !important;
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #download button,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #download button,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #download button,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #download button {
  height: 44px;
  min-height: 44px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  text-align: center;
  display: block;
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #disclaimer,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #disclaimer,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #disclaimer,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #disclaimer {
  font-size: 16px;
  padding-left: 32px;
  color: #858585;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  #customerenviroment .main-content .content-body .card .card-body #confirmationReview #disclaimer,
  #customerenviroment .main-content .content-body .card .card-body #drawingReview #disclaimer,
  #customerenviroment .main-content .content-body .card .card-body #invoiceReview #disclaimer,
  #customerenviroment .main-content .content-body .card .card-body #serviceReview #disclaimer {
    font-size: 14px;
  }
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #reviewButtonsDiv,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #reviewButtonsDiv,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #reviewButtonsDiv,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #reviewButtonsDiv {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #reviewButtonsDiv .row,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #reviewButtonsDiv .row,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #reviewButtonsDiv .row,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #reviewButtonsDiv .row {
  width: 100%;
}
@media screen and (max-width: 1400px) {
  #customerenviroment .main-content .content-body .card .card-body #confirmationReview #reviewButtonsDiv .row,
  #customerenviroment .main-content .content-body .card .card-body #drawingReview #reviewButtonsDiv .row,
  #customerenviroment .main-content .content-body .card .card-body #invoiceReview #reviewButtonsDiv .row,
  #customerenviroment .main-content .content-body .card .card-body #serviceReview #reviewButtonsDiv .row {
    row-gap: 12px;
    margin-left: 0px;
  }
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #reviewButtonsDiv .row .col-4,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #reviewButtonsDiv .row .col-4,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #reviewButtonsDiv .row .col-4,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #reviewButtonsDiv .row .col-4 {
  padding: 0 12px;
}
@media screen and (max-width: 1400px) {
  #customerenviroment .main-content .content-body .card .card-body #confirmationReview #reviewButtonsDiv .row .col-4,
  #customerenviroment .main-content .content-body .card .card-body #drawingReview #reviewButtonsDiv .row .col-4,
  #customerenviroment .main-content .content-body .card .card-body #invoiceReview #reviewButtonsDiv .row .col-4,
  #customerenviroment .main-content .content-body .card .card-body #serviceReview #reviewButtonsDiv .row .col-4 {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview #reviewButtonsDiv .row .col-4 button,
#customerenviroment .main-content .content-body .card .card-body #drawingReview #reviewButtonsDiv .row .col-4 button,
#customerenviroment .main-content .content-body .card .card-body #invoiceReview #reviewButtonsDiv .row .col-4 button,
#customerenviroment .main-content .content-body .card .card-body #serviceReview #reviewButtonsDiv .row .col-4 button {
  width: 100%;
  text-align: center;
  display: block;
  font-weight: bold;
}
#customerenviroment .main-content .content-body .card .card-body #confirmationReview,
#customerenviroment .main-content .content-body .card .card-body #drawingReview {
  height: 100%;
}
@media screen and (max-width: 1200px) {
  #customerenviroment .main-content .content-body .card .card-body #confirmationReview .col-6,
  #customerenviroment .main-content .content-body .card .card-body #drawingReview .col-6 {
    width: 100%;
    max-width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #customerenviroment .main-content .content-body .card .card-body #confirmationReview #download,
  #customerenviroment .main-content .content-body .card .card-body #drawingReview #download {
    flex-direction: column;
  }
}
@media screen and (max-width: 1400px) {
  #customerenviroment .main-content .content-body .card .card-body #confirmationReview #download input,
  #customerenviroment .main-content .content-body .card .card-body #drawingReview #download input {
    border-radius: 6px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
}
@media screen and (max-width: 1400px) {
  #customerenviroment .main-content .content-body .card .card-body #confirmationReview #download button,
  #customerenviroment .main-content .content-body .card .card-body #drawingReview #download button {
    border-radius: 6px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }
}
#customerenviroment .main-content #confirmation {
  width: 500px;
}
#customerenviroment .main-content #confirmation .confirmationIcon {
  font-size: 300px;
  margin: auto;
  display: block;
  width: fit-content;
}
#customerenviroment .main-content #confirmation .confirmationIcon.accept {
  color: #00C853;
}
#customerenviroment .main-content #confirmation .confirmationIcon.decline {
  color: #D50000;
}
#customerenviroment .main-content #confirmation .confirmationTitle {
  width: 100%;
  text-align: center;
  font-size: 32px;
}
#customerenviroment .main-content #confirmation #homeButton {
  width: fit-content;
  margin: auto;
}

::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #202533;
  width: 6px;
  border-radius: 6px;
}

body {
  overflow-x: hidden;
}

#thankyoupage {
  height: 100vh;
  height: 100lvh;
  width: 100vw;
  width: 100lvw;
}
#thankyoupage #thankyoupageBG {
  position: fixed;
  width: 100%;
  height: 50lvh;
  object-fit: cover;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  #thankyoupage #thankyoupageBG {
    object-position: 0 0;
    height: 100vh;
    height: 100lvh;
  }
}
#thankyoupage .main-content {
  padding: 0px;
  display: block;
  width: 100%;
  height: 100vh;
}
#thankyoupage .main-content .content-body {
  display: flex;
  min-height: 100%;
  margin-top: 0;
}
#thankyoupage .main-content .content-body .card {
  display: block;
  width: 900px;
  padding: 24px 48px;
  padding-bottom: 50px;
  max-width: unset;
  height: fit-content;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
@media screen and (max-width: 1400px) {
  #thankyoupage .main-content .content-body .card {
    width: 70vw;
    width: 70lvw;
  }
}
@media screen and (max-width: 992px) {
  #thankyoupage .main-content .content-body .card {
    width: 95vw;
    width: 95lvw;
  }
}
@media screen and (max-width: 576px) {
  #thankyoupage .main-content .content-body .card {
    width: 90vw;
    width: 90lvw;
    padding: 0;
  }
}
#thankyoupage .main-content .content-body .card .card-body {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
#thankyoupage .main-content .content-body #thankyou .thumbsup {
  font-size: 140px;
  text-align: center;
  display: block;
  color: #00C853;
}
#thankyoupage .main-content .content-body #thankyou ul {
  list-style: inside;
}

::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #202533;
  width: 6px;
  border-radius: 6px;
}

@media screen and (max-width: 1400px) {
  #createCoupons .col-4 {
    width: 33%;
  }
  #createCoupons .col-4 * {
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #createCoupons .col-8 {
    width: 66%;
  }
}
@media screen and (max-width: 576px) {
  #createCoupons .col-8 .select2.select2-container {
    width: 100% !important;
    margin-bottom: 1em;
  }
}
@media screen and (max-width: 992px) {
  #createCoupons .col-4,
  #createCoupons .col-8 {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  #createCoupons .col-4,
  #createCoupons .col-8 {
    width: 100%;
  }
}

#createCoupons .col-1,
#createCoupons .col-2,
#createCoupons .col-3,
#createCoupons .col-4,
#createCoupons .col-5,
#createCoupons .col-6,
#createCoupons .col-7,
#createCoupons .col-8,
#createCoupons .col-9,
#createCoupons .col-10,
#createCoupons .col-11,
#createCoupons .col-12,
#editCoupons .col-1,
#editCoupons .col-2,
#editCoupons .col-3,
#editCoupons .col-4,
#editCoupons .col-5,
#editCoupons .col-6,
#editCoupons .col-7,
#editCoupons .col-8,
#editCoupons .col-9,
#editCoupons .col-10,
#editCoupons .col-11,
#editCoupons .col-12 {
  margin-top: 0.5em;
  padding: 0 12px !important;
}
#createCoupons .select2-container--default,
#editCoupons .select2-container--default {
  min-height: 42px;
}
#createCoupons .select2-container--default .select2-selection--multiple,
#editCoupons .select2-container--default .select2-selection--multiple {
  min-height: 42px;
}
#createCoupons .createCoupon,
#createCoupons .editCoupon,
#editCoupons .createCoupon,
#editCoupons .editCoupon {
  display: block;
  margin: 0 0 0 auto;
}
#createCoupons .editCoupon,
#editCoupons .editCoupon {
  width: 100%;
  margin-top: 1em;
}

#coupons table tr {
  border-bottom: 1px solid #e1e1e1;
}
#coupons table tr td .editCoupon {
  color: #03a9f4;
}

.overview-row {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 0 6px;
  border-bottom: 2px solid #eeeeee;
}
.overview-row > span {
  height: 20px;
  padding: 0 6px;
  margin: 6px auto;
  width: 100%;
}
.overview-row > span:not(:first-child) {
  color: #202533;
}
.overview-row > span:first-child {
  color: #03a9f4;
  font-weight: 700;
  max-width: 75px;
}

@media screen and (max-width: 1200px) {
  #uploadhandleiding .d-flex {
    flex-wrap: wrap;
  }
  #uploadhandleiding .d-flex.g-1 {
    gap: 1em;
  }
}
@media screen and (max-width: 1200px) {
  #uploadhandleiding .d-flex .col-6 {
    flex: 100%;
    max-width: 100%;
  }
}
#uploadhandleiding input {
  padding: 5px 12px !important;
}
#uploadhandleiding #categories {
  margin: 0 !important;
  padding: 0 !important;
}
#uploadhandleiding .select2-container--default {
  width: 100% !important;
  height: 42px;
  border-radius: 4px;
}
#uploadhandleiding .select2-container--default .select2-selection {
  display: flex;
  align-items: center;
  height: 42px;
  border-radius: 4px;
  border-color: #e1e1e1;
}
#uploadhandleiding .select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice {
  margin-top: 0;
  border: 1px solid rgb(2.3805668016, 134.1052631579, 193.6194331984);
  background-color: #03a9f4;
  color: #fff;
  font-weight: bold;
}
#uploadhandleiding .select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
  height: 100%;
  border-right: 1px solid rgb(2.3805668016, 134.1052631579, 193.6194331984);
}
#uploadhandleiding .select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
  background-color: rgb(45.5748987854, 188.0526315789, 252.4251012146);
}
#uploadhandleiding .select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span {
  height: fit-content;
  display: block;
  color: #fff;
  margin-top: 1px;
}
#uploadhandleiding .select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span:hover {
  background-color: rgb(45.5748987854, 188.0526315789, 252.4251012146);
}
#uploadhandleiding .select2-container--default .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display {
  height: 100%;
  display: block;
}
#uploadhandleiding .select2-container--default .select2-selection .select2-search--inline {
  display: inline-block;
}
#uploadhandleiding .select2-container--default .select2-selection .select2-search--inline .select2-search__field {
  display: inline-block;
  margin: 0;
  margin-left: 0.5em;
  vertical-align: text-top;
}
#uploadhandleiding #userGuideFileTypeParent {
  width: 100%;
}
#uploadhandleiding #userGuideFileTypeParent .radio-input input {
  display: none;
}
#uploadhandleiding #userGuideFileTypeParent .radio-input {
  --container_width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 9999px;
  background-color: #fff;
  color: #000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
}
#uploadhandleiding #userGuideFileTypeParent .radio-input label {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 14px;
}
#uploadhandleiding #userGuideFileTypeParent .radio-input label:has(input:checked) {
  color: #fff;
}
#uploadhandleiding #userGuideFileTypeParent .radio-input label:has(input:checked) ~ .radio-input-selection {
  background-color: #03a9f4;
  display: inline-block;
}
#uploadhandleiding #userGuideFileTypeParent .radio-input label:nth-child(1):has(input:checked) ~ .radio-input-selection {
  transform: translateX(0%);
}
#uploadhandleiding #userGuideFileTypeParent .radio-input label:nth-child(2):has(input:checked) ~ .radio-input-selection {
  transform: translateX(100%);
}
#uploadhandleiding #userGuideFileTypeParent .radio-input label:nth-child(3):has(input:checked) ~ .radio-input-selection {
  transform: translateX(200%);
}
#uploadhandleiding #userGuideFileTypeParent .radio-input label:nth-child(4):has(input:checked) ~ .radio-input-selection {
  transform: translateX(300%);
}
#uploadhandleiding #userGuideFileTypeParent .radio-input label:nth-child(5):has(input:checked) ~ .radio-input-selection {
  transform: translateX(400%);
}
#uploadhandleiding #userGuideFileTypeParent .radio-input label:nth-child(6):has(input:checked) ~ .radio-input-selection {
  transform: translateX(500%);
}
#uploadhandleiding #userGuideFileTypeParent .radio-input label:nth-child(7):has(input:checked) ~ .radio-input-selection {
  transform: translateX(600%);
}
#uploadhandleiding #userGuideFileTypeParent .radio-input label:nth-child(8):has(input:checked) ~ .radio-input-selection {
  transform: translateX(700%);
}
#uploadhandleiding #userGuideFileTypeParent .radio-input label:nth-child(9):has(input:checked) ~ .radio-input-selection {
  transform: translateX(800%);
}
#uploadhandleiding #userGuideFileTypeParent .radio-input label:nth-child(10):has(input:checked) ~ .radio-input-selection {
  transform: translateX(900%);
}
#uploadhandleiding #userGuideFileTypeParent .radio-input-selection {
  display: none;
  position: absolute;
  height: 105%;
  width: calc(var(--container_width) / 3);
  z-index: 0;
  left: 0;
  top: -1px;
  transition: 0.15s ease;
}
#uploadhandleiding #userGuideLevelParent {
  width: 100%;
}
#uploadhandleiding #userGuideLevelParent .radio-input input {
  display: none;
}
#uploadhandleiding #userGuideLevelParent .radio-input {
  --container_width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 9999px;
  background-color: #fff;
  color: #000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
}
#uploadhandleiding #userGuideLevelParent .radio-input label {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 14px;
}
#uploadhandleiding #userGuideLevelParent .radio-input label:has(input:checked) {
  color: #fff;
}
#uploadhandleiding #userGuideLevelParent .radio-input label:has(input:checked) ~ .radio-input-selection {
  background-color: #03a9f4;
  display: inline-block;
}
#uploadhandleiding #userGuideLevelParent .radio-input label:nth-child(1):has(input:checked) ~ .radio-input-selection {
  transform: translateX(0%);
}
#uploadhandleiding #userGuideLevelParent .radio-input label:nth-child(2):has(input:checked) ~ .radio-input-selection {
  transform: translateX(100%);
}
#uploadhandleiding #userGuideLevelParent .radio-input label:nth-child(3):has(input:checked) ~ .radio-input-selection {
  transform: translateX(200%);
}
#uploadhandleiding #userGuideLevelParent .radio-input label:nth-child(4):has(input:checked) ~ .radio-input-selection {
  transform: translateX(300%);
}
#uploadhandleiding #userGuideLevelParent .radio-input label:nth-child(5):has(input:checked) ~ .radio-input-selection {
  transform: translateX(400%);
}
#uploadhandleiding #userGuideLevelParent .radio-input label:nth-child(6):has(input:checked) ~ .radio-input-selection {
  transform: translateX(500%);
}
#uploadhandleiding #userGuideLevelParent .radio-input label:nth-child(7):has(input:checked) ~ .radio-input-selection {
  transform: translateX(600%);
}
#uploadhandleiding #userGuideLevelParent .radio-input label:nth-child(8):has(input:checked) ~ .radio-input-selection {
  transform: translateX(700%);
}
#uploadhandleiding #userGuideLevelParent .radio-input label:nth-child(9):has(input:checked) ~ .radio-input-selection {
  transform: translateX(800%);
}
#uploadhandleiding #userGuideLevelParent .radio-input label:nth-child(10):has(input:checked) ~ .radio-input-selection {
  transform: translateX(900%);
}
#uploadhandleiding #userGuideLevelParent .radio-input-selection {
  display: none;
  position: absolute;
  height: 105%;
  width: calc(var(--container_width) / 7);
  z-index: 0;
  left: 0;
  top: -1px;
  transition: 0.15s ease;
}
@media screen and (max-width: 576px) {
  #uploadhandleiding #userGuideLevelParent {
    overflow: scroll;
  }
  #uploadhandleiding #userGuideLevelParent .radio-input {
    min-width: 450px;
  }
}
#uploadhandleiding #userGuideTypeParent {
  width: 100%;
}
#uploadhandleiding #userGuideTypeParent .radio-input input {
  display: none;
}
#uploadhandleiding #userGuideTypeParent .radio-input {
  --container_width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 9999px;
  background-color: #fff;
  color: #000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
}
#uploadhandleiding #userGuideTypeParent .radio-input label {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 14px;
}
#uploadhandleiding #userGuideTypeParent .radio-input label:has(input:checked) {
  color: #fff;
}
#uploadhandleiding #userGuideTypeParent .radio-input label:has(input:checked) ~ .radio-input-selection {
  background-color: #03a9f4;
  display: inline-block;
}
#uploadhandleiding #userGuideTypeParent .radio-input label:nth-child(1):has(input:checked) ~ .radio-input-selection {
  transform: translateX(0%);
}
#uploadhandleiding #userGuideTypeParent .radio-input label:nth-child(2):has(input:checked) ~ .radio-input-selection {
  transform: translateX(100%);
}
#uploadhandleiding #userGuideTypeParent .radio-input label:nth-child(3):has(input:checked) ~ .radio-input-selection {
  transform: translateX(200%);
}
#uploadhandleiding #userGuideTypeParent .radio-input label:nth-child(4):has(input:checked) ~ .radio-input-selection {
  transform: translateX(300%);
}
#uploadhandleiding #userGuideTypeParent .radio-input label:nth-child(5):has(input:checked) ~ .radio-input-selection {
  transform: translateX(400%);
}
#uploadhandleiding #userGuideTypeParent .radio-input label:nth-child(6):has(input:checked) ~ .radio-input-selection {
  transform: translateX(500%);
}
#uploadhandleiding #userGuideTypeParent .radio-input label:nth-child(7):has(input:checked) ~ .radio-input-selection {
  transform: translateX(600%);
}
#uploadhandleiding #userGuideTypeParent .radio-input label:nth-child(8):has(input:checked) ~ .radio-input-selection {
  transform: translateX(700%);
}
#uploadhandleiding #userGuideTypeParent .radio-input label:nth-child(9):has(input:checked) ~ .radio-input-selection {
  transform: translateX(800%);
}
#uploadhandleiding #userGuideTypeParent .radio-input label:nth-child(10):has(input:checked) ~ .radio-input-selection {
  transform: translateX(900%);
}
#uploadhandleiding #userGuideTypeParent .radio-input-selection {
  display: none;
  position: absolute;
  height: 105%;
  width: calc(var(--container_width) / 2);
  z-index: 0;
  left: 0;
  top: -1px;
  transition: 0.15s ease;
}

@media screen and (max-width: 1400px) {
  #overviewUserGuides .handleidingen .handleiding-wrapper {
    flex: 0 0 auto;
    width: 33.33333%;
  }
}
@media screen and (max-width: 768px) {
  #overviewUserGuides .handleidingen .handleiding-wrapper {
    flex: 0 0 auto;
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  #overviewUserGuides .handleidingen .handleiding-wrapper {
    flex: 0 0 auto;
    width: 100%;
  }
}
#overviewUserGuides .handleidingen .handleiding {
  overflow: hidden;
  position: relative;
  padding: 0;
  cursor: pointer !important;
}
#overviewUserGuides .handleidingen .handleiding #preview img,
#overviewUserGuides .handleidingen .handleiding #preview iframe {
  width: 100%;
  height: 250px;
  min-height: 250px;
  max-height: 250px;
  object-fit: cover;
  margin: auto;
  background-color: #f9f9f9;
}
#overviewUserGuides .handleidingen .handleiding #data {
  padding: 12px;
}
#overviewUserGuides .handleidingen .handleiding #data #type {
  position: absolute;
  top: 3px;
  left: 3px;
  background-color: #03a9f4;
  color: #FFF;
  padding: 1px;
  border-radius: 50%;
  cursor: default !important;
}
#overviewUserGuides .handleidingen .handleiding #data #type .material-symbols-outlined {
  color: #FFF;
  display: block;
  font-size: 34px;
}
#overviewUserGuides .handleidingen .handleiding #data #seen {
  position: absolute;
  top: 3px;
  left: 42px;
  background-color: #00C853;
  color: #FFF;
  padding: 1px;
  border-radius: 50%;
  cursor: default !important;
}
#overviewUserGuides .handleidingen .handleiding #data #seen .material-symbols-outlined {
  color: #FFF;
  display: block;
  font-size: 34px;
}
#overviewUserGuides .handleidingen .handleiding #data #level {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #03a9f4;
  color: #FFF;
  padding: 2px 10px;
  border-radius: 4px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  cursor: default !important;
}
#overviewUserGuides .handleidingen .handleiding #data .deleteGuide {
  position: absolute;
  top: 32px;
  right: 4px;
  background-color: #D50000;
  color: #FFF;
  border-radius: 4px;
  padding: 3px;
  font-size: 40px;
  display: block;
}
#overviewUserGuides .handleidingen .handleiding #data .deleteGuide:hover {
  background-color: rgb(136.5, 0, 0);
  cursor: pointer;
}
#overviewUserGuides .handleidingen .handleiding #data #title {
  font-size: 16px;
  margin-bottom: 1em;
  text-align: center;
  font-size: 20px;
}
#overviewUserGuides .handleidingen .handleiding #data #categories .category {
  background-color: #858585;
  color: #FFF;
  padding: 2px 10px;
  border-radius: 4px;
  font-weight: bold;
}

#viewUserGuide img,
#viewUserGuide iframe {
  width: 100%;
  object-fit: contain;
  min-height: calc(100lvh - 160px);
  border-radius: 4px;
}
#viewUserGuide #categories .category {
  background-color: #858585;
  color: #FFF;
  padding: 2px 10px;
  border-radius: 4px;
  font-weight: bold;
}
#viewUserGuide #type {
  background-color: #FF8F00;
  color: #FFF;
  padding: 2px 10px;
  border-radius: 4px;
}
#viewUserGuide #level {
  background-color: #03a9f4;
  color: #FFF;
  padding: 2px 10px;
  border-radius: 4px;
}
#viewUserGuide #seenParent {
  border: 1px solid #e1e1e1;
  padding: 3px 12px;
  border-radius: 4px;
}
@media screen and (max-width: 768px) {
  #viewUserGuide .row > div {
    flex: 100%;
    width: 100%;
  }
}

#AGENDA .inmeet-container .questions {
  margin-top: 1em;
}
#AGENDA .inmeet-container .questions .question {
  width: 100%;
  border-bottom: 1px solid black;
}
#AGENDA .inmeet-container .questions .question .title {
  width: 30;
  min-width: 30%;
  border-right: 1px solid black;
  padding: 3px;
}
#AGENDA .inmeet-container .questions .question .options {
  display: flex;
  flex-wrap: wrap;
  width: 70%;
  min-width: 70%;
  padding: 3px;
}

#ORDERS .filterOrder.filtered,
#AGENDA .filterOrder.filtered {
  border: 3px dotted #03a9f4;
}
#ORDERS .productie-container .card .status-progress,
#AGENDA .productie-container .card .status-progress {
  display: flex;
  width: 100%;
}
@media screen and (max-width: 768px) {
  #ORDERS .productie-container .card .status-progress,
  #AGENDA .productie-container .card .status-progress {
    flex-direction: column;
  }
}
#ORDERS .productie-container .card .status-progress .header-wrapper,
#AGENDA .productie-container .card .status-progress .header-wrapper {
  position: relative;
  width: 100%;
}
@media screen and (max-width: 768px) {
  #ORDERS .productie-container .card .status-progress .header-wrapper,
  #AGENDA .productie-container .card .status-progress .header-wrapper {
    border-bottom: 1px solid #e1e1e1;
    margin-bottom: 12px;
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    column-gap: 12px;
  }
}
#ORDERS .productie-container .card .status-progress .header-wrapper .sectionManco,
#AGENDA .productie-container .card .status-progress .header-wrapper .sectionManco {
  position: absolute;
  left: 45px;
  top: -20px;
  border-radius: 50%;
  padding: 4px 5px 0px 5px;
  background: #FFF;
  color: #D50000;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  #ORDERS .productie-container .card .status-progress .header-wrapper .sectionManco,
  #AGENDA .productie-container .card .status-progress .header-wrapper .sectionManco {
    left: 135px;
    top: 0;
  }
}
#ORDERS .productie-container .card .status-progress .header-wrapper .sectionManco:hover,
#AGENDA .productie-container .card .status-progress .header-wrapper .sectionManco:hover {
  background: #D50000;
  color: #FFF !important;
}
#ORDERS .productie-container .card .status-progress .header-wrapper .sectionManco span,
#AGENDA .productie-container .card .status-progress .header-wrapper .sectionManco span {
  font-size: 28px;
}
#ORDERS .productie-container .card .status-progress .header-wrapper .production-status-update,
#AGENDA .productie-container .card .status-progress .header-wrapper .production-status-update {
  width: 50px;
  height: 50px;
  border-radius: 9999px;
  border: 1px solid #03a9f4;
  background-color: #fff;
  z-index: 2;
  position: relative;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  #ORDERS .productie-container .card .status-progress .header-wrapper .production-status-update,
  #AGENDA .productie-container .card .status-progress .header-wrapper .production-status-update {
    min-width: 25px;
    height: 25px;
  }
}
#ORDERS .productie-container .card .status-progress .header-wrapper .production-status-update.activeManco,
#AGENDA .productie-container .card .status-progress .header-wrapper .production-status-update.activeManco {
  background-color: #FF8F00;
  color: #000;
}
#ORDERS .productie-container .card .status-progress .header-wrapper .production-status-update.activeManco:after,
#AGENDA .productie-container .card .status-progress .header-wrapper .production-status-update.activeManco:after {
  content: "\f5f2";
  font-family: "Material Symbols Outlined";
  display: block;
  font-size: 38px;
  position: absolute;
  top: -5px;
  left: 4px;
  height: 50px;
  width: 50px;
}
#ORDERS .productie-container .card .status-progress .header-wrapper .production-status-update.active,
#AGENDA .productie-container .card .status-progress .header-wrapper .production-status-update.active {
  background-color: #03a9f4;
}
#ORDERS .productie-container .card .status-progress .header-wrapper .status-time,
#AGENDA .productie-container .card .status-progress .header-wrapper .status-time {
  position: absolute;
  border-radius: 50%;
  background-color: #FF8F00;
  color: #FFF;
  cursor: help;
  z-index: 9;
  padding: 1px 0 0 0;
  display: block;
  left: 58%;
  top: 12px;
}
#ORDERS .productie-container .card .status-progress .header-wrapper .status-time .status-time-icon,
#AGENDA .productie-container .card .status-progress .header-wrapper .status-time .status-time-icon {
  display: block;
  color: #FFF;
  cursor: help;
}
#ORDERS .productie-container .card .status-progress .header-wrapper .status-time .status-time-text,
#AGENDA .productie-container .card .status-progress .header-wrapper .status-time .status-time-text {
  display: none;
  position: absolute;
  top: -42px;
  left: -46px;
  background-color: #ff8f00;
  width: 120px;
  padding: 2px 6px;
  text-align: center;
  font-weight: bold;
  box-shadow: 1px 1px 4px 0 #515151;
}
#ORDERS .productie-container .card .status-progress .header-wrapper .header-name,
#AGENDA .productie-container .card .status-progress .header-wrapper .header-name {
  padding-top: 15px;
  font-weight: bold;
  width: 100%;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  #ORDERS .productie-container .card .status-progress .header-wrapper .header-name,
  #AGENDA .productie-container .card .status-progress .header-wrapper .header-name {
    padding-top: 0;
  }
}
#ORDERS .productie-container .card .status-progress .header-wrapper .header-datum,
#AGENDA .productie-container .card .status-progress .header-wrapper .header-datum {
  width: 100%;
  color: #9f9f9f;
}
#ORDERS .productie-container .card .status-progress .header-wrapper:after,
#AGENDA .productie-container .card .status-progress .header-wrapper:after {
  content: "";
  width: 100%;
  border: 1px solid #eeeeee;
  position: absolute;
  right: -28px;
  top: 25px;
  transform: translateY(-50%);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  #ORDERS .productie-container .card .status-progress .header-wrapper:after,
  #AGENDA .productie-container .card .status-progress .header-wrapper:after {
    display: none;
  }
}
#ORDERS .productie-container .card .status-progress .header-wrapper:last-child:after,
#AGENDA .productie-container .card .status-progress .header-wrapper:last-child:after {
  content: unset;
}

#ORDERS .transportImageUploads .transportImageUploadDiv,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv,
#AGENDA .transportImageUploads .transportImageUploadDiv,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv {
  height: 200px;
  width: 200px;
  position: relative;
}
#ORDERS .transportImageUploads .transportImageUploadDiv .transportImageUploadLabel,
#ORDERS .transportImageUploads .transportImageUploadDiv .transportMancoImageUploadLabel,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportImageUploadLabel,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportMancoImageUploadLabel,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportImageUploadLabel,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportMancoImageUploadLabel,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportImageUploadLabel,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoImageUploadLabel,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportImageUploadLabel,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportMancoImageUploadLabel,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportImageUploadLabel,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportMancoImageUploadLabel,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportImageUploadLabel,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportMancoImageUploadLabel,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportImageUploadLabel,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoImageUploadLabel {
  width: 100%;
  height: 100%;
  background-color: #8eb2b5;
  display: block;
  border-radius: 4px;
  position: relative;
}
#ORDERS .transportImageUploads .transportImageUploadDiv .transportImageUploadLabel .material-symbols-outlined,
#ORDERS .transportImageUploads .transportImageUploadDiv .transportMancoImageUploadLabel .material-symbols-outlined,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportImageUploadLabel .material-symbols-outlined,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportMancoImageUploadLabel .material-symbols-outlined,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportImageUploadLabel .material-symbols-outlined,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportMancoImageUploadLabel .material-symbols-outlined,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportImageUploadLabel .material-symbols-outlined,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoImageUploadLabel .material-symbols-outlined,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportImageUploadLabel .material-symbols-outlined,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportMancoImageUploadLabel .material-symbols-outlined,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportImageUploadLabel .material-symbols-outlined,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportMancoImageUploadLabel .material-symbols-outlined,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportImageUploadLabel .material-symbols-outlined,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportMancoImageUploadLabel .material-symbols-outlined,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportImageUploadLabel .material-symbols-outlined,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoImageUploadLabel .material-symbols-outlined {
  color: #FFF;
  display: block;
  width: fit-content;
  height: fit-content;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  font-size: 100px;
}
#ORDERS .transportImageUploads .transportImageUploadDiv .transportImageUpload,
#ORDERS .transportImageUploads .transportImageUploadDiv .transportMancoImageUpload,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportImageUpload,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportMancoImageUpload,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportImageUpload,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportMancoImageUpload,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportImageUpload,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoImageUpload,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportImageUpload,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportMancoImageUpload,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportImageUpload,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportMancoImageUpload,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportImageUpload,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportMancoImageUpload,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportImageUpload,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoImageUpload {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
#ORDERS .transportImageUploads .transportImageUploadDiv .transportPreviewImage,
#ORDERS .transportImageUploads .transportImageUploadDiv .transportMancoPreviewImage,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportPreviewImage,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportMancoPreviewImage,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportPreviewImage,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportMancoPreviewImage,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportPreviewImage,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoPreviewImage,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportPreviewImage,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportMancoPreviewImage,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportPreviewImage,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportMancoPreviewImage,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportPreviewImage,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportMancoPreviewImage,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportPreviewImage,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoPreviewImage {
  width: auto;
  height: 200px;
  object-fit: contain;
}
#ORDERS .transportImageUploads .transportImageUploadDiv .transportDeleteUploadedImage,
#ORDERS .transportImageUploads .transportImageUploadDiv .transportMancoDeleteUploadedImage,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportDeleteUploadedImage,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportMancoDeleteUploadedImage,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportDeleteUploadedImage,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportMancoDeleteUploadedImage,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportDeleteUploadedImage,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoDeleteUploadedImage,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportDeleteUploadedImage,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportMancoDeleteUploadedImage,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportDeleteUploadedImage,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportMancoDeleteUploadedImage,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportDeleteUploadedImage,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportMancoDeleteUploadedImage,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportDeleteUploadedImage,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoDeleteUploadedImage {
  position: absolute;
  right: 0;
  z-index: 9999;
  bottom: 0;
}
#ORDERS .transportImageUploads .transportImageUploadDiv .transportDeleteUploadedImage .material-symbols-outlined,
#ORDERS .transportImageUploads .transportImageUploadDiv .transportMancoDeleteUploadedImage .material-symbols-outlined,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportDeleteUploadedImage .material-symbols-outlined,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportMancoDeleteUploadedImage .material-symbols-outlined,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportDeleteUploadedImage .material-symbols-outlined,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportMancoDeleteUploadedImage .material-symbols-outlined,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportDeleteUploadedImage .material-symbols-outlined,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoDeleteUploadedImage .material-symbols-outlined,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportDeleteUploadedImage .material-symbols-outlined,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportMancoDeleteUploadedImage .material-symbols-outlined,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportDeleteUploadedImage .material-symbols-outlined,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportMancoDeleteUploadedImage .material-symbols-outlined,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportDeleteUploadedImage .material-symbols-outlined,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportMancoDeleteUploadedImage .material-symbols-outlined,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportDeleteUploadedImage .material-symbols-outlined,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoDeleteUploadedImage .material-symbols-outlined {
  font-size: 40px;
  color: #D50000;
  cursor: pointer;
}
#ORDERS .transportImageUploads .transportImageUploadDiv .transportViewUploadedImage,
#ORDERS .transportImageUploads .transportImageUploadDiv .transportMancoViewUploadedImage,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportViewUploadedImage,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportMancoViewUploadedImage,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportViewUploadedImage,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportMancoViewUploadedImage,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportViewUploadedImage,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoViewUploadedImage,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportViewUploadedImage,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportMancoViewUploadedImage,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportViewUploadedImage,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportMancoViewUploadedImage,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportViewUploadedImage,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportMancoViewUploadedImage,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportViewUploadedImage,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoViewUploadedImage {
  position: absolute;
  right: 40px;
  z-index: 9999;
  bottom: 0;
}
#ORDERS .transportImageUploads .transportImageUploadDiv .transportViewUploadedImage .material-symbols-outlined,
#ORDERS .transportImageUploads .transportImageUploadDiv .transportMancoViewUploadedImage .material-symbols-outlined,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportViewUploadedImage .material-symbols-outlined,
#ORDERS .transportImageUploads .transportMancoImageUploadDiv .transportMancoViewUploadedImage .material-symbols-outlined,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportViewUploadedImage .material-symbols-outlined,
#ORDERS .transportMancoImageUploads .transportImageUploadDiv .transportMancoViewUploadedImage .material-symbols-outlined,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportViewUploadedImage .material-symbols-outlined,
#ORDERS .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoViewUploadedImage .material-symbols-outlined,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportViewUploadedImage .material-symbols-outlined,
#AGENDA .transportImageUploads .transportImageUploadDiv .transportMancoViewUploadedImage .material-symbols-outlined,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportViewUploadedImage .material-symbols-outlined,
#AGENDA .transportImageUploads .transportMancoImageUploadDiv .transportMancoViewUploadedImage .material-symbols-outlined,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportViewUploadedImage .material-symbols-outlined,
#AGENDA .transportMancoImageUploads .transportImageUploadDiv .transportMancoViewUploadedImage .material-symbols-outlined,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportViewUploadedImage .material-symbols-outlined,
#AGENDA .transportMancoImageUploads .transportMancoImageUploadDiv .transportMancoViewUploadedImage .material-symbols-outlined {
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}
#ORDERS .mancoform .mancoHeader,
#AGENDA .mancoform .mancoHeader {
  width: 100%;
  background-color: #03a9f4;
  color: #FFF;
  padding: 6px 12px;
  margin-top: 1em;
}
#ORDERS .mancoform .mancoHeader h2,
#AGENDA .mancoform .mancoHeader h2 {
  color: #FFF !important;
}
#ORDERS .mancoform .mancoHeader:hover,
#AGENDA .mancoform .mancoHeader:hover {
  background-color: rgb(45.5748987854, 188.0526315789, 252.4251012146);
  cursor: pointer;
}

#ORDERS .startTime,
#AGENDA .startTime {
  background-color: #4CAF50;
}
#ORDERS .endTime,
#AGENDA .endTime {
  background-color: #ff6c61;
}
#ORDERS .returnTime,
#AGENDA .returnTime {
  background-color: #2196F3;
}
#ORDERS .inmeet-container .header-splitter,
#AGENDA .inmeet-container .header-splitter {
  border-bottom: 6px double #000;
}
#ORDERS .inmeet-container .inmetingAfronden,
#AGENDA .inmeet-container .inmetingAfronden {
  margin: 0 0 0 auto;
  width: 200px;
  text-align: center;
  display: block;
  font-weight: bold;
  font-size: 18px;
  line-height: 18px;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper,
#AGENDA .inmeet-container .agenda-inmeet-wrapper {
  padding: 0 12px;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenHeader,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenHeader {
  padding: 6px 12px;
  background-color: #03a9f4;
  color: #FFF;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenHeader span,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenHeader span {
  height: fit-content;
  margin: auto 0;
  font-size: 30px;
  color: #FFF;
  font-weight: bold;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenHeader h2,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenHeader h2 {
  color: #FFF;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row:nth-child(even),
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row:nth-child(even) {
  background-color: #f9f9f9;
}
@media screen and (max-width: 576px) {
  #ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row > .col-3,
  #AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row > .col-3 {
    width: 40%;
  }
}
@media screen and (max-width: 576px) {
  #ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row > .col-9,
  #AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row > .col-9 {
    width: 60%;
  }
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .remove-top-bottom-padding,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .remove-top-bottom-padding {
  padding: 0 12px;
  display: flex;
  align-items: center;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .border-right,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .border-right {
  border-right: 1px solid #000;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .border-bottom,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .border-bottom {
  border-bottom: 1px solid #000;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options > div,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options > div {
  row-gap: 12px;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem {
  width: 100%;
  max-width: 25%;
}
@media screen and (max-width: 1200px) {
  #ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem,
  #AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem {
    max-width: 33.3333333%;
  }
}
@media screen and (max-width: 992px) {
  #ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem,
  #AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem {
    max-width: 50%;
  }
}
@media screen and (max-width: 768px) {
  #ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem,
  #AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem {
    max-width: 100%;
  }
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=checkbox],
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=checkbox] {
  -webkit-appearance: initial;
  appearance: initial;
  width: 28px !important;
  max-height: 28px !important;
  min-height: 28px !important;
  height: 28px !important;
  border: 1px solid lightgray !important;
  margin-right: 0.5em;
  position: relative;
  padding: 0 !important;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=text],
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=text] {
  width: 100px;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid #000 !important;
  margin-left: 0.5em;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=text]:focus,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=text]:focus {
  outline: none;
  border: none !important;
  border-bottom: 1px solid #000 !important;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input.PRECHECKED:after,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input.PRECHECKED:after {
  content: "\e5cd";
  font-family: "Material Icons";
  color: #c1c1c1;
  background-color: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 30px;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=checkbox]:checked,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=checkbox]:checked {
  background: #FFF;
  overflow: hidden;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=checkbox]:checked.inmeter:after,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=checkbox]:checked.inmeter:after {
  content: "\e5ca";
  font-family: "Material Icons";
  color: #4CAF50;
  background: #FFF;
  position: absolute;
  left: 50%;
  top: 55%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 28px;
  width: 28px;
  height: 28px;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem label,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem label {
  font-size: 14px;
  font-weight: bold;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row:last-of-type .border-bottom,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .vragen .vragenContent .inmeet-row:last-of-type .border-bottom {
  border-bottom: none;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .tekeningen .tekeningHeader,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .tekeningen .tekeningHeader {
  padding: 6px 12px;
  background-color: #03a9f4;
  color: #FFF;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .tekeningen .tekeningHeader span,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .tekeningen .tekeningHeader span {
  height: fit-content;
  margin: auto 0;
  font-size: 30px;
  color: #FFF;
  font-weight: bold;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .tekeningen .tekeningHeader h2,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .tekeningen .tekeningHeader h2 {
  color: #FFF;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .fotos .fotosHeader,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .fotos .fotosHeader {
  padding: 6px 12px;
  background-color: #03a9f4;
  color: #FFF;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .fotos .fotosHeader span,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .fotos .fotosHeader span {
  height: fit-content;
  margin: auto 0;
  font-size: 30px;
  color: #FFF;
  font-weight: bold;
}
#ORDERS .inmeet-container .agenda-inmeet-wrapper .fotos .fotosHeader h2,
#AGENDA .inmeet-container .agenda-inmeet-wrapper .fotos .fotosHeader h2 {
  color: #FFF;
}
@media screen and (max-width: 1200px) {
  #ORDERS .inmeet-container .agenda-inmeet-wrapper .fotos .fotosContent .inmeetImageUploads .row .col-2,
  #AGENDA .inmeet-container .agenda-inmeet-wrapper .fotos .fotosContent .inmeetImageUploads .row .col-2 {
    width: 33.33333333%;
  }
}
@media screen and (max-width: 768px) {
  #ORDERS .inmeet-container .agenda-inmeet-wrapper .fotos .fotosContent .inmeetImageUploads .row .col-2,
  #AGENDA .inmeet-container .agenda-inmeet-wrapper .fotos .fotosContent .inmeetImageUploads .row .col-2 {
    width: 50%;
  }
}

@media screen and (max-width: 1400px) {
  #AGENDA .hide-tablet {
    display: none !important;
  }
}
@media screen and (max-width: 1400px) {
  #AGENDA #painters #lists .body table,
  #AGENDA #painters #files .body table,
  #AGENDA #sawmill #lists .body table,
  #AGENDA #sawmill #files .body table,
  #AGENDA #pre-assembly #lists .body table,
  #AGENDA #pre-assembly #files .body table,
  #AGENDA #pre-finishing #lists .body table,
  #AGENDA #pre-finishing #files .body table,
  #AGENDA #expedition #lists .body table,
  #AGENDA #expedition #files .body table {
    border: 0;
    box-shadow: none;
  }
  #AGENDA #painters #lists .body table thead,
  #AGENDA #painters #files .body table thead,
  #AGENDA #sawmill #lists .body table thead,
  #AGENDA #sawmill #files .body table thead,
  #AGENDA #pre-assembly #lists .body table thead,
  #AGENDA #pre-assembly #files .body table thead,
  #AGENDA #pre-finishing #lists .body table thead,
  #AGENDA #pre-finishing #files .body table thead,
  #AGENDA #expedition #lists .body table thead,
  #AGENDA #expedition #files .body table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #AGENDA #painters #lists .body table tr,
  #AGENDA #painters #files .body table tr,
  #AGENDA #sawmill #lists .body table tr,
  #AGENDA #sawmill #files .body table tr,
  #AGENDA #pre-assembly #lists .body table tr,
  #AGENDA #pre-assembly #files .body table tr,
  #AGENDA #pre-finishing #lists .body table tr,
  #AGENDA #pre-finishing #files .body table tr,
  #AGENDA #expedition #lists .body table tr,
  #AGENDA #expedition #files .body table tr {
    border-bottom: 24px solid #eeeeee;
    display: block;
  }
  #AGENDA #painters #lists .body table td,
  #AGENDA #painters #files .body table td,
  #AGENDA #sawmill #lists .body table td,
  #AGENDA #sawmill #files .body table td,
  #AGENDA #pre-assembly #lists .body table td,
  #AGENDA #pre-assembly #files .body table td,
  #AGENDA #pre-finishing #lists .body table td,
  #AGENDA #pre-finishing #files .body table td,
  #AGENDA #expedition #lists .body table td,
  #AGENDA #expedition #files .body table td {
    border-bottom: 1px solid #eeeeee;
    display: block;
    text-align: right;
    min-height: 49px;
  }
  #AGENDA #painters #lists .body table td::before,
  #AGENDA #painters #files .body table td::before,
  #AGENDA #sawmill #lists .body table td::before,
  #AGENDA #sawmill #files .body table td::before,
  #AGENDA #pre-assembly #lists .body table td::before,
  #AGENDA #pre-assembly #files .body table td::before,
  #AGENDA #pre-finishing #lists .body table td::before,
  #AGENDA #pre-finishing #files .body table td::before,
  #AGENDA #expedition #lists .body table td::before,
  #AGENDA #expedition #files .body table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  #AGENDA #painters #lists .body table td:last-child,
  #AGENDA #painters #files .body table td:last-child,
  #AGENDA #sawmill #lists .body table td:last-child,
  #AGENDA #sawmill #files .body table td:last-child,
  #AGENDA #pre-assembly #lists .body table td:last-child,
  #AGENDA #pre-assembly #files .body table td:last-child,
  #AGENDA #pre-finishing #lists .body table td:last-child,
  #AGENDA #pre-finishing #files .body table td:last-child,
  #AGENDA #expedition #lists .body table td:last-child,
  #AGENDA #expedition #files .body table td:last-child {
    border-bottom: 0;
  }
}
@media screen and (max-width: 1400px) {
  #AGENDA #painters #lists .body table tbody tr td,
  #AGENDA #painters #files .body table tbody tr td,
  #AGENDA #sawmill #lists .body table tbody tr td,
  #AGENDA #sawmill #files .body table tbody tr td,
  #AGENDA #pre-assembly #lists .body table tbody tr td,
  #AGENDA #pre-assembly #files .body table tbody tr td,
  #AGENDA #pre-finishing #lists .body table tbody tr td,
  #AGENDA #pre-finishing #files .body table tbody tr td,
  #AGENDA #expedition #lists .body table tbody tr td,
  #AGENDA #expedition #files .body table tbody tr td {
    text-align: right !important;
  }
}
@media screen and (max-width: 768px) {
  #AGENDA #glass-slat-saw #lists .body table,
  #AGENDA #glass-slat-saw #files .body table,
  #AGENDA #result-cnc-machine #lists .body table,
  #AGENDA #result-cnc-machine #files .body table,
  #AGENDA #closers #lists .body table,
  #AGENDA #closers #files .body table {
    border: 0;
    box-shadow: none;
  }
  #AGENDA #glass-slat-saw #lists .body table thead,
  #AGENDA #glass-slat-saw #files .body table thead,
  #AGENDA #result-cnc-machine #lists .body table thead,
  #AGENDA #result-cnc-machine #files .body table thead,
  #AGENDA #closers #lists .body table thead,
  #AGENDA #closers #files .body table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #AGENDA #glass-slat-saw #lists .body table tr,
  #AGENDA #glass-slat-saw #files .body table tr,
  #AGENDA #result-cnc-machine #lists .body table tr,
  #AGENDA #result-cnc-machine #files .body table tr,
  #AGENDA #closers #lists .body table tr,
  #AGENDA #closers #files .body table tr {
    border-bottom: 24px solid #eeeeee;
    display: block;
  }
  #AGENDA #glass-slat-saw #lists .body table td,
  #AGENDA #glass-slat-saw #files .body table td,
  #AGENDA #result-cnc-machine #lists .body table td,
  #AGENDA #result-cnc-machine #files .body table td,
  #AGENDA #closers #lists .body table td,
  #AGENDA #closers #files .body table td {
    border-bottom: 1px solid #eeeeee;
    display: block;
    text-align: right;
    min-height: 49px;
  }
  #AGENDA #glass-slat-saw #lists .body table td::before,
  #AGENDA #glass-slat-saw #files .body table td::before,
  #AGENDA #result-cnc-machine #lists .body table td::before,
  #AGENDA #result-cnc-machine #files .body table td::before,
  #AGENDA #closers #lists .body table td::before,
  #AGENDA #closers #files .body table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  #AGENDA #glass-slat-saw #lists .body table td:last-child,
  #AGENDA #glass-slat-saw #files .body table td:last-child,
  #AGENDA #result-cnc-machine #lists .body table td:last-child,
  #AGENDA #result-cnc-machine #files .body table td:last-child,
  #AGENDA #closers #lists .body table td:last-child,
  #AGENDA #closers #files .body table td:last-child {
    border-bottom: 0;
  }
  #AGENDA #glass-slat-saw #lists .body table tbody tr td,
  #AGENDA #glass-slat-saw #files .body table tbody tr td,
  #AGENDA #result-cnc-machine #lists .body table tbody tr td,
  #AGENDA #result-cnc-machine #files .body table tbody tr td,
  #AGENDA #closers #lists .body table tbody tr td,
  #AGENDA #closers #files .body table tbody tr td {
    text-align: right !important;
  }
}
#AGENDA #painters #lists .header,
#AGENDA #painters #files .header,
#AGENDA #sawmill #lists .header,
#AGENDA #sawmill #files .header,
#AGENDA #closers #lists .header,
#AGENDA #closers #files .header,
#AGENDA #glass-slat-saw #lists .header,
#AGENDA #glass-slat-saw #files .header,
#AGENDA #pre-assembly #lists .header,
#AGENDA #pre-assembly #files .header,
#AGENDA #pre-finishing #lists .header,
#AGENDA #pre-finishing #files .header,
#AGENDA #expedition #lists .header,
#AGENDA #expedition #files .header,
#AGENDA #result-cnc-machine #lists .header,
#AGENDA #result-cnc-machine #files .header {
  background-color: #03a9f4;
  padding: 12px;
  color: #FFF;
}
#AGENDA #painters #lists .header.special,
#AGENDA #painters #files .header.special,
#AGENDA #sawmill #lists .header.special,
#AGENDA #sawmill #files .header.special,
#AGENDA #closers #lists .header.special,
#AGENDA #closers #files .header.special,
#AGENDA #glass-slat-saw #lists .header.special,
#AGENDA #glass-slat-saw #files .header.special,
#AGENDA #pre-assembly #lists .header.special,
#AGENDA #pre-assembly #files .header.special,
#AGENDA #pre-finishing #lists .header.special,
#AGENDA #pre-finishing #files .header.special,
#AGENDA #expedition #lists .header.special,
#AGENDA #expedition #files .header.special,
#AGENDA #result-cnc-machine #lists .header.special,
#AGENDA #result-cnc-machine #files .header.special {
  background-color: #7300a8;
}
#AGENDA #painters #lists .header:hover,
#AGENDA #painters #files .header:hover,
#AGENDA #sawmill #lists .header:hover,
#AGENDA #sawmill #files .header:hover,
#AGENDA #closers #lists .header:hover,
#AGENDA #closers #files .header:hover,
#AGENDA #glass-slat-saw #lists .header:hover,
#AGENDA #glass-slat-saw #files .header:hover,
#AGENDA #pre-assembly #lists .header:hover,
#AGENDA #pre-assembly #files .header:hover,
#AGENDA #pre-finishing #lists .header:hover,
#AGENDA #pre-finishing #files .header:hover,
#AGENDA #expedition #lists .header:hover,
#AGENDA #expedition #files .header:hover,
#AGENDA #result-cnc-machine #lists .header:hover,
#AGENDA #result-cnc-machine #files .header:hover {
  cursor: pointer;
  background-color: 1px solid rgb(2.3805668016, 134.1052631579, 193.6194331984);
}
#AGENDA #painters #lists .body .sublistHeader,
#AGENDA #painters #files .body .sublistHeader,
#AGENDA #sawmill #lists .body .sublistHeader,
#AGENDA #sawmill #files .body .sublistHeader,
#AGENDA #closers #lists .body .sublistHeader,
#AGENDA #closers #files .body .sublistHeader,
#AGENDA #glass-slat-saw #lists .body .sublistHeader,
#AGENDA #glass-slat-saw #files .body .sublistHeader,
#AGENDA #pre-assembly #lists .body .sublistHeader,
#AGENDA #pre-assembly #files .body .sublistHeader,
#AGENDA #pre-finishing #lists .body .sublistHeader,
#AGENDA #pre-finishing #files .body .sublistHeader,
#AGENDA #expedition #lists .body .sublistHeader,
#AGENDA #expedition #files .body .sublistHeader,
#AGENDA #result-cnc-machine #lists .body .sublistHeader,
#AGENDA #result-cnc-machine #files .body .sublistHeader {
  background-color: rgb(75.8032388664, 197.7157894737, 252.7967611336);
  padding: 12px;
  color: #FFF;
  cursor: pointer;
}
#AGENDA #painters #lists .body .noResults,
#AGENDA #painters #files .body .noResults,
#AGENDA #sawmill #lists .body .noResults,
#AGENDA #sawmill #files .body .noResults,
#AGENDA #closers #lists .body .noResults,
#AGENDA #closers #files .body .noResults,
#AGENDA #glass-slat-saw #lists .body .noResults,
#AGENDA #glass-slat-saw #files .body .noResults,
#AGENDA #pre-assembly #lists .body .noResults,
#AGENDA #pre-assembly #files .body .noResults,
#AGENDA #pre-finishing #lists .body .noResults,
#AGENDA #pre-finishing #files .body .noResults,
#AGENDA #expedition #lists .body .noResults,
#AGENDA #expedition #files .body .noResults,
#AGENDA #result-cnc-machine #lists .body .noResults,
#AGENDA #result-cnc-machine #files .body .noResults {
  background-color: #FFF;
  padding: 12px;
  text-align: center;
  width: 100%;
  font-weight: bold;
}
#AGENDA #painters #lists .body table,
#AGENDA #painters #files .body table,
#AGENDA #sawmill #lists .body table,
#AGENDA #sawmill #files .body table,
#AGENDA #closers #lists .body table,
#AGENDA #closers #files .body table,
#AGENDA #glass-slat-saw #lists .body table,
#AGENDA #glass-slat-saw #files .body table,
#AGENDA #pre-assembly #lists .body table,
#AGENDA #pre-assembly #files .body table,
#AGENDA #pre-finishing #lists .body table,
#AGENDA #pre-finishing #files .body table,
#AGENDA #expedition #lists .body table,
#AGENDA #expedition #files .body table,
#AGENDA #result-cnc-machine #lists .body table,
#AGENDA #result-cnc-machine #files .body table {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
#AGENDA #painters #lists .body table.sublistTable,
#AGENDA #painters #files .body table.sublistTable,
#AGENDA #sawmill #lists .body table.sublistTable,
#AGENDA #sawmill #files .body table.sublistTable,
#AGENDA #closers #lists .body table.sublistTable,
#AGENDA #closers #files .body table.sublistTable,
#AGENDA #glass-slat-saw #lists .body table.sublistTable,
#AGENDA #glass-slat-saw #files .body table.sublistTable,
#AGENDA #pre-assembly #lists .body table.sublistTable,
#AGENDA #pre-assembly #files .body table.sublistTable,
#AGENDA #pre-finishing #lists .body table.sublistTable,
#AGENDA #pre-finishing #files .body table.sublistTable,
#AGENDA #expedition #lists .body table.sublistTable,
#AGENDA #expedition #files .body table.sublistTable,
#AGENDA #result-cnc-machine #lists .body table.sublistTable,
#AGENDA #result-cnc-machine #files .body table.sublistTable {
  border-radius: 0px;
  box-shadow: 0 0 0 0;
}
#AGENDA #painters #lists .body table.sublistTable th,
#AGENDA #painters #files .body table.sublistTable th,
#AGENDA #sawmill #lists .body table.sublistTable th,
#AGENDA #sawmill #files .body table.sublistTable th,
#AGENDA #closers #lists .body table.sublistTable th,
#AGENDA #closers #files .body table.sublistTable th,
#AGENDA #glass-slat-saw #lists .body table.sublistTable th,
#AGENDA #glass-slat-saw #files .body table.sublistTable th,
#AGENDA #pre-assembly #lists .body table.sublistTable th,
#AGENDA #pre-assembly #files .body table.sublistTable th,
#AGENDA #pre-finishing #lists .body table.sublistTable th,
#AGENDA #pre-finishing #files .body table.sublistTable th,
#AGENDA #expedition #lists .body table.sublistTable th,
#AGENDA #expedition #files .body table.sublistTable th,
#AGENDA #result-cnc-machine #lists .body table.sublistTable th,
#AGENDA #result-cnc-machine #files .body table.sublistTable th {
  border-radius: 0px;
  box-shadow: 0 0 0 0;
}
#AGENDA #painters #lists .body table thead tr th,
#AGENDA #painters #files .body table thead tr th,
#AGENDA #sawmill #lists .body table thead tr th,
#AGENDA #sawmill #files .body table thead tr th,
#AGENDA #closers #lists .body table thead tr th,
#AGENDA #closers #files .body table thead tr th,
#AGENDA #glass-slat-saw #lists .body table thead tr th,
#AGENDA #glass-slat-saw #files .body table thead tr th,
#AGENDA #pre-assembly #lists .body table thead tr th,
#AGENDA #pre-assembly #files .body table thead tr th,
#AGENDA #pre-finishing #lists .body table thead tr th,
#AGENDA #pre-finishing #files .body table thead tr th,
#AGENDA #expedition #lists .body table thead tr th,
#AGENDA #expedition #files .body table thead tr th,
#AGENDA #result-cnc-machine #lists .body table thead tr th,
#AGENDA #result-cnc-machine #files .body table thead tr th {
  text-transform: capitalize;
}
#AGENDA #painters #lists .body table tbody tr,
#AGENDA #painters #files .body table tbody tr,
#AGENDA #sawmill #lists .body table tbody tr,
#AGENDA #sawmill #files .body table tbody tr,
#AGENDA #closers #lists .body table tbody tr,
#AGENDA #closers #files .body table tbody tr,
#AGENDA #glass-slat-saw #lists .body table tbody tr,
#AGENDA #glass-slat-saw #files .body table tbody tr,
#AGENDA #pre-assembly #lists .body table tbody tr,
#AGENDA #pre-assembly #files .body table tbody tr,
#AGENDA #pre-finishing #lists .body table tbody tr,
#AGENDA #pre-finishing #files .body table tbody tr,
#AGENDA #expedition #lists .body table tbody tr,
#AGENDA #expedition #files .body table tbody tr,
#AGENDA #result-cnc-machine #lists .body table tbody tr,
#AGENDA #result-cnc-machine #files .body table tbody tr {
  position: relative;
}
#AGENDA #painters #lists .body table tbody tr:nth-child(even),
#AGENDA #painters #files .body table tbody tr:nth-child(even),
#AGENDA #sawmill #lists .body table tbody tr:nth-child(even),
#AGENDA #sawmill #files .body table tbody tr:nth-child(even),
#AGENDA #closers #lists .body table tbody tr:nth-child(even),
#AGENDA #closers #files .body table tbody tr:nth-child(even),
#AGENDA #glass-slat-saw #lists .body table tbody tr:nth-child(even),
#AGENDA #glass-slat-saw #files .body table tbody tr:nth-child(even),
#AGENDA #pre-assembly #lists .body table tbody tr:nth-child(even),
#AGENDA #pre-assembly #files .body table tbody tr:nth-child(even),
#AGENDA #pre-finishing #lists .body table tbody tr:nth-child(even),
#AGENDA #pre-finishing #files .body table tbody tr:nth-child(even),
#AGENDA #expedition #lists .body table tbody tr:nth-child(even),
#AGENDA #expedition #files .body table tbody tr:nth-child(even),
#AGENDA #result-cnc-machine #lists .body table tbody tr:nth-child(even),
#AGENDA #result-cnc-machine #files .body table tbody tr:nth-child(even) {
  background-color: #FAFAFA;
}
#AGENDA #painters #lists .body table tbody tr:hover,
#AGENDA #painters #files .body table tbody tr:hover,
#AGENDA #sawmill #lists .body table tbody tr:hover,
#AGENDA #sawmill #files .body table tbody tr:hover,
#AGENDA #closers #lists .body table tbody tr:hover,
#AGENDA #closers #files .body table tbody tr:hover,
#AGENDA #glass-slat-saw #lists .body table tbody tr:hover,
#AGENDA #glass-slat-saw #files .body table tbody tr:hover,
#AGENDA #pre-assembly #lists .body table tbody tr:hover,
#AGENDA #pre-assembly #files .body table tbody tr:hover,
#AGENDA #pre-finishing #lists .body table tbody tr:hover,
#AGENDA #pre-finishing #files .body table tbody tr:hover,
#AGENDA #expedition #lists .body table tbody tr:hover,
#AGENDA #expedition #files .body table tbody tr:hover,
#AGENDA #result-cnc-machine #lists .body table tbody tr:hover,
#AGENDA #result-cnc-machine #files .body table tbody tr:hover {
  cursor: pointer;
  background-color: #F1F1F1;
}
#AGENDA #painters #lists .body table tbody tr td,
#AGENDA #painters #files .body table tbody tr td,
#AGENDA #sawmill #lists .body table tbody tr td,
#AGENDA #sawmill #files .body table tbody tr td,
#AGENDA #closers #lists .body table tbody tr td,
#AGENDA #closers #files .body table tbody tr td,
#AGENDA #glass-slat-saw #lists .body table tbody tr td,
#AGENDA #glass-slat-saw #files .body table tbody tr td,
#AGENDA #pre-assembly #lists .body table tbody tr td,
#AGENDA #pre-assembly #files .body table tbody tr td,
#AGENDA #pre-finishing #lists .body table tbody tr td,
#AGENDA #pre-finishing #files .body table tbody tr td,
#AGENDA #expedition #lists .body table tbody tr td,
#AGENDA #expedition #files .body table tbody tr td,
#AGENDA #result-cnc-machine #lists .body table tbody tr td,
#AGENDA #result-cnc-machine #files .body table tbody tr td {
  color: #1d1d1d;
}
#AGENDA #painters #lists .body table tbody tr td .hoverInfoIcon,
#AGENDA #painters #files .body table tbody tr td .hoverInfoIcon,
#AGENDA #sawmill #lists .body table tbody tr td .hoverInfoIcon,
#AGENDA #sawmill #files .body table tbody tr td .hoverInfoIcon,
#AGENDA #closers #lists .body table tbody tr td .hoverInfoIcon,
#AGENDA #closers #files .body table tbody tr td .hoverInfoIcon,
#AGENDA #glass-slat-saw #lists .body table tbody tr td .hoverInfoIcon,
#AGENDA #glass-slat-saw #files .body table tbody tr td .hoverInfoIcon,
#AGENDA #pre-assembly #lists .body table tbody tr td .hoverInfoIcon,
#AGENDA #pre-assembly #files .body table tbody tr td .hoverInfoIcon,
#AGENDA #pre-finishing #lists .body table tbody tr td .hoverInfoIcon,
#AGENDA #pre-finishing #files .body table tbody tr td .hoverInfoIcon,
#AGENDA #expedition #lists .body table tbody tr td .hoverInfoIcon,
#AGENDA #expedition #files .body table tbody tr td .hoverInfoIcon,
#AGENDA #result-cnc-machine #lists .body table tbody tr td .hoverInfoIcon,
#AGENDA #result-cnc-machine #files .body table tbody tr td .hoverInfoIcon {
  cursor: zoom-in !important;
}
#AGENDA #painters #lists .body table tbody tr td .hoverInfoIcon span,
#AGENDA #painters #files .body table tbody tr td .hoverInfoIcon span,
#AGENDA #sawmill #lists .body table tbody tr td .hoverInfoIcon span,
#AGENDA #sawmill #files .body table tbody tr td .hoverInfoIcon span,
#AGENDA #closers #lists .body table tbody tr td .hoverInfoIcon span,
#AGENDA #closers #files .body table tbody tr td .hoverInfoIcon span,
#AGENDA #glass-slat-saw #lists .body table tbody tr td .hoverInfoIcon span,
#AGENDA #glass-slat-saw #files .body table tbody tr td .hoverInfoIcon span,
#AGENDA #pre-assembly #lists .body table tbody tr td .hoverInfoIcon span,
#AGENDA #pre-assembly #files .body table tbody tr td .hoverInfoIcon span,
#AGENDA #pre-finishing #lists .body table tbody tr td .hoverInfoIcon span,
#AGENDA #pre-finishing #files .body table tbody tr td .hoverInfoIcon span,
#AGENDA #expedition #lists .body table tbody tr td .hoverInfoIcon span,
#AGENDA #expedition #files .body table tbody tr td .hoverInfoIcon span,
#AGENDA #result-cnc-machine #lists .body table tbody tr td .hoverInfoIcon span,
#AGENDA #result-cnc-machine #files .body table tbody tr td .hoverInfoIcon span {
  color: #03a9f4;
}
#AGENDA #painters #lists .body table tbody tr td.extraSectionManco, #AGENDA #painters #lists .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #painters #files .body table tbody tr td.extraSectionManco,
#AGENDA #painters #files .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #sawmill #lists .body table tbody tr td.extraSectionManco,
#AGENDA #sawmill #lists .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #sawmill #files .body table tbody tr td.extraSectionManco,
#AGENDA #sawmill #files .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #closers #lists .body table tbody tr td.extraSectionManco,
#AGENDA #closers #lists .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #closers #files .body table tbody tr td.extraSectionManco,
#AGENDA #closers #files .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.extraSectionManco,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #glass-slat-saw #files .body table tbody tr td.extraSectionManco,
#AGENDA #glass-slat-saw #files .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #pre-assembly #lists .body table tbody tr td.extraSectionManco,
#AGENDA #pre-assembly #lists .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #pre-assembly #files .body table tbody tr td.extraSectionManco,
#AGENDA #pre-assembly #files .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #pre-finishing #lists .body table tbody tr td.extraSectionManco,
#AGENDA #pre-finishing #lists .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #pre-finishing #files .body table tbody tr td.extraSectionManco,
#AGENDA #pre-finishing #files .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #expedition #lists .body table tbody tr td.extraSectionManco,
#AGENDA #expedition #lists .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #expedition #files .body table tbody tr td.extraSectionManco,
#AGENDA #expedition #files .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.extraSectionManco,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.extraSectionMancoExpedition,
#AGENDA #result-cnc-machine #files .body table tbody tr td.extraSectionManco,
#AGENDA #result-cnc-machine #files .body table tbody tr td.extraSectionMancoExpedition {
  cursor: pointer;
}
#AGENDA #painters #lists .body table tbody tr td.extraSectionManco:hover, #AGENDA #painters #lists .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #painters #files .body table tbody tr td.extraSectionManco:hover,
#AGENDA #painters #files .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #sawmill #lists .body table tbody tr td.extraSectionManco:hover,
#AGENDA #sawmill #lists .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #sawmill #files .body table tbody tr td.extraSectionManco:hover,
#AGENDA #sawmill #files .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #closers #lists .body table tbody tr td.extraSectionManco:hover,
#AGENDA #closers #lists .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #closers #files .body table tbody tr td.extraSectionManco:hover,
#AGENDA #closers #files .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.extraSectionManco:hover,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #glass-slat-saw #files .body table tbody tr td.extraSectionManco:hover,
#AGENDA #glass-slat-saw #files .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #pre-assembly #lists .body table tbody tr td.extraSectionManco:hover,
#AGENDA #pre-assembly #lists .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #pre-assembly #files .body table tbody tr td.extraSectionManco:hover,
#AGENDA #pre-assembly #files .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #pre-finishing #lists .body table tbody tr td.extraSectionManco:hover,
#AGENDA #pre-finishing #lists .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #pre-finishing #files .body table tbody tr td.extraSectionManco:hover,
#AGENDA #pre-finishing #files .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #expedition #lists .body table tbody tr td.extraSectionManco:hover,
#AGENDA #expedition #lists .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #expedition #files .body table tbody tr td.extraSectionManco:hover,
#AGENDA #expedition #files .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.extraSectionManco:hover,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.extraSectionMancoExpedition:hover,
#AGENDA #result-cnc-machine #files .body table tbody tr td.extraSectionManco:hover,
#AGENDA #result-cnc-machine #files .body table tbody tr td.extraSectionMancoExpedition:hover {
  background: #D50000 !important;
}
#AGENDA #painters #lists .body table tbody tr td.extraSectionManco:hover span, #AGENDA #painters #lists .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #painters #files .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #painters #files .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #sawmill #lists .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #sawmill #lists .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #sawmill #files .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #sawmill #files .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #closers #lists .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #closers #lists .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #closers #files .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #closers #files .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #glass-slat-saw #files .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #glass-slat-saw #files .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #pre-assembly #lists .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #pre-assembly #lists .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #pre-assembly #files .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #pre-assembly #files .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #pre-finishing #lists .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #pre-finishing #lists .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #pre-finishing #files .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #pre-finishing #files .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #expedition #lists .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #expedition #lists .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #expedition #files .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #expedition #files .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.extraSectionMancoExpedition:hover span,
#AGENDA #result-cnc-machine #files .body table tbody tr td.extraSectionManco:hover span,
#AGENDA #result-cnc-machine #files .body table tbody tr td.extraSectionMancoExpedition:hover span {
  color: #FFF;
}
#AGENDA #painters #lists .body table tbody tr td.extraSectionManco span, #AGENDA #painters #lists .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #painters #files .body table tbody tr td.extraSectionManco span,
#AGENDA #painters #files .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #sawmill #lists .body table tbody tr td.extraSectionManco span,
#AGENDA #sawmill #lists .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #sawmill #files .body table tbody tr td.extraSectionManco span,
#AGENDA #sawmill #files .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #closers #lists .body table tbody tr td.extraSectionManco span,
#AGENDA #closers #lists .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #closers #files .body table tbody tr td.extraSectionManco span,
#AGENDA #closers #files .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.extraSectionManco span,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #glass-slat-saw #files .body table tbody tr td.extraSectionManco span,
#AGENDA #glass-slat-saw #files .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #pre-assembly #lists .body table tbody tr td.extraSectionManco span,
#AGENDA #pre-assembly #lists .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #pre-assembly #files .body table tbody tr td.extraSectionManco span,
#AGENDA #pre-assembly #files .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #pre-finishing #lists .body table tbody tr td.extraSectionManco span,
#AGENDA #pre-finishing #lists .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #pre-finishing #files .body table tbody tr td.extraSectionManco span,
#AGENDA #pre-finishing #files .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #expedition #lists .body table tbody tr td.extraSectionManco span,
#AGENDA #expedition #lists .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #expedition #files .body table tbody tr td.extraSectionManco span,
#AGENDA #expedition #files .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.extraSectionManco span,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.extraSectionMancoExpedition span,
#AGENDA #result-cnc-machine #files .body table tbody tr td.extraSectionManco span,
#AGENDA #result-cnc-machine #files .body table tbody tr td.extraSectionMancoExpedition span {
  display: block;
  color: #D50000;
  font-size: 24px;
}
#AGENDA #painters #lists .body table tbody tr td.extraSectionPDF,
#AGENDA #painters #files .body table tbody tr td.extraSectionPDF,
#AGENDA #sawmill #lists .body table tbody tr td.extraSectionPDF,
#AGENDA #sawmill #files .body table tbody tr td.extraSectionPDF,
#AGENDA #closers #lists .body table tbody tr td.extraSectionPDF,
#AGENDA #closers #files .body table tbody tr td.extraSectionPDF,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.extraSectionPDF,
#AGENDA #glass-slat-saw #files .body table tbody tr td.extraSectionPDF,
#AGENDA #pre-assembly #lists .body table tbody tr td.extraSectionPDF,
#AGENDA #pre-assembly #files .body table tbody tr td.extraSectionPDF,
#AGENDA #pre-finishing #lists .body table tbody tr td.extraSectionPDF,
#AGENDA #pre-finishing #files .body table tbody tr td.extraSectionPDF,
#AGENDA #expedition #lists .body table tbody tr td.extraSectionPDF,
#AGENDA #expedition #files .body table tbody tr td.extraSectionPDF,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.extraSectionPDF,
#AGENDA #result-cnc-machine #files .body table tbody tr td.extraSectionPDF {
  cursor: pointer;
  text-align: center;
}
#AGENDA #painters #lists .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #painters #files .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #sawmill #lists .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #sawmill #files .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #closers #lists .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #closers #files .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #glass-slat-saw #files .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #pre-assembly #lists .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #pre-assembly #files .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #pre-finishing #lists .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #pre-finishing #files .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #expedition #lists .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #expedition #files .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.extraSectionPDF:hover,
#AGENDA #result-cnc-machine #files .body table tbody tr td.extraSectionPDF:hover {
  background: #0277BD !important;
}
#AGENDA #painters #lists .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #painters #files .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #sawmill #lists .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #sawmill #files .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #closers #lists .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #closers #files .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #glass-slat-saw #files .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #pre-assembly #lists .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #pre-assembly #files .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #pre-finishing #lists .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #pre-finishing #files .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #expedition #lists .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #expedition #files .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.extraSectionPDF:hover span,
#AGENDA #result-cnc-machine #files .body table tbody tr td.extraSectionPDF:hover span {
  color: #FFF;
}
#AGENDA #painters #lists .body table tbody tr td.extraSectionPDF span,
#AGENDA #painters #files .body table tbody tr td.extraSectionPDF span,
#AGENDA #sawmill #lists .body table tbody tr td.extraSectionPDF span,
#AGENDA #sawmill #files .body table tbody tr td.extraSectionPDF span,
#AGENDA #closers #lists .body table tbody tr td.extraSectionPDF span,
#AGENDA #closers #files .body table tbody tr td.extraSectionPDF span,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.extraSectionPDF span,
#AGENDA #glass-slat-saw #files .body table tbody tr td.extraSectionPDF span,
#AGENDA #pre-assembly #lists .body table tbody tr td.extraSectionPDF span,
#AGENDA #pre-assembly #files .body table tbody tr td.extraSectionPDF span,
#AGENDA #pre-finishing #lists .body table tbody tr td.extraSectionPDF span,
#AGENDA #pre-finishing #files .body table tbody tr td.extraSectionPDF span,
#AGENDA #expedition #lists .body table tbody tr td.extraSectionPDF span,
#AGENDA #expedition #files .body table tbody tr td.extraSectionPDF span,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.extraSectionPDF span,
#AGENDA #result-cnc-machine #files .body table tbody tr td.extraSectionPDF span {
  display: block;
  color: #0277BD;
  font-size: 24px;
}
#AGENDA #painters #lists .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #painters #files .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #sawmill #lists .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #sawmill #files .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #closers #lists .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #closers #files .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #glass-slat-saw #files .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #pre-assembly #lists .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #pre-assembly #files .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #pre-finishing #lists .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #pre-finishing #files .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #expedition #lists .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #expedition #files .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.showRenvooiPopupParent,
#AGENDA #result-cnc-machine #files .body table tbody tr td.showRenvooiPopupParent {
  text-align: center;
  cursor: pointer;
}
#AGENDA #painters #lists .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #painters #files .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #sawmill #lists .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #sawmill #files .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #closers #lists .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #closers #files .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #glass-slat-saw #files .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #pre-assembly #lists .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #pre-assembly #files .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #pre-finishing #lists .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #pre-finishing #files .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #expedition #lists .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #expedition #files .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.showRenvooiPopupParent:hover,
#AGENDA #result-cnc-machine #files .body table tbody tr td.showRenvooiPopupParent:hover {
  background: #D50000 !important;
}
#AGENDA #painters #lists .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #painters #files .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #sawmill #lists .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #sawmill #files .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #closers #lists .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #closers #files .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #glass-slat-saw #files .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #pre-assembly #lists .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #pre-assembly #files .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #pre-finishing #lists .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #pre-finishing #files .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #expedition #lists .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #expedition #files .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.showRenvooiPopupParent:hover span,
#AGENDA #result-cnc-machine #files .body table tbody tr td.showRenvooiPopupParent:hover span {
  color: #FFF;
}
#AGENDA #painters #lists .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #painters #files .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #sawmill #lists .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #sawmill #files .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #closers #lists .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #closers #files .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #glass-slat-saw #lists .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #glass-slat-saw #files .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #pre-assembly #lists .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #pre-assembly #files .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #pre-finishing #lists .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #pre-finishing #files .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #expedition #lists .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #expedition #files .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #result-cnc-machine #lists .body table tbody tr td.showRenvooiPopupParent span,
#AGENDA #result-cnc-machine #files .body table tbody tr td.showRenvooiPopupParent span {
  display: block;
  font-size: 24px;
  color: #D50000;
}
#AGENDA #painters #lists .body table tbody tr td .hoverInfo,
#AGENDA #painters #files .body table tbody tr td .hoverInfo,
#AGENDA #sawmill #lists .body table tbody tr td .hoverInfo,
#AGENDA #sawmill #files .body table tbody tr td .hoverInfo,
#AGENDA #closers #lists .body table tbody tr td .hoverInfo,
#AGENDA #closers #files .body table tbody tr td .hoverInfo,
#AGENDA #glass-slat-saw #lists .body table tbody tr td .hoverInfo,
#AGENDA #glass-slat-saw #files .body table tbody tr td .hoverInfo,
#AGENDA #pre-assembly #lists .body table tbody tr td .hoverInfo,
#AGENDA #pre-assembly #files .body table tbody tr td .hoverInfo,
#AGENDA #pre-finishing #lists .body table tbody tr td .hoverInfo,
#AGENDA #pre-finishing #files .body table tbody tr td .hoverInfo,
#AGENDA #expedition #lists .body table tbody tr td .hoverInfo,
#AGENDA #expedition #files .body table tbody tr td .hoverInfo,
#AGENDA #result-cnc-machine #lists .body table tbody tr td .hoverInfo,
#AGENDA #result-cnc-machine #files .body table tbody tr td .hoverInfo {
  position: absolute;
  z-index: 9999;
  width: 300px;
  height: fit-content;
  background-color: #FFF;
  right: 70px;
  box-shadow: 0 0 4px 0 #9d9d9d;
  padding: 12px;
  top: 0;
  cursor: default !important;
}
#AGENDA #painters #lists .body table tbody tr.checked,
#AGENDA #painters #files .body table tbody tr.checked,
#AGENDA #sawmill #lists .body table tbody tr.checked,
#AGENDA #sawmill #files .body table tbody tr.checked,
#AGENDA #closers #lists .body table tbody tr.checked,
#AGENDA #closers #files .body table tbody tr.checked,
#AGENDA #glass-slat-saw #lists .body table tbody tr.checked,
#AGENDA #glass-slat-saw #files .body table tbody tr.checked,
#AGENDA #pre-assembly #lists .body table tbody tr.checked,
#AGENDA #pre-assembly #files .body table tbody tr.checked,
#AGENDA #pre-finishing #lists .body table tbody tr.checked,
#AGENDA #pre-finishing #files .body table tbody tr.checked,
#AGENDA #expedition #lists .body table tbody tr.checked,
#AGENDA #expedition #files .body table tbody tr.checked,
#AGENDA #result-cnc-machine #lists .body table tbody tr.checked,
#AGENDA #result-cnc-machine #files .body table tbody tr.checked {
  background-color: rgb(221.1518987342, 250.6481012658, 229.3721518987);
}
#AGENDA #painters #lists .body table tbody tr.isManco,
#AGENDA #painters #files .body table tbody tr.isManco,
#AGENDA #sawmill #lists .body table tbody tr.isManco,
#AGENDA #sawmill #files .body table tbody tr.isManco,
#AGENDA #closers #lists .body table tbody tr.isManco,
#AGENDA #closers #files .body table tbody tr.isManco,
#AGENDA #glass-slat-saw #lists .body table tbody tr.isManco,
#AGENDA #glass-slat-saw #files .body table tbody tr.isManco,
#AGENDA #pre-assembly #lists .body table tbody tr.isManco,
#AGENDA #pre-assembly #files .body table tbody tr.isManco,
#AGENDA #pre-finishing #lists .body table tbody tr.isManco,
#AGENDA #pre-finishing #files .body table tbody tr.isManco,
#AGENDA #expedition #lists .body table tbody tr.isManco,
#AGENDA #expedition #files .body table tbody tr.isManco,
#AGENDA #result-cnc-machine #lists .body table tbody tr.isManco,
#AGENDA #result-cnc-machine #files .body table tbody tr.isManco {
  background-color: rgb(255, 175.5874015748, 168.8);
}
#AGENDA #painters #lists .body table tbody tr:nth-child(even).checked,
#AGENDA #painters #files .body table tbody tr:nth-child(even).checked,
#AGENDA #sawmill #lists .body table tbody tr:nth-child(even).checked,
#AGENDA #sawmill #files .body table tbody tr:nth-child(even).checked,
#AGENDA #closers #lists .body table tbody tr:nth-child(even).checked,
#AGENDA #closers #files .body table tbody tr:nth-child(even).checked,
#AGENDA #glass-slat-saw #lists .body table tbody tr:nth-child(even).checked,
#AGENDA #glass-slat-saw #files .body table tbody tr:nth-child(even).checked,
#AGENDA #pre-assembly #lists .body table tbody tr:nth-child(even).checked,
#AGENDA #pre-assembly #files .body table tbody tr:nth-child(even).checked,
#AGENDA #pre-finishing #lists .body table tbody tr:nth-child(even).checked,
#AGENDA #pre-finishing #files .body table tbody tr:nth-child(even).checked,
#AGENDA #expedition #lists .body table tbody tr:nth-child(even).checked,
#AGENDA #expedition #files .body table tbody tr:nth-child(even).checked,
#AGENDA #result-cnc-machine #lists .body table tbody tr:nth-child(even).checked,
#AGENDA #result-cnc-machine #files .body table tbody tr:nth-child(even).checked {
  background-color: rgb(189.5189873418, 246.5810126582, 205.4215189873);
}
#AGENDA #painters #lists .body table tbody tr:nth-child(even).isManco,
#AGENDA #painters #files .body table tbody tr:nth-child(even).isManco,
#AGENDA #sawmill #lists .body table tbody tr:nth-child(even).isManco,
#AGENDA #sawmill #files .body table tbody tr:nth-child(even).isManco,
#AGENDA #closers #lists .body table tbody tr:nth-child(even).isManco,
#AGENDA #closers #files .body table tbody tr:nth-child(even).isManco,
#AGENDA #glass-slat-saw #lists .body table tbody tr:nth-child(even).isManco,
#AGENDA #glass-slat-saw #files .body table tbody tr:nth-child(even).isManco,
#AGENDA #pre-assembly #lists .body table tbody tr:nth-child(even).isManco,
#AGENDA #pre-assembly #files .body table tbody tr:nth-child(even).isManco,
#AGENDA #pre-finishing #lists .body table tbody tr:nth-child(even).isManco,
#AGENDA #pre-finishing #files .body table tbody tr:nth-child(even).isManco,
#AGENDA #expedition #lists .body table tbody tr:nth-child(even).isManco,
#AGENDA #expedition #files .body table tbody tr:nth-child(even).isManco,
#AGENDA #result-cnc-machine #lists .body table tbody tr:nth-child(even).isManco,
#AGENDA #result-cnc-machine #files .body table tbody tr:nth-child(even).isManco {
  background-color: rgb(255, 142.6984251969, 133.1);
}
#AGENDA #expedition #lists .header h1 {
  width: 100%;
  text-align: center;
}
#AGENDA #expedition #lists .badge {
  background: #ecb80e;
  outline: 2px solid #000;
  padding: 0 6px;
  border-radius: 2px;
  color: #000;
  font-weight: bold;
  margin-left: 6px;
}

.toggleMancoAssembly,
.toggleAssemblyMancoUpload {
  width: 100%;
  color: #FFF;
  background-color: #03a9f4;
  padding: 8px 12px;
  cursor: pointer;
}
.toggleMancoAssembly:hover,
.toggleAssemblyMancoUpload:hover {
  background-color: rgb(70.7651821862, 196.1052631579, 252.7348178138);
}

.mancoAssemblyDiv {
  background-color: #f7fcff;
  padding: 0 24px;
}

#assemblyManco {
  padding: 48px;
  box-shadow: 0 0 4px 0 #e1e1e1;
}
#assemblyManco input {
  background-color: transparent !important;
}
#assemblyManco input:focus, #assemblyManco input:focus-visible {
  border: none !important;
  border-bottom: 1px solid #16508a !important;
  outline: none;
  background-color: transparent !important;
}
@media screen and (max-width: 1200px) {
  #assemblyManco #header > .row {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media screen and (max-width: 992px) {
  #assemblyManco #header > .row .col-4 {
    width: 100%;
  }
}
#assemblyManco #header #left .row {
  align-items: center;
}
#assemblyManco #header #left h1 {
  font-size: 66px;
  color: #2961b2;
  font-weight: bold;
  margin: auto;
  height: fit-content;
}
@media screen and (max-width: 1400px) {
  #assemblyManco #header #left h1 {
    font-size: 45px;
  }
}
@media screen and (max-width: 768px) {
  #assemblyManco #header #left h1 {
    font-size: 28px;
  }
}
#assemblyManco #header #left img {
  width: 100%;
  object-fit: contain;
}
#assemblyManco #header #right h2 {
  font-size: 42px;
  color: #bfb2d8;
  font-weight: bold;
  margin: auto;
  height: fit-content;
}
@media screen and (max-width: 768px) {
  #assemblyManco #header #right h2 {
    font-size: 24px;
  }
}
#assemblyManco #header #right b,
#assemblyManco #header #right p {
  color: #16508a;
}
#assemblyManco #header #right .divider {
  border-right: 2px solid #16508a;
}
#assemblyManco #fotos {
  padding: 24px 0;
}
@media screen and (max-width: 1650px) {
  #assemblyManco #fotos .row div[class^=col-] {
    width: 50%;
  }
}
@media screen and (max-width: 1200px) {
  #assemblyManco #fotos .row div[class^=col-] {
    width: 100%;
  }
}
#assemblyManco #fotos h2 {
  background-color: #16508a;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  color: #FFF;
  padding-left: 36px;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
}
#assemblyManco #fotos h2:after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background-color: #FFF;
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
}
#assemblyManco #fotos .yesNoBlock {
  padding: 12px;
  padding-right: 0;
  width: 100%;
}
#assemblyManco #fotos .yesNoBlock .d-flex {
  padding-bottom: 2px;
  border-bottom: 1px solid #16508a;
  padding-right: 36px;
}
#assemblyManco #customer {
  padding: 24px 0;
}
#assemblyManco #customer h2 {
  font-size: 30px;
  color: #16508a;
}
#assemblyManco #customer label,
#assemblyManco #customer input {
  border-bottom: 1px solid #16508a;
}
#assemblyManco #customer label {
  min-width: 150px;
  color: #2961b2;
  font-weight: bold;
}
#assemblyManco #customer input {
  width: 100%;
}
@media screen and (max-width: 768px) {
  #assemblyManco #customer div[class^=col-] {
    width: 100%;
  }
}
#assemblyManco #brands {
  padding: 24px 0;
}
#assemblyManco #brands h2 {
  background-color: #16508a;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  color: #FFF;
  padding-left: 36px;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
}
#assemblyManco #brands h2:after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background-color: #FFF;
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
}
#assemblyManco #brands .repeatable p {
  color: #16508a;
}
#assemblyManco #brands .repeatable .border-light {
  border-bottom: 1px solid #16508a;
}
#assemblyManco #brands .repeatable .border-one,
#assemblyManco #brands .repeatable .border-two {
  border-bottom: 2px solid #2961b2;
}
@media screen and (max-width: 768px) {
  #assemblyManco #brands .repeatable div[class^=col-] .text-right {
    text-align: left;
  }
}
@media screen and (max-width: 1400px) {
  #assemblyManco #brands .repeatable .col-10 {
    width: 70%;
  }
}
@media screen and (max-width: 992px) {
  #assemblyManco #brands .repeatable .col-10 {
    width: 60%;
  }
}
@media screen and (max-width: 768px) {
  #assemblyManco #brands .repeatable .col-10 {
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #assemblyManco #brands .repeatable .col-2 {
    width: 30%;
  }
}
@media screen and (max-width: 992px) {
  #assemblyManco #brands .repeatable .col-2 {
    width: 40%;
  }
}
@media screen and (max-width: 768px) {
  #assemblyManco #brands .repeatable .col-2 {
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #assemblyManco #brands .repeatable .col-1 {
    width: 15%;
  }
}
@media screen and (max-width: 992px) {
  #assemblyManco #brands .repeatable .col-1 {
    width: 20%;
  }
}
@media screen and (max-width: 768px) {
  #assemblyManco #brands .repeatable .col-1 {
    width: 100%;
  }
}
#assemblyManco #notes {
  padding: 24px 0;
}
#assemblyManco #notes h2 {
  background-color: #16508a;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  color: #FFF;
  padding-left: 36px;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 24px;
}
#assemblyManco #notes h2:after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background-color: #FFF;
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
}
#assemblyManco #signatures {
  padding: 24px 0;
}
@media screen and (max-width: 1200px) {
  #assemblyManco #signatures .row > .col-6 {
    width: 100%;
  }
  #assemblyManco #signatures .row > .col-6 .row .col-6 {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  #assemblyManco #signatures .row > .col-6 .row .col-6 {
    width: 100%;
  }
}
#assemblyManco #signatures h2 {
  background-color: #16508a;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  color: #FFF;
  padding-left: 36px;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 24px;
}
#assemblyManco #signatures h2:after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background-color: #FFF;
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
}
#assemblyManco #signatures h3 {
  color: #16508a;
  font-size: 20px;
}
#assemblyManco #signatures .group {
  padding: 12px;
  background-color: #f4fdfe;
}
#assemblyManco #signatures .group label {
  color: #16508a;
}
#assemblyManco #footer {
  padding: 24px 0;
}
@media screen and (max-width: 1200px) {
  #assemblyManco #footer .col-12 > div {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1200px) {
  #assemblyManco #footer .col-12 > div p {
    width: 100%;
  }
}
@media screen and (max-width: 1200px) {
  #assemblyManco #footer .col-12 > div > div {
    width: calc(33.333333% - 12px);
  }
}
@media screen and (max-width: 768px) {
  #assemblyManco #footer .col-12 > div > div {
    width: calc(50% - 12px);
  }
}
@media screen and (max-width: 576px) {
  #assemblyManco #footer .col-12 > div > div {
    width: 100%;
  }
}
#assemblyManco #footer h2 {
  background-color: #16508a;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  color: #FFF;
  padding-left: 36px;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 0px;
}
#assemblyManco #footer h2:after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background-color: #FFF;
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
}
#assemblyManco #footer p,
#assemblyManco #footer label {
  color: #16508a;
  font-weight: bold;
}
#assemblyManco #footer input {
  border-bottom: 1px solid #16508a;
}
#assemblyManco #footer .d-flex label {
  min-width: 70px;
}

.or {
  position: relative;
  padding: 24px 0px;
}
.or hr {
  width: 100%;
  height: fit-content;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.or p {
  content: "OF";
  background-color: #FFF;
  color: #000;
  font-weight: bold;
  color: #c1c1c1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 50px;
  height: fit-content;
  text-align: center;
}

.assemblyMancoUploadDiv .assemblyMancoImageUploadLabel {
  background-color: #8eb2b5;
  display: block;
  border-radius: 4px;
  position: relative;
  width: 100%;
  height: 300px;
  cursor: pointer;
}
.assemblyMancoUploadDiv .assemblyMancoImageUploadLabel .material-symbols-outlined {
  color: #FFF;
  display: block;
  width: fit-content;
  height: fit-content;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  font-size: 100px;
}
.assemblyMancoUploadDiv .assemblyMancoImageUpload {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.assemblyMancoUploadDiv .assemblyMancoImageUploadPreview {
  cursor: pointer;
}
.assemblyMancoUploadDiv .assemblyMancoImageUploadPreview img {
  width: 100%;
  height: 750px;
  object-fit: contain;
}

#renvooi {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-color: rgba(78, 78, 78, 0.8);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 999999;
}
#renvooi #addRenvooi,
#renvooi #showRenvooi {
  position: absolute;
  width: 80vw;
  height: 40vh;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
#renvooi #addRenvooi .card .closeRenvooi,
#renvooi #showRenvooi .card .closeRenvooi {
  width: fit-content;
  height: fit-content;
  position: absolute;
  color: #D50000;
  right: 12px;
  top: 12px;
  font-size: 42px;
  font-weight: bold;
}
#renvooi #addRenvooi .card #add-renvooi-text,
#renvooi #showRenvooi .card #add-renvooi-text {
  margin-top: 3em;
}
#renvooi #addRenvooi .card #display-renvooi-text,
#renvooi #showRenvooi .card #display-renvooi-text {
  margin-top: 3em;
}

#FORMSPOPUP {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-color: rgba(78, 78, 78, 0.8);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 999999;
}
#FORMSPOPUP .background {
  width: 90vw;
  height: 90lvh;
  height: 90vh;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 999999;
}
#FORMSPOPUP .background .form {
  height: 100%;
}
#FORMSPOPUP .background .card {
  height: 100%;
  box-shadow: 0px 0px 4px 0px #e1e1e1;
  overflow: auto;
}
#FORMSPOPUP .background .FORMSPOPUP-HEADER span {
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 50px;
  font-weight: bold;
  color: #353434;
}
#FORMSPOPUP .background .FORMSPOPUP-HEADER span:hover {
  box-shadow: 0 0 4px 0 #e1e1e1;
  border-radius: 50%;
  background: #D50000;
}

#FORMSPOPUP #sawMillForm .card {
  padding: 3em;
}
@media screen and (max-width: 480px) {
  #FORMSPOPUP #sawMillForm .card .row .col-6 {
    flex: 100%;
    width: 100%;
  }
  #FORMSPOPUP #sawMillForm .card .row .col-6 .hidden-heading {
    display: none;
  }
}
@media screen and (max-width: 992px) {
  #FORMSPOPUP #sawMillForm .card .row .col-6 .d-flex {
    flex-wrap: wrap;
  }
}
#FORMSPOPUP #sawMillForm .card input:focus-visible, #FORMSPOPUP #sawMillForm .card input:focus {
  border: none;
  outline: none;
  border-bottom: 1px dashed #777777;
}
#FORMSPOPUP #sawMillForm .card p,
#FORMSPOPUP #sawMillForm .card label {
  min-width: 200px;
}

#ExpeditionMancoPopup {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-color: rgba(78, 78, 78, 0.8);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 999999;
}
#ExpeditionMancoPopup .background {
  width: 90vw;
  height: 90lvh;
  height: 90vh;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 999999;
}
#ExpeditionMancoPopup .background .form {
  height: 100%;
}
#ExpeditionMancoPopup .background .card {
  height: 100%;
  box-shadow: 0px 0px 4px 0px #e1e1e1;
  overflow: auto;
}
#ExpeditionMancoPopup .background .card .header {
  background-color: #FFF !important;
  color: #000 !important;
}
#ExpeditionMancoPopup .background .card .header h1 {
  width: 100% !important;
  text-align: left !important;
}

#FORMSPOPUP #paintersForm .card {
  padding: 3em;
}
#FORMSPOPUP #paintersForm .card input:focus-visible, #FORMSPOPUP #paintersForm .card input:focus {
  border: none;
  outline: none;
  border-bottom: 1px dashed #777777;
}
#FORMSPOPUP #paintersForm .card #paintersForm-header h1 {
  font-size: 45px;
  font-weight: 900;
  margin: 0;
}
#FORMSPOPUP #paintersForm .card #paintersForm-data p {
  min-width: 125px;
}
#FORMSPOPUP #paintersForm .card #paintersForm-data input {
  width: 100%;
}
#FORMSPOPUP #paintersForm .card #paintersForm-specifications p {
  min-width: 330px;
}
#FORMSPOPUP #paintersForm .card #paintersForm-specifications input {
  width: 100%;
}
#FORMSPOPUP #paintersForm .card #paintersForm-process-conditions p {
  min-width: 230px;
  margin-bottom: 2em;
}
#FORMSPOPUP #paintersForm .card #paintersForm-process-conditions input {
  width: 100%;
  margin-bottom: 2em;
}
@media screen and (max-width: 992px) {
  #FORMSPOPUP #paintersForm .card #paintersForm-process-conditions .col-6 {
    flex: 100%;
    width: 100%;
  }
}
#FORMSPOPUP #paintersForm .card #paintersForm-process-conditions-table .table thead th,
#FORMSPOPUP #paintersForm .card #paintersForm-process-conditions-table .table thead td,
#FORMSPOPUP #paintersForm .card #paintersForm-process-conditions-table .table tbody th,
#FORMSPOPUP #paintersForm .card #paintersForm-process-conditions-table .table tbody td {
  border: 1px solid #e1e1e1;
  min-width: 50px;
  text-align: center;
}
#FORMSPOPUP #paintersForm .card #paintersForm-process-conditions-table .table thead th input,
#FORMSPOPUP #paintersForm .card #paintersForm-process-conditions-table .table thead td input,
#FORMSPOPUP #paintersForm .card #paintersForm-process-conditions-table .table tbody th input,
#FORMSPOPUP #paintersForm .card #paintersForm-process-conditions-table .table tbody td input {
  margin: 0;
}
#FORMSPOPUP #paintersForm .card #paintersForm-review p,
#FORMSPOPUP #paintersForm .card #paintersForm-review label {
  min-width: 230px;
  margin-bottom: 2em;
}
#FORMSPOPUP #paintersForm .card #paintersForm-review input[type=text] {
  width: 100%;
}
#FORMSPOPUP #paintersForm .card #paintersForm-review input {
  margin-bottom: 2em;
}
#FORMSPOPUP #paintersForm .card #paintersForm-note p {
  margin-bottom: 1em;
}
#FORMSPOPUP #paintersForm .card #paintersForm-note textarea {
  width: 100%;
  padding: 12px;
}
@media screen and (max-width: 1200px) {
  #FORMSPOPUP #paintersForm .card #paintersForm-conclusion {
    flex-direction: column;
  }
}
#FORMSPOPUP #paintersForm .card #paintersForm-conclusion .yesNoRow {
  gap: 12em;
  margin-top: 1em;
}
#FORMSPOPUP #paintersForm .card #paintersForm-conclusion .yesNoRow input[type=checkbox] {
  height: 30px;
  width: 30px;
}
#FORMSPOPUP #paintersForm .card #paintersForm-conclusion .yesNoRow label {
  font-size: 24px;
}
#FORMSPOPUP #paintersForm .card #paintersForm-conclusion #painterSign {
  width: 500px;
}
#FORMSPOPUP #paintersForm .card #paintersForm-data,
#FORMSPOPUP #paintersForm .card #paintersForm-specifications,
#FORMSPOPUP #paintersForm .card #paintersForm-process-conditions,
#FORMSPOPUP #paintersForm .card #paintersForm-process-conditions-table,
#FORMSPOPUP #paintersForm .card #paintersForm-layers,
#FORMSPOPUP #paintersForm .card #paintersForm-skh,
#FORMSPOPUP #paintersForm .card #paintersForm-review,
#FORMSPOPUP #paintersForm .card #paintersForm-note,
#FORMSPOPUP #paintersForm .card #paintersForm-conclusion {
  margin-top: 2em;
}
@media screen and (max-width: 992px) {
  #FORMSPOPUP #paintersForm .card #paintersForm-skh,
  #FORMSPOPUP #paintersForm .card #paintersForm-layers {
    font-size: 18px;
  }
  #FORMSPOPUP #paintersForm .card #paintersForm-skh .col-6 > div,
  #FORMSPOPUP #paintersForm .card #paintersForm-skh .col-12 > div,
  #FORMSPOPUP #paintersForm .card #paintersForm-layers .col-6 > div,
  #FORMSPOPUP #paintersForm .card #paintersForm-layers .col-12 > div {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  #FORMSPOPUP #paintersForm .card #paintersForm-skh .col-6 > div > div,
  #FORMSPOPUP #paintersForm .card #paintersForm-skh .col-12 > div > div,
  #FORMSPOPUP #paintersForm .card #paintersForm-layers .col-6 > div > div,
  #FORMSPOPUP #paintersForm .card #paintersForm-layers .col-12 > div > div {
    flex: 33.333333%;
    width: 33.333333%;
  }
}

#FORMSPOPUP #glassSlatSawForm .card {
  padding: 3em;
}
#FORMSPOPUP #glassSlatSawForm .card h2 {
  font-size: 20px;
}
#FORMSPOPUP #glassSlatSawForm .card input:focus-visible, #FORMSPOPUP #glassSlatSawForm .card input:focus {
  border: none;
  outline: none;
  border-bottom: 1px dashed #777777;
}
#FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-header h1 {
  font-size: 45px;
  font-weight: 900;
  margin: 0;
}
@media screen and (max-width: 768px) {
  #FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-data .col-6 {
    flex: 100%;
    width: 100%;
  }
}
#FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-data p,
#FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-data label,
#FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-kwaliteit p,
#FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-kwaliteit label {
  min-width: 125px;
}
#FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-data input[type=text],
#FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-kwaliteit input[type=text] {
  width: 100%;
}
#FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-signature {
  width: fit-content;
  margin: 0 0 0 auto;
  display: block;
}
#FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-signature .col-12 {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-signature .col-12 #controleSign {
  width: 500px;
  height: 200px;
}
#FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-keuring .yesNoRow {
  gap: 12em;
  margin-top: 1em;
  margin-bottom: 1em;
}
#FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-keuring .yesNoRow input[type=checkbox] {
  height: 30px;
  width: 30px;
}
@media screen and (max-width: 768px) {
  #FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-keuring .yesNoRow input[type=checkbox] {
    height: 18px;
    width: 18px;
  }
}
#FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-keuring .yesNoRow label {
  font-size: 24px;
}
@media screen and (max-width: 768px) {
  #FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-keuring .yesNoRow label {
    font-size: 18px;
  }
}
#FORMSPOPUP #glassSlatSawForm .card #glassSlatSawForm-keuring p {
  color: #777777;
  font-style: italic;
}

#FORMSPOPUP #externalGlassPlacersForm .card {
  padding: 3em;
}
#FORMSPOPUP #externalGlassPlacersForm .card h2 {
  font-size: 20px;
}
#FORMSPOPUP #externalGlassPlacersForm .card input:focus-visible, #FORMSPOPUP #externalGlassPlacersForm .card input:focus {
  border: none;
  outline: none;
  border-bottom: 1px dashed #777777;
}
#FORMSPOPUP #externalGlassPlacersForm .card #externalGlassPlacersForm-header h1 {
  font-size: 45px;
  font-weight: 900;
  margin: 0;
}
#FORMSPOPUP #externalGlassPlacersForm .card #externalGlassPlacersForm-data p,
#FORMSPOPUP #externalGlassPlacersForm .card #externalGlassPlacersForm-data label {
  min-width: 200px;
}
#FORMSPOPUP #externalGlassPlacersForm .card #externalGlassPlacersForm-data input[type=text] {
  width: 100%;
}
#FORMSPOPUP #externalGlassPlacersForm .card #externalGlassPlacersForm-signature {
  width: fit-content;
  margin: 0 0 0 auto;
  display: block;
}
#FORMSPOPUP #externalGlassPlacersForm .card #externalGlassPlacersForm-signature .col-12 {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#FORMSPOPUP #externalGlassPlacersForm .card #externalGlassPlacersForm-signature .col-12 #controlExternalGlassSign {
  width: 500px;
  height: 200px;
}

#FORMSPOPUP #endCheckForm .card {
  padding: 3em;
}
#FORMSPOPUP #endCheckForm .card input:focus-visible, #FORMSPOPUP #endCheckForm .card input:focus {
  border: none;
  outline: none;
  border-bottom: 1px dashed #777777;
}
#FORMSPOPUP #endCheckForm .card input:hover {
  cursor: pointer;
}
#FORMSPOPUP #endCheckForm .card #endCheckForm-data label {
  min-width: 200px;
}
#FORMSPOPUP #endCheckForm .card #endCheckForm-afmontage h1 {
  margin: 0 0 0 auto;
  display: block;
  width: fit-content;
}
#FORMSPOPUP #endCheckForm .card #endCheckForm-afmontage #LAGENDA {
  margin: 10px 0 0 auto;
  display: block;
  width: fit-content;
}
#FORMSPOPUP #endCheckForm .card #endCheckForm-signature {
  width: fit-content;
  margin: 0 0 0 auto;
  display: block;
}
#FORMSPOPUP #endCheckForm .card #endCheckForm-signature .col-12 {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#FORMSPOPUP #endCheckForm .card #endCheckForm-signature .col-12 #endCheckControlSign {
  width: 500px;
  height: 200px;
}
#FORMSPOPUP #endCheckForm .card table thead th:nth-child(3), #FORMSPOPUP #endCheckForm .card table thead th:nth-child(4), #FORMSPOPUP #endCheckForm .card table thead th:nth-child(5), #FORMSPOPUP #endCheckForm .card table thead th:nth-child(6) {
  text-align: center;
  width: 50px;
  max-width: 50px;
  min-width: 50px;
}
#FORMSPOPUP #endCheckForm .card table tbody th {
  border: 1px solid #e1e1e1;
}
#FORMSPOPUP #endCheckForm .card table tbody td:first-child {
  width: 100px;
  max-width: 100px;
  min-width: 100px;
}
#FORMSPOPUP #endCheckForm .card table tbody td:nth-child(2) {
  width: 100%;
}
#FORMSPOPUP #endCheckForm .card table tbody td:nth-child(3), #FORMSPOPUP #endCheckForm .card table tbody td:nth-child(4), #FORMSPOPUP #endCheckForm .card table tbody td:nth-child(5), #FORMSPOPUP #endCheckForm .card table tbody td:nth-child(6) {
  text-align: center;
  width: 70px;
  max-width: 70px;
  min-width: 70px;
}
#FORMSPOPUP #endCheckForm .card table tbody td:nth-child(3) input, #FORMSPOPUP #endCheckForm .card table tbody td:nth-child(4) input, #FORMSPOPUP #endCheckForm .card table tbody td:nth-child(5) input, #FORMSPOPUP #endCheckForm .card table tbody td:nth-child(6) input {
  margin: 0;
  width: 25px;
  height: 25px;
}

.PopupFormTable-radio-inputs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.5rem;
  background-color: #eee;
  box-sizing: border-box;
  box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.06);
  padding: 0.25rem;
  width: 100%;
  font-size: 18px;
  margin: auto;
}
.PopupFormTable-radio-inputs .radio {
  flex: 1 1 auto;
  text-align: center;
}
.PopupFormTable-radio-inputs .radio input {
  display: none;
}
.PopupFormTable-radio-inputs .radio input:checked + .name {
  background-color: #fff;
  font-weight: 600;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  animation: select 0.3s ease;
}
.PopupFormTable-radio-inputs .radio input:checked + .name::before {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}
.PopupFormTable-radio-inputs .radio input:checked + .name::after {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  --direction: 10px;
}
.PopupFormTable-radio-inputs .radio input:checked + .name.name-plus {
  background-color: #008000;
  color: #FFF;
}
.PopupFormTable-radio-inputs .radio input:checked + .name.name-minus {
  background-color: #ff1100;
  color: #FFF;
}
.PopupFormTable-radio-inputs .radio input:checked + .name.name-N {
  background-color: #8b8b8b;
  color: #FFF;
}
.PopupFormTable-radio-inputs .radio .name {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: none;
  padding: 0.5rem 0;
  color: rgb(51, 65, 85);
  transition: all 0.15s ease-in-out;
  min-width: 30px;
}
.PopupFormTable-radio-inputs .radio:hover .name {
  background-color: rgba(255, 255, 255, 0.5);
}

@keyframes particles {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(var(--direction));
  }
}
select .PopupFormTable-radio-inputs .radio input:checked + .name::before,
select .PopupFormTable-radio-inputs .radio input:checked + .name::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #3b82f6;
  opacity: 0;
  animation: particles 0.5s ease forwards;
}

.PopupFormTable-radio-inputs .radio input:checked + .name::before {
  --direction: -10px;
}

.table-signature {
  height: 200px;
  width: 600px;
  margin: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

#improvementTable .improvementRow .improvementCell {
  border: none;
  border-bottom: 1px solid #e1e1e1;
  width: 100%;
  height: 32px;
  font-size: 20px;
}
#improvementTable .improvementRow .improvementCell:focus-visible, #improvementTable .improvementRow .improvementCell:focus {
  border: none;
  outline: none;
  border-bottom: 1px dashed #777777;
}

#Productieweek,
#productieJaar {
  border: none;
  border-bottom: 1px solid #e1e1e1;
  height: 32px;
  font-size: 20px;
}

#ORDERS .row-user,
#AGENDA .row-user {
  background-color: #e1e1e1;
  border-radius: 5px;
  padding: 3px 10px;
  color: #000;
}
#ORDERS .orderTimeToCompleteParent span,
#AGENDA .orderTimeToCompleteParent span {
  width: 140px;
}
#ORDERS .orderTimeToCompleteParent input,
#AGENDA .orderTimeToCompleteParent input {
  width: 50px;
  padding: 1px !important;
  min-height: 29px !important;
}
#ORDERS .form-container,
#AGENDA .form-container {
  position: relative;
  border-bottom: 0px solid #d1d1d1;
  background-color: #f8fcff;
  margin: 0;
  padding: 12px;
  padding-bottom: 48px;
}
#ORDERS .form-container label,
#AGENDA .form-container label {
  color: #797979;
  line-height: 35px;
  margin: 3px 0;
  display: block;
}
#ORDERS .form-container .inmeet-radio input[type=radio],
#AGENDA .form-container .inmeet-radio input[type=radio] {
  display: none;
}
#ORDERS .form-container .inmeet-radio input[type=radio]:checked + label,
#AGENDA .form-container .inmeet-radio input[type=radio]:checked + label {
  background: #03a9f4;
  border: 1px solid #03a9f4;
  color: #fff;
}
#ORDERS .form-container .inmeet-radio label,
#AGENDA .form-container .inmeet-radio label {
  line-height: 33px;
  padding: 0 12px;
  border: 1px solid #eee;
  border-radius: 0px;
  width: auto;
  margin: 3px 0;
  box-sizing: border-box;
  display: inline-block;
  min-width: 75px;
  text-align: center;
  cursor: pointer;
}
#ORDERS .form-container .inmeetOpmerking,
#AGENDA .form-container .inmeetOpmerking {
  border: 1px solid #e7e7e7;
  padding: 5px;
  border-radius: 5px;
}
#ORDERS .form-container button#saveMeasures,
#AGENDA .form-container button#saveMeasures {
  position: absolute;
  right: 14px;
  bottom: 10px;
}

@media screen and (max-width: 1200px) {
  #AGENDA .inmeet-container .form-container table tbody tr td {
    width: 50%;
  }
}
@media screen and (max-width: 1400px) {
  #AGENDA .card .border-bottom .row > .col-3 {
    width: 50%;
  }
}
@media screen and (max-width: 1400px) {
  #AGENDA .card .border-bottom .row .row {
    flex-wrap: nowrap;
    gap: 0.5em;
  }
}
@media screen and (max-width: 576px) {
  #AGENDA .card .offerte-flow .agenda-inmeet-wrapper-header .d-flex.justify-between {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 576px) {
  #AGENDA .card .offerte-flow .agenda-inmeet-wrapper .order-container {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 576px) {
  #AGENDA .card .offerte-flow .agenda-inmeet-wrapper .order-container h5 {
    width: 50%;
  }
}
@media screen and (max-width: 576px) {
  #AGENDA .card .offerte-flow .agenda-inmeet-wrapper .order-container .container {
    width: 50%;
  }
}
@media screen and (max-width: 1400px) {
  #AGENDA .card .inmeet-wrapper .order-container {
    display: flex;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1400px) {
  #AGENDA .card .inmeet-wrapper .order-container .transportImageUploads,
  #AGENDA .card .inmeet-wrapper .order-container .container,
  #AGENDA .card .inmeet-wrapper .order-container .d-flex.flex-column.g-3 {
    width: 25%;
  }
}
@media screen and (max-width: 768px) {
  #AGENDA .card .inmeet-wrapper .order-container .transportImageUploads,
  #AGENDA .card .inmeet-wrapper .order-container .container,
  #AGENDA .card .inmeet-wrapper .order-container .d-flex.flex-column.g-3 {
    width: 33%;
  }
}
@media screen and (max-width: 576px) {
  #AGENDA .card .inmeet-wrapper .order-container .transportImageUploads,
  #AGENDA .card .inmeet-wrapper .order-container .container,
  #AGENDA .card .inmeet-wrapper .order-container .d-flex.flex-column.g-3 {
    width: 50%;
  }
}
@media screen and (max-width: 1400px) {
  #AGENDA .card .col-5 {
    width: 50%;
  }
}
@media screen and (max-width: 1400px) {
  #AGENDA .card .col-5 .canvas {
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #AGENDA .card .col-5 .canvas canvas,
  #AGENDA .card .col-5 .canvas img {
    width: 100%;
    height: 200px;
  }
}
@media screen and (max-width: 1400px) {
  #AGENDA .card .col-2 textarea {
    width: 100%;
  }
}
#AGENDA #QUICKOVERVIEW .border-bottom {
  margin-bottom: 1em;
}
#AGENDA #QUICKOVERVIEW .row .col-3 {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}

#userdetails .radio-input input {
  display: none;
}
#userdetails .radio-input {
  --container_width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 9999px;
  background-color: #fff;
  color: #000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
}
#userdetails .radio-input label {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 14px;
}
#userdetails .radio-input label:has(input:checked) {
  color: #fff;
}
#userdetails .radio-input label:has(input:checked) ~ .radio-input-selection {
  background-color: #03a9f4;
  display: inline-block;
}
#userdetails .radio-input label:nth-child(1):has(input:checked) ~ .radio-input-selection {
  transform: translateX(0%);
}
#userdetails .radio-input label:nth-child(2):has(input:checked) ~ .radio-input-selection {
  transform: translateX(100%);
}
#userdetails .radio-input label:nth-child(3):has(input:checked) ~ .radio-input-selection {
  transform: translateX(200%);
}
#userdetails .radio-input label:nth-child(4):has(input:checked) ~ .radio-input-selection {
  transform: translateX(300%);
}
#userdetails .radio-input label:nth-child(5):has(input:checked) ~ .radio-input-selection {
  transform: translateX(400%);
}
#userdetails .radio-input label:nth-child(6):has(input:checked) ~ .radio-input-selection {
  transform: translateX(500%);
}
#userdetails .radio-input label:nth-child(7):has(input:checked) ~ .radio-input-selection {
  transform: translateX(600%);
}
#userdetails .radio-input label:nth-child(8):has(input:checked) ~ .radio-input-selection {
  transform: translateX(700%);
}
#userdetails .radio-input label:nth-child(9):has(input:checked) ~ .radio-input-selection {
  transform: translateX(800%);
}
#userdetails .radio-input label:nth-child(10):has(input:checked) ~ .radio-input-selection {
  transform: translateX(900%);
}
#userdetails .radio-input-selection {
  display: none;
  position: absolute;
  height: 105%;
  width: calc(var(--container_width) / 2);
  z-index: 0;
  left: 0;
  top: -1px;
  transition: 0.15s ease;
}

#USERS > .col-6 {
  width: 100%;
}

@media screen and (max-width: 1400px) {
  #verloflijst .row.align-center {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  #verloflijst .row.align-center > div {
    width: 33%;
    font-size: 13px;
  }
  #verloflijst .row.align-center > [class^=col-] {
    padding: 0 24px;
  }
  #verloflijst .row.align-center:nth-child(even) {
    background-color: #f1f1f1;
  }
}

#usersMatrix {
  overflow: auto;
}

#webshopIds div[class*=col-] {
  padding: 6px 6px;
}
#webshopIds .webshopIdItem .webshop {
  background-color: #03a9f4;
  color: #FFF;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
}
#webshopIds .webshopIdItem .webshopID {
  background-color: #fff;
  font-weight: bold;
  text-align: center;
  min-width: fit-content;
}
#webshopIds .webshopIdItem .DJKfile {
  background-color: #ffbf3e;
  padding: 0;
  font-style: italic;
  color: #000;
  font-weight: bold;
}

#customerAddress {
  margin-bottom: 3em;
}
#customerAddress #customerAddressTabs {
  flex-wrap: nowrap;
}
#customerAddress #customerAddressTabs .customerAddressTab {
  background-color: #FFF;
  width: 100%;
  text-align: center;
  padding: 12px;
  text-transform: capitalize;
  font-weight: bold;
  box-shadow: 3px -3px 4px 0 #e1e1e1;
  border-bottom: 1px solid #e9e9e9;
}
#customerAddress #customerAddressTabs .customerAddressTab.active {
  background-color: #03a9f4;
  color: #FFF;
}
#customerAddress #customerAddressTabs .customerAddressTab:hover {
  background-color: rgb(221.9068825911, 244.4210526316, 254.5931174089);
  cursor: pointer;
}
#customerAddress .card {
  padding: 0px 24px;
  height: fit-content;
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

#priceWatch #priceWatchTop {
  padding: 0 12px;
  background-color: #FFF;
  border-radius: 4px;
}
#priceWatch #priceWatchTop .row {
  align-items: center;
}
@media screen and (max-width: 1400px) {
  #priceWatch #priceWatchTop .row .col-6,
  #priceWatch #priceWatchTop .row .col-3 {
    width: 100%;
  }
}
#priceWatch #priceWatchTop .row input {
  height: fit-content;
  width: 100%;
  margin: auto;
  display: block;
}
#priceWatch #priceWatchTop .row #updateBrandsGaPrice {
  margin: auto;
}
@media screen and (max-width: 1400px) {
  #priceWatch #priceWatchTop .row #updateBrandsGaPrice {
    margin: unset;
  }
}
#priceWatch #priceWatchTop .row .history {
  display: flex;
  justify-content: center;
  cursor: pointer;
}
@media screen and (max-width: 1400px) {
  #priceWatch #priceWatchTop .row .history {
    justify-content: flex-start;
  }
}
#priceWatch .webshopData .psa {
  flex-wrap: wrap;
}
#priceWatch #priceWatchMiddle {
  overflow-y: visible;
  overflow-x: visible;
}
#priceWatch #priceWatchMiddle table tr:nth-child(even) {
  background-color: #f9f9f9;
}
#priceWatch #priceWatchMiddle table tr:nth-child(even) td.active {
  background-color: rgb(229.8, 243.24, 255);
}
#priceWatch #priceWatchMiddle table tr:nth-child(even) td.OK {
  background-color: rgb(98, 255, 163.155);
  color: #000;
}
#priceWatch #priceWatchMiddle table tr:nth-child(even) td.WARNING {
  background-color: rgb(255, 210.2, 153);
  color: #000;
}
#priceWatch #priceWatchMiddle table tr:nth-child(even) td.ALERT {
  background-color: #ff6f6f;
  color: #000;
}
#priceWatch #priceWatchMiddle table tr:hover {
  outline: 4px solid #03a9f4;
  border-radius: 4px;
}
#priceWatch #priceWatchMiddle table tr td {
  color: #000;
}
#priceWatch #priceWatchMiddle table tr td.active {
  background-color: aliceblue;
}
#priceWatch #priceWatchMiddle table tr td.OK {
  background-color: rgb(149, 255, 192.99);
}
#priceWatch #priceWatchMiddle table tr td.WARNING {
  background-color: rgb(255, 232.6, 204);
}
#priceWatch #priceWatchMiddle table tr td.ALERT {
  background-color: #ffa2a2;
}

#productieplanningdashboard #navigatePrevWeek:hover,
#productieplanningdashboard #navigateNextWeek:hover {
  color: #03a9f4;
}
#productieplanningdashboard #productieplanningnavigatie input {
  min-height: 28px !important;
  max-height: 28px !important;
  width: 100%;
  border: none !important;
  text-align: center;
  font-weight: bold;
}
#productieplanningdashboard #productieplanningsubnummers {
  overflow: auto;
  width: 100%;
  padding-bottom: 7em;
  z-index: 1;
  position: relative;
}
#productieplanningdashboard #productieplanningsubnummers table thead tr th {
  min-width: 140px;
  max-width: 140px;
  background-color: #03a9f4;
  color: #FFF;
  text-align: left;
  overflow: hidden;
  padding: 8px 6px;
  border: 1px solid #c1c1c1;
}
#productieplanningdashboard #productieplanningsubnummers table thead tr th:nth-child(1), #productieplanningdashboard #productieplanningsubnummers table thead tr th:nth-child(2), #productieplanningdashboard #productieplanningsubnummers table thead tr th:nth-child(3) {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
}
#productieplanningdashboard #productieplanningsubnummers table thead tr th:nth-child(1) span, #productieplanningdashboard #productieplanningsubnummers table thead tr th:nth-child(2) span, #productieplanningdashboard #productieplanningsubnummers table thead tr th:nth-child(3) span {
  height: fit-content;
  margin: auto;
  display: block;
}
#productieplanningdashboard #productieplanningsubnummers table thead tr th:nth-child(2), #productieplanningdashboard #productieplanningsubnummers table thead tr th:nth-child(3), #productieplanningdashboard #productieplanningsubnummers table thead tr th:nth-child(5), #productieplanningdashboard #productieplanningsubnummers table thead tr th:nth-child(6) {
  position: sticky;
  z-index: 9999999;
  background: rgb(2.6902834008, 151.5526315789, 218.8097165992);
}
#productieplanningdashboard #productieplanningsubnummers table thead tr th:nth-child(2) {
  left: -1px;
}
#productieplanningdashboard #productieplanningsubnummers table thead tr th:nth-child(3) {
  left: 39px;
}
#productieplanningdashboard #productieplanningsubnummers table thead tr th:nth-child(5) {
  left: 79px;
}
#productieplanningdashboard #productieplanningsubnummers table thead tr th:nth-child(6) {
  left: 218px;
}
#productieplanningdashboard #productieplanningsubnummers table tbody {
  background-color: #FFF;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr td {
  padding: 0px 6px;
  background-color: #FFF;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
  min-width: 140px;
  max-width: 140px;
  border: 1px solid #c1c1c1;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr td input {
  min-height: 25px !important;
  height: 25px !important;
  border-radius: 0 !important;
  width: 100%;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(4), #productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(7) {
  position: relative;
  overflow: visible;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(5) {
  padding: 0 !important;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(2) {
  left: -1px;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(3):not(.planningGroupRowAmount) {
  left: 39px;
  background-color: #03a9f4 !important;
  color: #FFF !important;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(3):not(.planningGroupRowAmount) span {
  color: #FFF !important;
  margin-bottom: 0.1em;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(5) {
  left: 79px;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(6) {
  left: 218px;
  border-right: 1px solid black;
  background-color: #03a9f4 !important;
  color: #FFF !important;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(2), #productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(3), #productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(5), #productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(6) {
  position: sticky;
  z-index: 9999;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(1), #productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(2):not(.planningGroupRowText), #productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(3):not(.planningGroupRowAmount) {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(1) span, #productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(2):not(.planningGroupRowText) span, #productieplanningdashboard #productieplanningsubnummers table tbody tr td:nth-child(3):not(.planningGroupRowAmount) span {
  height: fit-content;
  margin: auto;
  display: block;
  font-size: 20px;
  width: fit-content;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr td[type=col-input] {
  padding: 0;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr td[type=col-input] input {
  background-color: transparent;
  border: 1px solid #696969;
  padding-left: 6px;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr .planningGroupRowAmount {
  left: 139px;
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr:hover td {
  background-color: rgb(214.5, 236.1, 255);
}
#productieplanningdashboard #productieplanningsubnummers table tbody tr.locked td {
  background-color: #ffead5;
}
#productieplanningdashboard #productieplanningsubnummers .planningGroupRow {
  box-shadow: 0 0 4px 1px #9f9f9f;
  z-index: 9999;
  position: relative;
}
#productieplanningdashboard #productieplanningsubnummers .planningGroupRow .planningGroupRowTitle {
  background-color: #F8F8F8;
  font-size: 16px;
  border: none;
  border-left: 1px solid #c1c1c1;
}
#productieplanningdashboard #productieplanningsubnummers .planningGroupRow .planningGroupRowText {
  border: none;
  background-color: #F8F8F8;
  font-size: 16px;
}
#productieplanningdashboard #productieplanningsubnummers .planningGroupRow .planningGroupRowAmount {
  border: none;
  background-color: #F8F8F8;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 0 !important;
}
#productieplanningdashboard #productieplanningsubnummers .planningGroupRow .planningGroupRowAmount p {
  background-color: #03a9f4;
  padding: 6px 8px;
  border-radius: 4px;
  color: #FFF;
  width: 60px;
  text-align: center;
}
#productieplanningdashboard #productieplanningsubnummers .planningGroupRow .planningGroupRowEnd {
  border: none;
  border-right: 1px solid #c1c1c1;
  background-color: #F8F8F8;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 0 !important;
}
@media screen and (max-width: 1400px) {
  #productieplanningdashboard .col-2 {
    width: 25%;
  }
}
@media screen and (max-width: 1200px) {
  #productieplanningdashboard .col-2 {
    width: 35%;
  }
}
@media screen and (max-width: 576px) {
  #productieplanningdashboard .col-2 {
    width: 100%;
  }
}

.login-body {
  height: 100vh;
}

.form-signin {
  display: flex;
  margin: auto;
  align-self: stretch;
  height: 100%;
}
.form-signin .login-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  margin: auto;
}
.form-signin .login-wrapper .left {
  width: 50%;
  background-image: url(../images/login-background.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (max-width: 768px) {
  .form-signin .login-wrapper .left {
    display: none;
  }
}
.form-signin .login-wrapper .right {
  width: 50%;
  background-color: #202533;
  min-width: 310px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .form-signin .login-wrapper .right {
    width: 100%;
  }
}
.form-signin .login-wrapper .right .login-form {
  width: 310px;
}
.form-signin .login-wrapper .right .login-form .login-item {
  margin-bottom: 24px;
  padding: 0 12px;
  position: relative;
}
.form-signin .login-wrapper .right .login-form .login-item input {
  background-color: transparent;
  border: 0px;
  outline: 0;
  padding: 6px;
  border-bottom: 2px solid #fff;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  width: -webkit-fill-available;
  color: #fff;
  color: #fff;
}
.form-signin .login-wrapper .right .login-form .login-item .login-item-icon {
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
  height: fit-content;
  color: #FFF;
  width: 34px;
  text-align: center;
}
.form-signin .login-wrapper .right .full-width {
  width: 100%;
  justify-content: center;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
}
.form-signin .login-wrapper .main-heading {
  margin-bottom: 95px;
  color: #fff;
  font-size: 23px;
}
.form-signin .login-wrapper .main-heading .logo img {
  height: 63px;
  width: 90%;
  margin: auto;
  display: block;
}
.form-signin .login-wrapper .sub-heading {
  color: #fff;
  font-size: 20px;
  margin-bottom: 36px;
  padding: 0 12px;
}
.form-signin .login-wrapper .tegugNaarLogin,
.form-signin .login-wrapper .loginButton,
.form-signin .login-wrapper .WWVergetenButton {
  padding: 0 12px;
}

.form-signin {
  display: flex;
  margin: auto;
  align-self: stretch;
  height: 100%;
}
.form-signin #two-factor-auth {
  height: 100%;
  width: 100%;
  display: flex;
  margin: auto;
}
.form-signin #two-factor-auth .left {
  width: 50%;
  background-image: url(../images/login-background.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.form-signin #two-factor-auth .right {
  width: 50%;
  background-color: #202533;
  min-width: 310px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-signin #two-factor-auth #two-factor-auth-form {
  padding: 72px;
  width: 100%;
}
.form-signin #two-factor-auth #two-factor-auth-form img {
  width: 300px;
  height: 200px;
  margin: auto;
  display: block;
}
.form-signin #two-factor-auth #two-factor-auth-form h1 {
  color: #FFF;
  width: 100%;
  text-align: center;
  font-size: 50px;
  margin-bottom: 48px;
}
.form-signin #two-factor-auth #two-factor-auth-form .two-factor-auth-code-input {
  height: 120px;
  font-size: 72px;
  width: 80px;
  text-align: center;
  padding: 0;
  font-weight: bold;
}
.form-signin #two-factor-auth #two-factor-auth-form .two-factor-auth-code-splitter {
  font-size: 90px;
  color: #FFF;
  height: fit-content;
  margin: 0;
  margin-bottom: 18px;
}
.form-signin #two-factor-auth #two-factor-auth-form #loginButton {
  width: 300px;
  font-size: 20px;
  text-align: center;
  margin: auto;
  display: block;
  margin-top: 2em;
}

#MANCOINDEX #tabs .col-12 {
  padding-bottom: 0;
}
#MANCOINDEX #table .col-12 {
  padding-top: 0;
}

#MANCO-SHOW {
  padding: 48px 48px;
}
@media screen and (max-width: 1400px) {
  #MANCO-SHOW {
    padding: 48px 20px;
  }
}
@media screen and (max-width: 1200px) {
  #MANCO-SHOW #faultAndMedia .col-6 {
    width: 100%;
  }
}
@media screen and (max-width: 1200px) {
  #MANCO-SHOW #faultAndMedia .col-6 .row .col-6 {
    width: 50%;
  }
}
@media screen and (max-width: 1200px) {
  #MANCO-SHOW #productType .col-fit {
    width: 25%;
  }
}
@media screen and (max-width: 992px) {
  #MANCO-SHOW #productType .col-fit {
    width: 50%;
  }
}
@media screen and (max-width: 992px) {
  #MANCO-SHOW #damageType .col-4,
  #MANCO-SHOW #manco .col-4 {
    width: 50%;
  }
}
@media screen and (max-width: 992px) {
  #MANCO-SHOW #data .row .col-6 {
    width: 100%;
  }
}
@media screen and (max-width: 992px) {
  #MANCO-SHOW #header .col-4 {
    width: 60%;
  }
}
@media screen and (max-width: 992px) {
  #MANCO-SHOW #header .col-2 {
    width: 40%;
  }
}
#MANCO-SHOW #header .title {
  font-size: 42px;
  font-weight: 900;
  color: #03a9f4;
}
#MANCO-SHOW #header .subTitle {
  font-size: 24px;
  font-weight: 900;
  color: #03a9f4;
}
#MANCO-SHOW #header .subTitle .subTitleNumber {
  color: #000;
}
#MANCO-SHOW #header #statusSelect {
  border-bottom: 1px solid #000 !important;
}
#MANCO-SHOW #header #statusSelect label,
#MANCO-SHOW #header #statusSelect input,
#MANCO-SHOW #header #statusSelect select {
  border: none !important;
  border-radius: 0 !important;
}
#MANCO-SHOW #header #statusSelect label:focus,
#MANCO-SHOW #header #statusSelect input:focus,
#MANCO-SHOW #header #statusSelect select:focus {
  outline: none;
  border: none !important;
}
#MANCO-SHOW #header #statusSelect #status {
  background-color: #FFF;
}
@media screen and (max-width: 1400px) {
  #MANCO-SHOW #header .title {
    font-size: 34px;
  }
}
#MANCO-SHOW #data .line label {
  min-width: 150px;
}
#MANCO-SHOW #data .line input {
  width: 100% !important;
}
#MANCO-SHOW #data .line {
  border-bottom: 1px solid #000 !important;
}
#MANCO-SHOW #data .line label,
#MANCO-SHOW #data .line input,
#MANCO-SHOW #data .line select {
  border: none !important;
  border-radius: 0 !important;
}
#MANCO-SHOW #data .line label:focus,
#MANCO-SHOW #data .line input:focus,
#MANCO-SHOW #data .line select:focus {
  outline: none;
  border: none !important;
}
#MANCO-SHOW #faultAndMedia .fault p {
  color: #03a9f4;
}
#MANCO-SHOW #faultAndMedia .fault .line {
  border-bottom: 1px solid #000 !important;
}
#MANCO-SHOW #faultAndMedia .fault .line label,
#MANCO-SHOW #faultAndMedia .fault .line input,
#MANCO-SHOW #faultAndMedia .fault .line select {
  border: none !important;
  border-radius: 0 !important;
}
#MANCO-SHOW #faultAndMedia .fault .line label:focus,
#MANCO-SHOW #faultAndMedia .fault .line input:focus,
#MANCO-SHOW #faultAndMedia .fault .line select:focus {
  outline: none;
  border: none !important;
}
#MANCO-SHOW #faultAndMedia .media .pillboxHeader {
  background-color: #03a9f4;
  width: 100%;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  padding-left: 32px;
  color: #FFF;
  font-weight: 600;
  position: relative;
  margin-top: 1em;
}
#MANCO-SHOW #faultAndMedia .media .pillboxHeader:after {
  content: "";
  background-color: #FFF;
  border-radius: 100%;
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 14px;
  width: 14px;
}
#MANCO-SHOW #faultAndMedia .media .line label {
  min-width: 100px;
}
#MANCO-SHOW #faultAndMedia .media .line {
  border-bottom: 1px solid #000 !important;
}
#MANCO-SHOW #faultAndMedia .media .line label,
#MANCO-SHOW #faultAndMedia .media .line input,
#MANCO-SHOW #faultAndMedia .media .line select {
  border: none !important;
  border-radius: 0 !important;
}
#MANCO-SHOW #faultAndMedia .media .line label:focus,
#MANCO-SHOW #faultAndMedia .media .line input:focus,
#MANCO-SHOW #faultAndMedia .media .line select:focus {
  outline: none;
  border: none !important;
}
#MANCO-SHOW #faultAndMedia .imagesAndVideos .previewItem {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 7px;
  box-shadow: 0 0 4px 0 #b5b5b5;
  margin-top: 0.5em;
  cursor: pointer;
}
#MANCO-SHOW #damages .pillboxHeader {
  background-color: #03a9f4;
  width: 100%;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  padding-left: 32px;
  color: #FFF;
  font-weight: 600;
  position: relative;
  margin-top: 1em;
}
#MANCO-SHOW #damages .pillboxHeader:after {
  content: "";
  background-color: #FFF;
  border-radius: 100%;
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 14px;
  width: 14px;
}
#MANCO-SHOW #damages #productType .line input,
#MANCO-SHOW #damages #productType .line select {
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #000 !important;
}
#MANCO-SHOW #damages #productType .line input:focus,
#MANCO-SHOW #damages #productType .line select:focus {
  outline: none;
  border: none !important;
  border-bottom: 1px solid #000 !important;
}
#MANCO-SHOW #damages #productType {
  border-bottom: 3px solid #03a9f4;
}
#MANCO-SHOW #damages #damageType .line {
  border-bottom: 1px solid #000 !important;
}
#MANCO-SHOW #damages #damageType .line label,
#MANCO-SHOW #damages #damageType .line input,
#MANCO-SHOW #damages #damageType .line select {
  border: none !important;
  border-radius: 0 !important;
}
#MANCO-SHOW #damages #damageType .line label:focus,
#MANCO-SHOW #damages #damageType .line input:focus,
#MANCO-SHOW #damages #damageType .line select:focus {
  outline: none;
  border: none !important;
}
#MANCO-SHOW #damages .disclaimer {
  padding-left: 24px;
  font-style: italic;
}
#MANCO-SHOW #manco .pillboxHeader {
  background-color: #03a9f4;
  width: 100%;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  padding-left: 32px;
  color: #FFF;
  font-weight: 600;
  position: relative;
  margin-top: 1em;
}
#MANCO-SHOW #manco .pillboxHeader:after {
  content: "";
  background-color: #FFF;
  border-radius: 100%;
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 14px;
  width: 14px;
}
#MANCO-SHOW #manco .line {
  border-bottom: 1px solid #000 !important;
}
#MANCO-SHOW #manco .line label,
#MANCO-SHOW #manco .line input,
#MANCO-SHOW #manco .line select {
  border: none !important;
  border-radius: 0 !important;
}
#MANCO-SHOW #manco .line label:focus,
#MANCO-SHOW #manco .line input:focus,
#MANCO-SHOW #manco .line select:focus {
  outline: none;
  border: none !important;
}
#MANCO-SHOW #manco .disclaimer {
  padding-left: 24px;
  font-style: italic;
}
#MANCO-SHOW #notesAndLabel .pillboxHeader {
  background-color: #03a9f4;
  width: 100%;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  padding-left: 32px;
  color: #FFF;
  font-weight: 600;
  position: relative;
  margin-top: 1em;
}
#MANCO-SHOW #notesAndLabel .pillboxHeader:after {
  content: "";
  background-color: #FFF;
  border-radius: 100%;
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 14px;
  width: 14px;
}
@media screen and (max-width: 768px) {
  #MANCO-SHOW #notesAndLabel div[class^=col-] {
    width: 100%;
  }
}
#MANCO-SHOW #notesAndLabel #note {
  height: 100% !important;
}
#MANCO-SHOW #notesAndLabel #itemLabel {
  position: relative;
  height: 500px;
  min-height: 500px;
  max-height: 500px;
  overflow: auto;
  border: 1px solid #d3d3d3;
}
@media screen and (max-width: 768px) {
  #MANCO-SHOW #notesAndLabel #itemLabel {
    height: 400px;
    min-height: 400px;
    max-height: 400px;
  }
}
#MANCO-SHOW #notesAndLabel #itemLabel #uploadImage {
  width: 100%;
  height: 100%;
  outline: 1px solid #d3d3d3;
  position: relative;
  min-height: 498px;
  max-height: 498px;
  cursor: pointer;
  display: block;
  overflow: auto;
}
@media screen and (max-width: 768px) {
  #MANCO-SHOW #notesAndLabel #itemLabel #uploadImage {
    min-height: 398px;
    max-height: 398px;
  }
}
#MANCO-SHOW #notesAndLabel #itemLabel #uploadImage .uploadImageSymbol {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 40px;
  right: 0;
  margin: auto;
  display: block;
  height: fit-content;
  width: fit-content;
  font-size: 80px;
  color: #03a9f4;
}
#MANCO-SHOW #notesAndLabel #itemLabel #uploadImage .uploadImageText {
  position: absolute;
  left: 0;
  bottom: 190px;
  right: 0;
  margin: auto;
  display: block;
  height: fit-content;
  width: fit-content;
  font-size: 28px;
  color: #03a9f4;
  font-family: monospace;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  #MANCO-SHOW #notesAndLabel #itemLabel #uploadImage .uploadImageText {
    bottom: 145px;
  }
}
#MANCO-SHOW #notesAndLabel #itemLabel #uploadImage:hover {
  background-color: rgb(75.8032388664, 197.7157894737, 252.7967611336);
  outline: 1px solid rgb(75.8032388664, 197.7157894737, 252.7967611336);
}
#MANCO-SHOW #notesAndLabel #itemLabel #uploadImage:hover .uploadImageSymbol,
#MANCO-SHOW #notesAndLabel #itemLabel #uploadImage:hover .uploadImageText {
  color: #FFF;
}
#MANCO-SHOW #notesAndLabel #itemLabel #itemLabelImageParent {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
#MANCO-SHOW #notesAndLabel #itemLabel #itemLabelImageParent #itemLabelImage {
  height: 100%;
  width: 100%;
}
#MANCO-SHOW #notesAndLabel #itemLabel #itemLabelImageParent #clearLabelImage {
  color: #03a9f4;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #FFF;
  height: fit-content;
  width: fit-content;
  border-top-left-radius: 12px;
}
#MANCO-SHOW #notesAndLabel #itemLabel #itemLabelImageParent #clearLabelImage span {
  font-size: 40px;
  font-weight: bold;
}
#MANCO-SHOW #notesAndLabel #itemLabel #itemLabelImageParent #clearLabelImage:hover {
  color: #D50000;
}
@media screen and (max-width: 1400px) {
  #MANCO-SHOW #notesAndLabel .col-4 {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #MANCO-SHOW #clientAndCompanySigns div[class^=col-] {
    width: 100%;
  }
}
#MANCO-SHOW #clientAndCompanySigns .canvas {
  border: 1px solid #d3d3d3;
  border-radius: 6px;
  overflow: hidden;
  border-bottom-right-radius: 0px;
}
#MANCO-SHOW #clientAndCompanySigns #paraafKlant,
#MANCO-SHOW #clientAndCompanySigns #paraafWerknemer {
  position: relative;
}
#MANCO-SHOW #clientAndCompanySigns #paraafKlant #customerSignImage,
#MANCO-SHOW #clientAndCompanySigns #paraafKlant #workerSignImage,
#MANCO-SHOW #clientAndCompanySigns #paraafWerknemer #customerSignImage,
#MANCO-SHOW #clientAndCompanySigns #paraafWerknemer #workerSignImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#MANCO-SHOW #clientAndCompanySigns #clearParaafKlant,
#MANCO-SHOW #clientAndCompanySigns #clearParaafWerknemer {
  color: #FFF;
  cursor: pointer;
  background-color: #be0000;
  font-size: 23px;
  padding: 4px 18px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin: auto 0 auto auto;
  display: block;
  width: fit-content;
  font-weight: bold;
  box-shadow: 2px 2px 4px 0 #a7a7a7;
}
#MANCO-SHOW #administration .dashHeader {
  display: flex;
  width: 100%;
  align-items: flex-start;
  margin-top: 1em;
  font-weight: 600;
  font-style: italic;
  flex-direction: column;
}
#MANCO-SHOW #administration .dashHeader .text {
  min-width: 270px;
}
#MANCO-SHOW #administration .dashHeader .dash {
  width: 100%;
  background-color: #03a9f4;
  height: 4px;
}
@media screen and (max-width: 768px) {
  #MANCO-SHOW #administration .row {
    flex-direction: column;
    align-content: flex-start;
  }
}
#MANCO-SHOW #administration .line label {
  min-width: 50px;
}
#MANCO-SHOW #administration .line label[for=administration-anders] {
  min-width: 80px;
}
#MANCO-SHOW #administration .line input,
#MANCO-SHOW #administration .line select {
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #000 !important;
}
#MANCO-SHOW #administration .line input:focus,
#MANCO-SHOW #administration .line select:focus {
  outline: none;
  border: none !important;
  border-bottom: 1px solid #000 !important;
}
#MANCO-SHOW #administration .subtext {
  position: relative;
  top: 0px;
}
@media screen and (max-width: 1400px) {
  #MANCO-SHOW #administration .row.no-wrap {
    flex-wrap: wrap !important;
  }
  #MANCO-SHOW #administration .row.no-wrap .col-fit {
    width: 100%;
  }
  #MANCO-SHOW #administration .row.no-wrap .col-2 {
    width: 33%;
  }
  #MANCO-SHOW #administration .row.no-wrap .col-2,
  #MANCO-SHOW #administration .row.no-wrap .col-6 {
    padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
    padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
  }
}
#MANCO-SHOW #footer .color-block {
  height: 45px;
  width: 100%;
  background-color: #03a9f4;
}
#MANCO-SHOW #footer .details {
  text-align: center;
}
#MANCO-SHOW #footer .details span {
  width: 100%;
  display: block;
  font-size: 14px;
  background-color: #03a9f4;
  color: #FFF;
  border-radius: 6px;
  padding: 5px 0;
  font-weight: bold;
}
@media screen and (max-width: 1400px) {
  #MANCO-SHOW #footer .col-3,
  #MANCO-SHOW #footer .col-6 {
    width: 100%;
  }
  #MANCO-SHOW #footer .col-3 .details .col-4,
  #MANCO-SHOW #footer .col-6 .details .col-4 {
    width: 100%;
    padding: 0 12px !important;
    margin-bottom: 0.5em;
  }
}
#MANCO-SHOW label {
  cursor: pointer;
}
#MANCO-SHOW #imageAndVideoPreviewPopup {
  width: 50vw;
  height: 50vh;
  display: block;
  padding: 0;
}
#MANCO-SHOW #imageAndVideoPreviewPopup #popupheader span {
  display: block;
  margin: auto 0 auto auto;
  width: fit-content;
  height: fit-content;
  font-size: 36px;
  font-weight: bold;
  color: maroon;
  cursor: pointer;
  padding: 6px;
}
#MANCO-SHOW #imageAndVideoPreviewPopup #popupMedia {
  height: fit-content;
  max-height: 400px;
  min-height: 400px;
  overflow: auto;
}
#MANCO-SHOW #imageAndVideoPreviewPopup #popupMedia img,
#MANCO-SHOW #imageAndVideoPreviewPopup #popupMedia video {
  width: 100%;
  height: auto;
}
#MANCO-SHOW .hidden-checkbox {
  visibility: hidden;
}
#MANCO-SHOW .closeMancoPopup {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 60px;
  font-weight: bold;
  color: #D50000;
}
#MANCO-SHOW .closeMancoPopup:hover {
  color: maroon;
}

@media screen and (max-width: 1400px) {
  #tech_drawing .row table {
    border: 0;
    box-shadow: none;
  }
  #tech_drawing .row table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #tech_drawing .row table tr {
    border-bottom: 24px solid #eeeeee;
    display: block;
  }
  #tech_drawing .row table td {
    border-bottom: 1px solid #eeeeee;
    display: block;
    text-align: right;
    min-height: 49px;
  }
  #tech_drawing .row table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  #tech_drawing .row table td:last-child {
    border-bottom: 0;
  }
}

#orders_overview .flex-column .row:nth-child(1) > div:first-of-type {
  padding-bottom: 0;
}
#orders_overview .flex-column .row:nth-child(2) > div:last-of-type {
  padding-top: 0;
}
@media screen and (max-width: 1400px) {
  #orders_overview .row table {
    border: 0;
    box-shadow: none;
  }
  #orders_overview .row table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #orders_overview .row table tr {
    border-bottom: 24px solid #eeeeee;
    display: block;
  }
  #orders_overview .row table td {
    border-bottom: 1px solid #eeeeee;
    display: block;
    text-align: right;
    min-height: 49px;
  }
  #orders_overview .row table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  #orders_overview .row table td:last-child {
    border-bottom: 0;
  }
}
#orders_overview table tr.locked {
  position: relative;
}
#orders_overview table tr.locked:after {
  content: "\f8f3";
  font-family: "Material Symbols Outlined";
  display: block;
  font-size: 38px;
  position: absolute;
  top: 0;
  right: 18px;
  height: fit-content;
  width: fit-content;
  bottom: 0;
  margin: auto;
  color: #D50000;
}

@media screen and (max-width: 1650px) {
  #customers_overview .row table {
    border: 0;
    box-shadow: none;
  }
  #customers_overview .row table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #customers_overview .row table tr {
    border-bottom: 24px solid #eeeeee;
    display: block;
  }
  #customers_overview .row table td {
    border-bottom: 1px solid #eeeeee;
    display: block;
    text-align: right;
    min-height: 49px;
  }
  #customers_overview .row table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  #customers_overview .row table td:last-child {
    border-bottom: 0;
  }
}

#service-tabs .service-tab {
  background-color: #FFF;
  box-shadow: 3px 3px 4px 0 #b2b2b2;
  width: calc(33.33333333% - 1em);
  margin-bottom: 0.5em;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  padding: 0 62px;
}
@media screen and (max-width: 1400px) {
  #service-tabs .service-tab {
    width: calc(50% - 1em);
  }
}
@media screen and (max-width: 768px) {
  #service-tabs .service-tab {
    width: 100%;
  }
}
#service-tabs .service-tab:hover {
  background-color: rgb(221.9068825911, 244.4210526316, 254.5931174089);
  color: #000;
  cursor: pointer;
}
#service-tabs .service-tab:hover a {
  color: #000;
}
#service-tabs .service-tab.active {
  background-color: #03a9f4;
  color: #FFF;
}
#service-tabs .service-tab.active a {
  color: #FFF;
  font-weight: bold;
}
#service-tabs .service-tab.active span {
  background-color: rgb(2.0708502024, 116.6578947368, 168.4291497976);
  color: #FFF;
}
#service-tabs .service-tab span {
  position: absolute;
  right: 0;
  top: 0;
  background: #03a9f4;
  color: #FFF;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 12px;
  min-width: 50px;
  justify-content: center;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  #services_overview .row table {
    border: 0;
    box-shadow: none;
  }
  #services_overview .row table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #services_overview .row table tr {
    border-bottom: 24px solid #eeeeee;
    display: block;
  }
  #services_overview .row table td {
    border-bottom: 1px solid #eeeeee;
    display: block;
    text-align: right;
    min-height: 49px;
  }
  #services_overview .row table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  #services_overview .row table td:last-child {
    border-bottom: 0;
  }
}

@media screen and (max-width: 1400px) {
  #customer_info .row > div:not(.col-12) {
    width: 50%;
  }
}
@media screen and (max-width: 576px) {
  #customer_info .row > div:not(.col-12) {
    width: 100%;
  }
}
@media screen and (max-width: 992px) {
  #customer_info .row > div.col-12 table {
    border: 0;
    box-shadow: none;
  }
  #customer_info .row > div.col-12 table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #customer_info .row > div.col-12 table tr {
    border-bottom: 24px solid #eeeeee;
    display: block;
  }
  #customer_info .row > div.col-12 table td {
    border-bottom: 1px solid #eeeeee;
    display: block;
    text-align: right;
    min-height: 49px;
  }
  #customer_info .row > div.col-12 table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  #customer_info .row > div.col-12 table td:last-child {
    border-bottom: 0;
  }
}
@media screen and (max-width: 1400px) {
  #customer_info .card .card-heading .main-heading.main-heading {
    font-size: 50px;
  }
}
@media screen and (max-width: 768px) {
  #customer_info .card .card-heading .main-heading.main-heading {
    font-size: 34px;
  }
}

@media screen and (max-width: 576px) {
  .planning_title {
    flex-direction: column;
    row-gap: 18px;
  }
  .planning_title > div {
    padding-left: 0;
    margin-left: auto;
  }
}

@media screen and (max-width: 1400px) {
  .tableDiv table {
    border: 0;
    box-shadow: none;
  }
  .tableDiv table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .tableDiv table tr {
    border-bottom: 24px solid #eeeeee;
    display: block;
  }
  .tableDiv table td {
    border-bottom: 1px solid #eeeeee;
    display: block;
    text-align: right;
    min-height: 49px;
  }
  .tableDiv table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  .tableDiv table td:last-child {
    border-bottom: 0;
  }
}
.tableDiv .material-symbols-outlined {
  position: relative;
  top: 6px;
  margin-right: 2px;
}
@media screen and (max-width: 1400px) {
  .tableDiv .w-100 {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .tableDiv .w-100 {
    width: 100%;
  }
}
.tableDiv .mailAllPlannedOrders {
  min-width: 40px;
  text-align: center;
  display: table-cell;
  align-items: baseline;
  height: 100%;
  width: 40px;
  position: relative;
}
.tableDiv .mailAllPlannedOrders:after {
  content: "\e158";
  font-family: "Material Icons";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #03a9f4;
  cursor: pointer;
  margin: auto;
  display: block;
  width: fit-content;
  height: fit-content;
  font-size: 40px;
}
.tableDiv .calculateRoute {
  min-width: 40px;
  text-align: center;
  display: table-cell;
  align-items: baseline;
  height: 100%;
  width: 40px;
  position: relative;
}
.tableDiv .calculateRoute:after {
  content: "\f5df";
  font-family: "Material Symbols Outlined";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #639978;
  cursor: pointer;
  margin: auto;
  display: block;
  width: fit-content;
  height: fit-content;
  font-size: 40px;
}
.tableDiv .calculateRoute.locked:after {
  content: "";
  display: none;
}
.tableDiv .dropDownIcon {
  position: relative;
  height: 20px;
  width: 40px;
  min-width: 40px;
  transition: 1s all;
}
.tableDiv .dropDownIcon.open {
  transform: rotate(180deg);
  transition: 0.5s all;
}
.tableDiv .dropDownIcon:after {
  content: "\e5c5";
  font-family: "Material Icons";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #000;
  margin: auto;
  display: block;
  width: fit-content;
  height: fit-content;
  font-size: 40px;
}
.tableDiv .calculateRouteIcon {
  text-align: center;
}
.tableDiv .calculateRouteIcon .orderIndexMoveUp,
.tableDiv .calculateRouteIcon .orderIndexMoveDown {
  margin: 0;
  top: 0;
  font-weight: bold;
  font-size: 28px;
}
.tableDiv .calculateRouteIcon .orderIndexMoveUp:hover,
.tableDiv .calculateRouteIcon .orderIndexMoveDown:hover {
  color: #639978;
}
.tableDiv .calculateRouteIcon .orderIndexMoveDown {
  transform: rotate(180deg);
}
.tableDiv h2 {
  min-width: 200px;
}
.tableDiv .allWorkersList {
  flex-wrap: wrap;
}
.tableDiv .allWorkersList .allWorkersListWorker {
  margin: 0;
  background-color: #03a9f4;
  color: #FFF;
  border-radius: 4px;
  padding: 3px 12px;
  width: fit-content;
  font-size: 14px;
}
.tableDiv .allWorkersList .allWorkersListWorker.planned {
  background-color: #009d0d;
}
.tableDiv .serviceTableShowOrdeData {
  background-color: #edf7ff;
}
.tableDiv .serviceTableShowOrdeData td {
  color: #4b4b4b;
}
@media screen and (max-width: 768px) {
  .tableDiv .order td.planning_start_end_times input,
  .tableDiv .serviceTableShowOrdeData td.planning_start_end_times input,
  .tableDiv .tableShowOrdeData td.planning_start_end_times input {
    width: calc(33.333333% - 9px);
  }
}
@media screen and (max-width: 768px) {
  .tableDiv .order td.planning_start_end_times, .tableDiv .order td.planning_notes, .tableDiv .order td.planning_time, .tableDiv .order td.planning_workers,
  .tableDiv .serviceTableShowOrdeData td.planning_start_end_times,
  .tableDiv .serviceTableShowOrdeData td.planning_notes,
  .tableDiv .serviceTableShowOrdeData td.planning_time,
  .tableDiv .serviceTableShowOrdeData td.planning_workers,
  .tableDiv .tableShowOrdeData td.planning_start_end_times,
  .tableDiv .tableShowOrdeData td.planning_notes,
  .tableDiv .tableShowOrdeData td.planning_time,
  .tableDiv .tableShowOrdeData td.planning_workers {
    text-align: left;
  }
  .tableDiv .order td.planning_start_end_times::before, .tableDiv .order td.planning_notes::before, .tableDiv .order td.planning_time::before, .tableDiv .order td.planning_workers::before,
  .tableDiv .serviceTableShowOrdeData td.planning_start_end_times::before,
  .tableDiv .serviceTableShowOrdeData td.planning_notes::before,
  .tableDiv .serviceTableShowOrdeData td.planning_time::before,
  .tableDiv .serviceTableShowOrdeData td.planning_workers::before,
  .tableDiv .tableShowOrdeData td.planning_start_end_times::before,
  .tableDiv .tableShowOrdeData td.planning_notes::before,
  .tableDiv .tableShowOrdeData td.planning_time::before,
  .tableDiv .tableShowOrdeData td.planning_workers::before {
    width: 100%;
    margin-bottom: 12px;
  }
}
.tableDiv .order td.planning_start_end_times .select2-container, .tableDiv .order td.planning_notes .select2-container, .tableDiv .order td.planning_time .select2-container, .tableDiv .order td.planning_workers .select2-container,
.tableDiv .serviceTableShowOrdeData td.planning_start_end_times .select2-container,
.tableDiv .serviceTableShowOrdeData td.planning_notes .select2-container,
.tableDiv .serviceTableShowOrdeData td.planning_time .select2-container,
.tableDiv .serviceTableShowOrdeData td.planning_workers .select2-container,
.tableDiv .tableShowOrdeData td.planning_start_end_times .select2-container,
.tableDiv .tableShowOrdeData td.planning_notes .select2-container,
.tableDiv .tableShowOrdeData td.planning_time .select2-container,
.tableDiv .tableShowOrdeData td.planning_workers .select2-container {
  width: 100% !important;
  height: fit-content;
}
.tableDiv .order.card,
.tableDiv .serviceTableShowOrdeData.card,
.tableDiv .tableShowOrdeData.card {
  height: fit-content;
}
.tableDiv .order.Betaald,
.tableDiv .serviceTableShowOrdeData.Betaald,
.tableDiv .tableShowOrdeData.Betaald {
  border-left: 4px solid #009d0d;
}
.tableDiv .order.Open,
.tableDiv .serviceTableShowOrdeData.Open,
.tableDiv .tableShowOrdeData.Open {
  border-left: 4px solid #841919;
}
.tableDiv .order.ui-draggable-dragging,
.tableDiv .serviceTableShowOrdeData.ui-draggable-dragging,
.tableDiv .tableShowOrdeData.ui-draggable-dragging {
  background: #b6e8fe;
  padding: 0;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background-color: #000;
  box-shadow: 0 0 4px 0 #e1e1e1;
}
.tableDiv .order.ui-draggable-dragging:after,
.tableDiv .serviceTableShowOrdeData.ui-draggable-dragging:after,
.tableDiv .tableShowOrdeData.ui-draggable-dragging:after {
  content: "\e9fe";
  font-family: "Material Icons";
  font-size: 30px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  color: #03a9f4;
  background-color: #FFF;
  text-align: center;
  width: 40px;
}
.tableDiv .order-subrow {
  background-color: #F4F4F4;
  box-shadow: inset 0 0 4px 0 #e1e1e1;
}

#plannableServices .service {
  background-color: aliceblue;
  height: fit-content;
}

#plannableOrders {
  overflow-x: hidden;
  overflow-y: auto;
  height: 650px;
}
#plannableOrders .order {
  height: fit-content;
}
#plannableOrders .order .wrap {
  row-gap: 12px;
}
@media screen and (max-width: 1650px) {
  #plannableOrders .order .wrap > div {
    width: 50%;
  }
}
@media screen and (max-width: 576px) {
  #plannableOrders .order .wrap > div {
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #plannableOrders .order .wrap > div.col-6 {
    width: 100%;
  }
}

#trucks {
  display: flex;
  gap: 0.5em;
  align-items: center;
  width: 100%;
  outline: 2px dashed #dfdfdf;
  padding: 6px;
}
#trucks p {
  cursor: pointer;
  background-color: #FFF;
  padding: 0.5em;
  font-weight: bold;
  min-width: 120px;
  text-align: center;
  display: flex;
  gap: 0.5em;
}
#trucks p span {
  color: #000;
}
#trucks p.active {
  background-color: #03a9f4;
  color: #FFF;
}
#trucks p.active span {
  color: #FFF;
}
#trucks p:hover {
  background-color: rgb(146.3360323887, 220.2631578947, 253.6639676113);
}

#tableFilterBlocks,
#orderFilterBlocks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 0.5em;
  padding: 6px;
  outline: 2px dashed #dfdfdf;
  border-radius: 2px;
}
#tableFilterBlocks span,
#orderFilterBlocks span {
  display: block;
  background-color: #FFF;
  padding: 4px 6px;
  width: fit-content;
  min-width: 120px;
  text-align: center;
  border-radius: 2px;
  font-size: 14px;
  cursor: pointer;
}
@media screen and (max-width: 576px) {
  #tableFilterBlocks span,
  #orderFilterBlocks span {
    width: 100%;
  }
}
#tableFilterBlocks span.active,
#orderFilterBlocks span.active {
  background-color: #03a9f4;
  color: #FFF;
}
#tableFilterBlocks span:hover,
#orderFilterBlocks span:hover {
  background-color: rgb(146.3360323887, 220.2631578947, 253.6639676113);
}

#orderFilterBlocks {
  padding: 6px;
  justify-content: space-between;
}
#orderFilterBlocks span {
  min-width: calc(33.3333333% - 6px);
  width: calc(33.3333333% - 6px);
}
@media screen and (max-width: 1650px) {
  #orderFilterBlocks span {
    min-width: calc(50% - 6px);
    width: calc(50% - 6px);
  }
}
@media screen and (max-width: 1400px) {
  #orderFilterBlocks span {
    min-width: 100%;
    width: 100%;
  }
}

.table .dropHereTR .dropHereTD {
  width: 100%;
  background: repeating-linear-gradient(45deg, #ffffff, #ffffff 8px, #c2c2c2 0px, #c2c2c2 24px);
  position: relative;
  padding: 0;
}
.table .dropHereTR .dropHereTD .droppable-wrapper {
  width: 100%;
  height: 100%;
  padding: 0px;
  height: 26px;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.table .dropHereTR .dropHereTD .droppable-wrapper:after {
  content: "DROP HERE";
  height: 26px;
  width: 100px;
  margin: auto;
  background-color: #c2c2c2;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

#removeFromPlanning {
  width: 100%;
  background: repeating-linear-gradient(45deg, #ffffff, #ffffff 8px, #ff7373 0px, #ff7373 24px);
  position: relative;
  padding: 0;
  overflow: hidden;
}
#removeFromPlanning #removeFromPlanningSpan {
  background-color: #ffffff;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
  display: block;
  padding: 6px;
  height: fit-content;
  line-height: 14px;
  font-weight: bold;
  color: #ff7373;
}

#orderDetailsPopup {
  display: none;
  background-color: #FFF;
  box-shadow: 0 0 4px 0 #e1e1e1;
  width: fit-content;
  position: absolute;
  padding: 12px;
  left: -300px;
  width: 300px;
  border-radius: 4px;
}
#orderDetailsPopup #projectNumber {
  font-weight: bold;
  font-size: 20px;
  border-bottom: 1px solid;
  margin-bottom: 4px;
}

@media screen and (max-width: 1200px) {
  #production_week_planning .col-9 {
    width: 65%;
  }
}
@media screen and (max-width: 768px) {
  #production_week_planning .col-9 {
    width: 55%;
  }
}
@media screen and (max-width: 1200px) {
  #production_week_planning .col-3 {
    width: 35%;
  }
}
@media screen and (max-width: 768px) {
  #production_week_planning .col-3 {
    width: 45%;
  }
}

#measuring_day_planning #plannableOrders {
  overflow-x: hidden;
  overflow-y: auto;
  height: 650px;
}
@media screen and (max-width: 1200px) {
  #measuring_day_planning #plannableOrders .wrap > div {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #measuring_day_planning .col-9 {
    width: 60%;
  }
}
@media screen and (max-width: 768px) {
  #measuring_day_planning .col-3 {
    width: 40%;
  }
}

#transport_week_planning #plannableOrders {
  overflow-x: hidden;
  overflow-y: auto;
  height: 650px;
}
@media screen and (max-width: 1200px) {
  #transport_week_planning #plannableOrders .wrap > div {
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #transport_week_planning .col-9 {
    width: 70%;
  }
}
@media screen and (max-width: 768px) {
  #transport_week_planning .col-9 {
    width: 60%;
  }
}
@media screen and (max-width: 1400px) {
  #transport_week_planning .col-3 {
    width: 30%;
  }
}
@media screen and (max-width: 768px) {
  #transport_week_planning .col-3 {
    width: 40%;
  }
}

@media screen and (max-width: 1400px) {
  #transport_day_planning .col-9 {
    width: 60%;
  }
}
@media screen and (max-width: 1400px) {
  #transport_day_planning .col-3 {
    width: 40%;
  }
}
#transport_day_planning .tableDiv .dropDownIcon {
  min-width: 80px;
}

#montage_day_planning #plannableOrders {
  overflow-x: hidden;
  overflow-y: auto;
  height: 650px;
}
@media screen and (max-width: 1200px) {
  #montage_day_planning #plannableOrders .wrap > div {
    width: 100%;
  }
}
#montage_day_planning .order td .select2-container--default {
  width: 100% !important;
  height: fit-content;
}
@media screen and (max-width: 1400px) {
  #montage_day_planning .order td .select2-container--default {
    width: 50% !important;
  }
}
@media screen and (max-width: 1400px) {
  #montage_day_planning .order td .select2-container--default {
    width: 100% !important;
  }
}
#montage_day_planning .order td .select2-container--default .select2-selection.select2-selection--multiple {
  height: 28px;
}
#montage_day_planning .order td .select2-container--default .select2-selection.select2-selection--multiple ul li {
  margin: 0;
  margin-left: 6px;
}
@media screen and (max-width: 768px) {
  #montage_day_planning .col-9 {
    width: 60%;
  }
}
@media screen and (max-width: 768px) {
  #montage_day_planning .col-3 {
    width: 40%;
  }
}
#montage_day_planning .tableDiv .tableheader {
  background: rgba(255, 255, 255, 0);
  padding: 12px 12px;
  font-weight: bold;
  text-align: center;
  width: 100%;
}
#montage_day_planning .tableDiv h2 {
  width: 100%;
}
#montage_day_planning table {
  box-shadow: 0px 3px 10px rgb(198, 198, 198);
}
#montage_day_planning table .dropHereTR .dropHereTD {
  padding: 0px;
}
#montage_day_planning table .dropHereTR .dropHereTD .droppable-wrapper {
  height: 19px;
}
#montage_day_planning table .dropHereTR .dropHereTD .droppable-wrapper:after {
  height: 19px;
}
#montage_day_planning table thead tr th {
  padding: 2px 6px;
}
#montage_day_planning table thead tr th.calculateRoute:after, #montage_day_planning table thead tr th.mailAllPlannedOrders:after {
  font-size: 28px;
}
#montage_day_planning table thead tr th:first-child:not(.mid-th) {
  border-radius: 0;
}
#montage_day_planning table thead tr th:last-child:not(.mid-th) {
  border-radius: 0;
}
#montage_day_planning table tbody td {
  padding: 3px 12px;
  font-size: 14px;
}
#montage_day_planning .openDaysPSA {
  background-color: #fff073;
  padding: 4px 6px;
}

@media screen and (max-width: 992px) {
  #planning[data-planning-type=calendar] {
    color: #000;
  }
}
@media screen and (max-width: 1400px) {
  #planning[data-planning-type=calendar] .main-body {
    overflow: scroll;
  }
  #planning[data-planning-type=calendar] .main-body #planning-table-container {
    width: 1600px;
  }
}
#planning[data-planning-type=calendar] .row {
  height: 400px;
  margin: 0;
  justify-content: start;
  flex-wrap: nowrap;
}
#planning[data-planning-type=calendar] .row > div:not(:first-child) {
  display: flow-root;
  position: relative;
  width: calc((100% - 20px) / 7);
  border: 2px solid #eeeeee;
  overflow: auto;
  background-color: #FFF;
}
#planning[data-planning-type=calendar] .row > div:not(:first-child) > div {
  margin: 5px;
  border: 2px solid #202533;
  padding: 5px 10px;
  border-radius: 5px;
}
#planning[data-planning-type=calendar] .row > div:not(:first-child) > div:first-child {
  margin-left: 0.5rem;
  width: fit-content;
  border: none;
}
#planning[data-planning-type=calendar] .row > div:not(:first-child) > div:last-child {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 0.5rem;
  border: none;
}
#planning[data-planning-type=calendar] .row > div:first-child {
  width: 20px;
  box-sizing: border-box;
  padding: 0 2.5px;
  display: inline-flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #planning[data-planning-type=calendar] .btn-group button {
    width: 40px;
    height: 40px;
    padding: 0;
  }
}
#planning[data-planning-type=calendar] .btn-group button:first-child {
  margin-right: 0;
}
#planning[data-planning-type=calendar] .content-header-right button {
  background-color: #03a9f4;
  color: #FFF;
}
@media screen and (max-width: 1400px) {
  #planning[data-planning-type=calendar] .col-9.content-header {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 992px) {
  #planning[data-planning-type=calendar] .col-9.content-header {
    align-items: flex-start;
  }
}
@media screen and (max-width: 576px) {
  #planning[data-planning-type=calendar] #planning-table-container {
    color: #000;
  }
}

div[id*=modal-] .content form > div {
  padding: 5px 10px;
  margin: 5px 10px;
}
div[id*=modal-] .content input[type=date] {
  width: auto;
}
div[id*=modal-] .content select {
  width: 70%;
}
div[id*=modal-] .content label:first-child {
  width: 30%;
}
div[id*=modal-] .content label[for*=time],
div[id*=modal-] .content label[for*=date] {
  width: fit-content;
}
div[id*=modal-] .content label > span.material-symbols-outlined {
  color: black;
  font-size: 20px;
}
div[id*=modal-] .content .close-btn {
  color: black;
  margin: 5px 10px;
  border: 2px solid #858585;
  padding: 2px;
  float: right;
}

#user-modal .menu {
  border: 2px solid #202533;
  border-radius: 10%/30%;
  padding: 6px 12px;
}
#user-modal .menu > span {
  cursor: pointer;
}
#user-modal .menu-toggle {
  right: 6px;
  color: black;
  width: fit-content;
  display: flex;
  flex-wrap: nowrap;
}
#user-modal .menu-toggle.invert {
  transform: scaleY(-1);
}
#user-modal .user-list {
  background-color: #eeeeee;
  border-radius: 4px;
  padding: 6px 12px;
  height: 70vh;
  box-shadow: 0 0 4px 0 #7b7b7b;
  z-index: 999999999;
  overflow: auto;
  width: 285px;
}
@media screen and (max-width: 768px) {
  #user-modal .user-list {
    width: 240px;
  }
}
#user-modal .user-list > div {
  border-bottom: 1px solid rgba(210, 210, 210, 0.5);
  margin-bottom: 4px;
  padding-bottom: 6px;
}
#user-modal .user-list > div > span {
  display: flex;
  align-items: center;
}
#user-modal .user-list label,
#user-modal .user-list span {
  cursor: pointer;
}
#user-modal .user-list input[type=checkbox] {
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 768px) {
  #user-modal .user-list input[type=checkbox] {
    width: 16px;
    height: 16px;
  }
}

@media screen and (max-width: 1200px) {
  #users_overview .row table {
    border: 0;
    box-shadow: none;
  }
  #users_overview .row table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #users_overview .row table tr {
    border-bottom: 24px solid #eeeeee;
    display: block;
  }
  #users_overview .row table td {
    border-bottom: 1px solid #eeeeee;
    display: block;
    text-align: right;
    min-height: 49px;
  }
  #users_overview .row table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  #users_overview .row table td:last-child {
    border-bottom: 0;
  }
}
@media screen and (max-width: 1200px) {
  #users_overview .row table tbody tr td .row {
    justify-content: flex-end;
  }
  #users_overview .row table tbody tr td .row .col-1 {
    padding: 0;
    width: 28px;
  }
}
#users_overview .row table tbody tr td .form-delete .btn.btn-red {
  color: #FFF;
}
#users_overview .row table tbody tr td .form-delete .btn.btn-red span {
  color: #FFF;
}
@media screen and (max-width: 1200px) {
  #users_overview .row table tbody tr td .form-delete .btn.btn-red {
    margin-left: auto;
  }
}
@media screen and (max-width: 768px) {
  #users_overview .row table tbody tr td .form-delete .btn.btn-red {
    padding: 6px 12px 6px 12px;
  }
  #users_overview .row table tbody tr td .form-delete .btn.btn-red .material-symbols-outlined {
    font-size: 20px;
  }
}

@media screen and (max-width: 576px) {
  #add_user .row .field-item input,
  #add_user .row .field-sub-item input,
  #add_user .row .field-item select,
  #add_user .row .field-sub-item select {
    max-width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #add_user .row #accountlogin_outer_wrapper {
    width: 40%;
  }
}
@media screen and (max-width: 768px) {
  #add_user .row #accountlogin_outer_wrapper {
    width: 50%;
  }
}
@media screen and (max-width: 576px) {
  #add_user .row #accountlogin_outer_wrapper {
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #add_user .row #userdetails_outer_wrapper {
    width: 60%;
  }
}
@media screen and (max-width: 768px) {
  #add_user .row #userdetails_outer_wrapper {
    width: 50%;
  }
}
@media screen and (max-width: 576px) {
  #add_user .row #userdetails_outer_wrapper {
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #add_user .row #userdetails_outer_wrapper .card-body .row > div {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #add_user .row #userdetails_outer_wrapper .card-body .row .field-item {
    row-gap: 6px;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1400px) {
  #add_user #permissionScroller_outer_wrapper {
    overflow: scroll;
  }
  #add_user #permissionScroller_outer_wrapper > div {
    width: 1200px;
  }
}
#add_user #permissionScroller_outer_wrapper .rounded {
  border-radius: 10px;
}
#add_user #permissionScroller_outer_wrapper .border-card-header {
  border-bottom: 0.3em solid white;
}
#add_user #permissionScroller_outer_wrapper .rolcardheaderdiv {
  padding: 5px 24px;
  background: #f5f5f5;
  font-weight: bold;
}
#add_user #permissionScroller_outer_wrapper #permissionScroller {
  overflow: auto;
  height: 500px;
}
#add_user #permissionScroller_outer_wrapper .rolcardpadding {
  padding: 0;
}
#add_user #permissionScroller_outer_wrapper .medewerkerdetailspagedata {
  border-bottom: 1px solid #d9d9d9;
}
#add_user #permissionScroller_outer_wrapper .rolpermissionpageheader {
  background: #f5f5f5;
  padding: 3px 15px;
  --bs-gutter-x: 0;
  box-shadow: 0 2px 4px 0 darkgrey;
  margin-top: 1em;
}
#add_user #permissionScroller_outer_wrapper .rolpermissionpageheader input {
  height: 20px;
  width: 20px;
}
#add_user #permissionScroller_outer_wrapper .rolpermissionpageheader input:after {
  height: 15px !important;
  width: 15px !important;
  background-size: 100% 100%;
}
#add_user #permissionScroller_outer_wrapper .medewerkerrolpermissionpageheader {
  background: #e1e1e1;
  padding: 0 15px;
  --bs-gutter-x: 0;
  box-shadow: 0 2px 4px 0 darkgrey;
  margin-top: 1em;
}
#add_user #permissionScroller_outer_wrapper .rolpermissionpagedata {
  padding: 3px 15px;
  --bs-gutter-x: 0;
}
#add_user #permissionScroller_outer_wrapper .rolpermissionpagedata p {
  margin: 7px 0;
}
#add_user #permissionScroller_outer_wrapper .rolpermissionpagedata input {
  height: 20px;
  width: 20px;
}
#add_user #permissionScroller_outer_wrapper .rolpermissionpagedata input:after {
  height: 15px !important;
  width: 15px !important;
  background-size: 100% 100%;
}

.rating-sterren {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating-sterren .medewerkerStar:hover {
  color: #FF8F00;
}
.rating-sterren .medewerkerStar:hover ~ .medewerkerStar {
  color: #FF8F00;
}
.rating-sterren .medewerkerStar-temp {
  color: goldenrod;
}

.medewerkerStar {
  color: #0277BD;
}
@media screen and (max-width: 768px) {
  .medewerkerStar {
    font-size: 20px;
  }
}

.medewerkerStar-empty {
  color: #858585;
}
@media screen and (max-width: 768px) {
  .medewerkerStar-empty {
    font-size: 20px;
  }
}

@media screen and (max-width: 1200px) {
  #userdetailsform #userdetails .card-body .row > [class^=col-] {
    width: 100%;
  }
}
@media screen and (max-width: 480px) {
  #userdetailsform #userdetails .card-body .row > [class^=col-] .field-item {
    gap: 6px;
    flex-direction: column;
    align-items: flex-start;
  }
}
#userdetailsform #permissionScroller_outer_wrapper {
  padding: 12px 24px;
}

#roleNameAndNotificationList_outer_wrapper .roleNameAndNotificationList .role {
  width: 100%;
  border-bottom: 1px solid #e1e1e1;
}
#roleNameAndNotificationList_outer_wrapper .roleNameAndNotificationList .role h1 {
  text-transform: capitalize;
  font-size: 23px;
  margin: 0;
}
#roleNameAndNotificationList_outer_wrapper .roleNameAndNotificationList .rolePossibleNotificationList {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1em;
}
#roleNameAndNotificationList_outer_wrapper .roleNameAndNotificationList .rolePossibleNotificationList .listgroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 12px;
  width: 100%;
}
#roleNameAndNotificationList_outer_wrapper .roleNameAndNotificationList .rolePossibleNotificationList .listgroup:nth-child(odd) {
  background-color: #eeeeee;
  border-radius: 8px;
}
#roleNameAndNotificationList_outer_wrapper .roleNameAndNotificationList .rolePossibleNotificationList .listgroup h2 {
  width: 100%;
}
#roleNameAndNotificationList_outer_wrapper .roleNameAndNotificationList .rolePossibleNotificationList .listgroup span {
  width: 300px;
  display: block;
}
#roleNameAndNotificationList_outer_wrapper .roleNameAndNotificationList .rolePossibleNotificationList .listgroup div {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}

#webshop-configurator .card h1 {
  margin-bottom: 0.5em;
}
#webshop-configurator .card .list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
#webshop-configurator .card .list .itemGroup {
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  overflow: hidden;
}
#webshop-configurator .card .list .itemGroup .itemGroupHeader {
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
}
#webshop-configurator .card .list .itemGroup .itemGroupHeader h3 {
  padding: 6px;
}
#webshop-configurator .card .list .itemGroup .itemGroupHeader .openChild {
  background-color: #03a9f4;
  color: #fff;
  padding: 6px;
}
#webshop-configurator .card .list .itemGroup .itemGroupHeader .imageWhite,
#webshop-configurator .card .list .itemGroup .itemGroupHeader .imageBlack {
  width: 80px;
  height: 80px;
  max-width: 80px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.3em;
  position: relative;
  background-color: #03a9f4;
  color: #fff;
}
#webshop-configurator .card .list .itemGroup .itemGroupHeader .imageWhite p,
#webshop-configurator .card .list .itemGroup .itemGroupHeader .imageBlack p {
  position: absolute;
  font-weight: bold;
}
#webshop-configurator .card .list .itemGroup .itemGroupHeader .imageWhite input,
#webshop-configurator .card .list .itemGroup .itemGroupHeader .imageBlack input {
  width: 1px;
  height: 1px;
  position: absolute;
}
#webshop-configurator .card .list .itemGroup .itemGroupHeader .imageWhite label,
#webshop-configurator .card .list .itemGroup .itemGroupHeader .imageBlack label {
  display: block;
  margin: auto;
  height: 100%;
  width: 100%;
  z-index: 9999;
}
#webshop-configurator .card .list .itemGroup .itemGroupHeader .imageWhite label span,
#webshop-configurator .card .list .itemGroup .itemGroupHeader .imageBlack label span {
  font-size: 40px;
  display: block;
  margin: auto;
  height: fit-content;
  width: fit-content;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#webshop-configurator .card .list .itemGroup .itemGroupHeader .imageWhite label img,
#webshop-configurator .card .list .itemGroup .itemGroupHeader .imageBlack label img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #fff;
  box-shadow: 0 0 4px 0 #d5d5d5;
}
#webshop-configurator .card .list .itemGroup .itemGroupHeader .imageWhite label:hover,
#webshop-configurator .card .list .itemGroup .itemGroupHeader .imageBlack label:hover {
  background-color: rgb(45.5748987854, 188.0526315789, 252.4251012146);
  color: #fff !important;
  cursor: pointer !important;
}
#webshop-configurator .card .list .itemGroup .itemGroupHeader:hover {
  background-color: aliceblue;
}
#webshop-configurator .card .list .itemGroup .itemGroupData {
  background-color: #f4f4f4;
  display: none;
}
#webshop-configurator .card .list .itemGroup .itemGroupData .item {
  padding: 0.3em;
}
#webshop-configurator .card .list > .itemGroup {
  box-shadow: 0 0 4px 0 #e1e1e1;
  border-radius: 6px;
}
#webshop-configurator .card .list > .itemGroup > .itemGroupData {
  border-left: 10px solid #03a9f4;
}
#webshop-configurator .card .list > .itemGroup > .itemGroupData .itemGroup .itemGroupData {
  border-left: 10px solid #981BFF;
}
#webshop-configurator .card .list > .itemGroup > .itemGroupData .itemGroup .itemGroupData .itemGroup .itemGroupData {
  border-left: 10px solid #c11111;
}
#webshop-configurator .card .list > .itemGroup > .itemGroupData .itemGroup .itemGroupData .itemGroup .itemGroupData .itemGroup .itemGroupData {
  border-left: 10px solid #202533;
}
#webshop-configurator .select2-container {
  height: 36px;
  border-radius: 4px;
  width: 100% !important;
  padding: 0 12px 0 0;
}
#webshop-configurator .select2-container .select2-selection {
  border-radius: 4px;
  border-color: #e1e1e1;
  padding: 0 !important;
  height: 100%;
  display: block;
}
#webshop-configurator .select2-container .select2-selection .select2-selection__rendered .select2-selection__choice {
  border: 1px solid rgb(2.3805668016, 134.1052631579, 193.6194331984);
  background-color: #03a9f4;
  color: #fff;
  font-weight: bold;
}
#webshop-configurator .select2-container .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
  height: 100%;
  border-right: 1px solid rgb(2.3805668016, 134.1052631579, 193.6194331984);
}
#webshop-configurator .select2-container .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
  background-color: rgb(45.5748987854, 188.0526315789, 252.4251012146);
}
#webshop-configurator .select2-container .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span {
  height: fit-content;
  display: block;
  color: #fff;
  margin-top: 1px;
}
#webshop-configurator .select2-container .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove span:hover {
  background-color: rgb(45.5748987854, 188.0526315789, 252.4251012146);
}
#webshop-configurator .select2-container .select2-selection .select2-selection__rendered .select2-selection__choice .select2-selection__choice__display {
  height: 100%;
  display: block;
}
#webshop-configurator .select2-container .select2-selection .select2-search--inline {
  display: inline-block;
}
#webshop-configurator .select2-container .select2-selection .select2-search--inline .select2-search__field {
  display: inline-block;
  margin: 0;
  margin-left: 0.5em;
  vertical-align: text-top;
}

@media screen and (max-width: 1200px) {
  #settings-verkoop > div {
    width: 50%;
  }
}
@media screen and (max-width: 576px) {
  #settings-verkoop > div {
    width: 100%;
  }
}
#settings-verkoop .servicelabel {
  min-width: 100%;
  color: #858585;
}

@media screen and (max-width: 1200px) {
  #logbook .row #logs table {
    border: 0;
    box-shadow: none;
  }
  #logbook .row #logs table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #logbook .row #logs table tr {
    border-bottom: 24px solid #eeeeee;
    display: block;
  }
  #logbook .row #logs table td {
    border-bottom: 1px solid #eeeeee;
    display: block;
    text-align: right;
    min-height: 49px;
  }
  #logbook .row #logs table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  #logbook .row #logs table td:last-child {
    border-bottom: 0;
  }
}

@media screen and (max-width: 1400px) {
  #rolesEdit #permissionScroller_outer_wrapper,
  #rolesAdd #permissionScroller_outer_wrapper,
  #USERS #permissionScroller_outer_wrapper,
  #userdetailsform #permissionScroller_outer_wrapper,
  .update-user #permissionScroller_outer_wrapper {
    overflow: scroll;
  }
  #rolesEdit #permissionScroller_outer_wrapper > div,
  #rolesAdd #permissionScroller_outer_wrapper > div,
  #USERS #permissionScroller_outer_wrapper > div,
  #userdetailsform #permissionScroller_outer_wrapper > div,
  .update-user #permissionScroller_outer_wrapper > div {
    width: 1200px;
  }
}
#rolesEdit #permissionScroller_outer_wrapper .rounded,
#rolesAdd #permissionScroller_outer_wrapper .rounded,
#USERS #permissionScroller_outer_wrapper .rounded,
#userdetailsform #permissionScroller_outer_wrapper .rounded,
.update-user #permissionScroller_outer_wrapper .rounded {
  border-radius: 10px;
}
#rolesEdit #permissionScroller_outer_wrapper .border-card-header,
#rolesAdd #permissionScroller_outer_wrapper .border-card-header,
#USERS #permissionScroller_outer_wrapper .border-card-header,
#userdetailsform #permissionScroller_outer_wrapper .border-card-header,
.update-user #permissionScroller_outer_wrapper .border-card-header {
  border-bottom: 0.3em solid white;
}
#rolesEdit #permissionScroller_outer_wrapper .rolcardheaderdiv,
#rolesAdd #permissionScroller_outer_wrapper .rolcardheaderdiv,
#USERS #permissionScroller_outer_wrapper .rolcardheaderdiv,
#userdetailsform #permissionScroller_outer_wrapper .rolcardheaderdiv,
.update-user #permissionScroller_outer_wrapper .rolcardheaderdiv {
  padding: 5px 24px;
  background: #f5f5f5;
  font-weight: bold;
}
#rolesEdit #permissionScroller_outer_wrapper #permissionScroller,
#rolesAdd #permissionScroller_outer_wrapper #permissionScroller,
#USERS #permissionScroller_outer_wrapper #permissionScroller,
#userdetailsform #permissionScroller_outer_wrapper #permissionScroller,
.update-user #permissionScroller_outer_wrapper #permissionScroller {
  overflow: auto;
  height: 500px;
}
#rolesEdit #permissionScroller_outer_wrapper .rolcardpadding,
#rolesAdd #permissionScroller_outer_wrapper .rolcardpadding,
#USERS #permissionScroller_outer_wrapper .rolcardpadding,
#userdetailsform #permissionScroller_outer_wrapper .rolcardpadding,
.update-user #permissionScroller_outer_wrapper .rolcardpadding {
  padding: 0;
}
#rolesEdit #permissionScroller_outer_wrapper .medewerkerdetailspagedata,
#rolesAdd #permissionScroller_outer_wrapper .medewerkerdetailspagedata,
#USERS #permissionScroller_outer_wrapper .medewerkerdetailspagedata,
#userdetailsform #permissionScroller_outer_wrapper .medewerkerdetailspagedata,
.update-user #permissionScroller_outer_wrapper .medewerkerdetailspagedata {
  border-bottom: 1px solid #d9d9d9;
}
#rolesEdit #permissionScroller_outer_wrapper .rolpermissionpageheader,
#rolesAdd #permissionScroller_outer_wrapper .rolpermissionpageheader,
#USERS #permissionScroller_outer_wrapper .rolpermissionpageheader,
#userdetailsform #permissionScroller_outer_wrapper .rolpermissionpageheader,
.update-user #permissionScroller_outer_wrapper .rolpermissionpageheader {
  background: #f5f5f5;
  padding: 3px 15px;
  --bs-gutter-x: 0;
  box-shadow: 0 2px 4px 0 darkgrey;
  margin-top: 1em;
}
#rolesEdit #permissionScroller_outer_wrapper .rolpermissionpageheader input,
#rolesAdd #permissionScroller_outer_wrapper .rolpermissionpageheader input,
#USERS #permissionScroller_outer_wrapper .rolpermissionpageheader input,
#userdetailsform #permissionScroller_outer_wrapper .rolpermissionpageheader input,
.update-user #permissionScroller_outer_wrapper .rolpermissionpageheader input {
  height: 20px;
  width: 20px;
}
#rolesEdit #permissionScroller_outer_wrapper .rolpermissionpageheader input:after,
#rolesAdd #permissionScroller_outer_wrapper .rolpermissionpageheader input:after,
#USERS #permissionScroller_outer_wrapper .rolpermissionpageheader input:after,
#userdetailsform #permissionScroller_outer_wrapper .rolpermissionpageheader input:after,
.update-user #permissionScroller_outer_wrapper .rolpermissionpageheader input:after {
  height: 15px !important;
  width: 15px !important;
  background-size: 100% 100%;
}
#rolesEdit #permissionScroller_outer_wrapper .medewerkerrolpermissionpageheader,
#rolesAdd #permissionScroller_outer_wrapper .medewerkerrolpermissionpageheader,
#USERS #permissionScroller_outer_wrapper .medewerkerrolpermissionpageheader,
#userdetailsform #permissionScroller_outer_wrapper .medewerkerrolpermissionpageheader,
.update-user #permissionScroller_outer_wrapper .medewerkerrolpermissionpageheader {
  background: #e1e1e1;
  padding: 0 15px;
  --bs-gutter-x: 0;
  box-shadow: 0 2px 4px 0 darkgrey;
  margin-top: 1em;
}
#rolesEdit #permissionScroller_outer_wrapper .rolpermissionpagedata,
#rolesAdd #permissionScroller_outer_wrapper .rolpermissionpagedata,
#USERS #permissionScroller_outer_wrapper .rolpermissionpagedata,
#userdetailsform #permissionScroller_outer_wrapper .rolpermissionpagedata,
.update-user #permissionScroller_outer_wrapper .rolpermissionpagedata {
  padding: 3px 15px;
  --bs-gutter-x: 0;
}
#rolesEdit #permissionScroller_outer_wrapper .rolpermissionpagedata p,
#rolesAdd #permissionScroller_outer_wrapper .rolpermissionpagedata p,
#USERS #permissionScroller_outer_wrapper .rolpermissionpagedata p,
#userdetailsform #permissionScroller_outer_wrapper .rolpermissionpagedata p,
.update-user #permissionScroller_outer_wrapper .rolpermissionpagedata p {
  margin: 7px 0;
}
#rolesEdit #permissionScroller_outer_wrapper .rolpermissionpagedata input,
#rolesAdd #permissionScroller_outer_wrapper .rolpermissionpagedata input,
#USERS #permissionScroller_outer_wrapper .rolpermissionpagedata input,
#userdetailsform #permissionScroller_outer_wrapper .rolpermissionpagedata input,
.update-user #permissionScroller_outer_wrapper .rolpermissionpagedata input {
  height: 20px;
  width: 20px;
}
#rolesEdit #permissionScroller_outer_wrapper .rolpermissionpagedata input:after,
#rolesAdd #permissionScroller_outer_wrapper .rolpermissionpagedata input:after,
#USERS #permissionScroller_outer_wrapper .rolpermissionpagedata input:after,
#userdetailsform #permissionScroller_outer_wrapper .rolpermissionpagedata input:after,
.update-user #permissionScroller_outer_wrapper .rolpermissionpagedata input:after {
  height: 15px !important;
  width: 15px !important;
  background-size: 100% 100%;
}

@media screen and (max-width: 768px) {
  #charts_wrapper .row .col-4 {
    width: 100%;
  }
}

@media screen and (max-width: 1400px) {
  #charts_wrapper .row .col-6,
  #customers_dashboard .row .col-6 {
    width: 100%;
  }
}
@media screen and (max-width: 1200px) {
  #charts_wrapper .row .col-4,
  #customers_dashboard .row .col-4 {
    width: 50%;
  }
}
@media screen and (max-width: 576px) {
  #charts_wrapper .row .col-4,
  #customers_dashboard .row .col-4 {
    width: 100%;
  }
}

.card {
  background-color: #fff;
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  font-family: "Open Sans", sans-serif;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}
.card.bg-succes {
  background-color: #B9F6CA;
  color: #00C853;
}
.card.bg-error {
  background-color: #FF8A80;
  color: #D50000;
}
.card .card-btn-setting {
  right: 12px;
  top: 12px;
}
.card .card-btn-setting select {
  cursor: pointer;
  background-color: #eeeeee;
  color: #000;
  padding: 6px 12px;
  border-radius: 4px;
  background-color: #FFF;
}
.card .card-heading {
  margin-bottom: 30px;
}
.card .card-heading .main-heading {
  font-size: 65px;
  font-weight: 600;
  line-height: 1;
  padding-bottom: 12px;
}
.card .card-heading .heading {
  color: #202533;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 0.5em;
}
.card .card-heading .description {
  color: #858585;
  font-size: 14px;
}
.card .card-heading.row {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
}
.card .card-body {
  column-gap: 24px;
}
.card .card-body progress {
  width: 100%;
  overflow: hidden;
  border-radius: 50px;
  display: flex;
  margin-bottom: 6px;
  height: 9px;
}
.card .card-body .sub-text {
  color: #858585;
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 14px;
}
.card .card-body .sub-text .number {
  color: #202533;
  font-weight: 600;
}
.card .card-body.row {
  flex-direction: row;
  flex-wrap: wrap;
}
.card .card-body .image-grid {
  display: flex;
  column-gap: 24px;
  row-gap: 24px;
  flex-wrap: wrap;
}
.card .card-body .image-thumb {
  display: flex;
  width: 88px;
  height: 88px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
}
.card .card-body .image-thumb .image-container {
  display: flex;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
}
.card .card-body.overflow {
  display: flex;
  max-height: 210px;
  height: 210px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.card .setting-tab {
  font-family: "Open Sans", sans-serif;
  box-shadow: 0px 0px 26px -6px rgba(0, 0, 0, 0.25);
  right: 24px;
  top: 36px;
  padding: 12px;
  border-radius: 10px;
  min-width: 150px;
  background-color: #fff;
}
.card .setting-tab .heading {
  font-size: 14px;
  color: #858585;
}
.card .setting-tab hr {
  border: 1px solid #eeeeee;
}
.card .setting-tab .settings-body .settings-item {
  padding-bottom: 6px;
  display: flex;
  flex-direction: column;
}

.card-sm {
  width: 25%;
  max-width: 25%;
}

.card-md {
  width: 30%;
  max-width: 30%;
}

.card-two-third {
  width: 60%;
  max-width: 60%;
}

.card-lg {
  width: 50%;
  max-width: 50%;
}
.card-lg .table-sub-item .field-item {
  margin-bottom: 0px;
}

.card-message {
  width: 100%;
  max-width: 100%;
  padding: 15px 10px;
  font-weight: bold;
  position: absolute;
  z-index: 99;
}

.card-full {
  width: 100%;
  max-width: 100%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  min-height: 210px;
}
.card-full .card-header {
  background-color: rgba(238, 238, 238, 0.5);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  column-gap: 12px;
}
.card-full .card-header .table-heading {
  padding-top: 26px;
  padding-bottom: 26px;
  width: 185px;
}
.card-full .card-header .tablefiltericon {
  cursor: pointer;
}
.card-full .card-header .checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 25px;
  padding-right: 25px;
}
.card-full .card-header .checkbox input {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  height: 15px;
  width: 15px;
  border: 1px solid #bebebe;
  border-radius: 3px;
  cursor: pointer;
}
.card-full .card-header .checkbox input.checked:after {
  content: "";
  display: flex;
  background-image: url("../images/check.svg");
  background-size: 15px;
  width: 15px;
  height: 15px;
}
.card-full .card-header .checkbox input:hover {
  background-color: #03a9f4;
}
.card-full .card-body {
  display: flex;
  flex-direction: column;
}
.card-full .card-body .table-item {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 25px;
  padding-top: 25px;
  display: flex;
  width: 100%;
  column-gap: 12px;
}
.card-full .card-body .table-item .table-sub-item {
  align-items: center;
  display: block;
  width: 175px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-full .card-body .table-item .table-sub-item .field-item {
  margin-bottom: 0px;
}
.card-full .card-body .table-item .table-sub-item .btn {
  width: 120px;
  justify-content: center;
}
.card-full .card-body .table-item .checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 25px;
  padding-right: 25px;
}
.card-full .card-body .table-item .checkbox input {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  height: 15px;
  width: 15px;
  border: 1px solid #bebebe;
  border-radius: 3px;
  cursor: pointer;
}
.card-full .card-body .table-item .checkbox input.checked:after {
  content: "";
  display: flex;
  background-image: url("../images/check.svg");
  background-size: 15px;
  width: 15px;
  height: 15px;
}
.card-full .card-body .table-item .checkbox input:hover {
  background-color: #03a9f4;
}

.comments {
  height: 240px;
  position: relative;
}
.comments ::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.comments ::-webkit-scrollbar-thumb {
  background-color: #202533;
  width: 6px;
  border-radius: 6px;
}
.comments .card-body {
  overflow-y: scroll;
  margin: 0 -24px;
  padding: 0 24px;
  height: 120px;
}
.comments .comment-container {
  background: #eeeeee;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.comments .comment-container.active .form-comment-update {
  display: flex;
  flex-direction: column;
}
.comments .comment-container.active .text-wrapper {
  display: none;
}
.comments .comment-container .form-comment-update {
  display: none;
}
.comments .comment-container .form-comment-update textarea {
  padding: 5px;
}
.comments .comment-container .text-wrapper {
  display: block;
}
.comments .btn-blue {
  display: block;
  margin-left: auto;
}
.comments .title-wrapper {
  color: #858585;
  position: relative;
}
.comments .title-wrapper span {
  position: absolute;
  right: 0;
  top: 0;
  color: #000;
}
.comments .title-wrapper span:hover {
  cursor: pointer;
  color: #03a9f4;
}
.comments .card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 74px;
  margin: 0;
  display: flex;
}
.comments .card-footer .comment-add-container {
  width: 100%;
}
.comments .card-footer .comment-add-container .material-symbols-outlined {
  color: #fff;
}
.comments .card-footer #form-comments {
  height: 100%;
}
.comments .card-footer textarea {
  height: 100%;
  border-radius: 0;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 5px;
}
.comments .card-footer button {
  position: absolute;
  right: 0;
  bottom: 0;
}

#searchEngine {
  cursor: pointer;
}
#searchEngine:hover {
  color: #03a9f4;
}

#searchEnginePopup {
  width: 100vw;
  width: 100lvw;
  height: 100vh;
  height: 100lvh;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  top: 0;
}
#searchEnginePopup #searchEngine {
  width: 80vw;
  width: 80lvw;
  margin: auto;
  height: 80vh;
  height: 80lvh;
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #000;
}
#searchEnginePopup #searchEngine #searchEngineHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
#searchEnginePopup #searchEngine #searchEngineHeader #searchbar {
  display: block;
  width: 100%;
}
#searchEnginePopup #searchEngine #searchEngineHeader #searchbar input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  color: #000;
}
#searchEnginePopup #searchEngine #searchEngineHeader #closeSearchEnginePopup {
  background-color: #e1e1e1;
  color: #000;
  height: fit-content;
  width: fit-content;
  padding: 11px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
#searchEnginePopup #searchEngine #searchEngineHeader #closeSearchEnginePopup:hover {
  background-color: #D50000;
  color: #fff;
}
#searchEnginePopup #searchEngine #searchEngineData {
  overflow: hidden;
}
#searchEnginePopup #searchEngine #searchEngineData #searchresults {
  height: calc(80lvh - 46px - 1em);
  background-color: #FFF;
  margin-top: 1em;
  border-radius: 6px;
  overflow: auto;
  overflow-x: hidden;
}
#searchEnginePopup #searchEngine #searchEngineData #searchresults h2 {
  padding: 6px;
  font-size: 24px;
  background-color: aliceblue;
}
#searchEnginePopup #searchEngine #searchEngineData #searchresults .row .col-12 {
  padding-top: 0px;
  padding-bottom: 0px;
}
#searchEnginePopup #searchEngine #searchEngineData #searchresults .row .col-12 > div {
  padding: 8px 12px;
}
#searchEnginePopup #searchEngine #searchEngineData #searchresults .row .col-12 > div p {
  width: 20%;
}
#searchEnginePopup #searchEngine #searchEngineData #searchresults .row .col-12 img {
  height: 70px;
}
#searchEnginePopup #searchEngine #searchEngineData #searchresults .row .col-12 .result {
  padding: 12px;
}
#searchEnginePopup #searchEngine #searchEngineData #searchresults .row .col-12 :hover {
  background-color: rgb(211.65, 211.65, 211.65);
}
#searchEnginePopup #searchEngine #searchEngineData #searchresults .row:nth-child(even) {
  background-color: #e5e5e5;
}
#searchEnginePopup #searchEngine #searchEngineData #searchresults .row:nth-child(even) :hover {
  background-color: rgb(185.65, 185.65, 185.65);
}

#emails {
  position: relative;
}
#emails #toggleInboxMenu {
  display: none;
  font-size: 50px;
  top: 0;
  right: -50px;
  position: fixed;
  background-color: #03a9f4;
  height: 50px;
  color: #FFF;
  align-items: center;
}
@media screen and (max-width: 1200px) {
  #emails #toggleInboxMenu {
    display: flex;
  }
}
#emails #email-menu {
  backdrop-filter: blur(50px);
  background-color: rgba(255, 255, 255, 0.65);
}
@media screen and (max-width: 1200px) {
  #emails #email-menu {
    position: absolute;
    z-index: 9999;
    top: 0px;
    left: -300px;
    width: 300px;
    transition: all 0.7s;
  }
  #emails #email-menu.open {
    left: 0;
    transition: all 0.7s;
  }
}
#emails #email-menu #email-menu-content {
  height: calc(100vh - 73px);
  max-height: calc(100vh - 73px);
  min-height: calc(100vh - 73px);
  padding: 0px 24px;
  overflow: auto;
}
#emails #email-menu #email-menu-content .email-menu-item {
  padding: 12px 0;
}
#emails #email-menu #email-menu-content .email-menu-item .emailMenuHeader {
  cursor: pointer;
}
#emails #email-menu #email-menu-content .email-menu-item p {
  padding: 0;
  color: #000;
  font-weight: bold;
  width: 100%;
}
#emails #email-menu #email-menu-content .email-menu-item .submenu {
  padding-left: 24px;
}
#emails #email-menu #email-menu-content .email-menu-item .submenu .submenuDiv .submenuText {
  position: relative;
  padding: 4px 12px;
  color: #000;
  font-weight: 500;
}
#emails #email-menu #email-menu-content .email-menu-item .submenu .submenuDiv .submenuText p {
  z-index: 9;
  position: relative;
  font-weight: 500;
  margin: 0;
}
#emails #email-menu #email-menu-content .email-menu-item .submenu .submenuDiv .submenuText.active {
  border-radius: 4px;
  color: #000;
}
#emails #email-menu #email-menu-content .email-menu-item .submenu .submenuDiv .submenuText.active p {
  font-weight: bold;
}
#emails #email-menu #email-menu-content .email-menu-item .submenu .submenuDiv .submenuText.active:before {
  content: "";
  position: absolute;
  width: calc(100% + 24px);
  background-color: rgb(181.6024291498, 231.5368421053, 254.0975708502);
  display: block;
  height: 24px;
  left: -24px;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 4px;
}
#emails #email-menu #email-menu-content .email-menu-item .submenu .submenuDiv .submenuText:hover {
  border-radius: 4px;
  cursor: pointer;
}
#emails #email-menu #email-menu-content .email-menu-item .submenu .submenuDiv .submenuText:hover:after {
  content: "";
  position: absolute;
  width: calc(100% + 24px);
  background-color: rgb(221.9068825911, 244.4210526316, 254.5931174089);
  display: block;
  height: 24px;
  left: -24px;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 4px;
}

#emails #email-inbox {
  height: calc(100vh - 73px);
  max-height: calc(100vh - 73px);
  min-height: calc(100vh - 73px);
  background-color: #F5F5F5;
  width: 100%;
  overflow: auto;
  position: relative;
}
#emails #email-inbox .emails {
  padding: 12px;
  padding-bottom: 36px;
  width: 100%;
}
#emails #email-inbox .emails .email {
  padding: 12px;
  background-color: #FFF;
  margin-bottom: 0.5em;
  border-radius: 4px;
}
#emails #email-inbox .emails .email .readStatus {
  color: #03a9f4;
  font-size: 19px;
  margin-top: 1px;
}
#emails #email-inbox .emails .email .HNA,
#emails #email-inbox .emails .email .HNO {
  color: #e1e1e1;
}
#emails #email-inbox .emails .email .HO {
  color: #03a9f4;
}
#emails #email-inbox .emails .email p {
  text-align: left;
}
#emails #email-inbox .emails .email .email-from {
  width: 350px;
  overflow: hidden;
  text-wrap-mode: nowrap;
  text-overflow: ellipsis;
}
#emails #email-inbox .emails .email .email-subject {
  width: 100%;
  padding-right: 24px;
}
#emails #email-inbox .emails .email .email-date {
  width: 200px;
}
#emails #email-inbox .emails .email .email-link {
  height: 24px;
}
#emails #email-inbox .emails .email .deleteEmail {
  color: #d72323;
}
#emails #email-inbox .emails .email .deleteEmail:hover {
  color: rgb(106, 7, 7);
  cursor: pointer;
}
#emails #email-inbox .emails .email:hover {
  background-color: rgb(247.0971659919, 252.4736842105, 254.9028340081);
}
#emails #email-inbox .emails .email.ui-draggable-dragging {
  background: #b6e8fe;
  padding: 0;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background-color: #000;
  box-shadow: 0 0 4px 0 #e1e1e1;
}
#emails #email-inbox .emails .email.ui-draggable-dragging:after {
  content: "\e158";
  font-family: "Material Icons";
  font-size: 30px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  color: #03a9f4;
  background-color: #FFF;
  text-align: center;
  width: 40px;
}
#emails #email-inbox .pagination-container {
  position: fixed;
  bottom: 0;
  right: 12px;
  width: 100%;
  background-color: #FFFFFF;
  padding: 6px 0px;
  flex: 0 0 auto;
  width: calc(83.33333333% - 18px);
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
#emails #email-inbox #reOrderFields {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  z-index: 9;
  width: 130px;
  row-gap: 12px;
}
@media screen and (max-width: 992px) {
  #emails #email-inbox #reOrderFields {
    font-size: 14px;
  }
}
#emails #email-inbox #reOrderFields .reOrderField {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 9;
  position: relative;
  width: 100%;
  height: 100%/5;
  border: 2px dashed #e1e1e1;
  padding: 6px;
}
#emails #email-inbox #reOrderFields .reOrderField.online {
  border-color: #149bd7;
}
#emails #email-inbox #reOrderFields .reOrderField.outlet {
  border-color: #e30613;
}
#emails #email-inbox #reOrderFields .reOrderField.partner {
  border-color: #ef7e54;
}
#emails #email-inbox #reOrderFields .reOrderField.loods {
  border-color: #9bc8dd;
}
#emails #email-inbox #reOrderFields .reOrderField.djk {
  border-color: #03a9f4;
}
#emails #email-inbox #reOrderFields .reOrderField .folder {
  background-color: #FFF;
  position: relative;
  z-index: 2;
  padding: 2px 6px;
  box-shadow: 0 0 4px 0 #e1e1e1;
}
#emails #email-inbox #reOrderFields .reOrderField img {
  position: absolute;
  object-fit: contain;
  width: 100%;
  height: 100%;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0.5;
}
@media screen and (max-width: 768px) {
  #emails #email-inbox .emails {
    font-size: 14px;
  }
}
@media screen and (max-width: 576px) {
  #emails #email-inbox .emails .email {
    flex-wrap: wrap;
  }
  #emails #email-inbox .emails .email .email-from,
  #emails #email-inbox .emails .email .email-subject {
    flex: calc(50% - 40px);
  }
}
#emails #email-inbox .emails.reOrderEnabled {
  width: calc(100% - 130px);
  margin-left: auto;
}
@media screen and (max-width: 992px) {
  #emails #email-inbox .emails.reOrderEnabled .email-subject {
    width: 500px;
    overflow: hidden;
    text-wrap-mode: nowrap;
    text-overflow: ellipsis;
  }
}
#emails .drop-hover {
  background: #5c5c5c;
}
#emails .drop-hover.online {
  background: #149bd7 !important;
  color: #FFF;
}
#emails .drop-hover.outlet {
  background: #e30613 !important;
  color: #FFF;
}
#emails .drop-hover.partner {
  background: #ef7e54 !important;
  color: #000;
}
#emails .drop-hover.loods {
  background: #9bc8dd !important;
  color: #000;
}
#emails .drop-hover.djk {
  background: #03a9f4 !important;
  color: #FFF;
}
#emails .ui-draggable-dragging {
  z-index: 9999 !important;
}
@media screen and (max-width: 1200px) {
  #emails .col-10 {
    width: 100%;
  }
}

#emails #newEmailGroup {
  position: absolute;
  top: 140px;
  right: 4px;
  z-index: 99999;
}
#emails #newEmailGroup #newEmailIconDiv {
  display: flex;
  align-items: center;
  width: fit-content;
  height: 40px;
  border-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  justify-content: flex-end;
  background-color: #03a9f4;
  color: #FFF;
}
#emails #newEmailGroup #newEmailIconDiv:hover {
  background-color: rgb(35.4987854251, 184.8315789474, 252.3012145749);
  color: #FFF;
  cursor: pointer;
}
#emails #newEmailGroup #newEmailIconDiv.active {
  background-color: rgb(35.4987854251, 184.8315789474, 252.3012145749);
  color: #FFF;
}
#emails #newEmailGroup #newEmailIconDiv #newEmailIcon {
  font-size: 40px;
  display: block;
  width: fit-content;
  height: fit-content;
}
#emails #newEmailGroup #newEmailDiv {
  background: #f5f5f5;
  box-shadow: 2px 2px 4px 0 #a3a3a3;
  padding: 0px 12px;
  margin-bottom: 24px;
}
@media screen and (max-width: 1200px) {
  #emails #newEmailGroup #newEmailDiv .col-8,
  #emails #newEmailGroup #newEmailDiv .col-4 {
    width: 100%;
  }
}
#emails #newEmailGroup #newEmailDiv #sendEmail {
  margin-top: 42px;
}
@media screen and (max-width: 1200px) {
  #emails #newEmailGroup #newEmailDiv #sendEmail {
    position: absolute;
    bottom: 12px;
    left: 12px;
  }
}
@media screen and (max-width: 1200px) {
  #emails #newEmailGroup #newEmailDiv > .row {
    position: relative;
    padding-bottom: 55px;
  }
}
#emails #newEmailGroup #newEmailDiv .tox-tinymce {
  visibility: hidden;
  min-height: 375px !important;
  height: 375px !important;
  max-height: 100%;
}
#emails #newEmailGroup #newEmailDiv input {
  margin: 0;
}
#emails #newEmailGroup #newEmailDiv #attachmentsUpload {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 12px;
  gap: 0.5em;
}
@media screen and (max-width: 1200px) {
  #emails #newEmailGroup #newEmailDiv #attachmentsUpload {
    padding: 0;
  }
}
#emails #newEmailGroup #newEmailDiv #attachmentsUpload .attachment {
  width: calc(50% - 4px);
  border-radius: 4px;
  overflow: hidden;
}
#emails #newEmailGroup #newEmailDiv #attachmentsUpload .attachment label {
  background-color: #03a9f4;
  color: white;
  display: block;
  width: 100%;
  height: 150px;
  cursor: pointer;
}
#emails #newEmailGroup #newEmailDiv #attachmentsUpload .attachment label .material-symbols-outlined {
  padding: 12px;
  font-size: 120px;
  margin: auto;
  display: block;
  text-align: center;
  height: 100%;
}
#emails #newEmailGroup #newEmailDiv #attachmentsUpload .attachment label img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
#emails #filtersDiv {
  position: absolute;
  top: 36px;
  right: 0px;
  z-index: 99999;
}
#emails #filtersDiv #filters {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 0em;
}
#emails #filtersDiv #filters .filterIconsDiv {
  display: flex;
  align-items: center;
  width: fit-content;
  border-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  justify-content: flex-end;
  background-color: #03a9f4;
  color: #FFF;
}
#emails #filtersDiv #filters .filterIconsDiv:hover {
  background-color: rgb(35.4987854251, 184.8315789474, 252.3012145749);
  color: #FFF;
  cursor: pointer;
}
#emails #filtersDiv #filters .filterIconsDiv.active {
  background-color: rgb(35.4987854251, 184.8315789474, 252.3012145749);
  color: #FFF;
}
#emails #filtersDiv #filters .filterIconsDiv #filtersIcon {
  font-size: 40px;
  display: block;
  width: fit-content;
  height: fit-content;
}
#emails #filtersDiv #filters .filterButtonsDiv {
  display: flex;
  gap: 1em;
  width: 1024px;
  background: #f5f5f5;
  box-shadow: 2px 2px 4px 0 #a3a3a3;
  padding: 6px 6px;
}
@media screen and (max-width: 1200px) {
  #emails #filtersDiv #filters .filterButtonsDiv {
    flex-direction: column;
    width: 600px;
    padding-right: 14px;
  }
}
@media screen and (max-width: 768px) {
  #emails #filtersDiv #filters .filterButtonsDiv {
    width: 395px;
  }
  #emails #filtersDiv #filters .filterButtonsDiv input {
    font-size: 14px;
  }
}
#emails #filtersDiv #filters .filterButtonsDiv .tri-state-toggle {
  display: flex;
  justify-content: center;
  border: 2px solid #03a9f4;
  border-radius: 4px;
  width: fit-content;
  height: 35px;
  margin: auto;
}
@media screen and (max-width: 1200px) {
  #emails #filtersDiv #filters .filterButtonsDiv .tri-state-toggle {
    margin-left: auto;
    margin-right: unset;
    order: -1;
    margin-top: 12px;
  }
}
#emails #filtersDiv #filters .filterButtonsDiv .tri-state-toggle .fakeButton,
#emails #filtersDiv #filters .filterButtonsDiv .tri-state-toggle .fakeButton2 {
  height: 31px;
  width: 120px;
  appearance: none;
  background-color: #FFF;
  color: #000;
  cursor: pointer;
}
#emails #filtersDiv #filters .filterButtonsDiv .tri-state-toggle .fakeButton input,
#emails #filtersDiv #filters .filterButtonsDiv .tri-state-toggle .fakeButton2 input {
  visibility: hidden;
}
#emails #filtersDiv #filters .filterButtonsDiv .tri-state-toggle .fakeButton span,
#emails #filtersDiv #filters .filterButtonsDiv .tri-state-toggle .fakeButton2 span {
  text-align: center;
  margin: auto;
  display: block;
  height: 100%;
  line-height: 30px;
}
@media screen and (max-width: 768px) {
  #emails #filtersDiv #filters .filterButtonsDiv .tri-state-toggle .fakeButton span,
  #emails #filtersDiv #filters .filterButtonsDiv .tri-state-toggle .fakeButton2 span {
    font-size: 14px;
  }
}
#emails #filtersDiv #filters .filterButtonsDiv .tri-state-toggle .fakeButton.active,
#emails #filtersDiv #filters .filterButtonsDiv .tri-state-toggle .fakeButton2.active {
  background-color: #03a9f4;
  color: #FFF;
}

#emails {
  /* width */
}
#emails ::-webkit-scrollbar {
  width: 3px;
}
#emails {
  /* Track */
}
#emails ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #F5F5F5;
  border-radius: 4px;
}
#emails {
  /* Handle */
}
#emails ::-webkit-scrollbar-thumb {
  background: #03a9f4;
  border-radius: 4px;
}

#emails-parent {
  min-height: 300px;
  margin-top: 0.7em;
}
#emails-parent #email-inbox {
  min-height: 300px;
}
#emails-parent #email-inbox .card-heading {
  margin-bottom: 24px;
}
#emails-parent #email-inbox .all-emails .email-tab-content {
  display: none;
}
#emails-parent #email-inbox .all-emails .email-tab-content.active {
  display: block;
}
#emails-parent #email-inbox .all-emails .email-tab-content .emailcard {
  padding: 12px;
}
#emails-parent #email-inbox .all-emails .email-tab-content .emailcard .email {
  gap: 1em;
}
#emails-parent #email-inbox .all-emails .email-tab-content .emailcard .email .sender {
  width: 420px;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}
#emails-parent #email-inbox .all-emails .email-tab-content .emailcard .email .subject {
  width: 100%;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}
#emails-parent #email-inbox .all-emails .email-tab-content .emailcard .email .date {
  width: 250px;
  display: flex;
  align-items: center;
}
#emails-parent #email-inbox .all-emails .email-tab-content .emailcard:nth-child(even) {
  background-color: #f4fcff;
}
#emails-parent #email-inbox .all-emails .email-tab-content .emailcard:hover {
  background-color: #cff0ff;
  cursor: pointer;
}

#singleEmail {
  background: #FFF;
  padding: 24px;
  border-radius: 4px;
}
#singleEmail #optionsheader {
  display: flex;
  padding-bottom: 1em;
  border-bottom: 1px solid #dddddd;
  gap: 24px;
  flex-wrap: wrap;
}
#singleEmail #optionsheader span {
  color: #fff;
}
#singleEmail #optionsheader button {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
#singleEmail #optionsheader #orders {
  height: 42px !important;
  min-height: unset !important;
  font-size: 14px !important;
}
#singleEmail #optionsheader #markAsUnread {
  margin-left: auto;
}
#singleEmail #optionsheader #markAsUnread span {
  color: #fff;
}
#singleEmail #optionsheader #reply span {
  color: #fff;
}
#singleEmail #optionsheader .select2 {
  width: 200px !important;
  height: 100%;
}
#singleEmail #optionsheader .select2 .select2-selection {
  height: 100%;
  display: flex;
  align-items: center;
}
#singleEmail #optionsheader .select2 .select2-selection__arrow {
  top: 0;
  bottom: 0;
  margin: auto;
}
#singleEmail #emailcontent {
  padding-right: 12px;
}
@media screen and (max-width: 1200px) {
  #singleEmail .col-8 {
    width: 100%;
  }
}
@media screen and (max-width: 1200px) {
  #singleEmail .col-4 {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  #singleEmail .col-4 {
    width: 100%;
  }
}
#singleEmail #emailphotos {
  border-left: 1px solid #dddddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 0 12px;
}
#singleEmail #emailphotos .imgcontainer {
  width: 32%;
  height: 100%;
  box-shadow: 0 0 5px 0 #c1c1c1;
  margin-bottom: 0.5em;
  overflow: hidden;
  border-radius: 4px;
}
@media screen and (max-width: 1400px) {
  #singleEmail #emailphotos .imgcontainer {
    width: 49%;
  }
}
#singleEmail #emailphotos .imgcontainer img {
  margin: auto;
  width: 100%;
  height: 200px;
  object-fit: contain;
}
#singleEmail #emailphotos .imgcontainer img:hover {
  cursor: pointer;
  transform: scale(1.1);
}

#searchEmailsDiv #searchResults a:nth-child(even) {
  background-color: #f3f3f3;
}

#emailResponse #response {
  height: auto;
}

#emailResponse .tox-tinymce,
#makeNewEmailFormOrder .tox-tinymce,
#makeNewEmailForm .tox-tinymce {
  visibility: hidden;
  min-height: 375px !important;
  height: 375px !important;
  max-height: 100%;
}
#emailResponse input,
#makeNewEmailFormOrder input,
#makeNewEmailForm input {
  margin: 0;
}
#emailResponse #attachmentsUpload,
#makeNewEmailFormOrder #attachmentsUpload,
#makeNewEmailForm #attachmentsUpload {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 12px;
  gap: 0.5em;
}
@media screen and (max-width: 1200px) {
  #emailResponse #attachmentsUpload,
  #makeNewEmailFormOrder #attachmentsUpload,
  #makeNewEmailForm #attachmentsUpload {
    padding: 0;
  }
}
#emailResponse #attachmentsUpload .attachment,
#makeNewEmailFormOrder #attachmentsUpload .attachment,
#makeNewEmailForm #attachmentsUpload .attachment {
  width: 48%;
  border-radius: 4px;
  overflow: hidden;
}
#emailResponse #attachmentsUpload .attachment label,
#makeNewEmailFormOrder #attachmentsUpload .attachment label,
#makeNewEmailForm #attachmentsUpload .attachment label {
  background-color: #03a9f4;
  color: white;
  display: block;
  width: 100%;
  height: 150px;
  cursor: pointer;
}
#emailResponse #attachmentsUpload .attachment label .material-symbols-outlined,
#makeNewEmailFormOrder #attachmentsUpload .attachment label .material-symbols-outlined,
#makeNewEmailForm #attachmentsUpload .attachment label .material-symbols-outlined {
  padding: 12px;
  font-size: 120px;
  margin: auto;
  display: block;
  text-align: center;
  height: 100%;
}
#emailResponse #attachmentsUpload .attachment label img,
#makeNewEmailFormOrder #attachmentsUpload .attachment label img,
#makeNewEmailForm #attachmentsUpload .attachment label img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

@media screen and (max-width: 1650px) {
  #email-tabs {
    overflow: scroll;
    overflow-y: hidden;
  }
  #email-tabs .email-tab {
    width: 215px;
  }
}
#email-tabs .email-tab {
  background-color: #FFF;
  color: #000;
  padding: 6px 0px;
  background-color: rgb(247.0971659919, 252.4736842105, 254.9028340081);
  position: relative;
  border-bottom: 4px solid #03a9f4;
}
#email-tabs .email-tab.active {
  background-color: #03a9f4;
  color: #FFF;
}
#email-tabs .email-tab:hover {
  background-color: rgb(121.1457489879, 212.2105263158, 253.3542510121);
  color: #000;
  cursor: pointer;
}
#email-tabs .email-tab:before {
  content: "";
  top: 0;
  left: calc(100% - 40px);
  position: absolute;
  border-top: 40px solid white;
  border-left: 40px solid transparent;
}
#email-tabs .email-tab:after {
  content: "";
  top: 0px;
  left: 0px;
  position: absolute;
  border-top: 40px solid white;
  border-right: 40px solid transparent;
}

.fotouploadyellowlabel.is-dragover,
.fotoupload.is-dragover,
.galleryfoto.is-dragover {
  background-color: rgb(95.955465587, 204.1578947368, 253.044534413);
}

.fotouploadyellowlabel .box__input,
.fotoupload .box__input,
.galleryfoto .box__input {
  width: 100%;
  cursor: pointer;
}
.fotouploadyellowlabel .box__input .box__icon,
.fotoupload .box__input .box__icon,
.galleryfoto .box__input .box__icon {
  width: 100%;
  height: 80px;
  fill: #92b0b3;
  display: block;
  margin-bottom: 40px;
}
.fotouploadyellowlabel .box__input .box__file,
.fotoupload .box__input .box__file,
.galleryfoto .box__input .box__file {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.fotouploadyellowlabel .box__input .js .box__file + label,
.fotoupload .box__input .js .box__file + label,
.galleryfoto .box__input .js .box__file + label {
  max-width: 80%;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
}
.fotouploadyellowlabel .box__input .box__button,
.fotoupload .box__input .box__button,
.galleryfoto .box__input .box__button {
  font-weight: 700;
  color: #e5edf1;
  background-color: #39bfd3;
  display: none;
  padding: 8px 16px;
  margin: 40px auto 0;
}
.fotouploadyellowlabel .box__input label,
.fotoupload .box__input label,
.galleryfoto .box__input label {
  text-align: center;
  width: 100%;
  display: block;
}
.fotouploadyellowlabel .box__input label span,
.fotoupload .box__input label span,
.galleryfoto .box__input label span {
  font-size: 150px;
}
.fotouploadyellowlabel .box__success,
.fotoupload .box__success,
.galleryfoto .box__success {
  -webkit-animation: appear-from-inside 0.25s ease-in-out;
  animation: appear-from-inside 0.25s ease-in-out;
}
.fotouploadyellowlabel .box__uploading,
.fotouploadyellowlabel .box__success,
.fotouploadyellowlabel .box__error,
.fotoupload .box__uploading,
.fotoupload .box__success,
.fotoupload .box__error,
.galleryfoto .box__uploading,
.galleryfoto .box__success,
.galleryfoto .box__error {
  display: none;
  color: #FFF;
  font-size: 15px;
  text-align: center;
}
.fotouploadyellowlabel .yellowLabelclearUploadedImage,
.fotouploadyellowlabel .clearUploadedImage,
.fotoupload .yellowLabelclearUploadedImage,
.fotoupload .clearUploadedImage,
.galleryfoto .yellowLabelclearUploadedImage,
.galleryfoto .clearUploadedImage {
  display: none;
  position: absolute;
  top: 15px;
  right: 15px;
  color: #D50000;
  font-size: 32px;
}

.fotouploadyellowlabel,
.fotoupload {
  font-size: 1.25rem;
  background-color: #03a9f4;
  outline: 2px dashed #ffffff;
  position: relative;
  height: 100%;
  width: 100%;
  outline-offset: -10px;
  -webkit-transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
  transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.fotouploadyellowlabel .box__input {
  position: absolute;
}

.galleryfoto {
  position: relative;
  background-color: #03a9f4;
  outline: 2px dashed #ffffff;
  padding: 20px 20px;
  width: 100%;
  height: 100%;
  font-size: 1.25rem;
  outline-offset: -10px;
  -webkit-transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
  transition: outline-offset 0.15s ease-in-out, background-color 0.15s linear;
  margin-bottom: 1%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.galleryfoto .box__input label span {
  font-size: 50px;
}

.mh-100 {
  height: 100%;
}

.mh-50 {
  height: 48%;
}

.mh-33 {
  height: 32%;
}

.mh-25 {
  height: 24%;
}

.field-item,
.field-sub-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  flex-grow: 1;
  font-family: "Open Sans", sans-serif;
}
.field-item label,
.field-sub-item label {
  color: #858585;
  font-size: 14px;
  min-width: 120px;
  display: flex;
  width: 50%;
}
.field-item label.min-width-215,
.field-sub-item label.min-width-215 {
  min-width: 215px;
}
.field-item input,
.field-sub-item input {
  padding: 8px 16px 8px 16px;
  flex-grow: 1;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  max-width: 346px;
  padding-left: 12px;
  font-family: "Open Sans", sans-serif;
  max-width: 362px;
}
.field-item input[type=checkbox],
.field-sub-item input[type=checkbox] {
  flex-grow: 0;
  margin-right: 18px;
  height: 15px;
  width: 15px;
  cursor: pointer;
}
.field-item input.max-width-125,
.field-sub-item input.max-width-125 {
  max-width: 125px;
}
.field-item select,
.field-sub-item select {
  height: 40px;
  flex-grow: 1;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  padding-left: 12px;
  max-width: 362px;
}
.field-item textarea,
.field-sub-item textarea {
  width: 100%;
  border: 1px solid #eeeeee;
}
.field-item.checkbox,
.field-sub-item.checkbox {
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0px;
}
.field-item.checkbox .input-checkbox,
.field-sub-item.checkbox .input-checkbox {
  display: flex;
  padding-bottom: 6px;
}
.field-item.checkbox.sub-item,
.field-sub-item.checkbox.sub-item {
  margin-left: 36px;
}
.field-item.min-width-unset,
.field-sub-item.min-width-unset {
  min-width: 100%;
}

.field-sub-item {
  margin-left: 34px;
}

form table {
  width: 100%;
}
form label {
  color: #858585;
  margin-right: 12px;
}
form input[type=text], form input[type=password], form input[type=number], form input[type=tel], form input[type=email] {
  line-height: 40px;
  padding: 0 12px;
  border: 1px solid #eeeeee;
  border-radius: 0px;
  width: 100%;
  margin: 3px 0;
  box-sizing: border-box;
}
form input[type=text]:focus, form input[type=password]:focus, form input[type=number]:focus, form input[type=tel]:focus, form input[type=email]:focus {
  border: 1px solid #858585;
  outline: 0;
}
form input[type=number] {
  padding-right: 0;
}
form input[type=radio] {
  display: none;
}
form input[type=radio] + label {
  line-height: 40px;
  padding: 0 12px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  width: auto;
  float: left;
  margin: 3px 0;
  box-sizing: border-box;
  display: inline-block;
}
form input[type=radio]:checked + label {
  background: #03a9f4;
  border: 1px solid #03a9f4;
  color: #fff;
}
form input[type=submit] {
  float: right;
  margin: 3px 0;
}
form td input[type=radio] {
  display: none;
}
form td input[type=radio] + label {
  line-height: 40px;
  padding: 0 12px;
  border: 1px solid #eeeeee;
  border-radius: 0px;
  width: auto;
  float: left;
  margin: 3px 0;
  box-sizing: border-box;
  display: inline-block;
  min-width: 75px;
  text-align: center;
  cursor: pointer;
}
form td input[type=radio] + label:hover {
  background: #eeeeee;
}
form td input[type=radio]:checked + label {
  background: #03a9f4;
  border: 1px solid #03a9f4;
  color: #fff;
}
form td label:first-of-type {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}
form td label:last-of-type {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}
form select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  width: 100%;
  margin: 3px 0;
  box-sizing: border-box;
}
form select:focus {
  border: 1px solid #858585;
}
form textarea {
  width: 100%;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  box-sizing: border-box;
}
form textarea:focus {
  border: 1px solid #858585;
  outline: 0;
}
form .is-invalid {
  border: 1px solid #D50000;
}
form input[type=submit] {
  padding-left: 16px;
  transition: padding 0.2s ease-in-out, background 0.2s ease-in-out, opacity 0.1s ease-in-out;
}
form input[type=submit].loading {
  background-image: url(../images/loading.gif);
  background-size: 20px 20px;
  background-position: 8px center;
  background-repeat: no-repeat;
  padding-left: 35px;
}
form input[type=submit].saved {
  background: #00C853;
}
form .text-danger {
  background-color: rgba(255, 0, 0, 0.3098039216);
  color: #FFF;
  text-align: left;
  width: 100%;
  padding: 6px;
  display: block;
}

input[type=checkbox] {
  border: 1px solid #bebebe;
  border-radius: 4px;
  height: 15px;
  width: 15px;
  cursor: pointer;
  margin: 0 12px 0 0px;
}

.fancyDropDown {
  min-width: 40px;
  position: relative;
}
.fancyDropDown .fancyDropDown-selected {
  text-align: center;
  background-color: #FFF;
  padding: 0.5em;
  cursor: pointer;
  font-weight: 600;
}
.fancyDropDown .fancyDropDown-list {
  position: absolute;
  width: calc(100% + 10px);
  max-height: 224px;
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 99999999999;
  overflow-x: hidden;
  text-align: center;
  left: 0;
  top: -33px;
  border-radius: 4px;
  padding: 0;
  margin: 0;
}
.fancyDropDown .fancyDropDown-list .fancyDropDown-listItem {
  padding: 2px 3px;
  font-size: 18px;
  cursor: pointer;
  font-weight: 600;
  margin: 0 4px;
}
.fancyDropDown .fancyDropDown-list .fancyDropDown-listItem:hover {
  font-weight: 900;
  outline: 4px solid #03a9f4;
  border-radius: 4px;
}
.fancyDropDown .fancyDropDown-list .fancyDropDown-listItem.selected {
  background-color: #03a9f4;
  color: #FFF;
  font-weight: 900;
}
.fancyDropDown .fancyDropDown-list::-webkit-scrollbar {
  height: 0px;
  width: 0px;
}
.fancyDropDown .fancyDropDown-list::-webkit-scrollbar-thumb {
  background-color: #202533;
  width: 0px;
  border-radius: 0px;
}

.offerte-flow ::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.offerte-flow ::-webkit-scrollbar-thumb {
  background-color: #202533;
  width: 6px;
  border-radius: 6px;
}
.offerte-flow .card {
  border-radius: 0;
}
.offerte-flow .card-nav {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  padding: 12px 0;
  border-bottom: 1px solid #eeeeee;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.offerte-flow .card-nav .nav-container .nav-item-container .nav-item.active {
  font-weight: bold;
  color: #03a9f4;
}
.offerte-flow .card-nav .nav-container .nav-item-container .nav-item.disabled {
  color: #c0c0c0;
  position: relative;
}
.offerte-flow .card-nav .nav-container .nav-item-container .nav-item.disabled:after {
  content: "\e897";
  font-family: "Material Icons";
  position: absolute;
  right: -20px;
  top: 3px;
}
.offerte-flow .nav-container {
  text-align: center;
  color: #858585;
  padding: 0 24px;
}
.offerte-flow .nav-container:hover {
  color: #03a9f4;
  cursor: pointer;
}
.offerte-flow .nav-container.active {
  color: #03a9f4;
}
.offerte-flow .tab {
  display: none;
}
.offerte-flow .tab.active {
  display: flex;
  flex-wrap: nowrap;
}

#templatelagenda {
  flex-wrap: wrap;
}
#templatelagenda span {
  background-color: #03a9f4;
  color: #FFF;
  padding: 5px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 0.3em;
}
#templatelagenda span .material-symbols-outlined {
  padding: 0 !important;
}
#templatelagenda span:hover {
  background-color: rgb(70.7651821862, 196.1052631579, 252.7348178138);
}

.offerte-flow .technical_drawing {
  flex-direction: unset;
  flex-wrap: wrap;
}
.offerte-flow .technical_drawing .form-container,
.offerte-flow .technical_drawing .pdf-container {
  width: 50%;
  max-width: 50%;
  padding: 12px 24px;
}
@media screen and (max-width: 768px) {
  .offerte-flow .technical_drawing .form-container,
  .offerte-flow .technical_drawing .pdf-container {
    width: 100%;
    max-width: 100%;
  }
}
.offerte-flow .technical_drawing iframe {
  width: 100%;
}
.offerte-flow .technical_drawing .input-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.offerte-flow .technical_drawing .input-container textarea {
  width: 100%;
  max-width: 100%;
  padding: 5px;
}
.offerte-flow .technical_drawing .input-container .wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
}
.offerte-flow .technical_drawing .input-container .wrapper input {
  padding: 6px 0px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  width: 100%;
}
.offerte-flow .technical_drawing .input-container .wrapper label {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #eeeeee;
  height: 100%;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
}
.offerte-flow .technical_drawing .input-container .wrapper label:hover {
  cursor: pointer;
  background: #03a9f4;
  color: #FFF;
}
.offerte-flow .technical_drawing .input-container .wrapper .filename {
  display: flex;
}
.offerte-flow .technical_drawing .input-container textarea {
  height: 200px;
}
.offerte-flow .technical_drawing .btn-group {
  justify-content: end;
}
.offerte-flow .technical_drawing .box__uploading,
.offerte-flow .technical_drawing .box__success,
.offerte-flow .technical_drawing .box__error {
  display: none;
  font-size: 15px;
  text-align: center;
  font-weight: bold;
}

#yellow-label {
  width: 100%;
}
#yellow-label #fotouploadyellowlabel {
  max-height: 266px;
  min-height: 266px;
  overflow: hidden;
  margin-bottom: 0;
}
#yellow-label #fotouploadyellowlabel #fotoUploadedImageDiv .yellowLabelfotoUploadImage {
  object-fit: contain;
  height: 100%;
  height: 266px;
}
#yellow-label #fotouploadyellowlabel label span {
  font-size: 256px;
  color: #FFF;
}
#yellow-label .yellowLabelfotoUploadImageView {
  position: absolute;
  right: 12px;
  bottom: 12px;
}
#yellow-label .yellowLabelfotoUploadImageView .material-symbols-outlined {
  display: block;
  font-size: 50px;
  color: #FFF;
}

.offerte-flow .offertes-check {
  background: #EEFAFF;
}
.offerte-flow .offertes-check .offerte-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #858585;
  padding: 8px 4px;
  align-items: center;
}
.offerte-flow .offertes-check .offerte-container.Goedgekeurd {
  color: #202533;
}
.offerte-flow .offertes-check .offerte-container.Goedgekeurd label {
  color: #202533;
}
.offerte-flow .offertes-check .offerte-container .sendForJudgement {
  color: #03a9f4;
  border: none !important;
}
.offerte-flow .offertes-check .offerte-container .sendForJudgement:hover {
  color: rgb(2.0708502024, 116.6578947368, 168.4291497976);
  cursor: pointer;
}
.offerte-flow .offertes-check .offerte-container .offerte-show-button {
  display: flex;
  align-items: center;
}
.offerte-flow .offertes-check .offerte-container input[type=radio] {
  display: block;
}
.offerte-flow .offertes-check .offerte-container input[type=radio]:checked + label {
  background: none;
}
.offerte-flow .offertes-check .offerte-container label {
  color: #858585;
  border: none;
}
.offerte-flow .offertes-check .offerte-container span {
  width: fit-content;
  text-align: center;
  display: block;
}
.offerte-flow .offertes-check .offerte-container button {
  width: 49%;
  text-align: center;
  display: block;
}
.offerte-flow .offertes-check .offerte-container .label-info {
  width: 100% !important;
}
.offerte-flow .offertes-check .checkbox-container {
  display: flex;
  align-items: center;
}
.offerte-flow .offertes-check .checkbox-container label:hover {
  color: #03a9f4;
  cursor: pointer;
}
.offerte-flow .offertes-check .options-container {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.offerte-flow .offertes-check .options-container input[function=succes] {
  background-color: #00C853;
  color: #fff;
  border: none !important;
}
.offerte-flow .offertes-check .options-container input[function=failure] {
  background-color: #c11111;
  color: #fff;
  border: none !important;
}
.offerte-flow .offertes-check .options-container input[function=sendForJudgement] {
  background-color: #03a9f4;
  color: #fff;
  border: none !important;
}
.offerte-flow .offertes-check .options-container input,
.offerte-flow .offertes-check .options-container span {
  padding: 6px 12px;
  margin: 0;
  font-size: 13px;
  text-align: center;
  width: calc(33.3333333% - 8px);
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.offerte-flow .offertes-check .options-container input:hover,
.offerte-flow .offertes-check .options-container span:hover {
  color: #fff;
  background-color: #0277BD;
  cursor: pointer;
}
@media screen and (max-width: 1650px) {
  .offerte-flow .offertes-check .options-container input,
  .offerte-flow .offertes-check .options-container span {
    width: calc(50% - 8px);
  }
}
@media screen and (max-width: 1400px) {
  .offerte-flow .offertes-check .options-container input,
  .offerte-flow .offertes-check .options-container span {
    width: calc(33.3333333% - 8px);
  }
}
@media screen and (max-width: 480px) {
  .offerte-flow .offertes-check .options-container input,
  .offerte-flow .offertes-check .options-container span {
    width: calc(50% - 8px);
  }
}

.offerte-flow .offertes-show .update-offerte-form {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .offerte-flow .offertes-show .update-offerte-form .row .col-6 {
    width: 100%;
  }
}
.offerte-flow .offertes-show .input-container {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.offerte-flow .offertes-show .input-container.small {
  width: 25%;
  max-width: 25%;
}
.offerte-flow .offertes-show .input-container.special input[type=number] {
  width: 30%;
  max-width: 30%;
}
.offerte-flow .offertes-show .input-container.special select {
  width: 30%;
  max-width: 30%;
}
.offerte-flow .offertes-show .input-container label {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
}
.offerte-flow .offertes-show .input-container .label-amount {
  background-color: #eeeeee;
  color: #858585;
  margin-left: 6px;
  padding: 6px 12px;
  border-radius: 6px;
}
.offerte-flow .offertes-show .input-container input[type=number] {
  width: 60%;
  max-width: 60%;
}
.offerte-flow .offertes-show .offerte-product-card {
  padding: 24px;
  box-shadow: 0 1px 4px 0 #d9d9d9;
  border-radius: 1px;
  background: #FFF;
  cursor: pointer;
  text-align: center;
}
.offerte-flow .offertes-show .offerte-product-card:hover {
  background: #EEFAFF;
}
.offerte-flow .offertes-show .offerte-product-card .row {
  width: fit-content;
  margin: 0 auto;
}
.offerte-flow .offertes-show .offerte-product-card .row span {
  color: #000;
  margin: auto;
  width: fit-content;
  font-size: 24px;
  font-weight: 500;
}
.offerte-flow .offertes-show iframe {
  width: 100%;
}
.offerte-flow .offertes-show .input-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.offerte-flow .offertes-show .input-container textarea {
  width: 100%;
  max-width: 100%;
  padding: 5px;
}
.offerte-flow .offertes-show .input-container .wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
}
.offerte-flow .offertes-show .input-container .wrapper input {
  padding: 6px 0px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  width: 100%;
}
.offerte-flow .offertes-show .input-container .wrapper label {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #eeeeee;
  height: 100%;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
}
.offerte-flow .offertes-show .input-container .wrapper label:hover {
  cursor: pointer;
  background: #03a9f4;
  color: #FFF;
}
.offerte-flow .offertes-show .input-container .wrapper .filename {
  display: flex;
}
.offerte-flow .offertes-show .input-container textarea {
  height: 200px;
}
.offerte-flow .offertes-show .btn-group {
  justify-content: end;
}
.offerte-flow .offertes-show .box__uploading,
.offerte-flow .offertes-show .box__success,
.offerte-flow .offertes-show .box__error {
  display: none !important;
  font-size: 15px !important;
  text-align: center !important;
  font-weight: bold !important;
}
.offerte-flow .offertes-show .offerte-pdf-container {
  box-shadow: 0 0 4px 0 #e1e1e1;
  margin-top: 1em;
  height: 450px;
  padding: 5px;
}
.offerte-flow .offertes-show .offerte-pdf-container iframe {
  height: 100%;
}
.offerte-flow .offertes-show #retry-finding-offerte-pdf {
  margin: auto;
  display: block;
  margin-top: 1em;
}

.selectnewstaarttekst,
.selectnewkoptekst {
  top: -26px;
  right: 0px;
  color: #000;
  position: absolute;
}
.selectnewstaarttekst:hover,
.selectnewkoptekst:hover {
  color: #03a9f4;
  cursor: pointer;
}

.koptekst h2 {
  font-size: 20px;
}
.koptekst ol {
  list-style-type: decimal;
  padding: 12px 24px;
}

.kopteksttoevoegen,
.staartteksttoevoegen {
  padding: 24px;
  box-shadow: 0 1px 4px 0 #d9d9d9;
  border-radius: 1px;
  background: #FFF;
  cursor: pointer;
  text-align: center;
}
.kopteksttoevoegen:hover,
.staartteksttoevoegen:hover {
  background: #EEFAFF;
}
.kopteksttoevoegen .row,
.staartteksttoevoegen .row {
  width: fit-content;
  margin: 0 auto;
}
.kopteksttoevoegen .row span,
.staartteksttoevoegen .row span {
  color: #000;
  margin: auto;
  width: fit-content;
  font-size: 24px;
  font-weight: 500;
}

.update-offerte-form .bokken #addBokDiv .addBokType {
  height: fit-content;
  width: fit-content;
  min-height: fit-content;
  max-height: fit-content;
  padding: 0;
  margin: 0;
  margin: auto;
  display: block;
}
.update-offerte-form .bokken #addBokDiv .addBokType .material-symbols-outlined {
  font-size: 30px;
  background-color: #03a9f4;
  color: #FFF;
  height: -moz-fit-content;
  height: fit-content;
  padding: 6px;
  border-radius: 4px;
  margin: auto;
  display: block;
}
.update-offerte-form .bokken #addBokDiv .addBokType .material-symbols-outlined:hover {
  cursor: pointer;
  background-color: rgb(2.0708502024, 116.6578947368, 168.4291497976);
}
.update-offerte-form .bokken #boklist .removeBokType {
  height: fit-content;
  width: fit-content;
  min-height: fit-content;
  max-height: fit-content;
  padding: 0;
  margin: 0;
  margin: auto;
  display: block;
}
.update-offerte-form .bokken #boklist .removeBokType .removebok {
  font-size: 30px;
  background-color: #D50000;
  color: #FFF;
  height: -moz-fit-content;
  height: fit-content;
  padding: 6px;
  border-radius: 4px;
  margin: auto;
  display: block;
}
.update-offerte-form .bokken #boklist .removeBokType .removebok:hover {
  cursor: pointer;
  background-color: rgb(136.5, 0, 0);
}

.offerte-flow .inmeet-container .inmeet-wrapper {
  margin-bottom: 24px;
}
@media screen and (max-width: 992px) {
  .offerte-flow .inmeet-container .inmeet-wrapper .brand,
  .offerte-flow .inmeet-container .inmeet-wrapper .date,
  .offerte-flow .inmeet-container .inmeet-wrapper .status,
  .offerte-flow .inmeet-container .inmeet-wrapper .image {
    width: 50%;
  }
}
@media screen and (max-width: 576px) {
  .offerte-flow .inmeet-container .inmeet-wrapper .brand,
  .offerte-flow .inmeet-container .inmeet-wrapper .date,
  .offerte-flow .inmeet-container .inmeet-wrapper .status,
  .offerte-flow .inmeet-container .inmeet-wrapper .image {
    width: 100%;
  }
}
.offerte-flow .inmeet-container .order-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #eeeeee;
  border-radius: 6px;
  padding: 24px;
}
.offerte-flow .inmeet-container .order-container .order-main-image-container img {
  height: 70px;
  width: auto;
}
.offerte-flow .inmeet-container .order-container .container.status {
  display: flex;
  align-items: center;
}
.offerte-flow .inmeet-container .order-container .container p {
  font-weight: 600;
  margin: 0;
}
.offerte-flow .inmeet-container .order-container .container span {
  font-weight: 300;
  font-size: 14px;
  color: #858585;
}
.offerte-flow .inmeet-container .order-container .container .false {
  margin-left: 12px;
  color: #fff;
  background: #FF8F00;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
}
.offerte-flow .inmeet-container .order-container .container .true {
  margin-left: 12px;
  color: #fff;
  background: #03a9f4;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
}
.offerte-flow .inmeet-container .button-container {
  display: inline-flex;
  justify-content: flex-end;
}
@media screen and (max-width: 768px) {
  .offerte-flow .inmeet-container .inmeetImageUploads .row > div {
    width: 33.3333333%;
  }
}
@media screen and (max-width: 480px) {
  .offerte-flow .inmeet-container .inmeetImageUploads .row > div {
    width: 50%;
  }
}
.offerte-flow .inmeet-container .inmeetImageUploads .inmeetImageUploadDiv {
  height: 200px;
  width: 100%;
  position: relative;
}
.offerte-flow .inmeet-container .inmeetImageUploads .inmeetImageUploadDiv .inmeetImageUploadLabel {
  width: 100%;
  height: 100%;
  background-color: #8eb2b5;
  display: block;
  border-radius: 4px;
  position: relative;
}
.offerte-flow .inmeet-container .inmeetImageUploads .inmeetImageUploadDiv .inmeetImageUploadLabel .material-symbols-outlined {
  color: #FFF;
  display: block;
  width: fit-content;
  height: fit-content;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  font-size: 100px;
}
.offerte-flow .inmeet-container .inmeetImageUploads .inmeetImageUploadDiv .inmeetImageUpload {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.offerte-flow .inmeet-container .inmeetImageUploads .inmeetImageUploadDiv .inmeetPreviewImage {
  height: 100%;
  width: auto;
  object-fit: contain;
}
.offerte-flow .inmeet-container .inmeetImageUploads .inmeetImageUploadDiv .inmeetDeleteUploadedImage {
  position: absolute;
  right: 0;
  z-index: 9999;
  bottom: 0;
}
.offerte-flow .inmeet-container .inmeetImageUploads .inmeetImageUploadDiv .inmeetDeleteUploadedImage .material-symbols-outlined {
  font-size: 40px;
  color: #D50000;
  cursor: pointer;
}
.offerte-flow .inmeet-container .inmeetImageUploads .inmeetImageUploadDiv .inmeetViewUploadedImage {
  position: absolute;
  right: 40px;
  z-index: 9999;
  bottom: 0;
}
.offerte-flow .inmeet-container .inmeetImageUploads .inmeetImageUploadDiv .inmeetViewUploadedImage .material-symbols-outlined {
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}

.moreWorkRow {
  border: 2px solid #e1e1e1;
  padding: 0;
  margin-top: 12px;
  margin-bottom: 12px;
  border-radius: 4px;
  box-shadow: 0 0 4px 0 #e1e1e1;
}
.moreWorkRow > .col-6:not(:nth-child(3)):not(:nth-child(5)) {
  border-right: 2px solid #e1e1e1;
}
.moreWorkRow > .col-6:not(:nth-child(4)):not(:nth-child(5)) {
  border-bottom: 2px solid #e1e1e1;
}
.moreWorkRow .moreworkoptions .material-symbols-outlined {
  background-color: #03a9f4;
  padding: 6px;
  display: flex;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 4px;
  font-size: 32px;
  font-weight: bold;
}
.moreWorkRow .moreworkoptions .material-symbols-outlined #addNewRow {
  background-color: #03a9f4;
}
.moreWorkRow .moreworkoptions .material-symbols-outlined #addNewRow:hover {
  background-color: rgb(2.3805668016, 134.1052631579, 193.6194331984);
}
.moreWorkRow .moreworkoptions .material-symbols-outlined.add {
  background-color: #03a9f4;
}
.moreWorkRow .moreworkoptions .material-symbols-outlined.add:hover {
  background-color: rgb(2.3805668016, 134.1052631579, 193.6194331984);
}
.moreWorkRow .moreworkoptions .material-symbols-outlined.remove {
  background-color: #D50000;
}
.moreWorkRow .moreworkoptions .material-symbols-outlined.remove:hover {
  background-color: #a20000;
}
.moreWorkRow #customerMoreWorkSignature {
  margin-bottom: 12px;
}
.moreWorkRow #customerMoreWorkSignature canvas {
  box-shadow: 0 0 4px 0 #aaaaaa;
  height: 200px;
  max-width: 600px;
  width: 100%;
  border-radius: 4px;
}
.moreWorkRow .workOnLocationUploads .workOnLocationUploadDiv {
  height: 200px;
  width: 100%;
  position: relative;
}
.moreWorkRow .workOnLocationUploads .workOnLocationUploadDiv .workOnLocationUploadLabel {
  width: 100%;
  height: 100%;
  background-color: #8eb2b5;
  display: block;
  border-radius: 4px;
  position: relative;
}
.moreWorkRow .workOnLocationUploads .workOnLocationUploadDiv .workOnLocationUploadLabel .workOnLocationPreviewImage {
  display: block;
  height: 100%;
  margin: auto;
}
.moreWorkRow .workOnLocationUploads .workOnLocationUploadDiv .workOnLocationUploadLabel .material-symbols-outlined {
  color: #FFF;
  display: block;
  width: fit-content;
  height: fit-content;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  font-size: 100px;
}
.moreWorkRow .workOnLocationUploads .workOnLocationUploadDiv .workOnLocationUpload {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.moreWorkRow .workOnLocationUploads .workOnLocationUploadDiv .workOnLocationPreviewImage {
  height: 100%;
  width: auto;
  object-fit: contain;
}
.moreWorkRow .workOnLocationUploads .workOnLocationUploadDiv .workOnLocationDeleteUploadedImage {
  position: absolute;
  right: 0;
  z-index: 9999;
  bottom: 0;
}
.moreWorkRow .workOnLocationUploads .workOnLocationUploadDiv .workOnLocationDeleteUploadedImage .material-symbols-outlined {
  font-size: 40px;
  color: #D50000;
  cursor: pointer;
}
.moreWorkRow .workOnLocationUploads .workOnLocationUploadDiv .workOnLocationViewUploadedImage {
  position: absolute;
  right: 40px;
  z-index: 9999;
  bottom: 0;
}
.moreWorkRow .workOnLocationUploads .workOnLocationUploadDiv .workOnLocationViewUploadedImage .material-symbols-outlined {
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}
.moreWorkRow .moreWorkPriceCalculations .moreWorkPriceEx,
.moreWorkRow .moreWorkPriceCalculations .qoutePriceEx,
.moreWorkRow .moreWorkPriceCalculations .qoutePriceWithMoreWorkPriceEx {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 12px;
}

.offerte-flow #ga-sync .ga-sync {
  justify-content: center;
  align-items: center;
}
.offerte-flow #ga-sync .ga-sync-container {
  width: 50%;
}
.offerte-flow #ga-sync .ga-sync-container .sync-parts {
  margin-left: 42px;
}
.offerte-flow #ga-sync .container {
  background: #EEFAFF;
  padding: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.offerte-flow #ga-sync .container:first-child {
  margin-bottom: 24px;
}
.offerte-flow #ga-sync input[type=checkbox] {
  border: 1px solid #ccdee7;
  border-radius: 4px;
  height: 15px;
  width: 15px;
  cursor: pointer;
  margin: 0 12px 0 0px;
}
.offerte-flow #ga-sync .gasynclog {
  position: absolute;
  right: -30px;
  top: 0;
}
.offerte-flow #ga-sync .gasynclog .gasynclogicon {
  color: #000;
}
.offerte-flow #ga-sync .gasynclog .gasynclogdata {
  display: none;
  position: absolute;
  background-color: #FFF;
  padding: 12px;
  top: 0;
  left: 30px;
  width: 400px;
  box-shadow: 0 0 4px 0 #c1c1c1;
  display: flex;
  flex-direction: column;
  max-height: 140px;
  overflow: auto;
}

.offerte-flow .inkoop-overzicht-order .col-12 {
  padding: 24px;
}
.offerte-flow .inkoop-overzicht-order .inkoop-overzicht-main {
  border-radius: 0;
  box-shadow: 0px 1px 4px 0px #c1c1c1;
  z-index: 1;
  position: relative;
}
.offerte-flow .inkoop-overzicht-order .order-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
}
.offerte-flow .inkoop-overzicht-order .order-container .inkoop-overzicht-main-image-container img {
  height: 70px;
  width: 40px;
  object-fit: contain;
}
.offerte-flow .inkoop-overzicht-order .order-container .inkoop-overzicht-main-image-container input {
  height: 25px;
  width: 25px;
  margin: auto 15px;
}
.offerte-flow .inkoop-overzicht-order .order-container .container {
  margin: auto 0;
}
.offerte-flow .inkoop-overzicht-order .order-container .container.show-more {
  display: flex;
  align-items: center;
}
.offerte-flow .inkoop-overzicht-order .order-container .container.show-more:hover {
  cursor: pointer;
}
.offerte-flow .inkoop-overzicht-order .order-container .container.show-more:hover p,
.offerte-flow .inkoop-overzicht-order .order-container .container.show-more:hover span {
  color: #bebebe;
}
.offerte-flow .inkoop-overzicht-order .order-container .container.show-more.active p span {
  transform: rotate(360deg);
}
.offerte-flow .inkoop-overzicht-order .order-container .container.show-more p {
  color: #03a9f4;
  display: flex;
  align-items: center;
  transition: color 0.2s ease-in;
}
.offerte-flow .inkoop-overzicht-order .order-container .container.show-more p span {
  transition: transform 0.5s ease, color 0.2s ease-in;
  transform: rotate(180deg);
  color: #03a9f4;
  font-size: 24px;
  font-weight: 600;
}
.offerte-flow .inkoop-overzicht-order .order-container .container p {
  margin: 0;
  font-weight: 600;
}
.offerte-flow .inkoop-overzicht-order .order-container .container span {
  font-size: 14px;
  font-weight: 300;
  color: #858585;
}
.offerte-flow .inkoop-overzicht-order .parts-container {
  margin-top: 24px;
  display: block;
}
.offerte-flow .inkoop-overzicht-order .parts-container .partGroupHeader .groupDate {
  padding: 0 6px;
}
@media screen and (max-width: 1400px) {
  .offerte-flow .inkoop-overzicht-order .parts-container table {
    border: 0;
    box-shadow: none;
  }
  .offerte-flow .inkoop-overzicht-order .parts-container table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .offerte-flow .inkoop-overzicht-order .parts-container table tr {
    border-bottom: 24px solid #eeeeee;
    display: block;
  }
  .offerte-flow .inkoop-overzicht-order .parts-container table td {
    border-bottom: 1px solid #eeeeee;
    display: block;
    text-align: right;
    min-height: 49px;
  }
  .offerte-flow .inkoop-overzicht-order .parts-container table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  .offerte-flow .inkoop-overzicht-order .parts-container table td:last-child {
    border-bottom: 0;
  }
}
.offerte-flow .inkoop-overzicht-order .parts-container table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
.offerte-flow .inkoop-overzicht-order .parts-container table tbody tr {
  border: 1px solid #F7F7F7;
}
@media screen and (max-width: 1400px) {
  .offerte-flow .inkoop-overzicht-order .parts-container table tbody tr {
    border: unset;
    border-bottom: 24px solid #fff;
    flex-direction: column;
  }
}
@media screen and (max-width: 1400px) {
  .offerte-flow .inkoop-overzicht-order .parts-container table tbody tr td select {
    margin-top: 6px;
  }
}
.offerte-flow .inkoop-overzicht-order .parts-container table thead td {
  outline: 1px solid #eeeeee;
  border: hidden;
  background: #eeeeee;
}
.offerte-flow .inkoop-overzicht-order .parts-container table thead td:first-child {
  width: 450px;
}
.offerte-flow .inkoop-overzicht-order .parts-container table td {
  padding: 12px;
}
.offerte-flow .inkoop-overzicht-order .parts-container .button-container {
  font-size: 13px;
  display: flex;
  align-items: center;
}
.offerte-flow .inkoop-overzicht-order .parts-container .button-container a {
  padding: 6px 12px;
}
@media screen and (max-width: 1400px) {
  .offerte-flow .inkoop-overzicht-order .parts-container .button-container a {
    margin-left: auto;
  }
}
.offerte-flow .inkoop-overzicht-order .parts-container .button-container a:first-child {
  border-top: 1px solid #202533;
  border-right: 1px solid #202533;
  border-bottom: 1px solid #202533;
  border-left: 1px solid #202533;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.offerte-flow .inkoop-overzicht-order .parts-container .button-container a:last-child {
  border-top: 1px solid #202533;
  border-right: 1px solid #202533;
  border-bottom: 1px solid #202533;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.montage.tab .amountToholdIn .button {
  background-color: #03a9f4;
  padding: 2px;
  border-radius: 4px;
}
.montage.tab .amountToholdIn .button:hover {
  background-color: rgb(45.5748987854, 188.0526315789, 252.4251012146);
}
.montage.tab .amountToholdIn .button .material-symbols-outlined {
  display: block;
  height: fit-content;
  font-size: 40px;
  color: #FFF;
}
.montage.tab .amountToholdInRows .amountToholdInRow .amountToholdInRemove {
  background-color: #D50000;
  padding: 2px;
  border-radius: 4px;
  margin-bottom: 0.3em;
}
.montage.tab .amountToholdInRows .amountToholdInRow .amountToholdInRemove:hover {
  background-color: #ff0909;
}
.montage.tab .amountToholdInRows .amountToholdInRow .amountToholdInRemove .material-symbols-outlined {
  display: block;
  height: fit-content;
  font-size: 40px;
  color: #FFF;
}

.offerte-flow .controle .col-12 {
  padding: 24px;
}
.offerte-flow .controle .order-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  position: relative;
}
.offerte-flow .controle .order-container .leveringAfMarkeren {
  position: absolute;
  width: 25px;
  height: 25px;
  margin: 0;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.offerte-flow .controle .order-container .controle-order-p,
.offerte-flow .controle .order-container .controle-order-span {
  padding-left: 50px;
}
.offerte-flow .controle .order-container .container.show-more {
  display: flex;
  align-items: center;
}
.offerte-flow .controle .order-container .container.show-more:hover {
  cursor: pointer;
}
.offerte-flow .controle .order-container .container.show-more:hover p,
.offerte-flow .controle .order-container .container.show-more:hover span {
  color: #bebebe;
}
.offerte-flow .controle .order-container .container.show-more.active p span {
  transform: rotate(360deg);
}
.offerte-flow .controle .order-container .container.show-more p {
  color: #03a9f4;
  display: flex;
  align-items: center;
  transition: color 0.2s ease-in;
}
.offerte-flow .controle .order-container .container.show-more p span {
  transition: transform 0.5s ease, color 0.2s ease-in;
  transform: rotate(180deg);
  color: #03a9f4;
  font-size: 24px;
  font-weight: 600;
}
.offerte-flow .controle .order-container .container p {
  margin: 0;
  font-weight: 600;
}
.offerte-flow .controle .order-container .container span {
  font-size: 14px;
  font-weight: 300;
  color: #858585;
}
.offerte-flow .controle .parts-container {
  margin-top: 24px;
  display: block;
}
.offerte-flow .controle .parts-container .partGroupHeader .groupDate {
  padding: 0 6px;
}
@media screen and (max-width: 1400px) {
  .offerte-flow .controle .parts-container table {
    border: 0;
    box-shadow: none;
  }
  .offerte-flow .controle .parts-container table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .offerte-flow .controle .parts-container table tr {
    border-bottom: 24px solid #eeeeee;
    display: block;
  }
  .offerte-flow .controle .parts-container table td {
    border-bottom: 1px solid #eeeeee;
    display: block;
    text-align: right;
    min-height: 49px;
  }
  .offerte-flow .controle .parts-container table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  .offerte-flow .controle .parts-container table td:last-child {
    border-bottom: 0;
  }
}
.offerte-flow .controle .parts-container table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
.offerte-flow .controle .parts-container table tbody tr {
  border: 1px solid #F7F7F7;
}
@media screen and (max-width: 1400px) {
  .offerte-flow .controle .parts-container table tbody tr {
    border-bottom: 24px solid #fff;
    border-left: unset;
    border-right: unset;
  }
}
.offerte-flow .controle .parts-container table thead td {
  outline: 1px solid #eeeeee;
  border: hidden;
  background: #eeeeee;
}
.offerte-flow .controle .parts-container table thead td:first-child {
  border-top-left-radius: 6px;
}
.offerte-flow .controle .parts-container table thead td:last-child {
  border-top-right-radius: 6px;
}
.offerte-flow .controle .parts-container table td {
  padding: 12px;
}
.offerte-flow .controle .parts-container .button-container {
  font-size: 13px;
  display: flex;
  align-items: center;
}
.offerte-flow .controle .parts-container .button-container a {
  padding: 6px 12px;
}
.offerte-flow .controle .parts-container .button-container a:first-child {
  border-top: 1px solid #202533;
  border-right: 1px solid #202533;
  border-bottom: 1px solid #202533;
  border-left: 1px solid #202533;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.offerte-flow .controle .parts-container .button-container a:last-child {
  border-top: 1px solid #202533;
  border-right: 1px solid #202533;
  border-bottom: 1px solid #202533;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

#service-taken {
  max-height: 1000px;
  min-height: unset;
}
#service-taken ::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
#service-taken ::-webkit-scrollbar-thumb {
  background-color: #202533;
  width: 6px;
  border-radius: 6px;
}
#service-taken .card-heading {
  margin-bottom: 0;
}
#service-taken .card-heading h1 .aantaltaken {
  background-color: #eeeeee;
  border-radius: 4px;
  padding: 5px 10px;
  margin-left: 10px;
  font-weight: 300;
}
@media screen and (max-width: 576px) {
  #service-taken .card-heading h1 {
    font-size: 16px;
    margin-top: 0.5em;
  }
}
#service-taken .col-12,
#service-taken .col-6,
#service-taken .col-3 {
  padding: 0 12px;
}
#service-taken #all-services {
  overflow: auto;
}
#service-taken #all-services .service {
  box-shadow: 0 0 4px 0 #dbdbdb;
  background-color: #FFF;
  border-radius: 6px;
  width: 98%;
  margin: 0 auto;
  margin-top: 2em;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
#service-taken #all-services .service .serviceheader {
  background: #03a9f4;
  color: #FFF;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  cursor: pointer;
}
#service-taken #all-services .service .serviceheader p {
  margin: 0.5em;
}
@media screen and (max-width: 1200px) {
  #service-taken #all-services .service .serviceheader p {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  #service-taken #all-services .service .serviceheader > div {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0px;
  }
}
@media screen and (max-width: 768px) {
  #service-taken #all-services .service .serviceheader > div p {
    width: 100%;
    margin: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  #service-taken #all-services .service .serviceheader > div p,
  #service-taken #all-services .service .serviceheader > div button {
    margin: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  #service-taken #all-services .service .serviceheader > div p .material-symbols-outlined,
  #service-taken #all-services .service .serviceheader > div button .material-symbols-outlined {
    margin: auto;
  }
}
#service-taken #all-services .service .servicebody .top-level-col-12,
#service-taken #all-services .service .servicebody .col-12 {
  flex: unset;
  width: 100%;
  padding: 12px;
}
@media screen and (max-width: 576px) {
  #service-taken #all-services .service .servicebody .top-level-col-12,
  #service-taken #all-services .service .servicebody .col-12 {
    flex: unset;
    width: unset;
    padding: 12px;
  }
}
@media screen and (max-width: 1400px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceStatus,
  #service-taken #all-services .service .servicebody .col-12 #serviceStatus {
    display: flex !important;
    flex-direction: column !important;
  }
}
@media screen and (max-width: 1400px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceStatus .col-2,
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceStatus .col-10,
  #service-taken #all-services .service .servicebody .col-12 #serviceStatus .col-2,
  #service-taken #all-services .service .servicebody .col-12 #serviceStatus .col-10 {
    width: 100% !important;
  }
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceStatus .dataContainer,
#service-taken #all-services .service .servicebody .col-12 #serviceStatus .dataContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  font-size: 18px;
}
@media screen and (max-width: 1400px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceStatus .dataContainer,
  #service-taken #all-services .service .servicebody .col-12 #serviceStatus .dataContainer {
    display: flex;
    flex-direction: row;
    font-size: 16px;
  }
}
@media screen and (max-width: 1400px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceStatus .dataContainer > div,
  #service-taken #all-services .service .servicebody .col-12 #serviceStatus .dataContainer > div {
    width: 33%;
  }
}
@media screen and (max-width: 576px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceStatus .dataContainer > div,
  #service-taken #all-services .service .servicebody .col-12 #serviceStatus .dataContainer > div {
    width: 100%;
  }
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceStatus .dataContainer .serviceID,
#service-taken #all-services .service .servicebody .col-12 #serviceStatus .dataContainer .serviceID {
  position: absolute;
  left: -10px;
  top: -10px;
  font-size: 13px;
  color: black;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceStatus .dataContainer p,
#service-taken #all-services .service .servicebody .col-12 #serviceStatus .dataContainer p {
  font-weight: 600;
  margin: 0;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceStatus .dataContainer span,
#service-taken #all-services .service .servicebody .col-12 #serviceStatus .dataContainer span {
  font-weight: 300;
  color: #858585;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceStatus .overview,
#service-taken #all-services .service .servicebody .col-12 #serviceStatus .overview {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceStatus .overview .status-progress,
#service-taken #all-services .service .servicebody .col-12 #serviceStatus .overview .status-progress {
  display: flex;
  width: 100%;
  gap: 24px;
  overflow: auto;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceStatus .overview .status-progress .status-container,
#service-taken #all-services .service .servicebody .col-12 #serviceStatus .overview .status-progress .status-container {
  min-width: 150px;
}
@media screen and (max-width: 1400px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceStatus .overview .status-progress .status-container,
  #service-taken #all-services .service .servicebody .col-12 #serviceStatus .overview .status-progress .status-container {
    font-size: 12px;
    min-width: 120px;
  }
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData,
#service-taken #all-services .service .servicebody .col-12 #serviceData {
  min-height: 200px;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .card-nav,
#service-taken #all-services .service .servicebody .col-12 #serviceData .card-nav {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  padding: 12px 0;
  border-bottom: 1px solid #eeeeee;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow: hidden;
}
@media screen and (max-width: 992px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .card-nav,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .card-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 12px;
  }
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .card-nav .service-nav-item-container .service-nav-item.active,
#service-taken #all-services .service .servicebody .col-12 #serviceData .card-nav .service-nav-item-container .service-nav-item.active {
  font-weight: bold;
  color: #03a9f4;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .service-nav-container,
#service-taken #all-services .service .servicebody .col-12 #serviceData .service-nav-container {
  text-align: center;
  color: #858585;
  padding: 0 24px;
}
@media screen and (max-width: 992px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .service-nav-container,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .service-nav-container {
    width: 33%;
    text-align: left !important;
  }
}
@media screen and (max-width: 768px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .service-nav-container,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .service-nav-container {
    width: 50%;
    margin-bottom: 1em !important;
    margin-top: 0.5em !important;
  }
}
@media screen and (max-width: 576px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .service-nav-container,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .service-nav-container {
    width: 100%;
    font-size: 14px;
  }
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .service-nav-container:hover,
#service-taken #all-services .service .servicebody .col-12 #serviceData .service-nav-container:hover {
  color: #03a9f4;
  cursor: pointer;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .service-nav-container.active,
#service-taken #all-services .service .servicebody .col-12 #serviceData .service-nav-container.active {
  color: #03a9f4;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .service_tab,
#service-taken #all-services .service .servicebody .col-12 #serviceData .service_tab {
  display: none;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .service_tab.active,
#service-taken #all-services .service .servicebody .col-12 #serviceData .service_tab.active {
  display: flex;
  flex-wrap: nowrap;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .service_tab .card,
#service-taken #all-services .service .servicebody .col-12 #serviceData .service_tab .card {
  box-shadow: none;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .row,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .row {
  width: 100%;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .row .card,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .row .card {
  width: 100%;
  min-height: 200px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
@media screen and (max-width: 576px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .row,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .row {
    width: unset;
  }
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .row label,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .row label {
  margin-bottom: 6px;
}
@media screen and (max-width: 1200px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .defectitems table thead,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .defectitems table thead {
    display: none;
  }
}
@media screen and (max-width: 1200px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .defectitems table tbody,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .defectitems table tbody {
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 1200px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .defectitems table tbody tr,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .defectitems table tbody tr {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .defectitems table tbody tr.add-item,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .defectitems table tbody tr.add-item {
  background-color: #efefef;
}
@media screen and (max-width: 1200px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .defectitems table tbody tr td,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .defectitems table tbody tr td {
    width: 50%;
  }
}
@media screen and (max-width: 1200px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .defectitems table tbody tr td button,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .defectitems table tbody tr td button {
    width: 100%;
  }
}
@media screen and (max-width: 1400px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .defectitems-extra,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .defectitems-extra {
    width: 50%;
  }
}
@media screen and (max-width: 1200px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .defectitems-extra,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .defectitems-extra {
    width: 100%;
  }
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .defectitems-extra input,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .defectitems-extra input {
  width: 100%;
}
@media screen and (max-width: 1200px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .defectitems-extra label,
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .defectitems-extra input,
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .defectitems-extra button,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .defectitems-extra label,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .defectitems-extra input,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .defectitems-extra button {
    width: 50%;
  }
}
@media screen and (max-width: 1200px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .defectitems-submit label,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .defectitems-submit label {
    display: none;
  }
}
@media screen and (max-width: 1200px) {
  #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container .defectitems-submit button,
  #service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container .defectitems-submit button {
    width: 100%;
  }
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container table,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container table {
  margin: 0 auto;
  border-radius: 0;
  box-shadow: 0 0 4px 0 #e1e1e1;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container table thead th:first-child, #service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container table thead th:last-child,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container table thead th:first-child,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container table thead th:last-child {
  border-radius: 0;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container table tbody td #addRow .material-symbols-outlined,
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container table tbody td .service-remove-input-field .material-symbols-outlined,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container table tbody td #addRow .material-symbols-outlined,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container table tbody td .service-remove-input-field .material-symbols-outlined {
  color: #FFF;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container #totalcost,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container #totalcost {
  width: 100%;
  margin: auto;
  display: block;
  height: 42px;
  line-height: 42px;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .service-container .beoordelen-container #sendServiceQuotation,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .service-container .beoordelen-container #sendServiceQuotation {
  margin: 0 0 0 auto;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .artikelenbestellen-container .serviceItem,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .artikelenbestellen-container .serviceItem {
  padding: 12px;
  box-shadow: 0 0 3px 0 #c9c9c9;
  border-radius: 4px;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .artikelenbestellen-container .serviceItem .serviceItemName,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .artikelenbestellen-container .serviceItem .serviceItemName {
  max-width: 330px;
  width: 100%;
  padding: 0 10px;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .artikelenbestellen-container .serviceItem .serviceItemCost,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .artikelenbestellen-container .serviceItem .serviceItemCost {
  width: 120px;
  max-width: 120px;
  padding: 0 10px;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .artikelenbestellen-container .serviceItem .status-label.besteld.info,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .artikelenbestellen-container .serviceItem .status-label.besteld.info {
  background-color: #b8e7ff;
  color: #1baaf2;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .datumplannen-container .planServiceDeliveryDate,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .datumplannen-container .planServiceDeliveryDate {
  width: fit-content;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .uitvoering-container .executionDoneSign,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .uitvoering-container .executionDoneSign {
  width: 600px;
  height: 200px;
  border: 1px solid #d7d7d7;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .uitvoering-container .executionCheckedSign,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .uitvoering-container .executionCheckedSign {
  width: 600px;
  height: 200px;
  border: 1px solid #d7d7d7;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .afboeken-container .warning,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .afboeken-container .warning {
  background-color: #ffa012;
  color: #FFF;
  padding: 6px 12px;
  font-weight: bold;
  font-size: 20px;
  width: 50%;
  border-radius: 4px;
  margin: auto;
}
#service-taken #all-services .service .servicebody .top-level-col-12 #serviceData .body .afboeken-container .sendServiceInvoice,
#service-taken #all-services .service .servicebody .col-12 #serviceData .body .afboeken-container .sendServiceInvoice {
  margin: auto;
  font-size: 20px;
  padding: 10px 30px;
}
#service-taken #all-services .service:first-of-type {
  margin-top: 0.5em;
}
#service-taken #all-services .service:last-of-type {
  margin-bottom: 0.5em;
}
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv {
  height: 200px;
  width: 200px;
  position: relative;
}
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceImageUploadLabel,
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceMancoImageUploadLabel,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceImageUploadLabel,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceMancoImageUploadLabel,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceImageUploadLabel,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceMancoImageUploadLabel,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceImageUploadLabel,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceMancoImageUploadLabel {
  width: 100%;
  height: 100%;
  background-color: #8eb2b5;
  display: block;
  border-radius: 4px;
  position: relative;
}
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceImageUploadLabel .material-symbols-outlined,
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceMancoImageUploadLabel .material-symbols-outlined,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceImageUploadLabel .material-symbols-outlined,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceMancoImageUploadLabel .material-symbols-outlined,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceImageUploadLabel .material-symbols-outlined,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceMancoImageUploadLabel .material-symbols-outlined,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceImageUploadLabel .material-symbols-outlined,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceMancoImageUploadLabel .material-symbols-outlined {
  color: #FFF;
  display: block;
  width: fit-content;
  height: fit-content;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  font-size: 100px;
}
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceImageUpload,
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceMancoImageUpload,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceImageUpload,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceMancoImageUpload,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceImageUpload,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceMancoImageUpload,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceImageUpload,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceMancoImageUpload {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .servicePreviewImage,
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceMancoPreviewImage,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .servicePreviewImage,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceMancoPreviewImage,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .servicePreviewImage,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceMancoPreviewImage,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .servicePreviewImage,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceMancoPreviewImage {
  height: 100%;
  width: auto;
  object-fit: contain;
}
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceDeleteUploadedImage,
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceMancoDeleteUploadedImage,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceDeleteUploadedImage,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceMancoDeleteUploadedImage,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceDeleteUploadedImage,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceMancoDeleteUploadedImage,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceDeleteUploadedImage,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceMancoDeleteUploadedImage {
  position: absolute;
  right: 0;
  z-index: 9999;
  bottom: 0;
}
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceDeleteUploadedImage .material-symbols-outlined,
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceMancoDeleteUploadedImage .material-symbols-outlined,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceDeleteUploadedImage .material-symbols-outlined,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceMancoDeleteUploadedImage .material-symbols-outlined,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceDeleteUploadedImage .material-symbols-outlined,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceMancoDeleteUploadedImage .material-symbols-outlined,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceDeleteUploadedImage .material-symbols-outlined,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceMancoDeleteUploadedImage .material-symbols-outlined {
  font-size: 40px;
  color: #D50000;
  cursor: pointer;
}
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceViewUploadedImage,
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceMancoViewUploadedImage,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceViewUploadedImage,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceMancoViewUploadedImage,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceViewUploadedImage,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceMancoViewUploadedImage,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceViewUploadedImage,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceMancoViewUploadedImage {
  position: absolute;
  right: 40px;
  z-index: 9999;
  bottom: 0;
}
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceViewUploadedImage .material-symbols-outlined,
#service-taken #all-services .serviceImageUploads .serviceImageUploadDiv .serviceMancoViewUploadedImage .material-symbols-outlined,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceViewUploadedImage .material-symbols-outlined,
#service-taken #all-services .serviceImageUploads .serviceMancoImageUploadDiv .serviceMancoViewUploadedImage .material-symbols-outlined,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceViewUploadedImage .material-symbols-outlined,
#service-taken #all-services .serviceMancoImageUploads .serviceImageUploadDiv .serviceMancoViewUploadedImage .material-symbols-outlined,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceViewUploadedImage .material-symbols-outlined,
#service-taken #all-services .serviceMancoImageUploads .serviceMancoImageUploadDiv .serviceMancoViewUploadedImage .material-symbols-outlined {
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}

#serviceActionType .radio-input input {
  display: none;
}
#serviceActionType .radio-input {
  --container_width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 9999px;
  background-color: #fff;
  color: #000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
}
#serviceActionType .radio-input label {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 14px;
}
#serviceActionType .radio-input label:has(input:checked) {
  color: #fff;
}
#serviceActionType .radio-input label:has(input:checked) ~ .radio-input-selection {
  background-color: #03a9f4;
  display: inline-block;
}
#serviceActionType .radio-input label:nth-child(1):has(input:checked) ~ .radio-input-selection {
  transform: translateX(0%);
}
#serviceActionType .radio-input label:nth-child(2):has(input:checked) ~ .radio-input-selection {
  transform: translateX(100%);
}
#serviceActionType .radio-input label:nth-child(3):has(input:checked) ~ .radio-input-selection {
  transform: translateX(200%);
}
#serviceActionType .radio-input label:nth-child(4):has(input:checked) ~ .radio-input-selection {
  transform: translateX(300%);
}
#serviceActionType .radio-input label:nth-child(5):has(input:checked) ~ .radio-input-selection {
  transform: translateX(400%);
}
#serviceActionType .radio-input label:nth-child(6):has(input:checked) ~ .radio-input-selection {
  transform: translateX(500%);
}
#serviceActionType .radio-input label:nth-child(7):has(input:checked) ~ .radio-input-selection {
  transform: translateX(600%);
}
#serviceActionType .radio-input label:nth-child(8):has(input:checked) ~ .radio-input-selection {
  transform: translateX(700%);
}
#serviceActionType .radio-input label:nth-child(9):has(input:checked) ~ .radio-input-selection {
  transform: translateX(800%);
}
#serviceActionType .radio-input label:nth-child(10):has(input:checked) ~ .radio-input-selection {
  transform: translateX(900%);
}
#serviceActionType .radio-input-selection {
  display: none;
  position: absolute;
  height: 105%;
  width: calc(var(--container_width) / 2);
  z-index: 0;
  left: 0;
  top: -1px;
  transition: 0.15s ease;
}

#ORDERS #vragenHeader {
  padding: 6px 12px;
  background-color: #03a9f4;
  color: #FFF;
  width: 100%;
}
#ORDERS #vragenHeader h2,
#ORDERS #vragenHeader span {
  color: #FFF;
}
#ORDERS .vragenContent .inmeet-row {
  width: 100%;
  margin: 0;
}
@media screen and (max-width: 768px) {
  #ORDERS .vragenContent .inmeet-row > div:nth-child(1) {
    width: 35%;
  }
  #ORDERS .vragenContent .inmeet-row > div:nth-child(2) {
    width: 65%;
  }
}
#ORDERS .vragenContent .inmeet-row:nth-child(even) {
  background-color: #f9f9f9;
}
#ORDERS .vragenContent .inmeet-row .remove-top-bottom-padding {
  padding: 0 12px;
  display: flex;
  align-items: center;
}
#ORDERS .vragenContent .inmeet-row .border-right {
  border-right: 1px solid #000;
}
#ORDERS .vragenContent .inmeet-row .border-bottom {
  border-bottom: 1px solid #000;
}
#ORDERS .vragenContent .inmeet-row .inmeet-row-options > div {
  row-gap: 12px;
}
#ORDERS .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem {
  width: 100%;
  max-width: 25%;
}
@media screen and (max-width: 1400px) {
  #ORDERS .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem {
    max-width: 33.3333333%;
  }
}
@media screen and (max-width: 768px) {
  #ORDERS .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem {
    max-width: 100%;
  }
}
#ORDERS .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=checkbox] {
  -webkit-appearance: initial;
  appearance: initial;
  width: 28px !important;
  max-height: 28px !important;
  min-height: 28px !important;
  height: 28px !important;
  border: 1px solid lightgray !important;
  margin-right: 0.5em;
  position: relative;
  padding: 0 !important;
}
#ORDERS .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=checkbox].PRECHECKED:before {
  content: "X";
  color: #c1c1c1;
  background-color: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 30px;
}
#ORDERS .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=text] {
  width: 100px;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid #000 !important;
  margin-left: 0.5em;
}
#ORDERS .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=text]:focus {
  outline: none;
  border: none !important;
  border-bottom: 1px solid #000 !important;
}
#ORDERS .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input.PRECHECKED:before {
  content: "X";
  color: #c1c1c1;
  background-color: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 30px;
}
#ORDERS .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=checkbox]:checked {
  background: #FFF;
}
#ORDERS .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=checkbox]:checked.planner:before {
  content: "X";
  color: #c1c1c1;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 34px;
}
#ORDERS .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem input[type=checkbox]:checked.cover:before {
  content: "Ø";
  color: rgba(3, 169, 244, 0.7411764706);
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 34px;
}
#ORDERS .vragenContent .inmeet-row .inmeet-row-options .questionOptionItem label {
  font-size: 14px;
  font-weight: bold;
}
#ORDERS .vragenContent .inmeet-row:last-of-type .border-bottom {
  border-bottom: none;
}

@media screen and (max-width: 1400px) {
  #MANCOINDEX .row table {
    border: 0;
    box-shadow: none;
  }
  #MANCOINDEX .row table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #MANCOINDEX .row table tr {
    border-bottom: 24px solid #eeeeee;
    display: block;
  }
  #MANCOINDEX .row table td {
    border-bottom: 1px solid #eeeeee;
    display: block;
    text-align: right;
    min-height: 49px;
  }
  #MANCOINDEX .row table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  #MANCOINDEX .row table td:last-child {
    border-bottom: 0;
  }
}

.confirmation-check {
  background: #EEFAFF;
}
.confirmation-check .confirmation-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #858585;
  padding: 8px 4px;
  align-items: center;
}
.confirmation-check .confirmation-container.Goedgekeurd {
  color: #202533;
}
.confirmation-check .confirmation-container.Goedgekeurd label {
  color: #202533;
}
.confirmation-check .confirmation-container .sendForJudgement {
  color: #03a9f4;
  border: none !important;
}
.confirmation-check .confirmation-container .sendForJudgement:hover {
  color: rgb(2.0708502024, 116.6578947368, 168.4291497976);
  cursor: pointer;
}
.confirmation-check .confirmation-container .confirmation-show-button {
  display: flex;
  align-items: center;
}
.confirmation-check .confirmation-container input[type=radio] {
  display: block;
}
.confirmation-check .confirmation-container input[type=radio]:checked + label {
  background: none;
}
.confirmation-check .confirmation-container label {
  color: #858585 !important;
  border: none !important;
}
.confirmation-check .confirmation-container span {
  width: fit-content;
  text-align: center;
  display: block;
}
.confirmation-check .confirmation-container button {
  width: 49%;
  text-align: center;
  display: block;
}
.confirmation-check .confirmation-container .label-info {
  width: 100% !important;
}
.confirmation-check .checkbox-container {
  display: flex;
  align-items: center;
}
.confirmation-check .checkbox-container label:hover {
  color: #03a9f4;
  cursor: pointer;
}
.confirmation-check .options-container {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.confirmation-check .options-container input[function=succes] {
  background-color: #00C853;
  color: #fff;
  border: none !important;
}
.confirmation-check .options-container input[function=failure] {
  background-color: #c11111;
  color: #fff;
  border: none !important;
}
.confirmation-check .options-container input[function=sendForJudgement] {
  background-color: #03a9f4;
  color: #fff;
  border: none !important;
}
.confirmation-check .options-container input,
.confirmation-check .options-container span {
  padding: 6px 12px;
  margin: 0;
  font-size: 13px;
  text-align: center;
  width: calc(33.3333333% - 8px);
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.confirmation-check .options-container input:hover,
.confirmation-check .options-container span:hover {
  color: #fff;
  background-color: #0277BD;
  cursor: pointer;
}
@media screen and (max-width: 1650px) {
  .confirmation-check .options-container input,
  .confirmation-check .options-container span {
    width: calc(50% - 8px);
  }
}
@media screen and (max-width: 1400px) {
  .confirmation-check .options-container input,
  .confirmation-check .options-container span {
    width: calc(33.3333333% - 8px);
  }
}
@media screen and (max-width: 480px) {
  .confirmation-check .options-container input,
  .confirmation-check .options-container span {
    width: calc(50% - 8px);
  }
}

.offerte-flow .order-container .transport.tab .card .transportImageUploadLabel .transportPreviewImage {
  height: 200px;
  width: auto;
}

#verloflijst {
  overflow: hidden;
  height: 40vh;
  max-height: 40vh;
}
#verloflijst .absencebuttons {
  margin-bottom: 1em;
  border: 1px solid #bbbbbb;
  width: fit-content;
  margin: auto 0 auto auto;
  border-radius: 5px;
}
#verloflijst .absencebuttons button {
  background-color: rgba(255, 255, 255, 0);
  color: #000;
  padding: 1px;
  font-size: 17px;
  font-weight: bold;
  width: 50px;
}
#verloflijst .absencebuttons button span {
  margin: auto;
}
#verloflijst .absencebuttons .btn-edit {
  border-right: 1px solid #bbbbbb;
  border-radius: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
#verloflijst .absencebuttons .btn-edit:hover {
  background-color: #FF8F00;
  color: #fff;
}
#verloflijst .absencebuttons .btn-afkeuren {
  border-right: 1px solid #bbbbbb;
  border-radius: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
#verloflijst .absencebuttons .btn-afkeuren:hover {
  background-color: #D50000;
  color: #fff;
}
#verloflijst .absencebuttons .btn-delete {
  border-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
#verloflijst .absencebuttons .btn-delete:hover {
  background-color: #D50000;
  color: #fff;
}
#verloflijst .absencebuttons .btn-goedkeuren {
  border-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
#verloflijst .absencebuttons .btn-goedkeuren:hover {
  background-color: #00C853;
  color: #fff;
}
#verloflijst .absenceitem {
  align-items: center;
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  position: relative;
}
#verloflijst .absenceitem .date-border {
  border: 1px solid #dddddd;
  padding: 3px 6px;
  border-radius: 4px;
}
#verloflijst .absenceitem .popuptextdiv:hover .popuptext {
  display: block;
  background-color: #FFF;
  right: 126px;
  top: 0;
  bottom: 0;
  height: fit-content;
  margin: auto 0;
  padding: 5px 10px;
  width: 50%;
  box-shadow: 0 0 4px 0 #9d9d9d;
}
#verloflijst .absenceitem .popuptextdiv .popuptext {
  display: none;
  position: absolute;
}
#verloflijst .absenceitem .table-sub-item {
  margin: auto 0 auto auto;
}
#verloflijst .bg-goed {
  background-color: #B9F6CA;
}
#verloflijst .bg-af {
  background-color: #FF8A80;
}

.afkeurenpopup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: fit-content;
  width: 60%;
  max-height: 50vh;
  box-shadow: 0 0 4px 0 #b1b1b1;
}
.afkeurenpopup span {
  text-align: center;
  width: 100%;
  display: block;
}
.afkeurenpopup .error-message {
  display: none;
  background-color: #FF8A80;
  margin: 5px 0;
  padding: 5px 0;
  border-radius: 5px;
  font-weight: bold;
}
.afkeurenpopup .card-header {
  text-align: center;
  padding-bottom: 10px;
}
.afkeurenpopup .card-header .closepopup {
  width: fit-content !important;
  position: absolute;
  top: 3px;
  right: 3px;
  cursor: pointer;
}
.afkeurenpopup textarea {
  line-height: 20px;
  padding: 0 12px;
  border: 1px solid #eee;
  border-radius: 0px;
  width: 100%;
  margin: 3px 0;
  box-sizing: border-box;
}
.afkeurenpopup #submitverlofkeuring {
  margin: 0 0 0 auto;
}
.afkeurenpopup select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  width: 100%;
  margin: 3px 0;
  box-sizing: border-box;
  width: 100%;
}
.afkeurenpopup select:focus {
  border: 1px solid #858585;
}
.afkeurenpopup input[type=text], .afkeurenpopup input[type=password], .afkeurenpopup input[type=datetime-local], .afkeurenpopup input[type=number] {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  width: 100%;
  margin: 3px 0;
  box-sizing: border-box;
  width: 100%;
}
.afkeurenpopup input[type=text]:focus, .afkeurenpopup input[type=password]:focus, .afkeurenpopup input[type=datetime-local]:focus, .afkeurenpopup input[type=number]:focus {
  border: 1px solid #858585;
  outline: 0;
}
.afkeurenpopup input[type=number] {
  padding-right: 0;
}
.afkeurenpopup #closepopup {
  margin: auto;
}
.afkeurenpopup .align-items-center {
  align-items: center;
}

.status-progress ::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.status-progress ::-webkit-scrollbar-thumb {
  background-color: #202533;
  width: 6px;
  border-radius: 6px;
}
.status-progress .card-body {
  display: flex;
  overflow-x: scroll;
  padding-bottom: 24px;
  margin-bottom: -24px;
}
.status-progress .status-update {
  width: 25px;
  height: 25px;
  border-radius: 9999px;
  border: 1px solid #03a9f4;
  background-color: #fff;
  z-index: 2;
  position: relative;
  box-sizing: border-box;
}
.status-progress .status-update.active {
  background-color: #03a9f4;
}
.status-progress .header-name {
  padding-top: 15px;
  font-weight: bold;
  width: 100%;
  font-size: 14px;
}
.status-progress .status-container {
  flex-shrink: 0;
}
.status-progress .header-wrapper {
  position: relative;
}
.status-progress .header-wrapper::after {
  content: "";
  width: 100%;
  border: 1px solid #eeeeee;
  position: absolute;
  right: -28px;
  top: 12.5px;
  transform: translateY(-50%);
  z-index: 1;
}
.status-progress .status-container:last-child .header-wrapper {
  position: unset;
}
.status-progress .status-container:last-child .header-wrapper::after {
  content: unset;
}
.status-progress .status-wrapper {
  padding-top: 24px;
}
.status-progress .inner-status-update {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  border: 1px solid #03a9f4;
  margin-top: 2px;
  margin-right: 14px;
  background-color: #fff;
  z-index: 2;
  box-sizing: border-box;
}
.status-progress .inner-status-update.active {
  background-color: #03a9f4;
}
.status-progress .inner-status-update[key=Manco].active {
  background-color: #ffae00;
  color: rgb(204, 149.6, 0);
}
.status-progress .inner-status-wrapper {
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  position: relative;
}
.status-progress .inner-status-wrapper::after {
  content: "";
  height: 100%;
  left: 4px;
  top: 17px;
  position: absolute;
  border: 1px solid #eeeeee;
  z-index: 1;
}
.status-progress .inner-status-wrapper:last-child {
  position: unset;
}
.status-progress .inner-status-wrapper:last-child::after {
  content: unset;
}

.table-horizontal-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-horizontal-scroll table {
  min-width: 100%;
}

.table-horizontal-scroll th,
.table-horizontal-scroll td {
  white-space: nowrap;
}

.table {
  border-spacing: 0;
  border-collapse: collapse;
  border-radius: 10px;
  width: 100%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}
.table#dynamicAddRemove tbody tr input[type=number] {
  max-width: unset;
}
.table#dynamicAddRemove tbody tr input[type=text] {
  width: auto;
}
.table thead,
.table .mid-thead {
  color: #202533;
}
.table thead th,
.table .mid-thead th {
  padding: 12px;
  white-space: nowrap;
  background: #F5F5F5;
  text-align: left;
}
.table thead th a,
.table .mid-thead th a {
  display: flex;
  align-items: center;
}
.table thead th:first-child:not(.mid-th),
.table .mid-thead th:first-child:not(.mid-th) {
  border-top-left-radius: 10px;
}
.table thead th:last-child:not(.mid-th),
.table .mid-thead th:last-child:not(.mid-th) {
  border-top-right-radius: 10px;
}
.table .mid-thead {
  border-top: 1px solid rgba(210, 210, 210, 0.5);
}
.table tbody {
  background: #fff;
}
.table tbody tr:hover {
  background: #F5F5F5;
}
.table tbody tr.active {
  background: #EEFAFF;
}
.table tbody tr:last-child th {
  border-bottom-left-radius: 5px;
}
.table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}
.table tbody tr th {
  color: #202533;
  padding: 12px;
  text-align: left;
}
.table tbody tr td {
  color: #858585;
  white-space: wrap;
  padding: 12px;
}
.table tbody tr td .percentagepaid-container {
  width: fit-content;
}
.table tbody tr td .percentagepaid-container .percentagepaid {
  width: fit-content;
  border: none;
}
.table tbody tr td .material-symbols-outlined {
  height: fit-content;
}
.table tbody tr td:not([data-row=truck]) .material-symbols-outlined {
  color: #03a9f4;
}
.table tbody tr input[type=number] {
  max-width: 50px;
}

#TableColumnfilterOptions th {
  padding-top: 0;
  padding-bottom: 0;
}
#TableColumnfilterOptions th .percentDOWN {
  color: #fe8982 !important;
  font-size: 23px;
}
#TableColumnfilterOptions th .percentUP {
  color: #3fbb3f !important;
  font-size: 23px;
}
#TableColumnfilterOptions th .percentSYMBOL {
  color: #8a8a8a !important;
  font-size: 17px;
}

.masterform {
  width: max-content;
}

.ga-sync th .material-symbols-outlined {
  color: #202533;
}

.configurator-container {
  text-align: center;
  padding: 0 60px 0 60px;
}
.configurator-container .hidden-elements {
  display: none;
}
.configurator-container .configurator-outer {
  position: relative;
  margin: auto;
  display: inline-block;
}
.configurator-container .configurator-inner {
  display: flex;
  justify-content: center;
  position: relative;
  border: 8px solid #202533;
}
.configurator-container .configurator-inner > table {
  margin: auto;
}
.configurator-container .configurator-inner button[class^=conf-button] {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #03a9f4;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.configurator-container .configurator-inner button[class^=conf-button] span {
  color: #fff;
}
.configurator-container .configurator-inner button[class^=conf-button]:hover {
  background: #0277BD;
  transform: scale(1.05);
  cursor: pointer;
}
.configurator-container .configurator-inner .conf-button-left {
  top: calc(50% - 20px);
  left: -75px;
}
.configurator-container .configurator-inner .conf-button-right {
  top: calc(50% - 20px);
  right: -75px;
}
.configurator-container .configurator-inner .conf-col {
  display: flex;
  outline: 8px solid transparent;
}
.configurator-container .configurator-inner .conf-col.row-col {
  flex-direction: column;
}
.configurator-container .configurator-inner .conf-col.col-col {
  flex-direction: row;
}
.configurator-container .configurator-inner .conf-col:hover {
  outline: 8px solid #03a9f4;
  z-index: 2;
}
.configurator-container .configurator-inner .conf-col:hover .conf-item {
  border: 8px solid #03a9f4;
}
.configurator-container .configurator-inner .conf-item {
  border: 8px solid #202533;
  position: relative;
  min-height: 80px;
  min-width: 80px;
  flex: 1;
  background: linear-gradient(45deg, rgba(3, 169, 244, 0.7007177871) 0%, rgba(255, 255, 255, 0.5382528011) 30%, rgba(32, 179, 245, 0.5074404762) 54%, rgba(255, 255, 255, 0.6446953782) 74%, rgba(3, 169, 244, 0.3197654062) 100%);
}
.configurator-container .configurator-inner .conf-item:hover .settings {
  opacity: 1;
  top: calc(50% - 80px);
  left: calc(50% - 80px);
  width: 160px;
  height: 160px;
}
.configurator-container .configurator-inner .conf-item .settings {
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  opacity: 0;
  z-index: 2;
}
.configurator-container .configurator-inner .conf-item .settings .conf-button-edit {
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  z-index: 1;
}
.configurator-container .configurator-inner .conf-item .settings .conf-button-edit .icon-closed {
  display: none;
}
.configurator-container .configurator-inner .conf-item .settings .conf-button-split-row,
.configurator-container .configurator-inner .conf-item .settings .conf-button-settings,
.configurator-container .configurator-inner .conf-item .settings .conf-button-split-col,
.configurator-container .configurator-inner .conf-item .settings .conf-button-delete {
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  z-index: 0;
  opacity: 0;
  transition: all 0.1s ease-in-out;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}
.configurator-container .configurator-inner .conf-item .settings .conf-button-delete {
  background: #D50000;
}
.configurator-container .configurator-inner .conf-item .settings .conf-button-delete:hover {
  background: rgb(187.5, 0, 0);
}
.configurator-container .configurator-inner .conf-item .settings.active .conf-button-edit .icon-closed {
  display: block;
}
.configurator-container .configurator-inner .conf-item .settings.active .conf-button-edit .icon-settings {
  display: none;
}
.configurator-container .configurator-inner .conf-item .settings.active .conf-button-split-row {
  opacity: 1;
  top: calc(50% - 80px);
  left: calc(50% - 20px);
}
.configurator-container .configurator-inner .conf-item .settings.active .conf-button-split-row.disabled {
  opacity: 0.3;
}
.configurator-container .configurator-inner .conf-item .settings.active .conf-button-split-col {
  opacity: 1;
  top: calc(50% - 65px);
  left: calc(50% + 25px);
}
.configurator-container .configurator-inner .conf-item .settings.active .conf-button-split-col.disabled {
  opacity: 0.3;
}
.configurator-container .configurator-inner .conf-item .settings.active .conf-button-settings {
  opacity: 1;
  top: -45px;
  left: -45px;
  top: calc(50% - 65px);
  left: calc(50% - 65px);
}
.configurator-container .configurator-inner .conf-item .settings.active .conf-button-delete {
  opacity: 1;
  top: calc(50% - 20px);
  left: calc(50% + 40px);
}

.configurator-cmd {
  background: #202533;
  padding: 24px;
  border-radius: 10px;
  color: #fff;
  max-height: 400px;
  overflow-y: scroll;
}
.configurator-cmd .array-tab,
.configurator-cmd .settings-tab,
.configurator-cmd .col-tab,
.configurator-cmd .item-tab {
  display: none;
}
.configurator-cmd .array-tab.active,
.configurator-cmd .settings-tab.active,
.configurator-cmd .col-tab.active,
.configurator-cmd .item-tab.active {
  display: block;
}

#groeneveld-get-list {
  padding: 0 12px;
}

@media screen and (max-width: 1200px) {
  #settings_pricelist_top .right-side {
    flex-wrap: wrap;
  }
}

#settings_pricelist_top.price-list-top,
#settings_pricelist_cats.price-list-top {
  box-shadow: 0 0 4px 0 #e1e1e1;
}
#settings_pricelist_top.price-list-top .left-side,
#settings_pricelist_cats.price-list-top .left-side {
  padding: 4px;
  background-color: #ffffff;
}
#settings_pricelist_top.price-list-top .right-side .percentagePerWebshop,
#settings_pricelist_top.price-list-top .right-side .percentagePerCategory,
#settings_pricelist_cats.price-list-top .right-side .percentagePerWebshop,
#settings_pricelist_cats.price-list-top .right-side .percentagePerCategory {
  width: 184px;
}
#settings_pricelist_top.price-list-top .right-side .percentagePerWebshop label,
#settings_pricelist_top.price-list-top .right-side .percentagePerCategory label,
#settings_pricelist_cats.price-list-top .right-side .percentagePerWebshop label,
#settings_pricelist_cats.price-list-top .right-side .percentagePerCategory label {
  padding: 4px;
  color: #FFF;
  border-left: 3px solid black;
  width: 80px;
  font-weight: bold;
}
#settings_pricelist_top.price-list-top .right-side .percentagePerWebshop input,
#settings_pricelist_top.price-list-top .right-side .percentagePerCategory input,
#settings_pricelist_cats.price-list-top .right-side .percentagePerWebshop input,
#settings_pricelist_cats.price-list-top .right-side .percentagePerCategory input {
  width: 100%;
  padding: 4px;
  width: 80px;
}
#settings_pricelist_top.price-list-top .right-side .percentagePerWebshop .affix,
#settings_pricelist_top.price-list-top .right-side .percentagePerCategory .affix,
#settings_pricelist_cats.price-list-top .right-side .percentagePerWebshop .affix,
#settings_pricelist_cats.price-list-top .right-side .percentagePerCategory .affix {
  padding: 4px;
  color: #000;
  font-weight: bold;
  width: 24px;
  text-align: center;
}
#settings_pricelist_top.price-list-top .right-side .percentagePerWebshop.online,
#settings_pricelist_top.price-list-top .right-side .percentagePerCategory.online,
#settings_pricelist_cats.price-list-top .right-side .percentagePerWebshop.online,
#settings_pricelist_cats.price-list-top .right-side .percentagePerCategory.online {
  background-color: #0277BD;
}
#settings_pricelist_top.price-list-top .right-side .percentagePerWebshop.outlet,
#settings_pricelist_top.price-list-top .right-side .percentagePerCategory.outlet,
#settings_pricelist_cats.price-list-top .right-side .percentagePerWebshop.outlet,
#settings_pricelist_cats.price-list-top .right-side .percentagePerCategory.outlet {
  background-color: #D50000;
}
#settings_pricelist_top.price-list-top .right-side .percentagePerWebshop.partners,
#settings_pricelist_top.price-list-top .right-side .percentagePerCategory.partners,
#settings_pricelist_cats.price-list-top .right-side .percentagePerWebshop.partners,
#settings_pricelist_cats.price-list-top .right-side .percentagePerCategory.partners {
  background-color: #FF8F00;
}

#settings_pricelist_cats #headCategory {
  background-color: #f5f5f5;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #settings_pricelist_cats #bodyCategories .bodyCategory {
    border-bottom: 1px solid #000;
  }
}
@media screen and (max-width: 768px) {
  #settings_pricelist_cats #bodyCategories .bodyCategory .right-side {
    flex-wrap: wrap;
  }
}

#table-count {
  margin-top: 24px !important;
  display: block;
  padding: 12px;
  background: #ffffff;
  border-radius: 4px;
  width: fit-content;
  min-width: 100px;
  text-align: center;
  box-shadow: 0 0 4px 0 #e1e1e1;
}

#settings_pricelist_articles {
  margin-top: 0px;
}
@media screen and (max-width: 1400px) {
  #settings_pricelist_articles table {
    border: 0;
    box-shadow: none;
  }
  #settings_pricelist_articles table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #settings_pricelist_articles table tr {
    border-bottom: 24px solid #eeeeee;
    display: block;
  }
  #settings_pricelist_articles table td {
    border-bottom: 1px solid #eeeeee;
    display: block;
    text-align: right;
    min-height: 49px;
  }
  #settings_pricelist_articles table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  #settings_pricelist_articles table td:last-child {
    border-bottom: 0;
  }
}

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