body, html {
	/*font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, "sans-serif";*/
   font-family: 'oswaldregular', Montserrat, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-size: 16px;
	border: 0px;
	/*background-image: url(assets/site_art/site-background.jpg);*/
	background-image: url(assets/new_art/texture_v1.png);
	background-attachment: fixed;
   background-position: top center;
   margin: 0px; 
   padding: 0px;
   color: #000;
}

div.hidden
{
   display: none
}

span {
   vertical-align: middle;
}

strong {
   float : right;
   color : red;
   font-size: 24px;
   padding : 0 4px;

}

#site_container {
   height:100%;
   overflow-y: hidden;
}



/*body {
   /*background: #DDDDDD; */

/*
html {
   background-image: url(assets/site_art/dirtbg.jpg);
   
}
body {
   /*background: #DDDDDD;*//*
   margin: 0px; 
   padding: 0px;
}*/

.vertical_collapse
{
   display: none !important;
   /*height : 0;
   transition: height 500ms ease-in-out;*/
}

.vertical_expand
{
   /*height : 600;
   transition: height 500ms ease-in-out;*/
}

.fade_out
{
   opacity : 0;
   transition: opacity 500ms ease-in-out;
   pointer-events: none;
}

.fade_in
{
   opacity : 1;
   transition: opacity 500ms ease-in-out;
}

 

.ui_container {
    margin : 0 auto;

}

.container{
   width: 1400px;
   height: 900px;
   position: relative;
   margin: 20px;
   text-align : center;
}
.gameDiv{
   width: 1400;
   height: 900;            
   position: absolute;
   top: 0;
   left: 0;
   z-index : 2;
}

.system_prompt_div {
   width: 600;
   height:50;
   position: fixed;
   background-color : #68430b00;
   border: solid #fdca28 thin;
   color : white;
   top : 350px;
   left: 0px; right: 0px;
   margin-left : auto;
   margin-right: auto;
   padding : 1px;
   background-color: black;
   
   z-index: 3000000;

}


.header_horiz_grid_with_button
{
   display: grid;

   grid-template-columns : 70% 30%;

}

.login_exit_button
{
   display: flex;
  flex-direction: column;            
  justify-content: space-evenly;
}


.system_prompt_header_div {
   width : 100%;
   /*border-radius: 5px;
   background-color : #3dc444;*/
   color : white;
   /*
   -webkit-box-shadow: 0 10px 6px -6px #777;
      -moz-box-shadow: 0 10px 6px -6px #777;
           box-shadow: 0 10px 6px -6px #777;*/
}

.system_prompt_header_text {
   color : white;
   text-align: center;
}



.system_prompt_text {
   color : white;
}

.game_prompt_dialog
{
   width: 600;
   height: 300;
   position: fixed;
   background-color : black;
   border: solid #fdca28 thin;
   color : white;
   top : 300px;
   left: 0px; right: 0px;
   margin-left : auto;
   margin-right: auto;
   
   z-index: 15000;

}

.game_prompt_div {
   width: 600;
   height: 300;
   position: fixed;
   border: solid;
   border-color: #fdca28;
   background-color: black;
   border-width: thin;
   color : white;
   top : 300px;
   left: 0px; right: 0px;
   margin-left : auto;
   margin-right: auto;
   
   z-index: 15000;

}

.game_prompt_buttons_container{
   display:flex;
   justify-content: center;
}

.game_prompt_header_div {
   background-color : black;
   color : white;
}

.game_prompt_header_text {
   color : #fdca28;
}

.game_prompt_options_text {
   color : white;
}
.game_prompt_text {
   color : white;
   padding:10%;
}


.visible_dropdown {
   visibility : visible;
}
.hidden_dropdown {
   visibility : hidden;
}

.admin_screen {
   width: 1400;
   height: 900;     
   position: absolute;
   color : #ffffff;
   /*background-color : #FFFFFF;*/
   top: 80px;
   left: 0px; right: 0px;
   margin-left : auto;
   margin-right: auto;
   
   z-index: 100;
}

.new_user_div {

}

.test_field_50
{
   width : 50px;
}

.test_field
{
   width : 75px;
}

.test_field_set {
   color : black;
   margin-top:25px;
   /*background-color: rgb(88, 90, 241);*/
}

legend {
  /* background-color: rgb(88, 90, 241);*/
   color: rgb(248, 245, 245);
   font-size: 20px;

   /*padding: 3px 20px;*/
   cursor:default;
}

.fieldset_black_text {
   color: rgb(0, 0, 0);

}
.fieldset_white_text {
   color: rgb(255, 255, 255);
   margin-top:5px;

}

.legend_black_text {
   color: rgb(0, 0, 0);
   padding: 3px 20px;

}

.legend_white_text {
   color: rgb(255, 255, 255);
   padding: 3px 20px;

}

.qdf_logo_container {
   background-color: black;
   height : 80px;
   width : 325px;
   display: grid;
}

.qdf_logo {
   height : 60px;
   align-self: center;
}

 
.stroked_font  {
   font-size: 14px;
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.game_stats_header {
   display : grid;
   grid-template-columns : 33% 33% 33%;
   padding: 5px;
   /*grid-auto-flow:column;*/
   color:white;
   text-shadow:
   -1px -1px 0 #000,
   1px -1px 0 #000,
   -1px 1px 0 #000,
   1px 1px 0 #000;
}
.game_stats_category_header {
   text-align: center;
   align-self: end;

}

.row_stats_container {
   display: flex;
   flex-direction: column;
   text-align: center;
}


.game_stats_row {
   display : grid;
   font-family: "Verdana";
   font-size: 12px;
   grid-template-columns: 33% 33% 33%;
   padding: 1px 5px;
   color:white;
   text-shadow:
   -1px -1px 0 #000,
   1px -1px 0 #000,
   -1px 1px 0 #000,
   1px 1px 0 #000;
}

.game_stats {
   height : 310px;
   width : 300px;
   position: fixed;
   left : 1400px;
   top:-325px;
   opacity:0;
   border-radius:  5px;
   border : solid #fdca28 thin;
   background-color: black;
   z-index:  60000;
}




.game_stats_old {
   height : 310px;
   width : 300px;
   position: fixed;
   left : 1400px;
   top:-325px;
   opacity:0;
   border-radius:  5px;
   background : rgb(7, 117, 7);
   z-index:  60000;
}

/*team rankings*/

.team_rankings {
   width : 1400px;
   height : 300px;
   position: fixed;
   left : 700px;
   top:-525px;
   opacity:0;
   border-radius:  5px;
   background-color: rgba(255,255,255,.9);
   z-index:  60000;
   background-color: rgb(169, 166, 230);
}


.show_rankings_transition {
   transform: translateY(800px);
   opacity : 1;
   transition: transform 1500ms ease-in-out, opacity 1500ms ease-in-out;

}


.hide_rankings_transition {
   transform: translateY(-800px);
   opacity : 0;
   transition: transform 1500ms ease-in-out, opacity 1500ms ease-in-out;

}




.team_rankings_grid {
   display : grid;
   grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
   width:1400px;
	/*background-color: rgba(255,255,255,0.10);*/
   
}

.team_rankings_selected {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   color:white;
   background-color: black;
   font-size: 14px;
   display: flex;
   justify-content: center;
   cursor: pointer;
}

.team_rankings_header {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   color:white;
   background-color: slateblue;
   font-size: 14px;
   display: flex;
   justify-content: center;
   cursor: pointer;
}

.team_rankings_stat {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   color:black;
   /*background-color: black;*/
   font-size: 14px;
   display: flex;
   justify-content: center;
   cursor: default;
}

.rankings_align_bottom {
   align-self: flex-end;
}

.rankings_align_center {
   align-self: flex-end;
}

.slide_out {
   transform: translateY(500px);
   opacity : 1;
   transition: transform 1500ms ease-in-out, opacity 1500ms ease-in-out;

}


.slide_in {
   transform: translateY(-500px);
   opacity : 0;
   transition: transform 1500ms ease-in-out, opacity 1500ms ease-in-out;
}

.slide_out_sidebar {

   height: 900px;
   position: fixed;
   left: -325px;
   width: 350px;
   margin-top: 60px;
   border-radius: 5px;
   transition: transform 250ms ease-in-out;
   /*background: linear-gradient(180deg, #136303 0%, #cf4606 100%);*/
   background : rgb(7, 117, 7);
   /*opacity: .75;*/
   z-index: 1000;
}

.slide_out_sidebar_mobile
{
   transform: translateX(325px);

}


.slide_out_sidebar:hover {

   transform: translateX(325px);
}

.remove_user_div {

   border: 2px solid #000000;
}
.admin_label {
   float : left;
   color : white;
}

.password_label {
   float : right;
}
.new_user_name {
   height : 50px;
   float:right;

}
.new_user_password {
   float:right;
   height : 50px;

}

fieldset {
   margin-top : 50px;
   border-style: none;
}

.fieldset_test_panel {
   text-align: left;
   margin-left:50px;
}



.fieldset_margin_top_10 {
   margin-top : 10px;
}

.fieldset_margin_top_6 {
   margin-top : 6px;
}


.fieldset_margin_right_6 {
   margin-right : 6px;
}

.column_grid_2 {
   display:grid;
   grid-template-columns: auto auto;
   column-gap: 1px;
}

.group_invite_input {
   background-color:rgb(66, 62, 62);
   color : white;
   border-style: none;
   padding: 0%;
}

   ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color:#777;
      opacity: 1; /* Firefox */
    }
    
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
      color:#777;
    }
    
    ::-ms-input-placeholder { /* Microsoft Edge */
      color: #777;
    }



