div {
     position: absolute;
     font-family: "Arial";
}

body {
    left:0%;
    width:100%;
    top:0%;
    height:100%;
}

#loginScreen {
    left:0%;
    width:100%;
    top:0%;
    height:100%;
    background-image: url('textures/chess.jpeg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

#loginScreenBox {
    background-color: rgb(255, 255, 255, 0.85);
    height:3.5in;
    width:3.5in;
    padding:0.5in;
    font-weight:bold;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.edit {
    box-sizing: border-box;
    border: none;
    padding:0.05in;
    border-style: solid;
    border-width: 1px;
    font-family: "Arial";
    color:black;
}

.button {
    border: none;
    padding:0.05in;
    border-style: solid;
    border-width: 1px;
    font-family: "Arial";
    color:black;
    background-color: rgb(200, 200, 200);
}

#loggedScreen {
    left: 0%;
    top:  0%;
    width: 100%;
    height: 100%;
    background-image: url('textures/chess.jpeg');
    position:absolute;
}

#loggedScreenTop {
    left:0%;
    top:0%;
    width:100%;
    height:0.7in;
    padding-left:0.05in;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    z-index: 2;
}

#loggedScreenMenu {
    left:0%;
    top:0.7in;
    width:10%;
    height:100%;
    background-color: rgb(255, 255, 255, 0.75);
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    z-index: 2;
}

#loggedScreenContent {    
    overflow: scroll;
    background-color: #e0d6b4;
    left:10%;
    top:0.7in;
    width:90%;
    height:100%;
    z-index: 1;
}

#loggedScreenMenu th {
    padding: 0.05in;
    /*border-collapse: collapse;
    border: 1px solid black;*/
}
#loggedScreenMenu td {
    padding: 0.05in;
    /*border-collapse: collapse;
    border: 1px solid black;*/
}

#loggedScreenMenu table {
  border: 1px solid black;
  border-collapse: collapse;
}

#loggedScreenPlay {
    left:0%;
    top:0%;
    width:100%;
    height:100%;
}

#loggedScreenNewGame {
    height: 3in;
    width: 5in;
    padding:0.25in;
    font-weight:bold;
    position: relative;
    left: 0;
    top: 5%;
    right: 0;
    left: 0;
    margin: auto;
    background-color: darkgray;
    font-size:150%;
    z-index: -400;
}

#loggedScreenGameListSpace {
    background-color: #e8fff6;
    left:10%;
    top:5%;
    width:80%;     
    border-radius:2%;
}

#loggedScreenListGames {    
    background-color: #e0d6b4;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    left:0%;
    top:0%;
    width:100%;
    height:100%;
    overflow: scroll;
    padding: 0%;
}

#loggedScreenGameCount {
    text-align: center;
}

#loggedScreenGameList {    
    width:100%;
    table-layout: fixed;
    text-align: center;
}
#loggedScreenListGames tr {
    transition: 0.3s;
}
#loggedScreenListGames th {
    padding: 2%;
} 
#loggedScreenListGames td {
    padding: 1.4%;
} 

#loggedScreenListGames tr.gameListOnMouseOver {
    background-color: rgb(198, 214, 228);
}

#loggedScreenListGames tr.gameListOnMouseDown {
    background-color: gray;
}


#loggedScreenListGames table {
    border-bottom: 1em solid #e0d6b4;
    border-collapse: collapse;
    border-radius:2%;
    overflow:hidden;
}

#gameListHead {
    background-color: rgb(178, 213, 201);
    font-size: 130%;
    overflow-wrap: break-word;
    padding:1px;
    line-height: 150%;
}

/*.gameListOnMouseOver {
    background-color: rgb(198, 214, 228);
}

.gameListOnMouseDown {
    background-color: gray;
}*/

#loggedScreenRightMenu {
    left:85%;
    top:0%;
    width:15%;
    height:100%;
    background-color: rgb(255, 255, 255, 0.0);
    z-index:1;
    padding:0.1in;
}

#CreateGameButton {
    /*position: absolute;
    text-align: center;
    left:35%;
    width: 30%;
    top:65%;
    height: 15%;*/
    text-align: center;
    position: absolute;
    left:50%;
    height: 0.5in;
    width: 1in;
    transform: translateX(-50%);
}

#CreateGameDetailsWhiteLabel {
    /*position: absolute;
    top: 50%;
    left: 10%;
    width: 15%;
    height: 15%;*/
    padding-left: 5%;
    position: relative;
}

#CreateGameDetailsBlackLabel {
    /*position: absolute;
    top: 50%;
    left: 75%;
    width: 15%;
    height: 15%;*/
    position: relative;
}

#CreateGameDetailsWhiteImg {
    height: 0.5in;
    width: 0.5in;
    position: relative;
}

#CreateGameDetailsBlackImg {
    height: 0.5in;
    width: 0.5in;
    position: relative;
}

#CreateGameMessage {
    position: relative;
    text-align: center;
    padding: 0px;
    /*margin: 0px;*/
    margin-top: 0.8in;
    animation-name:"";
    animation-iteration-count: initial;
    animation-play-state: running;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}

[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

[type=radio] + img {
  cursor: pointer;
}

[type="radio"]:checked + img {    
    transition: 0.1s;

    outline: 2px solid #f00;
}

#CreateGameDetailsOtherUser {
    /*text-align: center;
    width: 95%;*/
    margin-left:2.5%;
}

@keyframes createGameMessageAnim {
    0% { color: black; }
    100% { color: red; }
}