.DeviceDetailHeaderTextPrimary {
    margin-top: 0px !important;
}

.DeviceDetailHeaderTextSecondary {
    margin-top: 18px !important;
}

.DeviceDetailHeaderColumnLabel {
    margin-left: 24px !important;
}

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

.DeviceDetailHeaderLabel {
    color: rgba(0, 0, 0, 0.32);
    white-space: nowrap;
}

.DeviceDetailHeaderText {
    color: rgba(0, 0, 0, 0.59);
}

.DeviceDetailHeaderTextWithEllipsis {
    color: rgba(0, 0, 0, 0.59);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.InlineProgress-no-status-icon {
    margin-left: 10px !important;
}

.InlineProgress-no-status-icon>svg {
    display: none;
}

.MuiSnackbarContent-root {
    background-color: white;
    color: '#333';
    border-radius: '8px';
    font-size: '1rem';
}

.MuiTabPanel-root {
    padding-top: 24px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.ip-status-text {
    font-size: 0.875rem !important;
    color: rgba(0, 0, 0, 0.59);
    padding-left: 4px;
}

.ip-status-icon {
    font-size: 1rem !important;
}

div[role="tooltip"] ul li:has(div > svg[data-testid="RefreshOutlinedIcon"]) {
    border-top: 1px solid #ccc;
}

.session-info-row {
    background-color: #f9f9f9 !important;
    border-radius: 1px !important;
    line-height: 24px !important;
    margin-bottom: 1px !important;
}

.hover-overlay,
.awsRegion-copy-overlay,
.accessToken-copy-overlay {
    position: absolute !important;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #666;
    color: #fff;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: normal;
    pointer-events: none;
}

.MuiButtonBase-root.MuiButton-root .MuiSvgIcon-root path {
    fill: rgb(128, 128, 128);
    /* This is the RGB value for gray */
}

div[data-testid="data-grid-skeleton"]>div:first-child {
    display: none;
}