@font-face {
    font-family: 'Inter-Bold';
    src: url('/public/font/Inter-Bold.ttf');
}

@font-face {
    font-family: 'Inter-SemiBold';
    src: url('/public/font/Inter-SemiBold.ttf');
}

@font-face {
    font-family: 'Inter-Regular';
    src: url('/public/font/Inter-Regular.ttf');
}

@font-face {
    font-family: 'Inter-ExtraBold';
    src: url('/public/font/Inter-ExtraBold.ttf');
}

@font-face {
    font-family: 'Inter-Medium';
    src: url('/public/font/Inter-Medium.ttf');
}

body {
    background-color: black;
    color: white;
    font-family: 'Inter-SemiBold';
}

hr{
    background-color: white;
    border: 2px solid white;
}

form{
    font-family: 'Inter-Regular';
    color: black;
}

input[type=image]{
    width: 100%;
    height: auto;
}

.navbar-brand {
    font-family: 'Inter-Bold';
    font-size: 1.8em;
}

.navbar-nav {
    font-family: 'Inter-Regular';
    font-size: 1.2em;
}

.active {
    font-family: 'Inter-ExtraBold';
    font-size: 1em;
}

.navbar {
    background-color: white;
    color: black;
}

.table-light{
    background: white;
}

.table-dark{
    background-color: black;
}

.login-form{
    background-color: white;

    border-radius: 16px 16px 16px 16px;
    -moz-border-radius: 16px 16px 16px 16px;
    -webkit-border-radius: 16px 16px 16px 16px;
}

.btn-dark{
    background-color: black;
    font-family: 'Inter-Bold';
    font-size: 1em;
}

.btn-dark:hover{
    background-color: rgb(31, 31, 31);
    font-family: 'Inter-Bold';
    font-size: 1em;
}

.calendar {
    font-family: 'Inter-SemiBold';
    color: white;
}

.class-card {
    background-color: white;

    border-radius: 16px 16px 16px 16px;
    -moz-border-radius: 16px 16px 16px 16px;
    -webkit-border-radius: 16px 16px 16px 16px;

    font-family: 'Inter-SemiBold';
    text-decoration: none;
    color: black;
}

.class-card .image-instructor {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.class-card .calendar-date{
    width: 100%;
}

.class-card .text-instructor{
    font-family: 'Inter-Bold';
    font-size: 1.2em;
    color: black;
}

.class-card .text-instructor-description{
    font-family: 'Inter-Bold';
    font-size: 2em;
    color: black;
}

.class-card .text-studio{
    font-family: 'Inter-Bold';
    font-size: 1.2em;
    color: black;
}

.class-card .text-class{
    font-family: 'Inter-Regular';
    font-size: 1.2em;
    color: black;
}

.class-card .text-confirm{
    font-family: 'Inter-Bold';
    font-size: 1.8em;
    color: black;
}

.class-card .text-description{
    font-family: 'Inter-SemiBold';
    font-size: 1.4em;
    color: black;
}

.class-card .text-date-time{
    font-family: 'Inter-Bold';
    font-size: 1.4em;
    color: black;
}

.class-card .btn-dark{
    background-color: black;
    font-family: 'Inter-Bold';
    font-size: 1.2em;
}

.class-card .btn-dark:hover{
    background-color: rgb(31, 31, 31);
    font-family: 'Inter-Bold';
    font-size: 1.2em;
}


.class-card-dark {
    background-color: black;

    border-radius: 16px 16px 16px 16px;
    -moz-border-radius: 16px 16px 16px 16px;
    -webkit-border-radius: 16px 16px 16px 16px;

    border: 2px solid white;

    font-family: 'Inter-SemiBold';
    font-size: 1.2em;
    color: white;
}

.scrolling {
    vertical-align: middle;
    overflow-x: auto;
    text-align: center; 
}

.scrolling form {
    display: inline-block;
    vertical-align: middle;
}


.btn-bike input[type=radio] {
    display:none;
}

.btn-bike-1 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-1-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-1 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-1-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-1 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-1-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-2 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-2-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-2 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-2-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-2 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-2-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-3 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-3-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-3 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-3-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-3 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-3-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-4 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-4-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-4 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-4-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-4 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-4-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-5 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-5-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-5 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-5-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-5 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-5-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-6 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-6-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-6 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-6-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-6 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-6-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-7 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-7-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-7 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-7-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-7 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-7-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-8 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-8-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-8 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-8-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-8 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-8-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-9 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-9-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-9 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-9-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-9 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-9-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-10 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-10-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-10 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-10-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-10 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-10-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-11 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-11-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-11 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-11-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-11 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-11-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-12 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-12-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-12 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-12-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-12 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-12-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-13 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-13-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-13 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-13-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-13 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-13-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-14 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-14-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-14 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-14-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-14 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-14-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-15 input[type=radio] + label {
    background: url(/public/img/bikes/Bike-15-Free.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-15 input[type=radio]:checked + label {
    background: url(/public/img/bikes/Bike-15-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}

.btn-bike-15 input[type=radio]:disabled + label {
    background: url(/public/img/bikes/Bike-15-Occupated.svg);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 78px;
    width: 78px;
}