#canvas {
    position: relative;
    margin: 0px auto;
    top: 0px;
    left: 0px;
    width: 100%;
    max-width: 820px;
    height: 50%;
    /*   background-color: #FFF;*/
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
    background-color: white;
}

#gameScreen .bottomBorder {
    position: relative;
    float: left;
    height: 1px;
    width: 100%;
    /*     background-color: bisque;
        background-image: url("images/black-linen-2.png");
       */
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

#gameScreen .bottomBorderIn {
    position: absolute;
    bottom: 0px;
    float: left;
    height: 1px;
    width: 100%;
    /*     background-color: bisque;
        background-image: url("images/black-linen-2.png");
       */
    border-top: 1px solid rgba(0, 0, 0, 0.3);
}

#gameScreen .gamePlayControls {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0px auto;
}

#gameScreen .mainBrushControls {
    position: relative;
    float: left;
    width: calc(100% - 40px);
}

#gameScreen .colorsWrapper {
    position: relative;
    float: left;
    top: 0px;
    height: 40px;
    width: 100%;
    /*     background-color: bisque;
        background-image: url("images/black-linen-2.png");
       */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    background-color: rgba(0,0,0,0.1);
    overflow: visible;
    z-index: 200;
}

    #gameScreen .colorsWrapper .colors {
        margin: 0px auto;
        position: relative;
        width: 290px;
    }

        #gameScreen .colorsWrapper .colors .hideShow {
            position: absolute;
            right: -20px;
            top: 7px;
            width: 20px;
            height: 20px;
            border: solid rgba(255,255,255,.9);
            border-width: 0 6px 6px 0;
            display: inline-block;
            padding: 3px;
            transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
            cursor: pointer;
            transform-origin: 62% 62%;
        }

        #gameScreen .colorsWrapper .colors .color-row {
            width: 100%;
            position: relative;
            float: left;
            height: 40px;
        }

        #gameScreen .colorsWrapper .colors .additionalColors {
            position: relative;
            float: left;
            width: 100%;
            height: 250px;
            display: none;
            background-color: #316792;
            background-image: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
            border-left: 1px solid rgba(255, 255, 255, 0.3);
            border-right: 1px solid rgba(0,0,0, 0.3);
        }

            #gameScreen .colorsWrapper .colors .additionalColors .color-row {
                margin-bottom: 5px;
            }


            #gameScreen .colorsWrapper .colors .additionalColors .bottomBorder {
                position: absolute;
                float: left;
                height: 1px;
                width: 100%;
                bottom: 0px;
                border-top: 1px solid rgba(255,255,255,.3);
            }

#gameScreen .colors .color {
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    margin-top: 4px;
    margin-left: 5px;
    border-radius: 5px;
    border-radius: 15px 3px 15px 3px / 13px 9px 13px 9px;
    opacity: 1;
    cursor: pointer;
}


#gameScreen #reportUser {
    background-image: url(images/report_icon.png);
    width: 40px;
    height: 40px;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    float: right;
    margin-top: -50px;
    margin-right: 10px;
    cursor: pointer;
    opacity: 0.7;
}

    #gameScreen #reportUser:hover {
        opacity: 1;
    }

.eraser {
    position: relative;
    float: right;
    width: 8%;
    height: 80%;
    margin-top: 1%;
    margin-right: 1%;
    border-radius: 5px;
    background-image: url('images/eraser.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px 3px 15px 3px / 13px 9px 13px 9px;
}

#gameScreen .colors .color#black {
    background-color: #000;
}

#gameScreen .colors .color#red {
    background-color: red;
}

#gameScreen .colors .color#green {
    background-color: green;
}

#gameScreen .colors .color#blue {
    background-color: blue;
}

#gameScreen .colors .color#orange {
    background-color: orange;
}

#gameScreen .colors .color#cyan {
    background-color: cyan;
}

#gameScreen .colors .color#magenta {
    background-color: magenta;
}

#gameScreen .colors .color#yellow {
    background-color: gold;
}

#gameScreen .brushSize {
    position: relative;
    float: left;
    margin-top: 0px;
    height: 210px;
    width: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    /*   background-color: darkgray;
        background-image: url("images/black-linen-2.png");
            background-color: rgba(0,0,0,0.1);
         */
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    background-color: rgba(0,0,0,0.1);
}

#gameScreen .additionalControls {
    position: relative;
    float: left;
    margin-top: 0px;
    height: 40px;
    width: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    /*   background-color: darkgray;
                background-image: url("images/black-linen-2.png");
                    background-color: rgba(0,0,0,0.1);
                 */
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    background-color: rgba(0,0,0,0.1);
}

#gameScreen .touch-target {
    width: 40px;
    height: 40px;
    position: relative;
    float: right;
}

#gameScreen .brushSize .touch-target .size {
    position: relative;
    float: left;
    margin-top: 1%;
    margin-right: 5%;
    background: #fFF;
    border-radius: 50%;
}

    #gameScreen .brushSize .touch-target .size#pico {
        margin-top: 17px;
        margin-left: 17px;
        width: 5px;
        height: 5px;
    }

    #gameScreen .brushSize .touch-target .size#small {
        margin-top: 15px;
        margin-left: 15px;
        width: 10px;
        height: 10px;
    }

    #gameScreen .brushSize .touch-target .size#medium {
        margin-top: 12px;
        margin-left: 12px;
        width: 15px;
        height: 15px;
    }

    #gameScreen .brushSize .touch-target .size#big {
        margin-top: 10px;
        margin-left: 10px;
        width: 20px;
        height: 20px;
    }

    #gameScreen .brushSize .touch-target .size#large {
        margin-top: 7px;
        margin-left: 7px;
        width: 25px;
        height: 25px;
    }

.sponge {
    position: relative;
    float: left;
    height: 34px;
    width: 50px;
    background-image: url('images/sponge.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 2px;
    margin-left: 10px;
    border-radius: 5px;
    /* transform: rotate(-5deg); */
    padding: 0px;
}

#gameScreen .brushSize .size.selected {
    border: 2px solid blue;
}

#gameScreen .brushStyle .style.selected {
    border: 2px solid white;
    border-radius: 3px;
}


#gameScreen .colors .color.selected {
    border: 4px solid #FFF;
}

#gameScreen .colors .eraser.selected {
    border: 2px solid #FFF;
}

#gameScreen .brushStyle {
    position: relative;
    float: left;
    margin-top: 0px;
    height: 50px;
    padding-top: 5px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    background-color: rgba(0,0,0,0.1);
    /*
        background-color: bisque;
        background-image: url("images/black-linen-2.png");
            */
}

    #gameScreen .brushStyle .touch-target .style#eraser {
        width: 40px;
        height: 40px;
        background-image: url("images/brush_eraser.png");
        background-position: center;
        background-size: contain;
        left: 0px;
    }

    #gameScreen .brushStyle .touch-target .style#pen {
        width: 40px;
        height: 40px;
        background-image: url("images/brush_pen.png");
        background-position: center;
        background-size: contain;
        left: 0px;
    }

    #gameScreen .brushStyle .touch-target .style#pencil {
        width: 40px;
        height: 40px;
        background-image: url("images/brush_pencil.png");
        background-position: center;
        background-size: contain;
    }

    #gameScreen .brushStyle .touch-target .style#brush {
        width: 40px;
        height: 40px;
        background-image: url("images/brush_brush.png");
        background-position: center;
        background-size: contain;
    }

    #gameScreen .brushStyle .touch-target .style#spray {
        width: 40px;
        height: 40px;
        background-image: url("images/brush_spray.png");
        background-position: center;
        background-size: contain;
    }

    #gameScreen .brushStyle .touch-target .style#bucket {
        width: 40px;
        height: 40px;
        background-image: url("images/brush_bucket.png");
        background-position: center;
        background-size: contain;
    }


#leaveRoom {
margin-left:0px;
}
#undo {
    width: 40px;
    height: 40px;
    background-image: url("images/brush_undo.png");
    background-position: center;
    background-size: contain;
}


.gameInfo {
    position: relative;
    float: left;
    width: 100%;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    padding: 0px 10px;
    pointer-events: none;
}

    .gameInfo .infoTitle {
        position: relative;
        float: left;
    }

    .gameInfo .timeRemained {
        position: relative;
        float: right;
    }

#timer {
    position: relative;
    float: right;
    z-index: 25;
    color: gold;
    width: 60px;
    font-family: "Courier New", Courier, monospace;
    font-size: 18px;
    font-weight: bold;
    line-height: 32px;
    margin-right: 5px;
    margin-left: 5px;
}

