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

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

    /* 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: #9da307;

    --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: #eaebd1;

    --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: #b6ba38;

}



@font-face {
    font-family: 'Amatic SC';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/amatic/font-80ef0139.woff2') format('woff2'),
         url('../fonts/amatic/font-f6b44557.woff') format('woff');
}


@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@font-face {
  font-family: "PT Serif";
  src: local("PT Serif"), local("PTSerif-Regular"), url("https://fonts.gstatic.com/s/ptserif/v10/EJRVQgYoZZY2vCFuvAFWzr-_dSb_.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Josefin Slab";
  src: local("Josefin Slab Regular"), local("JosefinSlab-Regular"), url("https://fonts.gstatic.com/s/josefinslab/v9/lW-5wjwOK3Ps5GSJlNNkMalnqg6vBMjoPg.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Julius Sans One";
  src: local("Julius Sans One"), local("JuliusSansOne-Regular"), url("https://fonts.gstatic.com/s/juliussansone/v7/1Pt2g8TAX_SGgBGUi0tGOYEga5WOwnsXy6KHHg.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Open Sans Condensed";
  src: local("Open Sans Condensed Light"), local("OpenSansCondensed-Light"), url("https://fonts.gstatic.com/s/opensanscondensed/v13/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff1GhDuXMR7eS2Ao.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
    font-family: Gasalt;
    src: url('../fonts/gasalt/gasalt.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: Arquitecta;
    src: url('../fonts/arquitecta/Arquitecta.otf') format('truetype');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: aloveofthunder;
    src: url('../fonts/aloveofthunder/aloveofthunder.ttf') format('truetype');
    font-weight: 300;
    font-style: normal
}


@font-face {
    font-family: didot;
    src: url('../fonts/didot/didot.ttf') format('truetype');
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: playfairdisplay;
    src: url('../fonts/playfairdisplay/PlayfairDisplay-Regular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal
}


@font-face {
    font-family: campton;
    src: url('../fonts/campton/CamptonLight.otf') format('truetype');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: figtree;
    src: url('../fonts/figtree/Figtree-Regular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal
}

html {
    font-size: var(--cm-html-font-size);
}

/* font-sizes are with rem values, with 15px as a base */


body {
    font-family: 'figtree';
    font-weight: 300;
    color: var(--cm-font-color);
    background-color: var(--cm-background-color);
    line-height: 1.42857143;

}

h1 {font-size: var(--cm-h1-font-size);}
h2 {font-size: var(--cm-h2-font-size);}
h3 {font-size: var(--cm-h3-font-size);}
h4 {font-size: var(--cm-h4-font-size);}
h5 {font-size: var(--cm-h5-font-size);}
h6 {font-size: var(--cm-h6-font-size);}

a {
    color: var(--cm-green);
}

.modal-body p a {
    color: var(--cm-yellow);
}


p, ul, ol, label {font-size: var(--cm-normal-font-size);}

.estimate-page-wrap p,
.estimate-page-wrap ul,
.estimate-page-wrap ol,
.estimate-page-wrap label
{
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    font-family: inherit;
}


.flex {
    display: flex;
    align-items: baseline;
}

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


.card {
    background-color: var(--cm-white);
    border-radius: var(--cm-card-border-radius);
    box-sizing: border-box;
}

@keyframes smooth-pulsate {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.highlight-pulsate {
    background: linear-gradient(45deg, white 0%,
                                var(--cm-color-success-bg) 35%,
                                var(--cm-color-success-bg) 64%, white 100%);
    background-size: 200% 200%;
    animation: smooth-pulsate 4s ease-in-out infinite;
}

.highlight-pulsate-dark {
    background: linear-gradient(45deg, white 0%,
                                var(--cm-light-green-transparent) 35%,
                                var(--cm-light-green-transparent) 64%, white 100%);
    border: 1px solid var(--cm-lines-color);
    background-size: 200% 200%;
    animation: smooth-pulsate 4s ease-in-out infinite;
}

.text-preview {
    cursor: pointer;
}

.card.card-editable {
    cursor: pointer !important;
}


.modal-body .card.card-editable:hover,
.card .card.card-editable:hover {
    border-color: var(--cm-yellow);
}

.card-header {
    display: flex;
}
.modal-body .card .card-header h3,
.card .card .card-header h3 {
    flex-grow: 1;
}
.modal-body .card .card .card-header h3,
.card .card .card h3 {
    font-size: var(--cm-h4-font-size); /* make smaller */
}
.modal-body .card .card  .card-header,
.card .card .card .card-header {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-table-heading-color);
}

.card.card-collapsed .card-body {
    display: none;
}


/* nested cards */
.card .card,
.modal-body .card {
    border: 1px solid var(--cm-lines-color);
}

.card .card .card-header .actions ,
.modal-body .card .card-header .actions {
    position: absolute;
    right: 1px;
    top: 1px;
}

.card.card-expandable .card-expand-toggle {
    font-size: 2rem;
    color: var(--cm-green);
}
.modal-body .card.card-editable .card-header .actions,
.card .card.card-editable .card-header .actions {
    opacity: 0;
}
.modal-body .card.card-editable:hover .card-header .actions,
.card .card.card-editable:hover .card-header .actions {
    opacity: 1;
}

.modal-body .card .card-header .actions .dropdown,
.card .card .card-header .actions .dropdown {
    background-color: var(--cm-very-light-gray);
    border-radius: 0px var(--cm-border-radius) 0px var(--cm-border-radius);
}
.modal-body .card .card-header .actions  > li > a::before,
.card .card .card-header .actions  > li > a::before {
    border-radius: 0px var(--cm-border-radius) 0px var(--cm-border-radius);
}

.modal-body .card .card-header .actions .zmdi,
.card .card .card-header .actions .zmdi {
    color: var(--cm-font-color);
}

.card-body-outer-click-mask {
    position: fixed;
    background-color: red;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}
/* nested cards get different heading colors */
.modal-body .card .card-header h1,
.card .card .card-header h1,
.modal-body .card .card-header h2,
.card .card .card-header h2,
.modal-body .card .card-header h3,
.card .card .card-header h3,
.modal-body .card .card-header h4,
.card .card .card-header h4 {
    color: var(--cm-dark-green);
}
.card-expandable .card-header {
    cursor: pointer;
}

.sidebar {
    position: fixed;
    background: #fff;
    height: 100%;
    top: 0px;
    -webkit-transition: all;
    -o-transition: all;
    transition: all;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    z-index: 10;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow-y: auto;
    background-color: var(--cm-green);
}
.sidebar.settings-sidebar {
    background-color: var(--cm-dark-gray);
}

.settings-sidebar .back-to-agenda  a {
    color: var(--cm-yellow);
}

.settings-sidebar  .main-menu > li > a {
}


.sidebar.toggled {
    opacity: 1;
    filter: alpha(opacity=100);
}

#sidebar {
    width: 268px;
    -webkit-transform: translate3d(-268px, 0, 0);
    transform: translate3d(-268px, 0, 0);
}

#sidebar.toggled {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


.main-menu {
    list-style: none;
    padding-left: 0;
    margin: 20px 0 0 0;
}

.main-menu > li > a {
    padding: 14px 20px 14px 52px;
    display: block;
    font-weight: 500;
    position: relative;
    color: var(--cm-nav-color);
}
.import-grid pre {
    max-width: 600px;
    background-color: var(--cm-background-color);
    overflow-x: auto

}

#sidebar .nav-toggle-wrap .nav-toggle {
    color: var(--cm-white);
    background-color: var(--cm-dark-green-transparent);
    font-size: 23px;
    cursor: pointer;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 13px;
    margin-left: 15px;
}

.main-menu > li > a:hover {
    color: var(--cm-white);
    background-color: var(--cm-dark-green-transparent);

}

.main-menu > li > a > i {
    position: absolute;
    left: 16px;
    font-size: 20px;
    top: 0;
    width: 25px;
    text-align: center;
    padding: 13px 0;
}

.main-menu > li.active > a {
    color: var(--cm-white);
}

.main-menu > li.active:hover > a {
    color: var(--cm-yellow);
}

.modal-body .card-header:not(.ch-alt),
.card .card-header:not(.ch-alt) {
    padding: 0px 25px;
}


@media screen and (max-width: 991px) {
.modal-body .card-header:not(.ch-alt),
.card .card-header:not(.ch-alt) {
        padding: 10px;
    }
}

.btn {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    /*background-image: none;*/
    white-space: nowrap;
    padding: 6px 16px;
    font-size: 13px;
    line-height: 1.42857143;
    border-radius: var(--cm-button-border-radius) !important;
    justify-content: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn-default {
  color: var(--cm-font-color);
  background-color: var(--cm-white);
  border: 1px solid var(--cm-green);
}

.btn-default:hover {
    background-color: var(--cm-background-color);
    border: 1px solid var(--cm-background-color);
}

.btn-secondary {
    color: var(--cm-font-color);
    background-color: var(--cm-white);
    border: 1px solid var(--cm-lines-color);
}
.btn-no-border {
    border: none !important;
}

.btn-secondary:hover {
    background-color: var(--cm-lines-color);
    border: 1px solid var(--cm-lines-color);
}




.btn-primary {
    color: var(--cm-white);
    background-color: var(--cm-font-color);
}


.btn-primary:hover:hover, .btn-primary:focus:hover, .btn-primary.focus:hover, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:hover:focus, .btn-primary:focus:focus, .btn-primary.focus:focus, .btn-primary:active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:hover.focus, .btn-primary:focus.focus, .btn-primary.focus.focus, .btn-primary:active.focus, .open > .dropdown-toggle.btn-primary.focus {
    background-color: var(--cm-green);
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}

.toolbar-button {
    width: auto !important;
}

.toolbar-button:hover::before {
    border-radius: 16px !important;
}

.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:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.open > .dropdown-toggle.btn-primary {
  color: #ffffff;
  border-color: transparent;
}

label {
    font-weight: bold;
}

.form-control:not(.fc-alt) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--cm-border-radius);
}

