input {
    outline: none;
}

.ui-form {
    grid-gap: 40px;
    height: 100%;
    /* height: fit-content; */
    overflow: visible;

}

.ui-formContent {
    display: grid;
    grid-template-columns: 330px 1fr;
    grid-row-gap: 15px;
    grid-column-gap: 30px;
    align-items: center;
    align-content: start;
    justify-items: start;
    justify-content: start;
    /* height: 100%; */
    overflow: auto;
    max-height: calc(100dvh - 90px - 100px - 116px);
}

.ui-formContent label {
    padding-top: 5px;
    line-height: normal;
    align-self: flex-start;
}

.grid-contentBox--withPanel .ui-formContent {
    max-height: calc(100dvh - 90px - 100px - 116px - 10px);
}

.ui-labelMark--alert {
    border: 2px solid tomato;
    border-radius: 5px;
    padding: 5px 10px;
    box-sizing: border-box;
}

.ui-formControls {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-end;
}

.ui-formSeparator {
    position: relative;
}

.ui-formSeparator::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--ui-color-border);
    top: -20px;
}

.ui-form__requiredLabel::before {
    content: '*';
    color: tomato;
}

.ui-form__labelError {
    color: tomato;
    font-weight: 600;
}

.ui-input {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #e1e1e1;
    /* border-bottom: 1px solid var(--ui-color-border-input); */
    min-height: 36px;
    margin: 0;
    padding: 0;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
    min-width: 260px;
}

.ui-input--number {
    min-width: 10px;
    max-width: 50px;
}

.ui-inputTime,
.ui-inputDate {
    font-size: 16px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #e1e1e1;
    min-height: 36px;
    min-width: 100px;
}

.ui-inputTime::-webkit-clear-button,
.ui-inputDate::-webkit-clear-button {
    -webkit-appearance: none;
    display: none;
}

.ui-inputTime::-webkit-inner-spin-button,
.ui-inputDate::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

.ui-inputDate::-webkit-calendar-picker-indicator,
.ui-inputTime::-webkit-calendar-picker-indicator {
    color: rgba(0, 0, 0, 0);
    width: 15px;
    height: 15px;
    border: none;
    opacity: 1;
    background-size: contain;
}

.ui-inputDate::-webkit-calendar-picker-indicator {
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTgnIGhlaWdodD0nMjAnIHZpZXdCb3g9JzAgMCAxOCAyMCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTQgMTFIOVYxNkgxNFYxMVpNMTMgMFYySDVWMEgzVjJIMkMwLjg5IDIgMC4wMDk5OTk5OSAyLjkgMC4wMDk5OTk5OSA0TDAgMThDMCAxOS4xIDAuODkgMjAgMiAyMEgxNkMxNy4xIDIwIDE4IDE5LjEgMTggMThWNEMxOCAyLjkgMTcuMSAyIDE2IDJIMTVWMEgxM1pNMTYgMThIMlY3SDE2VjE4WicgZmlsbD0nYmxhY2snIGZpbGwtb3BhY2l0eT0nMC41NCcvPjwvc3ZnPgo=") no-repeat;
}

.ui-inputTime::-webkit-calendar-picker-indicator {
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAnIGhlaWdodD0nMjAnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGNsaXAtcnVsZT0nZXZlbm9kZCcgZD0nTTAgMTBDMCA0LjQ4IDQuNDcgMCA5Ljk5IDBDMTUuNTIgMCAyMCA0LjQ4IDIwIDEwQzIwIDE1LjUyIDE1LjUyIDIwIDkuOTkgMjBDNC40NyAyMCAwIDE1LjUyIDAgMTBaTTIgMTBDMiAxNC40MiA1LjU4IDE4IDEwIDE4QzE0LjQyIDE4IDE4IDE0LjQyIDE4IDEwQzE4IDUuNTggMTQuNDIgMiAxMCAyQzUuNTggMiAyIDUuNTggMiAxMFpNOSA1SDEwLjVWMTAuMjVMMTUgMTIuOTJMMTQuMjUgMTQuMTVMOSAxMVY1WicgZmlsbD0nYmxhY2snIGZpbGwtb3BhY2l0eT0nMC41NCcvPjwvc3ZnPgo=") no-repeat;
}

