button{
    border-width: 0;
    padding:0;
    align-items: unset;
    border-image: none;
    border-style: none;
    text-rendering: unset;
    word-spacing: unset;
}
button:focus {
    border: none;
    outline: none;
}
.btn:active:focus{
    outline: none;
}

.cbtn{
    pointer-events: all;
    margin:1vmin;
    user-select: none;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    text-align:center;
    color: #5d5e5d;
    background-color: #F8FFF6;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 1vmin;
    width: 25vmin;
    height: 7.8vmin;
    font-size: 4vmin;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
    outline-width: 0;
    border:none;
    margin:0;
}
.cbtn:hover,
.cbtn:focus {
    border:none;
    text-decoration: none;
    color: #5d5e5d;
    outline-width: 0;
}
.cbtn:active,
.cbtn.active {
    border:none;
    text-decoration: none;
    outline-width: 0;
}
.cbtn:active:focus{
    outline: none;
}


html, body, canvas {
    line-height: unset; /* y does bootstrap change this... */
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    background-color: #63ACFE;
    font-family:Ubuntu, Arial, Helvetica, sans-serif;
    color: #fcfeff;
}

/* bizzare aliasing problem when firefox text goes on top of the canvas oO */
@-moz-document url-prefix() { 
    body{
        -webkit-text-stroke: .2px white;
    }
}

canvas{
    z-index: 0;
}

input{
    border:0;
}
.status-txt{
    color:#ffc66c;
    font-size:3vmin;
    margin:.25vw;
    user-select: none;
    font-weight: bold;
    word-wrap: break-word;
}
@media screen and (orientation:portrait) {
    .status-txt{
    font-size:6vw;
    line-height: 6vw;
    margin:.5vw;
    }
}

.status-txt-solo{
    color:#ffc66c;
    font-size:3vmin;
    margin:.25vw;
    user-select: none;
    font-weight: bold;
}
@media screen and (orientation:portrait) {
    .status-txt{
    font-size:6vw;
    line-height: 6vw;
    margin:.5vw;
    }
}

@media not screen {
    .mobile_only{
        visibility: hidden
    }
}

.top-left{
    position: absolute;
    z-index: 100;
    top:0;
    left:0;
}

.top-right{
    position: absolute;
    z-index: 100;
    top:0;
    right:0;
}

.bottom-left{
    position: absolute;
    z-index: 100;
    bottom:0;
    left:0;
}

.hidden-button{
    width:5vw; height: 5vw;
    opacity: .01;
    background-color: white;
    display: inline-block;
    text-align: center;
}


.oj-btn {
    touch-action: manipulation;
    user-select: none;
    /*height: 90;*/
    cursor:default;
 ;
    /* margin: 20px;
    padding: 10 60;
    font-size: 32; */
    vertical-align: middle;

    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    color:#424242;
    font-weight: bold;
    box-shadow: 0px .5vmin #ffc66c;
    text-align: center;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
}
.oj-btn:hover,
.oj-btn:focus {
    text-decoration: none;
    color:#424242;
}
.oj-btn:active,
.oj-btn.active {
    text-decoration: none;
box-shadow: 0px .5vmin #81f869;
}

@media screen and (orientation:portrait) {
    .oj-btn{
        box-shadow: 0px 1.2vmin #ffc66c;
    }
    .oj-btn:active,
    .oj-btn.active {
box-shadow: 0px 1.2vmin #81f869;
    }

}

.oj-btn[disabled="true"] {
        box-shadow: 0px 1.2vmin #81f869;
}
.mainmenu-btn{
    margin: 1vmin;
    font-size: 4.8vmin;
    line-height: 6vmin;
    width: 24vmin;
}
@media screen and (orientation:portrait) {
    .mainmenu-btn{
        font-size: 9.8vmin;
        line-height: 13vmin;
        width: 54vmin;
        margin:2vmin;
    }
}


.serverUid-btn {
    /*height: 90;*/
    cursor:default;
    margin: .25;
    padding: .5vw 2vw;
    font-size: 1vw;
    vertical-align: middle;
}

@media screen and (orientation:portrait) {
    .serverUid-btn{
    margin: .5vw;
    padding: 1vw 4vw;
    font-size: 2vw;
    }
}





.name-txtbox {
    cursor:text;
    color: #eaf4f4;
    display:inline;

    /* width: 440;
    height: 96; */
    /* font-size: 60; */
    vertical-align: middle;
    text-align: left;
    padding: 5px;
    border-radius: 1vmin;
    
    background-color: #eaf4f414;

    width: 32vmin;
    /* give space for button */
    padding-right:8vmin; 
    height: 7.8vmin;
    font-size: 4.5vmin;
    font-weight: bold;
    font-family: Arial Black, Arial, Helvetica, sans-serif
}
.name-txtbox::placeholder{
    color: #dfdfdf;
}
.name-txtbox:focus::placeholder{
    color: transparent;
}
/* get rid of ugly outline google chrome adds */
.name-txtbox:focus{ 
    outline:0;
    /* width:42vmin;
    height:8.2vmin;
    margin-top:-.4vmin; */
 }
@media screen and (orientation:portrait) {
    .name-txtbox, .name-txtbox:focus{
    width: 60vmin;
    height: 14.2vmin;
    font-size: 8vmin;
    margin: .2vw;  
    padding-right:12vmin; 
    border-radius: 3vmin;
    }
}
.ioparty-image{
margin:auto; display:block;
width:15vmin;
height:calc(15vmin * 0.97530864197530864197530864197531);
margin-bottom: 0vmin;
margin-top:15vmin;
z-index: 2;
user-select: none;
}
@media screen and (orientation:portrait) {
.ioparty-image{
z-index: 2;
width:25vmin;
height:calc(25vmin * 0.97530864197530864197530864197531);
margin-bottom:-2vmin;
}
}

@media screen and (min-aspect-ratio:80/115) and (orientation:portrait) {
.ioparty-image{
z-index: 2;
width:15vmin;
height:calc(15vmin * 0.97530864197530864197530864197531);
margin-bottom:-2vmin;
margin-top:0vmin;
}
}

/* dynamic as in it can be the icon or the title depending on the width of the window */
.ioparty-image-desktop{
    content:url("res/title/pinata@0.25x.png");
    width:20vmin;
    height:calc(20vmin * 0.97530864197530864197530864197531);
    margin:auto; display:block;
    margin-bottom: 4vmin;
    margin-top:4vmin;
    z-index: 2;
    user-select: none;
    max-height: 100%;
    object-fit: contain;
}
@media screen and (orientation:portrait) {
    .ioparty-image-desktop{
        display:none;
    }
}

/* we cant change the content source because it fucks the aspect ratio so we just do 2 divsd instead */
.ioparty-image-mobile{
    display:none;
}
@media screen and (orientation:portrait) {
    .ioparty-image-mobile{
        display:block;
        content:url("res/title/title@0.5x.png");
        margin:auto;
        height: 16vmin;
        width: calc(16vmin*2.8951612903225806451612903225806);
        left:0;
        right:0;
        top:2vmin;
        position:absolute;
        z-index: 2;
        margin-bottom:2vmin;
        margin-top:2vmin;
    }
}


.ioparty-title{
    font-family: Arial Black, Arial, Helvetica, sans-serif;
    color:#E7F2F2;
    font-size: 4.5vmin;
width:40vmin;
margin:auto; display:block;
margin-bottom: 2.5vmin;
margin-top:0px;
z-index: 2;
user-select: none;
}
@media screen and (orientation:portrait) {
.ioparty-title{
    font-size: 8vmin;

    z-index: 2;
    width:88vmin;
    margin-top:0;
}
}




.floating-cloud{
    position: fixed;
    width: 10vw;
    margin: auto;
    user-select: none;
    pointer-events: none;
    z-index: -1;
}

.left-flags{
    position: fixed;
    top:0;
    left:0;
    width: 30vw;
    margin: auto;
    user-select: none;
    pointer-events: none;
    z-index: -1;
    left:1vmin;
}
@media screen and (orientation:portrait) {
    .left-flags{
        display: none;
    }
}
.right-flags{
    position: fixed;
    top:0;
    right:0;
    width: 30vw;
    -moz-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
    margin: auto;
    user-select: none;
    pointer-events: none;
    z-index: -1;
    right:1vmin;

}
@media screen and (orientation:portrait) {
    .right-flags{
        display: none;
    }
}

.floating-cloud-1{
    left:1vmin;
    top:10vmin;
    width: 25vmin;
}
@media screen and (orientation:portrait) {
    .floating-cloud-1{
        left:-10vmin;
        top:-14vmin;
    width: 35vmin;
    }
}
.floating-cloud-2{
    right:1vmin;
    bottom:40vmin;
    top:10vmin;
    width: 25vmin;
}
@media screen and (orientation:portrait) { .floating-cloud-2{ bottom:-20vmin; right:-18vmin; width:35vmin; } }

.floating-cloud-3{
    left:10vmin;
    right:100vmin;
    bottom:1vmin;
    width: 25vmin;
}
@media screen and (orientation:portrait) {
.floating-cloud-3{
    left:0vmin;
    bottom:0vmin;
    width:35vmin;
    right:auto;
}
}


