[data-theme="custom"], :root{
	--primary-color-hue: 216;
	--primary-color-saturation: 42%;
	--primary-color-lightness: 25%;
	--banner-background: url(../img/banner.svg);
}

.login-page {
	--login-logo: url("https://per.cristou.fr/document.php?hashp=5SjU9r1021SKFg5UsbRzhom0J3Loc8RE"); /* for relative path, must be relative to the css file or use full url starting by http:// */
}
/* Here, the content of the common custom CSS defined into Home - Setup - Display - CSS */
/* ==========================================================
   BLUECAP CONSULTING - CUSTOMER PORTAL
   COMPLETE CUSTOM THEME
   ========================================================== */

:root {
    --bc-navy: #0d3158;
    --bc-blue: #2e6097;
    --bc-blue-hover: #234f7d;

    --bc-bg: #f5f8fc;
    --bc-bg-soft: #f8fafc;

    --bc-white: #ffffff;
    --bc-text: #24364a;
    --bc-muted: #8796a8;

    --bc-border: #d7e1ec;
    --bc-border-hover: #bdcbda;
    --bc-border-focus: #4b79ad;

    --bc-radius: 11px;

    --bc-shadow:
        0 18px 45px rgba(20, 55, 90, 0.14);

    --bc-shadow-soft:
        0 8px 28px rgba(13, 49, 88, 0.055);
}


/* ==========================================================
   TYPOGRAPHIE GLOBALE
   ========================================================== */

body {
    font-family:
        "Segoe UI",
        Inter,
        Roboto,
        Arial,
        sans-serif;
}


/* ==========================================================
   LOGIN
   ========================================================== */

html,
body.login-page {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;
}


body.login-page {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(72, 112, 157, 0.08) 0,
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #f4f7fb 0%,
            #e9f0f8 100%
        );

    color: var(--bc-text);
}


.login-page__container {
    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px 20px;

    box-sizing: border-box;
}


.login-screen {
    position: relative;

    width: 100%;
    max-width: 460px;

    min-height: 0 !important;
    height: auto !important;

    background:
        rgba(255, 255, 255, 0.98);

    border:
        1px solid rgba(255, 255, 255, 0.90);

    border-radius: 22px;

    box-shadow:
        var(--bc-shadow);

    overflow: hidden;
}


.login-screen__background {
    display: none !important;
}


.login-screen__content {
    position: relative;
    z-index: 2;

    width: 100%;

    padding:
        24px
        42px
        24px !important;

    box-sizing: border-box;
}


.login__logo {
    width: 225px !important;
    height: 72px !important;

    margin:
        0 auto
        12px !important;

    background-size:
        contain !important;

    background-repeat:
        no-repeat !important;

    background-position:
        center center !important;
}


/* ----------------------------------------------------------
   LOGIN FIELDS
   ---------------------------------------------------------- */

.login__field {
    position: relative;

    width: 100%;
    min-height: 56px;

    display: flex;
    align-items: center;

    margin:
        0 0
        10px 0 !important;

    box-sizing: border-box;

    background:
        var(--bc-white);

    border:
        1px solid var(--bc-border);

    border-radius:
        var(--bc-radius) !important;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


.login__field:hover {
    border-color:
        var(--bc-border-hover);
}


.login__field:focus-within {
    border-color:
        var(--bc-border-focus);

    box-shadow:
        0 0 0 4px
        rgba(46, 96, 151, 0.10);

    transform:
        translateY(-1px);
}


.login__icon {
    position: absolute;

    left: 17px;
    top: 50%;

    transform:
        translateY(-50%);

    width: 18px;

    text-align: center;

    font-size: 15px;

    color:
        var(--bc-blue);

    z-index: 2;

    pointer-events: none;
}


.login__input {
    width: 100% !important;
    height: 54px !important;

    margin: 0 !important;

    padding:
        0
        16px
        0
        46px !important;

    box-sizing:
        border-box !important;

    border:
        none !important;

    outline:
        none !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:
        var(--bc-text) !important;

    font-family: inherit;

    font-size:
        14px !important;

    font-weight: 400;
}


.login__input:focus {
    border:
        none !important;

    outline:
        none !important;

    box-shadow:
        none !important;
}


.login__input::placeholder {
    color:
        var(--bc-muted);

    opacity: 1;
}


/* ----------------------------------------------------------
   CAPTCHA
   ---------------------------------------------------------- */

input[name="security_code"] {
    width:
        calc(100% - 135px) !important;

    min-width: 90px;

    padding-right:
        8px !important;
}


#img_securitycode {
    width:
        68px !important;

    height:
        30px !important;

    margin-left:
        2px !important;

    object-fit:
        contain;

    border: 0;

    border-radius:
        6px;

    background:
        #f5f7fa;

    vertical-align:
        middle;
}


