.modal-body
{
max-height : 350px;
overflow-y : auto;
}

html, body 
{
    width  : 100%;
    /*height : 100%;*/
    margin : 0;
}

body 
{
    background  : #FFF;
    color       : #666;
    min-height  : 100vh;
    display     : block;
    margin      : 0;
    font-style  : normal;
    font-family : Arial, Helvetica, sans-serif;
    font-size   : 0.875rem;
}

.cursor-act
{
cursor      : pointer;
}

.mt-n4
{
margin-top  : -1rem ; 
}

a, a:visited, a:active, a:focus, a:hover
{
color           : #5F9629;
outline         : none;
cursor          : pointer;
text-decoration : none;
}

.xs-text
{
font-size : 0.688rem;
}

#page
{
padding    : 0;
width      : 100%;
max-width  : auto !important;
/*max-height : 100%;*/
}

#page-header
{
position        : fixed !important;
top             : 0;
width           : 100%;
height          : 75px;
display         : flex;
align-items     : center;
padding         : 0;
background      : #f7f7f7;
z-index         : 10;
}

.inner
{
margin : 0 30px;
}

#logo
{
display             : inline-block;
background-color    : transparent;
align-items         : center;
justify-content     : center;
height              : 75px;
margin-top          : 3px;
margin-left         : 8px;
margin-right        : 3px;
padding-top         : 0.6rem;
}

#logo img
{
height      : auto;
max-width   : 100%;
margin      : 0 auto;
display     : block;
}

#content-login
{
background-image    : url(/sigl/static/img/background-login.jpg) ;
background-size     : cover;
background-position : center;
padding-top         : 114px;
padding-bottom      : 32px;
min-height          : 520px;
height              : 100vh;
}

#content
{
/* padding-top    : 7rem; */
padding-top: calc(75px + 34px + 16px);
padding-bottom : 32px;
background     : #FFF;
min-height     : auto;
height         : auto;
flex-grow      : 1;
}

#auth_std
{
max-width      : 340px;
margin         : 0 auto;
padding-top    : 26px;
padding-bottom : 26px;
background     : #FFF;
}

#auth_std h2
{
border     : none;
padding    : 0 0 26px;
text-align : center;
color      : #5EA045;
font-size  : 160%;
}

#auth_msg
{
position      : fixed;
top           : 90px;
left          : 0;
right         : 0;
margin        : 0 auto;
text-align    : center;
color         : #B42C16;
border-color  : #B42C16;
border-radius : 0;
}

#auth_std input
{
width : auto !important;
}

footer
{
position    : fixed;
bottom      : 0;
background  : #F7F7F7;
width       : 100%;
line-height : 26px;
font-size   : 0.75rem;
text-align  : center;
padding     : 0;
margin-top  : auto;
}

#country-sel
{
z-index     : 3;
position    : relative;
/*margin-left : auto;*/
width       : auto;
display     : block;
}

html[dir="rtl"] #country-sel 
{
margin-left  : 0;
/*margin-right : auto;*/
width        : auto;
}

#country-sel .btn 
{
line-height  : 21px;
padding      : 0;
margin-right : 0;
color        : #FFF;
}

html[dir="rtl"] #country-sel .btn 
{
margin-left  : 0;
margin-right : 0;
display      : block;
width        : auto;
text-align   : left;
}

header #country-sel .dropdown-toggle
{
background : #71B330;
}

header #country-sel .dropdown-menu
{
background : #71B330;
}

#country-sel .dropdown-menu 
{
position      : absolute;
top           : 100%;
left          : auto;
right         : 0;
z-index       : 1050;
background    : #71B330;
border-radius : 4px;
padding       : 5px 0;
margin        : 0;
min-width     : 150px;
max-width     : 95vw;
overflow      : hidden;
}

html[dir="rtl"] #country-sel .dropdown-menu 
{
left          : 0;
right         : auto;
}

header #country-sel .dropdown-item
{
background : #71B330;
color      : #FFF;
}

#country-sel .dropdown 
{
position : relative;
}

#country-sel .dropdown-toggle 
{
padding          : 5px 10px;
background-color : #71B330;
color            : #fff;
border-radius    : 4px;
}

.dropdown-bgcolor-menu
{
background : #71B330 !important;
}

.dropdown-color-link
{
color : #FFF !important;
}

.dropdown-color-link:hover
{
color : #000 !important;
}

.page-title
{
position         : fixed;
top              : 75px;
max-width        : 100%;
width            : 95%;
height           : 34px;
line-height      : 34px;
text-align       : center;
z-index          : 9;
font-size        : 1rem;
font-weight      : bold;
}

#user-info 
{
display      : flex;
align-items  : center;
margin-left  : auto;
margin-right : 0;
}

