/* 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:#3c4859;
    background:#fff;
  }


  /**
   * 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 20px; padding:0 0 0 20px; height:60px; line-height:60px; font-size:18px; color:#383f56; }
      /* h1#page-title::after { content:''; position:absolute; left:10px; bottom:-10px; width:0; height:0; border-style:solid; border-width:10px 7px 0 7px; border-color:#383f56 transparent transparent transparent;} */


  /**
   * LINKS
   *************************************/
    a:link, a:visited { text-decoration:none; color:#383f56;}
    a:focus, a:hover, a:active { color:#fe5e78; outline:0;}


  /**
   * Default
   *************************************/    
    .field-name-body { font-size:14px; color:#333333;}
      .field-name-body h2 { position:relative; margin:0; margin-bottom:20px; line-height:30px; font-size:24px; color:#323240;}
      .field-name-body h3 { margin:0; margin-bottom:10px; font-size:18px; line-height:22px; color:#ed595e; text-transform:uppercase; font-weight:800 !important;}
      .field-name-body h4 { margin:0; margin-bottom:10px; font-size:16px; line-height:22px; text-transform:uppercase; font-weight:800 !important;}

      .field-name-body p { margin-bottom:20px; line-height:20px;}
      .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;}



  /**
   * 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:4px; line-height:20px; 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; line-height:28px; 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
   *************************************/
    .field-name-body sub,
    .field-name-body sup { position:relative; font-size:75%; line-height:0; vertical-align:baseline; }
    .field-name-body sup { top: -0.5em;}
    .field-name-body 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; z-index: 10;}
      #region-branding { float:left; width:200px; height:100%; text-align:center;}
        #region-branding a { display:inline-block; height:100%; line-height:60px;}
          #region-branding a img { height:45px;}

      #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:16px;}
            #region-main-menu>li>a:hover,
            #region-main-menu>li>a.active-trail { color:#fe5e78;}
            #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:#fe5e78;}


      #region-admin-links { float:right; display:block; margin:0 20px 0; height:60px; font-size:0;}
      #region-admin-links ul{ width: max-content !important;}
        #region-admin-links>li { position:relative; margin:0; padding:14px 15px;}
          #region-admin-links>li>a { position:relative;}
          #region-admin-links>li>a.active-trail { color:#fe5e78;}

          #region-admin-links>li>ul { position:absolute; top:60px; left:0; width:150px; max-height:0; background:#383f56; overflow:hidden;}
          #region-admin-links>li:hover>ul { max-height:9999px;}
            #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:#fe5e78;}


  /**
   * 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:20px 0; width:110px; min-height:100%; background:#e5e5e5;}
        .zone-left { left:0; }
        .zone-right { right:0;} */
        .zone-side { padding:10px; width:110px; min-height:100%; background:#e5e5e5; /* background:#42557d; */}
        .zone-left { order:0; }
        .zone-right { order:3;}
        .zone-left.large,
        .zone-right.large { width:250px;}

        .zone-side .btn-return { margin:0 10px 20px 10px;}

        /* MENU SIDE BAR */
          .region-menu { position:relative; margin:0; width:90px;}
            .region-menu h2 { padding:10px; width:90px; min-height:50px; line-height:16px; font-size:11px; text-transform:uppercase; text-align:center; color:#616177; background:transparent;}
              .region-menu h2 a:link,
              .region-menu h2 a:visited { color:#616177; /* font-size:14px; */}  
              .region-menu h2 .fa { margin-bottom:8px; width:100%; font-size:22px; color:#616177;}
            .region-menu:hover h2,
            .region-menu.active-trail h2 { background:#ffffff;}
            .region-menu:hover h2 .fa,
            .region-menu.active-trail h2 .fa { color:#ED595E;}

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

              .zone-left .region-menu::before { position:absolute; top:15px; right:-20px; z-index:9999; content:''; display:block; width: 0; height:0; border-style:solid; border-width:7.5px 0 7.5px 0; border-color:transparent #ED595E 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:0px; 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 #ED595E;}
              .zone-right .region-menu:hover::before { border-width:7.5px 10px 7.5px 10px;}

              .region-menu ul li { display:block; width:240px; height:32px;}
                .region-menu ul li a { display:block; padding:0 15px; height:32px; line-height:32px; color:#ffffff;}
                .region-menu ul li a:hover,
                .region-menu ul li a.active-trail { background:#ffffff; color:#ED595E;}

          /* Large */
            .large .region-menu::before { display:none;}
            .large .region-menu { position:static; margin:0 0 20px; width:auto;}
            .large .region-menu h2 { padding:10px; width:auto; min-height:auto; line-height:16px; text-align:left; cursor:default;}
              .large .region-menu h2 .fa { margin:0 8px 0; width:auto;}
            .large .region-menu:hover h2,
            .large .region-menu.active-trail h2 {}

            .large .region-menu ul { overflow:hidden; position:static; padding:0px; max-width:9999px; background:transparent; 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.active-trail ul li:hover a,
                .large .region-menu.active-trail ul li a.active-trail { background:#ed595e; color:#ffffff;}
                



                .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:60px 0 0 0; width:100%; min-height:100%; background:#f8f8f8; min-height:100%;}
        .zone-content.padding-left { padding-left:110px;}
        .zone-content.padding-left-large { padding-left:200px;}
        .zone-content.padding-right { padding-right:110px;}
        .zone-content.padding-right-large { padding-right:200px;} */

          .region-content { display:block; margin:20px;}
            .region-content .block-content-body { padding:10px; background:#ffffff; overflow:hidden;}
        

        /* Wrapper colums */
        .wrapper-colums { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-moz-flex; display:-webkit-flex; display:flex; flex-flow:row wrap;}
        .wrapper-colums.center { justify-content:center; }
          .wrapper-colums .block-colums { margin:10px; }
          .wrapper-colums .block-colums-1 { width:200px;}
          .wrapper-colums .block-colums-2 { width:300px;}
          .wrapper-colums .block-colums-3 { width:400px;}
          .wrapper-colums .block-colums-4 { width:500px;}
          .wrapper-colums .block-colums-5 { width:600px;}
          .wrapper-colums .block-colums-6 { width:700px;}
          .wrapper-colums .block-colums-7 { width:800px;}
          .wrapper-colums .block-colums-8 { width:900px;}
          .wrapper-colums .block-colums-full { width:960px;}

          .wrapper-colums .alpha { margin-left:0;}
          .wrapper-colums .omega { margin-right:0;}

          .wrapper-colums .block-content-body { order:1; flex:1; margin-right:20px;}
          .wrapper-colums .block-content-side { order:2; width:200px;}

          #region-cover { margin:0 0 20px; }
            #region-cover p { margin:20px; padding:0 0 20px; 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,
    #region-main-menu li a,
    .region-menu h2,
    .field-name-body h2 {
      font-family:'robotoregular', sans-serif;
      font-weight:normal;
    }

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

    /* Black */
      .stat-item .stat-item-box,
      .stat-item .stat-item-box-full,
      .stat-chiffre .stat-chiffre-item,
      .loyer-retard-wrapper .loyer-retard-stat span,
      text.percentage {
        font-family:'robotoblack', sans-serif;
        font-weight:normal;
      }

    
    /*FontAwesome*/
    div.messages::before,
    .client-card-select .client-card-visuel::before,
    .item-radio-etat-lieux label::before {
      font-family:'fontawesome';
      font-weight:normal;
    }


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

    a,
    .region-menu h2,
    #region-main-menu>li>ul,
    .region-menu::before,
    #region-admin-links>li>ul,
    #notification-link::before,
    #notification-link ul,
    .region-menu ul,
    ul.quick-action li,
    div.messages,
    div.messages-close,
    .item-radio-etat-lieux label::before {
    -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;
       } */


  /**
   * SHADOW
   *************************************/
    .region-login,    
    #region-main-menu>li>ul,
    #notification-link ul,
    .region-menu ul {
      -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.5);
      -webkit-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{
      -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
      -webkit-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);
    }


  /**
   * BORDER RADIUS
   *************************************/
    h2.block-title {
      border-radius:4px 4px 0 0;
      -moz-border-radius:4px 4px 0 0;
      -webkit-border-radius:4px 4px 0 0;
      -o-border-radius:4px 4px 0 0;
      -ms-border-radius:4px 4px 0 0;
    }

  /**
   * 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;}

  /**
   * Content-action-wrapper
   *************************************/
    .content-action-wrapper { text-align:right; }



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


  /**
   * Texte class
   *************************************/
   .red { color:rgb(237,89,94);}
   .green { color:rgb(113,175,66);}



  /**
   * MESSAGES
    *************************************/
    div.messages { position:relative; margin:0 0 10px; padding:10px 20px;}
      
      div.messages-close { position:absolute; top:0; right:0; width:30px; height:30px; line-height:30px; text-align:center; color:#ffffff; cursor:pointer;}
        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.success div.messages-close:hover { color:rgb(0, 189, 157); background:#ffffff; }

      div.info { background-color:rgb(52,152,219);}
        div.info::before { content:'\f129';}
        div.info div.messages-close:hover { color:rgb(52,152,219); background:#ffffff; }

      div.error { background-color:rgb(254, 94, 120);}
        div.error::before { content:'\f00d';}
        div.error div.messages-close:hover { color:rgb(254, 94, 120); background:#ffffff; }

      div.warning { background-color:rgb(221,197,35);}
        div.warning::before { content:'\f12a'; color:#694900;}
        div.warning div.messages-close:hover { color:rgb(221,197,35); background:#ffffff; }
        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(237,89,94, 0.55); cursor:pointer;}
      #scroll-top .fa { font-size:18px; line-height:50px;}
    #scroll-top:hover { background:rgba(237,89,94, 0.9); }
    #scroll-top.show { bottom:20px;}

  /**
   * BREADCRUMBS
    *************************************/
    .breadcrumb { margin:0 0 20px; padding:0 0 10px; border-bottom:1px solid #ebebeb;}
    .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;}


  /**
   * BLOCK TITLE
   ************************************/
    h2.block-title { position:relative; display:inline-block; margin:0 0 20px; padding:0 20px; min-width:200px; box-sizing:border-box; height:60px; line-height:60px; font-size:18px; background:#383f56; color:#ffffff;}
      h2.block-title::after { content:''; position:absolute; left:10px; bottom:-10px; width:0; height:0; border-style:solid; border-width:10px 7px 0 7px; border-color:#383f56 transparent transparent transparent;}
      h2.block-title .fa { }


  /**
   * 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 #e5e5e5;}
          #notification-link ul li a { display:block; }

      #notification-link:hover::before { border-width:0 7.5px 10px 7.5px;}
      #notification-link:hover ul { padding:2px;max-height:9999px;}
        #notification-link ul li:hover { background:#fe5e78; border-color:#fe5e78;}
          #notification-link ul li a:hover { color:#ffffff;}


  /**
   *  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;}


  /**
   * BTN
   *************************************/
    .btn { display:inline-block; padding:0 15px; line-height:42px; background:rgb(237,89,94); color:#ffffff!important; border:0; cursor:pointer; }
      .btn span { color:#ffffff;}
    .btn:hover { background:rgba(237,89,94,0.8);}

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

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

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

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

    .btn-green { background:rgb(113,175,66);}
      .btn-green:hover { background:rgba(113,175,66,0.8);}

    .btn-blue { background:rgb(52,152,219);}
      .btn-blue:hover { background:rgba(52,152,219,0.8);}

    .btn-yellow { background:rgb(179, 156, 0);}
      .btn-yellow:hover { background:rgba(179, 156, 0,0.8);}

    .btn-grey { background:rgb(49, 49, 49);}
      .btn-grey:hover { background:rgba(49, 49, 49, 0.8);}


  /**
   * DATATABLE WRAPPER
   *************************************/
    .datatable-wrapper { position:relative; }
      .datatable-action-wrapper { text-align:right; }
      .datatable-filtre-wrapper { position:absolute; top:50px; left:500px;}
      .dataTables_length { padding:10px 0;}


  /**
   * CLIENT CARD
   *************************************/
    .client-card { box-sizing:border-box; padding:10px; border:2px solid #e5e5e5;}
      .client-card h3 { position:relative; width:500px; text-transform:initial;}
        .client-card h3 small { display:block; font-size:0.5em;}
        .client-card h3 .btn { position:absolute; top:0; right:0;}

      .client-card-coordonnes,
      .client-card-adresse { display:inline-block; box-sizing:border-box; width:250px; height:100px; line-height:20px;}

      .client-card-coordonnes {}
      .client-card-adresse {}
    //   .client-card .client-card-visuel { position:relative; float:left; box-sizing:border-box; padding:15px; width:200px; height:300px; text-align:center; font-size:16px; color:#ffffff; background:url('../images/bg_quicks-actions.png') center center repeat #989989;}
    //     .client-card .client-card-visuel .client-icon { display:inline-block; width:80px; height:80px; line-height:80px; background:#ffffff; border-radius:50%; font-size:40px;}
    //     .client-card .client-card-visuel .client-type {}
    //     .client-card .client-card-visuel .client-id {}
    //     .client-card .client-card-visuel .btn { position:absolute; left:20px; bottom:20px; width:130px;}

    //   .client-card .client-card-infos { float:left; box-sizing:border-box; padding:20px 0 0 30px; width:300px; height:300px;}
    //   .client-card .client-card-action { }

    // .client-card-select {}
    //   .client-card-select .client-card-visuel { position:relative;}
    //     .client-card-select .client-card-visuel::before { content:'\f00c'; position:absolute; top:20px; right:-15px; width:30px; height:30px; line-height:30px; text-align:center; font-size:20px; color:#ffffff; border:4px solid #ffffff; border-radius:50%; background:rgb(0,189,157);}
      


  /**
   * UPLOAD DOCUMENTS
   *************************************/
    .upload-documents { background:#fff; padding:10px; margin:10px 0;}
      .upload-documents .upload-documents-filtre-wrapper { padding:4px;}
      .upload-documents .upload-documents-input { margin:0 0 10px; padding:4px; }
        .upload-documents .upload-documents-input input { cursor:pointer;}
      
        .upload-prototype-add { margin:20px 0 0;}
        .upload-document-voir { float:left;}
        .prototype-delete {float:right;}


  /**
   * CONTACT LOAD
   **************************************/
    .upload-contacts {}

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

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

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



  /**
   * QUICK ACTIONS
   *************************************/
    ul.quick-action { display:flex;}
      ul.quick-action li { width:300px; height:90px; background:url('../images/bg_quicks-actions.png') center center repeat #989989; }
      ul.quick-action li:hover { opacity:0.8;}
        ul.quick-action li a { display:block; padding:0 30px; height:100%; line-height:90px; color:#ffffff; font-size:20px; text-align:center;}
        ul.quick-action li a:hover {}
          ul.quick-action li a .fa { margin:0 15px 0 0; width:40px; height:40px; text-align:center; line-height:40px; color:#989989; background:rgba(250,250,250,0.75); border-radius:50%;}
          ul.quick-action li:hover a .fa { background:rgba(250,250,250,1);}
        ul.quick-action li a div.quick-action-visuel {  }


  /**
   * STAT-ITEM
   *************************************/
    .stat-item { display:inline-block; box-sizing:border-box; padding:10px; 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-CHIFFRE
   *************************************/
    .stat-chiffre { display:inline-block; box-sizing:border-box; /* border-left:4px solid #ed595e; */ padding:10px; width:100%; background:#ffffff; height: 100%;}
      .stat-chiffre h2 { position:relative; margin:0 0 10px 0; line-height:40px; font-size:18px; color:#98998b;}
        .stat-chiffre h2 .fa { position:absolute; top:0; right:0; font-size:40px; color:#c5c5c5;}
      .stat-chiffre .stat-chiffre-body,
      .stat-chiffre .stat-chiffre-item { display:inline-block; width:136px; line-height:30px;}
      .stat-chiffre .stat-chiffre-item .lastYear { font-size: 12px;}
      .stat-chiffre .stat-chiffre-body { }
      .stat-chiffre .stat-chiffre-item { text-align:center; font-size:18px; color:#4d4d4d;}


  /**
   * LOYER EN RETAR
   **************************************/
    .loyer-retard-wrapper { padding:10px; background:#ffffff;}
      .loyer-retard-wrapper .loyer-retard-stat { margin:10px; text-align:right; font-size:18px; color:#98998b;}
        .loyer-retard-wrapper .loyer-retard-stat span { font-size:24px; color:#4d4d4d;}


 /**
  * 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:#f8f8f8; border:1px solid #ebebeb;}
      .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 .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 #e5e5e5;}
          .region-login form input { box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-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"] {}

        .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:rgb(237,89,94); border:0; cursor:pointer;}




  /**
   * Formulaire d'etat des lieux
   ******************************************/
    .item-radio-etat-lieux { display:flex; justify-content:center;}
      .item-radio-etat-lieux input { display:none;}
      .item-radio-etat-lieux label { position:relative; display:block; margin:3px; width:50px; height:50px; background:#f5f5f5; text-align:center; font-size:10px; line-height:118px; cursor:pointer;}
        .item-radio-etat-lieux label::before { content:"\f00c"; position:absolute; top:0; left:0; display:block; width:100%; height:100%; line-height:50px; text-align:center; font-size:0px; color:#ffffff;}
        .item-radio-etat-lieux label.checked::before { font-size:30px;}

      
      .item-radio-etat-lieux label:nth-child(2) { display:none;}

      .item-radio-etat-lieux label:nth-child(4) { background:rgba(4,199,103, 0.7);}
      .item-radio-etat-lieux label:nth-child(4):hover,
      .item-radio-etat-lieux label:nth-child(4).checked { background:#04C767;}
      
      .item-radio-etat-lieux label:nth-child(6) { background:rgba(243,186,92, 0.7);}
      .item-radio-etat-lieux label:nth-child(6):hover,
      .item-radio-etat-lieux label:nth-child(6).checked { background:#F3BA5C;}
      
      .item-radio-etat-lieux label:nth-child(8) { background:rgba(231, 76, 60, 0.7);}
      .item-radio-etat-lieux label:nth-child(8):hover,
      .item-radio-etat-lieux label:nth-child(8).checked { background:#e74c3c;}
      
      .item-radio-etat-lieux label:nth-child(10) { background:rgba(52, 73, 94, 0.7);}
      .item-radio-etat-lieux label:nth-child(10):hover,
      .item-radio-etat-lieux label:nth-child(10).checked { background:#34495e;}

  
  /**
   * Formulaire des boxes
   ******************************************/
  .small-input{
    width:93px !important;
  }

  
  /**
   * FILTRES
   *************************************/
    div.info-wrapper { margin:0 0 20px 0; padding:10px; background:#f5f5f5;}
      div.info-wrapper h2 { margin:0 0 5px 0; line-height:32px;}

    /** Legende */
      ul.caption-list { margin:0; padding:0;}
        li.caption-item { float:left; margin:0 10px 0 0; padding:0; height:32px; line-height:32px;}
          li.caption-item.caption-libelle { margin:0 20px 0 0; min-width:90px; font-weight:700; line-height:32px; font-size:14px;}
            li.caption-item.caption-libelle>.fa { height:32px; line-height:32px; font-size:20px;}
          li.caption-item>div.caption-row { display:inline-block; padding:0 10px; min-width:50px; height:32px; line-height:32px; text-align:center;}


          /* Code */
          li.caption-item>div.caption-row { color:#ffffff; background:rgba(44,182,186, 1);}
    
    /** Filter */
      .filter-wrapper {}
        .filter-wrapper h3 { line-height:30px;}
        .filter-wrapper ul.filter-list { margin:0; padding:0;}
          .filter-wrapper ul.filter-list li.filter-item { float:left; margin:0 50px 0 0; padding:0; height:32px; line-height:32px; }
          .filter-wrapper ul.filter-list li.filter-item label { margin:0 8px 0 0; text-transform:inherit;}