@import "./styles.css";

.admin-console-content[content="booking"] {
    justify-content: center;
    align-items: center;
    padding: 0.4rem;
    /*background-color: rgb(31, 48, 76);*/
    display: grid;
    grid-template-areas:
        "header right"
        "frame right";
    /* row-gap: 0.2rem; */
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
}

.admin-book3-header {
    grid-area: header;
    /*height: fit-content;*/
    /*padding: 1rem;*/
    display: grid;
    grid-template-areas:
        'date notes guide avail travel orders';
    grid-template-columns: auto 0fr 0fr 0fr 0fr 1fr;
    grid-template-rows: 1fr;
    font-size: 0.6rem;
    padding: 0.4rem 0.4rem;
    column-gap: 0.6rem;
    color: var(--grey50);
    background-color: var(--dm3);
    box-shadow: var(--boxShadow);
    border-radius: 6px 6px 0px 0px;
    overflow: hidden;
    min-height: 3rem;
    border-bottom: 1px solid var(--grey900);
}

.admin-book3-header-dateDiv {
    grid-area: date;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    padding: 0.2rem 1rem;
    height: min-content;
    margin: auto;
}

.admin-book3-header-nav {
    grid-area: nav;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 0.2rem;
    width: fit-content;
}

.admin-book3-header-nav-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'material symbols rounded';
    font-weight: 400;
    font-size: 1rem;
    /* padding: 0.2rem 0.2rem; */
    border-radius: 4px;
    color: var(--grey50);
    background-color: transparent;
    /* box-shadow: var(--boxShadow); */
}

.admin-book3-header-notes {
    grid-area: notes;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'material symbols rounded';
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--grey50);
    position: relative;
    transition: opacity 0.2s linear, border 0.2s linear, background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
    cursor: pointer;
    height: min-content;
    margin: auto;
}

.admin-book3-header-notes[date-notes=true]::after {
    content: '';
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: var(--red500);
    top: 0;
    right: 0;
    position: absolute;
    box-shadow: var(--boxShadow);
}

.admin-book3-header-notes:hover {
    color: var(--indigo500);
}

.admin-book3-header-views {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 0.2rem;
    width: fit-content;
}

.admin-book3-header-views-viewBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'material symbols rounded';
    font-weight: 400;
    font-size: 1rem;
    /* padding: 0.2rem 0.2rem; */
    border-radius: 4px;
    color: var(--grey50);
    background-color: transparent;
    /* box-shadow: var(--boxShadow); */
}

.admin-book3-header-perGuide {
    grid-area: guide;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'material symbols rounded';
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--grey50);
    position: relative;
    transition: opacity 0.2s linear, border 0.2s linear, background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
    cursor: pointer;
    height: min-content;
    margin: auto;
}

.admin-book3-header-perGuide:hover {
    color: Var(--indigo500);
}

.admin-book3-header-avail {
    grid-area: avail;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'material symbols rounded';
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--grey50);
    position: relative;
    transition: opacity 0.2s linear, border 0.2s linear, background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
    cursor: pointer;
    height: min-content;
    margin: auto;
}

.admin-book3-header-avail:hover {
    color: Var(--indigo500);
}

.admin-book3-header-travel {
    grid-area: travel;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'material symbols rounded';
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--grey50);
    position: relative;
    transition: opacity 0.2s linear, border 0.2s linear, background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
    cursor: pointer;
    height: min-content;
    margin: auto;
}

.admin-book3-header-travel:hover {
    color: var(--indigo500);
}

.admin-book3-header-users {
    grid-area: users;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 0.4rem;
}

.admin-book3-header-users-userDiv {
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    margin: auto;
    width: 1.8rem;
    height: 1.8rem;
    overflow: hidden;
    color: var(--grey50);
    background-color: var(--grey50);
    box-shadow: var(--boxShadow);
}

.admin-book3-header-users-userDiv:hover::before {
    opacity: 0.6;
}

.admin-book3-header-users-userDiv::before {
    display: flex;
    justify-content: center;
    align-items: center;
    content: attr(user-initials);
    font-size: 0.75rem;
    font-family: 'Quicksand';
    font-weight: 600;
    color: var(--grey50);
    background-color: var(--grey800);
    opacity: 0;
    position: relative;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s linear;
}

.admin-book3-header-filters {
    grid-area: filters;
}

.admin-book3-exportBtn {
    grid-area: export;
    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);
    transition: background-color 0.2s linear;
}

.admin-book3-exportBtn:hover {
    cursor: pointer;
}

.admin-book3-fab {
    position: absolute;
    bottom: 1.2rem;
    left: 0.8rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
}

.admin-book3-fab-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3rem;
    width: 3rem;
    color: var(--grey50);
    background-color: var(--darkBlue);
    border-radius: 50%;
    box-shadow: var(--boxShadow);
    opacity: 0.8;
    transition: opacity 0.2s linear;
    transform: translate(0, 0);
}

.admin-book3-fab-btn:hover {
    cursor: pointer;
    opacity: 1;
}

.admin-book3-frame[view="booking"] {
    grid-area: frame;
    justify-self: center;
    display: grid;
    grid-template-areas:
        "header header right"
        "left timeline right"
        "footer footer right";
    grid-template-rows: 0fr 1fr 0fr;
    grid-template-columns: auto 1fr auto;
    font-weight: 500;
    width: 100%;
    height: 100%;
    color: var(--grey50);
    background-color: var(--dm3);
    box-shadow: var(--boxShadow);
    border-radius: 0px 0px 6px 6px;
    position: relative;
    overflow: hidden;
}

.admin-book3-frame-header {
    grid-area: header;
}

.admin-book3-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-book3-frame-footer-keys {
    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-book3-frame-footer-keys-key {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: fit-content;
}

.admin-book3-frame-footer-keys-key::before {
    content: ' ';
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--boxShadow);
    margin: auto;
    margin-right: 0.4rem;
}

.admin-book3-frame-footer-keys-key[type='booking']::before {
    height: 8px;
    width: 8px;
    border-radius: 50%;
}

.admin-book3-frame-footer-keys-key[type='user']::before {
    height: 8px;
    width: 16px;
    border-radius: 4px;
}

.admin-book3-frame-footer-keys-key[type='assign']::before {
    height: 10px;
    width: 30px;
    border-radius: 2px;
}

.admin-book3-frame-footer-keys-key[val=true]::before {
    background-color: var(--green500);
}

.admin-book3-frame-footer-keys-key[ref='cancel-decline']::before {
    background-color: var(--red500);
}

.admin-book3-frame-footer-keys-key[ref='prebook']::before {
    background-color: var(--deepPurple400);
}

.admin-book3-frame-footer-keys-key[ref='pending']::before {
    background-color: var(--deepPurple400);
}

.admin-book3-frame-footer-keys-key[ref='wait']::before {
    background-color: #FFC107;
}

.admin-book3-frame-footer-keys-key[ref='confirm']::before {
    background-color: var(--green500);
}

.admin-book3-frame-footer-keys-key[ref='no-user']::before {
    background-color: var(--indigo500);
}

.admin-book3-frame-footer-keys-key[ref='confirmed']::before {
    background-color: var(--green500);
}

.admin-book3-frame-footer-keys-key[ref='range-limit']::before {
    content: 'timelapse';
    font-family: 'material symbols rounded';
    font-weight: 400;
    font-size: 0.75rem;
}

.admin-book3-frame-footer-keys-key[ref='range-comment']::before {
    content: 'sms';
    font-family: 'material symbols rounded';
    font-weight: 400;
    font-size: 0.75rem;
}

.admin-book3-frame-left {
    grid-area: left;
    display: grid;
    grid-template-areas:
        'header header'
        'list1 list2';
    grid-template-columns: auto auto;
    grid-template-rows: 0fr 1fr;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    border-right: 1px solid var(--grey900);
    font-size: 0.6rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.admin-book3-frame-left-header {
    grid-area: header;
    display: grid;
    grid-template-areas:
        'search'
        'counts';
    row-gap: 0.4rem;
    padding: 0.4rem;
    padding-bottom: 0.4rem;
}

.admin-book3-left-counts {
    grid-area: counts;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}

.admin-book3-left-counts-div {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 0.2rem;
    opacity: 0.75;
    overflow: hidden;
    border: 1px solid var(--grey50);
    transition: opacity 0.2s linear, border 0.2s linear, background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
    box-shadow: var(--boxShadow);
}

.admin-book3-left-counts-div[ref="total"] {
    background-color: var(--dm4);
    color: var(--grey50);
    border: 1px solid var(--dm4);
    border-radius: 4px 0px 0px 4px;
}

.admin-book3-left-counts-div[ref="avail"] {
    background-color: var(--green500);
    color: var(--grey50);
    border: 1px solid var(--green500);
    border-radius: 0px 4px 4px 0px;

}

.admin-book3-left-counts-div[ref="prebook"] {
    background-color: var(--deepPurple400);
    color: var(--grey50);
    border: 1px solid var(--deepPurple400);
    border-radius: 0px;
}

.admin-book3-left-counts-div[ref="limited"] {
    background-color: var(--green500);
    color: var(--grey50);
}

.admin-book3-left-counts-div:hover {
    cursor: pointer;
    /* border: 1px solid var(--grey50); */
    opacity: 1;
    box-shadow: none;
}

.admin-book3-left-counts-div[select=true] {
    /* border: 1px solid var(--grey50); */
    opacity: 1;
    box-shadow: none;
}

.admin-book3-left-search {
    grid-area: search;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
}

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

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

.admin-book3-frame-right {
    grid-area: right;
    /*display: grid;
    grid-template-areas:
        'header'
        'list'
        'footer';
    grid-template-rows: 0fr 1fr 0fr;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /*row-gap: 0.3rem;*/
    width: 100%;
    height: 100%;
    /*padding: 0.8rem;*/
    font-size: 0.6rem;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
    max-width: 0rem;
    background-color: var(--grey50);
    box-shadow: var(--boxShadow);
    transition: 0.2s linear box-shadow, 0.2s linear max-width;
    border-radius: 4px;
}

.admin-book3-frame-right[show=true] {
    /*display: grid;*/
    display: flex;
    max-width: 30rem;
    transition: 0.2s linear box-shadow, 0.2s linear max-width;
}

.admin-book3-timeline {
    grid-area: timeline;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    font-weight: 500;
    font-size: 0.6rem;
    overflow: auto;
    background-color: #222838;
    position: relative;
    padding: 0.4rem;
}

/*.admin-book3-timelineheader {
    display: grid;
    grid-auto-flow: row;
    justify-content: center;
    align-items: center;
    grid-template-rows: 1fr;
    width: 100%;
    height: fit-content;
    min-height: 1.5rem;
    padding: 0.1rem;
    overflow: hidden;
}

.admin-book3-timelineheader-timediv {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;
    position: relative;
}

.admin-book3-timelineheader-timediv::before {
    content: attr(time-val);
    margin-left: -100%;
    font-size: 0.6rem;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    visibility: hidden;
}

.admin-book3-timelineheader-timediv:nth-child(4n + 2)::before {
    visibility: visible;
}*/

.admin-book3-timelineRow {
    display: grid;
    justify-content: flex-start;
    align-items: flex-end;
    column-gap: 0.1rem;
    width: auto;
    padding: 0.1rem 0.2rem;
    transition: background-color 0.2s linear;
}

.admin-book3-timelineRow:nth-child(odd) {}

.admin-book3-timelineRow:hover {}

.admin-book3-timelineRow[dragover=true] {
    background-color: #3b4254;
}

/*.admin-book3-timelineRow::before {
    content: attr(row-num);
    content: attr(total-hours);
    color: var(--grey400);
    margin: auto;
}*/

.admin-book3-timelineRow:before {
    content: attr(row-num);
    color: var(--grey400);
    width: 1rem;
    padding: 0.2rem;
    position: sticky;
    left: 0.2rem;
    font-weight: 400;
    font-size: 0.6rem;
}

.admin-book3-timelineRow:hover {
    /*opacity: 0.8;*/
}

.admin-book3-timelineRow[focus=true] {}

.admin-book3-timeline-assignDiv {
    display: grid;
    grid-template-areas:
        "indicators"
        "content";
    row-gap: 0rem;
    grid-template-rows: 0fr 1fr;
    grid-template-columns: 1fr;
    /* justify-content: flex-start; */
    /* align-items: center; */
    color: var(--grey50);
    grid-row: 1;
    /* position: relative; */
}

.admin-book3-timeline-assignDiv-indicators {
    grid-area: indicators;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0rem;
    height: fit-content;
}

.admin-book3-timeline-assignDiv-indicators-div {
    display: none;
    font-family: 'material symbols rounded';
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--grey50);
    padding: 0.2rem;
    transition: color 0.2s linear, opacity 0.2s linear;
}

.admin-book3-timeline-assignDiv-indicators-div[display=true] {
    display: flex;
}

.admin-book3-timeline-assignDiv-indicators-div:hover {
    opacity: 0.5;
}

.admin-book3-timeline-assignDiv-indicators-div[function=true] {
    cursor: pointer;
}

.booking-indicatorDiv-float {}

