/*Container*/
#suggestionsContainer {
	position: absolute;
	
	width: 100vw;
	height: auto;

	display: table;
	margin: 0 auto;

	opacity: 0;
	transition: opacity var(--transition-speed);

	/*Disable user touch/select on text elements*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.suggestionsShow {
	opacity: 1 !important;
}

/*The UL*/
#suggestions {
	
	height: auto;
	width: 50vw;

	/*Center ul horizontally*/
	margin: 0 auto;
	list-style: none;

	/*Remove the fucking padding*/
	/*It took me an hour to fix this piece of shit*/
	padding: 0;

	/*Allow centering of children*/
	display: table;
  	table-layout: fixed;
}

/*The Li*/
#phrase {
	/*Align list horizontally*/
	justify-content: center;

	height: auto;

	/*Always center horizontally*/
	/*display: table-cell;*/
	/*width: auto;*/
  	/*text-align: center;*/

  	display: inline-flex;
  	width: 100%;
  	text-align: center;
}

/*The Li's child*/

.phraseButton {

	background: transparent;
	border: none;
	outline: none;

	color: var(--base-color);
	font-size: 12pt;
	font-family: roboto-bold;
	text-align: center;

	border-radius: 6px;
	vertical-align: middle;
	padding: 10px;

}

.phraseButton:focus {
	background: var(--base-hover-bg);
}

.phraseButton:active {
	background: var(--base-active-bg);
}

@media screen and (max-width: 580px) {
	/*The Li*/
	#phrase {
		display: inline-flex !important;
		width: 100% !important;
  		text-align: center !important;
	}
}