body{
    /* overscroll-behavior: none; */
}
@media (min-width: 1400px){
    .container {
        max-width: 1140px
    }
}

.page{
    display: none;
}
.page.active{
    display: initial;
}
.hide{
    display: none !important;
}

.clickable{
    cursor: pointer;
}

.rideDetails{}
.createRide{}
.editRide{}

.refueling{}
.createRefueling{}
.editRefueling{}

/* RideDetails */
#sets-selector > .form-check-inline{
    margin-right: .75rem;
}
.timer{
    border: solid thin #00000011;
    border-radius: 4px;
    padding: 1em;
    width: 80%;
}
#timer-time-display{
    padding-left: 0.25em;
    padding-right: 0.25em;
    font-size: 5em;
    background: #0000ff11;
    border-radius: 4px;
    text-align: center;
    font-family: "Avenir", sans-serif;
}
#timer-startstop, #timer-reset, #duration{
    width: 10em;
}

/* RideList / RefuelingList */
.table th, .table td{
    vertical-align: middle;
}
.icn-btn{
    display: flex;
}
.listEntry:hover{
    background: lightgray;
    cursor: pointer;
}
.listEntry{
    transition: background-color .15s, opacity 3s ease-in;
}
.listEntry.remove{
    background: lightcoral !important;
    opacity: 100%;
}
.listEntry.removed{
    opacity: 25%;
}
.listEntry.marked{
    background: lightgoldenrodyellow !important;
}

#rideList >* tr > td:nth-child(4), #rideList >* tr > th:nth-child(4){
    display: none;
}

@media (min-width: 576px){
    #ei-actions{
        order: initial !important;
    }
    .icn-btn{
        display: initial !important;
    }
    .listEntry:hover{
        background: initial;
        cursor: initial;
    }
    #rideList >* tr > td:nth-child(4), #rideList >* tr > th:nth-child(4){
        display: table-cell;
    }
    .container{
        padding-bottom: 4rem !important;
    }
}

@media (min-width: 768px){
    footer{
        position: fixed;
        bottom: 0;
        width: 100%;
    }
}