@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap&subset=latin-ext);*{box-sizing:border-box}body{margin:0;font-family:Open Sans,sans-serif;font-size:14px}.menu{left:0;background-color:#fff;border-top:1px solid #ccc;overflow:auto}.menu,.menu-container{position:absolute;width:100%;height:100%}.menu-container{left:100%;transition:left .3s ease-in-out;overflow:visible;top:0;z-index:3;box-sizing:border-box}.left0{left:0}#topbar{height:60px;width:100%;position:relative;z-index:1;background-color:#fff;box-shadow:0 0 20px 0 rgba(0,0,0,.3)}#topbar,#topbar>div{box-sizing:border-box}#topbar>div{float:left;height:100%;padding:0 5px}#state{width:calc(100% - 60px);position:relative}#state-text{position:relative;top:50%;transform:translateY(-50%);width:100%}#toggle{width:60px;cursor:pointer;position:relative}#toggle>div{position:absolute;left:15px;top:27px;width:30px;height:3px;border-radius:2px;background-color:#ccc;opacity:1;transition:opacity .3s ease-in-out,transform .3s ease-in-out}#toggle>div:first-child{top:17px}#toggle>div:last-child{top:37px}#toggle.close>div:nth-child(2){opacity:0}#toggle.close>div:first-child{transform:translateY(10px) rotate(45deg)}#toggle.close>div:last-child{transform:translateY(-10px) rotate(-45deg)}.gray-round{border:1px solid #ccc;border-radius:5px;margin:5px 0;padding:5px;overflow:hidden;background-color:#fff;color:#000}button.gray-round:not(.light-disabled):hover{background-color:#eee}#container{position:absolute;width:100%;top:60px;min-height:calc(100% - 60px);overflow:hidden;clear:both}#container,#content{box-sizing:border-box}#content{padding:20px;min-height:500px;position:relative}#content .radios{margin-bottom:20px}.cards-container{display:none}#cards-radio:checked~#cards,#table-radio:checked~#table{display:block}#cards{margin-bottom:100px;position:relative}#cards>input{display:none}.card{position:relative;border:none;border-radius:5px;margin:5px 0;padding:5px;overflow:hidden;font-weight:700;font-size:20px;color:#fff;display:flex;align-items:center;justify-content:center;width:100%;max-width:480px;left:50%;transform:translateX(-50%);transition:transform .3s ease-in-out}input:checked+.card{box-shadow:inset 0 0 0 5px #4893fb}#cards>.card{cursor:pointer}.r{background-color:#d1756f}.g{background-color:#6da872}.b{background-color:#506ebf}.p{background-color:#816294}.y{background-color:#c7c67d}.card>*{margin:0 5px}.card>img{height:20px}.confirm{position:fixed;padding:5px;width:100%;left:0;bottom:-100px;box-shadow:none;transition:bottom .3s ease-in-out,box-shadow .3s ease-in-out;border:none;border-radius:0;margin:0;background-color:#fff;height:100px}.confirm.show{bottom:0;box-shadow:0 0 20px 0 rgba(0,0,0,.3)}.buttons>div{width:50%;float:left}.buttons>div:first-child{padding-right:5px}.buttons button{margin:0;width:100%}.buttons button:not(.gray-round){padding:6px}.assign-container .buttons{margin-top:20px}.tab-content{height:100%;display:none;clear:both}.players{background-color:#2c2b32}#log-radio:checked~.log,#players-radio:checked~.players,#settings-radio:checked~.settings{display:block}.player{background-color:#37363f;border-bottom:1px solid #504f55;padding:5px;color:#ccc}.player.user{border-bottom-width:3px}.player:nth-child(2n){background-color:#3d3c44}.player .name{color:#fff;font-weight:700}.assign-container>.modal>div:nth-child(2) img,.modal.recent-assign-modal img,.player>img{height:14px;vertical-align:middle;margin-left:5px}.s{text-decoration:line-through}.option{display:block;position:relative;bottom:-1px;float:left;box-sizing:border-box;text-align:center;padding:10px 0;color:grey;cursor:pointer}#full-log.disabled,.light-disabled,.option.disabled{cursor:default;color:#ccc}.option:not(.disabled):hover{background-color:#eee}.option-2{width:20%}.option-4{width:40%}.option-5{width:50%;border:none;bottom:0}label[for=settings-radio]{background-image:url(settings-gray.e1c0a3fda457d524c7e4.svg);background-position:50%;background-repeat:no-repeat;background-size:22px}input+.option{border-bottom:1px solid #ccc}input:checked+.option{border:1px solid #ccc;border-bottom:none;padding-bottom:11px;bottom:0;color:#000;cursor:default}#settings-radio:checked+.option{background-image:url(settings.0119fd375f317042b7bd.svg)}input:checked+.option:hover{background-color:#fff}input:checked+.option.first{border-left:1px solid #fff}input:checked+.option.last{border-right:1px solid #fff}input[type=radio]{display:none}button,input[type=submit]{border:none;background-color:#4893fb;color:#fff;padding:5px;border-radius:3px;outline:none;cursor:pointer;margin:5px;font-family:Open Sans,sans-serif;font-size:14px}button.disabled,input[type=submit].disabled{background-color:#bbb;cursor:default}button:not(.light-disabled):hover,input[type=submit]:hover{background-color:#67a6ff}button.disabled:hover,input[type=submit].disabled:hover{background-color:#bbb}input[type=password],input[type=text]{border:1px solid #ccc;border-radius:5px;font-family:Open Sans,sans-serif;padding:5px;outline:none;margin:5px 0;width:75%;font-size:14px}input[type=password]:focus,input[type=text]:focus{border-color:#4893fb}.log>div,.settings{padding:10px}.radios{padding:0;max-width:480px}#content .radios{position:relative;left:50%;transform:translateX(-50%)}.radios label{text-align:center;padding:5px;display:block;float:left;color:grey;cursor:pointer;border-right:1px solid #ccc}.radios3{width:33.3%}.radios2{width:50%}.radios label:last-of-type{border-right:none}.radios label:hover{background-color:#eee}#cards-radio:checked~div>label[for=cards-radio],#table-radio:checked~div>label[for=table-radio],.radios input[type=radio]:checked+label{color:#000;background-color:#f8f8f8;cursor:default}#full-log{border-bottom:1px solid #ccc;text-align:center;cursor:pointer}#full-log:not(.disabled):hover{background-color:#eee}.log-content{font-family:monospace}#full-log-modal{width:90%;height:90%;padding:15px}#close-log{position:absolute;width:20px;height:20px;border-radius:50%;right:20px;top:20px;cursor:pointer}#close-log:hover{background-color:#ccc}#close-log>div{height:2px;width:15px;position:absolute;left:2.5px;top:9px;background-color:#000;transform:rotate(45deg)}#close-log>div:last-child{transform:rotate(-45deg)}#log-scroll{height:calc(100% - 60px);overflow:auto}#offline{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fc5858;color:#fff;opacity:0;transition:opacity .5s ease-in-out,background-color .5s ease-in-out}#offline>div{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#offline>div,.c{text-align:center}.gray-text{color:#bbb}.login-div{margin:30px 0 0;position:relative}.login-div:first-child{padding:20px}.login-div>button,.login-div>input{position:relative;left:50%;transform:translateX(-50%);width:75%;display:block;margin:0 0 15px}.login-div>button{margin:0;width:50%}.login-div>img{width:100%;max-width:360px;position:relative;left:50%;transform:translateX(-50%);margin:0}.login-header{margin-bottom:30px}.login-header>div:first-child{text-align:center;font-size:64px;font-weight:300}.login-header>div:last-child{text-align:right}.footer,.login-info{text-align:center}.footer{bottom:10px;cursor:pointer;color:#2c6bc4}.footer,.loading{position:relative}.loading{height:100vh;width:100vw}.modal.recent-assign-modal{max-height:454px;overflow:auto;top:20px;z-index:2;transform:translate(-50%,25%);width:calc(27% + 200)}.modal.recent-assign-modal.modal-show{transform:translate(-50%)}.modal.recent-assign-modal>div:not(.cb):not(.no-fl){height:50px;width:calc(100% - 50px);float:left;padding:5px 10px;margin:5px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal.recent-assign-modal>div.assigned-symbol:not(.cb):not(.no-fl){width:50px;border:1px solid #ccc;border-radius:5px;padding:8px}.modal.recent-assign-modal>div.assigned-symbol>img{width:32px;height:32px;margin:0}.modal.recent-assign-modal>h2{text-align:center;font-weight:400}@-webkit-keyframes rotation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(359deg)}}@keyframes rotation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(359deg)}}.loading>img{width:200px;position:absolute;left:50%;top:50%;-webkit-animation:rotation 2s linear infinite;animation:rotation 2s linear infinite}.error{color:red}.assign-container{width:100%;max-width:480px;position:relative;left:50%;transform:translateX(-50%)}.assign-container>.c:not(.error){margin-bottom:25px}#newGameBtn,.assign-container>button,.cards-container>button{position:relative;width:50%;left:50%;transform:translateX(-50%);margin-left:0;margin-right:0}.assign-card{margin:5px;overflow:hidden;border-radius:5px}.assign-card .card{margin:0;border-radius:0;cursor:pointer}.assign-card>div:nth-child(2){border-width:1px;border-style:solid;border-top:none;border-radius:0 0 5px 5px;overflow:hidden}.assign-player{text-align:center;width:calc(100% - 55px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.assign-cancel,.assign-player{float:left;cursor:pointer;padding:10px 5px}.assign-cancel{width:55px;border-left:1px solid grey;position:relative}.assign-cancel>div{background-color:#d1756f;position:absolute;height:3px;width:18px;top:50%;left:50%}.assign-cancel>div:first-child{transform:translate(-50%,-50%) rotate(45deg)}.assign-cancel>div:last-child{transform:translate(-50%,-50%) rotate(-45deg)}.assign-card>div:nth-child(2)>div:hover{background-color:#eee}.border-r{border-color:#d1756f}.border-g{border-color:#6da872}.border-b{border-color:#506ebf}.border-p{border-color:#816294}.border-y{border-color:#c7c67d}.cb{clear:both;padding:0;margin:0}.modal{visibility:hidden;opacity:0;border:1px solid #ccc;padding:5px;margin:0;background-color:#fff;transition:opacity .2s ease-in-out,transform .2s ease-in-out,visibility .4s linear;left:50%;top:50%;transform:translate(-50%,-25%);width:calc(37% + 159px);box-shadow:3px 3px 14px -5px rgba(0,0,0,.37);border-radius:7px;overflow:hidden;z-index:9999}.modal-a{position:absolute}.modal-f{position:fixed}.modal-r{position:relative}.assign-container>.modal{top:50px;transform:translate(-50%,25%);padding:0;border:none}.assign-container>.modal-show{transform:translateX(-50%)}#startGame>.modal{top:200px;padding:0}.assign-container>.modal>div:nth-child(2){border-radius:0 0 7px 7px;border:1px solid grey;border-top:none;max-height:300px;overflow:auto}.assign-container>.modal>div>div{padding:5px;cursor:pointer}.assign-container>.modal>div:nth-child(2)>div:hover{background-color:#eee}.assign-container>.modal>div:nth-child(2)>div:not(:last-child){border-bottom:1px solid grey}.assign-container>.modal div.card{margin:0;border-radius:0}.modal button{position:relative;left:50%;transform:translateX(-50%);margin-left:0;margin-right:0}.modal-show{visibility:visible;opacity:1;transform:translate(-50%,-50%)}.to-be-rejected{transform:translateX(-50%) scale(.9)}#player-count{position:relative;left:50%;transform:translateX(-50%);max-width:250px}#player-count>div:not(:last-child){height:35px;float:left;text-align:center;position:relative}#player-count>div:first-child,#player-count>div:nth-child(3){width:35px;border-radius:7px;cursor:pointer}#player-count>div:first-child:not(.disabled):hover,#player-count>div:nth-child(3):not(.disabled):hover{background-color:#eee}#player-count>div:first-child>div,#player-count>div:nth-child(3)>div{background-color:grey;position:absolute;height:3px;width:25px;top:16px;left:5px}#player-count>div:nth-child(3)>div:last-child{height:25px;width:3px;top:5px;left:16px}#player-count>div.disabled>div{background-color:#ddd}#player-count>div.disabled{cursor:default}#player-count>div:nth-child(2){width:calc(100% - 90px);background-color:#eee;border-radius:17px;margin:0 10px}#player-count>div:nth-child(2)>div{position:relative;top:50%;transform:translateY(-50%)}#startGame{width:calc(37% + 159px);border-radius:7px;position:relative;left:50%;transform:translateX(-50%);padding:5px}#startGame>div:not(:first-child){margin:10px 0}#playerList>div{padding:10px;cursor:pointer}#playerList>div:hover{background-color:#eee}#playerList>div:not(:first-child){border-top:1px solid #ccc}#startGame>.modal>div:first-child{padding:5px 10px;text-align:center;font-weight:700;border-bottom:1px solid #ccc}#playerList{max-height:350px;overflow:auto}.player-select{border:1px solid #ccc;border-radius:5px;padding:5px;cursor:pointer}.player-select:hover{background-color:#eee}.player-select>div:first-child{font-weight:700}#shuffle-button{position:relative;left:50%;transform:translateX(-50%)}.assign-card .cursor-default{cursor:default}@media screen and (min-width:740px){#content{float:left;width:calc(100% - 370px)}#menu-container{position:relative;float:left;left:0;padding:5px;width:370px}.menu{position:relative;box-sizing:border-box;border:none;border-radius:7px;overflow:hidden;box-shadow:3px 3px 12px 0 rgba(0,0,0,.3)}#toggle{display:none}#state{width:100%}.confirm{position:absolute;visibility:hidden;opacity:0;transition:opacity .2s ease-in-out,visibility .4s linear;left:100%;top:50%;transform:translate(-50%,-50%);width:calc(185px + 50%);border-radius:7px}.confirm.show{box-shadow:0 0 10px 0 rgba(0,0,0,.3);visibility:visible;opacity:1;z-index:1}.login-div{float:left;width:50%;height:calc(100vh - 60px)}.login-div>img{top:50%;transform:translate(-50%,-50%)}.footer{position:static;clear:both}#cards,#table{display:block}.cards-container{width:50%;float:left;padding:5px}#content #card-radios{border:none;max-width:none;margin-bottom:5px}#card-radios>label{border-right:none;cursor:default;color:#000}#card-radios>label:hover,#cards-radio:checked~div>label[for=cards-radio],#table-radio:checked~div>label[for=table-radio]{background-color:transparent}.modal.recent-assign-modal{left:calc(50% - 185px);width:calc(36% + 84px)}}