.ui-block {
    min-width: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-formGroup {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: flex-start;
}

.ui-formGroup--diff {
    gap: 13px;
}

.ui-button {
    min-height: 36px;
    border: 1px solid var(--ui-color-accent-green);
    color: var(--ui-color-accent-green);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 15px;
    text-transform: uppercase;
    font-size: 14px;
    border-radius: 4px;
    font-weight: 500;
    transition: .2s;
    text-decoration: none;
    line-height: normal;
    width: fit-content;
    line-height: unset;
    white-space: nowrap;
}

.ui-button--disabled {
    border: #999;
    pointer-events: none;
    color: #999;
    background-color: #ededed;
}

.ui-button:disabled {
    border: #999;
    pointer-events: none;
    color: #999;
    background-color: #ededed;
}

.ui-button:hover {
    border: 1px solid var(--ui-color-accent-green);
    color: #fff;
    background-color: var(--ui-color-accent-green);
    text-decoration: none;
}

.ui-button--alert {
    border-color: tomato;
    color: tomato;
}

.ui-button--alert:hover {
    background: tomato;
    color: #fff;
}

.ui-button--slim {
    min-height: 20px;
    text-transform: none;
}

.ui-controlButton {
    min-height: 30px;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border-radius: 55px;
    background-color: #F5F5F5;
    color: #444;
    text-decoration: none;
    font-size: 12px;
    line-height: auto;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.ui-controlButton--backLink::before {
    content: '';
    width: 15px;
    height: 15px;
    display: flex;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNDAxLjQgMjI0aC0yMTRsODMtNzkuNGMxMS45LTEyLjUgMTEuOS0zMi43IDAtNDUuMnMtMzEuMi0xMi41LTQzLjIgMEw4OSAyMzMuNGMtNiA1LjgtOSAxMy43LTkgMjIuNHYuNGMwIDguNyAzIDE2LjYgOSAyMi40bDEzOC4xIDEzNGMxMiAxMi41IDMxLjMgMTIuNSA0My4yIDAgMTEuOS0xMi41IDExLjktMzIuNyAwLTQ1LjJsLTgzLTc5LjRoMjE0YzE2LjkgMCAzMC42LTE0LjMgMzAuNi0zMiAuMS0xOC0xMy42LTMyLTMwLjUtMzJ6Ij48L3BhdGg+PC9zdmc+');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.ui-controlButton--backLink:hover {
    filter: brightness(.9);
}

.ui-inputCheckbox {
    width: 15px;
    height: 15px;
    border: 2px solid var(--ui-color-accent-green);
    align-self: center;
}

.ui-inputCheckbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ui-color-border-input);
    border-radius: 3px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
}

.ui-inputCheckbox:checked {
    background-color: var(--ui-color-accent-green);
    border-color: var(--ui-color-accent-green);
}

.ui-inputCheckbox:checked::before {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTQnIGhlaWdodD0nMTAnIHZpZXdCb3g9JzAgMCAxNCAxMCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGNsaXAtcnVsZT0nZXZlbm9kZCcgZD0nTTUgMTBMMCA1LjE5MjMxTDEuNCAzLjg0NjE1TDUgNy4zMDc2OUwxMi42IDBMMTQgMS4zNDYxNUw1IDEwVjEwWicgZmlsbD0nI0VFRUVFRScvPjwvc3ZnPgo=");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
}

.ui-inputCheckbox:hover {
    border-color: #999;
}


.ui-inputTags {
    position: relative;
    min-width: 250px;
}

.ui-inputTags__display {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #e1e1e1;
}

.ui-inputTags__inputSearch {
    display: flex;
    min-height: 36px;
    background-color: transparent;
    border: none;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}

.ui-inputTags__list {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;

    z-index: 51;
    position: absolute;
    left: 0;
    box-shadow: var(--ui-shadow-lists);
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    width: 270px;
    max-height: 350px;
    overflow: auto;
}

.ui-inputTags__list:empty {
    display: none;
}

.part-listItem__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: 60px 160px;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    max-width: 250px;
    box-sizing: border-box;
    transition: .2s;
}

.part-listItem__option * {
    pointer-events: none;
}

.part-listItem__option:hover {
    background-color: var(--ui-color-border-input);
    color: #fff;
}

.part-listItem__optionMainElement {
    font-size: 14px;
}