#captcha_refresh_img {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        26px !important;

    height:
        26px !important;

    margin-left:
        4px !important;

    color:
        var(--bc-blue);

    font-size:
        16px;

    cursor:
        pointer;

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}


#captcha_refresh_img:hover {
    color:
        var(--bc-navy);

    transform:
        rotate(90deg);
}


/* ----------------------------------------------------------
   LOGIN BUTTON
   ---------------------------------------------------------- */

.login__submit {
    width:
        100% !important;

    min-height:
        52px !important;

    margin:
        0 !important;

    padding:
        0 20px !important;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        space-between;

    box-sizing:
        border-box;

    border:
        none !important;

    border-radius:
        var(--bc-radius) !important;

    background:
        linear-gradient(
            135deg,
            var(--bc-navy) 0%,
            var(--bc-blue) 100%
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 10px 22px
        rgba(18, 60, 103, 0.20);

    cursor:
        pointer;

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}


.login__submit:hover {
    transform:
        translateY(-1px);

    background:
        linear-gradient(
            135deg,
            #0a294a 0%,
            #275887 100%
        ) !important;

    box-shadow:
        0 14px 28px
        rgba(18, 60, 103, 0.25);
}


.login__submit:active {
    transform:
        translateY(0);

    box-shadow:
        0 7px 16px
        rgba(18, 60, 103, 0.18);
}


.login__submit .button__text {
    color:
        #ffffff !important;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        0.2px;

    text-transform:
        uppercase;
}


.login__submit .button__icon {
    margin-left:
        auto;

    color:
        #ffffff !important;

    font-size:
        18px;
}


.login-page a {
    color:
        var(--bc-blue);

    text-decoration:
        none;
}


.login-page a:hover {
    color:
        var(--bc-navy);
}


/* ==========================================================
   PAGES CONNECTÉES
   ========================================================== */

body:not(.login-page) {
    margin: 0;

    background:
        var(--bc-bg);

    color:
        var(--bc-text);
}


/* ==========================================================
   NAVBAR
   ========================================================== */

.primary-top-nav {
    min-height:
        60px !important;

    display: flex;
    align-items: center;

    padding:
        0 32px !important;

    background:
        #ffffff;

    border-bottom:
        1px solid #e5ebf2;

    box-shadow:
        0 2px 12px rgba(13, 49, 88, 0.05);

    position: relative;
    z-index: 20;
}


.primary-top-nav .brand {
    display: flex;
    align-items: center;
}


.primary-top-nav .brand__logo-link {
    display: flex;
    align-items: center;

    padding: 0;
}


.primary-top-nav .brand__logo-img {
    width:
        38px !important;

    height:
        38px !important;

    object-fit: contain;

    border-radius:
        9px;
}


.primary-top-nav .menu-entries {
    display: flex;
    align-items: stretch;

    gap: 6px;

    margin-left:
        20px;
}


.primary-top-nav .nav-item {
    list-style:
        none;
}


.primary-top-nav .nav-link {
    min-height:
        60px !important;

    display:
        flex;

    align-items:
        center;

    padding:
        0 18px;

    color:
        #5e6f82;

    font-size:
        14px;

    font-weight:
        500;

    text-decoration:
        none;

    border-bottom:
        3px solid transparent;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}


.primary-top-nav .nav-link:hover {
    color:
        var(--bc-navy);

    background:
        #f8fafc;
}


.primary-top-nav .nav-item.active .nav-link {
    color:
        var(--bc-navy);

    font-weight:
        650;

    border-bottom-color:
        var(--bc-blue);
}


.primary-top-nav .logout {
    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        4px;
}


.primary-top-nav .logout .nav-link {
    padding:
        0 12px;

    border-bottom:
        none;
}


.primary-top-nav .user-account-name {
    font-size:
        13px;

    font-weight:
        600;

    color:
        #516274;
}


.primary-top-nav .top-nav-icon {
    width:
        21px;

    height:
        21px;

    opacity:
        0.75;
}


.primary-top-nav .menu-entries-alt {
    display:
        none;
}


/* ==========================================================
   HERO
   ========================================================== */

.hero-header {
    position: relative;

    overflow: hidden;

    padding:
        22px 0
        20px !important;

    background:
        linear-gradient(
            120deg,
            #eef4fb 0%,
            #f7f9fc 65%,
            #ffffff 100%
        );

    border-bottom:
        1px solid #e7edf4;
}


.hero-header::before {
    content: "";

    position: absolute;

    width:
        220px;

    height:
        220px;

    left:
        -72px;

    top:
        -112px;

    border-radius:
        50%;

    border:
        34px solid
        rgba(46, 96, 151, 0.07);
}


.hero-header::after {
    content: "";

    position: absolute;

    width:
        145px;

    height:
        145px;

    left:
        150px;

    bottom:
        -72px;

    border-radius:
        50%;

    border:
        22px solid
        rgba(13, 49, 88, 0.035);
}


.hero-header .container {
    position:
        relative;

    z-index:
        2;

    width:
        calc(100% - 72px) !important;

    max-width:
        1500px;

    margin:
        0 auto;
}


.hero-header__title {
    margin:
        0 0
        3px !important;

    color:
        var(--bc-navy);

    font-size:
        28px !important;

    font-weight:
        600;

    line-height:
        1.15;

    letter-spacing:
        -0.5px;
}


.hero-header__desc {
    color:
        #718196;

    font-size:
        13px !important;

    line-height:
        1.4;

    font-weight:
        400;
}


/* ==========================================================
   CONTENU PRINCIPAL
   ========================================================== */

body:not(.login-page) > main.container {
    width:
        calc(100% - 56px) !important;

    max-width:
        1500px;

    margin:
        14px auto
        30px !important;

    padding:
        0;

    box-sizing:
        border-box;
}


/* ==========================================================
   CARTE LISTE
   ========================================================== */

#searchFormList {
    background:
        #ffffff;

    padding:
        14px !important;

    border:
        1px solid #e5ebf2;

    border-radius:
        14px !important;

    box-shadow:
        var(--bc-shadow-soft);
}