.contact_manager_nav_bar {
   display:flex; 
   flex-direction:row;
   margin:10px;
}


.test_side_of_field{
}

.div_center
{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.playoff_invite_settings_hide
{
   display: none !important;

}

.email_entry_height
{
   height: 175 !important;
}

.playoff_invite_div
{
   width : 700px;
   height : 600px;
   position: fixed;
   left : 25%;
   top:150px;
   /*opacity:0;*/
   border-radius:  5px;
   z-index:  2000001;
   background-color: 18181b;
   border: solid;
   border-color: #fdca28;
   border-width: thin;
}

.playoff_invite_options {

   display:flex;
   flex-direction:row;
   padding: 5px;
   justify-content: center;
   align-items: center;
   width: 75%;
   
}

.playoff_invite_grid {
   display: grid;
   grid-template-columns: auto auto auto auto;
   padding: 20px;
   grid-gap : 10px;
   justify-content: center;
}

.playoff_invite_chooser_grid
{
   display: grid;
   grid-template-columns: auto auto auto auto;
   padding: 20px;
   grid-gap : 10px;
   justify-content: center;
   overflow-y: auto;
   height : 365px;

}



.playoff_invite_input_field {
   width : 230px;
   background-color: rgb(62, 61, 61);
   color: white;
   border-width: 0px;
   height: 2em;
   font-size: 18px;
}


.playoff_invite_input_field:focus
{
    outline: none;
    border: 1px solid #fdca28;
    background-color: black;
    

}


.schedule_container {
   grid-template-columns: repeat(4, 1fr);
	width: 50%;
	padding:0px 5rem;
	overflow: hidden;
}

.games_container {
   display : grid;
   column-gap : 20px;
   row-gap : 1em;
   grid-template-columns: repeat(4, 1fr);
	/*width: 90%;
	padding:0px 5rem;*/
	overflow: hidden;
   animation-duration: 1s;
}

#create_lobby_interface_container
{
   margin-bottom: 50px;
}

.lobby_grid_game {

   text-align : left;
   width : 200px;
   height : 4.5em;
   margin : 5px;

}


.effect1{

   border: 2px solid #000000;
   background-color : #FFFFFF;
   border-radius: 5px;
   -webkit-box-shadow: 0 10px 6px -6px #777;
      -moz-box-shadow: 0 10px 6px -6px #777;
           box-shadow: 0 10px 6px -6px #777;
}

.effect2{

   border: 2px solid #000000;
   border-radius: 5px;
   -webkit-box-shadow: 0 10px 6px -6px #777;
      -moz-box-shadow: 0 10px 6px -6px #777;
           box-shadow: 0 10px 6px -6px #777;
}


.account_header {
   cursor : pointer;
   background-color : #cc1815;
   width : 200px;
   margin-left : 85%;
   left :0px;
   border-radius: 5px;
   -webkit-box-shadow: 0 10px 6px -6px #777;
      -moz-box-shadow: 0 10px 6px -6px #777;
           box-shadow: 0 10px 6px -6px #777;
}
.screen_header {
   background-color : #68430b;
   width : 95%;
   border-radius: 5px;
   -webkit-box-shadow: 0 10px 6px -6px #777;
      -moz-box-shadow: 0 10px 6px -6px #777;
           box-shadow: 0 10px 6px -6px #777;
}




.playoff_header {
   background-color : #3dc444;
   width : 95%;
   border-radius: 5px;
   -webkit-box-shadow: 0 10px 6px -6px #777;
      -moz-box-shadow: 0 10px 6px -6px #777;
           box-shadow: 0 10px 6px -6px #777;
}


.game_group_header_old {
   background-color : #390fcf;
   width : 15%;
   margin: 0% 95% 0% 2.4%;
   border-radius: 5px;
   -webkit-box-shadow: 0 10px 6px -6px #777;
      -moz-box-shadow: 0 10px 6px -6px #777;
           box-shadow: 0 10px 6px -6px #777;
}


.game_group_header {
	background-color:transparent;
	float:none;
	width:100%;
	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
	padding:0px;
	margin:0px;
}


.green_button {
   background-color: #4CAF50;
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   cursor: pointer;
 }

.game_lobby_screen{
   width: 1400;
   height: 900;     
   position: absolute;
   /*background-color : #FFFFFF;*/
   top: 80;
   left: 0px; right: 0px;
   margin-left : auto;
   margin-right: auto;
   z-index: 110;
}

.game_lobby_interface_grid
{
   display: grid;
   grid-template-columns: 300px 200px auto;

}

.log_box {
   width:100%;
   height:200px;
}


.schedule_screen {
   width: 1400;
   height: 900;     
   position: absolute;
   /*background-image: url("assets/site_art/site-bg.jpg");*/
   /*background-color : #DDDDDD;*/
   top: 80px;
   left: 0px; right: 0px;
   margin-left : auto;
   margin-right: auto;
   z-index: 130;
}
.schedule_screen_container {
   display: grid;
   grid-template-rows: 110px ;
   justify-content: left;

}



.interface_screen {
   width: 1400;
   height: 900;     
   position: absolute;
   /*background-color : #DDDDDD;*/
   top: 80;
   left: 0px; right: 0px;
   margin-left : auto;
   margin-right: auto;
   z-index: 140;
}

.core_screen{
   width: 100%;
   height: 0;     
   position: fixed;
   /*background-color : #DDDDDD;*/
   top: 55px;
   left: 0px; right: 0px;
   margin-left : auto;
   margin-right: auto;
   z-index: 200;
   
}

.playoff_screen{
   width: 1850;
   height: 900;     
   position: absolute;
   /*background-color : #DDDDDD;*/
   top: 80;
   left: 0px; right: 0px;
   margin-left : auto;
   margin-right: auto;
   z-index: 140;
}

.testscreen{
   width: 1400;
   height: 900;     
   position: absolute;
   background-color : #FFFFFF;
   top: 50;
   left: 0px; right: 0px;
   margin-left : auto;
   margin-right: auto;
   z-index: 200;
}


/*fiddy*/




.create_playoff_screen{
   width: 1400;
   height: 900;     
   position: absolute;
   /*background-color : #FFFFFF;*/
   top: 50;
   left: 0px; right: 0px;
   margin-left : auto;
   margin-right: auto;
   z-index: 90;
}

.overlay{

   z-index: 9;
   width : 1400px;
   /*height : 1000px;*/
   background-color : #dddddd;
   color : white;
   position: absolute;
   top:0px;
   left: 0px; right: 0px;
   margin-left : auto;
   margin-right: auto;
   opacity: 0.98;
   visibility: hidden;
}

.challenge_chips_dropdown {
   width : 150px;
}

.playoff_container {

}
.container_round_robin {
   overflow : scroll;

}

.bracket_game {
   width : 200px;
   text-align : left;
   height : 7em;
   margin : 5px;
   position : absolute;
}

.grid_game {

   text-align : left;
   width : 250px;
   height : 11em;
   margin : 5px;

     /* -webkit-animation:pop-in 0.5s;
   -moz-animation:pop-in 0.5s;
   -ms-animation:pop-in 0.5s;*/

}

.grid_game_options {
   display: flex;
   flex-direction: row;
}

.slot_matchup_old {
   margin : 5px;
   width:55%;
   display: inline-block;
}

.grid_game_username, .grid_game_score {
   padding : 19px 3px 0px 0px;
   color:white;
   font-size: 24px;
}



grid_game_avatar {

}


.grid_game_user_icon {
   width : 35px;
   height : 35px;
   background-image: url("assets/artwork/helmet_icon.png");
   background-size: 35px 35px;

   display: flex;
   justify-content: center;
   align-items: center; 
   position: relative;
}

.online_status_icon {
   position: absolute;
   bottom: -5px;
   right: -5px;
}



.slot_matchup {

   display: grid;
   grid-template-columns: 30% 55% 15%;
   row-gap: 5px;
   /*
   margin : 5px;
   width:97%;
   row-gap : 5px;*/
}




.pslot_play_button {
   padding : 0px;
}


.schedulebox {
   display: flex;
   flex-wrap: wrap;
   
}

.scrollable_game {
   display: flex;
   text-align : left;
   width : 200px;
   margin : 5px;
   border: 2px solid #000000;
}

.schedmatchup {
   margin : 5px;
   width : 100px;
}
.schedbutton {
   margin : 5px;
   width : 100px;
}

.centerbutton {

   margin: 0;
   position: relative;
   /*float : right;*/
   top: 50%;
   left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.account_tab_old
{
   /*display : block;*/
   width : 300px;
   position : fixed;
   height : 40px;
   /*
   height: 50px;
   top : 51px;*/
   /*left : 1250px;*/
   top : 51px;
   z-index: 80000;
   color : #ffffff;
	font-family:"Zilla Slab", Helvetica, Arial, Verdana, sans-serif;
   font-weight: 800;
   font-size : 24px;

   background-color : #390fcf;
   /*width : 15%;*/
   margin: 0% 70% 0% 30%;
   border-radius: 5px;
   -webkit-box-shadow: 0 10px 6px -6px #777;
      -moz-box-shadow: 0 10px 6px -6px #777;
           box-shadow: 0 10px 6px -6px #777;
}

.header_container {
   position : fixed;

}

.team_rankings_button {
   position: fixed !important;
   width : auto;
   top : 20px;
   right : 260px;
   z-index : 1000000;
   display: none !important;
   
}

.bottomnav {
	width: 100%;
    height: 60px;
    position: fixed;
    background-color: rgba(225,225,225,0.2);
    bottom: 0px;
    z-index: 99999;
	
}

.bottomnav_center{
	width: 80%;
}

.account_tab {
    font-weight: 400;
    font-size: 18px;
    position: fixed;
    top: 17px;
    right: 15px;
    width: 300px;
    z-index: 100000;
    cursor: pointer;
    color: ghostwhite;
    display: grid;
    grid-template-columns: 150px 150px;

}

.site_box_style {

   border: solid;
   border-color: #fdca28;
   padding-top : 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
   background-color: black;
   border-width: thin;
   border-radius : 10px;
}

.notification_div {
   position : fixed;
   bottom : 10px;
   left : 10px;
   width : 500px;
   height : 75px;
   text-align: center;
   color : ghostwhite;
   font-size: 24;
   z-index: 100000;
   padding : 10px 10px;
   border: solid;
   border-color: #fdca28;
   padding : 50px;
   background-color: black;
   border-width: thin;
   border-radius : 10px;
   font-size: 24px;
   font-weight : bold;

}

.notification_slide_in {

   bottom:45px;
   transition: all 500ms ease-in-out;
}

.notification_slide_out {

   bottom:-200px;
   transition: all 500ms ease-in-out;
}
/* nav menu */


.blur_content {
   -webkit-filter: blur(4px);
   -moz-filter: blur(4px);
   -ms-filter: blur(4px);
   -o-filter: blur(4px);
   filter: blur(4px) brightness(75%);


}
/*communicator*/


#communicator_contact_list_div, #communicator_pending_list_div, #communicator_user_select_div
{
   height:500px;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}

#communicator_search_list_div
{
   height:420px;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}
#comm_playoff_invite_seeds_list
{
   height:360px;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
}

.communicator_slideout_container
{
   display: grid;
   grid-template-columns: auto auto;
   position: fixed;
   top:100px;
   z-index: 80000;
}

#communicator_container_div
{
   background-color: black;
   border: solid;
   border-color: #fdca28;
   border-width: thin;
   /*border-radius : 10px;*/

   display: grid;
   width: 400px;
   grid-template-rows: 50px 50px 500px 100px;
}

#communicator_chooser_div
{
   width:100%;
   display: flex;
   flex-direction: column;
}

#communicator_menu_row 
{
   display: grid;
   grid-template-columns: 50px 250px 100px;
   color:white;
   text-align: center;
   align-content: center;
}

#communicator_title_row
{
   display : flex;
   width : 100%;
   color: white;
   font-size: 24px;
   font-weight: bold;
   justify-content: center;
   align-items: center;

}

.comm_user_tile
{
   display: grid;
   grid-template-columns: 50px 250px 25px 25px 25px 25px;
   align-items: center;
   /*border-top: thin solid #fdca28;*/
   color:white;
   cursor: pointer;
   margin-top : 5px;
}

.comm_pending_tile
{
   display: grid;
   grid-template-columns: 50px 200px 75px 75px;
   align-items: center;
   /*border-top: thin solid #fdca28;*/
   color:white;
   cursor: pointer;
   margin-top : 5px;
}

.comm_invite_tile, .comm_request_friendship_tile, .comm_cancel_tile, .comm_user_select_tile
{
   display: grid;
   grid-template-columns: 50px 200px 150px;
   align-items: center;
   /*border-top: thin solid #fdca28;*/
   color:white;
   cursor: pointer;
   margin-top : 5px;

}


.comm_playoff_invite_options {

   display:flex;
   flex-direction:row;
   padding: 5px;
   justify-content: center;
   align-items: center;
   width: 75%;
   
}

.comm_pending_playoff_tile
{
   display: grid;
   grid-template-columns: 135px 95px 30px 70px 70px;
   align-items: center;
   /*border-top: thin solid #fdca28;*/
   color:white;
   cursor: pointer;
   
}

.comm_pending_manage_playoff_tile
{
   display: grid;
   grid-template-columns: 135px 95px 30px 140px;
   align-items: center;
   /*border-top: thin solid #fdca28;*/
   color:white;
   cursor: pointer;
   
}


.comm_active_playoff_tile
{
   grid-template-columns: 300px 50px 50px;
   align-items: center;
   /*border-top: thin solid #fdca28;*/
   color:white;
   cursor: pointer;
   
}

.comm_prompt_btn
{
   display:flex;
   width: 50px;
   align-items: center;
   color : black;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
   background-color: #fdca28;
   width: 80%;
   justify-content: center;
   margin : auto;
   text-align: center;
}


.comm_voip_btn
{
   display:flex;
   width: 50px;
   align-items: center;
   color : black;
   font-size: 18px;
   font-weight: bold;
   cursor: pointer;
   background-color: #fdca28;
   width: 80%;
   justify-content: center;
   margin : auto;
   text-align: center;
}


.comm_prompt_btn:hover
{
   background-color: white;
}


.comm_voip_btn:hover
{
   background-color: white;
}





.comm_pending_manage_playoff_tile:hover .comm_prompt_btn
{
   display:flex;
}

.comm_pending_playoff_tile:hover .comm_prompt_btn
{
   display:flex;
}

.comm_pending_tile:hover  .comm_prompt_btn
{
   display:flex;
}

.comm_invite_tile:hover  .comm_prompt_btn
{
   display:flex;
}

.comm_user_select_tile:hover .comm_prompt_btn
{
   display: flex;
}

.comm_request_friendship_tile:hover  .comm_prompt_btn
{
   display:flex;
}

.comm_cancel_tile:hover  .comm_prompt_btn
{
   display:flex;
}

.comm_user_tile:hover
{
   background-color: #222222;
}

.comm_user_tile:hover, .comm_pending_tile:hover, .comm_user_select_tile:hover
{
   /*background-color: blue;*/
   color: #fdca28;
}

.comm_user_tile:last-child
{

   /*border-bottom: thin solid #fdca28;*/
}

.comm_tile_playoff_name
{
   display:flex;
   align-items: center;
   /*color : white;*/
   font-size: 20px;
   font-weight: bold;
   cursor: pointer;
   margin-left: 5px;
}

.comm_tile_playoff_type
{
   display:flex;
   align-items: center;
   /*color : white;*/
   font-size: 20px;
   font-weight: bold;
   cursor: pointer;
   justify-content: center;
}

.comm_tile_seeds
{
   display:flex;
   align-items: center;
   /*color : white;*/
   font-size: 20px;
   font-weight: bold;
   cursor: pointer;
   justify-content: center;
}


.comm_tile_icon
{
   width: 40px;
   height: 40px;
   background-image: url("assets/artwork/helmets/bears_helmet.jpg");
   background-size : 40px 40px;
   border-radius: 50px;
}
.comm_tile_username
{
   display:flex;
   align-items: center;
   /*color : white;*/
   font-size: 20px;
   font-weight: bold;
   cursor: pointer;

}
.comm_tile_btn
{
   width: 25px;
   height: 25px;
   background-image: url("assets/artwork/helmets/bears_helmet.jpg");
   background-size : 25px 25px;
   border-radius: 25px;
}

#communicator_tab_row
{
   display:grid;
   grid-template-columns: 80px 80px 80px 80px 80px;
}

.communicator_tab_btn
{
   width: 80px;
   height: 100px;
   grid-template-rows: 80 20;
   color:white;
}


.communicator_tab_btn:hover
{
   color: #fdca28;
   cursor: pointer;
}

.communicator_tab_icon
{
   width: 70px;
   height: 70px;
   background-image: url("assets/artwork/helmets/bears_helmet.jpg");
   background-size : 70px 70px;
}

.communicator_tab_text
{
   font-size: 20px;
   text-align: center;
}



.communicator_prompts_container {
   width: 400px;
   height : 75px;
   position: absolute;
   justify-content: center;
   display: flex;
   top: 40%;
}

.communicator_prompt_div {
   background-color: black;
   z-index: 75000;
   width:300px;
   height: 75px;
   border : solid yellow thin;


}

.communicator_prompt_header {
   font-family: "Impact";
   font-size: 18px;
   color: white;
   text-align: center;
   letter-spacing: 0.1em;
   /*
   text-shadow:
   -1px -1px 0 greenyellow,
   1px -1px 0 greenyellow,
   -1px 1px 0 greenyellow,
   1px 1px 0 greenyellow;*/
   cursor:default;
   padding: 15px 15px;
}


/*communicator end*/


/* voip tile interface */



.voip_request_header, .voip_waiting_header
{
   color : white;
   text-align: center;
   padding: 5px;
   font-size: 24px;
}



.voip_call_container
{
   background-color: black;
   border : solid #fdca28 thin;
   position: fixed;
   bottom : 50px;
   left : 10px;
   z-index : 5000000;
}

.voip_call_tile
{

   display: grid;
   grid-template-columns: 50px 100px 100px 100px;
   align-items: center;
   /*border-top: thin solid #fdca28;*/
   color:white;
   cursor: pointer;
   height:68px;
}

.voip_request_container, .voip_waiting_container
{
   background-color: black;
   border : solid #fdca28 thin;
   position: fixed;
   bottom : 50px;
   left : 10px;
   z-index : 5000000;
}


.voip_request_tile
{

   display: grid;
   grid-template-columns: 75px 150px 75px 75px;
   align-items: center;
   color:white;
   cursor: pointer;
   height:75px;
   font-size: 20px;
}


.voip_waiting_tile
{

   display: grid;
   grid-template-columns: 75px 150px 150px;
   align-items: center;
   color:white;
   cursor: pointer;
   height:75px;
}


/*voip tile intereface end*/


.test_card_dropdown {
   width : 300px;
}

.test_list_card_dropdown {
   width : 300px;
}

.friend_list_box {
   width : 300px;
   position: relative;
}

.challenge_list_box {
   width : 310px;
   position: relative;
}
.contact_manager_slideout_container {
   display: grid;
   grid-template-columns: auto auto;
   column-gap: 100px;
   position: fixed;
   top:100px;
   z-index: 50000;
}

.contact_manager_container_div {
   /*position: fixed;
   top : 100px;
   left : 0px;
   z-index: 50000;*/
   width : 300px;
}
.communicator_slideout_button_container
{
    position : relative;
}

.vertical_text_slideout_button {
   position: absolute;
   top:171px;
   left : 50%;
   transform: rotate(-90deg);
   transform-origin: left top 0;
   color: #000000;
   background-color: #fdca28;
   padding:10px;
   height: 1.2em;
   cursor: pointer;
   text-transform: uppercase;
   font-size: 20px;
   font-weight: bolder;
   -webkit-user-select: none; /* Safari */        
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* IE10+/Edge */
   user-select: none; /* Standard */
	width : 150px;

}

.ctc_icon{
	float:right;
	transform: rotate(90deg);
	height: 16px;
}

input::placeholder {
  font-style: italic;
}

.contact_options_into_container {
   padding : 5px 5px; 
   display : grid; 
   grid-template-columns: auto auto;
   column-gap:5px;
}
.contact_options_info {
   color:white;
   font-family:'Zilla Slab';
   font-size:16px;
   display:flex;
   flex-direction:column;
   letter-spacing: 0.1em;
   cursor:default;
   padding: 5px;
}

.chat_log_box {
   font-family:'Zilla Slab';
   width:100%;
   height:270px;
   cursor: default;
   background-color:white;
   overflow-y:auto
}
.chat_message_box {
   width:100%;
   height:50px;
   resize:none;
}

.chat_log_username_blue {
   color : blue;
}
.chat_log_username_red {
   color : red;
}

.chat_log_text_black {
   color : black;
}

.chat_log_text_red {
   font-family: "Impact";
   font-size: 12px;
   color : red;
   font-weight: bold;
}

.test_list_box {
   width : 100%;
}

/* loading animation */
@keyframes spinner-line-fade-more {
   0%, 100% {
     opacity: 0; /* minimum opacity */
   }
   1% {
     opacity: 1;
   }
 }
 
 @keyframes spinner-line-fade-quick {
   0%, 39%, 100% {
     opacity: 0.25; /* minimum opacity */
   }
   40% {
     opacity: 1;
   }
 }
 
 @keyframes spinner-line-fade-default {
   0%, 100% {
     opacity: 0.22; /* minimum opacity */
   }
   1% {
     opacity: 1;
   }
 }
 
 @keyframes spinner-line-shrink {
   0%, 25%, 100% {
     /* minimum scale and opacity */
     transform: scale(0.5);
     opacity: 0.25;
   }
   26% {
     transform: scale(1);
     opacity: 1;
   }
 }

/*
 h1, h2, h3, h4, h5, h6 {
	font-family:"Zilla Slab", Helvetica, Arial, Verdana, sans-serif;
	font-weight: 800;
	color: white;
	font-size:24px;
	/*text-transform: capitalize;*/
/*
}
h1 {
	font-size:2rem;
	/*padding:2rem 0 0 0;*//*
	color: #ffffff;
	color: #ffffff;

}*/


.navMenu{
   position : relative;
   width: 100%;
   height: 80px;    
}

.navmenu_grid {
   display: grid;
   grid-template-columns: 325px auto;
   column-gap: 0px;

   position: fixed;
   width: 100%;
   top : 0px;
   left : 0px;
   overflow : hidden;
   z-index: 25000;

}

.navmenu_grid_home {
   display: grid;
   grid-template-columns: 325px auto 300px;
   column-gap: 0px;

}


.navmenu#navmenu {
	background-color:black;
	border: 0px;
	height: 80px;
}

.logo {
    display: inline-block;
    vertical-align: top;
    height: 50px;
    float:left;

}

#menucenter {
	margin: 0 auto;
	width: 80%;
	padding-top: 15px;
}

