.length-calculator {
    display: flex;
    flex-direction: column;
}

.length-calc-input-container {
    display: flex;
    flex-direction: column;
}

.length-calc-label {
    font-family: 'circular-2';
    font-weight: bold;
    font-size: 18px;
    line-height: 23px;
    color: #4D3D71;
    padding-bottom: 7px;;
}

.length-calc-input {
    height: 46px;
    font-family: 'circular-2';
    font-size: 18px;
	font-weight: 300;
    color: #887EA0;
    border-radius: 12px;
    border: 2px solid #D6DDF6;
    padding: 0 15px;
    margin-bottom: 27px;
}

.length-calc-input::placeholder {
	font-size: 18px;
	color: #887EA0 !important;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}


.length-calc-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #4A3D6D;
	height: 47px;
    background-color: #FFFFFF; 	
	background-image: url("https://webstaging.babyjourney.se/wp-content/uploads/2023/05/caretdown.svg");
	background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 1.3rem auto;
}

.length-calc-input:focus, .length-calc-select:focus {
	outline: 0 !important;
    border: 3px solid #4D3D71;
}

.gender-opt {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #FFFFFF; 
    padding: 5px 10px !important; 
    height: 60px !important;
    color: #4A3D6D;
    width: 100%;
	font-size: 18px;
}
  
.gender-opt:checked {
    background-color: #D6DDF6;
    color: #4A3D6D;
}

.gender-opt:hover {
    background-color: #D6DDF6;
    color: #4A3D6D;
}

.length-calc-btn {
    background-color: #887EA0;
    color: #ffffff;
    border-radius: 12px;
    border: none;
    width: 120px;
    height: 40px;
    font-family: 'circular-2';
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    cursor: pointer;
    transition: ease-in-out 0.3s;
	margin-top: 5px;
	padding: 10px 20px;
}

.length-calc-btn.validated {
    background-color: #4D3D71;
}

.length-calc-error-msg {
    font-family: 'circular-2';
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    letter-spacing: 0.04em;
    color: #E99595;
    margin: 30px 0;
}

.length-calc-result-container {
    display: flex;
    flex-direction: column;
	margin-top: -31px;
}

#baby-length-result {
    color: #4D3D71;
}

#baby-length-result::-webkit-inner-spin-button, 
#baby-length-result::-webkit-outer-spin-button {
	opacity: 0;
}

/* HIDDEN CLASS */
.length-calc-hidden {
    display: none;
}

@media screen and (min-width: 960px) {
	#baby-length-result {
		margin-bottom: 28px;
	}
}