.alert-message {
    background-color: rgba(0, 0, 0, 0.75);
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5vmin;
    font-size: 5vmin;
    padding: 1vmin 2vmin;
    color: white;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
}.btn,
.btn-sml,
.btn-med {
    margin: 1vmin;
    display: inline-block;
    border: solid 1px #ffffff;
    font-size: 3.5vmin;
    padding: 0.25vmin 1vmin;
    cursor: pointer;
}

.btn-sml {
    font-family: 'Inconsolata', sans-serif;
    font-size: 1.75vmin;
    margin: 0.5vmin 0;
    padding: 0.25vmin 0.55vmin;
}

.btn-med {
    font-family: 'Bombardier', sans-serif;
    padding: 0.5vmin 1vmin;
    font-size: 3vmin;
}

.btn:hover,
.btn-sml:hover,
.btn-med:hover {
    background-color: #03c95f;
}

.btn-neg:hover {
    background-color: #b01703;
}

.btn-selected {
    background-color: #03b053;
    cursor: default;
}

.btn-selected:hover {
    background-color: #03b053;
}

.btn-disabled {
    color: #909090;
    border-color: #909090;
    cursor: default !important;
}

.btn-disabled:hover {
    background: none !important;
}
.confirmation-parent {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
}

.confirmation-parent .confirmation-child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #101010;
    padding: 2.5vmin;
    border: solid 1px #ffffff;

}

.confirmation-parent .confirmation-title {
    font-size: 6.5vmin;
    margin-bottom: 2.5vmin;
    color: #ffffff;
    text-align: center;
}

.confirmation-parent .confirmation-action-container {
    text-align: center;
}

.confirmation-parent .confirmation-action {
    font-size: 5vmin;
    padding: 2vmin 2.5vmin;
    border: solid 1px;
    cursor: pointer;
    display: inline-block;
}

.confirmation-parent .confirmation-action-confirm {
    margin-left: 15%;
    color: #03c95f;
}

.confirmation-parent .confirmation-action-confirm:hover {
    color: #ffffff;
    background-color: #03c95f;
    border-color: #03c95f;

}

.confirmation-parent .confirmation-action-deny {
    margin-right: 15%;
    color: #ea1d02;
}

.confirmation-parent .confirmation-action-deny:hover {
    color: #ffffff;
    background-color: #ea1d02;
    border-color: #ea1d02;
}.connection-menu {
    background: #202020;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 5vmin;
    position: absolute;
}

.connection-menu .stats-parent {
    display: none;
}

.connection-menu .last-match-statistics {
    font-family: 'Inconsolata', sans-serif;
    font-size: 2.5vmin;
}

.connection-menu .last-match-statistics .stats-large {
    font-size: 3vmin;
}
.connection-menu .last-match-statistics .stats-title {
    font-size: 3.5vmin;
}
.connection-menu .last-match-statistics .stats-pad {
    margin-bottom: 1vmin;
}

.connection-menu .disconnected-reason {
    font-family: 'Inconsolata', sans-serif;
    font-size: 2.5vmin;
    color: #ffd700
}

.connection-menu-section {
    display: none;
    padding: 2.5vmin;
}

.connection-menu-content-container {
    display: flex;
    align-items: center;
    min-width: 60vw;
    justify-content: center;
}

.connection-menu-content-container-with-multiple {
    justify-content: space-around;
}

.connection-menu .recording-start-btn {
    position: absolute;
    right: 0;
    top: 6.5vmin;
    font-size: 3.5vmin;
    background-color: #03b053;
    color: #ffffff
}

.connection-menu .recording-start-btn:hover {
    background-color: #03c95f;
    border-color: #ffffff;
    color: #ffffff;
}.conversation-parent {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    display: none;
}

.conversation-parent .conversation-container {
    display: inline-flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50vmin;
    height: 50vmin;
    text-align: center;
    font-family: 'Inconsolata', sans-serif;
    color: #ffffff;
    background: #101010;
    border: solid 1px #ffffff;
    font-size: 1.75vmin;
}

.conversation-parent .conversation-header-container {
    font-size: 3.5vmin;
    height: 3.75vmin;
    border-bottom: solid 1px #ffffff;
}

.conversation-parent .conversation-close {
    position: absolute;
    right: 0.5vmin;
}

.conversation-parent .conversation-close:hover {
    cursor: pointer;
    color: #b01703;
}

.conversation-parent .conversation-message-container {
    padding: 1vmin 1vmin 0 1vmin;
    height: 41.75vmin;
    overflow: auto;
}

.conversation-parent .conversation-message-content-container {
    margin: 1vmin 0;
    text-align: left;
}

.conversation-parent .conversation-message-content-container:last-child {
    margin-bottom: 1vmin;
}

.conversation-parent .conversation-message-content-container:first-child {
    margin-top: 0;
}

.conversation-parent .conversation-message-content-container-sent {
    text-align: right;
}

.conversation-parent .conversation-message-content {
    padding: 1vmin;
    background-color: #a0a0a0;
    color: #000000;
    display: inline-block;
    max-width: 50%;
}

.conversation-parent .conversation-message-content-sent {
    background-color: #ffffff;  
}

.conversation-parent .conversation-new-message-container {
    border-top: solid 1px #ffffff;
    display: flex;
    height: 4.5vmin;
}

.conversation-parent .conversation-new-message {
    background: none;
    font-size: 2vmin;
    border: none;
    outline: none;
    padding: 0.25vmin 0.5vmin;
    font-family: 'Inconsolata', sans-serif;
    color: #ffffff;
    flex-grow: 1;
}

.conversation-parent .converstaion-new-message-send {
    border: solid 1px;
    padding: 0.25vmin 0.5vmin;
    margin: 1vmin;
}

.conversation-parent .converstaion-new-message-send:hover{
    cursor: pointer;
    background-color: #03b053;
}.create-world-mode-toggle-parent{
    top: 100px;
} 
.create-world-mode-toggle{
    background-color: gold;
    border: solid 2px white;
    color: black;
    border-bottom: none;
    padding: 10px;
    font-family: 'Inconsolata', sans-serif;
    font-size: 2vmin;
    cursor: pointer;
}
.create-world-mode-toggle:last-child{
    border-bottom: solid 2px white;
}

.create-world-toggle-enabled {
    background-color: slateblue;
    color: white;
}.currency-store-container {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
}

.currency-store-container .currency-store {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #101010;
    border: solid 1px #ffffff;
    padding: 2.5vmin;
    max-height: 90vh;
    overflow: auto;
}

.currency-store-container h2 {
    font-size: 7.5vmin;
    margin: 0 0 2.5vmin 0;
}

.currency-store-container .currency-store-option-container {
    display: flex;
    font-family: 'Inconsolata', sans-serif;
    padding: 2.5vmin 0 2vmin 0;
}

@media only screen and (max-width: 1300px) {
    .currency-store-container .currency-store-option-container {
        flex-direction: column;
        align-items: center;
    }
}

.currency-store-container .currency-store-option {
    border: solid 1px #ffffff;
    width: 15vw;
    margin: 1vmin;
    padding: 2.5vmin 0;
    min-width: 385px;
}

.currency-store-container .currency-store-option-img {
    height: 10vmin;
}

.currency-store-container .currency-store-option-title {
    font-size: 3.5vmin;
}

