@font-face {
    font-family: "Lato";
    src: url("/static/font/Lato-Bold.ttf") format("truetype");
}
:root {
    --border-color-1: #5779dd;
    --border-color-2: #e64ca6;
}
body {
    font-family: "Lato";
    color: #eee;
    background-color: black;
    position: absolute!important;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0px;
    overflow: hidden;
    user-select: none;
    z-index: -2;
}
#settings-bar {
    position: absolute;
    top:  15px;
    left: 15px;
    z-index: 1;
    height: 50px;
    width: auto;
}
.settings-icon {
    margin: 5px 5px 5px 5px;
    width: 30px;
    height: 30px;
    outline: none;
}
.settings-icon svg {
    width: 30px;
    height: 30px;
    opacity: 1;
}
.play-icon {
    border-radius: 50%;
    background-color: #00000044;
}
.ogarx-icon {
    outline: none;
}
.ogarx-icon svg {
    color: rgba(238, 238, 238, 0.5)!important;
    fill: rgba(238, 238, 238, 0.5)!important;
    transition: fill 0.25s linear, color 0.25s linear;
    cursor: pointer;
}
.ogarx-icon svg:hover {
    color: rgba(238, 238, 238, 0.9)!important;
    fill: rgba(238, 238, 238, 0.9)!important;
}
.key-value {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 15px;
}
#skins {
    padding: 20px;
    overflow-y: scroll;
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 15px;
    column-gap: 15px;
}
.skin-item {
    width: 100px;
    height: 100px;
    cursor: pointer;
}
.skin-item img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.skin-item .selected-1, #skin-1 {
    border: solid 5px var(--border-color-1);
}
.skin-item .selected-2, #skin-2 {
    border: solid 5px var(--border-color-2);
}
.skin-item .selected-1.selected-2 {
    border: solid 5px #ffffff;
}
.key-value * {
    padding: 8px;
    margin-top: 10px;
    font-size: 18px;
}
.key-value *:nth-child(2n-1) {
    text-align: right;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: #93a7e1!important;
}
#offcanvas-menu {
    background-color: rgba(14, 14, 14, 0.8);
    align-items: center;
    display: flex;
    flex-direction: column;
}
#replay-list {
    max-height: calc(100vh - 320px);
    overflow-y: scroll;
}
#prev-clip, #next-clip {
    cursor: pointer;
    outline: none;
}
.disabled * {
    cursor: not-allowed!important;
    color:rgba(136, 136, 136, 0.5)!important;
}
.replay-item {
    padding: 10px;
}
.replay-item * {
    transition: opacity 0.25s linear;
}
.replay-thumbnail {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: box-shadow 0.25s linear;
    box-shadow: 0px 0px 2px #93a7e1;
}
.replay-thumbnail:hover {
    box-shadow: 0px 0px 5px #93a7e1;
}
.stats-pie {
    margin: auto;
    width: 60%;
    aspect-ratio: 1/1;
}
.stats-pie circle {
    transition: stroke-dasharray 1s linear, stroke-dashoffset 1s linear;
}
.stats-pie text {
    stroke: none;
    fill: #eee;
    text-anchor: middle;
    alignment-baseline: central;
    font-size: 8px;
}
#minimap {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 200px;
    height: 200px;
    background-color: rgba(14, 14, 14, 0.8);
    border: solid 2px#ffffff77;
}
.minimap-node {
    transition: cx 0.25s linear, cy 0.25s linear, r 0.25s linear;
}
.minimap-text {
    text-anchor: middle;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    color: #eee;
    transition: x 0.25s linear, y 0.25s linear, r 0.25s linear;
}
.selectable {
    color: rgba(238, 238, 238, 0.8);
    transition: color 0.1s linear;
    cursor: pointer;
}
.selectable:hover {
    color: #93a7e1;
}
#canvas {
    position: fixed;
    min-width: 100vw;
    min-height: 100vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    object-fit: cover;
}
#hud, #game-over {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    position: absolute;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%,rgba(125,185,232,0) 100%);
}

#game-over span {
    font-size: 1.2em;
}

.fade-in {
    animation: fadeIn ease 0.5s;
}
@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:1; }
}

.fade-out {
    animation: fadeOut ease 0.5s;
}
@keyframes fadeOut {
    0% { opacity:1; }
    100% { opacity:0; }
}

