@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");
body {
    font-family: "Quicksand", sans-serif;
    background-color: #212529;
}

body .wraper {
    padding: 50px 0px;
    /* Custom styling for BMI section */
    /* Specific styling for BMI input fields */
    /* Styling for the BMI result area */
    /* Button specific to BMI calculation */
}

body .wraper .form-map {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

body .wraper .form-map .form {
    margin: 20px 0px;
}

body .wraper .form-map .form p {
    font-weight: 600;
    margin-top: 15px;
}

body .wraper .form-map .form button {
    width: 100%;
    background-color: #212529;
    color: #ffffff;
    border: unset;
}

body .wraper .form-map .img {
    text-align: center;
    margin-top: 20px;
}

body .wraper .form-map .img img {
    width: 50%;
}

body .wraper .form-map .img p {
    margin-top: 20px;
    font-weight: 500;
    font-style: italic;
    font-size: 16px;
}

body .wraper .form-result {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

body .wraper .form-result #map-min {
    background-color: #3ab795;
    border-radius: 15px;
    padding: 10px;
    margin-bottom: 20px;
}

body .wraper .form-result #map-min li {
    list-style: none;
    background-color: #ffffff;
    border-radius: 15px;
    padding: 10px;
}

body .wraper .form-result #map-min p {
    font-weight: bold;
}

body .wraper .form-result #list-cs {
    background-color: #a3cef1;
    border-radius: 15px;
    padding: 10px;
}

body .wraper .form-result #list-cs li {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 10px;
    margin-bottom: 10px;
    list-style: none;
}

body .wraper .form_bmi {
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

body .wraper .form_bmi h4 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
}

body .wraper .form_bmi .bmi-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body .wraper .form_bmi .bmi-form input {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ced4da;
}

body .wraper .form_bmi .bmi-form button {
    width: 100%;
    background-color: #212529;
    color: #ffffff;
    border: unset;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

body .wraper .form_bmi {
    background-color: #e8f5e9;
    /* Light green background for BMI section */
    border: 1px solid #c8e6c9;
    /* Green border */
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.15);
    /* Stronger, green-tinted shadow */
    transition: all 0.3s ease-in-out;
    /* Smooth transition for hover effects */
}

body .wraper .form_bmi:hover {
    transform: translateY(-5px);
    /* Lift effect on hover */
    box-shadow: 0 10px 25px rgba(76, 175, 80, 0.25);
    /* Enhanced shadow on hover */
}

body .wraper .form_bmi h4 {
    color: #4CAF50;
    /* Green heading for BMI */
    border-bottom: 2px solid #4CAF50;
    /* Underline for heading */
    padding-bottom: 10px;
    margin-bottom: 25px;
    font-size: 1.5rem;
    /* Slightly larger heading */
}

body .wraper .form_bmi .form-control {
    border-color: #A5D6A7;
    /* Lighter green border for inputs */
}

body .wraper .form_bmi .form-control:focus {
    border-color: #66BB6A;
    /* Darker green on focus */
    box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
}

body .wraper #bmi-result {
    background-color: #ffffff;
    /* White background for results */
    border: 1px dashed #4CAF50;
    /* Dashed green border */
    padding: 20px;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    color: #333;
}

body .wraper #bmi-result p {
    margin-bottom: 5px;
}

body .wraper #bmi-result strong {
    color: #4CAF50;
    /* Green for strong text in results */
    font-size: 1.2rem;
}

body .wraper #bmi-result .text-warning {
    color: #FFC107 !important;
    /* Ensure Bootstrap's warning color is used for BMI */
}

body .wraper #bmi-result .text-success {
    color: #28a745 !important;
    /* Ensure Bootstrap's success color is used for BMI */
}

body .wraper #bmi-result .text-danger {
    color: #dc3545 !important;
    /* Ensure Bootstrap's danger color is used for BMI */
}

body .wraper .form_bmi .btn-primary {
    background-color: #4CAF50;
    /* Green button for BMI */
    border-color: #4CAF50;
    font-weight: bold;
}

body .wraper .form_bmi .btn-primary:hover {
    background-color: #388E3C;
    /* Darker green on hover */
    border-color: #388E3C;
}


/*# sourceMappingURL=app.css.map */