:root {

    --gapMax: 120px;
    --gap: 60px;
    --gapMiddle: 40px;
    --gapMin: 20px;
    --gapMicro: 6px;

    /* --gapData: calc(var(--gap) / 2); */
    --gapData: var(--gapMin);

    --radius: 1rem;
    --radiusMin: .55rem;
    --radiusMax: 22rem;

    --pink: #fe46a2;
    --green: #2dc833;
    --darkGreen: #0db400;
    --darkBlue: #003fff;
    --blue: #0070ff;
    --blueBootstrap5: #0070ff;
    --lightBlue: #83acff;
    --gray: #2e2e2e;
    --middleGray: #b5b5b5;
    --borderGray: #e7e7e7;
    --lightGray: #f3f4f6;
    --red: #ff3838;
    --orangeRed: orangered;
    --lightBlack: #393939;
    --gold: #ff9300;
    --orange: #ff7b00;

    --blueHover: #1764ff;
    --lightBlueHover: #e1f1ff;
    --lightRedHover: #ffe1e1;
    --redHover: rgb(196, 0, 0);
    --orangeHover: #ff731b;

    --tableColor: var(--blue);
    --tableColorHover: #6e1fff;

    --inputBackground: #efefef;
    --placeholder: rgb(0 0 0 / 34%);
    --placeholderHover: rgb(0 103 255 / 22%);

    --pause: var(--gray);
    --rejected: var(--red);
    --agreement: var(--blue);

    /* --shadow-focus: 0 0 0 1px var(--lightBlue); */
    /* --shadow-focus: 0 0 0 .4px var(--lightBlue), 0 0 30px #0000001c; */
    --shadow-focus: 0 0 0 .4px var(--lightBlue);

    --buttonTransition: opacity .15s, transform .15s ease-in-out;

    --max-width: 1280px;
    --desc-min-font-size: 12.8px;
}

/* * {
    overflow-wrap: anywhere;
} */

[contenteditable] {
    user-select: text;
    outline: none;
    word-break: break-word;
}

html {
    overflow-y: scroll;
    scrollbar-width: thin;
    /* scroll-behavior: smooth; */
    text-rendering: optimizeLegibility;
}

html, input, button {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

@font-face {
    font-family: 'Segoe UI';
    font-weight: 900;
    font-style: normal;
    src: local('Segoe UI Black'), url('/files/public/static/fonts/SegoeUI/Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Segoe UI';
    font-weight: 900;
    font-style: italic;
    src: local('Segoe UI Black Italic'), url('/files/public/static/fonts/SegoeUI/BlackItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Segoe UI';
    font-weight: 700;
    font-style: normal;
    src: local('Segoe UI Bold'), 
    url('/files/public/static/fonts/SegoeUI/Bold.woff2') format('woff2'),
    url('/files/public/static/fonts/SegoeUI/Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Segoe UI';
    font-weight: 700;
    font-style: italic;
    src: local('Segoe UI Bold Italic'), 
    url('/files/public/static/fonts/SegoeUI/BoldItalic.woff') format('woff'),
    url('/files/public/static/fonts/SegoeUI/BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Segoe UI';
    font-weight: 600;
    font-style: normal;
    src: local('Segoe UI Semibold'), 
    url('/files/public/static/fonts/SegoeUI/SemiBold.woff2') format('woff2'),
    url('/files/public/static/fonts/SegoeUI/SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Segoe UI';
    font-weight: 600;
    font-style: italic;
    src: local('Segoe UI Semibold Italic'), url('/files/public/static/fonts/SegoeUI/SemiBoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Segoe UI';
    font-weight: 400;
    font-style: italic;
    src: local('Segoe UI Italic'), 
    url('/files/public/static/fonts/SegoeUI/Italic.woff2') format('woff2'),
    url('/files/public/static/fonts/SegoeUI/Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Segoe UI';
    font-weight: 400;
    font-style: normal;
    src: local('Segoe UI Regular'), local('Segoe UI'), 
    url('/files/public/static/fonts/SegoeUI/Regular.woff2') format('woff2'),
    url('/files/public/static/fonts/SegoeUI/Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Segoe UI';
    font-weight: 300;
    font-style: normal;
    src: local('Segoe UI Semilight'), 
    url('/files/public/static/fonts/SegoeUI/SemiLight.woff2') format('woff2'),
    url('/files/public/static/fonts/SegoeUI/SemiLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Segoe UI';
    font-weight: 300;
    font-style: italic;
    src: local('Segoe UI Semilight Italic'), url('/files/public/static/fonts/SegoeUI/SemiLightItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Segoe UI';
    font-weight: 200;
    font-style: normal;
    src: local('Segoe UI Light'), 
    url('/files/public/static/fonts/SegoeUI/Light.woff2') format('woff2'),
    url('/files/public/static/fonts/SegoeUI/Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Segoe UI';
    font-weight: 200;
    font-style: italic;
    src: local('Segoe UI Light Italic'), url('/files/public/static/fonts/SegoeUI/LightItalic.ttf') format('truetype');
}

html[data-os='Linux'] {
    text-rendering: geometricPrecision;
    scrollbar-width: auto;
}

html[data-os='Linux'],
html[data-os='Linux'] input, 
html[data-os='Linux'] button {
    font-family: Segoe UI, Segoe UI Emoji, system-ui, Helvetica;
}

html[data-os='Linux'] :is(
    button :is(label, .text),
    com[name=bbox] :is(legend, label),
    com[name=toggle][mode=toggle] :is(.states)
) {
    font-weight: normal;
}

input[type='text'], select, textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

h1, h2, h3, h4 {
    position: relative;
    padding: 0;
    margin: auto;
    line-height: 1;
}

h1 {
    font-size: 2.5em;
}

p, com:is([name=text], [name=ul], [name=ol]) {
    user-select: text;
    margin-bottom: auto;
}

ul, ol {
    padding: 0;
    padding-inline-start: 20px;
    margin: auto;
}

body {
    /* position: relative; */
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: var(--gapMin);
    max-width: var(--max-width);
    margin: auto auto 25vh;
    /* padding-left: calc(clamp(30px, 3vw, 100px) + var(--gapMin)); */
}

body ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: #e2e2e2;
    border-radius: var(--radius);
}

body ::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: var(--radius);
    border: none;
}

body ::-webkit-scrollbar-thumb:hover {
    background: black;
}

body.wide {
    --max-width: 1680px;
}

html.left body {
    margin-left: clamp(30px, 3vw, 100px);
    padding-left: var(--gapMin);
}

label, legend {
    /* min-width: fit-content; */
    user-select: text;
    -webkit-user-select: text;
    font-weight: 300;
    /* font-weight: lighter; */
    line-height: 1;
}

data, section, footer, main, header {
    display: flex;
    gap: var(--gap);
    flex-wrap: wrap;
    border-radius: 8px;
    align-items: flex-start;
    /* border: 2px dashed #00000017;
    padding: 10px; */
}

data {
    gap: var(--gapData);
    align-items: inherit;
    /*var(--gapMiddle)*/
}

data.column {
    flex-direction: column;
}

module {
    position: relative;
    width: fit-content;
    display: flex;
    gap: var(--gapMin);
    align-items: center;
    z-index: 1;
}

raw {
    position: relative;
    display: block;
    z-index: 1;
}

schema {
    display: none;
}

/* com.attr-check-failed:is([name=input], [name=date], [name=datetime-local], [name=select]) :is([type=input], input, select):focus {
    background-color: var(--red);
    color: white;
} */

/* com[error] {
    opacity: .3;
    pointer-events: none;
} */

r {
    background-color: var(--red);
    color: white;
    padding: 0 6px 3px;
    font-weight: bolder;
    display: inline;
    border-radius: 6px;
}



/* com */

com .wrap-com {
    display: flex;
    gap: var(--gapMicro);
    align-items: flex-start;
    flex-direction: column;
}

com .desc {
    font-size: min(var(--desc-min-font-size), .8em);
    font-weight: 200;
    /* text-wrap: balance; */
    width: min-content;
    min-width: fit-content;
    padding: 1px;
}

com .wrap-main {
    position: relative;
    display: flex;
    gap: var(--gapMin);
    align-items: center;
    width: fit-content;
}

com .wrap-main.horizontal {
    gap: var(--gapMicro);
    align-items: flex-start;
    flex-direction: column;
    max-width: 750px;
}

/* com */



/* button */

button {
    outline: none;
    border: none;
    height: 41.2px;
    /* padding: 0 20px 2px; */
    padding-inline: 12px;
    padding-block-end: 1.5px;
    /* font-weight: 500; */
    font-weight: 300;
    border-radius: var(--radius);
    user-select: none;
    cursor: pointer;
    position: relative;
    background: var(--blue);
    color: white;
    box-shadow: none;
    line-height: 1;
    min-width: min-content;
    transition: .15s;
}

button:active {
    transform: translateY(1.5px) scale(0.96) !important;
    transition: .05s !important;
}

button:hover {
    background: var(--darkBlue);
}

button::after {
    content: '';
    position: absolute;
    border-radius: var(--radiusMax);
    width: 5px;
    height: 5px;
    background: white;
    left: 7px;
    top: 6px;
    z-index: 1;
    transform: scale(1.5);
    opacity: 0;
    transition: var(--buttonTransition);
    pointer-events: none;
}

button:focus-visible::after {
    transform: none;
    opacity: 1;
}

button:has(.addon) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gapMicro);
}

button .addon.before {
    width: fit-content;
    max-width: 18px;
    height: 18.5px;
    pointer-events: none;
    --color: white;

    &[type='dot'] {
        position: relative;
        display: flex;
        align-items: center;

        &:before {
            content: "";
            display: block;
            border-radius: var(--radius);
            pointer-events: none;
        }
    }

    &[type="img"] {
        display: flex;
        align-items: center;
        margin: auto;

        & img {
            width: 100%;
            aspect-ratio: var(--ratio);
            --ratio: 12 / 9;
        }

        &:before {
            display: none;
        }
    }
}

button .addon.before:before {
    content: '';
    display: inline-block;
    width: 18px;
    min-width: 18px;
    height: 18px;
    background-color: var(--color);
    mask-image: var(--src);
    mask-size: contain;
    -webkit-mask-image: var(--src);
    -webkit-mask-size: contain;
}

button label {
    text-align: left;
    pointer-events: none;
}

/* button */



/* header */

com[name="header"] {
    display: block;
}

/* header */

/* toggle */

com[name='toggle'] .toggle {
    display: flex;
    gap: calc(var(--gapMin) / 2);
    align-items: center;

    & input {
        width: 100%;
        height: 100%;
        margin: auto;
        position: relative;
        z-index: 1;
        opacity: 0;
        cursor: pointer;
    }
}

com[name='toggle'][mode='switch'] {

    & .toggle {
        outline: none;
        margin: 4px auto;
        /* vertical-align: top; */
        cursor: pointer;
        box-sizing: border-box;
        position: relative;
        background: #bfbfbf;
        border-radius: var(--radiusMax);
        width: 62px;
        min-width: 62px;
        height: 34px;
        overflow: hidden;
        transition: .3s;

        &::after {
            content: '';
            position: absolute;
            width: 28px;
            height: 28px;
            border-radius: var(--radiusMax);
            background: #ffffff;
            top: calc(50% - 14px);
            right: 4px;
            transition: .3s cubic-bezier(0.25, 0.1, 0, 1.22);
            transform: translateX(-26px);
        }

        &:has(input:checked) {
            background: var(--red);

            &::after {
                transform: none;
            }
        }
    }
}

com[name='toggle'][mode='toggle'] {

    align-self: anchor-center;

    & .toggle {
        position: relative;
        border-radius: var(--radiusMax);
        cursor: pointer;
        overflow: hidden;
        user-select: none;
        transition: .15s;

        & input {
            position: absolute;
        }

        & .states {
            display: flex;
            font-weight: 300;
            font-size: 13.3px;
            line-height: 1;
            pointer-events: none;
            transition: .15s;
            background-color: var(--blue);
            color: greenyellow;

            & > div {
                box-sizing: border-box;
                transition: .15s;
            }

            & > div:first-child {
                clip-path: polygon(0% 0%, 90% 0, 100% 100%, 100% 99%, 0% 100%);
                padding: 4px 12px 9px;
            }

            & > div:last-child {
                padding: 4px 12px 9px 7px;
            }
        }

        &:has(input:not(:checked)) .states > div:first-child,
        &:has(input:checked) .states {
            background-color: var(--gray);
            color: wheat;
        }

        &:has(input:checked) .states > div:first-child {
            background-color: var(--blue);
            color: greenyellow;
        }

        &:active {
            transform: translateY(1.5px) scale(0.96) !important;
            transition: .05s !important;
        }

        &:has(input:not(:checked)):hover .states > div:first-child,
        &:has(input:checked):hover .states > div:last-child {
            color: white;
        }
    }
}

/* toggle */

/* input */

com[name='input'] .wrap {
    display: flex;
    gap: var(--gapMicro) var(--gapMin);
    align-items: center;
    flex-wrap: wrap;
}

com[name='input'] .wrap .desc {
    font-size: .8em;
    font-weight: 200;
    text-wrap: balance;
    flex: 1 1 100%;
    width: min-content;
}

com[name='input'] [contenteditable] {
    position: relative;
    outline: none;
    padding: 8px 12px 12px;
    min-width: 31.34px;
    min-height: 41.34px;
    cursor: pointer;
    box-sizing: border-box;
    background-color: var(--inputBackground);
    border-radius: var(--radiusMin);
    transition: background-color .15s;
}

com[name='input'] [contenteditable][placeholder]:empty::before {
    content: attr(placeholder);
    color: var(--placeholder);
    pointer-events: none;
    /* font-weight: 300; */
    transition: color .15s;
}

com[name='input']:not([readonly]) [contenteditable][placeholder]:empty:focus::before {
    color: var(--placeholderHover);
}

com[name='input'] [contenteditable][data-before]:not(:empty):before {
    content: attr(data-before);
    padding-right: 5px;
    color: var(--lightBlack);
}

com[name='input'] [contenteditable][data-after]:after {
    content: attr(data-after);
    padding-left: 5px;
    font-size: .66em;
    color: var(--lightBlack);
}

com[name='input'] label {
    line-height: 1;
}

com[name="input"] [contenteditable]:not([placeholder]):empty::before {
    content: "- - -";
    color: rgb(133 133 133 / 28%);
}

com[name='input'][required] [contenteditable][placeholder]:not(:focus):empty::before {
    color: #ff7e005c;
}

com[name='input'][required] [contenteditable]:not(:focus):empty {
    background-color: #fff2db;
}

com[name='input'][readonly] [contenteditable] {
    border: 1px dashed var(--middleGray);
    background-color: white;
    padding: 7.5px 11px 11.5px;
}

com[name='input'][readonly][required] [contenteditable] {
    border-color: var(--orange);
}

/* com[name='input'][readonly].focus [contenteditable] {
    background-color: var(--lightGray);
} */

/* input */

/* input options:legacy */

/*com[name='input'] input:is([type="text"], [type="password"])*/

com[name='input'] input {
    outline: none;
    padding: 8px 12px 12px;
    min-width: 40px;
    cursor: pointer;
    box-sizing: border-box;
    background-color: var(--inputBackground);
    border-radius: var(--radiusMin);
    position: relative;
    user-select: text;
    -webkit-user-select: text;
    border: none;
    font-size: 16px;
    transition: background-color .15s;
}

com[name='input'] input::placeholder {
    color: var(--placeholder);
}

com[name='input'] input:focus::placeholder {
    color: var(--placeholderHover);
}

com[name='input'] input:focus {
    background-color: var(--lightBlueHover);
}

/* input options:legacy */


/* setbox */

com[name='setbox']:not([mode="single"]) .wrap-boxes {
    display: grid;
    grid-template-rows: minmax(88.66px, .4fr);
    transition: grid-template-rows .35s;
    overflow: hidden scroll;
    max-height: 20vh;
}

com[name='setbox']:focus-within .wrap-boxes:has(.add:not(:focus)) {
    grid-template-rows: minmax(88.66px, 1fr);
}

com[name='setbox'] .wrap-boxes:not(:has(.box:nth-of-type(5))) {
    grid-template-rows: minmax(auto, .4fr)!important;
}

com[name='setbox'] .wrap-boxes:has(.box:nth-of-type(5)) {
    min-height: 130px;
}

com[name='setbox'] .boxes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gapMicro);
    align-self: flex-start;
    padding-right: var(--gapMicro);
}

com[name='setbox'] .boxes:not(:has(.box)) {
    min-height: 38.34px;
}

com[name='setbox'] .boxes:not(:has(.box)):after {
    content: "«ничего не выбрано»";
    font-weight: 200;
    font-size: .9em;
    color: gray;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--inputBackground);
    padding: 8px 12px;
    border-radius: var(--radiusMin);
}

/* com[name='setbox'] .wrap-boxes .box {
    position: relative;
    outline: none;
    padding: 8px 12px 11px;
    min-width: 40px;
    height: 100%;
    min-height: 38.34px;
    max-height: 52.33px;
    cursor: pointer;
    box-sizing: border-box;
    background-color: var(--inputBackground);
    border-radius: var(--radiusMin);
    overflow: hidden;
    transition: background-color .15s, max-height 0.3s cubic-bezier(0, 1, 0, 1);
    flex: 1 30%;
    font-size: .86em;
} */

com[name='setbox'] .wrap-boxes .box {
    position: relative;
    display: flex;
    height: 100%;
    min-height: 38.34px;
    max-height: 52.33px;
    min-width: 40px;
    flex: 1 30%;
    cursor: pointer;
    box-sizing: border-box;
    background-color: var(--inputBackground);
    border-radius: var(--radiusMin);
    transition: background-color .15s, max-height 0.3s cubic-bezier(0, 1, 0, 1);
    font-size: .86em;
}

com[name='setbox'] .wrap-boxes .box .box-data {
    padding: 8px 12px 11px;
    overflow: hidden;
}

com[name='setbox'] .boxes .add + .box {
    flex: 1 70%;
    max-height: 41.33px;

    &:last-child {
        flex: 1 20%;
    }
}

com[name='setbox'] .boxes:has(.box:focus) .box {
    max-height: 9999px;
    transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
    transition-delay: 0s;
}

com[name='setbox'] .boxes .box:focus {
    background-color: var(--lightBlueHover);
}

com[name='setbox'][readonly] .wrap-boxes .box {
    border: 1px dashed var(--middleGray);
    background-color: white;
}

com[name='setbox'] .boxes .add {
    display: flex;
    background: var(--blue);
    border-radius: var(--radiusMin);
    justify-content: center;
    position: relative;
    width: 45px;
    max-height: 41.33px;
    min-width: 45px;
    height: auto;
    cursor: pointer;
    transition: .15s;
    user-select: none;
}

com[name='setbox'] .boxes .add::before {
    content: '';
    position: absolute;
    inset: 10%;
    background-image: linear-gradient(white, white), linear-gradient(white, white);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 10.1% 50.1%, 50.1% 10.1%;
    transform: scale(1.001);
}

com[name='setbox'] .boxes .add:hover {
    background: var(--darkBlue);
}

com[name='setbox'] .boxes .add:active {
    transform: scale(.96) translateY(2px);
    transition: transform 0.05s;
}

com[name='setbox'] button.add:focus-visible::after {
    left: 5px;
    top: 4px;
}

com[name='setbox'] label {
    padding-inline-start: 1px;
}

com[name='setbox'] .delete {
    position: absolute;
    inset: 6.5px 6.5px auto auto;
    background-color: white;
    padding: 3px 4px 4px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: .15s;
}

com[name='setbox'] .delete:before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: var(--red);
    mask-image: url(/files/public/static/media/vector/ico/delete.svg);
    mask-size: contain;
    -webkit-mask-image: url(/files/public/static/media/vector/ico/delete.svg);
    -webkit-mask-size: contain;
}

com[name='setbox'] .boxes .box:focus .delete {
    opacity: 1;
    pointer-events: auto;
}

com[name='setbox'] .boxes .box:focus .delete:active {
    transform: translateY(2px);
    transition: 0s;
}

com[name='setbox']:is([capability='r'], [readonly]) .boxes :is(.add, .delete) {
    display: none;
}

/* setbox */


/* checkbox */

com:is([name='checkbox'], [name='radio'], [name="bbox"]) fieldset {
    display: contents;
}

com:is([name='checkbox'], [name='radio'], [name="bbox"]) fieldset .wrap-fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--gapMicro);
}

com:is([name='checkbox'], [name='radio'], [name="bbox"]) legend {
    padding-inline: 1px;
}

com:is([name='checkbox'], [name='radio']) fieldset .wrap-fields .field {
    display: grid;
    grid-auto-flow: column;
    gap: 6px;
    grid-template-columns: 22px 1fr;
    justify-content: start;
    width: fit-content;
}

com[name='radio'] fieldset .wrap-fields .field {
    grid-template-columns: 23px;
}

com:is([name='checkbox'], [name='radio']) fieldset .wrap-fields :has(input:not(:disabled)) :is(.field, label, input) {
    cursor: pointer;
}

com:is([name='checkbox'], [name='radio']) fieldset .wrap-fields .field > input {
    position: relative;
    margin: 3px 3px 0px 4px;
}

com:is([name='checkbox']) fieldset .wrap-fields .field.not > input:not(:checked).indeterminate:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    background-color: var(--blue);
    transform: translate(-50%, -50%);
    border-radius: 1px;
}

com:is([name='checkbox'], [name='radio']) fieldset .wrap-fields .field > input:checked {
    accent-color: var(--blue);
}

com:is([name='checkbox'], [name='radio']) input:disabled+label {
    pointer-events: none;
    opacity: .3;
}

com:is([name='checkbox'], [name='radio']) label {
    display: flex;
    gap: var(--gapMicro);
    line-height: normal;
}

com:is([name='checkbox'], [name='radio']) fieldset .wrap-fields .field.not label {
    font-weight: 200;
    font-size: .9em;
    color: gray;
}

com:is([name='checkbox'], [name='radio']) fieldset .wrap-fields .field > input:focus-visible {
    outline: var(--blue) dotted 3px;
}

com:is([name='checkbox'], [name='radio'])[appearance-position=horizontal] fieldset .wrap-fields {
    display: flex;
    gap: var(--gapMicro) var(--gapMiddle);
    flex-wrap: wrap;
}

com:is([name='checkbox'], [name='radio'], [name="bbox"]) .addon {
    width: fit-content;
    height: 20px;
    max-width: 18px;
    margin: auto 0;
}

com:is([name='checkbox'], [name='radio'], [name="bbox"]) .addon[type="img"] img {
    width: 100%;
    aspect-ratio: var(--ratio);
    --ratio: 12 / 9;
    object-fit: cover;
}

com:is([name='checkbox'], [name='radio'], [name="bbox"]) .addon[type='dot']:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: var(--color, greenyellow);
    border-radius: var(--radius);
    pointer-events: none;
}