.admin-book3-timeline-assignDiv-content {
    grid-area: content;
    display: grid;
    grid-template-areas:
        "info-1 info-1"
        "info-2 langs";
    /*"resources resources";*/
    column-gap: 0.2rem;
    row-gap: 0rem;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: auto 1fr;
    justify-content: flex-start;
    align-items: center;
    padding: 0.2rem 0.4rem 0.2rem 0.4rem;
    border-radius: 4px;
    color: var(--grey50);
    background-color: var(--indigo500);
    border: 1px solid transparent;
    box-shadow: var(--boxShadow);
    font-size: 0.55rem;
    /* grid-row: 1; */
    white-space: nowrap;
    position: relative;
    /*overflow: hidden;*/
    /* transform: translate(0, 0); */
    animation: fadein 0.5s forwards;
    transition: opacity 0.2s linear, border 0.2s linear, background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-timeline-assignDiv[order-index="0"] .admin-book3-timeline-assignDiv-content {
    border-left: 4px solid orange;
}

.admin-book3-timeline-assignDiv[order-index="1"] .admin-book3-timeline-assignDiv-content {
    border-left: 4px solid tomato;
}

.admin-book3-timeline-assignDiv[order-index="2"] .admin-book3-timeline-assignDiv-content {
    border-left: 4px solid green;
}

.admin-book3-timeline-assignDiv[order-index="3"] .admin-book3-timeline-assignDiv-content {
    border-left: 4px solid blue;
}

.admin-book3-timeline-assignDiv[order-index="4"] .admin-book3-timeline-assignDiv-content {
    border-left: 4px solid yellow;
}

.admin-book3-timeline-assignDiv-content:hover {
    cursor: pointer;
    box-shadow: none;
    color: var(--indigo500);
    /* border: 1px solid var(--indigo500); */
    background-color: var(--lightBlue);
}

.admin-book3-timeline-assignDiv-content:hover .admin-book3-timeline-assignDiv-bookingDiv::after {
    display: none;
}

.admin-book3-timeline-assignDiv[show=false] {
    display: none;
}

.admin-book3-timeline-assignDiv[order-type="city"] .admin-book3-timeline-assignDiv-content {}

.admin-book3-timeline-assignDiv[order-type="essence"] .admin-book3-timeline-assignDiv-content {
    /* background-color: var(--pinkA200); */
}

.admin-book3-timeline-assignDiv[order-type="cruise"] .admin-book3-timeline-assignDiv-content {
    /*background-color: var(--pinkA200);*/
    /* border: 1px solid var(--pinkA200); */
}

.admin-book3-timeline-assignDiv[order-type="private"] .admin-book3-timeline-assignDiv-content {
    /* background-color: var(--deepPurple400); */
    /* border: 1px solid var(--pinkA200); */
}

/* .admin-book3-timeline-assignDiv[assign-translator=true] .admin-book3-timeline-assignDiv-content::after {
    position: absolute;
    display: flex;
    align-items: center;
    left: -1.6rem;
    content: 'g_translate';
    font-family: 'material symbols rounded';
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--grey50);
} */

.admin-book3-timeline-assignDiv[user-book=false] .admin-book3-timeline-assignDiv-content {
    /* background-color: var(--green500); */
}

.admin-book3-timeline-assignDiv[inventory-match=true] .admin-book3-timeline-assignDiv-content {
    /*color: var(--green500);*/
    /*border: 1px solid var(--green500);*/
    background-color: var(--green500);
    background-color: var(--darkBlue);
}

.admin-book3-timeline-assignDiv[inventory-match=false] .admin-book3-timeline-assignDiv-content {
    /*color: var(--red300);*/
    /*border: 1px solid var(--red300);*/
    /*background-color: var(--red300);*/
    opacity: 0.5;
}

.admin-book3-timeline-assignDiv[drag=true] {
    opacity: 0.5;
    transform: translate(0, 0);
}

.admin-book3-timeline-assignDiv[drag=true] .admin-book3-timeline-assignDiv-content {
    opacity: 0.5;
    transform: translate(0, 0);
}

.admin-book3-timeline-assignDiv[dragover=true] .admin-book3-timeline-assignDiv-content {
    opacity: 1.0;
    transform: translate(0, 0);
    color: var(--darkBlue);
    background: var(--lightBlue);
    border: 1px solid var(--darkBlue);
}

.admin-book3-timeline-assignDiv-info {
    text-overflow: clip;
    overflow: hidden;
}

.admin-book3-timeline-assignDiv-info[ref="info-1"] {
    grid-area: info-1;
}

.admin-book3-timeline-assignDiv-info[ref="info-2"] {
    grid-area: info-2;
}

.admin-book3-timeline-assignDiv-langs {
    grid-area: langs;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.2rem;
}

.admin-book3-timeline-assignDiv-langs-langDiv {}

.admin-book3-timeline-assignDiv::before {
    content: '';
    height: 100%;
    width: 4px;
    left: 0;
    position: absolute;
    transition: background-color 0.2s linear;
}

.admin-book3-timeline-assignDiv[assign-book-complete=true] .admin-book3-timeline-assignDiv-content {
    color: var(--grey900);
    background-color: var(--green500);
}

.admin-book3-timeline-assignDiv[assign-book-count="0"] .admin-book3-timeline-assignDiv-content {
    color: var(--grey900);
    background-color: var(--grey50);
}

.admin-book3-timeline-assignDiv[focus=true] .admin-book3-timeline-assignDiv-content {
    color: var(--grey50);
    background-color: var(--darkBlue);
    border: 1px solid var(--green500);
}

.admin-book3-timeline-assignDiv[link-match=true] .admin-book3-timeline-assignDiv-content {
    /* border: 1px solid var(--green500); */
    color: var(--grey50);
    background-color: var(--grey900);
    /* border: 1px solid var(--grey900); */
}

.admin-book3-timeline-assignDiv[user-match=true] .admin-book3-timeline-assignDiv-content {
    /* color: var(--grey900); */
    /* background-color: var(--grey50); */
    /* border: 1px solid var(--green500); */
    /*background-color: var(--darkBlue);*/
}

.admin-book3-timeline-assignDiv[user-match=false] .admin-book3-timeline-assignDiv-content {
    color: var(--grey500);
    background-color: var(--grey200);
    opacity: 0.5;
}

.admin-book3-timeline-assignDiv[user-book=true] .admin-book3-timeline-assignDiv-content {
    color: var(--grey50);
    background-color: var(--grey900);
    /* border: 1px solid var(--grey900); */
}

.admin-book3-timeline-assignDiv[assign-lowsales=true] .admin-book3-timeline-assignDiv-content {
    color: var(--grey50);
    background-color: var(--blue400);
    /* border: 1px solid var(--red300); */
    /* opacity: 0.5; */
}

.admin-book3-timeline-assignDiv[assign-guided=false] .admin-book3-timeline-assignDiv-content {
    color: var(--grey500);
    background-color: var(--grey200);
    opacity: 0.5;
    /* max-height: 1rem; */
}

.admin-book3-timeline-assignDiv[assign-cancel=true] .admin-book3-timeline-assignDiv-content {
    color: var(--grey50);
    background-color: var(--red300);
    /* border: 1px solid var(--red300); */
    /* opacity: 0.5; */
}

.admin-book3-timeline-assignDiv-resources {
    /*grid-area: resources;*/
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
    column-gap: 0.2rem;
    width: fit-content;
    height: 100%;
    padding: 0rem 0rem;
    margin-left: auto;
    position: absolute;
    right: 0;
}

.admin-book3-timeline-assignDiv-bookingDiv {
    /*right: 0;*/
    display: flex;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px var(--deepPurple400);
    /* overflow: hidden; */
    box-shadow: var(--boxShadow);
    background-color: var(--grey50);
    animation: fadein 0.5s forwards;
    transition: opacity 0.2s linear, border 0.2s linear, background-color 0.2s linear, color 0.2s linear;
}

.admin-book3-timeline-assignDiv-bookingDiv::before {
    display: flex;
    justify-content: center;
    align-items: center;
    content: attr(user-initials);
    font-size: 0.75rem;
    font-family: 'Quicksand';
    font-weight: 600;
    color: var(--grey50);
    background-color: var(--grey800);
    opacity: 0.6;
    position: relative;
    /* position: absolute; */
    width: 100%;
    height: 100%;
    width: calc(1.9rem - 1px);
    height: calc(1.9rem - 1px);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    /* left: 50%;
    transform: translateX(-50%); */
    /* right: 0; */
    /* left: 0; */
    transition: opacity 0.2s linear, border 0.2s linear, background-color 0.2s linear, color 0.2s linear;
}



.admin-book3-timeline-assignDiv-bookingDiv[cancel-status="cancelled-unpaid"]::before {
    background-color: var(--red300);
    opacity: 0.75;
}

.admin-book3-timeline-assignDiv-bookingDiv:hover::before {
    opacity: 0.2;
    cursor: pointer;
}

/* .admin-book3-timeline-assignDiv-bookingDiv[confirm-status="confirmed"]::before {
    background-color: var(--green500);
}

.admin-book3-timeline-assignDiv-bookingDiv[confirm-status="waiting"]::before {
    background-color: #FFC107;
} */

.admin-book3-timeline-assignDiv-bookingDiv[confirm-status="pending"] {
    border: 2px solid var(--deepPurple400);
}

.admin-book3-timeline-assignDiv-bookingDiv[confirm-status="waiting"] {
    border: 2px solid #FFC107;
}

.admin-book3-timeline-assignDiv-bookingDiv[confirm-status="confirmed"] {
    border: 2px solid var(--green500);
}

.admin-book3-timeline-assignDiv-bookingDiv[confirm-status="declined"] {
    border: 2px solid var(--red500);
    animation: border-flash 1.75s ease-in-out infinite;
}

.admin-book3-timeline-assignDiv-bookingDiv[confirm-status="declined"]::before {
    color: var(--grey50);
    background-color: var(--red500);
}

.admin-book3-timeline-assignDiv-bookingDiv[cancel-status="cancelled-unpaid"] {
    border: 2px solid var(--red300);
    /* animation: border-flash 3s ease-in-out infinite; */
}

.admin-book3-timeline-assignDiv-bookingDiv[cancel-status="cancelled-paid"] {
    border: 2px solid var(--green500);
    /* background-color: var(--green500); */
    /* animation: border-flash 3s ease-in-out infinite; */
}

.admin-book3-timeline-assignDiv-bookingDiv[user-external-edit="true"]::after {
    /* content: 'edit';
    font-family: 'material symbols rounded';
    color: var(--grey50);
    size: 1.4rem;
    position: absolute;
    top: -0.2rem;
    right: -0.2rem; */
}

.admin-book3-timeline-assignDiv-bookingDiv[user-load="error"] {
    border: none;
}

.admin-book3-timeline-assignDiv-bookingDiv[user-load="error"]::before {
    content: '!';
    font-size: 1rem;
    color: var(--red300);
    opacity: 1;
    background-color: var(--grey50);
}

.admin-book3-timeline-assignDiv[payment-display=true] .admin-book3-timeline-assignDiv-bookingDiv::after {
    content: attr(book-payment) ' NOK';
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: calc(100% + 0.2rem);
    bottom: calc(25% - 0.1rem);
    font-size: 0.5rem;
    padding: 0.2rem 0.4rem;
    margin: auto;
    background-color: var(--grey900);
    color: var(--grey50);
    border-radius: 4px;
    box-shadow: var(--boxShadow);
    animation: fadein 0.5s forwards;
}

.admin-book3-timeline-assignDiv-inventoryDiv {
    /*right: 0;*/
    display: flex;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    border: 2px solid transparent;
    box-shadow: var(--boxShadow);
    transition: opacity 0.2s linear, border 0.2s linear, background-color 0.2s linear, color 0.2s linear;
}

.admin-book3-timeline-assignDiv-inventoryDiv::before {
    display: flex;
    justify-content: center;
    align-items: center;
    content: attr(inventory-initials);
    font-size: 0.75rem;
    font-family: 'Quicksand';
    font-weight: 600;
    color: var(--indigo500);
    background-color: var(--grey100);
    opacity: 0.6;
    position: relative;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s linear;
}

.admin-book3-timeline-assignDiv-inventoryDiv:hover::before {
    opacity: 0.2;
}

.admin-book3-timeline-assignDiv-inventoryDiv:hover {
    cursor: pointer;
}

.admin-book3-timeline-assignDiv-inventoryDiv[confirm-status="pending"] {
    border: 2px solid var(--deepPurple400);
}

.admin-book3-timeline-assignDiv-inventoryDiv[confirm-status="confirmed"] {
    border: 2px solid var(--green500);
}

.admin-book3-timeline-assignDiv-inventoryDiv[confirm-status="cancelled"] {
    border: 2px solid var(--red300);
    animation: border-flash 3s ease-in-out infinite;
}

/*frame right*/
.admin-book3-right-closeBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.4rem;
    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, color 0.2s linear;
}

.admin-book3-right-closeBtn::after {
    content: 'clear';
    font-family: 'material symbols rounded';
    font-size: 1.2rem;
    font-weight: 400;
    transition: background-color 0.2s linear, color 0.2s linear;
}

.admin-book3-right-closeBtn:hover::after {
    color: var(--grey800);
}

.admin-book3-right-userInfo[show=false] {
    display: none;
}

.admin-book3-right-userInfo {
    display: grid;
    grid-template-areas:
        "header"
        "info"
        "note-internal"
        "skills"
        "avail"
        "bookings";
    grid-template-columns: 1fr;
    grid-template-rows: 0fr 0fr 0fr 2.5fr 0fr 1fr;
    height: 100%;
    width: 20rem;
    box-shadow: var(--boxShadow);
    user-select: text;
    color: var(--grey50);
    background-color: var(--dm4);
    padding: 0.4rem 0rem;
}

.admin-book3-right-userInfo-header {}

.admin-book3-right-userInfo-infoDiv {
    grid-area: info;
    display: grid;
    grid-template-areas:
        "ref photo"
        "email photo"
        "phone1 photo"
        "lang photo";
    grid-template-rows: 1fr 0fr 0fr 1fr;
    grid-template-columns: 1fr 0fr;
    row-gap: 0.6rem;
    column-gap: 0.6rem;
    padding: 0.8rem;
    border-bottom: 1px solid var(--grey900);
}

.admin-book3-right-userInfo-info-photo {
    grid-area: photo;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    width: 5.5rem;
    height: 5.5rem;
    overflow: hidden;
    background-color: var(--indigo500);
    box-shadow: var(--boxShadow);
    transition: border-radius 0.2s linear, opacity 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-right-userInfo-info-photo:hover {
    /*opacity: 0.65;
    box-shadow: none;
    cursor: pointer;*/
}

.admin-book3-right-userInfo-info-photo[zoom=true] {
    /*height: 18rem;
    width: 20rem;
    background-position: center;
    border-radius: 4px;*/

}

.admin-book3-right-userInfo-infoDiv-infoEl[ref="ref"] {
    grid-area: ref;
    font-weight: 600;
    font-size: 0.7rem;
}

.admin-book3-right-userInfo-infoDiv-infoEl {
    font-weight: 400;
    font-size: 0.7rem;
}

.admin-book3-right-userInfo-skills {
    grid-area: skills;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    column-gap: 0.4rem;
    row-gap: 0.4rem;
    overflow-y: scroll;
    padding: 0.8rem;
    margin-bottom: auto;
}

.admin-book3-right-userInfo-skills-skillDiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: fit-content;
    height: fit-content;
    column-gap: 0.4rem;
    /*color: var(--grey400);*/
    border: 1px solid var(--grey800);
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.2rem 0.6rem;
    border-radius: 24px;
}

.admin-book3-right-userInfo-skills-skillDiv[skill-value=true]::after {
    content: 'check';
    font-family: 'material symbols rounded';
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--green500);
}

.admin-book3-right-userInfo-skills-skillDiv[skill-value=false]::after {
    content: 'clear';
    font-family: 'material symbols rounded';
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--red500);
}

.admin-book3-right-userInfo-availability {
    grid-area: avail;
    display: flex;
    flex-direction: column;
    padding: 0.8rem;
    overflow-y: scroll;
}

.admin-book3-right-userInfo-bookings {
    grid-area: bookings;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    padding: 0.8rem;
    row-gap: 0.4rem;
    border-top: 1px solid var(--grey900);
}