.time-picker-cell {
    min-width: 50px;
}
select.form-control {
    margin-right: 68px;
    padding: 3px 26px 3px 6px;
    background-color: var(--cm-white);
}
.select {
    background-color: var(--cm-white);
}
.datepicker-wrapper .input-group-addon {
    display: none;
}
.quil-editor {
    border: 1px solid var(--cm-lines-color) !important;
    border-top: 1px solid var(--cm-lines-color) !important;
}

.card .card .ql-toolbar {
    visibility: hidden;
}

.card .card:hover .ql-toolbar,
.modal:hover .ql-toolbar {
    visibility: visible;
    border-bottom: none !important;
}


table thead th .btn-default,
table thead th .btn-primary {
    border: 1px solid var(--cm-background-color);
    background-color: var(--cm-green);
    opacity: 0.4;
    color: var(--cm-white);
}
table thead th .btn-primary {
    border: 1px solid var(--cm-table-heading-color) !important;
}

table thead th .btn-default:hover {
    color: var(--cm-table-heading-color) !important;

    border: 1px solid var(--cm-table-heading-color) !important;
    color: var(--cm-table-heading-color) !important;
}
table thead th .btn-primary:hover {
    border: 1px solid var(--cm-background-color) !important;
    color: var(--cm-background-color) !important;
    background-color: var(--cm-table-heading-color) !important;
}

table thead th > span,
table thead th > a {
    display: flex;
}

table thead th.right > span {
    width: 100%;
    justify-content: flex-end;
}

table thead th.right .column-header-anchor {
    justify-content: flex-end;
    gap: 5px;
}
table thead th .text.m-r-5 {
    margin-right: 0px !important;
}
table thead th.right .column-header-anchor i {
    display: none !important;
}

table thead th.right .column-header-anchor i.zmdi {
    display: inline-block !important;
}

table thead tr,
table tbody tr:hover td {
    background-color: var(--cm-table-heading-bg-color);

}

.internal-comments-box  table tbody tr:hover td {
    background-color: var(--cm-white) !important;
}

table thead tr th {
    color: var(--cm-table-heading-color);
    padding: 5px 10px !important;

}

.ingredients-form > div input,
.ingredients-form > div select
{
    min-width: 194px;
}

.ingredients-form .input-group-addon {
    display: none;
}


.ingredients-overview-grid th {
    min-width: 100px;
}

table th.check .checkbox {
    margin-top: 15px;
}

table > thead > tr > th,
table > tbody > tr > th,
table > tfoot > tr > th,
table > thead > tr > td,
table > tbody > tr > td,
table > tfoot > tr > td {
    border-top: 1px solid var(--cm-lines-color);
}

table > tbody > tr:first-of-type > td {
    border-top: none !important;
}

.modal .modal-header {
    padding: 5px 26px;
}

.new-customer-modal input {
}

.modal.from-right-wrap {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vw;
    background-color: var(--cm-dark-green-transparent);
}

.modal.from-right-wrap + .modal.from-right-wrap {
    background-color: transparent;
}

.modal-dialog.from-right  {
    position: fixed;
    margin-top: 0px;
    right: 0px;
}

.modal-action-item {
    border: 1px solid var(--cm-background-color);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: var(--cm-border-radius);
}

.modal-action-item.upgrade  {
    opacity: 0.7;
}

.modal-action-item.disabled {
    cursor: not-allowed;
}
.modal-action-item:hover {
    border: 1px solid var(--cm-green);
}
.modal-action-item,
.modal-action-item > a {
    display: flex;
    gap: 20px;
    align-items: center;
    cursor: pointer;
}
.product-editor-wrap {
    flex-direction: column;
    display: flex;
    gap: 20px;
    align-items: stretch;

}

.product-type .type-chooser {
    display: flex;
    gap: 30px;
    align-items: center;
}
.product-price-section .card-body,
.product-production-section .card-body,
.product-unnecessary-section .card-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

.modal-action-item.no-pointer {
    cursor: default !important;
}

.modal-action-item.disabled a {
    cursor: not-allowed;
}
.modal-action-item .modal-action-wrap {
    min-height: 100px;
    margin-top: 3px;
}
.modal-action-item .modal-action-header {
    color:  var(--cm-dark-green);
}
.modal-action-item .modal-action-header h4{
    margin-top: 15px;
    margin-bottom: 10px;
}
.modal-action-item.disabled .modal-action-header,
.modal-action-item.disabled .modal-action-body {
    color:  var(--cm-mid-gray);
}
.modal-action-item.disabled:hover {
    border: 1px solid var(--cm-background-color);
}
.modal-action-item.disabled .modal-action-icon,
.modal-action-item.disabled:hover .modal-action-icon {
    background-color: var(--cm-very-light-gray);
    color: #ddd;
}
.modal-action-item.disabled .modal-action-body {
    font-style: italic;
}

.modal-action-item .modal-action-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    background-color: var(--cm-background-color);
    color: var(--cm-green);
    min-width: 70px;
    height: 70px;
    border-radius: 35px;
}



.modal-action-item:hover .modal-action-icon {
    background-color: var(--cm-yellow);
}
.modal-action-item.no-pointer:hover .modal-action-icon {
    background-color: var(--cm-background-color);
}


.modal-action-item .modal-action-body {
    color:  var(--cm-font-color);
}
.modal-dialog.from-right.third {
    width: 33%;
}
.modal-dialog.from-right.half {
    width: 50%;
}
.modal-dialog.from-right.two-thirds {
    width: 66%;
}
.modal-dialog.from-right.three-fourths {
    width: 75%;
}

.modal-dialog.from-right.full {
    width: 97vw;
    height: 98vh;
    inset: 1vh 1vw; /* Adds a margin around the modal */
}

@media screen and (max-width: 600px) {
    .modal-dialog.from-right.third {
        width: 100%;
    }
    .modal-dialog.from-right.half {
        width: 100%;
    }
    .modal-dialog.from-right.two-thirds {
        width: 100%;
    }
    .modal-dialog.from-right.three-fourths {
        width: 100%;
    }

    .modal-dialog.from-right.full {
        width: 100%;
    }
    .modal-action-item {
        flex-direction: column;
    }


}

@media screen and (max-width: 475px) {
    .day-category-row {
        width: 100%;
        overflow-x: auto;
    }
    .day-column {
        width: 62vw;
    }

    /* Mobile styles */
    .general-box .card-body .table {
        display: block;
    }

    .general-box .card-body .table tr {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 10px;
        border: 0;
    }

    .general-box .card-body .table th, .general-box .card-body .table td {
        display: block;
        width: 100%;
        text-align: left !important;
        padding-left: 20px !important;
    }

    .general-box .card-body .table th {
        background-color: #f4f4f4;
    }

    .general-box .card-body .table td {
        border: 0;
        padding-top: 0;
    }
    .upsell {
        flex-direction: column;
    }
    .upsell .card {
        width: 100% !important;
        max-width: 100% !important;
    }

}

.modal-dialog.from-right .modal-header {
    width: 100%;
    position: sticky;
    top: 0px;
    z-index: 9;
    background-color: var(--cm-white);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.modal-dialog.from-right .modal-content {
    height: 100vh;
    max-height: 100vh;
}


@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    html:not(.ie9) .select::before {
        background-image: url("../img/caret.png") !important;
        background-size: 20px 20px;
        right: 5px !important;
    }
}
html:not(.ie9) .select::before {
    position: absolute;
    top: -1px;
    content: "";
    height: calc(100% - 1px);
    width: 30px;
    background-color: #FFF;
    background-position: right calc(100% - 7px);
    background-repeat: no-repeat;
    background-image: url("../img/caret.png") !important;
    pointer-events: none;
    z-index: 5;
    right: 5px !important;
}


.style-book {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    .style-book-content {
        background-color: var(--cm-white);
        padding: 30px;
        border-radius: var(--cm-border-radius);
    }
    .nested-cards {
        display: flex;
        flex-direction:column;
        gap: 20px;
    }
    .buttons {
        display: flex;
        gap: 20px;
    }
    .form-items label:first-of-type {
        margin-top: 0px;
    }
    .form-items label {
        margin-top: 20px;
    }
    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
        column-gap: var(--cm-grid-column-gap);
        row-gap: var(--cm-grid-row-gap);
    }
    .box {
        border-radius: var(--cm-border-radius);
        height: 120px;
        width: 120px;
        display: flex;
        flex-direction: column-reverse;
        padding: 20px;
        align-items: center;
    }
    .box-primary {
        background-color: var(--cm-green);
        color: var(--cm-white);
    }
    .box-primary-dark {
        background-color: var(--cm-dark-green);
        color: var(--cm-white);
    }

    .box-secondary {
        background-color: var(--cm-yellow);
        color: var(--cm-white);
    }
    .box-background {
        background-color: var(--cm-background-color);
        border: 1px solid var(--cm-font-color);
    }
    .box-lines {
        background-color: var(--cm-lines-color);
    }
    .box-font {
        background-color: var(--cm-font-color);
        color: var(--cm-white);
    }



}


@font-face {
    font-family: akrobat;
    src: url('../fonts/akrobat/akrobat.otf') format('truetype');
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: gothic;
    src: url('../fonts/gothic/gothic.ttf') format('truetype');
    font-weight: 300;
    font-style: normal
}

@font-face {
  font-family: roboto;
  src: url('../fonts/roboto/Roboto-Light-webfont.eot');
  src: url('../fonts/roboto/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/roboto/Roboto-Light-webfont.woff') format('woff'), url('../fonts/roboto/Roboto-Light-webfont.ttf') format('truetype'), url('../fonts/roboto/Roboto-Light-webfont.svg#icon') format('svg');
  font-weight: 300;
  font-style: normal;
}

