/** font for our logo **/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --cm-yellow:  rgb(252,178,20);
    --cm-pale-yellow: #feef9e;
    --cm-green: rgb(19,60,65);
    --cm-light-green: rgb(132,175,176);
    --cm-dark-green: rgb(13,46,50);
    --cm-dark-green-transparent: rgba(13,46,50,0.6);
    --cm-light-green-transparent: rgba(132,175,176,0.6);
    --cm-white: #ffffff;
    --cm-danger: #F44336;
    --cm-danger-soft: rgba(244, 67, 102, 0.62);
    --cm-dark-gray: #444;
    --cm-mid-gray:  #777 ;
    --cm-nav-color: rgb(169,169,169);
    --cm-light-gray: rgb(227,238,231) ;
    --cm-very-light-gray: #f8f8f8;
    --cm-lines-color: rgb(210,215,208);
    --cm-color-credited-bg: #edbd6b;
    --cm-color-danger-bg: rgb(254,160,163);
    --cm-color-warning-bg: rgb(254,222,131);
    --cm-color-success-bg: rgb(178,246,178);
    --cm-color-info-bg: #2196F3;
    --cm-color-danger:  rgb(154,59,62);
    --cm-color-credited: #875807;
    --cm-color-warning: rgb(143,111,33);
    --cm-color-success: rgb(43,132,40);
    --cm-color-info: #fff;
    --cm-font-color: rgb(39,104,111);
    --cm-table-heading-color: rgb(90,145,149);
    --cm-table-heading-bg-color: rgb(240,246,242);
    --cm-background-color: rgb(227,238,231) ;
    --cm-border-radius: 4px;
    --cm-card-border-radius: 4px;
    --cm-grid-column-gap: 30px; /* TODO rem? */
    --cm-grid-row-gap: 30px; /* TODO rem? */
    --cm-button-border-radius: 24px;

    /* fonts */
    --cm-ui-font-family: 'figtree', sans-serif;

    /* font sizes */
    --cm-html-font-size: 15px;
    /* from here on, everything in rem or em! */
    --cm-normal-font-size: 1rem;
    --cm-h1-font-size: 1.86rem;
    --cm-h2-font-size: 1.7333rem;
    --cm-h3-font-size: 1.466rem;
    --cm-h4-font-size: 1.06rem;
    --cm-h5-font-size: 1.0rem;
    --cm-h6-font-size: 0.9rem;

    /* order status colors */
    --cm-status-concept: rgb(103,103,103);
    --cm-status-new: #5c5a5a;
    --cm-status-cancelled: #d68d0f;
    --cm-status-estimate: #7b6585;
    --cm-status-option: #177896;
    --cm-status-to-invoice: #fff;
    --cm-status-invoiced: #851b1b;
    --cm-status-confirmed: #7f8c7a;
    --cm-status-completed: #545353;
    --cm-status-partial-invoiced: #b84852;
    --cm-status-to-invoice: #961529;
    --cm-status-prospect: #28728a;
    --cm-status-awaiting-confirmation: #2a7d6f;

    --cm-status-concept-bg: #f2f2f2;
    --cm-status-new-bg: #dedede;
    --cm-status-cancelled-bg: rgb(253,234,201);
    --cm-status-estimate-bg: #f0e4f5; /* #e7d8ed; */
    --cm-status-option-bg: #c6ebf7 ;
    --cm-status-to-invoice-bg: #e3b8b8; /* #f78f8f; /* #fc7e91; */
    --cm-status-invoiced-bg: #c48b8b ; /* #c98181; /*#fc6f6f; */
    --cm-status-partial-invoiced-bg: #f0d1d4;
    --cm-status-confirmed-bg: rgb(222,249,213);
    --cm-status-completed-bg: #b3bbc9;
    --cm-status-prospect-bg: #cef5f4;
    --cm-status-awaiting-confirmation-bg: #afeee4;

    --cm-status-concept-bg-secondary: #aaa;
    --cm-status-new-bg-secondary: #8a8a8a;
    --cm-status-cancelled-bg-secondary: #d68d0f;
    --cm-status-estimate-bg-secondary: #aa80bd;
    --cm-status-option-bg-secondary: #4a9bb5;
    --cm-status-to-invoice-bg-secondary: #b06d6d;
    --cm-status-confirmed-bg-secondary: #96b08d;
    --cm-status-invoiced-bg-secondary: #914141;
    --cm-status-partial-invoiced-bg-secondary: #b5607e;
    --cm-status-completed-bg-secondary: #757474;
    --cm-status-prospect-bg-secondary: #4a9bb5;
    --cm-status-awaiting-confirmation-bg-secondary: #6bc4b5;
}


.tr-debug {
  box-shadow: 0 0 0 2px rgba(32,32,32,0.6);
}

.label-success {
    background-color: var(--cm-color-success-bg);
    color: var(--cm-color-success);
}

@keyframes popIn {
    0% { color: white; opacity: 0; transform: scale(1.44, 1.1) rotate(-5deg); }
    100% { color: inherit; opacity: 1; transform: scale(1,1) rotate(0deg); }
}

@keyframes popIn2 {
    0% { opacity: 0%; transform: scale(4.7, 1.3) rotate(-34deg); }
    40% { opacity: 50%; transform: rotate(8deg); }
    60% { opacity: 75%; transform: scale(1, 1.8) rotate(13deg); }
    100% { opacity: 100%; transform: scale(1, 1) roate(0deg); }
}

@keyframes popIn3 {
    0% { color: white; opacity: 0; transform: scale(1.1, 1); }
    100% { color: inherit; opacity: 1; transform: scale(1, 1); }
}

@keyframes popIn4 {
    0% { transform: scale(1, 1) rotate(0deg); }
    23% { transform: scale(0.97, 0.97); }
    38% { transform: scale(1.03, 1.03) rotate(2deg); }
    62% { transform: rotate(-1deg); }
    100% { transform: scale(1, 1); }
}


@keyframes emphasizeIt {
    0% { border-width: thick; border-color: var(--cm-yellow); }
    100% { border-width: thin; }
}
@keyframes emphasizeGlowing {
    0% { border-color: var(--cm-yellow); }
    100% { border-color: transparent; }
}
@keyframes emphasizeCompleted {
    0% { border-color: var(--cm-yellow); }
    50% { border-width: medium; }
    100% { border-color: var(--cm-green); border-width: thin; }
}

@keyframes horizontalSlide {
    0% { opacity: 0%; transform: translate(-250px,0); }
    50% { opacity: 100%; transform: translate(0); }
    100% { opacity: 0%; transform: translate(250px,0); }
}

.horizontal-slide {
    display: inline-block;
    animation: horizontalSlide 5s ease-in-out infinite;
}

@keyframes slideDown {
    0% { opacity: 0%; transform: translateY(-50px); }
    75% { opacity: 50%; }
    100% { opacity: 100%; transform: translate(0); }
}

.slide-down {
    animation: slideDown 0.1s ease-out;
}

@keyframes slideLeft {
    0% { opacity: 0%; transform: translateX(50px); }
    75% { opacity: 50%; }
    100% { opacity: 100%; transform: translate(0); }
}

.slide-left {
    animation: slideLeft 0.1s ease-out;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate-border-angle {
  0%     { --angle: 0deg; }
  100%   { --angle: 360deg; }
}

.moving-border {
  position: relative;
}

.btn.moving-border:hover {
  background-color: rgba(255,255,255,0.6);
}

.moving-border::before,
.moving-border::after {
  content: "";
  position: absolute;
  inset: -0.2rem;
  z-index: -1;
  background: linear-gradient(var(--angle), var(--cm-yellow),  #C3F2FF, var(--cm-green));
  animation: rotate-border-angle 10s linear infinite;
  border-radius: var(--cm-button-border-radius) !important;
}

.moving-border:hover {
  color:black;
}

.moving-border:hover::before,
.moving-border:hover::after {
  animation-duration: 3s;
  animation-direction: reverse;
}

.moving-border::after {
  xfilter: blur(10px);
}

.ql-align-justify {
    text-align: justify;
}

.estimate-page-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.estimate-page-wrap h1,
.estimate-page-wrap h2,
.estimate-page-wrap h3,
.estimate-page-wrap h4,
.estimate-page-wrap h5 {
    color: inherit;
}

.Panton-ExtraBold {
	font-family: Panton-ExtraBold;
	font-weight: normal;
	font-style: normal;
}

.Panton-Regular {
	  font-family: Panton-Regular;
	  font-weight: normal;
	  font-style: normal;
}

.w-95-procent {
   width: 95%;
}

.align-center {

    text-align: center;
}
.delay-1s {
    animation-delay: 1s;
}

.loading-popup-monkey {

}

.hourly-rate-form {
    display: flex;
}

.hourly-rate-form div:nth-of-type(1) {
}

.hourly-rate-form div.money input {
    height: 21px !important;
}

.hourly-rate-form div:nth-of-type(2) {
    width: 60px;
    margin-right: 5px;
}


.check-list {
    display: flex;
    border-bottom: 1px solid #ededed;
    padding: 10px 0px;
    text-align: left;
}

.check-list:last-of-type {
    border: none;
}
.check-list .check-box > a {
    margin-right: 40px;
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    line-height: 60px;
    font-size: 30px;
}

.loading-minimal {
    width: 100%;
    height: 100vh;
    display: flex;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(230,230,230,1) 100%);
}

.loading-minimal img {
    margin: auto;
    width: 220px;
}


[data-current-skin="bluegray"] {
    /*
background-color: #353A65;
    background: linear-gradient(220deg, #353A65 0%, #353A65 50%, #353A65 100%);
*/
    background-color: var(--cm-green)
}

.s-profile > a {
    display: block;
    height: 60px;
    margin-bottom: 5px;
    width: 100%;
    /*background: url(../img/profile-menu.png) left top no-repeat;*/
    background-color: #fff;
    background-size: auto auto;
    background-size: 100%;
}

.s-profile > a .sp-pic {
    padding: 12px;
}

.s-profile .sp-pic > img {
    width: 47px;
    height: 47px;
    border-radius: 50%;
    border: 0px solid rgba(0,0,0,.14);
    box-sizing: content-box;
}
/* The whole footer sits inside one rounded pill container, with the
   avatar + icons spread evenly across it. */
.nav-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 12px 10px;
    padding: 7px 12px;
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 30px;
}
.nav-footer .nav-footer-avatar {
    display: inline-flex;
    border-radius: 50%;
}
.nav-footer .nav-footer-avatar.active {
    box-shadow: 0 0 0 2px var(--cm-yellow);
}
.nav-footer .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
}

/* Icons sit bare on the container; only hover / active state fills a pill. */
.nav-footer .nav-footer-icon a {
    color: var(--cm-white) !important;
    font-size: 1.3rem;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    background-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-footer .nav-footer-icon a:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: var(--cm-white) !important;
}

/* Active footer icon: pale-yellow pill, matching the main-menu active look. */
.nav-footer .nav-footer-icon.active a,
.nav-footer .nav-footer-icon.active a:hover {
    background-color: var(--cm-pale-yellow);
    color: var(--cm-green) !important;
}

/* Main-nav items are inset uniformly so the active/hover pill reads as a
   rounded pill without shifting the other items. */
.main-menu > li > a {
    margin: 2px 10px;
    border-radius: 30px;
}
.main-menu > li > a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 30px;
}
.main-menu > li.active > a,
.main-menu > li.active:hover > a {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--cm-white);
}
.main-menu > li.active > a > i {
    color: var(--cm-yellow);
}
/* The icon glyph sits optically higher than its box centre, so nudge the
   label up a touch to line the two up on the vertical centre. */
.main-menu > li > a .nav-item-text {
    position: relative;
    top: -2px;
}
/* Keep the collapsed (icon-only) nav flush — no pill inset. */
.sidebar.move-out .main-menu > li > a {
    margin: 0;
    border-radius: 0;
}

.user-info {
    flex-grow: 1;
    font-size: 0.8rem;
}

.user-info .username {
    color: var(--cm-yellow);
}
.user-info .company {
    color: var(--cm-nav-color);
}

.app-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-left: 20px;
    gap: 5px;
}
.app-logo-wrap .company {
    color: var(--cm-nav-color);
}
.sidebar .app-logo {
    margin-top: 10px;
}

.company.select select {
    background-color: var(--cm-green);
    border: none;
    border-radius: 0;
    color: var(--cm-nav-color);
}

body .company.select:hover::before {
    background-image: url("../img/caret_inversed.png") !important;
}

body .company.select::before {
    background-image: none !important;
}

.user-info .my-profile a {
    color: var(--cm-white);
}
.bgm-green {
    background-color: #6fd273;
}
.cm-grid {
    display: grid;
    grid-column-gap: 30px;
    grid-row-gap: 20px;
}

.cm-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.status-checkboxes {
    gap: 20px;
    flex-wrap: wrap;

}

.report-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}


.oo-checkbox-grid {
    margin-top: 5px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Order-overview settings: each section (Gegevens, Productinformatie, …) is a
   column; its checkboxes stack vertically within the column. */
.oo-groups-grid {
    margin-top: 24px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: start;
}

.oo-checkbox-group > b {
    display: block;
    margin-bottom: 8px;
}

.oo-checkbox-group-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oo-checkbox-group-items .checkbox {
    margin: 0;
}

/* Online order-overview viewer: the section blocks no longer sit inside an
   outer card, so give them their own outline (matches the order editor). */
.order-overview-viewer .card {
    border: 1px solid var(--cm-lines-color);
    border-radius: 8px;
}

.cm-grid  .checkbox {
    margin-top: 0px;
}

.cm-grid.three-col {
    grid-template-columns: 1fr 1fr 1fr;
}

.cm-grid.auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}


/* Responsive Media Queries */

.hide-xs { display: revert; }
.hide-sm { display: revert; }
.hide-md { display: revert; }
.hide-lg { display: revert; }
.hide-xl { display: revert; }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 768px) {
    .xs-only { display: revert !important; }
    .hide-xs { display: none !important; }

    .desktop-view .estimate-page.a4-portrait {
        display: none;
    }

    .mobile-view .estimate-page.a4-portrait {
        display: revert;
    }
    .mobile-view .estimate-section:not(.responsive-bg-image) {
        margin-left: 2px;
        margin-right: 2px;
    }
    .mobile-view .estimate-section.responsive-bg-image {
        margin-left: 0px;
        margin-right: 0px;
    }


    .intercom-lightweight-app-launcher, .intercom-launcher {
        display: none !important;
    }

    .hero .sub-slogan {
        flex-direction: column;
        text-align: center;
    }
    #app-logo-login {
        width: 320px;
    }

    .maty-block {
        width: 100%;
    }
    .card .card-header .actions {
        position: static;
        margin-left: 10px;
    }
    .orders-list .actions {
    }

    .orders-list .actions > li:first-of-type {
        display: block;
    }

    .modal.fixed {
        position: static;
    }
    .normal-modal .modal-dialog {
        width: 95% !important;
    }

    .modal-body label {
        display: block;
    }
    .order-filter-modal .filter-button {
        margin-bottom: 10px;
    }

    .filter-button-row {
        margin-bottom: 70px;
    }

    .order-editor-grid {
        display: flex;
        flex-direction: column;
    }

    .alternative-group-wrap {
        width: 100%;
    }

    .get-started-buttons {
        flex-direction: row;
        align-items: space-evenly;
    }

    .get-started-buttons > div {
        margin-top: 10px;
        margin-left: 0px !important;
    }

    #l-register {
        padding-left: 15px;
        padding-right: 15px;
    }

    .center-box img {
        max-width: 90%;
    }

    #site .nav {
        height: 390px;
    }

    #site .nav .pull-left {
        display: inline-block;
        width: 100%;
        float: none !important;
    }

    #site .nav .pull-left li {
        display: block;
    }

    #site .nav .pull-right {
        display: inline-block;
        width: 100%;
        float: none !important;
    }

    #site .nav .pull-right li {
        display: block;
    }

    #site .nav li {
        padding: 10px;
        display: block;
        width: 100%;
        border-bottom: 1px solid #ededed;
    }

    #site .nav li.sign-up {
        margin-top: 10px;
    }

    #site .nav li a {
        display: block;
    }

    #site .nav li.flags a {
        display: inline-block;
    }

    .staff-portal-grid-id td .col-md-2 .pull-right {
        float: none !important;
    }

    .wildatheart > div {
        column-count: 2;
    }

    .partyz .content {
        background-size: cover;
    }

    .partyz .content-logo {
        position: static;
        width: 200px;
        margin: 0 auto;
    }

    .partyz .content-text {
        position: static;
        margin-top: 20px;
        width: 100%;
    }

}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .sm-only { display: revert !important; }
    .hide-sm { display: none !important; }

    .desktop-view .estimate-page.a4-portrait {
        display: revert;
    }
    .mobile-view .estimate-page.a4-portrait {
        display: none;
    }
    .mobile-view .estimate-section:not(.responsive-bg-image) {
        margin-left: 8px;
        margin-right: 8px;
    }
    .mobile-view .estimate-section.responsive-bg-image {
        margin-left: 0px;
        margin-right: 0px;
    }

}

/* Extra small AND small devices!  */
@media only screen and (max-width: 768px) {
    .order-editor-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "general general"
            "customer location"
            "products products"
            "comments comments"
            "planning planning"
            "estimates estimates"
            "invoices invoices"
            "view-estimate view-estimate"
            "internal-comments internal-comments"
            "staff staff"
            "sent-items sent-items"
            "files files"
            "margin margin"
            "ingredients ingredients"
            "activitylog activitylog";
    }

    .staff-portal-grid-id tbody tr td {
        display: flex;
        flex-direction: column;
        padding-left: 30px;
    }

    .staff-portal-grid-id tbody tr {

        border: 2px solid black;
    }

    .price-grid {
        grid-template-columns: 1fr;
    }
}

#content .container-fluid {
    padding-left: 70px;
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .md-only { display: revert !important; }
    .hide-md { display: none !important; }
}


/* Extra small, small AND medium devices */
@media only screen and (max-width: 992px) {
    .desktop-view .estimate-page.a4-landscape {
        display: none;
    }
    .desktop-view .estimate-page.page-16-9 {
        display: none;
    }

    .mobile-view .estimate-page.a4-landscape {
        display: revert;
    }
    .mobile-view .estimate-page.page-16-9 {
        display: revert;
    }
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .lg-only { display: revert !important; }
    .hide-lg { display: none !important; }

    .desktop-view .estimate-page.page-16-9 {
        display: revert;
    }
    .desktop-view .estimate-page.a4-landscape {
        display: revert;
    }

    .mobile-view .estimate-page.a4-landscape {
        display: none;
    }
    .mobile-view .estimate-page.page-16-9 {
        display: none;
    }

    .modal-dialog {
     /*   width: 922px; */
    }
    .cm-grid.two-col {
        grid-template-columns: 1fr 1fr;
    }
}

/* Extra small, small, medium AND large devices */
@media only screen and (max-width: 1200px) {
    #site .nav li {
        padding: 20px 25px;
    }
    #site .nav li.sign-up {
        padding: 10px 20px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .xl-only { display: revert !important; }
    .hide-xl { display: none !important; }

    .invoice-editor .document {
        width: 760px !important;
    }
    .modal-dialog {
/*        width: 950px; */
    }
    #content .container-fluid.container-margin-left {
        padding-left: 290px;
    }
}

.xs-only { display: none; }
.sm-only { display: none; }
.md-only { display: none; }
.lg-only { display: none; }
.xl-only { display: none; }

/* END OF RESPONSIVE MEDIA QUERIES */

.mobile-view .estimate-column { /* Responsive estimate columns on smaller screens */
    width: 100%;
    margin: 0px;
}

.s-profile > a .sp-info {
    padding: 14px 15px;
    color: #16192B;
    margin-top: 7px;
    position: relative;
    border-bottom: 1px dashed #ededed;
}


.s-profile > a .sp-info span {
    font-weight: bold;
}


table .commands  {
    vertical-align: top !important;
    padding-top: 13px !important;
}

.bootgrid-table {
    width: 100% !important;
}

.order-overview .bootgrid-table tbody td:last-of-type {
    padding-right: 5px !important;
}
.order-overview .bootgrid-table tbody td:last-of-type .delete {
    margin-right: 20px;
}


table .commands .commands-inner {
    display: flex;
    gap: 5px;
}

.ungrouped

.ungrouped.bootgrid-table .commands {
    display: table-cell !important;
    overflow: hidden;
}

.ungrouped.bootgrid-table td {
    border-top: 1px solid #f3f3f3;
}

.s-profile > a .sp-info > i {
    font-size: 19px;
    line-height: 100%;
    position: absolute;
    right: 15px;
    top: 7px;
    -webkit-transition: all;
    -o-transition: all;
    transition: all;
        transition-duration: 0s;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

.su-stats {
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 0px;
    grid-template-columns: 1fr 1fr;
}


.alternatives-widget .alternative {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.order-grid-name-cell a,
.order-grid-customer-cell a {
    font-weight: bold;
}

.alternative-group-wrap {
    max-width: 800px;
}

.alternative-products u li {
    flex-grow: 1;
}
.alternative-products u li > div.flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alternative-products .prod-name {
    flex-grow: 1;
    max-width: 66%;
}
.alternative-products .premium {
    width: 200px;
}
.alternative-settings {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 10px;
}

/*.alternative-settings > div {
    display: flex;
    margin-right: 20px;
    flex-direction: row;
    justify-content: flex-start;
}*/
.alternative-settings > div:last-of-type {
    margin-right: 0px;
}

.alternative-selector {
    display: flex;
    justify-content: space-between;
    /* width: 300px; */
}

.alternative-selector > div.select {
    width: 300px;
}

/* Selection-group product picker: a multi-select checklist (tick to add, untick
   to remove) replacing the per-item dropdown. Order is stable and delete-safe. */

/* Stretch the checklist to the full width of the (centred) flex-column settings
   parent so its scrollbar sits at the card's right edge, not floating inside the
   content next to the meerprijs box (CAT-1131). */
.alternative-checklist {
    width: 100%;
    align-self: stretch;
}

.alternative-checklist ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.alternative-checklist li.alternative-product-row {
    padding: 6px 0;
    margin: 0;
}

.alternative-checklist li.alternative-product-row .flex-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.alternative-checklist li.alternative-product-row .checkbox.prod-name {
    margin: 0;
    flex-grow: 1;
}

.alternative-checklist li.alternative-product-row.is-disabled {
    opacity: 0.5;
}

/* Selection group as a bordered, collapsible card (CAT-1131). */
.alternative-group-card {
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-card-border-radius);
    padding: 16px 20px;
}

.alternative-group-card .alternative-title {
    align-items: center;
    margin: 0;
}

.alternative-group-card .alternative-title > strong {
    font-size: var(--cm-h3-font-size);
    color: var(--cm-font-color);
}

.alternative-group-card .alternative-title-actions {
    align-items: center;
}

.alternative-group-card .alternative-collapse-btn {
    color: var(--cm-font-color);
}

.alternative-group-card .alternative-group-body {
    margin-top: 16px;
}

/* Give the add-group button room so it isn't glued to a (collapsed) group card. */
.alternatives-add-group {
    margin-top: 24px;
}

/* Group-name field: a normal input with the long helper as small text below. */
.alt-group-name .form-control {
    width: 100%;
}

.alt-group-name .alt-group-name-help {
    display: block;
    margin-top: 4px;
    color: var(--cm-mid-gray);
    font-style: italic;
    font-size: 0.85rem;
}

/* Min / max settings and the rato checkbox on one wrapping row. */
.alternative-settings-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.alternative-settings-row > div {
    display: flex;
    align-items: center;
}

/* Long product names wrap; the "meerprijs" box keeps a fixed right position. */
.alternative-checklist li.alternative-product-row .flex-row {
    align-items: flex-start;
    flex-wrap: nowrap;
}

.alternative-products .prod-name {
    max-width: none;
    flex: 1 1 0;
    min-width: 0;
}

.alternative-products .prod-name label {
    display: flex;
    align-items: flex-start;
}

.alternative-products .premium {
    flex: 0 1 200px;
    width: 200px;
    min-width: 120px;
}

.alternative-products .premium input {
    width: 100%;
}

/* Narrow screens: let the price box drop under the wrapping name instead of
   overflowing the card. */
@media (max-width: 600px) {
    .alternative-checklist li.alternative-product-row .flex-row {
        flex-wrap: wrap;
    }

    .alternative-products .prod-name {
        flex: 1 1 100%;
    }

    .alternative-products .premium {
        flex: 1 1 100%;
        width: 100%;
        margin-top: 6px;
    }
}


.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active {
}

a {
}
a.focus , a:hover {
    color: var(--cm-yellow);

}

a.disabled {
    opacity: 0.38;
    filter: grayscale(0.38);
    cursor: auto !important;
}

.create-webshop-button :hover {
    animation: popIn4 0.47s ease-out;
}

#app-logo-login {
    width: 375px;
    margin-top: 20px;
}

#app-logo-login-text {
    width: 160px;
}

#app-logo {
   border: 0px solid red;
   width: 50px;
   margin-top: -10px;
}

#app-logo-font {
   width: 160px;
   margin-left: 20px;
   margin-bottom: 5px;
   position: absolute;
   top: 25px;
   right: 30px;
}

.login-content {
   text-align: center;
   overflow: visible;
}

.reg-panel-wrap {
    display: flex;
}


.reg-logo-wrap {
    width: 50%;
    position: fixed;
    text-align: center;
    margin-top: 40px;
}
.reg-logo-wrap object {
    width: 400px !important;
}

@media screen and (max-width: 1079px) {
    .reg-panel {
        flex-direction: column;
    }
    .reg-logo-wrap {
        width: initial;
        position: static;
        text-align: center;
    }
}

.reg-sales-text .mobile-only {
    display: none;
}

@media screen and (max-width: 450px) {
    .bounce {
        display: inline-block; /* or any other display property as needed */
        animation: bounce 1.4s ease-in-out infinite;
    }

    @keyframes bounce {
        0%, 100% {
            transform: translateY(0); /* Start and end position */
        }
        50% {
            transform: translateY(-20px); /* Bouncing up */
        }
    }
    .reg-logo-wrap {
        margin-top: 15px;
    }

    .reg-logo-wrap object {
        max-width: 300px !important;
    }
    .reg-sales-text {
    }
    .reg-panel .left-panel,
    .reg-panel .right-panel
    {
        justify-content: start !important;
        padding-top: 10px;
        flex: 0 !important;
    }
    .reg-panel .right-panel {
        flex-grow: 1 !important;
    }

    .reg-sales-text .mobile-only {
        display: block;
        width: 100%;
        text-align: center;
        color: rgb(254,190,21)  !important;
        font-size: 75px;
        line-height: 0.8;
    }

    .left-panel {
        padding-bottom: 10px !important;
    }

}

.reg-panel {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.reg-panel .half-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.registration-button {
    background: linear-gradient(to right, rgb(254,190,21) 0%, rgb(254,190,21) 75%, rgb(255,222,130) 100%);
    border: none;
    border-radius: var(--cm-border-radius);
    padding: 10px 20px;
    font-weight: bold;
    color: var(--cm-green);
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    transition: background 0.3s ease;
}
.registration-button:disabled {
    background: linear-gradient(to right, rgb(220, 180, 100) 0%, rgb(220, 180, 100) 75%, rgb(200, 200, 180) 100%);
    cursor: not-allowed;
    color: var(--cm-green);
    opacity: 0.6; /* Slightly transparent */
}

/* --- SSO buttons (Google / Microsoft) -------------------------------- */
.sso-section {
    margin-top: 30px;
}
.sso-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #888;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.sso-divider::before,
.sso-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #e5e5e5;
}
.sso-divider span {
    padding: 0 14px;
}
.sso-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 16px;
    margin-bottom: 10px;
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.sso-button:hover {
    background: #f8f9fa;
    border-color: #c6c9ce;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    text-decoration: none;
}
.sso-button svg {
    flex-shrink: 0;
}
.reg-sales-panel,
.reg-sales-panel h2,
.reg-sales-panel h1
{
    color: white;
}
.reg-sales-text p {
    font-size: 12pt;
}
.reg-sales-text ul {
    list-style: none; /* Remove default list dots */
    padding-left: 0; /* Remove default padding */
    font-size: 12pt;
}
.reg-sales-text ul li {
    position: relative;
    margin-bottom: 10px; /* Optional spacing between items */
}

.reg-sales-text ul li .zmdi  {
    color: rgb( 244,193,70);
    font-size: 24px;
    line-height: 1;
}



.reg-sales-panel {
    max-width: 500px;
}


.reg-panel .left-panel {
    background-color: transparent;
    flex-direction: column;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
}

.reg-panel .right-panel {
    background-color: white;
    display: flex;
    align-items: center;
    padding: 40px;
}

.reg-panel .register-form input {
    background-color: rgb(234,241,236);
    border-radius: 6px;
    padding: 3px 6px;
    border: none !important;
}

.reg-panel .right-panel .register-form {
    max-width: 500px;
}

.login-content {
    display: flex;
    text-align: left;
    margin: auto;
    max-width: 640px;

}

.lc-block {
    border-radius: 8px;
}

.login-content .lc-block {
    width: inherit;
}

.get-started-buttons {
    display: flex;
    align-items: baseline;
}

#l-register {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
}
#l-register > img {
    align-self: center;
}

.loading-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    align-items: center;

}


.loading-box .loading-logo {
    margin-bottom: 20px;
}

.loading-box .loading-logo img {
   max-width: 300px;
}

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

#l-register .field-iban,
#l-register .field-bank_account_owner {
    width: 100% !important;
}

.login-content .image-logo {
    width: 140px;
}

.login-content .text-logo {
    width: 240px;
    margin-top: 10px;
}

.reg-panel-wrap .cm-input-group {
    width: 100%;
}
.cm-input-group {
    position: relative;
}
.input-group {
    position: relative;
}

.input-group-addon {
    position: absolute;
    right: 0px;
    top: 3px;
}

.input-group-addon .zmdi-check {
    margin-left: 40px;
}

.trialing-period {
    border: 0px solid red;
    width: 100%;
}

.trialing-period .hovered {
    display: none;
}

.trialing-period:hover .hovered {
    display: block;
}
.trialing-period:hover .not-hovered {
    display: none;
}

.error-listing ul {

}
.alert {
    border-radius: var(--cm-border-radius);
}

.alert.alert-warning {
   background-color: var(--cm-color-warning-bg);
   color: var(--cm-font-color);
}

.alert > i.zmdi {
   font-size: 16pt;
   vertical-align: middle;
}

i.zmdi.danger {
    color: var(--cm-danger);
}

i.zmdi.warning {
   color: #FFC107;
}

i.zmdi.success {
   color: #4CAF50;
}

i.zmdi.info {
   color: #2196F3;
}

.alert-info > a {
    color: var(--cm-pale-yellow);
}
.alert-info {
    background-color: var(--cm-light-green);
}

.alert-info-light {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-green);
}

.alert-info-light > a {
    color: var(--green);
}

.peppol-validation-errors {
    padding-left: 0;
    max-height: 200px;
    overflow-y: auto;
    font-size: 11px;
}



.totals-summary {
    margin-top: 20px;
    border-radius: var(--cm-border-radius);
    border: 1px solid var(--cm-lines-color);
    width: 100%;
    padding: 3px;
    overflow-x: auto;
}

.totals-summary tbody tr:first-of-type td {
    color: var(--cm-light-green);
}

.invoice-status-header {
    display: flex;
    gap: 10px;
    align-items: center;
}


.invoice-status {
    display: inline-block;
    width: 100px;
    text-align: center;
    border-radius: 24px;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 7px 10px;
    background-color: #ccc;
}

.invoice-status.late {
    background-color: var(--cm-color-danger-bg);
    color: var(--cm-color-danger);
}

.invoice-status.credited {
    background-color: var(--cm-color-credited-bg);
    color: var(--cm-color-credited);
}

.invoice-status.reminded {
    background-color: var(--cm-color-info-bg);
    color: var(--cm-color-info);
}


.invoice-status.concept {
    background-color: var(--cm-light-gray);
    color: var(--cm-mid-gray);
}
table tr:hover .invoice-status.concept {
    border: 1px solid var(--cm-lines-color);
}

.invoice-status.open {
    background-color: var(--cm-color-warning-bg);
    color: var(--cm-color-warning);
}

.invoice-status.paid {
    background-color: var(--cm-color-success-bg);
    color: var(--cm-color-success);
}

.invoice-status-icon {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    border: 1px solid var(--cm-lines-color);

}

/* ... */
.invoice-status-icon.concept {
    background-color: var(--cm-status-concept-bg);
    border: 1px solid var(--cm-lines-color);
}

.invoice-status-icon.prospect {
    background-color: var(--cm-status-prospect-bg);
}

.invoice-status-icon.option {
    background-color: var(--cm-status-option-bg);
}

.invoice-status-icon.estimate {
    background-color: var(--cm-status-estimate-bg);
}

.invoice-status-icon.awaiting-confirmation {
    background-color: var(--cm-status-awaiting-confirmation-bg);
}

.invoice-status-icon.confirmed {
    background-color: var(--cm-status-confirmed-bg);
}

.invoice-status-icon.cancelled {
    background-color: var(--cm-status-cancelled-bg);
}

.invoice-status-icon.partial-invoiced {
    background-color: var(--cm-status-partial-invoiced-bg);
}

.invoice-status-icon.invoiced {
    background-color: var(--cm-status-invoiced-bg);
}
.invoice-status-icon.to-invoice {
    background-color: var(--cm-status-to-invoice-bg);
}
.invoice-status-icon.completed {
    background-color: var(--cm-status-completed-bg);
}



/* ... */

.invoice-status-icon.late {
   background-color: var(--cm-color-danger);
}


.invoice-status-icon.reminded {
    background-color: var(--cm-color-info);
}


.invoice-status-icon.concept {
   background-color: var(--cm-status-concept-bg);
}

.invoice-status-icon.open {
    background-color: var(--cm-color-warning);
}


.invoice-status-icon.paid {
    background-color: var(--cm-color-success);
}

.totals-summary td,
.totals-summary th {
    text-align: right;
    background-color: var(--cm-background-color) !important;
    padding: 5px 30px !important;
    border-top: 0px !important;
}
.totals-summary tr td:first-of-type,
.totals-summary tr th:first-of-type {
    padding: 5px 10px !important;
}

.sidebar {
    opacity: 1 !important;
}

.sidebar.move-out .main-menu > li > a:hover {
    background-color: transparent !important;
}



.sidebar.move-out { /* collapsed */
  transform: translate3d(0px,0,0) !important;
  width: 50px !important;
}
.sidebar.move-out .main-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 27px;
}

.sidebar.move-out .line-wrap {
    margin: 12px 15px !important;
}

.sidebar.move-out .main-menu > li > a > i {
    position: static;
}
.sidebar.move-out .nav-footer {
    padding: 0px;
}

.sidebar.move-out .nav-footer .avatar img {
    width: 30px;
    height: 30px;
}

.sidebar.move-out .main-menu > li{
    display: block;
}


.sidebar.move-out .main-menu > li > a {
    padding: 0px;
    display: block;
    width: 22px;
    height: 22px;
}
.sidebar.move-out .company {
    opacity: 0; /* Fade in when the parent animation completes */
    height: 22px;
}

.sidebar.move-out .main-menu li .nav-item-text,
.sidebar.move-out .app-logo,
.sidebar.move-out .complete-account,
.sidebar.move-out .trialing-period
{
    opacity: 0; /* Fade in when the parent animation completes */
}

.sidebar.move-in .main-menu li .nav-item-text,
.sidebar.move-in .company,
.sidebar.move-in .nav-footer .user-info,
.sidebar.move-in .app-logo,
.sidebar.move-in .complete-account

{
    opacity: 1;
    transition: opacity 0.1s ease-in-out; /* Fade in */
    transition-delay: 250ms; /* Delay equal to the parent's animation duration */

}