.admin-book3-right-userInfo-bookings-bookingDiv {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.admin-book3-right-userInfo-note-internal {
    grid-area: note-internal;
    row-gap: 0.6rem;
    column-gap: 0.6rem;
    padding: 0.8rem;
    border-bottom: 1px solid var(--grey900);
}

/* inventory list */
.admin-book3-frame-right[content="inventory-list"] {}

.admin-book3-inventoryList {
    grid-area: list;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    row-gap: 0.3rem;
    width: 100%;
    height: 100%;
    font-size: 0.6rem;
    overflow-x: hidden;
    overflow-y: auto;
    padding-left: 0.2rem;
}

.admin-book3-inventoryList-header {
    grid-area: header;
}

.admin-book3-inventoryList-footer {
    grid-area: footer;
}

.admin-book3-inventoryList-inventoryDiv {
    display: grid;
    grid-template-areas:
        "bookings photo ref"
        "bookings photo .";
    column-gap: 0.8rem;
    row-gap: 0.2rem;
    grid-template-columns: 10px 0fr 1fr;
    grid-template-rows: 1fr 1fr;
    justify-content: flex-end;
    align-items: center;
    height: fit-content;
    width: 100%;
    padding: 0.2rem 0.4rem 0.2rem 0.4rem;
    position: relative;
    color: var(--grey600);
    color: var(--grey50);
    background-color: #3b4254;
    font-size: 0.65rem;
    font-weight: 500;
    border-radius: 4px;
    transform: translate(0, 0);
    z-index: 0;
}

.admin-book3-inventoryList-inventoryDiv-infoEl[ref="ref"] {
    grid-area: ref;
}

.admin-book3-inventoryList-inventoryDiv:hover {
    cursor: pointer;
}

.admin-book3-inventoryList-inventoryDiv[drag=true] {
    opacity: 0.5;
    transform: translate(0, 0);
}

.admin-book3-inventoryList-inventoryDiv-photo {
    grid-area: photo;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    background-color: var(--indigo500);
    box-shadow: var(--boxShadow);
}

.admin-book3-inventoryList-inventoryDiv-photo::before {
    display: flex;
    justify-content: center;
    align-items: center;
    content: attr(inventory-initials);
    font-size: 0.75rem;
    font-family: 'Quicksand';
    font-weight: 600;
    color: var(--indigo500);
    background-color: var(--grey50);
    opacity: 0.6;
    position: relative;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s linear;
}

.admin-book3-inventoryList-inventoryDiv-photo:hover::before {
    opacity: 0.2;
}

.admin-book3-inventoryList-inventoryDiv-timelineInfo {
    grid-area: bookings;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 0.2rem;
    column-gap: 0.2rem;
}

.admin-book3-inventoryList-inventoryDiv-timelineInfo-confirmStatusDiv {
    display: flex;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: var(--indigo500);
    border: 2px solid transparent;
    transition: opacity 0.2s linear, background-color 0.2s linear, border 0.2s linear;
}

.admin-book3-inventoryList-inventoryDiv-timelineInfo-confirmStatusDiv[confirm-status="pending"] {
    background-color: var(--deepPurple400);
}

.admin-book3-inventoryList-inventoryDiv-timelineInfo-confirmStatusDiv[confirm-status="waiting"] {
    background-color: #FFC107;
}

.admin-book3-inventoryList-inventoryDiv-timelineInfo-confirmStatusDiv[confirm-status="confirmed"] {
    background-color: var(--green500);
}

.admin-book3-inventoryList-inventoryDiv-timelineInfo-confirmStatusDiv[confirm-status="declined"] {
    border: 2px solid var(--red500);
    animation: border-flash 1.75s ease-in-out infinite;
}

.admin-book3-inventoryList-inventoryDiv-timelineInfo-confirmStatusDiv[confirm-status="cancelled"] {
    background-color: var(--red300);
    animation: border-flash 3s ease-in-out infinite;
}

.admin-book3-orderList {
    grid-area: orders;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    row-gap: 0.3rem;
    column-gap: 0.6rem;
    height: 100%;
    width: 100%;
    font-size: 0.6rem;
    overflow-x: auto;
    overflow-y: hidden;
}

.admin-book3-orderList-orderDiv {
    display: grid;
    grid-template-areas:
        "ref ref ref note"
        "port client client ."
        "depart depart type type";
    /* "progress progress progress"; */
    column-gap: 0.4rem;
    row-gap: 0.2rem;
    grid-template-columns: 1fr auto auto auto;
    grid-template-rows: 0fr 0fr 0fr;
    justify-content: flex-start;
    align-items: center;
    width: fit-content;
    padding: 0.4rem 0.4rem 0.4rem 0.6rem;
    position: relative;
    color: var(--grey50);
    /* overflow: hidden; */
    background-color: var(--dm4);
    /* border: 1px solid var(--dm4); */
    font-size: 0.55rem;
    font-weight: 400;
    border-radius: 6px;
    /* transform: translate(0, 0); */
    box-shadow: var(--boxShadow);
    z-index: 0;
    opacity: 1;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, opacity 0.2s linear;
    white-space: nowrap;
}

.admin-book3-orderList-orderDiv[order-notes="true"]::after {
    content: '';
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: var(--red500);
    top: 0;
    right: 0;
    position: absolute;
    box-shadow: var(--boxShadow);
}

.admin-book3-orderList-orderDiv[order-timeline-display="false"] {
    opacity: 0.5;
}

.admin-book3-orderList-orderDiv-infoEl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.admin-book3-orderList-orderDiv-infoEl[ref="ref"] {
    grid-area: ref;
    font-weight: 500;
}

.admin-book3-orderList-orderDiv[order-cancel=true] {
    color: var(--grey50);
    /* border: 1px solid var(--red200); */
    background-color: var(--red200);
    opacity: 0.75;
}

.admin-book3-orderList-orderDiv::before {
    content: '';
    height: 100%;
    width: 4px;
    left: 0;
    position: absolute;
    border-radius: 6px;
}

.admin-book3-orderList-orderDiv[order-index="0"]::before {
    background-color: orange;
}

.admin-book3-orderList-orderDiv[order-index="1"]::before {
    background-color: tomato;
}

.admin-book3-orderList-orderDiv[order-index="2"]::before {
    background-color: green;
}

.admin-book3-orderList-orderDiv[order-index="3"]::before {
    background-color: blue;
}

.admin-book3-orderList-orderDiv[order-index="4"]::before {
    background-color: yellow;
}

.admin-book3-orderList-orderDiv[order-index="5"]::before {
    background-color: pink;
}

.admin-book3-orderList-orderDiv-infoEl[ref="port"] {
    grid-area: port;
}

.admin-book3-orderList-orderDiv-infoEl[ref="status"] {
    grid-area: status;
}

.admin-book3-orderList-orderDiv-infoEl[ref="depart-location"] {
    grid-area: depart;
}

.admin-book3-orderList-orderDiv-infoEl[ref="client-ref"] {
    grid-area: client;
}

.admin-book3-orderList-orderDiv-infoEl[ref="type"] {
    grid-area: type;
}

.admin-book3-orderList-orderDiv-status {
    grid-area: status;
    content: 'timelapse';
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.2rem;
    font-family: 'material symbols rounded';
    color: var(--grey50);
    height: 100%;
    width: 100%;
}

.admin-book3-orderList-orderDiv-progressBar {
    grid-area: progress;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 1px;
    height: 10px;
    width: 100%;
    /*border-radius: 6px;*/
    /*overflow: hidden;*/
    /*box-shadow: var(--boxShadow);*/
}

.admin-book3-orderList-orderDiv-progressBar-assignEl {
    flex-grow: 1;
    flex-basis: 0;
    background-color: var(--deepPurple400);
    height: 100%;
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, opacity 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-orderList-orderDiv-progressBar-assignEl:first-child {
    border-radius: 4px 0px 0px 4px;
}

.admin-book3-orderList-orderDiv-progressBar-assignEl:last-child {
    border-radius: 0px 4px 4px 0px;
}

.admin-book3-orderList-orderDiv-progressBar-assignEl:only-child {
    border-radius: 4px;
}

.admin-book3-orderList-orderDiv-progressBar-assignEl:hover {
    cursor: pointer;
    /*opacity: 0.5;*/
    border-radius: 4px;
    height: 200%;
    box-shadow: var(--boxShadow);
}

.admin-book3-orderList-orderDiv-progressBar-assignEl[assign-book-waiting=true] {
    background-color: #FFC107;
}

.admin-book3-orderList-orderDiv-progressBar-assignEl[assign-book-complete=true] {
    background-color: var(--green500);
}

.admin-book3-orderList-orderDiv-progressBar-assignEl[assign-book-declined=true] {
    background-color: var(--red300);
}


.admin-book3-orderList-orderDiv-finance {
    grid-area: finance;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.admin-book3-orderList-orderDiv-finance>div {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    font-size: 0.65rem;
    width: fit-content;
    color: var(--grey50);
    background-color: var(--indigo500);
    /* border: 1px solid var(--indigo500); */
    box-shadow: var(--boxShadow);
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-orderList-orderDiv-finance>div::after {
    content: 'NOK';
}

.admin-book3-orderList-orderDiv-finance>div:hover {
    cursor: pointer;
    /* border: 1px solid var(--indigo500); */
    box-shadow: none;
    background-color: var(--green500);
}

/* .admin-book3-orderList-orderDiv-finance-paymentDiv::before {
    content: 'euro';
    font-family: 'material symbols rounded';
    font-size: 1.0rem;
    font-weight: 200;
}

.admin-book3-orderList-orderDiv-finance-invoiceDiv::before {
    content: 'request_quote';
    font-family: 'material symbols rounded';
    font-size: 1.0rem;
    font-weight: 400;
} */

/*userList*/
.admin-book3-userList {
    grid-area: list2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* row-gap: 0.2rem; */
    width: 14rem;
    height: 100%;
    font-size: 0.6rem;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.4rem;
    padding-top: 0rem;
    /*border-right: 1px solid var(--grey900);*/
}

.admin-book3-userList-header {
    grid-area: header;
}

.admin-book3-userList-footer {
    grid-area: footer;
}

.admin-book3-userList-div {
    display: grid;
    grid-template-areas:
        "names photo indicators"
        "lang photo indicators"
        "avail avail indicators"
        "bookings bookings indicators"
        "hours hours indicators";
    column-gap: 0.4rem;
    row-gap: 0.2rem;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto auto auto auto;
    justify-content: flex-end;
    align-items: center;
    height: fit-content;
    width: 100%;
    padding: 0.4rem;
    position: relative;
    color: var(--grey50);
    background-color: var(--dm4);
    font-size: 0.65rem;
    font-weight: 500;
    border: 1px solid var(--dm4);
    border-radius: 4px;
    box-shadow: var(--boxShadow);
    transform: translate(0, 0);
    z-index: 0;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
    word-wrap: normal;
}

.admin-book3-userList-div:not(:last-child) {
    margin-bottom: 0.2rem;
}

/*.admin-book3-userList-div::before {
    content: attr(list-index);
}*/

.admin-book3-userList-div[user-prebook=true] {
    /*border: 1px solid var(--deepPurple400);*/
}

.admin-book3-userList-div:hover {
    cursor: pointer;
    box-shadow: none;
    /* color: var(--indigo500); */
    border: 1px solid var(--lightBlue);
    /* background-color: var(--lightBlue); */
}

.admin-book3-userList-div[user-medical=true] {
    border: 1px solid var(--red500);
    color: var(--red500);
}

.admin-book3-userList-div[user-medical=true]:hover {
    border: 1px solid var(--red500);
    color: var(--red500);
}


.admin-book3-userList-div[user-available=false] {
    border: 1px solid var(--red500);
    color: var(--red500);
}

.admin-book3-userList-div[user-available=false]:hover {
    border: 1px solid var(--red500);
    color: var(--red500);
}

.admin-book3-userList-div[drag=true] {
    opacity: 0.5;
    transform: translate(0, 0);
}

.admin-book3-userList-div[show=false] {
    display: none;
}

.admin-book3-userList-div-indicators {
    grid-area: indicators;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    row-gap: 0.2rem;
    height: 100%;
    width: 1.2rem;
}

.admin-book3-userList-div[agreement-type='percent'] {
    content: '%';
}

.admin-book3-userList-div-app {
    grid-area: app;
    display: none;
    justify-content: center;
    align-items: center;
    font-family: 'material symbols rounded';
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--grey50);
}

.admin-book3-userList-div[user-app=true] .admin-book3-userList-div-app {
    display: flex;
}

.admin-book3-userList-div-indicators-note {
    grid-area: note;
    display: none;
    justify-content: center;
    align-items: center;
    font-family: 'material symbols rounded';
    margin-right: 0;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--grey50);
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear, opacity 0.2s linear;
}

.admin-book3-userList-div-indicators-note:hover {
    cursor: pointer;
    opacity: 0.5;
    /* color: var(--grey900); */
}

.admin-book3-userList-div[user-note=false] .admin-book3-userList-div-indicators-note {
    display: none;
    pointer-events: none;
}

.admin-book3-userList-div[user-note=true] .admin-book3-userList-div-indicators-note {
    display: flex;
    pointer-events: all;
}

.admin-book3-userList-div-indicators-confirm {
    grid-area: confirm;
    display: none;
    justify-content: center;
    align-items: center;
    font-family: 'material symbols rounded';
    margin-right: 0;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--grey50);
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear, opacity 0.2s linear;
}

.admin-book3-userList-div-indicators-confirm:hover {
    cursor: pointer;
    opacity: 0.5;
    /* color: var(--grey900); */
}

.admin-book3-userList-div[user-auto-confirm=false] .admin-book3-userList-div-indicators-confirm {
    display: none;
    pointer-events: none;
}

.admin-book3-userList-div[user-auto-confirm=true] .admin-book3-userList-div-indicators-confirm {
    display: flex;
    pointer-events: all;
}

.admin-book3-userList-div-langInfo {
    grid-area: lang;
    display: flex;
    /* flex-direction: row; */
    /* flex-wrap: wrap; */
    row-gap: 0.2rem;
    font-size: 0.5rem;
    /* padding: 0.2rem 0rem; */
    word-break: break-word;
    overflow: hidden;
}

.admin-book3-userList-div-availInfo {
    grid-area: avail;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 0.2rem;
    column-gap: 0.2rem;
    width: fit-content;
}

.admin-book3-userList-div-availInfo[range-limit=true]::before {
    /*background-color: var(--lightBlue);*/
    /*position: absolute;*/
    left: 0;
    top: 0;
    content: 'timelapse';
    font-family: 'material symbols rounded';
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--grey50);
}

.admin-book3-userList-div-availInfo[range-comment=true] {
    /*background-color: var(--indigo500);*/
}

.admin-book3-userList-div-availInfo-timeDiv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    /*border-radius: 4px;*/
    /*padding: 0.2rem 0.4rem;*/
    overflow: hidden;
    /*color: var(--grey50);
    background-color: var(--indigo500);
    box-shadow: var(--boxShadow);*/
}

.admin-book3-userList-div-availInfo[range-comment=true] {
    /*background-color: var(--indigo500);*/
    border-bottom: 1px solid var(--grey50);
}

.admin-book3-userList-div-timelineInfo {
    grid-area: bookings;
    display: grid;
    grid-template-areas:
        'hours bookings';
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    row-gap: 0.2rem;
    column-gap: 0.2rem;
}

.admin-book3-userList-div-timelineInfo[show=true] {
    display: grid;
}

.admin-book3-userList-div-timelineInfo[show=false] {
    display: none;
}

.admin-book3-userList-div-timelineInfo-hoursDiv {
    grid-area: hours;
    min-width: 2.5rem;
}

.admin-book3-userList-div-timelineInfo-bookingsDiv {
    grid-area: bookings;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.2rem;
}

.admin-book3-userList-div-timelineInfo-orderDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
    width: fit-content;
    padding: 0.2rem;
    column-gap: 0.2rem;
    border-radius: 4px;
    background-color: var(--grey50);
    border: 2px solid transparent;
    position: relative;
    transition: opacity 0.2s linear, background-color 0.2s linear, border 0.2s linear;
}

/* .admin-book3-userList-div-timelineInfo-orderDiv::before {
    content: '';
    height: 100%;
    width: 4px;
    left: 0;
    position: absolute;
    border-radius: 6px;
}

.admin-book3-userList-div-timelineInfo-orderDiv[order-index="0"]::before {
    background-color: orange;
}

.admin-book3-userList-div-timelineInfo-orderDiv[order-index="1"]::before {
    background-color: tomato;
}

.admin-book3-userList-div-timelineInfo-orderDiv[order-index="2"]::before {
    background-color: green;
}

.admin-book3-userList-div-timelineInfo-orderDiv[order-index="3"]::before {
    background-color: blue;
}

.admin-book3-userList-div-timelineInfo-orderDiv[order-index="4"]::before {
    background-color: yellow;
}

.admin-book3-userList-div-timelineInfo-orderDiv[order-index="5"]::before {
    background-color: pink;
} */

.admin-book3-userList-div-timelineInfo-confirmStatusDiv {
    display: flex;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: var(--indigo500);
    border: 2px solid transparent;
    transition: opacity 0.2s linear, background-color 0.2s linear, border 0.2s linear;
}

.admin-book3-userList-div-timelineInfo-confirmStatusDiv[confirm-status="pending"] {
    background-color: var(--deepPurple400);
}

.admin-book3-userList-div-timelineInfo-confirmStatusDiv[confirm-status="waiting"] {
    background-color: #FFC107;
}

.admin-book3-userList-div-timelineInfo-confirmStatusDiv[confirm-status="confirmed"] {
    background-color: var(--green500);
}

.admin-book3-userList-div-timelineInfo-confirmStatusDiv[confirm-status="declined"] {
    background-color: var(--red500);
    border: 1px solid var(--red500);
    animation: border-flash 3s ease-in-out infinite;
}

.admin-book3-userList-div-timelineInfo-confirmStatusDiv[cancel-status="cancelled-paid"] {
    background-color: var(--red300);
    animation: border-flash 3s ease-in-out infinite;
}

.admin-book3-userList-div-timelineInfo-confirmStatusDiv[cancel-status="cancelled-unpaid"] {
    background-color: var(--red300);
    animation: border-flash 3s ease-in-out infinite;
}

.admin-book3-userList-div-photo {
    grid-area: photo;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    color: var(--grey50);
    background-color: var(--grey50);
    box-shadow: var(--boxShadow);
}

.admin-book3-userList-div-photo::before {
    display: flex;
    justify-content: center;
    align-items: center;
    content: attr(user-initials);
    font-size: 0.75rem;
    font-family: 'Quicksand';
    font-weight: 600;
    color: var(--grey50);
    background-color: var(--grey800);
    opacity: 0;
    position: relative;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s linear;
}

.admin-book3-userList-div-photo:hover::before {
    opacity: 0.6;
}

.admin-book3-userList-div[guide-avail=true] .admin-book3-userList-div-photo {
    border: 2px solid var(--green500);
}

.admin-book3-userList-div[guide-avail=false] .admin-book3-userList-div-photo {
    border: 2px solid var(--red300);
}

.admin-book3-userList-div-names {
    grid-area: names;
    display: flex;
    /* white-space: nowrap; */
    /* overflow-wrap: normal; */
    width: fit-content;
}

.admin-book3-userList-div-info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    /* row-gap: 0.2rem; */
    width: 1.2rem;
}

.admin-book3-userList-div-info-infoEl {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "material symbols rounded";
    font-weight: 200;
    font-size: 1.2rem;
    color: var(--grey50);
    line-height: 1;
}

.admin-book3-userList-div-info-infoEl[ref="book-warning"] {
    color: var(--orange);
}

.admin-book3-userList-div-info-infoEl[ref="user-medical"] {
    color: var(--blue400);
}

.admin-book3-userList-div-info-infoEl[display=false] {
    display: none;
}

.admin-book3-userList-div[user-prebook=true] .admin-book3-userList-div-names[ref="names"] {
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    background-color: var(--deepPurple400);
    color: var(--grey50);
    box-shadow: var(--boxShadow);
}

.admin-book3-userList-div-hours {
    grid-area: hours;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 400;
    /* column-gap: 0.4rem; */
    transition: opacity 0.2s linear, background-color 0.2s linear, border 0.2s linear;
}

.admin-book3-userList-div-hours-type {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'material symbols rounded';
    font-size: 0.8rem;
    font-weight: 400;
}

.admin-book3-userList-div-hours-totals {
    display: flex;
    flex-direction: row;
    height: 4px;
    width: 100%;
    border-radius: 24px;
    background-color: var(--lightBlue);
    overflow: hidden;
    margin: 0.4rem 0.4rem 0.4rem 0.4rem;
}

.admin-book3-userList-div-hours-totals-fill {
    display: flex;
    height: 100%;
    width: 0%;
    background-color: var(--indigo500);
    /* opacity: 0.5; */
    animation: barFillHoriz 2s forwards;
}

.admin-book3-userList-div-hours-totals-current-fill {
    display: flex;
    height: 100%;
    width: 0%;
    background-color: var(--green500);
    opacity: 1;
    animation: barFillHoriz 2s forwards;
}

.admin-book3-userList-div-hours-current {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 2rem;
}

.admin-book3-userList-div-hours-min {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 3rem;
}

.admin-book3-userList-div-hours-min::before {
    content: '/';
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin-book3-actionList {
    grid-area: actionList;
    display: flex;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    row-gap: 0.3rem;
    width: 100%;
    height: 100%;
    padding: 0.4rem 0.4rem;
    background-color: var(--grey100);
    background-color: #222838;
    /* border-right: 1px solid var(--grey200); */
    font-size: 0.6rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.admin-book3-actionList[show=true] {
    display: flex;
}

.admin-book3-actionList-div {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 0.2rem 0.2rem;
    color: var(--grey50);
    /* background-color: #3b4254; */
    font-size: 0.6rem;
    font-family: 'Roboto Mono', monospace;
}

/*modals*/
/* import assignment */
.admin-console-modal-frame[content="book3-order-assignment-import"] {}

.admin-console-modal-center[content="book3-order-assignment-import"] {}

.admin-book3-modal-assignment-import-importFrame {
    grid-area: pasteArea;
    height: 100%;
    width: 100%;
    overflow: auto;
    padding: 0.8rem;
}

.admin-book3-modal-assignment-import-importFrame[show="false"] {
    display: none;
}

.admin-book3-modal-assignment-import-importFrame-pasteArea {
    grid-area: pasteArea;
    height: 50%;
    width: 100%;
    border: 1px solid var(--grey200);
    font-weight: 400;
    font-size: 0.65rem;
    padding: 0.4rem;
    border-radius: 4px;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear;
}

.admin-book3-modal-assignment-import-importFrame-pasteArea:hover {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);

}

.admin-book3-modal-assignment-import-importFrame-pasteArea:focus {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-book3-modal-assignment-import-importFrame-processBtn {
    grid-area: processBtn;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.65rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    border: 0px;
    cursor: pointer;
    transition: background-color 0.2s linear, color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
    width: fit-content;
}

.admin-book3-modal-assignment-import-importFrame-processBtn:hover {
    cursor: pointer;
    color: var(--indigo500);
    background-color: transparent;
    box-shadow: none;
}

/* manual add assignment */
.admin-console-modal-frame[content="admin-book-assignment-add-frame"] {
    display: grid;
    grid-template-areas:
        "header header header"
        "right customiser assignments";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0fr 1fr;
    width: 90%;
    height: 95%;
    top: 2.5%;
    left: 5%;
    font-size: 0.75rem;
    background-color: var(--grey50);
    border-radius: 6px;
    box-shadow: var(--boxShadow);
    position: absolute;
    z-index: 75;
    overflow: hidden;
}

.admin-book-assignment-add-frame-header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    height: 3rem;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--grey800);
    background-color: var(--grey100);
    border-bottom: 1px solid var(--grey200);
}

.admin-book-assignment-add-frame-right {
    grid-area: right;
    display: grid;
    grid-template-areas:
        "search"
        "list";
    grid-template-rows: 0fr 1fr;
    overflow: hidden;
}

.admin-book-assignment-add-search {
    grid-area: search;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    height: 3rem;
    padding: 0rem 0.8rem;
    border-bottom: 1px solid var(--grey200);
    border-right: 1px solid var(--grey200);
}

.admin-book-assignment-add-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-book-assignment-add-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-book-assignment-add-frame-productList {
    grid-area: list;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    row-gap: 0.4rem;
    column-gap: 1rem;
    padding: 1rem;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: var(--grey100);
    border-right: 1px solid var(--grey200);
}

