html {
    background: #F9F9F9;
    box-sizing: border-box;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #4D4D4D;
}

html *, html *::before, html *::after {
    box-sizing: inherit;
}

body {
    background: #F9F9F9;
    padding-bottom: 63px;
}

/* The padding above is the room the footer sits in. A page that fills the viewport renders no
   footer, and leaving the room reserved would scroll the page by exactly that much.
   The column below lets such a page take whatever is left under the header instead of
   subtracting a guessed height from the viewport: the demo banner sits above the header on
   the demo stand, and the mobile header is not the height of the desktop one. */
body.no-footer {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    /* A definite height, not a minimum: with min-height the column grows with its content, the
       page inside asks for 100% of that, and the two inflate each other. dvh keeps the mobile
       toolbars out of it, with vh for the browsers that do not know it. */
    height: 100vh;
    height: 100dvh;
}

body.no-footer > main {
    flex: 1;
    /* Without both of these a flex item is floored at its content height and never shrinks.
       The clipping belongs here and not on the body: a header dropdown is taller than the
       viewport and has to be able to scroll into view rather than be cut off. */
    min-height: 0;
    overflow: hidden;
    /* The wrapper centres itself with `margin: 0 auto`, and an auto margin across a flex
       container's cross axis cancels the stretch that would have fitted it to the viewport:
       it would size to its own content and hold the page open at its max-width. */
    width: 100%;
    min-width: 0;
}

/* Narrow enough and the page stacks instead of filling the viewport, so it needs the scroll
   back: a fixed-height body with a clipping main would simply cut the bottom off. */
@media (max-width: 900px) {
    body.no-footer {
        display: block;
        height: auto;
    }

    body.no-footer > main {
        overflow: visible;
    }
}

small {
    font-size: 0.8em;
}

.regular {
    font-weight: normal;
}

.main-title {
    margin-bottom: 32px;
    font-weight: 600;
    font-size: 34px;
    line-height: 1.25;
    color: #222222;
}

.wrapper {
    max-width: 1224px;
    margin: 0 auto;
}

.wide-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
}

.width-10 {
    width: 10% !important;
}

.width-15 {
    width: 15% !important;
}

.width-20 {
    width: 20% !important;
}

.width-30 {
    width: 30% !important;
}

.width-40 {
    width: 40% !important;
}

.width-50 {
    width: 50% !important;
}

.width-60 {
    width: 50% !important;
}

.width-100 {
    width: 100% !important;
}

.font-weight-bold {
    font-weight: bold;
}

.panel, .panel-small, .card, .form-panel {
    background: #FFFFFF;
    box-shadow: 2px 2px 16px #000000;
    box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.08);
}

.second-level-panel {
    background: #F8F8FB;
    border-radius: 4px;
    padding: 6px;
}

.no-wrap-text-area {
    text-wrap: nowrap;
}

.card {
    border-radius: 4px;
}

.panel-small {
    border-radius: 4px;
    margin-bottom: 16px;
}

.panel {
    border-radius: 8px;
    margin-bottom: 32px;
    padding: 24px;
}

.form-panel {
    border-radius: 8px;
    margin-bottom: 32px;
    padding: 32px;
    padding-top: 24px;
    width: fit-content;
}

.main-title {
    font-size: 34px;
    line-height: 1.25;
    font-weight: 600;
    color: #222222;
    margin-bottom: 24px;
}

/* The heading of a product's tabs. It stays at the top while the page scrolls and, once the page
   has moved under it, shrinks into a bar in the page's own colour: the rows sliding beneath stay
   readable, and the name of the product is still there to be read. The negative margins are the
   wrapper's padding given back, so the bar reaches the edges rather than leaving two stripes of
   content beside it. */
.main-title.sticky-heading {
    position: sticky;
    top: 0;
    z-index: 6;
    width: fit-content;
    max-width: 100%;
    transition: font-size .15s ease, padding .15s ease;
}

.main-title.sticky-heading.shrink {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 8px;
    padding: 10px 24px;
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
    /* The bar is wider than its container on purpose, so the cap the heading wears while it is a
       heading has to come off, or the padding stays uncovered on the right. */
    max-width: none;
    background: #F9F9F9;
    border-bottom: 1px solid #E5E5E5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A table's own sticky header parks under the shrunk heading instead of behind it. The height is
   measured when the heading shrinks, because it depends on the font the reader ended up with. */
body.has-shrunk-heading .wide-table th,
body.has-shrunk-heading .orders-table th {
    top: var(--sticky-heading-height, 45px);
}

@media (max-width: 767px) {
    .main-title.sticky-heading.shrink {
        padding-left: 12px;
        padding-right: 12px;
        margin-left: -12px;
        margin-right: -12px;
        width: calc(100% + 24px);
    }
}

.secondary-title {
    font-size: 24px;
    line-height: 24px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 24px;
}

.tertiary-title {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    color: #222222;
    margin-bottom: 14px;
}

.search-form {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 40px;
}

.search-button {
    margin-left: 20px;
}

.search-field {
    height: 40px;
    width: 100%;
    border: 1px solid #D8D8D8;
    border-radius: 24px;
    padding: 10px 24px 10px 48px;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4D4D4D;
    background-color: transparent;
    background: url(../Images/magnifying-glass-ico.svg) no-repeat 15px center;
}

.search-field::placeholder {
    color: #AAAAAA;
}

a {
    text-decoration: none;
}

a.disabled {
    cursor: not-allowed;
}

a.disabled:hover {
    cursor: not-allowed;
}

a:hover {
    cursor: pointer;
    color: rgb(from currentColor calc(r * 0.7) calc(g * 0.7) calc(b * 0.7));
    text-decoration: none;
}

a, a:visited {
    color: #56549F;
}

a:disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

table th {
    text-align: start;
    font-weight: bold;
}

hr {
    height: 0;
    border: 0;
    border-top: 1px solid #000000;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.rounded-circle {
    border-radius: 50% !important;
}

.flex-basis-inherit {
    flex-basis: inherit;
}

b, strong {
    font-weight: bolder;
}

.display-none {
    display: none;
}

span.info-tooltip, span.warning-tooltip {
    display: inline-block;
    vertical-align: top;
    height: 20px;
    width: 20px;
}

a.info-icon-link {
    display: block;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    background: url("../Images/info-link-ico.svg");
}

span.text-tooltip.info-tooltip {
    background: url("../Images/help-info-ico.svg");
}

span.text-tooltip.warning-tooltip {
    background: url("../Images/help-warning-ico.svg");
}

.text-tooltip[data-tooltip-text] {
    display: inline-block;
    position: relative;
    cursor: help;
}

.text-tooltip[data-tooltip-text]:before {
    content: attr(data-tooltip-text);
    display: none;
    position: absolute;
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    width: max-content;
    min-width: 10px;
    /* As wide as the text needs up to 350px — and up to whatever room the window leaves when the
       element stands close to its edge, which is measured on hover, see setTooltipBounds. */
    max-width: var(--tooltip-max-width, 350px);
    border-radius: 4px;
    white-space: pre-wrap;
}

.text-tooltip[data-tooltip-position=right]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 100%;
    margin-left: 5px;
}

.text-tooltip[data-tooltip-position=left]:before {
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 100%;
    margin-right: 5px;
}

.text-tooltip[data-tooltip-position=top]:before {
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    /* Centred over the element, and slid back inside the window when the element stands close to
       its edge — the shift is measured on hover, see setTooltip. The arrow keeps pointing at the
       element, so the box may sit off to one side of it. */
    transform: translateX(calc(-50% + var(--tooltip-shift, 0px)));
    left: 50%;
    bottom: 100%;
    margin-bottom: 5px;
}

.text-tooltip[data-tooltip-text]:after {
    content: '';
    display: none;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.text-tooltip[data-tooltip-position=right]:after {
    top: 50%;
    transform: translateY(-50%);
    left: 100%;
    border-width: 6px 6px 6px 0;
}

.text-tooltip[data-tooltip-position=left]:after {
    top: 50%;
    transform: translateY(-50%);
    right: 100%;
    border-width: 6px 0 6px 6px;
}

.text-tooltip[data-tooltip-position=top]:after {
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    border-width: 6px 6px 0 6px;
}

a.text-tooltip {
    opacity: 1;
}

.text-tooltip[data-tooltip-text][data-tooltip-position=right]:after {
    border-right-color: #8A8A8A;
}

.text-tooltip[data-tooltip-text][data-tooltip-position=left]:after {
    border-left-color: #8A8A8A;
}

.text-tooltip[data-tooltip-text][data-tooltip-position=top]:after {
    border-top-color: #8A8A8A;
}

.text-tooltip[data-tooltip-text]:before {
    background: #8A8A8A;
}

/* The tooltip is drawn by the element that carries it and shows only while that element is
   hovered — so a button that fades on hover fades its own tooltip along with itself, and the text
   turns unreadable. A carrier keeps its colour and answers the pointer with the tooltip. */
.text-tooltip[data-tooltip-text]:hover {
    opacity: 1;
}

/* A tooltip turns the cursor into a question mark, which is right for a word that explains itself
   and wrong for something that is there to be clicked. */
a.text-tooltip[data-tooltip-text],
button.text-tooltip[data-tooltip-text],
.dropdown-button.text-tooltip[data-tooltip-text] {
    cursor: pointer;
}

.text-tooltip[data-tooltip-text]:hover:before,
.text-tooltip[data-tooltip-text]:hover:after {
    display: block;
    z-index: 9999;
}

/* How wide the box turned out is only known once it is laid out, and it has to be known before it
   is shown — a box laid out but kept invisible answers that, and the reader never sees this state
   because the class is taken off in the same script step it was put on. See setTooltipBounds. */
.text-tooltip[data-tooltip-text].tooltip-measured:before {
    display: block;
    visibility: hidden;
}

.warning-tooltip[data-tooltip-text][data-tooltip-position=right]:after {
    border-right-color: #FFC107;
}

.warning-tooltip[data-tooltip-text][data-tooltip-position=top]:after {
    border-top-color: #FFC107;
}

.warning-tooltip[data-tooltip-text][data-tooltip-position=left]:after {
    border-left-color: #FFC107;
}

.info-tooltip[data-tooltip-text][data-tooltip-position=right]:after {
    border-right-color: #8A8A8A;
}

.info-tooltip[data-tooltip-text][data-tooltip-position=top]:after {
    border-top-color: #8A8A8A;
}

.info-tooltip[data-tooltip-text][data-tooltip-position=left]:after {
    border-left-color: #8A8A8A;
}

.warning-tooltip[data-tooltip-text]:before {
    background: #FFC107;
}

.info-tooltip[data-tooltip-text]:before {
    background: #8A8A8A;
}

.separator {
    margin: 12px 0;
}

.tabs-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tabs-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    text-decoration: none;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    list-style: none;
}

.tabs-item-counter {
    background: transparent;
    border-radius: 19px;
    padding: 1px 8px 3px 8px;
    margin: 0 2px;
    background-color: #CFCFCF;
    font-size: 14px;
    font-weight: 500;
    color: #686868;
}

.tabs-link, .tabs-link:visited {
    display: block;
    background: transparent;
    border-radius: 24px;
    padding: 8px 16px 11px 16px;
    margin: 0 4px;
    color: #4D4D4D;
}

    .tabs-link.active {
        background: #56549F;
        color: white;
        font-weight: 600;
    }

.status-marker.pending {
    background-color: #AAAAAA;
}

