html,
body,
.tableframe {
    width: 100%;
    padding: 0;
    margin: 0;
}

.tableframe {
    overflow-x: auto;
}

/* Table basic styling */

table,
tr,
td,
th {
    border-collapse: collapse;
    border: 1px solid #aaa;
    /* white-space: nowrap; */
}

tr:hover {
    background-color: #eee;
}

th {
    background: #eee;
}

th,
td {
    padding: 0 .2em;
}

th.nowrap,
td.nowrap {
    white-space: nowrap;
}

.cell-comment {
    width: 20em;
}


/* Upload pane */

.upload-score-pane {
    width: 100%;
    background-color: #641a8f;
    padding: 1em;
    color: white;
}


/* thanks to */
.thanksto {
    padding: .3em;
    background: #333;
    color: #eee;
}

.thanksto a {
    font-weight: bold;
    color: #eee;
}

/* Clear lamps */

td.lamp,
th.lamp {
    padding: 5px;
    border-right: 2px solid black;
}

td.lamp {
    background-color: black;
}

td.lamp:after {
    display: none;
}

td.lamp:hover:after {
    display: block;
    position: absolute;
    padding: 2px;
    font-size: .8em;
    background-color: #ffffff;
    border: 1px solid black;
}

.clear-fullcombo td.lamp {
    animation: fullcombo-bg 0.15s infinite;
}

.clear-fullcombo td.lamp:after {
    content: "Full Combo";
}

@keyframes fullcombo-bg {

    0%,
    33% {
        background-color: #37fafc;
    }

    34%,
    66% {
        background-color: #f5f828;
    }

    67%,
    100% {
        background-color: #fafbf5;
    }
}

.clear-perfect td.lamp {
    animation: perfect-bg 1s infinite;
}

.clear-perfect td.lamp:after {
    content: "Perfect";
}

.clear-max td.lamp {
    animation: perfect-bg 0.5s infinite;
}

.clear-max td.lamp:after {
    content: "MAX";
}


@keyframes perfect-bg {

    0%,
    10% {
        background: hsl(0 100% 60%);
    }

    10%,
    20% {
        background: hsl(36 100% 60%);
    }

    20%,
    30% {
        background: hsl(72 100% 60%);
    }

    30%,
    40% {
        background: hsl(108 100% 60%);
    }

    40%,
    50% {
        background: hsl(144 100% 60%);
    }

    50%,
    60% {
        background: hsl(180 100% 60%);
    }

    60%,
    70% {
        background: hsl(216 100% 60%);
    }

    70%,
    80% {
        background: hsl(252 100% 60%);
    }

    80%,
    90% {
        background: hsl(288 100% 60%);
    }

    90%,
    100% {
        background: hsl(324 100% 60%);
    }
}



.clear-exhard td.lamp {
    animation: exhard-bg 0.1s infinite;
}

@keyframes exhard-bg {

    0%,
    49% {
        background-color: #fff424;
    }

    50%,
    100% {
        background-color: #f8091d;
    }
}

.clear-exhard td.lamp:after {
    content: "EX-HARD Clear";
}

.clear-hard td.lamp {
    background-color: #fffffe !important;
}

.clear-hard td.lamp:after {
    content: "Hard Clear";
}

.clear-normal td.lamp {
    background-color: #79fbfa !important;
}

.clear-normal td.lamp:after {
    content: "Normal Clear";
}

.clear-easy td.lamp {
    background-color: #e4fb84 !important;
}

.clear-easy td.lamp:after {
    content: "Easy Clear";
}

.clear-assist-easy td.lamp {
    background-color: #ee7cf8 !important;
}

.clear-assist-easy td.lamp:after {
    content: "Assist Clear";
}

.clear-failed td.lamp {
    background-color: #721616 !important;
}

.clear-failed td.lamp:after {
    content: "Failed";
}