@font-face {
    font-family: hipsterish;
    src: url('../fonts/hipsterish/hipsterish.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiGyp8kv8JHgFVrJJLucXtAOvWDSHFF.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiGyp8kv8JHgFVrJJLufntAOvWDSHFF.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiGyp8kv8JHgFVrJJLucHtAOvWDSA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmg1hVFteOYktMqlap.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmg1hVGdeOYktMqlap.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiDyp8kv8JHgFVrJJLmg1hVF9eOYktMqg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z11lFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEl8qw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
    font-family: 'Acre';
    src: url('../fonts/acre/acre-medium.otf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Saol';
    src: url('../fonts/saol/SaolDisplay-LightItalic.otf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/lato/font-dc2362f2.woff2") format("woff2"),
       url("../fonts/lato/font-2c5cae27.woff") format("woff");
  font-style: italic;
  font-weight: 300;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752FD8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752HT8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752Fj8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752Fz8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752FD8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752HT8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752Fj8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752Fz8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752FD8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752HT8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752Fj8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752Fz8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752FD8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752HT8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752Fj8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752Fz8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752FD8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752HT8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752Fj8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752Fz8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752FD8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752HT8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752Fj8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752Fz8Gl-1PK62t.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/oswald/v40/TK3iWkUHHAIjg752GT8Gl-1PKw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* vietnamese */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dosis/v27/HhyaU5sn9vOmLzlnC_WoEoZKdbA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dosis/v27/HhyaU5sn9vOmLzlmC_WoEoZKdbA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dosis/v27/HhyaU5sn9vOmLzloC_WoEoZK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dosis/v27/HhyaU5sn9vOmLzlnC_WoEoZKdbA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dosis/v27/HhyaU5sn9vOmLzlmC_WoEoZKdbA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dosis/v27/HhyaU5sn9vOmLzloC_WoEoZK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dosis/v27/HhyaU5sn9vOmLzlnC_WoEoZKdbA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dosis/v27/HhyaU5sn9vOmLzlmC_WoEoZKdbA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dosis/v27/HhyaU5sn9vOmLzloC_WoEoZK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu0SC55K5gw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu0SC55K5gw.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu0SC55K5gw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu0SC55K5gw.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu0SC55K5gw.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu0SC55K5gw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu0SC55K5gw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu0SC55K5gw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu0SC55K5gw.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu0SC55K5gw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu0SC55K5gw.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* hebrew */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu0SC55K5gw.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu0SC55K5gw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu0SC55K5gw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v28/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



@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.2s ease-out;
}

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

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

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

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

.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;
}
.nav-footer {
    display: flex;
    padding: 20px 10px;
    align-items: center;
    gap: 15px;

}
.nav-footer .avatar {
}
.nav-footer .logout,
.nav-footer .settings {
    color: var(--cm-white) !important;
}
.nav-footer .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
}
.nav-footer .nav-footer-icon {
}
.nav-footer .nav-footer-icon a {
    color: var(--cm-white) !important;
    font-size: 1.6rem;
}
.user-info {
    flex-grow: 1;
    font-size: 0.8rem;
}

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

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

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

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

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

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

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

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

}

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


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

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

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

    .staff-portal-grid-id tbody tr {

        border: 2px solid black;
    }

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

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

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


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

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


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

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

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

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

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

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

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

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

/* END OF RESPONSIVE MEDIA QUERIES */

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

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


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


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

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

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


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

.ungrouped

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

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

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

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


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

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

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

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

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

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

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


.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: 25px;
    padding: 10px 20px;
    font-weight: bold;
    color: var(--cm-green);
    cursor: pointer;
    font-size: 16px;
    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 */
}
.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);
}



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

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

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


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

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

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

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


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

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

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

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

}

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

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

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

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

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

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

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

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

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



/* ... */

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


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


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

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


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

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

.sidebar {
    opacity: 1 !important;
}

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



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

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

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

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

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


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

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

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

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

}

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

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

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

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

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

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


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

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

}
.sidebar.move-in {

}

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

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

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

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

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

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

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

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




.blog-article {

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

}

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

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

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

}

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


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

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

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



.rsvp.declined {
     color: #FFC107;
}

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

.rsvp.invited {
    color: #a0d5f2;
}

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

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

}
.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:nth-of-type(1) {
   min-width: 20px;
}

.order-overview .table-responsive > table > tbody > tr > td:nth-of-type(2) {
   min-width: 20px;
}

.order-overview .table-responsive > table > tbody > tr > td:nth-of-type(3) {
    min-width: 200px;
}

.order-overview .table-responsive > table > tbody > tr > td:nth-of-type(4) {
    min-width: 20px;
}

.order-overview .table-responsive > table > tbody > tr > td:nth-of-type(6) {
   width: 200px;
   text-align: right;
}

.order-overview .table-responsive > table > thead > tr > th:nth-of-type(6) {
    text-align: right;

}
.order-overview .table-responsive > table > thead > tr > th:nth-of-type(6) > div:last-of-type {
    display: none;
}

.order-overview .table-responsive > table > tbody > tr > th:nth-of-type(6) {
   font-size: 8pt;
}

.order-overview .table-responsive > table > tbody > tr > td:nth-of-type(7) {
   width: 20px;
   padding: 10px 10px !important;
}


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


.modal {
  display: block !important;
}

.normal-modal .modal-dialog {

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

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

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

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


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

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

.modal .modal-body {
    overflow: auto;
}

.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: 125px;
}

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

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

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


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

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

.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 {
    width: 100% !important;
}
#drop-zone-product-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 {
    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 !important;
    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;
}
.thumb-wrap > img {

}

.thumb-wrap:hover {
  border: 1px solid #ccc;
}
.file-document .filename,
.img-document .filename {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 5px 0px;
    text-align: center;
    background-color: var(--cm-dark-green-transparent);
    color: var(--cm-white);
}
.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 img {
  width: 100%;
}


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

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

.file-document {
}

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



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

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

a {
   cursor: pointer;
}

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

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

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

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

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

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

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

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

}

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

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

}

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

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

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

.shortage {
    color: red;
}

.too-many {
    color: orange;
}

.order-alert {
   position: relative;
}

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

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


.product-overview-table th:nth-of-type(1) {
    width: 50%;
}

.product-overview-table th:nth-of-type(3) {
   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: 0px;
   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;
}

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

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

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

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

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

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

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

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

    padding: 0px;
}

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

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

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

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

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

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

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

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

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

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


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

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


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


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


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

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


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

}

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

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

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

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


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

.price-box-wrap:hover,
.price-box-wrap.selected {
   border: 2px solid black;
   cursor: pointer;
}

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

}


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

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

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

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

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

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

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

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

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


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

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

}

.blocked-days-grid {
    display: flex;

}

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

.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"
                         "shortdesc shortdesc shortdesc"
                         "tags tags tags";
}


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


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


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

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


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

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

.stock-settings {
    display: flex;
    grid-column: 1 / 3;

}

.stock-settings .checkbox {
    margin-top: 0px !important;
    margin-right: 20px;
}

.stock-settings .stock-input  input {
    width: 80px;
}

.product-name-section .items .type-chooser {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: baseline;
}
.product-name-section .items .type-chooser .radio:first-of-type {
}

.delivery-cost-widget, .delivery-cost-product {
}

.time-slots-limiter {
    display: flex;
}


.light-inline-button {
    display: inline-block;
    color: #999 !important;
    border: none;
    border-bottom: 1px dashed #ccc;
    background-color: white;
    text-transform: uppercase;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 9px;
    margin-left: 5px;
    margin-right: 5px;
}

table .hover-context .light-inline-button {
    display: none;
}
table .hover-context:hover .light-inline-button {
    display: inline-block;
}
table .hover-context:hover .hide-on-hover {
    display: none;
}
table .hover-context .show-on-hover {
    display: none;
}
table .hover-context:hover .show-on-hover {
    display: flex;
}
.hover-context-wrap {
    position: relative;
}

table .hover-context:hover {
    position: absolute;
    background-color: white;
    border-radius: 4px;
    padding: 2px;
    z-index: 999;
    left: -150px;
}

table .hover-context > small {
    display: flex;
}

.order-settings {
    display: flex;
    min-width: 300px;
}
.order-settings > small   {
    display: flex;
    gap: 5px;
}

.order-settings > small > span {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
}

.check-list .check-box  .bgm-green {
    background-color: var(--cm-green) !important;

}

/** dark mode! */
body.dark {
    background-color: #555;
    color: #eee;
}

body.dark .card,
body.dark table,
body.dark table th,
body.dark #sidebar{
    background-color: var(--cm-mid-gray);
    color: #eee;
}

body.dark input,
body.dark select,
body.dark textarea {
    background-color: var(--cm-mid-gray) !important;
    color: #eee !important;
    border: 1px solid #999;
}

body.dark .table > thead > tr > th, body.dark .table > tbody > tr > th, body.dark .table > tfoot > tr > th,
body.dark .table > thead > tr > td, body.dark .table > tbody > tr > td, body.dark .table > tfoot > tr > td {
    border-top: 1px solid #999;
}

body.dark .s-profile > a {
    background-color: var(--cm-mid-gray);
}

body.dark .s-profile > a .sp-info {
    color: #eee;
}

body.dark .card h1,
body.dark .card h2,
body.dark .card h3,
body.dark .card h4,
body.dark .card h5,
body.dark .card h6
body.dark .modal-content h1,
body.dark .modal-content h2,
body.dark .modal-content h3,
body.dark .modal-content h4,
body.dark .modal-content h5,
body.dark .modal-content h6,
body.dark label
{
    color: #eee !important;
}

body.dark .main-menu li a {
    color: #444;

}

body.dark .main-menu > li.active > a {
    background-color: #999;
}

body.dark .main-menu > li > a:hover {
    background-color: #999;
}


body.dark .block-header h1,
body.dark .block-header h2,
body.dark .block-header h3,
body.dark .block-header h4
{
    color: #999;
}

.logo-darkmode, body.dark .logo-lightmode {
    display: none;
}

body.dark .table > thead > tr > th {
    border-bottom: none;
}

body.dark .logo-darkmode {
    display: block;
}

body.dark .modal-content {
    background-color: var(--cm-mid-gray);
}

body.dark .order-filter-panel {
    background-color: var(--cm-mid-gray);
    color: #eee !important;
    border: 0px solid #999;
    border-radius: 0px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

html:not(.ie9) .select::before {
    background-color: transparent;
}

body.dark .estimate-sidebar {
    background-color: #888;
    padding-top: 10px;
}

body.dark .estimate-sidebar .table {
    background-color: #999;
}

body.dark .estimate-editor .canvas {
    background-color: var(--cm-mid-gray);
    padding-top: 0px;
}

body.dark a {
    color: #B1E7F2;
}

body.dark #header  a {
    color: #eee;
}

