/* Own basic classes */
.ls-container, .ls-container-full {
    background-color: var(--white);
    border-radius: var(--default-rounding);

    display: flex;
    width: 100%;
    flex-direction: column;

    & > .section, & > section {
        width: 100%;
        padding-right: var(--site-sections-horizontal-padding);
        padding-left: var(--site-sections-horizontal-padding);
    }

    & > .section-title {
        display: flex;
        align-items: center;

        h1 {
            /* Fix for cap trimming */
            height: 2rem;
            line-height: 1.5rem;
        }

        padding-top: 1.1rem;
        padding-right: var(--site-sections-horizontal-padding);
        padding-left: var(--site-sections-horizontal-padding);
        padding-bottom: 0.35rem;
    }

    & > .section-title:not(.without-border) {
        border-bottom: 2px solid var(--body-bg-color);
    }
}

/* FullHeight page version */
.ls-container-full {
    min-height: calc(100dvh - var(--header-height));
}

.account-box {
    display: flex;
    justify-content: center;
    width: 100%;

    & > section {
        background-color: var(--white);
        border-radius: var(--default-rounding);
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: var(--shadow-basic);
        width: var(--mobile-full-width);

        & > div {
            width: 100%;
        }
    }
}

/* Dialogs */

.ls-dialog {
    .e-dlg-header-content {
        padding: var(--dialog-padding-header);
    }

    .e-dlg-content {
        padding: var(--dialog-padding-content);
    }

    .e-footer-content {
        padding: var(--dialog-padding-footer);
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: var(--default-flex-gap);

        .ls-btn-full-block {
            flex-grow: 1;
            margin: 0; /* Syncfusion btns has margin left 8px... */
        }

        .ls-btn-min-width-120 {
            width: 120px;
            flex-shrink: 1;
            margin: 0;
        }
    }
}


article {
    padding: 0 !important;
}