.currency-store-container .currency-store-option-price {
    font-size: 2.25vmin;
    color: #c0c0c0;
    margin-bottom: 1vmin;
}

.currency-store-container .currency-store-title-low {
    color: #ffec80;
}

.currency-store-container .currency-store-title-med {
    color: #ffe033;
}

.currency-store-container .currency-store-title-high {
    color: #e6c300;
}

.currency-store-container .currency-store-option-buy {
    display: inline-block;
}

.currency-store-container .buy-with-paypal {
    margin-bottom: 1vmin;
}

.currency-store-container .currency-store-crypto-note {
    font-family: 'Inconsolata', sans-serif;
    font-size: 1.75vmin;
    margin-bottom: 2.5vmin;
    color: #03c95f;
}

.payment-success {
    display: none;
    z-index: 10000;
    background: white;
    position: absolute;
    top: 2.5vmin;
    left: 50%;
    background: #101010;
    color: #f0f0f0;
    transform: translateX(-50%);
    text-align: center;
    padding: 2.5vmin;
    border: solid 5px #03c95f;
}

.payment-success .payment-success-header {
    font-size: 3.5vmin;
    margin: 0 0 1.5vmin 0;
}
.payment-success .payment-success-paypal,
.payment-success .payment-success-crypto {
    font-size: 1.75vmin;
    margin-bottom: 0.5vmin;
    display: none;
}

.payment-success .payment-success-general {
    font-size: 1.75vmin;
}.custom-lobby-parent {
    background-color: rgba(0, 0, 0, 0.25);
    position: absolute;
}

.custom-lobby-parent .custom-lobby-title {
    font-size: 5vmin;
}

.custom-lobby-parent-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2.5vmin;
    border: solid 1px #ffffff;
    background-color: #101010;
}

.custom-lobby-parent .custom-lobby-create-parent,
.custom-lobby-parent .custom-lobby-join-parent {
    display: none;
    font-size: 2.5vmin;
    margin: 2.5vmin 0;
}

.custom-lobby-parent .custom-lobby-code {
    background: none;
    font-size: 2.5vmin;
    border: solid 1px #ffffff;
    outline: none;
    padding: 0.5vmin 0.25vmin;
    color: #ffffff;
    font-family: 'Bombardier', sans-serif;
    text-transform: uppercase;
}

.custom-lobby-parent .tooltip {
    display: block;
}

.custom-lobby-parent .custom-lobby-code-err {
    color: #b01703;
    font-size: 2vmin;
    margin-top: 1vmin;
    display: inline-block;
}/*Debug Panel*/
.debug-panel{
    width: 150px;
    font-family: 'Inconsolata', sans-serif;
}
.debug-panel .debug-data{
    color: white;
    font-size: 12px;
}
.device-block-parent {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #101010;
}

.device-block-parent .device-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.device-block-parent .device-block-text {
    color: #ffffff;
    font-family: 'Inconsolata', sans-serif;
    font-size: 3.5vmin;
}

.device-block-parent .btn {
    font-size: 6.5vmin;
    color: #ffffff;
}.dropdown-parent {
    position: relative;
    cursor: pointer;

}

.dropdown-container {
    display: none;
    position: absolute;
    top: 100%;
    width: 100%;
    background-color: #101010;
    z-index: 1;
    overflow: auto;
}/*Game Menu*/
.game-menu{
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
}
.game-menu .game-menu-options{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.download-options{
    background: #222222;
}

.download-options .options-parent{
    display: inline-grid;
    grid-template-columns: auto auto;
    justify-items: left;
    grid-gap: 5px 5px;
    font-size: 3vmin;
}

.download-options .option-title{
    justify-self: right;
}

.download-options .option-value{
    outline: none;
    background: none;
    padding: 0.5vmin 1vmin;
    font: 3vmin 'Bombardier', sans-serif;
    color: #ffffff;
    border: solid 1px;
    margin-bottom: 3vmin;
}

.download-options .menu-error{
    font-size: 3vmin;
    color: red;
}

.game-timer {
    position: absolute;
    display: none;
    top: 2.5vmin;
    right: 26vmin;
    font-size: 3vmin;
    border-bottom: solid 1px #ffffff;
    color: #ffffff;
    align-items: center;
    font-family: 'Inconsolata', sans-serif;
}

.game-timer .game-timer-icon {
    width: 3.5vmin;
    height: 3.5vmin;
}

.game-timer .game-timer-text {
    padding-left: 0.25vmin;
    padding-right: 0.5vmin;
}/* GUI */
.gui{
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0; /* Generates stacking context for GUI*/
}
.gui .gui-element{
    display: none;
    position: absolute;
}

.gui .shield-bar-parent,
.gui .health-bar-parent,
.gui .ram-bar-parent {
    box-sizing: border-box;
    bottom: 2.5vh;
    width: 33vw;
    height: 2.5vh;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.25);
    border: solid 1px #ffffff;
}

.gui .shield-bar-parent {
    bottom: 5.5vh;
}

.gui .ram-bar-parent {
    height: 1vmin;
    bottom: 1vmin;
}

.gui .shield-bar,
.gui .health-bar,
.gui .ram-bar {
    height: 100%;
}

.gui .health-bar {
    background-color: #00ff00;
}

.gui .shield-bar {
    background-color: #0095d8;
}

.gui .ram-bar {
    background-color: #ffc107;
}

.gui .ammo-display-container {
    bottom: 2.5vmin;
    right: 2.5vmin;
    height: 10vmin;
    width: 10vmin;
}

.gui .ammo-count {
    font-size: 5vmin;
    position: absolute;
    color: #ffffff;
    text-align: center;
    width: 100%;
    text-align: center;
    line-height: 10vmin;
    vertical-align: center;
}

.gui .ammo-display-container svg {
    transform: rotate(-90deg);
}

.gui .killfeed-container {
    width: 25vw;
    max-height: 25vh;
    right: 2.5vmin;
    top: 7.5vmin;
    color:  #ffffff;
    font-size: 2vmin;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

.gui .killfeed-message {
    height: 2.5vh;
    font-family: 'Inconsolata', sans-serif;
    font-weight: bold;
    transition: opacity 0.5s ease;
}

.gui .chat-container,
.gui .chat-preview-container {
    z-index: 1;
    width: 25vw;
    bottom: 2.5vmin;
    left: 2.5vmin;
    color: #ffffff;
    font-size: 2.5vmin;
    font-family: 'Inconsolata', sans-serif;
}

.gui .chat-container {
    flex-direction: column;
}
.gui .chat-preview-container {
    bottom: calc(2.5vmin + 2.5vh);
}

.gui .chat-message {
    transition: opacity 0.5s ease;
}

.gui .chat-container .chat-input {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    border-bottom: solid 1px #ffffff;
    outline: none;
    color: #ffffff;
    height: 2.5vh;
    font-size: 2.5vmin;
    box-sizing: border-box;
    font-family: 'Inconsolata', sans-serif;
}

.gui .joystick-container {
    bottom: 0;
    height: 25vmin;
    width: 25vmin;
    position: absolute;
}

.gui .player-list {
    position: absolute;
    left: 50%;
    top: 5vh;
    transform: translateX(-50%);
    font-family: 'Inconsolata', sans-serif;
    font-size: 2.5vmin;
    color: #ffffff;
    padding: 1vmin;
    background-color: rgba(0, 0, 0, 0.75);
}

.gui .player-list-title {
    font-weight: bold;
    font-size: 3vmin;
    text-align: center;
    border-bottom: solid 1px #ffffff;
    margin-bottom: 1vmin;
}

.gui .player-list-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 0.5vmin 2vmin;
}
.gui .player-list-entry {
    padding-bottom: 0.5vmin;
}

