@import '_content/ComponentLibrary/ComponentLibrary.bxt3tnxbt0.bundle.scp.css';

/* /Certificates/Components/CertDataCards/CertUserCard.razor.rz.scp.css */
i[data-user-blocked][b-qcguysijat] {
    color: var(--greencolor);
    font-size: 1.2rem;
}

i[data-user-blocked="False"][b-qcguysijat] {
    color: var(--greencolor);
}

i[data-user-blocked="True"][b-qcguysijat] {
    color: var(--redcolor);
    transform: rotate(90deg);
}
/* /Certificates/Components/CertificateCompletionOptions.razor.rz.scp.css */
.certificate-completion-options[b-pbls2gynnt] {
    background-color: #00000079;
    padding-block: 0.5rem 0.5rem;
    padding-inline: 0.5rem;
    border-radius: 0.5rem;
    opacity: 0;
}

.certificate-completion-options[b-pbls2gynnt] {
    display: inline-grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header"
        "options";
    gap: 1rem;
    animation: visibility-animation-b-pbls2gynnt 0.5s 0.75s normal forwards;
}

@keyframes visibility-animation-b-pbls2gynnt {
    to {
        opacity: 1;
    }
}


.certificate-completion-header[b-pbls2gynnt] {
    grid-area: header;
    align-items: baseline;
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-template-rows: min-content min-content;
    grid-template-areas:
        "title icon"
        "note note";
}

    .certificate-completion-header .title[b-pbls2gynnt] {
        grid-area: title;
        color: var(--greencolor);
    }

    .certificate-completion-header .icon[b-pbls2gynnt] {
        grid-area: icon;
        color: var(--greencolor);
        /*background: radial-gradient(white 0%, white 60%, transparent 40%);*/
        border-radius: 2rem;
        font-size: 1.75rem;
    }

    .certificate-completion-header .note[b-pbls2gynnt] {
        grid-area: note;
        line-height: 1.25;
        color: var(--bluecolor);
    }


.certificate-completion-buttons[b-pbls2gynnt] {
    grid-area: options;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-flow: column;
    gap: 0.5rem;
}

    .certificate-completion-buttons[b-pbls2gynnt]  .completion-button {
        padding: 0.75rem 0.5rem;
        font-size: 1.0rem;
        --icon-size: 1.1rem;
        height: 100%;
    }

/* /Certificates/Components/CertificateCreationDashboard.razor.rz.scp.css */
/*#region dashboard*/
.properties[b-9ebqw2158t] {
    --progress-ring-size: 8rem;
    --color-not-selected: var(--graycolor);
    --color-selected: var(--orangecolor);
    --stroke-width: 2px;
    --arrow-stroke-width: calc(var(--stroke-width) - 1px);
    --stroke-color: var(--color-selected);
    --arrow-color: var(--app-active-bgcolor);
    --icon-size: 4rem;
    --titles-font-size: 1.2rem;
    --icon-result-angle: 0deg;
    --icon-data-angle: -180deg;
    --border-radius-value: calc(var(--progress-ring-size) * 0.5 + var(--stroke-width) * 4);
    --title-writing-mode: sideways-rl;
}

[dir="rtl"] .properties[b-9ebqw2158t] {
    --icon-data-angle: 180deg;
    --title-writing-mode: sideways-lr;
}

.certificate-creation-dashboard[b-9ebqw2158t] {
    overflow: hidden;
    border-width: 0;
    border-end-start-radius: var(--border-radius-value);
    border-style: solid;
    border-color: var(--app-black-color);
    border-inline-start-width: var(--stroke-width);
    border-block-end-width: var(--stroke-width);
}


.certificate-creation-dashboard[b-9ebqw2158t] {
    background-color: var(--app-content-bgcolor);
    display: grid;
    row-gap: 1.5rem;
    padding-block: 0.75rem;
    padding-inline: 0.75rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto max-content auto;
    grid-template-areas:
        "essentials"
        "result"
        "arrow"
        "data";

    .data-area {
        grid-area: data;
    }

    .result-area[b-9ebqw2158t] {
        grid-area: result;
    }

    .essentials-area[b-9ebqw2158t] {
        grid-area: essentials;
    }

    .pointer-arrow-area[b-9ebqw2158t] {
        grid-area: arrow;
        display: grid;
        place-items: center;
    }
}
/*#endregion dashboard*/


/*#region progress-area */
.progress-area[b-9ebqw2158t] {
    display: grid;
    grid-template-columns: auto min-content;
    grid-template-rows: 1fr;
    grid-template-areas: "nav-link title";
    place-items: center;
    column-gap : 0.5rem;
}

    .progress-area[b-9ebqw2158t]  .nav-link {
        grid-area: nav-link;
        border-radius: 100rem;
        border: var(--stroke-width) solid var(--graycolor);
    }

    .progress-area .title[b-9ebqw2158t] {
        grid-area: title;
        color: var(--color-not-selected);
        writing-mode: var(--title-writing-mode);
        align-self: center;
        font-size: var(--titles-font-size);
    }

    .progress-area:has(.selected) .title[b-9ebqw2158t] {
        color: var(--color-selected);
    }

    .progress-area:has(.selected)[b-9ebqw2158t]  .nav-link {
        border-color: var(--color-selected);
    }
/*#endregion progress-area */


/*#region pointer-arrow*/
.pointer-arrow[b-9ebqw2158t] {
    transition: rotate 0.25s;
    display: grid;
    place-items: center;
}

    .pointer-arrow i[b-9ebqw2158t] {
        color: var(--arrow-color);
        -webkit-text-stroke: var(--arrow-stroke-width) var(--stroke-color);
        font-size: var(--icon-size);
        transition: rotate 0.25s;
        cursor: pointer;
    }

.certificate-creation-dashboard:has(.data-area .selected) .pointer-arrow[b-9ebqw2158t] {
    rotate: var(--icon-data-angle);
}

.certificate-creation-dashboard:has(.result-area .selected) .pointer-arrow[b-9ebqw2158t] {
    rotate: var(--icon-result-angle);
}
/*#endregion single arrow*/


/*#region essentials*/
.essentials-area[b-9ebqw2158t] {
    display: grid; 
    align-items: center;
}
/*#endregion essentials*/


/*#region progress ring*/
[b-9ebqw2158t] .progress-ring.progress-ring-properties {
    --size: var(--progress-ring-size);
    --font-size: 1.6rem;
    --completed-mark-size: calc(var(--font-size) * 1.75);
    --stroke-width: var(--stroke-width);
    --stroke-color: var(--greencolor);
    --background-color: var(--app-active-bgcolor);
    --completed-bgcolor: var(--greencolor);
    --font-weight: bold;
    --font-family: RobotoMono;
    --color: var(--app-color);
    --animation-duration: 0.5s;
    --completed-animation-delay: calc(var(--animation-duration) * 1.5);
}
/*#endregion progress ring*/


/*#region media*/
@media (width < 63rem) {
    .properties[b-9ebqw2158t] {
        --progress-ring-size: 5rem;
        --icon-result-angle: 270deg;
        --icon-data-angle: 90deg;
        --icon-size: 3rem;
    }

    [dir="rtl"] .properties[b-9ebqw2158t] {
        --icon-result-angle: 90deg;
        --icon-data-angle: 270deg;
    }

    [b-9ebqw2158t] .progress-ring.progress-ring-properties {
        --font-size: 1.4rem;
        --completed-mark-size: calc(var(--font-size) * 1.5);
    }

    :is([dir="ltr"], [dir="rtl"]) .certificate-creation-dashboard[b-9ebqw2158t] {
        --title-writing-mode: normal;
        border-inline-start-width: 0;
        border-radius: 0;
        zoom: clamp(0.9, calc(100svw / 30rem), 1);
    }

    .certificate-creation-dashboard[b-9ebqw2158t] {
        display: grid;
        padding-block: 0 0.5rem;
        padding-inline: 0rem;
        gap: 0;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: max-content max-content;
        grid-template-areas:
            "result arrow      data"
            "result essentials data";
    }

    .progress-area[b-9ebqw2158t] {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: min-content auto;
        grid-template-areas:
            "title"
            "nav-link";
        place-items: center;
        row-gap: 0.25rem;
    }
}
/*#endregion media*/
/* /Certificates/Components/CertificateCreationEssentials.razor.rz.scp.css */
.certificate-creation-essentials[b-bub6z2kife] {
    --off-color: var(--darkcolor);
    --on-color: var(--greencolor);
    --on-br-color: var(--orangecolor);
    --off-br-color: var(--darkcolor);
    --button-bgcolor: var(--app-black-color);
    --button-disabled-bgcolor: var(--app-black-color);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    background-color: var(--app-header-bgcolor);
    gap: 0.75rem;
}

button[b-bub6z2kife] {
    font-size: 1.2rem;
    width: 2.5rem;
    aspect-ratio: 1;
    border-radius: 4rem;
    place-self: center;
    border: 2px solid var(--off-br-color);
    color: var(--off-color);
    background-color: var(--button-bgcolor);
}

    button[data-is-set][b-bub6z2kife] {
        color: var(--on-color);
        border-color: var(--on-br-color);
    }

    button:disabled[b-bub6z2kife] {
        background-color: var(--button-disabled-bgcolor);
        opacity: 0.5;
    }

.driver[b-bub6z2kife] {
    grid-area: driver;
}

.location[b-bub6z2kife] {
    grid-area: location;
}

button i[b-bub6z2kife] {
    animation: iconAnimation-b-bub6z2kife 1s 0s normal forwards;
}

button[data-is-running] i[b-bub6z2kife] {
    -webkit-text-stroke: 1px var(--app-color);
}

@keyframes iconAnimation-b-bub6z2kife {
    0% {
        transform: scaleX(1);
    }
    25% {
        transform: scaleX(0);
    }
    50% {
        transform: scaleX(-1);
    }
    75% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}
/* /Certificates/Components/CertificateDataItem.razor.rz.scp.css */
.certificate-data-item[b-8pcqbz1cfv] {
    container: certificate-data-item-container / inline-size;
}

.certificate-data-item-content[b-8pcqbz1cfv] {
    display: grid;
    background-color: var(--app-active-bgcolor);
    place-content: stretch;
}

[b-8pcqbz1cfv] .new-option-button {
    --color2: var(--app-highlight-color);
    --color1: transparent;
    width: var(--expandable-button-width);
    height: 100%;
}

[b-8pcqbz1cfv] .data-item-options-popover {
    inset-block-end: calc(anchor(start) + 0.25rem);
    inset-inline-end: anchor(end);
    background: var(--app-header-bgcolor);
    padding-block: 0.25rem;
    padding-inline: 0.25rem;
    border-radius: 0.5rem;
    border: 2px solid var(--app-black-color);
}

    [b-8pcqbz1cfv] .data-item-options-popover::backdrop {
        background: var(--app-window-backdrop-color);
    }



[b-8pcqbz1cfv] .dataitem-remove-approval-popover {
    inset-block-start: calc(anchor(end) + 0.25rem);
    inset-inline-end: anchor(end);
    background-color: var(--app-content-bgcolor);
    padding-block: 0.5rem;
    padding-inline: 0.5rem;
    border: 2px solid var(--redcolor);
    border-radius: 0.5rem;
}

    [b-8pcqbz1cfv] .dataitem-remove-approval-popover::backdrop {
        background: var(--app-window-backdrop-color);
    }

[b-8pcqbz1cfv] .expandable-properties {
    --header-bgcolor: var(--app-header-bgcolor);
    --header-color: var(--app-color);
    --header-padding: 0.5rem 1rem;
    --header-content-gap: 1.25rem;
    --header-font-size: 1.25rem;
    --content-bgcolor: var(--app-header-bgcolor);
    --border-color: var(--app-black-color);
    --border-width: 3px;
    --border-radius: 0.5rem;
    --caret-color: var(--app-highlight-color);
    --caret-border-color: var(--app-black-color);
    --caret-width: 3rem;
    --indicator-size: calc(1.5 * var(--header-font-size));
    --indicator-brcolor: var(--app-highlight-color);
    --indicator-bgcolor: transparent;
    --indicator-marked-brcolor: var(--greencolor);
    --indicator-marked-bgcolor: var(--greencolor);
    --indicator-color: var(--whitecolor);
    --transition-duration: 0.35s;
}

[data-disabled][b-8pcqbz1cfv]  .expandable-properties {
    --header-bgcolor: var(--darkgraycolor);
    --header-color: var(--mediumgraycolor);
    
    .expandable-header {
        cursor: default;
    }
}


@container certificate-data-item-container (width < 40rem) {
    [b-8pcqbz1cfv] .expandable.expandable-properties {
        --header-padding: 0.5rem 0.25rem;
        --header-content-gap: 0.5rem;
        --header-font-size: 1.2rem;
        --border-width: 3px;
        --border-radius: 0.5rem;
        --caret-width: 2.5rem;
        --indicator-size: calc(1.25 * var(--header-font-size));
    }
}
/* /Certificates/Components/CertificateProgressBadge.razor.rz.scp.css */
.certificate-progress-badge[b-5g7krwpdrz] {
    color: var(--app-color);
    line-height: 1;
}

.certificate-progress-badge[data-state="IsCompleted"][b-5g7krwpdrz] {
    background-color: var(--redcolor);
}

.certificate-progress-badge[data-state="IsNotStarted"][b-5g7krwpdrz] {
    background-color: var(--greencolor);
}

.certificate-progress-badge[data-state="IsInProgress"][b-5g7krwpdrz] {
    background-color: var(--orangecolor);
}
/* /Certificates/Components/CertificateTimesComponent.razor.rz.scp.css */
.certificate-times-component[b-ljm4hwa94l] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.1em;
    font-size: 1.25rem;
    padding-block: 1rem 0.75rem;
    padding-inline: 0.5rem;
    line-height: normal;
    background-color: var(--app-content-bgcolor);
}

.times-title[b-ljm4hwa94l] {
    color: var(--header-color);
}

[b-ljm4hwa94l] .times-clock {
    direction: ltr;
    font-family: RobotoMono;
    font-size: 1em;
}

@media (width < 32rem) {
    .certificate-times-component[b-ljm4hwa94l] {
        font-size: 1rem;
    }
}
/* /Certificates/Components/Collections/CertificateCardList.razor.rz.scp.css */
.certificate-list-container[b-2gm33muwcl] {
    container-type: inline-size;
}

[b-2gm33muwcl] .certificate-list {
    display: grid;
    grid-template-columns: 1fr min-content max-content;
    grid-auto-rows: auto;
    row-gap: 1rem;
    padding-inline: 2rem;
    list-style-type: none;
}

[b-2gm33muwcl] .certificate-card-list-item {
    display: grid;
    --items-gap: 1rem;
    background-color: var(--blackcolor);
    grid-column: -1 / 1;
    grid-template-rows: auto 1fr;
    grid-template-columns: subgrid;
    grid-template-areas:
        "title title title"
        "data seperator result";
    padding-block: 0.5rem;
    padding-inline: 0.5rem;
    border-radius: 0.35rem;
    transition: background-color 0.5s ease;
}

    [b-2gm33muwcl] .certificate-card-list-item:hover {
        cursor: pointer;
        background-color: var(--app-black-color);
    }

.seperator[b-2gm33muwcl] {
    grid-area: seperator;
    width: 1px;
    margin-block: 0rem;
    margin-inline: 0.5rem;
    background: linear-gradient( 0deg, transparent, var(--app-highlight-color), transparent);
}

.certificate-title[b-2gm33muwcl] {
    grid-area: title;
    position: relative;
    color: var(--app-highlight-color);
    text-align: center;
    margin-block-end: 0.5rem;
    font-weight: bolder;
}

    .certificate-title[b-2gm33muwcl]::after {
        content: "";
        inset-block-end: 0;
        position: relative;
        display: block;
        margin-block-start: 0.5rem;
        background: linear-gradient( 90deg, transparent, var(--app-highlight-color), transparent);
        height: 1px;
    }

.certificate-data[b-2gm33muwcl] {
    grid-area: data;
    display: grid;
    grid-auto-rows: auto;
    gap: var(--items-gap);
}

.certificate-result[b-2gm33muwcl] {
    grid-area: result;
    display: grid;
    grid-auto-rows: min-content;
    gap: var(--items-gap);
}

.certificate-item[b-2gm33muwcl] {
    display: grid;
    grid-template-rows: min-content auto;
    color: var(--lightgraycolor);
}

    .certificate-item .content[b-2gm33muwcl] {
        display: inline-flex;
        flex-flow: row wrap;
        align-items: baseline;
        gap: 0.25em;
    }

    .certificate-item h6[b-2gm33muwcl] {
        font-size: 0.9em;
        color: var(--app-highlight-color);
    }

    .certificate-item a[b-2gm33muwcl] {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-decoration-color: var(--app-highlight-color);
    }

        .certificate-item a i[b-2gm33muwcl] {
            font-size: 0.8rem;
            color: var(--whitefogcolor);
        }

    .certificate-item[data-weight-record] h6[b-2gm33muwcl]:after {
        content: " ●";
        color: var(--redcolor);
    }

    .certificate-item[data-weight-record] .weight-record-date[b-2gm33muwcl] {
        display: block;
    }

.drivers[b-2gm33muwcl] {
    display: flex;
    flex-flow: row wrap;

    & a {
        position: relative;
    }

        & a:not(:last-child)[b-2gm33muwcl]::after {
            display: inline-block;
            position: relative;
            content: ", ";
            white-space: pre;
        }
}

.data-duration[b-2gm33muwcl] {
    display: flex;
    flex-direction: column;
}

.weight-value[b-2gm33muwcl] {
    direction: ltr;
    display: flex;
    gap: 0.2em;
    align-items: baseline;
    justify-self: start;
}

    .weight-value .units[b-2gm33muwcl] {
        font-size: 0.8em;
    }

.weight-record-date[b-2gm33muwcl] {
    display: none;
    font-size: 0.6em;
    color: var(--redcolor);
}

@container (width < 34rem) {
    [b-2gm33muwcl] .certificate-list {
        grid-template-columns: 1fr min-content auto;
        padding-inline: 0.5rem;
        row-gap: 1rem;
    }

    [b-2gm33muwcl] .certificate-card-list-item:nth-child(2) {
        margin-block-start: -0.5rem;
    }
}
/* /Certificates/Components/Collections/CertificateTable.razor.rz.scp.css */
[b-iobacqrk3k] .table.certificate-table {
    /*header*/
    --header-box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 1);
    --th-bg-color: var(--app-black-color);
    --th-color: var(--app-highlight-color);
    --th-padding: 1rem 0.5rem;
    /*row*/
    --tr-bg-color1: var(--app-table-row-bgcolor);
    --tr-bg-color2: var(--app-table-row-bgcolor);
    --tr-color: var(--app-table-row-color);
    --tr-hover-bg-color: var(--app-table-row-hover-bgcolor);
    --tr-hover-color: var(--app-highlight-color);
    --td-padding: 2rem 0px;
    /*lines*/
    --horizontal-lines-width: 0px;
    --vertical-lines-width: 0px;
    --lines-color: var(--app-black-color);
    /*selected*/
    --tr-selected-outline-color: var(--app-highlight-color);
    --tr-selected-outline-width: 3px;
    --tr-selected-color: var(--app-theme-color);
}

.vertical[b-iobacqrk3k] {
    display: grid;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    gap: 0.1rem;
}

[b-iobacqrk3k] .truck-id {
    justify-self: center;
}


[b-iobacqrk3k] .date-time{
    display: grid;
    grid-auto-rows: auto;
    grid-auto-flow: row;
}

.weight-value[b-iobacqrk3k] {
    direction: ltr;
    display: flex;
    justify-content: center;
    gap: 0.2em;
    align-items: baseline;
}

    .weight-value .units[b-iobacqrk3k] {
        font-size: 0.8em;
    }
/* /Certificates/Components/Filter/FilterChipPane.razor.rz.scp.css */
.filter-cheap-pane[b-n79smdx9dg] {
    width: max-content;
}

.filter-cheap-list[b-n79smdx9dg] {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 0.5rem;
    user-select: none;
}

.filter-cheap[b-n79smdx9dg] {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr max-content;
    grid-template-rows: 1fr;
    grid-auto-flow: row;
    background: var(--app-black-color);
    border: 2px solid var(--darkcolor);
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    align-items: center;
    transition: 0.5s border-color;
}

    .filter-cheap[data-in-use][b-n79smdx9dg] {
        border-color: var(--greencolor);
    }

.filter-cheap-subject[b-n79smdx9dg] {
    color: var(--app-theme-color);
    text-wrap: nowrap;
}

.filter-cheap-icon[b-n79smdx9dg] {
    justify-self: end;
    color: var(--darkgraycolor);
}

    .filter-cheap-icon[data-is-open][b-n79smdx9dg] {
        color: var(--greencolor);
    }
/* /Certificates/Components/Filter/FilterSubject.razor.rz.scp.css */
.filter-subject[b-jjojeubg43] {
    display: block;
    line-height: 1;
}

fieldset[b-jjojeubg43] {
    background-color: rgb(from var(--app-layout-bgcolor) r g b / 1);
    padding-block: 0rem 1rem;
    padding-inline: 0.5rem;
    border: 3px solid var(--app-black-color);
    border-radius: 0.5rem;
    display: grid;
    row-gap: 2rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header"
        "inputs";

    .filter-subject-header {
        grid-area: header;
        line-height: 1;
        display: flex;
        gap: 1rem;
        flex-flow: row nowrap;
        align-self: center;
        align-items: center;
        justify-self: end;
    }

    .filter-subject-inputs[b-jjojeubg43] {
        grid-area: inputs;
        display: grid;
        grid-auto-rows: auto;
        gap: 1rem;
    }
}

    fieldset[data-in-use][b-jjojeubg43] {
        border-color: var(--greencolor);
    }

    fieldset legend[b-jjojeubg43] {
        margin-inline: auto;
        padding-inline: 0.0rem;
        color: var(--app-theme-color);
    }



.close-button[b-jjojeubg43] {
    font-size: 1.3rem;
    color: var(--app-theme-color);
    cursor: pointer;
}

.clear-button[b-jjojeubg43] {
    font-size: 0.9rem;
    color: var(--app-theme-color);
    cursor: pointer;
}



/* /Certificates/Components/Filter/FilterSubjectList.razor.rz.scp.css */
ul.filter-subject-list[b-hky9bpci43] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(25rem, 100%), 1fr));
    grid-auto-rows: auto;
    gap: 1rem;
    overflow-y: auto;
}

