.segment-sleep          { background-color: #607d8b; }  /* Blue Gray */
.segment-work           { background-color: #ff9800; }  /* Orange */
.segment-intern         { background-color: #d2691e; }  /* Chocolate */
.segment-classHours     { background-color: #8e24aa; }  /* Deep Purple */
.segment-studying       { background-color: #43a047; }  /* Dark Green */
.segment-commute        { background-color: #9c27b0; }  /* Purple */
.segment-eating         { background-color: #795548; }  /* Brown */
.segment-organizations  { background-color: #00bcd4; }  /* Cyan */
.segment-recreation     { background-color: #03a9f4; }  /* Light Blue */
.segment-exercise       { background-color: #e91e63; }  /* Pink */
.segment-selfcare       { background-color: #f44336; }  /* Red */
.segment-chores         { background-color: #8bc34a; }  /* Light Green */
.segment-other          { background-color: #ffc107; }  /* Amber */

.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.credits-margin {
    margin-bottom: 4em;
}

.input-group label {
    margin-left: 10px;
}

.input-group input[type="number"] {
    width: 70px;
    padding: 4px;
}

#remaining, #total {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

#warning {
    font-size: 18px;
    font-weight: bold;
    color: red;
    height: 24px;
    visibility: hidden;
    margin-bottom: 20px;
}

#clearBtn {
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 5px;
    border: 3px solid var(--ewu-red);
    background-color: var(--ewu-red);
    color: var(--ewu-white);
}

#clearBtn:hover {
    border-color: var(--contrast);
    background-color: var(--ewu-white);
    color: var(--contrast);
}

.progress-container {
    max-width: 400px;
    background-color: #eee;
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    border: 2px black solid;
}

.progress-breakdown {
    display: flex;
    height: 100%;
    width: 100%;
}

.progress-segment {
    height: 100%;
    transition: width 0.3s ease;
}

.tooltip {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    white-space: normal;
    max-width: 300px;
    word-wrap: break-word;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

label span {
    border-radius: 10px;
    font-weight: bold;
    font-size: small;
    padding: 0 10px;
}