@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
	@import '@fortawesome/fontawesome-free/css/all.min.css';
    h3{
      margin:5px;
    }
    .betGridTop{
      	display: grid;
      	grid-gap: 5px;
      	background-color: #f7f7ff;
    		margin-top:10px;
        margin-right:10px;
    		color:#00000a;
    		padding:20px;
		    font-family: 'Roboto Condensed', sans-serif;
      	grid-template-columns: 50px 1fr 50px;
        grid-template-areas:
        "sport_icon team1team2 cross_icon"
        "sport_icon betAndOdds cross_icon"
        "sport_icon league copyLink"
        "sport_icon timer copyLink";
    }
    .betGridLower{
      	display: grid;
      	grid-gap: 5px;
      	background-color: #f7f7ff;
    		margin-top:10px;
        margin-right:10px;
    		color:lightslategray;
    		padding:20px;
		    font-family: 'Roboto Condensed', sans-serif;
      	grid-template-columns: 50px 1fr 50px;
        grid-template-areas:
        "sport_icon team1team2 cross_icon"
        "sport_icon betAndOdds cross_icon"
        "sport_icon league copyLink"
        "sport_icon timer copyLink";
    }
    .cross_icon{
      margin-top: -20px;
      margin-left: 34px;
      cursor:pointer;
      grid-area:cross_icon;		
    }
    .sport_icon{
      margin-top: 20px;
      grid-area:sport_icon;
      font-size:32px;
      color: #db1222;
    }
    .sport_icon_lower{
      margin-top: 20px;
      grid-area:sport_icon;
      font-size:32px;
      color: #db1222;
    }

    .material-icons{
      font-size:32px;
    }
    .team1team2{
      grid-area:team1team2;
      font-size:16px;
      font-weight: bold;
    }
    .betAndOdds{
      grid-area:betAndOdds;
      font-family: 'Russo One', sans-serif;
      font-size:14px;
      color: #db1222;
    }
    .betAndOddsLower{
      grid-area:betAndOdds;
      font-family: 'Russo One', sans-serif;
      font-size:14px;
      color: #00000a;
    }
    .league{
      grid-area:league;
      font-size:12px;
    }
    .timer{
      grid-area:timer;
      font-size:12px;
    }
    .copyLink{
      margin-top:10px;
      cursor:pointer;
      grid-area:copyLink;
      float:right;
    }
    .valuePerc{
      grid-area:valuePerc;
    } 
    .red {
    color: #db1222;
    }

    /* General button styling */
    div button {
        background-color: #f9f9f9; /* Whiteish background */
        color: #333; /* Blackish text */
        border: 1px solid #333; /* Blackish border */
        padding: 5px 9px;
        margin: 2px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 12px;
    }

    /* Hover effect for buttons */
    div button:hover {
        background-color: #e0e0e0; /* Slightly darker white */
    }

    /* Selected button styling */
    div button.selected {
        background-color: #333; /* Blackish background */
        color: #f9f9f9; /* Whiteish text */
        border: 1px solid #333; /* Consistent border */
    }