@charset "UTF-8";
:root {
  --charcoal:#211F1A;
  --charcoal-soft:#2B2822;
  --cream:#F7F1E7;
  --paper:#FCF9F3;
  --paper:#EDE8E3 ;
  --clay:#106E81;
  --clay-dark:#007BA8;
  --clay-tint:#c3dbe0;
  --sage:#F37331;
  --sage-soft:#FF7933;
  --stone:#E3D8C4;
  --stone-line:#CBBC9F;
  --ink:#2E2A22;
  --ink-soft:#6B6555;
  --ink-faint:#8C8674;
  --white:#FFFFFF;
  --shadow: 0 20px 50px -20px rgba(33, 31, 26, 0.25);
}
.moveable-control-box .moveable-line {
  background-color: var(--clay) !important;
}
.moveable-rotation-control {
  width: 24px !important;
  height: 24px !important;
  margin-top: -12px !important;
  margin-left: -12px !important;
  background: #fff !important;
  border: 1.5px solid var(--clay) !important;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}
.moveable-rotation-control::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23106E81' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.6-6.1'/%3E%3Cpath d='M20.5 3.5v5h-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  pointer-events: none;
}
.moveable-rotation-control:hover {
  border-color: var(--clay-dark, #007BA8) !important;
}
.moveable-control {
  background: var(--clay) !important;
}
#wpadminbar {
  display: none !important;
}
/* Crimson_Text */
@font-face {
  font-family: "Crimson";
  src: url("../font/Crimson_Text/CrimsonText-Regular.woff") format("woff"), url("../font/Crimson_Text/CrimsonText-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "CrimsonPro";
  src: url("../font/Crimson_Pro/CrimsonPro-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "CrimsonPro";
  src: url("../font/Crimson_Pro/CrimsonPro-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Awesome Season";
  src: url("../font/awesome_season/AwesomeSeason.woff") format("woff"), url("../font/awesome_season/AwesomeSeason.woff") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Mark Light";
  src: url("../font/mark/Mark-Light.woff") format("woff"), url("../font/mark/Mark-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Mark Book";
  src: url("../font/mark/Mark-Book.woff") format("woff"), url("../font/mark/Mark-Book.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* Aphrodite */
@font-face {
  font-family: "Aphrodite";
  src: url("../font/Aphrodite Slim/Aphrodite-Slim-Pro.woff") format("woff"), url("../font/Aphrodite Slim/Aphrodite-Slim-Pro.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "comicneue";
  src: url("../font/comicneue/ComicNeue-Regular.woff") format("woff"), url("../font/comicneue/ComicNeue-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "comicneue";
  src: url("../font/comicneue/ComicNeue-Bold.woff") format("woff"), url("../font/comicneue/ComicNeue-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
/* GARAMOND */
@font-face {
  font-family: "Garamond";
  src: url("../font/garamond/Garamond.woff") format("woff"), url("../font/garamond/Garamond.ttf") format("truetype"), url("../font/garamond/Garamond.svg#Garamond") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Garamond";
  src: url("../font/garamond/Garamond-Bold.woff") format("woff"), url("../font/garamond/Garamond-Bold.ttf") format("truetype"), url("../font/garamond/Garamond-Bold.svg#Garamond-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Garamond";
  src: url("../font/garamond/Garamond-Italic.woff") format("woff"), url("../font/garamond/Garamond-Italic.ttf") format("truetype"), url("../font/garamond/Garamond-Italic.svg#Garamond-Italic") format("svg");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Garamond";
  src: url("../font/garamond/OriginalGaramondBT-BoldItalic.woff") format("woff"), url("../font/garamond/OriginalGaramondBT-BoldItalic.ttf") format("truetype"), url("../font/garamond/OriginalGaramondBT-BoldItalic.svg#OriginalGaramondBT-BoldItalic") format("svg");
  font-weight: bold;
  font-style: italic;
}
/* photograph */
@font-face {
  font-family: "photograph";
  src: url("../font/photograph/PhotographSignature.woff") format("woff"), url("../font/photograph/PhotographSignature.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* Antro Vectra */
@font-face {
  font-family: "Antrovectra";
  src: url("../font/antrovectra/AntroVectra-Normal.woff") format("woff"), url("../font/antrovectra/AntroVectra-Normal.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Antrovectra";
  src: url("../font/antrovectra/AntroVectra-Bolder.woff") format("woff"), url("../font/antrovectra/AntroVectra-Bolder.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
/* Wandhen */
@font-face {
  font-family: "Wandhen";
  src: url("../font/wandhen/Wandhen.woff") format("woff"), url("../font/wandhen/Wandhen.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* Carlinet */
@font-face {
  font-family: "Carlinet";
  src: url("../font/carlinet/Carlinet.woff") format("woff"), url("../font/carlinet/Carlinet.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* Karla Google */
@font-face {
  font-family: "Karla-google";
  src: url("../font/karla-google/Karla-Regular.woff") format("woff"), url("../font/karla-google/Karla-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Karla-google";
  src: url("../font/karla-google/Karla-Bold.woff") format("woff"), url("../font/karla-google/Karla-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Karla-google";
  src: url("../font/karla-google/Karla-Italic.woff") format("woff"), url("../font/karla-google/Karla-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
/* TilburgsAns-WEB */
@font-face {
  font-family: "Tilburg Black";
  src: url("../font/TilburgsAns/TilburgsAns-Black.woff") format("woff"), url("../font/TilburgsAns/TilburgsAns-Black.ttf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Tilburg Light";
  src: url("../font/TilburgsAns/TilburgsAns-Regular.woff") format("woff"), url("../font/TilburgsAns/TilburgsAns-Regular.ttf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Tilburg Bold";
  src: url("../font/TilburgsAns/TilburgsAns-Bold.woff") format("woff"), url("../font/TilburgsAns/TilburgsAns-Bold.ttf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Tilburg Regular";
  src: url("../font/TilburgsAns/TilburgsAns-Regular.woff") format("woff"), url("../font/TilburgsAns/TilburgsAns-Regular.ttf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
/* POPPINS */
@font-face {
  font-family: "Poppins";
  src: url("../font/poppins/Poppins-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Poppins";
  src: url("../font/poppins/Poppins-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Poppins";
  src: url("../font/poppins/Poppins-SemiBold.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Poppins";
  src: url("../font/poppins/Poppins-SemiBoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}
/* Snell Roundhand */
@font-face {
  font-family: "snellroundhand";
  src: url("../font/snellroundhand/SnellRoundhandLTStd-Scr.woff") format("woff"), url("../font/snellroundhand/SnellRoundhandLTStd-Scr.ttf") format("truetype"), url("../font/snellroundhand/SnellRoundhandLTStd-Scr.svg#SnellRoundhandLTStd-Scr") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "snellroundhand";
  src: url("../font/snellroundhand/SnellRoundhandLTStd-BdScr.woff") format("woff"), url("../font/snellroundhand/SnellRoundhandLTStd-BdScr.ttf") format("truetype"), url("../font/snellroundhand/SnellRoundhandLTStd-BdScr.svg#SnellRoundhandLTStd-BdScr") format("svg");
  font-weight: bold;
  font-style: normal;
}
/* Roboto */
@font-face {
  font-family: "Roboto";
  src: url("../font/Roboto/Roboto-Regular.woff") format("woff"), url("../font/Roboto/Roboto-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("../font/Roboto/Roboto-Bold.woff") format("woff"), url("../font/Roboto/Roboto-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("../font/Roboto/Roboto-BoldItalic.woff") format("woff"), url("../font/Roboto/Roboto-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: "Roboto";
  src: url("../font/Roboto/Roboto-Italic.woff") format("woff"), url("../font/Roboto/Roboto-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*********************************************************** SECTIONS ********************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
body, html {
  -webkit-text-size-adjust: none !important;
  -ms-text-size-adjust: none !important;
  -moz-text-size-adjust: none !important;
  text-size-adjust: none !important;
  margin: 0 !important;
}
@media (max-width: 1200px) {
  .btn {
    font-size: 0.9rem !important;
  }
  .category-thumb, .category-thumb img {
    width: 64px !important;
    height: 64px !important;
  }
}
.btn-close {
  background: none !important;
  opacity: 1 !important;
}
body .element.image .transform {
  outline: none !important;
}
.canvas-ruler.horizontal, .canvas-ruler.vertical {
  position: absolute !important;
}
.canvas-ruler.horizontal {
  height: 30px;
  left: 0;
  right: 0;
  background: green;
}
.canvas-ruler.vertical {
  width: 30px;
  top: 0;
  bottom: 0;
  right: 0;
  background: blue;
}
.canvas-ruler-marker {
  width: 10px !important;
  display: block !important;
  /* height: 0; */
  position: absolute !important;
  top: -100px !important;
  bottom: -100px !important;
  background: red;
}
.canvas-ruler-marker:hover {
  cursor: move;
}
/*****************************************************************************************************************************/
html > body, .picker__holder {
  overflow: hidden;
}
#canvasControls {
  transition: all 0.5s ease;
  position: absolute;
  z-index: 10000;
  background: white;
  border-radius: 24px;
  box-shadow: rgba(149, 157, 165, 0.2) 0 2px 8px;
  right: 10px;
  top: 5px;
}
#canvasControls:not(.active) #marginToolbar {
  display: none;
}
#canvasControls.active #toggleMarginToolbar {
  background-color: #106E81;
  border-color: #106E81;
}
#canvasControls.active #toggleMarginToolbar .fa-bars {
  display: none;
}
#canvasControls:not(.active) #toggleMarginToolbar .fa-times {
  display: none;
}
#marginToolbar {
  z-index: 10000;
}
#marginToolbar .form-control {
  padding: 6px 5px;
}
.custom-checkbox {
  height: 24px;
  width: 24px;
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 2px black;
  border-radius: 2px;
}
#showBorders:not(.active) i {
  display: none !important;
}
#showBorders .custom-checkbox {
  margin: 4px;
}
#showBorders, #showAlert, #toggleGrid {
  text-align: center;
  padding: 0;
  line-height: 32px;
  font-size: 20px;
  margin-top: 0;
}
#toggleMarginToolbar {
  color: #222;
  width: 36px;
  line-height: 32px;
}
#canvasControls .margin-toolbar-action {
  width: 32px;
  height: 32px;
  text-align: center;
  display: inline-block;
  position: relative;
}
#canvasControls .margin-toolbar-action:not(#showBorders).active:after, #canvasControls .margin-toolbar-action:not(#showBorders).active, #canvasControls .margin-toolbar-action:not(#showBorders).active *, #canvasControls .margin-toolbar-action:not(#showBorders):hover * {
  fill: #106E81 !important;
  color: #106E81 !important;
}
#canvasControls .margin-toolbar-action:hover {
  cursor: pointer;
}
#marginToolbar > *.btn.active:hover, #marginToolbar > *.btn.active:hover svg {
  color: #106E81;
}
#marginToolbar > *.btn:hover:not(.active), #marginToolbar > *.btn.active {
  background-color: #F37331;
  border-color: #F37331;
  color: #106E81;
}
#toggleRulers svg {
  transform: rotate(90deg);
  margin: 5px;
}
#toggleMidlineHelpers, #toggleRulers {
  padding: 0;
}
#canvasControls.active #toggleMarginToolbar:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 32px;
  border-bottom: 1px solid #f1f1f1;
  z-index: 1;
}
#marginToolbar .btn {
  width: 36px;
  height: 36px;
}
#marginToolbar .btn:hover svg {
  fill: #F37331;
}
#marginToolbar .btn svg {
  fill: white;
  width: 100%;
  height: 100%;
  padding: 5px;
}
#marginToolbar {
  width: 32px;
}
.btn-rnd {
  height: 32px;
  line-height: 32px;
  border-radius: 999px;
  padding: 0 12px;
  border: 0;
  min-width: 124px;
  color: #fff;
  font-size: 14px;
}
.btn-preview-text-doc {
  align-items: center;
  background-color: #F37331;
  color: #FFFFFF;
  height: 32px;
  line-height: 32px;
  border-radius: 999px;
  padding: 0 12px;
  border: 0;
  min-width: 124px;
  font-size: 14px;
}
.btn-preview-text-doc:hover {
  background: #404040;
  color: #FFFFFF;
}
.btn-rnd.primary {
  background: #F37331;
}
.float-end {
  float: right !important;
}
.float-end .btn-rnd {
  margin-left: 10px;
}
.btn-rnd.ui-grey {
  background: #6B6555;
}
.btn-rnd.ui-terairy {
  background: #2E2A22;
}
.gotoQr {
  text-decoration: none;
  text-align: center;
}
.modal .btn {
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
  border-radius: 25px !important;
  font-size: 14px;
  box-shadow: rgba(149, 157, 165, 0.3) 0 4px 8px;
}
.btn-rnd.ui-terairy:hover, .btn-rnd.ui-grey:hover {
  opacity: 0.75;
}
.btn-rnd.primary:hover {
  background: #6B6555;
}
#canvasArea #viewFaq {
  background: #F37331;
  padding: 5px 20px;
  border-radius: 2px;
  color: #fff;
  z-index: 10000;
  min-width: 164px;
  text-align: center;
  display: block;
  line-height: 38px;
}
#canvasArea .workspace-overflow {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#viewUserManual {
  background: #F37331;
  padding: 0 14px;
  z-index: 10000;
  text-align: center;
  display: block;
  border-radius: 999px;
  color: #fff;
  height: 28px;
  line-height: 28px;
  box-shadow: rgba(149, 157, 165, 0.2) 0 2px 8px;
}
#viewUserManual:hover {
  background: #211F1A;
  text-decoration: none;
}
#viewUserManual img {
  max-height: 28px !important;
  height: 28px;
  line-height: 28px;
}
.faq-item i {
  padding-right: 20px;
}
.clearSearch:hover, .category-filter-item:hover, .faq-item h2:hover {
  cursor: pointer;
}
#faqModal ul {
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow-y: scroll;
}
.search-bar {
  position: relative;
  float: right;
  width: 360px;
  padding-bottom: 20px;
  padding-top: 10px;
}
#faqModal .clearSearch {
  position: absolute;
  top: 20px !important;
}
.category-filter-item:hover, .category-filter-item.active {
  background: #106E81;
}
.category-filter-item {
  list-style: none;
  font-size: 18px;
  margin-bottom: 1px;
  padding: 10px 20px 10px 20px;
  color: #fff;
  background: #F37331;
  line-height: 18px;
}
.faq-item h2 {
  font-size: 18px;
  padding: 10px 20px 10px 20px;
  color: #fff;
  background: #F37331;
  margin: 0;
  line-height: 18px;
}
.faq-item .faq-body {
  background: white;
  color: black;
  padding: 20px;
}
.faq-item .faq-category {
  background: #FF7933;
  font-size: 18px;
  padding: 10px 20px 10px 20px;
}
.faq-item {
  padding: 0;
  margin: 0;
}
.faq-item .faq-body, .faq-item .faq-category {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.faq-item.active .fa-plus, .faq-item:not(.active) .fa-times, .faq-item:not(.active) .faq-body, .faq-item:not(.active) .faq-category {
  display: none !important;
}
#canvasArea {
  width: 100%;
  height: 100%;
}
.logical-viewport {
  position: relative;
  margin: 0 auto;
}
.element.complex-image .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.element.complex-image .compound-image-photo-box {
  overflow: hidden;
}
.element.complex-image .compound-image-photo-box > img, .element.complex-image .compound-image-photo-box .clipperMask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.element.complex-image .compound-image-photo-box .clipperMask img {
  display: block !important;
  width: 100%;
  height: 100%;
}
.element.complex-image .compound-image-mask {
  display: block;
}
.element.complex-image .compound-image-photo-box.compound-drag-active {
  outline: solid 1px #2990cc;
  cursor: move;
}
.element.complex-image .compound-image-resize-handle {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2990cc;
  border: 1px solid #fff;
  cursor: nwse-resize;
  z-index: 10;
}
body.printing-image-cropper-open .moveable-control-box, body.printing-image-cropper-open .moveable-area {
  pointer-events: none !important;
}
/* Logical view label above the canvas */
/* The tags above the card (printing-template.php): the page, and for a
   tekstwissel the version of the text. Anchored to #contentArea like the old
   #logical-face-label, so they stay put at any zoom, pan or scroll. */
.canvas-tags {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 100px);
}
.canvas-tag-wrap {
  position: relative;
}
.canvas-tag-sep {
  width: 1px;
  height: 18px;
  background: rgba(46, 42, 34, 0.18);
  margin: 0 2px;
}
.canvas-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px 0 12px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 15px;
  background: #fff;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: rgba(149, 157, 165, 0.2) 0 2px 8px;
  cursor: pointer;
}
.canvas-tag .material-icons {
  font-size: 16px;
  color: #8C8674;
}
.canvas-tag .material-icons:last-child {
  margin-right: -3px;
}
.canvas-tag:hover, .canvas-tag.open {
  border-color: var(--clay);
}
.canvas-tag:disabled {
  cursor: default;
  border-color: transparent;
  padding-right: 12px;
}
.canvas-tag:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.canvas-tag-version .material-icons:first-child {
  color: var(--clay);
}
.canvas-tag-version.is-version {
  background: var(--clay);
  color: #fff;
  border-color: var(--clay);
}
.canvas-tag-version.is-version .material-icons {
  color: #fff;
}
.canvas-tag-version.is-version:hover, .canvas-tag-version.is-version.open {
  background: var(--clay-dark);
  border-color: var(--clay-dark);
}
.canvas-tag-add {
  color: var(--clay-dark);
}
.canvas-tag-add .material-icons {
  color: var(--clay);
}
.canvas-tag-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  min-width: 200px;
  padding: 6px;
  background: #fff;
  border: 1px solid #D9CDB8;
  border-radius: 12px;
  box-shadow: 0 14px 34px -14px rgba(46, 42, 34, 0.35);
}
.canvas-tag-menu > button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #2E2A22;
  cursor: pointer;
}
.canvas-tag-menu > button:hover {
  background: #EFE8DC;
}
.canvas-tag-menu > button.on {
  background: #e0ecef;
  color: var(--clay-dark);
}
.canvas-tag-menu > button > .material-icons {
  font-size: 18px;
  color: var(--clay);
  flex-shrink: 0;
}
.canvas-tag-menu > button > span:not(.material-icons) {
  flex: 1;
  min-width: 0;
}
.canvas-tag-menu > button small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: #8C8674;
  white-space: normal;
}
.canvas-tag-menu-versions {
  min-width: 280px;
}
.canvas-tag-menu-actions {
  display: inline-flex;
  gap: 2px;
  flex: 0 0 auto !important;
}
.canvas-tag-menu-actions i {
  font-size: 17px !important;
  padding: 3px;
  border-radius: 6px;
  color: #8C8674 !important;
}
.canvas-tag-menu-actions i:hover {
  background: #fff;
  color: var(--clay-dark) !important;
}
@media (max-width: 768px) {
  .canvas-tags {
    max-width: calc(100% - 24px);
  }
  .canvas-tag span:not(.material-icons) {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* A tekstwissel on screen: the elements that stay the master's wear a tag
   (text-version-locks.component.js). Sizes counter-scaled for the zoom. */
.tv-locks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6000;
}
.tv-lock {
  box-sizing: border-box;
  border-style: dashed;
  border-color: rgba(140, 134, 116, 0.55);
  border-radius: 2px;
}
.tv-lock-tag {
  position: absolute;
  left: 0;
  top: -3px;
  transform-origin: bottom left;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  background: rgba(46, 42, 34, 0.72);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}
.tv-lock-tag .material-icons {
  font-size: 12px;
}
/* The version dialog (text-version-dialog.component.js). */
.tvd-root {
  position: fixed;
  inset: 0;
  z-index: 2000100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tvd-dim {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 15, 0.55);
}
.tvd-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 70px -30px rgba(20, 18, 15, 0.6);
  font-family: "Nunito", "Work Sans", system-ui, sans-serif;
}
.tvd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid #EFE8DC;
}
.tvd-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay-dark);
}
.tvd-title {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 800;
  color: #2E2A22;
  line-height: 1.25;
}
.tvd-close {
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #F4EFE6;
  color: #6B6154;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.tvd-close .material-icons {
  font-size: 20px;
}
.tvd-close:hover {
  background: #EFE8DC;
  color: #2E2A22;
}
.tvd-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tvd-lede {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #6B6154;
}
.tvd-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}
.tvd-field > span {
  font-size: 12.5px;
  font-weight: 700;
  color: #2E2A22;
}
.tvd-field input {
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1.5px solid #D9CDB8;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: #2E2A22;
}
.tvd-field input:focus {
  outline: 0;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px #e0ecef;
}
.tvd-fields-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: #2E2A22;
}
.tvd-count {
  font-weight: 600;
  color: #8C8674;
}
.tvd-empty {
  margin: 0;
  font-size: 13px;
  color: #8C8674;
}
.tvd-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tvd-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8C8674;
  margin-top: 4px;
}
.tvd-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--clay-dark);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.tvd-link:hover {
  text-decoration: underline;
}
.tvd-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 9px 11px;
  border: 1.5px solid #EFE8DC;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.35;
  color: #2E2A22;
}
.tvd-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.tvd-option:hover {
  border-color: #D9CDB8;
}
.tvd-option.on {
  border-color: var(--clay);
  background: #e0ecef;
}
.tvd-option:has(input:focus-visible) {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.tvd-mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 5px;
  border: 1.5px solid #CBBC9F;
  background: #fff;
  display: grid;
  place-items: center;
  color: #fff;
}
.tvd-mark .material-icons {
  font-size: 13px;
  opacity: 0;
}
.tvd-option.on .tvd-mark {
  background: var(--clay);
  border-color: var(--clay);
}
.tvd-option.on .tvd-mark .material-icons {
  opacity: 1;
}
.tvd-option-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tvd-option-text b {
  font-weight: 700;
}
.tvd-option-text small {
  font-size: 12px;
  color: #6B6154;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tvd-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: #F9E4DF;
  color: #8A2F1F;
  font-size: 12.5px;
  font-weight: 600;
}
.tvd-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid #EFE8DC;
}
.tvd-hint {
  flex: 1;
  font-size: 11.5px;
  color: #8C8674;
}
.tvd-btn {
  height: 36px;
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid #D9CDB8;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #2E2A22;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.tvd-btn:hover {
  border-color: var(--clay);
}
.tvd-btn.primary {
  background: var(--clay);
  border-color: var(--clay);
  color: #fff;
}
.tvd-btn.primary:hover {
  background: var(--clay-dark);
  border-color: var(--clay-dark);
}
html, body {
  width: 100%;
  height: 100%;
  font-family: "lato", Arial, Helvetica, sans-serif;
}
/* FORMS */
.form-control {
  border-radius: 0px;
  border: none;
  background-color: #eee;
}
/* This parent can be any width and height */
.va-block {
  text-align: center;
  height: 100%;
}
/* The ghost, nudged to maintain perfect centering */
.va-block:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: 0;
}
.category-thumb {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
}
.category-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.image-edit-panel .selected-image-preview {
  width: 100%;
  aspect-ratio: 1.6;
  background: var(--stone);
  border: 1px solid var(--stone-line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-edit-panel .selected-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.image-edit-panel .form-label {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}
.image-edit-panel .form-control {
  height: 40px;
  border: 1px solid var(--stone-line);
  border-radius: 9px;
  color: var(--ink);
  background-color: var(--white);
  font-size: 13px;
  font-weight: 600;
}
.image-edit-panel .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(16, 110, 129, 0.25);
  border-color: var(--clay);
}
.image-edit-panel .size-row {
  display: flex;
  gap: 12px;
}
.image-edit-panel .size-row .form-group {
  flex: 1;
  margin-bottom: 0;
}
.image-edit-panel .image-action-row {
  display: flex;
  gap: 16px;
}
.image-edit-panel .image-action-row .form-group {
  flex: 1;
  min-width: 0;
}
.image-edit-panel .image-action-buttons {
  display: flex;
  gap: 8px;
}
.image-edit-panel .image-action-buttons .btn-icon-square {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  border: 1px solid var(--stone-line);
  background: var(--white);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.image-edit-panel .image-action-buttons .btn-icon-square .material-icons {
  font-size: 18px;
}
.image-edit-panel .image-action-buttons .btn-icon-square:hover {
  background: var(--stone);
}
.image-edit-panel .image-action-buttons .btn-icon-square.danger {
  color: #087595;
}
.image-edit-panel .image-action-buttons .btn-icon-square.danger:hover {
  background: rgba(8, 117, 149, 0.12);
}
.image-edit-panel .image-action-buttons .btn-icon-square.active {
  border-color: var(--clay);
  color: var(--clay);
  background: var(--stone);
}
.image-edit-panel .slider-field .slider-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.image-edit-panel .slider-field .slider-field-header .form-label {
  margin-bottom: 0;
}
.image-edit-panel .slider-field .slider-value {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}
.image-edit-panel .slider-field .form-range {
  width: 100%;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  accent-color: var(--clay);
}
.image-edit-panel .slider-field .form-range::-webkit-slider-thumb {
  -webkit-appearance: auto;
}
.image-edit-panel .slider-field .form-range::-moz-range-thumb {
  -moz-appearance: auto;
}
.image-edit-panel .slider-field .form-range::-webkit-slider-runnable-track {
  background-color: transparent;
}
.image-edit-panel .slider-field .form-range::-moz-range-track {
  background-color: transparent;
}
.printing-image-cropper-component .printing-image-cropper-container {
  max-height: 60vh;
  overflow: hidden;
}
.printing-image-cropper-component .printing-image-cropper-container img {
  max-height: 60vh;
}
.printing-image-cropper-component .cropper-canvas, .printing-image-cropper-component .cropper-view-box img {
  display: block !important;
}
.printing-image-cropper-component .modal-content {
  border: none;
  border-radius: 12px;
  overflow: hidden;
}
.printing-image-cropper-component .modal-header {
  background: var(--charcoal);
  color: var(--cream);
  padding: 16px 20px;
}
.printing-image-cropper-component .modal-header .modal-title {
  color: var(--cream);
  font-size: 16px;
  font-weight: 700;
}
.printing-image-cropper-component .modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(2);
  opacity: 0.8;
}
.printing-image-cropper-component .modal-header .btn-close:hover {
  opacity: 1;
}
.printing-image-cropper-component .modal-footer {
  border-top: 1px solid var(--stone-line);
  padding: 14px 20px;
}
.printing-image-cropper-component .cropper-ratio-container {
  display: flex;
  gap: 6px;
  margin-right: 16px;
}
.printing-image-cropper-component .btn-cropper-ratio {
  border: 1px solid var(--stone-line);
  background: var(--white);
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.printing-image-cropper-component .btn-cropper-ratio:hover {
  background: var(--stone);
}
.printing-image-cropper-component .btn-cropper-ratio.active {
  background: var(--clay);
  color: var(--white);
  border-color: var(--clay);
}
.printing-image-cropper-component .zoom-container {
  display: flex;
  gap: 8px;
  margin-right: auto;
}
.printing-image-cropper-component .btn-icon-square {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--stone-line);
  background: var(--stone);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.printing-image-cropper-component .btn-icon-square .material-icons {
  font-size: 20px;
}
.printing-image-cropper-component .btn-icon-square:hover {
  background: var(--clay);
  color: var(--white);
  border-color: var(--clay);
}
.printing-image-cropper-component .btn-cropper-secondary {
  border: 1px solid var(--stone-line);
  background: var(--white);
  color: var(--ink);
  border-radius: 8px;
  padding: 8px 18px;
  font-weight: 600;
  cursor: pointer;
}
.printing-image-cropper-component .btn-cropper-secondary:hover {
  background: var(--stone);
}
.printing-image-cropper-component .btn-cropper-primary {
  border: none;
  background: var(--clay);
  color: var(--white);
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 700;
  cursor: pointer;
}
.printing-image-cropper-component .btn-cropper-primary:hover {
  background: var(--clay-dark);
}
/* The element to be centered, can
   also be of any width and height */
.va-centered {
  display: inline-block;
  vertical-align: middle;
}
.loaderWrapper {
  opacity: 1;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #FFF;
  z-index: 100000000;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}
.modal-loader {
  text-align: center;
}
.modal-loader:not(.loading) {
  padding: 20px;
  text-align: center;
}
.modal-loader:not(.loading) {
  display: none;
}
.loaderWrapper .va-centered {
  padding: 15px;
  color: #000;
  /* background-color:rgba(255, 255, 255, 1); */
}
.loader {
  text-align: center;
}
.loaderWrapper .va-centered .title {
  padding: 5px;
  font-size: 16px;
  color: #FFF;
  background-color: #106E81;
  margin: -15px -15px 15px -15px;
}
/* default */
.loaderWrapper .va-centered .loaderIcon {
  margin: 15px 25px 15px 25px;
  font-size: 65px;
  color: #b5b5b5;
}
.loaderWrapper .va-centered .loaderProgress {
  font-size: 24px;
  margin-bottom: 0px;
  margin-top: 0px;
}
.loaderWrapper .va-centered .loaderProgress .progress-bar {
  background-color: #106E81;
}
.loaderWrapper .loader-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  margin-left: -60px;
  margin-top: -60px;
}
.loaderWrapper .loader-line-mask {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  overflow: hidden;
  -webkit-transform-origin: 60px 60px;
  -moz-transform-origin: 60px 60px;
  -o-transform-origin: 60px 60px;
  -ms-transform-origin: 60px 60px;
  transform-origin: 60px 60px;
  -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
}
.loaderWrapper .loader-line-mask .loader-line {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}
.loaderWrapper.remove {
  opacity: 0;
}
.alert {
  border-radius: 0;
}
.content-section {
  position: relative;
  background-color: #FFF;
}
.content-section h1 {
  color: #FFF;
  display: block;
  width: 100%;
  text-align: center;
}
.btn-koffie {
  float: right;
  margin-top: 15px;
}
/* home - editor */
.canvasTopBar {
  padding: 10px;
  margin-left: -15px;
  background-color: #fff;
  display: block;
  width: calc(100% + 30px);
  height: 70px;
}
.canvasTopBar a.prevnext {
  display: inline-block;
  padding: 12px 8px;
  color: #F37331;
  border: 1px solid #eee;
  border-radius: 5px;
  margin: 0 5px;
}
.content-section#editor {
  z-index: 1;
  background-color: #f5f5f5;
  color: #333;
  padding: 0;
  width: 100%;
  height: calc(100% - 40px);
}
.content-section#editor > .row, .content-section#editor > .row .col {
  height: 100%;
}
.interface-body #contentArea {
  flex: 1;
  margin: 0 !important;
  height: 100% !important;
  z-index: 10;
  position: relative;
}
.secondary-toolbar-active .interface-body #contentArea {
  top: 41px !important;
}
#canvasAreaWrapper {
  left: 0px;
  top: 0px;
  overflow: auto;
  width: calc(100% - 0px);
  height: calc(100%);
}
/* Workspace environment */
.workspace-overflow {
  background-color: var(--paper);
  padding: 100px !important;
  position: relative;
}
.canvas-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6B6555;
  z-index: 10;
  padding: 0;
}
.canvas-nav-arrow:hover {
  color: var(--clay);
}
.canvas-nav-arrow.disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.canvas-nav-arrow.canvas-nav-prev {
  left: 24px;
}
.canvas-nav-arrow.canvas-nav-next {
  right: 24px;
}
.canvaskit-fps-hud {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 20;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font: 11px/1.4 monospace;
  white-space: nowrap;
  pointer-events: none;
}
.field-label-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
  margin-top: -4px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--clay);
  color: #fff;
  font: 700 10px/1.4 "Work Sans", sans-serif;
  white-space: nowrap;
  pointer-events: none;
}
.ai-busy-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 16;
  box-sizing: border-box;
  overflow: hidden;
  transform-origin: center center;
  background: rgba(251, 248, 244, 0.55);
  backdrop-filter: blur(3px) saturate(0.8);
  -webkit-backdrop-filter: blur(3px) saturate(0.8);
  outline: 2px solid var(--clay);
  outline-offset: -1px;
  cursor: progress;
  pointer-events: auto;
  animation: ai-busy-fade-in 0.2s ease both;
}
.ai-busy-overlay .ai-busy-inner {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
}
.ai-busy-overlay .ai-busy-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(360px, 100%);
  box-sizing: border-box;
  padding: 12px 16px 14px;
  border-radius: 12px;
  background: var(--clay-tint);
  border: 1px solid rgba(16, 110, 129, 0.25);
  box-shadow: 0 8px 24px -10px rgba(33, 31, 26, 0.35);
  font-family: "Work Sans", system-ui, sans-serif;
  text-align: left;
}
.ai-busy-overlay .ai-busy-spinner {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(16, 110, 129, 0.25);
  border-top-color: var(--clay);
  animation: ai-busy-spin 0.8s linear infinite;
}
.ai-busy-overlay .ai-busy-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ai-busy-overlay .ai-busy-text strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--clay-dark);
  line-height: 1.3;
}
.ai-busy-overlay .ai-busy-text span {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.ai-busy-overlay .ai-busy-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(16, 110, 129, 0.15);
}
.ai-busy-overlay .ai-busy-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  background: var(--clay);
  border-radius: 3px;
  animation: ai-busy-slide 1.4s ease-in-out infinite;
}
.ai-busy-overlay.is-compact .ai-busy-card {
  padding: 9px 12px 11px;
  gap: 8px;
}
.ai-busy-overlay.is-compact .ai-busy-text span {
  display: none;
}
.ai-busy-overlay.is-compact .ai-busy-text strong {
  font-size: 12px;
}
.ai-busy-overlay.is-tiny .ai-busy-card {
  padding: 8px;
}
.ai-busy-overlay.is-tiny .ai-busy-text {
  display: none;
}
@keyframes ai-busy-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ai-busy-slide {
  0% {
    left: -35%;
  }
  100% {
    left: 100%;
  }
}
@keyframes ai-busy-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ai-busy-overlay .ai-busy-bar i {
    animation: none;
    left: 0;
    width: 100%;
    opacity: 0.5;
  }
}
.field-label-box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 14;
  box-sizing: border-box;
  border: 1.5px solid var(--clay);
  border-radius: 3px;
  opacity: 0.45;
  pointer-events: none;
}
.canvas-settings-toggle {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6B6555;
  z-index: 10;
  padding: 0;
}
.canvas-settings-toggle .material-icons {
  font-size: 20px;
}
.canvas-settings-toggle:hover {
  color: var(--clay);
}
.canvas-settings-overlay {
  position: absolute;
  top: 54px;
  left: 8px;
  z-index: 11;
  width: 300px;
  max-width: calc(100% - 16px);
  max-height: calc(100% - 62px);
  overflow-y: auto;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid #D3C8BC;
  border-radius: 14px;
  box-shadow: 0 18px 40px -14px rgba(43, 37, 33, 0.35), 0 2px 6px rgba(43, 37, 33, 0.06);
}
.settings-controls {
  --cs-ink: #2B2521;
  --cs-ink-2: #5E554E;
  --cs-muted: #978C82;
  --cs-line: #E6DED5;
  --cs-line-strong: #D3C8BC;
  --cs-surface-2: #F8F5F1;
  --cs-accent: #106E81;
  --cs-accent-soft: #dbe9ec;
  --cs-accent-ink: #007BA8;
  font-family: "Nunito", "Work Sans", "Segoe UI", system-ui, sans-serif;
  color: var(--cs-ink);
  font-size: 13px;
  line-height: 1.35;
}
.settings-controls .cs-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--cs-line);
}
.settings-controls .cs-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cs-muted);
}
.settings-controls .cs-title {
  font-size: 15px;
  font-weight: 800;
  margin-top: 1px;
}
.settings-controls .cs-section {
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--cs-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-controls .cs-section:last-child {
  border-bottom: 0;
}
.settings-controls .cs-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cs-muted);
  margin-bottom: 2px;
}
.settings-controls .cs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  margin: 0;
  border: 1px solid var(--cs-line);
  border-radius: 9px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.settings-controls .cs-row:hover {
  background: var(--cs-surface-2);
}
.settings-controls .cs-row:focus-within {
  border-color: var(--cs-accent);
}
.settings-controls .cs-row-select {
  cursor: default;
}
.settings-controls .cs-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-controls .cs-row-text b {
  font-weight: 700;
  font-size: 13px;
}
.settings-controls .cs-row-text small {
  font-size: 11.5px;
  color: var(--cs-ink-2);
  line-height: 1.3;
}
.settings-controls .cs-switch {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 36px;
  height: 21px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--cs-line-strong);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}
.settings-controls .cs-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
.settings-controls .cs-switch:checked {
  background: var(--cs-accent);
}
.settings-controls .cs-switch:checked::after {
  transform: translateX(15px);
}
.settings-controls .cs-switch:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--cs-accent-soft);
}
.settings-controls .cs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-controls .cs-input {
  display: flex;
  align-items: center;
  height: 36px;
  border: 1px solid var(--cs-line-strong);
  border-radius: 7px;
  background: #fff;
  padding: 0 9px 0 10px;
  gap: 6px;
  cursor: text;
}
.settings-controls .cs-input:focus-within {
  border-color: var(--cs-accent);
  box-shadow: 0 0 0 3px var(--cs-accent-soft);
}
.settings-controls .cs-input input, .settings-controls .cs-input select {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cs-ink);
  font: inherit;
  font-weight: 700;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  margin: 0;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}
.settings-controls .cs-input input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.settings-controls .cs-input input::-webkit-inner-spin-button, .settings-controls .cs-input input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.settings-controls .cs-input select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 4px;
}
.settings-controls .cs-input-select {
  width: 96px;
  flex-shrink: 0;
  cursor: pointer;
}
.settings-controls .cs-unit {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cs-muted);
  flex-shrink: 0;
}
.settings-controls .cs-chev {
  font-size: 18px;
  color: var(--cs-muted);
  pointer-events: none;
  margin-left: -4px;
}
.settings-controls .cs-help {
  margin: 0;
  font-size: 11.5px;
  color: var(--cs-ink-2);
  line-height: 1.4;
}
.interface-body #contentArea #canvasArea {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content-section#editor #optionArea {
  background-color: #fff;
  overflow-y: auto;
  z-index: 9999;
  width: 240px;
}
.ps__rail-x {
  bottom: 60px !important;
  position: fixed !important;
}
#contentArea .ps--active-x > .ps__rail-x, #contentArea .ps--active-y > .ps__rail-y {
  z-index: 9999;
}
#sidesArea {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #106E81;
  color: #fff;
}
.content-section#editor #contentArea #footerArea {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #2E2A22;
  color: #fff;
}
.content-section#editor #contentArea #footerArea p {
  text-align: center;
  margin-top: 15px;
  font-size: 10px;
  color: #b1a890;
}
.content-section#editor #contentArea #footerArea p .white {
  color: #ffffff;
  font-size: 10px;
}
#canvasWrapper {
  position: relative;
}
#canvas {
  position: relative;
  margin: auto;
  background-color: #fff;
  transform-origin: center center;
  z-index: 10;
  -webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);
}
#canvasOverlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
#canvasElements {
  z-index: 2;
}
#canvasOverlay {
  z-index: 1;
}
#editor:not(.elements-selected):not(.editor-active) #canvas-backdrop {
  display: none !important;
}
#canvas #canvas-grid {
  opacity: 0.5 !important;
}
#canvas #canvas-backdrop {
  background-color: rgba(0, 0, 0, 0.35);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.text-helper-tooltip {
  width: 320px !important;
  max-width: 320px !important;
}
#text-helper .info-footer #next-field:hover {
  background-color: #F37331 !important;
  cursor: pointer;
}
#text-helper .info-footer #next-field {
  background-color: #2E2A22;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  display: block;
  float: right;
  padding: 0 5px;
  border-radius: 2px;
}
#text-helper .info-footer {
  border-top: solid 1px white;
}
#text-helper .info-footer, #text-helper .info-block {
  background: #106E81;
  display: block;
  position: relative !important;
  height: auto;
  float: left;
  width: 100%;
  padding: 5px;
  font-size: 10px;
  color: #fff;
}
#text-helper .info-footer {
  padding: 3px 5px;
}
#editor .element:hover .transform, #editor.elements-selected .element.selected .transform {
  z-index: 4005;
  background-color: rgba(255, 255, 255, 0.5);
}
#editor.elements-selected #canvas-backdrop {
  z-index: 1800;
}
.guide .icon-close {
  padding: 5px;
  color: red;
}
.guide .icon-close:hover {
  cursor: pointer !important;
}
#canvas-grid {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.6;
  background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 1mm), repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 1mm);
}
#canvas-grid.active {
  display: block;
}
#canvas-creme {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
  background: rgba(255, 255, 204, 0.25);
  pointer-events: none;
}
#canvas-creme.active {
  display: block;
}
#canvas::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--drk-bleed-left, 3mm));
  top: calc(-1 * var(--drk-bleed-top, 3mm));
  bottom: calc(-1 * var(--drk-bleed-bottom, 3mm));
  right: calc(-1 * var(--drk-bleed-right, 3mm));
  z-index: 6000;
  pointer-events: none;
  opacity: 0.5;
  outline: 1px dashed var(--charcoal);
}
#canvas::before {
  content: "";
  position: absolute;
  left: 0mm;
  top: 0mm;
  bottom: 0mm;
  right: 0mm;
  z-index: 6000;
  pointer-events: none;
  border: var(--drk-safe-margin, 3mm) solid rgba(0, 0, 0, 0.1);
  outline: 1px solid rgba(0, 0, 0, 0.5);
}
#canvas-safe-print-margins {
  pointer-events: none;
}
.rouwpagina-preview {
  position: relative;
  height: 245px;
  width: 480px;
  outline: solid 2px white;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}
.ho-background img {
  width: 100%;
  height: 100%;
}
.ho-background {
  max-width: 100%;
  position: absolute;
}
.product-advertentie #canvas-margins {
  border: none !important;
}
#canvas-safe-print-margins, #canvas-margins {
  display: block;
  position: absolute;
  background: transparent;
  z-index: 4001;
  pointer-events: none;
}
#canvas-safe-print-margins {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#canvas-margins {
  border: 1px dashed #106E81;
  top: -3mm;
  left: -3mm;
  right: -3mm;
  bottom: -3mm;
}
#canvas-safe-print-margins {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
}
#canvas-safe-print-margins.horizontal {
  flex-direction: row;
  -ms-flex-direction: row;
}
#canvas-safe-print-margins .sub-section {
  -webkit-box-flex: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;
  /* OLD - Firefox 19- */
  -webkit-flex: 1;
  /* Chrome */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
#canvas-safe-print-margins .sub-section {
  border-color: rgba(16, 110, 129, 0.25) !important;
}
#canvas-page {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4002;
  background: transparent;
  pointer-events: none;
}
.custom-foldline {
  top: 0;
  bottom: 0;
  position: absolute;
  border-left: 1px dashed #F37331;
  z-index: 4001;
}
.canvas-foldline {
  display: block;
  background: transparent;
  pointer-events: none;
}
/* De veiligheidsmarge langs de ril (getFoldSafeMarginStyles()). Kleur en
   breedte komen uit de stijl die de methode meegeeft, zodat hij gelijk blijft
   met de band rondom de kaart (#canvas::before). */
.canvas-foldline-safe {
  display: block;
  pointer-events: none;
}
/* FlapKaartModal */
#flapkaart-modal {
  z-index: 99999;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
#flapkaart-modal #canvas-margins {
  width: calc(100% + 4mm);
  height: calc(100% + 6mm);
  left: -1mm;
  right: -3mm;
  top: -3mm;
  bottom: -3mm;
  pointer-events: none !important;
}
#flapkaart-modal.crop-modal .modal-body {
  height: 70vh;
  overflow-y: scroll;
}
#flapkaart-canvas .modal-content {
  height: auto !important;
}
#flapkaart-canvas {
  background: white;
  padding: 50px 25px 10px 25px;
}
#flapkaart-modal .prevent-reposition {
  -webkit-transform: none;
  transform: none;
}
#flapkaart-modal .modal-header h4:hover {
  cursor: pointer !important;
}
#flapkaart-modal .modal-header h4.active, #flapkaart-modal .modal-header h4:hover {
  color: #106E81;
}
#destroyFlapkaartModal {
  top: 7px;
}
#flapkaart-modal p {
  font-size: 14px;
}
#flapkaart-modal .modal-header h4:first-child {
  margin-left: 50px;
}
#flapkaart-modal .modal-header h4:nth-child(4) {
  margin-right: 50px;
}
#flapkaart-modal {
  display: flex !important;
}
#flapkaart-modal .modal-header h4 {
  margin: 0;
  line-height: 42px;
  height: 42px;
  padding: 0 10px;
}
#flapkaart-modal .modal-header {
  display: flex;
  padding-right: 100px !important;
}
#flapkaart-modal .inside-page .transparancy-overlay {
  background: white;
  opacity: 0.6;
  position: absolute;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 148mm;
  width: 145mm;
  z-index: 3001;
}
#flapkaart-modal .card-back .transparancy-overlay {
  background: white;
  opacity: 0.6;
  position: absolute;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0mm;
  width: 148mm;
  z-index: 3001;
}
#flapkaart-modal.modal-rescale.modal-preview .modal-body {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  height: 100%;
}
#flapkaart-modal .zoom-action-buttons {
  left: calc(50% - 35px);
  display: flex;
  justify-content: center;
  position: absolute;
}
#flapkaart-modal.modal-rescale .modal-dialog {
  -webkit-transform: none;
  transform: none;
  width: calc(100% - 40px);
  max-width: none !important;
}
.flip-card-border {
  position: absolute;
  border-right: dotted 1px white;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  z-index: 900;
}
.flip-card {
  height: 148mm;
  perspective: 100rem;
  position: absolute;
  right: 57mm;
  transition: all 1s ease;
  visibility: hidden;
  width: 148mm;
  z-index: 100;
}
/* The outer container's visibility is set to hidden. This is to make everything within the container NOT set to hidden  */
/* This is done so content in the inside page can be selected */
.flip-card > * {
  visibility: visible;
}
/* An inner container to hold the flip card. This excludes the inside page */
.flip-card__container {
  height: 100%;
  position: absolute;
  right: 0;
  transform-origin: left;
  transform-style: preserve-3d;
  transition: all 1s ease;
  width: 100%;
}
.card-front, .card-back {
  backface-visibility: hidden;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.card-front {
  overflow: hidden;
}
/* Styling for the back side of the flip card */
.card-back {
  background-color: #fafbfa;
  transform: rotateY(180deg);
  overflow: hidden;
}
/* Inside page */
.inside-page {
  background-color: #fafbfa;
  box-shadow: inset 20rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.25);
  height: 100%;
  position: absolute;
  right: 0;
  transition: all 1s ease;
  width: 205mm;
  z-index: 1;
  overflow: hidden;
}
.inside-page__container {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
  width: 100%;
}
.keepratio.checkbox {
  width: 300px;
  margin-left: 10px;
  margin-top: -3px;
  font-size: 12px;
  height: 24px;
  position: relative;
}
#updateRasterImageCollage:hover {
  cursor: pointer;
}
#updateRasterImageCollage svg, #addRasterImageCollage svg {
  max-width: 30px !important;
  height: 30px;
}
.keepratio.checkbox i {
  position: absolute;
  left: 3px;
  font-size: 16px;
}
.keepratio.checkbox:not(.checked) i {
  display: none !important;
}
.keepratio.checkbox > * {
  float: left;
  height: 24px;
  line-height: 24px;
}
/* This is to keep the card centered (within its container) when opened */
.rouwkaart-preview {
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: -0.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.5);
  height: 148mm;
  position: relative;
  transition: all 1s ease;
  width: 148mm;
  margin: 0 auto;
}
.rouwkaart-preview:hover {
  cursor: pointer;
}
.rouwkaart-preview.open {
  box-shadow: -0.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.75);
  width: 353mm;
}
/* When the card is hovered, the flip card container will rotate */
.rouwkaart-preview.open .flip-card__container {
  transform: rotateY(-180deg);
}
.rouwkaart-preview.open .view-card .view-card-inner span:nth-child(1) {
  display: none;
}
.rouwkaart-preview:not(.open) .view-card .view-card-inner span:nth-child(2) {
  display: none;
}
.view-card-inner {
  border: solid 1px white;
  border-radius: 2px;
}
.rouwkaart-preview .view-card:hover {
  background: #FF7933;
}
.rouwkaart-preview .view-card span {
  height: 42px;
  line-height: 42px;
  font-size: 16px;
}
.rouwkaart-preview .view-card {
  position: absolute;
  z-index: 9000;
  background: #F37331;
  color: white;
  width: 130px;
  padding: 3px;
  height: 50px;
  line-height: 42px;
  font-size: 16px;
  border-radius: 2px;
  left: calc(50% - 160px);
  top: calc(50% - 32px);
  text-align: center;
}
/* When the card is hovered, the shadow on the inside page will shrink to the left */
.rouwkaart-preview.open .inside-page {
  box-shadow: inset 1rem 0px 5rem -2.5rem rgba(0, 0, 0, 0.1);
}
/* Styling for the front side of the flip card */
/* container for the front side */
.card-front {
  background-color: #fafbfa;
  height: 148mm;
  width: 148mm;
}
#canvas-clone .canvas-horizontal-toolbar {
  display: none !important;
}
#canvas-clone {
  background: white;
  position: relative;
  margin: 0 auto;
  -webkit-transform-origin: center 0;
  transform-origin: center 0;
  z-index: 10;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}
/* Canvas Bottom/Top Toolbar */
.canvas-horizontal-toolbar#canvas-tools-top {
  top: -35px;
}
.canvas-horizontal-toolbar#canvas-tools-bottom {
  bottom: -35px;
}
.canvas-horizontal-toolbar {
  left: 0;
  right: 0;
  position: absolute;
  height: 24px;
}
/* Canvas Left/Right Toolbar */
.canvas-vertical-toolbar {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  width: 0;
}
.canvas-vertical-toolbar > .toolbar-button.disabled {
  opacity: 0;
}
.canvas-vertical-toolbar > .toolbar-button span {
  background: white;
  box-shadow: rgba(149, 157, 165, 0.2) 0 2px 8px;
  height: 38px;
  line-height: 38px;
  display: inline-block;
  width: 38px;
  border-radius: 9999px;
}
.canvas-vertical-toolbar > .toolbar-button:hover {
  cursor: pointer;
}
.canvas-vertical-toolbar > .toolbar-button:hover i {
  opacity: 1;
  background-color: rgba(16, 110, 129, 0.25);
}
.canvas-vertical-toolbar > .toolbar-button {
  height: 38px;
  width: 38px;
  text-align: center;
  font-size: 28px;
  line-height: 38px;
}
#canvas-tools-left {
  left: 24px;
}
#canvas-tools-right {
  right: 24px;
}
.element.active.compound-image.lock-position > .transform:not(.ui-resizable-disabled) > .ui-resizable-handle {
  display: none !important;
}
/* PRODUCTAREA */
#templateArea, #productArea {
  position: absolute;
  padding-top: 0;
  padding-left: 0;
  margin-top: 0;
  z-index: 9999;
}
#NaamContainer {
  position: relative;
  width: auto;
  float: left;
  min-width: 274px;
}
#nav-product-up, #nav-product-down, #templateArea .panel-default:first-child, #productArea .panel-default:first-child {
  margin-bottom: 0;
}
#templateArea .template > *, #productArea .product > * {
  float: left;
  height: 40px;
  padding: 0 20px;
  border: 1px solid #ccc;
}
.remove-block a:hover {
  cursor: pointer;
}
#templateArea .template > *:last-child, #templateArea .template > .edit-block, #templateArea .template > *:first-child, #productArea .product > *:last-child, #productArea .product > .edit-block, #productArea .product > *:first-child {
  line-height: 40px;
}
.template .image-block, .product .image-block {
  width: 48px;
  min-width: 48px;
  padding: 0 !important;
  line-height: 40px;
  overflow: hidden;
}
.template .image-block img, .product .image-block img {
  max-width: 100%;
}
#templateArea .template > .content-block, #productArea .product > .content-block {
  -webkit-box-flex: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;
  /* OLD - Firefox 19- */
  -webkit-flex: 1;
  /* Chrome */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  align-items: center;
  position: relative;
}
.template .content-block p, .product .content-block p, #templateArea .template > .content-block p, #productArea .product > .content-block p {
  font-size: 10px;
  line-height: 1;
  margin: 12px 10px 0 10px !important;
}
#templateArea .template .edit-block, #productArea .product .edit-block {
  background-color: #F37331;
  color: #fff;
  width: 40px;
  padding: 0;
}
#templateArea .template .edit-block:hover, #productArea .product .edit-block:hover {
  background-color: #FF7933;
}
.edit-block a:hover {
  background: rgba(0, 0, 0, 0.75);
}
#templateArea .template .edit-block > a, #productArea .product .edit-block > a {
  width: 36px;
  display: block;
  text-align: center;
  float: left;
}
#templateArea .template .edit-block:not(:hover), #productArea .product .edit-block:not(:hover) {
  display: none;
}
.product.product-deleted .product-deleted-warning {
  font-size: 10px !important;
  text-align: center;
}
.product.product-deleted .content-block {
  opacity: 0.8;
}
.viewSession {
  opacity: 1 !important;
}
#templateArea .template:hover .edit-block, #productArea .product:not(.product-deleted):hover .edit-block {
  display: block !important;
}
#templateArea .template .edit-block, #productArea .product .edit-block {
  z-index: 99;
  position: absolute;
  width: auto;
}
#templateArea .template.active {
  background: rgba(16, 110, 129, 0.25) !important;
}
#template-container .template:hover, #product-container .product:hover {
  cursor: pointer;
}
#product-container .product:not(.active):not(:hover) .edit-block {
  display: none !important;
}
#templateArea .template.active .edit-block, #productArea .product.active .edit-block {
  background: #106E81;
}
#templateArea .template.active .edit-block:hover, #productArea .product.active .edit-block:hover {
  background: #007BA8;
}
.template .content-block, .product .content-block {
  flex: 1;
  position: relative;
}
.product .edit-block {
  display: block !important;
  background: #333;
  width: 32px;
  line-height: 32px;
  text-align: center;
  height: 32px;
  border-radius: 25px;
  margin: 3px;
  position: absolute;
  right: 3px;
  top: 3px;
}
.product .action-menu {
  border-top: solid 1px white;
  display: none;
  float: left;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  position: absolute;
  z-index: 99;
}
.edit-block:hover .action-menu {
  display: block !important;
}
.product .action-menu a {
  width: 32px;
  height: 32px;
  background: #F37331;
  border-bottom: solid 1px #fff;
  display: block;
  float: left;
  text-align: center;
  border-radius: 24px;
  border-bottom: solid 1px #fff;
}
.product .action-menu a:hover {
  background: #106E81;
}
#specialProductTypeList .dz-preview p, #productTypeList .dz-preview p {
  text-align: center;
  margin: 0;
}
#specialProductTypeList .dz-preview p:nth-of-type(2), #productTypeList .dz-preview p:nth-of-type(2) {
  font-size: 10px;
  font-weight: bold;
}
.product .action-menu.open a:nth-child(1) {
  background-color: rgba(16, 110, 129, 0.8);
}
.product .action-menu.open a:nth-child(2) {
  background-color: rgba(16, 110, 129, 0.5);
}
.product .action-menu.open a:hover {
  background-color: #2E2A22;
}
.product .action-menu.open a {
  float: left;
  height: 40px;
  line-height: 40px;
  color: #fff;
  margin-right: 1px;
}
.product .action-menu.open .tooltip {
  position: absolute !important;
}
.product .action-menu.open a > span {
  padding-left: 16px;
}
.product .action-menu.open a > i {
  width: 40px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  display: block;
  float: left;
}
#productArea .product.active .toggle-edit {
  display: none;
}
#productArea .product:not(.active) .toggle-actions {
  display: none;
}
#openRelationshipModal svg {
  top: 8px !important;
  left: 12px !important;
}
#editor > .row:first-of-type {
  position: relative;
  z-index: 1;
}
.edit-block i {
  color: #fff;
  height: 32px;
  line-height: 32px;
}
.sp-palette-button-container, .sp-button-container, .sp-initial-disabled .sp-input-container, .sp-initial-disabled .sp-initial {
  display: none;
}
#productArea .product .remove-block i {
  color: #fff;
}
#nav-product-up, #nav-product-down {
  text-align: center;
}
#nav-product-down i, #nav-product-up i {
  font-size: 30px;
  color: #106E81;
}
#template-container, #product-container {
  margin: 0 !important;
  padding: 0 !important;
}
#template-config-container {
  margin: 0;
  padding: 0;
}
#template-config-container input.form-control, #template-config-container select.form-control {
  background: white;
  border-radius: 24px;
  min-height: 40px;
}
#template-container li, #product-container li {
  clear: both;
  width: 234px;
  float: left;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin: 0px 3px 3px 3px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 8px;
  background: white;
}
#product-container li .has-been-ordered i {
  border: solid 2px green;
  padding: 5px;
  border-radius: 99px;
  left: 4px;
  top: 4px;
}
#product-container li .has-been-ordered span {
  top: -2px;
  left: 40px;
}
#product-container li .has-been-ordered * {
  position: absolute;
}
#product-container li .has-been-ordered {
  position: absolute;
  opacity: 0.85;
  left: 5px;
  top: 5px;
  height: 32px;
  right: 0;
  width: 32px;
  color: green;
}
.respondent-akkoord-container {
  position: absolute;
  top: 5px;
  right: 30px;
}
.showRespondent, .showCopyType {
  display: none;
  position: absolute;
  background-color: #F37331;
  color: #fff;
  top: -25px;
  left: 50px;
  text-align: center;
  line-height: 26px;
  z-index: 9999;
  font-size: 10px !important;
  padding: 5px;
  border-radius: 5px;
  width: 100px;
  height: 35px;
}
.showRespondent.active, .showCopyType.active {
  display: block;
}
.showRespondent {
  font-size: 10px !important;
  line-height: 14px;
  padding: 5px 5px;
  right: 40px;
}
.toggleRespondentType:hover, .toggleCopyType:hover {
  cursor: pointer;
}
.toggleCopyType {
  top: 22px;
}
.toggleNote:not(.has-note) {
  display: none;
}
#addQr i {
  font-size: 20px;
  padding-top: 4px;
}
.productLoaderMessage {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 50px;
}
.toggleNote {
  display: block;
}
.copyType-product-name {
  font-weight: 700;
  font-size: 10px;
  float: left;
  clear: both;
  margin-left: 10px;
}
.toggleNote .product-note {
  top: calc(-100% - -46px);
  position: absolute;
}
.toggleNote .product-note textarea {
  width: 100%;
}
.toggleNote.has-note .fa-file-o {
  display: none;
}
.quickedit-clipper-container #quickeditCropImage {
  text-align: center;
}
.quickedit-clipper-container #quickeditCropImage:hover {
  cursor: pointer;
}
.quickedit-clipper-container #quickeditCropImage:hover i {
  color: #106E81;
}
.quickedit-clipper-container #quickeditCropImage i {
  color: #fff;
  width: 24px;
  height: 24px;
  font-size: 20px;
  padding: 10px 0;
}
.quickedit-clipper-container > li, .quickedit-opacity-container > li {
  width: 64px;
}
.quickedit-opacity-container .opacity-range * {
  text-align: center;
}
.quickedit-opacity-container .opacity-range i {
  max-width: 24px;
  color: #fff;
  text-align: center;
  padding: 5px 0;
}
.opacity-range-container {
  width: 100%;
  padding: 0 20px;
  display: flex;
}
.quickedit-opacity-container .opacity-range .opacity-range-container, .quickedit-opacity-container .brightness-range .brightness-range-container {
  height: 120px;
  width: 24px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.quickedit-opacity-container .opacity-range #brightnessRange, .quickedit-opacity-container .opacity-range #opacityRange, .quickedit-opacity-container .brightness-range #brightnessRange {
  transform: rotate(270deg);
  width: 120px;
  height: 120px;
}
#opacityRange, #brightnessRange {
  width: 129px;
}
.quickedit-opacity-container .opacity-range, .quickedit-opacity-container .brightness-range {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.quickedit-opacity-container .toggleFilters {
  text-align: center;
}
.quickedit-colorpicker-container .toggleFilters {
  text-align: right;
  margin-right: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
}
.quickedit-colorpicker-container .colorName {
  color: black;
}
.quickedit-colorpicker-container .selectedColor {
  border: solid 1px white;
}
.quickedit-colorpicker-container #toggleColorPickercolorPicker-imageColorInput {
  background-color: #211F1A;
}
#colorPicker-imageColorInput {
  width: 100px !important;
}
/* Compact Text Editor */
#compact-editor > div {
  float: left;
  width: 100%;
  clear: both;
}
#compact-editor #compact-mce-editor {
  background: rgba(255, 255, 255, 0.5);
  padding: 5px;
  border-radius: 4px;
}
#compact-editor .editor-body {
  padding: 10px 10px;
}
#compact-editor .editor-header, #compact-editor .editor-footer {
  padding: 10px 10px;
  font-size: 14px;
}
#compact-editor .editor-header {
  color: #fff;
  font-size: 16px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.5);
}
#compact-editor .editor-footer {
  border-top: solid 1px rgba(255, 255, 255, 0.5);
}
#compact-editor #next-field {
  background-color: #2E2A22;
  height: 24px;
  color: #fff;
  line-height: 24px;
  font-size: 14px;
  display: block;
  float: right;
  padding: 0 5px;
  border-radius: 2px;
}
.current-user-is-respondent .element.text .ui-resizable-handle {
  display: none !important;
}
#compact-editor #next-field:hover {
  background-color: #F37331;
  cursor: pointer;
}
#compact-editor {
  position: fixed;
  left: 50px;
  top: 200px;
  width: 480px;
  background: #106E81;
  z-index: 4000;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
/* Text Editor Container */
.text-editor p {
  margin: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
.text-editor-overlay, .image-editor-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ui-draggable-hidden {
  cursor: grabbing !important;
  opacity: 0 !important;
}
div.element.ui-draggable-handle:hover {
  cursor: grab;
}
.ui-draggable-dragging {
  cursor: grabbing !important;
}
#btn-spellchecker, #btn-check-whitespace {
  cursor: pointer;
}
#btn-spellchecker:hover, #btn-check-whitespace:hover {
  color: #106E81 !important;
}
.ui-resizable-n:before, .ui-resizable-e:before, .ui-resizable-s:before, .ui-resizable-w:before {
  content: "";
  position: absolute;
  background-color: white;
  box-shadow: rgba(149, 157, 165, 0.8) 0 2px 4px;
  border-radius: 25%;
  z-index: 33;
}
.ui-resizable-e:before {
  right: 0px;
}
.ui-resizable-s:before {
  bottom: 2px;
}
.ui-resizable-n:before, .ui-resizable-s:before {
  height: 8px;
  width: 20px;
  left: calc(50% - 10px);
}
.element.active:not(.disable-interactions) .ui-resizable-handle {
  display: block !important;
}
.element .ui-resizable-handle {
  display: none !important;
}
.ui-resizable-e:before, .ui-resizable-w:before {
  height: 20px;
  width: 8px;
  top: calc(50% - 10px);
}
.ui-resizable-n:after {
  top: 5px;
}
.ui-resizable-w:after {
  left: 5px;
}
.ui-resizable-n:after, .ui-resizable-s:after {
  height: 2px;
  width: 100%;
}
.ui-resizable-e:after, .ui-resizable-w:after {
  width: 2px;
  height: 100%;
}
.ui-resizable-n:before {
  top: 1px;
}
.ui-resizable-w:before {
  left: 0px;
}
.element.image.selected.clipperActive .ui-resizable-handle {
  display: none !important;
}
.autosize-image {
  height: 100%;
  width: 100%;
}
.imageClipperHelper {
  position: absolute;
  width: inherit !important;
  height: inherit !important;
}
.cropper-view-box img, .cropper-canvas {
  display: none !important;
}
.disable-interactions *:hover {
  cursor: initial !important;
}
.disable-interactions .rotation-helper {
  outline: none !important;
}
.element.locked *:hover {
  cursor: initial !important;
}
.element.locked .rotation-helper {
  outline: none !important;
}
.element.text:hover .rotation-helper, .element.selected .rotation-helper {
  outline: solid 2px lightskyblue;
}
.ui-resizable-n:after, .ui-resizable-e:after, .ui-resizable-s:after, .ui-resizable-w:after {
  content: "";
  position: absolute;
}
.element {
  resize: both;
}
.ui-resizable-nw, .ui-resizable-ne, .ui-resizable-sw, .ui-resizable-se {
  background: white;
  width: 10px;
  height: 10px;
  box-shadow: rgba(149, 157, 165, 0.8) 0 2px 4px;
  border-radius: 50%;
}
.ui-resizable-se {
  right: -4px !important;
  bottom: -4px !important;
}
.ui-resizable-sw {
  left: -4px !important;
  bottom: -4px !important;
}
.toggle-fonticon-select, .line-height-toggle, .opacity-toggle, .brightness-toggle, .filters-toggle {
  height: 38px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  position: relative;
}
.opacity-toggle .opacity-range i, .brightness-toggle .brightness-range i, .filters-toggle .image-filters i {
  color: white;
  padding: 0 10px;
}
.action-container .size-wrapper .btn:hover {
  background: #FF7933;
}
.action-container .size-wrapper .btn {
  padding: 0;
  height: 32px;
  line-height: 32px;
  width: 32px;
}
.action-container .size-wrapper i {
  color: white !important;
}
.opacity-toggle .opacity-range, .brightness-toggle .brightness-range {
  position: absolute;
  top: 36px;
  left: 10px;
  width: 250px;
  background: #211F1A;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 3px;
}
.action-container {
  width: 100%;
  clear: both;
}
.action-container .action-border {
  width: calc(50% - 2px);
  float: left;
  margin: 0;
  padding: 10px;
}
.action-container .size-wrapper {
  justify-content: center;
  display: flex;
}
.image-filters .border-preview img {
  border: solid 3px black;
}
.toggle-color-select .popup-container {
  background: white;
  top: 44px !important;
  left: -200px !important;
}
.toggle-color-select .popup-container, .filters-toggle .image-filters {
  position: absolute;
  top: 36px;
  left: 10px;
  width: 470px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 3px;
}
.opacity-toggle svg {
  fill: #222;
  width: 20px;
  height: 20px;
}
.toggle-fonticon-select:hover, .line-height-toggle:hover, .opacity-toggle:hover, .brightness-toggle:hover, .filters-toggle:hover {
  cursor: pointer;
}
.toggle-fonticon-select:hover > i, .line-height-toggle:hover > i, .brightness-toggle:hover > i, .filters-toggle:hover > i {
  color: #106E81 !important;
}
.opacity-toggle:hover svg {
  fill: #106E81 !important;
}
.fonticon-container {
  width: 335px;
}
.icon-container {
  padding: 5px;
}
.fonticon-container {
  background: white;
}
.fonticon-container em:hover {
  color: #106E81 !important;
}
.fonticon-container em {
  height: 40px;
  width: 40px;
  box-shadow: rgba(149, 157, 165, 0.2) 0 2px 4px;
  background: white;
  display: block;
  margin: 3px;
  float: left;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  border-radius: 4px;
}
.sp-container {
  margin-top: 15px;
}
#dynamic-colorpicker {
  position: absolute;
  width: 470px;
  background: white;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 4px;
  top: 47px;
  z-index: 999;
  padding-bottom: 5px;
}
.text-editor-toolbar-container .font-size-control {
  height: 28px;
  padding: 0 26px;
  margin: 0 10px;
  background: #ccc;
}
.image-editor-toolbar-container .helper-bar i, .text-editor-toolbar-container .helper-bar i {
  background: #F37331;
  height: 32px;
  width: 32px;
  font-size: 18px;
  line-height: 32px;
  border-radius: 25px;
}
.image-editor-toolbar-container .helper-bar i:hover, .text-editor-toolbar-container .helper-bar i:hover {
  cursor: pointer;
}
.image-editor-toolbar-container .helper-bar span, .text-editor-toolbar-container .helper-bar span {
  display: block;
  background: #211F1A;
  height: 100%;
  width: 1px;
}
.image-editor-toolbar-container .helper-bar, .text-editor-toolbar-container .helper-bar {
  height: 38px;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.image-editor-toolbar-container, .text-editor-toolbar-container {
  z-index: 99099;
  width: auto;
  height: 38px;
  padding: 0 10px;
  border-top: solid 1px #ccc;
  justify-content: center;
  display: flex;
}
#text-editor {
  width: 100%;
  outline: none !important;
  background: white;
  height: calc(100% - 52px);
}
.shadow-wrapper {
  height: calc(100% - 48px) !important;
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
#image-editor-toolbar a:hover span.material-icons, #image-editor-toolbar a.active span.material-icons {
  color: #106E81;
}
#image-editor-toolbar .line-height-container {
  padding: 0 10px;
}
#image-editor-toolbar .line-height-container label {
  font-size: 10px;
  margin: 0;
}
#image-editor-toolbar .line-height-container > * {
  padding: 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#image-editor-toolbar .line-height-range-container #lineHeightRange {
  width: 120px;
}
#image-editor-toolbar .fonticon-container, #image-editor-toolbar .line-height-container, .frame-editor-toolbar-container .opacity-range, #image-editor-toolbar .opacity-range, #image-editor-toolbar .brightness-range, #image-editor-toolbar .image-filters {
  position: absolute;
  top: 47px;
  z-index: 999;
  background: white;
  box-shadow: rgba(149, 157, 165, 0.2) 0 2px 8px;
  display: flex;
}
#image-editor-toolbar ul.quickedit-base li {
  width: 32px;
  height: 32px;
}
#image-editor-toolbar ul.quickedit-base li:not(:last-child):not(:first-child):after {
  content: "";
  position: absolute;
  bottom: 0;
  top: 3px;
  right: 0;
  height: 32px;
  border-right: 1px solid #f1f1f1;
  z-index: 1;
}
#image-editor-toolbar .opacity-range span.material-icons, #image-editor-toolbar .brightness-range span.material-icons, #image-editor-toolbar .image-filters span.material-icons {
  color: #222;
}
.shared-actions li:hover {
  cursor: pointer;
}
.shared-actions {
  display: flex;
}
#image-editor-toolbar .toolbar-tools {
  list-style: none;
  margin: 0;
  height: 100%;
  padding: 0 0 0 10px;
}
.toggle-color-picker:hover {
  cursor: pointer;
}
.toggle-color-picker {
  height: 40px;
  width: 40px;
  border: solid 1px #ccc;
  border-radius: 4px;
}
.color-options {
  position: relative;
  margin-top: 6px;
}
.fontOptionsContainer, .alignTextContainer {
  margin-top: 5px !important;
}
.image-filter-wrapper .opacity-range-container {
  justify-content: center;
}
.image-filter-wrapper {
  position: absolute;
  top: 5px;
  right: -190px;
  width: 360px;
  height: auto;
  z-index: 9999;
  background: white;
  padding: 10px;
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: rgba(149, 157, 165, 0.1) 0 2px 8px;
  flex-direction: column;
}
.color-picker-wrapper-container {
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.color-picker-wrapper-container .color-picker-wrapper {
  top: 0px;
  right: 0px;
  width: 360px;
  height: auto;
  background: white;
  padding: 10px;
  border-radius: 24px;
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: rgba(149, 157, 165, 0.1) 0 2px 8px;
  flex-direction: column;
}
@media (max-width: 1201px) {
  .color-picker-wrapper-container .color-picker-wrapper {
    width: 280px;
  }
}
.color-input-wrapper .form-control {
  margin: 10px 0 !important;
  border: solid 1px #ccc;
}
.color-cells-container {
  overflow-y: scroll;
  justify-content: center;
  align-items: center;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.colorcell.selected {
  outline: solid 2px #106E81;
}
.colorcell :hover {
  outline: solid 2px #106E81;
  cursor: pointer;
}
.colorcell-wrap.selected {
  border: solid 1px #106E81;
}
.colorcell-wrap:hover {
  border: solid 1px #106E81;
}
.colorcell-wrap {
  float: left;
  padding: 2px;
  border: solid 1px rgba(0, 0, 0, 0.1);
  margin: 1px;
  border-radius: 4px;
}
.colorcell {
  float: left;
}
.backFilters {
  width: 34px;
  text-align: center;
}
.current-color-name {
  float: left;
  margin-left: 3px;
}
.current-element-color-settings {
  width: auto;
}
.colorpalette.dynamic {
  width: 100%;
  clear: both;
}
.image-actions-li span {
  float: left;
}
.image-actions-li i {
  width: 36px;
  float: left;
}
.current-element-color-settings {
  padding: 5px;
}
.IroSlider {
  margin-top: 10px !important;
}
.custom-color-picker {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 5px;
}
.add-custom-color:hover {
  cursor: pointer;
}
.add-custom-color {
  text-align: center;
  line-height: 32px;
  border: solid 1px #f1f1f1;
}
.add-custom-color, .current-dynamic-color, .colorpalette.dynamic .colorcell {
  height: 32px;
  width: 32px;
  display: block;
  float: left;
  border-radius: 4px;
  box-shadow: rgba(149, 157, 165, 0.2) 0 0 4px;
}
.custom-colorcell {
  height: 32px;
  width: 32px;
  display: block;
  float: left;
  border-radius: 4px;
  box-shadow: rgba(149, 157, 165, 0.2) 0 0 4px;
}
.palette-colorcell {
  height: 32px;
  width: 32px;
  display: block;
  float: left;
  border-radius: 4px;
  box-shadow: rgba(149, 157, 165, 0.2) 0 0 4px;
  background-color: black;
}
.add-custom-color:hover, .current-dynamic-color:hover, .colorpalette.dynamic .colorcell:hover {
  box-shadow: rgba(149, 157, 165, 0.2) 0 0 6px;
}
.colorpicker-toggle-container {
  display: flex;
}
.colorpalette.dynamic .colorcell:hover {
  cursor: pointer;
}
#image-editor-toolbar .toolbar-tools li select, #text-editor-toolbar .toolbar-tools li select {
  min-width: 120px;
  border-radius: 2px;
}
#image-editor-toolbar .toolbar-tools li i, #text-editor-toolbar .toolbar-tools li i {
  color: #fff;
  font-size: 18px;
  padding: 2px 4px;
}
#image-editor-toolbar .toolbar-tools li .toggle-color-select:hover, #text-editor-toolbar .toolbar-tools li .toggle-color-select:hover {
  cursor: pointer;
}
#image-editor-toolbar .toolbar-tools li .toggle-color-select, #text-editor-toolbar .toolbar-tools li .toggle-color-select {
  width: 24px;
  height: 24px;
  border: solid 1px white;
  display: block;
  border-radius: 99px;
}
.toggle-color-select span:hover {
  border-color: #106E81 !important;
  cursor: pointer;
}
.opacity-toggle .opacity-range.hidden, .brightness-toggle .brightness-range.hidden, .filters-toggle .image-filters.hidden, .toggle-color-select #fontColorContainer.hidden {
  display: none !important;
}
.toggle-color-select #fontColorContainer {
  position: absolute;
  top: 36px;
  background-color: #211F1A;
  width: 244px;
}
.toggle-color-select > span {
  width: 32px;
  height: 32px;
  border: solid 1px #fff;
  border-radius: 4px;
  display: inline-block;
}
.toggle-color-select {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  position: relative;
}
.toggle-color-select .popup-container a i {
  color: #222;
}
.toggle-color-select .popup-container a:hover span.material-icons, #image-editor-toolbar ul li:hover a span.material-icons {
  color: #106E81 !important;
}
.popup-container .popup-container a span.material-icons, #image-editor-toolbar ul li a span.material-icons, #image-editor-toolbar ul li a {
  color: #222;
  height: 36px;
  line-height: 32px;
  width: 24px;
}
#image-editor-toolbar ul li {
  float: left;
  width: 36px;
  text-align: center;
}
#image-editor-toolbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#changeFontSize, #changeFontFamily {
  height: 28px;
  line-height: 28px;
  padding: 0 5px;
  margin: 6px 10px;
  font-size: 12px;
}
#changeFontSize {
  width: 64px;
}
#font-family-mce {
  width: 100px;
}
#font-size-mce {
  width: 40px;
}
#image-editor-toolbar ul > li, #image-editor-toolbar > * {
  position: relative;
}
.frame-editor-toolbar-container ul li {
  position: relative;
  min-width: 32px;
}
.frame-editor-toolbar-container ul li:not(:last-child):after, #image-editor-toolbar ul > li:not(:last-child):after, #image-editor-toolbar > div:not(:last-child):not(:first-child):after {
  content: "";
  position: absolute;
  bottom: 0;
  top: 3px;
  right: 0;
  height: 32px;
  border-right: 1px solid #f1f1f1;
  z-index: 1;
}
#image-editor-toolbar {
  display: flex;
  justify-content: center;
}
#image-editor-toolbar .toolbar-tools li:last-child {
  float: right;
}
#image-editor-toolbar .toolbar-tools li:not(:last-child) {
  padding: 5px;
}
#image-editor-toolbar .toolbar-tools li {
  list-style: none;
  float: left;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mce-btn-group .mce-btn, #text-editor-toolbar .mce-toolbar .mce-btn-group, #text-editor-toolbar .mce-container > div, #text-editor-toolbar .mce-container {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  height: 50px !important;
  line-height: 50px !important;
}
.frame-editor-toolbar-container {
  border-top: solid 1px #ccc;
  padding: 0 10px;
}
.frame-editor-toolbar-container, #image-editor-toolbar, #text-editor-toolbar, #text-editor-toolbar .mce-toolbar .mce-btn-group {
  background: white;
  color: #222;
}
#text-editor-toolbar .mce-container {
  border: none !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}
.frame-editor-toolbar-container {
  padding-top: 2px;
}
.frame-editor-toolbar-container, #image-editor-toolbar {
  width: 100%;
  line-height: 38px;
  display: flex;
}
#toggle-edit-finish {
  color: #fff;
  background-color: #F37331;
}
/* EDITOR LOGO */
img#editorLogo {
  height: 30px;
  width: auto;
  opacity: 1;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  max-width: initial;
  margin-right: 10px;
}
img#editorLogo.active {
  opacity: 1;
}
#wizardForgotPass {
  color: #F37331;
}
.btn.duplicate-product, .btn.copy-product-texts, .btn.add-template-set, .btn.add-product {
  text-align: center;
  width: 100%;
  background-color: #F37331;
  color: #fff;
  border-radius: 0;
  padding: 10px;
}
#product-buttons {
  width: 100%;
  clear: both;
  display: flex;
  justify-content: center;
  align-items: center;
}
#product-buttons .btn.duplicate-product, #product-buttons .btn.copy-product-texts, #product-buttons .btn.add-template-set, #product-buttons .btn.add-addvert, #product-buttons .btn.add-product {
  text-align: center;
  width: 112px;
  background-color: #F37331;
  color: #fff;
  border-radius: 25px;
  margin: 3px;
  height: 32px;
  line-height: 32px;
  padding: 0;
  font-size: 12px;
}
.current-user-is-respondent #product-buttons .btn.add-product {
  width: 100%;
}
#product-buttons .btn.add-addvert {
  background: #211F1A;
}
.btn.copy-product-texts svg {
  height: 18px;
  width: 18px;
  fill: white;
}
.btn.copy-product-texts {
  background-color: #FF7933;
  text-align: center;
}
.btn.copy-product-texts:hover {
  background-color: #F37331 !important;
  opacity: 0.9;
}
.text-toelichting p {
  margin: 0 !important;
}
.text-toelichting {
  height: auto;
  display: block;
  float: left;
}
.btn.add-template-set:hover, .btn.add-product:hover {
  background-color: #FF7933 !important;
}
.btn-opacity-toggle {
  position: absolute;
  top: 3px;
  right: 70px;
  color: #fff;
  font-size: 36px;
  line-height: 36px;
  margin: 0;
  padding: 0;
}
#productArea .priceCalculationContainer {
  margin-top: -20px;
}
.eye-drop-container {
  width: 470px;
  margin: 0 !important;
  padding: 0;
}
#addvertModal .fa-eye-slash {
  display: none;
}
#addvertModal.opacityActive {
  opacity: 0.8;
}
#addvertModal.opacityActive .fa-eye {
  display: none;
}
#addvertModal.opacityActive .fa-eye-slash {
  display: block;
}
.incrementSize > div {
  position: absolute;
  top: 12px;
  font-size: 10px;
  left: 50px;
}
body .btn.add-addvert {
  text-align: center;
  width: 100%;
  background-color: #2E2A22;
  color: #fff;
  border-radius: 0;
  padding: 10px;
}
body .btn.add-addvert:hover {
  background-color: #211F1A !important;
}
body .btn.duplicate-product {
  background-color: #106E81;
  width: 100%;
  color: #fff;
  border-radius: 0;
  padding: 10px;
}
body .btn.duplicate-addvert {
  text-align: center;
  width: 100%;
  background-color: #106E81;
  color: #fff;
  border-radius: 0;
  padding: 10px;
}
body .btn.duplicate-addvert:hover {
  background-color: #007BA8 !important;
}
/* SIDES AREA */
#sidesArea ul.sides {
  display: block;
  width: auto;
  margin: 5px auto;
  padding: 0;
  list-style: none;
  text-align: center;
}
#sidesArea ul.sides li {
  display: inline-block;
  list-style: none;
  height: 40px;
  padding: 0px 5px;
}
#sidesArea ul.sides li a {
  position: relative;
  display: block;
  text-align: center;
  text-decoration: none !important;
  color: #FFF;
  line-height: 40px;
  vertical-align: middle;
}
#sidesArea ul.sides li a i {
  font-size: 28px;
  vertical-align: middle;
}
#sidesArea ul.sides li a span {
  display: inline-block;
  font-size: 12px;
  vertical-align: middle;
  padding: 0px 5px;
}
#sidesArea ul.sides li a img {
  height: 40px;
  padding: 0px;
  margin: 0px;
  border: 0px;
  vertical-align: middle;
}
#sidesArea ul a.active:before {
  content: "";
  font-family: "icomoon" !important;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  position: absolute;
  top: 5px;
  left: 0px;
  right: 0px;
  margin: 0px auto;
  font-size: 20px;
  color: var(--ink-soft);
}
/* Een muisdruk op het canvas hoort een element te pakken, geen tekstselectie
   te beginnen. Doet hij dat wel, dan rolt de browser elke scrollbare bak mee
   waar de muis tijdens het slepen langskomt - het zijpaneel voorop. De oude
   engine deed dit al voor .element.text; hier staat het voor het hele
   canvasvenster, met een uitzondering voor de velden waar je wél in typt. */
#canvasAreaWrapper {
  user-select: none;
  -webkit-user-select: none;
}
#canvasAreaWrapper [contenteditable="true"], #canvasAreaWrapper input, #canvasAreaWrapper textarea {
  user-select: text;
  -webkit-user-select: text;
}
/* En zolang een element wordt versleept, geschaald of gedraaid: nergens meer
   iets selecteerbaar, ook niet in het zijpaneel waar de muis overheen kan
   komen. gesture-scroll-lock.js zet en haalt deze klasse. */
body.drk-element-gesture, body.drk-element-gesture * {
  user-select: none !important;
  -webkit-user-select: none !important;
}
/* ELEMENT */
.element {
  position: absolute;
  z-index: 1000;
  touch-action: none;
}
.element.text {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard syntax */
}
.element.text .rotation-helper {
  height: auto;
}
.editor-disabled .element.text:hover .transform, .editor-disabled .element.text .transform {
  outline: none !important;
}
.element.image .borderMask {
  position: absolute;
}
body .element.image:not(:hover):not(.selected) .borderMask {
  position: absolute !important;
  z-index: 1;
}
.element.image:hover .borderMask {
  position: absolute !important;
}
.element.text {
  z-index: 3000;
}
.element.image {
  z-index: 1000;
}
.element:hover {
  cursor: pointer;
}
.element.text.active {
  z-index: 10000 !important;
}
.ck-body-wrapper {
  display: none !important;
}
.element.text .content {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden !important;
  min-height: 10px;
  overflow-wrap: break-word;
}
.element.text .content p {
  margin: 0px !important;
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}
.element.text .content.editorActive {
  height: auto !important;
}
.element.image img {
  width: 100%;
  height: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.element .content {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.element .content.onBackside {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
#absolute-canvas .ui-resizable-handle {
  display: none !important;
}
.element.text .content[data-medium-focused=true]:hover {
  cursor: auto;
}
.element.image .content img:not(.img-responsive) {
  width: 100%;
  height: 100%;
}
.ui-resizable-handle {
  z-index: 8889 !important;
}
.ui-cancel-rotation * {
  text-align: left !important;
}
.ui-cancel-rotation {
  transform: none !important;
  user-select: all !important;
}
/* ROTATE */
.rotation {
  position: absolute;
  text-align: center;
  top: -25px;
  padding: 5px;
  width: 45px;
  left: 0;
  right: 0;
  margin: 0px auto;
  background-color: rgba(16, 110, 129, 0.8);
  color: #FFF;
  border-radius: 15px;
}
.ui-rotatable-handle {
  display: none;
}
.ui-rotatable-handle {
  position: absolute;
  height: 24px;
  width: 24px;
  cursor: pointer;
  border-radius: 50%;
  background-color: lightskyblue;
  right: calc(50% - 12px);
  /*background-image: url('../images/rotate.png');*/
  /*background-size: 100%;*/
  bottom: -30px;
  z-index: 6000 !important;
  box-shadow: rgba(149, 157, 165, 0.8) 0 2px 4px;
}
.selected .ui-rotatable-handle {
  display: block !important;
}
.ui-rotatable-handle:before {
  content: "";
  font-family: "icomoon" !important;
  font-style: normal;
  font-weight: normal;
  height: 24px;
  width: 24px;
  text-align: center;
  line-height: 40px;
  color: #FFF;
  font-size: 15px;
  position: absolute;
  top: -8px;
  left: 0px;
}
.element.active .transform:not(.ui-rotatable-disabled) .ui-rotatable-handle {
  display: block;
}
.rotateHelper {
  z-index: 60000;
}
/* RESIZE */
.ui-resizable-handle.ui-icon {
  display: none !important;
  position: absolute;
  height: 40px;
  width: 40px;
  cursor: pointer;
  right: -30px;
  bottom: -30px;
  border-radius: 50%;
  background-color: #F37331;
  background-image: none;
  z-index: 6000 !important;
}
.compound-image-drag .ui-resizable-handle.ui-icon:before {
  display: none !important;
}
.ui-resizable-handle.ui-icon:before {
  content: "";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  color: #FFF;
  font-size: 24px;
  position: absolute;
  top: 0px;
  left: 0px;
  text-indent: 0;
}
.element.active .transform:not(.ui-resizable-disabled) .ui-resizable-handle.ui-icon {
  display: block !important;
}
/* DRAGGABLE */
#cropImage {
  display: none;
}
.element.clipperActive #cropImage {
  display: block !important;
}
#cropImage {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 100;
  background: #106E81;
  height: 32px;
  width: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
}
.ui-draggable-handle:not(.transform):not(.canvas-ruler-marker):not(.clipperMask):before {
  content: "";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  color: #FFF;
  font-size: 24px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.element.active:not(.ui-draggable-disabled):not(.clipperActive):not(.compound-image) .transform .ui-draggable-handle:not(.rasterImage) {
  display: none !important;
}
.clipperActive:hover {
  z-index: 10000 !important;
}
/* QUICKEDIT */
.popover-body {
  padding: 0;
}
.popover ul.quickedit svg {
  max-width: 24px;
  max-height: 24px;
  fill: white;
}
.popover ul.quickedit {
  padding: 5px 0 !important;
}
.popover ul.quickedit li {
  margin: 0;
  padding: 0;
}
.popover ul.quickedit li a {
  max-width: 64px;
  justify-content: center;
  align-items: center;
}
.quickedit .action {
  display: flex;
  flex-direction: column !important;
  justify-content: center;
  align-items: center;
}
.quickedit .action * {
  text-align: center;
  display: inline-block;
}
.quickedit .action span {
  font-size: 10px;
  padding: 5px 0;
}
.popover {
  z-index: 10000;
  padding: 0;
}
.quickedit li {
  min-width: 64px;
}
ul.quickedit-clipper-container > li:first-child, ul.quickedit-opacity-container > li:first-child, ul.quickedit.quickedit-image-effects > li:first-child {
  border-bottom: solid 1px white;
  padding-bottom: 5px;
}
ul.quickedit.quickedit-image-effects > li:nth-child(2) {
  padding-top: 5px;
}
.image-filter-span {
  color: black;
}
.opacity-range-container input[type="range"], .brightness-range-container input[type="range"], ul.quickedit-opacity-container input[type="range"] {
  outline: 0;
  border: 0;
  border-radius: 500px;
  transition: box-shadow 0.2s ease-in-out;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .opacity-range-container input[type="range"], .brightness-range-container input[type="range"], ul.quickedit-opacity-container input[type="range"] {
    -webkit-appearance: none;
  }
  .opacity-range-container input[type="range"]::-webkit-slider-runnable-track, .brightness-range-container input[type="range"]::-webkit-slider-runnable-track, ul.quickedit-opacity-container input[type="range"]::-webkit-slider-runnable-track {
    height: 10px;
    cursor: pointer;
    -webkit-appearance: none;
    transition: box-shadow 0.2s ease-in-out;
  }
  .opacity-range-container input[type="range"]::-webkit-slider-thumb, .brightness-range-container input[type="range"]::-webkit-slider-thumb, ul.quickedit-opacity-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    height: 21px;
    width: 21px;
    background: #F37331;
    border-radius: 50%;
    margin-top: -6px;
    transition: box-shadow 0.2s ease-in-out;
    position: relative;
  }
  .opacity-range-container input[type="range"]:active::-webkit-slider-thumb, .brightness-range-container input[type="range"]:active::-webkit-slider-thumb, ul.quickedit-opacity-container input[type="range"]:active::-webkit-slider-thumb {
    background: #F37331;
  }
}
.opacity-range-container input[type="range"]::-moz-range-progress, .brightness-range-container input[type="range"]::-moz-range-progress, ul.quickedit-opacity-container input[type="range"]::-moz-range-progress {
  background-color: #43e5f7;
}
.opacity-range-container input[type="range"]::-moz-range-track, .brightness-range-container input[type="range"]::-moz-range-track, ul.quickedit-opacity-container input[type="range"]::-moz-range-track {
  background-color: #9a905d;
}
.opacity-range-container input[type="range"]::-ms-fill-lower, .brightness-range-container input[type="range"]::-ms-fill-lower, ul.quickedit-opacity-container input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7;
}
.opacity-range-container input[type="range"]::-ms-fill-upper, .brightness-range-container input[type="range"]::-ms-fill-upper, ul.quickedit-opacity-container input[type="range"]::-ms-fill-upper {
  background-color: #9a905d;
}
.vignette-preview img {
  border-radius: 50%;
  display: block;
  border: 1px solid #fff;
}
.vignette-preview {
  position: relative;
}
.vignette-preview:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, white 70%, white 100%);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.quickedit-vignette-container .vignette-preview {
  margin: 5px 60px !important;
}
.quickedit-vignette-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  z-index: 1;
  flex-direction: column;
}
#vignetteRange {
  width: 200px;
}
.quickedit-vignette-container .vignette-preview img {
  width: 100%;
  height: auto;
}
.toggle-color-select .vignette-actions-header > span {
  width: calc(100% - 64px);
  display: inline-block;
  float: left;
}
.vignette-actions-header .action:hover {
  cursor: pointer;
}
.vignette-actions-header {
  padding: 0 10px;
  width: 100%;
  text-align: center;
}
.preview-vignette-slider {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-filter-option:hover {
  cursor: pointer;
}
.image-filter-option.grayscale {
  filter: grayscale(100%);
}
.image-filter-option.sepia {
  filter: sepia(100%);
}
.image-filter-option {
  padding: 5px 1px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 10px;
  text-align: center;
  width: 72px !important;
}
.image-filter-option:hover {
  cursor: pointer;
  zoom: 1.1;
}
.image-filter-option span {
  margin-top: 3px;
}
.image-filter-option img {
  width: 54px;
}
.popover.left {
  margin-left: -30px;
}
.popover.top {
  margin-top: -2px;
}
.popover.bottom {
  margin-bottom: 0px;
}
.popover.right {
  margin-right: 0px;
}
.popover {
  background-color: #211F1A;
}
.popover.top .arrow {
  display: none;
}
.popover.top > .arrow:after {
  border-top-color: #211F1A;
}
.popover-content {
  padding: 3px;
}
.popover.left > .arrow {
  border-left-color: #211F1A;
  right: -10px;
}
.popover.left > .arrow:after {
  border-left-color: #211F1A;
}
.popover ul, .popover ul li {
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: middle !important;
}
.popover ul li a {
  display: block;
  padding: 2px;
  text-align: center;
  font-size: 20px;
  color: #FFF;
  text-decoration: none;
}
.image-actions-li {
  display: flex;
}
.popover ul > li {
  padding: 2px;
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .opacity .slider, .vignette .slider, .fontsize .slider, .lineheight .slider {
    height: 25px;
  }
  body .popover {
    background: none;
    border: none;
  }
  #canvas .popover div {
    zoom: normal !important;
  }
  .popover .popover-content {
    padding: 0;
  }
  .popover {
    width: 40px !important;
  }
  .popover .quickedit {
    width: 40px !important;
  }
  .popover.left > .arrow {
    left: 100%;
  }
  .popover .quickedit li {
    float: left !important;
    width: 100%;
    display: block;
    background: #211F1A;
  }
  .opacity .slider, .vignette .slider, .fontsize .slider, .lineheight .slider {
    vertical-align: baseline !important;
  }
  body .percentage {
    margin-left: -15px;
    margin-top: 10px;
  }
}
.popover ul li a:hover, .popover ul li a.active {
  color: #106E81;
}
/* TEXT-EDITOR */
.quickedit li.editor-toolbar {
  padding: 0px;
  border: 0px !important;
  width: 34px;
  display: none;
}
.quickedit li.editor-toolbar.active {
  display: block;
}
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*************************************************************** OPTIONS ********************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
.panel-group {
  margin-bottom: 0;
}
.panel-group .panel + .panel {
  margin-top: 0;
}
.panel-group .panel {
  border-radius: 0px;
}
.panel-default {
  border-radius: 0px;
  border-color: #FFF;
}
.panel-default > .panel-heading {
  color: #FFF;
  background-color: #FFF;
  border-color: #FFF;
  border-radius: 0px;
  padding: 0px;
}
.panel-default > .panel-heading h4 {
  display: block;
}
#ElementAlignHeading {
  margin: 0;
}
.icon-respondent {
  stroke: white;
  fill: white;
  width: 16px;
}
#sessionContainer, #respondent-list {
  padding: 0;
}
#sessionContainer li, #respondent-list .respondent {
  position: relative;
  height: 32px;
  line-height: 32px;
  width: 42px;
}
#respondent-list {
  display: none;
}
.respondent-options:hover #respondent-list {
  display: block;
}
.product-deleted-warning {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(16, 110, 129, 0.25);
  text-align: center;
}
#sessionContainer li span {
  width: 260px !important;
  left: -110px;
  padding: 3px 0px !important;
  text-align: center;
  font-size: 8px !important;
}
#sessionContainer li span, #respondent-list .respondent span {
  position: absolute;
  background: #FF7933;
  padding: 3px 15px;
  color: #fff;
  font-size: 10px;
  text-transform: lowercase;
}
.product-no-message {
  background-color: #fff;
  opacity: 1;
  background-image: linear-gradient(135deg, #f1f1f1 25%, transparent 25%), linear-gradient(225deg, #f1f1f1 25%, transparent 25%), linear-gradient(45deg, #f1f1f1 25%, transparent 25%), linear-gradient(315deg, #f1f1f1 25%, #fff 25%);
  background-position: 4px 0, 4px 0, 0 0, 0 0;
  background-size: 4px 4px;
  background-repeat: repeat;
  height: calc(100vh - 32px);
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}
body.product-no #inviteRespondentToDossier, body:not(.product-no) .product-no-message {
  display: none;
}
.product-digitale-rouwkaart .product-ruler-info, .product-digitale-rouwkaart .rg-overlay, .product-digitale-rouwkaart #canvas-safe-print-margins, .product-digitale-rouwkaart .btn-akkoord, .product-digitale-rouwkaart #generateHdPreview {
  display: none !important;
}
#generateHdPreview svg {
  stroke: white;
  fill: white;
  position: absolute;
  left: 0;
  max-width: 100%;
  padding: 12px;
}
.general-tool-panel p {
  text-align: center;
}
.general-tool-panel {
  padding: 10px 0 !important;
}
.spreadSelectionVertically, .spreadSelectionHorizontally, .general-tool-panel .btn-sm {
  padding: 2px 2px;
  float: left;
}
.spreadSelectionVertically:hover, .spreadSelectionHorizontally:hover {
  cursor: pointer;
}
#ElementAlignHeading, .panel-default > .panel-heading h4 a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #FFF;
  background-color: rgba(16, 110, 129, 0.5);
  font-size: 14px;
}
#ElementAlignHeading, .always-active .panel-heading h4 a, .panel-default > .panel-heading h4 a:hover, .panel-default.active > .panel-heading h4 a {
  background-color: #106E81;
}
body .toggle-addvertiser.selected {
  background-color: #106E81;
}
#templateArea .panel-default > .panel-heading h4 a, #productArea .panel-default > .panel-heading h4 a {
  background-color: #106E81;
}
.content-section#editor #productArea {
  width: 220px;
}
.content-section#editor #productArea:not(.active) {
  left: -220px;
}
#productArea {
  left: 0;
}
.content-section#editor #contentArea.slideLeft #canvasArea {
  left: 50px;
}
#toggleProductToolbar {
  position: absolute;
  top: 5px;
  font-size: 20px;
  right: 10px;
}
.product-update-warning figure img {
  max-width: 24px;
  width: 100%;
}
.product-update-warning figure:hover {
  cursor: pointer;
}
.product-update-warning figure:not(:first-child) {
  margin-left: 1px;
}
.product-update-warning figure:hover {
  background: #211F1A;
}
#toggleProductToolbar:hover {
  cursor: pointer;
}
#TextHeading {
  height: 36px;
}
#TextHeading .panel-title {
  width: 100%;
  float: left;
}
.panel:not(.active) #text-edit-mode product-update-warningspan {
  display: none;
}
.panel:not(.active) #text-edit-mode {
  background: rgba(16, 110, 129, 0.5);
}
#text-edit-mode {
  width: 40%;
  display: block;
  float: right;
  background: #106E81;
  height: 35px;
  line-height: 35px;
  text-align: right;
  padding-right: 15px;
}
#productArea a.btn {
  font-size: 14px;
  line-height: 14px;
  width: calc(33% - 2px);
}
.panel.active #text-edit-mode:hover .edit-mode:not(.active), .panel.active .edit-mode.active {
  display: block;
}
.edit-mode:hover {
  cursor: pointer;
}
#text-edit-mode:hover .active, .edit-mode:not(.active) {
  display: none;
}
#productArea:not(.active) #toggleProductToolbar {
  right: -52px;
  background-color: #106E81;
  padding: 5px 10px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.panel-default > .panel-heading h4 a:active, .panel-default > .panel-heading h4 a:focus, .panel-default > .panel-heading h4 a:visited {
  text-decoration: none;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
  padding-top: 0px;
  padding-bottom: 25px;
}
.panel .panel-collapse {
  position: relative;
}
.panel .panel-collapse .disableOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
}
.panel .panel-collapse .disableOverlay p {
  width: 80%;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  margin: 0px auto;
  padding: 15px;
}
#TextBody .disableOverlay {
  top: 200px;
}
.addTextDescription img {
  position: absolute;
  bottom: -15px;
  right: 0;
  -webkit-transform: rotate(-24deg);
  transform: rotate(-24deg);
}
.addTextDescription {
  font-family: kidprint;
  font-size: 20px;
  position: relative;
  display: block;
  min-height: 60px;
  overflow: visible;
  z-index: 100;
}
#DeceasedPicker, #ShapePicker, #RelationPicker {
  position: relative;
  padding-left: 30px !important;
  min-height: 90px;
}
#wizardModal .action-buttons span:hover {
  cursor: pointer;
  background: #F37331;
}
#wizardModal .action-buttons {
  position: absolute;
  left: 0;
  top: 30px;
}
#wizardModal .modal-body > *:nth-child(2) .moveUp {
  display: none;
}
#wizardModal .modal-body > *:nth-child(3) .moveDown {
  display: none;
}
#wizardModal .action-buttons span {
  display: block;
  background: #106E81;
  color: #fff;
  clear: both;
  float: left;
  width: 24px;
  height: 24px;
  text-align: center;
  margin-bottom: 5px;
  border-radius: 4px;
  box-shadow: rgba(149, 157, 165, 0.2) 0 2px 8px;
}
.panel .btn.dropdown-toggle {
  border-radius: 0px;
  background: #f6f6f6;
}
.actionGroup span {
  font-size: 12px;
}
.actionGroup {
  width: calc(100% - 40px);
  clear: both;
  margin: 10px 20px;
}
#template-config-container .actionGroup:nth-child(1) {
  margin-top: 20px;
}
.actionGroup .btn {
  width: 100%;
  clear: both;
  border-radius: 24px;
  min-height: 40px;
}
.panel ul, .panel ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.panel ul li {
  display: inline-block;
}
/* align */
.panel#TextEdit .align {
  margin: 5px 0px 5px 0px;
}
.panel#TextEdit .align li {
  padding: 5px;
  width: auto;
}
.panel#TextEdit .align li a.action {
  padding: 5px;
  background-color: #EEE;
  color: var(--ink-soft);
}
.panel#TextEdit .align li a.action.active, .panel#TextEdit .align li a.action:hover {
  background-color: #106E81;
  color: #FFF;
}
.panel#TextEdit .align li a.action.active i, .panel#TextEdit .align li a.action:hover i {
  color: #FFF;
}
/* transparentie */
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 10px;
  width: 10px;
  background: #106E81;
  cursor: pointer;
  margin-top: -2px;
  /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  height: 10px;
  width: 10px;
  background: #106E81;
  cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  height: 10px;
  width: 10px;
  background: #106E81;
  cursor: pointer;
}
/* TRACK */
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #eee;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #eee;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #eee;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #eee;
}
input[type=range]:focus::-ms-fill-lower {
  background: #eee;
}
input[type=range]::-ms-fill-upper {
  background: #eee;
}
input[type=range]:focus::-ms-fill-upper {
  background: #eee;
}
input.action {
  border: none;
}
.opacity {
  padding: 5px 0px 5px 0px;
}
.brightness .display, .opacity .display {
  display: inline-block;
  vertical-align: middle;
  width: 45px;
  height: 25px;
  background-color: #eee;
  color: var(--ink-soft);
  padding: 3px;
}
.brightness .slider, .opacity .slider {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 55px);
}
.vignette {
  padding: 5px 0px 5px 0px;
}
.vignette .display {
  display: inline-block;
  vertical-align: middle;
  width: 45px;
  height: 25px;
  background-color: #eee;
  color: var(--ink-soft);
  padding: 3px;
}
.vignette .slider {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 55px);
}
.fontsize {
  padding: 5px 0px 5px 0px;
}
.fontsize .display {
  display: inline-block;
  vertical-align: middle;
  width: 45px;
  height: 25px;
  background-color: #eee;
  color: var(--ink-soft);
  padding: 3px;
}
.fontsize .slider {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 55px);
}
.lineheight {
  padding: 5px 0px 5px 0px;
}
.lineheight.disabled {
  opacity: 0.5;
}
.wordspacing .display, .lineheight .display {
  display: inline-block;
  vertical-align: middle;
  width: 45px;
  height: 25px;
  background-color: #eee;
  color: var(--ink-soft);
  padding: 3px;
}
.wordspacing .slider, .lineheight .slider {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 55px);
}
.percentage {
  position: absolute;
  margin-left: -14px;
  margin-top: 3px;
}
.fontfamily {
  padding: 5px 0px 5px 0px;
}
.preferedAddvertFont .dropdown .btn {
  background: #f6f6f6;
  color: var(--charcoal-soft);
}
.preferedAddvertFont .input-font {
  margin-right: 10px;
}
.addvertFontLabel {
  height: 34px;
  line-height: 34px;
}
preferedAddvertFont {
  float: left;
  width: 100%;
}
.preferedAddvertFont > * {
  float: left;
}
.fontfamily .dropdown .btn {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 5px;
  border: 0px;
  color: var(--charcoal-soft);
  min-height: 30px;
}
.fontfamily .dropdown .btn .caret {
  position: absolute;
  right: 5px;
  top: 12px;
  width: 10px;
}
.fontfamily .dropdown-menu, .fontfamily .dropdown-menu li {
  width: 100%;
  z-index: 9999999;
}
.fontfamily .dropdown-menu .dropdown-header {
  padding: 3px;
  background-color: var(--charcoal-soft);
  color: #fff;
}
#fontListUL li.dropdown-header a {
  padding: 3px 5px;
}
#fontListUL li a {
  padding: 3px 10px;
}
#fontListUL li a:hover {
  background-color: #eee;
}
.modal-body ul#FamilyList {
  max-height: 20vh;
  overflow-y: scroll;
}
.familyActions {
  margin-top: 5px;
}
#FamilyMemberListWrapper, .familyActions {
  display: block;
  float: left;
  width: 100%;
  clear: both;
}
.familyActions > span {
  float: left;
  display: block;
  padding: 8px 24px;
  margin-right: 3px;
}
.toggleColumns:hover {
  cursor: pointer;
}
#FamilyMemberListWrapper {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: row;
}
#FamilyMemberListWrapper:not(.one-col) {
  flex-direction: row;
}
.family-table-column input {
  text-indent: 10px;
  width: calc(100% - 10px);
  margin-right: 10px;
  color: #000;
  background: #f1f1f1;
  border: none;
  height: 40px;
  line-height: 40px;
  margin-bottom: 5px;
  border-radius: 12px;
  margin-left: 5px;
}
.family-table-column {
  box-shadow: rgba(149, 157, 165, 0.2) 0 4px 8px;
  background: white;
  padding: 10px;
  border-radius: 24px;
  max-width: 50%;
  min-height: 200px;
}
.family-table-column.dragover {
  outline: none;
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #68b;
}
#FamilyMemberListWrapper .family-table-column > li {
  width: calc(100% - 6px);
  clear: both;
  margin: 2px;
}
#FamilyMemberListWrapper .family-table-column > * {
  float: left;
}
#FamilyMemberListWrapper .family-table-column {
  flex: 1 1 0;
  -webkit-box-flex: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;
  /* OLD - Firefox 19- */
  -webkit-flex: 1;
  /* Chrome */
  -ms-flex: 1;
  /* IE 10 */
}
#FamilyMemberListWrapper .family-table-column li {
  list-style: none;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
#FamilyMemberListWrapper .family-table-column li > * {
  flex: 1 1 0;
  -webkit-box-flex: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;
  /* OLD - Firefox 19- */
  -webkit-flex: 1;
  /* Chrome */
  -ms-flex: 1;
  /* IE 10 */
}
#FamilyMemberListWrapper .family-table-column ul {
  list-style: none;
  margin: 5px 0 0 0;
}
.familyActions .toggleColumns > span {
  float: left;
  display: block;
}
span.toggleColumns .type-label {
  font-size: 14px;
}
span.toggleAddressSend, span.toggleColumns {
  display: block;
  line-height: 40px;
  height: 40px;
  padding: 0;
  margin-top: 2px;
  margin-left: 10px;
}
.toggleAddressSend .icon, .toggleColumns .icon {
  width: 24px;
  height: 24px;
  border: solid 2px;
  text-align: center;
  display: inline-block;
  margin: 3px 10px;
  position: relative;
  border-radius: 25px;
}
.toggleAddressSend .icon i, .toggleColumns .icon i {
  position: absolute;
  width: 100%;
  left: 0;
  font-size: 20px;
  top: 0px;
}
.toggleAddressSend.active .icon, .toggleColumns.active .icon {
  border-color: #F37331;
}
.toggleColumns.active .type-label, .toggleAddressSend.active .icon i, .toggleColumns.active .icon i {
  color: #F37331;
}
.toggleAddressSend:not(.active) .icon i, .toggleColumns:not(.active) .icon i {
  display: none;
}
.texttype {
  padding: 5px 0px 5px 0px;
}
.texttype .dropdown .btn {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 5px;
  border: 0px;
  color: var(--charcoal-soft);
}
.texttype .dropdown .btn .caret {
  position: absolute;
  right: 5px;
  top: 12px;
  width: 10px;
}
.texttype .dropdown-menu, .texttype .dropdown-menu li {
  width: 100%;
}
.texttype .dropdown-menu .dropdown-header {
  padding: 3px;
  background-color: var(--charcoal-soft);
  color: #fff;
}
#texttypeListUL li.dropdown-header a {
  padding: 3px 5px;
}
#texttypeListUL li a {
  padding: 3px 10px;
}
#texttypeListUL li a:hover {
  background-color: #eee;
}
.papierkleur {
  padding: 5px 0px 5px 0px;
}
.papierkleur .dropdown .btn {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 5px;
  border: 0px;
  color: var(--charcoal-soft);
}
.papierkleur .dropdown .btn .caret {
  position: absolute;
  right: 5px;
  top: 12px;
  width: 10px;
}
.papierkleur .dropdown-menu, .papierkleur .dropdown-menu li {
  width: 100%;
}
.papierkleur .dropdown-menu .dropdown-header {
  padding: 3px;
}
#colorListUL li a {
  padding: 3px 10px;
}
#colorListUL li a:hover {
  background-color: #eee;
}
.colorpalette {
  padding: 5px;
}
.colorpickerplus-colors-row .colorcell:last-child {
  border: solid 1px black;
}
.colorpickerplus-custom-colors {
  clear: both;
  width: 100%;
  float: left;
}
.colorpickerplus-custom-colors .colorcell > div {
  position: absolute;
  width: 135px;
  font-size: 9px;
  left: 25px;
  background: white;
  line-height: 18px;
}
.colorpickerplus-container .colorcell, .colorpickerplus-container .nonecell {
  width: 37px;
  height: 37px;
  border-radius: 5px;
}
.colorpickerplus-container .input-group-btn {
  display: none;
}
.colorpickerplus-container #fontColorInput {
  background-color: #FFF !important;
}
.actionGroup ul li a, .actionGroup ul li a:hover {
  background-color: #106E81;
  background-color: transparent;
  color: #333;
  border-radius: 0;
  text-align: left;
  padding: 0px;
}
.actionGroup ul li a i {
  margin-right: 6px;
  color: #106E81;
  font-size: 15px;
  line-height: 15px;
  text-align: center;
  vertical-align: middle;
  padding: 5px;
}
.actionGroup ul li {
  display: inline-block;
  width: 48%;
  margin-bottom: 5px;
}
/* imageLibraryFilter */
#libraryFilterContainer, .imageFilterContainer {
  width: 100%;
  display: block;
  text-align: center;
  top: 10px;
  padding-bottom: 15px;
}
.imageFilterContainerSearch .search-icon, .imageFilterContainerSearch .close-icon {
  top: 15px;
  position: absolute;
}
.imageFilterContainerSearch .search-icon {
  left: 23px;
  color: rgba(0, 0, 0, 0.3);
}
.imageFilterContainerSearch .close-icon:hover {
  cursor: pointer;
}
.imageFilterContainerSearch .close-icon {
  right: 17px;
  font-size: 16px;
  top: 21px;
}
#left-content-sidebar #libraryFilterContainer .archived-search {
  margin-top: 10px;
}
#image-container .texture-image {
  width: 100%;
  height: auto;
}
#left-content-sidebar #libraryFilterContainer, #left-content-sidebar #image-container, #left-content-sidebar .imageFilterContainer {
  width: 100%;
  display: block;
  text-align: center;
  position: relative;
}
#left-content-sidebar #libraryFilterContainer select, #left-content-sidebar .imageFilterContainer select {
  width: calc(100% - 20px) !important;
  margin-left: 10px;
  margin-top: 10px;
}
#libraryFilterContainer * {
  margin: 0 10px;
}
#libraryFilterContainer .form-control {
  width: 200px;
}
#libraryFilterContainer {
  justify-content: center;
  align-content: center;
  display: flex;
}
.imageFilterContainerSearch {
  position: relative;
  width: 258px;
  margin: 0 auto;
}
#imageLibraryFilter, #searchImages {
  display: inline-block;
  max-width: 240px;
  width: calc(100% - 30px);
  color: black;
}
#searchImages {
  text-indent: 20px;
}
.background-search {
  width: calc(100% - 20px) !important;
  margin-left: 10px;
  margin-top: 10px;
  display: inline-block;
  max-width: 240px;
  color: black;
  background-color: #fff;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 8px;
}
/* volgorde */
/* roteren */
ul.rotateImage li a i, ul.rotateText li a i, ul.rotate li a i {
  background-color: #106E81;
  border-radius: 50%;
  color: #fff;
  padding: 5px;
}
/* spiegelen */
/* image filters */
.imagefilters select {
  margin-top: 5px;
  display: block;
  width: 100%;
  padding: 5px;
  background: #eee;
  border: none;
}
/* origImage */
.origImage {
  display: block;
  height: 200px;
  position: relative;
  background-color: #eee;
}
.origImage .img-responsive {
  margin: 0px auto;
  max-height: 200px;
}
.origImage a.btn-edit {
  position: absolute;
  background-color: #106E81;
  border-radius: 50%;
  top: 5px;
  right: 5px;
  text-align: center;
  width: 30px;
  height: 30px;
  padding: 0;
  line-height: 26px;
  color: #fff;
  font-size: 18px;
}
.origImage a.btn-edit i {
  color: #fff;
}
.origImage a.btn-edit i.fa {
  float: none !important;
  margin: 0px !important;
  width: 30px;
  line-height: 30px;
}
#deleteTemplate {
  background: #106E81;
  color: white;
  width: 100%;
}
.product-actions {
  display: flex;
}
.product-actions * {
  flex: 1;
}
.btn-toggle-color, .btn-toggle-color:hover, .btn-add, .btn-add:hover, .btn-edit, .btn-edit:hover, .btn-upload, .btn-upload:hover, .btn-symbols, .btn-symbols:hover {
  background-color: #f6f6f6;
  color: var(--charcoal-soft);
  border-radius: 0;
  text-align: left;
  margin-top: 5px;
  position: relative;
}
.btn-toggle-color {
  background-color: #106E81;
  color: var(--charcoal-soft);
  text-align: left;
  margin-top: 5px;
  margin-left: 8px;
  border-radius: 5px;
}
.btn-toggle-color:hover {
  background-color: #007BA8 !important;
}
.btn-toggle-color #currentColor {
  width: 26px;
  height: 22px;
  position: absolute;
  right: 5px;
  top: 5px;
  border-radius: 4px;
}
.swal2-styled {
  border-radius: 25px !important;
}
.swal2-popup {
  border-radius: 25px !important;
}
.btn-primary {
  background-color: #106E81;
  border-color: #106E81;
}
.btn-primary:hover {
  background-color: #007BA8;
  border-color: #007BA8;
}
.btn-secondary {
  background-color: #F37331;
  border-color: #F37331;
}
.btn-secondary:hover {
  background-color: #FF7933;
  border-color: #FF7933;
}
body .swal2-styled.swal2-confirm, .swal2-styled.swal2-confirm.confirm-copy, .btn-success, .btn-success:active, .btn-success:focus {
  color: #fff;
  background-color: #106E81;
  border-color: #106E81;
}
.swal2-styled.swal2-cancel {
  background: #212529;
}
.product-events {
  display: flex;
  flex-direction: row;
  bottom: 2px;
  width: 100%;
  position: relative !important;
  min-height: 5px;
}
.product-events > * {
  float: left;
  margin: 1px;
}
.product-update-warning figure, .product-events > * i {
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  float: left;
  background: #2E2A22;
  padding: 0 2px;
  border-radius: 25px;
  color: #fff;
}
.product-events > *:hover figure, .product-events > *:hover i {
  background: #F37331;
}
#toggleWhiteSpaceUnlock:hover {
  cursor: pointer;
  background-color: #F37331;
}
#toggleWhiteSpaceUnlock {
  margin-top: 24px;
  display: block;
  color: #fff;
  background-color: #106E81;
  height: 34px;
  width: 34px;
  text-align: center;
  line-height: 34px;
}
.swal2-styled.swal2-confirm.confirm-copy:hover, .btn-success:hover {
  color: #106E81;
  background-color: #fff !important;
  border-color: #106E81;
}
body .swal2-styled.swal2-confirm:hover, body .swal2-styled.swal2-cancel, .swal2-styled.swal2-cancel.cancel-copy, .btn-default, .btn-default:active, .btn-default:focus {
  color: #fff;
  background-color: #F37331;
  border-color: #F37331;
}
.swal2-styled.swal2-cancel.cancel-copy:hover, .btn-default:hover {
  color: #F37331;
  background-color: #fff;
  border-color: #F37331;
}
.btn-default[disabled] {
  display: none;
  background-color: #F37331;
  border-color: #F37331;
}
.btn-success[disabled] {
  display: none;
  background-color: #106E81;
  border-color: #106E81;
}
.panel a#placeShortcut {
  display: block;
  background-color: #eee;
  width: 100%;
  position: relative;
  height: 60px;
}
.achtergronden img {
  position: absolute;
  width: 120%;
  height: 120%;
  overflow: hidden;
}
/* images */
.asbackgroundoptions {
  padding-left: 25px;
}
/* afbeeldingen, patronen */
.panel#Backgrounds .actionGroup .row {
  margin-right: 0px;
  margin-left: 0px;
}
.panel#Backgrounds .actionGroup .row .col-xs-6 {
  padding: 4px;
}
.panel#Backgrounds .actionGroup .row .col-xs-12 {
  padding: 0;
}
/* symbolen */
.panel#Backgrounds .symbols .col-xs-6 a {
  height: 85px;
}
.panel#Backgrounds .symbols img {
  max-height: 100%;
  margin: 0px auto;
  padding: 5px;
}
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*************************************************************** MENU ********************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
#menu-wrapper {
  background-color: #F7F1E7;
}
.navbar-custom.editor-chrome {
  background-color: #ffffff;
  height: 60px;
  border-bottom: 1px solid #e1e1e1;
  display: flex;
  align-items: center;
  padding: 0 20px;
  text-transform: none;
  z-index: 9000;
}
.navbar-custom.editor-chrome #menu-wrapper {
  background-color: transparent;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
.navbar-custom.editor-chrome .navbar-left, .navbar-custom.editor-chrome .navbar-right {
  display: flex;
  align-items: center;
  gap: 15px;
  height: 100%;
}
.navbar-custom.editor-chrome .divider {
  width: 1px;
  height: 24px;
  background: #e1e1e1;
  margin: 0 10px;
}
.navbar-custom.editor-chrome .design-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--paper);
  border-radius: 9px;
  margin-right: 15px;
  max-width: 300px;
  cursor: text;
}
.navbar-custom.editor-chrome .design-title-wrapper.editing {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset;
}
.navbar-custom.editor-chrome .design-title-wrapper .design-title {
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navbar-custom.editor-chrome .design-title-wrapper .design-title-input {
  border: none;
  outline: none;
  background: transparent;
  width: 260px;
  font-size: 14px;
  color: #333;
}
.navbar-custom.editor-chrome .design-title-wrapper .edit-icon {
  font-size: 16px;
  color: #999;
  cursor: pointer;
}
.navbar-custom.editor-chrome .design-title-wrapper .edit-icon:hover {
  color: #333;
}
.navbar-custom.editor-chrome .navbar-brand {
  padding: 0;
  margin-right: 20px;
  height: auto;
  display: flex;
  align-items: center;
}
.navbar-custom.editor-chrome .navbar-brand img {
  max-height: 40px;
  width: auto;
}
.navbar-custom.editor-chrome .btn-save {
  background: transparent;
  border: 1px solid #e1e1e1;
  border-radius: 9px;
  padding: 6px 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  transition: all 0.2s;
}
.navbar-custom.editor-chrome .btn-save:hover {
  background: var(--paper);
}
.navbar-custom.editor-chrome .btn-save .material-icons {
  font-size: 18px;
}
.navbar-custom.editor-chrome .badge-admin-template {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--clay-tint);
  border: 1px solid var(--clay);
  color: var(--clay-dark);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.navbar-custom.editor-chrome .btn-pill-outline {
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--clay);
  color: var(--clay);
  white-space: nowrap;
}
.navbar-custom.editor-chrome .btn-pill-outline:hover {
  background: var(--clay-tint);
}
.navbar-custom.editor-chrome .btn-pill-filled {
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  background: var(--clay);
  border: 1px solid var(--clay);
  color: var(--white);
  white-space: nowrap;
  text-decoration: none;
}
.navbar-custom.editor-chrome .btn-pill-filled:hover {
  background: var(--clay-dark);
  border-color: var(--clay-dark);
}
.navbar-custom.editor-chrome .user-account-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background 0.2s;
}
.navbar-custom.editor-chrome .user-account-menu:hover {
  background: #f5f5f5;
}
.navbar-custom.editor-chrome .user-account-menu .user-icon {
  font-size: 20px;
  color: var(--clay);
  padding: 3px;
  background: var(--clay-tint);
  border-radius: 24px;
}
.navbar-custom.editor-chrome .user-account-menu .user-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.navbar-custom.editor-chrome .user-account-menu .chevron-icon {
  font-size: 18px;
  color: #999;
}
.navbar-custom.editor-chrome .user-account-menu .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  padding: 8px 0;
  margin-top: 5px;
  z-index: 1000;
  display: none;
}
.navbar-custom.editor-chrome .user-account-menu .dropdown-menu.show {
  display: block;
}
.navbar-custom.editor-chrome .user-account-menu .dropdown-menu .dropdown-item {
  display: block;
  padding: 8px 20px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  transition: background 0.2s;
}
.navbar-custom.editor-chrome .user-account-menu .dropdown-menu .dropdown-item:hover {
  background: #f5f5f5;
}
.navbar-custom.editor-chrome .user-account-menu .dropdown-menu .dropdown-item.logout {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d9534f;
}
.navbar-custom.editor-chrome .user-account-menu .dropdown-menu .dropdown-divider {
  height: 1px;
  background: #e1e1e1;
  margin: 8px 0;
}
.navbar-custom.editor-chrome .navbar-left {
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.navbar-custom.editor-chrome .navbar-right {
  gap: 8px;
  flex: 0 0 auto;
}
.navbar-custom.editor-chrome .divider {
  margin: 0 4px;
  background: #D9CDB8;
  flex-shrink: 0;
}
.navbar-custom.editor-chrome .navbar-left .navbar-brand {
  margin-right: 4px;
}
.navbar-custom.editor-chrome .navbar-left .navbar-brand img {
  max-height: 34px;
}
.navbar-custom.editor-chrome .tb-icon-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #6B6555;
  cursor: pointer;
}
.navbar-custom.editor-chrome .tb-icon-btn .material-icons {
  font-size: 20px;
}
.navbar-custom.editor-chrome .tb-icon-btn:hover:not(:disabled) {
  background: #EFE8DC;
  color: #2E2A22;
}
.navbar-custom.editor-chrome .tb-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.navbar-custom.editor-chrome .tb-icon-btn:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.navbar-custom.editor-chrome .navbar-left .design-title-wrapper {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 3px 8px;
  margin-right: 0;
  max-width: 320px;
  min-width: 110px;
  flex: 0 1 auto;
  letter-spacing: normal;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
}
.navbar-custom.editor-chrome .navbar-left .design-title-wrapper:hover {
  background: #EFE8DC;
}
.navbar-custom.editor-chrome .navbar-left .design-title-wrapper.editing {
  background: #fff;
  border-color: var(--clay);
  box-shadow: none;
}
.navbar-custom.editor-chrome .navbar-left .design-title-wrapper .design-title, .navbar-custom.editor-chrome .navbar-left .design-title-wrapper .design-title-input {
  font-size: 14px;
  font-weight: 700;
  color: #2E2A22;
  line-height: 1.3;
  max-width: 100%;
}
.navbar-custom.editor-chrome .navbar-left .design-title-wrapper .design-title-input {
  width: 280px;
  padding: 0;
}
.navbar-custom.editor-chrome .navbar-left .design-title-wrapper .design-subtitle {
  font-size: 11.5px;
  line-height: 1.3;
  color: #8C8674;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.navbar-custom.editor-chrome .tb-history {
  display: inline-flex;
  flex-shrink: 0;
  float: none;
  padding: 2px;
  border-radius: 10px;
  background: #EFE8DC;
}
.navbar-custom.editor-chrome .tb-history .tb-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.navbar-custom.editor-chrome .tb-history .tb-icon-btn:hover:not(:disabled) {
  background: #fff;
}
.navbar-custom.editor-chrome .tb-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.navbar-custom.editor-chrome .tb-save .material-icons {
  font-size: 17px;
}
.navbar-custom.editor-chrome .tb-save:disabled {
  opacity: 1;
}
.navbar-custom.editor-chrome .tb-save[data-state="saved"] {
  color: #4F6F47;
  background: #E1EBDD;
  cursor: default;
}
.navbar-custom.editor-chrome .tb-save[data-state="dirty"] {
  color: #fff;
  background: #2E2A22;
  cursor: pointer;
}
.navbar-custom.editor-chrome .tb-save[data-state="dirty"]:hover {
  background: #000;
}
.navbar-custom.editor-chrome .tb-save[data-state="saving"] {
  color: #8A6A14;
  background: #F6ECCB;
  cursor: progress;
}
.navbar-custom.editor-chrome .tb-save:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.navbar-custom.editor-chrome .tb-spin {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: tb-spin 0.7s linear infinite;
}
.navbar-custom.editor-chrome .tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  height: 38px;
  padding: 0 14px;
  border: 1.5px solid #D9CDB8;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: #2E2A22;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.navbar-custom.editor-chrome .tb-btn .material-icons {
  font-size: 18px;
  color: var(--clay);
}
.navbar-custom.editor-chrome .tb-btn:hover, .navbar-custom.editor-chrome .tb-btn.open {
  border-color: var(--clay);
  color: var(--clay-dark);
  background: #e0ecef;
}
.navbar-custom.editor-chrome .tb-btn:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.navbar-custom.editor-chrome .btn-pill-filled {
  height: 38px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
}
.navbar-custom.editor-chrome .tb-menu-wrap {
  position: relative;
  flex-shrink: 0;
}
.navbar-custom.editor-chrome .tb-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.navbar-custom.editor-chrome .tb-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  width: 330px;
  padding: 6px;
  background: #fff;
  border: 1px solid #D9CDB8;
  border-radius: 14px;
  box-shadow: 0 14px 34px -14px rgba(46, 42, 34, 0.35);
}
.navbar-custom.editor-chrome .tb-menu button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  color: #2E2A22;
  cursor: pointer;
}
.navbar-custom.editor-chrome .tb-menu button:hover {
  background: #EFE8DC;
}
.navbar-custom.editor-chrome .tb-menu button .material-icons {
  font-size: 19px;
  color: var(--clay);
  margin-top: 1px;
}
.navbar-custom.editor-chrome .tb-menu button small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #8C8674;
}
@media (max-width: 1440px) {
  .navbar-custom.editor-chrome .user-account-menu .user-name {
    display: none;
  }
}
@media (max-width: 1240px) {
  .navbar-custom.editor-chrome .tb-btn .tb-btn-label {
    display: none;
  }
  .navbar-custom.editor-chrome .tb-btn {
    padding: 0 10px;
    min-width: 38px;
    justify-content: center;
  }
  .navbar-custom.editor-chrome .user-account-menu .user-name {
    display: none;
  }
  .navbar-custom.editor-chrome .navbar-left .design-title-wrapper {
    max-width: 240px;
  }
}
@media (max-width: 1600px) {
  .navbar-custom.editor-chrome .navbar-right.is-admin .tb-btn .tb-btn-label {
    display: none;
  }
  .navbar-custom.editor-chrome .navbar-right.is-admin .tb-btn {
    padding: 0 10px;
    min-width: 38px;
    justify-content: center;
  }
  .navbar-custom.editor-chrome .navbar-right.is-admin .user-account-menu .user-name {
    display: none;
  }
}
@media (max-width: 1180px) {
  .navbar-custom.editor-chrome .navbar-left .design-title-wrapper {
    max-width: 170px;
  }
  .navbar-custom.editor-chrome .tb-save[data-state="saved"] span:not(.material-icons) {
    display: none;
  }
}
@keyframes tb-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tb-spin {
    animation: none;
  }
}
.navbar-custom {
  display: block;
  width: 100%;
  margin-bottom: 0;
  border-bottom: none;
  text-transform: uppercase;
  font-family: "opensansregular", Arial, Helvetica, sans-serif;
  z-index: 0;
}
.active-user-container * {
  text-transform: none;
}
.active-user-container > div.container-logout-button {
  margin-left: 20px;
}
.active-user-container > div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.active-user-container .active-user {
  color: white !important;
  font-size: 10px;
}
.draggable-source--is-dragging {
  opacity: 0 !important;
}
.logout_button {
  background: #fff;
  color: #F37331;
  border-radius: 25px;
  padding: 3px 10px;
  font-size: 10px;
  text-decoration: none;
}
.logout_button:hover {
  cursor: pointer;
  background: #211F1A;
  color: #fff;
}
.active-user-container {
  position: absolute;
  right: 35px;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.navbar-header {
  background-color: var(--charcoal-soft);
}
.options > ul li, .wizardOptions > ul li, .previewPrintOptions > ul li {
  background-color: #106E81;
}
.wizardOptions a {
  position: relative;
}
.wizardOptions svg {
  fill: #ffffff !important;
  width: 24px;
  height: 24px;
  /* margin: 0 auto; */
  position: absolute;
  /* height: calc( 100% - 4px ); */
  left: 15px;
  top: 15px;
}
.options > ul li a:after, .wizardOptions > ul li a:after, .previewPrintOptions > ul li a:after {
  content: "";
  display: block;
  border-bottom: 1px solid #F37331;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.options > ul li:hover, .wizardOptions > ul li:hover, .previewPrintOptions > ul li:hover {
  cursor: pointer !important;
}
.options > ul li a i, .previewPrintOptions > ul li a i, .wizardOptions > ul li a i {
  color: #fff !important;
}
.options > ul li a, .wizardOptions > ul li a, .previewPrintOptions > ul li a {
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  display: block;
  height: 48px;
  line-height: 48px;
}
.options > ul, .wizardOptions > ul, .previewPrintOptions > ul {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  padding: 0;
}
.options:not(:hover) > ul, .wizardOptions:not(:hover) > ul, .previewPrintOptions:not(:hover) > ul {
  display: none;
}
.navbar-custom .container {
  position: relative;
}
.navbar-custom .container #sloganArea {
  position: absolute;
  top: 35px;
  left: 35%;
  font-size: 26px;
  text-transform: uppercase;
  padding: 10px 25px 10px 15px;
  font-family: "HelveticaNeueltstd-mdcn", sans-serif;
}
.navbar-custom .container #accountArea {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  padding: 10px 25px 10px 15px;
  text-transform: none;
}
.modal-footer > .row {
  width: 100%;
}
@media (max-height: 800px) {
  body .overview-table-wrapper {
    max-height: calc(100vh - 400px);
  }
  body .table-wrapper {
    max-height: calc(100vh - 260px);
  }
}
@media (min-width: 768px) {
  .navbar-custom .container #accountArea {
    padding: 10px 45px 10px 15px;
    top: 40px;
  }
}
.navbar-custom .container #accountArea a {
  color: #106E81;
}
.navbar-custom .navbar-brand {
  position: relative;
  padding: 5px;
  font-size: initial !important;
}
.navbar-custom .navbar-brand img {
  position: static;
  max-width: 100%;
}
.navbar-custom .navbar-brand img {
  height: 100%;
}
.navbar-custom .navbar-brand:focus {
  outline: 0;
}
.navbar-custom .navbar-brand .navbar-toggle {
  padding: 4px 6px;
  font-size: 16px;
  color: #106E81;
}
.navbar-custom .navbar-brand .navbar-toggle:focus, .navbar-custom .navbar-brand .navbar-toggle:active {
  outline: 0;
}
.navbar-nav > li > a {
  color: #FFFFFF;
  font-size: 22px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (min-width: 768px) {
  .navbar-nav > li {
    position: relative;
  }
  .navbar-nav > li:after {
    content: "";
    display: block;
    border-right: 1px solid #4da3c2;
    width: 1px;
    height: 26px;
    position: absolute;
    right: 0px;
    top: 12px;
  }
  .navbar-nav > li:last-child:after {
    content: "";
  }
}
.navbar-custom .nav {
  display: block;
  margin-top: 0px;
  margin: 0px auto;
  float: none;
  width: auto;
}
#navigation-index {
  position: absolute;
  left: 100px;
  right: 100px;
  top: 0;
  height: 40px;
}
.navbar-custom .nav {
  display: flex !important;
  justify-content: center;
}
.navbar-custom .nav li {
  display: block;
  position: relative;
}
.navbar-custom .nav li a {
  padding-left: 8px;
  padding-right: 8px;
  position: relative;
  height: 40px;
  display: block;
  line-height: 40px;
}
@media (min-width: 900px) {
  .navbar-custom .nav li a {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.navbar-custom .nav li a:visited, .navbar-custom .nav li a:focus, .navbar-custom .nav li a {
  color: #FFFFFF;
  background: none !important;
}
.navbar-custom .nav li.active, .navbar-custom .nav li a:not(.disabled):hover, .navbar-custom .nav li a.active {
  color: #106E81;
  background: none !important;
}
a.disabled {
  opacity: 0.5;
}
a.disabled:hover {
  cursor: pointer !important;
}
.navbar-custom .nav li a.inactive, .navbar-custom .nav li a.inactive:hover {
  color: rgba(255, 255, 255, 0.5);
}
.navbar-custom .nav li a.action.nw {
  color: rgba(255, 255, 255, 0.5);
}
.navbar-custom .nav li a#wizard img {
  display: none;
  position: relative;
  top: -4px;
}
@media (min-width: 1160px) {
  .navbar-custom .nav li a#wizard img {
    display: inline-block;
    height: 30px;
    top: -2px;
  }
}
@media (max-width: 1260px) {
  .navbar-custom .nav li a#wizard img {
    display: inline-block;
    height: auto;
    width: 360px;
  }
}
.navbar-toggle {
  color: var(--charcoal-soft);
  background-color: #FFF;
  margin: 5px !important;
}
.nav > li > span {
  display: block;
  font-size: 12px;
  color: #fff;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 40px;
  line-height: 40px;
}
.nav > li > span#title {
  text-align: center;
}
@media (max-width: 768px) {
  .navbar-custom .navbar-brand {
    width: 120px;
  }
  #canvasAreaWrapper {
    overflow: hidden !important;
  }
}
@media (min-width: 767px) {
  .navbar {
    padding: 0px;
    border-bottom: 0;
    letter-spacing: 1px;
    -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
  }
  .top-nav-collapse {
    padding: 0;
    background: white;
  }
  .navbar-custom.top-nav-collapse {
    border-bottom: 1px solid #836d5b;
  }
  .navbar-custom .nav {
    margin-top: 0px;
  }
}
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/************************************************************* FORM ********************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
.checkbox label {
  padding-left: 0px;
}
.checkbox label span {
  vertical-align: middle;
  margin-right: 5px;
}
.checkbox input[type="checkbox"] {
  display: none;
  margin-left: 0px;
}
.keepratio .label span {
  float: left;
  height: 24px;
  line-height: 24px;
}
.keepratio .label span.check {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: solid 1px black;
  cursor: pointer;
  position: relative;
  margin-top: 2px;
  margin-right: 5px;
}
.radio label {
  padding-left: 0px;
}
.radio label span {
  vertical-align: middle;
  margin-right: 5px;
}
.radio input[type="radio"] {
  display: none;
  margin-left: 0px;
}
input[type="radio"] + label span {
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url("../images/editor/mm_checkboxes.png") -53px -1px no-repeat;
  cursor: pointer;
}
input[type="radio"]:checked + label span {
  background: url("../images/editor/mm_checkboxes.png") -79px -1px no-repeat;
}
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/************************************************************* TOOLBAR ********************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
#toolbar .popover {
  background-color: #fff;
  border-radius: 0px;
}
#toolbar .popover.bottom .arrow:after {
  border-bottom-color: #106E81 !important;
}
#toolbar .popover .popover-content {
  padding: 0px;
  padding-bottom: 5px;
}
.note-align {
  display: block;
  width: 100%;
  text-align: center;
}
.note-align .title {
  display: block;
  margin-bottom: 5px;
  width: 100%;
  padding: 5px 10px;
  background-color: #106E81;
  color: #fff;
  text-align: left;
  text-transform: none;
}
.spreadSelectionHorizontally svg {
  transform: rotate(90deg) !important;
}
.spreadSelectionVertically, .spreadSelectionHorizontally {
  width: 24px;
  height: 24px;
  display: block;
}
.spreadSelectionVertically svg, .spreadSelectionHorizontally svg {
  width: 100%;
  height: 100%;
}
.note-align small {
  text-align: left;
  display: block;
  padding: 10px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 12px;
  line-height: 14px;
  font-style: normal;
  text-transform: none;
  border-bottom: 1px solid #333;
}
.note-align a.action {
  display: inline-block;
  border: none;
  padding: 5px;
}
.note-align {
  position: relative;
}
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/************************************************************* ICONS ********************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
i.fa-custom {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-repeat: no-repeat;
  background-size: cover;
}
i.fa-custom-sm {
  width: 15px;
  height: 15px;
}
.fa-custom-align-top {
  background-image: url("../images/editor/icons/align-top.png");
}
.fa-custom-align-bottom {
  background-image: url("../images/editor/icons/align-bottom.png");
}
.fa-custom-align-center {
  background-image: url("../images/editor/icons/align-center.png");
}
.fa-custom-align-left {
  background-image: url("../images/editor/icons/align-left.png");
}
.fa-custom-align-middle {
  background-image: url("../images/editor/icons/align-middle.png");
}
.fa-custom-align-right {
  background-image: url("../images/editor/icons/align-right.png");
}
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/************************************************************* FOOTER ********************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
.footer {
  background-color: #525253;
  color: #FFF;
  font-size: 14px;
  line-height: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.footer h3 {
  font-size: 14px;
}
.footer a, .footer a:hover {
  color: #FFF;
}
.footer .col-xs-12 {
  margin-bottom: 0px;
}
.footer .fa {
  display: block;
  font-size: 24px;
  margin-bottom: 15px;
}
@media (min-width: 768px) {
  .footer .fa {
    margin-bottom: 0px;
  }
}
.footer ul {
  display: block;
  margin: 0;
  padding: 0;
}
.footer ul li {
  display: inline-block;
  float: none;
}
.footer ul li a {
  margin: 0;
  text-decoration: none;
}
.footer ul li a:hover {
  text-decoration: none;
}
.footer #attema a {
  padding: 5px 5px 5px 0px;
  font-size: 10px;
}
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/************************************************************* MODAL *********************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*
.modal-dialog{
  width:65%;
}
*/
.modal-button-wapper {
  text-align: right;
}
.modal-button-wapper button {
  margin-left: 10px;
}
.modal-open .modal {
  z-index: 100000;
}
.vertical-alignment-helper {
  display: flex;
  height: 100%;
  width: auto;
  pointer-events: none;
  align-items: center;
}
.vertical-align-center {
  /* To center vertically */
  display: table-cell;
  vertical-align: middle;
  pointer-events: none;
}
.modal-content {
  width: inherit;
  height: inherit;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 8px;
  margin: 0 auto;
  pointer-events: all;
  border: none;
}
#welcomeModal .hidden {
  display: none !important;
}
body #welcomeModal .modal-lg .modal-body, body #loginModal .modal-lg .modal-body {
  padding: 20px 25px;
}
body #welcomeModal .modal-lg .modal-content, body #loginModal .modal-lg .modal-content {
  width: 600px;
}
body #welcomeModal .modal-lg .modal-content input.form-control {
  background: white;
  border-radius: 15px;
  height: 42px;
  line-height: 42px;
  max-width: 320px;
}
body #loginModal .modal-lg .modal-content input.form-control {
  background: white;
  border-radius: 15px;
  height: 42px;
  line-height: 42px;
}
.modal .btn.btn-v2 {
  height: 42px;
  line-height: 42px;
  padding: 0 20px;
  margin: 0;
  min-width: 160px;
  margin-left: 10px;
}
.btn-v2-primary {
  background: #106E81;
  border-color: #106E81;
  color: #fff;
}
.btn-v2-primary:hover {
  border-color: #106E81 !important;
  color: #106E81 !important;
  background: white !important;
}
.btn-v2-secondary {
  background: #F37331;
  border-color: #F37331;
  color: #fff;
}
.btn-v2-secondary:hover {
  border-color: #F37331 !important;
  color: #F37331 !important;
  background: white !important;
}
.modal-header {
  position: relative;
  background: #F37331;
  color: #ffffff;
  border-bottom: 0;
  padding: 20px;
}
.modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 99999;
}
.progress-bar {
  background-color: #2E2A22;
}
.modal-sub-header {
  position: relative;
  background: rgba(16, 110, 129, 0.25);
  color: #ffffff;
  padding: 20px;
  border-bottom: 0;
}
.modal-sub-header .progress, .modal-sub-header progress[value] {
  width: 100%;
  border: 0;
  margin: 5px 0;
  height: 15px;
  display: block;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
}
.modal-header .btn-close {
  position: absolute;
  top: 3px;
  right: 15px;
  color: #fff;
  font-size: 36px;
  line-height: 36px;
  margin: 0px;
  padding: 0px;
}
.quota-bar {
  display: flex;
  justify-content: center;
}
.quota-bar span {
  display: block;
  margin: 0 10px;
}
.modal-content .btn {
  border-radius: 0px;
}
.modal-content .js-title-step {
  margin-top: 0;
  margin-bottom: 0;
}
.modal-content .label {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 34px;
  text-align: center;
  background: transparent;
  color: #fff;
  padding: 0px !important;
  margin-right: 10px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: normal;
  border: 2px solid #fff;
}
.modal-body {
  border-radius: 4px;
}
#addvertModal .modal-body {
  overflow-y: scroll;
  max-height: calc(100vh - 230px);
}
.jumbotron {
  background: none;
}
.modal #loadMore {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px;
  color: var(--charcoal-soft);
}
.fa-fw.active {
  color: #106E81 !important;
}
#alignJustify.active svg {
  fill: #106E81 !important;
}
.preview-table {
  width: 100%;
  border: solid 1px #106E81;
}
.preview-table:not(:last-child) {
  margin-bottom: 20px;
}
.preview-table th {
  background: #106E81;
  font-size: 16px;
  padding: 10px;
  text-align: center;
  color: #fff;
}
.preview-table tr {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.preview-table tr:not(:last-child) td {
  border-bottom: solid 1px #f2f2f2;
}
.preview-table th, .preview-table td {
  -webkit-box-flex: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;
  /* OLD - Firefox 19- */
  -webkit-flex: 1;
  /* Chrome */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  padding: 10px;
}
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/************************************************************* WIZARD *********************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
.modal {
  z-index: 93000;
  height: calc(100% - 125px);
  top: 15px !important;
  overflow: hidden !important;
}
.form-control option {
  width: 100%;
}
.modal-body .namen {
  list-style: none;
  margin: 0;
  padding: 0;
}
.modal-body .namen li {
  margin: 10px;
}
.modal-body .namen span {
  clear: both;
  margin: 12px 0;
  float: left;
}
.modal-body .namen input[type="text"] {
  padding: 5px 20px;
}
.modal-body textarea {
  width: 100%;
  height: 250px;
}
.d-selected {
  outline: 1px dotted rgba(76, 80, 84, 0.5);
}
.d-selected.dragging .transform {
  outline: 1px dotted rgba(76, 80, 84, 0.5);
}
.modal-body p {
  font-size: 12px;
}
#wizardModal .modal-body p {
  width: 100%;
  float: left;
  position: relative;
  font-size: 14px;
}
#DatesCityGeboorteinfo, #TussenregelTussenregel {
  float: left;
  width: auto;
}
.relationColumnFooter {
  float: left;
  width: 100%;
  text-align: right;
}
#wizardModal h3 {
  margin-top: 0;
}
.toggleAgenda.agenda-btn {
  position: absolute;
  right: 40px;
  height: 36px;
  width: 32px;
  line-height: 34px;
  text-align: center;
  color: #fff;
  background-color: #106E81;
}
.toggleAgenda.agenda-btn:hover {
  background-color: rgba(16, 110, 129, 0.8);
  cursor: pointer;
}
.display-date-picker {
  display: flex;
}
.modal-body ul {
  font-size: 13px;
  margin: 40px 0;
}
.picker__select--month, .picker__select--year {
  padding: 0 0.5em !important;
}
.modal-body .namen select {
  padding: 6px 5px;
}
.modal-body .ingevuldenamen {
  display: none;
}
.modal-body .namenpreview {
  font-size: 13px;
  line-height: 16px;
  font-family: Arial, Helvetica, sans-serif;
}
.modal-body textarea {
  margin-top: 20px;
}
/* overige modals */
.modal-body h5 {
  font-weight: bold;
  font-size: 16px;
}
#checkErrorModal .modal-dialog {
  width: 40%;
}
#checkErrorModal .modal-body {
  height: 200px;
}
#galleryModal .modal-body p {
  text-align: center;
  padding: 10px 0;
  margin: 0;
}
#symbolsModal .modal-body, #backgroundsModal .modal-body, #patternsModal .modal-body, #galleryModal .modal-body {
  height: 500px;
  overflow-y: scroll;
  padding: 0px;
}
#patternsModal .modal-body {
  height: 250px;
}
.picker {
  z-index: 999999;
}
.form-deceased-name input.form-control:nth-child(1), .form-deceased-name input.form-control:nth-child(2), .form-relation-name input.form-control:nth-child(1), .form-relation-name input.form-control:nth-child(2) {
  width: 50%;
  float: left;
}
.picker-hidden {
  display: none;
}
#welcomeModal .modal-body h3, #loginModal .modal-body h3 {
  line-height: 1.5;
  font-size: 22px;
  margin-top: 0;
}
#welcomeModal .modal-body h5, #loginModal .modal-body h5 {
  margin-top: 15px;
}
#CanvasPicker {
  margin-left: -10px;
}
#EditorModePicker .radio, #welcomeModal .radio, #canvasModal .radio, #CanvasPicker .radio {
  display: inline-block;
  width: 80px;
}
#EditorModePicker input:hover {
  cursor: pointer;
  border: 1px solid #106E81;
}
#EditorModePicker div.radio-label {
  margin-left: 15px;
}
div.radio-label {
  float: left;
  font-size: 16px;
  font-weight: 800;
  margin-right: 30px;
}
#welcomeModal .radio label, #loginModal .radio label {
  text-align: center;
  line-height: 100px;
}
#EditorModePicker label, .colorExample {
  margin-right: 15px;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 24px;
  text-indent: 25px;
  line-height: 18px;
  text-transform: lowercase;
}
.colorExample.white {
  background-color: white;
}
.colorExample.creme {
  background-color: #ffc;
}
#EditorModePicker label.selected, .colorExample.selected {
  border: 1px solid #106E81;
}
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/************************************************************* ImageEditor ***************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
.editImagePreview {
  display: block;
  width: 100%;
  margin: 0px;
  overflow: hidden;
}
.editImagePreview div {
  height: 370px;
}
.editImagePreview div img {
  max-width: 100%;
  max-height: 100%;
}
.editToolbar .colorpalette {
  display: none;
  position: absolute;
  z-index: 90;
  width: 200px;
  padding: 10px;
  border: 1px solid #a3a3a3;
  background-color: #FFF;
}
.mce-stack-layout span.mce-text {
  padding-left: 8px;
}
.mce-stack-layout .icon-butterfly:before {
  content: "8";
  margin-left: -8px;
}
.mce-stack-layout .icon-heart:before {
  content: "0";
  margin-left: -5px;
}
#TemplateEditPanel .template-image {
  float: left;
  position: relative;
}
#TemplateThumbnail {
  max-width: 200px;
  height: auto;
}
/*************************************************************/
/*******************   template-image   **********************/
/*************************************************************/
#dwt-lightbox-wrapper .icon-close:hover {
  cursor: pointer;
  color: #106E81;
}
#dwt-lightbox-wrapper .icon-close {
  color: black;
  width: 48px;
  height: 48px;
  line-height: 48px;
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 48px;
}
#dwt-lightbox-wrapper img {
  max-height: 600px;
}
#dwt-lightbox-wrapper {
  position: fixed;
  z-index: 999999;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
}
#dwt-lightbox {
  background: white;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.template-image {
  position: relative;
}
.template-image .fa-search-plus {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  text-align: center;
  background: #F37331;
  right: 5px;
  top: 5px;
  border-radius: 99px;
  color: white !important;
  line-height: 32px;
  z-index: 99;
}
.template-image .fa-search-plus:hover {
  cursor: pointer;
  background: #106E81;
}
.template-image:hover {
  cursor: pointer;
}
.template-image:hover span {
  display: block;
}
.template-image:hover span {
  display: block;
}
#TemplateEditPanel .actionGroup {
  float: left;
  width: 100%;
  clear: both;
}
.template-image > span {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  display: none;
  position: absolute;
  z-index: 1000;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  bottom: 0;
  top: 0;
  background-color: rgba(16, 110, 129, 0.5);
}
.template-image > span > span {
  text-align: center;
  top: 40%;
  position: absolute;
  left: 10px;
  right: 10px;
  border: solid 2px;
  padding: 4px;
}
.btn-toggle-activate.activated {
  background-color: #F37331;
}
.btn-toggle-activate span {
  color: #fff !important;
}
.btn-toggle-templateposition, .btn-toggle-activate {
  background-color: #2E2A22;
  color: #fff !important;
}
.btn-toggle-activate {
  background-color: #2E2A22;
  color: #fff !important;
  line-height: 2;
}
.btn-toggle-activate:not(.activated):hover {
  background-color: #F37331;
}
.btn-toggle-activate:not(.activated) span.activate {
  display: block;
}
.btn-toggle-activate:not(.activated) span.activate, .btn-toggle-activate.activated:hover span.deactivate, .btn-toggle-activate.activated span.deactivate {
  display: block;
}
.btn-toggle-activate:not(.activated) span.deactivate, .btn-toggle-activate.activated:hover span.activate, .btn-toggle-activate span {
  display: none;
}
#TemplateList > .col-sm-2 {
  margin-top: 3px;
  margin-bottom: 0;
}
#TemplateList .image-overlay span:not(.caption-use) {
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
}
#TemplateList .image-overlay img {
  height: 130px;
  opacity: 0.5;
}
#TemplateList .image-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: rgba(243, 115, 49, 0);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  left: 0;
  top: 0;
}
#TemplateList.dropzone .dz-image {
  overflow: visible;
}
.template-image {
  min-height: 100px;
  height: auto !important;
}
#specialProductTypeList .template-title, #productTypeList .template-title, #TemplateList .template-title {
  background-color: #106E81;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #ffffff;
  padding: 5px 0px;
}
.templateTitleWrap:hover {
  cursor: pointer;
  z-index: 99;
}
.templateTitle:hover {
  background-color: #FF7933;
}
.templateTitleWrap {
  float: left;
  width: 100%;
  background-color: #F37331;
  padding: 5px;
  color: #fff;
}
#image-container.fotos.dropzone .dz-preview .dz-details {
  opacity: 1;
}
#image-container.fotos.dropzone .dz-preview:not(:hover) .dz-details {
  opacity: 0;
}
.image-popover-toggle {
  position: absolute;
  top: -41px;
  left: 0;
  width: 100%;
  height: 47px;
  text-align: center;
  line-height: 32px;
}
.image-popover-toggle.dropzone-image-popover-toggle {
  top: -44px !important;
}
.image-popover-toggle-i {
  background-color: #211F1A;
  width: 32px;
  height: 32px;
  line-height: 32px !important;
  color: white;
  font-size: 16px !important;
  border-radius: 25px;
}
.image-popover-toggle-i:hover {
  background-color: #211F1A;
}
.compound-image-actions i {
  font-size: 48px;
}
.compound-image .compound-image-drag-container {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.compound-image .compound-image-drag-container, .compound-image .compound-image-drag, .compound-image .vignette-preview {
  position: absolute;
}
.compound-image .compound-vignette {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 8888;
  pointer-events: none;
}
.compound-image-drag.ui-draggable-handle:not(.transform):not(.canvas-ruler-marker):not(.clipperMask):before {
  display: none;
}
.compound-image:not(.lock-position) .compound-image-drag-container, .compound-image:not(.selected) .compound-image-drag-container {
  overflow: hidden !important;
}
.compound-image-drag img {
  height: 100%;
  width: 100%;
}
.compound-image-drag {
  outline: solid 1px #2990cc;
}
.compound-image-actions {
  z-index: 9999;
}
#triggerUploadCompoundImage:hover {
  color: #007BA8;
}
.compound-image-actions {
  position: absolute;
  top: 10px;
  right: 10px;
}
.popover-image-actions {
  z-index: 9999 !important;
}
.quickedit-image-actions-icon {
  font-size: 16px;
  margin-right: 1px;
}
.quickedit-image-actions-text {
  font-size: 11px;
}
.image-actions:hover {
  z-index: 9999 !important;
}
.image-actions {
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.image-actions li:first-child {
  background-color: #211F1A;
}
.image-actions li:hover {
  background-color: #211F1A;
}
.image-actions:not(:hover) li:not(:first-child) {
  display: none !important;
}
.image-actions li {
  height: 32px;
  width: 32px;
  border-radius: 25px;
  position: relative;
  display: flex !important;
  justify-content: center;
  align-items: center;
  list-style: none;
  background-color: #F37331;
  color: #fff;
  margin-bottom: 3px;
}
.image-actions li:first-child a, .image-actions li:first-child i {
  color: #fff !important;
}
.image-actions li:first-child i {
  font-size: 16px !important;
}
.image-actions li a, .image-actions li i {
  color: #fff !important;
  height: 32px !important;
  line-height: 32px !important;
}
#TemplateList .col-sm-4, #TemplateList .col-sm-2 {
  float: left;
}
#TemplateList .dz-preview {
  display: flex;
  margin: 5px;
}
#templateModal #TemplateList {
  margin: -5px;
}
#TemplateList .templateTitleWrap {
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
}
#TemplateList .dz-preview:hover .templateTitleWrap, #TemplateList .dz-preview:hover .templateTitleWrap *, #TemplateList .isActiveTemplate .templateTitleWrap, #TemplateList .isActiveTemplate .templateTitleWrap * {
  background-color: #106E81;
}
.templateTitleWrap:hover .fullTitle {
  display: block !important;
}
.fullTitle {
  outline: solid 1px #2E2A22 !important;
  left: 0;
  position: absolute;
  background-color: #F37331;
  white-space: nowrap;
  height: 32px;
  line-height: 30px;
  z-index: 99;
  text-align: left !important;
  bottom: 0;
  padding: 0 10px;
  min-width: 100%;
}
.templateTitleWrap:not(:hover) .fullTitle {
  display: none;
}
.templateTitle {
  margin-left: 5px;
  position: relative;
}
.templateTitleWrap * {
  float: left;
}
#templateTypeList > div, #productTypeList > div {
  float: left;
}
#productTypeList .dz-image {
  padding-bottom: 50px;
}
hr.product-seperator {
  border-color: rgba(0, 0, 0, 0.1);
}
#specialProductTypeList.dropzone .dz-image, #productTypeList.dropzone .dz-image, #TemplateList.dropzone .dz-image {
  height: auto !important;
}
#specialProductTypeList .dz-preview:hover, #productTypeList .dz-preview:hover, #TemplateList .dz-preview:hover {
  cursor: pointer;
  border-color: #F37331;
}
#specialProductTypeList .dropzone .dz-preview, #productTypeList .dropzone .dz-preview {
  outline: solid 1px white;
}
.modal-body #productTypeList.dropzone .dz-preview {
  background: rgba(255, 255, 255, 0.8);
  position: relative;
  display: inline-block;
  vertical-align: top;
  border: 1px solid #acacac;
  box-sizing: border-box;
  margin: 3px;
}
#specialProductTypeList .dz-preview.selected, #productTypeList .dz-preview.selected {
  outline: solid 1px #106E81 !important;
}
#specialProductTypeList .template-image, #productTypeList .template-image {
  min-height: 90px !important;
}
#specialProductTypeList.dropzone .dz-image img, #productTypeList.dropzone .dz-image img, #TemplateList.dropzone .dz-image img {
  margin: 0 auto;
  width: 100%;
  position: relative;
  left: auto;
}
#productTypeList.dropzone .dz-image img, #TemplateList.dropzone .dz-image img {
  height: 200px !important;
}
#TemplateList .image-overlay span.caption-use {
  background: none !important;
  border: none !important;
}
#TemplateList .image-overlay:hover img {
  opacity: 1;
}
#TemplateList .image-overlay:hover {
  cursor: pointer;
  background-color: rgba(16, 110, 129, 0.8);
}
#TemplateList .image-overlay:hover span.caption-use {
  opacity: 1;
  display: block;
  color: #333;
}
#TemplateList .image-overlay span.caption-use {
  opacity: 0;
  display: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #333;
}
#templateModal .scroll-container {
  max-height: 60vh;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-top: 10px;
  border-top: solid 1px #f2f2f2;
  border-left: solid 1px #f2f2f2;
  border-bottom: solid 1px #f2f2f2;
}
.scroll-container.no-scroll {
  overflow: hidden !important;
}
#TemplateList {
  line-height: 0;
}
#TemplateCollections {
  padding: 0 4px 10px;
}
#TemplateCollections .btn {
  margin-right: 10px;
}
#wizardModal .scroll-container {
  overflow-y: scroll;
  max-height: calc(100vh - 260px);
}
.alertVisible .elementInfoHelper {
  display: block;
}
.elementInfoHelper {
  display: none;
  position: absolute;
  right: 0;
  background: rgba(255, 255, 255, 0.5);
  padding: 2px;
  font-size: 8px;
  top: -7px;
}
.elementInfoHelper span {
  color: #106E81;
}
#wizardModal .mce-panel {
  padding-right: 0.5px;
  display: block !important;
}
#editImageModal .editToolbar {
  background-color: #F37331;
  color: #FFF;
}
#editImageModal .editToolbar {
  padding-top: 0px;
  padding-bottom: 0px;
}
#editImageModal .editToolbar ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  float: none;
  width: auto;
}
#editImageModal .editToolbar ul li {
  position: relative;
  height: 50px;
  float: left;
}
#editImageModal .editToolbar ul li a {
  font-size: 22px;
  height: 50px;
  line-height: 50px;
  padding: 0px 15px !important;
  color: #fff;
  text-decoration: none;
}
#editImageModal .editToolbar ul li a:hover {
  color: #106E81;
}
#editImageModal .editToolbar ul li a:after {
  content: "";
  display: block;
  border-right: 1px solid #4da3c2;
  width: 1px;
  height: 26px;
  position: absolute;
  right: 0px;
  top: 12px;
}
#autoSave:not(.saving) {
  display: none;
}
#autoSave {
  position: absolute;
  bottom: 85px;
  left: 33px;
  z-index: 10000;
  font-weight: 900;
}
.ruler {
  position: absolute;
  z-index: 10000;
}
.ruler.vertical {
  width: 1px;
}
.ruler.horizontal {
  width: 1px;
}
@keyframes autosave {
  from {
    color: #F37331;
    border-color: #F37331;
  }
  to {
    color: #FF7933;
    border-color: #FF7933;
  }
}
@keyframes autosaveB {
  from {
    color: #F37331;
    background-color: #F37331;
    height: 2px;
  }
  to {
    color: #FF7933;
    background-color: #FF7933;
    height: 3px;
  }
  to {
    color: #FF7933;
    background-color: #FF7933;
    height: 4px;
  }
}
#sessionContainer .session.multi-session {
  line-height: 19px;
}
#sessionContainer .session p {
  margin: 0;
  text-align: left;
  text-transform: none !important;
  font-size: 10px !important;
  font-weight: 900;
}
#messagesContainer {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 300px;
  z-index: 9999;
}
#messagesContainer .message {
  width: 300px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  padding: 5px;
  text-align: center;
  background: white;
  margin: 3px;
  height: 74px;
}
.messageLoader {
  position: relative;
  display: block;
}
.loaderIcon {
  width: 40px;
  height: 40px;
  position: relative;
  float: left;
}
.loaderIcon svg {
  width: 100%;
  height: 100%;
}
.loaderIcon svg.rotating {
  left: -10px;
  top: -10px;
}
#messagesContainer .message p {
  margin: 0;
}
.messageLoader > .loaderIcon {
  float: left;
}
.loaderIcon svg:not(.rotating) {
  padding: 10px;
  top: -10px;
  left: -10px;
}
.loaderIcon .border, .loaderIcon svg {
  position: absolute;
  left: 0;
}
/*
.messageLoader:after{
  content: "";
  display: block;
  position: absolute;
  left: -5px;
  right: -5px;
  height:2px;
  -webkit-animation: autosaveB 2s infinite;
  -moz-animation:    autosaveB 2s infinite;
  -o-animation:      autosaveB 2s infinite;
  animation:         autosaveB 2s infinite;
}*/
#autoSave {
  display: block;
  -webkit-animation: autosave 0.5s infinite;
  -moz-animation: autosave 0.5s infinite;
  -o-animation: autosave 0.5s infinite;
  animation: autosave 0.5s infinite;
}
#autoSave:after {
  content: "";
  display: block;
  position: absolute;
  left: -5px;
  right: -5px;
  height: 2px;
  -webkit-animation: autosaveB 2s infinite;
  -moz-animation: autosaveB 2s infinite;
  -o-animation: autosaveB 2s infinite;
  animation: autosaveB 2s infinite;
}
#autoSave .fa {
  font-size: 24px;
}
#unauthorizedRecordWarning .warning, #missingRecordWarning .warning {
  border: solid 1px firebrick;
  padding: 10px;
  background-color: rgba(178, 34, 34, 0.2);
}
#editImageModal .editToolbar .restore ul li span {
  position: relative;
  top: -3px;
}
#editImageModal .editToolbar .restore ul li a:after {
  content: "";
  display: block;
  border-right: none;
  width: 1px;
  height: 26px;
  position: absolute;
  right: 0;
  top: 12px;
}
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/************************************************************* Alert *********************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
.unauthorized #productArea, .unauthorized #optionArea, .unauthorized #sidesArea {
  display: none;
}
.alertVisible .error {
  outline: 1px solid #ff0000;
}
.fa-2x {
  font-size: 1.8em;
}
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/************************************************************* Login *********************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/************************************************************* Dropzone ******************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/* The MIT License */
.dropzone, .dropzone *, .dropzone-previews, .dropzone-previews * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.dropzone {
  position: relative;
  padding: 1em;
}
.dropzone.dz-clickable {
  cursor: pointer;
}
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message span {
  cursor: pointer;
}
.dropzone.dz-clickable * {
  cursor: default;
}
.dropzone .dz-message {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.dropzone.dz-drag-hover {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.04);
}
.dropzone.dz-started .dz-message {
  display: none;
}
.dropzone .dz-image {
  width: 100%;
  overflow: hidden;
  text-align: center;
  position: relative;
}
#mm-backgrounds.dropzone .dz-image {
  width: 100%;
  overflow: hidden;
  text-align: center;
  height: 165px;
  position: relative;
  line-height: 165px;
}
#mm-symbolen.dropzone .dz-preview .download-image, #mm-backgrounds.dropzone .dz-preview .download-image {
  position: absolute;
  right: 5px !important;
  z-index: 9999 !important;
}
.isActiveTemplate {
  border-color: #F37331;
}
#specialProductTypeList .dz-preview:hover .template-title, #TemplateList .dz-preview:hover .template-title, #productTypeList .dz-preview:hover .template-title, #TemplateList .isActiveTemplate .template-title, #productTypeList .isActiveTemplate .template-title {
  background-color: #F37331;
}
.dz-image.dz-place .template-title small {
  clear: both;
  float: left;
  width: 100%;
  text-align: center;
  display: block;
}
.dropzone .dz-image img {
  margin: 0 auto;
  width: 99%;
}
.dropzone .dz-preview.dz-file-preview [data-dz-thumbnail], .dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {
  display: none;
}
#mm-gallery.dropzone blockquote {
  width: 100%;
  text-align: center;
  justify-content: center;
  padding: 50px;
}
#mm-gallery.dropzone .dz-preview .dz-details {
  display: none;
}
.dropzone .dz-preview .dz-details, .dropzone-previews .dz-preview .dz-details {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  flex-direction: column;
  height: 100%;
  line-height: 25px;
  align-items: flex-start;
}
.dropzone .dz-preview .dz-details .dz-filename, .dropzone-previews .dz-preview .dz-details .dz-filename {
  overflow: hidden;
  width: 100%;
}
.dropzone .dz-preview.dz-small-image .dz-error-message {
  opacity: 1;
  bottom: 35px;
  top: auto;
  left: 5px;
  right: 5px;
  text-align: center;
}
.dropzone .dz-preview.dz-error .dz-error-mark, .dropzone-previews .dz-preview.dz-error .dz-error-mark {
  display: block;
  width: 36px;
  height: 36px;
}
.download-image:hover {
  cursor: pointer;
}
.dz-image-preview.template .download-image {
  right: 3px !important;
}
#addRasterImageDrag svg {
  margin-left: -10px !important;
  margin-top: 0 !important;
}
.download-template-title:hover {
  cursor: pointer;
}
.download-template-title {
  background: #106E81;
  border: 1px solid #eee;
  text-decoration: none !important;
  display: block;
  padding: 4px 5px;
  text-align: center;
  color: #fff;
  font-size: 12px;
}
.dz-remove > * {
  display: none !important;
}
.dz-remove:before {
  font: 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  content: "";
}
.user-image .edit-image {
  right: 79px !important;
}
.edit-image:hover, .download-image:hover, .dz-remove:hover {
  cursor: pointer;
}
.fs-click {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}
.dropzone .dz-preview.dz-success .dz-success-mark, .dropzone-previews .dz-preview.dz-success .dz-success-mark {
  display: none !important;
}
.dropzone .dz-preview:hover .dz-details img, .dropzone-previews .dz-preview:hover .dz-details img {
  display: none;
}
.dropzone .dz-preview .dz-success-mark, .dropzone-previews .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark, .dropzone-previews .dz-preview .dz-error-mark {
  display: none;
  position: absolute;
  width: 40px;
  height: 40px;
  font-size: 30px;
  text-align: center;
  right: -10px;
  top: -10px;
}
.dropzone .dz-preview .dz-success-mark, .dropzone-previews .dz-preview .dz-success-mark {
  color: #8cc657;
}
.dropzone .dz-preview .dz-error-mark, .dropzone-previews .dz-preview .dz-error-mark {
  color: #ee162d;
}
.dropzone .dz-preview .dz-progress, .dropzone-previews .dz-preview .dz-progress {
  position: absolute;
  top: 100px;
  left: 6px;
  right: 6px;
  height: 6px;
  background: #d7d7d7;
  display: none;
}
.dropzone .dz-preview .dz-progress .dz-upload, .dropzone-previews .dz-preview .dz-progress .dz-upload {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  background-color: #8cc657;
}
.dropzone .dz-preview.dz-processing .dz-progress, .dropzone-previews .dz-preview.dz-processing .dz-progress {
  display: block;
}
.dropzone .dz-preview .dz-error-message, .dropzone-previews .dz-preview .dz-error-message {
  display: none;
  position: absolute;
  top: -5px;
  left: -20px;
  background: rgba(245, 245, 245, 0.8);
  padding: 8px 10px;
  color: #800;
  min-width: 140px;
  max-width: 500px;
  z-index: 500;
}
.dropzone .dz-preview:hover.dz-error .dz-error-message, .dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
  display: block;
}
.dropzone {
  min-height: 225px;
  -webkit-border-radius: 3px;
  border-radius: 0px;
  padding: 0px;
}
.dropzone .dz-default.dz-message {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  background-repeat: no-repeat;
  background-position: 0 0;
  position: absolute;
  width: 428px;
  height: 10px;
  margin-left: -214px;
  margin-top: -61.5px;
  top: 50%;
  left: 50%;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 138dpi), (min-resolution: 1.5dppx) {
  .dropzone .dz-default.dz-message {
    -webkit-background-size: 428px 406px;
    -moz-background-size: 428px 406px;
    background-size: 428px 406px;
  }
}
.dropzone .dz-default.dz-message span {
  display: none;
}
.dropzone.dz-square .dz-default.dz-message {
  background-position: 0 -123px;
  width: 268px;
  margin-left: -134px;
  height: 174px;
  margin-top: -87px;
}
.dropzone.dz-drag-hover .dz-message {
  opacity: 0.15;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
  filter: alpha(opacity=15);
}
.dropzone.dz-started .dz-message {
  display: block;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.dropzone .dz-preview, .dropzone-previews .dz-preview {
  -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
  font-size: 14px;
}
#mm-backgrounds.dropzone .maskers .dz-image, #mm-symbolen.dropzone .dz-image {
  height: 150px;
}
#mm-backgrounds.dropzone .maskers .dz-image img {
  top: -16%;
}
.dropzone .dz-preview.dz-image-preview:hover .dz-details img, .dropzone-previews .dz-preview.dz-image-preview:hover .dz-details img {
  display: block;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  filter: alpha(opacity=10);
  cursor: pointer;
}
.dropzone .dz-preview.dz-success .dz-success-mark, .dropzone-previews .dz-preview.dz-success .dz-success-mark {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.dropzone .dz-preview.dz-error .dz-error-mark, .dropzone-previews .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.dropzone .dz-preview.dz-error .dz-progress .dz-upload, .dropzone-previews .dz-preview.dz-error .dz-progress .dz-upload {
  background: #ee1e2d;
}
.dropzone .dz-preview .dz-error-mark, .dropzone-previews .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark, .dropzone-previews .dz-preview .dz-success-mark {
  display: block;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 138dpi), (min-resolution: 1.5dppx) {
  .dropzone .dz-preview .dz-error-mark, .dropzone-previews .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark, .dropzone-previews .dz-preview .dz-success-mark {
    -webkit-background-size: 428px 406px;
    -moz-background-size: 428px 406px;
    background-size: 428px 406px;
  }
}
.dropzone .dz-preview .dz-error-mark span, .dropzone-previews .dz-preview .dz-error-mark span, .dropzone .dz-preview .dz-success-mark span, .dropzone-previews .dz-preview .dz-success-mark span {
  display: none;
}
.dropzone .dz-preview .dz-error-mark, .dropzone-previews .dz-preview .dz-error-mark {
  background-position: -268px -123px;
}
.dropzone .dz-preview .dz-success-mark, .dropzone-previews .dz-preview .dz-success-mark {
  background-position: -268px -163px;
}
.dropzone .dz-preview .dz-progress .dz-upload, .dropzone-previews .dz-preview .dz-progress .dz-upload {
  -webkit-animation: loading 0.4s linear infinite;
  -moz-animation: loading 0.4s linear infinite;
  -o-animation: loading 0.4s linear infinite;
  -ms-animation: loading 0.4s linear infinite;
  animation: loading 0.4s linear infinite;
  -webkit-transition: width 0.3s ease-in-out;
  -moz-transition: width 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out;
  -ms-transition: width 0.3s ease-in-out;
  transition: width 0.3s ease-in-out;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-repeat: repeat-x;
  background-position: 0px -400px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 138dpi), (min-resolution: 1.5dppx) {
  .dropzone .dz-preview .dz-progress .dz-upload, .dropzone-previews .dz-preview .dz-progress .dz-upload {
    -webkit-background-size: 428px 406px;
    -moz-background-size: 428px 406px;
    background-size: 428px 406px;
  }
}
.dropzone .dz-preview.dz-success .dz-progress, .dropzone-previews .dz-preview.dz-success .dz-progress {
  display: block;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
.dropzone .dz-preview .dz-error-message, .dropzone-previews .dz-preview .dz-error-message {
  display: block;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.dropzone .dz-preview:hover.dz-error .dz-error-message, .dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.dropzone a.dz-remove.failed {
  margin-top: 60px;
}
.dropzone a.dz-remove, .dropzone-previews a.dz-remove {
  background: #106E81;
  border: 1px solid #eee;
  text-decoration: none;
  display: block;
  padding: 4px 5px;
  text-align: center;
  color: #ffffff;
  margin-top: 26px;
}
.dropzone a.dz-remove:hover, .dropzone-previews a.dz-remove:hover {
  color: #666;
}
.catalog-number {
  position: absolute;
  left: 10px;
}
.dropzone a.dz-place-archived-image, .dropzone a.dz-place, .dropzone a.dz-switch, .dropzone-previews a.dz-place {
  background: #106E81;
  border: 1px solid #eee;
  text-decoration: none;
  display: block;
  padding: 4px 5px;
  text-align: center;
  color: #ffffff;
  margin-top: 6px;
  font-size: 10px;
}
.dropzone a.dz-place-archived-image:hover, .dropzone a.dz-place:hover, .dropzone a.dz-switch:hover, .dropzone-previews a.dz-place:hover {
  color: #106E81;
  background-color: #fff;
  border-color: #106E81;
}
@-moz-keyframes loading {
  0% {
    background-position: 0 -400px;
  }
  100% {
    background-position: -7px -400px;
  }
}
@-webkit-keyframes loading {
  0% {
    background-position: 0 -400px;
  }
  100% {
    background-position: -7px -400px;
  }
}
@-o-keyframes loading {
  0% {
    background-position: 0 -400px;
  }
  100% {
    background-position: -7px -400px;
  }
}
@-ms-keyframes loading {
  0% {
    background-position: 0 -400px;
  }
  100% {
    background-position: -7px -400px;
  }
}
@keyframes loading {
  0% {
    background-position: 0 -400px;
  }
  100% {
    background-position: -7px -400px;
  }
}
/* TEXT EIDOTR */
.toolbarWrapper {
  position: relative;
  height: 0px;
  top: 0px;
  width: 100%;
  zoom: normal;
}
.tinymceEditorToolbar {
  position: absolute;
  bottom: 2px !important;
  left: -2px;
  right: -2px;
  background-color: #211F1A;
}
.tinymceEditorToolbar .mce-panel {
  border: none !important;
}
/* TINYMCE SKIN */
.mce-tinymce-inline {
  border-radius: 5px !important;
  padding: 1px !important;
  margin-bottom: 8px !important;
}
.mce-panel {
  background-color: #211F1A !important;
}
.mce-btn {
  background-color: #211F1A !important;
}
.mce-btn:hover, .mce-btn:focus, .mce-btn.mce-active, .mce-btn.mce-active:hover {
  border-color: transparent !important;
}
.mce-btn button {
  height: 48px;
  line-height: 36px;
  color: #fff !important;
}
.mce-ico {
  height: 36px;
  line-height: 36px;
  color: #fff !important;
}
.mce-caret {
  border-top: 4px solid #fff !important;
}
.mce-btn:hover button, .mce-btn:focus button, .mce-btn.mce-active button, .mce-btn.mce-active:hover button, .mce-btn:hover button .mce-ico, .mce-btn:focus button .mce-ico, .mce-btn.mce-active button .mce-ico, .mce-btn.mce-active:hover button .mce-ico {
  color: #007BA8 !important;
}
.mce-btn.mce-disabled button, .mce-btn.mce-disabled:hover button, .mce-btn.mce-disabled:focus button, .mce-btn.mce-disabled button .mce-ico, .mce-btn.mce-disabled:hover button .mce-ico, .mce-btn.mce-disabled:focus button .mce-ico {
  color: #808890 !important;
}
.mce-btn-group:not(:first-child) {
  border-left: 1px solid #646a70 !important;
}
.mce-menu-item .mce-ico, .mce-menu-item .mce-text {
  color: #fff !important;
}
.mce-menu-item:hover, .mce-menu-item.mce-selected, .mce-menu-item:focus {
  background-color: #007BA8 !important;
}
.quickedit .fa-lock {
  color: #106E81;
}
.mce-i-fa.fa-lock {
  font: 14px/1 FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.space .letter-helper {
  display: none;
}
#letter-helper, .letter-helper {
  font-family: inherit;
}
/* RASTER IMAGE */
.raster-image {
  background-image: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
  outline: dashed 2px #106E81;
}
.raster-image:hover, .raster-image.selected {
  background-image: linear-gradient(315deg, #ffffff 0%, #9EA5AD 74%);
  outline: dashed 2px #F37331;
}
.rasterImageContainer {
  height: inherit;
  width: inherit;
}
.raster-image.size-small .rasterImageUpload {
  left: 0;
  right: 0;
  bottom: 0;
  right: 0;
  width: auto;
  height: auto;
}
.raster-image.size-small .rasterImageUpload i {
  float: left;
}
.rasterImageUpload i {
  font-size: 16px;
  color: #fff;
  background: #2E2A22;
  display: block;
  padding: 3px 3px;
  border-radius: 99px;
  width: 28px;
  height: 28px;
  line-height: 22px;
  margin-bottom: 2px;
}
.rasterImageUpload i:hover {
  background: #106E81;
  cursor: pointer;
}
.element.image .content img.rasterImage {
  width: initial;
  height: initial;
}
.afterFix {
  position: absolute;
  right: 30px;
  top: 31px;
}
.rasterImageUpload {
  display: none;
}
.raster-image:hover .rasterImageUpload {
  z-index: 4001;
  display: block !important;
}
.rasterImageUpload {
  height: 120px;
  width: 30px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
}
.whitespace_input {
  padding: 5px;
}
.element-position, .element-sizes, .raster-image-inputs {
  display: flex;
}
.raster-image-whitespace-control:not(.open) .raster-image-inputs.seperated, .raster-image-whitespace-control:not(.single-image) #toggleWhiteSpaceUnlock, .raster-image-whitespace-control:not(.single-image):not(.open) .raster-image-inputs.seperated {
  display: none !important;
}
.raster-image-whitespace-control {
  margin-bottom: 20px;
}
.raster-image-inputs.seperated {
  margin: 0 -3px;
}
.raster-image-inputs.seperated > div {
  margin: 3px !important;
}
.element-position > div:nth-child(1), .element-sizes > div:nth-child(1), .raster-image-inputs > div:nth-child(1) {
  margin-right: 10px;
  position: relative;
}
.element-position > div:nth-child(2), .element-sizes > div:nth-child(2), .raster-image-inputs > div:nth-child(2) {
  margin-left: 10px;
  position: relative;
}
/* ABOVO */
.abovo-places .places {
  height: 300px;
  overflow-y: scroll;
  margin: 20px 0;
  width: 100%;
  padding: 0;
}
.places li:nth-child(odd) {
  background-color: #f1f1f1;
}
.places li:nth-child(even) {
  background-color: #e8e8e8;
}
.places li {
  list-style: none;
  width: 100%;
  padding: 1px 10px;
}
.abovo-places .toggleAbovoMap {
  background-color: #F37331;
}
.abovo-places.map-active .toggleAbovoMap:nth-child(1) {
  background-color: #106E81;
}
.abovo-places:not(.map-active) .toggleAbovoMap:nth-child(2) {
  background-color: #106E81;
}
.abovo-places .toggleAbovoMap:nth-child(2):hover {
  color: #fff;
}
.abovo-places.map-active #abovoPlaces {
  display: none;
}
.abovo-places:not(.map-active) #abovoMap {
  display: none;
}
#abovoProductList {
  width: 100%;
  max-height: 40vh;
  overflow-y: scroll;
  margin: 0;
  position: relative;
}
#abovoLocation {
  text-indent: 10px;
}
#abovoLocation {
  text-indent: 10px;
}
.clearSearch {
  position: absolute;
  right: 7px;
  top: 7px;
}
.clearSearch:hover {
  cursor: pointer;
}
#abovoProductList .product {
  width: 100%;
  clear: both;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: rgba(16, 110, 129, 0.25);
  margin: 1px 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#abovoProductList .product h4 {
  font-size: 10px;
  margin: 5px;
}
#abovoProductList .product span {
  font-size: 9px;
}
#paperSearch {
  position: absolute;
  right: 322px;
  top: 0;
  background: white;
  bottom: 0;
  width: 250px;
}
.distributionTypeExtra {
  min-height: 40px;
}
#distributionExtra {
  padding: 15px;
}
#sizeSidebar small {
  font-size: 10px;
}
.product select:disabled {
  opacity: 0.5;
}
#abovoProductList .product.selected {
  background-color: rgba(16, 110, 129, 0.8);
}
#abovoProductList {
  height: 262px;
}
#publicationSizes {
  height: 205px;
  float: left;
  width: 100%;
  overflow-y: scroll;
}
#abovo_publication_sizes_list {
  width: 100%;
}
.toggleProductColumn, .abovo_check {
  width: 24px;
  height: 24px;
  border: solid 2px;
  border-radius: 2px;
  text-align: center;
  margin: 0 auto;
  margin-top: 9px;
}
.order_detail_preview_wrap {
  border: solid 2px rgba(16, 110, 129, 0.8);
  border-radius: 2px;
}
.order_detail_preview_wrap > h4 {
  text-align: center;
  font-weight: 500;
  background: rgba(16, 110, 129, 0.8);
  margin: 0;
  color: #fff;
  padding: 10px 0;
}
#toggleHelp img {
  padding: 7px 0;
}
#order_detail_preview > * {
  clear: both;
  width: 100%;
  display: block;
}
.order_detail_preview_wrap > div {
  padding: 10px;
}
.modal-header {
  padding: 5px 15px;
  position: sticky;
  top: 0;
  z-index: 99999;
}
.abovo_select_publication_date {
  float: right;
  margin-top: -5px;
}
.toggleProductColumn:hover, .abovo_check:hover {
  cursor: pointer;
}
.publication_size:not(.selected) .toggleProductColumn > span, .product:not(.selected) .abovo_check > span {
  display: none;
}
#abovoProductList .product > div:first-child {
  width: 30px;
}
#abovoProductList .product > div:not(:first-child) {
  width: calc(100% - 30px);
}
.publication_size .inner {
  border: solid 2px #fff;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: flex;
  border-color: rgba(0, 0, 0, 0.65);
  position: relative;
  width: 100%;
}
.publication_size {
  float: left;
  display: inline-block;
  clear: both;
  margin-bottom: 3px;
}
.publication_size .inner .columns {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  float: left;
  clear: both;
  height: 100%;
}
.addvert {
  display: inline-block;
}
#abovoMap {
  height: 324px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-top: 24px;
}
.publication_size {
  float: left;
  width: 100%;
}
.publication_size .inner .columns > span {
  background-color: #ccc;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  float: left;
}
.publication_size:hover {
  cursor: pointer;
}
.publication_size.selected, .publication_size:hover .inner, .publication_size.selected .inner {
  border-color: rgba(16, 110, 129, 0.8);
}
.btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active {
  color: #ccc;
}
#saveAddvertPanel {
  width: 100%;
}
/*** Google Map ***/
/*
.gmnoprint:not(.gm-bundled-control) > .gm-style-mtc,
.gm-control-active{
  display: none !important;
}*/
.abovo_size_toolbar {
  position: relative;
  width: 100%;
  height: 30px;
}
.abovo_size_toolbar span.disabled {
  color: #ccc;
}
.abovo_size_toolbar span:nth-child(1) {
  left: 0;
}
.abovo_size_toolbar span:nth-child(2) {
  left: 40px;
  right: 40px;
}
.abovo_size_toolbar span:nth-child(3) {
  right: 0;
}
.abovo_size_toolbar span {
  position: absolute;
}
.publication_size .inner {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.publication_size .inner .productInfo {
  text-align: center;
  width: 100%;
  padding: 5px;
}
#addvertContent .modal-body h4 {
  margin-top: 0;
}
#Abovo .actionGroup {
  margin-right: 5px;
}
.borderSelectorContainer {
  margin-top: 27px;
}
.border-selector {
  display: block;
  margin: 0 -5px;
}
.border-selector input {
  opacity: 0;
}
.border-choice small {
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: center;
  left: 0;
  font-weight: 900;
}
.border-choice {
  text-align: left;
  position: relative;
  background: #f2f2f2;
  border: solid 2px rgba(0, 0, 0, 0.05);
  margin: 5px;
  width: calc(33% - 10px);
  float: left;
  min-height: 75px;
}
.svg-border {
  transform: scale(0.65);
  transform-origin: center;
}
.svg-border svg {
  display: block;
  position: absolute;
  left: -20px;
  top: -25px;
}
#addvert-border {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
#addvert-border.border-solid {
  border: solid 1pt black;
}
#addvert-border.border-rounded {
  border: solid 1pt black;
  border-radius: 25px;
}
#addvert-border.border-double .outter {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: solid 3pt;
}
#addvert-border.border-double .inner {
  position: absolute;
  top: 5pt;
  right: 5pt;
  left: 5pt;
  bottom: 5pt;
  border: solid 1pt black;
}
.border-choice .single-border {
  border-top: solid 3pt black;
  border-right: solid 3pt black;
}
.border-choice > span {
  width: 55px;
  height: 60px;
  display: block;
  float: right;
  margin: 5px;
  position: relative;
}
.border-choice:hover {
  cursor: pointer;
}
.border-choice .double-border .outter {
  border-top: solid 5px black;
  border-right: solid 5px black;
  position: absolute;
  width: 100%;
  height: 100%;
}
.border-choice .double-border .inner {
  border-top: solid 3px black;
  border-right: solid 3px black;
  position: absolute;
  right: 7px;
  top: 7px;
  left: 0;
  bottom: 0;
}
.border-choice .single-border-dela {
  border-bottom: solid 3pt black;
  border-right: solid 3pt black;
}
.border-choice .single-border {
  border-top: solid 3pt black;
  border-right: solid 3pt black;
}
.border-choice .rounded-border {
  border-top: solid 3px black;
  border-right: solid 3px black;
  border-top-right-radius: 25px;
}
.border-choice:hover, .border-choice.selected {
  border-color: #F37331;
}
.border-solid-input {
  border-bottom: solid 10px black;
  width: calc(100% - 110px);
  height: 1px;
  display: block;
  position: absolute;
  left: 100px;
  top: 7px;
}
.border-dotted-input {
  border-bottom: dotted 10px black;
  width: calc(100% - 110px);
  height: 1px;
  position: absolute;
  left: 100px;
  top: 7px;
}
.publication_size:hover .inner, .publication_size.selected .inner {
  background: rgba(16, 110, 129, 0.8);
}
#calculatedPrice i {
  font-size: 10px;
}
.priceCalculation {
  font-weight: 900;
  text-align: center;
  height: 60px;
  line-height: 10px;
  width: 100%;
}
.grayscale {
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
#AddvertPreview {
  margin: 20px 20px;
  background: #f2f2f2;
  padding: 20px;
}
#ShapePicker div.radio {
  float: left;
  min-height: 20px;
  margin-top: 0px;
  margin-bottom: 10px;
}
#ShapePicker {
  margin-top: 10px;
}
#overledeneFoto .avatar-wrapper:hover {
  cursor: pointer;
}
#overledeneFoto .avatar-wrapper img {
  width: 100%;
  height: auto;
}
#overledeneFoto .avatar-wrapper {
  height: 200px;
  width: 200px;
}
#overledeneFoto p, #ShapePicker div.radio label, #relationColumn p {
  font-weight: 900;
}
#ShapePicker div.radio label {
  float: left;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  font-size: 10px;
  margin-right: 10px;
}
.relation-picker .input-wrap {
  margin-bottom: 10px;
}
.relation-picker.custom-option-selected #changeRelationshipCustom {
  display: block;
}
#changeWizardRelationName {
  margin-top: 0px;
  min-width: 274px;
}
#changeRelationshipCustom {
  display: none;
  max-width: 274px;
  min-width: 274px;
}
.tinymceWizardToolbar .mce-tinymce {
  border-width: 1px !important;
  left: -1px !important;
  top: 8px !important;
  width: calc(100% - 20px) !important;
  height: 50px !important;
  border-top-left-radius: 25px !important;
  overflow: hidden;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-right-radius: 25px !important;
  padding: 0 10px !important;
}
#DatesCityContainer > * > span {
  float: left;
}
#DatesBlankContainer .wizardTinyMCE, #DatesContainer .wizardTinyMCE {
  max-width: 250px;
}
#DatesBlankContainer .wizardTinyMCE:nth-child(1), #DatesContainer .wizardTinyMCE:nth-child(1) {
  float: left;
}
#DatesBlankContainer .wizardTinyMCE:nth-child(2), #DatesContainer .wizardTinyMCE:nth-child(2) {
  float: right;
}
#changeRelationshipCustom, #changeWizardRelationName {
  width: auto;
  float: left;
  clear: both;
}
#changeRelationship {
  margin-bottom: 10px;
  border-radius: 12px;
  border: none;
  width: 274px;
  padding: 5px 0;
  text-indent: 15px;
}
#DatesContainer div span:nth-child(1), #ShapePicker div.radio:nth-child(1) {
  text-align: left;
}
#DatesContainer div span:nth-child(2), #ShapePicker div.radio:nth-child(2) {
  text-align: right;
}
#ShapePicker div.radio:hover label, #ShapePicker div.radio label.selected {
  color: #106E81;
}
.modal-body ul#FamilyList, .modal-body ul#FamilyList ul {
  margin: 0;
  float: left;
  width: 100%;
}
.move_family, .sort_families, .delete_family, .add_parent, .add_child {
  text-align: center;
  background-color: #106E81;
  color: #fff;
  z-index: 10;
  box-shadow: rgba(149, 157, 165, 0.3) 0 4px 8px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 18px;
}
.move_family:hover, .sort_families:hover, .delete_family:hover, .add_parent:hover, .add_child:hover {
  cursor: pointer;
}
.family-column div {
  position: relative;
}
.delete_child {
  position: absolute;
  right: 20px;
  color: red;
  top: 10px;
}
.delete_child:hover {
  cursor: pointer;
}
.family-actions {
  margin: 0px 5px;
  width: 32px;
  flex: none !important;
}
.family-actions a {
  clear: both;
  display: block;
  margin: 5px 0;
  border-radius: 4px;
}
.add_parent:hover, .add_child:hover {
  background-color: rgba(16, 110, 129, 0.8);
}
#ShapePicker [id$=Container]:not(.active) {
  display: none;
}
#DatesContainer div > span {
  width: 50%;
  float: left;
}
#FamilyMemberListWrapper.one_col .move_family {
  display: none;
}
.family-table-column:nth-child(1) .move_family .fa-arrow-left {
  display: none;
}
.family-table-column:nth-child(2) .move_family .fa-arrow-right {
  display: none;
}
#FamilyMemberListWrapper.one_col .family-table-column:nth-child(2) {
  display: none;
}
#FamilyMemberListWrapper ul {
  list-style: none;
  padding-left: 0;
  margin: 20px 5px 40px;
}
#FamilyList > li {
  float: left;
  clear: both;
  position: relative;
  background: rgba(0, 0, 0, 0.05);
  padding: 10px;
  margin-bottom: 3px;
  min-height: 80px;
}
#FamilyMemberListWrapper li.parent-row .add_parent {
  position: absolute;
  right: -45px;
  top: 0;
}
#FamilyMemberListWrapper .input-wrap input {
  text-indent: 5px;
  width: 200px;
}
#FamilyMemberListWrapper .input-wrap {
  margin-left: 5px;
}
#FamilyMemberListWrapper li.children-row {
  padding: 5px 0 5px 0;
  margin-left: 153px;
}
#FamilyMemberListWrapper li.children-row, #FamilyMemberListWrapper li.parent-row {
  position: relative;
  float: left;
  clear: both;
  width: 100%;
}
#FamilyMemberListWrapper .add_child_wrap {
  position: absolute;
  left: 0;
  top: 4px;
}
.child-c, .parent-c {
  width: 100%;
  clear: both;
  display: block;
  position: relative;
}
.parent-c .parent-city {
  position: absolute;
  right: calc(100% + 25px);
}
.city-td {
  padding-right: 10px;
  text-align: right;
}
.mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table caption {
  border: none !important;
  width: auto !important;
  height: auto !important;
}
.child-tr td, .parent-tr td {
  vertical-align: top;
}
#FamilyMemberListWrapper .removeItem {
  position: absolute;
  right: 5px;
  top: 0;
}
#FamilyMemberListWrapper .removeItem:hover {
  cursor: pointer;
  color: #106E81;
}
#FamilyMemberListWrapper li.children-row > *, #FamilyMemberListWrapper li.parent-row > * {
  float: left;
  position: relative;
}
/***
WizardModal
 */
#introductietekst.wizardTinyMCE, #gedicht.wizardTinyMCE {
  height: auto;
  float: left;
  min-height: 200px;
  background: white;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  border: none;
  outline: none;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
#introductietekst p, #gedicht p {
  margin: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
#wizardModal .modal-header {
  float: left;
  width: 100%;
  display: block;
}
#wizardModal .modal-header h4 {
  margin: 0;
  width: auto;
  float: left;
  margin-right: 20px;
  padding: 8px 0;
  font-size: 16px;
}
#wizardModal .modal-header h4:hover {
  cursor: pointer;
}
#wizardModal .modal-header h4:hover .label, #wizardModal .modal-header h4.active .label {
  border-color: white;
}
#wizardModal .modal-body .familyButtons {
  position: relative;
  width: 100%;
  text-align: right;
  clear: both;
}
#wizardModal .modal-body #FamilyList {
  width: 100%;
}
#wizardModal .modal-body {
  float: left;
  width: 100%;
}
#activeDossierNumber {
  text-align: center;
  width: auto !important;
  display: inline-block !important;
  margin-right: 15px;
}
/** helpModal **/
.helpActionButtons {
  max-height: calc(100vh - 320px);
  overflow-y: scroll;
}
.helpActionButtons > .videoList {
  float: left;
  width: 100%;
  clear: both;
  max-height: 300px !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
}
.helpActionButtons > *:hover {
  cursor: pointer;
}
.helpActionButtons a > *:nth-child(2) {
  margin-top: 10px;
}
.helpActionButtons a:hover {
  background-color: #FF7933 !important;
}
.helpActionButtons > .videoList > *, .helpActionButtons > *:not(.videoList) {
  padding: 5px 10px;
  color: #fff;
  border-radius: 2px;
  z-index: 99999;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: 10px;
  background-color: #F37331;
  float: left;
  width: calc(33% - 20px);
  text-align: center;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  font-size: 14px;
  min-height: 84px;
  justify-content: center;
}
.helpActionButtons i {
  font-size: 24px;
}
.helpActionButtons > .videoList > * {
  background-color: #FF7933;
}
#toggleVideoList:not(.active) .v-hide {
  display: none !important;
}
#toggleVideoList.active .v-show {
  display: none !important;
}
#helpVideo {
  min-height: 315px;
  padding: 0 20px 5px 0;
}
.loadVideo span {
  float: left;
}
.swal-super-options .swal2-content {
  margin-top: 25px;
}
.swal-super-options .swal2-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  height: 54px;
  line-height: 54px;
  background: #F37331;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.swal-super-options .swal2-header h2 {
  color: white;
  height: 54px;
  line-height: 54px;
}
.swal-super-options input.form-control {
  border-radius: 15px;
  height: 40px;
}
#sessionContainer .session {
  animation-name: border_color_alert;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@-webkit-keyframes border_color_alert {
  from {
    border-color: firebrick;
    color: firebrick;
  }
  to {
    border-color: red;
    color: red;
  }
}
@-moz-keyframes border_color_alert {
  from {
    border-color: firebrick;
    color: firebrick;
  }
  to {
    border-color: red;
    color: red;
  }
}
@-ms-keyframes border_color_alert {
  from {
    border-color: firebrick;
    color: firebrick;
  }
  to {
    border-color: red;
    color: red;
  }
}
@-o-keyframes border_color_alert {
  from {
    border-color: firebrick;
    color: firebrick;
  }
  to {
    border-color: red;
    color: red;
  }
}
@keyframes border_color_alert {
  from {
    border-color: firebrick;
    color: firebrick;
  }
  to {
    border-color: red;
    color: red;
  }
}
.loadVideo i {
  float: right;
  font-size: 20px;
}
/** versiebeheer **/
#release-version {
  position: absolute;
  right: 20px;
  top: 0;
  height: 50px;
  line-height: 50px;
  color: #fff;
  opacity: 0.4;
  font-size: 10px;
}
/** expire password form **/
.expirePassFormWrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 999999;
}
.expirePassFormWrapper .inner {
  align-content: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.expirePassFormWrapper .error-message {
  background-color: #f1adad;
  border-color: #e35b5b;
  opacity: 1;
  margin: 5px 0;
  padding: 0 10px;
}
.expirePassFormWrapper .error-message.success {
  background-color: #c1e1b9;
  padding: 20px;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);
}
.expirePassFormWrapper form h2 span {
  font-size: 18px;
  font-weight: 700;
}
.expirePassFormWrapper form {
  background: white;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}
/**password strength meter **/
#pass-strength-result.strong {
  background-color: #c1e1b9;
  border-color: #83c373;
  opacity: 1;
}
.rouwdruk_message {
  font-weight: bold;
  margin: 10px;
}
#pass-strength-message {
  width: 380px;
  background: rgba(0, 0, 0, 0.15);
  padding: 10px;
  margin: 50px 0 10px 0;
}
#pass-strength-result {
  background-color: #eee;
  border: 1px solid #ddd;
  color: #23282d;
  margin: -2px 5px 5px 1px;
  padding: 3px 5px;
  text-align: center;
  width: 25em;
  box-sizing: border-box;
  opacity: 0;
}
#pass-strength-result.good {
  background-color: #ffe399;
  border-color: #ffc733;
  opacity: 1;
}
#pass-strength-result.bad {
  background-color: #fbc5a9;
  border-color: #f78b53;
  opacity: 1;
}
#pass-strength-result.short {
  background-color: #f1adad;
  border-color: #e35b5b;
  opacity: 1;
}
.error-message.success {
  text-align: center;
  padding: 20px;
  font-size: 18px;
}
#rouwdruk_password_form fieldset {
  border: none;
  padding: 20px;
  max-width: 420px;
}
#rouwdruk_password_form label {
  width: 222px;
  float: left;
}
.addTextDescription {
  min-height: 28px;
  text-align: right;
  padding-right: 45px;
}
.panel-body {
  padding: 0 15px;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
  padding-bottom: 0;
}
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*************************************************************** Color Helpers ********************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
.d-bg-blue {
  background-color: #F37331;
  color: #fff;
}
#relativesModal .modal-lg, #helpModal .modal-lg, #userModal .modal-lg {
  width: 820px;
}
#relativesContent {
  max-width: 800px;
}
.modal #preferedAddvertFontList {
  font-weight: 400;
  text-align: center;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0 !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-shadow: none !important;
  background: lightgrey;
  line-height: 17px;
}
#preferedAddvertFontListUL li a {
  padding: 3px 10px;
  color: #222;
  width: 100%;
  display: block;
  text-decoration: none;
  border-bottom: solid 1px lightgrey;
}
#preferedAddvertFontListUL .dropdown-header {
  display: block;
  padding: 3px 10px !important;
  border-bottom: solid 1px #6c757d !important;
}
#loginModal .modal-lg {
  width: 600px;
}
#loginModal p.status {
  display: block;
}
.colorpicker.colorpicker-visible {
  display: none !important;
}
.hidden {
  display: none;
}
#showPriceCalculation {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background: #106E81;
  text-align: center;
  border-radius: 24px;
  margin-left: 5px;
}
#showPriceCalculation:hover {
  cursor: pointer;
  background: #007BA8;
}
#showPriceCalculation i {
  color: white !important;
}
#secondary-toolbar {
  box-shadow: rgba(149, 157, 165, 0.1) 0 2px 8px;
  background: white;
}
@media (max-width: 1310px) {
  #primary-toolbar .float-end .btn-rnd {
    margin-left: 5px;
  }
}
@media (max-width: 1440px) {
  body #primary-toolbar .float-end .btn-rnd {
    min-width: 90px;
  }
}
@media (max-width: 1280px) {
  .navbar-nav#toolbar li:first-child:after {
    display: none;
  }
  .navbar-nav#toolbar li:first-child {
    position: absolute;
    left: 0;
  }
}
@media (max-width: 1366px) {
  .modal-content .label {
    width: 28px;
    height: 28px;
    line-height: 25px;
    font-size: 16px;
  }
  body .content-section#editor #contentArea.slideLeft #canvasArea {
    left: 50px;
  }
  body .content-section#editor #contentArea.slideLeft {
    margin-left: 0;
  }
  .colorpickerplus-divider {
    display: none;
  }
}
body #addvertModal .modal-lg {
  width: 1000px !important;
}
@media (max-width: 1280px) {
  body #welcomeModal .modal-lg h3, body #loginModal .modal-lg h3 {
    font-size: 20px;
  }
  .content-section#editor #abovoProductList {
    font-size: 12px;
  }
  .content-section#editor .modal h4 {
    font-size: 16px;
  }
  .content-section#editor .modal .modal-header .btn-close {
    right: 10px;
    font-size: 28px;
    line-height: 28px;
  }
  .content-section#editor .modal-header {
    padding: 5px 15px;
  }
  .content-section#editor .modal-lg .mce-content-body p {
    margin: 0;
  }
  body #welcomeModal .modal-lg, body #loginModal .modal-lg, .content-section#editor .modal-lg {
    width: calc(100% - 50px);
  }
  .content-section#editor .dropzone .dz-image img, .content-section#editor .dropzone .dz-image {
    width: 100%;
  }
  .content-section#editor .template-image {
    min-height: 100px;
  }
  .content-section#editor #productTypeList .template-title, .content-section#editor #TemplateList .template-title {
    padding: 5px;
    font-size: 12px;
  }
  .content-section#editor #CanvasPicker {
    padding: 0 5px;
  }
}
.domEditorActive.drag.selected:not(.ui-draggable-hidden):not(.image) .transform {
  outline: 2px solid #2E2A22 !important;
}
.drag.selected.ui-draggable-hidden:not(.raster-image) {
  opacity: 0.25;
  background: rgba(0, 0, 0, 0.15);
}
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
#addTextDrag:hover {
  cursor: move;
}
/* drop target state */
[data-draggable="target"][aria-dropeffect="move"] {
  border-color: #68b;
  outline: #68b 1px solid;
  background: #fff;
}
/* drop target focus and dragover state */
[data-draggable="target"][aria-dropeffect="move"]:focus, [data-draggable="target"][aria-dropeffect="move"].dragover {
  outline: #68b 2px solid;
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #68b;
}
/* draggable items */
[data-draggable="item"] {
  display: block;
  list-style-type: none;
  margin: 0 0 2px 0;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  line-height: 1.3;
}
/* items focus state */
[data-draggable="item"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b, inset 0 0 0 1px #ddd;
}
/* items grabbed state */
#FamilyMemberListWrapper .family-table-column > li[aria-grabbed="true"], [data-draggable="item"][aria-grabbed="true"] {
  background: #8ad;
  color: #fff;
}
/****
 userModal
 */
#userModal .modal-content {
  max-width: 800px !important;
}
.input-text > input {
  max-width: 24px;
  /* padding: 5px; */
  text-align: center;
  margin-right: 9px;
}
.input-text[data-name="customMarginSize"] input {
  width: 32px !important;
  max-width: 32px !important;
}
.input-text > * {
  float: left;
}
.input-checkbox .check_box {
  width: 24px;
  height: 24px;
  border: solid 2px;
  border-radius: 2px;
  text-align: center;
  margin: 0 10px 0 0;
  float: left;
}
.input-checkbox .check_box:hover {
  cursor: pointer;
}
.input-checkbox:not(.activated) .check_box > span {
  display: none;
}
#userModalContent h3 {
  padding: 0;
  margin: 0 0 20px 0;
  font-weight: 900;
  font-size: 14px;
}
#userModalContent .form-control {
  background: none;
  height: auto;
  width: 100%;
  clear: both;
  float: left;
}
/****
 Namenveld slepen
 */
#compiledNameFieldContainer {
  background-size: 10px 10px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.2) 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 1px, rgba(0, 0, 0, 0.1) 1px);
}
#compiledNameFieldDrawBox {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: dotted 2px firebrick;
}
.moveRelation {
  color: #F37331;
  float: left;
  font-size: 20px;
  margin-left: 10px;
}
.moveRelation:hover {
  color: #FF7933;
}
/****
 OrientationHelper
 */
.orientationHelper {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
}
.orientationHelper > div svg path {
  fill: rgba(80, 147, 255, 0.3);
}
.orientationHelper > div.reverse {
  transform: rotate(180deg);
}
.orientationHelper > div.half-height {
  height: 50%;
}
.orientationHelper > div {
  -webkit-box-flex: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;
  /* OLD - Firefox 19- */
  -webkit-flex: 1;
  /* Chrome */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: center;
}
.orientationHelperGuide svg {
  height: 100%;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}
body:not(.rulersActive) .product-ruler-info, body:not(.rulersActive) .ruler {
  display: none !important;
}
body.dragging .guide {
  padding: 0 !important;
}
#secondary-toolbar .lock_interface i {
  color: #222;
}
#secondary-toolbar .lock_interface {
  height: 36px;
  width: 24px;
  display: inline-block;
  text-align: center;
}
#secondary-toolbar .lock_interface:not(.locked) .fa-lock, #secondary-toolbar .lock_interface.locked .fa-lock-open {
  display: none;
}
#secondary-toolbar .lock_interface:not(.locked):hover .fa-lock-open, #secondary-toolbar .lock_interface.locked:hover .fa-lock {
  display: none !important;
}
#secondary-toolbar .lock_interface:not(.locked):hover .fa-lock, #secondary-toolbar .lock_interface.locked:hover .fa-lock-open {
  display: block !important;
}
.lock_interface .action-unlocked, .lock_interface .action-locked {
  width: auto;
  clear: both;
  border: solid 2px #F37331;
  float: left;
  padding: 2px 40px 2px 20px;
}
.lock_interface.locked .action-unlocked {
  display: none;
}
.lock.action:hover {
  cursor: pointer;
}
.lock.action > * > * {
  float: left;
}
.lock_interface:not(.locked) .action-locked {
  display: none;
}
.lock.action i {
  color: #F37331;
  padding: 5px;
  width: 30px;
  display: block;
  text-align: center;
}
.guide.v .info {
  left: 6px !important;
  top: -5px !important;
}
.guide.h .info {
  left: -65px !important;
  top: -8px !important;
}
.rg-overlay {
  position: absolute;
  right: 0px !important;
  overflow: hidden !important;
  left: 0px !important;
  bottom: 0;
  z-index: 0;
  height: calc(100vh - 37px);
}
.rg-overlay .inner {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  -webkit-transform-origin: center 0;
  transform-origin: center 0;
  z-index: 11;
}
.guide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9991;
  font-size: 0;
  padding: 5px;
}
.guide.v {
  width: 1px;
  height: 1000px;
  border-right: solid 1px #00f;
  cursor: col-resize;
  top: -33px !important;
}
.guide.h {
  left: -250px;
  width: 7000px;
  height: 1px;
  border-bottom: solid 1px #00f;
  cursor: row-resize;
}
.info {
  width: 60px !important;
  height: 25px;
  line-height: 25px;
  text-align: center;
  position: relative;
  font-size: 13px;
  background-color: #eee;
  border: solid 1px #ccc;
  color: #000;
}
.element.image .transform {
  height: inherit;
}
.element.off-canvas #cropImage {
  top: unset;
  bottom: 10px;
}
.element.off-canvas {
  display: block;
}
.element.image .content img {
  max-width: none !important;
}
#rouwkaart-special-image .borderMask {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.swal2-modal.feestdagen .swal2-actions {
  margin-top: -20px !important;
}
.swal2-modal.feestdagen button {
  font-size: 14px;
}
.swal2-modal.feestdagen {
  width: 442px;
}
.planning-feestdagen a {
  text-align: center;
  display: inline-block;
  background: #F37331;
  color: white !important;
  text-decoration: none;
  height: 40px;
  line-height: 40px;
  width: 100%;
  margin: 5px 0;
  border-radius: 2px;
}
.planning-feestdagen a:hover {
  cursor: pointer;
  background: #FF7933;
}
.planning-feestdagen {
  padding: 5px;
}
@media (max-width: 1367px) {
  .rouwkaart-preview-wrapper {
    transform: scale(0.6);
    transform-origin: center;
    -webkit-transform-origin: center;
  }
  #flapkaart-modal .modal-lg {
    width: calc(100% - 100px) !important;
  }
  #flapkaart-canvas #canvas-clone {
    position: absolute;
    left: calc(50% - 660px);
  }
  #flapkaart-canvas {
    transform: scale(0.5);
    transform-origin: center 0;
    -webkit-transform-origin: center 0;
  }
}
#flapkaart-toolbar #gotoFlapkaartUpload {
  left: 0;
}
#flapkaart-toolbar #gotoFlapkaartPreview {
  right: 0;
}
#flapkaart-toolbar #gotoFlapkaartUpload, #flapkaart-toolbar #gotoFlapkaartPreview {
  position: absolute;
  width: 125px;
}
#flapkaart-toolbar {
  position: absolute;
  left: 20px;
  right: 20px;
  text-align: center;
  bottom: 20px;
  z-index: 999999;
}
#flapkaart-modal .modal-body {
  overflow: hidden;
}
#flapkaart-canvas .canvas-clone-wrapper {
  overflow: hidden;
  padding: 3px;
  margin: 0 auto;
  border: solid 1px rgba(0, 0, 0, 0.5);
}
#flapkaart-canvas.front .transparancy-overlay {
  opacity: 1 !important;
}
#flapkaart-canvas .transparancy-overlay {
  position: absolute;
  left: -3px;
  top: -3px;
  z-index: 9001;
  background: white;
  opacity: 0.85;
}
#rouwkaart-special-image .ui-resizable-handle.ui-icon {
  display: block !important;
}
#rouwkaart-special-image img {
  height: 100% !important;
  width: 100% !important;
}
.canvas-info {
  margin: 0 auto;
}
#rouwkaart-special-image .borderMask, .element.image.selected .content .borderMask {
  position: absolute;
  z-index: 1;
}
.element.image.selected .content .borderMask {
  position: absolute;
}
.element.image.selected.clipperActive {
  outline: dashed 2px black !important;
}
.element.image:hover:not(.clipperActive) .content .borderMask, .element.image.selected:not(.clipperActive) .content .borderMask {
  z-index: 1;
}
.element.image.selected.clipperActive .borderMask {
  display: none !important;
}
.element.template-background .content .clipperMask, .element.template-background .content, .element.image .content .clipperMask, .element.image .content {
  overflow: hidden;
}
.element.template-background .content > img, .element.image .content > img {
  display: block !important;
}
.element.template-background .content img, .element.template-background .content .clipperMask, .element.template-background .content, .element.image .content img, .element.image .content .clipperMask, .element.image .content {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}
.element.image .cropper-bg {
  background: transparent;
  background-image: none !important;
}
.element.image .cropper-container img {
  opacity: 0.25;
}
.element.image:not(.active) .ui-clipper-handle {
  display: none;
}
.ui-clipper-handle i {
  font-style: normal;
  font-weight: 400;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 24px;
  position: absolute;
  top: 0;
  left: 0;
}
.ui-clipper-handle {
  position: absolute;
  height: 40px;
  width: 40px;
  cursor: pointer;
  border-radius: 50%;
  background-color: #F37331;
  left: -30px;
  top: -30px;
  z-index: 6000 !important;
}
/* product-ruler-info */
.product-ruler-info.v, .product-ruler-info.h {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.product-ruler-info .size {
  background: #fff;
  border-radius: -20px;
  width: 120px;
  text-align: center;
  z-index: 100000;
  border: dotted 1px #ccc !important;
  border-radius: 99px;
  height: 32px;
  line-height: 28px;
}
.product-ruler-info.v {
  left: -35px;
  top: calc(50% - 60px);
}
.product-ruler-info.h {
  top: 7px;
  left: calc(50% - 60px);
}
.product-ruler-info.v .size {
  transform: rotate(270deg);
}
.guide.v .info {
  left: 2px;
}
.guide.h .info {
  top: 2px;
}
.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ruler {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9990;
}
.ruler .label {
  font: 12px Arial;
  color: #000;
}
.ruler, .ruler span {
  font-size: 0;
}
.ruler.h, .ruler.v {
  overflow: hidden;
  background: white;
  display: block;
  outline: dotted 1px #ccc !important;
}
.ruler.h {
  left: calc(1mm - 2px);
  right: calc(3mm - 2px);
  padding-top: 0;
  border-top: solid 1px #444;
  z-index: 9991;
  position: absolute;
  top: 0;
  height: 24px;
}
.ruler.v {
  padding-left: 0 !important;
  width: 24px;
  border-left: solid 1px #444;
  padding-right: 23px !important;
  right: auto !important;
  flex-direction: column;
  left: 0;
  top: calc(3mm + 2px);
  position: absolute;
  bottom: calc(3mm + 2px);
}
.ruler.v > *, .ruler.h > * {
  position: relative;
}
.ruler.h span {
  height: 9px;
  width: 1mm !important;
  vertical-align: bottom;
  display: inline-block;
  position: relative;
  flex: 1;
}
.ruler.v, .ruler.h {
  display: flex;
}
.ruler.v span, .ruler.h span {
  flex: 1;
}
.ruler.v span {
  display: block;
  margin-left: auto;
  margin-right: 0;
  width: 13px;
  height: 1mm;
  position: relative;
}
.ruler.h span:not(:nth-child(5n)):not(:nth-child(10n)):after {
  background: rgba(0, 0, 0, 0.45);
  content: "";
  width: 1px !important;
  height: 9px;
  position: absolute;
  top: 0;
  right: 0;
}
.ruler.v span:not(:nth-child(5n)):not(:nth-child(10n)):after {
  background: rgba(0, 0, 0, 0.45);
  content: "";
  width: 9px;
  height: 1px;
  position: absolute;
  bottom: 0;
}
.ruler.h span:nth-child(5n):after {
  background: black;
  content: "";
  width: 1px !important;
  height: 13px;
  position: absolute;
  top: 0;
  right: 0;
}
.ruler.h span:nth-child(10n):after {
  background: black;
  content: "";
  width: 1px !important;
  height: 18px;
  position: absolute;
  top: 0;
  right: 0;
}
.ruler.v span:nth-child(5n):after {
  content: "";
  /* border-bottom: 1px solid; */
  width: 13px;
  height: 1px;
  background: #000;
  position: absolute;
  bottom: 0px;
}
.ruler.v span:nth-child(10n):after {
  width: 18px !important;
  height: 1px;
  background: black;
  position: absolute;
}
.ruler.v span.major {
  border-top: solid 1px #000;
  width: 13px;
}
.ruler.v span.milestone {
  position: relative;
  border-top: solid 1px #000;
  width: 17px;
}
.ruler.v span.label {
  border: 0;
  font-size: 9px;
  position: absolute;
  text-align: right;
  width: 9px;
  left: 12px;
}
.ruler.h span.major {
  height: 13px;
}
.ruler.h span.milestone {
  position: relative;
  height: 17px;
}
.ruler.v span.label, .ruler.h span.label {
  display: none;
}
.ruler.h span.label {
  border: 0;
  font-size: 9px;
  position: absolute;
  text-align: center;
  top: -14px;
  width: 9px;
}
.ruler.h .l10 {
  left: -5px;
}
.ruler.h .l100 {
  left: -7px;
}
.ruler.h .l1000 {
  left: -10px;
}
.ruler.v .l10, .ruler.v .l100, .ruler.v .l1000 {
  top: -7px;
}
.ruler.v .l10 {
  left: -12px;
}
.ruler.v .l100 {
  left: -17px;
}
.ruler.v .l1000 {
  left: -23px;
}
.menu-btn {
  position: fixed;
  left: 3px;
  top: 2px;
  line-height: 9px;
  z-index: 9998;
  width: 20px;
  height: 20px;
  background-color: red;
  opacity: 0.5;
  font-size: 20px;
  text-align: left;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  border-radius: 2px;
}
.rg-menu {
  position: fixed;
  top: 22px;
  left: 3px;
  padding: 0;
  margin: 0;
  list-style: 0;
  display: none;
  font: 13px Arial;
  z-index: 9999;
  box-shadow: 2px 2px 10px #ccc;
}
.rg-menu li {
  text-align: left;
  border-bottom: solid 1px #999;
  padding: 0;
}
.rg-menu a {
  background-color: #777;
  display: block;
  padding: 5px;
  text-decoration: none;
  color: #fff;
  line-height: 18px;
}
.rg-menu a:hover, .rg-menu a.selected {
  color: #fff;
  background-color: #3b94ec;
}
.rg-menu a.disabled {
  color: #ccc;
}
.rg-menu .desc {
  display: inline-block;
  width: 170px;
}
.dialog {
  position: fixed;
  background-color: #777;
  z-index: 9999;
  color: #fff;
  font-size: 13px;
  display: none;
  box-shadow: 2px 2px 10px #ccc;
}
.dialog button {
  border: none;
  color: #333;
  cursor: pointer;
  background-color: #eaeaea;
  background-image: linear-gradient(#fafafa, #eaeaea);
  background-repeat: repeat-x;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.dialog input, .dialog select, .dialog button {
  font-size: 13px;
  margin: 3px;
  padding: 3px;
}
.dialog .title-bar {
  padding: 5px;
  background-color: #aaa;
  font-weight: bold;
}
.dialog .wrapper {
  padding: 10px;
}
#DatesBlankContainer .wrapper p {
  margin: 0 !important;
}
.open-dialog select, .open-dialog button {
  float: left;
  display: block;
}
.open-dialog .ok-btn, .open-dialog .cancel-btn {
  margin: 10px 3px;
}
.open-dialog .ok-btn {
  clear: both;
}
.snap-dialog label {
  font-weight: bold;
  padding: 3px;
}
.snap-dialog .ok-btn {
  margin-left: 18px;
}
.snap-dialog .ok-btn, .snap-dialog .cancel-btn {
  margin-top: 10px;
}
.snap-dialog .rg-y-label {
  margin-left: 10px;
}
#rg-x-snap, #rg-y-snap {
  width: 50px;
}
.info-block-wrapper {
  position: absolute;
  z-index: 9989;
}
.info-block {
  position: absolute;
  text-align: left;
}
.info-block.even {
  background: none;
  background-color: rgba(0, 0, 255, 0.2);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000FF,endColorstr=#330000FF);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000FF,endColorstr=#330000FF);
  zoom: 1;
}
.info-block.odd {
  background: none;
  background-color: rgba(255, 0, 0, 0.2);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF0000,endColorstr=#33FF0000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF0000,endColorstr=#33FF0000);
  zoom: 1;
}
body.enable-brackets .element .content td > *:not(em):not(.fonticon):nth-child(odd), body.enable-brackets .element .content p > *:not(em):not(.fonticon):nth-child(odd) {
  background: rgba(235, 0, 0, 0.2);
}
body.enable-brackets .element .content td > *:not(em):not(.fonticon):nth-child(odd) *:not(em):not(.fonticon), body.enable-brackets .element .content p > *:not(em):not(.fonticon):nth-child(odd) *:not(em):not(.fonticon) {
  background: rgba(235, 0, 0, 0.2);
}
body.enable-brackets .element .content td > *:not(em):not(.fonticon):nth-child(even) *:not(em):not(.fonticon), body.enable-brackets .element .content p > *:not(em):not(.fonticon):nth-child(even) *:not(em):not(.fonticon) {
  background: rgba(9, 102, 255, 0.2);
}
body.enable-brackets .element .content td > *:not(em):not(.fonticon):nth-child(even), body.enable-brackets .element .content p > *:not(em):not(.fonticon):nth-child(even) {
  background: rgba(9, 102, 255, 0.2);
}
.info-block-txt {
  padding: 5px;
  display: inline-block;
  vertical-align: top;
  background-color: #777;
  color: #fff;
  font-size: 13px;
  *display: inline;
  zoom: 1;
}
.action.form-control#client {
  margin: 7px;
  padding-right: 5px;
  width: calc(100% - 15px);
}
#voorregelingNotifier:not(.hidden) {
  position: absolute;
  line-height: 32px;
  border: solid 3px white;
  color: #fff;
  padding: 0 20px;
  margin: 6px -10px;
}
#fontListUL {
  max-height: 40vh;
  overflow-y: scroll;
  overflow-x: hidden;
}
.progress, progress[value] {
  width: 100%;
  border: none;
  margin: 5px 0;
  height: 5px;
  display: block;
  appearance: none;
  -webkit-appearance: none;
}
.progress::-webkit-progress-bar, progress[value]::-webkit-progress-bar {
  background-color: #59d2ea;
}
.progress::-webkit-progress-value, progress[value]::-webkit-progress-value {
  background-color: #106E81;
}
.progress-materializecss {
  margin: 5px 0;
  position: relative;
  height: 4px;
  display: block;
  width: 100%;
  background-color: #59d2ea;
  border-radius: 2px;
  margin: 0.5rem 0 1rem 0;
  overflow: hidden;
}
.progress-materializecss .indeterminate {
  background-color: #106E81;
}
.progress-materializecss .indeterminate:before {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress-materializecss .indeterminate:after {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  animation-delay: 1.15s;
}
@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}
/*************************************************************/
/***********************   Locked   **************************/
/*************************************************************/
body.locked #productArea .product .edit-block, body.locked #templateArea .template .edit-block, body.locked #canvasControls #toggleMarginToolbar, body.locked #marginToolbar .btn, body.locked #menu-wrapper, body.locked .productToolbar .panel > a, body.locked #ElementAlignHeading, body.locked .panel-default > .panel-heading h4 a {
  background: #555555 !important;
  opacity: 0.5;
}
body.locked #canvasControls #toggleMarginToolbar:hover, body.locked #marginToolbar .btn:hover, body.locked #menu-wrapper:hover, body.locked .productToolbar .panel > a:hover, body.locked #ElementAlignHeading, body.locked .panel-default > .panel-heading h4 a:hover, body.locked .general-tool-panel:hover {
  cursor: auto !important;
}
body.locked .general-tool-panel * {
  color: #555555 !important;
}
body .back-page .sub-section.dynamic.front {
  display: none;
}
body .front-page .sub-section.dynamic.back {
  display: none;
}
.page-title {
  height: 24px;
  line-height: 24px;
  position: absolute;
  display: none;
}
.front-page .page-title.front-page {
  display: block !important;
}
.back-page .page-title.back-page {
  display: block !important;
}
.page-title.left {
  left: 0;
}
.page-title.right {
  right: 0;
}
.card-inside {
  text-align: center;
}
body .back-page.product-enkele-kaart-a5 .page-title.front-page, body .back-page.product-enkele-kaart-staand .page-title.front-page, body .back-page.product-enkele-kaart-liggend .page-title.front-page, body .back-page.product-dankbetuiging-enkelals-prent .page-title.back-page, body .back-page.product-dankbetuigingskaart-enkel .page-title.back-page, body .back-page.product-dankbetuiging-als-prent .page-title.back-page, body .back-page.product-dankbetuigingskaart-als-prent .page-title.back-page, body .back-page.product-gedachtenisprentjes-groot .page-title.back-page, body .back-page.product-gedachtenisprentjes-klein .page-title.back-page, body .back-page.product-dankbetuigingskaart-groot-staand .page-title.back-page, body .back-page.product-dankbetuigingen-groot .page-title.back-page, body .back-page.product-inlegkaart .page-title.front-page, body .back-page.product-enkele-kaart-vierkant .page-title.back-page, body .back-page.product-oblong-a5 .page-title.back-page, body .back-page.product-oblong-standaard .page-title.back-page, body .back-page.product-rouwkaarten-a5 .page-title.back-page, body .back-page.product-rouwkaarten-staand .page-title.back-page, body .back-page.product-rouwkaart-fotocollage .page-title.back-page, body .back-page.product-rouwkaarten-vierkant .page-title.back-page {
  display: none;
}
body .front-page.product-enkele-kaart-a5 .page-title.back-page, body .front-page.product-enkele-kaart-staand .page-title.back-page, body .front-page.product-enkele-kaart-liggend .page-title.back-page, body .front-page.product-dankbetuiging-enkelals-prent .page-title.front-page, body .front-page.product-dankbetuigingskaart-enkel .page-title.front-page, body .front-page.product-dankbetuiging-als-prent .page-title.front-page, body .front-page.product-dankbetuigingskaart-als-prent .page-title.front-page, body .front-page.product-gedachtenisprentjes-groot .page-title.front-page, body .front-page.product-gedachtenisprentjes-klein .page-title.front-page, body .front-page.product-dankbetuigingskaart-groot-staand .page-title.front-page, body .front-page.product-dankbetuigingen-groot .page-title.front-page, body .front-page.product-inlegkaart .page-title.back-page, body .front-page.product-enkele-kaart-vierkant .page-title.front-page, body .front-page.product-oblong-a5 .page-title.card-inside, body .front-page.product-oblong-standaard .page-title.card-inside, body .front-page.product-rouwkaarten-a5 .page-title.card-inside, body .front-page.product-rouwkaarten-staand .page-title.card-inside, body .front-page.product-rouwkaart-fotocollage .page-title.card-inside, body .front-page.product-rouwkaarten-vierkant .page-title.card-inside {
  display: none;
}
body .front-page.product-rouwbrief-standaard .page-title.back-page {
  display: none;
}
body .back-page.product-rouwbrief-standaard .page-title.front-page {
  display: none;
}
body .front-page.product-rouwkaarten-liggend #canvas-tools-bottom .page-title:nth-child(2), body .back-page.product-rouwkaarten-liggend #canvas-tools-top {
  display: none !important;
}
body .back-page.product-rouwkaarten-liggend .page-title.back-page {
  display: none;
}
body.locked #navigation-index a:hover {
  cursor: auto !important;
}
/*** Image Effect Helper ***/
.image-effect-helper.disabled > .image-effect-input-wrap, .image-effect-helper.disabled > p {
  display: none !important;
}
.image-effect-helper.active {
  min-height: 200px;
  border: solid 1px #106E81;
  padding: 5px;
  border-radius: 4px;
}
.image-effect-helper {
  position: relative;
  width: 100%;
  margin-top: 10px;
}
.size-wrapper > *, .image-effect-helper .size-wrapper > * {
  float: left;
}
.size-wrapper input {
  height: 32px;
}
.size-wrapper input, .image-effect-helper .size-wrapper input {
  max-width: 100px;
}
.image-effect-helper lable {
  font-weight: 900;
  padding: 10px 0;
  display: block;
}
.image-effect-helper .input-wrap {
  width: 100%;
  float: left;
}
.element.image .content .loaderWrapper img {
  position: relative;
}
.image-effect-helper.active .image-effect-input-wrap {
  display: block;
}
.image-effect-helper:not(.active) .remove-image-effect, .image-effect-helper .image-effect-input-wrap {
  display: none;
}
.image-effect-helper button:hover {
  cursor: pointer;
}
.frame-editor-toolbar-container .size-wrapper {
  width: 175px;
}
.border-type-wrap {
  display: block;
  margin-left: 10px;
}
.updateFrameSize {
  height: 32px;
  width: 32px;
  padding: 0;
  text-align: center;
  line-height: 32px;
}
.border-type-wrap .border-type.solid span {
  border-style: solid;
}
.border-type-wrap .border-type.dashed span, .border-type-wrap .border-type.dotted span {
  border: none;
  top: -5px;
  left: 4px;
}
.border-type-wrap .border-type span svg path {
  stroke: black;
  stroke-width: 20;
}
.border-type-wrap .border-type span svg {
  top: 0;
}
.border-type-wrap .border-type span {
  position: absolute;
  width: 24px;
  border: 3px #000;
  transform: rotate(135deg);
  top: 11px;
  left: 1px;
}
.border-type-wrap .border-type:hover {
  cursor: pointer;
}
.border-type-wrap .border-type:hover, .border-type-wrap .border-type.active {
  border: solid 3px black;
}
.border-type-wrap .border-type {
  width: 32px;
  height: 32px;
  position: relative;
  float: left;
  margin-right: 10px;
  background: #eee;
  border-radius: 4px;
  border: solid 3px #eee;
}
/*** interface-container ***/
#interface-container {
  height: calc(100%);
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}
#interface-container .interface-body {
  display: flex;
  height: calc(100vh - (60px + 80px));
  overflow: hidden;
  position: relative;
  flex-direction: row-reverse;
}
#interface-container .interface-body, #interface-container .interface-footer {
  width: 100%;
}
#interface-container .interface-header h4 {
  text-align: center;
  font-size: 1.2rem;
}
#interface-container .interface-header .float-start small {
  clear: both;
  text-align: center;
  font-size: 10px;
  width: 100%;
  display: block;
  margin-top: -1px;
}
#interface-container .interface-header .float-end {
  height: 40px;
  padding: 4px 50px 0px 0px;
}
#interface-container .interface-header .float-start {
  padding: 3px 10px 0 10px;
  height: 40px;
}
#interface-container .interface-header .float-start:not(:first-child) {
  border-left: solid 1px #6B6555;
}
#interface-container .interface-header ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#interface-container .interface-header .float-start ul li a i {
  width: 20px;
  height: 20px;
}
#interface-container .interface-header .float-start ul li a {
  text-decoration: none !important;
  height: 24px;
  width: 32px;
}
#interface-container .interface-header .float-start ul {
  height: 24px;
}
#interface-container .interface-header li {
  display: flex;
  justify-content: center;
  align-items: center;
}
#interface-container .interface-header ul, #interface-container .interface-header li {
  list-style: none;
}
#interface-container .interface-header li.clipboard-item svg {
  height: 100%;
  max-width: 16px;
}
#interface-container .interface-header li.clipboard-item span {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 !important;
}
#interface-container .interface-header li.clipboard-item.disabled {
  opacity: 0.5;
}
#interface-container .interface-header li.clipboard-item, #interface-container .interface-header li.clipboard-item i:not(.fa), #interface-container .interface-header li.clipboard-item span {
  background: none;
  height: 24px;
  line-height: 24px;
  width: 32px;
  display: block;
  text-align: center;
  padding: 0;
  color: black;
}
.tooltip *, .tooltip {
  color: #fff !important;
}
#interface-container .interface-header li.clipboard-item:not(.disabled):hover {
  cursor: pointer;
}
#interface-container .interface-header li.clipboard-item.disable-hover:hover #first-path {
  fill: #106E81 !important;
}
#interface-container .interface-header li.clipboard-item:not(.disabled):not(.disable-hover):hover *:not(.tooltip) {
  fill: #106E81 !important;
  color: #106E81 !important;
}
#interface-container .interface-header li {
  float: left;
}
#interface-container .interface-header {
  background: white;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 8px;
  margin-bottom: 1px;
}
#interface-container .interface-header > * {
  height: 42px;
  position: relative;
}
#interface-container .interface-header {
  padding: 7px 0;
}
.interface-footer > .float-start {
  left: 80px;
}
.interface-footer > .float-end {
  right: 20px;
}
#interface-container .interface-footer {
  z-index: 9000;
}
#interface-container .interface-header {
  padding: 0;
}
.ps__rail-x {
  bottom: 0 !important;
  position: fixed !important;
  left: 310px !important;
}
.zoom-window > .material-icons:hover {
  cursor: pointer;
}
.zoom-window > .material-icons {
  font-size: 24px;
  line-height: 36px;
}
.zoom-window > * {
  display: block;
  height: 36px;
  line-height: 36px;
  float: left;
  padding: 0 5px;
  font-size: 14px;
}
.zoom-window > i:hover, .toggle-fullscreen:hover {
  cursor: pointer;
  opacity: 0.75;
}
.toggle-fullscreen i {
  padding: 9px 0;
}
.toggle-fullscreen i svg {
  height: 18px;
  width: 24px;
  padding-right: 8px;
}
.toggle-fullscreen * {
  font-size: 14px;
  display: block !important;
  height: 36px;
  line-height: 36px;
  float: left;
}
.loading-component {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.75);
}
.loading-component > div {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
}
#layer-container {
  padding: 0;
  height: calc(100vh - 100px);
  overflow: hidden;
}
.layer-placeholder-image {
  background-image: linear-gradient(315deg, #ffffff 0%, #9EA5AD 74%);
  border: solid 1px #9EA5AD;
  height: 20px;
  width: 30px;
  display: block;
  margin: 8px 0;
}
.layer-content {
  width: calc(100% - 72px);
  overflow: hidden;
  font-size: 10px !important;
}
.item-layer:hover {
  cursor: pointer;
}
.item-layer > * {
  padding-left: 5px;
}
.item-layer figure {
  height: 24px;
  margin: 0 !important;
}
.item-layer figure img {
  max-width: 100%;
  height: 100%;
}
.item-layer {
  background: white;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 8px;
  margin: 5px;
  height: 72px;
  line-height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item-layer:hover {
  box-shadow: 0 4px 3px 1px #ccc;
}
.layer-actions i:hover {
  cursor: pointer;
  color: #106E81;
}
.layer-type, .layer-actions {
  width: 36px;
}
.left-sidebar-wrapper {
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
}
#left-sidebar, #left-content-sidebar {
  margin-top: 0;
}
#left-sidebar {
  height: 100%;
  background-color: #588589;
}
#left-sidebar li span {
  text-align: center;
}
#left-sidebar span {
  margin: 5px;
}
#left-sidebar span.material-icons, #left-sidebar svg {
  fill: white;
  font-size: 24px;
  color: white;
}
body.editor-disabled .actions-left-sidebar .toggle-action:not(.toggle-action-products) {
  display: none;
}
.actions-left-sidebar .toggle-action svg {
  fill: white;
  height: 28px;
}
.actions-left-sidebar .toggle-action span {
  font-size: 11px;
  margin-top: 5px;
  color: white;
}
.actions-left-sidebar .toggle-action i {
  line-height: 24px;
  font-size: 24px;
  color: white;
}
.ck-powered-by {
  display: none;
}
#left-content-sidebar {
  overflow: hidden;
  border: solid 1px rgba(0, 0, 0, 0.1);
  box-shadow: rgba(149, 157, 165, 0.1) 0 2px 8px;
  z-index: 100;
  margin-left: 5px !important;
  padding: 10px 10px 10px 5px;
  position: relative;
}
#left-content-sidebar #image-container .dz-texture .templateTitleWrap {
  float: left;
  width: 100%;
  background-color: #F37331;
  padding: 0;
  color: #fff;
  height: 32px;
  line-height: 32px;
  position: absolute;
  z-index: 9;
  display: none !important;
}
#left-content-sidebar #image-container .dz-texture.active {
  border: solid 1px #106E81;
}
#left-content-sidebar #image-container .dz-texture {
  max-height: 75px;
  margin-bottom: 10px;
}
#left-content-sidebar #image-container {
  line-height: 0;
  -webkit-column-gap: 10px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -moz-column-gap: 10px;
  column-gap: 10px;
  padding: 0 5px 10px 15px;
  margin-top: 0;
}
.toggle-flapkaart:hover {
  cursor: pointer;
}
#image-container.flapkaart-images img {
  width: 100%;
  height: auto;
}
#image-container.flapkaart-images .flapkaart-image-preview:hover .flapkaart-image {
  background: rgba(16, 110, 129, 0.75);
}
#image-container.flapkaart-images .flapkaart-image-preview:hover {
  cursor: pointer;
  border-color: #106E81;
}
#image-container.flapkaart-images .flapkaart-image-previewa.flapkaart-image {
  background: rgba(16, 110, 129, 0.5);
  color: black;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 42px;
  line-height: 42px;
  padding: 0 10px;
  text-decoration: none;
}
#image-container.flapkaart-images .flapkaart-image-preview > .image-actions {
  display: none;
}
#image-container.flapkaart-images .flapkaart-image-preview {
  border: solid 1px #F37331;
  width: 100%;
  overflow: hidden;
  height: auto !important;
  margin-bottom: 10px;
  position: relative;
}
#image-container.flapkaart-images {
  line-height: 0;
  -webkit-column-gap: 10px;
  -webkit-column-count: 5;
  -moz-column-count: 5;
  column-count: 5;
  -moz-column-gap: 10px;
  column-gap: 10px;
  margin-top: 15px;
  max-height: calc(100vh - 360px);
}
.flapkaart-image-title {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 42px;
  line-height: 42px;
  text-align: center;
  color: #fff;
  text-decoration: none !important;
  background: rgba(243, 115, 49, 0.5);
}
#left-content-sidebar #dz-upload {
  width: calc(100% - 20px);
  border-radius: 999px;
  border: none !important;
  height: 32px;
  line-height: 32px;
  margin: 10px 0 0 0;
  background: #106E81;
  color: #fff;
}
#left-content-sidebar #dz-upload:hover {
  cursor: pointer;
  background: #F37331 !important;
}
#left-content-sidebar #image-container.fotos {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
#left-content-sidebar #image-container.fotos .dz-preview a {
  margin-top: 6px;
  font-size: 10px;
  height: 24px;
  line-height: 24px;
  padding: 0;
}
#left-content-sidebar .sidebar-header-new {
  font-size: 15px;
}
#left-content-sidebar .sidebar-header-new button {
  text-decoration: none;
}
#left-content-sidebar #image-container .dz-preview a.dz-place {
  display: none;
}
#left-content-sidebar #image-container .dz-preview {
  background: white;
  position: relative;
  margin-bottom: 10px !important;
  border: solid 1px black;
  break-inside: avoid;
}
#left-content-sidebar .scroll-container {
  height: calc(100vh - 250px);
  overflow-x: hidden;
  overflow-y: scroll;
  margin-top: 15px;
}
#left-content-sidebar #image-container .dz-preview:hover {
  border: solid 1px #106E81;
  cursor: pointer;
}
#left-content-sidebar #image-container .dz-preview img {
  width: 100%;
  height: auto;
}
.actions-left-sidebar .toggle-action:hover {
  background: #f1f1f1;
  color: #F37331;
  cursor: pointer;
}
.actions-left-sidebar .toggle-action:hover, .actions-left-sidebar .toggle-action.active {
  background: #f1f1f1;
  color: #F37331;
}
.actions-left-sidebar .toggle-action {
  height: 72px;
  width: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden !important;
}
.actions-left-sidebar .toggle-action.active *, .actions-left-sidebar .toggle-action:hover * {
  fill: #F37331 !important;
  color: #F37331 !important;
}
.font-options {
  display: block;
}
.actions-left-sidebar {
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 12px;
  border: solid 1px rgba(0, 0, 0, 0.1);
  padding-bottom: 15px;
  box-shadow: rgba(149, 157, 165, 0.1) 0 2px 8px;
  margin: 0 2px;
  height: 100%;
}
/*** Image Library Toolbar ***/
.image-library-toolbar {
  clear: both;
  position: relative;
  width: 100%;
  padding: 5px 0 0 10px;
}
.image-library-toolbar ul li span:hover {
  cursor: pointer;
}
.image-library-toolbar ul li span i {
  color: #fff;
}
.image-library-toolbar ul li span svg {
  fill: white;
  margin-top: 5px;
}
.image-library-toolbar ul #selectAll svg {
  margin-top: 7px;
  margin-left: 5px;
}
.image-library-toolbar ul li span:hover {
  background: #F37331;
}
.image-library-toolbar ul li span {
  height: 36px;
  width: 36px;
  display: block;
  text-align: center;
  line-height: 36px;
  background: #106E81;
  border-radius: 4px;
}
.image-library-toolbar ul li.toggle-edit-mode span, .image-library-toolbar ul li.toggle-edit-mode {
  width: 124px;
  color: #fff !important;
}
.image-library-toolbar ul li {
  width: 36px;
  float: left;
  display: block;
  margin-right: 8px;
}
.image-library-toolbar ul .break {
  width: 100%;
}
.image-library-toolbar ul {
  width: 100%;
  padding: 0;
  margin: 10px 10px 0 0px;
  display: flex;
  flex-wrap: wrap;
}
.image-library-toolbar ul li:nth-child(4) svg {
  max-height: 40px;
  margin-top: 0;
}
.image-library-toolbar svg {
  max-height: 25px;
  max-width: 32px;
}
/*** clipboard item ***/
body {
  height: inherit !important;
}
.line-break-card {
  border-top: solid 1px #ccc !important;
  margin-top: 5px !important;
}
.clipboard-item #toPage {
  margin-top: -10px;
}
.image-library-toolbar ul li.clipboard-item span {
  background: #F37331;
}
.image-library-toolbar ul li.clipboard-item:hover span {
  background: #FF7933;
}
.clipboard-item i {
  position: relative !important;
}
.toggleSort:hover {
  cursor: pointer;
}
#editor:not(.expert-mode-enabled) #ImageBody .image-effect-helper {
  display: none !important;
}
.swal2-container {
  z-index: 999999 !important;
}
.swal2-select.form-select {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  margin-top: 10px;
}
.swal2-select {
  padding: 0.275em 0.425em !important;
  font-size: 1em !important;
}
.swal2-popup.swal-video {
  width: auto !important;
}
.swal2-popup:not(.swal-video) {
  width: 320px !important;
}
.swal2-title {
  font-size: 1.25em !important;
}
.swal2-checkbox, .swal2-file, .swal2-input, .swal2-radio, .swal2-select, .swal2-textarea {
  margin: 0.5em auto;
  font-size: 1em !important;
}
.swal2-actions {
  margin-top: 5px !important;
  text-align: center;
}
.swal2-actions button:hover {
  background: white;
}
.swal2-actions button {
  padding: 0 10px !important;
  font-size: 14px !important;
  height: 32px;
  line-height: 32px;
  width: 120px;
}
#userModal #edit-mode {
  margin-top: 5px;
  margin-left: 12px;
}
#userModal #edit-mode .edit-mode:not(.active) {
  display: none;
}
#userModal #edit-mode:hover .edit-mode:not(.active) {
  display: block;
}
#userModal #edit-mode:hover .edit-mode.active {
  display: none;
}
#userModal #edit-mode:hover {
  background: #007BA8;
}
.toggle-edit-mode .lable {
  margin-left: 5px;
}
#userModal #edit-mode {
  width: 100px;
  display: inline-block;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  background: #106E81;
  color: #fff;
}
.gm-style > div:first-child > div:first-child > div:nth-child(2) {
  opacity: 0.6 !important;
}
.disable-interactions {
  pointer-events: none !important;
}
.rotation-helper {
  top: 0;
  position: absolute;
  width: inherit;
  height: inherit;
  transform-origin: center;
}
.product-advertentie .element.image:not(.svg):hover {
  z-index: 2600 !important;
}
#editor:not(.expert-mode-enabled):not(.is-admin) #rotateTextRight, #editor:not(.expert-mode-enabled):not(.is-admin) #rotateTextLeft {
  display: none;
}
#respondentWarning .warning-wrapper, #laraUpdateWarning .warning-wrapper {
  display: flex;
  justify-content: center;
}
#laraUpdateWarning .warning-wrapper div {
  float: left;
  padding: 0 10px;
}
#respondentWarning small, #laraUpdateWarning small {
  margin-bottom: 5px;
  display: block;
  font-size: 0.6em;
}
#laraUpdateWarning p button {
  margin-right: 10px;
}
#respondentWarning p, #laraUpdateWarning p {
  margin: 0 0 0 0 !important;
}
.lara-update-options {
  max-height: 50vh;
  float: left;
  width: 100%;
  overflow-y: scroll;
}
#inviteRespondentToDossier {
  background: white;
  border-radius: 24px;
  border: none;
  margin: 5px 0;
  font-size: 10px;
  padding: 5px 10px;
}
#respondentWarning, #laraUpdateWarning {
  position: fixed;
  background: #2E2A22;
  color: #fff;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 0;
  z-index: 999;
}
.topmodal-active #laraUpdateWarning, .topmodal-active #respondentWarning {
  position: absolute;
  top: -1px;
  bottom: initial;
  left: -1px;
  right: -1px;
  border-radius: 4px;
}
#optionArea {
  margin-top: 10px;
}
/** lara update **/
.lara-update-field blockquote {
  border: solid black 3px;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 5px;
  min-height: 70px;
}
.lara-update-options h3 {
  font-size: 12px;
  margin: 5px 0;
}
.lara-update-field:hover blockquote, .lara-update-field.selected blockquote {
  border: solid #0cdb71 3px;
  background-color: rgba(12, 219, 113, 0.1);
}
.lara-update-field {
  position: relative;
}
.lara-update-notification {
  border: solid #0cdb71 3px;
  font-weight: 900;
  font-size: 18px;
  text-align: center;
  background-color: rgba(12, 219, 113, 0.05);
}
.lara-update-field:hover {
  cursor: pointer;
}
.lara-update-options .row {
  margin: 10px 0;
  background: #f1f1f1;
}
.lara-update-field .lara-update-field-tooltip:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-top: 70px solid #0cdb71;
  clear: both;
  right: 0;
  top: 0;
}
.lara-update-field .lara-update-field-tooltip span {
  position: absolute;
  right: 5px;
  z-index: 99;
  color: #fff;
  font-size: 12px;
  transform: rotate(45deg);
  top: 5px;
  text-align: center;
}
.lara-update-field .lara-update-field-tooltip {
  position: absolute;
  right: 0;
  top: 0;
}
.lara-update-field:not(.selected) .lara-update-field-tooltip {
  display: none;
}
.dz-remove {
  display: none !important;
  top: 3px !important;
}
.upload-limit-reached {
  text-align: center;
  background-color: #ffe399;
  border: solid 2px #ffc733;
  opacity: 1;
  margin: 0;
}
#slideshowModal img {
  width: 100%;
}
.btn-akkoord {
  width: 124px !important;
  background-color: #f1f1f1;
}
.btn-akkoord:not(.active) {
  border: solid 1px #2E2A22;
}
.btn-akkoord i {
  color: #2E2A22;
}
.btn-akkoord :not(span) {
  margin: 0;
}
.btn-akkoord span {
  margin: 0 5px;
}
.btn-akkoord:not(:hover) *, .btn-akkoord:not(.active) * {
  font-size: 20px;
}
.btn-akkoord .akkoord-seperator {
  color: #2E2A22;
}
.btn-akkoord .repeel-akkoord, .btn-akkoord .give-akkoord, .btn-akkoord .has-akkoord {
  font-size: 16px;
  color: #2E2A22;
}
.btn-akkoord:hover *, .btn-akkoord.active * {
  color: #fff !important;
}
.btn-akkoord:not(.active):not(:hover) .has-akkoord, .btn-akkoord:hover .fa-thumbs-down, .btn-akkoord:hover .has-akkoord, .btn-akkoord:hover .akkoord-seperator, .btn-akkoord:not(.active) .repeel-akkoord, .btn-akkoord.active:not(:hover) .repeel-akkoord, .btn-akkoord.active .fa-thumbs-down, .btn-akkoord.active .akkoord-seperator, .btn-akkoord.active .give-akkoord {
  display: none;
}
.btn-akkoord:hover, .btn-akkoord.active {
  background-color: #00A86B;
  border: none;
}
.domEditorActive {
  z-index: 4000 !important;
}
.texture-list {
  -webkit-column-count: 5;
  -webkit-column-gap: 10px;
  -moz-column-count: 5;
  -moz-column-gap: 10px;
  column-count: 5;
  column-gap: 10px;
}
.ck-editor__editable:hover, .texture-list .dz-preview:hover {
  cursor: pointer !important;
}
.texture-list .dz-preview {
  overflow: hidden;
  border: solid 2px #ced4da;
  -webkit-column-break-inside: avoid;
}
.texture-list .dz-preview:hover, .texture-list .dz-preview.active {
  border: solid 2px #F37331 !important;
}
.texture-list .dz-preview .texture-image img {
  height: auto;
  width: 100%;
}
.texture-list .dz-preview .texture-image {
  padding: 10px;
  overflow: hidden;
  min-height: 125px;
}
.texture-background {
  position: relative;
  overflow: hidden;
  left: -11px;
  top: -11px;
}
#addressModal .table-wrapper {
  padding-top: 0 !important;
}
#addressModal .table-wrapper th {
  background-color: #2E2A22;
  color: #fff;
  padding: 10px 4px;
}
#addressModal .table-wrapper tr th:first-child, #addressModal .table-wrapper tr td:first-child {
  padding-left: 10px !important;
}
#addressModal .table-wrapper tr th:last-child, #addressModal .table-wrapper tr td:last-child {
  padding-right: 10px !important;
}
#addressModal .table-wrapper td {
  padding: 3px 4px;
}
#addressModal .table-wrapper th {
  padding: 8px 4px;
}
#addressModal .table-wrapper tr:nth-child(odd) td {
  background-color: rgba(0, 0, 0, 0.1);
}
#addressModal .table-wrapper tr:nth-child(even) td {
  background-color: rgba(0, 0, 0, 0.2);
}
#addressModal {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
#addressModal .modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
#addressModal .modal-footer a, #addressModal .modal-footer button {
  color: #fff;
  background-color: #106E81;
  border-color: #106E81;
  display: inline-block;
  text-align: center;
  outline: none !important;
}
#addressModal .modal-footer a:hover, #addressModal .modal-footer button:not(.disabled):hover {
  background-color: #2E2A22;
  border-color: #2E2A22;
}
#addressModal table {
  width: 100%;
}
#addressModal table tr {
  border-bottom: solid 1px #ced4da;
}
.texture-background.portrait img {
  height: 100%;
  width: 100%;
}
.texture-background.landscape img {
  width: 100%;
  height: 100%;
}
.button-address-modal i {
  padding-left: 10px;
}
.button-address-modal {
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #F37331;
  color: #fff;
}
.button-address-modal:hover {
  cursor: pointer;
  background: #FF7933;
}
.column-address-send p > * {
  float: left;
  display: inline-block;
}
.column-address-send {
  flex-direction: column;
}
.column-address-send .message-send {
  padding: 0 10px;
}
.column-address-send p {
  clear: both;
  float: left;
  margin: 0 !important;
  width: 215px;
}
.address-send-m:not(.address-send), .address-send-m:not(.address-send) i {
  display: none;
  opacity: 0;
}
.column-address-send span {
  height: 42px;
  line-height: 42px;
  display: inline-block;
}
.column-address-send i {
  font-size: 24px;
  height: 42px;
  line-height: 42px;
  display: inline-block;
  color: darkseagreen;
  margin-right: 15px;
}
.column-actions {
  float: right !important;
  display: flex !important;
  flex-direction: column;
  margin-right: 20px;
  text-align: center;
}
.product-address-row td {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.product-address-row td:first-child {
  width: 50px;
}
.product-address-row td > div.product-details p {
  margin: 0 !important;
}
.product-address-row td > div {
  float: left;
}
#addressHeaders {
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  float: left;
  width: 100%;
}
#addressHeaders button.active, #addressHeaders button:hover {
  background-color: #2E2A22;
}
#addressHeaders button {
  background: #106E81;
  color: #fff;
  border: none;
  outline: none;
  margin: 10px 5px;
  padding: 0 20px;
  height: 42px;
  text-align: center;
  line-height: 42px;
}
.table-wrapper blockquote {
  text-align: center;
  background: #eee;
  margin: 40px 20px 20px;
  border: 1px solid #e5e5e5;
}
.overview-table-wrapper {
  clear: both;
  max-height: calc(100vh - 400px);
  overflow-y: scroll;
}
.table-wrapper {
  clear: both;
  max-height: calc(100vh - 520px);
  overflow-y: scroll;
}
#previewAddresses.disabled {
  opacity: 0.65 !important;
  filter: grayscale(100%) !important;
}
#addressFooter button {
  background: #106E81;
  color: #fff;
  height: 42px;
  line-height: 42px;
  border: none;
  outline: none;
  padding: 0 20px;
}
#addressFooter {
  padding: 20px 0 0 0;
  text-align: center;
  border-top: solid 2px #e5e5e5;
  margin-top: 20px;
}
#loadedAddresses {
  font-size: 12px;
}
#loadedAddresses i.edit-address:hover, #loadedAddresses i.save-address:hover, #addressDropzone button:hover, #addressFooter button:hover, #loadedAddresses .remove-address:hover {
  cursor: pointer;
  background: #2E2A22;
}
#loadedAddresses i {
  background: #106E81;
  color: #fff;
  border-radius: 999px;
  height: 32px;
  width: 32px;
  text-align: center;
  line-height: 32px;
  display: inline-block;
  margin-left: 2px;
}
#loadedAddresses .actions {
  min-width: 74px;
}
#loadedAddresses i.edit-address, #loadedAddresses i.save-address {
  background: #F37331;
}
#loadedAddresses tr input.form-control {
  margin-right: 5px;
  width: calc(100% - 10px);
}
#loadedAddresses tr:not(.editing) input, #loadedAddresses tr.editing span {
  display: none !important;
}
#loadedAddresses tr.editing .edit-address, #loadedAddresses tr:not(.editing) .save-address {
  display: none !important;
}
.product-address-row .toggleAddressSend {
  cursor: pointer;
}
.product-address-row.disabled .toggleAddressSend {
  filter: grayscale(100%);
  opacity: 0.5;
}
.product-address-row button {
  background: #F37331;
  color: #fff !important;
  border: none !important;
  outline: none;
  height: 42px;
  line-height: 42px;
  padding: 0 14px;
  border-radius: 4px;
  float: right;
  display: block !important;
}
.product-address-row td {
  align-items: center;
  justify-content: center;
  position: relative;
  float: left;
}
body .product-address-row button:hover {
  background: #2E2A22;
}
.enveloppe-thumbnail img {
  max-width: 80%;
}
.enveloppe-thumbnail img, .product-thumbnail img {
  width: 100%;
}
.enveloppe-thumbnail, .product-thumbnail {
  width: 90px;
  overflow: hidden;
  float: left;
  padding: 5px;
}
.product-details {
  width: 120px;
}
.product-paper-color {
  background: white;
  position: absolute;
  right: 5px;
  top: calc(50% - 18px);
}
.product-col, .enveloppe-col {
  width: 110px;
}
.product-paper-color > div.color {
  width: 36px;
  height: 36px;
  border: solid 1px #000;
  border-radius: 4px;
}
.product-paper-color .creme {
  background-color: #ffc;
}
.single-product-head div.float-end .btn-close {
  color: #fff;
  border: none;
  outline: none;
  font-size: 36px;
}
.single-product-head {
  margin: -16px;
  background: #F37331;
  color: #fff;
  height: 60px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  overflow: hidden;
}
#addressContainer {
  margin: 50px 0 0;
  border-radius: 24px;
  overflow: hidden;
}
.single-product-head .enveloppe-thumbnail-select, .single-product-head .product-details {
  width: auto;
  padding-right: 20px;
}
.single-product-head .enveloppe-col, .single-product-head .product-col {
  width: auto;
}
.single-product-head .product-paper-color {
  top: initial;
  right: initial;
}
.single-product-head div {
  position: relative;
}
.single-product-head > div {
  display: flex;
  align-items: center;
  align-self: center;
  height: 100%;
  padding-right: 20px;
}
.selected-paper-color:hover {
  cursor: pointer;
}
.single-product-head .toggle-back:hover {
  cursor: pointer;
  background: #2E2A22 !important;
}
.single-product-head div .toggle-back {
  background: none !important;
  border: none !important;
  font-size: 42px;
  height: 60px;
  line-height: 60px;
  outline: none !important;
  padding: 0 15px;
}
.single-product-head .enveloppe-thumbnail, .single-product-head .product-thumbnail {
  border-radius: 999px;
  text-align: center;
  margin: 10px 0;
  background: white;
  display: flex;
  justify-content: center;
  position: relative;
}
.single-product-head .enveloppe-thumbnail img, .single-product-head .product-thumbnail img {
  width: auto;
}
.single-product-head div {
  float: left;
}
.gotoQr:hover {
  color: #fff !important;
  text-decoration: none !important;
}
#addressDropzone button {
  background: #106E81;
  height: 42px;
  color: #fff;
  line-height: 42px;
  padding: 0 20px;
  margin: 0;
  border: 0;
  outline: none;
}
#addressDropzone {
  border: dashed #F37331;
  clear: both;
  padding: 20px;
  margin: 20px 0px 0px;
  text-align: center;
}
.dwt-tooltip > span {
  position: relative;
  background: #2E2A22;
  padding: 5px 12px;
  margin: 5px;
  font-size: 15px;
  border-radius: 100%;
  color: #FFF;
}
.dwt-tooltip > span:before, .dwt-tooltip > span:after {
  position: absolute;
  content: "";
  opacity: 0;
  transition: all 0.4s ease;
}
.dwt-tooltip > span:before {
  border-width: 10px 8px 0 8px;
  border-style: solid;
  border-color: #2E2A22 transparent transparent transparent;
  top: -15px;
  transform: translateY(20px);
}
.dwt-tooltip > span:after {
  content: attr(data-tooltip);
  background: #2E2A22;
  width: auto;
  height: 40px;
  font-size: 13px;
  font-weight: 300;
  top: -75px;
  left: -10px;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
}
.dwt-tooltip > span:hover::before, .dwt-tooltip > span:hover::after {
  opacity: 1;
  transform: translateY(-2px);
}
.phone-content, .phone-brand, .phone-wrapper {
  position: absolute;
}
.phone-preview {
  width: 270px;
  height: 480px;
  position: relative;
  background: white;
  border-radius: 45px;
}
.phone-brand img, .phone-wrapper img {
  height: 100%;
  width: 100%;
}
.product-digitale-rouwkaart #canvas {
  border: none;
  box-shadow: none !important;
  background: transparent;
}
.product-digitale-rouwkaart {
  height: auto !important;
}
.product-digitale-rouwkaart #canvas-page, .product-digitale-rouwkaart .canvas-vertical-toolbar {
  display: none !important;
}
.phone-wrapper {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
}
.phone-brand {
  top: 50px;
  right: 50px;
  left: 50px;
}
.phone-content {
  bottom: 50px;
  right: 20px;
  left: 20px;
  text-align: center;
}
@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.dwt-tooltip:hover {
  animation: shake 500ms ease-in-out forwards;
}
.product-edit-container {
  display: flex;
}
.product-edit-container-child {
  flex: 1;
}
/******** V2 *******/
.modal-v2 .warning {
  margin: 20px 5px 0;
}
.modal-v2 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100%;
}
.modal-v2 .modal-lg {
  max-width: 1200px !important;
  min-width: 1200px !important;
}
.modal-v2 .modal-lg .modal-header h2 {
  font-size: 24px;
  font-family: "roboto";
  font-weight: bold;
}
.modal-v2 .modal-lg .modal-header {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 10px 25px 5px 25px;
}
.modal-v2 .modal-lg .modal-content {
  border-radius: 24px;
  background: #f1f1f1;
}
.modal-v2 .row {
  width: 100%;
}
.modal-v2 .modal-lg .modal-footer {
  border: none;
}
/******** V2 Product Modal *******/
#templateModal.modal-v2 .modal-body .scroll-container, #wizardModal.modal-v2 .modal-body .scroll-container, #productModal.modal-v2 .modal-body .scroll-container {
  width: 100%;
  max-height: calc(100vh - 320px);
  overflow-y: scroll !important;
  margin-top: 5px;
  border-radius: 24px;
}
#templateModal.modal-v2 .modal-body #TemplateList.dropzone .dz-preview, #wizardModal.modal-v2 .modal-body #TemplateList.dropzone .dz-preview, #productModal.modal-v2 .modal-body #productTypeList.dropzone .dz-preview {
  background: white;
  margin: 3px;
  padding: 20px;
  border-radius: 24px;
  border: none !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
#templateModal.modal-v2 #TemplateList .templateTitleWrap, #wizardModal.modal-v2 #TemplateList .templateTitleWrap, #productModal.modal-v2 #specialProductTypeList .template-title, #productModal.modal-v2 #productTypeList .template-title, #wizardModal.modal-v2 #TemplateList .template-title {
  border-radius: 12px;
}
#templateModal .modal-body #templateTypeInterface, #wizardModal .modal-body #templateTypeInterface, #productModal .modal-body #productTypeInterface {
  width: 320px;
}
#templateModal .modal-body .templateResultContainer, #wizardModal .modal-body .templateResultContainer, #productModal .modal-body .productResultContainer {
  width: calc(1200px - 320px);
}
#templateModal .modal-body, #wizardModal .modal-body, #productModal .modal-body {
  display: flex;
}
.product-filter-column ul {
  margin: 0;
  padding: 0;
}
.product-filter-column h4 {
  width: 100%;
  clear: both;
  position: relative;
  font-size: 16px;
  padding: 15px 0 5px;
}
.product-filter-column * {
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
.modal-v2 .radio.col {
  width: calc(25% - 10px);
}
.modal-v2 .radio.col p span {
  font-size: 8px;
}
.modal-v2 .radio.col h2 {
  text-align: center;
  font-weight: 900;
  font-size: 16px;
}
.modal-v2 .radio.col label {
  padding: 20px;
  border-radius: 24px;
  background: white;
  margin: 10px 0 20px;
  min-height: 160px;
  width: 100%;
}
.modal-v2 h4 {
  font-weight: bold;
  font-size: 14px;
  position: relative;
  height: 30px;
  color: #F37331;
  font-family: "Roboto";
  width: 100%;
}
#relationColumn .form-control {
  margin-bottom: 15px;
  margin-right: 22px;
}
#relationColumn .form-control p, #relationColumn {
  margin: 0;
}
.modal-v2 .form-control, .modal-v2 input.form-control {
  background: white;
  border-radius: 12px;
  outline: 0;
}
.modal-v2 h4.border-after:after {
  position: absolute;
  background-color: #F37331;
  height: 1px;
  content: "";
  left: 0;
  right: 0;
  top: 30px;
}
.product-filter-column h4:before {
  position: absolute;
  background-color: #F37331;
  height: 1px;
  content: "";
  left: 0;
  right: 0;
  top: 0;
}
.col-aanhef, .col-poem {
  position: relative;
}
.product-filter-item {
  width: 100%;
  clear: both;
  float: left;
  margin-bottom: 10px;
}
.product-filter-item * {
  float: left;
  height: 24px;
  line-height: 24px;
  margin-right: 10px;
}
.product-filter-item *, .product-filter-item {
  list-style: none;
  line-height: 24px;
}
.toggleColumns .checkbox-circle {
  margin-top: 8px;
  margin-right: 8px;
}
.checkbox-circle {
  position: relative;
  display: inline-block;
  height: 24px;
  width: 24px;
  border: solid 2px #333;
  border-radius: 24px;
}
.toggleColumns .checkbox-circle:after, .radio.col .checkbox-circle:after, li .checkbox-circle:after, .product-filter-item .checkbox-circle:after {
  position: absolute;
  left: 2px;
  content: "";
  top: 2px;
  background: white;
  height: 16px;
  width: 16px;
  border-radius: 24px;
  z-index: 1;
}
.select-row .checkbox-circle:hover, .checkbox-circle:hover, .product-filter-item:hover {
  cursor: pointer;
}
.select-row {
  text-align: center;
  width: 100%;
}
.toggleColumns:hover .checkbox-circle:after, .toggleColumns.active .checkbox-circle:after, .radio.col .checkbox-circle:hover:after, .radio.col.selected .checkbox-circle:after, .product-filter-item:hover .checkbox-circle:after, .product-filter-item.active .checkbox-circle:after {
  content: "";
  background: #F37331 !important;
  z-index: 2;
}
.product-filter-column {
  padding: 10px 0;
  position: relative;
}
.fade:not(.show) {
  opacity: 0;
  z-index: 0 !important;
  display: none !important;
}
.color-secondary {
  color: #F37331;
}
.v2-icon {
  height: 25px;
  width: 25px;
  background: #F37331;
  line-height: 25px !important;
  background: #F37331;
  text-align: center;
  font-size: 12px;
  color: #fff;
}
.v2-icon.round {
  border-radius: 24px;
}
#productCount {
  color: #F37331;
}
.flex-column {
  flex-direction: column;
}
.search-auto-complete .search-field {
  height: 32px;
  border-radius: 12px;
  border: none;
  background: #f1f1f1;
  padding: 0px 10px;
  min-width: 220px;
  text-indent: 5px;
}
.search-auto-complete > div {
  position: absolute;
  top: 40px;
  left: 10px;
  right: 15px;
  height: 280px;
  overflow-y: scroll;
}
.toggle-search:not(.active) .search-auto-complete {
  display: none !important;
}
.col-aanhef .search-auto-complete {
  width: calc(100% - 10px);
}
.search-auto-complete {
  position: absolute;
  height: 100%;
  background: white;
  border-radius: 24px;
  width: calc(100% - 10px);
  z-index: 100;
  padding: 10px;
  left: 6px;
  top: 43px;
  overflow: hidden;
}
.select-poem .content-wrap p {
  float: left;
  display: contents;
  height: 32px;
  line-height: 32px;
}
.select-poem .content-wrap {
  position: absolute;
  top: 0;
  left: 30px;
  height: 32px;
  overflow: hidden;
  line-height: 32px;
}
.select-poem:hover * {
  color: #F37331;
}
.toggle-search p:hover, .search-auto-complete .v2-icon:hover, .select-poem:hover {
  cursor: pointer;
}
.select-poem:after {
  position: absolute;
  background-color: #F37331;
  height: 1px;
  content: "";
  left: 5px;
  right: 10px;
  top: 30px;
  opacity: 0.5;
}
.select-poem {
  padding: 0 7px;
  overflow: hidden;
  height: 32px;
  width: 100%;
  display: inline-block;
  position: relative;
  line-height: 32px;
}
#toggleDossier:hover * {
  color: #106E81 !important;
}
#toggleDossier:hover {
  cursor: pointer;
}
#toggleDossier > * {
  float: left;
}
#activeOverledeneNaam {
  float: left;
}
.icon-dossier {
  height: 27px;
  width: 32px;
  font-size: 14px;
  color: #fff;
  font-family: "Font Awesome 6 Free" !important;
  text-align: center;
  line-height: 46px;
  display: block;
  margin-top: 12px;
}
#dossierPreview .preview-input {
  height: 40px;
  line-height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  margin-top: 10px;
  padding: 0 10px;
  font-size: 12px;
}
#dossierPreview div {
  width: 100%;
}
#dossierPreview {
  position: relative;
  height: 100%;
  align-items: flex-end;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: flex-end;
}
@media (max-height: 800px) {
  #canvasAreaWrapper {
    position: absolute;
    left: 0px;
    top: 0px;
    width: calc(100% - 0px);
    height: calc(100%);
  }
  body .product-filter-item *, body .product-filter-item {
    line-height: 20px;
  }
  body .product-filter-item * {
    height: 20px;
    line-height: 20px;
  }
  body .checkbox-circle {
    height: 20px;
    width: 20px;
  }
  body #templateModal.modal-v2 .modal-body .scroll-container, body #wizardModal.modal-v2 .modal-body .scroll-container, body #productModal.modal-v2 .modal-body .scroll-container {
    max-height: calc(100vh - 200px);
  }
  body .toggleColumns .checkbox-circle:after, body .radio.col .checkbox-circle:after, body li .checkbox-circle:after, body .product-filter-item .checkbox-circle:after {
    height: 12px;
    width: 12px;
  }
}
.backdrop-new.active {
  display: block !important;
}
body:not(.modal-open) .backdrop-new:not(.active) {
  display: none !important;
}
body .backdrop-new {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0.5;
}
.modal-backdrop {
  display: none !important;
}
.form-deceased-name {
  width: 33% !important;
}
.price-calculation-container {
  position: absolute;
  background-color: white;
  width: 220px;
  right: 20px;
  top: 75px;
  padding: 20px;
  border-radius: 25px;
  z-index: 100;
}
.price-calculation-container blockquote {
  margin-bottom: 25px !important;
}
.price-calculation-container blockquote * {
  font-size: 14px !important;
}
.addvert-actions {
  width: 100%;
  clear: both;
  height: 32px;
}
.addvert-actions > div i {
  font-size: 16px;
}
.addvert-actions > div {
  width: 32px;
  height: 32px;
  text-align: center;
}
.addvert-height {
  font-size: 12px;
  text-align: center;
}
.sectionHeight.hidden {
  display: none !important;
}
.sectionHeight {
  margin-top: 10px;
  display: block;
}
.addvert-actions > div:hover i {
  cursor: pointer;
  color: #106E81;
}
.publication-select-container {
  margin: 0 -30px;
}
.publication-select {
  background: #F1f1f1;
  border: none;
  height: 32px;
  line-height: 32px;
  border-radius: 24px;
}
.price-calculation-spinner {
  width: 100% !important;
}
#canvas.border-rounded #canvas-grid, #canvas.border-rounded #canvas-safe-print-margins {
  overflow: hidden;
}
#canvas.border-rounded #canvas-backdrop, #canvas.border-rounded #canvas-grid, #canvas.border-rounded #canvas-safe-print-margins, #canvas.border-rounded #canvas-page, #canvas.border-rounded {
  border-radius: 50px !important;
}
#canvas .border-helper {
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  z-index: 2700;
  border: solid 2px black;
  pointer-events: none !important;
}
#canvas.border-solid .border-helper, #canvas.border-rounded .border-helper {
  display: block !important;
}
#canvas.border-rounded .border-helper {
  border-radius: 50px;
}
/**
 * revision-component
 */
.revision-component a.disabled:hover {
  cursor: initial !important;
}
.revision-component a.disabled *, .revision-component a.disabled {
  color: black !important;
}
.revision-component ul {
  margin: 0;
  gap: 5px;
  float: none;
  padding: 0;
}
.revision-component ul li {
  list-style: none;
  float: left;
}
/**
 * Dynamic Font Selector
 */
#dynamic-font-selector {
  background: white;
  position: relative;
  z-index: 999;
  height: inherit;
}
#font-search-field {
  font-size: 14px;
  padding: 0 2px;
  height: 28px;
  line-height: 28px;
  margin: 2px 0;
}
.font-active {
  color: #106E81;
}
.font-options > div {
  float: left;
}
#dynamic-font-selector .font-scroll-container {
  overflow-y: scroll;
  overflow-x: hidden !important;
  min-height: 44px;
  background: white;
  z-index: 9999;
  height: inherit;
}
#dynamic-font-selector .font-list-item:not(:last-child)::after {
  content: "";
  border-bottom: solid 1px black;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.05;
}
#dynamic-font-selector .font-list-item img {
  max-height: 18px;
  height: auto;
}
.font-search-field-container {
  position: relative;
  box-shadow: rgba(149, 157, 165, 0.1) 0 2px 8px;
}
#dynamic-font-selector .font-list-item:hover {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.05) !important;
}
#dynamic-font-selector .font-list-item {
  list-style: none;
  height: 34px;
  clear: both;
  width: 100%;
  position: relative;
  z-index: 9999;
  padding: 0 20px;
  background: white;
  font-size: 24px;
}
#dynamic-font-selector .font-list-item span {
  height: 24px;
  line-height: 24px;
  width: 100%;
}
#clearSearchField {
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  top: 2px;
  right: 10px;
  z-index: 999;
}
/**
 * Scrollbar
 */
*::-webkit-scrollbar {
  -webkit-appearance: none;
}
*::-webkit-scrollbar:vertical {
  width: 11px;
}
*::-webkit-scrollbar:horizontal {
  height: 11px;
}
*::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid white;
  /* should match background, can't be transparent */
  background-color: rgba(0, 0, 0, 0.1);
}
*::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}
.sidebar-header h4 span:hover {
  cursor: pointer;
}
.sidebar-header h4 span:hover, .sidebar-header h4 span.selected {
  color: #106E81;
}
.sidebar-header h4 span {
  margin: 0 5px;
  font-size: 1.3rem;
}
.upload-container {
  text-align: center;
  padding: 20px;
}
.sidebar-header h4 {
  text-align: center;
}
.sidebar-header {
  border-bottom: solid 1px rgba(0, 0, 0, 0.25);
  padding: 10px 0 10px;
}
.drukwerk-container {
  text-align: center;
}
.font-size-selector span {
  line-height: 28px;
}
.font-size-selector span:hover {
  cursor: pointer;
}
.font-size-selector {
  display: flex;
  margin-top: 6px;
}
.text-mode-bar > btn-mode.active, .toolbar-scroll-container > *.active span {
  color: #106E81;
}
.text-mode-bar > btn-mode:hover::after, .text-mode-bar > btn-mode.active::after, .toolbar-scroll-container > *:hover::after, .toolbar-scroll-container > *.active::after {
  content: "";
  display: block;
  width: 100%;
  border-bottom: 2px solid #106E81;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.toolbar-container > * {
  flex: 1;
}
.toolbar-container {
  display: flex;
  position: relative;
  height: 40px;
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
}
.toolbar-scroll-container {
  height: 40px;
  position: absolute;
  width: 625px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  bottom: 0px;
}
.toolbar-scroll-container > * {
  padding: 0 5px;
}
.toolbar-scroll-container * {
  position: relative;
  font-size: 18px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
}
.size-slider {
  display: flex;
  align-items: center;
  gap: 20px;
  /* Adjust the gap as needed */
  width: 100%;
}
.size-slider input[type="number"] {
  width: 84px;
}
.size-slider input[type="range"].thick-slider {
  flex: 3;
  height: 40px;
  -webkit-appearance: none !important;
  border: none !important;
}
.size-slider input[type="range"].thick-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* Remove default styling */
  margin-top: -5px;
  width: 20px;
  /* Adjust the thumb width as needed */
  height: 20px;
  /* Adjust the thumb height as needed */
  background: #000;
  /* Adjust the thumb color as needed */
  cursor: pointer;
}
.size-slider input[type="range"].thick-slider::-moz-range-thumb {
  margin-top: -5px;
  width: 20px;
  /* Adjust the thumb width as needed */
  height: 20px;
  /* Adjust the thumb height as needed */
  background: #000;
  /* Adjust the thumb color as needed */
  cursor: pointer;
}
#mobile-font-selector {
  height: 140px;
  width: 100%;
}
.bg-selected {
  outline: solid 2px #106E81;
  z-index: 9999 !important;
  opacity: 0.75;
}
/* Background Layer */
.template-background-layer .inner {
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 3px;
}
.template-background-layer, .background-layer {
  position: absolute;
  z-index: 1;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  overflow: hidden;
}
.content-layer {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.btn-remove-background {
  border: solid 1px black;
  background: white;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 5px 10px 15px;
}
.btn-remove-background:hover {
  cursor: pointer;
  background: #f1f1f1;
}
/* Media query for mobile devices only */
@media only screen and (max-width: 600px) {
  /* Styles for mobile devices */
  /* For Webkit browsers (Chrome, Safari) */
  /* For Firefox */
  #layer-container {
    height: 280px !important;
  }
  #left-content-sidebar .scroll-container {
    height: 160px;
    overflow-x: hidden;
    overflow-y: scroll;
    margin-top: 5px;
  }
  .interface-body #contentArea {
    position: absolute !important;
    margin: 0 !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    height: auto !important;
    z-index: 10;
  }
  .text-bar.text-tab {
    height: 300px;
  }
  .footer {
    display: none;
  }
  .color-picker-container, .vignette-actions-header {
    display: none !important;
  }
  .interface-body #contentArea {
    position: absolute !important;
    margin: 0 !important;
    left: 0;
    right: 0;
    bottom: 72px;
    top: 0;
    height: auto !important;
    z-index: 10;
  }
  #libraryFilterContainer, .imageFilterContainer {
    height: 70px;
  }
  body #left-content-sidebar .imageFilterContainerSearch, body #left-content-sidebar #libraryFilterContainer select, body #left-content-sidebar .imageFilterContainer select {
    width: 240px !important;
    float: initial;
    max-width: initial !important;
  }
  #left-content-sidebar .scroll-container {
    width: 100%;
  }
  .font-size-selector {
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .canvas-vertical-toolbar > .toolbar-button {
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 28px;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  .canvas-vertical-toolbar > .toolbar-button > * {
    height: inherit;
    width: inherit;
    line-height: inherit;
    font-size: inherit;
  }
  .sidebar-active .left-sidebar-wrapper {
    height: 372px !important;
  }
  .auto-height {
    height: auto !important;
  }
  .color-cells-container {
    height: 220px;
  }
  #left-content-sidebar.text-bar .text-tab {
    width: 100%;
    float: left;
  }
  #left-content-sidebar.text-bar .tab-container {
    height: 220px;
    width: 100%;
  }
  #left-content-sidebar.text-bar .tab-container.create-container {
    height: 260px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    overflow: hidden;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  #left-content-sidebar.text-bar .tab-container.create-container .create-tab {
    height: 260px;
  }
  #left-content-sidebar.layers {
    background: white;
  }
  #left-content-sidebar.images .toolbar-scroll-container.tools-center {
    justify-content: center;
    display: flex;
    width: 100%;
  }
  #left-content-sidebar.layers, #left-content-sidebar.images {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    overflow: hidden;
    height: 298px;
  }
  .imageFilterContainerSearch {
    display: none;
  }
  .slide-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .slide-container .size-slider {
    width: 100%;
    padding: 0 40px;
  }
  .slide-container, .action-container {
    height: 220px;
  }
  .slide-container .button-container, .action-container .button-container {
    margin: 0 -10px;
    display: flex;
    width: 100%;
  }
  .slide-container .button-container button, .action-container .button-container button {
    flex: 1;
    margin: 10px;
  }
  .slide-container #tiny-mce-container, .action-container #tiny-mce-container {
    height: calc(100% - 50px);
    border: solid 1px #106E81;
    border-radius: 4px;
    width: calc(100% - 20px);
  }
  .item-layer {
    height: 52px;
  }
  body.text-mode-create #left-content-sidebar.text-bar .action-container {
    height: 100%;
  }
  .left-sidebar-wrapper {
    height: 72px;
    flex-direction: column-reverse;
  }
  .left-sidebar-wrapper .create-tab, .left-sidebar-wrapper .text-mode-bar, .left-sidebar-wrapper .toolbar-container {
    background: white;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .left-sidebar-wrapper .text-mode-bar {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  .left-sidebar-wrapper .tab-container {
    background: white;
  }
  #interface-container .interface-body {
    flex-direction: column-reverse;
    height: 100% !important;
  }
  .text-tab {
    justify-content: center;
    display: flex;
    align-items: center;
    height: 220px;
    flex-direction: column;
  }
  .text-tab .alignTextContainer, .text-tab .fontOptionsContainer {
    list-style: none;
    margin: 10px 0 !important;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    list-style: none;
  }
  .text-tab .alignTextContainer li a, .text-tab .fontOptionsContainer li a {
    color: var(--ink);
    padding: 0 5px;
    width: 76px;
    height: 48px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    line-height: 58px;
    text-align: center;
    margin: 0 5px;
    border-radius: 4px;
    display: block;
    background: var(--cream);
    margin: 0 2px;
  }
  .text-tab .alignTextContainer li a:hover, .text-tab .alignTextContainer li a.active, .text-tab .fontOptionsContainer li a:hover, .text-tab .fontOptionsContainer li a.active {
    background: var(--clay);
    color: white;
  }
  .navbar-custom {
    padding: 0;
  }
  #left-sidebar {
    width: 100%;
    height: 72px;
  }
  .sidebar-active .content-section#editor #contentArea {
    flex: 1;
    bottom: 375px;
  }
  #imageLibraryFilter, #searchImages {
    height: 42px;
  }
  #left-content-sidebar .scroll-container {
    min-height: 160px;
  }
  #left-content-sidebar {
    width: 100% !important;
    border: none;
    background: transparent;
    padding: 0 !important;
    margin: 0 !important;
  }
  #left-content-sidebar #image-container {
    line-height: 0;
    -webkit-column-gap: 10px;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -moz-column-gap: 5px;
    column-gap: 5px;
    padding: 0 5px 10px 15px;
    margin-top: 0;
  }
  .canvas-vertical-toolbar > .toolbar-button:disabled {
    opacity: 0.5 !important;
    pointer-events: none;
    /* Prevents clicking */
  }
  .canvas-vertical-toolbar > .toolbar-button.disabled:not(:disabled) {
    opacity: 1 !important;
  }
  #canvas-tools-left .material-icons, #canvas-tools-right .material-icons {
    background: white;
    color: var(--ink);
  }
  #canvas-tools-left {
    left: 20px;
  }
  #canvas-tools-right {
    right: 20px;
  }
  .page-alias-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
    text-align: center;
    pointer-events: none;
    /* Prevents clicking */
  }
  .page-alias-bar > span {
    padding: 0 5px;
    height: 24px;
    display: block;
    background: var(--charcoal);
    width: 120px;
    margin: 5px auto;
    color: white;
    border-radius: 24px;
    line-height: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  .action-container {
    display: flex;
    text-align: center;
    padding: 10px 20px;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .action-container button {
    border-radius: 24px;
    width: 100%;
    height: 48px;
    line-height: 48px;
    padding: 0 20px;
    display: flex;
    justify-content: center;
  }
  .action-container button * {
    display: inline-block;
    height: 48px;
    line-height: 48px;
  }
  .actions-left-sidebar {
    height: 72px;
    padding: 0 !important;
    margin: 0;
    border: 0;
    display: flex;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    overflow: hidden;
    background-color: var(--clay);
  }
  .actions-left-sidebar .toggle-action {
    justify-content: flex-end;
    flex: 1;
  }
  #left-sidebar {
    background-color: white;
  }
  .text-mode-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    margin: 0 auto;
  }
  .btn-mode.active {
    color: #106E81;
  }
  .btn-mode {
    width: 120px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
  }
  .btn-mode * {
    height: 40px;
    line-height: 40px;
  }
  .create-tab .action-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .create-tab .btn-primary {
    padding: 0;
    margin: 5px 0;
    height: 42px;
    line-height: 42px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .create-tab .btn-primary * {
    height: 42px;
    line-height: 42px;
    display: inline-block;
  }
  .toolbar-container::-webkit-scrollbar, #canvasAreaWrapper::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
  }
  .toolbar-container, #canvasAreaWrapper {
    scrollbar-width: none;
    /* Hide scrollbar */
    -ms-overflow-style: none;
    /* IE and Edge */
  }
  .toolbar-container::-webkit-scrollbar, #canvasAreaWrapper::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
  }
  .font-size-control {
    text-align: center;
    width: calc(100% - 140px);
    border-radius: 4px;
    background: white;
    border: solid 1px rgba(0, 0, 0, 0.1);
  }
  .colorpickerplus-container .colorcell {
    width: 42px;
    height: 42px;
    border-radius: 5px;
  }
  .font-size-selector span {
    height: 40px;
    line-height: 40px;
    width: 40px;
    text-align: center;
    margin: 0 10px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }
  .font-size-selector span:hover {
    border: solid 1px #106E81;
  }
  .color-input-wrapper {
    display: none;
  }
  .color-picker-wrapper {
    position: relative;
    left: initial;
    top: initial;
    right: initial;
    bottom: initial;
    width: 100%;
    flex-direction: column-reverse;
  }
  .color-picker-footer {
    display: none;
  }
}
/* === Editor Layout Additions === */
#editor .interface-body {
  display: flex;
  align-items: stretch;
}
/* Bottom Bar & Thumbnails */
#bottom-bar.editor-chrome {
  position: relative;
  height: 80px;
  background: white;
  border-top: 1px solid var(--stone-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
}
#bottom-bar.editor-chrome .page-switcher {
  flex: 1;
  display: flex;
  justify-content: center;
  height: inherit;
}
#bottom-bar.editor-chrome .page-switcher .thumbnails {
  display: flex;
  gap: 15px;
  align-items: center;
  height: 70px;
}
#bottom-bar.editor-chrome .page-switcher .thumbnails .thumbnail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
  /* Dynamic width/height applied via JS */
}
#bottom-bar.editor-chrome .page-switcher .thumbnails .thumbnail-item:hover {
  transform: translateY(-2px);
}
#bottom-bar.editor-chrome .page-switcher .thumbnails .thumbnail-item.active .thumb-viewport {
  outline: 2px solid var(--clay);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
}
#bottom-bar.editor-chrome .page-switcher .thumbnails .thumbnail-item .thumb-viewport {
  width: 100%;
  height: 100%;
  background: #fff;
  outline: 1px solid var(--stone-line);
  border-radius: 4px;
  margin-bottom: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  pointer-events: none;
}
#bottom-bar.editor-chrome .page-switcher .thumbnails .thumbnail-item .thumbnail-item:hover .thumb-viewport {
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
#bottom-bar.editor-chrome .page-switcher .thumbnails .thumbnail-item.add-page-tile {
  width: 44px;
  height: 52px;
  border: 1.5px dashed var(--stone-line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  cursor: not-allowed;
}
#bottom-bar.editor-chrome .page-switcher .thumbnails .thumbnail-item.add-page-tile:hover {
  transform: none;
}
#bottom-bar.editor-chrome .page-switcher .thumbnails .thumbnail-item.add-page-tile .material-icons {
  font-size: 18px;
}
#bottom-bar.editor-chrome .cta .btn {
  border-radius: 30px;
  padding: 10px 25px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
}
#bottom-bar.editor-chrome .bottom-bar-start {
  display: flex;
  align-items: center;
}
[v-cloak] {
  display: none;
}
.save-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(247, 244, 241, 0.82);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: loaderFadeIn 0.2s ease-out;
}
.save-loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: #fff;
  padding: 40px 48px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
.save-loader-spinner {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.save-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--clay-tint);
  border-top-color: var(--clay);
  animation: loaderRingSpin 0.9s linear infinite;
}
.save-loader-drop {
  width: 26px;
  height: 34px;
  background: var(--clay);
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  animation: loaderDropPulse 1.4s ease-in-out infinite;
}
.save-loader-text {
  text-align: center;
}
.save-loader-title {
  font-size: 15px;
  font-weight: 700;
  color: #2E2A22;
  margin-bottom: 4px;
}
.save-loader-subtitle {
  font-size: 13px;
  color: #6B6555;
}
@keyframes loaderFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes loaderRingSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loaderDropPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
.uitleg-tour-root {
  position: fixed;
  inset: 0;
  z-index: 1000001;
}
.uitleg-tour-veil {
  position: absolute;
  inset: 0;
  background: rgba(33, 31, 26, 0.55);
  transition: background 0.2s ease-out;
}
.uitleg-tour-veil.transparent {
  background: transparent;
}
.uitleg-tour-spot {
  position: absolute;
  pointer-events: none;
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--clay), 0 0 0 9999px rgba(33, 31, 26, 0.5);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.uitleg-tour-card-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.uitleg-tour-card {
  width: 420px;
  max-width: 100%;
  background: var(--white);
  border-radius: 20px;
  padding: 36px;
  box-shadow: var(--shadow);
  text-align: center;
  animation: uitlegTourPopIn 0.22s ease-out;
}
.uitleg-tour-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--clay);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uitleg-tour-card-icon-drop {
  width: 18px;
  height: 24px;
  background: var(--clay);
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
}
.uitleg-tour-card-title {
  font-family: "Playfair Display", serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--charcoal);
  margin-bottom: 10px;
}
.uitleg-tour-card-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 26px;
}
.uitleg-tour-root .btn-pill-outline, .uitleg-tour-root .btn-pill-filled {
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--clay);
  cursor: pointer;
}
.uitleg-tour-root .btn-pill-outline {
  background: transparent;
  color: var(--clay);
}
.uitleg-tour-root .btn-pill-outline:hover {
  background: var(--clay-tint);
}
.uitleg-tour-root .btn-pill-filled {
  background: var(--clay);
  color: var(--white);
}
.uitleg-tour-root .btn-pill-filled:hover {
  background: var(--clay-dark);
  border-color: var(--clay-dark);
}
.uitleg-tour-card-actions {
  display: flex;
  gap: 10px;
}
.uitleg-tour-card-actions .btn-pill-outline, .uitleg-tour-card-actions .btn-pill-filled {
  flex: 1;
  height: 46px;
}
.uitleg-tour-card-actions .btn-pill-filled {
  flex: 1.4;
}
.uitleg-tour-card-never {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.uitleg-tour-never {
  border: 0;
  background: none;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.uitleg-tour-never:hover {
  color: var(--charcoal);
  text-decoration: underline;
}
.uitleg-tour-tip {
  position: absolute;
  width: 320px;
  box-sizing: border-box;
  background: var(--white);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
  animation: uitlegTourPopIn 0.2s ease-out;
}
.uitleg-tour-tip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}
.uitleg-tour-tip-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: var(--clay);
}
.uitleg-tour-tip-close {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 13px;
}
.uitleg-tour-tip-close:hover {
  background: var(--clay-tint);
}
.uitleg-tour-tip-title {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--charcoal);
  margin-bottom: 7px;
}
.uitleg-tour-tip-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.uitleg-tour-tip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.uitleg-tour-dots {
  display: flex;
  gap: 5px;
}
.uitleg-tour-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stone-line);
}
.uitleg-tour-dot.active {
  background: var(--clay);
}
.uitleg-tour-tip-buttons {
  display: flex;
  gap: 8px;
}
.uitleg-tour-tip-buttons .btn-pill-outline, .uitleg-tour-tip-buttons .btn-pill-filled {
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
}
.uitleg-tour-tip-buttons .btn-pill-filled {
  padding: 0 18px;
}
@keyframes uitlegTourPopIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* -------------------------------------------------------------------------
   "Op de kaart" wizard (op-de-kaart-wizard.component.js). Shares its root
   overlay/spotlight with the Uitleg tour verbatim (.uitleg-tour-veil,
   .uitleg-tour-spot, .uitleg-tour-dots/.uitleg-tour-dot - see above) - only
   the docked form panel below is its own CSS. Root sits at the same z-index
   tier as .uitleg-tour-root (1000001): the two are never open at once, so
   tying them together is simplest and correct either way.

   Sizes/radii follow the anchored ("wizard v2") panel of the editor design
   reference (user-helper.html): 380px panel, 20px padding, 40px controls
   with 9px radius and a 1.5px stone border, pill buttons. Written as plain
   CSS (no nesting) so every control inside the panel - the ceremony entry
   rows and family rows included, which used to fall outside the old
   .op-de-kaart-field-scoped rules and rendered as bare native inputs - gets
   the same treatment from one place.
   ------------------------------------------------------------------------- */
.op-de-kaart-root {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  font-family: "Work Sans", sans-serif;
}
.op-de-kaart-panel {
  position: absolute;
  box-sizing: border-box;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(33, 31, 26, 0.3);
  animation: uitlegTourPopIn 0.2s ease-out;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  transition: top 0.25s cubic-bezier(0.4, 0, 0.2, 1), left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.op-de-kaart-panel-top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 0;
}
.op-de-kaart-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: var(--clay);
}
.op-de-kaart-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.op-de-kaart-close:hover {
  background: var(--paper);
  color: var(--ink);
}
.op-de-kaart-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 20px 18px;
}
.op-de-kaart-title {
  font-family: "Playfair Display", serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--charcoal);
  margin: 0 0 6px;
}
.op-de-kaart-subtitle {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.op-de-kaart-field {
  margin-bottom: 14px;
  flex: 1;
  min-width: 0;
}
.op-de-kaart-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
/* Every control in the panel, wherever it sits (field, entry card, family row). */
.op-de-kaart-panel input[type="text"], .op-de-kaart-panel input[type="date"], .op-de-kaart-panel input[type="time"], .op-de-kaart-panel select, .op-de-kaart-panel textarea {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  border: 1.5px solid var(--stone-line);
  border-radius: 9px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: normal;
  color: var(--ink);
  background: var(--white);
  outline: none;
  box-shadow: none;
  appearance: auto;
}
.op-de-kaart-panel select {
  cursor: pointer;
}
.op-de-kaart-panel textarea {
  height: auto;
  padding: 10px 12px;
  line-height: 1.45;
  resize: vertical;
}
.op-de-kaart-panel input:focus, .op-de-kaart-panel select:focus, .op-de-kaart-panel textarea:focus {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--clay-tint);
}
.op-de-kaart-panel input::placeholder, .op-de-kaart-panel textarea::placeholder {
  color: #A39D8E;
}
/* Twee velden naast elkaar. Als het ene label over twee regels loopt
   ("Overlijden (plaats en datum)") en het andere niet, dan begon het ene
   invoerveld lager dan het andere. Vandaar een raster met twee vaste rijen -
   labels boven, invoervelden eronder: de labelrij wordt zo hoog als het
   langste label en de velden staan daardoor altijd op één lijn.

   display:contents laat het veld zelf als vak verdwijnen, zodat label en
   invoerveld rechtstreeks in dat raster vallen; grid-auto-flow:column vult
   per veld een kolom, dus dit werkt ook als er ooit een derde veld bij komt.
   De marge onder het veld valt met dat vak weg en staat daarom nu op de rij. */
.op-de-kaart-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: 12px;
  margin-bottom: 14px;
}
.op-de-kaart-row > .op-de-kaart-field {
  display: contents;
}
.op-de-kaart-row > .op-de-kaart-field > label {
  grid-row: 1;
}
.op-de-kaart-row > .op-de-kaart-field > input, .op-de-kaart-row > .op-de-kaart-field > select, .op-de-kaart-row > .op-de-kaart-field > textarea {
  grid-row: 2;
}
.op-de-kaart-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  background: var(--paper);
  border-radius: 999px;
  padding: 4px;
}
.op-de-kaart-tab {
  flex: 1;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.op-de-kaart-tab.active {
  background: var(--clay);
  color: var(--white);
}
.op-de-kaart-poem-card {
  border: 1.5px solid var(--stone-line);
  border-radius: 11px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease-out, background 0.15s ease-out;
}
.op-de-kaart-poem-card:hover {
  border-color: var(--clay);
}
.op-de-kaart-poem-card.active {
  border-color: var(--clay);
  background: var(--clay-tint);
}
.op-de-kaart-poem-verse {
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 6px;
}
.op-de-kaart-poem-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}
.op-de-kaart-btn-outline, .op-de-kaart-btn-filled {
  height: 38px;
  border-radius: 999px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.op-de-kaart-btn-outline {
  border: 1.5px solid var(--clay);
  background: var(--white);
  color: var(--clay);
}
.op-de-kaart-btn-outline:hover:not(:disabled) {
  background: var(--clay-tint);
}
.op-de-kaart-btn-outline:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.op-de-kaart-btn-filled {
  border: none;
  background: var(--clay);
  color: var(--white);
}
.op-de-kaart-btn-filled:hover {
  background: var(--clay-dark);
}
/* Small inline variant of .save-loader-ring, reusing the same loaderRingSpin
   keyframe (see editor_general.scss's own save-loader block). */
.op-de-kaart-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--clay-tint);
  border-top-color: var(--clay);
  animation: loaderRingSpin 0.9s linear infinite;
}
.op-de-kaart-error {
  margin-top: 8px;
  font-size: 12px;
  color: #087595;
}
/* AI-tegoed in the wizard's poem step (ai-tokens.js). */
.op-de-kaart-ai-cost {
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.op-de-kaart-ai-block {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--stone-line);
  font-size: 12px;
  color: var(--ink);
}
.op-de-kaart-ai-block strong {
  display: block;
  font-weight: 700;
}
.op-de-kaart-ai-block a, .op-de-kaart-ai-block .op-de-kaart-ai-buy {
  display: inline-block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 700;
  color: var(--clay);
  text-decoration: underline;
  cursor: pointer;
}
.op-de-kaart-preview-label {
  margin-top: 14px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.op-de-kaart-preview {
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--paper);
  font-style: italic;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
}
.op-de-kaart-preview-line {
  min-height: 1.55em;
}
.op-de-kaart-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.op-de-kaart-toggle-row label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.op-de-kaart-toggle {
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--stone-line);
  cursor: pointer;
  padding: 2px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: background 0.15s ease-out;
}
.op-de-kaart-toggle.on {
  background: var(--clay);
  justify-content: flex-end;
}
.op-de-kaart-toggle-knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.op-de-kaart-entry {
  border: 1px solid var(--stone-line);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.op-de-kaart-entry-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.op-de-kaart-entry-row select, .op-de-kaart-entry-row input {
  flex: 1;
  min-width: 0;
}
.op-de-kaart-relative-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.op-de-kaart-relative-row input {
  flex: 1;
  min-width: 0;
}
.op-de-kaart-panel .op-de-kaart-relative-row input.op-de-kaart-relative-city {
  flex: 0 0 84px;
}
.op-de-kaart-panel .op-de-kaart-relative-row input.op-de-kaart-relative-name.italic {
  font-style: italic;
}
.op-de-kaart-panel .op-de-kaart-relative-row input.op-de-kaart-relative-name.indent {
  padding-left: 24px;
}
.op-de-kaart-relative-head {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft);
}
.op-de-kaart-relative-head span:first-child {
  flex: 0 0 84px;
}
.op-de-kaart-relative-head em {
  font-style: normal;
  font-weight: 400;
}
.op-de-kaart-italic {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1.5px solid var(--stone-line);
  border-radius: 9px;
  background: var(--white);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.op-de-kaart-italic .material-icons {
  font-size: 18px;
}
.op-de-kaart-italic:hover {
  border-color: var(--clay);
}
.op-de-kaart-italic.on {
  border-color: var(--clay);
  background: var(--clay-tint);
  color: var(--clay);
}
.op-de-kaart-family-preview {
  font-style: normal;
}
.op-de-kaart-family-line {
  display: flex;
  gap: 12px;
  min-height: 1.55em;
}
.op-de-kaart-family-city {
  flex: 0 0 72px;
}
.op-de-kaart-family-name.italic {
  font-style: italic;
}
.op-de-kaart-family-name.indent {
  padding-left: 1.5em;
}
.op-de-kaart-spacer-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  font-size: 11px;
  color: var(--ink-soft);
}
.op-de-kaart-spacer-row span {
  flex: 1;
  border-top: 1px dashed var(--stone-line);
}
.op-de-kaart-spacer-row em {
  font-style: normal;
}
.op-de-kaart-relative-actions {
  display: flex;
  gap: 16px;
  margin-top: 4px;
}
.op-de-kaart-remove {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #087595;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.op-de-kaart-remove:hover {
  background: rgba(8, 117, 149, 0.12);
}
.op-de-kaart-link {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--clay);
  padding: 6px 0;
  cursor: pointer;
}
.op-de-kaart-link:hover {
  color: var(--clay-dark);
  text-decoration: underline;
}
.op-de-kaart-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--paper);
}
.op-de-kaart-footer-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.op-de-kaart-footer-buttons .op-de-kaart-link {
  color: var(--ink-soft);
  margin-right: 4px;
}
.op-de-kaart-footer-buttons .op-de-kaart-link:hover {
  color: var(--ink);
}
.op-de-kaart-footer-buttons .op-de-kaart-btn-outline {
  border-color: var(--stone-line);
  color: var(--ink-soft);
  height: 36px;
  padding: 0 14px;
}
.op-de-kaart-footer-buttons .op-de-kaart-btn-outline:hover:not(:disabled) {
  background: var(--paper);
}
.op-de-kaart-footer-buttons .op-de-kaart-btn-filled {
  height: 36px;
  padding: 0 18px;
}
.sidebar-qr-panel .panel-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}
.sidebar-qr-panel .panel-subtitle {
  font-size: 11.5px;
  font-weight: 700;
  color: #6B6555;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}
.sidebar-qr-panel .qr-media-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}
.sidebar-qr-panel .qr-media-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border-radius: 9px;
  cursor: pointer;
  border: 1.5px solid var(--stone-line);
  background: #fff;
  color: #6B6555;
}
.sidebar-qr-panel .qr-media-tile .material-icons {
  font-size: 16px;
  flex-shrink: 0;
}
.sidebar-qr-panel .qr-media-tile .qr-media-tile-label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
}
.sidebar-qr-panel .qr-media-tile.active {
  border-color: var(--clay);
  background: var(--clay-tint);
  color: var(--clay-dark);
}
.sidebar-qr-panel .panel-divider {
  height: 1px;
  background: var(--stone-line);
  margin-bottom: 18px;
}
.sidebar-qr-panel .panel-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6B6555;
  margin-bottom: 6px;
}
.sidebar-qr-panel .panel-input {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  border: 1px solid var(--stone-line);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--ink);
  margin-bottom: 16px;
}
.sidebar-qr-panel .qr-label-toggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #6B6555;
}
.sidebar-qr-panel .qr-label-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--stone-line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.sidebar-qr-panel .qr-label-checkbox .material-icons {
  font-size: 12px;
  color: #fff;
}
.sidebar-qr-panel .qr-label-checkbox.checked {
  border-color: var(--clay);
  background: var(--clay);
}
.sidebar-qr-panel .qr-label-input {
  margin-bottom: 20px;
}
.sidebar-qr-panel .qr-add-btn {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: none;
  background: var(--clay);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.sidebar-qr-panel .qr-add-btn:hover {
  background: var(--clay-dark);
}
.sidebar-product-settings-panel .panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.sidebar-product-settings-panel .settings-admin-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--clay-tint);
  color: var(--clay-dark);
}
.sidebar-product-settings-panel .panel-hint {
  font-size: 11.5px;
  line-height: 1.45;
  color: #6B6555;
  margin-bottom: 18px;
}
.sidebar-product-settings-panel .panel-subtitle {
  font-size: 11.5px;
  font-weight: 700;
  color: #6B6555;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
}
.sidebar-product-settings-panel .panel-divider {
  height: 1px;
  background: var(--stone-line);
  margin: 18px 0;
}
.sidebar-product-settings-panel .panel-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6B6555;
  margin-bottom: 6px;
}
.sidebar-product-settings-panel .panel-input {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  border: 1px solid var(--stone-line);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--ink);
  margin-bottom: 14px;
}
.sidebar-product-settings-panel .settings-readonly-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 10px 0;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.sidebar-product-settings-panel .settings-category-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--clay);
  text-decoration: none;
  white-space: nowrap;
}
.sidebar-product-settings-panel .settings-category-link:hover {
  color: var(--clay-dark);
}
.sidebar-product-settings-panel .settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--stone-line);
  border-radius: 10px;
  cursor: pointer;
}
.sidebar-product-settings-panel .settings-toggle-label {
  font-size: 12.5px;
  font-weight: 700;
}
.sidebar-product-settings-panel .settings-toggle-hint {
  font-size: 11px;
  color: #6B6555;
}
.sidebar-product-settings-panel .settings-toggle-track {
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--stone-line);
  flex-shrink: 0;
  padding: 2px;
  transition: background 0.15s ease;
}
.sidebar-product-settings-panel .settings-toggle-track.on {
  background: var(--clay);
  justify-content: flex-end;
}
.sidebar-product-settings-panel .settings-toggle-knob {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.sidebar-product-settings-panel .settings-save-btn {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: none;
  background: var(--clay);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 22px;
}
.sidebar-product-settings-panel .settings-save-btn:hover {
  background: var(--clay-dark);
}
.sidebar-product-settings-panel .settings-save-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.qr-code-element {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 4px;
}
.qr-code-element .qr-code-image {
  width: 100%;
  height: auto;
  flex: 1;
  object-fit: contain;
}
.qr-code-element .qr-code-label {
  font-size: 9px;
  color: #6B6555;
  text-align: center;
  line-height: 1.3;
}
#editor-sidebar-region {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  height: 100%;
}
#editor-icon-rail {
  width: 84px;
  flex-shrink: 0;
  background: white;
  border-left: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 15px;
}
#editor-icon-rail .rail-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#editor-icon-rail li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px 4px;
  margin: 0 6px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-soft);
}
#editor-icon-rail li .rail-label {
  font-size: 10px;
  text-align: center;
}
#editor-icon-rail li:hover {
  background: var(--stone);
}
#editor-icon-rail li.active {
  background: var(--clay-tint);
  color: var(--clay-dark);
}
#editor-icon-rail .rail-divider-item {
  margin-top: 10px;
  padding-top: 15px;
  border-top: 1px solid var(--stone-line);
}
#right-sidebar {
  position: relative;
}
.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.category-grid .category-row {
  flex-direction: column;
  text-align: center;
  border: 1px solid var(--stone-line);
  border-radius: 8px;
  padding: 12px 8px;
  margin-bottom: 0;
}
.category-grid .category-row:hover {
  background: var(--stone);
}
.category-grid .category-row .category-thumb {
  margin: 0 0 6px;
}
.asset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.asset-tile {
  position: relative;
  border: 1px solid var(--stone-line);
  overflow: hidden;
  aspect-ratio: 1;
  margin-bottom: 0 !important;
}
.asset-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.asset-tile:hover {
  border-color: var(--clay);
}
.asset-selected-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  color: var(--clay-dark);
  background: var(--white);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  box-shadow: var(--shadow);
}
/* ------------------------------------------------------------------ */
/* Beeldenbank filters in the image sidebar                            */
/* ------------------------------------------------------------------ */
/* The most specific keyword the AI is confident about, printed on the tile
   so a filtered grid explains itself without opening the panel. */
.bb-asset-badge {
  position: absolute;
  left: 4px;
  bottom: 4px;
  max-width: calc(100% - 8px);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(46, 42, 34, 0.82);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bb-filter-toggle {
  position: relative;
  color: var(--ink-soft);
  border: 0;
  background: transparent;
}
.bb-filter-toggle .material-icons {
  font-size: 20px;
}
.bb-filter-toggle.active {
  color: var(--clay);
}
.bb-filter-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--clay);
  color: var(--white);
  font-size: 9px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
}
.bb-filter-panel {
  border: 1px solid var(--stone-line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--white);
}
.bb-filter-block + .bb-filter-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--paper);
}
.bb-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.bb-filter-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bb-filter-value {
  font-size: 11px;
  font-weight: 800;
  color: var(--clay);
}
/* Elk / Alle - whether picked colours are OR-ed or AND-ed. */
.bb-filter-mode {
  display: inline-flex;
  border-radius: 999px;
  background: var(--paper);
  padding: 2px;
}
.bb-filter-mode button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
}
.bb-filter-mode button.active {
  background: var(--clay);
  color: var(--white);
}
.bb-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bb-swatch-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  padding: 0;
  /* The ring sits outside the swatch so it never covers the colour itself. */
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.12s ease;
}
.bb-swatch-btn.active {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--clay);
}
.bb-filter-range {
  width: 100%;
  accent-color: var(--clay);
}
.bb-tag-group + .bb-tag-group {
  margin-top: 6px;
}
.bb-tag-group-head {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 3px 0;
}
.bb-tag-caret {
  font-size: 16px;
  color: var(--ink-faint);
  transition: transform 0.12s ease;
}
.bb-tag-caret.collapsed {
  transform: rotate(-90deg);
}
.bb-tag-group-label {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.bb-tag-group-count {
  font-size: 10.5px;
  color: var(--ink-faint);
}
.bb-tag-list {
  padding-left: 18px;
}
.bb-tag-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  cursor: pointer;
  margin: 0;
}
.bb-tag-check {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid var(--stone-line);
  background: var(--white);
  flex-shrink: 0;
  position: relative;
}
.bb-tag-check.checked {
  background: var(--clay);
  border-color: var(--clay);
}
.bb-tag-check.checked:after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 7px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bb-tag-name {
  flex: 1;
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: capitalize;
}
.bb-tag-count {
  font-size: 10.5px;
  color: var(--ink-faint);
}
.bb-filter-clear {
  margin-top: 10px;
  border: 0;
  background: transparent;
  padding: 4px 0;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--clay);
  cursor: pointer;
}
#right-sidebar .sidebar-inner {
  height: 100%;
  background: var(--white);
  border-left: 1px solid #e5e7eb;
  overflow-y: auto;
  padding: 16px;
  width: 352px;
  overflow-x: hidden;
}
#right-sidebar .sidebar-inner .accordion-header {
  background-color: var(--bs-accordion-color);
  border-radius: 4px;
}
#right-sidebar .sidebar-inner .accordion-item {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#right-sidebar .sidebar-inner .accordion-button {
  background-color: transparent;
  color: #fff;
  font-weight: 600;
  padding: 15px 20px;
}
#right-sidebar .sidebar-inner .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: #fff;
  box-shadow: none;
}
#right-sidebar .sidebar-inner .accordion-button::after {
  filter: invert(1);
}
#right-sidebar .sidebar-inner .accordion-body {
  padding: 15px 20px;
  color: var(--bs-accordion-color);
}
#right-sidebar .sidebar-inner .category-row:hover {
  cursor: pointer;
}
#right-sidebar .sidebar-inner .category-row:not(:last-child):after {
  border-bottom: 1px solid var(--stone-line);
  content: "";
  display: block;
}
#main-menu {
  display: none !important;
}
@media (max-width: 768px) {
  .bottom-content {
    margin-right: initial;
  }
  .navbar-custom.editor-chrome {
    height: auto;
    flex-shrink: 0;
    padding: 0;
    align-items: stretch;
  }
  .navbar-left {
    display: none;
  }
  #menu-wrapper > * {
    height: auto;
    padding: 5px;
  }
  #generalPrintShopBuilder {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
  }
  .content-section#editor {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
  #interface-container {
    padding-bottom: 62px;
  }
  #interface-container .interface-body {
    height: auto !important;
    flex: 1 1 auto;
    min-height: 0;
  }
  #interface-container .interface-body #contentArea {
    bottom: 0 !important;
  }
  #canvasAreaWrapper {
    overflow: auto !important;
  }
  #editor-sidebar-region {
    pointer-events: none;
  }
  .canvas-settings-overlay {
    width: auto;
    right: 8px;
    max-width: 340px;
  }
  #editor-icon-rail {
    pointer-events: auto;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 62px;
    flex-direction: row;
    border-left: none;
    border-top: 1px solid #e5e7eb;
    padding-top: 0;
    z-index: 399;
  }
  #editor-icon-rail .rail-actions {
    flex-direction: row;
    height: 100%;
    width: 100%;
    gap: 0;
  }
  #editor-icon-rail li {
    flex: 1;
    height: 100%;
    justify-content: center;
    margin: 0;
    border-radius: 0;
  }
  #right-sidebar {
    position: fixed;
    pointer-events: auto;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 68vh;
    max-height: 68dvh;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 34px rgba(33, 31, 26, 0.2);
    z-index: 401;
    transform: translateY(100%);
    transition: transform 0.18s ease-out;
    display: flex;
    flex-direction: column;
  }
  #right-sidebar.sheet-open {
    transform: translateY(0);
  }
  #right-sidebar .sidebar-inner {
    width: 100%;
    border-left: none;
    padding: 8px 18px 22px;
  }
  #right-sidebar .sidebar-inner::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--stone-line);
    margin: 2px auto 12px;
  }
  .mobile-sheet-backdrop {
    position: fixed;
    pointer-events: auto;
    inset: 0;
    background: rgba(33, 31, 26, 0.32);
    z-index: 400;
  }
  #right-sidebar .color-picker-wrapper {
    top: auto !important;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    max-height: 80vh;
    max-height: 80dvh;
    overflow-y: auto;
    border-radius: 18px 18px 0 0;
    z-index: 402;
    box-sizing: border-box;
  }
  #right-sidebar .color-picker-backdrop {
    z-index: 401;
  }
  #layer-mini-toolbar {
    pointer-events: auto;
  }
  #bottom-bar.editor-chrome {
    height: 65px;
    padding: 5px 10px;
    justify-content: center;
    z-index: 398;
  }
  #bottom-bar.editor-chrome .bottom-bar-start {
    display: none;
  }
  #bottom-bar.editor-chrome .page-switcher .thumbnails {
    height: 44px;
  }
  #bottom-bar.editor-chrome .bottom-zoom-container {
    width: auto;
    flex-shrink: 0;
  }
  #bottom-bar.editor-chrome .bottom-zoom-container .zoom-window {
    margin-right: 0;
  }
  .mobile-topbar-component {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .mobile-topbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
  }
  .mobile-topbar-identity {
    height: 54px;
    gap: 10px;
  }
  .mobile-topbar-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: contain;
  }
  .mobile-topbar-identity .design-title-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    background: var(--stone);
    border-radius: 9px;
    padding: 6px 10px;
    cursor: pointer;
  }
  .mobile-topbar-identity .design-title-wrapper .design-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-topbar-identity .design-title-wrapper .edit-icon {
    font-size: 14px;
    flex-shrink: 0;
    color: #6B6555;
  }
  .mobile-topbar-identity .design-title-wrapper .design-title-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
  }
  .mobile-topbar-identity .design-title-wrapper .design-title-input:focus {
    outline: none;
  }
  .mobile-topbar-kebab {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    color: #6B6555;
  }
  .mobile-topbar-kebab .dropdown-menu {
    top: 38px;
    right: 0;
    left: auto;
  }
  .mobile-topbar-actions {
    height: 48px;
    border-top: 1px solid var(--stone-line);
    overflow-x: auto;
    gap: 6px;
    padding: 0 10px;
  }
  .mobile-topbar-actions .btn-pill-outline.neutral {
    border-color: var(--stone-line);
    color: #6B6555;
  }
  .mobile-topbar-actions .btn-pill-outline.neutral:hover {
    background: var(--stone);
  }
  .mobile-topbar-actions .btn-pill-outline, .mobile-topbar-actions .btn-pill-outline.neutral, .mobile-topbar-actions .btn-pill-filled {
    flex-shrink: 0;
    min-width: max-content;
    padding: 7px 12px;
    font-size: 13px;
  }
  .mobile-topbar-actions .btn-pill-outline, .mobile-topbar-actions .btn-pill-outline.neutral {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  .mobile-topbar-actions .btn-pill-outline .material-icons, .mobile-topbar-actions .btn-pill-outline.neutral .material-icons {
    font-size: 14px;
  }
  .mobile-topbar-spacer {
    flex: 1;
  }
  .moveable-control-box .moveable-control::before, .moveable-control-box .moveable-rotation-control::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 50%;
  }
  .moveable-control-box .moveable-control, .moveable-control-box .moveable-rotation, .moveable-control-box .moveable-rotation-control {
    overflow: visible;
  }
  body #element-floating-toolbar {
    gap: 8px;
    padding: 6px 10px;
  }
  body #element-floating-toolbar .btn-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  body #element-floating-toolbar .btn-icon .material-icons {
    font-size: 22px;
  }
  body #element-floating-toolbar .btn-icon svg {
    width: 20px;
    height: 20px;
  }
  body #element-floating-toolbar .btn-icon-edit {
    color: var(--clay);
  }
  body #element-floating-toolbar .btn-icon-edit:hover, body #element-floating-toolbar .btn-icon-edit:active {
    background: var(--stone);
  }
  body #element-floating-toolbar .toolbar-divider {
    height: 24px;
    margin: 0;
  }
  #mobile-edit-toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--drk-keyboard-inset, 0px);
    z-index: 404;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--white);
    border-top: 1px solid var(--stone-line);
    box-shadow: 0 -8px 24px rgba(33, 31, 26, 0.16);
  }
  #mobile-edit-toolbar::-webkit-scrollbar {
    display: none;
  }
  .met-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding: 2px;
    border-radius: 14px;
    background: var(--paper);
  }
  .met-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--ink-soft);
  }
  .met-btn .material-icons {
    font-size: 22px;
  }
  .met-btn.active {
    background: var(--white);
    color: var(--clay);
    box-shadow: 0 1px 3px rgba(33, 31, 26, 0.16);
  }
  .met-size-value {
    min-width: 28px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    flex-shrink: 0;
  }
  .met-done {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: var(--clay);
    color: var(--white);
  }
  .met-done .material-icons {
    font-size: 22px;
  }
  .met-done:active {
    background: var(--clay-dark);
  }
}
.add-text-btn {
  background-color: var(--clay);
  border: none;
  font-weight: 600;
  padding: 12px;
  font-size: 14px !important;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--white);
  width: 100%;
}
.add-text-btn:hover {
  background-color: var(--clay-dark);
  color: var(--white);
}
#contextual-text-settings {
  margin-top: 10px;
}
#contextual-text-settings #text-editor-toolbar {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#contextual-text-settings #text-editor-toolbar .toolbar-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 10px 0;
}
#contextual-text-settings #text-editor-toolbar .toolbar-row:first-child {
  padding-top: 0;
}
#contextual-text-settings #text-editor-toolbar .toolbar-row .form-control {
  background: white;
}
#contextual-text-settings #text-editor-toolbar .toolbar-row .form-control input {
  height: 42px;
  line-height: 42px;
}
#contextual-text-settings #text-editor-toolbar .toolbar-row label {
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: var(--charcoal-soft);
  margin-bottom: 8px;
}
#contextual-text-settings #text-editor-toolbar .toolbar-row .control-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
#contextual-text-settings #text-editor-toolbar .text-content-field {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--stone-line);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--charcoal-soft);
  background: white;
  resize: vertical;
  min-height: 60px;
}
#contextual-text-settings #text-editor-toolbar .text-content-field:focus {
  outline: none;
  border-color: var(--clay);
}
#contextual-text-settings #text-editor-toolbar .text-content-field:disabled {
  background: var(--cream);
  color: var(--ink-faint);
  cursor: not-allowed;
}
#contextual-text-settings #text-editor-toolbar .toolbar-row-hint {
  font-weight: 400;
  color: var(--ink-faint);
}
#contextual-text-settings #text-editor-toolbar .toolbar-select {
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  border: 1px solid var(--stone-line);
  border-radius: 8px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--charcoal-soft);
  background: white;
  cursor: pointer;
}
#contextual-text-settings #text-editor-toolbar .toolbar-select:focus {
  outline: none;
  border-color: var(--clay);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector {
  display: block;
  position: relative;
  background: transparent;
  z-index: 20;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector:has(.font-select.open) {
  z-index: 30;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select {
  position: relative;
  width: 100%;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 8px 0 11px;
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-radius-s);
  background: var(--sb-surface);
  color: var(--sb-ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-trigger span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-trigger .chevron {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--sb-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-trigger:hover {
  background: var(--sb-surface-2);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-trigger:focus-visible {
  outline: 0;
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 3px var(--sb-accent-soft);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select.open .font-select-trigger {
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 3px var(--sb-accent-soft);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select.open .font-select-trigger .chevron {
  transform: rotate(180deg);
  color: var(--sb-accent-ink);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: auto;
  z-index: 100;
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0 0 6px;
  background: var(--sb-surface);
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-radius);
  box-shadow: 0 18px 40px -14px rgba(43, 37, 33, 0.35), 0 2px 6px rgba(43, 37, 33, 0.06);
  animation: sb-font-panel-in 0.14s ease-out;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-line-strong) transparent;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-panel::-webkit-scrollbar {
  width: 8px;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-panel::-webkit-scrollbar-track {
  background: transparent;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-panel::-webkit-scrollbar-thumb {
  background: var(--sb-line-strong);
  border: 2px solid var(--sb-surface);
  border-radius: 8px;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 8px 0;
  background: var(--sb-surface);
  border-bottom: 1px solid var(--sb-line);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-search > .material-icons {
  position: absolute;
  left: 9px;
  font-size: 18px;
  color: var(--sb-muted);
  pointer-events: none;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-search input {
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0 32px 0 33px;
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-radius-s);
  background: var(--sb-surface-2);
  color: var(--sb-ink);
  font-family: var(--sb-font);
  font-size: 13px;
  box-shadow: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-search input::placeholder {
  color: var(--sb-muted);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-search input:focus {
  outline: 0;
  background: var(--sb-surface);
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 3px var(--sb-accent-soft);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-search-clear {
  position: absolute;
  right: 4px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sb-muted);
  cursor: pointer;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-search-clear .material-icons {
  font-size: 16px;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-search-clear:hover {
  background: var(--sb-surface-3);
  color: var(--sb-ink);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 0 9px;
  background: var(--sb-surface);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-more {
  padding: 10px 12px 4px;
  font-size: 12px;
  color: var(--sb-muted);
  text-align: center;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-cat-chip {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--sb-line-strong);
  border-radius: 999px;
  background: var(--sb-surface-2);
  color: var(--sb-ink-2);
  font-family: var(--sb-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-cat-chip:hover {
  background: var(--sb-surface-3);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-cat-chip:focus-visible {
  outline: 0;
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 3px var(--sb-accent-soft);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-cat-chip.on {
  background: var(--sb-accent-soft);
  border-color: var(--sb-accent);
  color: var(--sb-accent-ink);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 4px;
  font-family: var(--sb-font);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sb-muted);
  background: transparent;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sb-line);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  margin: 0 6px;
  padding: 0 8px 0 10px;
  border-radius: var(--sb-radius-s);
  color: var(--sb-ink);
  cursor: pointer;
  transition: background 0.1s ease;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-option:hover {
  background: var(--sb-surface-2);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-option.selected {
  background: var(--sb-accent-soft);
  color: var(--sb-accent-ink);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-option .font-select-option-label {
  font-size: 17px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-option img {
  max-height: 18px;
  width: auto;
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-option .check {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--sb-accent);
}
#contextual-text-settings #text-editor-toolbar #dynamic-font-selector .font-select-empty {
  padding: 16px 12px;
  font-size: 12.5px;
  color: var(--sb-muted);
  text-align: center;
}
#contextual-text-settings #text-editor-toolbar .stepper-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  border-radius: 9px;
  border: 1px solid var(--stone-line);
  background: var(--white);
  padding: 0 6px;
}
#contextual-text-settings #text-editor-toolbar .stepper-container .stepper-btn {
  background: transparent;
  border: none;
  color: var(--ink);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
#contextual-text-settings #text-editor-toolbar .stepper-container .stepper-btn:hover {
  background: var(--stone);
}
#contextual-text-settings #text-editor-toolbar .stepper-container .stepper-btn span {
  font-size: 18px;
  height: auto;
  line-height: 1;
  padding: 0;
}
#contextual-text-settings #text-editor-toolbar .stepper-container .font-size-value {
  flex: 1;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
#contextual-text-settings #text-editor-toolbar .toggle-color-picker {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--stone-line);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
#contextual-text-settings #text-editor-toolbar .color-hex-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
#contextual-text-settings #text-editor-toolbar .alignTextContainer, #contextual-text-settings #text-editor-toolbar .fontOptionsContainer {
  display: flex;
  gap: 8px;
  padding: 0;
  list-style: none;
  margin: 0;
}
#contextual-text-settings #text-editor-toolbar .alignTextContainer li, #contextual-text-settings #text-editor-toolbar .fontOptionsContainer li {
  flex: 0 0 auto;
}
#contextual-text-settings #text-editor-toolbar .alignTextContainer li a, #contextual-text-settings #text-editor-toolbar .fontOptionsContainer li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--stone-line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
}
#contextual-text-settings #text-editor-toolbar .alignTextContainer li a span, #contextual-text-settings #text-editor-toolbar .fontOptionsContainer li a span {
  font-size: 18px;
}
#contextual-text-settings #text-editor-toolbar .alignTextContainer li a:hover, #contextual-text-settings #text-editor-toolbar .fontOptionsContainer li a:hover {
  background: var(--stone);
}
#contextual-text-settings #text-editor-toolbar .alignTextContainer li a.active, #contextual-text-settings #text-editor-toolbar .fontOptionsContainer li a.active {
  background: var(--clay-tint);
  border-color: var(--clay);
  color: var(--clay-dark);
}
#right-sidebar .accordion-button {
  background: var(--charcoal);
  color: var(--cream);
}
#right-sidebar .accordion-item {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
  border-radius: 6px;
}
#right-sidebar .accordion-body {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
#right-sidebar .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--bs-accordion-color);
}
#right-sidebar .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
}
#collapseSettings .settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 14px;
}
#collapseSettings .settings-toggle-row .form-check-input {
  width: 40px;
  height: 22px;
  cursor: pointer;
  background-color: var(--stone);
  border-color: var(--stone-line);
}
#collapseSettings .settings-toggle-row .form-check-input:checked {
  background-color: var(--clay);
  border-color: var(--clay);
}
#collapseSettings .settings-toggle-row .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(16, 110, 129, 0.25);
  border-color: var(--clay);
}
#collapseSettings .settings-toggle-row .form-check-label {
  cursor: pointer;
}
/* Floating mini toolbar (left of sidebar) */
#layer-mini-toolbar {
  position: absolute;
  left: -56px;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#layer-mini-toolbar .btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--white);
  color: var(--charcoal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
#layer-mini-toolbar .btn-icon.danger {
  background: #ffebee;
  color: #c62828;
}
/* Floating toolbar attached directly to the selected element (position:fixed,
   computed from its live bounding rect in getFloatingToolbarStyle()). Re-skinned
   to match the mockup exactly: a white pill (not a dark tooltip-style bubble
   with a pointer arrow - the mockup has no connecting arrow to the selection
   at all), circular buttons, and a divider before the destructive delete
   action, whose icon is tinted even at rest (not just on hover). */
/* Rubber-band selection (canvaskit/multi-selection.js). The box is drawn in
   screen space on <body>; outlines, the group box and its toolbar live in the
   zoomed canvas host, with border widths and toolbar scale set inline. */
.canvaskit-marquee {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  background: rgba(16, 110, 129, 0.12);
  border: 1px solid rgba(16, 110, 129, 0.75);
  border-radius: 2px;
}
.canvaskit-multi-outline {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  border: 1.5px solid var(--clay);
  z-index: 20;
}
.canvaskit-multi-box {
  position: absolute;
  box-sizing: border-box;
  border: 1px dashed var(--clay);
  background: rgba(16, 110, 129, 0.04);
  cursor: move;
  touch-action: none;
  z-index: 21;
}
.canvaskit-multi-toolbar {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 6px 6px 14px;
  background: var(--white);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(33, 31, 26, 0.2);
  z-index: 9999;
  white-space: nowrap;
}
.canvaskit-multi-toolbar .canvaskit-multi-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  padding-right: 6px;
}
.canvaskit-multi-toolbar .toolbar-divider {
  width: 1px;
  height: 18px;
  background: var(--stone-line);
  margin: 0 2px;
}
.canvaskit-multi-toolbar .btn-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
}
.canvaskit-multi-toolbar .btn-icon .material-icons {
  font-size: 19px;
}
.canvaskit-multi-toolbar .btn-icon:hover {
  background: var(--stone);
}
.canvaskit-multi-toolbar .btn-icon.danger {
  color: #e94840;
}
.canvaskit-multi-toolbar .btn-icon.toggle.active {
  background: var(--clay-soft, #dbe9ec);
  color: var(--clay, #106E81);
}
/* "Naar Memoria" send dialog (drukwerk.js SendToMemoria(), SweetAlert). */
.memoria-form {
  text-align: left;
  font-size: 14px;
}
.memoria-form label {
  display: block;
  font-weight: 700;
  margin: 14px 0 0;
  color: var(--ink);
}
.memoria-form .swal2-input {
  margin: 6px 0 0;
  width: 100%;
  max-width: none;
  height: 42px;
  font-size: 15px;
}
.memoria-form .memoria-intro {
  margin: 0 0 4px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.memoria-form .memoria-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.memoria-form .memoria-previous {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.memoria-form a {
  color: var(--clay);
  font-weight: 700;
}
#element-floating-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  background: var(--white);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(33, 31, 26, 0.2);
  z-index: 9999;
}
#element-floating-toolbar .toolbar-divider {
  width: 1px;
  height: 18px;
  background: var(--stone-line);
  margin: 0 2px;
}
#element-floating-toolbar .btn-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
#element-floating-toolbar .btn-icon .material-icons {
  font-size: 18px;
}
#element-floating-toolbar .btn-icon:hover {
  background: var(--stone);
}
#element-floating-toolbar .btn-icon.danger {
  color: #087595;
}
#element-floating-toolbar .btn-icon.danger:hover {
  background: rgba(8, 117, 149, 0.12);
}
/* Bottom Bar */
#bottom-bar.interface-footer.editor-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}
#bottom-bar.interface-footer.editor-chrome .bottom-zoom-container {
  display: flex;
  width: 436px;
  justify-content: flex-end;
  align-items: center;
}
#bottom-bar.interface-footer.editor-chrome .bottom-zoom-container .zoom-window {
  height: 36px;
  background: white;
  border-radius: 999px;
  line-height: 36px;
  margin-right: 20px;
  z-index: 900;
  flex-shrink: 0;
}
#bottom-bar.interface-footer.editor-chrome .bottom-zoom-container .zoom-window .footer-action {
  opacity: 0.5;
}
#bottom-bar.interface-footer.editor-chrome .bottom-zoom-container .zoom-window .numberZoom {
  font-size: 16px;
  font-weight: 900;
}
#bottom-bar.interface-footer.editor-chrome > .bottom-content {
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin-right: 210px;
}
@media (min-width: 769px) {
  #interface-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
  }
  #interface-container .interface-body {
    display: contents;
  }
  #interface-container #editor-sidebar-region {
    grid-column: 2;
    grid-row: 1 / span 2;
    height: auto;
    min-height: 0;
  }
  #interface-container .interface-body #contentArea {
    grid-column: 1;
    grid-row: 1;
    height: auto !important;
    min-width: 0;
    min-height: 0;
  }
  #interface-container #bottom-bar {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    min-width: 0;
  }
  .canvas-settings-overlay {
    top: auto;
    bottom: 8px;
    max-height: calc(100% - 16px);
  }
  #bottom-bar.interface-footer.editor-chrome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    padding: 0 14px;
  }
  #bottom-bar.interface-footer.editor-chrome .bottom-bar-start {
    justify-self: start;
  }
  #bottom-bar.interface-footer.editor-chrome > .bottom-content {
    margin-right: 0;
    min-width: 0;
  }
  #bottom-bar.interface-footer.editor-chrome .bottom-zoom-container {
    width: auto;
    justify-self: end;
    gap: 6px;
  }
  #bottom-bar.interface-footer.editor-chrome .bottom-zoom-container .zoom-window {
    display: inline-flex;
    align-items: center;
    height: 36px;
    margin-right: 0;
    padding: 2px;
    border-radius: 10px;
    background: #EFE8DC;
    line-height: 1;
  }
  #bottom-bar.interface-footer.editor-chrome .bottom-zoom-container .zoom-window > * {
    float: none;
    padding: 0;
    height: 32px;
    line-height: 32px;
  }
  #bottom-bar.interface-footer.editor-chrome .bottom-zoom-container .zoom-window .footer-action {
    width: 32px;
    border-radius: 8px;
    font-size: 19px;
    color: #6B6555;
    opacity: 1;
    cursor: pointer;
  }
  #bottom-bar.interface-footer.editor-chrome .bottom-zoom-container .zoom-window .footer-action:hover {
    background: #fff;
    color: #2E2A22;
  }
  #bottom-bar.interface-footer.editor-chrome .bottom-zoom-container .zoom-window .footer-action:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 1px;
  }
  #bottom-bar.interface-footer.editor-chrome .bottom-zoom-container .zoom-window .numberZoom {
    width: 52px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #2E2A22;
  }
  .bb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: none;
    font-size: 12.5px;
    font-weight: 600;
    color: #6B6555;
    white-space: nowrap;
    cursor: pointer;
  }
  .bb-btn .material-icons {
    font-size: 18px;
  }
  .bb-btn:hover, .bb-btn.open {
    background: #EFE8DC;
    color: #2E2A22;
  }
  .bb-btn:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 1px;
  }
}
@media (min-width: 769px) and (max-width: 1180px) {
  .bb-btn .bb-btn-label {
    display: none;
  }
}
@media (max-width: 768px) {
  #bottom-bar .bb-fit {
    display: none;
  }
}
.zoom-window > button.footer-action {
  border: 0;
  background: none;
  color: inherit;
}
#bottom-bar .page-switcher .thumbnails {
  list-style: none;
  padding: 0;
  margin: 0;
}
#bottom-bar .page-switcher .thumbnails li {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--cream);
  color: var(--ink);
  margin-right: 8px;
  cursor: pointer;
}
#bottom-bar .page-switcher .thumbnails li.active {
  background: var(--clay);
  color: var(--white);
}
#bottom-bar .cta .btn-primary {
  background: var(--clay);
  border-color: var(--clay);
}
/* Sidebar Sub-Navigation */
.sidebar-sub-nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--charcoal);
}
.sidebar-sub-nav .btn-dark {
  background: transparent;
  border: none;
  color: var(--stone);
  font-size: 13px;
  font-weight: 500;
  padding: 10px;
  transition: all 0.2s;
}
.sidebar-sub-nav .btn-dark:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
}
.sidebar-sub-nav .btn-dark.active {
  color: var(--white);
  background: var(--charcoal-soft);
  box-shadow: inset 0 -2px 0 var(--clay);
}
/* Layer list styles in dark sidebar */
.item-layer {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.2s;
}
.item-layer:hover {
  background: rgba(255, 255, 255, 0.08);
}
.item-layer .layer-type figure img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 2px;
  background: #fff;
}
.item-layer .layer-content {
  flex: 1;
  margin-left: 10px;
  font-size: 12px;
  color: var(--stone);
}
.item-layer .layer-actions .material-icons {
  font-size: 18px;
  color: var(--stone);
}
.item-layer .layer-actions .material-icons:hover {
  color: #ef4444;
}
.item-layer {
  background: transparent;
  box-shadow: none;
  margin: 0;
  height: auto;
  color: var(--ink);
}
.item-layer:hover {
  background: var(--stone);
}
.item-layer.active {
  background: var(--clay-tint);
}
.item-layer .layer-content {
  color: var(--ink);
}
.item-layer .layer-content-image {
  display: flex;
  align-items: center;
  gap: 8px;
}
.item-layer .layer-thumb {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--stone-line);
  flex-shrink: 0;
  background: var(--stone);
}
.item-layer .layer-actions .material-icons {
  color: var(--ink-faint);
}
.item-layer .drag-handle {
  color: var(--ink-faint);
  font-size: 18px;
  cursor: grab;
}
.item-layer .visibility-icon {
  font-size: 18px;
  margin-right: 4px;
}
.printing-image-cropper-component {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.printing-image-cropper-component > * {
  position: relative;
}
.printing-image-cropper-component:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}
/* "Slimme Drukkleur-picker" (colorpicker.component.js) - dual Scherm(RGB)/
   Drukwerk(CMYK) preview popover. .sidebar-inner has overflow-y:auto, which
   per spec also computes overflow-x to a clipping value (not visible) - the
   same issue already hit and fixed for #layer-mini-toolbar. An absolutely-
   positioned popover nested inside .sidebar-inner gets clipped to its 260px
   box no matter how it's sized. position:fixed escapes that clipping (its
   containing block is the viewport, not .sidebar-inner) and, as a side
   effect, lets the popover spill left over the icon rail for extra width.

   Stacking bug this replaces: the previous version's backdrop-less shell
   sat at z-index:1000 (nowhere near #right-sidebar's own stacking tier -
   see .uitleg-tour-root's comment above, which already anticipated this
   popover living at the SAME tier as that 999999) with pointer-events:none
   and no click-outside handling at all, so the popover could render behind
   the canvas/sidebar and had no backdrop to close it. Rule now: the
   backdrop sits exactly one z-index below the popover, and both sit above
   every panel in the app. 1000001 deliberately ties with .uitleg-tour-root
   itself (see that rule's comment) - the two are never expected to show at
   once. */
#right-sidebar .color-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  background: transparent;
}
#right-sidebar .color-picker-wrapper {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 270px;
  right: 0;
  width: 436px;
  max-height: calc(100vh - 270px - 24px);
  box-sizing: border-box;
  z-index: 1000001;
  background: var(--white);
  border: 1px solid var(--stone-line);
  box-shadow: 0 12px 32px rgba(33, 31, 26, 0.22);
  border-radius: 14px;
  overflow: hidden;
  color: var(--ink);
}
#right-sidebar .color-picker-wrapper .vignette-actions-header {
  flex-shrink: 0;
  padding: 15px 16px 13px;
  border-bottom: 1px solid var(--stone-line);
}
#right-sidebar .color-picker-wrapper .vignette-actions-header h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
#right-sidebar .color-picker-wrapper .vignette-actions-header .material-icons {
  font-size: 16px;
  cursor: pointer;
  color: var(--ink-soft);
}
#right-sidebar .color-picker-wrapper .color-picker-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 18px;
}
#right-sidebar .color-picker-wrapper .color-preview-row {
  display: flex;
  gap: 10px;
}
#right-sidebar .color-picker-wrapper .color-preview-card {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--stone-line);
  border-radius: 11px;
  padding: 10px;
  background: var(--paper);
}
#right-sidebar .color-picker-wrapper .color-preview-card.warn {
  border-color: var(--clay);
}
#right-sidebar .color-picker-wrapper .color-preview-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
#right-sidebar .color-picker-wrapper .color-preview-swatch {
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--stone-line);
  margin-bottom: 7px;
}
#right-sidebar .color-picker-wrapper .color-preview-hex {
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#right-sidebar .color-picker-wrapper .color-gamut-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--clay-dark);
}
#right-sidebar .color-picker-wrapper .color-gamut-hint .material-icons {
  font-size: 14px;
}
#right-sidebar .color-picker-wrapper .color-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
#right-sidebar .color-picker-wrapper .color-input-wrapper .color-input-swatch {
  width: 30px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--stone-line);
  flex-shrink: 0;
}
#right-sidebar .color-picker-wrapper .color-input-wrapper .form-control {
  flex: 1;
  min-width: 0;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid var(--stone-line);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#right-sidebar .color-picker-wrapper .color-gamut-warning {
  margin-top: 12px;
  border: 1px solid var(--clay);
  background: var(--clay-tint);
  border-radius: 11px;
  padding: 11px 12px;
}
#right-sidebar .color-picker-wrapper .color-gamut-warning-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--clay-dark);
  margin-bottom: 3px;
}
#right-sidebar .color-picker-wrapper .color-gamut-warning-body {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
#right-sidebar .color-picker-wrapper .color-gamut-warning-actions {
  display: flex;
  gap: 7px;
}
#right-sidebar .color-picker-wrapper .color-gamut-warning-actions button {
  flex: 1;
  height: 32px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
#right-sidebar .color-picker-wrapper .color-gamut-warning-actions .btn-gamut-primary {
  border: none;
  background: var(--clay);
  color: var(--white);
}
#right-sidebar .color-picker-wrapper .color-gamut-warning-actions .btn-gamut-primary:hover {
  background: var(--clay-dark);
}
#right-sidebar .color-picker-wrapper .color-gamut-warning-actions .btn-gamut-secondary {
  border: 1px solid var(--stone-line);
  background: var(--white);
  color: var(--ink-soft);
}
#right-sidebar .color-picker-wrapper .color-gamut-warning-actions .btn-gamut-secondary:hover {
  background: var(--paper);
}
#right-sidebar .color-picker-wrapper .color-tabs {
  display: flex;
  gap: 2px;
  margin-top: 14px;
  border-bottom: 1px solid var(--stone-line);
}
#right-sidebar .color-picker-wrapper .color-tab {
  flex: 1;
  text-align: center;
  padding: 8px 4px 9px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
#right-sidebar .color-picker-wrapper .color-tab.active {
  color: var(--clay-dark);
  border-bottom-color: var(--clay);
}
#right-sidebar .color-picker-wrapper .swatch-section {
  margin-top: 14px;
}
#right-sidebar .color-picker-wrapper .print-safe-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 11px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
#right-sidebar .color-picker-wrapper .toggle-track {
  width: 34px;
  height: 19px;
  border-radius: 999px;
  flex-shrink: 0;
  position: relative;
  background: var(--stone);
  transition: background 0.15s;
}
#right-sidebar .color-picker-wrapper .toggle-track.on {
  background: var(--clay);
}
#right-sidebar .color-picker-wrapper .toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--white);
  transition: left 0.15s;
}
#right-sidebar .color-picker-wrapper .toggle-track.on .toggle-knob {
  left: 17px;
}
#right-sidebar .color-picker-wrapper .swatch-empty {
  padding: 18px 4px;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-soft);
}
#right-sidebar .color-picker-wrapper .swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}
#right-sidebar .color-picker-wrapper .colorcell-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
#right-sidebar .color-picker-wrapper .colorcell {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 7px;
  border: 1.5px solid rgba(33, 31, 26, 0.15);
}
#right-sidebar .color-picker-wrapper .colorcell-wrap.selected .colorcell {
  border: 2px solid var(--clay);
  box-shadow: 0 0 0 2px rgba(16, 110, 129, 0.22);
}
#right-sidebar .color-picker-wrapper .gamut-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clay);
  border: 1.5px solid var(--white);
}
#right-sidebar .color-picker-wrapper .eigen-pipet-row {
  margin-top: 12px;
}
#right-sidebar .color-picker-wrapper .btn-pipet {
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  border-radius: 9px;
  border: 1px solid var(--stone-line);
  background: var(--white);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
#right-sidebar .color-picker-wrapper .btn-pipet .material-icons {
  font-size: 15px;
}
#right-sidebar .color-picker-wrapper .btn-pipet:hover {
  border-color: var(--clay);
  color: var(--clay-dark);
}
#right-sidebar .color-picker-wrapper .custom-color-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
#right-sidebar .color-picker-wrapper .color-picker-footer {
  flex-shrink: 0;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--stone-line);
}
#right-sidebar .color-picker-wrapper .color-picker-footer .btn {
  width: 100%;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: var(--clay);
  color: var(--white);
  font-weight: 600;
  font-size: 13px;
}
#right-sidebar .color-picker-wrapper .color-picker-footer .btn:hover {
  background: var(--clay-dark);
}
/* -------------------------------------------------------------------------
   "AI-verbetering" (images.sidebar.component.js) - trigger button beneath
   the Afbeelding icon row, and its popover (gpt-image-1 edit call via
   ImageEnhanceService). Popover follows the color-picker popover above
   exactly: same fixed backdrop/wrapper z-index pair (1000000/1000001), same
   #right-sidebar-anchored sizing, so it can never be clipped by the
   flyout's own overflow:hidden and never fights the color picker for a
   stacking tier (the two are never open at the same time in practice, but
   nothing stops it structurally - matching z-indexes is fine either way).
   ------------------------------------------------------------------------- */
.ai-enhance-trigger-btn {
  width: 100%;
  margin-top: 10px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9px;
  border: 1px solid var(--clay);
  background: var(--clay-tint);
  color: var(--clay-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ai-enhance-trigger-btn .material-icons {
  font-size: 17px;
}
.ai-enhance-trigger-btn:hover {
  background: var(--clay);
  color: var(--white);
}
#right-sidebar .ai-enhance-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  background: transparent;
}
#right-sidebar .ai-enhance-wrapper {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 270px;
  right: 0;
  width: 436px;
  max-height: calc(100vh - 270px - 24px);
  box-sizing: border-box;
  z-index: 1000001;
  background: var(--white);
  border: 1px solid var(--stone-line);
  box-shadow: 0 12px 32px rgba(33, 31, 26, 0.22);
  border-radius: 14px;
  overflow: hidden;
  color: var(--ink);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px 13px;
  border-bottom: 1px solid var(--stone-line);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-header h4 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-header .material-icons {
  font-size: 16px;
  cursor: pointer;
  color: var(--ink-soft);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 18px;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-section-label:not(:first-child) {
  margin-top: 16px;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-chip {
  border: 1px solid var(--stone-line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-chip:hover {
  background: var(--stone);
  border-color: var(--clay);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 72px;
  border: 1px solid var(--stone-line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--white);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-textarea:focus {
  outline: none;
  border-color: var(--clay);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-error {
  margin-top: 10px;
  font-size: 12px;
  color: #087595;
}
/* ------------------------------------------------------------------------- */
/* AI-tegoed kopen (ai-token-shop.component.js)                              */
/* ------------------------------------------------------------------------- */
/* A dialog over everything that can ask for tokens: the AI-verbetering
   popover and the "Op de kaart" wizard both sit at 1000001. Below
   .loaderWrapper, which is allowed to cover it. */
.ai-shop-root {
  position: fixed;
  inset: 0;
  z-index: 2000000;
  display: grid;
  place-items: center;
  padding: 16px;
  font-family: "Nunito", "Work Sans", "Segoe UI", system-ui, sans-serif;
  color: #2B2521;
}
.ai-shop-veil {
  position: absolute;
  inset: 0;
  background: rgba(43, 37, 33, 0.45);
  backdrop-filter: blur(2px);
}
.ai-shop-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 26px 26px 22px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 70px -20px rgba(43, 37, 33, 0.55);
}
.ai-shop-panel h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: normal;
  color: #2B2521;
}
.ai-shop-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #978C82;
  cursor: pointer;
}
.ai-shop-close:hover {
  background: #F8F5F1;
  color: #2B2521;
}
.ai-shop-close .material-icons {
  font-size: 20px;
}
.ai-shop-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #106E81;
}
.ai-shop-lead {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #5E554E;
}
.ai-shop-lead strong {
  color: #2B2521;
}
.ai-shop-label {
  margin: 16px 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #978C82;
}
.ai-shop-bundles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-shop-bundle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #E6DED5;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ai-shop-bundle > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.ai-shop-bundle strong {
  font-size: 15px;
  font-weight: 800;
  color: #2B2521;
}
.ai-shop-bundle span span {
  font-size: 12px;
  color: #978C82;
}
.ai-shop-bundle .ai-shop-bundle-price {
  align-items: flex-end;
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ai-shop-bundle:hover {
  border-color: #D3C8BC;
}
.ai-shop-bundle.selected {
  border-color: #106E81;
  background: #f1f6f7;
  box-shadow: 0 0 0 3px rgba(16, 110, 129, 0.12);
}
.ai-shop-bundle:focus-visible {
  outline: 2px solid #106E81;
  outline-offset: 2px;
}
.ai-shop-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-shop-method {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1.5px solid #E6DED5;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: #2B2521;
  cursor: pointer;
}
.ai-shop-method img {
  height: 22px;
  width: auto;
}
.ai-shop-method:hover {
  border-color: #D3C8BC;
}
.ai-shop-method.selected {
  border-color: #106E81;
  background: #f1f6f7;
}
.ai-shop-method:focus-visible {
  outline: 2px solid #106E81;
  outline-offset: 2px;
}
.ai-shop-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  margin-top: 18px;
  border: 0;
  border-radius: 999px;
  background: #106E81;
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.ai-shop-pay:hover:not(:disabled) {
  background: #007BA8;
  color: #fff;
}
.ai-shop-pay:disabled {
  opacity: 0.55;
  cursor: default;
}
.ai-shop-pay:focus-visible {
  outline: 2px solid #106E81;
  outline-offset: 3px;
}
.ai-shop-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  text-align: center;
  color: #978C82;
}
.ai-shop-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #dbe9ec;
  color: #007BA8;
  font-size: 12.5px;
  font-weight: 600;
}
.ai-shop-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  font-size: 13px;
  color: #978C82;
}
.ai-shop-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 0 2px;
  text-align: center;
}
.ai-shop-state h3 {
  margin-top: 12px;
}
.ai-shop-state p {
  margin: 0;
  max-width: 320px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #5E554E;
}
.ai-shop-state .ai-shop-pay {
  max-width: 260px;
}
.ai-shop-link {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12.5px;
  font-weight: 700;
  color: #007BA8;
  text-decoration: underline;
  cursor: pointer;
}
.ai-shop-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
}
.ai-shop-mark--ok {
  background: #E1EBDD;
  color: #4F6F47;
}
.ai-shop-mark--fail {
  background: #dbe9ec;
  color: #007BA8;
}
.ai-shop-spinner {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: tb-spin 0.7s linear infinite;
}
.ai-shop-spinner--big {
  width: 44px;
  height: 44px;
  border-width: 3px;
  color: #106E81;
}
@media (prefers-reduced-motion: reduce) {
  .ai-shop-spinner {
    animation-duration: 2s;
  }
}
/* ------------------------------------------------------------------------- */
/* Tekstcontrole (proofread-panel.component.js)                              */
/* ------------------------------------------------------------------------- */
/* A panel over the sidebar, not a dialog: the card stays visible and
   clickable next to it, because the whole point is looking at the card while
   going through what was found. Above the sidebar's own popovers (1000001),
   below the AI-tegoed dialog (2000000) that it can open. */
.pr-root {
  --pr-ink: #2B2521;
  --pr-ink-2: #5E554E;
  --pr-muted: #978C82;
  --pr-line: #E6DED5;
  --pr-surface: #F8F5F1;
  --pr-accent: #106E81;
  --pr-accent-soft: #f1f6f7;
  --pr-accent-ink: #007BA8;
  font-family: "Nunito", "Work Sans", "Segoe UI", system-ui, sans-serif;
  color: var(--pr-ink);
}
.pr-panel {
  position: fixed;
  top: 60px;
  right: 0;
  bottom: 0;
  z-index: 1000010;
  width: 420px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--pr-line);
  box-shadow: -18px 0 40px -24px rgba(43, 37, 33, 0.45);
}
.pr-ring {
  position: fixed;
  z-index: 1000009;
  pointer-events: none;
  border: 2px solid var(--pr-accent);
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(16, 110, 129, 0.18);
  animation: pr-ring-in 0.25s ease-out;
}
@keyframes pr-ring-in {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.pr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--pr-line);
}
.pr-head h3 {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: normal;
  color: var(--pr-ink);
}
.pr-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-accent);
}
.pr-close {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--pr-muted);
  cursor: pointer;
}
.pr-close:hover {
  background: var(--pr-surface);
  color: var(--pr-ink);
}
.pr-close .material-icons {
  font-size: 20px;
}
.pr-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pr-ai {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: start;
  padding: 14px;
  border-radius: 14px;
  background: var(--pr-accent-soft);
  border: 1px solid #F0DDD2;
}
.pr-ai > .material-icons {
  font-size: 20px;
  color: var(--pr-accent);
  margin-top: 1px;
}
.pr-ai.done {
  background: #EEF4EB;
  border-color: #DCE8D7;
}
.pr-ai.done > .material-icons {
  color: #4F6F47;
}
.pr-ai-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  line-height: 1.4;
}
.pr-ai-main strong {
  font-size: 14px;
  font-weight: 800;
}
.pr-ai-main span {
  font-size: 12.5px;
  color: var(--pr-ink-2);
}
.pr-ai-main .pr-ai-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--pr-accent-ink);
}
.pr-ai-btn {
  grid-column: 1 / -1;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--pr-accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}
.pr-ai-btn:hover:not(:disabled) {
  background: var(--pr-accent-ink);
}
.pr-ai-btn:disabled {
  opacity: 0.65;
  cursor: progress;
}
.pr-ai.done .pr-ai-btn {
  background: #fff;
  color: var(--pr-ink);
  border: 1.5px solid #CFDDC9;
}
.pr-ai.done .pr-ai-btn:hover:not(:disabled) {
  background: #F6FAF4;
}
.pr-ai-btn:focus-visible {
  outline: 2px solid var(--pr-accent);
  outline-offset: 2px;
}
.pr-note, .pr-error {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.45;
}
.pr-note {
  background: #F6ECCB;
  color: #6F5510;
}
.pr-error {
  background: #dbe9ec;
  color: var(--pr-accent-ink);
  font-weight: 600;
}
.pr-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--pr-muted);
}
.pr-clear {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 12px;
  text-align: center;
}
.pr-clear .material-icons {
  font-size: 34px;
  color: #4F6F47;
}
.pr-clear strong {
  font-size: 14.5px;
}
.pr-clear span:not(.material-icons) {
  font-size: 12.5px;
  color: var(--pr-muted);
}
.pr-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pr-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pr-group-head .material-icons {
  font-size: 18px;
  color: var(--pr-muted);
}
.pr-group-head h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pr-ink-2);
}
.pr-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pr-surface);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  color: var(--pr-ink-2);
}
.pr-all {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 800;
  color: var(--pr-accent-ink);
  text-decoration: underline;
  cursor: pointer;
}
.pr-item {
  padding: 11px 12px;
  border: 1.5px solid var(--pr-line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.pr-item p {
  margin: 0;
}
.pr-item:hover {
  border-color: #D3C8BC;
}
.pr-item.active {
  border-color: var(--pr-accent);
  box-shadow: 0 0 0 3px rgba(16, 110, 129, 0.12);
}
.pr-item.stale {
  opacity: 0.7;
}
.pr-context {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pr-ink-2);
  word-break: break-word;
}
.pr-context mark {
  padding: 1px 3px;
  border-radius: 4px;
  background: #FBE3D6;
  color: var(--pr-accent-ink);
  font-weight: 700;
  white-space: pre-wrap;
}
.pr-message {
  margin-top: 4px !important;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--pr-muted);
}
.pr-item:not(:has(.pr-context)) .pr-message {
  margin-top: 0 !important;
  font-size: 13.5px;
  color: var(--pr-ink);
}
.pr-stale {
  margin-top: 6px !important;
  font-size: 12px;
  color: #6F5510;
}
.pr-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 9px;
}
.pr-apply {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--pr-ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-apply b {
  font-weight: 800;
  white-space: pre;
}
.pr-apply:hover {
  background: #000;
}
.pr-apply:focus-visible {
  outline: 2px solid var(--pr-accent);
  outline-offset: 2px;
}
.pr-ignore, .pr-restore {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pr-muted);
  cursor: pointer;
}
.pr-ignore:hover, .pr-restore:hover {
  color: var(--pr-ink);
  text-decoration: underline;
}
.pr-restore {
  align-self: flex-start;
}
.pr-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--pr-line);
}
.pr-foot > span {
  font-size: 11.5px;
  color: var(--pr-muted);
}
.pr-recheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  border: 1.5px solid var(--pr-line);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--pr-ink);
  cursor: pointer;
}
.pr-recheck .material-icons {
  font-size: 18px;
  color: var(--pr-accent);
}
.pr-recheck:hover:not(:disabled) {
  border-color: var(--pr-accent);
  background: var(--pr-accent-soft);
}
.pr-recheck:disabled {
  opacity: 0.6;
}
.pr-spinner {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: tb-spin 0.7s linear infinite;
}
@media (max-width: 768px) {
  .pr-panel {
    top: auto;
    left: 0;
    width: auto;
    max-height: 72dvh;
    border-left: 0;
    border-top: 1px solid var(--pr-line);
    border-radius: 18px 18px 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pr-ring {
    animation: none;
  }
  .pr-spinner {
    animation-duration: 2s;
  }
}
/* AI-tegoed: what this edit costs, and - when it cannot be paid for - where
   to fix that (ai-tokens.js). */
#right-sidebar .ai-enhance-wrapper .ai-enhance-balance {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--clay-tint);
  color: var(--clay-dark);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-balance .material-icons {
  font-size: 18px;
  flex-shrink: 0;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-balance .ai-enhance-balance-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-balance strong {
  font-size: 13px;
  font-weight: 800;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-balance span:not(.material-icons) {
  font-size: 11.5px;
  color: var(--ink-soft);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-balance .ai-enhance-balance-link {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--clay-dark);
  text-decoration: underline;
  cursor: pointer;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-balance .ai-enhance-balance-link.is-primary {
  height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--clay);
  color: var(--white);
  text-decoration: none;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-balance .ai-enhance-balance-link.is-primary:hover {
  background: var(--clay-dark);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-balance .ai-enhance-balance-link:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-balance.is-low {
  background: var(--paper);
  border: 1px solid var(--stone-line);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-confirm {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--stone-line);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-confirm .ai-enhance-confirm-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-confirm .ai-enhance-confirm-text strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-confirm .ai-enhance-confirm-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-confirm button {
  flex: 1;
  height: 36px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-confirm .ai-enhance-confirm-cancel {
  background: var(--white);
  border: 1px solid var(--stone-line);
  color: var(--ink);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-confirm .ai-enhance-confirm-cancel:hover {
  border-color: var(--clay);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-confirm .ai-enhance-confirm-ok {
  background: var(--clay);
  border: none;
  color: var(--white);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-confirm .ai-enhance-confirm-ok:hover {
  background: var(--clay-dark);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-cost {
  margin: -2px 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
/* Rate limit reached (ImageEnhanceService: 2 per 10 minutes). Deliberately
   calmer than .ai-enhance-error - nothing went wrong and there is nothing to
   fix, the user just has to wait, so this reads as information rather than
   failure. */
#right-sidebar .ai-enhance-wrapper .ai-enhance-limit {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--stone-line);
  font-size: 12px;
  color: var(--ink);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-limit .material-icons {
  font-size: 17px;
  color: var(--clay);
  flex-shrink: 0;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-limit strong {
  font-weight: 700;
  display: block;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-limit-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
/* Cooling down: every control that would only earn another 429 is inert. */
#right-sidebar .ai-enhance-wrapper .ai-enhance-chip:disabled, #right-sidebar .ai-enhance-wrapper .ai-enhance-textarea:disabled, #right-sidebar .ai-enhance-wrapper .ai-enhance-submit:disabled, #right-sidebar .ai-enhance-trigger-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-chip:disabled:hover {
  background: var(--paper);
  border-color: var(--stone-line);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-submit {
  width: 100%;
  margin-top: 14px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9px;
  border: none;
  background: var(--clay);
  color: var(--white);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-submit:hover:not(:disabled) {
  background: var(--clay-dark);
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
#right-sidebar .ai-enhance-wrapper .ai-enhance-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--white);
  animation: loaderRingSpin 0.9s linear infinite;
}
/* =========================================================================
   Image DPI check, one-click filters, and smart container cropping
   ========================================================================= */
/* --- A. Print-quality (DPI) badge -------------------------------------- */
/* Rendered by image-quality-badges.component.js as a single canvas-level
   overlay (one implementation for both rendering engines - the CanvasKit
   engine has no per-element DOM to hang a badge on). The layer is inert;
   only the badges themselves take pointer events, so a badge sitting over an
   element never blocks selecting or dragging it. */
.image-quality-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Above the artwork and the fold/grid chrome, below the selection handles
     and the floating element toolbar (z-index 7000). */
  z-index: 5000;
}
.image-quality-badge {
  pointer-events: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Exactly as wide as its one line of text. A max-width here (it was
     220px) is narrower than "Foto resolutie is te laag voor scherpe afdruk",
     and with nowrap the text then ran out of the badge - by how much
     depending on the zoom, since the badge lives inside the zoomed canvas
     and is only scaled back (transform) after layout. */
  width: max-content;
  max-width: none;
  padding: 3px 8px 3px 5px;
  border-radius: 0 0 8px 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(33, 31, 26, 0.25);
  /* 200-299 DPI: acceptable, worth flagging. Deliberately understated - it is
     information, not a blocker. */
  /* Below 200 DPI: will visibly soften in print. Persistent and spelled out
     rather than reduced to an icon. */
}
.image-quality-badge .material-icons {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}
.image-quality-badge .image-quality-label {
  flex: 0 0 auto;
}
.image-quality-badge.level-medium {
  background: #F6C453;
  color: #4A3705;
}
.image-quality-badge.level-low {
  background: #E94840;
  color: #FFFFFF;
}
/* "Dubbelklik om het masker aan te passen" under a selected masked photo
   (image-quality-badges.component.js maskHints). Information, not a control:
   it lets every click through, so a double-click on it reaches the photo. */
.image-mask-hint {
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  padding: 4px 10px 4px 7px;
  border-radius: 999px;
  background: rgba(33, 31, 26, 0.78);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(33, 31, 26, 0.25);
}
.image-mask-hint .material-icons {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}
.image-quality-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 240px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--charcoal);
  color: var(--cream);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  box-shadow: var(--shadow);
  z-index: 1;
}
.image-quality-tooltip strong {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  color: var(--white);
}
/* The same warning in the image sidebar, next to the size fields that fix it. */
.image-quality-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
}
.image-quality-notice .material-icons {
  font-size: 18px;
  flex: 0 0 auto;
}
.image-quality-notice strong {
  display: block;
  font-size: 12px;
}
.image-quality-notice .image-quality-notice-detail {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.85;
}
.image-quality-notice.level-medium {
  background: #FDF3DC;
  border: 1px solid #F0D28A;
  color: #6B5115;
}
.image-quality-notice.level-low {
  background: #FCE9E8;
  border: 1px solid #F1B4B0;
  color: #8C2620;
}
/* --- B. One-click filter presets --------------------------------------- */
/* Each swatch previews itself by applying its own CSS filter to the real
   photo, so the choice is made on the actual image. */
.image-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.image-filter-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.image-filter-swatch img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--stone);
  transition: border-color 0.15s ease;
}
.image-filter-swatch span {
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  color: var(--ink-soft);
}
.image-filter-swatch:hover img {
  border-color: var(--stone-line);
}
.image-filter-swatch.active img {
  border-color: var(--clay);
}
.image-filter-swatch.active span {
  color: var(--ink);
  font-weight: 600;
}
/* --- C. "Uitsnijden" - smart container cropping ------------------------- */
/* image-crop-overlay.component.js. Lives inside #canvas, so the ancestor
   .canvas-container's zoom/pan transform carries it along; the controls
   counter-scale so they stay a fixed on-screen size at any zoom. */
.crop-mode-root {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Above everything else on the canvas, including the selection handles both
     engines draw (7000) - while framing a photo, this mode owns the pointer. */
  z-index: 9000;
}
@keyframes crop-mode-nudge {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(16, 110, 129, 0);
  }
  35% {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px rgba(16, 110, 129, 0.28);
  }
  70% {
    transform: scale(0.98);
  }
}
.crop-mode-done.crop-mode-nudge {
  animation: crop-mode-nudge 0.6s ease-out;
}
.crop-mode-dim {
  position: absolute;
  top: -2000px;
  left: -2000px;
  right: -2000px;
  bottom: -2000px;
  background: rgba(20, 18, 15, 0.62);
  cursor: default;
}
.crop-mode-stage {
  cursor: grab;
  touch-action: none;
}
.crop-mode-stage:active {
  cursor: grabbing;
}
/* The photo's full bounds, including the part currently cropped away - shown
   faintly so there is something to aim with while panning. */
.crop-mode-ghost {
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}
/* What actually prints: the frame, unchanged in size and position. */
.crop-mode-window {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.crop-mode-window img {
  user-select: none;
}
.crop-mode-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border: 1px solid var(--white);
  box-shadow: 0 0 0 1px rgba(20, 18, 15, 0.45);
  /* Rule-of-thirds guides, drawn as two gradients rather than four child
     elements so the frame stays a single node. */
}
.crop-mode-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.333% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px), transparent calc(66.666% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.666% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)), linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.333% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px), transparent calc(66.666% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.666% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
}
/* The template mask, stacked on the photo exactly as the renderers stack it. */
.crop-mode-mask {
  pointer-events: none;
  user-select: none;
  max-width: none;
}
/* The mask's full bounds while it is the layer being dragged - faint, like the
   photo ghost, so the part pushed into the overflow is still there to aim. */
.crop-mode-mask-ghost {
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
  max-width: none;
}
/* Where the mask's box sits, including any part hanging past the frame. Quiet
   while the photo is being moved, prominent while the mask is. */
/* The card itself, in crop mode. Everything outside it is shaded (the huge
   spread shadow), so the parts of the photo and mask that fall off the card
   read as "not on the card" at a glance - a white card on a white photo gave
   no edge to aim at. Dashed clay while the mask leaves part of the card
   open, solid green once it is covered. Border width set inline (zoom). */
.crop-mode-card-outline {
  pointer-events: none;
  box-sizing: border-box;
  border-style: dashed;
  border-color: var(--clay);
  box-shadow: 0 0 0 9999px rgba(20, 18, 15, 0.38);
}
.crop-mode-card-outline.is-covered {
  border-style: solid;
  border-color: #4E8A56;
}
.crop-mode-card-outline.is-crop {
  box-shadow: none;
  filter: drop-shadow(0 0 1px rgba(20, 18, 15, 0.75));
}
.crop-mode-bleed-outline {
  pointer-events: none;
  box-sizing: border-box;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.75);
  filter: drop-shadow(0 0 1px rgba(20, 18, 15, 0.75));
}
.crop-mode-card-label {
  position: absolute;
  left: 0;
  top: -4px;
  transform-origin: bottom left;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(20, 18, 15, 0.7);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.crop-mode-mask-outline {
  pointer-events: none;
  border: 1.5px dashed var(--clay);
  opacity: 0.4;
}
.crop-mode-layer-mask {
  /* The photo becomes backdrop while the mask moves. */
}
.crop-mode-layer-mask .crop-mode-mask-outline {
  opacity: 1;
}
.crop-mode-layer-mask .crop-mode-ghost {
  opacity: 0.15;
}
/* Bijsnijden: the whole photo at full strength, the future frame drawn over
   it, everything outside it dimmed. The current frame stays as a dashed hint
   of where the photo was cut off before. */
.crop-mode-layer-crop .crop-mode-ghost {
  opacity: 1;
}
.crop-mode-layer-crop .crop-mode-window {
  display: none;
}
.crop-mode-layer-crop .crop-mode-mask-outline {
  display: none;
}
.crop-mode-layer-crop .crop-mode-frame {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}
.crop-mode-layer-crop .crop-mode-frame::after {
  display: none;
}
.crop-mode-layer-crop .crop-mode-stage {
  cursor: move;
}
.crop-mode-crop-shade {
  background: rgba(20, 18, 15, 0.55);
  pointer-events: auto;
  cursor: move;
  touch-action: none;
}
.crop-mode-crop-box {
  pointer-events: none;
  box-sizing: border-box;
  border-style: solid;
  border-color: var(--white);
  box-shadow: 0 0 0 1px rgba(20, 18, 15, 0.45);
  /* The same rule-of-thirds guides the frame shows while panning. */
}
.crop-mode-crop-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.333% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px), transparent calc(66.666% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.666% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)), linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.333% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px), transparent calc(66.666% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.666% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
}
/* Corner handles on the layer a drag moves. The box itself ignores the
   pointer so a drag inside it still pans; only the corners resize. Sizes and
   border widths are set inline, counter-scaled for the canvas zoom. */
.crop-mode-handles {
  pointer-events: none;
  outline: 1px solid rgba(255, 255, 255, 0.75);
}
.crop-mode-handles-mask, .crop-mode-handles-crop {
  outline: none;
}
.crop-mode-handle {
  position: absolute;
  box-sizing: border-box;
  pointer-events: auto;
  background: var(--white);
  border-style: solid;
  border-color: var(--clay);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(20, 18, 15, 0.35);
  touch-action: none;
}
.crop-mode-handle-nw, .crop-mode-handle-se {
  cursor: nwse-resize;
}
.crop-mode-handle-ne, .crop-mode-handle-sw {
  cursor: nesw-resize;
}
/* Side handles, only on a mask with a free ratio: one axis at a time. */
.crop-mode-handle-n, .crop-mode-handle-s {
  cursor: ns-resize;
  border-radius: 3px;
}
.crop-mode-handle-e, .crop-mode-handle-w {
  cursor: ew-resize;
  border-radius: 3px;
}
.crop-mode-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow);
  white-space: nowrap;
  cursor: default;
  /* Foto / Masker - which layer a drag moves. */
  /* Bijsnijden: the shape of the rectangle. */
  /* Masker: aspect ratio locked or free while resizing (builderVue.ImageKeepRatio). */
}
.crop-mode-controls .crop-mode-zoom-icon {
  font-size: 18px;
  color: var(--ink-faint);
}
.crop-mode-controls .crop-mode-zoom {
  width: 150px;
  accent-color: var(--clay);
}
.crop-mode-controls .crop-mode-layers {
  display: inline-flex;
  padding: 2px;
  border-radius: 9px;
  background: var(--paper);
}
.crop-mode-controls .crop-mode-layers button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.crop-mode-controls .crop-mode-layers button .material-icons {
  font-size: 16px;
}
.crop-mode-controls .crop-mode-layers button.on {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(20, 18, 15, 0.12);
}
.crop-mode-controls .crop-mode-ratios {
  display: inline-flex;
  padding: 2px;
  border-radius: 9px;
  background: var(--paper);
}
.crop-mode-controls .crop-mode-ratios button {
  height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.crop-mode-controls .crop-mode-ratios button.on {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(20, 18, 15, 0.12);
}
.crop-mode-controls .crop-mode-cancel {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--stone-line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.crop-mode-controls .crop-mode-cancel:hover {
  border-color: var(--clay);
  color: var(--ink);
}
.crop-mode-controls .crop-mode-fill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--stone-line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.crop-mode-controls .crop-mode-fill .material-icons {
  font-size: 16px;
  color: var(--clay);
}
.crop-mode-controls .crop-mode-fill:hover {
  border-color: var(--clay);
}
.crop-mode-controls .crop-mode-coverage {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.crop-mode-controls .crop-mode-coverage .material-icons {
  font-size: 15px;
  color: var(--ink-faint);
}
.crop-mode-controls .crop-mode-coverage.ok {
  color: #4E8A56;
}
.crop-mode-controls .crop-mode-coverage.ok .material-icons {
  color: #4E8A56;
}
.crop-mode-controls .crop-mode-ratio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--stone-line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.crop-mode-controls .crop-mode-ratio .material-icons {
  font-size: 16px;
}
.crop-mode-controls .crop-mode-ratio.on {
  border-color: var(--clay);
  background: var(--clay-tint);
  color: var(--clay-dark);
}
.crop-mode-controls .crop-mode-ratio:hover {
  border-color: var(--clay);
}
.crop-mode-controls .crop-mode-done {
  height: 32px;
  padding: 0 18px;
  border: none;
  border-radius: 8px;
  background: var(--clay);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.crop-mode-controls .crop-mode-done:hover {
  background: var(--clay-dark);
}
/* On a phone the controls sit under a much smaller card, so the slider gives
   up width before the "Klaar" button does. */
@media (max-width: 768px) {
  .crop-mode-controls {
    gap: 8px;
    padding: 8px 10px;
    /* Icons carry the meaning on a phone; the labels would push "Klaar" off. */
  }
  .crop-mode-controls .crop-mode-zoom {
    width: 100px;
  }
  .crop-mode-controls .crop-mode-done {
    height: 40px;
    padding: 0 16px;
  }
  .crop-mode-controls .crop-mode-layers button {
    height: 36px;
    padding: 0 9px;
    font-size: 0;
    gap: 0;
  }
  .crop-mode-controls .crop-mode-layers .material-icons {
    font-size: 18px;
  }
  .crop-mode-controls .crop-mode-ratios button {
    height: 36px;
    padding: 0 7px;
  }
  .crop-mode-controls .crop-mode-coverage {
    display: none;
  }
  .image-quality-badge {
    padding: 4px 9px 4px 6px;
  }
}
/* ------------------------------------------------------------------------ */
/* Template authoring: placeholder slot + mask overlay (admin only)          */
/* ------------------------------------------------------------------------ */
/* One collapsible card at the bottom of the photo panel. Everything inside
   reuses .image-edit-panel's own .form-group / .form-label / .slider-field /
   .form-range styling, so a mask control looks exactly like the photo control
   above it (the old version had its own label, slider and note styles, which
   is what made the panel read as two different designs stacked). */
#right-sidebar .template-panel {
  margin-top: 22px;
  border: 1px solid var(--stone-line);
  border-radius: 12px;
  background: var(--white);
  overflow: hidden;
}
#right-sidebar .template-panel-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border: none;
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
#right-sidebar .template-panel-header:hover {
  background: var(--stone);
}
#right-sidebar .template-panel-icon {
  font-size: 17px;
  color: var(--clay);
  flex-shrink: 0;
}
#right-sidebar .template-panel-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink);
  flex-shrink: 0;
}
#right-sidebar .template-panel-summary {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
#right-sidebar .template-panel-chevron {
  font-size: 20px;
  color: var(--ink-faint);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
#right-sidebar .template-panel.open .template-panel-chevron {
  transform: rotate(180deg);
}
#right-sidebar .template-panel-body {
  padding: 14px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#right-sidebar .template-panel-body .form-group {
  margin-bottom: 0;
}
#right-sidebar .template-panel-body .slider-field {
  margin-bottom: 0;
}
/* Label with a short hint on the same line (the hint's title carries the
   full sentence). */
#right-sidebar .form-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
#right-sidebar .form-label-row .form-label {
  margin-bottom: 0;
}
#right-sidebar .form-label-hint {
  font-size: 10.5px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#right-sidebar .mask-note {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 8px;
}
#right-sidebar .mask-error {
  font-size: 11.5px;
  color: #087595;
  margin-bottom: 8px;
}
/* Placeholder toggle */
#right-sidebar .mask-placeholder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--stone-line);
  border-radius: 10px;
  cursor: pointer;
  background: var(--white);
}
#right-sidebar .mask-placeholder-row:hover {
  border-color: var(--clay);
}
#right-sidebar .mask-placeholder-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
#right-sidebar .mask-placeholder-hint {
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 1px;
}
#right-sidebar .mask-toggle {
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--stone);
  position: relative;
  transition: background 0.15s ease;
}
#right-sidebar .mask-toggle.on {
  background: var(--clay);
}
#right-sidebar .mask-toggle.on .mask-toggle-knob {
  transform: translateX(16px);
}
#right-sidebar .mask-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
/* Mask picker: three square tiles per row inside the card. */
#right-sidebar .mask-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
#right-sidebar .mask-tile {
  aspect-ratio: 1;
  border: 1.5px solid var(--stone-line);
  border-radius: 9px;
  background: var(--paper);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
#right-sidebar .mask-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#right-sidebar .mask-tile .material-icons {
  font-size: 18px;
  color: var(--ink-faint);
}
#right-sidebar .mask-tile:hover {
  border-color: var(--clay);
}
#right-sidebar .mask-tile.active {
  border-color: var(--clay);
  box-shadow: 0 0 0 2px rgba(16, 110, 129, 0.25);
}
/* Mask colour: presets plus "eigen kleur" as ONE row of equal round swatches
   (a grid, so eight swatches always share the row whatever the sidebar
   width - a wrapped 6+2 row looked broken). */
#right-sidebar .mask-colors {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
#right-sidebar .mask-swatch {
  width: 100%;
  aspect-ratio: 1;
  max-width: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  padding: 0;
  background: var(--white);
  transition: border-color 0.12s ease;
}
#right-sidebar .mask-swatch:hover {
  border-color: var(--stone-line);
}
#right-sidebar .mask-swatch.active {
  border-color: var(--clay);
}
#right-sidebar .mask-swatch-original, #right-sidebar .mask-swatch-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
}
#right-sidebar .mask-swatch-original .material-icons, #right-sidebar .mask-swatch-custom .material-icons {
  font-size: 15px;
}
#right-sidebar .mask-swatch-custom {
  background: var(--paper);
  color: var(--ink-soft);
}
#right-sidebar .mask-swatch-custom:hover, #right-sidebar .mask-swatch-custom.active {
  color: var(--clay);
}
#right-sidebar .mask-colorpicker-host {
  margin-top: 10px;
}
/* Position: the D-pad and the four number fields side by side, one row. */
#right-sidebar .mask-position {
  display: flex;
  align-items: center;
  gap: 12px;
}
#right-sidebar .mask-nudge {
  display: grid;
  grid-template-columns: repeat(3, 28px);
  grid-template-rows: repeat(3, 28px);
  gap: 3px;
  flex-shrink: 0;
}
#right-sidebar .mask-nudge-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--stone-line);
  background: var(--white);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
#right-sidebar .mask-nudge-btn .material-icons {
  font-size: 17px;
}
#right-sidebar .mask-nudge-btn:hover {
  border-color: var(--clay);
  color: var(--clay);
  background: var(--clay-tint);
}
#right-sidebar .mask-nudge-btn:active {
  transform: translateY(1px);
}
#right-sidebar .mask-nudge-up {
  grid-area: 0.5;
}
#right-sidebar .mask-nudge-left {
  grid-area: 2;
}
#right-sidebar .mask-nudge-reset {
  grid-area: 1;
}
#right-sidebar .mask-nudge-right {
  grid-area: 0.6666666667;
}
#right-sidebar .mask-nudge-down {
  grid-area: 1.5;
}
#right-sidebar .mask-nudge-reset {
  background: var(--paper);
}
#right-sidebar .mask-nudge-reset .material-icons {
  font-size: 15px;
}
/* X/Y over B/H, label inside the field's left edge. */
#right-sidebar .mask-fields {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  /* Spinners hidden: at this width they ate the digits. Arrow keys still step. */
}
#right-sidebar .mask-fields label {
  position: relative;
  display: block;
  margin: 0;
}
#right-sidebar .mask-fields label span {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-faint);
  pointer-events: none;
}
#right-sidebar .mask-fields input {
  width: 100%;
  box-sizing: border-box;
  height: 30px;
  border: 1px solid var(--stone-line);
  border-radius: 8px;
  padding: 0 6px 0 21px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  -moz-appearance: textfield;
  appearance: textfield;
}
#right-sidebar .mask-fields input::-webkit-outer-spin-button, #right-sidebar .mask-fields input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#right-sidebar .mask-fields input:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--clay-tint);
}
/* ------------------------------------------------------------------ */
/* Vormen (shape elements)                                             */
/* ------------------------------------------------------------------ */
/* Tiles draw the exact same SVG path strings the canvas engine paints
   (drukwerk/shapes.js), so a tile can never advertise a shape that comes out
   different on the card. */
.shape-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.shape-tile {
  background: #fff;
  border: 1.5px solid var(--stone-line, #CBBC9F);
  border-radius: 12px;
  padding: 10px 6px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.shape-tile svg {
  width: 38px;
  height: 38px;
  display: block;
}
.shape-tile:hover {
  border-color: var(--clay, #106E81);
  transform: translateY(-1px);
}
.shape-tile.active {
  border-color: var(--clay, #106E81);
  border-width: 2px;
}
.shape-tile-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-soft, #6B6555);
  text-align: center;
  line-height: 1.2;
}
/* Compact variant for the floating toolbar's popover - labels would make the
   popover far too tall over the card. */
.shape-grid-compact {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.shape-grid-compact .shape-tile {
  padding: 6px;
}
.shape-grid-compact .shape-tile svg {
  width: 26px;
  height: 26px;
}
.shape-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shape-color-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  padding: 0;
}
.shape-color-swatch.active {
  border-color: var(--clay, #106E81);
}
/* Opens the full custom-colorpicker (RGB/CMYK proof + "Eigen" tab) for a
   shape, alongside the quick swatches above it. */
.shape-custom-color-btn {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid var(--stone-line, #CBBC9F);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft, #6B6555);
}
.shape-custom-color-btn .material-icons {
  font-size: 16px;
}
.shape-custom-color-btn:hover {
  border-color: var(--clay, #106E81);
  color: var(--clay, #106E81);
}
.shape-colorpicker-host {
  margin-top: 10px;
}
.shape-hint {
  font-size: 11px;
  color: var(--ink-faint, #8C8674);
  margin: 8px 0 0;
}
/* The colour "icon" in the shape toolbar - a filled dot showing the current
   fill, sized to sit on the same baseline as the .material-icons beside it. */
.shape-color-dot {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  vertical-align: middle;
}
.shape-picker-wrapper {
  background: #fff;
  border: 1px solid var(--stone-line, #CBBC9F);
  border-radius: 12px;
  padding: 10px;
  width: 210px;
  box-shadow: 0 12px 30px -12px rgba(33, 31, 26, 0.35);
}
/* ========================================================================== */
/* Editor sidebar redesign (editor-zijbalk-prototype.html)                    */
/* ========================================================================== */
/* One design system for the whole right-hand sidebar: the icon rail, the
   panel shell (head + scrolling body), collapsible sections and every control
   inside them. Scoped to #editor-sidebar-region and namespaced `sb-` so it
   can't collide with Bootstrap's .input/.btn/.row or the canvas's own
   styling. Tokens mirror the prototype 1:1 (warm paper surfaces, terracotta
   accent, Nunito). Later rules in this file deliberately override the older
   sidebar rules above with higher specificity instead of editing them in
   place - the old rules still serve the mobile bottom sheet and the legacy
   fallbacks. */
#editor-sidebar-region {
  --sb-ground: #EFEAE3;
  --sb-surface: #FFFFFF;
  --sb-surface-2: #F8F5F1;
  --sb-surface-3: #F1ECE6;
  --sb-ink: #2B2521;
  --sb-ink-2: #5E554E;
  --sb-muted: #978C82;
  --sb-line: #E6DED5;
  --sb-line-strong: #D3C8BC;
  --sb-accent: #106E81;
  --sb-accent-soft: #dbe9ec;
  --sb-accent-ink: #007BA8;
  --sb-ok: #3E7A5A;
  --sb-ok-soft: #E1F0E7;
  --sb-warn: #B8862B;
  --sb-warn-soft: #F8EFD8;
  --sb-danger: #B3382B;
  --sb-danger-soft: #FBE7E4;
  --sb-radius: 10px;
  --sb-radius-s: 7px;
  --sb-font: "Nunito", "Work Sans", "Segoe UI", system-ui, sans-serif;
  font-family: var(--sb-font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--sb-ink);
}
#editor-sidebar-region button, #editor-sidebar-region input, #editor-sidebar-region select, #editor-sidebar-region textarea {
  font-family: inherit;
}
#editor-sidebar-region :is(button, [role="button"], input[type="range"], textarea, select, input):focus-visible {
  outline: 2px solid var(--sb-accent);
  outline-offset: 2px;
}
/* ---------- Rail ---------- */
#editor-icon-rail {
  background: var(--sb-surface);
  border-left: 1px solid var(--sb-line);
  padding: 12px 8px;
}
#editor-icon-rail .rail-actions {
  gap: 4px;
}
#editor-icon-rail li {
  margin: 0;
  padding: 10px 4px 8px;
  gap: 5px;
  border-radius: 10px;
  color: var(--sb-ink-2);
  font-weight: 700;
  transition: background 0.12s ease, color 0.12s ease;
}
#editor-icon-rail li .material-icons {
  font-size: 22px;
}
#editor-icon-rail li .rail-label {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
  hyphens: manual;
  max-width: 100%;
}
#editor-icon-rail li:hover {
  background: var(--sb-surface-2);
}
#editor-icon-rail li.active {
  background: var(--sb-accent-soft);
  color: var(--sb-accent-ink);
}
#editor-icon-rail .rail-divider-item {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--sb-line);
  border-radius: 0 0 10px 10px;
}
/* ---------- Panel shell ---------- */
#right-sidebar {
  display: flex;
  flex-direction: column;
  width: 352px;
  flex-shrink: 0;
  min-height: 0;
  height: 100%;
  background: var(--sb-surface);
  border-left: 1px solid var(--sb-line);
}
#right-sidebar .sidebar-inner {
  flex: 1;
  min-height: 0;
  height: auto;
  width: 100%;
  padding: 0;
  border-left: 0;
  background: var(--sb-surface);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-line-strong) transparent;
  /* Panels that were not (yet) rebuilt on sections keep a plain padded body. */
}
#right-sidebar .sidebar-inner > .sidebar-product-settings-panel, #right-sidebar .sidebar-inner > .active.elements {
  padding: 16px 18px;
}
/* The element actions moved into the panel head (see .panel-head below). */
#layer-mini-toolbar {
  display: none !important;
}
/* Panel head: what you are looking at (tool) or editing (element). */
#right-sidebar .panel-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid var(--sb-line);
  background: var(--sb-surface);
}
#right-sidebar .panel-head .ph-back {
  width: 30px;
  height: 30px;
  margin-left: -8px;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sb-ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
#right-sidebar .panel-head .ph-back .material-icons {
  font-size: 22px;
}
#right-sidebar .panel-head .ph-back:hover {
  background: var(--sb-surface-2);
}
#right-sidebar .panel-head .ph-kind {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background: var(--sb-accent-soft);
  color: var(--sb-accent-ink);
  display: grid;
  place-items: center;
}
#right-sidebar .panel-head .ph-kind .material-icons {
  font-size: 17px;
}
#right-sidebar .panel-head .ph-who {
  min-width: 0;
  flex: 1;
}
#right-sidebar .panel-head .ph-name {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sb-ink);
}
#right-sidebar .panel-head .ph-sub {
  font-size: 12px;
  color: var(--sb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#right-sidebar .panel-head .ph-actions {
  margin-left: auto;
  display: flex;
  gap: 0;
  flex: none;
}
#right-sidebar .panel-head .ph-actions button {
  width: 28px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  padding: 0;
  background: transparent;
  color: var(--sb-ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}
#right-sidebar .panel-head .ph-actions button .material-icons {
  font-size: 18px;
}
#right-sidebar .panel-head .ph-actions button:hover {
  background: var(--sb-surface-2);
  color: var(--sb-ink);
}
#right-sidebar .panel-head .ph-actions button.on {
  background: var(--sb-accent-soft);
  color: var(--sb-accent-ink);
}
#right-sidebar .panel-head .ph-actions button.danger:hover {
  background: var(--sb-danger-soft);
  color: var(--sb-danger);
}
#right-sidebar .panel-head .ph-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--sb-accent-soft);
  color: var(--sb-accent-ink);
  flex: none;
}
/* ---------- Sections & layout primitives ---------- */
#right-sidebar {
  /* Inputs */
  /* Stepper (− value +) */
  /* Icon button + segmented control */
  /* Slider + numeric value */
  /* Tiles (filters) */
  /* Colour swatches */
  /* Toggle switch */
  /* Buttons */
  /* Photo: preview, action tiles, AI banner */
  /* The one action in the mask panel: a single full-width row button rather
     than the stacked icon tile .sb-action is in the photo action grid. */
  /* Formaat: px / % and the keep-proportions link between Breedte and Hoogte. */
  /* Masks (template authoring) */
  /* Shapes */
  /* QR: de digitale rouwkaart als code op de kaart (qr.sidebar.component.js). */
  /* QR */
  /* Library (photos) */
  /* Text presets under the CTA */
  /* Velden (fields.sidebar.component.js) - de vaste velden van een rouwkaart,
     aanwezig of nog te plaatsen. Alleen in sjabloonbewerking. */
  /* Layers */
  /* The font picker (.font-select) is styled in full where it lives, under
     #contextual-text-settings #text-editor-toolbar #dynamic-font-selector. */
}
#right-sidebar details.sb-section {
  border-bottom: 1px solid var(--sb-line);
}
#right-sidebar details.sb-section > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  font-weight: 800;
  font-size: 13px;
  color: var(--sb-ink);
  user-select: none;
}
#right-sidebar details.sb-section > summary::-webkit-details-marker {
  display: none;
}
#right-sidebar details.sb-section > summary:hover {
  background: var(--sb-surface-2);
}
#right-sidebar details.sb-section > summary .sb-sum {
  margin-left: auto;
  color: var(--sb-muted);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
#right-sidebar details.sb-section > summary .sb-chev {
  margin-left: 4px;
  color: var(--sb-muted);
  font-size: 20px;
  transition: transform 0.18s;
}
#right-sidebar details.sb-section > summary .sb-sec-ico {
  font-size: 16px;
  color: var(--sb-accent);
}
#right-sidebar details.sb-section[open] > summary .sb-chev {
  transform: rotate(180deg);
  margin-left: auto;
}
#right-sidebar details.sb-section[open] > summary .sb-sum {
  display: none;
}
#right-sidebar .sb-section-body {
  padding: 2px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#right-sidebar .sb-plain {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#right-sidebar .sb-plain.sb-flush-bottom {
  padding-bottom: 0;
}
#right-sidebar .sb-cta {
  margin: 16px 18px 0;
  display: flex;
}
#right-sidebar .sb-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
#right-sidebar .sb-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--sb-ink-2);
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
#right-sidebar .sb-label .sb-hint {
  font-weight: 600;
  color: var(--sb-muted);
  font-size: 11.5px;
  margin-left: auto;
  text-align: right;
}
#right-sidebar .sb-help {
  font-size: 12px;
  color: var(--sb-muted);
  margin: 0;
  line-height: 1.45;
}
#right-sidebar .sb-sel-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: start;
  padding: 9px 10px;
  border-radius: var(--sb-radius-s);
  background: var(--sb-surface-2);
  border: 1px solid var(--sb-line);
  font-size: 12px;
  line-height: 1.45;
  color: var(--sb-ink-2);
}
#right-sidebar .sb-sel-note .material-icons {
  font-size: 16px;
  line-height: 17px;
  color: var(--sb-muted);
}
#right-sidebar .sb-sel-note b {
  font-weight: 800;
  color: inherit;
}
#right-sidebar .sb-sel-note button {
  grid-column: 2;
  justify-self: start;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  color: var(--sb-accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#right-sidebar .sb-sel-note button:hover {
  color: var(--sb-accent);
}
#right-sidebar .sb-sel-note button.is-idle {
  visibility: hidden;
  pointer-events: none;
}
#right-sidebar .sb-sel-note.is-on {
  background: var(--sb-accent-soft);
  border-color: transparent;
  color: var(--sb-accent-ink);
}
#right-sidebar .sb-sel-note.is-on .material-icons {
  color: var(--sb-accent);
}
#right-sidebar .sb-row {
  display: grid;
  gap: 10px;
  align-items: end;
}
#right-sidebar .sb-row.sb-cols-2 {
  grid-template-columns: 1fr 1fr;
}
#right-sidebar .sb-row.sb-two {
  grid-template-columns: 1fr auto 1fr;
}
#right-sidebar .sb-row.sb-rotate {
  grid-template-columns: auto auto 1fr 78px;
  align-items: center;
}
#right-sidebar .sb-input {
  display: flex;
  align-items: center;
  height: 36px;
  min-width: 0;
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-radius-s);
  background: var(--sb-surface);
  padding: 0 8px 0 9px;
  gap: 4px;
}
#right-sidebar .sb-input:focus-within {
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 3px var(--sb-accent-soft);
}
#right-sidebar .sb-input.invalid {
  border-color: #C9473A;
}
#right-sidebar .sb-input input, #right-sidebar .sb-input select {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--sb-ink);
  font: inherit;
  font-weight: 700;
  width: 100%;
  min-width: 0;
  height: 100%;
  font-variant-numeric: tabular-nums;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
#right-sidebar .sb-input input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
#right-sidebar .sb-input input::-webkit-inner-spin-button, #right-sidebar .sb-input input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#right-sidebar .sb-input select {
  appearance: none;
  cursor: pointer;
}
#right-sidebar .sb-input .sb-unit {
  font-size: 11.5px;
  color: var(--sb-muted);
  font-weight: 600;
  flex: none;
}
#right-sidebar .sb-input .sb-ico {
  color: var(--sb-muted);
  display: grid;
  flex: none;
}
#right-sidebar .sb-input .sb-ico .material-icons {
  font-size: 18px;
}
#right-sidebar .sb-input.sb-hex .sb-dot {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  flex: none;
  margin-right: 4px;
}
#right-sidebar .sb-input.sb-hex input {
  text-transform: uppercase;
}
#right-sidebar textarea.sb-ta {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  box-sizing: border-box;
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-radius-s);
  background: var(--sb-surface);
  color: var(--sb-ink);
  font: inherit;
  padding: 9px 10px;
  line-height: 1.45;
}
#right-sidebar textarea.sb-ta:focus {
  outline: 0;
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 3px var(--sb-accent-soft);
}
#right-sidebar textarea.sb-ta:disabled {
  background: var(--sb-surface-2);
  color: var(--sb-muted);
}
#right-sidebar .sb-stepper {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  height: 36px;
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-radius-s);
  overflow: hidden;
  background: var(--sb-surface);
  /* Lettergrootte staat in punten, en dat moet erbij staan (Word en Canva
       doen het ook). De stepper heeft maar drie kolommen, dus "pt" deelt de
       middelste cel met het invoerveld: getal rechts tegen de eenheid aan. */
}
#right-sidebar .sb-stepper:focus-within {
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 3px var(--sb-accent-soft);
}
#right-sidebar .sb-stepper button {
  border: 0;
  background: transparent;
  color: var(--sb-ink-2);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
}
#right-sidebar .sb-stepper button .material-icons {
  font-size: 18px;
}
#right-sidebar .sb-stepper button:hover {
  background: var(--sb-surface-2);
}
#right-sidebar .sb-stepper input, #right-sidebar .sb-stepper .sb-stepper-value {
  border: 0;
  outline: 0;
  text-align: center;
  font: inherit;
  font-weight: 700;
  background: transparent;
  color: var(--sb-ink);
  min-width: 0;
  width: 100%;
  height: 100%;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
#right-sidebar .sb-stepper input::-webkit-inner-spin-button {
  display: none;
}
#right-sidebar .sb-stepper .sb-stepper-mid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 3px;
  padding-right: 7px;
  min-width: 0;
}
#right-sidebar .sb-stepper .sb-stepper-mid input {
  text-align: right;
}
#right-sidebar .sb-stepper .sb-stepper-unit {
  font-size: 11px;
  font-weight: 700;
  color: var(--sb-muted);
  letter-spacing: 0.02em;
  user-select: none;
}
#right-sidebar .sb-ibtn {
  height: 36px;
  min-width: 36px;
  padding: 0 8px;
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-radius-s);
  background: var(--sb-surface);
  color: var(--sb-ink-2);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
#right-sidebar .sb-ibtn .material-icons {
  font-size: 19px;
}
#right-sidebar .sb-ibtn:hover {
  background: var(--sb-surface-2);
  color: var(--sb-ink);
}
#right-sidebar .sb-ibtn.on {
  background: var(--sb-accent-soft);
  border-color: var(--sb-accent);
  color: var(--sb-accent-ink);
}
#right-sidebar .sb-ibtn.danger {
  color: var(--sb-danger);
}
#right-sidebar .sb-ibtn.danger:hover {
  background: var(--sb-danger-soft);
  border-color: #E9B7B0;
}
#right-sidebar .sb-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-radius-s);
  overflow: hidden;
  background: var(--sb-surface);
}
#right-sidebar .sb-seg button, #right-sidebar .sb-seg a {
  border: 0;
  background: transparent;
  height: 34px;
  color: var(--sb-ink-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--sb-line);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  padding: 0;
}
#right-sidebar .sb-seg button .material-icons, #right-sidebar .sb-seg a .material-icons {
  font-size: 19px;
}
#right-sidebar .sb-seg button:last-child, #right-sidebar .sb-seg a:last-child {
  border-right: 0;
}
#right-sidebar .sb-seg button:hover, #right-sidebar .sb-seg a:hover {
  background: var(--sb-surface-2);
}
#right-sidebar .sb-seg button.on, #right-sidebar .sb-seg button.active, #right-sidebar .sb-seg a.on, #right-sidebar .sb-seg a.active {
  background: var(--sb-accent-soft);
  color: var(--sb-accent-ink);
}
#right-sidebar .sb-slider-row {
  display: grid;
  grid-template-columns: 1fr 78px;
  gap: 10px;
  align-items: center;
}
#right-sidebar .sb-slider-row .sb-input, #right-sidebar .sb-row.sb-rotate .sb-input {
  padding-right: 6px;
}
#right-sidebar input[type="range"].sb-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 9px 0;
  border-radius: 2px;
  background: linear-gradient(to right, var(--sb-accent) 0 var(--pct, 50%), var(--sb-line-strong) var(--pct, 50%) 100%);
  cursor: pointer;
  outline: none;
}
#right-sidebar input[type="range"].sb-range::-webkit-slider-runnable-track {
  background: transparent;
  height: 4px;
}
#right-sidebar input[type="range"].sb-range::-moz-range-track {
  background: transparent;
  height: 4px;
}
#right-sidebar input[type="range"].sb-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--sb-surface);
  border: 2px solid var(--sb-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
#right-sidebar input[type="range"].sb-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sb-surface);
  border: 2px solid var(--sb-accent);
}
#right-sidebar .sb-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
#right-sidebar .sb-tile {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  font: inherit;
  color: var(--sb-ink-2);
}
#right-sidebar .sb-tile .sb-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  outline: 1px solid var(--sb-line);
  outline-offset: -1px;
  background: var(--sb-surface-3);
}
#right-sidebar .sb-tile .sb-thumb img, #right-sidebar .sb-tile .sb-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
#right-sidebar .sb-tile span:not(.sb-thumb) {
  font-size: 11.5px;
  font-weight: 700;
}
#right-sidebar .sb-tile:hover .sb-thumb {
  outline-color: var(--sb-line-strong);
}
#right-sidebar .sb-tile.on .sb-thumb {
  border-color: var(--sb-accent);
  outline: none;
}
#right-sidebar .sb-tile.on span:not(.sb-thumb) {
  color: var(--sb-accent-ink);
}
#right-sidebar .sb-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
#right-sidebar .sb-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  background: var(--sw, var(--sb-surface));
  display: grid;
  place-items: center;
  color: var(--sb-muted);
}
#right-sidebar .sb-swatch .material-icons {
  font-size: 15px;
}
#right-sidebar .sb-swatch:hover {
  border-color: var(--sb-line-strong);
}
#right-sidebar .sb-swatch.on {
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 2px var(--sb-surface) inset;
}
#right-sidebar .sb-swatch.sb-none {
  background: var(--sb-surface);
}
#right-sidebar .sb-swatch.sb-custom {
  background: conic-gradient(#e75a4a, #f2b035, #66b04a, #3b8ee0, #9b5ad6, #e75a4a);
  color: transparent;
}
#right-sidebar .sb-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin: 0;
}
#right-sidebar .sb-toggle .sb-track {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--sb-line-strong);
  position: relative;
  transition: background 0.15s;
  flex: none;
}
#right-sidebar .sb-toggle .sb-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
#right-sidebar .sb-toggle.on .sb-track {
  background: var(--sb-accent);
}
#right-sidebar .sb-toggle.on .sb-track::after {
  transform: translateX(16px);
}
#right-sidebar .sb-toggle .sb-t-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--sb-ink);
  display: block;
}
#right-sidebar .sb-toggle .sb-t-help {
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: var(--sb-muted);
}
#right-sidebar .sb-btn {
  height: 36px;
  border-radius: var(--sb-radius-s);
  border: 1px solid var(--sb-line-strong);
  background: var(--sb-surface);
  color: var(--sb-ink);
  font: inherit;
  font-weight: 700;
  padding: 0 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
#right-sidebar .sb-btn .material-icons {
  font-size: 18px;
}
#right-sidebar .sb-btn:hover {
  background: var(--sb-surface-2);
}
#right-sidebar .sb-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
#right-sidebar .sb-primary {
  flex: 1;
  height: 40px;
  border-radius: var(--sb-radius-s);
  border: 0;
  background: var(--sb-accent);
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
#right-sidebar .sb-primary .material-icons {
  font-size: 18px;
}
#right-sidebar .sb-primary:hover {
  filter: brightness(0.95);
}
#right-sidebar .sb-primary.sb-ghost {
  background: var(--sb-accent-soft);
  color: var(--sb-accent-ink);
}
#right-sidebar .sb-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}
#right-sidebar .sb-link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--sb-accent-ink);
  cursor: pointer;
}
#right-sidebar .sb-link:hover {
  text-decoration: underline;
}
#right-sidebar .sb-preview {
  position: relative;
  border-radius: var(--sb-radius);
  overflow: hidden;
  aspect-ratio: 1.6;
  background: var(--sb-surface-3);
  display: grid;
  place-items: center;
}
#right-sidebar .sb-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
#right-sidebar .sb-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
}
#right-sidebar .sb-action {
  border: 1px solid var(--sb-line-strong);
  border-radius: var(--sb-radius-s);
  background: var(--sb-surface);
  color: var(--sb-ink-2);
  padding: 8px 2px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.1px;
  cursor: pointer;
  min-width: 0;
}
#right-sidebar .sb-action .material-icons {
  font-size: 20px;
}
#right-sidebar .sb-action span:not(.material-icons) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#right-sidebar .sb-action:hover {
  background: var(--sb-surface-2);
  color: var(--sb-ink);
}
#right-sidebar .sb-action.danger:hover {
  background: var(--sb-danger-soft);
  color: var(--sb-danger);
  border-color: #E9B7B0;
}
#right-sidebar .sb-unit-seg {
  margin-left: auto;
  grid-auto-columns: 34px;
}
#right-sidebar .sb-unit-seg button {
  height: 24px;
  font-size: 11.5px;
}
#right-sidebar .sb-size-row {
  align-items: end;
}
#right-sidebar .sb-size-row .sb-ratio-lock {
  height: 36px;
  min-width: 32px;
  padding: 0 6px;
}
#right-sidebar .sb-action.sb-mask-canvas {
  width: 100%;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  padding: 9px 10px;
  margin-bottom: 10px;
  font-size: 12px;
}
#right-sidebar .sb-action.sb-mask-canvas .material-icons {
  font-size: 18px;
}
#right-sidebar .sb-ai {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--sb-radius);
  background: linear-gradient(135deg, var(--sb-accent-soft), var(--sb-surface-2));
  border: 1px solid var(--sb-line);
}
#right-sidebar .sb-ai .sb-ai-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sb-accent);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
#right-sidebar .sb-ai .sb-ai-ico .material-icons {
  font-size: 18px;
}
#right-sidebar .sb-ai strong {
  display: block;
  font-size: 13px;
  color: var(--sb-ink);
}
#right-sidebar .sb-ai small {
  color: var(--sb-ink-2);
  font-size: 12px;
  display: block;
}
#right-sidebar .sb-ai .sb-btn {
  margin-left: auto;
  height: 32px;
  padding: 0 10px;
  font-size: 12.5px;
  flex: none;
}
#right-sidebar .image-quality-notice {
  border-radius: var(--sb-radius);
}
#right-sidebar .sb-masks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
#right-sidebar .sb-mask {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  outline: 1px solid var(--sb-line);
  outline-offset: -1px;
  background: var(--sb-surface-2);
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--sb-muted);
}
#right-sidebar .sb-mask img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
#right-sidebar .sb-mask .material-icons {
  font-size: 18px;
}
#right-sidebar .sb-mask:hover {
  outline-color: var(--sb-line-strong);
}
#right-sidebar .sb-mask.on {
  border-color: var(--sb-accent);
  outline: none;
}
#right-sidebar .sb-mask.sb-none {
  border-style: dashed;
  border-color: var(--sb-line-strong);
  outline: none;
}
#right-sidebar .sb-mask.sb-none.on {
  border-color: var(--sb-accent);
  color: var(--sb-accent-ink);
  border-style: solid;
}
#right-sidebar .sb-nudge {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  grid-template-rows: repeat(3, 30px);
  gap: 3px;
  flex: none;
}
#right-sidebar .sb-nudge .sb-ibtn {
  height: 30px;
  min-width: 30px;
  padding: 0;
}
#right-sidebar .sb-nudge .sb-ibtn .material-icons {
  font-size: 17px;
}
#right-sidebar .sb-nudge-up {
  grid-area: 0.5;
}
#right-sidebar .sb-nudge-left {
  grid-area: 2;
}
#right-sidebar .sb-nudge-reset {
  grid-area: 1;
}
#right-sidebar .sb-nudge-right {
  grid-area: 0.6666666667;
}
#right-sidebar .sb-nudge-down {
  grid-area: 1.5;
}
#right-sidebar .sb-position {
  display: flex;
  align-items: center;
  gap: 12px;
}
#right-sidebar .sb-position .sb-row {
  flex: 1;
  min-width: 0;
}
#right-sidebar .sb-shapes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
#right-sidebar .sb-shape {
  border: 1px solid var(--sb-line);
  border-radius: 8px;
  background: var(--sb-surface);
  padding: 8px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--sb-ink-2);
  min-width: 0;
}
#right-sidebar .sb-shape svg {
  width: 30px;
  height: 30px;
  display: block;
}
#right-sidebar .sb-shape span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#right-sidebar .sb-shape:hover {
  border-color: var(--sb-line-strong);
  background: var(--sb-surface-2);
}
#right-sidebar .sb-shape.on {
  border-color: var(--sb-accent);
  background: var(--sb-accent-soft);
  color: var(--sb-accent-ink);
}
#right-sidebar .sb-qr-nudge {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--sb-radius);
  background: var(--sb-ok-soft);
  border: 1px solid var(--sb-line);
}
#right-sidebar .sb-qr-nudge > .material-icons {
  font-size: 22px;
  color: var(--sb-ok);
}
#right-sidebar .sb-qr-nudge strong {
  display: block;
  font-size: 13px;
  color: var(--sb-ink);
}
#right-sidebar .sb-qr-nudge p {
  margin: 3px 0 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--sb-ink-2);
}
#right-sidebar .sb-qr-nudge .sb-link {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
#right-sidebar .sb-qr-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
#right-sidebar .sb-qr-kind {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: start;
  text-align: left;
  padding: 10px 10px;
  border-radius: var(--sb-radius);
  border: 1.5px solid var(--sb-line);
  background: var(--sb-surface);
  cursor: pointer;
  font: inherit;
  color: var(--sb-ink);
}
#right-sidebar .sb-qr-kind .material-icons {
  font-size: 19px;
  color: var(--sb-muted);
}
#right-sidebar .sb-qr-kind b {
  display: block;
  font-size: 12.5px;
}
#right-sidebar .sb-qr-kind small {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: var(--sb-muted);
}
#right-sidebar .sb-qr-kind:hover {
  border-color: var(--sb-line-strong);
}
#right-sidebar .sb-qr-kind.active {
  border-color: var(--sb-accent, #106E81);
  background: var(--sb-surface-2);
}
#right-sidebar .sb-qr-kind.active .material-icons {
  color: var(--sb-accent, #106E81);
}
#right-sidebar .sb-qr-note {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--sb-radius);
  background: var(--sb-surface-2);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--sb-ink-2);
}
#right-sidebar .sb-qr-note strong {
  color: var(--sb-ink);
}
#right-sidebar .sb-help-warn {
  color: var(--sb-warn);
}
#right-sidebar .sb-qr-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: var(--sb-radius);
  background: var(--sb-surface-2);
  border: 1px solid var(--sb-line);
}
#right-sidebar .sb-qr-card img {
  width: 96px;
  height: 96px;
  display: block;
  border-radius: 6px;
  background: #fff;
  padding: 6px;
  box-sizing: border-box;
}
#right-sidebar .sb-qr-card strong {
  display: block;
  font-size: 13px;
  word-break: break-all;
  color: var(--sb-ink);
}
#right-sidebar .sb-qr-card small {
  color: var(--sb-muted);
  font-size: 12px;
}
#right-sidebar .sb-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  margin-top: 6px;
}
#right-sidebar .sb-status .material-icons {
  font-size: 14px;
}
#right-sidebar .sb-status.ok {
  background: var(--sb-ok-soft);
  color: var(--sb-ok);
}
#right-sidebar .sb-status.warn {
  background: var(--sb-warn-soft);
  color: var(--sb-warn);
}
#right-sidebar .sb-dropzone {
  border: 1.5px dashed var(--sb-line-strong);
  border-radius: var(--sb-radius);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  background: var(--sb-surface-2);
}
#right-sidebar .sb-dropzone .material-icons {
  font-size: 24px;
  color: var(--sb-accent);
}
#right-sidebar .sb-dropzone strong {
  font-size: 13px;
  color: var(--sb-ink);
}
#right-sidebar .sb-dropzone span:not(.material-icons) {
  font-size: 12px;
  color: var(--sb-muted);
}
#right-sidebar .sb-dropzone:hover {
  border-color: var(--sb-accent);
  background: var(--sb-accent-soft);
}
#right-sidebar .sb-lib-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#right-sidebar .sb-lib-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px;
  border-radius: var(--sb-radius);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--sb-ink);
  width: 100%;
}
#right-sidebar .sb-lib-item .sb-th {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sb-surface-3);
  display: grid;
  place-items: center;
  color: var(--sb-ink-2);
}
#right-sidebar .sb-lib-item .sb-th img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#right-sidebar .sb-lib-item .sb-th .material-icons {
  font-size: 22px;
}
#right-sidebar .sb-lib-item strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
}
#right-sidebar .sb-lib-item small {
  color: var(--sb-muted);
  font-size: 12px;
}
#right-sidebar .sb-lib-item .sb-chev {
  color: var(--sb-muted);
  font-size: 20px;
}
#right-sidebar .sb-lib-item:hover {
  background: var(--sb-surface-2);
  border-color: var(--sb-line);
}
#right-sidebar .sb-crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--sb-muted);
  font-weight: 700;
  flex-wrap: wrap;
  min-height: 30px;
}
#right-sidebar .sb-crumbs .sb-link {
  font-size: 12px;
}
#right-sidebar .sb-crumbs .sb-crumb-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
#right-sidebar .sb-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
#right-sidebar .sb-grid3 .asset-tile {
  border: 1px solid var(--sb-line);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  background: var(--sb-surface-3);
  margin: 0 !important;
}
#right-sidebar .sb-grid3 .asset-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
#right-sidebar .sb-grid3 .asset-tile:hover {
  border-color: var(--sb-accent);
}
#right-sidebar .sb-grid3.sb-icons .asset-tile {
  background: var(--sb-surface);
}
#right-sidebar .sb-grid3.sb-icons .asset-tile img {
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
}
#right-sidebar .sb-presets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#right-sidebar .sb-preset {
  text-align: left;
  border: 1px solid var(--sb-line);
  background: var(--sb-surface);
  border-radius: var(--sb-radius);
  padding: 10px 14px;
  cursor: pointer;
  color: var(--sb-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font: inherit;
}
#right-sidebar .sb-preset small {
  font-size: 11px;
  font-weight: 700;
  color: var(--sb-muted);
  flex: none;
}
#right-sidebar .sb-preset:hover {
  border-color: var(--sb-line-strong);
  background: var(--sb-surface-2);
}
#right-sidebar .sb-preset.h {
  font-size: 20px;
  font-weight: 500;
}
#right-sidebar .sb-preset.sh {
  font-size: 15px;
}
#right-sidebar .sb-preset.p {
  font-size: 13px;
  color: var(--sb-ink-2);
}
#right-sidebar .sb-field-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 9px;
  padding: 8px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}
#right-sidebar .sb-field-row + .sb-field-row {
  margin-top: 2px;
}
#right-sidebar .sb-field-row:hover {
  background: var(--sb-surface-2);
  border-color: var(--sb-line);
}
#right-sidebar .sb-field-row .sb-field-check {
  font-size: 18px;
  line-height: 1.2;
}
#right-sidebar .sb-field-row .sb-field-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
#right-sidebar .sb-field-row .sb-field-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--sb-ink);
}
#right-sidebar .sb-field-row .sb-field-sub {
  font-size: 11.5px;
  color: var(--sb-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#right-sidebar .sb-field-row.is-present .sb-field-check {
  color: #5B7F4B;
}
#right-sidebar .sb-field-row.is-missing .sb-field-check {
  color: var(--sb-muted);
}
#right-sidebar .sb-field-row.is-missing:hover .sb-field-check {
  color: var(--clay, #106E81);
}
#right-sidebar .sb-layer-group {
  padding: 6px 12px 10px;
}
#right-sidebar .sb-layer-group h4 {
  margin: 8px 6px 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sb-muted);
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}
#right-sidebar .sb-layer {
  display: grid;
  grid-template-columns: 16px 26px 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 6px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
}
#right-sidebar .sb-layer + .sb-layer::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: -1px;
  height: 1px;
  background: var(--sb-line);
}
#right-sidebar .sb-layer:hover::before, #right-sidebar .sb-layer:hover + .sb-layer::before, #right-sidebar .sb-layer.active::before, #right-sidebar .sb-layer.active + .sb-layer::before {
  opacity: 0;
}
#right-sidebar .sb-layer:hover {
  background: var(--sb-surface-2);
}
#right-sidebar .sb-layer.active {
  background: var(--sb-accent-soft);
  border-color: rgba(16, 110, 129, 0.35);
}
#right-sidebar .sb-layer .sb-grip {
  color: var(--sb-line-strong);
  cursor: grab;
  display: grid;
}
#right-sidebar .sb-layer .sb-grip .material-icons {
  font-size: 18px;
}
#right-sidebar .sb-layer .sb-grip {
  touch-action: none;
}
#right-sidebar .sb-layer.sb-layer-sorting {
  transition: transform 0.15s ease;
}
#right-sidebar .sb-layer.sb-layer-dragging {
  background: var(--sb-surface);
  border-color: var(--sb-line-strong);
  box-shadow: 0 6px 18px rgba(20, 18, 15, 0.16);
  cursor: grabbing;
}
#right-sidebar .sb-layer.sb-layer-dragging .sb-grip {
  cursor: grabbing;
}
#right-sidebar .sb-layer .sb-lico {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--sb-surface-3);
  display: grid;
  place-items: center;
  color: var(--sb-ink-2);
  overflow: hidden;
}
#right-sidebar .sb-layer .sb-lico .material-icons {
  font-size: 16px;
}
#right-sidebar .sb-layer .sb-lico img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#right-sidebar .sb-layer .sb-lname {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sb-ink);
  display: block;
  min-width: 0;
}
#right-sidebar .sb-layer .sb-ltype {
  font-size: 11px;
  color: var(--sb-muted);
  font-weight: 600;
  display: block;
}
#right-sidebar .sb-layer .sb-lbtns {
  display: flex;
  gap: 0;
  opacity: 0.55;
}
#right-sidebar .sb-layer:hover .sb-lbtns, #right-sidebar .sb-layer.active .sb-lbtns {
  opacity: 1;
}
#right-sidebar .sb-layer .sb-lbtns button, #right-sidebar .sb-layer .sb-lbtns span {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--sb-ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
#right-sidebar .sb-layer .sb-lbtns button .material-icons, #right-sidebar .sb-layer .sb-lbtns span .material-icons {
  font-size: 16px;
}
#right-sidebar .sb-layer .sb-lbtns button:hover {
  background: var(--sb-surface-3);
}
#right-sidebar .sb-layer .sb-lbtns .on {
  color: var(--sb-accent-ink);
}
/* The AI-verbetering popover & colour picker keep their own fixed positioning
   (they escape the scrolling body); their anchor offset must follow the new
   flyout width. */
.ai-enhance-wrapper, .color-picker-wrapper {
  --sb-flyout-width: 352px;
}
/* ---------- Mobile bottom sheet: keep the sheet behaviour, adopt the skin ---------- */
@media (max-width: 768px) {
  #right-sidebar {
    width: auto;
    border-left: 0;
  }
  #right-sidebar .panel-head {
    padding: 10px 14px 10px 18px;
    min-height: 52px;
  }
  #right-sidebar .sidebar-inner {
    padding: 0 0 22px;
  }
  #right-sidebar .sidebar-inner::before {
    margin: 8px auto 4px;
  }
}
#right-sidebar #contextual-text-settings {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
}
/* ------------------------------------------------------------------------- */
/* Editor tooltips (sidebar-tooltips.js) - sidebar, top bar, bottom bar       */
/* ------------------------------------------------------------------------- */
/* Replaces the operating system's own title tooltip, which CSS cannot style.
   Lives on <body> rather than inside #editor-sidebar-region - .sidebar-inner
   scrolls, and would clip a bubble near its edge - so it cannot inherit the
   --sb-* tokens and carries its own copies of them here. */
.sb-tooltip {
  --sb-tip-ink: #2B2521;
  /* --sb-ink */
  --sb-tip-arrow: 50%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  pointer-events: none;
  max-width: 240px;
  padding: 6px 10px;
  border-radius: 7px;
  /* --sb-radius-s */
  background: var(--sb-tip-ink);
  color: #FFFFFF;
  font-family: "Nunito", "Work Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(43, 37, 33, 0.55);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  /* A sentence ("Bekijk je kaart als PDF, zoals hij gedrukt wordt") wraps. */
  /* The name of a button that collapsed to its icon, above its description. */
  /* The shortcut a title carried in brackets, as a key cap. */
  /* Arrow, pointing down at the control... */
  /* ...or up, when the bubble had to flip below it. */
}
.sb-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.sb-tooltip.is-long {
  white-space: normal;
  width: max-content;
  font-weight: 600;
}
.sb-tooltip b {
  display: block;
  font-weight: 800;
}
.sb-tooltip b[hidden] {
  display: none;
}
.sb-tooltip b:not([hidden]) + span {
  font-weight: 500;
  opacity: 0.82;
}
.sb-tooltip kbd {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  box-shadow: none;
}
.sb-tooltip kbd[hidden] {
  display: none;
}
.sb-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--sb-tip-arrow);
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--sb-tip-ink);
}
.sb-tooltip.is-below {
  transform: translateY(-3px);
}
.sb-tooltip.is-below.is-visible {
  transform: translateY(0);
}
.sb-tooltip.is-below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--sb-tip-ink);
}
@media (prefers-reduced-motion: reduce) {
  .sb-tooltip {
    transition: none;
    transform: none;
  }
}
/* Font dropdown (texteditortoolbar): panel entrance. */
@keyframes sb-font-panel-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ------------------------------------------------------------------------- */
/* Inline icon picker (canvaskit/icon-picker.js)                             */
/* ------------------------------------------------------------------------- */
/* Lives on <body> (position:fixed, outside the zoomed canvas subtree and the
   sidebar), so it carries its own copies of the sidebar palette. */
#drk-icon-picker {
  position: fixed;
  z-index: 10000;
  width: 272px;
  max-height: 340px;
  overflow: auto;
  padding: 10px;
  background: #FFFFFF;
  border: 1px solid #D3C8BC;
  border-radius: 12px;
  box-shadow: 0 18px 40px -14px rgba(43, 37, 33, 0.35), 0 2px 6px rgba(43, 37, 33, 0.06);
  font-family: "Nunito", "Work Sans", "Segoe UI", system-ui, sans-serif;
  scrollbar-width: thin;
  scrollbar-color: #D3C8BC transparent;
}
#drk-icon-picker .dip-head {
  padding: 2px 4px 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #978C82;
}
#drk-icon-picker .dip-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
#drk-icon-picker .dip-cat {
  padding: 10px 4px 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #6B6058;
}
#drk-icon-picker .dip-head + .dip-cat {
  padding-top: 0;
}
#drk-icon-picker .dip-item {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #F8F5F1;
  color: #2B2521;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
}
#drk-icon-picker .dip-item svg {
  width: 58%;
  height: 58%;
  overflow: visible;
}
#drk-icon-picker .dip-item:hover, #drk-icon-picker .dip-item:focus-visible {
  outline: 0;
  background: #dbe9ec;
  border-color: #106E81;
  color: #007BA8;
}
@media (max-width: 768px) {
  #drk-icon-picker {
    width: calc(100vw - 16px);
    max-height: 40vh;
  }
  #drk-icon-picker .dip-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}
.fd-invite-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(46, 42, 34, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fdInviteFade 0.15s ease-out;
}
@keyframes fdInviteFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fdInvitePop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fd-invite {
  width: 560px;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(33, 31, 26, 0.3);
  padding: 26px 28px 28px;
  box-sizing: border-box;
  color: var(--ink);
  font-size: 13px;
  animation: fdInvitePop 0.18s ease-out;
}
.fd-invite-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.fd-invite-title {
  margin: 0 0 6px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.fd-invite-sub {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.fd-invite-close {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: #F2EDE7;
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.fd-invite-close .material-icons {
  font-size: 18px;
}
.fd-invite-close:hover {
  background: var(--clay-tint);
  color: var(--clay-dark);
}
.fd-invite-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #F2EDE7;
  margin-bottom: 18px;
}
.fd-invite-tabs button {
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.fd-invite-tabs button.active {
  background: var(--clay);
  color: var(--white);
  box-shadow: 0 1px 3px rgba(16, 110, 129, 0.3);
}
.fd-invite-search {
  position: relative;
  display: block;
  margin-bottom: 14px;
}
.fd-invite-search .material-icons {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--ink-soft);
  pointer-events: none;
}
.fd-invite-search input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  margin: 0;
  border: 1.5px solid #E5DED3;
  border-radius: 999px;
  padding: 0 16px 0 40px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--white);
  outline: none;
}
.fd-invite-search input:focus {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--clay-tint);
}
.fd-invite-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-height: 120px;
  padding-right: 2px;
}
.fd-invite-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: start;
  gap: 12px;
  border: 1px solid #E8E1D6;
  border-radius: 14px;
  padding: 14px 14px 14px 14px;
  transition: border-color 0.15s ease;
}
.fd-invite-card:hover {
  border-color: #D9CBB6;
}
.fd-invite-card.invited {
  border-color: rgba(16, 110, 129, 0.45);
  background: #FDF8F4;
}
.fd-invite-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F6DFD3;
  color: #A8532F;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
}
.fd-invite-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fd-invite-main {
  min-width: 0;
}
.fd-invite-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
}
.fd-invite-name:hover {
  color: var(--clay);
  text-decoration: underline;
}
.fd-invite-meta {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 1px;
}
.fd-invite-bio {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  margin-top: 6px;
}
.fd-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--clay);
  background: var(--white);
  color: var(--clay);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.fd-invite-btn .material-icons {
  font-size: 16px;
}
.fd-invite-btn:hover {
  background: var(--clay);
  color: var(--white);
}
.fd-invite-btn.done, .fd-invite-btn.done:hover {
  background: var(--clay-tint);
  border-color: var(--clay-tint);
  color: var(--clay-dark);
  cursor: default;
}
@media (max-width: 520px) {
  .fd-invite-card {
    grid-template-columns: 40px 1fr;
  }
  .fd-invite-btn {
    grid-column: 2;
    justify-self: start;
  }
}
.fd-invite-state {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px 4px;
  font-size: 13px;
  color: var(--ink-soft);
}
.fd-invite-error {
  color: #A8412B;
  padding: 8px 0;
}
.fd-invite-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #E8E1D6;
  border-top-color: var(--clay);
  animation: fdInviteSpin 0.8s linear infinite;
}
@keyframes fdInviteSpin {
  to {
    transform: rotate(360deg);
  }
}
.fd-invite-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--clay);
  cursor: pointer;
}
.fd-invite-link:hover {
  text-decoration: underline;
}
.fd-invite-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fd-invite-form label {
  display: block;
  margin: 0;
}
.fd-invite-form label > span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
}
.fd-invite-form label em {
  font-style: normal;
  font-weight: 400;
  color: var(--ink-soft);
}
.fd-invite-form input, .fd-invite-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1.5px solid #E5DED3;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--white);
  outline: none;
}
.fd-invite-form input {
  height: 40px;
}
.fd-invite-form textarea {
  resize: vertical;
}
.fd-invite-form input:focus, .fd-invite-form textarea:focus {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px var(--clay-tint);
}
.fd-invite-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.fd-invite-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) {
  .fd-invite-row {
    grid-template-columns: 1fr;
  }
}
.fd-invite-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.fd-invite-submit {
  height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--clay);
  color: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.fd-invite-submit:hover {
  background: var(--clay-dark);
}
.fd-invite-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 24px 12px;
}
.fd-invite-sent .material-icons {
  font-size: 36px;
  color: var(--clay);
}
.fd-invite-sent strong {
  font-size: 15px;
}
.fd-invite-sent p {
  margin: 0 0 8px;
  color: var(--ink-soft);
  max-width: 380px;
}
/* Without an account there is nobody to tie a hulpvraag to. */
.fd-invite-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 26px 12px 10px;
}
.fd-invite-login .material-icons {
  font-size: 32px;
  color: var(--clay);
}
.fd-invite-login strong {
  font-size: 15px;
}
.fd-invite-login p {
  margin: 0 0 10px;
  color: var(--ink-soft);
  max-width: 400px;
}
.fd-invite-login a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
/* Delen ter controle, of de kaart uit handen geven. */
.fd-invite-modes {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
@media (min-width: 720px) {
  .fd-invite-modes {
    grid-template-columns: 1fr 1fr;
  }
}
.fd-invite-mode {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  border: 1.5px solid #E5DED3;
  border-radius: 14px;
  background: var(--white);
}
.fd-invite-mode input {
  margin: 2px 0 0;
  accent-color: var(--clay);
  flex-shrink: 0;
}
.fd-invite-mode b {
  display: block;
  font-size: 13px;
}
.fd-invite-mode small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.fd-invite-mode:hover {
  border-color: var(--clay-tint);
}
.fd-invite-mode.active {
  border-color: var(--clay);
  background: var(--clay-tint);
}
.fd-invite-mode.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
/* ------------------------------------------------------------------------ */
/* PDF preview popup (pdf-preview-modal.component.js) - Voorbeeld/Drukklaar  */
/* ------------------------------------------------------------------------ */
html.pdf-preview-lock, html.pdf-preview-lock body {
  overflow: hidden;
}
.pdf-preview {
  --pp-ground: #EFEAE3;
  --pp-surface: #FFFFFF;
  --pp-ink: #2B2521;
  --pp-ink-2: #5E554E;
  --pp-muted: #978C82;
  --pp-line: #E6DED5;
  --pp-accent: #106E81;
  --pp-accent-ink: #007BA8;
  --pp-accent-soft: #dbe9ec;
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(33, 31, 26, 0.58);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: "Nunito", "Work Sans", system-ui, sans-serif;
  animation: pp-fade 0.18s ease-out;
}
.pdf-preview-dialog {
  width: min(1040px, 100%);
  height: min(900px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--pp-ground);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: pp-rise 0.24s cubic-bezier(0.2, 0.8, 0.25, 1);
  outline: none;
}
.pdf-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 16px 24px;
  background: var(--pp-surface);
  border-bottom: 1px solid var(--pp-line);
}
.pdf-preview-titles {
  min-width: 0;
}
.pdf-preview-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--pp-ink);
  line-height: 1.2;
}
.pdf-preview-sub {
  font-size: 13px;
  color: var(--pp-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdf-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pdf-preview-zoom {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: #F1ECE6;
}
.pdf-preview-zoom-value {
  min-width: 46px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--pp-ink-2);
  font-variant-numeric: tabular-nums;
}
.pdf-preview-icon {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pp-ink-2);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.pdf-preview-icon .material-icons {
  font-size: 20px;
}
.pdf-preview-icon:hover:not(:disabled) {
  background: var(--pp-accent-soft);
  color: var(--pp-accent-ink);
}
.pdf-preview-icon:disabled {
  opacity: 0.4;
  cursor: default;
}
.pdf-preview-icon:focus-visible {
  outline: 3px solid var(--pp-accent-soft);
  outline-offset: 1px;
}
.pdf-preview-close {
  background: #F1ECE6;
}
.pdf-preview-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--pp-accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pdf-preview-download .material-icons {
  font-size: 19px;
}
.pdf-preview-download:hover {
  background: var(--pp-accent-ink);
}
.pdf-preview-download:focus-visible {
  outline: 3px solid var(--pp-accent-soft);
  outline-offset: 2px;
}
.pdf-preview-body {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
}
.pdf-preview-pages {
  /* scrollbar-gutter: the pages are measured and rendered BEFORE they are in
     the DOM, so without a reserved gutter the first render measures the full
     width, the vertical scrollbar then appears, and every page ends up a
     scrollbar too wide - a horizontal scrollbar for nothing. Reserving it
     keeps the measured width the real one. renderPages() re-measures as a
     fallback for browsers without this. */
  flex: 1;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 32px 24px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 70%), var(--pp-ground);
}
.pdf-preview-page {
  display: block;
  max-width: none;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(33, 31, 26, 0.08), 0 18px 40px -18px rgba(33, 31, 26, 0.35);
}
.pdf-preview-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: var(--pp-ground);
}
.pdf-preview-loading, .pdf-preview-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px;
  text-align: center;
}
.pdf-preview-sheet {
  position: relative;
  width: 190px;
  aspect-ratio: 0.7092198582;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(33, 31, 26, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 9px;
  padding: 22px 20px;
}
.pdf-preview-sheet i {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #EFE7DA;
}
.pdf-preview-sheet i.short {
  width: 60%;
}
.pdf-preview-sheet::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 22px;
  height: 46%;
  border-radius: 3px;
  background: var(--pp-accent-soft);
}
.pdf-preview-sheet-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: pp-shine 1.6s ease-in-out infinite;
}
.pdf-preview-loading-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 360px;
}
.pdf-preview-loading-text strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--pp-ink);
}
.pdf-preview-loading-text span {
  font-size: 14px;
  color: var(--pp-ink-2);
  line-height: 1.5;
}
.pdf-preview-error {
  gap: 10px;
}
.pdf-preview-error > .material-icons {
  font-size: 40px;
  color: var(--pp-accent);
}
.pdf-preview-error strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--pp-ink);
}
.pdf-preview-error > span:not(.material-icons) {
  font-size: 14px;
  color: var(--pp-ink-2);
  max-width: 420px;
  line-height: 1.5;
  margin-bottom: 8px;
}
@keyframes pp-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pp-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pp-shine {
  to {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pdf-preview, .pdf-preview-dialog {
    animation: none;
  }
  .pdf-preview-sheet-shine {
    animation: none;
    opacity: 0;
  }
}
@media (max-width: 720px) {
  .pdf-preview {
    padding: 0;
  }
  .pdf-preview-dialog {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .pdf-preview-head {
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px 16px;
    flex-wrap: wrap;
  }
  .pdf-preview-zoom {
    display: none;
  }
  .pdf-preview-download span:last-child {
    display: none;
  }
  .pdf-preview-download {
    padding: 0 11px;
  }
  .pdf-preview-pages {
    padding: 18px 12px calc(28px + env(safe-area-inset-bottom, 0px));
    gap: 18px;
  }
}
/* ------------------------------------------------------------------------ */
/* "Je kaart is klaar" - a funeral director finished the family's card       */
/* (funeral-director-invite.component.js, doneRequest)                       */
/* ------------------------------------------------------------------------ */
.fd-done-notice {
  position: fixed;
  z-index: 9990;
  left: 50%;
  top: 76px;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 16px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid #D9E2D6;
  box-shadow: 0 18px 40px -20px rgba(33, 31, 26, 0.45);
  font-family: "Nunito", "Work Sans", system-ui, sans-serif;
  animation: fd-done-in 0.28s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.fd-done-icon {
  font-size: 26px;
  color: #3E7A5A;
}
.fd-done-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fd-done-text strong {
  font-size: 15px;
  font-weight: 800;
  color: #2B2521;
}
.fd-done-text span {
  font-size: 13.5px;
  color: #5E554E;
  overflow-wrap: anywhere;
}
.fd-done-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fd-done-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  background: #FFFFFF;
  color: #007BA8;
  border: 1.5px solid #106E81;
}
.fd-done-btn.primary {
  background: #106E81;
  color: #FFFFFF;
}
.fd-done-btn:hover {
  background: #dbe9ec;
}
.fd-done-btn.primary:hover {
  background: #007BA8;
  border-color: #007BA8;
}
.fd-done-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #F1ECE6;
  color: #5E554E;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.fd-done-close .material-icons {
  font-size: 18px;
}
@keyframes fd-done-in {
  from {
    opacity: 0;
    transform: translate(-50%, -10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fd-done-notice {
    animation: none;
  }
}
@media (max-width: 720px) {
  .fd-done-notice {
    top: auto;
    bottom: 84px;
    grid-template-columns: auto minmax(0, 1fr);
  }
  .fd-done-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}
/* Alleen bekijken: een overgedragen kaart (FuneralDirectorHelpRequestService). */
.drk-view-only-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 18px;
  background: var(--clay-tint, #F6EDE6);
  color: var(--ink, #2B2622);
  font-size: 13.5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.drk-view-only-bar .material-icons {
  font-size: 18px;
  color: var(--clay, #106E81);
}