.uid-txtbox {
    color: #1487d3;
    vertical-align: middle;
    /* width: 200;
    height: 40; */
    /* font-size: 30; */
    width: 10vw;
    height: 2vw;
    font-size: 1.5vw;
    margin: 1vw .25vw;
    -webkit-border-radius: .2vw;
    -moz-border-radius: .2vw;
    border-radius: .2vw;
    border-width: 0px;
    text-align: center;
}
@media screen and (orientation:portrait) {
    .uid-txtbox{
    width: 20vw;
    height: 4vw;
    font-size: 3vw;
    margin: 2vw .5vw;
    -webkit-border-radius: .4vw;
    -moz-border-radius: .4vw;
    border-radius: .4vw;
    border-width: 0px;
    }
}

.icon-logo {
    font-size: 200px;
    color: white;
    margin: 30;
}

.clear::-ms-clear {
    display: none;
}

#solo-form {
    display:none;
    margin:auto;
    text-align: center;
    height:100vmin;
}



.solo-form-score-pts{
    font-size: 5vmin;
    padding:0px;
    margin:0px;
}
@media screen and (orientation:portrait) {
    .solo-form-score-pts{
        font-size: 8vmin;
    }
}

/* @media screen and (orientation:portrait) {
    .solo-form-score{
    }
} */

.solo-run-score-header {
    font-size: 3vw;
    line-height: 1;
    margin: 0px .2vw .2vw .2vw;
    /*color:dimgrey;*/
    color: #1367a0;
    font-weight: bold;
    text-align: center;
    font-family: 'Ubuntu', Arial, sans-serif;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    cursor:default;
}
@media screen and (orientation:portrait) {
    /* .solo-run-score-header{
    } */
}


.solo-run-score {
    font-size: 12vw;
    line-height: 1;
    margin: 0px 1vw 1vw 1vw;
    /*color:dimgrey;*/
    color: #1683cc;
    font-weight: bold;
    text-align: center;
    font-family: 'Ubuntu', Arial, sans-serif;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    cursor:default;
}
@media screen and (orientation:portrait) {
    .solo-run-score{
    width: 40vw;
    }
}


#name-form {
    overflow: hidden;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    height:100vmin;
}

.txt-create-party {
    height:.5vw; 
 margin:2; text-align: right; user-select:none; font-size:1vw;
 float:right;
}
@media screen and (orientation:portrait) {
    .txt-create-party{
    height:1vw; 
 margin:2; text-align: right; user-select:none; font-size:2vw;
    }
}

.txt-change-server {
    height:.5vw;;
 margin:2; text-align: left; user-select:none; font-size:1vw;
 float:left;
}
@media screen and (orientation:portrait) {
    .txt-change-server{
    height:1vw;
 margin:2; text-align: left; user-select:none; font-size:2vw;
    }
}

.cvs {
    z-index: 1;
}

#pane {
    z-index: 2;
    width: 100%;
    height:100%;
    text-align: center;
    left: 0;
    right: 0;
    float:right;
    display:flex;
    justify-content: center;
    align-items:center;
}

.footer {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 4;
    padding: 0;
    text-align: center;
    font-family: sans-serif;
    font-size: 16;
    color: darkGray;
}


.shadow-box{
    width:55vmin;
    margin:auto;

    -webkit-border-radius: .8vmin;
    -moz-border-radius: .8vmin;
    border-radius: .8vmin;
    border-width: 0px;

    font-size: 8vmin;
    /* line-height: 5vmin; */
    font-weight: bold;

    background-color: rgba(0, 0, 0, .1);
    border-radius: 2vmin;
    user-select: none;
    -moz-user-select: none;
    color:#e6e9ee;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;

}

@media screen and (orientation:portrait){
    .players-box{
        width:70vmin;
    }
}

.score-box{
    width:80vmin;
    padding:3vmin;
}



.trophy-img{
    line-height: 5vmin;
    height: 6vmin;
    vertical-align: middle;
    align-content: center;
}

#players-score-list{
    line-height:4.3vmin;
    margin-left: 4.5vmin;
    /* we use left text align for our loading bar lol... it has a check at the end of the line that isn't monospace that was triggering me when it ch */
    text-align: left; 
    font-size:5vmin;
    font-family: 'Courier New', Courier, monospace;
    /* make whitespaces visible */
    white-space: pre;
}
#players-score-title{
    font-size:5vmin;
    line-height:4.3vmin;
    margin:0 0 2vmin 0;
    font-family: 'Courier New', Courier, monospace;
}


#group-score-message{
    font-size: 5vmin;
    font-weight: bold;
    margin:2vmin;
}

#num-players{
    font-size: 2.5vmin;
    padding:1vmin;
}


.group-panel-footer{
    position: absolute;
    margin-top:-10vmin;
    width:100%;
    font-size:3vmin;
    font-weight: bold;
    line-height:3.7vmin;
    left:0;
}
@media screen and (orientation:portrait){
    .group-panel-footer{
        user-select: none;
    }
}
.group-panel-outside-footer{
    font-size:2vmin;
    line-height:3.7vmin;
    font-weight: bold;
    font-family:Ubuntu, Arial, Helvetica, sans-serif;
    margin-bottom: 1vmin;
}
@media screen and (orientation:portrait){
.group-panel-outside-footer{
    margin-bottom: 0vmin;
}
}

.groupid-txtbox {
    cursor:text;
    color: #585959;

    /* width: 440;
    height: 96; */
    /* font-size: 60; */
    vertical-align: middle;
    text-align: left;
    padding: 5px;
    border-radius: 1vmin;
    background-color: #E7F2F2;

    margin:1vmin;
    margin-right: 0;
    width: 28vmin;
    height: 7.8vmin;
    font-size: 5vmin;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif
}
.groupid-txtbox::placeholder{
    color: #dfdfdf;
}
.groupid-txtbox:focus::placeholder{
    color: transparent;
}
/* get rid of ugly outline google chrome adds */
.groupid-txtbox:focus{ 
    outline:0;
 }
@media screen and (orientation:portrait) {
    .groupid-txtbox, .groupid-txtbox:focus{
    width: 48vw;
    height: 16vw;
    font-size: 11vw;
    margin: 2vw;
    }
}
#group-form{
    display:none;
    height:100vmin;
}

@media screen and (orientation:portrait) {
#group-form{
    height:unset;
    width: 90vmin;
}
}

#group-score-form{
    display:none;
    height:100vmin;
}

.go-back{
    user-select: none;
    display:inline-block;
    position: initial;
    /* left:1vmin; */
    bottom:0;
    color:#81f869;
    font-size: 2.5vmin;
    font-weight: bold;
}
.go-back:hover,
.go-back:focus {
    text-decoration: none;
    color:#2ef307;
}
.go-back[disabled="true"]{
    pointer-events: none;
}
.go-back[disabled="false"]{
    pointer-events: none;
}
@media screen and (orientation:portrait){
    .go-back{
        font-size: 4.5vmin;
    }
}

#host-game{
    margin-top:2vmin;
}

#group-player-options{
    display:none;
}

.cancelQueue-div{
    color:#ffc66c;
    font-weight: bold;
    pointer-events:all;
}

#solo-cancelQueue-btn:hover,
#solo-cancelQueue-btn:focus {
    text-decoration: none;
    color:#ffc66c;
}


#solo-leaderboards-time{
    display:block;
    align-content: center;
    /* position: absolute; */
    margin:auto;
    margin-left: 0;
    padding:auto;
    user-select: none;
    font-size: 2vmin;
    line-height: 2.6vmin;
    width:34vmin;
    font-weight: bold;
}


.solo-leaderboards-innerbox{
    margin:1.5vmin;
    margin-top:0px;
    padding:auto;
    /* stop from overflowing over the div */
    overflow:hidden;
}

#solo-leaderboards-list{
    font-size: 2vmin;
    line-height: 2.2vmin;
    text-align: left;
}

#solo-leaderboards-list-time{
    margin-bottom: 2vmin;
    /* factor in members size to the size of this div */
    overflow:hidden; 
}

.solo-leaderboards-minsago{
    font-size: 1.3vmin;
    color:#d5d5d5;
    /* dont let this affect line height */
    line-height:0vmin;
}

.solo-leaderboards-name{
    max-width:25vmin;
    text-align: left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.solo-leaderboards-title{
    line-height: 2vmin;
    margin:1vmin;
    font-size:2vmin;
    font-weight: bold;
}


#leaderboards-container{
    display: inline-block;
    position: absolute;
    left:-35vmin;
    top:10vmin;
}

 
/* this is to prevent the scoreboard from being cutoff when the page is right about to turn into portrait mode */
@media (orientation:landscape) and (max-aspect-ratio: 6/5){
    #solo-leaderboards-list{
        font-size: 1vmin;
    }
    #solo-leaderboards-time{
        font-size:2vmin;
        line-height: 2vmin;
        width:24vmin;
    }
    .solo-leaderboards-title{
        line-height: 3vmin;
        font-size:2vmin;
    }
    .solo-leaderboards-minsago{
        display:none;
    }
}


