.raceList {
		grid-column: 1;
  		grid-row: 1;
		z-index: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		align-content: center;
		width: 100vw;
	}
	
.col {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
	
	
.resp {
    padding: 1em;
    border-radius: 0.4em;
    border: 1px solid gray;
}
	
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;

/*-----ADD----*/
  display: flex;
  flex-direction: column;
    justify-content: center;
    align-items: center;




    


    overflow-y: scroll;
	}
	



    .padWho {
        border: 3px solid #d3d3d3;
    }

    .padWho:hover {
        
        
       /* color: white;*/
       border: 3px solid #3498db;
       transition: all 0.6s;
    }


    
    .blueBacka {
        background: #3498db;
        color: white;
    }


    .timeBackground {
        display: flex;
        flex-direction: column;
        /*justify-content: center;*/
        justify-content: flex-start;
        align-items: center;
      
      /* background: #3498DB;*/

      background: #d3d3d3;
        height: auto;
        overflow-y: scroll;
        border-radius: 1em;
    }
	
	  #foundDialog {
		  background: white;
		  padding: 1em;
		  position: absolute;
		  top: 50%;
		  left: 50%;
  		  color: black;
		  transform: translate(-50%,-50%);
		  -ms-transform: translate(-50%,-50%);
		  border-radius: 0.5em;
	  }
	

      .padWho {
          margin: 0.6em;
          width: 9em;
      }


      .timePickerWrap {
    
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 30em;
      }
	

      .timePickerWrap h2 {
        padding:1.5rem;
      }

      .timePickerWrap p {
        color: gray;
        padding-bottom: 2.6rem;
      }

      /*Add 18/02/2022 */
	
      .timePickerWrap button {
        margin-top: 0.4rem;
        margin: 0.5rem;
        padding: 0.7rem 0.3rem;
      }

      /*23:19:57 both 18/04/23*/
    /*  .timePickerWrap button:first-child { 
        margin-top: 1rem;
      }*/

      .timePickerWrap input { 
        margin-bottom: 2rem;
      }

      .timePickerWrap button:last-child { /*23:18:27*/
        margin-bottom: 4rem;
      }

      .timePickerWrap input {
        padding: 0.7em;
        border-radius: 0.5em;
        border: 1px solid #3498db;
      }
	
 /*--------End of Add 18/02/2022------- */


	
	
	
	#foundDialog  button {
		margin-top: 0.6em;
		margin-left: 0.5em;
		margin-right: 0.5em;
	}
	
	
	.outerWrapper {

	display: grid;              /* establish flex container */
    flex-direction: column;     /* stack flex items vertically */
    justify-content: start;    /* center items vertically, in this case */
    align-items: center;  
			
	}
	
	
    .filterBtn {
			margin: 1em;
		}

      
	
	
	
	#filters {
		
		margin-bottom: 3em;
		display: flex;
		justify-content: center;
		align-content: center
	}
	


    .filtersToRow {

        margin-bottom: 3em;
		display: flex;
		justify-content: center;
		align-content: center;

        flex-direction: row;
        flex-wrap: wrap;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }
	
    p {
        text-align: center;
        font-size: 1em;
        font-weight: bold;
       /* margin-top: 2em;*/
    }
    
    
  #back {
  
  	background: none;
  	margin-top: 2em;
  	padding: 1em;
  	border: none;
  	font-weight: bold;
  	border-radius: 6px;
  	width: 8em;
  	font-size: 1em;
  	
  	left: 1em;
  	margin: 1em;
  }

  .title {
    margin-top: 2em;
  	font-weight: bold;
  	text-align: center;
  }

  .adder {
  	background: white;
  	color: #3498db;
  }

  .greener {
  	background: #3498db;
  	color: white;
  }

  .adder:hover, .greener:hover {
opacity: 0.8;
transition: 0.6s;
background: "#1f84c5";
cursor: pointer;
  }
    

  .adder, .greener {
      display: flex;
      justify-content: center;
      align-items: center;
      
  	font-weight: bold;
    border-radius: 4px;
  	border: none;
   /* width: 30em;
  	height: 3em;*/
  	font-size: 1.2em;
  	margin: 0.3em;

     
  }

    
  
	
	
  /*#races {
  	display: flex;
  	overflow-y: scroll;
  	flex-direction: column;
  	align-items: center;
    margin-top: 3em;
  }*/
    
