.frontend-bmi-wrapper {
    display: flex;
    gap: 1.5rem;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: 16px; /* Basis-Schriftgröße, wird durch Control überschrieben */
}

.frontend-bmi-wrapper .frontend-bmi-col {
    flex: 1 1 0;
}

.frontend-bmi-wrapper .field-group {
    margin-bottom: 1.5em;
}

.frontend-bmi-wrapper .field-group.gender > *:last-child{
	margin-right: 0;
}

.frontend-bmi-wrapper .label {
    font-weight: 700;
    margin-bottom: 0.75em;
    color: var(--e-global-color-text);
    font-size: 1em;
}

.frontend-bmi-wrapper .current-value {
    font-size: 1.75em;
	line-height: 1;
    font-weight: 700;
	margin-top: -0.25em;
    margin-bottom: 0.5em;
    color: var(--e-global-color-primary);
}

.frontend-bmi-wrapper input[type=range] {
    width: 100%;
    height: 3.125em;
    border-radius: 0;
	background: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.frontend-bmi-wrapper input[type=range]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    height: 3.125em;
	margin-top: -1.5625em;
    width: 1.5em;
    border-radius: 1.5em;
  	background: url("data:image/svg+xml;utf8,<svg fill='%23ffffff' version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' stroke='%23ffffff'><g><rect x='10' y='6' width='4' height='4'/><rect x='18' y='6' width='4' height='4'/><rect x='10' y='14' width='4' height='4'/><rect x='18' y='14' width='4' height='4'/><rect x='10' y='22' width='4' height='4'/><rect x='18' y='22' width='4' height='4'/></g></svg>") no-repeat center / contain;
    background-color: var(--e-global-color-accent);
    cursor: pointer;
    border: none;
    box-shadow: none;
}

.frontend-bmi-wrapper input[type=range]::-moz-range-thumb {
    appearance: none;
    -webkit-appearance: none;
    height: 3.125em;
	margin-top: -1.5625em;
    width: 1.5em;
    border-radius: 1.5em;
  	background: url("data:image/svg+xml;utf8,<svg fill='%23ffffff' version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' stroke='%23ffffff'><g><rect x='10' y='6' width='4' height='4'/><rect x='18' y='6' width='4' height='4'/><rect x='10' y='14' width='4' height='4'/><rect x='18' y='14' width='4' height='4'/><rect x='10' y='22' width='4' height='4'/><rect x='18' y='22' width='4' height='4'/></g></svg>") no-repeat center / contain;
    background-color: var(--e-global-color-accent);
    cursor: pointer;
    border: none;
    box-shadow: none;
}

.frontend-bmi-wrapper input[type="range"]::-webkit-slider-runnable-track{
   	height: 1px;
    border-radius: 0;
    background: var(--e-global-color-a022917);
}

.frontend-bmi-wrapper input[type=range]::-webkit-slider-track {
    height: 1px;
    border-radius: 0;
    background: var(--e-global-color-a022917);
}

.frontend-bmi-wrapper input[type=range]::-moz-range-track {
    height: 1px;
    border-radius: 0;
    background: var(--e-global-color-a022917);
    border: none;
}

.frontend-bmi-wrapper .col-output {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.frontend-bmi-wrapper .bmi-label {
    font-weight: 700;
    color: var(--e-global-color-secondary);
    font-size: 1.125em;
}

.frontend-bmi-wrapper .bmi-value {
    font-size: 3em;
	margin: 0 0 0.1em;
    font-weight: 900;
    line-height: 1;
    color: var(--e-global-color-secondary);
}

.frontend-bmi-wrapper .bmi-band {
    font-weight: 900;
	margin: auto 0 0;
    font-size: 1.25em;
}

.frontend-bmi-wrapper .weight-range-display {
    font-size: 1.125em;
    margin: 0 0 1.25em;
}

.frontend-bmi-wrapper .bmi-text-before{
	margin-bottom: 1em;
}

.frontend-bmi-wrapper .bmi-text-before,
.frontend-bmi-wrapper .bmi-text-after {
    font-size: 1.125em;
    line-height: 1.3;
}

.frontend-bmi-wrapper .bmi-link {
    align-self: flex-start;
    font-size: 1.125em;
	font-weight: 700;
}

.frontend-bmi-wrapper .gender label {
    display: inline-block;
    margin-right: 0.8em;
	font-weight: 400;
    margin-bottom: 0.25em;
    font-size: 1em;
    cursor: pointer;
}

.frontend-bmi-wrapper .gender label:hover input[type="radio"]{
	border-color: var(--e-global-color-accent);
}

.frontend-bmi-wrapper .gender span{
  	display: inline-block;
	vertical-align: middle;	
}

.frontend-bmi-wrapper .gender input[type="radio"] {
    margin-right: 0.4em;
	appearance: none;
  	width: 1em;
  	height: 1em;
  	border: 1px solid var(--e-global-color-a022917);
  	border-radius: 50%;
  	display: inline-block;
	vertical-align: middle;
  	position: relative;
  	cursor: pointer;
}

.frontend-bmi-wrapper .gender input[type="radio"]:checked{
	border-color: var(--e-global-color-accent);
}

.frontend-bmi-wrapper .gender input[type="radio"]:checked:before{
	content: '';
	width: calc(1em - 4px);
	height: calc(1em - 4px);
	display: block;
	position: absolute;
	border-radius: 50%;
	background-color: var(--e-global-color-accent);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


@media (max-width: 767px) {
    .frontend-bmi-wrapper {
        flex-direction: column;
        gap: 1rem;
    }
}