.admin-book-assignment-add-frame-productList-productDiv {
    display: grid;
    justify-content: flex-start;
    align-items: flex-start;
    grid-template-areas:
        'client client photo'
        'code code photo'
        'ref ref photo'
        'duration duration photo'
        'port port photo'
        'type indicator indicator';
    grid-template-columns: 1fr 1fr 0fr;
    grid-template-rows: 0fr 0fr 0fr 0fr 0fr 0fr;
    row-gap: 0.2rem;
    column-gap: 0.4rem;
    padding: 0.8rem 0.6rem;
    width: 100%;
    height: fit-content;
    border-radius: 6px;
    box-shadow: var(--boxShadow);
    background-color: var(--grey50);
    border: 1px solid var(--grey50);
    transition: background-color 0.2s linear, border 0.2s linear, opacity 0.2s linear;
    /*margin: 0.4rem 0.6rem;*/
}

.admin-book-assignment-add-frame-productList-productDiv-indicators {
    grid-area: indicator;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    column-gap: 0rem;
}

.admin-book-assignment-add-frame-productList-productDiv-indicators-indicatorDiv {
    display: flex;
    font-family: 'material symbols rounded';
    font-size: 1rem;
    font-weight: 400;
    color: var(--indigo500);
    padding: 0.2rem;
    transition: color 0.2s linear, opacity 0.2s linear;
}

.admin-book-assignment-add-frame-productList-productDiv-indicators-indicatorDiv:hover {
    color: var(--grey900);
}

.admin-book-assignment-add-frame-productList-productDiv-indicators-indicatorDiv[display=true] {
    display: flex;
}

.admin-book-assignment-add-frame-productList-productDiv-indicators-indicatorDiv[display=false] {
    display: none;
}

.product-indicatorDiv-float {
    max-width: 18rem;
}

.admin-book-assignment-add-frame-productList-productDiv-photo {
    grid-area: photo;
    justify-content: center;
    align-items: center;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    width: 3.5rem;
    height: 4rem;
    overflow: hidden;
    margin-bottom: auto;
    background-color: var(--grey200);
    box-shadow: var(--boxShadow);
}

.admin-book-assignment-add-frame-productList-productDiv-infoEl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 400;
}

.admin-book-assignment-add-frame-productList-productDiv-infoEl[ref="ref"] {
    grid-area: ref;
    font-weight: 500;
    color: black;
}

.admin-book-assignment-add-frame-productList-productDiv-infoEl[ref="code"] {
    grid-area: code;
    /*font-weight: 700;*/
    color: black;
}

.admin-book-assignment-add-frame-productList-productDiv-infoEl[ref="client"] {
    grid-area: client;
    width: fit-content;
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    color: var(--lightBlue);
    background-color: var(--indigo500);
    box-shadow: var(--boxShadow);
    /*border: 1px solid var(--indigo500);*/
}

.admin-book-assignment-add-frame-productList-productDiv-infoEl[ref="duration"] {
    grid-area: duration;
}

.admin-book-assignment-add-frame-productList-productDiv-infoEl[ref="port"] {
    grid-area: port;
}

.admin-book-assignment-add-frame-productList-productDiv-infoEl[ref="type"] {
    grid-area: type;
}

.admin-book-assignment-add-frame-productList-productDiv:hover {
    cursor: pointer;
    background-color: var(--lightBlue);
    border: 1px solid var(--indigo500);
}

.admin-book-assignment-add-frame-productList-productDiv[select=true] {
    color: var(--grye800);
    background-color: var(--lightBlue);
    border: 1px solid var(--indigo500);
    /*background-color: var(--lightBlue);*/
}

.admin-book-assignment-add-frame-customiser {
    grid-area: customiser;
    display: grid;
    grid-template-areas:
        'info'
        'form'
        'notes';
    grid-template-rows: 0fr 1fr 0.2fr;
    /* row-gap: 0.6rem; */
    border-right: 1px solid var(--grey200);
    height: 100%;
    width: 100%;
    /* overflow-y: scroll; */
    overflow: hidden;
    background-color: var(--grey100);
}

.admin-book-assignment-add-frame-customiser-infoDiv {
    grid-area: info;
    display: grid;
    grid-template-columns: 1fr 0fr;
    grid-template-rows: 1fr 0fr;
    justify-content: space-between;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.2rem;
    width: 100%;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.8rem;
    /* color: var(--indigo500); */
    /* background-color: var(--lightBlue); */
    /* border-bottom: 1px solid var(--grey200); */
}

.admin-book-assignment-add-frame-customiser-info {
    display: flex;
    justify-content: flex-start;
    white-space: normal;
    align-items: center;
}

.admin-book-assignment-add-frame-customiser-form {
    grid-area: form;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    row-gap: 0.6rem;
    padding: 0.8rem;
    height: 100%;
    width: 100%;
    overflow: scroll;
}

.admin-book-assignment-add-frame-customiser-field {
    display: flex;
    flex-direction: column;
    display: grid;
    justify-content: space-between;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.2rem;
    font-size: 0.65rem;
    font-weight: 400;
}

.admin-book-assignment-add-frame-customiser-field-title {
    color: var(--grey900);
    font-size: 0.7rem;
    font-weight: 500;
}

.admin-book-assignment-add-frame-customiser-field-subtitle {
    color: var(--grey900);
    font-size: 0.65rem;
    font-weight: 400;
}

.admin-book-assignment-add-frame-customiser-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;
}

.admin-book-assignment-add-frame-customiser-field-input[override="true"] {
    background-color: var(--orange100);
    animation: fadein 1s forwards;
}

.admin-book-assignment-add-frame-customiser-field-input:hover {
    border: 1px solid var(--indigo500);
    /* background-color: var(--lightBlue); */
}

.admin-book-assignment-add-frame-customiser-field-input:focus {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-book-assignment-add-frame-customiser-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-book-assignment-add-frame-customiser-field-select:hover {
    border: 1px solid var(--indigo500);
    /* background-color: var(--lightBlue); */
}

.admin-book-assignment-add-frame-customiser-field-select-option {}

.admin-book-assignment-add-frame-customiser-actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    margin-top: 0.4rem;
}

.admin-book-assignment-add-frame-customiser-addButton[ref='add-1'] {
    /* margin-top: 0.4rem; */
}

.admin-book-assignment-add-frame-customiser-addButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-weight: 500;
    font-size: 0.6rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    transition: color 0.2s linear, background-color 0.2s linear, box-shadow 0.2s linear, border 0.2s linear;
}

.admin-book-assignment-add-frame-customiser-addButton:hover {
    cursor: pointer;
    box-shadow: none;
    color: var(--indigo500);
    background-color: transparent;
}

.admin-book-assignment-add-frame-customiser-errorDiv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-weight: 500;
    font-size: 0.7rem;
    color: var(--red300);
    opacity: 0;
    transition: opacity 0.2s linear;
}

.admin-book-assignment-add-frame-customiser-errorDiv[show=true] {
    opacity: 1;
}

.admin-book-assignment-add-frame-customiser-notes {
    grid-area: notes;
    display: flex;
    /* grid-template-rows: 1fr 1fr; */
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    row-gap: 0.6rem;
    padding: 0.8rem;
    height: 100%;
    width: 100%;
    border-top: 1px solid var(--grey200);
    overflow: scroll;
}

.admin-book-assignment-add-frame-customiser-notes-noteDiv {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: 0.2rem;
    font-weight: 400;
    font-size: 0.65rem;
    background-color: var(--grey50);
    border-radius: 8px;
    padding: 0.6rem;
    width: 100%;
    box-shadow: var(--boxShadow);
}

.admin-book-assignment-add-frame-customiser-notes-noteDiv-header {
    display: flex;
    font-weight: 500;
    font-size: 0.65rem;
}

.admin-book-assignment-add-frame-customiser-notes-noteDiv-body {
    display: flex;
    font-weight: 400;
    font-size: 0.65rem;
    /* font-style: italic; */
    user-select: text;
}

.admin-book-assignment-add-frame-customiser-notes-noteDiv-timestamp {
    display: flex;
    color: var(--grey600);
    font-weight: 400;
    font-size: 0.65rem;
    font-style: italic;
}

.admin-book-assignment-add-modal-customiser-hourSelect,
.admin-book-assignment-add-modal-customiser-minSelect {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.4rem;
    column-gap: 0.4rem;
    width: 100%;
    padding: 0rem 0rem 0.4rem 0rem;
}

.admin-book-assignment-add-modal-customiser-hourSelect-div,
.admin-book-assignment-add-modal-customiser-minSelect-div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.6rem;
    width: 3rem;
    font-size: 0.65rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-book-assignment-add-modal-customiser-hourSelect-div:hover,
.admin-book-assignment-add-modal-customiser-minSelect-div:hover {
    cursor: pointer;
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-book-assignment-add-modal-customiser-hourSelect-div[select="true"],
.admin-book-assignment-add-modal-customiser-minSelect-div[select="true"] {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-book-assignment-add-frame-assignmentList {
    grid-area: assignments;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: var(--grey50);
    counter-reset: number;
}

.admin-book-assignment-add-frame-assignmentList-assignmentDiv {
    display: grid;
    grid-template-columns: 1.4rem 1fr 0fr;
    justify-content: flex-start;
    align-items: center;
    padding: 0.6rem 0.8rem;
    background-color: var(--grey50);
    font-weight: 500;
    font-size: 0.65rem;
    transition: background-color 0.2s linear, color 0.2s linear;
    counter-increment: number;
}

.admin-book-assignment-add-frame-assignmentList-assignmentDiv:not(:last-child) {
    border-bottom: 1px solid var(--grey200);
}

.admin-book-assignment-add-frame-assignmentList-assignmentDiv:hover {
    cursor: pointer;
    background-color: var(--lightBlue);
}

.admin-book-assignment-add-frame-assignmentList-assignmentDiv::before {
    /* content: attr(list-index); */
    content: counter(number)" ";
    color: var(--grey400);
    font-size: 0.65rem;
}

.admin-book-assignment-add-frame-assignmentList-assignmentDiv[row-mark=true] {
    color: var(--green500);
    background-color: var(--lightGreen);
}

.admin-book-assignment-add-frame-assignmentList-assignmentDiv-removeBtn {
    content: 'close';
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* font-family: 'material symbols rounded'; */
    font-size: 0.6rem;
    color: var(--red300);
    height: 100%;
    transition: background-color 0.2s linear, color 0.2s linear;

}

.admin-book-assignment-add-frame-assignmentList-assignmentDiv-removeBtn:hover {
    color: var(--indigo500);
}

/* extra add modal */
.admin-book-extra-add-frame {
    display: grid;
    grid-template-areas:
        "header header header"
        "right customiser assignments";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0fr 1fr;
    width: 90%;
    height: 80%;
    top: 10%;
    left: 5%;
    font-size: 0.75rem;
    background-color: var(--grey50);
    border-radius: 6px;
    box-shadow: var(--boxShadow);
    position: absolute;
    z-index: 75;
    overflow: hidden;
}

.admin-book-extra-add-frame[show=true] {
    display: grid;
}

.admin-book-extra-add-frame-header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    height: 3rem;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--grey800);
    background-color: var(--grey100);
    border-bottom: 1px solid var(--grey200);
}

.admin-book-extra-add-frame-right {
    grid-area: right;
    display: grid;
    grid-template-areas:
        "search"
        "list";
    grid-template-rows: 0fr 1fr;
    overflow: hidden;
}

.admin-book-extra-add-search {
    grid-area: search;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    height: 3rem;
    padding: 0rem 0.8rem;
    border-bottom: 1px solid var(--grey200);
    border-right: 1px solid var(--grey200);
}

.admin-book-extra-add-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-book-extra-add-search-input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    color: var(--grey600);
    background: var(--grey50);
}

.admin-book-extra-add-frame-extraList {
    grid-area: list;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    row-gap: 1rem;
    column-gap: 1rem;
    padding: 1rem;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: var(--grey100);
    border-right: 1px solid var(--grey200);
}

.admin-book-extra-add-frame-extraList-extraDiv {
    display: grid;
    justify-content: flex-start;
    align-items: flex-start;
    grid-template-areas:
        'client client photo'
        'code code photo'
        'ref ref photo'
        'type type photo';
    grid-template-columns: 1fr 1fr 0fr;
    grid-template-rows: 0fr 0fr 0fr 0fr;
    row-gap: 0.4rem;
    column-gap: 0.4rem;
    padding: 0.8rem 0.6rem;
    width: 100%;
    height: fit-content;
    border-radius: 6px;
    box-shadow: var(--boxShadow);
    background-color: var(--grey50);
    border: 1px solid var(--grey50);
    transition: background-color 0.2s linear, border 0.2s linear;
    /*margin: 0.4rem 0.6rem;*/
}

.admin-book-extra-add-frame-extraList-extraDiv-photo {
    grid-area: photo;
    justify-content: center;
    align-items: center;
    margin: auto;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    width: 3.5rem;
    height: 4rem;
    overflow: hidden;
    margin-left: 0.4rem;
    background-color: var(--grey200);
    box-shadow: var(--boxShadow);
}

.admin-book-extra-add-frame-extraList-extraDiv-infoEl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.7rem;
}

.admin-book-extra-add-frame-extraList-extraDiv-infoEl[ref="ref"] {
    grid-area: ref;
    font-weight: 600;
    color: black;
}

.admin-book-extra-add-frame-extraList-extraDiv-infoEl[ref="code"] {
    grid-area: code;
    /*font-weight: 700;*/
    color: black;
}

.admin-book-extra-add-frame-extraList-extraDiv-infoEl[ref="client"] {
    grid-area: client;
    width: fit-content;
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    color: var(--lightBlue);
    background-color: var(--indigo500);
    box-shadow: var(--boxShadow);
    /*border: 1px solid var(--indigo500);*/
}

.admin-book-extra-add-frame-extraList-extraDiv-infoEl[ref="type"] {
    grid-area: type;
}

.admin-book-extra-add-frame-extraList-extraDiv:hover {
    cursor: pointer;
    background-color: var(--lightBlue);
    border: 1px solid var(--indigo500);
}

.admin-book-extra-add-frame-extraList-extraDiv[select=true] {
    color: var(--grye800);
    background-color: var(--lightBlue);
    border: 1px solid var(--indigo500);
    /*background-color: var(--lightBlue);*/
}

/* order cost modal */
.admin-console-modal-frame[content="order-cost"] {
    display: grid;
    grid-template-areas:
        "header"
        "center"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 0fr 1fr 0fr;
    width: 60%;
    height: 80%;
    top: 10%;
    left: 20%;
    font-size: 0.75rem;
    background-color: var(--grey50);
    border-radius: 6px;
    box-shadow: var(--boxShadow);
    position: absolute;
    z-index: 75;
    overflow: hidden;
}

.admin-console-modal-center[content='order-cost'] {
    grid-area: center;
    display: grid;
    grid-template-areas:
        'bookings'
        'calcs'
        'notes'
        'logs';
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 1fr;
    overflow: hidden;
}

.admin-book-order-costModal-bookingList {
    grid-area: bookings;
    display: flex;
    flex-direction: column;
    overflow: auto;
    border-bottom: 1px solid var(--grey200);
    user-select: text;
}

.admin-book-order-costModal-bookingList-bookingDiv {
    display: grid;
    grid-template-columns: 16rem 1fr 4rem 4rem 4rem;
    grid-template-rows: 1fr;
    column-gap: 0.4rem;
    padding: 0.6rem;
}

.admin-book-order-costModal-bookingList-bookingDiv-infoEl {}

.admin-book-order-costModal-bookingCalcs {
    grid-area: calcs;
}

.admin-book-order-costModal-editLogs {
    grid-area: logs;
}

/* order preset save modal */
.admin-console-modal-frame[content="order-preset-save"] {
    display: grid;
    grid-template-areas:
        "header"
        "center"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 0fr 1fr 0fr;
    width: 40%;
    height: 80%;
    top: 10%;
    left: 30%;
    font-size: 0.75rem;
    background-color: var(--grey50);
    border-radius: 6px;
    box-shadow: var(--boxShadow);
    position: absolute;
    z-index: 75;
    overflow: hidden;
}

.admin-console-modal-center[content='preset-save'] {
    grid-area: center;
    display: grid;
    grid-template-areas:
        'info'
        'assignList';
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
    overflow: hidden;
}

.admin-book-preset-save-info {
    grid-area: info;
    display: grid;
    row-gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    border-bottom: 1px solid var(--grey200);
}

.admin-book-preset-save-assignList {
    grid-area: assignList;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: auto;
}

.admin-book-preset-save-assignList-assignDiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 0.6rem 0.8rem;
}

.admin-book-preset-save-assignList-assignDiv:not(:last-child) {
    border-bottom: 1px solid var(--grey200);
}


.admin-book-export-frame {
    display: grid;
    grid-template-areas:
        "header"
        "bookings"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 0fr 1fr 0fr;
    width: 90%;
    height: 95%;
    top: 2.5%;
    left: 5%;
    font-size: 0.75rem;
    background-color: var(--grey50);
    border-radius: 6px;
    box-shadow: var(--boxShadow);
    position: absolute;
    z-index: 75;
    overflow: hidden;
}

.admin-book-export-frame[show=true] {
    display: grid;
}

.admin-book-export-frame-header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    height: 3rem;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--grey800);
    background-color: var(--grey100);
    border-bottom: 1px solid var(--grey200);
}

.admin-book-export-frame-footer {
    grid-area: footer;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 0.8rem;
    padding: 0.8rem;
    height: 3rem;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--grey800);
    background-color: var(--grey100);
    border-top: 1px solid var(--grey200);
}

.admin-book-export-frame-bookingsList {
    grid-area: bookings;
    display: flex;
    width: 100%;
    height: 100%;
    user-select: text;
    overflow: auto;
}