/* i think the play is to remove the leaderboards in mobile mode, the more I think about it the more it makes sense..
mobile players dont NEED the leaderboards, they're never gonna get on it, and I could use the space for connection shit.. */
@media screen and (orientation:portrait) {
    #leaderboards-container{
        display:none;
    }
}

@media screen and (orientation:portrait) {
.join-btn{
    display: inline-block;
    width:30vmin;
}
}



/* we want to make the title stay in the same spot so we fake the heights */
@media screen and (orientation:portrait) {
    #name-form{
        height:160vmin;
        margin-top:auto;
        margin-bottom:auto;
        top:0;
        bottom:0;
    }
    #group-form{
        margin-top:auto;
        margin-bottom:auto;
        top:0;
        bottom:0;
    }
    #solo-form{
        height:110vmin;
        margin-top:auto;
        margin-bottom:auto;
        top:0;
        bottom:0;
    }

    #group-score-form{
        height:140vmin;
        margin-top:auto;
        margin-bottom:auto;
        top:0;
        bottom:0;
    }
}

@media screen and (min-aspect-ratio:70/115) and (orientation:portrait) {
    .solo-title{
        display:none;
    }
}

/* shrink the title to give us more room when we are approaching square */
@media screen and (min-aspect-ratio:80/115) and (orientation:portrait) {
#solo-form{
    height:120vmin;
    margin-top:auto;
    margin-bottom:auto;
    top:0;
    bottom:0
}
.solo-title{
    display:none;
}
.ioparty-image-mobile{
    height:10vmin;
    width: calc(10vmin*2.8951612903225806451612903225806);
    margin-top:0;
}
#group-form{
    margin-top:auto;
    margin-bottom:auto;
    top:0;
    bottom:0
}
#name-form{
    height:120vmin;
}
}

#players-list{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    margin-top:2vmin;
}
.group-players-list{
    font-size:4vmin;
    line-height: 4.8vmin;
}
@media screen and (orientation:portrait) {
    .group-players-list{
        font-size:7vmin;
        line-height: 9vmin;
    }
}

.loggedInButtons{
    display:none;
}


.play-btn-container{
    position:relative;
    margin-top:1.5vmin; 
    height:7.5vmin;
}
@media screen and (orientation:portrait) {
    .play-btn-container{
        height: 14.2vmin;
    }
}

.play-btn{
    display:inline-flex;
    justify-content: center;
    align-items: center;
    
    cursor: pointer;
    user-select: none;
    width: 40vmin;
    height: 7.8vmin;


    background-color: #F95D60;
    color: #E7F2F2;

    border-color: #B24345;
    border-width: .4vmin;
    border-style: solid;
    border-radius: 2vmin;

    box-shadow: 0 1.5vmin #B24345;

    font-size: 4.5vmin;
    font-weight: bold;
    font-family: Arial Black, Helvetica, sans-serif;
}
.play-btn:hover,
.play-btn:focus {

    /* css styling removes button border on hover */
    border-color: #B24345;
    border-width: .4vmin;
    border-style: solid;
    border-radius: 2vmin;

    text-decoration: none;
    color:#E7F2F2; 
    background-color: #df5053;
    box-shadow: 0 1.5vmin #B24345;
    width: 42vmin;
    height: 8.2vmin;
    margin-bottom:-.2vmin;
    margin-top:-.2vmin;
}
.play-btn:active,
.play-btn.active {
    text-decoration: none;
}
@media screen and (orientation:portrait) {
    .play-btn{

        border-color: #B24345;
        border-width: .6vmin;
        border-style: solid;
        border-radius: 4vmin;

        font-size: 8vmin;
        width: 70vmin;
        height: 14.2vmin;
        margin-top:.2vmin;
        padding-top:0vmin;
        box-shadow: 0 2vmin #B24345;
    }
    .play-btn:hover,
    .play-btn:focus {

        border-color: #B24345;
        border-width: .6vmin;
        border-style: solid;
        border-radius: 4vmin;

        width: 70vmin;
        padding-top:0vmin;
        height: 14.2vmin;
        margin-bottom:0vmin;
        margin-top:.2vmin;
        box-shadow: 0 2vmin #B24345;
    }
}


.createjoin-btn{
    width: 19.5vmin;
    height: 7.8vmin;
    font-size: 4.5vmin;
    font-weight: bold;
    font-family: Arial Black, Helvetica, sans-serif;

    user-select: none;

    display:inline-flex;
    justify-content: center;

    border-style:solid;
    border-color:#415DAF;
    border-width: .4vmin;
    border-radius: 2vmin;

    color: #E7F2F2;
    cursor: pointer;
    vertical-align: text-top;
    background-color: #577CEA;
    box-shadow: 0 1.5vmin #415DAF;
    margin-left:.25vmin;
    margin-right:.25vmin;
    padding-left:0;
    padding-right:0;
}
.createjoin-btn:hover,
.createjoin-btn:focus {

    /* css styling removes button border on hover */
    border-style:solid;
    border-color:#415DAF;
    border-width: .4vmin;
    border-radius: 2vmin;

    text-decoration: none;
    color:#E7F2F2; 
    background-color: #5072d6;
    box-shadow: 0 1.5vmin #415DAF;
    width: 21.5vmin;
    height: 8.2vmin;
    margin-bottom:-.2vmin;
    margin-top:-.2vmin;
}
.createjoin-btn:active,
.createjoin-btn.active {
    text-decoration: none;
}

.join-btn:hover,
.join-btn:focus{
    margin-right:-1.75vmin;
}
.create-btn:hover,
.create-btn:focus {
    margin-left:-1.75vmin;
}
@media screen and (orientation:portrait) {
    .createjoin-btn{
        font-size: 8vmin;
        width: 33vmin;
        height: 14.2vmin;
        align-items: center;
        margin-top:.2vmin;
        padding-top:0vmin;
        margin:1vmin;
        box-shadow: 0 2vmin #415DAF;

        border-style:solid;
        border-color:#415DAF;
        border-width: .6vmin;
        border-radius: 4vmin;
    
    }
    .createjoin-btn:hover,
    .createjoin-btn:focus {
        width: 33vmin;
        padding-top:0vmin;
        height: 14.2vmin;
        margin-bottom:0vmin;
        margin-top:.2vmin;
        margin:1vmin;
        box-shadow: 0 2vmin #415DAF;

        border-style:solid;
        border-color:#415DAF;
        border-width: .6vmin;
        border-radius: 4vmin;

    }
}

.main-panel{
    /* background-color: #0d0d0d0c; */
    border-radius: 2vmin;
    text-align:center;
    font-weight: bold;
    display:inline-block;
    position:relative;
    width:50vmin;
    height:50vmin;
}
@media screen and (orientation:portrait) {
.main-panel{
    background-color: unset;
    height:auto;
    width:100%;
}
}

.main-panel-group{
    height:54vmin;
    background-color: #eaf4f414;
}
@media screen and (orientation:portrait) {
    .main-panel-group{
        width:100%;
        height:90vmin;
        padding-bottom:0vmin;
    }
}

.main-panel-solo{
    height:46vmin;
    user-select: none;
}
@media screen and (orientation:portrait) {
    .main-panel-solo{
        height: 110vmin;
        /* height:58vmin; */
        width:84vmin;
        margin-left:auto;
        margin-right:auto;
        visibility: visible;
        padding-bottom:0vmin;
    }
}

@media screen and (orientation:portrait) {
.gray-outlined-panel{
    margin-left:0vmin;
    margin-right:0vmin;
    border-radius: 2vmin;
    height:100%;
}
}




.menu-side-block-right{
    display: inline-block;
    width:30vmin;
    margin-left:2vmin;
    vertical-align: top;
}
@media screen and (orientation:portrait) {
    .menu-side-block-right{
        display:none;
    }
}
@media (orientation:landscape) and (max-aspect-ratio: 115/100){
    .menu-side-block-right{
        display:none;
    }
}

.menu-side-block-left{
    display: inline-block;
    width:30vmin;
    margin-right:2vmin;
    vertical-align: top;
}
@media screen and (orientation:portrait) {
    .menu-side-block-left{
        display:none;
    }
}
@media (orientation:landscape) and (max-aspect-ratio: 115/100){
    .menu-side-block-left{
        display:none;
    }
}

.gray-box{
    background-color: #eaf4f414;
    border-radius: 2vmin;
    font-size: 2.7vmin;
    padding-top: 2vmin;
    padding-bottom:2vmin;
    user-select: none;
    -moz-user-select: none;
    color:#e6e9ee;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
}

.achievements{
    cursor: pointer;
    background-color: #eaf4f414;
    border-radius: 2vmin;
    font-size: 2.7vmin;
    margin-top: 13vmin;
    padding-top: 2vmin;
    padding-bottom:2vmin;
    user-select: none;
    -moz-user-select: none;
    color:#e6e9ee;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
}

.menu-skins-title-img{
    width:10vmin;
}
.menu-awards-title-img{
    width:13vmin
}