.navright {
	float:right;
}



.navoption {
	background-color: rgba(255,255,255,0);
    color: #ffffff;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-top: 2.1rem;
    padding-left: 20px;
    padding-right: 20px;
    transition: all 0.2s ease-in-out;
    display: inline;
    position: relative;
    float: left;
    right: 0px;
}

.navoption:hover, .navoption:active, .navoption_selected {
	color: #fdca28;
   transition: all 0.5s ease-in-out;
   text-decoration: underline;
   text-decoration-color: white;
   text-underline-offset: 3px;
}


.game_loader_header {
   color: white;
   font-size: 50px;
   text-align: center;
}

.game_loading_bar {
   width : 200px;
   margin-top : 300px;
   margin-left : auto;
   margin-right: auto;
   position: relative;
   zoom : 1.5;
   border: solid;
   border-color: #fdca28;
   padding : 50px;
   background-color: black;
   border-width: thick;
   border-radius : 10px;
 }
 
 .loaderclass
 {
   position: fixed;
   width: 100%;
   height:100%;
   z-index: 30000;
 }

.screen_header_typee {
	background-color:rgba(255,255,255,0);
	padding: 0px 0px 0px 50px;
	width: 100%;
   color: white;
   font-size: 55px;
   display: flex;
}

.sub_header_typee {
	padding-top:15px;
	padding-bottom:15px;
	margin:0px;
   color:#fdca28;
   text-transform: uppercase;
   display: flex;
   font-size: 24px;
}