.pen {
    position: absolute;
    left: 30px;
    top: 0px;
    width: 30px;
    height: 30px;
    background-image: url("images/pen.png");
    background-size: cover;
}

.penControl {
    width: 60px;
    height: 70px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1000;
}

    .penControl .pan {
        position: absolute;
        top: 45px;
        left: -5px;
        width: 30px;
        height: 30px;
        background-color: red;
        opacity: 0.4;
    }

    .penControl .paint {
        position: absolute;
        top: 45px;
        left: 35px;
        width: 30px;
        height: 30px;
        background-color: blue;
        opacity: 0.4;
    }


ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

li {
    padding: 0px;
    margin: 0px;
}


button, input, textarea {
    cursor: pointer;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    background: transparent;
    padding: 1rem 1rem;
    margin: 0 1rem;
    color: #FFFFFF;
    font-size: 2rem;
    letter-spacing: 1px;
    outline: none;
    box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    background-color: #895f8a;
    background-image: url("images/mocha-grunge.png");
    margin-bottom: 10px;
    font-family: 'Patrick Hand SC', Arial, cursive;
    /*
  Above is shorthand for:
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  border-bottom-right-radius: 225px 15px;
  border-bottom-left-radius:15px 255px;
  */
}

textarea {
    font-size: 18px;
}

.webp-ok button, .webp-ok input {
    background-color: #895f8a;
    background-image: url("images/mocha-grunge.webp");
}

input {
    padding: 3px;
    font-size: 24px;
    height: 35px;
    width: 90%;
    line-height: 35px;
    outline: none;
}

button:hover, button:hover {
    box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3);
}


button.small {
    padding: 0.2rem;
    font-size: 1.2rem;
}

#startScreen {
    padding-top: 0px;
    overflow: hidden;
}

    #startScreen #settingsButton {
        width: 35px;
        height: 35px;
        background-image: url(images/gear.png);
        background-size: cover;
        position: absolute;
        right: 15px;
        bottom: 15px;
        cursor: pointer;
    }


#chooser {
    position: relative;
    display: block;
    width: 80%;
    max-width: 500px;
    margin: 0px auto;
    top: 20%;
    background-color: rgba(132, 8, 132, 0.97);
    background-image: url(images/grunge-img.png);
    padding: 20px;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    border: 2px solid black;
    color: white;
    text-align: center;
    box-shadow: 15px 15px 15px 0px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    max-height: 95%;
}

.webp-ok #chooser {
    background-image: url("images/grunge-img.webp");
}

#chooser .content p {
    margin-top: 5px;
    margin-bottom: 5px;
}


#chooser .content {
    max-height: 95%;
    overflow-x: hidden;
    width:100%;
}

#chooser h1, #chooser h2, #chooser h3 {
    margin-bottom: 5px;
    margin-top: 5px;
}
#chooser h2 {
    line-height: 25px;
}
#chooser .close {
    position: absolute;
    width: 40px;
    height: 40px;
    top: -8px;
    right: -8px;
    border: 2px solid black;
    border-radius: 20px;
    background-color: rgba(132, 8, 132, 0.97);
    color: white;
    line-height: 36px;
    font-weight: bold;
    cursor: pointer;
}

.footerButtons {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    pointer-events: none;
}

#winnerScreen .content .footerButtons {
    position: relative;
    float: left;
    margin-top: 20px;
}




#guessingArea {
    position: relative;
    float: left;
    margin-top: 10px;
    width: 90%;
    left: 5%;
    text-align: center;
}

    #guessingArea #guessingTerm {
        position: relative;
        font-size: 35px;
        color: #FFFFFF;
        display: inline-block;
        margin-right: 5px;
        clear: both;
        height: 45px;
        text-align: center;
        width: 100%;
    }
    #guessingArea #guessingVictory {
        position: relative;
        font-size: 32px;
        color: gold;
        display: inline-block;
        margin-right: 5px;
        clear: both;
        display:none;
        height:45px;
        line-height:45px;
        text-align:center;
        width:100%;
    }

        #guessingArea #guessingTerm .letter {
            position: relative;
            height: 40px;
            font-size: 35px;
            margin-right: 5px;
            color: #FFFFFF;
            width: 28px;
            display:inline-block;
        }
 .goldImportant {
        color: gold!important;

    }


#guessingArea #guessingTerm.bad .letter {
    color: darkred;
}

        #guessingArea #guessingTerm .letter.covered {
            border-bottom: 2px solid;
            width: 28px;
        }

        #guessingArea #guessingTerm .letter.hinted {
            color: lightblue;
        }

        #guessingArea #guessingTerm .letter.cursor {
            background-color: rgba(255, 255, 255, 0.3);
        }

    #guessingArea #keyboard {
        position: relative;
        font-size: 30px;
        color: #FFFFFF;
        display: inline-block;
        margin-right: 10px;
        margin-top: 20px;
        clear: both;
        max-width: 600px;
    }

    #guessingArea.guessedCorrectly #keyboard {
        color: lightgray;
    }
        #guessingArea.guessedCorrectly #keyboard .key, #guessingArea.guessedCorrectly #keyboard .key.backspace {
            border: 2px solid lightgray;
        }
        #guessingArea #keyboard .key {
            position: relative;
            height: 40px;
            width: 32px;
            line-height: 36px;
            margin-left: 5px;
            display: inline-block;
            border: 2px solid #FFFFFF;
            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
            margin-bottom: 9px;
            cursor: pointer;
            z-index: 99;
        }

            #guessingArea #keyboard .key.backspace {
                margin-left: 15px;
                width: 50px;
                border: 3px solid #FFFFFF;
            }


#gamePlayButtons {
    position: relative;
    margin-top: 20px;
    float: left;
    width: 100%;
    text-align: center;
    pointer-events: none;
}

    #gamePlayButtons button {
        z-index: 100;
        pointer-events: all;
    }

.footerButtons button {
    z-index: 101;
    pointer-events: all;
}

.drawing-term ~ #gamePlayButtons {
    margin-top: -5px;
}

#roomData {
    display: none;
    top: 340px;
    left: 0px;
    position: fixed;
    color: #FFFFFF;
    font-size: 22px;
    bottom: 0px;
    float: left;
    height: 40%;
    background-color: rgba(0,0,0,0.6);
    width: 1px;
    border-radius: 00px 10px 10px 0px;
    z-index: 100;
}

    #roomData #roomCode {
        /* top: -40px; */
        position: relative;
        float: right;
        width: auto;
        cursor: pointer;
        background-color: rgba(0,0,0,0.6);
        padding: 5px;
        border-radius: 10px 10px 0px 0px;
        height: 30px;
        transform: rotate(90deg);
        transform-origin: right top 0;
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: right top 0;
        /* top: 0px; */
        line-height: 25px;
        font-size: 24px;
        left: 30px;
        bottom: 0px;
        top: 180px;
        /* right: -56px; */
    }

#onlineUsers h3 {
    padding: 5px;
    margin: 0px;
}

#roomData #onlineUsers {
    display: none;
    margin-top: -40px;
    position: relative;
    float: left;
    width: 80%;
    border-radius: 10px;
    margin-left: 10%;
    overflow: hidden;
}

    #roomData #onlineUsers div {
        width: auto;
        font-size: 20px;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #roomData #onlineUsers .user {
        position: relative;
        float: left;
        width: 100%;
    }

.nopadding {
    padding: unset;
}

.lined.nopadding {
    padding: 0px 10px;
}

.friendsNotice, .aboutNotice {
    padding: 10px;
    font-size: 20px;
    color: white;
    background-color: rgba(0,0,0,0.4);
    margin: 10px;
    border-radius: 10px;
    overflow: hidden;
    box-sizing: padding-box;
    max-width: 600px;
    width: 90%;
    margin: 0px auto;
}

.simpleNoticeWrapper {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 600px;
    margin: 0px auto;
}

.challengeNotice {
    padding: 10px;
    font-size: 20px;
    color: white;
    background-color: rgba(0,0,0,0.4);
    margin: 10px;
    border-radius: 10px;
    overflow: visible;
}

.noticeWrapper {
    position: relative;
    float: left;
    width: calc(100% - 20px) !important;
    height: calc(100% - 40px);
    overflow-x: hidden;
    overflow-y: auto;
}

