/**
*   '/css/logo-nav.css'
*
*   Stylesheet: Tweaking the bootstrap NAV
*
*   AZ:orange:  FE6C1F
*   AZ:blue:    0E047E
*   Grey:       DBDBDB
*
*   Modified: 27-02-2018 | matthijs
*/

/* Set the mobile menu to the max height of the menu items */
.navbar-collapse {
    max-height: 100% !important;
}
.navbar-inverse {
    z-index: 1000000;
}

.input-group input.form-control {
    width: 90px !important;
}

.input-group-btn button.btn {
    padding: 3px 10px 3px 10px;
}

.navbar-collapse > .nav > li a:hover {
    background-color: #4b4b4b;
}

.navbar-collapse > .nav > li.active a, .navbar-collapse > .nav > li.active a:hover {
    color: #FE6C1F;
    background-color: #EEEEEE;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 15px;
}

#searchField .form-control:focus {
    background-color: #faffd9;
    outline: none;
    -webkit-appearance: none;

    outline: none;
    box-shadow:none !important;
    border: 0 solid #ccc !important;
}

/* ----------| normal viewport |---------- */
@media (min-width: 768px) {

    body {
        padding-top: 130px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
        background: url('/images/layout/bg_main.png') repeat-x fixed;
        background-position-y: 110px;
    }

    body.transporter {
        padding-top: 120px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    }

    #header-logo-container {
        border: 0 solid black; /* don't remove this Jelte: for dev purpose */
        position: relative;
        height: 51px;
        margin: 5px 0 5px 5px;
        float: left;
        width: auto;
        top: -30px;
    }

    #header-title {
        float: left;
        width: auto;
        margin: 5px 0 0 10px;
        position: relative;
        bottom: 30px;
    }

    #header-title > .header-title {
        font-weight: normal;
        color: #FFFFFF;
        border: 0px solid yellow; /* test position */
        font-size: 20px;
    }

    #header-title > .header-subtitle {
        font-weight: normal;
        color: #FFFFFF;
        border: 0px solid yellow; /* test position */
        font-size: 15px;
        font-style: italic;
    }

    .header-subtitle-body {
        display: none;
    }

    #searchField {
        z-index: 1000;
        position: absolute;
        top: 20px;
        right: 20px;
        width: 250px;
        height: auto;
        border: 0px solid gold;
    }

    #searchField .form-control {
        height: 26px;
        border: 0;
    }

    .input-group input.form-control {
        width: 100% !important;
        position: relative;
    }

    .navbar {
        background-color: #616161;
        border-bottom: 0;
    }

    .container-fluid {
        background-color: #3e3e3e;
    }

    .navbar-right {
        margin: 0 10px 0 0;
    }

    .navbar-collapse > .nav > li a {
        color: #dddddd;
    }

    .navbar-collapse > .nav > li a:hover {
        color: #fec96d;
        background-color: #5c5c5f;
    }
}

/* ----------| cellphone viewport |---------- */
@media (max-width: 768px) {

    body {
        padding-top: 85px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    }

    #searchField {
        z-index: 1000;
        position: absolute;
        top: 47px;
        right: 65px;
        width: 130px;
        height: auto;
        border: 0px solid gold;
    }

    #searchField .form-control {
        margin: 0;
        border: 0;
    }

    #searchField .input-group {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background-color: white;
        border-radius: 4px;
    }

    .input-group input.form-control {
        width: 100% !important;
        position: relative;
    }

    #searchField .input-group-btn > .btn.btn-default {
        background-color: #a3a3a3;
    }

    #searchField .input-group-btn:hover > .btn.btn-default {
        background-color: #bdbdbd !important;
        color: black !important;
    }

    .navbar-header {
        background-color: #616161;
        border-bottom: 0;
    }

    #header-logo-container {
        margin: 5px 0 5px 12px;
        border: 0 solid #FE6C1F; /* test position */
        width: 90px;
        height: 25px;
        float: left;
    }

    #header-logo {
        border: 0px solid orange; /* test position */
        width: 100%;
        height: inherit;
    }

    #header-title {
        margin: 5px 0 0 3px;
        border: 0px solid purple; /* test position */
        color: white;
        float: left;
        width: auto;
    }

    #header-title > .header-title {
        display: block;

        font-weight: normal;
        color: #FFFFFF;
        border: 0px solid yellow; /* test position */
        font-size: 17px;
        font-style: normal;
        height: 25px;
        overflow: hidden;
        width: 170px;
    }

    .header-subtitle-body {
        display: block;
        margin: 10px 0 10px 0;
        font-style: italic;
        font-size: 13px;
    }

    #header-title > .header-subtitle {
        display: none;
    }

    .navbar-right {
        float: left;
        display: block;
        margin: 4px 0 0 12px;
    }

    .navbar-right li a {
        padding: 0;
        margin: 0;
        background-color: transparent;
    }

    .navbar-collapse > .nav > li:hover {
        background-color: #FE6C1F;
    }

    .navbar-collapse > .nav > li.active a {
        background-color: #FE6C1F !important;
        color: white;
    }

    UL.nav.navbar-nav li.active a:hover {
        background-color: #fe8e42 !important;
    }

    .input-group {
        margin: 0 15px 0 0;
    }

    .nav.navbar-right li a {
        color: #FFFFFF !important;
        font-size: 10px;
        font-weight: normal;
    }

    .nav.navbar-right li a:hover {
        color: #FE6C1F !important;
        background: transparent !important;
    }

    .user-sign {
      float: right;
    }
    .user-sign li{
      display: inline-block;
      padding-right: 12px;
    }


}
/* ----------| /cellphone viewport |---------- */