.gui .player-list-entry:last-child {
    padding-bottom: none;
}

.gui .game-tips {
    left: 50%;
    transform: translateX(-50%);
    bottom: 5vh;
    border: solid 1px #ffffff;
    width: 33vw;
    height: 25vh;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.65);
}

.gui .game-tips-title {
    display: inline-block;
    font-size: 3.5vmin;
    margin: 0.5vmin 0 0 1vmin;
}

.gui .game-tips-content {
    text-align: center;
    font-size: 2.5vmin;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}.gui .joystick-container {
    background-color: #03b053;
    border-radius: 100%;    
    width: 15vmin;
    height: 15vmin;
    left: 5vmin;
    bottom: 5vmin;
}

.gui .joystick {

    background-color: #101010;
    border-radius: 100%;
    cursor: pointer;
    position: absolute;
    height: 50%;
    width: 50%;
    left: 25%;
    top: 25%;
}.loading-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    z-index: 1;
    background: #202020;
    pointer-events: none;
    transition: opacity 1s;
}
.loading-screen * {
    box-sizing: border-box;
}

.loading-screen .loading-screen-header {
    margin-top: 2.5vh;
    max-width: 1250px;
    max-height: 512px;
    height: 33vh;
    margin-bottom: 0.5vh;
}
.loading-screen .loading-text,
.loading-screen .loading-welcome-text {
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6vmin;
    transition: opacity 0.5s;
}

.loading-screen .loading-welcome-text {
    opacity: 0;
    font-size: 10vmin;
}

.loading-screen-welcome .loading-text {
    opacity: 0;
}
.loading-screen-welcome .loading-welcome-text {
    opacity: 1;
}
.loading {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -35px 0 0 -56px;
    width: 112px;
    height: 70px;
    zoom: 1;
    transition: opacity 0.5s;
}
.loading-screen-welcome .loading {
    opacity: 0;
}
.loading:before,
.loading:after {
    display: table;
    content: "";
}
.loading:after {
    clear: both;
}
.loading .finger {
    float: left;
    margin: 0 2px 0 0;
    width: 20px;
    height: 100%;
}
.loading .finger-1 {
    animation: finger-1-animation 2s infinite ease-out;
}
.loading .finger-1 span {
    animation: finger-1-animation-span 2s infinite ease-out;
}
.loading .finger-1 i {
    animation: finger-1-animation-i 2s infinite ease-out;
}
.loading .finger-2 {
    animation: finger-2-animation 2s infinite ease-out;
}
.loading .finger-2 span {
    animation: finger-2-animation-span 2s infinite ease-out;
}
.loading .finger-2 i {
    animation: finger-2-animation-i 2s infinite ease-out;
}
.loading .finger-3 {
    animation: finger-3-animation 2s infinite ease-out;
}
.loading .finger-3 span {
    animation: finger-3-animation-span 2s infinite ease-out;
}
.loading .finger-3 i {
    animation: finger-3-animation-i 2s infinite ease-out;
}
.loading .finger-4 {
    animation: finger-4-animation 2s infinite ease-out;
}
.loading .finger-4 span {
    animation: finger-4-animation-span 2s infinite ease-out;
}
.loading .finger-4 i {
    animation: finger-4-animation-i 2s infinite ease-out;
}
.loading .finger-item {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 6px 6px 8px 8px;
    background-clip: padding-box;
    background: #fff;
}
.loading .finger-item span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    padding: 5px 5px 0 5px;
}
.loading .finger-item span:before,
.loading .finger-item span:after {
    content: '';
    position: relative;
    display: block;
    margin: 0 0 2px 0;
    width: 100%;
    height: 2px;
    background: #202020;
}
.loading .finger-item i {
    position: absolute;
    left: 3px;
    bottom: 3px;
    width: 14px;
    height: 14px;
    border-radius: 10px 10px 7px 7px;
    background-clip: padding-box;
    background: #202020;
}
.loading .last-finger {
    position: relative;
    float: left;
    width: 24px;
    height: 100%;
    overflow: hidden;
}
.loading .last-finger-item {
    position: absolute;
    right: 0;
    top: 32px;
    width: 110%;
    height: 20px;
    border-radius: 0 5px 14px 0;
    background-clip: padding-box;
    background: #fff;
    animation: finger-5-animation 2s infinite linear;
}
.loading .last-finger-item i {
    position: absolute;
    left: 0;
    top: -8px;
    width: 22px;
    height: 8px;
    background: #fff;
    overflow: hidden;
}
.loading .last-finger-item i:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 20px;
    border-radius: 0 0 15px 15px;
    background-clip: padding-box;
    background: #202020;
}
@keyframes finger-1-animation {
    0% {
      padding: 12px 0 5px 0;
    }
    20% {
      padding: 12px 0 5px 0;
    }
    29% {
      padding: 4px 0 24px 0;
    }
    35% {
      padding: 4px 0 24px 0;
    }
    41% {
      padding: 12px 0 5px 0;
    }
    100% {
      padding: 12px 0 5px 0;
    }
} 
@keyframes finger-1-animation-span {
    0% {
      top: 0;
    }
    20% {
      top: 0;
    }
    29% {
      top: -7px;
    }
    35% {
      top: -7px;
    }
    41% {
      top: 0;
    }
    100% {
      top: 0;
    }
}
@keyframes finger-1-animation-i {
    0% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
    20% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
    29% {
      bottom: 8px;
      height: 12px;
      border-radius: 7px 7px 4px 4px;
      background-clip: padding-box;
    }
    35% {
      bottom: 8px;
      height: 12px;
      border-radius: 7px 7px 4px 4px;
      background-clip: padding-box;
    }
    41% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
    100% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
}
@keyframes finger-2-animation {
    0% {
      padding: 6px 0 2px 0;
    }
    24% {
      padding: 6px 0 2px 0;
    }
    33% {
      padding: 2px 0 16px 0;
    }
    39% {
      padding: 2px 0 16px 0;
    }
    45% {
      padding: 6px 0 2px 0;
    }
    100% {
      padding: 6px 0 2px 0;
    }
}
@keyframes finger-2-animation-span {
    0% {
      top: 0;
    }
    24% {
      top: 0;
    }
    33% {
      top: -7px;
    }
    39% {
      top: -7px;
    }
    45% {
      top: 0;
    }
    100% {
      top: 0;
    }
}
@keyframes finger-2-animation-i {
    0% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
    24% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
    33% {
      bottom: 8px;
      height: 12px;
      border-radius: 7px 7px 4px 4px;
      background-clip: padding-box;
    }
    39% {
      bottom: 8px;
      height: 12px;
      border-radius: 7px 7px 4px 4px;
      background-clip: padding-box;
    }
    45% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
    100% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
}
@keyframes finger-3-animation {
    0% {
      padding: 0 0 0 0;
    }
    28% {
      padding: 0 0 0 0;
    }
    37% {
      padding: 0 0 12px 0;
    }
    43% {
      padding: 0 0 12px 0;
    }
    49% {
      padding: 0 0 0 0;
    }
    100% {
      padding: 0 0 0 0;
    }
}
@keyframes finger-3-animation-span {
    0% {
      top: 0;
    }
    28% {
      top: 0;
    }
    37% {
      top: -7px;
    }
    43% {
      top: -7px;
    }
    49% {
      top: 0;
    }
    100% {
      top: 0;
    }
}
@keyframes finger-3-animation-i {
    0% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
    28% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
    37% {
      bottom: 8px;
      height: 12px;
      border-radius: 7px 7px 4px 4px;
      background-clip: padding-box;
    }
    43% {
      bottom: 8px;
      height: 12px;
      border-radius: 7px 7px 4px 4px;
      background-clip: padding-box;
    }
    49% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
    100% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
}
@keyframes finger-4-animation {
    0% {
      padding: 8px 0 3px 0;
    }
    32% {
      padding: 8px 0 3px 0;
    }
    41% {
      padding: 4px 0 20px 0;
    }
    47% {
      padding: 4px 0 20px 0;
    }
    53% {
      padding: 8px 0 3px 0;
    }
    100% {
      padding: 8px 0 3px 0;
    }
}
@keyframes finger-4-animation-span {
    0% {
      top: 0;
    }
    32% {
      top: 0;
    }
    41% {
      top: -7px;
    }
    47% {
      top: -7px;
    }
    53% {
      top: 0;
    }
    100% {
      top: 0;
    }
}
@keyframes finger-4-animation-i {
    0% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
    32% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
    41% {
      bottom: 8px;
      height: 12px;
      border-radius: 7px 7px 4px 4px;
      background-clip: padding-box;
    }
    47% {
      bottom: 8px;
      height: 12px;
      border-radius: 7px 7px 4px 4px;
      background-clip: padding-box;
    }
    53% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
    100% {
      bottom: 3px;
      height: 14px;
      border-radius: 10px 10px 7px 7px;
      background-clip: padding-box;
    }
}
@keyframes finger-5-animation {
    0% {
      top: 32px;
      right: 0;
      border-radius: 0 5px 14px 0;
      background-clip: padding-box;
      transform: rotate(0deg);
    }
    34% {
      top: 32px;
      right: 0;
      border-radius: 0 5px 14px 0;
      background-clip: padding-box;
      transform: rotate(0deg);
    }
    43% {
      top: 20px;
      right: 2px;
      border-radius: 0 8px 20px 0;
      background-clip: padding-box;
      transform: rotate(-12deg);
    }
    50% {
      top: 20px;
      right: 2px;
      border-radius: 0 8px 20px 0;
      background-clip: padding-box;
      transform: rotate(-12deg);
    }
    60% {
      top: 32px;
      right: 0;
      border-radius: 0 5px 14px 0;
      background-clip: padding-box;
      transform: rotate(0deg);
    }
    100% {
      top: 32px;
      right: 0;
      border-radius: 0 5px 14px 0;
      background-clip: padding-box;
      transform: rotate(0deg);
    }
}
.lobby-code {
    position: absolute !important;
    right: 40vmin;
    top: 3vmin;
    color: #ffffff;
    font-size: 2.5vmin;
    cursor: pointer;
    display: none !important;
    cursor: pointer;
}

