.prgULB, .formation, .ueup {  
   /* couleurs utilisées pour les différents éléments graphiques (bullets, icônes, etc.) */
   --bullet-color1niv0: #004d95;

   /* couleurs utilisées pour les menus de sélection */
   --unselect-background-color: #E2EAF3;   /* utilisé pour indiquer un élément non sélectionné */
   --unselect-text-color: #5A7FA4;
   --select-background-color: #9EC0E1;     /* utilisé pour indiquer un élément sélectionné */
   --select-text-color: rgba(255, 255, 255, 0.9);
   --preselect-background-color: #DCE9F5;  /* utilisé pour mettre en évidence un élément à sélectionner (survol souris) */
   --preselect-text-color: #5A7FA4;
   
   /* couleur utilisées en mode carte pour les quatre niveaux de boites regroupant les cours */
   --border0-color: #e0e0e0;
   --background0-color: #fcfcfc;

   --border1-color: #cccccc;
   --background1-color: #f8f8f8;

   --border2-color: #c8c8c8;
   --background2-color: #f4f4f4;

   --border3-color: #c4c4c4;
   --background3-color: #f0f0f0;

   /* Couleurs utilisées pour les tables (détails techniques, comparaison de programmes...) */
   --table-border-color: var(--select-background-color); /* #D9DFF7; */
   --table-background-color1niv0: #E6EFF9; /* trois niveaux de bleu */
   --table-background-color1niv1: #f7fbff;
   --table-background-color1niv2: #fafbfc;

   --table-background-color2niv0: #FFFFF7;;
   --table-background-color2niv1: #F7F1EE; /* couleur jaune clair contrastée */
   --table-background-color2niv2: #F7FAEE; 
   --table-background-color2niv3: #f3fefa; 
   --table-background-color2niv4: #f7f4fa; 

   /* Couleurs utilisées pour marquer les règles de choix de cours */
   --rule0-color: #72bcc7;
   --rule1-color: #a3be8c;
   --rule2-color: #cec259;
   --rule3-color: #d9a68b;
   --rule4-color: #72bcc7;
   --rule5-color: #a3be8c;
   --rule6-color: #cec259;
   --rule7-color: #d9a68b;

   --bloc-padding: 12px;

   --choice-selected: #82be4f;
   --choice-undefined-unselected: #b74d4d;
   --choice-defined-unselected: #c8c8c8;
   }

div.programme {
   font-size: 114%;
   }

div.prgDebug {
   font-size: 12px;
   font-weight: bold;
   letter-spacing: 0;
   color: #ffffff;
   background-color: #000000;   
   }

div.prg-cours.defined.unselected div.prgDebug.option {
   color: #000000;
   }

div.prgDebug.rule {
   background-color: #5f3b57;
   }

div.prgDebug.choice {
   background-color: #5f3b57;
   }

div.prgDebug.option {
   background-color: #d6c1d0;
   }

div.prgDebug.course {
   background-color: #b8b765;
   }

div.prgDebug.module {
   background-color: #8ed37f;
   }


span.hide1024 {
   display: inline;
   }

span.show1024 {
   display: none;
   }

@media only screen and (max-width: 1024px)
   {
   span.hide1024 {
      display: none;
      }

   span.show1024 {
      display: inline;
      }
   }

span.hide800 {
   display: inline;
   }

span.show800 {
   display: none;
   }

@media only screen and (max-width: 800px)
   {
   span.hide800 {
      display: none;
      }

   span.show800 {
      display: inline;
      }
   }



/* *********************************************************************************
Menus de navigation et de sélection (année académique, finalité, bloc...)
********************************************************************************* */
#prgNavAnchor {
   z-index: 100;
   position: relative;
   }

div.prgNav {
   display: block;
   position: relative;
   background-color: var(--table-background-color1niv1);
   border: 1px solid var(--table-border-color);
   border-radius: 4px;
   padding: 0.8em;
   padding-top: 1.4em;
   margin-bottom: 2em;
   }

div.prgNavDebugButton { 
   cursor: pointer; 
   position: absolute; 
   bottom: 4px; 
   right: 4px;
   color: #7F0000;
   font-size: 0.6em;
   }

div.prgNav.stycked div.prgNavDebugButton { 
   right: 30px;
   }

div.prgNavDebugDiv {
   position: fixed;
   top: 2.4em;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: #ffffff;
   padding: 8px;
   padding-top: 1em; 
   color: #999999; 
   display: none;
   z-index: 1000;
   overflow: auto; 
   }

div.prgNavDebugDiv > div.prgNavDebugContent {
   padding-top: 1em;
   }

div.prgNavDebugDiv > div.prgNavDebugContent > div {
   padding-top: 1em;
   padding-bottom: 0.6em;
   border-top-style: solid;
   border-top-width: 1px; 
   border-top-color: #CCC;
   position: relative;
   } 

div.prgNavDebugDiv > div.prgNavDebugContent > div.interne {
  color: #c9c906;
   }

div.prgNavDebugDiv > div.prgNavDebugContent > div > div.data {
   padding-left: 1.2em;   
   position: relative;
   }

div.prgNavDebugDiv > div.prgNavDebugContent > div > div.data::before {
   position: absolute;
   top: 1px;
   left: 0px;
   height: 1em;
   width: 1em;
   font-family: FontAwesome;
   font-size: 1em;
   content: "\F061";
   color: #CCCCCC;
   }

div.prgNavDebugDiv > div.prgNavDebugContent div.prgDebugTime {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 20px;
   color: #148b18;
   font-size: 0.8em;
   }


div.prgNavDebugCmd {
   position: fixed;
   top: 0px;
   left: 0px;
   right: 0px;
   height: 2.4em;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-bottom-color: #004d95;
   background-color: #F0F0FF;  
   z-index: 1001; 
   }

div.prgNavDebugCmd.ecran {
   opacity: 0.8;
   }

div.prgNavDebugCmd > div.closeDbg {
   position: absolute;
   top: 0.1em;
   right: 0.3em;
   width: 1.4em;
   height: 1.4em;
   z-index: 5;
   }

div.prgNavDebugCmd > div.closeDbg::before {
   font-family: FontAwesome;
   font-size: 1.4em;
   content: "\F00D";
   color: #004d95;
   opacity: 1;
   }

div.prgNavDebugCmd > span.cmd {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 0.6em;
    display: inline-block;
    padding: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 0em;
    }

div.prgNavDebugCmd > span.data {
   font-weight: 800;
   font-size: 0.8em;
   display: inline-block;
   padding: 10px;
   margin-right: 1em;
   color: #dddddd;
   }

div.prgNavDebugCmd > span.enabled {
   color: #135595;
   }

div.prgNavDebugCmd > span.enabled.strong {
   color: #7F0000;
   }

div.prgNavDebugCmd > span.disabled {
   color: #cccccc;
   }

body.prgMobileOn div.prgNav {
   padding-top: 0.2em;
   padding-bottom: 0.1em;
   }

.formation.sticky-jumps.prgMobileOff div.prgNav::before {
   position: fixed;
   display: block;
   top: 46px;
   left: 0px;
   z-index: 2;
   content: '';
   height: 12px;
   width: 100%;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
   border-top: 1px solid var(--table-border-color);   
   }

.formation.sticky-jumps.prgMobileOff div.prgNav.stycked::before {
   display: none;
   }
   
div.prgNav::after {
   position: absolute;
   display: block;
   bottom: -12px;
   left: -2px;
   right: -2px;
   content: '';
   height: 12px;
   width: 100%;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
   border-top: 1px solid var(--table-border-color);   
   }

div.prgNav.stycked {
   position: fixed;
   top: 46px;
   left: 0px;
   z-index: 2;
   width: 100%;
   border: 0px none;
   border-top: 1px solid var(--table-border-color);
   border-bottom: 1px solid var(--table-border-color);
   }

#prgNavAnchor.menuOpen div.prgNav {
   display: block;
   }

#prgNavAnchor.menuClose div.prgNav {
   display: none;
   }
   
body.prgMobileOn div.prgNav.stycked {
   top: 0px;
   }

div.prgNav.stycked div.prgNavContainer {
   margin: auto;
   max-width: calc(1412px + 18px); 
   -webkit-animation: menu_styck 0.4s 1 ease-in-out;
   animation: menu_styck 0.4s 1 ease-out;}

@-webkit-keyframes menu_styck {
   0%   {
         padding-left: 1em;
        }
   100% {
        padding-left: 0em;
        }
   }

@keyframes menu_styck {
   0%   {
        padding-left: 1em;
        }
   100% {
        padding-left: 0em;
        }
}

#prgNavAnchor.menuOpen div.prgNavContainer {
   display: block;
   }  

#prgNavAnchor.menuClose div.prgNavContainer {
   display: none;
   }  
      
div.prgNavOpen {
   position: fixed;
   top: 56px;
   right: 8px;
   }  
   
#prgNavAnchor.menuOpen div.prgNavOpen {
   display: none;
   }  
   
#prgNavAnchor.menuClose div.prgNavOpen {
   display: block;
   }  
   

.formation.sticky-jumps.prgMobileOff #prgNavAnchor.menuClose div.prgNavOpen::before {
   position: fixed;
   display: block;
   top: 46px;
   left: 0px;
   z-index: 2;
   content: '';
   height: 12px;
   width: 100%;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
   border-top: 1px solid var(--table-border-color);   
   }

div.prgNavOpen::after {
   position: absolute;
   top: 0em;
   right: 0em;
   height: 1em;
   width: 1em;
   font-family: FontAwesome;
   font-size: 1.4em;
   content: "\F0C9";
   background-color: var(--table-background-color1niv1);
   border: 1px solid var(--table-border-color);
   color: var(--select-background-color);
   padding-left: 0.4em;
   padding-top: 0.06em;
   padding-right: 0.26em;
   padding-bottom: 0.46em;
   }
   
div.prgNavOpen:hover::after {
   cursor: pointer;
   color: #004d95;
   }
   
#prgNavAnchor.menuOpen div.prgNavClose {
   display: block;
   }  

#prgNavAnchor.menuClose div.prgNavClose {
   display: none;
   }  

div.prgNav.stycked div.prgNavClose::after {
   position: absolute;
   top: -0.1em;
   right: 0.8em;
   height: 1em;
   width: 1em;
   font-size: 2.2em;
   font-size: 2.2em;
   content: "\00D7";
   color: var(--select-background-color);
   opacity: 1;
   -webkit-animation: menu_close 1s 1 ease-out;
   animation: menu_close 1s 1 ease-out;
   }

div.prgNav.stycked div.prgNavClose:hover::after {
   cursor: pointer;
   color: #004d95;
   }

@-webkit-keyframes menu_close {
    0%   {
         opacity: 0; 
         }
    100% {
         opacity: 1;
         }
    }

@keyframes menu_close {
    0%   { 
         opacity: 0;
         }
    100% {
         opacity: 1;
         }
    }


div.prgNavMenu {
   display: block;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   font-size: 0.7em;
   margin-bottom: 1.4em;
   }

div.prgNavMenu:last-child {
   margin-bottom: 0.2em;
   }