/* ----------| menu fix |---------- */
@media (min-width: 768px) and (max-width: 1150px) {

    body {
        padding-top: 200px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    }

}
/* ----------| /menu fix |---------- */


body.login .container {
    margin: 10% auto;
}

body.login {
    padding-top: 0;
    background-color: #EEEEEE;
    background-image: none;
}

/* Transporter styles */
.navbar.transporter {
    background-color: #0E047E;
}

.navbar.transporter > .container-fluid {
    background-color: #0a0359;
}

.navbar.transporter > .container-fluid > .navbar-collapse > .nav > li a,
.navbar.transporter > .navbar-right > li a {
    color: #FFFFFF;
}

.navbar.transporter > .container-fluid > .navbar-collapse > .nav > li a:hover,
.navbar.transporter > .navbar-right > li a:hover {
    color: #FFFFFF;
}

.navbar.transporter > .container-fluid > .navbar-collapse > .nav > li a:hover,
.navbar.transporter > .navbar-right > li a:hover {
    background-color: #1506ae;
}

.navbar.transporter > .container-fluid > .navbar-collapse > .nav > li.active a,
.navbar.transporter > .container-fluid > .navbar-collapse > .nav > li.active a:hover {
    color: #FE6C1F;
    background-color: #EEEEEE;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 15px;
}

.navbar.transporter > .container-fluid > .navbar-header > .navbar-toggle {
    background-color: #FE6C1F;
}

.navbar.transporter > .container-fluid > .navbar-header > .navbar-toggle:hover {
    background-color: #fe973e;
}


.navbar.transporter > .container-fluid > .navbar-header {
    background-color: transparent;
}
/* /Transporter styles */


/* Store styles */
.navbar.store {
    background-color: #FE6C1F;
}

.navbar.store > .container-fluid {
    background-color: #a84715;
}

.navbar.store > .container-fluid > .navbar-collapse > .nav > li a,
.navbar.store > .navbar-right > li a {
    color: #FFFFFF;
}

.navbar.store > .container-fluid > .navbar-collapse > .nav > li a:hover,
.navbar.store > .navbar-right > li a:hover {
    color: #FFFFFF;
}

.navbar.store > .container-fluid > .navbar-collapse > .nav > li a:hover,
.navbar.store > .navbar-right > li a:hover {
    background-color: #fe9950;
}

.navbar.store > .container-fluid > .navbar-collapse > .nav > li.active a,
.navbar.store > .container-fluid > .navbar-collapse > .nav > li.active a:hover {
    color: #FE6C1F;
    background-color: #EEEEEE;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 15px;
}

.navbar.store > .container-fluid > .navbar-header {
    background-color: transparent;
    padding-bottom: 4px;
}

.navbar.store > .container-fluid > .navbar-header > .navbar-toggle {
    display: none !important;
}
/* /Store styles */


/* Driver styles */
.navbar.driver {
    background-color: #319916;
}

.navbar.driver > .container-fluid {
    background-color: #1f620e;
}

.navbar.driver > .container-fluid > .navbar-collapse > .nav > li a,
.navbar.driver > .navbar-right > li a {
    color: #FFFFFF;
}

.navbar.driver > .container-fluid > .navbar-collapse > .nav > li a:hover,
.navbar.driver > .navbar-right > li a:hover {
    color: #FFFFFF;
}

.navbar.driver > .container-fluid > .navbar-collapse > .nav > li a:hover,
.navbar.driver > .navbar-right > li a:hover {
    color: #dcff17 !important;
    background-color: #18ab05;
}

.navbar.driver > .container-fluid > .navbar-collapse > .nav > li.active a,
.navbar.driver > .container-fluid > .navbar-collapse > .nav > li.active a:hover {
    color: #21fe11 !important;
    background-color: #EEEEEE;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 15px;
}

.navbar.driver > .container-fluid > .navbar-header {
    background-color: transparent;
    padding-bottom: 4px;
}

.navbar.driver > .container-fluid > .navbar-header > .navbar-toggle {
    display: none !important;
}
/* /Driver styles */

/* Relation styles */
.navbar.relation {
    background-color: #990005;
}

.navbar.relation > .container-fluid {
    background-color: #62060a;
}

.navbar.relation > .container-fluid > .navbar-collapse > .nav > li a,
.navbar.relation > .navbar-right > li a {
    color: #FFFFFF;
}

.navbar.relation > .container-fluid > .navbar-collapse > .nav > li a:hover,
.navbar.relation > .navbar-right > li a:hover {
    color: #FFFFFF;
}

.navbar.relation > .container-fluid > .navbar-collapse > .nav > li a:hover,
.navbar.relation > .navbar-right > li a:hover {
    color: #fff0ed !important;
    background-color: #770005;
}

.navbar.relation > .container-fluid > .navbar-collapse > .nav > li.active a,
.navbar.relation > .container-fluid > .navbar-collapse > .nav > li.active a:hover {
    color: #fe020c !important;
    background-color: #EEEEEE;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 15px;
}

.navbar.relation > .container-fluid > .navbar-header {
    background-color: transparent;
    padding-bottom: 4px;
}

.navbar.relation > .container-fluid > .navbar-header > .navbar-toggle {
    display: none !important;
}
/* /Relation styles */