.lobby-code:hover {
    color: #03b053;
}html, body{
    margin: 0;
    background-color: black;
    font-family: 'Bombardier', sans-serif;
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
    height: 100%;
    width: 100%;
}

.grecaptcha-badge {
    visibility: collapse !important; 
}

#game-canvas{
    display: block;
    position: absolute;
    top: 0;
}

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

.text-select{
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.menu{
    height: 100%;
    width: 100%;
    color: #ffffff;
    text-align: center;
    display: none;
}

.menu-selection, .menu-text-input{
    font-size: 5vmin;
    margin: 1vmin;
    display: inline-block;
    border: solid 1px;
    padding: 0 1vmin;
    cursor: pointer;
}

.menu-selection:hover{
    background-color: #03c95f;
    border-color: #03c95f;
}

.menu-selection-small {
    font-size: 3.5vmin;
    padding: 0.25vmin 0.5vmin;
}

.menu-selection.disabled{
    color: #707070 !important;
    background: none !important;
    border-color: #707070 !important;
    cursor: default !important;
}

.menu-text-input{
    font-family: 'Bombardier', sans-serif;
    background: none;
    color: #ffffff;
    outline: none;
}

.menu-text-input:focus{
    border-color: #03c95f;
}

.standard-anchor {
    color: #00b9ff;
}

.standard-anchor:hover {
    color: #33c9ff;
}

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 0.75vmin solid transparent;
    border-right: 0.75vmin solid transparent;
    border-bottom: 0.75vmin solid #ffffff;
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 0.75vmin solid transparent;
    border-right: 0.75vmin solid transparent;
    border-top: 0.75vmin solid #ffffff;
}

.vertical-line {
    width: 1px;
    height: 100%;
    background-color: #ffffff;
}/* Main Menu */
.main-menu {
    position: absolute;
}
.main-menu .opt-title {
    font-size: 4vmin;
}
.main-menu .main-menu-header {
    margin-top: 2.5vh;
    max-width: 1250px;
    max-height: 512px;
    height: 33vh;
    margin-bottom: 0.5vh;
}
.main-menu .main-menu-header-container {
    text-align: center;
}
.main-menu .game-suggestion {
    margin-bottom: 2.5vh;
    font-family: 'Inconsolata', sans-serif;
    font-size: 2vmin;
    color: #ffffff;
    display: inline-block;
    padding: 1vmin;
}
.main-menu .game-suggestion-visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s linear;
}
.main-menu .game-suggestion-hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s, opacity 1s linear;
}
.main-menu .menu-input {
    outline: none;
    background: none;
    padding: 0.5vmin 1vmin;
    font: 3vmin 'Bombardier', sans-serif;
    color: #ffffff;
    border: solid 1px;
    margin-bottom: 3vmin;
}
.main-menu .menu-input:focus {
    border-color: #03c95f;
}
.main-menu .menu-number-input {
    width: 5vw;
}
.main-menu .menu-error {
    font-family: 'Inconsolata', sans-serif;
    font-size: 3vmin;
    color: red;
}
.main-menu .menu-error-small {
    font-size: 2vmin;
}
.main-menu input[type='file'] {
    display: none;
}
.main-menu .menu-file-input {
    box-sizing: border-box;
    border: dashed 3px;
    padding: 1vmin;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1vmin;
}
.main-menu .menu-file-choose {
    font-size: 3vmin;
    display: inline-block;
}
.main-menu .menu-or {
    font-size: 2vmin;
    display: inline-block;
}
.main-menu .menu-drop {
    font-size: 3vmin;
    display: inline-block;
}
.main-menu .menu-file-name {
    display: inline-block;
    color: #03c95f;
    font-size: 3vmin;
    margin-top: 1vmin;
}

.discord-container {
    position: absolute;
    bottom: 1.5vmin;
    right: 2.5vmin;
}

.main-menu .discord-image {
    height: 10vmin;
    width: 10vmin;
}

.main-menu .discord-ref {
    display: inline-block;
}

.main-menu .play-btn-options-container {
    display: flex;
    align-items: center;
}

.main-menu .play-button-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2.5vh;
}

.main-menu .play-btn-option {
    width: 22.5vmin;
    margin: 1vmin;
}

