@import "./styles.css";

/* dates elements */
.admin-console-content[content='dates'] {
    flex-direction: column;
    justify-content: flex-start;
}

.admin-dates-frame {
    justify-self: center;
    display: grid;
    grid-template-areas:
        "header right"
        "chart right"
        "timeline right"
        "footer right";
    grid-template-rows: 0fr 0fr 1fr 0fr;
    grid-template-columns: 1fr 0fr;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: var(--dm3);
    box-shadow: var(--boxShadow);
    overflow: hidden;
}

.admin-dates-frame-modal {
    display: none;
    background-color: var(--modalBg);
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

.admin-dates-frame-modal-content {
    background: var(--grey100);
    position: relative;
    border-radius: 4px;
    box-shadow: var(--boxShadow);
    padding: 1rem;
    margin: auto;
}

/*console right elements*/
.admin-dates-right-orderEdit {
    display: grid;
    grid-auto-flow: row;
    grid-template-areas:
        "header"
        "list"
        "options"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 0fr 1fr 0fr 0fr;
    width: 100%;
}

.admin-dates-right-orderEdit-header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.8rem;
    color: var(--grey900);
    font-weight: 600;
    padding: 1.2rem;
    border-bottom: 1px solid var(--grey200);
}

.admin-dates-frame-header {
    grid-area: header;
    display: grid;
    grid-template-areas:
        "search importbtn exportbtn exportavailbtn monthSelector yearSelector";
    grid-template-columns: 1fr auto auto auto auto;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--grey900);
    padding: 0.8rem;
    column-gap: 0.6rem;
}

.admin-dates-search {
    grid-area: search;
    display: flex;
    width: 20rem;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--dm5);
    border-radius: 6px;
    padding: 0.4rem;
}

.admin-dates-search::before {
    content: "search";
    font-family: "material symbols rounded";
    font-weight: 200;
    font-size: 1.3rem;
    color: var(--grey50);
    margin-right: 0.5rem;
    line-height: 1;
}

.admin-dates-search-input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    color: var(--grey50);
}

