app.scss

@import './variables.scss';
@import '~bootstrap';
@import '~bootstrap-vue';

@import 'alert';

* {
    outline: 0px #336699 solid;
}

.navbar {
    padding: 0 !important;
}

.navbar-brand {
    padding-top: 0 !important;
    //padding-bottom: 0 !important;
}

.nav-link {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.navbar-text {
    //margin-top: 0.4rem;
    //margin-bottom: 0.4rem;
    padding-top: 0.85rem;
}

.nav-link:hover {
    background-color: #c40d1e;
    color: #fff !important;
}

.page-enter-active, .page-leave-active {
    transition: opacity 0.2s, transform 0.2s;
}
.page-enter, .page-leave-to {
    opacity: 0;
    transform: translateX(-30%);
}

button.time-slot {
    border: 0;
    font-size: 0.8rem;
    padding: 0.5rem;
    width: 5rem;
}

.time-slot-status-available {
    background-color: lightgreen;
    color: #000;
}

.time-slot-status-available:hover {
    background-color: darkgreen;
    color: #fff;
}

.time-slot-status-unavailable {
    background-color: lightgrey;
    color: #000;
}

.time-slot-status-full {
    background-color: red;
    color: #fff;
}

.time-slot-status-user-booked {
    background-color: dodgerblue;
    color: #fff;
}

.time-slot-count {
    font-size: 1.5rem;
    font-weight:bold;
}