.main-menu .play-btn {
    background-color: #03b053;
    font-size: 10vmin;
    padding: 2vmin 0;
}

.main-menu .play-btn:hover {
    background-color: #03c95f;
    border-color: white;
    color: white;
}

.main-menu .custom-lobby-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main-menu .custom-lobby-title {
    font-size: 3.5vmin;
    margin-bottom: 1vmin;
}

.main-menu .custom-lobby-create,
.main-menu .custom-lobby-join {
    width: 75%;
}

.main-menu .play-btn-vertical-line {
    height: 20vmin;
}

.main-menu .create-btn {
    margin-top: 10vh;
}

.main-menu .main-menu-version {
    font-family: 'Inconsolata', sans-serif;
    font-size: 2.5vmin;
}

.main-menu .main-menu-terms {
    display: inline-block;
    margin-top: 1vmin;
    font-size: 1.5vmin;
}

.main-menu .auth-container {
    position: absolute;
    top: 2.5vmin;
    left: 2.5vmin;
    display: inline-block;
    text-align: center;
}

.main-menu #auth-signout {
    display: none;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    color: #00b9ff;
    text-decoration: underline;
}

.main-menu #auth-signout:hover {
    cursor: pointer;
    color: #33c9ff;
}

.main-menu .server-playercount {
    display: inline-block;
    position: absolute;
    left: 15vw;
    top: 2.5vmin;
    font-size: 2vmin;
    height: 2.5vmin;
    line-height: 2.5vmin;
}

.main-menu .main-menu-link-container {
    position: absolute;
    top: 2.5vmin;
    right: 26vmin;
}

.main-menu .partners-link {
    color: #ffffff;
    text-decoration: none;
    margin-right: 1.5vmin;
}

.main-menu .partners-link:hover {
    cursor: pointer;
    background-color: #03c95f;
}

.main-menu .leaderboard {
    position: absolute;
    top: 10vh;
    right: 2.5vw;
    padding: 0;
    min-width: 15vw;
    background-color: #101010;
    border: solid 1px #ffffff;
}

.data-container,
.main-menu .leaderboard-container,
.main-menu .search-container {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-items: right;
    grid-gap: 0.5vmin 2vmin;
    font-size: 2.5vmin;
    font-family: 'Inconsolata', sans-serif;
}

.main-menu .leaderboard-container {
    font-size: 2vmin;
    margin: 0 2.5vmin;
    grid-template-columns: repeat(3, auto);
}

.main-menu .search-container {
    font-size: 2vmin;
    margin: 0 2.5vmin;
    display: none;
}

.main-menu .leaderboard-entry-username {
    justify-self: left;
}
.data-container div:nth-child(odd),
.main-menu .player-stat:nth-child(odd),
.main-menu .search-result:nth-child(odd) {
    justify-self: left;
}

.main-menu .leaderboard-title {
    font-size: 5vmin;
    margin: 1vmin 0;
    font-weight: normal;
}

.main-menu .leaderboard-title  {
    font-size: 3.5vmin;
}

.main-menu .leaderboard-rank-container {
    font-size: 2.5vmin;
    margin-top: 2.5vmin;
}

.main-menu .leaderboard-selection-parent {
    display: flex;
    justify-content: space-between;
}

.main-menu .leaderboard-selection {
    flex-grow: 1;
    flex-basis: 0;
    font-size: 1.75vmin;
    height: 4vmin;
    line-height: 4vmin;
    vertical-align: middle;
}

.main-menu .leaderboard-selection:hover {
    background-color: #03b053;
    cursor: pointer;
}

.main-menu .leaderboard-selection-selected {
    background-color: #03c95f;
}

.main-menu .leaderboard-selection-selected:hover {
    background-color: #03c95f;
}

.main-menu .leaderboard-message {
    font-size: 2.5vmin;
    font-family: 'Inconsolata', sans-serif;
    text-transform: none;
}

.main-menu .leaderboard-message {
    margin-bottom: 2.5vmin;
}

.main-menu .play-as-guest {
    font-family: 'Inconsolata', sans-serif;

    font-size: 3vmin;
    display: none;
}

.menu-link {
    font-size: 2vmin;
    color: #00b9ff;
    text-decoration: underline;
    font-family: 'Inconsolata', sans-serif;
}

.menu-link:hover {
    cursor: pointer;
    color: #33c9ff;
}

.menu-link-xl {
    font-size: 2.5vmin;
}

.menu-link-small {
    font-size: 1.5vmin;
}.notification-popup-container {
    position: absolute;
    right: 1vmin;
    bottom: 1vmin;
}

.notification-popup-container .notification-parent {
    background-color: #101010;
    color: #ffffff;
    font-family: 'Inconsolata', sans-serif;
    padding: 2vmin 2.5vmin;
    font-size: 2vmin;
    max-width: 20vmin;
    border: solid 1px #ffffff;
    margin-top: 1vmin;
    animation: notification-slide-in 0.5s forwards;
}

.notification-popup-container .notification-parent:hover {
    cursor: pointer;
    background-color: #202020;
}

.notification-popup-container .notification-title {
    font-weight: bold;
    pointer-events: none;
}

.notification-popup-container .notification-body {
    color: #c0c0c0;
    font-size: 1.75vmin;
    pointer-events: none;
}

.notification-popup-container .notification-slide-out {
    animation: notification-slide-out 0.5s forwards;
}

@keyframes notification-slide-in {
    0% {
        transform: translateX(calc(100% + 1vmin));
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes notification-slide-out {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(100% + 1vmin));
    }
}.options-menu-parent {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.25);
}

.options-menu {
    position: absolute;
    overflow-y: auto;
    max-height: 90vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #101010;
    padding: 2.5vmin;
    border: solid 1px #ffffff;
}
.options-menu .options-parent{
    display: inline-grid;
    grid-template-columns: auto auto;
    justify-items: left;
    align-items: center;
    grid-gap: 5px 5px;
    font-size: 3vmin;
    font-family: 'Inconsolata', sans-serif;
}

.options-menu h2 {
    font-size: 7.5vmin;
    margin: 0 0 2.5vmin 0;
    font-weight: normal;
}

.options-menu .option-title{
    justify-self: right;
}

.options-menu .option-value{
    justify-self: stretch;
    background: #505050;
    cursor: pointer;
}

.options-menu #opt-opt-return{
    grid-column-start: 1;
    grid-column-end: 3;
    justify-self: center;
}

.options-menu .option-value:hover:not(.active){
    background-color: #707070;
}

.options-menu .active{
    background: #03c95f;
}

.options-tip {
    font-size: 2vmin;
    font-family: 'Inconsolata', sans-serif;
} 

.options-menu .option-value-radio {
    text-align: left;
}

.options-menu .username-parent {
    position: relative;
}

.options-menu .username-change {
    position: absolute;
    top: 50%;
    left: -55%;
    font-size: 2vmin;
    transform: translateY(-50%);
    border: solid 1px #ffffff;
    padding: 0.25vmin;
    display: none;
}

.options-menu .username-change:hover {
    background-color: #03c95f;
    cursor: pointer;
}

.options-menu .radio-parent {
    text-align: left
}.overlay-parent {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.25);
}

.overlay-container {
    position: fixed;
    overflow-y: auto;
    max-height: 90vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #101010;
    padding: 2.5vmin;
    border: solid 1px #ffffff;
}

.overlay-content {
    display: none;
}