div.prgNavMenuContent.off, div.prgNavMenuContent.disabled {
   display: none;
   }

div.prgNavMenuContent.on {
   display: inline;
   }

div.prgNavLabel {
   display: inline;
   margin-right: 4px; 
   }

div.prgNav.small.extra div.prgNavLabel {
   display: none;
   }

div.prgNavBox {
   display: inline;
   line-height: 1.4em;
   position: relative;
   }

div.prgNavItems {
   display: inline;
   line-height: 1.4em;
   position: relative;
   }

div.prgMenuLabelBis {
   text-transform: none;
   padding-bottom: 0.8em;
   font-weight: 600;
   font-size: 1.4em;
   color: #004d95;
   font-style: italic;
   }

div.prgNavItem {
   display: inline-block;
   position: relative;
   white-space: nowrap;
   margin-left: -4px;
   padding-left: 6px;
   padding-right: 6px;
   padding-top: 3px;
   padding-bottom: 3px;
   color: #666666;
   }

.prgNav div.prgNavItem span.prgNavItemShort {
   display: none;
   }

.prgNav.small div.prgNavItem span.prgNavItemShort {
   display: inline;
   }

.prgNav div.prgNavItem span.prgNavItemChoice {
   color: #ffffff;
   }

.prgNav div.prgNavItem.off span.prgNavItemChoice {
   color: #79b3b0;
   }
   
div.prgNavItem.disabled {  
   display: none; 
   }

div.prgNavItem.off {
   background-color: var(--unselect-background-color);
   color: var(--unselect-text-color);
   cursor: pointer;
   border-left-style: solid;
   border-left-width: 1px;
   border-left-color: transparent; 
   }

div.prgNavItem.off:hover {
   background-color: var(--preselect-background-color);
   color: var(--preselect-text-color);
   font-weight: 600; 
   }

div.prgNavItem.off ~ div.prgNavItem.off, div.prgNavItem.on ~ div.prgNavItem.off {
   border-left-color: var(--select-background-color); 
   }

div.prgNavItem.on + div.prgNavItem.off {
   border-left-color: var(--select-background-color);  
   }

div.prgNavItem > a {
   background-color: transparent;
   }

div.prgNav.small div.prgNavItem.off {
   border-left-color: transparent;  
   }

div.prgNavItem.on, div.prgNavItem.selected {
   background-color: var(--select-background-color);
   color: var(--select-text-color);
   border-left-style: solid;
   border-left-width: 1px;
   border-left-color: var(--select-background-color); 
   border-radius: 3px;
   padding-top: 5px;
   padding-bottom: 5px;
   font-weight: 600;
   cursor: pointer;
   }

div.prgNavItem.selected {
   padding-top: 5px;
   padding-bottom: 4px;
   padding-right: 2em;
   }

div.prgNavData {
   letter-spacing: 0px;
   text-transform: none;
   font-size: 110%;
   }

div.prgNavData.otherSections {
   margin-top: 2em;
   }

div.prgNavData.otherSections::before {
   content: "\F1E1";
   font-family: "FontAwesome";
   padding-right: 0.2em;
   font-size: 2em;
   color: #a9d286;
   vertical-align: -0.2em;
   }

div.prgMenuContent {
   min-height: 1200px; /* à changer ---> assure que toute les pages font plus d'une taille d'écran */
   }

div.prgNav.inline div.prgNavMenu {
   display: inline-block;
   margin-right: 2em;
   margin-bottom: 0.6em;
   white-space: nowrap;
   }

div.prgNav.stycked div.prgNavMenu:last-child {
   margin-right: 0em;
   }

div.prgNav.small div.prgNavBox {
   position: relative;
   }

div.prgNav.small div.prgNavBox.on div.prgNavItems {
   background-color: #ffffff;
   padding-left: 2em;
   padding-bottom: 1em;
   padding-top: 2em;
   padding-right: 5em; 
   }

div.prgNav.small div.prgNavBox.on div.prgNavItems::after {
   position: absolute;
   content: "\F00D";
   font-family: FontAwesome;
   top: -0.3em;
   right: 0em;
   font-size: 2em;
   color: #004d95;
   padding-top: 0.8em;
   padding-right: 0.4em;
   display: block;
   cursor: pointer;
   }

div.prgNav.small div.prgNavBox.on::before {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   opacity: 0.56;
   content: " ";
   display: block;
   background-color: #000000;
   z-index: 1;
   -webkit-animation: box_menu_on 0.6s 1 ease-out;
   animation: box_menu_on 0.6s 1 ease-out;
   }

@-webkit-keyframes box_menu_on {
    0%   {
         opacity: 0; 
         }
    100% {
         opacity: 0.56;
         }
    }

@keyframes box_menu_on {
    0%   { 
         opacity: 0;
         }
    100% {
         opacity: 0.56;
         }
    }

div.prgNav.small div.prgNavBox.on div.prgNavItems div.prgNavItem {
   display: block;
   position: relative;
   margin-bottom: 0.4em;
   background-color: #ffffff;
   font-weight: normal;
   font-size: 1.4em;
   color: #666666;
   text-transform: none;
   padding-bottom: 0.8em; 
   border-style: none;
   }

div.prgNav.small div.prgNavBox.on div.prgNavItems div.prgNavItem.on ~ div.prgNavItem,
div.prgNav.small div.prgNavBox.on div.prgNavItems div.prgNavItem.off ~ div.prgNavItem
   {
   border-top-style: solid;
   border-top-width: 1px;
   border-top-color: #dddddd;
   }

div.prgNav.small div.prgNavBox.on div.prgNavItems div.prgNavItem.on {
   font-weight: 800;
   color: #333333;
   }

div.prgNav.small div.prgNavBox.on div.prgNavItems div.prgNavItem.disabled {
   display: none;
   }

div.prgNav.small div.prgNavItem.selected::after, 
div.prgNav.small div.prgNavBox.on div.prgNavItem.on::after {
   font-family: "FontAwesome";
   font-size: 120%;
   color: var(--select-text-color);
   content: "\F063";
   margin-left: 0.3em;
   vertical-align: 0em;
   display: block;
   padding-left: 4px;
   position: absolute;
   right: 0.3em;
   top: 0.35em;
   color: #dceff8;
   }

div.prgNav.small div.prgNavBox.on div.prgNavItem.on::after {
   opacity: 0;
   }

div.prgNav.small div.prgNavItem.disabled {
   display: none;
   } 

div.prgNavBox.off div.prgNavItems {
   display: none;
   }

div.prgNavBox.on div.prgNavItems {
   background-color: var(--table-background-color1niv0);
   position: absolute;
   display: block;
   border: 1px solid var(--table-border-color);
   padding: 1.2em;
   /* will be set in JS
   left: calc(-1.2em - 1px);
   top: calc(-1.2em - 3px);
   */
   left: 0;
   top: 0;
   z-index: 2;  
   }

div.prgNavBox.on div.prgNavItem.off {
   background-color: var(--preselect-background-color);
   border-left-style: solid;
   border-left-width: 1px;
   border-left-color: var(--preselect-background-color); 
   border-radius: 3px;
   padding-top: 3px;
   padding-bottom: 2px;
   }


/* *********************************************************************************
Icônes pour passe du mode carte au mode liste
********************************************************************************* */
div.prg-view-menu {
   min-height: 32px;
   }

div.prg-view-carte {
   float: right;
   color: var(--unselect-background-color);
   cursor: pointer;
   margin-left: 1em;
   margin-right: 0em; 
   position: relative;
   padding-right: 1.5em; 
   padding-top: 0.1em;
   }

div.prg-view-carte::after {
   content: "\F00A"; 
   font-family: "FontAwesome";
   font-size: 128%;
   position: absolute;
   top: 0px;
   right: 0px;
   }

div.prgViewCarte div.prg-view-carte {
   color: var(--select-background-color);
   }

div.prg-view-liste {
   float: right;
   color: var(--unselect-background-color);
   cursor: pointer;
   margin-left: 1em;
   margin-right: 0em;
   position: relative;
   padding-right: 1.5em;
   padding-top: 0.1em; 
   }

div.prg-view-liste::after {
   content: "\F00B"; 
   font-family: "FontAwesome";
   font-size: 128%;
   position: absolute;
   top: 0px;
   right: 0px;
   }

div.prgViewListe div.prg-view-liste {
   color: var(--select-background-color);
   }


/* *********************************************************************************
Titre du programme
********************************************************************************* */
div.prg-programme-supTitle {
   clear: both;
   font-size: 80%;
   color: #c0c0c0;
   }

div.prg-programme-supTitle span.sep::before {  
   content: "\2022";
   color: var(--select-background-color);
   width: 1em;
   margin-left: 0.4em;
   margin-right: 0.4em;
   }

div.prg-programme-title {
   position: relative;
   top: -0.2em;
   font-size: 140%;
   font-weight: bold;
   color: #004d95;
   }

div.prg-programme-subMenu {
   position: relative;
   width: 17em;
   }

div.prg-programme-subMenu:hover {
   background-color: #ffffff    
   }   
   
div.prg-programme-subTitle {
   clear: both;
   position: relative;
   top: -0.4em;
   font-size: 90%;
   color: #007fd3;
   overflow: visible;
   white-space: nowrap;
   }
   
div.prg-programme-subMenu div.prg-programme-subTitle::before {
   position: relative;
   content: "\F138";
   font-family: FontAwesome;
   padding-right: 0.2em;
   color: var(--select-background-color);
   }

div.prg-programme-subMenu:hover div.prg-programme-subTitle::before {
   content: "\F13A";
   }

div.prg-programme-subMenu div.prg-programme-subPane {
   position: absolute;
   display: none;
   background-color: var(--table-background-color1niv1);
   border: 1px solid var(--table-border-color);
   top: 1.2em;
   left: 0;
   width: 310px;
   padding: 1em;
   padding-top: 0.4em;
   padding-bottom: 0.4em;
   }

div.prg-programme-subMenu:hover div.prg-programme-subPane, div.prg-programme-subPane:hover {
   display: block;
   z-index: 1000;
   }

div.prg-programme-subMenu div.prg-programme-subPane div {
   color: #007fd3;
   font-size: 90%;
   cursor: pointer;
   padding-top: 0.3em;
   padding-bottom: 0.3em;
   white-space: nowrap;
   }

div.prg-programme-subMenu div.prg-programme-subPane div::before {
   content: "\F138";
   font-family: FontAwesome;
   padding-right: 0.2em;
   color: var(--preselect-background-color);
   }

div.prg-programme-subMenu div.prg-programme-subPane div:hover::before {
   color: var(--select-background-color);
   }

div.prg-programme-subMenu div.prg-programme-subPane div:hover {
   color: #004d95;
   }

div.prg-programme-subMenu div.prg-programme-subPane div:first-child {
   padding-top: 0em;
   }
   
div.prg-programme-subMenu div.prg-programme-subPane div.last {
   padding-bottom: 0em;
   border-bottom-style: none;
   }
   
/* *********************************************************************************
Contenu du programme
********************************************************************************* */
div.prg-programme-content {
   position: relative;
   padding-top: 2em;
   margin-bottom: 3em;
   }