.admin-dates-exportAvailBtn {
    grid-area: exportavailbtn;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-dates-exportAvailBtn:hover {
    cursor: pointer;
    box-shadow: none;
    background-color: transparent;
    color: var(--grey50);
}


.admin-dates-exportBtn {
    grid-area: exportbtn;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.4rem 0.6rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-dates-exportBtn:hover {
    cursor: pointer;
    box-shadow: none;
    background-color: transparent;
    color: var(--grey50);
}


.admin-dates-importBtn {
    grid-area: importbtn;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-dates-importBtn:hover {
    cursor: pointer;
    box-shadow: none;
    background-color: transparent;
    color: var(--grey50);
}

/* .admin-dates-picker-years {
    grid-area: year-picker;
    display: flex;
    flex-direction: row;
    column-gap: 0.4rem;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.7rem;
    margin-left: 2rem;
}

.admin-dates-picker-year {
    display: flex;
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    color: var(--grey50);
    border-radius: 4px;
    border: 1px solid transparent;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear;
}

.admin-dates-picker-year:hover {
    cursor: pointer;
    color: var(--lightBlue);
    background-color: var(--indigo500);
    border: 1px solid var(--indigo500);
}

.admin-dates-picker-year[focus="true"] {
    color: var(--lightBlue);
    background-color: var(--indigo500);
} */

.admin-console-selector[content="admin-dates-month"] {
    grid-area: monthSelector;
}

.admin-console-selector[content="admin-dates-year"] {
    grid-area: yearSelector;
}

.admin-dates-picker-months {
    grid-area: months-picker;
    display: flex;
    flex-direction: row;
    column-gap: 0.4rem;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.7rem;
}

.admin-dates-picker-month {
    display: flex;
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    color: var(--grey50);
    border-radius: 4px;
    border: 1px solid transparent;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear;
}

.admin-dates-picker-month:hover {
    cursor: pointer;
    color: var(--indigo500);
    background-color: var(--lightBlue);
    border: 1px solid var(--indigo500);
}

.admin-dates-picker-month[focus="true"] {
    color: var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-dates-frame-footer {
    grid-area: footer;
    display: grid;
    grid-template-areas: "keys";
    justify-content: center;
    align-items: center;
    padding: 0.4rem 0.6rem;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--grey900);
}

.admin-dates-footer-key {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.8rem;
    width: fit-content;
    font-size: 0.6rem;
    font-weight: 400;
}

.admin-dates-footer-key-el {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: fit-content;
    color: var(--grey50);
}

.admin-dates-footer-key-el::before {
    content: ' ';
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    color: var(--grey200);
    box-shadow: var(--boxShadow);
    margin: auto;
    margin-right: 0.4rem;
}

.admin-dates-footer-key-el[ref='avail']::before {
    height: 6px;
    width: 30px;
    border-radius: 4px;
    background-color: var(--green500);
}

.admin-dates-footer-key-el[ref='prebook']::before {
    height: 6px;
    width: 30px;
    border-radius: 4px;
    background-color: var(--deepPurple400);
}

.admin-dates-footer-key-el[ref='cancel']::before {
    background-color: var(--red200);
    opacity: 0.75;
}

.admin-dates-footer-key-el[ref='cruise']::before {
    background-color: var(--indigo500);
}

.admin-dates-footer-key-el[ref="custom"]::before {
    background-color: var(--deepPurple400);
}

.admin-dates-footer-key-el[ref="city"]::before {
    background-color: var(--pinkA200);
}

.admin-dates-footer-key-el[ref="essence"]::before {
    background-color: var(--pinkA200);
}

.admin-dates-footer-key-el[ref="away"]::before {
    background-color: var(--teal500);
}

.admin-dates-footer-key-el[ref="other"]::before {
    background-color: var(--pinkA200);
}

.admin-dates-navigator {
    grid-area: navigator;
    display: grid;
    grid-template-columns: repeat(31, 0fr);
    grid-template-rows: 1fr;
    height: 6px;
    width: auto;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--grey200);
    margin: 0.6rem 1rem;
}

.admin-dates-frame-right {
    grid-area: right;
    display: grid;
    color: var(--grey500);
    /*background-color: var(--darkBlue);*/
    /*border-left: 1px solid var(--grey200);*/
    height: 100%;
    /*width: 16rem;*/
}

.admin-dates-chart {
    grid-area: chart;
    display: grid;
    grid-template-columns: repeat(31, auto);
    flex-direction: column;
    overflow-x: scroll;
    user-select: none;
    /* background-color: var(--lightBlue); */
    border-bottom: 1px solid var(--grey900);
    height: 6rem;
    width: 100%;
}

.admin-dates-chart-dayDiv {
    display: grid;
    grid-template-areas:
        'orders'
        'info';
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    /* row-gap: 0.4rem; */
    font-size: 0.55rem;
    font-weight: 400;
    color: var(--grey50);
    /* padding: 0.4rem; */
    opacity: 0.75;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear, opacity 0.2s linear;
}

.admin-dates-chart-dayDiv:hover {
    opacity: 1;
    /* font-weight: 500; */
    /* background-color: var(--lightBlue); */
}

.admin-dates-chart-dayDiv::before {
    opacity: 0;
    content: '';
    background-color: var(--grey50);
    /* border-radius: 4px; */
    height: 2px;
    width: 100%;
    margin-top: 0.2rem;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear, opacity 0.2s linear;
}

.admin-dates-chart-dayDiv:hover::before {
    opacity: 1;
    /* box-shadow: var(--boxShadow); */
}

.admin-dates-chart-dayDiv[select=true] {
    opacity: 1;
}

.admin-dates-chart-dayDiv[select=true]::before {
    opacity: 1;
}

.admin-dates-chart-dayDiv-info {
    grid-area: info;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding-top: 0.4rem; */
}

.admin-dates-chart-dayDiv-info:hover {
    cursor: pointer;
}

.admin-dates-chart-dayDiv-orders {
    grid-area: orders;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 0.2rem;
    padding: 0.4rem;
}

.admin-dates-chart-dayDiv-orders-orderDiv {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
}

.admin-dates-chart-dayDiv-orders-orderDiv-bar {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 25%;
    width: 6px;
    min-height: 25%;
    border-radius: 4px 4px 0px 0px;
    /* border-radius: 4px; */
    /* background-color: var(--grey50); */
    /* box-shadow: var(--boxShadow); */
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear, opacity 0.2s linear;
    animation: barFillVert 0.4s forwards;
}

.admin-dates-chart-dayDiv-orders-orderDiv-bar[order-type="cruise"] {
    background-color: var(--indigo500);
}

.admin-dates-chart-dayDiv-orders-orderDiv-bar[order-type="essence"] {
    background-color: var(--pinkA200);
    /* height: 25%; */
}

.admin-dates-chart-dayDiv-orders-orderDiv-bar[order-type="custom"] {
    background-color: var(--deepPurple400);
    /* height: 50%; */
}

.admin-dates-chart-dayDiv-orders-orderDiv-bar[order-home="false"] {
    background-color: var(--teal500);
    /* height: 75%; */
}

.admin-dates-chart-dayDiv-orders-orderDiv-bar[publish-home="false"] {
    background-color: var(--teal500);
    /* height: 50%; */
}

.admin-dates-chart-dayDiv-orders-orderDiv-bar:hover {
    opacity: 1;
    background-color: var(--grey50);
}

.admin-dates-chart-dayDiv-orders-orderDiv-bar {
    height: attr(value)'%';
}

.admin-dates-chart-dayDiv-orders-orderDiv-bar[select="true"] {
    opacity: 1;
    background-color: var(--grey50);
}

.admin-dates-timeline {
    grid-area: timeline;
    display: grid;
    grid-auto-flow: row;
    /*grid-template-columns: repeat(7, 1fr);*/
    /*grid-template-rows: repeat(5, 1fr);*/
    grid-template-columns: repeat(1, 1fr);
    /*grid-template-rows: repeat(16, 1fr);*/
    overflow-y: scroll;
    user-select: none;
    background-color: var(--grey100);
    background-color: #222838;
}

.admin-dates-timeline-dayDiv {
    display: grid;
    grid-template-areas:
        "info office regions"
        "orders order regions";
    grid-template-columns: 1fr auto 16rem;
    grid-template-rows: 0fr 1fr;
    column-gap: 0.2rem;
    row-gap: 0.4rem;
    font-size: 0.65rem;
    /*background-color: var(--grey50);*/
    position: relative;
    /* padding: 0.6rem; */
    height: 100%;
    border-bottom: 1px solid var(--grey900);
    transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear, border 0.2s linear;
}

.admin-dates-timeline-dayDiv:nth-child(odd) {
    /*background-color: var(--grey100);*/
}

.admin-dates-timeline-dayDiv:not(:last-child) {
    /*border-top: 1px solid var(--grey200);*/
    /*border-bottom: 1px solid var(--grey200);*/
}

.admin-dates-timeline-dayDiv:hover {
    /*cursor: pointer;*/
    /*background-color: var(--lightBlue);*/
}

.admin-dates-timeline-dayDiv[today=true] {
    /*background-color: var(--lightGreen);*/
}

.admin-dates-timeline-dayDiv[today=true]:hover {
    /*background-color: var(--lightBlue);*/
}

.admin-dates-timeline-dayDiv::before {
    position: absolute;
    content: ' ';
    width: 4px;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--indigo500);
    opacity: 0;
    transition: opacity 0.2s linear;
    box-shadow: var(--boxShadow);
}

.admin-dates-timeline-dayDiv:hover::before {
    opacity: 1;
}

.admin-dates-timeline-dayDiv[focus=true]::before {
    opacity: 1;
}

/* .admin-dates-timeline-dayDiv-info-ref[today=true]::before {
    opacity: 1;
} */

.admin-dates-timeline-dayDiv-info {
    grid-area: info;
    display: grid;
    grid-template-areas:
        "ref actions stats flags";
    grid-template-columns: 10rem 10rem 1fr auto;
    column-gap: 2rem;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 0.6rem;
    padding-bottom: 0rem;
    /*height: 100%;*/
    /*background-color: var(--grey200);*/
}

.admin-dates-timeline-dayDiv-info-ref {
    grid-area: ref;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.2rem;
    color: var(--grey50);
    font-weight: 600;
    font-size: 0.7rem;
    white-space: nowrap;
    transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear;
    /*background-color: var(--lightBlue);*/
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    height: fit-content;
}

.admin-dates-timeline-dayDiv-info-ref[today=true] {
    color: var(--grey50);
    background-color: var(--green500);
}

.admin-dates-timeline-dayDiv-info-ref:hover {
    cursor: pointer;
    color: var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-dates-timeline-dayDiv-info-red {
    font-family: 'material symbols rounded';
    font-size: 1rem;
    color: var(--red500);
    display: none;
}

.admin-dates-timeline-dayDiv[day-red=true] .admin-dates-timeline-dayDiv-info-red {
    display: flex;
}

.admin-dates-timeline-dayDiv-info-mark {
    font-family: 'material symbols rounded';
    font-size: 1rem;
    color: #FF9800;
    display: none;
}

.admin-dates-timeline-dayDiv[day-mark=true] .admin-dates-timeline-dayDiv-info-mark {
    display: flex;
}

.admin-dates-timeline-dayDiv-info-actions {
    grid-area: actions;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.2rem;
    font-weight: 400;
}

.admin-dates-timeline-dayDiv-info-actions-actionBtn {
    font-family: 'material symbols outlined';
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--grey50);
    border: 1px solid transparent;
    padding: 0.2rem;
    padding: 0.2rem 0.2rem;
    border-radius: 4px;
    font-weight: 200;
    /* box-shadow: var(--boxShadow); */
    transition: color 0.2s linear, border 0.2s linear, background-color 0.2s linear, box-shadow 0.2s linear;
}

.admin-dates-timeline-dayDiv-info-actions-actionBtn:hover {
    color: var(--indigo500);
    cursor: pointer;
    /*background-color: var(--lightBlue);*/
    box-shadow: none;
    /*border: 1px solid var(--indigo500);*/
}

.admin-dates-timeline-dayDiv-info-flags {
    grid-area: flags;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    font-weight: 400;
}

.admin-dates-timeline-dayDiv-info-flags-flagBtn {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--grey50);
    border: 1px solid transparent;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    /* box-shadow: var(--boxShadow); */
    column-gap: 0.4rem;
    /* border: 1px solid var(--grey50); */
    transition: color 0.2s linear, border 0.2s linear, background-color 0.2s linear, box-shadow 0.2s linear;
}

/* .admin-dates-timeline-dayDiv-info-flags-flagBtn::after {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "material symbols rounded";
    font-weight: 200;
    content: 'check';
    font-weight: 400;
    font-size: 1.2rem;
} */

.admin-dates-timeline-dayDiv-info-flags-flagBtn[value=true] {
    background-color: var(--green500);
    color: var(--grey50);
}

.admin-dates-timeline-dayDiv-info-flags-flagBtn:hover {
    cursor: pointer;
    background-color: transparent;
    color: var(--grey50);
    border: 1px solid var(--green500);
    box-shadow: none;
}

.admin-dates-timeline-dayDiv-info-flags-flagBtn[value=true]:hover {
    background-color: transparent;
    color: var(--grey50);
    border: 1px solid var(--indigo500);
    box-shadow: none;
}

.admin-dates-timeline-dayDiv-info-stats {
    grid-area: stats;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 2rem;
    font-weight: 600;
    transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear;
}

.admin-dates-timeline-dayDiv-info-stats-barDiv {
    display: grid;
    grid-template-areas: 'bar value';
    grid-template-columns: 1fr 0fr;
    column-gap: 0.4rem;
    justify-content: flex-start;
    align-items: center;
}

.admin-dates-timeline-dayDiv-info-stats-barDiv-bar {
    grid-area: bar;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 6rem;
    height: 6px;
    border-radius: 24px;
    background-color: var(--grey200);
    overflow: hidden;
    position: relative;
    box-shadow: var(--boxShadow);
}

/* .admin-dates-timeline-dayDiv-info-stats-bar::after {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    content: attr(value);
    font-size: 0.65rem;
    font-weight: 400;
    top: calc(-100%);
    right: -1rem;
    color: var(--grey50);
    position: absolute;
} */

.admin-dates-timeline-dayDiv-info-stats-barDiv-bar-fill {
    height: 100%;
    border-radius: 4px 0px 0px 4px;
    /*border-radius: 4px;*/
    transition: background-color 0.2s linear;
    animation: barFillHoriz 2s forwards;
}

