body {
background-color: #f4f4f4;
font-family: ‘Mukta’, sans-serif;
font-family: ‘Roboto’, sans-serif;
}
.cal-main {
max-width: 960px;
margin: 0 auto;
}
.cal-main h3,
.cal-main h2 {
color: #71afcb;
margin: 0px 0px 20px 0px;
}
.cal-main label {
color: #143651 !important;
font-weight: 500;

}
.cal-main .element:not(.cal-btn) {
padding: 15px;
background: #f4f4f4;
margin-bottom: 10px;
border: 1px solid #ddd;
}

.cal-main .cal-btn {
padding: 15px;
}

.cal-main .element label {
display: inline-block;
margin-bottom: 5px;
min-width: 50%;
vertical-align: top;
font-size: 18px;

}

.cal-main .element label sup {
padding-left: 3px;
}

.cal-main .element label p {
margin: 0px;
font-size: 11px;
background-color: #143651;
padding: 2px 10px;
display: inline-block;
color: #fff;
float: left;
border-radius: 3px;
margin-top: 5px;

}

.cal-main .element label span {
display: block;

}

.cal-main .element input[type=number] {
padding: 10px;
border: 0px;
border-radius: 3px;
min-height: 20px;
font-weight: 600;
font-size: 16px;
outline: 0;
float: right;
width: 100px;
text-align: center;

}

.cal-inner {
padding: 25px;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif;
line-height: 1.5;
color: #8c8f94;
background: #fff;
border: 1px solid #dcdcde;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
overflow: auto;
zoom: 1;
}

.cal-main button.cal {
background-color: #143651;
padding: 10px 20px;
font-family: museo-slab;
font-size: 20px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: .67px;
color: #fff;
width: -webkit-fit-content;
width: fit-content;
cursor: pointer;
border: none;
border-radius: 0;
box-shadow: none;
transition: background-color .15s linear;
}

.cal-main button.cal:hover {
background-color: #04A4CC;
}

.cal-main #result_data {
display: block;
font-size: 28px;
color: #fff;
margin: 10px;
}

.cal-main .result {
text-align: center;
background: #143651 !important;
color: #fff !important;
}

.cal-main .result h1 {
color: #71afcb !important;
}

@media only screen and (min-width: 769px) {

.cal-main .input-box {
display: flex;
align-items: center;
max-width: 300px;
background: #fff;
border-bottom: 2px solid #04A4CC !important;
border: 0px;
border-radius: 4px;
padding-left: 0.5rem;
overflow: hidden;
font-family: sans-serif;
float: right;
}

.cal-main .input-box .prefix {
font-weight: 100 !important;
font-size: 16px;
color: #000;
}

.cal-main .input-box input {
flex-grow: 1;
font-size: 14px;
background: #fff;
border: none;
outline: none;
padding: 0.5rem;
}
.cal-main .input-box:focus-within {
border-color: #777;
}

}

@media only screen and (max-width: 768px) {

.cal-main .element label {
display: block;
min-width: 100%;
font-size: 16px;
margin-bottom: 38px;
}

.cal-main .input-box {
display: block;
width: 100%;
}

.cal-main .cal-main .element input[type=number] {
float: none;
}

.cal-main .result h1 {
color: #71afcb !important;
font-size: 16px;
}
}

function cal_clc() {
var rental_rate_elem = document.getElementById(‘rental_rate’);
var maintenance_elem = document.getElementById(‘maintenance’);
var area_elem = document.getElementById(‘area’);
var rental_rate = parseFloat(rental_rate_elem.value);
var maintenance = parseFloat(maintenance_elem.value);
var area = parseFloat(area_elem.value);

rental_rate_elem.style.border = ”;
maintenance_elem.style.border = ”;
area_elem.style.border = ”;

if (isNaN(rental_rate) || rental_rate < 0 || !Number.isInteger(rental_rate * 100)) {
rental_rate_elem.style.border = '2px solid red';
rental_rate_elem.focus();
return;
}

if (isNaN(maintenance) || maintenance < 0 || !Number.isInteger(maintenance * 100)) {
maintenance_elem.style.border = '2px solid red';
maintenance_elem.focus();
return;
}

if (isNaN(area) || area < 0 || !Number.isInteger(area * 100)) {
area_elem.style.border = '2px solid red';
area_elem.focus();
return;
}

var result = (rental_rate + maintenance) * area;
document.getElementById("result").style.display = "block";
var formattedResult = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(result);
document.getElementById('result_data').innerHTML = formattedResult;

}

function calculateOnChange() {
cal_clc();
}

document.getElementById('rental_rate').addEventListener('input', calculateOnChange);
document.getElementById('maintenance').addEventListener('input', calculateOnChange);
document.getElementById('area').addEventListener('input', calculateOnChange);