.status-marker.inprogress {
    background-color: #E6E63C;
}

.status-marker.complete {
    background-color: #46AE63;
}

.status-marker.failed {
    background-color: #D45353;
}

.status-marker.creation {
    background-color: #0099FF;
}

.status-marker.canceled {
    background-color: #DD9B36;
}

.status-marker.suspicious {
    background-color: #D45353 !important;
}

.status-marker.manual-validated {
    background-color: #46AE63;
}

.status-marker.auto-validated {
    background-color: #DD9B36;
}

.status-marker.not-validated {
    background-color: #AAAAAA;
}

tr.manual-validated td {
    background-color: #E0F2F1;
}

tr.auto-validated td {
    background-color: #F9FBE7;
}

tr.default-validated td {
    background-color: #F5F5F5;
}

tr.gpt-validated td {
    background-color: #B8EAFF;
}

tr.copied td {
    background-color: #FFD34A;
}

tr.suspicious td {
    background-color: #ffe0e0;
}

/*
    A matched price or library card wears its status as a pale fill, the way a description does on
    its own page — one palette across the app for the same idea. The nested tables paint their own
    cells, so the fill has to be said again through the table it sits in to outweigh that. The
    suspicious price comes last: it keeps its confirmation but is out of pricing regardless, and
    that is what has to be seen.
*/
.secondary-table > tbody tr.manual-validated td {
    background-color: #E0F2F1;
}

.secondary-table > tbody tr.auto-validated td {
    background-color: #F9FBE7;
}

.secondary-table > tbody tr.not-validated td {
    background-color: #FFFFFF;
}

.secondary-table > tbody tr.suspicious td {
    background-color: #ffe0e0;
}

.status-marker.actual {
    background-color: #46AE63;
}

.status-marker.outdated {
    background-color: #D45353;
}

.status-marker.active {
    background-color: #46AE63;
}

.status-marker.blocked {
    background-color: #D45353;
}

.status-text.pending {
    color: #AAAAAA;
}

.status-text.inprogress {
    color: #E6E63C;
}

.status-text.complete {
    color: #46AE63;
}

.status-text.failed {
    color: #D45353;
}

.status-text.creation {
    background-color: #0099FF;
}

.status-text.canceled {
    color: #DD9B36;
}

.status-cell {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .status-cell .status-text {
        white-space: nowrap;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        margin-top: 12px;
        width: 100%;
    }

    .status-cell .status-text {
        background-color: transparent;
    }

.status-text.suspicious {
    color: #D45353;
}

.status-text.manual-validated {
    color: #46AE63;
}

.status-text.auto-validated {
    color: #DD9B36;
}

.status-text.not-validated {
    color: #AAAAAA;
}

.status-text.lower {
    color: #D45353;
}

.status-text.higher {
    color: #DD9B36;
}

.status-marker.lower {
    background-color: #D45353;
}

.status-marker.higher {
    background-color: #DD9B36;
}

.full-height-table {
    height: 100%;
}

    .full-height-table > tbody > tr {
        height: 100%;
    }

.min-width {
    width: 1%;
}

.text-align-left {
    text-align: left !important;
}

.auto-width {
    width: auto;
}

.alert-content {
    display: flex;
}

.modal-body .alert-content {
    background: #F8F8FB;
    margin-bottom: 20px;
}

.alert-marker {
    width: 4px;
    border-radius: 8px;
}

    .alert-marker.info {
        background-color: #AAAAAA;
    }

    .alert-marker.error {
        background-color: #D45353;
    }

    .alert-marker.warning {
        background-color: #DD9B36;
    }

.alert-icon {
    width: 32px;
    margin: 0 16px;
    min-height: 64px;
}

    .alert-icon.info {
        background: url("../Images/info-alert-ico.svg") no-repeat center;
    }

    .alert-icon.error {
        background: url("../Images/error-alert-ico.svg") no-repeat center;
    }

    .alert-icon.warning {
        background: url("../Images/warning-alert-ico.svg") no-repeat center;
    }

.alert-text-wrapper {
    display: flex;
    padding: 8px 8px 8px 0;
    width: calc(100% - 68px);
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-evenly;
}

.alert-header {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #222222;
}

    .alert-header:only-child {
        margin-bottom: 0;
    }

.alert-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4D4D4D;
}

.button {
    border-radius: 24px;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    padding: 8px 16px 11px 16px;
    border: 1px solid transparent;
    display: inline-block;
    background-color: buttonface;
    white-space: nowrap;
}

.button:disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}

.square-button.add-button {
    border-radius: 4px;
    width: 28px;
    height: 28px;
    border: 0;
    display: inline-block;
}

.square-button.add-button:disabled, .button.add-button:disabled {
    opacity: 0.6;
}

.square-button:hover, .square-button:active, .button:hover, .button:active {
    opacity: 0.6;
}

.button.submit-button {
    color: #FFFFFF;
    background: #56549F;
}

.button.info-button {
    color: #FFFFFF;
    background: #AAAAAA;
}

.button.main-button {
    color: #FFFFFF;
    background: #56549F;
}

.import-button {
    display: inline-block;
    padding: 10px 20px;
    font-family: inherit;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    border: 1px solid #56549F;
    border-radius: 24px;
    background: transparent;
    color: #56549F;
}

.add-button {
    background-color: #56549F;
    background-image: url("../Images/add-plus-white-ico.svg");
    background-position: center center;
    background-repeat: no-repeat;
}

.transparent-button {
    width: 28px;
    height: 28px;
    border: 0;
}

    .transparent-button.add-button {
        background-color: transparent;
        background-image: url("../Images/add-plus-grey-ico.svg");
    }

.clear-button {
    border: 0;
    height: 32px;
    width: 44px;
    background-color: #D45353;
    background-image: url("../Images/clear-trash-small-ico.svg");
    background-position: center center;
    background-repeat: no-repeat;
}

.delete-button {
    color: #FFFFFF;
    background: #D45353;
}

.button:hover {
    cursor: pointer;
}

.cancel-button {
    color: #4D4D4D;
    background: transparent;
}

.filter-button {
    padding-right: 36px;
    border: 1px solid #56549F;
}

.form-buttons {
    display: flex;
    justify-content: flex-end;
}

.filter-button.show {
    color: #56549F;
    background-color: transparent;
    background-image: url(../Images/filter-arrow-up-ico.svg);
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.filter-button:not(.show) {
    color: #FFFFFF;
    background-color: #56549F;
    background-image: url(../Images/filter-arrow-down-ico.svg);
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.toggle-row-info {
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    max-height: none;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.toggle-row-info-left {
    z-index: 2;
    position: absolute;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    right: 0;
}

    .toggle-row-info-left.show, .toggle-row-info.show {
        -ms-transform: translate(-50%, -50%) rotate(90deg);
        -moz-transform: translate(-50%, -50%) rotate(90deg);
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .toggle-row-info-left:hover, .toggle-row-info:hover {
        cursor: pointer;
        opacity: 0.8;
    }

.table {
    width: 100%;
}

    .table .status-marker {
        position: relative;
        width: 5px;
        padding: 0;
    }

        .table .status-marker::before {
            content: '\a0';
            max-width: 5px;
            visibility: hidden;
        }

    .table th, .table td {
        padding: 20px 12px;
    }

    .table tr.archived td {
        background-color: #ededed;
    }

    .table tr.archived + tr.model-details > td {
        background-color: #ededed;
    }

        .table tr.archived + tr.model-details > td th {
            background-color: #ededed;
        }

    .table tr.title-row > td {
        background-color: #ededed;
    }

.form-panel .table th, .form-panel .table td {
    padding: 8px 12px;
}

.table td {
    border-left: 0;
}

.break-anywhere {
    word-break: break-all;
}

/* Длинные неразрывные строки (имена файлов, URL) не должны распирать таблицу:
   перенос только при необходимости, min-content ячейки перестаёт быть шириной строки. */
.wrap-long-words {
    overflow-wrap: anywhere;
}

tr.collapsible-info td {
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .table th, .table td {
        padding: 16px 7px;
    }
}

.no-break {
    white-space: nowrap;
}

.table > tbody > tr {
    border-top: solid 3px #F9F9F9;
}

.form-panel .table > tbody > tr {
    border-top: solid 4px white;
}

.table th {
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: #4D4D4D;
    background: #F9F9F9;
}

.form-panel .table th {
    background: transparent;
}

.table td {
    vertical-align: top;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4D4D4D;
    background: white;
}

.form-panel .table td {
    background: #F9F9F9;
}

.form-panel .table {
    margin-bottom: 20px
}

.property-info-table {
    width: 100%;
    border-collapse: collapse;
}

.property-info-table__row:not(:last-child) td {
    border-bottom: 1px solid #E7E6E6;
}

.property-info-table__name, .property-info-table__value {
    padding: 10px 12px;
    font-size: 16px;
    line-height: 20px;
    vertical-align: top;
    word-break: break-word;
}

.property-info-table__name {
    width: 40%;
    font-weight: 600;
    color: #4D4D4D;
    background: #F9F9F9;
}

.property-info-table__value {
    font-weight: 400;
    color: #4D4D4D;
    background: white;
}

.property-info-table__row:first-child .property-info-table__name {
    border-radius: 4px 0 0 0;
}

.property-info-table__row:first-child .property-info-table__value {
    border-radius: 0 4px 0 0;
}

.property-info-table__row:last-child .property-info-table__name {
    border-radius: 0 0 0 4px;
}

.property-info-table__row:last-child .property-info-table__value {
    border-radius: 0 0 4px 0;
}

.table .highlight-row td {
    background: #F1F1F1 !important;
}

td.vertical-align-bottom {
    vertical-align: bottom;
}

.compact-table {
    width: 97vw;
    margin-left: calc((100vw - min(1440px, 97vw)) / (-2) + 17px);
}

.compact-table .compact-table {
    width: auto;
    margin-left: auto;
}

    .compact-table .status-marker {
        position: relative;
        width: 5px;
        padding: 0;
    }

        .compact-table .status-marker::before {
            content: '\a0';
            max-width: 5px;
            visibility: hidden;
        }

    .compact-table th, .compact-table td {
        padding: 2px 5px;
    }

    .compact-table tr.archived td {
        background-color: #ededed;
    }

    .compact-table tr.archived + tr.model-details > td {
        background-color: #ededed;
    }

        .compact-table tr.archived + tr.model-details > td th {
            background-color: #ededed;
        }

    .compact-table tr.title-row > td {
        background-color: #ededed;
    }

    .compact-table td {
        border-left: 0;
    }

    .compact-table > tbody > tr {
        border-top: solid 1px #BBB;
      /*  border: 1px solid black;*/
        border-collapse: collapse;
    }

    .compact-table th {
        font-weight: 600;
        font-size: 12px;
        line-height: 20px;
        color: #4D4D4D;
        background: #F9F9F9;
    }

    .compact-table td {
        vertical-align: middle;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        color: #4D4D4D;
        background: white;
    }

    .compact-table .highlight-row td {
        background: #F1F1F1 !important;
    }

    .compact-table .products_main-image .img-thumbnail {
        max-height: 50px !important;
        max-width: 50px !important;
    }

    .compact-table .toggle-cell {
        position: relative;
        width: 0;
        padding: 0;
    }

        .compact-table .toggle-cell + td:not(.status-marker), .compact-table .toggle-cell + th:not(.status-marker) {
            padding-left: 18px;
        }

        .compact-table .toggle-cell + td.checkbox-cell, .compact-table .toggle-cell + th.checkbox-cell {
            padding-left: 28px;
        }

    .compact-table td.row-user {
        vertical-align: middle;
    }

    .compact-table td.checkbox-cell {
        vertical-align: middle;
    }

    .compact-table .products__product-full-name {
        margin: 0px;
    }

    .compact-table .status-cell {
        display: table-cell;
    }



.icon-button {
    border: 0;
    padding: 0;
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: text-bottom;
}

    .icon-button.small-icon {
        width: 17px;
        height: 17px;
    }

    .icon-button:hover {
        opacity: 0.6;
    }

    .icon-button:disabled {
        opacity: 0.6;
    }

.edit-pencil {
    background: url("../Images/edit-pencil-ico.svg") no-repeat center;
}

.delete-trash {
    background: url("../Images/delete-trash-ico.svg") no-repeat center;
}

    .delete-trash.small-icon {
        background: url("../Images/delete-trash-small-ico.svg") no-repeat center;
    }

.reset-arrow {
    background: url("../Images/reset-arrow-ico.svg") no-repeat center;
}

.kebab-menu {
    background: url("../Images/kebab-menu-ico.svg") no-repeat center;
}

.previous-page {
    background: url("../Images/previous-page-ico.svg") no-repeat center;
}

.next-page {
    background: url("../Images/next-page-ico.svg") no-repeat center;
}

.settings-gear {
    background: url("../Images/settings-gear-ico.svg") no-repeat center;
}

.open-external-link {
    background: url("../Images/open-external-link-ico.svg") no-repeat center;
}

.download-button {
    border: 1px solid #56549F;
    background: url(../Images/download-ico.svg) no-repeat left;
    padding-left: 30px;
    background-position-x: 6px;
}

/* The button that adds a row stands in the row of table actions, between the column settings and
   the download, and matches the download beside it. */
.table-add-entity {
    display: flex;
    height: 41px;
    margin-left: 20px;
    align-items: center;
}

.oval-button.add-button {
    border: 0;
    height: 32px;
    width: 44px;
}

.apply-button {
    border: 0;
    height: 32px;
    width: 44px;
    background-color: #56549F;
    background-image: url("../Images/checkmark-ico.svg");
    background-position: center center;
    background-repeat: no-repeat;
}

    .apply-button:disabled {
        opacity: 0.6;
    }

.google-search-icon {
    background-image: url("../Images/google-search-icon.svg");
}

.yandex-search-icon {
    background-image: url("../Images/yandex-search-icon.svg");
}

.external-search-icon {
    border: 0;
    height: 14px;
    width: 14px;
    background-position: center center;
    background-repeat: no-repeat;
    display: inline-block;
    background-size: contain;
}

.external-search-icons-wrapper {
    white-space: nowrap;
    float: right;
}

tr .external-search-icons-wrapper {
    visibility: hidden;
}

tr:hover .external-search-icons-wrapper {
    visibility: visible;
}

.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9000;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.7);
}

.tiny-modal .modal-content {
    width: 488px;
}

.small-modal .modal-content {
    width: 684px;
}

.medium-modal .modal-content {
    width: 920px;
}

.large-modal .modal-content {
    width: 85%;
    max-width: 1300px;
}

.modal-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    margin: auto;
    padding: 0;
    width: 684px;
    border-radius: 4px;
    object-fit: contain;
    -webkit-animation-name: ModalAnimate;
    -webkit-animation-duration: 0.5s;
    animation-name: ModalAnimate;
    animation-duration: 0.5s
}

.modal-autoheight .modal-content {
    /*max-height: 90%;*/
    max-height: 90vh; /* ����������� vh, �� % */
    display: flex;
    flex-direction: column;
}

@-webkit-keyframes ModalAnimate {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 50%;
        opacity: 1
    }
}

