.time-input-container {
    position: relative;
    display: inline-block;
}

.time-placeholder {
    position: absolute;
    left: 10px; /* Adjust based on your input's styling */
    top: 50%;
    transform: translateY(-50%);
    color: #aaa; /* Placeholder text color */
    pointer-events: none;
}

input[type="time"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-am-pm-field {
    color: transparent;
}

input[type="time"]:focus + .time-placeholder,
input[type="time"]:valid + .time-placeholder {
    display: none;
}
.sleep-time-calculator {
  border: 2px solid #000;
    padding: 10px;
    margin: 10px;
    background-color: transparent;
    width: calc(100% - 24px);
    box-sizing: border-box;
    border-radius: 10px;
    position: relative; /* Added so the ::before pseudo-element is positioned relative to this box */
    text-align: center; /* Centers the content inside */

}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}