:root {
    --charcoal: #1b1e24;
    --gray0: #f4f4f4;
    --gray1: #e0e0e0;
    --gray3: #96989c;
    --gray4: #76787c;
    --primary-green: #22bb69;
    --primary-green-dark: #19a158;
    --tableGreenLight: #e6f9ef;
    --darkGreenTransparent: #bdebd2;
    --tableRedDark: #cd160a;
    --gray2: #c8c9cb;
    --tableRedLightHover: #f8d6d3;
    --tableRedLight: #fae4e2;
    --font-weight-bold: 700;
    --font-weight-normal: 500;
    --border-radius: 6px;
    --border-radius-big: 12px;
    --shadow: 0 4px 10px 0 #1125571a;
    --redesign-main-background: linear-gradient(
        292deg,
        #e5eeff 0%,
        #ebedf2 87.5%
    );
}

.tabs-wrapper {
    position: relative;
    top: -1px;
    display: flex;
    padding: 8px 20px;
    align-items: flex-start;
    flex-flow: row wrap;
    gap: 20px;
    background: white;
}
.page-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
}
.tabs-wrapper .tab {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
    color: var(--gray3);
    flex: 0 0 auto;
}
.tabs-wrapper .tab:hover {
    text-decoration: none;
}
.tabs-wrapper .tab.active {
    font-size: 14px;
    color: var(--charcoal);
}
.tabs-wrapper .tab.active:after {
    background: var(--primary-green);
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    transition: all 0.2s ease-in;
    content: "";
}

.filters-bar-redesign {
    background: #fff;
    border-bottom: 1px solid var(--gray1);
    box-shadow: var(--shadow);
    flex-wrap: wrap;
    position: relative;
}

.filters-bar-redesign.filters-bar-sticky {
    position: fixed;
    top: 50px;
    left: 220px;
    right: 0;
    z-index: 1;
}

.page-content-background {
    background: var(--redesign-main-background);
    background-clip: padding-box;
    width: 100%;
    padding: 30px 20px;
}

.page-content-background-gradient {
    background: var(--redesign-main-background);
    background-clip: padding-box;
}

.panel-box {
    background: #fff;
    box-shadow: var(--shadow);
    border-radius: var(--border-radius-big);
}

.panel-box.chart {
    margin: 0;
    min-height: 500px;
}

.panel-box.chart.half {
    width: calc(50% - 10px);
}

.panel-box.chart.half + .panel-box.chart.half {
    margin-left: 20px;
}

.panel-content {
    padding: 20px;
}

.panel-title {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    font-weight: var(--font-weight-normal);
    color: var(--gray4);
    margin-bottom: 20px;
}

.table-wrapper {
    width: 100%;
    border-radius: var(--border-radius);
    border: 1px solid var(--gray1);
    overflow-x: auto;
}

.table-wrapper .table-redesign th:first-child {
    min-width: unset;
}

.table-wrapper .table-redesign .th-cell {
    min-width: 110px;
    max-width: 130px;
}

.table-wrapper .table-redesign th:last-child,
.table-wrapper .table-redesign td:last-child {
    border-right: 0;
}

.table-wrapper .table-redesign th {
    border-top: 0;
    font-weight: 500;
}

.table-scroll-wrapper {
    width: 100%;
    overflow: auto;
    scroll-behavior: smooth;
}

.modal-popup .table-scroll-wrapper {
    overscroll-behavior: contain;
}

.table-redesign {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px;
}

.table-scroll-wrapper .table-redesign thead th:first-child,
.table-scroll-wrapper .table-redesign tbody td:first-child {
    position: sticky;
    left: 0px;
    z-index: 1;
    background: #fff;
}

.table-scroll-wrapper .table-redesign .th-cell {
    background: white;
    position: sticky;
    top: 0;
    z-index: 2;
}

.table-scroll-wrapper .table-redesign thead th:first-child {
    z-index: 3;
}

.table-redesign th {
    width: 130px;
    text-align: right;
    border-bottom: 1px solid var(--gray1);
    border-top: 1px solid var(--gray1);
}

.table-redesign th,
.table-redesign td {
    border-right: 1px solid var(--gray1);
}

