*
	{
		box-sizing: border-box;
	}
	
	body
	{
		background: #272a33;
		font-family: Lato,Arial,Helvetica Neue,Helvetica,sans-serif;
	}
	
	.dropdown-item:hover
	{
		background-color: #7f6c99;
	}
	
	.gt-navlink-dropdown
	{
		color: #fff;
		text-decoration: none;
	}
	
	.gt-navlink-dropdown:active
	{
		color: #7f6c99;
	}
	
	.searchArea
	{
		padding-left: 1rem;
		margin-bottom: 0rem;
	}
	
	#searchIcon
	{
		list-style: none;
		cursor: pointer;
		width: fit-content;
	}
	
	#search
	{
		position: fixed;
		right: 0px;
		display: none;
	}
	
	#login
	{	
		position: fixed;
		right: 25px;
	}
	
	#showHidePassword
	{
		cursor: pointer;
	}
	
	.accordion
	{
		background-color: #7d7979;
		color: #444;
		cursor: pointer;
		width: 100%;
		text-align: left;
		border: none;
		outline: none;
		transition: 0.4s;
		box-shadow: 0px 4px #7f6c99;
	}
	
	.accordion:hover
	{
		background-color: #7f6c99;
	}
	
	.active
	{
		background-color: #7f6cAA;
	}
	
	.consoleSubDiv
	{
		padding: 0 5px;
		background-color: white;
		transition: max-height 1s ease-out;
		max-height: 0;
		overflow: overlay;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.consoleSubDiv .games:nth-child(even)
	{
		background-color: #f8f2f8;
	}
	
	.games
	{
		border-color: #7f6c99;
		padding: 5px 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		max-width: 250px;
		border-bottom: ridge;
	}
	
	.games > h3 
	{
		text-align: center;
	}
	
	.btn-games
	{
		height: 50px;
		margin: 2px 4px;
		min-width: 70px;
		padding: 5px 2px;
	}
	
	.btn-games:hover
	{
		background-color: #7f6c99;
	}
	
	.btn-players
	{
		height: 50px;
		margin: 2px 4px;
		min-width: 70px;
		padding: 5px 2px;
	    background-color: azure;
	}
	
	.btn-players:hover
	{
		background-color: #7f6c99;
	}
	
	.spin
	{
		display: flex;
		flex-direction: row-reverse;
	}
	
	.footer
	{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: #25282a;
	}
	
	.controlsGrid
	{
		display: grid;
		position: fixed;
		background-color: #e2d1eb;
		z-index: 1030;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		text-align: center;
		align-content: space-evenly;
		transition: height 1s, width 1s, left 1s, top 1s; 
	}
	
	.controlsGridHidden
	{
		background-color: #e2d1eb;
		z-index: 1030;
		width: 0;
		height: 0;
		top: 0;
		left: 0;
		text-align: center;
		align-content: space-evenly;
		overflow: hidden;
		transition: height 1s, width 1s, left 1s, top 1s; 
	}
	
	.close
	{
		width: 25px;
		height: 25px;
		right: 0%;
		top: 0%;
		position: absolute;
		z-index: 101;
	}

	.modal
	{
		overflow:hidden;
    	}

	.height10
	{
		height: 10%;
	}
	
	.controls-image
	{
		height: 100%;
		width: 100%;
	}
	
	.next
	{
		z-index: 100;
		height: 100%;
		width: 10%;
		position: fixed;
		right: 0;
		top: 0;
		color: gray;
		opacity: 0.3;
	}
	
	.next:hover 
	{
		background-color: #be09cf;
	}
	
	.previous
	{
		z-index: 100;
		height: 100%;
		width: 10%;
		position: fixed;
		left: 0;
		top: 0;
		color: gray;
		opacity: 0.3;
	}
	
	.previous:hover 
	{
		background-color: #be09cf;
	}
	
	.flipImage 
	{
		transform: rotateY(0deg);
		transition: transform 2.5s cubic-bezier(0.6, -0.28, 0.74, 0.05);
	}
	
	.modal-100
	{
		--bs-modal-width: 100%;
	}
	
	#playersList li:hover 
	{
		cursor: pointer;
		text-decoration: line-through;
	}
	
	#imperfectWinnerBracketDiv
	{
		display: flex;
		flex-direction: row;
	}
	
	#perfectWinnerBracketDiv
	{
		display: flex;
		flex-direction: row;
	}
	
	#winnerBracketDiv
	{
		display: flex;
		flex-direction: row;
	}
	
	#imperfectLoserBracketDiv
	{
		display: flex;
		flex-direction: row;
	}
	
	#perfectLoserBracketDiv
	{
		display: flex;
		flex-direction: row;
	}
	
	#loserBracketDiv
	{
		display: flex;
		flex-direction: row;
	}
	
	
	#tournamentDiv
	{
		position: relative;
		background-color: #272A44;
		width: fit-content;
	}
	
	.roundDiv
	{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.imperfectRoundDiv
	{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	
	.imperfectLoserRoundDiv
	{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	
	.matchDiv 
	{
		display: flex;
		flex-direction: column;
	}
	
	.matchDiv:hover 
	{
		background: #272A55;
	}
	
	.bracketDiv 
	{
		display: flex;
		align-items: center;
		padding: 5px 0px;
	}
	
	.bracket
	{
		width: 100px;
		line-height: 10px;
		min-height: 23px;
		margin: 5px 0px;
	}
	
	.selectedBracket
	{
		background-color: #FFC14F;
	}
	
	.selectedBracket:hover
	{
		background-color: #ffc107;
	}
	
	.unselectedBracket
	{
		background-color: grey;
	}
	
	.unselectedBracket:hover
	{
		background-color: #707786;
	}
	
	.horizontalLine
	{
		height: 3px;
		width: 40px;
		background-color: black;
		position: relative;
	}

	.threePlayerVerticalLine
	{
		height: 109px;
		width: 3px;
		background-color: black;
		margin: 20px 0px;
	}
	
	.verticalLine
	{
		height: 60px;
		width: 3px;
		background-color: black;
		margin: 20px 0px;
	}
	
	.verticalLinesDiv
	{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.imperfectVerticalLinesDiv
	{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-self: flex-end;
	}
	
	.imperfectLoserVerticalLinesDiv
	{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-self: flex-start;
	}
	
	#lockIconSpan
	{
		position: absolute;
		top: 0;
		right: 0;
	}
	
	#lockIcon
	{
		color: white;
	}
	
	#matchLabel
	{
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#randomGames
	{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	#randomGameBorder 
	{
		overflow: hidden;
		height: 22px;
	}
	
	#randomGames > label 
	{
		height: 20px;
	}
	
	#randomGames > label.animate
	{
		animation: animateRandomGame 1s ease 5;
		-webkit-animation: animateRandomGame 1s ease 5;
	}
	
	#keyframes animateRandomGame
	{
		0% {color: #ff7272;}
		50% {color: #94d9f7;}
		100% {color: #ff7272;}
	}
	
	@-webkit-keyframes animateRandomGame
	{
		0% {color: #ff7272;}
		50% {color: #94d9f7;}
		100% {color: #ff7272;}
	}
	
	.matchGame 
	{
		font-size: 10px;
		width: 50%;
		max-width: 60px;
		max-height: 20px;
		line-height: 1;
	}

	#modal-header
	{
		padding: 5px;
	}

	.dev-mode
	{
		position: absolute;
    		right: 0px;
    		width: min-content;
	}