body {
  background: #333 !important;
  color: #fff;
  font-size: 1.3em !important;
}

a, li a {
  color: grey !important;
}

li {
  list-style: none;
}
li a {
  color: white;
}

#headerFlex {
  font-size: 18px;
}
#headerFlex a {
  color: white !important;
}

.container {
  max-width: 1100px;
}

.protectedRoom  {
  list-style-image: url('https://yatzy.yukigassen.no/images/locked.png');
  color: white;
  padding: 2px;
}
.privateRoom  {
  list-style-image: url('https://yatzy.yukigassen.no/images/private.png');
  color: white;
  padding-left: 5px;
}
.publicRoom  {
  list-style-image: url('https://yatzy.yukigassen.no/images/public.png');
  color: white;
  padding-left: 5px;
}
.tourRoom  {
  list-style-image: url('https://yatzy.yukigassen.no/images/tourIcon.png');
  color: white;
  padding-left: 5px;
}
.yourTurn {
  background-color: #223c22;
  color: grey;
}
.yourTurn:first-child {
  border-radius: 5px 5px 0 0;
}
.yourTurn a {
  color: white !important;
}

.protectedRoom a {
  color: white;
}

.list-group {
  font-size: 16px;
}

#logout {
  color: #c71508;
  cursor: pointer;
}

.mobileHeader {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #858282;
  color: white;
  text-align: center;
  height: 80px;
  margin-top: -15px;
  z-index: 3;
}


.mobileFooter {
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #858282;
  color: white;
  text-align: center;
  z-index: 3;
}

.clear { clear: both; height: 100px; }
.clearH { clear: both; margin-bottom: -10px; }

.starter-template {
  padding: 40px 15px;
  text-align: center;
}

button,input{
	font:inherit
}
button{
	padding:7px 10px;
	border:none;
	background:#383;
	color:#fff
}
button:disabled{
	background:#444;
	color:#888
}

@media screen and (min-width: 768px) {
    .table-responsive {
      -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
           -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
    }
}


@media screen and (max-width: 767px) {
.table-responsive {
    border: 0px !important;
}
}

.board{
	-webkit-box-flex:0;
	-webkit-flex:none;
	-ms-flex:none;
	flex:none;
	border-collapse:collapse;
  border: 0px !important;
}

th {
    border-top: 0px !important;
}



.board thead th{
	text-align:center
}
.board thead .player-current{
	font-weight:700;
	color:#0c0
}
.board tbody .player-current{
	background:#223c22
}
.board td{
	padding:2px 10px;
	text-align:center;
	min-width:100px
}
.board tbody td{
	position:relative;
	border:1px solid #666;
	cursor:default
}
.board th{
  font-style: normal;
}
.category--derived th{
	font-style:italic
}



tbody .category--derived td,tbody .category--derived th{
	border-top:3px solid #999;
	border-bottom:3px solid #999
}
.category--bonus .score:not(.score--zero),.category--yatzy .score:not(.score--zero):not(.score--new){
	text-shadow:0 0 6px rgba(192,255,192,.9);
	color:#c0ffc0
}

.category-newest-score{
	text-shadow:0 0 6px rgba(192,255,192,.9);
	color:#c0ffc0
}

.score--zero{
	color:#777
}
.score--new{
	color:#3d0
}
.score--new.score--zero{
	color:#c00
}



.die{
	box-sizing:border-box;
	display:inline-block;
	margin:0 5px;
	width:50px;
	height:50px;
	text-align:center;
	vertical-align:middle;
	border:3px solid #fff;
	border-radius:10px;
	background-color:#555;
	background-position:50%;
	background-repeat:no-repeat
}
.die--held{
	background-color:#383
}
.die--d0{
	display:none
}
.die--d1{
	background-image:url(/yatzy/static/media/d1.6d87b6df.svg)
}
.die--d2{
	background-image:url(/yatzy/static/media/d2.ab8e6587.svg)
}
.die--d3{
	background-image:url(/yatzy/static/media/d3.34055a31.svg)
}
.die--d4{
	background-image:url(/yatzy/static/media/d4.0088699c.svg)
}
.die--d5{
	background-image:url(/yatzy/static/media/d5.b21ebe25.svg)
}
.die--d6{
	background-image:url(/yatzy/static/media/d6.92aeba88.svg)
}


/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/*
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #37517e url('https://yatzy.yukigassen.no/logo.svg') no-repeat center;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #37517e;
  border-top-color: #fff;
  border-bottom-color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

#aPreloader {
  height: 250px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #37517e url('https://yatzy.yukigassen.no/logo.svg') no-repeat center;
}

#aPreloader:before {
  content: "";
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #37517e;
  border-top-color: #fff;
  border-bottom-color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}