li[b-hky9bpci43] {
    --transition-duration: 0.5s;
    display: none;
    opacity: 0;
    transition: opacity var(--transition-duration), display var(--transition-duration) allow-discrete;
}

    li:has([data-is-open])[b-hky9bpci43] {
        --transition-duration: 1s;
        display: block;
        opacity: 1;

        @starting-style {
            opacity: 0;
        }
    }
/* /Certificates/Components/Templates/CertCardTemplate.razor.rz.scp.css */
.cert-card-template[b-awgf2k3g7y] {
    container-name: cert-card-template-container;
    container-type: inline-size;
    --title-color: var(--orangecolor);
    --title-page-color: var(--app-highlight-color);
    --title-bottom-brcolor: var(--app-highlight-color);
    --property-icon-color: var(--app-theme-color);
}

.cert-card-template-grid[b-awgf2k3g7y] {
    line-height: 1.15;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "stack";
    padding-block: 1rem;
    padding-inline: 1rem;
}

    .cert-card-template-grid .background-icon[b-awgf2k3g7y] {
        grid-area: stack;
        font-size: 7rem;
        place-self: center end;
        opacity: 0.18;
    }

    .cert-card-template-grid .content[b-awgf2k3g7y] {
        grid-area: stack;
        display: grid;
        grid-template-columns: auto auto 1fr;
        grid-auto-rows: auto;
        row-gap: 1rem;
        column-gap: 1rem;
        overflow: hidden;
    }


[b-awgf2k3g7y] .content-grid-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-flow: column;
    grid-column: 1 / -1;
    width: 100%;
    overflow: hidden;
}

[b-awgf2k3g7y] .content-grid-row > span.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-awgf2k3g7y] .content-grid-row span[data-icon] {
    color: var(--app-theme-color);
}

[b-awgf2k3g7y] .content-grid-row span[data-property] {
    color: var(--app-highlight-color);
    white-space: nowrap;
}

[b-awgf2k3g7y] .content-grid-row span[data-value] {
    color: var(--app-color);
}

    [b-awgf2k3g7y] .content-grid-row span[data-value] a {
        color: var(--orangecolor);
        text-decoration: underline;
    }

[b-awgf2k3g7y] .phone-value {
    justify-self: start;
}

@container cert-card-template-container (width < 31rem) {
    .cert-card-template-grid[b-awgf2k3g7y] {
        padding-block: 0.75rem;
        padding-inline: 0.5rem;
    }

        .cert-card-template-grid .content[b-awgf2k3g7y] {
            row-gap: 1rem;
            column-gap: 0.5rem;
        }
}
/* /Certificates/Layouts/CertificateCreationLayout.razor.rz.scp.css */
/* #region properties*/
.properties[b-kg0dbrjdwx] {
    --page-bg-color: var(--app-window-backdrop-color);
    --header-bgcolor: var(--app-page-header-bgcolor);
    --header-color: var(--greencolor);
    --direction: -1;
}

[dir="rtl"] .properties[b-kg0dbrjdwx] {
    --direction: 1;
}
/* #endregion properties*/


.certificate-creation-layout[b-kg0dbrjdwx] {
    background-color: var(--page-bg-color);
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-rows: min-content min-content 1fr;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "header header"
        "times times"
        "main dashboard";
    backdrop-filter: blur(1.125rem);
}


/* #region certificate-creation-header */
.certificate-creation-header[b-kg0dbrjdwx] {
    grid-area: header;
    background-color: var(--header-bgcolor);
    padding-block: 0.5rem;
    padding-inline: 0.5rem;
    box-shadow: var(--app-box-shadow-top-bar);
    gap: 0.25rem;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    grid-template-areas: "title buttons";
    align-items: center;
}

.header-title[b-kg0dbrjdwx] {
    --gradient-angle: 90deg;
    grid-area: title;
    line-height: 1;
    font-weight: bold;
}

    .header-title > span[b-kg0dbrjdwx] {
        background: linear-gradient(var(--gradient-angle), var(--greencolor), var(--bluecolor));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

[dir="rtl"] .header-title > span[b-kg0dbrjdwx] {
    --gradient-angle: 270deg;
}

.header-buttons[b-kg0dbrjdwx] {
    grid-area: buttons;
    display: grid;
    grid-auto-columns: auto;
    grid-auto-flow: column;
    grid-template-rows: 1fr;
    gap: 1rem;
    justify-items: end;
}

[b-kg0dbrjdwx] .layout-options-popover {
    width: max-content;
    inset-inline-end: anchor(end);
    inset-block-start: calc(anchor(end) + 0.25rem);
    background-color: var(--app-content-bgcolor);
    padding: 0.25rem;
    border-radius: 0.5rem;
    box-shadow: var(--app-box-shadow-top-bar);
}

    [b-kg0dbrjdwx] .layout-options-popover::backdrop {
        background-color: var(--app-window-backdrop-color);
    }
/* #endregion certificate-creation-header*/


.certificate-creation-times[b-kg0dbrjdwx] {
    grid-area: times;
}


.certificate-creation-dashboard[b-kg0dbrjdwx] {
    grid-area: dashboard;
}


.certificate-creation-main[b-kg0dbrjdwx] {
    grid-area: main;
    height: 100%;
    overflow-y: auto;
    display: grid;
    grid-template-rows: auto min-content;
    grid-template-columns: 1fr;
    grid-template-areas:
        "body"
        "completion-options";

    .body {
        grid-area: body;
    }

    .completion-options[b-kg0dbrjdwx] {
        display: none;
        grid-area: completion-options;
        display: grid;
        justify-items: center;
    }

        .completion-options:has(.certificate-completion-options)[b-kg0dbrjdwx] {
            display: grid;
            margin-inline: 0.25rem;
            margin-block-start: 1rem;
            margin-block-end: 2rem;
        }
}


/* #region media */
@media (width < 63rem) {
    .certificate-creation-layout[b-kg0dbrjdwx] {
        grid-template-rows: min-content min-content min-content 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "times"
            "dashboard"
            "main";
    }

    .header-title[b-kg0dbrjdwx] {
        font-size: 1.6rem;
    }

    .header-buttons[b-kg0dbrjdwx] {
        gap: 0.25rem;
    }

    [b-kg0dbrjdwx] .header-button-style {
        --icon-size: 1.25rem;
        height: 2.75rem;
        width: 2.75rem;
    }
}
/* #endregion */
/* /Certificates/Modals/CertificateCreationPreperationModal.razor.rz.scp.css */
.certificate-creation-preperation-modal[b-dsjoarb2cj] {
    display: grid;
    place-items: center;
}

.certificate-creation-preperation-grid[b-dsjoarb2cj] {
    background-color: rgb(from var(--app-black-color) r g b / 0.90);
    width: min(30rem, 98%);
    border-radius: 0.5rem;
    display: grid;
    grid-template-areas:
        "header"
        "main";
    font-size: 1.25rem;
    overflow: hidden;

    &[data-closing] {
        animation: fade-b-dsjoarb2cj var(--animation-duration) ease normal forwards;
    }
}

@keyframes fade-b-dsjoarb2cj {
    to {
        opacity: 0;
    }
}

header[b-dsjoarb2cj] {
    grid-area: header;
    display: grid;
    grid-auto-rows: min-content;

    .messages {
        display: inline-block;
        padding-block-start: 1rem;
        text-align: center;
        color: var(--app-highlight-color);
    }
}


main[b-dsjoarb2cj] {
    grid-area: main;
    padding-block: 2rem;
    padding-inline: 2rem;
}

ul.check-list[b-dsjoarb2cj] {
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    grid-auto-rows: auto;
    column-gap: 1rem;
    row-gap: 1.5rem;

    li {
        display: grid;
        grid-column: 1/ -1;
        grid-template-columns: subgrid;
        grid-auto-flow: row;
        align-items: center;
        padding-inline: 0.5rem;
        padding-block: 0.25rem;
        border-radius: 3rem;
        outline-offset: 0.25rem;
        outline: 2px transparent dashed;
        transition: outline-color 0.25s;
    }

        li[data-status="run" i][b-dsjoarb2cj] {
            outline-color: var(--greencolor);
        }

        li[data-status="fail" i] .check[b-dsjoarb2cj] {
            color: var(--redcolor);
        }

        li[data-status="success" i] .check[b-dsjoarb2cj] {
            color: var(--greencolor);
        }

    .icon[b-dsjoarb2cj] {
        color: var(--app-highlight-color);
        justify-self: center;
    }

    .item-title[b-dsjoarb2cj] {
        color: var(--app-theme-color);
    }

    .check[b-dsjoarb2cj] {
        color: transparent;
        transition: 0.25s color;
        zoom: 1.25;
    }
}


[b-dsjoarb2cj] .loading-bar.loading-bar-properties {
    --loading-bar-height: 2px;
    --track-color: transparent;
    --motion-color: var(--bluecolor);
    --duration: 1.25s;
    --alternate: normal;
    --border-radius: 0rem;
    --padding-block: 0rem;
}

@media (width < 32rem) {
    .certificate-creation-preperation-grid[b-dsjoarb2cj] {
        zoom: 0.9;
    }
}
/* /Certificates/Modals/CertificatePreviewModal.razor.rz.scp.css */
.certificate-preview-modal[b-jx8cv3llt1] {
    background-color: #3c3c3cc3;
    height: 100svh;
    width: 100svw;
    overflow: auto;
    padding-block: 0.5rem;
    display: grid;
    align-content: start;
}

.modal-content[b-jx8cv3llt1] {
    justify-self: center;
    display: grid;
    grid-template-columns: min-content max-content;
    grid-template-rows: 1fr;
    grid-template-areas: "buttons certificate";
    gap: 0.5rem;
}

.certificate-a4-area[b-jx8cv3llt1] {
    grid-area: certificate;
    width: max-content;
    height: max-content;
}

    .certificate-a4-area[b-jx8cv3llt1]  .certificate-pdf-page {
        box-shadow: 0 0 8px 0px black;
    }

.buttons-area[b-jx8cv3llt1] {
    grid-area: buttons;
    position: sticky;
    inset-block-start: 0;
    inset-inline-start: 0;
    align-self: start;
    display: flex;
    justify-content: space-between;
    background-color: var(--whitecolor);
    box-shadow: 0 0 8px 0px black;
    border-radius: 0.25em;
    z-index: 1;
}

    .buttons-area[b-jx8cv3llt1]  .certificate-preview-modal-button {
        aspect-ratio: 1 /1;
        min-width: 2.6em;
        --icon-size: 1.5rem;
        --color1: var(--darkcolor);
        --color2: var(--app-highlight-color);
    }

.buttons[b-jx8cv3llt1] {
    padding: 0.5em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}


@media (width < 55rem) {
    .modal-content[b-jx8cv3llt1] {
        grid-template-rows: auto max-content;
        grid-template-columns: 1fr;
        grid-template-areas:
            "buttons"
            "certificate";
        align-self: start;
        gap: 0.25rem
    }

    .buttons-area[b-jx8cv3llt1] {
        width: max-content;
    }

        .buttons-area .buttons[b-jx8cv3llt1] {
            flex-direction: row;
        }
}

@media(width < 8.3in) {
    [b-jx8cv3llt1] .certificate-pdf-page[data-is-preview] {
        zoom: calc(100svw / 8.3in);
    }
}
/* /Certificates/Modals/CertificateScaleSelectionModal.razor.rz.scp.css */
.scale-selection-modal[b-cnif1xcp16] {
    background-color: var(--app-control-bgcolor);
    display: grid;
    grid-auto-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "table"
        "footer";
    width: 80%;
    max-height: 80%;
    margin: auto;
    padding-inline: 0.5rem;
    padding-block: 0.5rem;
    border-radius: 0.5rem;
}

header[b-cnif1xcp16] {
    display: flex;
    justify-content: space-between;
}

.table-container[b-cnif1xcp16] {
    overflow-y: scroll;
    overflow-x: hidden;
}

td[data-weight][b-cnif1xcp16] {
    text-align: end;
    padding-inline-end: 0.5rem;
    transform-origin: center right;
    transform: scale(1.4, 1.4);
}

[b-cnif1xcp16] .close-button-style {
    padding: 0.75rem;
    --icon-size: 1.25rem;
    width: min-content;
    aspect-ratio: 1;
}

[b-cnif1xcp16] .working-led {
    --neutral-color: transparent;
}

@media (width < 650px) {
    .scale-selection-modal[b-cnif1xcp16] {
        zoom: 0.9;
        width: 98%;
        max-height: 95%;
    }
}
/* /Certificates/Modals/ReportPreviewModal.razor.rz.scp.css */
.report-preview-modal[b-j4yfecqbtc] {
    height: 98vh;
    width: 98vw;
    place-self: center;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header"
        "main";
    border-radius: 0.5rem;
    overflow: hidden;
    isolation: isolate;
}

header[b-j4yfecqbtc] {
    grid-area: header;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    background-color: var(--app-header-bgcolor);
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.5rem;
    align-items: center;
    transition: 0.35s all;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 0.5);
}

    header[data-is-pdf-view][b-j4yfecqbtc] {
        background-color: var(--whitecolor);
        border-radius: 0.5rem;
    }

        header[data-is-pdf-view] .title[b-j4yfecqbtc] {
            color: var(--blackcolor);
        }

        header[data-is-pdf-view] .counter[b-j4yfecqbtc] {
            color: var(--whitecolor);
        }

.title-and-counter[b-j4yfecqbtc] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.title[b-j4yfecqbtc] {
    color: var(--bluecolor);
}

.counter[b-j4yfecqbtc] {
    background-color: var(--app-black-color);
    border-radius: 0.5rem;
    padding: 0.5rem;
    min-width: 3rem;
    text-align: center;
}

.header-buttons[b-j4yfecqbtc] {
    display: flex;
    gap: 0.5rem;
}

main[b-j4yfecqbtc] {
    z-index: 0;
    grid-area: main;
    display: grid;
    height: 100%;
    overflow-y: auto;
}

    main[data-is-pdf-view][b-j4yfecqbtc] {
        width: 100%;
        overflow-x: auto;
        padding-block: 0.5rem;
        padding-inline: 0.5rem;
        scrollbar-width: none;
        justify-items: center;
    }

.certificate-table-wrapper[b-j4yfecqbtc] {
    display: block;
}

.certificate-cardlist-wrapper[b-j4yfecqbtc] {
    display: none;
}

@media (width < 36rem) {
    .report-preview-modal[b-j4yfecqbtc] {
        height: 100svh;
        width: 100svw;
        border-radius: 0;
    }

    .report-preview-modal header[b-j4yfecqbtc] {
        border-radius: 0;
    }

    .certificate-table-wrapper[b-j4yfecqbtc] {
        display: none;
    }

    .certificate-cardlist-wrapper[b-j4yfecqbtc] {
        display: block;
    }
}
/* /Certificates/Pages/CertificateCreationDataPage.razor.rz.scp.css */
.certificate-creation-data-page[b-fwwuu1g77s] {
    height: 100%;
}

.apear-animation[b-fwwuu1g77s] {
    opacity: 0;
    animation: appear-b-fwwuu1g77s 0.5s ease forwards;
}

@keyframes appear-b-fwwuu1g77s {
    to {
        opacity: 1;
    }
}

ul[b-fwwuu1g77s] {
    padding-block: 1rem 1rem;
    padding-inline: 0.5rem 0.5rem;
    counter-reset: li-counter;
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-auto-rows: auto;
    min-height: 100%;
    gap: 2rem;
}

li[b-fwwuu1g77s] {
    position: relative;
    display: grid;
    align-content: center;
    grid-column: 1 / span 2;
    grid-template-columns: subgrid;
    grid-template-rows: min-content min-content;
    grid-template-areas:
        "title   title     "
        "counter data-item";
    counter-increment: li-counter;
    row-gap: 0.5rem;
    column-gap: 0.1rem;
}

    li > .data-item-title[b-fwwuu1g77s] {
        grid-area: title;
        line-height: 1;
        color: var(--app-theme-color);
        margin-inline-start: 0rem;
    }

    li[b-fwwuu1g77s] >  div {
        width: 100%;
        grid-area: data-item;
    }

    /* counter */
    li[b-fwwuu1g77s]::before {
        grid-area: counter;
        content: counter(li-counter);
        position: relative;
        background-color: var(--app-header-bgcolor);
        border-radius: 0.5rem;
        padding-inline: 0.5rem;
        border: 3px solid var(--app-black-color);
        display: grid;
        place-content: center;
        font-size: 1.25rem;
        color: var(--app-theme-color);
    }


@media (width < 31rem) {
    ul[b-fwwuu1g77s] {
        padding-block: 0.75rem;
        padding-inline: 0.25rem;
        gap: 1.25rem;
        grid-template-columns: 1fr;
        zoom: 0.9;
    }

    li[b-fwwuu1g77s] {
        gap: 0.25rem;
        grid-column: -1 / 1;
    }

        li[b-fwwuu1g77s]::before {
            font-size: 1.1rem /*1.25*/;
            content: none;
            display: none;
        }
}


/* /Certificates/Pages/CertificateCreationResultPage.razor.rz.scp.css */
.certificate-creation-result-page[b-afj8fmjqj0] {
    --large-font-size: 1.6rem;
    --medium-font-size: 1.3rem;
    --small-font-size: 1.1rem;
    --direction: -1;
    container-name: certificate-result-page-container;
    container-type: inline-size;
}

[dir="rtl"] .certificate-creation-result-page[b-afj8fmjqj0] {
    --direction: 1;
}

.certificate-creation-result-grid[b-afj8fmjqj0] {
    display: grid;
    grid-template-rows: 0fr repeat(3, auto);
    grid-template-columns: 1fr;
    grid-template-areas:
        "scale"
        "weight-entries"
        "net-weight"
        "main-buttons";
    transition: grid-template-rows 0.25s ease;
    zoom: 1;
}

    .certificate-creation-result-grid > *[b-afj8fmjqj0] {
        overflow: hidden;
    }

    .certificate-creation-result-grid[data-scale-selected][b-afj8fmjqj0] {
        grid-template-rows: 1fr repeat(3, auto);
    }

    .certificate-creation-result-grid.apear-animation[b-afj8fmjqj0] {
        opacity: 0;
        transform: translateY(-10%);
        animation: appear-b-afj8fmjqj0 0.4s ease forwards;
    }


