.greeting_container {
    margin-top: 4rem;
    min-height: 90vh;
}

.greeting_section {
    display: flex;
    flex-direction: column;
    height: auto;
}

.greeting {
    display: flex;
}


#greeting, .user_greet, .weclome {
    color: var(--color-primary-font);
    font-size: clamp(1.5rem, 5vw, 3rem);
}

.edit_details {
    color: var(--color-primary-font);
    font-size: clamp(.85rem, 4vw, 1.5rem);
    margin-top: .5rem;
    width: fit-content;
}

.dash_row_one, .dash_row_two {
    display: flex;
    justify-content: space-between;
}

.dash_med_section, .medi_history_section, .past_moods_section, .time_spent_section {
    background: rgba(255, 255, 255, .1);
    border-radius: 10px;
    box-shadow: var(--primary-box-shadow);
    aspect-ratio: 3/2;
    width: 46%;
}

.med_time_graph{
    background: rgba(255, 255, 255, .1);
    border-radius: 10px;
    box-shadow: var(--primary-box-shadow);
    aspect-ratio: 3/1;
    width: 100%;
}


.box_title {
    align-items: center;
    display: flex;
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.box_med_data {
    display: flex;
    justify-content: space-between;
    margin: 1rem 1rem;
}

.box_times h3, .box_mood h3, .box_sound h3{
    color: var(--primary-hover);
    font-size: clamp(1.55rem, 2vw, 2rem);
    text-align: center;
    font-weight: 600;
}

.box_times, .boxed_times, .box_mood, .box_sound, .boxed_sound {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dash_small_btn, .box_moods, .box_sounds {
    background: transparent;
    color: var(--color-primary-font);
    cursor: pointer;
    font-family: 'Gruppo', serif;
    font-size: clamp(1.05rem, 4vw, 1.5rem);
    font-weight: 300;
    text-align: center;
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
    white-space: wrap;

}

.boxed_moods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.time_popup_container{
    aspect-ratio: 3/2;
    background: rgba(71, 48, 160, .95);
    border-radius: 10px;
    box-shadow: var(--primary-box-shadow);
    left: 1;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 1;
    width: clamp(8rem, 9vw, 9%);
}

.great_mood_container,
.good_mood_container,
.meh_mood_container,
.bad_mood_container,
.sound_dashboard_container {
    background: rgba(71, 48, 160, .95);
    border-radius: 10px;
    box-shadow: var(--primary-box-shadow);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: auto;
    left: 1;
    opacity: 0;
    padding: 1rem 1rem;
    pointer-events: none;
    position: fixed;
    top: 1;
}



.time_popup_container.show,
.great_mood_container.show,
.good_mood_container.show,
.meh_mood_container.show,
.bad_mood_container.show,
.sound_dashboard_container.show {
    animation: fadeIn 1s;
    opacity: 1;
    pointer-events: auto;
    -webkit-animation: fadeIn 1s;
    z-index: 100;

}


.time_popup_container button {
    padding: .5rem 1rem;

}


.capured_moods_time {
    align-items: center;
    display: flex;
    justify-content: space-evenly;
    margin-right: .5rem;

}


.captured_moods {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-evenly;
    width: 80%;

}

.captured_sound {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 1.5rem 0;
    width: 98%;

}

.captured_mood {
    background-color: black;
    border: 2px solid black;
    border-radius: 10px;
    box-shadow: var(--secondary-shadow);
    color: var(--color-primary-font);
    cursor: pointer;
    font-size:  clamp(.85rem, 4vw, 1.25rem);
    font-weight: 100;
    opacity: .8;
    padding: .25rem .25rem;
    text-align: center;
    width: clamp(6.75rem, 24vw, 8rem);

}

.captured_dash_sound {
    background-color: black;
    border: 2px solid black;
    border-radius: 10px;
    box-shadow: var(--secondary-shadow);
    color: var(--color-primary-font);
    font-size: clamp(.85rem, 4vw, 1.25rem);
    font-weight: 100;
    opacity: .8;
    padding: .25rem 0;
    text-align: center;
    width: clamp(10rem, 18vw, 55%);
}

.med_box_captured_data {
    margin-top: 2rem;
}

.dash_time_display {
    font-size: clamp(.85rem, 4vw, 1.25rem);
    text-align: center;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

@-webkit-keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}

@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity:0 ;}
}



/* =============== MEDITATION HISTORY SECTION =============== */
.med_dates {
    height: 22rem;
    margin-top: 1rem;
    overflow-y: scroll;

}

.med_date {
    background: var(--color-primary-bg);
    border: 1px solid white;
    border-radius: 10px;
    box-shadow: var(--primary-box-shadow);
    height: auto;
    margin: 1rem 1rem 1rem 1rem;
    padding: 1rem 0 1rem 0;
    position: relative;
    width: 90%;
    z-index: 200;
}

.meditation_history_container {
    display: flex;
    gap: .5rem;
    justify-content: center;

}

