/* ========================================
   Font Definitions and Quill Font Classes
   ======================================== */

/* @font-face Declarations */

/*
 * 'Courier new' is rebound to Courier Prime (OFL, full glyph coverage
 * including €, with proper bold/italic/bold-italic weight files).
 * This keeps the legacy 'Courier new' identifier in templates, Quill
 * classes, and CSS rules working unchanged while shipping a font with
 * € + smart quotes that matches what the backend PDF pipeline now
 * renders. Without this, the browser falls back to the host's system
 * Courier New which (a) doesn't exist on every machine and (b) drifts
 * visually from what the PDF produces.
 */
@font-face {
    font-family: 'Courier new';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/courier-prime/CourierPrime-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Courier new';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/courier-prime/CourierPrime-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Courier new';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/courier-prime/CourierPrime-Italic.ttf') format('truetype');
}
@font-face {
    font-family: 'Courier new';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/courier-prime/CourierPrime-BoldItalic.ttf') format('truetype');
}

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


/* Figtree, one face per weight the app actually asks for.
   
   Only Regular was declared, at weight 300 — so every `font-weight: 500/600/700`
   in the product had no cut to switch to and the browser synthesised one by
   thickening the Regular outline. Synthetic bold has no optical compensation:
   counters fill in and joins clog, which is why our bold read heavier than
   Figtree's own Bold.

   300 stays Regular deliberately. `body` sets `font-weight: 300`, so mapping it
   to Figtree-Light would restyle every piece of body text in the product —
   a separate decision from fixing the bolds, and not one to make by accident.
   The Light file is there when we want it. */
