body {
    min-height: 100vh;
}

/* FONTS  */

h1 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 3.25rem;
}

h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 3rem;
}

h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.75rem;
}

h4 {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.875rem;
}

label {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.5rem;
}

.lead {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.75rem;
}

p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.375rem;
}

.paragraph {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.375rem;
}

.microcopy {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.125rem;
}

/* END OF FONT  */

/* NAV  */

.nav-height {
    min-height: 100vh;
}

a.nav-link.active {
    color: #fff;
    background-color: #6c4891 !important;
}

a.nav-link:hover {
    background-color: #9bd2f1 !important;
    color: #6c4891!important;
}

/* NAV END  */

/* BUTTONS  */

.btn-white {
    background-color: #fff;
    color: #4d4d4d;
}

.btn-black {
    background-color: #22252C;
    color: #fff;
}

.btn-green {
    background-color: #66cdaa;
    color: #4d4d4d;
}

.btn-orange {
    background-color: #FF4500;
    color: #fff;
}

.btn-yellow {
    background-color: #f7be1f;
    color: #4d4d4d;
}

.btn-grey {
    background-color: #4d4d4d;
    color: #fff;
}

.btn-blue {
    background-color: #9bd2f1;
    color: #4d4d4d;
}

.btn-brown {
    background-color: #804235;
    color: #fff;
}

.btn-purple {
    background-color: #6c4891;
    color: #fff;
}

.btn-light-grey {
    background-color: #D9D9D9;
    color: #22252C;
}

/* HOVER  */

.btn-white:hover {
    background-color: #4d4d4d;
    color: #fff;
    border: 1px solid #fff;
}

.btn-black:hover {
    background-color: #f7be1f;
    color: #22252C;
    border: 1px solid #22252C;
}

.btn-green:hover {
    background-color: #4d4d4d;
    color: #66cdaa;
    border: 1px solid #66cdaa;
}

.btn-orange:hover {
    background-color: #fff;
    color: #FF4500;
    border: 1px solid #FF4500;
}

.btn-yellow:hover {
    background-color: #4d4d4d;
    color: #f7be1f;
    border: 1px solid #f7be1f;
}

.btn-grey:hover {
    background-color: #fff;
    color: #4d4d4d;
    border: 2px solid #4d4d4d;
}

.btn-blue:hover {
    background-color: #4d4d4d;
    color: #9bd2f1;
    border: 1px solid #9bd2f1;
}

.btn-brown:hover {
    background-color: #fff;
    color: #804235;
    border: 1px solid #804235;
}

.btn-purple:hover {
    background-color: #fff;
    color: #6c4891;
    border: 1px solid #6c4891;
}

.btn-light-grey:hover {
    background-color: #D9D9D9;
    color: #22252C;
    border: 1px solid #22252C;
}

.btn-group-lg>.btn, .btn-lg {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
}

/* BUTTONS END  */

/* BACKGROUND COLOURS  */

.white-bg {
    background-color: #fff;
}

.black-bg {
    background-color: #22252C;
}

.green-bg {
    background-color: #66cdaa;
}

.orange-bg {
    background-color: #FF4500;
}

.yellow-bg {
    background-color: #f7be1f;
}

.grey-bg {
    background-color: #4d4d4d;
}

.blue-bg {
    background-color: #9bd2f1;
}

.brown-bg {
    background-color: #804235;
}

.purple-bg {
    background-color: #6c4891;
}


/* TEXT COLOURS  */

.white-text {
    color: #fff!important;
}

.black-text {
    color: #22252C!important;
}

.green-text {
    color: #66cdaa!important;
}

.orange-text {
    color: #FF4500!important;
}

.yellow-text {
    color: #f7be1f!important;
}

.grey-text {
    color: #4d4d4d!important;
}

.blue-text {
    color: #9bd2f1!important;
}

.brown-text {
    color: #804235!important;
}

.purple-text {
    color: #6c4891!important;
}

/* TEXT END  */

.dot-available {
    height: 2rem;
    width: 2rem;
    background-color: #9bd2f1;
    border-radius: 50%;
    display: inline-block;
}

.dot-confirmed {
    height: 2rem;
    width: 2rem;
    background-color: #66cdaa;
    border-radius: 50%;
    display: inline-block;
}

.dot-tentative {
    height: 2rem;
    width: 2rem;
    background-color: #f7be1f;
    border-radius: 50%;
    display: inline-block;
}

.dot-cancelled {
    height: 2rem;
    width: 2rem;
    background-color: #FF4500;
    border-radius: 50%;
    display: inline-block;
}