/*
@Author: ThemeMascot
@URL: http://ThemeMascot.com

This is the file where you can add your custom styles to change the look of the
theme. But don't modify style-main.css file.

*/

/****************************************************************************
Nom:	Module Gallery
But:	Styles CSS de la page gallerie photos
***************************************************************************** */
.filter_box {
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 10px;
}

    .single-district {
      background: #daeddc;
      color: #fff;
      border:2px solid #009966;
      display: block;
      text-align: center;
    }
    .single-district h3 {
      font-weight: 700;

    }

    .single-district p {
      font-size: 15px;
      margin: 8px;

    }

    .single-district a {
      color: #000;
      display: block;
      padding: 15px;
    }

    .single-district a:hover {
      color: red;
      text-decoration: none;
    }

/****************************************************************************
Nom:	Module Document
But:	Styles CSS de la page de téléversement de document
***************************************************************************** */

.no-border {
  border: none;
}
.uncheck:valid {
  background: none !important;
}
.uncheck:invalid {
  background: none !important;
}
.document-container {
  padding: 10px;
}
/*Block principale ou l'on glisse les fichiers dedans*/
#dropbox {
  width: 100%;
  height: 100%;
	min-height:675px;
  border: 2px solid #ededed;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  overflow:inherits;
  background-color: #fff;
}
/*Pour faire du drag and drop*/
#dropbox input[type='file'] {
  display: none;
}
/*Block qui apparait lors du drag and drop. Conteneur des informations*/
#dropbox .file {
	position:relative;
	float:left;
  margin-left:2%;
	margin-right:2%;
	margin-top: 10px;
	margin-bottom: 10px;
  width:46%;
  height: 100%;
  max-width: 500px;
  border: 2px solid #ededed;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
#dropbox .file-componement{
	padding:15px;
}
#dropbox .exit-button {
	position:absolute; /*Important pour faire abstraction des autres div*/
	height:100%;
	width:100%;
	margin-left:0%;
}
/*Image du boutton fermer*/
#dropbox .status {
	float:right; /*Alignement à droite*/
	width:20px;
	height:20px;
}
/*********************************/
/*Information du fichier uploader*/
/*********************************/
/*Conteneur des informations: type de fichier, nom, bar d'upload*/
#dropbox .file-info {
  margin-left: 0px;
  height: 100px;
  width: 100%;
  line-height: 25px;
}
/*conteneur de l'icon du type de fichier (ex: pdf)*/
#dropbox .file-icon {
	float: left;/*Alignement à gauche du nom et de la bar d'upload*/
	margin-top: 5px;
	width: 100px;
	height: 100%;
  display:inline-block;
}
/*icon type de fichier*/
#dropbox .img-file {
	max-height: 80%;
}
/*conteneur du nom et de la bar d'upload*/
#dropbox .file-upload {
	position:relative;
	padding-top: 15px;
	padding-bottom: 15px;
	height: 100%;
	margin-left:100px;
}
/*Nom du fichier*/
#dropbox .file-name {
	width: 100%;
	height: 70%;
	/*Permet de rajouter "..." lorsque le nom sort du conteneur*/
	white-space: nowrap;
	word-wrap:break-word;
	overflow:hidden;
  text-overflow:ellipsis;
}
/*Bar d'upload*/
#dropbox .progress-bar {
  display: inline-block;
  height: 20px;
  width: 100%;
  background-color: #5387BA;
  -webkit-box-shadow: inset 0 0 1px #ddd;
  -moz-box-shadow: inset 0 0 1px #ddd;
  -o-box-shadow: inset 0 0 1px #ddd;
  box-shadow: inset 0 0 1px #ddd;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
}
progress::-moz-progress-bar{
    background: #09c;
    -moz-transition: all 1s ease;
}
/*********************************/
/*Choix des propriétés du fichier*/
/*********************************/
/*conteneur des éléments ou l'on peut interagire*/
#dropbox .file-property {
	position:relative;
  margin-top: 20px;
  margin-left: 0px;
  height: 100%;
  width: 100%;
}
/*Groupe d'élément (ex: Sécurité + [Liste])*/
#dropbox .control-group {
	position:relative;
	width: 100%;
}
/*Les label*/
#dropbox .control-label {
	position:relative;
	padding-top:0px;
	text-align: left;
	float: left;
	width:100px;
}
/*les éléments (liste, textarea, etc)*/
#dropbox .big-input {
	position:relative;
	width: 100%;
	height:100%;
}
/*Text area de la déscription*/
#dropbox .Description-textarea {
	position:relative;
	width: 100%;
	height: 100px;
	resize: none; /*Taille inchangeable*/
}
/*Conteneur des élément*/
#dropbox .controls {
	margin-left: 100px;
}