com:is([name='checkbox'], [name='radio'], [name="bbox"]) .addon[type='dot'] {
    position: relative;
    display: flex;
    align-items: center;
    margin-block-end: -.75px;
}

com:is([name='checkbox'], [name='radio'], [name="bbox"]) .addon[type="ico"] {
    margin-block-end: -1.75px;
}

com:is([name='checkbox'], [name='radio'], [name="bbox"]) .addon[type="ico"]:before {
    content: '';
    display: inline-block;
    width: 18px;
    min-width: 18px;
    height: 18px;
    background-color: var(--color, var(--blue));
    mask-image: var(--src);
    mask-size: contain;
    -webkit-mask-image: var(--src);
    -webkit-mask-size: contain;
}

com:is([name='checkbox'], [name='radio'], [name="bbox"]) .addon[type="text"] {
    max-width: fit-content;
}

com:is([name='checkbox'], [name='radio']) .for-desc {
    display: contents;
    font-size: .8em;
    font-weight: 200;
}

/* bbox */

com[name="bbox"] .wrap {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gapMin) / 2);
}

com[name="bbox"]:not(.label-right) :is(legend, .desc) {
    padding: 0 5px;
    margin: auto;
}

com[name="bbox"] .wrap-fields {
    display: flex;
    padding: var(--gapMicro);
    gap: var(--gapMicro);
    margin: auto;
    border: none;
    border-radius: var(--radius);
    background-color: var(--inputBackground);
    box-sizing: border-box;
    flex-wrap: wrap;
    width: fit-content;
    transition: background-color .15s;
}

com[name="bbox"] .field input {
    display: none;
    /* opacity: 0;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0; */
}

com[name="bbox"] .wrap-fields label {
    display: flex;
    align-items: center;
    gap: var(--gapMicro);
    position: relative;
    height: 100%;
    width: 100%;
    padding: 7px 12px 10px;
    box-sizing: border-box;
    border-radius: var(--radiusMin);
    cursor: pointer;
    background: white;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 360px;
    min-width: auto;
    z-index: 1;
    transition: .05s;
}

com[name="bbox"] .wrap-fields .field.not label {
    font-size: .9em;
    font-weight: 200;
}

com[name="bbox"] .wrap-fields div {
    height: auto;
    margin: 0;
}

com[name="bbox"] .wrap-fields .addon {
    position: relative;
}

com[name="bbox"] .wrap-fields div:has(input:not(:checked, :disabled)):hover label {
    color: white;
}

com[name="bbox"] .wrap-fields input:checked~label,
com[name="bbox"] .wrap-fields input:not(:disabled)~label:hover {
    background: var(--blue);
    color: white;
}

com[name="bbox"] .wrap-fields input:checked~label .addon[type="ico"]::before,
com[name="bbox"] .wrap-fields input:not(:disabled)~label:hover .addon[type="ico"]::before {
    --color: white;
}

com[name="bbox"] .wrap-fields input:checked:disabled~label {
    background: var(--gray);
    color: initial;
}

com[name="bbox"] .wrap-fields input:disabled~label {
    pointer-events: none;
    opacity: .3;
}

com[name="bbox"] .wrap-fields input:checked:hover~label {
    background: var(--darkBlue);
}

com[name="bbox"] .wrap-fields input:not(:checked, :disabled)~label:active {
    transform: scale(.96);
}

com[name="bbox"] .wrap-fields label:after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background: white;
    left: 5px;
    top: 4px;
    z-index: 1;
    border-radius: var(--radiusMax);
    transition: var(--buttonTransition);
    transform: scale(1.5);
    opacity: 0;
    pointer-events: none;
}

com[name="bbox"] .wrap-fields > .field:has(input:not(:disabled):focus-visible) label:after {
    transform: none;
    opacity: 1;
}

com[name="bbox"].label-right {
    flex-direction: row-reverse;
}

com[name="bbox"][appearance-position=vertical] .wrap-fieldset {
    border-radius: var(--radiusMin);
    background-color: var(--inputBackground);
}

com[name="bbox"][appearance-position=vertical] .wrap-fields {
    flex-direction: column;
    background: none;
    border-radius: initial;
    flex-wrap: nowrap;
    width: auto;
}

/* com[name="bbox"]:not([appearance-position=vertical]) .wrap-fields {
    overflow-x: scroll;
    margin: auto 6px 6px 6px;
    padding: 6px 0;
    min-width: auto;
    max-width: 500px;
} */

com[name="bbox"][appearance-position=vertical] .wrap-fields {
    overflow-y: scroll;
    margin: 6px 6px 6px auto;
    padding: 0 5px 0 6px;
    max-height: 216px;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

com[name="bbox"][appearance-position=vertical] .wrap-fields div {
    scroll-snap-align: end;
}

com[name="bbox"][appearance-position=vertical] .wrap-fields input:not(:checked, :disabled)~label:active {
    transform: scale(.98);
}

/* bbox */



/* sbox */

com[name="sbox"] {
    --dropdown-options-height: 316px;
    --dropdown-options-margin: 6px;
    --min-width: 200px;
    --max-width: 280px;
}

com[name="sbox"].auto-width {
    --min-width: auto;
    --max-width: auto;
}

com[name="sbox"]:focus-within,
com[name="sbox"]:has(.wrap-option:active) {
    z-index: 10; /* высокое из-за таблиц с z-index > 8 */
}

com[name="sbox"] .wrap-select-options {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: var(--min-width);
    max-width: var(--max-width);
    /* width: clamp(200px, 28vw, 280px); */
}

com[name="sbox"] .wrap-select-options::after {
    content: "";
    position: absolute;
    top: calc(100% + var(--gapMicro));
    width: 1px;
    min-height: calc(45vh + var(--offset));
    max-height: calc(var(--dropdown-options-height) + var(--offset));
    pointer-events: none;
    user-select: none;
    isolation: isolate;
    --offset: calc(var(--dropdown-options-margin) * 2 + 30px);
}
    

com[name=sbox][appearance-size=min] .wrap-select-options {
    min-width: 60px;
}

com[name="sbox"] [contenteditable] {
    position: relative;
    outline: none;
    padding: 8px 32px 12px 12px;
    width: auto;
    height: 100%;
    min-width: 40px;
    min-height: 41.34px;
    max-height: 62px;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--inputBackground);
    border-radius: var(--radiusMin);
    transition: background-color .15s, max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

com[name="sbox"] .wrap-select .arrow {
    position: absolute;
    top: calc(50% - 1em / 2.2);
    right: 10px;
    width: 1em;
    height: 1em;
    background-image: url(/files/public/static/media/bitmap/ico/expand-arrow.png);
    background-repeat: no-repeat;
    background-size: 1em 1em;
    cursor: default;
    z-index: 2;
    pointer-events: none;
    transition: .25s cubic-bezier(0.25, 0.1, 0.4, 1.7);
}

com[name="sbox"]:focus-within:has(:nth-child(2 of .wrap-option:not(.not))) .wrap-select .arrow {
    background-image: url(/files/public/static/media/bitmap/ico/sort.png);
    transform: rotate(180deg);
    pointer-events: auto;
}

com[name="sbox"]:focus-within:not(:has(:nth-child(2 of .wrap-option:not(.not)))) .wrap-select .arrow,
com[name="sbox"].order:focus-within .wrap-select .arrow {
    rotate: -180deg;
}

com[name="sbox"].order .wrap-options .options:has(.wrap-option:nth-child(10)) .wrap-option[selected] {
    order: 1;
}

com[name="sbox"].order .wrap-options .options {
    flex-direction: column-reverse;
}

com[name="sbox"].order .wrap-options .options .wrap-option.not {
    order: 2;
}

com[name="sbox"] [contenteditable] {
    --ratio: 12 / 9;
}

com[name="sbox"] [contenteditable]:before {
    transition: opacity .15s
}

com[name="sbox"] [contenteditable]:is([data-addon=emoji], [data-addon=text]):before {
    content: attr(data-addon-src);
    margin-right: 6px;
}

com[name="sbox"] [contenteditable][data-addon=dot]:before {
    content: "";
    width: 9px;
    height: 9px;
    display: inline-block;
    background: var(--addon-color);
    border-radius: var(--radius);
    pointer-events: none;
    margin: 0 6px 1px 0;
    filter: saturate(1.5);
}

com[name="sbox"] [contenteditable][data-addon=ico]:before {
    content: "";
    width: 18px;
    min-width: 18px;
    height: 18px;
    background-color: var(--addon-color, var(--blue));
    mask-image: var(--addon-src);
    mask-size: contain;
    -webkit-mask-image: var(--addon-src);
    -webkit-mask-size: contain;
    display: inline-block;
    margin: 0 6px -4px 0;
}

com[name="sbox"] [contenteditable][data-addon=img]:before {
    content: "";
    display: inline-block;
    width: 18px;
    margin: 0 6px -2px 0;
    background-image: var(--addon-src);
    background-size: cover;
    background-position: center;
    aspect-ratio: var(--ratio);
}

com[name="sbox"][filter] [contenteditable]:is([data-addon]):is(:empty, :focus):before {
    opacity: .2;
}

com[name="sbox"] .wrap-options .options .wrap-option .data .addon {
    width: fit-content;
    height: 20px;
    max-width: 18px;
    min-width: 12px;
}

com[name="sbox"] .wrap-options .options .wrap-option .data {
    display: flex;
    gap: var(--gapMicro);
    align-items: center;
    pointer-events: none;
    overflow: hidden;
}

com[name="sbox"] .wrap-options .options .wrap-option .data .addon[type="img"] img {
    width: 100%;
    aspect-ratio: var(--ratio);
    --ratio: 12 / 9;
    object-fit: cover;
}

com[name="sbox"] .wrap-options .options .wrap-option .data .addon[type='dot']:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: var(--color, greenyellow);
    border-radius: var(--radius);
    pointer-events: none;
}

