/* Color variables:*/
:root {
    --myContainer-color: white;
/* Signup and Search button colours: */
    --button: rgba(114, 190, 35, 0.7);
    --greenButton-backgroundColor-hover: rgba(114, 190, 35);
    --greenButton-border-hover: black;
    --radius-backgroundColor: rgba(0, 0, 0, 0.2);
/* Cancel button colours: */
    --btnDefault-hover: #f2f2f2;
/* navbar colours: */
    --navbarDark-backgroundGradientTop: #f2f2f2; /* gradient top */
    --navbarDark-backgroundGradientBottom: #d9d9d9;
    --navbarBrand-color: black;
    --navbarBrand-color-hover: black;
    --navbarBrand-backgroundColor-hover: transparent;
    --profileName-backgroundColor-hover: transparent;
    --navbarText-color: #999;
    --navbarNav-a-last-child: red;
    --navbarNav-navItem-backgroundColor: #ccc;
    --navbarNav-navItem-borderRight: #999;
    --navbarNav-active-a-color: #808080;
    --navbarNav-active-a-backgroundColor: white;
    --navbarNav-active-a-backgroundImageGradientTop: #eee;
    --navbarNav-active-a-backgroundImageGradientBottom: #999;
    --navbarNav-navItem-navLink-color: #fff;
    --navbarNav-navItem-navLink-color-hover: #808080;
    --navbarToggler-borderColor: #bbb;
    --navbarToggler-backgroundColor-hover: #bbb;
/* mainpageloggedin:*/
/*    textarea colours: */
    --textarea-borderColor: #ca3dd9;
    --textarea-backgroundColor: #fbefff;
/*    noteheader colours: */
    --noteheader-border: grey;
    --noteheader-border-hover: black;
    --noteheader-backgroundGradientBottom: white;
    --noteheader-backgroundGradientTop: #eceae7;
    --tr-hover: #ccc;
    --td-color: #808080;
    --td-color-hover: black;
}
html {
    position: relative;
    min-height: 100%;
}
/* Background-image: */
body {
/*    background: url("https://cdn.pixabay.com/photo/2016/01/19/17/16/rainbow-1149610_960_720.jpg") no-repeat center center;*/
    background: url("../images/rainbow-1149610_1920.jpg") no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Arvo', serif;
}
#myContainer {
	margin-top: 70px;
    color: var(--myContainer-color);
    text-align: center;
}
#myContainer h1 {
	font-size: 3em;
}
#googleMap {
    width: 100%;
    height: 30vh;  /* 30% of viewport-height */
    margin: 10px auto;
}
/* The colours of green-class buttons */
.green {
    background-color: var(--button);
    color: var(--myContainer-color);
}
.green:hover {   
    background-color: var(--greenButton-backgroundColor-hover);
    border: 1px solid var(--greenButton-border-hover);
}
/* Delete button style: */
.btn-danger:hover {
    border: 1px solid var(--greenButton-border-hover);
    color: var(--td-color);
}
/* Cancel button style: */
.btn-default:hover {
    border: 1px solid var(--greenButton-border-hover);
    background-color: var(--btnDefault-hover);
}
.col-md-6 button {
    margin-top: 10px;
    margin-bottom: 60px;
}

/* ----------- mainpageloggedin.php: ----------------- */
#container {
    margin-top: 110px;
    padding-bottom: 60px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.buttons {
    margin-bottom: 20px;
}
/* My Trips: */
.eachTrip {
    border: 1px solid var(--noteheader-border);
    border-radius: 10px;
    padding: 10px;
    margin: 10px auto;
    background: linear-gradient(var(--noteheader-backgroundGradientBottom), var(--noteheader-backgroundGradientTop));
}
.departure, .destination, .seatsAvailable  {
    font-size: 1.5em;
}
.price {
    font-size: 2em;
}
.noteheader, tr { /* also on profile.php */
    border: 1px solid var(--noteheader-border);
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 0 10px; /* top-bottom: 0, left-right: 10px */
    background: linear-gradient(var(--noteheader-backgroundGradientBottom), var(--noteheader-backgroundGradientTop));
}
.noteheader:hover, tr:hover {
    border: 1px solid var(--noteheader-border-hover);
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    padding: 0 10px; /* top-bottom: 0, left-right: 10px */
    background: linear-gradient(var(--noteheader-backgroundGradientTop), var(--noteheader-backgroundGradientBottom));
}
tr:hover {
    border: 2px solid var(--tr-hover);
}
td {
    color: var(--td-color);
}
td:hover, td:hover + td {
    color: var(--td-color-hover);
}
.centered {
    position: absolute;
    top: 50%;
    left: 25%;
}
.centered img {
    height: auto;
    width: 300px;
    border-radius: 50%;
    border: 1px solid white;
}
.centered img:hover {
    cursor: pointer;
}

