:root {
    --craura-blue: #017acd;
    --craura-grey: #2b343e;
    --craura-red: #c10230;
}

* {
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0px;
}

body {
    background-color: #fff;
    background-image: none !important;
}

a {
    color: var(--craura-blue);
    text-decoration: none;
}

/* Password Input */
#Password {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Large Desktop */
@media (min-width: 1200px) {
    #pu-header {
        height: 180px !important;
    }

    .pu-header-container {
        width: 100%;
    }

    .pu-header-home {
        margin-right: 15em;
    }
}

/* Desktop */
@media (min-width: 992px) and (max-width: 1200px) {
    #pu-header {
        height: 180px !important;
    }

    .pu-header-container {
        width: 100%;
    }

    .pu-header-home {
        margin-right: 3em;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    #pu-header {
        height: 90px !important;
    }

    .pu-header-home {
        margin-right: 3em;
    }

    .pu-nav ul {
        border-color: var(--craura-blue);
    }

    .pu-nav-toggle {
        background-color: var(--craura-blue) !important;
        color: #ffffff !important;
    }
}

/* Mobile */
@media (min-width: 300px) and (max-width: 768px) {
    #pu-header {
        height: 150px !important;
    }

    .pu-nav ul {
        border-color: var(--craura-blue);
    }

    .pu-nav-toggle {
        background-color: var(--craura-blue) !important;
        color: #ffffff !important;
    }

    .pu-header-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #pu-header-title {
        font-size: 21px;
    }
}

#pu-header {
    background-color: #ffffff;
    color: var(--craura-blue);
}

    #pu-header .container:first-of-type {
        padding-bottom: 0;
    }

#pu-header-title {
    color: var(--craura-blue);
    background-color: transparent;
    font-size: 28px;
    font-weight:600;
    padding-top:1rem;
}

.jumbotron {
    /*background: #fbfbfb;*/
}

.container .jumbotron,
.jumbotron {
    border-radius: 0;
}

.pu-nav > ul > li > a {
    color: var(--craura-grey) !important;
}

/* Footer */
.pu-footer {
    background: url("../../Images/Specif/Craura/background-craura.png") repeat center center;
    background-size: cover;
    color: #fff;
}

.pu-block {
    border: none;
    border-radius: 0;
}

    .pu-block h1,
    .pu-block h2 {
        color: var(--craura-grey);
    }

    .pu-block legend,
    .pu-block legend.right {
        color: var(--craura-grey);
        border: none;
    }

    .pu-block .btn {
        background-color: var(--craura-grey);
        color: #fff;
        border: 1px solid var(--craura-grey);
        padding: 13px 30px;
        border-radius: 32px;
        font-weight: bold;
    }

        .pu-block .btn:hover {
            background-color: #fff;
            border: 1px solid var(--craura-grey);
            color: var(--craura-grey);
        }

        .pu-block .btn.primary {
            background-color: var(--craura-blue);
            color: #fff;
        }

            .pu-block .btn.primary:hover {
                background-color: #fff;
                color: var(--craura-blue);
                border: 1px solid var(--craura-blue);
            }

#Connexion .pu-block {
    border-width: 1px 1px 1px 4px !important;
    border-color: var(--craura-grey);
    background-color: #fff;
    border-style: solid;
    border-radius: .5rem;
}

.pu-arrets-titre {
    background-color: var(--craura-blue);
    color: #fff;
    border: 1px solid var(--craura-blue);
    font-weight: bold;
}

.pu-arrets-items .table-bordered,
.pu-arrets-items .table-bordered > thead > tr > th,
.pu-arrets-items .table-bordered > tbody > tr > td {
    border-color: var(--craura-blue);
}

.pu-arrets-item-selected {
    background-color: var(--craura-blue);
}

.pu-arrets-item-iti-color {
    border: 1px solid var(--craura-blue);
}

#pu-account {
    border: 1px solid var(--craura-blue);
    border-radius: 0;
}

.pu-account-header {
    color: #fff;
    font-weight: bold;
    background-color: var(--craura-blue);
    border-bottom: 1px solid var(--craura-blue);
}

.badge {
    background-color: var(--craura-blue);
}

.pu-block .pu-block {
    border-left: none;
}

.pu-etat,
.pu-suivi-etat-demande {
    color: var(--craura-grey);
}

.pu-piece-comp-regroup {
    background-color: #F5F5F5 !important;
    color: #e6e6e6;
}

.pu-block .pu-btn-color {
    background-color: var(--craura-grey) !important;
    color: #fff !important;
}

    .pu-block .pu-btn-color:hover {
        background-color: var(--craura-grey) !important;
        color: #fff !important;
    }

.horaire-item-header-correspondances-info {
    color: var(--craura-blue);
}

.content-segment-code-ligne {
    color: var(--craura-blue);
}

.horaire-item-header-daysofservice {
    color: var(--craura-blue);
}

.segment-drawing-depart-icon {
    border-color: var(--craura-blue);
    color: var(--craura-blue);
}

.segment-drawing-line {
    background: var(--craura-blue);
}

.segment-drawing-arrivee-icon {
    border-color: var(--craura-blue);
    color: var(--craura-blue);
}

.horaire-item-selected {
    border-color: var(--craura-blue);
}

/* V2 styles */
.cards-header, .header-account-card {
    background: var(--craura-grey);
}

.sidebar {
    background: var(--craura-grey);
}

    .sidebar ul li a {
        color: #fff;
    }

        .sidebar ul li a:hover {
            background: var(--craura-blue);
            color: #fff;
        }

.selected-sidebar-button {
    background: var(--craura-blue);
    color: #fff !important;
}

    .selected-sidebar-button .puce-nb {
        background: #f0f0f0;
        color: #444;
    }

#notificationTitle {
    background-color: var(--craura-grey);
    color: #fff;
}

#notificationContainer::before {
    border-color: transparent transparent #f6f2ee;
}

#notificationsBody li:hover {
    background-color: #fff;
    color: var(--craura-grey);
}

.dropdown-demande-element {
    background-color: var(--craura-grey);
    color: #fff;
}

    .dropdown-demande-element:hover {
        background-color: var(--craura-blue);
        color: #fff;
    }

.title {
    font-size: 17px;
    font-weight: 200;
    color: var(--craura-grey);
    padding-bottom: 10px;
}

.notificationDefault {
    background: var(--craura-grey);
    color: #fff;
    font-size: 14px;
}

.pu-piece-comp-regroup {
    background: var(--craura-grey) !important;
    color: #fff;
}

.section-header .section-title {
    color: var(--craura-grey);
}

.puce-nb {
    background: var(--craura-red);
    color: #fff;
}