html[dir="rtl"] #user-info 
{
display      : flex;
align-items  : center;
margin-left  : 0;
margin-right : auto;
}

#user-info .name 
{ 
color    : #777; 
}

.dropdown 
{
position: relative;
}

.role 
{
display     : flex;
align-items : center;
position    : relative;
}

.role-text 
{
margin-left : 10px;
font-size   : 0.9rem;
color       : #333;
}

.role ul 
{
display          : none;
margin           : 0;
padding          : 0;
list-style-type  : none;
position         : absolute;
right            : 0;
top              : 26px;
padding-top      : 1px;
border-bottom    : 1px solid #FFF;
background-color : rgba(0, 0, 0, 0.8);
z-index          : 10;
}

.role:hover ul 
{
display: block;
}

.role-img-A
{
width               : 100px;
height              : 26px;
background-image    : url(/sigl/static/img/admin-profile.png);
background-repeat   : no-repeat;
background-position : center;
display             : inline-block;
}

.role-img-B
{
width               : 100px;
height              : 26px;
background-image    : url(/sigl/static/img/bio-profile.png);
background-repeat   : no-repeat;
background-position : center;
display             : inline-block;
}

.role-img-T
{
background-image  : url(/sigl/static/img/tech-profile.png);
background-repeat : no-repeat;
width               : 100px;
height              : 26px;
background-position : center;
display             : inline-block;
}

.role-img-TA
{
background-image  : url(/sigl/static/img/tech-profile.png);
background-repeat : no-repeat;
width               : 100px;
height              : 26px;
background-position : center;
display             : inline-block;
}

.role-img-TQ
{
background-image  : url(/sigl/static/img/tech-profile.png);
background-repeat : no-repeat;
width               : 100px;
height              : 26px;
background-position : center;
display             : inline-block;
}

.role-img-S
{
background-image  : url(/sigl/static/img/sec-profile.png);
background-repeat : no-repeat;
width               : 100px;
height              : 26px;
background-position : center;
display             : inline-block;
}

.role-img-SA
{
background-image  : url(/sigl/static/img/sec-profile.png);
background-repeat : no-repeat;
width               : 100px;
height              : 26px;
background-position : center;
display             : inline-block;
}

.role-img-SP
{
background-image  : url(/sigl/static/img/prel-profile.png);
background-repeat : no-repeat;
width               : 100px;
height              : 26px;
background-position : center;
display             : inline-block;
}

.role-img-Q
{
background-image  : url(/sigl/static/img/qua-profile.png);
background-repeat : no-repeat;
width               : 100px;
height              : 26px;
background-position : center;
display             : inline-block;
}

.role-img-P
{
background-image  : url(/sigl/static/img/pre-profile.png);
background-repeat : no-repeat;
width               : 100px;
height              : 26px;
background-position : center;
display             : inline-block;
}

.role-img-K
{
background-image  : url(/sigl/static/img/sto-profile.png);
background-repeat : no-repeat;
width               : 100px;
height              : 26px;
background-position : center;
display             : inline-block;
}

.role-img-L
{
background-image  : url(/sigl/static/img/lab-profile.png);
background-repeat : no-repeat;
width               : 100px;
height              : 26px;
background-position : center;
display             : inline-block;
}

.btn-A
{
background-color : #71B330 ;
color            : #FFF;
}

.btn-A:hover
{
background-color : #436B1C ;
color            : #FFF;
}

.btn-B
{
background-color : #71B330 ;
color            : #FFF;
}

.btn-B:hover
{
background-color : #436B1C ;
color            : #FFF;
}

.btn-T
{
background-color : #71B330 ;
color            : #FFF;
}

.btn-T:hover
{
background-color : #436B1C ;
color            : #FFF;
}

.btn-TA
{
background-color : #71B330 ;
color            : #FFF;
}

.btn-TA:hover
{
background-color : #436B1C ;
color            : #FFF;
}

.btn-TQ
{
background-color : #71B330 ;
color            : #FFF;
}

.btn-TQ:hover
{
background-color : #436B1C ;
color            : #FFF;
}

.btn-S
{
background-color : #71B330 ;
color            : #FFF;
}

.btn-S:hover
{
background-color : #436B1C ;
color            : #FFF;
}

.btn-SA
{
background-color : #71B330 ;
color            : #FFF;
}

.btn-SA:hover
{
background-color : #436B1C ;
color            : #FFF;
}

.btn-SP
{
background-color : #66994F ;
color            : #FFF;
}

.btn-SP:hover
{
background-color : #3D5B2F ;
color            : #FFF;
}

.btn-Q
{
background-color : #71B330 ;
color            : #FFF;
}

.btn-Q:hover
{
background-color : #436B1C ;
color            : #FFF;
}