.part-listItem__optionSecondElement {
    font-size: 12px;
}

.part-listItem__optionSecondElement--short {
    display: flex;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-inputTags__tagsCollector {
    display: flex;
    gap: 5px;
    max-width: 390px;
    min-width: 390px;
    flex-wrap: wrap;
    margin-bottom: 2px;
    justify-content: flex-end;
}

.ui-tagData {
    position: relative;
    max-height: 38px;
    border-radius: 3px;
    background-color: var(--ui-color-accent-green);
    box-sizing: content-box;
    padding: 0 5px;
    color: #fff;
    box-shadow: var(--ui-shadow-button);
}

.ui-tagData__remove {
    position: absolute;
    border: none;
    border-radius: 10em;
    position: absolute;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjc4LjYgMjU2bDY4LjItNjguMmM2LjItNi4yIDYuMi0xNi40IDAtMjIuNi02LjItNi4yLTE2LjQtNi4yLTIyLjYgMEwyNTYgMjMzLjRsLTY4LjItNjguMmMtNi4yLTYuMi0xNi40LTYuMi0yMi42IDAtMy4xIDMuMS00LjcgNy4yLTQuNyAxMS4zIDAgNC4xIDEuNiA4LjIgNC43IDExLjNsNjguMiA2OC4yLTY4LjIgNjguMmMtMy4xIDMuMS00LjcgNy4yLTQuNyAxMS4zIDAgNC4xIDEuNiA4LjIgNC43IDExLjMgNi4yIDYuMiAxNi40IDYuMiAyMi42IDBsNjguMi02OC4yIDY4LjIgNjguMmM2LjIgNi4yIDE2LjQgNi4yIDIyLjYgMCA2LjItNi4yIDYuMi0xNi40IDAtMjIuNkwyNzguNiAyNTZ6Ij48L3BhdGg+PC9zdmc+');
    width: 13px;
    height: 13px;
    display: flex;
    background-color: #fff;
    top: -6px;
    right: -3px;
    box-shadow: var(--ui-shadow-input-out);
    z-index: 50;
    transition: .2s;
}

.ui-tagData__remove:hover {
    filter: brightness(.8);
}

.ui-buttonLink {
    display: inline;
    background-color: transparent;
    border: none;
    text-decoration: underline;
    color: var(--ui-color-accent-green);
}

.ui-buttonLink:hover {
    text-decoration: none;
}

.ui-buttonIcon, .ui-link__buttonIcon {
    position: relative;
    width: 20px;
    height: 20px;
    border: none;
    display: flex;
    background-color: transparent;
    text-decoration: none;
    margin: 0;
    padding: 0;
    transition: .2s;
}

.ui-buttonIcon::after,
.ui-link__buttonIcon::after {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.ui-icon--edit::after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjEnIGhlaWdodD0nMjAnIHZpZXdCb3g9JzAgMCAyMSAyMCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMS4xMTY5NCAxNS4yNTI1VjE5LjAwMjVINC44NjY5NEwxNS45MjY5IDcuOTQyNUwxMi4xNzY5IDQuMTkyNUwxLjExNjk0IDE1LjI1MjVaTTE4LjgyNjkgNS4wNDI1QzE5LjIxNjkgNC42NTI1IDE5LjIxNjkgNC4wMjI1IDE4LjgyNjkgMy42MzI1TDE2LjQ4NjkgMS4yOTI1QzE2LjA5NjkgMC45MDI1IDE1LjQ2NjkgMC45MDI1IDE1LjA3NjkgMS4yOTI1TDEzLjI0NjkgMy4xMjI1TDE2Ljk5NjkgNi44NzI1TDE4LjgyNjkgNS4wNDI1WicgZmlsbD0nYmxhY2snIGZpbGwtb3BhY2l0eT0nMC41NCcvPjwvc3ZnPgo=");
}

.ui-icon--remove::after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTUnIGhlaWdodD0nMTgnIHZpZXdCb3g9JzAgMCAxNSAxOCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGNsaXAtcnVsZT0nZXZlbm9kZCcgZD0nTTEuMTE2OTQgMTZDMS4xMTY5NCAxNy4xIDIuMDE2OTQgMTggMy4xMTY5NCAxOEgxMS4xMTY5QzEyLjIxNjkgMTggMTMuMTE2OSAxNy4xIDEzLjExNjkgMTZWNEgxLjExNjk0VjE2Wk0xNC4xMTY5IDFIMTAuNjE2OUw5LjYxNjk0IDBINC42MTY5NEwzLjYxNjk0IDFIMC4xMTY5NDNWM0gxNC4xMTY5VjFaJyBmaWxsPSdibGFjaycgZmlsbC1vcGFjaXR5PScwLjU0Jy8+PC9zdmc+Cg==");
}

