body {
    background: #ffffff;
    background-color:black;
    text-align: center;
}

h2 {
  margin: 0 0 0 0;
  color:darkorange;
}

#tip_header {
    background-color:black;
    padding:0px;
}
#tip_player1{
    line-height:30px;
    height:200px;
    width:50%;
    float:left;
    padding:0px;	      
}
#tip_player2{
    width:50%;
    height:200px;
    float:left;
    padding:0px;	 	 
}
#tip_footer{
    background-color:black;
    clear:both;
    padding:5px;	 	 
}
p {
    color:white;
}
figure {
        
}
figcaption {
    color: white;
    display: inline-block;
}

#scoreboard { background-color: black}
#fullscreen {
  position: absolute;
  top: 3vh;
  left: 3%;
  width: 8vw;
  height: 8vw;
  z-index: 10;
  background: transparent url(images/bilijar-club-logo.png) top center/ contain no-repeat;
}
div.igra { text-align: center; }
div.igra div.header { height: 15vh; display: flex; flex-direction: column; align-items: center; justify-content: center;}
div.igra div.challenge { font-size: 2vh; font-weight: 700; color: rgba(238, 238, 238, 0.753); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 60vw; }

div.igra div.slika { height: 24vh; display: flex; align-items: center; justify-content: center;}
div.igra div.slika,
div.igra div.flag,
div.igra div.tableAndSet,  
div.igra .slika .profile { position: relative; }
div.igra .slika .profile img { height: auto; max-height: 24vh; width: auto; max-width: 20vw; filter: drop-shadow(0 1px 6px rgba(0,56,102,.5));}

div.igra div.scoreline div.btns { display: flex; flex-direction: column; justify-content: center; align-items: center; height: calc(100vh - 12vh - 7.8vw); }
div.igra div.scoreline div.plus {  margin: 1.8vw; width: 9vw; height: 9vw; min-height: 36px; min-width: 36px; background: #09ff00 url() center center/60% no-repeat; line-height: 10vh; color: #FFF; border-radius: 50%; border: 8px solid #0E266650; background-clip: content-box;}  
div.igra div.scoreline div.plus:hover { background-color: hsla(64, 100%, 50%, 0.8); transition: all 0.3s ease-in; border: 2px solid #0E266650; }
div.igra div.scoreline div.minus { margin: 1.8vw; width: 6.4vw; height: 6.4vw; min-height: 36px; min-width: 36px; background: #ff0000 url() center center/60% no-repeat; line-height: 10vh; color: #FFF; border-radius: 50%; border: 8px solid #0E266650; background-clip: content-box; }
div.igra div.scoreline div.minus:hover { background-color: hsla(64, 100%, 50%, 0.8); transition: all 0.3s ease-in; border: 2px solid #0E266650; }
  

div.igra div.score { height: 32vh; font-size: 32vh; font-weight: 700; line-height: 30vh; color: #FFF; text-align: center; z-index: 3; text-shadow: 0px 0px 12px #003866;}


@media (orientation: portrait) {
  div.igra div.header { height: 12vh;}
  div.igra div.challenge { white-space: normal; line-height: 1.2em; overflow: visible;}
  div.igra div.scoreline div.btns { height: calc(100vh - 32vh - 16vw); }
  div.igra div.score { font-size: 28vw; line-height: 16vw; height: 22vw; }
  #fullscreen { width: 80px; height: 40px; left: 0.5vw; }
  
}
@media (orientation: landscape) {
  #mainMenu { max-width: 45%; right: 0; }
}
div.igra div.tableInfo { color: #FFF; text-transform: uppercase; font-size: 3vh; font-weight: 700; line-height: 1em; margin-bottom: 10px; }
div.igra div.raceToInfo { height: 26vh; margin-bottom: 12vh; font-size: 2.5vh; font-weight: 600; color: #FFFFFF; text-align: center; text-shadow: 0px 0px 12px #003866;}
div.igra div.raceToInfo span.raceTo { font-family: 'Open sans'; font-size: 7vh; line-height: 9vh; font-weight: 700; color: #FF9800; text-shadow: 0px 0px 12px #003866; }  

div.igra div.playerline {  height: 6vh; font-family: 'Open sans'; font-size: 4vh; font-weight: 600; color: #FFFFFF; }
div.igra div.playerline div { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-shadow: 0px 0px 12px #003866; text-align: center; }

  

.contentMain { display: flex; width: 100%; max-width: 100%; justify-content: space-between;}
.scoreline { flex-basis: 12vw; max-width: 12vw;  }
.contentPlayerA, .contentPlayerB { flex-basis: 32vw; max-width: 32vw; }
.contentSeparator { flex-basis: 12vw; max-width: 12vw; display: flex; flex-direction: column; align-items: center; justify-content: center;}