@keyframes appear-b-afj8fmjqj0 {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scale-area[b-afj8fmjqj0] {
    grid-area: scale;
    pointer-events: none;
}

.weight-entries[b-afj8fmjqj0] {
    grid-area: weight-entries;
}

ul[b-afj8fmjqj0] {
    display: grid;
    grid-template-columns: repeat(4, max-content) 1fr max-content;
    grid-auto-rows: auto;
    row-gap: 2px;
}

li[b-afj8fmjqj0] {
    padding-block: 0.75rem;
    padding-inline: 1rem;
    min-height: 4rem;
    background-color: var(--greencolor);
    color: var(--whitecolor);
    line-height: 1;
    align-items: center;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-areas: "entry entry entry entry . button";
    animation: weighing-item-entrance-b-afj8fmjqj0 0.5s normal forwards ease;
}

    li:not([data-display-type]) .type[b-afj8fmjqj0] {
        display: none;
    }

@keyframes weighing-item-entrance-b-afj8fmjqj0 {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

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

.weight-entry-data[b-afj8fmjqj0] {
    grid-area: entry;
    display: grid;
    grid-template-columns: subgrid;
    line-height: 1;
    grid-auto-columns: auto;
    grid-auto-flow: column;
    align-items: last baseline;
    gap: min(3cqw, 1.5rem);
}

    .weight-entry-data .weight-unit-wrapper[b-afj8fmjqj0] {
        direction: ltr;
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        align-items: baseline;
        gap: 2px;
    }

        .weight-entry-data .weight-unit-wrapper .weight[b-afj8fmjqj0] {
            font-size: var(--large-font-size);
        }

        .weight-entry-data .weight-unit-wrapper .units[b-afj8fmjqj0] {
            font-size: var(--small-font-size);
        }


    .weight-entry-data .type[b-afj8fmjqj0] {
        line-height: 1;
        background-color: var(--whitecolor);
        color: darkgreen;
        text-align: center;
        padding-block: 0.1rem;
        padding-inline: 0.2rem;
        border-radius: 0.25rem;
        border: 2px solid darkgreen;
        font-size: var(--medium-font-size);
    }

    .weight-entry-data .time-date-wrapper[b-afj8fmjqj0] {
        display: grid;
        grid-auto-rows: min-content;

        .time {
            font-size: var(--small-font-size);
        }

        .weight-record-date[b-afj8fmjqj0] {
            color: var(--whitecolor);
            width: min-content;
            background-color: var(--redcolor);
            padding-block: 0.1rem;
            padding-inline: 0.1rem;
            line-height: 1;
            border-radius: 0.25rem;
            font-size: calc(var(--small-font-size) * 0.8);
            justify-self: right;
        }
    }

    .weight-entry-data[b-afj8fmjqj0]  button.info {
        width: max-content;
        height: max-content;
        padding-block: 0.25rem;
        padding-inline: 0.25rem;
        line-height: 1;
        font-size: 1rem;
        font-size: var(--small-font-size);
    }


li[b-afj8fmjqj0]  .remove-entry-button {
    grid-area: button;
    padding-block: 0.5rem;
    padding-inline: 0.5rem;
    font-size: var(--small-font-size);
    --icon-size: 1em;
}


.net-weight[b-afj8fmjqj0] {
    display: inline-grid;
    user-select: none;
    grid-auto-flow: row;
    direction: ltr;
    place-items: center;
    transform: scale(0);
    opacity: 0;
    line-height: 1;
    margin-block: 1rem;
    background: var(--blackcolor);
    padding-inline: 1.5rem;
    padding-block: 0.5rem 0.75rem;
    border-radius: 10rem;
    border: 3px solid var(--greencolor);
    color: var(--app-theme-color);
    justify-self: center;
    align-items: baseline;
    row-gap: 0.5rem;
}

    .net-weight[data-show-net-weight][b-afj8fmjqj0] {
        animation: net-weight-entrance-b-afj8fmjqj0 0.5s 0.5s ease-out normal forwards;
    }

    .net-weight .weight-unit-flex[b-afj8fmjqj0] {
        display: flex;
        flex-flow: row nowrap;
        align-items: baseline;
        width: max-content;
        gap: 0.25rem;
    }

    .net-weight .weight[b-afj8fmjqj0] {
        font-size: 2.3rem;
    }

    .net-weight .units[b-afj8fmjqj0] {
        font-size: 1.8rem;
    }

    .net-weight .duration[b-afj8fmjqj0] {
        font-size: 1.0rem;
    }

@keyframes net-weight-entrance-b-afj8fmjqj0 {
    70% {
        transform: scale(1.1);
        opacity: 1;
    }

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

.main-buttons[b-afj8fmjqj0] {
    grid-area: main-buttons;
    justify-self: center;
    display: grid;
    border-radius: 0.5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "weight"
        "scale-buttons";
    padding-block: 0.5rem;
    padding-inline: 0.5rem;
    gap: 0.25rem;
}


.scale-buttons[b-afj8fmjqj0] {
    display: grid;
    grid-area: scale-buttons;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-flow: row;
    padding-block: 0.5rem;
    padding-inline: 0.5rem;
    gap: 0.5rem;
    border-radius: 0.5rem;
    border: 0.2rem solid var(--greencolor);
}

    .scale-buttons legend[b-afj8fmjqj0] {
        margin-inline: auto;
        padding-inline: 0.25rem;
        color: var(--app-color);
    }

.main-buttons[b-afj8fmjqj0]  .weight-button {
    --color2: var(--app-color);
    height: 100%;
    grid-area: weight;
}

/* #region popovers */

[b-afj8fmjqj0] .weight-entry-remove-approval-popover {
    inset-block-start: calc(anchor(end) + 0.25rem);
    inset-inline-end: anchor(end);
    padding-inline: 0.5rem;
    padding-block: 0.5rem;
    color: var(--app-color);
    background-color: var(--app-control-bgcolor);
    border-radius: 0.5rem;
    border: 2px solid var(--redcolor);
}

    [b-afj8fmjqj0] .weight-entry-remove-approval-popover::backdrop {
        background-color: var(--app-window-backdrop-color);
    }


[b-afj8fmjqj0] .weight-entry-metadata-popover {
    inset-block-start: anchor(start);
    inset-inline-start: calc(anchor(end) + 0.25rem);
    border-radius: 0.5rem;
    height: max-content;
    width: 18rem;
    background-color: var(--app-control-bgcolor);
    border: 2px solid var(--app-highlight-color);
    box-shadow: 0 0 1rem -0.5rem rgb(0 0 0 /0.5);
    position-try-fallbacks: --below-center, --above-center;
}

    [b-afj8fmjqj0] .weight-entry-metadata-popover::backdrop {
        background-color: var(--app-window-backdrop-color);
    }

@position-try --below-center {
    inset-block-start: calc(anchor(end) + 0.25rem);
    inset-inline: unset;
    justify-self: anchor-center;
}

@position-try --above-center {
    inset-block-start: unset;
    inset-block-end: calc(anchor(start) + 0.25rem);
    inset-inline: unset;
    justify-self: anchor-center;
}

/* #endregion*/



@container certificate-result-page-container (width < 31rem) {
    .certificate-creation-result-grid[b-afj8fmjqj0] {
        zoom: 0.9;
    }

    li[b-afj8fmjqj0] {
        --large-font-size: 1.4rem;
        --medium-font-size: 1.2rem;
        --small-font-size: 1rem;
        padding-inline: 0.25rem;
        padding-block: 0.5rem;
    }
}
/* /Certificates/Pages/ReportPage.razor.rz.scp.css */
.report-page-container[b-igxrnui4mo] {
    container-name: report-page;
    container-type: inline-size;
    height: 100%;
    line-height: 1;
}

.report-page[b-igxrnui4mo] {
    height: 100%;
    backdrop-filter: blur(1.125rem);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header"
        "main";
}

.report-header[b-igxrnui4mo] {
    grid-area: header;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    grid-template-areas:
        "title slider buttons";
    background-color: var(--app-page-header-bgcolor);
    padding-block: 1.25rem 0.5rem;
    padding-inline: 0.5rem;
    align-items: center;
    z-index: 1;
    box-shadow: 0 1px 8px 0px rgb(0 0 0 / 1);
}

.header-title[b-igxrnui4mo] {
    grid-area: title;
    display: flex;
    gap: 0.5rem;
    align-items: baseline;

    h3 {
        color: var(--bluecolor);
    }

    .counter[b-igxrnui4mo] {
        display: inline-block;
        color: var(--app-theme-color);
        background-color: var(--app-black-color);
        padding: 0.25rem 0.5rem;
        border-radius: 0.5rem;
        border: 2px solid var(--bluecolor);
        text-align: center;
        min-width: 4ch;
    }
}

.header-slider[b-igxrnui4mo] {
    display: grid;
    grid-template-rows: max-content 1fr;
    align-items: center;
    gap: 0rem;

    span {
        justify-self: center;
        display: inline-block;
        margin-block-end: 0.25rem;
        color: var(--bluecolor);
    }
}

.header-buttons[b-igxrnui4mo] {
    grid-area: buttons;
    display: flex;
    gap: 0.5rem;
}

.report-main[b-igxrnui4mo] {
    grid-area: main;
    display: grid;
    overflow: hidden;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
    grid-template-areas:
        "subject-list cheap-pane";
}

.subject-list-wrapper[b-igxrnui4mo] {
    grid-area: subject-list;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding: 1rem;
}

.cheap-pane-wrapper[b-igxrnui4mo] {
    grid-area: cheap-pane;
    width: 100%;
    background-color: var(--app-layout-bgcolor);
    padding: 0.5rem;
    height: max-content;
}

.footer[b-igxrnui4mo] {
    display: none;
    background-color: var(--app-page-header-bgcolor);
    grid-template-rows: max-content 1fr;
    align-items: center;
    gap: 0rem;
    padding-block: 0.5rem 1rem;
    z-index: 1;
    box-shadow: 0 -1px 8px 0px rgb(0 0 0 / 1);
    padding-inline: 0.5rem;

    span {
        justify-self: center;
        display: inline-block;
        margin-block-end: 0.25rem;
        color: var(--bluecolor);
    }
}

@container report-page (width < 50rem) {
    .report-page[b-igxrnui4mo] {
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "header"
            "main"
            "footer";
    }

    .header-title[b-igxrnui4mo] {
        gap: 0.25rem;
    }

    .header-buttons[b-igxrnui4mo] {
        gap: 0.25rem;
    }

    .footer[b-igxrnui4mo] {
        display: grid;
    }

    .report-header[b-igxrnui4mo] {
        padding-block: 0.5rem 0.5rem;
        grid-template-columns: auto max-content;
        grid-template-rows: 1fr;
        grid-template-areas:
            "title buttons";
    }

    .header-slider[b-igxrnui4mo] {
        display: none;
    }

    .report-main[b-igxrnui4mo] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "cheap-pane"
            "subject-list";
    }

    .cheap-pane-wrapper[b-igxrnui4mo] {
        overflow-x: auto;
        padding: 0.5rem 0.5rem;
    }

    [b-igxrnui4mo] .filter-cheap-list {
        grid-auto-columns: auto;
        grid-template-rows: 1fr;
        grid-auto-flow: column;
    }
}
/* /Certificates/Popovers/DataItemOptionsPopover.razor.rz.scp.css */
.data-item-options-popover-content[b-estl1888i7] {
    display: grid;
    grid-auto-columns: min-content;
    grid-template-rows: 1fr;
    grid-auto-flow: column;
    column-gap: 0.75rem;
}
/* /Certificates/Popovers/DataItemRemoveApprovalPopover.razor.rz.scp.css */
.popover-content[b-lkj5tofth2] {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 1rem;
}
/* /Certificates/Popovers/LayoutOptionsPopover.razor.rz.scp.css */
.layout-options-list[b-8qmw6cd8ij] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-rows: auto;
    row-gap: 0.75rem;
    column-gap: 0.75rem;
    padding-block: 0.25rem;
    padding-inline: 0.25rem;
}

li[b-8qmw6cd8ij] {
    --main-color: var(--graycolor);
    --bg-color: var(--app-black-color);
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    padding-block: 0.5rem;
    padding-inline: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    color: var(--whitesmokecolor);
    border: 0.125rem solid var(--main-color);
    background-color: var(--bg-color);
    user-select: none;
    transition: 0.25s ease color;

    & i {
        color: var(--main-color);
        width: min-content;
    }
}

    li:hover[b-8qmw6cd8ij] {
        color: var(--main-color);
    }

    li:not([data-enabled])[b-8qmw6cd8ij] {
        --main-color: var(--lightgraycolor);
        --bg-color: var(--graycolor);
        color: var(--lightgraycolor);
        pointer-events: none;
    }

.set-as-driver[b-8qmw6cd8ij] {
    --main-color: var(--app-highlight-color);
}

.set-weight-record[b-8qmw6cd8ij] {
    --main-color: var(--app-highlight-color);
}

.load-last-data[b-8qmw6cd8ij] {
    --main-color: var(--app-highlight-color);
}

.clear-data[b-8qmw6cd8ij] {
    --main-color: var(--redcolor);
}

.restart[b-8qmw6cd8ij] {
    --main-color: var(--redcolor);
}

.save[b-8qmw6cd8ij] {
    --main-color: var(--greencolor);
}
/* /Certificates/Popovers/WeightEntryMetadataPopover.razor.rz.scp.css */
.weightentry-metadata[b-oew272dar3] {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    padding: 0.5rem;
    gap: 1rem;

    .metadata-item {
        display: grid;
        row-gap: 0.25rem;
        grid-template-rows: min-content min-content;
        color: var(--mediumgraycolor);
    }

    .metadata-item-title[b-oew272dar3] {
        color: var(--app-highlight-color);
    }
}
/* /Certificates/Popovers/WeightEntryRemoveApprovalPopover.razor.rz.scp.css */
.popover-content[b-mp5ghe1uwj] {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 1rem;
}

    .popover-content[b-mp5ghe1uwj]  button.button-properties {
        width: max-content;
        padding-inline: 0.5rem;
    }
/* /Components/Buttons/AnimatedButton.razor.rz.scp.css */
.animated-button[b-2nwzrl2cr3] {   
    --animation-direction-0: 200%;
    --animation-direction-100: -200%;
    --animation-angle: 120deg;
}

[dir="rtl"] .animated-button[b-2nwzrl2cr3] {
    --animation-direction-0: -200%;
    --animation-direction-100: 200%;
    --animation-angle: 60deg;
}

.animated-button[b-2nwzrl2cr3] {
    display: grid;
    background-color: var(--app-black-color);
    font-size: 1.1rem;
    place-content: center;
    cursor: pointer;
    user-select: none;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 2px solid var(--bluecolor);
    transition: border-color 0.25s;
    line-height: 1;
    margin: auto;
}

    .animated-button .glow[b-2nwzrl2cr3] {
        --glowcolor: var(--bluecolor);
        color: transparent;
        background: linear-gradient(var(--animation-angle), var(--glowcolor) 0%, var(--whitefogcolor) 15%, var(--whitefogcolor) 50%, var(--whitefogcolor) 85%, var(--glowcolor) 100%);
        background-size: 200% 100%;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: glow-animation-b-2nwzrl2cr3 4s linear infinite;
        animation-play-state: running;
    }

    .animated-button:hover[b-2nwzrl2cr3] {
        border-color: var(--app-highlight-color);
    }

        .animated-button:hover .text[b-2nwzrl2cr3] {
            animation: unset;
            color: var(--app-theme-color) !important;
            background: transparent;
            background-size: unset;
            background-clip: unset;
            -webkit-background-clip: unset;
            -webkit-text-fill-color: unset;
        }


@keyframes glow-animation-b-2nwzrl2cr3 {
    0% {
        background-position: var(--animation-direction-0) 0;
    }

    100% {
        background-position: var(--animation-direction-100) 0;
    }
}

@media (width < 34rem) {
    .animated-button[b-2nwzrl2cr3] {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
        margin-block: 0.75rem;
    }
}
/* /Components/Culture/CultureSelector.razor.rz.scp.css */
.culture-selector-properties[b-wo9e4ka6fo] {
    --background-color: var(--app-black-color);
    --selector-color: var(--app-theme-color);
    --selector-icon-color: var(--app-theme-color);
    --selector-icon-open-color: var(--app-highlight-color);
    --item-color: var(--app-theme-color);
    --item-hover-color: var(--app-highlight-transparent-color);
    --item-checkmark-outline-color: var(--app-theme-color);
    --item-checkmark-selected-bgcolor: var(--app-highlight-color);
    --transition-time: 0.1s;
    --br-radius: 0.5rem;
}


.culture-selector[b-wo9e4ka6fo] {
    position: relative;
    display: grid;
    line-height: 1;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header"
        "list";
}

.culture-selector-container:has(dialog[open])[b-wo9e4ka6fo] {
    --background-color: var(--background-color);
}

.internal-grid[b-wo9e4ka6fo] {
    display: grid;
    grid-template-columns: 1fr 1rem;
    grid-template-rows: 1fr;
    grid-auto-flow: row;
    padding-block: 0.75rem;
    padding-inline: 1rem;
    background-color: var(--background-color);
    color: var(--selector-color);
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

    .internal-grid i[b-wo9e4ka6fo] {
        place-self: center;
    }

.culture-selector-header[b-wo9e4ka6fo] {
    grid-area: header;
    border-radius: var(--br-radius);
}

[data-is-open] .culture-selector-header[b-wo9e4ka6fo] {
    border-radius: var(--br-radius) var(--br-radius) 0 0;

}

    [data-is-open] .culture-selector-header i[data-is-caret][b-wo9e4ka6fo] {
        transform: rotate(-180deg);
    }

dialog[b-wo9e4ka6fo] {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0%;
    width: 100%;
    opacity: 1;
    border-radius: 0 0 0.5rem 0.5rem;
    overflow: hidden;
    background-color: var(--background-color);
    border: none;
    transform-origin: top;
    padding-block-start: 1em;
}

ul[b-wo9e4ka6fo] {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    overflow-y: auto;
    gap: 0.5em;
}

    ul[b-wo9e4ka6fo]::-webkit-scrollbar {
        display: none;
    }


li[b-wo9e4ka6fo] {
    color: var(--item-color);
    align-items: center;
    cursor: pointer;
    border-radius: var(--br-radius);
}

    li .check-mark[b-wo9e4ka6fo] {
        height: 0.5rem;
        aspect-ratio: 1;
        border-radius: 1rem;
        background-color: transparent;
        border: none;
        outline-offset: 0.2rem;
        outline: 3px solid var(--item-checkmark-outline-color);
        place-self: center;
    }

    li[data-selected] .check-mark[b-wo9e4ka6fo] {
        background-color: var(--item-checkmark-selected-bgcolor);
    }

    li:hover[b-wo9e4ka6fo] {
        background-color: var(--item-hover-color);
    }
/* /Components/Data/AuditCpnt.razor.rz.scp.css */
.audit-cpnt[b-mpszgk02oo] {
    container: audit-cpnt-container / inline-size; 
    border-radius: 0.5rem;
    overflow: hidden;
}

    .audit-cpnt[data-blurred-background][b-mpszgk02oo] {
        backdrop-filter: blur(0.25rem);
        background-color: rgb(from var(--app-highlight-color) r g b / calc(alpha * 0.25));
    }

.audit-grid[b-mpszgk02oo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding: 0.5rem 0.5rem;
    gap: 1rem;
}

.audit-entry[b-mpszgk02oo] {
    display: flex;
    flex-flow: row wrap;
    column-gap: 0.5rem;
}

    .audit-entry:nth-child(1)[b-mpszgk02oo]{
        justify-self: start;
    }

    .audit-entry:nth-child(2)[b-mpszgk02oo] {
        justify-self: end;
    }


    :is(.date-title,.user-title)[b-mpszgk02oo] {
        color: var(--app-highlight-color);
    }

:is(.date-value,.user-name)[b-mpszgk02oo] {
    color: var(--app-color);
}

@container audit-cpnt-container (width < 34rem) {
    .audit-grid[b-mpszgk02oo] {
        grid-template-columns: auto auto;
        padding: 0;
        gap: 0.5rem;
        font-size: 0.9rem;
        padding-inline: 0.2rem;
    }

    .audit-entry[b-mpszgk02oo] {
        display: flex;
        flex-direction: column;
    }
}

@container audit-cpnt-container (width < 27rem) {
    .audit-grid[b-mpszgk02oo] {
        font-size: 0.8rem;
    }

}
/* /Components/Data/AxleLayoutCpnt.razor.rz.scp.css */
.axle-layout[b-bf1vj81oq8] {
    pointer-events: none;
}
/* /Components/Data/DrivingLicenseCategoriesCpnt.razor.rz.scp.css */
.driving-license-categories-properties[b-x8cie56vqx] {
    --container-bgcolor: var(--blackcolor);
    --checkbox-accent-color: var(--app-highlight-color);
    --label-color: var(--app-theme-color);
}


.driving-license-categories-container[b-x8cie56vqx] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    padding: 0rem;
    padding-block-start: 0rem;
    border-radius: 0.25rem;
    gap: 1rem;
    /*background-color: var(--blackcolor);*/
}

.vehicle-category[b-x8cie56vqx] {
    position: relative;
    display: grid;
    row-gap: 1rem;
    padding: 0.5rem 0.25rem;
    align-items: start;
    grid-template-rows: auto 1fr;
    background: var(--app-black-color);
    border-radius: 0.25rem;
}
    .vehicle-category .category-title[b-x8cie56vqx] {
        color: var(--app-highlight-color);
        text-align: start;
        line-height: 1;
    }

    .vehicle-category .license-types[b-x8cie56vqx] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        column-gap: 0.25rem;
        row-gap: 1rem;
        justify-content: center;
    }


    .vehicle-category div:has( > input[type="checkbox"])[b-x8cie56vqx] {
        display: grid;
        grid-template-columns: 2rem auto;
        align-items: center;
        gap: 0.25rem;
    }

input[type="checkbox"][b-x8cie56vqx] {
    transform: scale(1.65);
    accent-color: var(--checkbox-accent-color);
    margin-block-start: 0.1rem;
}

label[b-x8cie56vqx] {
    color: var(--label-color);
}

@media (width < 34rem){

    .driving-license-categories-container[b-x8cie56vqx] {
        gap: 0.5rem;
    }

    .vehicle-category .category-title[b-x8cie56vqx] {
        font-size: 0.9rem;
    }
}
/* /Components/Data/EntityDatesCpnt.razor.rz.scp.css */
.entity-dates-properties[b-gk0s5i8ld0] {
    --title-color: var(--app-highlight-color);
    --value-color: var(--app-theme-color);
}


.entity-dates-container[b-gk0s5i8ld0] {
    container: entity-dates-container / inline-size;
}

.entity-dates[b-gk0s5i8ld0] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    align-items: start;
    font-size: 1rem;
    gap: 3rem;
}


.date[b-gk0s5i8ld0] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    .date[data-animation][b-gk0s5i8ld0] {
        transform-origin: center;
        animation: shake-animation-b-gk0s5i8ld0 0.6s ease-out normal forwards;
    }

    .date span[b-gk0s5i8ld0] {
        line-height: 1;
    }

    .date .title[b-gk0s5i8ld0] {
        font-weight: normal;
        color: var(--title-color);
    }

    .date .value[b-gk0s5i8ld0] {
        color: var(--value-color);
    }

    .date.created[b-gk0s5i8ld0]{
        justify-self: start;
    }
    
    .date.updated[b-gk0s5i8ld0]{
        justify-self: start;
    }

@container entity-dates-container (width < 34rem) {
    .entity-dates[b-gk0s5i8ld0] {
        font-size: 0.8rem;
    }

    .date[b-gk0s5i8ld0] {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.25rem;
    }

        .date.updated[b-gk0s5i8ld0] {
            justify-self: end;
        }
}


@keyframes shake-animation-b-gk0s5i8ld0 {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(0px, 0px) rotate(0deg);
        font-weight: bold;
    }
}
/* /Components/Data/ScaleConnectorSetupCpnt.razor.rz.scp.css */
.scale-connector-setup[b-pqmmmzrq5l] {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 1fr;
    grid-column: 1 / -1;
    min-height: 100px;
    overflow-y: auto;
    column-gap: 1rem;
    row-gap: 2rem;
    isolation: isolate;
}

.connector[b-pqmmmzrq5l] {
    display: grid;
    grid-template-rows: 1fr min-content;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    padding: 0.25rem;
    border-radius: 0.5rem;
    row-gap: 1rem;
    z-index: 0;

    &:has(input:checked) {
        anchor-name: --selected-connector;
    }

    .connector-inputs[b-pqmmmzrq5l] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: column;
        column-gap: 0.5rem;
    }
}

    .connector.tcp-ip[b-pqmmmzrq5l] {
        grid-column: 1;
    }

    .connector.serial-port[b-pqmmmzrq5l] {
        grid-column: 2;
    }

.connector-label[b-pqmmmzrq5l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0rem;
    align-self: start;

    &:has(input:checked) {
        color: var(--app-highlight-color);
    }

    input[type=radio][b-pqmmmzrq5l] {
        height: 1rem;
        aspect-ratio: 1;
        accent-color: var(--app-highlight-color);
    }
}


.connector-selector[b-pqmmmzrq5l] {
    position: absolute;
    position-anchor: --selected-connector;
    inset-inline-start: anchor(start);
    inset-block-start: anchor(start);
    width: anchor-size(width);
    height: anchor-size(height);
    outline: 2px dashed var(--app-theme-color);
    outline-offset: -2px;
    z-index: 1;
    transition: inset 0.5s ease;
    border-radius: 0.5rem;
    pointer-events: none;
}


/* /Components/Data/UserRoleBadges.razor.rz.scp.css */
.user-role-badges[b-h7pxdsqxsw] {
    display: flex;
    gap: 1em;
    align-items: baseline;
}

span[data-user-role="driver"][b-h7pxdsqxsw] {
    color: var(--user-role-driver-color);
}

span[data-user-role="office"][b-h7pxdsqxsw] {
    color: var(--user-role-office-color);
}

[b-h7pxdsqxsw] .admin-button {
    --color1: var(--app-black-color);
    --color2: var(--app-theme-color);
    border: 2px solid var(--app-theme-color);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    column-gap: 0.3em;
    padding-inline-end: 0.75rem;
    padding-block: 0.25em 0.25em;
}

    [b-h7pxdsqxsw] .admin-button i {
        font-size: 0.8em;
    }