div.prg-programme-disclaimer {
  text-align: justify;
  color: #666666;
  font-size: 100%;
  margin-bottom: 3em;
  }

/* *********************************************************************************
Parcours
********************************************************************************* */
div.prg-parcours-intro-container {
   width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: stretch;
   min-height: 50px;
   }

span.prg-parcours-text-info {
   color: #bbbbbb;
   }

span.prg-parcours-text-bullet::before {
   position: relative;
   content: "\F138";
   font-family: "FontAwesome";
   font-size: 140%;
   color: #dddddd;
   margin-left: 0.4em;
   margin-right: 0.2em;
   vertical-align: -0.15em;
   }

div.prgSelectionInfo {
   position: relative;
   margin-top: 0.4em;
   margin-left: -0.2em;
   margin-right: 0em;
   font-size: 90%;
   color: #004d95;
   background-color: transparent;
   display: block;
   padding-left: 1.9em;
   padding-right: 0.4em;
   padding-top: 0.8em;
   padding-bottom: 0.8em;
   }

div.prgSelectionInfo.prgSelectionInfoError {
   color: #aa463b;
   background-color: #ffffff;   
   }

body.prgMobileOn div.prgSelectionInfo {
   position: relative;
   margin-top: 0.6em;
   }
.prgNav.stycked div.prgSelectionInfo {
   margin-right: 1.6em;
   }

div.prgSelectionInfo::before {
   position: absolute;
   left: 0.2em;
   top: 0.3em;
   content: "\F21D";
   font-family: "FontAwesome";
   font-size: 140%;
   color: #004d95;
   }

div.prgSelectionInfo.compare {
   color:  #749c3b;
   }   

div.prgSelectionInfo.compare::before {
   content: "\F074";
   color:  #8fc148;
   }

div.prgSelectionInfo.prgSelectionInfoError::before {
   content: "\F00D";
   color: #aa463b;
   }

div.prgSelectionInfo.done {
   color: #749c3b;
   background-color: transparent;
   }

div.prgSelectionInfo.done::before {
   color: #8fc148;
   }

div.prgSelectionInfo.notDone {
   color: #aa463b;
   background-color: #ffffff;
   }

div.prgSelectionInfo.notDone::before {
   color: #d72715;
   }


div.prg-parcours-item {
   display: inline-block;
   position: relative;
   cursor: pointer;
   padding-left: 0.4em;
   padding-right: 0.4em;
   padding-top: 0.4em;
   padding-bottom: 0.4em;
   margin-top: auto;
   margin-bottom: auto;
   border-radius: 4px;
   font-size: 70%;
   }

div.prg-parcours-item div.prg-parcours-id {
   font-weight: 600; 
   padding-bottom: 0.4em; 
   white-space: nowrap;
   color: #999999;
   }

div.prg-parcours-item.off div.prg-parcours-id {
   color: #e0e0e0;
   }

div.prg-parcours-div {
   font-size: 90%;
   color: #c0c0c0;
   }

div.prg-parcours-item.off div.prg-parcours-div {
   color: #e0e0e0;
   }

div.prg-parcours-item.selected {
   background-color: var(--select-background-color);
   }

div.prg-parcours-item.selected div.prg-parcours-id {
   color: #666666;
   }

div.prg-parcours-item.selected div.prg-parcours-div {
   color: #fcfcfc;
   }

div.prg-parcours-intro {
   cursor: pointer;
   padding-left: 0.4em;
   padding-right: 0.4em;
   padding-top: 0.4em;
   padding-bottom: 0.4em;
   margin-top: auto;
   margin-bottom: auto;
   font-size: 70%;
   color: #c0c0c0;
   }

div.prg-parcours-intro span {
   color: #999999;
   }

div.prg-parcours-idea::before {
   cursor: pointer;
   font-family: "FontAwesome";
   font-size: 200%;
   vertical-align: -0.4em;
   margin-right: 0.2em;
   margin-left: 0.2em;
   color: #d8d8d8;
   content: "\F0EB";
   }

div.prg-parcours-info {
    padding-left: 0.4em;
    padding-right: 0.4em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 70%;
    color: #999999;
    }

div.prg-parcours.choice div.prg-parcours-info {
    color: #ffffff;
    }

div.prg-parcours-commands {
   margin-top: 0.4em; 
   }

body.prgMobileOn div.prg-parcours-commands {
   margin-top: 0.4em;
   }

div.prg-parcours-cmd {
   display: inline;
   padding-right: 1.2em;
   padding-top: 0.8em;
   font-size: 80%;
   white-space: nowrap;
   }

div.prg-parcours-cmd {
   position: relative;
   color: #d0d0d0;
   margin: auto;
   }

div.prg-parcours.choice div.prg-parcours-cmd {
    color: #c5dbf0;
    }

div.prg-parcours-cmd.on {
   color: #8199b1;
   cursor: pointer;
   }

div.prg-parcours.choice div.prg-parcours-cmd.on {
    color: #ffffff;
    }

div.prg-parcours-cmd::before {
   font-family: "FontAwesome";
   font-size: 168%;
   vertical-align: -0.18em;
   margin-right: 0.2em;
   color: #e0e0e0;
   }

/*
div.prg-parcours.left4 div.prg-parcours-cmd::before {
   position: absolute;
   margin-left: 0.15em;
   top: 0px;
   font-size: 320%;
   opacity: 0.2;
   }
*/

div.prg-parcours.choice div.prg-parcours-cmd::before {
    color: #c5dbf0;
    }

div.prg-parcours-cmd.on::before {
   color: var(--select-background-color);
   }

div.prg-parcours.choice div.prg-parcours-cmd.off {
    cursor: pointer !important;
    }

div.prg-parcours.choice div.prg-parcours-cmd.on::before {
    color: #ffffff;
    }

div.prg-parcours.choice div.prg-parcours-cmd.off::before {
    color: #c5dbf0;
    cursor: pointer !important;
    }

div.prg-parcours-cmd.prg-parcours-add2 {
   white-space: normal;
   position: relative;
   margin-left: 2em;
   display: inline-block;
   }

div.prg-parcours-cmd.prg-parcours-add2::before {
   left: -1.2em;
   top: 0.3em;
   position: absolute;
   }

div.prg-parcours-cmd.prg-parcours-add2.on::before {
   color: var(--select-background-color);
   }

div.prg-parcours-cmd.prg-parcours-choisir2.on::before {
   color: var(--select-background-color);
   }

div.prg-parcours-add::before, div.prg-parcours-add2::before {
   content: "\F0FE";
   }

div.prg-parcours-choisir::before, div.prg-parcours-choisir2::before {
   content: "\F013";
   }

   div.prg-parcours-cmd.prg-parcours-cours.on::before {
   content: "\F137";
   color: #8fc148;
   }

div.prg-parcours-construire::before {
   content: "\F013";
   }

div.prg-parcours-pdf::before {
   content: "\F02F";
   }

div.prg-parcours-envoyer::before {
   content: "\F003";
   }

div.prg-parcours-comparer::before {
   content: "\F074";
   }

div.prg-parcours-supprimer::before {
   content: "\F00D";
   }

div.prg-parcours-abandonner::before {
   content: "\F00D";
   }

div.prg-parcours-terminer::before {
   content: "\F14A";
   }

div.prg-parcours-terminer.on::before {
   color: #8fc148;
   }

div.prg-parcours-effacer::before {
   /*content: "\F12D";*/
   content: "\F0E2";
   }

div.prg-parcours.choice div.prg-parcours-terminer.on::before {
   color: #ffda00;
   }

div.prg-parcours-tout-supprimer::before {
   content: "\F014";
   }

/* *********************************************************************************
Cours en mode carte
********************************************************************************* */
div.prgViewCarte div.prg-courses {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: stretch;
   margin-top: var(--bloc-padding);
   }

div.prgViewCarte div.prg-courses:after {
   content: "";
   width: 32.2%;  
   }

div.prgViewCarte div.prg-course-item {
   position: relative;
   width: 32.2%;   
   margin-bottom: 20px;
   border: 1px solid #cccccc;
   border-radius: 4px;
   }

@media only screen and (max-width: 1048px)
   {
   div.prgViewCarte div.prg-course-item {
      width: 49.2%;   
      }
   }

@media only screen and (max-width: 700px)
   {
   div.prgViewCarte div.prg-course-item {
      width: 100%;   
      }
   }

div.prgViewCarte div.prg-bloc {
  padding-top: var(--bloc-padding);
  padding-bottom: var(--bloc-padding);
  margin-top: var(--bloc-padding);
  margin-bottom: calc(var(--bloc-padding) * 2);
  border-radius: 4px;
  }

div.prgViewCarte div.prg-bloc.blocLevel0 {
  padding-bottom: 0px;
  }

div.prgViewCarte div.prg-bloc.blocLevel0:last-child {
  margin-bottom: 0px;
  }

div.prgViewCarte div.prg-bloc.blocLevel0 {
   background-color: var(--background0-color);
   border: 1px dotted var(--border0-color);
   }

div.prgViewCarte div.prg-bloc.blocLevel1 {
   background-color: var(--background1-color);
   border: 1px dotted var(--border1-color);
   }

div.prgViewCarte div.prg-bloc.blocLevel2 {
   background-color: var(--background2-color);
   border: 1px dotted var(--border2-color);
   }

div.prgViewCarte div.prg-bloc.blocLevel3 {
   background-color: var(--background3-color);
   border: 1px dotted var(--border3-color);
   }

div.prgViewCarte div.prg-bloc.blocLevel4 {
   background-color: var(--background2-color);
   border: 1px dotted var(--border2-color);
   }

div.prgViewCarte div.prg-bloc.blocLevel5 {
   background-color: var(--background1-color);
   border: 1px dotted var(--border1-color);
   }

div.prgViewCarte div.prg-bloc.blocLevel6 {
   background-color: var(--background0-color);
   border: 1px dotted var(--border0-color);
   }

div.prgViewCarte div.prg-bloc.blocLevel7 {
   background-color: var(--background1-color);
   border: 1px dotted var(--border1-color);
   }

div.prgViewCarte div.prg-bloc.blocLevel8 {
   background-color: var(--background2-color);
   border: 1px dotted var(--border2-color);
   }

div.prgViewCarte div.prg-bloc.blocMargin0 {
   margin-left: 0px;
   margin-right: 0px; 
   }

div.prgViewCarte div.prg-bloc.blocMargin1 {
   margin-right: var(--bloc-padding);
   margin-left: var(--bloc-padding);
   }

div.prgViewCarte div.prg-bloc.blocPadding8 div.prg-content {
   --padding-factor: 8;
   }

div.prgViewCarte div.prg-bloc.blocPadding7 div.prg-content {
   --padding-factor: 7;
   }

div.prgViewCarte div.prg-bloc.blocPadding6 div.prg-content {
   --padding-factor: 6;
   }

div.prgViewCarte div.prg-bloc.blocPadding5 div.prg-content {
   --padding-factor: 5;
   }

