/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

/* Container styles */
.container {
    background-color: #fff;
    border-radius: 5px;
    padding: 20px;
    margin: 20px;
}

/* Page Title styles */
.page-title {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

/* Form Container styles */
.form-container {
    margin: 0 auto;
    max-width: 400px;
}

/* Form Group styles */
.form-group {
    margin-bottom: 15px;
}

/* Label styles */
label {
    font-weight: bold;
    display: block;
}

.required-label::after {
    content: " *";
    color: red;
}

/* Input and Select styles */
.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Calculate Button styles */
.calculate-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
}

.calculate-btn:hover {
    background-color: #0056b3;
}

/* Notes styles */
.notes {
    margin-top: 20px;
}

/* List styles */
ul {
    list-style-type: disc;
    margin-left: 20px;
}
/* Container styles with a black background */
.container {
    background-color: #000;
    color: #fff; /* Text color on a black background */
    border-radius: 5px;
    padding: 20px;
    margin: 20px;
}
/* Notes styles with a white background */
.notes {
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    color: #000; /* Text color on a white background */
}

/* List styles */
ul {
    list-style-type: disc;
    margin-left: 20px;
}
<div class="form-group">
    <label for="timingOutputMinutes">Time (Minutes):</label>
    <input type="text" id="timingOutputMinutes" class="form-control" readonly>
</div>
<div class="form-group">
    <label for="timingOutputSeconds">Time (Seconds):</label>
    <input type="text" id="timingOutputSeconds" class="form-control" readonly>
</div>
<!-- Add the horizontal line below the Calculate Timing button -->
<hr>
/* Add a blank line below the "Calculate Timing" button */
.calculate-btn {
    margin-bottom: 20px; /* Adjust the value to control the space */
}
.form-group::before {
    content: "";
    background-image: url('./faucet-icon.svg.svg'); /* C:\Users\siddh\OneDrive\Desktop\SIDDHARTH\Green Card Prep\Online software\Hot water return timing */
    display: inline-block;
    width: 24px; /* Adjust the size as needed */
    height: 24px;
    margin-right: 10px;
}

.form-group
{
    background-image: url('./faucet.svg'); /* C:\Users\siddh\OneDrive\Desktop\SIDDHARTH\Green Card Prep\Online software\Hot water return timing */
}