.sidebar.move-out .nav-footer {
    flex-direction: column;

}
.sidebar.move-out .nav-footer .user-info {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.sidebar.move-out .app-logo-wrap {
    padding-left: 0px;
    align-items: center;
    margin-top: 20px;
}

.sidebar.move-out .app-logo-wrap .company,
.sidebar.move-out .app-logo-wrap .trialing-period,
.sidebar.move-out .complete-account {
    display: none !important;
}

.sidebar.move-out img.app-logo-mobile {
    display: inline-block;
}
.sidebar.move-in img.app-logo-mobile {
    display: none;
}

.sidebar.move-out img.app-logo {
    opacity: 0;
    width: 0px;
    height: 0px;
    margin-top: 0px;
}
.sidebar.move-in img.app-logo {
    display: inline-block;
}


.sidebar.move-in {
  transform: translate3d(0px,0,0) !important;
}

.sidebar.move-in {
    /* collapsed menu styling */

}
.sidebar.move-in {

}

.nav-toggle-wrap {
    display: flex;
    flex-direction: row;
}

.hi-trigger {
   cursor: pointer !important;
   display: block !important;
}

.line-wrap .line {
    background-color: white ;
}

.huge-icon {
  font-size: 64pt;
  color: #ccc;
}

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

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

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

.commands > span {
   margin-right: 5px;
}




.blog-article {

    max-width: 768px;
    margin: 0 auto;

}

.site-body li {
    font-size: 13pt;
}

.blog-article img {
    width: 508px;
    margin: 0px auto;
    display: block;
}

.blog-article h1 {
    margin-top: 40px;

}

.article-thumb {
   margin: 30px 0px;
   padding-bottom: 20px;
   border-top: 1px solid #ededed;
}


.quil-display-area img,
.quil-display-area table
{
   width: 100%;
}

.quil-display-area img.user-image {
   width: auto;
   max-width: 400px;
}

.quil-display-area table th,
.quil-display-area table td {
   padding: 2px 5px;
}



.rsvp.declined {
     color: #FFC107;
}

.rsvp.accepted {
     color: #4CaF50;
}

.rsvp.invited {
    color: #a0d5f2;
}

.order-status {
    padding: 2px 4px;
    border-radius: var(--cm-border-radius);
}
.filter-button.order-status {
    padding: 6px 16px;
}

.filter-button.deactivated {
    background-color: var(--cm-lines-color) !important;
    color: var(--cm-mid-gray) !important;
    opacity: 0.8;
    border: none !important;
}

.filter-pills-row .btn:not(.bgm-teal):not(.btn-select-toggle):not(.btn-primary) {
    opacity: 0.4;
    transition: opacity 0.15s;
}

.filter-pills-row .btn:not(.bgm-teal):not(.btn-select-toggle):not(.btn-primary):hover {
    opacity: 0.8;
    transition: opacity 0.3s;
}

.filter-pills-row .filter-button.order-status.deactivated.new { background-color: var(--cm-status-new-bg) !important; color: var(--cm-status-new) !important; border-color: var(--cm-status-new) !important; }
.filter-pills-row .filter-button.order-status.deactivated.concept { background-color: var(--cm-status-concept-bg) !important; color: var(--cm-status-concept) !important; border-color: var(--cm-status-concept) !important; }
.filter-pills-row .filter-button.order-status.deactivated.option { background-color: var(--cm-status-option-bg) !important; color: var(--cm-status-option) !important; border-color: var(--cm-status-option) !important; }
.filter-pills-row .filter-button.order-status.deactivated.estimate { background-color: var(--cm-status-estimate-bg) !important; color: var(--cm-status-estimate) !important; border-color: var(--cm-status-estimate) !important; }
.filter-pills-row .filter-button.order-status.deactivated.awaiting-confirmation { background-color: var(--cm-status-awaiting-confirmation-bg) !important; color: var(--cm-status-awaiting-confirmation) !important; border-color: var(--cm-status-awaiting-confirmation) !important; }
.filter-pills-row .filter-button.order-status.deactivated.confirmed { background-color: var(--cm-status-confirmed-bg) !important; color: var(--cm-status-confirmed) !important; border-color: var(--cm-status-confirmed) !important; }
.filter-pills-row .filter-button.order-status.deactivated.cancelled { background-color: var(--cm-status-cancelled-bg) !important; color: var(--cm-status-cancelled) !important; border-color: var(--cm-status-cancelled) !important; }
.filter-pills-row .filter-button.order-status.deactivated.completed { background-color: var(--cm-status-completed-bg) !important; color: var(--cm-status-completed) !important; border-color: var(--cm-status-completed) !important; }
.filter-pills-row .filter-button.order-status.deactivated.prospect { background-color: var(--cm-status-prospect-bg) !important; color: var(--cm-status-prospect) !important; border-color: var(--cm-status-prospect) !important; }
.filter-pills-row .filter-button.order-status.deactivated.to-invoice { background-color: var(--cm-status-to-invoice-bg) !important; color: var(--cm-status-to-invoice) !important; border-color: var(--cm-status-to-invoice) !important; }
.filter-pills-row .filter-button.order-status.deactivated.partial-invoiced { background-color: var(--cm-status-partial-invoiced-bg) !important; color: var(--cm-status-partial-invoiced) !important; border-color: var(--cm-status-partial-invoiced) !important; }
.filter-pills-row .filter-button.order-status.deactivated.invoiced { background-color: var(--cm-status-invoiced-bg) !important; color: var(--cm-status-invoiced) !important; border-color: var(--cm-status-invoiced) !important; }
.order-status.concept {
    color: var(--cm-status-concept);
    background-color: var(--cm-status-concept-bg);
}

.order-status.new {
    color: var(--cm-status-new);
    background-color: var(--cm-status-new-bg);
}


.order-status.cancelled {
     color: var(--cm-status-cancelled);
     background-color: var(--cm-status-cancelled-bg);
}

.order-status.estimate {
    color: var(--cm-status-estimate);
    background-color: var(--cm-status-estimate-bg);
}

.order-status.confirmed {
     color: var(--cm-status-confirmed);
     background-color: var(--cm-status-confirmed-bg);
}

.order-status.to-invoice {
     color: var(--cm-status-to-invoice);
     background-color: var(--cm-status-to-invoice-bg);
}

.order-status.partial-invoiced {
    color: var(--cm-status-partial-invoiced);
    background-color: var(--cm-status-partial-invoiced-bg);
}

.order-status.invoiced {
    color: var(--cm-status-invoiced);
    background-color: var(--cm-status-invoiced-bg);
}

.order-status.option {
    color: var(--cm-status-option);
    background-color: var(--cm-status-option-bg);
}

.order-status.completed {
    color: var(--cm-status-completed);
    background-color: var(--cm-status-completed-bg);
}

.order-status.prospect {
    color: var(--cm-status-prospect);
    background-color: var(--cm-status-prospect-bg);
}


.roster-conflict {
}

.inline-datepicker {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.inline-datepicker .datepicker-wrapper .datepicker {
   border: 1px solid #ccc;

}

.datepicker-wrapper .datepicker {
    z-index: 9999999999 !important;
}

.order-overview .inline-datepicker {
   font-size: 7pt;
   display: inline-block !important;
}
/*
input, input.form-control, select.form-control {
    border: 1px solid var(--cm-light-gray) !important;
    border-radius: 6px;
}

input.form-control {
    padding-left: 5px !important;
    margin-bottom: 5px;
}

select.form-control {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

div.select::before {
    background: none !important;
}
*/
.order-overview .inline-datepicker .form-control{
   font-size: 7pt;
   height: 20px;
}
.inline-datepicker .input-group-addon {
   padding-left: 0px;
   padding-right: 0px;
   display: none !important;
}

.input-group.date > input {
  padding-left: 10px;
}

.inline-datepicker .datepicker-wrapper,
.inline-datepicker .input-group.date {
    display: inline-block !important;
}

.datepicker-wrapper span.input-group-addon {

}

.datepicker-wrapper .form-control {
}

.datepicker-wrapper .form-control {
    width: 100px;
    border-radius: var(--cm-border-radius) !important;
}


.datepicker table td.day,
.datepicker table td.month,
.datepicker table th
{
   cursor: pointer;
}

.datepicker table td.day,
.datepicker table th
{
   text-align: center;
}

.inline-datepicker .datepicker {
   position: absolute;
   z-index: 9999;
}

.order-overview .table-responsive > table > tbody > tr > td.col-order_id {
   min-width: 20px;
}

.order-overview .table-responsive > table > tbody > tr > td.col-date {
   min-width: 20px;
}

.order-overview .table-responsive > table > tbody > tr > td.col-customer_id {
    min-width: 200px;
}

.order-overview .table-responsive > table > tbody > tr > td.col-name {
    min-width: 20px;
}

.order-overview .table-responsive > table > tbody > tr > td.col-price {
   width: 200px;
   text-align: right;
}

.order-overview .table-responsive > table > thead > tr > th.col-price {
    text-align: right;
}
.order-overview .table-responsive > table > thead > tr > th.col-price:not(.commands) > div:last-of-type {
    display: none;
}

.order-overview .table-responsive > table > tbody > tr > th.col-price {
   font-size: 8pt;
}

.order-overview .table-responsive > table > tbody > tr > td.col-actions {
   width: 20px;
   padding: 10px 10px !important;
}


.extra-order-options {
   font-size: 14pt;
   color: var(--cm-mid-gray);
   width: 24px;
   cursor: pointer;
}
.extra-order-options-wrap {
   position: relative;
   width: 16px;
   text-align: right;
}
.extra-order-options-modal {
   position: absolute;
   width: 230px;
   z-index: 9999999 !important;
   right: 10px !important;
   top: 15px !important;
   left: inherit !important;
   display: block !important;
}


.modal {
  display: block !important;
}

.normal-modal .modal-dialog {

}
.normal-modal .modal-dialog.scrollable {
   height: 95% !important;
}

.modal-dialog.scrollable {
   height: 95% !important;
}

.modal.fixed {
    position: fixed !important;
    z-index: 999999;
}

.modal .modal-content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 90%;
}


.button-bar-inner {
    display: flex;
    flex-direction: column;
    row-gap: 10px;

}
.button-bar-inner > div:first-of-type {
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
}

.modal .modal-body {
    overflow: auto;
    /*overscroll-behavior: contain;*/
}

.modal.fade.in {
    display: block;
}
.w-95-procent {
    width: 95% !important;
}

.h-95-procent {
    height: 95%;
}

.customer-search-results-wrap {
   position: relative;
}
.customer-search-results,
.product-search-results {
  background-color: white;
  box-shadow: 3px 3px 3px #ccc;
  z-index: 99999;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid #ededed;
}

.pricelist-customer-panel .customer-search-results {
    top: 120px !important;
}

.product-search-results {
   top: 30px;
}

.search-result-item {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #ededed;
}

.search-result-item .flex {
    gap: 30px;
    justify-content: space-between;

}

.search-result-item .flex > div:first-of-type {
    flex-grow: 1;
}
.search-result-item .flex > div {
    min-width: 100px; /* needed for alignment */
}

.search-result-item.active,
.search-result-item:hover {
   background-color: #ededed;
}

.contacts-item-header {
  padding: 10px;
  border-bottom: 1px solid #ffffff;
  background-color: #ededed;
}

.modal.normal-modal .datepicker-wrapper .form-control {
    width: 85px;
}


/* drag and drop */
.draggable, .dropped-element {
   position: relative;
}

.draggable .drag-mask,
.dropped-element .drag-mask {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 0px;
   height: 0px;
   background-color: rgba(0,0,0,0.2);
   z-index: 9999;
}

.drop-zone.highlight {
}

.drag-box-wrap {
  z-index: 999999999 !important;
}

.drag-box {
  position: fixed;
  background-color: rgba(0,0,0,0.1);
  z-index: 999999999 !important;
  height: 0px;
  width: 0px;
}

.product-drop-zone-wrap {
}
.product-edit-row {
    display: flex;
}

.product-edit-row h4 {
    display: inline-block;
}

.product-edit-row,
.product-row-non-edit-row  {
    display: flex;
    gap: 5px;
}

.product-edit-row {
    align-items: baseline;
}


.product-row-headers .product-name-cell,
.product-row-non-edit-row .product-name-cell {
    width: 100%;
    flex-shrink: 1;
}
/* edit row should use grow */
.product-edit-row .product-name-cell {
    flex-grow: 1 !important;
}
.product-edit-row .product-name-cell > div {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.product-edit-row.product-edit-title {
    padding-right: 16px;
}
.invoice-editor-body .product-edit-row.product-edit-title {
    padding-right: 0px;
}


.product-edit-row .quantity-cell,
.product-row-non-edit-row .quantity-cell {
    width: 50px;
    margin-right: 5px;
}
.product-edit-row .product-edit-commands,
.product-row-non-edit-row .product-edit-commands {
    width: 150px;
}

.product-row-non-edit-row .product-price-cell {
    width: 90px;
}

.product-margin-column, .product-percentage-column {
    width: 120px;
    text-align: right;
}

.product-edit-row .product-edit-discount,
.product-row-non-edit-row .product-edit-discount {
    width: 90px;
}


.product-row-non-edit-row .product-name-cell.hidden-product,
.product-row-non-edit-row .quantity-cell.hidden-product,
.product-row-inner.hidden-product,
.cm-sub-products .hidden-product {
    color: #bbb;
}

.product-edit-row .product-edit-price,
.product-row-non-edit-row .product-edit-price {
    width: 120px;
}

.product-edit-row > div.align-right {
    text-align: right;
}

.product-headers-edit-wrap {
    margin-left: 50px;
}

.product-total-row {
    padding-top: 5px;
    padding-bottom: 5px;
}


/* unset re-dnd styling */
#drop-zone-product-drop-zone,
#drop-zone-charges-drop-zone {
    width: 100% !important;
}
#drop-zone-product-drop-zone .dropped-element,
#drop-zone-charges-drop-zone .dropped-element {
    display: flex !important;
    margin-left: inherit !important;
    margin-right: inherit !important;
}

#drop-zone-product-drop-zone .dropped-element .col-md-11,
#drop-zone-charges-drop-zone .dropped-element .col-md-11 {
    width: inherit !important;
    padding: 0px !important;
    flex-grow: 1;
}

.product-row {
   border-bottom: 1px solid #ededed;
   padding-top: 10px;
   padding-bottom: 10px;
}

.dropped-element {
  /* border-bottom: 1px solid #ededed; */
}


.product-drop-zone-marker {
   height: 2px;
   background-color: #ededed;
   border: 1px solid black;
}


/* TODO style me */
.drag-handle {
   cursor: move;
   cursor: -webkit-grab;
}

.bold {
  font-weight: bold;
}

.new-product {
   padding: 10px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.new-product  div.title {
   padding-top: 5px;
}

.new-product .type {
    display: flex;
    align-items: center;
    gap: 5px;
}

.new-product .type input {
    margin-bottom: 0px;
}
.new-product .type input {
    margin: 0px;
    margin-right: 20px;
}
.products-subtitle {
  font-weight: bold
}

.product-total-rows div.row {
   padding-top: 10px;
   padding-left: 5px;
}

.product-total-rows div.row div.align-right {
  padding-right: 20px;
}

.search-result-item {
  cursor: pointer;
}

input.hidden-xs-up {
    display: none !important;
}

.upload-label {
  width: 100%;
  height: 40px;
  display: block;
  padding: 10px;
  cursor: pointer;
  background-color: #ededed;
}

.upload-label label {
  cursor: pointer;
  display: block;
  width: 100%;
}


.upload-label:hover {
  background-color: #ccc;
 }

.product-import-preview table td:nth-of-type(3) {
   text-align: right;
}

.import-preview tr.invalid {
    border-left: 2px solid red;
}


.import-preview tr.valid {
    border-left: 2px solid green;
}

.import-preview tr.skipped {
    border-left: 2px solid yellow;
}

.import-row-error {
   position: absolute;
   right: 50px;
   top: 10px;
   background-color: white;
   border: 1px solid #ededed;
   box-shadow: 3px 3px 3px #ccc;
   padding-top: 10px;
   text-align: left;
   padding-right: 20px;
   z-index: 99999999;
}


.estimate-editor .canvas {
   background-color: #eee;
   padding-top: 20px;
   padding-bottom: 20px;
}

.webshop-sections-wrap {
  position: relative;
}
/*base font sizes*/
.estimate-editor.estimate-base-font-size-6 .estimate-template {--estimate-base-font-size: 6pt;}
.estimate-editor.estimate-base-font-size-7 .estimate-template {--estimate-base-font-size: 7pt;}
.estimate-editor.estimate-base-font-size-8 .estimate-template {--estimate-base-font-size: 8pt;}
.estimate-editor.estimate-base-font-size-9 .estimate-template {--estimate-base-font-size: 9pt;}
.estimate-editor.estimate-base-font-size-10 .estimate-template {--estimate-base-font-size: 10pt;}
.estimate-editor.estimate-base-font-size-11 .estimate-template {--estimate-base-font-size: 11pt;}
.estimate-editor.estimate-base-font-size-12 .estimate-template {--estimate-base-font-size: 12pt;}
.estimate-editor.estimate-base-font-size-13 .estimate-template {--estimate-base-font-size: 13pt;}
.estimate-editor.estimate-base-font-size-14 .estimate-template {--estimate-base-font-size: 14pt;}
.estimate-editor.estimate-base-font-size-15 .estimate-template {--estimate-base-font-size: 15pt;}
.estimate-editor.estimate-base-font-size-16 .estimate-template {--estimate-base-font-size: 16pt;}
.estimate-editor.estimate-base-font-size-17 .estimate-template {--estimate-base-font-size: 17pt;}

.estimate-template h1 {font-size: calc(var(--estimate-base-font-size) + 8pt);}
.estimate-template h2 {font-size: calc(var(--estimate-base-font-size) + 6pt);}
.estimate-template h3 {font-size: calc(var(--estimate-base-font-size) + 4pt);}
.estimate-template h4 {font-size: calc(var(--estimate-base-font-size) + 3pt);}
.estimate-template h5 {font-size: calc(var(--estimate-base-font-size) + 2pt);}
.estimate-template h6 {font-size: calc(var(--estimate-base-font-size) + 1pt);}


.estimate-editor .document-wrap {
  position: relative;
  overflow: hidden;

}

.estimate-editor .document {
   position: relative;
   background-color: white;
   width: 790px;
   min-height: 1117px;
   margin: 0 auto;
   padding: 55px 50px 50px 55px;
   border-radius: 3px;
   box-shadow: 0 0 10px 0 rgba(19, 29, 41, 0.05);
}

.estimate-editor .document h1,
.estimate-editor .document h2,
.estimate-editor .document h3,
.estimate-editor .document h4,
.estimate-editor .document h5,
.estimate-editor .document h6 {
    font-family: inherit !important;
    font-weight: inherit !important;
    color: inherit;
    line-height: inherit !important;
}


.invoice-editor .document {
   width: 912px !important;
}

.estimate-editor .document .document-contents {

}


.estimate-preview-button {
   cursor: pointer;
}




.drop-zone .drag-handle {
    visibility: visible;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 34px;
    text-align: center;
}

#drop-zone-estimate-drop-zone .drag-handle  {
    visibility: hidden;
}


.document-hovered #drop-zone-estimate-drop-zone .drag-handle  {
    visibility: visible;
}



.drop-zone .drag-handle .zmdi {
    display: block;
}

.drop-zone .drag-handle .zmdi.zmdi-menu {
    cursor: ns-resize;
}

#drop-zone-estimate-drop-zone .actions {
    visibility: hidden;
}

.document-hovered #drop-zone-estimate-drop-zone .actions {
    display: inline;
    visibility: visible;
}

#drop-zone-estimate-drop-zone > .dropped-element > .dropped-element-body.col-md-11
#drop-zone-webshop-section-drop-zone  > .dropped-element > .dropped-element-body.col-md-11
{
   width: 100%;
   margin-bottom: 20px;
}

.dropped-element.row {
    display: flex;
    align-items: center;
}
.card .card .card .card-body {
    padding-top: 10px;
}

#drop-zone-estimate-product-dropzone  input[name="price_excl_vat"]  {
    width: 55px !important;
}

#drop-zone-estimate-product-dropzone  input[name="quantity"]  {
    width: 35px !important;
}

#drop-zone-estimate-product-dropzone  i.zmdi.edit {
   margin-right: 1px !important;
}

#drop-zone-estimate-drop-zone .drag-handle:hover {
}

#drop-zone-estimate-drop-zone .dropped-element {
    border-top: 1px solid white;
}

.document-hovered #drop-zone-estimate-drop-zone .dropped-element {
   border-top: 1px solid #ededed;
}

#drop-zone-estimate-drop-zone .dropped-element {
   border-bottom: 0px solid #ededed;
}

.estimate-drop-zone-marker {
   background-color: #ededed;
   border: 1px solid black;
}

.media-grid-wrap {
   border: 1px solid #ededed;
   border-radius: 6px;
   padding: 20px;
   max-height: 800px;
   overflow-y: auto;
}


.thumb-wrap {
  border: 1px solid var(--cm-lines-color);
  border-radius: var(--cm-border-radius);
  cursor: pointer;
  position: relative;
  justify-content: center;
  overflow: hidden;
  height: 240px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.thumb-wrap:hover {
  border-color: rgba(32,32,32,0.25);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.file-document .filename,
.img-document .filename {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 4px 8px;
    text-align: center;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    color: var(--cm-white);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.thumb-wrap:hover .filename {
    opacity: 1;
}
.img-document {
    height: 100%;
    position: relative;
}

.file-document {
    background-color: var(--cm-light-green-transparent);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.file-document .zmdi {
    font-size: 4rem;
    color: var(--cm-dark-green-transparent);
}

.uppy-wrap .uppy-Root {
    font-family: 'figtree' !important;
}


.flag-wrap {
    padding: 10px;
}
.flag-wrap.active {
    background-color: #ccc;
}

.thumb-wrap.active {
    border: 1px solid #2196f3;
}

.thumb-quick-insert {
  position: absolute;
  z-index: 9998;
  top: 3px;
  left: 3px;
}

.sweet-alert {
    z-index: 999999;
}

.sweet-alert p:last-of-type {
    display: flex;
    gap: 30px;
    justify-content: center;
}

.thumb-quick-delete {
    position: absolute;
    z-index: 9998;
    top: 3px;
    right: 3px;
}


.thumb-wrap .thumb-actions {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 10;
    display: none;
    gap: 10px;
    align-items: center;
    background: white;
    padding: 0 10px;
    border-radius: 2rem;
    box-shadow: 0 0 3px 0 rgba(32,32,32,0.15);
    height: 30px;
}

.thumb-wrap:hover .thumb-actions {
    display: flex;
}

.thumb-actions .zmdi {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: black;
    font-size: 0.75rem;
    transition: background 150ms, color 150ms;
}

.thumb-actions .zmdi:hover {
    background: #f0f0f0;
    color: #333;
}

.thumb-actions a {
    display: flex;
    color: inherit;
}


.thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.image-text-widget-display img {
    width: 100%;

}

.image-text-widget-edit .img-container {
   position: relative;
}
.image-text-widget-edit .img-container button {
   position: absolute;
   left: 0px;
   top: 0px;
}

.table a {
   cursor: pointer;
}

.progress-wrap {
  height: 10px;
  position: relative;
  overflow-y: visible;
  height: 40px;
  padding-top: 15px;
  margin-bottom: 20px;
}

.progress.slider {
   cursor: pointer;
}

div.scroller {
   background-color: white;
   border: 1px solid #ccc;
   height: 24px;
   width: 10px;
   position: absolute;
   z-index: 99;
   top: 6px;
   cursor: pointer;

}

/* TODO add invoice-template */




.document.estimate-template-wrap {
   position: relative;
   padding: 0px;
}

.estimate-template .header {
     position: absolute;
     width: 100%;
     height: 280px;
     pointer-events: none;
     background-repeat: no-repeat;
     background-color: transparent;
}

.estimate-template .body {
    /* Since the pointer-events: none fix (above), somehow the position of children could be 'static'. Explicitly fix that here: */
    position: relative;
}

.document > div > .body,
.document > div > div > .body {
     padding: 200px 43px;
}

.estimate-view .document .body {
     height: auto !important;
}

.document .body.invoice-body {
     padding: 70px 43px;
     height: auto !important;
}

.document .body .footer {
  width: 100%;
  left: 0px;
  font-size: 1rem;
  position: absolute;
  bottom: 20px;
  text-align: center;
}

.picker-document-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.picker-document-colors > span {
    display: inline-flex;
}

.picker-document-color {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(0, 0, 0, 0.15);
}

.picker-document-color:hover {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4285f4;
}

.chrome-picker  {
   box-shadow: none !important;
   border: 1px solid #ededed !important;
}
.modal .chrome-picker {
    width: 100% !important;
}

.file-document {
}

.popup-panel {
   position: fixed;
   top: 12px;
   right: 12px;
   box-shadow: 3px 3px 10px 6px #ddd;
   z-index: 999000000000000;
   background-color: var(--cm-light-green);
   color: var(--cm-white);
   padding: 20px 30px;
}



.sent-items-collapsed {
     height: 50px;
     overflow-y: hidden;
}

.sent-items-expanded {
     height: inherit;
     overflow-y: auto;
}

a {
   cursor: pointer;
}

.staff-overview table td:first-of-type {
    width: 30px;
}

.percentage-bar {
    height: 20px;
    border-radius: 2px;
    margin-bottom: 20px;
}

.percentage-bar .active {
    float: left;
    text-align: right;
    padding-right: 5px;
    color: white;
}

.bg-green {
    background-color: var(--cm-green);
}

.bg-yellow {
    background-color: var(--cm-yellow);
}

.modal .planning-section .items {
    align-items: center;
    border: 1px solid #ededed;
    grid-template-columns: 1fr !important;
}
.planning-divider-wrap {
    display: flex;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 30px;
    padding-right: 30px;
}

.planning-divider-wrap-2 {
    align-items: baseline;
}

.planning-divider .zmdi {
    font-size: 32px;
    color: #ccc;

}

.planning-toolbar {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    display: flex;
    align-items: top;
    justify-content: space-between;

}
.selected-staff table td:first-of-type,
.selected-staff table th:first-of-type {

}

.staff-overview table td:nth-of-type(2) {
     width: 304px;
}

.selected-staff table td:nth-of-type(2)  {
      width: 304px;
}

.m-l-60 {
   margin-left: 60px;
}

.shortage {
    color: red;
}

.too-many {
    color: orange;
}

.order-alert {
   position: relative;
}

.order-alert .tooltip {
   position: absolute;
   opacity: 1;
   background-color: white;
   box-shadow: 3px 3px 3px #ccc;
   padding: 10px;
   width: 350px;
   left: 0px;
   border: 1px solid #ededed;
   border-radius: 6px;
   z-index: 999999;
}
.table-responsive {
   overflow-x: auto !important;
}

.estimate-status.declined {
   color: #FFC107;
}
.estimate-status.accepted {
   color: #4CAF50;
}
.estimate-status.sent {
   color: #BA68C8;
}
.estimate-status.concept {
   color: var(--cm-mid-gray);
}

.product-overview-table th.col-product_name {
    width: 50%;
}

.product-overview-table th.col-type {
   padding-right: 10px !important;
}
.tag-box-wrap {
    display: flex;
    gap: 10px;
}
.template-icon {
   color: var(--cm-mid-gray);
}



/* Temporary homepage centering */

#header {
  z-index: 9999;
}

.modal-dialog {
    margin-top: 80px;
}

.invoice-payment .datepicker,
.reports-filter .datepicker {
   position: absolute;
}

.reports-filter .datepicker {
  z-index: 9;
}

/** site */
.Aligner {
  display: flex;
  align-items: center;
  min-height: 12em;
  justify-content: center;
  height: 100vh;
}

.Aligner-item {
  flex: 1;
}

.center-box {
   border: 0px solid #ccc;

}

.center-box img {
   min-width: 480px;
}

.center-box a {
   display: inline-block;
   padding: 10px;
   background-color: #505361;
   color: white;
   text-transform: uppercase;
   font-size: 12pt;
   font-weight: bold;
   border-radius: 5px;
}


.center-box a:hover {
    background-color: #878ca3;
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}

.Aligner-item--fixed {
  flex: none;
  max-width: 50%;
}


.site .nav {

}

.site .selling-points img {
  margin-bottom: 10px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  width: 65%;
  height: 200px;
}

.site .who-is-it-for img {
  margin-bottom: 10px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  height: 200px;
}




.site .nav li.logo {
   padding-right: 10px;
}

.site .nav .logo img:first-of-type {
   margin-right: 10px;
   width: 70px;
}

.logo-text  {
   display: inline-block;
   font-size: 19pt;
   color: black;
}

.site .nav ul {
   list-style-type: none;
   display: inline-block;
   padding-left: 0px !important;
   height: 93px;
}

.site a {
    color: #671751;
    font-weight: bold;
}

.site h1, .site h2, .site h3 {
    color: #671751;
}


.site a.btn {
    color: #fff;
}

.site .nav  ul:last-of-type {
   padding-top: 15px;
}

.site .nav li {
   display: inline-block;
   padding: 20px 20px;
}

.site .nav li a {
   font-family: Panton-ExtraBold;
   text-transform: lowercase;
   color: black;
   font-size: 12pt;
}
.site .nav li.log-in {

}

.site .nav li.sign-up {

}

.jumbo {
    font-size: 42pt;
    text-align: center;
}


h1.jumbo {
}

.hero h1, .hero h3 {
    color: #FFFFFF !important;
    text-shadow: 4px 3px 0px #7A7A7A;
    color: #FFFFFF;
}

.hero {
    padding: 30px 0px 50px 0px;
    background-color: red;
    background: rgb(145,175,116);
    background-image: linear-gradient(-45deg, #FFC796 0%, #FF6B95 100%);
}


.hero .container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hero .sub-slogan {
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: space-around;
    flex-grow: 1;
    flex-basis: 0;
    margin-bottom: 20px;
}


.hero .slogan {
    flex-grow: 1;
    flex-basis: 0;
}

.hero .video {
    margin: 0px auto;
}

.hero2   {
    text-align: center;
    background-color: #fff;
    padding: 40px 0px;
    background-size: cover;
}

.hero2 .container {
    display: flex;
    min-height: 250px;
}

.hero2 h1 {
    width: 100%;
    margin: auto;
}


h1.jumbo-alt {
    color: #222;
    font-size: 33pt;
}


.hero3 {
    background-image: linear-gradient(-225deg, #2CD8D5 0%, #6B8DD6 48%, #8E37D7 100%);
}
.hero3 h1.jumbo-alt-2 {
    color: #ededed;
}


.hero3 {
    padding: 50px 0px;
}

.hero3 p {
    color: #ebebeb;
}

.video {
    text-align: center;
    max-width: 800px;
}

.video video {
    width: 100%;
    border-top: 2px solid #333;
    border-left: 2px solid #333;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
}

.clear {
   clear: both;
}

.site-body {
   background-color: white;
}

.site-body .hero .content .slogan h1 {
   color: white;
}

.site-body h1,
.site-body h2,
.site-body h3,
.site-body h4,
.site-body h5,
.site-body h6,
.site-body .cm-font,
.site-body .btn,
#app h1,
#app h2,
#app h3,
#app h4,
#app h5,
#app h6,
#app .cm-font,
{
  font-family: salesforce-sans;
  font-weight: bold;
	font-style: normal;
}

.catermonkey {
   color: #999;
}


.site .nav .sign-up {
   background-color: #179648;
   border-radius: 20px;
   padding: 10px 20px;
   color: white;
}


.site .nav .sign-up a {
   color: white;
}

.btn-signup {
    font-size: 14pt;
    background-color: #1bb171;
    border-radius: 24px;
    padding: 10px 20px;
    margin-top: 10px;
    text-transform: lowercase;
}
.btn-signup:hover {
    background-color: #1bb171 !important;
}

.selling-points {
   padding: 50px 0px;
}


.reference-quote blockquote {
   font-family: Panton-ExtraBold;
   font-weight: normal;
   font-style: italic;
   font-size: 13pt;
   color: #671751;
   border-left: 0px;
}

.quote-from {
   font-family: Panton-ExtraBold;
   font-weight: normal;
   font-style: normal;
   color: #555;
   text-align: right;
}


.who-is-it-for {
    padding: 50px 0px;
}

.who-is-it-for .container > .row {
    margin-bottom: 30px;
}


.other-companies {
   padding: 50px 0px;
   background-color: #1c1b37;
}


.other-companies .icons {
   margin-top: 20px;
}

.other-companies h1 {
    color: white;
}

.get-started-footer {
    padding: 100px 0px;
    background-color: #feffff;
}


.get-started-footer .logo {
   width: 150px;
}

.site-body p {
   font-size: 13pt;
}


.site-body .footer  {
   padding: 50px 0px;
}

.site-body .footer .footer-nav {
   text-align: center;

}

.site-body .footer .footer-nav ul li {
    display: inline-block;
    font-size: 13pt;
    padding: 10px 40px;
}


.site-body .footer .footer-nav ul li a {
    color: black;
}

.planning-edit-table td {
}

.planning-edit-table tr td:nth-of-type(2),
.planning-edit-table tr td:nth-of-type(4){
   width: 80px;
   padding-right: 0px;
   padding-left: 4px;
   margin-left: 0px;
}

.planning-edit-table tr td:nth-of-type(1) {
   width: 138px;
   padding-right: 0px;
}

.planning-edit-table tr td:nth-of-type(3){
   width: 130px;
   padding-right: 0px;
}

.planning-edit-table textarea {
    min-width: 150px;
}

.planning-edit-table input.desc {
    height: 26px;
}

.planning-edit-table .datepicker-wrapper {
   position: relative;
}

.planning-edit-table .datepicker-wrapper .dp-dropdown {
    position: absolute;
    z-index: 99999;
}

.general-box .datepicker-wrapper .dp-dropdown {
    right: 0px;
}

.planning-panel-view tr td:first-of-type {
    width: 176px;
    white-space: nowrap;
}

.planning-panel-view tr:hover td {
    background-color: transparent !important;
}

.planning-edit-table tr td:nth-of-type(7),
.planning-edit-table tr td:nth-of-type(8) {
   width: 33px;
}

.editor-modal-v2-template-mode .modal-header {
    background-color: #cadae6 !important;
}

.editor-modal-v2-template-mode .modal-content {
    border: 1px solid #0f6eaf !important;
}

.estimate-editor-v2  .planning-panel-view td {
    border: none !important;
}
.estimate-editor-v2  .planning-panel-view {
    background: transparent !important;
}

.planning-panel-view tr.hidden-from-estimates td {
   color: #999;
}

.card .planning-view-group-title td {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-table-heading-color);
}

.card .planning-view-row .planning-view-row-title {
    font-weight: bold;
    font-size: 1.1rem;
}

.application-box {
   padding: 0px 30px;
   background-color: white;
}
#header .logo a {

    padding: 0px;
}

.login-page, .registration-page {
    background-color: var(--cm-green);
}

.login-panel-wrap, .reg-panel-wrap  {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    gap: 30px;
}

.login-content {
    width: 570px;
}
.login-panel-wrap .lc-block ,
.reg-panel-wrap .lc-block {
    margin-top: 0px;
}

.app-logo {
    width: 211px;
    display: block;
    max-height: 200px;
    overflow-y: hidden;
}
.app-logo-mobile {
    width: 32px;
    display: block;
}

.advanced-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px 10px;
}

.demand-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px 10px;
}
.demand-form-item {
    display: flex;
    justify-content: space-between;
}

.demand-form-item .demand-label {
    font-weight: bold;
}
.demand-form-item input {
    width: 40%;
}
.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-gap: 30px;
}

.apps-grid.site .application-box {
    border: 1px solid #ededed;
    padding: 30px;

}
.apps-grid.site {
    grid-gap: 30px 30px;
}

.eenvoudigfactureren .card-header h2 {
    background-color: rgb(39,108,111);
}


.su-tenant-panel table tr td:nth-of-type(1) {
   width: 80px;
}

.su-tenant-panel table tr td:nth-of-type(2) {
   width: 130px;
}


.su-tenant-panel table tr td:nth-of-type(4) {
   width: 90px;
}


.su-tenant-panel table tr td:nth-of-type(4) {
   width: 120px;
}


#mCSB_1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.bottom-logo {
    text-align: center;
}
.bottom-logo img {
    max-height: 150px;
    margin-bottom: 10px;
    max-width: 100%;
}


.about-us-page .content {
    max-width: 700px;
    margin: 0 auto;
}
.about-us-page .content p {

}

.about-us-page h1 {
     text-align: center;
}

.maty-block {
   width: 80%;
   margin: 0 auto;
   margin-bottom: 20px;
   border: 1px solid #ededed;
   padding: 15px;
}

.maty-block img {
   width: 100%;
}
.maty-block span {
	font-family: Panton-ExtraBold;
	font-weight: normal;
	font-style: normal;
  font-size: 10pt;
}

.quote-remark {
   margin-top: 30px;
   margin-left: 20px;
   font-style: italic;
}


.price-box-wrap {
    border: 1px solid #ccc;
}

.price-box-wrap:hover {
   box-shadow: 0 0 0 2px #333;
   cursor: pointer;
}

.price-box-wrap.selected {
   box-shadow: 0 0 0 2px black;
}

.price-box-wrap .price-box {
    box-shadow: none !important;
}

.plan-extra {
   border: 1px solid #ededed;
   border-radius: 6px;
}

.plan-extra .title {
   text-align: center;
}




.jumbo-alt {
}

.jumbo-alt {
}

.exact-mapping thead th {

}
.exact-mapping tbody tr td {
    width: 50%;
}

.gallery-image-edit-row img {
   width: 100px;
   padding: 10px;
}

.estimate-gallery-row {
   margin-bottom: 20px;
}
.estimate-gallery-image img {
   width: 100%;
}

.estimate-gallery-caption {
  font-weight: bold;
}

/* Swipable Image Gallery */
.cm-image-gallery {
  position: relative;
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
}
.cm-image-gallery__track {
  display: flex;
  width: 100%;
  will-change: transform;
}
.cm-image-gallery__slide {
  flex: 0 0 100%;
  min-width: 0;
  overflow: hidden;
}
.cm-image-gallery__slide img {
  width: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.cm-image-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  opacity: 1;
}
.cm-image-gallery__arrow--prev { left: 8px; }
.cm-image-gallery__arrow--next { right: 8px; }
.cm-image-gallery__arrow:hover {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.cm-image-gallery__arrow .zmdi {
  font-size: 18px;
  color: #333;
}
.cm-image-gallery__dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.cm-image-gallery__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
  transition: background 0.1s;
}
.cm-image-gallery__dot.active {
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
.cm-image-gallery__dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* Fullscreen gallery modal */
.cm-image-gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000000;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cm-image-gallery-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  color: #fff;
  font-size: 24px;
  transition: background 0.15s;
}
.cm-image-gallery-modal__close:hover {
  background: rgba(255, 255, 255, 0.4);
}
.cm-image-gallery-modal .cm-image-gallery {
  width: 80vw;
  max-width: 1200px;
  max-height: 85vh;
}
.cm-image-gallery-modal .cm-image-gallery__slide img {
  max-height: 85vh;
  object-fit: contain;
}
.cm-image-gallery-modal .cm-image-gallery__arrow {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.25);
}
.cm-image-gallery-modal .cm-image-gallery__arrow:hover {
  background: rgba(255, 255, 255, 0.4);
}
.cm-image-gallery-modal .cm-image-gallery__arrow .zmdi {
  font-size: 24px;
  color: #fff;
}
.cm-image-gallery-modal .cm-image-gallery__arrow--prev { left: 12px; }
.cm-image-gallery-modal .cm-image-gallery__arrow--next { right: 12px; }
.cm-image-gallery-modal .cm-image-gallery__dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
}
.cm-image-gallery-modal .cm-image-gallery__dot.active {
  background: #fff;
}
.cm-image-gallery-modal .cm-image-gallery__dots {
  bottom: 16px;
}