.skins{
    cursor:pointer;
    display: inline-block;
    width: 30vmin;
    background-color: #eaf4f414;
    border-radius: 2vmin;
    font-size: 2.7vmin;
    margin-top: 13vmin;
    padding-top: 2vmin;
    padding-bottom:2vmin;
    user-select: none;
    -moz-user-select: none;
    color:#e6e9ee;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
}

.achievements-mobile{
    display:none;
}
@media screen and (orientation:portrait) {
.achievements-mobile{
    position:relative;
    display: flex;
    flex-wrap: wrap;
    width: 84vmin;
    background-color: #eaf4f414;
    border-radius: 2vmin;
    font-size: 4.7vmin;
    margin-top: 2vmin;
    margin-left: auto;
    margin-right:auto;
    padding-top: 2vmin;
    padding-bottom:2vmin;
    user-select: none;
    -moz-user-select: none;
    color:#e6e9ee;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
}
}

@media screen and (min-aspect-ratio:90/115) and (orientation:portrait) {
.achievements-mobile{
    display:none;
}
}

@media (orientation:portrait){
    .achievements-mobile-title{
        font-size:6vmin;
        line-height:6vmin;
        text-align: center;
        vertical-align: middle;
        font-weight: bold;
        margin:auto;
        display:inline-block;
        justify-content: center;
        justify-self: center;
    }
}

.achievements-txt{
    line-height: 3.2vmin;
    font-size: 2.7vmin;
}
.achievements-txt-mobile{
    margin:auto;
    margin-left: 2vmin;
    font-weight: bold;
}

.skins-img{
    display:inline-block;
    margin-left:3vmin;
    margin-right:3vmin;
    width:12vmin;
    z-index: 10000;
}

.achievements-img{
    display:inline-block;
    margin-top:2vmin;
    margin-left:3vmin;
    margin-right:3vmin;
    width:8vmin;
    height:8vmin;
}
@media screen and (orientation:portrait){
    .achievements-img{
        width:10vmin;
        height:10vmin;
        margin-top:0vmin;
        margin-top:0vmin;
        margin-right:0vmin;
    }
}

.achievements-subtxt{
    color:#e6e9ee9a;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
    line-height: 1.7vmin;
    font-size: 1.2vmin;
}

.achievements-block-mobile{
    display:inline-flex;
    flex:1;
}

.achievements-subtxt-mobile{
    color:#e6e9ee;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
    line-height: 2.2vmin;
    font-size: 1.7vmin;
    margin:auto;
}

@media (orientation:portrait){
    .achievements-subtxt-mobile{
        position: absolute;
        bottom:0;
        left:0;
        right:0;
        text-align:center;
        margin:auto;
    }
}
.flex-break{
    height:0;
    flex-basis: 100%;
}

.solo-title{
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
    font-weight: bold;
    line-height: 3.3vmin;
    font-size: 3.3vmin;
    letter-spacing: -.1vmin;
    opacity: .75;
}
@media screen and (orientation:portrait) {
    .solo-title{
    line-height: 6vmin;
    font-size: 6vmin;
    }
}

.group-title{
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
    font-weight: bold;
    line-height: 3.3vmin;
    font-size: 3.3vmin;
    letter-spacing: -.1vmin;
}
@media screen and (orientation:portrait) {
.group-title{
    padding-top:2vmin;
}
}

#solo-form-score {
    font-size: 15vmin;
    letter-spacing: -1vmin;
    padding:0px;
    line-height: 15vmin;
    vertical-align: middle;
}

@media screen and (orientation:portrait) {
    #solo-form-score {
        font-size: 20vmin;
        line-height: 18vmin;
        width:auto;
    }
}

.solo-runinfo-container{
    margin-top:1vmin;
    vertical-align: middle;
    display:flex;
    justify-content: center;
    align-items: center;
}
.solo-runinfo-extralivesx{
    font-size: 6vmin;
    vertical-align: middle;
    opacity: .75;
}
@media screen and (orientation:portrait){
    .solo-runinfo-extralivesx{
        font-size: 10vmin;
        vertical-align: middle;
        opacity: .75;
    }
}
.solo-runinfo-extralives{
    vertical-align: middle;
    font-size: 10vmin;
    opacity: .75;
}
@media screen and (orientation:portrait){
    .solo-runinfo-extralives{
        vertical-align: middle;
        font-size: 14vmin;
        opacity: .75;
    }
}
.solo-runinfo-badge{
    width:18vmin;
    height:18vmin;
    margin-bottom: -1vmin;
}
@media screen and (orientation:portrait){
    .solo-runinfo-badge{
        width:45vmin;
        height:45vmin;
        margin-bottom: -1vmin;
    }
}

.solo-menu{
    width:60vmin;
    /* background-color: #0d0d0d0c; */
    border-radius: 2vmin;
    padding-bottom: 2vmin;
    margin-left:auto;
    margin-right:auto;
}
@media screen and (orientation:portrait) {
    .solo-menu{
        margin-top:2vmin;
        width:100%;
        background-color: unset;
    }
}


.gobackrestart-btn{
    user-select: none;
    display:inline-block;
    text-align:center;
    color: #B3B8B2;
    cursor: pointer;
    vertical-align: middle;
    background-color: #F8FFF6;
    margin-left:.25vmin;
    margin-right:.25vmin;
    border-radius: 1vmin;
    width: 22vmin;
    font-size: 2vmin;
    height: 7.8vmin;
    line-height: 7.8vmin;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif
}
.gobackrestart-btn:hover,
.gobackrestart-btn:focus {
    text-decoration: none;
    color:#B3B8B2; 
}
@media not all and (orientation:portrait) {
.gobackrestart-btn:hover,
.gobackrestart-btn:focus {
    height:8.8vmin;
    margin-top:-.5vmin;
    margin-bottom:-.5vmin;
}
}
.gobackrestart-btn:active,
.gobackrestart-btn.active {
    text-decoration: none;
}

@media screen and (orientation:portrait) {
    .gobackrestart-btn{
        font-size: 6vmin;
        width: 42vmin;
        height: 14.2vmin;
        margin-top:.2vmin;
        padding-top:0vmin;
    }
}

.gobackrestart-btn-short{
    width: 15vmin;
}
@media screen and (orientation:portrait) {
.gobackrestart-btn-short{
    font-size: 4vmin;
}
}

@media screen and (orientation:portrait) {
    .makePublic-btn{
    width: 25vmin;
    font-size: 3vmin;
    }
}


.groupstart-btn{
    user-select: none;
    display:inline-block;
    text-align:center;
    color: #66C34D;
    cursor: pointer;
    vertical-align: middle;
    background-color: #82F962;
    margin-left:.25vmin;
    margin-right:.25vmin;
    border-radius: 1vmin;
    width: 15vmin;
    font-size: 3vmin;
    height: 7.8vmin;
    line-height: 7.8vmin;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif
}
.groupstart-btn:hover,
.groupstart-btn:focus {
    text-decoration: none;
    color:#66C34D; 
}
.groupstart-btn:active,
.groupstart-btn.active {
    text-decoration: none;
}

@media screen and (orientation:portrait) {
.groupstart-btn{
    font-size: 6vmin;
    width: 25vmin;
    height: 14.2vmin;
    margin-top:.2vmin;
    padding-top:0vmin;
}
}



#overlay{
    display: none;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.gray-overlay{
    top:0;
    left:0;
    position: absolute;
    display:inline-block;
    background-color: rgba(0, 0, 0, 0.59);
    width:100%;
    height:100%;
    z-index: 300;
}