/* ==========================================================
   SUPPRESSION TITRE REDONDANT
   ========================================================== */

[id^="webportal-"][id$="-pagination"] {
    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border-bottom:
        none !important;
}


[id^="webportal-"][id$="-pagination"] ul {
    display:
        none !important;
}


/* ==========================================================
   TABLE WRAPPER
   ========================================================== */

#searchFormList figure {
    width:
        100%;

    margin:
        0 !important;

    overflow-x:
        auto;

    border:
        1px solid #e5ebf2;

    border-radius:
        10px !important;

    background:
        #ffffff;
}


/* ==========================================================
   TABLE
   ========================================================== */

#searchFormList table {
    width:
        100%;

    margin:
        0 !important;

    border-collapse:
        separate !important;

    border-spacing:
        0 !important;

    background:
        #ffffff;

    font-size:
        13px !important;
}


/* ==========================================================
   FILTRES
   ========================================================== */

#searchFormList thead tr[role="search-row"] td {
    padding:
        8px 7px !important;

    vertical-align:
        middle;

    background:
        #f8fafc;

    border-bottom:
        1px solid #e8edf3;
}


#searchFormList thead input[type="text"],
#searchFormList thead select {
    width:
        100%;

    min-height:
        32px !important;

    margin:
        0;

    padding:
        5px 8px !important;

    box-sizing:
        border-box;

    background:
        #ffffff;

    border:
        1px solid #d9e2ec !important;

    border-radius:
        7px !important;

    color:
        #3d4e60;

    font-family:
        inherit;

    font-size:
        12px !important;

    outline:
        none;

    box-shadow:
        none !important;
}


#searchFormList thead input[type="text"]:focus,
#searchFormList thead select:focus {
    border-color:
        var(--bc-border-focus) !important;

    box-shadow:
        0 0 0 3px
        rgba(46, 96, 151, 0.09) !important;
}


/* ==========================================================
   DATEPICKER - VERSION CORRIGÉE
   ========================================================== */

/*
   Dolibarr applique max-width sur .maxwidthdate.
   C'est ce qui décalait les icônes.
*/

#searchFormList .grid.width150 {
    width:
        100% !important;

    display:
        block !important;

    margin:
        0 0
        4px 0 !important;
}


#searchFormList .grid.width150:last-child {
    margin-bottom:
        0 !important;
}


#searchFormList .divfordateinput {
    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    min-width:
        0 !important;

    box-sizing:
        border-box !important;
}


#searchFormList input.maxwidthdate,
#searchFormList .divfordateinput input.maxwidthdate,
#searchFormList input.hasDatepicker {
    display:
        block !important;

    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    height:
        32px !important;

    min-height:
        32px !important;

    padding:
        5px
        30px
        5px
        9px !important;

    margin:
        0 !important;

    box-sizing:
        border-box !important;
}


/* Icône intégrée dans le champ */

