:root {
    --mdc-theme-primary: #7b4dff;
    --mdc-theme-secondary: #7b4dff;
    --mdc-theme-surface: #FFFFFF;
    --mdc-theme-background: #FFFFFF;
    --container-colour: #c4cdd5;
    --pulse-time: 3s;
    --pulse-opacity: 1;
    --mdc-shape-medium: 1em;
    --mdc-shape-small: 0.5em;
    --mdc-dialog-max-width: 70em;
    --table-even-colour: #f6f7f8;
    --table-odd-colour: white;
}


html {
    font-family: 'Poppins';
}

html,
body {
    overflow: hidden;
    margin: 0;
    height: 100%;
    width: 100%;
}

.main-nav {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: auto 2.65em 1fr 2.65em;
    grid-template-rows: auto 2.65em 1fr 2.65em;
    /* overflow: hidden; */
    /* gap: 2.65em; */
    background-color: var(--container-colour);

    .topbar {
        grid-column: 1 / -1;
        grid-row: 1;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background-color: var(--mdc-theme-primary);
        height: 4.95em;
        padding: 0 3em;
        color: white;

        >img {
            height: 1.5em;
        }
    }

    .topbar.impersonation-mode {
        background: repeating-linear-gradient(-45deg, color-mix(in srgb, white 7%, var(--mdc-theme-primary)), var(--mdc-theme-primary) 15px, color-mix(in srgb, white 20%, var(--mdc-theme-primary)) 15px, color-mix(in srgb, white 20%, var(--mdc-theme-primary)) 25px);
    }

    .sidebar {
        grid-column: 1;
        grid-row: 2 / -1;

        width: 15.05em;
        display: flex;
        flex-direction: column;
        background-color: white;
        overflow-y: auto;
    }

    .content {
        grid-column: 3;
        grid-row: 3;

        min-width: 0;
        background-color: white;
        border-radius: 15px;
        padding: 1.25em;

        overflow-y: auto;
    }

    .content-container {


        /* padding: 2.65em;
        box-sizing: border-box; */


    }
}

#user-icon {
    cursor: pointer;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--mdc-theme-primary);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--mdc-theme-primary);
}

.nav-link {
    margin: 0.5em 0;
    padding-left: 2.9em;
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    display: block;
    text-decoration: none;
    color: #637381;
    font-weight: 600;
    font-size: 0.9em;
}

.nav-details {
    margin: 0.5em 0;
    padding-left: 4.5em;
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    display: block;
    text-decoration: none;
    color: #7b4dff;
    font-weight: 600;
    font-size: 0.9em;
}

.nav-details-summary {
    margin: 0.5em 0;
    padding-left: 2.9em;
    padding-right: 4em;
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    text-decoration: none;
    color: #637381;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    position: relative;
    list-style: none;
    user-select: none;
    display: flex;
    flex-direction: row;
    gap: 0.5em;
}

details.nav-details-container summary::after {
    position: absolute;
    right: 2em;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

details.nav-details-container:not([open]) summary::after {
    content: '▶';
    scale: 0.8;
}

details.nav-details-container[open] summary::after {
    content: '▼';
}

.table-link:active,
.table-link:focus {
    color: #0b0c0c;
}

.table-link:hover,
.table-link:hover:visited {
    color: #003078;
}

.table-link,
.table-link:visited {
    color: unset
}

.table-link:hover {
    text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    -webkit-text-decoration-skip: none;
    text-decoration-skip: none;
}

.table-link {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-decoration: underline;
    text-decoration-thickness: max(1px, 0.0625rem);
    text-underline-offset: 0.1578em;
    cursor: pointer;
}

user agent stylesheet a:-webkit-any-link:active {
    color: -webkit-activelink;
}

user agent stylesheet a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

h2 {
    font-size: 1.8em;
    margin-top: 0.5em;
    margin-left: 0.5em;
    /* letter-spacing: 0.04em; */
}

.nav-link.nav-active {
    background-color: rgb(209, 209, 209);
}

.nav-link:hover {
    background-color: rgb(177, 177, 177);
}

.nav-details.nav-active {
    background-color: rgb(209, 209, 209);
}

.nav-details:hover {
    background-color: rgb(177, 177, 177);
}

.nav-details-container[open] {
    background-color: rgb(235 233 233);

}

.nav-details-container .nav-details {
    cursor: pointer;
    transition: margin 150ms ease-out;
}

.nav-details-summary:hover {
    background-color: rgb(177, 177, 177);
}

mwc-drawer[open] mwc-top-app-bar-fixed {
    /* Default width of drawer is 256px. See CSS Custom Properties below */
    --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width, 256px));
}

/* mwc-select {
    width: 20em;
} */

.order-configurator {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;
    max-width: 60em;
    min-width: 20em;
    border: 0.1em solid rgb(235, 235, 235);
    padding: 1em;
    border-radius: 0.2em;
    margin: 1em;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);

}

