/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
 
.player-badge {
    padding: 2px 5px;
    border-radius: 2px;
}
.player-badge.flag{
    border-radius:0 5px 5px 0;
    
}

.color-sel {
    width: calc(100% - 20px);
    border: 1px solid #333;
    border-radius: 5px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    margin: 10px;
    padding: 7px;
    display: none;
    box-shadow: 0 5px 5px rgba(0,0,0,0.6), inset 0 5px 5px rgba(255,255,255,0.6), inset 0 -3px 3px rgba(0,0,0,0.3);
    white-space:nowrap;
    overflow:hidden;
}

.color-sel.avail{
    cursor:pointer;
}

.list.player-lobby {
    opacity: 0.4;
}

.list.player-lobby.ready {
    opacity: 1.0;
}

.list.player-gallery {     
    opacity: 0.4; 
}

    .list.player-gallery.done {
        opacity: 1.0;
        cursor: pointer;
    }

        .list.player-gallery.ghost {
        opacity: 0.4; 
    }
     
#type-inp{
    font-size:30px;
}

.target-word{
    padding:0 5px;
    overflow:hidden;
    word-break: break-word;
    background-color:#fff;
}

input[type='text'].inpName {
    margin-bottom: 0;  
    height: auto;
    background-color: rgba(255,255,255,0.8);
    border-radius: 0;
    resize: none;  
    text-align: left;
    font-size: 20px;
    border: none;
    border-bottom: 1px solid #333;
    width: 100%;
    padding:2px 5px;
    border-radius:5px;

}


#canvas {
    background-color: #fff;
}

#color-palette {
    position: absolute;
    top: 40px; 
    right: -230px;
    background-color: #fff;
    padding: 0;
    transition: right 0.2s;
    z-index:110;
}

    #color-palette.active {
        right: 0;

    }

        #color-palette>div {
      position: relative; 
      box-shadow: rgba(0,0,0,0.4) 0 3px 3px; 
      border-radius: 0 0 0 5px 
    }

    #color-palette div.r {
        display: flex;
        flex-direction: row;
    }

        #color-palette div.r > div {
            width: 45px;
            height: 45px;
            padding: 0 5px 5px 0;
            margin: 0
        }

            #color-palette div.r > div:first-child {
                width: 50px;
                padding-left: 5px;
                border-left: 1px solid #aaa
            }

        #color-palette div.r:first-child > div {
            height: 50px;
            padding-top: 5px;
            border-top: 1px solid #aaa;
        }

        #color-palette div.r:last-child > div {
            border-bottom: 1px solid #aaa;
        }

    #color-palette .color {
        margin: 0;
        width: 40px;
        height: 40px;
    }

#color-wheel {
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 100%;
    height: 50px;
    width: 50px;
    padding: 5px;
    border: 1px solid #aaa;
    border-right: none;
    border-radius: 5px 0 0 5px;
    box-shadow: rgba(0,0,0,0.4) 0 3px 3px;
    background-image: url(/img/colorwheel.svg);
    background-position: 5px 5px;
    background-size: 40px 40px;
    background-repeat:no-repeat;
}




.pagewrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    overscroll-behavior: none
}
 
#size-picker {
    border: none;
    position:fixed; 
    left:unset; 
    top:40px; 
    left:10px;
    z-index:120;
}

    #size-picker .size {
        width: 40px;
        height: 30px;
    }

 



#guess {
    width: 100%;
    border: 1px solid #aaa;
    height: 50px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 3px;
    resize: none;
    font-size: 20px;
    text-align: center;
}

#guess:focus { 
    height: 100px;
}

.btnName.btn.std { 
    margin-top:2px;
}

.player-btn {
    border: 1px solid #333;
    border-radius: 3px;
    display: block;
    margin-top: 10px;
    padding: 3px 10px;
    font-size: 20px;
    overflow: hidden;
    box-shadow: 0 5px 5px rgba(0,0,0,0.6), inset 0 5px 5px rgba(255,255,255,0.6), inset 0 -3px 3px rgba(0,0,0,0.3);
    text-decoration: none;
}

/*
***************************************************
************PAGE HEADER TITLE and MENU*************
***************************************************
*/

.room-page header {
    display:block;
    position:fixed;
    top:0;
    background-color:#eee;
    color:#777;
    min-height:50px;
    width:100%;
    z-index:100;
}

       .room-page   header.active{
        z-index:120;
    }

    .room-page header .page-title { 
        text-align: center;
        font-size: 30px; 
        line-height:30px; 
        position: relative;
        bottom:5px;
        padding: 5px 40px 0;
        
    }
    .room-page header .page-menu {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
    }

       .room-page > div.body{
            margin-top:50px;
            z-index:200;
            margin-bottom:55px;
            max-width:100%;
            padding:0;
         
        }


    .turn-page header {
        border:none; 
        background-color:transparent;
        z-index:100;
        display:flex;
        flex-direction:row;
    }

       .turn-page   header.active{
        z-index:120;
    }

       