/* Gallery thumbnail list in editor */
.cm-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
}
.cm-gallery-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid #e0e0e0;
}
.cm-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cm-gallery-thumb__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
}
.cm-gallery-thumb__remove:hover {
  background: rgba(220, 53, 69, 0.9);
}
.cm-gallery-thumb__move {
  position: absolute;
  bottom: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding: 0;
  opacity: 0;
  transition: opacity 0.1s;
}
.cm-gallery-thumb:hover .cm-gallery-thumb__move {
  opacity: 1;
}
.cm-gallery-thumb__move--left { left: 2px; }
.cm-gallery-thumb__move--right { right: 2px; }
.cm-gallery-thumb__move:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Dynamic gallery filters */
.dynamic-gallery-filters {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px 0;
}
.dynamic-gallery-filter > label {
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
}
.dynamic-gallery-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dynamic-gallery-filter__chips .chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 16px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}
.dynamic-gallery-filter__chips .chip:hover {
  border-color: #999;
}
.dynamic-gallery-filter__chips .chip--active {
  background: var(--cm-yellow);
  border-color: var(--cm-yellow);
  color: #333;
}
.dynamic-gallery-filter__checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dynamic-gallery-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: #f9f9f9;
  border: 2px dashed #ddd;
  border-radius: 6px;
  color: #999;
  text-align: center;
  padding: 20px;
}
.dynamic-gallery-preview i {
  margin-bottom: 8px;
  color: #ccc;
}
.gallery-mode-toggle {
  margin-top: 10px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.gallery-mode-toggle .radio-inline {
  cursor: pointer;
}

.rg-grid .commands {
   width: 120px;
}

.page-break-dropped-widget {
   height: 1px;
   border-bottom: 1px dashed #ccc;
}


.blocks .block-row {
   margin-bottom: 30px;
   padding-bottom: 30px;
   border-bottom: 1px solid #ededed;
}


.blocks .block-row:nth-of-type(odd) {
   background-color: #f9f9f9;
}

.blocks .block img {
   max-width: 100%;
   display: block;
   border: 1px solid #ededed;
   padding: 10px;
}


.blocks .block p {
}

.next-button {
    font-size: 14pt;
}


.variable-listing {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
}
.variable-group {}

ul.variables {
   list-style-type: none;
   margin-left: 0px;
   padding-left: 0px;
}

li .catermonkey-variable > span  {
   margin-bottom: 5px;
   margin-left: 0px;
}

.catermonkey-variable  > span {
    background-color: rgba(143, 195, 159, 0.3);
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    color: #666 !important;

}

.tooltip-icon .catermonkey-variable {
    cursor: pointer;
}

.catermonkey-variable {
   color: transparent; /* TODO fix me once we have figured out how these '?' chars end up in the database */
}

.ql-editor .catermonkey-variable,
ul.variables .catermonkey-variable {
    cursor: pointer;
}
/*
.estimate-column ul {
    margin-bottom: 0px !important;
}
*/
.estimate-column ul + ul {
    margin-top: 0px;
}



.variableblot.ql-picker {
   width: 100px;
}


.image-viewer {
  position: relative;
}
.image-viewer img {
  width: 100%;
}
.image-viewer > button {
  position: absolute;
  top: 5px;
  right: 5px;
}

.comment-row-header .zmdi.active {

}

.comment-row-header,
.comment-row-tools {
    align-items: center;
}

/* CAT-1272: inline images in order internal notes render as thumbnails —
   in the online order overview, the note display, and the compose editor —
   so a large upload never dominates the layout (the PDF is capped separately,
   server-side). */
.oo-comment-body img,
.cm-note-body img,
.quil-editor .ql-editor img {
    max-width: 200px;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
    vertical-align: middle;
}

.zmdi.active {
    color: var(--cm-font-color);
 }

.zmdi.inactive {
   color: var(--cm-light-gray) !important;
}


b.negative {
   color: red;
}

.references-page .wildatheart {
    background-color: #333;
}

.wildatheart {
   padding-top: 30px;
   padding-bottom: 30px;
}
.wildatheart > div {
   column-rule: 1px dashed rgba(255,255,255,0.5);
   column-gap: 40px;
   column-count: 3;
}


.wildatheart-frontpage {
    padding: 40px 0px;
}
.wildatheart-frontpage h1 {
}

.wildatheart-frontpage {
}

.wildatheart-frontpage p {
   font-family: Lato !important;
}


.wildatheart h1 {
   font-family: 'Amatic SC';
   color: white;
}
.wildatheart p {
   font-family: Lato;
   color: rgba(255,255,255,.5);
}

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


.wildatheart .image img {
   width: 100%;
   margin-bottom: 10px;
}

.partygarden {
   background-color: rgb(243, 241, 236);

}

.partygarden h1 {
    font-family: "PT Serif";
    text-transform: uppercase;
    color: #808369;
    font-size: 1.3em;
    text-align: center;
}

.partygarden-content {
   padding: 30px;
   margin-bottom: 40px;
   margin-top: 30px;
   background-color: white;
}

.partygarden-content .rob-wrap {
   border-radius: 50%;
   overflow: hidden;
   background-color: white;
   width: 260px;
   height: 260px;
   float: right;
   margin-left: 10px;
}

.partygarden-content .rob {
   width: 300px;
}

.partygarden .title-bg {
    font-size: 18px;
    background-image: url(https://partygarden.nl/wp-content/uploads/2018/05/title_bg_green.png);
    background-repeat: no-repeat;
    width: 17.929rem;
    height: 6.929rem;
    margin: auto;
    left: 0;
    right: 0;
    z-index: 0;
    background-size: contain;
}

.partygarden-content .logo {
   width: 25%;
   margin-bottom: 20px;
}

.partyz {
   font-family: 'Open Sans Condensed',sans-serif;
   background-color: #afa96b;
}

.partyz .content {
   background-image: url("../img/references/partyz.jpeg");
   min-height: 560px;
   margin-bottom: 30px;
   margin-top: 30px;
   font-size: 26px !important;
   position: relative;
}

.partyz .content-text {
  position: absolute;
  left: 0px;
  top: 10%;
  width: 60%;
  padding: 20px;
  background-color: rgba(0,0,0,0.5);
  color: white !important;
}

.partyz .content-logo {
   width: 20%;
   position: absolute;
   right: 10px;
   top: 10px;
}
.partyz .content-logo img{
   width: 100%;
}
.partyz a {

   color: #ccc;
}

.rc-datepicker {
  overflow: auto;
}

.rc-datepicker > .table-condensed {
   width: 100%;
}


.rc-datepicker > .table-condensed td {
   text-align: center;
   border: 1px solid #ededed;
   vertical-align: top;
}

.ow-wrap {
   padding: 5px;
}

.ow-wrap .no-mask {
    position: absolute;
    z-index: 9999999999;
    left: 50px;
    top: 30px;
}

.ow-locations {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 30px;
    cursor: pointer;
}
.ow-wrap.no-data {
    background-color: white;
}

.sw-product {
    font-size: 7pt;
    color: white;
    border-top: 2px solid #ededed;
    border-bottom: 2px solid #ededed;
    border-right: 1px solid #ededed;
    border-left: 1px solid #ededed;
}

.table.location-detail-table > thead > tr > th:first-child,
.table.location-detail-table > tbody > tr > td:first-child {
    padding-left: 0px;
}

.add-end-date {
    text-decoration: underline;
    cursor: pointer;
}

.ow-date {
    margin: 10px auto;
    padding: 7px;
    text-align: center;
    border: 1px solid #ededed;
    border-radius: 15px;
    height: 30px;
    width: 30px;
}

.ow-location {
    padding: 7px;
    text-align: center;
    font-size: 7pt;
    color: white;
    text-transform: uppercase;
    border: 1px solid #ededed;
    width: 100%;
}

.ow-location.booked {
    background-color: #F44336;
}

.ow-location.option {
    background-color: #FFC107;
}

.ow-location.available {
    background-color: #4CaF50;
}

/* --- Vehicle Timeline (vt-*) --- */

.vt-container {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 13px;
}

.occupancy-modal-detail .vt-container {
    padding-bottom: 40px;
}

.vt-time-axis {
    display: flex;
    flex-direction: row;
    border-bottom: 2px solid #ddd;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}

.vt-lane {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #eee;
    min-height: 38px;
    align-items: stretch;
}

.vt-lane:hover {
    background: #fafafa;
}

.vt-lane--drag-over {
    background: #e3f2fd;
    outline: 2px dashed #2196F3;
    outline-offset: -2px;
}

.vt-handle-left,
.vt-handle-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    z-index: 2;
}
.vt-handle-left { left: 0; }
.vt-handle-right { right: 0; }

.vt-handle-left:hover,
.vt-handle-right:hover {
    background: rgba(0,0,0,0.08);
    border-radius: 2px;
}

.vt-bar--dragging {
    opacity: 0.75;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 10;
}

.vt-container--dragging {
    user-select: none;
    -webkit-user-select: none;
}

.vt-lane-label {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 10px;
    border-right: 1px solid #ddd;
    overflow: hidden;
    white-space: nowrap;
}

.vt-lane-name {
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-lane-plate {
    font-size: 11px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-lane-dimensions {
    font-size: 11px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-lane-track {
    flex: 1;
    position: relative;
    min-height: 34px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.vt-hour-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid #ddd;
}

.vt-hour-label {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 10px;
    color: #888;
    white-space: nowrap;
}

.vt-grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid #f0f0f0;
    pointer-events: none;
}

.vt-bar {
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    padding: 2px 6px;
    color: var(--cm-dark-gray);
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    min-height: 24px;
    transition: opacity 0.15s;
}

.vt-bar:hover {
    opacity: 0.85;
    color: var(--cm-dark-gray);
    text-decoration: none;
}

.vt-bar-ghost {
    position: absolute;
    top: 2px;
    bottom: 2px;
    height: calc(100% - 4px) !important;
    border: 1.5px dashed rgba(0,0,0,0.25);
    border-radius: 5px;
    pointer-events: none;
    z-index: 0;
}

/* vt-bar--status uses invoice-status-icon colors via the status class;
   override position/sizing so it stays inline as a bar */
.vt-bar.vt-bar--status {
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    padding: 2px 6px;
}

.vt-bar-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    line-height: 1.2;
}

.vt-bar-driver {
    font-size: 10px;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-bar-driver .vt-driver-icon {
    margin-left: 0;
    margin-right: 3px;
    font-size: 10px;
}

.vt-conflict-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #F44336;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    flex-shrink: 0;
}

.vt-bar-driver-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 4px;
    min-width: 240px;
    margin-top: 2px;
}

.vt-bar-driver-dropdown select {
    font-size: 12px;
}

.vt-driver-icon {
    margin-left: 4px;
    font-size: 12px;
    opacity: 0.7;
}

.vt-bar-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    line-height: 1.2;
    min-width: 0;
}

.vt-bar-remove {
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding-left: 2px;
    cursor: pointer;
    opacity: 0.5;
    font-size: 11px;
    flex-shrink: 0;
    z-index: 2;
}

.vt-bar-remove:hover {
    opacity: 1;
}

.vt-bar:hover .vt-bar-remove {
    display: inline-flex;
}

.vt-lane-conflict-icon {
    color: #F44336;
    font-size: 14px;
    margin-top: 1px;
}

.vt-unassigned-section {
    margin-top: 12px;
    border-top: 1px solid #ddd;
    padding-top: 8px;
}

.vt-section-header {
    font-size: 13px;
    color: var(--cm-dark-gray);
    padding: 4px 10px 8px;
}

.vt-unassigned-row {
    cursor: grab;
}

.vt-unassigned-row:hover {
    background: #fff8e1;
}

.vt-popover {
    position: fixed;
    z-index: 10002;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    padding: 12px;
    min-width: 300px;
}

.vt-popover-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
}

.vt-popover-title {
    min-width: 75px;
    max-width: 150px;
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vt-popover-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.vt-popover-row label {
    min-width: 75px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 0;
}

.vt-popover-row .select,
.vt-popover-row select {
    flex: 1;
    font-size: 12px;
}

.vt-popover-times {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.vt-popover-times input {
    width: 100px;
    font-size: 12px;
}

.vt-popover-times span {
    color: #999;
}

.vt-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
}

.vt-popover a {
    font-size: 12px;
}

.ow-location.ow-unassigned {
    background-color: #FF9800;
    color: #fff;
}

.fff  {
   background-image: url("../img/references/sff-bg.jpg");
   background-size: cover;
}
.fff-content {
    background-color: rgba(0,0,0,0.71);
    color: rgba(255, 255, 255, 0.71);
    padding: 40px;
    font-family: 'Josefin Slab', sans-serif;
    font-size: 20px;
    line-height: 1.5em;
}

.fff-content .title {
   font-size: 28px;
   font-family: 'Julius Sans One', sans-serif;
   color: #b38543;
}

.reference-button {
    margin-top: 10px;
    color: white !important;
    background-color: var(--cm-mid-gray);
    font-size: 22px;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 24px;
}


.reference-button:hover {
   background-color: #ccc;
}
.right {
   text-align: right;
}

.food-cost .table tr th:first-of-type,
.food-cost .table tr td:first-of-type {
   padding-left: 0px;
}


.section-head {
  border-bottom: 1px solid #ccc;
}

.checkout-field {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 5px;
}

th.right {
  padding-right: 5px !important;
}

.blocked-dates-grid td {
  padding-left: 0px;
}

.webshop-products-sections .dropped-element {
  border-bottom: 1px solid #ededed;
  padding-bottom: 10px;
  padding-top: 10px;
}


img.contact-us {
  border: 1px solid #ededed;
  padding: 5px;
}

.quil-display-area {

}

.cm-credits {
   text-align: center;
   width: 100%;
}

.cm-credits {
  font-size: 10pt;
  color: #ccc;

}


.sure-modal-body  .flex {
    justify-content: space-between;
}
.cm-credits  img {
  margin-right: 5px;
  width: 32px;
}


.estimate-view .floating-acceptance {
  position: fixed;
  flex-wrap: wrap;
  left: 0;
  top: 0;
  width: 100%;
  background-color: white;
  padding: 20px;
  border-radius: 3px;
  box-shadow: 9px 8px 13px 0 rgba(19, 29, 41, 0.3);
  z-index: 10;
}

@media screen and (max-width: 900px) {
    .estimate-view .estimate-editor > .canvas {
        padding-top: 0px !important;
    }
    .estimate-view .floating-acceptance {
        position: static !important;
        margin-top: 0px;
    }
}


.estimate-view .blijdorp-blue {
  background-color: #0072BC;
}

.pt-inner .pti-header {
    background-image: linear-gradient(-45deg, #FFC796 0%, #FF6B95 100%) !important;
}


.pt-inner.extra-box .pti-header {
    background-image: linear-gradient(-225deg, #2CD8D5 0%, #6B8DD6 48%, #8E37D7 100%) !important;
}

.extra-box .pti-body .ptib-item {
    text-align: left !important;
}

.extra-box .ptib-item > span {
    display: flex;
    justify-content: space-between;
}


.extra-box .ptib-item > span > span:first-of-type {
    flex-grow: 3;
}

.extra-box .ptib-item > span > span:last-of-type {
    min-width: 120px;
    text-align: right;
    font-weight: bold;
}



.pt-inner .pti-header > h2 {
    font-size: 18pt !important;
    font-weight: normal !important;
}

.external-apps-home {
    background-color: #333;
    padding-top: 70px;
    padding-bottom: 70px;
}

.external-apps-home h1 {
    color: white;
}

.external-apps-home .text {
    color: #aaa;
    font-size: 12pt;
    margin-bottom: 20px;
}

.cash-admin-settings td {
    padding-bottom: 0.2em;
}

.cash-admin-settings td:first-child {
    padding-right: 10px;
}

.pricing-page, .external-apps-page {
    background-color: #efefef;
    padding-bottom: 30px;
}


.margin-positive {
    color: #4CaF50;
}

.margin-negative {
    color: red;
}

.checkbox-grid, display {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

}

.checkbox-grid .checkbox {
    margin-top: 0px !important;
}

/* ---------------------------------------------------------------------------
   Action modal — fixed action bar / scrolling body / fixed footer.
   Paired with cs2.components.widgets.action-modal.

   Everything here is scoped under .cm-action-modal on purpose: the base
   `.modal .modal-content` rule scrolls the whole panel (header included) and
   many modals rely on that, so this pattern opts out only for itself and is
   adopted panel by panel.
   --------------------------------------------------------------------------- */

/* The flex column below needs a definite height to pin the header and footer.
   The width variants that don't set one get it here — but NOT `.full`, which
   already supplies `height: 98vh` plus an `inset: 1vh 1vw` margin (fonts.css).
   `.modal-dialog.from-right.full` and `.modal-dialog.from-right.cm-action-modal`
   are both (0,3,0), so without the :not() the winner is decided by stylesheet
   source order alone, and this rule silently ate `.full`'s top and bottom
   margin. */
.modal-dialog.from-right.cm-action-modal:not(.full) {
    top: 0;
    height: 100vh;
    height: 100dvh; /* keeps the footer above mobile browser chrome */
}

.modal-dialog.from-right.cm-action-modal .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    /* Base rule is `overflow-y: auto !important` — only the body may scroll. */
    overflow-y: hidden !important;
}

/* Specificity note: `.modal-dialog.from-right .modal-header` (fonts.css) sets
   this padding for every right-hand drawer at (0,3,0), so a plain
   `.cm-action-modal .cm-modal-head` at (0,2,0) would silently lose. Matching
   the dialog classes takes it to (0,4,0) and lets the pattern own its own
   header spacing rather than inheriting whatever the shared drawer rule
   happens to say. Same value it resolves to today — pinned, not changed. */
.modal-dialog.from-right.cm-action-modal .cm-modal-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 24px 24px 14px;
    border-bottom: 1px solid var(--cm-lines-color);
}

.cm-action-modal .cm-modal-title {
    flex: 1 1 auto;
    margin: 0;
}

.cm-action-modal .cm-modal-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* The base .close is absolutely positioned in some skins; keep it in the row. */
.cm-action-modal .cm-modal-close {
    position: static;
    flex: 0 0 auto;
}

/* `.modal .modal-body` (app.1.min.css) zeroes the top padding, which left the
   body's first element flush against the action bar — two 1px borders touching
   when that element is a card. Give the scroll area room to breathe.
   Matches the header rule's (0,4,0) so it wins outright rather than by
   stylesheet source order. */
.modal-dialog.from-right.cm-action-modal .cm-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 20px;
}

.cm-action-modal .cm-modal-foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--cm-lines-color);
    background-color: var(--cm-white);
    padding: 14px 20px;
}

.cm-modal-foot-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cm-modal-foot-note {
    flex: 1 1 auto;
    color: var(--cm-table-heading-color);
    font-size: 0.85rem;
}

.cm-modal-foot-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.cm-modal-foot-secondary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Separates a panel's configuration from its selection — two different
   questions that otherwise read as one long run of controls. */
.cm-section-divider {
    border: 0;
    border-top: 1px solid var(--cm-lines-color);
    margin: 26px 0 6px;
}

@media screen and (max-width: 600px) {
    .cm-modal-foot-actions {
        width: 100%;
        margin-left: 0;
    }
    .cm-action-modal .cm-modal-foot {
        padding: 12px 14px;
    }
}

/* Alphabetically sorted checkbox lists read top-to-bottom down each column
   rather than left-to-right across each row. Multi-column instead of grid:
   column-count balances the columns itself, so the flow survives the list
   being narrowed by a filter box without needing a row count computed up
   front. */
.checkbox-grid.checkbox-grid-vertical {
    display: block;
    column-count: 4;
    column-gap: 0;
}

.checkbox-grid.checkbox-grid-vertical .checkbox {
    break-inside: avoid;
}

.price-grid {
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}

.price-box-wrap .card h2 small {
    display: inline !important;
    margin-top: 0px !important;
}

.ql-container .qlbt-selection-line.qlbt-selection-line-left::before {
  position: absolute;
  left: -2px;
  top: -2px;
  content: '';
  width: 5px;
  height: 5px;
  background-color: #0589f3;
  border-radius: 5px; }

.ql-container .qlbt-selection-line.qlbt-selection-line-right::before {
  position: absolute;
  right: -2px;
  bottom: -3px;
  content: '';
  width: 5px;
  height: 5px;
  background-color: #0589f3;
  border-radius: 5px; }

.quill-better-table-wrapper {
  overflow-x: auto; }

table.quill-better-table {
    table-layout: fixed;
    border-collapse: collapse;
}
table.quill-better-table td {
    border: 1px solid #000;
    padding: 2px 5px; }

.qlbt-operation-menu {
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    z-index: 100;
    overflow: hidden; }
.qlbt-operation-menu .qlbt-operation-menu-dividing {
    height: 1px;
    background-color: #efefef; }
.qlbt-operation-menu .qlbt-operation-menu-subtitle {
    color: #999;
    font-size: 14px;
    padding: 5px 16px; }
.qlbt-operation-menu .qlbt-operation-color-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 16px 10px;
    background-color: #fff;
    overflow: hidden; }
.qlbt-operation-menu .qlbt-operation-color-picker .qlbt-operation-color-picker-item {
    width: 20px;
    height: 20px;
    border: 1px solid #595959;
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer; }
.qlbt-operation-menu .qlbt-operation-menu-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background-color: #fff;
    cursor: pointer;
    color: #595959;
    overflow: hidden;
    text-overflow: ellipsis; }
