﻿.title-paper {
    padding-top: 30px;
    padding-left: 16px;
    padding-right: 16px;
}

/*
    Maintenance status cards
*/
.maintenance-paper {
    padding: 0 16px;
    background: transparent !important;
    box-shadow: none !important;
}

.d-flex.status-row, .d-flex.status-row-group {
    gap: 8px !important;
}

.status-card,
.customer-grid-paper .mud-data-grid {
    min-width:200px;
    box-shadow: none !important;
    border: 1px solid var(--color-grey-50);
    border-radius: 8px;
    gap: 8px;
}

.status-card {
    flex: 1 1 0;
    max-width: 100%;
}

    .status-card:hover, .status-card:focus {
        background-color: var(--bg-neutral-element-hover-light);
        cursor: pointer;
    }

    .status-card:focus {
        border: 1px solid var(--color-blue-500);
    }

    .status-card .mud-card-header{
        padding-bottom: 0 !important;
    }

    .status-card .mud-card-header h6 {
        font-size: var(--typography-body-regular-font-size);
        font-weight: var(--typography-body-regular-font-weight);
        line-height: var(--typography-body-regular-line-height);
        color: var(--text-neutral-secondary);
        padding-bottom: 0px;
        align-self: center;
        margin-left: 8px;
    }

    .status-card .mud-card-header-content .flex-row {
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0 !important;
    }

    .status-card .mud-card-content {
        font-size: 38px;
        color: var(--color-grey-800);
        font-weight: 400;
        padding-top: 0;
        margin-left: 4px;
    }

.selected-valid {
    border: 1px solid var(--success-stroke);
}

.selected-expiressoon {
    border: 1px solid var(--warning-stroke);
}

.selected-expired {
    border: 1px solid var(--danger-stroke);
}

.selected-refused {
    border: 1px solid var(--text-neutral-secondary);
}

.mud-chip.status-chip {
    border: none;
    padding: 6px 8px !important;
    font-size: var(--typography-body-small-regular-font-size);
    font-weight: var(--typography-body-small-regular-font-weight);
    line-height: var(--typography-body-small-regular-line-height);
}

    .mud-chip.status-chip svg{
        height:100%;
    }

    .mud-chip.status-chip .mud-chip-content {
        font-size: var(--typography-body-small-regular-font-size);
        font-weight: var(--typography-body-small-regular-font-weight);
        line-height: var(--typography-body-small-regular-line-height);
    }

    .mud-chip.status-chip.chip-only-icon {
        padding: 6px !important;
        width: 24px;
    }

    .mud-chip.status-chip.status-expired {
        color: var(--danger-stroke);
        background-color: var(--danger-bg);
    }
        .mud-chip.status-chip.status-expired .mud-chip-content {
            color: var(--danger-text-on-bg);
        }
    
    .mud-chip.status-chip.status-expires-soon {
        color: var(--warning-stroke);
        background-color: var(--warning-bg);
    }
        .mud-chip.status-chip.status-expires-soon .mud-chip-content {
            color: var(--warning-text-on-bg);
        }

    .mud-chip.status-chip.status-refused {
        color: var(--text-neutral-secondary);
        background-color: var(--bg-neutral-element-disabled);
    }
        .mud-chip.status-chip.status-refused .mud-chip-content {
            color: var(--text-neutral-primary);
        }

    .mud-chip.status-chip.status-valid {
        color: var(--success-stroke);
        background-color: var(--success-bg);
    }
        .mud-chip.status-chip.status-valid .mud-chip-content {
            color: var(--success-text-on-bg);
        }

    .mud-chip.status-chip.status-deleted {
        color: var(--text-neutral-secondary);
        background-color: var(--bg-neutral-element-disabled);
    }

        .mud-chip.status-chip.status-deleted .mud-chip-content {
            color: var(--text-neutral-primary);
        }
/*
Customer grid styles
*/
    .customer-grid-paper {
        background: transparent !important;
        box-shadow: none !important;
    }


    .customer-grid-paper .mud-data-grid .mud-table-toolbar {
        border-bottom: 1px solid var(--color-grey-50);
    }

.customer-grid-toolbar{
    align-items:center;
    width: 100%;
}
    .customer-grid-toolbar .mud-input-root-outlined {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .customer-grid-toolbar .mud-select, .customer-grid-toolbar .mud-input-control {
        flex-grow: 0;
    }

.customer-grid-export-tooltip {
    padding: 8px;
}

    .customer-grid-export-tooltip, .customer-grid-export-tooltip * {
        background-color: var(--bg-neutral-dark) !important;
        text-align: center;
    }

.customer-grid-paper .mud-data-grid .mud-table-container {
    border: 1px solid var(--color-grey-50) !important;
    border-radius: 8px;
    margin: 16px;
    width: calc(100% - 34px) !important;
}

        .customer-grid-paper .mud-data-grid .mud-table-container .mud-table-head,
        .customer-grid-paper .mud-data-grid .mud-table-container .mud-table-head .mud-table-cell {
            color: var(--color-grey-600);
            background-color: var(--color-grey-25);
            font-weight: 400;
        }

        .customer-grid-paper .mud-data-grid .mud-table-container .mud-table-head .filter-button{
            display: none !important;
        }


.customer-grid-collapse-button {
    height: 32px;
    width: 32px;
}
.customer-grid-collapse-button svg {
    transform: rotate(45deg);
    transform-origin: center;
}

.customer-grid-toolbar .grid-filter-export {
    height: 32px;
    margin-right: 8px;
}

.customer-grid-paper .mud-data-grid .mud-table-container .mud-table-body .mud-table-cell {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-grey-800);
}

    .customer-grid-cell-ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.customer-grid-paper .mud-data-grid .mud-table-container .mud-table-body .mud-table-cell.mud-table-child-content {
    background-color: var(--bg-neutral-element-disabled );
}