table {
  border-collapse: collapse;
  border: none;
  font: small arial, helvetica, sans-serif;
}
.odd{
  vertical-align: bottom;
  width: 10em;
  height: 40px;
  margin: 0;
  padding: 0 30px 0 0;
  white-space: nowrap;
  text-overflow: ellipsis;  
}
.final-width{
  width: 10em;
}
.even{
  vertical-align: top;
  width: 10em;
  height: 40px;
  margin: 0;
  padding: 0 30px 0 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
td p {
  border-bottom: solid 1px var(--main-color-opac-20);
  margin: 0;
  padding: 5px 5px 2px 5px;
}
#list-players{
  padding: 10px 0 10px 10px;
}
#td-players{
  vertical-align:top;
}
#table-players{
 width:100%;
 line-height: 22px; 
 color: var(--text-color);
 min-width: 206px;
}

@media screen and (max-width: 768px) {
      #table-players{
         width:173px;
         min-width: 20px;
        }

}

#table-players th{padding-left:0}
#table-players td:first-child{padding:1px 6px;font-size: 12px;}
#gr_A > tbody > tr:first-child,#gr_B > tbody > tr:first-child{font-size: 16px;text-align: center;vertical-align: middle;}
#live_table{color: var(--text-color);}
#table-players .row0,#live_table .odd p,#gr_A .odd,#gr_B .odd{background-color: var(--main-color-opac-40);}
#table-players .row1,#live_table .even p,#gr_A .even,#gr_B .even{background-color: var(--main-color-opac-20);}
#table-players > tbody > tr:first-child {
    background-color: var(--main-color);
    font-size: 12px;
    color: #fff;
    height: 30px;
}
#gr_A tr td,#gr_B tr td
{
    vertical-align: middle;
    padding-left: 7px;
}
#gr_A tr:first-child td,#gr_B tr:first-child td{padding-left: 0;}

#table-players i{color:var(--green); }
.numbi,.numbieven{color:black;}
.numbi{padding-top: 13px;}
.numbieven{vertical-align: top;padding-top: 4px;}
.font-bold{
  font-weight:700;
}

.slot {
    float: left;
    padding: 0;
    margin: 0;    
    list-style: none;
}

/* ---------------------------------------------------------------------
   FANCY EXAMPLE
--------------------------------------------------------------------- */
.fancy .jSlots-wrapper {
    overflow: hidden;
    height: 100px;
    display: inline-block; /* to size correctly, can use float too, or width*/
    border: 2px solid #80d700;
}

.fancy .slot li {
    padding-left: 10px;
    padding-right: 10px;
    line-height: 100px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    border-left: 1px solid #999;
}

.fancy .slot:first-child li {
    border-left: none;
}

.fancy .slot li {
    background-color: #000;
}

.fancy .slot li span {
    display: block;
}
#plane {
    display:block;
}
#plane .content{
    /*float: left;*/
    font-size: 50px;
    font-weight: 300;
    line-height: 42px;
    margin-top: 20px;
    text-align: center;
    width: 100%;
}

#plane .content{
    font-size: 20px;
    font-weight: 300;
    line-height: 42px;
}

#planeMachine {
    min-width: 260px;
    height: 42px;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    border: 2px solid #80d700;
    background-color: #f7f7f7;
}


/* ---------------------------------------------------------------------
   ANIMATIONS
--------------------------------------------------------------------- */

@-webkit-keyframes winner {
        0%, 50%, 100% {
            -webkit-transform: rotate(0deg);
            font-size:70px;
            color: #fff;
        }
        25% {
            -webkit-transform: rotate(20deg);
            font-size:90px;
            color: #FF16D8;
        }
        75% {
            -webkit-transform: rotate(-20deg);
            font-size:90px;
            color: #FF16D8;
        }
}
@-moz-keyframes winner {
        0%, 50%, 100% {
            -moz-transform: rotate(0deg);
            font-size:70px;
            color: #fff;
        }
        25% {
            -moz-transform: rotate(20deg);
            font-size:90px;
            color: #FF16D8;
        }
        75% {
            -moz-transform: rotate(-20deg);
            font-size:90px;
            color: #FF16D8;
        }
}
@-ms-keyframes winner {
        0%, 50%, 100% {
            -ms-transform: rotate(0deg);
            font-size:70px;
            color: #fff;
        }
        25% {
            -ms-transform: rotate(20deg);
            font-size:90px;
            color: #FF16D8;
        }
        75% {
            -ms-transform: rotate(-20deg);
            font-size:90px;
            color: #FF16D8;
        }
}


@-webkit-keyframes winnerBox {
        0%, 50%, 100% {
            box-shadow: inset 0 0  0px yellow;
            background-color: #FF0000;
        }
        25%, 75% {
            box-shadow: inset 0 0 30px yellow;
            background-color: aqua;
        }
}
@-moz-keyframes winnerBox {
        0%, 50%, 100% {
            box-shadow: inset 0 0  0px yellow;
            background-color: #FF0000;
        }
        25%, 75% {
            box-shadow: inset 0 0 30px yellow;
            background-color: aqua;
        }
}
@-ms-keyframes winnerBox {
        0%, 50%, 100% {
            box-shadow: inset 0 0  0px yellow;
            background-color: #FF0000;
        }
        25%, 75% {
            box-shadow: inset 0 0 30px yellow;
            background-color: aqua;
        }
}



.winner li {
    -webkit-animation: winnerBox 2s infinite linear;
       -moz-animation: winnerBox 2s infinite linear;
        -ms-animation: winnerBox 2s infinite linear;
}
.winner li span {
     -webkit-animation: winner 2s infinite linear;
        -moz-animation: winner 2s infinite linear;
         -ms-animation: winner 2s infinite linear;
}

/* Syntax Highlighter, ignore */
.dp-highlighter ol {
    padding: 10px;
}

 /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fff;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    text-align: center;
    width: 30%; /* Could be more or less, depending on screen size */
    min-width: 260px;
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
#fancy-title {
    color: #000;
    font-size: 15px;
    padding-bottom: 10px;
    font-weight: 700;
}