.overlay-grid{
    display: flex;
    width:100%;
    height:100%;
    z-index: 400;
    position: absolute;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.overlay-box{
    z-index: 400;
    padding: 3vmin 5vmin;
    border-radius: 1vmin;
    display:flex;
    flex-direction: column;
    background-color:#e2e2e2;
    margin: auto;
    justify-content: center;
    align-items: center;
    pointer-events:all;
}

.overlay-box-seethrough{
    pointer-events:none;
    background-color: transparent;
}
.run-end-white-box-container{
    pointer-events: all;
}
.run-end-celebration-canvas-overlay{
    pointer-events: all;
}
.achievements-overlay-table-prompt-container{
    pointer-events: all;
}



.btn{
    pointer-events: all;
    margin:1vmin;
    user-select: none;

    display:inline-flex;
    justify-content: center;
    align-items: center;

    color: #5d5e5d;
    background-color: #F8FFF6;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 1vmin;
    width: 25vmin;
    height: 7.8vmin;
    font-size: 4vmin;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
    outline-width: 0;
    border:none;
}
.btn:hover,
.btn:focus {
    border:none;
    text-decoration: none;
    color: #5d5e5d;
    outline-width: 0;
}
.btn:active,
.btn.active {
    border:none;
    text-decoration: none;
    outline-width: 0;
}


@media screen and (orientation:portrait) {
    .btnsocial{
        width:50vmin;
        font-size:8vmin;
        height:15vmin;
        line-height: 15vmin;
        padding:0;
        margin:2vmin;
    }
}


.btn-purple{
    color:#E3EEF0;
    background-color: #535CAA;
}
.btn-purple:hover,
.btn-purple:focus {
    color:#E3EEF0;
}

.btn-blue{
    color:#E3EEF0;
    background-color: #577CEA;
    box-shadow: 0 1.5vmin #415daf;
    margin-bottom: 1.5vmin;
}
.btn-blue:hover,
.btn-blue:focus {
    color:#E3EEF0;
}

.btn-white{
    color:#595959;
    background-color: #F8FFF6;
    box-shadow: 0 1.5vmin #cccccc;
    margin-bottom: 1.5vmin;
}
.btn-white:hover,
.btn-white:focus {
    color:#595959
}


.btn-red{
    color:#E3EEF0;
    background-color: #A44D3A;
}
.btn-red:hover,
.btn-red:focus {
    color:#E3EEF0;
}

.login-prompt{
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    color:#595959;
    font-size:3vmin;
    font-weight: bold;
    margin:1vmin;
    margin-top: .5vmin;
    line-height: 3vmin;
}
@media screen and (orientation:portrait) {
    .login-prompt{
        font-size:6vmin;
        margin:3vmin;
    }
}

.groupid-prompt{
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    color:#595959;
    font-size:3vmin;
    font-weight: bold;
    margin:1vmin;
    margin-top: .5vmin;
    line-height: 3vmin;
}
@media screen and (orientation:portrait) {
    .groupid-prompt{
        font-size:10vmin;
        margin:5vmin;
    }
}



.btn-small{
    /* padding:0px;
    padding-top:1.0vmin; */
    text-align:center;
    width:15vmin;
}

.btn-mini{
    padding:0px;
    text-align:center;
    width:15vmin;
    font-size:2.5vmin;
    margin:.5vmin;
    line-height: 5vmin;
    height:5vmin;
}
.btn-mini[disabled]{
    opacity: 1;
}


.achievements-overlay-icon{
    width:12vmin;
    height:12vmin;
    margin:auto;
    justify-content: left;
}
.achievements-overlay-icon-gray{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
      -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
         filter: grayscale(100%); 
    opacity:.5;
}
.achievements-overlay-prompt{
    margin:auto;
    margin-left:2vmin;
    font-weight:bold;
    line-height: 4vmin;
    font-size:4vmin;
    color:#595959;
}

.achievements-overlay-prompt-container{
    display:flex;
    margin: auto;
}

.achievements-overlay-table{
    flex-direction: row; 
    width:70vmin;
    flex-wrap: wrap;
    margin:auto;
    margin-top:5vmin;
}

.achievements-overlay-table-prompt-container{
    display:flex;
    flex-direction: column;
    background-color:white;
    padding:2.5vmin;
    width:80vmin;
    border-radius:1vmin;
}

.loggedInPrompt{
    font-size:3vmin;
    font-weight: bold;
    margin:2vmin;
    margin-bottom: 1vmin;
}


.status-txt-dark{
    display:block;
    position: absolute;
    left:0;
    width:100%;
    margin:auto;
    margin-top:2vmin;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.9);
}

.main-status-container {
    margin:auto;
    margin-top:2vmin;
    background-color: #eaf4f414;
    border-radius: 2vmin;
    width:50vmin;
    font-weight: bold;
    font-size: 4vmin;
    line-height: 4vmin;
    user-select: none;
    font-family:Ubuntu, Arial, Helvetica, sans-serif;
    display:block;
}
@media screen and (orientation:portrait) {
    .main-status-container {
        width:88vmin;
        font-size: 6vmin;
        line-height: 6vmin;
        display:block;
    }
}

#queue-status{
    padding:3vmin;
    display:none;
}

.main-cancel-queue{
    font-size: 3vmin;
    line-height: 3vmin;
    margin-top:1vmin;
    font-weight: normal;
    cursor: pointer;
}
@media screen and (orientation:portrait) {
    .main-cancel-queue {
        font-size: 4vmin;
        line-height: 4vmin;
    }
}


.solo-status-container {
    margin:auto;
    position: absolute;
    left:0;
    right:0;
    top:-6.5vmin;
    margin-top:2vmin;
    border-radius: 2vmin;
    font-weight: bold;
    font-size: 3vmin;
    line-height: 4vmin;
    user-select: none;
    font-family:Ubuntu, Arial, Helvetica, sans-serif;
    display:block;
    pointer-events:none;
}
@media screen and (orientation:portrait) {
    .solo-status-container {
        width:88vmin;
        font-size: 5vmin;
        line-height: 5vmin;
        top:-7.5vmin;
        display:block;
    }
}

.login-btn{
    user-select: none;
    display:flex;
    text-align:center;
    color: #E7F2F2;
    vertical-align: middle;
    background-color: #577CEA;
    border-radius: 1vmin;
    width: 25vmin;
    height: 7.8vmin;
    font-size: 4vmin;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
}
.login-btn:hover,
.login-btn:focus {
    text-decoration: none;
    color:#E7F2F2; 
}
.login-btn:active,
.login-btn.active {
    text-decoration: none;
}

.solo-cancel-queue{
    font-size: 3vmin;
    line-height: 3vmin;
    margin-top:1vmin;
    font-weight: normal;
    cursor: pointer;
}
@media screen and (orientation:portrait) {
    .solo-cancel-queue {
        font-size: 4vmin;
        line-height: 4vmin;
    }
}


#queue-status-solo{
    padding:3vmin;
    display:none;
}



.createjoin{
    margin-top:3vmin;
    user-select: none;
}


@media screen and (orientation:portrait) {
    .btn-joincancel{
        padding:0px;
        padding-top:1.0vmin;
        text-align:center;
        width:25vmin;
        height:12vmin;
        font-size:6vmin;
    }
}

.group-host-options{
    margin-top:3vmin;
}
@media screen and (orientation:portrait) {
.group-host-options{
    margin-top:1vmin;
}
}


.solo-run-results{
    display:flex;
    justify-content: center;
    box-pack: center;
    box-align: center;  
    min-height: 10vmin;
}

.solo-run-medal-image{
    
    display: flex;
    /* allow stretching */
    max-width: 100%;
    max-height: 100%;
    min-width: 0%;
    min-height: 0%;
    /* scale properly */
    object-fit: contain;
}

.solo-run-place-text{
    /* center text */
    margin:auto;
}

.solo-run-medal{
    display:flex;
    flex-flow: row nowrap;
    align-items: stretch;
    align-self: stretch;
    flex-wrap: nowrap;
    justify-content: center;
    height:auto;
    width:auto;
    
}


.solo-run-center-medal{
    height:12vmin;
    margin:auto;
}

.solo-run-center-placement-main-text{
    font-size:12vmin;
}

.solo-run-center-placement-subtext{
    font-size: 6vmin;
    margin-left:-2vmin;
}

.solo-run-placement-text{
    display:inline-block;
    margin:auto;
    vertical-align: middle;
    margin-left:-2vmin;
}

.run-end-white-box-container{
    display:flex;
    flex-direction: column;
    background-color:white;
    padding:5vmin;
    width:80vmin;
    border-radius:1vmin;
}
@media screen and (orientation:portrait){
    .run-end-white-box-container{
        width:100vmin;
    }
}


.run-end-message{
    margin-top:2vmin;
    font-size: 5vmin;
    font-weight: bold;
    color:#363c3c;
}

.create-game-prompt{
    font-size: 4vmin;
    font-weight: bold;
    color: #707979;
}

.buylink{
    cursor: pointer;
}

.in-game-overlay-container{
    display:none;
    pointer-events: none;
    position:absolute;
    left:0;
    top:0;
    z-index: 1;
    width:100%;
    height:100%;
}