.chip_footer {
	background-color:rgba(255,255,255,0);
   padding:0px 0px 1rem;
   text-align: center;

}


.playoff_header_typee {
	padding:0px;
	margin:0px;
   color:#fdca28;
   text-transform: uppercase;
   display: flex;
   font-size: 26px;
   font-weight: bolder;
}

.open_playoff_header {
	padding:0px;
   margin:0px;
   cursor:default;
}

.typee_box_style
{
   background-color: rgba(22,22,22,.7);
  border-radius: 5px;
  border: none;
  padding:.5rem 1rem;
}

.effect1_typee {

   background-color: rgba(22,22,22,.7);
  border-radius: 5px;
  border: none;
  -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
  /*width:auto;*/
  padding:.5rem 1rem;
}


.effect1_old {

   background-color: rgba(255,255,255,.5);
  border-radius: 5px;
  border: none;
  -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
  padding:.5rem 1rem;
}


/* TEXT STYLES */
p {
	font-size:16px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "oswaldregular", "Zilla Slab", Helvetica, Arial, Verdana, sans-serif;
	font-weight: 800;
	color: white;
	font-size:24px;
	text-transform: capitalize;
	margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
   cursor: default;

}
h1 {
	font-size:4rem;
	padding:2rem 0 0 0;
	color: #ffffff;
	float:left;
	display: inline-block;
}
h2 {
	font-size:3rem;
}

