/** 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;
    /* A genuinely neutral soft fill. `--cm-light-gray` is green despite the
       name, so it tints anything it fills; reach for this where a surface
       should read as grey rather than as part of the green palette. */
    --cm-neutral-gray: #ededed;
    --cm-lines-color: rgb(210,215,208);
    /* Row separators only. A table draws one line per row, so the weight that
       reads as a border around a single card reads as ruling on a long list;
       this is the same hue stepped a third of the way to white. The header's
       bottom edge stays on --cm-lines-color — it bounds the band, it is not
       one of the rules inside it. */
    --cm-table-line-color: rgb(226,229,224);
    --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: #1F2429;
    --cm-table-heading-color: #5A646E;
    --cm-table-heading-bg-color: #F7F8F9;
    --cm-background-color: #e8e8e6;
    --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;

    /* A reminded invoice and a sent quote are the same "we have contacted them,
       now we wait" state, and they were the same colours written out twice.
       Pale blue keeps it in the family with the other pill fills — the pill
       said "notified", not "problem", but a solid #2196F3 with white text
       shouted louder than overdue did. */
    --cm-status-reminded-bg: #dbe9f5;
    --cm-status-reminded: #2a5f8f;

    /* Overdue is the loudest thing a pill says, but it sits in a row of pale
       fills, so a saturated red made it read as an error banner rather than a
       status. Same lightness as the confirmed/cancelled fills beside it; the
       dark text carries the urgency. Separate from --cm-color-danger-bg, which
       also paints calendar day-labels. */
    --cm-status-late-bg: #fbdad9;

    /* The credited pill sits beside the open/unpaid one, which fills with
       --cm-status-cancelled-bg. Same amber, one step darker, so the two read as
       neighbours rather than as unrelated states. Separate from
       --cm-color-credited-bg, which also paints a calendar day-label. */
    --cm-status-credited-bg: #f5dcae;

    --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);
}
/* Centre the icon on the pill rather than pinning it to the anchor's top edge
   with hand-tuned padding. The padded icon box (13 + 20 + 13 = 46px) is shorter
   than the anchor (49.4px), so `top: 0` alone left the glyph ~1.7px above the
   pill's centre — and the label carried a compensating -2px nudge to match it,
   putting both above centre. Stretching the box top-to-bottom and centring the
   glyph inside it makes this independent of the anchor's padding and
   line-height, so the label needs no nudge. */
.main-menu > li > a > i {
    top: 0;
    bottom: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-menu > li > a .nav-item-text {
    position: relative;
    top: 0;
}
/* Keep the collapsed (icon-only) nav flush — no pill inset. */
.sidebar.move-out .main-menu > li > a {
    margin: 0;
    border-radius: 0;
}

/* Group labels. Deliberately inert: a dropdown here would put the most-used
   page behind an extra click. Aligned to the icon column (10px anchor margin
   + 16px icon offset) rather than the label column, so the heading reads as
   spanning the group instead of belonging to a row. */
.main-menu > li.nav-group-heading {
    padding: 16px 20px 4px 26px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.45);
    cursor: default;
    pointer-events: none;
}
/* Collapsed (icon-only): the label has no room, so the heading becomes the
   divider rule between groups. Zero height because `.main-menu`'s 27px flex
   gap already supplies the breathing room on both sides. */
.sidebar.move-out .main-menu > li.nav-group-heading {
    padding: 0;
    width: 22px;
    height: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.sidebar.move-out .main-menu > li.nav-group-heading .nav-item-text {
    display: none;
}

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

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

/* Logo and company name are treated as one block: the wrap owns the width, the
   logo fills it, and the name aligns to `flex-start` — the logo's own left
   edge. Sizing the GROUP rather than centring each child independently is what
   lets the name line up under the logo's first letter without hard-coding it.
   The logo must not also be sized in %, or the two would size off each other.

   The 26px inset lines the logo's left edge up with the nav icons below it.
   That figure is not a variable anywhere: the nav `<a>` carries margin-left:10px
   and its icon sits 16px into the link's 52px left padding. If the nav inset
   changes, this has to follow — there is nothing to keep them in step
   automatically. */
.app-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin: 0 26px 30px;
}
.app-logo-wrap .company {
    color: var(--cm-nav-color);
}
.sidebar .app-logo {
    margin-top: 20px;
    width: 100%;
}

.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;
}

/* Datagrid rows size to their CONTENT, not to their action button.
   A one-line row is 18px of text, but the row was 57px: the commands cell adds
   3px of extra top padding and holds a button whose `btn-xs` is overridden to
   `6px 16px`, making it 33px on its own. Rows that DO have a second line still
   grow — this only stops the empty ones from paying for it. */
.bootgrid-table td.commands {
    padding-top: 10px !important;
}

.bootgrid-table td.commands .btn {
    padding: 3px 10px;
}

/* `waves-circle` pins a width AND height on the button, so padding alone left
   it 33px and the row could not shrink past it. `.blocked-days-grid` already
   carries this same workaround. */
.bootgrid-table td.commands button.waves-circle {
    width: auto !important;
    height: auto !important;
}

/* Middle, on every grid. On a single-line row there is no slack to distribute
   so it is indistinguishable from top; the difference shows on a row where one
   cell runs to a second line, and there centring is what stops the checkbox and
   the one-line cells sitting against the top edge while their neighbour fills
   the row. The cost is that a two-line cell's FIRST line no longer shares a
   baseline with its neighbours. */
.bootgrid-table tbody td,
.bootgrid-table td.commands {
    vertical-align: middle !important;
}

/* The header reads as one of the rows rather than a squashed strip above them:
   same vertical padding, so the same height. */
.table.bootgrid-table > thead > tr > th {
    /* !important because `table thead tr th` carries one. */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    /* A header never wraps. `Prijs (incl. BTW)` broke across two lines and took
       the whole header band with it, so the band's height was decided by the
       narrowest column rather than by the text. A label is short by
       construction; if one is long enough to need the room, the column is
       misnamed. */
    white-space: nowrap;
    /* Closes the header band. `table > tbody > tr:first-of-type > td` clears the
       first data row's border-top, so without this the band has no bottom edge
       and the column titles float above the list. Darker than the row rules on
       purpose: it bounds them. */
    border-bottom: 1px solid var(--cm-lines-color);
}

.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;
}
/* Keep the address pin on the same line as the customer name. The name link
   holds the contact-person name in a block <div> for companies-with-a-contact,
   so a plain-flow sibling pin drops below it; flex lays them out side by side. */
.order-grid-customer-cell {
    display: flex;
    align-items: flex-start;
}

/* Map pin in list rows: reveal only while the row is hovered, so it doesn't
   clutter the resting view. Space is reserved (opacity, not display) so hover
   never reflows the row. Scoped to `tr` so the week/month calendar pins, which
   render outside a table row, stay always visible. */
tr .cm-map-pin {
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}
tr:hover .cm-map-pin {
    opacity: 1;
}

.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;
}




.invoice-status {
    background-color: #ccc;
}

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

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

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


.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);
}

/* An unpaid invoice and a cancelled order are the same "needs attention, not
   yet an error" state, so they share the order palette's amber rather than the
   generic warning tokens. */
.invoice-status.open {
    background-color: var(--cm-status-cancelled-bg);
    color: var(--cm-status-cancelled);
}

/* Paid and confirmed are the same "settled" state; same green as the order
   palette, not the generic success tokens. */
.invoice-status.paid {
    background-color: var(--cm-status-confirmed-bg);
    color: var(--cm-status-confirmed);
}

.invoice-status-icon {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    border: 1px solid var(--cm-lines-color);
    /* The dot sits in a flex row next to a label that may wrap; without this it
       is the flexible item and collapses to a shard. */
    flex: 0 0 auto;
}

/* ... */
.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.open {
    background-color: var(--cm-color-warning);
}


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

.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;
}


.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;
}


/* The products grid's row marks: "has a recipe" and its absence.

   Brand tokens rather than `green`/`#ccc`: the check says the same thing the
   confirmed pill says, so it wears the same colour, and a saturated green next
   to those pale fills reads as a different vocabulary. The padding keeps the
   glyph off the neighbouring cell in a 40px column. */
.product-mark {
    color: var(--cm-status-confirmed);
    padding: 0 4px;
}
.product-mark-muted {
    color: var(--cm-mid-gray);
}
/* The photo glyph is the only mark you can click, so it gets a hover state —
   but it is a mark first: default black made it the loudest thing in a column
   of quiet ones. */
.product-mark-action {
    cursor: pointer;
}
.product-mark-action:hover {
    color: var(--cm-dark-green);
}

.extra-order-options {
   font-size: 14pt;
   color: var(--cm-mid-gray);
   width: 24px;
   cursor: pointer;
}
.extra-order-options-wrap {
   position: relative;
   /* Matches `.extra-order-options`: at 16px the icon overflowed its own wrap
      into a cell that clips. */
   width: 24px;
   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;
}

/* `cs2.order-util/sub-products` lays its rows out with Bootstrap grid markup,
   and a `.row` carries `margin: 0 -15px` because it expects a container that
   pads 15px. A datagrid cell pads 10px, so the row reaches past the cell's left
   border and the cell's `overflow: hidden` takes the first character off every
   sub-product name.

   Only visible when sub-quantities are hidden: that branch zeroes the
   `.col-sm-11` gutter, which is what otherwise cancels the row's negative
   margin out.

   Scoped to `.bootgrid-table` rather than fixed in `sub-products` itself, which
   is cljc and also renders estimate and invoice PDFs — those sit in a container
   the negative margin is correct for. */
.bootgrid-table .cm-sub-products > .row.product-row {
    margin-left: 0;
    margin-right: 0;
}

.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);
}

/* No width here on purpose: the products grid is a datagrid whose columns are
   configurable, so a hardcoded width fights whatever set the reader has chosen.
   A column that needs one declares `:width` in its field spec. This rule used
   to pin the name to 50%, which squeezed Type until "Food / drinks" wrapped
   onto two lines on every food row. */

.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;
}

/* The same gradient the nav rail carries, so the two dark green surfaces in the
   product are one surface. The colour stays as the fallback: it is what shows
   if the image ever fails to resolve, and it is the token the rest of the page
   was designed against. */
.login-page, .registration-page {
    background-color: var(--cm-green);
    background-image: linear-gradient(180deg, #17474d 0%, #0d2e32 72%);
}

.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) {
    /* Footer actions stack full-width rather than wrapping a row of buttons.
       A single button with a long label (e.g. the order-overview primary,
       "Generate, share and open overview in a new screen" — longer still in
       Dutch, and a third button appears in production view) is wider than the
       panel, so the wrapped row still overflows and drags the whole modal into
       horizontal scroll — which is what puts the header × out of reach. Stacking
       + wrapping labels removes the overflow at the source. */
    .cm-modal-foot-inner {
        gap: 12px;
    }
    .cm-modal-foot-actions {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
    }
    .cm-modal-foot-secondary {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .cm-modal-foot-actions .btn,
    .cm-modal-foot-actions button {
        width: 100%;
        white-space: normal;
    }
    .cm-action-modal .cm-modal-foot {
        padding: 12px 14px;
    }

    /* Pin the × to the top-right corner. The header is a wrapping flex row, so
       when the action bar (saved-settings presets, etc.) wraps to its own line
       the close button gets pushed down below it and is no longer where a thumb
       reaches to dismiss the panel. Take it out of flow and anchor it; the
       action bar then drops to its own full-width row under the title. */
    .modal-dialog.from-right.cm-action-modal .cm-modal-head {
        position: relative;
        padding-right: 52px;
    }
    .cm-action-modal .cm-modal-close {
        position: absolute;
        top: 18px;
        right: 16px;
        margin: 0;
    }
    .cm-action-modal .cm-modal-head-actions {
        width: 100%;
    }
}

/* Order-overview settings: the sort select and the page-break checkbox sit side
   by side on desktop, but the select has a fixed 220px min-width and the
   checkbox label is long (longer still in Dutch: "Zet diverse onderdelen op
   losse pagina's"), so on a narrow screen they can't fit and the checkbox is
   pushed past the panel's right edge. Stack them on mobile and let the select
   go full-width. */
.oo-sort-select {
    min-width: 220px;
}
.oo-settings-bottom-row {
    align-items: flex-end;
}
@media screen and (max-width: 600px) {
    .oo-settings-bottom-row {
        flex-direction: column;
        align-items: stretch;
    }
    .oo-sort-select {
        min-width: 0;
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Mobile navigation: below the app's small-screen cutoff (cs2.db/small-screen?,
   < 500px) the fixed icon rail is hidden to reclaim its width, and the menu is
   reached through a floating burger that opens it full-width. Reuses the
   existing state: :nav/toggle flips move-in/move-out, and :nav/hide-if-mobile
   (already on every nav item) closes it on selection. Desktop is untouched —
   everything here is gated behind the max-width query.
   --------------------------------------------------------------------------- */
.mobile-nav-burger {
    display: none;
}

@media only screen and (max-width: 500px) {
    /* Reclaim the rail: slide the collapsed sidebar off-screen and drop the
       chevron ear (the burger replaces it). */
    .sidebar.move-out {
        transform: translate3d(-100%, 0, 0) !important;
    }
    .nav-toggle-wrap {
        display: none !important;
    }

    /* Expanded nav fills the screen. */
    .sidebar.move-in {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* The content no longer sits beside a 50px rail, so the 70px gutter that
       reserved room for it (and the 290px expanded-desktop variant) becomes
       dead whitespace — collapse both to a normal mobile inset. */
    #content .container-fluid,
    #content .container-fluid.container-margin-left {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Floating button. Closed: green ≡ pill, top-left, over the content.
       Open: plain × at the top-right, over the full-width nav, so it never
       collides with the logo in the panel's top-left. */
    .mobile-nav-burger {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: 12;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background-color: var(--cm-green);
        color: #fff;
        font-size: 22px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        cursor: pointer;
    }
    .mobile-nav-burger.is-open {
        left: auto;
        right: 12px;
        background-color: transparent;
        box-shadow: none;
    }
}

/* 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;
    /* Auto-fit columns to the container: as many as fit at >=170px each, so it
       shows ~4 in the wide download modal and ~2 in the narrow rule editor
       without labels overflowing into the next column. */
    column-width: 170px;
    column-gap: 16px;
}

.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;
}

/* Seven day boxes in a row that cannot wrap set the min-content width of
   whatever holds them — in the customer editor that is a table cell, so the
   whole table grew past its pane and the drawer scrolled sideways. Wrapping
   costs nothing where the row already fits. */
.weekday-boxes {
    flex-wrap: wrap;
    row-gap: 10px;
}

.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;
}