com[name="sbox"] .wrap-options .options .wrap-option .data .addon[type='dot'] {
    position: relative;
    display: flex;
    align-items: center;
}

com[name="sbox"] .wrap-options .options .wrap-option .data .addon[type="ico"] {
    height: 18.5px;
}

com[name="sbox"] .wrap-options .options .wrap-option .data .addon[type="ico"]:before {
    content: '';
    display: inline-block;
    width: 18px;
    min-width: 18px;
    height: 18px;
    background-color: var(--color);
    mask-image: var(--src);
    mask-size: contain;
    -webkit-mask-image: var(--src);
    -webkit-mask-size: contain;
    --color: white;
}

com[name="sbox"] .wrap-options .options .wrap-option .data .addon[type="text"] {
    max-width: fit-content;
}

com[name="sbox"] .wrap-options .options .wrap-option .data .addon.sup {
    position: absolute;
    inset: 2px 2px 2px auto;
    display: grid;
    align-items: center;
    max-width: 70%;
    height: fit-content;
    min-height: min(calc(100% - 4px), var(--min-height));
    max-height: calc(100% - 4px);
    width: auto;
    transition: .15s .25s;
    font-size: max(60%, 9px);
    line-height: 1;
    padding: 4px 9px 7px;
    box-sizing: border-box;
    border-radius: var(--radiusMin);
    background-color: black;
    transform: translateX(98.5%);
    pointer-events: auto;
    --min-height: 27.5px;
}

com[name="sbox"] .wrap-options .options .wrap-option .data .addon.sup:before {
    content: "";
    position: absolute;
    inset: -5px -5px -5px -20px;
}

com[name="sbox"] .wrap-options .options .wrap-option .data .addon.sup .text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

com[name="sbox"] .wrap-options .options .wrap-option .data .addon.sup:hover {
    transform: none;
    transition-delay: 0s;
}

com[name="sbox"] .wrap-options .options .wrap-option .for-desc {
    color: #ffffff85;
    line-height: 1.2;
    font-size: .7em;
    pointer-events: none;
}

com[name="sbox"] [contenteditable]:empty::after { /*:not(:focus)*/
    color: var(--placeholder);
    /* font-weight: 300; */
    transition: color .15s;
}

com[name="sbox"] [contenteditable][placeholder]:is([title=''], :not([title])):empty::after {
    content: attr(placeholder);
}

com[name="sbox"][with_not] [contenteditable].not:empty::after {
    /* content: "«Не выбрано»"; */
    content: "«не выбрано»";
}

/* com[name=sbox]:has(.wrap-option:active) [contenteditable]:is([title=''], :not([title])):not(:focus):empty {
    background-color: var(--lightBlueHover);
} */

com[name="sbox"][required]:not(:has(.wrap-option:active)) [contenteditable][placeholder]:is([title=''], :not([title])):not(:focus):empty::after {
    color: #ff7e005c;
}

com[name="sbox"][required]:not(:has(.wrap-option:active)) [contenteditable]:is([title=''], :not([title])):not(:focus):empty {
    background-color: #fff2db;
}

com[name="sbox"] .wrap-options {
    border-radius: var(--radiusMin);
    background-color: black;
    position: absolute;
    top: calc(100% + var(--gapMicro));
    left: 0;
    right: 0;
    transform: translateY(-5px);
    transition-property: transform, opacity, display;
    transition-behavior: allow-discrete;
    transition-duration: .15s;
    opacity: 0;
    display: none;
    pointer-events: none;
    z-index: 1;
}

com[name="sbox"]:focus-within .wrap-options,
com[name="sbox"] .wrap-options:has(.wrap-option:active) {
    display: block;
    transform: none;
    opacity: 1;
    pointer-events: auto;

    @starting-style {
        opacity: 0;
        transform: translateY(-5px);
    }
}

com[name="sbox"] .wrap-options:after {
    content: '';
    position: absolute;
    bottom: -30px;
    width: 1px;
    height: 1px;
    visibility: hidden;
}

com[name="sbox"] .wrap-options .options {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    flex-wrap: nowrap;
    box-sizing: border-box;
    overflow-y: scroll;
    overflow-x: hidden;
    width: auto;
    max-height: min(45vh, var(--dropdown-options-height));
    gap: var(--gapMicro);
    margin: var(--dropdown-options-margin);
    margin-left: auto;
    padding: 0 5px 0 6px;
    scroll-snap-type: y mandatory;
}

com[name="sbox"] .wrap-options .options::-webkit-scrollbar {
    background: #ffffff34;
}

com[name="sbox"].wrap-options .options::-webkit-scrollbar-thumb {
    background: gray;
}

com[name="sbox"] .wrap-options .options::-webkit-scrollbar-thumb:hover {
    background: white;
}

com[name="sbox"] .wrap-options .options .wrap-option {
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 360px;
    min-width: auto;
    min-height: auto;
    display: flex;
    padding: 6px 9px 7px;
    box-sizing: border-box;
    border-radius: var(--radiusMin);
    cursor: pointer;
    transition: .05s;
    background: var(--lightBlack);
    color: white;
    z-index: 1;
    scroll-snap-align: end;
    flex-direction: column;
    align-items: flex-start;
}

com[name="sbox"] .wrap-options .options .wrap-option[disabled] {
    opacity: .5;
    pointer-events: none;
}

com[name="sbox"] .wrap-options .options .wrap-option .option {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines);
    overflow: hidden;
    pointer-events: none;
    font-size: .95em;
    --lines: 4;
    margin: -3px 0 0 0;
}

com[name="sbox"] .wrap-options .options .wrap-option[selected],
com[name="sbox"] .wrap-options .options .wrap-option:hover {
    background: var(--blue);
    color: white;
}

com[name="sbox"] .wrap-options .options .wrap-option[selected] {
    order: -1;
}

com[name="sbox"] .wrap-options .options .wrap-option.not {
    font-weight: 200;
    background-color: #b0b0b0;
    color: black;
    order: -2;
}

com[name="sbox"] .wrap-options .options .wrap-option.not:hover {
    background-color: #d3d3d3;
}

com[name="sbox"][filter] [contenteditable]:empty {
    &:focus::after {
        content: "Фильтр";
        color: var(--placeholder);
        font-weight: 300;
        transition: color .15s;
    }

    &:is([title]):not(:focus)::after {
        content: attr(title);
        color: var(--placeholder);
        font-weight: 300;
        transition: color .15s;
        font-size: 75%;
    }
}

com[name="sbox"][filter] .wrap-options:not(:has(.wrap-option:not(.not):not(.hidden))),
com[name="sbox"][filter] .wrap-options .options .wrap-option.hidden,
com[name="sbox"][filter] .wrap-options:has(.wrap-option.hidden) .wrap-option.not {
    display: none;
}

com[name='sbox'][readonly] [contenteditable] {
    border: 1px dashed var(--middleGray);
    background-color: white!important;
    padding: 7.5px 32px 11px 11.5px;
}

com[name='sbox'][readonly][required] [contenteditable] {
    border-color: var(--orange);
}

/* com[name='sbox'][readonly].focus [contenteditable]:not(:focus):empty {
    background-color: var(--lightGray);
} */

com[name="sbox"][readonly] .wrap-options .options .wrap-option {
    pointer-events: none;
}

/* sbox */


/* date */

com[name=date] .wrap-com {
    display: flex;
    gap: var(--gapMicro) var(--gapMin);
    /* align-items: center; */
    flex-wrap: wrap;
}

com[name=date] .wrap-com .desc {
    font-size: .8em;
    font-weight: 200;
    text-wrap: balance;
    flex: 1 1 100%;
    width: min-content;
}

com[name=date] .wrap-main input:is([type="date"], [type="datetime-local"], [type="month"]) {
    min-height: 35px;
    padding: 7px 10px 8px;
    border-radius: var(--radiusMin);
    background-color: var(--inputBackground);
    outline: none;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .15s;

    zoom: 1.2;
}

com[name=date] .wrap-main input:is([type="date"], [type="datetime-local"], [type="month"])[readonly] {
    padding-right: 0;
}

com[name=date][readonly] .wrap-main input[readonly]:is([type="date"], [type="datetime-local"], [type="month"]) {
    border: 1px dashed var(--middleGray);
    background-color: white;
    padding-block: 6.33px 7.3px;
}

com[name=date][readonly] .wrap-main input[readonly]:is([type="date"]) {
    max-width: 45%;
}

/* date */


/* range */

com[name=range] .wrap-com {
    display: flex;
    gap: var(--gapMicro) var(--gapMin);
    align-items: center;
}

com[name=range] .wrap-com .desc {
    font-size: .8em;
    font-weight: 200;
    text-wrap: balance;
    flex: 1 1 100%;
    width: min-content;
}

com[name=range] .wrap-main input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="number"]) {
    min-height: 35px;
    padding: 7px 10px 8px;
    border-radius: var(--radiusMin);
    background-color: var(--inputBackground);
    outline: none;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .15s;

    zoom: 1.2;
}

com[name=range] .wrap-main input[type="number"] {
    max-width: 68px;
}

com[name=range] .wrap-main input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"])[readonly] {
    padding-right: 0;
}

com[name=range][readonly] .wrap-main input[readonly]:is([type="date"], [type="datetime-local"], [type="month"], [type="week"]) {
    border: 1px dashed var(--middleGray);
    background-color: white;
    padding-block: 6.33px 7.3px;
}

com[name=range][readonly] .wrap-main input[readonly]:is([type="date"], [type="month"], [type="week"]) {
    max-width: 45%;
}

/* range */


/* select */

com[name="select"] .wrap {
    display: flex;
    gap: var(--gapMin);
    align-items: center;
}

com[name="select"] .wrap-select {
    position: relative;
    width: min-content;
}

com[name="select"] select {
    max-width: 230px;
    min-height: 35px;
    padding: 10px 2.5rem 10px 1.8rem;
    border-radius: var(--radiusMin);
    background-color: var(--inputBackground);
    outline: none;
    border: none;
    cursor: pointer;
    transition: background-color .15s;
}

com[name="select"] select option.not {
    background-color: var(--lightGray);
    color: var(--gray);
}

com[name="select"] .wrap-select:after {
    content: "";
    position: absolute;
    top: calc(50% - 1em / 2.2);
    right: 10px;
    width: 1em;
    height: 1em;
    background-image: url(/files/public/static/media/bitmap/ico/expand-arrow.png);
    background-repeat: no-repeat;
    background-size: 1em 1em;
    z-index: 2;
    pointer-events: none;
    transition: .25s cubic-bezier(0.25, 0.1, 0.4, 1.7);
}

com[name="select"]:focus-within .wrap-select:after {
    transform: rotate(180deg);
}

com[name="select"] .wrap-select .status {
    width: 8px;
    height: 8px;
    position: absolute;
    background: var(--color);
    left: 12px;
    z-index: 2;
    border-radius: var(--radius);
    top: calc(50% - 4px);
    pointer-events: none;
    --color: var(--lightBlack);
}

/* select */


/* range */

com[name=slider] .wrap-main {
    align-items: stretch;
    gap: var(--gapMicro);
    height: var(--height);
}

com[name=slider] datalist {
    display: grid;
    align-content: space-between;
    line-height: .9;
}

com[name=slider] option {
    padding: 0;
}

com[name=slider] input {
    writing-mode: vertical-rl;
    direction: rtl;
    margin-left: -4px;
}

com[name=slider] .wrap-main:has([readonly]) {
    pointer-events: none;
}

/* range */


/* divider */

com[name=div] {
    width: 100%;
    flex: 1 1 100%;
}

com[name=div] .wrap-com {
    display: block;
    position: relative;
    width: 100%;
    border-bottom: 2px solid black;
    font-size: 2.8em;
    font-weight: 200;
    line-height: 1.1;
    padding-bottom: 8px;
}

com[name=div] .wrap-com a {
    display: inline-block;
    padding-right: 10px;
    font-weight: 900;
    text-decoration: none;
    color: var(--blue);
    cursor: pointer;
    user-select: none;
    transition: .15s;
}

com[name=div] .wrap-com a:active {
    transform: translateY(1.5px) scale(0.96);
    transition: .05s;
}

com[name=div] .wrap-com a:target {
    background-color: #000;
}

/* divider */



/* table */

com[name=table] {
    --td-padding: 8px;
    --tr-sticky: 29.1px;
    --min-width: 200px;
    --max-height: 75vh;
}

/* table.btn.resize */

com[name=table] .btn.resize {
    position: absolute;
    inset: 10px 11px auto auto;
    opacity: 0;
    transition: transform .15s, opacity .15s;
    transform: translateX(7px);

    display: flex;
    width: 16px;
    cursor: pointer;
    user-select: none;
    z-index: 2;

    &:before {
        content: '';
        position: absolute;
        z-index: -1;
        inset: 0;
        transition-delay: 0s;
    }

    &:active {
        transition: .05s;
        transform: translateY(1.5px) scale(0.96);
    }

    & img {
        width: 100%;
        pointer-events: none;
    }
}

