@font-face {
  font-family: 'Josefin Sans';
  src: url('fonts/josefinsans-regular-webfont.woff2') format('woff2'),
    url('fonts/josefinsans-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* !important is needed sometimes */
::-webkit-scrollbar {
  width: 12px !important;
}

/* Track */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
  -webkit-border-radius: 10px !important;
  border-radius: 10px !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px !important;
  border-radius: 10px !important;
  background: #a5702c !important; 
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; 

}
::-webkit-scrollbar-thumb:window-inactive {
  background: #9c6a2e !important; 
}


#shared{
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  top: calc( 100vh / 2 + 80px );

}

*{
  overflow-x: none !important;
  overflow-y: none !important;

  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif !important;
}

#load{
  color: white;
  padding-top: 32px;
  position: absolute;
  top: 0px;
}


#select:hover{
  cursor: pointer;
}

#gamed{
  width: 100%;
  height: 100%;
  background: red;
  z-index: 9999999;
  display: block !important;
  overflow: none !important;
}

canvas{
  z-index: 0 !important;
  overflow: none !important;

}

#full{
  position: absolute;
  z-index: 9999;
  margin-left: 0px !important;
  left: 0px;
  top: 0px;
  height: 100px;
  display: none;
  overflow: none !important;
}
#exit{
  position: absolute;
  z-index: 9999;
  margin-left: 0px !important;
  left: 0px;
  top: 100px;
  height: 100px;
  display: none;
  overflow: none !important;
}

body {
  margin: 0;
  padding: 0;  
  height: 100vh;
  width: 100%;

  display: flex;           /* establish flex container */
  flex-direction: column;  /* make main axis vertical */
  justify-content: center; /* center items vertically, in this case */
  align-items: center;     /* center items horizontally, in this case */
  background: var( --gray-0 ); 
  overflow: none !important;
}

body {
  margin: 0;
  padding: 0px;  
  height: 100vh;
  width: 100%;

  background: var( --gray-0 );

  overflow: none !important;
}


#game{

  display: none;
  overflow: none !important;
}

.desktop{
  width: 960px;
  height: 704px;  

  border: 0px solid var( --gray-1 );
  border-radius: 2px;
  overflow: none !important;
}

.mobile{
  width: 100vw;

  height: 100vh;
  border: 0px solid var( --gray-1 );
  border-radius: 2px;
  overflow: none !important;
}

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}


.serialContent{

  z-index: 9999;
  background: var( --gray-0 );
  padding: 55px;


}

.serialBox{
  border-radius: 4px;
  z-index: 9999;
  background: white;
  font-weight: 400;
  padding: 5px;
}

:root{

  --violet-0: #0E1215;
  --violet-1: #151925;
  --violet-2: #242844;

  --gray-0: #0c1017;
  --gray-1: #171f2f;  
  --gray-2: #6680FF;

  --black: #090A10;
  --white: #FFFFFF;  

  --green: #a1909c; 

}


#loading{

  z-index: 9999;
  position: absolute;

  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;

  overflow: none !important;
}


/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.boxLanguages {
  position: absolute;
  z-index: 1000;
  color: blue;
  /*background: rgba(0, 0, 0, 0.2);*/
  padding: 30px;
  display: none;
  margin-top: -126px;
}

#select{
  font: 'Arial Black';
  font-size: 28px;
  font-weight: "bold";
  border: white 2px solid;
  border-radius: 5px;
  /* stroke-thickness = 6; */
  color: black;
  background: var( --green );
  outline: none;
  padding-left: 5px;
  padding-top:4px;
}
.option{
  color: 'red !important';
}

.modal {
  background: #fff;
  width: 200px;
  min-width: 200px;
  height: 80px;
  min-height: 60px;
  padding-bottom: 20px;
  border-radius: 8px;
  position: absolute;
  z-index: 100;
  display: none;
  background: #0e1215
}


#modalText{
  margin-bottom: 6px !important;

}

.modal-content {
  text-align: center; 
  padding-top: 18px;
  margin-left:-6px; 
}

button{
  cursor: pointer;
  margin-left:6px; 
}

#btn-i{
  margin-top:10px;
  margin-left:65px; 
}

#modalText {
  color: #fff;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif !important;
  font-size: 14px;  
  margin-left:6px; 
}

#noShowDiv{
  margin-top: 4px; 
  margin-left:6px; 
}
#noShow{  
  margin-top: 4px;  
  font-size: 11px; 
  line-height:12px;
  float: left;
  margin-left: 50px;  
}
#noShowLabel{
  color: white !important;
  font-size: 11px;
  line-height:12px;
  margin: 6px !important;
  float: left;
}


.noClick{
  pointer-events: none;
}

.noselect {
  -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 */
}

.x{
  position: absolute;
  z-index: 1001;
  width: 66px;
  height: 66px;  
  background: url("assets/x.png") no-repeat left center;
  background-size: 66px 66px;  
  cursor: pointer;  
  display: block;
  margin-left: 188px;
  margin-top: 20px;
}


.placas{
  display: none;

}

#content{
  width: 320px;
  height: 160px;   
  text-align: left; 
  overflow-y:auto;
  margin-top: 60px;
  margin-left: 60px; 
  font-size: 18px;  
  padding-bottom:13px;
  line-height: 1.2em;
  text-align: justify;
  padding-right: 8px;
}

#placa{
  position: absolute;

  z-index: 1000;
  width: 448px;
  height: 320px; 
  background: url("assets/placa.png") no-repeat left center;
  background-size: 448px 320px; 

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

}