.ui-icon--add::after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSIiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE4IDEwaC00di00YzAtMS4xMDQtLjg5Ni0yLTItMnMtMiAuODk2LTIgMmwuMDcxIDRoLTQuMDcxYy0xLjEwNCAwLTIgLjg5Ni0yIDJzLjg5NiAyIDIgMmw0LjA3MS0uMDcxLS4wNzEgNC4wNzFjMCAxLjEwNC44OTYgMiAyIDJzMi0uODk2IDItMnYtNC4wNzFsNCAuMDcxYzEuMTA0IDAgMi0uODk2IDItMnMtLjg5Ni0yLTItMnoiIGZpbGw9IiM2ZjkzM2QiPjwvcGF0aD48L3N2Zz4=");
}

.ui-icon--download::after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzODQgNTEyJyA+PHBhdGggZD0nTTIyNCAxMzZWMEgyNEMxMC43IDAgMCAxMC43IDAgMjR2NDY0YzAgMTMuMyAxMC43IDI0IDI0IDI0aDMzNmMxMy4zIDAgMjQtMTAuNyAyNC0yNFYxNjBIMjQ4Yy0xMy4yIDAtMjQtMTAuOC0yNC0yNHptNzYuNDUgMjExLjM2bC05Ni40MiA5NS43Yy02LjY1IDYuNjEtMTcuMzkgNi42MS0yNC4wNCAwbC05Ni40Mi05NS43QzczLjQyIDMzNy4yOSA4MC41NCAzMjAgOTQuODIgMzIwSDE2MHYtODBjMC04Ljg0IDcuMTYtMTYgMTYtMTZoMzJjOC44NCAwIDE2IDcuMTYgMTYgMTZ2ODBoNjUuMThjMTQuMjggMCAyMS40IDE3LjI5IDExLjI3IDI3LjM2ek0zNzcgMTA1TDI3OS4xIDdjLTQuNS00LjUtMTAuNi03LTE3LTdIMjU2djEyOGgxMjh2LTYuMWMwLTYuMy0yLjUtMTIuNC03LTE2Ljl6JyBmaWxsPScjNzU3NTc1Jz48L3BhdGg+PC9zdmc+");
}

.ui-icon--upload::after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPScjNDQ0JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBjbGFzcz0ic3ZlbHRlLWM4dHlpaCI+PHBhdGggZD0iTTI5NiAzODRoLTgwYy0xMy4zIDAtMjQtMTAuNy0yNC0yNFYxOTJoLTg3LjdjLTE3LjggMC0yNi43LTIxLjUtMTQuMS0zNC4xTDI0Mi4zIDUuN2M3LjUtNy41IDE5LjgtNy41IDI3LjMgMGwxNTIuMiAxNTIuMmMxMi42IDEyLjYgMy43IDM0LjEtMTQuMSAzNC4xSDMyMHYxNjhjMCAxMy4zLTEwLjcgMjQtMjQgMjR6bTIxNi04djExMmMwIDEzLjMtMTAuNyAyNC0yNCAyNEgyNGMtMTMuMyAwLTI0LTEwLjctMjQtMjRWMzc2YzAtMTMuMyAxMC43LTI0IDI0LTI0aDEzNnY4YzAgMzAuOSAyNS4xIDU2IDU2IDU2aDgwYzMwLjkgMCA1Ni0yNS4xIDU2LTU2di04aDEzNmMxMy4zIDAgMjQgMTAuNyAyNCAyNHptLTEyNCA4OGMwLTExLTktMjAtMjAtMjBzLTIwIDktMjAgMjAgOSAyMCAyMCAyMCAyMC05IDIwLTIwem02NCAwYzAtMTEtOS0yMC0yMC0yMHMtMjAgOS0yMCAyMCA5IDIwIDIwIDIwIDIwLTkgMjAtMjB6Ij48L3BhdGg+PC9zdmc+");
}