/****************************************************************************
Fin	Module Document
*****************************************************************************

/* pour les cardbox liste documents pdf dans view document */

/* enlever la couleur bleu du lien */
.icon a{
  color: #9E9E9E;
}


.card-box {
  position: relative;
   color: rgba(110, 109, 109, 0.562); 
  /* padding: 0px 10px 40px; */
   margin: 5px 0px; 
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .25rem;
  box-shadow: 0 0 1px 1px #dacfa4;
}
.card-box:hover {
  text-decoration: none;
  color: #1f1e1e;
}

.icon:hover i {
  font-size: 80px;
  transition: 1s;
  -webkit-transition: 1s;
}

.icon:hover  a{
  color: rgba(33, 74, 112, 0.8);
}

.document-edit, .document-delete{
  border: 1px solid rgba(0,0,0,.125);
  width:21px;
}
.document-edit:hover  a{
  color: rgba(4, 133, 90, 0.8);
  background-color: rgba(206, 206, 206, 0.562); 
}

.document-delete:hover  a{
  color: rgba(163, 4, 30, 0.8);
  background-color: rgba(252, 249, 70, 0.562); 
}



.card-box h3 {
  font-size: 27px;
  font-weight: bold;
  margin: 0 0 8px 0;
  white-space: nowrap;
  padding: 0;
  text-align: left;
}
.card-box p {
  font-size: 15px;
}
.card-box .icon {
  position: absolute;
  top: auto;
  bottom: 32px;
  right: 5px;
  z-index: 0;
  font-size: 72px;
  color: rgba(0, 0, 0, 0.15);
}
.card-box .card-box-footer {
  /* position: absolute; */
  left: 0px;
  bottom: 0px;
  text-align: center;
  padding: 3px 0;
  color: rgb(187, 139, 4,0.8);
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  text-decoration: none;
  border-top: 1px solid rgba(0,0,0,.125);
}
.card-box .card-box-header {
  /* position: absolute; */
  left: 0px;
  text-align: center;
  padding: 3px 0;
  color: rgb(187, 139, 4,0.8);
  background: rgba(0, 0, 0, 0.1);
  width: 100%;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.125);
  
}

.card-box:hover .card-box-header{
  background: rgba(0, 0, 0, 0.3);
  color: rgb(255, 255, 255,0.8);
}

.card-box:hover .card-box-footer{
  background: rgba(0, 0, 0, 0.3);
  color: rgb(255, 255, 255,0.8);
}
.bg-blue {
  background-color: #00c0ef !important;
}
.bg-green {
  background-color: #00a65a !important;
}
.bg-orange {
  background-color: #f39c12 !important;
}

.bg-grey-light {
  background-color: #ececec !important;
}

.bg-red {
  background-color: #d9534f !important;
}
/* fin */

