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

.dialogue-zone .empty{
  text-align: center;
  opacity: 0.7;
  margin-top: 20px;
}

/**
 * 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: #3b434c;
}

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:hover>a,
#region-admin-links>li>a:hover,
#region-admin-links>li>a.active-trail {
  color: #3641b7
    /*#3AB6C2*/
  ;
}

#region-admin-links>li>ul {
  position: absolute;
  top: 55px;
  left: 0;
  width: 150px;
  max-height: 0;
  background:
    /*#141f38*/
    #3C444B;
  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: #3AB6C2;
}

/* User */
li#user-link {}

li#user-link .gradient-default {
  padding: 2px;
  border-radius: 18px;
  background: #fff;
}

li#user-link a {
  position: relative;
  padding: 0 10px 0 40px;
  border-radius: 18px;
  background: #fff;
}

li#user-link a div.user-avatar {
  position: absolute;
  top: 1px;
  left: 1px;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: #E4E6E7;
  color: #333333;
}

li#user-link a div.user-avatar .fa {
  line-height: 30px;
  width: 30px;
  text-align: center;
}

li#user-link a:hover,
li#user-link:hover a {
  color:
    /*#3C444B*/
    #3641b7;
}

/* 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: #E4E6E7;
  /* 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: 16px;
}

.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;
  border-radius: 4px;
}

.large .region-menu h2 {
  margin: 0;
  padding: 10px;
  width: auto;
  min-height: auto;
  line-height: 16px;
  color: #FFF;
  border-radius: 8px 8px 0 0;
  text-align: left;
  cursor: default;
  background: #006073
}

.large .region-menu h2 .fa {
  margin: 0 8px 0;
  width: auto;
  color: #FFF;
}

.large .region-menu:hover h2,
.large .region-menu.active-trail h2 {
  margin: 0;
  background: #006073;
}

.large .region-menu ul {
  overflow: hidden;
  position: static;
  padding: 0px;
  max-width: 9999px;
  background: #ffffff;
  border: 0px;
}

.large .region-menu ul {
  border-radius: 0 0 8px 8px;
}

.large .region-menu:hover ul,
.large .region-menu.active-trail ul {
  background: #ffffff;
}

.large .region-menu ul li {
  padding: 0 10px;
  width: auto;
  margin: 2px 0;
}

.large .region-menu ul li a {
  color: #616177;
  border-radius: 4px;
}

.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: rgba(58, 183, 194, 1);
  color: #ffffff;
}

/* menu reduce */
.large.reduce .region-menu h2 {
  cursor: pointer;
}

/*.large.reduce .region-menu h2:hover { color:#FFF;}*/
.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: 90%;
  min-height: 100%;
  /* min-width: 500px; */
  background: #E4E6E7;
  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;
  border-radius: 4px;
}

.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,
.large .region-menu h2 {
  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,
.gradient-default,
.region-menu h2,
#region-main-menu>li>ul,
.region-menu::before,
#notification-link::before,
#notification-link ul,
.region-menu ul,
img,
#scroll-top,
.stat-item h2 {
  -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-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);
}

.region-login {
  -moz-box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.15);
  -o-box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.15);
  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);
}

/**
 * GRADIENT
 *************************************/