.qlbt-operation-menu .qlbt-operation-menu-item:hover {
    background-color: #efefef; }
.qlbt-operation-menu .qlbt-operation-menu-item .qlbt-operation-menu-icon {
    margin-right: 8px;
    height: 20px;
    width: 20px;
    font-size: 0; }

.qlbt-col-tool {
    position: absolute;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    z-index: 99;
    height: 16px; }
.qlbt-col-tool .qlbt-col-tool-cell {
    position: relative;
    background-color: #fff;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000; }
.qlbt-col-tool .qlbt-col-tool-cell:first-child {
    border-left: 1px solid #000; }
.qlbt-col-tool .qlbt-col-tool-cell-holder {
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 1px;
    background-color: transparent;
    cursor: ew-resize; }
.qlbt-col-tool .qlbt-col-tool-cell-holder:hover {
    background-color: #0589f3; }
.qlbt-col-tool .qlbt-col-tool-cell-holder::before {
    content: "";
    position: absolute;
    top: 0;
    left: -6px;
    display: block;
    width: 8px;
    height: 100%; }
.qlbt-col-tool .qlbt-col-tool-cell-holder::after {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    display: block;
    width: 8px;
    height: 100%; }

.corona {
    background: #ccc;
    padding: 50px 0px;
    margin-bottom: 20px;
    border-bottom: 3px solid #333;
    border-top: 3px solid #333;
}
.corona h1 {
    color: #333 !important;
}

.new-order-panel {
    display: flex;
    padding: 8px 20px;
    color: #888;
    align-items: center;
    width: 100%;
    background-color: #e8e8e8;
    border: 0px solid #ccc;
    box-shadow: 3 3px 3px rgba(0, 0, 0, 0.15);
    border-radius: 8px 8px 0px 0px;
}

.select .form-control {
    background-color: inherit;
}

@keyframes change-background {
    from { background-color: inherit; }
    to { background-color: rgba(255, 255, 255, 1); }
}

.order-filter-panel {
    cursor: pointer;
    display: flex;
    padding: 5px 20px;
    color: #888;
    align-items: center;
    width: 100%;
    background-color: #f1f1f1;
    border-radius: 0px;
    border-bottom: 0px solid #edecec;
}

.order-filter-panel  .select::before {
    top: 0px !important;
}
/*
.order-filter-panel:hover {
    // background-color: rgba(255, 255, 255, 0.5);
    animation-name: change-background;
    animation-duration: 0.5s;
    background-color: rgba(255, 255, 255, 0.5);
}
*/

.pop-in {
    display: inline-block;
    animation: popIn 0.5s ease;
}

.pop-in2 {
    display: inline-block;
    animation: popIn2 0.75s ease-out;
}

.pop-in3 {
    display: inline-block;
    animation: popIn3 0.75s ease-in;
}

.pop-in4 {
    display: inline-block;
    animation: popIn4 0.75s ease-in;
}

.order-filter-panel .filter-panel-search .zmdi {
    font-size: 21px ;

}
.num-orders-span {
    cursor: pointer;
    color: var(--cm-table-heading-color) !important;
    font-size: 0.8rem;
}
.order-filter-panel .select {
    flex-grow: 0.2;
}

.create-order-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 20px;
}
.widget-text-editor {
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-border-radius);
    padding: 10px;

}

.checkout-widget,
.checkout-widget .items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.card .card-header {
    gap: 20px;
}

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

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

.wide-button {
    width: 100%;
    max-width: 650px;
}

.payment-methods-boxes .checkbox  {
    margin-top: 0px;
}

.payment-methods-boxes .checkbox + .checkbox,
.weekday-boxes .checkbox + .checkbox {
    margin-top: 0px;
}

.weekday-boxes .checkbox {
    margin-top: 0px;
}

.get-started-expl {
    font-size: 13pt;
}


.price-grid {
    display: grid;
    grid-row-gap: 2rem;
    grid-column-gap: 2rem;
    margin-bottom: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.price-box {
    border-radius: 6px;
    box-shadow: 0px 0px 8px #ccc;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
}
.price-box .header {
    text-align: center;
    margin-bottom: 2rem;
}

.price-box .header h2 {
    margin-bottom: 0;
}

.price-box .title {
    font-weight: bold;
    font-size: 1.8rem;
}

.price-box .item {
    padding-bottom: 1rem;
    padding-top: 1rem;
    display: flex;
    border-bottom: 1px solid #ededed;
    align-items: baseline;
}

.price-box .item .name {
    flex-grow: 1;
}

.price-box .item i.zmdi {
    margin-right: 1.5rem;
}

.card .card-header .price-box  h2 small {
    display: inline;
}

.widget-section .title {
    font-size: 16px;
    border-bottom: 1px solid #ededed;
    color: #aaa;
    padding-top: 10px;
    margin-bottom: 20px;
    margin-top: 10px;
}

.tab-nav:not([data-tab-color]) > li > a::after {
    background: var(--cm-green);

}


.widget-section:first-of-type .title {
    margin-top: 0px;
    padding-top: 0px;
}

.widget-section .items {
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}

.widget-section.general-section .items {
    grid-template-columns: 1fr 1fr;
}

.logistics-section  .delivery-cost-widget {
    grid-area: dw;
}
.logistics-section .delivery-cost-product {
    grid-area: de;
}

.logistics-section .zipcode-widget {
    grid-area: zi;
}

.logo-settings-section .items {
    grid-template-columns: 2fr 1fr;
}

.logistics-section .items {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-template-areas: "dw de"
                         "zi zi";
}
.product-widget {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-widget .widget-section.content-section .items {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-template-areas: "gpre gpost";
}

.widget-section.field-section .items,
.widget-section.products-section .items {
    display: block;
}


.widget-section.payment-section .items {
    grid-template-columns: 1fr;
}

.custom-event-date {
    grid-area: cd;
    display: flex;

}

.blocked-days-grid {
    display: flex;

}

.blocked-days-grid .selector {
    margin-right: 20px;
}

.blocked-days-grid .pickers {
    display: flex;
}

.blocked-days-grid .fallback-datepicker .datepicker.dp-dropdown {
    position: absolute;
}

.custom-event-date-box {
    margin-right: 20px;
}

.custom-event-date .checkbox {
    margin-top: 4px !important;
}
.num-days-setting {
    grid-area: nd;
}

.hide-time-widget {
    grid-area: ht;
}

.blocked-days-grid {
    grid-area: bd;
}
.time-slots-limiter {
    grid-area: ts;
}

.blocked-days-grid .commands button {
    padding: 2px 5px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    border-radius: 2px !important;
}

.blocked-days-grid .commands button.waves-circle {
    width: auto !important;
    height: auto !important;
}

.time-range {
    grid-area: tr;
}

.order-deadline-time {
    grid-area: dl;
}


.default-time-widget {
    grid-area: dft;
}

.product-name-item {
    grid-area: name;
}

.product-price-item {
    grid-area: price;
}

.product-incl-vat-item {
    grid-area: incl-vat;
}

.product-taxrate-item {
    grid-area: tax;
}

.product-short-desc-item {
    grid-area: shortdesc;
}

.type-chooser {
    grid-area: type;
}

/* CAT-1185: producttype-change warning banner (info-box, multi-line). The
   .type-chooser is a flex row holding the radios; let the warning wrap onto
   its own full-width row beneath them. */
.type-chooser {
    flex-wrap: wrap;
}

.type-chooser .alert.alert-info {
    flex: 0 0 100%;
    margin-top: 15px;
    margin-bottom: 0;
}

.type-chooser .alert.alert-info > i.zmdi {
    vertical-align: top;
}

.product-type-change-warning {
    display: inline-block;
    vertical-align: top;
}

.product-type-change-warning p {
    margin-bottom: 0;
}

.product-type-change-warning ul {
    margin: 10px 0;
    padding-left: 18px;
}

.product-type-change-warning li {
    margin-bottom: 5px;
}

.widget-section.time-section .items {
    grid-template-columns:  1fr 1fr 1fr;
    grid-template-areas: "nd tr dl"
                         "ht dft ."
                         "ts ts ts"
                         "cd cd cd"
                         "bd bd bd"
                         "wd wd wd";
}

.product-incl-vat-item {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    margin-left: 20px;
}

.product-general-show-more {
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
}

.widget-section.product-name-section .tag-box-editor {
    grid-area: tags;

}
/* product settings */
.widget-section.product-name-section .items {
    grid-template-columns:  1fr 1fr 1fr;
    grid-template-areas: "name name name"
                         "price tax incl-vat"
                         "widget-price-sync widget-price-sync widget-price-sync"
                         "template-sync template-sync template-sync"
                         "shortdesc shortdesc shortdesc"
                         "tags tags tags";
}

.widget-price-sync-item {
    grid-area: widget-price-sync;
}

.template-sync-item {
    grid-area: template-sync;
}

.product-price-category {grid-area: category;}
.product-price-revenue {grid-area: revenue;}
.product-price-suffix {grid-area: suffix;}
.product-price-archive {grid-area: archive;}
.product-price-autoadjust {grid-area: autoadjust;}
.product-price-long-desc {grid-area: long-desc;}
.product-price-order-desc {grid-area: order-desc;}
.product-price-deposit {grid-area: deposit;}
.product-price-ignore-pricelist {grid-area: ignore-pricelist;}
.product-price-discount {grid-area: discount;}
.product-price-custom-foodcost {grid-area: custom-foodcost;}
.product-packaging {grid-area: packaging;}


.widget-section.product-price-section .items {
    grid-template-columns:  1fr 1fr 1fr;
    grid-template-areas:
        "long-desc long-desc long-desc"
        "order-desc order-desc order-desc"
        "category revenue discount"
        "deposit suffix custom-foodcost"
        "autoadjust autoadjust autoadjust"
        "packaging . .";
}


.widget-section.product-estimate-section .items {
    grid-template-columns: 1fr;
    grid-row-gap: 0px;

}
.widget-section.product-estimate-section .items .checkbox {
    margin-top: 0px !important;
}


.widget-section.product-production-section .items {
    grid-template-columns: 1fr 1fr;
}

.widget-section.product-variations-section .items {
    grid-template-columns: 1fr;
}

.stock-settings {
    display: flex;
    grid-column: 1 / 3;

}

.stock-settings .checkbox {
    margin-top: 0px !important;
    margin-right: 20px;
}

.stock-settings .stock-input  input {
    width: 80px;
}

.product-name-section .items .type-chooser {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: baseline;
}
.product-name-section .items .type-chooser .radio:first-of-type {
}

.delivery-cost-widget, .delivery-cost-product {
}

.time-slots-limiter {
    display: flex;
}


.light-inline-button {
    display: inline-block;
    color: #999 !important;
    border: none;
    border-bottom: 1px dashed #ccc;
    background-color: white;
    text-transform: uppercase;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 9px;
    margin-left: 5px;
    margin-right: 5px;
}

table .hover-context .light-inline-button {
    display: none;
}
table .hover-context:hover .light-inline-button {
    display: inline-block;
}
table .hover-context:hover .hide-on-hover {
    display: none;
}
table .hover-context .show-on-hover {
    display: none;
}
table .hover-context:hover .show-on-hover {
    display: flex;
}
.hover-context-wrap {
    position: relative;
}

table .hover-context:hover {
    position: absolute;
    background-color: white;
    border-radius: 4px;
    padding: 2px;
    z-index: 999;
    left: -150px;
}

table .hover-context > small {
    display: flex;
}

.order-settings {
    display: flex;
    min-width: 300px;
}
.order-settings > small   {
    display: flex;
    gap: 5px;
}

.order-settings > small > span {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
}

.check-list .check-box  .bgm-green {
    background-color: var(--cm-green) !important;

}

/** dark mode! */
body.dark {
    background-color: #555;
    color: #eee;
}

body.dark .card,
body.dark table,
body.dark table th,
body.dark #sidebar{
    background-color: var(--cm-mid-gray);
    color: #eee;
}

body.dark input,
body.dark select,
body.dark textarea {
    background-color: var(--cm-mid-gray) !important;
    color: #eee !important;
    border: 1px solid #999;
}

body.dark .table > thead > tr > th, body.dark .table > tbody > tr > th, body.dark .table > tfoot > tr > th,
body.dark .table > thead > tr > td, body.dark .table > tbody > tr > td, body.dark .table > tfoot > tr > td {
    border-top: 1px solid #999;
}

body.dark .s-profile > a {
    background-color: var(--cm-mid-gray);
}

body.dark .s-profile > a .sp-info {
    color: #eee;
}

body.dark .card h1,
body.dark .card h2,
body.dark .card h3,
body.dark .card h4,
body.dark .card h5,
body.dark .card h6
body.dark .modal-content h1,
body.dark .modal-content h2,
body.dark .modal-content h3,
body.dark .modal-content h4,
body.dark .modal-content h5,
body.dark .modal-content h6,
body.dark label
{
    color: #eee !important;
}

body.dark .main-menu li a {
    color: #444;

}

body.dark .main-menu > li.active > a {
    background-color: #999;
}

body.dark .main-menu > li > a:hover {
    background-color: #999;
}


body.dark .block-header h1,
body.dark .block-header h2,
body.dark .block-header h3,
body.dark .block-header h4
{
    color: #999;
}

.logo-darkmode, body.dark .logo-lightmode {
    display: none;
}

body.dark .table > thead > tr > th {
    border-bottom: none;
}

body.dark .logo-darkmode {
    display: block;
}

body.dark .modal-content {
    background-color: var(--cm-mid-gray);
}

body.dark .order-filter-panel {
    background-color: var(--cm-mid-gray);
    color: #eee !important;
    border: 0px solid #999;
    border-radius: 0px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

html:not(.ie9) .select::before {
    background-color: transparent;
}

body.dark .estimate-sidebar {
    background-color: #888;
    padding-top: 10px;
}

body.dark .estimate-sidebar .table {
    background-color: #999;
}

body.dark .estimate-editor .canvas {
    background-color: var(--cm-mid-gray);
    padding-top: 0px;
}

body.dark a {
    color: #B1E7F2;
}

body.dark #header  a {
    color: #eee;
}

body.dark .application-box {
    background-color: transparent;
}

body.dark .order-status.estimate {
    color: #CF96D9;
}

body.dark .order-status.to-invoice,
body.dark .margin-negative {
    color: #e68f84;
}

body.dark .checkbox .input-helper::after {
    border-bottom: 2px solid #26ffeb;
    border-left: 2px solid #26ffeb;
}

body.dark .widget-section .title {
    color: inherit;
}

body.dark .margin-positive {
    color: #4CaF50;
}
body.dark table .hover-context:hover {
    background-color: #888;
    border: 1px solid #999;
}

body.dark .light-inline-button {
    background-color: transparent;
    color: #eee !important;
}


body.dark .product-row {
    border-bottom: 1px solid #999;
}

body.dark .customer-search-results, .product-search-results {
    background-color: #999;
    box-shadow: 3px 3px 3px #333;
    border: 0px;
}

body.dark .search-result-item.active, .search-result-item:hover {
    background-color: var(--cm-light-green-transparent);
}

body.dark .search-result-item {
    border-bottom: 1px solid #bbb;
}


body.dark .tab-nav li.active > a {
    color: #555;
}

.tab-nav li:first-of-type a {
    padding-left: 0px;
}

body.dark .tab-nav:not([data-tab-color]) > li > a::after {
    background: #666;
}
body.dark .tab-nav li > a {
    color: #eee;
}
body.dark .tab-nav {
    box-shadow: inset 0 -2px 0 0 #999;
}

.comments .comment-body {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ededed;
}

.comments .comment-body .date {
    align-self: flex-end;
    font-style: italic;
}

.team {
}

.team .member:first-of-type {
    border-top: 1px solid #ededed;
}

.general-block .table td {
    padding-left: 0px !important;
}
.team .member {
    display: flex;
    border-bottom: 1px solid #ededed;
    padding-top: 10px;
    padding-bottom: 10px;
}

.staff-modal .widget-section .items {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.text-preview {
    border: thin solid transparent;
    border-radius: 6px;
    min-height: 50px;
    cursor: text;
    position: relative;
}
.text-preview > .zmdi.zmdi-edit {
    position: absolute;
    top: 0px;
    right: 0px;
}

.text-preview:hover {
    cursor: pointer;
}

.text-preview:hover > .zmdi.zmdi-edit {
    color: var(--cm-yellow);
    cursor: pointer;
}

.weekday-selection-grid {
    grid-area: wd;
}


.weekday-selection-grid .weekdays .checkbox + .checkbox {
    margin-top: 10px;
}
.weekday-selection-grid .weekdays {
    display: flex;
}

.pricelist-products-panel .euro-field {
    display: inline;
}


.batch-update-widget > span > input,
.batch-update-widget > span > button,
.batch-update-widget > span > select {
    display: inline !important;
    width: 40px !important;
    margin-left: 5px;
    margin-right: 5px;
}
.batch-update-widget > span > button {
    width: auto !important;
}

.batch-update-widget > span > .euro-field {
    border: 1px solid #ccc;
    height: 20px;
    padding-left: 3px;
    padding-right: 3px;
    width: 40px;

}

.pricelist-customer-panel {
    position: relative;
}

.pricelist-customer-panel .search-results {
    position: absolute;
    top: 60px;
    left: 0px;
    background-color: white;
    width: 100%;
    style: cursor;
}

.product-discount-input-flex  {
    display: flex;
}

.invoice-buttons {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.invoice-buttons button {
    margin-top: 10px;
}

.invoice-editor-body {
    display: flex;
    padding-left: 5px;
}


.invoice-editor-body .estimate-template {
    margin-right: 20px;
}

.invoice-editor-body .invoice-sidebar {
    max-width: 540px;
}


.route-selector, .menu-cat-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.route-selector .checkbox {
    width: 130px;
    margin: 0px !important;
}

.menu-cat-selector .checkbox {
    margin: 0px !important;
}

dfn {
    font-style: normal !important;
    border-bottom: 1px dotted;
    cursor: help;
}

.searched-product-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

}

.searched-product-labels .product-label {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-right: 5px;
}

/* meals/menus service */
.menus-products-panel .date-section,
.menus-menu-block .date-section

{
    border-top: 1px solid #ededed;
    display: flex;
    flex-direction: column;
}
.menus-menu-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menus-menu-block-wrap {
    overflow-x: auto;
}

.menus-menu-block-wrap .menus-menu-block {
}

.menus-menu-block .menus-product-row-wrap {
}

.menus-product-rows menus-product{

}
.menus-product-rows {
    flex-grow: 1;
    border-left: 1px solid #ccc;
}

.menus-product-row-wrap {
    display: flex;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding-top: 2px;
}


.date-section-header .menus-product-row-wrap {
    border-bottom: 0px;
    border-top: 1px solid #ccc;
}

.menus-product-row-wrap .qty {
    padding-left: 4px;
    padding-right: 4px;
    display: flex;
    width: 38px;

}

.menus-product-row-wrap .qty input {
    display: inline-block;
    width: 32px;
}

.menus-product-row-wrap .price {
    padding-left: 4px;
    padding-right: 4px;
    display: flex;
    width: 72px;
}


.menus-product-row-wrap .price input {
    display: inline-block;
    width: 48px;
}
.menus-single-product-section th {
    font-size: 9px;
    text-transform: inherit !important;
}
.menus-menu-block-wrap > .flex {
    gap: 20px;
}


.menus-product-row-wrap div.price > div.m-r-5:first-of-type {
    margin-top: 7px;
}
.menus-product-row {
    display: flex;
    border-right: 1px solid #ccc;
    width: 100%;
}



.menus-product {
    border-bottom: 0px solid #ededed;
    margin-right: 5px;
    flex-grow: 1;
}

.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(1),
.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(3),
.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(4),
.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(5) {
    width: 130px;
}

.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(2){
    width: 300px;
}

.menus-product, .menus-header{
    padding: 1px;
}

.menus-product-row-wrap .commands  {
    display: flex;
    align-items: center;
}

.menus-header {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 16px;
}

.menus-single-product-section td,
.menus-single-product-section th {
    padding: 1px !important;
}

.menus-search-product {
    position: relative;
}
.menu-modal-wrap .modal-header {
    padding-bottom: 0px !important;
}

.menus-product .inner {
    display: flex;
    justify-content: space-between;
}

.menus-product .inner > div:first-of-type {
    flex-grow: 1;
}

.menus-product-row-cols-2 .menus-product {
    width: 50%;
}
.menus-product-row-cols-3 .menus-product {
    width: 33.333%;
}
.menus-product-row-cols-4 .menus-product {
    width: 25%;
}

.menus-filter-bar > * {
    margin-right: 20px;
}

.menus-filter-bar {
    display: flex;
    align-items: top;
}

.menus-filter-bar-wrap {
    border: 1px solid #ededed;
    padding: 10px;
    border-radius: 6px;
}

.cm-grid.menus-route-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.route-accordeon .route-accordeon-header {

}
.menu-customer-row {
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    border-bottom: 1px solid #ededed;
}

.menus-product .flag-icon {
    height: 9px;
    margin-top: 2px;
}


.menu-customer-row .customer-name {
    flex-grow: 1;
}

.menu-customer-row .customer_id {
    width: 50px;
}
.menu-customer-row .commands {
    width: 150px;
}


.menu-customer-checkbox-row {
    display: flex;
    align-items: baseline;
    border-bottom: 1px solid #ededed;
}

.menu-customer-checkbox-row .inactive {
    width: 120px;
}
.menu-customer-checkbox-row .checkbox {
    width: 230px;
}

.menu-customer-checkbox-row .customer-comment-box {
    flex-grow: 1;
    margin-left: 30px;
}

.labelname {
    width: 100px;
    padding-left: 2px;
    padding-right: 2px;
    border-right: 1px solid #ccc;
}

.menus-product-row-wrap .commands {
    width: 50px;
    display: flex;
    justify-content: center;
    gap: 5px;
}
.menus-product-row-wrap .commands > div {
    text-align: center;
}

.menus-product-th {
    border: none !important;
}


.image-text-widget-display .col-md-3 img,
.image-text-widget-display .col-md-4 img,
.image-text-widget-display .col-md-6 img {
    margin-top: 15px;
}

.bootgrid-table th.check {
  width: 70px;
}

.table .table {
    background-color: white;
}

.bootgrid-table.components-grid td:first-of-type {
    width: 100px;
}



.bootgrid-table.components-grid td:nth-of-type(3) {
    width: 300px;
}

.table.bootgrid-table.components-grid th i {
    display: inline !important;
}

.new-entry-wrap {
    flex-grow: 1;
}

.quick-entry-widget {
    border: 1px solid #ededed;
    padding: 5px;
    border-radius: 6px;
    flex-wrap: wrap;
    padding-left: 10px;
}

.quick-entry-widget > * {
    margin-right: 20px;
}


.quick-entry-widget > .product-name-field {
    width: 80%;
    margin-bottom: 20px;
}

.quick-entry-widget > .select,
.quick-entry-widget > .price-field {
    flex-grow: 1;

}
.individuals-grid thead tr th:first-of-type,
.org-grid thead tr th:first-of-type {
    width: 320px;
}


.menu-invoice-error-report .error-row td:first-of-type {
    color: #F44336;
}

.menu-invoice-error-report .success-row td:first-of-type {
    color: #6fd273;
}


.cm-grid.ingredients-diet-grid {
    grid-template-columns: repeat(auto-fit, minmax(177px, 1fr)) !important;
}



/* estimate editor v2 */

.estimate-editor-v2 {
}


.menus-menu-block .date-section:nth-of-type(even) {
    background-color: #ededed;
}


.diet-chooser-grid {
    grid-template-columns: 1fr 1fr;
}


.order-filter-modal {
    display: flex;
    flex-direction: column;
    height: 100%;
    container-type: inline-size;
    container-name: filter-modal;
}

.top-filters-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.date-pickers-row {
    align-items: flex-start !important;
}

.date-pickers-content {
    display: flex;
    gap: 20px;
    flex: 1;
}

.date-picker-col {
    flex: 1;
}

.order-filter-modal .content-more {
    flex-grow: 1;
}

.expand-toggle-btn {
    margin: 10px 0;
    font-size: 0.8rem;
}


.customer-orders-grid tr td:first-of-type {
    width: 210px;
}

.customer-orders-grid tr td:last-of-type {
    width: 130px;
}

.menus-product-row-wrap .label-name {
    width: 100px;
}

.avail-labels-grid  tr th:first-of-type,
.avail-labels-grid-extra-prods  tr th:first-of-type {
    width: 130px;
}


.avail-labels-grid  tr th:nth-of-type(3),
.avail-labels-grid-extra-prods  tr th:nth-of-type(3) {
    width: 80px;
}


.bulk-invoice-filter > div {
    margin-right: 20px;
}

.bulk-invoice-filter {
    margin-bottom: 30px;
}

.flex-grow {
    flex-grow: 1;
}

.p-t-4 {
    padding-top: 4px ;
}

.cm-media-widget {
 /*   height: 380px; */
}
.cm-media-grid {
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}
.cm-media-grid.thumb-size-small {
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
}
.cm-media-grid.thumb-size-small .thumb-wrap {
    height: 120px;
}
.cm-media-grid.thumb-size-medium {
    grid-row-gap: 15px;
    grid-column-gap: 15px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
}
.cm-media-grid.thumb-size-medium .thumb-wrap {
    height: 180px;
}
.cm-media-grid.thumb-size-large {
    grid-row-gap: 20px;
    grid-column-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
.cm-media-grid.thumb-size-large .thumb-wrap {
    height: 280px;
}

.font-chooser-grid {
    grid-row-gap: 0px;
    grid-column-gap: 0px;
}

.order-editor-grid .customer-box {
    grid-area: customer;
}

.order-editor-grid .location-box {
    grid-area: location;

}
.general-box table tr td {
    border-top: 0px solid black !important;
    padding: 4px;
}

.order-editor-grid .general-box {
    grid-area: general;

}

.order-editor-grid .margin-box {
    grid-area: margin;

}
.ds-form {
    min-width: 250px;
}
.ds-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-overview {
    flex-grow: 1;
}

.margin-box .table {
    flex-grow: 1;
}
.margin-box .table tr td:first-child {
    padding-left: 0px !important;
}
.margin-box .table tr td:last-child {
    padding-right: 0px !important;
}

.order-editor-grid .margin-box-large {
    grid-area: margin-l;
}


.order-editor-grid .products-box {
    grid-area: products;
}


.order-editor-grid .planning-box {
    grid-area: planning;
}

.order-editor-grid .staff-box {
    grid-area: staff;
}

.order-editor-grid .files-box {
    grid-area: files;
}

.order-editor-grid .estimate-box {
    grid-area: estimates;
}

.order-editor-grid .sent-items-box {
    grid-area: sent-items;
}

.order-editor-grid .activity-log-box {
    grid-area: activitylog;
}

.order-editor-grid .invoice-box {
    grid-area: invoices;
}

.order-editor-grid .comments-box {
    grid-area: comments;
}

.order-editor-grid .view-estimate-box {
    grid-area: view-estimate;
}

.order-editor-grid .view-invoice-box {
    grid-area: view-invoice;
}

.order-editor-grid .internal-comments-box {
    grid-area: internal-comments;
}

.order-editor-grid .vehicle-box {
    grid-area: vehicle;
}

.order-editor-grid {
    width: 100%;
    display: grid;
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
}

.card-body .table {
    margin-bottom: 5px;
}


 .items .checkbox {
     margin-top: 0px !important;
 }

 .internal-comment-row td {
     border-top: 1px dashed #ededed !important;
 }

 .modal-dialog.scrollable.process-modal {
     margin-top: 10px !important;
     height: 99% !important;
     z-index: 999999;
 }

 .modal-dialog.scrollable.process-modal .modal-content {
   height: 99% !important;
 }

 .event-files-grid thead tr {
     display: none;
 }
 .menu-customer-disabled {
     background-color: #fabecb;
 }

.items .use-price-incl-vat-checkbox {
    margin-bottom: 4px;
 }


.cm-grid.cm-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.estimate-editor-v2 {

}

.product-name-editor {
    gap: 20px;
    width: 100%;
    margin-right: 40px;
}

.product-name-editor .name-form {
    flex-grow: 1;
}




.modal-dialog.full .modal-content {
    background-color: var(--cm-white);
}

.modal-dialog.full .close {
    font-size: 29px;

}

.tiny .modal-dialog {
    width: 460px;
}

.estimate-page {
    border: 1px solid #ededed;
    display: flex;
    position: relative;
    background-color: white;
    flex-direction: column;
    margin-bottom: 30px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.estimate-page.composition-mode {
    cursor: crosshair;
}

.block-outline:hover:not(.selected) {
    border-color: rgba(59,130,246,0.8) !important;
}

/* Range input styling for composition properties panel (Firefox + WebKit) */
.block-properties input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    outline: none;
}

.block-properties input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cm-green);
    cursor: pointer;
}

.block-properties input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cm-green);
    border: none;
    cursor: pointer;
}

.block-properties input[type="range"]::-moz-range-track {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
}

.estimate-editor-v2 .estimate-page {
  margin-top: 30px;
}

.estimate-section-wrap:not(.viewer-only):hover {
  outline: 2px dashed rgba(32,32,32,0.15) !important;
  outline-offset: 2px;
}

.estimate-page .page-content {
    flex-grow: 1;
}
.estimate-wrap {
    margin-top: 20px;
    position: relative;
}

/* Responsive width/height for mobile-view */
.mobile-view {
    width: 100%;
    height: auto;
    .estimate-page {
        width: 100%;
        height: auto;
    }
}

/* Estimate editor looks similar to desktop-view */
.desktop-view .estimate-page.a4-portrait {
    width: 210mm;
    height: 297mm; /* sqrt(2) factor */
}
.estimate-editor-v2 .estimate-page.a4-portrait {
    width: 210mm;
    height: 297mm; /* sqrt(2) factor */
}

.desktop-view .estimate-page.a4-landscape {
    width: 297mm;
    height: 210mm; /* 1/sqrt(2) factor */
}
.estimate-editor-v2 .estimate-page.a4-landscape {
    width: 297mm;
    height: 210mm; /* 1/sqrt(2) factor */
}

.desktop-view .estimate-page.page-16-9 {
    width: 297mm;
    height: calc(297mm * 0.5625); /* 1/16/9 factor */
}
.estimate-editor-v2 .estimate-page.page-16-9 {
    width: 297mm;
    height: calc(297mm * 0.5625); /* 1/16/9 factor */
}

/* Page tools — Canva-style always-visible toolbar */
.page-tools-bar {
    position: absolute;
    top: -56px;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 2px;
    padding: 4px;
    font-family: var(--cm-ui-font-family);
    font-weight: 300;
    font-size: var(--cm-normal-font-size);
    color: var(--cm-font-color);
    line-height: normal;
}

.page-tools-bar .page-tool-btn {
    min-width: 44px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #555;
    font-size: 16px;
    transition: background 150ms, color 150ms;
}
.page-tools-bar .page-tool-btn .page-tool-label {
    font-size: 10px;
    line-height: 1;
    color: #6b7280;
    white-space: nowrap;
    pointer-events: none;
}
.page-tools-bar .page-tool-btn:hover {
    background: #f0f0f0;
    color: #333;
}
.page-tools-bar .page-tool-btn:hover .page-tool-label {
    color: #333;
}
.page-tools-bar .page-tool-btn.page-tool-delete:hover {
    background: #fdeaea;
    color: #d32f2f;
}
.page-tools-bar .page-tool-btn.page-tool-delete:hover .page-tool-label {
    color: #d32f2f;
}
.page-tools-bar .page-tool-sep {
    width: 1px;
    align-self: center;
    height: 28px;
    background: #d1d5db;
    margin: 0 6px;
}

.estimate-page .section-toolbar i.zmdi {
    font-size: 20px;
    color: #333;
    background-color: white;
    display: block;
    padding: 10px;
    width: 40px;
    height: 40px;
    text-align: center;
    style: cursor;
    border-radius: 20px;
    border: 1px solid #ededed;
}

.estimate-page .section-toolbar i.zmdi.transparent {
    background-color: transparent;
    border: none;
}

.estimate-page .section-toolbar i.zmdi {
    cursor: pointer;
    font-size: 16px;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    padding: 8px;
}

.table td.unmapped {
    color: #ccc;
    background-color: #f0f0f0;
}

.table .error-row  td {
    background-color: #ffbfbd;
    color: #fff;
}
.table .error-row  td.unmapped {

    color: #ededed;
}


.table .error-row  td:last-of-type {
    background-color: inherit;
}


.yuki-export-results tr.error td {
    background-color: #ffbfbd;
    color: fff;
}


.yuki-export-results tr.success td {
    background-color: #4CaF50;
    color: fff;
}


.pricelist-filter-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-row-gap: 5px;
}

.ed2-image-preview {
    max-width: 500px;
    position: relative;
}

.ed2-image-preview img {
    width: 100%;
}

.ed2-image-preview > .btn {
    position: absolute !important;
    right: 5px;
    top: 5px;
}

.ed2-image-preview > .btn.edit {
    left: 5px;
    top: 5px;
    right: auto;
}



.estimate-page-wrap .page-content {
    box-sizing: border-box;
}

.estimate2-toolbar {
    display: flex;
}


.save-status-indicator {
    position: fixed;
    right: 55px;
    top: 35px;
    z-index: 100000000000;
}
.save-status-indicator > div {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 6px;
}

.saving-popup {
    background-color: var(--cm-light-green);
    color: var(--cm-white);
}

.section-toolbar-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0.1;
    display: flex;
    transition: opacity 100ms ease-in-out;
    flex-direction: column;
    overflow: visible;
    transform: translateY(50%);
    z-index: 10;
}

.estimate-section:hover + .section-toolbar-wrap, .section-toolbar-wrap:hover {
    opacity: 1;
    box-shadow: 0 0 0 1px inset rgba(32,32,32,0.5);
}

.section-toolbar {
    background-color: rgba(0,0,0,0.3) !important;
    border: 1px solid black;
}


.section-toolbar .add-section-popover {
    position: static;
    /*    background-image: linear-gradient(220deg, rgb(53, 58, 101) 0%, rgb(53, 58, 101) 50%, rgb(53, 58, 101) 100%) ; */
    background-color: rgba(0,0,0,0.3) !important;
    color: white;
    left: 0;
    width: 300px;
    bottom: 40px;
    padding: 20px;
    box-sizing: border-box;

}


.section-toolbar-wrap .add-section-popover > b {
    text-align: center;
    display: block;
}


.add-section-wrap:hover .add-section-popover {
    display: flex;
}

.section-toolbar:hover {

}

.section-toolbar-wrap .add-section-popover .blocks {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 5px;
    box-sizing: border-box;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 5px;
}

.section-toolbar-wrap .add-section-popover .block {
    cursor: pointer;
    border: 1px solid #fff;
    background-color: #fff;
    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
}



.section-toolbar-wrap .add-section-popover .block:hover {
    border: 1px solid var(--cm-yellow);
    color: var(--cm-yellow) !important;
}

.section-toolbar-wrap .add-section-popover .block.col-1 {
    grid-template-columns: 1fr;
}

.section-toolbar-wrap .add-section-popover .block.col-2 {
    grid-template-columns: 1fr 1fr;
}

.section-toolbar-wrap .add-section-popover .block.col-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.block .dummy-col {
    border: 1px solid #ededed;
    border-radius: 6px;
    font-size: 32px;
    line-height: 26px;
    padding-bottom: 4px;
    padding-left: 4px;
    padding-right: 4px;
}

.estimate-section-wrap {
    position: relative;
    box-sizing: border-box;
    min-height: 20px;
}



.estimate-page:hover  .section-toolbar-wrap,
.section-toolbar-wrap:hover {
    display: flex;
    box-sizing: border-box;
}
.estimate-section {
    display: flex;
}


.viewer-wrap .planning-panel-view {
    background: transparent;
}
.viewer-wrap { min-height: 20px; }
.section-close {
    cursor: pointer;
    z-index: 9999999999999;
}

.section-toolbar-wrap {

}

.section-toolbar {
    position: relative;
    display: flex;
    flex-direction: row;

    width: 100%;
    height: 44px;
    bottom: 0px;
    padding: 5px 5px;
    box-sizing: border-box;
    z-index: 10;
    justify-content: center;
    gap: 10px;
}



.estimate-section-wrap:hover  .estimate-section {

}


.estimate-column {
    min-height: 20px;
    position: relative;
    box-sizing: border-box;
}

.estimate-column.snap-source {
    outline: 2px solid var(--cm-blue, #2196F3) !important;
    outline-offset: -2px !important;
    border-radius: 2px;
    z-index: 5;
}


.estimate-section-wrap .ql-editor,
.estimate-section-wrap .ql-toolbar,
.estimate-section-wrap .planning-settings {
    background-color: var(--cm-white);
}

.estimate-editor-v2 .estimate-white-font .ql-editor{
    background-color: #999;
}

.view-only .product-planning-products .ql-editor {
    background-color: transparent !important;
}


.estimate-editor-v2 .estimate-section-wrap:hover .estimate-column {
    background-color: rgba(32,32,32,0.05);
}

.estimate-viewer .estimate-section-wrap:hover .estimate-column {
    border-left: none;
    border-right: none;
    border-top: none;
}

.content-editor-wrap {
    position: relative;
    margin-top: 1rem;
}

.content-editor-wrap .ql-toolbar {
    background-color: white;
}

.estimate-column-content {
    flex-grow: 1;
}
.estimate-column .drag-bar-wrap {
    width: 8px;
    height: 100%;
    position: absolute;
    z-index: 8;
    cursor: col-resize;
    box-sizing: border-box;
    --drag-bar-color: var(--cm-status-option-bg-secondary);
}

.estimate-column .drag-bar-wrap .drag-bar {
    position: absolute;
    width: 2px;
    height: 100%;
    background: var(--drag-bar-color);
    opacity: 0;
    transition: opacity 150ms 0s;
}

.estimate-column .drag-bar-wrap .drag-bar.left-resize {
    left: 0;
}

.estimate-column .drag-bar-wrap .drag-bar.right-resize {
    right: 0;
}

.estimate-column .drag-bar-wrap .drag-bar-pill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 32px;
    border-radius: 4px;
    background: white;
    border: 2px solid var(--drag-bar-color);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.estimate-column:hover .drag-bar-wrap .drag-bar {
    opacity: 1;
    transition-delay: 0.28s;
}

body.col-resizing .estimate-column .drag-bar-wrap .drag-bar {
    opacity: 1;
    transition-delay: 0s;
}

.estimate-column .drag-bar-wrap.right-resize {
    right: 0px;
    top: 0px;
}
.estimate-column .drag-bar-wrap.left-resize {
    left: 0px;
    top: 0px;
}

.drag-bar-wrap .left-margin,
.drag-bar-wrap .right-margin {
    user-select: none;
    position: absolute;
    padding: 4px 8px;
    top: calc(50% + 24px);
    border-radius: 4px;
    background: var(--drag-bar-color);
    color: white;
    font-family: Roboto;
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
}

.drag-bar-wrap .left-margin {
    left: 0;
    transform: translateX(-50%);
}

.drag-bar-wrap .right-margin {
    right: 0;
    transform: translateX(50%);
}

body.col-resizing .estimate-page {
    overflow: hidden;
}

.estimate-column .content-chooser {
    display: flex;
    justify-content: center;
}

.content-chooser-column {
    position: relative;
}

.estimate-column .content-chooser .zmdi {
    margin: 5px;
    font-size: 16px;
    display: block;
    background-color: white;
    padding: 8px 10px;
    border-radius: 17px;
    width: 34px;
    height: 34px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ededed;
}

.estimate-column-content .editor-wrap {
    background-color: white;
}


.estimate-column .column-toolbar-inner {
    display: none;
}

.estimate-column:hover .column-toolbar-inner {

}
.viewer-wrap {
    position: relative;
    user-select: none;
}
.viewer-wrap-bar {
    position: absolute;
    top: -30px;
    height: 30px;
    gap: 10px;
    z-index: 5;
    color: black !important;
    display: flex;
    align-items: center;
    background: white;
    padding: 0 10px;
    border-radius: 2rem;
    box-shadow: 0 0 3px 0 rgba(32,32,32,0.15);
}

.viewer-wrap-bar i:hover {
  background: #f0f0f0;
  color: #333;
}

.viewer-wrap-bar .zmdi {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #555;
  font-size: 0.75rem;
  transition: background 150ms, color 150ms;
}


.viewer-wrap .viewer-wrap-bar {
    display: none;
    cursor: pointer;
}

.viewer-wrap:hover .viewer-wrap-bar {
  display: flex;
}

.viewer-wrap img {
    width: 100%;
}

.viewer-wrap p {
    margin-bottom: 0px;
    margin-top: 0px;
    padding-left: 0px;
    padding-right: 8px;
    line-height: 1.54;
}


.estimate-editor-v2 .main-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}



.estimate-editor-v2 .button-toolbar .spacer {
    flex-grow: 1;
}

.estimate-editor-v2 .button-toolbar {
    border: 0px solid black;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.toolbar-modal .due-date {
    width: 140px;
}

.zipcode-row {
    justify-content: flex-start;
    width: 100%;
}
.zipcode-widget {
    margin-top: 10px;
}

.zipcode-widget input {
    width: 300px;
}

.zipcode-row > * {
    margin-right: 10px;
}


.zipcode-widget {
    flex-grow: 1;
}

.zipcode-row {
    border: 1px solid #ededed;
    padding: 10px;
}

.ignore-label {
    background-color: #ededed;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #ccc;
    margin-right: 5px;
}

.viewer-wrap .ql-align-center {
    text-align: center;
}

.viewer-wrap .ql-align-right {
    text-align: right;
}

.split-label {
    padding: 2px 5px;
    margin-right: 5px;
    border-radius: 5px;
    background-color: #ededed;
    border: 1px solid #ccc;
}


.custom-logo-wrap {
    position: relative;
    max-width: 320px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.custom-logo-wrap img {
    width: 100%;
}

.custom-logo-wrap .btn {
    position: absolute;
    top: 5px;
    right: 5px;
}

.estimate-page-wrap .ql-toolbar.ql-snow,
.estimate-page-wrap .ql-container {
    font-family: inherit !important;
}


.misc-settings > div:hover {
  background-color: rgba(32,32,32,0.02);
}

.misc-settings .toggle-switch, .reminders .toggle-switch {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    /* Group the slider + name on the left instead of pushing them apart. */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    /* Separator line between settings so individual options are distinct. */
    border-bottom: 1px solid rgba(32, 32, 32, 0.08);
}

/* Render the slider (.ts-helper) to the LEFT of the setting name (.ts-label)
   via flex `order` rather than reordering the markup, so the
   `input:checked + .ts-helper` adjacent-sibling selector keeps working. */
.misc-settings .toggle-switch .ts-helper, .reminders .toggle-switch .ts-helper {
    order: -1;
}

/* In the reordered row the label sits to the right of the slider, so the
   default right margin is no longer needed — the flex `gap` handles spacing. */
.misc-settings .toggle-switch .ts-label, .reminders .toggle-switch .ts-label {
    margin: 0;
}

.misc-settings .select {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.misc-settings .select > label {
    margin: 0;
}

.misc-settings .select select.form-control {
    width: 320px;
    margin-left: auto;
}

.misc-settings .misc-select-row {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.misc-settings .misc-select-row > label {
    margin: 0;
}

.misc-settings .misc-select-row .select {
    margin: 0;
}

.product_weight_sub {
    color: #aaa;
    width: 40px;
}


.customer-import-modal {
    overflow-x: auto;
}

.deadline-num-days {
    width: 48px;
}
.deadline-hour {
}
.deadline-num-days {
    flex-grow: 1;
    display: flex;
}
.deadline-num-days .form {
    align-items: center;
    margin-right: 10px;
}

.deadline-num-days .form input {
    width: 70px;
}
.deadline-flex {
    display: flex;
}


.internal-comment-row-inner {
    justify-content: space-between;

}


.internal-comment-row-inner .internal-comment-box {
    flex-grow: 1;
}

.internal-comment-row-inner .who {
    width: 200px;
}


.internal-comment-row-inner .where {
    width: 200px;
}

.ql-picker.ql-size .ql-picker-item[data-value]::before {
  font-size: max(attr(data-label px), 10px) !important;
}

.rsvp-user-block {
    border-bottom: 1px solid #ededed;
    padding-bottom: 10px;
}
.rsvp-user-header {
    display: flex;
    padding: 10px;
    gap: 10px;
}
.rsvp-user-header .name {
    font-weight: normal;
    width: 200px;
}
.rsvp-user-header .summary {
    flex-grow: 1;
}

.rsvp-user-header .summary dl {
    font-weight: normal;
    display: flex;
    text-align: right;
}
.rsvp-user-header .summary dt {
    font-weight: normal;
    margin-right: 5px;
}
.rsvp-user-header .summary dd {
    margin-right: 10px;
}
.rsvp-user-header .email,
.rsvp-user-header .phone {
    width: 40px;
}
.rsvp-invitation-row {
    display: flex;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ededed;
}

.rsvp-invitation-row .order-name {
    flex-grow: 1;
}
.rsvp-invitation-row .shift {
    text-align: right;
    margin-right: 30px;
}
.rsvp-invitation-row .rsvp {
    width: 100px;
}

.rsvp-first-col {
    border-left: 2px solid;
}

.rsvp-first-col.declined {
    border-left-color: #FFC107;
}

.rsvp-first-col.accepted {
    border-left-color: #4CaF50;
}

.rsvp-first-col.invited {
    border-left-color:  #a0d5f2;
}

.rsvp-overview-table tr td:nth-of-type(3) {
    width: 100px;

}

.staff-overview-row-time-edit {
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    width: 70px;
    align-items: center;
    border: 0px solid red;
}


.staff-overview-row-time-edit.editing  {
    width: 140px;
}

.staff-overview-row-time-edit .zmdi.zmdi-edit {
    display: none;
}

.staff-overview-row-time-edit:hover .zmdi.zmdi-edit {
    display: inline;
}

.view-options-setting .select {
    display: flex;
    width: 200px;
    align-items: center;
}

.view-options-setting .select label {
    margin-right: 10px;
    margin-top: 3px;
}

.production-overview-grid {

}

.production-progress-bar {
    display: flex;
    gap: 10px;
}

.progress-entry-wrap .progress-entry-hover {
    box-sizing: border-box;
}

.progress-entry {
    display: flex;

    align-items: center;
}


.progress-entry-wrap {
    position: relative;
    margin-left: 5px;
}

.progress-entry {
    align-items: center;
    text-align: center;
    padding: 5px;
    border: 1px solid #ededed;
    border-radius: 6px;
    background: white;
    white-space: nowrap;
    position: relative;
    height: 25px;
}


.progress-entry:hover  {
}

.progress-entry-hover .progress-entry {
    padding: 5px;
}


.progress-entry.checked {
    background-color: #6fd273;
    border: 0px solid #6fd273;
    color: white;
}

.progress-entry-wrap .progress-entry-hover {
    background-color: white;
    display: flex;
    min-width: 300px;
    flex-wrap: wrap;
    gap: 5px;
}



.production-overview-grid tbody td:nth-of-type(1),
.production-overview-grid tbody td:nth-of-type(2)
{
    width: 90px;
}


.production-overview-grid tbody td:nth-of-type(3),
.production-overview-grid tbody td:nth-of-type(4) {
    width: 200px;
}

.production-overview-grid tbody td:nth-of-type(5) {
}

.estimate-column-content .planning-settings  {
    padding: 10px;
    border: 1px solid #ededed;
}

.prep-list-header-filter {
    position: relative;
    margin-top: 10px;
}
.prep-list-header-filter .checkbox-wrap-footer {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 5px;
}
.prep-list-header-filter .checkbox-wrap {
    position: absolute;
    display: flex;
    padding: 0px 10px;
    flex-direction: column;
    top: 24px;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 99;
    min-width: 250px;
    right: 0px;
}

.production-overview-grid thead th:last-of-type > span {
    display: none;
}

.production-overview-grid tr th:nth-of-type(5) {
    width: 100px;
}

.bootgrid-table thead th {
}

.image-viewer-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.ical-form {
    gap: 40px;
    width: 100%;
}

.ical-form .form-control {
    min-width: 200px;
}

.summary-report {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    margin-bottom: 10px;
    margin-top: 20px;
}

.ical-report .updated td:first-of-type,
.ical-report .created td:first-of-type {
    border-left: 2px solid green;
}

.ical-report .error td:first-of-type {
    border-left: 2px solid red;
}

.allowed-diets-widget .cm-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}

.planning-level-1 {

}
.planning-level-2 {
    margin-left: 20px;
}
.product-planning-header {
    border: 1px solid #ededed;
    padding: 10px;
    font-weight: bold;
}

.product-planning-body {
    border-left: 1px solid #ededed;
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    padding: 10px;
}

.product-planning-products {
    border-left: 1px solid #ededed;
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    padding: 10px;

}

.planning-product {
    margin-bottom: 10px;
    border-bottom: 1px solid #ededed;
    padding-bottom: 5px;

}

.planning-product-description {
    font-style: italic;
}

.planning-product-type-title {
    font-weight: bold;
}
.planning-product-title {
    display: flex;
    justify-content: space-between;
}
.planning-product .zmdi-close {

}

.planning-product-sub-product {
    margin-left: 10px;
}

.table.planning-panel-view  .product-planning-products {
    border: none;
    margin: 0px;
    padding: 0px;
}

.connected-location {
    padding-top: 5px;
    padding-bottom: 5px;
    justify-content: space-between;
}

.locations-selector {
    min-width: 120px;
    padding: 2px;
}
.locations-selector select {
    width: 120px;
}

.prep-list-modal-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    margin-bottom: 20px;

}

.prep-list-modal-checkboxes .checkbox {
    margin: 0px; !important;
}

.variation {
    gap: 10px;
}
.variation .radio {
    display: flex;
    flex-grow: 1;
    gap: 10px;
}
.variation-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.variation-options-list .variation-select-option {
    align-items: center;
    gap: 20px;
}

.variation-checkbox-option-price {
    max-width: 140px;
    margin-top: 10px;
}
.variation-wrap {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ededed;
}

.variation-wrap .variation-header {
    text-align: right;
}

.variations-selector {
    margin-top: 10px;
    flex-wrap: wrap;
}

.variations-selector.variations-grouped {
    flex-direction: column;
}

.variations-selector.variations-grouped div {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.allergen-grid {
    padding-right: 30px;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
}
.allergen {
    width: 64px;
    cursor: pointer;
}
.allergen img {
    width: 100%;
}
.allergen.allergen-selected  {
    border-bottom: 3px solid #353A65;
}

.selected-variations {
    display: flex;
    gap: 10px;
}

.webshop-product-expanded {
    display: flex;
    flex-direction: column;
    gap: 10px;


}

.tiered-prices-widget {
}

.order-product-comment textarea{
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    resize: none; /* Prevent user resizing */
    overflow: hidden; /* Hide scrollbars */
}

#app .plan-extra li > span{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

}

#app .plan-extra li > span .price {
    text-align: right;
    margin-right: 20px;
}

.zmdi-caret-down, .zmdi-caret-up {
  padding: 0 0.3em;
  background: rgba(32,32,32,0.05);
  border-radius: 20%;
}
.zmdi-caret-down:hover, .zmdi-caret-up:hover {
  background: rgba(32,32,32,0.07);
}

#app .plan-extra #menu-app-calculator > div > div  {
    display: flex;
    flex-direction: column;
    align-items: end;
}


#app .plan-extra #menu-app-calculator input  {
    width: 80px;
    margin-left: 20px;
    border: 1px solid #ccc;
    padding: 4px;
    text-align: right;
}

.expanded-filters-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 30px;
}

.filter-group-heading {
    font-weight: 600;
    font-size: 1rem;
    color: var(--cm-mid-gray);
    border-bottom: 1px solid var(--cm-lines-color);
    padding-bottom: 4px;
    margin-top: 10px;
    margin-bottom: 0;
}

.filter-group-heading:first-child {
    margin-top: 0;
}

.content-more .filter-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.filter-pills-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
}

.filter-pills-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
}

.filter-row-prefix {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 230px;
    min-width: 230px;
    flex-shrink: 0;
    margin-right: 10px;
}

@media screen and (max-width: 1590px) {
    .date-pickers-row .filter-row-prefix {
        display: none !important;
    }
}

.filter-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cm-mid-gray);
    white-space: nowrap;
}

.filter-pills-row .filter-label {
    margin-right: 2px;
}

.select-deselect-icons {
    display: flex;
    gap: 2px;
}

.btn-select-toggle {
    padding: 1px 5px !important;
    font-size: 0.7rem !important;
    line-height: 1.2;
    color: var(--cm-mid-gray) !important;
    border-color: var(--cm-lines-color) !important;
    background: transparent !important;
    opacity: 0.6;
}

.btn-select-toggle:hover {
    opacity: 1;
    color: var(--cm-text-color) !important;
}

.filter-pills-row .btn {
    font-size: 0.8rem;
    padding: 2px 8px;
}

.filter-pills-row .filter-button.order-status {
    padding: 2px 8px;
}

.order-filter-modal .tag-wrap .tag {
    font-size: 0.8rem;
    padding: 1px 10px;
    border-radius: 6px;
}

.order-filter-modal .tag-box {
    gap: 4px;
}

.order-filter-modal .pop-in4 {
    animation: none;
}

.filter-pills-row > .tag-box-wrap {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
}

.filter-pills-row:has(.tag-box-wrap),
.filter-pills-row:has(.filter-pills-content) {
    align-items: flex-start;
    padding-top: 2px;
}

.order-filter-modal .searched-product-labels {
    gap: 5px;
}

.order-filter-modal .product-label {
    font-size: 0.8rem;
    padding: 1px 10px;
    border: 1px solid var(--cm-lines-color);
    border-radius: 6px;
    background-color: #fff;
}


.filter-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.product-filter-widget-inner {
    display: flex;
    flex-direction: column;
}