h3 {
	font-size:2rem;
	color:#fdca28;
	padding:0px;
	margin:0px;
	line-height: 1.2em;
}

h6 {
	padding:1em;
}

.open_playoffs_grid {
   display : grid;
   grid-template-columns: 400px 400px 400px 400px;
   row-gap : 20px;
   justify-content: center;

}

.open_playoff_entry_grid_container {
   display : grid;
   /*width : 50%;*/
   width : 350px;
   justify-content: center;
   grid-template-columns: auto auto auto;
   align-content: center;
}

.open_playoff_entry_grid {

   display:grid;
   grid-template-columns: auto auto auto auto;
   column-gap: 10px;
}


.open_playoff_container {
   width : 350px;
   background-color: rgba(255,255,255,0.10);
   display: grid;
   grid-template-rows: 50px 200px 50px;
}

.open_playoff_options_grid {
   display : grid;
   grid-template-columns: 25% 25% 25% 25%;
   width:350px;
	background-color: rgba(255,255,255,0.10);
   
}

.open_playoff_option {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   color:white;
   background-color: black;
   font-size: 14px;
   display: flex;
   justify-content: center;
}
.open_playoff_option_header {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   color:white;
   background-color: slateblue;
   font-size: 14px;
   display: flex;
   justify-content: center;
}

.options_align_bottom {
   align-self: flex-end;
}


.holdMe:nth-child(odd) {
	width:100%;
	padding:2rem 0px 3rem;
   margin:0px;
   animation-duration: 1s;

}
.holdMe:nth-child(even){
	width:100%;
	padding:2rem 0px 3rem;
	margin:0px;
   animation-duration: 1s;
}



.Rounds {
	width:50%;
	float:left;
}
/*
.holdMe h6 {
	font-family: "Montserrat", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	text-transform:uppercase;
	letter-spacing: 2px;
	font-size:2.2rem;
	padding:0px;
	margin:0px;
	line-height: 3em;
}*/

.RoundWeGo .subGroup {

	width:50%;
	float:left;
}


.game_group_header_typee {
	background-color:transparent;
	float:none;
	width:100%;
	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
	padding:0px;
	margin:0px;

}

.game_group_container {
   width : 100%;
}

.css_button {
   background-color: #4CAF50;
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16px;
   margin: 4px 2px;
   cursor: pointer;
 }

 .tiny_capsule_button {
   width: 120px;
   height : 1.5em;
   letter-spacing: 0.1em;
   color:black;
   /*font-family : "Zilla Slab";*/
   font-size : 11px;
   background-color: #fdca28;
   margin: 1em auto;
   border-radius: 1px;
   display: flex;
   justify-content: center;
   align-items: center; 
   position: relative;
   text-transform: uppercase;
   /*text-shadow:
   -1px -1px 0 #000,
   1px -1px 0 #000,
   -1px 1px 0 #000,
   1px 1px 0 #000;
   box-shadow: 0 0 0 1px white;*/
   cursor: pointer;
}



.home_capsule_button {
   width: 125px;
   height : 2.5em;
   letter-spacing: 0.1em;
   color:black;
   /*font-family : "Zilla Slab";*/
   font-size : 16px;
   background-color:#fdca28;
   margin: auto auto;
   border-radius: 1px;
   display: flex;
   justify-content: center;
   align-items: center; 
   position: relative;
   text-transform: uppercase;
   /*text-shadow:
   -1px -1px 0 #000,
   1px -1px 0 #000,
   -1px 1px 0 #000,
   1px 1px 0 #000;
   box-shadow: 0 0 0 1px white;*/
   cursor: pointer;
}


.small_capsule_button {
   width: 85px;
   height : 2.5em;
   letter-spacing: 0.1em;
   color:black;
   /*font-family : "Zilla Slab";*/
   font-size : 15px;
   background-color:#fdca28;
   margin: auto auto;
   border-radius: 1px;
   display: flex;
   justify-content: center;
   align-items: center; 
   position: relative;
   text-transform: uppercase;
   /*text-shadow:
   -1px -1px 0 #000,
   1px -1px 0 #000,
   -1px 1px 0 #000,
   1px 1px 0 #000;
   box-shadow: 0 0 0 1px white;*/
   cursor: pointer;
}