#searchFormList .divfordateinput > img.ui-datepicker-trigger {
    position:
        absolute !important;

    top:
        50% !important;

    right:
        9px !important;

    transform:
        translateY(-50%) !important;

    width:
        14px !important;

    height:
        14px !important;

    min-width:
        14px !important;

    max-width:
        14px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    object-fit:
        contain !important;

    opacity:
        0.55;

    cursor:
        pointer;

    z-index:
        3;
}


#searchFormList .divfordateinput > img.ui-datepicker-trigger:hover {
    opacity:
        1;
}


/* ==========================================================
   BOUTONS FILTRES
   ========================================================== */

.btn-filter-icon {
    width:
        32px !important;

    height:
        32px !important;

    margin:
        0 2px !important;

    padding:
        0 !important;

    border:
        1px solid #dbe3ec !important;

    border-radius:
        7px !important;

    background-color:
        #ffffff !important;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


.btn-filter-icon:hover {
    background-color:
        #eef4fb !important;

    border-color:
        #c5d4e3 !important;

    transform:
        translateY(-1px);
}


/* ==========================================================
   HEADERS TABLE
   ========================================================== */

#searchFormList thead tr:not([role="search-row"]) th {
    padding:
        9px 9px !important;

    background:
        #ffffff;

    border-bottom:
        1px solid #e5ebf2;

    color:
        #5b6c80;

    font-size:
        11px !important;

    font-weight:
        650;

    letter-spacing:
        0.02em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}


#searchFormList thead th a {
    color:
        #5b6c80 !important;

    text-decoration:
        none !important;
}


#searchFormList thead th a:hover {
    color:
        var(--bc-blue) !important;
}


/* ==========================================================
   BODY TABLE
   ========================================================== */

#searchFormList tbody td {
    padding:
        10px 9px !important;

    color:
        #435365;

    border-bottom:
        1px solid #edf1f5;

    background:
        #ffffff;

    vertical-align:
        middle;

    font-size:
        13px !important;

    transition:
        background 0.15s ease;
}


#searchFormList tbody tr:hover td {
    background:
        #f8fbff;
}


#searchFormList tbody td[data-col="ref"] {
    color:
        var(--bc-navy);

    font-weight:
        600;
}


#searchFormList tbody td[data-col="total_ht"],
#searchFormList tbody td[data-col="total_tva"],
#searchFormList tbody td[data-col="total_ttc"] {
    font-variant-numeric:
        tabular-nums;

    white-space:
        nowrap;
}


#searchFormList tbody td[data-col="total_ttc"] {
    color:
        var(--bc-navy);

    font-weight:
        650;
}


/* ==========================================================
   BADGES
   ========================================================== */

#searchFormList .badge {
    display:
        inline-flex;

    align-items:
        center;

    padding:
        4px 8px !important;

    border-radius:
        999px !important;

    border:
        none !important;

    font-size:
        11px !important;

    font-weight:
        650;

    line-height:
        1.2;

    white-space:
        nowrap;
}


#searchFormList .badge-status1 {
    background:
        #fff3cd !important;

    color:
        #8a5b00 !important;
}


#searchFormList .badge-status2 {
    background:
        #e5f6ed !important;

    color:
        #176c43 !important;
}


#searchFormList .badge-status3 {
    background:
        #fdecec !important;

    color:
        #9c2f2f !important;
}


#searchFormList .badge-status4 {
    background:
        #e8f0fb !important;

    color:
        #245b91 !important;
}


/* ==========================================================
   PDF / SIGNATURE
   ========================================================== */

#searchFormList a[role="downloadlink"],
#searchFormList a[role="signaturelink"] {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px !important;

    padding:
        5px 7px !important;

    border-radius:
        7px;

    color:
        var(--bc-blue) !important;

    font-size:
        12px !important;

    font-weight:
        600;

    text-decoration:
        none !important;
}


#searchFormList a[role="downloadlink"]:hover,
#searchFormList a[role="signaturelink"]:hover {
    color:
        var(--bc-navy) !important;

    background:
        #eef4fb;
}


#searchFormList a[role="downloadlink"] .fa-file-pdf {
    color:
        #bd2c2c;
}


#searchFormList a[role="signaturelink"] .fa-file-signature {
    color:
        var(--bc-blue);
}


/* ==========================================================
   TOTAL
   ========================================================== */

#searchFormList tbody tr:last-child td {
    background:
        #f8fafc;

    border-bottom:
        none;

    color:
        #596b7f;

    font-weight:
        600;
}


#searchFormList tbody tr:last-child td.essai {
    color:
        var(--bc-navy);

    font-weight:
        700;
}


/* ==========================================================
   JQUERY DATEPICKER POPUP
   ========================================================== */

