body {
    width: 750px;
    margin: 0 auto;
    font-family: Calibri, sans-serif;
}

div.main {
    width: 715px;
    background: white;
    padding: 0 30px 0 5px;
}

.small {
    font-size: small;
}

.hidden {
    display: none;
}

.instructions {
    padding: 0 30px 0 5px;
}

code {
	font-family: monospace;
    border: solid 1px #808080;
    padding: 1px;
}

/*
 * MAIN TABLE
 */
table,
table th,
table td {
    border: solid 1px black;
    border-spacing: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

table#mainTable {
    width: 711px;
    /*height: 100%;*/
}

table th {
    font-size: 60px;
}

table th > div.header,
table tfoot td > div.footer {
    height: 100%;
}

table th > div.header:first-of-type,
table tfoot td > div.footer:first-of-type {
    width: 169px;
    border-right: solid 1px black;
    float: left;
}

table th > div.header:last-of-type,
table tfoot td > div.footer:last-of-type {
    width: 547px;
    margin-left: 170px;
    vertical-align: middle;
}

table tfoot td > div.footer > span {
    cursor: pointer;
}

tfoot td {
    /*border: solid 1px red;*/
    font-size: 26px;
    position: relative;
}


/*
 * SCORE BOARD
 */
div#rowPlaceholder {
	display: none;
}
div.rowContainer {
    scroll-snap-type: y mandatory;
    height: 120px;
    overflow-y: scroll;
}

::-webkit-scrollbar {
    width: 0px; /* Remove scrollbar space */
    height: 0px; /* Remove scrollbar space */
    background: transparent; /* Optional: just make scrollbar invisible */
}

/* Optional: show position indicator in red
::-webkit-scrollbar-thumb {
    background: #FF0000;
} */
div.rowContainer > div.playerPlaceholder {
	display: none;
}
div.rowContainer > div.player-container {
    scroll-snap-align: start;
    height: 120px;
    min-height: 120px;
    max-height: 120px;
}

div.player-name {
    line-height: 120px;
    float: left;
    width: 169px;
    height: 120px;
    font-size: 36px;
    text-transform: uppercase;
    overflow: hidden;
    border-right: solid 1px black;
}

div.player-score-container {
    border: solid 0 red;
    width: 547px;
    height: 120px;
    margin-left: 170px;
    overflow-x: scroll;
    overflow-y: hidden;
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 126px, rgba(0, 0, 0, 0.2) 160px, rgba(0, 0, 0, 0.4) 190px, rgba(0, 0, 0, 0.6) 260px, rgba(0, 0, 0, 0.8) 310px, rgba(0, 0, 0, 1) 480px, rgba(0, 0, 0, 1) 100%);
    scroll-snap-type: x mandatory; /* define snapping in container */
}

div.player-score-container > div {
    width: 181px;
    min-width: 181px;
    max-width: 181px;
    line-height: 120px;
    font-size: 90px;
    scroll-snap-align: start; /* define snap points in children */
    display: table-cell;
}

.player-score-container .player-score-add-more {
    font-size: 40px;
    vertical-align: middle;
    text-decoration: none;
    cursor: pointer;
}

.loading {
    background-color: red !important;
    background-image: url(./Rolling-1s-40px.gif);
    background-repeat: no-repeat;
    background-position: center center;
}

.loading span {
    /*display: none;*/
    color: rgba(0, 0, 0, 0);
    text-decoration-color: rgba(0, 0, 0, 0) !important;
}

/*
 * ROW COLORS
 */
.blue {
    background: rgb(65, 105, 225)
}

/*royalblue*/
.red {
    background: rgb(237, 20, 61)
}

/*crimson*/
.green {
    background: rgb(34, 139, 34)
}

/*forestgreen*/
.yellow {
    background: rgb(255, 215, 0)
}

/*gold*/
.black {
    background: rgb(0, 0, 0); /*black*/
    color: rgb(255, 255, 255); /*white*/
}

.pink {
    background: rgb(255, 192, 203)
}

/*pink*/
.brown {
    background: rgb(165, 42, 42)
}

/*brown*/
.gray {
    background: rgb(155, 155, 155)
}

.purple {
    background: rgb(128, 0, 128)
}

/*purple*/
.white {
    background: rgb(255, 255, 255); /*white*/
    color: rgb(0, 0, 0); /*black*/
}

.orange {
    background: rgb(255, 165, 0)
}

/*orange*/
.skyblue {
    background: rgb(135, 206, 250)
}

/*lightskyblue*/
.grass {
    background: rgb(124, 252, 0)
}

/*lawngreen*/
.teal {
    background: rgb(0, 128, 128)
}

/*teal*/
.magenta {
    background: rgb(255, 0, 255)
}

/*magenta*/
.ivory {
    background: rgb(255, 255, 240)
}

/*ivory*/
.tan {
    background: rgb(210, 180, 140)
}

/*tan*/

/*
 * FULLSCREEN
 */
div.fullscreen-link {
    text-align: right;
}

div.fullscreen-link > span.fullscreen-icon {
    /*				background-position: center right;
    /*				background-repeat: no-repeat;
    /*				background-image: url(http://pl.wikipedia.org/w/skins/Vector/images/external-link-ltr-icon.png?325de);
    */
    padding-right: 5px;
}

body:not(.fullscreen) span.fullscreen-link-min,
body.fullscreen span.fullscreen-link-max {
	display: none;
}

body.fullscreen > div.main {
    position: absolute;
    min-height: 100%;
    top: 0;
    left: 0;
    overflow-y: scroll;
    padding: 0 15px 0 5px;
}

body.fullscreen > div.main > #mainTable {
    margin: 10px 0 10px 2px;
}

/*
 * FLAG COUNTER
 */

div.flag-counter {
	margin: 5px 0 0 0;
	text-align: center;
}