div.prgViewCarte div.prg-bloc.blocPadding4 div.prg-content {
   --padding-factor: 4;
   }

div.prgViewCarte div.prg-bloc.blocPadding3 div.prg-content {
   --padding-factor: 3;
   }

div.prgViewCarte div.prg-bloc.blocPadding2 div.prg-content {
   --padding-factor: 2;
   }

div.prgViewCarte div.prg-bloc.blocPadding1 div.prg-content {
   --padding-factor: 1;
   }

div.prgViewCarte div.prg-bloc.blocPadding0 div.prg-content {
   --padding-factor: 0;
   }

div.prgViewCarte div.prg-content {
   padding-left: calc(var(--bloc-padding) * var(--padding-factor));
   padding-right: calc(var(--bloc-padding) * var(--padding-factor));
   }

div.prgViewCarte div.prg-alternative {
   position: relative;
   cursor: pointer;
   }

div.prgViewCarte div.prg-alternative::before {
   position: absolute;
   display: block;
   top: 6px;
   left: 0px;
   height: 6px;
   width: 0px;
   content: "\F0DA";
   font-family: "FontAwesome";
   font-size: 12px;
   }

div.prgViewCarte div.prg-alternative.alternative0::before {
   color: var(--rule0-color);
   }

div.prgViewCarte div.prg-alternative.alternative1::before {
   color: var(--rule1-color);
   }

div.prgViewCarte div.prg-alternative.alternative2::before {
   color: var(--rule2-color);
   }

div.prgViewCarte div.prg-alternative.alternative3::before {
   color: var(--rule3-color);
   }

div.prgViewCarte div.prg-alternative.alternative4::before {
   color: var(--rule4-color);
   }

div.prgViewCarte div.prg-alternative.alternative5::before {
   color: var(--rule5-color);
   }

div.prgViewCarte div.prg-alternative.alternative6::before {
   color: var(--rule6-color);
   }

div.prgViewCarte div.prg-alternative.alternative7::before {
   color: var(--rule7-color);
   }

div.prgViewCarte div.prg-alternative.prg-option.selected::before {
   font-size: 24px;
   }

div.prgViewCarte div.prg-alternative.prg-option.unselected::before {
  font-size: 24px;
  color: var(--choice-defined-unselected)
  }

div.prgViewCarte div.prg-alternative.prg-option.undefined.unselected::before {
  font-size: 24px;
  color: var(--choice-undefined-unselected);
  }

div.prgViewCarte div.prg-bloc.blocLevel0 div.prg-bloc-title {
   font-size: 120%;
   margin-bottom: 1.2em;
   color: #004d95;
   }

div.prgViewCarte div.prg-bloc.blocLevel1 div.prg-bloc-title {
   font-size: 120%;
   margin-bottom: 1.2em;
   color: #5885af;
   }

div.prgViewCarte div.prg-bloc.blocLevel2 div.prg-bloc-title {
   font-size: 110%;
   margin-bottom: 0.8em;
   color: #004d95;
   }

div.prgViewCarte div.prg-bloc.blocLevel3 div.prg-bloc-title {
   font-size: 110%;
   margin-bottom: 0.8em;
   color: #5885af;
   }

div.prgViewCarte div.prg-bloc.blocLevel4 div.prg-bloc-title {
   font-size: 100%;
   margin-bottom: 0.4em;
   color: #004d95;
   }

div.prgViewCarte div.prg-bloc.blocLevel5 div.prg-bloc-title {
   font-size: 100%;
   margin-bottom: 0.4em;
   color: #5885af;
   }

div.prgViewCarte div.prg-bloc.rule > div.prg-bloc-title {
   margin-bottom: 0.4em;
   }

div.prg-bloc-module {
   margin-bottom: 1em;
   color: #5885af; 
   font-size: 140%;
   font-weight: bold;
   }

div.prg-bloc-module.first {
   margin-top: 2em; 
   }

div.prg-bloc-module.last {
   margin-bottom: 2em; 
   }

div.prg-content.prg-text {
   margin-bottom: 1em; 
   color: #666666;
   }
   
div.prg-content.prg-description {
   margin-bottom: 2em; 
   }

div.prg-bloc-title span.sep::before {
   content: "\F138";
   font-family: "FontAwesome";
   font-weight: normal;
   font-size: 100%;
   vertical-align: 0em;
   color: var(--bullet-color1niv0);
   padding-left: 0.4em;
   padding-right: 0.2em;
   } 

div.prg-bloc-description {
   color: #999999;
   font-size: 90%;
   margin-bottom: 2em;
   }

div.prgViewCarte div.prg-bloc-rule {
   font-weight: bold;
   font-size: 80%;
   margin-bottom: 0.4em;
   }

div.prgViewCarte div.prg-bloc.rule {
  border-radius: 4px;
  padding-bottom: 0.6em;
  }

div.prgViewCarte div.prg-bloc.ruleLevel0 {
  border: 1px dotted var(--rule0-color);
  border-left: 2px solid var(--rule0-color);
  }

div.prgViewCarte div.prg-bloc.ruleLevel0 div.prg-bloc-rule {
  color: var(--rule0-color);
  }

div.prgViewCarte div.prg-bloc.ruleLevel1 {
  border: 1px dotted var(--rule1-color);
  border-left: 2px solid var(--rule1-color);
  }

div.prgViewCarte div.prg-bloc.ruleLevel1 div.prg-bloc-rule {
  color: var(--rule1-color);
  }

div.prgViewCarte div.prg-bloc.ruleLevel2 {
  border: 1px dotted var(--rule2-color);
  border-left: 2px solid var(--rule2-color);
  }

div.prgViewCarte div.prg-bloc.ruleLevel2 div.prg-bloc-rule {
  color: var(--rule2-color);
  }  

div.prgViewCarte div.prg-bloc.ruleLevel3 {
  border: 1px dotted var(--rule3-color);
  border-left: 2px solid var(--rule3-color);
  }

div.prgViewCarte div.prg-bloc.ruleLevel3 div.prg-bloc-rule {
  color: var(--rule3-color);
  }  

div.prgViewCarte div.prg-bloc.ruleLevel4 {
  border: 1px dotted var(--rule4-color);
  border-left: 2px solid var(--rule4-color);
  }

div.prgViewCarte div.prg-bloc.ruleLevel4 div.prg-bloc-rule {
  color: var(--rule4-color);
  }  

div.prgViewCarte div.prg-bloc.ruleLevel5 {
  border: 1px dotted var(--rule5-color);
  border-left: 2px solid var(--rule5-color);
  }

div.prgViewCarte div.prg-bloc.ruleLevel5 div.prg-bloc-rule {
  color: var(--rule5-color);
  }  

div.prgViewCarte div.prg-bloc.ruleLevel6 {
  border: 1px dotted var(--rule6-color);
  border-left: 2px solid var(--rule6-color);
  }

div.prgViewCarte div.prg-bloc.ruleLevel6 div.prg-bloc-rule {
  color: var(--rule6-color);
  }  

div.prgViewCarte div.prg-bloc.ruleLevel7 {
  border: 1px dotted var(--rule7-color);
  border-left: 2px solid var(--rule7-color);
  }

div.prgViewCarte div.prg-bloc.ruleLevel7 div.prg-bloc-rule {
  color: var(--rule7-color);
  }  

div.prgViewCarte div.prg-cours {
   position: relative;  
   background-color: #ffffff;
   border-radius: 4px;
   height: 100%;
   }   

div.prgViewCarte div.prg-cours.inactif {
   opacity: 0.8;
   }   

div.prgViewCarte div.prg-cours div.prg-coursIcon {
   display: none;
   position: absolute;
   top: 0.1em;
   right: 0.1em;
   font-family: "FontAwesome";
   font-size: 120%;
   opacity: 0.7;
   height: 3em;
   }

div.prgViewCarte div.prg-cours div.prg-coursIcon::before {
   content: "\F044";
   color: transparent;
   }

div.prgViewCarte div.prg-cours.mandatory div.prg-coursIcon {
   display: inline;
   }

div.prgViewCarte div.prg-cours.optional {
   cursor: pointer;
   }

div.prgViewCarte div.prg-cours.optional div.prg-coursIcon {
   display: inline;
   }

div.prgViewCarte div.prg-cours.selected div.prg-coursIcon::before {
   content: "\F046";
   color: var(--choice-selected);
   }

div.prgViewCarte div.prg-cours.undefined.unselected div.prg-coursIcon::before {
   content: "\F044";
   color: var(--choice-undefined-unselected);
   }

div.prgViewCarte div.prg-cours.defined.unselected.choiceNoMore div.prg-coursIcon::before {
   content: "\F00D";
   color: var(--choice-defined-unselected);
   }

div.prgViewCarte div.prg-cours.defined.unselected.choiceMore div.prg-coursIcon::before {
   color: #dab74c;
   }

div.prgViewCarte div.prg-cours.defined.unselected.choiceMore {
   opacity: 0.8;
   }
   
div.prgViewCarte div.prg-cours.defined.unselected.choiceNoMore {
   opacity: 0.3;
   background-color: transparent;
   }

div.prgViewCarte div.prg-coursLeft {
  font-size: 70%;
  color:#b0b0b0;
  padding: 0.3em; 
  border-bottom: 1px dashed #c0c0c0;
  }

div.prgViewCarte div.prg-coursRight {
  padding: 0.3em; 
  }

div.prgViewCarte div.prg-coursMnemonique { 
  position:relative; 
  display: inline-block; 
  }

div.prgViewCarte div.prg-coursLangue { 
  position:relative; 
  display: inline-block; 
  }

div.prgViewCarte div.prg-coursLangue:hover {
   cursor: pointer;
   color: #86b5ae;
   }
 
div.prgViewCarte div.prg-coursLangue.on {
   color: #5a7a75;
   font-weight: bold;
   }    

div.prgViewCarte div.prg-coursLangue span::before {
  content: "\2981";
  margin-right: 0.2em;
  color: #c8c8c8;
  vertical-align: -0.05em;
  }

div.prgViewCarte div.prg-coursLangue span { 
  display: inline-block;  
  }
 
/*
div.prgViewCarte div.prg-coursLangue div {
   display: none;
   background-color:#ffffff;
   border:1px solid #c0c0c0; 
   padding: 1em; 
   padding-bottom: 0.8em;
   left: -1em;
   position:absolute;
   top: 2em; 
   width: 320px;
   }
div.prgViewCarte div.prg-coursLangue:hover div {
  display: block;
  color: #007fd3;
  z-index: 100;
  }
*/

div.prgViewCarte div.prg-coursPrerequis {
  position:relative; 
  display: inline-block;   
  }

div.prgViewCarte div.prg-coursPrerequis span::before {
  content: "\2981";
  margin-right: 0.2em;
  color: #c8c8c8;
  vertical-align: -0.05em;
  }

div.prgViewCarte div.prg-coursPrerequis span::after {
   content: "\F071";
   margin-left: 0.1em;
   color: #9ecac3;
   vertical-align: -0.05em;
   font-weight: bolder;
   font-family: "FontAwesome";
   }
 