.table-redesign th:first-child {
    width: unset;
    text-align: left;
    min-width: 300px;
}

.table-redesign .th-cell {
    height: 50px;
    padding: 0 10px;
    min-width: 130px;
    width: 130px;
    max-width: 130px;
}

.table-redesign .th-cell.active {
    color: rgb(27, 30, 36);
    font-weight: 700;
}

.table-redesign .th-cell.active i {
    font-size: 16px;
}

.table-redesign .th-cell.active .fa-filter {
    font-size: 14px;
}

.table-redesign .th-cell .actions-wrapper i {
    display: none;
    font-size: 12px;
}

.table-redesign .th-cell .actions-wrapper {
    display: inline-flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
}

.table-redesign .td-cell .ellipsis {
    max-width: 110px;
}

.table-wrapper .table-redesign .th-cell {
    padding: 0 10px;
}

.table-redesign .th-cell .title {
    color: var(--gray4);
    font-size: 12px;
    font-weight: var(--font-weight-normal);
}

.table-wrapper .table-redesign .th-cell.th-filter {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

.table-wrapper .table-redesign .th-cell.th-filter .dropdown-menu {
    box-shadow: 0 4px 10px 0 rgba(17, 37, 87, 0.1);
}

.table-scroll-wrapper tbody tr:last-child .td-cell {
    border-bottom: 1px solid var(--gray1);
    border-radius: 0 !important;
}

.table-redesign .th-cell .title.ellipsis {
    max-width: 100px;
}

.table-redesign .th-cell.active .title {
    color: var(--charcoal);
    font-weight: var(--font-weight-bold);
}

.table-redesign .td-cell {
    position: relative;
    height: 50px;
    padding: 3px 10px 3px 10px;
}

.table-redesign tr + tr td {
    border-top: 1px solid var(--gray1);
}

.table-redesign tbody tr:hover {
    background-color: var(--gray0);
}

.table-redesign tbody tr:hover td:first-child {
    background-color: var(--gray0);
}

.table-redesign tbody tr:hover .bg-red {
    background-color: #f9d9d6;
}

.table-redesign tbody tr:hover .bg-green {
    background-color: #cef3df;
}

.table-redesign tbody tr:hover .bg-yellow {
    background-color: #ffea9e;
}

.table-redesign tbody tr:hover .bg-gray {
    background-color: #fafafa;
}

.table-redesign tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}

.table-redesign tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

.table-redesign .td-cell {
    font-size: 14px;
    color: var(--charcoal);
    font-weight: var(--font-weight-normal);
    text-align: right;
}

.table-redesign .td-cell:first-child {
    font-size: 13px;
    text-align: left;
}

.table-redesign .td-cell.bg-green {
    background: #e6f9ef;
}

.table-redesign .td-cell.bg-yellow {
    background: #fff3c9;
}

.table-redesign .td-cell.bg-green {
    background: #e6f9ef;
}

.table-redesign .td-cell.bg-red {
    background: #ffe3e1;
}

.table-redesign .td-cell.bg-gray {
    background: var(--gray0);
}

.table-redesign .retailer-cell {
    display: grid;
    grid-template-columns: 60px 1fr;
}

.table-redesign .retailer-cell .retailer-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    margin-left: 10px;
}

.table-redesign .sku-cell {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
}