/* The order list's settings line. It renders the same at rest as it does while
   a menu is open — every control is a portalled popover anchored to the token
   it edits, so nothing about the row's geometry depends on the pointer.

   What used to be here swapped the whole line for a row of native <select>s on
   hover and went `position: absolute; left: -150px`, which took the line out of
   flow: every row below jumped, the panel landed over the date column, and it
   could slide out from under the pointer and oscillate. There is deliberately
   no :hover rule in this block. */

.order-settings {
    display: flex;
    min-width: 300px;
}

.order-settings-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.order-settings-fact,
.order-settings-line > span {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
}

.order-settings-sep {
    color: var(--cm-mid-gray);
}

/* One editable fact standing alone in its own column, rather than inline on the
   composite settings line. Same widgets, so it needs no styling of its own
   beyond staying on one line — a pill broken across two would set the height of
   every row in the table. */
.quick-edit-cell {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* A fact with no value: its field name, recessive enough to scan past and
   solid enough to aim at. Dotted, because a value that is really there must
   not be mistaken for one that isn't. */
.quick-edit-unset {
    color: var(--cm-mid-gray);
    border-bottom: 1px dotted var(--cm-mid-gray);
}

.click-popover .quick-edit-value,
.click-popover .quick-edit-unset,
.click-popover .order-status {
    cursor: pointer;
}

.click-popover:hover .quick-edit-value,
.click-popover:hover .quick-edit-unset {
    color: var(--cm-font-color);
}

.click-popover:hover .order-status {
    filter: brightness(0.95);
}

/* The menu itself, inside the click-popover's portal. */
/* No max-height here on purpose: the popover around it is the scroller, and it
   knows how much room it actually has. A `60vh` here scrolled the wrong box —
   60% of the viewport measured from a trigger two-thirds down the screen still
   runs off the bottom, and the rows past the edge cannot be reached. */
.quick-edit-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
}

.quick-edit-option {
    display: block;
    width: 100%;
    padding: 5px 10px;
    border: none;
    border-radius: var(--cm-border-radius);
    background: none;
    color: var(--cm-font-color);
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.quick-edit-option:hover {
    background-color: var(--cm-lines-color);
}

.quick-edit-option.is-selected {
    font-weight: 600;
}

/* The paid toggle rides in the payment-method menu — it is an action, not one
   of the values above it, so it is ruled off from them. */
.quick-edit-option.is-action {
    margin-top: 4px;
    padding-top: 7px;
    border-top: 1px solid var(--cm-lines-color);
    border-radius: 0;
    color: var(--cm-mid-gray);
}

.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 .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;
}

/* Width lives with the rest of the check-column sizing at the bottom of this
   file — see "Datagrid checkbox column". */

.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;
}

/* The order total's breakdown, in a tooltip. Two columns so the figures line up
   against their labels; the label column is the one that may wrap. */
.price-breakdown {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 14px;
    text-align: left;
}

.price-breakdown-row {
    display: contents;
}

.price-breakdown-value {
    text-align: right;
    white-space: nowrap;
}
.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-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: normal;
    pointer-events: none;
    opacity: 0;
    /* Same 0.15s hover-intent delay as `.tooltip-icon:hover .popup-tooltip`, so
       the two tooltip families answer a hover at the same speed. Long enough
       that sweeping across a column does not trail tooltips behind the pointer,
       short enough that aiming at one feels like a response rather than a wait. */
    animation: fadeIn 0.15s ease-in 0.15s 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;
    /* THIS is the scrolling element — its max-height is measured at open time
       against the room on the side it opened to. `contain` stops the gesture
       chaining to the page when the list hits its end, which on a phone reads
       as "the menu doesn't scroll, the page does". */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* No arrow on a click menu, because this element is also the scroller: the
   arrow is absolutely positioned against it, and the `-above` variant sits at
   `top: 100%` — 12px past the bottom edge. Block-end overflow counts toward
   `scrollHeight`, so a menu with room to spare still renders a scrollbar, and
   every upward-opening menu got one. (`-below` puts the arrow above the top
   edge, which does not count, which is why only one direction showed it.)
   A menu anchored to a token reads as a menu without a tail; the tooltips that
   want one are not `.is-clickable`. */
.tooltip-compact.is-clickable::before {
    content: none;
}

/* The ingredient's "komt voor in" list inside a compact tooltip. A bare `ul`
   indents for body copy, which in a 13px popover pushes every name half the
   width in. */
.appears-in-list {
    margin: 0;
    padding-left: 16px;
    text-align: left;
}

/* One line, always. A wrapping list sets the height of the whole row, and on a
   table where most ingredients appear in several products that is every row —
   the full list is in the tooltip. */
/* Tags are the one cell allowed to CLIP rather than get a tooltip. They are a
   set with no natural order and no single value to name, so a third tag
   sliding off the edge costs less than every row growing a second line. */
.bootgrid-table td[class*="col-tags"],
.bootgrid-table td[class*="col-product-tags"] {
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
}

/* The tag editor's autocomplete drops out of the cell, and `overflow: hidden`
   clips a descendant whatever its z-index, so the cell must stop clipping
   while the list is open. The list is in the DOM only while it is open, so
   the clip returns by itself. */
.bootgrid-table td[class*="col-tags"]:has(.search-results-wrap, .no-results),
.bootgrid-table td[class*="col-product-tags"]:has(.search-results-wrap, .no-results) {
    overflow: visible;
}

/* A cell that holds free text: one line, clipped, with the whole of it in a
   tooltip. Wrapping text is what makes a table's rows different heights, and a
   description is the worst offender because its length is arbitrary. */
.cell-clip {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.appears-in-cell {
    display: inline-block;
    /* A real width, not 100%: the cell has no width of its own, so a percentage
       lets the column grow to the longest list instead of clipping it. */
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* Date cells never wrap and never clip. A date split across two lines is
   unreadable, and a clipped one is worse than unreadable — "17-07-202" can be
   read as a date that does not exist. The floor is sized for the longest plain
   format (dd-mm-yyyy) plus the cell's own padding; the columns that render a
   weekday and a time grow past it on their own.

   Matched on the column class rather than listed per grid, so a date column
   added later is covered without anyone remembering this rule: `col-date`
   catches date / date_created / date_sent / date_due, `_date` catches
   invoice_date / order_date / start_date / end_date / snooze_date. */
.bootgrid-table td[class*="col-date"],
.bootgrid-table th[class*="col-date"],
.bootgrid-table td[class*="_date"],
.bootgrid-table th[class*="_date"] {
    min-width: 110px;
    white-space: nowrap;
}

/* Simple one-value cells do not wrap. A wrapped cell sets the height of the
   whole ROW, so one long supplier name costs every column beside it — and a
   name broken across two lines reads worse than one that is clipped.
   Deliberately per column: the composite cells on other grids stack several
   facts on purpose and must keep wrapping. */
.ingredients-overview-grid td.col-name,
.ingredients-overview-grid td.col-supplier_name,
.ingredients-overview-grid td.col-article_number,
.ingredients-overview-grid td.col-appears-in {
    white-space: nowrap;
}

/* Bootstrap's `.radio, .checkbox` are form-row controls: 10px of margin above
   and below, plus a block line-height taller than the 18px control itself.
   Inside a grid cell that is a ~26px floor under every row — the checkbox, not
   the content, decides how tall the table is. Same override `.listview
   .lv-item .checkbox` already makes for its own rows.

   Carries the `table` step so it outweighs a bare `table th.check .checkbox`:
   this is the only rule that should set the grid checkbox's margin. */
table td.check .checkbox,
table th.check .checkbox {
    margin: 0;
    line-height: 1;
}

.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; }

/* A day change is a different KIND of break, not a heavier one, so it is dashed
   at the same width as an ordinary row rule. On --cm-lines-color rather than
   the lighter row colour: the gaps already cost a dash its weight, so matching
   the row colour would leave it fainter than the lines it is meant to outrank. */
.new-day-divider td {
    border-top: 1px dashed var(--cm-lines-color) !important;
}

/* The dashed rule turns down and around the label instead of running past it,
   so the day and the line marking it read as one mark. Right and bottom only:
   the row's own border-top is the top edge and the table's edge is the left.
   No fill — the label sits on whatever the row is, so it follows hover and
   selection instead of holding a tint that stops matching. */
.new-day-divider td:first-of-type::before {
    position: absolute;
    top:  0px;
    left: 0px;
    /* Tight: the label shares the cell's top-left corner with the checkbox, and
       it is what has to give — since losing its fill it no longer hides what it
       overlaps. */
    padding: 0px 2px 0px;
    color: var(--cm-table-heading-color);
    border-right: 1px dashed var(--cm-lines-color);
    border-bottom: 1px dashed var(--cm-lines-color);
    border-radius: 0px 0px 6px 0px;
    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%;
 }

 /* Cropper.js sizes itself from the height its parent reports at init, and Uppy
    un-hides the source <img> (max-height: 400px) just before that measurement.
    The flex chain below the panel defaults to min-height: auto, so a tall image
    inflates it to 400px inside a panel that is only as tall as the dashboard —
    the excess is then clipped by the panel's overflow: hidden and unreachable.
    Keep the chain shrinkable and the image bounded so the measured height is the
    panel's own. */
 .uppy-Dashboard .uppy-DashboardContent-panelBody,
 .uppy-Dashboard .uppy-ImageCropper {
     min-height: 0;
 }

 .uppy-Dashboard .uppy-ImageCropper-container {
     min-height: 0;
     overflow: hidden;
 }

 .uppy-Dashboard .uppy-ImageCropper-image {
     max-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;
}

/* CAT-1118 VAT gate: the decision an EU (non-NL) company without a VAT number
   makes before it can link a payment method. */
.vat-gate-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* `.btn` centres its label, so match its specificity to keep these left-aligned. */
.vat-gate-options .vat-gate-option.btn {
    border: 1px solid var(--cm-border-color, #d9d9d9);
    border-radius: 4px;
    background-color: var(--cm-white);
    padding: 12px 16px;
    text-align: left;
    white-space: normal;
}

.vat-gate-option:hover {
    border-color: var(--cm-green);
}

.vat-gate-option small {
    color: #6b6b6b;
}

.vat-gate-option-selected,
.vat-gate-option-selected:hover {
    border-color: var(--cm-green);
    box-shadow: inset 0 0 0 1px var(--cm-green);
}

/* CAT-1118a VAT-number nudge: same in-flow placement as .setup-banner /
   .email-verification-banner, in an attention-drawing pale yellow.
   Unlike those two, this banner's copy is long enough to fill the viewport, so
   it needs the same sidebar gutter as `#content .container-fluid`: the nav is
   `position: fixed` with a higher stacking order and would otherwise paint over
   the first words. Mirror that rule's two widths (70px collapsed rail, 290px
   expanded) rather than inventing a third. */
.vat-number-nudge-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 10px 70px;
    text-align: center;
}

@media only screen and (min-width: 1200px) {
    .vat-number-nudge-banner.nav-expanded {
        padding-left: 290px;
    }
}

.vat-number-nudge-text {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    /* A flex item won't shrink below min-content, so without `min-width` the
       paragraph stays on one line and runs off the banner. `max-width` keeps the
       measure readable instead of one viewport-wide line. */
    min-width: 0;
    max-width: 820px;
}

.vat-number-nudge-text .zmdi {
    font-size: 1.2rem;
    /* Hold the icon on the first line once the text wraps, and keep it from
       being squeezed by the shrinking paragraph beside it. */
    flex: none;
    line-height: 1.5;
}

.vat-number-nudge-cta {
    color: var(--cm-green);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

.vat-number-nudge-cta:link,
.vat-number-nudge-cta:visited,
.vat-number-nudge-cta:hover,
.vat-number-nudge-cta:active {
    color: var(--cm-green);
}

/* Below the burger breakpoint these full-bleed top banners sit under the fixed
   burger (44px @ left:8, right edge ~52), which lands on their first line.
   Inset the left so the burger sits in a clear gutter. Placed after the banners'
   own padding rules so it wins on source order (same specificity). */
@media only screen and (max-width: 500px) {
    .setup-banner,
    .email-verification-banner,
    .vat-number-nudge-banner {
        padding-left: 56px;
    }
}

/* 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;
}

/* The in-field clear button. Centred against the input's own height rather
   than offset by a fixed `top`, so it stays put in the 26px toolbar band and
   in a full-height field alike. */
.text-input .clear-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px;
    display: flex;
    align-items: center;
    padding: 0 4px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--cm-mid-gray);
    opacity: 0.6;
}