@font-face {
    font-family: figtree;
    src: url('../fonts/figtree/Figtree-Regular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal
}
@font-face {
    font-family: figtree;
    src: url('../fonts/figtree/Figtree-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal
}
@font-face {
    font-family: figtree;
    src: url('../fonts/figtree/Figtree-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal
}
@font-face {
    font-family: figtree;
    src: url('../fonts/figtree/Figtree-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal
}
@font-face {
    font-family: figtree;
    src: url('../fonts/figtree/Figtree-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal
}

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

@font-face {
    font-family: Dekar;
    src: url('../fonts/dekar/Dekar-Regular-400.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Parasupreme;
    src: url('../fonts/parasupreme/parasupreme.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: Quelgira;
    src: url('../fonts/quelgira/quelgira.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Bilo;
    src: url('../fonts/bilo/bilo.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}


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


@font-face {
    font-family: WorkSansLight;
    src: url('../fonts/worksans/WorkSans-Light.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: Aptos;
    src: url('../fonts/aptos/aptos.ttf') format('truetype');
    font-weight: 400;
    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;
    display: flex;
    flex-direction: column;
}

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

.internal-comments-box .table tbody tr td,
.comments-box .table tbody tr td {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

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

/* Only the body enters edit mode, so only the body says so: the cursor and
   the pencil follow the body's hover, not the card's. */
.card.card-editable:not(.card-editing) > .card-body {
    position: relative;
    cursor: pointer !important;
}

.card-edit-pencil {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--cm-light-gray);
    border-radius: 50%;
    background: var(--cm-white);
    color: var(--cm-green);
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 120ms ease, transform 120ms ease,
                background-color 120ms ease, color 120ms ease;
}
.card-editable > .card-body:hover .card-edit-pencil,
.card-edit-pencil:focus-visible {
    opacity: 1;
    transform: none;
}
.card-edit-pencil:hover {
    background: var(--cm-green);
    border-color: var(--cm-green);
    color: var(--cm-white);
}
/* Touch has no hover to reveal it with. */
@media (hover: none) {
    .card-edit-pencil {
        opacity: 1;
        transform: none;
    }
}

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

/* Collapsing slides rather than snaps. The card is a two-row grid and only the
   body row animates, between `1fr` and `0fr`, so nothing has to measure a height
   and the body needs no wrapper element. `min-height: 0` is what lets a grid
   item shrink below its own content.

   Clipping is scoped to the collapsed state deliberately: an expanded card holds
   inline-positioned popups (dropdowns, date pickers) that are allowed to leave
   its body, so `overflow` must not stay `hidden`. It flips to `hidden` as a
   collapse starts and back to `visible` only once an expand has finished — that
   is what the delay on the open direction buys. Keep that delay equal to the
   duration below; a shorter one unclips the body before it has finished
   opening.

   140ms, not longer: a height animation is main-thread layout, and the cost is
   not the card's own content but every card BELOW it moving each frame (22
   cards on Instellingen > Algemeen measured 2.8ms median, 5.5ms p95 per frame
   against a 16.7ms budget — comfortable on a fast machine, tight on a slow
   one). Containment does not help; the work is outside the card. Fewer frames
   is the only lever that does. */
.card.card-expandable {
    display: grid;
    grid-template-rows: auto 1fr;
    /* Mid-transition the fr track is smaller than the content the card is
       sized for, and the default `stretch` hands that gap to the `auto`
       header track — the header visibly grows and shrinks with every toggle. */
    align-content: start;
    transition: grid-template-rows 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Grid items default to `min-width: auto`, so one wide child (a table, a
   two-column form) would widen the column track and push the header and body
   past the card's own edge. Pin them to the card; wide content overflows or
   scrolls inside the body instead. */
.card.card-expandable > .card-header,
.card.card-expandable > .card-body {
    min-width: 0;
}

/* The padding goes with it. `box-sizing: border-box` is global, so a body with
   vertical padding cannot render shorter than that padding however small its
   grid track is — left in, a collapsed card shows a sliver of its own first
   line through the gap. */
.card.card-expandable > .card-body {
    min-height: 0;
    transition: padding 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

.card.card-expandable:not(.card-collapsed) > .card-body {
    overflow: visible;
    transition: padding 140ms cubic-bezier(0.4, 0, 0.2, 1),
                overflow 0s 140ms allow-discrete;
}

.card.card-expandable.card-collapsed {
    grid-template-rows: auto 0fr;
}

.card.card-expandable.card-collapsed > .card-body {
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition: padding 140ms cubic-bezier(0.4, 0, 0.2, 1),
                overflow 0s allow-discrete;
}

@media (prefers-reduced-motion: reduce) {
    .card.card-expandable {
        transition: 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-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: 10px 20px 10px 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

}

/* Collapse toggle floats as a little "ear" straddling the sidebar's right
   edge, low down so it never pushes the logo down or overlaps a menu/footer
   icon. It is a sibling of #sidebar (inside #main) so it can protrude past
   the sidebar's clipped edge; its left offset follows the sidebar width. */
.nav-toggle-wrap {
    position: fixed;
    bottom: 110px;
    z-index: 1050;
    transition: left 0.2s ease;
}
/* Expanded: there's room, so keep it tucked inside the sidebar's right edge. */
.nav-toggle-wrap.expanded {
    left: 232px;   /* sidebar is 268px wide — ~8px in from the right edge */
}
/* Collapsed: the 50px bar is too narrow, so let it stick out as a half ear
   flush against the bar's right edge. */
.nav-toggle-wrap.collapsed {
    left: 50px;
}
.nav-toggle-wrap .nav-toggle {
    color: var(--cm-white);
    font-size: 23px;
    cursor: pointer;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color 0.15s ease;
}
/* Expanded: subtle, blended into the sidebar (as before). */
.nav-toggle-wrap.expanded .nav-toggle {
    background-color: var(--cm-dark-green-transparent);
}
.nav-toggle-wrap.expanded .nav-toggle:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
/* Collapsed: solid half 'ear' — flat against the bar on the left, rounded on
   the protruding right — so it reads as a tab attached to the sidebar edge. */
.nav-toggle-wrap.collapsed .nav-toggle {
    background-color: var(--cm-green);
    box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.25);
    border-radius: 0 50% 50% 0;
}
.nav-toggle-wrap.collapsed .nav-toggle:hover {
    background-color: var(--cm-light-green);
}

.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-no-border {
    border: none !important;
}




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

/* A field label is a caption: it names the thing, and the value is what people
   came to read. It was bold — the same weight as a drawer title — which made
   every form shout. (`app.1.min.css` already sets 500; this rule loads after it
   and was putting it back to bold.)

   The caption/content distinction is now carried by COLOUR alone, with weight
   left flat at 400 through the body of a form. One distinction, one signal,
   marked the same way in every row — which is what the eye reads as rhythm.
   It also frees weight to mean one thing only: headings. */
label {
    font-weight: 400;
    color: var(--cm-table-heading-color);
}

/* Inline emphasis sits on the same step as the headings (h3/h4 are 500/600),
   not two steps up: at a 300 body, bootstrap's 700 reads as a different face
   rather than a stronger weight of this one. */
b, strong {
    font-weight: 600;
}

/* Except when the label IS the control's text. A checkbox or radio label wraps
   its own input, so it is content rather than a caption — greying it makes the
   option look disabled. Kept as two rules on purpose: a selector list is
   dropped whole if any part of it fails to parse, so the class-based restore
   must not share a rule with the `:has()` one. */
.checkbox label,
.radio label {
    color: inherit;
}

label:has(input),
label:has(select),
label:has(textarea) {
    color: inherit;
}

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

/* 12h time picker - integrated input + AM/PM toggle */
.time-picker-12h {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid black;
  border-radius: var(--cm-border-radius);
  overflow: hidden;
}
.time-picker-12h input {
  border: none;
  outline: none;
  padding: 2px 10px;
  min-width: 60px;
  max-width: 80px;
  font-size: inherit;
}
.time-picker-12h .ampm-toggle {
  display: flex;
  border-left: 1px solid var(--cm-lines-color);
}
.time-picker-12h .ampm-toggle button {
  border: none;
  background: var(--cm-white);
  padding: 2px 10px;
  cursor: pointer;
  font-size: inherit;
  color: var(--cm-mid-gray);
}
.time-picker-12h .ampm-toggle button.btn-primary {
  color: var(--cm-white);
  background: var(--cm-font-color);

}

/* Locale-aware date picker - text input + native calendar trigger */
.datepicker-formatted {
  position: relative;
  display: inline-block;
}
.datepicker-formatted > input[type="text"] {
  padding-right: 28px;
}
.datepicker-calendar-trigger {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.datepicker-formatted::after {
  content: '';
  position: absolute;
  right: 8px;
  top: calc(50% - 2px);
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 1;
  background-color: var(--cm-font-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='1' y='3' width='14' height='12' rx='1.5'/%3E%3Cline x1='1' y1='7' x2='15' y2='7'/%3E%3Cline x1='5' y1='1' x2='5' y2='4.5'/%3E%3Cline x1='11' y1='1' x2='11' y2='4.5'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='1' y='3' width='14' height='12' rx='1.5'/%3E%3Cline x1='1' y1='7' x2='15' y2='7'/%3E%3Cline x1='5' y1='1' x2='5' y2='4.5'/%3E%3Cline x1='11' y1='1' x2='11' y2='4.5'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
}

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

.quil-editor.has-light-text .ql-editor {
    background-color: #555;
}

.cm-comment-default-color,
.cm-comment-default-color * {
    /*color: inherit !important;*/
    background-color: transparent !important;
    background-image: none !important;
}

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

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

/* Touch has no hover to reveal this with: the phone would see a 90px blank
   strip above the comment editor instead of its toolbar. */
@media (hover: none) {
    .card .card .ql-toolbar {
        visibility: visible;
    }
}


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:not(.check) {
    min-width: 100px;
}

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-table-line-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;
    /* vh, not vw: this is the dimming backdrop behind every right-hand drawer.
       On a landscape screen 100vw overshoots the height and nothing shows; on a
       portrait one it falls short, and the bottom of the page sits undimmed
       below the overlay. */
    height: 100vh;
    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;
}

/* Product type-picker cards carry a large photo, not the default 70px circular
   icon. Size the slot to the image (don't force the 70px circle) and keep it
   from shrinking/overflowing into the text column at narrow widths. CAT-773 */
.modal-action-item .modal-action-icon:has(.type-button-icon) {
    min-width: auto;
    height: auto;
    flex-shrink: 0;
    background-color: transparent;
    border-radius: 0;
}
.modal-action-item:has(.type-button-icon) .modal-action-wrap {
    min-width: 0;
}



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

/* App-icon grid for tools modals, iOS home-screen style: the ICON is the card
   (white, hairline outline, small shadow) and the label hangs below it — the
   icon+label pair itself has no box. Tiles arrive wrapped in the
   compact-tooltip <span>, so the span is the grid child. */
.modal-actions-grid {
    display: grid;
    /* The column floor must hold the longest one-word label at 12.5px/500
       ("Opdrachtoverzicht" is ~106px), or `overflow-wrap: anywhere` on the
       title cuts it mid-word at 100% zoom on a narrow modal. */
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 22px 10px;
    /* `.modal .modal-body` scrolls, so it clips at its own top edge and the top
       row's 2px hover lift and the shadow above it fall outside it. The padding
       reserves that room and the negative margin takes it back, so the grid sits
       where it did and the lift stays inside the scroll box. */
    padding-top: 8px;
    margin-top: -8px;
}
.modal-actions-grid > span {
    display: block;
}
.modal-action-item.modal-action-tile,
.modal-action-item.modal-action-tile > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-align: center;
}
.modal-action-item.modal-action-tile {
    margin-bottom: 0;
    padding: 0;
    border: none;
}
.modal-action-item.modal-action-tile:hover {
    border: none;
}
/* The app icon: squircle on the card surface language — white, thin outline,
   contact shadow. Hover keeps the house yellow fill and lifts it slightly. */
.modal-action-tile .modal-action-icon {
    min-width: 72px;
    width: 72px;
    height: 72px;
    font-size: 34px;
    border-radius: 17px;
    background-color: var(--cm-white);
    border: 1px solid var(--cm-lines-color);
    box-shadow:
        0 1px 2px rgba(16, 24, 32, 0.05),
        0 6px 16px -8px rgba(16, 24, 32, 0.10);
    transition: transform 0.15s ease, box-shadow 0.15s ease,
                background-color 0.15s ease, border-color 0.15s ease;
}
.modal-action-item.modal-action-tile:hover .modal-action-icon {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow:
        0 1px 2px rgba(16, 24, 32, 0.06),
        0 10px 22px -8px rgba(16, 24, 32, 0.18);
}
.modal-action-item.modal-action-tile.disabled:hover .modal-action-icon {
    transform: none;
}
/* Image icons (Routelogic, Moneybird) must stay inside the squircle. */
.modal-action-tile .modal-action-icon img {
    max-width: 40px;
    max-height: 40px;
}
.modal-action-tile .modal-action-tile-title {
    color: var(--cm-dark-green);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.modal-action-tile.disabled .modal-action-tile-title {
    color: var(--cm-mid-gray);
}

/* Grid/list switch for the tools modals: lives in the modal header, just left
   of the close button (the customer-editor title-row pattern). */
.modal-actions-view-toggle {
    display: flex;
    gap: 8px;
}
.modal-actions-view-toggle button {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1px solid var(--cm-lines-color);
    border-radius: 6px;
    background: var(--cm-white);
    color: var(--cm-mid-gray);
    cursor: pointer;
    padding: 0;
}
.modal-actions-view-toggle button.active {
    background: var(--cm-dark-green);
    border-color: var(--cm-dark-green);
    color: var(--cm-white);
}
.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) {
    /* On mobile these drawers should fill the viewport. Use 100vw, not 100%:
       the dialog is position:fixed, so width:100% resolves against its
       containing block, which tracks window.innerWidth (here 427px) rather than
       the visible layout viewport (documentElement.clientWidth, 390px) — leaving
       the drawer wider than the page so its content spilled past the edges. The
       .modal.from-right-wrap parent already sizes with 100vw and lands correctly
       on the layout viewport; match it. Also zero the inherited 10px side margins
       so 100vw + margins doesn't re-introduce overflow. */
    .modal-dialog.from-right {
        margin-left: 0;
        margin-right: 0;
        /* Anchor to the visible viewport's left edge. The base rule pins
           right:0, but "right" (like width:100%) references the position:fixed
           containing block — innerWidth (427px), not the layout viewport
           (390px) — which shoved the drawer off the right. left:0 + right:auto
           aligns it to the page. */
        left: 0;
        right: auto;
    }
    .modal-dialog.from-right.third {
        width: 100vw;
    }
    .modal-dialog.from-right.half {
        width: 100vw;
    }
    .modal-dialog.from-right.two-thirds {
        width: 100vw;
    }
    .modal-dialog.from-right.three-fourths {
        width: 100vw;
    }

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


}

@media screen and (max-width: 475px) {
    /* 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;
    overscroll-behavior: contain;
}

/* The content box is the drawer's scroller, so its height must be the drawer's
   own — `100vh` inside a `98vh` dialog put the foot of the modal under the edge
   of the screen while the scroller still believed everything fitted, which is
   what made the bottom of a long modal unreachable. */
.modal-dialog.from-right.full > .modal-content {
    height: 100%;
    max-height: 100%;
}

/* A mobile browser's `vh` is the viewport with the URL bar scrolled away, so a
   `100vh` drawer always runs that bar's height past the bottom of the screen.
   `dvh` tracks what is actually visible. */
@supports (height: 100dvh) {
    .modal-dialog.from-right .modal-content {
        height: 100dvh;
        max-height: 100dvh;
    }

    .modal-dialog.from-right.full {
        height: 98dvh;
    }
}


html:not(.ie9) .select::before {
    background-image: url("../img/caret.png") !important;
    background-size: 20px 20px;
    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;
}

/* Quill Editor Font Classes */

.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-Borderline { font-family: 'Borderline' !important; }
.ql-font-Dekar { font-family: 'Dekar' !important; }
.ql-font-Parasupreme { font-family: 'Parasupreme' !important; }
.ql-font-Bilo { font-family: 'Bilo' !important; }
.ql-font-WorkSans { font-family: 'WorkSans' !important; }
.ql-font-WorkSansLight { font-family: 'WorkSansLight' !important; }
.ql-font-Aptos { font-family: 'Aptos' !important; }
.ql-font-Quelgira { font-family: 'Quelgira' !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-font .ql-picker-item[data-label="Borderline"]::before {
    font-family: "Borderline";
}

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

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

.ql-font .ql-picker-item[data-label="Bilo"]::before {
    font-family: "Bilo";
}
.ql-font .ql-picker-item[data-label="WorkSans"]::before {
    font-family: "WorkSans";
}
.ql-font .ql-picker-item[data-label="WorkSans Light"]::before {
    font-family: "WorkSansLight";
}
.ql-font .ql-picker-item[data-label="Aptos"]::before {
    font-family: "Aptos";
}
.ql-font .ql-picker-item[data-label="Quelgira"]::before {
    font-family: "Quelgira";
}