#generator-container:not(.phrase-active) .phrase-generator,
#generator-container.phrase-active .characters-generator {
	display: none !important;
}

/* Hide the native radio inputs */
input[name="generator-form-switch"] {
	width: 0;
	height: 0;
	position: absolute;
	left: -9999px;
}

    /* Style the labels as clickable buttons */
input[name="generator-form-switch"] + label {
	display: block;
	padding: 15px;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	color: black;
}

/* Slightly dim labels that aren’t checked */
input[name="generator-form-switch"]:not(:checked) + label {
	opacity: 0.7;
}

/* Container for the radio switch */
.form-selectors-pass {
	display: flex;
	position: relative;
	z-index: 1;
	width: 100%;
	background-color: #F1EEFF;
	border-radius: 8px;
	overflow: hidden;
	box-sizing: border-box;
}

/* The slider that visually indicates the active selection */
.form-selectors-pass .radio-slider-pass {
	display: block;
	width: calc(50% - 10px);
	border-radius: 6px;
	background-color: #fff;
	position: absolute;
	left: 5px;
	top: 5px;
    bottom: 5px;
    transform: translate3d(0, 0, 0);
    transition: transform 0.3s ease-in-out;
	z-index: -1;
}

.form-selectors-pass label {
    flex: 1 0 50%;
    text-align: center;
}