@charset "utf-8";
html, body { height: 100%; padding : 0; margin: 0; background-color: #FFFFFF; }

body, h1, h2, h3, h4, h5, h6 { font-weight: 600 !important; }

body#homepage { display: flex; flex-direction: column; min-height: 100vh; margin: 0; overflow: hidden; }

.navbar { flex-shrink: 0; height: 75px; padding: 0px; border-bottom: 0px; box-shadow: 1px 1px 5px #b9413c; z-index: 100; }
.navbar-expand-lg .navbar-nav { height: 100%; display: flex; align-items: center; }
nav.navbar li a { font-size: 16px; font-weight: 400; color: #FFFFFF; }
nav.navbar li a:hover { color: #FFFFFF; }
nav.navbar li ul li a { text-align: initial; color:#000000; text-decoration: none; }
nav.navbar li ul li a:hover { color:#000000; }
nav.navbar .collapse { width: 100vw; }

nav.navbar .collapse div.dropleft { position: absolute; right: 10px; }

.navbar-nav li.nav-item a:not(.dropdown-toggle):not(#listsociete li a) { position: relative; }

.navbar-nav li.nav-item a:not(.dropdown-toggle):not(#listsociete li a):after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: rgba(255, 255, 255, 0.5); /* ta couleur */ transform: translateX(-50%); transition: width 0.5s ease; }

.navbar-nav li.nav-item a:not(.dropdown-toggle):not(#listsociete li a):hover::after { width: 100%; }

#listsociete { overflow-y: scroll; max-height: 80vh; }
#listsociete li { padding: 5px 0 5px 10px; }
#listsociete li:hover { background-color: rgba(61, 63, 125,.2); cursor: pointer; }
#listsociete li a { display: block; width: 100%; }
.dropdown-menu { padding: 0; }
.dropdown-menu tbody>tr:nth-child(16){ padding: 15px 0; }
div.dropleft .dropdown-menu { left: -350px;}

span.puce_info { display: inline-flex; align-items: center; justify-content: center; text-align: center; margin: 0 5px; background-color: #b9413c; height: 20px; width: 20px; border-radius: 50%; }
/* Page LOGIN */
#authpage { display: flex; align-items: center; background-color: #e9eef5; }
#authpage .container { width: 450px; margin: 0 auto; }
#authpage .container .formblock_title { margin: 0 0 50px; text-align: center; }

#formblock { padding: 10px; box-shadow: 1px 1px 10px #3d3f7d; border-radius: 5px; background-color: #FFFFFF; }
#formblock .formblock_welcome { min-width: 200px; max-width: 300px; margin: -30px auto; padding: 10px 0; background-color: #b9413c; color: #FFFFFF; text-align: center; border-radius: 5px; font-size: 17px; }
#formblock .formblock_welcome img { height: 25px; }

#formblock .formblock_flags { padding: 40px 0 20px ;}
#formblock .formblock_inputs input { margin: 10px 0; border-radius: 5px; max-width: 75%; }

#formblock .formblock_flags,
#formblock .formblock_resetpsw { text-align: right; }

#formblock .formblock_valid { margin: 30px 0; }
#formblock .formblock_valid button { padding: 5px 10px; background-color: #3d3f7d; color: #FFFFFF; box-shadow: 1px 3px 10px #3d3f7d; border: none; border-radius: 5px; margin: 20px 0 0;}
#formblock .formblock_valid .g-recaptcha { width: 303px; margin: 0 auto; }
#formblock .formblock_resetpsw { font-size: 12px; }

#formblock .formblock_title,
#formblock .formblock_inputs,
#formblock .formblock_valid { text-align: center; }

#authpage .footer { text-align: center; padding: 10px 0; width: 100vw; background: #3d3f7d; color: #FFFFFF; font-weight: 400; box-shadow: 1px -1px 5px #b9413c; z-index: 100; position: absolute; bottom: 0px; overflow: hidden; }

/* Pages INTERNES */
#homepage { display: flex; flex-direction: column; }

.badge-primary { background-color: #3d3f7d !important; padding: .6em !important; }


#container { flex: 1; background-color: #e9eef5; overflow: auto; }

.progress, .progress-bar { display: flex; overflow: hidden; position: relative; width: 150px; align-items: center; }

.progress { height: auto !important; width: 100%; }
.progress_label { position: absolute; color: #000000; width: 100%; line-height: 13px; word-wrap: normal; font-size: smaller; }
.progress-bar { height:35px; }


/* MESSAGERIE */
#infomessage .container { margin: 0 auto; }
/*.col_gauche_messagerie.bg_messagerie { background-image: url('../img/logo_messagerie.png'); background-size: 300px; background-repeat: no-repeat; background-position: center;}*/
#messagerie_chat { background-color: #FFFFFF; border: 2px solid rgb(41, 43, 91); border-radius: 10px;}

.btn_messagerie { width: auto; }

a.btn_messagerie span  { color: rgb(41, 43, 91); text-decoration: none; margin: 0 10px; font-size: 20px; cursor: pointer; }
.col_gauche_messagerie a.btn_messagerie span { color: rgb(41, 43, 91); text-decoration: none; margin: 0 10px; font-size: 20px; cursor: pointer; }
.col_droite_messagerie a.btn_messagerie span { color: rgb(41, 43, 91); text-decoration: none; float: right; margin: 0 10px; font-size: 20px; cursor: pointer; }
/* .bottom_wrapper_messagerie { background: linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)), url('../img/bg_messagerie.png'); background-size: contain; } */
#content-sav { background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.95)), url('../img/bg_messagerie.png'); background-size: contain; }
.bottom_wrapper_messagerie { background: rgba(255, 255, 255, 0.5); border: 2px solid rgb(41, 43, 91); box-shadow: 1px 5px -5px rgba(185, 64, 60, 1); border-radius: 10px; }

.bottom_wrapper { position: relative; width: 100%; background-color: rgba(255, 255, 255, 1); padding: 20px 20px; position: absolute; bottom: 0; }
#filemessage { background-color: #FFFFFF; overflow-x: auto; padding: 5px 5px 0 0; }/* .bottom_wrapper .message_input_wrapper { display: inline-block; height: 50px; border-radius: 25px; border: 1px solid #bcbdc0; width: calc(100% - 10px); position: relative; padding: 0 20px; } */

/* Style commun aux messages */
#filemessage li {
    max-width: 70%;
    padding: 10px 14px;
    margin-bottom: 15px;
    border-radius: 18px;
    line-height: 1.2;
    font-size: 12px;
    position: relative;
    word-wrap: break-word;
    clear: both;
}

/* Message entrant (gauche) */
#filemessage li.in {
    background-color: rgba(185, 64, 60, 1);
    color: #fff;
    float: left;
    border-bottom-left-radius: 4px;
}
#filemessage li.in h5 { font-size: 1rem; }


/* Message sortant (droite) */
#filemessage li.out {
    background-color: rgba(41, 43, 91, 1);
    color: #fff;
    float: right;
    border-bottom-right-radius: 4px;
}
#filemessage li.out h5 { font-size: 1rem; }

.message_input_wrapper .message_input { width: 100%; border-radius: 25px; padding: 5px 10px; }
.send_message { width: 100px; height: 50px; display: inline-block; border-radius: 50px; background-color: #a3d063; border: 2px solid #a3d063; color: #fff; cursor: pointer; transition: all 0.2s linear; text-align: center; float: right; }
.send_message:hover { color: #a3d063; background-color: #fff; }
.send_message .text { font-size: 18px; font-weight: 300; display: inline-block; line-height: 48px; }

textarea#sendmsg { width: 100%; box-sizing: border-box; border-radius: 10px; margin-top: 5px;}

/* Attente Infos (page13) */
table#table_form,
table#table_grille,
table#table_piedpage { width: 80vw; margin: 0 auto; }

.tab-content table#table_form { width: 100%; }

/* table#table_form,
table#table_grille,
table#table_piedpage { width: 80vw; margin: 0 auto; } */

table#table_form { height: 50px;}
table#table_form td { padding: 5px;}

table#table_grille { box-shadow: 1px 3px 10px #3d3f7d;  }
table#table_grille thead th { vertical-align: middle; text-align: initial; height: 45px; }
table#table_grille tr:nth-child(even) { background-color: rgba(255, 255, 255,0.3); }
table#table_grille tr:nth-child(odd) { background-color: rgba(61, 63, 125,0.3); }

table#table_grille td,
table#table_piedpage td { vertical-align: middle; background-color: initial; max-width: 100px; word-wrap: break-word; text-wrap: nowrap; overflow: hidden;  }



#double_grille,
#table_piedpage { text-align: right; width: 80vw; margin: 0 auto; padding: 0 0 10px; }

table#table_grille thead { position: relative; z-index: 1;}
table#table_grille td button { display: inline-flex; height: 32px; width: 32px; align-items: center; justify-content: center; }

/* #double_grille thead { height: 60px; }
table#table_grille.table_left { width:25%; margin: 0; float: left; border-right: 3px solid #000000; }
table#table_grille.table_right { width: 75%; margin: 0; float: left; } */

#double_grille thead { height: 60px; }

#table_left,
#table_right { height: 70vh; overflow-y: scroll; float: left; }

#table_left { width: 25%; }
#table_right { width: 75%; }
table#table_grille.table_left { width:100%; margin: 0; ; border-right: 3px solid #000000; }
table#table_grille.table_left thead th { width: 150px; }
table#table_grille.table_right { width: 100%; margin: 0; }

.table_interligne { text-align: center; }


select.select_placeholder { color: grey; }
select.select_placeholder option { color: #000000; }
select.select_placeholder option:first-child,
select.select_placeholder option:last-child { display: none; }

.search { position:relative; display: inline-block;}
.search .search_input { padding-left: 35px; }
span.glyphicon-search {position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none;}


/* ### BULLE TABLE ### */

/* Style pour cellule avec texte tronqué */
.truncate-cell { position: relative; max-width: 250px; cursor: pointer; text-transform: lowercase; overflow:visible !important;}
.truncate-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-transform: lowercase; }
/* Bulle d'info */
.truncate-cell::before { content: attr(data-full-text); position: absolute; top: -5px; left: 50%; transform: translateX(-50%) translateY(-100%); background-color: #333; color: white; padding: 5px 15px; border-radius: 6px; font-size: 14px; white-space: normal; word-wrap: break-word; width: 350px; max-width: 400px; opacity: 0; visibility: hidden; transition: opacity 0.3s; z-index: 1000; }
/* Flèche */
.truncate-cell::after { content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #333; opacity: 0; visibility: hidden; transition: opacity 0.3s; z-index: 1000; }
/* Affichage au survol */
.truncate-cell:hover::before,
.truncate-cell:hover::after { opacity: 1; visibility: visible; }

/* ### BULLE TABLE FIN ### */

/* page 11 */
.modal-header-tracking { padding: 0 1rem !important; }
button.btn-close-tracking { position: absolute; right: 10px; top: 10px; z-index: 1; }
.card { border: none !important; }

.timeline-container .row { min-height: 120px; padding: 25px 0; }
.timeline-container::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: transparent;  transform: translateX(-50%); border: 2px solid #e0e0e0; }

.info_tracking { position: relative; border: 1px solid rgb(61, 63, 125); border-radius: 10px; }
.info_tracking.shadow-custom { border-color: #3d3f7d !important; box-shadow: 0 2px 5px 0 #3d3f7d, 0 2px 10px 0 #3d3f7d !important; }
.info_tracking.shadow-danger { border-color: red !important; box-shadow: 0 2px 5px 0 red, 0 2px 10px 0 red !important; }
/* Point sur la timeline */

.tracking_glyphicon { 
    position: absolute; 
    background-color: rgb(61, 63, 125); 
    border-radius: 100px; 
    color: #FFFFFF; 
    height: 50px; 
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.tracking_glyphicon::before {
    display: block;
    transform: translateY(1px); /* Ajuste selon tes besoins, peut être 2px ou -1px */
}
.tracking_glyphicon_danger { position: absolute; background-color: red; padding: 13px 15px; border-radius: 100px; color: #FFFFFF; }

.tracking_glyphicon_left { top: 0px; right: -43px;}
.tracking_glyphicon_right { top: 0px; left: -43px;}

.info_tracking::after {
    /* content: '\e122';
    position: absolute;
    padding: 15px;
    background: rgb(61, 63, 125);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #FFFFFF; */
}

.row:nth-child(odd) .info_tracking::after {
  /* right: -22px; Gauche -> point à droite */
}

.row:nth-child(even) .info_tracking::after {
  /* left: -22px; Droite -> point à gauche */
}

.tab-pane { padding: 30px; }

.col_um_header, .col_tiers_header { background-color: #3d3f7d; color: #FFF; padding-left: 0px !important; padding-right: 0px !important; }

.dtMaterialDesignExample .zebra,
.col_tiers_header { margin: 0px !important; padding: 5px 0; }

.dtMaterialDesignExample .zebra:nth-child(even),
.scrollable-um .um-row:nth-child(even) {
    background-color: #f8f9fa; /* gris clair */
}

.dtMaterialDesignExample .zebra:nth-child(odd)
.scrollable-um .um-row:nth-child(odd) {
    background-color: #ffffff; /* blanc */
}

/* page 14 */
.tabs-container { width: 100%; max-width: 80vw !important; margin: 20px auto; border: none !important; background-color: transparent !important; }

.tabs-container .nav-link { color: #3d3f7d; height: 45px;}

.tabs-container .nav-tabs .nav-item.show .nav-link, .tabs-container .nav-tabs .nav-link.active { color: #b9413c; background-color: #e4e5e6; border-color: #dee2e6 #dee2e6 #e4e5e6; }

.tab-content { border: 2px solid #dee2e6; padding: 0 10px; }
.tab-content #table_grille { width: 100%; }

.tab-form input,
.tab-form select,
.tab-form .custom-select,
.tab-form textarea { border-radius: 10px; padding: 0 5px; border: 1px solid black; }

.tab-form input:not([type="time"]):not([type="number"]),
.tab-form select,
.tab-form .custom-select,
.tab-form textarea {  width: 220px; height: 30xp; }


.tab-form input,
.tab-form .custom-select,
.tab-form textarea { height: 30px; }
.tab-form .custom-select { padding-top: 0px; padding-left: 0px; height: 23px; background: transparent; padding: 0; border: none; }

.section { background-color: rgba(255, 255, 255, 0.5); border-radius: 10px; padding: 5px; margin: 15px 0; }
.nav-tabs .nav-link { border: 1px solid rgb(189, 189, 189) !important; }

.datepicker { border-radius: 10px !important; border: 2px solid black !important; }
.tabs-container .tab-btn:focus { box-shadow: none !important;  }
.tabs-container .nav-tabs { cursor:initial !important; border-bottom: 0; }

/* DIV VERSION PG14 */

.section_form { background-color: rgba(192, 192, 192, 0.6); border-radius: 10px; border: 1px solid rgb(192, 192, 192); padding: 10px 5px !important; margin: 15px auto !important; width: 800px; }

.section_title { color: #3d3f7d; font-size: 20px; }
.section_title::before { content:"|"; color: #B9413C; padding-right: 5px; font-size: 30px; }

.section_form input,
.section_form select,
.section_form textarea,
.section_form .input_fake,
.message_input_wrapper .message_input { padding: .2rem .5rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--bs-body-bg); background-clip: padding-box; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; }

.section_form .input_fake { display: inline-block; background-color: #f2f2f2; }

.section_form input:not(.creneauhoraire):not(.iNbPalette):not(.iNbUm):not(.fVolume):not(.fPoids),
.section_form select,
.section_form textarea { width: 100%; }
.section_form .input_label { display: inline-block; padding: 15px 0 0; }

.section_form input:focus,
.section_form select:focus,
.section_form textarea:focus,
.message_input_wrapper .message_input:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.tab-content #ValideRamasse,
.tab-content #ValideEnlevement { width: 100%; text-align: right; padding: 15px 0;}


/* Page 49 */
.step-section { display: none; }
.step-section.active { display: block; }


/* .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 250px; background-color: #343a40; color: white; padding-top: 50px; } */
/* #tarifs_sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 250px; background-color: #343a40; color: white; padding-top: 50px; } */

#tarifs_sidebar .nav { padding: 15vh 0 0;}
#tarifs_sidebar .nav-link { color: white; padding: 15px; }
#tarifs_sidebar .nav-link.active { background-color: #007bff; }


#tarifs_sidebar { position: fixed; top: 0; left: 0; width: 250px; height: 100vh; background-color: #343a40; color: white; overflow: hidden; }

#tarifs_main_content { margin-left: 250px; flex: 1; padding: 20px; box-sizing: border-box; }

select.form-control { padding-right: 2.5rem; background-position: right 1rem center; background-size: 1rem 1rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.justify-content-between { padding: 0 0 30px; }

#saisie-form input,
#saisie-form select { padding: 5px; height: 40px; border-radius: 5px; }
#saisie-form label { font-size: 16px; }
button#nextBtn { position: relative; right: 0px; }

#saisie-form .step-section h4,
h2.titre_page_tarif { }
/* Tous les tableaux sont en z-index 1 */
table { z-index: 1 !important;}

#dashboard { width: 100%; max-width: 1200px; margin: 50px auto; }
#dashboard .bienvenue { font-size: 25px; font-weight: 400; padding: 0 0 15px; width: 100%; }
#dashboard .hp_block { box-shadow: 1px 1px 10px #3d3f7d; border-radius: 5px; padding: 0 !important; min-height: 150px;  }
#dashboard .hp_block div { padding: 0 5px; z-index: 0; }
#dashboard .hp_block .hp_bloc_title { display: flex; align-items: center; background-image: linear-gradient(180deg, #3d3f7d 0%, #272957 99%); color: #FFFFFF; font-size: 16px; height: 30px; }
#dashboard .hp_block .hp_bloc_title.suivi_europe { display: flex; align-items: center; background-image: linear-gradient(180deg, #b9413c 0%, #b9413c 99%); color: #FFFFFF; font-size: 16px; height: 30px; }

#dashboard .hp_block .hp_bloc_content { display: flex; align-items: center; position: relative; min-height: 120px; height: calc(100% - 30px); }
#dashboard .hp_block .hp_bloc_content img { width: 100%; height: 100%; }
#dashboard .hp_block .hp_bloc_content a.hp_blog_img { display: block; }
#dashboard .hp_block .hp_bloc_content input { font-size: 18px; }
#dashboard .hp_block .hp_bloc_content a.hp_blog_link { position: absolute; bottom: 10px; right: 10px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 5px 10px; border-radius: 4px; text-decoration: none; font-size: 0.9rem; transition: background-color 0.3s ease; }

#dashboard .hp_block.suivi .hp_bloc_content { text-align: center; }
#dashboard .hp_block.suivi .hp_bloc_content img { height: 45px; width: auto; }
#dashboard .hp_block.suivi .hp_bloc_content .suivi-text { font-size: 14px; }
#dashboard .hp_block.suivi .hp_bloc_content .suivi-text span,
#dashboard .hp_block.suivi .hp_bloc_content .suivi-separator { color: #b9413c; font-size: 20px; }



#panneau_messagerie { width: 50vw; padding: 0; background-color: #FFFFFF; position: absolute; left: 0px; margin-top: 10px; z-index: 2; box-shadow: 1px 1px 10px #656565; }
#panneau_messagerie.closed_pannel { left: -50vw; }

#panneau_cotation { width: 50vw; padding: 0; background-color: #FFFFFF; position: absolute; left: 0px; margin-top: 350px; z-index: 2; box-shadow: 1px 1px 10px #656565; }
#panneau_cotation.closed_pannel { left: -50vw; }

.panneau_bouton_messagerie { position: absolute; width: 75px; right: -75px; background-color: #b9413c; color: #FFFFFF; padding: 5px; box-shadow: 1px 1px 10px #656565; border-radius: 0 35px 35px 0; z-index: 100; }
.panneau_bouton_cotation { position: absolute; width: 75px; right: -75px; background-color: #3d3f7d; color: #FFFFFF; padding: 5px; box-shadow: 1px 1px 10px #656565; border-radius: 0 35px 35px 0; z-index: 100; }

.panneau_widget table tbody tr td,
.panneau_widget table thead tr th { border-color: #3d3f7d; font-size: 11px; }

.info-tooltip {
    position: relative;
    cursor: help;
    margin-left: 5px;
}
.tooltiptext {
    visibility: hidden;
    background-color: #ffce5d;
    color: #000000;
    text-align: center;
    padding: 5px 10px;
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    right: 125%;
    top: 60px;
    white-space: nowrap;
}
.info-tooltip:hover .tooltiptext {
    visibility: visible;
}

/* Toutes les scrollbar sont modifiées */
* {
    scrollbar-width: thin; /* auto | thin | none */
    scrollbar-color: #b9413c #f1f1f1; /* curseur fond */
    ::-webkit-scrollbar { width: 12px; }
    ::-webkit-scrollbar-track { background: #f1f1f1; }
    ::-webkit-scrollbar-thumb { background: #888; }
    ::-webkit-scrollbar-thumb:hover { background: #555; }
}

/* Footer */
.footer { flex-shrink: 0; text-align: center; padding: 10px 0; width: 100vw; height: 45px; background: #3d3f7d; color: #FFFFFF; font-weight: 400; box-shadow: 1px -1px 5px #b9413c; z-index: 100; position: relative; bottom: 0px; overflow: hidden; }
.footer a { color: #FFFFFF; text-decoration: none; }
.footer a:hover { color: #b9413c; }


/* ELEMENTS INTERNES */
.dropdown-item:focus, .dropdown-item:hover { background-color: transparent !important; }
.border-success { border-color: #3d3f7d !important;}

.tab_cel_0 { background-color:#3d3f7d38; padding-top:4px; padding-bottom:4px; padding-left:5px; padding-right:5px; font-size:12px; font-weight:bold; text-align:center; color:#000000; }

.btn-primary { background-color: #b9413c !important; border: none !important; padding: 5px; border-radius: 5px; }
.btn-primary, .btn-primary.focus, .btn-primary:focus, .btn-primary:hover, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active { background-color: #b9413c !important; border-color: none; }
.btn-primary:not(:disabled):not(.disabled).active:focus, .show>.btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem #b9403c80 !important;  } 

.badge.badge-danger {background-color: #b9413c; }
.badge.badge-warning {background-color: #ffc107; }
.badge.badge-interline {background-color: #3d3f7d; }
.tooltip-normal { text-align: left; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; margin-bottom: 6px; background-color: #000000; font-size: 14px; width:400px; }
.tooltip-erreur { text-align: left; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; margin-bottom: 6px; background-color: darkred; font-size: 14px; width:400px; }

.table_non { border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; padding-top: 0px; padding-bottom: 0px; font-size:10px; }

/* @media screen {
    input.sousligne { border: none; border-bottom:solid; border-bottom-width: 1px; border-bottom-color: darkgray; font-size: 18px; }
    .myButton { box-shadow: 3px 4px 0px 0px #899599; background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%); background-color:#ededed; border-radius:15px; border:1px solid #d6bcd6; display:inline-block; cursor:pointer; color:#3a8a9e; font-family:Arial; font-size:17px; padding:7px 25px; text-decoration:none; text-shadow:0px 1px 0px #e1e2ed; }
    .myButton:hover { background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%); background-color:#bab1ba; }
    .myButton:active { position:relative; top:1px; }
} */

.disabled-mode { opacity: 0.5; pointer-events: none; }
table.liste, table.noborder, table.formdoc, div.noborder { width: 100%; border-collapse: separate !important; border-spacing: 0px; border-top-width: 1px; border-top-color: rgb(200,200,200); border-top-style: solid; border-bottom-width: 1px; border-bottom-color: rgb(200,200,200); border-bottom-style: solid; margin: 0px 0px 5px 0px; }
.box { overflow-x: auto; min-height: 40px; }



.maxwidth75 { max-width: 75px; }


#exTab1 .tab-content { color : white; background-color: #428bca; padding : 5px 15px; }
#exTab2 h3 { color : white; background-color: #428bca; padding : 5px 15px; }
#exTab1 .nav-pills > li > a { border-radius: 0; }
#exTab3 .nav-pills > li > a { border-radius: 4px 4px 0 0 ; }
#exTab3 .tab-content { color : white; background-color: #428bca; padding : 5px 15px; }

.signature { max-width: 400px; }
.signature-body { min-height: 250px; position: relative; }
.signature-body canvas { border: 1px solid #e5e5e5; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.signature-actions { text-align: center; background: #dededd; }
.signature-actions .btn { box-shadow: 2px 2px 11px 0px rgba(0, 0, 0, 0.1); color: #474747; margin: 0.5rem; background: #ffffff; padding: 0.2rem; display: inline-block; font-size: 0.5rem; }


.table-wrapper-scroll-y { display: block; }
.table-fixed thead { width: 97%; display: flex; align-items: center; }
.tableFixHead thead th { position: sticky; top: 0; background-color: #3d3f7d; color: #FFFFFF; text-align: center; border-top: none; }
.tableFixHead thead th a img { filter: invert(1);}
.cellpos { text-align: right; color: green; }
.cellneg { text-align: right; color: red; }
/* div { margin-bottom: 10px; } */

input[type="number"] { width: 100px; }
/* input + span { padding-right: 30px; } */
input:invalid+span:after { position: absolute; content: '*'; color: red; }
input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; }
:root { --success: #00b894; --progress: #e17055; }

.progressbar-wrapper { background-color: #dfe6e9; color: white; border-radius: 15px; width: 100%; height:10px; }
.progressbar { background-color: var(--progress); color: white; padding: 0.4rem; text-align: right; font-size: 10px; border-radius: 15px; height:100%; padding-top: 2px; }
.progressbar[title="downloading"] { background-color: var(--progress); }
.progressbar[title="downloaded"] { background-color: var(--success); }

.bg-dgs { background-image: linear-gradient(180deg, #3d3f7d 0%, #272957 99%) !important; }
a.bg-dgs:focus, a.bg-dgs:hover, button.bg-dgs:focus, button.bg-dgs:hover { background-color:#080808!important; }
.border-dgs { border-color:#B8413D; }
.sousmenu-item { display: block; width: 100%; padding: 0.25rem 1.5rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; white-space: nowrap; background-color: initial; border: 0; }

/* #lateral-panel { z-index: 9999; position: fixed; top: 0; left: 0; bottom: 0; width: 20em; transform: translateX(-100%); }
#lateral-panel-input { position: absolute; left: -999em; }
#lateral-panel-label, #lateral-panel-bloc { position: absolute; font-size: inherit; background: #FFF; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); transition: all .5s; }
#lateral-panel-bloc { z-index: 0; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; padding: 1em; overflow: auto; }
#lateral-panel-label { z-index: 1; top: 27px; left: 108%; width: 2.4em; height: 2.4em; cursor: pointer; background-color: #3E3F7D; }
#lateral-panel-label:before { content: ""; position: absolute; top: 50%; left: 50%; box-sizing: border-box; width: 1em; height: 1em; border: .5em solid currentColor; border-width: .5em .5em 0 0; color: #FFFFFF; transition: all .5s; transform: translate(-50%, -50%) rotate(45deg); }
#lateral-panel-label:hover:before { color: #069; }
#lateral-panel-input:checked ~ #lateral-panel-bloc { transform: translateX(100%); }
#lateral-panel-input:checked ~ #lateral-panel-label { left: 200%; }
#lateral-panel-input:checked ~ #lateral-panel-label:before { transform: translate(-50%, -50%) rotate(-135deg); }
#lateral-panel nav { display: flex; flex-direction: column; }
#lateral-panel nav a { height: 2em; padding-left: 2.5em; line-height: 2.5em; background-position: center left; background-repeat: no-repeat; }
#lateral-panel .titre-p { position: relative; padding: .5em; border-radius: 5px; color: #FFF; background: #069; } */

.chat-list { padding: 0; font-size: .8rem; }
.chat-list li { margin-bottom: 10px; overflow: auto; color: #bad5e6; }
.chat-list .chat-img { float: left; width: 48px; }
.chat-list .chat-img img { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 100%; }
.chat-list .chat-message { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: #ffffff; display: inline-block; padding: 10px 20px; position: relative; }
.chat-list .chat-message:before { content: ""; position: absolute; top: 15px; width: 0; height: 0; }
.chat-list .chat-message h5 { margin: 0 0 5px 0; line-height: 100%; font-size: .9rem; }
.chat-list .chat-message p { line-height: 18px; margin: 0; padding: 0; }
.chat-list .chat-body { margin-left: 20px; float: left; width: 70%; }
.chat-list .in .chat-message:before { left: -12px; border-right: 20px solid #ffffff; }
.chat-list .out .chat-img { float: right; }
.chat-list .out .chat-body { float: right; margin-right: 20px; text-align: right; }
.chat-list .out .chat-message { background: #2260a9; }
.chat-list .out .chat-message:before { right: -12px; border-left: 20px solid #2260a9; color:#000000; }

.card .card-header:first-child { -webkit-border-radius: 0.3rem 0.3rem 0 0; -moz-border-radius: 0.3rem 0.3rem 0 0; border-radius: 0.3rem 0.3rem 0 0; }
.card .card-header { background: #17202b; border: 0; font-size: 1rem; padding: .65rem 1rem; position: relative; color: #ffffff; }
.content { margin:40px 0; }



.form-file-lg { height: calc(1.5em + 1rem + 2px); padding: .5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: .125rem; }
.form-file { font-size: 1rem; color: #495057; }
.sub-dropdown-item:after { transform: rotate(0deg); vertical-align: 0.2em; text-align:right; }

@media (min-width: 992px) {
    .dropdown-menu .dropdown-toggle:after { border-top: .3em solid transparent; border-right: 0; border-bottom: .3em solid transparent; border-left: .3em solid; }
    .dropdown-menu .dropdown-menu { margin-left:0; margin-right: 0; }
    .dropdown-menu li { position: relative; }
    .nav-item .submenu { display: none; position: absolute; left:100%; top:-7px; }
    .nav-item .submenu-left { right:100%; left:auto; }
    .dropdown-menu > li:hover { background-color: #f1f1f1; }
    .dropdown-menu > li:hover > .submenu { display: block; }
}

.onglet { font-family: sans-serif; font-size: 11px; }
.textsearchposition { background-color: #fff; border-radius: 4px; font-family: inherit; font-weight: inherit; vertical-align: middle; font-size: 10px; border: 1px solid rgba(0, 0, 0, 0.2); padding: 2px 3px; }
.custom-select { position: relative; display: inline-block; }
.select-input { width: calc(100%); padding: 5px; font-size: 12px; height: 100%; }
.select-options { position: absolute; width: calc(100% - 10px); max-height: 130px; overflow-y: auto; display: none; top: 100%; left: 0; }
.select-options option { padding: 5px; font-size: 12px; }
.select-options option[selected] { background-color: #f2f2f2; }
.select-options.show { display: block; }




/* Tracking */
.modal-header.row { margin: 0; align-items: center; }
.delivery-tracking-container { width: 100%; }
.order-number { color: #667eea; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; text-align: center; padding: 15px 0 0; }
.status-badge { display: flex; padding: 10px 24px; background: #272957; color: #fff; border-radius: 24px; font-size: 14px; font-weight: 600; margin: 16px auto 24px; align-items: center; justify-content: center; gap: 8px; width: fit-content; box-shadow: 0 4px 12px rgba(16,185,129,.3); }
.status-badge.delivered { background: linear-gradient(135deg, #272957 0%, #059669 100%); }
.status-badge.in-delivery { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); box-shadow: 0 4px 12px rgba(245,158,11,.3); }
.status-badge.in-transit { background: linear-gradient(135deg, #292b5b 0%, #292b5b 100%); box-shadow: 0 4px 12px rgba(39, 41, 87, .3); }
.status-badge.registered { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); box-shadow: 0 4px 12px rgba(139,92,246,.3); }
.timeline-compact { display: flex; align-items: center; justify-content: space-between; padding: 25px 15px; margin-bottom: 24px; position: relative; }
.timeline-line { flex: 1; height: 3px; background: #e5e7eb; position: relative; margin: 0 8px; }
.timeline-progress { position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(90deg, #667eea 0%, #272957 100%); transition: width .5s ease; }
.timeline-step { position: relative; cursor: pointer; transition: transform .2s; }
.timeline-step.completed:hover { z-index: 1000; }
.timeline-step.active:hover, .timeline-step.completed:hover { transform: scale(1.15); }
.timeline-step .step-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; border: 3px solid #272957; transition: all .3s; box-shadow: 0 2px 8px rgba(0,0,0,.1); opacity: .4; }
.timeline-step.completed .step-icon { border-color: rgb(39, 41, 87); opacity: 1; }
.timeline-step.active .step-icon { opacity: 1; transform: scale(1.1); box-shadow: 0 4px 16px rgba(39, 41, 87, .4); }
.timeline-step.pending .step-icon { opacity: .2; border-color: #adadadff; background: #adadad91; }
.step-label { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #6b7280; white-space: nowrap; font-weight: 500; }
.timeline-step.completed .step-icon::after { content: '✓'; position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; background: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
@keyframes blink-warning { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.main-display .warning-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 8px; animation: blink-warning 1.5s ease-in-out infinite; }
.timeline-step.completed { cursor: pointer; }
.timeline-step.completed .step-icon { transition: transform .2s, box-shadow .2s; }
.timeline-step.completed:hover .step-icon { transform: scale(1.15); box-shadow: 0 3px 10px rgba(59,130,246,.3); }
.step-popup { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) scale(0); background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.15); min-width: 280px; max-width: 400px; width: max-content; opacity: 0; pointer-events: none; transition: all .3s ease; z-index: 100; border: 2px solid rgb(39, 41, 87); }
.step-popup::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-bottom-color: rgb(39, 41, 87); }
.timeline-step.completed:hover .step-popup { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }
.step-popup .popup-title { font-weight: 700; font-size: 15px; color: rgb(39, 41, 87); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.step-popup .popup-date { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.step-popup .popup-type { font-size: 13px; color: #374151; font-weight: 500; background: #eff6ff; padding: 6px 10px; border-radius: 6px; display: inline-block; }
.step-popup .popup-proof { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 12px; background: #3b82f6; color: #fff; text-decoration: none; border-radius: 6px; font-size: 13px; font-weight: 500; transition: background .2s; }
.step-popup .popup-proof:hover { background: #2563eb; }





.main-display{background:linear-gradient(135deg, #292b5b 0%, #292b5bc5 100%);border-radius:12px;padding:16px 20px;color: #fff;margin-bottom:24px;min-height:100px;display:flex;flex-direction:column;gap:6px;transition:all .3s ease}
.main-display .icon{font-size:28px;line-height:1}
.main-display .title{font-size:17px;font-weight:600;line-height:1.2}
.main-display .date{font-size:12px;opacity:.85}
.main-display .description{font-size:13px;opacity:.9;line-height:1.4}
.proof-link{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:#fff;font-size:12px;text-decoration:none;font-weight:500;background:rgba(255,255,255,.2);padding:6px 12px;border-radius:6px;align-self:flex-start;transition:background .2s}
.proof-link:hover{background:rgba(255,255,255,.3)}
.toggle-timeline{background:#f3f4f6;border:none;padding:12px 20px;border-radius:8px;color:#374151;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;transition:all .2s;margin-bottom:24px}
.toggle-timeline:hover{background:#e5e7eb}
.toggle-timeline .arrow{transition:transform .3s}
.toggle-timeline.expanded .arrow{transform:rotate(180deg)}
.history-steps{max-height:0;overflow:hidden;opacity:0;transition:all .4s ease}
.history-steps.visible{max-height:2000px;opacity:1}
.history-item{background:#f9fafb;border-left:3px solid #272957;border-radius:8px;padding:16px 20px;margin-bottom:12px;transition:all .2s}
.history-item:hover{background:#f3f4f6;transform:translateX(4px)}
.history-item .history-title{font-weight:600;font-size:15px;color:#1f2937;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.history-item .history-icon{font-size:18px}
.history-item .history-date{font-size:12px;color:#6b7280;margin-bottom:6px}
.history-item .history-desc{font-size:13px;color:#4b5563}
.history-item.incident{border-left-color:#ef4444;background:#fef2f2}
.history-item.incident .history-title{color:#dc2626}

@media (max-width:640px){
    .timeline-step .step-icon{width:40px;height:40px;font-size:16px}
    .main-display{padding:14px 16px}
    .step-label{font-size:9px;bottom:-24px}
    .incident-marker .incident-icon{width:28px;height:28px;font-size:14px}
    .incident-popup{min-width:260px;max-width:340px;padding:14px}
}