.ui-icon--send::after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyM4ZjhmOGYnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJz48cGF0aCBkPSdNNDgwIDIwMS42NjdjMC0xNC45MzMtNy40NjktMjguODAzLTIwLjI3MS0zNi4yNjZMMjU2IDY0IDUyLjI3MSAxNjUuNDAxQzQwLjUzMSAxNzIuODY0IDMyIDE4Ni43MzQgMzIgMjAxLjY2N3YyMDMuNjY2QzMyIDQyOC44MDIgNTEuMTk3IDQ0OCA3NC42NjYgNDQ4aDM2Mi42NjhDNDYwLjgwMyA0NDggNDgwIDQyOC44MDIgNDgwIDQwNS4zMzNWMjAxLjY2N3pNMjU2IDMwNEw4NC42MzEgMTkyIDI1NiAxMDYuNjY3IDQyNy4zNjkgMTkyIDI1NiAzMDR6Jz48L3BhdGg+PC9zdmc+");
}

.ui-icon--copy::after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyM0NDQnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTE2IDFINGMtMS4xIDAtMiAuOS0yIDJ2MTRoMlYzaDEyVjF6bTMgNEg4Yy0xLjEgMC0yIC45LTIgMnYxNGMwIDEuMS45IDIgMiAyaDExYzEuMSAwIDItLjkgMi0yVjdjMC0xLjEtLjktMi0yLTJ6bTAgMTZIOFY3aDExdjE0eic+PC9wYXRoPjwvc3ZnPg==");
}

.ui-icon--restart::after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyM4Nzg3ODcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJz48cGF0aCBkPSdNNTAwLjMzIDBoLTQ3LjQxYTEyIDEyIDAgMCAwLTEyIDEyLjU3bDQgODIuNzZBMjQ3LjQyIDI0Ny40MiAwIDAgMCAyNTYgOEMxMTkuMzQgOCA3LjkgMTE5LjUzIDggMjU2LjE5IDguMSAzOTMuMDcgMTE5LjEgNTA0IDI1NiA1MDRhMjQ3LjEgMjQ3LjEgMCAwIDAgMTY2LjE4LTYzLjkxIDEyIDEyIDAgMCAwIC40OC0xNy40M2wtMzQtMzRhMTIgMTIgMCAwIDAtMTYuMzgtLjU1QTE3NiAxNzYgMCAxIDEgNDAyLjEgMTU3LjhsLTEwMS41My00Ljg3YTEyIDEyIDAgMCAwLTEyLjU3IDEydjQ3LjQxYTEyIDEyIDAgMCAwIDEyIDEyaDIwMC4zM2ExMiAxMiAwIDAgMCAxMi0xMlYxMmExMiAxMiAwIDAgMC0xMi0xMnonPjwvcGF0aD48L3N2Zz4=");
}

.ui-icon--infoTransparent::after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyMxM2E0ZWMnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJz48cGF0aCBkPSdNMjU2IDkwYzQ0LjMgMCA4NiAxNy4zIDExNy40IDQ4LjZDNDA0LjcgMTcwIDQyMiAyMTEuNyA0MjIgMjU2cy0xNy4zIDg2LTQ4LjYgMTE3LjRDMzQyIDQwNC43IDMwMC4zIDQyMiAyNTYgNDIycy04Ni0xNy4zLTExNy40LTQ4LjZDMTA3LjMgMzQyIDkwIDMwMC4zIDkwIDI1NnMxNy4zLTg2IDQ4LjYtMTE3LjRDMTcwIDEwNy4zIDIxMS43IDkwIDI1NiA5MG0wLTQyQzE0MS4xIDQ4IDQ4IDE0MS4xIDQ4IDI1NnM5My4xIDIwOCAyMDggMjA4IDIwOC05My4xIDIwOC0yMDhTMzcwLjkgNDggMjU2IDQ4eic+PC9wYXRoPjxwYXRoIGQ9J00yNzcgMzYwaC00MlYyMzVoNDJ2MTI1em0wLTE2NmgtNDJ2LTQyaDQydjQyeic+PC9wYXRoPjwvc3ZnPg==");
}