.admin-dates-timeline-dayDiv-info-stats-barDiv-bar-fill[ref="user-avail"] {
    background-color: var(--green500);
}

.admin-dates-timeline-dayDiv-info-stats-barDiv-bar-fill[ref="user-prebook"] {
    background-color: var(--deepPurple400);
}

.admin-dates-timeline-dayDiv-info-stats-barDiv-bar-fill[ref="date-need"] {
    background-color: var(--indigo500);
}

.admin-dates-timeline-dayDiv-info-stats-barDiv-bar-fill[ref="date-need"][status="none"] {
    background-color: var(--green500);
}

.admin-dates-timeline-dayDiv-info-stats-barDiv-bar-fill[ref="date-need"][status="low"] {
    background-color: var(--green500);
}

.admin-dates-timeline-dayDiv-info-stats-barDiv-bar-fill[ref="date-need"][status="medium"] {
    background-color: var(--orange);
}

.admin-dates-timeline-dayDiv-info-stats-barDiv-bar-fill[ref="date-need"][status="high"] {
    background-color: var(--red);
}

.admin-dates-timeline-dayDiv-info-stats-barDiv-valueDiv {
    grid-area: value;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.55rem;
    color: var(--grey50);
}

.admin-dates-timeline-dayDiv-orders {
    grid-area: orders;
    display: grid;
    row-gap: 0.2rem;
    padding: 0.6rem;
    padding-top: 0rem;
    /* padding: 0.6rem; */
}

.admin-dates-timeline-orderRow {
    display: grid;
    align-content: center;
    grid-auto-flow: row;
    grid-template-rows: 0fr;
    width: 100%;
    color: var(--grey800);
    transition: color 0.2s linear, background-color 0.2s linear;
}

/* .admin-dates-timeline-orderRow::before {
    position: absolute;
    content: attr(stats-historic-unique-guides);
    color: var(--grey400);
    width: 1rem;
    padding: 0.2rem;
    left: 0.2rem;
    font-weight: 400;
    font-size: 0.6rem;
    align-self: center;
} */

.admin-dates-timeline-orderRow:hover {
    /*cursor: pointer;*/
}

.admin-dates-timeline-orderRow-statsDiv {
    grid-area: stats;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--grey400);
    font-weight: 400;
    font-size: 0.55rem;
}

/* .admin-dates-timeline-orderRow-statsDiv[type="historic"]::before {
    content: 'history';
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "material symbols rounded";
    font-weight: 200;
    font-size: 0.85rem;
    color: var(--grey50);
} */

.admin-dates-timeline-orderRow-orderDiv {
    grid-area: order;
    display: grid;
    grid-template-areas:
        "orderRef"
        "time";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    /*row-gap: 0.2rem;*/
    width: 100%;
    border-radius: 4px;
    padding: 0.2rem 0.4rem 0.2rem 0.4rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border: 1px solid transparent;
    box-shadow: var(--boxShadow);
    /*overflow: hidden;*/
    position: relative;
    transition: box-shadow 0.2s linear, background-color 0.2s linear, color 0.2s linear, border 0.2s linear, opacity 0.2s linear;
}

.admin-dates-timeline-orderRow-orderDiv[order-type="city"] {
    border: 1px solid var(--pinkA200);
    background-color: var(--pinkA200);
}

.admin-dates-timeline-orderRow-orderDiv[order-type="essence"] {
    border: 1px solid var(--pinkA200);
    background-color: var(--pinkA200);
}

.admin-dates-timeline-orderRow-orderDiv[order-type="turnaround"] {
    border: 1px solid var(--green500);
    background-color: var(--green500);
}

.admin-dates-timeline-orderRow-orderDiv[order-type="cruise"] {
    border: 1px solid var(--indigo500);
    background-color: var(--indigo500);
}

.admin-dates-timeline-orderRow-orderDiv[order-type="custom"] {
    border: 1px solid var(--deepPurple400);
    background-color: var(--deepPurple400);
}

.admin-dates-timeline-orderRow-orderDiv[order-type="private"] {
    border: 1px solid var(--deepPurple400);
    background-color: var(--deepPurple400);
}

.admin-dates-timeline-orderRow-orderDiv[order-cancel="true"] {
    color: var(--grey50);
    border: 1px solid var(--red200);
    background-color: var(--red200);
    opacity: 0.75;
}

.admin-dates-timeline-orderRow-orderDiv[order-publish="false"]::before {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: -1.5rem;
    bottom: 0;
    content: 'phonelink_off';
    font-family: "material symbols rounded";
    font-weight: 200;
    font-size: 0.85rem;
    color: var(--grey600);
}

.admin-dates-timeline-orderRow-orderDiv[order-status="tentative"]::before {
    position: absolute;
    display: flex;
    left: -1.5rem;
    content: '??';
    font-size: 0.75rem;
    font-weight: 500;
    /*color: var(--grey900);*/
    padding: 0.2rem;
}

.admin-dates-timeline-orderRow-orderDiv[date-publish-region="false"]::after {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: -1.5rem;
    top: 0;
    content: 'error';
    font-family: "material symbols rounded";
    font-weight: 200;
    font-size: 0.85rem;
    color: var(--orange500);
}

.admin-dates-timeline-orderRow-orderDiv[match="true"] {
    color: var(--grey900);
    background-color: var(--lightBlue);
    border: 1px solid var(--grey900);
    box-shadow: none;
}

.admin-dates-timeline-orderDiv-info {
    white-space: nowrap;
    /*text-overflow: clip;*/
    /*overflow: hidden;*/
}

.admin-dates-timeline-orderRow-orderDiv:hover {
    color: var(--grey900);
    background-color: var(--lightBlue);
    border: 1px solid var(--grey900);
    box-shadow: none;
}

.admin-dates-timeline-dayDiv-regions {
    grid-area: regions;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 0.2rem;
    padding: 0.6rem;
    border-left: 1px solid var(--grey900);

}

.admin-dates-timeline-dayDiv-regions-orderDiv {
    grid-area: order;
    display: flex;
    /*row-gap: 0.2rem;*/
    width: 100%;
    font-weight: 400;
    border-radius: 4px;
    padding: 0.2rem 0.4rem 0.2rem 0.4rem;
    color: var(--grey50);
    background-color: var(--teal500);
    border: 1px solid transparent;
    box-shadow: var(--boxShadow);
    /*overflow: hidden;*/
    position: relative;
    transition: box-shadow 0.2s linear, background-color 0.2s linear, color 0.2s linear, border 0.2s linear, opacity 0.2s linear;
}

.admin-dates-timeline-dayDiv-regions-orderDiv[order-cancel=true] {
    color: var(--grey50);
    border: 1px solid var(--red200);
    background-color: var(--red200);
    opacity: 0.75;
}

/* guestcount fsmodal */
[content="order-guestcount"] {
    display: grid;
    grid-template-areas:
        "header"
        "content"
        "footer";
    grid-template-rows: 0fr 1fr 0fr;
    grid-template-columns: 1fr;
    min-height: 10%;
    min-width: 10%;
    top: 0%;
}

[content="order-guestcount"] .fsmodal-frame-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1.2rem;
}

.order-guestcount-input {
    display: flex;
    text-align: center;
    padding: 1rem;
    font-family: 'Quicksand';
    padding: 0.6rem;
    font-size: 0.65rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 6rem;
    transition: background-color 0.2s linear,
        border 0.2s linear;
}

.order-guestcount-input:focus {
    background-color: var(--lightBlue);
    border: 1px solid var(--indigo500);
}

.order-guestcount-save {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear;
}

.order-guestcount-save:hover {
    cursor: pointer;
}

.admin-dates-timeline-dayDiv-office {
    grid-area: office;
    display: flex;
    width: 16rem;
    height: 100%;
    padding: 0.6rem;
    /* border-left: 1px solid var(--grey900); */
}

.admin-dates-timeline-dayDiv-office-dutyList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.6rem;
    margin-left: auto;
    /* background-color: var(--lightBlue); */
    border-radius: 4px;
    padding: 0.2rem;
}

.admin-dates-timeline-dayDiv-office-dutyList-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    color: var(--grey200);
    font-size: 0.65rem;
    font-weight: 500;
}

