:root { --error-color: red; --success-color: green; } /*** * Table **/ #networkTableForm { /* Center table */ width: 100%; } #networkTable { /* Center table */ margin: 0 auto; /* Make table as small as possible */ width: auto; table-layout: fixed; } /* Text alignment */ #networkTable th.sourceLabel, #networkTable td.sourceLabel { text-align: right; } #networkTable th:not(.sourceLabel), #networkTable td:not(.sourceLabel) { text-align: center; } /* Borders */ #networkTable th, #networkTable td { border-right: 1px solid var(--kpxc-table-border-color); } #networkTable tr:last-child { border-bottom: none; } #networkTable th:first-child, #networkTable td:first-child, #networkTable th:last-child, #networkTable td:last-child { /* Undo Milligram padding because it looks bad with column borders */ padding-left: 1.5rem; padding-right: 1.5rem; } /* Colors */ #networkTable tbody tr:nth-child(odd) { background-color: var(--kpxc-table-hover-color); } #networkTable td.correct { color: var(--success-color); } #networkTable td.incorrect { color: var(--error-color); } #networkTable th a i { font-size: 0.9em; font-weight: normal; } /*** * Loading icon * * From https://loading.io/css/. **/ .lds-dual-ring { display: inline-block; width: 1em; height: 1em; } .lds-dual-ring:after { content: " "; display: block; width: 1em; height: 1em; border-radius: 50%; border: 1px solid; border-color: #000 transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*** * Messages, errors, etc. **/ #messages { width: 100%; text-align: center; } .messageInner { display: inline-block; } #errorMessage { color: var(--error-color); } input[data-entered=true]:invalid { border-color: var(--error-color); color: var(--error-color); } .redLink a { color: #ba0000; }