.bmi-shortcode-outer-wrapper {
    max-width: 500px;
    margin: 0 auto;
}

@media (min-width: 744px) {
    .bmi-shortcode-outer-wrapper {
        max-width: 80%;
    }
}

@media (min-width: 1440px) {
    .bmi-shortcode-outer-wrapper {
        max-width: 800px;
    }
}

.bmi-wrapper {
    padding: 20px;
    font-family: 'Raleway', sans-serif;
}

.bmi-inner-wrapper {
    border: 1px solid white;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
}

.bmi-wrapper .title-wrapper {
    position: relative;
}

.bmi-wrapper #bmi-results-back-button {
    position: absolute;
    top: 5px;
    left: 0;
}

.bmi-wrapper h3 {
    margin-top: 0;
    font-size: 1.5rem;
    font-weight: 800;
}

.bmi-wrapper .input-values-container {
    margin-top: 40px;
}

.bmi-wrapper input[type="number"],
.bmi-wrapper input[type="number"]:focus {
    background: transparent;
    border-radius: 25px;
    background-repeat: no-repeat;
    background-position: 11px 9px;
    font-size: 13px;
    padding: 16px 15px 16px 48px;
    color: #B3B3B3;
    margin: 10px 0;
}

.bmi-wrapper input.error,
.bmi-wrapper input.error::placeholder {
    color: #AD0000;
    border-color: #AD0000;

}


.bmi-wrapper input#weight {
    background-image: url('../img/weight.svg');
}

.bmi-wrapper input#height {
    background-image: url('../img/height.svg');
}

.bmi-wrapper button#compute {
    font-size: 1rem;
    padding: 9px 48px;
    border-radius: 6px;
    margin-top: 40px;
}

.bmi-wrapper.showing-results .bmi-inner-wrapper {
    background-color: white;
}

.bmi-wrapper.showing-results h3 {
    color: #464646;
}

.bmi-wrapper .result-number {
    font-family: 'Public Sans';
    font-size: 3rem;
    font-weight: bold;
    border-radius: 50px;
    display: inline-block;
    line-height: 3.7rem;
    padding: 0px 21px;
}

.bmi-wrapper .result-text {
    font-size: 14px;
    margin-top: 5px;
}

.bmi-wrapper .recommended-plan {
    color: #727070;
    font-size: 20px;
    font-weight: 500;
    margin: 20px 0;
}

.bmi-wrapper .plan-items {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.bmi-wrapper .plan-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 110px;
    color: #3E3E3E;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    display: none;
}

.bmi-wrapper .plan-item  .plan-item-text {
    margin-top: 10px;
}

.bmi-wrapper .plan-item img {
    width: 65px;
}

.bmi-wrapper .normal-bmi .result-number {
    background-color: #00B819;
}
.bmi-wrapper .normal-bmi .result-text {
    color: #00B819;
}
.bmi-wrapper .normal-bmi .plan-item.tonifying {
    display: flex;
}
.bmi-wrapper .normal-bmi .plan-item.muscle-grow {
    display: flex;
}

.bmi-wrapper .overweight-bmi .result-number {
    background-color: #FFE601;
}
.bmi-wrapper .overweight-bmi .result-text {
    color: #FFE601;
}
.bmi-wrapper .overweight-bmi .plan-item.lose-weight {
    display: flex;
}

.bmi-wrapper .obese-1-bmi .result-number {
    background-color: #FFAA00;
}
.bmi-wrapper .obese-1-bmi .result-text {
    color: #FFAA00;
}
.bmi-wrapper .obese-1-bmi .plan-item.lose-weight {
    display: flex;
}

.bmi-wrapper .obese-2-bmi .result-number {
    background-color: #FF0000;
}
.bmi-wrapper .obese-2-bmi .result-text {
    color: #FF0000;
}
.bmi-wrapper .obese-2-bmi .plan-item.lose-weight {
    display: flex;
}

.bmi-wrapper .obese-3-bmi .result-number {
    background-color: #AD0000;
}
.bmi-wrapper .obese-3-bmi .result-text {
    color: #AD0000;
}
.bmi-wrapper .obese-3-bmi .plan-item.lose-weight {
    display: flex;
}