/* Updated 17/2/25 */
    h1, h2, h3{text-align:center;
        color:gold;
        background-color: green;
        padding: 10px;
    }
    
    
    input[type="text"]:focus, input[type="number"]:focus, textarea, select 
            {   
            padding: 4px;
            margin-bottom: 10px;
            }
            #header_text, #footer_text{
               font: helvetica;
               font-size: 12px;
               padding: 4px;
                margin-bottom: 10px;
                border: 3px solid #555;
                color:green;
                border-radius: 10px;
            }
        
        
        #home_team_info.home-team-info, 
        #away_team_info.away-team-info
            {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            border-radius: 10px;
            margin: 0 auto;
            gap: 5px;
            max-width: 90%;
            }
             
        #home_score_display, #away_score_display
        {
            font-size:14px;
            color:white;
            font-weight:bold;
            border-radius: 10px;
            border: 2px solid #555;
            border-color:green;
            background-color: green;
            text-align: center;
            width: 30%;
            max-width: 90%;
            margin: 0 auto;
            padding: 5px; 
            } 
            #home_team_goals, #home_team_points, 
            #away_team_goals, #away_team_points
            {
            font-size:14px;
            color:green;
            font-weight:bold;
            text-align: center;
            border-radius: 10px;
            border: 2px solid #555;
            border-color:green;
            background-color: white;
            max-width: 90%;
            width: 30%;
            margin: 0 auto;
            padding: 5px; 
            }     
        
        #home_team_name,
        #away_team_name
        {
            
            color:green;
            font-weight:bold;
            border-radius: 7px;
            border: 2px solid #555;
            border-color:green;
            background-color: white;
            padding:5px;
            margin: 0 auto;
            width: 32%;
            max-width: 90%;
        }
        #home_player_dropdown_container,
        #away_player_dropdown_container,
        #common_action_dropdown
        {
            color:green;
            font-weight:bold;
            border-radius: 5px;
            background-color: white;
            padding:5px;
            margin: 1 auto;
            border: 2px solid #555;
            border-color:green;
            max-width: 90%;   
        }
        
        
        
        .home-controls,
        .away-controls
        {
            position: relative;
            left: 30px;
            border: none;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: stretch;
            border-radius: 10px;
            margin: 0 auto;
            max-width: 90%;
            width: 50%;
            
        }
     
     
       p{
        font-size: 16px;
        color:blue;
        }
   
    
        .container-buttons 
            {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            border-radius: 10px;
            gap: 5px;           
            }
            
        #match_timer, .timer, #match_half
            {
             color:gold;
             font-size: 14px;
             font-weight:bold;
            }
            
        #match_info_display.match-info, #match_half_status.status
            {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            border-radius: 5px;
            white-space: nowrap;
            margin: 0 auto;
            gap: 5px;
            }
            #half_buttons, #start_stop_buttons 
            {
            display: flex;
            flex-wrap: nowrap; /* Prevent wrapping */
            gap: 20px;         /* Optional spacing between buttons */
            align-items: center;
            }
        .match-info 
                {
                display: flex;
                flex-wrap: nowrap; /* Prevent wrapping */
                align-items: center;
                gap: 20px;         /* Optional: space between buttons */
                }          
    
    button {
            background-color: green; /* green ish */
            border: 2px;
            color: white;
            padding: 10px 10px;
            text-align: center;
            text-decoration: none;
            margin: 4px 2px;
            opacity: 0.7;
            transition: 0.3s;
            display: inline-block;
            
            font-size: 12px;
            border-radius: 5px;
            cursor: pointer;
            max-width: 200px;
            }
    button:hover
            {
            opacity: 1
            }
    button:active {
            background-color: #3e8e41;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
            }
    
    #tweet_content.container-text {
            max-width:90%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
            border-radius: 10px;
            border:2px solid #555;
            padding:5px;
            margin: 5px;
            }
            
#alert-banner {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #f44336; /* Red background */
            color: white;
            text-align: center;
            padding: 10px;
            z-index: 1000;
            font-size: 16px;
            }
        #alert-banner button {
            background: none;
            border: none;
            color: white;
            font-size: 16px;
            margin-left: 20px;
            cursor: pointer;
            }            
 html, body{
     overscroll-behavior-y: none;
 }           
            
/* Basic tab navigation styles */
    .tabs {
      display: flex;
      border-bottom: 2px solid #ccc;
      margin-bottom: 10px;
    }
    .tab {
      padding: 10px 20px;
      cursor: pointer;
      background-color: #f1f1f1;
      border: 1px solid #ccc;
      border-bottom: none;
      margin-right: 5px;
    }
    .tab.active {
      background-color: green;
      color:white;
      font-weight: bold;
      font-style:italic;
      
      }
    .tab-content {
      display: none;
      padding: 20px;
      border: 1px solid #ccc;
    }
    .tab-content.active {
      display: block;
    }
    /* Example styling for player lists */
    .player-list {
      list-style: none;
      padding-left: 5;
      font-size:14px;
    }
    .player-list li {
      margin-bottom: 3px;
      font-size:14px;
      
    }            
            
    /* Style for file upload forms */
    form.upload-form {
      margin-top: 15px;
      padding: 10px;
      border: 1px solid #ccc;
      background: #f9f9f9;
    }
    form.upload-form label {
      font-weight: bold;
    }        
            
    :root {
            --odd-color: #f9f9f9;
            --even-color: #e9e9e9;
        }
        ul.player-list li:nth-child(odd) {
            background-color: var(--odd-color);
        }
        ul.player-list li:nth-child(even) {
            background-color: var(--even-color);
        }        
            
    /* Basic styling for file upload forms */
    .upload-form { margin: 15px 0; padding: 10px; border: 1px solid #ccc; background: #f9f9f9; }
    .upload-form label { font-weight: bold; }
    pre { background: #eee; padding: 10px; }