.table-redesign .sku-cell .sku-name {
    font-weight: var(--font-weight-normal);
    font-size: 12px;
    line-height: 15px;
    color: var(--charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.table-redesign .sku-cell .sku-codes {
    color: var(--gray3);
    font-size: 10px;
    line-height: 15px;
    text-decoration: none;
    font-weight: var(--font-weight-normal);
}
.table-redesign.table-hover-list tr,
.table-redesign.table-hover-list td,
.table-redesign.table-hover-list th {
    border: none;
}
.table-redesign.table-hover-list.ht-container-header {
    box-shadow: none;
    border-bottom: 1px solid var(--gray1);
}

.table-redesign.table-hover-list th {
    text-align: left;
}

.table-redesign.table-hover-list tbody tr {
    min-height: 50px;
    height: 50px;
    border-top: 1px solid var(--gray1);
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

.table-redesign.table-hover-list tbody {
    border-bottom: 1px solid var(--gray1);
}

.table-redesign.table-hover-list tbody tr:hover {
    border-right-color: var(--gray1);
    border-left-color: var(--gray1);
}

.table-redesign.table-hover-list th {
    width: unset;
    min-width: unset;
}

.table-redesign.table-hover-list tr:hover td {
    background-color: var(--gray0);
}

.table-redesign.table-hover-list tbody td {
    min-height: 50px;
    padding: 0;
}

.table-redesign.table-hover-list tbody td a {
    display: block;
    font-size: 14px;
    padding: 3px 10px 3px 10px;
    color: var(--charcoal);
    font-weight: 500;
    text-decoration: none;
}

.table-redesign .label-checkbox {
    background: transparent;
}
.table-redesign.table-hover-list .label-checkbox span.checkbox {
    margin-right: 20px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 20px;
}

.grid-2-460 {
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    width: 100%;
    gap: 20px;
}

.grid-2.column,
.grid-2-460.column {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
}

@media screen and (max-width: 1200px) {
    .grid-2,
    .grid-2-460 {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }
}

.no-data-placeholder {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #96989c;
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    line-height: 20px;
    min-height: calc(100vh - 200px);
}

.no-data-placeholder h2 {
    font-weight: var(--font-weight-bold);
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 10px;
    color: var(--charcoal);
}

pre.styleguide {
    display: none;
}

pre.styleguide code {
    position: relative;
    background: var(--charcoal);
    color: #fff !important;
    display: inline-block;
    white-space: normal;
    border-radius: var(--border-radius);
    padding: 10px 40px 10px 20px;
    font-size: 12px;
    cursor: pointer;
}

.info-bar {
    display: flex;
    align-items: baseline;
    background: #cde4fe;
    color: #4287e2;
    padding: 10px 20px;
    gap: 10px;
    font-weight: var(--font-weight-normal);
    font-size: 12px;
}

.warning-bar {
    display: flex;
    align-items: center;
    color: var(--charcoal);
    background: #ebbb4e;
    padding: 10px 20px;
    gap: 10px;
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-normal);
    font-size: 12px;
}

.table-actions-wrapper {
    z-index: 9;
    background: rgb(255, 255, 255);
    padding: 20px;
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    gap: 10px;
}

.label-checkbox.redesign {
    color: var(--charcoal);
    font-size: 14px;
}

.color-primary {
    color: var(--primary-green);
}

.color-danger {
    color: #eb5757;
}

.color-info {
    color: #4287e2;
}

.color-gray3 {
    color: var(--gray3) !important;
}

.color-gray4 {
    color: var(--gray4) !important;
}

.diff {
    display: inline-flex;
    padding: 0px 5px;
    background: rgb(255, 255, 255);
    border-radius: 3px;
    height: 16px;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    margin-right: 5px;
}

.diff::before {
    display: block;
    width: 0px;
    height: 0px;
    position: relative;
    top: 1px;
    margin-right: 3px;
    content: "";
}

.diff.down {
    color: #f35d56;
}

.diff.down::before {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #f35d56;
}

.diff.up {
    color: rgb(73, 196, 130);
}

.diff.up::before {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid rgb(73, 196, 130);
}

.target-diff {
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0px 12px 12px 0px;
    content: "";
}

.target-diff.up {
    border-color: transparent rgb(73, 196, 130) transparent transparent;
}

.target-diff.down {
    border-color: transparent #f35d56 transparent transparent;
}

#sidebar {
    display: none;
}

#sidebar.visible {
    display: block;
}

.sidebar-overlay {
    display: flex;
    position: fixed;
    inset: 0px;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 501;
    justify-content: flex-end;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--gray1);
    font-size: 16px;
    width: 100%;
}

.sidebar-header i {
    position: relative;
    top: 1px;
}

.sidebar-content .filters-title {
    margin: 0px;
    margin-left: 10px;
    padding: 0px;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    color: var(--charcoal);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 25px;
}

.sidebar-content {
    position: absolute;
    top: 0px;
    bottom: 0px;
    background: rgb(255, 255, 255);
    width: 320px;
    right: 0px;
}