.date_time_duration {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    margin-left: 1rem;

}

.date_time_duration span {
    color: var(--primary-hover);
    font-size:clamp(1.15rem, 4vw, 1.25rem);
    font-weight: 600;
}

.date_time_duration h3 {
    font-size: clamp(1.05rem, 5vw, 1.5rem);
}


/* =============== MEDITATION HISTORY SECTION =============== */



/* =============== HOW YOU'VE BEEN FEELING SECTION =============== */

.box_sub_title {
    color: var(--primary-hover);
    font-size: clamp(1.35rem, 4vw, 1.85rem);
    font-weight: 500;
    margin-top: 1rem;
    text-align: center;
}

.past_moods_data {
    display: flex;
    justify-content: space-around;
    margin-top: 2rem;
    padding-bottom: 1rem;
}

.this_week_box h3,
.this_month_box h3,
.this_year_box h3{
    color: var(--primary-hover);
    font-size: clamp(1.35rem, 4vw, 1.85rem);
    font-weight: 600;
    text-align: center;
}

.this_week_moods,
.this_months_moods,
.this_years_moods {
    text-align: left;
}

.this_week_moods li,
.this_months_moods li,
.this_years_moods li {
    font-size: clamp(1.15rem, 4vw, 1.5rem);
    margin-top: 1rem;
}
/* =============== HOW YOU'VE BEEN FEELING SECTION =============== */

/* =============== TIME SPENT MEDITATING SECTION =============== */
.time_spent_med {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    min-height: 85%;

}

.med_this_week,
.med_this_month,
.med_this_year {
    color: var(--primary-hover);
    font-size: clamp(1.35rem, 5vw, 2rem);
    font-weight: 600;
    text-align: center;

}

.years_time,
.weeks_time,
.months_time {
    display: flex;
    font-size: clamp(1.25rem, 4vw, 1.75rem);

}


/* =============== TIME SPENT MEDITATING SECTION =============== */


/* =============== CHART SECTION =============== */
.med_time_graph {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.chart_box {
    background: transparent;
    aspect-ratio: 2/.9;
    margin: 1rem 1rem;
    padding: 20px;
    width: 90%;

}
/* =============== CHART SECTION =============== */




/* =============== CALENDAR SECTION =============== */
/*
.days_meditated {
    aspect-ratio: 1/1;
    background: var(--primary-hover);
    border-radius: 50%;
    opacity: .5;
    width: 1.5rem;
    z-index: 1;
}


.calendar_container {
    background: transparent;
    border: 2px solid white;
    width: 90%;
    border-radius: 10px;
    box-shadow: var(--primary-box-shadow);
    margin: 1rem auto;
}

.calendar_container header {
    align-items: center;
    display: flex;
    padding: 25px 30px 10px;
    justify-content: space-between;
}

header .calendar_navigation {
    display: flex;
}

header .calendar_navigation span {
    height: 1.75rem;
    width: 1.75rem;
    cursor: pointer
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    user-select: none;
    color: #aeabab;
    font-size: 1.5rem;
}

header .calendar_navigation span:last-child {
    margin-right: -10px;
}

header .calendar_navigation span:hover {
    background: #f2f2f2;
}

header .calendar_current_date {
    font-weight: 600;
    font-size: 1.25rem;
}

.calendar_body {
    padding: 20px;
}

.calendar_body ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    text-align: center;

}

.calendar_body .calendar_dates {
    margin-bottom: 10px;
}

.calendar_body li {
    width: calc(100% / 7);
    font-size: 1.10rem;
    color: var( --color-primary-font);
}

.calendar_body .calendar_weekdays li {
    cursor: default;
    font-weight: 500;
}

.calendar_body .calendar_dates li {
    cursor: pointer;
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

.calendar_dates li.inactive {
    color: #c895f5;
}

.calendar_dates li.active {
    color: #fff;
}


.calendar_dates li::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.calendar_dates li.active::before {
    background: #432d6e;
}

.calendar_dates li:not(.active):hover::before {
    background: #e4e1e1;
}



.daily_med_info {
    display: none;
}


.daily_med_info.display {
    display: block;
    height: auto;
    margin-left: -18rem;
    width: 22rem;
}





.daily_information {
    background: var(--color-primary-bg);
    border: 2px solid var(--primary-hover);
    border-radius: 10px;
    box-shadow: var(--primary-box-shadow);
    color: white;
    font-size: 1rem;
    height: auto;
    margin: 1rem 1rem 1rem 1rem;
    padding: 1rem 0 1rem 0;
    position: relative;
    width: 20rem;
    z-index: 200;

}

.daily_information h3 {
    margin-bottom: .5rem;
}

.close_x {
    color: var(--primary-hover);
    font-size: 2rem;
    margin: -.5rem 1rem 0 1rem;
    text-align: right;
    z-index: 999;

}
*/

/* =============== CALENDAR SECTION =============== */