.ui-icon--info {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDhDMTE5LjA0MyA4IDggMTE5LjA4MyA4IDI1NmMwIDEzNi45OTcgMTExLjA0MyAyNDggMjQ4IDI0OHMyNDgtMTExLjAwMyAyNDgtMjQ4QzUwNCAxMTkuMDgzIDM5Mi45NTcgOCAyNTYgOHptMCAxMTBjMjMuMTk2IDAgNDIgMTguODA0IDQyIDQycy0xOC44MDQgNDItNDIgNDItNDItMTguODA0LTQyLTQyIDE4LjgwNC00MiA0Mi00MnptNTYgMjU0YzAgNi42MjctNS4zNzMgMTItMTIgMTJoLTg4Yy02LjYyNyAwLTEyLTUuMzczLTEyLTEydi0yNGMwLTYuNjI3IDUuMzczLTEyIDEyLTEyaDEydi02NGgtMTJjLTYuNjI3IDAtMTItNS4zNzMtMTItMTJ2LTI0YzAtNi42MjcgNS4zNzMtMTIgMTItMTJoNjRjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnYxMDBoMTJjNi42MjcgMCAxMiA1LjM3MyAxMiAxMnYyNHoiIGZpbGw9IiM0OTljNTMiPjwvcGF0aD48L3N2Zz4=");
}

.ui-icon--arrDown {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjU2IDI5NC4xTDM4MyAxNjdjOS40LTkuNCAyNC42LTkuNCAzMy45IDBzOS4zIDI0LjYgMCAzNEwyNzMgMzQ1Yy05LjEgOS4xLTIzLjcgOS4zLTMzLjEuN0w5NSAyMDEuMWMtNC43LTQuNy03LTEwLjktNy0xN3MyLjMtMTIuMyA3LTE3YzkuNC05LjQgMjQuNi05LjQgMzMuOSAwbDEyNy4xIDEyN3oiPjwvcGF0aD48L3N2Zz4=");
}

.ui-buttonIcon:disabled {
    opacity: .5;
}

.ui-buttonIcon:hover {
    filter: brightness(.7);
}


.ui-inputWithTracks {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    min-height: 36px;
    max-width: 480px;
    width: 100%;
    padding-bottom: 150px;
}

.ui-inputWithTracksItem {
    position: relative;
}

.ui-inputWithTracks__inputsBox {
    position: relative;
    min-height: 38px;
    min-width: 300px;
    width: 100%;
    border-bottom: 1px solid var(--ui-color-border-input);
}

.ui-inputWithTracks__search,
.ui-inputWithTracks__inputResult {
    position: absolute;
    border: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 36px;
    width: 100%;
    margin: 0;
    padding: 0;
}


.ui-inputRemoveButton::after {
    content: '';
    display: flex;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjc4LjYgMjU2bDY4LjItNjguMmM2LjItNi4yIDYuMi0xNi40IDAtMjIuNi02LjItNi4yLTE2LjQtNi4yLTIyLjYgMEwyNTYgMjMzLjRsLTY4LjItNjguMmMtNi4yLTYuMi0xNi40LTYuMi0yMi42IDAtMy4xIDMuMS00LjcgNy4yLTQuNyAxMS4zIDAgNC4xIDEuNiA4LjIgNC43IDExLjNsNjguMiA2OC4yLTY4LjIgNjguMmMtMy4xIDMuMS00LjcgNy4yLTQuNyAxMS4zIDAgNC4xIDEuNiA4LjIgNC43IDExLjMgNi4yIDYuMiAxNi40IDYuMiAyMi42IDBsNjguMi02OC4yIDY4LjIgNjguMmM2LjIgNi4yIDE2LjQgNi4yIDIyLjYgMCA2LjItNi4yIDYuMi0xNi40IDAtMjIuNkwyNzguNiAyNTZ6IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    width: 100%;
    height: 100%;
}

.ui-inputRemoveButton {
    position: absolute;
    background-color: tomato;
    color: #fff;
    border: none;
    border-radius: 10em;
    box-shadow: var(--ui-shadow-input-out);
    right: -10px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    display: flex;
    z-index: 4;
    cursor: pointer;
    transition: .2s;
}

