@import url("icons/_icons.css");
@import url("forms/_modals.css");

* {
    font-family: 'Raleway' !important;
    font-variant-numeric: lining-nums;
    font-weight: 500;
}

body {
    --color-primary-element: #70B62B !important;
    --color-primary-element-hover: #6faf2e !important;
    --color-primary-element-light-hover: #ffffff !important;
    --color-primary-element-light: #70B62B1A !important;
    --color-primary-element-light-text:#000 !important;

    & #content-vue.app-calendar {

        & .app-navigation {
            background-color: transparent;

            & .app-navigation-toggle-wrapper {
                top: 0px !important;
            }

            & .app-navigation__content {

                & .app-navigation-header {
                    padding: 0;
                    margin-bottom: var(--main-margin-panels);

                    & .datepicker-button-section {
                        & button {
                            height: 36px;
                            background-color: #ffffff;
                            border-color: var(--backgroud-color-main-darkgray);
                            border-width: 2px;
                            margin-bottom: var(--main-margin-panels) !important;

                        }

                    }

                    & .new-event-today-view-section {
                        gap: var(--main-margin-panels);

                        &>.button.new-event.button-vue.button-vue--vue-primary {
                            width: 90px
                        }

                        &>button {
                            height: 36px;
                            width: 110px;
                            border: none;
                            margin: 0 0 0 0 !important;

                            & .button-vue__icon {
                                width: 16px;
                                height: 16px;
                                min-width: 0;
                                min-width: 0;
                                margin-right: 2px;
                            }
                        }

                        & button:nth-child(2) {
                            background-color: #ffffff;
                        }

                        &>div,
                        >div>div {
                            height: 36px;
                            background-color: #ffffff;
                            border-radius: 8px;

                            & .material-design-icon.view-module-icon>svg {
                                display: none;
                            }

                            & .material-design-icon.view-module-icon::before {
                                background-image: url("/themes/forbion/images/calendar/grid-icon-gray.svg") !important;
                                content: '';
                                width: 16px;
                                height: 16px;
                                background-size: contain;
                                background-repeat: no-repeat;
                                background-position: center;
                            }
                        }
                    }
                }

                & .app-navigation-list.app-navigation__list {
                    background-color: #ffffff;
                    border-top-left-radius: 8px;
                    border-top-right-radius: 8px;
                    padding: 0;
                }

                & .app-navigation-entry-wrapper.navigation-calendar-settings {
                    background-color: #ffffff;
                    border-bottom-left-radius: 8px;
                    border-bottom-right-radius: 8px;
                    padding: 0;
                }

                & button.button-vue.button-vue--vue-tertiary .material-design-icon.plus-icon svg path {
                    color: #808080;
                }

            }
        }

        & #app-content-vue {
            background-color: #ffffff;
            border-radius: 8px;
            overflow-x: hidden;

            & .fc-scrollgrid-section.fc-scrollgrid-section-header .fc-scroller-harness .fc-scroller {
                overflow: hidden !important;
            }

            & .fc-scrollgrid-section.fc-scrollgrid-section-body:nth-child(1) .fc-scroller-harness .fc-scroller {
                overflow: hidden !important;
            }

            & .fc-dayGridMonth-view {
                & table.fc-scrollgrid thead {

                    & .fc-col-header-cell.fc-day {
                        background-color: #c4c0c0;
                    }

                }
            }

            & .calendar-wrapper .app-navigation-toggle-wrapper {
                top:7px !important;
                margin-left: 4px;

                & button.toggle-button {
                    background-color: #70B62B !important;
                    width: 40px !important;
                    height: 40px !important;


                    & .material-design-icon.playlist-check-icon svg {
                        display: none;
                    }

                    & .material-design-icon.playlist-check-icon::before {
                        background-image: url("/themes/forbion/images/calendar/list-toggle-white.svg") !important;
                        content: '';
                        width: 20px;
                        height: 20px;
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: center;
                    }

                    
                }
            }

            & .fc-multiMonthYear-view {
                padding: 16px;

                & .fc-multimonth-month {
                    & .fc-multimonth-header {
                        background-color: #F5F5F5;
                        border-top-left-radius: 8px;
                        border-top-right-radius: 8px;


                        .fc-multimonth-header-table th,
                        .fc-multimonth-header-table td {
                            border: 1px solid #F5F5F5 !important;
                        }
                    }

                    & .fc-multimonth-daygrid-table tbody {
                        border-bottom-right-radius: 8px;
                        border-bottom-left-radius: 8px;
                    }

                    & .fc-multimonth-daygrid {

                        & .fc-multimonth-daygrid-table {
                            border-collapse: separate !important;
                            border-spacing: 0 !important;
                        }


                        & .fc-multimonth-daygrid-table th,
                        .fc-multimonth-daygrid-table td {
                            border: 4px solid #F5F5F5 !important;
                            border-radius: 8px;

                            & .fc-daygrid-day-frame {

                                & .fc-daygrid-day-top {
                                    justify-content: center;
                                }
                            }


                        }

                        & .fc-day-today .fc-daygrid-day-top .fc-daygrid-day-number {
                            width: 20px !important;
                            height: 18px !important;
                        }

                        & .fc-multimonth-daygrid-table {
                            background-color: #F5F5F5;
                        }

                        & .fc-multimonth-daygrid-table td {
                            border-radius: 12px !important;
                            background-color: #ffffff;
                        }

                        & td.fc-day-disabled {
                            background-color: #F5F5F5 !important;
                        }
                    }
                }
            }

            & table {

                width: 100% !important;

                & colgroup col {
                    width: 80px !important;
                }

                & thead {
                    & a.fc-col-header-cell-cushion {
                        font-size: 22px;
                        margin-bottom: 8px;
                        color: black !important;
                    }

                    & th.fc-col-header-cell.fc-day.fc-day-today {
                        background-color: #70B62B1A;

                        & a.fc-col-header-cell-cushion {
                            background-color: transparent;
                            font-weight: 500;

                        }
                    }
                }

                & tbody {

                    & .fc-timegrid-axis-frame {
                        justify-content: flex-start !important;
                    }

                    & .fc-timegrid-slot-label-frame.fc-scrollgrid-shrink-frame {
                        display: flex;
                        justify-content: center;
                    }

                    & td.fc-day {
                        & .fc-daygrid-day-top {
                            justify-content: end;
                        }
                    }

                    & .fc-timegrid-col-events {
                        & .fc-timegrid-event-harness.fc-timegrid-event-harness-inset>a {
                            background-color: #70B62B1A !important;
                            margin-inline-end: 0;
                            border: none;

                            & .fc-event-main-frame {
                                font-weight: 500;
                                font-size: 14px;
                                line-height: 20px;
                                color: #000;
                            }
                        }
                    }
                }
            }
        }

        & #app-sidebar-vue {
            border-radius: 8px;
        }
    }
}