:root {
	--equipment-light-red: color-mix(in srgb, var(--red-500) 50%, transparent);
	--equipment-light-brand: color-mix(in srgb, var(--brand-light-blue) 50%, transparent);
	--equipment-dark-yellow:color-mix(in srgb, var(--yellow-500) 50%, transparent);
}

#fixedValuesContainer {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-top: 10px;
}

.green {
    color: var(--green-500);
    margin-right: 20px;
}

.red {
    color: var(--red-500);
}


.fv-green {
    color: var(--green-500);
}

.fv-red {
    color: var(--red-500);
}

/* My Equipment row highlights (Equipment.js highlightListing). The grid-scoped selectors (0,3,0)
   outrank the Kendo theme's zebra rule .k-grid .k-table-alt-row (0,2,0), so alternating rows keep
   their color. Kendo's row :hover is also (0,3,0) and loads later, so hover still wins. */
.alert-row,
.k-grid .k-table-row.alert-row {
    background-color: var(--equipment-light-red);
}

.terra-verse-row,
.k-grid .k-table-row.terra-verse-row {
    background-color: var(--equipment-light-brand);
}

.low-confidence-row,
.k-grid .k-table-row.low-confidence-row {
    background-color: var(--equipment-dark-yellow);
}

.default-row,
.k-grid .k-table-row.default-row {
    background-color: var(--color-bg);
}

.extended-width {
    width: 80vw;
    margin: 0 auto;
}

.tooltip-icon {
    font-size: var(--font-size-h2);
    color: var(--color-text);
    padding-top: 5px;
    text-align: center;
}

abbr {
    text-decoration: none;
    border-bottom: none;
}

.group-header {
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--brand-light-blue);
    text-align: center;
}

.header-row {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 10px;
}

.header-row h2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

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

.button-order {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-content: center
}

.row-hover {
    color: var(--color-bg);
}

.row-default {
    color: var(--brand-black);
}

.drilldown-button {
    background: none;
    border: none;
    visibility: hidden;
}

.drilldown-button:hover {
    background: none;
    border: none;
}

#noResultsMessage {
    background-color: var(--color-bg);
    border: 2px solid var(--color-bg);
    display: none;
    text-align: center;
    padding: 40px 20px;
    border-radius: 8px;
    margin: 20px auto;
    max-width: 600px;
}

.no-results-icon {
    color: var(--color-text-secondary);
    font-size: 48px;  
    margin-bottom: 15px;
    display: block;
}

.no-results-title {
    color: var(--color-text);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 10px;
}

.no-results-description {
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: var(--line-height-normal);
    margin-bottom: 10px;
}

.no-results-actions {
    margin-top: 20px;
}

.noSellsDaysMessage {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background-color: #e7f3ff;
    border-left: 4px solid #2196F3;
    color: #0d47a1;
}

.equipment-buttons-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    align-content: center;
    flex-direction: column;
    margin-bottom: 10px;
}

.my-equipment-container .k-column-title {
    color: var(--brand-black);
}

.my-equipment-container #EquipmentGrid .k-grid-header th:not(.group-header) .k-column-title,
.my-equipment-container #EquipmentGrid .k-table-thead th:not(.group-header) .k-column-title {
    font-size: var(--font-size-small);
}

.my-equipment-container #EquipmentGrid .k-grid-header th,
.my-equipment-container #EquipmentGrid .k-table-thead th {
    vertical-align: middle;
    padding-left: 9px;
}

.my-equipment-container #EquipmentGrid .k-grid-header th .k-cell-inner,
.my-equipment-container #EquipmentGrid .k-table-thead th .k-cell-inner {
    display: flex;
    align-items: center;
}

.my-equipment-container #EquipmentGrid .k-grid-header th .k-cell-inner .k-link,
.my-equipment-container #EquipmentGrid .k-table-thead th .k-cell-inner .k-link {
    flex: 1;
    min-width: 0;
}

.my-equipment-container #EquipmentGrid td {
    text-align: center !important;
}

.my-equipment-container #EquipmentGrid td.col-name,
.my-equipment-container #EquipmentGrid tr td:first-child {
    text-align: left !important;
}

.my-equipment-container #EquipmentGrid .k-grid-header th .k-icon.k-svg-icon.k-svg-i-filter,
.my-equipment-container #EquipmentGrid .k-table-thead th .k-icon.k-svg-icon.k-svg-i-filter {
    margin-left: auto !important;
    position: relative;
    left: 0px;
    font-size: 0.75em;
}

#EquipmentGrid .k-table-td:has(button) {
    text-align: center;
}

.my-equipment-container .k-grid .k-table-th>.k-cell-inner,
.my-equipment-container .k-grid.k-grid-md .k-table-th>.k-cell-inner,
.my-equipment-container .k-grid .k-grid .k-table-th>.k-cell-inner,
.my-equipment-container .k-grid .k-grid.k-grid-md .k-table-th>.k-cell-inner {
    margin-block: calc(var(--kendo-spacing-2, 0.5rem) * -1.5);
    margin-inline: calc(var(--kendo-spacing-2, 0.5rem) * -1.4);
    margin-right: calc(var(--kendo-spacing-2, 0.5rem) * -2);
}

@media (max-width: 767px) {
    .my-equipment-container .header-row h2 {
        padding-top: 50px !important;
        font-size: var(--font-size-h3);
    }

    .my-equipment-container .ibox-content.chart .text-center {
        padding-bottom: 20px !important;
        font-size: var(--font-size-h3);
    }

    .my-equipment-container .header-row {
        flex-direction: column;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        height: 100px;
    }

    .my-equipment-container .header-row .btn-default {
        margin-left: 0 !important;
        align-self: flex-start;
    }

    .extended-width {
        width: 95%;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .back-to-My-Acco-Btn {
        margin-left: -60px
    }
}