/*.characterAviName {
	color: purple;
	background-color: white;
	border-radius: 5%;
}*/

#selectCharacterContainer {
	background-color: var(--dt-text-background-color1);
}

.selectCharacterText {
	color: var(--dt-colored-text2) !important;
	font-family: sans-serif;
	font-family: var(--dt-font-family);
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 1.5em !important;
  	text-align: center; 
}


#selectCharacterText1 {
	margin-top: 1%;
	margin-bottom: 0;
}

#selectCharacterText2 {
	margin-top: 0;
}

.selectCharacterTextContainer {
	content:url("dtt-holdingshape_subtitle.png");
}



.charCircle:focus {
	border: 2px solid var(--dt-button-focus-color1-inside) !important;
	outline: 2px solid var(--dt-button-focus-color1-outside) !important;
}



.namePlate {
	background-color: white;
	border: 2px solid var(--dt-colored-text3);
	border-radius: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.namePlateText {
	color: var(--dt-colored-text3) !important;
	text-align: center;
	font-family: sans-serif;
	font-family: var(--dt-font-family) !important;
	font-weight: var(--dt-font-weight);
	font-style: var(--dt-font-style);
	font-size: 1.25em;
}



#SebastianAvi {
	background: url("dtt-sebastian_normal.png") no-repeat;
	background-size: 100%;
	border: none;
}

#SebastianAvi:hover {
	background: url("dtt-sebastian_hover.png") no-repeat;
	background-size: 100%;
	border: none;
	cursor: pointer;
}

#SebastianSelected {
	background: url("dtt-sebastian_selected.png") no-repeat;
	background-size: 100%;
	border: none;
}

#MidoriAvi {
	background: url("dtt-midori_normal.png") no-repeat;
	background-size: 100%;
	border: none;
}

#MidoriAvi:hover {
	background: url("dtt-midori_hover.png") no-repeat;
	background-size: 100%;
	border: none;
	cursor: pointer;
}

#MidoriSelected {
	background: url("dtt-midori_selected.png") no-repeat;
	background-size: 100%;
	border: none;
}

#SamAvi {
	background: url("dtt-sam_normal.png") no-repeat;
	background-size: 100%;
	border: none;
}

#SamAvi:hover {
	background: url("dtt-sam_hover.png") no-repeat;
	background-size: 100%;
	border: none;
	cursor: pointer;
}

#SamSelected {
	background: url("dtt-sam_selected.png") no-repeat;
	background-size: 100%;
	border: none;
}

#ArnetaAvi {
	background: url("dtt-arneta_normal.png") no-repeat;
	background-size: 100%;
	border: none;
}

#ArnetaAvi:hover {
	background: url("dtt-arneta_hover.png") no-repeat;
	background-size: 100%;
	border: none;
	cursor: pointer;
}

#ArnetaSelected {
	background: url("dtt-arneta_selected.png") no-repeat;
	background-size: 100%;
	border: none;
}

#PriaAvi {
	background: url("dtt-pria_normal.png") no-repeat;
	background-size: 100%;
	border: none;
}

#PriaAvi:hover {
	background: url("dtt-pria_hover.png") no-repeat;
	background-size: 100%;
	border: none;
	cursor: pointer;
}

#PriaSelected {
	background: url("dtt-pria_selected.png") no-repeat;
	background-size: 100%;
	border: none;
}

#CarlosAvi {
	background: url("dtt-carlos_normal.png") no-repeat;
	background-size: 100%;
	border: none;
}

#CarlosAvi:hover {
	background: url("dtt-carlos_hover.png") no-repeat;
	background-size: 100%;
	border: none;
	cursor: pointer;
}

#CarlosSelected {
	background: url("dtt-carlos_selected.png") no-repeat;
	background-size: 100%;
	border: none;
}

#ThomasAvi {
	background: url("dtt-thomas_normal.png") no-repeat;
	background-size: 100%;
	border: none;
}

#ThomasAvi:hover {
	background: url("dtt-thomas_hover.png") no-repeat;
	background-size: 100%;
	border: none;
	cursor: pointer;
}

#ThomasSelected {
	background: url("dtt-thomas_selected.png") no-repeat;
	background-size: 100%;
	border: none;
}

#EloiseAvi {
	background: url("dtt-eloise_normal.png") no-repeat;
	background-size: 100%;
	border: none;
}

#EloiseAvi:hover {
	background: url("dtt-eloise_hover.png") no-repeat;
	background-size: 100%;
	border: none;
	cursor: pointer;
}

#EloiseSelected {
	background: url("dtt-eloise_selected.png") no-repeat;
	background-size: 100%;
	border: none;
}