// >>-- 38 Calender css start --<<

.app-calendar {
    &.fc-theme-standard{
        th,td{
            border-color: rgba(var(--dark), 0.2);
        }
        border-color: rgba(var(--dark), 0.2);
        .fc-scrollgrid{
           
            border-color: rgba(var(--dark), 0.2);
            border-radius: var(--app-border-radius);
            overflow: hidden;
        }
    }

    .fc-toolbar-title {
        color: rgba(var(--dark), 0.75);
        font-weight: 600;
    }
    .fc-col-header-cell-cushion {
        font-size: 15px;
        color: rgba(var(--dark), 0.75);
        cursor: default;
        padding: 10px 4px;
    }
    .fc-v-event,
    .fc-h-event {
        padding: 0.5rem 0.25rem;
        text-align: center;
        background-color: rgba(var(--primary), 0.1);
        border: 1px solid rgba(var(--primary-dark), 1);
        font-size: 15px;
        .fc-event-main {
            color: rgba(var(--primary), 1);
        }
    }
    .fc-button-primary {
        background-color: rgba(var(--primary), 0.3) !important;
        border-color: rgba(var(--primary), 0.3);
        color: rgba(var(--primary-dark), 1);
        &:active ,&:hover,&:focus-visible {
            border-color: rgba(var(--primary), 0.3) !important;
            color: rgba(var(--primary), 1);
            outline: none !important;
        }
        &:focus {
            box-shadow: none !important;
        }
    }
    .fc-button-active {
        background-color: rgba(var(--primary), 1) !important;
        border: 1px solid rgba(var(--primary), 1) !important;
    }
    .fc-daygrid-event-dot {
        border-color: rgba(var(--primary), 1);
    }
    .fc-popover-header {
        background-color: rgba(var(--primary), 1);
        color: rgba(var(--white),1);
    }
    .fc-daygrid-day {
        .fc-daygrid-day-top {
            a {
                font-size: 13px;
                font-weight: 500;
            }
        }
        &.fc-day-today {
            background-color: rgba(var(--primary), 0.1);
            // border: 1px solid rgba(var(--primary),1);
            .fc-daygrid-day-top {
                a {
                    font-weight: 500;
                    border-radius: 2px;
                    color: rgba(var(--primary-dark),1);
                    background-color: rgba(var(--primary),.3);
                    border: 1px solid rgba(var(--primary-dark),1);
                }
            }
        }
    }

    .fc-list-event-dot {
        border: calc(var(--fc-list-event-dot-width) / 2) solid rgba(var(--primary), 1);
    }
    &.fc{
        .fc-scrollgrid-sync-table,
        .fc-daygrid-body,
        .fc-col-header{
            width: 100% !important;
        }
    }
    .fc-button-group{
        button{
            padding: 0.8rem 0.75rem;
        }
    }
}

@mixin list_event_mixin($name, $color,$light-color: null) {
    $light-color: if($light-color == null, $color, $light-color);
    .event-#{$name} {
        background-color: rgba(#{$color}, 0.3) !important;
        border: 1px solid rgba(#{$light-color}, 1) !important;
        color: rgba(#{$light-color}, 1) !important;
        font-weight: 500;

        .fc-event-main {
            color: rgba(#{$color}, 1) !important;
            text-align: center;
        }
    }
}

@each $name, $color in $colors {
    @include list_event_mixin("#{$name}", map-get($colors, $name), map-get($colors, "#{$name}-dark"));
}

/* Drag and drop css */
.list-event {
    padding: 0.8rem 0.75rem;
    padding-left: 15px;
    cursor: all-scroll;
    margin: 10px 0;
    border-radius: var(--app-border-radius);
    font-size: 16px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.event-container {
    width: 100%;
    height: 350px;
    overflow: hidden;
    .event-box {
        border: 1px solid rgba(var(--dark), 0.2);
        padding: 0.8rem 0.75rem;
        //margin: 0.5rem 1rem;
        border-radius: 10px;
        margin-bottom: 10px;
        border-left: 4px solid rgba(var(--primary), 1);
        background-color: rgba(var(--white),.3);
        p {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        h6 {
            color: rgba(var(--dark), 0.75);
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1920 - 300)));
        }
    }
    .slick-list {
        padding-inline-end: 4px !important;
    }
    .slick-active {
        &.slick-center {
            background-color: rgba(var(--primary),.3);
            box-shadow: var(--box-shadow);
            border-left: 4px solid rgba(var(--primary-dark), 1);
            h6 {
                color: rgba(var(--primary-dark), 1);
            }
            .text-end {
                color: rgba(var(--primary-dark), 1);
            }
        }
    }
}

.calendar-remove-check {
    margin-top: 1rem;
    &.form-check {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        .form-check-input{
            width: 1.5rem;
            height: 1.5rem;
            border: 2px solid rgba(var(--dark), 0.2);
        }
        .form-check-label{
            font-size: 15px;
            font-weight: 500;
            color: rgba(var(--dark), 0.75);
        }
    }
}
// >>-- 38 Calender css end --<<