@import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700';

html, body {
margin: 0;
padding: 0;
}

input {
	font-size: 16px;
 }

body {
overflow: hidden;
font-family: 'Roboto', sans-serif;
/*background: linear-gradient(#0054aa, #1ea6d3);*/
/*background-color: #0060ff;*/
background-color: #4c616b;
user-select: none;
}

body::after {
content: "";
background-image: url("../img/pattern.png");
background-size: 35%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0.08;
}

.message_list::-webkit-scrollbar {
width: 10px;
}

.message_list::-webkit-scrollbar-track {
background: none;
}

.message_list::-webkit-scrollbar-thumb {
background-color: rgba(192, 192, 192, 0.5);
border-radius: 5px;
}

.message_list::-webkit-scrollbar-thumb:hover {
background-color: rgba(192, 192, 192, 0.75);
}

.message_list::-webkit-scrollbar-thumb:active {
background-color: rgba(192, 192, 192, 1);
}

.content_wrapper {
padding: 5px;
box-sizing: border-box;
width: 100%;
height: 100%;
}

.game_screen {
display: none;
width:100%;
margin:0 auto;
}

.intro_screen {
display: none;
position: relative;
top:0;
width: 50%;
margin: 0 auto;
text-align: center;
max-width: 500px;
min-width: 275px;
/*background-color: rgba(0, 0, 0, 0.6);*/
border-radius: 5px;
padding:30px;
z-index:1;
}

#user_profile,#user_profile2{
	float: left;
    width: 90%;
    height: 50px;
    margin-bottom: 10px;
background-color:#fff;
border:3px solid #296797;
margin:0 3% 15px 3%;
padding:5px 2%;
border-radius:5px;
overflow:hidden;
}
#user_profile:hover,#user_profile2:hover{cursor:hand}
#user_profile a,#user_profile2 a{
float:left;width:100%;	
text-decoration:none;
position:relative;
}
#user_profile2{
	float:none;
	max-width: 500px;
    margin: 15px auto;
    background-color: #eee;
}

#user_profile img,#user_profile2 img{
float:left;width:50px;height:50px;border-radius:26px;	
border: 1px solid #000;
}

#user_profile span,#user_profile2 span{
	font-size:24px;
	color:#000;float:left;display:block;line-height:50px;padding-left:5px;
}

#user_profile2 span{font-size:21px;}
#user_profile2 span.goright{
    position: absolute;
    right: 0;
    font-weight: bold;
}

#total_points_final{font-size:17px;height:60px;width:100%;max-width:500px;margin:0 auto;padding:10px 0}
#total_points_final div{float:left;width:50%;text-align:center;line-height:24px}
#total_points_final h3{width:100%;font-weight:bold;font-size:24px}
#total_points_final span{width:100%;display:block;clear:both}
h3.yourpoints{float:left;width:100%;text-align:center;font-weight:bold;padding:15px 0 5px 0;font-size:24px}

.name_screen {
display: none;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 50%;
margin: 0 auto;
text-align: center;
max-width: 500px;
min-width: 250px;
/*background-color: rgba(0, 0, 0, 0.6);*/
border-radius: 5px;
padding: 40px;
}

.name_screen .header {
height: 60px;
}

.name_screen_message_box {
display: none;
}

.name_screen_message {
color: #FFF;
margin-bottom: 20px;
}

.name_screen_controls {
margin-top: 20px;
}

#room_name_button {
padding-left: 20px;
padding-right: 20px;
}

.description {
color: #FFF;
display: block;
margin-bottom: 20px;
}

#intro_name_box {
text-align:center;
display: block;
width: 100%;
margin-bottom: 15px;
}

.name_box {
border-radius: 5px;
outline: 0;
border: 0;
padding: 15px;
font-size: 16px;
font-weight: 400;
color: #000;
}

.finding_room {
display: none;
}

.finding_room span {
color: #FFF;
display: block;
font-size: 18px;
font-weight: 300;
margin-top: 10px;
}

.loading_spinner {
height: 50px;
}

.disconnected {
color: #FFF;
}

.afk_check {
position: absolute;
z-index: 100000;
margin: 0 auto;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(0, 0, 0, 0.9);
left: 0;
}