.overlay-content h2 {
    font-size: 5vmin;
    margin: 0 0 2vmin 0;
}

.overlay-content h3 {
    font-size: 3vmin;
    margin: 2vmin 0;
}

.overlay-content .tutorial-text {
    font-size: 2vmin;
    margin-bottom: 1vmin;
    font-family: 'Inconsolata', sans-serif;
}

.overlay-content .tutorial-controls {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    justify-items: left;
    font-size: 2.5vmin;
    font-family: 'Inconsolata', sans-serif;
    grid-gap: 1vmin;
}

.overlay-content .tutorial-controls-highlight {
    color: #03b053;
}

.overlay-container .overlay-rank {
    margin-bottom: 2.5vmin;
}.overlay-menu {
    position: absolute;
    pointer-events: none;
    top: 0;
}

.overlay-menu .fullscreen-toggle img {
    width: 100%;
    height: 100%;
}

.overlay-menu .fullscreen-toggle #fullscreen-toggle-off,
.overlay-menu .fullscreen-toggle #fullscreen-toggle-on,
.overlay-menu .fullscreen-toggle {
    display: none;
}

/* Each spaced 4.5vmin right */
.overlay-menu .volume-mute,
.overlay-menu .menu-options,
.overlay-menu .fullscreen-toggle,
.overlay-menu .conversation-icon,
.overlay-menu .notification-icon {
    position: absolute;
    width: 3.5vmin;
    height: 3.5vmin;
    right: 2.5vmin;
    top: 2.5vmin;
    pointer-events: auto;
}

.overlay-menu .fullscreen-toggle {
    right: 7vmin;
}

.overlay-menu .notification-icon {
    right: 11.5vmin;
}

.overlay-menu .conversation-icon {
    right: 16vmin;
}

.overlay-menu .conversation-icon img,
.overlay-menu .notification-icon img {
    width: 3.5vmin;
    height: 3.5vmin;
    pointer-events: none;
}

.overlay-menu .conversation-notification-icon,
.overlay-menu .notification-notification-icon {
    background-color: #b01703;
    position: absolute;
    top: 0;
    right: 0;
    width: 1.85vmin;
    height: 1.85vmin;
    border-radius: 100%;
    font-size: 1.85vmin;
    pointer-events: none;
    display: none;
}


.overlay-menu .volume-mute {
    right: 21vmin;
}

/* 5.5vmin right of volume mute */
.overlay-menu .volume-suggestion {
    position: absolute;
    top: 3vmin;
    right: 26.5vmin;
    pointer-events: auto;
    font-size: 2.25vmin;
    background: #ffffff;
    color: #202020;
    height: 2.5vmin;
    padding: 0 0.5vmin;
    pointer-events: auto;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s, opacity 1s linear;
}
.overlay-menu .volume-suggestion-visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s linear;
}

.overlay-menu .volume-suggestion::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -1.25vmin;
    border-width: 1.25vmin;
    border-style: solid;
    border-color: transparent transparent transparent #ffffff;
    pointer-events: auto;
}

.overlay-menu .volume-mute:hover,
.overlay-menu .menu-options:hover,
.overlay-menu .fullscreen-toggle:hover,
.overlay-menu .volume-suggestion:hover,
.overlay-menu .conversation-icon:hover,
.overlay-menu .notification-icon:hover {
    cursor: pointer;
}.overlay-menu-list {
    position: absolute;
    top: 6vmin;
    font-family: 'Inconsolata', sans-serif;
    background-color: #101010;
    border: solid 1px #ffffff;
    color: #ffffff;
    display: none;
    max-width: 15vw;
}

.conversation-list {
    right: 17.75vmin;
}

.notification-list {
    right: 13.25vmin;
}

.overlay-menu-list .overlay-menu-list-child {
    padding: 1vmin;
    border-bottom: solid 1px #909090;
    white-space: nowrap;
}

.overlay-menu-list .conversation-list-child:last-child {
    border-bottom: none;
}
 
.overlay-menu-list .overlay-menu-list-child:hover {
    cursor: pointer;
    background-color: #202020;
}

.overlay-menu-list .overlay-menu-list-child-username {
    font-size: 1.75vmin;
    color: #f0f0f0;
    pointer-events: none;
}

.overlay-menu-list .overlay-menu-list-child-unread {
    color: #ffffff;
    font-weight: bold;
}

.overlay-menu-list .overlay-menu-list-child-body {
    font-size: 1.5vmin;
    margin-top: 0.25vmin;
    color: #b0b0b0;
    text-overflow: ellipsis;
    overflow: hidden;
    pointer-events: none;
}

.overlay-menu-list-message {
    font-size: 2.5vmin;
    padding: 1vmin 1.5vmin;
}
.overlay-menu-list-message:empty {
    padding: 0;
}

.overlay-menu-list .overlay-menu-list-more {
    text-align: center;
    color: #00b9ff;
    text-decoration: underline;
    padding: 0.5vmin 0;
    border-top: solid 1px #909090;
    display: none;
}

.overlay-menu-list .overlay-menu-list-more {
    color: #33c9ff;
    cursor: pointer;
}/* Global class for all profile links */
.profile-link:hover {
    text-decoration: underline;
    cursor: pointer;
}
.profile-parent {
    font-family: 'Inconsolata', sans-serif;
    background-color: #101010;
    font-size: 2.5vmin;
    color: #ffffff;
    position: absolute;
    display: none;
    text-align: center;
    border: solid 1px #ffffff;
    width: 20vmin;
}

.profile-parent .profile-container {
    display: inline-grid;
    margin-top: 0.5vmin;
    grid-template-columns: repeat(2, auto);
    justify-items: right;
    grid-gap: 0.25vmin 1vmin;
    font-size: 1.75vmin;
    font-family: 'Inconsolata', sans-serif;
    text-transform: capitalize;
    margin-bottom: 1vmin;
}

.profile-parent .profile-header {
    font-size: 2vmin;
    font-weight: bold;
    padding: 2vmin;
    border-bottom: solid 1px #ffffff;
    margin-bottom: 0.5vmin;
}

.profile-parent .profile-action {
    font-size: 1.75vmin;
    margin: 0.5vmin 0;
    padding: 0.25vmin 0;
    width: 75%;
    border: solid 1px #ffffff;
    display: none;
}

.profile-parent .profile-action:hover {
    cursor: pointer;
    background-color: #03b053;
}

.profile-parent .profile-action-disabled {
    color: #909090;
    border-color: #909090;
}

.profile-parent .profile-action-disabled:hover {
    cursor: default;
    background: none;
}

.profile-parent .profile-action-enabled {
    background-color: #03b053;
}

.profile-parent .profile-action-enabled:hover {
    cursor: default;
    background-color: #03b053;
}

.profile-action-small {
    font-size: 1.5vmin;
    margin-bottom: 0.25vmin;
    color: #00b9ff;
    display: none;
}

.profile-action-small:hover {
    color: #33c9ff;
    text-decoration: underline;
    cursor: pointer;
}

.profile-action-negative {
    color: #b01703;
}

.profile-action-negative:hover {
    color: #b01703;
}

.profile-parent .profile-message {
    font-size: 3.5vmin;
}

.profile-parent .profile-data:nth-child(odd) {
    justify-self: left;
}.rank-chart .rank-chart-container {
    display: flex;
    font-size: 2.5vmin;
    max-width: 90vw;
    overflow-x: auto;
    min-height: 35vh;
    margin: 0 1vmin;
    box-sizing: border-box;
}