.gradient-default,
li#user-link:hover .gradient-default,
h1#page-title::before,
#scroll-top:hover {
  background: rgba(54, 65, 183, 1);
  background: -moz-linear-gradient(45deg, rgba(54, 65, 183, 1) 0%, rgba(58, 183, 194, 1) 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(54, 65, 183, 1)), color-stop(100%, rgba(58, 183, 194, 1)));
  background: -webkit-linear-gradient(45deg, rgba(54, 65, 183, 1) 0%, rgba(58, 183, 194, 1) 100%);
  background: -o-linear-gradient(45deg, rgba(54, 65, 183, 1) 0%, rgba(58, 183, 194, 1) 100%);
  background: -ms-linear-gradient(45deg, rgba(54, 65, 183, 1) 0%, rgba(58, 183, 194, 1) 100%);
  background: linear-gradient(45deg, rgba(54, 65, 183, 1) 0%, rgba(58, 183, 194, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3641b7', endColorstr='#3ab7c2', GradientType=1);
}


.text-gradient-default {
  background: -webkit-linear-gradient(rgba(54, 65, 183, 1), rgba(58, 183, 194, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/**
 * CLEARFIX
 *************************************/
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: "";
  clear: both;
  height: 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;
}

.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);
  text-align: left;
}

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


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


/**
 * WRAPPER COLOMNS
 *************************************/
.wrapper-colomns {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  flex-flow: row wrap;
}

.wrapper-colomns.center {
  justify-content: center;
}

.wrapper-colomns .block-colomns {
  margin: 10px;
}

/* .wrapper-colomns .block-colomns-1 { width:200px;}
        .wrapper-colomns .block-colomns-2 { width:300px;}
        .wrapper-colomns .block-colomns-3 { width:400px;}
        .wrapper-colomns .block-colomns-4 { width:500px;}
        .wrapper-colomns .block-colomns-5 { width:600px;}
        .wrapper-colomns .block-colomns-6 { width:700px;}
        .wrapper-colomns .block-colomns-7 { width:800px;}
        .wrapper-colomns .block-colomns-8 { width:940px;} */

.wrapper-colomns .block-colomns-1 {
  width: 60px;
}

.wrapper-colomns .block-colomns-2 {
  width: 140px;
}

.wrapper-colomns .block-colomns-3 {
  width: 220px;
}

.wrapper-colomns .block-colomns-4 {
  width: 300px;
}

.wrapper-colomns .block-colomns-5 {
  width: 380px;
}

.wrapper-colomns .block-colomns-6 {
  width: 460px;
}

.wrapper-colomns .block-colomns-7 {
  width: 540px;
}

.wrapper-colomns .block-colomns-8 {
  width: 620px;
}

.wrapper-colomns .block-colomns-9 {
  width: 700px;
}

.wrapper-colomns .block-colomns-10 {
  width: 780px;
}

.wrapper-colomns .block-colomns-11 {
  width: 860px;
}

.wrapper-colomns .block-colomns-12 {
  width: 940px;
}

.wrapper-colomns .block-colomns-full {
  width: 960px;
}

/* Prefix */
.wrapper-colomns .block-colomns-prefix-1 {
  margin: 10px 10px 10px 70px;
}

.wrapper-colomns .block-colomns-prefix-2 {
  margin: 10px 10px 10px 150px;
}

.wrapper-colomns .block-colomns-prefix-3 {
  margin: 10px 10px 10px 230px;
}

.wrapper-colomns .block-colomns-prefix-4 {
  margin: 10px 10px 10px 310px;
}

.wrapper-colomns .block-colomns-prefix-5 {
  margin: 10px 10px 10px 390px;
}

.wrapper-colomns .block-colomns-prefix-6 {
  margin: 10px 10px 10px 470px;
}

.wrapper-colomns .block-colomns-prefix-7 {
  margin: 10px 10px 10px 550px;
}

.wrapper-colomns .block-colomns-prefix-8 {
  margin: 10px 10px 10px 630px;
}

.wrapper-colomns .block-colomns-prefix-9 {
  margin: 10px 10px 10px 710px;
}

.wrapper-colomns .block-colomns-prefix-10 {
  margin: 10px 10px 10px 790px;
}

.wrapper-colomns .block-colomns-prefix-11 {
  margin: 10px 10px 10px 870px;
}


.wrapper-colomns .block-colomns .block-colomns {
  margin-top: 0;
}

.wrapper-colomns .alpha {
  margin-left: 0;
}

.wrapper-colomns .omega {
  margin-right: 0;
}
}


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


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


/**
 * 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-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-valide-cc {
  background: #f8b83c;
}

.btn-valide-cc:hover {
  background: #c3912f;
}

/* .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(49, 189, 112)
    /*rgb(113,175,66)*/
  ;
}