com[name=table] .wrap-com:not(:has(label, .controls .filter)) .btn.resize {
    inset: -15px 15px auto auto;
}

com[name=table].fullscreen .wrap-com:not(:has(label, .controls .filter)) .btn.resize {
    inset: 20px 20px auto auto;
}

com[name=table].fullscreen .btn.resize {
    position: fixed;
    inset: var(--gapMin) var(--gapMin) auto auto;
}

com[name=table].fullscreen .btn.resize,
com[name=table]:hover .btn.resize {
    opacity: 1;

    &:before {
        inset: -15px;
        transition-delay: .15s;
    }
}

com[name=table]:is(.fullscreen, :hover) .btn.resize:not(:active) {
    transform: none;
}

/* table.btn.resize */

/* table.auto-wide */

com[name=table].auto-wide {
    width: calc(100vw - var(--gap));
}

com[name=table].auto-wide > .wrap-com {
    flex: 1 1 100%;
}

com[name=table].auto-wide > .wrap-com > .wrap-main {
    width: 100%;
}

com[name=table].auto-wide > .wrap-com > .wrap-main > .wrap,
com[name=table].auto-wide > .wrap-com > .wrap-main > .wrap > table {
    max-width: initial;
    width: 100%;
}

/* table.auto-wide */

com[name=table] > .wrap-com > .wrap-main {
    /* max-width: 1000px; */
    display: grid;
    max-width: var(--max-width);
}

com[name=table] > .wrap-com > .wrap-main > .wrap {
    position: relative;
    overflow: scroll;
    /* scroll-behavior: smooth; */
    padding: 0px 5px 5px 0px;
    max-height: var(--max-height);
    min-width: var(--min-width);
    max-width: calc(100vw - var(--gap));
}

com[name=table][appearance-scroll=horizontal]:not(.fullscreen) .wrap-main > .wrap {
    max-height: initial;
    /* overflow: scroll auto; */
    overflow: scroll hidden;
    padding-right: 2px;
}

com[name=table][appearance-scroll=vertical]:not(.fullscreen) .wrap-main > .wrap {
    overflow: auto scroll;
    max-width: initial;
}

com[name=table] table {
    min-width: var(--min-width);
    border-spacing: 0;
}

/* thead */

com[name=table]:has(table thead tr:nth-child(2)) {
    --tr-sticky: 59px;
}

/* com[name=table]:has(table thead tr:nth-child(3)) {
    --tr-sticky: 88px;
} */

com[name=table] table thead {
    background-color: var(--blue);
    color: white;
    position: sticky;
    top: 0px;
    z-index: 8;
}

com[name=table] table tr {
    contain: layout style;
}

com[name=table] table thead tr:not(.groups) th {
    position: relative;
    padding: 4px 14px 6.5px;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: .9em;
}

/* com[name=table][appearance-scroll=horizontal] table thead tr:not(.groups) th:nth-last-child(1 of :not(.filtered)), */
com[name=table] table thead tr:not(.groups) th:nth-last-child(1 of :not(.filtered)) {
    border-top-right-radius: var(--radiusMin);
}

com[name=table] table thead tr:not(.groups) th[data-sort] {
    cursor: pointer;
    outline: none;
    overflow: hidden;

    &:not(:first-child) {
        z-index: 1;
    }

    &:hover {
        background-color: var(--darkBlue)!important;

        &:first-child {
            background-color: var(--orangeRed) !important;
        }
    }
}

com[name=table] table thead th[data-sort]:after {
    content: "";
    position: absolute;
    /* right: -8px; оставить так? */
    width: 18px;
    min-width: 18px;
    height: 18px;
    background-color: white;
    mask-image: url(/files/public/static/media/bitmap/ico/sort-desc.png);
    mask-size: contain;
    -webkit-mask-image: url(/files/public/static/media/bitmap/ico/sort-desc.png);
    -webkit-mask-size: contain;
    transition: .15s;
    will-change: transform;
}

com[name=table] table thead th[data-sort=""]:after {
    transform: translateY(-14px);
}

com[name=table] table thead tr:not(.groups) th[data-sort]:hover {
    overflow: initial;
    &:after {
        transform: none;
    }
}

com[name=table] table thead th[data-sort]:has( + th[data-sort]:hover) {
    z-index: 2;
}

com[name=table] table thead th[data-sort="desc"]:after {
    content: "";
    mask-image: url(/files/public/static/media/bitmap/ico/sort-desc.png);
    -webkit-mask-image: url(/files/public/static/media/bitmap/ico/sort-desc.png);
}

com[name=table] table thead th[data-sort="asc"]:after {
    content: "";
    mask-image: url(/files/public/static/media/bitmap/ico/sort-asc.png);
    -webkit-mask-image: url(/files/public/static/media/bitmap/ico/sort-asc.png);
}

/* com[name=table] table thead th[data-sort]:last-child::after {
    right: 2px;
} */

/* groups */

com[name=table] table thead:has(tr.groups) tr:not(.groups) th:not(:first-child) {
    background-color: var(--blue);
}

com[name=table] table thead:has(tr.groups) {
    background-color: white;
}

com[name=table] table thead tr.groups th {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    height: 29.83px;
}

com[name=table] table thead tr.groups th:empty {
    user-select: none;
    pointer-events: none;
}

/* com[name=table] table thead tr.groups th[colspan="0"] {
    display: none;
} */

com[name=table] table thead tr.groups th:not(:nth-child(1 of [colspan])) > div {
    border-left: 0;
}

com[name=table] table thead tr.groups th[colspan]:last-child > div {
    width: auto;
    margin-right: 6px;
}

com[name=table] table thead tr.groups th[colspan] > div {
    width: 99.8%;
    color: black;
    background-color: white;
    border: 1px solid #b0b0b0;
    border-bottom: none;
    border-radius: var(--radiusMin) var(--radiusMin) 0 0;
    font-weight: 600;
    padding: 4px 14px 6.5px;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: .9em;
    cursor: pointer;
    user-select: none;
    transition: .15s background-color, .15s border-color, .15s transform;
    will-change: transform;
}

com[name=table] table thead tr.groups th[colspan] > div:active {
    transition: .15s background-color, .15s border-color, .05s transform;
    transform: translateY(5px);
}

com[name=table] table thead tr.groups th[colspan] > div:hover {
    background-color: aliceblue;
    border-color: var(--lightBlue);
}

/* ! test */
/* @keyframes appear {
    from {
        opacity: 0;
        scale: .9;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}
com[name=table] table tr {
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0;
} */
/* ! test */

com[name=table] table td {
    position: relative;
    padding: var(--td-padding);
    height: 1px;
    box-sizing: border-box;
    /* isolation: isolate; */

    &:has(.cell[style="display: none;"]) {
        height: 43.34px;
    }
}

com[name=table] table tbody td:first-child {
    font-weight: 200;
    font-size: 1.1em; /* 1.2em */
}

com[name=table] table tbody td:not(:first-child) {
    text-align: center;
}

com[name=table] table :is(th,td):not(:last-child) {
    border-right: 1px solid #72727226;
}

com[name=table] table tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radiusMin);
}

com[name=table] table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radiusMin);
}

com[name=table] table tr:not(.groups) :where(td, th):first-child {
    position: sticky;
    left: 0px;
    z-index: 6;
    background-color: var(--current-bg);
    color: var(--color, initial);
    filter: sepia(.1);
    transition: opacity .15s;
    will-change: opacity;
    --current-bg: var(--bg-color, var(--lightGray));
}

com[name=table] table tr:not(.groups) th:first-child {
    border-top-left-radius: var(--radiusMin);
    background-color: var(--orangeHover);
    color: white;
    z-index: 3;
    will-change: background-color;
    transition: background-color .15s;
    transition-delay: .25s;
}

com[name=table] table:has(tr.selected) tr:not(.groups) th:first-child {
    background-color: var(--green);
    transition-delay: 0s;
}

com[name=table] table tbody tr {
    background-color: var(--current-bg, white);
    color: var(--color);
    transition: transform .15s;
}

com[name=table] table tbody tr:nth-child(odd of :not(.closed, .hidden)) {
    --current-bg: var(--bg-color, var(--lightGray));
    color: var(--color, initial);
}

com[name=table] table tbody tr:nth-child(even of :not(.closed, .hidden)) {
    background-color: var(--bg-color, white);
    color: var(--color, initial);
}

com[name=table] table tbody tr[data-level="0"] {
    position: sticky;
    top: var(--tr-sticky);
    z-index: 8;
    background-color: var(--bg-color, black);
    color: var(--color, white);
    --color: white;
    --bg-color: black;
}

com[name=table] table tbody tr[data-level="1"] {
    background-color: var(--bg-color, var(--lightGray));
    color: var(--color, white);
}

com[name=table] table tbody tr[data-level="1"]:not([is-finally]) {
    --color: white;
    --bg-color: var(--lightBlack);
}

com[name=table] table tbody tr:not([data-level="0"], [data-level="1"]:not([is-finally])):nth-child(odd of :not(.closed, .hidden)) td:first-child {
    background-color: var(--cell-bg);
    --cell-bg: color-mix(in oklab, var(--bg-color, var(--lightGray)), #e7e7e7);
}

/* com[name=table] table tbody tr:not(:has(.focus)):hover,
com[name=table] table tbody tr.contextmenu {
    filter: invert(0.04) sepia(.1);
} */

/* com[name=table] table tbody tr:not(:has(.focus)):hover {
    filter: invert(0.04) sepia(.1);
}

com[name=table] table tbody tr:where([data-level="0"], [data-level="1"]):not(:has(.focus)):hover {
    filter: invert(0.1) saturate(1.5);
} */

com[name=table] canvas.shadows {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 9;
    transition: .15s;
    will-change: opacity;
}

com[name=table]:has(com.focus, .resizer:active) canvas.shadows {
    opacity: 0;
}

com[name=table] table tbody td[type="date"] {
    font-size: .75em;
    font-weight: bold;
}

com[name=table] table tbody {
    & td:has([type=setbox]):first-child {
        min-width: 128px;
    }
    & tr:has([type=setbox]):first-child td {
        height: 74px
    }
}

com[name=table] table tbody td .cell {
    display: flex;
    justify-content: center;
}

com[name=table] table tbody td .cell.no-wrap {
    text-wrap: nowrap;
}

com[name=table] table tbody td .cell.break-wrap {
    text-wrap: wrap;
    word-break: break-all;
    /* не реализовано и не используется */
}

com[name=table] table tbody td .cell.left {
    justify-content: start;
    text-align: left;
}

com[name=table] table tbody td .cell.right {
    justify-content: end;
}

com[name=table] table tbody td .cell .as {
    position: relative;
    font-size: .55em;
    font-weight: normal;
    background: #f0f8ff36;
    padding: 2.5px 6px 5px;
    border-radius: var(--radiusMin);
    pointer-events: none;
    transition: .15s;
    margin: auto 0 auto auto;
    line-height: 1;
    /* backdrop-filter: hue-rotate(45deg); */
    backdrop-filter: hue-rotate(308deg);
}

/* table.data-sup */

com[name=table] table tbody tr td[data-sup]:after {
    content: attr(data-sup);
    position: absolute;
    top: -1px;
    left: 2px;
    right: 2px;
    max-width: calc(100% - 4px);
    box-sizing: border-box;
    width: fit-content;
    font-size: 50%;
    text-wrap: nowrap;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

com[name=table] table tbody tr:hover td[data-sup]:after {
    z-index: 5;
}

com[name=table] table tbody tr td[data-sup]:has(com.focus):after {
    z-index: 9;
}

com[name=table] table tbody tr td:has(.input, .box)[data-sup]:after {
    will-change: top, padding, box-shadow, border-radius, background-color;
    transition: top .15s, padding .15s, box-shadow .15s, border-radius .15s, background-color .15s;
}

com[name=table] table tbody tr td:has(com.focus)[data-sup]:after {
    top: -12px;
    background-color: #ffffff;
    box-shadow: var(--shadow-focus);
    padding: 0 5px 3px;
    border-radius: var(--radiusMin);
}

com[name=table] table tbody tr td:last-child .cell .input[data-sup]:after {
    left: 50%;
    top: 2px;
}

/* table.data-sup */

com[name=table] table tbody tr:is([data-level="1"], [data-level="2"]) td:first-child :is(.cell, .desc) {
    padding-left: 10px;
}

com[name=table] table tbody tr[data-level="3"] td:first-child :is(.cell, .desc) {
    padding-left: 40px;
}

com[name=table] table tbody tr[data-level="4"] td:first-child :is(.cell, .desc) {
    padding-left: 60px;
}

com[name=table] table tbody tr[data-level="5"] td:first-child :is(.cell, .desc) {
    padding-left: 80px;
}

com[name=table] table tbody tr[data-level] td:first-child .cell:not(:has(.addon)) .data:before {
    padding-right: 5px;
    color: var(--lightBlack);
}

com[name=table] table tbody tr:is([data-level="2"], [is-finally]) td:first-child .cell:not(:has(.addon)) .data:before {
    content: "•";
}

com[name=table] table tbody tr[data-level="3"] td:first-child .cell:not(:has(.addon)) .data:before {
    content: "••";
}

com[name=table] table tbody tr[data-level="4"] td:first-child .cell:not(:has(.addon)) .data:before {
    content: "•••";
}

com[name=table] table tbody tr td .cell .addon {

    &[type=block] {
        min-width: var(--width);
        max-width: var(--width);
        margin-inline-start: 1px;
        background-color: var(--color);
        border-radius: var(--radiusMin);
        --width: 5px;
        --color: greenyellow;
    }

    &[type=dot] {
        position: relative;
        display: flex;
        align-items: center;

        &:before {
            content: "";
            display: block;
            width: 10px;
            height: 10px;
            background: var(--color, greenyellow);
            border-radius: var(--radius);
            pointer-events: none;
        }
    }

    &[type="img"] {
        margin-inline-start: 5px;

        & img {
            width: 18px;
            object-fit: cover;
            aspect-ratio: var(--ratio);
            --ratio: 12 / 9;
        }
    }

    &[type="ico"] {
        height: 18px;
        margin-block-start: 5px;
        margin-inline-start: 2px;

        &::before {
            content: '';
            display: block;
            width: 18px;
            min-width: 18px;
            height: 18px;
            background-color: var(--color);
            mask-image: var(--src);
            mask-size: contain;
            -webkit-mask-image: var(--src);
            -webkit-mask-size: contain;
            --color: white;
        }
    }
}

com[name=table] table td:empty {
    text-align: center;
}

com[name=table] table tbody tr:is(.hidden:not(.search-filter), .closed) {
    display: none;
}

com[name=table] table tbody tr:is(.hidden:not(.search-filter)) {
    visibility: hidden;
}

com[name=table] table tbody tr td .data {
    padding-inline: 8px;
    padding-block: 1px 4px;
}

com[name=table] table tbody tr td .data:focus {
    background-color: var(--lightBlueHover);
    box-shadow: inset var(--shadow-focus);
    border-radius: var(--radiusMin);
    color: black;
}

com[name=table] > .wrap-com > .wrap-main > .wrap.in-drag table {
    user-select: none;
    pointer-events: none;
}

com[name=table][appearance-opacityonscroll="1"] > .wrap-com > .wrap-main > .wrap.in-scroll :is(th,td):first-child {
    opacity: .1;
}

/* com[name=table] table td:after {
    content: attr(data-pk);
    position: absolute;
    inset: 3px 5px auto auto;
    font-size: .6em;
} */

@media (max-width: 600px) {
    com[name=table] table tbody td:first-child {
        font-weight: initial;
        font-size: initial;
    }
}

/* table::controls */

com[name=table] .controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: calc(100% - 2px);
    min-width: 100%;
    /* width: min-content; */
    gap: var(--gapMin) var(--gapMiddle);
    padding: var(--gapMin) 0;
}

/* table::controls::detail */

com[name=table] .controls .detail {
    display: flex;
    align-items: center;
    gap: var(--gapMin) var(--gapMiddle);
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* table::controls::filter */

com[name=table] .controls .filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gapMicro);
    height: min-content;
    margin-right: auto;
}