.game_box_button{
  
   width: 220px;
   height : 30px;
   letter-spacing: 0.1em;
   color:black;
   font-size : 15px;
   background-color:#fdca28;
   margin: auto auto;
   border-radius: 1px;
   display: flex;
   justify-content: center;
   align-items: center; 
   position: relative;
   text-transform: uppercase;
   cursor: pointer; 
}

#logout_button {
   font-size: 18px;
   height: 1.5em;
}

.capsule_button_default:hover
{
   background-color: white;
}

.capsule_button_default
{
   width: 150px;
   height : 2.5em;
   letter-spacing: 0.1em;
   color:black;
   font-size : 15px;
   font-weight: bolder;
   background-color:#fdca28;
   margin: auto auto;
   border-radius: 1px;
   display: flex;
   justify-content: center;
   align-items: center; 
   position: relative;
   text-transform: uppercase;
   cursor: pointer;
}


 .medium_capsule_button {

   	width: auto;
    /* height: 1.5em; */
    letter-spacing: 0.1em;
    color: #000000;
    /* font-family: "Impact"; */
    font-size: 16px;
    background-color: #fdca28;
    margin: 1em auto;
    /* border-radius: 500px; */
    display: inline-block;
    justify-content: center;
    align-items: center;
    position: relative;
    /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */
    /* box-shadow: 0 0 0 1px white; */
    cursor: pointer;
    user-select: none;
    margin: 0 auto;
    padding: 10px 20px;
    text-transform: uppercase;
 }

 .medium_capsule_button_selected {
    background-color: black !important;
    color: white !important;

 }

.small_capsule_button:hover, .search_button:hover, .medium_capsule_button:hover, .game_box_button:hover, .home_capsule_button:hover
{
   background-color: white;

}



 .search_button {
    width: 40%;
    letter-spacing: 0.1em;
    color: #000000;
    font-size: 10px;
    background-color: #fdca28;
    margin: 1em auto;
    display: inline-block;
    justify-content: center;
    text-align: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    margin: 0px auto;
    padding: 10px 20px;
    text-transform: uppercase;
    display: block;
 }

 .search_users_list_box {
    width: 90%;
    margin: 5px 5px;
 }



 /*comm avatar*/


 .comm_avatar_container {
   display: flex;
   align-content: center;
   justify-content: center;
}

.comm_indicator_container {
   display:flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 90000;
   cursor: pointer;
}

.comm_indicator {
   display: flex;
   justify-content: center;
   align-items: center; 
   position: relative;
}

.comm_avatar_icon {
   width : 50px;
   height : 50px;
   background-size: 50px 50px;
   border-radius: 70px;
 }

 .comm_indicator_size_30
 {
   height : 30px;
   width : 30px;
   border-radius: 50%;
 }

 .comm_indicator_size_55
 {
   height : 55px;
   width : 55px;
   border-radius: 50%;
 }

 .comm_icon_size_25
{
   width : 25px;
   height : 25px;
   background-size: 25px 25px;
   border-radius: 70px;
}

 .comm_icon_size_50
 {
   width : 50px;
   height : 50px;
   background-size: 50px 50px;
   border-radius: 70px;

 }




.comm_indicator_gray {
   background-color:gray;
}
 .comm_indicator_red {
    background-color:red;
 }
 .comm_indicator_yellow {
    background-color:yellow;
 }
 .comm_indicator_green {
    background-color:green;
 }

 /* comm avatar end*/



 .avatar_container {
   display: flex;
   align-content: center;
   justify-content: center;
   /*height : 55px*/
}


.avatar_icon_container {
   display:flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 90000;
   cursor: pointer;
}

.avatar_indicator {
   height: 55px;
   width: 55px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center; 
   position: relative;
}



.avatar_container_size_85 {
   height:85px;
}
.avatar_container_size_55 {
   height:55px;
}

.avatar_indicator_size_70 {
   height: 70px;
   width: 70px;
}

.avatar_indicator_size_55 {
   height : 55px;
   width : 55px;
}


.avatar_indicator_gray {
   background-color:gray;
}
 .avatar_indicator_red {
    background-color:red;
 }
 .avatar_indicator_yellow {
    background-color:yellow;
 }
 .avatar_indicator_green {
    background-color:green;
 }




 .avatar_image {
   width : 50px;
   height : 50px;
   background-size: 50px 50px;
   border-radius: 70px;
 }

 .avatar_image_size_50 {
   width : 50px;
   height : 50px;
   background-size: 50px 50px;
   border-radius: 70px;

 }

 .avatar_image_size_65 {
   width : 65px;
   height : 65px;
   background-size: 65px 65px;
   border-radius: 70px;

 }

.avatar_username
{
   font-family: "Verdana";
   font-size: 11px;
   border-radius: 5%;
   color:white;
   background-color:black;
   text-align: center;
   padding : 0px, 2px;
   width: 75px;
   /*position: absolute;*/
   top: 100%;
   /*margin-left: auto;
   margin-right: auto;*/
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    /*letter-spacing: 0.1em;*/
    box-shadow: 0 0 0 1px white;
    z-index: 91000;
}

.avatar_username_highlight {
   background-color: greenyellow;
}



.avatar {

}


.contact_icon_temp {
   width : 65px;
   height : 65px;
   background-size: 65px 65px;
   border-radius: 70px;
 }


/*avatar_container*/
   /*avatar_icon_container*/
      /*avatar_indicator + avatar_indicator_<color>*/
         /*avatar_image + helmet_<teamname><optional _<index>*/



/* grid_game avatar classes*/

/*grid_game_user_icon_container*/
   /*grid_game_user_avatar*/
      /*contact_icon_container*/
         /*schedule_avatar_indicator + contact_icon_indicator_<color>*/
            /*schedule_avatar + helmet_<teamname><optional _<index>*/




.grid_game_user_icon_container {
   display: flex;
   align-content: center;
   justify-content: center;
   height : 55px

}

/*remove when done*/
.grid_game_user_avatar {
   /*transform : scale(.75);*/

}



.button_font_medium {
	font-size : 14px;
	font-weight: 500;
}

/*
.helmet_bears {background-image: url("assets/artwork/helmets/bears_helmet.jpg");}
.helmet_saints_0 {background-image: url("assets/artwork/helmets/saints_helmet_0.jpg");}
.helmet_saints_1 {background-image: url("assets/artwork/helmets/saints_helmet_1.jpg");}
.helmet_redskins_0 {background-image: url("assets/artwork/helmets/redskins_helmet_0.jpg");}
.helmet_redskins_1 {background-image: url("assets/artwork/helmets/redskins_helmet_1.jpg");}
.helmet_bucs_0 {background-image: url("assets/artwork/helmets/bucs_helmet_0.jpg");}
.helmet_bucs_1 {background-image: url("assets/artwork/helmets/bucs_helmet_1.jpg");}
.helmet_raiders {background-image: url("assets/artwork/helmets/raiders_helmet.jpg");}
.helmet_chiefs {background-image: url("assets/artwork/helmets/chiefs_helmet.jpg");}
.helmet_jaguars {background-image: url("assets/artwork/helmets/jaguars_helmet.jpg");}*/

.helmet_1 {background-image: url("assets/artwork/helmets/1.png");}
.helmet_2 {background-image: url("assets/artwork/helmets/2.png");}
.helmet_3 {background-image: url("assets/artwork/helmets/3.png");}
.helmet_4 {background-image: url("assets/artwork/helmets/4.png");}
.helmet_5 {background-image: url("assets/artwork/helmets/5.png");}
.helmet_6 {background-image: url("assets/artwork/helmets/6.png");}
.helmet_7 {background-image: url("assets/artwork/helmets/7.png");}
.helmet_8 {background-image: url("assets/artwork/helmets/8.png");}
.helmet_9 {background-image: url("assets/artwork/helmets/9.png");}
.helmet_10 {background-image: url("assets/artwork/helmets/10.png");}
.helmet_11 {background-image: url("assets/artwork/helmets/11.png");}
.helmet_12 {background-image: url("assets/artwork/helmets/12.png");}
.helmet_13 {background-image: url("assets/artwork/helmets/13.png");}