.in-game-solo-results-overlay-container{
    display:none;
    pointer-events: all;
    position:absolute;
    left:0;
    top:0;
    z-index: 2;
    width:100%;
    height:100%;
}
.in-game-overlay{
    display:flex;
    width:100%;
    height:100%;
    z-index: 3;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.in-game-grayout-overlay{
    background-color:black;
    opacity:0;
    filter: alpha(opacity=0);
    display:flex;
    width:100%;
    height:100%;
    z-index: 1;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: opacity .15s;
    transition-delay: 1s;
}
.in-game-minigame-title-overlay{
    user-select: none;
    background-color:#46464628;
    border-radius: 2vmin;
    padding:5vmin;
    padding-top:1vmin;
    padding-bottom:1vmin;
}
.in-game-minigame-image-and-title{
    user-select: none;
    margin:auto;
    display:flex;
    align-items:center;
}
.in-game-minigame-title{
    user-select: none;
    color:#EAEAEA;
    font-size: 4vmin;
    vertical-align:middle;

    font-weight: bold;
    font-family:Ubuntu, Arial, Helvetica, sans-serif;
}
.in-game-minigame-image{
    user-select: none;
    margin:auto;
    height:8vmin;
    margin-right:2vmin;
}

.privacy-policy-link{
    cursor: pointer;
    color:#707979;
}


.news{
    display: inline-block;
    position: fixed;
    width: 40vmin;
    overflow: visible;
    background-color: #0d0d0d0c;
    border-radius: 2vmin;
    font-size: 2.7vmin;
    margin-left: -102vmin;
    margin-top: 10vmin;
    padding-top: 2vmin;
    padding-bottom:2vmin;
    user-select: none;
    -moz-user-select: none;
    color:#e6e9ee;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
}
@media screen and (orientation:portrait) {
.news{
    display:none;
}
}

.news-img{
    height:12vmin;
}

.news-subtxt{
    margin-top:1vmin;
    font-size:2vmin;
}

/* solo progress bar */
.solo-progress-bar{
    font-size: 0;
}
.solo-progress-bar-cell{
    width: 4.5vmin;
    margin:0;
}
@media screen and (orientation:portrait){
    .solo-progress-bar-cell{
        width: 8vmin;
    }
}
.solo-progress-bar-final{
    width: 9vmin;
    margin:0;
}
@media screen and (orientation:portrait){
    .solo-progress-bar-final{
        width: 16vmin;
        margin:0;
    }
}
.solo-progress-bar-cell-and-arrow{
    display: inline-block;
    margin:.25vmin;
    position:relative;
    vertical-align: middle;
}
@media screen and (orientation:portrait){
    .solo-progress-bar-cell-and-arrow{
        margin:.25vmin;
    }
}
.solo-progress-bar-cell-and-arrow-final{
    display: inline-block;
    margin:.25vmin;
    vertical-align: middle;
}
.solo-progress-bar-cell-text{
    position: absolute;
    font-size:4.5vmin;
    top:0vmin;
    left:0vmin;
    width:4.5vmin;
    text-align: center;
    line-height: 8.3vmin;
    opacity: .25;
    color:black;
    font-weight: bold;
}
@media screen and (orientation:portrait){
    .solo-progress-bar-cell-text{
        font-size: 8vmin;
        line-height: 14vmin;
        width: 8vmin;
    }
}
.solo-progress-bar-cell-and-text{
    position: relative;
}


.solo-champ-progress-bar{
    margin-top: 2vmin;
    position: relative;
}
.solo-champ-progress-bar-img{
    /*I eyeballed this, its probably not the same height as the other cells but idk*/
    width:28vmin;
    height:7vmin;
}
@media screen and (orientation:portrait){
    .solo-champ-progress-bar-img{
        /*I eyeballed this, its probably not the same height as the other cells but idk*/
        width:50vmin;
        height:12.5vmin;
    }
}
.solo-champ-progress-txt{
    position: absolute;
    white-space: nowrap;
    width:28vmin;
    line-height: 7vmin;
    font-size: 3.5vmin;
    opacity: .25;
    color: black;
    font-weight: bold;
    vertical-align: middle;
}
@media screen and (orientation:portrait){
    .solo-champ-progress-txt{
        width:50vmin;
        line-height: 12.5vmin;
        font-size:  5.75vmin;
        opacity: .25;
    }
}

.solo-cutoff-icon{
    width: 6vmin;
    height: 6vmin;
}
@media screen and (orientation:portrait){
    .solo-cutoff-icon{
        width:8vmin;
        height:8vmin;
    }
}
.solo-cutoff{
    display:inline-flex;
    margin:auto;
    height:6vmin;
    font-size: 4vmin;
    line-height: 6vmin;
    justify-content: center;
}
.solo-runinfo-txt{
    margin-left:0vmin;
}
@media screen and (orientation:portrait) { 
    .solo-runinfo-txt{
        font-size:5vmin;
        margin-left:0vmin;
        line-height: 8vmin;
        height:8vmin;
        vertical-align:middle;
    }
}

.run-end-celebration-canvas{
    display:absolute;
    flex-direction: column;
    background-color:white;
    width:100vmin;
    border-radius:1vmin; 
    z-index: 1;
    height:auto;
}

.run-end-level-txt-prompt{
    z-index: 5;
    top:5vmin;
    font-size: 6vmin;
    line-height: 6vmin;
    font-weight: bold;
    margin:auto;
    color:#363c3c;
    user-select: none;
    pointer-events: none;
}
.run-end-level-txt{
    z-index: 5;
    font-size: 40vmin;
    line-height: 30vmin;
    font-weight: bold;
    user-select: none;
    pointer-events: none;
    color:#363c3c;
}

.run-end-celebration-canvas-overlay{
    opacity: 0;
    z-index: 5;
    pointer-events: none;
    position:absolute;
    width:100vmin;
    height:60vmin;
    transition: opacity .5s;
    transition-delay: 1s;
}

.run-end-celebration-canvas-overlay-animation{
    opacity:1;
}



#in-game-chooselevelcontainer{
    opacity:"0";
}
.changeopacity {
    transition: opacity .5s;
}

.in-game-level-select{
    display:flex;
    width:70vmin;
    flex-wrap:wrap;
    justify-content: center;
}
.in-game-minigame-level-select-title{
    user-select: none;
    background-color:#46464628;
    border-radius: 2vmin;
    padding:1.5vmin;
    text-align: center;
    display:inline-block;

    font-size: 2.8vmin;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif
}
@media screen and (orientation:portrait) { 
    .in-game-minigame-level-select-title{
        font-size: 4vmin;
        padding:2vmin;
    }
}

.in-game-level-select-image{
    width:8vmin;
    height:8vmin;
    margin:auto;
    display:block;
}
@media screen and (orientation:portrait) { 
    .in-game-level-select-image{
        width:12vmin;
        height:12vmin;
    }
}


.in-game-level-select-btn{
    user-select: none;
    display:inline-block;
    color: #E7F2F2;
    cursor: pointer;
    vertical-align: text-top;
    padding-top:1.2vmin;
    background-color: #577CEA;
    box-shadow: 0 1.5vmin #415DAF;
    border-radius: 1.5vmin;
    padding-left:0;
    padding-right:0;
    width: 10vmin;
    height: 10vmin;
    font-size: 4vmin;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
    margin:1vmin;
}
@media screen and (orientation:portrait) { 
    .in-game-level-select-btn{
        width: 14vmin;
        height: 14vmin;
    }
}

.in-game-level-select-btn:hover,
.in-game-level-select-btn:focus {
    text-decoration: none;
    color:#E7F2F2; 
    background-color: #5072d6;
    box-shadow: 0 1.5vmin #415DAF;
    /* width: 11vmin;
    height: 11vmin;
    padding-top:1.4vmin;
    margin:.5vmin; */
}
@media screen and (orientation:portrait) { 
    .in-game-level-select-btn:hover,
    .in-game-level-select-btn:focus {
        /* width: 15vmin;
        height: 15vmin;
        padding-top:1.4vmin;
        margin:.5vmin; */
    }
}
.in-game-level-select-btn:active,
.in-game-level-select-btn.active {
    text-decoration: none;
}

.in-game-level-select-random-btn{
    width: auto;
    height: auto;
    font-size: 3vmin;
    display:inline-block;
    padding:1.5vmin;
    margin:auto;
    margin-top:2vmin;
}
@media screen and (orientation:portrait) { 
    .in-game-level-select-btn{
        font-size: 5vmin;
    }
}
.in-game-level-select-random-btn:hover,
.in-game-level-select-random-btn:focus {
    width: auto;
    height: auto;
    margin:auto;
    margin-top:2vmin;
    padding:1.5vmin;
}
.in-game-level-select-random-btn:active,
.in-game-level-select-random-btn.active {
    text-decoration: none;
}

.in-game-minigame-level-select-title-container{
    display:block;
    text-align: center;
    margin-bottom: 2vmin;
}
.in-game-minigame-level-select-select-random-btn-container{
    display:block;
    text-align: center;
}
.in-game-level-chooser-container{
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index: 1;
    width:100%;
    height:100%;
}

.skins-btn-text{
    display:block;
    font-size:2.6vmin;
    line-height: 2.4vmin;
}

.moneys{
    background-color: #eaf4f414;
    border-radius: 2vmin;
    text-align: right;
    font-size: 4.2vmin;
    padding-top: 1vmin;
    padding-bottom:1vmin;
    margin-right: 1vmin;
    margin-left:1vmin;
    margin-top:1vmin;
    user-select: none;
    -moz-user-select: none;
    color:#e6e9ee;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
}
.money-amount{
    vertical-align: middle;
    margin-right: -.5vmin;
}
.money-icon{
    width:4vmin;
    height:4vmin;
    margin:auto;
    vertical-align: middle;
    margin-right:1vmin;
}
.money-icon-tiny{
    width:3vmin;
    height:3vmin;
    display:inline-block;
    vertical-align: top;
    margin:auto;
}

.change-skins-whitebox{
    width:80vmin;
    /* background-color:white; */
    background-color: #EAF4F4;
    border-radius:1vmin;
}

.change-skins-title{
    font-family:Ubuntu, Arial, Helvetica, sans-serif;
    color:#424242;
    border-radius: 2vmin;
    text-align: center;
    font-size: 4.2vmin;
    padding-top: 1vmin;
    padding-bottom:1vmin;
    margin-right: 1vmin;
    margin-left:1vmin;
    user-select: none;
    -moz-user-select: none;
    font-weight: bold
}

.skins-overlay-table{
    flex-direction: row; 
    width:72vmin;
    margin:auto;
    margin-top:2.5vmin;
    flex-wrap: wrap;
    display:flex;
    justify-content: flex-start;
}

