/* roi-style.css */

#roi-calculator-plugin {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 100% !important;
}

#roi-calculator-plugin input[type="number"],
#roi-calculator-plugin input[type="range"] {
    width: 100%;
    margin: 10px 0;
}

#roi-calculator-plugin button {
    background-color: #4aacda;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

#roi-calculator-plugin button:hover {
    background-color: #0091d4;
}

/* Calculate Total Costs */

#total-costs-calculator-plugin {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    max-width: 400px;
    margin: 0 auto;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

#total-costs-calculator-plugin input[type="number"],
#total-costs-calculator-plugin input[type="range"] {
    width: 100%;
    margin: 10px 0;
}

#total-costs-calculator-plugin button {
    background-color: #4aacda;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

#total-costs-calculator-plugin button:hover {
    background-color: #0091d4;
}

#roi-calculator-plugin h3 {
    text-align: center;
    color: #fff;
    background: linear-gradient(58deg, #4aacda, #093747);
    padding: 10px;
    border-radius: 5px;
    border-bottom: 5px solid rgb(74 172 218);
}

p#roi-result {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: #093747;
    margin-top: 20px;
    margin-bottom: 5px;
}