.plus_sign {background-image: url("assets/artwork/plus_sign.png");}
.chip_image {background-image: url("assets/artwork/plus_sign.png");}
.communicator_icon {background-image: url("assets/site_art/ctc_icon.png");}

/*remove when down*/
.schedule_avatar_indicator {
   height: 55px;
   width: 55px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center; 
   position: relative;

}
/*remove when done*/
.schedule_avatar {
   width : 50px;
   height : 50px;
   background-size: 50px 50px;
   border-radius: 70px;

}

.contact_icon_container {
   /*position: absolute;
   top : 100px;
   left : 100px;*/
   display:flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 90000;
   cursor: pointer;
 }

 .contact_icon_indicator {
   height: 70px;
   width: 70px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center; 
   position: relative;
    
}



 .contact_icon {
   width : 65px;
   height : 65px;
   /*background-image: url("assets/artwork/eagles-helmet.jpg");*/
   background-size: 65px 65px;
   /*background-image: url("assets/artwork/helmet_icon.png");
   background-size: 65px 65px;*/
   border-radius: 70px;
   /*display: flex;
   justify-content: center;
   align-items: center; 
   position: relative;*/
 }

.contact_icon_username
{
   font-family: "Verdana";
   font-size: 11px;
   border-radius: 5%;
   color:white;
   background-color:black;
   text-align: center;
   padding : 0px, 2px;
   width: 75px;
   /*position: absolute;*/
   top: 100%;
   /*margin-left: auto;
   margin-right: auto;*/
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    /*letter-spacing: 0.1em;*/
    box-shadow: 0 0 0 1px white;
    z-index: 91000;
}


.contact_icon_username_highlight {
   background-color: greenyellow;
}


 .contact_circle {
   height: 70px;
   width: 70px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center; 
   position: relative;
   cursor: pointer;
 }


 .friend_username_text  {
   font-family: "Verdana";
  font-size: 10px;
   color: white;
   
   /*letter-spacing: 0.1em;*/
   text-shadow:
   -1px -1px 0 #000,
   1px -1px 0 #000,
   -1px 1px 0 #000,
   1px 1px 0 #000;
}


.button_badge {
   background-color: #fa3e3e;
   border-radius: 50%;
   color: white;
   box-shadow: 0 0 0 1px white;
  
   padding: 1px 3px;
   font-size: 10px;
   
   position: absolute; /* Position the badge within the relatively positioned button */
   top: 0;
   right: 0;
 }

 .back_button {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-right: 20px solid rgb(255, 255, 255);
   border-bottom: 10px solid transparent;
   align-self: center;
   cursor: pointer;
 }

/* .back_button_hidden {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-right: 20px solid rgb(255, 255, 255);
   border-bottom: 10px solid transparent;
   align-self: center;
   cursor: pointer;
   visibility: hidden;
 }*/

 .contacts_toggle_button {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-left: 20px solid rgb(255, 255, 255);
   border-bottom: 10px solid transparent;
   align-self: center;
   cursor: pointer;
 }


 .circle_gray {
   background-color: rgb(66, 62, 62);
 }

 .circle_red {
   background-color: rgb(226, 23, 23);
 }


.circle_yellow {
   background-color: rgb(203, 238, 46);
}

 .circle_green {
   background-color: rgb(78, 194, 83);

 }

.panel_fade_out
{
   opacity : 0;
   transition: opacity 500ms ease-in-out;
   pointer-events: none;
}

.panel_fade_in
{
   opacity : 1;
   transition: opacity 500ms ease-in-out;
}

.panel_slide_in {

   transform: translateX(-400px);
   transition: transform 500ms ease-in-out;

   /*left:-280px;
   transition: translate 1500ms ease-in-out;*/
}

.panel_slide_out {
   
   transform: translateX(10px);
   transition: transform 500ms ease-in-out;
   /*transition: translate 1500ms ease-in-out;
   left:100px;*/
}

 .pulse {

	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: pulse 1s infinite;
 }


 .pulse_green {
      background: rgb(78, 194, 83,1);
      box-shadow: 0 0 0 0 rgb(78, 194, 83,1);
      animation: pulse-green 1s infinite;
}


.pending_friend_flag  {
   font-size: 12px;
    color: yellow;
    padding : 0px 3px;
    
    /*
    text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;*/
}
.playoff_dropdowns_grid {
   display: grid;
   grid-template-columns: auto auto auto auto;
   padding: 20px;
   grid-gap : 10px;
   justify-content: center;
}
.playoff_dropdown {
   font-size:26px;
   font-family: 'oswaldregular';
}

.user_info_div {
   display : grid;
   grid-template-columns: auto auto;
   padding: 20px;
   justify-content: center;
   pointer-events: none;
}



.scale50 {
   transform: scale(.50);
}
.small_button_container_grid {
   display: grid; 
   grid-template-columns: auto auto auto;
   column-gap: 0px;
}

.contact_list_container_div, .contact_options_container_div, .challenge_container_div, .search_users_container_div, .profile_container_div, .invite_playoff_container_div  {
   
    width: 400px;
    height: 640px;
    background-color: 18181b;
    z-index: 50000;
    position: relative;
    border: solid;
    border-color: #fdca28;
    border-width: thin;
	position : fixed;
}


.contact_list_header, .contact_options_header, .challenge_header, .search_users_header, .profile_header, .invite_playoff_header {
    font-size: 20px;
    color: white;
    text-align: center;
    letter-spacing: 0.1em;
    cursor: default;
    text-transform: uppercase;
    padding-top: 10px;
}

.contact_manager_prompt_header {
   font-family: "Impact";
   font-size: 18px;
   color: white;
   text-align: center;
   letter-spacing: 0.1em;
   /*
   text-shadow:
   -1px -1px 0 greenyellow,
   1px -1px 0 greenyellow,
   -1px 1px 0 greenyellow,
   1px 1px 0 greenyellow;*/
   cursor:default;
   padding: 15px 15px;
}

.contact_manager_prompt_options {
   display: grid; 
   grid-template-columns: auto auto;
   column-gap: 14px;
}

.grid_container {
   width: 100%;
   height: 405px;
   overflow-y: auto;
}
.search_grid_container {
   width: 100%;
   height: 465px;
   overflow-y: auto;
}

.contact_list_icon_grid {

   top: 145px;
   left: 100px;
   width : 250px;
   display: grid;
   grid-template-columns: 70px 70px 70px;
   grid-row-gap: 10px;
   grid-column-gap: 50px;
   padding: 20px 60px;
   justify-content: center;
}



.text_outline {

   text-shadow:
   -2px -2px 0 #000,
   2px -2px 0 #000,
   -2px 2px 0 #000,
   2px 2px 0 #000;
}

.contact_options_div {

   font-family: "Impact";
   font-size : 18px;
   color: white;

}
.contact_prompts_container {
   width: 100%;
   align-content: center;
}

.chips_prompt_div  {
   background-color: black;
   border-radius: 10px;

   position: absolute;
   top : 25%;
   z-index: 75000;
   transform: scale(.75);
   width:300px;
   height: 150px;
   display:flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   flex-direction: column;



}

.contact_manager_prompt_div {
   background-color: black;
   border-radius: 10px;

   position: absolute;
   top : 25%;
   z-index: 75000;
   transform: scale(.75);
   width:300px;
   height: 130px;
   display:flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;


}

.chips_container_div {
   display: grid; 
   grid-template-columns: auto auto auto auto;
   column-gap: 14px;


}