.main-article {
    gap: var(--default-flex-gap);
    margin-left: var(--margin-horizontal-main);
    margin-right: var(--margin-horizontal-main);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

html {
    min-height: 100dvh; /* full minheight on mobile */
    background-color: var(--bg-color);
}

/* Can be upgraded in the future for border etc*/
ul.validation-errors {
    list-style-type: none;
    margin: 0;
    padding: 0;

    li.validation-message {
    }
}

.validation-message {
}

/* LS - Basic styling */

.ls-flex {
    display: flex;
    align-items: center;
    width: 100%;

    &.ls-space-between {
        justify-content: space-between;
    }

    &.ls-reverse {
        flex-direction: row-reverse;
    }

    &.right {
        justify-content: flex-end;
    }

    &.center {
        justify-content: center;
    }

    &.stretch {
        justify-content: stretch;
    }

    &.align-center {
        align-items: center;
    }
    &.flex-wrap {
        flex-wrap: wrap;
    }
}

.ls-flex-column {
    display: flex;
    flex-direction: column;
    width: 100%;

    &.center {
        align-items: center;
    }
}

.ls-gap1 {
    gap: var(--half-flex-gap);
}

.ls-gap2 {
    gap: var(--default-flex-gap);
}

/* LS - Left Shift specific element styling */
.ls-virtualize {
    overflow-y: scroll;
}

.ls-border-divider {
    width: 100%;
    border-bottom: 2px solid var(--body-bg-color);
}

.ls-icon-text {
    display: flex;
    align-items: center;
    gap: var(--half-flex-gap);
}

/* LS - syncfusion buttons */
.ls-wide-button {
    width: 100%;
    max-width: 95vw;
}

.ls-wide-button-50 {
    width: 50%;
    min-width: 235px;
    max-width: 350px;
}

/* QuickPopup CSS Unlimiting quickpopup width */
.ls-planner-calendar .e-quick-popup-wrapper {
    width: auto;
    min-width: 200px;
    max-width: 100%; /*quickpopups had limited width*/

    .e-popup-content {
        padding: 0; /* content with 0 padding for correct scrolling */
    }
}

.ls-popup-header-absolute {
    position: absolute;
    right: 0;
    padding: 0.2rem 0.2rem 0 0;

    .e-close {
        color: var(--color-button-close);

        &:hover {
            color: var(--color-button-close-hover);
        }
    }
}


/* Text variants */

.text-subheadline {
    font: var(--font-h2-color);
}

.text-color-green {
    color: var(--text-color-green);
}

.text-color-blue {
    color: var(--text-color-blue);
}

.text-color-red {
    color: var(--text-color-red);
}

.text-color-yellow {
    color: var(--text-color-yellow);
}

/* FONTS */
@font-face {
    font-family: 'Figtree';
    src: url('Fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 900; /* Variable font range */
    font-style: normal;
}

@font-face {
    font-family: 'Figtree';
    src: url('Fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 900; /* Variable font range */
    font-style: italic;
}

html {
    font-family: 'Figtree', sans-serif;
    padding: 0;
    box-sizing: border-box;
}

/*Font changes for syncfusion*/
.e-control {
    font-family: 'Figtree', sans-serif;
}

.e-tab .e-toolbar-items .e-toolbar-item .e-tab-text {
    font-family: 'Figtree', sans-serif;
}

.e-card {
    font-family: 'Figtree', sans-serif;
}

/* Variables */
:root {
    /* Colors */
    --bg-color: hsl(224, 46%, 95%); /* #ecf0f8 rgb(236, 240, 248) */
    --head-bg-color: var(--bg-color);
    --body-bg-color: var(--bg-color);
    --body-bg-border-color: var(--bg-color);
    --btn-darker-blue: hsl(210, 79%, 46%);
    --btn-darker-blue-hover: hsl(210, 79%, 40%);

    --text-color-green: hsl(152, 100%, 50%);
    --text-color-red: hsl(342, 100%, 48%);
    --text-color-blue: hsl(209, 100%, 45%);
    --text-color-yellow: hsl(47, 100%, 50%);

    --color-button-close: hsl(210, 7%, 39%); /* #6c757d */
    --color-button-close-hover: hsl(208, 7%, 17%);
    --color-input-border: hsl(210, 14%, 83%); /* #ced4da */

    --color-grid-border: hsl(210, 14%, 83%); /* #ced4da */

    /* Nav Menu */
    --sidebar-width-open: 250px;
    --nav-bg-color: hsl(224, 46%, 97%);
    --nav-link-bg-color: var(--nav-bg-color);
    --nav-link-bg-color-hover: hsl(224, 46%, 92%);
    --nav-link-bg-color-active: hsl(224, 46%, 86%);

    /* Basic Colors*/
    --white: #FFFFFF;
    --black: #000000;

    --defaultCalendarEventColor: "#0d6efd"; /*"#0d6efd"*/

    /* Default values */
    --header-height: 3.85rem;

    --default-flex-gap: 1rem;
    --half-flex-gap: 0.5rem; /* buttons in toolbars etc. */

    /* Mobile */
    --default-rounding: 10px;
    --default-rounding-small: 4px;
    --default-rounding-buttons: 8px;
    --site-horizontal-padding: 0.2rem;
    --site-sections-horizontal-padding: 1rem;
    --margin-horizontal-main: 0px;
    --shadow-basic: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px;
    --mobile-full-width: clamp(250px, 100%, 350px);

    --dialog-padding-header: 0.8rem 0.8rem;
    --dialog-padding-content: 1rem 1rem;
    --dialog-padding-footer: 0.8rem 0.8rem;

    .mobile-hidden {
        display: none;
    }

    .mobile-zero-padding {
        --site-sections-horizontal-padding: 0rem;
    }

    /* Desktop */
    @media (min-width: 768px) {
        --shadow-basic: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        --default-rounding: 24px;
        --default-rounding-small: 14px;
        --site-horizontal-padding: 0.3rem;
        --site-sections-horizontal-padding: var(--p-4);
        --margin-horizontal-main: 0.8rem;
        --mobile-full-width: 350px;
        --dialog-padding-header: 1rem 1.2rem;
        --dialog-padding-content: 1rem 1.2rem;
        --dialog-padding-footer: 0.6rem 1.2rem;
        .hide-on-desktop {
            display: none;
        }

        .mobile-hidden {
            display: flex;
        }

        .mobile-zero-padding {
            --site-sections-horizontal-padding: var(--p-4);
        }
    }

    /* Font face */
    --main-font-family: 'Figtree', sans-serif;
    --font-h1-bold: 700 32px/40px var(--main-font-family);
    --font-h1-normal: 500 32px/40px var(--main-font-family);
    --font-h2-normal: 400 20px var(--main-font-family);
    --font-h2-color: 700 20px var(--main-font-family);

    /*Example: Sheduler grid names, default grid column headers */
    --font-grid-header: 700 14px var(--main-font-family);

    --font-p-normal: 300 14px var(--main-font-family);
    --font-label-normal: 500 14px var(--main-font-family);
    --font-nav: 500 16px var(--main-font-family);
    --font-nav-project-selector: 600 15px var(--main-font-family);
    --font-top-row-btn: 600 16px var(--main-font-family);

    --font-color: hsl(231, 7%, 21%); /* #323339 */
    --font-nav-color: var(--font-color);
    --font-nav-color-hover: hsl(230, 6%, 5%);
    --font-nav-color-active: hsl(230, 6%, 5%);

    --font-logo-LeftShift: 700 32px/40px var(--main-font-family);

    /* margins and paddings */
    --m-1: 0.25rem;
    --m-2: 0.5rem;
    --m-3: 1rem;
    --m-4: 1.5rem;
    --m-5: 3rem;

    --p-1: 0.25rem;
    --p-2: 0.5rem;
    --p-3: 1rem;
    --p-4: 1.4rem;
    --p-5: 3rem;

    --scheduler-event-width: 100%;
    @media (min-width: 768px) {
        --scheduler-event-width: 100%;
    }
}

/*PRINT settings*/

@media print {
    @page {
        size: landscape
    }
}

@media print {
    body, article {
        /*width: 1200px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;*/
        -ms-zoom: 1.7; /* print resolution fix */
    }

    .e-schedule.ls-planner-calendar {
        min-width: 100px !important;
        /*width: 511pt !important;*/ /* Currently set in syncfusion export */
        margin: 0 !important;
        padding: 0 !important;
    }
    .e-work-cells{
        border-width: 0 0 1px 1px !important;
        border-style: solid;
        border-color: black;
        background-color: white;
        border-left-style: unset;
    }
    
    /*for scheduler printing - MAGIC CSS*/
    .ls-planner-calendar{
        height: auto !important;
    }
    .ls-container-full {
        min-height: 12000px;
    }
    .e-content-wrap {
        overflow: visible !important;
    }
    /* avoiding breaks - do not work yet*/
    /*.e-resource-left-td, .e-work-cells  {
        page-break-inside: avoid;
        page-break-after:auto;
    }
    .e-appointment-details {
        page-break-inside: avoid !important;
        display: block !important;
        page-break-after:auto
    }*/
}

@media print and (color) {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* darkmode */
/*@media screen and (prefers-color-scheme: dark) {
    :root {
        --white: #000000 ;
        --black: #FFFFFF;
    }
}*/

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

h3 + p {
    /*p is directly adject to h3*/
    padding-top: 0.2rem;
}


h1:focus {
    outline: none;
}

html {
    color: var(--font-color);
}

label {
    font: var(--font-label-normal);

    &:first-of-type + span.e-input {
        margin-top: 0.3rem;
    }

    &:first-of-type + .e-input-group {
        margin-top: 0.3rem;
    }
}

div.ls-background-darker {
    background-color: var(--bg-color);
    border-radius: var(--default-rounding-buttons);
}

.alert.alert-danger {
    color: var(--text-color-red);
    padding: 0.5rem 0;
}

.text-danger {
    color: var(--text-color-red);
    font-style: italic;
}

/*OLD blazor */
.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/*Checkbox styling*/

.ls-checkbox.e-checkbox-wrapper {
    .e-frame {
        height: 17px;
        width: 17px;
        padding: 2px 2px;
    }

    .e-check {
        font-size: 10px;
    }

    .e-ripple-container {
        height: 52px;
        top: -11px;
        width: 47px;
    }

    .e-label {
        /*
        line-height: 30px;
        font-size: 20px;
        */
    }
}


.darker-border-checkbox.form-check-input {
    border-color: #929292;
}


/* margins and paddings with variables */

.p-1 {
    padding: var(--p-1);
}

.p-2 {
    padding: var(--p-2);
}

.p-3 {
    padding: var(--p-3);
}

.p-4 {
    padding: var(--p-4);
}

.p-5 {
    padding: var(--p-5);
}

.px-1 {
    padding-left: var(--p-1);
    padding-right: var(--p-1);
}

.px-2 {
    padding-left: var(--p-2);
    padding-right: var(--p-2);
}

.px-3 {
    padding-left: var(--p-3);
    padding-right: var(--p-3);
}

.px-4 {
    padding-left: var(--p-4);
    padding-right: var(--p-4);
}

.px-5 {
    padding-left: var(--p-5);
    padding-right: var(--p-5);
}

.py-1 {
    padding-top: var(--p-1);
    padding-bottom: var(--p-1);
}

.py-2 {
    padding-top: var(--p-2);
    padding-bottom: var(--p-2);
}

.py-3 {
    padding-top: var(--p-3);
    padding-bottom: var(--p-3);
}

.py-4 {
    padding-top: var(--p-4);
    padding-bottom: var(--p-4);
}

.py-5 {
    padding-top: var(--p-5);
    padding-bottom: var(--p-5);
}

.pb-1 {
    padding-bottom: var(--p-1);
}

.pb-2 {
    padding-bottom: var(--p-2);
}

.pb-3 {
    padding-bottom: var(--p-3);
}

.pb-4 {
    padding-bottom: var(--p-4);
}

.pb-5 {
    padding-bottom: var(--p-5);
}

.pt-1 {
    padding-top: var(--p-1);
}

.pt-2 {
    padding-top: var(--p-2);
}

.pt-3 {
    padding-top: var(--p-3);
}

.pt-4 {
    padding-top: var(--p-4);
}

.pt-5 {
    padding-top: var(--p-5);
}

.m-1 {
    margin: var(--m-1);
}

.m-2 {
    margin: var(--m-2);
}

.m-3 {
    margin: var(--m-3);
}

.m-4 {
    margin: var(--m-4);
}

.m-5 {
    margin: var(--m-5);
}

.mb-1 {
    margin-bottom: var(--m-1);
}

.mb-2 {
    margin-bottom: var(--m-2);
}

.mb-3 {
    margin-bottom: var(--m-3);
}

.mb-4 {
    margin-bottom: var(--m-4);
}

.mb-5 {
    margin-bottom: var(--m-5);
}

/* Syncfusion overwrites */

.e-grid[disable="yes"] {
    opacity: .5;
    pointer-events: none;
    -ms-touch-action: none;
    touch-action: none;
    cursor: no-drop;
}

/* Syncfusion overriding ugly cursor on disabled elements */
.e-disabled {
    pointer-events: none;
    cursor: pointer;

    &:hover {
        cursor: pointer;
    }
}

/*Ovewriting danger butons in dialogs syncfusion was overwriting dialog btns*/
.e-btn.e-danger {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: var(--white) !important;

    &:hover {
        background: #c82333 !important;
        border-color: #bd2130 !important;
    }
}

/*default button radius*/
button.e-btn {
    border-radius: var(--default-rounding-buttons);
}

.e-schedule .e-content-wrap .e-appointment {
    border-radius: var(--default-rounding-small);
}

/* Second rows in grids coloring
--sf-grid-altrow: rgba(236, 236, 236, 0.7);
.e-grid .e-altrow {
    background-color: var(--sf-grid-altrow);
}*/

/* Static form input styles - for account pages */
.static-edit-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .form-input, .form-control {
        width: 100%;
        border: 1px solid var(--color-input-border);
        border-radius: 4px;
        padding: 0.5rem;
        height: 35px;
        font: var(--font-p-normal);
        margin-top: 3px; /*label space*/
    }

    .form-input-checkbox {
        width: 18px;
        border: 1px solid var(--color-input-border);
        padding: 0.5rem;
        height: 18px;
    }
}

.custom-icon {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;

    &.filter-darker-blue {
        filter: invert(26%) sepia(91%) saturate(1454%) hue-rotate(192deg) brightness(95%) contrast(87%);
    }

    &.filter-blue {
        filter: invert(31%) sepia(86%) saturate(3003%) hue-rotate(194deg) brightness(95%) contrast(103%);
    }

    &.e-btn-icon.e-icon-left {
        margin-left: 0;
    }
}

.ls-icon-login {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' x2='3' y1='12' y2='12'/%3E%3C/svg%3E");
}

.ls-icon-logout {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E");
}

.ls-icon-logout {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E");
}

.ls-icon-moon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
}

.ls-icon-template {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17h1.5'/%3E%3Cpath d='M12 22h1.5'/%3E%3Cpath d='M12 2h1.5'/%3E%3Cpath d='M17.5 22H19a1 1 0 0 0 1-1'/%3E%3Cpath d='M17.5 2H19a1 1 0 0 1 1 1v1.5'/%3E%3Cpath d='M20 14v3h-2.5'/%3E%3Cpath d='M20 8.5V10'/%3E%3Cpath d='M4 10V8.5'/%3E%3Cpath d='M4 19.5V14'/%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H8'/%3E%3Cpath d='M8 22H6.5a1 1 0 0 1 0-5H8'/%3E%3C/svg%3E");
}

.ls-icon-calendar1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 14h1v4'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 2v4'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3C/svg%3E");
}