Template:SkillChances/styles.css

.sc-box {
    margin: 1em;
    width: max-content;
    display: flow-root; /* to play nice with the floating infobox */
}

@media (max-width: 600px) {
    .sc-box {
        width: 100%;
        margin: 1em 0 0 0;
    }
}

@media (max-width: 950px) {
    .sc-box td span:nth-child(2) a {
        display: none;
    }
}

.sc-box .about {
    text-align: right;
}

.sc-box .toggle {
    display: inline-block;
    padding: 4px 8px;
    border: 1px solid #45494e;
    color: dodgerblue;
    border-radius: 4px;
    user-select: none;
}

.sc-box .toggle:hover {
    background: #2a3347;
}

.sc-box .toggle:active {
    background: #101622;
}

.sc-box table {
    width: 100%;
    margin-top: 8px;
}

.sc-box th {
    text-align: center;
    padding-right: 0.5em !important; /* suppress the space allotted to the sortable markers */
}

.sc-box td {
    text-align: right;
    color: #fff;
    padding: 0 4px;
}

.sc-box td:first-child {
    text-align: left;
}

@media (max-width: 950px) {
    .sc-box td:first-child {
        text-align: center;
    }
}

.sc-box tr > *:nth-child(3),
.sc-box tr > *:nth-child(4),
.sc-box tr > *:nth-child(5) {
    font-style: italic;
    opacity: 0.5;
}

.sc-box .separator:first-child,
.sc-box .separator:last-child,
.sc-box .separator + .separator {
    display: none;
}

.sc-box .separator {
    height: 2px;
    background: #c8b36c !important;
}