.error-log {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 20em;
    max-width: 100vw;
    z-index: 100;
    overflow-y: auto;
    max-height: 100vh;


    p {
        margin: 1em;
        background-color: rgb(209, 115, 115);
        border: 5px solid rgb(196, 92, 92);
        color: white;
        border-radius: 1em;
        padding: 1em;
        clear: none;
        box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.4);

        button {
            appearance: none;
            cursor: pointer;
            background-color: inherit;
            color: inherit;
            border: 2px solid rgb(196, 92, 92);
            border-radius: 0.5em;
            padding: 0.25em;
            float: right;
        }

        button:hover {
            background-color: rgb(199, 108, 108);
        }
    }

    p:before {
        content: 'Error: ';
    }
}

*[data-order-highlight] {
    color: red;
    font-weight: bold;
}

.smooth-modal {
    transition: width 0.5s, height 0.5s;
    overflow: hidden;
}

.smooth-modal.unloaded {
    width: 15em;
    height: 15em;
}

.smooth-modal.loaded {
    width: 60em;
    height: 60em;
    max-height: calc(100vh - 15em);
}

.device-biography-table {
    display: grid;
    grid-template-columns: 1em auto auto auto 1em;
    grid-template-rows: auto 1fr;
    column-gap: 1em;
    /* overflow-y: auto;
    position: relative; */
    padding-right: 1em;
    overflow: hidden;
}

.device-biography-table-header {
    background-color: white;
    grid-column: 1 / span 5;
    display: grid;
    grid-template-columns: subgrid
}

.device-biography-table-body {
    grid-column: 1 / span 5;
    display: grid;
    grid-template-columns: subgrid;
    overflow-y: auto;
    grid-auto-rows: max-content;
}

.device-biography-table-body .today-container, .collection-biography-table-body .today-container, .today-container, .user-biography-table-body .today-container {
    grid-column: 1 / span 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

    .today-block {
        grid-column: 2;
        background-color: #a7b1bc;
        color: white;
        font-size: 35px;
        padding: 5px;
    }

    .today_action {
        grid-column: 3;
    }
}


.device-biography-table .table-header {
    color: grey;
    margin-bottom: 1em;
}

.device-biography-table .activity-block {
    gap: 1em;
    grid-column: 1 / span 5;
    display: grid;
    grid-template-columns: subgrid;
    border: 1px solid rgb(206, 206, 206);
    border-radius: 1em;
    background-color: rgb(247, 247, 247);
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    color: rgb(71, 71, 71);
    padding: 1em;
}

.device-biography-table .activity-block.future-block {
    background-color: rgb(215, 209, 240);
}

.device-biography-table .activity-block:last-child {
    margin-bottom: 0.5em;
}

.device-biography-table .gap {
    grid-column: 1 / span 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.device-biography-table .date-bubble {
    background-color: #56609C;
    color: white;
    font-weight: 500;
    border-radius: 0.8em;
    padding: 0.25em;
    font-size: 0.8em;
    margin: 1em;
}

.device-biography-table .date-bubble.future {
    background-color: #c92d49;
}

.user-biography-table {
    display: grid;
    grid-template-columns: 1em auto auto auto 1em;
    grid-template-rows: auto 1fr;
    column-gap: 1em;
    /* overflow-y: auto;
    position: relative; */
    padding-right: 1em;
    overflow: hidden;
}

.user-biography-table-header {
    background-color: white;
    grid-column: 1 / span 5;
    display: grid;
    grid-template-columns: subgrid
}

.user-biography-table-body {
    grid-column: 1 / span 5;
    display: grid;
    grid-template-columns: subgrid;
    overflow-y: auto;
    grid-auto-rows: max-content;
}


.user-biography-table .table-header {
    color: grey;
    margin-bottom: 1em;
}

.user-biography-table .activity-block {
    gap: 1em;
    grid-column: 1 / span 5;
    display: grid;
    grid-template-columns: subgrid;
    border: 1px solid rgb(206, 206, 206);
    border-radius: 1em;
    background-color: rgb(247, 247, 247);
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    color: rgb(71, 71, 71);
    padding: 1em;
}

.user-biography-table .activity-block:last-child {
    margin-bottom: 0.5em;
}

.user-biography-table .gap {
    grid-column: 1 / span 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-biography-table .date-bubble {
    background-color: #56609C;
    color: white;
    font-weight: 500;
    border-radius: 0.8em;
    padding: 0.25em;
    font-size: 0.8em;
    margin: 1em;
}

.collection-biography-details-card {
    display: grid;
    /* gap: 1em; */
    /* grid-template-columns: minmax(6em, 8em) max-content; */
    /* margin: 1em; */
    padding: 1em;
    border: 1px solid rgb(206, 206, 206);
    border-radius: 1em;
    background-color: #7b4dff;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    color: rgb(71, 71, 71);
    width: auto;
}

.collection-biography-table {
    display: grid;
    grid-template-columns: 1em auto auto auto 1em;
    grid-template-rows: auto 1fr;
    column-gap: 1em;
    /* overflow-y: auto;
    position: relative; */
    padding-right: 1em;
    overflow: hidden;
}

.collection-biography-table-header {
    background-color: white;
    grid-column: 1 / span 5;
    display: grid;
    grid-template-columns: subgrid
}

.collection-biography-table-body {
    grid-column: 1 / span 5;
    display: grid;
    grid-template-columns: subgrid;
    overflow-y: auto;
    grid-auto-rows: max-content;
}


.collection-biography-table .table-header {
    color: grey;
    margin-bottom: 1em;
}

.collection-biography-table .activity-block {
    gap: 1em;
    grid-column: 1 / span 5;
    display: grid;
    grid-template-columns: subgrid;
    border: 1px solid rgb(206, 206, 206);
    border-radius: 1em;
    background-color: rgb(247, 247, 247);
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    color: rgb(71, 71, 71);
    padding: 1em;
}

.collection-biography-table .activity-block:last-child {
    margin-bottom: 0.5em;
}

.collection-biography-table .gap {
    grid-column: 1 / span 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collection-biography-table .date-bubble {
    background-color: #56609C;
    color: white;
    font-weight: 500;
    border-radius: 0.8em;
    padding: 0.25em;
    font-size: 0.8em;
    margin: 1em;
}

.end-user-configurator {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;

}

.end-user-configurator>.sub-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;
    min-width: 20em;
    border: 0.1em solid rgb(235, 235, 235);
    padding: 1em;
    border-radius: 0.2em;
    margin: 1em;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.end-user-configurator>#name-form.sub-form {
    display: grid;
    grid-template-columns: auto auto auto;
}

.end-user-configurator>#name-form.sub-form>mwc-textfield:first-child {
    grid-column-start: 1;
    grid-column-end: 4;
}

.end-user-configurator>#name-form.sub-form>mwc-icon-button {
    margin: auto;

}