com[name=table] .controls .filter .context {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 22px 1fr;
    justify-content: start;
    width: fit-content;
    background-color: aliceblue;
    padding: 7px 8px 9px;
    border-radius: var(--radiusMin);
}

com[name=table] .controls .filter .context input {
    position: relative;
    margin: 2px 3px 0px 4px;
}

/* com[name=table] .controls .filter:has(input:not(:nth-child(1 of :checked))) .context:has(input:checked) {
    pointer-events: none; не работает при более 3 чекбоксах!
} */

com[name=table] table :is(col, th, td).filtered {
    display: none;
}

/* table::data-container */

com[name=table] table .data:has(.data-container) {
    display: flex;
    gap: var(--gapMicro);
    flex-direction: column;
    font-size: .8em;
    font-weight: 200;
}

com[name=table] table .data .data-container {
    padding: 5px 10px 8px;
    border-radius: var(--radiusMin);
    background-color: #00000008;
    line-height: 1.1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines);
    --lines: 3;
}

com[name=table] table .data:hover .data-container {
    --lines: auto;
}

com[name=table] table .data:has(.data-container:nth-child(2)) {

    & .data-container {
        --lines: 1;
    }

    &:hover .data-container {
        --lines: auto;
    }
}

/* table::resizer */

com[name=table] table tbody tr:has([is=plugin].focus),
com[name=table] table tbody tr:has(.resizer.active) {
    filter: none;
}

com[name=table] table tbody td .resizer {
    visibility: hidden;
    position: absolute;
    top: var(--td-padding);
    bottom: var(--td-padding);
    left: calc(100% - var(--td-padding) / 4);
    width: calc(var(--td-padding) / 2);
    background-color: var(--bg-color, white); /* var(--orangeHover) */
    filter: invert(1);
    user-select: none;
    border-radius: 20px;
    z-index: 4;
    opacity: 0;
    will-change: visibility, opacity, top, bottom;
    transition: .15s visibility, .15s opacity, .15s top, .15s bottom;
    display: none;
}

com[name=table] table tbody tr:hover td .resizer {
    display: block;
    transition: .15s .05s visibility, .15s .05s opacity, .15s top, .15s bottom;
}

com[name=table] table tbody tr:hover td .resizer,
com[name=table] table tbody td .resizer.active {
    visibility: visible;
}

com[name=table] table tbody td .resizer:hover:after {
    content: "";
    position: absolute;
    inset: calc(var(--td-padding)* -1);
}

com[name=table] table tbody td:last-child .resizer {
    left: calc(100% - var(--td-padding) / 3);
}

com[name=table] table tbody td:last-child .resizer:hover:after {
    right: 0;
}

com[name=table] table:not(:has(.resizer.active)) tbody td .resizer:hover, 
com[name=table] table tbody td .resizer.active {
    opacity: 1;
    visibility: visible;
    cursor: col-resize;
    pointer-events: auto;
}

com[name=table] table tbody td .resizer.active {
    top: calc(var(--td-padding) / 1.5);
    bottom: calc(var(--td-padding) / 1.5);
}

com[name=table] table:has(.resizer.active) {
    user-select: none;
    pointer-events: none;
}

/* table::input */

com[name=table] table tbody .cell com.focus {
    background-color: white;
    z-index: 9;
}

com[name=table] table tbody tr:not(:hover) td .cell {
    pointer-events: none;
}

com[name=table] table tbody .cell :is(.data, .input)[attr-type=number] {
    text-wrap: nowrap;
}

com[name=table] table tbody td:has(:is([is=plugin]):not(com.focus)) {
    cursor: pointer;
}

com[name=table] table tbody [name=input] .input {
    background-color: transparent;
}

com[name=table] table tbody tr:not(:has(com.focus, .resizer.active)):hover .cell [name=input] .input, 
com[name=table] [name=input].focus .input {
    background-color: #00000010;
}

/* table::setbox */

com[name=table] com[name='setbox'] .boxes {
    flex-wrap: nowrap;
    padding-right: 0;
    cursor: pointer;
}

com[name=table] com[name='setbox'] .boxes .box {
    min-width: fit-content;
    max-width: 450px;
    min-height: 41.33px;
    font-size: initial;
    overflow: initial;
    background-color: transparent;
}

com[name=table] com[name='setbox'] .boxes:not(:has(.box)):after {
    content: "- - -";
    color: rgb(133 133 133 / 28%);
    background-color: transparent;
    will-change: background-color;
    transition: background-color .15s;
}

com[name=table] tr:not(:has(com.focus, .resizer.active)):hover com[name='setbox'] .boxes:not(:has(.box)):after,
com[name=table] table tbody tr:not(:has(com.focus, .resizer.active)):hover .cell [name=setbox] .box, 
com[name=table] [name=setbox].focus .box {
    background-color: #00000010;
}

/* com[name=table] table tbody tr:not(:has(com.focus, .resizer.active)) td:hover .cell [name=input] .input, 
com[name=table] table tbody tr:not(:has(com.focus, .resizer.active)) td:hover + td .cell [name=input] .input, 
com[name=table] table tbody tr:not(:has(com.focus, .resizer.active)) td:hover + td + td .cell [name=input] .input, 
com[name=table] table tbody tr:not(:has(com.focus, .resizer.active)) td:hover + td + td + td .cell [name=input] .input, 
com[name=table] table tbody tr:not(:has(com.focus, .resizer.active)) td:has(+ td:hover, + td + td:hover, + td + td + td:hover) .cell [name=input] .input, 
com[name=table] [name=input].focus .input {
    background-color: #00000010;
} */

com[name=table] com[name='setbox'] .boxes .add {
    position: absolute;
    left: -10px;
    top: calc(50% - 10px);
    box-shadow: 0 0 0 4px white, 0 0 0 5px var(--lightBlue);
    height: 20px;
    width: 20px;
    min-width: auto;
    padding: 0;
    border-radius: var(--radiusMax);
    z-index: 1;
    transform: translateX(7px);
    opacity: 0;
    visibility: hidden;
}

com[name=table] com[name='setbox'] .boxes .box .delete {
    right: -23px;
    top: calc(50% - 12.5px);
    box-shadow: var(--shadow-focus);
    pointer-events: auto;
    transform: translateX(-7px);
    visibility: hidden;
}

com[name=table] com[name='setbox'].focus .boxes :is(.add, .box .delete) {
    visibility: visible;
    opacity: 1;

    &:not(:active) {
        transform: none;
    }
}

com[name=table] tr td:last-child com[name='setbox'] .boxes .box .delete {
    right: 0;
}

com[name=table] .cell[attr-type="text"] com[name='setbox'] .boxes .box {
    text-align: left;
}

com[name=table] com[name='setbox'].focus .boxes .box {
    max-height: 9999px;
    will-change: max-height;
    transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
    transition-delay: 0s;
}

/* row-options */

com[name=table] tr td row-options {
    position: absolute;
    inset: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    width: 20px;
    border-radius: var(--radius);
    user-select: none;
    cursor: pointer;
    background-color: var(--blue);
    --dot-color: var(--blue);
    color: white;
    will-change: background-color, background-size, border-radius;
    transition: background-color .15s, background-size .15s, border-radius .15s, transform .15s, opacity .15s;
    transform: scale(.3);
    opacity: 0;

    &:before {
        content: '';
        position: absolute;
        inset: 0;
        width: 40%;
        height: 40%;
        margin: auto;
        border-radius: var(--radiusMax);
        background-color: white;
        pointer-events: none;
        will-change: transform, opacity;
        transition: transform .15s .05s;
        transform: scale(.3);
    }

    &:after {
        content: "";
        position: absolute;
        inset: -15px;
    }

    &:active:before {
        transform: scale(1.3);
        transition-delay: 0s;
    }

    &:hover:after {
        /* inset: -30px; */
        inset: -18px;
    }
}

com[name=table] tr:hover row-options,
com[name=table] tr:is(.contextmenu, .loading, .open, .selected, .drag) row-options {
    &, &::before {
        transform: none;
        opacity: 1;
    }
}

com[name=table] tr {

    &.contextmenu row-options:before {
        transform: scale(1.3);
    }

    &.loading row-options:before {
        background-color: transparent;
        animation: 1s cubic-bezier(0.06, 0.35, 0.85, 0.38) 0s infinite normal none running loading;
        border-bottom: 1.5px solid white;
    }

    &.selected:not(.loading) td row-options {
        background-color: var(--green);
    
        &:before {
            clip-path: polygon(45% 64%, 84% 14%, 100% 28%, 47% 100%, 0 49%, 15% 32%);
        }
    }

    &.open:not(.loading) td row-options:not(:hover) {
        background-color: var(--blue);

        &:before {
            clip-path: polygon(30% 25%, 25% 0, 90% 50%, 25% 100%, 30% 76%, 60% 50%);
        }
    }
}

com[name=table] table tbody tr.drag td row-options {
    background: radial-gradient(var(--dot-color) 50%, transparent 54%) 0 0, radial-gradient(rgba(0, 0, 0, .1) 1%, transparent 1%) 50px 50px;
    background-size: 6.6px 6.6px;
    border-radius: 0;

    &:before {
        transform: scale(0);
    }
}

/* row-options */

com[name=table] .additional-data {
    display: none;
}

/* th:first hack */

com[name=table] .wrap-main > .wrap thead:has(tr.groups) tr:not(.groups) th:first-child:before {
    /* [appearance-scroll=vertical] */
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 8px;
    height: 8px;
    background-color: white;
    mix-blend-mode: darken;
}

/* th:last hack */

com[name=table] .wrap-main > .wrap thead:has(tr.groups) tr:not(.groups) th:last-child,
com[name=table] .wrap-main > .wrap thead:not(:has(tr.groups)) tr th:first-child {
    /* [appearance-scroll=vertical] */
    overflow: initial!important;

    &::before {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 8px;
        height: 8px;
        background-color: white;
        mix-blend-mode: darken;
    }
}

com[name=table] .wrap-main > .wrap thead:not(:has(tr.groups)) tr th:first-child::before {
    inset: 0 auto 0 0;
}

/* table::readonly */

com[name=table][readonly] > .wrap-com > .wrap-main {
    border: 1px dashed #6a6a6a;
    border-radius: var(--radius);
    padding: calc(var(--gapMin) / 2);

    & table td:not(:last-child) {
        border-right-style: dashed;
    }
}

/* table::column-filter */

.column-filter {
    position: absolute;
    inset: auto 0 calc(100% + 10px) auto;
    border-radius: 12px;
    background-color: #f4f7ff;
    padding: 7px;

    &::before {
        content: "фильтры";
        color: black;
        font-size: .7em;
        font-weight: 200;
        position: absolute;
        inset: -2px 0 0 0;
        transition: visibility .15s;
    }
}

.column-filter:hover {

    &::before {
        visibility: hidden;
        transition: visibility 0s;
    }
    
    & .column-filter-wrap {
        max-height: 140px;
    }
}

.column-filter-wrap {
    overflow: hidden scroll;
    padding-right: 7px;
    max-height: 0;
    transition: max-height .15s;
}

/* table */




/* tree */

com[name=tree] {
    max-width: 750px;
    --branch-color: var(--blue);
    --branch-selected-color: var(--darkGreen);
}

com[name='tree'] label {
    padding-inline-start: 1px;
}

com[name=tree] .wrap-main:has(.desc, label) .wrap-tree {
    margin-block-start: 15px;
}

com[name=tree] .wrap-tree {
    --spacing: 1.5rem;
    --radius: 5px;
    --dark-grey: #ddd;
    height: 100%;
    margin-left: var(--spacing);
}

com[name=tree] .wrap-tree .data {
    display: contents;
    pointer-events: none;
}

com[name=tree] .wrap-tree .data .for-desc {
    display: contents;
    font-size: .8em;
    font-weight: 200;
}

com[name=tree] .wrap-tree ul {
    margin-left: calc(var(--radius) - var(--spacing));
    padding-left: 0;
    transform: scale(1.000001); /* хак для плавной отрисовки */
    transition: padding .15s;
}

com[name=tree] .wrap-tree li {
    display: block;
    position: relative;
    padding-left: calc(2 * var(--spacing) - var(--radius));
    margin-left: -2px;
    border-left: 1px solid var(--dark-grey);
    margin-top: 5px;
    scroll-snap-align: end;
}

com[name=tree] .wrap-tree li .as {
    position: relative;
    color: var(--blue);
    font-size: .55em;
    background: aliceblue;
    padding: 2.5px 4px 5px;
    /* ? border-radius: var(--radius); */
    border-radius: var(--radiusMin);
    pointer-events: none;
    transition: .15s;
    margin: auto 0 auto auto;
    line-height: 1;
}

com[name=tree] .wrap-tree .branch {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: var(--gapMicro);
}

com[name=tree] .wrap-tree .branch *::selection {
    background-color: black;
    color: white;
}

com[name=tree] .wrap-tree .branch:active {
    transition: .05s;
    transform: translateY(-1px) scale(.98);
}

com[name=tree] .wrap-tree .branch:hover:before {
    opacity: 1;
    visibility: visible;
    transform: none;
}

com[name=tree] .wrap-tree .branch:before {
    content: "";
    position: absolute;
    inset: -3px -7px -3.5px;
    background-color: var(--blue);
    border-radius: var(--radiusMin);
    opacity: 0;
    transform: scale(.95);
    visibility: hidden;
    transition: .15s, transform .15s cubic-bezier(0.25, 0.1, 0.48, 2.02);
    z-index: -1;
}

com[name=tree] .wrap-tree .branch:hover {
    color: white;
    transition: .15s;
    z-index: 2;
}

com[name=tree] .wrap-tree .branch:not([unselectable]):hover .as {
    background: #ffffff33;
    color: aliceblue;
    transition: 0s .03s;
}

com[name=tree] .wrap-tree .branch[unselectable] {
    color: initial;
}

com[name=tree] .wrap-tree .branch[unselectable]::before {
    background-color: transparent;
    border: 1px dashed gray;
}

com[name=tree] .wrap-tree .branch.selected {
    color: white;
}

com[name=tree] .wrap-tree .branch.selected::before {
    opacity: 1;
    visibility: visible;
    transform: none;
    background-color: var(--branch-selected-color);
    inset: -1px -4px -1.5px;
}

com[name=tree] .wrap-tree li .branch.selected .as {
    background-color: #009806;
    color: white;
}