.settingsKeyValue {
    color: white;
    font-size: 30px;
}

    .settingsKeyValue .value {
        font-weight: bold;
        display: inline-block;
    }

        .settingsKeyValue .value.val-langs {
            font-weight: bold;
            display: inline-block;
            height: 25px;
            overflow: visible;
        }



.langSelector.expanded {
    background-color: rgba(0,0,0,0.5);
}

.langSelector {
    font-weight: bold;
    display: inline-block;
    width: 165px;
    position: relative;
    float: left;
    cursor: pointer;
    padding: 3px;
    z-index: 1000;
}

    .langSelector .lang {
        position: relative;
        float: left;
        width: 160px;
        height: 22px;
        background-size: contain;
        font-size: 20px;
        text-align: left;
        padding: 3px;
        line-height: 12px;
        margin-bottom: 3px;
    }

        .langSelector .lang .flag-img {
            width: 41px;
            height: 22px;
            margin-right: 10px;
            background-image: url("images/flags.png");
            background-repeat: no-repeat;
            float: left;
            margin-top: -3px;
            background-size: 292px 22px;
        }

.webp-ok .langSelector .lang .flag-img {
    background-image: url("images/flags.webp")
}

.langSelector.expanded .lang:hover {
    background-color: rgba(255,255,255,0.5);
}

.langSelector .lang.en .flag-img {
    background-position: -250px 0px;
}

.langSelector .lang.de .flag-img {
    background-position: -42px 0px;
}

.langSelector .lang.hr .flag-img {
    background-position: -166px 0px;
}

.langSelector .lang.fr .flag-img {
    background-position: -124px 0px;
}

.langSelector .lang.it .flag-img {
    background-position: -209px 0px;
}

.langSelector .lang.es .flag-img {
    background-position: -84px 0px;
}

.langSelector .lang.pt .flag-img {
    background-position: -0px 0px;
}

.langSelector .lang.selected {
    color: gold;
}

.registerlangSelector {
    position: relative;
    float: left;
    height: 30px;
}

    .registerlangSelector .label {
        position: relative;
        float: left;
        margin-right: 5px;
    }

    .registerlangSelector .langSelector {
        position: relative;
        float: left;
    }

.registerAvatars {
    position: relative;
    float: left;
    width: 100%;
    height: 136px;
    overflow-y:hidden;
}

    .registerAvatars .container {
        height: 136px;
        width: 4070px;
        position: relative;
        float: left;
        overflow-y: hidden;
    }

.registerChoosenAvatar {
    position: relative;
    float: left;
    border: 2px solid black;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color:white;
}

#registerUsernameBox, .registerUsernameLabel {
    position: relative;
    float: left;
    width: calc(100% - 90px);
    margin-left: 10px;
    text-align: left;
    margin: 0px;
    margin-left: 10px;
    margin-bottom:5px;
}

.registerAvatars .container .avatar {
    position: relative;
    float: left;
    margin-right: 10px;
    border: 2px solid black;
    width: 64px;
    height: 64px;
    border-radius: 48px;
    background-color: white;
    margin-bottom: 4px;
    cursor:pointer;
}


#usernameOption {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 150px);
    margin-bottom: -9px;
}

#settingsScreen {
    padding-top: 50px;
}

.editable {
    margin-left: 10px;
    background-repeat: no-repeat;
    height: 30px;
    width: 30px;
    background-image: url("images/edit_pen.png");
    background-size: cover;
    display: inline-block;
    cursor: pointer;
}


.in-loader-counter {
    font-size: 28px;
    line-height: 62px;
    font-family: "Patrick Hand SC";
}

.drawing-term {
    position: relative;
    float: left;
    width: 100%;
    color: white;
    font-size: 22px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.first-friend-message {
    font-size: 22px;
}

    .first-friend-message .code {
        font-weight: bold;
        font-size: 24px;
    }

.alert-or {
    font-size: 22px;
    margin-bottom: 5px;
}



.reward-coin {
    position: fixed;
    background-image: url("images/coin_big.png");
    background-size: cover;
}

.flyin-helper {
    position: fixed;
}

#winnerScreen {
    color: gold;
    background-color: rgba(132, 8, 132, 0.95);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    border: 2px solid black;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    overflow: visible;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}


    #winnerScreen .close {
        position: absolute;
        width: 40px;
        height: 40px;
        top: -5px;
        right: -5px;
        border: 2px solid black;
        border-radius: 20px;
        background-color: rgba(132, 8, 132, 0.97);
        color: white;
        line-height: 36px;
        font-weight: bold;
        cursor: pointer;
        z-index: 100;
    }

    #winnerScreen .content {
        position: relative;
        float: left;
        margin-left: 10px;
        width: calc(100% - 20px);
        height: 100%;
        overflow-x: hidden;
        padding-bottom: 20px;
    }

.winnerAvatar {
    position: relative;
    float: left;
    width: 100%;
    margin-top: 10px;
    margin-bottom:10px;
}

    .winnerAvatar img {
        width: 80px;
        height: 80px;
        border: 2px solid #41403E;
        border-radius: 40px;
        background-color: white;
    }

    .winnerAvatar .winner {
        position: relative;
        float: left;
        text-align: center;
        color: white;
        font-size: 20px;
        height: 25px;
        width: 100%;
    }


#winnerScreen .content .winnerTitleIntroWrap {
    color: gold;
    font-size: 45px;
    margin-top: -5px;
    margin-bottom: 5px;
    width: 100%;
    height: 90px;
}

#winnerScreen .content #winnerTitleIntro {
    color: gold;
    font-size: 45px;
    margin-top: -5px;
    margin-bottom: 5px;
}

#winnerScreen .content #winnerTitleDetail {
    font-size: 30px;
    margin-top: 0px;
    margin-bottom: 10px;
    color: white;
}

#winnerScreen .content .levelBar {
    position: relative;
    float: left;
    width: 80%;
    margin-left: 10%;
    height: 8px;
    border: solid 2px #41403E;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

    #winnerScreen .content .levelBar .progress {
        position: relative;
        float: left;
        height: 100%;
        background-color: green;
    }

    #winnerScreen .content .levelBar .progress-new {
        position: relative;
        float: left;
        height: 100%;
        background-color: limegreen;
    }

    #winnerScreen .content .levelBar .starLeft {
        position: absolute;
        top: -23px;
        left: -33px;
        width: 40px;
        height: 40px;
        background-image: url("images/level_star.png");
        background-size: contain;
        font-size: 20px;
        line-height: 45px;
        color: rgba(132, 8, 132, 0.9);
    }

    #winnerScreen .content .levelBar .starRight {
        position: absolute;
        top: -23px;
        right: -33px;
        width: 40px;
        width: 40px;
        height: 40px;
        background-image: url("images/level_star.png");
        background-size: contain;
        font-size: 20px;
        line-height: 45px;
        color: rgba(132, 8, 132, 0.9);
    }

#winnerScreen .content #rewardBox {
    position: relative;
    float: left;
    font-size: 22px;
    margin-bottom: 20px;
    margin-top: 20px;
}


    #winnerScreen .content #rewardBox .coin-holder .coin-icon {
        position: relative;
        float: left;
        width: 30px;
        height: 30px;
        font-size: 22px;
        line-height: 30px;
        font-weight: bold;
        color: white;
    }
        #winnerScreen .content #rewardBox .coin-holder .coin-icon.bombs {
            background-image: url("images/bomb_icon.png");
            background-size:contain;
            background-repeat:no-repeat;
        }
        #winnerScreen .content #rewardBox .coin-holder .coin-icon.reloads {
            background-image: url("images/reload_icon.png");
            background-size: contain;
            background-repeat: no-repeat;
        }
        #winnerScreen .content #rewardBox .coin-holder {
            position: relative;
            float: left;
        }

        #winnerScreen .content #rewardBox .coin-holder .reward-amount {
            position: relative;
            float: left;
            height: 30px;
            line-height: 30px;
            font-size: 22px;
            margin-left: 5px;
            font-weight: bold;
            color: gold;
        }

    #winnerScreen .content #rewardBox .total-holder {
        position: relative;
        float: left;
        color: gold;
    }

    #winnerScreen .content #rewardBox .total-coins-title, #winnerScreen .content #rewardBox .total-coins {
        position: relative;
        float: left;
        height: 30px;
        line-height: 30px;
        font-size: 22px;
        font-weight: bold;
        color: white;
    }

    #winnerScreen .content #rewardBox .total-coins {
        color: gold;
        width: 50px;
        text-align: left;
    }

