/* Super custom list : https://css-tricks.com/css-counters-custom-list-number-styling/ */ 

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");

:root {
   --tagColorLabel1: #fcdbcf;
   --tagColorLabel2: #ccdcff;
   --tagColorLabel3: #f9cafc;
   --tagColorLabel4: #E0B589;
   --tagColorLabel5: #FF6F61;
   --tagColorLabel6: #6B5B95;
   --tagColorLabel7: #A0DAA9;
   --tagColorLabel8: #FDAC53;
   --tagColorLabel9: #F5DF4D;
   --size-nav:97.01em;
   --gap:1em;
   --colorG22:hsl(0,0%,22%);
   --colorG27:hsl(0,0%,27%);
   --color1:var(--colorG22);
   --color2:hsl(9,100%,64%);
   --colorAB005:hsla(0,0%,0%,0.05);
   --shadow8:0 1rem 1rem hsla(0,0%,0%,0.1);
   --border2:1px dashed var(--colorA15);
   --colorA15:hsla(0,0%,100%,0.15);
   --wrap:92em;
   --selectedTab: darkkhaki;
   --unselectedTab: khaki;
   --underlineTab: darkslategray;
}

/*---------- start tabs ----------*/
.gap[class^='column']     { -moz-column-gap:var(--gap);column-gap:var(--gap);margin-block-end:calc(var(--gap)*-1) }
.gap[class^='column']>*   { margin-block-end:var(--gap) }
.gap-top[class^='column'] { margin-block-start:var(--gap) }
.gap-bottom[class^='column'] { margin-block-end:0 }
.gap-vertical[class^='column'] {gap:0 var(--gap) }

.tabs .tabs-list { display:flex;padding:0 }
:is(.tabs .tabs-list)~* .tabs-list { margin-block-start:0.5em }

/* unselected tab */
:is(.tabs .tabs-list) button { z-index:1;
                              overflow:hidden;
                              display:block;
                              height:2.5em;
                              padding:0 1em;
                              white-space:nowrap;
                              text-overflow:ellipsis;
                              text-decoration:none;
                              color:inherit;
                              background-color:var(--unselectedTab);
                              border:var(--border2);
                              border-radius:0.5em 0.5em 0 0;
                              box-shadow:0 -1rem 1rem var(--colorAB005);
                              cursor:pointer;
                              transition:0.2s box-shadow ease-in-out }


/* https://codepen.io/aanjulena/pen/ZLZjzV?editors=1100 */
.btn-toggle { margin-left: 4rem !important; padding: 0; position: relative; border: none; height: 1.5rem; width: 3rem; border-radius: 1.5rem !important; color: #6b7381; background: #bdc1c8; }
.btn-toggle:hover { background-color: var(--bs-primary-bg-subtle); }
.btn-toggle:focus,
.btn-toggle.focus,
.btn-toggle:focus.active,
.btn-toggle.focus.active { outline: none; }
.btn-toggle:before, .btn-toggle:after { line-height: 1.5rem; width: 4rem; text-align: center; font-weight: 600; font-size: 0.75rem; text-transform: uppercase;
                                        letter-spacing: 2px; position: absolute; bottom: 0; transition: opacity 0.25s; }
.btn-toggle:before    { content: 'Inactif'; left: -4rem; }
.btn-toggle:after     { content: 'Actif'; right: -4rem; opacity: 0.5; }
.btn-toggle > .handle { position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 1.125rem; background: #fff; transition: left 0.25s; }
.btn-toggle.active    { transition: background-color 0.25s; }
.btn-toggle.active > .handle { left: 1.6875rem; transition: left 0.25s; }
.btn-toggle.active:before { opacity: 0.5; }
.btn-toggle.active:after { opacity: 1; }
.btn-toggle:before, .btn-toggle:after { color: var(--bs-primary); } /* color of the active text */
.btn-toggle.active { background-color: var(--bs-primary); } /* #29b5a8 */


/* underline (hover)*/
@media (hover:hover) and (pointer:fine){:is(:is(.tabs .tabs-list) button):where(:focus-visible,:hover) { outline:none;box-shadow:inset 0 -0.3em var(--underlineTab),0 -1rem 1rem var(--colorAB005) } }
/* selected tab */
[aria-selected='true']:is(:is(.tabs .tabs-list) button)  { z-index:2;flex-shrink:0;max-width:60%;background-color:var(--selectedTab);border-bottom:none;pointer-events:none }
[aria-selected='false']:is(:is(.tabs .tabs-list) button) { -webkit-user-select:none;-moz-user-select:none;user-select:none}
.tabs .tabs-panel { position:relative;top:-1px;padding:calc(0.5em + 1px) 1em 0.5em;border:var(--border2);box-shadow:var(--shadow8) }
[aria-hidden='false']:is(.tabs .tabs-panel) { display:block }
[aria-hidden='true']:is(.tabs .tabs-panel) { display:none }

/*---------- end tabs ----------*/

.tabnormal       {background-color:#DDDDDD; color:navy;      font-weight:bold}
.tabover         {background-color:navy;    color:white;     font-weight:bold}
table#xan        {border-width:2px; border-spacing:5px;
                  border-style: outset; border-collapse: collapse; border-color:navy; 
                  width:80%;}
table#xan th     {
                  border-color: #98A9CE;
                  border-radius: 9px 9px 9px 9px;}
table#xan td     {border-width: 1px; border-color:#DDDDDD; padding: 0px; 
                  border-style: solid; background-color: #E4E9EE;}
table#xan2        {border-width:2px; border-spacing:5px;
                  border-style: outset; border-collapse: collapse; border-color:navy; 
                  width:80%;}