@keyframes ModalAnimate {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 50%;
        opacity: 1
    }
}

.close {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #AAAAAA;
    float: right;
    font-size: 32px;
}

    .close:hover, .close:focus {
        color: #7D7D7D;
        text-decoration: none;
        cursor: pointer;
    }

.modal-header {
    height: 56px;
    padding: 24px 32px 8px 32px;
    color: white;
}

.modal-title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: #56549F;
}

.modal-secondary-title {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #4D4D4D;
}

.modal-body {
    padding: 24px 22px 24px 32px;
    margin-right: 10px;
    overflow: auto;
}

.modal-body::-webkit-scrollbar-track {
    background-color: #D8D8D8;
    border-radius: 8px;
}

.modal-body::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
    border-radius: 8px;
}

.modal-body::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #56549F;
}

.modal-explanation, .form-explanation {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4D4D4D;
    margin-bottom: 20px;
}

.modal-field-explanation, .form-field-explanation {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #4D4D4D;
    margin-bottom: 12px;
}

.modal-double-column .modal-field {
    margin-bottom: 0;
}

.modal-double-column:not(:last-child) {
    margin-bottom: 20px;
}

.modal-double-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 20px;
}

.modal-double-panel {
    display: flex;
}

.modal-left-panel {
    display: inline-block;
    width: calc((100% - 40px) / 2);
    margin-right: 40px;
}

.modal-right-panel {
    display: inline-block;
    width: calc((100% - 40px) / 2);
}

.modal-highlighted-panel, .form-highlighted-panel {
    background-color: #EEEEF5;
    border-radius: 4px;
    padding-right: -5px;
    box-shadow: 2px 2px 16px #000000;
    box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.12);
    padding: 2px 6px;
    margin-bottom: 17px;
}

    .form-highlighted-panel .panel-title {
        display: block;
        color: #4d4d4dc4;
        font-size: 14px;
        line-height: 18px;
        font-weight: 600;
        margin-bottom: 12px;
    }

    .form-highlighted-panel li {
        display: block;
        color: #4d4d4d;
        font-size: 13px;
        line-height: 18px;
        font-weight: 500;
    }

    .form-highlighted-panel ul {
        list-style-type: disc;
    }

    .modal-highlighted-panel .modal-field:last-child {
        margin-bottom: 4px;
    }

.empty-label-margin {
    margin-top: 31px;
}

.modal-checkbox-field, .form-checkbox-field {
    display: flex;
    color: #4D4D4D;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.modal-checkbox-field {
    margin-bottom: 12px;
}

.form-checkbox-field {
    margin-bottom: 6px;
}

.modal-checkbox-field input[type="checkbox"], .form-checkbox-field input[type="checkbox"] {
    margin-right: 4px;
}

.modal-footer {
    display: flex;
    border-radius: 0 0 4px 4px;
    height: 72px;
    padding: 16px 32px;
    background-color: #F9F9F9;
    color: white;
    justify-content: flex-end;
}

    .modal-footer .button:not(:last-child) {
        margin-right: 12px;
    }

.modal-label {
    display: block;
    color: #4D4D4D;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.modal-double-label {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

    .modal-double-label.buttons-label {
        height: 42px;
        align-items: center;
    }

.modal-input {
    border: 1px solid #D8D8D8;
    border-radius: 3px;
    height: 40px;
    width: 100%;
    padding: 0 5px;
    color: #4D4D4D;
    font-family: inherit;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

textarea.modal-input {
    height: auto;
    padding: 5px;
}

.modal-wrong-input-message {
    display: inline;
    color: #D45353;
    font-size: 12px;
    line-height: 16px;
}

.modal-field:not(:last-child) {
    margin-bottom: 20px;
}

.modal-field-button-row .modal-field {
    width: 100%;
    margin-bottom: 0;
}

.modal-field-button-row {
    display: flex;
    align-items: flex-end;
}

    .modal-field-button-row .button {
        margin-left: 20px;
    }

.modal-input:focus, .modal-input:active {
    box-shadow: 0 0 4pt 0.5pt #D3D3D3;
}

.modal-input:disabled, .modal-input:read-only:not(select) {
    background-color: #D8D8D8;
}

.modal-input-error, .modal-input-error:focus, .modal-input-error:active {
    box-shadow: 0 0 4pt 0.5pt #D45353;
}

.inline-block {
    display: inline-block;
}

div.badge-record {
    display: inline-block;
    border-radius: .75em;
    font-size: 12px;
}

    div.badge-record div {
        display: inline-block;
        float: left;
        text-transform: lowercase;
        color: #FFF;
        margin: 0;
        padding: 0;
        border: 0;
    }

        div.badge-record div:first-child, div.badge-record div:first-child span {
            border-top-left-radius: .25em;
            border-bottom-left-radius: .25em;
        }

        div.badge-record div:last-child, div.badge-record div:last-child span {
            border-top-right-radius: .25em;
            border-bottom-right-radius: .25em;
        }

        div.badge-record div span {
            display: inline-block;
            background: linear-gradient(180deg, rgba(187, 187, 187, .1) 0%, rgba(0, 0, 0, .1) 100%);
            padding: .25em .5em;
            box-sizing: border-box;
        }

.badge-record .name {
    background: #555;
}

.badge-record .status.gray {
    background: #bbb;
}

.product-no-photo {
    background: #D6D6D6;
}

.list-item-grid-inside-wrapper {
    background: #F8F8FB;
    border-radius: 4px;
    margin-bottom: 8px;
}

.list-item-grid-inside-header {
    display: grid;
    grid-template-columns: 1fr auto;
}

.list-item-grid-inside-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 12px;
    overflow: hidden;
    line-break: anywhere;
    white-space: normal;
    line-height: 20px;
    font-weight: 600;
}

.list-item-grid-inside {
    padding: 12px;
    display: grid;
    grid-column-gap: 32px;
}

.list-item-grid-inside-vendor {
    grid-template-columns: 100px 1fr;
}

.list-item-grid-inside-model, .list-item-grid-inside-price, .list-item-grid-inside-category {
    grid-template-columns: 100px 1fr;
}

.list-item-grid-inside-main-photo-wrapper {
    overflow: hidden;
    display: inline-flex;
    width: 100%;
    height: 100%;
    width: 100px;
    height: 100px;
    border: 1px solid #E7E6E6;
    border-radius: 4px;
    justify-content: space-evenly;
    align-items: center;
}

.list-item-grid-inside-main-photo {
    max-height: 100%;
    max-width: 100%;
}

.list-item-grid-inside-attributes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
}

.list-item-grid-inside-attributes-2cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
}

.list-item-grid-inside-attribute {
    display: grid;
    grid-template-columns: 130px 1fr;
    grid-column-gap: 10px;
    width: 100%;
}

.list-item-grid-inside-attribute-wide {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-column-gap: 10px;
    width: 100%;
}

.list-item-grid-inside-attribute:last-child .list-item-grid-inside-attribute-name {
    margin-bottom: 0;
}