.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 { background:url('images/layout/bg_logo_login.svg') bottom right no-repeat transparent; background-size:400px;}*/

body#login,
.body_security_client {
  background: url('images/layout/background_connexion_90.png') no-repeat #FFF;
  background-size: 100% 100%;
  text-align: center;
}

.section-login {
  display: flex;
  justify-content: center;
}

/*.region-login { box-sizing:border-box; margin-top:50px; padding:20px; width:400px; background:#F5F6FA; border-radius:4px;}*/
.region-login {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  padding: 20px;
  width: 400px;
  background: #FFF;
  /*border-radius:10px;**/
  border: 1px solid #0000001a;
  border-top: 6px solid #006074;
  border-bottom: 6px solid #006074
}

.region-login h1 {
  margin: 0 0 20px;
  font-size: 20px;
  text-transform: uppercase;
  color: #006074
}

.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: #006074;
  color: #FFF;
  border: none;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.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"] {
  border-radius: 10px;
  border: 1px solid #91908C6a;
}

.region-login form input[type="password"] {
  border-radius: 10px;
  border: 1px solid #91908C6a
}

.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;
  border-radius: 10px;
}

.region-login button:hover {
  background: rgba(39, 154, 173, 0.8);
}



#loader-page {
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  background: rgba(85, 85, 85, 0.85);
}

#loader-page #loader-page-content {
  position: fixed;
  z-index: 9;
  top: 50%;
  left: 50%;
  display: block;
  padding: 20px;
  width: 300px;
  height: auto;
  color: #FFF;
  background: #afafaf;
  text-align: center;
  border-radius: 3px;
  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;
  }
}

/**
 * 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: 100px;
  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: #ed396d;
  color: #fff;
}

.stat-item.red h2 .fa {
  color: #bb2d56;
}

.stat-item.green h2 {
  background: #4AB845;
  color: #fff;
}

.stat-item.green h2 .fa {
  color: #fff;
}

.stat-item.yellow a h2 {
  background: #f8b83c;
}

.stat-item.yellow h2 .fa {
  color: #c3912f;
}

/* .stat-item.pink h2 { background:linear-gradient(45deg, rgb(255, 32, 93) 0%, rgb(156, 0, 43) 100%);} */
.stat-item.pink a h2 {
  background: #FF205D;
}

.stat-item.pink h2 .fa {
  color: #fff;
}

.stat-item.blue h2 {
  background: #2793c4;
}

.stat-item.blue h2 .fa {
  color: #1f749a;
}

.stat-item.turquoise h2 {
  background: #3AB6C2;
  color: #fff;
}

.stat-item.turquoise h2 .fa {
  /*color:#1f646b;*/
  color: #fff;
}

.stat-item.purple h2 {
  background: #3640b7;
  color: #fff;
}

.stat-item.purple h2 .fa {
  color: #fff;
}

.stat-item.blue-custom h2 {
  background: #49798C;
  color: #fff;
}

.stat-item.blue-custom h2 .fa {
  color: #fff;
}

.stat-item.yellow-custom h2 {
  background: #BF7E04;
  color: #fff;
}

.stat-item.yellow-custom h2 .fa {
  color: #fff;
}

.stat-item.marron h2 {
  background: #735c3f;
  color: #fff;
}

.stat-item.marron h2 .fa {
  color: #fff;
}




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

.upload-contacts.contact-load {
  margin: 0 0 10px 0;
}

.upload-contacts.contact-load.active {
  background: lightgray;
}

.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;
  overflow: initial;
}



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

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


/**
 * ELEMENTS CACHES  
 **********************************/
.hidden-elt {
  display: none;
}



/**
  * CUSTOM CSS
  */

#block_left {
  display: block;
}

.section-header {
  background: #E4E6E7;
}

li.os-expert-link {
  display: none;
}

span.icon {
  color: #026073;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 3em;
}

.topnav>span.icon:hover {
  background: #ddd;
}

