/* Container for Activity Level and Phase Bar */
.activity-level-container {
    padding: 0;
    margin-bottom: 10px;
    width: 100%;
}

.activity-level-bar {
    display: flex;
    width: 100%;
    height: 30px;
    border-bottom: 1px solid #ccc;
}

.activity-level {
    height: 100%;
    color: #fff;
    text-align: center;
    font-size: 0.9em;
    line-height: 30px;
}



/* Phases Container for phases and timeline */
.phases-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Timeline styling specific to phases only */
.timeline {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
    height: 20px;
    position: relative;
}


.phase-bar {
    display: flex;
    width: 100%;
    height: 30px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.phase-bar .phase {
    height: 100%;
}

/* Farger for forskjellige faser */
.night { background-color: #000; }
.astronomical-twilight { background-color: #1a1a66; }
.nautical-twilight { background-color: #2d2d87; }
.civil-twilight { background-color: #4040b0; }
.daylight { background-color: #ffeb3b; color: #000; }

.time-label {
    position: absolute;
    bottom: 0;
    color: #333;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 0.8em;
}

.time-label::before {
    content: '';
    display: block;
    width: 1px;
    height: 10px;
    background-color: #333;
    margin: 0 auto;
}

/* Adjust position of each label based on percentage of 24 hours */
.time-00 { left: 0; }
.time-02 { left: 8.33%; }
.time-04 { left: 16.66%; }
.time-06 { left: 25%; }
.time-08 { left: 33.33%; }
.time-10 { left: 41.66%; }
.time-12 { left: 50%; }
.time-14 { left: 58.33%; }
.time-16 { left: 66.66%; }
.time-18 { left: 75%; }
.time-20 { left: 83.33%; }
.time-22 { left: 91.66%; }

/* Timeline over Activity Level Bar */
.activity-timeline {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    height: 20px;
    margin-top: 10px;
    border-bottom: 1px solid #ccc;
}

.activity-timeline .time-label {
    position: absolute;
    bottom: 0;
    font-size: 12px;
    color: #333;
}

.time-0 { left: 0%; }
.time-2 { left: 8.33%; }
.time-4 { left: 16.66%; }
.time-6 { left: 25%; }
.time-8 { left: 33.33%; }
.time-10 { left: 41.66%; }
.time-12 { left: 50%; }
.time-14 { left: 58.33%; }
.time-16 { left: 66.66%; }
.time-18 { left: 75%; }
.time-20 { left: 83.33%; }
.time-22 { left: 91.66%; }