.list-item-grid-inside-attribute-name {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.list-item-grid-inside-attribute:last-child .list-item-grid-inside-attribute-value {
    margin-bottom: 0;
}

.list-item-grid-inside-attribute-value {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .list-item-grid-inside-attribute-value:hover {
        overflow: visible;
    }

        .list-item-grid-inside-attribute-value:hover a, .list-item-grid-inside-attribute-value:hover span {
            position: absolute;
            background: #F8F8FB;
            border-radius: 2px;
        }

.list-item-grid-inside-wrapper .collapsible-row {
    display: grid;
    grid-template-columns: 0 1fr;
}

.panel .collapsible-row {
    display: grid;
    grid-template-columns: 0 1fr;
}

.toggler-wrapper {
    position: relative;
    padding: 0;
    width: 0;
}

.collapsed, .list-item-grid-inside-collapsed {
    display: none;
    padding: 12px;
}

.list-item-grid-inside-wrapper.manually-validated {
    border-left: 4px solid #090;
}

.list-item-grid-inside-wrapper.auto-validated {
    border-left: 4px solid #fa0;
}

.list-item-grid-inside-wrapper.not-validated {
    border-left: 4px solid #999;
}

.list-item-grid-inside-wrapper.suspicious {
    border-left: 4px solid #e00;
}

.list-item-grid-inside-actions {
    font-size: 15px;
    margin-bottom: 24px;
    margin-left: 132px;
}

    .list-item-grid-inside-actions a, .list-item-grid-inside-actions form {
        display: inline-block;
        margin-right: 20px;
    }

.webpay-modal__explanation-small {
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 16px;
}

.webpay-modal__explanation {
    margin-bottom: 16px;
}

.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:hover {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.btn-outline-success {
    color: #28a745;
    background-color: transparent;
    background-image: none;
    border-color: #28a745;
}

.btn-group-toggle {
    margin-bottom: 16px;
}

    .btn-group-toggle > .button, .btn-group-toggle > .btn-group > .button {
        margin-bottom: 0;
    }

        .btn-group-toggle > .button input[type=checkbox], .btn-group-toggle > .button input[type=radio], .btn-group-toggle > .btn-group > .button input[type=checkbox], .btn-group-toggle > .btn-group > .button input[type=radio] {
            position: absolute;
            clip: rect(0, 0, 0, 0);
            pointer-events: none;
        }

.dropdown-list {
    display: none;
    position: absolute;
    background-color: white;
    z-index: 111;
    padding: 10px 0;
    box-shadow: 4px 2px 24px #000000;
    box-shadow: 4px 2px 24px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}

.show {
    display: block;
}

.dropdown-item {
    display: block;
    padding: 6px 20px;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4D4D4D;
}

.dropdown-header {
    display: block;
    padding: 20px 20px 6px 20px;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #4D4D4D;
}

    .dropdown-header:first-child {
        padding-top: 6px;
    }

button.dropdown-item {
    width: 100%;
    background: transparent;
    border: 0;
    text-align: start;
    font-family: inherit;
}

a.dropdown-item, form.dropdown-item, button.dropdown-item {
    color: #4D4D4D;
}

.dropdown-item .submit-button {
    color: white;
}

.dropdown-button {
    cursor: pointer;
}

th .dropdown-button {
    vertical-align: middle;
}

.dropdown-content {
    position: relative;
    display: inline-block;
}

th.dropdown-content {
    display: inline-block;
    vertical-align: middle;
}

a.dropdown-item:hover, form.dropdown-item:hover, button.dropdown-item:hover {
    background-color: #E9E9F8;
    opacity: 1;
    cursor: pointer;
}

a.dropdown-item.disabled {
    cursor: initial;
    background-color: white;
    color: #AAAAAA;
}

span.dropdown-item.disabled {
    cursor: default;
    color: #AAAAAA;
}

.dropdown-list {
    text-align: start;
}

.dropdown-list .dropdown-item {
    display: block;
    white-space: nowrap;
}

td.actions-cell .dropdown-list a::after {
    content: none;
}

.dropdown-item.text-tooltip[data-tooltip-text] {
    display: block;
    cursor: default;
}

.dropdown-separator {
    height: 1px;
    background-color: #E9E9E9;
    margin: 6px 0;
}

.dropdown-list a.dropdown-item.delete-item,
.dropdown-list a.dropdown-item.destructive-item,
.dropdown-list .dropdown-item button.delete-item,
.dropdown-list .dropdown-item button.destructive-item {
    color: #D45353;
}

.copy-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #333333;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.copy-toast.show {
    opacity: 1;
}

form.dropdown-item button {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    font-family: inherit;
}

.table-info {
    height: 41px;
}

table + .empty-table-info {
    margin-bottom: 30px;
}

.details-cell table + .empty-table-info {
    margin-bottom: 0px;
}

.table-info + .table {
    margin-top: 10px;
}

.table + .table-info {
    margin-top: 10px;
    margin-bottom: 30px;
}

.table-info-actions {
    float: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: 5%;
}

.table-info-results {
    display: flex;
    float: right;
    height: 40px;
    align-items: center;
}

.table-results-count {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #AAAAAA;
}

.table-info-search {
    width: 40%;
    display: inline-block;
}

    .table-info-search .search-form {
        margin-bottom: 0;
    }

/* Filled like the search field of the site header, so it stands out of the panel behind it */
.table-info-search .search-field {
    background-color: #FFFFFF;
}

/* The flag of the search form takes the whole line under the field and the button, which makes
   the section taller than the single line the tables without a flag are laid out for */
.table-info.with-flag {
    height: auto;
}

    .table-info-search.with-flag .search-form {
        flex-wrap: wrap;
    }

    /* Without a width of its own the field shares the first line with the button instead of
       taking the whole one and pushing the button down */
    .table-info-search.with-flag .search-field {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
    }

.search-flag {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    margin-top: 12px;
    white-space: nowrap;
    cursor: pointer;
}

    .search-flag input {
        margin-right: 8px;
    }

.table-pager {
    display: flex;
    align-items: center;
}

.table-pager-button {
    border: 1px solid #D8D8D8;
    padding-right: 38px;
    margin: 0 8px;
    background: url(../Images/medium-info-arrow-down-ico.svg) no-repeat right 15px center;
}

.table + .table-info .table-pager-list {
    bottom: 100%;
}

.table-pager + .table-download {
    margin-left: 34px;
}

.table-download {
    display: flex;
    height: 41px;
    align-items: center;
    margin-left: 20px;
}

/* An action and the menu of its variants as one control: the left half does the thing, the right
   half — behind the divider — offers the other ways of doing it. The divider is what says the two
   halves click differently.

   Markup:
       <div class="split-button">
           <a class="button …">Действие</a>
           <div class="dropdown-content split-button-menu">
               <span class="icon-button kebab-menu dropdown-button"></span>
               <div class="dropdown-list expand-left">…</div>
           </div>
       </div>

   Each half keeps the look it has elsewhere — the button its own fill or outline — and only the
   rounding is split between them, so the pair sits in a flex row and in a form alike without
   changing how the button itself is laid out. */
.split-button {
    display: inline-flex;
    align-items: stretch;
    line-height: 0;
}

.split-button > .button {
    border-radius: 24px 0 0 24px;
    border-right: 0;
}

.split-button > .split-button-menu {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #56549F;
    border-radius: 0 24px 24px 0;
    cursor: pointer;
}

/* Beside a filled button the menu is filled too — one solid pill — and the divider and the kebab
   turn light so they read on it. */
.split-button > .submit-button + .split-button-menu {
    background: #56549F;
    border-left-color: rgba(255, 255, 255, 0.4);
}

    .split-button > .submit-button + .split-button-menu .kebab-menu {
        background-image: url("../Images/kebab-menu-white-ico.svg");
    }

.split-button > .button,
.split-button > .split-button-menu,
.split-button .kebab-menu {
    cursor: pointer;
}

/* Under the pointer a half fades like any other button of the app — but by colour rather than by
   opacity: opacity on the half would fade the tooltip it draws and the menu it holds open with
   it. #9A98C5 is the button's own #56549F at the same 0.6 over the page, so the two look alike. */
.split-button > .split-button-menu:hover {
    border-color: #9A98C5;
}

    /* The icon dims like any icon button — unless the tooltip hangs on the icon itself, in which
       case dimming it would dim the words too, and the half already answers by its colour. */
    .split-button > .split-button-menu:hover .kebab-menu:not(.text-tooltip) {
        opacity: 0.6;
    }

.split-button > .submit-button + .split-button-menu:hover {
    background-color: #9A98C5;
    border-color: #9A98C5;
}

/* The buttons themselves fade the same way, and for the same reason — each carries a tooltip.
   With a kebab beside them or without one, they answer the pointer alike. */
.submit-button.create-button:hover {
    background-color: #9A98C5;
}

.download-button:hover {
    border-color: #9A98C5;
    color: #9A98C5;
}

/* Centring the kebab makes the menu a centred flex child too, and it would open across the button
   it belongs to. It hangs under the button like every other kebab menu — and over it where the
   pager above the same table opens upward, at the foot of a table. */
.split-button-menu > .dropdown-list {
    top: 100%;
}

.table + .table-info .split-button-menu > .dropdown-list {
    top: auto;
    bottom: 100%;
}

.split-button .kebab-menu {
    vertical-align: middle;
}

.download-format-menu .dropdown-list {
    min-width: 140px;
}

/* Which format the file will come in, said on the button rather than only behind the kebab. In
   the button's own colour, lighter and smaller than its word, so it reads as an aside and not as
   a second label. Its own line is shorter than the button's, so the smaller letters cannot make
   the line taller and the button keeps the height it has beside the other table actions. */
.download-format-caption {
    margin-left: 6px;
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    opacity: 0.65;
}

/* Mutually exclusive choices as one pill: the chosen half is filled, the other reads as a link.
   The language switch in the profile menu and the download format of a table are the same choice
   made the same way. */
.segmented-switch {
    display: flex;
    justify-content: center;
    border: 1px solid #D8D8D8;
    border-radius: 12px;
}

.segmented-switch-item {
    flex: 1;
    padding: 0 12px;
    text-align: center;
    white-space: nowrap;
}

    .segmented-switch-item.active {
        border-radius: 12px;
        background: #56549F;
        color: white;
    }

    .segmented-switch-item:not(.active):hover {
        color: #56549F;
    }

.table-settings {
    display: flex;
    height: 41px;
    margin-left: 34px;
    align-items: center;
}

.table-pager-list {
    margin-left: 14px;
}

.dropdown-list.expand-left {
    transform: translateX(-100%);
    left: 100%;
}

.title-menu .dropdown-list.expand-left {
    left: 50%;
    top: 50%;
}

.table-settings-item {
    white-space: nowrap;
}

.table-settings-checkbox {
    vertical-align: middle;
    margin-right: 2px;
}

.table-settings-buttons {
    text-align: center;
}

.table-pager-go-to-page-wrapper {
    display: flex;
    border: 1px solid #D8D8D8;
    border-radius: 18px;
}

.go-to-page-button {
    height: 32px;
    width: 44px;
    background: url(../Images/go-to-page-ico.svg) no-repeat center, #56549F;
}

.go-to-page-field {
    background-color: transparent;
    width: 70px;
    height: 32px;
    padding-left: 8px;
    border: 0;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}

.autocomplete-suggestions {
    overflow: auto;
    background-color: white;
    padding: 10px 0;
    box-shadow: 4px 2px 24px #000000;
    box-shadow: 4px 2px 24px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    border: 0;
}

.autocomplete-suggestion {
    cursor: pointer;
    overflow: hidden;
    padding: 6px 20px;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4D4D4D;
}

.sortable-column {
    padding-right: 20px;
    background: url(../Images/sortable-item-ico.svg) no-repeat right center;
}

    .sortable-column.asc-sort {
        padding-right: 20px;
        background: url(../Images/asc-sort-ico.svg) no-repeat right center;
    }

    .sortable-column.desc-sort {
        padding-right: 20px;
        background: url(../Images/desc-sort-ico.svg) no-repeat right center;
    }

.similars-modal .similars-content {
    display: grid;
    grid-column-gap: 24px;
    grid-template-columns: 2fr 1px 3fr;
}

.similars-modal .separator {
    height: 100%;
    width: 1px;
    background-color: #E7E6E6;
}

.similars-modal .similars-wrapper {
    height: 392px;
}

.similars-modal .no-similars-content {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.similars-modal .no-similars-placeholder {
    width: 80%;
    text-align: center;
}

.similars-modal .no-similars-image {
    margin-bottom: 24px;
}

.similars-modal .no-similars-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: #AAAAAA;
}

.similars-modal .similars-list {
    padding-bottom: 24px;
}

.similars-modal .similars-item {
    background: #F8F8FB;
    border-radius: 4px;
    padding: 20px 24px 24px 24px;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4D4D4D;
}

.similars-modal .actions-similars-item {
    display: grid;
    grid-template-columns: 1fr 65px;
    grid-column-gap: 20px;
    align-items: center;
}

.similars-buttons {
    display: flex;
}

.similars-modal .similars-item:not(:last-child) {
    margin-bottom: 8px;
}

.similars-modal .similars-content .paste-panel.paste-target {
    min-width: 0;
}

.similars-modal .similars-content .paste-target_description {
    width: 90%;
}

/*
    The path is laid out as a row that wraps rather than a line clipped at its end: clipping cut
    the last name mid-word, and — being `overflow: hidden` — it would have swallowed the tooltip
    that says what was cut. Wrapping cannot overflow the page sideways, so no scrollbar comes of a
    path too long for one line.
*/
.path-breadcrumbs-wrapper {
    margin-bottom: 24px;
    min-width: 0;
}

.path-breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
    A crumb is coloured by whether it leads anywhere, not by where it sits: the last one is usually
    the page and grey, but a level with no page of its own — a section of a hub, say — is just as
    unclickable in the middle of the path.
*/
.path-breadcrumbs-item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
    line-height: 20px;
    color: #AAAAAA;
}

/* The name of a crumb, cut with an ellipsis when the line has no room for all of it. */
.path-breadcrumbs-text {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A crumb that was cut carries the whole name as a tooltip. The class brings `display:
   inline-block` with it, which would take the arrow off the crumb's line. */
.path-breadcrumbs-item.text-tooltip[data-tooltip-text] {
    display: inline-flex;
    cursor: inherit;
}

    .path-breadcrumbs-item a {
        color: #56549F;
    }

    .path-breadcrumbs-item:not(:last-child)::after {
        display: inline-block;
        content: ' ';
        background: url(../Images/sign-next-ico.svg) no-repeat 50% bottom;
        height: 12px;
        width: 18px;
        /* The arrow keeps its width whatever the name beside it does: it is the name that gives
           way when the line is short, not the sign between two of them. */
        flex: 0 0 auto;
    }

/*
    One line under the path for what the page itself offers: whatever picks the view on the left,
    the page's own actions on the right. Both halves are optional — actions alone still sit right.
*/
/* Buttons leading off the page, held to its right edge above the content they step aside from. */
.link-buttons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.page-toolbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-left: auto;
}

.button span.text-tooltip.info-tooltip {
    margin-bottom: 0;
}

.w-55 {
    width: 55%;
}

.mb-6 {
    margin-bottom: 24px;
}

.mb-4 {
    margin-bottom: 24px;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-3 {
    margin-bottom: 12px !important;
}

.mb-1 {
    margin-bottom: 6px !important;
}

.mb-2 {
    margin-bottom: 8px !important;
}

.mt-4 {
    margin-top: 24px;
}

.mt-3 {
    margin-top: 12px !important;
}

.mt-1 {
    margin-top: 6px !important;
}

.ml-1 {
    margin-left: 6px !important;
}

.ml-3 {
    margin-left: 12px !important;
}

.mr-1 {
    margin-right: 6px;
}

.mr-3 {
    margin-right: 12px !important;
}

.mr-4 {
    margin-right: 24px !important;
}

.analytics-filter-date-parameters {
    display: grid;
    grid-template-columns: repeat(1, 3fr 1fr);
    grid-column-gap: 40px;
}

.analytics-filter-main-parameters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 40px;
}

.models-filter-main-parameters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 40px;
}