/* pour le profil filleul */
.db-social .jumbotron {
  margin: 0;
  background: url(https://bootdey.com/img/Content/flores-amarillas-wallpaper.jpeg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: bottom center;
  color: #fff!important;
  height: 300px;
  position: relative;
  box-shadow: inset 0 0 20px rgba(0,0,0,.3);
  padding: 0;
}

.db-social .head-profile {
  margin-top: -120px;
  border-radius: 4px;
  position: relative;
}

.widget_child {
  background: #fff;
  border-radius: 0;
  border: none;
  margin-bottom: 30px;
}
.has-shadow {
  box-shadow: 0 1px 15px 1px rgba(52,40,104,.08);
}
.db-social .head-profile:before {
  content: "";
  background: rgba(255,255,255,.6);
  height: 20px;
  width: 90%;
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 4px 4px 0 0;
}
.db-social .head-profile:after {
  content: "";
  background: rgba(255,255,255,.3);
  height: 20px;
  width: 80%;
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 4px 4px 0 0;
}
.db-social .widget-body {
  padding: 1rem 1.4rem;
}
.widget-body {
  padding: 1.4rem;
}
.pb-0, .py-0 {
  padding-bottom: 0!important;
}
.db-social .image-default img {
  
  height:120px;
  position: absolute;
  top: -80px;
  left: 0;
  right: 0;
  margin: 0 auto;
  box-shadow: 0 0 0 6px rgba(255,255,255,1);
  z-index: 10;
}
.db-social .infos {
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 1rem;
  line-height: 1.8rem;
}
.db-social h2 {
  color: #2c304d;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: .2rem;
}
.db-social .location {
  color: #aea9c3;
  font-size: 1rem;
}
.db-social .follow .btn {
  padding: 10px 30px;
}
.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.btn-shadow, .btn-shadow a {
  color: #5d5386;
  background-color: #fff;
  border-color: #fff;
  box-shadow: 0 1px 15px 1px rgba(52,40,104,.15);
}
.db-social .head-profile .actions {
  display: inline-block;
  vertical-align: middle;
  margin-left: .5rem;
}
.actions {
  z-index: 999;
  display: block;
}
.actions.dark .dropdown-toggle {
  color: #2c304d;
}
.actions .dropdown-toggle {
  color: #98a8b4;
  background: none;
  border: none;
  padding: 0;
  font-size: 1.7rem;
}
.actions .dropdown-menu {
  border: none;
  min-width: auto;
  font-size: 1rem;
  border-radius: 4px;
  padding: 1.4rem 1.8rem;
  text-align: left;
  box-shadow: 1px 1px 30px rgba(0,0,0,.15);
}

.actions .dropdown-menu .dropdown-item {
  padding: .5rem 0;
}
.actions .dropdown-menu a {
  color: #2c304d;
  font-weight: 500;
}

.db-social .head-profile li:first-child {
  padding-left: 0;
}
.db-social .head-profile li {
  display: inline-block;
  text-align: center;
  padding: 0 1rem;
}
.db-social .head-profile li .counter {
  color: #2c304d;
  font-size: 1.4rem;
  font-weight: 600;
}
.db-social .head-profile li .heading {
  color: #aea9c3;
  font-size: 1rem;
}
/* fin profil filleul

/* profi fileul la tabulation */
#tabs{
	background: #dddcdc;
    /* color: #eee; */
}
#tabs h6.section-title{
    color: #eee;
}

#tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #f3f3f3;
    background-color: transparent;
    border-color: transparent transparent #f3f3f3;
    border-bottom: 4px solid !important;
    font-size: 20px;
    font-weight: bold;
}
#tabs .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: #ff7600;
    font-size: 20px;
}
/* fin profi fileul la tabulation */

.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

  .mini-title {
    font-size: 11px;
    padding-left: 4px;
    color: #b3b3b3;
    font-weight: normal; }
    
    

/*  Tiny Scrollbar CSS  */
/* utilisé dans l'ajout de commentaire à un enfant */
#scrollbar, #scrollbar-one, #scrollbar-two, #scrollbar-three {
  width: 100%;
  clear: both;
  margin: 0; }
  #scrollbar .viewport, #scrollbar-one .viewport, #scrollbar-two .viewport, #scrollbar-three .viewport {
    width: 98%;
    height: 260px;
    overflow: hidden;
    position: relative; }
  #scrollbar .overview, #scrollbar-one .overview, #scrollbar-two .overview, #scrollbar-three .overview {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%; }
  #scrollbar .thumb, #scrollbar-one .thumb, #scrollbar-two .thumb, #scrollbar-three .thumb {
    background-color: #fc8702; }
    #scrollbar .thumb .end, #scrollbar-one .thumb .end, #scrollbar-two .thumb .end, #scrollbar-three .thumb .end {
      background-color: #fc8702; }
  #scrollbar .scrollbar, #scrollbar-one .scrollbar, #scrollbar-two .scrollbar, #scrollbar-three .scrollbar {
    position: relative;
    float: right;
    width: 3px; }
  #scrollbar .track, #scrollbar-one .track, #scrollbar-two .track, #scrollbar-three .track {
    background-color: #cccccc;
    height: 100%;
    width: 3px;
    position: relative;
    padding: 0; }
  #scrollbar .thumb, #scrollbar-one .thumb, #scrollbar-two .thumb, #scrollbar-three .thumb {
    height: 20px;
    width: 8px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0; }
    #scrollbar .thumb .end, #scrollbar-one .thumb .end, #scrollbar-two .thumb .end, #scrollbar-three .thumb .end {
      overflow: hidden;
      height: 5px;
      width: 13px; }
  #scrollbar .disable, #scrollbar-one .disable, #scrollbar-two .disable, #scrollbar-three .disable {
    display: none; }

