@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap');

html,
body{
    /* font-family: 'Roboto', sans-serif; */
    font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Apple Color Emoji", "Arial", sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #fefefe;
    color: #222; 
    margin: 0;
    padding: 0;
}

img{
    width: 100%;
    height: auto;
}

a{
    color: #5a5a5a;
}

hr{
    width: 100%;
}


#main-content{
    display: grid;
    min-height: 100vh;
    box-sizing: border-box;
}

.row{
    display: grid;
}

.row.hide{
    display: none;
}
.row .column{
    /* flex: 1; */
    display: grid;

    max-width: 100vw;
}


#debug_activities{
    /* max-height: 45vh; */
    overflow: scroll;
}

#debug_activities .output{
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #c0c0c0;
    border-radius: 8px;
    overflow: scroll;
}

#filter{
    background:rgb(30 39 46);
    color: #fefefe;
    padding: 10px;
}



#settings{
    background:#ccd5fe;
    color: #222;
    padding: 10px;
    box-sizing: border-box;
}




  /*********************************/
 /*   generic buttons & options   */
/*********************************/

:disabled{
    cursor: not-allowed;
}
button,
select{
    color: #87909e;
    /* border: 1px solid #4f5762; */
    outline: 1px solid #4f5762;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    padding: 0 7px;
    height: 24px;
}
button:not([disabled]):hover,
select:not([disabled]):hover{
    background-color: #4f5762;
    cursor: pointer;
}

button.icon{
    padding: 4px;
    box-sizing: border-box;
    position: relative;
    height: 24px;
    width: 24px;
    outline: transparent;
}

button.icon:hover{
    background-color: #3c414a;
}

button.icon::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #87909e; /* defines the background color of the svg icon */
}

button.prev::after{
    mask: url(../images/icons/arrow-left.svg) no-repeat center / contain;
    -webkit-mask: url(../images/icons/arrow-left.svg) no-repeat center / contain;
}
.navigation button.next::after{
    mask: url(../images/icons/arrow-right.svg) no-repeat center / contain;
    -webkit-mask: url(../images/icons/arrow-right.svg) no-repeat center / contain;

}
button.settings::after{
    mask: url(../images/icons/cog.svg) no-repeat center / contain;
    -webkit-mask: url(../images/icons/cog.svg) no-repeat center / contain;
}


select{
    border-right: 16px solid transparent; /* used to add padding to the right of the dropdown arrow */
}
select.persistent{
    display: none;
}

select#user-select{
    max-width: 180px;
}


  /****************/
 /*   calendar   */
/****************/


#calendar{
    display: grid;
    grid-auto-rows: auto 1fr;
    /* min-height: 600px; */
    height: 100vh;
    /* margin-top: 20px; */

}

#calendar .navbar{
    background-color: #2a2e34;
    color: #f0f1f3;
    display: grid;
    grid-auto-flow: column;
    /* grid-auto-columns: minmax(0, 1fr); */
    padding: 6px 10px;
    grid-gap: 20px;
}
#calendar .navbar .column{
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    grid-gap: 12px;
}
#calendar .navbar .column.left{
    justify-content: flex-start;
}
#calendar .navbar .column.right{
    justify-content: flex-end;
}

#calendar .navbar{
    color: #d5d6d7;
    font-size: 13px;
}

#calendar .navbar .navigation{
    display: flex;
    grid-gap: 10px;
}

#calendar .navbar .navigation .prev-next{
    display: flex;
    grid-gap: 2px;
}

#calendar .navbar .timespan{
    display: grid;
    grid-auto-flow: column;
    grid-gap: 4px;
}
#calendar .navbar .timespan .date{
    display: flex;
    grid-gap: 4px;
}
#calendar .navbar .timespan .year{
    color: #7c7e83
}

#calendar .calendar-view{
    background: #f3f3f3;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    overflow: scroll;
}

#calendar .calendar-view .header{
    border-top: 1px solid #1e272e;
    background-color: #384047;
}

#calendar .calendar-view .header,
#calendar .calendar-view .activities{
        box-sizing: border-box;
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        grid-template-columns: 70px repeat(1, minmax(0, 1fr));    
}