.btn-P
{
background-color : #71B330 ;
color            : #FFF;
}

.btn-P:hover
{
background-color : #436B1C ;
color            : #FFF;
}

.btn-K
{
background-color : #452ED1 ;
color            : #FFF;
}

.btn-K:hover
{
background-color : #291B7D ;
color            : #FFF;
}

.btn-L
{
background-color : #71B330 ;
color            : #FFF;
}

.btn-L:hover
{
background-color : #436B1C ;
color            : #FFF;
}

.role-A a 
{
display    : block;
background : #FC0 !important;
padding    : 0px 10px;
color      : #FFF !important; 
}

.role-A a:hover 
{
background      : #E89400 !important;
color           : #FFF !important;
text-decoration : none !important; 
}

.role-B a 
{
display    : block;
background : #8330E2 !important;
padding    : 0px 10px;
color      : #FFF !important; 
}

.role-B a:hover 
{
background      : #42159B !important;
color           : #FFF !important;
text-decoration : none !important; 
}

.role-T a 
{
display    : block;
background : #29B4ED !important;
padding    : 0px 10px;
color      : #FFF !important; 
}

.role-T a:hover 
{
background      : #1499D2 !important;
color           : #024C71 !important;
text-decoration : none !important; 
}

.role-TA a 
{
display    : block;
background : #29B4ED !important;
padding    : 0px 10px;
color      : #FFF !important; 
}

.role-TA a:hover 
{
background      : #1499D2 !important;
color           : #024C71 !important;
text-decoration : none !important; 
}

.role-TQ a 
{
display    : block;
background : #29B4ED !important;
padding    : 0px 10px;
color      : #FFF !important; 
}

.role-TQ a:hover 
{
background      : #1499D2 !important;
color           : #024C71 !important;
text-decoration : none !important; 
}

.role-S a 
{
display    : block;
background : #EF8839 !important;
padding    : 0px 10px;
color      : #FFF !important; 
}

.role-S a:hover 
{
background      : #D36818 !important;
color           : #FFF !important;
text-decoration : none !important; 
}

.role-SA a 
{
display    : block;
background : #EF8839 !important;
padding    : 0px 10px;
color      : #FFF !important; 
}

.role-SA a:hover 
{
background      : #D36818 !important;
color           : #FFF !important;
text-decoration : none !important; 
}

.role-SP a 
{
display    : block;
background : #66994F !important;
padding    : 0px 10px;
color      : #FFF !important; 
}

.role-SP a:hover 
{
background      : #3D5B2F !important;
color           : #FFF !important;
text-decoration : none !important; 
}

.role-Q a 
{
display    : block;
background : #E23176 !important;
padding    : 0px 10px;
color      : #FFF !important; 
}

.role-Q a:hover 
{
background      : #AB2759 !important;
color           : #FFF !important;
text-decoration : none !important; 
}

.role-P a 
{
display    : block;
background : #996633 !important;
padding    : 0px 10px;
color      : #FFF !important; 
}

.role-P a:hover 
{
background      : #623201 !important;
color           : #FFF !important;
text-decoration : none !important; 
}

.role-K a 
{
display    : block;
background : #452ED1 !important;
padding    : 0px 10px;
color      : #FFF !important; 
}

.role-K a:hover 
{
background      : #292EBE !important;
color           : #FFF !important;
text-decoration : none !important; 
}

.role-L a 
{
display    : block;
background : #BB2688 !important;
padding    : 0px 10px;
color      : #FFF !important; 
}

.role-L a:hover 
{
background      : #A52396 !important;
color           : #FFF !important;
text-decoration : none !important; 
}

header .navbar-menu 
{
display   : flex; 
flex-wrap  : wrap;
gap        : 15px;
margin     : 0; 
padding    : 0; 
background : #F7F7F7;
border     : none;
min-height : 26px;
list-style : none;
z-index    : 5;
}

.nav-cust-cont
{
padding : 0;
}

.nav-cust-divider
{
margin     : 0;
border-top : 1px solid #e5e5e5;
}

.nav-cust-btn
{
height         : 70px;
width          : 105px;
vertical-align : top;
text-align     : center;
justify-content : center;
margin         : 0;
}

.nav-cust-btn button
{
outline        : 0;
}

.nav-btn-txt
{
display         : inline-block;
max-height      : 22px;
width           : 100%;
font-size       : .9rem;
color           : #000;
vertical-align  : top;
text-align      : center;
word-wrap       : normal;
}

