/* This file will hold styles for the mobile version of your website (mobile first). */
/* This also can include ANY global CSS that applies site-wide. Unless overwritten by a more specific style rule, CSS declarations in global.css will apply site-wide. */
/*********************************************************\
*
* commun.css
*
* Feuille de style commune à tout les projets basés sur
* la methode SMACCS
*
\*********************************************************/


/*********************************************************\
 * BASE
 * Structure de base du contenu:
\*********************************************************/
  html { height:100%;}
  body {
    margin:0; padding:0;
    word-wrap:break-word;
    height:100%;
    text-rendering:optimizelegibility;
    font-size:13px;
    letter-spacing:0;
    color:#333333;
    background:#fff;
  }

  .hide { display: none!important; }
  .show { display: block; }


  /**
   * SELECTION
   *************************************/
    *::selection { color:#ffffff ; background:#323240; }
    *::-moz-selection { color:#ffffff; background:#323240; }


  /**
   * TITRES
   *************************************/
    h1,h2,h3 {
      margin:0;
      padding:0;
      line-height:20px;
      color:inherit;
      letter-spacing:normal;
      text-rendering:optimizelegibility;
    }

    h1#page-title { position:relative; margin:0 0 30px; line-height:30px; font-size:23px; color:#999999;}
      h1#page-title::before { content:''; position:absolute; bottom:-10px; left:0; width:100%; height:1px; background:#cac9c9;}
      h1#page-title .fa { margin-right:10px; }


    h2 { margin:0 0 20px 0; font-size:16px; }
    h3 { margin:0 0 20px 0; font-size:14px; }
    h4 { margin:0 0 10px 0; font-size:13px; }
    p { margin:0 0 20px 0; line-height:18px; }

  /**
   * LINKS
   *************************************/
    a:link, a:visited { text-decoration:none; color:#333333;}
    a:focus, a:hover, a:active { color:#3AB6C2; outline:0;}

  /**
   * NUMBER
   *************************************/
    .number { font-size:14px;}
    .big-number { display:block; margin:0 0 20px 0; text-align:center;  font-size:30px; letter-spacing:-2px;}
      .big-number>span { font-size:20px;}

  /**
   * TAILLE
   *************************************/
    .size-medium { font-size:20px;}
    .size-big { font-size:30px;}



  /**
   * Default
   *************************************/    
    .field-name-body { font-size:13px; color:#333333; /* color:#787878; */}
      .field-name-body h2,
      .site-map-menus h2 { position:relative; margin:0; margin-bottom:20px; line-height:30px; font-size:30px; color:#323240; text-transform:uppercase; font-weight:900 !important;}
      /* .field-name-body h3 { margin:0; margin-bottom:20px; font-size:24px; line-height:26px; color:#54586b; text-transform:uppercase; font-weight:800 !important;} */
      .field-name-body h3 { margin:0; margin-bottom:10px; font-size:18px; line-height:20px; color:#333333;}
      .field-name-body h4 { margin:0; margin-bottom:20px; font-size:20px; line-height:22px; text-transform:uppercase; font-weight:800 !important;}
        .field-name-body h2 small { font-size:0.5em; text-transform:none;}
        .field-name-body h3 small,
        .field-name-body h4 small { font-size:0.8em;}

      .field-name-body p { margin-bottom:20px; line-height:16px;}
      .field-name-body p.cke-lead { display:block; margin-bottom:30px; font-size:16px; text-transform:uppercase;}

      .field-name-body strong,
      .field-name-body b { font-weight:bold;}

      .field-name-body em,
      .field-name-body i { font-style:italic;}
      .field-name-body u { text-decoration:underline;}
      .field-name-body s { text-decoration:line-through;}

      .small { font-size:10px;}
      small { font-size:0.8em;}



  /**
   * LISTES
   *************************************/
      .field-name-body ol,
      .field-name-body ul,
      ul.field-list,
      .site-map-menus ul.site-map-menu { display:block; margin:0 0 20px; padding:0;}
      .field-name-body ol { counter-reset:item;}
      .field-name-body ul,
      ul.field-list,
      .site-map-menus ul.site-map-menu { list-style:none;}
      .field-name-body ol li,
      .field-name-body ul li,
      ul.field-list li,
      .site-map-menus ul.site-map-menu li { margin-left:0; margin-bottom:0; line-height:18px; text-align:-webkit-match-parent;}
      .field-name-body ul li,
      ul.field-list li,
      .site-map-menus ul.site-map-menu li { }
      .field-name-body ul li::before,
      ul.field-list li::before,
      .site-map-menus ul.site-map-menu li::before { content:'-'; margin:0 10px; font-size:18px; color:#323240;}
      .field-name-body ol li::before,
      ol.field-list li::before,
      .site-map-menus ol.site-map-menu li::before { content:counter(item); counter-increment:item; display:inline-block; margin:0 8px 0 0; padding:0px 8px; height:20px; background:#323240; color:#f2e72d; font-size:12px; line-height:20px; border-radius:50%;}
      .field-name-body ol li {}
      .field-name-body ol>li>ol,
      .field-name-body ul>li>ul,
      .site-map-menus ul.site-map-menu>li>ul { margin:4px 0; padding:0 0 0 20px;}


  /**
   * INDICES : Sub/Sup
   *************************************/
    sub,
    sup { position:relative; font-size:75%; line-height:0; vertical-align:baseline; }
    sup { top: -0.5em;}
    sub { bottom: -0.25em;}



/*********************************************************\
 * LAYOUT
 * Structure des pages:
 * Header/ Content/ Footer/ etc;
\*********************************************************/
  /**
   * HEADER
   **************************************/
    .section-header { position:fixed; top:0; left:0; right:0; z-index:2; height:60px; border-bottom:1px solid #ebebeb; background:#ffffff;}
      #region-branding { float:left; width:230px; height:100%; text-align:center;}
        #region-branding a { display:inline-block; height:100%; line-height:60px;}
          #region-branding a img {}

      #region-main-menu { float:left; height:100%; font-size:0;}
          #region-main-menu>li { position:relative; margin:14px 0;}
            #region-main-menu>li>a { font-size:13px;}
            #region-main-menu>li>a:hover,
            #region-main-menu>li>a.active-trail { color:#3AB6C2;}
            #region-main-menu>li>ul { position:absolute; top:46px; left:0; width:150px; max-height:0; background:#383f56; overflow:hidden;}
            #region-main-menu>li:hover>ul { max-height:9999px;}
              #region-main-menu>li>ul>li { display:block; padding:0;}
                #region-main-menu>li>ul>li>a { display:block; padding:0 10px; color:#f5f5f5;}
                #region-main-menu>li>ul>li>a:hover,
                #region-main-menu>li>ul>li>a.active-trail { color:#ffffff; background:#3AB6C2;}



      #region-admin-links { float:right; display:block; margin:0 20px 0; height:60px; font-size:0;}
        #region-admin-links>li { position:relative; margin:0; padding:14px 15px; height:32px;}
        /* #region-admin-links>li.logout { height:32px;} */
          #region-admin-links>li>a { position:relative; color:#333333;}
          #region-admin-links>li>a:hover,
          #region-admin-links>li>a.active-trail { color:#3AB6C2;}

           #region-admin-links>li>ul { position:absolute; top:60px; left:0; width:150px; max-height:0; background:#141f38; overflow:hidden;}
           #region-admin-links>li:hover>ul { max-height:9999px; /*height: 100vh; overflow-y: scroll;*/}
            #region-admin-links>li>ul>li { display:block; padding:0;}
                #region-admin-links>li>ul>li>a { display:block; padding:0 10px; color:#f5f5f5;}
                #region-admin-links>li>ul>li>a:hover,
                #region-admin-links>li>ul>li>a.active-trail { color:#ffffff; background:#3AB6C2;}


      /* User */
          li#user-link {}
          li#user-link a { position:relative; padding:0 0 0 40px;}
          li#user-link a div.user-avatar { position:absolute; top:0; left:0; display:block; width:30px; height:30px; border-radius:50%; overflow:hidden; background:#f5f6fa; color:#333333;}
          li#user-link a div.user-avatar .fa { line-height:30px; width:30px; text-align:center;}

          li#user-link a:hover div.user-avatar img { opacity:0.8;}


  /**
   * CONTENT
   **************************************/
    .section-content { width:100%; height:100%;}
      /* .section-content .section-wrapper { position:relative; width:100%; height:100%;} */
      .section-content .section-wrapper { padding: 60px 0 0 0; min-height:100%; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex;}
      .section-content .section-wrapper { -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:nowrap; -ms-flex-wrap:nowrap; flex-wrap:nowrap;}
      .section-content .section-wrapper { -webkit-flex-wrap:nowrap; -ms-flex-wrap:nowrap; flex-wrap:nowrap;}
      .section-content .section-wrapper { -webkit-box-align:stretch; -moz-box-align:stretch; -webkit-align-items:stretch; -ms-flex-align:stretch; align-items:stretch;}

        /* .zone-side { position:fixed; top:60px; z-index:1; padding:10px; width:110px; min-height:100%; background:#42557d;} */
        .zone-side { padding:10px; width:110px; min-height:100%; background:#F5F6FA; /* background:#42557d; */}
        .zone-left { order:1; }
        .zone-right { order:3;}
        .zone-left.large,
        .zone-right.large { min-width:230px;}
        .zone-left.medium,
        .zone-right.medium { width:200px;}

        /* MENU SIDE BAR */
          .region-menu { position:relative; margin:0 0 20px; width:90px;}
            .region-menu h2 { padding:10px; width:70px; min-height:50px; line-height:16px; font-size:12px; border-radius:4px; text-align:center; color:#3f465d; background:transparent;}
              .region-menu h2 a:link,
              .region-menu h2 a:visited { color:#3f465d; font-size:14px;}  
              .region-menu h2 .fa { margin-bottom:8px; width:50px; font-size:20px;}
            .region-menu:hover h2,
            .region-menu.active-trail h2 { background:#ffffff;}
            .region-menu:hover h2 .fa,
            .region-menu.active-trail h2 .fa { color:#3AB6C2;}

            .region-menu ul { overflow:hidden; position:absolute; top:0; padding:0px; max-width:0; /* background:#383f56; */ border:0px solid transparent;}
            .region-menu:hover ul { max-width:9999px; border:4px solid #383f56;}
            .zone-left .region-menu ul { left:90px; }
            .zone-right .region-menu ul { right:90px; }

              .zone-left .region-menu::before { position:absolute; top:15px; right:0; z-index:9999; content:''; display:block; width: 0; height:0; border-style:solid; border-width:7.5px 0 7.5px 0; border-color:transparent #383f56 transparent transparent;}
              .zone-left .region-menu:hover::before { border-width:7.5px 10px 7.5px 0;}
              .zone-right .region-menu::before { position:absolute; top:15px; left:0; z-index:9999; content:''; display:block; width: 0; height:0; border-style:solid; border-width:7.5px 0 7.5px 0; border-color:transparent transparent transparent #383f56;}
              .zone-right .region-menu:hover::before { border-width:7.5px 10px 7.5px 10px;}

              .region-menu ul li { display:block; width:240px; height:auto;/* height:28px; */}
                /* .region-menu ul li a { display:block; padding:0 15px; height:28px; line-height:28px; color:#3f465d;} */
                .region-menu ul li a { display:table-cell; box-sizing:border-box; vertical-align:middle; padding:4px 15px; width:210px; height:auto; min-height:28px; line-height:16px; color:#3f465d;}
                .region-menu ul li a:hover,
                .region-menu ul li a.active-trail { background:#3AB6C2; color:#ffffff;}
          /* Large */
            .large .region-menu::before { display:none;}
            .large .region-menu { position:static; margin:0 0 20px; width:auto;}
            .large .region-menu h2 { margin:0; padding:10px; width:auto; min-height:auto; line-height:16px; border-radius:4px 4px 0 0; text-align:left; cursor:default; background:#ffffff;}
              .large .region-menu h2 .fa { margin:0 8px 0; width:auto; color:#3AB6C2;}
            .large .region-menu:hover h2,
            .large .region-menu.active-trail h2 { margin:0; background:#ffffff;}

            .large .region-menu ul { overflow:hidden; position:static; padding:0px; max-width:9999px; background:#ffffff; border:0px;}
            .large .region-menu:hover ul,
            .large .region-menu.active-trail ul { background:#ffffff;}
              .large .region-menu ul li { width:auto; }
                .large .region-menu ul li a { color:#616177;}

                /* .large .region-menu ul li:hover a,
                .large .region-menu ul li a:hover,
                .large .region-menu.active-trail ul li a.active-trail { background:#3AB6C2; color:#ffffff;} */
                .large .region-menu ul > li > a:hover,
                .large .region-menu.active-trail ul > li a.active-trail { background:#3AB6C2; color:#ffffff;}

            /* menu reduce */
              .large.reduce .region-menu h2 { cursor:pointer;}
              .large.reduce .region-menu h2:hover { color:#3AB6C2;}
              .large.reduce .region-menu ul { display:none;}
              .large.reduce .region-menu.show ul { display:block;}


        /**
         * MENU ACTION
         **************************/
          .menu-action-wrapper {}
            .menu-action-wrapper h2 { margin:0 0 20px 0;}
            .menu-action-wrapper ul.menu-action {}
              .menu-action-wrapper ul.menu-action li.menu-action-item { margin:0 0 10px 0;}
                .menu-action-wrapper ul.menu-action li.menu-action-item a {}




        /* .zone-content { padding:60px 0 0 0; width:100%; min-height:100%; background:#f8f8f8;} */
        .zone-content { width:100%; min-height:100%; min-width:500px; background:#f8f8f8; order:2; flex-grow:1; -webkit-flex-grow:1; -moz-flex-grow:1;}
        /* .zone-content.padding-left { padding-left:110px;}
        .zone-content.padding-left-large { padding-left:230px;}
        .zone-content.padding-right { padding-right:110px;}
        .zone-content.padding-right-large { padding-right:230px;} */

          .region-content { margin:10px; padding:10px; background:#fff;}
            .region-content .block-content-body { /* overflow:hidden; */}

          #region-cover { margin:0 0 10px; }
            #region-cover p { margin:10px; padding:10px 10px 10px; line-height:20px; border-bottom:1px solid #ebebeb;}
        
        .box {
          box-sizing: border-box; /* Opera/IE 8+ */
          -moz-box-sizing: border-box; /* Firefox, autres Gecko */
          -webkit-box-sizing: border-box; /* Safari/Chrome, autres WebKit */
        }

  /**
   * FOOTER
   **************************************/





/*********************************************************\
 * MODULE
 * Objets/structures réutilisables :
 * Menu/ Blocks/ Boutons/ Etc;
\*********************************************************/
 /**
   * FONTS
   **************************************/
    /* Thin */
    /* {
      font-family:'robotothin', sans-serif;
      font-weight:normal;
    } */

    /* Light */
    /*  {
       font-family:'robotolight', sans-serif;
       font-weight:normal;
     }*/

    /* Regular */
    body,
    h1,
    #region-main-menu li a,
    .region-menu h2 {
      font-family:'robotoregular', sans-serif;
      font-weight:normal;
    }

    /* Medium */
    .breadcrumb,
    div.messages h3 {
      font-family:'robotomedium', sans-serif;
      font-weight:normal;
    }
  
    /* Bold */
    b, strong,
    .bold,
    .breadcrumb>a,
    .block-content h2,
    .block-content h3,
    .block-content h4 {
      font-family:'robotobold', sans-serif;
      font-weight:normal;
    }

    /* Droid Sans Mono */
      .number,
      .big-number {
        font-family:'droidSansMono', sans-serif;
        font-weight:normal;
      }

      .bold,
      strong,
      b { font-weight:900!important;}

    
    /*FontAwesome*/
    div.messages::before {
      font-family:'fontawesome';
      font-weight:normal;
    }


  /**
   * TRANSITIONS
    *************************************/

    a,
    .btn,
    .slabb-animate,
    .slabb-animate-top,
    .shadow-small-hover,
    .shadow-medium-hover,
    .shadow-large-hover,
    .region-menu h2,
    #region-main-menu>li>ul,
    .region-menu::before,
    #notification-link::before,
    #notification-link ul,
    .region-menu ul,
    div.user-avatar img {
    -webkit-transition: all 0.2s ease;
       -moz-transition: all 0.2s ease;
         -o-transition: all 0.2s ease;
            transition: all 0.2s ease;
    }

    /* {
    -webkit-transition: all 0.35s ease;
       -moz-transition: all 0.35s ease;
         -o-transition: all 0.35s ease;
            transition: all 0.35s ease;
       } */


  /**
   * POSITION : décalage vers le haut
   *************************************/
    .slabb-animate-top:hover {
     transform-origin:top center; -webkit-transform-origin:top center; -moz-transform-origin:top center; -ms-transform-origin:top center; -o-transform-origin:top center;
     transform:translateY(-10px); -webkit-transform:translateY(-10px); -moz-transform:translateY(-10px); -ms-transform:translateY(-10px); -o-transform:translateY(-10px);
    }


  /**
   * SHADOW
   *************************************/
    .region-login,    
    #region-main-menu>li>ul,
    #notification-link ul,
    .region-menu ul {
      -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.5);
         -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.5);
          -ms-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.5);
           -o-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.5);
              box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.5);
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=40);
    }

    .large .region-menu ul,
    .shadow-small,
    .shadow-small-hover:hover {
      -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
         -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
          -ms-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
           -o-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
              box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=0);
    }

    .shadow-medium,
    .shadow-medium-hover:hover {
      -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
         -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
          -ms-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
           -o-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
              box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    }

    .shadow-large,
    .shadow-large-hover:hover {
      -webkit-box-shadow: 3px 2px 18px 0px rgba(0,0,0,0.25);
         -moz-box-shadow: 3px 2px 18px 0px rgba(0,0,0,0.25);
          -ms-box-shadow: 3px 2px 18px 0px rgba(0,0,0,0.25);
           -o-box-shadow: 3px 2px 18px 0px rgba(0,0,0,0.25);
              box-shadow: 3px 2px 18px 0px rgba(0,0,0,0.25);
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=40);
    }


  /**
   * CLEARFIX
   *************************************/
    .clearfix:after { visibility:hidden; display:block; font-size:0; content:""; clear:both; height:0;}


  /**
   * LOADER PAGE
   ************************************/
   #loader-page { position:fixed; z-index:9; top:0; right:0; bottom:0; left:0; width:auto; height:auto; background:rgba(41, 79, 97, 0.8);} 
   #loader-page #loader-page-content { position:fixed; z-index:9; top:50%; left:50%; box-sizing:border-box; display:block; padding:20px 40px; width:auto; min-width:300px; height:auto; color:#223975; font-size:16px; background:#eeeff4; text-align:center; border-radius:13px; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); animation-duration:0.35s; animation-name:fadeIn;}
   @keyframes fadeIn { 0% { opacity:0;} 100% { opacity:1;} }


  /**
   * Container-flex
   *************************************/
    .container-flex { 
      display:-webkit-box;
      display:-moz-box;
      display:-ms-flexbox;
      display:-moz-flex;
      display:-webkit-flex;
      display:flex;
      flex-flow:row wrap;
    }
    .container-flex-center { justify-content:center;}
    .container-flex .block-flex { margin:10px;}

    .flex-wrapper { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex;}
    .flex-wrapper .flex-main { flex-grow:1; -webkit-flex-grow:1; -moz-flex-grow:1;}


  /**
   * MESSAGES
    *************************************/
    div.messages { position:relative; margin:0 0 10px; padding:10px 20px;}
        div.messages h3 { margin:0 0 4px 50px; color:#ffffff; font-size:14px; line-height:18px;}
        div.messages p { margin:0 0 10px 50px; color:#ffffff; font-size:14px; line-height:18px;}
        div.messages::before { position:absolute; top:50%; left:20px; display:block; margin-top:-15px; width:30px; height:30px; line-height:30px; text-align:center; color:#ffffff; font-size:30px; }

      div.success { background-color:rgb(0, 189, 157);}
        div.success::before { content:'\f00c';}

      div.error,
      div.negative { background-color:rgb(254, 94, 120);}
        div.error::before,
        div.negative::before { content:'\f00d';}

      div.warning { background-color:rgb(221,197,35);}
        div.warning::before { content:'\f129'; color:#694900;}
        div.warning h3,
        div.warning p { color:#694900;}
    


  /**
   * SCROLL TOP
    *************************************/
    #scroll-top { position:fixed; z-index:999999; bottom:-100px; right:20px; display:block; width:50px; height:50px; color:#ffffff; text-align:center; background:rgba(39,154,173, 0.55); cursor:pointer; border-radius:4px;}
      #scroll-top .fa { font-size:18px; line-height:50px;}
    #scroll-top:hover { background:rgba(39,154,173, 0.9); }
    #scroll-top.show { bottom:20px;}

  /**
   * BREADCRUMBS
    *************************************/
    /* .breadcrumb { margin:0 0 20px; padding:0 0 10px; border-bottom:1px solid #ebebeb;} */
    .breadcrumb { margin:0 0 20px;}
    .breadcrumb,
    .breadcrumb>a { font-size:14px; line-height:24px; text-decoration:none; }
    span.crumbs-separator { padding:0 8px; font-size:20px;}


  

  
  /**
   * MENU 
   *************************************/
    .base-menu { font-size:0;}
      .base-menu li { display:inline-block; padding:0 15px; height:32px;}
        .base-menu li a { display:block; height:100%; line-height:32px; font-size:13px;}
          .base-menu li a span.fa { line-height:32px; font-size:16px;}


  /**
   * NOTIFICATION
   ************************************/
      #notification-link { position:relative;}
      #notification-link::before { position:absolute; bottom:-14px; right:15px; content:''; width:0; height:0; border-style:solid; border-width:0 7.5px 0 7.5px; border-color:transparent transparent #383f56 transparent;}
      #notification-link ul { position:absolute; top:46px; right:-20px; padding:0; width:350px; max-height:0; background:#383f56; overflow:hidden;}
      #notification-link ul li { display:block; margin:0; padding:0 4px; background:#ffffff; border-bottom:1px solid #ddd;}
      #notification-link>ul>li>a { display:block; color:#000 !important; position: relative;}

      #notification-link:hover::before { border-width:0 7.5px 10px 7.5px;}
      #notification-link:hover ul { padding:2px;max-height:9999px;width: 250px;}
      #notification-link:hover li { height: auto;}

      #notification-link ul li:hover { background:#ccc; border-color:#000}
      #notification-link ul li a:hover { color:#000;}

      #notification-link>ul>li>a:hover{background: #e5e5e5 !important;}

      #notification-link .check-demande{     
          position: absolute;
          top: 5px;
          right: 5px;
          background: #1d367c;
          width: 15px;
          height: 15px;
          font-size: 15px;
          line-height: 15px;
          color: #fff;
          cursor: pointer;
          z-index: 999;
      }

   /**
   * NOTIFICATION Horaire
   ************************************/
  #notification-horaire { position:relative;}
  #notification-horaire::before { position:absolute; bottom:-14px; right:15px; content:''; width:0; height:0; border-style:solid; border-width:0 7.5px 0 7.5px; border-color:transparent transparent #383f56 transparent;}
  #notification-horaire ul { position:absolute; top:46px; right:-40px; padding:0; width:350px; max-height:0; background:#383f56; overflow:hidden;}
  #notification-horaire ul li { display:block; margin:0; padding:0 4px; background:#ffffff; border-bottom:1px solid #ddd;}
  #notification-horaire>ul>li>a { display:block; color:#000 !important; position: relative;}

  #notification-horaire:hover::before { border-width:0 7.5px 10px 7.5px;}
  #notification-horaire:hover ul { padding:2px;max-height:9999px;width: 250px;}
  #notification-horaire:hover li { height: auto;}

  #notification-horaire ul li:hover { background:#ccc; border-color:#000}
  #notification-horaire ul li a:hover { color:#000;}

  #notification-horaire>ul>li>a:hover{background: #e5e5e5 !important;}

  /**
   * NOTIFICATION Horaire
   ************************************/
  #notification-absence { position:relative;}
  #notification-absence::before { position:absolute; bottom:-14px; right:15px; content:''; width:0; height:0; border-style:solid; border-width:0 7.5px 0 7.5px; border-color:transparent transparent #383f56 transparent;}
  #notification-absence ul { position:absolute; top:46px; right:-60px; padding:0; width:350px; max-height:0; background:#383f56; overflow:hidden;}
  #notification-absence ul li { display:block; margin:0; padding:0 4px; background:#ffffff; border-bottom:1px solid #ddd;}
  #notification-absence>ul>li>a { display:block; color:#000 !important; position: relative;}

  #notification-absence:hover::before { border-width:0 7.5px 10px 7.5px;}
  #notification-absence:hover ul { padding:2px;max-height:9999px;width: 250px;}
  #notification-absence:hover li { height: auto;}

  #notification-absence ul li:hover { background:#ccc; border-color:#000}
  #notification-absence ul li a:hover { color:#000;}

  #notification-absence>ul>li>a:hover{background: #e5e5e5 !important;}

  /**
   *  THUMB
   ************************************/
    .thumb { background:url('images/layout/default-image.svg') center center no-repeat #e5e5e5; background-size:50px;}
      .thumb a { display:block;}
        .thumb a img { }


  /**
   *  BADGE
   ************************************/
    span.badge { display:inline-block; padding:0px 5px; max-height:0; line-height:initial; border-radius:4px; text-align:center; color:#ffffff; font-size:10px; background:#fa3e3e; overflow:hidden;}
      span.badge { position:absolute; left:7px; top:0px;}
    span.badge.active { padding:2px 5px; max-height:40px;}



  /**
   *  QUICKADD
   ************************************/
    

   /**
   * TXT
   *************************************/
    .txt-green,
     .btn-neutre .fa.txt-green,
     .btn-neutre.txt-green .fa { color:rgb(0, 189, 157)!important;}
     .txt-orange,
     .btn-neutre .fa.txt-orange,
     .btn-neutre.txt-orange .fa { color:rgb(253, 154, 66)!important;}
     .txt-red,
     .btn-neutre .fa.txt-red,
     .btn-neutre.txt-red .fa { color:rgb(254, 94, 120)!important;}


   /**
   * BTN
   *************************************/
    .btn { display:inline-block; padding:0 15px; line-height:32px; border:0; border-radius:4px; background:rgb(254, 94, 120); color:#ffffff!important; cursor:pointer; }
      .btn span { color:#ffffff;}
    .btn:hover { background:rgba(254, 94, 120,0.8);}
    .btn:disabled { opacity: 0.5;}

    .btn-small { height:28px; line-height:28px;}
    .btn-ultraSmall { height:20px; line-height:20px;}

    .btn-neutre,
    .btn-neutre:hover,
    .btn-neutre .fa { color:#333333!important; background:transparent; cursor:default;}

    .btn-return { display:block; margin:0 0 20px; padding:0 0 0 8px; background:#141f38; color:#cbced7!important;}
      .btn-return span { margin-right:4px; color:#cbced7;}
    .btn-return:hover { color:#141f38!important; background:#cbced7;}
      .btn-return:hover span { color:#141f38!important;}

    .btn-green { background:#2da1b2; }
      .btn-green:hover { background:#3cb9c5; }

    .btn-blue { background:#20387a; }
      .btn-blue:hover { background:#314b8e; }

    /* .btn-blue {
        background: rgb(94,132,178);
        background: -moz-linear-gradient(left, rgba(94,132,178,1) 1%, rgba(58,182,194,1) 100%);
        background: -webkit-linear-gradient(left, rgba(94,132,178,1) 1%,rgba(58,182,194,1) 100%);
        background: linear-gradient(to right, rgba(94,132,178,1) 1%,rgba(58,182,194,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e84b2', endColorstr='#3ab6c2',GradientType=1 );
      }
      .btn-blue:hover {
        background: rgba(58,182,194, 0.8);
        background: -moz-linear-gradient(left, rgba(58,182,194,0.8) 0%, rgba(24,31,46,0.8) 100%);
        background: -webkit-linear-gradient(left, rgba(58,182,194,0.8) 0%,rgba(24,31,46,0.8) 100%);
        background: linear-gradient(to right, rgba(58,182,194,0.8) 0%,rgba(24,31,46,0.8) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ab6c2', endColorstr='#181f2e',GradientType=1 );
       } */

    .btn-valide { background:rgb(0,189,157);}
      .btn-valide:hover { background:rgba(0,189,157,0.8);}

    .btn-grey { background:rgb(173,173,161); cursor:default;}
      .btn-grey:hover { background:rgb(173,173,161);}

    .btn-select { background:rgb(173,173,161);}
      .btn-select:hover,
      .btn-select.active { background:rgb(113,175,66);}

    .btn-select-red { background:rgb(173,173,161);}
      .btn-select-red:hover,
      .btn-select-red.active { background:rgb(254, 94, 120);}

    .btn-onglet { background:#ffffff!important; color:#2da1b2!important;}
      .btn-onglet .fa,
      .btn-onglet span { color:#2da1b2!important;}
      .btn-onglet:hover,
      .btn-onglet.active { background:#2da1b2!important; color:#ffffff!important;}
        .btn-onglet:hover .fa,
        .btn-onglet.active .fa,
        .btn-onglet:hover span,
        .btn-onglet.active span  { color:#ffffff!important;}


 /**
  * LOGIN PAGE
  ********************************************/
  body#login { }
  .section-login { display:flex; justify-content:center;}
    .region-login { box-sizing:border-box; margin-top:50px; padding:20px; width:400px; background:#F5F6FA; border:1px solid #ebebeb; border-radius:4px;}
      .region-login h1 { margin:0 0 20px; font-size:20px;}
      .region-login .branding { margin:0 0 30px; text-align:center;}
      
      .region-login form {}
        .region-login .form-item { position:relative; margin:0 0 7px;}
          .region-login form .form-item .fa { position: absolute; top:0; left:0; box-sizing:border-box; padding:0 8px; height:36px; font-size:20px; line-height:36px; background:#ffffff; border:1px solid #F5F6FA;}
          .region-login form input { box-sizing:border-box; margin:0; padding:0 4px 0 44px; width:100%; height:36px; line-height:36px; border:1px solid #e5e5e5; background:#ffffff;}
          .region-login form input[type="text"] {}
          .region-login form input[type="password"] {}

        .region-login .form-action { margin:10px 0; text-align:center;}
          .region-login button { width:100%; line-height:40px; font-size:14px; color:#ffffff; text-align:center; background:#279aad; border:0; cursor:pointer;}


  /**
   * STAT-ITEM
   *************************************/
    .stat-item { display:inline-block; box-sizing:border-box; margin:0 0 20px 0; width:200px; border-radius:4px; overflow:hidden; font-size:0; background:#ffffff;}
      .stat-item h2 { margin:0; padding:10px 0; color:#ffffff; line-height:30px; font-size:20px; text-align:center; background:rgb(237,89,94);}
        .stat-item h2 .fa { display:block; margin-bottom:4px; font-size:40px; color:rgb(165, 41, 45);}
      
      /* Full */
      .stat-item .stat-item-box-full { display:block; padding:20px 0; width:100%; min-height:79px; line-height:38px; box-sizing:border-box; font-size:24px; color:#4d4d4d; background:#ffffff; text-align:center;}

      /* 2 Box */
      .stat-item .stat-item-box { display:inline-block; padding:20px 0; width:90px; box-sizing:border-box; font-size:24px; color:#4d4d4d; background:#ffffff; text-align:center;}
      .stat-item .stat-item-box:nth-child(even) { border-right:1px solid #dadada;}
        .stat-item .stat-item-box span:nth-of-type(1) { display:block; margin-bottom:4px; font-size:11px; color:#98998b; text-transform:uppercase;}

    .stat-item.red h2 { background:rgb(237,89,94);}
      .stat-item.red h2 .fa { color:rgb(165, 41, 45);}

    .stat-item.green h2 { background:#71af42;}
      .stat-item.green h2 .fa { color:#4b752d;}

    .stat-item.yellow h2 { background:rgb(179, 156, 0);}
      .stat-item.yellow h2 .fa { color:#694900;}

    .stat-item.turquoise h2 { background:#3AB6C2;}
      .stat-item.turquoise h2 .fa { color:#1f646b;}


  /**
   * STATS
   *************************************/
    .stats-item-normal {/*  margin:10px 20px!important; */ }
      .stats-item-normal span.libelle { display:block; margin:10px 0; font-size:13px; /* font-size:15px; */ text-align:center;}
      .stats-item-normal span.value { display:block; text-align:center; font-size:14px; /* font-size:24px; */ font-family:'robotoblack';}
        .stats-item-normal span.value sub { font-size:14px;}


  /**
   * CONTACT LOAD
   **************************************/
    .upload-contacts { background:#ffffff; overflow:hidden;}
    /* .upload-contacts fieldset { background:#fff;} */
    .upload-contacts .contact-teaser { position:relative; margin:0 5px 0 0; padding:8px 0 8px 10px; border-left:5px solid #fff; line-height:22px;}
    .upload-contacts .contact-teaser .contact-teaser-edit,
    .upload-contacts .contact-teaser .contact-teaser-close { opacity:0; position:absolute; top:4px; right:-40px; width:30px; height:30px; line-height:30px; color:#fff; text-align:center; background:#41a6b5; border-radius:50%; }
    .upload-contacts .contact-teaser .contact-teaser-close { background:#fe5e78; }
    .upload-contacts .contact-teaser .contact-type { display:inline-block; min-width:86px; font-weight:700;}
    .upload-contacts fieldset.form { margin:0 5px; padding:0 20px; max-height:0; background:#e6eaeb; overflow:hidden;}
    .upload-contacts .upload-contacts-input { }


    /* Hover */
    .upload-contacts .contact-teaser:hover .contact-teaser-edit { opacity:1; right:4px;}

    /* Active */
    .upload-contacts.active .contact-teaser:hover .contact-teaser-close { opacity:1; right:4px;}
    .upload-contacts.active .contact-teaser:hover .contact-teaser-edit { opacity:0; right:-40px;}

    .upload-contacts.active .contact-teaser,
    .upload-contacts.new .contact-teaser { background:#e6eaeb;}
    .upload-contacts.active fieldset.form,
    .upload-contacts.new fieldset.form { margin:0 5px 5px 5px; padding:20px; max-height:999px; overflow:initial;}


    .upload-contacts.contact-load { margin:0 0 10px 0;}
    .upload-contacts.contact-load.active { background:#ffffff;}
      .contact-teaser { padding:8px 0 8px 10px; cursor:pointer;}
      .contact-teaser:hover { background:#e6eaeb;}

      /* .upload-contacts.contact-load .upload-contacts-input,
      .upload-contacts.contact-load .upload-contacts-action { padding:0 10px; max-height:0; overflow:hidden;}
      .upload-contacts.contact-load.active .upload-contacts-input,
      .upload-contacts.contact-load.active .upload-contacts-action { padding:10px; max-height:999px; overflow:initial;} */

      
  

    .upload-contacts.active fieldset.form,
    .upload-contacts .contact-teaser {
    -webkit-transition: all 0.2s ease;
       -moz-transition: all 0.2s ease;
         -o-transition: all 0.2s ease;
            transition: all 0.2s ease;
    }

    .upload-contacts .contact-teaser .contact-teaser-edit,
    .upload-contacts .contact-teaser .contact-teaser-close {
      -webkit-transition: all 0.5s ease;
         -moz-transition: all 0.5s ease;
           -o-transition: all 0.5s ease;
              transition: all 0.5s ease;
      }


  
  .region-menu .sous-menu:has(a)   {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #616177;
    max-height: 24px;
  }

  .region-menu .sous-menu button  {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #616177;
    max-height: 24px;
  }

  .region-menu .sous-menu a,
  .region-menu .sous-menu button {
    padding-left: 20px;
  }

  .region-menu .sous-menu button:hover {
    color: #ffffff;
    background-color: #3AB6C2;
  }

  .input-small div ul li {
    margin-bottom: 4px;
    color: red;
  }


  /**
   * PERMISSIONS
   **********************************/
   .permission-checkbox.sous-permission label { padding-left:54px; background:url('images/layout/arrow-sub-item.svg') 38px 0 no-repeat transparent; background-size:10px;}