.end-user-configurator>#name-form.sub-form>mwc-textfield:first-child {
    grid-column-start: 1;
    grid-column-end: 4;
}

.end-user-configurator>.buttons-wrapper {
    margin-left: 1em;
}

.product-line-configurator {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;
    min-width: 20em;
}

.product-line-configurator mwc-check-list-item {
    height: 1.75em;
}

mwc-select mwc-list-item[disabled] {
    color: var(--disabled-text);
}


#matrix-table-wrapper {

    border-radius: 0.5em;
    box-shadow: 0px 1px 2px 0px #a5a5a5;
    background-color: #f6f7f8;
    flex-shrink: 1;
    flex-grow: 1;
    margin: 1em;
}

.table-footer-button {
    background-color: #c4cdd5;
    height: 2.5em;
}

.matrix {
    border-radius: 0.5em 0.5em 0em 0em;
    display: grid;
    overflow: auto;
    position: relative;

    a {
        color: rgb(71, 71, 71);
    }

    a:hover {
        text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
        -webkit-text-decoration-skip-ink: none;
        text-decoration-skip-ink: none;
        -webkit-text-decoration-skip: none;
        text-decoration-skip: none;
    }
}

.matrix .col-header a,
.matrix .row-header a {
    color: white;
}

.matrix .row-inner span {

    color: #637381;
    vertical-align: middle;
    padding: 0.5em;
}

.matrix .col-header {
    background-color: var(--mdc-theme-primary) !important;
    color: white !important;
    grid-row: 1;
    vertical-align: middle;
    padding: 0.5em 1em;
    min-height: 2.2em;
    align-items: center;
    display: flex;
}

.matrix .row-header {
    background-color: var(--mdc-theme-primary) !important;
    color: white !important;
    grid-column: 1;
    vertical-align: middle;
    padding: 0.5em;
}

.matrix .empty {
    background-color: var(--mdc-theme-primary) !important;
    position: sticky;
    top: 0;
    left: 0;
    grid-row: 1;
    grid-column: 1;
    z-index: 4;
}