/* make every top-nav icon link a square tile */
#menu-desktop .nav-item > .nav-link{
  position: relative;            /* needed for overlay */
  display: inline-flex;          /* center icon */
  align-items: center;
  justify-content: center;
  width: 3em;                    /* same size for all tiles */
  height: 3em;
  padding: 0 !important;         /* avoid vertical drift */
  line-height: 1;
  background-position: center;   /* existing bg icons stay centered */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* light gray veil on hover/focus for all tiles */
#menu-desktop .nav-item > .nav-link::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.08);   /* light gray veil */
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;          /* keep link clickable */
}
#menu-desktop .nav-item > .nav-link:hover::before,
#menu-desktop .nav-item > .nav-link:focus-visible::before{
  opacity: 1;
}

/* remove Bootstrap caret on every dropdown icon */
#menu-desktop .nav-item > .nav-link.dropdown-toggle::after{
  display: none !important;
}

/* safety — if some icons had no explicit bg-size */
#menu-desktop .nav-item > .nav-link[class]{
  background-size: 100% 100%;
}

/* Nav dropdowns: show on hover and sit above the page title */
/* ensure dropdown opens on hover for all nav items */
#menu-desktop .nav-item.dropdown:hover > .dropdown-menu{
  display: block;
}

/* position + stacking so menu is visible above .page-title (z=9) */
#menu-desktop .dropdown-menu{
  position: absolute;
  top: 100%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 20;          /* above .page-title (9) */
  margin: 0;
  min-width: 220px;     /* keep your existing width if you prefer */
  padding-top:4px;
}

#menu-desktop .nav-item.dropdown{
  position: relative;
  overflow: visible; /* in-code comment: ensure menu can overflow horizontally */
}

nav .repository{
  background: url(/sigl/static/img/repository.png) center center no-repeat;
  background-size: 100% 100%;
}

nav .structure{
  background: url(/sigl/static/img/structure.png) center center no-repeat;
  background-size: 100% 100%;
}

nav .integration{
  background: url(/sigl/static/img/integration.png) center center no-repeat;
  background-size: 100% 100%;
}

nav .report{
  background: url(/sigl/static/img/report.png) center center no-repeat;
  background-size: 100% 100%;
}

nav .setting{
  background: url(/sigl/static/img/param.png) center center no-repeat;
  background-size: 100% 100%;
}

nav .qualite{
  background: url(/sigl/static/img/qualite.png) center center no-repeat;
  background-size: 100% 100%;
}