/* /Components/Data/UserRolesCpnt.razor.rz.scp.css */
.user-roles-properties[b-3144slt6yf] {
    --label-brcolor: var(--darkgraycolor);
    --label-bgcolor: var(--darkcolor);
    --label-checked-bgcolor: var(--blackcolor);
    --label-color: var(--darkgraycolor);
    --label-admin-color: var(--user-role-admin-color);
    --label-office-color: var(--user-role-office-color);
    --label-driver-color: var(--user-role-driver-color);
}

.user-roles[b-3144slt6yf] {
    container-name: user-roles-container;
    container-type: inline-size;
}

.user-roles-grid[b-3144slt6yf] {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-around;
}




label[b-3144slt6yf] {
    -webkit-user-select: none;
    user-select: none;
    font-weight: bold;
    cursor: pointer;
    display: grid;
    grid-template-areas: "stack";
    background-color: pink;
    width: min(30cqw, 7rem);
    aspect-ratio: 1;
    background-color: var(--label-bgcolor);
    border: 3px solid var(--label-brcolor);
    border-radius: 0.5rem;
    color: var(--label-color);
}

    label span[b-3144slt6yf] {
        grid-area: stack;
        place-self: center;
    }

    label input[b-3144slt6yf] {
        grid-area: stack;
        align-self: start;
        justify-self: center;
    }

        label input[type=checkbox][b-3144slt6yf] {
            transform: scale(2) translateY(-50%);
            transform-origin: 50% 0%;
        }

    label:has(input:checked)[b-3144slt6yf] {
        background-color: var(--label-checked-bgcolor);
    }


    label[data-role-admin]:has(input:checked)[b-3144slt6yf] {
        color: var(--label-admin-color);
        border-color: var(--label-admin-color);
    }

    label[data-role-office]:has(input:checked)[b-3144slt6yf] {
        color: var(--label-office-color);
        border-color: var(--label-office-color);
    }

    label[data-role-driver]:has(input:checked)[b-3144slt6yf] {
        color: var(--label-driver-color);
        border-color: var(--label-driver-color);
    }

    label[data-role-admin] input[b-3144slt6yf] {
        accent-color: var(--label-admin-color);
    }

    label[data-role-office] input[b-3144slt6yf] {
        accent-color: var(--label-office-color);
    }

    label[data-role-driver] input[b-3144slt6yf] {
        accent-color: var(--label-driver-color);
    }
/* /Components/Dialogs/CompanyDialog.razor.rz.scp.css */
.company-dialog-properties[b-yf0sqt0v4w] {
    --header-color: var(--user-role-admin-color);
    --header-bgcolor: var(--blackcolor);
    --item-title-color: var(--user-role-admin-color);
    --item-icon-color: var(--app-highlight-color);
    --dialog-color: var(--app-highlight-color);
    --dialog-bgcolor: var(--blackcolor);
    --input-bg-color: #1c1c1c;
    --header-button-save-color: var(--greencolor);
    --header-button-close-color: var(--user-role-admin-color);
    --header-button-fetch-color: var(--bluecolor);
    --header-button-bgcolor: var(--app-black-color);
    --loader-bgcolor: #606060aa;
    --spinner-color1: var(--blackcolor);
    --spinner-color2: var(--bluecolor);
    --add-button-color1: var(--app-black-color);
    --add-button-color2: var(--bluecolor);
    --remove-button-color1: var(--app-black-color);
    --remove-button-color2: var(--redcolor);
}

.company-dialog[b-yf0sqt0v4w] {
    background-color: var(--dialog-bgcolor);
    color: var(--dialog-color);
    isolation: isolate;
    display: grid;
    height: 100%;
    grid-template-rows: min-content 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "items";
}

.loader[b-yf0sqt0v4w] {
    grid-area: items;
    z-index: 2;
    display: grid;
    place-items: center;
    opacity: 0;
    background-color: var(--loader-bgcolor);
    animation: loader-animation-b-yf0sqt0v4w 0.5s 0s ease forwards;
}

    .loader[b-yf0sqt0v4w]  .spinner {
        --border-width: 3px;
        --diameter: 4em;
        --color1: var(--spinner-color1);
        --color2: var(--spinner-color2);
        --duration: 0.5s;
    }

@keyframes loader-animation-b-yf0sqt0v4w {
    to {
        opacity: 1;
    }
}


.header[b-yf0sqt0v4w] {
    grid-area: header;
    z-index: 1;
    display: grid;
    overflow: hidden;
    grid-template-columns: 4em 1fr auto;
    grid-template-rows: 3.5em;
    grid-auto-flow: row;
    padding-block: 0.5em;
    align-items: center;
    padding-inline: 0.5em;
    gap: 1em;
    background-color: var(--header-bgcolor);
    color: var(--header-color);
    box-shadow: 0 0.1em 2em -1.2em var(--app-highlight-color);
}

    .header[b-yf0sqt0v4w]  .logo-image {
        grid-column: 1;
        border-radius: 0.5em;
        overflow: hidden;
    }

        .header[b-yf0sqt0v4w]  .logo-image img {
            font-size: 0.8em;
            text-align: center;
            align-content: center;
            object-fit: cover;
        }

    .header h4[b-yf0sqt0v4w] {
        grid-column: 2;
        user-select: none;
    }

    .header .buttons-group[b-yf0sqt0v4w] {
        grid-column: 3;
        justify-self: end;
        display: grid;
        grid-auto-columns: auto;
        grid-auto-flow: column;
        align-items: center;
        column-gap: 0.5em;
    }

.buttons-group[b-yf0sqt0v4w]  .header-button {
    height: 2.3em;
    aspect-ratio: 1;
    --icon-size: 1.15em;
    padding: 0;
    --color1: var(--header-button-bgcolor);
}

[b-yf0sqt0v4w] .header-button.save {
    --color2: var(--header-button-save-color);
}

[b-yf0sqt0v4w] .header-button.fetch {
    --color2: var(--header-button-fetch-color);
}

[b-yf0sqt0v4w] .header-button.close {
    --color2: var(--header-button-close-color);
}

    [b-yf0sqt0v4w] .header-button.close i {
        margin-block-start: 0.1em;
        --icon-size: 1.5em;
    }

.items-grid[b-yf0sqt0v4w] {
    grid-area: items;
    z-index: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    grid-auto-flow: row;
    padding-block: 1em;
    padding-inline: 1em;
    row-gap: 1.5em;
    overflow-y: auto;
}

.item[b-yf0sqt0v4w] {
    display: grid;
    grid-auto-rows: min-content;
    row-gap: 0.5em;
    align-items: start;
}

    .item .split-content[b-yf0sqt0v4w] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
        grid-auto-rows: min-content;
        column-gap: 0.5em;
        row-gap: 0.5em;
    }

    .item .split-content-auto[b-yf0sqt0v4w] {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: min-content;
        grid-auto-flow: row;
        column-gap: 0.5em;
        row-gap: 0.5em;
    }

    .item .title-button-header[b-yf0sqt0v4w] {
        display: flex;
        justify-content: start;
        padding-block: 0.5em;
        gap: 0.5em;
        align-items: center;
        height: min-content;
    }

    .item .item-title[b-yf0sqt0v4w] {
        display: flex;
        align-items: center;
        color: var(--item-title-color);
        column-gap: 1em;
        user-select: none;
    }

        .item .item-title span[b-yf0sqt0v4w] {
            text-shadow: 2px 2px 2px black;
        }

        .item .item-title i[b-yf0sqt0v4w] {
            color: var(--item-icon-color);
            text-shadow: 1px 1px 2px black;
        }

[b-yf0sqt0v4w] .add-button {
    --color1: var(--add-button-color1);
    --color2: var(--add-button-color2);
    --icon-size: 1em;
    height: 2rem;
    padding: 0;
    aspect-ratio: 1;
}

.item[b-yf0sqt0v4w]  .input {
    color: inherit;
    --input-bgcolor: var(--input-bg-color);
    --input-padding-block: 0.75rem;
    border: none;
    font-style: normal;
}

.item[b-yf0sqt0v4w]  textarea.input {
    --input-padding-block: 0.5rem;
}

[b-yf0sqt0v4w] .input::selection {
    background-color: var(--app-highlight-color);
    color: var(--app-black-color);
}

.culture-resources[b-yf0sqt0v4w] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5em;
    grid-auto-rows: min-content;
    justify-content: start;
}

    .culture-resources li[b-yf0sqt0v4w] {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        grid-template-rows: 1fr;
        grid-auto-flow: row;
        align-items: center;
    }

        .culture-resources li select[b-yf0sqt0v4w] {
            color: inherit !important;
        }

        .culture-resources li[b-yf0sqt0v4w]  .remove-button {
            --color1: var(--remove-button-color1);
            --color2: var(--remove-button-color2);
            --icon-size: 1em;
            height: 2rem;
            padding: 0;
            aspect-ratio: 1;
        }

@media (width <= 50em) {

    .header[b-yf0sqt0v4w] {
        padding-inline: 0.2em;
        grid-template-columns: 3em 1fr auto;
        grid-template-rows: 2.75em;
        gap: 0.25em;
    }

        .header h4[b-yf0sqt0v4w] {
            font-size: 1.3em;
        }

    .header .buttons-group[b-yf0sqt0v4w] {
        column-gap: 0.3em;
    }

    .items-grid[b-yf0sqt0v4w] {
        padding-block: 1em;
        padding-inline: 0.5em;
    }
}
/* /Components/Menus/UserProfileMenu.razor.rz.scp.css */
.user-profile-menu[b-6uw8cnym4y] {
    --dir: -1;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-template-areas:
        "button"
        "dialog";
}

[dir="rtl"] .user-profile-menu[b-6uw8cnym4y] {
    --dir: 1;
}

[b-6uw8cnym4y] .profile-button {
    grid-area: button;
    display: grid;
    place-content: center;
}

    [b-6uw8cnym4y] .profile-button > * {
        animation: fade-in-icon-b-6uw8cnym4y 0.75s ease normal forwards;
    }

    [b-6uw8cnym4y] .profile-button span {
        padding-block-start: 0.05rem;
    }

    [b-6uw8cnym4y] .profile-button i {
        font-size: 1rem;
    }

        [b-6uw8cnym4y] .profile-button i[data-close-icon] {
            font-size: 1.35rem;
        }
/* Hide all */
.profile-button :is(i[data-signin-icon],i[data-close-icon],span[data-user-acronym])[b-6uw8cnym4y] {
    display: none;
}
/* When popover is OPEN -> show close icon */
.user-profile-menu:has(:popover-open) i[data-close-icon][b-6uw8cnym4y] {
    display: inline-block;
}
/* when popover is ClOSE and user logged in -> show acronym*/
.user-profile-menu[data-user-logged-in]:not(:has(:popover-open)) span[data-user-acronym][b-6uw8cnym4y] {
    display: inline-block;
}
/* when popover is ClOSE and user NOT logged in -> show signin icon*/
.user-profile-menu:not([data-user-logged-in]):not(:has(:popover-open)) i[data-signin-icon][b-6uw8cnym4y] {
    display: inline-block;
}

@keyframes fade-in-icon-b-6uw8cnym4y {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

[b-6uw8cnym4y] .profile-menu-popover {
    color: var(--app-theme-color);
    margin-block-start: 0.25rem;
    width: max-content;
    min-width: 20rem;
    overflow: visible;
    background: var(--blackcolor);
    border-radius: 1rem;
    border: 3px solid var(--app-black-color);
    box-shadow: 0 1rem 1.25rem -0.75rem rgba(0,0,0,0.5);
    inset-inline-end: anchor(end);
    inset-block-start: anchor(end);
}
/*#endregion*/
ul[b-6uw8cnym4y] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-rows: 1fr min-content;
    grid-auto-flow: row;
    list-style-type: none;
    padding-inline: 1rem;
    isolation: isolate;
}

    ul li[b-6uw8cnym4y] {
        position: relative;
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        grid-column: -1 / 1;
        gap: 1rem;
        padding-block-start: 1rem;
        grid-template-areas:
            "icon component"
            "line line";
        align-items: center;
    }

        ul li i[b-6uw8cnym4y] {
            grid-area: icon;
            color: var(--darkgraycolor);
            font-size: 1rem;
        }

        ul li .component[b-6uw8cnym4y] {
            grid-area: component;
        }

.component.user-name[b-6uw8cnym4y] {
    color: var(--app-highlight2-color);
}

.component.culture[b-6uw8cnym4y] {
    z-index: 1;
}

.component.update[b-6uw8cnym4y]  .update-button {
    padding-block: 0.75rem;
    padding-inline: 1rem;
}

.component.login[b-6uw8cnym4y]  .login-button {
    padding-block: 0.75rem;
    padding-inline: 1rem;
}

ul li[b-6uw8cnym4y]:after {
    content: "";
    position: static;
    grid-area: line;
    border-block-end: 1px solid var(--darkgraycolor);
    margin-inline: 1rem;
}

ul li:last-child[b-6uw8cnym4y]:after {
    content: none;
}

@media (width < 30rem) {
    [b-6uw8cnym4y] .profile-button i[data-close-icon] {
        font-size: 1.2rem;
    }

    [b-6uw8cnym4y] .profile-menu-popover {
        translate: calc(50% * var(--dir)) 0%;
        inset-inline-start: 50%;
    }
}
/* /Components/Modals/AdminCompanyModal.razor.rz.scp.css */
.admin-company-modal-properties[b-e8pf4zr051] {
    --header-color: var(--user-role-admin-color);
    --header-bgcolor: var(--blackcolor);
    --item-title-color: var(--user-role-admin-color);
    --item-icon-color: var(--app-highlight-color);
    --dialog-color: var(--app-highlight-color);
    --dialog-bgcolor: var(--blackcolor);
    --input-bg-color: var(--app-black-color);
    --header-button-save-color: var(--greencolor);
    --header-button-close-color: var(--user-role-admin-color);
    --header-button-fetch-color: var(--bluecolor);
    --header-button-bgcolor: var(--app-black-color);
    --loader-bgcolor: #606060aa;
    --spinner-color1: var(--blackcolor);
    --spinner-color2: var(--bluecolor);
    --column-gap: 2rem;
    --fieldset-border: 1px solid var(--app-highlight-color);
}

/* #region form and modal*/
.admin-company-modal[b-e8pf4zr051] {
    background-color: var(--dialog-bgcolor);
    color: var(--dialog-color);
    isolation: isolate;
    width: min(60rem, 98vw);
    place-self: center;
    border-radius: 1rem;
    overflow: hidden;
    border: 3px solid var(--app-black-color);
}

[b-e8pf4zr051] .admin-company-form {
    display: grid;
    height: 90svh;
    grid-template-rows: min-content 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "items";
}

ul[b-e8pf4zr051] {
    list-style-type: none;
}
/* #endregion*/


/* #region loader*/
.loader[b-e8pf4zr051] {
    grid-area: items;
    z-index: 2;
    display: grid;
    place-items: center;
    opacity: 0;
    background-color: var(--loader-bgcolor);
    animation: loader-animation-b-e8pf4zr051 0.5s 0s ease forwards;
}

    .loader[b-e8pf4zr051]  .spinner {
        --border-width: 3px;
        --diameter: 4rem;
        --color1: var(--spinner-color1);
        --color2: var(--spinner-color2);
        --duration: 0.5s;
    }

@keyframes loader-animation-b-e8pf4zr051 {
    to {
        opacity: 1;
    }
}
/* #endregion */


/* #region header */
.header[b-e8pf4zr051] {
    grid-area: header;
    z-index: 1;
    display: grid;
    overflow: hidden;
    grid-template-columns: 4rem 1fr auto;
    grid-template-rows: 3.5rem;
    grid-auto-flow: row;
    padding-block: 0.5rem;
    align-items: center;
    padding-inline: 0.5rem;
    gap: 1em;
    background-color: var(--header-bgcolor);
    color: var(--header-color);
    box-shadow: 0 0.1rem 2rem -1.2em var(--app-highlight-color);
}

    .header[b-e8pf4zr051]  .logo-image {
        grid-column: 1;
        border-radius: 0.5rem;
        overflow: hidden;
    }

        .header[b-e8pf4zr051]  .logo-image img {
            font-size: 0.8rem;
            text-align: center;
            align-content: center;
            object-fit: cover;
        }

    .header h4[b-e8pf4zr051] {
        grid-column: 2;
        user-select: none;
    }

    .header .buttons-group[b-e8pf4zr051] {
        grid-column: 3;
        justify-self: end;
        display: grid;
        grid-auto-columns: auto;
        grid-auto-flow: column;
        align-items: center;
        column-gap: 0.75rem;
    }
/* #endregion */


/* #region fieldset-list*/
.fieldset-list[b-e8pf4zr051] {
    grid-area: items;
    z-index: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    grid-auto-flow: row;
    padding-block: 3rem 2rem;
    padding-inline: 1rem;
    row-gap: 4rem;
    column-gap: var(--column-gap);
    overflow-y: auto;
    scrollbar-gutter: stable;
}
/* #endregion */


/* #region fieldset (item)*/
fieldset[b-e8pf4zr051] {
    grid-column: span 2;
    border-radius: 0.5rem;
    border: var(--fieldset-border);
    padding-block: 1.5rem 0.5rem;
    padding-inline: 0.5rem;
}

    fieldset.one-column[b-e8pf4zr051] {
        grid-column: unset;
    }

.item-content[b-e8pf4zr051] {
    line-height: 1;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: column;
    grid-auto-rows: auto;
}

    .item-content.two-column[b-e8pf4zr051] {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--column-gap);
    }
/* #endregion */


/* #region legend (item-title)*/
legend[b-e8pf4zr051] {
    display: flex;
    align-items: center;
    color: var(--item-title-color);
    column-gap: 1rem;
    user-select: none;
    margin-inline: 1rem 0rem;
    padding-inline: 0.25em;
}

    legend span[b-e8pf4zr051] {
        text-shadow: 2px 2px 2px black;
    }

    legend i[b-e8pf4zr051] {
        color: var(--item-icon-color);
        text-shadow: 1px 1px 2px black;
    }

        legend i[data-pdf-image-url-valid][b-e8pf4zr051] {
            background-color: var(--bluecolor);
            padding: 0.3rem;
            border-radius: 0.25rem;
            cursor: pointer;
        }


    legend[b-e8pf4zr051]  .image-validator-hidden {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
    }
    /* #endregion*/

    /* #region culture-list*/
    .culture-list[b-e8pf4zr051] {
        display: grid;
        grid-auto-flow: row;
        grid-auto-rows: auto;
        row-gap: 0.5rem;
        column-gap: var(--column-gap);
    }

    .culture-list.one-column[b-e8pf4zr051] {
        grid-template-columns: 1fr;
    }

    .culture-list.two-column[b-e8pf4zr051] {
        grid-template-columns: 1fr 1fr;
    }

    .culture-list li[b-e8pf4zr051] {
        display: grid;
        grid-template-columns: auto 1fr auto;
        column-gap: 0.5rem;
        grid-auto-flow: row;
        align-items: center;
    }

        .culture-list li select[b-e8pf4zr051] {
            color: inherit !important;
        }
/* #endregion culture-list*/


/* #region inputs*/
fieldset[b-e8pf4zr051]  .input {
    color: inherit;
    --input-bgcolor: var(--input-bg-color);
    --input-padding-block: 0.75rem;
    border: none;
    font-style: normal;
}

fieldset[b-e8pf4zr051]  textarea.input {
    --input-padding-block: 0.5rem;
}

fieldset[b-e8pf4zr051]  .input::selection {
    background-color: var(--app-highlight-color);
    color: var(--app-black-color);
}

fieldset[b-e8pf4zr051]  .switch.switch-properties {
    --on-track-color: var(--bluecolor);
    --on-thumb-color: var(--user-role-admin-color);
    --off-thumb-color: var(--app-black-color);
}

/* #endregion */


@media (width < 800px) {

    [b-e8pf4zr051] .admin-company-form {
        height: 95svh;
    }

    .header[b-e8pf4zr051] {
        padding-inline: 0.2rem;
        grid-template-columns: 3rem 1fr auto;
        grid-template-rows: 2.75rem;
        gap: 0.25rem;
    }

        .header h4[b-e8pf4zr051] {
            font-size: 1.3rem;
        }

        .header .buttons-group[b-e8pf4zr051] {
            column-gap: 0.5rem;
        }

    .fieldset-list[b-e8pf4zr051] {
        grid-template-columns: 1fr;
        padding-block: 2rem 2rem;
        padding-inline: 0.25rem;
        row-gap: 4rem;
    }

        .fieldset-list[b-e8pf4zr051]::-webkit-scrollbar {
            display: none; /* Chrome, Safari */
        }

    fieldset[b-e8pf4zr051] {
        grid-column: 1;
        padding-block: 1rem 0.25rem;
        padding-inline: 0rem;
        border: none;
        border-block-start: var(--fieldset-border);
        /*border-block-end: var(--fieldset-border);*/
        border-radius: 0;
    }

        fieldset:last-child[b-e8pf4zr051] {
            border-block-end: unset;
        }

    legend[b-e8pf4zr051] {
        column-gap: 0.5rem;
        margin-inline: 0rem 0rem;
        padding-inline: 0.25rem;
    }

    .item-content.two-column[b-e8pf4zr051] {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        row-gap: 0.5rem;
    }

    .culture-list.two-column[b-e8pf4zr051] {
        grid-template-columns: 1fr;
    }

    .culture-list li[b-e8pf4zr051] {
        column-gap: 0.1rem;
    }
}
/* /Components/Modals/ImagePreviewerModal.razor.rz.scp.css */
.image-previewer-modal[b-8e14tatwxo] {
    height: 100%;
    width: 100%;
    display: grid;
    place-content: center;
    padding: min(2vw, 1em);
    opacity: 1;
}


[b-8e14tatwxo] .image {
    border: 0.2em solid var(--app-black-color);
    border-radius: 1em;
    transition: all 0.4s 0.2s ease;
    opacity: 1;
    scale: 1;

}

.image-previewer-modal[data-closing][b-8e14tatwxo]  .image {
    transition-delay: 0s;
    scale: 0.5;
    opacity: 0;
}


@starting-style {
    [b-8e14tatwxo] .image {
        scale: 0.8;
        opacity: 0;
    }
}
/* /Components/Modals/ScaleCameraPairModal.razor.rz.scp.css */
.scale-camera-pair-modal-properties[b-489j4nh7ec] {
    --border-color: var(--app-modal-border-color);
    --title-color: var(--app-theme-color);
    --background-color: var(--app-content-bgcolor);
    --text-color: var(--app-content-color);
    --header-bgcolor: var(--app-header-bgcolor);
    --header-color: var(--app-header-color);
    --local-card-bgcolor: #181818ff;
}