.product-search-compact {
    position: relative;
}

.product-search-input {
    font-size: 0.8rem;
    padding: 2px 8px;
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-border-radius);
    width: 160px;
    outline: none;
}

.product-search-input:focus {
    border-color: var(--cm-teal);
}

.content-more > a {
    display: block;
}

.menu-process-history .table tr td:nth-of-type(1),
.menu-process-history .table tr th:nth-of-type(1) {
    width: 180px;
    padding-left: 5px;
}

.menu-process-history .table tbody tr td:last-of-type {
    width: 16px;
    color: red;
    padding-right: 3px;
}

.menu-process-history-clickable:hover {
    background-color: #f5f5f5;
}

.menu-process-history-snapshot-meta {
    color: #999;
    font-size: 12px;
    margin-bottom: 15px;
}

.menu-process-history-snapshot-day {
    margin-bottom: 18px;
}

.menu-process-history-snapshot-date {
    margin: 0 0 6px;
    text-transform: capitalize;
}

.menu-process-history-snapshot-line {
    padding: 2px 0;
}

.menu-process-history-snapshot-qty {
    font-weight: 600;
}

.menu-process-history-snapshot-label,
.menu-process-history-snapshot-diets {
    color: #888;
}

.view-shop-as-menu-customer {
}

.cloudpos-report {
    display: flex;
    flex-direction: column;
}

.cloudpos-report .cloudpos-result {
    padding: 5px;
    border-bottom: 1px solid #ededed;
}
.cloudpos-report .cloudpos-error i.zmdi {
    color: red;
}

.cloudpos-report .cloudpos-success i.zmdi {
    color: green;
}

.type-filter-buttons {
    display: flex;
    gap: 10px;
}

.snelstart-config-box {
    border: 1px solid #ccc;
    padding: 0px 5px;
}
.tax-split-widget > .checkbox {
    padding-top: 10px;
}

.tax-split-row td:nth-of-type(2) input {
    width: 60px;
    margin-right: 3px;
}

.estimate-editor-v2 .page-content,
.estimate-viewer .page-content {
  overflow-y: auto;
  overflow-x: hidden;
}

/* --- Section gutter (fixed-position overlay, escapes overflow clipping) --- */
.section-gutter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    z-index: 10;
}
.gutter-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    transition: background 150ms, color 150ms, border-color 150ms;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.gutter-btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
    color: #333;
}
.gutter-btn.gutter-delete:hover {
    color: #d32f2f;
    border-color: #d32f2f;
}

/* --- Gap zone (insertion line between sections) --- */
.gap-zone {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.gap-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--cm-status-option-bg-secondary);
    opacity: 0;
    transition: all 150ms 0s;
}

.gap-zone:hover .gap-line,
.gap-zone.gap-locked .gap-line {
    opacity: 1;
    height: 4px;
    transition-delay: 0.28s;
}
.gap-zone.edge-gap .gap-line {
    transition-delay: 0s;
}
.gap-plus-button {
    position: relative;
    z-index: 6;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cm-status-option-bg-secondary);
    color: white;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 150ms 0s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.gap-zone:hover .gap-plus-button,
.gap-zone.gap-locked .gap-plus-button {
    opacity: 1;
    transition-delay: 0.28s;
}
.gap-zone.edge-gap .gap-plus-button {
    transition-delay: 0s;
}

/* --- Section type picker (dropdown from gap + button) --- */
.section-type-picker {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 20;
    margin-top: 4px;
}
.section-type-picker .picker-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    color: #555;
    transition: border-color 150ms, color 150ms;
}
.section-type-picker .picker-option:hover {
    border-color: #2196F3;
    color: #2196F3;
}


.order-filter-panel .template-selector {
    width: 150px;
}

.order-filter-panel .template-selector select {
    max-width: 100%;
}

.invoice-address-edit-button{
    cursor: pointer;
    position: absolute;
    top: 0;
    left: -15px;
}

.customer-address-box  {
    margin-top: 100px;
    margin-left: 40px;
    position: relative;

}

.customer-address-box.no-margin-top {
    margin-top: 0;
}

.customer-address-box textarea {
    height: 100px;
    width: 100%;
}

.invoice-contact-picker {
    font-size: inherit;
    line-height: inherit;
    height: auto;
    min-height: 0;
    padding: 1px 4px;
    max-width: 240px;
    vertical-align: baseline;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

.invoice-contact-picker-toggle {
    cursor: pointer;
    margin-left: 4px;
    font-size: inherit;
    vertical-align: baseline;
}

.day-boxes {
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 10px;
}
.day-toggle-box {
    border: 1px solid #ededed;
    padding: 20px 10px;
    display: flex;
}

.day-toggle-box .toggle-switch label:first-of-type {
    width: 80px;
    display: inline-block;
}

.toggle-title {
    font-weight: bold;
}

.day-box-exclusions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

}

.day-box-exclusions .day-toggle-box .toggle-title{
    width: 110px;
}

.toggle-switch-block {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    width: 100%;
}

.toggle-switch-block .btn {
    width: 100px;
}

.day-exclusion-group-days .day-toggle-box {
    padding: 5px 10px;
    box-sizing: border-box;
}

.day-exclusion-group {

}

.avail-unknown {
    color: #ccc;
}

.avail-available {
    color: green;
}

.avail-unavailable {
    color: red;
}

/* order show extra locations */

p.other-location {
    margin: 5px 0 0 0;
}

.no-margin-bottom {
    margin-bottom: 0;
}

ul li.other-loc {
    padding-bottom: 0;
}

.order-editor-grid .location-box.card .card-body.card-padding span.extra-location:before {
    content:"• ";
}

/* end order show extra locations */


.bgm-teal {
    background-color: #2e8c81 !important;
}

.order-overview .price-summary {
    display: none;
}

.order-overview .bootgrid-table .price-header-summary {
    display: none;

}
.invoice-total-summary {
    margin-top: 20px;
}
.invoice-total-summary .totals {
    width: 120px;
}
/*.order-total-summary, .invoice-total-summary*/ .totals {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
/*.order-total-summary, .invoice-total-summary*/  .sum-by-status {
    width: 180px;
    display: inline-block;
}

@media (hover: hover) {
    td.commands .btn {
        background-color: transparent !important;
        color: black;
        box-shadow: none;

    }
    tr.editing td.commands .btn {
        background-color:  #2e8c81 !important;
        color: white;
        box-shadow: none;
    }

    .bootgrid-table tr.editing td.commands button .zmdi {
        color: white !important;
        visibility: visible !important;
    }

    td.commands .btn-danger:hover {
        color: var(--cm-color-danger) !important;
        background-color: var(--cm-color-danger-bg) !important;
    }

    td.commands .btn-info:hover {
        color: white !important;
        background-color: #40b2ca !important;
    }

    .bootgrid-table tr td.commands button.save {
        visibility: visible !important;
    }

    .bootgrid-table tr td.commands button .zmdi,
    .bootgrid-table tr td.commands button.delete,
    .bootgrid-table tr .extra-order-options-wrap {
        visibility: hidden;
    }

    .bootgrid-table tr:hover td.commands button .zmdi,
    .bootgrid-table tr:hover td.commands button,
    .bootgrid-table tr:hover .extra-order-options-wrap {
        visibility: visible;
    }


    .order-overview .price-summary {
        display: inline;
    }
    .order-overview .price-expanded {
        display: none;
    }

    .order-overview tr:hover .price-summary {
        display: none;

    }
    .order-overview tr:hover .price-expanded {
        display: inline;
    }

    .order-overview .bootgrid-table .price-header-summary {
        display: inline;
    }
    .order-overview .bootgrid-table .price-header-expanded {
        display: none;

    }
    .order-overview .bootgrid-table:hover .price-header-summary {
        display: none;

    }
    .order-overview .bootgrid-table:hover .price-header-expanded {
        display: inline;
    }



    .order-total-summary .total-incl-vat {
        display: none;
        animation: fadeOut 0.5s;
    }

    .order-total-summary:hover .total-incl-vat {
        display: inline;
        animation: fadeIn 0.5s;
    }

}

.cm-media-widget .cm-grid {
    max-height: 500px;
    overflow-y: scroll;
}

.progress-bar {
    background-color: #009688;
}

.bootgrid-table th {
    flex-direction: column;
    gap: 10px;
}

.invoice-action-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn {
    border-radius: 5px;
}

.btn-xs {
    border-radius: 3px;
}
.btn-lg {
    border-radius: 8px;
    text-transform: none;
}

.plan-name .starter {
    color: #91dce6;
}

.plan-name .fully-digital {
    color: #5f9299;
}

.plan-name .king-jungle {
    color: #e7be3d;
    font-weight: bold;
}

.plan-name .icon {
    font-size: 18px;
    margin-right: 10px;
}

/* google maps start */

#maps-modal {
    height: 400px;
}

.modal.google-maps .modal-header {
    padding: 5px 23px;
}

.modal-header .route-description {
    font-size: 0.8em;
    font-weight: 300;
    line-height: 1.3em;
}

.modal-header .route-description td:first-child {
    width: 8em;
}

.modal.google-maps div.modal-header > button > i.zmdi-close {
    padding-top: 10px;
}

/* google maps end */


.cm-label {
    margin-right: 20px;
    font-weight: bold;
    font-family: Panton-Regular;
    font-size: 18px;
    display: inline-block;
    min-width: 110px;
}
.cm-label.black {
    color: #888;

}
.cm-label.yellow {
    color: var(--cm-yellow);
}
.cm-label.green {
    color: var(--cm-green);

}

.orders-list > .card  {
    border-radius: 0px 0px 8px 8px;
}
.order-table-actions-wrap {
    border-bottom: 0px solid #edecec;
}

.orders-list > .card > .card-header {
    padding-left: 20px;
    border-bottom: 0px solid #edecec;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #f8f8f8;
    opacity: 0;
    animation: fadeOut 0.5s;
}

.container-fluid .block-header .actions {
    opacity: 0;
    animation: fadeOut 0.5s;
}

.orders-list:hover > .card > .card-header,
.container-fluid:hover .block-header .actions {
    visibility: visible;
    animation: fadeIn 0.5s;
    opacity: 1;
}

.orders-list > .card .card-header .actions {
    top: 7px;
}

.order-table-actions .filter-text {
    color: #888;
}

.tooltip-icon {
    position: relative;
}

.tooltip-icon:hover .zmdi,
li.dropdown:hover .zmdi{
    color: var(--cm-yellow);
}
.tooltip-icon:hover .zmdi-delete,
li.dropdown:hover .zmdi-delete,
.btn-secondary:hover .zmdi-delete {
    color: var(--cm-danger) !important;
}

.tooltip-icon .popup-tooltip {
    display: none;
    position: absolute;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.31);
    z-index: 9999;
    min-width: 400px;
    left: -350px;
    padding: 10px 20px;
    top: 43px;
    font-size: 14px !important;
    color: #5e5e5e !important;

}

.day-column .tooltip-icon .popup-tooltip {
    top: auto !important;

}


.vertical-alignment-top {
    bottom: 43px !important;
    top: auto !important;
}

/* Variation on the tooltip popup for inline search results */
.popup-search-results {
    display: block;
    position: absolute;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.31);
    z-index: 99;
    width: 400px;
    padding: 10px 20px;
    color: #333;
}

/* Material-calendar day preview popup (CAT-990).

   This is a floating hover tooltip (z-index 9999, shadowed) showing a
   product's Totaal/Verhuurd/Beschikbaar for one day. Two things broke it after
   the "modern" month-calendar redesign:

   1. The base `.tooltip-icon .popup-tooltip` sets `min-width: 400px`; reset it
      so this override's `width` actually wins (otherwise the popup renders
      400px wide and blankets the neighbouring day columns).
   2. The popup's inner <table> lives inside `.cm-calendar-modern.datepicker
      .table-condensed`, so the redesign's day-cell rule
      (`.table-condensed td { height: 92px; padding: 8px; border; border-radius }`)
      cascaded onto every popup <td> — making each of the 3-4 rows a 92px
      bordered box. The table ballooned to ~370px tall and spilled out of the
      fixed-height card with no background, smearing down over the rows below.
      The inner-cell reset below (`...popup-tooltip table td`) insulates the
      popup table from those day-cell rules.

   The popup is a floating tooltip, so it does not have to fit inside the
   ~100px day cell — it sizes to its content and is centred over the day so any
   overhang is small and symmetric. `overflow: hidden` keeps everything inside
   the rounded, shadowed card. */
.sw-products .tooltip-icon .popup-tooltip {
    box-sizing: border-box;
    width: 200px;
    min-width: 0;
    left: -100px;
    top: auto;
    bottom: calc(100% + 12px);
    height: auto;
    overflow: hidden;
    padding: 12px 16px;
}

/* Keep the inner table within the card: fixed layout at 100% width so a long
   product name wraps instead of stretching the table past the card edge (which,
   with `overflow: hidden`, would clip the Totaal/Verhuurd/Beschikbaar values). */
.sw-products .tooltip-icon .popup-tooltip table {
    width: 100%;
    table-layout: fixed;
}

/* Insulate the popup's inner table from the modern-calendar day-cell rules
   (which otherwise force each row to 92px tall with a border/radius). Keep the
   rows compact so the table fits the card. */
.sw-products .tooltip-icon .popup-tooltip table td {
    height: auto;
    padding: 1px 0;
    border: none;
    border-radius: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* The value column (second cell of each data row) stays narrow and
   right-aligned so the figures sit at the card's right edge. */
.sw-products .tooltip-icon .popup-tooltip table td:nth-child(2) {
    width: 3.5em;
    padding-left: 8px;
    text-align: right;
}

.create-webshop-button .popup-tooltip {
    left: 80px !important;
    top: 120px !important;
}

.datepicker .sw-products table {
    border: none;
}

.datepicker .sw-products table tbody tr td {
    border: none;
    text-align: left;
    font-size: 11px;
    padding-bottom: 0;
}

.datepicker .sw-products table tbody tr td:nth-child(2) {
    padding-left: 5px;
}

.tooltip-icon .popup-tooltip.alignment-left {
    left: -25px;
}

.content-column-icon.tooltip-icon .popup-tooltip {
    top: 51px;
}

.content-column-icon.tooltip-icon .popup-tooltip.alignment-left {
    left: -18px;
}
.content-column-icon.tooltip-icon .popup-tooltip.alignment-right {
    left: -343px;

}




.top-menu .popup-tooltip.alignment-right {
    left: -340px;
    top: 43px;
    color: black;
    text-align: left;
}


.top-menu .help-button-nav .popup-tooltip.alignment-right {
    left: -355px;

}


.column-tooltip .popup-tooltip.alignment-left {
    left: -28px;
    top: 34px;
}
.column-tooltip .popup-tooltip.alignment-right {
    left: -353px;
    top: 34px;
}

.tooltip-icon .arrow {
    left: 365px;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #cccccc;
    border-bottom-color: #ffffff;
    top: -19px;
    border-width: 10px;
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-bottom-color: white;
    border-style: solid;
}

.tooltip-icon .hitbox {
    left: 30px;
    margin-left: -11px;
    top: -19px;
    position: absolute;
    display: block;
}

.tooltip-icon .hitbox::after {
    position: absolute;
    display: block;
    content: " " ;
    top: -4px;
    width: 210px;
    height: 25px;
}
.tooltip-icon .alignment-left .hitbox::after {
    margin-left: -20px;
}
.tooltip-icon .alignment-right .hitbox::after {
    margin-left: 210px;
}

.tooltip-icon .arrow::after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-bottom-color: transparent;
    border-style: solid;
    content: " ";
    top: 1px;
    margin-left: -4px;
    border-top-width: 0;
    border-bottom-color: #ffffff;
}

.tooltip-icon .arrow.vertical-alignment-top {
    display: none !important;
}

.tooltip-icon .arrow.vertical-alignment-top::after {
    display: none !important;
}

/* The material-calendar popup is now a clean floating card centred above the
   day cell (see `.sw-products .tooltip-icon .popup-tooltip`). The little arrow
   triangle was anchored to point at the icon below the popup; with the popup
   floating above it has no target and, clipped by the card's `overflow:
   hidden`, only shows as a stray nub inside the card edge. Hide it (CAT-990). */
.sw-products .tooltip-icon .arrow {
    display: none;
}

.tooltip-icon .arrow.alignment-left {
    left: 40px;
}

.tooltip-icon .arrow.alignment-center {
    left: 190px;
}

.popup-tooltip {
}

.tooltip-icon:hover .popup-tooltip {
    display: block;
    opacity: 0;
    animation: fadeIn 0.15s ease-in 0.15s;
    animation-fill-mode: forwards;
}

.tooltip-icon.tooltip-delay:hover .popup-tooltip {
    animation-delay: 2s;
}

.tooltip-compact {
    position: fixed;
    z-index: 10001;
    background-color: white;
    color: #5e5e5e;
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.31);
    font-size: 13px;
    font-weight: normal;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    animation: fadeIn 0.15s ease-in 0.66s forwards;
}

.tooltip-compact::before {
    content: "";
    position: absolute;
    /* Arrow tracks the anchor point: negated translateX shift, clamped to stay inside tooltip.
       The tooltip's translateX = clamp(8px - A, -50%, 100vw - A - 100% - 8px) where A = --anchor-x.
       Negating: clamp(-(100vw - A - 100% - 8px), 50%, -(8px - A)) = clamp(A + 100% + 8px - 100vw, 50%, A - 8px).
       Outer clamp keeps the arrow at least 12px from tooltip edges. */
    left: clamp(12px, clamp(calc(var(--anchor-x) + 100% + 8px - 100vw), 50%, calc(var(--anchor-x) - 8px)), calc(100% - 12px));
    margin-left: -6px;
    border: 6px solid transparent;
}

.tooltip-compact.tooltip-compact-below::before {
    bottom: 100%;
    border-bottom-color: white;
}

.tooltip-compact.tooltip-compact-above::before {
    top: 100%;
    border-top-color: white;
}

/* Clickable variant (cs2.tooltip/click-popover): interactive and shown
   immediately, unlike the hover tooltip which is inert and fades in on a delay. */
.tooltip-compact.is-clickable {
    pointer-events: auto;
    opacity: 1;
    animation: none;
    padding: 6px;
    white-space: normal;
}

.section-toolbar .zmdi:hover {
    color: var(--cm-yellow) !important;
    border-color: var(--cm-yellow) !important;
}

.template-selector select {
    max-width: 140px;
}

.section-toolbar .popup-tooltip {
    top: 60px !important;;
}

.error-box {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #000;
    z-index: 900000000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 8px;
}

.top-menu .zmdi-settings {
    color: var(--cm-yellow);
}

.blur {
    opacity: 0.5;
    filter: blur(3px);
    pointer-events: none;
}

.hover-opacity {
    opacity: 0.34;
    transition: opacity 0.15s;
}
.hover-opacity:hover {
    opacity: 1;
    transition: opacity 0.3s;
}

.color-preview {
    border: 1px solid var(--cm-very-light-gray);
    border-radius: 6px;
    color: var(--cm-mid-grey);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    text-transform: uppercase;
    cursor: pointer;
}
.emphasize-it {
    border-style: solid;
    border-width: thin;
    border-color: var(--cm-yellow);
    animation: emphasizeIt 2s ease-out, 2s ease-in-out 3s infinite alternate emphasizeGlowing;
}

.emphasize-completed {
    border-style: solid;
    border-width: thin;
    border-color: var(--cm-green);
    animation: emphasizeCompleted 2s ease-out;
}

.document-settings {
    gap: 20px;
    margin-top: 30px;
    padding: 10px;
    border: 1px solid var(--cm-very-light-gray);
    border-radius: 6px;
}

.quil-editor[style] .ql-editor * {
    font-family: var(--editor-default-font, inherit);
}
.estimate-document-settings {
    flex-direction: column;
}

.document-settings input {
    padding-left: 5px !important;
}

.viewer-wrap:hover .estimate-text-column-content {
    min-height: 0px;
}

.estimate-viewer .viewer-wrap:hover .estimate-text-column-content {
    min-height: 0px;
}
.estimate-view-wrap .estimate-viewer {
    margin-top: 140px;
}
@media screen and (max-width: 900px) {
    .estimate-view-wrap .estimate-viewer {
        margin-top: 20px;
    }
}
.estimate-editor-expl
{
    max-width: 50%;
}
.estimate-viewer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Customer comment form in public estimate viewer */
.estimate-comment-form {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
}

.estimate-comment-form textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

.estimate-comment-form textarea:focus {
    border-color: var(--cm-green);
    outline: none;
}

/* Customer comment display in estimate editor */
.estimate-customer-comment-display {
    background: #f9f9f9;
    padding: 15px;
    border-left: 3px solid var(--cm-green);
    margin: 10px 0;
    border-radius: 0 4px 4px 0;
}

.estimate-customer-comment-display h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #333;
}

.estimate-customer-comment-display .comment-content {
    white-space: pre-wrap;
    color: #555;
    line-height: 1.5;
}

.estimate-customer-comment-display .comment-timestamp {
    margin-top: 10px;
    font-size: 12px;
}

/* Regarding cards with a cover image (background image) */
.card.cover-image {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position-x: center;
    background-position-y: top;
    cursor: pointer;

    opacity: 1;
    transition: 0.3s;
}

.cover-image .card-header {
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom-width: 0px;
}

.cover-image:hover {
    opacity: 0.8;
}

.cover-image:hover .card-header {
    border-bottom: medium solid var(--cm-green);
}

/* Regarding the overlay on the estimate-page-wrap in estimate preview */
.estimate-viewer:hover .overlay {
    display: flex;
    flex-direction: column;
}

.overlay {
    justify-content: flex-tart;
    align-items: center;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 2;
    cursor: pointer;
    background-color: rgba(0,0,0, 0.1);
    animation: fadeIn 0.3s;
}

.overlay .circle {
    height: 300px;
    width: 300px;
    top: 100px;
    position: absolute;
    background-color: var(--cm-green);
    color: white;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
}

.upsell .explainer a {
    color: var(--cm-yellow);
}
.upsell .explainer h3 {
    color: var(--cm-white) !important;
}
.overlay h2 {
    position: absolute;
    top: 50%;
    width: 300px;
    text-align: center;
    margin: 0px;
    transform: translateY(-50%);
    color: white;
}

.signature-expl {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: 30px;
}