#winnerScreen .content .levelBox {
    position: relative;
    float: left;
    width: 86%;
    margin-left: 8%;
    padding: 5%;
    height: 100px;
    margin-top: -10px;
    margin-bottom: 20px;
}

    #winnerScreen .content .levelBox .centerer {
        position: relative;
        margin: 0px auto;
        width: 80px;
        height: 80px;
    }

    #winnerScreen .content .levelBox .wrapper {
        position: relative;
        margin: 0px;
        width: 80px;
        height: 80px;
    }

    #winnerScreen .content .levelBox #levelState {
        position: absolute;
        width: 100%;
        height: 100%;
        color: white;
        font-weight: bold;
        line-height: 90px;
        font-size: 30px;
        margin-left: -1px;
        color: rgba(132, 8, 132, 0.9);
    }

    #winnerScreen .content .levelBox .star {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 110%;
        background-image: url("images/level_star.png");
        background-size: contain;
        background-repeat: no-repeat;
    }
#winnerPlayAgain {
    margin: 15px 00px;
}
   .particleBar {
        position: absolute;
        top: -120px;
        left: 38px;
        width: 4px;
        height: 300px;
        visibility: hidden;
    }

.particleBar .fill {
            position: absolute;
            top: 120px;
            left: 0px;
            width: 4px;
            height: 15px;
            background-color: gold;
        }

    .particleBar .fillSquare {
            position: absolute;
            top: 140px;
            left: 0px;
            width: 4px;
            height: 4px;
            transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            background-color: gold;
        }

#winnerScreen .content .nextLevel {
    position: relative;
    float: left;
    height: 25px;
    font-size: 22px;
    line-height: 25px;
    width: 88%;
    margin-left: 8%;
}

    #winnerScreen .content .nextLevel .label {
        color: white;
        float: right;
        margin-right: 10px;
    }

    #winnerScreen .content .nextLevel .value {
        color: gold;
        float: right;
    }

#winnerScreen #winnerAd {
position:relative;
margin:0px auto;
text-align:center;
padding:0px;
display:none;
margin-bottom:20px;
clear:both;
}

#dailyChallengeAd {
    position: relative;
    margin: 0px auto;
    text-align: center;
    padding: 0px;
    display: none;
    margin-bottom: 20px;
    clear: both;
    padding-top: 20px;
}
#hint {
    width: 40px;
    height: 40px;
    background-image: url("images/hint.png");
    background-size: cover;
    position: relative;
    float: left;
    cursor: pointer;
    display: none;
    z-index: 50;
    pointer-events: all;
}


.termReload {
    clear:both;
    font-size: 16px;
    padding: 20px !important;
    text-align: left;
    position:relative;
    float:left;
    color:white;
    height:25px;
}
.termReload .count{
    position:relative;
    float:left;
}

button.reloadChoices {
    width: 25px;
    height: 25px;
    border: none!important;
    background-color: transparent!important;
    background-image: url("images/reload_icon.png");
    background-size: cover;
    position: relative;
    float: left;
    cursor: pointer;
    pointer-events: all;
    margin-left:10px;
    display:inline;
    padding:0px!important;
}

.superHint {
    width: 40px;
    height: 40px;
    background-image: url(images/bomb_icon.png);
    background-size: cover;
    position: relative;
    float: left;
    cursor: pointer;
    pointer-events: all;
    margin-left: 15px;
    line-height: 43px;
    text-align: left;
    padding-left: 10px;
    font-size: 18px;
    font-weight: bold;
    padding-top: 3px;
    margin-top:-4px;
}

    .superHint.disabled {
    
            opacity:0.5;
    }
.bubbles {
    position: relative;
    float: left;
}

.game-stats {
    position: relative;
    float: left;
    margin-left: 20px;
    font-size: 20px;
    height: 25px;
    line-height: 25px;
    font-weight: bold;
}

    .game-stats .drawn-count {
        position: relative;
        float: left;
    }

        .game-stats .drawn-count::before {
            content: "drawn: "
        }

    .game-stats .guessed-count::before {
        content: "guessed: "
    }


    .game-stats .guessed-count {
        position: relative;
        float: left;
        margin-left: 20px;
    }

.coin-count {
    position: relative;
    float: right;
    width: auto;
    color: white;
    margin-top: 5px;
    clear: both;
}

    .coin-count .count {
        color: gold;
        position: relative;
        float: left;
        margin-right: 10px;
        font-size: 20px;
        height: 30px;
        line-height: 30px;
        font-weight: bold;
    }

.messages-icon {
    position: relative;
    float: right;
    width: 40px;
    height: 26px;
    color: white;
    margin-top: 5px;
    background-image: url(images/messages.png);
    background-repeat:no-repeat;
    cursor: pointer;
    background-size: contain;
    z-index: 100;
    display: none;
}

    .messages-icon.new {
        background-image: url(images/messages_new.png);
    }

.reward-level {
    position: fixed;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
}



.levels-stats .settingsKeyValue {
    font-size: 25px;
}

#levelsScreen {
    overflow-y: auto;
    width: 100%;
}

    #levelsScreen .achievements {
        position: relative;
        float: left;
        width: 90%;
        margin-left: 5%;
    }

        #levelsScreen .achievements .dcAchievements {
            position: relative;
            width: 100%;
            max-width: 250px;
            margin: 0px auto;
        }

            #levelsScreen .achievements .dcAchievements .trophy {
                position: relative;
                float: left;
                width: 28%;
                margin-left: 2%;
                height: 150px;
            }

                #levelsScreen .achievements .dcAchievements .trophy.dcGolds {
                    width: 38%;
                    margin-top: -10px;
                    color: gold;
                }

                #levelsScreen .achievements .dcAchievements .trophy.dcBronzes {
                    color: #cd7f32;
                }

                #levelsScreen .achievements .dcAchievements .trophy.dcSilvers {
                    color: silver;
                }

                #levelsScreen .achievements .dcAchievements .trophy img {
                    width: 100%;
                    height: auto;
                }

                #levelsScreen .achievements .dcAchievements .trophy .count {
                    border: 2px solid gold;
                    border-radius: 5px;
                    position: relative;
                    margin: 0px auto;
                    width: 30px;
                    height: 30px;
                    line-height: 26px;
                    font-weight: bold;
                }

                #levelsScreen .achievements .dcAchievements .trophy.dcSilvers .count {
                    border-color: silver;
                }

                #levelsScreen .achievements .dcAchievements .trophy.dcBronzes .count {
                    border-color: #cd7f32;
                }

                #levelsScreen .achievements .dcAchievements .trophy:first-of-type {
                    margin-left: 0px;
                }

        #levelsScreen .achievements h2.dc {
            margin-bottom: 15px;
        }

#levelsAvatar {
    position: relative;
    margin-left: 0px auto;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    border: 2px solid #41403E;
}

.avatar100 {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    border: 2px solid #41403E;
}


.next-level {
    font-size: 20px;
    padding: 20px;
    padding-top: 0px;
}

#levelsScreen h1 {
    margin-bottom: 10px;
}

.next-level h2 {
    margin-bottom: 5px;
    margin-top: 10px;
}

.next-level h3 {
    margin-top: 0px;
    margin-bottom: 5px;
}

.next-level span {
    color: gold;
}

.next-level p {
    margin-top: 0px;
}

#soundsOption {
    cursor: pointer;
}

    #soundsOption.on {
        width: 35px;
        margin-left: 5px;
        color: gold;
    }

    #soundsOption.off {
        width: 35px;
        margin-left: 5px;
        color: firebrick;
    }


.share_btn_text {
    height: 38px;
    position: relative;
    float: left;
    line-height: 38px;
    font-size: 22px;
    width: 100%;
    text-align: center;
}

.share_btn {
    width: 42px;
    height: 42px;
    position: relative;
    float: left;
    margin: 0px;
    margin-left: 10px;
}

.social-btns {
    position: relative;
    padding-bottom: 10px;
    position: relative;
    padding-bottom: 20px;
    display: none;
    float: left;
}

.share_btn.fb {
    background-image: url("images/share_fb.png");
    margin-left: 0px;
}

.share_btn.wa {
    background-image: url("images/share_wa.png");
}

.share_btn.vb {
    background-image: url("images/share_vb.png");
}

.share_btn.dl {
    background-image: url("images/share_dl.png");
}

.share_btn.email {
    background-image: url("images/share_email.png");
}

