/* Setting container */
.game-settings-container{
margin-top: calc(var(--percentage-height) * 8);
}

.settings-item-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-top: calc(var(--percentage-height) * 2.5);
	margin-bottom: calc(var(--percentage-height) * 2.5);
}

.main-description {
	width: calc(var(--percentage-width) * 50);
	font-size: calc(var(--percentage-width) * 2.5);
	margin-left: calc(var(--percentage-width) * 6);
	color: black;
}

.main-description[color="red"] {
	color: #ca1635;
}

.woordzoeker-main-description {
	width: calc(var(--percentage-width) * 50);
	font-size: calc(var(--percentage-width) * 2.5);
	margin-left: calc(var(--percentage-width) * 6);
  	color: #22912e;
}

.settings-desc-text {
	margin: 0;
	font-size: calc(var(--percentage-width) * 2);
	color: var(--illi-black);
}

#settings-level-desc, #settings-rounds-desc,
#settings-resume-desc, #settings-speed-desc {
	/*--TOEVOEGING--*/
	position: absolute;
	width: calc(var(--percentage-width) * 85);
}

#settings-theme-desc {
	font-size: calc(var(--percentage-width) * 3);
	margin-bottom: calc(var(--percentage-height) * 2);
}

/* Buttons container */
.settings-item-button-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#settings-level-button-container, #settings-rounds-button-container,
#settings-resume-button-container, #settings-speed-button-container {
	padding-left: calc(var(--percentage-width) * 25);
}

#settings-theme-button-container {
	justify-content: space-between;
	width: calc(var(--percentage-width) * 80);
	justify-content: flex-start;
	flex-wrap: wrap;
}

/* Image button */
.image-button-container {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--percentage-height) * 3);
	height: fit-content;
	margin-top: calc(var(--percentage-height) * 0.7);
	margin-bottom: 0;
	margin-left: calc(var(--percentage-width) * 1.5);
	margin-right: calc(var(--percentage-width) * 1.5);
	text-align: center;
}

.image-button-container-theme {
	width: calc(var(--percentage-width) * 10);
}

.image-button-container div {
	display: flex;
}

.theme-button,
.level-button,
.resume-button,
.speed-button {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: calc(var(--percentage-height) * 1);
	padding-top: calc(var(--percentage-height) * 2);
	border-radius: calc(var(--percentage-height) * 2);
	width: 100%;
	height: calc(var(--percentage-height) * 23);
}

.button-image {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: calc(var(--percentage-width) * 1);
	border: calc(var(--percentage-width) * 0.1) solid black;
	box-shadow: 0 0 calc(var(--percentage-width) * 1) rgba(0, 0, 0, 0.15);
	min-height: calc(var(--percentage-height) * 14);
	height: calc(var(--percentage-height) * 14);
	/* width: calc(var(--percentage-height) * 14); */
	width: calc(var(--percentage-height) * 30);
	position: relative;
	background-color: white;
}

.theme-button .button-image {
	width: calc(var(--percentage-height) * 14);
}

.button-text {
	margin-top: calc(var(--percentage-height) * 2.5);
}

.game-settings-container .button-image img {
	height: calc(var(--percentage-height) * 7);
	z-index: 2;
}

.button-image i{
	font-size: calc(var(--percentage-width) * 4);
}

.text-position {
	position: relative;
	top: 0.5vw;
  }

/* Focused image buttons */
.theme-button:focus,
.level-button:focus,
.resume-button:focus,
.speed-button:focus {
	outline: none;
}

.theme-button:focus .button-text {
	color: black;
}

.theme-button:focus .button-image,
.level-button:focus .button-image,
.resume-button:focus .button-image,
.speed-button:focus .button-image {
	border-color: rgba(255, 255, 255, 0);
	opacity: 1;
}

.theme-button:focus .button-image:after,
.level-button:focus .button-image:after,
.resume-button:focus .button-image:after,
.speed-button:focus .button-image:after {
	border: calc(var(--percentage-width) * 0.3) solid var(--illi-red);
	content: "";
	position: absolute;
	width: calc(100% + calc(var(--percentage-width) * 1));
	height: calc(100% + calc(var(--percentage-width) * 1));
	background: var(--illi-light-red);
	z-index: 1;
	border-radius: calc(var(--percentage-width) * 1.4);
}

/* Selected buttons */
.theme-selected~.button-text,
.level-selected, .resume-selected, .speed-selected {
	color: black;
	font-weight: 600;
	text-decoration: underline;
}

.theme-selected,
.level-selected, .resume-selected, .speed-selected {
	background-color: var(--illi-blue);
	opacity: 0.8;
	/* color:white; */
}

/* Theme */
.image-button-container-theme {
	width: calc(var(--percentage-width) * 10);
}

/* Level */
.level-button,
.resume-button,
.speed-button {
	height: calc(var(--percentage-height) * 15);
}

.level-button .button-image .button-text,
.resume-button .button-image .button-text,
.speed-button .button-image .button-text {
	margin: 0;
	font-size: calc(var(--percentage-width) * 2.5);
	display: block;
}

/* Bingo specific 
   icon and text in one button */
.settings-image {
    position: absolute;
    width: 42vw;
    top: 2vw;
    left: 30vw;
}

.button-icon {
	min-height: calc(var(--percentage-height) * 17);
}

/* Amount */
.setting-amount-button-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;

	/*--TOEVOEGING--*/
	/* padding-right: calc(var(--percentage-width) * 7); */
}

.amount-counter-button {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--illi-red);
	font-size: calc(var(--percentage-height) * 7);
	width: calc(var(--percentage-height) * 9);
	height: calc(var(--percentage-height) * 9);
	color: white;
	border-radius: calc(var(--percentage-height) * 2);
	margin-left: calc(var(--percentage-width) * 1);
	margin-right: calc(var(--percentage-width) * 1);
}

.amount-counter-button p {
    z-index: 2;
}

.amount-counter-button:focus {
    outline: none;
}

.amount-counter-button:focus::after {
	border: calc(var(--percentage-width) * 0.3) solid var(--illi-red);
	content: "";
	position: absolute;
	width: calc(var(--percentage-height) * 10);
	height: calc(var(--percentage-height) * 10);
	background: var(--illi-light-red);
	z-index: 1;
	border-radius: calc(var(--percentage-width) * 1.4);
}

.amount-counter-text {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: calc(var(--percentage-height) * 7);	/*6vh*/
	margin: calc(var(--percentage-height) * 1);
	border-radius: calc(var(--percentage-width) * 1);
  	border: calc(var(--percentage-width) * 0.1) solid black;
  	box-shadow: 0 0 calc(var(--percentage-width) * 1) rgba(0, 0, 0, 0.15);
  	height: calc(var(--percentage-height) * 12); /*7vh*/
 	width: calc(var(--percentage-height) * 12); /*10vh*/
  	position: relative;
  	background-color: white;
}

.start-button-settings-page{
	margin-left: calc(var(--percentage-width) * 26) !important;
}