:root {
    --active-status: #138891;
    --expired-status: #A8A8A8;
}

.services-page h6 {
    font-size: 16px;
}

.services-page .content-box {
    background-color: var(--base-box-bg);
    border-radius: 30px;
}

.box-theme {
    background: radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(28.79px);
    --webkit-backdrop-filter: blur(28.79px); 
    opacity: 0.7;
    background-clip: padding-box;
}

.services-table-body, .box-theme {
    border: 2.4px solid rgba(255, 255, 255, 0.3);
}

.services-table-body .service-title {
    cursor: pointer;
}

.services-table-body .status-box {
    width: 80px;
}

.services-table-body .status-box.active {
    background-color: var(--active-status);
}

.services-table-body .status-box.expired {
    background-color: var(--expired-status);
}

@media (max-width: 767.98px) {

    .services-table {
        text-align: start !important;
    }

    .services-table-body tr {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas: 
            "item1 item1"
            "item2 item2"
            "item3 item3"
            "actions actions";
    }

    .services-table-body tr:not(:first-child) {
        margin-top: 16px;
    }

    .services-table-body, .services-table-body tr {
        border: none;
    }

    .services-table-body td:nth-child(1) { 
        border-top-right-radius: 16px;
        border-top-left-radius: 16px;
        grid-area: item1; 
    }
    .services-table-body td:nth-child(2) { grid-area: item2; } 
    .services-table-body td:nth-child(3) { grid-area: item3; }
    .services-table-body td:nth-child(4) { 
        grid-area: actions; 
        border-bottom-right-radius: 16px;
        border-bottom-left-radius: 16px;
    }

    .services-table-body td {
        min-width: 0;
        border: none;
        overflow-wrap: break-word;
        word-break: break-word;
        padding: 16px !important;
        border: 2.4px solid rgba(255, 255, 255, 0.3) !important;
    }
    .services-table-body td:not(:last-child) {
        border-bottom: none !important;
    }
}