.token{
    border-radius: 5px; 
    position:fixed; 
    top:2px; 
    left:2px; 
    background-image:url(/img/peep.svg) ; 
    background-size:32px 32px; 
    background-repeat:no-repeat; 
    background-position: 0 0; 
    height:32px; 
    width:32px; 
}
 




    .turn-page #sender{ 
    padding:0 5px; 
    position:fixed; 
    top:0; left:40px; right:40px; 
    border-radius:0 0 5px 5px; 
    overflow:hidden; 
    white-space:nowrap; 
    height:30px;
}


.turn-page   .page-title {
    position: fixed;
    top: 30px;
    left: 50px;
    right: 50px;
    font-size: 20px;
    text-align: left;
}
   .turn-page header .page-menu {
    flex: 0 0 50px;
}

          .turn-page > div.body{
            margin-top:0;
            margin-bottom:0;
        }

          .turn-page .pagewrapper {
    background-color:#eee;
}



    /*Wow, so this is pretty ugly. Todo: Find another way. SASS? */
header.player-color-0 .page-menu > button, 
header.player-color-4 .page-menu > button, 
header.player-color-6 .page-menu > button, 
header.player-color-8 .page-menu > button, 
header.player-color-11 .page-menu > button,
header.player-color-12 .page-menu > button {
    background-image: url(/img/mnu-dk.svg);
}
 
header.player-color-1 .page-menu > button,
header.player-color-2 .page-menu > button,
header.player-color-3 .page-menu > button, 
header.player-color-5 .page-menu > button, 
header.player-color-7 .page-menu > button, 
header.player-color-9 .page-menu > button,
header.player-color-10 .page-menu > button {
    background-image: url(/img/mnu-lt.svg);
}

 

body.page-draw {
    background-color:#eee;
}


    .send {
        position:fixed; 
        bottom:10px; 
        right:10px; 
        background-color:#333; 
        border-radius:5px; 
        background:#333; 
        color:#eee; 
        height:30px; 
        margin:0; 
        border:none; 
        padding:3px 3px 3px 5px;
        font-size:16px;
        z-index:130;
}
    .send>span{
        display:inline-block;
        overflow:hidden;
    }
    .send .rcpt { 
         border-radius:3px; 
         max-width:200px; 
         white-space:nowrap; 
         padding:0 5px;
    }

    #modal-canvassize p {
        margin:0;
        padding:0; 
    }

    body.page-passadoodle-gallery .doodle{
        width:100%; padding:10px; background-color:#fff
    }
    body.page-passadoodle-gallery .guess{
        text-align:center; margin:20px; padding:0 10px;font-size:180%; border-radius:5px; border-top:none;border-bottom:none; background-color:#fff
    }



    .gallery-name{
        font-size:20px; border-radius:5px 5px 0 0; text-align:center;
    }
    body.page-passadoodle-gallery .starting-word{
        text-align:center; padding:20px;font-size:180%; padding-top:0;
    }
    body.game-passadoodle{
        background-color:#fff;
    }

       body.page-passadoodle-lobby #ready-button > div {
        text-align: center;
        padding: 20px;
    }
    body.page-passadoodle-lobby #wait-container {
        font-size:30px;
        line-height:100%;
    }
    body.page-passadoodle-lobby .word{
        font-size:30px;
    }
 
    body.page-passadoodle-lobby .page-title{
        font-size:20px; padding-top:10px;
    }

    body.page-passadoodle-wait .player-badge{
        font-size:20px;
    }

    body.page-passadoodle-wait .dias{
        height:300px;
        width:300px;
        margin:50px auto;
        background-color:#eee;
        border-radius:150px;
        position:relative;
        overflow:hidden;
    }
    body.page-passadoodle-wait .token.wait {
        display: none;
        position: absolute;
        color: #444;
        width: 32px;
        height: 32px;
        background-size: 32px 32px;
    }
    body.page-passadoodle-wait .clock{
        position:absolute;
        left:0;
        top:0; 
        height:300px;
        width:300px;
        background-position: 0 0;
        background-repeat:no-repeat;
        background-size:300px 300px;
    }
    body.page-passadoodle-wait .clock.hand {
        background-image: url(/img/wait/clockhand.svg);
        transform: rotate(15deg);
        transition:transform ease 1s;
    } 
    body.page-passadoodle-wait .clock.pivot {
        background-image: url(/img/wait/clockpivot.svg);
    }