#avatar-box-1,#avatar-box-2{
    height:94%;
    width:9%;
    position: absolute;
    /*background-color: #ffebbd;*/
}

#avatar-box-1{
    top:3%;
    left: 3%;
}

#avatar-box-2{
    top:3%;
    right:3%
}

.avatars{
    height: 100%;
    width:100%;
    right:0;
    padding:0;
    overflow:visible;
    display: inline-block;
    justify-content: center;
    position: absolute;
    /*background-color: #daa7ff;*/
}

.avatar{
    height:20%;
    width: 100%;
    margin-bottom: 0;
    float:top;
    overflow:visible;;
    position:relative;
    /*border-radius: 8px;*/
    /*background-color: #FFD700;*/
}

.avatar-icon{
    height:63.834%;
    width:100%;
    border-radius: 300px;
    top:0;
    background-color: #6d6d6d;
    box-shadow: 1px 1px 1px 1px #b1b1b1;
    background-image:url(../img/unknown.svg);
    background-size: contain;
}

.avatar-ok,.avatar-wait,.avatar-disconnected{
    height:47.8755%;
    width:75%;
    border-radius: 300px;
    top:7.97925%;
    left:12.5%;
    position: absolute;
    opacity: 0.5;
    background-size: contain;
    display: none;
}

.avatar-ok{
    background-image:url(../img/ok.svg);
}

.avatar-wait{
    background-image:url(../img/wait.svg);
}

.avatar-disconnected{
    background-image:url(../img/disconnected.svg);
}

.avatar-name{
    height:20%;
    width:100%;
    border-radius: 1.5vh;
    overflow:hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break:keep-all;
    white-space:nowrap;
    font-size:0.8vw;
    box-shadow: 1px 1px 1px 1px #a9b494;
}

.avatar-name-full-display{
    overflow:visible;
}

.avatar-name span{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break:keep-all;
    white-space:nowrap;
    overflow:visible;
}

.avatar-name,.avatar-name span{
    background-color: #b5c19f;
}

.avatar-me{
    height:19.132%;
    width:30%;
    right:0;
    bottom:37%;
    border-radius: 300px;
    background-color: #73c0ff;
    /*box-shadow: 1px 1px 1px 1px #b1b1b1;*/
    background-image:url(../img/me.svg);
    background-size: contain;
    overflow:hidden;
    position: absolute;
    display:none;
}

.avatar-number{
    height:19.132%;
    width:30%;
    left:0;
    bottom:37%;
    border-radius: 300px;
    box-shadow:0 0 0 0.2vh #c0c460;
    background-color: #fdffbf;
    font-size:2vh;
    font-weight: bold;
    position: absolute;
    overflow:hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break:keep-all;
    white-space:nowrap;
    display:none;
}

.avatar-character{
     height:19.132%;
     width:30%;
     left:0;
     top:0;
     border-radius: 300px;
     /*background-color: #ff0a07;*/
     /*box-shadow: 1px 1px 1px 1px rgba(177, 177, 177, 0.79);*/
     position: absolute;
     display:none;
 }

.avatar-character .character-blue{
    background-color: blue;
}

.avatar-character .character-red{
    background-color: red;
}

.avatar-character .character-fairy{
    background-color: pink;
}

.avatar-character .character-blue-red{
    background: linear-gradient(90deg,blue 50%, red 50%);
}

.avatar-character .character-blue .character-fairy{
    background: linear-gradient(90deg,blue 50%, pink 50%);
}

.avatar-character .character-red .character-fairy{
    background: linear-gradient(90deg,red 50%, pink 50%);
}

.avatar-character .character-blue-red .character-fairy{
    background: linear-gradient(90deg,blue 33.33%,red 66.66%, pink 100%);
}

.avatar-leader{
    height:22.9584%;
    width:36%;
    right:0;
    top:0;
    border-radius: 300px;
    transform:rotate(25deg);
    background:url(../img/flag.svg);
    background-size: contain;
    /*background-color: #ff0a07;*/
    /*box-shadow: 1px 1px 1px 1px #b1b1b1;*/
    position: absolute;
    display:none;
}

.avatar-clickable .avatar-icon{
    cursor:pointer;
    box-shadow:0 0 0 0.2vh #138167
}

.avatar-clickable .avatar-icon:hover{
    box-shadow:0 0 0 0.4vh #DAA520;
}

.avatar-clickable .avatar-icon:active{
    box-shadow:0 0 0.6vh 0.9vh #DAA520;
}

.avatar-chosen{
    box-shadow:0 0 0.6vh 0.9vh #DAA520;
}

.avatar-clickable .avatar-chosen:hover{
    box-shadow:0 0 0.6vh 0.9vh #da752e;
}