nav .non-conformite{
    background-image: url(/sigl/static/img/non-conformite.png), linear-gradient(#EE7A7A, #E84D4D);
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    background-size: 100% 100%, 100% 100%;
}

nav .admin{
  background: url(/sigl/static/img/admin.png) center center no-repeat;
  background-size: 100% 100%;
}

.module 
{
border-bottom  : 1px solid #EEE;
position       : relative;
}

.module .links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.module .links .list-group-item {
    margin: 0;
    width: 130px;
    padding: 95px 0 0;
    text-align: center;
    border: none;
    vertical-align: top;
    display: inline-block;
}

.icon-messaging a 
{
margin-top      : 0.5rem;
margin-left     : 2rem;
margin-bottom   : 0.5rem; 
display         : flex;
align-items     : center;
font-size       : 2.5rem;
color           : grey;
text-decoration : none;
}

.icon-messaging a:hover 
{
color : #0056b3;
}

/* Admin home: unified yellow tiles + icons */
.module .admin-preferences{
    /* yellow square + transparent icon, both 93x93 */
    /* First layer: icon, Second layer: yellow square */
    background-image: url(/sigl/static/img/admin-preferences.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: 93px 93px, 93px 93px;
}

.module .admin-gest-role{
    background-image: url(/sigl/static/img/admin-gestion-role.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: 93px 93px, 93px 93px;
}

.module .admin-crea-profil{
    background-image: url(/sigl/static/img/admin-crea-profil.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: 93px 93px, 93px 93px;
}

.module .admin-referentiel{
    background-image: url(/sigl/static/img/admin-referentiel.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: 93px 93px, 93px 93px;
}

.module .admin-conf-cr{
    background-image: url(/sigl/static/img/admin-conf-cr.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: 93px 93px, 93px 93px;
}

.module .admin-num-doss{
    background-image: url(/sigl/static/img/admin-conf-num-doss.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: 93px 93px, 93px 93px;
}

.module .admin-connect{
    background-image: url(/sigl/static/img/admin-connect.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: 93px 93px, 93px 93px;
}

.module .admin-conf-template
{
    background-image    : url(/sigl/static/img/config-template.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat   : no-repeat, no-repeat;
    background-position : center top, center top;
    background-size     : 93px 93px, 93px 93px;
}

.module .admin-conf-form
{
    background-image    : url(/sigl/static/img/config-form.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat   : no-repeat, no-repeat;
    background-position : center top, center top;
    background-size     : 93px 93px, 93px 93px;
}

.module .admin-conf-sending-method
{
    background-image    : url(/sigl/static/img/config-sending-method.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat   : no-repeat, no-repeat;
    background-position : center top, center top;
    background-size     : 93px 93px, 93px 93px;
}

.module .rec-list 
{ 
    background-image    : url(/sigl/static/img/f-list-bio.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat   : no-repeat, no-repeat;
    background-position : center top, center top;
    background-size     : 93px 93px, 93px 93px;
}

.module .work-list 
{ 
    background-image    : url(/sigl/static/img/b-list-bio.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat   : no-repeat, no-repeat;
    background-position : center top, center top;
    background-size     : 93px 93px, 93px 93px;
}

.module .samp-list 
{ 
    background-image    : url(/sigl/static/img/prel-bio.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat   : no-repeat, no-repeat;
    background-position : center top, center top;
    background-size     : 93px 93px, 93px 93px;
}

.module .res-list 
{ 
    background-image    : url(/sigl/static/img/res-bio.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat   : no-repeat, no-repeat;
    background-position : center top, center top;
    background-size     : 93px 93px, 93px 93px;
}

.module .home-qualite 
{ 
    background-image    : url(/sigl/static/img/home-qualite.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat   : no-repeat, no-repeat;
    background-position : center top, center top;
    background-size     : 93px 93px, 93px 93px;
}

.module .new-rec-ext
{ 
    background-image    : url(/sigl/static/img/new-dos-ext-sec.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat   : no-repeat, no-repeat;
    background-position : center top, center top;
    background-size     : 93px 93px, 93px 93px;
}

.module .new-rec-int
{ 
    background-image    : url(/sigl/static/img/new-dos-int-sec.png), linear-gradient(#DCDCDC, #DCDCDC);
    background-repeat   : no-repeat, no-repeat;
    background-position : center top, center top;
    background-size     : 93px 93px, 93px 93px;
}

.module .emergency 
{ 
    background-image    : url(/sigl/static/img/urgence.png), linear-gradient(#EE7A7A, #E84D4D);
    background-repeat   : no-repeat, no-repeat;
    background-position : center top, center top;
    background-size     : 93px 93px, 93px 93px;
}

.links
{
max-width : 800px;
margin    : 0 auto;
word-wrap : break-word; /* need with Firefox */
}

.links a
{
color           : #555 !important;
text-decoration : none !important;
}

.links a:hover
{
color           : #F18739 !important;
}

.home-stat
{
vertical-align : top;
padding        : 0 43px;
}

.home-graph
{
border-right : 1px solid #EEE;
}

#label-chart
{
padding-right : 1.5rem;
margin-right  : 3rem;
}

#chart
{
width  : 350px;
height : 250px;
margin : 0px auto;
}

.input-large
{
width      : 100%;
text-align : left;
}

.table-lbk
{
color   : #666;
}

.table-lbk tr
{
line-height : 1.4;
}

.panel-heading
{
padding       : 10px 15px;
border-bottom : 1px solid #71B330;
}

.panel-title
{
font-size     : 1.00rem;
font-weight   : bold;
color         : #71B330;
}

.menu-act
{
padding       : 3px !important;
padding-left  : 30px !important;
padding-right : 30px !important;
background-color    : transparent;
background-repeat   : no-repeat;
background-image    : url(/sigl/static/img/info.png);
background-position : left center;
}

.menu-act:hover
{
color         : black;
padding       : 3px !important;
padding-left  : 30px !important;
padding-right : 30px !important;
}

.rec-num
{
background-color : #C7AD70;
color            : #FFF;
display          : inline-block;
min-width        : 26px;
height           : 26px;
line-height      : 26px;
font-size        : 1rem;
font-weight      : bold;
text-align       : center;
padding          : 0 8px;
}

.pat-num
{
background-color : #C7AD70;
color            : #FFF;
display          : inline-block;
min-width        : 0px;
height           : 26px;
line-height      : 26px;
font-size        : 1rem;
font-weight      : bold;
text-align       : center;
padding          : 0 8px;
}

.icon
{
display          : inline-block;
min-width        : 24px;
height           : 24px;
line-height      : 24px;
text-align       : center;
vertical-align   : middle;
}

/* administrative status */
.stat-A
{
background-color : #F08739;
color            : #666;
font-weight      : bold;
}

/* biological status */
.stat-B
{
background-color : #8330E2;
color            : #FFF;
font-weight      : bold;
}

/* technical status */
.stat-T
{
background-color : #00ADEE;
color            : #666;
font-weight      : bold;
}

.font-info
{
font-weight      : bold;
}

.legend-lbk
{
font-size        : 1.25rem;
float            : none;
padding          : inherit;
}

.color-T
{
color : #00ADEE;
}

.bgcolor-T
{
background-color : #00ADEE;
color            : #FFF;
}

.color-B
{
color : #8330E2;
}

.bgcolor-B
{
background-color : #8330E2;
color            : #FFF;
}

.color-S
{
color : #EF8839;
}

.bgcolor-S
{
background-color : #EF8839;
color            : #FFF;
}

.error
{
background-color : #F1D9D5;
color            : #B42C16;
font-weight      : bold;
border           : 1px solid #B42C16;
}

.emer
{
display             : inline-block;
background-color    : transparent;
background-repeat   : no-repeat;
background-image    : url(/sigl/static/img/urgent.png);
background-position : center center;
height              : 12px;
width               : 14px;
vertical-align      : middle;
}

.warning
{
display             : inline-block;
background-color    : transparent;
background-repeat   : no-repeat;
background-image    : url(/sigl/static/img/warning.png);
background-position : center center;
height              : 18px;
width               : 21px;
vertical-align      : middle;
}

.history
{
display             : inline-block;
background-color    : transparent;
background-repeat   : no-repeat;
background-image    : url(/sigl/static/img/info.png);
background-position : center center;
height              : 21px;
width               : 21px;
vertical-align      : middle;
}

.report a
{
color   : #FFF !important;
outline : none;
cursor  : pointer;
}

.bg-readonly
{
background-color    : #E9ECEF;
}

#search_analysis
{
width:450px;
}

.form-search
{
width:400px;
}

.btn_menu_mobile
{
display : none ;
}

#menu-mobile
{
display : none;
}

#menu-desktop
{
display : block;
}

.identity-group
{
display : flex;
}

.identity-group_1
{
display : flex;
}

.menu-choice-desktop
{
overflow   : auto ;
max-height : 92vh ;
}

.aliquot-separator 
{
border  : 3px solid #007bff;
margin  : 20px 0;
opacity : 1;
}

.btn-aliquot 
{
min-width: 150px;
height: 38px;
padding: 6px 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
}

@media all and (min-width: 768px) and (max-width: 1024px)
{
    /* show mobile menu, hide desktop menu */
    #menu-mobile { display: block !important; width: 100%; }
    #menu-desktop { display: none !important; }

    /* Bootstrap override: navbar-expand-md normally hides burger at >=768 */
    nav.navbar.navbar-expand-md .navbar-toggler { display: block !important; }

    /* Bootstrap override: collapse closed by default, open only with .show */
    nav.navbar.navbar-expand-md .navbar-collapse { display: none !important; }
    nav.navbar.navbar-expand-md .navbar-collapse.show { display: block !important; }

    /* IMPORTANT: anchor the menu panel to the navbar (burger), not to the screen center */
    nav.navbar.navbar-expand-md { position: relative !important; }

    /* MENU PANEL: width adapts to longest item + aligned under burger */
    #navbarMenu
    {
        position   : absolute !important;
        top        : 75px !important;   /* same as your phone */
        left       : 0 !important;
        right      : auto !important;
        transform  : none !important;

        width      : max-content !important;
        max-width  : 92vw !important;

        background : #f7f7f7;
        z-index    : 999;
        max-height : 80vh;
        overflow-y : auto;
        box-sizing : border-box;
    }

    #navbarMenu .navbar-nav
    {
        display        : flex !important;
        flex-direction : column !important;
        padding-left   : 0 !important;
        margin         : 0 !important;

        width          : max-content !important;
        min-width      : 260px !important;
        max-width      : 92vw !important;
    }

    #navbarMenu .nav-link
    {
        font-size   : 0.9rem;
        color       : #333;
        padding     : 10px 20px;
        text-align  : center;
        white-space : nowrap;
    }

    #navbarMenu .dropdown-menu
    {
        position   : static;
        width      : 100% !important;
        padding    : 0;
        margin     : 0;
        background : #fff;
        border     : 1px solid #e5e5e5;
    }

    #navbarMenu .dropdown-item
    {
        padding     : 10px;
        color       : #333;
        text-align  : center;
        white-space : nowrap;
    }

    /* disable special backgrounds (desktop icon tiles) */
    nav .non-conformite { background: none !important; }
    nav .non-conformite:hover { background: none !important; }
    nav .setting:hover { background: none !important; }
    nav .qualite:hover { background: none !important; }
}

@media all and (max-width: 767px)
{
    body
    {
    padding     : 0;
    background  : #FFF;
    font-style  : normal;
    font-family : Arial, Helvetica, sans-serif;
    font-size   : 0.8125rem;
    color       : #666;
    display     : flex;
    margin      : auto;
    }

    #logo img 
    {
    content   : url(/sigl/static/img/logo_small.png);
    max-width : 50px;
    height    : auto;
    margin    : 0;
    }

    #logo 
    {
    display         : flex;
    align-items     : center;
    justify-content : center;
    height          : 75px;
    padding         : 0;
    margin          : 0;
    }

    #user-info 
    {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    margin-top     : 10px;
    margin-left    : auto;
    margin-right   : 1rem;
    min-width      : 5rem;
    min-height     : 2rem;
    }

    #user-info .name 
    {
    font-size  : 0.9rem;
    color      : #777;
    text-align : center;
    }

    .module .list-group-item 
    {
    padding        : 110px 0 0;
    }

    .module .icon-module
    { 
    background-size: 80%;
    }

    .module .links {
        gap: 12px;
        padding: 0 8px;
    }

    /* Mobile tiles: strict 2 columns, stable sizing */
    .module .links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        padding: 0 8px;
    }

    .module .links .list-group-item {
        flex: 0 0 calc(50% - 12px);   /* 2 columns */
        width: auto;                  /* don't fight flex */
        max-width: none;              /* remove previous cap */
        display: block;               /* NEVER inline-block in flex here */
        box-sizing: border-box;
        padding: 82px 0 0;            /* text under icon */
        text-align: center;
        border: none;
    }
    

    .page-title 
    {
    max-width   : 100%;
    width       : 95%;
    height      : auto;
    line-height : 1.2rem;
    font-size   : 1rem;
    text-align  : center;
    }

    .navbar 
    {
    position    : relative;
    z-index     : 1;
    }

    .navbar-toggler 
    {
    margin           : 10px auto;
    padding          : 8px 12px;
    background-color : lightgray;
    border           : none;
    }

    .navbar-collapse 
    {
    position: absolute;
    top         : 75px;
    left        : 0;
    right       : 0;
    background  : #f7f7f7;
    z-index     : 999;
    max-height  : 80vh;
    overflow-y  : auto;
    }

    .navbar-nav 
    {
    display        : flex;
    flex-direction : column;
    padding-left   : 0;
    margin         : 0;
    width          : 100%;
    }

    .nav-link 
    {
    font-size   : 0.9rem;
    color       : #333;
    padding     : 10px 20px;
    text-align  : center;
    }

    .dropdown-menu 
    {
    position    : static;
    width       : 100%;
    padding     : 0;
    margin      : 0;
    background  : #fff;
    border      : 1px solid #e5e5e5;
    }

    .dropdown-item 
    {
    padding     : 10px;
    color       : #333;
    text-align  : center;
    }

    /* Visible feedback for touch: apply same style as :hover */
    .dropdown-item:hover,
    .dropdown-item:focus,
    .dropdown-item:active,
    .dropdown-item:focus-visible {
        background: #436B1C; /* keep consistent with desktop hover color */
        color: #fff;         /* readable text on green background */
        outline: none;       /* remove default focus outline */
    }

    /* Smooth feedback for state changes */
    .dropdown-item {
        transition: background-color .15s ease, color .15s ease; /* quick visual response */
        cursor: pointer; /* make it obvious items are tappable */
    }

    /* Optional: subtle elevation so dropdown stands over content */
    .dropdown-menu {
        box-shadow: 0 4px 12px rgba(0,0,0,.12); /* lightweight shadow for depth */
    }

    /* scope to mobile navbar to avoid side effects on desktop */
    #menu-mobile .dropdown-menu .dropdown-item {
      background: #fff;
      color: #333;
      transition: background-color .15s ease, color .15s ease; /* in-code comment: quick visual response */
      cursor: pointer;
    }

    /* force visible state on tap/focus; override generic a:hover */
    #menu-mobile .dropdown-menu .dropdown-item:hover,
    #menu-mobile .dropdown-menu .dropdown-item:focus,
    #menu-mobile .dropdown-menu .dropdown-item:active,
    #menu-mobile .dropdown-menu .dropdown-item:focus-visible {
      background-color: #436B1C !important;
      color: #fff !important;
      outline: none;
    }

    /* small elevation so the list stands out on mobile */
    #menu-mobile .dropdown-menu {
      box-shadow: 0 4px 12px rgba(0,0,0,.12);
    }

    .role 
    {
    position     : relative;
    margin-left  : auto;
    margin-right : 0;
    top          : 0;
    min-width    : 5rem;
    width        : fit-content;
    min-height   : 2rem;
    height       : auto;
    text-align   : right;
    }

    .btn_menu_mobile
    {
    display : block;
    }

    #menu-mobile
    {
    display : block !important;
    width   : 100%;
    }

    #menu-desktop
    {
    display : none !important;
    }

    nav .non-conformite
    {
    background      : none;
    white-space     : nowrap; 
    display         : block;
    width           : auto;
    height          : auto;
    }

    nav .non-conformite:hover
    {
    background      : none;
    }

    nav .setting:hover
    {
    background : none;
    }

    nav .qualite:hover
    {
    background : none;
    }

    header .dropdown-toggle
    {
    font-size  : 0.8125rem; 
    padding    : 0.3125rem 0.625rem;
    }

    header .dropdown-item
    {
    font-size  : 0.8125rem; 
    padding    : 0rem 0.625rem;
    }

    .inner
    {
    margin : 0px 5px 0px;
    }

    #country-sel .dropdown-toggle {
        padding: 5px 5px;
        background-color: #71B330;
        color: #fff;
        border-radius: 4px;
    }

    #country-sel .btn 
    {
    margin-left  : auto;
    margin-right : auto;
    }

    .page-title
    {
    position         : fixed;
    top              : 75px;
    max-width        : 100%;
    width            : 97%;
    height           : 34px;
    line-height      : 34px;
    text-align       : center;
    z-index          : 9;
    font-size        : 1rem;
    font-weight      : bold;
    }

    .home-stat
    {
    vertical-align : top;
    padding        : 0px;
    }

    .home-graph
    {
    border-right : 0px;
    }

    #label-chart
    {
    padding-right : 0px;
    margin-right  : 0px;
    }

    #chart
    {
    width  : 250px;
    height : 200px;
    margin : 0px auto;
    }

    #label-activity
    {
    margin-top : 1rem;
    text-align : center;
    }

    #search_analysis
    {
    width:290px;
    }

    .legend-lbk
    {
    font-size        : 1rem;
    float            : none;
    padding          : inherit;
    }

    select:disabled
    {
    background-image : none;
    }

    .form-search
    {
    width:290px;
    }
    
    .form-lbk
    {
    font-size        : 0.70rem;
    padding-left     : 0.25rem;
    padding-right    : 0.25rem;
    }

    .btn-lbk
    {
    font-size  : 0.75rem;
    }

    .icon
    {
    display          : inline-block;
    min-width        : 20px;
    height           : 20px;
    line-height      : 20px;
    text-align       : center;
    vertical-align   : middle;
    }

    .stat-A
    {
    font-size : 0.70rem;
    }

    .stat-B
    {
    font-size : 0.70rem;
    }

    .stat-T
    {
    font-size : 0.70rem;
    }

    #info_pat_title
    {
    font-size : 0.65rem;
    }

    .identity-group
    {
    display : block;
    }
    
    .identity-group_1
    {
    display : block;
    }

    #navbarMenu
    {
    overflow   : auto ;
    max-height : 95vh ;
    min-width  : fit-content;
    width      : 100%;
    max-width  : 100%;
    box-sizing : border-box;
    }

    .icon-messaging a 
    {
    margin-top    : 0.5rem;
    margin-left   : 0.5rem;
    margin-right  : 0.5rem;
    margin-bottom : 0rem;
    display: inline-block;
    font-size: 2.0rem;
    color: gray;
    text-decoration: none;
    }

    /* Mobile: fix tile icon rendering (reduce bg size + align) */
    .module .links .list-group-item[class*="admin-"],
    .module .links .list-group-item.rec-list,
    .module .links .list-group-item.work-list,
    .module .links .list-group-item.samp-list,
    .module .links .list-group-item.res-list,
    .module .links .list-group-item.home-qualite,
    .module .links .list-group-item.new-rec-ext,
    .module .links .list-group-item.new-rec-int,
    .module .links .list-group-item.emergency {
        background-position: center 10px, center 10px !important;
        background-size: 72px 72px, 72px 72px !important;
    }
}

@media all and (max-width: 426px)
{
  body { font-size: 0.75rem; }

  .module .links .list-group-item { padding: 78px 0 0; }
  .module .icon-module { background-size: 60%; }

  .module .links .list-group-item[class*="admin-"],
  .module .links .list-group-item.rec-list,
  .module .links .list-group-item.work-list,
  .module .links .list-group-item.samp-list,
  .module .links .list-group-item.res-list,
  .module .links .list-group-item.home-qualite,
  .module .links .list-group-item.new-rec-ext,
  .module .links .list-group-item.new-rec-int,
  .module .links .list-group-item.emergency {
    background-position: center 8px, center 8px !important;
    background-size: 64px 64px, 64px 64px !important;
  }

  #user-info #header_name { display: none !important; }

  #user-info .icon-messaging a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  #user-info .icon-messaging i.bi-chat {
    font-size: 2.0rem !important;
    margin-right: 0 !important;
  }

  #user-info .icon-messaging #nb_msg_unread {
    font-size: 1.40rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  #user-info .icon-messaging { transform: translateY(-3px); }
}