/* Regarding estimate tooltips */
.estimate-document-settings {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.tooltip-icon.zmdi {
    color: #aaa;
    font-size: 12px;
}

.tooltip-icon.zmdi .popup-tooltip {
    color: rgb(94, 94, 94);
}

.help-button-nav {
    color: var(--cm-white);
    cursor: pointer;
    margin-top: 3px;
    font-size: 24px;
    margin-left: 100px;
    margin-right: 20px;
}

.help-button-nav:hover {
    border-color: var(--cm-yellow);
}

.view-estimate-box > .card-header {
}

.main-menu.starter .feature-ingredients a,
.main-menu.starter .feature-webshop a,
.main-menu.main-course .feature-webshop a
{
}

.upsell {
    gap: 20px;
    flex: 1;
    align-items: start;

}

.upsell .card {
    width: 800px;
    max-width: 50%;
}

.upsell.staff-upsell .card {
    width: 100% !important;
}

.shopping-list-preview img {
    border: 1px solid #eee;
    box-shadow: 3px 3px 3px #eee;

}

.upsell .explainer {
    background-color: var(--cm-green);
    color: var(--cm-white);
    padding: 25px;
}

.upsell .explainer h2 {
    color: var(--cm-white);
    font-size: 20px;
}

.upsell .explainer p {
    font-size: 15px;
    font-weight: 300;
}

.upsell .explainer button {
    background-color: var(--cm-yellow) !important;
    color: var(--cm-white) !important;
}

.upsell .videowrap {
    display: flex;
    gap: 30px;
    flex-direction: column;
    align-items: start;
    flex-grow: 1;
}


.upsell .videowrap .video {
    width: 100% !important;
    padding: 20px;
    border-radius: 8px;
    background-color: #000;
    height: 360px;
}

.required-input > input {
    background-color: var(--cm-danger-soft);
    animation: fadeIn 0.5s;
    border-radius: 8px;
}


.ql-snow .ql-editor h1,
.ql-snow .ql-editor h2,
.ql-snow .ql-editor h3,
.ql-snow .ql-editor h4,
.ql-snow .ql-editor h5,
.ql-snow .ql-editor h6
{
    margin-top: 9px;
    margin-bottom: 9px;
/*    font-size: inherit !important; */
}

.ql-editor {
    line-height: 1.54 !important;
}

.product-planning-products ul li {
    padding-left: 0px !important;
}

.product-planning-products .ql-indent-1 {
    padding-left: 10px !important;
}


.section-tabs {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.move-section-left,
.move-section-right{
    cursor: pointer;
}

.section-tab {
    display: flex;
    gap: 20px;
    padding: 10px 20px;
    border: 1px solid var(--cm-lines-color);
    border-radius: 20px;
    align-items: center;
}

.section-tabs > .tooltip-icon {
    font-size: 1.5em;
}

.section-tabs > .tooltip-icon,
.section-tab {
    cursor: pointer;
}

.section-tab.active {
    background-color: var(--cm-table-heading-bg-color);
    border: 1px solid var(--cm-green);
    color: var(--cm-table-heading-color);
}

.section-tab .zmdi.zmdi-edit:hover {
    color: var(--cm-yellow);
}

.section-tab .section-tab-title .unnamed {
}

.section-tab-title input {
    border: 1px solid var(--cm-yellow);
    background-color: inherit;
}

.section-tabs .section-tab:first-of-type .move-section-left,
.section-tabs .section-tab:last-of-type .move-section-right {
    display: none;
}

.move-section {
    background-color: #ededed;
    border-radius: 8px;
    width: 16px;
    height: 16px;
    text-align: center;
    color: black;
    line-height: 16px;
    padding-bottom: 8px;
}

.move-section:hover {
    background-color: #ccc;
}

.widget-editor {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.general-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.widget-toolbar.toolbar-fixed {
    background-color: white;
    border-radius: 6px;
    position: fixed;
    top: 90px;
    right: 20px;
    padding: 5px;
    z-index: 99999;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
    flex-direction: column;
}

.widget-toolbar .spacer {
    flex-grow: 1;
}


.future-concept-order-group .collapsed {
    display: none;
}
.future-concept-order-group .expanded {
    display: block;
}
.future-concept-orders {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ccc;
}

.future-concept-orders .future-concept-order-group-header {
    margin-bottom: 5px;
    padding-left: 20px;
    border-bottom: #ededed;
}
.future-concept-orders .fc-order {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: #ededed;
    padding-left: 20px;
    padding-right: 20px;
}

.future-concept-orders .fc-order > span:first-of-type {
    width: 140px;
}

.future-concept-orders .fc-order > span:nth-of-type(2) {
    width: 100px;
}

.future-concept-orders .fc-order > span:nth-of-type(3) {
    flex-grow: 1;
}
/*
.materials-editor .modal-body td:nth-child(2) {
    padding-left: 2em;
}
*/
.materials-editor .submit-button {
    padding: 20px 0;
    text-align: right;
}

.materials-table tbody td {
    text-align: right;
    padding-right: 10px;
}

.materials-table td {
    padding-right: 10px;
}

.materials-table td.product-name {
    text-align: left;
}

.product-name-cell .materials-availability {
    position: relative;
    cursor: pointer;
}

.new-product .textarea textarea {
    border: 1px solid #ccc !important;
    padding: 5px;
}

.not-enough-orders-hint {
    flex-grow: 1;
    margin-left: 30px;
}

.ai-results .table-responsive {
    margin: 30px 20px 0 0;
}

.header-inner .ai-button {
    position: fixed;
    z-index: -1;
    width: 100%;
    text-align: center;
}

.header-inner {
    padding: 0px !important;
}

.ai-button .yellow {
    color: rgb(253, 191, 15);
}

.ai-button a .white {
    color: rgb(255,255,255);
}
.ai-results .buttons input {
    margin-right: 5px;
}

.new-day-divider {
    position: relative;
}

.new-day-divider > td:first-of-type {
    position: relative;
}


/* todo add day abbrevs for each language :-) */
.new-day-divider.ma td:first-of-type::before { content: "ma"; }
.new-day-divider.di td:first-of-type::before { content: "di"; }
.new-day-divider.wo td:first-of-type::before { content: "wo"; }
.new-day-divider.do td:first-of-type::before { content: "do"; }
.new-day-divider.vr td:first-of-type::before { content: "vr"; }
.new-day-divider.za td:first-of-type::before { content: "za"; color: #888; }
.new-day-divider.zo td:first-of-type::before { content: "zo"; color: #888; }

.new-day-divider td {
    border-top: 2px solid #f6f6f6 !important;
}

.new-day-divider td:first-of-type::before {
    position: absolute;
    top:  0px;
    left: 0px;
    padding: 2px 6px;
    color: var(--cm-table-heading-color);
    border-radius: 0px 0px 6px 0px;
    background-color: var(--cm-table-heading-bg-color);
    font-size: 9px;
}

.new-day-divider.za td:first-of-type::before,
.new-day-divider.zo td:first-of-type::before {
}

.modal-color-picker-widget-modal .modal-dialog {
    width: 278px;
}

#webshop-preview-frame {
    min-height: 80vh;
    height: 900px;
    width: 100%;
    max-height: 100vh;
    border-radius: var(--cm-border-radius);
}

.border-type-button {
    background-color: #fff;
    height: 30px;
    width: 160px;
    color: white;
    position: relative;
    padding: 5px 5px 0px 0px !important;
    margin-right: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
}
.border-type-button.active {
    border: 1px solid #333;
}

.border-type-button-inner {
    height: 26px;
    width: 150px;
    position: absolute;
    z-index: 1;
    left: 0px;
    bottom: 0px !important;
    background-color: var(--cm-mid-gray);
    border-radius: 0px 0px 0px 4px;
}
.border-type-button-inner.shadow {
    height: 23px;
    background-color: #aaa;
    width: 145px;
}

.border-type-button.active .border-type-text {
    color: #333;
}

.location-times-widget .inline-datepicker {
    font-size: 0.8rem;
}

.border-type-text {
    position: absolute;
    z-index: 2;
    top: 6px;
    left: 0px;
    width: 160px;
    text-align: center;
    color: white;
}

.gap-5 {
    gap: 5px;
}
.gap-10 {
    gap: 10px;
}
.gap-20 {
    gap: 20px;
}
.gap-30 {
    gap: 30px;
}
.gap-40 {
    gap: 40px;
}
.add-product-or-title-bar {
    gap: 20px;
}


.cm-hidden {
    visibility: hidden;
}

.menus-header:hover .buttons .zmdi-copy {
    visibility: visible !important;
}

.logout-hint {
    border-radius: 6px;
    margin-bottom: 10px;
}


.w-background-video {
    position: relative;
    overflow: hidden;
    color: white;
}

.bg-video-hero {
	  position: absolute;
	  left: 0px;
	  top: 0px;
	  right: 0px;
	  bottom: 0px;
	  display: block;
	  width: 100%;
	  height: 100%;
    z-index: -1;
}

.bg-video-hero video {
    width: 100%;
}

.login-content .lc-block {
    background-color: rgba(255,255,255,0.96);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}

.login-content .lc-block .form-control {
    background-color: transparent;
}

.weekday-table .same-day,
.weekday-table .same-day select {
    color: #aaa;
}

.popup-tooltip {
    text-transform: none !important;
    font-weight: normal;
}

.extra-import-options {
   margin-top: 5px;
   font-size: 14pt;
   color: #777;
   width: 24px;
   cursor: pointer;
}
.extra-import-options-wrap {
   position: relative;
   width: 16px;
   text-align: center;
}
.extra-import-options-modal {
   position: absolute;
   width: 230px;
   z-index: 9999999 !important;
   right: 12px !important;
   top: 15px !important;
   left: inherit !important;
   display: block !important;
}

.flex-column {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    gap: 20px;
}
.flex-align-start {
    align-items: start;
    align-content: start;

}

.flex-row {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    gap: 20px;
}

.card-header .zmdi-info-outline {
    color: var(--cm-mid-gray);
}

.calendar-weekview {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

.day-category-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 5px;
    padding: 3px;
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px solid #ededed;
}
.calendar-weekview-range {
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 6px;
    min-width: 410px;
}
.calendar-weekview-header-wrap {
    display: flex;
    gap: 0px;
    align-items: center;
}

.calendar-weekview-header {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: center;
}

.calendar-weekview .day-column {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 5px;
}

.day-column.day-num-6,
.day-column.day-num-7 {
}

.calendar-weekview .weekday-order-card {
    border: 0px solid #ccc;
    position: relative;
    border-radius: 4px;
    cursor: pointer;
}
.order-card-body {
    padding: 8px;
    font-size: 0.84rem;
    font-weight: bold;
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--cm-lines-color);
    padding: 8px;
    align-items: center;
}


.weekday-order-card .order-card-time {
    font-size: 8pt;
    left: 0;
    top: 0;
    border-radius: 0px 0px 4px 0px;
    padding: 0px 4px;
    width: 48px;
}

.weekday-order-card .order-card-pax {
    font-size: 8pt;
    right: 0;
    top: 0;
    border-radius: 0px 0px 0px 4px;
    padding: 0px 4px;
    width: 48px;
    text-align: right;
}

.weekday-order-card .order-card-type {
    font-size: 8pt;
    width: 32px;
    left: calc(50% - 16px);
    top: 0;
    border-radius: 0px 0px 4px 4px;
    padding: 0px 4px;
    text-align: center;
}

.day-col-header {
    text-align: center;
    font-weight: bold;
    border: 0px solid #ededed;
    border-radius: 5px;
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-table-heading-color);
    padding: 2px 0px;
    font-size: 0.8rem;
}

.order-status-bg.new {
    background-color: var(--cm-status-new-bg);
    border-bottom: 2px solid var(--cm-status-new-bg-secondary);
    color: var(--cm-status-new);
}
.order-status-bg.new .order-card-header {
    border-bottom: 1px solid var(--cm-status-new-bg-secondary);
}

.order-status-bg.concept {
    background-color: var(--cm-status-concept-bg);
    border-bottom: 2px solid var(--cm-status-concept-bg-secondary);
    color: var(--cm-status-concept);
}

.order-status-bg.concept .order-card-header {
    border-bottom: 1px solid var(--cm-status-concept-bg-secondary);
}


.order-status-bg.cancelled {
    background-color: var(--cm-status-cancelled-bg);
    border-bottom: 2px solid var(--cm-status-cancelled-bg-secondary);
    color: var(--cm-status-cancelled);
}

.order-status-bg.cancelled .order-card-header {
    border-bottom: 1px solid var(--cm-status-cancelled-bg-secondary);
}

.order-status-bg.awaiting-confirmation {
    background-color: var(--cm-status-awaiting-confirmation-bg);
    border-bottom: 2px solid var(--cm-status-awaiting-confirmation-bg-secondary);
    color: var(--cm-status-awaiting-confirmation);
}

.order-status-bg.awaiting-confirmation .order-card-header {
    border-bottom: 1px solid var(--cm-status-awaiting-confirmation-bg-secondary);
}

.order-status-bg.partial-invoiced {
    background-color: var(--cm-status-partial-invoiced-bg);
    border-bottom: 2px solid var(--cm-status-partial-invoiced-bg-secondary);
    color: var(--cm-status-partial-invoiced);
}

.order-status-bg.partial-invoiced .order-card-header {
    border-bottom: 1px solid var(--cm-status-partial-invoiced-bg-secondary);
}


.order-status-bg.invoiced {
    background-color: var(--cm-status-invoiced-bg);
    border-bottom: 2px solid var(--cm-status-invoiced-bg-secondary);
    color: var(--cm-status-invoiced);
}

.order-status-bg.invoiced .order-card-header {
    border-bottom: 1px solid var(--cm-status-invoiced-bg-secondary);
}


.order-status-bg.estimate {
    background-color: var(--cm-status-estimate-bg);
    border-bottom: 2px solid var(--cm-status-estimate-bg-secondary);
    color: var(--cm-status-estimate);
}
.order-status-bg.estimate .order-card-header {
    border-bottom: 1px solid var(--cm-status-estimate-bg-secondary);
}

.order-status-bg.confirmed {
    background-color: var(--cm-status-confirmed-bg);
    border-bottom: 2px solid var(--cm-status-confirmed-bg-secondary);
    color: var(--cm-status-confirmed);
}

.order-status-bg.confirmed .order-card-header {
    border-bottom: 1px solid var(--cm-status-confirmed-bg-secondary);
}



.order-status-bg.to-invoice {
    background-color: var(--cm-status-to-invoice-bg);
    border-bottom: 2px solid var(--cm-status-to-invoice-bg-secondary);
    color: var(--cm-status-to-invoice);
}

.order-status-bg.to-invoice .order-card-header {
    border-bottom: 1px solid var(--cm-status-to-invoice-bg-secondary);
}



.order-status-bg.completed {
    background-color: var(--cm-status-completed-bg);
    border-bottom: 2px solid var(--cm-status-completed-bg-secondary);
    color: var(--cm-status-completed);
}

.order-status-bg.completed .order-card-header {
    border-bottom: 1px solid var(--cm-status-completed-bg-secondary);
}



.order-status-bg.option {
    background-color: var(--cm-status-option-bg);
    border-bottom: 2px solid var(--cm-status-option-bg-secondary);
    color: var(--cm-status-option);
}

.order-status-bg.option .order-card-header {
    border-bottom: 1px solid var(--cm-status-option-bg-secondary);
}



.order-status-bg.prospect {
    background-color: var(--cm-status-prospect-bg);
    border-bottom: 2px solid var(--cm-status-prospect-bg-secondary);
    color: var(--cm-status-prospect);
}

.order-status-bg.prospect .order-card-header {
    border-bottom: 1px solid var(--cm-status-prospect-bg-secondary);
}


.weekday-order-card a {
    color: inherit;
}
.day-category-title {
    font-weight: bold;
    text-align: center;
}

.order-card-hover {
    display: none;
}


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

.calendar-no-orders-found {
    text-align: center;
}

.tooltip-icon:hover .weekday-order-card .zmdi,
.weekday-order-card:hover .zmdi {
    color: unset !important;
}


.order-card-footer {
    padding: 5px 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.order-card-checkbox input[type="checkbox"] {
}

.order-card-footer input {
    background-color: transparent;
    border: 1px solid black;
}
.view-options-wrap {
    display: flex;
    justify-content: space-between;
}

.view-options-label {
    text-align: right;
}


@keyframes grow {
    0% { width: 0%; }
    100% { width: 100%; }
}

.view-options-wrap {
    margin-left: 20px;
    margin-right: 20px;
    border-bottom: 3px solid var(--cm-background-color);
    margin-bottom: 20px;
}
.view-options-settings {
    display: flex;
    align-items: center;
}
.view-option-button {
    cursor: pointer;
    display: flex;
    padding: 8px 20px;
    margin-bottom: -3px;
}
.view-option-button.active {
    border-bottom: 3px solid var(--cm-green);
    color: var(--cm-green);
}
.view-option-title {
    margin-left: 10px;
}
.view-option-button:hover .view-option-title {
}
.filter-macro {
    padding-right: 18px;
    color: var(--cm-font-color) !important;
}
.filter-macro::before {
    background-size: 12px 12px !important;
    top: -3px !important;
}

.filter-macro .form-control {
    border: none !important;
    color: var(--cm-font-color) !important;
    cursor: pointer !important;
}

.login-chooser {
    gap: 20px;
    display: flex;
}

.planning-first-row {
    border-top: 2px solid #ccc;
}

/* Card-based planning edit layout */
.planning-edit-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.planning-day-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.planning-day-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 2px solid #ccc;
    font-weight: bold;
}

.planning-day-header .datepicker-wrapper {
    position: relative;
}

.planning-day-header .datepicker-wrapper .dp-dropdown {
    position: absolute;
    z-index: 99999;
}

.planning-card {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.planning-card.active {
    background: var(--cm-table-heading-bg-color);
    border: 2px solid var(--cm-yellow);
}

.planning-card.active .planning-card-header {
    background: var(--cm-table-heading-bg-color);
}

.planning-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    border-radius: 4px 4px 0 0;
}

.planning-card-times {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.planning-card-times .datepicker-wrapper {
    position: relative;
}

.planning-card-times .datepicker-wrapper .dp-dropdown {
    position: absolute;
    z-index: 99999;
}

.planning-card-description {
    flex: 1;
}

.planning-card-description textarea {
    min-width: 150px;
    width: 100%;
}

.planning-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}

.planning-card-body {
    padding: 10px 12px;
}

.planning-card-toggles {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 8px;
}

.planning-card-toggles .checkbox {
    margin: 0;
}

.planning-card-more-options {
    margin-bottom: 8px;
}

.planning-card-details {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.planning-card-detail {
    flex: 1;
}

.planning-card-detail textarea {
    width: 100%;
}

.planning-card-staff {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.planning-card-staff > div {
    flex: 0 0 calc(33.33% - 8px);
}

.planning-card-products {
    margin-top: 8px;
    border-top: 1px solid #f0f0f0;
    padding-top: 8px;
}

.planning-edit-cards + .flex {
    margin-top: 16px;
}

.planning-card-delete:hover {
    color: #e53935;
}

.planning-card-row-date {
    flex-shrink: 0;
}

.planning-card-row-date .datepicker-wrapper {
    position: relative;
}

.planning-card-row-date .datepicker-wrapper .dp-dropdown {
    position: absolute;
    z-index: 99999;
}

.webshop-products-tab {
    margin-top: 10px;
    margin-bottom: 20px;
}

.webshop-products-tab > p:first-of-type {
    font-size: 1.1em;
}

.superuser-stats > div {
    margin-top: 10px;
    margin-bottom: 20px;
}

.application-box-box {
    position: relative;
}

.application-box .app-price {
    position: absolute;
    right: 0px;
    top: 0px;
    color: #999;
    background-color: #ddd;
    padding: 5px 10px;
    border-radius: 0px 6px 0px 6px;
}

.application-box .table-sm {
    border: none !important;
}

.application-box .table-sm > thead > tr > th,
.application-box .table-sm > tbody > tr > th,
.application-box .table-sm > tbody > tr > td {
    border: none !important;
    border-top: none !important;
    padding: 4px 8px;
    font-size: 0.9em;
}

.application-box .table-sm > thead > tr > th {
    border-bottom: 1px solid var(--cm-lines-color) !important;
    padding-bottom: 10px;
    font-size: 1em;
}

.application-box .table-sm > thead > tr > th:first-child,
.application-box .table-sm > tbody > tr > td:first-child {
    padding-left: 0 !important;
}

.application-box .table-sm > thead > tr > th:last-child,
.application-box .table-sm > tbody > tr > td:last-child {
    padding-right: 0 !important;
}

.menus-reference-field  {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}

.menus-reference-field input {
    background: transparent;
    border: 1px solid #ccc !important;
    padding-left: 3px !important;

}

/* claessens doesn't want this */
.catermonkey-tenant-308 .menus-reference-field,
.catermonkey-tenant-315 .menus-reference-field {
    display: none;
}

.catermonkey-tenant-308  .menus-menu-block .date-section,
.catermonkey-tenant-315 .menus-menu-block .date-section {
    flex-direction: row;
}
.catermonkey-tenant-308 .menus-header,
.catermonkey-tenant-315 .menus-header {
    font-size: 8pt;
    width: 70px
}

.catermonkey-tenant-308 .menus-menu-block,
.catermonkey-tenant-315 .menus-menu-block {
    gap: 0px;
}

.sales-block {
    background-color: var(--cm-white);
    padding: 20px;
    font-size: 15px;
    margin-bottom: 20px;
    margin-left: -22px;
    margin-right: -15px;
}
.sales-block .flex {
    align-items: start;
}
.sales-block .zmdi {
    font-size: 1.5rem;
    margin-top: 5px;
    float: left;
    color: var(--cm-lines-color);
}

.sales-block .btn {
    margin-top: 10px;
}

.calfeed-modal .modal-dialog {
    width: 1024px ;
}

.quick-dates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}

.quick-dates-period-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cm-mid-gray);
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.quick-date-btn {
    font-size: 0.8rem !important;
    padding: 2px 8px !important;
}


.calfeed-grid .zmdi {
    cursor: pointer;
}

.default-calfeed {
    background-color: var(--cm-very-light-gray);
    padding: 10px;
    margin-bottom: 20px;
}
.default-calfeed pre {
    overflow: hidden;
}
.calfeed-modal .calfeed-grid {
    margin-bottom: 250px;
}

.default-calfeed .flex {
    gap: 10px;
    width: 100%;
    align-items: baseline;
}

.mail-method {
   margin-top: 20px;
   width: 100%;
}

.mail-method td {
   height: 50px;
   vertical-align: top;
   padding-right: 20px;
   padding-bottom: 10px;
}

.mail-method tr.header td {
   height: 30px;
   font-weight: bold;
}

table.user-brand-email-options td {
   padding-right: 20px;
}

.personal-email-details .mail-cards .card-header {
    padding: 0px;
}

.mail-cards .card-header h3 {
    font-size: 14px;
    font-weight: normal;
}

.mail-cards .card {
    border: none;
}

.smtp-detail-form > div {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.smtp-detail-form > div > label {
    width: 200px;
    flex-shrink: 0;
}

.micro-stat {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 3px 8px;
}

.micro-stat.ok {
    background-color: var(--cm-green);
    color: #fff;
}

.micro-stat.warning {
    background-color: var(--cm-yellow);
}

.micro-stat.danger {
    background-color: var(--cm-danger);
    color: white;
}

.catermonkey-tenant-328 .cleanup-icon {
    display: none;
}

#tenant-map {
    height: 400px;
}

.leaflet-container {
		height: 100vh;
		width: 100%;
		max-width: 100%;
		max-height: 100%;
}

.auto-reminders td {
    padding-bottom: 1em;
}

.auto-reminders td:first-child {
    padding-right: 2em;
}

.reminders .checkbox label {
    padding-left: 20px;
    padding-right: 2em;
}

.reminders .checkbox {
    display: inline-block;
}

.form-control.inline {
    display: inline-block;
}

table.reminders {
    margin-top: 30px;
}

table.reminders td span.checkbox {
    position: relative;
    top: -10px;
}

table.reminders tr.header td {
    padding-bottom: 10px;
}

.reminder-card {
    background-color: #fff;
    border-radius: 6px;
    padding: 20px;
    margin: 20px 0;
}

.reminder-comment p:last-child {
   padding-bottom: 0;
   margin-bottom: 0;
}

.reminder-card .date {
   padding-right: 2em;
}

.reminder-card .checkbox {
   display: inline-block;
   float: left;
   margin-top: 5px;
}

.reminders .checkbox .input-helper {
   padding-right: 5px;
}
.individuals-grid  tbody tr td:first-of-type {
    width: 500px;
}
.catermonkey-tenant-412 .internal-comments-box .ql-editor,
.catermonkey-tenant-844 .internal-comments-box .ql-editor {
    color: black;
}

.estimate-viewer.estimate-viewer-474 .estimate-page.a4-portrait,
.estimate-viewer.estimate-viewer-412 .estimate-page.a4-portrait,
.estimate-viewer.estimate-viewer-919 .estimate-page.a4-portrait,
.estimate-viewer.estimate-viewer-844 .estimate-page.a4-portrait { /* cocktail agency , coeur*/
    height: auto !important;
    /* no in page scrolls */
    min-height: 297mm;
}

.estimate-viewer.estimate-viewer-474 .estimate-page.a4-portrait .page-content,
.estimate-viewer.estimate-viewer-412 .estimate-page.a4-portrait .page-content,
.estimate-viewer.estimate-viewer-919 .estimate-page.a4-portrait .page-content,
.estimate-viewer.estimate-viewer-844 .estimate-page.a4-portrait .page-content { /* cocktail agency , coeur*/
    max-height: auto !important;
}

.estimate-viewer.estimate-viewer-919 .estimate-page.a4-portrait{
    height: auto !important;
    min-height: auto;
}

.estimate-viewer.estimate-viewer-919 .estimate-page.a4-portrait .page-content {
    max-height: fit-content !important;
}

.estimate-viewer.estimate-viewer-556 ul {
    list-style-type: square; /* J&K */
}

.estimate-viewer.estimate-viewer-1174 h1,
.estimate-viewer.estimate-viewer-1174 h2,
.estimate-viewer.estimate-viewer-1174 h3,
.estimate-viewer.estimate-viewer-1174 h4,
.estimate-viewer.estimate-viewer-1174 h6 { /* tutta italia */
    font-family: 'Borderline' !important;
    margin: 20px 0px 0px 0px !important;
}

.estimate-viewer.estimate-viewer-1174 .estimate-text-column-content h5 + p,
.estimate-viewer.estimate-viewer-1174 .estimate-text-column-content h4 + p,
.estimate-viewer.estimate-viewer-1174 .estimate-text-column-content .food-sub-product
{
    font-family: 'Parasupreme' !important;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}

.estimate-viewer.estimate-viewer-1174 .estimate-text-column-content h4 + p > i
{
    font-family: 'Poppins' !important;
    font-size: 11px;
    text-transform: initial;
    font-weight: normal;
}

.estimate-viewer.estimate-viewer-1174 h1 {

}
.estimate-viewer.estimate-viewer-1174 h2 {

}
.estimate-viewer.estimate-viewer-1174 h3 {

}
.estimate-viewer.estimate-viewer-1174 h4 {
    font-size: 18pt;
}
.estimate-viewer.estimate-viewer-1174 h5 {
    font-family: 'Borderline' !important;
    font-size: 17pt;
}
.estimate-viewer .planning-panel-view > tbody > tr > td:first-child {
    padding-left: 0px !important;
}
/*.estimate-viewer.estimate-viewer-1174 .product-row-inner > b {
    font-family: 'Borderline' !important;
    margin: 20px 0px 0px 0px !important;
    font-size: 14pt;
}*/

.estimate-viewer h1,
.estimate-viewer h2,
.estimate-viewer h3,
.estimate-viewer h4,
.estimate-viewer h5,
.estimate-viewer h6 {
    margin-top: 10px;
    margin-bottom: 0px;
}

.estimate-viewer.estimate-viewer-1214 .estimate-text-column-content h2,
.estimate-viewer.estimate-viewer-1214 .estimate-text-column-content h3,
.estimate-viewer.estimate-viewer-1214 .estimate-text-column-content h4,
.estimate-viewer.estimate-viewer-1214 .estimate-text-column-content h5 {
    color: rgb(150, 206, 0) !important;
}

.estimate-viewer.estimate-viewer-1214 .food-product-name {
    font-weight: bold;
}

.estimate-viewer.estimate-viewer-1062 .food-sub-product,
.catermonkey-tenant-1062 .estimate-editor-v2 .food-sub-product {
    font-weight: bold;
}

.product-quantity-lock {
    cursor: pointer;
}

.product-quantity-lock.zmdi-lock-open {
    visibility: hidden;
    color: var(--cm-light-gray);
}

.product-quantity-lock.zmdi-lock {
    visibility: visible;
    color: var(--cm-dark-gray);
}

.product-edit-row:hover  .product-quantity-lock {
    visibility: visible;
}


.subscription-status.unpaid,
.subscription-status.incomplete,
.subscription-status.incomplete_expired,
.subscription-status.past_due,
.subscription-status.canceled {
    color: var(--cm-danger-soft);
}

 .subscription-status.trialing {
     color: var(--cm-green);
 }

 .uppy-Dashboard .uppy-Dashboard-inner {
     min-height: 120px !important;
     width: 100% !important;
     border: 0px solid var(--cm-light-gray);
     background-color: var(--cm-table-heading-bg-color);
 }
 .uppy-Dashboard-dropFilesHereHint {
     height: 100%;
 }

 .modal .upload-estimate-modal .modal-content {
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 .modal .upload-estimate-modal .modal-body {
     flex-grow: 1;
 }

/* ---------------------------------------------------------------------------
   Setup tasks page (cs2.panels.onboarding.setup.views) — the non-linear
   onboarding checklist that replaced the wizard/fork/banner.
   --------------------------------------------------------------------------- */
.setup-page {
    max-width: 760px;
    margin: 24px auto 0;
    background: white;
    padding: 16px 48px 48px;
    border-radius: 12px;
}

/* "Best on a larger screen" notice — only shown on phones (see the 600px query). */
.setup-mobile-notice {
    display: none;
}

.setup-header h2 {
    margin-bottom: 6px;
}

.setup-header .text-muted {
    display: block;
    margin-bottom: 24px;
}

.setup-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 28px;
}

.setup-progress-track {
    width: 100%;
    height: 10px;
    background-color: var(--cm-light-gray);
    border-radius: 999px;
    overflow: hidden;
}

.setup-progress-fill {
    height: 100%;
    background-color: var(--cm-green);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.setup-progress-label {
    font-size: 0.9rem;
    color: var(--cm-mid-gray);
    font-weight: 600;
}

.setup-tasks {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.setup-task-card {
    display: flex;
    align-items: center;
    gap: 18px;
    transition: background-color 120ms linear;
    background-color: var(--cm-white);
    border: 1px solid var(--cm-lines-color);
    border-left: 4px solid var(--cm-lines-color);
    border-radius: var(--cm-card-border-radius);
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.setup-task-card:hover {
  background-color: var(--cm-table-heading-bg-color);
}

.setup-task-card:hover .btn {
  transition: transform 120ms ease-in-out;
}

.setup-task-card:hover .btn {
  transform: scale(1.05);
}


.setup-task-card.done {
    border-left-color: var(--cm-color-success);
    background-color: var(--cm-very-light-gray);
}

.setup-task-card.done h4, .setup-task-card.done p {
  color: var(--cm-nav-color);
  text-decoration-line: line-through;
}

.setup-task-card.done .setup-task-done {
  display: none;
}


.setup-task-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--cm-light-gray);
    color: var(--cm-green);
    font-size: 1.4rem;
}

.setup-task-card.done .setup-task-icon {
    background-color: var(--cm-color-success-bg);
    color: var(--cm-color-success);
}

/* Show the tenant's actual logo in the icon circle once the logo task is done. */
.setup-task-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 50%;
    background-color: var(--cm-white);
}

.setup-task-body {
    flex-grow: 1;
    min-width: 0;
}

.setup-task-title {
    margin: 0 0 2px;
    font-size: var(--cm-h4-font-size);
}

.setup-task-blurb {
    margin: 0;
    color: var(--cm-mid-gray);
    font-size: 0.92rem;
}

.setup-task-action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.setup-task-done {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cm-color-success);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@media only screen and (max-width: 600px) {
    .setup-page {
        background: white;
        padding: 12px 12px;
        border-radius: 12px;
        margin: 12px -8px;
    }

    .setup-mobile-notice {
        display: flex;
        align-items: center;
        gap: 10px;
        background-color: var(--cm-light-green-transparent);
        color: var(--cm-green);
        padding: 10px 14px;
        border-radius: 8px;
        margin-bottom: 16px;
        font-size: 14px;
        line-height: 1.35;
    }
    .setup-mobile-notice .zmdi {
        font-size: 1.5rem;
        flex-shrink: 0;
    }
    .setup-task-card {
        flex-wrap: wrap;
        gap: 12px;
    }
    .setup-task-body {
        flex-basis: calc(100% - 62px);
    }
    .setup-task-action {
        flex-basis: 100%;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
}

/* Setup nudge banner (app-wide, while a trialing owner has tasks outstanding) */
.setup-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    background-color: var(--cm-pale-yellow);
    color: var(--cm-green);
    padding: 10px 20px;
    font-weight: 600;
    text-decoration: none;
}

/* The banner is an <a>; the app's global a:link / a:visited / a:hover rules
   (specificity 0,1,1) would otherwise win over .setup-banner (0,1,0), painting
   the text link-blue and hiding it on hover. Pin green across every link state
   with class+pseudo specificity (0,2,0); the child spans inherit it. */
.setup-banner:link,
.setup-banner:visited,
.setup-banner:hover,
.setup-banner:active {
    color: var(--cm-green);
    text-decoration: none;
}

.setup-banner:hover {
    background-color: var(--cm-yellow);
}

.setup-banner-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.setup-banner-text .zmdi {
    font-size: 1.2rem;
}

.setup-banner-progress {
    background-color: var(--cm-green);
    color: var(--cm-white);
    border-radius: 999px;
    padding: 1px 10px;
    font-size: 0.82rem;
}

.setup-banner-cta {
    color: var(--cm-green);
    text-decoration: underline;
    white-space: nowrap;
}

/* Email-verification nudge: sits in normal flow below the nav, exactly like
   .setup-banner (not sticky/overlapping like the old .demo-mode-banner). */
.email-verification-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    background-color: var(--cm-light-green-transparent);
    color: var(--cm-green);
    padding: 8px 20px;
    text-align: center;
}

/* Make the "Get started" nav item stand out from the rest of the sidebar */
.main-menu .nav-get-started a,
.main-menu .nav-get-started a .zmdi {
    color: var(--cm-yellow);
}

.main-menu .nav-get-started.active a,
.main-menu .nav-get-started.active a .zmdi {
    color: var(--cm-white);
}

/* Setup task modals (logo / locations / categories) */
.setup-modal-body {
    padding-bottom: 20px;
}

/* "You can always configure this further later" reassurance under the modal title */
.setup-modal-note {
    font-size: 13px;
    margin: 0 0 16px;
}

/* Expandable card per category kind in the categories modal */
.setup-collapse-card {
    border: 1px solid #e4e7e6;
    border-radius: 8px;
    margin-bottom: 14px;
    background: var(--cm-white);
}

.setup-collapse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
}

.setup-collapse-card.expanded .setup-collapse-header {
    border-bottom: 1px solid #eef1f0;
}

.setup-collapse-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--cm-dark-gray, #2a3b35);
}

.setup-collapse-header .zmdi {
    font-size: 18px;
    color: #888;
}

.setup-collapse-body {
    padding: 12px 16px 16px;
}

.setup-collapse-text {
    font-size: 13px;
    margin: 0 0 4px;
}

/* Bulk-import overall progress bar: fill = terminal children fraction, with a
   left-to-right shimmer inside the filled part while the import is running */
.ob-import-progress-track {
    height: 8px;
    background: #eceeed;
    border-radius: 4px;
    overflow: hidden;
}

.ob-import-progress-fill {
    position: relative;
    height: 100%;
    background: var(--cm-green, #2a9d8f);
    border-radius: 4px;
    overflow: hidden;
    transition: width 0.4s ease;
}

.ob-import-progress-fill.active::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: ob-import-shimmer 1.6s infinite;
}

@keyframes ob-import-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.setup-modal-body .option-add-wrap {
    margin-top: 10px;
    max-width: 440px;
}

.setup-selectables {
    margin-bottom: 10px;
}

.setup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.setup-chip {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    background-color: var(--cm-light-gray);
    color: var(--cm-green);
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
}

.setup-chip:hover {
    background-color: var(--cm-pale-yellow);
}

.setup-chip.selected {
    background-color: var(--cm-green);
    color: var(--cm-white);
}

/* Read-only chip for a category/location the tenant already has. */
.setup-chip.is-existing,
.setup-chip.is-existing:hover {
    cursor: default;
    background-color: var(--cm-color-success-bg);
    color: var(--cm-color-success);
}

.setup-logo-preview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0;
}

.setup-logo-preview .logo {
    max-width: 240px;
    max-height: 120px;
}

 .onboarding-modal {
     display: flex;
     flex-direction: column;
     padding-bottom: 40px;
     gap: 20px;
     font-size: 14pt;
 }
 .onboarding-modal .modal-header h3 {
     width: 100%;
     text-align: center;
     font-size: var(--cm-h1-font-size);
 }

 .modal-header h3 {
     flex-grow: 1;
 }

 .onboarding-modal .expl {
 }

 .onboarding-modal .expl {
     display: flex;
     gap: 20px;
     flex-direction: column;
 }

 .onboarding-modal .zmdi-fast-rewind {
     cursor: pointer;
     font-size: 19.5px;
     color: var(--cm-mid-gray);
 }

 .jumbo-num {
     font-size: 34pt;
 }

 .btn-xl {
     font-size: 20pt;
 }

 .uppy-Dashboard-AddFiles-title {
 }

 .order-template-editor {
     list-style: none;
     border: 1px solid #0f6eaf;
     border-radius: 6px;
     padding: 20px;
     position: relative;
     background-color: #cadae6;
     margin-top: 5px;
 }
 .order-template-label {
     display: none;
     border-radius: 0px 0px 6px 6px !important;
     width: 200px;
     text-align: center;
     right: calc(50% - 100px) !important;
 }

 .order-template-editor .order-template-label,
 .editor-modal-v2 .order-template-label,
 .editor-modal-v2-template-mode .order-template-label
 {
     display: block;
     position: absolute;
     right: 0px;
     top: 0px;
     background-color: var(--cm-light-gray) !important;
     color: var( --cm-nav-color);
     padding: 5px 5px;
     border-radius: 0px 4px 0px 6px;
 }
 .editor-modal-v2 .close,
 .editor-modal-v2-template-mode .close {
     margin-top: 2px !important;
}
.add-spot-dropdown {
    width: 250px;
    margin-right: 5px;
}
 .order-template-label-gray {
     background-color: var(--cm-mid-gray) !important;
 }

 .order-template-editor .block-header .actions {
     display: none !important;
 }

 .order-editor-grid .card .actions .zmdi-edit {

 }

 .add-product-bar {
     gap: 10px;
     width: 100%;
     align-items: center;
     justify-content: space-between;
     padding-top: 5px;
     padding-bottom: 5px;
     background-color: var(--cm-table-heading-bg-color);
     margin-bottom: 15px;
 }
 .products-box .search-result-item .tag-box-wrap {
 }

 .quick-quantity-wrap {
     margin-left: 35px;
     width: 55px;
 }

 .search-product-wrap {
     flex-grow: 1;
 }
 .title-input-wrap {
     display: flex;
     justify-content: center;
 }

 .search-product-wrap .popup-tooltip,
 .title-input-wrap .popup-tooltip {
     top: 60px;
 }

 .template-label-inline {
     color: #268b96;
 }

 .files-listing > b {
     cursor: pointer;
 }

 .files-listing > b .zmdi {
     position: static !important;
 }
 .files-listing ul li {
     margin-left: 0px;
     padding-left: 0px;
     max-width: 280px;
     overflow-x: hidden;
 }

 .estimate-views-widget ul {
     padding-left: 15px;
 }


 .onboarding-buttons {
     display: flex;
 }

 .btn-onboarding-next {

 }

 .btn-skip-hidden {
     visibility: hidden;
 }
 .btn-skip {

 }

 .onboarding-panel {
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 .onboarding-modal .modal-content {
     display: flex;
     flex-direction: column;
 }
 .onboarding-modal .modal-body {
     flex-grow: 1;
 }

 .onboarding-modal .modal-content {
     padding: 0 40px 10px;
 }


 .onboarding-panel-header {

 }
 .onboarding-panel-body {
     flex-grow: 1;
 }

 .onboarding-step-wrap {
     display: none;
     gap: 20px;
     flex-direction: column;
     height: 100%;
     padding-bottom: 40px;
 }
 .onboarding-step-wrap .onboarding-buttons {
 }

 .onboarding-step-wrap.step-active {
     display: flex;
     animation: fadeIn 0.5s;
 }


.onboarding-step-body {
     flex-grow: 1;
     display: flex;
     align-items: center;
     flex-direction: column;
 }


.onboarding-buttons {
    display: flex;
    gap: 100px;
    justify-content: center;
    align-items: center;
}


.onboarding-skip-link {
    cursor: pointer;
    font-size: 13pt;
}

.onboarding-step-wrap .expl {
    text-align: center;
    flex-direction: column;
}

/* When a fork card is selected it goes btn-primary (dark green). The title
   already inherits white, but .text-muted keeps its grey and turns illegible
   on the dark fill — lift it to a legible translucent white. */
.onboarding-fork-choices .btn-primary .text-muted {
    color: rgba(255, 255, 255, 0.8);
}

.onboarding-panel-body p {
    font-size: 1.6rem;
}

.onboarding-panel-body .option-add-wrap {
    justify-content: center;
}
.onboarding-panel-body .option-add-wrap input {
    max-width: 280px;
}

.onboarding-step-wrap .files ul,
.onboarding-step-wrap .selectables ul {
    text-align: left;
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    list-style-item: none;
    margin-left: 0px;
    padding-left: 0px;
}
.onboarding-step-wrap .files ul li,
.onboarding-step-wrap .selectables ul li {
    display: inline-block;
    background-color: var(--cm-light-gray);
    padding: 10px; 5px;
    list-style-item: none;
    border-radius: 12px;
}

.onboarding-step-wrap .selectables ul li {
    cursor: pointer;
}

.onboarding-step-wrap .selectables ul li:hover {
    background-color: var(--cm-yellow);
}

.onboarding-step-wrap .selectables.non-click ul li:hover {
    cursor: default;
    background-color: var(--cm-light-gray);
}

.onboarding-step-wrap  img.logo{
    max-width: 320px;
}

.intro-video-wrap {
    height: 90px;
}


.onboarding-step-wrap .selectables ul li.selected {
    color: var(--cm-white);
    background-color: var(--cm-green);
}
.onboarding-step-wrap .selectables-wrap {
    display: flex;
    flex-direction: column;
    max-width: 768px;
    margin: 0 auto;
}

.onboarding-step-wrap small {
    font-size: 11pt;
    color: var(--cm-grey);
}

.onboarding-step-wrap .selectables-wrap .input {
    max-width: 520px;
}

.onboarding-step-body .import-widget {
    font-size: 10px;
    overflow: auto;
    max-width: 90vw;
    max-height: 60vh;
}

.onboarding-step-body .import-widget .unmapped  {
    max-width: 120px;
    overflow: hidden;
}

.import-widget th label  {
    display: block;
    height: 30px;
    overflow: hidden;
}
.final-step p {
    text-align: left;
    font-size: 1.2rem;
}

.final-step .choice-box {
    display: flex;
    width: 100%;
    gap: 40px;
    justify-content: center;
}

.final-step .radio + .radio {
    margin-top: 0px;
}

.report-orders-grid table td:first-of-type {
    width: 220px;
}

.report-orders-grid table td:nth-of-type(2) {
    width: 300px;
    overflow-x: hidden;
}

.report-data-table table tbody td:first-of-type {
    width: 300px;
}

.onboarding-modal .locations-wrap {
    width: 100%;
}
.menu-general-section .items {
    grid-template-columns: 1fr;
    max-width: 600px;
}
.deadline-widget {
    max-width: 450px;
}

.oo-checkbox-grid {
    grid-row-gap: 0px;
}

.salutation-input {
    margin-right: 30px;

}
.salutation-input > .radio {
    display: flex;
}

.contact-name-box > div:nth-of-type(1),
.contact-name-box > div:nth-of-type(2) {
    flex-grow: 1;
}

.basic-company-details .field-invoice_city {
    flex-grow: 1;
}


@media only screen and (max-width: 814px) {
    .estimate-mobile-hidden .mobile-view {
        display: none !important;
    }
}

.diff-info-widget {
    margin-top: 30px;
    margin-bottom: 30px;
    border: 1px solid #efefef;
    padding: 10px;
    border-radius: 6px;
    background-color: #efefef;

}

.product-diff-widget {
    margin-top: 20px;
}

.product-diff-widget tbody tr td:first-of-type {
    max-width: 300px;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-option {
    z-index: 13;
}

.location-box .pmo-block {
    border-top: 1px dashed var(--cm-very-light-gray);
}

.location-box .pmo-block:first-of-type {
    border-top: none;
}

.location-box .time-block {
    font-style: italic;
}

.ow-location ul {
    text-align: left;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    z-index: 20;
    max-height: 320px;
  overflow-y: scroll;
}

.allergen-no-image {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: var(--cm-mid-gray);
    font-size: 8pt;
}

.date-view {
    width: 100%;
    min-height: 32px;
    border: 0px solid red;
}
.past {
    color: var(--cm-danger-soft: rgba(244, 67, 102, 0.62));
}

.quick-switcher {
    width: 35px;
    font-size: 8pt;
}
.su-button {
    justify-content: center;
    gap: 20px;
}

span.tag.add-tag {
   padding: 0px 14px;
}

span.tag {
    color: #ffffff;
    padding: 0px 5px;
    border-radius: 8px;
    background-color: var(--cm-green);
    margin-right: 5px;
    display: inline-block;
    line-height: 1.6em;
}

/* cs2.components.widgets.input classes */
.text-input {
    position: relative;
    max-width: 100%;
}

.zmdi-long-arrow-return {
    margin-top: 7px;
}

.search-input input {
    border-radius: var(--cm-button-border-radius) !important;
    padding-left: 30px !important;
}

.tag.fake {
    opacity: 0.5;
}

.text-input .input-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.2rem;
    border: 0px solid grey;
}


.text-input .key-icon {
    cursor: pointer;
    position: absolute;
    right: 0px;
    padding: 2px 10px;
    min-width: 40px;
    border: 1px solid grey;
    border-radius: 3px;
    background-color: var(--cm-very-light-gray);
}

.text-input .eye-icon {
    right: -38px !important;
    top: 7px;
    cursor: pointer;
    position: absolute;
    right: 0px;
    padding: 2px 10px;
    min-width: 40px;
    z-index: 1;
}

.password-input-with-icons .eye-icon  {
    right: 25px;
}

.search-input .key-icon {
    right: 8px;
}



/* cs2.components.widgets.tag-box classes */

.tag-box-wrap {
    flex-grow: 1;
    width: 100%;
    align-items: center;

}

.tag-box {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tag-wrap .tag {
    background-color: #ededed;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: inline-block;
    padding: 2px 16px;
}

.bootgrid-table .tag-wrap .tag,
.table .tag-wrap .tag,
.location-file-listing .tag-wrap .tag,
.product-editor-wrap .search-results-wrap .tag-wrap .tag
{
    font-size: 0.7em;
    border-radius: 6px;
}

.search-results-wrap {
    max-width: 1000px;
}

.media-grid .tag-box-wrap {
    max-width: 300px;
    flex-direction: column;
    align-items: flex-start
}

.add-tags-to-upload .tag-box-wrap input {
    background-color: #fafafa;
}

.modal.context-bar {
    pointer-events: none;
}

.modal.context-bar .modal-dialog {
    width: 100%;
    margin-top: 70px;
    pointer-events: all;
    height: 80px;
}

.modal.context-bar .modal-content {
    max-height: fit-content;
}

.tag-editor-top  {
    display: flex;
    height: 80px;
    flex-direction: row;
    justify-content: space-between;
}

.tag-editor-top .left, .tag-editor-top .right, .tag-editor-top .center {
   display: flex;
   flex-direction: column;
}

.tag-editor-top .selected-files-nr {
   flex-grow: initial;
   margin-top: auto;
   font-size: 1.4em;
   padding-bottom: 15px;
}

.tag-editor-top .close-modal {
   font-size: 1.8em;
   padding-top: 20px;
}

.tag-editor-top .tag-box-wrap {
   flex-grow: initial;
   margin-top: auto;
}

.tag-editor-top .activate-tag-box {
   flex-grow: initial;
   margin-top: auto;
   margin-bottom: 15px;
}

.toggle-printed-overview-widget {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-right: 25px;
}

.type-button-wrap {
    width: 33%;
}

.type-buttons {
    display: flex;
    gap: 0px;
}
.type-button-wrap {
    padding: 10px;
    border-right: 1px solid #ededed;
}

.type-buttons .type-button-wrap:last-of-type {
    border-right: 0px solid #ededed;
}

.type-button-icon {
    max-width: 210px;
    border-radius: var(--cm-border-radius);
    border: 1px solid var(--cm-background-color);
}

.type-button-suitable-for ul {
    margin-top: 5px;

}

.product-overview-table .col-product_name,
.product-overview-table .col-cost_price {
    width: 100px;
}

.product-overview-table .col-cost_price,
.product-overview-table .col-price {
    width: 100px;
}
.green-jumbo-button {
    position: relative;
}

.green-jumbo-button .type-title {
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: center;
    background-color: rgba(255,255,255,0.7);
}


.title-form input.form-control {
    font-size: 18px ;
    font-weight: bold;
}

.no-name-chosen .tab-nav,
.no-name-chosen .product-general-show-more {
    visibility: hidden;
}

.no-name-chosen .slide-down  {
    display: none;
}

.no-name-chosen .slide-down.customer-search-results  {
    display: block;
}

.tab-nav .empty-product-group a {
    color: var(--cm-yellow) !important;
}
.greyed-out-tab a {
    color: var(--cm-light-gray) !important;
}
textarea.form-control {
    border: 1px solid #e0e0e0 !important;
    padding: 5px !important;
}
.nodata {
    text-align: center;
}

.media-filter-panel {
    display: flex;
    justify-content: left;
    padding: 5px 20px;
    color: #888;
    align-items: center;
    width: 100%;
    background-color: #f1f1f1;
    border-radius: 0px;
    border-bottom: 0px solid #edecec;
}

.media-filter-panel .file-type {
    padding-right: 10em;
}

.media-filter-panel .tag-filter {
    display: flex;
}

.media-filter-panel .tag-filter .show-tags {
    line-height: 2.5em;
    padding-right: 1em;
}

.tag-filter .form-control {
    padding-left: 0.5em;
    background-color: #f1f1f1;
}

.tag-filter .tag-box {
    padding-left: 10px;
}

.tag-filter .tag-box-wrap {
    display: flex;
    flex-direction: row-reverse;
}

.tag-filter .arrowkeys .search-result-item:hover {
   background-color: transparent;
}

.tag-filter .mouse .search-result-item:hover {
   background-color: #ededed;
}

.tag-filter .search-result-item.active {
   background-color: #ededed;
}

.media-library .card {
    border-radius: 0px 0px 8px 8px;
    padding-bottom: 5px;
}
.tag-color-picker {
    cursor: auto;
}
.tag-color-picker ul {
    justify-content: flex-start;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.tag-color-picker .color {
    cursor: pointer;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
}

.production-overview-panel .production-overview-toolbar{
    justify-content: flex-end;
    gap: 20px;

}
.production-sort-key-widget {
    justify-content: flex-end;
}


.onboarding-step-body .expl.final-step {
    gap: 0px !important;
}
.onboarding-step-body .intro-video-wrap {
    height: auto !important;
}


.estimate-editor-v2 .catermonkey-menu-marker hr {
    color: red;
    background-color: red;
}

.estimate-view .catermonkey-menu-marker ,
.estimate-editor-v2 .catermonkey-menu-marker {
    display: none;
}

/*.estimate-editor-v2 .estimate-text-column-content:hover .catermonkey-menu-marker,*/
.ql-editor .catermonkey-menu-marker {
    display: block;
}

.selected-ui-language .flag-icon-wrap {
    cursor: pointer;
    padding: 10px;
}



.selected-ui-language .flag-icon-wrap.active {
    cursor: pointer;
    border: 1px solid var(--cm-light-gray);
    background-color: var(--cm-very-light-gray);
    border-radius: 6px;
}

.section .product-edit-row {
    width: 100%;
    gap: 20px;

}
.product-edit-row .product-edit-row-name {
    flex-grow: 1;
}
.product-edit-row-vat {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 120px;
}

.product-edit-row-vat  .tax-rate-input label {
    display: none;
}
.calendar-weekview-header {
}
.my-account-panel {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;


}
calendar-weekview-header .pagination {
    margin: 0;
}
ul.pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}


ul.pagination li.disabled a {
    background-color: var(cm-nav-color);
    color: var(--cm-mid-gray);
    border: 0px solid var(--cm-mid-gray) !important;
}

ul.pagination li a {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-green);
    border: none !important;
}
ul.pagination li a:hover {
    background-color: var(--cm-green);
    color: var(--cm-white);
}

ul.pagination li.active a {
    background-color: var(--cm-green) !important;
}


.week-num-header {
    background-color: var(--cm-white);
    border: 1px solid var(--cm-lines-color);
    color: var(--cm-green);
    padding: 8px 10px;
    border-radius: 20px;

}

.close-image-editor-settings img {
    max-width: 768px;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}
.image-editor-toolbar > div {
    align-items: baseline;
}

.image-editor-toolbar {
    flex-direction: column;
    gap: 5px;}

.estimate-preview-tiles {
    margin-bottom: 20px;
    justify-content: space-between;
    gap: 40px;
}

.estimate-preview-tiles .estimate-preview-tile {
    width: 180px;
    height: 180px;
    border-radius: 6px;
    text-align: center;
    valign: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    background-color: var(--cm-green);
    color: var(--cm-white);
    font-weight: bold;
    font-size: 29px;
    background-size: cover;
}





.estimate-choice-completed .zmdi-email {
    font-size: 98px;
}

.estimate-preview-tiles .estimate-preview-tile:hover {
    color: var(--cm-pale-yellow);
}


.estimate-preview-tiles .tile-vintage {
    font-family: 'Courier new', monospace;
    background-image: url('../img/estimate_styles/vintage.png');
}
.estimate-preview-tiles .tile-classic {
    font-family: Georgia;
    background-image: url('../img/estimate_styles/classic.png');
}
.estimate-preview-tiles .tile-modern {
    background-image: url('../img/estimate_styles/modern.png');
}


.estimate-preview-tiles .estimate-preview-tile:hover {
    background-color: #2895a1 ;
}

.estimate-preview-tiles .estimate-preview-tile {

}

.sub-product-price-input input {
    max-width: 85px;
}




.align-right > .tooltip-icon > input,
.quantity-cell > input {
    text-align: right;
}
.popup-tooltip {
    text-align: left !important;
}


.blink {
  animation: blinker 1s linear infinite;

}


@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.signature-container {
    padding-bottom: 20px;
}

.sig-buttons {
    display: flex;
    gap: 10px;
}

.sig-canvas {
    padding-bottom: 20px;
    padding-top: 20px;
}

#sig-canvas {
    border: 1px dotted #cccccc;
    border-radius: 15px;
    cursor: crosshair;
}