.text-input .clear-icon:hover {
    opacity: 1;
}

/* Room for the × so a long query does not run underneath it. */
.text-input:has(.clear-icon) input {
    padding-right: 26px !important;
}



/* 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-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;
}

/* The way out of an empty list, under the sentence explaining it. `text-align`
   on the cell does not centre a block-level button, so this centres itself. */
.dg-nodata-reset {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    padding-bottom: 8px;
}

.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 switcher: a compact horizontal tab bar (icon over a short label,
       four across) instead of a tall vertical stack. */
    .view-options-settings {
        flex-direction: row;
        justify-content: space-between;
        gap: 4px;
        width: 100%;
    }
    .view-option-button {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 8px 2px;
        text-align: center;
    }
    .view-option-icon {
        font-size: 18px;
    }
    .view-option-title {
        margin-left: 0;
        font-size: 11px;
        line-height: 1.15;
    }
    .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;
    }

    /* Date navigation: one compact, left-aligned wrapping row
       (week · < range > · this-week) instead of a tall centered stack. The
       min-width reset is essential — the base 410px forces the range wider than
       a phone screen, which would inflate the mobile layout viewport. */
    .calendar-weekview-header-wrap {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px 12px;
        margin-top: 8px;
    }
    /* Week number and the "this week" button share the top row; the < range >
       drops to its own row below (reordered via flex order + a 100% basis). */
    .calendar-weekview-header-wrap > div:first-child {
        order: 0;
    }
    .calendar-weekview-header-wrap > div:last-child {
        order: 1;
    }
    .calendar-weekview-header-wrap .calendar-weekview-header {
        order: 2;
        flex-basis: 100%;
        flex-direction: row;
        flex-grow: 0;
        justify-content: flex-start;
        gap: 8px;
        margin-top: 0;
    }
    .calendar-weekview-range {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 0;
        gap: 4px;
        text-align: left;
        font-size: 13px;
        margin-bottom: 0;
    }
    /* Header: keep the title centered so it clears the top-left burger, and put
       the action buttons in a left-aligned wrapping row rather than a centered
       column. */
    .card .card-header {
        flex-direction: column;
        /* Keep align-items at the base 'center' — a blanket 'stretch' here also
           stretches auto-width header controls like the .card-expand-toggle
           chevron on collapsible cards (settings), blowing it out to full width.
           Only the action row opts into full width, via align-self below. */
        align-items: center;
        gap: 12px;
    }
    .card .card-header > h3 {
        text-align: center;
        margin: 0;
    }
    .card .card-header .actions {
        align-self: stretch;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        margin-left: 0;
    }
    /* Balance the "showing N orders" line: the .m-l-25 utility (an !important
       rule) indents it 25px on the left only, leaving it flush against the
       right content edge. Match that on the right so it reads as deliberate
       padding rather than fighting the utility with another !important. */
    .num-orders-span {
        margin-right: 25px;
    }
    /* Data grids (the shared re-datagrid tables, .bootgrid-table in a
       .table-responsive scroller) are wider than a phone and overflow
       horizontally. Two universal touches: auto-hiding scroll shadows (pure
       CSS, via background-attachment:local) so it's obvious the table scrolls
       sideways, and tighter cells so more fits before you have to. */
    .table-responsive {
        background:
            linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat,
            linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat,
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.14), transparent) left center / 12px 100% no-repeat,
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.14), transparent) right center / 12px 100% no-repeat;
        background-attachment: local, local, scroll, scroll;
    }
    .bootgrid-table > thead > tr > th,
    .bootgrid-table > tbody > tr > td {
        padding: 7px 8px !important;
        font-size: 12px !important;
    }

}

.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,
.recipe-viewer > 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) */
/* Cap the menu height and let the stage list scroll: for a card near the bottom
   of a tall column, a pipeline with many stages produced a menu taller than the
   viewport whose off-screen options were unreachable (CAT-1345). The popover
   already flips above/below and clamps horizontally; this keeps every stage
   reachable regardless of the card's position. Scoped to this class so no other
   click-popover (pipeline switcher, tooltips) is affected. */
.pipeline-card-move-menu { display: flex; flex-direction: column; min-width: 160px;
    max-height: 60vh; overflow-y: auto; }
.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;
}

/* ===========================================================================
   Editor left-nav layout shell (`cm-editor-*`), gated per-tenant.
   Introduced for the customer editor (CAT-1476) and shared with the product
   editor: one section at a time, nav down the left, content beside it. The
   `cm-` classes are the layout; anything specific to one editor keeps its own
   class (`.customer-notes-panel`, `.customer-editor-merged-section-title`, …).
   The editor takes a three-fourths drawer and shows ONE section at a time: the
   section nav runs down the left, the selected section's content fills the
   rest. It is wider than the classic editor's two-thirds because the nav strip
   is fixed overhead that the content pane does not get back. Layout only — the nav entries, the section content and the
   footer controls are the same components the classic editor uses.
   Every rule is scoped to .cm-editor-nav-layout so it never affects the
   classic single-column editor or any other modal.
   =========================================================================== */

/* The drawer's base rules scroll the whole panel, header included. This layout
   scrolls its two panes instead, so the panel itself must not scroll: the body
   would then be sized to the panel's full height *below* the header, and the
   overhang — which carries the save/copy footer — falls past the viewport with
   no way to reach it. Lay the panel out as a column so the body takes exactly
   what the header leaves.
   Scoped through :has() on this layout's own class, at (0,4,0), so every other
   drawer keeps the base rules untouched — see docs/modal-patterns.md. */
.modal-dialog.from-right:has(.cm-editor-nav-layout) .modal-content {
    display: flex;
    flex-direction: column;
    overflow-y: hidden !important;
}

.modal-dialog.from-right:has(.cm-editor-nav-layout) .modal-header {
    flex: 0 0 auto;
}

/* Host a flex row so the two panes scroll independently. */
.modal-body:has(.cm-editor-nav-layout) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.cm-editor-nav-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

/* LEFT — the section nav, scrolls on its own so it stays put while a long
   section scrolls beside it. */
.cm-editor-nav-pane {
    flex: 0 0 160px;
    max-width: 160px;
    min-height: 0;
    padding: 16px 0 20px 22px;
    overflow-y: auto;
}

/* The section dropdown replaces this nav below the breakpoint. */
.cm-editor-nav-select {
    display: none;
}

/* Turn the shared horizontal tab strip into a vertical list: one entry per row,
   each separated by a divider, the selected one marked by the strip's existing
   green underline (.tab-nav li.active > a::after). */
.cm-editor-nav-pane .cm-editor-tab-nav {
    white-space: normal;
    overflow: visible;
    box-shadow: none;
}

.cm-editor-nav-pane .cm-editor-tab-nav > li {
    display: block;
    width: 100%;
}

.cm-editor-nav-pane .cm-editor-tab-nav > li > a {
    display: block;
    padding: 11px 12px 11px 0;
    border-bottom: 1px solid var(--cm-lines-color);
    /* In a narrow column the entries read as section headings, not as a compact
       strip of tabs: sentence case, and free to wrap. */
    text-transform: none;
    font-size: 15px;
    white-space: normal;
}

.cm-editor-nav-pane .cm-editor-tab-nav > li.active > a {
    color: var(--cm-font-color);
    font-weight: 600;
}

/* RIGHT — the selected section, fills the remaining width. */
.cm-editor-content-pane {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 26px 20px;
}

/* FOOTER — the panel's third flex row, so Cancel/Save stay put while the
   section scrolls. Same values as `.cm-action-modal .cm-modal-foot`: this bar is
   built by `action-modal/footer`, so it should read identically to the
   order-overview one. Scoped to this layout — no other `modal-box-fixed-right`
   passes a :footer, and the base rules stay untouched. */
.modal-dialog.from-right:has(.cm-editor-nav-layout) .cm-modal-foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--cm-lines-color);
    background-color: var(--cm-white);
    padding: 14px 20px;
}

/* CAT-1219: section heading inside a merged section (Documents = Notes+Files,
   Dietary = Allergens+Diets). Keeps it clear which sub-section is which. */
.cm-editor-content-pane .customer-editor-merged-section-title {
    margin: 8px 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cm-font-color);
}

/* --- Narrow screens: a fixed nav column beside the content leaves too little of
   either, so the panes stack and the nav becomes a dropdown. A horizontal strip
   was the earlier fallback, but at this width it pushes the later sections off
   the right-hand edge, where they read as if they don't exist. --- */