.properties-filter-main-parameters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-row-gap: 20px;
}

.properties-filter-category {
    grid-column: 1 / span 2;
}

.properties-filter-flags {
    grid-column: 4;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.models-filter-properties {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 40px;
}

.property-condition-input {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 40px;
}

.form-input[type="datetime-local"] {
    min-width: 160px;
}

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.d-flex.justify-content-end {
    justify-content: flex-end;
}

.d-flex.justify-content-center {
    justify-content: center;
}

.d-flex.justify-content-space-between {
    justify-content: space-between;
}

.d-flex.align-items-center {
    align-items: center;
}

.d-flex.align-items-flex-end {
    align-items: flex-end;
}

.d-inline-block {
    display: inline-block !important;
}

.double-form-input {
    display: grid;
    grid-template-columns: repeat(2, 4fr);
    grid-column-gap: 20px;
}

.form-label {
    display: block;
    color: #4D4D4D;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.form-label-inline {
    display: inline-block;
    color: #4D4D4D;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.form-input {
    border: 1px solid #D8D8D8;
    border-radius: 3px;
    width: 100%;
    height: 40px;
    padding: 0 5px;
    color: #4D4D4D;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

    .form-input.small-input {
        height: 32px;
    }

.form-panel .table .form-input {
    background: white;
}

.form-panel .table .multiselect.custom-select {
    background-color: white;
}

.form-text {
    font-family: inherit;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

.matching-search-field {
    height: 40px;
    width: 100%;
    border: 1px solid #D8D8D8;
    border-radius: 3px;
    padding: 5px 14px 5px 38px;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4D4D4D;
    background-color: transparent;
    background: url(../Images/magnifying-glass-ico.svg) no-repeat 5px center;
}

.form-double-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 32px;
}

.grid-2, .grid-3, grid-4, grid-5, grid-6 {
    grid-column-gap: 16px;
    grid-row-gap: 8px;
    display: grid;
}

.grid-2 {
    grid-template-columns: 1fr 1fr;
}

.grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.grid-6 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.form-tag-params-grid {
    display: grid;
    grid-template-columns: 1fr 3fr 30px;
    grid-column-gap: 20px;
}

    .form-tag-params-grid > .form-field {
        min-width: 0;
    }

.form-double-delete-column {
    display: grid;
    grid-template-columns: 1fr 1fr 20px;
    grid-column-gap: 32px;
}

.multiselect-native-select .custom-select {
    display: inline-block;
    width: 100%;
    height: 40px;
    padding: 0 5px;
    font-family: inherit;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: #4D4D4D;
    vertical-align: middle;
    background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    background-size: 8px 10px;
    border: 1px solid #D8D8D8;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    .multiselect-native-select .custom-select:disabled {
        background-color: #D8D8D8;
    }

.models-filter .no-value-wrapper {
    display: flex;
    align-items: center;
}

    .models-filter .no-value-wrapper input[type=checkbox] {
        margin-top: 4px;
        margin-right: 6px;
    }

    .models-filter .no-value-wrapper label {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #4D4D4D;
    }

.multiselect-option.dropdown-item {
    background: transparent;
    border: 0;
    font-family: inherit;
}

    .multiselect-option.dropdown-item .form-check-input {
        vertical-align: middle;
        margin-right: 4px;
    }

.multiselect-search-container.dropdown-item {
    margin-left: 0;
}

.multiselect-search {
    font-family: inherit;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    border: 0;
    border-bottom: 1px solid #AAAAAA;
    width: calc(100% - 30px);
    background: url(../Images/magnifying-glass-ico.svg) no-repeat 0 center;
    padding: 4px 0 4px 28px;
}

.properties-filter-button {
    margin-bottom: 20px;
}

.filter-badge-container.has-content:not(.d-none) {
    margin-bottom: 12px;
}

.filter-badge-container .badge {
    display: inline-block;
    background: #F8F8FB;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 8px 20px;
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #4D4D4D;
}

    .filter-badge-container .badge:not(:last-child) {
        margin-right: 8px;
    }

.form-wrong-input-message {
    color: #D45353;
    font-size: 12px;
    line-height: 16px;
}

.form-field {
    margin-bottom: 20px;
}

/* Field and its action button on one line: the field takes the free space, so the
   button ends up against the right edge of the form, level with the input. */
.form-field-button-row {
    display: flex;
    align-items: flex-end;
    margin-bottom: 20px;
}

    .form-field-button-row .form-field {
        width: 100%;
        margin-bottom: 0;
    }

    .form-field-button-row .button {
        margin-left: 20px;
    }

td .form-field:last-child {
    margin-bottom: 0px;
}

.form-input:disabled, .form-input:read-only:not(select) {
    background-color: #D8D8D8 !important;
}

.form-input:focus, .form-input:active, .matching-search-field:focus, .matching-search-field:active {
    box-shadow: 0 0 4pt 0.5pt #D3D3D3;
}

.form-input-warning, .form-input-warning:focus, .form-input-warning:active {
    box-shadow: 0 0 4pt 0.5pt #FFC107;
}

.form-input-error, .form-input-error:focus, .form-input-error:active {
    box-shadow: 0 0 4pt 0.5pt #D45353;
}

.multiselect-native-select .custom-select {
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.table .toggle-cell {
    position: relative;
    width: 0;
    padding: 0;
}

    .table .toggle-cell + td:not(.status-marker), .table .toggle-cell + th:not(.status-marker) {
        padding-left: 18px;
    }

    .table .toggle-cell + td.checkbox-cell, .table .toggle-cell + th.checkbox-cell {
        padding-left: 28px;
    }

.float-right {
    float: right;
}

.table .row-main-image {
    width: 200px;
    max-width: 200px;
}

    .table .row-main-image .img-thumbnail {
        max-width: 100%;
        cursor: pointer;
    }

/* The help of a page is a word among the path and the page's own buttons, and it lost every one of
   those staring contests. It reads as a small pill with the same icon the header carries, so the
   eye finds it in the same place on every page without it shouting over the work. */
/*
    A link that is only a link — the weight the wiki link used to have before it became a pill.
    Kept apart from it on purpose: the pill with the ⓘ means "the help about this page", and a link
    that leads somewhere else must not borrow that promise.
*/
.text-link {
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}

.wiki-link {
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    border: 1px solid #C9C8E4;
    border-radius: 24px;
    background: #F1F0F9;
    color: #56549F;
    white-space: nowrap;
}

    .wiki-link::before {
        content: "";
        width: 18px;
        height: 18px;
        background: url("../Images/help-info-ico.svg") no-repeat center;
        background-size: contain;
    }

    .wiki-link:hover {
        border-color: #56549F;
    }

.form-buttons-history {
    margin-right: auto;
    display: inline-block;
    padding: 9px 0 12px 0;
    line-height: 20px;
}

.wiki-header {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.dropdown-tabs .dropdown-item, .templates-switcher .dropdown-item, .delete-switcher .dropdown-item {
    white-space: nowrap;
}

.templates-switcher-button, .delete-switcher-button, .dropdown-tabs-button {
    display: block;
    padding: 10px 40px 10px 20px;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    border: 1px solid #D8D8D8;
    border-radius: 24px;
    background: url(../Images/small-info-arrow-down-ico.svg) no-repeat right 22px top 18px;
}

a.button.dropdown-button {
    padding: 8px 33px 11px 16px;
    background-image: url(../Images/dropdown-link-arrow-down-ico.svg);
    background-repeat: no-repeat;
    background-position: right 15px top 17px;
}

a.button.text-danger.dropdown-button {
    background-image: url(../Images/small-danger-arrow-down-ico.svg);
}

.delete-switcher-button {
    font-weight: 600;
    color: #dc3545;
    border: 1px solid #dc3545;
    background: url(../Images/small-danger-arrow-down-ico.svg) no-repeat right 22px top 18px;
}

.dropdown-tabs {
    margin-bottom: 24px;
}

.flat-form, .flat-page-explanation {
    width: 612px;
}

/* A panel holding a table wide enough to want the page rather than the column of fields a form
   panel is normally sized to. The panel is fit-content by default, so it is the one to widen; the
   plain fields above the table keep their own width instead of stretching along with it. */
.form-panel.wide-panel {
    width: auto;
}

    .form-panel.wide-panel .flat-form {
        width: 100%;
    }

    .form-panel.wide-panel .flat-form > .form-field {
        width: 612px;
        max-width: 100%;
    }

.form-add-entity-wrapper {
    margin-bottom: 20px;
}

.form-field-buttons {
    display: flex;
    align-items: center;
}

    .form-field-buttons .icon-button {
        margin-top: 6px;
    }

.form-double-label {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 42px;
}

textarea.form-input {
    height: auto;
    padding: 5px;
}

.form-alert {
    margin-bottom: 20px;
}

    .form-alert .alert-content {
        background: #F8F8FB;
    }

.title-menu {
    float: right;
    width: 40px;
    height: 40px;
    margin-top: 5px;
    border-radius: 24px;
    border: 1px solid #D8D8D8;
    padding-right: 38px;
    background: url(../Images/kebab-menu-ico.svg) center;
    background-repeat: no-repeat;
}

.secondary-table > tbody td {
    background: #F8F8FB;
}

.autocomplete-image {
    margin-right: 6px;
}

textarea.dark-textarea {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.fullscreen-loading-spinner-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9010;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.row-loading-spinner-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.header-loading-spinner-wrapper {
    padding: 0 !important;
}

.loading-spinner-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
}

.loading-spinner-circle:after {
    content: " ";
    display: block;
    width: 54px;
    height: 54px;
    margin: 0;
    border-radius: 50%;
    border: 6px solid white;
    border-color: white transparent white transparent;
    animation: catalogAppExtensionAnimateLoadingSpinner 1.2s linear infinite;
}

.table td.row-user {
    vertical-align: middle;
}

.table td.checkbox-cell {
    vertical-align: middle;
}

.batch-operations-wrapper {
    position: fixed !important;
    z-index: 3;
    bottom: 48px;
    left: calc(50% - min(100%, 1440px)/2 + 24px);
    background-color: #56549F;
    border-radius: 48px;
}

.batch-operations-wrapper .dropdown-list.two-columns {
    column-count: 2;
}

.batch-operations-wrapper .dropdown-list.three-columns {
    column-count: 3;
}

.batch-operations-wrapper .dropdown-list {
    overflow: auto;
    bottom: 100%;
}

.batch-operations-wrapper .dropdown-item {
    white-space: nowrap;
}

.batch-operations:hover {
    opacity: 0.7;
}

.batch-operations {
    border: 0;
    width: 48px;
    height: 48px;
    background-color: #56549F;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 48px;
    box-shadow: 0 6px 40px #56549F;
    color: #fff;
}

.batch-operations-wrapper .loading-spinner-wrapper.batch-operations-spinner {
    width: 48px;
    height: 48px;
    border-radius: 48px;
    background-color: #56549F;
}

.batch-operations-wrapper .loading-spinner-circle {
    width: 28px;
    height: 28px;
}

.batch-operations-wrapper .loading-spinner-circle:after {
    width: 28px;
    height: 28px;
    border-width: 3.5px;
}

.batch-operations-wrapper.loading-active .dropdown-button,
.batch-operations-wrapper.loading-active .dropdown-list {
    display: none !important;
}

.batch-operations-wrapper.loading-active .batch-operations-spinner {
    display: flex !important;
}

.table .checkbox-cell {
    display: none;
}

.table .checkbox-cell + td {
    padding-left: 18px;
}

.table.has-selected .checkbox-cell, .table.selectable-rows .checkbox-cell {
    display: table-cell;
}

.table.has-selected .checkbox-cell + td, .table.selectable-rows .checkbox-cell + td {
    padding-left: 12px;
}

button.select-all-dropdown {
    width: 13px;
    height: 13px;
    margin: 0;
    padding: 0;
}

.dropdown-list .dropdown-item {
    white-space: nowrap;
}

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

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

.paste-target {
    border: 1px dashed #AAAAAA;
    min-height: 200px;
    margin-bottom: 10px;
}

.paste-target_description {
    margin: 50px auto;
    text-align: center;
    width: 60%;
}

.modal .paste-target_description {
    margin: 30px auto;
}

.paste-target_description .paste-target_main {
    font-size: 20px;
    margin-bottom: 10px;
}

.paste-target_description .paste-target_explanation {
    font-size: 15px;
}

.choose-file-icon {
    content: url(../Images/add-a-file.png);
    cursor: pointer;
}

.choose-file-wrapper {
    cursor: pointer;
    font-weight: 700;
}

.xml-file {
    content: url(../Images/xml-file-icon.png);
    max-width: 50px;
}

.xlsx-file {
    content: url(../Images/xlsx-file-icon.png);
    max-width: 50px;
}

.generic-file {
    content: url(../Images/generic-file-icon.png);
    max-width: 50px;
}

.preview-image-wrapper {
    display: inline-block;
    padding: 0.5rem;
    margin: 0.5rem;
    border: 1px solid #dee2e6;
    background: #E0F2F1;
    position: relative;
}

.remove-cross-button {
    background-color: transparent;
    border: transparent;
    color: #AAAAAA;
    float: right;
    font-size: 32px;
    cursor: pointer;
}

.progress {
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    margin-bottom: 10px;
    display: flex;
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #007bff;
    transition: width .6s ease;
}

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.progress-bar-animated {
    -webkit-animation: progress-bar-stripes 1s linear infinite;
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0;
    }

    to {
        background-position: 0 0;
    }
}

.bg-success {
    background-color: #28a745 !important;
}

.bg-danger {
    background-color: #dc3545 !important
}

.text-danger {
    color: #dc3545 !important
}

.text-muted {
    color: #aaaaaa !important
}

.create-categories-alert-panel {
    margin-bottom: 20px;
}

.control-buttons-group {
    display: flex;
    justify-content: space-between;
}

.cards-grid__list {
    display: grid;
    grid-column-gap: 24px;
    grid-row-gap: 32px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    margin-bottom: 48px;
}

.cards-grid__list-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards-grid__list-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.analytics-cards-grid__list {
    display: grid;
    grid-column-gap: 24px;
    grid-row-gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    margin-bottom: 12px;
}

.analytics-cards-grid__list-small-column-gap {
    grid-column-gap: 5px;
}

.analytics-cards-grid__list-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.analytics-cards-grid__list-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.analytics-cards-grid__item {
    display: flex;
    flex-direction: column;
}

.analytics-cards-grid__item-main-section {
    padding: 0 24px 18px 24px;
    min-height: 48px;
}

.analytics-cards-grid__item-header-section {
    align-self: flex-start;
    display: flex;
    padding: 24px 24px 12px 24px;
    width: 100%;
}

.analytics-cards-grid__item-name, .aggregated-unallocated-transactions-card__header-name {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    color: #222;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-cards-section-label, .aggregated-unallocated-transactions-label {
    margin-top: 36px;
    margin-bottom: 12px;
    padding-bottom: 4px;
    font-weight: 600;
    font-size: 24px;
    line-height: 24px;
    color: #222;
}

.analytics-cards-grid__item-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    color: #222222;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-cards-grid__item-label {
    width: 70%;
}

.analytics-cards-grid__item-value {
}

.analytics-cards-grid__item-percent-down {
    color: #ff0000;
}

.analytics-cards-grid__item-percent-up {
    color: #0b0;
}

.cards-grid__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cards-grid__item-main-section {
    padding: 24px;
    min-height: 160px;
}

.cards-grid__item-name {
    margin-bottom: 12px;
    padding-bottom: 4px;
    font-weight: 600;
    font-size: 24px;
    line-height: 24px;
    color: #222222;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.cards-grid__item-footer-section {
    align-self: flex-end;
    display: flex;
    height: 48px;
    width: 100%;
}

.cards-grid__item-text-link {
    display: flex;
    align-items: center;
    width: 70%;
    padding-left: 24px;
    border-top: 1px solid #E7E6E6;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
}

.cards-grid__item-description {
    font-size: 16px;
    line-height: 20px;
    color: #4D4D4D;
}

.cards-grid__item-right-arrow {
    width: 24px;
    height: 24px;
}

.cards-grid__item-button-link {
    display: flex;
    width: 30%;
    background-color: #56549F;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 4px;
}

.set-price {
    font-size: 13px;
    line-height: 23px;
}

.secondary-panel {
    background-color: #F8F8FB;
    border-radius: 6px;
    padding: 4px 6px;
}

.secondary-panel-title {
    font-size: 17px;
    line-height: 22px;
    font-weight: 600;
    color: #4D4D4D;
    margin-bottom: 14px;
}

.v-align-middle {
    vertical-align: middle !important;
}

td.min-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    td.min-padding:first-of-type {
        padding-left: 12px !important;
        padding-right: 0 !important;
    }

    td.min-padding:last-of-type {
        padding-left: 0 !important;
        padding-right: 12px !important;
    }

.analytics-chart-content {
    /*margin-top: 20px;*/
}

.analytics-chart-wrapper {
    padding: 4px 16px 16px 16px;
}

.analytics-notifications-wrapper {
    color: #4D4D4D;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    margin-top: 16px;
}

.analytics-chart-no-data {
    background-color: #ededed;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
}

.analytics-total-column {
    display: grid;
    grid-template-columns: 1fr fit-content(500px) fit-content(500px);
    grid-column-gap: 8px;
    align-content: flex-start;
}

.analytics-collapsible {
    display: none;
}

.analytics-value {
    text-align: right;
    font-weight: bold;
}

.link-label {
    color: #FFFFFF;
}

.graph-dependencies {
}

.graph-dependencies-active {
    background: #56549F;
    color: white;
    font-weight: 600;
}

.analytics-label {
    display: inline-block;
    color: #4D4D4D;
    font-size: 16px;
    line-height: 20px;
}

.analytics-label-dropdown {
    cursor: pointer;
    background: url(../Images/catalog-arrow-down-ico.svg) no-repeat left;
}

.modifications-products-tabs .dropdown-tabs-button {
    border: 1px solid #D8D8D8;
    border-radius: 20px;
    width: fit-content;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    padding: 8px 30px 8px 10px;
    background: url(../Images/small-info-arrow-down-ico.svg) no-repeat right 12px top 14px;
}

.modifications-products-tabs.dropdown-tabs {
    width: fit-content;
    margin-bottom: 0;
}

.modifications-products-tabs .dropdown-list {
    max-width: 500px;
    width: max-content;
}

.modifications-products-tabs .dropdown-item {
    display: flex;
    padding: 8px 20px;
    max-width: inherit;
    white-space: normal;
}

.modifications-product-image img {
    padding-right: 8px;
}

.modifications-product-image, .modifications-product-image img {
    max-width: 51px;
    max-height: 43px;
}

.product-modification-values {
    display: flex;
    flex-wrap: wrap;
}

.product-modification-value {
    font-size: 12px;
    line-height: 15px;
    font-weight: 400;
    padding: 2px 8px;
    border-radius: 12px;
    background: #56549f;
    color: white;
    margin-right: 6px;
    margin-top: 4px;
}

.modification-properties-wrapper .multiselect-container.dropdown-list {
    position: fixed;
    min-width: 280px !important;
}

.modification-properties-wrapper .multiselect-native-select {
    width: 100%;
}

.modification-property-row {
    display: flex;
    align-items: center;
}

    .modification-property-row:not(:last-child) {
        margin-bottom: 20px;
    }

    .modification-property-row .delete-trash {
        width: 40px;
    }

.collapsible-info {
    display: none;
}

td.actions-cell a::after {
    content: "\a";
    white-space: pre;
}

.automatic-actions-group > a {
    text-align: left;
    white-space: normal !important;
}

.automatic-actions-group {
    width: 100%;
    align-items: center;
}

    .automatic-actions-group .dropdown-content {
        margin-left: auto;
    }

.task-actions-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
    width: 100%;
}

    .task-actions-group.combined {
        display: inline-grid;
        grid-template-columns: auto 24px;
    }

    .task-actions-group .automatic-actions-group {
        width: auto;
    }

    .task-actions-group.combined .automatic-actions-group {
        width: 24px;
    }

    .task-actions-group .automatic-actions-group .dropdown-content {
        margin-left: 0;
    }

.high-separator {
    height: 48px;
}

.grid-4c {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 40px;
}

.left-right-columns-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.text-right {
    text-align: right;
}

.actions-cell {
    text-align: right;
    width: 1%;
}

    .actions-cell a {
        display: inline-block;
        white-space: nowrap;
    }

    .actions-cell button + a {
        margin-top: 12px;
    }

.modal-body a.file-example {
    display: inline-block;
    margin-bottom: 24px;
}

.unordered-bullets-list .bullet-item {
    background: url(../Images/list-bullet.svg) no-repeat left top 8px;
    padding-left: 14px;
    font-size: 16px;
    line-height: 20px;
    color: #4D4D4D;
}

    .unordered-bullets-list .bullet-item:not(:last-child) {
        margin-bottom: 4px;
    }

.photos-carousel-list-item {
    position: relative;
    margin-right: 4px;
}


.photos-carousel-list-item.ui-sortable-placeholder {
    flex-shrink: 0
}

.photos-carousel-list-item .photos-carousel-list-item-image-wrapper{
    width: 120px;
    height: 120px;
    border: 1px solid #E7E6E6;
    border-radius: 4px;
    position: relative;
}

.photos-carousel-auto-validated-item .photos-carousel-list-item-image-wrapper {
    border-bottom: 5px solid #DD9B36;
}

.photos-carousel-manually-validated-item .photos-carousel-list-item-image-wrapper {
    border-bottom: 5px solid #46AE63;
}

.photos-carousel-photo-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
}

    .photos-carousel-photo-wrapper:hover, .photos-carousel-photo-wrapper:active, .photos-carousel-photo-wrapper:focus {
        opacity: 0.8;
        transform: scale(0.95);
    }

    .photos-carousel-photo-wrapper:not(:last-child) {
        margin-right: 16px;
    }

