﻿.navbar-default {
    background: transparent;
    border-top: none;
    border-bottom: .05rem solid #e5e5e5;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
}

    .navbar-default .navbar-brand {
        font-size: 2rem;
    }

.navigation li {
    width: 20%;
    text-align: center;
}

.navigation a {
    color: #333 !important;
    border-radius: 0 !important;
}

    .navigation a.selected {
        font-weight: 700;
    }

    .navigation a:hover {
        background: #fff !important;
        border-top-color: transparent !important;
        border-left-color: transparent !important;
        border-right-color: transparent !important;
        color: #333 !important;
    }

    .navigation a.done:before {
        content: "";
        font-family: "Glyphicons Halflings";
        font-size: 1rem;
        padding-right: 3px;
    }

    .navigation a.done {
        color: #fff !important;
        background: #069 !important;
    }

        .navigation a.done:hover {
            color: #fff !important;
            background: #069 !important;
            border-bottom-color: transparent !important;
        }

.navigation-small li {
    float: none !important;
    width: 100%;
}

.navigation-small a {
    line-height: normal !important;
    padding: 3px !important;
}

.navigation-container {
    padding: 10px;
    overflow: hidden;
}

.full-width {
    width: 100%;
}

.datepicker-key {
    margin-top: 30px;
}

    .datepicker-key li {
        list-style-type: none;
        font-size: 1rem;
    }

    .datepicker-key table tr td.day {
        border: 1px solid #ccc;
        cursor: default !important;
    }

    .datepicker-key table tr td.info {
        width: auto;
        text-align: left;
        font-size: 1.2rem;
        padding-left: 10px;
    }

.datepicker table tr td.day {
    background: #fff;
    border-radius: 0;
    color: #050;
}

.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
    background: transparent;
    border-radius: 0;
    color: #ccc;
}

.datepicker table tr td.notavailable, .datepicker table tr td.notavailable:hover {
    background: #ffa5a5;
    border-radius: 0;
    color: #333;
}

.time-radio {
    padding: 5px;
    display: inline-block;
}

    .time-radio label {
        background-color: transparent;
        border: 1px solid #ccc;
        padding: 5px 10px;
        margin: 0;
        cursor: pointer;
        display: inline-block;
    }

        .time-radio label:hover {
            background-color: #eee;
        }

    .time-radio input[type="radio"] {
        position: absolute;
        visibility: hidden;
        display: none;
    }

        .time-radio input[type="radio"]:checked + label {
            background-color: #286090;
            color: #fff;
            border: 1px solid #555;
        }

        .time-radio input[type="radio"]:disabled + label {
            color: #ccc;
        }

            .time-radio input[type="radio"]:disabled + label:hover {
                background-color: transparent;
                cursor: default;
            }

.panel-heading h3 {
    display: inline !important;
}

.appointment {
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}

    .appointment:last-child {
        border-bottom-color: transparent;
        margin-bottom: 0;
    }

    .appointment .date, .appointment .time {
        font-size: 1.6rem;
        font-weight: 700;
    }

    .appointment .information {
        white-space: pre-wrap;
    }

.form-group-separator {
    border-bottom: 1px solid #ccc;
}

.depot-vehicles {
    margin-top: 10px;
}

    .depot-vehicles .tyres {
        margin: 0;
        padding: 0;
    }

        .depot-vehicles .tyres li {
            list-style-type: none;
        }

.important-info {
    font-size: 1.1em;
    color: #005ea8;
}
@media (max-width: 576px) {
.notification-container {
        width: 95% !important;
        right: 50% !important;
        top: 15% !important;
        transform: translateX(50%);
    }
}
#notification, #notification-offer, #notification-voucher {
    display: none;
}

.notification-container {
    font-size: 11px;
    position: fixed;
    top: 190px;
    right: 75px;
    width: 320px;
    height: auto;
    Z-Index: 10000;
    color: #5c5a56;
    border: 1px solid #666;
    -moz-box-shadow: 0 0 4px 0 #666;
    -webkit-box-shadow: 0 0 4px 0 #666;
    box-shadow: 0 0 4px 0 #666;
}

    .notification-container.success {
        color: #0063A3;
        background-color: #fff;
        border: 2px solid #0063A3;
        margin-top: -20px;
    }

    .notification-container.warning {
        color: #E30721;
        border: 2px solid #E30721;
        margin-top: -20px;
        background-color: #fff;
    }

    .notification-container.error {
        color: #f00;
        border: 2px solid #f00;
        margin-top: -20px;
        background-color: #fff;
    }

.notification-body .notification-box-image {
    height: 175px;
    background: #edecea;
    position: relative;
}

    .notification-body .notification-box-image img {
        max-height: 145px;
        max-width: 80%;
        height: auto;
        width: auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

.notification-container .notification-body {
    height: auto;
    color: #5c5a56;
}

    .notification-container .notification-body #notification-details {
        padding: 15px 25px 10px 25px;
    }

    .notification-container .notification-body .description, .notification-container .notification-body .header {
        font-weight: bold;
        word-wrap: normal;
        display: inline-block;
        margin-top: 10px;
        margin-left: 0;
        font-size: 16px;
    }

    .notification-container .notification-body ul {
        padding-left: 0;
        list-style: none;
    }

        .notification-container .notification-body ul li:before {
            content: '-';
            margin-right: 5px;
        }

.notification-container .btn-to-basket {
    width: 100%;
    background-color: #0063A3;
    color: #fff;
    border-radius: 0;
    padding: 10px 25px;
}

    .notification-container .btn-to-basket .quantity {
        float: left;
        font-weight: bold;
    }

    .notification-container .btn-to-basket img {
        float: right;
    }

    .notification-container .btn-to-basket:focus {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

.notification-container .btn-to-basket-err {
    width: 100%;
    background-color: #E30721;
    color: #fff;
    border-radius: 0;
    padding: 10px 25px;
}

    .notification-container .btn-to-basket-err .quantity-err {
        float: left;
        font-weight: bold;
    }

    .notification-container .btn-to-basket-err img {
        float: right;
    }

    .notification-container .btn-to-basket-err:focus {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

#notification-details {
    padding-left: 5px 5px 0 5px;
}

#notification_basket {
    float: left;
}
