/* Table Builder */
table.tablebuilder {
    border:1px solid #000;border-spacing:0;border-radius:6px;overflow:hidden;
    /* HEADER ROWS */
    & > thead {
        & tr {background:#060b1a;}
        & th {color:#fcb825;border:1px solid;border-width:0 1px 1px 0;border-right-color:#555;border-bottom-color:#000;text-align:center;vertical-align:middle;padding:4px;user-select:none;position:relative;
            &:last-of-type {border-right-width:0;}}
        & th.sort {cursor:pointer;padding-right:8px;
            &:hover {background-image:linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05));cursor:pointer;}
            &::before, &::after {position:absolute;right:2px;font-size:0.65rem;color:#555}
            &:hover::before, &:hover::after {color:#666;}
            &::before {content:"\25b2";bottom:50%;margin-bottom:2px;}
            &::after {content:"\25bc";top:50%;margin-bottom:2px;}
            &.asc::before, &.desc::after {color:#ccc;}
        }
    }
    /* DATA ROWS */
    & > tbody > tr {
        background:#1a1a1a;
        &:nth-of-type(even) {background:#131314;}
        & > td {border:1px solid;border-width:0 1px 1px 0;border-right-color:#777;border-bottom-color:#555;text-align:center;padding:2px 12px;font-size:1.3rem;position:relative;
            &:last-of-type {border-right-width:0;}
            &.score {
                & label {display:block;width:100%;height:100%;text-align:center;
                    & input {background:transparent;border:1px solid transparent;border-radius:4px;text-align:center;-moz-appearance:textfield;cursor:pointer;width:100%;
                        &:focus, &:hover {border-color:#fcb825;background:#fff4;outline:none;}
                        &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {-webkit-appearance:none;margin:0;}
                    }
                }
            }
            &[data-col-id='tournamentOrder']     {width:85px;}
            &[data-col-id='tournamentName']      {text-align:left;}
            &[data-col-id='tournamentDuration']  {width:120px;}
            &[data-col-id='tournamentgetScores'] {width:85px;padding:0;}
            &[data-col-id='matchPlayer1Score'], &[data-col-id='matchPlayer2Score'] {width:110px;padding:0;}
        }
    }
    & input[type='button'] {display:block;width:100%;height:100%;border:1px solid transparent;border-radius:0;background:#fff3;font-size:1rem;position:absolute;inset:0;}
}