/*  */ /*               */ /*  */
/*  */ /*               */ /*  */
/*  */ /* Defaults      */ /*  */
/*  */ /*               */ /*  */
/*  */ /*               */ /*  */

/* General              */

#calendar { /* some details */
    display: flex;
    min-height: 100%;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
}

#calendar a { /* padding to events */
    padding: 5px;
    color: black;
    text-decoration: none;
}

#calendar .calendar-main { /* full width calendar */
    flex-grow: 1;
}

#calendar .fc-event i { /* some padding for the event */
    padding-left: 10px;
}

#calendar .fc-event:hover { /* remove default hover gray color*/
    background-color: #D7481F !important;
    border-color: #D7481F !important;
}

/*                      */

/* Buttons              */

#calendar .fc-button { /* some style to header buttons */
    background-color: #D7481F;
    border: none;
    border-radius: 5%;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: block;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    margin: 1px 1px;
    cursor: pointer;
    transition: background-color 0.3s;
    min-width: 52px;
    min-height: 35px; 
}

#calendar .fc-button:hover { /* some style to header buttons */
    background-color: #7610fb;
}

#calendar .fc button .fc-icon { /* position of icon inside header buttons */
    top: 0
}

/*                      */

/*  Calendar Title      */

#calendar .fc-toolbar-title {
    font-weight: bolder;
}

/*                      */

/* Calendar Header TollBar  */

#calendar .fc-header-toolbar { /* header toolbar take full width */
    width: 100%;
}

#calendar .fc-toolbar-chunk:nth-child(1) { /* next previous buttons 25% width */
    display: flex;
    width: 25%;
}

#calendar .fc-toolbar-chunk:nth-child(2) { /* title 50% width */
    display: flex; 
    width: 50%;

    flex-direction: column;
}

#calendar .fc-toolbar-chunk:nth-child(3) { /* view mode 'List' 'Month' 25% width */
    display: flex; 
    width: 25%; 

    align-items: flex-end;
    justify-content: flex-end;
}

#calendar .fc-header-toolbar .fc-button-group { /* to make next previous buttons display on top of eachother */
    display: block;
}

/*                          */

/* Responsiveness           */

#calendar .fc-col-header, #calendar .fc-timegrid-body { 
    width: 100%; 
}

#calendar .content {
    height: 100% !important;
}

#calendar .fc-col-header, .fc-timegrid-body {
    width: 100% !important;
    height: 100% !important;
}

#calendar .fc-scrollgrid-sync-table {
    width: 100% !important;
    height: 100% !important;
}

#calendar .fc-daygrid-body {
    width: 100% !important;
    height: 100% !important;
}

#calendar .fc {
    max-width: 100%;
}

/*                          */

/*  */ /*               */ /*  */
/*  */ /*               */ /*  */
/*  */ /* Month View    */ /*  */
/*  */ /*               */ /*  */
/*  */ /*               */ /*  */

/* Event                */

#calendar .fc-daygrid-day .fc-event, #calendar .fc-day .fc-event { /* write events with white color */
    color: white;
}

#calendar .fc-dayGridMonth-view .fc-day-today { /* show background color for today */
    /* background-color: #3A87AD;
    border-color: #3A87AD; */
}

#calendar .fc-dayGridMonth-view .fc-day-today .fc-daygrid-day-number { /* show day number with white color on current day */
    /* color : white */
}

/*                      */

/*  */ /*  */ /*  */
/*  */ /*  */ /*  */
/*  */ /*  */ /*  */
/*  */ /*  */ /*  */
/*  */ /*  */ /*  */

/*  List View   */

#calendar .fc { /*  */
    height: 100%;
}

#calendar .fc-list-table .fc-event { /* show it on full width */
    position: relative;
    display: revert;
    font-size: 13px;
    line-height: 1.3;
    border-radius: 0px;
    border: none;
}

#calendar .fc-list-table .fc-event, #calendar .fc-list-table .fc-event-dot {
    color: black;
    background-color: white;
}

/*              */

/*  */ /*  */ /*  */
/*  */ /*  */ /*  */
/*  */ /*  */ /*  */
/*  */ /*  */ /*  */
/*  */ /*  */ /*  */

/* Redifinition */

@media screen and (max-width:650px) {

    .fc-toolbar-chunk:nth-child(3) {
        display: flex; /* Make each chunk a flex container */
        flex-direction: column; /* Align children Row */
        text-align: right; /* Align text to the right */
    }
}

/*              */