.signature-settings {
    margin-top: 0;
}

.signature-settings .checkbox {
    padding-top: 0;
    margin-top: 0;
}

.dummy-section-wrap > .zmdi {
    font-size: 48px;
}


.cm-avatar-wrap {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.cm-avatar {
    background-color: var(--cm-pale-yellow);
    border-radius: 50%;
    display: flex;
    width: 32px;
    height: 32px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}
.cm-avatar img {
    width: 100%;
}

.cm-avatar .avatar-initials {
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    color: var(--cm-dark-gray);
}
.cm-avatar.avatar-inverted {
    background-color: var(--cm-green);
}
.cm-avatar.avatar-inverted .avatar-initials {
    color: var(--cm-yellow);
}

.cm-avatar.avatar-small {
    width: 22px;
    height: 22px;
}
.avatar-small {
    font-size: 0.7rem;
}

.avatar-small .avatar-initials,
.cm-avatar-wrap.avatar-small {
    font-size: 0.7rem;
}

small {
    font-size: 0.8rem;
}


.avatars {
    align-items: center;



}
.search-input.normal-border-radius {
    border-radius: var(--cm-border-radius) !important;
}

.flex-column-10 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.flex-column-20 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
}

.trialing-period {
    color: var(--cm-nav-color)
}

.choose-payment-method-onboarding {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.choose-payment-method-onboarding > div {
    max-width: 450px;
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-border-radius);
    padding: 10px;
}
.sepa-label {
    text-align: left !important;
}
#iban-element {
    border-radius: var(--cm-border-radius);
    border: 1px solid var(--cm-lines-color);
    padding: 6px 12px;
}
.product-tax-rate-cell {
    width: 70px;
}
.product-tax-rate-cell .popup-tooltip {
    top: 59px;
}
.product-discount-cell {
    width: 85px;
}

.product-discount-cell .popup-tooltip {
    top: 60px;
}

.product-price-cell {
    position: relative;
}

.mail-method tr td:nth-of-type(2) {
    width: 140px;
}

.product-price-cell .product-discount-small {
    position: absolute;
    right: -6px;
    top: -12px;
    z-index: 2;
    background-color: var(--cm-background-color);
    width: 32px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

.product-row-headers.product-edit-row-editing .product-edit-price,
.product-row-headers.product-edit-row-editing .product-edit-discount,
.product-row-headers.product-edit-row-editing .product-percentage-column,
.product-row-headers.product-edit-row-editing .product-edit-commands {
    display: none;
}

.login-form {
    min-width: 350px;
}

.login-panel-wrap .right-panel,
.forgot-password-panel-wrap .right-panel {
    justify-content: flex-start !important;
}

.upgrade-modal .btn {
    display: inline-block;
    margin-right: 10px;
}

.import-grid .card-header  {
    padding: 0px !important;
}
.import-grid .card-header h3 {
    font-size: var(--cm-font-size);
    padding: 0;
    margin: 0px !important;
}
table.import-grid tbody tr:hover td {
    background-color: var(--cm-white);
}
.import-grid .card-body {
    padding-left: 0px !important;
}
.import-grid tbody td:nth-of-type(2),
.import-grid tbody td:nth-of-type(3) {
    width: 150px;
}
.import-grid .card {
    padding: 0px;
    border: none;

}
.inline-date-edit-widget {
    display: flex;
    gap: 5px;
    align-items: baseline;
}

.inline-date-edit-widget .zmdi-edit {
    visibility: hidden;
}

.inline-date-edit-widget:hover .zmdi-edit {
    visibility: visible;
}

.inline-date-edit-widget .inline-date-view {
    cursor: pointer;
}
.inline-date-edit-widget {
}
.reminder-at-checkbox {
    margin-top: 2px;
}

.inline-date-edit-widget:hover .zmdi-edit {

}
.reminder-body:hover .inline-date-edit-widget .zmdi-edit {
    visibility: visible !important;

}
.reminder-body {
    padding-left: 20px;
    padding-right: 20px !important;
    padding-bottom: 10px !important;
}
.num-badge {
    position: absolute;
    right: -6px;
    top: -6px;
    background-color: var(--cm-danger);
    color: var(--cm-white);
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;

}
.nav-item-text {
    position: relative;
}

/* A badge on a nav-item label must sit AFTER the text with spacing, not on top
   of it. The base .num-badge is absolutely positioned (right/top -6px) so it can
   hug the top-right corner of an icon (e.g. the footer notification bell); inside
   a text label that same positioning drops it over the last letters (CAT-1319).
   Scope an inline-flow override to labels only, leaving the footer icon badge as-is. */
.nav-item-text .num-badge {
    position: static;
    top: auto;
    right: auto;
    display: inline-flex;
    margin-left: 8px;
    vertical-align: middle;
}

.nav-item-text .popup-tooltip {
    min-width: auto !important;
    width: 220px !important;
}

.user-selector-wrap .cm-avatar-fullname:hover {
    color: var(--cm-yellow);
}

.user-selector-wrap {
    cursor: pointer;
}
.user-selector-wrap {
    display: inline-block;
}

.templates-grid .zmdi-pin {
    display: none;
}
.order-template-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.order-template-grid h3 {
    padding: 0px;
}
.order-template-grid > .card {
    cursor: pointer;
}
.order-template-grid > .card > .card-header {
    min-height: 0;
    padding: 0;
}
.order-template-grid > .card .card-body.card-padding {
    padding: 12px 15px;
}

.template-hover-item,
.template-selected-item {
    transition: background-color 0.15s;
    cursor: pointer;
}
.template-hover-item:hover {
    background-color: #f5f5f5;
}
.template-selected-item {
    border-color: var(--cm-green) !important;
}

.memoize-expand-toggle.orders {
    grid-area: memoize-expand;
    text-align: right;
    margin-right: 5px;
}

@media screen and (max-width: 640px) {
    .view-options-settings {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        width: 100%;
    }
    .orders-list .select.filter-macro {
        display: none;

    }
    .calendar-weekview {
    }
    .order-editor-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .products-box > .card-body  {
        overflow-x: auto;
    }
    .products-box > .card-body > div {
        min-width: 800px;
    }

    .calendar-weekview-header-wrap {
        flex-direction: column;
        gap: 10px;
        margin-top: 5px;
    }
    .calendar-weekview-header-wrap .calendar-weekview-header {
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;

    }
    .calendar-weekview-range {
        display: flex;
        flex-direction: column;
        gap: 5px;

    }
    .card-header .actions,
    .card-header  {
        flex-direction: column;
        gap: 10px;

    }

}

.food-cost-card-hidden {
    display: none;
}

.food-cost-card {
    grid-area: ingredients;
}

.duplication-dates {
    display: flex;
    flex-direction: column;
    gap: 5px;

}
.duplication-dates-wrap {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.duplication-dates-wrap > button {
    margin-top: 2px;
}
.ingredients-overview-grid th.commands .commands-inner,
.invoices-overview-grid th.commands .commands-inner {
    display: none;
}

.invoices-overview-grid th:nth-of-type(7) > span {
    display: none;
}
.invoices-overview-grid .checkbox-wrap {
    position: absolute;
    background: white;
    padding: 10px;
    box-shadow: 3px 3px 3px #ccc;
    border: 1px solid #ccc;
}

.estimate-editor-v2 .estimate-page-hidden {
}

.estimate-editor-v2 .estimate-page-wrap .estimate-page {
    position: relative;
}

.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.hidden-page-hide-info {
    display: none;
}

.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask .hidden-page-icon {
    color: var(--cm-dark-green-transparent);
    font-size: 196px;
}

.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask:hover .hidden-page-icon {
    display: none;
}

.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask:hover .hidden-page-hide-info {
    display: block;
    color: white !important;
    padding: 40px;
    background-color: var(--cm-dark-green-transparent);
    border-radius: 16px;
    font-family: 'figtree';
    font-weight: 300;
    max-width: 70%;

}
.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask:hover .hidden-page-hide-info a {
    color: var(--cm-white);
    font-weight: bold;
}

.hidden-page-hide-info .title {
}

.hidden-page-hide-info .expl {

}

/* Margin guides — dashed lines showing top/bottom margin boundaries */
.margin-guide {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dotted rgba(0, 0, 0, 0.2);
    border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
    pointer-events: none;
    z-index: 1;
    opacity: 0.2;
    transition: opacity 0.2s ease;
}

.estimate-page:hover .margin-guide {
    opacity: 1;
}

.margin-guide-chevron {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.margin-guide-top .margin-guide-chevron {
    top: -16px;
}
.margin-guide-bottom .margin-guide-chevron {
    bottom: -16px;
}
.margin-guide-chevron-left {
    left: -20px;
}
.margin-guide-chevron-right {
    right: -20px;
}

.drilldown-modal .card {
    width: 100%;
}

.drilldown-modal .table tr:first-of-type td {
    padding-top: 0px;
}

.store-in-db-checkbox {
    display: flex;
    flex-direction: row-reverse;
}

.products-overview-grid .search-input .text-input {
}
.products-overview-grid .search-input .text-input input {
    border-radius: var(--cm-border-radius) !important;
}
.products-overview-grid .nodata {
    height: 500px;
}
.products-overview-grid th .commands-inner {
    display: none;
}

.product-overview-table {
    min-height: 500px;
}

.products-overview-grid th {
    vertical-align: top !important;
}
.prep-list-header-filter ul {
    margin-left: 0px;
    padding-left: 15px;
    margin-top: 0px;
}

.title-input-wrap .no-results {
    display: none;
}

.search-results-wrap .search-header {
    font-weight: bold;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;

}

.new-order-dot {
    height: 10px;
    width: 10px;
    text-align: center;
    border-radius: 5px;
    background-color: var(--cm-color-danger-bg);
}

.updated-order-dot {
    height: 10px;
    width: 10px;
    text-align: center;
    border-radius: 5px;
    background-color: var(--cm-color-info-bg);
}

.webshop-products-tab {
    min-height: 500px;
}

.final-step a {
    color: var(--cm-yellow);
}
.tag-grid .tag-color-picker h4,
.financial-status-grid .tag-color-picker h4 {
    display: none;
}

.financial-status-grid .tag-color-picker {
    padding-top: 4px;
}

.financial-status-grid .tag-color-picker ul {
    gap: 4px;
}

.wrap-peppol-id {
    display: flex;
    gap: 20px;
    align-items: center;
}

.peppol-search .crit {
    padding-top: 10px;
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
}

.peppol-search .crit label {
    flex: 0 0 150px;
}

.peppol-search .crit .value {
    flex: 1;
    width: 100%;
}

.peppol-edit-widget label {
    padding: 0 10px;
}

.peppol-search .search-results .result {
    display: flex;
    gap: 20px;
    align-items: center;
}

.peppol-search .search-results .result {
    padding: 5px 0;
}

.peppol-search .search-results .result.header {
    font-weight: bold;
}

.peppol-search .search-results .result div {
    flex: 0 0 150px;
}

.peppol-search .search-results .result div.id {
    text-align: right;
}

.popup-tooltip a {
    color: var(--cm-yellow);
}

.location-file-grid .tag-box-wrap {
    flex-direction: column;
    align-items: flex-start;
}

.floating-preview-button {
    position: fixed;
    right: -67px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    color: white;
    padding: 10px 20px;
    border-right: 1px solid var(--cm-light-gray);
    border-radius: 8px 8px 0px 0px;
    border-left: 1px solid var(--cm-light-gray);
    border-top: 1px solid var(--cm-light-gray);
    box-shadow: 0px 0px 0px 0px 6px var(--cm-mid-gray);
    border-bottom: none;
    cursor: pointer;
    z-index: 9999;
}


/** test estimate responsive view */

/* we make the viewer itself based on a fixed viewport */
/*.estimate-viewer  {
    container-type: inline-size;
}

@container (min-width: 1200px) {
    .fixed-section {
        width: 1200px;
    }
}
*/

.planning-panel-view .internal-comment-row .ql-editor {
    background-color: unset !important;
}
.brand-boxes {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.brand-boxes > .card {
    width: 100%;
}

.order-card-tags {
    font-size: 0.6rem;
    margin-left: 5px;
}

.order-card-financial-status {
    font-size: 0.7rem;
    padding: 3px 8px;
    margin-top: 4px;
    border-radius: 0 0 4px 4px;
}

.order-card-financial-status {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: var(--cm-border-radius);
}

.link-mailbox {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items: center;
}

.link-mailbox > div {
    padding: 10px;
}

.mailbox-details > div {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ipad things */
button, .btn {
    touch-action: manipulation;
}

.ontzorg-ordered {
    background-color: var(--cm-light-green);
    color: white;
    padding: 5px 10px;
    border-radius: var(--cm-border-radius);
}

.discount-not-ordered {
    background-color: var(--cm-yellow);
    padding: 10px;
    border-radius: var(--cm-border-radius);
    font-size: 9pt;
}

.css-editor {
    font-family: Courier new;
    height: 200px;
    width: 100%;
}

.version-changed {
    position: absolute;
    width: 100vw;
    z-index: 8;
    background-color: var(--cm-light-green);
    color: white;
    font-size: 15px;
    padding: 10px;
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: baseline;
}

.demo-mode {
    border: 3px solid var(--cm-light-green);
    min-height: 100vh;
    box-sizing: border-box;
}

.demo-mode-banner {
    position: sticky;
    top: 0;
    z-index: 1040;
    background-color: var(--cm-yellow);
    color: var(--cm-dark-green);
    padding: 6px 12px;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.demo-mode-banner-email-verification {
    position: sticky;
    top: 0;
    z-index: 1040;
    background-color: var(--cm-light-green-transparent);
    color: var(--cm-green);
    padding: 3px 10px;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    text-align: center;

}

/* The demo-data-removal confirm modal includes a phone-only warning that the
   app needs a larger screen to explore properly — hidden on desktop. */
.demo-mode-mobile-warning {
    display: none;
}

/* "Take one last look at a sample quote PDF" link inside the confirm modal.
   On mobile this is the only surface for quote preview since the banner's
   secondary CTA is hidden there; on desktop it's an extra last-chance offer. */
.demo-mode-preview-link-wrap {
    margin-top: 16px;
    margin-bottom: 0;
    text-align: center;
}
.demo-mode-preview-link {
    cursor: pointer;
    color: var(--cm-font-color);
    text-decoration: underline;
}
.demo-mode-preview-link:hover {
    color: var(--cm-dark-green);
}

/* The honest-CTA copy is long enough to overflow the confirm modal at every
   width — the modal opens at :third viewport width on desktop. Let the
   buttons row wrap and break long button labels at every viewport. */
.modal-body.demo-mode-confirm .flex.gap-20 {
    flex-wrap: wrap;
}
.modal-body.demo-mode-confirm .btn {
    white-space: normal;
    max-width: 100%;
}

/* Mobile fixes for demo banner + onboarding wizard.
   The demo banner squashes its message into a 1-word-per-line column without flex-wrap,
   and the wizard inherits huge desktop font sizes (14pt body, h1 title, 20pt buttons,
   100px button gap, 40px padding) that overflow viewport on phones. */
@media screen and (max-width: 600px) {
    .demo-mode-mobile-warning {
        display: block;
        margin-top: 16px;
        padding: 12px 16px;
        background-color: var(--cm-yellow);
        color: var(--cm-dark-green);
        border-radius: 8px;
        font-size: 1rem;
        line-height: 1.4;
    }
    .demo-mode-banner {
        flex-wrap: wrap;
        padding: 6px 10px;
        /* Clear the collapsed nav rail (now lifted above the banner) so the
           banner's centred content isn't clipped under it. */
        margin-left: 3rem;
    }
    .demo-mode-banner > span {
        flex-basis: 100%;
        text-align: center;
    }
    /* Long translated labels (pt, de) overflow the viewport without break */
    .demo-mode-banner .btn {
        white-space: normal;
        max-width: 100%;
    }
    /* The "preview your quote" CTA belongs on a roomier screen; on mobile
       we surface it inside the confirm modal as a last-look link instead. */
    .demo-mode-estimate-preview-cta {
        display: none;
    }

    /* The demo banner is sticky at top:0 with z-index 1040; the fixed sidebar
       sits at z-index 10 with its only close control — the .nav-toggle chevron
       — at the very top. On a phone the taller (wrapped) banner painted over
       that chevron, leaving the open nav drawer impossible to close. Lift the
       drawer above the banner so the chevron is tappable. The collapsed rail
       already overlays the main content here, so overlaying the banner too is
       consistent. */
    .demo-mode #sidebar {
        z-index: 1050;
    }

    .onboarding-modal {
        font-size: 1rem;
        gap: 12px;
        padding-bottom: 20px;
    }
    .onboarding-modal .modal-header h3 {
        font-size: 1.4rem;
    }
    .onboarding-modal .modal-content {
        padding: 0 16px 10px;
    }
    .onboarding-modal .expl {
        gap: 12px;
    }
    .onboarding-panel-body p {
        font-size: 1rem;
    }
    .onboarding-step-wrap {
        gap: 12px;
        padding-bottom: 20px;
    }
    .onboarding-buttons {
        flex-wrap: wrap;
        gap: 12px;
    }
    .onboarding-skip-link {
        font-size: 0.9rem;
    }
    .btn-xl {
        font-size: 1rem;
        padding: 8px 16px;
    }
    .onboarding-step-wrap img.logo {
        max-width: 100%;
    }
    /* prod-import step sets inline max-width:60ch on .expl which overflows the viewport */
    .onboarding-step-wrap .expl {
        max-width: 100% !important;
    }
    /* prod-import upload button has long single-line label */
    .onboarding-step-wrap .btn {
        white-space: normal;
        max-width: 100%;
    }
}

.prep-list-grid {
    display: grid;
    gap: 0px;
    overflow: auto;
}

.prep-list-grid .grid-cell {
    /* hack to avoid double borders */
    box-shadow: inset -1px -1px 0 var(--cm-lines-color);
    padding: 4px;
}
.prep-list-grid .grid-cell.first-cell {
    border-left: 1px solid var(--cm-lines-color);
}

.prep-list-grid .grid-cell.empty-row {
    border-left: none;
    box-shadow: none;
}
.prep-list-grid .grid-cell.first-row {
    border-top: 1px solid var(--cm-lines-color);
}
.prep-list-grid .grid-cell[colspan="2"] {
    grid-column: span 2;
}
.prep-list-grid .grid-cell[colspan="3"] {
    grid-column: span 3;
}
.prep-list-grid .grid-cell[colspan="4"] {
    grid-column: span 4;
}
.prep-list-grid .grid-cell[colspan="5"] {
    grid-column: span 5;
}
.prep-list-grid .grid-cell[colspan="6"] {
    grid-column: span 6;
}
.product-sub-total-header, .product-sub-total {
    background-color: var(--cm-table-heading-bg-color) !important;
    color: var(--cm-table-heading-color) !important;
    border-top: 1px solid var(--cm-lines-color);
}

.prep-list-grid .grid-cell-numeric {
    text-align: right;
}
.prep-list-grid .comment-wrap {
    position: absolute;
    left: -2px;
    top: -6px;
}

/* Quantity / total cells: [checkbox] [value] — value flex-grows, right-aligned
   and never wraps so "584 gram" / "1000 gram" stay on one line on tablet. */
.prep-list-grid .product-quantity .grid-cell-contents,
.prep-list-grid .product-total .grid-cell-contents {
    width: 100%;
    justify-content: flex-end;
    gap: 6px;
}
.prep-list-grid .product-quantity .grid-cell-contents .prep-list-cell-value,
.prep-list-grid .product-total .grid-cell-contents .prep-list-cell-value {
    flex: 1;
    text-align: right;
    white-space: nowrap;
}
.prep-list-grid .product-quantity .grid-cell-contents.cell-checked {
    opacity: 0.5;
}
/* Tappable cell value affordance — touch-friendly tap target. */
.prep-list-cell-value {
    padding: 2px 0;
    min-height: 24px;
    line-height: 1.2;
}

/* Tappable cell discoverability: paint the whole cell (including the .grid-cell
   padding) on hover/active so it reads as one interactive surface, not a
   floating box. Slightly stronger wash than 'subtle' — visible enough on
   tablet that touch-down clearly confirms the tap. */
.prep-list-grid .grid-cell-contents.prep-list-tappable {
    cursor: pointer;
}
.prep-list-grid .grid-cell:has(.prep-list-tappable) {
    transition: background-color 80ms ease-out;
}
.prep-list-grid .grid-cell:has(.prep-list-tappable):hover {
    background-color: rgba(0, 0, 0, 0.08);
}
.prep-list-grid .grid-cell:has(.prep-list-tappable:active),
.prep-list-grid .grid-cell:has(.prep-list-tappable):active {
    background-color: rgba(0, 0, 0, 0.14);
}

/* Tap-to-open cell menu (anchored popover + full-screen backdrop). */
.prep-list-cell-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 1040;
}
.prep-list-cell-menu {
    position: fixed;
    z-index: 1041;
    min-width: 220px;
    max-width: calc(100vw - 16px);
    max-height: 60vh;
    overflow-y: auto;
    background: var(--cm-card-bg-color, #fff);
    border: 1px solid var(--cm-lines-color);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 4px 0;
}
.prep-list-cell-menu-breakdown {
    padding: 8px 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--cm-lines-color);
    text-align: right;
}
.prep-list-cell-menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    min-height: 40px;
}
.prep-list-cell-menu-row:hover,
.prep-list-cell-menu-row:active,
.prep-list-cell-menu-row:focus {
    background: var(--cm-table-heading-bg-color, #f3f3f3);
    outline: none;
}
.prep-list-cell-menu-row .zmdi {
    color: var(--cm-lines-color);
    font-size: 18px;
    line-height: 1;
}
.prep-list-grid .product-spacer {
    border: none;
}
.preparation-list-wrap > .card {
    margin-bottom: 20px;
}

.grid-cell.product-total {
    text-align: right;
}

.prep-list-grid .grid-cell.prep-list-not-produced {
    color: var(--cm-light-gray);
    text-decoration: line-through;
}

.prep-list-grid .grid-cell.prep-list-not-produced-row {
    display: none;
}

.prep-list-date-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px 0;
}

.prep-list-date-filter .separator {
    margin: 0 4px;
    color: var(--cm-lines-color);
}

.user-multi-selector-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    column-gap: var(--cm-grid-column-gap);
    row-gap: 0px;


}
.user-multi-selector-wrap .user-checkbox .checkbox {
    margin: 3px;
}
.disconnected-warn {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    padding: 10px;
    color: white;
    z-index: 999;
    background-color: var(--cm-danger);
}

.connected-users {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-bottom: 10px;
    align-items: baseline;
}

.connected-users .connected-user {
    background-color: var(--cm-lines-color);
    padding: 8px 16px;
    border-radius: 8px;
}
.grid-cell-contents {
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
}
.grid-cell-contents .checkbox {
    margin-top: 0px;
    margin-bottom: 0px;
}

.list-app-logo-wrap {
    padding: 10px 20px;
    background-color: var(--cm-green);
    border-radius: var(--cm-border-radius);
}

.production-card.cell {
    display: flex;
    gap: 10px;
    align-items: center;
}

.production-card.cell .checkbox {
    margin-top: 4px;
    margin-bottom: 0px;
}

.production-card.cell.qty {
}
.production-card.cell.product-group-cell,
.production-card.cell.title-cell
{
    font-weight: bold;
}
.table tr.row-product-group-cell td {
}

.top-genlist-bar {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    display: flex;
}
.row-title-cell td {
    padding-top: 20px;
}

.recipe-viewer  .ql-editor {
    padding: 0px !important;
}

.recipe-button {
    color: var(--cm-lines-color);
    cursor: pointer;
}

/* Label-print icons in the prep-list grid: same muted gray as the recipe icon. */
.prep-list-print-icon {
    color: var(--cm-lines-color);
}
@media screen and (max-width: 400px) {

    .top-genlist-bar {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

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

    #generated-list .card-header {
        padding: 5px;
    }
    #generated-list .card-header {
        display: flex;
        flex-direction: row;
        padding: 0px 10px;
    }
    #generated-list .card-header h3 {
        font-size: 16px;
    }
    #generated-list .prep-list-title {
        font-size: 10px !important;
    }
}

.search-date-types {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    align-items: center;
}

.order-filter-modal .radio + .radio {
    margin-top: 0 !important;
}

.filter-pills-row .radio {
    margin: 0;
    padding: 0;
}

.top-filters-section .filter-pills-row:has(.radio) {
    margin-top: 8px;
}

.filter-pills-row .radio label {
    font-size: 1rem;
}

.coeur-table div.event-header {
    font-weight: bold;
}
.coeur-table .row-title {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-table-bg-color);
}
.coeur-table .row-empty {
    display: none;
}
.coeur-table td.quantity .quantity {
    flex-direction: row-reverse;
}

.coeur-cards {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    margin-bottom: 20px;
}

.shopping-list-tables {
    margin-top: 20px;
}

.shopping-list-tables .card {
    margin-bottom: 20px;
}

.shopping-list-tables .header-row td {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-table-headig-color);
}

.shopping-list-tables .quantity-chooser input {
    width: 60px;
    text-align: center;
}
.shopping-list-tables .card {
    overflow-x: auto;
}
.shopping-list-tables .supplier-row,
.shopping-list-tables .order-row
{
    display: none;
}

@media screen and (max-width: 400px) {
    .shopping-list-tables tr td:nth-of-type(2),
    .shopping-list-tables tr td:nth-of-type(3),
    .shopping-list-tables tr td:nth-of-type(5),
    .shopping-list-tables tr td:nth-of-type(8),
    .shopping-list-tables tr td:nth-of-type(9)
    {
        display: none;
    }

    .shopping-list-tables   .quantity-chooser > .flex {
        gap: 5px;
    }
    .shopping-list-tables .quantity-chooser input {
        width: 40px;
    }
    .shopping-list-tables .table > tbody > tr > td:first-child
    {
        padding-left: 2px !important;

    }
}

.product-header-product-group .grid-cell-contents,
.product-header-order .grid-cell-contents,
.product-group-total .grid-cell-contents {
    flex-direction: row-reverse;
    text-align: right;
}

.grid-cell .zmdi-alert-circle {
    color: var(--cm-danger);
}

.recipe-presentation img,
.recipe-body img {
    max-width: 500px;
}

.mat-list-appears-in-wrap h3 {
    margin-top: 5px;
    margin-bottom: 5px;
}


.material-list-ta {
    min-width: 325px;
    height: 150px;
}

.material-list-grid tr th:first-of-type {
    width: 75px;
}
.material-list-grid tr th:nth-of-type(2) {
    width: 100px;
}
.material-list-grid tr th:nth-of-type(3) {
    width: 300px;
}

.delivery-list-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    column-gap: 10px;
    row-gap: 10px;
    grid-template-areas:
        "delivery-date delivery-contents delivery-comments"
        "delivery-address delivery-contents delivery-comments" ;
    margin-bottom: 40px;
}

.delivery-list-cell {
    padding: 10px;
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-border-radius);
}

.delivery-list-comments {

}
.delivery-list-comment {
    border-bottom: 1px solid var(--cm-lines-color);
    padding-bottom: 10px;
    padding-top: 10px;
}