#scrollbar-one .thumb, #scrollbar-two .thumb {
  background-color: #47759e; }
  #scrollbar-one .thumb .end, #scrollbar-two .thumb .end {
    background-color: #47759e; }

#scrollbar-three .viewport {
  height: 250px; }


/*  Mise en forme des suivis  et commentaires  */
.comments {
  margin: 0;
  padding: 0;
  margin-top: -15px; }
  .comments li {
    padding: 5px 0;
    margin: 10px auto;
    margin-top:0; }
    .comments li.out, .comments li.in {
      padding-top:2px; }
    .comments li.in_out {
      padding: 0;
      margin-bottom: 0; }
    .comments li.out_in {
      padding: 0;
      margin-bottom: 0; }
    .comments li img.avatar {
      height: 60px;
      width: 60px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      padding: 4px;
      background: #f7f7f7;
      border: 1px solid #cccccc; }
    .comments li.in img.avatar {
      margin-right: 10px;
      float: left; }
    .comments li .name {
      color: #b5799e;
      font-size: 13px;
      font-weight: 400; }
    .comments li .date-time {
      color: #1a1a1a;
      font-size: 11px;
      font-weight: 400; }
    .comments li.out img.avatar {
      float: right;
      margin-left: 10px;
      padding: 4px;
      background: #f7f7f7;
      border: 1px solid #cccccc; }
    .comments li .message {
      display: block;
      padding: 5px 10px;
      position: relative;
      background: #fafafa; }
    .comments li.in .message {
      text-align: left;
      border-left: 1px solid #b5799e;
      margin-left: 60px; }
      .comments li.in .message .arrow {
        display: block;
        position: absolute;
        top: 8px;
        left: -8px;
        width: 2px;
        height: 16px;
        border-right: 6px solid #b5799e; }
    .comments li.in_out .message {
      text-align: right;
      margin-top: 10px;
      padding:0;
      background-color: transparent; }
    .comments li.out_in .message {
      text-align: left;
      margin-top: 10px; 
      padding:0;
      background-color: transparent;}
    .comments li.out .message {
      border-right: 1px solid #47759e;
      margin-right: 60px;
      text-align: right; }
      .comments li.out .message .arrow {
        display: block;
        position: absolute;
        top: 8px;
        right: -8px;
        width: 2px;
        height: 16px;
        border-left: 6px solid #47759e; }
    .comments li.out .name {
      color: #47759e; }
    .comments li.out .name, .comments li.out .date-time {
      text-align: right; }
    .comments li .message .body {
      display: block; }

/* modiifer les liens dans le tableau des fillieuls  */
.cel-godParents:hover p {
	color: #fca401;
  /* background-color: #000000; */
}

.cel-godParents a {
  color: rgb(65, 64, 63);
  text-decoration: none;
}



/* pour changer la couleur de fond des radio bouton  */
.custom-control-input:checked~.custom-control-label::before {
  color: #fff;
  border-color: #7B1FA2;
}

.custom-control-input:checked~.custom-control-label.red::before {
  background-color: red;
}

.custom-control-input:checked~.custom-control-label.green::before {
  background-color: goldenrod;
  border-color: red
}



/* effet sur les icône zoom avant */
.icons-zoom {
  /* margin: 40px auto; */
  padding-left: 0;
  width: 100%;
  list-style: none;
  text-align: left;
  font-size: 1px; }
  .icons-zoom > em {
    position: relative;
    z-index: 0;
    display: inline-block;
    /* padding: 25px; */
    width: 2px;
    border-radius: 4px;
    list-style: none;
    text-align: center;
    font-weight: normal;
    font-size: 28px;
    cursor: pointer; }
    .icons-zoom > em:hover {
      background-color: transparent;
      color: #03A9F4;
      transition: all .2s ease;
      transform: scale(1.2); }

/* icône membre dans détail d'un utilisateur */
.has-badge .badge_member {
  position: absolute;
  right: -20px;
  top:-15px;
}

.has-badge .badge_fillieul {
  position: absolute;
  top: -12%;
  left: 38px;
}

.badge_member, .badge_fillieul {
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* enlève le vu en vert lors de la validation dans un formulaire partie Gestion*/
.was-validated .form-control:valid, .form-control.is-valid {
  background-image: none  !important;
}


/* change l'aspect des tooltip */
.tooltip > .tooltip-inner {      background:#969696;max-width: 100% !important;}
.tooltip.top .tooltip-arrow {    border-top-color: #0288d1;}
.tooltip.right .tooltip-arrow {  border-right-color: #0288d1;}
.tooltip.bottom .tooltip-arrow { border-bottom-color: #0288d1;}
.tooltip.left .tooltip-arrow {   border-left-color: #0288d1;}

/* sweetalert   */
/* ------------ */
/* on  modifie la couleur de fond */
.bg-alert-warning-light {
  background-color: #f7ebd0 !important;
}

/* on centre les boutons dans le footer de l'alert */
.swal-footer {
  text-align: center !important;
}
/* ----------------*/
/* FIN sweetalert  */


/* pour les miniature utilisateur dasn la liste   */
/* ------------ */
.thumb_user48 {
  width: 48px !important;
  /* height: 48px !important; */
}


label.cabinet{
	display: block;
	cursor: pointer;
}

label.cabinet input.file{
display:none;
}

/* souci compatibilité ipad code remplacé par celui ci-dessus
label.cabinet input.file{
	position: relative;
	height: 100%;
	width: auto;
	opacity: 0;
	-moz-opacity: 0;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  margin-top:-30px;
}
*/

#upload-demo{
	width: 250px;
	height: 250px;
  padding-bottom:25px;
}
figure figcaption {
    position: absolute;
    bottom: 0;
    color: #fff;
    width: 100%;
    padding-left: 9px;
    padding-bottom: 5px;
    text-shadow: 0 0 10px #000;
}

/* Your custom css codes start here: */
/* centered columns styles */
.row-centered {
  text-align:center;
}
.col-centered {
  display:inline-block;
  float:none;
  /* reset the text-align */
  text-align:left;
  /* inline-block space fix */
  margin-right:-4px;
  text-align: center;
  background-color: #ccc;
  border: 1px solid #ddd;
}

.modal-header, .modal-footer {
  border-color: #ff9800  ;
  border-width: 3px;
}

body { 
  opacity: 1 !important;
}

.sortable-handler { touch-action: none; }

.texte_red_light {
    color: #863d3d;
}

.mnuGestion.active,  .mnuGestion:hover > a, .mnuGestion:hover > li > a{
  background: #036b07 !important; 
  color: #fff;
}



/* lors du passage sur une icône bouton */
.ico-crud {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 5px;
  border-radius: 4px;
  list-style: none;
  text-align: center;
  font-weight: normal;
  cursor: pointer; }

.ico-crud:hover {
  background-color: transparent;
  color: #03A9F4;
  transition: all .2s ease;
  transform: scale(2); }

/* couleur menu si Gestion du site */
li.mnuGestion li:hover > a {
  background: #036b07 !important; 
  color: #fff;
}

/* dimension des photos dans la liste des fillieul */
.filleul-thumb {
  width: 45px !important;
  height: 60px !important; }

/* Utiliser dans la modal de connection */   
.user_card {
    height: 400px;
    width: 400px;
    margin-top: auto;
    margin-bottom: auto;
    background: #F26522;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5px;

}
.user_card_content {
    background-color: #f5f2dac2;
}

.user_login {
    width: 300px;
}

.brand_logo_container {
    position: absolute;
    height: 120px;
    width: 120px;
    top: -25px;
    border-radius: 50%;
    background: #60a3bc;
    padding: 10px;
    text-align: center;
}
.brand_logo {
    height: 100px;
    width: 150px;
    border-radius: 50%;
    border: 2px solid white;
}
.form_container {
    margin-top: 100px;
}
.login_btn {
    width: 100%;
    background: #c0392b !important;
    color: white !important;
}
.login_btn:focus {
    box-shadow: none !important;
    outline: 0px !important;
}
.login_container {
    padding: 0 2rem;
}
.input-group-text {
    background: #8a8686 !important;
    color: white !important;
    border: 0 !important;
    border-radius: 0.25rem 0 0 0.25rem !important;
}
.input_user,
.input_pass:focus {
    box-shadow: none !important;
    outline: 0px !important;
}

/*  checkbox dans la modal connection */
.span_pseudo, .chiller_cb span:before, .chiller_cb span:after {
    content: "";
    display: inline-block;
    background: #fff;
    width: 0;
    height: 0.2rem;
    position: absolute;
    transform-origin: 0% 0%;
  }
  
  .chiller_cb {
    position: relative;
    height: 2rem;
    display: flex;
    align-items: center;
  }
  .chiller_cb input {
    display: none;
  }
  .chiller_cb input:checked ~ span {
    background: #fd2727;
    border-color: #fd2727;
  }
  .chiller_cb input:checked ~ span:before {
    width: 1rem;
    height: 0.15rem;
    transition: width 0.1s;
    transition-delay: 0.3s;
  }
  .chiller_cb input:checked ~ span:after {
    width: 0.4rem;
    height: 0.15rem;
    transition: width 0.1s;
    transition-delay: 0.2s;
  }
  .chiller_cb input:disabled ~ span {
    background: #ececec;
    border-color: #dcdcdc;
  }
  .chiller_cb input:disabled ~ label {
    color: #dcdcdc;
  }
  .chiller_cb input:disabled ~ label:hover {
    cursor: default;
  }
  .chiller_cb label {
    padding-left: 2rem;
    position: relative;
    z-index: 2;
    cursor: pointer;
    margin-bottom:0;
  }
  .chiller_cb span {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid #ccc;
    position: absolute;
    left: 0;
    transition: all 0.2s;
    z-index: 1;
    box-sizing: content-box;
  }
  .chiller_cb span:before {
    transform: rotate(-55deg);
    top: 1rem;
    left: 0.37rem;
  }
  .chiller_cb span:after {
    transform: rotate(35deg);
    bottom: 0.35rem;
    left: 0.2rem;
  }

  /* .. checkbox dans la liste des utilisateurs */
  #listUsers .checkbox * {
    cursor: pointer;
  }
  #listUsers .checkbox {
    padding-left: 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
  }
  
  #listUsers .checkbox label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 5px;
  }
  
  #listUsers .checkbox label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #555;
    border-radius: 3px;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  }
  
  #listUsers .checkbox label::after {
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
    top: 2px;
    margin-left: -21px;
    padding-left: 3px;
    padding-top: 1px;
    font-size: 11px;
    color: #555555;
  }
  
  #listUsers .checkbox input[type="checkbox"]{
    opacity: 0;
    z-index: 1;
    width: 20px;
    height: 20px;
  }
  
  
  #listUsers .checkbox input[type="checkbox"]:checked + label::after{
    font-family: "FontAwesome";
    content: "\f00c";
  }
  
  #listUsers .checkbox.checkbox-circle label::before {
    border-radius: 50%;
  }
  
  #listUsers .checkbox.checkbox-inline {
    margin-top: 0;
  }
  
  #listUsers .checkbox-red    input[type="checkbox"]:checked + label::after,
  #listUsers .checkbox-yellow input[type="checkbox"]:checked + label::after,
  #listUsers .checkbox-green  input[type="checkbox"]:checked + label::after,
  #listUsers .checkbox-blue   input[type="checkbox"]:checked + label::after,
  #listUsers .checkbox-black  input[type="checkbox"]:checked + label::after
  {color: #fff;}
  
  #listUsers .checkbox-red input[type="checkbox"] + label::before
  {background-color: #990000;  border-color: #990000;}
  
  #listUsers .checkbox-yellow input[type="checkbox"] + label::before
  {background-color: #face00;  border-color: #face00;}
  
  #listUsers .checkbox-green input[type="checkbox"] + label::before
  {background-color: #008000;  border-color: #008000;}
  
  #listUsers .checkbox-blue input[type="checkbox"] + label::before
  {background-color: #428bca;  border-color: #428bca;}
  
  #listUsers .checkbox-black input[type="checkbox"] + label::before
  {background-color: #000000;  border-color: #000000;}
  
  input[type="checkbox"].styled:checked + label:after {
    font-family: 'FontAwesome';
    content: "\f00c";
  }

/* repris de bootstrap 4 */ 
.justify-content-center {
    -ms-flex-pack: center!important;
    justify-content: center!important;
}

.justify-content-around {
  -ms-flex-pack: distribute!important;
  justify-content: space-around!important;
}

.d-flex {
    display: -ms-flexbox!important;
    display: flex!important;
}

.alert .alert-icon-col {
  min-width: 40px;
  max-width: 40px;
}

.alert-link {
  /* i find 700 to bold */
  font-weight: 600;
}