#startScreenList {
    height: 80%;
}


.adbclose {
    position: absolute;
    width: 40px;
    height: 40px;
    top: -8px;
    right: -8px;
    border: 2px solid black;
    border-radius: 20px;
    background-color: rgb(240, 240, 216);
    background-image: url(images/grunge-wall.png);
    color: black;
    line-height: 36px;
    font-weight: bold;
    cursor: pointer;
}

.webp-ok .adbclose {
    background-image: url(images/grunge-wall.webp);
}

.adbpopup {
    margin: 5px;
    margin-top: 50px;
    position: relative;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

#currentChallengeEntry, #lastWinnerEntry {
    width: 50%;
}

.gold {
    color: gold;
}

#dailyChallenge .introText {
    font-size: 22px;
    padding: 10px;
}

#challengeVotingSection .entries img, #previousChallengeWinnerSection .entries img {
    cursor: pointer;
}

#challengeVotingSection .entries img, #previousChallengeWinnerSection .entries img {
    width: 28%;
    margin-left: 3%;
}

    #challengeVotingSection .entries img:first-child, #previousChallengeWinnerSection .entries img:first-child {
        margin-left: 2%;
    }


.screenInnerContainer {
    position: relative;
    float: left;
    width: 100%;
    height: calc(100% - 65px);
    overflow-x: hidden;
    overflow-y: auto;
}

.challengeVotingContainer, .avatarsContainer {
    height: 90%;
    width: 100%;
    position: relative;
    float: left;
    padding-bottom: 15px;
    margin-top: -10px;
    overflow-x: hidden;
}


    .challengeVotingContainer .entry {
        position: relative;
        float: left;
        width: 45%;
        margin-top: 10px;
        cursor: pointer;
    }

        .challengeVotingContainer .entry.userEntry {
            position: relative;
            float: left;
            width: 90%;
            margin-top: 10px;
            cursor: pointer;
            margin-left: 5%;
        }


            .challengeVotingContainer .entry.userEntry .artist {
                color: gold;
            }

        .challengeVotingContainer .entry:nth-child(even) {
            margin-right: 5%;
        }

        .challengeVotingContainer .entry:nth-child(odd) {
            margin-left: 5%;
        }

        .challengeVotingContainer .entry .artist {
            width: 100%;
            text-align: center;
            font-weight: bold;
            height: 15px;
            line-height: 15px;
            margin-bottom: 5px;
        }

        .challengeVotingContainer .entry.voted .artist {
            color: gold;
        }

        .challengeVotingContainer .entry img {
            width: 80%;
            height: auto;
            display: table;
            margin: 0 auto;
        }

        .challengeVotingContainer .entry.voted img {
            border-color: gold;
        }


#challengeVotingBack {
    position: relative;
    float: right;
    max-height: 10%;
    margin-top: 5px;
}



.challengeWinnersContainer {
    height: 90%;
    width: 100%;
    position: relative;
    padding-bottom: 15px;
    overflow-x: hidden;
}

    .challengeWinnersContainer .entry {
        position: relative;
        float: left;
        width: 70%;
        margin-top: 10px;
    }


    .challengeWinnersContainer .entry {
        margin-left: 15%;
    }

        .challengeWinnersContainer .entry .artist {
            width: 100%;
            text-align: center;
            font-weight: bold;
            height: 15px;
            line-height: 15px;
            margin-bottom: 5px;
            font-size: 22px;
        }

        .challengeWinnersContainer .entry .votes {
            width: 100%;
            text-align: center;
            font-weight: bold;
            height: 15px;
            line-height: 15px;
            margin-bottom: 5px;
        }

        .challengeWinnersContainer .entry img {
            width: 80%;
            max-width: 300px;
            height: auto;
            display: table;
            margin: 0 auto;
        }

        .challengeWinnersContainer .entry.voted img {
            border-color: forestgreen;
        }


#challengeWinnersBack {
    position: relative;
    float: right;
    max-height: 10%;
}

#previousDailyChallengeWinners .entry {
    cursor: pointer;
}

    #previousDailyChallengeWinners .entry button {
        margin-top: 10px;
    }

#dailyChallenge h1, h2, h3 {
    margin: 5px;
}

#dailyChallenge {
    overflow: hidden;
    width: 100%;
}

    #dailyChallenge h2 {
        clear: both;
    }

.challengeNotice {
    overflow: unset;
    position: absolute;
    top: 10px;
    background-image: url(images/grunge-img.png);
    background-color: rgba(132, 8, 132, 0.9);
    display: none;
    width: 90%;
    left: calc(5% - 10px);
}

.webp-ok .challengeNotice {
    background-image: url("images/grunge-img.webp");
}

.challengeNotice .close {
    position: relative;
    float: right;
    width: 40px;
    height: 40px;
    top: -23px;
    right: -10px;
    border: 2px solid black;
    border-radius: 20px;
    background-color: rgba(132, 8, 132, 0.97);
    color: white;
    line-height: 36px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
}


.challengeHelp {
    position: absolute;
    top: 10px;
    right: 20px;
    float: right;
    font-size: 22px;
    cursor: pointer;
    color: white;
    width: 30px;
    height: 30px;
    border: 3px solid white;
    border-radius: 20px;
    line-height: 26px;
    display: inherit;
}

/*winner layout*/
#challengeWinnerSection .winner {
    position: relative;
    float: left;
    width: 60%;
    height: 125px;
    margin-left: 20%;
    cursor: pointer;
}

    #challengeWinnerSection .winner .imgWrapper {
        display: table;
        margin: 0px auto;
        position: relative;
    }
        /*
        #challengeWinnerSection .winner .imgWrapper::after {
            width: 40px;
            height: 50px;
            content: "";
            left: 160px;
            top: -15px;
            position: absolute;
            float: left;
            background-size: contain;
            background-repeat: no-repeat;
            transform: rotate(5deg);
            background-image: url(images/trophy_gold.png);
        }
        */
        #challengeWinnerSection .winner .imgWrapper img {
            height: 100px;
            display: table-row;
            position: relative;
        }

#challengeWinnerSection .second {
    position: relative;
    float: left;
    width: 50%;
    height: 115px;
    margin-left: 00px;
    cursor: pointer;
}

    #challengeWinnerSection .second .imgWrapper {
        display: table;
        float: right;
        position: relative;
    }

        #challengeWinnerSection .second .imgWrapper img {
            height: 90px;
            position: relative;
            float: right;
            display: table-row;
            position: relative;
        }

/*
#challengeWinnerSection .second .imgWrapper::after {
    width: 40px;
    height: 50px;
    content: "";
    left: -15px;
    top: -15px;
    position: absolute;
    float: left;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(5deg);
    background-image: url(images/trophy_silver.png);
}
*/

#challengeWinnerSection .third {
    position: relative;
    float: left;
    width: 50%;
    height: 115px;
    margin-left: 0px;
    cursor: pointer;
}

    #challengeWinnerSection .third .imgWrapper {
        display: table;
        float: left;
        position: relative;
    }

        #challengeWinnerSection .third .imgWrapper img {
            height: 90px;
            position: relative;
            float: left;
            display: table-row;
            position: relative;
        }

/*
#challengeWinnerSection .third .imgWrapper::after {
    width: 40px;
    height: 50px;
    content: "";
    right: -15px;
    top: -15px;
    position: absolute;
    float: left;
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(5deg);
    background-image: url(images/trophy_bronze.png);
}
        */

#challengeWinnerSection .artist {
    color: gold;
    max-width: 40%;
    overflow: hidden;
}

#challengeWinnerSection .artist, #challengeWinnerSection .votes {
    display: inline;
}

#challengeWinnerSection .votes {
    margin-left: 5px;
}

    #challengeWinnerSection .votes::after {
        content: "votes";
        margin-left: 3px;
    }

#challengeWinnerSection .meta {
    position: relative;
    float: left;
    width: 100%;
    height: 25px;
    font-size: 20px;
    font-weight: bold;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.clearfix {
    display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}


/* avatars */

.avatarsContainer .avatar {
    position: relative;
    float: left;
    width: 45%;
    height: 100px;
    margin-top: 10px;
    cursor: pointer;
    border: solid 3px #41403E;
    border-radius: 22.5%;
    background-color: white;
    margin-left: 2%;
}