@media screen and (max-width: 800px) {
    .delivery-card-header {
        flex-direction: column;
        justify-content: flex-start;

    }
    .delivery-list-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

.grid-cell.product-header-order {
    padding: 0px;
}
.grid-cell .order-link {
    padding: 4px;
}
.grid-cell-contents.product-header-order {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0px;

}
.grid-cell-contents .day-label {
    padding: 5px;
    text-align: center;
}
.day-label.day-label-monday  .day-label {
    background-color: var(--cm-color-credited-bg);
}

.day-label.day-label-tuesday .day-label {
    background-color: var(--cm-color-danger-bg);
}

.day-label.day-label-wednesday .day-label {
    background-color: var(--cm-color-warning-bg);
}
.day-label.day-label-thursday .day-label {
    background-color: var(--cm-color-success-bg);
}
.day-label.day-label-friday  .day-label {
    background-color: var(--cm-color-info-bg);
}
.day-label.day-label-saturday  .day-label {
    background-color: #e4c4ff;
}
.day-label.day-label-sunday .day-label {
    background-color: var(--cm-color-success);
}

.generated-list-tenant-1004 .prep-list-variation-total .grid-cell-contents div {
    display: none;
}

.grid-cell-contents .order-type {
    padding: 4px;
}
.sales-grid.table th {
    width: 80px;
}
.cm-downgrade {
    background-color: var(--cm-color-danger-bg);
}
.cm-upgrade {
    background-color: var(--cm-color-success-bg);
}
tr.cm-no-revenue-yet td {
    color: #bbb;
}
.cm-bonus-eligible {
    text-decoration: underline;
}
tr.bold-row td {
    font-weight: bold;
}

#estimate-editor {
    padding: 20px;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(11) {
    order: 4;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(6) {
    order: 3;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(1) {
    order: 1;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(2) {
    order: 2;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(3) {
    order: 5;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(4) {
    order: 6;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(5) {
    order: 7;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(7) {
    order: 8;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(8) {
    order: 9;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(9) {
    order: 10;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(10) {
    order: 11;
}

.catermonkey-tenant-308 .product-editor-wrap .card:nth-child(n+12) {
    order: 12;
}

.select-deselect-buttons .btn {
    font-size: 0.7rem;
    padding: 3px 12px;
}

/* Monthly Calendar - Minimal Styles */
.monthly-calendar-view {
  padding: 20px;
}

.status-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 5px;
}

.monthly-day-detail {
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 10px;
  min-width: 250px;
  max-width: 300px;
  z-index: 1000;
}

.detail-order-card {
  padding: 6px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.detail-order-card:hover {
  background: #f5f5f5;
}

.monthly-orders-table .clickable-row:hover {
  background-color: #f9f9f9;
}
.status-badge {
    cursor: pointer;
}
.status-badge.invoice-status-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    width: 32px;
    height: 32px;
    border-radius: 16px;
}
.clickable-row {
    cursor: pointer;
}

th.day-enabled {
    width: 14.285714285%;
}
.datepicker table thead tr:last-child:not(:only-child) {
    background-color: var(--cm-light-green-transparent);
}
.datepicker table thead tr:first-child th {
    background-color: var(--cm-light-green);
}

.rc-border {
    border: none !important;
}
.available.off {
    color: var(--cm-nav-color);
    background-color: var(--cm-very-light-gray);
}
.spacer {
    flex-grow: 1;
}
.ReactVirtualized__Table__row {
    margin-bottom: 3px;
}


.estimate-comment-form-placeholder {
}

.estimate-wrap .estimate-comment-form-placeholder {
    border: 1px solid var(--cm-light-gray);
    height: 40px;
    padding: 10px;
}

/* ============================================================================
   Signup Wizard Styles
   ============================================================================ */

.signup-wizard-wrap {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
    display: flex;
    flex-direction: column;
}

.signup-wizard-language-selector {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.signup-wizard-language-selector .language-select {
    background-color: #f5f7fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px 12px;
    min-width: 150px;
}

.signup-wizard-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
}

.signup-wizard-panel {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    max-width: 700px;
    width: 100%;
    padding: 40px;
}

/* Progress Indicator */
.signup-wizard-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
}

.signup-wizard-progress::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #e0e0e0;
    z-index: 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    flex: 1;
}

.progress-step .step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.progress-step .step-label {
    margin-top: 8px;
    font-size: 12px;
    color: #999;
    text-align: center;
    transition: color 0.3s ease;
}

.progress-step.active .step-number {
    background: var(--cm-green, #009688);
    color: white;
}

.progress-step.active .step-label {
    color: var(--cm-green, #009688);
    font-weight: 600;
}

.progress-step.completed .step-number {
    background: var(--cm-green, #009688);
    color: white;
}

.progress-step.completed .step-label {
    color: #666;
}

/* Wizard Steps Content */
.wizard-step {
    min-height: 300px;
}

.wizard-step h3 {
    color: #333;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 600;
}

.wizard-step .step-description {
    color: #666;
    margin-bottom: 30px;
    font-size: 14px;
}

/* Form Fields */
.signup-wizard-field {
    margin-bottom: 15px;
}

.signup-wizard-field .input-group {
    margin-bottom: 5px;
}

.signup-wizard-field .form-control {
    background-color: #f8faf9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 15px;
    font-size: 14px;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.signup-wizard-field .form-control:focus {
    border-color: var(--cm-green, #009688);
    box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.1);
    outline: none;
}

.signup-wizard-field.has-error .form-control {
    border-color: #e74c3c;
}

.signup-wizard-field .field-error {
    font-size: 12px;
    margin-top: 4px;
}

.signup-wizard-field .input-group-addon {
    background: transparent;
    border: none;
    color: #999;
    padding-right: 10px;
}

/* Position only validation icons outside the form field */
.signup-wizard-panel .cm-input-group,
.wizard-step .cm-input-group,
.signup-wizard-panel .input-group.m-b-20,
.wizard-step .input-group.m-b-20 {
    position: relative;
}

.signup-wizard-panel .input-group-addon:has(.zmdi-alert-circle-o),
.signup-wizard-panel .input-group-addon:has(.zmdi-alert-circle),
.signup-wizard-panel .input-group-addon:has(.zmdi-check),
.wizard-step .input-group-addon:has(.zmdi-alert-circle-o),
.wizard-step .input-group-addon:has(.zmdi-alert-circle),
.wizard-step .input-group-addon:has(.zmdi-check) {
    position: absolute;
    right: -28px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
}

.signup-wizard-panel .input-group-addon:has(.zmdi-check) .zmdi-check,
.wizard-step .input-group-addon:has(.zmdi-check) .zmdi-check {
    margin-left: 0;
}

.signup-wizard-field .select {
    position: relative;
}

.signup-wizard-field .select select {
    appearance: none;
    background-color: #f8faf9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 15px;
    padding-right: 35px;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
}

.signup-wizard-field .select::after {
    content: '\f2f9';
    font-family: 'Material-Design-Iconic-Font';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
}

/* Error states for form validation */
.signup-wizard-panel .form-control.error,
.signup-wizard-panel .error .form-control,
.signup-wizard-panel .select.error select,
.wizard-step .form-control.error,
.wizard-step .error .form-control,
.wizard-step .select.error select {
    border-color: var(--cm-danger) !important;
    background-color: #fdf2f2;
}

.signup-wizard-panel .form-control.error:focus,
.signup-wizard-panel .error .form-control:focus,
.wizard-step .form-control.error:focus,
.wizard-step .error .form-control:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-danger) 15%, transparent);
}

.signup-wizard-panel .form-control.success,
.signup-wizard-panel .success .form-control,
.wizard-step .form-control.success,
.wizard-step .success .form-control {
    border-color: var(--cm-green, #009688);
}

/* Checkbox Group */
.signup-wizard-panel .checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.signup-wizard-panel .checkbox-group .checkbox {
    background: #f8faf9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 15px;
    margin: 0;
    transition: all 0.1s ease;
}

.signup-wizard-panel .checkbox-group .checkbox:hover {
    border-color: var(--cm-green, #009688);
    background: #f0f7f6;
}

.signup-wizard-panel .checkbox-group .checkbox label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    font-size: 14px;
}

.signup-wizard-panel .checkbox-group .checkbox input[type="checkbox"] {
    margin-right: 10px;
}

.checkbox-group .checkbox input[type="checkbox"]:checked + .input-helper + span,
.checkbox-group .checkbox input[type="checkbox"]:checked ~ span {
    color: var(--cm-green, #009688);
    font-weight: 500;
}

/* Other Input Wrapper */
.other-input-wrapper {
    grid-column: 1 / -1;
    padding-top: 5px;
}

.other-input-wrapper .fg-line {
    margin-bottom: 0;
}

.other-input-wrapper input {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 12px;
}

.other-input-wrapper input:focus {
    border-color: var(--cm-green, #009688);
}

/* Navigation Buttons */
.wizard-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.wizard-navigation .flex-spacer {
    flex: 1;
}

.wizard-navigation .btn {
    padding: 12px 24px;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.1s ease;
}

.wizard-navigation .btn-default {
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
}

.wizard-navigation .btn-default:hover {
    background: #eee;
}

.wizard-navigation .btn-primary {
    background: var(--cm-green, #009688);
    border: none;
    color: white;
}

.wizard-navigation .btn-primary:hover {
    background: #00796b;
}

.wizard-navigation .btn-primary:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.wizard-navigation .btn-lg {
    padding: 14px 32px;
    font-size: 16px;
}

/* Success Panel */
.wizard-success {
    padding: 60px 20px;
}

.wizard-success .zmdi.jumbo {
    font-size: 80px;
    display: block;
}

.wizard-success h3 {
    margin-top: 20px;
    font-size: 28px;
}

.wizard-success p {
    color: #666;
    font-size: 16px;
}

/* Error Display */
.signup-wizard-panel .warning-box,
.signup-wizard-panel .info-box {
    margin-top: 15px;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .signup-wizard-container {
        padding: 20px 15px;
    }

    .signup-wizard-panel {
        padding: 25px 20px;
    }

    .signup-wizard-progress {
        margin-bottom: 25px;
    }

    .progress-step .step-number {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .progress-step .step-label {
        font-size: 10px;
    }

    .wizard-step h3 {
        font-size: 20px;
    }

    .checkbox-group {
        grid-template-columns: 1fr;
    }

    .wizard-navigation {
        flex-wrap: wrap;
        gap: 10px;
    }

    .wizard-navigation .btn {
        flex: 1;
        min-width: 120px;
    }
}

@media screen and (max-width: 480px) {
    .signup-wizard-language-selector {
        min-width: 120px;
    }

    .signup-wizard-progress::before {
        display: none;
    }

    .progress-step .step-label {
        display: none;
    }
}

/* Signup page body styles */
body.signup-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
    min-height: 100vh;
}
.card.files-box .table-responsive,
.location-files .table-responsive,
.customer-files .table-responsive {
    overflow: visible !important;
}

i.file-placeholder {
    width: 32px;
    height: 32px;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: var(--cm-mid-gray);
}
img.file-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid var(--cm-lines-color);
    cursor: pointer;
}
.spacer {
    flex-grow: 1;
}

/* RULES HERE */

.upgrade-modal .upgrade-plan ul {
    list-style: none;
    padding-left: 0;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upgrade-modal .upgrade-plan li {
    display: flex;
    border: 1px solid var(--cm-background-color);
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 40ch;
    cursor: default;
    transition: background 0.1s ease;
}

.upgrade-modal .upgrade-plan li:hover {
    background: var(--cm-yellow);
    color: black;
}

.upgrade-modal .upgrade-plan li i.zmdi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cm-background-color);
    color: var(--cm-green);
    font-size: 1em;
    flex-shrink: 0;
    transition: background 0.1s ease, color 0.1s ease;
}

.upgrade-modal .upgrade-plan li:hover i.zmdi {
    background: var(--cm-green);
    color: var(--cm-yellow);
}

/* Skeleton loading animation */
.skeleton-loading { padding: 8px 25px; }
.skeleton-line {
    height: 14px;
    margin-bottom: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.w-100 {
    width: 100% !important;
    align-items: stretch;
    align-content: stretch;
}

/* V3 template editor — modal body fills available height */
.modal-dialog.from-right.editor-modal-v3 .modal-content {
    display: flex;
    flex-direction: column;
}
.modal-dialog.from-right.editor-modal-v3 .modal-body {
    flex: 1;
    min-height: 0;
}


/* V3 TipTap Styles */

.tiptap-inline-editor .tiptap-base {
  width: 100%;
  min-height: 100%;
  box-shadow: 0 0 0 2px dodgerblue;
  background: transparent;
  cursor: text;
}

.tiptap-base a {
  color: inherit !important;
  text-decoration: none;
}
.tiptap-base a * {
  text-decoration: underline;
}

/* Bulleted list — visual indent must match the SVG renderer
   (cs2.text.measure/bullet-indent-px = 20). Use list-style-position:
   outside so the bullet sits in the indent gutter. */
.tiptap-base ul {
  list-style: disc outside;
  padding-left: 20px;
  margin: 0;
}
.tiptap-base ul li {
  margin: 0;
  padding: 0;
}
.tiptap-base ul li > p {
  margin: 0;
}

.variable-chip {
  display: inline;
  padding: 1px 4px;
  margin: 0 1px;
  background: rgba(59,130,246,0.1);
  border-radius: 2px;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  user-select: none;
  transition: background 0.1s ease, box-shadow 0.1s ease;
}
.variable-chip:hover {
  background: rgba(59,130,246,0.2);
  cursor: pointer;
}
.variable-chip.ProseMirror-selectednode {
  background: rgba(59,130,246,0.25);
  box-shadow: 0 0 0 2px #3b82f6;
}
.tiptap-inline-editor .ProseMirror {
  outline: none;
  min-height: 100%;
}

.tiptap-inline-editor .ProseMirror > *:first-child {
  /* Align TipTap first-line baseline with SVG rendering.
     --baseline-offset is a per-font em-ratio computed from canvas
     fontBoundingBoxAscent/Descent (set on .tiptap-base container). */
  margin-top: calc(var(--baseline-offset) * 1em);
}

.tiptap-inline-editor .ProseMirror * {
  text-rendering: geometricPrecision;
  margin: 0;
  /* Inherit from .tiptap-base container — overrides global p { font-size } rule */
  font-size: inherit;
  /* Match the SVG compositor line-height multiplier */
  line-height: calc(var(--sv-lh) * 1em);
  xletter-spacing: -0.01em;
}

/* V3 template editor — inline name input.
   The field has a persistent border + pen icon so it reads as editable
   at rest. The pen fades out while the input has focus. */
.ed3-template-name-field {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0 6px 0 0;
    background: white;
    transition: border-color 0.15s;
    cursor: text;
}
.ed3-template-name-field:hover {
    border-color: #d1d5db;
}
.ed3-template-name-field:focus-within {
    border-color: #6366f1;
}
.ed3-template-name-input {
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    border: none;
    border-radius: 4px;
    padding: 2px 6px;
    background: transparent;
    outline: none;
    width: 30ch;
}
.ed3-template-name-edit-icon {
    color: #9ca3af;
    font-size: 13px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.15s;
}
.ed3-template-name-field:focus-within .ed3-template-name-edit-icon {
    opacity: 0;
}

/* ---------------------------------------------------------------------------
   V3 Gallery — Ken Burns effect for .cm-gallery image blocks
   Images are stacked SVG <image> elements. JS cycles the active class.
   CSS handles the crossfade transition and subtle zoom animation.
   --------------------------------------------------------------------------- */

/* V3 Gallery — Ken Burns with crossfade
   Two composed animations: linear zoom/pan + eased fade in/out.
   JS adds .cm-gallery-active at staggered intervals for crossfade overlap. */

.cm-gallery-img {
    --kb-tx: -0.8%;
    --kb-ty: -0.6%;
    --kb-scale: 1.38;
    /* Centre origin gives an even buffer on every side when scaled, so
       the small Ken Burns translate never reveals a gap on any axis. */
    transform-origin: 50% 50%;
    opacity: 0;
}

.cm-gallery-img.cm-gallery-active {
    animation: cm-kb-move 7s linear forwards,
               cm-kb-fade 7s ease-in-out forwards;
}

/* Zoom/pan: linear throughout — always in motion. Scale anchor and
   magnitude are per-image (corner-locked images anchor scale to the
   locked edge to avoid revealing a gap as the image animates). */
@keyframes cm-kb-move {
    0%   { transform: scale(1.0) translate(0, 0); }
    100% { transform: scale(var(--kb-scale)) translate(var(--kb-tx), var(--kb-ty)); }
}

/* Fade: in during first 15%, hold, out during last 20% */
@keyframes cm-kb-fade {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ---------------------------------------------------------------------------
   V3 Gallery — static mode (dots, arrows, fullscreen)
   --------------------------------------------------------------------------- */

.cm-v3-gallery-overlay {
    position: absolute;
    z-index: 3;
    overflow: hidden;
}
.cm-v3-gallery {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Arrows */
.cm-v3-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: background 0.15s;
}
.cm-v3-gallery__arrow:hover { background: #fff; }
.cm-v3-gallery__arrow--prev { left: 8px; }
.cm-v3-gallery__arrow--next { right: 8px; }
.cm-v3-gallery__arrow i { font-size: 18px; color: #333; }

/* Dots */
.cm-v3-gallery__dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}
.cm-v3-gallery__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.1s;
}
.cm-v3-gallery__dot.active {
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
.cm-v3-gallery__dot:hover { background: rgba(255,255,255,0.8); }

/* Fullscreen modal */
.cm-v3-fullscreen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000000;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cm-v3-fullscreen__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cm-v3-fullscreen__close:hover { background: rgba(255,255,255,0.4); }
.cm-v3-fullscreen__content {
    display: flex;
    align-items: center;
    justify-content: center;
}
.cm-v3-fullscreen .cm-v3-gallery__arrow {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.25);
}
.cm-v3-fullscreen .cm-v3-gallery__arrow:hover { background: rgba(255,255,255,0.4); }
.cm-v3-fullscreen .cm-v3-gallery__arrow i { font-size: 24px; color: #fff; }
.cm-v3-fullscreen .cm-v3-gallery__dot {
    width: 10px;
    height: 10px;
}
.cm-v3-fullscreen .cm-v3-gallery__dots { bottom: 16px; }

.product-grouped-view > p,
.product-grouped-view >  .card {
    margin-right: 20px;
    margin-left: 20px;
}
.product-grouped-view > .card:last-of-type {
    margin-bottom: 20px;
}

/* V3 customer view: pages scale to fit container width on narrow viewports.
   Native pinch-zoom remains available via the device-width viewport. */
.estimate-view--v3 svg {
    max-width: 100%;
    height: auto;
}
/* Clear the position:fixed floating-acceptance bar on desktop only.
   Below 900px the bar becomes position:static, so no spacer is needed. */
.estimate-view--v3__pages {
    margin-top: 140px;
}
@media screen and (max-width: 900px) {
    .estimate-view--v3__pages {
        margin-top: 16px;
    }
}

/* ---------------------------------------------------------------------------
   Brand-aligned button styles.
   Bootstrap 3.3.6 ships .btn-primary as blue and doesn't define
   .btn-secondary at all. Override globally so the buttons/* CLJS wrappers
   render the Catermonkey palette: brand green for primary CTAs, outlined
   neutral for secondary.
   --------------------------------------------------------------------------- */

.btn-primary {
    background-color: var(--cm-green);
    border-color:     var(--cm-green);
    color:            #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--cm-dark-green);
    border-color:     var(--cm-dark-green);
    color:            #fff;
}
.btn-primary:disabled,
.btn-primary[disabled] {
    background-color: #9ca3af;
    border-color:     #9ca3af;
    color:            #fff;
    cursor:           not-allowed;
}

.btn-secondary {
    background-color: #fff;
    border:           1px solid #d1d5db;
    color:            #374151;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #f9fafb;
    border-color:     #9ca3af;
    color:            #111827;
}
.btn-secondary:disabled,
.btn-secondary[disabled] {
    color:  #9ca3af;
    cursor: not-allowed;
}

.add-block-option {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     6px 12px;
    font-size:   12px;
    color:       #374151;
    cursor:      pointer;
    white-space: nowrap;
    transition:  background 120ms;
}
.add-block-option:hover {
    background: #f3f4f6;
}
.add-block-option .add-block-option-icon {
    width:           16px;
    font-size:       16px;
    color:           #6b7280;
    text-align:      center;
    flex-shrink:     0;
}
.add-block-option:hover .add-block-option-icon {
    color: #374151;
}
.add-block-option.is-disabled,
.add-block-option.is-disabled:hover {
    background: transparent;
    color:      #d1d5db;
    cursor:     default;
}
.add-block-option.is-disabled .add-block-option-icon {
    color: #e5e7eb;
}

/* Template library modal cards (cs2.panels.estimates.editor3.template-library) */
.cm-tlib-card {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    gap:            8px;
    padding:        12px;
    border:         1px solid #e5e7eb;
    border-radius:  8px;
    background:     #fff;
    cursor:         pointer;
    transition:     border-color 120ms ease,
                    box-shadow   120ms ease,
                    transform    120ms ease;
}
.cm-tlib-card:hover {
    border-color: var(--cm-green, #22c55e);
    box-shadow:   0 4px 14px rgba(15, 23, 42, 0.10);
    transform:    translateY(-1px);
}
.cm-tlib-card__label {
    font-size:   13px;
    font-weight: 500;
    color:       #374151;
    display:     flex;
    align-items: center;
}
.cm-tlib-card:hover .cm-tlib-card__label {
    color: #111827;
}

/* ============================================================================
   Modern monthly calendar (Mariska / Canva design study)
   Spacious month-overview look: floating rounded day blocks, an airy
   full-width navigation bar with a "this month" shortcut, and rounded green
   weekday pills. Enabled per calendar via :modern? true and scoped to
   .cm-calendar-modern so the compact form date-pickers stay untouched.
   ============================================================================ */

.cm-calendar-modern.datepicker {
    font-size: 14px !important;
}

.cm-calendar-modern.datepicker .table-condensed {
    border-collapse: separate;
    border-spacing: 10px;
    width: 100%;
}

/* --- Navigation bar (month name, year stepper, prev/next, this-month) --- */
/* The global `table thead tr` rule tints every header row; the nav bar must
   stay on the plain white calendar background, so clear it on the row itself
   (clearing only the th lets the row colour bleed through). */
.cm-calendar-modern table thead tr:first-child {
    background-color: transparent;
}

.cm-calendar-modern table thead tr:first-child th.cm-cal-navbar {
    background-color: transparent;
    border: none;
    padding: 0 0 6px 0;
    cursor: default;
}

.cm-calendar-modern .cm-cal-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.cm-calendar-modern .cm-cal-nav-left {
    display: flex;
    align-items: center;
    justify-self: start;
}

.cm-calendar-modern .cm-cal-nav-center {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: center;
}

.cm-calendar-modern .cm-cal-nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
}

/* Reuse the weekview's circular pagination arrows for prev/next month; drop
   bootstrap's default vertical margin so they sit centered in the nav bar. */
.cm-calendar-modern .cm-cal-nav .pagination {
    margin: 0;
}

.cm-calendar-modern .cm-cal-month {
    font-size: 22px;
    font-weight: 600;
    color: var(--cm-font-color);
}

.cm-calendar-modern .cm-cal-year {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cm-calendar-modern .cm-cal-year-label {
    font-size: 18px;
    font-weight: 600;
    color: var(--cm-font-color);
    min-width: 3ch;
    text-align: center;
}


.cm-calendar-modern .cm-cal-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-green);
    line-height: 1;
    appearance: none;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.cm-calendar-modern .cm-cal-nav-btn:hover:not(:disabled) {
    background-color: var(--cm-green);
    color: var(--cm-white);
}

.cm-calendar-modern .cm-cal-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.cm-calendar-modern .cm-cal-nav-btn .zmdi {
    font-size: 22px;
    line-height: 1;
}

.cm-calendar-modern .cm-cal-year .cm-cal-nav-btn {
    width: 30px;
    height: 30px;
}

.cm-calendar-modern .cm-cal-year .cm-cal-nav-btn .zmdi {
    font-size: 16px;
}

/* --- Weekday header pills --- */
.cm-calendar-modern table thead tr:last-child:not(:only-child) {
    background-color: transparent;
}

.cm-calendar-modern th.day-enabled {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-table-heading-color);
    border: none;
    border-radius: 8px;
    padding: 10px 4px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    cursor: default;
}

.cm-calendar-modern th.cm-cal-week-head {
    background-color: transparent;
    border: none;
}

/* --- Day cells --- */
.cm-calendar-modern.datepicker .table-condensed td {
    border: 1px solid var(--cm-lines-color);
    border-radius: 8px;
    background-color: #fff;
    vertical-align: top;
    height: 92px;
    padding: 8px;
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

/* The base table CSS strips the top border off the first row with
   `border-top: medium !important`; restore it so the top row of day blocks
   has a full rounded border like every other row. */
.cm-calendar-modern.datepicker .table-condensed tbody tr:first-of-type td {
    border-top: 1px solid var(--cm-lines-color) !important;
}

/* Off (other-month) cells use a lighter border; keep the restored top border
   the same colour so the top row's off cells match the rest. */
.cm-calendar-modern.datepicker .table-condensed tbody tr:first-of-type td.off {
    border-top-color: #efefef !important;
}

.cm-calendar-modern.datepicker .table-condensed td.available:not(.off):hover {
    border-color: var(--cm-light-green);
    box-shadow: 0 2px 8px rgba(19, 60, 65, 0.08);
}

.cm-calendar-modern.datepicker .table-condensed td.off,
.cm-calendar-modern.datepicker .table-condensed td.available.off {
    background-color: var(--cm-very-light-gray);
    border-color: #efefef;
    color: var(--cm-nav-color);
}

.cm-calendar-modern.datepicker .table-condensed td.today {
    border-color: var(--cm-light-green);
    box-shadow: inset 0 0 0 1px var(--cm-light-green);
}

/* Week-number column cells */
.cm-calendar-modern.datepicker .table-condensed td.week {
    width: 28px;
    height: auto;
    padding: 0;
    border: none;
    background-color: transparent;
    color: var(--cm-nav-color);
    font-size: 11px;
    vertical-align: middle;
}

/* --- Day-cell content --- */
.cm-calendar-modern .day-cell-wrapper {
    height: 100%;
}

.cm-calendar-modern .monthly-day-cell .day-number,
.cm-calendar-modern .ow-date {
    font-weight: 600;
    color: var(--cm-font-color);
}

/* Plain, compact day number for the occupancy calendars (drop the bordered
   circle so it matches the airy month-overview look). */
.cm-calendar-modern .ow-date {
    width: auto;
    height: auto;
    margin: 0 0 4px 0;
    padding: 0;
    border: none;
    text-align: center;
}

.cm-calendar-modern .ow-wrap {
    padding: 0;
}

.cm-calendar-modern .ow-location {
    border-radius: 4px;
}

/* ===== Customer CRM pipeline board ===== */
.pipeline-board { width: 100%; padding: 4px 16px 16px; }

.pipeline-upsell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 40px 24px;
}
.pipeline-upsell-text { flex: 1 1 280px; max-width: 460px; }
.pipeline-upsell-text h4 { margin-top: 0; }
.pipeline-upsell-text p { color: #607d8b; margin-bottom: 16px; }
.pipeline-upsell-img {
    flex: 1 1 360px;
    max-width: 560px;
    width: 100%;
    height: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.pipeline-board-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.pipeline-board-header .flex-grow { flex: 1; }
.pipeline-pipeline-select select.form-control { min-width: 220px; }
.pipeline-switcher-trigger {
    display: inline-flex;
    align-items: center;
    min-width: 220px;
    justify-content: space-between;
    font-weight: 600;
}
.pipeline-switcher-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Scrollable list of pipelines — large click rows, can't be clipped (portaled). */
.pipeline-switcher-menu {
    display: flex;
    flex-direction: column;
    min-width: 240px;
    max-height: 60vh;
    overflow-y: auto;
}
.pipeline-switcher-option {
    border: none;
    background: transparent;
    text-align: left;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #37474f;
    white-space: nowrap;
}
.pipeline-switcher-option:hover { background: #eceff1; }
.pipeline-switcher-option.is-active { background: #e8eaf6; font-weight: 600; }

.pipeline-empty {
    background: #fff;
    border: 1px dashed #cfd8dc;
    border-radius: 6px;
    text-align: center;
}

.pipeline-lanes {
    display: flex;
    gap: 12px;
    align-items: stretch;
    overflow-x: auto;
    padding-bottom: 12px;
}

.pipeline-lane {
    flex: 0 0 272px;
    width: 272px;
    background: #eceff1;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    /* Dragging a card starts a native text selection (re-dnd's mousedown doesn't
       preventDefault), and the browser auto-scrolls .pipeline-lanes toward the
       selection anchor — so the board jumps the moment you start dragging. With
       nothing selectable there's no selection to chase. */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    /* Always fill down to (near) the bottom of the viewport so the board
       reads as full-height swimlanes; the lane body scrolls internally. */
    height: calc(100vh - 270px);
    min-height: 320px;
}
.pipeline-lane.is-unassigned { background: #e8eaf6; }

.pipeline-lane-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    font-weight: 600;
    color: #37474f;
    border-bottom: 1px solid #dde3e6;
}
.pipeline-lane-header .pipeline-lane-name { flex: 1 1 auto; }
.pipeline-lane-collapse { cursor: pointer; color: #90a4ae; }
.pipeline-lane-collapse:hover { color: #37474f; }

/* Collapsed lane: thin vertical strip with the name rotated 90° */
.pipeline-lane.is-collapsed {
    flex: 0 0 34px;
    width: 34px;
    cursor: pointer;
    align-items: center;
    padding: 10px 0;
    gap: 10px;
}
.pipeline-lane.is-collapsed:hover { background: #e2e6e9; }
.pipeline-lane.is-collapsed.is-unassigned:hover { background: #dfe2f1; }
.pipeline-lane-expand { color: #90a4ae; }
.pipeline-lane-collapsed-name {
    writing-mode: vertical-rl;
    font-weight: 600;
    color: #37474f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(100% - 56px);
}
.pipeline-lane-count {
    background: #cfd8dc;
    color: #37474f;
    border-radius: 10px;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 600;
}
/* In a collapsed lane the strip is only 34px wide, so a 2+ digit count
   (10, 100, 100+) would spill outside it. Shrink the badge to fit. */
.pipeline-lane.is-collapsed .pipeline-lane-count {
    max-width: 32px;
    box-sizing: border-box;
    padding: 1px 4px;
    font-size: 10px;
    text-align: center;
}

.pipeline-lane-body { flex: 1 1 auto; padding: 8px; overflow-y: auto; }
/* the drop-zone fills the lane body so the whole lane is a drop target */
.pipeline-lane-body .drop-zone {
    min-height: 60px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.pipeline-lane-dropfill { min-height: 40px; flex: 1 1 auto; }

/* Neutralise re-dnd's bootstrap row/col layout inside a narrow lane */
.pipeline-lane .dropped-element.row { display: flex; margin: 0 0 8px 0; }
.pipeline-lane .dropped-element .drag-handle.col-md-1 {
    width: auto;
    min-width: 22px;
    padding: 0;
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: #90a4ae;
}
.pipeline-lane .dropped-element .dropped-element-body.col-md-11 {
    width: auto;
    flex: 1;
    padding: 0;
    float: none;
}
.pipeline-card-grip { font-size: 18px; line-height: 1; }

.pipeline-card {
    background: #fff;
    border-radius: 5px;
    border-left: 4px solid #b0bec5;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
    padding: 9px 11px;
}
.pipeline-card.status-won  { border-left-color: #43a047; }
.pipeline-card.status-lost { border-left-color: #e53935; }

.pipeline-card-title { font-weight: 600; color: #263238; }
.pipeline-card-sub { font-size: 12px; color: #607d8b; }
.pipeline-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #78909c;
    margin-top: 3px;
}
.pipeline-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

/* Compact customer tags on a card (reuses tag-box rendering) */
.pipeline-card-tags { margin-top: 6px; }
.pipeline-card-tags .tag-box-wrap { margin: 0; padding: 0; min-height: 0; border: none; }
.pipeline-card-tags .tag-box { display: flex; flex-wrap: wrap; gap: 3px; }
.pipeline-card-tags .tag-wrap { margin: 0; }
.pipeline-card-tags .tag {
    font-size: 10px;
    line-height: 1.4;
    padding: 1px 7px;
    margin: 0;
}

.pipeline-lane-more {
    font-size: 11px;
    color: #90a4ae;
    text-align: center;
    padding: 6px 4px 2px;
}

.pipeline-status-badge {
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    padding: 1px 7px;
    background: #eceff1;
    color: #546e7a;
}
.pipeline-status-badge.is-won  { background: #e8f5e9; color: #2e7d32; }
.pipeline-status-badge.is-lost { background: #ffebee; color: #c62828; }

.pipeline-card-actions { display: flex; gap: 4px; }
.pipeline-card-action {
    border: none;
    background: transparent;
    color: #90a4ae;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
}
.pipeline-card-action:hover { background: #eceff1; }
.pipeline-card-action.is-won:hover        { color: #2e7d32; }
.pipeline-card-action.is-lost:hover       { color: #c62828; }
.pipeline-card-action.is-remove:hover     { color: #c62828; }
.pipeline-card-action.is-move-stage:hover { color: #3949ab; }

/* Click-to-move stage menu (inside a click-popover) */
.pipeline-card-move-menu { display: flex; flex-direction: column; min-width: 160px; }
.pipeline-card-move-title {
    font-size: 11px;
    color: #90a4ae;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 8px 5px;
}
.pipeline-card-move-option {
    border: none;
    background: transparent;
    text-align: left;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #37474f;
    white-space: nowrap;
}
.pipeline-card-move-option:hover { background: #eceff1; }

.pipeline-card-marker {
    height: 3px;
    background: #5c6bc0;
    border-radius: 2px;
    margin: 0 0 8px 0;
}

.pipeline-manage-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.pipeline-manage-row.is-active .form-control { border-color: #5c6bc0; }
.pipeline-manage-stages { margin-top: 6px; }

.pipeline-filter-bar { display: inline-flex; align-items: center; }
.pipeline-qb { max-width: 100%; }
.pipeline-qb-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 10px;
}
.pipeline-qb-row > .select { flex: 0 0 auto; width: 170px; }
.pipeline-qb-value { flex: 1 1 240px; min-width: 0; }
.pipeline-qb-value > .form-control,
.pipeline-qb-value > .select { width: 100%; }
.pipeline-qb-value .tag-box-wrap { display: flex; flex-wrap: wrap; gap: 4px; }
.pipeline-qb-save { flex-wrap: wrap; align-items: center; }
.pipeline-qb-save .form-control { flex: 1 1 200px; min-width: 0; }
.pipeline-qb-or { color: #90a4ae; white-space: nowrap; }
.pipeline-card-age { margin-left: auto; color: #b0bec5; }

/* Customer-editor pipeline panel: keep the pipeline/stage selects wide enough
   that names like "Leads" aren't truncated. */
.pipeline-editor-controls > .select { flex: 0 0 auto; min-width: 180px; }
.pipeline-editor-controls > .select > .form-control { width: 100%; }

.pipeline-qb-view-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
}

/* Meal-service menu template: "Copy day" helper. One button per weekday that
   has rows; clicking opens an inline popover with checkboxes for the other
   weekdays to duplicate that day's rows onto. */
.menu-copy-day {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 4px 30px;
}
.menu-copy-day__item {
    position: relative;
}
.menu-copy-day__popover {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    padding: 12px 14px;
    background: var(--cm-white);
    border: 1px solid var(--cm-light-gray);
    border-radius: var(--cm-border-radius);
    box-shadow: 0 4px 14px rgba(13, 46, 50, 0.18);
}
.menu-copy-day__popover-title {
    font-weight: 600;
    color: var(--cm-font-color);
    margin-bottom: 8px;
}
.menu-copy-day__days {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.menu-copy-day__day {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}
.menu-copy-day__day input { margin: 0; }
.menu-copy-day__actions {
    display: flex;
    gap: 8px;
}

/* ===========================================================================
   CAT-1228 — customer-editor two-pane layout shell (redesign, gated per-tenant)
   The full-screen customer editor splits into a collapsible General pane on the
   left and the tab strip + tab content on the right. Layout only — the form
   (customer-table) and the tabs are unchanged, just relocated into the panes.
   Every rule is scoped to .customer-editor-2pane so it never affects the
   classic single-column editor or any other modal.
   =========================================================================== */

/* Let the full modal's body host a full-height flex row. */
.modal-body:has(.customer-editor-2pane) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.customer-editor-2pane {
    display: flex;
    flex: 1;
    min-height: 0;
    align-items: stretch;
    gap: 0;
}

/* LEFT — General information pane, scrolls independently. */
.customer-editor-general-pane {
    flex: 0 0 42%;
    max-width: 42%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--cm-lines-color);
    overflow: hidden;
}

.customer-editor-general-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cm-lines-color);
    flex: 0 0 auto;
}

.customer-editor-general-title {
    font-size: var(--cm-h4-font-size);
    font-weight: 600;
    color: var(--cm-font-color);
}

.customer-editor-general-body {
    padding: 0 20px 20px;
    overflow-y: auto;
    min-height: 0;
    flex: 1;
}

/* Pipedrive-style collapse toggle: a chevron that rotates as the pane folds. */
.customer-editor-collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-border-radius);
    background-color: var(--cm-white);
    color: var(--cm-font-color);
    cursor: pointer;
    flex: 0 0 auto;
}

.customer-editor-collapse-toggle:hover {
    background-color: var(--cm-background-color);
}

.customer-editor-collapse-chevron {
    font-size: 18px;
    line-height: 1;
}

/* Collapsed: the pane folds to a narrow vertical strip whose title reads
   bottom-to-top (rotated 90°, Pipedrive board/stage style). The whole strip is
   the click target to expand again. */
.customer-editor-2pane.general-collapsed .customer-editor-general-pane {
    flex: 0 0 44px;
    max-width: 44px;
}

.customer-editor-general-collapsed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    height: 100%;
    cursor: pointer;
    color: var(--cm-font-color);
}

.customer-editor-general-collapsed:hover {
    background-color: var(--cm-background-color);
}

.customer-editor-general-title-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: var(--cm-h4-font-size);
    font-weight: 600;
    white-space: nowrap;
    color: var(--cm-font-color);
}

/* RIGHT — tab strip + tab content, fills the remaining width. */
.customer-editor-tab-pane {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px 20px;
}

.customer-editor-tab-nav {
    flex: 0 0 auto;
}

/* CAT-1219: section heading inside a merged tab (Documents = Notes+Files,
   Dietary = Allergens+Diets). Keeps it clear which sub-section is which. */
.customer-editor-tab-pane .customer-editor-merged-section-title {
    margin: 8px 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cm-font-color);
}

/* --- Mobile: stack the panes (no two columns side by side). The mobile
   section dropdown is a later slice; here the panes simply stack vertically and
   the General pane keeps its inline collapse behaviour. --- */
@media screen and (max-width: 768px) {
    .modal-body:has(.customer-editor-2pane) {
        overflow-y: auto;
    }
    .customer-editor-2pane {
        flex-direction: column;
    }
    .customer-editor-general-pane,
    .customer-editor-2pane.general-collapsed .customer-editor-general-pane {
        flex: 0 0 auto;
        max-width: none;
        border-right: 0;
        border-bottom: 1px solid var(--cm-lines-color);
        overflow: visible;
    }
    .customer-editor-general-body {
        overflow: visible;
    }
    .customer-editor-tab-pane {
        overflow: visible;
    }
    /* On mobile a collapsed General folds to a short horizontal bar, not a
       tall vertical strip. */
    .customer-editor-2pane.general-collapsed .customer-editor-general-collapsed {
        flex-direction: row;
        justify-content: center;
        padding: 12px 0;
        height: auto;
    }
    .customer-editor-2pane.general-collapsed .customer-editor-general-title-vertical {
        writing-mode: horizontal-tb;
        transform: none;
    }
    /* Reflow the General form so nothing falls off a narrow screen. The form is
       a two-column <table> (label cell + input cell); a table won't shrink below
       its intrinsic width, so on mobile the input column gets pushed past the
       viewport and is clipped. Collapse the table to a stacked block layout: the
       label sits above its input, and every field spans the pane width and wraps.
       Scoped to the General body so the classic editor (other tenants) is
       untouched. */
    .customer-editor-2pane .customer-editor-general-body table.table,
    .customer-editor-2pane .customer-editor-general-body table.table > tbody,
    .customer-editor-2pane .customer-editor-general-body table.table > tbody > tr {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .customer-editor-2pane .customer-editor-general-body table.table > tbody > tr > td {
        display: block;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    /* The label cell (first td, .p-t-20) now stacks above its input cell; trim
       its top padding so each label/input pair reads as one tight group. */
    .customer-editor-2pane .customer-editor-general-body table.table > tbody > tr > td.p-t-20 {
        padding-top: 14px;
        padding-bottom: 2px;
    }
    /* Keep every control inside the pane — inputs, selects, textareas, rich-text
       editors and the Bootstrap rows of paired fields all cap at full width. */
    .customer-editor-2pane .customer-editor-general-body input,
    .customer-editor-2pane .customer-editor-general-body select,
    .customer-editor-2pane .customer-editor-general-body textarea,
    .customer-editor-2pane .customer-editor-general-body .form-control,
    .customer-editor-2pane .customer-editor-general-body .row {
        max-width: 100%;
    }
    /* Flex field groups (salutation + first/last name, spouse, SEPA actions…)
       wrap onto the next line instead of overflowing horizontally. */
    .customer-editor-2pane .customer-editor-general-body .flex {
        flex-wrap: wrap;
    }
}

/* ===========================================================================
   CAT-1220 — General pane re-bucketed into 4 collapsible cards (redesign,
   gated per-tenant). Each card has a light-green header with a title and a
   collapse chevron; fields inside stack label-above-control. Scoped to
   .customer-editor-cards so no other screen is affected.
   =========================================================================== */

.customer-editor-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
}

.rb-card {
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-card-border-radius);
    background: var(--cm-white);
    overflow: hidden;
}

.rb-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: var(--cm-light-gray);
    cursor: pointer;
    user-select: none;
}

.rb-card-title {
    font-size: var(--cm-h4-font-size);
    font-weight: 600;
    color: var(--cm-font-color);
}

.rb-card-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-border-radius);
    background: var(--cm-white);
    color: var(--cm-font-color);
    flex: 0 0 auto;
}

.rb-card-toggle .zmdi {
    font-size: 18px;
    line-height: 1;
}

.rb-card-body {
    padding: 4px 16px 16px;
}

.rb-field {
    padding: 12px 0;
    border-bottom: 1px solid var(--cm-lines-color);
}

.rb-card-body > .rb-field:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.rb-label {
    display: block;
    font-size: var(--cm-h4-font-size);
    font-weight: 600;
    color: var(--cm-font-color);
    margin-bottom: 6px;
}

.rb-field-inline {
    display: flex;
    align-items: center;
    /* CAT-1220 addendum (Mariska): left-align the option boxes (type
       person/company, salutation, newsletter, review-mail, meal service) right
       after their label, instead of pushing them to the far right. */
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.rb-field-inline > .rb-label {
    margin-bottom: 0;
}

.rb-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 400;
}

.rb-grow {
    flex: 1 1 0;
    min-width: 0;
}

/* Customer account card: stack the "provide login details" button below the
   widget dropdown (CAT-1220), instead of the classic side-by-side row. */
.rb-account .login-chooser {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

/* ===========================================================================
   CAT-1221 — Contacts tab (redesign, company customers). A header row with the
   section title + "Add contact", a search box, then one collapsible card per
   contact person. Expanding a card reveals the nested .customer-editor-cards
   sub-editor. Scoped to .rb-contacts so no other screen is affected.
   =========================================================================== */

.rb-contacts {
    padding-top: 4px;
}

.rb-contacts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rb-contacts-title {
    margin: 0;
    font-size: var(--cm-h4-font-size);
    font-weight: 600;
    color: var(--cm-font-color);
}

.rb-contacts-search {
    margin: 12px 0 16px;
}

.rb-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rb-contact-item {
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-card-border-radius);
    background: var(--cm-white);
    overflow: hidden;
}

.rb-contact-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
}

.rb-contact-item-name {
    font-size: var(--cm-h4-font-size);
    font-weight: 600;
    color: var(--cm-font-color);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rb-contact-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.rb-contact-item-delete {
    padding: 0;
    color: var(--cm-mid-gray);
}

.rb-contact-item-delete:hover,
.rb-contact-item-delete:focus {
    color: var(--cm-danger);
}

.rb-contact-item-body {
    padding: 4px 16px 16px;
}

/* The nested sub-editor already has its own vertical rhythm; drop the extra
   top padding so it tucks under the contact header cleanly. */
.rb-contact-item-body .customer-editor-cards {
    padding-top: 0;
}

/* Order-level charges editor (CAT-1011) — the block between the discount
   editor and the totals in the order edit grid. US tenants only. The rows
   live in their own drop-zone and reuse the product-edit-row cell layout,
   so the columns line up with the product lines above. */
.order-charges-editor {
    margin: 10px 0;
}

.order-charges-editor .charges-title {
    margin: 0 0 6px 50px;
}

.order-charges-editor .charge-row {
    margin-bottom: 4px;
}

.order-charges-editor .select {
    margin: 0;
}

.order-charges-editor .select select.form-control {
    width: 100%;
}

/* compact selects in the qty ("%"/"$"/"p.p.") and tax ("No tax") columns —
   trim the theme's select padding so the labels fit the narrow cells */
.order-charges-editor .charge-row .quantity-cell select.form-control,
.order-charges-editor .charge-row .product-tax-rate-cell select.form-control {
    padding-left: 5px;
    padding-right: 14px;
    text-overflow: ellipsis;
}

.order-charges-editor .add-charge-row {
    margin: 4px 0 0 89px;
    width: 200px;
}