@charset "UTF-8";
#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;
}
.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;
}
.canvas-foldline.vertical.center, .canvas-foldline.vertical.drieluik {
  border: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='5' height='5' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f37331' fill-opacity='0.75' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
  background-color: transparent;
  width: 9px;
}
.canvas-foldline.vertical-drieluik.first-fold {
  left: calc(33% - 4px) !important;
}
.canvas-foldline.vertical-drieluik.second-fold {
  left: calc(66% - 4px) !important;
}
.canvas-foldline.vertical.center {
  left: calc(50%) !important;
}
.wideFoldLine {
  border: none !important;
}
.wideFoldLine:after {
  background-image: url("data:image/svg+xml,%3Csvg width='5' height='5' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f37331' fill-opacity='0.75' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
  background-color: transparent;
  content: "";
  width: 9px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.2mm;
}
.canvas-foldline.horizontal.center {
  border: none !important;
  height: 9px;
  top: calc(50%) !important;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='5' height='5' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f37331' fill-opacity='0.75' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}
#canvasControls:not(.active) #marginToolbar {
  display: none;
}
#canvasControls.active #toggleMarginToolbar {
  background-color: #d50008;
  border-color: #d50008;
}
#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: #d50008 !important;
  color: #d50008 !important;
}
#canvasControls .margin-toolbar-action:hover {
  cursor: pointer;
}
#marginToolbar > *.btn.active:hover, #marginToolbar > *.btn.active:hover svg {
  color: #d50008;
}
#marginToolbar > *.btn:hover:not(.active), #marginToolbar > *.btn.active {
  background-color: #5d8e92;
  border-color: #5d8e92;
  color: #d50008;
}
#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: #5d8e92;
}
#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: #5d8e92;
  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: #5d8e92;
}
.float-end {
  float: right !important;
}
.float-end .btn-rnd {
  margin-left: 10px;
}
.btn-rnd.ui-grey {
  background: #404040;
}
.btn-rnd.ui-terairy {
  background: #5e4c3d;
}
.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: #404040;
}
#canvasArea #viewFaq {
  background: #5d8e92;
  padding: 5px 20px;
  border-radius: 2px;
  color: #fff;
  z-index: 10000;
  min-width: 164px;
  text-align: center;
  display: block;
  line-height: 38px;
}
#viewUserManual {
  background: #5d8e92;
  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: #333333;
  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: #d50008;
}
.category-filter-item {
  list-style: none;
  font-size: 18px;
  margin-bottom: 1px;
  padding: 10px 20px 10px 20px;
  color: #fff;
  background: #5d8e92;
  line-height: 18px;
}
.faq-item h2 {
  font-size: 18px;
  padding: 10px 20px 10px 20px;
  color: #fff;
  background: #5d8e92;
  margin: 0;
  line-height: 18px;
}
.faq-item .faq-body {
  background: white;
  color: black;
  padding: 20px;
}
.faq-item .faq-category {
  background: #99bfc2;
  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%;
}
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;
}
/* 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: #d50008;
  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: #d50008;
}
.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: #5d8e92;
  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: auto !important;
  z-index: 10;
}
.secondary-toolbar-active .interface-body #contentArea {
  top: 41px !important;
}
#canvasAreaWrapper {
  left: 0px;
  top: 0px;
  overflow: scroll;
  width: calc(100% - 0px);
  height: calc(100%);
}
.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: #d50008;
  color: #fff;
}
.content-section#editor #contentArea #footerArea {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #5e4c3d;
  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: #5d8e92 !important;
  cursor: pointer;
}
#text-helper .info-footer #next-field {
  background-color: #5e4c3d;
  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: #d50008;
  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;
  background: transparent url("../images/editor/grid_width1pt.png") center center repeat;
  pointer-events: none;
  /* background:transparent url('../images/editor/grid_1pt.png') center center repeat; */
  opacity: 0.6;
}
#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-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 #d50008;
  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(213, 0, 8, 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;
  outline: 1px solid #54575c;
}
.custom-foldline {
  top: 0;
  bottom: 0;
  position: absolute;
  border-left: 1px dashed #5d8e92;
  z-index: 4001;
}
.canvas-foldline {
  display: block;
  position: absolute;
  background: transparent;
  pointer-events: none;
  z-index: 4001;
}
.canvas-foldline.helper {
  border-color: #0b70b9 !important;
}
.canvas-foldline.horizontal {
  top: calc(50% - 4px);
  left: 0;
  width: 100%;
  height: 1px;
  border-top: 1px dashed #d50008;
}
.canvas-foldline.vertical {
  top: 0;
  left: calc(50% - 4px);
  width: 1px;
  height: 100%;
  border-left: 1px dashed #d50008;
}
.canvas-foldline.vertical-drieluik {
  top: 0;
  width: 1px;
  height: 100%;
  border-left: 1px dashed #d50008;
}
.canvas-foldline.vertical-drieluik#drieluik-1 {
  left: 33%;
}
.canvas-foldline.vertical-drieluik#drieluik-2 {
  left: 66%;
}
/* 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: #d50008;
}
#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: #99bfc2;
}
.rouwkaart-preview .view-card span {
  height: 42px;
  line-height: 42px;
  font-size: 16px;
}
.rouwkaart-preview .view-card {
  position: absolute;
  z-index: 9000;
  background: #5d8e92;
  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-foldline.helper.first-fold {
  border-color: #f37331 !important;
}
/* 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 i {
  height: 32px;
  line-height: 32px;
  display: inline-block;
  width: 32px;
  opacity: 0.75;
}
.canvas-vertical-toolbar > .toolbar-button:hover {
  cursor: pointer;
}
.canvas-vertical-toolbar > .toolbar-button:hover i {
  opacity: 1;
  background-color: rgba(213, 0, 8, 0.25);
}
.canvas-vertical-toolbar > .toolbar-button {
  height: 32px;
  width: 32px;
  text-align: center;
  font-size: 28px;
  line-height: 32px;
}
#canvas-tools-left {
  left: -42px;
}
#canvas-tools-right {
  right: -42px;
}
.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: #5d8e92;
  color: #fff;
  width: 40px;
  padding: 0;
}
#templateArea .template .edit-block:hover, #productArea .product .edit-block:hover {
  background-color: #99bfc2;
}
.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(213, 0, 8, 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: #d50008;
}
#templateArea .template.active .edit-block:hover, #productArea .product.active .edit-block:hover {
  background: #ff0009;
}
.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: #5d8e92;
  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: #d50008;
}
#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(213, 0, 8, 0.8);
}
.product .action-menu.open a:nth-child(2) {
  background-color: rgba(213, 0, 8, 0.5);
}
.product .action-menu.open a:hover {
  background-color: #5e4c3d;
}
.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: #d50008;
}
#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: #5d8e92;
  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: #d50008;
}
.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: #333333;
}
#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: #5e4c3d;
  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: #5d8e92;
  cursor: pointer;
}
#compact-editor {
  position: fixed;
  left: 50px;
  top: 200px;
  width: 480px;
  background: #d50008;
  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: #d50008 !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.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: #99bfc2;
}
.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: #333333;
  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: #d50008 !important;
}
.opacity-toggle:hover svg {
  fill: #d50008 !important;
}
.fonticon-container {
  width: 335px;
}
.icon-container {
  padding: 5px;
}
.fonticon-container {
  background: white;
}
.fonticon-container em:hover {
  color: #d50008 !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: #5d8e92;
  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: #333333;
  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, #text-editor-toolbar a:hover span.material-icons, #image-editor-toolbar a.active span.material-icons, #text-editor-toolbar a.active span.material-icons {
  color: #d50008;
}
#image-editor-toolbar .line-height-container, #text-editor-toolbar .line-height-container {
  padding: 0 10px;
}
#image-editor-toolbar .line-height-container label, #text-editor-toolbar .line-height-container label {
  font-size: 10px;
  margin: 0;
}
#image-editor-toolbar .line-height-container > *, #text-editor-toolbar .line-height-container > * {
  padding: 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#image-editor-toolbar .line-height-range-container #lineHeightRange, #text-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, #text-editor-toolbar .fonticon-container, #text-editor-toolbar .line-height-container, #text-editor-toolbar .opacity-range {
  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, #text-editor-toolbar .opacity-range span.material-icons {
  color: #222;
}
.shared-actions li:hover {
  cursor: pointer;
}
.shared-actions {
  display: flex;
}
#image-editor-toolbar .toolbar-tools, #text-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: 28px;
  width: 28px;
  border: solid 1px #ccc;
  border-radius: 4px;
  margin-left: 10px;
}
.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 {
  position: absolute;
  top: 40px;
  right: -137px;
  width: 321px;
  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;
}
.image-filter-wrapper .color-picker-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 364px;
}
.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 #d50008;
}
.colorcell :hover {
  outline: solid 2px #d50008;
  cursor: pointer;
}
.colorcell-wrap.selected {
  border: solid 1px #d50008;
}
.colorcell-wrap:hover {
  border: solid 1px #d50008;
}
.colorcell-wrap {
  float: left;
  padding: 2px;
  border: solid 1px rgba(0, 0, 0, 0.1);
  margin: 1px;
  border-radius: 4px;
}
.colorcell {
  float: left;
}
#image-editor-toolbar #fontColorContainer, #text-editor-toolbar #fontColorContainer {
  top: 40px;
  background: white;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 8px;
}
#image-editor-toolbar .colorpalette, #text-editor-toolbar .colorpalette {
  padding: 5px;
  background: white;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}
.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: #d50008 !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: #333333;
  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, #text-editor-toolbar ul li:hover a span.material-icons {
  color: #d50008 !important;
}
.popup-container .popup-container a span.material-icons, #image-editor-toolbar ul li a span.material-icons, #image-editor-toolbar ul li a, #text-editor-toolbar ul li a span.material-icons, #text-editor-toolbar ul li a {
  color: #222;
  height: 36px;
  line-height: 32px;
  width: 24px;
}
#image-editor-toolbar ul li, #text-editor-toolbar ul li {
  float: left;
  width: 36px;
  text-align: center;
}
#image-editor-toolbar ul, #text-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 > *, #text-editor-toolbar ul > li, #text-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, #text-editor-toolbar ul > li:not(:last-child):after, #text-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, #text-editor-toolbar {
  display: flex;
  justify-content: center;
}
#image-editor-toolbar .toolbar-tools li:last-child, #text-editor-toolbar .toolbar-tools li:last-child {
  float: right;
}
#image-editor-toolbar .toolbar-tools li:not(:last-child), #text-editor-toolbar .toolbar-tools li:not(:last-child) {
  padding: 5px;
}
#image-editor-toolbar .toolbar-tools li, #text-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, #text-editor-toolbar {
  width: 100%;
  height: 38px;
  line-height: 38px;
  display: flex;
}
#toggle-edit-finish {
  color: #fff;
  background-color: #5d8e92;
}
/* 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: #5d8e92;
}
.btn.duplicate-product, .btn.copy-product-texts, .btn.add-template-set, .btn.add-product {
  text-align: center;
  width: 100%;
  background-color: #5d8e92;
  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: #5d8e92;
  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: #333333;
}
.btn.copy-product-texts svg {
  height: 18px;
  width: 18px;
  fill: white;
}
.btn.copy-product-texts {
  background-color: #99bfc2;
  text-align: center;
}
.btn.copy-product-texts:hover {
  background-color: #5d8e92 !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: #99bfc2 !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: #5e4c3d;
  color: #fff;
  border-radius: 0;
  padding: 10px;
}
body .btn.add-addvert:hover {
  background-color: #705b49 !important;
}
body .btn.duplicate-product {
  background-color: #d50008;
  width: 100%;
  color: #fff;
  border-radius: 0;
  padding: 10px;
}
body .btn.duplicate-addvert {
  text-align: center;
  width: 100%;
  background-color: #d50008;
  color: #fff;
  border-radius: 0;
  padding: 10px;
}
body .btn.duplicate-addvert:hover {
  background-color: #ff0009 !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: #4c5054;
}
/* ELEMENT */
.element {
  position: absolute;
  z-index: 1000;
}
.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.active{
	z-index:4000!important;
}*/
.element.text.active {
  z-index: 10000 !important;
}
.ck-body-wrapper {
  display: none !important;
}
.element.text .content {
  width: 100%;
  height: auto;
  display: block;
  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 .content {
  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(213, 0, 8, 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: #5d8e92;
  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: #d50008;
  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: #5d8e92;
    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: #5d8e92;
  }
}
.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: #333333;
}
.popover.top .arrow {
  display: none;
}
.popover.top > .arrow:after {
  border-top-color: #333333;
}
.popover-content {
  padding: 3px;
}
.popover.left > .arrow {
  border-left-color: #333333;
  right: -10px;
}
.popover.left > .arrow:after {
  border-left-color: #333333;
}
.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: #333333;
  }
  .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: #d50008;
}
/* 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(213, 0, 8, 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: #99bfc2;
  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(213, 0, 8, 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: #d50008;
}
body .toggle-addvertiser.selected {
  background-color: #d50008;
}
#templateArea .panel-default > .panel-heading h4 a, #productArea .panel-default > .panel-heading h4 a {
  background-color: #d50008;
}
.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: #705b49;
}
#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(213, 0, 8, 0.5);
}
#text-edit-mode {
  width: 40%;
  display: block;
  float: right;
  background: #d50008;
  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: #d50008;
  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: #5d8e92;
}
#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: #d50008;
  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: #4c5054;
}
.panel#TextEdit .align li a.action.active, .panel#TextEdit .align li a.action:hover {
  background-color: #d50008;
  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: #d50008;
  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: #d50008;
  cursor: pointer;
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  height: 10px;
  width: 10px;
  background: #d50008;
  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: #4c5054;
  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: #4c5054;
  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: #4c5054;
  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: #4c5054;
  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: #54575c;
}
.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: #54575c;
  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: #54575c;
  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: #5d8e92;
}
.toggleColumns.active .type-label, .toggleAddressSend.active .icon i, .toggleColumns.active .icon i {
  color: #5d8e92;
}
.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: #54575c;
}
.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: #54575c;
  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: #54575c;
}
.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: #d50008;
  background-color: transparent;
  color: #333;
  border-radius: 0;
  text-align: left;
  padding: 0px;
}
.actionGroup ul li a i {
  margin-right: 6px;
  color: #d50008;
  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: #d50008;
  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: #d50008;
  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: #d50008;
  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: #54575c;
  border-radius: 0;
  text-align: left;
  margin-top: 5px;
  position: relative;
}
.btn-toggle-color {
  background-color: #d50008;
  color: #54575c;
  text-align: left;
  margin-top: 5px;
  margin-left: 8px;
  border-radius: 5px;
}
.btn-toggle-color:hover {
  background-color: #ff0009 !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: #d50008;
  border-color: #d50008;
}
.btn-primary:hover {
  background-color: #ff0009;
  border-color: #ff0009;
}
.btn-secondary {
  background-color: #5d8e92;
  border-color: #5d8e92;
}
.btn-secondary:hover {
  background-color: #99bfc2;
  border-color: #99bfc2;
}
body .swal2-styled.swal2-confirm, .swal2-styled.swal2-confirm.confirm-copy, .btn-success, .btn-success:active, .btn-success:focus {
  color: #fff;
  background-color: #d50008;
  border-color: #d50008;
}
.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: #5e4c3d;
  padding: 0 2px;
  border-radius: 25px;
  color: #fff;
}
.product-events > *:hover figure, .product-events > *:hover i {
  background: #5d8e92;
}
#toggleWhiteSpaceUnlock:hover {
  cursor: pointer;
  background-color: #5d8e92;
}
#toggleWhiteSpaceUnlock {
  margin-top: 24px;
  display: block;
  color: #fff;
  background-color: #d50008;
  height: 34px;
  width: 34px;
  text-align: center;
  line-height: 34px;
}
.swal2-styled.swal2-confirm.confirm-copy:hover, .btn-success:hover {
  color: #d50008;
  background-color: #fff !important;
  border-color: #d50008;
}
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: #5d8e92;
  border-color: #5d8e92;
}
.swal2-styled.swal2-cancel.cancel-copy:hover, .btn-default:hover {
  color: #5d8e92;
  background-color: #fff;
  border-color: #5d8e92;
}
.btn-default[disabled] {
  display: none;
  background-color: #5d8e92;
  border-color: #5d8e92;
}
.btn-success[disabled] {
  display: none;
  background-color: #d50008;
  border-color: #d50008;
}
.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: #f3fffc;
}
.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: #5d8e92;
  border-radius: 25px;
  padding: 3px 10px;
  font-size: 10px;
  text-decoration: none;
}
.logout_button:hover {
  cursor: pointer;
  background: #333333;
  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: #54575c;
}
.options > ul li, .wizardOptions > ul li, .previewPrintOptions > ul li {
  background-color: #d50008;
}
.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 #5d8e92;
  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: #d50008;
}
.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: #d50008;
}
.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: #d50008;
  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: #54575c;
  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: #d50008 !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: #d50008;
  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: #d50008;
  border-color: #d50008;
  color: #fff;
}
.btn-v2-primary:hover {
  border-color: #d50008 !important;
  color: #d50008 !important;
  background: white !important;
}
.btn-v2-secondary {
  background: #5d8e92;
  border-color: #5d8e92;
  color: #fff;
}
.btn-v2-secondary:hover {
  border-color: #5d8e92 !important;
  color: #5d8e92 !important;
  background: white !important;
}
.modal-header {
  position: relative;
  background: #5d8e92;
  color: #ffffff;
  border-bottom: 0;
  padding: 20px;
}
.modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 99999;
}
.progress-bar {
  background-color: #5e4c3d;
}
.modal-sub-header {
  position: relative;
  background: rgba(213, 0, 8, 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: #54575c;
}
.fa-fw.active {
  color: #d50008 !important;
}
#alignJustify.active svg {
  fill: #d50008 !important;
}
.preview-table {
  width: 100%;
  border: solid 1px #d50008;
}
.preview-table:not(:last-child) {
  margin-bottom: 20px;
}
.preview-table th {
  background: #d50008;
  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: #d50008;
}
.toggleAgenda.agenda-btn:hover {
  background-color: rgba(213, 0, 8, 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 #d50008;
}
#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 #d50008;
}
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/*****************************************************************************************************************************/
/************************************************************* 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: #d50008;
}
#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: #5d8e92;
  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: #d50008;
}
.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(213, 0, 8, 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: #5d8e92;
}
.btn-toggle-activate span {
  color: #fff !important;
}
.btn-toggle-templateposition, .btn-toggle-activate {
  background-color: #5e4c3d;
  color: #fff !important;
}
.btn-toggle-activate {
  background-color: #5e4c3d;
  color: #fff !important;
  line-height: 2;
}
.btn-toggle-activate:not(.activated):hover {
  background-color: #5d8e92;
}
.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: #d50008;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #ffffff;
  padding: 5px 0px;
}
.templateTitleWrap:hover {
  cursor: pointer;
  z-index: 99;
}
.templateTitle:hover {
  background-color: #99bfc2;
}
.templateTitleWrap {
  float: left;
  width: 100%;
  background-color: #5d8e92;
  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: #333333;
  width: 32px;
  height: 32px;
  line-height: 32px !important;
  color: white;
  font-size: 16px !important;
  border-radius: 25px;
}
.image-popover-toggle-i:hover {
  background-color: #333333;
}
.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: #ff0009;
}
.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: #333333;
}
.image-actions li:hover {
  background-color: #333333;
}
.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: #5d8e92;
  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: #d50008;
}
.templateTitleWrap:hover .fullTitle {
  display: block !important;
}
.fullTitle {
  outline: solid 1px #5e4c3d !important;
  left: 0;
  position: absolute;
  background-color: #5d8e92;
  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: #5d8e92;
}
#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 #d50008 !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(213, 0, 8, 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: #d50008;
}
#wizardModal .mce-panel {
  padding-right: 0.5px;
  display: block !important;
}
#editImageModal .editToolbar {
  background-color: #5d8e92;
  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: #d50008;
}
#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: #5d8e92;
    border-color: #5d8e92;
  }
  to {
    color: #99bfc2;
    border-color: #99bfc2;
  }
}
@keyframes autosaveB {
  from {
    color: #5d8e92;
    background-color: #5d8e92;
    height: 2px;
  }
  to {
    color: #99bfc2;
    background-color: #99bfc2;
    height: 3px;
  }
  to {
    color: #99bfc2;
    background-color: #99bfc2;
    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: #5d8e92;
}
#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: #5d8e92;
}
.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: #d50008;
  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: #d50008;
  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: #d50008;
  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: #d50008;
  background-color: #fff;
  border-color: #d50008;
}
@-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: #333333;
}
.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: #333333 !important;
}
.mce-btn {
  background-color: #333333 !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: #ff0009 !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: #ff0009 !important;
}
.quickedit .fa-lock {
  color: #d50008;
}
.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 #d50008;
}
.raster-image:hover, .raster-image.selected {
  background-image: linear-gradient(315deg, #ffffff 0%, #9EA5AD 74%);
  outline: dashed 2px #5d8e92;
}
.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: #5e4c3d;
  display: block;
  padding: 3px 3px;
  border-radius: 99px;
  width: 28px;
  height: 28px;
  line-height: 22px;
  margin-bottom: 2px;
}
.rasterImageUpload i:hover {
  background: #d50008;
  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: #5d8e92;
}
.abovo-places.map-active .toggleAbovoMap:nth-child(1) {
  background-color: #d50008;
}
.abovo-places:not(.map-active) .toggleAbovoMap:nth-child(2) {
  background-color: #d50008;
}
.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(213, 0, 8, 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(213, 0, 8, 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(213, 0, 8, 0.8);
  border-radius: 2px;
}
.order_detail_preview_wrap > h4 {
  text-align: center;
  font-weight: 500;
  background: rgba(213, 0, 8, 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(213, 0, 8, 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: #5d8e92;
}
.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(213, 0, 8, 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: #d50008;
}
.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: #d50008;
  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(213, 0, 8, 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: #d50008;
}
#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: #99bfc2 !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: #5d8e92;
  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: #99bfc2;
}
#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: #5d8e92;
  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: #5d8e92;
  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: #d50008;
  text-align: center;
  border-radius: 24px;
  margin-left: 5px;
}
#showPriceCalculation:hover {
  cursor: pointer;
  background: #ff0009;
}
#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 #5e4c3d !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: #5d8e92;
  float: left;
  font-size: 20px;
  margin-left: 10px;
}
.moveRelation:hover {
  color: #99bfc2;
}
/****
 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 #5d8e92;
  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: #5d8e92;
  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: #5d8e92;
  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: #99bfc2;
}
.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 {
  max-width: none !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: #5d8e92;
  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: #ff898d;
}
.progress::-webkit-progress-value, progress[value]::-webkit-progress-value {
  background-color: #d50008;
}
.progress-materializecss {
  margin: 5px 0;
  position: relative;
  height: 4px;
  display: block;
  width: 100%;
  background-color: #ff898d;
  border-radius: 2px;
  margin: 0.5rem 0 1rem 0;
  overflow: hidden;
}
.progress-materializecss .indeterminate {
  background-color: #d50008;
}
.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;
}
.back-page.product-oblong-a5 .canvas-foldline.vertical:not(.helper):not(.center), .back-page.product-oblong-standaard .canvas-foldline.vertical:not(.helper):not(.center), .back-page.product-rouwkaarten-a5 .canvas-foldline.vertical:not(.helper):not(.center), .back-page.product-rouwkaarten-staand .canvas-foldline.vertical:not(.helper):not(.center), .back-page.product-rouwkaarten-a5-staand .canvas-foldline.vertical:not(.helper):not(.center), .back-page.product-rouwkaart-fotocollage .canvas-foldline.vertical:not(.helper):not(.center), .back-page.product-rouwkaarten-vierkant .canvas-foldline.vertical:not(.helper):not(.center) {
  left: 50% !important;
}
.back-page.product-rouwkaarten-a5-liggend .canvas-foldline.horizontal:not(.helper):not(.center), .back-page.product-rouwkaarten-liggend .canvas-foldline.horizontal:not(.helper):not(.center) {
  top: 50% !important;
}
body .front-page.product-dankbetuiging-als-prent .canvas-foldline.vertical:not(.helper).center, body .front-page.product-dankbetuigingskaart-als-prent .canvas-foldline.vertical:not(.helper).center, body .front-page.product-oblong-a5 .canvas-foldline.vertical:not(.helper).center, body .front-page.product-oblong-standaard .canvas-foldline.vertical:not(.helper).center, body .front-page.product-rouwkaarten-a5 .canvas-foldline.vertical:not(.helper).center, body .front-page.product-rouwkaarten-staand .canvas-foldline.vertical:not(.helper).center, body .front-page.product-rouwkaarten-a5-staand .canvas-foldline.vertical:not(.helper).center, body .front-page.product-rouwkaart-fotocollage .canvas-foldline.vertical:not(.helper).center, body .front-page.product-rouwkaarten-vierkant .canvas-foldline.vertical:not(.helper).center {
  border-left: dashed 1px #f37331 !important;
  left: calc(50% - 1mm) !important;
  background-image: none !important;
}
body .front-page.product-dankbetuigingskaart-als-prent .canvas-foldline.horizontal:not(.helper).center, body .front-page.product-dankbetuiging-als-prent .canvas-foldline.horizontal:not(.helper).center, body .front-page.product-rouwkaarten-a5-liggend .canvas-foldline.horizontal:not(.helper).center, body .front-page.product-rouwkaarten-liggend .canvas-foldline.horizontal:not(.helper).center {
  border-top: dashed 1px #f37331 !important;
  top: calc(50% - 1mm) !important;
  background-image: none !important;
}
.expanded .canvas-foldline.vertical-helper {
  border-left: solid 2px #d50008 !important;
  border-color: #d50008 !important;
  display: block !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 #d50008;
  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;
}
#interface-container .interface-body {
  display: flex;
  height: calc(100vh - 37px);
  overflow: hidden;
  position: relative;
}
#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 #404040;
}
#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: #d50008 !important;
}
#interface-container .interface-header li.clipboard-item:not(.disabled):not(.disable-hover):hover *:not(.tooltip) {
  fill: #d50008 !important;
  color: #d50008 !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-container .interface-footer {
  height: 40px;
  padding: 7px 20px;
}
.interface-footer > .float-start {
  left: 80px;
}
.interface-footer > .float-end {
  right: 20px;
}
.interface-footer > .float-start, .interface-footer > .float-end {
  position: absolute;
  bottom: 65px;
}
#interface-container .interface-footer {
  position: fixed;
  bottom: -50px;
  z-index: 9000;
}
#interface-container .interface-header {
  padding: 0;
}
.zoom-window {
  height: 36px;
  background: white;
  border-radius: 999px;
  line-height: 36px;
  position: absolute;
  right: 20px;
  bottom: 10px;
  box-shadow: rgba(149, 157, 165, 0.2) 0 2px 8px;
  padding: 0 5px;
  width: 136px;
}
.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: 30px;
  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;
  position: absolute;
  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: #d50008;
}
.layer-type, .layer-actions {
  width: 36px;
}
.left-sidebar-wrapper {
  z-index: 1;
  display: flex;
  justify-content: center;
}
#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 {
  width: 240px;
  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.images {
  width: 320px;
}
#left-content-sidebar #image-container .dz-texture .templateTitleWrap {
  float: left;
  width: 100%;
  background-color: #5d8e92;
  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 #d50008;
}
#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: #d50008;
}
#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 #5d8e92;
  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(29, 60, 52, 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: #d50008;
  color: #fff;
}
#left-content-sidebar #dz-upload:hover {
  cursor: pointer;
  background: #5d8e92 !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 #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 #d50008;
  cursor: pointer;
}
#left-content-sidebar #image-container .dz-preview img {
  width: 100%;
  height: auto;
}
.actions-left-sidebar .toggle-action:hover {
  background: #f1f1f1;
  color: #5d8e92;
  cursor: pointer;
}
.actions-left-sidebar .toggle-action:hover, .actions-left-sidebar .toggle-action.active {
  background: #f1f1f1;
  color: #5d8e92;
}
.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: #5d8e92 !important;
  color: #5d8e92 !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: #5d8e92;
}
.image-library-toolbar ul li span {
  height: 36px;
  width: 36px;
  display: block;
  text-align: center;
  line-height: 36px;
  background: #d50008;
  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: #5d8e92;
}
.image-library-toolbar ul li.clipboard-item:hover span {
  background: #99bfc2;
}
.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: #ff0009;
}
.toggle-edit-mode .lable {
  margin-left: 5px;
}
#userModal #edit-mode {
  width: 100px;
  display: inline-block;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  background: #d50008;
  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: #5e4c3d;
  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 #5e4c3d;
}
.btn-akkoord i {
  color: #5e4c3d;
}
.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: #5e4c3d;
}
.btn-akkoord .repeel-akkoord, .btn-akkoord .give-akkoord, .btn-akkoord .has-akkoord {
  font-size: 16px;
  color: #5e4c3d;
}
.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 #5d8e92 !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: #5e4c3d;
  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: #d50008;
  border-color: #d50008;
  display: inline-block;
  text-align: center;
  outline: none !important;
}
#addressModal .modal-footer a:hover, #addressModal .modal-footer button:not(.disabled):hover {
  background-color: #5e4c3d;
  border-color: #5e4c3d;
}
#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: #5d8e92;
  color: #fff;
}
.button-address-modal:hover {
  cursor: pointer;
  background: #99bfc2;
}
.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: #5e4c3d;
}
#addressHeaders button {
  background: #d50008;
  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: #d50008;
  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: #5e4c3d;
}
#loadedAddresses i {
  background: #d50008;
  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: #5d8e92;
}
#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: #5d8e92;
  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: #5e4c3d;
}
.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: #5d8e92;
  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: #5e4c3d !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: #d50008;
  height: 42px;
  color: #fff;
  line-height: 42px;
  padding: 0 20px;
  margin: 0;
  border: 0;
  outline: none;
}
#addressDropzone {
  border: dashed #5d8e92;
  clear: both;
  padding: 20px;
  margin: 20px 0px 0px;
  text-align: center;
}
.dwt-tooltip > span {
  position: relative;
  background: #5e4c3d;
  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: #5e4c3d transparent transparent transparent;
  top: -15px;
  transform: translateY(20px);
}
.dwt-tooltip > span:after {
  content: attr(data-tooltip);
  background: #5e4c3d;
  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: #5d8e92;
  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: #5d8e92;
  height: 1px;
  content: "";
  left: 0;
  right: 0;
  top: 30px;
}
.product-filter-column h4:before {
  position: absolute;
  background-color: #5d8e92;
  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: #5d8e92 !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: #5d8e92;
}
.v2-icon {
  height: 25px;
  width: 25px;
  background: #5d8e92;
  line-height: 25px !important;
  background: #5d8e92;
  text-align: center;
  font-size: 12px;
  color: #fff;
}
.v2-icon.round {
  border-radius: 24px;
}
#productCount {
  color: #5d8e92;
}
.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: #5d8e92;
}
.toggle-search p:hover, .search-auto-complete .v2-icon:hover, .select-poem:hover {
  cursor: pointer;
}
.select-poem:after {
  position: absolute;
  background-color: #5d8e92;
  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: #d50008 !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;
    overflow: scroll;
    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: #d50008;
}
.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;
}
/**
 * Dynamic Font Selector
 */
#dynamic-font-selector {
  background: white;
  position: relative;
  margin: 3px 10px;
  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: #d50008;
}
.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: #d50008;
}
.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: #d50008;
}
.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 #d50008;
  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 #d50008;
  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;
  }
  .mobile-topbar-component span {
    background: #d50008;
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center;
    color: white;
    border-radius: 4px;
  }
  #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 #d50008;
    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: #333;
    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;
  }
  .text-tab .alignTextContainer li a:hover, .text-tab .alignTextContainer li a.active, .text-tab .fontOptionsContainer li a:hover, .text-tab .fontOptionsContainer li a.active {
    border: solid 1px #d50008;
  }
  .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: #333;
  }
  #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: #333;
    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: #588589;
  }
  .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: #d50008;
  }
  .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 #d50008;
  }
  .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;
  }
}