.awaitSetupPlayers {
    position: relative;
    width: 100%;
    height: 130px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}


    .awaitSetupPlayers .player {
        width: 80px;
        height: 120px;
        display: inline-block;
        margin-right: 10px;
    }

        .awaitSetupPlayers .player .avatarWrapper {
            position: relative;
            float: left;
        }

        .awaitSetupPlayers .player img {
            position: relative;
            float: left;
            width: 80px;
            height: 80px;
            margin-right: 10px;
            border: 2px solid #41403E;
            border-radius: 40px;
            background-color: white;
        }

        .awaitSetupPlayers .player .avatarWrapper.dcWinner::after {
            width: 50px;
            height: 40px;
            content: "";
            left: 50px;
            top: 45px;
            position: absolute;
            float: left;
            background-size: contain;
            background-repeat: no-repeat;
            transform: rotate(5deg);
        }

        .awaitSetupPlayers .player .avatarWrapper.dcWinner.bronze::after {
            background-image: url(/Content/images/trophy_bronze.png);
        }

        .awaitSetupPlayers .player .avatarWrapper.dcWinner.silver::after {
            background-image: url(/Content/images/trophy_silver.png);
        }

        .awaitSetupPlayers .player .avatarWrapper.dcWinner.gold::after {
            background-image: url(/Content/images/trophy_gold.png);
        }

        .awaitSetupPlayers .player.artist img {
            border: 2px solid gold;
        }

        .awaitSetupPlayers .player.artist .name {
            color: gold;
        }

        .awaitSetupPlayers .player .name {
            position: relative;
            float: left;
            width: 100%;
            margin-right: 10px;
            font-size: 16px;
            line-height: 20px;
            text-align: center;
            text-overflow: ellipsis;
            overflow: hidden;
        }




@media only screen and (max-width: 350px) {
    #chooser {
        position: absolute;
        display: block;
        width: 94%;
        left: 3%;
        top: 20%;
        background-color: rgba(132, 8, 132, 0.97);
        padding: 20px;
        border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
        border: 2px solid black;
        color: white;
        text-align: center;
        box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
        z-index: 1000;
    }

    #guessingArea #keyboard {
        position: relative;
        font-size: 26px;
        color: #FFFFFF;
        display: inline-block;
        margin-right: 10px;
        margin-top: 20px;
        clear: both;
        max-width: 600px;
    }

        #guessingArea #keyboard .key {
            position: relative;
            height: 32px;
            width: 28px;
            line-height: 26px;
            margin-left: 4px;
            display: inline-block;
            border: 2px solid #FFFFFF;
            border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
            margin-bottom: 9px;
            cursor: pointer;
            z-index: 99;
        }

            #guessingArea #keyboard .key.backspace {
                margin-left: 15px;
                width: 40px;
                border: 3px solid #FFFFFF;
            }

    #winnerScreen .content .levelBox {
        margin-bottom: 10px;
    }
}


@media only screen and (max-width: 380px) {
    #gameScreen .colors .color {
        margin-top: 6px;
        width: 27px;
        height: 27px;
    }

    #gameScreen .colorsWrapper .colors {
        width: 266px;
    }

        #gameScreen .colorsWrapper .colors .hideShow {
            right: -15px;
        }
}


@keyframes border-pulsate {
    0% {
        border-color: rgba(255, 215, 0, 1);
    }

    50% {
        border-color: rgba(255, 100, 0, 1);
    }

    100% {
        border-color: rgba(255, 215, 0, 1);
    }
}

.pulsatingBorder {
    border: 3px solid gold;
    animation: border-pulsate 2s infinite;
}


.locked {
    opacity: 0.6;
}

    .locked:after {
        display: block;
        content: "";
        width: 16px;
        height: 16px;
        position: absolute;
        top: 0px;
        right: -5px;
        transform: rotate(20deg);
        -webkit-transform: rotate(20deg);
        background: transparent url(images/lock-icon.png) no-repeat;
        overflow: visible;
        background-size: contain;
    }

.shareLink {
    font-size: 14px;
}

#votingEntry {
    display: none;
    position: relative;
    top: 0px;
    z-index: 1000000;
    width: 94%;
    max-width: 600px;
    margin: 0px auto;
    background-color: rgba(132, 8, 132, 0.97);
    background-image: url(images/grunge-img.png);
    text-align: left;
    float: left;
}

.webp-ok #votingEntry {
    background-image: url("images/grunge-img.webp");
}


#votingEntry .content {
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: 0px;
    margin-top: 0px;
}

    #votingEntry .content .media {
        position: relative;
        width: 85%;
        margin-left: 7.5%;
        margin-bottom: 10px;
    }

        #votingEntry .content .media img, #votingEntry .content .media video {
            width: 100%;
            position: relative;
        }

        #votingEntry .content .media video {
            display: none;
        }

        #votingEntry .content .media .control {
            cursor: pointer;
            width: 45px;
            height: 45px;
            position: absolute;
            bottom: 20px;
            right: 10px;
            background-size: contain;
            z-index: 50000;
        }

            #votingEntry .content .media .control.play {
                background-image: url("images/video_play.png");
            }

            #votingEntry .content .media .control.pause {
                background-image: url("images/video_pause.png");
            }

            #votingEntry .content .media .control.loading {
                background-image: url("images/video_loader.gif");
            }

    #votingEntry .content button {
        width: 50%;
        margin: 0px auto;
        margin-bottom: 10px;
        margin-left: 25%;
    }

.voteArrow {
    position: absolute;
    right: -20px;
    top: 7px;
    width: 20px;
    height: 20px;
    border: solid rgba(255,255,255,.9);
    border-width: 0 6px 6px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    cursor: pointer;
}

#votingEntry .content .prev {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 40%;
    padding-top: 52%;
    z-index: 100;
}

    #votingEntry .content .prev .voteArrow {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        top: 50%;
        left: 10px;
    }

#votingEntry .content .next {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 40%;
    padding-top: 52%;
    z-index: 100;
}

    #votingEntry .content .next .voteArrow {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        top: 50%;
        right: 10px;
    }


#votingEntry .close {
    position: absolute;
    width: 40px;
    height: 40px;
    top: -8px;
    right: -8px;
    border: 2px solid #000;
    border-radius: 20px;
    background-color: rgba(132,8,132,.97);
    color: #fff;
    line-height: 36px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    line-height: 36px;
    z-index: 10000;
    font-size: 22px;
}




#votingEntry {
    color: gold;
    font-weight: bold;
    font-size: 25px;
}

    #votingEntry .message {
        position: relative;
        top: 100%;
        color: gold;
        font-size: 20px;
        padding: 5px;
        width: 100%;
        text-align: center;
        line-height: 22px;
        clear: both;
    }

    #votingEntry .voteCnt {
        margin-bottom: 10px;
        width: 100%;
        text-align: center;
        position: relative;
    }

    #votingEntry .artist {
        width: 100%;
        text-align: center;
    }

    #votingEntry img.voted {
        border-color: gold;
        border-width: 3px;
    }


    #votingEntry .content .votes {
        position: relative;
        width: 95%;
        height: auto;
        margin-left: 2.5%;
        margin-top: 0px;
    }

        #votingEntry .content .votes .vote {
            position: relative;
            float: left;
            width: 31%;
            height: auto;
            margin-left: 2%;
        }

            #votingEntry .content .votes .vote:first-child {
                margin-left: 0px;
            }

            #votingEntry .content .votes .vote img {
                position: relative;
                width: 100%;
                height: auto;
                margin: 0px;
            }

            #votingEntry .content .votes .vote .close {
                position: absolute;
                top: -10px;
                right: -10px;
                height: 30px;
                width: 30px;
                font-size: 20px;
                text-align: center;
                line-height: 28px;
            }

        #votingEntry .content .votes .messageTitle {
            width: 100%;
            position: relative;
            float: left;
            text-align: center;
            margin-bottom: 10px;
            color: gold;
            font-size: 20px;
        }

        #votingEntry .content .votes .messageEmpty {
            width: 100%;
            position: relative;
            float: left;
            text-align: center;
            margin-bottom: 5px;
            color: gold;
            color: white;
            font-weight: normal;
            font-size: 20px;
            line-height: 22px;
            margin-bottom: 10px;
        }



ul.bulleted_list {
    width: 80%;
    margin-left: 10%;
    list-style: circle;
}

    ul.bulleted_list li {
        text-align: left;
    }

.fbPagePluginHolder {
    position: relative;
    float: left;
    width: 100%;
    height: 300px;
    margin: 10px 0px;
}