div.prgViewCarte div.prg-coursPrerequis span { 
  display: inline-block;  
  }

div.prgViewCarte div.prg-coursPrerequis:hover {
  cursor: pointer;
  color: #86b5ae;
  }

div.prgViewCarte div.prg-coursPrerequis.on {
  color: #5a7a75;
  font-weight: bold;
  }  

  div.prgViewCarte div.prg-coursPopupContainer {
  position:relative; 
  }

div.prgViewCarte div.prg-coursPopup {
  display: none; 
  width: 100%;
  }

div.prg-coursPrerequisits {
  margin: 0px;
  padding: 0px;
  }

div.prg-coursPrerequisits td.prerequisit.title {
   font-size: 70%;
   color: #5a7a75;
   font-weight: bold;
   padding-bottom: 0.4em;
   }

div.prg-coursPrerequisits td.prerequisit.mnemonic {
  font-size: 70%;
  color: #909090;
  text-align: left;
  padding-right: 0.4em;
  padding-bottom: 0.4em;
  white-space: nowrap;
  }

  div.prg-coursPrerequisits td.prerequisit.course {
   font-size: 70%;
   color: #74a9a6;
   text-align: left;
   margin-left: 1em;
   margin-bottom: 0.4em;
   }

div.prg-coursPrerequisits td.prerequisit span.credits {
   white-space: nowrap;
   color: #c0c0c0;
   }

div.prg-coursPrerequisits td.prerequisit span.credits::before {
  content: "\2981";
  margin-left: 0.18em;
  margin-right: 0.1em;
  color: #e0e0e0;
  vertical-align: -0.05em;
  }

div.prg-coursLang {
  margin: 0px;
  padding: 0px;
  }

div.prg-coursLang p {
  font-size: 70%;
  color: #b0b0b0;
  text-align: left;
  }

div.prgViewCarte span.prg-coursQuadrimestreCarte {  
  display: inline;
  }

div.prgViewCarte span.prg-coursQuadrimestreCarte::before {
  content: "\2981";
  margin-right: 0.2em;
  color: #c8c8c8;
  vertical-align: -0.05em;
  }

div.prg-cours  div.prg-coursIntitule > a {
  color: #007fd3;
  font-weight: 400;
  }

div.prg-cours.inactif div.prg-coursIntitule > a {
  color: #8eb3cc;
  }

div.prg-cours.optional div.prg-coursContainer div.prg-coursIntitule > a,
div.prg-cours.mandatory div.prg-coursContainer div.prg-coursIntitule > a {  
  pointer-events: none;
  }
  
div.prg-cours.optional div.prg-coursContainer div.prg-coursIntitule > a[target=_blank],
div.prg-cours.mandatory div.prg-coursContainer div.prg-coursIntitule > a[target=_blank] {  
  pointer-events: auto;
  }
    
div.prg-cours div.prg-coursContainer div.prg-coursIntitule > a.extLink {  
   display: none;
   }
 
div.prg-cours.optional div.prg-coursContainer:hover div.prg-coursIntitule > a.extLink,
div.prg-cours.mandatory div.prg-coursContainer:hover div.prg-coursIntitule > a.extLink {  
    pointer-events: auto;
    display: inline;
    }
  
div.prg-cours.optional div.prg-coursContainer:hover div.prg-coursIntitule > a.extLink::after,
div.prg-cours.mandatory div.prg-coursContainer:hover div.prg-coursIntitule > a.extLink::after {  
  pointer-events: auto;
  font-family: "FontAwesome";
  content: "\F045";
  font-size: 12px;
  display: inline-block;
  vertical-align: middle;
  text-align: right;
  font-weight: normal;
  padding-left: 0.3rem;
  color: #084e91;
  }

div.prgViewCarte div.prg-coursIntitule {
  font-size: 90%;
  }
 
div.prgViewCarte a > div.prg-coursIntitule {
  color: #007fd3;
  cursor: pointer;
  }

div.prgViewCarte div.prg-cours.inactif div.prg-coursIntitule {
   color: #a9cedd; 
   }

div.prgViewCarte div.prg-coursTitulaires {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  font-size: 70%;
  }

div.prgViewCarte div.prg-cours.inactif div.prg-coursTitulaires {
  color: #b0b0b0; 
  }

div.prgViewCarte div.prg-coursCredits {
  font-size: 65%;
  color: #b0b0b0; 
  }

div.prgViewCarte span.prg-coursQuadrimestreListe {
  display: none;
  }

div.prgViewCarte div.prg-coursRemarque {
  font-size: 70%;
  color: #999999;
  }  

div.prgViewCarte div.prg-coursRemarque p {
  margin-top: 0.4em;
  margin-bottom: 0em;
  }

div.prgViewCarte div.prg-coursInfo {
   font-size: 70%;
   margin-top: 0.5em;
   border-top-style: dashed;
   border-top-width: 1px;
   border-top-color: #333333; 
   font-weight: bold;
   padding-top: 0.2em;
   color: #5e8d86;
   }  

div.prgViewCarte div.prg-choice-options div.prg-cours.inactif {
      opacity: 0.5;
      background-color: transparent;
      }   
  
div.prg-prerequisit {
   display: table;
   width: 100%;
   font-size: 94%;
   }
     
div.prg-prerequisitTitle {
   font-size: 110%;
   margin-bottom: 0.8em;
   color: #5e8d86;
   }
   
div.prg-prerequisitContent {
   display: table-row;
   }
       
div.prg-prerequisitLeft {
   display: table-cell;
   width: 14%;
   padding-right: 0.6em;
   }  
       
div.prg-prerequisitRight {
   display: table-cell;
   }    
       
div.prg-prerequisitMnemonique { 
   display: block; 
   font-size: 80%;
   color: #c0c0c0;
   white-space: nowrap;
   }
       
div.prg-prerequisitIntitule {
   color: #86b5ae;
   }
        
div.prg-prerequisitText {
   margin-top: 0.3em;
   margin-bottom: 0.3em;
   font-size: 70%;
   }
        
span.prg-prerequisitCredits, div.prg-prerequisitCredits {
   font-size: 70%;
   color: #c0c0c0; 
   }
            
/* *********************************************************************************
Cours en mode liste
********************************************************************************* */
div.prgViewListe div.prg-cours {
  display: table;
  position: relative;  
  margin-top: 0.6em;
  margin-right: 1em;
  width: 100%;
  }

div.prgViewListe div.prg-cours div.prg-coursIcon {
   display: none;
   position: absolute;
   top: 0.1em;
   right: 0.1em;
   font-family: "FontAwesome";
   font-size: 120%;
   opacity: 0.7;
   height: 3em;
   }

div.prgViewListe div.prg-cours div.prg-coursIcon::before {
   content: "\F044";
   color: transparent;
   }

div.prgViewListe div.prg-cours.mandatory div.prg-coursIcon {
   display: inline;
   }

div.prgViewListe div.prg-cours.optional {
   cursor: pointer;
   }

div.prgViewListe div.prg-cours.optional div.prg-coursIcon {
   display: inline;
   }

div.prgViewListe div.prg-cours.selected div.prg-coursIcon::before {
   content: "\F046";
   color: var(--choice-selected);
   }

div.prgViewListe div.prg-cours.undefined.unselected div.prg-coursIcon::before {
   content: "\F044";
   color: var(--choice-undefined-unselected);
   }

div.prgViewListe div.prg-cours.defined.unselected.choiceNoMore div.prg-coursIcon::before {
   content: "\F00D";
   color: var(--choice-defined-unselected);
   }

div.prgViewListe div.prg-cours.defined.unselected.choiceMore div.prg-coursIcon::before {
   color: #dab74c;
   }

div.prgViewListe div.prg-cours.defined.unselected.choiceMore {
   opacity: 0.8;
   }

div.prgViewListe div.prg-cours.defined.unselected.choiceNoMore {
   opacity: 0.3;
   background-color: transparent;
   }
   
div.prgViewListe div.prg-bloc {
  margin-top: var(--bloc-padding);
  margin-bottom: calc(var(--bloc-padding) * 2);
  border-radius: 4px;
  }

div.prgViewListe div.prg-alternative {
   position: relative;
   cursor: pointer;
   }

div.prgViewListe div.prg-alternative::before {
   position: absolute;
   display: block;
   top: 6px;
   left: 0px;
   height: 6px;
   width: 0px;
   content: "\F0DA";
   font-family: "FontAwesome";
   font-size: 12px;
   }

div.prgViewListe div.prg-alternative.alternative0::before {
   color: var(--rule0-color);
   }

div.prgViewListe div.prg-alternative.alternative1::before {
   color: var(--rule1-color);
   }

div.prgViewListe div.prg-alternative.alternative2::before {
   color: var(--rule2-color);
   }

div.prgViewListe div.prg-alternative.alternative3::before {
   color: var(--rule3-color);
   }

div.prgViewListe div.prg-alternative.alternative4::before {
   color: var(--rule4-color);
   }

div.prgViewListe div.prg-alternative.alternative5::before {
   color: var(--rule5-color);
   }

div.prgViewListe div.prg-alternative.alternative6::before {
   color: var(--rule6-color);
   }

div.prgViewListe div.prg-alternative.alternative7::before {
   color: var(--rule7-color);
   }

div.prgViewListe div.prg-alternative.prg-option.selected::before {
   font-size: 24px;
   }

div.prgViewListe div.prg-alternative.prg-option.unselected::before {
  font-size: 24px;
  color: var(--choice-defined-unselected)
  }

div.prgViewListe div.prg-alternative.prg-option.undefined.unselected::before {
  font-size: 24px;
  color: var(--choice-undefined-unselected);
  }

div.prgViewListe div.prg-bloc.ruleMargin0 {
   margin-left: 0px; 
   }

div.prgViewListe div.prg-bloc.ruleMargin1 {
   margin-left: var(--bloc-padding);
   }

div.prgViewListe div.prg-bloc.rulePadding7 div.prg-content {
   padding-left: calc(var(--bloc-padding) * 7);
   }

div.prgViewListe div.prg-bloc.rulePadding6 div.prg-content {
   padding-left: calc(var(--bloc-padding) * 6);
   }

div.prgViewListe div.prg-bloc.rulePadding5 div.prg-content {
   padding-left: calc(var(--bloc-padding) * 5);
   }

div.prgViewListe div.prg-bloc.rulePadding4 div.prg-content {
   padding-left: calc(var(--bloc-padding) * 4);
   }

div.prgViewListe div.prg-bloc.rulePadding3 div.prg-content {
   padding-left: calc(var(--bloc-padding) * 3);
   }

div.prgViewListe div.prg-bloc.rulePadding2 div.prg-content {
   padding-left: calc(var(--bloc-padding) * 2);
   }

div.prgViewListe div.prg-bloc.rulePadding1 div.prg-content {
   padding-left: calc(var(--bloc-padding) * 1);
   }

div.prgViewListe div.prg-bloc.rulePadding0 div.prg-content {
   padding-left: calc(var(--bloc-padding) * 0);
   }

div.prgViewListe div.prg-bloc.blocLevel0 div.prg-bloc-title {
   font-size: 120%;
   margin-bottom: 1.2em;
   color: #004d95;
   }

