/* =============== MEDIA QUERIES (MEDIUM DEVICES) =============== */
@media screen and (max-width: 1024px){

    /* =============== Meditatation Box =============== */
    .dash_row_one, .dash_row_two {
        align-items: center;
        flex-direction: column;
    }

    .dash_med_section, .medi_history_section, .past_moods_section, .time_spent_section {
        aspect-ratio: 3/2;
        width: 90%;
    }

    .dash_med_section{
        min-height: auto;
    }

    .box_med_data {
        align-items: center;
        flex-direction: column;
    }

    .box_mood {
        width: 100%;
    }

    .boxed_moods {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 2rem;

    }

    .dash_sounds{
        margin-bottom: -.5rem;
    }

    .box_sound{
         margin-bottom: 2rem;
         width: 100%;
    }

    .boxed_sound {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        justify-content: center;
    }

    .box_times{
        width: 100%;
    }

    .boxed_times{
        display: grid;
        grid-template-columns: repeat(2, 50%);
        justify-content: space-evenly;

    }


    .capured_moods_time {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        margin-bottom: 1rem;
        width: 98%;


    }

    .captured_moods {
        display: flex;
        justify-content: space-between;
        margin-bottom: .5rem;
        width: 98%;
    }

    .captured_times{
        display: flex;
        justify-content: center;
    }

    .captured_sound {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 1rem;
        justify-content: space-between;
        padding-bottom: 2rem;

    }

    .great_mood_container,
    .good_mood_container {
        left: 1;
        position: absolute;
        top: 1;
    }

    .meh_mood_container,
    .bad_mood_container,
    .sound_dashboard_container{
        right: 0;
        margin-right: 2rem;
        position: absolute;
        top: 1;
    }

    .time_popup_container{
        right: 0;
        position: absolute;
        margin-right: 2rem;
        top: 50%;
    }

    /* =============== Meditatation Box =============== */


    /* =============== Mood History Box =============== */
    .past_moods_section {
        min-height: auto;
    }

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

    .this_week_box h3,
    .this_month_box h3,
    .this_year_box h3{
        text-align: center;
    }

    .this_week_moods,
    .this_months_moods,
    .this_years_moods {
        margin-bottom: 2rem;
        text-align: left;
    }


    /* =============== Mood History Box =============== */

    /* =============== Spent Meditating Section =============== */
    .time_spent_section {
        min-height: auto;
    }

    .years_time,
    .weeks_time,
    .months_time {
        margin-top: -1rem;
    }

    .years_time {
        margin-bottom: 2rem;
    }

    /* =============== Time Spent Meditating Section  =============== */

        /* =============== CHART SECTION =============== */
    .chart_box {
       height: 50vh;
       width: 90%;

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

}

/* =============== MEDIA QUERIES (SMALL DEVICES) =============== */
@media screen and (max-width: 600px){

    /* =============== Meditatation Box =============== */
    .dash_row_one, .dash_row_two {
        align-items: center;
        flex-direction: column;
    }

    .dash_med_section, .medi_history_section, .past_moods_section, .time_spent_section {
        aspect-ratio: 3/2;
        width: 100%;
    }

    .dash_med_section{
        min-height: auto;
    }

    .box_med_data {
        align-items: center;
        flex-direction: column;
    }

    .box_mood {
        width: 100%;
    }

    .boxed_moods {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 2rem;

    }

    .dash_sounds{
        margin-bottom: -.5rem;
    }

    .box_sound{
         margin-bottom: 2rem;
         width: 100%;
    }

    .boxed_sound {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        justify-content: center;
    }

    .box_times{
        width: 100%;
    }

    .boxed_times{
        display: grid;
        grid-template-columns: repeat(2, 50%);
        justify-content: space-evenly;

    }


    .capured_moods_time {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        margin-bottom: 1rem;
        width: 98%;


    }

    .captured_moods {
        display: flex;
        justify-content: space-between;
        margin-bottom: .5rem;
        width: 98%;
    }


    .captured_times{
        display: flex;
        justify-content: center;
    }
    .captured_sound {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 1rem;
        justify-content: space-between;
        padding-bottom: 2rem;

    }

    .great_mood_container,
    .good_mood_container {
        left: 1;
        position: absolute;
        top: 1;
    }

    .meh_mood_container,
    .bad_mood_container,
    .sound_dashboard_container{
        right: 0;
        margin-right: 2rem;
        position: absolute;
        top: 1;
    }

    .time_popup_container{
        right: 0;
        position: absolute;
        margin-right: 2rem;
        top: 50%;
    }

    /* =============== Meditatation Box =============== */


    /* =============== Mood History Box =============== */
    .past_moods_section {
        min-height: auto;
    }
    .past_moods_data {
        flex-direction: column;
        margin-top: 1rem;
    }

    .this_week_moods,
    .this_months_moods,
    .this_years_moods {
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(2, 45%);
        margin: -.5rem 0 1.25rem 0;
    }

    /* =============== Mood History Box =============== */

    /* =============== Spent Meditating Section =============== */
    .time_spent_section {
        min-height: auto;
    }

    .years_time,
    .weeks_time,
    .months_time {
        margin-top: -1rem;
    }

    .years_time {
        margin-bottom: 2rem;
    }

    /* =============== Time Spent Meditating Section  =============== */

    /* =============== CHART SECTION =============== */
    .chart_box {
       height: 50vh;
       width: 90%;

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

}