.sidebar-content .filter-section {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 0 auto;
    background: white;
    transition: background 0.2s ease-in 0s;
}

.sidebar-content .filter-section:hover {
    cursor: pointer;
}

.sidebar-content .filter-section-value-wrapper {
    display: flex;
    flex: 1 0 auto;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.sidebar-header .close-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #c8c9cb;
    border-radius: 4px;
    transition: all 0.2s ease-in 0s;
}

.sidebar-header .close-sidebar i {
    font-size: 16px;
}

.sidebar-header .close-sidebar:hover {
    background: var(--gray0);
    color: var(--gray4);
    text-decoration: none;
}

.sidebar-content .filter-section-value-wrapper h4 {
    font-weight: var(--font-weight-bold);
    color: var(--charcoal);
    font-size: 16px;
    line-height: 20px;
    margin: 0;
}

.sidebar-content .filter-section-value-wrapper:hover {
    background: var(--gray0);
}

.sidebar-content .filter-section .filter-section-content {
    display: none;
}

.sidebar-content .filter-section.open .filter-section-content {
    display: block;
}

.sidebar-content .filter-section.open .filter-section-value-wrapper:hover {
    background: linear-gradient(rgb(244, 244, 244) 0%, rgb(255, 255, 255) 100%);
}

.sidebar-content .filter-section.open .filter-badge {
    display: none;
}

.sidebar-content .filter-section.open .open-filter-section i:before {
    content: "\f068";
}

.filter-section + .filter-section {
    border-top: 1px dashed var(--gray1);
}

.filter-section .filter-badge {
    display: inline-block;
    padding: 0px 8px;
    height: 20px;
    background: #def5e9;
    border-radius: 6px;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #168d4d;
    max-width: 140px;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 0 !important;
}

.filter-section .open-filter-section {
    position: relative;
    transition: all 0.2s ease-in-out 0s;
    margin-left: 12px;
    color: #c8c9cb;
}

.filter-section .open-filter-section:hover {
    transition: color 0.2s ease-in-out 0s;
    color: var(--primary-green);
}

.filter-section .open-filter-section i {
    font-size: 16px;
}

.filter-section .filter-section-content-wrapper {
    padding: 0 20px 20px;
}

.form-list {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    gap: 10px;
}

.sidebar-content .footer {
    display: flex;
    gap: 20px;
    padding: 10px 20px;
    border-top: 1px solid var(--gray1);
}

.sidebar-content .footer button {
    flex-grow: 1;
}

.modal-redesigned {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 14px 14px 0px rgba(0, 0, 0, 0.25) ;
}

.export-modal {
    min-width: 420px;
    width: fit-content;
}

