/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.1.1.1735060027
Updated: 2024-12-24 17:07:07

*/

/* General Form Styling */
#bmr-calculator {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Input Fields and Select Fields */
#bmr-calculator input[type="number"],
#bmr-calculator select,
#bmr-calculator input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    background-color: rgba(32, 32, 32, 0.1); /* Dark grey transparent background */
    border: none;
    border-radius: 4px; 
    font-size: 16px;
    font-family: inherit; 
    color: #4845A9; 
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Soft inner shadow */
}

/* Add shadow effect on focus */
#bmr-calculator input[type="number"]:focus,
#bmr-calculator select:focus,
#bmr-calculator input[type="text"]:focus {
    background-color: rgba(32, 32, 32, 0.15); 
    outline: none;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
}

/* Calculate Button Styling */
#bmr-calculator button {
    background-color: #4845A9; 
    color: #ffffff;
    padding: 10px 15px;
    width: 100%;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Button Hover State */
#bmr-calculator button:hover {
    background-color: #6a68d1;
}

/* Centered Result Text Styling */
#bmr-result {
    text-align: center;
    color: #4845A9;
    font-size: 16px;
    margin: 10px 0;
}

/* ========================================================== */

/* General Form Styling */
#bmr-calculator-moms {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Input Fields and Select Fields */
#bmr-calculator-moms input[type="number"],
#bmr-calculator-moms select,
#bmr-calculator-moms input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    background-color: rgba(32, 32, 32, 0.1); /* Dark grey transparent background */
    border: none;
    border-radius: 4px; 
    font-size: 16px;
    font-family: inherit; 
    color: #4845A9; 
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Soft inner shadow */
}

/* Add shadow effect on focus */
#bmr-calculator-moms input[type="number"]:focus,
#bmr-calculator-moms select:focus,
#bmr-calculator-moms input[type="text"]:focus {
    background-color: rgba(32, 32, 32, 0.15); 
    outline: none;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
}

/* Calculate Button Styling */
#bmr-calculator-moms button {
    background-color: #4845A9; 
    color: #ffffff;
    padding: 10px 15px;
    width: 100%;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Button Hover State */
#bmr-calculator-moms button:hover {
    background-color: #6a68d1;
}

/* Centered Result Text Styling */
#bmr-moms-result {
    text-align: center;
    color: #4845A9;
    font-size: 16px;
    margin: 10px 0;
}