.matrix .cells {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.matrix .columns {
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    position: sticky;
    top: 0;
    z-index: 3;
}

.matrix .rows {
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    position: sticky;
    left: 0;
    z-index: 2;
}

.matrix .row-inner {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

#search-bar {
    margin: 1.25em 1.25em 3.25em 1.25em;
}

.matrix .row-inner:nth-child(even) {
    background-color: var(--table-even-colour);
}

.matrix .row-inner:nth-child(odd) {
    background-color: var(--table-odd-colour);
}

.z-table-outer.rounded .z-table {
    border-radius: 0.5em;
    box-shadow: 0px 1px 2px 0px #a5a5a5;

}

.z-table-outer.mdc-theme .z-table-header {
    background-color: var(--mdc-theme-primary) !important;
    color: white !important;

    .z-menu {
        color: black;

        .z-menu-inner {
            min-width: 20em;
        }
    }

    .z-table-header-item .z-checkbox-bg {
        border-color: white;
    }

    .z-table-header-item .z-checkbox:hover {
        background-color: #7448eb;
    }

    .z-table-header-item .z-checkbox-area:hover::after {
        background-color: #6d44e0;
    }

}


.z-table-outer.mdc-theme .z-table {
    background-color: #f6f7f8;
}

.z-table-outer.mdc-theme .z-table-footer {
    background-color: #c4cdd5;
    bottom: -1px;
}

.z-table-outer.mdc-theme .z-table-footer>.grid-footer>span {
    padding-left: 1em;
    padding-right: 1em;
}

.z-table-outer.mdc-theme .z-table-cell>span {
    display: block;
    color: #637381;
    padding-left: 1em;
    padding-right: 1em;
}

.z-table-outer.mdc-theme .z-table-cell>a {
    display: block;
    color: #637381;
    padding-left: 1em;
    padding-right: 1em;
}

.z-table-outer.mdc-theme .grid-footer>div>a {
    display: block;
    color: #637381;
    padding-left: 1em;
    padding-right: 1em;
}

.z-table-outer.mdc-theme .z-table-cell {
    display: flex;
    align-items: center;
}


.z-table-outer.always-footer .z-table-footer {
    min-height: 2.2em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
}

.z-table-outer.large-header .z-table-header {
    font-weight: 400 !important;
    min-height: 3em;
    height: fit-content;
}

.z-table-outer.large-header .z-table-header>span {
    padding-left: 1em;
    padding-right: 1em;
}

.z-table-outer.large-rows .z-table-row {
    border-bottom: none !important;

    .z-table-cell {
        min-height: 2.5em;
    }
}

.z-table-outer.striped .z-table-row:nth-child(odd),
.z-table-outer.striped .z-table-row:nth-child(odd) .z-table-cell {
    background-color: var(--table-odd-colour);
}

.z-table-outer.striped .z-table-row:nth-child(even),
.z-table-outer.striped .z-table-row:nth-child(even) .z-table-cell {
    background-color: var(--table-even-colour);
}

.block-footer>a>mwc-button {
    margin-left: 1.5em;
}


.pulse {
    animation: pulse var(--pulse-time) linear infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.5);
        opacity: var(--pulse-opacity);
    }

    50% {
        transform: scale(0.75);
        opacity: calc(var(--pulse-opacity) * 0.5);
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.svg-replace-text {
    text-anchor: middle;
    font-weight: 500;
}

#search-results {}

#search-results details summary {
    background-color: var(--mdc-theme-primary);
    color: var(--mdc-theme-surface);
    padding: 1em;
    cursor: pointer;
}

#search-results details {
    border: 1px solid var(--mdc-theme-primary);
    border-radius: 1em;
    margin: 1em;
    overflow: auto;

    box-shadow: 0px 1px 2px 0px #a5a5a5;
}

#search-results details p {
    margin: 1em;
}

#search-results .search-link:hover {
    text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    -webkit-text-decoration-skip: none;
    text-decoration-skip: none;
}

#search-results .search-link {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-decoration: underline;
    text-decoration-thickness: max(1px, 0.0625rem);
    text-underline-offset: 0.1578em;
    cursor: pointer;
}

#search-results details summary .search-link {
    color: var(--mdc-theme-surface);
}

.search-results-row {
    margin: 1em;

}

mwc-textfield {
    margin-top: 0.5em;
}

.approval-form {
    display: flex;
    flex-direction: column;

    h3 {
        margin-bottom: 0.5em;
    }

    p {
        margin: 0.5em 0;
    }
}

.z-table-outer.responsive-height {
    flex-shrink: 1;
    flex-grow: 1;
    min-height: 0;
    padding: 1em;
    display: flex;
    flex-direction: column;

    .z-table {
        flex-shrink: 1;
        flex-grow: 1;
        min-height: 0;
    }
}

.textfield-layout {
    text-align: right;
    /* width: 20em; */
}

.radiobutton_layout {
    margin-top: 1em;
    margin-bottom: 1em;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.table-page {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

.explanation-div{
    padding: 1em;
    background-color:#F6F7F8;
    border-radius: 0.5em;
    text-align: left;
}

.intinerary-data-fields {
    display: flex;
    justify-content: space-between;
    flex-direction: row;

}

.create-cancel-buttons-spacing {
    width: max-content;
    gap: 0.5em;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: end;
}

.packaging-details>mwc-textarea {

    display: flex;
}

.facility-block {
    /* width: 20em; */
    max-width: 30em;
    /* min-width: 20em; */
    /* padding: 1em; */
    /* background-color:#7b4dff; */
    border: 2px solid #7b4dff;
    border-radius: 0.5em;
    color: #000000;
}

.facility-block-header {
    background-color: var(--mdc-theme-primary);
    padding: 1em;
    /* margin-bottom: 1em; */

    p:first-child {
        margin-bottom: 0.25em;

    }

    p:last-child {
        margin-top: 0;
    }
}

.facility-block-body {
    padding: 1em;
}

.facility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 25em);
    gap: 1em;
    /* grid-auto-flow: row; */
}

.asset-category-title {
    color: #f6f7f8;
    margin-top: 0.25em;
    margin-bottom: 0em;
    font-size: 1.75em;
    font-weight: 650;
}

.cost-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-rows: max-content;
    row-gap: 1em;
}

.cost-block {
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
    align-items: center;
    justify-content: center;
    border: 2px solid #7b4dff;
    border-radius: 0.5em;
    overflow: auto;
}

.cost-block .title-section {
    background-color: #7b4dff;
    padding: 0.75em;
}

.cost-block .entry-section {
    display: flex;
    flex-direction: row;
    flex-shrink: 3;
    column-gap: 0.5em;
    margin: 1em;
    flex-grow: 1;

}

.chargeable-title {
    color: #f6f7f8;
    margin-left: 0em;
    margin-bottom: 0em;
    margin-top: 10px;
    font-size: 1.4em;
    font-weight: 650;
}