.admin-dates-timeline-dayDiv-office-dutyList-userDiv {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.2rem;
    height: 2rem;
    width: 2rem;
    column-gap: 0.2rem;
    color: var(--indigo500);
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-dates-timeline-dayDiv-office-dutyList-userDiv:hover {
    cursor: pointer;
    color: var(--lightBlue);
    border: 1px solid var(--indigo500);
}

.admin-dates-timeline-dayDiv-office-dutyList-userDiv[duty-value="true"] {
    background-color: var(--green500);
    color: var(--grey50);
    border: 1px solid var(--green500);
    box-shadow: none;
}

.admin-dates-timeline-dayDiv-office-dutyList-userDiv[duty-value="false"] {
    background-color: var(--red200);
    color: var(--grey50);
    border: 1px solid var(--red200);
    box-shadow: none;
}

/* prebooking fsmodal */
[content="daterow-prebooking"] {
    display: grid;
    grid-template-areas: "header"
        "content"
        "footer";
    grid-template-rows: 0fr 1fr 0fr;
    grid-template-columns: 1fr;
    min-height: 40%;
    min-width: 40%;
    top: 0%;
}

.daterow-prebooking-userlist {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    padding: 1.2rem;
    border-top: 1px solid var(--grey200);
}

.daterow-prebooking-userlist-userdiv {
    display: grid;
    grid-template-areas: "info";
    column-gap: 0.5rem;
    justify-content: center;
    align-items: center;
    font-size: 0.7rem;
    padding: 0.5rem 0.8rem;
    border-radius: 24px;
    color: var(--grey700);
    transition: border 0.2s linear, background-color 0.2s linear, color 0.2s linear;
}

.daterow-prebooking-userlist-userdiv[user-prebook=false] {
    background-color: var(--lightBlue);
    color: var(--indigo500);
    border: 1px solid var(--lightBlue);
}

.daterow-prebooking-userlist-userdiv[user-prebook=false]:hover {
    cursor: pointer;
    border: 1px solid var(--indigo500);
}

.daterow-prebooking-userlist-userdiv[user-prebook=true] {
    color: var(--grey50);
    background-color: var(--deepPurple400);
    border: 1px solid var(--deepPurple400);
}

.daterow-prebooking-userlist-userdiv[user-prebook=true]:hover {
    cursor: pointer;
}

/*.daterow-prebooking-userlist-userdiv[user-prebook="2"] {
    background-color: var(--indigo500);
    color: var(--grey50);
}*/

/*dates notes edit*/
.admin-console-modal-frame[content=daterow-notes-add] {
    height: 90%;
    width: 40%;
    top: 5%;
    left: 30%;
}

.admin-console-modal-center[content=daterow-notes-add] {
    display: grid;
    grid-template-areas:
        "thread"
        "selector"
        "tags"
        "validator"
        "compose";
    grid-template-rows: 1fr 0fr 0fr 0fr 0fr;
    grid-template-columns: 1fr;
}

.admin-dates-notes-add-modal-thread {
    grid-area: thread;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    /* padding-left: 4rem; */
    overflow-y: auto;
}

.admin-dates-notes-add-modal-thread-msg {
    display: grid;
    grid-template-areas:
        'title .'
        'body delete'
        'tag .'
        'timestamp .';
    grid-template-columns: auto 0fr;
    grid-template-rows: 0fr 0fr 0fr 0fr;
    width: 100%;
    row-gap: 0.2rem;
    column-gap: 0.4rem;
    padding: 0.8rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--grey600);
    user-select: text;
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear, border 0.2s linear, opacity 0.2s linear;
}

.admin-dates-notes-add-modal-thread-msg:hover {
    background-color: var(--lightBlue);
}

.admin-dates-notes-add-modal-thread-msg-title {
    grid-area: title;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: auto;
    color: var(--grey900);
}

.admin-dates-notes-add-modal-thread-msg-body {
    grid-area: body;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 0.4rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-shadow: var(--boxShadow);
    margin-left: auto;
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear, border 0.2s linear, opacity 0.2s linear;
}

.admin-dates-notes-add-modal-thread-msg[note-cancel-status="true"] .admin-dates-notes-add-modal-thread-msg-body {
    background-color: var(--grey200);
    color: var(--grey600);
}

.admin-dates-notes-add-modal-thread-msg-tags {
    grid-area: tag;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 0.6rem;
    font-style: italic;
}

.admin-dates-notes-add-modal-thread-msg-ts {
    grid-area: timestamp;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* color: var(--grey900); */
    font-size: 0.6rem;
}

.admin-dates-notes-add-modal-thread-msg-deleteBtn {
    grid-area: delete;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "material symbols rounded";
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--red500);
    cursor: pointer;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear;
}

.admin-dates-notes-add-modal-thread-msg[note-cancel-status=true] .admin-dates-notes-add-modal-thread-msg-deleteBtn {}

.admin-dates-notes-add-modal-thread-msg-deleteBtn:hover {
    color: var(--grey400);
}

.admin-dates-notes-add-modal-selector {
    grid-area: selector;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    row-gap: 0.4rem;
    column-gap: 0.8rem;
    justify-content: flex-start;
    grid-template-columns: 1fr 0fr;
    padding: 0.8rem;
    height: 100%;
    font-size: 0.65rem;
    background-color: var(--grey50);
    border-top: 1px solid var(--grey200);
    white-space: nowrap;
}

.admin-dates-notes-add-modal-selector::before {
    content: 'Select order';
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 400;
}

.admin-dates-notes-add-modal-selector-orderDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--grey50);
    white-space: nowrap;
    color: var(--indigo500);
    background-color: var(--lightBlue);
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--lightBlue);
    border-radius: 4px;
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-dates-notes-add-modal-selector-orderDiv:hover {
    cursor: pointer;
    /*background-color: var(--grey50);*/
    border: 1px solid var(--indigo500);
}

.admin-dates-notes-add-modal-selector-orderDiv[select=true] {
    background-color: var(--indigo500);
    border: 1px solid var(--indigo500);
    color: var(--grey50);
    /*box-shadow: var(--boxShadow);*/
}

.admin-dates-notes-add-modal-tags {
    grid-area: tags;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    row-gap: 0.4rem;
    column-gap: 0.8rem;
    justify-content: flex-start;
    grid-template-columns: 1fr 0fr;
    padding: 0.8rem;
    height: 100%;
    font-size: 0.65rem;
    background-color: var(--grey50);
    border-top: 1px solid var(--grey200);
    white-space: nowrap;
}

.admin-dates-notes-add-modal-tags::before {
    content: 'Select note type (can be multiple/none)';
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 400;
}

.admin-dates-notes-add-modal-tags-tagDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--grey50);
    white-space: nowrap;
    color: var(--indigo500);
    background-color: var(--lightBlue);
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--lightBlue);
    border-radius: 4px;
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-dates-notes-add-modal-tags-tagDiv:hover {
    cursor: pointer;
    /*background-color: var(--grey50);*/
    border: 1px solid var(--indigo500);
}

.admin-dates-notes-add-modal-tags-tagDiv[select=true] {
    background-color: var(--indigo500);
    border: 1px solid var(--indigo500);
    color: var(--grey50);
    /*box-shadow: var(--boxShadow);*/
}

.admin-dates-notes-add-modal-compose {
    grid-area: compose;
    display: grid;
    grid-template-areas:
        "input button";
    column-gap: 0.8rem;
    justify-content: flex-start;
    grid-template-columns: 1fr 0fr;
    padding: 0.8rem;
    height: 100%;
    background-color: var(--grey100);
    /*border-top: 1px solid var(--grey200);*/
}

.admin-dates-notes-add-modal-compose-input {
    grid-area: input;
    border: none;
    outline: none;
    height: 10rem;
    width: 100%;
    padding: 0.6rem;
    font-size: 0.75rem;
    font-family: 'Quicksand';
    resize: none;
    color: var(--grey800);
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
    border-radius: 4px;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear;
}