table#xan2 th     {
                  border-color: #98A9CE;background-color: #ccccff;border:1px solid red;
                  border-radius: 9px 9px 9px 9px;}
table#xan2 td     {border:1px solid blue; vertical-align:middle; background-color: #E4E9EE;}
.xtitre           {background-color:#98a9ce;}
.simple           {border-width:1px; background-color: #E4E9EE;
                   border-style: solid; border-color:navy;}
.xbleufonce      {border-width:1px; background-color: #ccccff;
                  border-style: solid; border-color:navy;}
.xcolor1         { background-color: #E4E9EE; }
.c_info td       {background: url(images/BlocTextAccueilx.png) no-repeat 0 0; background-size: 839px 397px;}
#Cadre            {left:10px; top:50px; width:200px; height:7px; border:1px navy solid;
                   background-color:#F3F3F3; }
.Progress         {left:10px; top:50px; width:0px; height:5px; background-color:#FF6699;
                   border-left:1px navy solid; border-bottom:1px navy solid; border-top:1px navy solid;}
input[type=text], textarea[type=text]  {background-color: #FFFFFF;}
input[type=text]:focus      {background-color: #FFFF99;}
textarea[type=text]:focus   {background-color: #FFFF99;}
input[type=submit], input[type=button], .Bouton                  {font-family: Arial, sans-serif; font-size: 8pt; background-color: #9EC6FD;                   border: #0066ff 1px solid; color: #FFFFFF; font-weight: bold; padding-left: 3px; padding-right:3px; }
input[type=submit]:hover, input[type=button]:hover, .Bouton:focus                  {font-family: Arial, sans-serif; font-size: 8pt; background-color: #9EC6FD;                   border: #0066ff 1px solid; color: #FFFFFF; font-weight: bold; padding-left: 3px; padding-right:3px; }
.none {text-decoration:none }


a:link    { text-decoration:none }
a:visited { text-decoration:none }
a:hover   { text-decoration:none }
a:active  { text-decoration:none }
a:focus   { text-decoration:none }

div.decompte    { width: 48px; border: 1px solid #FF0000; font-size: 10px; font-family: Verdana, sans-serif; text-align:right; float:right;}

div.information { min-height: 50px; color: #85ac1c; border: 1px #85ac1c dashed; border-image-source: none; border-image-slice: 100% 100% 100% 100%; border-image-width: 1 1 1 1;
                  border-image-outset: 0 0 0 0; border-image-repeat: stretch stretch; border-top-left-radius: 5px; border-top-right-radius: 5px;
                  border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: transparent; 
                  background-image: url('images/information.png'); background-repeat: no-repeat; background-attachment: scroll;
                  background-position: left top; background-clip: border-box; background-origin: padding-box; background-size: auto auto;
                  padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 60px; margin-top: 5px; margin-right: 5px;
                  margin-bottom: 5px; margin-left: 5px; display: block; width:60%; background-color:moccasin;}

.img_ronde      {border-radius:7px; -webkit-border-radius:7px; border-radius:7px;}
.coin           {background-color:#E4EFFF; border:1px solid #9FC6FF; padding:5px; border-radius:10px 0; -webkit-border-radius:10px 0; border-radius:10px 0; }

/* class chkstyle pour les input[checkbox] */
.chkstyle:not(:checked), .chkstyle:checked { position: absolute; left: 0; opacity: 0.01; }
.chkstyle:not(:checked) + label,
.chkstyle:checked + label { position: relative; padding-left: 2.3em; line-height: 1.7; cursor: pointer; }
/* checkbox aspect */
.chkstyle:not(:checked) + label:before, .chkstyle:checked + label:before { content: ""; position: absolute; left: 0; top: .15rem; width: 1.4em; height: 1.4em; border: 1px solid #aaa; background: #fff; border-radius: 0.2em; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 rgba(203, 34, 237, 0.2); -webkit-transition: all 0.275s; transition: all 0.275s; }
/* checked mark aspect */
.chkstyle:not(:checked) + label:after, .chkstyle:checked + label:after { content: "✕"; position: absolute; top: 0.8rem; left: 0.18rem; font-size: 1.375em; color: #0d6efd; line-height: 0; -webkit-transition: all 0.2s; transition: all 0.2s; }
/* checked mark aspect changes */
.chkstyle:not(:checked) + label:after { opacity: 0; -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); }
.chkstyle:checked + label:after { opacity: 1; -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); }
/* Disabled checkbox */
.chkstyle:disabled:not(:checked) + label:before, .chkstyle:disabled:checked + label:before { box-shadow: none; border-color: #bbb; background-color: #e9e9e9; }
.chkstyle:disabled:checked + label:after { color: #777; }
.chkstyle:disabled + label { color: #aaa; }
/* Accessibility */
.chkstyle:checked:focus + label:before, .chkstyle:not(:checked):focus + label:before { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 6px rgba(13, 110, 253, 0.2); }

a.info       { position: relative; color: black; text-decoration: none; border-bottom: 1px gray dotted; }
a.info span  { display: none; }
a.info:hover { background: none; z-index: 500; cursor: help; }
a.info:hover span { display: inline; position: absolute; white-space: nowrap; top: 30px; left: 20px; background: white; color: navy; padding: 3px; border: 1px solid navy; border-left: 4px solid navy; }
a.infosel    { position: relative; color: #000000; background-color: #f5f5f5; text-decoration: none; border-bottom: 1px gray dotted; }
a.infosel span  { display: none; }
a.infosel:hover { background: none; z-index: 500; cursor: help; }
a.infosel:hover span { display: inline; position: absolute; white-space: nowrap; top: 30px; left: 20px; background: white; color: navy; padding: 3px; border: 1px solid navy; border-left: 4px solid navy; }
.ttooltip { text-align:left;background:navy; color:#F2FFCF; }

.mclient { position:relative;text-align:center; }
.mclient-panel { display:inline-block;min-height:100px;}
.mclient-panel .mclient-open { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0 }
.mclient-nav { border:#aaa solid 1px;cursor:pointer;font-size:1rem;display:inline-block;padding:2px 3px;margin-right:10px;color:navy;}
.mclient-open,.mclient-nav:hover,.mclient-open:checked ~ .mclient-nav {background-color:#80bbee;}
.mclient-inner { text-align:left; opacity:0; margin-top:10px; position:absolute; left:0; transition:opacity .1s; visibility:hidden; color:navy; columns:3; -webkit-columns: 3;}
.mclient-open:focus:checked ~ .mclient-nav{outline:thin dotted}
.mclient-open:checked ~ .mclient-inner{opacity:100;visibility:visible; transition:opacity .6s ease-in-out;}
.mclient-inner li { list-style-type: none; }
.mclient-inner li span { text-decoration:none; color:navy; cursor:pointer;}
.mclient-inner li span:hover { text-decoration:none; background:lightyellow;}

.xtab { position:relative;text-align:center; }
.xtab-painel { display:inline-block;min-height:100px;}
.xtab-painel .xtab-open { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0 }
.xtab-panel { display:inline-block;min-height:100px;}
.xtab-panel .xtab-open { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0 }
.xtab-nav { border:#aaa solid 1px;cursor:pointer;font-size:1rem;display:inline-block;padding:2px 3px;margin-right:10px;color:navy;}
.xtab-open,.xtab-nav:hover,.xtab-open:checked ~ .xtab-nav {background-color:#80bbee;}
.xtab-inner { text-align:left; opacity:0; margin-top:10px; position:absolute; left:0; transition:opacity .1s; visibility:hidden; color:navy; columns:3; -webkit-columns: 3;}
.xtab-open:focus:checked ~ .xtab-nav{outline:thin dotted}
.xtab-open:checked ~ .xtab-inner{opacity:100;visibility:visible; transition:opacity .6s ease-in-out;}
.xtab-inner li { list-style-type: none; }
.xtab-inner li a { text-decoration:none; color:navy; cursor:pointer;}
.xtab-inner li a:hover { text-decoration:none; background:lightyellow;}

/* class xmodal */
.xmodal { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: left; background: rgba(0,0,0, .9); transition: opacity .25s ease;}
.xmodal__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
.xmodal-state { display: none; }
.xmodal-state:checked + .xmodal { opacity: 1; visibility: visible; }
.xmodal-state:checked + .xmodal .xmodal__inner { top: 0; }
.xmodal__inner { transition: top .25s ease; position: absolute; top: -10%; right: 0; bottom: 0; left: 0; width: 80%; margin: auto; overflow: auto; background: #fff; border-radius: 5px; padding: 1em 2em; height: 90%; }
.xmodal__close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
.xmodal__close:after,
.xmodal__close:before { content: ''; position: absolute; width: 2px; height: 1.5em; background: #ccc; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; }
.xmodal__close:hover:after,
.xmodal__close:hover:before { background: #aaa; }
.xmodal__close:before { transform: rotate(-45deg); }
@media screen and (max-width: 768px) { .xmodal__inner { width: 90%; height: 90%; box-sizing: border-box; } }
.cmodal { display: none; position: fixed; z-index: 0; padding-top: 20px; /* Location of the box */
       left: 0; top: 0; width: 100%; height: 100%; /* Full size */
       overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
 .cmodal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; }
.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }
.cal_in_input{ position:relative; width:8rem; height:auto;
               background:#fff  url('data:image/gif;base64,R0lGODlhEAAQAPcAAAAAAAAA/4SEhMbGxv8AAP//AP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ywAAAAAEAAQAAAIZAABCBxIsKDAAQgBCFjIEADCAQcdKmS4UCJEhwkpVnxosGPBAAYEgBQZciRIgQZCphSwsqUBgRpjNgRgsmTIAgRIolTJUwCBnClhyowpsCbJoycBuGTZM+jEoRSL2kRq06PVgAAAOw==') 97% 50% no-repeat ;
             }

.text-danger {color:firebrick;}

/* Overide highslide.css */
.highslide img {border:0;}

/* Animation */
@keyframes slideDownFadeIN
{
    from {top:-100px;opacity: 0;}
    to {top:0px;opacity:1;}
}

/* Décrire l'animation */
@keyframes slideDownFadeOUT
{
    from {top:0px;opacity: 1;}
    to {top:-300px;opacity:0;}
}

/* Foncer l'arrière-plan de la fenêtre modale */
.modalWizard {
  display: none; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

/* Afficher la fenêtre modale lorsqu'elle est ciblée par un lien supprimer */
.modalWizard:target {
  display: inline;
  position: absolute;
}

/* la fenêtre modale  */
.modalWizard-dialog {
  display: inline;
  vertical-align: middle;
}

/* Le contenu de la modale */
.modalWizard-dialog .modalWizard-content {
  margin: auto;
  background-color: #f3f3f3;
  position: relative;
  padding: 0;
  outline: 0;
  border: 1px #777 solid;
  text-align: justify;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
  animation-name: slideDownFadeIN;
  animation-duration: 1s;
}

/* Bouton servant à fermer la fenêtre modale */
.closeWizardBtn {
  float:right;
  font-size: 24px;
  font-weight: bold;
  color: #777;
  margin-right: 10px;
  margin-top: 5px;
}

.closeWizardBtn:hover,
.closeWizardBtn:focus {
  color: #000;
  cursor: pointer;
}

.containerWizard { padding: 2px 8px; }

.deconnexion {float:left;text-decoration: none; font-size:1.4rem;}  /* padding:15px; */
.deconnexion:hover{background:red} 

.mmnav{float:left;top:10px;left:30px;position:absolute;}
.mmnav>ul{float:left;position:relative; padding-right: 40px; margin-left: 10px; margin-right: 10px;}
.mmnav li{list-style:none;float:left; margin-right: 1rem;}
.mmnav li a{float:left;text-decoration: none; font-size:1.4rem;} /* padding:15px;  */
.mmnav li li a{float:left; text-decoration: none;}               /* padding:5px; */
/* .mmnav li a:hover{background:lightsalmon}   /* MENU : Couleur de fond lors du survol */

.mmnav li ul{display:none}
.mmnav li:hover ul{display:inline}
.mmnav li li{float:none}
.mmnav .mega-dropdown{width:100%;position:absolute;top:100%;left:0;background:#fee;overflow:hidden;padding:5px 5px;border-bottom:3px solid #34495e; z-index:800; opacity: 0.9; }
.mmnav li li a{float:none;display:inline-block;border-radius:3px;font-size:0.8rem}  /* taille du sous-menu */
.mmnav li li a:hover{background:red}   /* Sous-MENU : Couleur de fond lors du survol */
.mega-col{width:10%;float:left; padding-left:10px;}  /* espace entre les colonnes */

.subli {padding-left: 0.8em;font-size:0.8rem;}
.subli:before {
  content: "\-"; /* FontAwesome Unicode */
  /* font-family: "Font Awesome 6 Free"; */
  display: ruby-text;
  margin-left: -0.8em; /* same as padding-left set on li */
  width: 0.8em; /* same as padding-left set on li */
}

.bonjour   {position: absolute; top:34px;}
.container {position: absolute; top:3.5rem;width:100%;}

.animate {
  position: relative;
  width: 2rem;
  height: 2rem;
  animation-name: slidein;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

@keyframes slidein
{
  from { opacity:0%;   }
  to   { opacity:100%; }
}

.navbarsm2 { padding-top: 0; padding-bottom: 0; width: 80%; }
.navbarsm2 .icon { margin-top: -5px; }
#navbarsm2 > ul { position: relative; list-style: none; margin: 0; padding: 0; z-index: 100; font-size: 11px; text-shadow: #000000 0 -1px 1px; line-height: 30px; white-space: nowrap; }

.navbarsm { padding-top: 0; padding-bottom: 0; width: 100%; }
.navbarsm .icon { margin-top: -5px; }
#navbarsm > ul { position: relative; list-style: none; margin: 0; padding: 0; z-index: 100; font-size: 11px; text-shadow: #000000 0 -1px 1px; line-height: 30px; white-space: nowrap; }
.navbarlink, .navbarlink2 {text-transform: uppercase; color:navy; text-align: center; display:block;
                           padding-right: .5rem; padding-left: .5rem; padding-bottom: .5rem; padding-top: .5rem; cursor: pointer; font-weight: bold; }

.navbarlink:after, .navbarlink2:after {
    content: '';
    display: block;
    position: relative;
    bottom: 2px;
    width: 0%;
    left: 0px;
    height: 2px;
    transition: 0.25s cubic-bezier(0.72,-0.01, 0.19, 0.92);
    background: #E46161;
}
.navbarlink:hover:after, .navbarlink2:hover:after { width: 100%; }

.navbarlinkunderline {
   text-decoration: underline navy;
   text-underline-offset: 4px;
   text-decoration-thickness: 2px;
}

/* From https://cssgradient.io/ */
/* .navGradient { background: rgb(79,167,214); background: linear-gradient(180deg, rgba(79,167,214,1) 0%, rgba(255,255,255,1) 50%, rgba(79,167,214,1) 100%); } */
.navGradient { background: rgb(70,130,180); background: linear-gradient(180deg, rgba(70,130,180,1) 0%, rgba(207,226,255,1) 50%, rgba(70,130,180,1) 100%); }

/* for lib_app.php */
.defaults {}
.defHidden {display:none;}

@media print {
                 @page {margin: 1cm;}
                 @page {size: A4 landscape;}
                 .noprint    {display: none;}
                 .titrePrint {text-align:center; font-size: 20pt;}
                 .presence   {color:navy;    border:inset 2px Ivory;     box-shadow: inset 0 0 0 1000px Ivory;}
                 .distance   {color:Brown;   border:inset 2px Linen;     box-shadow: inset 0 0 0 1000px Linen;}
                 .absence    {color:DimGray; border:inset 2px Gainsboro; box-shadow: inset 0 0 0 1000px Gainsboro;}
                 #logoUniv, #logoLabo, .navbar, #footer-panel, #copyright, .table-sm, #scheduleAgendaText {display:none}
                 .modal, .modal *{ border:none; width:auto; flex: 1 0 100%; max-width:none; position:static;}
                 #scheduleTBModal { border:none; width:auto; flex: 1 0 100%; max-width:none; position:static;}
                }


/* improve bootstrap */
.dotted { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: navy; }
.btn-transparent {background-color: Transparent; border: none; }

/* Change la couleur par défaut du tooltip de bootstrap */
.tooltip-inner{ background-color: #4862A3 !important; color: #fff !important; border: 1px solid navy; max-width: 100%; width: inherit; }
.bs-tooltip-end .tooltip-arrow::before{ border-right-color: navy !important; }
.bs-tooltip-bottom .tooltip-arrow::before{ border-bottom-color: navy !important; }
.bs-tooltip-start .tooltip-arrow::before{ border-left-color: navy !important; }
.bs-tooltip-top .tooltip-arrow::before{ border-top-color: navy !important; }

.cursor-help {cursor: help !important;}
.w-33 {width: 33% !important}

/* crée un repérage de type "dropzone" */
.dropzone-primary {border: 2px dashed navy; border-radius: 5px; }

.float-start-vertical-align { float:left; transform: translateY(50%); }
.float-end-vertical-align { float:right; transform: translateY(50%); }
.float-vertical-align { transform: translateY(50%); }

.zoomPic1 {width:100px; height:60px; border:2px solid #CF5959; border-radius:3%; cursor:pointer}
.zoomPic2 {width:0; transition:all 0.5s ease; position:absolute; border-radius:3%; z-index:99999; border:0;}
.zoomPic1:hover + .zoomPic2 { width:500px } /* width:400px */

/* workaround for boostrap bug */
.modal-backdrop { z-index: 10; }

.containerIntranet { display: flex; justify-content: center; block-size: min(8rem, 20vw); min-inline-size: 22.5rem; }
.strokeIntranet { font-size: 50px; letter-spacing: 4px; fill: none; stroke: #000; stroke-width: 2; stroke-dasharray: 100%; stroke-dashoffset: 100%;
                  animation: textStrokeAnim 4000ms linear both; animation-iteration-count: 1; }
@keyframes intranetStrokeAnim {
    0%   { stroke-dasharray: 100%; stroke-dashoffset: 100%; fill: #0000; }
    95%  { stroke-dasharray: 0%;   stroke-dashoffset: 90%;  fill: #0000; }
    100% { stroke-dasharray: 0%;   stroke-dashoffset: 0%;   fill: #9b9dad; filter: drop-shadow(2px 2px 10px #0007); }
}

/* https://codepen.io/Adir-SL/pen/vYVaXmw */
#listeMultiple { position: absolute; top: 3rem; left: 0; width: 100%; height: 100%; color: #333333;
           font-family: "Inter", sans-serif; overflow-x: hidden; overflow-y: scroll; }

.listeFlexDiv { display: flex; position: absolute; margin-top: 60px; width: 90vw;
                flex-wrap: wrap; max-width: 800px; left: 50%; top: 0; transform: translateX(-50%); }

.posLabel { display: inline-block; }

.tag { padding: 6px 12px; width: fit-content; border-radius: 9999px; margin-top: 12px; user-select: none; }
.label1 { background-color: var(--tagColorLabel1); }
.label2 { background-color: var(--tagColorLabel2); }
.label3 { background-color: var(--tagColorLabel3); }
.label4 { background-color: var(--tagColorLabel4); }
.label5 { background-color: var(--tagColorLabel5); }
.label6 { background-color: var(--tagColorLabel6); }
.label7 { background-color: var(--tagColorLabel7); }
.label8 { background-color: var(--tagColorLabel8); }
.label9 { background-color: var(--tagColorLabel9); }

#label1:checked + label div { background-color: var(--tagColorLabel1); color: unset; }
#label2:checked + label div { background-color: var(--tagColorLabel2); color: unset; }
#label3:checked + label div { background-color: var(--tagColorLabel3); color: unset; }
#label4:checked + label div { background-color: var(--tagColorLabel4); color: unset; }
#label5:checked + label div { background-color: var(--tagColorLabel5); color: unset; }
#label6:checked + label div { background-color: var(--tagColorLabel6); color: unset; }
#label7:checked + label div { background-color: var(--tagColorLabel7); color: unset; }
#label8:checked + label div { background-color: var(--tagColorLabel8); color: unset; }
#label9:checked + label div { background-color: var(--tagColorLabel9); color: unset; }

#label1 + label div { background-color: white; border: 1px solid var(--tagColorLabel1); color: var(--tagColorLabel1); }
#label2 + label div { background-color: white; border: 1px solid var(--tagColorLabel2); color: var(--tagColorLabel2); }
#label3 + label div { background-color: white; border: 1px solid var(--tagColorLabel3); color: var(--tagColorLabel3); }
#label4 + label div { background-color: white; border: 1px solid var(--tagColorLabel4); color: var(--tagColorLabel4); }
#label5 + label div { background-color: white; border: 1px solid var(--tagColorLabel5); color: var(--tagColorLabel5); }
#label6 + label div { background-color: white; border: 1px solid var(--tagColorLabel6); color: var(--tagColorLabel6); }
#label7 + label div { background-color: white; border: 1px solid var(--tagColorLabel7); color: var(--tagColorLabel7); }
#label8 + label div { background-color: white; border: 1px solid var(--tagColorLabel8); color: var(--tagColorLabel8); }
#label9 + label div { background-color: white; border: 1px solid var(--tagColorLabel9); color: var(--tagColorLabel9); }


.note { background-color: #ffffff; border: 1px solid #ebebeb; box-sizing: border-box; line-height: 1.5;
        border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 4px; overflow: hidden; display: flex;
        flex-direction: column; justify-content: space-between; transition: all 300ms ease-in-out 0s; }

.noteImg { width:16px; position:relative; top:-18px; left:200px; }
.noteTxt { position:relative; top:-18px; height: 24px; }
/*
.note:has(.label1):hover { border-color: var(--tagColorLabel1); }
.note:has(.label2):hover { border-color: var(--tagColorLabel2); }
.note:has(.label3):hover { border-color: var(--tagColorLabel3); }
.note:has(.label4):hover { border-color: var(--tagColorLabel4); }
.note:has(.label5):hover { border-color: var(--tagColorLabel5); }
.note:has(.label6):hover { border-color: var(--tagColorLabel6); }
.note:has(.label7):hover { border-color: var(--tagColorLabel7); }
.note:has(.label8):hover { border-color: var(--tagColorLabel8); }
.note:has(.label9):hover { border-color: var(--tagColorLabel9); }
*/

.note:hover { border-color: navy; }

/*
.note:has(.label1)::selection { border-color: var(--tagColorLabel1); }
.note:has(.label2)::selection { border-color: var(--tagColorLabel2); }
.note:has(.label3)::selection { border-color: var(--tagColorLabel3); }
*/

.tag::before { content: "#"; margin-right: 2px; opacity: 0.5; }
.noteHide   { display: none; }
.noteUnhide { width: 31%; height: 160px; padding: 3%; margin: 1%; opacity: 1; border-width: 1px; display: flex; }

.dlabel       { cursor: pointer; }
.dlabel:hover { opacity: 0.8; }

@media screen and (max-width: 400px)
{
   .listeFlexDiv { flex-direction: column; }
   #label1:checked ~ .note:has(.label1),
   #label2:checked ~ .note:has(.label2),
   #label3:checked ~ .note:has(.label3),
   #label4:checked ~ .note:has(.label4),
   #label5:checked ~ .note:has(.label5),
   #label6:checked ~ .note:has(.label6),
   #label7:checked ~ .note:has(.label7),
   #label8:checked ~ .note:has(.label8),
   #label9:checked ~ .note:has(.label9)
   {
      width: 100%;
      height: 160px;
      padding: 3%;
      margin-top: 24px;
      opacity: 1;
      border-width: 1px;
   }
   .note:last-of-type { margin-bottom: 24px; }
}

.ulWithNobullet {list-style-type: none;  padding: 0; margin: 0; }

.ulinpop {margin-bottom:0; list-style-position: inside; margin-left: -2rem;}

.onglet > section:not(:target) > div { z-index: 1050; }
.onglet > section:target       > div { z-index: 1060; }
.onglet > section:target       > a   { color: white; background-color: navy; }

.onglet { height: 45rem; }
.onglet > section > a { float: left; padding: 0.25rem 0.75rem; margin: 0 0.25rem; text-align: center; text-decoration: none; border-radius: 5px 5px 0 0; }
.onglet > section > div { position: absolute; left: 0; right: 0; top: 3rem; height: 85%; padding: 0.25rem 0.5rem; background-color: #fff; border-radius: 5px 10px 10px 10px; box-shadow: 0 1px 3px #999; }

.cursor-pointer { cursor: pointer; }
.w-10 { width:10% !important; }
.w-20 { width:10% !important; }

/* FROM https://codepen.io/tommyho/pen/gbYJRXP */
.toggleContainer { font-size: 60%; padding: 5px; box-shadow: 0 3rem 5rem -2rem rgba(0, 0, 0, 0.8); }

/*  Toggle Switch  */
.toggleSwitch span span { display: none; }

.custom-check-input:checked { background-color: limegreen; border-color: green; }
.custom-check-input { background-color: white; border-color: green; }

@media only screen {
   .toggleSwitch { display: inline-block; height: 18px; position: relative; overflow: visible; padding: 0; margin-left: 50px; cursor: pointer; width: 36px; margin-top: 6px;}
   .toggleSwitch * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
   .noToggleLabel { margin-left: 0px; }
   .toggleSwitch label, .toggleSwitch > span { line-height: 20px; height: 22px; vertical-align: middle; }
   .toggleSwitch input:focus ~ a, .toggleSwitch input:focus + label { outline: none; }
   .toggleSwitch label { position: relative; z-index: 3; display: block; width: 100%; }
   .toggleSwitch input { position: absolute; opacity: 0; z-index: 5; }
   .toggleSwitch > span { position: absolute; left: -50px; width: 100%; margin: 0; padding-right: 50px; text-align: left; white-space: nowrap; }
   .toggleSwitch > span span { position: absolute; top: 0; left: 0; z-index: 5; display: block; width: 50%; margin-left: 30px; text-align: center;
                               font-size: 0.9em; width: 100%; left: 10px; top: -1px; opacity: 0; }
   .toggleSwitch a           { position: absolute; right: 50%; z-index: 4; display: block; height: 100%; padding: 0; left: 7px; width: 18px;
                               background-color: #fff; border: 1px solid #ccc; border-radius: 100%; -webkit-transition: all 0.2s ease-out;
                               -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
   .toggleSwitch > span span:first-of-type { color: #ccc; opacity: 1; left: 45%; }
   .toggleSwitch > span:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 50px; top: -2px;
                                 background-color: #fafafa; border: 1px solid #ccc; border-radius: 30px; -webkit-transition: all 0.2s ease-out;
                                 -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
   .toggleSwitch input:checked ~ a { border-color: #fff; left: 100%; margin-left: -8px; }
   .toggleSwitch input:checked ~ span:before { border-color: #0097d1; box-shadow: inset 0 0 0 30px #0097d1; }
   .toggleSwitch input:checked ~ span span:first-of-type { opacity: 0; }
   .toggleSwitch input:checked ~ span span:last-of-type  { opacity: 1; color: #fff; }
   /* Switch Sizes */
   .toggleSwitch.long { width: 190px; height: 24px; }
   .toggleSwitch.long a { width: 28px; }
   .toggleSwitch.long > span { height: 28px; line-height: 28px; }
   /* .toggleSwitch.long input:checked ~ a { left: 171px; } */
   .toggleSwitch.long input:checked ~ a { left: 165px; }

   /* .toggleSwitch.long > span span { font-size: 1.1em; } */
   .toggleSwitch.long > span span:first-of-type { left: 34px; }

   .noToggleLabel { margin-left: 0px; }

}