.scale-camera-pair-modal[b-489j4nh7ec] {
    container: scale-camera-pair-container / inline-size;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header"
        "lists"
        "footer";
    gap: 2rem;
    margin: auto;
    width: min(40rem, 98%);
    background-color: var(--background-color);
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}


.scale-camera-pair-header[b-489j4nh7ec] {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0.25rem;
}

.scale-camera-pair-title[b-489j4nh7ec] {
    color: var(--title-color);
}



.scale-camera-pair-lists[b-489j4nh7ec] {
    grid-area: lists;
    display: grid;
    grid-template-columns: auto min-content auto;
    grid-auto-flow: column;
    user-select: none;
}

.seperator[b-489j4nh7ec] {
    height: 100%;
    width: 2px;
    background-color: var(--app-theme-color);
}


.list-wrapper[b-489j4nh7ec] {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1.5rem;
}

    .list-wrapper > h5[b-489j4nh7ec] {
        text-align: center;
        text-decoration: underline;
        color: var(--title-color);
    }


[b-489j4nh7ec] ul {
    display: grid;
    grid-auto-rows: min-content;
    row-gap: 1rem;
    justify-content: center;
}

    [b-489j4nh7ec] ul li {
        cursor: pointer;
        padding: 0.2rem 0.5rem;
        border-radius: 0.25rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        [b-489j4nh7ec] ul li::before {
            content: '•';
            color: red;
            font-size: 1.5rem;
        }


        [b-489j4nh7ec] ul li[data-selected-item] {
            font-weight: bold;
            color: var(--greencolor);
            background-color: var(--lightgreencolor);
        }


            [b-489j4nh7ec] ul li[data-selected-item]::before {
                color: var(--bluecolor);
            }

        [b-489j4nh7ec] ul li:hover:not([data-selected-item]) {
            cursor: pointer;
            color: var(--whitecolor);
        }




.scale-camera-pair-modal .scale-camera-pair-footer[b-489j4nh7ec] {
    grid-area: footer;
    display: grid;
    padding-block-end: 0.25rem;
}

[b-489j4nh7ec] .pair-button {
    justify-self: center;
    width: max-content;
    padding: 0 1rem;
    --color1: var(--greencolor);
    --color2: var(--lightgreencolor);
}

    [b-489j4nh7ec] .pair-button .button-content {
        gap: 1rem;
    }


@container scale-camera-pair-container (width < 36rem) {
    .scale-camera-pair-lists[b-489j4nh7ec] {
        font-size: 0.9rem;
    }
}
/* /Components/Navigation/NavLinkButton.razor.rz.scp.css */
.nav-link-button[b-0axof5iycw] {
    --color: var(--app-link-color);
    --active-color: var(--app-highlight-color);
    --background-color: var(--app-black-color);
    --box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
    --disabled-bgcolor: #212121;
    --disabled-color: var(--darkgraycolor);
    display: grid;
    border-radius: 5rem;
    overflow: hidden;
    height: 2.75rem;
    width: 2.75rem;
}

a[b-0axof5iycw] {
    display: grid;
    place-items: center;
    background-color: var(--background-color);
    color: var(--color);
    box-shadow: var(--box-shadow);
    transition: all 0.25s ease;
}

    a[data-disabled][b-0axof5iycw] {
        background-color: var(--disabled-bgcolor);
        color: var(--disabled-color);
    }


    a i[b-0axof5iycw] {
        transition: transform 0.2s ease;
        font-size: var(--icon-size);
    }

    a:hover i[b-0axof5iycw] {
        transform: rotate(45deg);
    }


@media (width < 34rem) {
    .nav-link-button[b-0axof5iycw] {
        height: 2.5rem;
        width: 2.5rem;
    }
}

/* /Components/Navigation/NavMenu.razor.rz.scp.css */
.nav-menu-properties[b-m6hehe8abk] {
    --title-color: var(--app-theme-color);
    --text-shadow-color: var(--blackcolor);
    --card-bgcolor: var(--app-active-bgcolor);
    --card-color: var(--app-control-color);
    --card-hover-outline-color: var(--app-highlight-color);
    --card-active-outline-color: var(--app-theme-color);
    --background-color: var(--app-layout-bgcolor);
}

.nav-menu-container[b-m6hehe8abk] {
    --spacing: 1em;
    --gap-between-sections: calc(var(--spacing) * 1.0);
    --gap-in-section: calc(var(--spacing) * 0.5);
    --gap-between-cards: calc(var(--spacing) * 1);
    --icon-size: 1.25em;
}

.nav-menu-container[b-m6hehe8abk] {
    container: nav-menu-container / inline-size;
    background-color: var(--background-color);
    display: grid;
    gap: var(--gap-between-sections);
    padding-inline: var(--spacing);
    padding-block-end: var(--spacing);
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
}

.section-container[b-m6hehe8abk] {
    display: grid;
    gap: var(--gap-in-section);
    grid-template-rows: min-content 1fr;
    grid-template-areas: 
        "title"
        "cards";
}


    .section-container .title[b-m6hehe8abk] {
        grid-area: title;
        text-align: center;
        color: var(--title-color);
        text-shadow: 0px 1px 1px var(--text-shadow-color);
    }

    .section-container .cards[b-m6hehe8abk] {
        grid-area: cards;
        gap: var(--gap-between-cards);
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        grid-auto-flow: row;
    }


[b-m6hehe8abk] .card {
    background-color: var(--card-bgcolor);
    color: var(--card-color);
    overflow: hidden;
    border-radius: 0.25rem;
    padding-inline: calc(var(--spacing) * 0.5);
    padding-block: calc(var(--spacing) * 1);
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

    [b-m6hehe8abk] .card:hover:not(.card-active) {
        outline: 2px solid var(--card-hover-outline-color);
        outline-offset: 2px;
    }

[b-m6hehe8abk] .card-active {
    outline: 2px solid var(--card-active-outline-color);
    outline-offset: 2px;
}


[b-m6hehe8abk] .card i {
    text-shadow: 0px 1px 1px var(--blackcolor);
    font-size: var(--icon-size);
}

[b-m6hehe8abk] .card .certificate-progress-badge {
    padding: 0.2em 0.2em;
    border-radius: 0.25em;
    font-size: 0.9em;
    margin-inline-start: 0.25em;
}

[b-m6hehe8abk] .card[href="/"] i {
    color: var(--entrance-color);
}

[b-m6hehe8abk] .card[href="dashboard"] i {
    color: var(--dashboard-color);
}

[b-m6hehe8abk] .card[href="certificates"] i {
    color: var(--certificates-color);
}

[b-m6hehe8abk] .card:is([href="certificates/creation/data"],[href="certificates/creation/result"]) i{
    color: var(--certificates-creation-color);
}

[b-m6hehe8abk] .card[href="report"] i {
    color: var(--report-color);
}

[b-m6hehe8abk] .card[href="online/devices"] i {
    color: var(--online-devices-color);
}

[b-m6hehe8abk] .card[href="online/settings"] i {
    color: var(--online-settings-color);
}

[b-m6hehe8abk] .card[href="trucks"] i{
    color: var(--trucks-color);
}

[b-m6hehe8abk] .card[href="truckmodels"] i {
    color: var(--truckmodels-color);
}

[b-m6hehe8abk] .card[href="trailers"] i {
    color: var(--trailers-color);
}

[b-m6hehe8abk] .card[href="drivers"] i {
    color: var(--drivers-color);
}

[b-m6hehe8abk] .card[href="products"] i {
    color: var(--products-color);
}

[b-m6hehe8abk] .card[href="sites"] i {
    color: var(--sites-color);
}

[b-m6hehe8abk] .card[href="users"] i {
    color: var(--users-color);
}

[b-m6hehe8abk] .card[href="scales"] i {
    color: var(--scales-color);
}

[b-m6hehe8abk] .card[href="cameras"] i {
    color: var(--cameras-color);
}

[b-m6hehe8abk] .card[href="customers"] i {
    color: var(--customers-color);
}

[b-m6hehe8abk] .card[href="devices"] i {
    color: var(--devices-color);
    font-weight: bolder;
}
/* /Components/Navigation/NavPane.razor.rz.scp.css */
.nav-pane-properties[b-c0j6w1ompk] {
    --background-color: var(--app-layout-bgcolor);
    --nav-link-color: var(--app-color);
    --nav-link-bgcolor: transparent;
    --nav-link-active-color: var(--app-active-color);
    --nav-link-active-bgcolor: var(--app-active-bgcolor);
    --nav-link-hover-color: var(--app-theme-color);
    --nav-link-hover-bgcolor: var(--app-theme-color);
    --border-color: var(--app-black-color);
    --backdrop-filter: var(--app-backdrop-filter);
    --translate-direction: 1;
    --border-width: 2px;
}

[dir="rtl"] .nav-pane-properties[b-c0j6w1ompk] {
    --translate-direction: -1;
}

.nav-pane[b-c0j6w1ompk] {
    background-color: var(--background-color);
    -webkit-backdrop-filter: var(--backdrop-filter);
    backdrop-filter: var(--backdrop-filter);
    overflow: auto;
    width: max-content;
    position: relative;
    z-index: 0;
    height: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    grid-template-columns: auto auto auto;
    border-inline-end: calc(var(--border-width) * 1.5) solid var(--border-color);
}

section[b-c0j6w1ompk] {
    display: grid;
    grid-column: 1 / span 3;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    border-block-end: var(--border-width) solid var(--border-color);
}

    section:has(.nav-link-active) .section-title[b-c0j6w1ompk] {
        anchor-name: --active-section;
        color: var(--nav-link-active-color);
        background-color: var(--nav-link-active-bgcolor);
    }

.section-title[b-c0j6w1ompk] {
    display: grid;
    grid-column: 1;
    grid-row: -1 / 1;
    transition: background-color 0.5s, color 0.5s;
    border-inline-end: var(--border-width) solid var(--border-color);
    color: var(--nav-link-color);
    background-color: var(--nav-link-bgcolor);
    padding-inline: 0.1rem;
}

.vertical-title[b-c0j6w1ompk] {
    white-space: nowrap;
    writing-mode: vertical-rl;
    align-self: center;
    transform: rotate(180deg);
}

html[dir="rtl"] .vertical-title[b-c0j6w1ompk] {
    transform: none;
}


[b-c0j6w1ompk] .nav-link {
    display: grid;
    grid-column: 2 / span 2;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    grid-template-areas: "text icon";
    gap: 1em;
    color: var(--nav-link-color);
    align-items: center;
    background-color: var(--nav-link-bgcolor);
    padding-inline: 0.5rem;
    padding-block: 1rem;
    line-height: 1;
}
    [b-c0j6w1ompk] .nav-link:hover:not(.nav-link-active) {
        /*background-color: var(--nav-link-hover-bgcolor);*/
    }

        [b-c0j6w1ompk] .nav-link:hover:not(.nav-link-active) :is(p, i) {
            color: var(--nav-link-hover-color);
        }

    [b-c0j6w1ompk] .nav-link i {
        grid-area: icon;
        justify-self: center;
        font-size: 1.1em;
    }

    [b-c0j6w1ompk] .nav-link p {
        grid-area: text;
        font-size: 1em;
        text-align: start;
        width: fit-content;
    }

        [b-c0j6w1ompk] .nav-link p:has(.certificate-progress-badge) {
            display: inline-block;
            position: relative;
        }

        [b-c0j6w1ompk] .nav-link p .certificate-progress-badge {
            position: absolute;
            inset-inline-start: 100%;
            translate: calc(var(--translate-direction) * -50%) -100%;
            font-size: 0.7em;
            padding: 0.1em 0.2em;
            border-radius: 0.25em;
        }

.bubble[b-c0j6w1ompk] {
    position: absolute;
    z-index: 1;
    inset-block-start: anchor(start);
    inset-block-end: anchor(end);
    inset-inline-start: anchor(start);
    inset-inline-end: anchor(end);
    transition: all 0.4s ease;
}

    .bubble.link-active[b-c0j6w1ompk] {
        position-anchor: --active-link;
        border-block: 2px solid var(--app-theme-color);
        transition-delay: 0.1s;
    }

    .bubble.section-active[b-c0j6w1ompk] {
        border-block: 2px solid var(--app-theme-color);
        position-anchor: --active-section;
        transition-delay: 0.2s;
    }


[b-c0j6w1ompk] .nav-link-active {
    anchor-name: --active-link;
    color: var(--nav-link-active-color);
    background-color: var(--nav-link-active-bgcolor);
}

[b-c0j6w1ompk] .nav-link[href="/"] i {
    color: var(--entrance-color);
}

[b-c0j6w1ompk] .nav-link[href="dashboard"] i {
    color: var(--dashboard-color);
}

[b-c0j6w1ompk] .nav-link[href="certificates"] i {
    color: var(--certificates-color);
}

[b-c0j6w1ompk] .nav-link:is([href="certificates/creation/data"], [href="certificates/creation/result"]) i {
    color: var(--certificates-creation-color);
}

[b-c0j6w1ompk] .nav-link[href="report"] i {
    color: var(--report-color);
}

[b-c0j6w1ompk] .nav-link[href="online/devices"] i {
    color: var(--online-devices-color);
}

[b-c0j6w1ompk] .nav-link[href="online/settings"] i {
    color: var(--online-settings-color);
}

[b-c0j6w1ompk] .nav-link[href="trucks"] i {
    color: var(--trucks-color);
}

[b-c0j6w1ompk] .nav-link[href="truckmodels"] i {
    color: var(--truckmodels-color);
}

[b-c0j6w1ompk] .nav-link[href="trailers"] i {
    color: var(--trailers-color);
}

[b-c0j6w1ompk] .nav-link[href="drivers"] i {
    color: var(--drivers-color);
}

[b-c0j6w1ompk] .nav-link[href="products"] i {
    color: var(--products-color);
}

[b-c0j6w1ompk] .nav-link[href="sites"] i {
    color: var(--sites-color);
}

[b-c0j6w1ompk] .nav-link[href="users"] i {
    color: var(--users-color);
}

[b-c0j6w1ompk] .nav-link[href="scales"] i {
    color: var(--scales-color);
}

[b-c0j6w1ompk] .nav-link[href="cameras"] i {
    color: var(--cameras-color);
}

[b-c0j6w1ompk] .nav-link[href="customers"] i {
    color: var(--customers-color);
}

[b-c0j6w1ompk] .nav-link[href="devices"] i {
    color: var(--devices-color);
    font-weight: bolder;
}

section.main[b-c0j6w1ompk] {
    grid-row: 1 / span 2;
}


section.certificates[b-c0j6w1ompk] {
    grid-row: 3 / span 3;
}

section.online[b-c0j6w1ompk] {
    grid-row: 6 / span 2;
}

section.data[b-c0j6w1ompk] {
    grid-row: 8 / span 7;
}

section.management[b-c0j6w1ompk] {
    grid-row: 15 / span 4;
}
/* /Components/Security/LoginComponent.razor.rz.scp.css */
.login-component[b-sz5a7x3uct] {
    display: grid;
    margin-inline: auto;
    grid-template-columns: 1fr;
    grid-template-rows: min-content auto;
    grid-auto-flow: column;
    width: min(23rem, 95%);
    background-color: var(--blackcolor);
    padding-block: 2rem;
    padding-inline: 1rem;
    border-radius: 1rem;
    gap: 2rem;
    border: 3px solid var(--app-black-color);
}

.login-component-username[b-sz5a7x3uct] {
    color: inherit;
}

[b-sz5a7x3uct] .login-component-groups {
    gap: 1rem;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    transition: grid-template-rows 0.25s;
}
    [b-sz5a7x3uct] .login-component-groups[data-hide-password] {
        grid-template-rows: auto auto 0fr auto;
    }


    [b-sz5a7x3uct] .login-component-groups > div {
        overflow: hidden;
    }


.login-component-buttons[b-sz5a7x3uct] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.1rem;
}

.login-component-save-password[b-sz5a7x3uct] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}
/* /Components/Security/NotAuthorizedNavigation.razor.rz.scp.css */
.not-authorized-navigation[b-emkyob8z8b] {
    display: grid;
    width: 100%;
    height: 100%;
    place-content: center;
}

.not-authorized-content[b-emkyob8z8b] {
    display: grid;
    grid-auto-rows: auto;
    row-gap: 1rem;
    place-content: center;
    place-items: center;
    text-align: center;
    scale: 0;
    opacity: 0;
    animation: entrance-b-emkyob8z8b 0.25s 0.1s ease normal forwards;
}

[b-emkyob8z8b] .button-style{
    --color1: var(--greencolor);
    --color2: var(--whitecolor);
}

span[b-emkyob8z8b] {
    font-size: 1.5rem;
}

@keyframes entrance-b-emkyob8z8b{
    to {
        opacity: 1;
        scale: 1;
    }
}



/* /Components/Tepmplate/Cards/EntityCardTemplate.razor.rz.scp.css */
.entity-card-template-properties[b-jwgtklzhg2] {
    --title-color: var(--orangecolor);
    --title-page-color: var(--app-highlight-color);
    --title-bottom-brcolor: var(--app-highlight-color);
    --property-icon-color: var(--app-theme-color);
}

.entity-card-template-container[b-jwgtklzhg2] {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "title"
        "content"
        "audit";
}

    .entity-card-template-container .background-icon[b-jwgtklzhg2] {
        grid-area: content;
        font-size: 7rem;
        place-self: center end;
        opacity: 0.18;
    }

    .entity-card-template-container .title-area[b-jwgtklzhg2] {
        grid-area: title;
        font-weight: normal;
        color: var(--title-color);
        border-bottom: 1px solid var(--title-bottom-brcolor);
    }


    .entity-card-template-container .content-area[b-jwgtklzhg2] {
        grid-area: content;
        overflow: hidden;
    }

    .entity-card-template-container .audit-area[b-jwgtklzhg2] {
        grid-area: audit;
    }


[b-jwgtklzhg2] .entity-card-content-grid {
    margin-block: 1.5rem;
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-auto-rows: auto;
    row-gap: 0.75rem;
    width: 100%;
    overflow: hidden;
}

    [b-jwgtklzhg2] .entity-card-content-grid .content-grid-row {
        display: grid;
        grid-template-columns: subgrid;
        grid-auto-flow: column;
        grid-column: 1 / -1;
        width: 100%;
        overflow: hidden;
    }

    [b-jwgtklzhg2] .content-grid-row > span.ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

[b-jwgtklzhg2] .content-grid-row span[data-icon] {
    color: var(--app-theme-color);
    padding-inline: 0.5rem 0;
}

[b-jwgtklzhg2] .content-grid-row span[data-property] {
    color: var(--app-highlight-color);
    white-space: nowrap;
    padding-inline: 1rem;
}

[b-jwgtklzhg2] .content-grid-row span[data-value] {
    color: var(--app-color);
}

    [b-jwgtklzhg2] .content-grid-row span[data-value] a {
        color: var(--orangecolor);
        text-decoration: underline;
    }

[b-jwgtklzhg2] .phone-value {
    justify-self: start;
}
/* /Components/Tepmplate/Cards/OwnedEntitiyCardTemplate.razor.rz.scp.css */
.owned-entity-card-template[b-hzu1mzkvv4] { 
    display: grid;
    justify-items: start;
}


[b-hzu1mzkvv4] table.owned-entity-card-table {
    table-layout: auto;
    border-collapse: collapse;
}

    [b-hzu1mzkvv4] table.owned-entity-card-table td {
        padding-block: 0.5rem;
        border-inline-end: 0px solid var(--app-theme-color);
        text-overflow: ellipsis;
        vertical-align: top;
        padding-inline-start: 1rem;
    }

        [b-hzu1mzkvv4] table.owned-entity-card-table td[data-icon] {
            color: var(--app-theme-color);
        }

        [b-hzu1mzkvv4] table.owned-entity-card-table td[data-property] {
            color: var(--app-highlight-color);
            white-space: nowrap;

        }

        [b-hzu1mzkvv4] table.owned-entity-card-table td[data-value] {
            color: var(--app-color);
        }

            [b-hzu1mzkvv4] table.owned-entity-card-table td[data-value] a {
                color: var(--orangecolor);
                text-decoration: underline;
            }

        [b-hzu1mzkvv4] table.owned-entity-card-table td:last-child {
            border-inline-end: none;
        }
/* /Components/Tepmplate/Cards/Section/DetailPageSectionCard.razor.rz.scp.css */
.detail-page-section-card-properties[b-nlffwtkte2] {
    --border-color: var(--app-highlight-color);
    --background-color: var(--app-content-bgcolor);
    --disabled-bgcolor: var(--app-disabled-bgcolor);
    --text-color: var(--app-content-color);
    --header-bgcolor: transparent;
    --header-color: var(--app-highlight-color);
    --disabled-header-color: var(--app-disabled-color);
}


.detail-page-section-card[b-nlffwtkte2] {
    container: detail-page-section-card / inline-size;
    background-color: var(--background-color);
    color: var(--text-color);
    height: auto;
    border-radius: 0.5rem;
    border: 2px solid var(--border-color);
    display: grid;
    gap: 0;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header"
        "content";
}

    .detail-page-section-card[data-is-disabled][b-nlffwtkte2] {
        background-color: var(--disabled-bgcolor);
        pointer-events: none;
    }

        .detail-page-section-card[data-is-disabled] .header[b-nlffwtkte2] {
            color: var(--disabled-header-color);
        }

        .detail-page-section-card[data-is-disabled] .content[b-nlffwtkte2] {
            opacity: 0.25;
        }

    .detail-page-section-card .header[b-nlffwtkte2] {
        background-color: var(--header-bgcolor);
        color: var(--header-color);
        grid-area: header;
        padding-inline: 0.5em;
        padding-block: 0.5em;
        display: grid;
        align-items: center;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title buttons";
    }

.header .title[b-nlffwtkte2] {
    grid-area: title;
    font-weight: normal;
}

.header .buttons[b-nlffwtkte2] {
    grid-area: buttons;
    display: grid;
    gap: 0.5em;
    height: 100%;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    grid-template-rows: 1fr;
    align-items: center;
}