#foundPartner {
display: none;
flex-direction: column;
align-items: center;
background: #ecf0f1;
margin-top: 3em;
margin-bottom: 2em;
} 
    
    
#foundPartner button {
font-size: 1.2em;
background: white;
color: black;
border: none;
padding: 1em;
width: 4em;
margin-bottom: 0.4em;
border-radius: 1em;
font-weight: bold;
margin-top: 1em;
}

.noRacesHeader {
    font-size: 2rem;
    color: gray;
    margin-top: 2rem;
}
	
.filterBtn {
           
            padding: 0.6em;
            border: none;
            font-weight: bold;
            border-radius: 30px;
            width: 7em;
            font-size: 1em;
            border: 1px solid #3498db;
        /*border-not needed when used with correct dark mode*/
        }

        

    .countryFilterButton {
        border: 1px solid #1abc9c;
        padding: 0.5rem;

        text-align: center;
        width: 5rem;
margin: 0.3rem;
padding: 0.5rem;
margin-top:2rem;
margin-bottom:0.5rem; 
border-radius: 6rem;    
            
    }

               

.raceTitle {
  /*  color: orange; */
    font-size:2em;
}

.whiteText {
    color: white;
}

.blackText {
    color: black;
}



.noDecoration {
    text-decoration: none;
}


.sideBySide {
    display: flex;
    flex-direction: row;
    align-items: center;
     margin-top: 1em;
}


.roundedSelect {
    border-radius: 50px;
    width: 8em;
    height: 3em;
}

.centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 3em;
}



.roundedLink {
    font-size: 1.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: white;
    color: black;
    width: 8em;
    text-decoration: none;
    font-weight: bold;
    height: 3em;
}

  /*----------------------------------------FONT SIZES HERE--------------------------------------------*/

  /*-----------------------------------MOBILE DESIGN-----------------------------------*/



.raceDate {
    font-size: 1.33em;
    color: gray;
}


.disciplineButtonsWrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}
  @media (max-device-width: 415px) {
  	/*UP TO XS MAX (replace 70em)*/
  
      
      .timePickerWrap {
        width: 100%;
      }

      .timePickerWrap button {
        margin-top: 2rem;
      }

      #searchField {
        font-size: 2.3rem;
      }

      .timeBackground {
        width: 85%;
      }

      .countryFilterButton {
        font-size: 2.1rem;
        width: 11rem;
      }
      
.raceDate {
    font-size: 2em;
}
      
      
      .centered {
          margin-top: 6em;
      }
      
      
      .raceTitle {
          font-size: 3em;
         
      }
      
    #back {
  		font-size: 2.5em;
  	}
      
  	.title {
  		font-size: 4em;
  	}
      
  	.adder, .greener, .link {
  		font-size: 2.5em;
  	}  
      
    
      #foundPartner {
          font-size: 2.3em;
      }
      
      #foundPartner button {
          margin-top: 1em;
          font-size: 1em;
          padding: 0.6em;
      }
      
     
      
      p {
          font-size: 2em;
      }
	  
	  #filters {
		  flex-wrap: wrap;
	  }
	  
	     .filterBtn {
		
			font-size: 2.1em;
		}
	  
      
      
      .filterButtons {
          width: 100%;
          display: flex;
justify-content: center;
        
          
      }
	  
	
  }





  /* CHANGES ON RESIZE ADJUST BEHAVIOUR (HIDE UNDER HAMBURGER, ETC.)*/

  @media only screen and (max-width: 70em) {
  	#back {
  		margin-top: -1.5em;
  		margin-left: -2em;
  	}
  	.adder, .greener {
  		/*width: 93vw;*/
  		margin-left: 1em;
  		margin-right: 1em;
  	}
      
      .filterButtons {
          flex-direction: column;
      }
  }