body.dark .application-box {
    background-color: transparent;
}

body.dark .order-status.estimate {
    color: #CF96D9;
}

body.dark .order-status.to-invoice,
body.dark .margin-negative {
    color: #e68f84;
}

body.dark .checkbox .input-helper::after {
    border-bottom: 2px solid #26ffeb;
    border-left: 2px solid #26ffeb;
}

body.dark .widget-section .title {
    color: inherit;
}

body.dark .margin-positive {
    color: #4CaF50;
}
body.dark table .hover-context:hover {
    background-color: #888;
    border: 1px solid #999;
}

body.dark .light-inline-button {
    background-color: transparent;
    color: #eee !important;
}


body.dark .product-row {
    border-bottom: 1px solid #999;
}

body.dark .customer-search-results, .product-search-results {
    background-color: #999;
    box-shadow: 3px 3px 3px #333;
    border: 0px;
}

body.dark .search-result-item.active, .search-result-item:hover {
    background-color: var(--cm-light-green-transparent);
}

body.dark .search-result-item {
    border-bottom: 1px solid #bbb;
}


body.dark .tab-nav li.active > a {
    color: #555;
}

.tab-nav li:first-of-type a {
    padding-left: 0px;
}

body.dark .tab-nav:not([data-tab-color]) > li > a::after {
    background: #666;
}
body.dark .tab-nav li > a {
    color: #eee;
}
body.dark .tab-nav {
    box-shadow: inset 0 -2px 0 0 #999;
}

.comments .comment-body {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ededed;
}

.comments .comment-body .date {
    align-self: flex-end;
    font-style: italic;
}

.team {
}

.team .member:first-of-type {
    border-top: 1px solid #ededed;
}

.general-block .table td {
    padding-left: 0px !important;
}
.team .member {
    display: flex;
    border-bottom: 1px solid #ededed;
    padding-top: 10px;
    padding-bottom: 10px;
}

.staff-modal .widget-section .items {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.text-preview {
    border: thin solid transparent;
    border-radius: 6px;
    min-height: 50px;
    cursor: text;
    position: relative;
}
.text-preview > .zmdi.zmdi-edit {
    position: absolute;
    top: 0px;
    right: 0px;
}

.text-preview:hover {
    cursor: pointer;
}

.text-preview:hover > .zmdi.zmdi-edit {
    color: var(--cm-yellow);
    cursor: pointer;
}

.weekday-selection-grid {
    grid-area: wd;
}


.weekday-selection-grid .weekdays .checkbox + .checkbox {
    margin-top: 10px;
}
.weekday-selection-grid .weekdays {
    display: flex;
}

.pricelist-products-panel .euro-field {
    display: inline;
}


.batch-update-widget > span > input,
.batch-update-widget > span > button,
.batch-update-widget > span > select {
    display: inline !important;
    width: 40px !important;
    margin-left: 5px;
    margin-right: 5px;
}
.batch-update-widget > span > button {
    width: auto !important;
}

.batch-update-widget > span > .euro-field {
    border: 1px solid #ccc;
    height: 20px;
    padding-left: 3px;
    padding-right: 3px;
    width: 40px;

}

.pricelist-customer-panel {
    position: relative;
}

.pricelist-customer-panel .search-results {
    position: absolute;
    top: 60px;
    left: 0px;
    background-color: white;
    width: 100%;
    style: cursor;
}

.product-discount-input-flex  {
    display: flex;
}

.invoice-buttons {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.invoice-buttons button {
    margin-top: 10px;
}

.invoice-editor-body {
    display: flex;
    padding-left: 5px;
}


.invoice-editor-body .estimate-template {
    margin-right: 20px;
}

.invoice-editor-body .invoice-sidebar {
    max-width: 540px;
}


.route-selector, .menu-cat-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.route-selector .checkbox {
    width: 130px;
    margin: 0px !important;
}

.menu-cat-selector .checkbox {
    margin: 0px !important;
}

dfn {
    font-style: normal !important;
    border-bottom: 1px dotted;
    cursor: help;
}

.searched-product-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

}

.searched-product-labels .product-label {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-right: 5px;
}

/* meals/menus service */
.menus-products-panel .date-section,
.menus-menu-block .date-section

{
    border-top: 1px solid #ededed;
    display: flex;
    flex-direction: column;
}
.menus-menu-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menus-menu-block-wrap {
    overflow-x: auto;
}

.menus-menu-block-wrap .menus-menu-block {
}

.menus-menu-block .menus-product-row-wrap {
}

.menus-product-rows menus-product{

}
.menus-product-rows {
    flex-grow: 1;
    border-left: 1px solid #ccc;
}

.menus-product-row-wrap {
    display: flex;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding-top: 2px;
}


.date-section-header .menus-product-row-wrap {
    border-bottom: 0px;
    border-top: 1px solid #ccc;
}

.menus-product-row-wrap .qty {
    padding-left: 4px;
    padding-right: 4px;
    display: flex;
    width: 38px;

}

.menus-product-row-wrap .qty input {
    display: inline-block;
    width: 32px;
}

.menus-product-row-wrap .price {
    padding-left: 4px;
    padding-right: 4px;
    display: flex;
    width: 72px;
}


.menus-product-row-wrap .price input {
    display: inline-block;
    width: 48px;
}
.menus-single-product-section th {
    font-size: 9px;
    text-transform: inherit !important;
}
.menus-menu-block-wrap > .flex {
    gap: 20px;
}


.menus-product-row-wrap div.price > div.m-r-5:first-of-type {
    margin-top: 7px;
}
.menus-product-row {
    display: flex;
    border-right: 1px solid #ccc;
    width: 100%;
}



.menus-product {
    border-bottom: 0px solid #ededed;
    margin-right: 5px;
    flex-grow: 1;
}

.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(1),
.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(3),
.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(4),
.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(5) {
    width: 130px;
}

.menus-menu-block-wrap .menus-product-row .menus-product:nth-of-type(2){
    width: 300px;
}

.menus-product, .menus-header{
    padding: 1px;
}

.menus-product-row-wrap .commands  {
    display: flex;
    align-items: center;
}

.menus-header {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 16px;
}

.menus-single-product-section td,
.menus-single-product-section th {
    padding: 1px !important;
}

.menus-search-product {
    position: relative;
}
.menu-modal-wrap .modal-header {
    padding-bottom: 0px !important;
}

.menus-product .inner {
    display: flex;
    justify-content: space-between;
}

.menus-product .inner > div:first-of-type {
    flex-grow: 1;
}

.menus-product-row-cols-2 .menus-product {
    width: 50%;
}
.menus-product-row-cols-3 .menus-product {
    width: 33.333%;
}
.menus-product-row-cols-4 .menus-product {
    width: 25%;
}

.menus-filter-bar > * {
    margin-right: 20px;
}

.menus-filter-bar {
    display: flex;
    align-items: top;
}

.menus-filter-bar-wrap {
    border: 1px solid #ededed;
    padding: 10px;
    border-radius: 6px;
}

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

.route-accordeon .route-accordeon-header {

}
.menu-customer-row {
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    border-bottom: 1px solid #ededed;
}

.menus-product .flag-icon {
    height: 9px;
    margin-top: 2px;
}


.menu-customer-row .customer-name {
    flex-grow: 1;
}

.menu-customer-row .customer_id {
    width: 50px;
}
.menu-customer-row .commands {
    width: 150px;
}


.menu-customer-checkbox-row {
    display: flex;
    align-items: baseline;
    border-bottom: 1px solid #ededed;
}

.menu-customer-checkbox-row .inactive {
    width: 120px;
}
.menu-customer-checkbox-row .checkbox {
    width: 230px;
}

.menu-customer-checkbox-row .customer-comment-box {
    flex-grow: 1;
    margin-left: 30px;
}

.labelname {
    width: 100px;
    padding-left: 2px;
    padding-right: 2px;
    border-right: 1px solid #ccc;
}

.menus-product-row-wrap .commands {
    width: 50px;
    display: flex;
    justify-content: center;
    gap: 5px;
}
.menus-product-row-wrap .commands > div {
    text-align: center;
}

.menus-product-th {
    border: none !important;
}


.image-text-widget-display .col-md-3 img,
.image-text-widget-display .col-md-4 img,
.image-text-widget-display .col-md-6 img {
    margin-top: 15px;
}

.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(odd) {
    background-color: #ededed;
}


.diet-chooser-grid {
    grid-template-columns: 1fr 1fr;
}


.order-filter-modal {
    display: flex;
    flex-direction: column;
    height: 100%;

}

.order-filter-modal .content-more {
    flex-grow: 1;
}


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

.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 .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 {
    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;
    background-color: white;
    flex-direction: column;
    margin-bottom: 30px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: border-box;

}

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

.estimate-page-wrap .page-footer {
    display: none;
}

.estimate-page:hover .page-footer {
    visibility: visible;
    gap: 10px;
    display: flex;
    justify-content: center;
    padding: 5px 10px;
    background-image: linear-gradient(220deg, rgb(53, 58, 101) 0%, rgb(53, 58, 101) 50%, rgb(53, 58, 101) 100%) ;
}


.estimate-page .page-footer .page-footer-icon .zmdi,
.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 .page-footer i.zmdi.transparent,
.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;
}

.estimate-page .page-footer i {
    cursor: pointer;
}

.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: relative;
    display: none;
    flex-direction: column;
    overflow: visible;
}
.section-toolbar-wrap:hover {
    display: flex;
}



.add-section-wrap {
}
.section-toolbar {
    background-color: rgba(0,0,0,0.3) !important;
}


.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;
    margin-top: 0px;
    /*    background-image: linear-gradient(220deg, rgb(53, 58, 101) 0%, rgb(53, 58, 101) 50%, rgb(53, 58, 101) 100%) ; */
    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-page.hovered .estimate-column {
}

.estimate-section-wrap:hover .estimate-column {
}
.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: var(--cm-light-green-transparent);
}

.estimate-viewer .estimate-section-wrap:hover .estimate-column {
    border-left: none;
    border-right: none;
    border-top: none;
}