.afk_check_container {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

.afk_header_text {
color: #FFF;
text-align:center;
font-size: 26px;
margin-bottom: 15px;
}

.button_container {
position: relative;
width: 100%;
font-size: 0;
overflow: auto;
}

.button {
outline: 0;
border: 0;
padding: 10px 8px;
border-radius: 5px;
color: #FFF;
font-size: 16px;
font-weight: 700;
border: 2px solid #000;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.25);
cursor: pointer;
text-align: center;
}

.button_separator {
width: 8%;
background-color: black;
font-size: 16px;
height: 100%;
position: absolute;
color: #FFF;
line-height: 50px;
left: 0;
right: 0;
margin: 0 auto;
}

.random {
width: 100%;
float: left;
}

.red_button {
background: linear-gradient(#ff0018, #d30014);
background-color: #ff0018;
}

.leaderboardbtn{
    background: linear-gradient(#3e7198,#2a6490);
    background-color: #2a6490;
}

.endgamelead.red_button{
padding: 15px 10px;
max-width: 547px;
margin: 0 auto;
float: none;
display: block;
}

.red_button:hover {
background: linear-gradient(#ff283c, #ff0018);
}

.red_button:active {
background: none;
background-color: #9f000f;
}

.random.playasguest{width:48%;padding:10px 8px;border:1px solid #000;font-size:14px}
.random.loginmain{width:48%;clear:none;margin:0}

.transparent_button {
background-color: rgba(0, 0, 0, 0.3);
}

.transparent_button:hover {
background-color: rgba(0, 0, 0, 0.2);
}

.transparent_button:active {
background-color: rgba(0, 0, 0, 0.5);
}

.private {
font-size:14px;
border-width:1px;
width: 100%;
clear:both;float:left;
margin:4px 0 10px 0;
background: linear-gradient(#FF9800, #fd5f2d);
background-color: #FF9800;
float: right;
}

.private:hover {
background: linear-gradient(#ffb307, #FF9800);
}

.private:active {
background: none;
background-color: #9f5200;
}

.header {
height: 40px;
margin-bottom: 10px;
margin-left: 5px;
}

.header img {
height: 100%;
}

.main {
font-size: 0;
max-width: 1245px;
margin: 0 auto;
height: calc(100% - 55px);
}

.left, .right {
background-color: #FFF;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
border-radius: 5px;
height: 100%;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
position: relative;
}

.left {
/*width: 75%;*/
font-size: 0;
/*max-width: calc(100% - 210px);*/
width:100%;
display: none;
}

.right {
/*width: calc(25% - 10px);*/
display:none;
margin-right: 10px;
min-width: 200px;
padding: 20px;
font-size: 14px;
}

.alt_right2,.alt_right {
display: inline-block;
width:100%;
/*max-width: calc(100% - 210px);*/
height: 100%;
/*width: 75%;*/
box-sizing: border-box;
position: relative;
}

.mainbtn{padding:15px 10px}

.waiting_controls {
background-color: rgba(0, 0, 0, 0.65);
height: 60px;
line-height:60px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
padding: 0 15px;
box-sizing: border-box;
}

.host_control {
display: none;
}

.starting_time,.starting_time2 {
display: inline-block;
font-size: 20px;
color: #FFF;
top: 50%;
font-weight: 300;
position: relative;
transform: translateY(-50%);
}

#start_now_button2,#start_now_button, #delay_button {
position: relative;
top: 50%;
transform: translateY(-50%);
float: right;
}

#delay_button {
margin-right: 10px;
}

.show_final_results,.waiting_player_list {
background-color: rgba(0, 0, 0, 0.25);
padding: 20px;
box-sizing: border-box;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
height: calc(100% - 100px);
}

.show_final_results{background-color:#fff}

.waiting_player {
border-radius: 5px;
box-shadow: 0 0px 5px rgba(0, 0, 0, 0.25);
display: inline-block;
margin-right: 20px;
margin-bottom: 20px;
position: relative;
}
.waiting_player:hover{cursor:pointer}

.host_badge {
padding: 5px 10px;
border-radius: 5px;
background-color: #FFF;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
font-size: 12px;
position: absolute;
top: -10px;
right: -10px;
text-transform: uppercase;
font-weight: 600;
}

.waiting_player_picture {
width: 100px;
height: 100px;
text-align: center;
}

.waiting_player_picture img{
	border-radius: 40px;
    width: 80px;
    height: 80px;
    margin-top: 10px;
}

.waiting_player_picture i {
line-height: 100px;
color: #FFF;
font-size: 72px;
}

.waiting_player_name {
background-color: rgba(0, 0, 0, 0.25);
height: 40px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
color: #FFF;
font-size: 18px;
text-align: center;
line-height: 40px;
font-weight: 300;
text-overflow: ellipsis;
overflow: hidden;
box-sizing: border-box;
padding: 0 10px;
width: 100px;
}

.invite_link {
background-color: rgba(0, 0, 0, 0.25);
color: #FFF;
height: 30px;
padding: 2px 10px;
padding-right: 2px;
line-height: 19px;
box-sizing: border-box;
font-size: 12px;
font-weight: 300;
width:100%;
}

.invite_link span {
width: 86px;
line-height:30px;
}

#invite_link_box {
outline: 0;
margin-left: 3px;
border: 0;
border-radius:5px;
width: calc(100% - 84px);
height: 20px;
color: rgba(0, 0, 0, 0.5);
padding: 0 5px;
}

.round {
font-size: 13px;
font-weight: 600;
position: absolute;
background-color: rgba(0, 0, 0, 0.4);
height: 30px;
line-height: 30px;
color: #FFF;
padding: 0 10px;
top: 0;
left: 0;
border-top-left-radius:5px;
}

/*.message_list {
pointer-events:none;
display:none;
height:auto;
position:absolute;
width:calc(100vh - 20px);
height:46px;
top:60px;
left:50%;
margin-left:calc((50vh - 10px)*-1);
text-align:center;
overflow:hidden;
line-height:20px;
font-size:13px;
}*/

.message_list {
height: calc(100% - 40px);
overflow-y: scroll;
overflow-x: hidden;
margin-bottom: 15px;
font-size:12px;
}


.moneymaker{margin:15px auto 0 auto;display:block;width:300px;height:250px !important;}

.guessHints{font-size:36px;position:absolute;top:56px;width:90vh;margin:0 calc(50% - 45vh);text-align:center;height:auto;z-index:6000;letter-spacing:10px;background-color:rgba(255, 255, 255, 0.6)}

.poppedMsg{display:none;position:absolute;width:calc(50vh - 20px);z-index:1000;
left:50%;
line-height:25px;
margin-left:calc((25vh - 10px)*-1);
top:130px;
color:#000;
height:70px;
animation: fadeinout 4.5s linear forwards;}
.poppedMsg p,.poppedMsg span{float:left;clear:both;padding:0;margin:0;text-align:center;width:100%}
.poppedMsg p{height:40px;position:relative;text-indent:-9999px}
.poppedMsg p:before{position:absolute;left:50%;margin-left:-62px;content:'';width:125px;height:40px;background:transparent url('../img/logo.png') 0 0 no-repeat;background-size:125px;height:40px}
.poppedMsg span{margin-top:5px;font-size:16px;font-weight:bold;background-color:rgba(255, 235, 59, 0.65);border-radius:10px}


.poppedMsg.guessmsg{height:80px}
.poppedMsg.guessmsg p{height:80px}
.poppedMsg.guessmsg p:before{margin-left:-90px;width:179px;height:80px;background:transparent url('../img/guess-desktop.png') 0 0 no-repeat;background-size:179px;height:80px}


.message {
margin-bottom:3px;
animation: backgroundfade 1s linear forwards;
line-height:20px;
border-radius:5px;
}

@keyframes backgroundfade {
0%,100% { background-color:rgba(255, 235, 59, 0); }
15% { background-color:rgba(255, 235, 59, 0.4); }
85% { background-color:rgba(255, 235, 59, 0.4); }
}

@keyframes fadeinout {
0%,100% { opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
}

.notice {
color: rgba(0, 0, 0, 0.45);
}

.congrats {
color: #4caf50;
font-weight: 500;
}

.guessed {
color: #03A9F4;
font-weight: 500;
}

.players_guessed {
color: red;
font-weight: 500;
}

.player_message {
color: rgba(0, 0, 0, 0.6);
}

.trophy {
height: 150px;
margin-bottom: 15px;
}

.trophy img {
height: 100%;
margin-left:calc(50% - 75px);
}

.trophydiv{text-align:center}
.winner {
font-size: 36px;
font-weight: 500;
color: #222;
display: block;
}

.name {
margin-right: 5px;
}

.name_blue {
color: #2196F3;
}

.name_green {
color: #2ecc71;
}

.name_purple {
color: #9b59b6;
}

.name_orange {
color: #ff9800;
}

.name_red {
color: #ff1800;
}

.name_pink {
color: #f030a1;
}

.name_turquoise {
color: #00e5ee;
}

.name_aqua {
color: #008080;
}
.name_gold {
color: #ffd700;
}

.name_rust {
color: #b7410e;
}

.name_silver{
color: #ffd700;
}

.name_silver_1 {
color: #006699;
}
.name_silver_2 {
color: #00cc99;
}
.name_silver_3 {
color: #330066;
}
.name_silver_4 {
color: #990033;
}
.name_silver_5 {
color: #9966cc;
}
.name_silver_6 {
color: #cc9999;
}
.name_silver_7 {
color: #ccffcc;
}
.name_silver_8 {
color: #ffcccc;
}


.fb_container {
margin-top: 20px;
font-size: 0;
border-top: 3px solid rgba(255, 255, 255, 0.1);
padding-top: 15px;
}

.fb-like {
vertical-align: middle;
}

.intro_screen .header {
height: 70px;
}

#intro_showserverload.loadingserver{position:relative}
#intro_showserverload.loadingserver:before{border-radius:5px;line-height:50px;z-index:100;content:'Connecting to server...';position:absolute;width:100%;top:0;left:0;right:0;bottom:0;background-color:#5a636b}
#intro_showserverload.loadingserver:after{content:'';top:60px;left:50%;margin-left:-25px;position:absolute;width:50px;height:50px;background:transparent url('../img/load.svg') 0 0 no-repeat;z-index:101}


.fb_message {
display: inline-block;
color: #FFF;
background-color: rgba(0, 0, 0, 0.6);
height: 28px;
padding: 10px 10px 10px 20px;
font-size: 14px;
border-radius: 4px;
position: relative;
}

.fb_message.moregames{
clear: both;
  padding: 0 0 3px 0;
height: 105px;
width: 300px;
  margin-top: 10px;
  line-height: 28px;
  color: #fff !important;
}
.fb_message.moregames a{text-decoration:none;color:#649ad2;padding:2px 5px 1px 2px}

.fb_message_text {
display: inline-block;
height: 100%;
line-height: 28px;
margin-right: 10px;
vertical-align: middle;
}

.fb_message div {
vertical-align: middle;
}

#message_box {
position:absolute;
display: block;
bottom:0;
height: 35px;
width: 96%;
box-sizing: border-box;
padding: 0 2%;
font-size: 17px;
outline: 0;
border: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}

.player_list_wrap {
z-index:1000;
position:relative;
width: 150px;
height: 100%;
background-color: #f8f8f8;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
box-sizing: border-box;
padding: 1%;
display: inline-block;
vertical-align: top;
border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.player_list {
/*  width: 25%;
height: 100%;
background-color: #f8f8f8;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
box-sizing: border-box;
padding: 20px;
display: inline-block;
vertical-align: top;
border-right: 1px solid rgba(0, 0, 0, 0.05);*/
}

.player_stat {
font-size: 0;
color: #000;
margin-bottom: 20px;
position:relative;
}

.current {
border: 3px solid #54cc33;
}

.player_picture, .player_info {
display: inline-block;
height: 35px;
vertical-align: top;
}

.player_picture {
width: 35px;
height: 35px;
background-color: lightgrey;
border-radius: 5px;
margin-right: 10px;
overflow: hidden;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.1);
box-sizing: border-box;
background: lightgrey url("../img/muteno-player.png") 95% 95% no-repeat;
background-size:8px 8px;
}

.player_picture img{
	width:25px;
	height:25px;
	margin-top:4px;
	border-radius:13px;
}

.player_picture:hover{cursor:pointer}
.player_picture.ismute{background: lightgrey url("../img/mute-player.png") 95% 95% no-repeat;background-size:8px 8px;}
.player_picture.isplaynomute{background-image:none}


.player_picture i {
color: #FFF;
line-height: 35px;
}

.player_info {
font-size: 14px;
width: calc(100% - 45px);
}

.player_name {
font-weight: bold;
height: 18px;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis
}

.player_points {
height: 17px;
line-height: 17px;
}

.player_flag{display:none;width:20px;height:20px;position:absolute;top:5px;right:0;z-index:100}
.player_flag.isdrawer{display:block;background:transparent url("../img/flag_isdrawing.png") 50% 50% no-repeat;background-size:15px 20px}
.player_flag.isgold{display:block;background:transparent url("../img/flag_gold.png");background-size:20px 20px}
.player_flag.issilver{display:block;background:transparent url("../img/flag_silver.png");background-size:20px 20px}
.player_flag.isbronze{display:block;background:transparent url("../img/flag_bronze.png");background-size:20px 20px}


.game_board {
background-color: #fff;
width: calc(100% - 20px);
height: calc(100% - 35px);
display: none;
vertical-align: top;
position: absolute;
top: 25px;
border-radius: 5px;
bottom: 10px;
left: 50%;
margin-left: calc((50vh - 10px)*-1);
}

.draw_header {
position: absolute;
top: -60px;
left: calc(50% - 166px);
vertical-align: top;
pointer-events: none;
display: none;
}

.game_status {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
width: 50%;
height: 200px;
background-color: #ff0018;
color: #FFF;
border: 3px solid black;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
border-radius: 5px;
z-index: 1;
padding: 20px;
box-sizing: border-box;
}

.status_header {
font-size: 20px;
display: block;
margin-bottom: 10px;
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
padding-bottom: 10px;
}

.status_body {
font-weight: 300;
font-size: 16px;
}

.game_overlay {
width: 100%;
height: 100%;
position: absolute;
background-color: black;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}

.game_overlay div {
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
background: url("../img/logo.png");
background-size: 8%;
transform: rotateZ(-45deg);
opacity: 0.15;
}

.red_container {
background-color: #ff0018;
color: rgba(255, 255, 255, 0.75);
/*  border: 3px solid black;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
border-radius: 5px;
box-sizing: border-box;*/
}

.game_header {
vertical-align: middle;
display: inline-block;
font-size: 13px;
line-height:30px;
height:30px;
font-weight: 300;
text-transform: uppercase;
text-align: center;
padding: 0 10px;
left: 69px;
top: 0;
/*  transform: translateX(-50%) translateY(-50%);*/
position: absolute;
}

.word {
font-size: 18px;
font-weight: 500;
color: #FFF;
margin: 0 5px;
display: inline-block;
white-space: pre;
}

.button_secondary {
display: block;
outline: 0;
border: 0;
background-color: rgba(0, 0, 0, 0.25);
color: #FFF;
border-radius: 5px;
text-transform: uppercase;
padding: 6px 12px;
font-weight: 500;
margin: 0 auto;
margin-top: 5px;
pointer-events: all;
}

.clock {
width: 55px;
height: 55px;
border-radius: 100%;
border: 3px solid #000;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
background-color: #f8f8f8;
position: absolute;
top: -10px;
right: -30px;
z-index: 8000;
}

.clock_red {
width: 49px;
height: 49px;
background-color: red;
border-radius: 100%;
margin-top: 3px;
margin-left: 3px;
position: relative;
}

.clock_white {
width: 37px;
height: 37px;
background-color: #FFF;
border-radius: 100%;
margin-top: 6px;
margin-left: 6px;
position: absolute;
text-align: center;
}

.time_remaining {
font-size: 24px;
font-weight: 500;
line-height: 37px;
}

.drawing_board {
width: 100%;
height: 100%;
z-index:4000;
position:relative;
box-sizing: border-box;
}

.drawing_tools,.guesswords {
height: 270px;
padding: 15px 0 0 0;
display: none;
position: absolute;
top:0;
right:0;
z-index: 1000;
width: 150px;
}
.drawing_tools{z-index:5000}
.guesswords{
height:calc(100vh - 70px);
display:block;
padding:20px 0 0 0;
}

.guesswords button{
margin:4px;
padding:6px;
font-size:14px;
border-radius:3px;
background-color:#5bc0de;
border:0;
color:#fff;
}

.guesswords button:hover{cursor:pointer}
.guesswords button:disabled{
background-color:rgba(51, 51, 51, 0.3);
color:#eee;
}

#game {
width: 100%;
height: 100%;
}

.pencil {
display: none;
transform: rotateZ(-135deg) scale(0.75);
position: absolute;
pointer-events: none;
}

.pencil_tip {
width: 0;
height: 0;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
border-bottom: 29px solid black;
}

.pencil_tip_color {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid black;
position: absolute;
margin-left: -7px;
margin-top: 3px;
}

.pencil_tip_background {
width: 16px;
height: 0;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
border-bottom: 16px solid #eadeb0;
position: absolute;
margin-top: 13px;
margin-left: -25px;
}

.pencil_body {
width: 52px;
height: 75px;
background-color: black;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 3px solid black;
}

.pencil_body_streak {
margin: 0 auto;
width: 26px;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
}

.brush_color, .brush_size, .other_tools {
display: inline-block;
vertical-align: top;
height: auto;
float:left;clear:both;
}

.other_tools{margin-top:-25px}
.brush_size{margin:30px 0 0 20px}

.brush_color {
width: 128px;
padding:0 16px;
}

.size {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
border-radius: 100%;
background-color: #000;
position: relative;
top: 50%;
transform: translateY(-50%);
vertical-align: top;
margin-right: 10px;
opacity: 0.25;
}

.size:hover {
opacity: 0.75;
}

.size:active {
opacity: 1;
}

.selected {
opacity: 1 !important;
}

.tool {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
margin-right: 5px;
opacity: 0.25;
}

.tool:hover {
opacity: 0.75;
}

.tool:active {
opacity: 1;
}

.tool i {
line-height: 60px;
font-size: 42px;
pointer-events: none;
}

.small {
width: 10px;
height: 10px;
}

.medium {
width: 25px;
height: 25px;
}

.large {
width: 50px;
height: 50px;
}

.color {
display: inline-block;
margin-right: 4px;
margin-bottom: 4px;
width: 25px;
height: 25px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.25);
box-sizing: border-box;
cursor: pointer;
opacity: 0.25;
}

.color:hover {
opacity: 0.75;
}

.color:active {
opacity: 1;
}

.black {
background-color: #000;
}

.white {
background-color: #FFF;
}

.grey {
background-color: #555;
}

.green {
background-color: #2ecc71;
}

.blue {
background-color: #2196F3;
}

.purple {
background-color: #9b59b6;
}

.brown {
background-color: #6d3c37;
}

.yellow {
background-color: #fffc00;
}

.orange {
background-color: #ff9800;
}

.red {
background-color: #ff1800;
}

.pink {
background-color: #f030a1;
}

.turquoise {
background-color: #00e5ee;
}
.aqua {
background-color: #008080;
}
.gold {
background-color: #ffd700;
}
.rust {
background-color: #b7410e;
}
.silver {
background-color: #c0c0c0;
}
.silver_1 {
background-color: #006699;
}
.silver_2 {
background-color: #00cc99;
}
.silver_3 {
background-color: #330066;
}
.silver_4 {
background-color: #990033;
}
.silver_5 {
background-color: #9966cc;
}
.silver_6 {
background-color: #cc9999;
}
.silver_7 {
background-color: #ccffcc;
}
.silver_8 {
background-color: #ffcccc;
}


@media (max-width:1024px) and (orientation : portrait){
.content_wrapper{padding:1%}
.game_screen{width:100%}
.game_board{width:auto;height:70vh;bottom:auto;top:50px;left:5px;right:5px;margin-left:0}
.clock{top:-47px;right:3px}
/*.drawing_board{border-bottom: 1px dashed gray;}*/
.guesswords,.player_list_wrap{height:calc(30vh - 60px);left:0;right:0;width:auto;top:100%;padding:0 5px}
.player_list_wrap{background-color:transparent;display:none;position:absolute;top:175px;background-color:rgba(255, 255, 255, 0.7);z-index:100}
.player_stat{width:46%;padding:2%;margin:0;float:left;position:relative}
.brush_color{padding:0;width:140px;margin::11px}
/*.brush_size,.other_tools{clear:none;margin:0;float:right}
.brush_size{margin-top:50px}*/
.brush_size,.other_tools{position:absolute;left:50%;top:40%;margin:0}
.other_tools{top:55%}
.other_tools{margin-top:-20px}
/*.poppedMsg.guessmsg{top:60%;margin-top:-40px}*/


.drawing_tools{height: 110px;left: 0;right: 0;width: auto;bottom: 0;top: auto;padding: 0 5px;}
.left{position: absolute;left: 5px;right: 5px;bottom: 5px;top: 50px;height: auto;width: auto;}
.guesswords{opacity:0.5;height:40%;overflow:hidden;pointer-events:none;top:61%}
.message_list{top:85px;left:5px;right:5px;margin-left:0;width:auto;}
#message_box{pointer-events: all !important}
.guessHints{top:80px;margin:0 4%;width:92%}

}

@media (max-width:900px){	
.content_wrapper{padding:1%}
.game_screen{width:100%}
.game_board{width:auto;height:70vh;bottom:auto;top:50px;left:5px;right:5px;margin-left:0}
.clock{top:-47px;right:3px}
/*.drawing_board{border-bottom: 1px dashed gray;}*/
.drawing_tools,.guesswords,.player_list_wrap{height:calc(30vh - 60px);left:0;right:0;width:auto;top:100%;padding:0 5px}
.player_list_wrap{background-color:transparent;display:none;position:absolute;top:175px;background-color:rgba(255, 255, 255, 0.7);z-index:100}
.player_stat{width:46%;padding:2%;margin:0;float:left;position:relative}
.brush_color{padding:0;width:140px;margin:11px}
/*.brush_size,.other_tools{clear:none;margin:0;float:right}
.brush_size{margin-top:50px}
.other_tools{margin-top:-20px}*/
.brush_size,.other_tools{position:absolute;left:50%;top:40%;margin:0}
.other_tools{top:55%}
/*.poppedMsg.guessmsg{top:60%;margin-top:-40px}*/
.fb_message.moregames{width:100%;margin-top:25px;}
.drawing_tools{height: 110px;left: 0;right: 0;width: auto;bottom: 0;top: auto;padding: 0 5px;}
.left{position: absolute;left: 5px;right: 5px;bottom: 5px;top: 50px;height: auto;width: auto;}
.guesswords{opacity:0.5;height:40%;overflow:hidden;pointer-events:none;top:61%}
.message_list{top:85px;left:5px;right:5px;margin-left:0;width:auto;pointer-events:none;}
#message_box{bottom:5px;pointer-events: all !important}
.guessHints{top:80px;margin:0 4%;width:92%}
}

@media (max-width:450px) {
.intro_screen{padding:10px}
#user_profile2{margin-bottom:6px}
#user_profile,#user_profile2{width:100%;margin:0 0 15px 0;box-sizing: border-box;height: 68px;}
#user_profile span,#user_profile2 span{line-height:54px}
.moneymaker{display:none !important}
.waiting_controls{height:65px;text-align:center}
.waiting_controls .starting_time{float:left;width:50%;top:0;transform:none;line-height:30px}
.waiting_controls  #delay_button,.waiting_controls #start_now_button{float:none;top:0;transform:none}
.waiting_controls #start_now_button{float:right;top:10px}
.brush_size,.other_tools{top:35px;left:auto;right:15px}
.other_tools{top:55px}
.fb_message.moregames img{width: 90%;height: auto;}
.show_final_results, .waiting_player_list{height: calc(100% - 65px);}
.inlineleadwrap{padding-top:0}
.yourpoints{padding-top:8px}
}

@media (max-width:380px) {
/*.brush_size{margin-top:35px}
.other_tools{margin-top:-28px}*/
#total_points_final[style]{display:none !important}
.brush_size{top:35px;right:auto}
.other_tools{right:auto}
.show_final_results{padding:4px}
}