.select-redesign {
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #c8c9cb 50%),
        linear-gradient(135deg, #c8c9cb 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(1em + 2px),
        calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
}

.select-redesign:focus {
    outline: 0;
}

.table-wrapper .retailer-cell {
    display: grid;
    grid-template-columns: 60px 1fr;
}

.table-wrapper .retailer-cell img {
    width: 60px;
}

.table-wrapper .retailer-cell .retailer-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    margin-left: 10px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

.grid-2-460 {
    display: grid;
    grid-template-columns: 460px minmax(0, 1fr);
    width: 100%;
}

.grid-2.column,
.grid-2-460.column {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
}

@media screen and (max-width: 1200px) {
    .grid-2,
    .grid-2-460 {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }
}

.no-data-placeholder {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #96989c;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    min-height: calc(100vh - 200px);
}

.no-data-placeholder h2 {
    font-weight: 700;
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 10px;
    color: #1b1e24;
}

.gap-20 {
    gap: 20px;
}

.gap-10 {
    gap: 10px;
}

.body-link {
    font-weight: 400;
    margin: 0px;
    padding: 0px;
    transition: color 0.2s ease 0s;
    display: inline-block;
    color: var(--primary-green) !important;
    line-height: inherit;
    text-decoration: underline !important;
    cursor: pointer;
    user-select: none;
}

.body-link:hover {
    color: var(--primary-green-dark) !important;
}

.dropdown.redesign .column-actions-dropdown-trigger {
    padding: 0;
    border: 0;
    height: unset;
    width: unset;
}

.dropdown.redesign .column-actions-dropdown-trigger {
    justify-content: flex-end;
}

.dropdown.redesign .column-actions-dropdown-trigger i.color-primary {
    color: var(--primary-green);
}

.redesign .box-shadow {
    box-shadow: 0 4px 10px 0 rgba(17, 37, 87, 0.1);
}

.column-actions-dropdown {
    width: 250px;
    padding: 10px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    background: white;
    border: 1px solid rgb(224, 224, 224);
    margin-top: 12px;
}

.column-actions-footer {
    display: flex;
    padding-top: 10px;
    margin-top: 10px;
    justify-content: space-between;
}

.column-actions-dropdown .field-label {
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    line-height: 20px;
    margin-bottom: 5px;
}

.button-filter {
    padding: 5px;
    background-color: #fff;
    border: 1px solid var(--gray1);
    border-radius: 4px;
    font-weight: var(--font-weight-normal);
    font-size: 13px;
    line-height: 20px;
    color: var(--gray4);
    cursor: pointer;
    text-align: center;
    flex: 1 0 auto;
    height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex: 1 0 auto;
}

.button-filter:hover {
    background-color: var(--gray0);
}

.button-filter.active {
    background: rgba(222, 245, 233, 0.314);
    border: 1px solid rgb(34, 187, 105);
    color: rgb(22, 141, 77);
}

.button-filter.active:hover {
    background: rgba(200, 231, 192, 0.46);
}

.button-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}

.sort-arrow-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0px;
    outline: 0px;
    width: 20px;
    height: 20px;
    background: var(--gray0);
    color: #c8c9cb;
    border-radius: 2px;
    padding: 0px;
}

.sort-arrow-wrapper:focus,
.sort-arrow-wrapper:active {
    outline: 0;
}

.sort-arrow-wrapper i {
    font-size: 16px;
}

.sort-arrow-wrapper:hover {
    cursor: pointer;
    background-color: rgb(200, 231, 192);
    color: var(--primary-green-dark);
}

.sort-arrow-wrapper.active {
    cursor: pointer;
    background-color: var(--primary-green);
    color: white;
}

.sort-arrow-wrapper.active:hover {
    background-color: var(--primary-green-dark);
}

.warning {
    padding: 10px 20px 10px 20px;
    border-radius: 6px;
    background: #ebbb4e33;
    border: 1px solid #ebbb4e;
    margin-bottom: 10px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 10px;
}

.warning .warning-content {
    display: flex;
    flex-flow: column nowrap;
    font-size: 12px;
    font-weight: var(--font-weight-normal);
}

.warning .warning-content strong {
    display: block;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
}

.warning i {
    font-size: 20px;
    color: #ebbb4e;
}

.box-no-shadow {
    background: #fff;
    border-radius: var(--border-radius-big);
    border: 1px solid var(--gray1);
}

.hover-row {
    padding: 5px;
    border-radius: var(--border-radius);
    width: 100%;
    display: flex;
    align-items: center;
}

.hover-row:hover {
    background-color: var(--gray0);
}
.group-label {
    display: block;
    color: var(--gray4);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}
.tag.badge {
    padding: 1px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    gap: 5px;
    border-radius: var(--border-radius-big);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.1s ease-in;
    width: fit-content;
}
.dashboard-metric-row {
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.dashboard-metric-row + .dashboard-metric-row {
    margin-top: 1px;
}
.dashboard-metric-row.is-hoverable:hover {
    background: var(--gray0);
    border-color: var(--gray0);
    cursor: pointer;
}
.dashboard-metric-row.is-selected {
    background: var(--gray0);
    border-color: var(--gray0);
}
.dashboard-metric-row.is-selected .dashboard-metric-label,
.dashboard-metric-row.is-selected .dashboard-metric-value {
    font-weight: 700;
    font-size: 16px;
    line-height: 30px;
}
.dashboard-metric-label {
    position: relative;
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: var(--charcoal);
}

.dashboard-metric-value {
    flex: 0 0 auto;
    color: var(--charcoal);
    text-align: right;
    transition: color 0.1s ease-in 0s;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}

.dashboard-metric-color-pin {
    flex: 0 0 auto;
    color: var(--charcoal);
    text-align: right;
    transition: color 0.1s ease-in 0s;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    width: 16px;
    height: 16px;
    border-radius: 8px;
}

.green-pill {
    background-color: var(--green);
    color: #fff;
    padding: 1px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

#onex_table .ht-sort {
    line-height: 14px;
}

#onex_table .pt-header-bg th {
    border-bottom: 0;
}