.content-editor-wrap {
    position: relative;
}

.content-editor-wrap .ql-toolbar {
/*    position: absolute;*/
    background-color: white;
/*    bottom: 100%;*/ /* grows from the top ,neat. */
}
.content-editor-wrap .quil-editor .ql-editor {
}

.estimate-column-content {
    flex-grow: 1;
}
.estimate-column .drag-bar-wrap {
    width: 10px;
    height: 100%;
    position: absolute;
    height: 100%;
    z-index: 20;
    cursor: col-resize;
    box-sizing: border-box;
}

.estimate-column .drag-bar-wrap .drag-bar {
    width: 100%;
    height: 100%;
    visibility: hidden;
}

.estimate-column .drag-bar-wrap .drag-bar::before,
.estimate-column .drag-bar-wrap .drag-bar::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
}

.estimate-column .drag-bar-wrap .drag-bar::before {
    left: -7px;
    border-width: 6px 6px 6px 0;
    border-color: transparent var(--cm-yellow) transparent transparent;
}

/* Right arrow */
.estimate-column .drag-bar-wrap .drag-bar::after {
    right: -7px;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent var(--cm-yellow);
}

.estimate-column:hover .drag-bar-wrap .drag-bar {
    visibility: visible !important;
    background-color: var(--cm-yellow);

}

.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, .right-margin {
    user-select: none;
    position: absolute;
    padding: 5px;
    top: 50%;
    border-radius: 6px;
    background-color: var(--cm-yellow);
}

.drag-bar-wrap .left-margin {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    left: 0px;
}

.drag-bar-wrap .right-margin {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    right: 0px;
}

.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: 0px;
    height: 40px;
    width: 100%;
    z-index: 9999999;
    color: black !important;
    display: flex;
    justify-content: space-between;
    padding: 10px 10px;
}

.viewer-wrap .viewer-wrap-bar {
    display: none;
    cursor: pointer;
}

.viewer-wrap .zmdi.zmdi-edit {
   left: 15px;
}

.viewer-wrap .zmdi.zmdi-close {
    right: 15px;
    top: 3px;
}
.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;
}

.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 .toggle-switch, .reminders .toggle-switch {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.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-font-times { font-family: 'Times new Roman','serif' !important;}
.ql-font-Poppins { font-family: 'Poppins' !important; }
.ql-font-hipsterish { font-family: 'hipsterish' !important; }
.ql-font-Oswald { font-family: 'Oswald' !important; }
.ql-font-aloveofthunder { font-family: 'aloveofthunder' !important; }
.ql-font-gothic { font-family: 'gothic' !important; }
.ql-font-Montserrat { font-family: 'Montserrat' !important; }
.ql-font-MontserratBlack { font-family: 'Montserrat' !important;
                           font-weight: 900;}
.ql-font-Dosis { font-family: 'Dosis' !important; }
.ql-font-Gasalt { font-family: 'Gasalt' !important; }
.ql-font-Arquitecta { font-family: 'Arquitecta' !important; }
.ql-font-Roboto { font-family: 'Roboto' !important; }
.ql-font-Georgia { font-family: 'Georgia' !important; }
.ql-font-didot { font-family: 'didot' !important; }
.ql-font-campton { font-family: 'campton' !important; }
.ql-font-playfairdisplay { font-family: 'playfairdisplay' !important; }
.ql-font-akrobat { font-family: 'akrobat' !important; }
.ql-font-Arial { font-family: 'Arial' !important; }
.ql-font-lucida { font-family: 'Lucida Grande' !important; }
.ql-font-Courier { font-family: 'Courier new' !important; }
.ql-font-Courier-new { font-family: 'Courier new' !important; }
.ql-font-Helvetica { font-family: 'Helvetica' !important; }
.ql-font-Verdana { font-family: 'Verdana' !important; }
.ql-font-open {  font-family: 'Open Sans' !important;
                 font-weight: 400;}
.ql-font-openlight {  font-family: 'Open Sans' !important;
                      font-weight: 300;}
.ql-font-Saol { font-family: 'Saol','serif' !important;}
.ql-font-Acre { font-family: 'Acre','serif' !important;}



.ql-font .ql-picker-item[data-label="Poppins"]::before {
    font-family: "Poppins";
}


.ql-font .ql-picker-item[data-label="hipsterish"]::before {
    font-family: "hipsterish";
}

.ql-font .ql-picker-item[data-label="times"]::before {
    font-family: "Times new Roman", serif !important;
}

.ql-font .ql-picker-item[data-label="Dosis"]::before {
    font-family: "Dosis";
}

.ql-font .ql-picker-item[data-label="aloveofthunder"]::before {
    font-family: "aloveofthunder";
}


.ql-font .ql-picker-item[data-label="gothic"]::before {
    font-family: "gothic";
}

.ql-font .ql-picker-item[data-label="Oswald"]::before {
    font-family: "Oswald";
}

.ql-font .ql-picker-item[data-label="Montserrat"]::before {
    font-family: "Montserrat";
}

.ql-font .ql-picker-item[data-label="Montserrat Black"]::before {
    font-family: "Montserrat";
    font-weight: 900;
}

.ql-font .ql-picker-item[data-label="Roboto"]::before {
    font-family: "Roboto";
}

.ql-font .ql-picker-item[data-label="akrobat"]::before {
    font-family: "akrobat";
}
.ql-font .ql-picker-item[data-label="campton"]::before {
    font-family: "campton";
}

.ql-font .ql-picker-item[data-label="playfairdisplay"]::before {
    font-family: "playfairdisplay";
}


.ql-font .ql-picker-item[data-label="didot"]::before {
    font-family: "didot";
}
.ql-font .ql-picker-item[data-label="Georgia"]::before {
    font-family: "Georgia";
}
.ql-font .ql-picker-item[data-label="Arial"]::before {
    font-family: "Arial";
}

.ql-font .ql-picker-item[data-label="lucida"]::before {
    font-family: "Lucida Grande";
}
.ql-font .ql-picker-item[data-label="Courier"]::before {
    font-family: "Courier";
}
.ql-font .ql-picker-item[data-label="Helvetica"]::before {
    font-family: "Helvetica";
}

.ql-font .ql-picker-item[data-label="Verdana"]::before {
    font-family: "Verdana";
}

.ql-font .ql-picker-item[data-label="Open Sans"]::before {
    font-family: "Open Sans";
    font-weight: 400;
}

.ql-font .ql-picker-item[data-label="Open Sans Light"]::before {
    font-family: "Open Sans";
    font-weight: 300;
}

 .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    font-size: 14px !important;
}

 .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    font-size: 16px !important;
}

.ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    font-size: 18px !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;
}
.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;
}

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


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

.content-more .filter-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}


.filter-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.product-filter-widget-inner {
    display: flex;
    flex-direction: column;

}

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

.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 .estimate-page:hover .page-content {
    background-color: rgba(200,200,200,0.2);
}

.estimate-editor-v2 .page-content,
.estimate-viewer .page-content {
    overflow-y: auto;
}

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

.day-boxes {
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 10px;
}
.day-toggle-box {
    border: 1px solid #ededed;
    padding: 20px 10px;
    display: flex;
}

.day-toggle-box .toggle-switch label:first-of-type {
    width: 80px;
    display: inline-block;
}

.toggle-title {
    font-weight: bold;
}

.day-box-exclusions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;

}

.day-box-exclusions .day-toggle-box .toggle-title{
    width: 110px;
}

.toggle-switch-block {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    width: 100%;
}

.toggle-switch-block .btn {
    width: 100px;
}

.day-exclusion-group-days .day-toggle-box {
    padding: 5px 10px;
    box-sizing: border-box;
}

.day-exclusion-group {

}

.avail-unknown {
    color: #ccc;
}

.avail-available {
    color: green;
}

.avail-unavailable {
    color: red;
}

/* order show extra locations */

p.other-location {
    margin: 5px 0 0 0;
}

.no-margin-bottom {
    margin-bottom: 0;
}

ul li.other-loc {
    padding-bottom: 0;
}

.order-editor-grid .location-box.card .card-body.card-padding span.extra-location:before {
    content:"• ";
}

/* end order show extra locations */


.bgm-teal {
    background-color:  #2e8c81 !important;
}

.order-overview .price-summary {
    display: none;
}

.order-overview .bootgrid-table .price-header-summary {
    display: none;

}
.invoice-total-summary {
    margin-top: 20px;
}
.invoice-total-summary .totals {
    width: 120px;
}
/*.order-total-summary, .invoice-total-summary*/ .totals {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
/*.order-total-summary, .invoice-total-summary*/  .sum-by-status {
    width: 180px;
    display: inline-block;
}

@media (hover: hover) {
    td.commands .btn {
        background-color: transparent !important;
        color: black;
        box-shadow: none;

    }
    tr.editing td.commands .btn {
        background-color:  #2e8c81 !important;
        color: white;
        box-shadow: none;
    }

    .bootgrid-table tr.editing td.commands button .zmdi {
        color: white !important;
        visibility: visible !important;
    }

    td.commands .btn-danger:hover {
        color: var(--cm-color-danger) !important;
        background-color: var(--cm-color-danger-bg) !important;
    }

    td.commands .btn-info:hover {
        color: white !important;
        background-color: #40b2ca !important;
    }

    .bootgrid-table tr td.commands button.save {
        visibility: visible !important;
    }

    .bootgrid-table tr td.commands button .zmdi,
    .bootgrid-table tr td.commands button.delete,
    .bootgrid-table tr .extra-order-options-wrap {
        visibility: hidden;
    }

    .bootgrid-table tr:hover td.commands button .zmdi,
    .bootgrid-table tr:hover td.commands button,
    .bootgrid-table tr:hover .extra-order-options-wrap {
        visibility: visible;
    }


    .order-overview .price-summary {
        display: inline;
    }
    .order-overview .price-expanded {
        display: none;
    }

    .order-overview tr:hover .price-summary {
        display: none;

    }
    .order-overview tr:hover .price-expanded {
        display: inline;
    }

    .order-overview .bootgrid-table .price-header-summary {
        display: inline;
    }
    .order-overview .bootgrid-table .price-header-expanded {
        display: none;

    }
    .order-overview .bootgrid-table:hover .price-header-summary {
        display: none;

    }
    .order-overview .bootgrid-table:hover .price-header-expanded {
        display: inline;
    }



    .order-total-summary .total-incl-vat {
        display: none;
        animation: fadeOut 0.5s;
    }

    .order-total-summary:hover .total-incl-vat {
        display: inline;
        animation: fadeIn 0.5s;
    }

}

.cm-media-widget .cm-grid {
    max-height: 500px;
    overflow-y: scroll;
}

.progress-bar {
    background-color: #009688;
}

.bootgrid-table th {
    flex-direction: column;
    gap: 10px;
}

.invoice-action-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn {
    border-radius: 5px;
}

.btn-xs {
    border-radius: 3px;
}
.btn-lg {
    border-radius: 8px;
    text-transform: none;
}

.plan-name .starter {
    color: #91dce6;
}

.plan-name .fully-digital {
    color: #5f9299;
}

.plan-name .king-jungle {
    color: #e7be3d;
    font-weight: bold;
}

.plan-name .icon {
    font-size: 18px;
    margin-right: 10px;
}

/* google maps start */

#maps-modal {
    height: 400px;
}