.topnav>span.icon:active {
  background: #026073;
  color: white;
}

.topnav span.icon {
  display: none;
}

@media screen and (max-width: 720px) {

  .topnav {
    overflow: hidden;
  }

  .topnav ul li.os-expert-link a {
    color: #FFF;
  }

  .topnav ul li.os-expert-link {
    display: block;
    background: #026073;
    height: 35px;
    margin-top: 15px;
    line-height: 35px;
    font-size: 1.5em;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
  }

  .topnav ul li.os-expert-link:hover {
    background: #006e84;
  }

  .topnav>span.icon {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
  }

  .topnav.responsive {
    /* position: absolute; */
    left: 0;
    right: 0;
    height: 195px;
    width: 500px;
    min-width: 100%;
    background: #E4E6E7;
  }

  .topnav.responsive span.icon {
    float: none;
    display: block;
    text-align: center;
  }

  .base-menu li {
    display: block
  }

  #region-admin-links {
    display: flex;
    float: none;
  }

  li#user-link .gradient-default {
    padding: 2px;
    border-radius: 18px;
    background: #fff;
    width: 200px;
    margin-left: -37px;
  }

  .region-content {
    margin: 0;
  }

  #block_left {
    display: none;
  }

  .rendez-vous-agenda-expert .agenda-expert .agenda-expert-horaires span.agenda-expert-horaire::after {
    min-width: 79vw !important;
  }
}



/***********************************************************/
/*                  CHECKBOX ACTIF/INACTIF                 */
/***********************************************************/
/*               DOCUMENTATION OFFICIELLE LOL              */
/***********************************************************/
/*  EXEMPLE DANS UN DATATABLE  
/*    let html = '';
/*			// CHECKED == FALSE par defaut inversion des couleurs libre à vous de remettre dans le bon ordre
/*			html += '<span class="checkActif">';
/*				if(full[la_data]){
/*          html += '<input type="checkbox" class="js-act-expert" data-actif="actif" data-id="'+full[0]+'" id="inactif_'+full[0]+'"><label for="inactif_'+full[0]+'"></label>'                
/*        }else{
/*          html += '<input type="checkbox" class="js-act-expert" data-actif="non-actif" data-id="'+full[0]+'" checked id="actif_'+full[0]+'"><label for="actif_'+full[0]+'"></label>'                         
/*        }
/*      html += '</span>';
/*  
/*  CHECK EN AJAX
/*  <script>
/*  $(document).on('change','.js-act-expert', function(e){
/*    let actif = $(this).data('actif'),
/*        message = '';
/*    if(actif == 'non-actif'){
/*      message = 'Êtes-vous certain de vouloir activer cet expert ? ';
/*    } else {
/*      message = 'Êtes-vous certain de vouloir désactiver cet expert ? ';
/*    }
/*
/*    if (confirm(message)) {    
/*      let id     = $(this).data('id');
/*        $.ajax({
/*          type        : 'POST',
/*          url         : Routing.generate('projet_backend_expert_desactiver'),
/*          data        : {'id': id},
/*          dataType    : "json",
/*          success     : (response) =>
/*            {
/*              tabListeExpert.draw();
/*            }
/*          });
/*     }else{
/* /*POUR STOPPER L'ACTION DE CHANGEMENT DE STYLE CSS AU CLICK                
/*       let verifCheck = $(this).attr('checked');             
/*       if(typeof verifCheck != 'undefined' && verifCheck != false){
/*        $(this).prop('checked', true)
/*       }else{
/*        $(this).removeAttr('checked')
/*        $(this).prop('checked', false)
/*       }
/*     }
/*    return false;
/*   });
/*  </script>
/**/
.checkChoice{
  width: 70px;
}
.checkActif {
  width: 60px;
}
.checkChoice,
.checkActif {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  position: relative;
  cursor: pointer;
  line-height: 1;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0
}