.rank-chart .rank-chart-progress {
    height: 1vh;
    background-color: #03b053;
    width: 0%;
}

.rank-chart .rank-container-parent {
    display: flex;
    flex-direction: column;
}

.rank-chart .rank-container {
    border: solid 1px #ffffff;
    border-right: none;
    white-space: nowrap;
    flex-grow: 1;
}

.rank-chart .rank-container-parent:last-child .rank-container {
    border-right: solid 1px #ffffff;
    margin-right: 1px;
}

.rank-chart .rank-container .rank-chart-title-container,
.rank-chart .rank-container .rank-chart-reward-container {
    padding: 2.5vmin;
}

.rank-chart .rank-chart-title-container {
    border-bottom: solid 1px #ffffff;
}

.rank-chart .rank-chart-title {
    font-size: 3.5vmin;
}

.rank-chart .rank-chart-subtitle {
    font-size: 2vmin;
    font-family: 'Inconsolata', sans-serif;
}

.rank-chart .rank-info {
    font-family: 'Inconsolata', sans-serif;
    font-size: 2vmin;
    text-align: left;
    display: none;
}

.rank-chart .rank-info-rank {
    margin-bottom: 2vmin;
}

.rank-chart .rank-chart-reward {

}.recording-selector {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
}

.recording-selector .recording-selector-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2.5vmin;
    border: solid 1px #ffffff;
    background-color: #101010;
    text-align: center;
}

.recording-selector .recording-selector-title {
    font-size: 7.5vmin;
    margin-bottom: 2vmin;
}

.recording-selector .recording-selector-help {
    font-family: 'Inconsolata', sans-serif;
    font-size: 2vmin;
}

.recording-selector .match-text-container {
    position: relative;
    width: 30vw;
    height: 2vh;
    margin-top: 2.5vmin;
}

.recording-selector .match-text {
    font-family: 'Inconsolata', sans-serif;
    font-size: 1.75vmin;
    display: inline-block;
    position: absolute;
}

.recording-selector .match-text-start {
    left: 0;
}

.recording-selector .match-text-end {
    right: 0;
}

.recording-selector .range-container {
    margin-bottom: 2.5vmin;
}

.recording-selector .range-container input {
    width: 30vw;
}

.recording-selector .error-msg {
    color: #ea1d02;
    padding-bottom: 1vmin;
}

.recording-selector .recording-action {
    font-size: 3vmin;
    padding: 1vmin 1.5vmin;
    border: solid 1px;
    cursor: pointer;
    display: inline-block;
}

.recording-selector .action-submit {
    margin-left: 15%;
    color: #03c95f;
}

.recording-selector .action-submit:hover {
    color: #ffffff;
    background-color: #03c95f;
    border-color: #03c95f;

}

.recording-selector .action-cancel {
    margin-right: 15%;
    color: #ea1d02;
}

.recording-selector .action-cancel:hover {
    color: #ffffff;
    background-color: #ea1d02;
    border-color: #ea1d02;
}

.recording-selector .recording-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
}

.recording-selector .recording-overlay-text {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7.5vmin;
}

.recording-selector .recording-overlay-close {
    position: relative;
    top: 50%;
}.recordings-container .recording-child {
    border: solid 1px #ffffff;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.recordings-container .recording-child:hover {
    background: #202020;
}

.recordings-container .recording-child:last-child {
    border-bottom: solid 1px #ffffff;
}

.recordings-container .recording-child-arena {
    margin-bottom: 0.5vmin;
}
 
.recordings-container .recording-child-date {
    color: #b0b0b0;
    font-size: 1.5vmin;
}

.recordings-container .recording-child-meta,
.recordings-container .recording-social-parent {
    margin: 0.25vmin 1.25vmin;
}

.recordings-container .recording-social-parent {
    display: flex;
    align-items: center;
}

.recordings-container .recording-child-meta {
    font-size: 1.75vmin;
    font-family: 'Inconsolata', sans-serif;
    text-align: left;
}

.recordings-container .recording-social {
    width: 3vmin;
    height: 3vmin;
    padding: 0.5vmin;
    cursor: pointer;
}

.recordings-container .recording-social-link {
    font-size: 1.25vmin;
}

.recordings-message {
    font-family: 'Inconsolata', sans-serif;
    font-size: 2.5vmin;
}.referral-parent {
    background-color: rgba(0, 0, 0, 0.25);
    position: absolute;
}

.referral-parent h2 {
    font-size: 7.5vmin;
    margin: 0 0 2.5vmin 0;
}

.referral-parent .referral-referrer-parent {
    margin-bottom: 2.5vmin;
    padding-bottom: 2.5vmin;
    font-size: 3.5vmin;
    border-bottom: solid 1px;
}

.referral-parent .referral-referrer-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.referral-parent .referral-referrer-input {
    font-family: 'Inconsolata', sans-serif;
    font-size: 3.5vmin;
    background: none;
    outline: none;
    border: none;
    border-bottom: solid 1px #ffffff;
    color: #ffffff;
    text-transform: uppercase;
    margin: 0px 2vmin 0 1vmin;
}

.referral-parent .referral-referrer-error {
    color: #b01703;
    font-family: 'Inconsolata', sans-serif;
    font-size: 2.5vmin;
}

.referral-parent .referral-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2.5vmin;
    border: solid 1px #ffffff;
    background-color: #101010;
    text-align: center;
}

.referral-parent .referral-code {
    font-size: 3.5vmin;
    margin-bottom: 2.5vmin;
}

.referral-parent .referral-code-text:hover {
    color: #03b053;
    cursor: pointer;
}

.referral-parent .referral-data-container {
    margin-bottom: 2.5vmin;
    min-width: 12.5vw;
    cursor: default;
    display: none;
}

.referral-parent .referral-information {
    font-size: 2vmin;
    font-family: 'Inconsolata', sans-serif;
    border: solid 1px #ffffff;
    padding: 1vmin 1.5vmin;
}
.referral-parent .referral-close {
    margin-top: 2.5vmin;
}.side-panel {
    position: absolute;
    top: 10vh;
    background-color: #101010;
    border: solid 1px #ffffff;
    left: 2.5vw;
    padding: 1.5vmin;
    text-transform: capitalize;
    box-sizing: border-box;
}

.side-panel .side-panel-title {
    font-size: 3.5vmin;
    margin-bottom: 1vmin;
    text-transform: none;
}

.side-panel-username {
    display: none;
}

.side-panel .side-panel-top .data-container {
    display: none;
}

.side-panel .side-panel-message {
    font-family: 'Inconsolata', sans-serif;
    text-transform: none;
    font-size: 2vmin;
}

.side-panel .side-panel-cmp {
    display: none;
}

.side-panel .side-panel-back {
    margin-top: 1vmin;
    font-size: 2.5vmin;
    display: none;
}

.side-panel .side-panel-btn-parent {
    display: inline-grid;
    margin-top: 1vmin;
    grid-template-columns: repeat(2, auto);
    grid-gap: 1vmin;
}

.side-panel .side-panel-btn-container {
    display: flex;
    flex-direction: column;
    width: 11vmin;
    height: 11vmin;
    border:  solid 1px #ffffff;
}