.modal.google-maps .modal-header {
    padding: 5px 23px;
}

.modal-header .route-description {
    font-size: 0.8em;
    font-weight: 300;
    line-height: 1.3em;
}

.modal-header .route-description td:first-child {
    width: 8em;
}

.modal.google-maps div.modal-header > button > i.zmdi-close {
    padding-top: 10px;
}

/* google maps end */


.cm-label {
    margin-right: 20px;
    font-weight: bold;
    font-family: Panton-Regular;
    font-size: 18px;
    display: inline-block;
    min-width: 110px;
}
.cm-label.black {
    color: #888;

}
.cm-label.yellow {
    color: var(--cm-yellow);
}
.cm-label.green {
    color: var(--cm-green);

}

.orders-list > .card  {
    border-radius: 0px 0px 8px 8px;
}
.order-table-actions-wrap {
    border-bottom: 0px solid #edecec;
}

.orders-list > .card > .card-header {
    padding-left: 20px;
    border-bottom: 0px solid #edecec;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #f8f8f8;
    opacity: 0;
    animation: fadeOut 0.5s;
}

.container-fluid .block-header .actions {
    opacity: 0;
    animation: fadeOut 0.5s;
}

.orders-list:hover > .card > .card-header,
.container-fluid:hover .block-header .actions {
    visibility: visible;
    animation: fadeIn 0.5s;
    opacity: 1;
}

.orders-list > .card .card-header .actions {
    top: 7px;
}

.order-table-actions .filter-text {
    color: #888;
}

.tooltip-icon {
    position: relative;
}

.tooltip-icon:hover .zmdi,
li.dropdown:hover .zmdi{
    color: var(--cm-yellow);
}
.tooltip-icon:hover .zmdi-delete,
li.dropdown:hover .zmdi-delete,
.btn-secondary:hover .zmdi-delete {
    color: var(--cm-danger) !important;
}

.tooltip-icon .popup-tooltip {
    display: none;
    position: absolute;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.31);
    z-index: 9999;
    min-width: 400px;
    left: -350px;
    padding: 10px 20px;
    top: 43px;
    font-size: 14px !important;
    color: #5e5e5e !important;

}

.day-column .tooltip-icon .popup-tooltip {
    top: auto !important;

}


.vertical-alignment-top {
    bottom: 43px !important;
    top: auto !important;
}

/* Variation on the tooltip popup for inline search results */
.popup-search-results {
    display: block;
    position: absolute;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.31);
    z-index: 99;
    width: 400px;
    padding: 10px 20px;
    color: #333;
}

.sw-products .tooltip-icon .popup-tooltip {
    width: 282px;
    left: -134px;
    top: -91px;
    height: 84px;
}

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

}


.page-footer .popup-tooltip.alignment-left {
    left: -20px;
    top: 55px;
}
.page-footer .popup-tooltip.alignment-right {
    left: -343px;
    top: 55px;
}


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

}

.viewer-wrap-bar .zmdi {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
}

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

.sw-products .tooltip-icon .arrow {
    left: 134px;
    top: 82px;
    transform: rotate(180deg);
}

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

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

.estimate-editor-v2 .modal.from-right-wrap {
    z-index: 9999999999;
}
.estimate-document-settings {
    flex-direction: column;
}

.document-settings input {
    padding-left: 5px !important;
}

.viewer-wrap:hover .estimate-text-column-content {
    min-height: 40px;
}

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

/* Regarding cards with a cover image (background image) */
.card.cover-image {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position-x: center;
    background-position-y: top;
    cursor: pointer;

    opacity: 1;
    transition: 0.3s;
}

.cover-image .card-header {
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom-width: 0px;
}

.cover-image:hover {
    opacity: 0.8;
}

.cover-image:hover .card-header {
    border-bottom: medium solid var(--cm-green);
}

/* Regarding the overlay on the estimate-page-wrap in estimate preview */
.estimate-viewer:hover .overlay {
    display: flex;
    flex-direction: column;
}

.overlay {
    justify-content: flex-tart;
    align-items: center;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 2;
    cursor: pointer;
    background-color: rgba(0,0,0, 0.1);
    animation: fadeIn 0.3s;
}

.overlay .circle {
    height: 300px;
    width: 300px;
    top: 100px;
    position: absolute;
    background-color: var(--cm-green);
    color: white;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
}

.upsell .explainer a {
    color: var(--cm-yellow);
}
.upsell .explainer h3 {
    color: var(--cm-white) !important;
}
.overlay h2 {
    position: absolute;
    top: 50%;
    width: 300px;
    text-align: center;
    margin: 0px;
    transform: translateY(-50%);
    color: white;
}

.signature-expl {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: 30px;
}