.skins-overlay-icon-grayed{
    opacity:.25;
    filter:grayscale(1);
    width:12vmin;
    height:12vmin;
}
.skins-overlay-icon-lessgrayed{
    opacity:1;
    filter:none;
    width:12vmin;
    height:12vmin;
}
.skins-overlay-icon-selected{
    width:14vmin;
    height:14vmin;
    margin:-1vmin;
    filter:none;
    opacity:1;
}

.skins-overlay-icon{
    transition: all .05s;
    cursor:pointer;

    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}
.skins-overlay-icon:hover{
    /* opacity:1; */
    width:14vmin;
    height:14vmin;
    margin:-1vmin;
}
.skins-overlay-container{
    width:12vmin;
    height:12vmin;
}

.moneys-container-skins{
    display:inline-block;
    margin:2vmin;
    font-size: 4.2vmin;
    user-select: none;
    -moz-user-select: none;
    color:#424242;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
}



.money-conversion-upperText{
    font-size:4vmin;
    line-height: 3vmin;
    font-weight: bold;
}

.money-conversion-lowerText{
    font-size:2.5vmin;
    line-height: 2vmin;
    font-weight: bold;
}
.money-conversion-container{
    margin:auto;
    display:inline-block;
    padding:unset;
}
.btn-medium{
    /* padding:0px;
    padding-top:1.0vmin; */
    text-align:center;
    width:18vmin;
}

.minigame-skins-btn-collection{
    margin:2vmin;
    pointer-events: all;
    width: auto;
    display: inline-block;
}

.gray-overlay-2{
    top:0;
    left:0;
    position: absolute;
    display:inline-block;
    background-color: rgba(0, 0, 0, 0);
    width:100%;
    height:100%;
    z-index: 402;
}

.overlay2-grid{
    display: block;
    width:100%;
    height:100%;
    z-index: 405;
    position: absolute;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

#overlay-2{
    display: none;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.select-skin-overlay{
    pointer-events: all;
    display:block;
    background-color: white;
    border-radius: 1vmin;
    position:absolute;
    z-index: 600;
    /* prevent images from wrapping when they go towards the edge of the doc */
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
}

.skins-select-img{
    margin:1vmin;
    display:inline-block;
    width:12vmin;
    z-index: 10000;
    cursor:pointer;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none
}

.money-icon-skinprice{
    width:1vmin;
    height:1vmin;
    margin:auto;
    vertical-align: middle;
    margin-right:.25vmin;
    margin-top:0;
    margin-bottom:0;
    line-height: 1vmin;
}

.skin-price-txt{
    vertical-align: middle;
    font-weight: bold;
    margin-right: -.1vmin;
    margin-top:0;
    margin-bottom:0;
    margin-left:.4vmin;
    font-size:2.4vmin;
}

.floating-skin-price{
    display:inline;
    position:absolute;
    margin-top:9vmin;
    background-color: white;
    border-color:#5d5e5d;
    border-width: .35vmin;
    border-style: solid;
    border-radius: 1.5vmin;
    color:#5d5e5d;
    line-height: 2.25vmin;
    z-index: 1;
    user-select: none;
    pointer-events: none;
}

.skins-select-img-grayed{
    opacity: .5;
    z-index: -1;
}

.buy-skin-block{
    pointer-events: all;
    display:block;
    background-color: white;
    border-radius: 1vmin;
    width:60vmin;
    z-index: 600;
    padding:10vmin;
}

.money-price{
    vertical-align: middle;
    margin-right: -.5vmin;
}

.buy-skin-img{
    width:25vmin;
    height:25vmin;
    transition: all .05s;
    margin:0;
    user-select: none;
}

.buy-skin-title{
    font-family:Ubuntu, Arial, Helvetica, sans-serif;
    color:#424242;
    border-radius: 2vmin;
    text-align: center;
    font-size: 6.2vmin;
    margin-right: 1vmin;
    margin-left:1vmin;
    user-select: none;
    -moz-user-select: none;
    font-weight: bold
}

.price-container-skins{
    display:inline-block;
    margin:0vmin;
    font-size: 6.2vmin;
    user-select: none;
    -moz-user-select: none;
    color:#424242;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
}

.price-icon{
    width:5vmin;
    height:5vmin;
    margin:auto;
    vertical-align: middle;
}


.buy-skin-buttons{
    margin-top:2vmin;
    user-select: none;
}

.server-message-headerfooter{
    font-family:Ubuntu, Arial, Helvetica, sans-serif;
    color:#424242;
    border-radius: 2vmin;
    text-align: center;
    font-size: 2.8vmin;
    margin-right: 1vmin;
    margin-left:1vmin;
    user-select: none;
    -moz-user-select: none;
    font-weight: bold
}

.server-message-text{
    margin-top:3vmin;
}
.login-moneys{
    min-width: 25vmin;
}

.claim-gold {
    margin-top:1vmin;
    font-size: 2vmin;
    width:30vmin;
}
.btn-claim{
    /* padding:0px;
    padding-top:1.0vmin; */
    width:25vmin;
    vertical-align: middle;
    height:6.5vmin;
    font-size:2vmin;
}
.btn-claim[disabled="true"]{
    pointer-events: none;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
      -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
         filter: grayscale(100%); 
    opacity:.5;
}
.btn-claim-mobile{
    height:7.8vmin;
}
.claim-gold-mobile{
    width:unset;
}

.only-display-narrowscreen{
    display:none;
}

@media screen and (orientation:portrait) {
    .only-display-narrowscreen{
        display:block;
    }
}
@media (orientation:landscape) and (max-aspect-ratio: 125/100){
    .only-display-narrowscreen{
        display:block;
    }
}

.money-icon-daily{
    width:3vmin;
    height:3vmin;
    display:inline-block;
}
.lvl-icon-daily{
    width:3vmin;
    height:3vmin;
    display:inline-block;
}

.btn-rng{
    padding:5px;
    width:7.8vmin;
    height:7.8vmin;
    margin:0;
}
@media screen and (orientation:portrait) {
    .btn-rng{
        width: 16vmin;
        height: 16vmin;
    }
}

.groupid-block{
    margin-bottom:1vmin;
}
.rng-image{
    width:4vmin;
}

@media screen and (orientation:portrait) {
    .rng-image{
        width: 10vmin;
        height: 10vmin;
    }
}

.claim-reward-cooldown-mobile{
    display:block;
    text-align: center;
}

.solo-run-results-icon-gray{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
      -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
         filter: grayscale(100%); 
    opacity:.5;
}
.solo-run-in-game-minigame-img{
    user-select: none;
    margin:auto;
    height:8vmin;
    margin-right:2vmin;
}
.in-game-minigame-solo-results-title{
    user-select: none;
    color:#EAEAEA;
    font-size: 4vmin;
    font-weight: bold;
    display:block;
    font-family:Ubuntu, Arial, Helvetica, sans-serif;
    margin-top:2vmin;
}
.in-game-minigame-title-overlay-solo-results{
    text-align: center;
    padding:5vmin;
}

.solo-run-in-game-minigame-img-up{
    margin-bottom:2vmin;
}
.solo-run-in-game-minigame-img-down{
    margin-top:2vmin;
}

.solo-results-first{
    display:none;
}

.solo-results-first-message{
    display: flex; align-items: center; justify-content: center;
}

@media screen and (orientation:portrait) {
    .solo-all-menu-items{
        position:absolute;
        bottom:2vmin;
    }
}

@media screen and (min-aspect-ratio:90/115) and (orientation:portrait) {
    .ioparty-image-mobile-group{
        display:none;
    }
}

@media screen and (min-aspect-ratio:100/115) and (orientation:portrait) {
    .solo-runinfo-badge{
        width:30vmin;
        height:30vmin;
    }
}

@media screen and (max-aspect-ratio:65/115) and (orientation:portrait) {
    .solo-runinfo-badge{
        width:65vmin;
        height:65vmin;
    }
    #solo-form{
        height:130vmin;
    }
}


.overlay-title{
    color: #585858;
    font-size: 8vmin;
    margin: 2vmin;
    position: relative;
    margin-bottom: -10vmin;
    font-weight: bold;
}

.gain-gold-prompt{
    display: flex;
    margin: 15vmin;
    justify-content: center
}

.gold-prompt-number{
    display:inline-block;font-size: 12vmin;margin-top: auto;margin-bottom: auto;color: #585858;
    font-weight: bold;
}

.overlay-footer{
    color: #585858;
    font-size: 3vmin;
    font-weight: bold;
    margin-bottom: 4vmin;
    position: relative;
    margin-top: -5vmin;
} 

.discord-btn-container{
    position:relative;
    margin-top:2.5vmin; 
    height:7.5vmin;
}
@media screen and (orientation:portrait) {
    .discord-btn-container{
        height: 14.2vmin;
    }
}