.content[b-nlffwtkte2] {
    grid-area: content;
    display: grid;
    grid-auto-rows: auto;
    gap: 3rem;
    padding-block: 1rem 1rem;
    padding-inline: 0.5rem;
    border-radius: 0rem 0rem 0.5rem 0.5rem;
    overflow: hidden;
}

    /* Padding depends on a child SectionLayout layout type. */
    .content:has(.section-layout .card-layout)[b-nlffwtkte2] {
        padding-block-end: 0.5rem;
    }

    /* Padding depends on a child SectionLayout layout type. */
    .content:has(.section-layout :is(.table-layout, .map-layout))[b-nlffwtkte2] {
        padding-block-end: 0.5rem;
    }


[b-nlffwtkte2] .group-buttons {
    display: grid;
    justify-content: end;
    grid-template-rows: 1fr;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    gap: 0.25rem;
}


/*#region truck, trailer pages */
[b-nlffwtkte2] .actual-weight {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    color: var(--orangecolor);
    align-items: baseline;
}

[b-nlffwtkte2] .value-units {
    display: flex;
    direction: ltr;
    align-items: baseline;
}

[b-nlffwtkte2] .value-units .value {
    font-size: 1.25em;
}

[b-nlffwtkte2] .value-units .units {
    font-size: 1em;
}

    [b-nlffwtkte2] .actual-weight .translation {
        color: var(--app-color);
        margin-inline-start: 0.5ch;
    }
/*#endregion */

/*#region general */
[b-nlffwtkte2] .no-content-yet {
    color: var(--lightyellowcolor);
    font-size: 1rem;
}
/*#endregion*/

@container detail-page-section-card (width < 36rem) {
    .content[b-nlffwtkte2] {
        gap: 2.0rem;
    }

    .header .title[b-nlffwtkte2] {
        font-size: 1.2rem;
    }

    .header .buttons[b-nlffwtkte2] {
        gap: 0.2em;
    }
}
/* /Components/Tepmplate/Cards/Section/SectionLayout.razor.rz.scp.css */
.section-layout[b-3qbtt1a6n4] {
    container-name: section-layout-container;
    container-type: inline-size;
}

.properties-layout[b-3qbtt1a6n4] {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    gap: 3rem 1.5rem;
}

    .properties-layout[data-column-count="2"][b-3qbtt1a6n4] {
        grid-template-columns: 1fr 1fr;
    }

    .properties-layout[data-column-count="3"][b-3qbtt1a6n4] {
        grid-template-columns: 1fr 1fr 1fr;
    }

.table-layout[b-3qbtt1a6n4] {
    height: 100%;
    max-height: 20rem;
    overflow-y: auto;
}

.list-layout[b-3qbtt1a6n4] {
    height: 100%;
    max-height: 30rem;
    overflow-y: auto;
}

.card-layout[b-3qbtt1a6n4] {
    overflow-y: auto;
}

.map-layout[b-3qbtt1a6n4] {
    border-radius: 0.25rem;
    overflow: hidden;
}

[b-3qbtt1a6n4] :is(.group, .group-content):has(.table-layout,.list-layout,.card-layout) {
    overflow: hidden;
}

[b-3qbtt1a6n4] .range-container {
    padding-block-start: 1rem;
}

[b-3qbtt1a6n4] .span-all-columns {
    grid-column: 1 / -1;
}

@container section-layout-container (width < 36rem) {
    .properties-layout[b-3qbtt1a6n4] {
        gap: 1.5rem 1rem;
    }

        .properties-layout[data-column-count][b-3qbtt1a6n4] {
            grid-template-columns: 1fr;
        }

    .list-layout[b-3qbtt1a6n4] {
        max-height: 30rem;
    }
}
/* /Components/Tepmplate/FormTemplate.razor.rz.scp.css */
.form-template-container[b-zauel7dfl1] {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
/* /Components/Tepmplate/Lists/EntityCardListTemplate.razor.rz.scp.css */
.entity-card-list-template-properties[b-v7yhn8ezok] {
    --on-hover-other-cards-brcolor: var(--app-black-color);
    --card-bgcolor: var(--app-content-bgcolor);
    --card-color: var(--app-content-color);
    --card-brcolor: var(--app-content-brcolor);
    --card-hover-brcolor: var(--app-highlight-color);
    --remove-button-color: var(--app-highlight-color);
    --remove-button-hover-color: var(--redcolor);
}

.entity-card-list-template-container[b-v7yhn8ezok] {
    container: entity-card-list-template-container / inline-size;
}


[b-v7yhn8ezok] .list {
    display: grid;
    gap: 1rem;
    padding-block: 1rem;
    padding-inline: 1rem;
    list-style-type: none;
    grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
    grid-auto-rows: min-content;
}

    [b-v7yhn8ezok] .list:has(.card:hover) .card:not(:hover) {
        border-color: var(--on-hover-other-cards-brcolor);
    }


[b-v7yhn8ezok] .card {
    background-color: var(--card-bgcolor);
    color: var(--card-color);
    cursor: pointer;
    padding: 1rem;
    isolation: isolate;
    border: 2px solid var(--card-brcolor);
    border-radius: 0.5rem;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas: "stack";
}

    [b-v7yhn8ezok] .card:hover {
        border-color: var(--card-hover-brcolor);
    }

    .card-remove-button:hover[b-v7yhn8ezok] {
        color: var(--remove-button-hover-color);
    }

.entity-card-area[b-v7yhn8ezok] {
    grid-area: stack;
    display: grid;
    grid-template-areas: "card-area-stack";
    z-index: 0;
    font-size: 1rem;
}

    .entity-card-area[b-v7yhn8ezok] >  * {
        grid-area: card-area-stack;
    }


    .entity-card-area .card-remove-button[b-v7yhn8ezok] {
        place-self: start end;
        color: var(--remove-button-color);
        background-color: transparent;
        z-index: 1;
        font-size: 1.2em;
        transition: color 0.2s;
    }

@container entity-card-list-template-container (width < 34rem) {
    [b-v7yhn8ezok] .list {
        padding-block: 0.5rem;
        padding-inline: 0.25rem;
    }

        [b-v7yhn8ezok] .list.no-space {
            padding-block-start: 0.0rem;
            margin-block-start: -0.5rem;
        }

    .entity-card-area[b-v7yhn8ezok] {
        font-size: 0.9rem;
    }

    [b-v7yhn8ezok] .card {
        padding: 0.5rem;
    }
}
/* /Components/Tepmplate/Lists/SingleSelectListTemplate.razor.rz.scp.css */
.single-select-list-template[b-bn4xx0uvpa] {
    container: single-select-list-template / inline-size;
}

[b-bn4xx0uvpa] .list {
    display: grid;
    grid-auto-rows: auto;
    grid-row-gap: 2rem;
    padding-inline: 1rem;
    padding-block: 1rem;
}


[b-bn4xx0uvpa] .item {
    outline-offset: -3px;
    background-color: var(--blackcolor);
    border: 3px solid var(--app-black-color);
    outline: 3px solid transparent;
    border-radius: 0.5rem;
    transition: outline-color 0.5s;
    padding-block: 0.5rem;
}

    [b-bn4xx0uvpa] .item:hover:not([data-selected-item]) {
        cursor: pointer;
        background: var(--app-black-color);
    }


    [b-bn4xx0uvpa] .item[data-selected-item] {
        outline-color: var(--app-highlight-color);
    }


@container single-select-list-template (width < 34rem) {
    [b-bn4xx0uvpa] .list {
        padding-inline: 0.25rem;
        grid-row-gap: 1rem;
    }

    [b-bn4xx0uvpa] .item {
    }
}
/* /Components/Tepmplate/Modals/EntityAdditionModalTemplate.razor.rz.scp.css */
.entity-add-template-properties[b-cjxpbja6gg] {
    --border-color: var(--app-modal-border-color);
    --title-color: var(--app-theme-color);
    --background-color: var(--app-content-bgcolor);
    --text-color: var(--app-content-color);
    --header-bgcolor: var(--app-header-bgcolor);
    --header-color: var(--app-header-color);
}

.entity-add-template-container[b-cjxpbja6gg] {
    display: grid;
    max-height: 95%;
    width: min(80rem, 98%);
    border-radius: 0.5rem;
    border: 2px solid var(--border-color);
    gap: 1rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header"
        "section-cards";
    overflow: hidden;
    background-color: var(--background-color);
    place-self: center;
}

    .entity-add-template-container[data-single-card][b-cjxpbja6gg] {
        width: min(50rem, 98%);
    }

.header[b-cjxpbja6gg] {
    color: var(--header-color);
    background-color: var(--header-bgcolor);
    grid-area: header;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr auto;
    grid-auto-flow: row;
    align-items: center;
    padding-inline: 0.5rem;
    padding-block: 0.5rem;
}


    .header .title[b-cjxpbja6gg] {
    }

    .header .buttons[b-cjxpbja6gg] {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }


.section-cards[b-cjxpbja6gg] {
    grid-area: section-cards;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
    grid-auto-rows: max-content;
    gap: 1rem;
    padding-inline: 1rem;
    padding-block: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
}
/* /Components/Tepmplate/Modals/EntitySelectionModalTemplate.razor.rz.scp.css */
.entity-selection-modal-template-properties[b-hqno9ufq5v] {
    --item-counter-bgcolor: var(--blackcolor);
    --item-counter-color: var(--app-highlight-color);
    --border-color: var(--app-modal-border-color);
    --title-color: var(--app-theme-color);
    --background-color: var(--app-content-bgcolor);
    --text-color: var(--app-content-color);
    --header-bgcolor: var(--app-header-bgcolor);
    --header-color: var(--app-header-color);
    --local-card-bgcolor: #181818ff;
}


.entity-selection-modal-template[b-hqno9ufq5v] {
    --table-max-column-count: 10;
    background-color: var(--background-color);
    color: var(--text-color);
    display: grid;
    border-radius: 0.5rem;
    border: 2px solid var(--border-color);
    height: 79svh;
    width: min(99svw, calc(var(--table-max-column-count) * 13rem));
    overflow: hidden;
    gap: 0.0rem;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header"
        "scroller";
    place-self: center;
}

.header[b-hqno9ufq5v] {
    background-color: var(--header-bgcolor);
    color: var(--header-color);
    grid-area: header;
    display: grid;
    gap: 0.5rem 0.25rem;
    padding-block: 0.5rem;
    padding-inline: 0.5rem;
    align-items: start;
    grid-template-columns: 1fr auto;
    grid-template-rows: min-content min-content;
    grid-template-areas:
        "title-counter buttons"
        "search        search";
}

.title-counter-wrapper[b-hqno9ufq5v] {
    grid-area: title-counter;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    row-gap: 0.0rem;
    align-items: baseline;
}

    .title-counter-wrapper .title[b-hqno9ufq5v] {
        color: var(--title-color);
        line-height: normal;
    }

    .title-counter-wrapper .item-counter[b-hqno9ufq5v] {
        background-color: var(--item-counter-bgcolor);
        padding: 0.1rem 0.25rem;
        border-radius: 0.25rem;
        color: var(--item-counter-color);
        font-size: 0.8rem;
        line-height: normal;
        direction: ltr;
    }

.header-buttons[b-hqno9ufq5v] {
    grid-area: buttons;
    justify-self: end;
    display: flex;
    flex-flow: row nowrap;
    gap: 0.5rem;
}

    .header-buttons[b-hqno9ufq5v]  .header-button-tooltip {
        height: 100%;
    }


    .header-buttons[b-hqno9ufq5v]  .header-button-tooltip.close {
        display: grid;
    }

    .header-buttons[b-hqno9ufq5v]  .header-button-tooltip.view {
        display: none;
    }



.search[b-hqno9ufq5v] {
    grid-area: search;
}

    .search[b-hqno9ufq5v]  .search-input {
        padding-block: 0.25rem;
        padding-inline: 0.5rem;
        border-radius: 0.25rem;
    }

[b-hqno9ufq5v] .scroller {
    grid-area: scroller;
}

.table-fragment[b-hqno9ufq5v] {
    display: block;
}

.cards-fragment[b-hqno9ufq5v] {
    display: none;
}

    .cards-fragment[b-hqno9ufq5v]  .card {
        background-color: var(--local-card-bgcolor);
    }


@media (width < 34rem) {

    .entity-selection-modal-template[b-hqno9ufq5v] {
        height: 95svh;
    }

    .cards-fragment[data-view-type="cards"][b-hqno9ufq5v] {
        display: block;
    }

    .table-fragment[data-view-type="cards"][b-hqno9ufq5v] {
        display: none;
    }

    .header-buttons[b-hqno9ufq5v]  .header-button-tooltip.view {
        display: inline-grid;
    }
}
/* /Components/Tepmplate/Modals/SelectionModalTemplate.razor.rz.scp.css */
.selection-modal-template[b-r9yfpupy9d] {
    margin-inline: auto;
    align-self: center;
    width: min(var(--min-width), 98%);
    height: max-content;
    min-height: 49svh;
    max-height: 98svh;
    display: grid;
    overflow: hidden;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "body"
        "footer";
    border-radius: 0.5rem;
    border: 2px solid var(--app-highlight-color);
    background-color: var(--blackcolor);
}

.selection-modal-template-header[b-r9yfpupy9d] {
    grid-area: header;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}


.selection-modal-template-body[b-r9yfpupy9d] {
    grid-area: body;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;   
}

.selection-modal-template-header[b-r9yfpupy9d] {
    grid-area: header;
    display: flex;
    flex-flow: row nowrap;
    gap: 0.5rem;
    justify-content: space-between;
    padding-block: 0.5rem 1.25rem;
    padding-inline: 0.5rem;
}

.selection-modal-template-title[b-r9yfpupy9d] {
    background: linear-gradient(90deg, var(--orangecolor), var(--app-color));
}

[dir="rtl"] .selection-modal-template-title[b-r9yfpupy9d] {
    background: linear-gradient(90deg, var(--app-color),var(--orangecolor));
}

.selection-modal-template-footer[b-r9yfpupy9d] {
    grid-area: footer;
    display: grid;
    grid-auto-rows: min-content;
    gap: 0.5rem;
    justify-items: center;
    padding-block: 1.25rem;
}


    .selection-modal-template-footer[b-r9yfpupy9d]  .set-button {
        width: max-content;
        padding-inline: 1rem;
    }


.selection-modal-template-body[b-r9yfpupy9d]  .table-properties {
    --horizontal-lines-width: 2px;
    --vertical-lines-width: 0px;
    --lines-color: var(--darkcolor);
}
/* /Components/Tepmplate/Pages/DetailPageTemplate.razor.rz.scp.css */
.detail-page-template-properties[b-ddul2mwkv7] {
    --header-bgcolor: var(--app-page-header-bgcolor);
    --header-color: var(--app-page-header-color);
    --header-add-color: var(--greencolor);
    --header-edit-color: var(--bluecolor);
}

.detail-page-template-container[b-ddul2mwkv7] {
    color: var(--text-color);
    height: 100%;
    display: grid;
    isolation: isolate;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "content";
}

    .detail-page-template-container .header[b-ddul2mwkv7] {
        background-color: var(--header-bgcolor);
        color: var(--header-color);
        grid-area: header;
        padding-inline: 0.5rem;
        padding-block: 0.75rem;
        box-shadow: var(--app-box-shadow-top-bar);
        gap: 0.5rem;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto;
        grid-template-areas: "title buttons";
    }

.header .title[b-ddul2mwkv7] {
    grid-area: title;
    line-height: 1;
    gap: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.title h2[b-ddul2mwkv7] {
}

    .title h2 span[data-mode][b-ddul2mwkv7] {
        opacity: 0;
    }

    .title h2 span[data-mode="edit"][b-ddul2mwkv7] {
        color: var(--header-edit-color);
        animation: opacity-aniamtion-b-ddul2mwkv7 0.5s 0.5s ease-out normal forwards;
    }

    .title h2 span[data-mode="add"][b-ddul2mwkv7] {
        color: var(--header-add-color);
        animation: opacity-aniamtion-b-ddul2mwkv7 0.5s 0.5s ease-out normal forwards;
    }

@keyframes opacity-aniamtion-b-ddul2mwkv7 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.header .buttons[b-ddul2mwkv7] {
    grid-area: buttons;
    display: grid;
    grid-auto-columns: auto;
    grid-auto-flow: column;
    grid-template-rows: 1fr;
    gap: 0.5em;
    align-items: center;
    justify-items: end;
}

.detail-page-template-container .content[b-ddul2mwkv7] {
    grid-area: content;
    height: 100%;
    padding-block: 1rem;
    padding-inline: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-rows: min-content 1fr;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.content .audit[b-ddul2mwkv7] {
    padding-inline: 0.0rem;
}

.content .cards[b-ddul2mwkv7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(40rem, 100%), 1fr));
    grid-auto-rows: max-content;
    gap: 1rem;
}

/*.content .cards {
    --gap: 1rem;
    columns: var(--cards-column-count*/ /* from style */ /*) 35rem;*/ /*Chat GPT - i think this is the problem*/
    /*column-gap: var(--gap);
}*/

    .content .cards[b-ddul2mwkv7] >  * {
        margin-block-end: var(--gap);
        break-inside: avoid;
    }

    .content .cards[b-ddul2mwkv7] >  *:last-child {
        margin-block-end: 0rem;
    }


.single-card[b-ddul2mwkv7] >  div {
    flex: 0 1 30rem;
}

@media (width < 34rem) {

    .detail-page-template-container .header[b-ddul2mwkv7] {
        padding-inline: 0.25rem;
        padding-block: 0.5rem;
        gap: 0.25rem;
    }

        .detail-page-template-container .header .title[b-ddul2mwkv7] {
            font-size: 0.8rem;
        }

    .detail-page-template-container .content[b-ddul2mwkv7] {
        padding-inline: 0.5rem;
        gap: 1rem;
    }

    .single-card[b-ddul2mwkv7] >  div {
        flex-grow: 1;
    }

    .header .buttons[b-ddul2mwkv7] {
        gap: 0.25rem;
    }
}
/* /Components/Tepmplate/Pages/ListPageTemplate.razor.rz.scp.css */
.list-page-template-properties[b-u0aujqokrw] {
    --page-counter-color: var(--app-theme-color);
    --page-counter-bgcolor: var(--app-active-bgcolor);
    --on-hover-other-cards-brcolor: var(--app-black-color);
    --card-bgcolor: var(--app-content-bgcolor);
    --card-color: var(--app-content-color);
    --card-brcolor: var(--app-content-brcolor);
    --card-hover-brcolor: var(--app-highlight-color);
    --remove-button-color: var(--app-highlight-color);
    --remove-button-hover-color: var(--redcolor);
    --header-bgcolor: var(--app-page-header-bgcolor);
    --header-color: var(--app-page-header-color);
    --table-bgcolor: transparent;
}



.list-page-template[b-u0aujqokrw] {
    container: list-page-template-container / inline-size;
    height: 100%;
    display: grid;
    isolation: isolate;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "scroller";
}


.header[b-u0aujqokrw] {
    background-color: var(--header-bgcolor);
    color: var(--header-color);
    grid-area: header;
    display: grid;
    z-index: 2;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    padding-inline: 0.5rem;
    padding-block-start: 0.75rem;
    padding-block-end: 0.5rem;
    box-shadow: var(--app-box-shadow-top-bar);
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "title  counter buttons"
        "search search  search";
    align-items: center;
    line-height: 1;
}

    .header .title[b-u0aujqokrw] {
        grid-area: title;
        text-shadow: 0px 1px 1px rgb(0, 0, 0, 1);
    }

    .header .page-counter[b-u0aujqokrw] {
        grid-area: counter;
        direction: ltr;
        justify-self: end;
        display: grid;
        align-self: center;
        height: max-content;
        width: max-content;
        color: var(--page-counter-color);
        background-color: var(--page-counter-bgcolor);
        border-radius: 2rem;
        font-weight: 500;
        padding-inline: 0.5rem;
        padding-block: 0.35rem;
    }

    .header .buttons[b-u0aujqokrw] {
        grid-area: buttons;
        display: grid;
        justify-self: end;
        grid-auto-columns: auto;
        grid-auto-flow: column;
        gap: 0.5rem;
    }


    .header .search[b-u0aujqokrw] {
        grid-area: search;
        line-height: 1;
    }


[b-u0aujqokrw] .scroller {
    grid-area: scroller;
}

.table-placeholder[b-u0aujqokrw] {
    background-color: var(--table-bgcolor);
    padding-inline: 0px;
}

.card-list-placeholder[b-u0aujqokrw] {
    display: none;
}

    .card-list-placeholder[data-use-cards-only][b-u0aujqokrw] {
        display: block;
    }

        .card-list-placeholder[data-use-cards-only] + .table-placeholder[b-u0aujqokrw] {
            display: none;
        }


@container list-page-template-container (width < 34rem) {

    .header[b-u0aujqokrw] {
        padding-inline: 0.25rem;
        padding-block: 0.5rem;
        gap: 0.5rem 0.25rem;
    }

        .header .title[b-u0aujqokrw] {
            font-size: 1.4rem;
        }

        .header .page-counter[b-u0aujqokrw] {
            font-size: 0.9rem;
        }

        .header .buttons[b-u0aujqokrw] {
            gap: 0.25rem;
        }
}

@container list-page-template-container (width < 600px) {
    .card-list-placeholder[b-u0aujqokrw] {
        display: block;
    }

    .table-placeholder[b-u0aujqokrw] {
        display: none;
    }
}
/* /Components/Tepmplate/WindowTemplate.razor.rz.scp.css */
.window-template-properties[b-9vow6podhn] {
    --background-color: var(--app-content-bgcolor);
    --header-bg-color: var(--app-modal-header-bgcolor);
    --header-color: var(--app-header-color);
    --border-color: var(--app-modal-border-color);
}

.window-template[b-9vow6podhn] {
    background-color: var(--background-color);
    border: 2px solid var(--border-color);
    overflow: hidden;
    max-height: 95svh;
    border-radius: 0.5rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header"
        "body";
    place-self: center;
}

.window-template-header[b-9vow6podhn] {
    grid-area: header;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr auto auto;
    grid-auto-flow: row;
    align-items: center;
    background-color: var(--header-bg-color);
    color: var(--header-color);
    padding: 0.5rem;
}

[b-9vow6podhn] .tooltip-style{
   height: 2.2rem;
   display: grid;
}

.window-template-body[b-9vow6podhn] {
    grid-area: body;
    display: grid;
    overflow-y: auto;
}
/* /Layouts/AppBar.razor.rz.scp.css */
.app-bar[b-vfpmty5nph] {
    align-items: center;
    padding: 0.25rem 0.75rem;
    backdrop-filter: var(--app-backdrop-filter);
    background-color: var(--app-layout-bgcolor);
    display: grid;
    grid-template-columns: auto auto 1fr auto auto auto;
    grid-template-rows: auto;
    grid-template-areas: "buttons title-version . dashboard user-profile back-button";
    column-gap: 0.75rem;
    height: 4rem;
    border-block-end: 3px solid var(--app-black-color);
}
    .app-bar:not([data-user-logged-in])[b-vfpmty5nph] {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "title-version . user-profile";
    }

        .app-bar:not([data-user-logged-in]) :is(.buttons, .dashboard, .back-button-area)[b-vfpmty5nph] {
            display: none;
        }

/*#region buttons*/
    .buttons[b-vfpmty5nph] {
        grid-area: buttons;
        height: 100%;
        display: grid;
        align-items: center;
        overflow: hidden;
    }

    .buttons[b-vfpmty5nph]  .nav-menu-button {
        display: none;
        padding: 0rem;
        --icon-size: 1.25rem;
        --color2: var(--app-theme-color);
        --color1: var(--app-black-color);
    }

    .buttons[b-vfpmty5nph]  .nav-link-icon {
        height: 100%;
        overflow: hidden;
        cursor: pointer;
        transition: 0.25s ease-out;
        border-radius: 0.5rem;
    }

    .buttons[b-vfpmty5nph]  .nav-link-icon .icon-image {
        aspect-ratio: 1;
    }

[b-vfpmty5nph] .nav-link-icon.active {
    border-radius: 4rem;
    transform: rotate(360deg);
}
/*#endregion*/


/*#region title-version*/
.title-version[b-vfpmty5nph] {
    grid-area: title-version;
    display: grid;
    grid-auto-rows: auto;
}

    .title-version .skalio[b-vfpmty5nph] {
        font-size: 2rem;
        line-height: 1;
        color: var(--app-theme-color);
        text-transform: uppercase;
        text-shadow: 0px 0px 0.8rem transparent;
        transition: 0.25s text-shadow;
        display: inline-block;
    }

        .title-version .skalio:hover[b-vfpmty5nph] {
            text-shadow: 0px 0px 0.8rem var(--redcolor);
        }

    .title-version[b-vfpmty5nph]  a {
        line-height: 1;
    }

    .title-version .app-version[b-vfpmty5nph] {
        font-size: 0.7rem;
        justify-self: start;
        color: var(--app-color);
    }

    .title-version:has(.active) .app-version[b-vfpmty5nph] {
        color: var(--app-highlight2-color);
    }
/*#endregion*/

.dashboard[b-vfpmty5nph] {
    grid-area: dashboard;
}

.user-profile[b-vfpmty5nph] {
    grid-area: user-profile;
}

.back-button-area[b-vfpmty5nph] {
    grid-area: back-button;
    padding-inline: 1rem 1.25rem;
}

.back-button[b-vfpmty5nph] {
    background: transparent;
    color: var(--app-theme-color);
    text-shadow: 0 0 2px var(--app-black-color);
    font-size: 1.0rem;
    transition: scale 0.2s ease;
    cursor: pointer;
    transform: scale(1.2);
}

[dir="rtl"] .back-button i[b-vfpmty5nph] {
    rotate: 180deg;
}

.back-button:active[b-vfpmty5nph] {
    scale: 0.9;
}

    .back-button:disabled[b-vfpmty5nph] {
        color: var(--mediumgraycolor);
        pointer-events: none;
    }


@media (width < 36rem) {
    .app-bar[b-vfpmty5nph] {
        padding: 0.25rem 0.25rem;
        column-gap: 0.5rem;
    }

    .title-version .skalio[b-vfpmty5nph] {
        font-size: 1.4rem;
    }

    .buttons[b-vfpmty5nph]  .nav-menu-button {
        display: block;
    }

    .buttons[b-vfpmty5nph]  .nav-link-icon {
        display: none;
    }
}
/* /Layouts/MainLayout.razor.rz.scp.css */
.main-layout-container[b-ws4q3d312g] {
    position: fixed;
    display: grid;
    background: var(--whitecolor);
    height: 100svh;
    width: 100vw;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "app-bar-area app-bar-area"
        "nav-area body-area"
        "nav-area footer-area";
}


    .main-layout-container .app-bar-area[b-ws4q3d312g] {
        grid-area: app-bar-area;
        box-shadow: var(--app-box-shadow-top-bar);
    }


    .main-layout-container .nav-pane-area[b-ws4q3d312g] {
        grid-area: nav-area;
    }

    .main-layout-container:not([data-user-logged-in]) .nav-pane-area[b-ws4q3d312g] {
        display: none;
    }

    .main-layout-container .nav-menu-area[b-ws4q3d312g] {
        grid-area: nav-area;
        display: none;
    }

    .main-layout-container:not([data-user-logged-in]) .nav-menu-area[b-ws4q3d312g] {
        display: none;
    }

    .main-layout-container .nav-menu-area[b-ws4q3d312g]  .side-drawer {
        width: 80vw;
        overflow-y: auto;
    }

    .main-layout-container .body-area[b-ws4q3d312g] {
        grid-area: body-area;
        height: 100%;
        overflow: hidden;
        z-index: 0;
    }

    .main-layout-container[b-ws4q3d312g]  .background-image {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        position: relative;
        height: 100%;
        background-image: url('https://i.postimg.cc/RFR2Yp3q/skalio_main_1792x1024.webp');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;
        transition: scale 0.25s ease-out;
    }

        .main-layout-container[b-ws4q3d312g]  .background-image.active {
            scale: 1.05;
        }

        .main-layout-container[b-ws4q3d312g]  .background-image::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            background-color: #000000bc;
            transition: background-color 0.25s;
        }

        .main-layout-container[b-ws4q3d312g]  .background-image:is(.active)::after {
            background-color: #00000000;
        }

