@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; text-align: center; 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; }

#listsociete { overflow-y: scroll; max-height: 80vh; }
.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 */
.btn_messagerie { width: auto; }
a.btn_messagerie span { color: #000; text-decoration: none; float: left; }


/* Attente Infos (page13) */
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 14 */
.tabs-container { width: 80vw !important; margin: 0 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,
.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; }

.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; }


/* 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; /* Décalage pour éviter le chevauchement */
    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; 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; }
#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_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_bouton { 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_widget table tbody tr td,
.panneau_widget table thead tr th { border-color: #3d3f7d; font-size: 11px; }

/* 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; }
.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: '*'; padding-left: 8px; 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-top:40px; }

.bottom_wrapper { position: relative; width: 100%; background-color: #fff; padding: 20px 20px; position: absolute; bottom: 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; } */
.bottom_wrapper .message_input_wrapper .message_input { width: 100%; border-radius: 25px; padding: 5px 10px; }
.bottom_wrapper .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; }
.bottom_wrapper .send_message:hover { color: #a3d063; background-color: #fff; }
.bottom_wrapper .send_message .text { font-size: 18px; font-weight: 300; display: inline-block; line-height: 48px; }

.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; }