com[name=tree] .wrap-tree .branch[data-count]:after {
    content: attr(data-count);
    position: absolute;
    top: 0px;
    left: -50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 21px;
    border-radius: 20px;
    font-size: .7em;
    padding-bottom: 2px;
    box-sizing: border-box;
    background-color: var(--branch-color);
    color: white;
    pointer-events: none;
    z-index: 1;
    transition: .15s;
    transform: scaleX(.7);
    transform-origin: right;
    opacity: 0;
}

com[name=tree] .wrap-tree .branch[data-count]:hover:after {
    transform: none;
    opacity: 1;
}

com[name=tree] .wrap-tree li:not(:has(details)) {
    padding-left: calc(1.8 * var(--spacing) - var(--radius));
}

com[name=tree] .wrap-tree ul li:last-child {
    border-color: transparent;
}

com[name=tree] .wrap-tree ul li::before {
    content: '';
    display: block;
    position: absolute;
    top: calc(var(--spacing) / -1.9);
    left: -1px;
    width: calc(var(--spacing));
    height: calc(var(--spacing) + 1px);
    border: solid var(--dark-grey);
    border-width: 0 0 1px 1px;
    border-bottom-left-radius: 12px;
}

com[name=tree] .wrap-tree summary {
    display: block;
    cursor: pointer;
    /* margin-top: 6px; */
    padding-top: 2.5px;
    z-index: 1;
}

com[name=tree] .wrap-tree summary::marker,
com[name=tree] .wrap-tree summary::-webkit-details-marker {
    display: none;
}

com[name=tree] .wrap-tree summary:focus {
    outline: none;
}

com[name=tree] .wrap-tree summary:focus-visible {
    outline: 1px dotted #000;
}

com[name=tree] .wrap-tree li::after,
com[name=tree] .wrap-tree summary::before {
    content: '';
    display: block;
    position: absolute;
    top: calc(var(--spacing) / 1.8 - var(--radius));
    left: calc(var(--spacing) - var(--radius) - 1px);
    width: calc(2 * var(--radius));
    height: calc(2 * var(--radius));
    border-radius: 50%;
    background: var(--dark-grey);
}

com[name=tree] .wrap-tree summary::before {
    background: var(--branch-color) url(/files/public/static/media/vector/expand-collapse.svg) 0 0;
    z-index: 1;
    --radius: 10px;
}

com[name=tree] .wrap-tree details:has(.branch.selected) > summary::before,
com[name=tree] .wrap-tree .branch.selected[data-count]:after {
    background-color: var(--darkGreen);
}

com[name=tree] .wrap-tree details[open] > summary::before {
    background-position: calc(-2 * var(--radius)) 0;
}

com[name=tree] .wrap-tree ul:has(> li:nth-child(8) > .branch[finally]) {
    max-height: max(230px, 25vh);
    overflow: hidden scroll;
    padding: 4px 10px 4px 2px;
    margin-left: -21px;
    margin-top: 5px;
    scroll-snap-type: y mandatory;
    scroll-padding-block: 10px;
}

com[name=tree] .addon {
    width: fit-content;
    height: 20px;
    max-width: 18px;
    margin-top: 2px;
    pointer-events: none;
}

com[name=tree] .addon[type="img"] img {
    width: 100%;
    aspect-ratio: var(--ratio);
    --ratio: 12 / 9;
    object-fit: cover;
}

com[name=tree] .addon[type='dot']:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: var(--color, greenyellow);
    border-radius: var(--radius);
    pointer-events: none;
}

com[name=tree] .addon[type='dot'] {
    position: relative;
    display: flex;
    align-items: center;
    margin-block-end: -.75px;
}

com[name=tree] .addon[type="ico"]:before {
    content: '';
    display: inline-block;
    width: 18px;
    min-width: 18px;
    height: 18px;
    background-color: var(--color, var(--blue));
    mask-image: var(--src);
    mask-size: contain;
    -webkit-mask-image: var(--src);
    -webkit-mask-size: contain;
}

com[name=tree] .branch:is(:hover, .selected) .addon[type="ico"]:before {
    background-color: white;
}

com[name=tree] .addon[type="text"] {
    max-width: fit-content;
    margin: initial;
}

/* tree */

/* links */

com[name=links] {

    & ul {
        display: flex;
        flex-direction: column;
        gap: var(--gapMicro);
        padding-inline: 0;
    }

    & li {
        display: flex;
        gap: var(--gapMicro);

        &.active {
            opacity: 0.5
        }
        
        & a {
            display: flex;
            gap: var(--gapMicro);

            & .addon {
                min-width: 33px;
            }
        }
    }
}

/* links */



/* apps */

apps {
    position: absolute;
}

/* breadcrumbs */

app[name="breadcrumbs"] {
    margin-block-start: calc(var(--gapMin) - var(--gap));
}

/* app[name=breadcrumbs] .wrap-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
} */

app[name=breadcrumbs] .wrap-breadcrumbs .crumb {
    display: inline;
}

app[name=breadcrumbs] .wrap-breadcrumbs .item {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
    transition: .15s;
}

app[name=breadcrumbs] .wrap-breadcrumbs .item:hover {
    color: var(--blueHover);
}

app[name=breadcrumbs] .wrap-breadcrumbs .item:after {
    content: "→";
    padding-inline: 5px;
    color: var(--middleGray);
    pointer-events: none;
    user-select: none;
    transition: .15s;
}

app[name=breadcrumbs] .wrap-breadcrumbs .item:empty:after {
    padding: 0;
}

app[name=breadcrumbs] .wrap-breadcrumbs h1 {
    margin: 0;
    padding: 0;
    font-size: larger;
}

/* breadcrumbs */

/* search */

app[name=search] .wrap {
    position: relative;
}

app[name=search] .wrap-search {
    background-color: var(--inputBackground);
    border-radius: var(--radius);
    min-height: 54px;
    position: relative;
    cursor: pointer;
    container-type: inline-size;
    z-index: 100;
    transition: background-color .15s .1s;

    & .level {
        position: absolute;
        left: 6px;
        top: 25%;
        bottom: 25%;
        width: 6px;
        height: auto;
        padding: 0;
        background-color: var(--blue);
        border-radius: var(--radiusMax);
        cursor: pointer;
        transition: .15s transform, .15s background-color, .15s opacity;
        opacity: 0;

        &:hover {
            background-color: var(--darkBlue);
        }

        &:active {
            transform: scaleY(0.8) !important;
            transition: 0s;
        }
    }

    @container (max-width: 650px) {
        .hint::after {
            display: none;
        }
    }

    &:focus-within .level {
        opacity: 1;
    }
}

app[name=search][data-level=strict] .wrap-search .level {
    background-color: var(--darkGreen);
}

app[name=search][data-mode=search] .wrap-search:focus-within {
    background-color: white;
    transition: background-color .15s;
}

app[name=search] .wrap-search .input {
    box-sizing: border-box;
    padding: 10px 228px 12px 18px;
    font-size: 1.5em;
    font-weight: 300;
    transition: transform .15s;
}

app[name='search'] .wrap-search .input[placeholder]:empty::before {
    content: attr(placeholder);
    color: var(--placeholder);
    text-wrap: nowrap;
    transition: color .15s;
}

app[name='search'] .wrap-search .controls {
    display: flex;
    gap: var(--gapMicro);
    position: absolute;
    right: 14px;
    top: 14px;
    pointer-events: none;
}

app[name='search'] .wrap-search:not(:focus-within) .input:not(:focus-within) {
    max-height: 54px;
    overflow: hidden;
}

app[name='search'] .wrap-search .controls button {
    padding: 4px 11px 9px;
    background: linear-gradient(75deg, var(--gray) 47%, var(--blue) 47%);
    box-sizing: border-box;
    border-radius: var(--radiusMax);
    cursor: pointer;
    height: auto;
    transform: translateX(-3px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: .15s, font-size .01s;
    display: flex;
    gap: 15px;
}

app[name='search'][data-mode=search] .wrap-search .controls button.type {
    background: linear-gradient(75deg, var(--blue) 47%, var(--gray) 47%);
}

app[name='search'][data-mode=filter] .wrap:focus-within .wrap-search .input[placeholder]:empty::before {
    content: 'Фильтр';
}

app[name='search'][data-mode=search] .wrap:focus-within .wrap-search .input[placeholder]:empty::before {
    content: 'Поиск';
}

app[name='search'] .wrap-search .controls button.type>span {
    pointer-events: none;
    color: wheat;
    transition: .15s;
}

app[name='search'] .wrap-search .controls button.type:hover>span {
    color: white;
}

app[name='search'][data-mode='filter'] .wrap-search .controls button.type>span:last-child,
app[name='search'][data-mode='search'] .wrap-search .controls button.type>span:first-child {
    color: greenyellow;
}

app[name='search'] .wrap-search button.clear {
    background: var(--lightBlack);
}

app[name='search'] .wrap-search button.clear:hover {
    background: black;
}

app[name=search] .wrap:focus-within .wrap-search button.type,
app[name=search] .wrap:focus-within .wrap-search:has(.input:not(:empty)) button.clear,
app[name=search] .wrap:has(.input:not(:empty)) button:is(.type, .clear) {
    pointer-events: auto;
    visibility: visible;
    transform: none;
    opacity: 1;
}

app[name=search] .wrap-filter-result {
    top: calc(100% + var(--gapMicro));
    left: 0px;
    right: 0px;
    position: absolute;
    user-select: none;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    height: min-content;
    gap: var(--gapMicro);
    z-index: 99;
    transition: .15s;
    transform: translateY(-5px);
    opacity: 0;
    visibility: hidden;
    background: white;
    padding: 8px;
    border-radius: var(--radius);
}

app[name=search] .wrap-filter-result .filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gapMicro);
}

app[name=search] .wrap-filter-result .filter button {
    width: max-content;
    height: 22px;
    padding: 0 8px 3px;
    border-radius: var(--radius);
}

app[name=search] .wrap-filter-result .filter button:before {
    content: '✓';
    display: inline-block;
    padding-right: 4px;
    width: 10px;
}

app[name=search] .wrap-filter-result .filter button.off {
    background: var(--middleGray);
}

app[name=search] .wrap-filter-result .filter button.off:before {
    content: '•';
}

app[name=search] .wrap-filter-result .filter button.empty:not(.off) {
    opacity: .5;
}

app[name=search][data-mode=search] .wrap:focus-within .wrap-filter-result {
    user-select: text;
    pointer-events: auto;
    visibility: visible;
    transform: none;
    opacity: 1;
}

app[name=search] .wrap-result {
    overflow: hidden;
    transition: .15s;
    display: flex;
    flex-direction: column;
    max-height: calc(70vh - 50px);
    height: min-content;
    z-index: 99;
}

app[name=search] .wrap-result:has(.result:empty),
app[name=search] .wrap-result:not(:has(.wrap-table:not(.hidden))) {
    margin-top: -11px;
    visibility: hidden;
}

/* app[name=search] .wrap-result .result:empty {
    visibility: hidden;
} */

app[name=search] .wrap-result .result {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--gapMicro);
    padding: 0 var(--gapMicro) var(--gapMicro) 0;
}

app[name=search] .wrap-result .result td[title=""]:before {
    content: '- - -';
    color: var(--middleGray);
}

app[name=search] .wrap-result .result table {
    border-collapse: collapse;
    width: 100%;
}

app[name=search] .wrap-result .result tbody td {
    padding: 8px 12px 10.5px;
    line-height: 1.17;
    /* vertical-align: baseline; */
}

app[name=search] .wrap-result .result tbody td {
    background-color: rgb(159 255 0 / calc(var(--match) / 2));
}

app[name=search] .wrap-result .result thead {
    position: sticky;
    top: 0;
    background-color: var(--blue);
    color: white;
    z-index: 1;
}

app[name=search] .wrap-result .result thead td {
    padding: 2px 12px 6.5px;
    line-height: 1;
    box-sizing: border-box;
    white-space: nowrap;
}

app[name=search] .wrap-result .result thead td[insearch]:after {
    content: '.';
}

app[name=search] .wrap-result .result td[data-type=id] {
    text-align: center;
    box-sizing: border-box;
    width: 60px;
    min-width: 60px;
}

app[name=search] .wrap-result .result td:is([data-type=date], [data-type=datetime], [data-type=time], [data-type=int]) {
    text-align: center;
}

app[name=search] .wrap-result .result td div[data-after]:after {
    content: attr(data-after);
    margin-inline-start: 2px;
    font-size: 11px;
}

app[name=search] .wrap-result .result tr {
    outline: none;
}

app[name=search] .wrap-result .result tr:nth-child(even) {
    background: #f7f7f7;
}

app[name=search] .wrap-result .result tbody tr:hover,
app[name=search] .wrap-result .result tbody tr:focus-visible {
    background: var(--lightBlueHover);
}

app[name=search] .wrap-result .result .wrap-table:before {
    content: attr(data-name);
    font-size: .8em;
    font-weight: 600;
    color: var(--blue);
    /* border-bottom: 2px dotted var(--blue);
    display: block; */
    margin-left: 1px;
}

app[name=search] .wrap .backlight {
    background: #00000059;
    backdrop-filter: blur(2rem);
    z-index: 10;
    transition: opacity .2s, visibility .2s;
}

app[name=search][data-mode=search] .wrap:focus-within .backlight {
    visibility: visible;
    opacity: 1;
}

app[name=search][data-mode=search] .wrap-table.hidden {
    display: none;
}

html main mark{
    background: orange;
    color: black;
}

html span.highlight {
    background: yellow;
}

@media (max-width: 1024px) {

    app[name=search] .wrap {
        transition: .15s;

        &:focus-within {
            margin-left: -70px;
        }

        & .wrap-search .input {
            padding-inline-end: 60px;
        }
    }
}

@media (max-width: 768px) {

    app[name='search'] .wrap-search .controls {
        flex-direction: column-reverse;
        top: 11px;

        & button {
            font-size: 0;
        }
    }
}

/* @media (max-width: 1280px) {

    html:has(app[name=search][data-mode=search]:focus-within) {
        position: fixed;
    }
} */

/* search */


/* filter */