.test-textfield {
    border: 1px solid #757575;
    /* how to add transparancy? */
    border-radius: 0.5em;
    margin: 1em;
    padding: 1em;
    width: 10em;

}

.cost-block .entry-section fieldset {
    border: 1px solid #949494;
    /* how to add transparancy? */
    border-radius: 0.5em;
    box-sizing: border-box;
    /* margin: 1em; */
    padding: 0.5em;
    width: 9em;
    flex-grow: 1;
    flex-shrink: 1;
}

.cost-block .entry-section legend {
    font-size: 8pt;
    padding: 0 4px;
    margin-right: auto;
}

.cost-block .entry-section mwc-textfield {
    width: 9em;
    flex-grow: 1;
    flex-shrink: 1;
}

.new-contact-box {
    width: 40em;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-rows: max-content;
    row-gap: 0.5em;
}

.contact-section {
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
    grid-template-columns: 7em 1fr;
    gap: 1em;
}

.name {
    display: grid;
    grid-template-columns: 7em 1fr;
    gap: 1em;
}

.phone {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1em;
}

.service-block {
    width: 30em;
    display: grid;
    grid-template-columns: 8em 1fr;
    align-items: end;
}

.service-block .z-checkbox.checkbox {
    text-align: left;

}

.collection-form-block {
    width: 30em;
    display: grid;
    column-gap: 0.5em;
    row-gap: 0.5em;
    grid-template-columns: 12em 1fr;
    align-items: end;
}

.save-button-space {
    align-items: center;
}

.schedule-block {
    width: 25em;
    display: grid;
    column-gap: 0.5em;
    row-gap: 0.5em;
    grid-template-columns: 10em 1fr;
    align-items: baseline;
}

.quarantine-report-config-block {
    width: 30em;
}

.periodically_options_grid {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 1em;
}

.logistics-block {
    width: 30em;
}

.overview-link-container {
    position: absolute;

    a {
        display: block;
        width: 100%;
        height: 100%;
    }
}

.quick-panel {
    .actions {
        margin-top: 1em;
        display: grid;
        grid-template-columns: repeat(auto-fit, 10em);
        grid-auto-rows: minmax(10em, auto);
        gap: 0.5em;
        max-width: 65em;

        span {
            position: relative;
            display: flex;
            border-radius: 1rem;
            padding: 1rem;
            background-color: var(--mdc-theme-primary);
            color: white;
            justify-content: center;
            align-items: center;
            text-align: center;
            box-shadow: 0px 2px 3px 0px #a5a5a5;
            transition: top 0.25s, background-color 0.25s;
            user-select: none;
            cursor: pointer;
            top: 0;
            height: 100%;
            box-sizing: border-box;
        }

        div:hover span {
            top: -0.5em;
            background-color: color-mix(in srgb, white 15%, var(--mdc-theme-primary) 85%);
        }
    }

}

.device-card {
    background: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-divider-color);
}

.device-card h2 {
    font-size: 1.5em;
    margin-top: 1.5em;
    margin-left: 0;
    /* letter-spacing: 0.04em; */
    margin-bottom: 0.3em;
}

.device-card-header {
    display: grid;
    grid-template-columns: max-content auto;
    column-gap: 1em;
}

.simcard-section {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 1em;
    padding: 0.5em;
    align-items: center;
}

.simcard-phone-number {
    display: flex;
    border: 1px solid #3f3f3f;
    border-radius: 0.5em;
    box-sizing: border-box;
    /* margin: 1em; */
    padding: 0.5em;
    width: 20em;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: space-between;
    background-color: white;

    p {
        margin: 0.25em;
    }
}

.add-sim-card-section {
    display: grid;
    grid-template-columns: max-content auto;
    align-items: baseline;
    column-gap: 2em;

}

.update-phone-number-fieldset {
    display: flex;
    border: 1px solid #3f3f3f;
    border-radius: 0.5em;
    box-sizing: border-box;
    /* margin: 1em; */
    padding: 0.5em;
    width: 20em;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: space-between;
    background-color: white;

    p {
        margin: 0.25em;
    }
}

.reassign-device-dialog {
    width: 30em;

}

.return-device-address {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 1em;
    align-items: baseline;
    margin: 1em 0;

}

.return-device-device {
    display: flex;
    width: 25em;
    align-items: baseline;
    column-gap: 1em;
}

.notification-pop-up {
    position: fixed;
    top: 8em;
    bottom: calc(100%-8em);
    right: 50%;
    left: 50%;
    z-index: 100;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    p {
        max-width: 100vw;
        min-width: 20em;
        width: 20em;
        margin: 1em;
        background-color: rgb(255, 255, 255);
        border: 2px solid rgb(93, 51, 209);
        color: #554d4d;
        border-radius: 1em;
        padding: 1em;
        clear: none;
        box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.4);
        box-sizing: border-box;

        button {
            appearance: none;
            cursor: pointer;
            background-color: inherit;
            color: inherit;
            border: 2px solid rgb(184, 158, 255);
            border-radius: 0.5em;
            padding: 0.25em;
            float: right;
        }

        button:hover {
            background-color: rgb(113, 79, 206);
            color: #f3f3f3;
        }
    }

}