/* Search: */
.radius{
    background-color: var(--radius-backgroundColor);
    padding: 0 10px;
}
#slider {
    margin: 10px auto;
    width: 100px;
}
.journeySummary  {
    text-align: left;
    font-size: 1.2em;
}
#searchResults {
    margin-bottom: 60px;
    margin-top: 20px;
}
.profile { /* picture in the searchResults */
    height: auto;
    max-width: 100%;
    border-radius: 50%;
}
.driver {
    font-size: 1.4em;
    text-transform: capitalize;
}
.journey, .moreInfo {
    text-align: left;
}
.departure, .destination {
    font-size: 1.5em;
}
.time {
    margin-top: 10px;
}
.journey2 {
    text-align: right;
}
..price {
    font-size: 2.2em;
}
.perSeat {
    font-size: 0.7em;
}
.seatsAvailable {
    font-size: 0.9em;
}
/* Book trip: */
#bookedDeparture, #bookedDestination { 
    font-size: 0.7em;
}

/* Style the footer: */
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-top: 10px;
    color: var(--navbarText-color);
    text-align: left;
}
footer p {
    margin-left: 100px;
}
/* Spinner: */
#spinner {
    display: none;
    position: fixed;
    top: 25%;
    bottom: 0;
    left: 0;
    right: 0;
    height: 85px;
    margin: auto;
    text-align: center;
    z-index: 1100;
}
#spinner img {
    width: 64px;
    height: 64px;
}
/* Profile picture: */
.profilePicture {
    background-size: cover;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
}
.preview {
    max-width: 100%;
    border-radius: 50%;
}
/* Navigation bar: */
.navbar-dark, footer {
    background-color: cornflowerblue;
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(var(--navbarDark-backgroundGradientTop)), to(var(--navbarDark-backgroundGradientBottom))); /* Not sure, maybe have to change */
    background-image: -webkit-linear-gradient(top, var(--navbarDark-backgroundGradientTop), 0%, var(--navbarDark-backgroundGradientBottom), 100%);
    background-image: -moz-linear-gradient(top, var(--navbarDark-backgroundGradientTop) 0%, var(--navbarDark-backgroundGradientBottom) 100%);
    background-image: linear-gradient(to bottom, var(--navbarDark-backgroundGradientTop) 0%, var(--navbarDark-backgroundGradientBottom) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1d6ecb', endColorstr='#ff17569e', GradientType=0);
}
.navbar-dark {   
    border-bottom: 1px solid white;
}
.navbar-dark .navbar-brand {
    color: var(--navbarBrand-color);
}
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
    color: var(--navbarBrand-color-hover);
    background-color: var(--navbarBrand-backgroundColor-hover);
}
.navbar-dark .navbar-text {
    color: var(--navbarText-color);
    margin-right: 5px;
}
.navbar-dark .navbar-nav > a:last-child {
    border-right: 1px solid var(--navbarNav-a-last-child);
}
.navbar-nav .nav-item  {
    background-color: var(--navbarNav-navItem-backgroundColor);
    border-right: 1px solid var(--navbarNav-navItem-borderRight);
    width: 110px;
    text-align: center;
}
.navbar-nav .nav-item .nav-link {   
    color: var(--navbarNav-navItem-navLink-color);
}
.navbar-nav .nav-item .nav-link:hover {   
    color: var(--navbarNav-navItem-navLink-color-hover);
}
.navbar-nav .nav-link {
    background-color: var(--navbarNav-navItem-backgroindColor);
}
.navbar-dark .navbar-nav > a:hover,
.navbar-dark .navbar-nav > a:focus {
    color: red;
    background-color: var(--profileName-backgroundColor-hover);
}
.navbar-dark .navbar-nav > .active > a,
.navbar-dark .navbar-nav > .active > a:hover,
.navbar-dark .navbar-nav > .active > a:focus,
.navbar-nav .nav-item:hover:not(.profilePicture), .navbar-nav .nav-item:focus,
.navbar-dark .navbar-toggler:hover,
.navbar-dark .navbar-toggler:focus {
    color: var(--navbarNav-active-a-color);
    background-color: var(--navbarNav-active-a-backgroundColor);
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(var(--navbarNav-active-a-backgroundImageGradientTop)), to(var(--navbarNav-active-a-backgroundImageGradientBottom)));
/*    background-image: -webkit-linear-gradient(top, var(--navbarNav-active-a-backgroundImageGradientTop), 0%, var(--navbarNav-active-a-backgroundImageGradientBottom), 100%);*/  /* This line not work and I did'nt find the mistake */
    background-image: -moz-linear-gradient(top, var(--navbarNav-active-a-backgroundImageGradientTop) 0%, var(--navbarNav-active-a-backgroundImageGradientBottom) 100%);
    background-image: linear-gradient(to bottom, var(--navbarNav-active-a-backgroundImageGradientTop) 0%, var(--navbarNav-active-a-backgroundImageGradientBottom) 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff134681', endColorstr='#ff195eae', GradientType=0);
}
.navbar-dark .navbar-toggler {
    border-color: var(--navbarToggler-borderColor);
    color: red;
}
/*
.navbar-dark .navbar-toggler:hover,
.navbar-dark .navbar-toggler:focus {
    background-color: var(--navbarToggler-backgroundColor-hover);
}
*/
.navbar-dark .navbar-toggler .icon-bar {
    background-color: yellow;
}
.navbar-dark .navbar-collapse,
.navbar-dark .navbar-form {
    border-color: red;
}
.navbar-dark .navbar-nav > .open > a,
.navbar-dark .navbar-nav > .open > a:hover,
.navbar-dark .navbar-nav > .open > a:focus {
    background-color: yellow;
    color: red;
}
.navbar-dark .navbar-nav > .open > a .caret,
.navbar-dark .navbar-nav > .open > a:hover .caret,
.navbar-dark .navbar-nav > .open > a:focus .caret {
    border-top-color: red;
    border-bottom-color: yellow;
}