.ai-modal[type="neutral"] {
    overscroll-behavior: contain;
    background: linear-gradient(
            0deg,
            rgba(255, 186, 28, 0.1) 0%,
            rgba(255, 186, 28, 0.1) 100%
        ),
        #fff;
}

.ai-modal[type="positive"] {
    overscroll-behavior: contain;
    background: linear-gradient(
            0deg,
            rgba(34, 187, 105, 0.1) 0%,
            rgba(34, 187, 105, 0.1) 100%
        ),
        #fff;
}

.ai-modal[type="negative"] {
    overscroll-behavior: contain;
    background: linear-gradient(
            0deg,
            rgba(233, 91, 45, 0.1) 0%,
            rgba(233, 91, 45, 0.1) 100%
        ),
        #fff;
}

.ai-modal .ai-loader,
.ai-modal .ai-no-data,
.ai-modal .ai-error {
    display: none;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.ai-modal .ai-no-data h4,
.ai-modal .ai-error h4 {
    color: var(--gray4);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    line-height: 20px;
}

.ai-modal .ai-error,
.ai-modal .ai-no-data {
    gap: 24px;
    background: var(--gray0);
    border-radius: var(--border-radius-big);
    font-size: 12px;
    color: var(--gray4);
}

.ai-modal .ai-error i,
.ai-modal .ai-no-data i {
    font-size: 48px;
    color: var(--gray2);
}

.ai-modal .ai-loader {
    height: 410px;
}
.ai-modal .ai-no-data,
.ai-modal .ai-error {
    height: 380px;
}

.ai-modal .ai-loader img {
    height: 100px;
}

.ai-modal .ai-loader span {
    display: block;
    margin-top: 20px;
    color: var(--charcoal);
    font-size: 12px;
    font-weight: var(--font-weight-normal);
}

.ai-modal.loading .ai-tips-list,
.ai-modal.loading .ai-footer,
.ai-modal.no-data .ai-tips-list,
.ai-modal.no-data .ai-footer,
.ai-modal.error .ai-tips-list,
.ai-modal.error .ai-footer {
    display: none;
}

.ai-modal.loading .ai-loader,
.ai-modal.no-data .ai-no-data,
.ai-modal.error .ai-error {
    display: flex;
}

.ai-badge {
    display: inline-block;
    padding: 0px 10px;
    border-radius: 6px;
    background: #ffba1c;
    color: var(--charcoal);
    font-size: 12px;
    font-weight: var(--font-weight-normal);
    line-height: 20px;
}

.ai-badge-empty {
    padding: 0px 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--gray0);
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    line-height: 20px;
    color: var(--gray4);
    flex: 0 0 auto;
    width: auto !important;
    cursor: pointer;
    transition: all 0.1s ease-in;
}

.ai-badge-empty.positive:hover {
    background: #cef3df;
    border-color: #cef3df;
    color: var(--charcoal);
}

.ai-badge-empty.neutral:hover {
    background: #ffba1c;
    border-color: #ffba1c;
    color: var(--charcoal);
}

.ai-badge-empty.negative:hover {
    background: #e95b2d;
    border-color: #e95b2d;
    color: #fff;
}

.ai-modal[type="positive"] .ai-badge-empty.positive {
    display: none;
}

.ai-modal[type="neutral"] .ai-badge-empty.neutral {
    display: none;
}

.ai-modal[type="negative"] .ai-badge-empty.negative {
    display: none;
}

.ai-tips-wrapper {
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    border-radius: var(--border-radius-big);
    border: 1px solid var(--gray1);
    background: #fff;
    justify-content: space-between;
}

