calendar-demo {
    .example.calendar-demo {
        padding: 20px;
        display: flex;
        flex-direction: row;

        > * {
            padding: 20px;
        }

        > calendar {
            background: rgba(0, 0, 0, .35);
        }

        novo-form {
            flex: 1;
        }
    }

    .example.demo {
        padding: 20px;
        // background: rgba(0, 0, 0, .45);
        background: $mint;

        timeselect {
            margin: 0 auto;
        }

        novo-calendar-date-change {
            padding: 1px;
        }

        novo-tiles {
            float: right;
        }

        .cal-demo-content {
            max-height: 400px;
            overflow-y: scroll;
        }
    }

    .example.side-by-side-demo {
        padding: 20px;
    }
}

.calendar-demo-date-time,
.calendar-demo-side-by-side {
    display: flex;
    align-items: center;
    flex-flow: row wrap;

    > p {
        flex: 1;
        color: #fff;

        > label {
            margin-top: 15px;
            display: block;
            @extend .caption;
            font-size: 0.9em;
        }
    }

     > novo-time-picker,
    > novo-date-picker {
        margin-right: 5px;

        &:last-child {
            margin-right: 0;
        }
    }
}

.availability {
    .calendar-cell.calendar-day-accepted {
        background: $success !important;
        i, .calendar-day-number {
            color: $white;
        }
    }

    .calendar-cell.calendar-day-rejected {
        background: $negative !important;
        i, .calendar-day-number {
            color: $white !important;
        }
    }
}

.calendar-day-available,
.calendar-day-not-available {
    text-align: center;
}