div.prgViewListe div.prg-bloc.blocLevel1 div.prg-bloc-title {
   font-size: 120%;
   margin-bottom: 1.2em;
   color: #5885af;
   }

div.prgViewListe div.prg-bloc.blocLevel2 div.prg-bloc-title {
   font-size: 110%;
   margin-bottom: 0.8em;
   color: #004d95;
   }

div.prgViewListe div.prg-bloc.blocLevel3 div.prg-bloc-title {
   font-size: 110%;
   margin-bottom: 0.8em;
   color: #5885af;
   }

div.prgViewListe div.prg-bloc.blocLevel4 div.prg-bloc-title {
   font-size: 100%;
   margin-bottom: 0.4em;
   color: #004d95;
   }

div.prgViewListe div.prg-bloc.blocLevel5 div.prg-bloc-title {
   font-size: 100%;
   margin-bottom: 0.4em;
   color: #5885af;
   }

div.prgViewListe div.prg-bloc.rule > div.prg-bloc-title {
   margin-bottom: 0.4em;
   }

div.prgViewListe div.prg-bloc-rule {
   font-weight: bold;
   margin-bottom: 0.4em;
   }

div.prgViewListe div.prg-bloc.rule {
  border-radius: 12px;
  padding-bottom: 0.6em;
  }


div.prg-rule.choiceNotDone > div.prg-bloc > div.prg-bloc-rule::before { 
  display: inline-block;
  width: 1.2em;
  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 140%;
  content: "\F0A4"; 
  color: var(--choice-undefined-unselected);
  opacity: 0.7;
  padding-right: 0.4em;
  }

div.prg-rule.choiceDone > div.prg-bloc > div.prg-bloc-rule::before { 
  display: inline-block;
  width: 1.2em;
  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 140%;
  content: "\F087"; 
  color: var(--choice-selected);
  opacity: 0.7;
  padding-right: 0.4em;
  }

div.prg-rule.defined.unselected > div.prg-bloc > div.prg-bloc-rule::before { 
  display: inline-block;
  width: 1.2em;
  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 140%;
  content: "\F00D"; 
  color: var(--choice-defined-unselected);
  opacity: 0.7;
  padding-right: 0.4em;
  }


div.prg-choice.choiceNotDone > div.prg-bloc > div.prg-bloc-rule::before { 
  display: inline-block;
  width: 1.2em;
  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 140%;
  content: "\F0A4"; 
  color: var(--choice-undefined-unselected);
  opacity: 0.7;
  padding-right: 0.4em;
  }

div.prg-choice.choiceDone > div.prg-bloc > div.prg-bloc-rule::before { 
  display: inline-block;
  width: 1.2em;
  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 140%;
  content: "\F087"; 
  color: var(--choice-selected);
  opacity: 0.7;
  padding-right: 0.4em;
  }

div.prg-choice.defined.unselected > div.prg-bloc > div.prg-bloc-rule::before { 
  display: inline-block;
  width: 1.2em;
  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 140%;
  content: "\F00D"; 
  color: var(--choice-defined-unselected);
  opacity: 0.7;
  padding-right: 0.4em;
  }

div.prg-module.choiceNotDone > div.prg-bloc > div.prg-bloc-rule::before { 
  display: inline-block;
  width: 1.2em;
  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 140%;
  content: "\F0A4"; 
  color: var(--choice-undefined-unselected);
  opacity: 0.7;
  padding-right: 0.4em;
  }

div.prg-module.choiceDone > div.prg-bloc > div.prg-bloc-rule::before { 
  display: inline-block;
  width: 1.2em;
  font-family: "FontAwesome";
  font-weight: normal;
  font-size: 140%;
  content: "\F087"; 
  color: var(--choice-selected);
  opacity: 0.7;
  padding-right: 0.4em;
  }

div.prgViewListe div.prg-bloc.ruleLevel0 {
  border-left: 2px solid var(--rule0-color);
  }

div.prgViewListe div.prg-bloc.ruleLevel0 div.prg-bloc-rule {
  color:  var(--rule0-color);
  }

div.prgViewListe div.prg-bloc.ruleLevel1 {
  border-left: 2px solid var(--rule1-color);
  }

div.prgViewListe div.prg-bloc.ruleLevel1 div.prg-bloc-rule {
  color: var(--rule1-color);
  }

div.prgViewListe div.prg-bloc.ruleLevel2 {
  border-left: 2px solid var(--rule2-color);
  }

div.prgViewListe div.prg-bloc.ruleLevel2 div.prg-bloc-rule {
  color: var(--rule2-color);
  }  

div.prgViewListe div.prg-bloc.ruleLevel3 {
  border-left: 2px solid var(--rule3-color);
  }

div.prgViewListe div.prg-bloc.ruleLevel3 div.prg-bloc-rule {
  color: var(--rule3-color);
  }  

div.prgViewListe div.prg-bloc.ruleLevel4 {
  border-left: 2px solid var(--rule4-color);
  }

div.prgViewListe div.prg-bloc.ruleLevel4 div.prg-bloc-rule {
  color: var(--rule4-color);
  }  

div.prgViewListe div.prg-bloc.ruleLevel5 {
  border-left: 2px solid var(--rule5-color);
  }

div.prgViewListe div.prg-bloc.ruleLevel5 div.prg-bloc-rule {
  color: var(--rule5-color);
  }  

div.prgViewListe div.prg-bloc.ruleLevel6 {
  border-left: 2px solid var(--rule6-color);
  }

div.prgViewListe div.prg-bloc.ruleLevel6 div.prg-bloc-rule {
  color: var(--rule6-color);
  }  

div.prgViewListe div.prg-bloc.ruleLevel7 {
  border-left: 2px solid var(--rule7-color);
  }

div.prgViewListe div.prg-bloc.ruleLevel7 div.prg-bloc-rule {
  color: var(--rule7-color);
  }    

div.prgViewListe div.prg-coursContent {
  display: table-row;
  }

div.prgViewListe div.prg-coursLeft {
  display: table-cell;
  width: 14%;
  padding-right: 0.6em;
  }  

div.prgViewListe div.prg-coursRight {
  display: table-cell;
  padding-bottom: 1em;
  }    

div.prgViewListe div.prg-coursMnemonique { 
  display: block; 
  font-size: 80%;
  color: #c0c0c0;
  white-space: nowrap;
  }

div.prgViewListe div.prg-coursLangue { 
  position:relative; 
  display: inline-block; 
  background-color:#e8e8e8; 
  color:#a0a0a0; 
  font-size:70%;
  padding-top: 0em; 
  padding-bottom: 0.1em; 
  padding-left: 0.3em; 
  padding-right: 0.24em; 
  border-radius: 6px;  
  z-index: 0;
  }

div.prgViewListe div.prg-coursLangue:hover {
  cursor: pointer;
  color: #007fd3;
  }

div.prgViewListe div.prg-coursLangue span { 
  display: inline-block;  
  }
 
div.prgViewListe div.prg-coursLangue div {
   display: none;
   background-color:#ffffff;
   border:1px solid #c0c0c0; 
   padding: 1em; 
   padding-bottom: 0.8em;
   left: -1em;
   position:absolute;
   top: 2em; 
   width: 320px;
   }

div.prgViewListe div.prg-coursLangue:hover {
   cursor: pointer;
   color: #86b5ae;
   }
    
div.prgViewListe div.prg-coursLangue.on {
   background-color:#e8e8e8; 
   color: #5a7a75;
   font-weight: bold;
   }  
       
div.prgViewListe div.prg-coursLangue:hover div {
  display: block;
  z-index: 100;
  }

div.prgViewListe div.prg-coursPrerequis {
  position:relative; 
  display: inline-block;
  color:#a0a0a0; 
  font-size:70%; 
  padding-top: 0em; 
  padding-bottom: 0.1em; 
  padding-left: 0.2em; 
  padding-right: 0.2em; 
  border-radius: 6px;  
  z-index: 0;  
  white-space: nowrap;
  }

div.prgViewListe div.prg-coursPrerequis span {
  z-index: 0;
  }

div.prgViewListe div.prg-coursPrerequis span::after {
   content: "\F071";
   margin-left: 0.1em;
   color: #9ecac3;
   vertical-align: -0.05em;
   font-weight: bolder;
   font-family: "FontAwesome";
   }

div.prgViewListe div.prg-coursPrerequis:hover {
  cursor: pointer;
  color: #86b5ae;
  }

div.prgViewListe div.prg-coursPrerequis.on {
   color: #5a7a75;
   font-weight: bold;
   }  

div.prgViewListe div.prg-coursPrerequis div {
   display: none;
   font-size:70%; 
   background-color:#ffffff;
   border:1px solid #c0c0c0; 
   padding: 1em; 
   padding-bottom: 0.8em;
   left: -2.8em;
   position:absolute;
   top: 2em; 
   width: 660px;
   }

div.prgViewListe div.prg-coursPrerequis:hover div {
  display: block;
  z-index: 100;
  }

div.prgViewListe span.prg-coursQuadrimestreCarte {  
  display: none;
  }

div.prgViewListe div.prg-coursIntitule {
  color: #007fd3;
  cursor: pointer;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #f0f0f0;
  }

div.prgViewListe div.prg-cours.inactif div.prg-coursIntitule {
   color: #a9cedd; 
   }

div.prgViewListe div.prg-coursTitulaires {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  font-size: 70%;
  }

div.prgViewListe div.prg-cours.inactif div.prg-coursTitulaires {
   color: #b0b0b0; 
   }

div.prgViewListe div.prg-coursCredits {
  font-size: 70%;
  color: #c0c0c0; 
  }

div.prgViewListe span.prg-coursQuadrimestreListe {
  display: inline;
  }

div.prgViewListe div.prg-coursRemarque {
  font-size: 70%;
  }  

div.prgViewListe div.prg-coursRemarque p {
   margin-top: 0.4em;
   margin-bottom: 0em;
   }

div.prgViewListe div.prg-coursInfo {
   position: relative;
   font-size: 70%;
   margin-top: 0.5em;
   border-top-style: solid;
   border-top-width: 1px;
   border-top-color: transparent; 
   font-weight: bold;
   padding-top: 0.2em;
   }  

div.prgViewListe div.prg-coursInfo::before {
   position: absolute;
   border-top-style: dashed;
   border-top-width: 1px;
   border-top-color: #333333; 
   top: 0px;
   left: 0px;
   width: 36%;
   content: " ";
   }
   
div.prgViewListe div.prg-choice-options div.prg-cours.inactif {
   opacity: 0.3;
   background-color: transparent;
   }  

/* *********************************************************************************
Liste déroulante pour la sélection d'une mineure/option
********************************************************************************* */
span.prg-select-option-id {
   margin-left: 1em;
   font-size: 70%;
   color: #999999;
   }

span.prg-select-option-id:before {
   content: "(";
   }

span.prg-select-option-id:after {
   content: ")";
   }

div.prg-select-option-choice1 {
   margin-top: 1em;
   display: table;
   width: 0%;
   margin-bottom: 2em;
   }

