/* Concrete5 things */
div.ccm-panel-content ul.nav li {
    width: 100%;
}

.container.wider {
    max-width: 1500px;
}

#emailCheckMsg {
    color: #FFF;
}

/* Scrollbar */

::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #e8e8e8;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient( 90deg, #163860 0%, #163860 100% );
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #163860;
}

/* Back to Top */

#backToTop {
    position: fixed;
    right: 0px;
    bottom: 20px;
    padding: 10px 15px;
    font-size: 22px;
    background-color: #FFF;
    color: #000;
    border-radius: 0px;
    border: 1px solid #000;
    transition: all 0.3s ease;
}

#backToTop:hover {
    padding: 10px 30px 10px 15px;
}

#backToTop.hiding {
    right: -60px;
}

#backToTop svg {
    height: 30px;
    fill: #000;
}

#backToTop:hover svg {
    animation: bouncingIcon 1s;
}

/*
* https://daneden.github.io/animate.css/
*/

@-webkit-keyframes bouncingIcon {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -10px, 0);
    }
    
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -5px, 0);
    }
    
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar, .snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 500px; /* Set a default minimum width */
    margin-left: -250px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1051; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show, .snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 6.5s;
    animation: fadein 0.5s, fadeout 0.5s 6.5s;
}

.snackbar.success{
    background-color: #4caf50;
}

.snackbar.warning {
    background-color: #f9a825;
}

.snackbar.danger {
    background-color: #d32f2f;
}

.snackbar.info {
    background-color: #d1ecf1;
    color: #000;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}


nav.navbar {
    background-image: linear-gradient(to top,rgba(217,217,217,1),rgba(242,245,247,1));
    background-size: 100% 100%;
}

nav.navbar .nav-item a {
    color: #163860;
}

nav.navbar .nav-item.active {
    background-image: linear-gradient(to bottom, rgba(8,8,8,1),rgba(22,56,96,1));
    background-size: 100% 100%;
}

nav.navbar .nav-item.active a.nav-link {
    color: #FFF;
}

.bgImg {
    background-position: top left;
    background-repeat: repeat;
    background-size: auto;
}

.fc th.fc-day-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-transform: uppercase;
    color: #FFF;

    background-image: url('../img/linnajoki_bg.png');
    background-position: top left;
    background-repeat: repeat;
    background-size: auto;
}

.calendar-info form .form-control {
    border-radius: 0;
}


/* Frontpage */
.reservationInfo {
    background-color: #00a4a3;
    color: #FFF;
}

.ride-card {
    background-image: linear-gradient(to bottom, rgba(8,8,8,1),rgba(22,56,96,1));
    background-size: 100% 100%;
    color: #FFF;
    font-size: 1.3em;
    cursor: pointer;
}

.ride-card p {
    margin-bottom: 0;
}

.calendar-info .startText {
    font-weight: 700;
    font-size: 1.2em;
}

.calendar-info .vehicle span, .calendar-info .personCount span, .calendar-info .route span,
.calendar-info .carbonFootprint span, .estimatedArrive span
{
    font-weight: 700;
}

.calendar-info .price {
    font-weight: 700;
    font-size: 1.3em;
    text-align: center;
}

.btn {
    border-radius: 0;
}

.btn.btn-success {
    background-color: #163860;
}

tr > td > .fc-day-grid-event {
    cursor: pointer;
}

.fc-event-container a {
    border-radius: 0;
}

.groupsWrap > .row:nth-child(even) {
    background-color: #DCDCDC;
}

#varauskalenteri button {
    border-radius: 0;
}

.calendar-bar-text {
    font-size: 1.5em;
    font-weight: 600;
    margin-top: -3px;
}

.calendar-bar.blue {
    background-color: #163860;
}

.calendar-bar.yellow {
    background-color: #e6e600;
}

.calendar-bar.grey {
    background-color: #959faa;
}

@media(max-width: 768px) {
    .fc-right .fc-button-group {
        display: grid;
    }

    #varauskalenteri .fc-right .fc-button-group button {
        border-radius: .25em;
        margin-top: 5px;
    }

    #varauskalenteri .fc-right {
        text-align: right;
    }

    #varauskalenteri .fc-right button.fc-button {
        margin-top: 7px;
        margin-bottom: 7px;
    }

    #varauskalenteri .fc-center h2 {
        text-align: center;
        font-size: 1.5em;
    }
    
    #varauskalenteri .fc-left .fc-button-group {
        margin-bottom: 5px;
    }
}

/* Manage vehicles */
#vehicleTable tbody tr:nth-child(4n), #vehicleTable tbody tr:nth-child(4n-1), #vehicleTable tbody tr:nth-child(4n-1) table, #vehicleTable tbody tr:nth-child(4n) table {
    background-color: #DCDCDC;
}


/* Manage routes */
.route-table label {
    font-weight: 700;
}

/* Tulevat kyydit */
.ride-wrap {
    border-radius: 10px;
    font-size: 1.2em;
}

.ride-wrap p span {
    font-weight: 500;
}

.ride-wrap a {
    color:#000;
}

.ride-wrap p {
    margin-bottom: 0.75rem;
}

.ride-wrap.future {
    background-color: #70a2de;
}

.ride-wrap.today {
    background-color: #5ad776;
}

.ride-wrap .removeRide {
    position: absolute;
    right: 25px;
    top: 15px;
}