@media (max-width: 20em) {
    .notification-pop-up p {
        min-width: 100vw;
        width: 100vw;
    }
}

.collection-request-device-selection {
    display: grid;
    grid-template-columns: max-content 15em;
    column-gap: 1em;
    margin: 1em 0;
    align-items: baseline;
}

.contractual-limits-block {
    display: flex;
    gap: 2em;
    /* overflow-y: auto; */
    /* margin: 1em 0; */
    flex-direction: row;
    /* column-gap: 1.5em;    */
    flex-wrap: wrap;
    justify-content: center;
}

.contractual-limits-block-fieldset {
    display: flex;
    flex-direction: column;
    border: 3px solid #ebebeb;
    border-radius: 0.5em;
    padding: 0.5em 3em 0.5em 3em;
    box-shadow: 0 0.25em 1em rgba(123, 77, 255, 15%);

    /* width: max-content; */
    /* background-color: #fcfcfe; */
    /* flex-grow: 1;
    flex-shrink: 1; */
    /* max-width: 15em; */
}

p[title]:not(.no-title-underline) {
    text-decoration: underline dotted #9b9b9b;
    text-decoration-thickness: 0.15em;
    text-underline-offset: 0.2em;
    cursor: help;
}

.contractual-limits-block-legend {
    font-size: 18pt;
    font-weight: 600;
    padding: 0 0.25em;
}

#notification-count {
    position: absolute;
    right: -.3em;
    bottom: 1.25em;
    background-color: #FF375E;
    border-radius: 1em;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
}

.notification {
    width: 4em;
}

.contractual-limits-block-info {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    width: max-content;
    margin: auto;
    padding-top: 1em;
}

.contractual-limits-block-info>span {
    display: grid;
    grid-column: 1;
    margin: 0 auto;
    font-size: 3em;
    color: #7b4dff
}

.contractual-limits-block-info>p {
    margin-left: auto;
    margin-right: auto;
    grid-column: 1;
    grid-row: 2;
}

.configuration-mat-tab-outer {
    display: flex;
    flex-direction: column;
    border: 2px solid #dddbdb;
    box-shadow: 0 0.25em 1em rgb(222 222 222);
    border-radius: 0.5em;
    box-sizing: border-box;
    overflow-y: hidden;
    height: 46em;
    margin: 1em;
    width: 55em;
}

.configuration-mat-tab-titles {
    height: max-content;
    box-shadow: 0 0.25em 1em rgb(222 222 222);
    /* overflow-y: hidden; */
}

.configuration-mat-tab-inner {
    display: grid;
    margin: 3em;
    overflow-y: auto;
}

.notification-dismiss-all-container {
    margin: 0 auto;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 1em;
}

.notification-dismiss-all-container>a {
    width: 100%;
}

.notification-container {
    width: 25em;
    padding: 1em;
    max-height: 35em;
    overflow-y: scroll;
    grid-template-columns: auto;
    color: black;
}

.notification-tile {
    margin-bottom: 1em;
    grid-template-columns: auto 3em;
    padding: 1em;
    border-radius: 1em;
    background-color: #e7e7e7;
    display: grid;
    min-height: 5em;
}

.notification-tile:hover {
    background-color: #F7F7F7;
    box-shadow: 4px 4px 10px 0px #00000047;
}

.notification-timestamp {
    margin: auto 0;
}

.notification-message {
    grid-column: span 2;
}

.notification-dismiss-all-container>a>mwc-button {
    width: 100%;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    width: fit-content;
    gap: 2em;
    margin: auto 1em;
}

.dashboard-cards-column {
    display: flex;
    flex-direction: column;
    gap: 2em;
    justify-content: space-between;
}

.dashboard-primary-card {
    display: flex;
    background: #7b4dff;
    color: #fff;
    border-radius: 0.5em;
    flex-grow: 1;
    justify-content: space-between;
    /* width: max-content; */
    /* margin: auto; */
    gap: 0 3em;
    padding: 2em 1em;
}

/* .dashboard-primary-style{
    display: grid;
    grid-template-columns: 12em auto;
    grid-template-rows: auto auto auto;
    
} */

.dashboard-secondary-card {
    display: grid;
    background: white;
    color: #7b4dff;
    border: 5px solid #7b4dff;
    border-radius: 0.5em;
    flex-grow: 1;
}

.dashboard-secondary-style {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    gap: 0 3em;
    padding: 2em 1em;
    justify-content: space-between;
}