.admin-dates-notes-add-modal-compose-input:focus {
    color: var(--grey800);
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-dates-notes-add-modal-compose-sendBtn {
    grid-area: button;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: fit-content;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    margin-bottom: auto;
    white-space: nowrap;
    background-color: var(--indigo500);
    border-radius: 4px;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-dates-notes-add-modal-validator {
    grid-area: validator;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /*padding: 0.8rem 1rem;*/
    height: 100%;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--red300);
    background-color: var(--grey100);
    border-top: 1px solid var(--grey200);
}

/*order edit fsmodal*/
.admin-console-modal-frame[content="daterow-order-edit"] {
    display: grid;
    grid-template-areas:
        "header"
        "center"
        "footer";
    grid-template-rows: 0fr auto 0fr;
    grid-template-columns: 1fr;
    height: fit-content;
    width: 30%;
    top: 30%;
    left: 40%;
}

.admin-console-modal-frame[content="daterow-order-edit"][active=true] {
    height: 95%;
    top: 2.5%;
}

.admin-console-modal-center[content="daterow-order-edit"] {
    grid-area: center;
    display: flex;
    row-gap: 0.6rem;
    flex-direction: column;
    padding: 0.8rem;
    font-size: 0.7rem;
    overflow: auto;
}

.admin-dates-order-edit-modal-label {}

.admin-dates-order-edit-modal-field {
    display: flex;
    flex-direction: column;
    row-gap: 0.2rem;
}

.admin-dates-order-edit-modal-field-title {
    color: var(--grey900);
    font-size: 0.75rem;
    font-weight: 500;
}

.admin-dates-order-edit-modal-field-description {
    color: var(--grey600);
    font-size: 0.65rem;
    font-weight: 400;
}

.admin-dates-order-edit-modal-field-input {
    font-family: 'Quicksand';
    padding: 0.6rem;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 20rem;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-dates-order-edit-modal-field-input:focus {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-dates-order-edit-modal-field-select {
    font-family: 'Quicksand';
    padding: 0.6rem;
    font-size: 0.65rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 20rem;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-dates-order-edit-modal-field-select:hover {
    border: 1px solid var(--indigo500);
    /* background-color: var(--lightBlue); */
}

.admin-dates-order-edit-modal-field-select-option {}

.admin-dates-order-edit-modal-button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    width: fit-content;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    cursor: pointer;
    transition: background-color 0.2s linear;
}

.admin-dates-order-edit-modal-button[active=true] {
    background-color: var(--green500);
}

.admin-dates-order-edit-modal-button[active=false] {
    pointer-events: none;
    background-color: var(--grey200);
    color: var(--grey600);
}

.admin-dates-order-edit-modal-button[active=true]:hover {
    color: var(--green500);
    background-color: var(--grey50);
    box-shadow: none;
}

/*order delete fsmodal*/
.admin-console-modal-frame[content="daterow-order-delete"] {
    display: grid;
    grid-template-areas:
        "header"
        "center"
        "footer";
    grid-template-rows: 0fr auto 0fr;
    grid-template-columns: 1fr;
    height: fit-content;
    width: 30%;
    top: 30%;
    left: 40%;
}

.admin-console-modal-center[content="daterow-order-delete"] {
    grid-area: center;
    display: flex;
    row-gap: 0.6rem;
    flex-direction: column;
    padding: 0.8rem;
    font-size: 0.7rem;
}

.admin-dates-order-delete-modal-label {}

.admin-dates-order-delete-modal-input {
    font-family: 'Quicksand';
    padding: 0.6rem;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 20rem;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-dates-order-delete-modal-input:focus {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-dates-order-delete-modal-button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    width: fit-content;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    cursor: pointer;
    transition: background-color 0.2s linear;
}

.admin-dates-order-delete-modal-button[active=true] {
    background-color: var(--green500);
}

.admin-dates-order-delete-modal-button[active=false] {
    pointer-events: none;
    background-color: var(--grey200);
    color: var(--grey600);
}

.admin-dates-order-delete-modal-button[active=true]:hover {
    color: var(--green500);
    background-color: var(--grey50);
    box-shadow: none;
}

/* order create fsmodal */
.admin-console-modal-frame[content="daterow-order-add"] {
    height: 95%;
    width: 60%;
    top: 2.5%;
    left: 20%;
}

.admin-console-modal-center[content="daterow-order-add"] {
    display: grid;
    grid-template-areas:
        "selector template"
        "details template";
    grid-template-rows: 0fr 1fr;
    grid-template-columns: 1.5fr 1fr;
    align-items: flex-start;
    justify-content: flex-start;
    font-weight: 500;
    font-size: 0.7rem;
    height: 100%;
}

.daterow-order-add-selector {
    grid-area: selector;
    display: flex;
    grid-auto-flow: column;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    padding: 0.8rem;
    column-gap: 0.6rem;
    row-gap: 0.6rem;
    border-bottom: 1px solid var(--grey200);
    border-right: 1px solid var(--grey200);
}

.daterow-order-add-selector-div {
    display: grid;
    grid-template-areas:
        "icon title radio"
        "icon desc radio";
    grid-auto-flow: column;
    justify-content: flex-start;
    align-items: center;
    width: 50%;
    height: 100%;
    column-gap: 1.2rem;
    row-gap: 0.4rem;
    padding: 1.2rem 1.2rem;
    color: var(--grey900);
    border: 1px solid transparent;
    border-radius: 4px;
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear;
}

.daterow-order-add-selector-div:hover {
    cursor: pointer;
    color: var(--indigo500);
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.daterow-order-add-selector-div[value="true"] {
    color: var(--indigo500);
    background-color: var(--lightBlue);
}

.daterow-order-add-selector-div-icon {
    grid-area: icon;
    font-size: 1.5rem;
    color: var(--indigo500);
    margin-bottom: auto;
}

.daterow-order-add-selector-div-title {
    grid-area: title;
    font-size: 0.75rem;
    font-weight: 500;
}

.daterow-order-add-selector-div-desc {
    grid-area: desc;
    font-size: 0.65rem;
    font-weight: 500;
}

.daterow-order-add-selector-div-radio {
    grid-area: radio;
    color: var(--indigo500);
}

.daterow-order-add-details {
    grid-area: details;
    display: grid;
    row-gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    background-color: var(--grey100);
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid var(--grey200);
}

.daterow-order-add-details-field {
    display: grid;
    justify-content: space-between;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.4rem;
    /*border: 1px solid var(--grey200);
    border-radius: 4px;*/
}

.daterow-order-add-details-field-title {
    color: var(--grey900);
    font-size: 0.75rem;
    font-weight: 500;
}

/* .daterow-order-add-details-field[required=true] .daterow-order-add-details-field-title::after {
    content: '*';
    font-family: 'Quicksand';
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--red200);
    margin-left: 0.2rem;
} */

.daterow-order-add-details-field-description {}

.daterow-order-add-details-field-input {
    font-family: 'Quicksand';
    padding: 0.6rem;
    font-size: 0.65rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 20rem;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.daterow-order-add-details-field-input:hover {
    border: 1px solid var(--indigo500);
    /* background-color: var(--lightBlue); */
}

.daterow-order-add-details-field-input:focus {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.daterow-order-add-details-field-select {
    font-family: 'Quicksand';
    padding: 0.6rem;
    font-size: 0.65rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 20rem;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.daterow-order-add-details-field-select:hover {
    border: 1px solid var(--indigo500);
    /* background-color: var(--lightBlue); */
}

.daterow-order-add-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 0.4rem;
    font-weight: 500;
}

.daterow-order-add-info::before {
    content: attr(title);
    color: var(--grey500);
}

.daterow-order-add-input {
    font-weight: 500;
    font-family: 'Quicksand';
    font-size: 0.75rem;
    letter-spacing: 1.2px;
    border: 1px solid var(--lightBlue);
    background-color: var(--lightBlue);
    border-radius: 4px;
    padding: 0.4rem 0.2rem;
    transition: border 0.2s linear;
    width: 10rem;
    text-align: center;
    margin-left: 0.4rem;
}

.daterow-order-add-input[edit=false] {
    background-color: var(--grey100);
    border: 1px solid var(--grey100);
}

.daterow-order-add-input[input="textlong"] {
    width: 14rem;
}

.daterow-order-add-input[input="time"] {
    width: 4rem;
}

.daterow-order-add-input[input="num"] {
    width: 3rem;
}

.daterow-order-add-input:focus {
    background-color: var(--lightBlue);
    border: 1px solid var(--indigo500);
}

.daterow-order-add-create {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear;
}

.daterow-order-add-create:hover {
    cursor: pointer;
}

.admin-dates-modal-daterowOrderAdd-templates {
    grid-area: template;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.admin-dates-modal-daterowOrderAdd-templates-header {
    grid-area: header;
    padding: 0.2rem 0.8rem;
    width: 100%;
    border-bottom: 1px solid var(--grey200);
}

.admin-dates-modal-daterowOrderAdd-templates-search {
    grid-area: search;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    height: 2rem;
    padding: 0rem;
    /* padding: 0rem 0.8rem; */
    /* border-right: 1px solid var(--grey200); */
}

.admin-dates-modal-daterowOrderAdd-templates-search::before {
    content: "search";
    font-family: "material symbols rounded";
    font-weight: 200;
    font-size: 1.3rem;
    color: var(--grey600);
    margin-right: 0.5rem;
    line-height: 1;
}

.admin-dates-modal-daterowOrderAdd-templates-search-input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--grey600);
    background: var(--grey50);
}

.admin-dates-modal-daterowOrderAdd-templates-list {
    grid-area: list;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 400;
    font-size: 0.65rem;
    row-gap: 0.4rem;
    padding: 0.8rem;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: var(--grey100);
}

.admin-dates-modal-daterowOrderAdd-templates-list-templateDiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.4rem 0.6rem;
    color: var(--grey900);
    background-color: var(--grey50);
    border-radius: 4px;
    box-shadow: var(--boxShadow);
    width: 100%;
    border: 1px solid var(--grey50);
    /* background-color: var(--grey50); */
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-dates-modal-daterowOrderAdd-templates-list-templateDiv:hover {
    cursor: pointer;
    box-shadow: none;
    /* color: var(--indigo500); */
    /* background-color: var(--lightBlue); */
    border: 1px solid var(--grey200);
}

.admin-dates-modal-daterowOrderAdd-templates-list-templateDiv-info {
    grid-area: info;
    display: grid;
    grid-template-areas:
        'ref timestamp'
        'note note';
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    /* row-gap: 0.4rem; */
    column-gap: 0.4rem;
    font-size: 0.65rem;
    font-weight: 400;
    width: 100%;
}

.admin-dates-modal-daterowOrderAdd-templates-list-templateDiv-info-infoEl {
    display: flex;
}

.admin-dates-modal-daterowOrderAdd-templates-list-templateDiv-info-infoEl[ref="ref"] {
    grid-area: ref;
    justify-content: flex-start;
}

.admin-dates-modal-daterowOrderAdd-templates-list-templateDiv-info-infoEl[ref="create-timestamp"] {
    grid-area: timestamp;
    justify-content: flex-end;
}

.admin-dates-modal-daterowOrderAdd-templates-list-templateDiv-info-infoEl[ref="note"] {
    grid-area: note;
    font-style: italic;
    padding-top: 0.2rem;
}

/* avail fsmodal */
[content="daterow-avail-view"] {
    display: grid;
    grid-template-areas: "header"
        "subheader"
        "content"
        "footer";
    grid-template-rows: 0fr 0fr 1fr 0fr;
    grid-template-columns: 1fr;
    min-height: 25%;
    min-width: 25%;
    top: 0%;
}

.daterow-avail-view-content {
    display: grid;
    grid-template-rows: 0fr 0fr;
    grid-template-columns: 1fr;
    align-items: flex-start;
    justify-content: flex-start;
    font-weight: 500;
    font-size: 0.7rem;
    row-gap: 0.8rem;
    height: 100%;
}

.daterow-avail-view-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear;
}

.daterow-avail-view-close:hover {
    cursor: pointer;
}

/* overview modal */
.admin-console-modal-frame[content="date-overview"] {
    height: 90%;
    top: 5%;
    width: 90%;
    left: 5%;
}

.admin-console-modal-center[content="date-overview"] {
    display: grid;
    grid-template-areas:
        'users'
        'available';
}

.date-overview-bookings {
    grid-area: bookings;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    user-select: text;
    overflow: auto;
}

.date-overview-bookings-table {
    display: table;
    width: 100%;
    height: 100%;
}

.date-overview-bookings-table-bookingDiv {
    display: grid;
    grid-template-columns: 0.25fr 0.4fr 0.5fr 1.5fr 0.25fr 0.25fr 0.5fr 0.75fr 0.5fr;
    align-items: center;
    justify-content: flex-start;
    column-gap: 1rem;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--grey50);
    padding: 0.6rem 0.6rem 0.6rem 1rem;
    transition: background-color 0.2s linear, color 0.2s linear;
}

.date-overview-bookings-table-bookingDiv:not(:last-child) {
    border-bottom: 1px solid var(--grey200);
}

.date-overview-available {}

.date-overview-users {
    grid-area: users;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    user-select: text;
    overflow: auto;
}

.date-overview-users-table {
    display: table;
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.date-overview-users-table-userDiv {
    display: grid;
    grid-template-areas:
        "index user-ref user-lang user-phone1 avail prebook bookings";
    align-items: center;
    justify-content: flex-start;
    grid-template-columns: 2rem 10rem 10rem 6rem 6rem 6rem 1fr;
    grid-template-rows: 1fr;
    column-gap: 0.4rem;
    width: 100%;
    font-size: 0.65rem;
    font-weight: 500;
    background-color: var(--grey50);
    padding: 0.6rem 0.6rem 0.6rem 1rem;
    transition: background-color 0.2s linear, color 0.2s linear;
}

.date-overview-users-table-userDiv:hover {
    background-color: var(--lightBlue);
}

.date-overview-users-table-userDiv:not(:last-child) {
    border-bottom: 1px solid var(--grey200);
}

.date-overview-users-table-userDiv[user-avail=false] {
    display: none;
}

.date-overview-users-table-userDiv-infoEl[ref="index"] {
    grid-area: index;
    color: var(--grey400);
}

.date-overview-users-table-userDiv-infoEl[ref="user-ref"] {
    grid-area: user-ref;
}

.date-overview-users-table-userDiv-infoEl[ref="user-ref"] {}

.date-overview-users-table-userDiv-infoEl[ref="user-lang"] {
    grid-area: user-lang;
    font-weight: 400;
}

.date-overview-users-table-userDiv-infoEl[ref="user-phone1"] {
    grid-area: user-phone1;
    font-weight: 400;
    /*display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    background-color: var(--indigo500);
    color: var(--grey50);
    box-shadow: var(--boxShadow);*/
}

.date-overview-users-table-userDiv-avail {
    grid-area: avail;
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 0.4rem;
    row-gap: 0.4rem;
}

.date-overview-users-table-userDiv-prebook {
    grid-area: prebook;
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 0.4rem;
    row-gap: 0.4rem;
}

.date-overview-users-table-userDiv-avail-rangeDiv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    background-color: var(--green500);
    color: var(--grey50);
    box-shadow: var(--boxShadow);
}

.date-overview-users-table-userDiv[user-prebook=true] .date-overview-users-table-userDiv-avail-rangeDiv {
    background-color: var(--deepPurple400);
}

.date-overview-users-table-userDiv-bookings {
    grid-area: bookings;
    display: flex;
    row-gap: 0.4rem;
    column-gap: 0.6rem;
}

.date-overview-users-table-userDiv-bookings-bookingDiv {
    display: grid;
    align-items: center;
    justify-content: flex-start;
    grid-template-rows: 1fr;
    column-gap: 1rem;
    width: fit-content;
    font-size: 0.65rem;
    font-weight: 400;
    background-color: var(--lightBlue);
    border-radius: 4px;
    padding: 0.4rem 0.4rem 0.4rem 0.4rem;
    transition: background-color 0.2s linear, color 0.2s linear;
}

/* order create modal new */

.admin-console-modal-center[content="order-create"] {}

.admin-dates-modal-orderCreate-presetList {
    display: flex;
}

.admin-dates-modal-orderCreate-presetList-presetDiv {
    padding: 0.8rem;
    border-radius: 4px;
    box-shadow: var(--boxShadow);
}

.admin-dates-modal-orderCreate-presetList-presetDiv-field {
    display: grid;
    row-gap: 0.2rem;
}

.admin-dates-modal-orderCreate-presetList-presetDiv-field-title[require=true]::after {
    content: '*';
    font-family: 'Quicksand';
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--red200);
    margin-left: 0.2rem;
}

.admin-dates-modal-orderCreate-presetList-presetDiv-field-input {
    font-family: 'Quicksand';
    padding: 0.6rem;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 20rem;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-dates-modal-orderCreate-presetList-presetDiv-field-input:focus {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

/* csv input modal */
.admin-console-modal-frame[modal-content="admin-dates-csv-upload"] {}

.admin-console-modal-frame[modal-content="admin-dates-csv-upload"] .admin-console-modal-center {
    display: grid;
    grid-template-areas:
        'text'
        'templatebtn'
        'input'
        'preview';
    grid-template-rows: auto auto auto 1fr;
    grid-template-columns: 1fr;
    overflow: hidden;
    padding: 0.8rem;
    row-gap: 0.8rem;
}

.admin-dates-csv-upload-text {
    grid-area: text;
    display: flex;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.8rem;
    /* border-radius: 6px;
    background-color: var(--grey100); */
}

.admin-dates-csv-upload-templateBtn {
    grid-area: templatebtn;
}

.admin-dates-csv-upload-input {
    grid-area: input;
    display: flex;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--lightBlue);
    padding: 0.8rem;
    border-radius: 6px;
}

.admin-dates-csv-upload-preview {
    grid-area: preview;
    display: flex;
    overflow: auto;
    height: 100%;
    width: 100%;
    background-color: var(--grey100);
    border-radius: 6px;
    border: 1px solid var(--grey200);
}

.admin-dates-csv-upload-preview-table {
    display: table;
    width: 100%;
    height: 100%;
    user-select: text;
    border-collapse: collapse;
    font-size: 0.65rem;
}

.admin-dates-csv-upload-preview-table-header {
    border-bottom: 1px solid var(--grey200);

}

.admin-dates-csv-upload-preview-table-header-el {
    padding: 0.2rem;
}

.admin-dates-csv-upload-preview-table-row {}

.admin-dates-csv-upload-preview-table-row::not(:last-child) {
    border-bottom: 1px solid var(--grey200);
}

.admin-dates-csv-upload-preview-table-row-el {
    padding: 0.2rem;
}

/* date add project modal */
.admin-console-modal-frame[content="admin-dates-project-add"] {
    height: 50%;
    top: 25%;
    width: 20%;
    left: 40%;

}

.admin-dates-project-add-modal-inputs {
    grid-area: details;
    display: flex;
    flex-direction: column;
    row-gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    background-color: var(--grey50);
    height: 100%;
    overflow-y: auto;
}

.admin-dates-project-add-modal-field {
    display: grid;
    justify-content: space-between;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.4rem;
    height: fit-content;
}

.admin-dates-project-add-modal-field-title {
    color: var(--grey900);
    font-size: 0.75rem;
    font-weight: 500;
}

.admin-dates-project-add-modal-field-input {
    font-family: 'Quicksand';
    padding: 0.6rem;
    font-size: 0.65rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 20rem;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-dates-project-add-modal-field-input:focus {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

/* avail export modal */
.admin-console-modal-center[content='dates-avail-export'] {
    display: flex;
    overflow: hidden;
}

.admin-dates-avail-export-modal-dateList {
    grid-area: list;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    font-weight: 400;
    /* font-size: 0.65rem; */
    overflow-y: auto;
    user-select: text;
    background-color: transparent;
}

.admin-dates-avail-export-modal-dateList-dateRow {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0.4rem;
    width: 100%;
}

.admin-dates-avail-export-modal-dateList-dateRow:not(:last-child) {
    border-bottom: 1px solid var(--grey200);
}

.admin-dates-avail-export-modal-dateList-availRow {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0.4rem 0rem 0.4rem 0rem;
    grid-template-columns: 10rem 1fr;
    column-gap: 1rem;
    width: 100%;
}

.admin-dates-avail-export-modal-dateList-availRow-data {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* add event modal */
.admin-console-modal-frame[content="dates-modal-event-add"] {
    width: 30%;
    left: 40%;
    top: 25%;
    height: 50%;
}

.admin-dates-modal-event-add-form {
    grid-area: form;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    background-color: var(--grey100);
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.dates-modal-event-add-form-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    column-gap: 0.6rem;
    row-gap: 0.4rem;
    /*border: 1px solid var(--grey200);
    border-radius: 4px;*/
}

.dates-modal-event-add-form-field-title {
    color: var(--grey900);
    font-size: 0.75rem;
    font-weight: 500;
}

.dates-modal-event-add-form-field[required=true] .dates-modal-event-add-form-field-title::after {
    content: '*';
    font-family: 'Quicksand';
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--red200);
    margin-left: 0.2rem;
}

.dates-modal-event-add-form-field-input {
    font-family: 'Quicksand';
    padding: 0.6rem;
    font-size: 0.65rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 20rem;
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear;
}

.dates-modal-event-add-form-field-input:focus {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.dates-modal-event-add-form-field-select {
    font-family: 'Quicksand';
    padding: 0.6rem;
    font-size: 0.65rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 20rem;
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear;
}

.dates-modal-event-add-form-field-select:hover {
    border: 1px solid var(--indigo500);
    /* background-color: var(--lightBlue); */
}

.dates-modal-event-add-saveBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.dates-modal-event-add-saveBtn:hover {
    cursor: pointer;
    color: var(--indigo500);
    background-color: var(--grey50);
    box-shadow: none;
}

/* dates order statstics modal */

.admin-console-modal-frame[content="dates-order-statistics"] {
    left: 5%;
    width: 90%;
    height: 90%;
    top: 5%;
}

.admin-console-modal-center[content="dates-order-statistics"] {
    display: grid;
    grid-template-areas:
        'timeline timeline'
        'stats history';
    grid-template-rows: auto 1fr;
    grid-template-columns: auto 1fr;
    overflow: hidden;
}

.admin-dates-order-statistics-modal-generateBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-weight: 500;
    font-size: 0.6rem;
    padding: 0.4rem 0.6rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border: 1px solid var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-dates-order-statistics-modal-generateBtn:hover {
    cursor: pointer;
    color: var(--indigo500);
    border: 1px solid transparent;
    background-color: transparent;
    /* border: 1px solid var(--indigo500); */
    box-shadow: none;
}

.admin-dates-order-statistics-modal-saveBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-weight: 500;
    font-size: 0.6rem;
    padding: 0.4rem 0.6rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border: 1px solid var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-dates-order-statistics-modal-saveBtn:hover {
    cursor: pointer;
    color: var(--indigo500);
    border: 1px solid transparent;
    background-color: transparent;
    /* border: 1px solid var(--indigo500); */
    box-shadow: none;
}

.admin-dates-order-statistics-modal-timeline {
    grid-area: timeline;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    background-color: var(--grey50);
    border-bottom: 1px solid var(--grey200);
    padding: 0.4rem 0.8rem;
    height: 6rem;
}

.admin-dates-order-statistics-modal-timeline-monthDiv {
    display: grid;
    grid-template-areas:
        'orders'
        'info';
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    /* row-gap: 0.4rem; */
    font-size: 0.55rem;
    font-weight: 400;
    /* padding: 0.4rem; */
    /* opacity: 0.75; */
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear, opacity 0.2s linear;
}

.admin-dates-order-statistics-modal-timeline-monthDiv-info {
    grid-area: info;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding-top: 0.4rem; */
    color: var(--grey900);
}

.admin-dates-order-statistics-modal-timeline-monthDiv-orders {
    grid-area: orders;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 0.2rem;
    padding: 0.4rem;
}

.admin-dates-order-statistics-modal-timeline-monthDiv-orders-orderDiv {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
}

.admin-dates-order-statistics-modal-timeline-monthDiv-bar {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 25%;
    width: 6px;
    min-height: 25%;
    border-radius: 4px 4px 0px 0px;
    /* border-radius: 4px; */
    /* background-color: var(--grey50); */
    /* box-shadow: var(--boxShadow); */
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear, opacity 0.2s linear;
    animation: barFillVert 0.4s forwards;
    background-color: var(--indigo500);
}

.admin-dates-order-statistics-modal-timeline-monthDiv-bar {
    height: attr(value)'%';
}

.admin-dates-order-statistics-modal-timeline-monthDiv-bar:hover {
    background-color: var(--lightBlue);
}

.admin-dates-order-statistics-modal-statsDiv {
    grid-area: stats;
    display: flex;
    flex-direction: row;
    row-gap: 0.4rem;
    height: 100%;
    overflow: 100%;
    overflow: auto;
    margin-bottom: 4px;
    background-color: var(--grey100);
}

.admin-dates-order-statistics-modal-historicDiv {
    grid-area: history;
    display: flex;
    flex-direction: row;
    row-gap: 0.4rem;
    height: 100%;
    overflow: 100%;
    overflow: auto;
}

.admin-dates-order-statistics-modal-orderDiv {
    display: grid;
    grid-template-areas:
        'header'
        'center'
        'footer';
    grid-template-rows: auto 1fr auto;
    /* row-gap: 0.4rem; */
    /* width: 100%; */
    /* overflow: auto; */
    border-right: 1px solid var(--grey200);
    width: fit-content;
}

.admin-dates-order-statistics-modal-orderDiv:not(:last-child) {
    border-right: 1px solid var(--grey200);
}

.admin-dates-order-statistics-modal-orderDiv[order-focus="true"] {}

.admin-dates-order-statistics-modal-orderDiv-header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 0.4rem;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    width: 100%;
    background-color: var(--grey50);
    border-bottom: 1px solid var(--grey200);
    /* background-color: var(--grey100); */
    /* background-color: var(--grey200); */
}

.admin-dates-order-statistics-modal-orderDiv-center {
    grid-area: center;
    display: flex;
    flex-direction: column;
}

.admin-dates-order-statistics-modal-orderDiv-field {
    display: grid;
    grid-template-areas:
        'title input'
        'description input';
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 400;
    column-gap: 0.8rem;
    row-gap: 0.2rem;
    padding: 0.4rem 0.8rem;
    width: 100%;
    border-bottom: 1px solid var(--grey200);
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear, opacity 0.2s linear;
}

.admin-dates-order-statistics-modal-orderDiv-field:hover {
    background-color: var(--lightBlue);
}

.admin-dates-order-statistics-modal-orderDiv-field:not(:last-child) {
    /* border-bottom: 1px solid var(--grey200); */
}

.admin-dates-order-statistics-modal-orderDiv-field-title {
    grid-area: title;
    color: var(--grey900);
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
}

.admin-dates-order-statistics-modal-orderDiv-field-description {
    grid-area: description;
    font-size: 0.65rem;
    color: var(--grey600);
    white-space: nowrap;
}

.admin-dates-order-statistics-modal-orderDiv-field-input {
    grid-area: input;
    font-family: 'Quicksand';
    padding: 0.4rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 400;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 4rem;
    text-align: center;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-dates-order-statistics-modal-orderDiv-field-input:hover {
    border: 1px solid var(--indigo500);
}

.admin-dates-order-statistics-modal-orderDiv-field-input:focus {
    /* color: var(--indigo500); */
    /* background-color: var(--lightBlue); */
    border: 1px solid var(--indigo500);
}

.admin-dates-order-statistics-modal-orderDiv-footer {
    grid-area: footer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    row-gap: 0.4rem;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    width: 100%;
    /* border-top: 1px solid var(--grey200); */
    /* background-color: var(--grey200); */
}

.admin-dates-order-statistics-modal-statsDiv .admin-dates-order-statistics-modal-orderDiv-footer {
    margin-bottom: 5px;
}

/* order template save modal */
.admin-console-modal-frame[content="dates-order-favourite-save"] {
    height: 95%;
    width: 60%;
    top: 2.5%;
    left: 20%;
}

.admin-console-modal-center[content="dates-order-favourite-save"] {
    display: grid;
    grid-template-areas:
        'template templates'
        'order templates';
    grid-template-rows: 0fr 1fr;
    grid-template-columns: 1.5fr 1fr;
    align-items: flex-start;
    justify-content: flex-start;
    font-weight: 500;
    font-size: 0.7rem;
    height: 100%;
}

.admin-dates-modal-orderFavourite-templates {
    grid-area: templates;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-left: 1px solid var(--grey200);
}

.admin-dates-modal-orderFavourite-templates-header {
    grid-area: header;
    padding: 0.2rem 0.8rem;
    width: 100%;
    border-bottom: 1px solid var(--grey200);
}

.admin-dates-modal-orderFavourite-templates-search {
    grid-area: search;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    height: 2rem;
    padding: 0rem;
    /* padding: 0rem 0.8rem; */
    /* border-right: 1px solid var(--grey200); */
}

.admin-dates-modal-orderFavourite-templates-search::before {
    content: "search";
    font-family: "material symbols rounded";
    font-weight: 200;
    font-size: 1.3rem;
    color: var(--grey600);
    margin-right: 0.5rem;
    line-height: 1;
}

.admin-dates-modal-orderFavourite-templates-search-input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--grey600);
    background: var(--grey50);
}

.admin-dates-modal-orderFavourite-templates-list {
    grid-area: list;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 400;
    font-size: 0.65rem;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: var(--grey100);
}

.admin-dates-modal-orderFavourite-templates-list-templateDiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.6rem 0.8rem;
    color: var(--grey900);
    background-color: var(--grey50);
    width: 100%;
    border-bottom: 1px solid var(--grey200);
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-dates-modal-orderFavourite-templates-list-templateDiv:not(:last-child) {
    /* border-bottom: 1px solid var(--grey200); */
}

.admin-dates-modal-orderFavourite-templates-list-templateDiv:hover {
    cursor: pointer;
    /* color: var(--indigo500); */
    background-color: var(--lightBlue);
}

.admin-dates-modal-orderFavourite-templates-list-templateDiv-info {
    grid-area: info;
    display: grid;
    grid-template-areas:
        'ref timestamp'
        'note note';
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    /* row-gap: 0.4rem; */
    column-gap: 0.4rem;
    font-size: 0.65rem;
    font-weight: 400;
    width: 100%;
}

.admin-dates-modal-orderFavourite-templates-list-templateDiv-info-infoEl {
    display: flex;
}

.admin-dates-modal-orderFavourite-templates-list-templateDiv-info-infoEl[ref="ref"] {
    grid-area: ref;
    justify-content: flex-start;
}

.admin-dates-modal-orderFavourite-templates-list-templateDiv-info-infoEl[ref="create-timestamp"] {
    grid-area: timestamp;
    justify-content: flex-end;
}

.admin-dates-modal-orderFavourite-templates-list-templateDiv-info-infoEl[ref="note"] {
    grid-area: note;
    font-style: italic;
    padding-top: 0.2rem;
}

.admin-dates-modal-orderFavourite-templateDetails {
    grid-area: template;
    display: flex;
    row-gap: 0.6rem;
    flex-direction: column;
    padding: 0.8rem;
    font-size: 0.7rem;
    width: 100%;
    border-bottom: 1px solid var(--grey200);
}

.admin-dates-modal-orderFavourite-templateDetails-field {
    display: flex;
    flex-direction: column;
    row-gap: 0.2rem;
}

.admin-dates-modal-orderFavourite-templateDetails-field-title {
    color: var(--grey900);
    font-size: 0.75rem;
    font-weight: 500;
}

.admin-dates-modal-orderFavourite-templateDetails-field-description {
    color: var(--grey600);
    font-size: 0.65rem;
    font-weight: 400;
}

.admin-dates-modal-orderFavourite-templateDetails-field-input {
    font-family: 'Quicksand';
    padding: 0.6rem;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 20rem;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-dates-modal-orderFavourite-templateDetails-field-input:focus {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-dates-modal-orderFavourite-details {
    grid-area: order;
    display: flex;
    row-gap: 0.6rem;
    flex-direction: column;
    padding: 0.8rem;
    font-size: 0.7rem;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.admin-dates-modal-orderFavourite-details-field {
    display: flex;
    flex-direction: column;
    row-gap: 0.2rem;
}

.admin-dates-modal-orderFavourite-details-field-title {
    color: var(--grey900);
    font-size: 0.75rem;
    font-weight: 500;
}

.admin-dates-modal-orderFavourite-details-field-description {
    color: var(--grey600);
    font-size: 0.65rem;
    font-weight: 400;
}

.admin-dates-modal-orderFavourite-details-field-input {
    font-family: 'Quicksand';
    padding: 0.6rem;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 20rem;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-dates-modal-orderFavourite-details-field-input:focus {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-dates-modal-orderFavourite-details-field-select {
    font-family: 'Quicksand';
    padding: 0.6rem;
    font-size: 0.65rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 20rem;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-dates-modal-orderFavourite-details-field-select:hover {
    border: 1px solid var(--indigo500);
    /* background-color: var(--lightBlue); */
}

.admin-dates-modal-orderFavourite-details-field-select-option {}