.side-panel .side-panel-btn-container:hover {
    background-color: #03c95f;
    cursor: pointer;
}

.side-panel .side-panel-btn-img {
    flex-grow: 1;
    pointer-events: none;
}

.side-panel .side-panel-btn-title {
    font-family: 'Inconsolata', sans-serif;
    font-size: 2vmin;
    margin-bottom: 0.5vmin;
    pointer-events: none;
}

.side-panel .side-panel-creator-section {
    display: none;
}

.side-panel .side-panel-search-toggle-parent {
    justify-content: space-evenly;
    margin: 1vmin 0;
    display: none;
}

.side-panel .side-panel-search-toggle-everyone,
.side-panel .side-panel-search-toggle-friends {
    height: 4vmin;
    width: 50%;
    line-height: 4vmin;
    vertical-align: middle;
}

.side-panel .side-panel-search-toggle-everyone:hover,
.side-panel .side-panel-search-toggle-friends:hover {
    background-color: #03b053;
    cursor: pointer;
}

.side-panel .side-panel-search-input {
    margin: 1vmin 0;
    background: none;
    font-size: 2.5vmin;
    border: solid 1px #ffffff;
    outline: none;
    padding: 0.5vmin 1vmin;
    color: #ffffff;
    font-family: 'Inconsolata', sans-serif;
}

.side-panel .side-panel-search-container {
    font-size: 2vmin;
}.side-panel .store-container-parent {
    max-height: 70vh;
    overflow: auto;
    padding: 0.5vmin;
}

.side-panel .store-container {
    display: grid;
    grid-template-columns: repeat(2, 22vmin);
    grid-auto-rows: 22vmin;
    grid-gap: 1vmin;
    font-size: 2.5vmin;
    font-family: 'Inconsolata', sans-serif;
}

.side-panel .store-item-container {
    padding: 1vmin;
    border: solid 1px #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.side-panel .store-item-image {
    object-fit: contain;
    min-height: 0;
    padding: 0.5vmin;
    width: 100%;
}

.side-panel .store-item-price {
    font-size: 2vmin;
}

.side-panel .store-item-color-icon {
    position: absolute;
    top: 80%;
    left: 80%;
    cursor: pointer;
    display: none;
    width: 3vmin;
    height: 3vmin;
}

.side-panel .store-item-custom-container {
    position: fixed;
    background-color: #101010;
    border: solid 1px #ffffff;
    z-index: 1;
    display: none;
    padding: 1vmin;
    width: 21vmin; /* Change this value when colors are added with longer titles*/
}

.side-panel .store-item-custom-color-container {
    cursor: pointer;
}

.side-panel .store-item-custom-color-container,
.overlay-color .store-item-custom-color-container {
    display: flex;
    white-space: nowrap;
    padding: 1vmin;
    margin-bottom: 1vmin;
    border: solid 1px #ffffff;
    align-items: center;
    justify-content: space-between;
    font-size: 2.5vmin;
    font-family: 'Inconsolata', sans-serif;
}

.side-panel .dropdown-container .store-item-custom-color-container {
    margin-bottom: 0;
    border-top: none;
}

.side-panel .store-item-custom-color-container:hover,
.overlay-color .store-item-custom-color-container:hover {
    background-color: #202020;
}

.side-panel .store-item-custom-color,
.overlay-color .store-item-custom-color {
    height: 2.5vmin;
    width: 2.5vmin;
    margin-right: 1vmin;
    border: solid 1px #ffffff;
    flex-shrink: 0;
}

.side-panel .store-item-custom-color-inner-container,
.overlay-color .store-item-custom-color-inner-container {
    display: flex;
    margin-right: 1vmin;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-panel .dropdown-container .arrow-down,
.side-panel .dropdown-container .arrow-up {
    display: none;
}

.overlay-color .store-item-custom-color-price {
    font-size: 1.75vmin;
}

.overlay-color .store-item-custom-color-parent {
    text-align: right;
}

.side-panel .store-currency-container,
.overlay-color .store-currency-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1vmin;
}
.side-panel .store-currency,
.overlay-color .store-currency {
    text-align: left;
    font-family: 'Inconsolata', sans-serif;
    font-size: 2vmin;
}

.overlay-color .overlay-color-title {
    margin-bottom: 1vmin;
}

.side-panel .store-more-currency {
    font-size: 2.25vmin;
}.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip-title {
    border-bottom: 1px dotted #ffffff;
}
  
.tooltip .tooltip-text {
    visibility: hidden;
    background-color: #c0c0c0;
    color: #000000;
    text-align: center;
    font-size: 2vmin;
    position: absolute;
    z-index: 1;
    text-align: left;
    padding: 0.5vmin;
    left: 0
}

/* Show the tooltip text when on hover */
.tooltip-title:hover + .tooltip-text {
    visibility: visible;
}.tos-block-parent {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.tos-block-parent .tos-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2.5vmin;
    border: solid 1px #ffffff;
    background: #101010;
    text-align: center;
}

.tos-block-parent .tos-block-text {
    font-size: 2vmin;
    font-family: 'Inconsolata', sans-serif;
    color: #ffffff;
    margin-bottom: 2vmin;
}

.tos-block-parent .btn {
    color: #ffffff;
}
.touch-controls {
    pointer-events: none;
}

.touch-controls .btn {
    pointer-events: auto;
    position: absolute;
    font-size: 5vmin;
}

.touch-controls .touch-controls-boost {
    right: 5vmin;
    bottom: 25vmin;
}

.touch-controls .touch-controls-reload {
    left: 5vmin;
    bottom: 25vmin;
}

.touch-controls .touch-controls-menu {
    right: 5vmin;
    bottom: 35vmin;
}.username-menu-parent {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.25);
}
.username-menu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #101010;
    padding: 2.5vmin;
    border: solid 1px #ffffff;
}

.username-menu h2 {
    font-size: 7.5vmin;
    margin: 0 0 2.5vmin 0;
    font-weight: normal;
}

.username-menu .username-input {
    background: none;
    font-size: 5vmin;
    border: solid 1px #ffffff;
    margin: 0 0 2.5vmin 0;
    outline: none;
    padding: 1vmin 0.5vmin;
    color: #ffffff;
    font-family: 'Inconsolata', sans-serif;
}.voting-parent {
    font-family: 'Inconsolata', sans-serif;
}

.voting-parent .voting-title {
    font-size: 3.5vmin;
}

.voting-parent .voting-option-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.voting-parent .voting-option {
    border: solid 1px #ffffff;
    margin-bottom: 1vmin;
    font-size: 2.5vmin;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    width: 37.5vmin;
    height: 15vmin;
    color: #03c95f;
}
.voting-parent .voting-option-author,
.voting-parent .voting-option-count,
.voting-parent .voting-option-title {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 0.5vmin;
    pointer-events: none;
}

.voting-parent .voting-option-author {
    position: absolute;
    bottom: 0.5vmin;
    left: 0.5vmin;
    font-size: 1.75vmin;
    padding: 0 0.3vmin;
}

.voting-parent .voting-option-count {
    position: absolute;
    bottom: 0.5vmin;
    right: 0.5vmin;
}

.voting-parent .voting-option-title {
    position: absolute;
    top: 0.5vmin;
    left: 0.5vmin;
}

.voting-parent .voting-option-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.voting-parent .voting-option-overlay:hover {
    background: rgba(255, 255, 255, 0.1);
}