/*
    for:
    AvailabilityCalender.html
*/
.container-sizing{
    width: 700px;
    height: max-content;
    border: 1px solid gray;
    box-shadow: 5px 7px 7px gray;
    padding: 10px;
    margin: auto;


    .fc-toolbar-title {
        font-weight: bolder !important;
        color: #032f48;
    }

    .fc-button {
        background-color: rgba(3, 47, 72, 0.9) !important;
    }

    .fc-button-active {
        background-color: #032f48 !important;
    }

    a {
        text-decoration-line: none !important;
        cursor: pointer !important;
        color: #032f48;
        transition: all .2s ease-in-out;

        &:hover {
            color: rgba(3, 47, 72, 0.6);
        }
    }

    .fc-theme-standard .fc-dayGridMonth-view {

        table {
            border-top: none !important;
            border-left: none !important;
        }

        th {
            border-bottom: 2px solid #032f48 !important;
            border-top: none !important;
            border-right: none !important;
            border-left: none !important;
        }
    }

    .fc-timegrid-slot-label-cushion, .fc-timegrid-axis-cushion {
        font-weight: bold;
    }

    .fc-event-main-frame .fc-event-time {
        font-weight: bold;
        white-space: wrap;
    }

    .fc-event {
        &:hover {
            color: #032f48;
        }
    }

    .fc-more-link {
        width: 100%;
        font-weight: bold;
    }
}

.calender-container {
    max-width: 1000px;

    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(46, 43, 43, 0.3);
        border-radius: 20px;
    }
}

.legend-text {
    vertical-align: super;
}

@media only screen and (max-width: 600px) {
    .container-sizing{
        width: 400px;
        height: 500px;
        padding: 10px;
    }

    .fc .fc-toolbar-title{
        font-size: 20px;
    }

    .fc-button-group, .fc .fc-button-primary {
        font-size: 10px;
    }

    .fc-daygrid-day {
        height: 70px;
    }
    
    .fc {
        height: 430px;
    }

    .calender-container {
        height: auto;
    
        ::-webkit-scrollbar {
            width: 5px;
        }

    }
}