div.prg-select-option-choice2 {
   display: table-row;
   }   

.formation.prgMobileOn div.prg-select-option-choice2 {
   display: block;
   }  

div.prg-select-option-choice-nav {
   display: table-cell;
   position: relative;
   cursor: pointer;
   font-size: 80%;
   color: #e0e0e0;
   padding-right: 1em;
   word-break: keep-all;
   }

div.prg-select-option-choice-nav.on {
   color: #999999;
   }

div.prg-select-option-choice-sel {
   display: table-cell;
   padding-right: 1em;   
   }

div.prg-select-option-choice-sel {
   display: block;
   }

div.prg-select-option-choice-sel select {
   border-style: solid;
   border-width: 1px;
   border-color: #cccccc; 
   min-width: 400px;
   color: #999999;
   }  

.formation.prgMobileOn div.prg-select-option-choice-sel select {
   min-width: auto;
   }

div.prg-select-option-choice-sel select option {
   padding: 6px;
   font-size: 0.8em;
   letter-spacing: 0px;
   }

div.prg-select-option-choice-sel select option.default {
   color: #cccccc;
   font-style: italic;
   }   

/* *********************************************************************************
Tableau des détails techniques
********************************************************************************* */
div.prg-details-content {
   padding-bottom: 8em;
   }

table.prg-details {
   width: 100%;
   border-collapse: collapse;
   }

table.prg-details td {
   padding: 0.4em;
   border: 1px solid var(--table-border-color); 
  }

table.prg-details td.label {
   width: 20%;
   white-space: nowrap;
   padding: 0.4em;
   background-color: #f2f6f9;
   font-size: 100%;
   } 

.prgMobileOn table.prg-details td, .prgMobileOn table.prg-details td.label {
   font-size: 90%;
   }

table.prg-details td span.prgLowMark {
   font-style: italic;
   color: #a0a0a0;
   font-size: 80%;
   }

table.prg-details td.spacer {
    border-left-style: none;
    border-right-style: none;
    height: 18px;
   }     

table.prg-details td.spacer2 {
    border-left-style: none;
    border-right-style: none;
    padding-top: 2em;
    font-weight: 600;
    font-size: 120%;
   }     

/* *********************************************************************************
Graphiques de répartition des cours par domaines/par langues
********************************************************************************* */
div.prg-graphs {
   position: relative;
   overflow: auto;
   }

div.prg-graphs-toc {
   float: left;
   width: 38%;
   }

.formation.prgMobileOn div.prg-graphs-toc {
   float: none;
   width: 100%;
   }

div.prg-graphs-disclaimer
   {
   margin-bottom: 2em;  
   }

.formation.prgMobileOn div.prg-graphs-disclaimer {
   margin-bottom: 0em;  
   }

div.prg-graphs-main {
   float: right;
   width: 60%;
   }

.formation.prgMobileOn div.prg-graphs-main {
   float: none;
   width: 100%;
   }

div.prg-graphs-error {
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
    border-style: solid;
    border-width: 2px;
    border-color: #E97232;
    background-color: #FDF4F4;
    }
    
div.prg-graphs-data {
   float: left;
   width: 38%;
   }

.formation.prgMobileOn div.prg-graphs-data {
   float: none;
   width: 100%;
   }

div.prg-graphs-title {
   font-size: 80%;
   font-weight: bold;
   }

div.prg-graphs-text {
   font-size: 70%;
   font-weight: normal;
   margin-bottom: 0.6em;
   margin-left: 1em;
   }


div.prg-graphs-disclaimer > p
   {
   font-size: 70%;
   font-weight: normal;
   margin-top: 2em;
   color: #c0c0c0;
   margin-bottom: 0.6em;
   }

div.prg-graphs-text::before {
   content: "\F054";
   vertical-align: -0.1em;
   font-family: "FontAwesome";
   font-weight: normal;
   color: var(--bullet-color1niv0);
   margin-left: -1em;
   }

div.prg-graphs-line {
   font-size: 70%;
   font-weight: normal;
   margin-bottom: 0.6em;
   }

div.prg-graphs-title {
   margin-bottom: 0.8em;
   }

div.prg-graphs-title span.sep::before {
   content: "\F138";
   font-family: "FontAwesome";
   font-weight: normal;
   font-size: 100%;
   vertical-align: 0em;
   color: var(--bullet-color1niv0);
   padding-left: 0.4em;
   padding-right: 0.2em;
   }     

div.prg-graphs-list {
   margin-bottom: 12em;
   clear: both;
   }

/* ===============================================================================
** popup for menus
** ============================================================================ */ 
div#popup {
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   z-index: 1000;
   }

div#popupMask {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-color: #000000;
   opacity: 0.8;
   }

div#popupDiv {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   }

div#popupMenu {
   background-color: #ffffff;
   font-size: 80%;
   }

div#popupClose {
   float:right; 
   cursor:pointer;
   background-color: #666666;
   width: 32px;
   height: 32px;
   }

div#popupClose::before {
   font-family: "FontAwesome";
   font-size: 144%;
   content: "\F00D";
   color: #ffffff;
   padding-top: 5px;
   padding-left: 8px;
   display: inline-block;
   }

div#popupMenu input {
   padding: 0.3em;
   border-style: solid;
   border-width: 1px;
   border-color: #c0c0c0;
   width: 96%;
   margin-top: 1em;
   margin-bottom: 1em;
   font-size: 110%;
   color: #666666; 
   }

div#popupCmd {
   }

div.popupLink::before {
   content: "\F054";
   color: #cccccc;
   font-family: FontAwesome;
   padding-right: 0.4em;
   }

div.popupLink {
   margin-bottom: 0.4em;
   }

div#popupCmd span {
   cursor: pointer;
   margin-right: 1.2em;
   color: #007fd3;
   }

div#popupCmd span:hover {
   color: #006fc3;
   text-decoration: underline;
   }   

/* *********************************************************************************
Tableau des comparaison
********************************************************************************* */
div.prg-compare-content {
   padding-bottom: 8em;
   margin-top: 3em;
   }

table.comparatorTable {
   width: 100%;
   border-collapse: collapse;
   }

table.comparatorTable td {
   padding: 0.4em;
   border: 1px solid var(--table-border-color); 
   font-size: 90%;
   vertical-align: top;
   }

body.prgMobileOn table.comparatorTable td {
   padding: 0.2em;
   font-size: 80%;
   }

table.comparatorTable td.separator {
   border-left: 0px none transparent;
   border-right: 0px none transparent;
   height: 32px;
   }

table.comparatorTable td.title {
   background-color: var(--table-background-color1niv0);
   font-weight: 800;
   }

table.comparatorTable td.title span.separator::before {
    content: "\F138";
    font-family: "FontAwesome";
    font-weight: normal;
    font-size: 100%;
    vertical-align: 0em;
    color: var(--bullet-color1niv0);
    padding-left: 0.4em;
    padding-right: 0.2em;
    }

table.comparatorTable td.label {
   white-space: nowrap;
   background-color: var(--table-background-color1niv1);
   } 

body.prgMobileOn table.comparatorTable td.label {
   white-space: normal;
   }

table.comparatorTable td.course {
   border-top: 0px none transparent;  
   border-bottom: 0px none transparent;  
   border-left: 0px none transparent;
   border-right: 0px none transparent;
   font-size: 1.2em;
   }

table.comparatorTable td.course:last-child {
   border-right: 1px solid var(--table-border-color); 
   }

table.comparatorTable td.course.last {
   border-top: 0px none transparent;  
   border-bottom: 1px solid var(--table-border-color); 
   }


table.comparatorTable td.course.firstDiff {
   border-top: 1px solid var(--table-border-color); 
   }


table.comparatorTable td.label2 {
   white-space: nowrap;
   padding: 0.4em;
   background-color: var(--table-background-color1niv2);
   padding-left: 1em;
   font-style: italic;
   } 


table.comparatorTable td.spacer {
   border-left-style: none;
   border-right-style: none;
   height: 18px;
   }     

table.comparatorTable td.spacer2 {
   border-left-style: none;
   border-right-style: none;
   padding-top: 2em;
   font-weight: 600;
   font-size: 120%;
   }        

table.comparatorTable td.same0 {
   background-color: var(--table-background-color2niv0);
   background-clip: padding-box;
   }

table.comparatorTable td.same1 {
   background-color: var(--table-background-color2niv1);
   background-clip: padding-box;
   }

table.comparatorTable td.same2 {
   background-color: var(--table-background-color2niv2);
   background-clip: padding-box;
   }

table.comparatorTable td.same3 {
   background-color: var(--table-background-color2niv3);
   background-clip: padding-box;
   }
         
table.comparatorTable td.same4 {
   background-color: var(--table-background-color2niv4);
   background-clip: padding-box;
   }

table.comparatorTable td.firstTogether {
   position: relative;
   background-position: right 46px;
   background-repeat: no-repeat;
   background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 32 3" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="3" fill="rgb(217,223,247)"/></svg>');
   background-size: 32px 3px;
   }

table.comparatorTable td.firstTogether::after {
    font-family: "FontAwesome";
    font-size: 11px;
    content: "\F0C8";
    color: var(--table-border-color);
    position: absolute;
    right: -20px;
    top: 40px;
    width: 32px;
    height: 32px;
    display: inline-block;
   }

table.comparatorTable td.lastTogether {
   position: relative;
   background-position: left 46px;
   background-repeat: no-repeat;
   background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 32 3" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="3" fill="rgb(217,223,247)"/></svg>');
   background-size: 32px 3px;
   }

table.comparatorTable td.lastTogether::before {
   font-family: "FontAwesome";
   font-size: 11px;
   content: "\F0C8";
   color: var(--table-border-color);
   position: absolute;
   left: 3px;
   top: 40px;
   width: 32px;
   height: 32px;
   display: inline-block;
   }

table.comparatorTable td.middleTogether {
   position: relative;
   background-position: 0px 46px;
   background-repeat: repeat-x;
   background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="3" height="3" fill="rgb(217,223,247)"/></svg>');
   background-size: 3px 3px;
   }

table.comparatorTable td.middleTogether::before {
   font-family: "FontAwesome";
   font-size: 11px;
   content: "\F0C8";
   color: var(--table-border-color);
   position: absolute;
   left: 3px;
   top: 42px;
   width: 32px;
   height: 32px;
   display: inline-block;
   }

table.comparatorTable td.middleTogether::after {
    font-family: "FontAwesome";
    font-size: 11px;
    content: "\F0C8";
    color: var(--table-border-color);
    position: absolute;
    right: -19px;
    top: 42px;
    width: 32px;
    height: 32px;
    display: inline-block;
   }

table.comparatorTable td.emptyTogether {
   background-position: 0px 46px;
   background-repeat: repeat-x;
   background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="3" height="3" fill="rgb(217,223,247)"/></svg>');
   background-size: 3px 3px;
   }

 div.cmpr-course {
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 0.3em;
    background-color: #ffffff;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
    }  

div.cmpr-course-mnemonic {   
   font-size: 80%;
   color: #b0b0b0;
   padding: 0.3em;
   border-bottom: 1px dashed #c0c0c0;   
   }