[b-ws4q3d312g] .navigation-curtain-properties {
    --button-and-area-display: none;
}


@media (width < 36rem) {
    .main-layout-container .nav-pane-area[b-ws4q3d312g] {
        display: none;
    }

    .main-layout-container .nav-menu-area[b-ws4q3d312g] {
        display: block;
    }
}
/* /Modals/Lookups/TruckAxleLayoutSelectionModal.razor.rz.scp.css */
.selected-truck-layout .visual-layout[b-6ui57cgmvz] {
    font-size: 2.0rem;
    line-height: 1;
    color: var(--orangecolor);
}
/* /Modals/OwnedEntities/ContactPersonModal.razor.rz.scp.css */
[b-4w9m4du4dy] .contact-person-modal {
    display: grid;
    width: 23rem;
    padding: 1rem;
    display: grid;
    grid-auto-rows: auto;
    gap: 2rem;
}


@media (width < 34rem){
    [b-4w9m4du4dy] .contact-person-modal {
        width: 90svw;
    }
}
/* /Modals/OwnedEntities/TruckVariantModal.razor.rz.scp.css */
.truck-model-variant-modal-properties[b-va67ag34oi] {
    background: var(--app-content-bgcolor);
    border: 2px solid var(--app-highlight-color);
}


.truck-model-variant-modal[b-va67ag34oi] {
    padding: 0.5rem;
    border-radius: 0.5rem;
    width: min(60rem, 98svw);
    height: max-content;
    max-height: 98svh;
    place-self: center;
    row-gap: 3rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "header"
        "vehicle-weights"
        "axle-layouts";
    overflow-x: hidden;
    overflow-y: auto;
}


header[b-va67ag34oi] {
    grid-area: header;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    color: var(--bluecolor);
}


.header-buttons[b-va67ag34oi] {
    display: flex;
    gap: 0.5rem;
}



.vehicle-weights[b-va67ag34oi] {
    grid-area: vehicle-weights;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    column-gap: 1rem;
    row-gap: 1.5rem;
}

.axle-layout-fragment[b-va67ag34oi]{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-self: end;
    gap: 0.5rem;
    transform: translateY(-0.25rem);
}

@media (width < 34rem){
    .truck-model-variant-modal[b-va67ag34oi]{
        padding: 0.5rem;
    }

    .vehicle-weights[b-va67ag34oi] {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
}
/* /Pages/Dashboard/DashboardCard.razor.rz.scp.css */
.card-section-colors[b-5q0neffmbm] {
    --certificates-section-color: var(--certificates-color);
    --online-section-color: var(--online-devices-color);
    --data-section-color: var(--customers-color);
    --management-section-color: var(--devices-color);
    --counter-color: var(--app-color);
    --counter-bgcolor: var(--app-black-color);
    --counter-outline-color: var(--darkcolor);
}

/*#region card*/
.card-style[b-5q0neffmbm] {
    --main-color: black;
    --section-color: black;
    --title-bg-color: white;
    border-radius: 0rem;
    height: 100%;
    overflow: hidden;
    background: var(--app-content-bgcolor);
    color: var(--main-color);
    cursor: pointer;
}

.card.card-style[data-disabled][b-5q0neffmbm] {
    --main-color: var(--darkgraycolor);
    --section-color: var(--darkgraycolor);
    --counter-color: var(--blackcolor);
    --counter-bgcolor: var(--darkgraycolor);
    --title-bg-color: var(--darkgraycolor);
    pointer-events: none;
}

    .card.card-style[data-disabled] .counter[b-5q0neffmbm] {
        visibility: hidden;
    }


.card[b-5q0neffmbm] {
    --border-radius: 1rem;
    display: grid;
    border-radius: var(--border-radius);
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "links";
    align-items: end;
    padding-block-end: 1rem;
}

    .card:not([data-disabled]):hover[b-5q0neffmbm] {
        box-shadow: 0 0 0.5rem 0.1rem var(--title-bg-color);
    }

        .card:not([data-disabled]):hover .card-header .title[b-5q0neffmbm] {
            color: var(--title-bg-color);
            background-color: transparent;
        }


/*#region card-header*/
.card-header[b-5q0neffmbm] {
    grid-area: header;
    line-height: 1;
    display: grid;
    grid-template-rows: 1fr max-content;
    grid-auto-flow: row;
    gap: 1rem;
}

    .card-header .title[b-5q0neffmbm] {
        color: var(--app-black-color);
        background-color: var(--title-bg-color);
        padding-block: 0.5rem;
        padding-inline: 0.75rem;
        justify-self: start;
        font-weight: bold;
        user-select: none;
        font-size: 1rem;
        border-radius: 0.0rem 0.0rem var(--border-radius) 0.0rem;
        transition: 0.5s all ease;
    }

[dir="rtl"] .card-header .title[b-5q0neffmbm] {
    border-radius: 0.0rem 0.0rem 0.0rem var(--border-radius);
}

.card-header .counters-area[b-5q0neffmbm] {
    display: grid;
    place-items: center;
}

.card-header[b-5q0neffmbm]  .counter {
    display: inline-block;
    text-align: center;
    align-content: center;
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
    color: var(--counter-color);
    background: var(--counter-bgcolor);
    outline: 2px solid var(--counter-outline-color);
    border-radius: 0.25rem;
    min-width: 1.8rem;
    min-height: 1.8rem;
    font-size: 1.1rem;
    user-select: none;
}
/*#endregion*/

.card-links[b-5q0neffmbm] {
    display: grid;
    grid-area: links;
    grid-template-rows: repeat(3, min-content);
    grid-auto-columns: auto;
    row-gap: 0.5rem;
}

    .card-links[b-5q0neffmbm] >  * {
        grid-row: 1 / -1;
    }

/*#region type-colors*/
.card-style[data-section-type="certificates" i][b-5q0neffmbm] {
    --section-color: var(--certificates-section-color);
    --title-bg-color: var(--certificates-section-color);
    --counter-outline-color: var(--certificates-section-color);
}

.card-style[data-section-type="online" i][b-5q0neffmbm] {
    --section-color: var(--online-section-color);
    --title-bg-color: var(--online-section-color);
    --counter-outline-color: var(--online-section-color);
}

.card-style[data-section-type="data" i][b-5q0neffmbm] {
    --section-color: var(--data-section-color);
    --title-bg-color: var(--data-section-color);
    --counter-outline-color: var(--data-section-color);
}

.card-style[data-section-type="management" i][b-5q0neffmbm] {
    --section-color: var(--management-section-color);
    --title-bg-color: var(--management-section-color);
    --counter-outline-color: var(--management-section-color);
}


.card-style[data-card-type="certificates" i][b-5q0neffmbm] {
    --main-color: var(--certificates-color);
    --title-bg-color: var(--certificates-color);
    --counter-outline-color: var(--certificates-color);
}

.card-style[data-card-type="online" i][b-5q0neffmbm] {
    --main-color: var(--online-devices-color);
    --title-bg-color: var(--online-devices-color);
    --counter-outline-color: var(--online-devices-color);
}

.card-style[data-card-type="trucks" i][b-5q0neffmbm] {
    --main-color: var(--trucks-color);
    --title-bg-color: var(--trucks-color);
    --counter-outline-color: var(--trucks-color);
}

.card-style[data-card-type="truckmodels" i][b-5q0neffmbm] {
    --main-color: var(--truckmodels-color);
    --title-bg-color: var(--truckmodels-color);
    --counter-outline-color: var(--truckmodels-color);
}

.card-style[data-card-type="trailers" i][b-5q0neffmbm] {
    --main-color: var(--trailers-color);
    --title-bg-color: var(--trailers-color);
    --counter-outline-color: var(--trailers-color);
}

.card-style[data-card-type="drivers" i][b-5q0neffmbm] {
    --main-color: var(--drivers-color);
    --title-bg-color: var(--drivers-color);
    --counter-outline-color: var(--drivers-color);
}

.card-style[data-card-type="products" i][b-5q0neffmbm] {
    --main-color: var(--products-color);
    --title-bg-color: var(--products-color);
    --counter-outline-color: var(--products-color);
}

.card-style[data-card-type="sites" i][b-5q0neffmbm] {
    --main-color: var(--sites-color);
    --title-bg-color: var(--sites-color);
    --counter-outline-color: var(--sites-color);
}

.card-style[data-card-type="customers" i][b-5q0neffmbm] {
    --main-color: var(--customers-color);
    --title-bg-color: var(--customers-color);
    --counter-outline-color: var(--customers-color);
}

.card-style[data-card-type="users" i][b-5q0neffmbm] {
    --main-color: var(--users-color);
    --title-bg-color: var(--users-color);
    --counter-outline-color: var(--users-color);
}

.card-style[data-card-type="scales" i][b-5q0neffmbm] {
    --main-color: var(--scales-color);
    --title-bg-color: var(--scales-color);
    --counter-outline-color: var(--scales-color);
}

.card-style[data-card-type="cameras" i][b-5q0neffmbm] {
    --main-color: var(--cameras-color);
    --title-bg-color: var(--cameras-color);
    --counter-outline-color: var(--cameras-color);
}

.card-style[data-card-type="devices" i][b-5q0neffmbm] {
    --main-color: var(--devices-color);
    --title-bg-color: var(--devices-color);
    --counter-outline-color: var(--devices-color);
}
/*#endregion*/
/* /Pages/Dashboard/DashboardCardLink.razor.rz.scp.css */
.dashborad-card-link[b-lirj0giw5h] {
    position: relative;
    cursor: pointer;
    display: grid;
    grid-template-rows: subgrid;
    grid-template-areas:
        "top-content"
        "icon"
        "title";
    justify-items: center;
    justify-self: center;
    line-height: 1;
}

.top-content-wrapper[b-lirj0giw5h] {
    grid-area: top-content;
    position: absolute;
}

.link-icon[b-lirj0giw5h] {
    grid-area: icon;
    align-self: end;
    font-size: 2.3rem;
    transform-origin: center center;
}

.link-title[b-lirj0giw5h] {
    grid-area: title;
    align-self: start;
}

.rotate-transition[b-lirj0giw5h] {
    transition: 0.25s ease;
    transform: rotate(0deg);
}

.scale-transition[b-lirj0giw5h] {
    transition: 0.25s ease;
    transform: scale(1);
}

.dashborad-card-link:hover i[b-lirj0giw5h] {
    filter: contrast(1.5);
}

.dashborad-card-link:has(.rotate-transition):hover i[b-lirj0giw5h] {
    transform: rotate(90deg);
}

.dashborad-card-link:has(.scale-transition):hover i[b-lirj0giw5h] {
    transform: scale(1.1);
}
/* /Pages/Dashboard/DashboardPage.razor.rz.scp.css */
.dashboard[b-4ph98nvmnk] { 
    container: dashboard-container / inline-size;
    height: 100%;
    background: color(from var(--app-black-color) srgb r g b / 0.7);
    display: grid;
    grid-template-areas: "stack";
}

.card-list[b-4ph98nvmnk] {
    --gap: 1rem;
    z-index: 0;
    grid-area: stack;
    list-style-type: none;
    display: grid;
    height: 100%;
    grid-auto-rows: 13rem;
    grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr));
    gap: var(--gap);
    padding: var(--gap);
    overflow-y: auto;
    overflow-x: hidden;
}

@supports (animation-delay: calc(sibling-index() * 0.1s)) {
    .card-list:not([data-already-animated]) > li[b-4ph98nvmnk] {
        opacity: 0;
        scale: 1.25;
        animation: bounce-b-4ph98nvmnk 0.4s ease-in-out forwards;
        animation-delay: calc(sibling-index() * 0.1s);
    }
}


@keyframes bounce-b-4ph98nvmnk {
    60% {
        opacity: 1;
        scale: 0.9;
    }

    80% {
        opacity: 1;
        scale: 1.08;
    }

    100% {
        opacity: 1;
        scale: 1;
    }
}


[b-4ph98nvmnk] .certificate-progress-badge {
    display: inline-block;
    padding-inline: 0.5rem;
    padding-block: 0.25rem;
    border-radius: 0.25rem;
    transform: translateY(-2rem);
}

.online-counters[b-4ph98nvmnk] {
    display: grid;
    width: 100%;
    grid-template-rows: min-content max-content;
    grid-auto-columns: 1fr;
    list-style-type: none;
    row-gap: 0.25rem;
}

    .online-counters > li[b-4ph98nvmnk] {
        display: grid;
        grid-row: 1 / -1;
        grid-template-rows: subgrid;
        place-items: center;
        font-size: 1.1rem;
        gap: 0.5rem;
    }

        .online-counters > li i[b-4ph98nvmnk] {
            font-size: 1.3rem;
        }


            .online-counters > li i.device[b-4ph98nvmnk] {
                font-weight: bold;
            }

        .online-counters > li span[b-4ph98nvmnk] {
            color: var(--orangecolor) !important;
        }


.floating-button[b-4ph98nvmnk] {
    grid-area: stack;
    place-self: end end;
    z-index: 1;
    margin-inline-end: 2rem;
    margin-block-end: 2rem;
}

@container dashboard-container (width < 32rem) {

    .card-list[b-4ph98nvmnk] {
        --gap: 0.75rem;
    }

    .floating-button[b-4ph98nvmnk] {
        grid-area: stack;
        place-self: end end;
        z-index: 1;
        margin-inline-end: 1rem;
        margin-block-end: 1rem;
    }
}

@media (hover: none) and (pointer: coarse) {
    .card-list[b-4ph98nvmnk] >  li:hover {
        box-shadow: none !important;
    }
}
/* /Pages/Index.razor.rz.scp.css */
.index-page[b-h3s33q18m9] {
    display: grid;
    padding-block: 0.5rem;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    align-items: center;
}
/* /RealTime/Components/CameraRTC.razor.rz.scp.css */
.camera-rtc[b-6xq4fl2vtr]  .plate .number {
    color: var(--blackcolor);
}

.camera-rtc[b-6xq4fl2vtr]  .plate-camera-properties {
    --hf-br-radius: 0.5em;
    --hf-padding-inline: 1.0em;
    --hf-padding-block: 0.25em;
    --hf-box-shadow: 0 0 0.25em 0 rgb(0 0 0 / 0.5);
    --small-font-size: 0.8em;
    --small-font-color: var(--graycolor);
    --plate-led-color: #f2d200;
    --icon-manufacturer-color: var(--graycolor);
    --camera-bg-color: var(--darkcolor);
    --header-bg-color: var(--greencolor);
    --header-color: var(--blackcolor);
    --footer-bg-color: var(--camera-bg-color);
}
/* /RealTime/Components/DeviceItemRTC.razor.rz.scp.css */
.device-item-rtc[b-o189hfc3wh] {
    container-name: device-item;
    container-type: inline-size;
}

[b-o189hfc3wh] .connector-layout-properties {
    --items-gap: 3rem;
    --h-line-size: 12px;
    --line-width: 2px;
    --line-color: var(--darkgraycolor);
    --dot-color: var(--orangecolor);
    --dot-width: calc(var(--line-width) * 3);
    --content-padding-inline-end: 0.0rem;
}

@container device-item (width < 25rem) {
    [b-o189hfc3wh] .connector-layout-properties {
        --items-gap: 1.5rem;
        --h-line-size: 6px;
        --line-width: 2px;
        --dot-width: calc(var(--line-width) * 2);
    }
}
/* /RealTime/Components/DeviceRTC.razor.rz.scp.css */
.device-rt-container[b-s61t9nfgqr] {
    container: device-rt-container / inline-size;
}

.device-rt-properties[b-s61t9nfgqr] {
    --ip-endpoints-bgcolor: var(--app-black-color);
    --ip-endpoints-color: var(--app-theme-color);
    --background-color: var(--blackcolor);
    --header-color: var(--app-header-color);
    --header-bgcolor: var(--app-black-color);
    --header-brcolor: var(--greencolor);
    --header-buttons-bgcolor: var(--darkcolor);
    --header-buttons-hover-color: var(--app-black-color);
    --scale-counter-bg-color: var(--darkcolor);
    --scale-counter-color: var(--greencolor);
    --title-translate-start: translateX(-100%);
    --border: 2px solid var(--greencolor);
    --border-radius: 1em;
}

[dir=rtl] .device-rt-properties[b-s61t9nfgqr] {
    --title-translate-start: translateX(100%);
}