.checkChoice label,
.checkActif label {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #378b2c;
  border-radius: 5px;
  font-weight: bold;
  color: #FFF;
  -webkit-transition: background 0.3s, text-indent 0.3s;
  -moz-transition: background 0.3s, text-indent 0.3s;
  -o-transition: background 0.3s, text-indent 0.3s;
  transition: background 0.3s, text-indent 0.3s;
  text-indent: 27px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}

.checkActif label:after {
  content: 'Actif';
}
.checkChoice label:after {
  content: 'Choisi';
}

.checkChoice label:after,
.checkActif label:after {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  font-size: 12px;
  color: #E4E6E7;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.35);
  z-index: 1;
}

.checkChoice label:before,
.checkActif label:before {
  content: '';
  width: 20px;
  height: 13px;
  border-radius: 4px;
  background: #E4E6E7;
  border: 1px solid #FFFFFF3a;
  position: absolute;
  z-index: 2;
  top: 2px;
  left: 1px;
  display: block;
  -webkit-transition: left 0.3s;
  -moz-transition: left 0.3s;
  -o-transition: left 0.3s;
  transition: left 0.3s;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

.checkChoice input:checked+label,
.checkActif input:checked+label {
  background: #cd3c3c;
  /*red*/
  text-indent: 8px;
}

.checkActif input:checked+label:after {
  content: 'Inactif';
}
.checkChoice input:checked+label:after {
  content: 'Non';
}
.checkChoice input:checked+label:after,
.checkActif input:checked+label:after {
  color: #E4E6E7;
  left: -4px;
  font-size: 10px;
  display: flex;
}

.checkActif input:checked+label:before {
  left: 37px;
}

.checkChoice input:checked+label:before {
  left: 45px;
}



@keyframes effectPopup {
  0% {
    transform: rotate(0);
    transform-origin: bottom left;
    animation-timing-function: ease-in-out;
    width: 0;
  }

  20%,
  60% {
    transform: rotate(360deg);
    transform-origin: bottom left;
    animation-timing-function: ease-in-out;
  }

  40% {
    transform-origin: bottom left;
    animation-timing-function: ease-in-out;
  }

  80% {
    opacity: 1;
    transform-origin: bottom left;
    animation-timing-function: ease-in-out;
  }

  100% {
    transform: translateY(0);
    width: 100%
  }
}

#message-info .effect-popup {
  animation-duration: 2s;
  animation-name: effectPopup;
  margin-top: 250px;
  border-radius: 20px;
}

#message-info .popup-content {
  border: 1px solid #0000001a;
  border-top: 6px solid #006074;
  border-bottom: 6px solid #006074;
}

#message-info .close {
  border-bottom-left-radius: 20px;
  position: absolute;
  top: -8px;
  right: -1px;
}

#message-info h2 {
  display: flex;
  justify-content: space-between;
  width: 90%;
  border-radius: 12px;
  background: #006074;
  color: white;
  text-align: center;
  font-size: 1.5em;
  padding: 8px 0;
  margin: 0 auto;
  border-bottom: 0
}

#message-info .blink {
  animation: blink 1s linear infinite;
}

#message-info .blink:first-child {
  margin-left: 15px;
}

#message-info .blink:last-child {
  margin-right: 15px;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.btn-search {
  display: inline-block;
  padding: 0 11px;
  line-height: 30px;
  border: 1px solid #707171;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background: #026073 !important;
  color: #ffffff;
  cursor: pointer;
  height:30px;
  margin-top:0;
}

.btn-search:hover {
  background: #01778e !important;
}

input[type="text"]{border:2px solid #FFF}

/** JS CONFIRM CUSTOM */
.jconfirm-content {
  min-height: 50px
}
.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button, .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
  font-size: 12px !important;
}

