:root{
    color-scheme: only light;
    --main-color: rgb(0, 150, 255);
    --txt-color: rgb(67, 67, 67);
    --detail-color: rgb(255, 204, 77);
}
*{
    margin: 0px;
    padding: 0px;
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   color: var(--txt-color);
}
html{
    height: 100%;
    overscroll-behavior-y: none;
    overflow: hidden
}
input{
    -webkit-user-select: text; /* Chrome, Opera, Safari */
    -moz-user-select: text; /* Firefox 2+ */
    -ms-user-select: text; /* IE 10+ */
    user-select: text; /* Standard syntax */
}
body{
    background-color: var(--main-color);
    overscroll-behavior-y: contain;
    height: 100%;
    width: 100%;
    overscroll-behavior-y: none;
    position: fixed;
    overflow: hidden;
}
#game_select_footer{
    background-color: rgb(41, 40, 40);
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 6em;
    display: flex;
    align-items: center;
}
#app{
    max-width: 700px;
    height: 100%;
    overflow-x: hidden;
    /*background-color:#C0E1FF !important;background-image:url('http://i.imgur.com/8zsjgyF.png'),url('http://i.imgur.com/wC1HUtA.png'),url('http://i.imgur.com/j5ekn4f.png');-webkit-animation:schnee 25s linear infinite;-moz-animation:schnee 25s linear infinite;-ms-animation:schnee 25s linear infinite;animation:schnee 25s linear infinite;*/
}
/*@keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}100%{background-position:500px 1000px,400px 400px,300px 300px}}@-moz-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}100%{background-position:500px 1000px,400px 400px,300px 300px}}@-webkit-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}100%{background-position:500px 1000px,400px 400px,300px 300px;}}@-ms-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}100%{background-position:500px 1000px,400px 400px,300px 300px}}*/

.modal{
    max-width: 600px !important;
}
#index_version_number{
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 1em;
    font-size: 1.2em;
    font-weight: bold;
    opacity: 0.4;
}

#gamemode_info{
    width: 100%;
    background: var(--txt-color);
    color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: .5em;
    font-weight: bold;
    font-size: 1.3em;
}

@media only screen and (min-width: 700px) {
    body{
        display: flex;
        justify-content: center;
    }
    #app{
        display: block;
        position: relative;
        max-width: 700px;
        min-width: 700px;
        height: 100%;
        border-color: white;
        border-width: 10px;
        border-style: solid;
        border-radius: 10px;
    }
    #game_select_footer{
        background-color: rgb(41, 40, 40);
        position: absolute;
        display: inline-block;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 6em;
        display: flex;
        align-items: center;
        max-width: 680px;
    
    }
    #gamemode-list{
        overflow-x: hidden;
        height: 100%;
        scrollbar-color:grey white;
        scrollbar-width: thin;
    }
    #gsspacer{
        display: none;
    }
}


/*-------------------------------Scrolbar--------------------------- */
/* width */
::-webkit-scrollbar {
    width: 8px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: grey; 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #646464; 
  }
/*-------------------------------Scrolbar--------------------------- */

input[type=text]:focus {
    border-bottom: 1px solid var(--detail-color) !important;
    box-shadow: 0 1px 0 0 var(--detail-color)!important;
}
input[type=email]:focus {
    border-bottom: 1px solid var(--detail-color) !important;
    box-shadow: 0 1px 0 0 var(--detail-color)!important;
}
input:focus + label {
    color: var(--txt-color) !important;
}
.btn{
    background: var(--detail-color) !important;
    color: var(--txt-color) !important;
}
[type="checkbox"].filled-in:checked+span:not(.lever):after {
    top:0;
    width:20px;
    height:20px;
    border:2px solid var(--main-color) !important;
    background-color: var(--main-color) !important;
    z-index:0
   }

#update_col{
    background: white;
    position: absolute;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    padding: 1.2em;
    font-weight: bold;
    font-size: 1.2em;
    z-index: 1;
}
#update_row{
    bottom: 100px;
    position: absolute;
    width: 100%;
    max-width: 680px;
    opacity: 0;
    transition: .5s;
}
#update_row.show{
    bottom: 150px;
    opacity: 1;
}