
.icon {
	border: 1.4px solid #bcbcbc;
    border-radius: 50%;
}

.rounded {
	text-align: center;
	text-decoration: none;
	font-weight: bold;
}

.hiddenButton {
    display: none;
}


	.blue {
		color: #3498db !important;
	}

.DATE {
    width: 100%;
}



.grayDate, .grayRaceDate {
	color: gray;
}

.blueRaceName {
	text-align: center;
}

	#centerField {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 1em;
	}



	#centerField input {
		width: 20em;
		padding: 1em;
		border: 1px solid gray;
		border-radius: 0.5em;
	}

	.badge {
		position: relative;
		bottom: 1.1em;
		left: -1.6em;

		color: white;
		background: red;
		width: 20px;
		height: 20px;
		padding: 0.5em;
		border-radius: 50%;
		font-size: 1em;

	}

	#messagesButton {
		position: relative;
	}






	.dark {
		background: #1c1e21;

	}



	.whiteDark {
		/*color: white;*/
		box-shadow: none !important;

	}


	.darkRaceItem {
		border: 1px solid #fff;
	}

	.dark h1 {
		color: white;
	}

	/*-----------------REACE SELECTION----------------*/


	.noiceWrap {
		margin-top: 3rem;
		height: 100vh;
	}

	.centered {
		text-align: center;
	}

	.gray {
		color: gray;
	}


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


	.raceItem {
		margin: 1em;
		margin-top: 3em;
		padding: 1em;
		font-weight: bold;
		box-shadow: 0px 1px 10px 0px rgba(145, 145, 145, 1);
		width: 18em;
		list-style-type: none;
		border-radius: 0.7rem;
		
	}




	


	/*-----------------REACE SELECTION----------------*/




	button {
		font-weight: bold;
	}

	.noBack {
		background: none;
		border: none;
		margin: 1em;
	}

	#closer {
		border: none;
		background: transparent;
		color: #3498db;
	}

	.lookBtn {
		    /* background: white; */
			border-radius: 50px;
			border: 3px solid rgb(57, 112, 184);
			color:rgb(57, 112, 184);
			width: 100%;

	}


	.filled {
		color: white;
		background:rgb(57, 112, 184);
	}

	

	h1 {
		padding: 0.6em;
	}


	.selection {
		text-align: center;
		/*margin: 1em;*/
		padding: 1em;
		/* border-radius: 1em;*/
	}


	.flex {
		display: flex;
		flex-direction: column;
		width: 100%;
		justify-content: center;
		align-items: center;
	}


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


	.grid {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}





	.modalWrapper {
		border: 2px solid #3498db;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: white;
		color: black;
		width: 40em;
		margin-left: calc(48vw - 20em);
		padding: 1em;
		border-radius: 1em;
		margin-bottom: 1em;
	}

	.modalWrapper button {
		padding: 1em;
	}

	.raceModal h3 {
		padding: 0.6em;
		text-align: center;
		border-radius: 1em;
	}

	#raceEdit {
		display: grid;
		justify-content: center;
		flex-direction: column;
	}

	#mirox {
		width: 90vw;
		display: flex;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
		margin-left: 5vw;
		align-items: center;
	}


	/*----------------------------------------FONT SIZES HERE--------------------------------------------*/
	/*-----------------------------------MOBILE DESIGN-----------------------------------*/
	@media (max-device-width: 415px) {
		/*UP TO XS MAX (replace 70em)*/

		h1 {
			font-size: 6rem;
		}


.grayDate, .grayRaceDate {
    font-size: 2.2rem;
}

		.icon,
		.spacer {
			display: none;
		}

		h2 {
			font-size: 3rem;
		}

		button,
		h3 {
			font-size: 2.2rem;
		}

		.rounded {
			font-size: 2.2rem;
		}

		#back {
			font-size: 2em;
		}


		.raceItem {
			font-size: 1.77em;
		}




		#centerField input {
			font-size: 2em;
		}
	}

	/* CHANGES ON RESIZE ADJUST BEHAVIOUR (HIDE UNDER HAMBURGER, ETC.)*/
	@media only screen and (max-width: 70em) {
		.grid {
			flex-direction: column;
			justify-content: center;
			align-content: center;
		}
	}

	@media only screen and (max-width: 70em) {
		
		
		#mirox {
			width: 90vw;
			display: flex;
			justify-content: center;
			align-content: center;
			flex-wrap: wrap;
			margin-left: 5vw;
		}

		#mirox button {
			width: 8em !important;
		}
	}

	.invert {
		color: white !important;
		border: none !important;
		background: #3498db !important;
	}

	.rounded {
		width: 8em !important;
	}

	.disciplineButton {
		width: 10em !important;
	}

	.full {
		color: white;
		background: #3498db;
		text-align: center;
		text-decoration: none;
	}

	#competitors,
	#messages,
	#settings,
	#signout {
		margin-left: 1em;
		margin-right: 1em;
	}






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


	/*---------------------------------------------------------------------------------*/