#calendar .calendar-view .activities{
    overflow: scroll;
    padding-bottom: 40px;
    background-color: #1e272e;
}


#calendar .calendar-view .header .days,
#calendar .calendar-view .activities .days{
    box-sizing: border-box;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    /* grid-auto-columns: minmax(0, 1fr); */
    grid-template-columns: repeat(1, minmax(0, 1fr));
    position: relative;
}


#calendar .calendar-view .header .day,
#calendar .calendar-view .activities .day{
    color: #d5d6d7;
    font-size: 13px;
}
#calendar .calendar-view .header .day{
    padding: 10px;  
}

#calendar .calendar-view .header .day{
    border-left: 1px solid #1e272e;
    background-color: #384047;
}
#calendar .calendar-view .header .day.today{
    background-color: #254f99;
}
#calendar .calendar-view .header .day.single-day  {
    /* background-color: green */
}
#calendar .calendar-view .activities{
    /* padding-top: 15px; */
}


  /****************/
 /*   timeline   */
/****************/
#calendar .calendar-view .activities > .timeline{
    position: relative; 
    color: #d5d6d7;
    font-size: 10px;
    text-align: center;

    box-sizing: border-box;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    /* grid-auto-columns: minmax(0, 1fr); */
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-auto-rows: 60px;
}

/* add 00:00 at the top of the timeline (easier to add it in as absolute positioned rather than recalculate the entire timeline to fit the grid)*/
#calendar .calendar-view .activities > .timeline::before{
    content: "00:00";
    height: 0px;
    position: absolute;
    width: 100%;
    top: 3px;
}

/* move hour markings to the bottom of each div */
#calendar .calendar-view .activities > .timeline .hour{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: -4px;
}
    /* move 00:00 last instead so that it matches up with the calendar */
    #calendar .calendar-view .activities > .timeline .hour[data-hour="0"]{
        order: 1;
    }

#calendar .calendar-view .activities .days{
    border-top: 1px solid #323a41;
}

#calendar .calendar-view .activities .days .day{
    background-color: #1e272e;
    border-left: 1px solid #384047;
}

#calendar .calendar-view .activities .days .day .timeline-grid{
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    /* grid-auto-columns: minmax(0, 1fr); */
    grid-template-columns: repeat(1, minmax(0, 1fr));
    height: 100%;
    left: 0;
    right: 0;
    position: absolute;
    grid-auto-rows: 60px;
}
#calendar .calendar-view .activities .day .timeline-grid .hour{
    border-bottom: 1px solid #323a41;
    box-sizing: border-box;
}


#calendar .calendar-view .activities .day.today{
    background-color: #242f37;
}
/* #calendar .calendar-view.week .activities .day.selected{
    background-color: blue;
} */


#calendar .calendar-view .header .day.saturday .date,
#calendar .calendar-view .header .day.sunday .date{
    color: #cd5c5c;
}

#calendar .calendar-view .header .day .date{
    color: #b9bec7;
    font-size: 11px;
    font-weight: 500;
    margin-top: 3px;
}
/* #calendar .calendar-view .header .day:nth-of-type(2){
    background-color: red!important;
} */


  /***************************/
 /*   calendar view modes   */
/***************************/

/* full-week*/
#calendar[data-view-mode="full-week"] .calendar-view{
    /* show all weekdays*/
}

/* weekdays */
    /* show only weekdays */
    /* hide saturday and sunday */
    #calendar[data-view-mode="weekdays"] .calendar-view .header .day.saturday,
    #calendar[data-view-mode="weekdays"] .calendar-view .header .day.sunday,
    #calendar[data-view-mode="weekdays"] .calendar-view .activities .day.saturday,
    #calendar[data-view-mode="weekdays"] .calendar-view .activities .day.sunday{
        display: none;
    }

/* single-day */
#calendar[data-view-mode="single-day"] .calendar-view .header .day:not(.single-day),
#calendar[data-view-mode="single-day"] .calendar-view .activities .day:not(.single-day){
    display: none;
}
#calendar[data-view-mode="single-day"] .timespan .date.to,
#calendar[data-view-mode="single-day"] .timespan .divider{
    display: none;
}