.chip_icon {
   background-image: url("assets/artwork/chip_blue_white.png");
   background-position: center;
   width:64px;
   height:64px;
   display: flex;
   justify-content: center;
   align-items: center;
   transform: scale(.75);
   cursor: pointer;

   -webkit-filter: drop-shadow(2px 1px 0 blue)
   drop-shadow(-1px -1px 0 blue);
   filter: drop-shadow(2px 1px 0 blue) 
   drop-shadow(-1px -1px 0 blue);
}

.chip_text {
   color:white;
   font-size: 24px;
   font-weight: bolder;
   text-shadow:
   -1px -1px 0 #000,
   1px -1px 0 #000,
   -1px 1px 0 #000,
   1px 1px 0 #000;
}



/* Custom container */
.container-narrow {
   margin: 0 auto;
   max-width: 700px;
 }
 
 .container-narrow > hr {
   margin: 30px 0;
 }



/* Launch Mode */
.launch_mode_div {
   position: fixed;
   z-index: 2100000;
   width: 600px;
   height:400px;

   left : 50%;
   margin-left: -300px;
   margin-top: 300px;
   border-radius: 1px;
   background-color: rgb(22,22,22,.8);

   display: grid;
   grid-template-rows : 30px 30px 75px 75px 75px 100px;
   text-align: center;
   /*justify-content : center*/
}

.launch_mode_prompt_title {

   /*font-family: Georgia, 'Times New Roman', Times, serif;*/
   font-size: 28px;
   color : White;
   align-self: center;
   white-space: pre-wrap;
   }

.launch_mode_prompt {

/*font-family: Georgia, 'Times New Roman', Times, serif;*/
font-size: 17px;
color : White;
align-self: center;
white-space: pre-wrap;
}



.launch_team_text {

   font-family: Georgia, 'Times New Roman', Times, serif;
   font-size: 17px;
   color : White;
   display:flex;
   align-items: center;
   justify-content: center;
   }


.launch_message_text {

   font-family: Georgia, 'Times New Roman', Times, serif;
   font-size: 17px;
   color : White;
   align-self: center;
   white-space: pre-wrap;
}

.launch_mode_matchup {
   display : grid;
   grid-template-columns: 50% 50%;
}

.launch_mode_timer_bar {
   width : 200px;
   margin : auto;
   position: relative;
}

.launch_buttons_container {
   display : grid;
   grid-template-columns: 50% 50%;
   color : white;
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-size: 24px;

}


.shader {
   position: fixed;
   top : 0px;
   width: 100%;
   height: 100%;
   background-color: black;
   opacity: .75;
   z-index: 2000000;
}

#version_div {
   position: fixed;
   bottom : 45px;
   right : 10px;
   font-size: 10;
   color: yellow;
   /*background-color: black;*/
   opacity: .75;
   z-index: 2000001;
}

.shader_hidden, .launch_mode_div_hidden {
   visibility: hidden;
}




.bounce-7 {
   animation-name: bounce-7;
   animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

.grid_elastic {
   animation-name: rubberBand;
   /*animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);*/

}


/* keyframe animations */
@keyframes bounce-7 {
   0%   { transform: scale(1,1); }
   10%  { transform: scale(1.1,.9); }
   30%  { transform: scale(.9,1.1); }
   50%  { transform: scale(1.05,.95); }
   57%  { transform: scale(1,1); }
   64%  { transform: scale(1,1); }
   100% { transform: scale(1,1); }
}
 

@keyframes rubberBand {
   from {
      transform: scale3d(1, 1, 1);
   }
   
   30% {
      transform: scale3d(1.25, 0.75, 1);
   }
   
   40% {
      transform: scale3d(0.75, 1.25, 1);
   }
   
   50% {
      transform: scale3d(1.15, 0.85, 1);
   }
   
   65% {
      transform: scale3d(.95, 1.05, 1);
   }
   
   75% {
      transform: scale3d(1.05, .95, 1);
   }
   
   to {
      transform: scale3d(1, 1, 1);
   }
}


@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}


@keyframes pulse-green {
   0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgb(78, 194, 83, 0.7);
   }

   70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgb(78, 194, 83,0)
   }

   100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0  rgb(78, 194, 83,0)
   }
}

@-webkit-keyframes pop-in {
   0% { opacity: 0; -webkit-transform: scale(0.5); }
   100% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes pop-in {
   0% { opacity: 0; -moz-transform: scale(0.5); }
   100% { opacity: 1; -moz-transform: scale(1); }
}
@keyframes pop-in {
   0% { opacity: 0; transform: scale(0.5); }
   100% { opacity: 1; transform: scale(1); }
}

/* ticker css*/

.tcontainer {
   width: 100%;
   overflow: hidden;
   bottom: 0px;
   position:fixed;
   z-index: 3000000;
}

.ticker-wrap {
   width: 100%;
   padding-left: 100%;
   background-color: black;
   border-top: 10px solid #fdca28;
   border-width: thin;
   color:white;
}

@keyframes ticker {
   100% {
       transform: translate3d(-100%, 0, 0);
   }
}

.ticker-move {
   display: inline-block;
   white-space: nowrap;
   padding-right: 100%;
   animation: ticker 80s infinite linear;
}

.ticker-move:hover {
   animation-play-state: paused;
}

.ticker-item {
   display: inline-block;
   padding: 0 60px;
   font-size: 22px;
   white-space: pre;
}



/* slider */
.slidecontainer {
   width: 100%; /* Width of the outside container */
   z-index: 5000000;
 }

 .slider {
    width : 100px;
 }

 @font-face {
   font-family: 'oswaldregular';
   src: url('fonts/oswald-variablefont_wght-webfont.woff2') format('woff2'),
        url('fonts/oswald-variablefont_wght-webfont.woff') format('woff');
   font-weight: normal;
   font-style: normal;

}

#playoff_bracket_div{
   /*margin-top : 50px;*/
   margin-left : 50px;
   display: grid;
   grid-template-columns: 230px 25px 230px 25px 230px 25px 230px 25px 230px 25px 230px 25px 230px;

}

.playoff_bracket_col_4
{
   display: grid;
   grid-template-rows: 150px 10px 150px 50px 150px 10px 150px;

}

.playoff_bracket_col_2
{
   display: grid;
   grid-template-rows: 80px 150px 210px 150px 80px;
}


.playoff_bracket_col_1
{
   display: grid;
   grid-template-rows: 265px 150px 265px;
}

.playoff_bracket_spacer_4
{
   display: grid;
   grid-template-rows: 75px 160px 200px 160px 75px;
}


.playoff_bracket_spacer_2
{
   display: grid;
   grid-template-rows: 155px 350px 155px;
}

.playoff_bracket_spacer_1
{
   display: grid;
   grid-template-rows: 330px 5px 330px ;

}


.bracket_grid_game {

   text-align : left;
   width : 220px;
   height : 146px;
   padding: 2px 5px !important;
   /*margin : 5px;*/

     /* -webkit-animation:pop-in 0.5s;
   -moz-animation:pop-in 0.5s;
   -ms-animation:pop-in 0.5s;*/

}

.bracket_slot_matchup {

   display: grid;
   grid-template-columns: 60px 120px 40px;
   row-gap: 5px;
}

.bracket_avatar_image {

   width : 40px;
   height : 40px;
   background-size: 40px 40px;
   border-radius: 50px;

}

.bracket_avatar_indicator {

   height: 45px;
   width: 45px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center; 
   position: relative;

}
.bracket_connector_container {
   display: grid;
   grid-template-columns: 50% 50%;
}

.bracket_connector {
   height: 100%;
   border-top : solid white 3px;
   border-right : solid white 3px;
   border-bottom: solid white 3px;
}


.bracket_connector_line {
   height: 50%;
   border-bottom: solid white 3px;
}


.bracket_connector_right {
   height: 100%;
   border-top : solid white 3px;
   border-left : solid white 3px;
   border-bottom: solid white 3px;
}


.bracket_connector_line {
   height: 50%;
   border-bottom: solid white 3px;
}
.bracket_empty_slot{
   width : 220px;
}