app[name=filter] {
    --input-radius: var(--radiusMin);

    & .wrap {
        position: relative;
        container-type: inline-size;
    
        &:focus-within .wrap-filter .input[placeholder]:empty::before {
            content: 'Фильтр';
        }
    
        &:focus-within .wrap-filter:has(.input:not(:empty)) button.clear, 
        &:has(.input:not(:empty)) button.clear {
            pointer-events: auto;
            visibility: visible;
            transform: none;
            opacity: 1;
        }
    
        & .wrap-filter {
            background-color: var(--inputBackground);
            border-radius: var(--input-radius);
            position: relative;
            cursor: pointer;
            z-index: 100;
            transition: background-color .15s .1s, border-radius .15s;
    
            &:has(.input:not(:empty)) {
                --input-radius: var(--radius);
            }
    
            & .input {
                box-sizing: border-box;
                padding: 2px 92px 6px 12px;
                font-size: 1.5em;
                font-weight: 300;
                transition: font-size .15s, padding .15s;

                &:focus {
                    padding-inline-start: 18px;
                }
    
                &:empty {
                    font-size: 1.1em;
    
                    &[placeholder]::before {
                        content: attr(placeholder);
                        color: var(--placeholder);
                        text-wrap: nowrap;
                        transition: color .15s;
                    }
                }

                & span.hint:after {
                    margin-inline: 8px;
                    padding-block: 0px 4px;
                }
            }
    
            & .controls {
                display: flex;
                gap: var(--gapMicro);
                position: absolute;
                right: 7px;
                top: 7px;
                pointer-events: none;
    
                & button {
                    padding: 4px 11px 9px;
                    box-sizing: border-box;
                    border-radius: var(--radiusMax);
                    cursor: pointer;
                    height: auto;
                    display: flex;
                    gap: 15px;
                    background-color: var(--lightBlack);
                    transform: translateX(-3px);
                    opacity: 0;
                    pointer-events: none;
                    visibility: hidden;
                    transition: .15s;
                    
                    &:hover {
                        background-color: black;
                    }
                }
            }

            & .level {
                position: absolute;
                left: 6px;
                top: 25%;
                bottom: 25%;
                width: 6px;
                height: auto;
                padding: 0;
                background-color: var(--blue);
                border-radius: var(--radiusMax);
                cursor: pointer;
                transition: .15s transform, .15s background-color, .15s opacity;
                opacity: 0;
            
                &:hover {
                    background-color: var(--darkBlue);
                }
            
                &:active {
                    transform: scaleY(0.8) !important;
                    transition: 0s;
                }
            }
            
            &:focus-within .level {
                opacity: 1;
            }
        }

        @container (max-width: 450px) {
            .hint::after {
                display: none;
            }
        }
    }

    &[data-level=strict] .wrap .wrap-filter .level {
        background-color: var(--darkGreen);
    }
}

/* filter */


/* nav */

app[name=nav] {
    --size: clamp(450px, 20vw, 500px);
    --height: 850px;
    --gap: var(--gapMiddle);
    --padding: calc(var(--gap) / 2);
}

app[name=nav] nav .wrap-nav {
    overflow-y: scroll;
    overflow-x: hidden;
}

app[name=nav] nav .wrap-nav::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: #00000024;
    border-radius: var(--radius);
}

app[name=nav] nav .wrap-nav::-webkit-scrollbar-thumb {
    background: var(--gray);
    border-radius: var(--radius);
    border: none;
}

app[name=nav] nav .wrap-nav::-webkit-scrollbar-thumb:hover {
    background: #e0e0e0;
}

app[name=nav] nav .wrap-nav .custom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-bottom: var(--gapMicro);

    & a {
        padding: 0;
    }
}

app[name=nav] nav .wrap-nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: 0 var(--gap) 0 0;
    margin: auto;
    break-inside: avoid;
    --gap: calc(var(--gapMin) / 2);
}

app[name=nav] nav .wrap-nav ul li {
    display: block;
    position: relative;
    box-sizing: border-box;
    border-radius: var(--radiusMin);
    cursor: pointer;
    max-width: fit-content;
    font-weight: 300;
    transition: .15s;
    z-index: 1;
}

app[name=nav] nav .wrap-nav ul > li {
    font-size: .9em;
}

app[name=nav] nav .wrap-nav ul li.section {
    font-size: 115%;
    background: var(--blue);
}

app[name=nav] nav .wrap-nav a {
    color: white;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    /* padding-left: 5.5px; */
    padding-left: 2.5px;
}

app[name=nav] nav .wrap-nav li:not(.section) a {
    color: black;
}

app[name=nav] nav .wrap-nav li.section a {
    padding: 4px 10px 7px;
}

app[name=nav] nav .wrap-nav a:hover {
    text-decoration: underline;
}

app[name=nav] .after {
    background: #ffffff0d;
    color: white;
    padding: calc(var(--gap) / 2);
    margin: auto var(--margin) var(--margin);
    --margin: calc(var(--gap) * -1);
}

/* apps nav */

apps app[name=nav] nav {
    position: fixed;
    inset: var(--padding) var(--padding) auto;
    display: flex;
    width: fit-content;
    max-width: var(--size);
    /* max-height: calc(100% - (var(--padding) * 2)); */
    min-height: 370px;
    max-height: min(var(--height), calc(100% - (var(--padding) * 2)));
    padding: var(--gap);
    box-sizing: border-box;
    background: black;
    background: linear-gradient(252deg, rgb(0 0 0 / 67%), rgb(0 0 0 / 96%));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    transition: .3s cubic-bezier(0.5, 0, 0.25, 1), .3s visibility;
    transform: translateX(calc((var(--size) + var(--padding))* -1));
    border-radius: var(--radius);
    visibility: hidden;
}

apps app[name=nav] nav>.wrap {
    display: grid;
    gap: var(--gapMiddle);
    grid-template-rows: auto 1fr auto;
}

app[name=nav] nav .wrap-nav ul {
    margin: 0 0 var(--gap) 0;
}

app[name=nav] nav .wrap-nav ul:last-child {
    margin-bottom: auto;
}

apps app[name=nav] nav .wrap-nav li:not(.section) a {
    color: white;
}

apps app[name=nav] nav .wrap-nav li:not(.section) a.active {
    background: #ffffff26;
    padding: 4px 10px 7px;
    border-radius: var(--radiusMin);
}

apps app[name=nav].active .backlight {
    opacity: .2;
    visibility: visible;
    transition: opacity .25s .25s;
}

apps app[name=nav].active nav {
    transform: none;
    visibility: visible;
}

/* @media (max-width: 1280px) {

    apps app[name=nav] nav .wrap-nav {
        columns: auto;
    }
} */

@media (max-height: 780px) {

    app[name=nav] .wrap {
        gap: var(--gapMiddle);
    }
}

/* nav */


/* user */

app[name=user] button.exit {
    background: var(--red);
}

app[name=user] .wrap-user {
    display: flex;
    align-items: center;
    gap: var(--gapMin);
}

app[name=user] .last-entrance {
    color: #ababab;
    font-size: .85em;
}

app[name=user][data-mode]:before {
    content: attr(data-mode);
    color: #ffffff73;
    font-weight: 200;
}

/* user */


/* logo в nav */

app[name=nav] .before .logo img {
    width: 100%;
}

app[name=nav] .before .logo a {
    display: flex;
}

/* logo в nav */
/* user в nav */

app[name=user] {

    & .wrap {
        max-width: fit-content;
    }
    
    & .wrap-user {
        align-items: center;
        gap: 0 var(--gapMin);
        display: grid;
        grid-template-columns: auto 1fr;
    
        & .avatar {
            grid-column: 1;
            grid-row: 1 / 3;
            width: 100%;
            max-width: 51px;
            object-fit: cover;
            aspect-ratio: 1;
            border-radius: var(--radiusMax);
        }
    
        & :is(.name, .last-entrance) {
            grid-column: 1;
        }
    
        & .exit {
            margin-left: auto;
            grid-row: 1 / 3;
            grid-column: 2;
        }
    
        &:has(.avatar) {
            grid-template-columns: minmax(41.2px, .22fr) auto 1fr;
    
            & :is(.name, .last-entrance) {
                grid-column: 2;
            }
        
            & .exit {
                grid-column: 3;
            }
        }
    }
}

/* user в nav */


/* tabs v2 */

app[name=tabs] {
    margin-block-end: calc(var(--gapMiddle)* -1);
    max-width: fit-content;

    & tabs {
        display: flex;
        gap: calc(var(--gapMicro) / 2);
        margin: auto calc(var(--margin) * -1);
        padding: 0 var(--margin);
        border-bottom: 1px solid black;
        overflow: hidden;
        user-select: none;

        --margin: calc(var(--gapMin) / 2);
        --sub-radius: 4px;
    }
    
    & tabs tab {
        display: flex;
        flex-direction: column;
        cursor: pointer;

        &:after {
            content: "";
            display: block;
            height: 7px;
            width: 100%;
            display: flex;
            flex-direction: column;
            background-color: black;
            border-radius: var(--sub-radius) var(--sub-radius) 0 0;
            margin-block-end: -2px;
            pointer-events: none;
            transition: background-color .15s, transform .15s;
            will-change: background-color, transform;
        }
    
        &[active]:after {
            background-color: var(--blue);
        }
        
        &:hover:after {
            background-color: var(--darkBlue);
            transform: scaleX(.95);
        }
    
        &:active:after {
            transform: scale(.9);
        }
    }
    
    & tabs tab a {
        position: relative;
        display: block;
        padding: 0 5px 5px;
        margin: auto 2px;
        text-decoration: none;
        color: black;

        &:after {
            content: "";
            position: absolute;
            inset: 0 0 -5px 0;
        }
    }

    &.sticky {
        position: sticky;
        top: var(--app-tab-sticky);
        margin-block: calc(var(--gapMiddle)* -1) auto;
        z-index: 1;

        --app-tab-sticky: 94px;

        & tabs {
            border-bottom: none;
            border-top: 1px solid black;

            & a {
                background-color: #ffffff9e;
                border-radius: var(--radiusMin);
                backdrop-filter: blur(10px);

                &:after {
                    inset: -5px 0 0 0;
                }
            }

            & tab {
                flex-direction: column-reverse;
            }

            & tab:after {
                margin-block: -2px auto;
                border-radius: 0 0 var(--sub-radius) var(--sub-radius);
            }
        }
    }
}

/* tabs */

/* apps */



/* layouts */

/* .block, com[name=div] {
    order: 0
} */

.block.bookmark {
    position: relative;
    order: -1
}

.block.bookmark:after {
    content: "";
    position: absolute;
    inset: 0 0 auto auto;
    width: 18px;
    min-width: 18px;
    height: 18px;
    background-color: var(--pink);
    mask-image: url(/files/public/static/media/vector/ico/bookmark.svg);
    mask-size: contain;
    -webkit-mask-image: url(/files/public/static/media/vector/ico/bookmark.svg);
    -webkit-mask-size: contain;
}

:is(.block, main)[readonly] {
    border: 1px dashed #6a6a6a;
    background-color: white;
    border-radius: var(--radius);
    margin: calc(var(--margin) * -1);
    padding: var(--margin);
    opacity: .5;
    transition: .15s;
    will-change: opacity;
    --margin: calc(var(--gapMin) / 2);

    &:hover {
        opacity: 1;
        border-color: var(--middleGray);
    }
    
    & data {
        pointer-events: none;
    }
}

.auto-column {
    display: flex;
    flex-direction: column;
}

.auto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.auto-grid[data-columns='3'] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.container {
    display: flex;
    gap: var(--gapData);
    align-items: flex-start;
    flex-wrap: wrap;
}

.container.no-wrap {
    flex-wrap: nowrap;
}

.container.wide {
    flex: 1 1 100%;
}

.container:not(:has(com:not(.hidden))) {
    display: none;
}

.auto-flex {
    display: flex;
    gap: calc(var(--gap));
    padding: 1px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.auto-flex[data-columns='1'] {
    --columns: 1
}

.auto-flex[data-columns='2'] {
    --columns: 2
}

.auto-flex[data-columns='3'] {
    --columns: 3
}

.block {
    display: flex;
    flex-direction: column;
    gap: var(--gapMiddle);
    flex: var(--columns) var(--columns) calc(100% / var(--columns) - var(--gapMiddle));
}

.block:has(> com[name=header] :is(h2, h3, h4)) {
    gap: var(--gapMin);
}

.auto-flex data:not(:has(:is(com, mod):not(.hidden))) {
    display: none;
}

.block.wide {
    flex: 1 1 100%;
}

.backlight {
    max-height: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000;
    visibility: hidden;
    opacity: 0;
    z-index: 667; /*666*/
    overflow: auto;
    transition: .05s;
}

@media (max-width: 1024px) {
    .auto-flex {
        --columns: 1!important;
    }

    .auto-grid {
        grid-template-columns: auto;
    }
}

main .block.rolled data {
    display: none;
}

main .block.rolled :is(h1, h2, h3, h4):after {
    content: "...";
}

.block.hidden,
.block :is(com:not([name=header], [is-plugin], [is-embedded]), module, com[name=tree] .wrap-tree > ul > li).hidden, /*com:not([name=header])*/
.block:not( :has( :is(com:not([name=header]), module, app):not(.hidden))) {
    display: none;
}

com[name=tree] .wrap-tree li.hidden {
    display: none;
}

@media (max-width: 1080px) {

    main .block.rolled {
        margin: calc(var(--gap) * -.5) auto auto;
    }
}

@media (prefers-color-scheme: dark) {
    com[name=table][appearance-scroll=vertical] .wrap-main > .wrap thead tr:not(.groups) th:is(:first-child, :last-child):before {
        mix-blend-mode: lighten;
    }
}

/* layouts */


/* header */

header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: var(--gapMin);
    align-items: center;

    position: sticky;
    top: var(--gapMin);
    z-index: 665;
}

header:before {
    content: '';
    position: absolute;
    inset: calc(var(--gapMin) * -1);
    border-radius: 0 0 var(--radius) var(--radius);
    background-color: white;
}

header com.for-nav button {
    width: 50px;
    height: 50px;
    border-radius: var(--radiusMax);
}

header com.for-nav button:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 40%;
    height: 40%;
    margin: auto;
    border-radius: var(--radiusMax);
    background: white;
}

header app[name=breadcrumbs] {
    grid-column: 1 / 3;
}

@media (max-width: 1280px) {

    header:before {
        border-bottom: 1.5px solid var(--lightGray);
    }

    app[name="breadcrumbs"] {
        margin-block-start: calc(var(--gapMin) - var(--gap) / 1.3);
    }
}

/* header */



/* com, controls */

com {
    position: relative;
    width: fit-content;
    height: fit-content;
    display: flex;
    gap: var(--gapMin);
    align-items: center;
    padding: 10px;
    margin: -10px;
    color: black;
    border-radius: var(--radius);
    user-select: text;
    /* z-index: 1; */
    isolation: isolate;
    transition: box-shadow .15s, background-color .15s, scale cubic-bezier(0.53, 0.04, 0.24, 1.04) .25s, opacity .25s;
}

/* com:not([name='button'], [name=divider]):focus-within,
com:is([name='radio'], [name='checkbox'], [name='bbox'], [name="switch"], [name="toggle"]):has(label:active),
com[name='button']:focus-within:has(button:focus:focus-visible) {
    box-shadow: var(--shadow-focus);
    pointer-events: all;
}

html:has(com:not([name='button'], [name=divider]):is(:focus-within, :focus-visible)) {
    pointer-events: none;
} */

com.focus {
    box-shadow: var(--shadow-focus);
    pointer-events: all!important;
    z-index: 2;
}

html:has(com.focus, com[name=table] .cell.focus), /* *:not(com.focus *, com[name=table] .cell.focus *) */
com.focus[name=table]:has(.cell.focus) {
    pointer-events: none;
}

com:not(.focus) > .wrap-com > .wrap-main > input[type="number"] {
    &::-webkit-inner-spin-button, 
    &::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }
}

ui:has(com.focus) > * {
    pointer-events: none;
}

com.focus[name=table] td::has(.cell.focus) {
    pointer-events: all!important;
    z-index: 3;
}

/* com:is([name='button'], [name="switch"], [name="toggle"]) {
    align-self: normal;
} */

com[name='text'] {
    flex-direction: column;
    display: flex;
    align-items: baseline;
    gap: 0;
}