@media (max-width: 1024px) {
/* -----------------------index.php ---------------- */
    .jumbotron {
        letter-spacing: 2px;
        padding: 8px;
        margin-top: 140px;
    }
    .jumbotron button {
        margin-top: 40px;
    }
    footer {
        text-align: center;
        padding-top: 10px;
    }
    footer p {
        margin-left: 0;
    }
    .navbar-dark .navbar-brand {
        margin-left: 10px;
    }
/* --------------- mainpageloggedin.php ---------------- */
    #container {
        margin-top: 110px;
        width: 60%;
    }
    .buttons {
        margin-bottom: 18px;
    }
}
@media (max-width: 992px) {
    .navbar-nav .nav-item  {
        width: 100%;
        text-align: left;
    }
    .nav-link {
        margin-left: 10px;
    }
    .navbar-dark .navbar-nav .active {
        color: var(--navbarNav-active-a-color);
        background-color: var(--navbarNav-active-a-backgroundColor);
        background-image: -webkit-gradient(linear, left 0%, left 100%, from(var(--navbarNav-active-a-backgroundImageGradientTop)), to(var(--navbarNav-active-a-backgroundImageGradientBottom)));
/*    background-image: -webkit-linear-gradient(top, var(--navbarNav-active-a-backgroundImageGradientTop), 0%, var(--navbarNav-active-a-backgroundImageGradientBottom), 100%);*/  /* This line not work and I did'nt find the mistake */
        background-image: -moz-linear-gradient(top, var(--navbarNav-active-a-backgroundImageGradientTop) 0%, var(--navbarNav-active-a-backgroundImageGradientBottom) 100%);
        background-image: linear-gradient(to bottom, var(--navbarNav-active-a-backgroundImageGradientTop) 0%, var(--navbarNav-active-a-backgroundImageGradientBottom) 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff134681', endColorstr='#ff195eae', GradientType=0);
    }
}

@media (max-width: 768px) {
    /* -----------------------index.php ---------------- */
    .jumbotron {
        letter-spacing: 1px;
        padding: 7px;
        margin-top: 120px;
    }
    .jumbotron button {
        margin-top: 30px;
    }
/* --------------- mainpageloggedin.php ---------------- */
    #container {
        margin-top: 100px;
        width: 90%;
    }
    .navbar-nav .nav-item  {
        width: 100%;
        text-align: center;
    }
    .navbar-dark .navbar-text {
        text-align: center;
    }
/*  profilePictureTD */
    .centered {
        position: static;
        margin: auto;
        text-align: center;
    }
}
@media (max-width: 480px) {
/* -----------------------index.php ---------------- */
    .jumbotron {
        letter-spacing: 0px;
        padding: 4px;
        margin-top: 50px;
    }
    .display-4 {
        font-size: 300%;
    }
    hr {
        display: none;
    }
    .jumbotron button {
        margin-top: 20px;
    }
    footer {
        padding-top: 8px;
    }
    footer p {
        font-size: 12px;
    }
/* --------------- mainpageloggedin.php ---------------- */
    #container {
        margin-top: 80px;
        width: 100%;
    }
    .navbar-nav .nav-item  {
        width: 100%;
    }
}