.feedbackArea {
    font-size: 18px;
    width: 90%;
    height: 150px;
}

.chatBubble {
    position: relative;
    float: right;
    cursor: pointer;
    background-image: url(images/chat_bubble.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px;
    height: 35px;
    margin-right: 0px;
    pointer-events: all;
}

.chatPills {
    position: absolute;
    bottom: 60px;
    right: 20px;
    width: auto;
    z-index: 201;
    display: none;
}


    .chatPills .pill {
        margin-bottom: 5px;
        height: 35px;
        line-height: 35px;
        border-radius: 10px;
        background-color: rgba(52, 71, 112, 0.9);
        padding: 0px 10px;
        font-size: 22px;
        visibility: hidden;
        cursor: pointer;
        pointer-events: all;
        z-index: 10000;
    }


        .chatPills .pill.emoticon {
            width: 23.5%;
            margin-right: 2%;
            float: left;
            text-align: center;
        }

        .chatPills .pill.emoticon:last-child {
            margin-right: 0%;
        }
        
.bigPill {
    position: absolute;
    top: 60px;
    line-height: 35px;
    border-radius: 10px;
    background-color: rgba(52, 71, 112, 0.8);
    padding: 0px 10px;
    font-size: 22px;
    left: 80px;
    pointer-events: none;
    z-index:1000;
}

.bigPill.forArtist {
 top:0px;
 height:30px;
 line-height:30px;
}

    .bigPill .author {
        position: relative;
        float: left;
        font-weight: bold;
        height: 35px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: left;
        max-width:160px;
    }

    .bigPill .text {
        position: relative;
        float: left;
        margin-left: 5px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-align: left;
    }

    .bigPill.userGuessed {
        background-color: rgba(71, 112, 52, 0.8);
        line-height: 40px;
        font-size: 24px;
    }
  .bigPill.forArtist.userGuessed {
        line-height: 30px;
        font-size: 22px;
    }

    .bigPill .text .usernameGuess {
    color:gold;
    font-weight:bold;
    }

    #newMessageInput {
        background: rgba(0,0,0, 0.5);
        border: none;
        border-radius: 10px 10px 0px 0px;
        padding: 0px 10px;
        width: calc(100% - 45px);
        float: left;
        margin: 0px;
        margin-left: 0px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        border-bottom: 1px solid white;
    }

.sendMessage {
    width: 30px;
    height: 50px;
    position: relative;
    background-image: url(images/send_message.png);
    float: left;
    margin-left: 5px;
    z-index: 1000;
    background-size: contain;
    background-repeat: no-repeat;
    height: 30px;
    cursor: pointer;
}

.chatHeader {
    height: 60px;
    margin: 10px 20px;
}

    .chatHeader .avatar {
        height: 60px;
        width: 60px;
        border-radius: 30px;
        border: 2px solid gold;
        position: relative;
        float: left;
    }

    .chatHeader .user {
        height: 100%;
        line-height: 60px;
        font-size: 25px;
        color: gold;
        text-align: left;
        margin-left: 20px;
        font-weight: bold;
        position: relative;
        float: left;
    }


    .chatHeader .avatar img {
        width: 100%;
        height: 100%;
        border-radius: 30px;
    }

.chatArea {
    height: calc(100% - 40px);
}

#chatScreen .footerButtons button {
    margin-bottom: 5px;
}

.chatMessages {
    position: relative;
    float: left;
    width: 90%;
    margin-left: 5%;
    height: calc(100% - 115px);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: rgba(0,0,0,0.1);
    border-radius: 20px 20px 0px 0px;
    padding: 15px;
}

    .chatMessages .message {
        position: relative;
        clear: both;
        margin-bottom: 5px;
        padding: 5px 10px;
        font-size: 18px;
        line-height: 25px;
    }

        .chatMessages .message.myMessage {
            float: right;
            border-radius: 15px 15px 0px 15px;
            margin-right: 10px;
            background-color: rgba(0,0,0,0.5);
        }

        .chatMessages .message.partnerMessage {
            float: left;
            border-radius: 0px 15px 15px 15px;
            background-color: rgba(255,255,255,0.4);
        }

        .chatMessages .message a {
            color:gold;
        }

.newMessage {
    position: relative;
    float: left;
    margin-top: 5px;
    width: 90%;
    margin-left: 5%;
}


@media only screen and (max-height: 400px) {
    .chatHeader {
        height: 30px;
        margin: 0px 10px;
    }

        .chatHeader .avatar {
            height: 30px;
            width: 30px;
        }

        .chatHeader .user {
            line-height: 30px;
        }

    .chatMessages {
        height: calc(100% - 65px);
    }

    #chatScreen {
        height: 100% !important;
    }
}

.sessionState {
    position: relative;
    float: left;
    width: 80%;
    margin-left: 10%;
    margin-top: 10px;
}

    .sessionState .user {
        position: relative;
        float: left;
        width: 100%;
        margin-bottom: 5px;
        background-color: rgba(31, 38, 47, 0.38);
        padding: 5px;
        border-radius: 5px;
    }

    .sessionState .user .ptsIncrease{
        position: absolute;
        right: -5px;
        top: 0px;
        font-size: 22px;
        transform: rotate(25deg);
        width: 50px;
        background-color: gold;
        color: rgba(132, 8, 132, 0.9);
        border-radius: 5px;
        box-shadow: 3px 4px rgba(0,0,0,0.5);
        z-index:10;
    }

.sessionGamePlayInfo {
    position: relative;
    float: left;
    margin-bottom: 10px;
    text-align: center;
    font-size: 22px;
    width: 100%;
    text-align: center;
    margin-top:5px;
    font-weight:bold;
}

    .sessionGamePlayInfo .newArtist {
        display: inline-block;
    }

        .sessionGamePlayInfo .newArtist .img {
            position: relative;
            float: left;
        }

        .sessionGamePlayInfo .newArtist .desc {
            position: relative;
            float: left;
        }

    .sessionGamePlayInfo p {
        margin: 0px;
        padding: 0px;
        margin-top: -10px;
    }

.sessionState .user .avatar, .choosenArtist {
    position: relative;
    float: left;
    width: 40px;
    height: 40px;
    border: 2px solid #41403e;
    border-radius: 25px;
    cursor: pointer;
    margin-right: 10px;
}

.sessionState .user .data {
    position: relative;
    float: left;
    width: calc(100% - 80px);
}

.sessionState .user .pos {
    position: relative;
    float: left;
    width: 20px;
    text-align: right;
    margin-right: 10px;
    font-size: 22px;
    line-height: 40px;
    font-weight: bold;
}

.sessionState .user .name, .sessionState .user .pts {
    position: relative;
    float: left;
    height: 20px;
    line-height: 20px;
    clear: left;
    font-size: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-align: left;
}

.sessionState .user .pts {
    color: white;
    font-weight: bold;

}


.sessionState .user.winner .data, .sessionState .user.second .data, .sessionState .user.third .data {
    width: 100%;
}

.sessionState .user.third .data {
    padding-right: 20px;
}
.sessionState .user.second .data {
    padding-left: 20px;
}
.sessionState .user.winner .pos, .sessionState .user.second .pos, .sessionState .user.third .pos {
    position: absolute;
}

.sessionState .user.winner {
    width: 60%;
    margin-left: 20%;
}

    .sessionState .user.winner .avatar {
        width: 60px;
        height: 60px;
        border: 2px solid gold;
        border-radius: 30px;
        margin: 0px auto;
        float: none;
    }

    .sessionState .user.winner .name, .sessionState .user.winner .pts {
        position: relative;
        float: left;
        height: 30px;
        line-height: 35px;
        clear: left;
        font-size: 22px;
        width: 100%;
        text-align: center;
    }

.sessionState .user.second {
    width: 48%;
    float: left;
}

    .sessionState .user.second .avatar {
        width: 50px;
        height: 50px;
        border: 2px solid silver;
        border-radius: 25px;
        margin: 0px auto;
        float: none;
    }

    .sessionState .user.second .name, .sessionState .user.second .pts, .sessionState .user.third .name, .sessionState .user.third .pts {
        position: relative;
        float: left;
        height: 25px;
        line-height: 25px;
        clear: left;
        font-size: 20px;
        width: 100%;
        text-align: left;
    }

.sessionState .user.third .name, .sessionState .user.third .pts {
    text-align: right;
}