.admin-book-export-frame-bookingsList-table {
    display: table;
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.admin-book-export-frame-bookingsList-table-header {
    display: grid;
    grid-template-columns: 4rem 8rem 6rem 1fr 4rem 4rem 1fr 10rem 10rem 8rem 10rem;
    align-items: center;
    justify-content: flex-start;
    column-gap: 1rem;
    width: 100%;
    font-size: 0.65rem;
    font-weight: 400;
    border-bottom: 1px solid var(--grey200);
    padding: 0.6rem 0.6rem 0.6rem 1rem;
    transition: background-color 0.2s linear, color 0.2s linear;
}

.admin-book-export-frame-bookingsList-table-header-el {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.admin-book-export-frame-bookingsList-table-header th {
    font-weight: 500;
}

.admin-book-export-frame-bookingsList-table-row {
    display: grid;
    grid-template-columns: 4rem 8rem 6rem 1fr 4rem 4rem 1fr 10rem 10rem 8rem 10rem;
    align-items: center;
    justify-content: flex-start;
    column-gap: 1rem;
    width: 100%;
    font-size: 0.65rem;
    font-weight: 400;
    background-color: var(--grey50);
    padding: 0.6rem 0.6rem 0.6rem 1rem;
    transition: background-color 0.2s linear, color 0.2s linear;
}

.admin-book-export-frame-bookingsList-table-row:not(:last-child) {
    border-bottom: 1px solid var(--grey200);
}

.admin-book-export-frame-bookingsList-table-row:nth-child(odd) {
    background-color: var(--grey100);
}

.admin-book-export-frame-bookingsList-table-row:hover {
    color: var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-book-export-frame-bookingsList-table-blankRow {
    display: none;
}

.admin-book-export-frame-bookingsList-table-data {}

.admin-book-export-frame-bookingsList-table-data[ref="booking-ref"] {
    font-weight: 500;
}

.admin-book-export-frame-bookingsList-table-data[ref="booking-confirm-status"] {
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 0.2rem 0.6rem;
    font-weight: 500;
    font-size: 0.65rem;
    border-radius: 4px;
    box-shadow: var(--boxShadow);
    /*margin-left: auto;*/
}

.admin-book-export-frame-bookingsList-table-data[ref="booking-confirm-status"][confirm-status="pending"] {
    color: var(--grey50);
    background-color: var(--deepPurple400);

}

.admin-book-export-frame-bookingsList-table-data[ref="booking-confirm-status"][confirm-status="confirmed"] {
    color: var(--grey50);
    background-color: var(--green500);
}

.admin-book-export-frame-bookingsList-table-data[ref="booking-confirm-status"][confirm-status="cancelled"] {
    color: var(--grey50);
    background-color: var(--red300);
}

.admin-book-export-frame[content='export-names'] {
    display: grid;
    grid-template-areas:
        "header"
        "name-list"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 0fr 1fr 0fr;
    width: 25%;
    height: 90%;
    top: 5%;
    left: 37.5%;
    font-size: 0.75rem;
    background-color: var(--grey50);
    border-radius: 6px;
    box-shadow: var(--boxShadow);
    position: absolute;
    z-index: 75;
    overflow: hidden;
}

.admin-book-export-frame-nameList {
    grid-area: name-list;
    display: flex;
    width: 100%;
    height: 100%;
    user-select: text;
    overflow: auto;
}

.admin-book-export-frame-nameList-table-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: fit-content;
    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;
}

.admin-book-export-frame[content='export-dispatch'] {
    display: grid;
    grid-template-areas:
        "header"
        "dispatch-info"
        "dispatch-list"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 0fr 0fr 1fr 0fr;
    width: 95%;
    height: 90%;
    top: 5%;
    left: 2.5%;
    font-size: 0.75rem;
    background-color: var(--grey50);
    border-radius: 6px;
    box-shadow: var(--boxShadow);
    position: absolute;
    z-index: 75;
    overflow: hidden;
}

.admin-book-export-frame-dispatchInfo {
    grid-area: dispatch-info;
    display: grid;
    grid-template-areas:
        "date ref port location";
    grid-template-columns: auto auto auto 1fr;
    grid-template-rows: 1fr;
    column-gap: 1rem;
    row-gap: 0.5rem;
    width: 100%;
    height: 100%;
    padding: 0.6rem 0.6rem 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 1px solid var(--grey200);
    user-select: text;
}

.admin-book-export-frame-dispatchInfo-el[ref="order-depart-location"] {
    grid-area: location;
}

.admin-book-export-frame-dispatchList {
    grid-area: dispatch-list;
    display: flex;
    width: 100%;
    height: 100%;
    user-select: text;
    overflow: auto;
}

.admin-book-export-frame-dispatchList-table {
    display: table;
    width: 100%;
    height: 100%;
}

.admin-book-export-frame-dispatchList-table-header {
    display: grid;
    grid-template-columns: 4rem 6rem 20rem 4rem 4rem 6rem 4rem 8rem 8rem 8rem 8rem 4rem 4rem 4rem 4rem 4rem;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-content: flex-start;
    column-gap: 1rem;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 500;
    border-bottom: 1px solid var(--grey200);
    padding: 0.6rem 0.6rem 0.6rem 1rem;
    transition: background-color 0.2s linear, color 0.2s linear;
}

.admin-book-export-frame-dispatchList-table-header-el {
    display: flex;
    justify-content: flex-start;
}

.admin-book-export-frame-dispatchList-table-row {
    display: grid;
    grid-template-areas:
        "capacity code ref depart return lang group guide guide-phone final-depart final-return final-adult final-child final-escort"
        ". . . . . . bus bus-phone . . . . .";
    grid-template-columns: 4rem 6rem 20rem 4rem 4rem 6rem 4rem 8rem 8rem 8rem 8rem 4rem 4rem 4rem 4rem 4rem;
    grid-template-rows: 1fr auto;
    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;
}

.admin-book-export-frame-dispatchList-table-row:nth-child(odd) {
    background-color: var(--grey100);
}

.admin-book-export-frame-dispatchList-table-row:not(:last-child) {
    border-bottom: 1px solid var(--grey200);
}

.admin-book-export-frame-dispatchList-table-row:hover {
    color: var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-book-export-frame-dispatchList-table-data {}

.admin-book-export-frame-dispatchList-table-data[ref="booking-ref"] {
    font-weight: 500;
}

.admin-book-export-frame-dispatchList-table-data[ref="booking-confirm-status"] {
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 0.2rem 0.6rem;
    font-weight: 500;
    font-size: 0.65rem;
    border-radius: 4px;
    box-shadow: var(--boxShadow);
    /*margin-left: auto;*/
}

.admin-book-export-frame-dispatchList-table-row[confirm-status="pending"] [ref="booking-confirm-status"] {
    color: var(--grey50);
    background-color: var(--deepPurple400);
}

.admin-book-export-frame-dispatchList-table-row[confirm-status="confirmed"] [ref="booking-confirm-status"] {
    color: var(--grey50);
    background-color: var(--green500);
}

.admin-book-export-frame-dispatchList-table-row[confirm-status="cancelled"] [ref="booking-confirm-status"] {
    color: var(--grey50);
    background-color: var(--red300);
}

.admin-console-modal-frame[content=date-order-logs] {
    height: 95%;
    width: 95%;
    top: 2.5%;
    left: 2.5%;
}

.admin-console-modal-center[content=date-order-logs] {
    display: grid;
    grid-template-areas:
        "logs";
    grid-template-rows: 1fr;
}

.admin-book3-modal-orderLogs-logs {
    display: flex;
    flex-direction: row;
    /* padding: 0.6rem; */
    overflow-x: auto;
    overflow-y: hidden;
}

.admin-book3-modal-orderLogs-orderDiv {
    display: flex;
    flex-direction: column;
    /* row-gap: 0.2rem; */
    overflow: auto;
    width: 100%;
    height: 100%;
}

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

.admin-book3-modal-orderLogs-orderDiv-logDiv {
    display: grid;
    grid-template-areas:
        'icon order-ref action timestamp'
        'icon info info info';
    grid-template-columns: 2rem 1fr auto 6rem;
    grid-template-rows: 0fr 1fr;
    padding: 0.4rem 0.6rem;
    row-gap: 0.2rem;
    column-gap: 0.4rem;
    /* background-color: var(--lightBlue); */
    font-family: 'Roboto Mono', monospace;
    font-weight: 300;
    font-size: 0.6rem;
    /* border-radius: 4px; */
    user-select: text;
    transition: colors 0.2s linear, background-color 0.2s linear;
}

.admin-book3-modal-orderLogs-orderDiv-logDiv:not(:last-child) {
    border-bottom: 1px solid var(--grey200);
}

.admin-book3-modal-orderLogs-orderDiv-logDiv:hover {
    /* color: var(--indigo500); */
    background-color: var(--lightBlue);
}

.admin-book3-modal-orderLogs-orderDiv-logDiv::before {
    grid-area: icon;
    content: attr(log-icon);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'material symbols rounded';
    font-weight: 400;
    font-size: 1rem;
    color: var(--grey600);
}

.admin-book3-modal-orderLogs-orderDiv-logDiv[log-action=""] {}

.admin-book3-modal-orderLogs-orderDiv-logDiv-infoEl[ref="order-ref"] {
    grid-area: order-ref;
}

.admin-book3-modal-orderLogs-orderDiv-logDiv-infoEl[ref="info"] {
    grid-area: info;
}

.admin-book3-modal-orderLogs-orderDiv-logDiv-infoEl[ref="timestamp"] {
    grid-area: timestamp;
    margin-left: auto;
}

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

.admin-console-modal-center[content=date-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-book3-notes-add-modal-thread {
    grid-area: thread;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    /* padding-left: 4rem; */
}

.admin-book3-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-book3-notes-add-modal-thread-msg:hover {
    background-color: var(--lightBlue);
}

.admin-book3-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-book3-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-book3-notes-add-modal-thread-msg[note-cancel-status="true"] .admin-book3-notes-add-modal-thread-msg-body {
    background-color: var(--grey200);
    color: var(--grey600);
}

.admin-book3-notes-add-modal-thread-msg-body:hover {
    /* box-shadow: none; */
}

.admin-book3-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-book3-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-book3-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-book3-notes-add-modal-thread-msg[note-cancel-status=true] .admin-book3-notes-add-modal-thread-msg-deleteBtn {}

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

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

.admin-book3-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-book3-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-book3-notes-add-modal-selector-orderDiv:hover {
    cursor: pointer;
    /*background-color: var(--grey50);*/
    border: 1px solid var(--indigo500);
}

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

.admin-book3-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-book3-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-book3-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-book3-notes-add-modal-tags-tagDiv:hover {
    cursor: pointer;
    /*background-color: var(--grey50);*/
    border: 1px solid var(--indigo500);
}

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

.admin-book3-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-book3-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-book3-notes-add-modal-compose-input:focus {
    color: var(--grey800);
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

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

.admin-console-modal-frame[content="admin-booking-user-assign-clash"] {
    width: 30%;
    left: 35%;
    height: 30%;
    top: 30%;
}

[content="admin-booking-user-assign-clash"] .admin-console-modal-center {
    padding: 0.8rem 1.2rem;
}

[content="admin-booking-user-assign-clash"] .admin-console-modal-center>div {
    display: flex;
    flex-direction: column;
    margin-top: 0.8rem;
    row-gap: 0.4rem;
    width: fit-content;
    padding: 0.4rem 0.6rem;
    color: var(--indigo500);
    background-color: var(--lightBlue);
    border-radius: 4px;
}

[content="admin-booking-user-assign-clash"] .admin-console-modal-center>div>div[ref='target-assign']::before {
    content: 'NEW';
    font-weight: 600;
    margin-right: 0.8rem;
}

/* multi lang select modal */
.admin-console-modal-frame[content="admin-booking-user-assign-lang"] {
    width: 25%;
    left: 37.5%;
    height: 30%;
    top: 30%;
}

.admin-console-modal-center[content="admin-booking-user-assign-lang"] {
    padding: 0.8rem 1.2rem;
}

.admin-console-modal-center[content="admin-booking-user-assign-lang"]>div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    row-gap: 0.4rem;
}

[content="admin-booking-user-assign-lang"] .admin-booking-user-assign-lang-langBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.8rem;
    row-gap: 0.4rem;
    column-gap: 0.6rem;
    width: fit-content;
    padding: 0.4rem 0.6rem;
    color: var(--indigo500);
    background-color: var(--lightBlue);
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

[content="admin-booking-user-assign-lang"] .admin-booking-user-assign-lang-langBtn:hover {
    cursor: pointer;
}

[content="admin-booking-user-assign-lang"] .admin-booking-user-assign-lang-langBtn[select=false]:hover {
    color: var(--green500);
    background-color: var(--lightGreen);
    border: 1px solid var(--green500);
}

[content="admin-booking-user-assign-lang"] .admin-booking-user-assign-lang-langBtn[select=true] {
    color: var(--grey50);
    background-color: var(--green500);
}

[content="admin-booking-user-assign-lang"] .admin-booking-user-assign-lang-langBtn[select=true]:hover {
    color: var(--indigo500);
    background-color: var(--lightBlue);
    border: 1px solid var(--indigo500);
}

[content="admin-booking-user-assign-lang"] .admin-booking-user-assign-lang-langBtn[select=true]::after {
    content: 'check';
    font-family: 'material symbols rounded';
    font-size: 0.9rem;
}

[content="admin-booking-user-assign-lang"] .admin-booking-user-assign-lang-langBtn[select=false]::after {
    content: 'clear';
    font-family: 'material symbols rounded';
    font-size: 0.9rem;
}

.admin-console-modal-frame[content="admin-booking-assign-edit"] {
    top: 15%;
    height: 70%;
    width: 30%;
    left: 35%
}

.admin-console-modal-center[content="admin-booking-assign-edit"] {
    display: grid;
}

.admin-booking-assign-edit-customiser {
    grid-area: customiser;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    row-gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    background-color: var(--grey50);
    overflow-y: auto;
    height: 100%;
    width: 100%;
}

.admin-console-modal-frame[content="admin-booking-user-external-edit"] {
    top: 32.5%;
    height: 35%;
    width: 60%;
    left: 20%
}

.admin-console-modal-center[content="admin-booking-user-external-edit"] {
    display: grid;
    grid-template-areas:
        'customiser selector';
    grid-template-columns: 1fr 1fr;
}

.admin-booking-user-external-edit-customiser {
    grid-area: customiser;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    row-gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    background-color: var(--grey100);
    overflow-y: auto;
    height: 100%;
    border-right: 1px solid var(--grey200);
}

.admin-booking-user-external-edit-selector {
    grid-area: selector;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-booking-user-external-edit-selector-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.65rem;
    color: var(--grey900);
    padding: 0.8rem 1.2rem 0.4rem 1.2rem;
}

.admin-booking-user-external-edit-selector-userList {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 0.4rem;
    column-gap: 0.6rem;
    overflow-y: auto;
    height: 100%;
    background-color: var(--grey100);
    padding: 0.4rem 1.2rem 0.8rem 1.2rem;
}

.admin-booking-user-external-edit-selector-userList-userDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.65rem;
    padding: 0.4rem;
    height: fit-content;
    width: fit-content;
    border-radius: 4px;
    color: var(--indigo500);
    background-color: var(--lightBlue);
    border: 1px solid var(--lightBlue);
    box-shadow: var(--boxShadow);
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-booking-user-external-edit-selector-userList-userDiv:hover {
    cursor: pointer;
    color: var(--indigo500);
    border: 1px solid var(--indigo500);
    box-shadow: none;
}

.admin-booking-user-external-edit-selector-userList-userDiv[select=true] {
    background-color: var(--indigo500);
    color: var(--grey50);
    border: 1px solid var(--indigo500);
    box-shadow: var(--boxShadow);
}

.admin-booking-user-external-edit-selector-userList-userDiv[select=true]:hover {
    box-shadow: none;
}



/* booking payment edit modal */
.admin-console-modal-frame[content=booking-payment-edit] {
    height: 65%;
    width: 20%;
    top: 20%;
    left: 40%;
}

.admin-console-modal-center[content=booking-payment-edit] {
    display: grid;
    grid-template-areas:
        'info'
        "calc-options"
        "comment-uservis";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    font-size: 0.6rem;
}

.booking-payment-edit-info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 0.4rem;
    padding: 0.6rem;
    /* border-bottom: var(--grey200); */
}

.booking-payment-edit-info-el {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.booking-payment-edit-info-el[ref="assign-ref"] {
    font-weight: 500;
}

.booking-payment-edit-currentDiv {
    grid-area: current;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    color: var(--indigo500);
    /* background-color: var(--lightBlue); */
    /* border: 1px solid var(--lightBlue); */
    width: 6rem;
    height: fit-content;
    border-radius: 4px;
    margin-top: 0.6rem;
}

.booking-payment-edit-currentDiv::after {
    content: 'NOK';
}

[content=booking-payment-edit]>[ref="calc-options"] {
    grid-area: calc-options;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0.6rem;
    row-gap: 0.4rem;
    background-color: var(--grey100);
    border-top: 1px solid var(--grey200);
    /* box-shadow: var(--boxShadow); */
}

.booking-payment-edit-calcDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    row-gap: 0.2rem;
}

.booking-payment-edit-calcDiv-title {
    font-weight: 500;
    /* padding-left: 0.4rem; */
}

.booking-payment-edit-calcDiv-input {
    width: 8rem;
}

.booking-payment-edit-newDiv {
    grid-area: new;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    color: var(--indigo500);
    /* background-color: var(--indigo500); */
    background-color: var(--lightBlue);
    /* border: 1px solid var(--indigo500); */
    width: 6rem;
    height: fit-content;
    font-weight: 500;
    border-radius: 4px;
    /* margin-top: auto; */
    margin-top: 0.6rem;
}

.booking-payment-edit-newDiv::after {
    content: 'NOK';
}

[content=booking-payment-edit]>[ref="calc-options"]>[ref="save-btn"] {
    margin-left: auto;
}

.booking-payment-edit-comment-uservis {
    grid-area: comment-uservis;
    display: grid;
    grid-template-areas:
        'title'
        /* 'quick-options' */
        'input'
        'save-btn';
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    padding: 0.6rem;
    row-gap: 0.4rem;
    background-color: var(--grey50);
    border-top: 1px solid var(--grey200);
    /* box-shadow: var(--boxShadow); */
}

.booking-payment-edit-comment-uservis-title {
    grid-area: title;
    font-weight: 500;
}

.booking-payment-edit-comment-uservis-input {
    grid-area: input;
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    font-size: 0.65rem;
    font-family: 'Quicksand';
    /* color: var(--grey600); */
    resize: none;
    border: 1px solid var(--grey200);
    padding: 0.4rem;
    border-radius: 4px;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.booking-payment-edit-comment-uservis-input:focus {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.booking-payment-edit-comment-uservis>[ref='save-btn'] {
    margin-left: auto;
}

/* message user app modal */
.admin-console-modal-frame[content=booking-user-message-app] {
    height: fit-content;
    width: 40%;
    top: 50%;
    left: 30%;
}

.admin-console-modal-center[content=booking-user-message-app] {
    display: grid;
    grid-template-areas:
        /* 'thread' */
        'compose';
    grid-template-columns: 1fr;
    grid-template-rows: 0fr;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    column-gap: 0.8rem;
    row-gap: 0.8rem;
    /* padding: 1rem; */
    /* background-color: var(--grey100); */
}

.admin-book3-modal-userMessageApp-compose {
    grid-area: compose;
    display: grid;
    grid-template-areas:
        'input send';
    grid-template-columns: 1fr 0fr;
    grid-template-rows: 1fr;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.8rem;
    row-gap: 0.8rem;
    height: fit-content;
    width: 100%;
    padding: 0.8rem;
    background-color: var(--grey100);
    /* border-top: 1px solid var(--grey200); */
}

.admin-book3-modal-userMessageApp-input {
    grid-area: input;
    border: none;
    outline: none;
    height: 5rem;
    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-book3-modal-userMessageApp-input:focus {
    color: var(--grey800);
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-book3-modal-userMessageApp-sendBtn {
    grid-area: send;
    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-top: auto;
    /* margin-bottom: auto; */
    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-book3-modal-userMessageApp-sendBtn:hover {
    cursor: pointer;
}


/* user offer calc show modal */
.admin-console-modal-frame[content=booking-payment-calc] {
    height: 40%;
    width: 30%;
    top: 30%;
    left: 35%;
}

.admin-console-modal-center[content=booking-payment-calc] {
    display: grid;
    grid-template-areas:
        'info'
        'calc';
    grid-template-rows: 0fr 1fr;
    /* row-gap: 1rem; */
    overflow: auto;
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 0.75rem;
}

.admin-book3-modal-bookingPaymentCalc-info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    row-gap: 0.4rem;
    padding: 0.6rem;
    border-bottom: 1px solid var(--grey200);
    user-select: text;
}

.admin-book3-modal-bookingPaymentCalc-info-infoDiv {
    display: grid;
    grid-template-areas:
        'title value';
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    flex-direction: row;
    column-gap: 0.4rem;
}

.admin-book3-modal-bookingPaymentCalc-calcs {
    grid-area: calc;
    display: flex;
    flex-direction: column;
    row-gap: 0.2rem;
    padding: 0.4rem;
    user-select: text;
}

.admin-book3-modal-bookingPaymentCalc-calc-calcDiv {
    display: grid;
    grid-template-areas:
        'title calc value';
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr auto;
    grid-template-rows: 0fr 0fr;
    flex-direction: row;
    column-gap: 2rem;
    padding: 0.2rem;
}

.admin-book3-modal-bookingPaymentCalc-calc-calcDiv[ref='user_min'] {
    margin-top: auto;
}

.admin-book3-modal-bookingPaymentCalc-calc-calcDiv[ref='user_pay_sum'] {
    margin-top: 0.8rem;
}

.admin-book3-modal-bookingPaymentCalc-calc-calcDiv-title {
    grid-area: title;
}

.admin-book3-modal-bookingPaymentCalc-calc-calcDiv-calc {
    grid-area: calc;
}

.admin-book3-modal-bookingPaymentCalc-calc-calcDiv-value {
    grid-area: value;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.2rem;
    background-color: var(--lightBlue);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    width: fit-content;
}

[ref='user_pay_sum'] .admin-book3-modal-bookingPaymentCalc-calc-calcDiv-value {
    font-size: 0.8rem;
    color: var(--lightGreen);
    background-color: var(--green500);
}

[ref='user_min'] .admin-book3-modal-bookingPaymentCalc-calc-calcDiv-value::before {
    content: '=';
}

[ref='user_tier_sum'] .admin-book3-modal-bookingPaymentCalc-calc-calcDiv-value::before {
    content: '+';
}

[ref='user_lang_sum'] .admin-book3-modal-bookingPaymentCalc-calc-calcDiv-value::before {
    content: '+';
}

[ref='user_pay_sum'] .admin-book3-modal-bookingPaymentCalc-calc-calcDiv-value::before {
    content: '=';
}

/* user booking message view modal */
.admin-console-modal-frame[content="booking-offers-view"] {
    width: 40%;
    left: 30%;
    height: 40%;
    top: 30%;
    overflow: hidden;
}

.modal-booking-offers-view-bookingList {
    display: flex;
    flex-direction: column;
    padding: 0.6rem;
    row-gap: 0.4rem;
    overflow-y: auto;
    height: 100%;
    width: 100%;
}

.modal-booking-offers-view-bookingList-bookingDiv {
    display: grid;
    grid-template-columns: 6rem 5rem 5rem 1fr auto auto auto 1fr;
    grid-template-rows: 1fr;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.4rem;
    row-gap: 0.2rem;
    font-size: 0.65rem;
    width: 100%;
    color: var(--grey50);
    border-radius: 4px;
    box-shadow: var(--boxShadow);
    padding: 0.6rem 0.6rem;
}

.modal-booking-offers-view-bookingList-bookingDiv-infoEl[ref="book-confirm"] {
    display: flex;
    justify-content: flex-end;
}

.modal-booking-offers-view-bookingList-bookingDiv[confirm-status='waiting'] {
    background-color: var(--orange);
}

.modal-booking-offers-view-bookingList-bookingDiv[confirm-status='pending'] {
    background-color: var(--deepPurple400);
}

.modal-booking-offers-view-bookingList-bookingDiv[confirm-status='confirmed'] {
    background-color: var(--green500);
}

.modal-booking-offers-view-bookingList-bookingDiv[confirm-status='cancelled'] {
    background-color: var(--red200);
}

.modal-booking-offers-view-bookingList-bookingDiv[cancel-status='cancelled-unpaid'] {
    background-color: var(--red200);
}

.modal-booking-offers-view-bookingList-bookingDiv[cancel-status='cancelled-paid'] {
    background-color: var(--red200);
}

.modal-booking-offers-view-bookingList-bookingDiv-infoEl {
    display: flex;
}

/* .modal-booking-offers-view-bookingList-bookingDiv-infoEl[ref="body"] {
    grid-area: body;
    margin-left: auto;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-shadow: var(--boxShadow);
    padding: 0.6rem 0.6rem;
} */

/* .modal-booking-offers-view-bookingList-bookingDiv-infoEl[ref="metadata"] {
    grid-area: metadata;
    margin-left: auto;
} */

/* user booking ship float */
.booking-bookingDiv-float[ref="sent-app"] {
    color: var(--orange);
}

/* date notice modal */
.admin-console-modal-frame[content="date-notice"] {
    height: fit-content;
    top: 35%;
    width: 30%;
    left: 35%;
    overflow: hidden;
}

.admin-book3-notice-modal-list {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    row-gap: 0.4rem;
    overflow: auto;
}

.admin-book3-notice-modal-list-noticeDiv {
    display: flex;
    column-gap: 0.4rem;
    row-gap: 0.4rem;
}

.admin-book3-notice-modal-list-noticeDiv-el {}

/* assign add remove modal */
.admin-console-modal-frame[content="order-assign-remove"] {
    width: 30%;
    height: fit-content;
    left: 35%;
    top: 40%;
}

.admin-console-modal-frame[content="order-assign-remove"]>.admin-console-modal-center {
    padding: 0.8rem;
    font-size: 0.7rem;
}

/* import frame */
.admin-console-modal-frame[content="import-table"] {
    display: grid;
    grid-template-areas:
        "header header"
        "input output";
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: 0fr 1fr;
    width: 90%;
    height: 80%;
    top: 10%;
    left: 5%;
    font-size: 0.75rem;
    background-color: var(--grey50);
    border-radius: 6px;
    box-shadow: var(--boxShadow);
    position: absolute;
    z-index: 75;
    overflow: hidden;
}

.admin-book3-modal-table-import-inputArea {
    grid-area: input;
    display: flex;
    height: 100%;
    width: 100%;
    background-color: var(--lightBlue);
    border: 1px solid var(--indigo500);
    padding: 0.6rem;
    border-radius: 6px;
    transition: border 0.2s linear, background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-table-import-inputArea:focus {
    background-color: var(--grey50);
    border: 1px solid var(--indigo500);

}

.admin-book3-modal-table-import-outputArea {
    grid-area: output;
    overflow: auto;
}

.admin-book3-modal-table-import-outputArea-table {
    display: table;
    width: 100%;
    height: 100%;
    row-gap: 0.4rem;
}

.admin-book3-modal-table-import-outputArea-table-row {
    display: flex;
    width: 100%;
    column-gap: 0.4rem;
    padding: 0.6rem;
    transition: border 0.2s linear, background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-table-import-outputArea-table-row:nth-child(even) {
    background-color: var(--grey100);
}

.admin-book3-modal-table-import-outputArea-table-row:hover {
    background-color: var(--lightBlue);
}

.admin-book3-modal-table-import-outputArea-table-row-data {}

/* irreg add .modal-booking-offers-view-bookingList */
.admin-console-modal-frame[content="booking-irreg-add"] {
    height: fit-content;
    width: 30%;
    left: 35%;
    top: 35%;
}

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

.admin-book3-irreg-add-modal-field {
    display: flex;
    flex-direction: column;
    row-gap: 0.2rem;
}

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

.admin-book3-irreg-add-modal-field-description {
    color: var(--grey600);
    font-size: 0.65rem;
    font-weight: 400;
}

.admin-book3-irreg-add-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-book3-irreg-add-modal-field-input:focus {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-console-modal-frame[content="booking-modal-error"] {
    width: 30%;
    left: 40%;
    height: fit-content;
    top: 45%;
}

.admin-console-modal-frame[content="booking-modal-error"] .admin-console-modal-footer {
    display: none;
}

.admin-console-modal-frame[content="booking-modal-error"] .admin-console-modal-center {
    display: grid;
    grid-template-areas:
        "text";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.admin-book3-modal-error-text {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.8rem;
}

/* date availability? */
.admin-console-modal-frame[content="booking-modal-availability"] {
    width: 40%;
    left: 30%;
    height: 95%;
    top: 2.5%;
}

.admin-console-modal-frame[content="booking-modal-availability"] .admin-console-modal-center {
    display: grid;
    grid-template-areas:
        'header'
        'userList';
    grid-template-columns: 1fr;
    grid-template-rows: 0fr 1fr;
    overflow: hidden;
}

.admin-book3-modal-availability-header {
    grid-area: header;
    display: grid;
    grid-template-areas: 'search filters';
    grid-template-columns: 1fr 0fr;
    column-gap: 0.4rem;
    justify-content: flex-start;
    align-items: center;
    padding: 0.2rem 0.8rem;
    border-bottom: 1px solid var(--grey200);
}

.admin-book3-modal-availability-header-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-book3-modal-availability-header-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-book3-modal-availability-header-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);
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-availability-header-search-input:focus {
    /* background-color: var(--lightBlue); */
}

.admin-book3-modal-availability-header-filters {
    grid-area: filters;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    padding: 0rem;
}

.admin-book3-modal-availability-header-filters-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.4rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 400;
    white-space: nowrap;
    color: var(--indigo500);
    background-color: var(--lightBlue);
    border: 1px solid var(--lightBlue);
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-availability-header-filters-btn:hover {
    cursor: pointer;
    border: 1px solid var(--indigo500);
}

.admin-book3-modal-availability-header-filters-btn[value=true] {
    color: var(--lightBlue);
    background-color: var(--indigo500);
    border: 1px solid var(--indigo500);
}

.admin-book3-modal-availability-userList {
    grid-area: userList;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: auto;
}

.admin-book3-modal-availability-userList-userDiv {
    display: grid;
    grid-template-areas:
        'ref range prebook saveBtn';
    grid-template-columns: 16rem 1fr 0fr 0fr;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 400;
    padding: 0.2rem 0.8rem;
    column-gap: 0.2rem;
    width: 100%;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-availability-userList-userDiv:hover {
    background-color: var(--lightBlue);
}

.admin-book3-modal-availability-userList-userDiv:not(:last-child) {
    border-bottom: 1px solid var(--grey200);
}

.admin-book3-modal-availability-userList-userDiv[show="false"] {
    display: none;
}

.admin-book3-modal-availability-userList-userDiv-infoEl[ref="user-ref"] {
    grid-area: ref;
    font-weight: 500;
}

.admin-book3-modal-availability-userList-userDiv-rangeDiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 1rem;
    font-size: 0.65rem;
}

.admin-book3-modal-availability-userList-userDiv-rangeDiv-input {
    display: flex;
    text-align: center;
    font-family: 'Quicksand';
    padding: 0.4rem;
    font-size: 0.65rem;
    font-weight: 500;
    border: 1px solid var(--grey200);
    border-radius: 4px;
    background-color: var(--grey50);
    width: 6rem;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-availability-userList-userDiv-rangeDiv-input:hover {
    border: 1px solid var(--indigo500);
}

.admin-book3-modal-availability-userList-userDiv-rangeDiv-input:focus {
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-book3-modal-availability-userList-userDiv-saveBtn {
    grid-area: saveBtn;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.65rem;
    padding: 0.4rem 0.6rem;
    color: var(--grey50);
    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-book3-modal-availability-userList-userDiv-saveBtn:hover {
    cursor: pointer;
    background-color: var(--green500);
    box-shadow: none;
}

/* per guide timeline */
.admin-console-modal-frame[content="booking-modal-view-perGuide"] {
    width: 95%;
    left: 2.5%;
    height: 95%;
    top: 2.5%;
}

.admin-console-modal-frame[content="booking-modal-view-perGuide"] .admin-console-modal-center {
    display: grid;
    grid-template-areas:
        "travel bookings";
    grid-template-columns: 0fr 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
}

.admin-console-modal-frame[content="booking-modal-view-perGuide"] .admin-console-modal-footer {}

.admin-booking3-modal-view-perGuide-travelList {
    grid-area: travel;
    display: flex;
    overflow: auto;
    /* border-right: 1px solid var(--grey200); */
}

.admin-book3-modal-view-perGuide-bookingList {
    grid-area: bookings;
    display: flex;
    flex-direction: column;
    overflow: auto;
    /* row-gap: 0.2rem; */
    overflow: auto;
}

.admin-book3-modal-view-perGuide-bookingList-timelineRow {
    display: grid;
    grid-template-areas: "user bookings";
    justify-content: flex-start;
    align-items: flex-end;
    grid-template-columns: 10rem 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    padding: 0.2rem 0.6rem;
    font-size: 0.65rem;
    font-weight: 500;
    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;
}

.admin-book3-modal-view-perGuide-bookingList-timelineRow:hover {
    background-color: var(--lightBlue);
}

.admin-book3-modal-view-perGuide-bookingList-timelineRow-user {
    grid-area: user;
    display: grid;
    justify-content: flex-start;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 100%;
    width: 100%;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-view-perGuide-bookingList-timelineRow-user-userDiv {
    display: grid;
    justify-content: flex-start;
    align-items: center;
    color: var(--indigo500);
    /* background-color: var(--indigo500); */
    /* padding: 0.4rem 0.8rem; */
    /* border: 1px transparent; */
    /* border-radius: 6px; */
    /* width: fit-content; */
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-view-perGuide-bookingList-timelineRow-bookings {
    grid-area: bookings;
    display: grid;
    justify-content: flex-start;
    align-items: flex-end;
    grid-template-rows: 1fr;
    /* background-color: var(--lightBlue); */
}

.admin-book3-modal-view-perGuide-bookingList-timelineRow-bookings-bookingDiv {
    display: grid;
    justify-content: flex-start;
    align-items: flex-start;
    grid-template-areas:
        "ref ref"
        "location port"
        "time time";
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
    column-gap: 0.2rem;
    row-gap: 0.1rem;
    width: auto;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border: 1px solid transparent;
    box-shadow: var(--boxShadow);
    overflow: hidden;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;

}

.admin-book3-modal-view-perGuide-bookingList-timelineRow-bookings-bookingDiv:hover {
    cursor: pointer;
    color: var(--indigo500);
    background-color: var(--lightBlue);
    border: 1px solid var(--indigo500);
    box-shadow: none;
}

.admin-book3-modal-view-perGuide-bookingList-timelineRow-bookings-bookingDiv-infoEl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
}

.admin-book3-modal-view-perGuide-bookingList-timelineRow-bookings-bookingDiv-infoEl[ref="assign-ref"] {
    grid-area: ref;
}

.admin-book3-modal-view-perGuide-bookingList-timelineRow-bookings-bookingDiv-infoEl[ref="assign-start-end"] {
    grid-area: time;
}

.admin-book3-modal-view-perGuide-bookingList-timelineRow-bookings-bookingDiv-infoEl[ref="order-port"] {
    grid-area: port;
}

.admin-book3-modal-view-perGuide-bookingList-timelineRow-bookings-bookingDiv-infoEl[ref="assign-depart-return"] {
    grid-area: location;
}

/* order checklist modal */
.admin-book3-frame-right-order-checklist {
    display: grid;
    grid-template-areas:
        'header'
        'content';
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
    height: 100%;
    width: 30rem;
    color: var(--grey50);
    background-color: var(--lightBlue);
    overflow: auto;
}

.admin-book3-frame-right-order-checklist-header {
    grid-area: header;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.8rem 0.8rem;
    background-color: var(--grey50);
    border-bottom: 1px solid var(--grey200);
}

.admin-book3-frame-right-order-checklist-header-closeBtn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: 500;
    font-size: 0.65rem;
    padding: 0.4rem 0.6rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    color: var(--grey50);
    background-color: var(--indigo500);
    border: 1px solid var(--indigo500);
    box-shadow: var(--boxShadow);
    width: fit-content;
    cursor: pointer;
    margin-left: auto;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-frame-right-order-checklist-header-closeBtn :hover {
    color: var(--indigo500);
    background-color: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}


.admin-book3-frame-right-order-checklist-content {
    grid-area: content;
}

.admin-book3-frame-right-order-checklist-section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        'header'
        'content'
        'confirm';
    border-radius: 6px;
    box-shadow: var(--boxShadow);
    background-color: var(--grey50);
    overflow: hidden;
    margin: 0.6rem;
}

.admin-book3-frame-right-order-checklist-section-header {
    grid-area: header;
    display: grid;
    grid-template-areas:
        'check title timestamp';
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 0fr;
    column-gap: 0.4rem;
    row-gap: 0.4rem;
    width: 100%;
    padding: 0.6rem 0.6rem;
    color: var(--grey900);
    background-color: var(--grey100);
    border-bottom: 1px solid var(--grey200);
    font-size: 0.7rem;
    font-weight: 500;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-frame-right-order-checklist-section-header:hover {
    /* background-color: var(--lightBlue); */
}

.admin-book3-frame-right-order-checklist-section[confirm=true] .admin-book3-frame-right-order-checklist-section-header {
    /* background-color: var(--lightGreen); */
    color: var(--green500);
}

/* .admin-book3-frame-right-order-checklist-section[confirm=true] .admin-book3-frame-right-order-checklist-section-header:hover {
    background-color: var(--lightBlue);
    color: var(--indigo500);
} */

.admin-book3-frame-right-order-checklist-section-title {
    grid-area: title;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.admin-book3-frame-right-order-checklist-section-check {
    font-family: 'material symbols rounded';
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--indigo500);
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
    cursor: pointer;
}

.admin-book3-frame-right-order-checklist-section-check:hover {
    color: var(--green500);
}

.admin-book3-frame-right-order-checklist-section-check[confirm=true] {
    color: var(--green500);
    /* background-color: var(--green500); */
}

.admin-book3-frame-right-order-checklist-section-check[confirm=true]:hover {
    color: var(--indigo500);
    /* background-color: var(--green500); */
}

.admin-book3-frame-right-order-checklist-section-timestamp {
    grid-area: timestamp;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.admin-book3-frame-right-order-checklist-section-content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    font-size: 0.65rem;
    width: 100%;
    padding: 0.6rem 0.6rem;
    color: var(--grey600);
    row-gap: 0.4rem;
}

.admin-book3-frame-right-order-checklist-section-shortcutBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 0.65rem;
    padding: 0.4rem 0.6rem;
    color: var(--grey50);
    border-radius: 4px;
    color: var(--grey50);
    background-color: var(--indigo500);
    border: 1px solid var(--indigo500);
    box-shadow: var(--boxShadow);
    width: fit-content;
    cursor: pointer;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-frame-right-order-checklist-section-shortcutBtn:hover {
    color: var(--indigo500);
    background-color: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.admin-book3-frame-right-order-checklist-section-confirm {
    grid-area: confirm;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
        'data btn';
    column-gap: 0.4rem;
    padding: 0rem 0.8rem 0.4rem 0.8rem;
}

.admin-book3-frame-right-order-checklist-section-confirmBtn {
    grid-area: btn;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: 500;
    font-size: 0.65rem;
    padding: 0.4rem 0.6rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    color: var(--grey50);
    background-color: var(--indigo500);
    border: 1px solid var(--indigo500);
    box-shadow: var(--boxShadow);
    width: fit-content;
    cursor: pointer;
    margin-left: auto;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-frame-right-order-checklist-section-confirmBtn[confirm=true] {
    background-color: var(--green500);
    border: 1px solid var(--green500);
}

.admin-book3-frame-right-order-checklist-section-confirmData {
    grid-area: data;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.65rem;
    color: var(--grey600);
}

.admin-book3-frame-right-order-checklist-section-confirmBtn:hover {
    color: var(--indigo500);
    background-color: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.admin-book3-frame-right-order-checklist-section-noteDiv {
    display: grid;
    justify-content: flex-start;
    align-items: flex-start;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
    grid-template-areas:
        'body info';
    column-gap: 2rem;
    padding: 0.6rem;
    border-radius: 4px;
    font-size: 0.65rem;
    width: 100%;
    color: var(--grey900);
    background-color: var(--lightBlue);
}

.admin-book3-frame-right-order-checklist-section-noteDiv-body {
    grid-area: body;
}

.admin-book3-frame-right-order-checklist-section-noteDiv-info {
    grid-area: info;
}

.admin-book3-frame-right-order-checklist-section-bookingDiv {
    display: grid;
    justify-content: flex-start;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
        'info';
    column-gap: 0.2rem;
    border-radius: 4px;
    font-size: 0.65rem;
    width: 100%;
    color: var(--indigo500);
}

.admin-book3-frame-right-order-checklist-section-routeplanDiv {
    display: grid;
    justify-content: flex-start;
    align-items: flex-start;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
    grid-template-areas:
        'info';
    column-gap: 2rem;
    border-radius: 4px;
    font-size: 0.65rem;
    width: 100%;
    color: var(--indigo500);
}

.admin-book3-frame-right-order-checklist-section-routeplanDiv-info {
    grid-area: info;
}

/* routeplans pdf upload modal */

.admin-console-modal-frame[content="admin-book3-modal-routeplan-pdf-upload"] {
    height: 90%;
    /* height: fit-content; */
    top: 5%;
    width: 40%;
    left: 30%;
    overflow: hidden;
}

.admin-console-modal-center[content="admin-book3-modal-routeplan-pdf-upload"] {
    display: grid;
    grid-template-areas:
        "contact"
        "dispatch"
        "info"
        "routeplan";
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 1fr;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.admin-book3-modal-routeplan-pdf-upload-contactSec {
    grid-area: contact;
    display: grid;
    display: none;
    grid-template-areas:
        "subtitle"
        "history"
        "input";
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 1fr;
    row-gap: 0.8rem;
    padding: 0.8rem 1.2rem;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.admin-book3-modal-routeplan-pdf-upload-dispatchSec {
    grid-area: dispatch;
    display: grid;
    display: none;
    grid-template-areas:
        "subtitle"
        "history"
        "input";
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 1fr;
    row-gap: 0.8rem;
    padding: 0.8rem 1.2rem;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-top: 1px solid var(--grey200);
}


.admin-book3-modal-routeplan-pdf-upload-infoSec {
    grid-area: info;
    display: grid;
    grid-template-areas:
        "subtitle subtitle"
        "input input"
        "timestamp saveBtn";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr auto;
    row-gap: 0.8rem;
    padding: 0.8rem 1.2rem;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--grey100);
    /* border-top: 1px solid var(--grey200); */
}

.admin-book3-modal-routeplan-pdf-upload-infoSec-subtitle {
    grid-area: subtitle;
    font-size: 0.65rem;
}

.admin-book3-modal-routeplan-pdf-upload-infoSec-input {
    grid-area: input;
    border: none;
    outline: none;
    min-height: 4rem;
    width: 100%;
    padding: 0.6rem;
    font-size: 0.7rem;
    font-family: 'Quicksand';
    resize: none;
    color: var(--grey800);
    border: 1px solid var(--grey200);
    background-color: var(--grey50);
    border-radius: 4px;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear;
}

.admin-book3-modal-routeplan-pdf-upload-infoSec-input:hover {
    color: var(--grey800);
    border: 1px solid var(--indigo500);
}

.admin-book3-modal-routeplan-pdf-upload-infoSec-input:focus {
    color: var(--grey800);
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-book3-modal-routeplan-pdf-upload-infoSec-saveBtn {
    grid-area: saveBtn;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-weight: 500;
    font-size: 0.65rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    cursor: pointer;
    transition: opacity 0.2s linear, border 0.2s linear, background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-routeplan-pdf-upload-infoSec-saveBtn:hover {
    cursor: pointer;
    background-color: transparent;
    color: var(--indigo500);
    box-shadow: none;
    /* border: 1px solid transparent; */
}

.admin-book3-modal-routeplan-pdf-upload-infoSec-timestamp {
    grid-area: timestamp;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--grey600);
    font-weight: 400;
    font-size: 0.65rem;
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec {
    grid-area: routeplan;
    display: grid;
    grid-template-areas:
        "subtitle"
        "history"
        "input";
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 1fr;
    row-gap: 0.8rem;
    padding: 0.8rem 1.2rem;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-top: 1px solid var(--grey200);
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-subtitle {
    grid-area: subtitle;
    font-size: 0.65rem;
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-history {
    grid-area: history;
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-history-label {
    grid-area: input;
    font-size: 0.65rem;
    color: var(--grey600);
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-history-uploadDiv {
    display: grid;
    grid-template-areas:
        ". . delete download";
    grid-template-columns: auto 1fr auto auto;
    column-gap: 0.8rem;
    padding: 0.8rem;
    width: 100%;
    height: fit-content;
    font-size: 0.65rem;
    background-color: var(--lightBlue);
    /* border: 1px solid var(--lightBlue); */
    border-radius: 4px;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-history-uploadDiv:hover {
    /* cursor: pointer; */
    /* border: 1px solid var(--indigo500); */
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-history-uploadDiv-el {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 400;
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-history-uploadDiv-deleteBtn {
    grid-area: delete;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.65rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    color: var(--red500);
    transition: opacity 0.2s linear, border 0.2s linear, background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-history-uploadDiv-deleteBtn:hover {
    cursor: pointer;
    color: var(--red300);
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-history-uploadDiv-downloadBtn {
    grid-area: download;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.65rem;
    padding: 0.5rem 1rem;
    color: var(--grey50);
    background-color: var(--indigo500);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: var(--boxShadow);
    cursor: pointer;
    transition: opacity 0.2s linear, border 0.2s linear, background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-history-uploadDiv-downloadBtn:hover {
    color: var(--indigo500);
    background-color: transparent;
    box-shadow: none;
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-input {
    grid-area: input;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.8rem;
    width: 100%;
    height: fit-content;
    font-size: 0.75rem;
    background-color: var(--grey50);
    /* border: 1px solid var(--indigo500); */
    border: 1px dashed var(--grey200);
    border-radius: 4px;
    transition: opacity 0.2s linear, border 0.2s linear, background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-input:hover {
    border: 1px dashed var(--indigo500);
    background-color: var(--lightBlue);
    cursor: pointer;
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-input:focus {
    border: 1px dashed var(--indigo500);
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-input::before {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    content: 'Select file or drag here';
    font-size: 0.65rem;
    font-weight: 500;
    padding-bottom: 0.4rem;
}

.admin-book3-modal-routeplan-pdf-upload-routeplanSec-text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    width: 100%;
    font-size: 0.75rem;
    /* padding: 0.8rem; */
    /* background-color: var(--grey50); */
    transition: background-color 0.2s linear, border 0.2s linear;
}

/* routeplan upload modal */
.admin-console-modal-frame[content="book3-routeplan-upload"] {
    width: 60%;
    left: 20%;
    height: 90%;
    top: 5%;
    overflow: hidden;
}

.admin-console-modal-center[content="book3-routeplan-upload"] {
    display: grid;
    grid-template-areas:
        "input"
        "text"
        "preview"
        "details";
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 1fr;
    row-gap: 0.8rem;
    padding: 0.8rem 1.2rem;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.admin-book3-routeplan-upload-input {
    grid-area: input;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.8rem;
    width: 100%;
    height: fit-content;
    font-size: 0.75rem;
    background-color: var(--lightBlue);
    border: 1px solid var(--lightBlue);
    border-radius: 4px;
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-book3-routeplan-upload-input:hover {
    border: 1px solid var(--indigo500);
    cursor: pointer;
}

.admin-book3-routeplan-upload-input:focus {
    border: 1px solid var(--indigo500);
}

.admin-book3-routeplan-upload-input::before {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    content: 'Select file or drag here';
    font-size: 0.75rem;
    font-weight: 500;
    padding-bottom: 1.0rem;
}

.admin-book3-routeplan-upload-text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    width: 100%;
    font-size: 0.75rem;
    /* padding: 0.8rem; */
    /* background-color: var(--grey50); */
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-book3-routeplan-upload-preview {
    grid-area: preview;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 0.75rem;
    /* padding: 0.8rem; */
    /* background-color: var(--grey50); */
    border: 1px solid var(--indigo500);
    border-radius: 4px;
    transition: background-color 0.2s linear, border 0.2s linear;
    overflow: auto;
    user-select: text;
}

.admin-book3-routeplan-upload-preview-groupDiv {
    display: grid;
    grid-template-areas:
        'header'
        'itinerary';
    justify-content: flex-start;
    align-items: flex-start;
    grid-template-columns: 1fr;
    row-gap: 0.4rem;
    padding: 0.8rem;
    font-size: 0.65rem;
    border-bottom: 1px solid var(--grey200);
    width: 100%;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear;
}

.admin-book3-routeplan-upload-preview-groupDiv:hover {
    background-color: var(--lightBlue);
}

.admin-book3-routeplan-upload-preview-groupDiv-header {
    grid-area: header;
    display: grid;
    grid-template-areas:
        'num ref lang meet';
    grid-template-columns: 5rem auto auto auto;
    grid-template-rows: 1fr;
    /* 'from to meet'; */
    justify-content: flex-start;
    align-items: center;
}

.admin-book3-routeplan-upload-preview-groupDiv-header-data {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0.4rem;
    font-size: 0.7rem;
}

.admin-book3-routeplan-upload-preview-groupDiv-header-data[ref='port-from'] {
    grid-area: from;
}

.admin-book3-routeplan-upload-preview-groupDiv-header-data[ref='port-to'] {
    grid-area: to;
}

.admin-book3-routeplan-upload-preview-groupDiv-header-data[ref='group-lang'] {
    grid-area: lang;
}

.admin-book3-routeplan-upload-preview-groupDiv-header-data[ref='start-time'] {
    grid-area: start;
}

.admin-book3-routeplan-upload-preview-groupDiv-header-data[ref='meet-time'] {
    grid-area: meet;
}

.admin-book3-routeplan-upload-preview-groupDiv-header-data[ref='group-num'] {
    grid-area: num;
    width: fit-content;
    font-weight: 500;
    background-color: var(--grey200);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

.admin-book3-routeplan-upload-preview-groupDiv-header-data[ref='group-ref'] {
    grid-area: ref;
    font-weight: 500;
    font-size: 0.7rem;
}

.admin-book3-routeplan-upload-preview-groupDiv-itinerary {
    grid-area: itinerary;
    display: flex;
    flex-direction: column;
    background-color: var(--grey100);
    border: 1px solid var(--grey200);
    border-radius: 4px;
}

.admin-book3-routeplan-upload-preview-groupDiv-itinerary-row {
    display: grid;
    grid-template-areas:
        'time description note requirement';
    grid-template-columns: 6rem 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    column-gap: 0.4rem;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid var(--grey200);
    padding: 0.8rem;
    transition: color 0.2s linear, background-color 0.2s linear, border 0.2s linear;
}

.admin-book3-routeplan-upload-preview-groupDiv-itinerary-row:hover {
    background-color: var(--grey50);
}

.admin-book3-routeplan-upload-preview-groupDiv-itinerary:last-child {
    border-bottom: none;
}

.admin-book3-routeplan-upload-preview-groupDiv-itinerary-row[row-show="false"] {
    display: none;
}

.admin-book3-routeplan-upload-preview-groupDiv-itinerary-row-el {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.admin-book3-routeplan-upload-preview-groupDiv-itinerary-row-el[ref="time"] {
    grid-area: time;
    width: fit-content;
    /* font-weight: 600; */
    background-color: var(--grey200);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

.admin-book3-routeplan-upload-preview-groupDiv-itinerary-row-el[ref="description"] {
    grid-area: description;
}

.admin-book3-routeplan-upload-preview-groupDiv-itinerary-row-el[ref="requirement"] {
    grid-area: requirement;
}

.admin-book3-routeplan-upload-preview-groupDiv-itinerary-row-el[ref="note"] {
    grid-area: note;
}

.admin-book3-routeplan-upload-details {
    grid-area: details;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    font-size: 0.65rem;
    color: var(--grey600);
    /* padding: 0.8rem; */
    /* background-color: var(--grey50); */
    transition: background-color 0.2s linear, border 0.2s linear;
}

/* order add note modal */
.admin-console-modal-frame[content="book3-order-notes-add"] {
    height: 80%;
    width: 40%;
    top: 10%;
    left: 30%;
    overflow: hidden;
}

.admin-console-modal-center[content="book3-order-notes-add"] {
    display: grid;
    grid-template-areas:
        "thread"
        "tags"
        "compose";
    grid-template-rows: 1fr auto auto;
    grid-template-columns: 1fr;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.admin-book3-modal-order-notes-add-thread {
    grid-area: thread;
    overflow: auto;
}

.admin-book3-modal-order-notes-add-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-book3-modal-order-notes-add-tags::before {
    content: 'Select note type (can be multiple/none)';
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 400;
}

.admin-book3-modal-order-notes-add-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-book3-modal-order-notes-add-tags-tagDiv:hover {
    cursor: pointer;
    /*background-color: var(--grey50);*/
    border: 1px solid var(--indigo500);
}

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

.admin-book3-modal-order-notes-add-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-book3-modal-order-notes-add-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-book3-modal-order-notes-add-input:focus {
    color: var(--grey800);
    border: 1px solid var(--indigo500);
    background-color: var(--lightBlue);
}

.admin-book3-modal-order-notes-add-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;
}

/* booking language select modal */
.admin-console-modal-frame[content="book3-modal-language-select"] {
    height: fit-content;
    width: 30%;
    top: 35%;
    left: 35%;
    overflow: hidden;
}

.admin-console-modal-center[content="book3-modal-language-select"] {
    display: grid;
    grid-template-areas:
        "info"
        "assignLabel"
        "assignLangs"
        "userLabel"
        "selector";
    grid-template-rows: 1fr auto auto auto;
    grid-template-columns: 1fr;
    row-gap: 0.4rem;
    height: 100%;
    width: 100%;
    padding: 0.8rem;
    overflow: hidden;
}

.admin-book3-modal-language-select-description {
    grid-area: info;
    display: flex;
    font-size: 0.65rem;
    font-weight: 400;
    margin-bottom: 0.4rem;
}

.admin-book3-modal-language-select-assignLangs-label {
    grid-area: assignLabel;
    font-size: 0.65rem;
    font-weight: 500;
}

.admin-book3-modal-language-select-assignLangs {
    grid-area: assignLangs;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.8rem;
    padding: 0.6rem;
    background-color: var(--lightBlue);
    border-radius: 4px;
    margin-bottom: 0.4rem;
}

.admin-book3-modal-language-select-assignLangs-div {
    /* cursor: pointer; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 0.2rem;
    /* padding: 0.4rem 0.6rem; */
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--indigo500);
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-language-select-assignLangs-div[match="true"]::after {
    content: 'check';
    font-size: 1rem;
    font-weight: 400;
    font-family: 'material symbols rounded';
    color: var(--green500);
    right: 0;
}

.admin-book3-modal-language-select-assignLangs-div[match="false"]::after {
    content: 'clear';
    font-size: 1rem;
    font-weight: 400;
    font-family: 'material symbols rounded';
    color: var(--red500);
    right: 0;
}

.admin-book3-modal-language-select-userLangs-label {
    grid-area: userLabel;
    font-size: 0.65rem;
    font-weight: 500;
}

.admin-book3-modal-language-select-selector {
    grid-area: selector;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.8rem;
    padding: 0.6rem;
    background-color: var(--lightBlue);
    border-radius: 4px;
}

.admin-book3-modal-language-select-selector-div {
    cursor: pointer;
    display: flex;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.4rem 0.6rem;
    color: var(--indigo500);
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-language-select-selector-div:hover {
    color: var(--indigo500);
    /* background-color: var(--indigo500); */
    border: 1px solid var(--indigo500);
}

.admin-book3-modal-language-select-selector-div[select="true"] {
    color: var(--grey50);
    background-color: var(--indigo500);
    border: 1px solid var(--indigo500);
}

.admin-book3-modal-language-select-selector-div[select="true"]:hover {
    color: var(--indigo500);
    background-color: transparent;
    border: 1px solid var(--indigo500);
}

.admin-book3-modal-language-select-confirmBtn {}

.admin-book3-modal-language-select-confirmTranslatedBtn {}

/* checklist modal */

.admin-console-modal-frame[content='booking-modal-order-checklist'] {
    width: 50%;
    left: 25%;
}

.admin-console-modal-frame[content='booking-modal-order-checklist'] .admin-console-modal-footer {
    display: none;
}

.admin-console-modal-center[content='booking-modal-order-checklist'] {
    display: grid;
    grid-template-areas:
        'checklists templates';
    grid-template-columns: 1fr 0.6fr;
    font-weight: 400;
    font-size: 0.65rem;
    overflow: hidden;
}

.admin-book3-modal-checklist-checklistSec {
    grid-area: checklists;
    display: grid;
    grid-template-areas:
        'header'
        'list'
        'footer';
    overflow: hidden;
    grid-template-rows: auto 1fr auto;
    border-right: 1px solid var(--grey200);
    background-color: var(--grey100);
}

.admin-book3-modal-checklist-checklistSec-header {
    grid-area: header;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.6rem;
    border-bottom: 1px solid var(--grey200);
    background-color: var(--grey50);
    padding: 0.6rem;
}

.admin-book3-modal-checklist-checklistSec-header-progressBar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 6px;
    border-radius: 24px;
    background-color: var(--grey100);
    overflow: hidden;
    position: relative;
    box-shadow: var(--boxShadow);
}

.admin-book3-modal-checklist-checklistSec-header-progressBar-fill {
    content: '';
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 0%;
    background-color: var(--indigo500);
    /* box-shadow: var(--boxShadow); */
    margin-bottom: 0;
    transition: background-color 0.2s linear;
    animation: barFillHoriz 2s forwards;
}

.admin-book3-modal-checklist-checklistSec-header-percentDiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--grey900);
}

/* .admin-book3-modal-checklist-checklistSec-header-percentDiv::after {
    content: 'completed';
    margin-left: 0.2rem;
} */

.admin-book3-modal-checklist-checklistSec-list {
    grid-area: list;
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 100%;
}

.admin-book3-modal-checklist-checklistSec-footer {
    grid-area: footer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid var(--grey200);
    /* background-color: var(--grey50); */
    background-color: var(--grey100);
    padding: 0.6rem;
    width: 100%;
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv {
    display: grid;
    grid-template-areas:
        'title title'
        'fields actions';
    grid-template-columns: 1fr auto;
    row-gap: 0.4rem;
    /* padding: 0.4rem 0.6rem; */
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
    width: 100%;
    /* border-top: 1px solid var(--grey200); */
    /* border-bottom: 1px solid var(--grey200); */
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv::before {
    grid-area: title;
    content: 'Add new task';
    display: flex;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
    font-weight: 500;
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv-fields {
    grid-area: fields;
    display: flex;
    flex-direction: row;
    column-gap: 0.8rem;
    row-gap: 0.2rem;
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv-field {
    display: grid;
    grid-template-areas:
        'title'
        'description'
        'input';
    grid-template-rows: auto 1fr auto;
    column-gap: 0.4rem;
    row-gap: 0.2rem;
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv-field-title {
    grid-area: title;
    color: var(--grey900);
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv-field-description {
    grid-area: description;
    font-style: italic;
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv-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: 12rem;
    /* text-align: center; */
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv-field-input:hover {
    border: 1px solid var(--indigo500);
    /* background-color: var(--grey50); */
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv-field-input:focus {
    /* color: var(--indigo500); */
    /* background-color: var(--lightBlue); */
    border: 1px solid var(--indigo500);
    background-color: var(--grey50);
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv-actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    margin-left: auto;
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv-addBtn {
    /* grid-area: addBtn; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--grey50);
    background-color: var(--indigo500);
    box-shadow: var(--boxShadow);
    border: 1px solid var(--indigo500);
    padding: 0.4rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 500;
    white-space: nowrap;
    height: fit-content;
    margin-top: auto;
    margin-left: auto;
    width: 6rem;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv-addBtn[ref="before"] {
    grid-area: addBefore;
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv-addBtn[ref="after"] {
    grid-area: addAfter;
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv-addBtn:hover {
    cursor: pointer;
    color: var(--indigo500);
    background-color: transparent;
    border: 1px solid var(--indigo500);
    box-shadow: none;
}

.admin-book3-modal-checklist-checklistSec-footer-newTaskDiv-addBtn[active=false] {
    pointer-events: none;
    color: var(--grey500);
    background-color: var(--grey200);
    border: 1px solid var(--grey200);
    box-shadow: none;
}

.admin-book3-modal-checklist-checklistSec-footer-saveBtn {
    grid-area: saveBtn;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--grey50);
    background-color: var(--indigo500);
    box-shadow: var(--boxShadow);
    border: 1px solid var(--indigo500);
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 500;
    width: fit-content;
    margin-left: auto;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-footer-saveBtn:hover {
    cursor: pointer;
    color: var(--indigo500);
    background-color: var(--lightBlue);
    border: 1px solid var(--indigo500);
    box-shadow: none;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv {
    display: flex;
    flex-direction: column;
    background-color: var(--grey100);
    /* transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear; */
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv {
    display: grid;
    grid-template-areas:
        'top'
        'center'
        'bottom';
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-surface {
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear, opacity 0.2s linear, min-height 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-surface[ref="top"] {
    grid-area: top;
    /* min-height: 0.5rem; */
    /* background-color: tomato; */
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-surface[ref="bottom"] {
    grid-area: bottom;
    /* min-height: 0.5rem; */
    /* background-color: green; */
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-surface[dragover=true] {
    min-height: 4rem;
    background-color: yellow;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-center {
    grid-area: center;
    display: grid;
    grid-template-areas:
        'checkbox title actions'
        '. desc desc'
        '. input input'
        '. timestamp timestamp';
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto auto;
    column-gap: 0.4rem;
    /* row-gap: 0.4rem; */
    padding: 0.4rem 0.6rem;
    background-color: var(--grey50);
    /* margin: 0.5rem; */
    /* border-radius: 6px; */
    /* box-shadow: var(--boxShadow); */
    border-bottom: 1px solid var(--grey200);
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear, opacity 0.2s linear;
    user-select: text;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-center[drag=true] {
    opacity: 0.5;
    transform: translate(0, 0);
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-center[dragover=true] {
    background-color: var(--lightBlue);
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv[dragover-top=true] {
    /* margin-top: 5rem; */
    /* margin-bottom: 0rem; */
    /* background-color: tomato; */
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv[dragover-bottom=true] {
    /* margin-top: 0rem; */
    /* margin-bottom: 5rem; */
    /* background-color: green; */
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-center:hover {
    /* cursor: grab; */
    /* box-shadow: none; */
    background-color: var(--lightBlue);
}

/* .admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv::after {
    grid-area: checkbox;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'material symbols rounded';
    font-weight: 300;
    font-size: 1.2rem;
    margin-left: auto;
    color: var(--grey600);
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv[value="false"]::after {
    content: 'check_box_outline_blank';
    /* color: var(--indigo500); */
/* } */

/* .admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv[value="true"]::after {
    content: 'check_box';
    color: var(--indigo500);
} */

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-infoEl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-infoEl[ref="title"] {
    grid-area: title;
    font-weight: 500;
}

[value=true] .admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-infoEl[ref="title"] {
    font-weight: 500;
    color: var(--green500);
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-infoEl[ref="desc"] {
    grid-area: desc;
    /* margin-top: 0.2rem; */
    font-style: italic;
    margin-bottom: 0.4rem;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-infoEl[ref="timestamp"] {
    grid-area: timestamp;
    margin-top: 0.4rem;
    color: var(--grey600);
    /* margin-left: auto; */
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-infoEl[ref="source"] {
    grid-area: source;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-checkbox {
    grid-area: checkbox;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: "material symbols rounded";
    font-weight: 300;
    font-size: 1.3rem;
    color: var(--indigo500);
    line-height: 1;
    width: fit-content;
    margin-left: auto;
    margin-right: 0.8rem;
    transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-checkbox:hover {
    cursor: pointer;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-checkbox[select="true"] {
    color: var(--green500);
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-checkbox[select="true"]:hover {
    color: var(--indigo500);
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-checkbox[select="false"] {}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-checkbox[select="false"]:hover {
    color: var(--green500);
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-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: 18rem;
    /* text-align: center; */
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-input:hover {
    border: 1px solid var(--indigo500);
    /* background-color: var(--grey50); */
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-input:focus {
    /* color: var(--indigo500); */
    /* background-color: var(--lightBlue); */
    border: 1px solid var(--indigo500);
    background-color: var(--grey50);
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-input[active=false] {
    pointer-events: none;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-actions {
    grid-area: actions;
    display: flex;
    flex-direction: row;
    column-gap: 0.4rem;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-moveBtn {
    display: flex;
    visibility: hidden;
    justify-content: center;
    align-items: center;
    color: var(--grey50);
    background-color: var(--indigo500);
    box-shadow: var(--boxShadow);
    border: 1px solid var(--indigo500);
    padding: 0.2rem 0.2rem;
    border-radius: 4px;
    width: fit-content;
    margin: auto;
    font-family: 'material symbols rounded';
    font-weight: 400;
    font-size: 0.8rem;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-moveBtn[ref="up"] {
    transform: rotate(-90deg);
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-moveBtn[ref="down"] {
    transform: rotate(90deg);
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-moveBtn[active="false"] {
    pointer-events: none;
    color: var(--grey500);
    background-color: var(--grey200);
    border: 1px solid var(--grey200);
    box-shadow: none;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv:hover .admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-moveBtn {
    display: grid;
    visibility: visible;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-moveBtn:hover {
    cursor: pointer;
    color: var(--indigo500);
    background-color: var(--lightBlue);
    border: 1px solid var(--indigo500);
    box-shadow: none;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-addBtn {
    grid-area: addBtn;
    display: flex;
    /* display: none; */
    visibility: hidden;
    justify-content: center;
    align-items: center;
    color: var(--grey50);
    background-color: var(--green500);
    box-shadow: var(--boxShadow);
    border: 1px solid var(--green500);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 500;
    width: fit-content;
    margin-left: auto;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv:hover .admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-addBtn {
    display: grid;
    visibility: visible;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-addBtn:hover {
    cursor: pointer;
    color: var(--green500);
    background-color: var(--lightGreen);
    border: 1px solid var(--green500);
    box-shadow: none;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-deleteBtn {
    grid-area: deleteBtn;
    display: flex;
    /* display: none; */
    visibility: hidden;
    justify-content: center;
    align-items: center;
    color: var(--grey50);
    background-color: var(--red300);
    box-shadow: var(--boxShadow);
    border: 1px solid var(--red300);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 500;
    width: fit-content;
    margin-left: auto;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv:hover .admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-deleteBtn {
    display: grid;
    visibility: visible;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-deleteBtn:hover {
    cursor: pointer;
    color: var(--red300);
    background-color: var(--lightRed);
    border: 1px solid var(--red300);
    box-shadow: none;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-editBtn {
    grid-area: editBtn;
    display: flex;
    /* display: none; */
    visibility: hidden;
    justify-content: center;
    align-items: center;
    color: var(--grey50);
    background-color: var(--indigo500);
    box-shadow: var(--boxShadow);
    border: 1px solid var(--indigo500);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 500;
    width: fit-content;
    margin-left: auto;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv:hover .admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-editBtn {
    display: grid;
    visibility: visible;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-taskDiv-editBtn:hover {
    cursor: pointer;
    color: var(--indigo500);
    background-color: var(--lightBlue);
    border: 1px solid var(--indigo500);
    box-shadow: none;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTask {
    display: grid;
    grid-template-areas:
        'title description actions'
        'title description actions';
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.8rem;
    row-gap: 0.2rem;
    padding: 0.4rem 0.6rem;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
    background-color: var(--grey100);
    /* border-top: 1px solid var(--grey200); */
    border-bottom: 1px solid var(--grey200);
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTaskDiv-field {
    display: grid;
    grid-template-areas:
        'title'
        'description'
        'input';
    grid-template-rows: auto 1fr auto;
    column-gap: 0.4rem;
    row-gap: 0.2rem;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTaskDiv-field-title {
    grid-area: title;
    color: var(--grey900);
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTaskDiv-field-description {
    grid-area: description;
    font-style: italic;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTaskDiv-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: 12rem;
    /* text-align: center; */
    transition: background-color 0.2s linear, border 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTaskDiv-field-input:hover {
    border: 1px solid var(--indigo500);
    /* background-color: var(--grey50); */
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTaskDiv-field-input:focus {
    /* color: var(--indigo500); */
    /* background-color: var(--lightBlue); */
    border: 1px solid var(--indigo500);
    background-color: var(--grey50);
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTaskDiv-actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    row-gap: 0.2rem;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTaskDiv-addBtn {
    /* grid-area: addBtn; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--grey50);
    background-color: var(--indigo500);
    box-shadow: var(--boxShadow);
    border: 1px solid var(--indigo500);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 500;
    white-space: nowrap;
    height: fit-content;
    margin-top: auto;
    margin-left: auto;
    width: 6rem;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTaskDiv-addBtn[ref="before"] {
    grid-area: addBefore;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTaskDiv-addBtn[ref="after"] {
    grid-area: addAfter;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTaskDiv-addBtn:hover {
    cursor: pointer;
    color: var(--indigo500);
    background-color: transparent;
    border: 1px solid var(--indigo500);
    box-shadow: none;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTaskDiv-addBtn[active=false] {
    pointer-events: none;
    color: var(--grey500);
    background-color: var(--grey200);
    border: 1px solid var(--grey200);
    box-shadow: none;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTaskDiv-cancelBtn {
    grid-area: cancelBtn;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--grey50);
    background-color: var(--indigo500);
    box-shadow: var(--boxShadow);
    border: 1px solid var(--indigo500);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 500;
    white-space: nowrap;
    height: fit-content;
    margin-top: auto;
    margin-left: auto;
    width: 6rem;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-checklist-checklistSec-checklistDiv-newTaskDiv-cancelBtn:hover {
    cursor: pointer;
    color: var(--indigo500);
    background-color: transparent;
    border: 1px solid var(--indigo500);
    box-shadow: none;
}

.admin-book3-modal-checklist-templateSec {
    grid-area: templates;
    display: flex;
    flex-direction: column;
}

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

.admin-book3-modal-checklist-templateSec-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-book3-modal-checklist-templateSec-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-book3-modal-checklist-templateSec-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-book3-modal-checklist-templateSec-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-book3-modal-checklist-templateSec-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-book3-modal-checklist-templateSec-templateDiv {
    display: grid;
    grid-template-areas:
        'info addBtn';
    grid-template-columns: 1fr auto;
    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-book3-modal-checklist-templateSec-templateDiv:hover {
    /* cursor: pointer; */
    box-shadow: none;
    /* color: var(--indigo500); */
    /* background-color: var(--lightBlue); */
    border: 1px solid var(--grey200);
}

.admin-book3-modal-checklist-templateSec-templateDiv-info {
    grid-area: info;
}

.admin-book3-modal-checklist-templateSec-templateDiv-info-el {}

.admin-book3-modal-checklist-templateSec-templateDiv-addBtn {
    grid-area: addBtn;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--grey50);
    background-color: var(--green500);
    box-shadow: var(--boxShadow);
    border: 1px solid var(--green500);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 500;
    width: fit-content;
    margin-left: auto;
    transition: background-color 0.2s linear, border 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
}

.admin-book3-modal-checklist-templateSec-templateDiv-addBtn:hover {
    cursor: pointer;
    color: var(--green500);
    background-color: var(--lightGreen);
    border: 1px solid var(--green500);
    box-shadow: none;
}