:root {
    --selected-plan-color: var(--p-primary-color);
}

table.plans-table {
    cursor: pointer;

    th {
        text-align: center !important;
        line-height: 1.8;

        span.small {
            font-weight: normal;
        }
    }

    td {
        text-align: center !important;
    }

    td.value-name {
        text-align: left !important;
    }

    th.selected {
        background: var(--selected-plan-color);
        color: white !important;

        span {
            color: white !important;
        }
    }

    th.selected, td.selected {
        border-left: 1px var(--selected-plan-color) solid !important;
        border-right: 1px var(--selected-plan-color) solid !important;
    }

    th.selected {
        border-top: 1px var(--selected-plan-color) solid !important;
    }

    td.bottom.selected {
        border-bottom: 1px var(--selected-plan-color) solid !important;
    }
}

.ui.structured.celled.table tr td:not(.value-category-name), .ui.structured.celled.table tr th:not(.value-category-name) {
    border-right: none;
}
