.babylon { line-height: 0; background: #33334c;}

#renderCanvas { width: 100%; /*height: calc(100vh - 56px);*/ height: 100vh; 
    -webkit-touch-callout: none; 
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            
    outline: none; 
    touch-action: none; 
}

@media all and (max-width: 992px) {
    /* #renderCanvas { height: calc(100vh - 56px);} */
}

#loadingScreen { position: absolute; width: 100%; height: 100vh; color: white; font-size: 100px; text-align: left; background-color: rgba(51,51,76,1); z-index: 999; overflow: hidden; }
#loadingScreen .spinner {position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); overflow: hidden;}


#canvasMenu {position: absolute; right: 0; bottom:0; z-index: 997; overflow: hidden; color: #FFFFFF;}

.statistics {position: absolute; top: 45%; z-index: 997; color: #FFFFFF; text-align: center;}
.statistics.person {left: 5%;}
.statistics.opponent {right: 5%;}



#canvasMenu div,
.statistics button { color: rgba(255,255,255,.3);}
.statistics button { border-color: rgba(255,255,255,.3); }
.statistics button.active,
.statistics button:hover,
.statistics button:active { background-color: rgba(255,255,255,.3) !important; border-color: rgba(255,255,255,.3) !important; pointer-events: none;}

.page-menu { display:none; width:100%; height:100vh; position:fixed; z-index:999; overflow:hidden; background:rgba(0,0,0,0.60);}
.page-menu .left  { float:left; width:80%; height:inherit; transition: width 0.4s linear;}
.page-menu .right { float:left; width:20%; height:inherit; background:rgba(0,0,0,.6); transition: width 0.4s linear; position:relative; }
.page-menu .right > .content { overflow-y: auto; height:inherit; max-height:100% !important; }
.page-menu .page-menu-header { padding:2rem; width:100%; text-align:right; font-size:25px; }
.page-menu .page-menu-content { padding:0 2rem 2rem 2rem; text-align: center; }
.page-menu .page-menu-content button,
#canvasMenu button, 
#theGameScreen button { position: relative;}
.page-menu .page-menu-content button span,
#canvasMenu button span,
#theGameScreen button span { position: absolute; top: 0; right: 0.2rem; font-size: .75rem;}
.statistics button:hover,
.statistics button:active,
.statistics button:focus { text-decoration: none; }





#theGameScreen { position: absolute; width: 100%; height: 100vh; color: white; text-align: left; background-color: rgba(0,0,0,0.6); z-index: 998; }
#theGameScreen .textHolder { position: absolute; padding-top:5%; top: 0%; width: 100%; height: 100%; overflow-y: auto; }
#theGameScreen .textHolder .elements { position: relative; }
.form-my { background: transparent; color: #FFFFFF;}

.btnGSstopnjePlay,
.btnGSmrezaPlay,
.btnGSstopnjeNextLevel,
.btnGSstopnjeCancelNextLevel, 
.btnGSJPlay { font-size: 3rem;}
.text-size-1 {font-size: 1rem; }
.text-size-2 {font-size: 2rem; }
.text-size-3 {font-size: 3rem; }
.text-size-4 {font-size: 4rem; }
.text-size-5 {font-size: 5rem; }

.GS-1-mreza,
.GS-1-stopnje,
.GS-2,
.opponentFirst
{ display: none;}


@media (max-width: 1920px) { .page-menu .left  { width:70%;  } .page-menu .right { width:30%; } }
@media (max-width: 1400px) { .page-menu .left  { width:60%;  } .page-menu .right { width:40%; } }
@media (max-width: 1200px) { 
    .page-menu .left  { width:50%;  } 
    .page-menu .right { width:50%;} 
    .statistics {position: absolute; top: 5%;}
}
@media (max-width: 767px) { 
    .page-menu .left  { width:20%;  } .page-menu .right { width:80%;} 
    
    #canvasMenu { bottom: initial; top:0; }
    #canvasMenu button, 
    #canvasMenu div { float: left; width: auto; }
    
    
    .statistics {position: absolute; top: 0%;}
    .statistics.person {left: 0%;}
    .statistics.opponent {left: 65px; right: initial; }
    
    
    #theGameScreen .textHolder {  padding-top:5%;  }
    .btnGSstopnjePlay,
    .btnGSmrezaPlay,
    .btnGSstopnjeNextLevel,
    .btnGSstopnjeCancelNextLevel { font-size: 2rem;}
    
}
@media (max-width: 400px) { .page-menu .left  { width:0%;  } .page-menu .right { width:100%;} }


::webkit-scrollbar { width: 6px; height: 6px;}
::webkit-scrollbar-button { width: 0px; height: 0px;}
::webkit-scrollbar-thumb { }
::webkit-scrollbar-thumb:hover { }
::webkit-scrollbar-thumb:active { }