.picture-card {
    border: 5px solid #7b4dff;
    border-radius: 0.5em;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.progress-outer-box {
    border: 1px solid rgb(206, 206, 206);
    border-radius: 1em;
    background-color: rgb(247, 247, 247);
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    color: rgb(71, 71, 71);
    padding: 1em;
    margin: 1.5em 0;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    overflow-y: auto;
    box-sizing: border-box;
}

.progress-styling {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}

.completed-icon {
    transition: scale 0.2s;
}

.progress-styling:hover .completed-icon {
    scale: 1.25;
    animation: 0.5s infinite icon-rock;
}

@keyframes icon-rock {
    0% {
        rotate: -20deg;
    }

    50% {
        rotate: 20deg;
    }

    100% {
        rotate: -20deg;
    }
}

section.biography-section {
    border: 1px solid var(--biography-section-border, #cecece);
    border-radius: 1em;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    padding: 1em;
    margin: 2em 0;
    box-sizing: border-box;
    background-color: var(--biography-section-background, #f7f7f7);
    color: var(--biography-section-foreground);

    > h3 {
        font-weight: 550;
        margin: 0;
        margin-bottom: 0.5em;
    }
}

section.biography-section > .tags {
    margin-top: 0.5em;
    display:flex;
    flex-wrap: wrap;
    flex-flow: row wrap;
    align-content: flex-start;
    overflow-y: auto;
    max-height:9em;
    align-items: center;

    --mdc-icon-button-size: 1.5em;
    --mdc-icon-size: 1em;
    --mdc-ripple-fg-size: 1.5em;
    --mdc-ripple-top: 0;
    --mdc-ripple-left: 0;
}

section.biography-section.estimated-value > .value-table {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5em;
    > p {
        margin: 0;
    }

    > p:nth-child(2n) {
        text-align: right;
    }

    p.active {
        font-size: 150%;
    }
}

.biography-status-container {
    border: 1px solid rgb(206, 206, 206);
    border-radius: 1em;
    background-color: rgb(247, 247, 247);
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    color: rgb(71, 71, 71);
    padding: 1em;
    margin: 2em 0;
    display: flex;
    flex-direction: column;
    gap: 1em;
    box-sizing: border-box;
    overflow-x: auto;
}

.biography-status-container {

    /* width */
    ::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {}

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: var(--mdc-theme-background);
        border-radius: 10px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--mdc-theme-background);
    }
}

.tag {
    display: flex;
    padding: 0.25em 0.75em;
    margin: 0.25em;
    min-height: 1em;
    font-weight: 500;
    width: fit-content;
    word-break: break-word;
    flex-direction: row;
    align-items: stretch;
    border-radius: 1.25em;
    background-color: var(--tag-colour, #3073f1);
    color: white;
}

.tag.tag-colour-0{
    --tag-colour: #3073f1;
}

.tag.tag-colour-1{
    --tag-colour: #1cb454;
}

.tag.tag-colour-2{
    --tag-colour: #0895D8;
}

.tag.tag-colour-3{
    --tag-colour: #E2A907;
}

.tag.tag-colour-4{
    --tag-colour: #E63535;
}

.tag.tag-colour-5{
    --tag-colour: #313A46;
}

.tag.tag-colour-6{
    --tag-colour: #68625D;
}

.tag.tag-colour-7{
    --tag-colour: #625EDB;
}

.tag.tag-colour-8{
    --tag-colour: #A855F7;
}

.tag.tag-colour-9{
    --tag-colour: #EC4899;
}

.dashboard-card-link {
    text-decoration: none;
}

.dashboard-card-link:hover {
    text-decoration: none;

    div {
        box-shadow: inset 0px 0px 8px 0px #7b4dff;
    }
}

.dashboard-primary-card:hover {
    box-shadow: -1px 2px 12px 6px #bcbcbc;
}

.dashboard-quick-links {
    display: grid;
    margin: auto;
    text-decoration: none;
}

.dashboard-quick-links:hover {
    h2 {
        text-shadow: 0px 0px 7px #c6c6c6;
    }

    text-decoration: none;
}

span.warn-bad-imei {
    color: rgb(233, 41, 41) !important;
    font-weight: 400 !important;
    text-decoration: wavy underline;
}

div.z-wizard {
    div.z-wizard-steps-ticker {
        padding: 0.5em;
        border-radius: 0.5em;
        background-color: rgb(236, 236, 236);

        div.z-wizard-steps-ticker-item {
            display: grid;
            grid-template-columns: auto auto auto;
            align-items: center;

            >span.step-icon,
            >span.step-arrow {
                color: var(--mdc-theme-primary);

                mwc-icon {
                    display: block;
                }
            }

            >span.step-icon {
                padding-right: 0.25em;
            }

            >span.step-arrow {
                padding: 0 1em;
            }

            >span.step-name {
                color: #637381;
            }
        }
    }
}

.reporting-page {
    .template-group {
        border: 1px solid var(--mdc-theme-primary);
        margin: 1em 0;
        display: grid;
        grid-template-columns: 3em auto 1fr;
        column-gap: 1.5em;
        row-gap: 3em;
        padding-bottom: 3em;

        >header {
            background-color: var(--mdc-theme-primary);
            color: white;
            font-size: 2em;
            padding: 0.25em 0.5em;
            grid-column: 1 / -1;
        }

        >img {
            grid-column: 2;
            display: block;
            width: 7em;
            border: 1px solid grey;
            align-self: center;
        }

        >.template-description {
            grid-column: 3;
            display: grid;
            grid-template-rows: auto auto;
            grid-template-columns: auto;
            row-gap: 0.5em;

            >.template-name {
                color: #637381;
                text-decoration: underline;
                font-size: 1.25em;

                >a {
                    cursor: pointer;
                }

                >a:hover {
                    color: #8da2b4;
                }
            }

            >.template-help-text {
                color: var(--mdc-theme-primary);
                max-width: 30em;
            }
        }
    }
}

.dialog-table {
    height: 80vh;
}

/* Estimation Page Styles */
.estimation-page {
    padding: 24px;
}

.estimation-page .page-title {
    font-size: 24px;
    font-weight: 500;
    color: var(--theme-text-color-900);
    margin-bottom: 24px;
}

.estimation-page .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.devices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.device-card {
    padding: 16px;
}

.device-card .device-name {
    font-size: 18px;
    font-weight: 500;
    color: var(--theme-text-color-900);
    margin: 0 0 16px 0;
}

.device-card .device-info {
    margin-bottom: 16px;
}

.device-card .device-info p {
    margin: 8px 0;
    color: var(--theme-text-color-700);
}

.device-card .device-info .label {
    font-weight: 500;
    color: var(--theme-text-color-900);
    margin-right: 8px;
}

.device-card .price-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--theme-divider-color);
}