/* Regarding estimate tooltips */
.estimate-document-settings {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.tooltip-icon.zmdi {
    color: #aaa;
    font-size: 12px;
}

.tooltip-icon.zmdi .popup-tooltip {
    color: rgb(94, 94, 94);
}

.help-button-nav {
    color: var(--cm-white);
    cursor: pointer;
    margin-top: 3px;
    font-size: 24px;
    margin-left: 100px;
    margin-right: 20px;
}

.help-button-nav:hover {
    border-color: var(--cm-yellow);
}

.view-estimate-box > .card-header {
}

.main-menu.starter .feature-ingredients a,
.main-menu.starter .feature-webshop a,
.main-menu.main-course .feature-webshop a
{
}

.upsell {
    gap: 20px;
    flex: 1;
    align-items: start;

}

.upsell .card {
    width: 800px;
    max-width: 50%;
}

.upsell.staff-upsell .card {
    width: 100% !important;
}

.shopping-list-preview img {
    border: 1px solid #eee;
    box-shadow: 3px 3px 3px #eee;

}

.upsell .explainer {
    background-color: var(--cm-green);
    color: var(--cm-white);
    padding: 25px;
}

.upsell .explainer h2 {
    color: var(--cm-white);
    font-size: 20px;
}

.upsell .explainer p {
    font-size: 15px;
    font-weight: 300;
}

.upsell .explainer button {
    background-color: var(--cm-yellow) !important;
    color: var(--cm-white) !important;
}

.upsell .videowrap {
    display: flex;
    gap: 30px;
    flex-direction: column;
    align-items: start;
    flex-grow: 1;
}


.upsell .videowrap .video {
    width: 100% !important;
    padding: 20px;
    border-radius: 8px;
    background-color: #000;
    height: 360px;
}

.required-input > input {
    background-color: var(--cm-danger-soft);
    animation: fadeIn 0.5s;
    border-radius: 8px;
}


.ql-snow .ql-editor h1,
.ql-snow .ql-editor h2,
.ql-snow .ql-editor h3,
.ql-snow .ql-editor h4,
.ql-snow .ql-editor h5,
.ql-snow .ql-editor h6
{
    margin-top: 9px;
    margin-bottom: 9px;
/*    font-size: inherit !important; */
}

.ql-editor {
    line-height: 1.54 !important;
}

.product-planning-products ul li {
    padding-left: 0px !important;
}

.product-planning-products .ql-indent-1 {
    padding-left: 10px !important;
}


.section-tabs {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.move-section-left,
.move-section-right{
    cursor: pointer;
}

.section-tab {
    display: flex;
    gap: 20px;
    padding: 10px 20px;
    border: 1px solid var(--cm-lines-color);
    border-radius: 20px;
    align-items: center;
}

.section-tabs > .tooltip-icon {
    font-size: 1.5em;
}

.section-tabs > .tooltip-icon,
.section-tab {
    cursor: pointer;
}

.section-tab.active {
    background-color: var(--cm-table-heading-bg-color);
    border: 1px solid var(--cm-green);
    color: var(--cm-table-heading-color);
}

.section-tab .zmdi.zmdi-edit:hover {
    color: var(--cm-yellow);
}

.section-tab .section-tab-title .unnamed {
}

.section-tab-title input {
    border: 1px solid var(--cm-yellow);
    background-color: inherit;
}

.section-tabs .section-tab:first-of-type .move-section-left,
.section-tabs .section-tab:last-of-type .move-section-right {
    display: none;
}

.move-section {
    background-color: #ededed;
    border-radius: 8px;
    width: 16px;
    height: 16px;
    text-align: center;
    color: black;
    line-height: 16px;
    padding-bottom: 8px;
}

.move-section:hover {
    background-color: #ccc;
}

.widget-editor {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.general-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.widget-toolbar.toolbar-fixed {
    background-color: white;
    border-radius: 6px;
    position: fixed;
    top: 90px;
    right: 20px;
    padding: 5px;
    z-index: 99999;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
    flex-direction: column;
}

.widget-toolbar .spacer {
    flex-grow: 1;
}


.future-concept-order-group .collapsed {
    display: none;
}
.future-concept-order-group .expanded {
    display: block;
}
.future-concept-orders {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ccc;
}

.future-concept-orders .future-concept-order-group-header {
    margin-bottom: 5px;
    padding-left: 20px;
    border-bottom: #ededed;
}
.future-concept-orders .fc-order {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: #ededed;
    padding-left: 20px;
    padding-right: 20px;
}

.future-concept-orders .fc-order > span:first-of-type {
    width: 140px;
}

.future-concept-orders .fc-order > span:nth-of-type(2) {
    width: 100px;
}

.future-concept-orders .fc-order > span:nth-of-type(3) {
    flex-grow: 1;
}
/*
.materials-editor .modal-body td:nth-child(2) {
    padding-left: 2em;
}
*/
.materials-editor .submit-button {
    padding: 20px 0;
    text-align: right;
}

.materials-table tbody td {
    text-align: right;
    padding-right: 10px;
}

.materials-table td {
    padding-right: 10px;
}

.materials-table td.product-name {
    text-align: left;
}

.product-name-cell .materials-availability {
    position: relative;
    cursor: pointer;
}

.new-product .textarea textarea {
    border: 1px solid #ccc !important;
    padding: 5px;
}

.not-enough-orders-hint {
    flex-grow: 1;
    margin-left: 30px;
}

.ai-results .table-responsive {
    margin: 30px 20px 0 0;
}

.header-inner .ai-button {
    position: fixed;
    z-index: -1;
    width: 100%;
    text-align: center;
}

.header-inner {
    padding: 0px !important;
}

.ai-button .yellow {
    color: rgb(253, 191, 15);
}

.ai-button a .white {
    color: rgb(255,255,255);
}
.ai-results .buttons input {
    margin-right: 5px;
}

.new-day-divider {
    position: relative;
}

.new-day-divider > td:first-of-type {
    position: relative;
}


/* todo add day abbrevs for each language :-) */
.new-day-divider.ma td:first-of-type::before { content: "ma"; }
.new-day-divider.di td:first-of-type::before { content: "di"; }
.new-day-divider.wo td:first-of-type::before { content: "wo"; }
.new-day-divider.do td:first-of-type::before { content: "do"; }
.new-day-divider.vr td:first-of-type::before { content: "vr"; }
.new-day-divider.za td:first-of-type::before { content: "za"; color: #888; }
.new-day-divider.zo td:first-of-type::before { content: "zo"; color: #888; }

.new-day-divider td {
    border-top: 2px solid #f6f6f6 !important;
}

.new-day-divider td:first-of-type::before {
    position: absolute;
    top:  0px;
    left: 0px;
    padding: 2px 6px;
    color: var(--cm-table-heading-color);
    border-radius: 0px 0px 6px 0px;
    background-color: var(--cm-table-heading-bg-color);
    font-size: 9px;
}

.new-day-divider.za td:first-of-type::before,
.new-day-divider.zo td:first-of-type::before {
}

.modal-color-picker-widget-modal .modal-dialog {
    width: 278px;
}

#webshop-preview-frame {
    min-height: 80vh;
    height: 900px;
    width: 100%;
    max-height: 100vh;
    border-radius: var(--cm-border-radius);
}

.border-type-button {
    background-color: #fff;
    height: 30px;
    width: 160px;
    color: white;
    position: relative;
    padding: 5px 5px 0px 0px !important;
    margin-right: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
}
.border-type-button.active {
    border: 1px solid #333;
}

.border-type-button-inner {
    height: 26px;
    width: 150px;
    position: absolute;
    z-index: 1;
    left: 0px;
    bottom: 0px !important;
    background-color: var(--cm-mid-gray);
    border-radius: 0px 0px 0px 4px;
}
.border-type-button-inner.shadow {
    height: 23px;
    background-color: #aaa;
    width: 145px;
}

.border-type-button.active .border-type-text {
    color: #333;
}

.location-times-widget .inline-datepicker {
    font-size: 0.8rem;
}

.border-type-text {
    position: absolute;
    z-index: 2;
    top: 6px;
    left: 0px;
    width: 160px;
    text-align: center;
    color: white;
}

.gap-5 {
    gap: 5px;
}
.gap-10 {
    gap: 10px;
}
.gap-20 {
    gap: 20px;
}
.gap-30 {
    gap: 30px;
}
.gap-40 {
    gap: 40px;
}
.add-product-or-title-bar {
    gap: 20px;
}


.cm-hidden {
    visibility: hidden;
}

.menus-header:hover .buttons .zmdi-copy {
    visibility: visible !important;
}

.logout-hint {
    border-radius: 6px;
    margin-bottom: 10px;
}


.w-background-video {
    position: relative;
    overflow: hidden;
    color: white;
}

.bg-video-hero {
	  position: absolute;
	  left: 0px;
	  top: 0px;
	  right: 0px;
	  bottom: 0px;
	  display: block;
	  width: 100%;
	  height: 100%;
    z-index: -1;
}

.bg-video-hero video {
    width: 100%;
}

.login-content .lc-block {
    background-color: rgba(255,255,255,0.96);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}

.login-content .lc-block .form-control {
    background-color: transparent;
}

.weekday-table .same-day,
.weekday-table .same-day select {
    color: #aaa;
}

.popup-tooltip {
    text-transform: none !important;
    font-weight: normal;
}

.extra-import-options {
   margin-top: 5px;
   font-size: 14pt;
   color: #777;
   width: 24px;
   cursor: pointer;
}
.extra-import-options-wrap {
   position: relative;
   width: 16px;
   text-align: center;
}
.extra-import-options-modal {
   position: absolute;
   width: 230px;
   z-index: 9999999 !important;
   right: 12px !important;
   top: 15px !important;
   left: inherit !important;
   display: block !important;
}

.flex-column {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    gap: 20px;
}
.flex-align-start {
    align-items: start;
    align-content: start;

}

.flex-row {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    gap: 20px;
}

.card-header .zmdi-info-outline {
    color: var(--cm-mid-gray);
}

.calendar-weekview {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

.day-category-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 5px;
    padding: 3px;
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px solid #ededed;
}
.calendar-weekview-range {
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 6px;
    min-width: 410px;

}
.calendar-weekview-header-wrap .pagination {
    margin-top: 0px;
    margin-bottom: 15px;
}
.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;
}

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

.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-group {
    flex-wrap: wrap;
    gap: 1px;
}

.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-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-844 .estimate-page.a4-portrait .page-content { /* cocktail agency , coeur*/
    max-height: auto !important;
}

.estimate-viewer.estimate-viewer-556 ul {
    list-style-type: square; /* J&K */
}

.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 {
     height: 100% !important;
     min-height: 120px !important;
     width: 100% !important;
     border: 0px solid var(--cm-light-gray);
     background-color: var(--cm-table-heading-bg-color);
 }
 .uppy-Dashboard-dropFilesHereHint {
     height: 100%;
 }

 .modal .upload-estimate-modal .modal-content {
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 .modal .upload-estimate-modal .modal-body {
     flex-grow: 1;
 }

 .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: #0f6eaf;
     color: #ededed;
     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;
}

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

.allergen-no-image {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: var(--cm-mid-gray);
    font-size: 8pt;
}

.date-view {
    width: 100%;
    min-height: 32px;
    border: 0px solid red;
}
.past {
    color: var(--cm-danger-soft: rgba(244, 67, 102, 0.62));
}

.quick-switcher {
    width: 35px;
    font-size: 8pt;
}
.su-button {
    justify-content: center;
    gap: 20px;
}

span.tag.add-tag {
   padding: 0px 14px;
}

span.tag {
    color: #ffffff;
    padding: 0px 5px;
    border-radius: 8px;
    background-color: var(--cm-green);
    margin-right: 5px;
    display: inline-block;
    line-height: 1.6em;
}

/* cs2.components.widgets.input classes */
.text-input {
    position: relative;
    max-width: 100%;
}

.zmdi-long-arrow-return {
    margin-top: 7px;
}

.search-input input {
    border-radius: var(--cm-button-border-radius) !important;
    padding-left: 30px !important;
}

.tag.fake {
    opacity: 0.5;
}

.text-input .input-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.2rem;
    border: 0px solid grey;
}


.text-input .key-icon {
    cursor: pointer;
    position: absolute;
    right: 0px;
    padding: 2px 10px;
    min-width: 40px;
    border: 1px solid grey;
    border-radius: 3px;
    background-color: var(--cm-very-light-gray);
}

.text-input .eye-icon {
    right: -38px !important;
    top: 7px;
    cursor: pointer;
    position: absolute;
    right: 0px;
    padding: 2px 10px;
    min-width: 40px;
    z-index: 1;
}

.password-input-with-icons .eye-icon  {
    right: 25px;
}

.search-input .key-icon {
    right: 8px;
}



/* cs2.components.widgets.tag-box classes */

.tag-box-wrap {
    flex-grow: 1;
    width: 100%;
    align-items: center;

}

.tag-box {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tag-wrap .tag {
    background-color: #ededed;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: inline-block;
    padding: 4px;
}

.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 table tr th:nth-of-type(2),
.product-overview-table table tr th:nth-of-type(5) {
    min-width: 120px;
}
.green-jumbo-button {
    position: relative;
}

.green-jumbo-button .type-title {
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: center;
    background-color: rgba(255,255,255,0.7);
}


.title-form input.form-control {
    font-size: 18px ;
    font-weight: bold;
}

.no-name-chosen .tab-nav,
.no-name-chosen .product-general-show-more {
    visibility: hidden;
}

.no-name-chosen .slide-down  {
    display: none;
}

.no-name-chosen .slide-down.customer-search-results  {
    display: block;
}

.tab-nav .empty-product-group a {
    color: var(--cm-yellow) !important;
}
.greyed-out-tab a {
    color: var(--cm-light-gray) !important;
}
textarea.form-control {
    border: 1px solid #e0e0e0 !important;
    padding: 5px !important;
}
.nodata {
    text-align: center;
}

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

.media-filter-panel .file-type {
    padding-right: 10em;
}

.media-filter-panel .tag-filter {
    display: flex;
}

.media-filter-panel .tag-filter .show-tags {
    line-height: 2.5em;
    padding-right: 1em;
}

.tag-filter .form-control {
    padding-left: 0.5em;
    background-color: #f1f1f1;
}

.tag-filter .tag-box {
    padding-left: 10px;
}

.tag-filter .tag-box-wrap {
    display: flex;
    flex-direction: row-reverse;
}

.tag-filter .arrowkeys .search-result-item:hover {
   background-color: transparent;
}

.tag-filter .mouse .search-result-item:hover {
   background-color: #ededed;
}

.tag-filter .search-result-item.active {
   background-color: #ededed;
}

.media-library .card {
    border-radius: 0px 0px 8px 8px;
    padding-bottom: 5px;
}
.tag-color-picker {
    cursor: auto;
}
.tag-color-picker ul {
    justify-content: flex-start;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.tag-color-picker .color {
    cursor: pointer;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
}

.production-overview-panel .production-overview-toolbar{
    justify-content: flex-end;
    gap: 20px;

}
.production-sort-key-widget {
    justify-content: flex-end;
}


.onboarding-step-body .expl.final-step {
    gap: 0px !important;
}
.onboarding-step-body .intro-video-wrap {
    height: auto !important;
}


.estimate-editor-v2 .catermonkey-menu-marker hr {
    color: red;
    background-color: red;
}

.estimate-view .catermonkey-menu-marker ,
.estimate-editor-v2 .catermonkey-menu-marker {
    display: none;
}

/*.estimate-editor-v2 .estimate-text-column-content:hover .catermonkey-menu-marker,*/
.ql-editor .catermonkey-menu-marker {
    display: block;
}

.selected-ui-language .flag-icon-wrap {
    cursor: pointer;
    padding: 10px;
}



.selected-ui-language .flag-icon-wrap.active {
    cursor: pointer;
    border: 1px solid var(--cm-light-gray);
    background-color: var(--cm-very-light-gray);
    border-radius: 6px;
}

.section .product-edit-row {
    width: 100%;
    gap: 20px;

}
.product-edit-row .product-edit-row-name {
    flex-grow: 1;
}
.product-edit-row-vat {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 120px;
}

.product-edit-row-vat  .tax-rate-input label {
    display: none;
}
.calendar-weekview-header {
}
.my-account-panel {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;


}
calendar-weekview-header .pagination {
    margin: 0;
}
ul.pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}


ul.pagination li.disabled a {
    background-color: var(cm-nav-color);
    color: var(--cm-mid-gray);
    border: 0px solid var(--cm-mid-gray) !important;
}

ul.pagination li a {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-green);
    border: none !important;
}
ul.pagination li a:hover {
    background-color: var(--cm-green);
    color: var(--cm-white);
}

ul.pagination li.active a {
    background-color: var(--cm-green) !important;
}


.week-num-header {
    background-color: var(--cm-white);
    border: 1px solid var(--cm-lines-color);
    color: var(--cm-green);
    padding: 8px 10px;
    border-radius: 20px;

}

.close-image-editor-settings img {
    max-width: 768px;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}
.image-editor-toolbar > div {
    align-items: baseline;
}

.image-editor-toolbar {
    flex-direction: column;
    gap: 5px;}

.estimate-preview-tiles {
    margin-bottom: 20px;
    justify-content: space-between;
    gap: 40px;
}

.estimate-preview-tiles .estimate-preview-tile {
    width: 180px;
    height: 180px;
    border-radius: 6px;
    text-align: center;
    valign: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    background-color: var(--cm-green);
    color: var(--cm-white);
    font-weight: bold;
    font-size: 29px;
    background-size: cover;
}





.estimate-choice-completed .zmdi-email {
    font-size: 98px;
}

.estimate-preview-tiles .estimate-preview-tile:hover {
    color: var(--cm-pale-yellow);
}


.estimate-preview-tiles .tile-vintage {
    font-family: courier;
    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: -17px;
    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;
}

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

.memoize-expand-toggle.orders {
    grid-area: memoize-expand;
    text-align: right;
    margin-right: 5px;
}

@media screen and (max-width: 640px) {
    .view-options-settings {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        width: 100%;
    }
    .orders-list .select.filter-macro {
        display: none;

    }
    .calendar-weekview {
    }
    .order-editor-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .products-box > .card-body  {
        overflow-x: auto;
    }
    .products-box > .card-body > div {
        min-width: 800px;
    }

    .calendar-weekview-header-wrap {
        flex-direction: column;
        gap: 10px;
        margin-top: 5px;
    }
    .calendar-weekview-header-wrap .calendar-weekview-header {
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;

    }
    .calendar-weekview-range {
        display: flex;
        flex-direction: column;
        gap: 5px;

    }
    .card-header .actions,
    .card-header  {
        flex-direction: column;
        gap: 10px;

    }

}

.food-cost-card-hidden {
    display: none;
}

.food-cost-card {
    grid-area: ingredients;
}

.duplication-dates {
    display: flex;
    flex-direction: column;
    gap: 5px;

}
.duplication-dates-wrap {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.duplication-dates-wrap > button {
    margin-top: 2px;
}
.ingredients-overview-grid th.commands .commands-inner,
.invoices-overview-grid th.commands .commands-inner {
    display: none;
}

.invoices-overview-grid th:nth-of-type(7) > span {
    display: none;
}
.invoices-overview-grid .checkbox-wrap {
    position: absolute;
    background: white;
    padding: 10px;
    box-shadow: 3px 3px 3px #ccc;
    border: 1px solid #ccc;
}

.estimate-editor-v2 .estimate-page-hidden {
}

.estimate-editor-v2 .estimate-page-wrap .estimate-page {
    position: relative;
}

.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.hidden-page-hide-info {
    display: none;
}

.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask .hidden-page-icon {
    color: var(--cm-dark-green-transparent);
    font-size: 196px;
}

.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask:hover .hidden-page-icon {
    display: none;
}

.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask:hover .hidden-page-hide-info {
    display: block;
    color: white !important;
    padding: 40px;
    background-color: var(--cm-dark-green-transparent);
    border-radius: 16px;
    font-family: 'figtree';
    font-weight: 300;
    max-width: 70%;

}
.estimate-editor-v2 .estimate-page-wrap  .hidden-page-mask:hover .hidden-page-hide-info a {
    color: var(--cm-white);
    font-weight: bold;
}

.hidden-page-hide-info .title {
}

.hidden-page-hide-info .expl {

}

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

.webshop-products-tab {
    min-height: 500px;
}

.final-step a {
    color: var(--cm-yellow);
}
.tag-grid .tag-color-picker h4 {
    display: none;
}

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

.link-microsoft {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items: center;
}

.link-microsoft > div {
    padding: 10px;
}

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


.prep-list-grid {
    display: grid;
    gap: 0px;
    overflow: auto;
}
.prep-list-grid:hover {
   padding-bottom: 80px;
}


.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;
    max-width: 100px;
}
.prep-list-grid .comment-wrap {
    position: absolute;
    left: -2px;
    top: -6px;
}

.prep-list-grid .zmdi-comment-outline,
.prep-list-grid .zmdi-comment
{
    color: var(--cm-color-danger-bg)
}

.prep-list-grid .product-quantity .grid-cell-contents {
    width: 100%;
    justify-content: flex-end;
    text-align: right;
}
.prep-list-grid .product-spacer {
    border: none;
}
.preparation-list-wrap > .card {
    margin-bottom: 20px;
}

.grid-cell.product-total {
    text-align: right;
}

.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;
}
@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: inherit !important;
}