.device-rt[b-s61t9nfgqr] {
    position: relative;
    width: min(100rem, 100%);
    justify-self: center;
    display: grid;
    box-shadow: 0 2px 3px -2px rgba(0,0,0, 0.5);
    overflow: visible;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: 100%;
    grid-template-areas:
        "header"
        "counter"
        "device-items";
    border: var(--border);
    border-radius: var(--border-radius);
    background-color: var(--background-color);
    gap: 0.5rem;
}

    .device-rt[data-state-working][b-s61t9nfgqr] {
        pointer-events: none;
    }

        .device-rt[data-state-working] .device-items-container[b-s61t9nfgqr] {
            opacity: 0.5;
        }

.ip-endpoints[b-s61t9nfgqr] {
    display: flex;
    justify-self: center;
    position: absolute;
    inset-block-start: 0;
    flex-direction: column;
    color: var(--ip-endpoints-color);
    background-color: var(--ip-endpoints-bgcolor);
    line-height: 1;
    gap: 0.5em;
    padding: 0.5em 0.75em;
    transition: transform 0.4s ease, opacity 0.2s;
    border: var(--border);
    border-radius: var(--border-radius);
}

    .ip-endpoints[data-show-ip][b-s61t9nfgqr] {
        opacity: 1;
        transform: translateY(-50%);
    }

    .ip-endpoints:not([data-show-ip])[b-s61t9nfgqr] {
        opacity: 0;
        transform: translateY(-25%);
        pointer-events: none;
        cursor: none;
    }

    .ip-endpoints a:hover[b-s61t9nfgqr] {
        text-decoration: underline;
    }


header[b-s61t9nfgqr] {
    grid-area: header;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    display: grid;
    grid-template-columns: 1fr auto;
    padding-inline: 0.5rem;
    padding-block: 1rem;
    border-block-end: 1px solid var(--header-brcolor);
    background-color: var(--header-bgcolor);
    color: var(--header-color);
    align-items: center;
}

a.device-title[b-s61t9nfgqr] {
    display: grid;
    grid-auto-rows: min-content;
    gap: 0.5em;
    transform: var(--title-translate-start);
    opacity: 0;
    animation: title-animation-b-s61t9nfgqr 2s 0.5s forwards normal ease;
    line-height: 1;
}

    a.device-title[href][b-s61t9nfgqr] {
        text-decoration: underline;
        text-decoration-thickness: 0.1rem;
        text-decoration-color: var(--greencolor);
    }


@keyframes title-animation-b-s61t9nfgqr {
    25% {
        transform: translateX(0%);
    }

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

.header-buttons[b-s61t9nfgqr] {
    --border-width: 0.2em;
    --border-color: transparent;
    display: grid;
    grid-template-columns: 1fr var(--border-width) 1fr;
    grid-template-rows: min-content;
    grid-auto-flow: row;
    height: max-content;
    border-radius: 2em;
    background-color: var(--header-buttons-bgcolor);
    border: var(--border-width) solid var(--border-color);
    overflow: hidden;
}

    .header-buttons[data-disabled][b-s61t9nfgqr] {
        user-select: none;
        pointer-events: none;
        background-color: var(--darkcolor);
    }

        .header-buttons[data-disabled] button[b-s61t9nfgqr] {
            color: var(--darkgraycolor);
        }

    .header-buttons .separator[b-s61t9nfgqr] {
        background-color: var(--border-color);
    }

    .header-buttons button[b-s61t9nfgqr] {
        background-color: inherit;
        font-size: 1.1em;
        padding-block: 0.25em;
        padding-inline: 0.75em;
    }

        .header-buttons button:hover[b-s61t9nfgqr] {
            background-color: var(--header-buttons-hover-color);
        }

    .header-buttons .ip-button[b-s61t9nfgqr] {
        color: var(--app-theme-color);
    }

    .header-buttons .reload-button[b-s61t9nfgqr] {
        color: var(--redcolor);
    }

        .header-buttons .reload-button[data-state-working] i[b-s61t9nfgqr] {
            animation: rotate-animation-b-s61t9nfgqr 1s infinite linear normal;
        }

@keyframes rotate-animation-b-s61t9nfgqr {
    to {
        transform: rotate(360deg);
    }
}


.device-items-container[b-s61t9nfgqr] {
    grid-area: device-items;
    padding-inline: 1rem;
    padding-block-start: 1rem;
    padding-block-end: 3rem;
    display: grid;
    column-gap: 3rem;
    row-gap: 3rem;
    justify-content: space-around;
    grid-template-columns: repeat(auto-fit, minmax(min(25rem,100%), 30rem));
    grid-auto-rows: auto;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    overflow: visible;
    transition: opacity 0.5s ease;
}

    .device-items-container li[b-s61t9nfgqr] {
        list-style-type: none;
        filter: drop-shadow(0 0.125rem 0.25rem #00000080);
        overflow: visible;
    }

.scale-counter[b-s61t9nfgqr] {
    grid-area: counter;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    height: min-content;
    width: max-content;
    z-index: 1;
    line-height: 1;
    border-radius: 0.5em;
    padding: 0.5em 0.5em;
    margin-inline: 0.5em;
    background-color: var(--scale-counter-bg-color);
    color: var(--scale-counter-color);
    justify-self: start;
    font-weight: bold;
    font-family: DSEG7Modern;
}

    .scale-counter i[b-s61t9nfgqr] {
        font-size: 1.1em;
    }

    .scale-counter span[b-s61t9nfgqr] {
        font-size: 1.0em;
    }


@container device-rt-container (width < 34rem) {

    header[b-s61t9nfgqr] {
        padding-block: 0.5rem;
    }

    .device-items-container[b-s61t9nfgqr] {
        padding-inline: 0.25rem;
        padding-block: 0.75rem 1.25rem;
        column-gap: 0rem;
        row-gap: 6rem;
    }
    /*.header-buttons {
        --border-width: 0.1em;
        --border-color: transparent;
        grid-template-columns: min-content;
        grid-template-rows: 1fr var(--border-width) 1fr;
        grid-auto-flow: column;
    }

    .header-buttons {
        height: 100%;
    }*/

    .header-buttons button[b-s61t9nfgqr] {
        padding-block: 0.2em;
        padding-inline: 0.4em;
    }
}
/* /RealTime/Components/ScaleRTC.razor.rz.scp.css */
.scale-rtc[b-vmhcxtq5mv] {
    --dir: 1;
    position: relative;
    display: grid;
    grid-template-rows: auto;
}

html[dir="ltr"] .scale-rtc[b-vmhcxtq5mv] {
    --dir: -1;
}

.scale-rtc[b-vmhcxtq5mv]  .claimed-by {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translate3d(calc(50% * var(--dir)), -100%, 0);
    display: inline-block;
    line-height: 1.25;
    color: var(--orangecolor);
    background-color: var(--darkcolor);
    padding-inline: 0.75em;
    border-radius: 0.5rem 0.5rem 0 0;
}


.scale-rtc[b-vmhcxtq5mv]  .scale-control.scale-control-properties {
    --led-neutral-color: var(--darkcolor);
    --led-on-color: var(--greencolor);
    --led-off-color: var(--redcolor);
    --neutral-color: var(--darkgraycolor);
    --word-led-positive-color: var(--app-highlight-color);
    --word-led-negative-color: var(--redcolor);
    --word-led-neutral-color: var(--darkgraycolor);
    --switch-on-track-color: var(--greencolor);
    --switch-off-track-color: var(--redcolor);
    --switch-on-thumb-color: var(--whitefogcolor);
    --switch-off-thumb-color: var(--whitefogcolor);
    --zero-button-color1: var(--greencolor);
    --zero-button-color2: var(--whitefogcolor);
    --zero-button-disabled-color: var(--darkgraycolor);
    --zero-button-disabled-bgcolor: var(--blackcolor);
    --zero-button-disabled-brcolor: var(--blackcolor);
    --identity-panel-bg-color: var(--darkcolor);
    --identity-panel-color: var(--graycolor);
    --display-color: var(--app-theme-color);
    --display-on-bg-color: var(--app-black-color);
    --display-off-bg-color: black;
    --display-after-background: linear-gradient(180deg, #80808020 0%, #80808040 60%, #80808020 100%);
    --main-panel-bg-color: var(--darkcolor);
    --dislpay-weight-font-family: DSEG7Modern;
    --dislpay-units-font-family: DSEG14Modern;
    --state-port-font-family: Rubik;
    --barometer-bg-color: var(--darkcolor);
    --barometer-indicator-color-low: var(--greencolor);
    --barometer-indicator-color-mid: var(--orangecolor);
    --barometer-indicator-color-high: var(--redcolor);
    --loader-bg-color: #808080aa;
    --spinner-color1: var(--greencolor);
    --spinner-color2: var(--whitecolor);
    --min-height: 10.5em;
    --link-color: var(--orangecolor);
}
/* /RealTime/Components/ScaleRTTable.razor.rz.scp.css */
.scale-rt-table[b-o0dl79ur32] {
    container : scale-rt-table-container / inline-size;
}

    .scale-rt-table[b-o0dl79ur32]  .scale-rt-td {
        padding-block: 1rem;
    }

.display-screen[b-o0dl79ur32] {
    line-height: 1;
    position: relative;
    direction: ltr;
    display: grid;
    grid-auto-columns: min-content;
    grid-auto-flow: column;
    justify-content: center;
    align-items: baseline;
    isolation: isolate;
    padding-block: 0.4rem 0.3em;
    padding-inline: 0.5em;
    border-radius: 0.25em;
    color: var(--app-black-color);
    outline: 3px solid var(--greencolor);
    outline-offset: -1px;
    background-color: var(--whitecolor);
    transition: background-color 0.4s;
    min-width: 15ch;
    width: max-content;
    margin-inline: auto;
}

    .display-screen[b-o0dl79ur32]:after {
        content: "";
        position: absolute;
        opacity: 0.3;
        z-index: 1;
        inset: 0;
        background: linear-gradient(0deg, var(--blackcolor) 0%, var(--whitecolor) 40%, var(--blackcolor) 100%);
    }

    .display-screen:not([data-is-working])[b-o0dl79ur32] {
        background: var(--blackcolor);
    }

[b-o0dl79ur32] tr[data-item-opted-out] {
    background-color: var(--darkgraycolor);
}

[b-o0dl79ur32] tr[data-item-opted-out] .display-screen {
    outline-color: var(--graycolor);
    background-color: var(--lightgraycolor);
    opacity: 0.8;
}

.weight[b-o0dl79ur32] {
    font-family: DSEG7Modern;
    font-size: 1.2em;
    letter-spacing: 1px;
    font-weight: bolder;
}

.units[b-o0dl79ur32] {
    font-family: DSEG14Modern;
    font-size: 0.6em;
    font-weight: bold;
}

.loader[b-o0dl79ur32] {
    position: absolute;
    inset: 0;
    place-items: center;
    z-index: 2;
    background-color: #606060e0;
    display: grid;
}

    .loader[b-o0dl79ur32]  .spinner {
        --border-width: 2px;
        --diameter: 23px;
        --background-color: transparent;
        --color1: var(--greencolor);
        --color2: var(--whitecolor);
        --duration: 1s;
    }

[b-o0dl79ur32] .working-led {
    --neutral-color: transparent;
}

[b-o0dl79ur32] .stable-led {
    --off-color: var(--graycolor);
    --neutral-color: var(--graycolor);
}

[b-o0dl79ur32] .zero-led {
    --off-color: var(--graycolor);
    --neutral-color: var(--graycolor);
}

.status-grid[b-o0dl79ur32] {
    display: grid;
    grid-template-columns: auto auto;
    grid-auto-rows: auto;
    gap: 0.5rem 1rem;
    line-height: 1;
    justify-content: center;
}

.status-grid .status-item[b-o0dl79ur32] {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1/ -1;
    line-height: 1;
}

[b-o0dl79ur32] .claimed-by {
    display: grid;
    grid-auto-rows: auto;
    gap: 0.5rem;
    line-height: 1;
    color: var(--orangecolor);
}

[b-o0dl79ur32] .connector {
    white-space: pre-line;
}

@container scale-rt-table-container (width < 34rem) {
    [b-o0dl79ur32] .table.table-properties {
        --th-padding: 0.5em 0em;
        --td-padding: 1.0em 0em;
    }
}
/* /RealTime/Components/TopBarRTC.razor.rz.scp.css */
.topbar-rt-properties[b-twkegpfh29] {
    --background-color: var(--app-page-header-bgcolor);
    --box-shadow: var(--app-box-shadow-top-bar);
    --nav-link-color: var(--darkgraycolor);
    --nav-link-active-color: var(--app-theme-color);
    --nav-link-active-bgcolor: var(--app-black-color);
    --refresh-button-color: var(--orangecolor);
    --refresh-button-bgcolor: var(--app-black-color);
    --refresh-button-disabled-color: var(--darkgraycolor);
    --title-color: var(--app-theme-color);
}

.topbar-rt-container[b-twkegpfh29] {
    container: topbar-rt-container / inline-size;
    display: grid;
    line-height: 1;
    background-color: var(--background-color);
    box-shadow: var(--box-shadow);
    padding-block: 0.5rem 0.25rem;
    padding-inline: 0.5rem;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: auto auto 1fr auto auto;
}


.title-links[b-twkegpfh29] {
    grid-row: 1;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 1fr;
}

.title[b-twkegpfh29] {
    grid-column: 1 / span 3;
    color: var(--title-color);
}

.links[b-twkegpfh29] {
    display: grid;
    grid-column: 4 / span 2;
    grid-template-columns: subgrid;
    grid-template-rows: 1fr;
    grid-auto-flow: row;
}


[b-twkegpfh29] .nav-link {
    display: grid;
    place-content: center;
    background-color: transparent;
    border-radius: 0.25rem;
    color: var(--nav-link-color);
    padding-block: 0.5rem;
    padding-inline: 1rem;
}

    [b-twkegpfh29] .nav-link i {
        font-size: 1.1rem;
    }

    [b-twkegpfh29] .nav-link span {
        font-size: 0.9rem;
    }

[b-twkegpfh29] .nav-link-active {
    background-color: var(--nav-link-active-bgcolor);
    border-color: var(--nav-link-active-brcolor);
    color: var(--nav-link-active-color);
}


.state-bar[b-twkegpfh29] {
    grid-row: 2;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 1fr;
    grid-template-areas: "switch connection . refresh refresh";
    align-items: center;
}

[b-twkegpfh29] .switch {
    grid-area: switch;
}

.connection[b-twkegpfh29] {
    grid-area: connection;
    line-height: 1;
    position: relative;
    white-space: nowrap;
    align-content: center;
    background-color: transparent;
    text-align: center;
    color: var(--whitecolor);
    -webkit-user-select: none;
    user-select: none;
}

    .connection[data-connection-state="Connected"][b-twkegpfh29] {
        color: var(--greencolor);
    }

    .connection[data-connection-state="Disconnected"][b-twkegpfh29] {
        color: var(--redcolor);
    }

    .connection:is([data-connection-state="Connecting"],[data-connection-state="Reconnecting"])[b-twkegpfh29] {
        color: var(--orangecolor);
    }

        .connection:is([data-connection-state="Connecting"],[data-connection-state="Reconnecting"])[b-twkegpfh29]::after {
            content: "";
            margin-inline: 0.1rem;
            animation: dots-animation-b-twkegpfh29 1s steps(3) infinite;
        }


@keyframes dots-animation-b-twkegpfh29 {
    0% {
        content: "";
    }

    33% {
        content: ".";
    }

    66% {
        content: "..";
    }

    100% {
        content: "...";
    }
}

.refresh-button[b-twkegpfh29] {
    grid-area: refresh;
    display: inline-grid;
    line-height: 1;
    align-items: center;
    grid-template-columns: auto auto;
    background-color: var(--refresh-button-bgcolor);
    padding-inline: 0.5rem;
    border-radius: 0.25rem;
    place-content: center;
    column-gap: 0.5rem;
    height: 100%;
}

    .refresh-button span[b-twkegpfh29] {
        color: var(--app-color);
        font-weight: bolder;
        color: var(--refresh-button-color);
    }

    .refresh-button i[b-twkegpfh29] {
        font-size: 1rem;
        color: var(--refresh-button-color);
    }

    .refresh-button[disabled] :is(i, span)[b-twkegpfh29] {
        color: var(--refresh-button-disabled-color);
    }

    .refresh-button[data-is-refreshing] i[b-twkegpfh29] {
        animation: icon-rotation-b-twkegpfh29 0.5s 0s linear infinite;
    }


@keyframes icon-rotation-b-twkegpfh29 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}


@media (width < 34rem) {
    .title[b-twkegpfh29] {
        font-size: 1.4rem;
    }

    .topbar-rt-container[b-twkegpfh29] {
        padding-inline: 0.5rem;
        column-gap: 0.25rem;
        row-gap: 0.25rem;
    }
}
/* /RealTime/Layout/RealTimeLayout.razor.rz.scp.css */
.realtime-layout[b-83q80w7fuo] {
    position: relative;
    isolation: isolate;
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 100%;
    grid-template-areas:
        "topbar"
        "body";
}

.realtime-layout-topbar[b-83q80w7fuo] {
    z-index: 1;
}

.realtime-layout-body[b-83q80w7fuo] {
    grid-area: body;
    backdrop-filter: blur(1.125rem);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    z-index: 0;
}
/* /RealTime/Pages/RealTimeDevicesPage.razor.rz.scp.css */
.devices[b-yool20wn4l] {
    grid-area: devices;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    gap: 2rem;
    list-style-type: none;
}
/* /RealTime/Pages/RealTimeSettingsPage.razor.rz.scp.css */
.realtime-settings-page[b-51upn3hz2b] {
    container-name: realtime-settings-container;
    container-type: inline-size;
    display: grid;
    place-items: center;
}

.realtime-settings-grid[b-51upn3hz2b] {
    background-color: var(--app-content-bgcolor);
    border: 2px solid var(--greencolor);
    box-shadow: 0 0.5rem 3rem -1rem rgba(0, 0, 0, 0.5);
    border-radius: 1rem;
    width: min(40rem, 100%);
    padding-block: 2rem;
    padding-inline: 2rem;
    row-gap: 2rem;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-areas:
        "input-groups"
        "bottom-bar";
}

.realtime-settings-input-groups[b-51upn3hz2b] {
    grid-area: input-groups;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 2rem;
}

    .realtime-settings-input-groups[b-51upn3hz2b]  .group-header[data-has-fragment] {
        line-height: 1;
        align-items: start;
        gap: 1rem;
    }

.realtime-settings-bottom-bar[b-51upn3hz2b] {
    grid-area: bottom-bar;
    place-self: center;
}

    .realtime-settings-bottom-bar[b-51upn3hz2b]  .save-button-style {
        line-height: 1;
        height: max-content;
        padding-block: 1rem;
        padding-inline: 1rem;
    }

    .realtime-settings-bottom-bar .save-button-content[b-51upn3hz2b] {
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: auto;
        grid-auto-flow: column;
        gap: 0.5rem;
        align-items: center;
    }

    .realtime-settings-bottom-bar .save-button-text-icon[b-51upn3hz2b] {
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: auto;
        grid-auto-flow: column;
        gap: 0.5rem;
    }


.realtime-settings-bottom-bar > div:nth-child(1)[b-51upn3hz2b] {
    justify-self: end;
}

    .realtime-settings-bottom-bar > div:nth-child(2)[b-51upn3hz2b] {
        justify-self: start;
    }


@container realtime-settings-container (width < 37rem) {
    .realtime-settings-grid[b-51upn3hz2b] {
        padding-block: 0.5rem;
        padding-inline: 0.5rem;
        row-gap: 1.5rem;
    }

        .realtime-settings-grid[b-51upn3hz2b]  .group-header {
            --label-font-size: 0.9rem;
        }

    .realtime-settings-input-groups[b-51upn3hz2b] {
        gap: 1.5rem;
    }
}

[b-51upn3hz2b] .word-led-properties {
    --on-color: var(--app-highlight-color);
    --off-color: var(--redcolor);
    --neutral-color: transparent;
    --state-color: var(--neutral-color);
    --animation-duration: 1s;
}
/* /RealTime/Pages/Template/RealTimePageTemplate.razor.rz.scp.css */
.realtime-page-template[b-kwj8jrbz0e] {
    container-name: realtime-page-container;
    container-type: inline-size;
}

.realtime-page-template-grid[b-kwj8jrbz0e] {
    display: grid;
    gap: 2rem;
    padding-block: 2rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "title"
        "body";
}

.realtime-page-template-title[b-kwj8jrbz0e] {
    grid-area: title;
    line-height: 1;
    padding-block: 0.5rem;
    padding-inline: 1.5rem;
    border-radius: 1rem;
    text-align: center;
    color: var(--app-header-color);
    background-color: var(--app-black-color);
    border: 2px solid var(--greencolor);
    align-self: center;
    justify-self: center;
    user-select: none;
}

.realtime-page-template-body[b-kwj8jrbz0e] {
    grid-area: body;
}

@container realtime-page-container (width < 37rem) {

    .realtime-page-template-grid[b-kwj8jrbz0e] {
        display: grid;
        gap: 0rem;
        padding-block: 1rem;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas:
            "body";
    }

    .realtime-page-template-title[b-kwj8jrbz0e]{
        display: none;
    }

    .realtime-page-template-body[b-kwj8jrbz0e] {
        padding-inline: 0.25rem;
    }
}


/* /Views/Cards/UserCard.razor.rz.scp.css */
i[data-user-blocked][b-nzvvdc94hi] {
    color: var(--greencolor);
    font-size: 1.2rem;
}

i[data-user-blocked="False"][b-nzvvdc94hi] {
    color: var(--greencolor);
}

i[data-user-blocked="True"][b-nzvvdc94hi] {
    color: var(--redcolor);
    transform: rotate(90deg);
}
/* /Views/Tabels/OwnedEntities/ContactPersonTable.razor.rz.scp.css */
.contanct-person-table[b-o04sxq5d7w] {
    container: contanct-person-table-container / inline-size;
}

[b-o04sxq5d7w] .phone-cell {
    direction: ltr;
    color: var(--app-highlight-color);
}

[b-o04sxq5d7w] .data-cell{
    font-size: 1rem;
}

@container contanct-person-table-container (width < 34rem) {
    [b-o04sxq5d7w] .data-cell {
        font-size: 0.9rem;
    }
}
/* /Views/Tabels/OwnedEntities/TruckVariantTable.razor.rz.scp.css */
.weights[b-rsc2k35uww] {
    display: grid;
    grid-auto-rows: auto;
    gap: 1rem;
}



.weight[b-rsc2k35uww] {
    display: grid;
    grid-auto-rows: auto;
    justify-items: start;
}