.device-card .price-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.device-card .price-label {
    font-size: 14px;
    color: var(--theme-text-color-700);
}

.device-card .price-value {
    font-size: 16px;
    font-weight: 500;
    color: var(--theme-text-color-900);
}

.tag-summary-edit {
    color: #0000 !important;
}

.z-table-row:hover > .z-table-cell > .tag-summary-edit,
.z-table-row:focus-within > .z-table-cell > .tag-summary-edit {
    color: #637381 !important;
}

.lease-remaining {
    border-radius: 1em;
    padding: 0.25em 0.5em;
    margin: 0.1em auto;
    display: block;
    font-size: 80%;
    color: #37434c;
    font-weight: 550;
}

.lease-remaining.expired,
.lease-remaining.returned
 {
    background-color: #7c8489;
    color: white;
}

.lease-remaining.expired::after {
    content: '⚠️';
    position: relative;
    bottom: 0.1em;
}

.lease-remaining.red {
    background-color: #ff4d85;
}

.lease-remaining.amber {
    background-color: #ffc455;
}

.lease-remaining.green {
    background-color: #7bff76;
}

.z-table-outer.lease-summary .z-table-body .z-table-row:nth-child(2n+1) .z-table-cell:nth-child(4) {
    background-color: #7c8489 !important;
    span {
        color: white;
        text-align: center;
    }
}
.z-table-outer.lease-summary .z-table-body .z-table-row:nth-child(2n) .z-table-cell:nth-child(4) {
    background-color: #6c7377 !important;
    span {
        color: white;
        text-align: center;
    }
}

.z-table-outer.lease-summary .z-table-body .z-table-row:nth-child(2n+1) .z-table-cell:nth-child(5) {
    background-color: #ff4d85 !important;
    span {
        color: black;
        text-align: center;
    }
}
.z-table-outer.lease-summary .z-table-body .z-table-row:nth-child(2n) .z-table-cell:nth-child(5) {
    background-color: #e9467a !important;
    span {
        color: black;
        text-align: center;
    }
}

.z-table-outer.lease-summary .z-table-body .z-table-row:nth-child(2n+1) .z-table-cell:nth-child(6) {
    background-color: #ffc455 !important;
    span {
        color: black;
        text-align: center;
    }
}
.z-table-outer.lease-summary .z-table-body .z-table-row:nth-child(2n) .z-table-cell:nth-child(6) {
    background-color: #dfaa49 !important;
    span {
        color: black;
        text-align: center;
    }
}

.z-table-outer.lease-summary .z-table-body .z-table-row:nth-child(2n+1) .z-table-cell:nth-child(7) {
    background-color: #7bff76 !important;
    span {
        color: black;
        text-align: center;
    }
}
.z-table-outer.lease-summary .z-table-body .z-table-row:nth-child(2n) .z-table-cell:nth-child(7) {
    background-color: #70e96c !important;
    span {
        color: black;
        text-align: center;
    }
}


.z-table-outer.lease-summary .z-table-cell:nth-child(4),
.z-table-outer.lease-summary .z-table-cell:nth-child(5),
.z-table-outer.lease-summary .z-table-cell:nth-child(6),
.z-table-outer.lease-summary .z-table-cell:nth-child(7),
.z-table-outer.lease-summary .z-table-cell:nth-child(8),
.z-table-outer.lease-summary .z-table-cell:nth-child(9) {
    span {
        text-align: center;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}
.generic-input-box{
    height: 4em;
    .generic-input-box-inner{
        height: 3.5rem;
        font-size: 1em;
        cursor: pointer;
        position: relative;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 1em;
        background-color: #ffffff;
        border: 1px solid #9e9e9e;
        border-radius: 0.5rem;
        padding: 1px;
        padding: 0.5em;
        margin: 0.5em;
    }
    .generic-input-box-inner:hover {
        border: 1px solid #212121;
    }
    .generic-input-box-label {
        z-index: 1;
        position: relative;
        top: -6.5em;
        left: 1rem;
        /* top: 0; */
        font-size: 0.75em;
        color: var(--mdc-theme-primary);
        padding-left: 3px;
        padding-right: 3px;
        background-color: white;
    }
}