.ui-datepicker {
    padding:
        10px !important;

    border:
        1px solid #d9e2ec !important;

    border-radius:
        12px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 14px 35px
        rgba(13, 49, 88, 0.15) !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;
}


.ui-datepicker-header {
    border:
        none !important;

    background:
        #f5f8fc !important;

    border-radius:
        8px !important;
}


.ui-datepicker td a {
    text-align:
        center !important;

    border:
        none !important;

    background:
        transparent !important;

    border-radius:
        6px !important;
}


.ui-datepicker td a:hover {
    background:
        #eaf1f8 !important;
}


.ui-datepicker .ui-state-active {
    background:
        var(--bc-blue) !important;

    color:
        #ffffff !important;
}


/* ==========================================================
   RESPONSIVE TABLETTE
   ========================================================== */

@media screen and (max-width: 900px) {

    .primary-top-nav {
        min-height:
            60px !important;

        padding:
            0 18px !important;
    }


    .primary-top-nav .menu-entries {
        display:
            none;
    }


    .primary-top-nav .menu-entries-alt {
        display:
            flex;

        order:
            -1;

        margin-right:
            8px;
    }


    .primary-top-nav .nav-link {
        min-height:
            60px !important;
    }


    .hero-header {
        padding:
            20px 0 !important;
    }


    .hero-header .container {
        width:
            calc(100% - 40px) !important;
    }


    .hero-header__title {
        font-size:
            25px !important;
    }


    body:not(.login-page) > main.container {
        width:
            calc(100% - 24px) !important;

        margin-top:
            12px !important;
    }


    #searchFormList {
        padding:
            12px !important;
    }
}


/* ==========================================================
   RESPONSIVE MOBILE
   ========================================================== */

@media screen and (max-width: 600px) {

    .primary-top-nav {
        padding:
            0 12px !important;
    }


    .primary-top-nav .user-account-name {
        display:
            none;
    }


    .hero-header {
        padding:
            18px 0 !important;
    }


    .hero-header .container {
        width:
            calc(100% - 28px) !important;
    }


    .hero-header__title {
        font-size:
            23px !important;
    }


    .hero-header__desc {
        font-size:
            13px !important;
    }


    body:not(.login-page) > main.container {
        width:
            calc(100% - 18px) !important;

        margin:
            10px auto
            24px !important;
    }


    #searchFormList {
        padding:
            10px !important;

        border-radius:
            12px !important;
    }


    #searchFormList figure {
        border-radius:
            8px !important;
    }
}


/* ==========================================================
   LOGIN RESPONSIVE
   ========================================================== */

@media screen and (max-width: 700px) {

    .login-page__container {
        padding:
            20px 16px;
    }


    .login-screen {
        max-width:
            410px;

        border-radius:
            18px;
    }


    .login-screen__content {
        padding:
            24px
            32px
            24px !important;
    }


    .login__logo {
        width:
            200px !important;

        height:
            68px !important;

        margin-bottom:
            12px !important;
    }
}


@media screen and (max-width: 480px) {

    body.login-page {
        background:
            #eef3f9;
    }


    .login-page__container {
        padding:
            14px;
    }


    .login-screen {
        width:
            100%;

        border-radius:
            16px;

        box-shadow:
            0 12px 35px
            rgba(20, 55, 90, 0.15);
    }


    .login-screen__content {
        padding:
            22px !important;
    }


    .login__logo {
        width:
            180px !important;

        height:
            62px !important;

        margin-bottom:
            12px !important;
    }


    .login__field {
        min-height:
            54px;

        margin-bottom:
            9px !important;
    }


    .login__input {
        height:
            52px !important;

        font-size:
            16px !important;
    }


    input[name="security_code"] {
        width:
            calc(100% - 125px) !important;
    }


    #img_securitycode {
        width:
            62px !important;
    }


    #captcha_refresh_img {
        width:
            24px !important;

        height:
            24px !important;
    }


    .login__submit {
        min-height:
            50px !important;
    }
}


@media screen
and (max-height: 700px)
and (min-width: 481px) {

    .login-page__container {
        padding:
            14px 20px;
    }


    .login-screen__content {
        padding-top:
            18px !important;

        padding-bottom:
            18px !important;
    }


    .login__logo {
        height:
            58px !important;

        margin-bottom:
            8px !important;
    }


    .login__field {
        min-height:
            50px;

        margin-bottom:
            8px !important;
    }


    .login__input {
        height:
            48px !important;
    }


    .login__submit {
        min-height:
            48px !important;
    }
}


/* ==========================================================
   END BLUECAP THEME
   ========================================================== */