:root {
    --idfm-lightgrey: #B6B4B4;
    --idfm-grey: #53606e;
    --idfm-darkgrey: #25303b;
    --idfm-blue: #1972d2;
    --idfm-orange: #E79701;
}

html {
    background: #d4e4ed url("../../Images/Specif/Idfm/background.png") no-repeat top center; /* $cg33-color-1 */
}

body {
    background: transparent;
}

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

    #pu-header-title {
        margin-left: 3em;
    }

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

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

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

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

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

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

    .pu-nav-toggle {
        background-color: var(--idfm-blue) !important;
        color: white !important;
    }
}

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

    #pu-header-logo {
        max-width: 250px;
    }
    .pu-nav ul {
        border-color: var(--idfm-blue);
    }

    .pu-nav-toggle {
        background-color: var(--idfm-blue) !important;
        color: white !important;
    }

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

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

#pu-header {
    color: var(--idfm-darkgrey); /* $pu-color-3 */
    background: white;
}

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

#pu-header-title {
    color: var(--idfm-darkgrey);
}

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

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

#pu-full-content {
    min-height: calc(100vh - 111px); /* $pu-header + $pu-footer */
}

#pu-header .container,
#pu-full-content.container {
    background-color: #FFF; /* $cg33-color-1 */
    border-left: 1px solid var(--idfm-lightgrey); /* $cg33-color-3 */
    border-right: 1px solid var(--idfm-lightgrey); /* $cg33-color-3 */
}

#pu-account {
    background-color: #fff; /* $pu-color-5 */
    border: 1px solid var(--idfm-darkgrey);
}

.pu-account-header {
    color: #fff; /* $pu-color-1 */
    background-color: var(--idfm-darkgrey); /* $pu-color-3 */
    border-bottom: 1px solid #afafaf; /* $pu-color-2 */
}

    .pu-account-header a {
        color: #fff;
    }

    .pu-account-header .fas, .far, .fab {
        font-size: 1.5em; /* $pu-button-font-size */
    }

    .pu-block legend,
    .pu-block legend.right {
        color: var(--idfm-blue); /* $pu-color-3 */
        font-weight: bold;
        border-bottom: 1px solid var(--idfm-blue); /* $pu-color-4 */
    }


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

        .pu-block .btn:hover {
            color: #fff;
            background-color: var(--idfm-blue);
            border-color: var(--idfm-blue);
        }

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

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

    .pu-block .pu-connexion-auto button {
        color: var(--idfm-darkgrey); /* $pu-color-3 */
        background-color: #fff; /* $pu-color-1 */
        border: 1px solid var(--idfm-darkgrey); /* $pu-color-3 */
    }

.pu-footer {
    color: #fff; /* $pu-color-1 */
    background-color: var(--idfm-darkgrey); /* $pu-color-3 */
    border-top: 1px solid #afafaf; /* $pu-color-2 */
}

    .pu-footer a {
        color: #fff; /* $pu-color-1 */
    }

@media (min-width: 1200px) {
    #pu-account {
        background-color: transparent;
        border-radius: 4px; /* $pu-border-radius */
    }
}

.pu-suivi-etat-demande {
    color: #afafaf; /* $pu-color-2 */
}

.pu-etat {
    color: var(--idfm-darkgrey); /* $pu-color-4 */
}

.popupContent h1 {
    border-bottom: 1px solid var(--idfm-darkgrey); /* $pu-color-4 */
    color: var(--idfm-darkgrey); /* $pu-color-3 */
}

.pu-separation {
    border-bottom: 1px solid var(--idfm-darkgrey); /* $pu-color-4 */
}

.pu-block .pu-btn-color, .pu-block .pu-btn-color:hover {
    background-color: var(--idfm-orange); /* $pu-color-5 */
}

legend {
    border-bottom: 1px solid var(--idfm-darkgrey);
}

.idfm-bleu {
    color: var(--idfm-blue);
}


#Connexion .pu-block {
    border: 1px solid var(--idfm-darkgrey);
    background-color: #f7f7f7;
}

.pu-background-color-6 {
    background-color: #64b5f6 !important; /* $pu-color-6 */
}

#Connexion .pu-block legend,
.pu-block legend.right {
    color: var(--idfm-darkgrey); /* $pu-color-3 */
    font-weight: bold;
    border-bottom: 1px solid var(--idfm-darkgrey); /* $pu-color-4 */
}

#Connexion .pu-block .btn.primary {
    color: #fff;
    background-color: var(--idfm-grey);
}

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

.pu-arrets-titre {
    color: #000;
    background-color: #fff; /* $pu-color-1 */
    border: 1px solid #afafaf; /* $pu-color-2 */
}

.pu-arrets-items .table-bordered,
.pu-arrets-items .table-bordered > thead > tr > th,
.pu-arrets-items .table-bordered > tbody > tr > td {
    border-color: #afafaf; /* $pu-color-2 */
}

.pu-arrets-item-selected {
    background-color: var(--idfm-blue); /* $pu-color-6 */
}

.pu-arrets-item-iti-color {
    border: 1px solid #afafaf; /* $pu-color-2 */
}



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

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

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

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

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

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

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


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

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

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

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

.selected-sidebar-button {
    background: var(--idfm-blue);
}

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

#notificationContainer::before {
    border-color: transparent transparent var(--idfm-grey);
}

#notificationsBody li:hover {
    background-color: var(--idfm-blue);
    color: #fff;
}

.dropdown-demande-element {
    background-color: var(--idfm-grey);
}

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


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

.notificationDefault {
    background: #afafaf;
    color: #fff;
    font-size: 14px;
}

.pu-piece-comp-regroup {
    background: var(--idfm-blue) !important;
}

.section-header .section-title {
    color: var(--idfm-blue);
}