.namegenerator-toggle-menu{
	display: flex;
    flex-flow: row nowrap;
    gap:  0 10px;
}

.namegenerator-toggle-menu button{
    background-color: #FFEDE1;
    color: #867575;
    font-size: 18px;
    font-family: "circular-2";
    font-weight: 300 !important;
    border-radius: 16px;
    height: 45px;
    box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.10);
    border: none;
    flex-grow: 1;
}
.active-toggle{
 	background-color: #4d3d71 !important;
    color: white !important;
}
.name-generator-wrapper {
    margin-top: 10px;
}
.name-generator-wrapper h3{
	color: #4d3d71;
    margin-bottom: 10px;
    font-family: "circular-2";
    font-size: 20px;
}
.wrapper{
	display: flex;
    gap: 0 10px;
}
.wrapper div {
    width: 100%;
}
.wrapper input[type="radio"]{
    display: none;
}

.wrapper label{
    color: #4d3d71;
    display: flex;
    box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.10);
	background-color: white;
    border-radius: 16px;
    padding: 10px 0;
    justify-content: center;
}

input[name="generateBtn"], input[name="generateSimiliarBtn"]{
	background-color: #4d3d71;
    color: white;
    min-width: 185px;
}

input[type="radio"]:checked+label{ 
	background-color: #4d3d71;
    color: white;
} 

label[for="all"]:after {
    content: url('https://webstaging.babyjourney.se/wp-content/uploads/2023/06/genderintersex.svg');
    margin-left: 10px;
    height: 26px;
}

label[for="female"]:after {
    content: url('https://webstaging.babyjourney.se/wp-content/uploads/2023/06/genderfemale.svg');
    margin-left: 10px;
    height: 26px;
}

label[for="male"]:after {
    content: url('https://webstaging.babyjourney.se/wp-content/uploads/2023/06/gendermale.svg');
    margin-left: 10px;
    height: 26px;
}

input[type="radio"]:checked
+label[for="all"]:after {
	content: url('https://webstaging.babyjourney.se/wp-content/uploads/2023/06/genderintersex-white.svg');
}

input[type="radio"]:checked
+label[for="male"]:after {
	content: url('https://webstaging.babyjourney.se/wp-content/uploads/2023/06/gendermale-white.svg');
}

input[type="radio"]:checked
+label[for="female"]:after {
	content: url('https://webstaging.babyjourney.se/wp-content/uploads/2023/06/genderfemale-white.svg');
}

#character{
    font-size: 18px;
    color: #4d3d71;
    border-radius: 16px;
    border: none;
    height: 50px;
    box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.10);
    margin-bottom: 30px;
    min-width: 275px;
    appearance:none;
    background-image: url("https://webstaging.babyjourney.se/wp-content/uploads/2023/05/caretdown.svg");
    background-repeat: no-repeat;
    background-position: right 1rem top 50%;
    background-size: 1.3rem auto;
    text-align-last: center;
    padding-right: 20px;
    font-family: "circular-2";
    font-weight: 300;
	background-color: white;
}

#character:focus-visible,
#similiar-name:focus-visible{
    outline: none;
}

.similiar-names-wrapper {
	display: none;
    margin-top: 50px;
}

.similiar-names-wrapper form > div {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

label[for="similiar-name"]{
	color: #4d3d71;
    font-size: 20px;
    font-family: "circular-2";
	font-weight: 400;
}

#similiar-name {
    margin-top: 10px;
    color: #4d3d71;
    padding: 13.5px 20px;
    font-size: 18px;
    font-weight: 300;
    font-family: "circular-2";
    border-radius: 16px;
    border: none;
    box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.10);
	-webkit-appearance: none;
}

#similiar-name::placeholder {
	color: rgba(77, 61, 113, 0.60) !important;
    font-size: 16px; 
    font-family: "circular-2";
}

input[name="generateSimiliarBtn"]{
	width: 100%;
}

.name-generator-wrapper .uk-button,
.similiar-names-wrapper .uk-button{
	text-transform: capitalize !important;
    font-size: 18px;
    font-weight: 300;
}

@media screen and (max-width: 535px){
    input[name="generateBtn"],
    #character{
     	width: 100%;
    }
    .wrapper {
    	gap: 0 7px !important;
    }
    .wrapper label,
    #character{
    	font-size: 16px;
    }
    .namegenerator-toggle-menu button{
        margin-bottom: 15px;
    }
    .name-generator-wrapper h3{
    	font-size: 18px;
    }
    .similiar-names-wrapper {
    	margin-top: 10px;
    }
}