.ui-deleteItemButton {
    opacity: 1;
    pointer-events: all;
    position: relative;
    position: absolute;
    min-height: 20px;
    z-index: 4;
    border: none;
    color: #fff;
    background-color: var(--ui-color-accent-blue);

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    padding: 0 15px;

    text-transform: uppercase;
    font-size: 10px;

    gap: 5px;
    border-radius: 10px;
    font-weight: 700;
    transition: .2s;
    text-decoration: none;
    line-height: normal;
    width: fit-content;
    line-height: unset;
    padding-left: 25px;
    bottom: 10px;
    right: 15px;
    transition: .2s;
}

.ui-deleteItemButton span {
    left: 0px;
    background: tomato;
    border-radius: 10em;
    position: absolute;
    font-size: 13px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    box-sizing: var(--ui-shadow-input-out);
}

.ui-deleteItemButton--isHidden {
    opacity: 0;
    pointer-events: none;
}

.ui-inputRemoveButton:hover {
    filter: brightness(.8);
}

.ui-inputWithTracks__inputResult {
    pointer-events: none;
}

.ui-inputWithTracks__search {
    z-index: 0;
}

.ui-inputWithTracks__search:focus {
    z-index: 1;
}

.ui-inputWithTracks__list {
    position: absolute;
    display: none;
    grid-template-columns: 1fr;
    grid-gap: 2px;
    align-items: start;
    box-shadow: var(--ui-shadow-box);
    bottom: 100%;
    width: 100%;
    top: 100%;
    z-index: 5;
    background: #fff;
    padding: 3px;
    box-sizing: border-box;
    height: fit-content;
    border-radius: 0 0 5px 5px;
}

.ui-inputWithTracks__list--isShow {
    display: grid;
}


.ui-inputWithTracks__listOptions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: start;
    max-height: 150px;
    overflow: auto;
}

.ui-inputWithTracks__validateMessage {
    position: absolute;
    top: -15px;
    font-size: 12px;
    z-index: 3;
}

.ui-inputWithTracks__validateMessage--error {
    color: tomato;
}

.ui-inputWithTracks__validateMessage:empty {
    display: none;
}

.ui-inputWithTracks__addButton {
    display: none;
    width: 100%;
    background: #fff;
}

.ui-inputWithTracks__addButton--isShow {
    display: flex;
}

.ui-inputWithTracksItem__itemsList {
    margin-top: 10px;
}

.ui-inputWithTracks__openTextareaButton {
    grid-column: 2;
    width: 300px;
}

.ui-inputWithTracksItem__controls {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
}


.trackString {
    cursor: pointer;
    min-height: 30px;
    padding: 5px 10px;
    transition: .2s;
    background-color: #fff;
    border-radius: 5px;
}

.trackString:hover {
    filter: brightness(.9);
}

.trackString * {
    pointer-events: none;
}

.ui-dropDown {
    position: relative;
    max-height: 30px;
    min-width: 110px;
}

.ui-dropDown__display {
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    gap: 5px;
}

.ui-dropDown__display::after {
    content: '▼';
    font-size: 10px;
    color: #444;
}

.ui-dropDown__option {
    border: none;
    background-color: #fff;
    cursor: pointer;
    transition: .2s filter;
    text-align: left;
}

.ui-dropDown__option:hover {
    filter: brightness(.9);
}

.ui-dropDown__list {
    position: absolute;
    top: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1px;
    align-items: center;
    align-content: center;
    justify-content: start;
    z-index: 99999;
    background-color: #fff;
    box-shadow: none;
    border-radius: 2px;
    height: auto;
    max-height: 0;
    overflow: hidden;
    transition: .2s;
}

.ui-dropDown__list--isOpen {
    box-shadow: var(--ui-shadow-lists);
    max-height: 150px;
    overflow: auto;
    align-content: start;
}

.ui-message {
    position: relative;
}

.ui-message--error {
    border-color: tomato;
    color: tomato;
}

.ui-textarea {
    border: none;
    resize: none;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    box-shadow: var(--ui-shadow-box-inset);
    outline: none;
}

.ui-tabs__control {
    background-color: #f5f5f5;
    min-height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 2px;
}

.ui-tabs__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    background-color: transparent;
    border: none;
    font-size: 13px;
    color: #444;
    transition: .2s;
}

.ui-tabs__button:hover {
    filter: brightness(.5);
}

