:root {
    --error-color: red;
    --error-bg-color: #ffdddd;
    --success-color: green;
    --success-bg-color: #ddffdd;
    --warning-color: orange;
    --warning-bg-color: #ffffcc;
    --info-color: blue;
    --info-bg-color: #ddffff;
    --table-border-color: #e1e1e1;
    --table-row-color: #f2f2f2;
    --fandom-redlink: #ba0000;
}

summary {
    cursor: pointer;
}


/***
 * Table
 **/
#network-table-form {
    /* Center table */
    width: 100%;
}

#network-table {
    /* Center table */
    margin: 0 auto;

    /* Make table as small as possible */
    width: auto;
    table-layout: fixed;
}


/* Text alignment */
#network-table th.sourceLabel,
#network-table td.sourceLabel {
    text-align: right;
}

#network-table th:not(.sourceLabel),
#network-table td:not(.sourceLabel) {
    text-align: center;
}


/* Borders */
#network-table th,
#network-table td {
    border-right: 1px solid var(--table-border-color);
    border-bottom: 1px solid var(--table-border-color);
}

#network-table tr:last-child {
    border-bottom: none;
}

#network-table th:first-child,
#network-table td:first-child,
#network-table th:last-child,
#network-table td:last-child {
    /* Undo Milligram padding because it looks bad with column borders */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}


/* Table colors */
#network-table th a i {
    font-size: 0.9em;
    font-weight: normal;
}

#network-table a {
    cursor: pointer;
}

#network-table a::after {
    display: none;
}


/* Shared colors */
.red-link a {
    color: var(--fandom-redlink);
}

span.success,
i.success {
    color: var(--success-color);
}

div.success {
    border-color: var(--success-color);
    background-color: var(--success-bg-color);
}

span.error,
i.error {
    color: var(--error-color);
}

div.error {
    border-color: var(--error-color);
    background-color: var(--error-bg-color);
}

span.warning,
i.warning {
    color: var(--warning-color);
}

div.warning {
    border-color: var(--warning-color);
    background-color: var(--warning-bg-color);
}

span.info,
i.info {
    color: var(--info-color);
}

div.info {
    border-color: var(--info-color);
    background-color: var(--info-bg-color);
}


/***
 * Messages, errors, etc.
 **/
#errors,
#messages {
    width: 100%;
    text-align: center;
}

.error-outer,
.message-outer {
    display: inline-block;
}

.error-inner {
    margin-bottom: 1em;
}

.error-inner,
.message-inner {
    padding: 1em;

    border-width: 1px;
    border-style: solid;
}