body {
    font-family:  Verdana;
    font-size: 18px;
    background-color: #FAFAFA;


    /* Allow canvas to hit the edges of the browser viewport. */
    margin: 0;
}

#screen canvas {
    margin: auto;
    /* Hide the gap for font descenders. */
    display: block;
}

.customkeys  {
    font-size:18px;
    width:90px;
    border-color: #4CAF50;
}

.chatinput-group {
    position: absolute;
    top: 650px;
    left: 50px;
}

div {
    font-size: 18px;
}

select {
    -webkit-appearance: menulist-button;
    font-size: 18px;
    height: 32px;
}

.center{
    text-align:center;
}

.center-right{
    display: inline-block; 
    vertical-align: top;
    text-align:right;
}

.center-left{
    width:20%;
    display: inline-block;
    vertical-align: top;
}

.buy-cash-table td {
    padding: 0 8px
}

input[type=radio] {
    width: 100%;
    height: 25px;
}

input {
    height: 28px;
    font-size: 18px;
}

footer {
	bottom:0;
	width:100%;
    font-family:  Courier;
	text-align: center;
	font-size:16px;
}

#message, #textbox{
    border-color: #4CAF50;
}

#nav {
    border: 1px solid #ccc;
    border-width: 1px 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center; /* « The magic. */
}

#nav li a {
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	font-weight: bold;
	color: white;
    background-color: black;
	border-right: 1px solid #ccc; }
#nav li a:hover {
	color: black;
	background-color: #C1FFC1; }

button {
    font-size: 18px;
	color:black;
	background-color:#F9F9F9;
	height:32px; 
	font-size: 18px;
	text-align: center;
	border: 1px solid green;
	padding: 0 8px;
	font-family:  Verdana;
	/* rounded corners */
	-webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
}
button:hover {
  background-color: #C1FFC1;
  border: 1px solid green;
}

button:disabled {
  background-color: green;
  color: white;
}

table.tableCenter {
    width:80%;
    margin-left:10%; 
    margin-right:10%;
    border: 3px solid green;
    border-collapse: collapse;
}

table.tableCenter th {
    font-size: 18px;
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid green;
}

table.tableCenter td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid green;
}

table.table2 {
    font-size: 16px;
    height: 37%;
	overflow:auto;
	float:left;
    border: 1px solid green;
    border-collapse: collapse;
    display: block;
    height: 500px;
    overflow-y: scroll;
}

table.table2 thead th {
    position: sticky; /* make the table heads sticky */
    top: 0px; /* table head will be placed from the top of the table and sticks to it */
}

table.table3 {
    font-size: 16px;
    height: 37%;
	overflow:auto;

    border: 1px solid green;
    border-collapse: collapse;
    display: block;
    height: 500px;
    overflow-y: scroll;
}

table.table3 thead th {
    position: sticky; /* make the table heads sticky */
    top: 0px; /* table head will be placed from the top of the table and sticks to it */
}

table.table4, table.table10 {
    font-size: 16px;
    border: 1px solid green;
    border-collapse: collapse;
}

table.table1 th, table.table2 th, table.table3 th, table.table4 th, 
table.table5 th, table.table6 th, table.table7 th, table.table8 th, 
table.table9 th, table.table10 th {
    background-color: #4CAF50;
    color: white;
	padding: 8px;
    text-align: left;
    border-bottom: 1px solid green;
}
table.table1 td, table.table2 td, table.table3 td, table.table4 td,
table.table5 td, table.table6 td, table.table7 td, table.table8 td,
table.table9 td, table.table10 td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid green;
}

table.table1 tr:hover, table.table2 tr:hover, table.table3 tr:hover, 
table.table4 tr:hover, table.table5 tr:hover , table.table6 tr:hover,
table.table7 tr:hover, table.table8 tr:hover, table.table9 tr:hover{
    background-color:#C1FFC1;
    color: black;
}

a{
    --color:blue;
    --hoverColor: black;
    --visitedColor: purple; 
    color: var(--color);
}

a:hover {color:var(--hoverColor);}
a:visited:hover {color:var(--hoverColor);}
a:visited {color:var(--visitedColor);}

.slider {
    -webkit-appearance: none;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.9;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  
  .slider:hover {
    opacity: 1;
  }

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #39FF14;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #39FF14;
    cursor: pointer;
}

input[type='radio'] { 
    accent-color: #39FF14; 
}

#gunBackgroundImageProfile {
    background:rgba(0, 255, 0, 0.3);
    position:absolute;
    top:700px;
    right: 140px;
    width: 310px;
    height: 80px;
}


#gunBackgroundImage {
    background:rgba(0, 255, 0, 0.3);
    position:absolute;
    top:297px;
    right: 100px;
    width: 310px;
    height: 80px;
}

@media (min-width:1080px) and (max-width:1889px)   {
    #mapImageIcon{
        position:absolute;
        top:60px;
        right: 1px;
        width: 310px;
        height: 80px;
    }

    #InGameRoomList{
        background:rgba(0, 255, 0, 0.3);
        position:absolute;
        top:230px;
        right: 36px;
        width: 275px;
        height: 200px;
    }
}


@media (min-width: 1891px)  {
    #mapImageIcon{
        position:fixed;
        top:270px;
        right: 100px;
        width: 310px;
        height: 80px;
    }

    #InGameRoomList{
        background:rgba(0, 255, 0, 0.3);
        position:fixed;
        top:440px;
        right: 135px;
        width: 275px;
        height: 200px;
    }
}

@media (max-width: 899px) {
    .right-index, .left-index  {
        display: none !important;
    }
}

@media (min-width:900px) and (max-width:1099px)   {
    .right-index {
        position: absolute;
        bottom: 150px;
        left: 680px;
      }
      .left-index {
        position: absolute;
        bottom: 150px;
        left: 50px;
      }	
}

@media (min-width:1100px) and (max-width:1399px)   {
    .right-index {
        position: absolute;
        bottom: 150px;
        left: 880px;
      }
      .left-index {
        position: absolute;
        bottom: 150px;
        left: 150px;
      }	
}

@media (min-width:1400px) and (max-width:1889px)   {
    .right-index {
        position: absolute;
        bottom: 150px;
        left: 1060px;
      }
      .left-index {
        position: absolute;
        bottom: 150px;
        left: 220px;
      }	
}

@media (min-width: 1891px) and (max-width:1970px)    {
    .right-index {
        position: absolute;
        bottom: 150px;
        left: 1070px;
      }
      .left-index {
        position: absolute;
        bottom: 150px;
        left: 285px;
      }	
}

@media (min-width: 1971px) {
    .right-index {
        position: absolute;
        bottom: 150px;
        left: 1340px;
      }
      .left-index {
        position: absolute;
        bottom: 150px;
        left: 285px;
      }	
}