.ui-tabs__button--isActive {
    color: var(--ui-color-accent-green);
}

.ui-tabs__content {
    display: none;
}

.settingsBox .ui-tabs__content.ui-tabs__content--isShow {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    align-items: start;
}

.ui-tabs__content--isShow {
    display: block;
}

.ui-inputContainer--horizontal {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
}

.ui-snackbar__message {
    cursor: pointer;
    opacity: 0;
    transform: translate(0, -80px);
    position: absolute;
    top: 0;
    right: 0;
    margin: 5px;
    min-height: 50px;
    padding: 10px 30px;
    border-radius: 5px;
    box-shadow: var(--ui-shadow-box);
    transition: .2s;
    font-weight: 600;
}

.ui-snackbar__message--show {
    opacity: 1;
    transform: translate(0, 0);
}

.ui-snackbar__message--info {
    color: #fff;
    background-color: var(--ui-color-accent-green);
}

.ui-snackbar__message--error {
    color: #fff;
    background-color: tomato
}

.ui-snackbar__message--hide {
    opacity: 0;
    transform: translate(110%, 0);
}

.ui-dropDownMulti {
    display: flex;
    align-items: flex-end;
    position: relative;
    border-bottom: 1px solid #e1e1e1;
}

.ui-dropDownMulti__openDropDownButton {
    cursor: pointer;
    margin-right: -30px;
    margin-left: 10px;
    transition: .5s;
}

.ui-dropDownMulti__optionList {
    opacity: 0;
    position: absolute;
    background-color: #fff;
    box-shadow: var(--ui-shadow-lists);
    padding: 10px;
    border-radius: 0 0 5px 5px;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    align-items: start;
    justify-content: start;
    max-height: 0;
    height: auto;
    overflow: auto;
    z-index: 99;
    pointer-events: none;
    top: 100%;
    transition: .2s;
}

.ui-dropDownMulti--isShow .ui-dropDownMulti__optionList {
    opacity: 1;
    max-height: 250px;
    pointer-events: all;
}

.ui-dropDownMulti--isShow .ui-dropDownMulti__openDropDownButton {
    transform: rotate(180deg);
}

.ui-dropDownMulti .ui-inputTags__tagsCollector {
    cursor: pointer;
    min-height: 30px;
}

.ui-dropDownMulti .ui-inputTags__tagsCollector .ui-tagData {
    cursor: text;
    height: 24px;
}

.ui-dropDownMulti__checkboxBox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    align-content: center;
}

.ui-dropDownMulti .ui-dropDownMulti__checkboxBox label {
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.ui-string__runningLine {
    position: relative;
    display: inline;
    flex-wrap: nowrap;
    white-space: nowrap;
    text-align: left;
    transition: .2s;
    width: 100%!important;
    max-width: fit-content;
    animation: scroll 10s linear alternate infinite;
}

.ui-string__runningLine--reverse {
    animation-direction: alternate-reverse;
}

.ui-string__runningLine:hover {
    animation-play-state: paused;
}

.ui-tableSortButton {
    display: inline-block;
    color: var(--ui-color-text);
    border: none;
    background-color: transparent;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    line-height: 1;
}

.ui-tableSortButton.ui-tableSortButton--sorted {
    font-weight: 600;
    filter:brightness(1.1);
}

.ui-tableSortButton::after {
    display: inline-block;
    font-size: 12px;
    color: #444;
    line-height: 1;
}

.ui-tableSortButton[data-sort_type="ASC"]::after {
    content: attr(data-field_name)'\00A0▼';
}

.ui-tableSortButton[data-sort_type="DESC"]::after {
    content: attr(data-field_name)'\00A0▲';
}

.ui-tableSortButton.ui-tableSortButton--sorted[data-sort_type="ASC"]::after {
    content: attr(data-field_name)'\00A0▼';
    font-weight: 600;
    filter:brightness(1.1);
}

.ui-tableSortButton.ui-tableSortButton--sorted[data-sort_type="DESC"]::after {
    content: attr(data-field_name)'\00A0▲';
    font-weight: 600;
    filter:brightness(1.1);
}

@keyframes scroll {
    from {
        transform: translate(10px);
    }

    to {
        transform: translate(calc(-100% + 240px));
    }
}