.coeur-table div.event-header {
    font-weight: bold;
}
.coeur-table .row-title {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-table-bg-color);
}
.coeur-table .row-empty {
    display: none;
}
.coeur-table td.quantity .quantity {
    flex-direction: row-reverse;
}

.coeur-cards {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    margin-bottom: 20px;
}

.shopping-list-tables {
    margin-top: 20px;
}

.shopping-list-tables .card {
    margin-bottom: 20px;
}

.shopping-list-tables .header-row td {
    background-color: var(--cm-table-heading-bg-color);
    color: var(--cm-table-headig-color);
}

.shopping-list-tables .quantity-chooser input {
    width: 60px;
    text-align: center;
}
.shopping-list-tables .card {
    overflow-x: auto;
}
.shopping-list-tables .supplier-row,
.shopping-list-tables .order-row
{
    display: none;
}

@media screen and (max-width: 400px) {
    .shopping-list-tables tr td:nth-of-type(2),
    .shopping-list-tables tr td:nth-of-type(3),
    .shopping-list-tables tr td:nth-of-type(5),
    .shopping-list-tables tr td:nth-of-type(8),
    .shopping-list-tables tr td:nth-of-type(9)
    {
        display: none;
    }

    .shopping-list-tables   .quantity-chooser > .flex {
        gap: 5px;
    }
    .shopping-list-tables .quantity-chooser input {
        width: 40px;
    }
    .shopping-list-tables .table > tbody > tr > td:first-child
    {
        padding-left: 2px !important;

    }
}

.product-header-product-group .grid-cell-contents,
.product-header-order .grid-cell-contents,
.product-group-total .grid-cell-contents {
    flex-direction: row-reverse;
    text-align: right;
}

.grid-cell .zmdi-alert-circle {
    color: var(--cm-danger);
}

.recipe-presentation img,
.recipe-body img {
    max-width: 500px;
}

.mat-list-appears-in-wrap h3 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.material-list-ta {
    min-width: 325px;
    height: 150px;
}

.material-list-grid tr th:first-of-type {
    width: 75px;
}
.material-list-grid tr th:nth-of-type(2) {
    width: 100px;
}
.material-list-grid tr th:nth-of-type(3) {
    width: 300px;
}

.delivery-list-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    column-gap: 10px;
    row-gap: 10px;
    grid-template-areas:
        "delivery-date delivery-contents delivery-comments"
        "delivery-address delivery-contents delivery-comments" ;
    margin-bottom: 40px;
}

.delivery-list-cell {
    padding: 10px;
    border: 1px solid var(--cm-lines-color);
    border-radius: var(--cm-border-radius);
}

.delivery-list-comments {

}
.delivery-list-comment {
    border-bottom: 1px solid var(--cm-lines-color);
    padding-bottom: 10px;
    padding-top: 10px;
}


@media screen and (max-width: 800px) {
    .delivery-card-header {
        flex-direction: column;
        justify-content: flex-start;

    }
    .delivery-list-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}