com[required] > .wrap-com:after {
    content: "*";
    position: absolute;
    top: -2px;
    left: 6px;
    color: var(--orange);
    font-size: 1.2em;
}

com.focus.modified {
    /* box-shadow: var(--shadow-focus), -2px 2px 0 1px var(--lightBlue); */
    /* box-shadow: var(--shadow-focus), -5px 0px 0 1px var(--lightBlue); */
    box-shadow: 0 0 0 1px var(--green), -2px 2px 0 1px var(--lightBlue);
}

/*com.attr-check-failed:focus-within*/
com.focus.attr-check-failed {
    /* box-shadow: 0 0 0 1px var(--red); */
    box-shadow: 0 0 0 1px var(--red), -2px 2px 0 1px var(--red);
}

com:is([name=input]:not([readonly]), [name=date], [name=datetime-local], [type="month"], [type="week"], [name=select], [name=sbox]) :is([type=input], input, select):focus,
com:is([name=input]:not([multiply], [readonly]), [name=date], [name=datetime-local], [type="month"], [type="week"], [name=select], [name=sbox]).focus :is([type=input], input, select) {
    background-color: var(--lightBlueHover);
}

com:is([name=input], [name=sbox][filter=true]):not([readonly]) :is([type=input], input, select):focus {
    cursor: text;
}

com info {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    visibility: hidden;
    opacity: 0;
    transition: .15s;
}

com info .wrap {
    border-radius: var(--radius);
    background: white;
    display: flex;
    box-shadow: var(--shadow-focus);
}

com info .wrap .info-wrap {
    display: flex;
    padding: 10px;
    gap: 10px;
    /* width: max-content; */
    width: min-content;
    --background: black;
    --color: gold;
}

com:is([capability="r"], [readonly], [access]:not([access="2"], [integrity="2"]), [error]):is(:focus-within, :has(label:active), .focus) info {
    visibility: visible;
    opacity: 1;
}

com[on-event=''] info {
    display: none;
}

com info .wrap .info-wrap > div {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 3px;
    background: var(--background);
    color: var(--color);
    padding: 5px 8px 6px 5px;
    border-radius: var(--radiusMin);
    display: none;
}

com info .wrap .info-wrap > div:before {
    content: "";
    width: 19px;
    min-width: 19px;
    height: 19px;
    background-color: var(--color);
}

com info .wrap .info-wrap > div:after {
    font-size: .62em;
    font-weight: 500;
    line-height: .87;
}

com:is([capability="r"], [readonly]) info .wrap .info-wrap .onlyread {
    display: inherit;
}

com:is([capability="r"], [readonly]) info .wrap .info-wrap .onlyread:before {
    mask-image: url(/files/public/static/media/bitmap/ico/noedit.png);
    mask-size: contain;
    -webkit-mask-image: url(/files/public/static/media/bitmap/ico/noedit.png);
    -webkit-mask-size: contain;
}

com:is([capability="r"], [readonly]) info .wrap .info-wrap .onlyread:after {
    content: "только чтение";
}

com[access]:not([access="2"], [integrity="2"]) info .wrap .info-wrap .access {
    display: inherit;
    --color: aquamarine;
}

com[access]:not([access="2"], [integrity="2"]) info .wrap .info-wrap .access:before {
    mask-image: url(/files/public/static/media/vector/ico/puzzle-w.svg);
    mask-size: contain;
    -webkit-mask-image: url(/files/public/static/media/vector/ico/puzzle-w.svg);
    -webkit-mask-size: contain;
}

com[access][access="1"]:not([integrity="2"]) info .wrap .info-wrap .access:after {
    content: "часть данных";
}

com[access][access="0"] info .wrap .info-wrap .access:before {
    mask-image: url(/files/public/static/media/bitmap/ico/no-entry.png);
    mask-size: contain;
    -webkit-mask-image: url(/files/public/static/media/bitmap/ico/no-entry.png);
    -webkit-mask-size: contain;
}

com[access][access="0"] info .wrap .info-wrap .access {
    --color: var(--red);
}

com[access][access="0"] info .wrap .info-wrap .access:after {
    font-weight: 700;
    content: "недостаточно прав";
}

com[error] info .wrap .info-wrap .error:before {
    mask-image: url(/files/public/static/media/bitmap/ico/error.png);
    mask-size: contain;
    -webkit-mask-image: url(/files/public/static/media/bitmap/ico/error.png);
    -webkit-mask-size: contain;
}

com[error] info .wrap .info-wrap .error {
    display: inherit;
    --color: var(--red);
}

com[error] info .wrap .info-wrap .error:after {
    font-weight: 700;
    content: "ошибка загрузки";
}

com[error]:is([name='header']) :is(h1, h2, h3, h4, h5):after {
    content: 'заголовок → ошибка загрузки';
    color: var(--middleGray);
}

com[error]:is([name='ol'], [name='ul']):is([access="0"], [capability="0"]) :is(ul, ol):after {
    content: 'список → ошибка загрузки';
    color: var(--middleGray);
}

com:is([name='header']):is([access="0"], [capability="0"]) :is(h1, h2, h3, h4, h5):after {
    content: 'заголовок → нет прав';
    color: var(--middleGray);
}

com:is([name='ol'], [name='ul']):is([access="0"], [capability="0"]) :is(ul, ol):after {
    content: 'список → нет прав';
    color: var(--middleGray);
}

com control {
    position: absolute;
    inset: calc(100% + 10px) auto auto 0;
    visibility: hidden;
    opacity: 0;
    transition: .15s;
}

com control .wrap {
    border-radius: var(--radius);
    background: white;
    box-shadow: var(--shadow-focus);
}

com.focus:is([data-rollbacks]):not([access="0"], [error]) control {
    visibility: visible;
    opacity: 1;
}

com control .control-wrap {
    display: flex;
    padding: 10px;
    gap: 10px;
    width: min-content;
}

com control .control-wrap .rollback {
    line-height: 1;
    background-color: var(--green);
    color: white;
    padding: 2px 5px 5px;
    border-radius: var(--radiusMin);
    cursor: pointer;
    user-select: none;
}

com control .control-wrap .rollback:before {
    content: "⮌";
    display: block;
    pointer-events: none;
    transition: .1s transform;
}

com control .control-wrap .rollback:active:before {
    transform: rotate(-24deg);
}

/* controls */

/* com.reload */

com.reload {
    opacity: .4;
    scale: .95;
}

/* com.reload */

/* com.fullscreen */

html:has(.fullscreen:not(modal)) {
    overflow: hidden;

    & :is(com, mod, app):not(.fullscreen):not(:is(.fullscreen, header, apps, modal) :is(com, mod, app)) {
        display: none;
    }
}

body:has(.fullscreen:not(modal)) {
    & header {
        transform: translateY(-85px);
        transition: .2s;

        &::before {
            border: 1px solid #b0b0b0;
            border-top: none;
        }
    }

    & header:is(:hover, :focus-within) {
        transform: none;
    }

    & header:not(:hover, :focus-within):has(.input[contenteditable]:not(:empty)) {
        transform: translateY(-65px);

        & [name="button"] {
            transform: translateY(-8px);
            transition: box-shadow .15s, background-color .15s, transform .15s;
        }
        
        & .wrap-search {
            background-color: transparent;

            & .input {
                transform: translateY(29px);

                &::before {
                    content: 'фильтр →';
                    position: absolute;
                    inset: auto 0 18px -77px;
                    font-size: .55em;
                    color: var(--gray);
                }
            }
        }
    }
}

com.fullscreen {
    position: fixed;
    inset: var(--gapMin);
    display: block;
    margin: auto;
    padding: 0;
    background-color: white;
    width: calc(100% - var(--gapMin) * 2);
    height: calc(100vh - var(--gapMin) * 2);

    /* com.table.fullscreen */

    &[name=table] {
        --max-width: initial;
        --max-height: initial;

        & .wrap-com {
            height: 100%;

            &:not(:has(label, .controls .filter)) {
                padding-top: var(--gapMin);
            }
    
            & .wrap-main {
                min-height: 0;
                width: 100%;
            }
    
            & .wrap-main > .wrap {
                height: 100%;
                width: 100%;
                max-width: none;
            }
    
            & table {
                width: 100%;
            }
        }
    }
}

/* com.fullscreen */



/* modules */

/* stages */

module[name=stages] {
    --size: clamp(40px, 80vw, calc(var(--max-width) / 3));
    z-index: 2;
}

module[name=stages] .wrap-stages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px var(--gapMin);
    margin: auto;
}

module[name=stages] .stage {
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 8px;
    box-sizing: border-box;
    justify-content: flex-start;
    background: var(--lightBlack);
    color: white;
    border-radius: var(--radiusMax);
    position: relative;
    max-width: var(--size);
    max-height: 33.34px;
    cursor: pointer;
}

module[name=stages] .stage:not(:last-child)::before {
    content: "";
    border: var(--size) solid transparent;
    border-left-color: var(--color);
    margin-top: var(--mtop);
    right: var(--right);
    top: 50%;
    border-right: 0;
    position: absolute;
    z-index: -1;
    --size: 8px;
    --mtop: calc(var(--size) * -1);
    --right: calc((var(--mtop) + 2px));
    --color: var(--lightBlack)
}

module[name=stages] .stage[data-status="Активный"]::before {
    --color: var(--blue);
}

module[name=stages] .stage[data-status="Пройден"]::before {
    --color: var(--green);
}

module[name=stages] .stage[data-status="Активный"] {
    background: var(--blue);
}

module[name=stages] .stage[data-status="Пройден"] {
    background: var(--green);
}

module[name=stages] .stage .text {
    overflow: hidden;
    padding-bottom: 2px;
    box-sizing: border-box;
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

module[name=stages] .stage[data-type="Веха"] .ico {
    width: 16px;
    min-width: 16px;
    height: 16px;
    background: white;
    border-radius: 16px;
}

module[name=stages] .stage[data-type="Фаза"] .ico {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px solid white;
    margin-top: -4px;
}

module[name=stages] .stage[data-type="Этап"] .ico {
    width: 11.5px;
    min-width: 11.5px;
    height: 11.5px;
    background: white;
    transform: rotate(45deg);
}

module[name=stages] .stage .ico.semicircle {
    position: relative;
    width: 20px;
    min-width: 16px;
    height: 12px;
    background: white;
    clip-path: polygon(70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%, 0% 0%);
}

/* stages */

/* modules */




/* :is(com, raw, module)::before {
    content: attr(id);
    font-size: .5em;
    position: absolute;
    top: 7px;
    right: calc(100% - -5px);
    width: max-content;
} */

@media (max-width: 780px) {

    body {
        padding-left: var(--gapMin);
    }

    ui left {
        display: none;
    }

    apps app[name=nav] nav {
        inset: var(--padding);
        padding: var(--gap);
    }
}

span.hint {
    color: #b4b4b4;
}

span.hint:after {
    content: "⇥ tab";
    margin-inline: 14px;
    padding-inline: 9px;
    padding-block: 4px 6px;
    background-color: #002fff0f;
    white-space: nowrap;
    border-radius: 12px;
    color: #8594cb;
}

:is(label, header):empty {
    display: none;
}

footer {
    flex: 100%;
    padding: 2cap;
    background-color: rgb(0 0 0 / 3%);
    border-radius: var(--radiusMin);

    display: none;
}

html[data-status=wait] {
    cursor: wait!important;
    pointer-events: none!important;
    user-select: none!important;
}

html.locked main *,
html.locked ui modal * {
    pointer-events: none;
}

html.locked header com.for-nav button {
    background: var(--red);
}

html.locked.freeze header com.for-nav button {
    background: var(--blue);
}

html.locked header com.for-nav button:before {
    mask-image: url(/files/public/static/media/bitmap/ico/lock.png);
    mask-size: contain;
    -webkit-mask-image: url(/files/public/static/media/bitmap/ico/lock.png);
    -webkit-mask-size: contain;
    width: 50%;
    height: 50%;
}

html.locked.freeze header com.for-nav button:before {
    mask-image: url(/files/public/static/media/bitmap/ico/freeze.png);
    -webkit-mask-image: url(/files/public/static/media/bitmap/ico/freeze.png);
}

html.reload header com.for-nav button:before {
    mask-image: url(/files/public/static/media/bitmap/ico/refresh.png)!important;
    mask-size: contain;
    -webkit-mask-image: url(/files/public/static/media/bitmap/ico/refresh.png)!important;
    -webkit-mask-size: contain;
    width: 50%;
    height: 50%;
    animation: loading 1.5s linear infinite;
}

/* animations */

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* animations */




/* experimental */

header.dark:before {
    background-color: #191919;
    border-radius: 0 0 var(--radius) var(--radius);
}

header.dark app[name=search] .wrap-search,
header.dark app[name=search] .wrap-filter-result {
    filter: invert(.88);
}

/* experimental */




/* PROJECT STAGES */

modal .auto-flex {
    padding: 1px 1px 5px;
}

modal data fieldset {
    margin: 0;
    border: none;
    border-top: 1px solid var(--middleGray);
}

modal data fieldset legend {
    padding-inline: 8px;
}

modal data fieldset .wrap {
    margin-inline-start: -0.75em;
}

modal data.users .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gapMicro);
    flex-direction: row;
    margin-inline-start: -0.75em;
}

modal data.users .user {
    position: relative;
    padding: 4px 11px 7px;
    background: #d9e6fa;
    color: var(--blue);
    transition: .15s;
    font-size: .8em;
    font-weight: 600;
    border-radius: var(--radius);
}

modal data.users .user[data-status]::before {
    padding-right: 6px;
}

modal data.users .user[data-status='1'] {
    background: #dbfad9;
    color: var(--green);
}

modal data.users .user[data-status='1']::before {
    content: "✓";
}

modal data.users .user[data-status='0'] {
    background: #fad9d9;
    color: var(--red);
}

modal data.users .user[data-status='0']::before {
    content: '✕';
}

modal data.users .user[data-status='manager'] {
    background: var(--blue);
}

modal data.history .wrap:empty:after {
    content: '. . .';
    color: var(--gray);
    width: 100%;
    text-align: center;
    display: block;
}

modal data.history .event {
    font-size: .88em;
}

/* PROJECT STAGES */



/* DRAG */

/* html.drag-list com[name=tree] ul {
    transition: .15s;
    padding-top: 5px;
    padding-bottom: 5px;
} */

/* html.drag-list com[name=tree] li.selected {
    box-shadow: 0 0 0 1px #5500ff;
    border-radius: 3px;
}

html.drag-list com[name=tree] ul.dropfield {
    box-shadow: 0 0 0 2px #ff0008;
    border-radius: 3px;
} */

html.drag-list com[name=tree] ul li.selected {
    border-radius: var(--radiusMin);
    box-shadow: inset var(--shadow-focus);
}

html.drag-list com[name=tree] .wrap-tree li.selected summary::before {
    background-color: var(--lightBlue);
}

html.drag-list com[name=tree] .wrap-tree li.selected::after {
    background-color: var(--lightBlue);
}

html.drag-list com[name=tree] .wrap-tree li.selected::before {
    border-bottom: none;
    border-bottom-left-radius: 0;
}

html.drag-list com[name=tree] .wrap-tree ul:empty:after {
    content: '';
    height: 4px;
    position: absolute;
    width: 90%;
    z-index: 1;
}

/* DRAG */