.sessionState .user.third {
    width: 48%;
    float: right;
}

    .sessionState .user.third .avatar {
        width: 50px;
        height: 50px;
        border: 2px solid #cd7f32;
        border-radius: 25px;
        margin: 0px auto;
        float: none;
    }

.progress2 {
    padding: 2px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    width: 100%;
    position: relative;
    float: left;
    margin: 15px 0px;
}

.progress-bar2 {
    height: 6px;
    border-radius: 8px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    transition: 0.4s linear;
    transition-property: width, background-color;
    width: 100%;
}

.progress-moved .progress-bar2 {
    width: 100%;
    background-color: #429903;
    animation: progressAnimation 38s forwards;
}

@keyframes progressAnimation {
    0% {
        width: 95%;
        background-color: #429903;
    }

    30% {
        width: 25%;
        background-color: #8a9903;
    }

    100% {
        width: 0%;
        background-color: #c40000;
    }
}


@media only screen and (max-height: 800px) {

    #winnerScreen .content #rewardBox {
        margin-top: 0px;
    }

    .fbPagePluginHolder {
        position: relative;
        float: left;
        width: 100%;
        height: 200px;
    }



    #winnerScreen .content .levelBox {
        position: relative;
        float: left;
        width: 86%;
        margin-left: 8%;
        padding: 5%;
        height: 100px;
        margin-top: -10px;
        margin-bottom: -10px;
    }

        #winnerScreen .content .levelBox .centerer {
            position: relative;
            margin: 0px auto;
            width: 60px;
            height: 60px;
        }

        #winnerScreen .content .levelBox .wrapper {
            position: relative;
            margin: 0px;
            width: 60px;
            height: 60px;
        }

        #winnerScreen .content .levelBox #levelState {
            position: absolute;
            width: 100%;
            height: 100%;
            color: white;
            font-weight: bold;
            line-height: 70px;
            font-size: 25px;
            margin-left: -1px;
            color: rgba(132, 8, 132, 0.9);
        }

        #winnerScreen .content .levelBox .star {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 110%;
            background-image: url("images/level_star.png");
            background-size: contain;
            background-repeat: no-repeat;
        }

        #winnerScreen .content .levelBox .particleBar {
            position: absolute;
            top: -120px;
            left: 28px;
            width: 4px;
            height: 300px;
            visibility: hidden;
        }

            #winnerScreen .content .levelBox .particleBar .fill {
                position: absolute;
                top: 120px;
                left: 0px;
                width: 4px;
                height: 15px;
                background-color: gold;
            }

            #winnerScreen .content .levelBox .particleBar .fillSquare {
                position: absolute;
                top: 140px;
                left: 0px;
                width: 4px;
                height: 4px;
                transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
                background-color: gold;
            }

    #winnerScreen .content #winnerTitleDetail {
        margin-top: -15px;
        margin-bottom: 0px;
    }

    .sessionGamePlayInfo {
        margin-top: 5px;
    }

    #winnerScreen .content #winnerTitleIntro {
        font-size: 32px;
        height: 60px;
    }

    #winnerScreen .content .winnerTitleIntroWrap {
        height:60px;
    }

    .sessionState .user.winner .data, .sessionState .user.second .data, .sessionState .user.third .data {
        margin-top: -5px;
    }

    .sessionState .user.winner .avatar {
        width: 50px;
        height: 50px;
        border: 2px solid gold;
        border-radius: 25px;
    }

    .sessionState .user.winner .name, .sessionState .user.winner .pts {
        position: relative;
        float: left;
        height: 20px;
        line-height: 20px;
        clear: left;
        font-size: 18px;
    }


    .sessionState .user.second .avatar {
        width: 44px;
        height: 44px;
        border: 2px solid silver;
        border-radius: 22px;
    }

    .sessionState .user.second .name, .sessionState .user.second .pts, .sessionState .user.third .name, .sessionState .user.third .pts {
        position: relative;
        float: left;
        height: 20px;
        line-height: 20px;
        clear: left;
        font-size: 18px;
    }

    .sessionState .user.third .avatar {
        width: 44px;
        height: 44px;
        border: 2px solid #cd7f32;
        border-radius: 22px;
    }
}


html {
    background-color: #5d84c3;
}

/* The ribbon */
.ribbon {
    width: 30px;
    height: 40px;
    background-color: #fff;
    position: absolute;
    right: 10px;
    top: 0px;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.4);
}

    .ribbon:before {
        content: '';
        position: absolute;
        z-index: 2;
        left: 0;
        bottom: -15px;
        border-left: 15px solid #fff;
        border-right: 15px solid #fff;
        border-bottom: 15px solid transparent;
        box-shadow: 5px 0px rgba(0, 0, 0, 0.4);
    }



.user.winner .ribbon {
background-color:gold;
}
.user.winner .ribbon:before {
    border-left-color: gold;
    border-right-color: gold;
}

.user.second .ribbon {
    background-color: silver;
}

    .user.second .ribbon:before {
        border-left-color: silver;
        border-right-color: silver;
    }

.user.third .ribbon {
    background-color: #cd7f32;
}

    .user.third .ribbon:before {
        border-left-color: #cd7f32;
        border-right-color: #cd7f32;
    }

.user .ribbon {
font-size:24px;
line-height:40px;
color:white;
font-weight:bold;
}

.artistSkip {
font-size:16px;
padding:20px!important;
text-align:right;
}

.artistSkip button {
    background: none;
    color: white;
    padding: 0px;
    margin: 0px;
    margin-left: 10px!important;
    border-color: white!important;
    padding: 0px 5px;
    background-color: rgba(132,8,132,.95);
}

.giftbox {
    position: relative;
    width: 42%;
    height: 42%;
    cursor:pointer;
}

    .giftbox .top {
        background-image: url(images/giftbox_big_top.png);
        position: relative;
        float: left;
        background-size: contain;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: top;
        z-index: 10;
        transition: all 0.5s ease;
    }

    .giftbox .bottom {
        background-image: url(images/giftbox_big_bottom.png);
        position: absolute;
        float: left;
        background-size: contain;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        bottom: 0px;
        background-position: bottom;
    }

    .giftbox.open .present {
        background-image: url(images/coin_big.png);
        position: absolute;
        float: left;
        width: 50%;
        height: 50%;
        background-repeat: no-repeat;
        bottom: 67%;
        left: 25%;
        z-index: 5;
        opacity:1;
    }
    .giftbox .present {
        background-image: url(images/coin_big.png);
        position: absolute;
        float: left;
        background-size: contain;
        width: 50%;
        height: 10%;
        background-repeat: no-repeat;
        bottom: 60%;
        left: 25%;
        background-position: bottom;
        z-index: 5;
        opacity: 0;
        transition: all 0.5s ease;
        border-radius: 5px;
        padding: 5px;
        background-size: 80%;
        background-position: center;
    }

        .giftbox .present.fullBg {
            background-size: 100%;
            background-size:cover;
        }

    .giftbox.open .top {
        background-image: url(images/giftbox_big_top.png);
        position: relative;
        float: left;
        margin-top: -60%;
        margin-left: -20%;
        transform: rotate(-60deg);
    }

    .giftbox.one {
        margin-top: 0%;
        margin-left: -10%;
        float: left
    }
    .giftbox.two {
        float: right;
        margin-right: -10%;
        margin-top: 0%;
    }

    .giftbox.three {
        float: left;
        margin-top: 25%;
        margin-left: 35%;
    }

.giftBoxHolder {
    width: 100%;
    height: 100%;
    z-index: 10000000;
    transition: all 0.75s ease;
    transition: all 0.75s ease;
    cursor:pointer;
}

.giftBoxHolder.tiny {
width:5px;
height:5px;
transform:rotate(-1440deg);
margin-left:50%;
margin-top:50%;
}

.giftBoxHolderWrapper {
position:relative;
float:left;
width:320px;
height:300px;
padding:50px;
padding-top:60px;
margin-top:10px;
overflow:hidden;
}

.presentsDescriptionHolder {
position:relative;
float:left;
width:100%;
padding:0px;
min-height:60px;
overflow:hidden;
font-size:18px;
}

.classroomLink {
    position: absolute;
    top: 0px;
    right: 0px;
    text-align:right;
    margin-right:10px;
    margin-top:10px;
    line-height:18px;
}

    .classroomLink a, .classroomLink a:visited {
        color: gold;
    }


.downloadAppPlayIcon {
padding-right:25px;
background-image:url(images/play_icon.png);
background-repeat:no-repeat;
background-size:contain;
background-position:right;
}