/* MediaQuery : Module visite */

  @media only screen and (max-width: 600px) {

    /* Header retirer le "Bienvue XX" */
      li#user-link{
        display: none;
      }

      #myTopnav{
        width: 100vw !important;
      }

    /* Module visite */
      .detail-client, .form-document-client{width: 100% !important;}

      h1#page-title{width: 70% !important; font-size: 15px !important;}
      i.info2{height: fit-content !important;}

      .wrapper-detail-client{font-size: 11px !important;}

      .ul-link-action{position: inherit !important; margin-bottom: 15px; margin-left: 22px; flex-wrap: wrap; right: 10px !important;}
      .ul-link-action a{width: 100%; margin: 0 0 10px 0 !important; text-align: center; }
      .ul-link-action button{width: 100%; margin: 0 0 10px 0 !important;}

      .tabs-visite{display: flex; flex-direction: column; height: fit-content !important;}

      .btn-search.btn-recherche.{width: 40px; margin-left: 18px;}
      .input-recherche{width: 87% !important; text-align: left !important;}
      .filter-wrapper ul.filter-list li.filter-item{width: 100%; display: flex; flex-wrap: wrap ;}

      .tabs span[data-popup="add_candidat"], .tabs span[data-popup="nouveau_candidat"]{width: 275px; text-align: center; margin: 15px auto 0 auto;}

      .legend-visite{display: flex; flex-wrap: wrap; justify-content: flex-start;}
      .legend-visite li.filter-item{ width: fit-content !important;}
      .legend-visite .ml-50{margin-left: 0 !important;}
      .legend-visite .mr-10{margin-right: 0 !important;}

      #region-branding{width: 90px;}
      #region-branding a{display: none;}

      .settings-header{white-space: nowrap; overflow: hidden; }
      .settings-header span { text-indent: 0; }

      #region-admin-links>li#notification-link{position: absolute; right: 75px; top: 5px;}
      #region-admin-links>li.logout{position: absolute; right: 5px;}

      .flex-wrap{flex-wrap: wrap;}

      .form-document-client{width: 100% !important; padding: 0px !important;}

      .dialogue-wrapper{display: flex; flex-wrap: wrap; flex-direction: column;}
      .dialogue-wrapper .dialogue-zone{width: 95% !important; min-height: 250px;}
      .dialogue-wrapper .input-zone {width: 95% !important; margin-top: 10px; text-align: left !important;}


      .msg-img{height: 30px !important; width: 42px !important;}
      .left-msg .msg-img .img .fa{font-size: 20px !important; line-height: 30px !important;}
      .right-msg .msg-img .img .fa{font-size: 20px !important; line-height: 30px !important;}

      .popup .popup-wrapper{ min-width: 0px !important;}

      #liste-document ul.js-clear-proto #galerie_documents{flex-direction: column; align-items: center;}
      #liste-document ul.js-clear-proto .file-item-add{margin-top: 10px;}

      .dtr-details li {text-align: left !important;}
      .dtr-details li .js-btn-doc-expert{width: 50px !important;}

      #form_compte_rendu_expert input {width: 100%;min-width: 0px!important;}
      #form_compte_rendu_expert .avis_bien label{width: 90% !important;}
      #liste-document .first, #liste-document .last,
      #form_compte_rendu_expert .first,  #form_compte_rendu_expert .last,
      #compte-rendu-expert-wrapper .first, #compte-rendu-expert-wrapper .last,
      #form_edit_candidat .first,  #form_edit_candidat .last {margin-left: 0px !important; margin-right: 0px !important;}

      #compte-rendu-expert-wrapper .first, #compte-rendu-expert-wrapper .last {width: 100% !important;}

      #ajout_candidat .d-flex, #form_edit_candidat .d-flex{flex-wrap: wrap;}
      #ajout_candidat .d-flex .form-item.inline{margin-left: 0px !important; margin-right: 0px !important; min-width: 0px; width: 93% !important;}
      #form_edit_candidat .d-flex .form-item.inline{margin-left: 0px !important; margin-right: 0px !important; min-width: 0px; width: 93% !important;}

      #galerie_photo{display: flex !important; flex-wrap: wrap;}
      .bg-white{width: 100%;}
      .jconfirm-box{width: 90% !important;}
      table.dataTable>tbody>tr.child span.dtr-title{min-width: 130px !important;}


  }