/*=====================
  3.2  calender CSS start
==========================*/
.mbsc-font {
    font-family: "GT Walsheim Pro" !important;
}

.mbsc-datepicker {
    width: 100%;
    margin-top: 30px !important;
    background-color: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    z-index: 1 !important;

    &.mbsc-datepicker-control-calendar {
        .mbsc-datepicker-tab-wrapper {
            width: 100%;
            display: block;
            background-color: rgba(var(--white), 1);
            border-radius: 10px;
            border: 1px solid rgba(var(--line-color), 1);

            .mbsc-datepicker-tab-calendar {
                box-shadow: 0px 4px 20px 0px rgba(var(--title-color), 0.06);

                .mbsc-calendar {
                    padding-bottom: 0;
                    background: rgba(var(--white), 1);

                    .mbsc-calendar-wrapper {
                        border-radius: 10px;

                        .mbsc-calendar-header {
                            position: relative;
                            margin-bottom: 6px;

                            .mbsc-calendar-controls {
                                .mbsc-calendar-title-wrapper {
                                    .mbsc-calendar-button {
                                        position: absolute;
                                        left: 50%;
                                        transform: translateX(-50%);

                                        .mbsc-calendar-title {
                                            font-weight: 500;
                                            color: rgba(var(--title-color), 1);
                                        }
                                    }
                                }

                                .mbsc-calendar-button-prev {
                                    position: absolute;
                                    left: 0;
                                }

                                .mbsc-calendar-button-prev,
                                .mbsc-calendar-button-next {
                                    color: rgba(var(--title-color), 1);
                                }
                            }
                        }

                        .mbsc-calendar-body {
                            .mbsc-calendar-slide {
                                padding-bottom: 8px;
                                background: rgba(var(--white), 1);
    
                                .mbsc-calendar-table {
                                    // gap: 8px;
                                    height: 100%;

                                    .mbsc-calendar-week-days {
                                        .mbsc-calendar-week-day {
                                            font-weight: 400;
                                            font-size: 16px !important;
                                            color: rgba(var(--content-color), 1);
                                        }
                                    }

                                    .mbsc-calendar-row {
                                        .mbsc-calendar-cell {
                                            background: rgba(var(--white), 1);

                                            &:hover {
                                                .mbsc-calendar-cell-inner {
                                                    height: 100%;

                                                    .mbsc-calendar-cell-text {
                                                        color: rgba(var(--theme-color), 1) !important;
                                                    }
                                                }
                                            }

                                            :not(.mbsc-calendar-cell-inner) {
                                                >div {
                                                    visibility: hidden;
                                                }
                                            }

                                            .mbsc-calendar-cell-inner {
                                                width: 100%;
                                                height: 100%;
                                                display: flex;
                                                align-items: center;
                                                justify-content: center;

                                                &.mbsc-calendar-month-inner {
                                                    .mbsc-calendar-month-text {
                                                        height: 100%;
                                                    }
                                                }

                                                &.mbsc-calendar-year-inner {
                                                    .mbsc-calendar-year-text {
                                                        height: 100%;
                                                    }
                                                }

                                                .mbsc-calendar-cell-text {
                                                    width: 100%;
                                                    padding: 6px;
                                                    margin: 0;
                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: center;
                                                    line-height: unset;
                                                    color: rgba(var(--title-color), 1);
                                                    background-color: rgba(var(--box-bg), 1);
                                                    border: none;
                                                    border-radius: 6px;
                                                }
                                            }

                                            &.mbsc-selected {
                                                .mbsc-calendar-cell-text {
                                                    padding: 6px;
                                                    margin: 0;

                                                    border: none;
                                                    border-radius: 6px;

                                                    &.mbsc-calendar-today {
                                                        color: rgba(var(--white), 1) !important;
                                                        background-color: rgba(var(--theme-color), 1);
                                                    }
                                                }
                                            }

                                            &.mbsc-calendar-day-outer {
                                                &:hover {
                                                    .mbsc-calendar-cell-inner {
                                                        .mbsc-calendar-cell-text {
                                                            transform: scale(1);
                                                            color: rgba(var(--title-color), 0.5) !important;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    &.mbsc-datepicker-control-time {
        .mbsc-picker-header {
            font-weight: 500;
            color: rgba(var(--title-color), 1);
            background-color: rgba(var(--white), 1);
            border-bottom: 1px solid rgba(var(--line-color), 1);
            border-radius: 10px 10px 0 0;
        }

        .mbsc-datepicker-tab-wrapper {
            border-radius: 0 0 10px 10px;

            .mbsc-datepicker-tab {
                .mbsc-scroller {
                    background: rgba(var(--white), 1);

                    .mbsc-scroller-wheel-group-cont {
                        .mbsc-scroller-wheel-line {
                            background-color: rgba(var(--box-bg), 1);
                            z-index: 0;
                        }

                        .mbsc-scroller-wheel-group {
                            .mbsc-scroller-wheel-wrapper {
                                .mbsc-scroller-wheel {
                                    .mbsc-scroller-wheel-cont {
                                        .mbsc-scrollview-scroll {
                                            .mbsc-scroller-wheel-item {
                                                text-align: center;
                                                padding: 0;
                                                color: rgba(var(--content-color), 1);
                                                font-weight: 400;

                                                &:hover {
                                                    color: rgba(var(--theme-color), 1);
                                                    background-color: transparent;
                                                }

                                                &.mbsc-selected {
                                                    color: rgba(var(--theme-color), 1);
                                                    background-color: transparent;
                                                    font-weight: 500;
                                                }
                                            }
                                        }
                                    }

                                    .mbsc-scroller-bar-cont {
                                        display: none;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .mbsc-scroller-wheel-item {
            >div {
                >div {
                    visibility: hidden;
                }
            }

            &.mbsc-selected {
                color: rgba(var(--title-color), 1);
                border-radius: 0;
                background-color: rgba(var(--box-bg), 1);
            }
        }
    }
}

.mbsc-datepicker {

    // width: 100%;
    // margin-top: 30px;
    .mbsc-datepicker-tab-wrapper {
        width: 100%;

        .mbsc-datepicker-tab {
            .mbsc-calendar {
                .mbsc-calendar-wrapper {
                    .mbsc-calendar-header {
                        position: relative;

                        .mbsc-calendar-controls {
                            .mbsc-calendar-title-wrapper {
                                .mbsc-calendar-button {
                                    position: absolute;
                                    left: 50%;
                                    transform: translateX(-50%);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}