.photos-carousel-photo {
    max-height: 100%;
    max-width: 100%;
}

.photos-carousel-list {
    white-space: nowrap;
    overflow: auto;
    padding-bottom: 2px;
    display: flex;
    align-items: flex-end;
}

    .photos-carousel-list::-webkit-scrollbar-track {
        background-color: #D8D8D8;
        border-radius: 8px;
    }

    .photos-carousel-list::-webkit-scrollbar {
        height: 8px;
        background-color: #F5F5F5;
        border-radius: 8px;
    }

    .photos-carousel-list::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background-color: #56549F;
    }

.photos-carousel-photo-item-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: white;
    display: none;
    cursor: move;
}

.photos-carousel-list-item:hover .photos-carousel-photo-item-footer {
    display: block;
}

.photos-carousel-list-item .resolution{
    font-size: 12px;
}

/* Image tags hang below the photo, so the items are aligned by their tops instead of their
   bottoms: the tag block height differs from image to image. */
.tagged-photos-carousel-list {
    align-items: flex-start;
}

.image-tag-values {
    width: 120px;
    white-space: normal;
}

    .image-tag-values .tag-value {
        font-size: 11px;
        line-height: 16px;
        padding: 1px 8px;
        margin-right: 4px;
        margin-top: 4px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.photos-carousel-photo-item-footer .delete-photo {
    float: right;
}

.photos-carousel-play-button {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: url(../../../Images/video-play-button.png) no-repeat center center;
    background-size: 30%;
    transform: scale(1);
}

.search-hint {
    display: inline;
    color: #4D4D4D;
    font-size: 12px;
    line-height: 16px;
}

.abc-analysis-label {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #AAAAAA;
    float: right
}

.no-search-results-placeholder {
    background-color: #ededed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 300px;
    border-radius: 4px;
}

.no-analytics-placeholder {
    background-color: #ededed;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-height: 400px;
    border-radius: 8px;
}

.no-data-placeholder-text {
    max-width: 80%;
    text-align: center;
}

.no-analytics-placeholder h2, .no-analytics-placeholder p {
    color: #8D8D8D;
}

.text-align-end {
    text-align: end;
}

.orders-table {
    overflow-x: auto;
}

    .orders-table th {
        position: sticky;
        top: 0;
        z-index: 3;
    }

.new-design .oi {
    font-family: 'Icons';
}

.column-title-collapsed {
    font-weight: bold;
}

.cell-collapsed {
    word-break: break-all;
}

.analytics-chart-wrapper canvas {
    width: 100%;
    height: 240px;
}

.schedule-flat-form {
    width: 1000px;
}

.form-check-inline {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0;
    margin-right: 0.75rem;
}

    .form-check-inline .form-check-input {
        margin-right: 5px;
    }

.select-all-holder {
    float: right;
}

.account .buttons-holder {
    margin-bottom: 12px;
    float: right;
}

.account .monthly-charge {
    margin-bottom: 12px;
}

.account .balance {
    margin-bottom: 24px;
}

.external-models-search .search-form {
    margin-bottom: 12px;
}

.bundles .buttons-holder {
    text-align: right;
}

.pricing-profiles .buttons-holder {
    margin-bottom: 12px;
    text-align: right;
}

.users .buttons-holder {
    margin-bottom: 12px;
    text-align: right;
}

td.min-width, th.min-width {
    text-align: right;
}

    td.min-width .dropdown-list, th.min-width .dropdown-list {
        text-align: left;
    }

form.dropdown-item {
    text-align: left;
}

.new-task .buttons-holder .button {
    margin-bottom: 12px;
}

.library-sources .button {
    margin-bottom: 12px;
}

.library-sources .grid-4c {
    margin-bottom: 12px;
}

.grid-3.analytics-statistics-wrapper {
    grid-column-gap: 40px;
}

.issues-wrapper {
    margin-top: 24px;
}

.avatar {
    word-break: initial;
}

.profile-message {
    margin-bottom: 20px;
}

.user-ai-badge {
    display: inline-block;
    flex-shrink: 0;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    background-color: #6c757d;
}

.user-ai-badge-enabled {
    background-color: #28a745;
}

.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-card {
    position: relative;
    max-width: 520px;
    padding: 32px;
}

.profile-card__menu {
    position: absolute;
    top: 16px;
    right: 16px;
}

.profile-card__top {
    display: flex;
    align-items: center;
    gap: 24px;
}

.profile-card__avatar .avatar {
    width: 96px;
    height: 96px;
}

.profile-card__avatar .avatar-initials {
    font-size: 36px;
}

.profile-card__avatar-button {
    position: relative;
    display: inline-block;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
}

/* Dim on hover/focus to afford the click. */
.profile-card__avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity .15s ease;
}