@media screen and (max-width: 768px) {
    .modal-body:has(.cm-editor-nav-layout) {
        overflow-y: auto;
    }
    /* Give the title the header's full width: at this size it wraps to four
       lines around the save button. Dropping the button here costs nothing —
       the pinned footer carries the same action a thumb's reach away. */
    .customer-editor-title-save {
        display: none;
    }
    .cm-editor-nav-layout {
        flex-direction: column;
    }
    .cm-editor-nav-pane {
        flex: 0 0 auto;
        max-width: none;
        padding: 14px 12px 0;
        overflow: visible;
    }
    /* The list and the dropdown are the same sections; show exactly one. */
    .cm-editor-nav-pane .cm-editor-tab-nav {
        display: none;
    }
    .cm-editor-nav-select {
        display: block;
    }
    .cm-editor-content-pane {
        overflow: visible;
        padding: 16px 12px 20px;
    }
    /* Reflow any two-column <table> form inside the section (the classic
       customer-table, used for a company's sub-contacts) so nothing falls off a
       narrow screen. A table won't shrink below its intrinsic width, so the
       input column gets pushed past the viewport and is clipped. Collapse it to
       a stacked block layout: the label sits above its input, and every field
       spans the pane width and wraps. Scoped to the content pane so the classic
       editor (every other tenant) is untouched. */
    .cm-editor-content-pane table.table,
    .cm-editor-content-pane table.table > tbody,
    .cm-editor-content-pane table.table > tbody > tr {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .cm-editor-content-pane 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. */
    .cm-editor-content-pane 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. */
    .cm-editor-content-pane input,
    .cm-editor-content-pane select,
    .cm-editor-content-pane textarea,
    .cm-editor-content-pane .form-control,
    .cm-editor-content-pane .row {
        max-width: 100%;
    }
    /* Flex field groups (salutation + first/last name, spouse, SEPA actions…)
       wrap onto the next line instead of overflowing horizontally. */
    .cm-editor-content-pane .flex {
        flex-wrap: wrap;
    }
}

/* ===========================================================================
   CAT-1220 — General pane re-bucketed into 4 collapsible cards (redesign,
   gated per-tenant). The cards themselves are plain `expandable-card`s now, so
   only the field layout inside them lives here — label above control. Scoped to
   .customer-editor-cards so no other screen is affected.
   =========================================================================== */

.customer-editor-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The notes panel indents its own body by 30px, which suits the classic Notes
   tab. In the redesign it sits under a section title that has no such indent —
   and beside the Files panel, which has none either — so the body hung to the
   right of its own heading. Scoped to the notes panel so nothing else that uses
   the padding utility is touched. */
.cm-editor-content-pane .customer-notes-panel > .p-l-30.p-r-30 {
    /* !important because the p-l-30 / p-r-30 utilities are themselves
       !important (app.1.min.css), so specificity alone cannot win. */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Panels carry their own vertical margins from the days they were stacked in a
   column. In a pane they only push the first card down by an amount that
   differs per panel, which is what makes one tab look misaligned against the
   next. The pane owns the spacing; its first child starts at the top. */
.cm-editor-content-pane > *:first-child,
.cm-editor-content-pane > *:first-child > *:first-child,
.customer-editor-cards > .m-t-20,
.customer-editor-cards > .m-b-20 {
    margin-top: 0;
}

/* Inside its card the pipeline panel's own heading would repeat the card title,
   and its top margin doubles the card's padding. The classic editor's Pipeline
   tab has no card, so it keeps both. */
.cm-editor-content-pane .card-body .pipeline-editor-panel {
    margin-top: 0;
}

.cm-editor-content-pane .card-body .pipeline-editor-panel > h5 {
    display: none;
}

/* Field layout inside the re-bucketed General cards: label above control. */
.rb-field {
    padding: 12px 0;
    border-bottom: 1px solid var(--cm-lines-color);
}

.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;
}

/* Hint under a datagrid header filter that is too short to search on
   (see cs2.panels.invoices.handlers/search-min-chars). */
.table-header-filter .header-filter-hint,
.header-filter-hint {
    display: block;
    margin-top: 4px;
    line-height: 1.3;
    color: #888;
    font-style: italic;
}

/* ---------------------------------------------------------------------------
   Quotes list
   --------------------------------------------------------------------------- */
.quotes-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Status reads as a badge rather than a word in a column of words, so a run of
   rows can be scanned by colour. */

.quote-status-sent     { background: var(--cm-status-reminded-bg); color: var(--cm-status-reminded); }
.quote-status-accepted { background: #d8efdd; color: #2c7a44; }
.quote-status-concept  { background: #eceff1; color: #6a747c; }
/* Filed, not failed — a quote nobody answered is closed rather than deleted, so
   it reads as settled-and-done rather than as an error. */
.quote-status-declined { background: #f2e6e6; color: #8f5252; }
/* A quote sent and unanswered for a fortnight is the one worth chasing — the
   whole point of the column. */
.quote-stale {
    color: var(--cm-orange, #e8833a);
    font-weight: 600;
}
/* Whether the customer ever opened the quote. Never-opened is the cue that
   earns a nudge, so it is the one that carries colour. */
.quote-unopened {
    color: var(--cm-orange, #e8833a);
    font-weight: 600;
    white-space: nowrap;
}
.quote-opened {
    white-space: nowrap;
}
.quote-opened .text-muted {
    color: #999;
}

/* View tabs. A filter shortcut strip, not page navigation — styled flat so it
   reads as part of the table rather than competing with the card header. */
.cm-view-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--cm-lines-color, #e0e0e0);
    margin-bottom: 12px;
}
.cm-view-tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    font-size: 0.85rem;
    color: #777;
    cursor: pointer;
}
.cm-view-tab:hover {
    color: #333;
}
/* `--cm-primary-color` is not a token this app defines, so this rendered its
   fallback: an off-brand blue. The active tab takes the same dark green as the
   count pill it sits beside. */
.cm-view-tab.is-active {
    color: var(--cm-dark-green);
    border-bottom-color: var(--cm-dark-green);
    font-weight: 600;
}
/* Secondary to the label — the tab is the thing you click, the count only
   tells you how much is behind it. */
.cm-view-tab-count {
    margin-left: 6px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--cm-table-heading-color);
    /* A pill, so the number reads as a badge on the tab rather than as a second
       word in its label. min-width keeps 1- and 4-digit counts the same shape.

       Filled with a neutral grey, not `--cm-table-heading-bg-color`: the strip
       sits on a white card, and that token is ~3% off white — a pill nobody can
       see. */
    display: inline-block;
    min-width: 1.9em;
    padding: 1px 7px;
    border-radius: 999px;
    background-color: var(--cm-neutral-gray);
    text-align: center;
    line-height: 1.5;
}

/* The active tab's pill fills rather than fading: on the one tab that already
   carries the most weight in the strip, a paler count reads as disabled. */
.cm-view-tab.is-active .cm-view-tab-count {
    background-color: var(--cm-dark-green, #133C41);
    color: var(--cm-background-color, #fff);
    opacity: 1;
}

/* Sits under the tab strip and narrows the list by issue date. Inline and
   compact — it qualifies the open tab rather than filtering a column, so it
   must not read as another header filter row. */
/* The row of list-scoping filters under the tab strip. Wraps on narrow screens
   rather than squeezing the selects. */
.invoice-list-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    /* left margin matches .cm-view-tab's padding, so the row lines up with the
       tab labels it qualifies rather than with the strip's edge */
    margin: 0 0 12px 14px;
}

/* Period and brand are invoices' SCOPE, and they ride the toolbar row like
   orders' date range. There they are one line among the other controls, not a
   block under the tabs: no wrapping, no bottom margin, and the same 26px band
   as the icons beside them. */
.dg-toolbar-slots .invoice-list-filters {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
}
.dg-toolbar-slots .invoice-list-filters label {
    display: none;
}
.dg-toolbar-slots .invoice-list-filters select,
.dg-toolbar-slots .invoice-amount-filter {
    height: 26px !important;
    font-size: 13px;
    padding-top: 0;
    padding-bottom: 0;
}
.dg-toolbar-slots .invoice-amount-filter {
    width: 120px;
}

.invoice-period-filter,
.invoice-brand-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}
.invoice-period-filter label,
.invoice-brand-filter label {
    margin: 0;
    font-size: 0.85rem;
    color: #777;
    white-space: nowrap;
}
.invoice-period-filter .select,
.invoice-brand-filter .select {
    width: auto;
    min-width: 190px;
}

/* Appears only with a selection, between the tabs and the grid, so the row it
   acts on stays visible. */
.quotes-bulk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #f5f8fb;
    border: 1px solid #dbe9f5;
    border-radius: 4px;
}
.quotes-bulk-count {
    font-weight: 600;
    white-space: nowrap;
}
.quotes-bulk-select {
    width: auto;
    min-width: 200px;
}

/* Matches the invoice overview's payment-status header filter. */
.quote-status-filter .summary {
    display: flex;
    align-items: center;
    font-weight: 400;
}
.quote-status-filter .checkbox-wrap {
    position: absolute;
    z-index: 20;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    padding: 10px 14px;
    min-width: 190px;
}

/* Shiftbase export block in the order staff card. The export writes to another
   system, so it carries a label, a state and a reason when unavailable — an
   unlabelled icon in the header's action row carries none of those. */
.planning-export {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: var(--cm-table-heading-bg-color, #f7f9f9);
}
.planning-export__body {
    flex: 1 1 auto;
    min-width: 0;
}
.planning-export__status {
    font-weight: 600;
}
.planning-export__check {
    color: #4caf50;
    margin-right: 4px;
}
.planning-export__detail {
    margin: 2px 0 0;
    color: #6a747c;
}
.planning-export .btn {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Datagrid toolbar — the filter and view-options icons that sit at the right
   end of a grid's header band. Paired with re-datagrid.toolbar.

   Scoped entirely under .dg-*. The existing .view-options-wrap is a DIFFERENT
   control — the list/board/grouped view-mode switcher on the customers, orders
   and products overviews — so this pattern keeps its own class namespace rather
   than extending that one.
   --------------------------------------------------------------------------- */

/* The positioning context for the toolbar. It wraps .table-responsive rather
   than living inside it: that element scrolls horizontally, and a toolbar
   within it would slide out of view along with the columns.

   The 20px side inset stops the row separators running into the edge of the
   card the grid sits in, and lines the table up with the list/board tab strip
   above it (`.view-options-wrap`, same 20px) — so the tabs, the saved-view tabs
   and the table all share one left edge instead of three.

   Scoped to .dg-grid-wrap on purpose: only grids that opted into the toolbar
   get this, so the many small grids elsewhere keep the edge-to-edge look they
   were built for. */
.dg-grid-wrap {
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
}

/* Pinned to the top-right of the wrapper, which starts at the header band. The
   buttons overlay the band rather than occupying a column, so column titles
   must stay short — the right-most one is the only one they can collide with. */
.dg-toolbar {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Matches the shorter of the two rows the toolbar can float over — the
       group title row (~39px) rather than the header band (~48px). At 48 the
       32px buttons bottomed out exactly on the group row's border. */
    height: var(--cm-datagrid-header-height, 40px);
    padding-right: 14px;
    pointer-events: none; /* the band stays clickable between the buttons */
}

/* The toolbar overlays the header band rather than occupying a column, so the
   band must be at least as tall as the toolbar or the 32px buttons overhang the
   first data row. Driven by the same var as `.dg-toolbar`, so the two cannot
   drift apart. On a table cell `height` is a minimum, which is what is wanted:
   a band with taller content still grows.

   Scoped to `.has-toolbar`: a grid whose toolbar rides the saved-view tab strip
   has nothing floating over its header, so it must not pay for the room. */
.dg-grid-wrap.has-toolbar thead th {
    height: var(--cm-datagrid-header-height, 40px);
}

/* ...and the last header cell has to keep clear of it horizontally, or a long
   right-most column title reads underneath the buttons. Three 32px buttons plus
   their gaps and the bar's own padding. Only the HEADER reserves the space; the
   cells below still use the full width.

   The theme sets `padding-right: 30px !important` on `.table > thead > tr >
   th:last-child`. `!important` alone does not win that — between two important
   declarations specificity still decides — so this selector has to carry more
   element steps than the theme's. */
.dg-grid-wrap.has-toolbar table thead tr th:last-child {
    padding-right: 126px !important;
}

.dg-toolbar-button {
    pointer-events: auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--cm-lines-color, #e0e5e5);
    border-radius: 50%;
    background: #fff;
    color: var(--cm-text-color, #2d3b3b);
    cursor: pointer;
}

.dg-toolbar-button:hover,
.dg-toolbar-button.active {
    background: var(--cm-table-heading-bg-color, #f7f9f9);
}

.dg-toolbar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--cm-primary-color, #00966c);
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

/* --- View options panel --------------------------------------------------- */

.dg-view-options-section + .dg-view-options-section {
    margin-top: 24px;
}

.dg-view-options-section h4 {
    margin: 0 0 8px;
}

.dg-view-options-bulk {
    margin-bottom: 12px;
}

.dg-view-options-bulk a {
    cursor: pointer;
}

.dg-view-options-column {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--cm-lines-color, #f0f0f0);
}

/* The available rows use the app's standard `.checkbox > label > input +
   .input-helper`, styled globally — only the row spacing lives here. */
.dg-view-options-column .checkbox {
    margin: 0;
    flex: 1 1 auto;
}

/* A column name reads the same whether it is already shown or still available.
   Only the available rows carry a <label>, which the theme sets heavier than
   the `.dg-view-options-name` span the shown rows use. */
.dg-view-options-column .checkbox label {
    font-weight: inherit;
}

.dg-view-options-move {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

/* --- Datagrid group rows -------------------------------------------------- */
/* Paired with re-datagrid.grouping. A group header is a real <tr> inside the
   same <tbody> as the rows it heads, so the table keeps one column grid and the
   groups read as part of the dataset rather than as separate tables. */

/* The group title is a divider, not a band: giving it the same green as the
   column header directly beneath merged the two into one block and the header
   stopped reading as a header. White with a rule above separates the groups and
   leaves the green band to mean one thing.

   Same 1px rule as the tab strip above, so the page uses one divider weight
   rather than two. */
.dg-group-row {
    cursor: pointer;
    background: #fff;
    border-top: 1px solid var(--cm-lines-color, #d2d7d0);
}

/* The tab strip immediately above already draws this line — a second one here
   reads as a double rule. */
.dg-grid-wrap tbody tr.dg-group-row:first-child {
    border-top: none;
}

/* No trailing rule under the last row: the table should end, not be underlined. */
.dg-grid-wrap tbody tr:last-child > td,
.dg-grid-wrap tbody tr:last-child > th {
    border-bottom: none;
}

.dg-group-row:hover {
    background: var(--cm-table-heading-bg-color, #f7f9f9);
}

/* The toolbar floats over this row's right end, so keep the count clear of it. */
.dg-group-row .dg-group-cell {
    padding-right: 120px !important;
}

/* Medium, not bold: the group title only has to outrank the rows under it, and
   the rows are 400. Bold made a collapsed list read as a wall of headings. */
.dg-group-cell {
    padding: 8px 12px !important;
    font-weight: 500;
}

.dg-group-caret {
    display: inline-block;
    width: 18px;
    color: var(--cm-muted-text-color, #6a747c);
}

.dg-group-label {
    margin-right: 8px;
}

/* The same pill the view tabs give their counts, so a count reads the same
   wherever it appears. */
.dg-group-count {
    display: inline-block;
    min-width: 1.9em;
    padding: 1px 7px;
    border-radius: 999px;
    background-color: var(--cm-neutral-gray);
    color: var(--cm-table-heading-color);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

/* --- Datagrid filter builder ---------------------------------------------- */
/* Rows of field / operator / value, ANDed. Paired with
   re-datagrid.filter-builder. The three controls share the row so a long field
   name cannot push the value box out of reach; the value column is the one that
   absorbs the remaining width, since it holds the free text. */

/* Wraps, and the pickers keep a floor: a value control with a large intrinsic
   width (the tag picker) otherwise squeezed the field and operator selects down
   to unreadable slivers rather than taking a line of its own. */
.dg-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

/* All three share the line and shrink together, so the remove button stays
   beside them instead of wrapping to a line of its own. Fixed percentages plus
   a 180px value column overflowed a third-width modal, which is what pushed it
   down. */
.dg-filter-row .dg-filter-field,
.dg-filter-row .dg-filter-op,
.dg-filter-row .dg-filter-value {
    flex: 1 1 0;
    min-width: 0;
}

/* Always its own full line, so the row keeps one shape whether the search
   matched one tag or ninety. */
.dg-filter-row .dg-filter-value.is-block {
    flex: 1 0 100%;
    order: 1;
}

/* ...and the remove button stays up on the field/operator line rather than
   being pushed below the panel. */
.dg-filter-row .dg-filter-remove {
    order: 0;
}

/* The product photo drawer. Capped and centred: the panel keeps its width, the
   image stops growing — bigger is not more legible, it is just further to move
   your eyes. */
.image-box {
    display: flex;
    justify-content: center;
}

.image-box img {
    width: 100%;
    max-width: 720px;
    max-height: 80vh;
    object-fit: contain;
}

/* Multi-value filters: checkboxes, not a native <select multiple>. Capped and
   scrollable so a 12-status list does not push the footer off the panel, but
   tall enough that several options are visible without scrolling. */
.dg-filter-checklist-items {
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid var(--cm-lines-color);
    border-radius: 4px;
    padding: 4px 0;
}

.dg-filter-checklist-search {
    margin-bottom: 6px;
}

/* Only the row padding and hover live here — the checkbox itself is the app's
   standard `.checkbox > label > input + .input-helper`, styled globally. */
.dg-filter-checklist-item {
    padding: 2px 10px;
}

.dg-filter-checklist-item .checkbox {
    margin: 0;
}

.dg-filter-checklist-item:hover {
    background-color: var(--cm-table-heading-bg-color);
}

.dg-filter-checklist-empty {
    margin: 0;
    padding: 8px 10px;
}

/* Type-ahead, not a wall of chips: matches appear only while you type, and the
   chosen tags sit above the box as removable pills. */
.dg-tag-picker-chosen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dg-tag-picker-chosen:not(:empty) {
    margin-bottom: 6px;
}

/* Sits inside the pill, so it inherits the tag's own text colour whatever the
   tag's background happens to be. */
.dg-tag-picker-remove,
.dg-tag-picker-remove:hover,
.dg-tag-picker-remove:focus {
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    margin-left: 6px;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
}

.dg-tag-picker-remove:hover {
    opacity: 1;
}

.dg-tag-picker-results {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
    margin-top: 6px;
}

/* Product filter: the same type-ahead shape as the tag picker, but product
   names are sentences rather than short labels, so the matches stack one per
   line instead of wrapping as chips. */
.dg-product-picker-chosen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dg-product-picker-chosen:not(:empty) {
    margin-bottom: 6px;
}

.dg-product-picker-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    padding: 1px 10px;
    border: 1px solid var(--cm-lines-color);
    border-radius: 6px;
    background-color: #fff;
}

.dg-product-picker-remove,
.dg-product-picker-remove:hover,
.dg-product-picker-remove:focus {
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    margin-left: 6px;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
}

.dg-product-picker-remove:hover {
    opacity: 1;
}

.dg-product-picker-results {
    max-height: 180px;
    overflow-y: auto;
    margin-top: 6px;
    border: 1px solid var(--cm-lines-color);
    border-radius: 4px;
}

.dg-product-picker-result {
    padding: 4px 10px;
    cursor: pointer;
}

.dg-product-picker-result:hover {
    background-color: var(--cm-table-heading-bg-color);
}

.dg-filter-row .dg-filter-remove {
    flex: 0 0 auto;
}

/* A between-filter's two bounds sit side by side inside the value column. */
.dg-filter-range {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dg-filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

/* Shown-columns rows carry no checkbox: the × removes them, and the arrows
   order them. Only the shown set is orderable, so the name takes the space the
   checkbox would have. */
.dg-view-options-name {
    flex: 1 1 auto;
    min-width: 0;
}

.dg-view-options-search {
    margin-bottom: 8px;
}

/* --- Saved views ---------------------------------------------------------- */

/* Tab strip for switching views. Reuses the invoices tab classes so it reads as
   the same control there; the side margins match the list/board strip above and
   the table below, so all three line up. */
.dg-view-tabs {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
}

/* Tabs and toolbar share one row: both are grid-wide controls, and giving the
   toolbar a fixed seat here is what keeps it off the header band, where it
   overlaid the right-most column title. `flex-end` sits the buttons on the same
   baseline as the tabs; the underline is carried by the row so it spans past
   the last tab rather than stopping under it. */
.dg-view-tabs-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--cm-lines-color, #e0e0e0);
}

.dg-view-tabs-row .dg-view-tabs {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    border-bottom: 0;
}

/* Back into normal flow — the absolute placement only makes sense against the
   header band it used to float over. Smaller too: 32px was sized to be legible
   floating over a table header; sitting beside tab labels it only has to match
   their weight. */
.dg-view-tabs-row .dg-toolbar {
    position: static;
    flex: 0 0 auto;
    height: auto;
    gap: 6px;
    padding-right: 0;
    padding-bottom: 6px;
}

.dg-view-tabs-row .dg-toolbar-button {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

.dg-view-tabs-row .dg-toolbar-badge {
    top: -5px;
    right: -5px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    font-size: 9px;
    line-height: 14px;
}

/* Rows in the manage-views panel. Without an explicit row layout the delete
   button wraps under the name. */
.dg-saved-view {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--cm-lines-color, #f0f0f0);
}

.dg-saved-view-name {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dg-saved-view.active .dg-saved-view-name {
    font-weight: 600;
}

.dg-saved-view-badge {
    color: var(--cm-muted-text-color, #6a747c);
}

/* Separates "overwrite the active view" from "save a new one". Both are saves,
   so spacing alone left them reading as one set of controls. */
.dg-save-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: var(--cm-muted-text-color, #6a747c);
}

.dg-save-divider::before,
.dg-save-divider::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid var(--cm-lines-color, #f0f0f0);
}

/* The rename input takes the space the name had, so the confirm/cancel buttons
   stay where the row's other buttons sit and the row does not jump. */
.dg-saved-view-rename {
    flex: 1 1 auto;
    min-width: 0;
}

.dg-saved-view-save {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

/* The control itself is the app's standard `.checkbox > label > input +
   .input-helper`, styled globally — only the row spacing lives here. */
.dg-saved-view-shared .checkbox {
    margin: 0;
}

.dg-saved-view-shared .checkbox label {
    font-weight: 400;
}

/* Column headers repeated inside each open group.
   The band colour sits on the <tr>, matching `.bootgrid-table thead tr` — the
   <th> itself is transparent there, so styling the cell instead produced a
   header that did not read as a band. */
.dg-group-columns {
    background: var(--cm-table-heading-bg-color, #f7f9f9);
}
.dg-group-columns th {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    vertical-align: middle;
    /* Same two rules the table's own header band carries: a label never wraps,
       and the band needs a bottom edge of its own — the first row inside a
       group clears its border-top. */
    white-space: nowrap;
    border-bottom: 1px solid var(--cm-lines-color);
}

/* The filter icon for orders' calendar / monthly / production modes, which have
   no grid to hang the datagrid toolbar on. `.dg-toolbar` is absolutely
   positioned against a grid wrapper by default; here it sits in normal flow. */
.orders-panel-filter {
    display: flex;
    justify-content: flex-end;
    margin: 0 20px 10px;
}
.orders-panel-filter .dg-toolbar {
    position: static;
    height: auto;
    padding-right: 0;
}

/* ---------------------------------------------------------------------------
   Orders scope picker — the mandatory date range, in the panel header.

   A button carrying the range in words, opening a panel with the presets, the
   two bounds and the date-column choice. Replaces the `.filter-macro` select,
   which set a status set AND a relative range from one control; the status
   halves are seeded saved views now.
   --------------------------------------------------------------------------- */
.cm-scope-picker {
    position: relative;
}
.cm-scope-summary {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    background: none;
    border: 1px solid var(--cm-lines-color, #e0e0e0);
    padding: 0 8px;
    border-radius: 4px;
    color: var(--cm-font-color);
    cursor: pointer;
    white-space: nowrap;
    font-size: 13px;
}
.cm-scope-summary:hover {
    background: var(--cm-table-heading-bg-color, #f7f9f9);
}
.cm-scope-summary-label {
    font-variant-numeric: tabular-nums;
}
.cm-scope-panel {
    position: absolute;
    right: 0;
    z-index: 20;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    padding: 14px;
    /* Wide enough for the day row's four cells to hold "Overmorgen" without
       clipping, across the panel's full width. */
    min-width: 480px;
}
.cm-scope-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* The whole-range shortcuts, ruled off below the range being built. */
.cm-scope-jump {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--cm-lines-color);
}

.cm-scope-jump-label {
    font-size: 0.75rem;
    color: var(--cm-mid-gray);
    margin-bottom: 6px;
}
.cm-scope-bounds {
    display: flex;
    gap: 20px;
}
.cm-scope-bound {
    flex: 1 1 0;
    min-width: 0;
}
.cm-scope-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cm-mid-gray);
    margin-bottom: 4px;
}
/* The relative shortcuts under whichever bound is being edited. A matrix
   rather than a list of sentences: the row says which period and the bound
   above says which end, so a cell only has to say `deze`. The old modal spelled
   out "Begin deze week" on all thirteen buttons per bound, which is why it
   needed a full-width modal to hold it. */
.cm-quick-dates {
    margin-top: 10px;
}

.cm-quick-dates-days {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

/* The end the next shortcut click will set. A border rather than a focus ring:
   it has to stay readable while the pointer is down in the grid, and the field
   is not focused then.

   Yellow, and !important on both. `--cm-green` is rgb(19,60,65) — the SAME
   colour these inputs already carry, so tinting the border with it marked
   nothing at all, and the box-shadow lost to a `.form-control` rule. A marker
   that has to survive an existing border and an existing shadow cannot be a
   polite one. */
.cm-scope-bound.is-target input.date-picker-native {
    border-color: var(--cm-yellow) !important;
    box-shadow: 0 0 0 3px rgba(252, 178, 20, 0.25) !important;
}

/* The words, because colour says "special", not "your next click lands here". */
.cm-scope-next-click {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background-color: var(--cm-yellow);
    color: var(--cm-font-color);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: none;
    vertical-align: middle;
}

/* Unit last, so the row reads as one phrase: `vorige | deze | volgende week`. */
.cm-quick-dates-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 3.6rem;
    gap: 4px;
    align-items: center;
    margin-top: 4px;
}

.cm-quick-dates-label {
    font-size: 0.75rem;
    color: var(--cm-mid-gray);
    padding-left: 2px;
}

/* The grid cells size themselves; the shared rule's horizontal padding would
   push three of them past the column and clip the labels. */
.cm-quick-dates .quick-date-btn {
    padding: 2px 4px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-scope-date-type {
    margin-top: 12px;
}
.cm-scope-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* What is narrowing the grid, in words, between the toolbar and the rows.
   Replaces the old "Toon N opdrachten" line — the count is per-tab now, and
   this says the thing nothing else does: which filters are on. The toolbar
   badge above it can only count them.

   Wraps rather than truncates. The sentence grows with the number of active
   filters, and eliding it would hide exactly the clause the reader is looking
   for; two lines of 0.8rem text cost less than a filter nobody can find. */
.dg-filter-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 8px;
    /* Left-aligned with the view tabs above it, not with the grid's outer box:
       the line belongs to that chrome, and a few pixels adrift of the tab it
       sits under reads as a stray element. */
    margin: 0 0 10px 24px;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--cm-mid-gray);
}
.dg-filter-summary-icon {
    /* Baseline alignment puts the glyph a shade high against the text. */
    position: relative;
    top: 1px;
    margin-right: -3px;
}
.dg-filter-summary-text {
    /* Shrinkable so the reset stays on the first line while the sentence wraps
       beneath it — the way out must not scroll off with the explanation. */
    min-width: 0;
}
/* A link, not a button: the row is a sentence, and a filled control in it would
   outweigh the primary actions above. Underlined on hover only, so it reads as
   quiet until looked for. */
.dg-filter-summary-reset {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
    color: var(--cm-green);
    cursor: pointer;
}
.dg-filter-summary-reset:hover,
.dg-filter-summary-reset:focus {
    text-decoration: underline;
}

/* The search box on the datagrid's toolbar row. Wide enough for its placeholder
   — on an operational list the box is the most-used control, so what it searches
   has to be readable before you click it. */
.dg-toolbar-search {
    display: flex;
    align-items: center;
}
.dg-toolbar-search .search-input,
.dg-toolbar-search .search-input input {
    min-width: 190px;
}
.dg-toolbar-search .search-input input {
    height: 26px !important;
    font-size: 13px;
}
/* The magnifier is absolutely positioned against a full-height input; in this
   26px band a fixed `top` leaves it sitting low. Centre it instead of guessing
   an offset, so it stays centred if the band ever changes height. */
.dg-toolbar-search .input-icon {
    top: 0 !important;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 1rem;
}
.dg-toolbar-slots {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding-bottom: 6px;
}
.dg-toolbar-slots .dg-toolbar {
    padding-bottom: 0;
}
/* The tab strip yields before the chrome does: tabs can scroll or wrap, but the
   date range and the search box must stay legible — they are what the list is
   operated with. */
/* The tab strip never wraps and never scrolls: what does not fit is measured out
   into the overflow menu instead. `overflow` stays visible so the menu's panel
   is not clipped by its own strip. */
.dg-view-tabs-row .dg-view-tabs {
    min-width: 0;
    flex-wrap: nowrap;
    overflow: visible;
}
/* Tabs keep their natural width. As shrinkable flex items they compress to fit,
   which makes them LOOK like they fit while the text is clipped — and the
   overflow measurement, reading those compressed widths, agrees and rolls
   nothing away. */
.dg-view-tabs-row .cm-view-tab {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Tabs that did not fit on the row. The Firefox bookmarks-toolbar behaviour:
   keep what fits and roll the rest up, rather than wrapping to a second line —
   wrapping pushes the table down, and it does so at a different view count on
   every screen width. */
.dg-view-tabs-more {
    position: relative;
    flex: 0 0 auto;
}
.dg-view-tabs-more-btn {
    font-variant-numeric: tabular-nums;
}
.dg-view-tabs-more-panel {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 180px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--cm-lines-color, #e0e0e0);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.dg-view-tabs-more-panel .cm-view-tab {
    text-align: left;
    border-bottom: 0;
}

/* ---------------------------------------------------------------------------
   The grid's toolbar row on a phone.

   One line cannot hold the tab strip AND the scope picker AND the search box
   AND three icons — the chrome alone is close to the whole 500px, so on one row
   the tabs render straight over it. Stack instead: tabs keep the top line and
   the controls take the one below, full width.

   The overflow menu still does its job on the tab line; it just has the whole
   width to work with rather than the ~40px left over.
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 500px) {
    .dg-view-tabs-row {
        flex-wrap: wrap;
        margin-left: 10px;
        margin-right: 10px;
    }
    .dg-view-tabs-row .dg-view-tabs {
        flex: 1 1 100%;
    }
    .dg-toolbar-slots {
        flex: 1 1 100%;
        padding-bottom: 8px;
        /* Without this the row cannot break, so the `flex-basis: 100%` below
           only makes the scope button GROW rather than take a line of its own —
           and the search box, last in a row that cannot wrap, is squeezed to an
           icon. The intent below was always two lines; this is what allows it. */
        flex-wrap: wrap;
        row-gap: 8px;
    }
    /* The search box takes the room the icons and the scope button leave, rather
       than holding a 190px floor that forces the row wider than the screen. */
    .dg-toolbar-search {
        flex: 1 1 auto;
        min-width: 0;
    }
    .dg-toolbar-search .search-input,
    .dg-toolbar-search .search-input input {
        min-width: 0;
        width: 100%;
    }
    /* The date range is the widest single control here. Its own line, so it can
       say what it says without squeezing the search box out. */
    .cm-scope-picker {
        flex: 1 1 100%;
    }
    .cm-scope-summary {
        width: 100%;
        justify-content: flex-start;
    }
    /* Pinned to the VIEWPORT, not to the button. Anchored `right: 0` against a
       card that is itself inset, a panel this wide runs off the left edge —
       half of "Van" and the whole first column of shortcuts end up off-screen
       with no way to scroll to them. `fixed` with both insets set is the only
       positioning that cannot leave the screen whatever the trigger is doing.
       Tall, too: on a phone the panel is most of the height, so it scrolls
       itself rather than growing past the bottom. */
    .cm-scope-panel {
        position: fixed;
        left: 8px;
        right: 8px;
        min-width: 0;
        width: auto;
        max-height: 80vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Conversion dashboard — the revenue identity below the grid. Was four
   column-spanning <tfoot> rows; a grid has no way to express those. */
.conversion-reconciliation {
    display: table;
    margin-left: auto;
    font-style: italic;
}

.conversion-reconciliation > div {
    display: table-row;
}

.conversion-reconciliation dt,
.conversion-reconciliation dd {
    display: table-cell;
    padding: 2px 0 2px 20px;
}

.conversion-reconciliation dd {
    text-align: right;
    white-space: nowrap;
}

/* Ingredient packaging card ------------------------------------------------
   Three nested things live in this card: the container you order, the pack
   inside it, and how that pack is used in a recipe. Grouping them that way puts
   the container price directly above the unit price derived from it, so the
   arithmetic is visible instead of spread over four rows. */
.cm-packaging-group + .cm-packaging-group {
    margin-top: 24px;
}

.cm-packaging-group-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cm-mid-gray);
    margin: 0 0 8px;
}

/* Restates the card as one equation, so a wrong pack size is visible as a
   number that does not match the product in the operator's hand. */
.cm-packaging-summary {
    margin-top: 24px;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--cm-very-light-gray);
    border: 1px solid var(--cm-lines-color);
    color: var(--cm-dark-gray);
}

.cm-field-hint {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--cm-mid-gray);
}

/* Recipe cost breakdown ----------------------------------------------------
   Pie plus list, side by side: the pie carries the shape of the cost, the list
   carries what each slice is and what it costs. Neither is sufficient alone --
   a pie cannot be read for amounts, and a list does not show that one
   ingredient is most of the dish. */
.cm-cost-breakdown__body {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.cm-cost-breakdown__chart {
    flex: 0 0 220px;
    width: 220px;
}

.cm-cost-breakdown__legend {
    flex: 1 1 260px;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.cm-cost-breakdown__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--cm-table-line-color);
}

.cm-cost-breakdown__row:last-child {
    border-bottom: 0;
}

.cm-cost-breakdown__swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    /* Baseline-aligned text next to a block: nudge the block onto the text. */
    transform: translateY(1px);
}

.cm-cost-breakdown__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-cost-breakdown__amount {
    flex: 0 0 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cm-cost-breakdown__share {
    flex: 0 0 44px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--cm-mid-gray);
    font-size: 0.85rem;
}

/* "What moved" panel --------------------------------------------------------
   One row per recipe line whose contribution changed over the window. The
   money is the point, not the supplier's percentage: a 20% rise on a garnish
   and the same rise on the protein are different news. */
.cm-cost-movers__periods {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.cm-cost-period {
    border: 1px solid var(--cm-lines-color);
    background: transparent;
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 0.8rem;
    color: var(--cm-mid-gray);
    cursor: pointer;
}

.cm-cost-period.is-active {
    background: var(--cm-green);
    border-color: var(--cm-green);
    color: var(--cm-white);
}

.cm-cost-movers {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cm-cost-mover {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--cm-table-line-color);
}

.cm-cost-mover:last-child {
    border-bottom: 0;
}

.cm-cost-mover__name {
    flex: 1 1 auto;
    min-width: 0;
}

.cm-cost-mover__from,
.cm-cost-mover__to {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.cm-cost-mover__from {
    color: var(--cm-mid-gray);
}

.cm-cost-mover__arrow {
    flex: 0 0 auto;
    color: var(--cm-mid-gray);
}

.cm-cost-mover__pct {
    flex: 0 0 62px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Cost-intelligence upsell — shown in place of the panel below Main Course. */
.cm-cost-intel-upsell h4 {
    margin-top: 0;
}

.cm-cost-intel-upsell p {
    max-width: 62ch;
    color: var(--cm-dark-gray);
}

/* The three panels are cards inside a card. Drop their outer chrome so the
   group reads as one thing with three sections rather than a stack of boxes. */
.cost-intel .card {
    box-shadow: none;
    border: 1px solid var(--cm-lines-color);
    margin-bottom: 12px;
}

.cost-intel .card:last-child {
    margin-bottom: 0;
}

/* The formula behind the suggested price. Monospaced so the two lines line up
   as an equation rather than as prose. */
.cm-advice-formula__rule {
    white-space: pre-line;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
}

.cm-advice-formula__sum {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
}

/* The location card shows only a lead-in of the description: the stored value is
   Quill HTML averaging a couple of thousand characters, so the full text lives
   in the location popup, which the truncated preview opens. */
.pmo-contact li.location-description {
    align-items: flex-start;
}

.location-description-preview {
    cursor: pointer;
}

/* Calm column headers: smaller, uppercase and muted, so the labels name the
   columns without competing with the rows for attention. The same treatment
   covers `.dg-group-columns`, the header row repeated inside each open group —
   it is built from the same cells, so it has to read the same.

   The two overrides are not decoration. `th` is bold in the browser's own
   stylesheet, and the sortable header is an <a>, so its label takes the link
   colour — left alone, uppercase would land bold and dark-teal, i.e. louder
   than what it replaced. */
.bootgrid-table > thead > tr > th,
.bootgrid-table > tbody > tr.dg-group-columns > th {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cm-table-heading-color);
}

.bootgrid-table > thead > tr > th .column-header-anchor,
.bootgrid-table > thead > tr > th .text,
.bootgrid-table > tbody > tr.dg-group-columns > th .column-header-anchor,
.bootgrid-table > tbody > tr.dg-group-columns > th .text {
    color: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

/* A cell states its value on one line. A column squeezed below its natural
   width otherwise breaks mid-value — `Food / drinks` over three lines — which
   is harder to scan than either a truncated value or a sideways scroll, and it
   sets the height of every other cell in the row. */
.bootgrid-table > tbody > tr > td {
    white-space: nowrap;
}

/* Truncation needs a cap to truncate against, and `overflow: hidden` clips
   anything a cell deliberately pops out of itself. Both are therefore separate
   from the nowrap above, and both are lifted for the cells that own a popover,
   a control, or an inline editor. */
.bootgrid-table > tbody > tr > td {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bootgrid-table > tbody > tr > td.check,
.bootgrid-table > tbody > tr > td.commands,
.bootgrid-table > tbody > tr > td[class*="col-tags"],
.bootgrid-table > tbody > tr > td[class*="col-product-tags"],
.bootgrid-table > tbody > tr.editing > td,
/* A tooltip that is not portalled renders inside its cell, so clipping the cell
   clips the tooltip. Such a cell holds an icon rather than a long value, so it
   has nothing to truncate and loses nothing by opting out. */
.bootgrid-table > tbody > tr > td:has(.popup-tooltip) {
    max-width: none;
    overflow: visible;
}

/* ---------------------------------------------------------------------------
   Fitted columns  (re-datagrid.column-fit)

   `auto` layout sizes a column to its content, and the nowrap + max-width above
   make that content width the column's MINIMUM. So the ellipsis those rules set
   up never engages below 320px: the table cannot compress, and it scrolls
   sideways instead. `fixed` layout is what lets a column be narrower than its
   text, which is what turns those two rules into the truncation they were
   written to be.

   Applied only when the grid measured itself as overflowing — a table that
   already fits gets neither this class nor a <colgroup>, so nothing about a
   currently-fitting grid changes. The widths come from the colgroup; `width`
   here only stops `fixed` layout from sizing to the first row.
   --------------------------------------------------------------------------- */
.bootgrid-table.dg-fitted {
    table-layout: fixed;
    width: 100%;
}

/* Under `fixed` a cell no longer grows to its content, so anything that opted
   OUT of clipping now spills over its neighbour instead of stretching the
   column. The opt-outs still stand for what they were for — a popover or an
   inline editor must be able to leave its cell VERTICALLY — so the clip moves
   inward to a wrapper around the cell's own content rather than being put back
   on the cell. */
.bootgrid-table.dg-fitted > tbody > tr > td {
    max-width: none;
}

.bootgrid-table.dg-fitted > tbody > tr > td > .dg-cell,
.bootgrid-table.dg-fitted > tbody > tr > td > a,
.bootgrid-table.dg-fitted > tbody > tr > td > span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* A header is nowrap by design (see the note on the padding rule above), which
   under `fixed` means a long label runs across the column beside it. Clipped
   rather than wrapped: wrapping is what made the band's height depend on the
   narrowest column, and once columns are sized there is no width to be won by
   letting it wrap. */
.bootgrid-table.dg-fitted > thead > tr > th,
.bootgrid-table.dg-fitted > tbody > tr.dg-group-columns > th {
    overflow: hidden;
}

.bootgrid-table.dg-fitted > thead > tr > th .text,
.bootgrid-table.dg-fitted > tbody > tr.dg-group-columns > th .text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* --- Totals pane -----------------------------------------------------------
   The summary that closes the orders and invoices list pages. Both render
   cs2.components.widgets.totals-pane, so there is one rule set here, not one
   per panel.

   It is a white card on the page, not a tinted block: the previous version
   painted --cm-background-color onto every cell with !important (to beat
   Bootstrap's `table { background-color: #fff }`) while leaving the wrapper
   transparent, which framed a green slab in a white gutter. Transparent cells
   over a card background need no !important at all.

   Numbers carry the meaning here, so they get tabular figures and a shared
   right edge; the row labels are the only left-aligned column. */

/* Surface, radius and elevation all come from `.card` (see the markup) — this
   rule owns only where the pane sits, and clips to the card's corners.

   The clip is what rounds the BOTTOM of the pane. The last row's rule draws a
   full-bleed background and border to the pane's edges; a border-radius on an
   ancestor does not clip a descendant unless that ancestor establishes it, so
   without this the table's square bottom corners sit over the card's rounded
   ones. Safe here because the pane pops nothing out of itself — its widest
   content scrolls inside `.cm-totals__scroll`. */
.cm-totals {
    margin-top: 20px;
    overflow: hidden;
}

/* One rhythm down the page: the list card, then each totals pane, all spaced
   the same. The two panes used to sit 8px apart so they read as a single pair,
   which worked while they were flat outlined boxes inside one visual group.
   As separate raised cards that gap crowds them and overlaps their shadows, so
   the pairing now comes from their titles rather than from proximity. */
.cm-totals + .cm-totals {
    margin-top: 20px;
}

.cm-totals__title {
    margin: 0;
    /* Same horizontal padding as a cell, so the title, the column heading and
       the row labels all start on one vertical line. */
    padding: 11px 18px;
    border-bottom: 1px solid var(--cm-table-line-color);
}

/* The column count grows with the number of non-empty statuses. Scroll the
   table, never the card. */
.cm-totals__scroll {
    overflow-x: auto;
}

.cm-totals__table {
    width: 100%;
    border-collapse: collapse;
}

.cm-totals__table th,
.cm-totals__table td {
    padding: 10px 18px;
    text-align: right;
    /* Labels used to wrap onto two lines, which gave the two panes different
       row heights. Overflow is handled by scrolling instead. */
    white-space: nowrap;
    border: 0;
    background-color: transparent;
}

/* The header band. Typography belongs to what sits inside the cell — a
   .cm-totals__head or a status pill — not to the cell. */
.cm-totals__table thead th {
    background-color: var(--cm-table-heading-bg-color);
    border-bottom: 1px solid var(--cm-lines-color);
}

/* The one left-aligned column. Pinned, so the labels stay readable while a
   wide table scrolls under them — it needs an opaque background of its own to
   cover the cells passing beneath.

   Scoped through .cm-totals__table on purpose: the shared th/td rule above is
   (0,1,1), so a bare .cm-totals__label would lose to it and the labels would
   stay right-aligned and transparent. Colour and weight are deliberately left
   to the row rules below, so a label matches the emphasis of its own row. */
.cm-totals__table .cm-totals__label {
    position: sticky;
    left: 0;
    text-align: left;
    background-color: var(--cm-white);
}

.cm-totals__table thead .cm-totals__label {
    background-color: var(--cm-table-heading-bg-color);
}

/* fonts.css tints any tbody row on hover. This pane is a summary, not a
   clickable list, and the tint stopped at the sticky label — which has an
   opaque background of its own — so a hovered row visibly split in two. */
.cm-totals__table tbody tr:hover td {
    background-color: transparent;
}

/* Digits only line up column-wise at a fixed width. */
.cm-totals__table td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Incl. VAT is the figure people act on; excl. VAT is context. The old styling
   had this the other way round. */
.cm-totals__row--excl th,
.cm-totals__row--excl td {
    color: var(--cm-mid-gray);
}

.cm-totals__row--incl th,
.cm-totals__row--incl td {
    color: var(--cm-font-color);
    border-top: 1px solid var(--cm-table-line-color);
}

/* fonts.css carries two global rules that reach into any thead and have to be
   answered here, or the header row silently stops lining up with the figures
   under it:

     table thead tr th   { padding: 5px 10px !important; }
     table thead th > span { display: flex; }

   The first can only be beaten by !important. The second turns a header's span
   into a full-width flex box, which parks its content on the left however the
   cell is aligned — so headers must be put back to inline-block and left to
   the cell's own text-align. */
.cm-totals__table thead th {
    padding: 10px 18px !important;
}

/* A status column is headed by the same pill the list above it uses, so the two
   read as one vocabulary. It sits right, over its own column of figures. */
.cm-totals__pill,
.cm-totals__head {
    display: inline-block;
}

/* Plain-text column headings and the pane title take the datagrid's heading
   treatment, so a heading looks like a heading everywhere in the app. Applied
   by class rather than to `thead th`, because a status pill lives in a th too
   and keeps its own casing and colour. */
.cm-totals__head,
.cm-totals__title {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cm-table-heading-color);
}

/* The title names the whole pane, so it carries a little more weight than the
   column headings under it. */
.cm-totals__title {
    font-weight: 600;
}


/* --- Status pills ----------------------------------------------------------
   One pill, three vocabularies. Orders, invoices and quotes each keep their own
   colour rules; the shape, size and weight are defined once, here. They had
   drifted — orders was a 4px-radius sentence-case chip at 2px/4px padding while
   invoices and quotes were uppercase badges — which made one idea read as three
   components. Invoices' treatment is the one they converge on.

   The fixed `width: 100px` invoices used is dropped rather than shared: it
   cannot hold a long order status such as "Nog niet getekend", and forcing it
   on the orders grid widened the status column enough to push it out of view.
   Pills hug their own text instead; the shape, casing and weight are what make
   them read as one component.

   `.filter-button` is excluded on purpose — those are controls in a filter row,
   not status badges, and they carry their own sizing. */
.table .order-status:not(.filter-button),
.invoice-status,
.quote-status {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 24px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}


/* --- Card header typography ------------------------------------------------
   EXPERIMENT (CAT-1476 follow-up): give `layout/card` / `expandable-card`
   headers the same treatment as the customer editor's `rb-card` — the smaller,
   less shouty title people preferred there.

   A top-level card header's h3 inherited the global h3 (~22px/700), while a
   nested card's was already stepped down to --cm-h4-font-size (fonts.css:334,
   commented "make smaller"). This applies that same step to the top level, so
   a card title reads at one size wherever it appears.

   Appended at the end so it beats the h3 sizing in fonts.css / app.1.min.css
   without needing !important. */
.card > .card-header h3 {
    font-size: var(--cm-h4-font-size);
    font-weight: 600;
    color: var(--cm-font-color);
}

/* The rule under the title, as on an rb-card. Two cases earn it:

     - a collapsible card, where the line says "a body hangs off this, and it
       can come and go" — but not while collapsed, where the header is all
       there is and its border would double the card's own;
     - a nested card (`.card .card`), which is a real section inside a page and
       wants its title separated from its content.

   What it deliberately leaves out is the outermost card. On the order editor
   that card is the page shell — its header is the page title and the panels
   below are its body — so a line there rules off the page, not a section. */
.card.card-expandable:not(.card-collapsed) > .card-header,
.card .card:not(.card-expandable) > .card-header {
    border-bottom: 1px solid var(--cm-lines-color);
}

/* The theme zeroes a card body's top padding when it directly follows a header
   (app.1.min.css:11189) — right when the header had nothing under it, but with
   the rule above the content butted straight against the line. Scoped to match
   that rule exactly, so a card with no line keeps the theme's tight spacing.
   Applies to a bare .card-body too, so a card without .card-padding clears it. */
.card.card-expandable:not(.card-collapsed) > .card-header + .card-body,
.card .card:not(.card-expandable) > .card-header + .card-body {
    padding-top: 16px;
}

/* The collapse chevron becomes rb-card's bordered button rather than a bare
   2rem glyph. Sized in em so it tracks the icon, and the icon is scaled back to
   the size it would be in an rb-card. */
.card.card-expandable > .card-header .card-expand-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);
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}


/* --- Product editor left-nav ------------------------------------------------
   Shares the `cm-editor-*` shell with the customer editor; only the nav's own
   footer is specific to it. */

/* The view-options button sits under the section list, because it edits that
   list: which sections exist and in what order. It reuses the datagrid
   toolbar's icon button — same job there, same control here — rather than the
   labelled `.btn-secondary` it was, which at the foot of a narrow nav column
   read as a page-level action. */
/* A wider nav than the customer editor's 160px: these section names are whole
   phrases ("Maaklijst categorie koppelen", "Wijzigingsgeschiedenis") rather
   than single words, so at that width they broke over three lines and the
   longest one was clipped into a sideways scroll. */
.product-editor-nav-layout > .cm-editor-nav-pane {
    flex: 0 0 260px;
    max-width: 260px;
    overflow-x: hidden;
}

/* Each rule below lists two selectors because a section's card sits one level
   deeper once the section is a group: directly under the content pane for the
   fixed sections, inside `.product-editor-section-cards` for a grouped one.

   `:not(:has(.product-photos))` keeps the photo card out of it: the cards
   nested there are the media widget's own chrome, not sections, so stripping
   the outer header would take away a real title rather than a repeated one.

   A section whose card wraps further cards is a box around a box: the tab
   already names it, so its header is a second title and its border a second
   frame around the same content. Strip the outer chrome and let the inner
   cards be the section's cards.

   `:has(.card)` holds this to that doubly-nested case — a section with one
   plain card keeps its header, which is the only label its content has.

   The body is forced visible because these outer cards are expandable: hiding
   the header takes the toggle with it, and a section left collapsed would
   otherwise render empty with no way to open it. */
.product-editor-nav-layout .cm-editor-content-pane > div > .card:has(.card):not(:has(.product-photos)),
.product-editor-nav-layout .product-editor-section-cards > div > .card:has(.card):not(:has(.product-photos)) {
    border: 0;
    background: transparent;
}

.product-editor-nav-layout .cm-editor-content-pane > div > .card:has(.card):not(:has(.product-photos)) > .card-header,
.product-editor-nav-layout .product-editor-section-cards > div > .card:has(.card):not(:has(.product-photos)) > .card-header {
    display: none;
}

.product-editor-nav-layout .cm-editor-content-pane > div > .card:has(.card):not(:has(.product-photos)) > .card-body,
.product-editor-nav-layout .product-editor-section-cards > div > .card:has(.card):not(:has(.product-photos)) > .card-body {
    display: block;
    padding: 0;
}

/* The other case: a section that IS a single card — one of the fixed ones —
   has nothing to collapse into
   — picking another tab is already how you put it away — so it is promoted to
   an always-open card and loses its chevron. It keeps its header, which names
   what the tab does not (on Algemeen the tab says "Algemeen"; the card says
   what is actually in it), and so it keeps the rule under that header, which
   the collapsible-only rule above would otherwise deny it.

   Only the fixed sections: a card inside a GROUP has siblings, so folding it
   away to reach the next one is exactly what its chevron is for. */
.product-editor-nav-layout .cm-editor-content-pane > div > .card:not(:has(.card)) > .card-body {
    display: block;
    padding-top: 16px;
}

.product-editor-nav-layout .cm-editor-content-pane > div > .card:not(:has(.card)) > .card-header {
    border-bottom: 1px solid var(--cm-lines-color);
}

.product-editor-nav-layout .cm-editor-content-pane > div > .card:not(:has(.card)) > .card-header .card-expand-toggle {
    display: none;
}

/* A group's cards, stacked. Not the `.flex.flex-column` utilities: those centre
   their children, so a collapsed card shrank to the width of its own title
   while the open one beside it ran full width. */
.product-editor-section-cards {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

/* `product-editor` renders the nav layout inside this wrapper, so the wrapper
   sits between the flex modal body and a layout that wants to fill it. Left as
   a plain block it took its content's full height — 1698px inside a 641px body
   that clips — and everything below the fold became unreachable. */
.product-editor-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Fields in these sections are label-then-input repeated, with nothing between
   one field's input and the next field's label. */
.product-editor-nav-layout .cm-editor-content-pane .card-body > * + * {
    margin-top: 16px;
}

/* --- Ingredient editor left-nav ---------------------------------------------
   Shares the `cm-editor-*` shell with the two editors above. Every section here
   IS a single card, so — as in the product editor — each is promoted to an
   always-open card and loses its chevron: there is nothing to collapse into,
   since picking another section is already how you put one away. The body is
   forced visible because the card is expandable and may have been left
   collapsed; without this a section renders empty with no toggle to open it. */
.ingredient-editor-nav-layout .cm-editor-content-pane > div > .card > .card-body {
    display: block;
    padding-top: 16px;
}

.ingredient-editor-nav-layout .cm-editor-content-pane > div > .card > .card-header {
    border-bottom: 1px solid var(--cm-lines-color);
}

.ingredient-editor-nav-layout .cm-editor-content-pane > div > .card > .card-header .card-expand-toggle {
    display: none;
}

/* These section names are whole phrases ("Wijzigingsgeschiedenis"), like the
   product editor's, rather than the customer editor's single words. */
.ingredient-editor-nav-layout > .cm-editor-nav-pane {
    flex: 0 0 220px;
    max-width: 220px;
    overflow-x: hidden;
}

/* At tablet width and below the title wraps around the save button; the pinned
   footer carries the same action a thumb's reach away. */
@media screen and (max-width: 768px) {
    .ingredient-editor-title-save {
        display: none;
    }
}

/* The photo card: main photo, then extra photos. Each half is titled, so the
   two pickers can be told apart — before, both were labelled with the card's
   own title. */
.product-photos__section + .product-photos__section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--cm-table-line-color);
}

.product-photos__title {
    margin: 0 0 12px;
    font-size: var(--cm-h5-font-size);
    font-weight: 600;
    color: var(--cm-font-color);
}

/* The contact row's chevron. `.card-expand-toggle` styles it, but that rule is
   scoped to a real card header, so the box is repeated here. */
.rb-contact-item-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);
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}

/* A pane whose whole content is one plain card still wants the rule under its
   header — the app-wide rule draws it only for a collapsible or a nested card,
   and this is neither. */
.cm-editor-content-pane > .card > .card-header,
.cm-editor-content-pane > div > .card > .card-header {
    border-bottom: 1px solid var(--cm-lines-color);
}

.cm-editor-content-pane > .card > .card-header + .card-body,
.cm-editor-content-pane > div > .card > .card-header + .card-body {
    padding-top: 16px;
}

/* --- Datagrid outer columns ------------------------------------------------
   The theme used to pad every `.table`'s first and last column by 30px,
   `!important`, app-wide (app.1.min.css). `.dg-grid-wrap` already insets a grid
   by 20px, so that doubled the gutter: a grid sat further in than the form
   above it, and in a card it ran past its own container. The wrapper's inset is
   the gutter now, and the cells only separate columns. */

.cm-editor-content-pane .customer-orders-grid table,
.cm-editor-content-pane .customer-invoices-grid table {
    width: 100%;
}

/* `.dg-grid-wrap.has-toolbar` indents itself 20px to clear the toolbar it sits
   under on a full page. In a card there is no toolbar: the indent only pushed
   the grid out of line with the form cards and cost the table the 20px it
   needed, which is what put a scrollbar under Facturen. */
.cm-editor-content-pane .customer-orders-grid .dg-grid-wrap,
.cm-editor-content-pane .customer-invoices-grid .dg-grid-wrap {
    margin-left: 0;
    margin-right: 0;
}

/* --- Datagrid checkbox column ----------------------------------------------
   A grid's select column holds a checkbox and nothing else, but the material
   checkbox is built for a labelled control: the label reserves 30px for the box
   it draws in its own padding, and `.checkbox` reserves 50px for label text
   that never follows. That made the column 70px wide for a 20px control, on
   every grid in the app.

   Scoped to `.check` cells so a checkbox in a form — where the label IS the
   point — keeps its width. */
.bootgrid-table th.check .checkbox,
.bootgrid-table td.check .checkbox {
    width: 30px;
}

.bootgrid-table th.check,
.bootgrid-table td.check {
    /* 10px gutter + the 30px the box needs. The 70px this used to be left 30px
       of empty cell between the checkbox and the first column. */
    width: 40px;
    padding-right: 0;
}

/* --- Website widgets grid --------------------------------------------------
   Status and the three action cells hold one control each, so they take only
   the room that control needs and the widget-name column absorbs the rest —
   which also pulls the buttons together into one block at the right-hand end
   instead of spreading them across the row.

   `width: 1%` is the auto-layout table idiom for shrink-to-content: the
   browser cannot honour it, so it gives the cell its minimum and grows the
   remaining auto column to fill the row. */
.webshops-grido th.col-is_live,
.webshops-grido td.col-is_live,
.webshops-grido th.col-stats,
.webshops-grido td.col-stats,
.webshops-grido th.col-share,
.webshops-grido td.col-share,
.webshops-grido th.col-duplicate,
.webshops-grido td.col-duplicate {
    width: 1%;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Surfaces — depth and light
   ===========================

   The app read flat because the card carried NEITHER a shadow NOR a border: a
   white rectangle butted straight against the grey, so it looked like a hole in
   the background rather than a surface above it. That, not the background
   colour, is what the eye reads as unfinished — the gradients below are a
   whisper next to it.

   Measured pixel budget at 1440x900, so the effort goes where the pixels are:
   on a grid page the card's own background is 21% and the table paints its own
   white over 47%; on a card page (home) the card is 74%. The body background is
   6% on both — a thin frame, which is why it can only ever be a whisper.
   --------------------------------------------------------------------------- */

/* Light rather than colour, and anchored so `--cm-background-color` stays the
   mid-tone the token claims to be.

   `fixed` is not optional: a gradient maps to its element, and this one runs to
   131,185px on a long list — over that distance every stop flattens into one
   colour and scrolling moves through it imperceptibly. Fixed maps it to the
   viewport instead; `min-height` is what then guarantees a box to paint it in
   when the page is shorter than the screen. Radial rather than linear because
   the bands curve, and a curve hides the banding a near-flat gradient would
   otherwise show as stripes.

   On `.app-root`, NOT on `body`. `background-image` paints over
   `background-color`, so a `body` rule silently covers every page that sets a
   background of its own — and several do, through `:body-class`: `login-page`
   and `registration-page` are the brand green, `site-body` is white. This
   element is rendered only by the SPA (`cs2.panels.app`), so the gradient
   reaches the app and nothing else, without a `:not()` list that the next
   `:body-class` page would have to be remembered in. */
.app-root {
    min-height: 100vh;
    background-image: radial-gradient(1200px 640px at 50% -12%, #f4f4f2 0%, #e8e8e6 62%);
    background-attachment: fixed;
}

body.dark .app-root {
    background-image: none;
}

/* The change that carries the look. Two shadows, not one: a 1px contact shadow
   that gives the edge definition a border would, and a wide, offset, very low
   alpha one for the lift. A single mid-opacity shadow reads as a drop shadow;
   these two read as elevation.

   The gradient's stop is a LENGTH, not a percentage: a grid card runs to
   thousands of pixels and a settings card to a few hundred, and a percentage
   would turn the tall one into a wash while the short one barely moved. A fixed
   300px gives both the same lift at the top. */
.card {
    background-image: linear-gradient(180deg, #ffffff 0px, #fcfcfa 300px);
    border-radius: 8px;
    box-shadow:
        0 1px 2px rgba(16, 24, 32, 0.05),
        0 10px 28px -8px rgba(16, 24, 32, 0.10);
}

/* The table paints its own white across ~47% of a grid page, sitting ON TOP of
   the card — without this the card's gradient is hidden exactly where the app is
   used most. The rows draw their own backgrounds (hover, selection, status), so
   only the table element itself gives way. */
.bootgrid-table {
    background-color: transparent;
}

/* The sidebar's own shadow is `rgba(51,51,51,.38) 0 0 10px` — tight, dark and
   centred, which is the detail that dates the whole frame. Replaced by a hairline
   of light on the edge itself plus a wide, weak cast in the brand's own green, so
   the shadow belongs to the palette instead of being neutral grey.
   `#sidebar` is carried so this outranks the id-specificity rule it replaces. */
.sidebar,
#sidebar {
    background-image: linear-gradient(180deg, #17474d 0%, #0d2e32 72%);
    box-shadow:
        1px 0 0 rgba(255, 255, 255, 0.05),
        10px 0 40px rgba(13, 46, 50, 0.14);
}

/* A field's label names it; the value is what anyone came to read. Bold on the
   label put the weight on the half that never changes, so every value read as
   secondary to its own caption. Quiet label, dark value — the pair now reads in
   the order it is used. */
.cm-field-label {
    font-weight: 400;
    color: var(--cm-table-heading-color);
}

/* A collapsed sidebar shows the avatar and nothing else.
   `.nav-footer` turns column when collapsed, so the four action icons stack
   under the avatar and run the rail past the viewport — which is where the
   scrollbar came from, not from the menu itself. They are all reachable again
   the moment the rail is opened, and the avatar is what identifies the session.

   Wide screens only: below the 500px cutoff this same rail IS the mobile
   navigation, and its footer is the only way to reach settings or log out. */
@media (min-width: 501px) {
    .sidebar.move-out .nav-footer .nav-footer-icon {
        display: none;
    }
}

/* The production grid's toolbar prefix: the date range, then how the rows are
   ordered within it.

   `toggle-sort-dir` reuses `.view-options-wrap`, which is the page-level tab
   strip — 40px tall with its own 20px margins. Dropped into a 26px toolbar row
   it stacked under the scope picker and took the whole row to 92px, so it is
   compacted to the row's height here rather than given a second markup. */
.production-scope {
    display: flex;
    align-items: center;
    gap: 14px;
}

.production-scope .view-options-wrap {
    margin: 0;
}

.production-scope .view-options-settings {
    border-bottom: none;
}

.production-scope .view-option-button {
    padding: 0 10px;
    min-height: 26px;
}

.production-scope .view-option-title {
    font-size: 13px;
    white-space: nowrap;
}

/* The production view's own three controls, in a popover off the toolbar.
   Each was built as a standalone panel widget, so they carry their own block
   layout; the popover gives them a column and a separator rather than
   restyling three widgets that are fine where they came from. */
.production-options {
    display: flex;
    flex-direction: column;
    /* Wide enough that `Op volgorde van leverdatum` stays on one line — the
       sort pair is two labels side by side and wraps below this. */
    min-width: 340px;
}

.production-options__group {
    padding: 10px 4px;
}

.production-options__group + .production-options__group {
    border-top: 1px solid var(--cm-table-line-color);
}

/* These carry page-level chrome — margins and a tab-strip underline sized for a
   full-width row. Inside a popover they only need to stack. */
.production-options .view-options-wrap,
.production-options .toggle-printed-overview-widget {
    margin: 0;
}

.production-options .view-options-settings {
    border-bottom: none;
}

/* The sort choice inside the production options popover. Bootstrap's `.radio`
   carries form-row margins sized for a stacked form; in a popover group the
   pair only needs to sit under the label above them. */
.production-sort .radio {
    margin: 0;
}

.production-sort .radio + .radio {
    margin-top: 6px;
}

/* The prep-list list is the panel here, not a menu opening over one, so it
   drops the absolute positioning and the frame it needs when it floats. */
.production-options .prep-list-header-filter.is-open .checkbox-wrap {
    position: static;
    border: none;
    box-shadow: none;
    padding: 0;
    width: auto;
    min-width: 0;
}

.production-options .prep-list-header-filter.is-open .checkbox-wrap-body {
    max-height: 220px;
    overflow-y: auto;
}

/* The production chips and prep-list pills take the status pill's shape and
   palette (see `.table .order-status:not(.filter-button), .invoice-status`), so
   a production sheet speaks the same visual language as every other status in
   the app. They were white-with-a-border boxes and a flat #6fd273 fill, which
   read as a third vocabulary on a screen that already has two.

   Unchecked is `--cm-neutral-gray`, not `--cm-light-gray`: the latter is green
   despite its name, and a green "not done yet" against a green "done" leaves
   the one distinction these chips exist to make resting on saturation alone. */
.production-progress-bar {
    /* Not `stretch` (the flex default): the pills wrap to a second line on a row
       with several prep lists, and the two icon chips beside them were stretching
       to that height — a chip's size would then depend on how many lists the
       order happens to touch. */
    align-items: flex-start;
}

.production-progress-bar .progress-entry {
    padding: 7px 10px;
    border-radius: 24px;
    height: auto;
    border: none;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background-color: var(--cm-neutral-gray);
    color: var(--cm-mid-gray);
}

/* The pill's own font-size would shrink the glyph to 0.7rem with it. */
.production-progress-bar .progress-entry .zmdi {
    font-size: 14px;
    line-height: 1;
}

/* Same pair as `.invoice-status.paid` — done is done, whatever the surface. */
.production-progress-bar .progress-entry.checked {
    background-color: var(--cm-status-confirmed-bg);
    color: var(--cm-status-confirmed);
    border: none;
}

/* One rhythm down the editor pane, whatever a section contributes.

   `.product-editor-section-cards` is a 20px-gapped column, but its children are
   the SECTIONS, not the cards — and a section renders however many cards it
   owns. So a section contributing one card sat 20px from its neighbours while
   the two inside `Overig`'s history section touched, with no margin anywhere to
   explain it. Giving each section the same column gap makes the spacing a
   property of the list rather than of how a section happens to be grouped. */
.product-editor-section-cards > * {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Datagrid header checkbox: partial selection ---------------------------
   A header checkbox governs one scope of rows — the page, or one group — and
   the selection can span several of them, so "some of these are selected" is a
   state it has to be able to show. Without it a half-selected page reads as
   fully unselected, and the click that follows is expected to select and in
   fact deselects.

   `indeterminate` is a DOM property, not an attribute, so the grid sets it on
   the node; this only draws it. The tick's `:after` box is reused as a dash:
   the `:before` outline stays (only `:checked` scales it away), and the dash
   sits inside it. */
.bootgrid-table .checkbox input:indeterminate + .input-helper:after {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    top: 8px;
    left: 3px;
    width: 11px;
    height: 0;
    border-left: 0;
    border-bottom: 2px solid #009688;
    border-bottom-left-radius: 0;
}

/* Parallel dev session badge (scripts/dev-session.bb).

   Rendered only when the page carries #dev-session-name, which the backend
   emits solely for a dev session — so this never appears in production or in
   the primary dev env. Several instances of the same app are otherwise
   indistinguishable on screen, and nobody reads the port in the URL bar. */
.dev-session-pill {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: 10px;
  background: #009688;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .02em;
  vertical-align: middle;
  cursor: default;
}