#leaderboard {
    padding: 10px;
    width: 15%;
    height: auto;
    margin: 0;
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 1;
    color: #eee;
    background-color: #00000044;
}
#stats1 {
    position: absolute;
    top: 10px;
    right: 40px;
    z-index: 1;
    color: #eee;
    background-color: #00000044;
}
#stats2 {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 1;
    color: #eee;
    transform: translateX(-50%);
    background-color: #00000044;
}
#stats3 {
    position: absolute;
    top: 10px;
    left: 160px;
    z-index: 1;
    color: #eee;
    background-color: #00000044;
}
.uk-modal-dialog {
    background-color: #000000ee;
}
#ping, #fps, #bandwidth {
    display: inline-block;
    width: 1.5em;
    text-align: left;
}
#linelock {
    display: inline-block;
    width: 6em;
    text-align: left;
}
#mycells {
    display: inline-block;
    width: 2em;
    text-align: right;
}
.uk-notification-message {
    background-color: #111;
}
.text-danger {
    color: red;
}
.text-success {
    color: greenyellow;
}
#leaderboard p {
    margin: 5px;
}
#server-name {
    margin: 0px;
    text-align: left;
}
#chat {
    overflow-y: scroll;
    background-color: #0000007a;
    color: #eee;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 25vw;
    height: 40vh;
    z-index: 1;
}
#chat p {
    margin: 4px;
}
#skin-1, #skin-2 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: auto;
}
#swap-skin {
    padding: 5px;
    background-color: #00000044;
}
#skin-1 {
    transform: translateX(-150px);
}
#skin-2 {
    transform: translateX(150px);
}
#skin-tab {
    min-width: 300px;
}
#skin-input {
    text-align: center;
    width: 300px;
}
#chat-input {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.uk-overlay-default {
    background-color: transparent;
}
.servers {
    width: 100%;
}
.servers span {
    color: #bbb;
}
.servers:hover span {
    color: #eee;
}
input[type="text"], #server-input, .servers {
    margin: auto;
    padding: 5px;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #eee;
    outline: none;
    border: none;
    border-bottom: solid 3px rgba(255, 255, 255, 0.25);
    transition: 0.2s linear;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
input[type="text"]:focus, #server-input:hover, .servers:hover {
    color: #eee;
    background-color: #22222277;
    border-bottom: solid 3px #93a7e1;
}
input[type="color"] {
    -webkit-appearance: none;
    margin-top: 0px;
    padding: 2px;
    width: 15px;
    height: 15px;
    border: none;
    outline: none;
    cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
}
.server-log, .me {
    color:  #93a7e1;
}
#server-input:hover { cursor: pointer; }
button {
    min-width: 100px;
    outline: none;
    padding: 8px;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #eee;
    border: solid 3px rgba(255, 255, 255, 0.25);
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
button:hover {
    border: solid 3px #93a7e1;
}
button:disabled {
    cursor: not-allowed;
    border: solid 3px #444;
}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #00000055; 
}
::-webkit-scrollbar-thumb {
    background: rgba(136, 136, 136, 0.5); 
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(238, 238, 238, 0.6); 
}
select {
    margin: 0;
    padding: 5px 35px 5px 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#render-delay-display {
    pointer-events: none;
    margin-top: -3px;
}

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    padding: 0;
    margin: 0;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background:rgba(136, 136, 136, 0.25); /* Grey background */
    outline: none; /* Remove outline */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}
  
/* Mouse-over effects */
.slider:hover {
    background: rgba(238, 238, 238, 0.3); 
}
  
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 8px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #93a7e1;
    cursor: pointer; /* Cursor on hover */
}
  
.slider::-moz-range-thumb {
    width: 8px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #93a7e1;
    cursor: pointer; /* Cursor on hover */
}

.uk-subnav span {
    font-size: 20px;
}

.signal-bars {  
    height: 26px;
    width: 30px;  
    margin: auto;
    padding: 0px!important;
    display: flex;
    align-items: flex-end;
}

.signal-bars div {
    width: 6px;  
    background-color: #777;
    margin-left: 0px;
    margin-right: 2px;
}

.signal-bars > :nth-child(1) { height: 20%; }
.signal-bars > :nth-child(2) { height: 40%; }
.signal-bars > :nth-child(3) { height: 60%; }
.signal-bars > :nth-child(4) { height: 80%; margin-right: 0px; }

.signal-good .signal-bars > div {
    background-color: #16a085;
    border: thin solid darken(#16a085, 7%);
}

.signal-ok .signal-bars > :nth-child(1), 
.signal-ok .signal-bars > :nth-child(2), 
.signal-ok .signal-bars > :nth-child(3) {
    background-color: #f1c40f;
    border: thin solid darken(#f1c40f, 7%);
}

.signal-bad .signal-bars > :nth-child(1), 
.signal-bad .signal-bars > :nth-child(2) {
    background-color: #e74c3c;
    border: thin solid darken(#e74c3c, 20%);
}

.signal-worse .signal-bars > :nth-child(1) {
    background-color: #a01303;
    border: thin solid darken( #a01303, 20%);
}