.profile-card__avatar-button:hover .profile-card__avatar-overlay,
.profile-card__avatar-button:focus-visible .profile-card__avatar-overlay {
    opacity: 1;
}

/* Persistent corner camera badge marking the photo as editable. */
.profile-card__avatar-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #56549F;
    color: #fff;
    border: 2px solid #fff;
    box-sizing: border-box;
}

.profile-card__avatar-badge svg {
    display: block;
    width: 15px;
    height: 15px;
}

.profile-card__identity {
    /* Lets the long login below shrink and wrap instead of stretching the card. */
    min-width: 0;
}

.profile-card__name {
    font-size: 24px;
    line-height: 28px;
    font-weight: 600;
    margin: 0 0 4px;
}

.profile-card__role {
    color: #4D4D4D;
    margin-bottom: 8px;
}

.profile-card__login {
    word-break: break-all;
}

.profile-card__facts {
    display: grid;
    /* The label column sizes to the longest label; the value column takes the rest. */
    grid-template-columns: auto 1fr;
    gap: 12px 24px;
    margin: 28px 0 0;
    padding-top: 24px;
    border-top: 1px solid #EDEDED;
}

.profile-card__facts dt {
    color: #AAAAAA;
    font-weight: 400;
}

.profile-card__facts dd {
    margin: 0;
    word-break: break-word;
}

.profile-card__muted {
    color: #AAAAAA;
}

.profile-card__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.profile-card__status:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #AAAAAA;
}

.profile-card__status.active:before {
    background-color: #4BB34B;
}

.profile-card__status.blocked:before {
    background-color: #E64C4C;
}

/* The uploader's default 200px drop zone is sized for bulk product images. */
#changeAvatarPopup .paste-target {
    min-height: 120px;
}

.hidden-date {
    margin-top: 2px;
    margin-bottom: 10px;
}

.catalog-analytics-statistics {
    margin-bottom: 30px;
}

