/* General  */ 
@font-face {font-family: trackim_font, Arial, Helvetica, sans-serif; src: url(/font/trackim_font.ttf); font-family: trackim_font; }
body{ margin:0px; font-family: trackim_font; font-display: fallback; padding:0px; letter-spacing:0.04em; background: #000000; }
.hide{display:none!important;  }
.button{ display:inline-block; opacity: 1;    transition-delay: 0.3s;  transition-duration: 0.3s; transition-property: all; transition-timing-function: ease-in;    margin-top:0px; }
.button_orange{  padding: 20px 40px; font-size:16px; background: #da2b28; color:#fff; border-radius:8px;  display:inline-block;  }
.button_blue{ padding: 20px 40px; font-size:16px; background: #2e3192; color:#fff; border-radius:8px;  display:inline-block; }
.button_green{  padding: 20px 40px; font-size:16px; background: #008A3E; color:#fff; border-radius:8px;  display:inline-block; }
button:active, button:hover { outline: none;  border: none; }
.inactive{ background: #ccc; color: #fff;  pointer-events: none; }
.inactive_opacity{ opacity:0; margin:-10px;    transition-delay: 0.6s;  transition-duration: 0.3s; transition-property: all; transition-timing-function: ease-in; pointer-events: none; }

.notturn{ pointer-events: none;}
.gap20{ margin: 10px;}
.text_field{ padding:20px; width:100%;  max-width:280px;  margin:0px; font-size:18px; border-radius: 8px; font-family: trackim_font; border: solid 1px #fff; }
.slide{ display:none; }
.full{ width: 100%!important; }
.pointer_none{ pointer-events: none; }
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;  user-select: none; }
.new_line{ clear:both; margin-top:14px; }

.pick_give_points{ font-size: 14px; margin:0px; text-align: center; padding: 2px 0px 0px 0px;  }

.joined_players_initial .player{ color:#000; }
.fade_in{   -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in; }
.field_hold{margin:10px 20px;}
.black_link{ color: #000;  }
.white_link{ color: #6b6b6b;  }
.cookie_disclaimer_small{ margin-top:40px; font-size:12px; display: inline-block; max-width: 400px; color: #6b6b6b; padding: 0 20px;}
#cookie_alert{ display:none;  position:fixed; bottom: 40px; padding: 20px; background: #008A3E; color:#fff; font-size:16px; border-radius: 8px; left: 50%;
transform: translateX(-50%); }

#bad_game_id{ z-index:12000!important; }
#create_a_game_btn{ margin-top:20px;}
/* Cookies  */ 
.cookies{ position:fixed; bottom: 0px; left:0px; right:0px; padding: 20px; background:#fff; -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1); box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1); }
.cookie_text{ color:#000; float: left;
    clear: none;
    width: calc(100% - 200px);
    text-align: left; }
#accept_cookies{ float:right; clear:none; }
/* Header  */ 
.header{ width: 100%; height: 120px; background:url(/art/background-blue.jpg); background-position:center; background-size:cover; background-repeat:no-repeat;  text-align:center; position:fixed; top:0px; left:0px; right:0px; z-index: 4;     }
.header_logo, .header_logo_pre{ height: 80px; padding:20px 20px 20px 20px;   } 

/* Match Card  */ 
.card{  width: 200px; height: 200px; border-radius:8px; background:#CCC; -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1); box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1); margin:10px; float:left; clear:none; }
.card_container{ padding: 50px; overflow:hidden; padding-bottom:140px; margin-top: 100px; }

/* ORIGINAL  .flip-card {background-color: transparent;width: 200px; height: 200px; perspective: 1000px; float:left; clear:none; margin:10px; border-radius: 8px; }*/
.flip-card {background-color: transparent; width: calc(25% - 10px); aspect-ratio: 1 / 1; perspective: 1000px; float:left; clear:none; margin:10px; border-radius: 8px; }

#bonus_give_card_container_sub .flip-card, #bonus_pick_card_container_sub .flip-card{ width: 200px;  height: 200px;  }


.ledgend_guy_hold .black_stroke{border: 1px solid #000000;  }

.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1); box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4); margin:0px; float:left; clear:none; border-radius: 8px;}
.active .flip-card-inner { transform: rotateY(180deg); border-radius: 8px;}
/*.active_show{ box-shadow: 0 0 10px #008A3E; }*/
.active_show .flip-card-inner { transform: rotateY(180deg); border-radius: 8px; box-shadow: 0 0 10px #008A3E; }


.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; border-radius: 8px;}
.flip-card-front{ background-image:url(/art/Twintally-Back-Match.jpg); background-size: cover; -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4); box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4); }
.flip-card-back { background-color: dodgerblue; color: white; transform: rotateY(180deg); }
.flip-give, .flip-pick{border:10px solid #fff; float:left; clear:none; }
.flip-give-active, .flip-pick-active{border:10px solid #008A3E; }


/* Bonus Card  */ 
.bonus_card_container { text-align: center; width: 100%; z-index: 100;     position: relative;
}
.b-flip-card {background-color: transparent;width: 300px; height: 300px; perspective: 1000px;  margin:10px; display: inline-flex; border-radius: 12px;  }
.b-flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1); box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.6); margin:0px; float:left; clear:none; border-radius: 12px;}
.b-active .b-flip-card-inner { transform: rotateY(180deg); border-radius: 12px;}
.b-flip-card-front, .b-flip-card-back { position: absolute; width: 100%; height: 100%; background-size: cover; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; border-radius: 12px;}
.b-flip-card-front{  background-image:url(/art/Twintally-Back-Bonus.jpg);background-size: cover; -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1); box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);  border-radius: 8px;}
.b-flip-card-back { background-color: dodgerblue; color: white; transform: rotateY(180deg); border-radius: 12px; }
.b-flip-card-front img{ border-radius:12px;}

/* Player Drawer  */ 
.current_player_bar{ font-size:18px;}
.points_bar{font-size:26px; display:block; text-align:center; }

#player_ID{ font-size:18px; display:block;}
#points{ font-size:14px; display:block; }
.play_drawer_container{ z-index:790; position:fixed; bottom:0px; left:0px; right:0px; background:#FFF; -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5); box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5); padding: 0px; }
.player{ padding: 18px 20px 18px 20px; height: 40px; float:left; clear:none; margin-left: 4px;  background: #e2e2e2;   }
#play_drawer .player{ float: none; } /* Override float for players in the play drawer */




#analytics_sort  .highlight_winner td{  background:#008A3E;   color:#ffffff;  }
#analytics_sort  .highlight_tied td{  background:#da2b28;   color:#ffffff;  }

.highlight_winner td:nth-child(1):after { content:' (Winner)';  }
.highlight_tied td:nth-child(1):after { content:' (Tied)';  }


.player, .player .points_bar {  color: #000000;  }
.current{  background:#008A3E;   color:#ffffff;  }
.current .points_bar{    color:#ffffff;  }


tr td:nth-child(1){
	text-align:left;
}

.grid{display:none;}

.grid_table{ width: 100%; max-width: 800px; display: inline; }
.grid_table tr td{ width: 100%; ; padding: 10px; }
.grid_head{ border-collapse: collapse; background: #cccccc;  color: #000; padding:10px; margin: 1px; }
.grid_row td{ border-collapse: collapse; background: #fff; color: #000; padding:4px; margin: 1px; width: 33%; }
.grid_row.grid_row_left td{ background: #f0f0f0; color: #aaa; }
#analytics_sort .highlight_winner.grid_row_left td{ background:#008A3E; color:#ffffff; }
#analytics_sort .highlight_tied.grid_row_left td{ background:#da2b28; color:#ffffff; }


.current_up{   content: url(/art/current_arrow.svg); width: 20px;height: 15px; position:fixed; z-index:840;   }



#game_board{ background: #ffffff;}

#loading_screen{z-index: 100000000; position: absolute; top: 0; bottom:0px; left: 0px; right:0px; }
#replay_ask, #replay_ask_owner, #continue_on {     padding: 20px; background-color: rgba(255,255,255,0.9); color: #000; padding-top: 20px; z-index: 10040;     bottom: 0px;
    top: unset;      padding-bottom: 20px;}
#replay_ask_body, #replay_ask_owner_body{     position: relative;
    bottom: 0px;
    overflow: hidden;
    padding: 10px 0px 0px;
    display: block; }
#replay_ask #no_play_again, #replay_ask #play_again, #replay_ask_owner #no_replay_game, #replay_ask_owner #replay_game{ width:auto;     padding: 10px 20px 10px 20px;
    position: relative; margin: 10px 10px 20px 10px;     bottom: 0px; height: auto;
}
#continue_on { z-index: 10010; }

.modal_padding{padding: 40px;}

#play_drawer{ 
    display: inline-flex; 
    flex-wrap: nowrap;
    min-width: 100%;
}
.player_icon{ background: #ffffff; color:#da2b28; text-size:14px; border-right:1px  #ccc solid;  padding: 20px 20px 14px 20px;   margin:0px;top: 0px; left:0px; height: 40px; float:left; clear:none; }
.player_icon svg{ height:60px; }
.play_drawer_container_sub{ width: calc(100% - 70px); float:left; clear:none; overflow-x: scroll;   }

#player_message{ z-index:799; position:fixed; bottom:0px; color: #fff; font-size:18px; left:0px; right:0px; -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5); box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5); padding: 0px; background: #da2b28;  }
.player_message_container{ padding: 12px 20px 10px 20px;  background: #751514; color:#fff; -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5); box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5); }
.message_token{ background:#FFF; color: #000; font-size:16px; padding: 10px 20px; float:left; clear: none; margin: 5px; border-radius: 8px;  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); }
#messages{}
#messages .Emoji{padding:20px; width: 40px; height:40px; background-repeat:no-repeat; background-size:cover; }
.emoji_sent{padding:20px; width: 100px; height:100px; background-repeat:no-repeat; background-size:cover; }


#close_messages{ position: absolute; right: 20px; top: 8px;     background-image: url(/art/close_icon_white.svg); }
.player_message_container_text{ width: calc(100% - 60px); display:block; }
#player_receiving_message{ z-index:10000; position:fixed; bottom:0px; color: #fff; font-size:18px; left:-10px; right:0px; padding: 0px;
    text-align: center; pointer-events: none; 
    bottom: 100px;
} 
.message_token_receive{ background:#FFF; color: #000; font-size:18px; padding: 10px 20px;  margin: 20px; border-radius: 8px;  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); display: inline-block; text-align: center;}

.message_text{ font-size:14px;  }

.messages_container{ padding:0px 5px 15px 15px; max-height:400px; overflow-y: scroll; margin-bottom: 20px; }
.message_section{     margin: 10px 5px 10px;  color: #FFF; font-size: 24px; display: block;  clear: both; border-bottom: 1px dotted; padding: 10px 0;}

/* Modal   */ 

#bonus_pick, #bonus_give{ z-index: 800; }
#match, #game_over, #bonus_pick, #bonus_give{ display:none;}
.modal_background{  z-index:10000; position: fixed; top:0px;  right:0px; left:0px; bottom: 0px; background:rgba(0,0,0,0.9); text-align: center; 
    overflow-x:hidden; backdrop-filter: blur(10px);  padding-top: 40px; } 

.spacer{ height: 400px; }
.modal_background_how{display:none;  z-index:10000; position:absolute; top:0;  right:0; left:0; bottom: 0px; background:rgba(255,255,255,1); text-align: center; overflow:hidden; height: 1000px; color:#000;     padding: 40px; } 
.how_to_text{ font-size:20px; color:#FFF; text-align:left; margin-top: 40px; color:#000; 
    max-width: 800px;
    display: inline-block; padding:0px 20px;
}

.how_to_cards{ display:block; padding: 20px; font-size:20px; color:#000; border-radius: 10px;    background: #f7f7f7; margin-bottom: 10px; box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.1);}

.lobby_share_text{     color: #fff;
    text-align: center;
    margin: 20px 0px 10px 0px;
    width: 100%;
   }
 
 .lobby_player{ font-size: 22px; }
 
 .pending_art{ width: 160px; }
   
  .lobby_share_text-2{     color: #fff;
    text-align: center;
    margin: 20px 40px;
    width: 100%;
	    font-size: 18px; overflow:hidden; width: auto;
   }
   
#pre_game_wait_screen_internal, #pre_game_wait_screen_external { z-index:1000; }
.joined_players_initial .player{ border-radius: 8px; font-size:16px!important; padding: 10px 20px; margin-right:20px; height:auto; pointer-events: none;  background:#fff;    } 	
.joined_players_initial .current{ background:#fff; color:#000;  padding: 10px 20px; height:auto; pointer-events: none;  } 

.joined_players_initial .points_bar{ display:none; margin:0px; padding:0px;  } 	
.joined_players_initial_hold { overflow-x: scroll; background:rgba(255,255,255, 0.1); margin-bottom: 40px;}
.joined_players_initial { display:block; text-align:center; width: 100000px; padding: 20px;  overflow:hidden;
	
	}




.white_bg{ background: #fff; display:none; }
#close_how_to{margin-top:20px; margin-bottom:40px;}
.how_to_logo{ padding-bottom:0px; }

#how_to_play{padding-bottom:40px}
.how_sub_text{ display:block}
.how_to_play_headline{ font-size:22px;  text-align:center; color:#000;  color:#2e3192; }
.instructions_text{ margin-bottom:40px;    display: block; }

.orange_text{ color: #00904c; }  
.blue_text{  color:#2e3192; } 
.green_text{  color: #008A3E; }
.red_text{  color: #c6242b; }

.turn_orange{ background:#00904c;    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;  }

.color_dot{    position: absolute;
    top: 8px;
    right: 8px;
    border-radius: 10px;
    width: 8px;
    height: 8px;
    z-index: 900;
      }
.ledgend_dot{ border-radius:10px; width: 10px; height: 10px;  margin-right:4px;     display: inline-block; }
.ledgend_guy_hold{     padding: 0px 5px;  margin:20px 0px; }
.ledgend_guy{ border-radius: 4px;
    display: block;
    margin-right: 10px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    display: inline-block;}

#game_over{  z-index:10020; } 
.match_text{ font-size:60px; color:#FFF; text-align:center; margin-top: 40px;}
.match_text_org{margin-bottom:0px;}
.match_text_mini{margin-bottom:20px; font-size:16px; color:#fff;}
.match_sub_text{ font-size:20px; color:#FFF; text-align:center; margin-top: 10px; margin-bottom: 20px;}
.match{ pointer-events: none;  }



.match:before {
   /* content: "";
    display: block;
    background: #ff0000;
    width: 10px;
    height: 10px;
    position: absolute;
    z-index: 1;
    border-radius: 10px;
    right: 10px;
    top: 10px;*/
}



/* New Game  */ 
.blue_background{ position: relative; top: 0px; right: 0px;left: 0px; bottom: 0px; color: #fff; text-align: center; background:url(/art/twintally_home_bg.jpg); background-position:center bottom; background-repeat:no-repeat; background-size:cover; z-index: 10000; padding-top: 40px;  padding-bottom: 10%;  /*overflow:hidden; */ 
   /* overflow-y: scroll; */ 
}
#buttons_container{padding-top:20px; padding-bottom:40px; z-index:0;}
#player_name_join{ margin-top:0px;  }
#join_a_game{ display:none;}
#progressive_setting{ height:32px; width: 32px; float:left; clear:none; margin: 0px; }
.progressive_setting_label{  float:left; clear:none;  width: calc( 100% - 60px );     margin: -2px 0px 0px 20px;width: calc( 100% - 60px ); font-size: 18px;}
.promo_text{  padding-bottom: 20px;padding-top: 10px; max-width: 400px; display: inline-block; margin: 0px 40px;  text-align: center;}
.promo_text_container{ text-align: left; font-size: 18px; display: block;  line-height:1.5; }
.progressive_setting_text{ text-align: left; display:block; clear:both; padding-top: 40px;}
.start_a_game_cont{ margin-top: 40px; font-size:30px; text-align:center; }
.send_game_link{ width: 100%;   font-size:18px; margin: 20px; border: 0px; color:#fff; background: transparent; border:0px;  }
.send_game_link_hold{ margin:0px 0px 20px 0px; border-radius: 8px; width:100%;  max-width:320px; background-color:rgba(255,255,255,0.1); overflow:hidden; display:inline-flex;}
.send_game_link_container{margin: 10px 20px 20px 20px;}
.share_text{  font-size:18px; margin: 10px 20px 0px 20px; color: #fff; }
#send_game_link_btn{ margin-bottom: 20px; }
#join_a_game_btn{  font-size:18px; margin-top:30px; }
.error{  border: 1px solid #da2b28; }
.game_id_tag{ margin-bottom:40px; background-color: rgba(0,0,0,0.6);
    padding: 20px; }
.game_id_text{ font-size:18px; display:block; }
.game_id_number{ font-size:40px; padding-top:10px; display:block; }

.game_id_text_2{ font-size:32px; display:block; color:#FFF; }
.game_id_number_2{ font-size:60px; padding-top:4px; display:block; color:#FFF; padding-bottom: 0px; }


.game_id_tag_nav{  padding: 20px 20px 10px 20px; }
.game_id_text_nav{ font-size:24px; display:inline-block; color:#fff; }
.game_id_number_nav{ font-size:40px;  display:inline-block; }


.nav_info{ background:#383838; background:url(/art/twintally_home_bg.jpg); background-position:center top; background-repeat:no-repeat; background-size:cover;}
.share_link_2{       border: 1px solid #424040;
    padding: 10px;
    margin: 0 20px;
    border-radius: 8px;
    width: 258px;
    margin-bottom: 20px;
    background: rgba(0,0,0, 0.3);
    color: #fff;

}
.share_text2{  font-size:16px; margin: 4px 20px 2px 20px; color:#fff; }
.game_date{ display:block; font-size:16px; color:#fff;}

.join_game{ margin-top:20px;}
.home_container{ margin-top:40px;}
.open_how_to{ }
.nounderline{ text-decoration:none; color:#FFF;}
.email_stat_disclaimer{ font-size:16px; display:block; text-align:left; padding: 10px 0  10px 0; max-width: 320px;
    display: inline-block;}
.header_text{ font-size:34px;}

.home_game_history{  margin: 40px 20px 20px 20px; max-width: 400px; background: rgba(255,255,255,0.1); border-radius: 10px; padding: 20px; overflow:hidden; }
.home_game_history_text{ padding: 0px 0px 10px 0;  text-align: left;  display: block;  }
#email_game_history{ width: calc(100% - 40px); }

/* Game Over Modal   */ 
#game_over_score{ overflow:hidden; text-align:center;}
#game_over_score_text{ font-size:80px; color:#FFF; text-align:center; margin-top: 20px;}
#game_over_score .close_player{ background:#fff; float:left; clear:none; border-radius: 8px;   -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1); box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1); margin-right:10px; margin-bottom:10px; height:auto; min-width: 200px; }
#game_over_score .close_player .current_player_bar{ font-size:60px; text-align:center; display:block; }
#game_over_score .close_player .points_bar{ font-size:140px; text-align:center; display:block; }
#game_over_score .player_text_blue{display:none;}
.game_over_score_container{display:block; text-align:center; padding: 20px; margin-bottom: 40px; background:rgba(255,255,255, 0.1); }
#game_over_score .current{ color:#000; }
#game_over .match_text{ margin-bottom:40px; }

/* Bonus Give  */ 
.bonus_give_player_container{display:block; padding: 20px 20px 10px 20px; border-bottom: 1px solid #fff; text-align: center;  }
#bonus_give_card_container, #bonus_pick_card_container{border-bottom: 1px solid #fff; overflow: hidden; padding:20px; background:#e2e2e2; margin-bottom:20px;  overflow-x: scroll; position:relative; z-index: 100; }
.give_select_player, .pick_select_player{ background: #fff; font-size: 18px; padding:20px; border-radius: 8px;     display: inline-block!important; margin-right: 10px; margin-bottom:10px; }
#bonus_give_card_container_sub, #bonus_pick_card_container_sub{ }
.give_select_player_active, .pick_select_player_active{ background: #008A3E; color:#fff;   }
#bonus_give_card_container .fix_width, #bonus_pick_card_container .fix_width{ width: 100%; }
#bonus_pick_complete, #bonus_give_complete{ z-index: 0; }
.back_gap{margin-top:40px;}

/* Bonus Pick  */ 
.pick_card_none{float:left; clear:none; display:inline-block; font-size:24px; text-align:center; width: 100%; }
#give_pick_alert_card img{ border-radius: 12px;  margin: 40px 0px 40px 0px; } 
.give_pick_message{ margin-left:20px; margin-right:20px;}

/* Taast  */ 
.toast{ position: fixed; top: 0px; right: 0px; color: #fff; display: none; text-align: center; left: 0px; font-size:24px; -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5); box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.5); z-index: 10060; min-height: 100px; }
.toast_error{  background-color:rgba(218,43,40,0.9);}
.toast_confirm{  background-color:rgba(41,193,55,0.9);  background-color:rgba(0,138,62,0.9);}
.toast_dark{  background-color:rgba(0,0,0,0.9); }

#NoCard_message{  text-align:left;     padding: 36px 40px 0px 20px;
    text-align: center; }

/* Match Toast  */ 
#match_message_toast, #give_pick_message{ width:calc(100% - 140px);  padding: 20px 20px 0px 20px; text-align:left;  }
.toast div{     /* width: 100%; */
    text-align: center;
    bottom: 0px;     left: 0px;
    right: 0px;
    padding: 20px; }

#bonus_message_toast, #give_pick_message_toast{ position: fixed; text-align: center;  font-size:24px; bacground: #fff; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3); z-index: 1001; height: 80px; width: 80px; border-radius:4px; overflow:hidden; 

    right: 0px;
    top: 0px;
    left: auto;
	padding: 0px;
    margin: 10px;


} 
#bonus_message_toast img, #give_pick_message_toast img{ width:100%; height: 100%; }



#bonus_message_sub, #give_pick_message_sub{ font-size:16px;     padding: 0px 20px 20px; width:calc(100% - 150px); text-align:left; }
 
 .position_bottom{ position:absolute; bottom: 20px; }
 
/* Timeout Toast  */ 
#timeout_modal_btn{ margin-top:40px; }
  
  
/* Game Over Modal  */ 
#game_over_score .winner{  background: #008A3E; /*background:url(/art/background-blue.jpg);*/ color:#fff;  }  
.complete_bar_small{ font-size:16px; text-align:center; display:block;}
.stats_sub_text{ font-size:16px; text-align:center; display:block; margin-bottom:10px;}
  
 /* Navigation  */  
#close_hamburger{ width: 20px; height: 20px; position:absolute; top:20px; right:20px; } 
.close_icon{ width: 20px; height: 20px;   background-image: url(/art/close_icon.svg); background-size: contain; background-repeat: no-repeat; background-position: center; display: inline-block;  }	
.close_icon_white{ width: 20px; height: 20px;   background-image: url(/art/close_icon_white.svg); background-size: contain; background-repeat: no-repeat; background-position: center; display: inline-block;  }	



.close_icon_mess{  margin-top: 3px; }
#hamburger_icon{ width: 40px; height: 40px; position:absolute; top:40px; right: 40px;   background-image: url(/art/ham_icon.svg); background-size: contain; background-repeat: no-repeat; background-position: center;  opacity:  0.4; }	
.navigation{  z-index:4000; position:fixed; top:0px; bottom:0px; right:0px; left: 0px; background:rgba(0,0,0,0.9);display:block; display:none; backdrop-filter: blur(10px); } 
.navigation_panel{ position: absolute; right:-320px; top:0px; bottom: 0px; max-width: 320px; width: 100%; margin-left:40px; background:#fff;   } 	
.nav{ margin:0px; padding:0px; } 
.nav li{ display:block;  border-top: 1px solid #e2e2e2; padding: 20px; font-size:16px; margin:0px; }
.nav li:last-child { border-bottom: 1px solid #e2e2e2;  }
 


#share_link_modal{ display:none; background: rgba(0,0,0,0.8); padding-top:80px; }

 
 
/* Audio  */  
.audio div{ width: 40px; height: 40px; position:absolute; top:40px; right: 100px;   background-size: contain; background-repeat: no-repeat; background-position: center; }	 
#play_music{  background-image: url(/art/music_on.svg);  visibility:visible; opacity: 0.4; transition: opacity 300ms linear; }
#mute_music{  background-image: url(/art/music_off.svg); visibility:visible; opacity:  0.4; transition: opacity 300ms linear; }		
#mute_music.hidden, #play_music.hidden { visibility: hidden; opacity: 0; transition: visibility 0s 300ms, opacity 300ms linear; }			
	
/* All Stats*/	
.all_stats_container{ background:#FFF; margin: 20px; border-radius: 8px; text-align:left; padding: 20px; position: relative;  -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);}	
.all_stats_game_id{ display:block; font-size:20px; }
.all_stats_date{ display:block; font-size:16px; }	
.all_stats_container table{ border-collapse:collapse; width: 100%; margin-top:20px;}
.all_stats_container table tr td{ border: 1px solid #e2e2e2; padding: 10px; }
#close_all_stats{float:right;}
.table_head{ color: #fff; background: #2e3192;}
.close_stats_container{  padding:20px; position: relative;  background:#FFF;    overflow: hidden; 
    -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);
 }	
#all_stats_content{    display: block; padding-bottom: 20px; } 
.all_statistics_head{ font-size:36px; color: #2e3192; margin-top: 14px; display: block; float: left; width:calc(100% - 125px);  text-align: left;}	
#all_stats_modal{ background: #efefef; z-index:10050; }
.completed_games_bar{ display:block;  clear: both; background: #cccccc;
    padding: 20px 20px 10px 20px;  overflow:hidden; }
.completed_games_bar span{display: inline-block; text-align:left;float:left; clear:none; 
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #e2e2e2;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 8px; }
	.stats_but{margin-top:20px; }
	.stats_but_cont{ overflow:hidden; }
	
h1{ font-size: 28px; color: #2e3193; }
	
.chervron{ position:absolute; top: 20px; right: 20px; width: 20px; height: 20px;}
.up{  background-image: url(/art/up.svg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.down{  background-image: url(/art/down.svg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.stat_highlight td{ background: rgba(0, 138, 62, 0.1); }	
#replay_game{margin-top:10px;}
.stats_jump_button{ margin-top:20px; text-decoration:none; }	
.highgame:before{     content: " ";
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 8px;
    background: rgba(0, 138, 62, 1);
    border-radius: 8px 0 0 8px;  }	
	
	.all_game_ave{ border-collapse: collapse; margin-bottom:10px; width: 100%; }
	.all_game_ave td{
	
	    padding: 10px;
    text-align: left;
    background: #fff;
    border: 1px solid #e2e2e2;
	}
	
/* Media Query  */  	
@media only screen and (max-width: 1024px) {
	.card_container{ padding: 15px;  overflow:hidden; padding-bottom:160px;} 
    .flip-card {margin:5px; }
	
	
	
	#game_over_score .close_player .current_player_bar{ font-size:28px; text-align:center; display:block; }
	#game_over_score .close_player .points_bar{ font-size:60px; text-align:center; display:block; }
	.header { text-align: left; height: 100px; }
	#hamburger_icon{ right: 20px;  top: 30px;  } 
	.header_logo { height: 60px;  }
	.audio div {  top: 30px; right: 80px; }
	
.cookie_text{ color:#000; float: none;
    clear: both;
    width: 100%;
    text-align: left; display:block; padding-bottom:10px; font-size:14px; }
#accept_cookies{ float:none; clear:both; }
	
		
}
@media only screen and (min-width: 1025px) { 
.flip-card {  width: calc(16.66% - 20px); }

}


#give_pick_message_text{ text-align: left;
    width: calc(100% - 130px); }
.modal_spacing{ display:block; padding-bottom:200px; }

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #2e3192;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 


.match .flip-card-inner { 
    transform: rotateY(180deg) !important; 
}

.noclick { 
    pointer-events: none !important; 
    cursor: default !important; 
}

.match { 
    opacity: 0.8;
}

.modal_countdown{ margin: 20px 0;  text-align: center; font-size: 64px; color:#ffffff; }


/* Player Button Styling for Message Feature - Pill Shape */



.button_player{ background: #FFF;
    color: #000;
    font-size: 16px;
    padding: 10px 20px;
    float: left;
    clear: none;
    margin: 5px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3); }


/* Base player button - inherit from existing button styling */
.select_player_item {
    display: inline-block;
    margin: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Outline style for unselected players - white outline, transparent fill */
.button_player.button_outline {
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

.button_player.button_outline:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* Selected state - solid white fill, dark text */
.button_player.selected,
.select_player_item.button_player.selected {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #ffffff !important;
}

/* Ensure buttons maintain pill shape and proper spacing */
.select_player_item.button_player {
    min-width: 80px;
    text-align: center;
}