.ai-tips-list {
    display: flex;
    flex-flow: column nowrap;
    padding: 20px;
    font-size: 13px;
    color: var(--charcoal);
}

.ai-tips-list strong {
    display: block;
    margin-top: 10px;
}

.ai-tip-title {
    color: var(--charcoal);
    font-size: 13px;
    line-height: 16px;
    font-weight: var(--font-weight-bold);
}

.ai-tip-description {
    color: var(--charcoal);
    font-size: 13px;
    line-height: 16px;
    font-weight: var(--font-weight-normal);
}

.ai-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--gray1);
}

.ai-footer .fal {
    cursor: pointer;
    color: var(--gray2);
    font-size: 16px;
}

.ai-owl-wrapper {
    position: absolute;
    top: 10px;
    left: 30px;
    z-index: 2;
}

.ai-modal-trigger {
    position: relative;
    display: flex;
    align-items: center;
}

.ai-owl-tip {
    padding: 5px 12px;
    border-radius: 6px;
    background: #ffca4f;
    color: var(--charcoal);
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    line-height: 20px;
    margin-right: 50px;
}

.ai-modal-trigger:hover .ai-owl-tip {
    background: #ffba1c !important;
}

.ai-modal-trigger:hover .ai-owl-tip:after {
    border-left-color: #ffba1c !important;
}

.ai-owl-tip::after {
    position: absolute;
    display: block;
    top: 7px;
    right: 42px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #ffca4f;
    content: "";
}

.ai-modal-trigger img {
    position: absolute;
    right: 0;
    top: -12px;
    height: 50px;
    transform: rotateY(180deg);
}

.ai-modal .feedback-icon {
    color: var(--gray2);
}

.ai-modal .feedback-icon:hover {
    color: var(--gray3);
}

.ai-modal .feedback-icon.active {
    font-weight: var(--font-weight-bold);
    color: var(--gray3);
}

.ai-modal .fa-copy:hover {
    color: var(--gray3);
}

.info-pill,
.success-pill,
.success-light-pill {
    height: 20px;
    line-height: 20px;
    border-radius: 15px;
    padding-right: 15px;
    padding-left: 15px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
}

.info-pill {
    background: #cde4fe;
    color: #4287e2;
}

.success-pill {
    background: #49c482;
    color: #def5e9;
}

.success-light-pill {
    background: #e6f9ef;
    color: #22bb69;
}

.highcharts-tooltip-container {
    z-index: 501 !important;
}

.content-width-wrapper {
    flex-flow: column nowrap;

    @media only screen and (min-width: 1920px) {
        width: 1660px;
        margin-left: auto;
        margin-right: auto;
    }
}
.font-weight-bold {
    font-weight: var(--font-weight-bold);
}

.grid-2fr {
    grid-column: span 2;
}

.table-redesign .status-rounded {
    display: inline-block;
    width: 30px;
    height: 20px;
    border-radius: 4px;
    content: "";
}

.table-redesign .status-rounded + span.st-label {
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #76787c;
}

.table-redesign .status-rounded.st-available {
    background: #66cc33;
}

.table-redesign .status-rounded.st-outstock {
    background: #ff9900;
}

.table-redesign .status-rounded.st-not-available {
    background: #e0e0e0;
    color: var(--gray4);
    text-align: center;
}

.title-product-name {
    color: var(--gray4);
    font-weight: 500;
    font-size: 14px;
}

.goBackIcon {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    color: var(--gray2);
    transition: all 0.1s ease-in;
    font-size: 16px;
}

.goBackIcon:hover {
    background: var(--gray0);
    color: var(--gray4);
    text-decoration: none;
}

.main-value {
    font-size: 30px;
    color: var(--charcoal);
    text-decoration: none;
    font-weight: 700;
}

.heading4 {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: var(--charcoal);
}

.charcoal-text {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--charcoal);
}

.circle {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    content: ''
}

.link-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--gray3);
    font-size: 16px;
}

.link-icon:hover {
    text-decoration: none;
    border-color: var(--gray1);
}

.link-icon:hover i {
    color: var(--green);
    font-weight: 800
}

.table-scroll-trigger:focus {
    outline: none;
}

.current-date-range-label {
    color: var(--gray4);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}