.discord-btn{
    text-decoration: none;
    display:inline-flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    color: #E7F2F2;
    cursor: pointer;
    vertical-align: middle;
    background-color: #577CEA;
    box-shadow: 0 1.5vmin #415DAF;
    border-radius: 1.5vmin;
    width: 45vmin;
    height: 7.8vmin;
    font-size: 4vmin;
    font-weight: bold;
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
}
.discord-btn:hover,
.discord-btn:focus {
    text-decoration: none;
    color:#E7F2F2; 
    background-color: #5072d6;
    box-shadow: 0 1.5vmin #415DAF;
    width: 48vmin;
    height: 8.2vmin;
    margin-bottom:-.2vmin;
    margin-top:-.2vmin;
}
.discord-btn:active,
.discord-btn.active {
    text-decoration: none;
}
@media screen and (orientation:portrait) {
    .discord-btn{
        font-size: 10vmin;
        width: 86vmin;
        height: 14.2vmin;
        margin-top:.2vmin;
        padding-top:0vmin;
        box-shadow: 0 2vmin #415DAF;
        border-radius: 2.5vmin;
    }
    .discord-btn:hover,
    .discord-btn:focus {
        width: 86vmin;
        padding-top:0vmin;
        height: 14.2vmin;
        margin-bottom:0vmin;
        margin-top:.2vmin;
        box-shadow: 0 2vmin #415DAF;
    }
}


.chatbox{
	display:flex;
	margin:auto;
	font-weight: bold;
	color:rgb(243, 243, 243);
	width: 50vmin;
	flex-direction: column;
	user-select: none;
	font-family: Arial, Helvetica, sans-serif;

	/* grow upwards */
	position:absolute;
	bottom:0vmin;
	left:0vmin;
	right:0vmin;
}

.chatbox_elem{
	align-self:flex-end;
	display:flex;
	margin:.5vh;
	background-color: rgba(0, 0, 0, 0.6);
	flex-direction: column;
	border-radius: 2vmin;

	transition: opacity .2s, transform .2s;
	transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	/* opacity: 0; width: 0vw; height:0vw; */
	opacity:0; transform:scale(.25);
	/* opacity:1; transform:scale(1); */

	/* make it less jagged due to antialiasing (this happens with the scale func) */
	-webkit-backface-visibility: hidden; 
	backface-visibility: hidden;
}

.chatbox_elem_title{
	display:block;
	text-align: center;
	color:rgb(8, 243, 8);
    margin-top:1vmin;
}
.chatbox_elem_message{
	margin:2vmin;
	margin-top:1vmin;
	display:block;
	text-align: center;
	word-wrap: break-word;
}

.chatbox_prompt{
	display:flex;
	width:50vmin;
	text-align: center;
	
	margin:.5vh;
	background-color: rgba(0, 0, 0, 0.6);
	flex-direction: column;
	border-radius: 2vmin;

	transition: opacity .2s, transform .2s;
	transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	opacity:1; transform:scale(1);

	/* make it less jagged due to antialiasing (this happens with the scale func) */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	margin:auto;
}
.chatbox_prompt_msg_container_mobile{
	display:block;
}
@media screen and (orientation:portrait) {
	.chatbox_prompt_msg_container_mobile{
		display:none;
	}
}



/* this is here just to position the prompt */
.chatbox_prompt_container{
	position: absolute;
	left:0;
	right:0;
	bottom:5vmin;
	margin:auto;
	user-select: none;
}

.chatbox_prompt_msg{
	margin:3vmin;
	display:block;
	font-weight: bold;
	color:rgba(243, 243, 243, 0.87);
	flex-direction: column;
	user-select: none;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 2.5vmin;
}

/* this is here just to position the prompt */
.chatbox_textbox{
	display:none;
	font-weight: bold;
	color:rgb(243, 243, 243);
	flex-direction: column;
	user-select: all;
	font-family: Arial, Helvetica, sans-serif;

    background-color: rgba(29, 29, 29, .7);
    border-style: none;
    border-radius: 2vmin;
    text-align: center;
    padding: 3vmin;
    margin: 0;
    font-size: 2.5vmin;
}


.chatbox_container{
	top:34vmin;
	position:absolute;
	width:100%;
	left:0;
	right:0;
}

.mobile_chat_img{
    width:10vmin;
    height:10vmin;
    margin:0;
}

.mobile_chat_btn{
	display:none;
	position:absolute;
	bottom:0;
	margin-bottom:1vmin;
    background-color: #3638388c;
    border-top-right-radius: 1vmin;
    border-bottom-right-radius: 1vmin;
    padding:1vmin;
}

/* only display this button on touchscreen */
@media (pointer:none), (pointer:coarse){
	.mobile_chat_btn{
		display:flex;
        pointer-events: all;
	}
}

.in-game-chat-overlay-container{
    display:none;
    pointer-events: none;
    position:absolute;
    left:0;
    top:0;
    z-index: 1;
    width:100%;
    height:100%;
}

.in-game-img-icon{
    user-select: none;
    cursor: pointer;
    height:3vmin;
}

.in-game-html-ui{
    position:absolute;
    pointer-events: none;
    top:0;
    right:0;
    display: flex;
    font-family: "Arial Black", "Ubuntu", "Arial";
    flex-direction: column;
    font-size:1.5vmin;
    font-weight: bold;
    background-color: #c7cad133;
    padding:auto;
    width:120px;
    color:#E7F2F2;
}

.middle-right{
    margin:auto;
    bottom:50%;
    right:0;
    position: absolute;
}

.in-game-share-container{
    z-index: 1;
    display:none;
}


.in-game-share-textbox{
    color:#505760;
    display:flex;
    margin:auto;
    margin-top:.5vmin;
    margin-bottom:1vmin;
}

.in-game-share-text{
    overflow-x: hidden;
    overflow-y: hidden;
    border:none;
    resize: none;
    border-radius: 5vmin;
    padding:.5vmin;
    font-size: 1.5vmin;
    font-family:"Arial Black","Ubuntu", "Arial";
    font-weight: bold;
    color:#505760;
    background-color: #e7f2f25e;
    width:18vmin;
    margin:auto;
    text-align: center;
    
    /* letter-spacing: -1px; */
}

.in-game-share-prompt{
    margin:auto;
    margin-top:1vmin;
    user-select: none;
    pointer-events: none;

}

.in-game-share-icon{
    user-select: none;
    pointer-events: all;
    cursor: pointer;
    height:3vmin;
    background-color: #595AC6;
    border-top-right-radius: 2vmin;
    border-bottom-right-radius: 2vmin;
}

.main-menu-btn-offset{
    display:inline;
    margin-bottom: .75vmin;
}

.skins-btn{
    cursor:pointer;
    user-select: none;
    height:7.8vmin;
    display:inline-flex;
    margin-left:-9vmin;
    position:absolute;
    padding-top:5px;
    padding-bottom:5px;
}

.skins-btn-image{
    /* this is here bc you shouldn't be able to select the textbox from clicking to the right of the button */
    padding-right:1.2vmin;
    margin:1vmin;
}


@media screen and (orientation:portrait) {
.skins-btn{
    height:14.2vmin;
    margin-left:-15vmin;
}
.skins-btn-image{
    /* this is here bc you shouldn't be able to select the textbox from clicking to the right of the button */
    padding-right:1.2vmin;
    margin:2vmin;
}
}
.sbtn{
    display:inline-flex;
    cursor:pointer;
    user-select: none;
    justify-content: center;
    /* get rid of underlining caused by hyperlink */
    text-decoration: none;
}

.sbtn-discord{

    height: 10vmin;
    width: calc(46/31*10vmin);
    margin:4.5vmin;
    font-weight: bold;
    font-family: Arial Black, Helvetica, sans-serif;

    border-radius: 2vmin;

    color: #E7F2F2;
    cursor: pointer;
    vertical-align: text-top;
    background-color: #577CEA;
    box-shadow: 0vmin 1vmin 1vmin rgba(0, 0, 0, 0.335);
}

.discord-icon-img{
    margin:2vmin;
}
.discord-icon-txt{
    font-size: 1.6vmin;
    margin:auto;
    margin-right:2vmin;
}

.shadow-box-group-score{
    width: fit-content;
    padding-left: 3vmin;
    padding-right: 3vmin;
    margin-top: 5vmin;
    padding-top: 4px;
    padding-bottom: 4px
}

.group-score-shadow-box-footer-container{
    position: relative;
    top: -3vmin;
    margin-left: 2vmin;
    margin-right: 2vmin;
    font-family: 'Courier New', Courier, monospace;
    font-size:1.8vmin;
}

.group-score-shadow-box-footer{
    position: absolute;
    font-weight: bold;
    pointer-events: none;
}

.group-score-shadow-box-footer-clickable-link{
    position: absolute;
}

.footer-green-link{
    pointer-events: all;
    cursor:pointer;
    user-select: none;
    color:#81f869;
    font-weight: bold;
    text-decoration: underline;
}
.footer-green-link:hover,
.footer-green-link:focus {
    text-decoration: none;
    color:#2ef307;
}
.footer-green-link[disabled="true"]{
    pointer-events: none;
}
.footer-green-link[disabled="false"]{
    pointer-events: none;
}


.group-score-party-link{
    user-select: all;
    pointer-events: all;
}