div.cmpr-course-mnemonic span.sep::before {
    content: "\2981";
    margin-left: 0.2em;
    margin-right: 0.2em;
    color: #b0b0b0;
    vertical-align: -0.05em;
    }   

div.cmpr-course-title {   
   font-size: 90%;
   color: #007fd3;
   cursor: pointer;
   padding-top: 0.1em;
   padding-bottom: 0.1em;
   }   

div.cmpr-course-lecturers {   
   font-size: 70%;
   padding-bottom: 0.1em;
   }      

div.cmpr-course-activities {   
   font-size: 70%;
   color: #b0b0b0;
   }     

table.prgTableList {
   width: 100%;
   font-size: 100%;
   }   

table.prgTableList tr td {
   background-color: #ffffff;
   padding: 0px;
   border-style: none;
   border-width: 0px;
   }   

table.prgTableList tr td.prgTableListMnemonic {
   padding-right: 1em;
   white-space: nowrap;
   width: 0%;
   }

table.prgTableList tr td.prgTableListTitle {
   padding-top: 1em;
   width: 100%;
   }

table.prgTableList tr:first-child td.prgTableListTitle {
   padding-top: 0em;
   }

table.prgTableList tr td.prgTableListTitle h3 {
   color: #6e98be;
   font-size: 1.1em;
   font-weight: 600;
   margin-bottom: 0.4em;
   }      

table.prgTableList tr td.prgTableListIntitule {
   width: 100%;
   }  

table.prgTableList tr td.prgTableListCredits {
   color: #a0a0a0;
   font-size: 80%;
   padding-bottom: 1em;
   width: 100%;
   white-space: normal;
   }   

table.prgTableList tr td span.prgTableListProgrammes {
  font-weight: 200;
  font-style: italic;
  font-size: 90%; 
  }

span.prgTableListProgrammes span.prgTableListProgramme {
   font-style: normal;
   font-weight: bold;
   }

span.prgTableListProgrammes span.prgTableListFinalite {
   font-weight: 400;
   }
   
.prgSessions {
    }

.prgSessions .prgSession {
    margin-top: 1em;
    }

.prgSessions .prgSession.posFirst {
    margin-top: 0em;
    }

.prgSessions .prgSession:first-of-type {
    margin-top: 0em;
    }

.prgSessionSession {
    font-weight: 800;
    font-size: 1.1em;
    color: #003361; 
    margin-top: 3em;
    margin-bottom: 1em;
    }

.prgSessionSession:first-child {
    margin-top: 1em; 
    }

.prgSessionTitle {
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    border: 1px solid #dddddd;
    margin-bottom: 0em; 
    color: #084e91;
    text-decoration: none;
    padding-left: 0.8em;
    position: relative;
    font-size: 1.2em;
    letter-spacing: 0.04em;
    font-weight: 500;
    cursor: pointer;
    }


.prgSessionTitle::after {
    font-family: "FontAwesome";
    content: "\F068";
    font-size: 1.4em;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 1rem;
    top: 0.3em;
    }

    
.prgSessionTitle.prgSessionOff::after {
    content: "\F067";
    }

.prgSessionContent {
    display: block;
    margin-bottom: 3em;
    }

.prgSessionContent.prgSessionOff {
    display: none; 
    }

.prgSessionInscription {
    margin-top: 0em;
    font-size: 1.1em;
    float: right;
    margin-left: 1em;
    cursor: pointer;
    }

.prgSessionInscription::before {
   content: "\F138";
   position: relative;
   color: #9EC0E1;
   font-family: "FontAwesome";
   font-size: 1.8em;
   vertical-align: -0.2em;
   margin-right: 0.2em;
   }

.prgSessionData {
    margin-top: 1.4em;
    }

.prgSessionInscription + .prgSessionData {
   padding-top: 2em;
   }

.prgSessionDataContent p {
   margin-bottom: 0.6em;
   }

.prgSessionDataContentPlan {
   margin-top: 0.6em;
   }

.prgSessionDataContentPlan::before {
   font-family: "FontAwesome";
   content: "\F061";
   color: #cccccc;
   margin-right: 0.2em;
   }

.prgSessionData:first-of-type {
    margin-top: 0em;
    }

.prgSessionDataTitle {
    color: #6e98be;
    font-size: 1.1em;
    font-weight: 600;
    }    

    .caMainContent {
      border-top: 2px dotted #cccccc;
      padding-bottom: 1em;
      position: relative;
      padding-top: 1.4em;
      padding-left: 1.6em;
      position: relative;
      }   
   
   .caMainContent:first-of-type {
      border-top-style: none;
      padding-top: 1.4em !important;
      }
   
   .caMainContent .caMainContentHeader {
      cursor: pointer;
      padding-bottom: 0.6em;
      }
   
   .caMainContent .caMainContentHeader::before {
      position: absolute;
      left: 0em;
      top: 1em;
      font-size: 1.2em;
      color: #D0D9E2;
      font-family: "FontAwesome";
      content: "\F146";
      display: inline-block;  
      }
   
   .caMainContent.off .caMainContentHeader::before {   
       content: "\F0FE";   
       color: #084e91;
      }
   
   .caMainContentContent {
      display: block;
      padding-bottom: 3em;
      }
    
   .caMainContentContent.off {
      display: none;
      }
   
   .caMainContentId {
      position: absolute;
      top: 0.4em;
      left: 2.8em;
      width: 100%; 
      color: #abccbf   ;
      font-size: 0.6em;
      letter-spacing: 1px;
      }
   
   .caMainContent > div > h2, .caMainContent .caContentContent > h2 {
      margin-top: -0.3em; 
      color: #084e91;
      font-size: 1.4em;
      font-weight: 600;
      margin-bottom: 0.4em;
      }   
   
   .caContent {
       padding-bottom: 0.6em;
       position: relative;
       padding-top: 1.4em;
       }   
    
   .caContent.level1 {
      padding-bottom: 1.4em;
      }
   
   .caContent.masquable .caContentHeader {
      cursor: pointer;
      }
   
   .caContent.masquable .caContentHeader::before {
      position: absolute;
      left: -1.4em;
      top: 1.3em;
      font-size: 1em;
      color: #D0D9E2;
      font-family: "FontAwesome";
      content: "\F068";
      display: inline-block;  
      }
   
   .caContent.masquable .caContentHeader:hover::before {
      color: #084e91;
      }
   
   .caContent.masquable .caContentHeader.off::before {
      content: "\F067";
      color: #084e91;
      }  
   
   .caContentId {
       position: absolute;
       top: 0.6em;
       left: 0px;
       width: 100%; 
       color: #82c1be;
       font-size: 0.6em;
       letter-spacing: 1px;
       }
    
    .caContent.level1 > .caContentHeader > h3, .caContent > div > h2 {
       margin-top: -0.3em; 
       color: #007fd3;
       font-size: 1.1em;
       margin-bottom: 0.4em;
       }   
    
   .caContent.level2 > h3 {
       margin-top: -0.3em; 
       color: #007fd3;
       font-size: 1em;
       font-weight: 600;
       margin-bottom: 0.4em;
       }   
        
   .caMainContent p, .caContent p {
      color: #666666;
      margin-top: 0em;
      margin-bottom: 0.4em;
      text-align: justify;
      }   
   
   .caMainContent b {
      font-weight: 600;
      color: #444444;
      }
   
   .caMainContent a, .caMainContent a:hover, .caMainContent a:visited, .caMainContent a:active  {
       color: #007fd3;
       text-decoration: none;
      }
   
   .caMainContent p.caAccess {
      font-weight: 600;
      color: #666666;
      margin-top: 1em;
      }
   
   .caMainContent p.caAccess b {
      font-weight: 800;
      }
   
   .caMainContent p.caAccess:first-child {
       margin-top: 0em;
      }
   
   .caMainContent ul, .caContent ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      margin-bottom: 1.4em;
      }
   
   .caMainContent ul > li, .caContent ul > li {
       position: relative;
       color: #666666;
       margin-top: 0em;
       margin-bottom: 0.2em;
       padding-left: 1.8em;
       background-image: none;
       }      
   
   .caMainContent ul > li::before, .caMainContent ul.list > li::before, .caMainContent ul.coursesList > li::before {
      position: absolute;
      top: -0.4em;
      left: 0em;
      font-family: "FontAwesome";
      content: "\F105";
      color: #007fd3;
      display: inline-block;
      vertical-align: middle;
      font-size: 1.4em;
      }
   
   .caMainContent ul > li > .diplomesListTitle::before, .caContent ul > li > .diplomesListTitle::before {
       position: absolute;
       top: 0.15em;
       left: 0.6em;
       font-family: "FontAwesome";
       content: "\F055";
       color: #007fd3;
       display: inline-block;
       vertical-align: middle;
       }
   
   .caMainContent ul.choice > li {
      cursor: pointer;
      }
   
   .caMainContent ul.choice > li::before {
       position: absolute;
       font-family: "FontAwesome";
       content: "\F1DB";
       color: #007fd3;
       display: inline-block;
       vertical-align: middle;
       }
        
   .caMainContent ul.choice > li.on::before {
       content: "\F192";
       }
   
   ul.diplomesList > li::before {
       display: none;
       }    
   
       ul.diplomesList > li > .diplomesListTitle {
      cursor: pointer;
      }
      
   ul.diplomesList > li:hover > .diplomesListTitle::before {
      color: #5bbeff;
      }
   
   ul.diplomesList > li:hover, ul.diplomesList > li.on > div.diplomesListTitle {
       color: #666666;
       }
       
   ul.diplomesList > li.on > .diplomesListTitle::before {
      content: "\F056";
      color: #5bbeff;
      }   
     
   ul.diplomesList > li > div.diplomesListTitle > span {
     color: #007fd3;
     font-size: 0.8em;
     font-style: italic;
     }
   
   div.diplomesList {
      display: none;
      padding-top: 0.6em;
      padding-bottom: 1em;
      }
   
   span.caMnemonic {
      background-color: #daebf6;
      border-radius: 3px;
      padding: 1px;
      padding-left: 6px;
      padding-right: 6px;
      font-size: 0.6em;
      margin-left: 0.2em;
      margin-right: 0.2em;
      vertical-align: 2px;
      }   
   
   span.caCredits {
      font-size: 0.8em;
      font-style: italic;
      }
   
   .caMainContent .caAreas {
      margin-top: 1em;
      }
         
   .caMainContent .caAreas:first-child {
      margin-top: 0em;
      }
      
   .caMainContent .caArea {
      margin-top: 1em;
      }
         
   .caMainContent .caArea:first-child {
      margin-top: 0em;
      }
      
   .caMainContent .caAreaTitle {
      font-weight: 600;  
      color: #666666;
      }
   
section.panel--etapres {
   font-size: 114%;
   text-align: justify;
   }

section.panel--admission {
   font-size: 114%;
   text-align: justify;
   }     

section.panel--presentation {
  font-size: 114%;
  text-align: justify;
  }     

section.panel--programme div.champ.programme {
  text-align: justify;
  }