.tag-values {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.tag-value {
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    padding: 3px 10px;
    border-radius: 12px;
    background: #56549f;
    color: white;
    margin-right: 6px;
    margin-top: 4px;
}

.tags-filter-button {
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 24px;
    border: 1px solid #D8D8D8;
    padding-right: 38px;
    background: url(../Images/kebab-menu-ico.svg) center;
    background-repeat: no-repeat;
}
.tags-filter-contains {
    margin-bottom: 8px;
}

.tags-filter-contains label {
    margin-right: 12px;
}

.modal .tag-value:last-child, .models-filter .tag-value:last-child, .flat-form .tag-value:last-child {
    margin-bottom: 12px;
}

.tag-attribute-value {
    display: flex;
}

    .tag-attribute-value .icon-button {
        align-self: center;
    }

.icon-button.remove-cross {
    width: 16px;
    height: 18px;
    margin-left: 4px;
}

.remove-cross {
    background: url("../Images/remove-cross-ico.svg") no-repeat center;
}

    .remove-cross.dark {
        filter: invert(32%) sepia(6%) saturate(559%) hue-rotate(22deg) brightness(92%) contrast(99%);
    }

.tag-field {
    display: flex;
    align-items: center;
}

    .tag-field .square-button.add-button {
        width: 31px;
    }

.tag-input:not(:only-child) {
    margin-right: 14px;
}

.colorPickWrapper {
    position: absolute !important;
}

.color-picker {
    border-radius: 5px;
    height: 36px;
    cursor: pointer;
    padding: 5px 8px;
    text-wrap: nowrap;
    font-size: 14px;
    font-weight: 500;
    -webkit-transition: all linear .2s;
    -moz-transition: all linear .2s;
    -ms-transition: all linear .2s;
    -o-transition: all linear .2s;
    transition: all linear .2s;
}

    .color-picker:not(:last-child) {
        margin-right: 14px;
    }

    .color-picker div {
        text-wrap: initial;
    }

.form-field-time-container {
    display: grid;
    grid-template-columns: 1fr 20px;
    align-items: center;
}

.library-select-container .multiselect-container {
    overflow: hidden auto;
    min-width: 330px;
    max-height: 400px;
}

.no-data-placeholder-button-wrapper {
    margin-top: 24px;
}

.button-choose-file {
    vertical-align: top;
    margin-right: 16px;
}

.price-details-name {
    margin-top: 8px;
}

.demo-explanation {
    display: inline;
}

.table-compactness {
    margin-bottom: 15px !important;
    padding: 3px 10px;
}

.switcher-list {
    display: flex;
    justify-content: center;
    border: 1px solid #D8D8D8;
    border-radius: 12px;
}

.switcher-item {
    width: 50%;
    text-align: center;
    white-space: nowrap;
}

    .switcher-item.active {
        border-radius: 12px;
        background: #56549f;
        color: white;
    }

    .switcher-item:not(.active):hover {
        color: #56549f;
    }

@media (max-width: 1000px) {
    .cards-grid__list-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .square-button:hover, .square-button:active, .button:hover, .button:active {
        opacity: 1;
    }

    .square-button:disabled, .button:disabled {
        opacity: 0.6;
    }

    .wide-wrapper {
        padding-left: 12px;
        padding-right: 12px;
    }

    .button {
        white-space: normal;
    }

    pre {
        white-space: break-spaces;
    }

    .cards-grid__title {
        font-size: 24px;
        line-height: 24px;
    }

    .main-title {
        font-size: 24px;
        line-height: 24px;
    }

    .left-right-columns-wrapper {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .table-info {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-row-gap: 12px;
        height: auto;
    }

    .table-info-search {
        width: auto;
        display: block;
    }

    .table-info-actions {
        float: none;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-left: 0;
    }

    .table-info-results {
        display: block;
        float: none;
        height: auto;
        text-align: right;
    }

    .left-right-columns-wrapper .button {
        margin-bottom: 12px;
    }

    .models-filter-main-parameters {
        grid-template-columns: repeat(1, 1fr);
    }

    .properties-filter-category,
    .properties-filter-flags {
        grid-column: auto;
        grid-row: auto;
    }

    .cards-grid__list-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .cards-grid__item-main-section {
        min-height: 0;
    }

    .tabs-wrapper {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-row-gap: 24px;
        height: auto;
    }

    .dropdown-list.expand-left {
        max-width: 300px;
    }

    form.dropdown-item button {
        white-space: break-spaces;
        text-align: left;
    }

    .grid-3, grid-4, grid-5, grid-6 {
        grid-template-columns: 1fr;
    }

    .graph-dependencies button {
        white-space: break-spaces;
        margin-bottom: 12px;
    }

    .graph-dependencies {
        margin-bottom: -12px;
    }

    .analytics-filter-date-parameters {
        grid-template-columns: 1fr;
        grid-row-gap: 0;
    }

        .analytics-filter-date-parameters button {
            margin-bottom: 12px;
        }

    .analytics-filter-main-parameters {
        grid-template-columns: 1fr;
    }

    .analytics-cards-grid__list-3 {
        grid-template-columns: 1fr;
    }

    .analytics-cards-grid__list {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .analytics-cards-grid__list-5 {
        grid-template-columns: 1fr;
    }

    .flat-form {
        width: auto;
    }

    .schedule-flat-form {
        width: auto;
    }

    .form-panel {
        padding: 24px;
    }

    .account .buttons-holder {
        float: none;
        text-align: right;
    }

        .account .buttons-holder .button {
            margin-bottom: 12px;
        }

    .modal-content {
        width: 100%;
        max-height: 100%;
    }

    .small-modal .modal-content {
        width: 100%;
    }

    .modal-double-column {
        grid-template-columns: 1fr;
        grid-row-gap: 0;
    }

        .modal-double-column .modal-input {
            margin-bottom: 12px;
        }

    #holderAmountButtons label {
        margin-bottom: 12px;
    }

    .btn-group-toggle {
        margin-bottom: 6px;
    }

    .bundles .buttons-holder .button {
        margin-bottom: 12px;
    }

    .table th, .table td {
        padding: 12px 12px;
    }

    .grid-4c {
        grid-template-columns: 1fr;
    }

    .library-sources .form-field {
        margin-bottom: 12px;
    }

    .avatar-initials-holder {
        white-space: nowrap;
    }
}

.no-data-placeholder-button-wrapper {
    margin-top: 24px;
}

.badge-panel {
    white-space: normal;
    margin-top: 24px;
}

.my-legend {
    height: 50px;
}

    .my-legend .legend-scale ul {
        margin: 0;
        padding: 0;
        float: left;
        list-style: none;
    }

        .my-legend .legend-scale ul li {
            display: flex;
            float: left;
            text-align: center;
            list-style: none;
            margin-left: 24px;
        }

    .my-legend ul.legend-labels li span {
        display: block;
        float: left;
        width: 5px;
        margin-right: 10px;
    }

.legend-labels span.suspicious {
    background-color: #D45353;
}

.legend-labels span.manual-validated {
    background-color: #46AE63;
}

.legend-labels span.auto-validated {
    background-color: #DD9B36;
}

.legend-labels span.not-validated {
    background-color: #AAAAAA;
}

.prices-button {
    height: 32px;
}

    .prices-button.add-button {
        background-color: transparent;
        background-image: url("../Images/add-plus-grey-ico.svg");
    }

    .prices-button.apply-button {
        margin-right: 10px;
    }

.prices-public-link {
    margin-top: 10px;
    margin-bottom: 10px;
}

.invisible {
    visibility: hidden !important;
}

.retail-prices-title {
    margin-bottom: 0 !important;
}

.wide-table {
    display: block;
    overflow-x: auto;
}

    .wide-table th {
        position: sticky;
        top: 0;
        z-index: 3;
    }

.warning-backgraund {
    background-color: orange !important
}

.highlight-on-hover:hover{
    background: #f5f5f5;
}

.round-corners {
    padding: 4px 8px;
    margin: 4px 0px;
    border-radius: 16px;
}

.scroll-top-btn {
    border: 0;
    width: 48px;
    height: 48px;
    background-color: #56549F;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 48px;
    box-shadow: 0 6px 40px #56549F;
    color: #fff;
    background-image: url("../Images/go-to-catalog.svg");
    background-position: center center;
    background-repeat: no-repeat;
    transform: rotate(270deg);
    position: fixed;
    right: 25px;
    bottom: 25px;
    cursor: pointer;
    font-size: 20px;
    display: none;
    z-index: 1000;
}

.first-add-enum-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.first-add-enum-value-btn {
    margin-right: 35px;
}

.tag-item-checkbox {
    margin: 10px;
}

.property-value-column {
    width: 40%;
}

/* The value status colors the row but not the inputs — a filled input does not read as an input */
.property-value-column .form-input,
.property-value-column .multiselect-native-select .custom-select {
    background-color: white;
}

/* The shared value control renders bootstrap's custom file input, which the new design does not
   style — the native input already shows the chosen file name, so drop its label */
.property-value-column .custom-file-label,
.required-property-value .custom-file-label {
    display: none;
}

/* bootstrap-multiselect.css is not loaded in the new design, so the widget's native <select>
   stays visible under the dropdown button — hide it the way that stylesheet would, leaving only
   the button. Every place that renders the shared value control has to be listed here. */
.property-value-column .multiselect-native-select select,
.required-property-value .multiselect-native-select select {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
}

.property-values-counter-container {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
}

.property-values-counter-row {
    display: grid;
    grid-template-columns: 20px 50px;
    align-items: center;
}

.property-values-counter-icon {
    text-align: center;
}

.property-values-counter {
    text-align: right;
}

.property-values-counter-inline-container {
    display: flex;
    gap: 20px;
    align-items: center;
}

.sum-icon {
    margin-bottom: 5px;
}

/* The default values table carries three columns instead of the seven of the products grid, so the
   value takes more of the row than the 40% of property-value-column. */
.default-values-table .property-value-column {
    width: 60%;
}

/* Enum and flag select inside a table row. The button must not carry white-space: nowrap: its
   min-content width would then be the whole value and the column would stretch with it. The value
   is clipped by the fixed height and stays whole in the button title. */
.row-value-select .multiselect {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 24px 0 5px;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-value-select .multiselect-container {
    max-width: 100%;
    max-height: 260px;
    overflow-y: auto;
}

    .row-value-select .multiselect-container .dropdown-item {
        white-space: normal;
        overflow-wrap: anywhere;
    }

/* Long type names must not stretch the filter grid: a grid column does not shrink below the
   intrinsic width of a select, which pushed the whole page out of the screen. */
#default-values-filter .models-filter-main-parameters > div {
    min-width: 0;
}

    #default-values-filter .form-input {
        width: 100%;
        max-width: 100%;
    }

/* MCP tokens (users-settings/mcp-tokens): the connection details above the list, and the
   masked token values inside it. */
.mcp-tokens-intro {
    margin-bottom: 24px;
    padding: 24px;
}

.mcp-tokens-intro__text {
    margin: 0 0 16px;
    max-width: 900px;
}

.mcp-tokens-intro__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 24px;
    margin: 0 0 16px;
}

.mcp-tokens-intro__facts dt {
    color: #AAAAAA;
    font-weight: 400;
}

.mcp-tokens-intro__facts dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    /* The address can be long; the copy button next to it must not be pushed off the panel. */
    min-width: 0;
    flex-wrap: wrap;
}

.mcp-token__code {
    padding: 2px 8px;
    border-radius: 4px;
    background: #F5F5F7;
    font-family: Consolas, Menlo, monospace;
    word-break: break-all;
}

.mcp-token__code--block {
    display: block;
    padding: 12px;
    /* A command line is read as one line: wrapping it hides where an argument ends. */
    overflow-x: auto;
    white-space: pre;
}

.mcp-tokens__empty {
    padding: 16px 0;
}

.mcp-token {
    display: flex;
    /* The value takes the whole column and the actions sit under it, so a long token wraps as
       little as possible. */
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.mcp-token__value {
    align-self: stretch;
    /* Wraps mid-string: the elastic column has to be able to give width back rather than push
       the table wider than the page. */
    white-space: normal;
    word-break: break-all;
}

.mcp-token__actions {
    display: flex;
    gap: 12px;
}

/* The one elastic column: it takes what the fixed-width columns leave. */
.mcp-token-cell {
    min-width: 200px;
}

.mcp-token__action {
    padding: 0;
    border: none;
    background: none;
    color: #56549F;
    cursor: pointer;
}

.mcp-token__action:hover {
    text-decoration: underline;
}

/* Both the name and the token can wrap, so the browser is free to squeeze either. A floor on
   the name keeps a short one on a single line and sends the slack to the token instead. */
#mcp_tokens td:first-child, #mcp_tokens th:first-child {
    min-width: 160px;
}