@font-face {
  font-family: 'Gilroy';
  src: url("../font/Gilroy-Heavy.woff2") format("woff2"), url("../font/Gilroy-Heavy.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url("../font/Gilroy-Bold.woff2") format("woff2"), url("../font/Gilroy-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url("../font/Gilroy-Light.woff2") format("woff2"), url("../font/Gilroy-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url("../font/Gilroy-Medium.woff2") format("woff2"), url("../font/Gilroy-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Gilroy';
  src: url("../font/Gilroy-Regular.woff2") format("woff2"), url("../font/Gilroy-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

.filepond--file-action-button.filepond--file-action-button:after{
    position: absolute;
    left: 0em!important;
    right: -0.75em!important;
    top: 0em!important;
    bottom: -0.75em!important;
    content: "";
    width: 100%!important;
    height: 100%!important;
}
/* Cache le nom du fichier */
.filepond--file-info-main,
.filepond--file-status,
.filepond--file-info-sub {
    display: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin-top: 0px !important;
}

.filepond--list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* Aligner les éléments au début de chaque ligne */
}

.filepond--item {
    width: 100px; /* Ou toute autre taille fixe que vous préférez */
    height: 100px!important; /* Assurez-vous que la hauteur est la même que la largeur pour créer un carré */
    overflow: hidden!important; /* Cache tout débordement, important pour que object-fit fonctionne correctement */
}

.filepond--image-preview-container img,
.filepond--media-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Couvre l'espace disponible, les parties excédentaires sont coupées */
    object-position: center;
}

.filepond--action-process-item{
  display: none !important;
}


.card-block.card-thread .filepond--drop-label{
  max-height: 2em;
}

.card-block.card-thread .filepond--item{
  width: 100px;
  height: 100px!important;
  overflow: hidden!important; 
}

.card-block.card-thread .filepond--root{
  margin-right: 0;
  margin-left: 0;
}


  .div-animate {
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease; 
  }
  .div-fade {
    transform: translateY(20px); /* Pour l'effet de fondu */
  }

  .image-croppi {
    position: absolute;
    object-fit: inherit;
    height: auto;
    display: block;
  }

  #demo-basic {
    position: absolute;
    object-fit: inherit;
    height: auto;
    display: block;
  }

  #sortable .col-lg-3.col-md-3.col-sm-6.ui-sortable-handle {
    padding: 0 10px;
  }

  div#modal-show {
    z-index: 9999;
  }

  .kl-boot-tagsin-feed {
    padding: 6px 15px;
    resize: none;
    padding-right: 30px;
    font-size: 16px!important;
    color: #35303F !important;
    border: 1px solid #D8D8D8 !important;
    border-radius: 4px;
  }

  .kl-boot-tagsin-feed input.select2-search__field {
    font-size: 16px!important;
  }

  .kl-boot-tagsin-feed li.select2-selection__choice {
    font-size: 15px;
  }

  .kl-tag-feed span:after {
    display: none !important;
  }

  .kl-tag-feed:hover span {
    padding-right: 0 !important;
  }

  .select2-results__option {
    padding: 6px 10px;
  }

  .select2-dropdown {
    border: none;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 15%);
  }

  span.select2-dropdown.select2-dropdown--above {
    width: 100%!important;
  }

  .kl-addnew-camp {
    justify-content: center;
    background: transparent;
    box-shadow: none !important;
  }

  .kl-addnew-camp div {
    padding: 50px 15px;
  }

  .kl-addnew-camp div img {
    animation: bounceIn 0.6s;
    transform: rotate(0deg) scale(1) translateZ(0);
    transition: all 0.3s cubic-bezier(0.8, 1.8, 0.75, 0.75);
  }

  .kl-addnew-camp div img:hover {
    transform: rotate(0deg) scale(1.1);
  }

  .kl-addnew-camp div h3 {
    font-size: 30px;
    margin: 10px 0 0;
  }

  .kl-figure-post input[type="checkbox"][id^="cb"] {
    display: none;
  }

  .kl-figure-post label {
    cursor: pointer;
    margin: 0;
    width: 100%;
  }

  .kl-figure-post :checked+label {
    border: 3px dashed #8C51FF;
    transition-duration: 0.1s;
    border-radius: 12px;
  }

  .kl-list-page {
    margin: 0 5px;
  }

  .kl-figure-post {
    margin-bottom: 20px;
  }

  .kl-list-page .col {
    padding: 0 10px;
  }

  .kl-figure-post:hover {
    opacity: 0.7;
    transition: all 200ms ease-in-out;
  }

  .kl-post-taken {
    opacity: 0.5;
  }

  .kl-post-taken label {
    cursor: default !important;
  }

  .kl-figure-post .figure-caption {
    color: #35303F;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    background: #fff;
    padding: 8px 11px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .kl-figure-post a {
    text-decoration: none !important;
  }

  .kl-figure-post img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
  }

  .kl-figure-post a:hover .figure-caption {
    color: #000000;
  }

  .kl-project-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
  }

  .kl-project-head h1 {
    margin: 0;
    font-size: 30px;
  }

  .kl-project-head .btn-primary {
    color: #fff;
    font-weight: bold;
    background-color: #8C51FF;
    border: 2px solid #8C51FF;
    height: 45px;
    width: 235px;
  }

  .kl-project-head .btn-primary:hover,
  .kl-project-head .btn-primary:focus,
  .kl-project-head .btn-primary:active {
    border-color: #763de4;
    background: #763de4;
  }

  .kl-project-head .btn-primary img {
    position: relative;
    left: 70px;
    bottom: 2px;
  }

  .kl-nb-count {
    background: red;
  }

  .kl-tag-feed span:after {
    display: none !important;
  }

  .kl-tag-feed:hover span {
    padding-right: 0 !important;
  }

  .kl-button-tag:hover span {
    padding-right: 15px;
  }

  .kl-button-tag:hover span:after {
    opacity: 1;
    right: -5px;
  }

  .kl-button-tag-pub {
    display: block;
    padding: 2px 10px 2px;
  }

  .kl-button-tag-pub span:after {
    padding: 0 0px 15px 0 !important;
  }

  .kl-button-tag span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.2s;
  }

  .kl-button-tag span:after {
    content: 'x';
    position: absolute;
    opacity: 0;
    top: -1px;
    right: -20px;
    transition: 0.5s;
    background: transparent;
    border-radius: 50px;
    width: 15px;
    height: 15px;
    font-size: 12px;
    font-weight: 500;
    padding: 0 1px 5px 0;
    text-align: center;
  }

  .kl-button-tag {
    border: none;
    text-align: center;
    transition: all 0.5s;
    color: #fff;
    background-color: #35303F;
    font-size: 12px;
    border-radius: 25px;
    padding: 2px 10px 3px;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .image-as-background {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .screen-reader-text {
    height: auto;
    width: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
  }

  .screen-reader-text:hover,
  .screen-reader-text:active,
  .screen-reader-text:focus {
    height: auto;
    width: auto;
    background-color: #000000;
    border-radius: 2px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    left: 0.3125rem;
    line-height: normal;
    padding: 0.9375rem 1.4375rem 0.875rem;
    text-decoration: none;
    top: 0.3125rem;
    z-index: 100000;
  }

  div.sdropdown-pub {
    width: 200px;
    border-radius: 5px;
    margin: 0 10px;
  }

  div.sdropdown-pub:focus-visible {
    outline: none;
  }

  div.sdropdown-pub .select:focus-visible {
    outline: none;
  }

  .kl-messaging {
    right: 20px;
    bottom: 20px;
    position: fixed;
    z-index: 99999;
  }

  .kl-messaging img {
    animation: bounceIn 0.6s;
    transform: rotate(0deg) scale(1) translateZ(0);
    transition: all 0.3s cubic-bezier(0.8, 1.8, 0.75, 0.75);
  }

  .kl-messaging img:hover {
    transform: rotate(0deg) scale(0.9);
  }

  .tooltip-inner {
    background-color: #8C51FF;
    padding: 10px 5px 15px;
    box-shadow: 0px 0px 7px 0px #999999;
    opacity: 1 !important;
    color: #fff;
    font-weight: bold;
    min-width: 223px !important;
    z-index: 9999999999999999 !important;
    position: relative;
    display: block;
  }

  .tooltip.fade {
    opacity: 1 !important;
    z-index: 99999 !important;
  }

  .tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #8C51FF !important;
  }

  .kl-tags-info div.bootstrap-tagsinput .badge-info{
    display: inline-block;
    margin-right: 5px;
  }

  div.bootstrap-tagsinput .badge-info {
    margin: 0 0 5px;
    width: auto;
    display: table;
    border: none;
    text-align: center;
    transition: all 0.5s;
    color: #fff;
    background-color: #35303F;
    font-size: 12px;
    border-radius: 25px;
    padding: 5px 10px;
    font-weight: bold;
    word-break: break-word;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block; 
  }

  .bootstrap-tagsinput .badge [data-role="remove"]:after {
    background-color: #313131 !important;
  }

  .kl-see-more {
    margin-left: 59px;
    margin-bottom: 20px;
  }

  .sb-topnav {
    padding-left: 0;
    height: 77px;
    z-index: 1039;
  }

  .sb-topnav .navbar-brand {
    width: 240px;
    margin: 0;
  }

  .sb-topnav.navbar-dark #sidebarToggle {
    color: rgba(255, 255, 255, 0.5);
  }

  .sb-topnav.navbar-light #sidebarToggle {
    color: #212529;
  }

  .tt-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    cursor: pointer;
  }

  .tt-suggestion {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: nowrap;
  }

  .tt-suggestion:hover,
  .tt-suggestion:focus {
    color: #fff;
    text-decoration: none;
    outline: 0;
    background-color: #428bca;
  }

  .noResult p {
    color: #000;
    font: bold 1.75em/35px "Gilroy";
  }
  
  .noResult a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8c50fd;
    font: bold 1.15em/20px "Gilroy";
  }
  
  .noResult a:before {
    content: url(../img/arrow-link.svg);
    width: 10px;
    height: 18px;
    display: inline-block;
    margin-right: 10px;
  }

  .itemResult {
    padding: 45px 60px;
    border-bottom: 1px #cecece solid;
    margin: 0 -15px;
  }
  
  .kl-itemResult {
    padding: 25px 60px;
    text-align: left;
  }
  
  .kl-itemResult p {
    margin: 0;
  }
  
  .itemImg img {
    display: block;
    width: 203px;
    height: 201px;
    object-fit: cover;
    object-position: center;
    transition: all 400ms ease-in-out;
  }
  
  .itemText {
    margin-left: 50px;
  }
  
  .itemText h3 {
    color: #000;
    transition: all 400ms ease-in-out;
  }
  
  .itemResult>a {
    text-decoration: none !important;
  }
  
  .itemResult>a:hover img {
    opacity: .7;
  }
  
  .itemResult>a:hover h3 {
    color: #8c50fd;
  }

  .sb-UpperNav .sb-UpperNav-menu{
    flex-grow: 1;
    /* height: 7vh; */
    width: 100vw;
  }
  .sb-UpperNav .sb-UpperNav-menu .navi {
    display: flex;
    width: 100%;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .sb-UpperNav .sb-UpperNav-menu .navi .navi-link {
    display: flex;
    /* height: 7vh; */
    width: 33vw;
    align-items: center;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    position: relative;
    justify-content: center;
    font-size: 2vw;
    color: #333;
    font-weight: bold;
  }
  .sb-UpperNav .sb-UpperNav-menu {
    flex-grow: 1;
    width: 100vw;
  }
  .sb-UpperNav .sb-UpperNav-menu .navi {
    display: flex;
    /* height: 7vh; */
    width: 100%;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  /* je sais que ca sert a quelque chose mais je ne trouve pas où */
    .gg-play-track-next-o {
      box-sizing: border-box;
      position: relative;
      display: block;
      transform: scale(var(--ggs,1));
      width: 22px;
      height: 22px;
      border: 2px solid;
      border-radius: 20px
    }
    
    .gg-play-track-next-o::after,
    .gg-play-track-next-o::before {
      content: "";
      display: block;
      box-sizing: border-box;
      position: absolute;
      height: 8px;
      top: 5px
    }
    
    .gg-play-track-next-o::before {
      width: 2px;
      border-radius: 2px;
      left: 11px;
      background: currentColor
    }
    
    .gg-play-track-next-o::after {
      width: 0;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-left: 5px solid;
      left: 5px
    }
    li.select2-search.select2-search--inline {
      height: 10px;
    }
    .casse > .media-body > .form-check-input {
      position: absolute !important;
      opacity: 0;
    }
    .margRow{
      margin: 0;
    }

    .kl-modal-change-account > .modal-dialog.modal-dialog-centered{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* page babylone */
      .grid3 > .tab2{
        column-count: 3 !important;
        width: 100%;
      }

  /* ne sais pas responsiv */
    @media (width >=  1200px) {
      .kl-list-page .col {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
      }
    }
    @media screen and (max-width:  991.98px){
      .kl-button-tag span {
        padding-right: 15px;
      }

      .kl-button-tag span:after {
        opacity: 1;
        right: 0;
      }
      #header-template{
        position: sticky !important;
        z-index: 9999;
        background: #fff;
        top: 0;
        right: 0;
        left: 0;
      }
    }
    @media screen and (max-width: 768px){
      .kl-list-page .col {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
      }
      .kl-modal-addimg-account .modal-dialog {
        max-width: 576px;
      }
      .kl-modal-forgot-password .modal-dialog {
          max-width: 690px;
      }
    }
    @media screen and (max-width:  767.98px){
      .kl-confirm-mobil {
        margin-top: 25px;
      }
      .kl-nom-mobil {
        margin-bottom: 25px!important;
      }
      div.sdropdown-pub {
        width: 100% !important;
        margin: 15px 0 0;
      }
      .right.media {
        float: none;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
      .kl-list-page .col {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
      }

      .tab1 .item{
        width: 100%;
      }

      .text-center > img{
        width: 100%;
      }
    }

    @media screen and (max-width:  574.98px){
      .kl-list-page .col {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
      }
      .kl-project-head {
        display: block;
      }
    }
      

/* Pack */
  body {
    margin: 0;
    font-family: 'Gilroy' !important;
    font-weight: normal;
    font-style: normal;
    background-color: #f0f0f2;
    color: #35303F;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: bold;
  }

  html::-webkit-scrollbar {
    display: none;
  }

  html{
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
  }

  div:empty:before {
    content:attr(data-placeholder);
    color:gray
  }

  ::marker{
    color: transparent;
  }

  .material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48
  }

  a:hover, .kl-search-in a.kl-back-home:hover, .header-tab a:hover, .tab4 .kl-post-info h2 a:hover, #profil-cont:hover, #copy-ssh:hover {
    color: #8c51ff;
  }

  .form-control:focus,
  .form-control:active,
  .form-control:hover,
  .kl-pub-filter .sdropdown.sdropdown-pub, .btn {
    box-shadow: none !important;
  }

  .kl-body-login, .kl-new-feed, .kl-card-section .img-container, div#video-post {
    overflow: hidden;
  }

  /* .kl-new-feed{
    overflow: auto;
    overflow-x: hidden;
  } */

  .center {
    margin-left: auto;
    margin-right: auto;
    display: block
  }

  .kl-pass-form, .kl-text-plus, .kl-reply-plus, .kl-upload-file, .kl-pub-search, section.content, .card-block .card-sub, .slide-img .card-img, #slideActus, .table-notify .block-item.new .col, .playback-content {
    position: relative;
    width:100%;
  }

  .kl-close-plus {
    padding: 3px;
    position: relative;
    width: unset !important;
  }

  #sortable {
    align-items: center;
    max-width: 485px
  }

  .kl-modal-post .modal-footer.blc-bouton .btn-secondary { 
    line-height: 33px 
  }
  
  .resize-container {
    cursor: move;
  }

  .cotentSearch {
    text-align: center;
  }

  ul{
    cursor: default;
  }

  .dispFlex{
    display: flex;
  }

  .dispBlock{
    display: block;
  }

  .dispGrid{
    display: grid !important;
  }

  .widthAuto{
    width: auto !important;;
  }

  .heightAuto{
    height: auto !important;;
  }

  .cursorPoint, #changeAccount, #changerDEcompte{
    cursor: pointer;
  }

  .redColor{
    color: red !important;
  }

  .WSpreW{
    white-space: pre-wrap;
  }
  /* Créer une campagne */
    .kl-no-jumbotron {
      height: 583px;
      margin: auto;
      padding: 25px 40px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      border-radius: 10px;
    }
    
    .kl-no-jumbotron h3 {
      color: #35303F;
      font-size: 24px;
      margin: 0 0 20px;
    }
    
    .kl-no-jumbotron p {
      font-size: 20px;
      margin: 0 0 25px;
    }
    
    .kl-no-jumbotron .btn-primary {
      border: 2px solid #8C51FF;
      background: #8C51FF;
      width: 282px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      transition: all 400ms ease-in-out;
      padding: 9px;
    }
    
    .kl-no-jumbotron .btn-primary:hover {
      background: #fff;
      color: #8c51ff;
    }

    .fixed-top, .sb-nav-fixed #layoutSidenav #layoutSidenav_nav, .sb-nav-fixed .sb-topnav {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 1030;
    }

    .sb-nav-fixed .sb-topnav {
      z-index: 1039;
      background-color: #fff;
    }
    
    .sb-nav-fixed #layoutSidenav #layoutSidenav_nav {
      width: 17vw;
      height: 100vh;
      z-index: 1038;
    }
    
    .sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav {
      padding-top: 9vh;
    }
    
    .sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav .sb-sidenav-menu {
      overflow-y: auto;
    }
    
    .sb-nav-fixed #layoutSidenav #layoutSidenav_content {
      height: 100vh;
      padding-left: 17vw;
      padding-top: 9vh;
      background: #f0f0f2;
    }
    
    .nav .nav-link .sb-nav-link-icon,
    .sb-sidenav-menu .nav-link .sb-nav-link-icon {
      margin-right: 0.5rem;
    }
    #newCamp .modal-content {
      max-width: 1100px;
      margin: 0 auto;
    }
  /* recherche */
    #search {
      background: #f0eff4;
      /* min-height: 100vh; */
      padding: 75px 0 0;
    }
    #search>.row {
      width: 100%;
    }
    
  .form-control::placeholder,
  .form-control::-webkit-input-placeholder,
  .form-control::-moz-placeholder,
  .form-control::-ms-input-placeholder,
  .form-control::-moz-placeholder {
    font: 500 1em/35px "Gilroy";
    color: #6a6a6a;
  }
  /* croix supprimer apparition */
    .kl-del-cal {
      position: relative;
      pointer-events: none;
    }
    
    .kl-del-cal:after {
        content: '';
        position: absolute;
        opacity: 0;
        top: 1.2px;
        right: -3px;
        transition: 0.5s;
        background-image: url(../img/close-black.svg);
        background-repeat: no-repeat;
        border-radius: 50px;
        width: 15px;
        height: 15px;
        font-size: 12px;
        font-weight: 500;
        padding: 0 1px 5px 0;
        text-align: center;
        pointer-events: all;
    }
    
  .fc-daygrid-block-event:hover .kl-del-cal:after{ opacity: 1; }

  /* Pour avoir une vue en grid ( feed carrer et page babylone  */
    .grid { 
      flex-direction: column !important;
    }
    .grid .kl-card-section { 
      border-radius: 10px !important;
    }
    .grid1 { 
      width: 100%;
    }
    .grid1 .tab1 .item:after { 
      left: -100%;
      right: -100%;
    }
    .grid .bloc-copy { 
      width: 100%;
    }
    .grid3 + .bloc-copy { 
      margin-top: 10px !important;
    }

    .modal-dialog-centered{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .modal-dialog{
      top: -15px;
      margin-bottom: 0px;
    }
    textarea{
      resize: none;
    }
    .contentTab.tab-content.grid3 {
      max-width: 100%;
    }

  /* css of the controls video */
    .container-controls{
      position: relative;
      border-radius: 5px;
      overflow: hidden;
      list-style: none;
    }
    .container-controls.fullscreen{
      max-height: 100%;
      height: 100%;
    }
    .wrapper-controls{
      position: absolute;
      left:0;
      right: 0;
      bottom: -15px;
      display: none;
      z-index: 1;
      opacity: 0;
      pointer-events: none;
      transition: all 0.1s ease-in-out;
    }
    .container-controls.show-controls .wrapper-controls{
      bottom: 5px;
      opacity: 1;
      pointer-events: auto;
      transition: all 0.1s ease-in-out;
    }
    .wrapper-controls::before{
      position: absolute;
      right: 0;
      bottom: -5px;
      width: 100%;
      height: calc(100% + 35px);
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
      content: "";
      z-index: -1;
    }
    .video-timeline{
      height: 7px;
      width: 100%;
      cursor: pointer;
    }
    .progress-area span{
      position: absolute;
      left: 50%;
      top:-25px;
      font-size: 13px;
      color: aliceblue;
      transform: translateX(-50%);
    }
    .current-time-progressbar{
      left: 0%;
    }
    .video-timeline .progress-area{
      height: 3px;
      background-color: rgb(239, 180, 255);
    }
    .progress-area .progress-bar{
      position: absolute;
      width: 0%;
      height: 5%;
      background: rgb(255, 130, 151);
    }
    .progress-area .progress-bar::before{
      position: absolute;
      top: 50%;
      right: 0;
      height: 13px;
      width: 13px;
      border-radius: 50%;
      content: "";
      background: inherit;
      transform: translateY(-50%);
    }
    .video-timeline:hover .progress-area span,
    .video-timeline:hover .progress-area .progress-bar::before, .current-time-progressbar:hover{
      display: block;
    }
    .progress-area .progress-bar::before, .current-time-progressbar{
      display: none;
    }
    .video-controls .options{
      width: 100%;
    }
    .video-controls .options:first-child{
      display: flex;
      justify-content: flex-start;
    }
    .video-controls .options:last-child{
      justify-content: flex-end;
    }
    .video-controls{
      display: flex;
      padding: 5px 5px 10px;
      margin-bottom: -6px;
    }
    .options button{
      width: 40px;
      height: 40px;
      border: none;
      font-size: 19px;
      color: white;
      background: none;
      cursor: pointer;
    }
    .options input{
      position: relative;
      top: 14px;
      height: 4px;
      max-width: 75px;
    }
    .options .video-timer{
      color: aliceblue;
      margin-left: 15px;
      font-size: 14px;
    }
    .video-timer .separator{
      margin: 0 5px;
      font-size: 16px;
      font-family: "Open sans";
    }

    .playback-content .speed-options{
      position: absolute;
      bottom: 40px;
      left:-40px;
      width: 95px;
      background: white;
      border-radius: 4px;
      opacity: 0;
      transition: opacity 0.13s ease-in-out;
      pointer-events: none;
      list-style: none;
    }
    .playback-content .speed-options.show{
      opacity: 1;
      pointer-events: auto;
    }
    .speed-options li{
      padding: 5px 0 5px 15px;  
      font-size: 14px;
      cursor: pointer;
    }
    .speed-options li.active{
      color: aliceblue;
      background-color: rgb(0, 110, 255);
    }
    .container-controls video{
      width: 100%;
      max-width: 100%;
    }
    .right-controls{
      display: flex;
    }
    .center-controls{
      list-style: none;
    }
    .volume-input{
      height: 15px;
      width: 65%;
      background: #8c51ff8c;
      border-color: #763de4;
      border-radius: 10px;
      appearance: none;
    }
  /* FORMATS VIDEO */
    .container-controls video.video-format-Carre {
      width: auto;
      aspect-ratio: 1/1;
    }
    .container-controls video.video-format-Paysage {
      width: auto;
      aspect-ratio: 16/9;
    }
    .container-controls video.video-format-Portrait {
      width: auto;
      aspect-ratio: 4/5;
    }
    .container-controls video.video-format-Story {
      width: auto;
      aspect-ratio: 9/16;
    }
  /* boutton pour bouger la barre */
    .volume-input::-webkit-slider-thumb,.volume-input::-moz-slider-thumb,.volume-input::-o-slider-thumb,.volume-input::-ms-slider-thumb,.volume-input::-khtml-slider-thumb{
      height: 10px;
      width: 10px;
      background: #763de4;
      border-radius: 50%;
      cursor:ew-resize;
      -webkit-appearance: none;
      -moz-appearance: none;
      -o-appearance: none;
      -ms-appearance: none;
      -khtml-appearance: none;
      transition: background 1s ease-in-out;
    }
    .custom-control-input {
      position: absolute;
      left: 0;
      z-index: 1;
      width: 2rem;
      height: 1.5rem;
      opacity: 0;
    }
    #loading-indicator{
      position: fixed !important;
    }
    #selectprojet {
      width: 100%;
    }

    .sdropdown .sdropdown-menu {
      position: absolute;
      left: 0;
      z-index: 9;
      display: none;
      width: 100%;
      max-height: 170px !important;
      margin-top: 1px;
      border-radius: 0 1px 2px 2px;
      background-color: #fff;
      box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
      overflow: hidden;
      overflow-y: auto;
    }

    .sdropdown {
      width: 100% !important;
      display: inline-block;
      background-color: #fff;
      border-radius: 5px;
      transition: all .5s ease;
      position: relative;
      font: normal 15px "Gilroy";
      color: #35303F;
      height: 100%;
      text-align: left;
      box-shadow: 0px 0px 0px rgb(0 0 0 / 0%);
    }
    
    .sdropdown .select {
      cursor: pointer;
      display: flex;
      padding: 10px;
      height: 45px;
      align-items: center;
      font-size: 16px;
    }

  /* logo babylone */
    #logo-bbl{
      width: 150px;
      height: auto;
      position: unset;
    }
    
  /* boutton abonnement  */
    #abn-cont {
      font-weight: bold;
      transition: all 0.2s ease-in-out;
    }
    #abn-cont img {
      filter: none;
      transition: all 0.2s ease-in-out;
    }
    #abn-cont:hover img {
      filter: invert(81%) sepia(38%) saturate(629%) hue-rotate(331deg) brightness(96%) contrast(91%);
      opacity: 1;
    }
    #abn-cont:hover {
      color: #eab676;
    }
  /* boutton profil */
    #profil-cont {
      transition: all 0.3s ease-in-out;
    }
    #profil-cont img {
      filter: none;
      transition: all 0.3s ease-in-out;
    }
    #profil-cont:hover img{
      filter: invert(35%) sepia(95%) saturate(3382%) hue-rotate(243deg) brightness(104%) contrast(105%);
      opacity: 1;
    }
  /* popup */
    .kl-modal-post .modal-header {
      padding: 3% 40px;
      position: static;
      /* overflow: scroll; */
    }
  /* side nav */
    nav#sidenavAccordion {
      /* height: 7vh; */
      width: 100%;
      z-index: 9998;
    }
    #layoutSidenav #layoutSidenav_nav {
      z-index: 1038;
      flex-basis: 354px;
      flex-shrink: 0;
      /* height: 7vh; */
      transition: transform 0.15s ease-in-out;
      transform: translateX(0px);
    }
  .col {
    text-align: initial;
  }

  /* modal nouvelle publication */

    #staticBackdrop{
      justify-content: center;
    }

    #staticBackdrop > .modal-dialog-centered{
      width: 100% !important;
    }

    div.background-pop-up {
      z-index: 9999;
      position: absolute;
      top: 0;
      height: 100vh;
      width: 100vw;
      background-color: #c9c8c88f;
    }

    #date-publication {
      display: flex;
      align-items: flex-end;
      padding-top: 15px;
      gap: 15px;
    }

    #date-publication > div {
      width: 33%;
    }

  /* modal nouvelle campagne */
    div#newCamp {
      justify-content: center;
    }  
    #newCamp .modal-content {
      max-width: 1100px;
      margin: 5% auto;
    }
    .special-input-camp{
      margin-bottom: 0 !important;
      margin-top: 3%
    }

  .col.text-center {
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }
  input#Mail{
    top: 4px;
    left: 40px;
    z-index: 1;
    width: 100%!important;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  /* image checked */
    .col-md-6 input:checked ~ .img-checked{
      display: inline;
    }
    
    .col-md-6 input:checked ~ .img-unchecked{
      display: none;
    }
  /* pack boutton */
    button.btn.btn-primary {
      color: #fff;
      background-color: #8c51ff;
      border: none;
    }
    button.btn.btn-primary.mr-2 {
      height: 40px;
      margin-left: 7.5px;
      border: none;
      transition: all 0.3s ease-in-out;
    }

    button#btn_modification{
      height: 40px;
      transition: all 0.3s ease-in-out;
    }

    button.btn.btn-primary.mr-2:hover, button#btn_modification:hover{
      background-color: #5b2eb3;
    }

    .media-body > div > .kl-del-med {
      margin-left: 20px !important;
    }
    .form-check-input {
      position: relative !important;
      width: 17px;
      min-width: 17px;
      height: 17px;
      padding: 0;
      margin: 0px 13px 0 5px !important;
      border: 1px #D8D8D8 solid !important;
      border: none !important;
      border-radius: 5px;
      background: transparent;
      box-shadow: none !important;
      accent-color: #8C51FF;
      outline: none !important;
    }
    .form-check-input{
      appearance: none;
      width: 23px;
      height: 23px;
      border: 2px solid #aaa !important;
      border-radius: 5px;
      background-color: #fff;
      margin-right: 8px;
      position: relative;
    }
    .form-check-input {
      float: left;
      margin-right: 5px !important;
      height: 20px;
      width: 100% !important;
      min-width: 20px;
      max-width: 20px;
      cursor: pointer;
    }
    .form-check-input::before{
      content: '';
      position: absolute;
      width: 0;
      height: 3px;
      background-color: limegreen;
      transform: translate(8px, 13px) rotate(-45deg);
      transform-origin: left;
      transition: 150ms all linear;
      transition-delay: 0ms;
    }
    .form-check-input::after{
      content: '';
      position: absolute;
      width: 0;
      height: 3px;
      background-color: limegreen;
      border: none;
      transform: translate(1px, 8px) rotate(45deg);
      transform-origin: left;
      transition: 150ms all linear;
      transition-delay: 150ms;
    }
    .form-check-input:checked::before{
      width: 14px;
      transition-delay: 150ms;
    }
    .form-check-input:checked::after{
      width: 10px;
      transition-delay: 0ms;
    }
  /* pack dates */
    .kl-datelist-in {
      text-align: center;
      text-align: -webkit-center;
      text-align: -moz-center;
      text-align: -o-center;
      text-align: -ms-center;
      text-align: -khtml-center;
      width: fit-content;
    }
  /* pack modale */
    #description, #descriptioninput {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      margin-left: 0px;
    }
    
  .mb-0{
    cursor: default;
  }
  .modal-title{
    cursor: default;
  }
  /* nav barre tel */
    #navDoor {
      display: none;
      height: 40px;
      background-color: #35303F;
      width: 100px;
      position: absolute;
      align-self: center;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    #navDoor .bar {
      width: 25px;
      height: 4px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      transition: all 0.3s ease-in-out;
    }
    
    #navDoor .bar:nth-of-type(2) {
      top: calc(50% - 9px);
    }
    #navDoor .bar:nth-of-type(3) {
      top: calc(50% + 9px);
    }
    
    /* bouton pour la nav en format tel */
      #navDoor.active .bar:nth-of-type(1) {
        display: none;
      }
      #navDoor.active .bar:nth-of-type(2) {
        top: 50%;
        transform: translate(-50%, 0%) rotate(45deg);  
      }
      #navDoor.active .bar:nth-of-type(3) {
        top: 50%;
        transform: translate(-50%, 0%) rotate(-45deg); 
      }
    .selected{
      opacity: 1 !important;
      filter: grayscale(0);
    }
    .checkbox-group > label > span {
      font-weight: 500;
      font-size: clamp(14px, 1vw,56px);
    }
    .filter-button {
      background-color: #007bff;
      color: white;
      font-size: 16px;
      border-radius: 4px;
      border: none;
      padding: 10px 20px;
      margin-top: 50px;
      margin: 0 auto;
      cursor: pointer;
      display: block;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
    .filter-button:hover {
      background-color: #0069d9;
    }
    .filter-button:active {
      background-color: #0053a3;
    }
    .filter-button2:before {
      content: "";
      display: inline-block;
      margin-right: 5px;
      margin-bottom: -5px;
      width: 20px;
      height: 20px;
      background-image: url("../img/filter.svg");
      background-size: contain;
      filter: brightness(0) invert(1);
    }
  .pt-5 {
    padding-top: 1.5rem!important;
  }
  .checkbox-group > label {
    
    border-top: 2px solid #D8D8D8;
    width: 100%;
    display: flex;
    align-items: center;
    text-align-last: left;
    margin: 0;
    border-left: none;
    border-right: none;
  }
  .checkbox-group > label:last-child {
    border-bottom: 2px solid #D8D8D8;
  }
  .col-12{
    display: flex;
    gap: 25px;
  }
  /* pack filtre */
    #edition-filter{
      margin-top: 6px;
    }
  /* campagne modale */
    .firstSide, .secondSide{
      width: 100%;
    }
    .secondSide > .form-group > .kl-modal-post textarea.form-control{
      height: 180px;
    }
  .modal-dialog > .modalMembre > .modal-header {
    display: flex !important;
  }
  .navi-link {
    color: #35303F !important;
    font-weight: 600;
    cursor: pointer;
  }
  /* importer soit une police soit une photo de profil */
    .police {
      position: relative;
      width: 100%;
      cursor: pointer;
    }
    
    .police>span {
      display: block;
      cursor: pointer;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 5;
    }
    
    .police>span:hover {
      cursor: pointer;
    }
    
    .police input {
      appearance: none;
      background: transparent;
      color: transparent;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      opacity: 0;
      z-index: 2;
      cursor: pointer;
    }
    
    .police label {
      display: inline-block;
      font: bold 16px/22px "Gilroy";
      color: #8c50fd;
      text-decoration: underline;
      cursor: pointer;
      transition: all 400ms ease-in-out;
      margin: 0;
    }
    
    .police:hover label {
      opacity: .7;
    }
    
    .bloc-user .police label {
      display: block !important;
    }

    #cmpgn_not_set > .wrap > .content > .content-container {
      display: inline-block;
    }
    .heightCent{
      height: 100% !important;
    }
    .widthCent{
      width: 100% !important;
    }
    .div-contenu-indicator{
      width:393px;
      height:393px;
    }
    .loading-indicator_X{
      position: relative !important;
      z-index: 9999 !important;
      width: 70px;
    }
    .loading-indicator-lotti{
      position: absolute;
      z-index: 9999 !important;
      top: 50%;
      left: 50%;
      width: 200px;
      transform: translate(-50%, -50%);
    }
    .pointerNone{
      pointer-events: none;
    }
    .z-indexFar{
      z-index: 999;
    }
    .infoLien{
      width: 15px;
      height: 15px;
      filter: invert(32%) sepia(100%) saturate(2160%) hue-rotate(240deg) brightness(104%) contrast(116%);
    }
    .marginAuto{
      margin: auto;
    }
    .opacityFull{
      filter: opacity(1);
    }
    .opacityFour{
      filter:opacity(0.40)
    }
    .textAlignCenter{
      text-align: center;
    }
    .overflowAuto{
      overflow: auto;
    }

    .overflowHidden{
      overflow: hidden;
    }

    .cursorPointer{
      cursor: pointer;
    }
    .backgroundTrans{
      background-color: transparent !important;
    }
    .colorVioletBBL{
      color:#8C51FF;
    }
    .button-bbl{
      color: #fff;
      border-color: #8C51FF;
      background: #8C51FF;
      font-weight: bold;
      font-size: 16px;
      vertical-align: middle;
    }
    .positionRel{
      position: relative;
    }
    .positionAbs{
      position: relative;
    }
    .greyFullColor{
      background: #6A6A6A !important;
      border-color:#6A6A6A !important; 
      /* !important : pour que cela s'appliquer au bouton Ajouter un Post dans le cas d'un membre non Administrateur */
    }
    .marginTopBottom10{
      margin-top: 1.1vh;
      margin-bottom: 10px;
    }
    footer#footer-page-pre {
      margin-top: 32.5px;
      text-align: center;
    }
    .kl-legal-link > a {
      color: #8c51ff;
      text-decoration: underline;
      transition: all 0.2s ease-in-out;
    }
    .kl-legal-link > a:hover {
      font-size: 17px;
      font-weight: bold;
    }

    /* modal */
      .modal-footer{
        padding: 0.75rem 35px;
      }
    
    /* scrollbar */
    .scroll-bar-hide::-webkit-scrollbar{
      display: none;
    }

    .scroll-bar-hide{
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none; /* Firefox */
    }

    /* boutons */

    .btn .btn-outline-primary{
      height: 50px !important;
    }

    .btn.btn-outline-thread{
      color: white;
      background-color: #8C51FF;
      border-color: #8C51FF;
      height: 5vh;
      border-radius: 0.4vw;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      white-space: nowrap;
      min-width: max-content;
      font-weight: bold;
      font-size: clamp(14px, 1vw, 100px);
      vertical-align: middle;
    }

    .img-fluid-thread{
      margin-top: -3px;
     margin-right: 5px;
    }
    /* bouton fermer */

      .selected-rs > .img-fluid{
        width: 30px;  
      }

      .img-fluid{
        width: 50px;
      }

    /* image logo babylone */
      .navbar-brand > img.img-fluid {
        width: 150px;
      }

      .textarea-container {
        position: relative;
      }

      .emoji-button{
        cursor: pointer;
        position: absolute;
        bottom: 3%;
        left: 3%;
        opacity: 0.5;
        transition: transform 0.2s;
        text-decoration: none !important;
      }

      .emoji-thread{
        bottom: 30px !important;
      }

      .emoji-button:hover {
        transform: scale(1.1); /* Fait grossir légèrement l'icône lorsqu'elle est survolée */
      }

      emoji-picker {
        position: absolute;
        top: -150px;
        right: -320px;
        background-color: white;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        padding: 5px;
        z-index: 999;
        display: none;
    }

    #last-row{
      margin-top: 3vh;
    }


  /* pack responsiv */
    @media screen and (max-width:  1575px){
      .options button{
        width: 35px;
        height: 32px;
      }
      .options input{
        top: 12px;
      }
    }
    @media screen and (max-width:  1444px){
      .options button{
        width: 30px;
      }
    }
    @media screen and (max-width:  1313px){
      .options button{
        width: 25px;
      }
      .options input{
        max-width: 60px;
        margin-left: 5px;
      }
      .video-controls .options:last-child{
        justify-content: space-evenly;
      }
    }
    @media screen and (max-width:  1199.98px){  
      #sortable .col-lg-3.col-md-3.col-sm-6.ui-sortable-handle {
        padding: 0 5px;
      }
      #sortable-change .col-lg-3.col-md-3.col-sm-6.ui-sortable-handle {
        padding: 0 5px;
      }
    }
    @media screen and (max-width:  1199px){
      .options button{
        width: 15px;
      }
      .options input{
        margin-left: 15px;
      }
    }
    @media screen and (max-width:  1080px){ 
      .kl-modal-post .form-group{
        margin-bottom: 20px;
      }
    }
    @media screen and (max-width: 1030px){  
      .playback-content,
      .pic-in-pic,
      .volume{
        display: none;
      }
      li.options.right-controls {
        width: 70%;
      }
    }
    @media screen and (max-width: 1011px){
      p{
        margin-bottom: 0px;
      }
    }
    @media screen and (max-width:  991.98px){
      .kl-modal-post a.nav-link {
        font-size: 25px;
      }

      .sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav {
        padding-top: 9vh !important;
      }
    
      .sb-nav-fixed #layoutSidenav #layoutSidenav_content {
        top: 0 !important;
        padding: 0;
      }

      .sb-nav-fixed #layoutSidenav #layoutSidenav_nav {
        height: 0vh;
        width: 100%;
        /* margin-left: 240px; */
      }

      .custom-modal-content h2{
        margin-right: 60px;
      }

      .overflowHidden{
        overflow: auto;
      }

      #navbarSupportedContent-3 {
        background-color: white;
        min-width: 100vw;
        margin-left: -50px;
        padding-bottom: 15px;
      }

      textarea#description{
        height: 75% !important;
      }

      textarea#descriptioninput{
        height: 100% !important;
      }

      #etape1-change > .tab-content > .tab-pane > .modal-body > .row {
        gap: 10px;
      }

      #etape2-change > .modal-body-video > .row {
        gap: 15px;
      }
    }
    @media screen and (max-width: 991px){ 
      /* Dans toutes les modales */
      .kl-modal-post textarea.form-control {
       height: 100px;
      }
      /* modal nouvelle campagne */
      .secondSide > .form-group > .kl-modal-post textarea.form-control{
       height: 187px;
      }
      .volume{
        display: block;
      }
      #navDoor{
        display: block;
      }
      nav#sidenavAccordion{
        width: 100%;
        height: 0%;
      }
    }
    @media screen and (max-width: 865px){
      .sdropdown .select {
        font-size: 14px;
      }
      .volume{
        display: block;
      }
    }
    @media screen and (max-width:  767.98px){
      .kl-modal-post button.close {
        height: 45px;
        width: 45px;
        font-size: 40px;
        display: inline-block;
        line-height: 0;
      }
    
      .kl-modal-post .modal-header {
        padding: 40px;
        padding-top: 25px;
      }
    
      .kl-modal-post .form-group {
        margin-bottom: 25px;
      }
    
      .kl-modal-post .bootstrap-tagsinput {
        margin-bottom: 15px;
      }
    
      .kl-modal-post .modal-body {
        padding: 0 25px;
      }
      .sdropdown .sdropdown-menu {
        box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
        border-radius: 0 0 5px 5px;
      }
      #sortable .col-lg-3.col-md-3.col-sm-6.ui-sortable-handle {
        padding: 0 10px;
        max-width: 33.33%;
      }
    }
    @media screen and (max-width:  767px ){
      .col-md-4{
        width: 33%;
        padding: 15px;
        padding-bottom: 0;
      }
      .options button{
        width: 22px;
      }
      .playback-content,
      .pic-in-pic{
        display: flex;
      }
      li.options.right-controls {
        width: 100%;
      }
      .sdropdown .select{
        font-size: 12px;
      }
      .col-12{
        display: block;
      }
    }
    @media screen and (max-width:  730px){
      .sdropdown .select{
        width: 100%;
      }
    }
    @media screen and (max-width: 700px){
      .sb-nav-fixed #layoutSidenav #layoutSidenav_content {
        margin-top: 25px;
      }
    }
    @media screen and (max-width: 600px){
      #search {
        padding: 80px 0 0;
      }

      .search .form-inline .form-control{
        width: 70% !important;
      }
  
      .search .btn{
        display: none;
      }

      .search .form-inline{
        width: auto !important;
      }

      .header-tab a{
        color: transparent;
        font-size: 0;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      .px-md-5{
        padding-left: 0 !important;
      }

      .kl-icn{
        margin-right: 0;
      }
    }
    @media screen and (max-width:  574.98px){
      #sortable .col-lg-3.col-md-3.col-sm-6.ui-sortable-handle {
        padding: 0 10px;
      }
    }
    @media screen and (max-width:  520px){
      .options button{
        width: 18px;
      }
      .pic-in-pic{
        display: none;
      }
    }
    @media screen and (max-width: 510px){
      .navbar{
        padding: 0.5rem 0.5rem;
      }
      .sdropdown .select {
        font-size: 10px;
      }
    }
    @media screen and (max-width:  490px){
      .checkbox-image > img {
        height: 37px;
      }
      .checkbox-image{
        width: 37px;
        height: 37px;
      }
      .checkbox-group > label > span{
        font-size: 13px;
      }
      #social-select-modal > .custom-modal-content > h2 {
        margin-bottom: 20px;
        font-size: 20px;
      }

      .filter-button{
        font-size: 12px;
      }
      .filter-button::before{
        margin-bottom: -3px;
        width: 15px;
        height: 15px;
      }
      .custom-modal-content{
        padding: 30px;
      }
    }

    @media screen and (max-width: 488px){
      .modalMembre > .kl-modal-footer.modal-footer {
        display: flex;
        flex-direction: column-reverse;
      }
    }
    @media screen and (max-width:  445px){
      .sdropdown .select {
        font-size: 8.5px;
      }
    }
    @media screen and (max-width:  424.98px){
      .kl-no-jumbotron .btn-primary {
        width: auto;
      }
    }
    @media screen and (max-width:  420px){
      #sortable .col-lg-3.col-md-3.col-sm-6.ui-sortable-handle {
        padding: 0 10px;
        width: 50% !important;
        max-width: 50%;
    }
  }
    

/* outils */
  /* outils mentions */
    .kl-op-zero {
      opacity: 0;
    }
    
    .kl-text-plus .mention-wrapper {
      width: 100%;
    }
    
    .kl-text-plus .mention-wrapper .mention-options.show .mention-option.show {
        display: block;
        color: #35303F;
        padding: 6px 10px;
        display: flex;
        align-items: center;
        border-radius: 5px;
    }
    
    .mention-option-name {
      margin-left: 10px;
    }
    
    .kl-text-plus .mention-wrapper .mention-options .mention-option.hover, 
    .kl-text-plus .mention-wrapper .mention-options .mention-option:hover {
        background: #cacafe;
        color: #FFF;
    }
    
    .kl-text-plus .mention-options.show {
        border: none;
        box-shadow: 0px 0px 20px rgb(0 0 0 / 15%);
        width: 97.5%;
        margin: 0 15px;
        margin-top: -100px;
    }
    
    .kl-text-plus .mention-wrapper textarea {
        border-radius: 5px;
    }
    
    .kl-reply-plus .mention-wrapper {
        width: 100%;
    }
    
    .kl-reply-plus .mention-wrapper .mention-options.show .mention-option.show {
        display: block;
        color: #35303F;
        padding: 6px 10px;
    }
    
    .kl-reply-plus .mention-wrapper .mention-options .mention-option.hover, 
    .kl-reply-plus .mention-wrapper .mention-options .mention-option:hover {
        background: #cacafe;
        color: #FFF;
    }
    
    .kl-reply-plus .mention-options.show {
        border: none;
        box-shadow: 0px 0px 20px rgb(0 0 0 / 15%);
        width: 100%;
        margin: 0;
    }
    
    .kl-reply-plus .mention-wrapper textarea {
        border-radius: 5px;
    }

    img.mention-option-photo {
      margin-right: 5px;
    }
    
  /* outils tags */
    
    .testTags2 {
      /* background-color: white !important;
      border: 1px #8c51ff solid !important;
      border-radius: 5px !important;
      width: 85% !important;
      color: #8c51ff !important;
      text-align: center;
      font-size: 12px;
      font-weight: bold;
      margin: 10px 0px;
      margin-left: 3%;
      transition: all 0.5s ease-in-out; */
      background-color: black !important;
      border: 1px black solid !important;
      border-radius: 15px !important;
      width: fit-content;
      padding: 2px 15px;
      color: white !important;
      text-align: center;
      font-size: 12px;
      font-weight: bold;
      margin: 7.5px 0px 7.5px 15px;
      transition: all 0.5s ease-in-out;
    }

    .bootstrap-tagsinput {
      background-color: #fff;
      border: 1px solid #ccc;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
      display: flex;
      padding: 4px 6px;
      color: #555;
      vertical-align: middle;
      border-radius: 4px;
      width: 100%;
      line-height: 1.5;
      cursor: text;
      flex-direction: column;
    }
    
    .bootstrap-tagsinput input {
      border: none;
      box-shadow: none;
      outline: none;
      background-color: transparent;
      padding: 0 6px;
      margin: 0;
      width: auto;
      max-width: inherit;
      word-break: break-all;
      width: 100%;
    }
    
    .bootstrap-tagsinput.form-control input::-moz-placeholder {
      color: #777;
      opacity: 1;
    }
    
    .bootstrap-tagsinput.form-control input::-ms-input-placeholder {
      color: #777;
    }
    
    .bootstrap-tagsinput.form-control input::-webkit-input-placeholder, .bootstrap-tagsinput.form-control input::-o-input-placeholder, .bootstrap-tagsinput.form-control input::-khtml-input-placeholder {
      color: #777;
    }
    
    .kl-boot-tagsin-feed input.select2-search__field::-moz-placeholder {
      color: #35303F !important;
      opacity: 1;
    }
    
    .kl-boot-tagsin-feed input.select2-search__field::-ms-input-placeholder {
      color: #35303F !important;
    }
    
    .kl-boot-tagsin-feed input.select2-search__field::-webkit-input-placeholder,.kl-boot-tagsin-feed input.select2-search__field::-o-input-placeholder,.kl-boot-tagsin-feed input.select2-search__field::-khtml-input-placeholder {
      color: #35303F !important;
    }
    
    .bootstrap-tagsinput input:focus {
      border: none;
      box-shadow: none;
    }
    
    .bootstrap-tagsinput .badge {
      margin: 2px 0;
      padding: 5px 8px;
    }
    
    .bootstrap-tagsinput .badge [data-role="remove"] {
      margin-left: 8px;
      cursor: pointer;
    }
    
    .bootstrap-tagsinput .badge [data-role="remove"]:after {
      content: "×";
      padding: 0px 4px;
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      font-size: 13px
    }
    
    .bootstrap-tagsinput .badge [data-role="remove"]:hover:after {
      background-color: rgba(0, 0, 0, 0.62);
    }
    
    .bootstrap-tagsinput .badge [data-role="remove"]:hover:active {
      box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }

    .tags-input{
      display: flex;
      width: fit-content;
      align-items: center;
      justify-content: center;
      margin: 7.5px 0px;
      padding: 2px 15px;
      border: 1px black solid !important;
      border-radius: 15px !important;
      color: white !important;
      background-color: black !important;
      text-align: center;
      font-size: 12px;
      font-weight: bold;
      cursor: default !important;
      transition: all 0.5s ease-in-out;
    }

  /* outils menu déroulant */
    .dropdown-menu.show {
      box-shadow: 4px 4px 17px rgb(0 0 0 / 17%);
      padding: 20px 0;
      margin: 19px 0 0;
      border: none;
      border-radius: 0;
    }

    textarea.dropdown-item {
      height: 24px;
      font-size: 16px;
      color: #35303F;
      padding: 0;
      display: block;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      white-space: normal;
      text-align: initial;
    }

    textarea.dropdown-item:focus,
    textarea.dropdown-item:hover {
      font-size: 16px;
      color: #35303F;
      padding: 0;
      display: block;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      white-space: normal;
    }

    textarea.dropdown-item.active,
    textarea.dropdown-item:active {
      color: #35303F;
      text-decoration: none;
      background-color: #fff;
      font-weight: bold;
      border: none;
      
    }

    .dropdown-item {
      font-size: clamp(14px, 1vw,26px);
      color: #35303F;
    }

    .dropdown-item.active,
    .dropdown-item:active {
      color: #35303F;
      text-decoration: none;
      background-color: #fff;
      font-weight: bold;
    }
  /*  outils boutons */
    .btn-outline-primary[disabled], .btn-primary[disabled] {
      pointer-events: none !important;
      background: #6A6A6A !important;
      border-color:#6A6A6A !important;
      color: #fff !important;
    }
  /* outils loading */
    .loader{ 
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 999;
      display: none;
    }
    .content-loader{ 
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .content-loader>div{ 
      width: 200px;
      height: 200px;
    }
    .icon-close{ 
      top:29px;
      right: 56px;
      position: absolute;
      z-index: 999;
    }
    #video-post .modal-dialog{ 
      pointer-events: all;
    }
    #video-post .modal-dialog video,
    #img_post .modal-dialog img{ 
      width: auto;
      max-height: 100vh;
      object-fit: contain;
      display: block;
      margin: auto;
      top: 0;
      position: fixed;
    }
  /* outils changer entreprise */
    .container-comptes-cadre{
      overflow-y: auto;
      overflow-x: hidden;
      max-height: 29vw;
    }
    .img-in-mod{
      object-fit: contain;
    }

    #staticBackdrop100 > .modal-dialog.modal-dialog-centered {
      width: 100%;
      max-width: 50%;
    }

    #changeAccount {
      color: #8C51FF;
    }
  /* outils changer campagne */
    .camp-select {
      position: relative;
      margin-left: 50px;
      width: fit-content;
    }
    .camp-select select {
      display: none; /*hide original SELECT element: */
    }
    .select-selected {
      background-color: white;
      transition: all 0.3s ease-in-out;
    }

    /* Style the arrow inside the select element: */
    .select-selected:after {
      position: absolute;
      content: "";
      top: 50%; /* Positionner le haut du pseudo-élément au milieu du parent */
      transform: translateY(-50%);
      right: 10px;
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-color: #000000 transparent transparent transparent;
    }
    /* Point the arrow upwards when the select box is open (active): */
    .select-selected.select-arrow-active:after {
      border-color: transparent transparent #fff transparent;
      top: 7px;
    }
    /* style the items (options), including the selected item: */
    .select-items div,.select-selected {
      color: #35303F;
      padding: 8px 16px;
      border: 0.3px solid #bcbcbc;
      cursor: pointer;
      border-radius: 5px;
      min-width: 19vw;
      background-color: white;
      white-space: nowrap;
      font-size: clamp(14px, 1.1vw,26px);    
      font-weight: bold;
      transition: all 0.1s ease-in-out;
    }

    .select-items div:hover, .select-selected:hover{
      border: 1px solid #000000;
    }

    .select-items div:hover {
      background-color: #8c51ff;
      color: white;
    }
    /* Style items (options): */
    .select-items {
      position: absolute;
      background-color: white;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 99;
    }
    .select-options{
      border-radius: 0px;
    }
    .same-as-selected {
      background-color: #8c51ff40;
    }
    /* Hide the items when the select box is closed: */
    .select-hide {
      display: none;
    }
  /* outils filtrer réseau */

    #social-select-modal {
      top: 0;
      left: 0;
      width: -webkit-fill-available;
      height: -webkit-fill-available;
    }

    #social-select-btn{
      font-size: 16px;
    }
    .custom-modal {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    .custom-modal-content {
      background-color: #fff;
      padding: 10px;
      border: 1px solid #888;
      border-radius: 10px;
      box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
      width: 70%;
      max-width: 90%;
      margin: auto;
      position: relative;
      z-index: 99999;
      text-align: center;
      /* top: 50%; */
      /* transform: translateY(-50%); */
    }
    .custom-modal-content h2 {
      margin-top: 0;
      padding-top: 10px;
      margin-bottom: 20px;
    }
    #social-select-modal > .custom-modal-content > h2 {
      padding-top: 0;
      margin-bottom: 0px;
    }
    span.selected-rs {
      display: flex;
      justify-content: flex-end;
      margin-right: 30px;
      color: limegreen;
      font-size: 22.5px;
    }

    #social-select-modal > .custom-modal-content {
      position: relative;
      top: 5%;
      z-index: 99999;
      max-width: 90%; 
      width: 45%;
      min-height: 70vh;
      max-height: 100vh;
      height: fit-content;
      margin: auto;
      margin-top: 0;
      padding: 10px 0px 90px;
      text-align: center;
      border: 1px solid #888;
      border-radius: 10px;
      background-color: #fff;
      box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
      /* transform: translateY(-50%); */
    }

    #header-select-social{
      display: flex;
      flex-direction: row-reverse;
    }

    #header-select-social-titre > H2{
      margin-bottom: 0px;
    }

    #container-button-close-select-social {
      margin: 0px 10px 0px 20px;
    }

    /* Styles for the close button */
    .close-custom-modal {
      position: absolute;
      top: 0px;
      right: 10px;
      color: #8c51ff;
      font-size: 50px;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.2s;
    }
    .close-custom-modal:hover,
    .close-custom-modal:focus {
      color: #422e6c;
      text-decoration: none;
      outline: none;
    }
    .checkbox-group {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      max-height: 68vh;
      overflow: scroll;
      overflow-x: hidden;
    }
    .checkbox-image {
      background-size: contain;
      background-repeat: no-repeat;
      display: flex;
      width: 7vw;
      min-width: 100px;
      min-height: 100px;
      height: 4vh;
      padding-left: 3vw;
      vertical-align: middle;
      opacity: 0.35;
      filter: grayscale(0.5);
      cursor: pointer;
      align-items: center;
    }
    .checkbox-group input[type="checkbox"] {
      display: none;
    }    
    .checkbox-group input[type="checkbox"]:checked + .checkbox-image::before {
      transform: scale(1);
    }
    .checkbox-group span {
      display: inline-block;
      text-align: center;
      width: 100%;
    }
  /* simple classe */
    .DispNone{
      display: none;
    }

    .margLHuit{
      margin: 8px;
    }
  
  /* outils responsiv */
    @media screen and (max-width:  1250px){
      /* filter par réseau responsiv */
      #social-select-btn{
        font-size: 14px;
      }
    }
    @media screen and (max-width: 1045px){
      #social-select-btn {
        font-size: 12px;
      }
    }
    @media screen and (max-width:  991.98px){
      /* notification responsiv */
        .kl-badge {
          top: 10px;
          right: -15px;
        }
      /* menu responsiv */
        .dropdown-menu.show {
          padding: 15px 0;
          margin: 0 0 15px;
          text-align: center;
        }

        #social-select-modal > .custom-modal-content{
          top: 0%;
          max-height: 90vh;
        }

        .checkbox-group{
          height: 60vh;
        }

        .sb-nav-fixed #layoutSidenav #layoutSidenav_content{
          height: 100%;
        }
    }
    @media screen and (max-width:  991px){
      .camp-select{
        width: 225px;
        position: absolute;
        margin-top: 6.7rem;
        margin-left: 0px;
      }
    }
    @media screen and (max-width:  768px){
      /* changer entreprise */
        .kl-modal-down-post .modal-dialog {
          max-width: 732px;
        }
    }
   
    @media screen and (max-width: 640px){
      .select-items div, .select-selected{
        height: 62px;
        display: flex;
        align-items: center;
      }
      .select-selected:after{
        top: 26px;
      }
      .camp-select{
        margin-top: 5.3rem;
        width: 155px !important;
      }
      #social-select-btn{
        font-size: 11.9px;
      }
    }
    @media screen and (max-width: 600px){
      button#social-select-btn{
        width: 90% !important;
      }

      .select-items div, .select-selected {
        height: 45px;
        width: 80px;
        padding: 0;
        overflow: hidden;
      }

      .camp-select{
        margin-top: 7rem;
      }
    }
    /* @media screen and (width >=  575px){
      .kl-modal-down-post .modal-dialog {
        margin: 1.75rem auto !important;
        margin-top: 0 !important;
      }
    } */
    @media screen and (max-width: 542px){
      #social-select-btn {
        font-size: 10px;
      }
    }
    @media screen and (max-width: 510px){
      .camp-select{
        width: 105px !important;
      }

      #social-select-btn{
        font-size: 10px;
      }

      #staticBackdrop100 > .modal-dialog.modal-dialog-centered{
        margin-top: 0;
      }

      .kl-modal-change-account > .modal-dialog > .modal-content > .modal-header{
        padding-top: 0;
      }
    }

    @media screen and (max-width:  408px){
      #social-select-btn {
        font-size: 9px;
      }
    }
    @media screen and (max-width:  374px){
      #social-select-btn{
        font-size: 8px;
      }
    }
  
  /* Alertes */
    .kl-note-green a:before {
      content: "";
      position: absolute;
      background: #fff;
      width: 32px;
      height: 32px;
      display: block;
      opacity: 0.2;
      border-radius: 20px;
    }

    .kl-note-green a:hover:before {
      opacity: 0.4;
    }

    .kl-note-green {
      position: fixed;
      z-index: 99999;
      top: 95px;
      width: 98%;
      margin: 0 auto;
      left: 0;
      right: 0;
      height: 77px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #34A853;
      box-shadow: 2px 2px 37px rgb(0 0 0 / 27%);
      border-radius: 10px;
      padding: 30px;
    }

    .kl-note-green p {
      margin: 0;
      color: #fff;
      max-width: 80%;
    }

    .kl-note-green.kl-note-red {
      top: 190px;
      background: #FB4E6E;
    }

    .kl-red-warning {
      color: #FB4E6E;
      font-size: 14px;
      display: flex;
      align-items: center;
      position: relative;
      bottom: 5px;
    }
    
    .kl-red-warning-pub {
        bottom: 30px;
    }
    
    .kl-red-warning img {
        position: relative;
        bottom: 2px;
        margin-right: 5px;
    }
    
    a.kl-forget-pass {
      position: absolute;
      z-index: 1;
      top: 11px;
      right: 14px;
      background: white;
      padding-left: 6px;
    
    }

    .kl-note-blue {
      background: #2A5EE3;
      position: fixed;
      z-index: 99999;
      bottom: 45px;
      width: 98%;
      margin: 0 auto;
      left: 0;
      right: 0;
      height: 200px;
      box-shadow: 2px 2px 37px rgb(0 0 0 / 27%);
      border-radius: 10px;
      padding: 25px;
      max-width: 409px;
    }
    
    .kl-note-blue .kl-know-more {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .kl-note-blue p {
      font-size: 16px;
      color: #fff;
      margin: 10px 0 0;
    }
    
    .kl-note-blue .kl-know-more h4 {
      font-size: 30px;
      color: #fff;
      margin: 0;
    }
    
    .kl-note-blue .kl-know-more h4 img {
      margin: 0 5px 5px 0;
    }

    .kl-note-blue a {
      position: relative;
      cursor: pointer;
    }
    
    .kl-note-blue a:before {
      content: "";
      position: absolute;
      background: #fff;
      width: 32px;
      height: 32px;
      display: block;
      opacity: 0.2;
      border-radius: 20px;
    }
    
    .kl-note-blue a:hover:before {
      opacity: 0.4;
    }

    .success{
      background-color: green;
    }
    .error{
      background-color: red;
    }
    .close, .closeMentionsLegales {
      position: absolute;
      width: 45px;
      height: 45px;
      border: none;
      border-radius: 50px;
      opacity: 1;
    }

    button.closeMentionsLegales > span {
      font-size: 32px;
    }

  /* Alertes responsiv */
    @media screen and (max-width:  1199.98px){
      .kl-note-green {
        width: 96%;
      }
    
      .kl-messaging img {
        width: 65px;
        height: 65px;
      }
    }
    
    @media screen and (max-width:  991.98px){
      .kl-note-green {
        height: auto;
      }
    
      .kl-note-green.kl-note-red {
        top: 250px;
      }

      .kl-messaging {
        right: 15px;
        bottom: 15px;
        position: fixed;
      }
    }
    @media screen and (max-width:  767.98px){
      .kl-red-warning-pub {
        bottom: 20px;
      }
      .kl-messaging img {
        width: 55px;
        height: 55px;
      }
      .kl-note-green {
        padding: 15px;
      }
    
      .kl-note-green p {
        padding: 0 15px;
        font-size: 14px;
      }
    }
    @media screen and (max-width:  450px){
      .kl-note-green.kl-note-red {
        top: 290px;
      }
    }
    @media screen and (max-width:  424.98px){
      .kl-note-blue {
        height: auto;
        width: 90%;
      }
    
      .kl-note-blue .kl-know-more h4 {
        font-size: 25px;
      }
    
      .kl-note-blue p {
        font-size: 15px;
      }
    }  

/* SVG */
  #kl-svg:hover,
  #kl-svg:active,
  #kl-svg:visited,
  #kl-svg:focus {
    display: none;
    z-index: -1;
    opacity: 0;
}


  #kl-svg-hover {
    display: none;
    z-index: -1;
    opacity: 0;
  }

  #kl-svg-hover:hover,
  #kl-svg-hover:active,
  #kl-svg-hover:visited,
  #kl-svg-hover:focus {
    display: block;
  }

/* login */
  .kl-logo {
    display: flex;
    margin-bottom: 35px;
  }

  .kl-logo img {
    display: flex;
    max-width: 625px;
    width: 100%;
    height: auto;
    margin-bottom: 70%;
  }

  .kl-login .form-signin h2 {
    margin: 0 0 25px;
    font-size: 24px;
  }

  .kl-login .form-signin label {
    font-size: 14px;
    font-weight: 500;
  }

  .kl-login .form-signin .form-control {
    height: 45px;
    font-size: 16px;
    font-weight: normal;
    color: #6A6A6A;
    border: 2px solid #979797;
    border-radius: 5px;
    box-shadow: none;
    background: #F0E8FF;
  }

  main.kl-bb-login .form-signin .form-control {
    color: #000000!important;
    background: #fff;
    margin-bottom: 15px;
  }

  main.kl-bb-login .form-signin .btn-primary {
    margin: 20px 0 27px;
  }

  .kl-login .form-control:focus {
    background-color: transparent !important;
  }

  .kl-login .form-signin input.form-control::-webkit-input-placeholder, .kl-login .form-signin input.form-control::-moz-input-placeholder,.kl-login .form-signin input.form-control::-ms-input-placeholder, .kl-login .form-signin input.form-control::-o-input-placeholder, .kl-login .form-signin input.form-control::-khtml-input-placeholder
  .kl-login .form-signin input.form-control::placeholder {
    color: #6A6A6A;
  }

  main.kl-bb-login .form-signin input.form-control::-webkit-input-placeholder, main.kl-bb-login .form-signin input.form-control::-moz-input-placeholder, main.kl-bb-login .form-signin input.form-control::-ms-input-placeholder, main.kl-bb-login .form-signin input.form-control::-o-input-placeholder, main.kl-bb-login .form-signin input.form-control::-khtml-input-placeholder
  main.kl-bb-login .form-signin input.form-control::placeholder {
    color: #ABABAB;
  }

  .kl-login .form-signin .btn-primary {
    color: #fff;
    background-color: #8C51FF;
    border-color: #8C51FF;
    font-size: 16px;
    font-weight: bold;
    margin-top: 35px;
  }

  .kl-login .form-signin .btn-primary:hover,
  .kl-login .form-signin .btn-primary:active {
    color: #fff;
    border-color: #763de4;
    background: #763de4;
    animation-delay: 1200ms;
    animation-name: fadeInUp;
    opacity: 1;
  }

  .kl-login .form-signin a {
    color: #8C51FF;
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;
    background: transparent !important
  }

  .kl-login .form-signin a:hover, .kl-login .form-signin span a:hover {
    color: #763de4;
  }
  .kl-login {
    background: #F0E8FF;
    border-top: none;
    min-height: 100vh;
  }
  
  main.kl-bb-login {
    background: #fff;
    padding: 0;
    margin: auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 16px solid #8C51FF;
  }
  
  .login {
    max-width: 285px;
    margin: 0 auto;
  }
  
  .kl-login .form-signin hr {
    margin-top: 1.1rem;
    margin-bottom: 1.1rem;
    border-top: 1px solid #979797;
  }
  
  .kl-login .form-signin span {
    font-size: 16px;
    font-weight: normal;
  }
  
  .kl-login .form-signin span a {
    color: #8C51FF;
    font-size: 16px;
    font-weight: bold;
  }
  #termsPopup{
    max-height: 100vh !important;
    margin-top: 0 !important;
  }
  #cguTXT{
    width: 100% !important;
  }
/* Responsive Login */
  @media (width >=  1440px) or (width <= 1440px){
    .kl-logo {
      text-align: right;
    }
  }
  @media (width >=  1336px) or (width <= 1336px){
    .kl-login {
      padding: 160px 0;
    }
  }
  @media (width >=  768px) and (width <=  1335.98px) {
    .kl-login {
      padding: 100px 0;
    }
  }
  @media (width >=  992px) or (width <= 992px){
    .kl-login .form-signin {
      max-width: 282px;
      width: 100%;
    }
  }
  @media screen and (max-width: 770px){
    #termsPopup{
      width: 90%;
    }
  }
  @media (width >=  768px) or (width <= 768px){
    .kl-login .form-signin {
      width: 282px;
    }
  
    .kl-login .row.g-5 {
      display: flex;
      justify-content: space-around;
    }
  }
  @media screen and (max-width:  767.98px){
    .kl-login {
      padding: 80px 0;
    }
  
    .kl-login .kl-logo {
      text-align: center;
    }
  
    .kl-login .kl-logo img {
      padding: 0 25px;
      max-width: 385px;
      margin: 0 auto;
    }
  }
  @media screen and (max-height:640px){
    .kl-body-login {
      overflow: scroll;
    }

    .kl-login {
      height: 100%;
      padding: 30px 0 15px !important;
    }

    .form-signin {
      margin-bottom: 0 !important;
    }
  }
  @media screen and (max-height:600px){
    #title-pop-up {
      margin-bottom: 10px;
      font-size: 24px;
    }
    #termsText > h1 {
      font-size: 26px;
    }
    #termsText > h2 {
      font-size: 24px;
    }
  }
  @media screen and (max-width: 475px){
    #termsPopup {
      width: 90%;
    }
  }
  @media screen and (max-width: 375px){
    .kl-login .form-signin h2 {
      margin: 0 0 25px;
      font-size: 20px;
    }
    .kl-logo {
      margin-bottom: 15px;
    }
  }
/* header */
  .kl-sidebar-user {
    text-align: center;
    padding: 3vh 0;
    height: fit-content;
    border-top: none;
    border-bottom: 1px solid #D8D8D8;
    cursor: default;
  }

  .kl-sidebar-user .fw-bold {
    color: #35303F;
    font-weight: bold;
    font-size: clamp(14px, 1.28vw,26px);
    margin-bottom: -0.29vh;
  }

  .kl-sidebar-user a {
    color: #8C51FF;
    font-size: clamp(14px, 0.9vw,26px);
    font-weight: bold;
  }

  .kl-sidebar-user a:hover {
    color: #763de4;
    text-decoration: none;
  }

  #layoutSidenav {
    background: #f0f0f2;
  }

  .kl-navbar-nav {
    border-bottom: 1px solid #D8D8D8;
  }

  .kl-navbar-nav .navbar-toggler:focus,
  .kl-navbar-nav .navbar-toggler:active {
    outline: 0;
  }

  .kl-navbar-nav .navbar-toggler span {
    display: block;
    background-color: #fff;
    height: 3px;
    width: 20px;
    margin-top: 4px;
    margin-bottom: 4px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -khtml-transform: rotate(0deg);
    transform: rotate(0deg);
    position: relative;
    left: 0;
    opacity: 1;
  }

  .kl-navbar-nav .navbar-toggler span:nth-child(1),
  .kl-navbar-nav .navbar-toggler span:nth-child(3) {
    -webkit-transition: transform .35s ease-in-out;
    -moz-transition: transform .35s ease-in-out;
    -o-transition: transform .35s ease-in-out;
    -ms-transition: transform .35s ease-in-out;
    -khtml-transition: transform .35s ease-in-out;
    transition: transform .35s ease-in-out;
  }

  .kl-navbar-nav .navbar-toggler:not(.collapsed) span:nth-child(1) {
    position: absolute;
    left: 10px;
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -khtml-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  .kl-navbar-nav .navbar-toggler:not(.collapsed) span:nth-child(2) {
    height: 12px;
    visibility: hidden;
    background-color: transparent;
  }

  .kl-navbar-nav .navbar-toggler:not(.collapsed) span:nth-child(3) {
    position: absolute;
    left: 10px;
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -khtml-transform: rotate(-135deg);
    transform: rotate(-135deg);
    opacity: 0.9;
  }

  .kl-navbar-nav .navbar-toggler:not(.collapsed) span {
    margin-top: 6px;
    margin-bottom: 6px;
  }
  .navbar-nav li a.nav-link {
    color: #35303F !important;
    font-weight: bold;
    font-size: clamp(14px, 1vw,26px);
    padding: 7px 10px !important;
    position: relative;
    display: inline-block;
  }
  
  .navbar-nav li a.nav-link:after {
    content: '';
    display: block;
    height: 2px;
    background: #35303F;
    transform: scaleX(0);
    transition: transform .3s;
  }
  .kl-icn {
    margin-right: 15px;
    padding-bottom: 0;
    transition: all 0.3s ease-in-out;
  }
  .kl-icn-hover .kl-icn {
    display: block;
    font-size: 0;
    line-height: 0;
  }
  
  .kl-icn img {
    display: block;
    height: 2vh;
  }

  .kl-icn-image{
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0) contrast(100%) !important;
  }

  .kl-icn-hover .kl-icn-hover-image {
    opacity: 0;
    position: absolute;
  }
  
  .kl-icn-hover:hover .kl-icn-image,
  .kl-icn-hover.active .kl-icn-image {
    opacity: 0;
  }
  
  .kl-icn-hover:hover .kl-icn-hover-image,
  .kl-icn-hover.active .kl-icn-hover-image {
    opacity: 1;
    position: absolute;
    top: 25%;
  }
  
  .kl-icn-hover:hover .kl-calendar-hover,
  .kl-icn-hover.active .kl-calendar-hover {
    top: 14.5px;
  }

  #layoutSidenav {
    display: flex;
  }

  #layoutSidenav #layoutSidenav_nav {
    flex-basis: 240px;
    flex-shrink: 0;
    transition: transform 0.15s ease-in-out;
    z-index: 1038;
    transform: translateX(-240px);
  }
  
  #layoutSidenav #layoutSidenav_content {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-grow: 1;
    min-height: calc(100vh - 77px);
    margin-left: -240px;
  }
  
  .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
    transform: translateX(0);
  }
  
  .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1037;
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
  }
  /* header menu deroulant */
    .navbar-nav li.dropdown a.nav-link:after {
      content: '';
      display: inline-block;
      height: 2px;
      background: transparent;
      transform: inherit;
      background-size: 11px;
      padding: 6px 9px;
      line-height: 1.2;
      margin: 0 0 -6px;
      font-weight: 500;
      color: #35303F;
      font-size: 16px;
      cursor: pointer;
      background-color: #fff;
      box-shadow: none !important;
      border: none !important;
      background-image: url(../img/stroke-drop.svg);
      background-repeat: no-repeat;
      background-position: right 0.25rem center;
    }
    .kl-pro-left {
      margin-left: 80px;
    }
    
    .kl-pro-left li a.nav-link {
      border: 1px solid #D8D8D8;
      border-radius: 5px;
      width: 204px;
      height: 45px;
      padding: 9px 10px !important;
    }
    
    .kl-pro-left li.dropdown a.nav-link:after {
      content: '';
      display: inline-block;
      height: 2px;
      background: transparent;
      transform: inherit;
      background-size: 11px;
      padding: 4px 72px;
      line-height: 1.2;
      margin: 0 0 -5px;
      font-weight: 500;
      color: #35303F;
      font-size: 16px;
      cursor: pointer;
      background-color: #fff;
      box-shadow: none !important;
      border: none !important;
      background-image: url(../img/stroke-drop.svg);
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
    }
    
    .kl-pro-left .dropdown-menu.show {
      margin: 16px 0 0;
    }
  
  .navbar-nav li a.nav-link:hover:after {
    transform: scaleX(1);
    transition: transform .3s;
  }
  
  .navbar-nav li.active a.nav-link {
    font-weight: 500;
  }

  ul.navbar-nav {
    align-items: center;
  }


  /* header boutons */
    .navbar-nav li .btn-outline-primary {
      border-radius: 0.4vw;
      height: 45px;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      white-space: nowrap;
      min-width: max-content;
      color: #fff;
      border-color: #8C51FF;
      background: #8C51FF;
      font-weight: bold;
      font-size: clamp(14px, 1vw,100px);
      vertical-align: middle;
    }
    .navbar-nav li .btn-outline-primary strong {
      font-size: clamp(14px, 1.25vw,26px);
      font-family: monospace;
      line-height: 0;
      margin-right: 5px;
      top: 2px;
      position: relative;
    }
    
    .navbar-nav li .btn-outline-primary:hover,
    .navbar-nav li .btn-outline-primary:active {
      color: #fff;
      border-color: #763de4;
      background: #763de4;
      animation-delay: 1200ms;
      animation-name: fadeInUp;
      opacity: 1;
    }
    
    .navbar-nav li .btn-outline-primary img {
      width: 1.1vw;
      margin-top: -3px;
      margin-right: 5px;
    }
  /* header notification */
    .kl-badge {
      color: #fff;
      background-color: #35303F;
      position: absolute;
      top: -1.2vh;
      right: -5px;
      font-size: clamp(10px, 0.8vw,26px) !important;
      border-radius: 20px !important;
      padding: 5px !important;
    }

  .sb-sidenav-dark .sb-sidenav-menu .nav-link {
    color: #6A6A6A;
    font-size: clamp(14px, 1.25vw,36px);
    font-weight: bold;
    border-left: 0.3vw solid #fff;
  }
  
  .sb-sidenav-dark .sb-sidenav-menu .nav-link:hover {
    color: #8C51FF;
    border-left: 7px solid #fff;
    transition: .1s ease-in-out;
  }
  
  .sb-sidenav-dark .sb-sidenav-menu .nav-link:focus {
    border-left: 7px solid #fff !important;
  }
  
  
  .sb-sidenav-dark .sb-sidenav-menu .nav-link:active {
    color: #8C51FF;
    border-left: 7px solid #8C51FF;
    transition: .1s ease-in-out;
  }
  
  .sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
    color: #8C51FF !important;
    border-left: 7px solid #8C51FF !important;
  }
  /* header Dashboard */
    #layoutAuthentication {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    
    #layoutAuthentication #layoutAuthentication_content {
      min-width: 0;
      flex-grow: 1;
    }
    
    #layoutAuthentication #layoutAuthentication_footer {
      min-width: 0;
    }
    .dataTable-wrapper .dataTable-container {
      font-size: 0.875rem;
    }
    
    .dataTable-wrapper.no-header .dataTable-container {
      border-top: none;
    }
    
    .dataTable-wrapper.no-footer .dataTable-container {
      border-bottom: none;
    }
    .dataTable-top {
      padding: 0 0 1rem;
    }
    
    .dataTable-bottom {
      padding: 0;
    }
    
    .dataTable-top>nav:first-child,
    .dataTable-top>div:first-child,
    .dataTable-bottom>nav:first-child,
    .dataTable-bottom>div:first-child {
      float: left;
    }
    
    .dataTable-top>nav:last-child,
    .dataTable-top>div:last-child,
    .dataTable-bottom>nav:last-child,
    .dataTable-bottom>div:last-child {
      float: right;
    }
    
    .dataTable-selector {
      width: auto;
      display: inline-block;
      padding-left: 1.125rem;
      padding-right: 2.125rem;
      margin-right: 0.25rem;
    }
    
    .dataTable-info {
      margin: 7px 0;
    }

    /* PAGER */

.dataTable-pagination a:hover {
  background-color: #e9ecef;
}

.dataTable-pagination .active a,
.dataTable-pagination .active a:focus,
.dataTable-pagination .active a:hover {
  background-color: #0d6efd;
}

.dataTable-pagination .ellipsis a,
.dataTable-pagination .disabled a,
.dataTable-pagination .disabled a:focus,
.dataTable-pagination .disabled a:hover {
  cursor: not-allowed;
}

.dataTable-pagination .disabled a,
.dataTable-pagination .disabled a:focus,
.dataTable-pagination .disabled a:hover {
  cursor: not-allowed;
  opacity: 0.4;
}

.dataTable-pagination .pager a {
  font-weight: bold;
}


/* TABLE */

.dataTable-table {
  border-collapse: collapse;
}

.dataTable-table>tbody>tr>td,
.dataTable-table>tbody>tr>th,
.dataTable-table>tfoot>tr>td,
.dataTable-table>tfoot>tr>th,
.dataTable-table>thead>tr>td,
.dataTable-table>thead>tr>th {
  vertical-align: top;
  padding: 0.5rem 0.5rem;
}

.dataTable-table>thead>tr>th {
  vertical-align: bottom;
  text-align: left;
  border-bottom: none;
}

.dataTable-table>tfoot>tr>th {
  vertical-align: bottom;
  text-align: left;
}

.dataTable-table th {
  vertical-align: bottom;
  text-align: left;
}

.dataTable-table th a {
  text-decoration: none;
  color: inherit;
}

.dataTable-sorter {
  display: inline-block;
  height: 100%;
  position: relative;
  width: 100%;
  padding-right: 1rem;
}

.dataTable-sorter::before,
.dataTable-sorter::after {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  right: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0.2;
}

.dataTable-sorter::before {
  bottom: 4px;
}

.dataTable-sorter::after {
  top: 0px;
}

.asc .dataTable-sorter::after,
.desc .dataTable-sorter::before {
  opacity: 0.6;
}

.dataTables-empty {
  text-align: center;
}

.dataTable-top::after,
.dataTable-bottom::after {
  clear: both;
  content: " ";
  display: table;
}

.btn-datatable {
  height: 20px !important;
  width: 20px !important;
  font-size: 0.75rem;
  border-radius: 0.25rem !important;
}
  /* header side nav */
    .sb-sidenav {
      display: flex;
      flex-direction: column;
      height: 100%;
      flex-wrap: nowrap;
    }
    
    .sb-sidenav .sb-sidenav-menu {
      flex-grow: 1;
    }
    
    .sb-sidenav .sb-sidenav-menu .nav {
      flex-direction: column;
      flex-wrap: nowrap;
    }
    
    .sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-heading {
      padding: 1.75rem 1rem 0.75rem;
      font-size: 0.75rem;
      font-weight: bold;
      text-transform: uppercase;
    }
    
    .sb-sidenav .sb-sidenav-menu .nav .nav-link {
      display: flex;
      align-items: center;
      padding-top: 1vh;
      padding-bottom: 1vh;
      position: relative;
      justify-content: start;
    }
    
    .sb-sidenav .sb-sidenav-menu .nav .nav-link .sb-nav-link-icon {
      font-size: 0.9rem;
    }
    
    .sb-sidenav .sb-sidenav-menu .nav .nav-link .sb-sidenav-collapse-arrow {
      display: inline-block;
      margin-left: auto;
      transition: transform 0.15s ease;
    }
    
    .sb-sidenav .sb-sidenav-menu .nav .nav-link.collapsed .sb-sidenav-collapse-arrow {
      transform: rotate(-90deg);
    }
    
    .sb-sidenav .sb-sidenav-menu .nav .sb-sidenav-menu-nested {
      margin-left: 1.5rem;
      flex-direction: column;
    }
    
    .sb-sidenav .sb-sidenav-footer {
      padding: 0.75rem;
      flex-shrink: 0;
    }
    
    .sb-sidenav-dark {
      background-color: #fff;
      color: #6A6A6A;
    }
    
    .sb-sidenav-dark .sb-sidenav-menu .sb-sidenav-menu-heading {
      color: rgba(255, 255, 255, 0.25);
    }
    
    .sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-nav-link-icon {
      color: rgba(255, 255, 255, 0.25);
    }
    
    .sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-sidenav-collapse-arrow {
      color: rgba(255, 255, 255, 0.25);
    }
    
    .sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
      color: #fff;
    }
    
    .sb-sidenav-dark .sb-sidenav-menu .nav-link.active .sb-nav-link-icon {
      color: #fff;
    }
    
    .sb-sidenav-dark .sb-sidenav-footer {
      background-color: #343a40;
    }
    
    .sb-sidenav-light {
      background-color: #f8f9fa;
      color: #212529;
    }
    
    .sb-sidenav-light .sb-sidenav-menu .sb-sidenav-menu-heading {
      color: #adb5bd;
    }
    
    .sb-sidenav-light .sb-sidenav-menu .nav-link {
      color: #212529;
    }
    
    .sb-sidenav-light .sb-sidenav-menu .nav-link .sb-nav-link-icon {
      color: #adb5bd;
    }
    
    .sb-sidenav-light .sb-sidenav-menu .nav-link .sb-sidenav-collapse-arrow {
      color: #adb5bd;
    }
    
    .sb-sidenav-light .sb-sidenav-menu .nav-link:hover {
      color: #0d6efd;
    }
    
    .sb-sidenav-light .sb-sidenav-menu .nav-link.active {
      color: #0d6efd;
    }
    
    .sb-sidenav-light .sb-sidenav-menu .nav-link.active .sb-nav-link-icon {
      color: #0d6efd;
    }
    
    .sb-sidenav-light .sb-sidenav-footer {
      background-color: #e9ecef;
    }
   
    .kl-sidebarToggle {
      display: none !important;
    }
  
    .kl-sidebar-toggle {
      display: none;
    }
  
    .kl-navbar-nav {
      position: fixed !important;
      top: 0;
      right: 0;
      left: 0;
      z-index: 9999;
      background-color: #fff;
      height: 9vh;
      padding: 15px 50px !important;
    }
  
    .navbar-nav li .btn-outline-primary {
      margin-left: 10px;
      margin-bottom: 0px;
    }
  
    .navbar-nav .dropdown-menu.show {
      left: -14px;
    }
  
    .kl-pro-left .dropdown-menu.show {
      left: 0;
    }

    /* header responsiv */
    @media screen and (max-width: 1200px){
      .navbar-nav li a.nav-link {
        font-size: 14px;
        padding: 7px 6px !important;
      }
    }
    @media screen and (max-width:  1080px){
      .kl-pro-left {
        margin-left: 0px;
      }
    }
    
    #layoutSidenav #layoutSidenav_nav {
      transform: translateX(0);
    }
  
    #layoutSidenav #layoutSidenav_content {
      margin-left: 0;
      transition: margin 0.15s ease-in-out;
    }
  
    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav {
      transform: translateX(-240px);
    }
  
    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content {
      margin-left: -240px;
    }
  
    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_content:before {
      display: none;
    }

    .tagz > .kl-label {
      margin-bottom: 5px;

    }
    
    @media screen and (max-width:  991.98px){
      .kl-sidebar-toggle {
        display: block;
      }

      .kl-navbar-nav {
        position: sticky !important;
        z-index: 9999;
        top: 0;
        right: 0;
        left: 0;
        height: 70px;
        background: #fff;
      }

      #navDoor{
        top: 70px;
      }
    
      .kl-navbar-nav .navbar-toggler {
        background: #35303F;
        padding: 5px 10px;
        font-size: 15px;
        line-height: 1.5;
        border-radius: .2rem;
        color: #fff;
      }
    
      .kl-navbar-nav ul.navbar-nav {
        text-align: center;
      }

      .kl-navbar-nav a.navbar-brand {
        margin-right: 0;
      }

      .kl-pro-left {
        margin-top: 15px;
      }

      .kl-sidebarToggle {
        background: #35303F;
        padding: 5px 8px !important;
        font-size: 16px !important;
        color: #fff !important;
        font-weight: bold;
      }
    
      .kl-sidebarToggle:hover,
      .kl-sidebarToggle:active {
        background: #000 !important;
      }

      .kl-sidebar-toggle a.btn {
        color: #fff;
        background: #35303F;
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 10px;
      }
    
      .kl-sidebar-toggle a.btn:hover,
      .kl-sidebar-toggle a.btn:active {
        color: #fff;
        border-color: #000;
        background: #000;
        animation-delay: 1200ms;
        animation-name: fadeInUp;
        opacity: 0.9;
      }

      button#sidebarToggle {
        text-decoration: none;
      }
    }
    @media screen and (max-width:  991px){
      #sidebarToggle {
        margin-right: 100px;
      }
      .kl-pro-left {
        margin-top: 0px;
      }
      .sb-sidenav .sb-sidenav-menu .nav .nav-link{
        justify-content: center;
      }
      .sb-sidenav-dark .sb-sidenav-menu .nav-link.active{
        background-color: #8c51ff33;
      }
    }

/*
==================================================
page babylone & edition
==================================================
*/
  .kl-card div.bootstrap-tagsinput {
    border: none !important;
    border-bottom: 1px solid #D8D8D8 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 20px;
    padding: 0 0 15px;
    overflow : hidden;
    cursor : default !important;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -o-inline-box;
    display: -ms-inline-box;
    display: -khtml-inline-box;
  }

  .kl-card {
    margin-bottom: 30px;
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    padding-bottom: 30px;
  }

  .kl-card-section {
    margin: 0 25px 50px 50px;
  }
  /* recherche */
    .search {
      background: #f0eff4;
      width: 100%;
      height: 120px;
      padding: 40px;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      margin: 0 auto;
      z-index: 5;
    }

    .search .form-inline {
      width: 285px;
      margin: 0 auto;
      position: relative;
    }

    .search .form-inline .form-control {
      width: 100% !important;
      background-color: #fff;
      border-color: #e4e4e6 !important;
      font: 500 1em/35px "Gilroy";
      color: #6a6a6a;
    }

    .search .btn {
      background: #fff;
      position: absolute;
      top: 1px;
      right: 1px;
      bottom: 1px;
      z-index: 1;
    }
  /* contenue page babylone */
    .tab-pane .kl-post-info {
      margin: 15px 0 0;
    }
    .tab3.tab-pane.active {
      display: block;
    }
    .media-body > p {
      white-space: pre-wrap;
    }

    #container-head-descri{
      max-width: 690px;
    }
    /* 1 colonne page babylone */
      .tab1 {
        position: relative;
        overflow: hidden;
      }
      .tab1 .item {
        max-width: 690px;
        margin: 0 auto;
        padding: 40px 0;
        position: relative;
      }
      .tab1 .item:after {
        content: '';
        /* background: #cecece; */
        height: 1px;
        position: absolute;
        bottom: 0;
        left: -50%;
        right: -50%;
      }
      .tab1 .item:last-of-type {
        padding-bottom: 0;
      }
      .tab1 .item:last-of-type:after {
        display: none !important;
      }
      .tab1 .kl-card-section {
        margin: 0 !important;
      }
    /* 2 colonnes page babylone */
      .tab2 {
        padding: 50px 40px 20px;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        -o-column-count: 2;
        -ms-column-count: 2;
        -khtml-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
        -o-column-gap: 0;
        -ms-column-gap: 0;
        -khtml-column-gap: 0;
        column-gap: 0;
      }
      
      .tab2 .item {
        margin-bottom: 20px;
        display: inline-block;
        width: 100%;
      }
      
      .tab2 .item .kl-card-section {
        margin: 0 10px;
      }
      
      .tab2 .item .kl-card-section img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
      
      .tab2 .item:nth-child(2) .kl-card-section img,
      .tab2 .item:nth-child(3) .kl-card-section img {
        height: auto;
      }
    /* 3 colonnes page babylone */
      .tab3 {
        padding: 50px 40px 20px;
        -moz-column-count: 3;
        -webkit-column-count: 3;
        -o-column-count: 3;
        -ms-column-count: 3;
        -khtml-column-count: 3;
        column-count: 3;
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
        -o-column-gap: 0;
        -ms-column-gap: 0;
        -khtml-column-gap: 0;
        column-gap: 0;
      }
      .tab3 .item .kl-card-section {
        margin: 0 10px;
      }
      .tab3 .item {
        margin-bottom: 20px;
        display: inline-block;
        width: 100%;
      }
      .tab3 .item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
      .tab3 .item:nth-child(2) img {
        height: 475px;
      }
      .tab3 .item:nth-child(3) img,
      .tab3 .item:nth-child(4) img,
      .tab3 .item:nth-child(6) img,
      .tab3 .item:nth-child(7) img,
      .tab3 .item:nth-child(8) img,
      .tab3 .item:nth-child(9) img {
        height: auto;
      }
  /* footer page babylone */
    .bloc-copy {
      margin-top: 45px;
      padding: 85px 0;
      border-top: 1px #cecece solid;
      font-size: 14px;
      font-weight: 700;
      color: #979797;
    }
    .bloc-copy img {
      display: block;
      width: 86px;
      height: auto;
      margin-left: 10px;
    }

    .bloc-copy.d-flex.justify-content-center.align-items-center {
      background-color: #F0F0F3;
    }

    .violet-page-babylone{
      color: #8C51FF;
    }

/*
==================================================
modale publication / modification
==================================================
*/
  .modal-backdrop {
    background-color: #fff;
  }

  .modal-backdrop.show {
    opacity: 84%;
    z-index: 9999 !important;
  }

  .kl-tuto-show .modal-backdrop.show {
    background: transparent;
  }

  .kl-modal-post.modal {
    z-index: 99999 !important;
    padding: 0 /* !important; */;
    margin-bottom: 30px;
  }

  .modal-dialog .modal-dialog-centered{
    overflow-x: hidden;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .custom-control-label {
    cursor: pointer;
  }

  .custom-control-label::before {
    border: #6a6a6a solid 1px;
    height: 19px;
  }

  .custom-switch .custom-control-label::before {
    width: 32px;
    border-radius: 20px;
  }

  .custom-switch::before {
    transform: scale(1.5); /* Ajustez la valeur pour changer la taille */
  }

  .custom-switch .custom-control-label::after {
    width: calc(1rem - 1px);
    height: calc(1rem - 1px);
    background-color: #6A6A6A;
  }

  .custom-control-input:checked~.custom-control-label::before {
    border-color: #35303f;
    background-color: #35303f;
  }

  .kl-switch-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f0f0f3;
    padding: 10px 40px;
    margin: 0 -40px;
    cursor: pointer;
    transition: all ease-in-out 0.2s;
  }

  .kl-switch-account:hover {
    opacity: 0.9;
    background: #faf7ff;
  }

  .kl-switch-account .kl-switch-in {
    display: flex;
    align-items: center;
  }

  .kl-switch-account .kl-switch-in h4 {
    margin: 0 15px;
    font-size: clamp(14px, 1.5vw,56px);
  }

  .kl-addimg {
    text-align: center;
    margin: 15px 0 60px;
  }

  .kl-addimg .btn-secondary {
    color: #fff;
    background-color: #8C51FF;
    border-color: #8C51FF;
    height: 50px;
    font-weight: bold;
    font-size: 16px;
    width: 316px;

  }

  .kl-addimg .btn-secondary:hover {
    color: #fff;
    border-color: #763de4;
    background: #763de4;
    animation-delay: 1200ms;
    animation-name: fadeInUp;
  }

  .kl-modal-post h5.modal-title {
    color: #35303F;
    font-size: clamp(16px, 1.8vw,52px);
  }

  .kl-modal-post a.nav-link {
    color: #979797;
    font-size: clamp(16px, 2.3vw,100px);
    font-weight: bold;
    border-color: transparent!important;
  }

  .kl-modal-post .nav-tabs .nav-item.show .nav-link, .kl-modal-post .nav-tabs .nav-link.active {
      color: #35303F;
      background-color: #fff;
      border-color: transparent!important;
      cursor: default;
  }

  .kl-modal-post .nav-tabs {
      border-bottom: 1px solid transparent!important;
  }

  .kl-modal-post button.close {
    background-color: #F0F0F3;
    border: 0;
    height: 57px;
    width: 57px;
    margin: 0 !important;
    padding: 10px !important;
    font-size: 4.2rem;
    font-weight: 300;
    line-height: 0.5;
    color: #35303F;
    text-shadow: none;
    opacity: 1;
    border-radius: 50px;
  }

  .kl-modal-post .modal-header {
    padding-bottom: 0;
    border: none;
    align-items: center;
  }

  .kl-modal-delete .modal-header {
    display: block;
  }

  .kl-modal-delete .kl-btn2-project {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
  }

  .kl-modal-delete .kl-btn2-project .btn-primary {
    margin: 0;
    border: 2px solid #8C51FF;
    height: 45px;
    padding: 0;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    background-color: #8C51FF;
    width: 47%;
  }

  .kl-modal-delete .kl-btn2-project .btn-primary:hover {
    border: 2px solid #8C51FF;
    color: #8C51FF;
    background: #fff;
  }

  .kl-modal-delete .kl-btn2-project .btn-secondary {
    margin: 0;
    border: 2px solid #8C51FF;
    height: 45px;
    padding: 0;
    color: #8C51FF;
    background: #fff;
    font-size: 16px;
    font-weight: bold;
    width: 47%;
  }

  .kl-modal-delete .kl-btn2-project .btn-secondary:hover {
    border: 2px solid #8C51FF;
    color: #fff;
    background-color: #8C51FF;
  }

  .kl-modal-delete .modal-header {
    padding: 20px 25px 25px !important;
  }

  .kl-modal-delete .modal-body {
    padding: 0 25px 15px !important;
  }

  .modal-header > img.img-fluid {
    right: 2vw;
    top: 10px;
  }

  .kl-modal-post .modal-header img {
    position: absolute;
    cursor: pointer;
  }

  .kl-modal-post .modal-header img:hover {
    opacity: 0.7;
  }

  .kl-modal-post .modal-content {
    top: 5%;
    border: none;
    width: 100%;
    height: fit-content;
    max-height: 90vh;
    overflow: scroll;
    min-width: 500px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
    -o-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
    -ms-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
    -khtml-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
  }

  .kl-modal-post .kl-label {
    margin-bottom: 5px;
    font-size: clamp(14px, 1.3vw,100px);
    font-weight: bold;
    text-wrap: nowrap;
  }

  .kl-modal-post .modal-body {
    padding: 0 40px;
  }

  .kl-modal-post .form-control {
    height: 50px;
    font-size: clamp(16px, 1vw,100px);
    font-weight: 500;
    color: #6A6A6A;
    border: 1px solid #D8D8D8;
    border-radius: 5px;
  }

  .kl-input-error {
    border: 1px solid #fb4e6e!important;
  }

  .kl-modal-post .form-group {
    margin-bottom: 1vh;
  }

  .kl-modal-forgot-password .form-group {
    margin-bottom: 30px;
  }

  .kl-modal-forgot-password .kl-label {
    margin-bottom: 25px;
  }

  .kl-modal-post .kl-date-modal-switch {
    margin-bottom: 25px !important;
  }

  .kl-modal-post .kl-date-modal-switch .custom-control-label {
    display: flex;
  }

  .kl-modal-post .bootstrap-tagsinput {
    height: 50px;
    font-size: 16px;
    font-weight: 500;
    color: #6A6A6A;
    border: 1px solid #D8D8D8;
    border-radius: 5px;
    box-shadow: none;
  }

  .kl-modal-post .bootstrap-tagsinput input {
    padding: 7px 7px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.7;
    color: #6A6A6A;
  }

  .kl-modal-post select.form-control {
    background-image: url(../img/stroke.svg);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    -khtml-appearance: none;
    appearance: none;
    font-family: 'Gilroy';
  }

  .kl-upload-file .btn-primary {
    color: #35303F;
    background-color: #fff;
    border: 2px solid #35303F;
    height: 50px;
    padding: 11px 0;
    font-weight: bold;
  }

  .kl-upload-addimg-account {
    text-align: center;
    margin: 25px 0 75px;
  }

  .kl-upload-gcp {
    text-align: left;
    margin: 0 0 30px;
    display: inline-block;
    cursor: pointer;
  }

  .kl-upload-gct {
    margin: 5px 0 15px;
    text-align: left;
  }

  .kl-upload-gcp a.btn.btn-primary {
    padding: 0;
    width: auto;
    height: auto;
    margin: 0;
    color: #8c51ff!important;
    background: #fff!important;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
  }

  div.kl-upload-gct .btn-primary {
    color: #35303F;
    background-color: #fff;
    border: 2px solid #35303f;
    height: 50px;
    padding: 11px 0;
    font-weight: bold;
    width: 316px;
  }

  div.kl-upload-gct .btn-primary:hover, div.kl-upload-gct .btn-primary:active {
    color: #fff!important;
    border-color: #35303f!important;
    background: #35303f!important;
    animation-delay: 1200ms;
    animation-name: fadeInUp;
  }

  .kl-upload-addimg-account .btn-primary {
    color: #fff;
    background-color: #8c51ff;
    border: 2px solid #8c51ff;
    height: 50px;
    padding: 11px 0;
    font-weight: bold;
    width: 316px;
  }

  .kl-upload-addimg-account .btn-primary:hover, .kl-upload-addimg-account .btn-primary:active {
    color: #fff;
    border-color: #763de4;
    background: #763de4;
    animation-delay: 1200ms;
    animation-name: fadeInUp;
  }

  .kl-upload-addimg-account .btn-primary:hover,
  .kl-upload-addimg-account .btn-primary:active {
    color: #fff;
    border-color: #763de4!important;
    background: #763de4!important;
    animation-delay: 1200ms;
    animation-name: fadeInUp;
  }

  .kl-upload-file .btn-primary:hover,
  .kl-upload-file .btn-primary:active {
    color: #fff;
    cursor: pointer !important;
    /* background-color: #35303F;
    border: 2px solid #35303F; */
  }

  .kl-upload-file .kl-upload-input {
    position: absolute;
    /* z-index: 2; */
    top: 0;
    left: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    background-color: transparent;
    color: transparent;
    width: 100%;
    right: 0;
    bottom: 0;
    font-size: 0;
    cursor: pointer;
  }

  .kl-social-switch .custom-control.custom-switch {
    margin-bottom: 10px;
    margin-right: 10px;
  }

  .kl-social-switch .custom-control-label {
    font-size: clamp(14px, 1vw,26px);
    font-weight: bold;
  }

  .kl-social-switch .custom-control-label span {
    margin-left: 3px;
    font-weight: normal;
  }

  .kl-social-modal {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    flex-wrap: wrap;
  }

  .kl-social-modal-recur {
    margin-top: 0px;
  }

  .kl-modal-post textarea.form-control {
    height: 188px !important;
    resize: none;
  }

  p.form-control.generale,
  div.form-control.generale{
    height: 50px;
    width: 80%;
    max-width: 100%;
    text-align: middle;
    resize: vertical;
    overflow: auto !important;
    min-height: 50px;
    background-color: rgb(247, 247, 247);
    border: #8c51ff 2px solid;
    border-radius: 5px;
  }

  p.form-control.tEaMrep,
  div.form-control.tEaMrep{
    height: 30px;
    width: 100%;
    text-align: middle;
    resize: vertical;
    overflow: auto;
    min-height: 50px;
    margin-top: 5px;
    max-width: 250px;
    background-color: rgb(247, 247, 247);
    border: #ffcac9 2px solid;
    white-space: pre-wrap;
  }
  .svg-inline--fa{
    top: 30px;
  }

  .kl-modal-post .bootstrap-tagsinput:focus,
  .kl-modal-post .bootstrap-tagsinput:active {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
  }

  .kl-modal-post .modal-footer {
    justify-content: flex-start;
    border: none;
  }

  .kl-modal-post .modal-footer .btn-secondary {
    color: #fff;
    background-color: #8C51FF;
    border-color: #8C51FF;
    height: 45px;
    font-weight: bold;
    font-size: 16px;
    max-width: 316px;
    width: 100%;
  }

  .kl-modal-post .modal-footer .btn-secondary:hover {
    color: #fff;
    border-color: #763de4;
    background: #763de4;
    animation-delay: 1200ms;
    animation-name: fadeInUp;
  }

  .kl-modal-post .kl-modal-footer {
    justify-content: space-between;
  }

  .kl-modal-post .kl-modal-footer .kl-delete-media {
    color: #FF5182;
    font-weight: bold;
    font-size: clamp(16px, 1vw,100px);
  }

  .clickToPlay {
    background-color: #8C51FF !important;
  }

  video.embed-responsive-item {
    border-radius: 10px;
  }

  div.spinner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:none;
    border:8px solid rgba(0,0,0,.1);
    border-left-color:#8C51FF;
    height:60px;
    min-height:60px;
    width:60px;
    border-radius:50%;
    z-index: 1;
    animation: rotate linear 2s infinite;
    animation-delay: 0ms;
  }

  @keyframes rotate{
    from{
        transform: rotateZ(0deg);
    }
    to{
        transform: rotateZ(360deg);
    }
  }

  .kl-preview-thumbnail {
    color: #35303F;
    background-color: #fff;
    border: 2px solid #35303F;
    height: 50px;
    padding: 11px 0;
    font-weight: bold;
    width: 100%;
    text-align: center;
  }

  button.btn.kl-preview-thumbnail:hover,
  button.btn.kl-preview-thumbnail:active {
    color: #fff;
    background-color: #35303F;
    border: 2px solid #35303F;
  }

  .kl-card-aside .nav-tabs {
    border-bottom: 1px solid #D8D8D8;
    margin: -40px 0px 30px;
    background: #fff;
    justify-content: space-evenly;
    height: 55px;
    align-items: center;
  }
  
  .kl-card-aside .nav-tabs li {
    margin-bottom: 1px;
  }
  
  .kl-card-aside .nav-tabs li a {
    border: none;
    color: #979797;
    font-size: 20px;
    font-weight: bold;
    padding: 12px;
    transition: all 0.3s ease-in-out;
  }

  .kl-card-aside .nav-tabs li a:hover{
    color: #898787;
  }
  
  .kl-card-aside .nav-tabs li a.active {
    color: #35303F;
  }

  .slide-img .img video {
    width: 100%;
    height: 490px;
    object-fit: cover
  }

  .btn-video { background:url(../img/play.svg); width: 82px; height: 82px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border:none; font-size: 0; background-size: cover;opacity: 0.7;  -o-transition: all 225ms ease-in-out 0ms;
    -webkit-transition: all 225ms ease-in-out;
    -moz-transition: all 225ms ease-in-out;
    -o-transition: all 225ms ease-in-out;
    -ms-transition: all 225ms ease-in-out;
    -khtml-transition: all 225ms ease-in-out;
    transition-delay: 0ms;
    transition: all 225ms ease-in-out 0ms; }

    .btn-video2 { background:url(../img/play.svg); width: 82px; height: 82px; position: absolute; margin: auto; border:none; font-size: 0; background-size: cover;opacity: 0.7;  -o-transition: all 225ms ease-in-out 0ms;
      -webkit-transition: all 225ms ease-in-out;
      -moz-transition: all 225ms ease-in-out;
      -o-transition: all 225ms ease-in-out;
      -ms-transition: all 225ms ease-in-out;
      -khtml-transition: all 225ms ease-in-out;
      transition-delay: 0ms;
      transition: all 225ms ease-in-out 0ms; }
  
  .btn-video:hover, .btn-video2:hover { opacity: 1 }

  .btn-video.active { background-image:url(../img/play.svg); }

  .lstFormulaire.active { display: block; }
  .lstFormulaire { display: none; }

  /* modal publication / modification  */
      #mode-publi-container{
        display: flex;
        justify-content: space-between;
      }

      #ajout-publi-button-mode{
        display: flex;
        justify-content: space-between;
      }

  /* modal publication / modification boutton */
    .btn-primary.newPost:hover { 
      transform: rotate(0deg) scale(1.2); 
      position: static;
    }
    
    .btn-primary.newPost:active {
      background-color: transparent !important;
    }

    .link.suivant {
      color: #fff;
      background-color: #8C51FF;
      border: #8C51FF solid 2px;
      height: 45px;
      font-weight: bold;
      font-size: clamp(14px, 1vw,100px);
      width: 316px;
      display: inline-block;
      text-align: center;
      line-height: 43px;
      border-radius: 5px;
      transition: transform 0.15s ease-in-out;
    
    }
    .link.suivant:hover { 
      text-decoration: none; 
      border-color: #763de4;
      background: #763de4;  
    }

    .link.retour {
      color: #8c51ff;
      font-weight: 700;
    }

    .link.retour:hover {
      color: #763de4;
      font-weight: 700;
      text-decoration: none
      /* color: #8c51ff;
      font-weight: 700; */
    }

    .btn-format {
      position: absolute;
      left: 20px;
      bottom: 20px;
      z-index: 20 ;
      text-align: left;
    }

    .btn-format a {
      display: inline-block;
      color: #fff;
      background-color: #8C51FF;
      font-size: 16px;
      font-family:Gilroy;
      font-weight: bold;
      padding: 5px 10px;
      vertical-align: middle;
      border-radius: 5px;
    }

    #formatMedia, #formatModif {
      display:none !important;
    }

    .btn-format a img {
      margin-right: 7px;
      margin-top: -4px
    }

    .btn-format a:hover {
      text-decoration: none;
      background-color:#763de4;
    }

    .control-group {
      background-color: #fff;
      padding: 10px 0;
      border-radius: 5px;
      text-align: left;
    }

    .control-group label {
      display: block;
      font-family: Gilroy;
      font-weight: 700;
      padding-left: 40px;
      padding-right: 20px;
      border-bottom: #F0F0F3 solid 1px;
      padding-bottom: 7px;
      cursor: pointer;
      position: relative;
    }

    .control-group label:last-child { 
      border-bottom: none;
      padding-bottom: 0;
     }

    .control-group label span {
      font-weight: 400;
    }

    .control input {
      position: absolute;
      z-index: -1;
      opacity: 0;
    }

    .control_indicator {
      position: absolute;
      top: 7px;
      left: 13px;
      height: 14px;
      width: 18px;
      opacity: 0      
    }

    .control input:focus ~ .control_indicator {
      opacity: 1
    }

     .control input:checked ~ .control_indicator {
      opacity: 1
    }

    .lst-format {
      margin-bottom: 20px;
    }

    .btn-format .lst-format  {
      opacity: 0;
      -moz-transition: all 225ms ease-in-out 0ms;
      -o-transition: all 225ms ease-in-out 0ms;
      -webkit-transition: all 225ms ease-in-out;
      -moz-transition: all 225ms ease-in-out;
      -o-transition: all 225ms ease-in-out;
      -ms-transition: all 225ms ease-in-out;
      -khtml-transition: all 225ms ease-in-out;
      -webkit-transition-delay: 0ms;
      -moz-transition-delay: 0ms;
      -o-transition-delay: 0ms;
      -ms-transition-delay: 0ms;
      -khtml-transition-delay: 0ms;
      transition: all 225ms ease-in-out 0ms; display: none; 
    }

    .btn-format.active .lst-format  {
      opacity: 1 ;
      z-index: 31;
      display: block;
    }

    .img-upload {
      width: 100%;
      height: 55vh;
      background-color: #F0F0F0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .img-upload .kl-upload-file .btn-primary {
      border-color: #8C51FF;
      color: #8C51FF;
      max-width: 312px;
      padding: 11px 30px;
      background-color: transparent;
    }

    .img-upload .kl-upload-file .btn-primary:hover {
      background-color:#8C51FF;
      color: #fff
    }

    .link.retour img {
      margin-right: 8px;
    }

    .link.suivant.etape2 img {
      margin-left: 10px;
    }

    .tailledescr{
      height: 500px;
    }
    .quatrepx>.padbot{
      margin-bottom: 5px;
    }

    .cinco{
      padding-top: 4px;
    }

    /* range barre video */
      .range_publi_video{
        appearance: none;
        margin-top: 4%;
        margin-bottom: 3%;
        height: 15px;
        width: 65%;
        background: #8c51ff8c;
        border-radius: 10px;
        border-color: #763de4;
      }
      /* boutton pour bouger la barre */
        /* Pour WebKit (Chrome, Safari, Opera) */
    .range_publi_video::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 25px;
      width: 25px;
      border-radius: 50%;
      background: #763de4;
      cursor: ew-resize;
      transition: background 1s ease-in-out;
    }

    /* Pour Mozilla Firefox */
    .range_publi_video::-moz-range-thumb {
      height: 25px;
      width: 25px;
      border-radius: 50%;
      background: #763de4;
      cursor: ew-resize;
      transition: background 1s ease-in-out;
    }

    /* Pour Microsoft Edge et les versions récentes d'Internet Explorer */
    .range_publi_video::-ms-thumb {
      height: 25px;
      width: 25px;
      border-radius: 50%;
      background: #763de4;
      cursor: ew-resize;
      transition: background 1s ease-in-out;
    }

    /* Pour tous les autres navigateurs */
    .range_publi_video::thumb {
      height: 25px;
      width: 25px;
      border-radius: 50%;
      background: #763de4;
      cursor: ew-resize;
      transition: background 1s ease-in-out;
    }

    #apercuDescriptionModale {
      word-break: break-word;
    }
        /* boutton pour bouger la barre */
/* .range_publi_video::-webkit-slider-thumb{
  -webkit-appearance: none;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: #763de4;
  cursor:ew-resize;
  transition: background 1s ease-in-out;
} */
    /* button pour ajouter une photo de couverture */
      .card-video .kl-upload-file .btn-primary input {
        position: absolute;
        width: 65%;
        top: 5%;
        font-size: 0;
      }
    
    input.boxcouverture{
      position: relative;
      appearance: none; 
      outline: none;
      width: 50px; 
      height: 30px;
      background-color: #fff; 
      border: 1px solid #D9DADC;
      border-radius: 50px; 
      box-shadow: inset -20px 0 0 0 #9150ff;
      transition-duration: 200ms;
    }
    
    input.boxcouverture:after{
      position: absolute;
      top: 1px; 
      left: 1px;
      width: 26px; 
      height: 26px;
      background-color: transparent;
      border-radius: 50%; 
      box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
    }
    
    input.boxcouverture:checked{
      border-color: #caa6e5;
      box-shadow: inset 20px 0px 0 0 #8c51ff8c;
    }
    
    input.boxcouverture:after:checked{
      left: 20px;
      box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
    }

  .carousel-control-prev{
    left: 0;
    margin: auto;
    height: 20%;
  }

  .carousel-control-next {
    right: 0;
    margin: auto;
    height: 20%;
  }

  .quatrepx > .kl-social-modal > .custom-switch > .custom-control-label{
    padding-top: 3px;
  }

  #changePubliForm > .field > .lstFormulaire > .tab-content > .tab-pane > .modal-body > .row > .col-lg-6 > .kl-social-switch > .kl-social-modal > .custom-switch > .custom-control-label{
    padding-top: 3px;
  }

  p#apercuDescriptionModale-change {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  textarea#description {
    height: max-content !important;
  }

  textarea#descriptioninput{
    height: 100% !important;
  }
  .cam-aj-tag {
    display: flex;
  }

  .cam-aj-tag > .col-md-4{
    padding-left: 0;
  }

  .tags-lbl{
    margin-top: 5%;
    margin-bottom: 5% !important;
    color: #8c51ffe6;
  }
  #apercuDescriptionModale-change{
    white-space: pre-wrap;
  }

  #feed-filtre-reseaux{
    display: flex;
    align-items: flex-end;
    width: 23%;
    height: auto;
  }

  /* modal publication / modification taille publication par defaut */

    div#imageParDefaut {
      height: 100%;
    }

  /* modal publication / modification Upload un media */
    .kl-upload-input.apercusVideos:hover{
      cursor: pointer;
    }
  /* modal publication / modification bouton */
    .kl-modal-footer.modal-footer.justify-content-end {
      display: flex;
      text-align: center;
    }

    #etape1Thread > .tab-content > .tab-pane > .modal-body > .row > .col-lg-6 > #date-publication, #staticBackdropNewEvent > .modal-dialog > .modal-content > #newEventForm > .field > .tab-content > .tab-pane > .modal-body > .row > .col-lg-6 > #date-publication, #newLiveForm > .field > .tab-content > .tab-pane > .modal-body > .row > .col-lg-6 > #date-publication{
      padding-top: 0;
    }
  /* modal publication / modification responsiv */
    @media screen and (max-width: 1375px){
      .kl-modal-change-account .modal-dialog {
        max-width: 45%;
      }
    }
    
    /* @media screen and (max-width: 1115px){
      .tab3 .item {
        width: 100%;
      }
    } */
    @media screen and (max-width: 1112px){
      .dbr{
        bottom: 23.8px;
        padding-top: 5%;
      }
      .cap{
        padding-top: 23px;
      }
      .dfr{
        padding-top: 5%;
      }
    }
    @media screen and (max-width:  1080px){ 
      .padbot{
        padding-bottom: 0.5vh;
      }
      .quatrepx{
        padding-bottom: 4px;
      }

      .cinco{
        padding-top: -5px;
      }
      .multititle{
        padding-top: 0px;
      }
    }

    @media screen and (max-width:  1006px){
      .L1{
        top: 0px;
      }
      .multititle{
        margin-bottom: 0px !important;
        padding-top: 23px;
      }
      .cap{
        padding-top: 20px;
      }
      .dfr{
        padding-top: 5%;
      }
    }
   
    @media screen and (max-width:  991.98px){
      .kl-switch-in > .imgUser2 {
        margin-left: 0;
      }
      .kl-modal-post .modal-dialog {
        margin: 56px auto;
      }
      .bootstrap-tagsinput .badge span {
        padding-right: 15px;
      }
      .bootstrap-tagsinput .badge span:after {
        opacity: 1!important;
        right: -5px!important;
      }
      .kl-card-aside .kl-comment-top {
        font-size: 25px;
      }
    }
    @media screen and (max-width: 991px){
      .mount{
       padding-top: 10px;
      }     
      .dbr{
        padding-top: 5%;
      }
      /* div.form-control.generale{
        width: 100%;
      } */
    }
    @media screen and (max-width: 940px){
      .kl-card-aside .nav-tabs {
        border-bottom: 1px solid #D8D8D8;
        margin: -40px 35px 30px;
        background: #fff;
        justify-content: space-evenly;
        height: 55px;
        align-items: center;
        width: 305px;
      }
      /* div.form-control.generale{
        height: 50px;
        width: 100%;
        max-width: 400px;
        text-align: middle;
        resize: vertical;
        overflow: scroll;
        min-height: 50px;
        background-color: rgb(247, 247, 247);
        margin: 0px 0px 0px 10px;
        border: #8c51ff 2px solid;
        border-radius: 5px;
        flex-wrap: wrap;
      } */
    }
    @media screen and (max-width: 898px){
      .kl-card-aside .nav-tabs {
        border-bottom: 1px solid #D8D8D8;
        margin: -40px 25px 30px;
        background: #fff;
        justify-content: space-evenly;
        height: 55px;
        align-items: center;
        width: 305px;
      }
    }
    @media screen and (max-width:  873px){
      .quatrepx > .kl-social-modal {
        justify-content: flex-start;
      }
      .kl-social-switch .custom-control.custom-switch {
        margin-left: 10px;
      }
    }
    @media screen and (max-width: 845px){
      .kl-card-aside .nav-tabs {
        border-bottom: 1px solid #D8D8D8;
        margin: -40px 15px 30px;
        background: #fff;
        justify-content: space-evenly;
        height: 55px;
        align-items: center;
        width: 100% !important;
        margin-left: 0px;
      } 
    }
    @media screen and (max-width: 800px){
      .kl-card-aside .nav-tabs {
        border-bottom: 1px solid #D8D8D8;
        margin: -40px 10px 30px;
        background: #fff;
        justify-content: space-evenly;
        height: 55px;
        align-items: center;
        width: 100% !important;
        margin-left: 0px;
      }
    }
 
    @media screen and (max-width:  767.98px){
      .kl-modal-post a.nav-link {
        padding-left: 0;
      }
      .kl-switch-account:hover {
        background: transparent;
      }
      .kl-card-aside .nav-tabs {
        margin: -20px -20px 30px;
        justify-content: space-evenly;
      }
      .kl-card-aside {
        top: 0;
        padding: 20px;
        position: relative;
        margin: 0 15px 50px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }
      .kl-modal-post h5#staticBackdropLabel {
        color: #35303F;
        font-size: 25px;
        margin-right: 15px;
      }
      .kl-upload-file {
        margin-top: 15px;
      }
      .kl-modal-post .modal-footer {
        padding: 0 25px 25px;
      }
      .kl-tag-form {
        margin-bottom: 0;
      }
      .kl-modal-post .modal-header img {
        width: 45px;
        height: 45px;
      }
      .link.suivant {
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
      }
      .btn-video, .btn-video2 {
        width: 50px;
        height: 50px;
        background-size: cover;
      }
      .kl-social-modal {
        display: block;
      }
      .img-upload {
        height: 300px;
        width: 100%;
      }
    }
    @media screen and (max-width:  767px){
      /* div.form-control.generale{
        height: 50px;
        width: 80%;
        max-width: 400px;
        text-align: middle;
        resize: vertical;
        overflow: scroll;
        min-height: 50px;
        background-color: rgb(247, 247, 247);
        margin: 0px 0px 0px 10px;
        border: #8c51ff 2px solid;
        border-radius: 5px;
        flex-wrap: wrap;
      } */
      .dbr{
        padding-top: 0%;
      }
    }
    @media screen and (max-width: 755px){
      .dist{
        padding-top: 2%;
      }
      .tagz{
        margin-bottom: 3% !important;
      }
    }
    @media screen and (max-width: 654px){
      .tab3 .item {
        width: 100%;
      }
    }
    @media screen and (max-width:  574.98px){
      .kl-modal-post .kl-modal-footer .btn-secondary {
        order: 2;
      }
      .kl-modal-post .modal-footer.blc-bouton .btn-secondary {
        line-height: 36px;
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
      }
      #sortable .col_upload_photo .kl-upload-file {
        margin-top: 0;
      }

      .tagz > .row > .col-md-4{
        width: 100%;
      }

      #date-publication{
        flex-direction: column;
        gap: 10px;
      }

      #date-publication > div {
        width: 100%;
        padding-top: 0 !important;
        margin-bottom: 0;
      }

      #ajout-publi-button-mode{
        flex-direction: column;
      }

      #toastNewSeriePubli > .row > .col-lg-6 > .form-group > .row{
        flex-direction: column;
      }

      .col-md-4{
        width: 100%;
      }
    }
    @media screen and (max-width: 530px){
      .kl-modal-post .modal-content{
        min-width: 375px;
      }

      .kl-modal-post h5#staticBackdropLabel{
        margin: 0;
      }

      .container-comptes-cadre{
        max-height: 60vh;
      }
    }
    @media screen and (max-width:  424.98px){
      .kl-upload-addimg-account .btn-primary {
        white-space: normal;
        width: 100%!important;
      }
      .kl-modal-delete .modal-body {
        padding: 0 25px 70px;
      }
    }  
    @media screen and (max-width:  420px){
      .kl-modal-post button.close {
        height: 40px;
      }
    }
    @media screen and (max-width: 400px){
      a.navbar-brand > .img-fluid {
        width: 100px;
      }
      #sidebarToggle {
        margin-right: 60px;
      }
    }
    @media screen and (max-width:  385px){
      .kl-modal-post .modal-content {
        min-width: 300px;
      }

      #valider_change_profile {
        margin-bottom: 7px;
      }
    }
    @media screen and (max-width: 300px){
      .kl-card-aside .nav-tabs {
        border-bottom: 1px solid #D8D8D8;
        margin: -40px 0px 30px;
        background: #fff;
        justify-content: space-evenly;
        height: 55px;
        align-items: center;
      }
    }

/*
==================================================
feed
==================================================
*/
  .kl-head-item h3 {
    color: #6A6A6A;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 1.5;
    letter-spacing: 1px;
    margin: 0;
  }

  .block-item h4,
  .block-item h5 {
    font-size: 16px;
    word-break: break-all;
  }

  .kl-datelist-in input.form-control {
    padding: 0;
    width: 70px;
    border: none;
    box-shadow: none;
    font-size: 16px;
    font-weight: bold;
    color: #35303F !important;
    cursor: pointer;
    caret-color: transparent;
    background-color: transparent;
    filter: brightness(0.5);
  }

  .kl-datelist-in input.form-control:disabled{
    background-color:white;
  }

  .kl-datelist-in.campagne {
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 16px;
    color: #6A6A6A;
  }

  .kl-datelist-in.campagne input.form-control {
    font-weight: normal;
    color: #6A6A6A;
    width: 160px;
    margin-left: 5px;
  }

  .datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-top {
    z-index: 9999!important;
  }

  .kl-datelist-in input.form-control::-moz-placeholder {
  color: #35303F;
  }

  .kl-datelist-in input.form-control::-ms-input-placeholder {
  color: #35303F;
  }

  .kl-datelist-in input.form-control::-webkit-input-placeholder, .kl-datelist-in input.form-control::-o-input-placeholder, .kl-datelist-in input.form-control::-khtml-input-placeholder {
  color: #35303F;
  }

  .kl-img-pub .kl-middle-before .kl-datelist-in input.form-control {
    color: #fff;
    background: transparent;
    text-align: center;
    margin-bottom: 0.5rem;
  }

  .kl-img-pub .kl-middle-before .kl-datelist-in input.form-control::-moz-placeholder {
  color: #fff;
  }

  .kl-img-pub .kl-middle-before .kl-datelist-in input.form-control::-ms-input-placeholder {
  color: #fff;
  }

  .kl-img-pub .kl-middle-before .kl-datelist-in input.form-control::-webkit-input-placeholder, .kl-img-pub .kl-middle-before .kl-datelist-in input.form-control::-o-input-placeholder,.kl-img-pub .kl-middle-before .kl-datelist-in input.form-control::-khtml-input-placeholder {
  color: #fff;
  }

  .block-item .badge-info {
    color: #fff;
    background-color: #35303F;
    font-size: 12px;
    border-radius: 20px;
    padding: 5px 10px;
    margin-bottom: 5px;
  }

  span.badge.badge-info {
    display: flex;
    border: 2px solid #8c51ff;
    border-radius: 3px;
    color: #8c51ff;
    background-color: white;
    align-items: center;
    justify-content: center;
  }
  /* feed image */
    .kl-img-pub .ico {
      width: 40px;
      height: 40px;
      background-color: rgba(255,255,255,0.8);
      display: block;
      position: absolute;
      right: 10px;
      bottom: 7px;
      border-radius: 50%;
    }
    .kl-img-pub .ico.img { background:url(../img/images.svg) no-repeat center ;  background-color: rgba(255,255,255,0.8);}
    .kl-img-pub .ico.video { background:url(../img/video.svg) no-repeat center ;  background-color: rgba(255,255,255,0.8);}
    .kl-img-pub:hover .ico {
      z-index: -1;
    }
    h5.obligborder{
      -webkit-text-stroke: 0.5px black;
      -moz-text-stroke: 0.5px black;
      -o-text-stroke: 0.5px black;
      -ms-text-stroke: 0.5px black;
      -khtml-text-stroke: 0.5px black;
    }
  /* feed titre */
    input.kl-title-postpub {
      font-size: 16px !important;
      width: 103px !important;
      
    }
    
    textarea.kl-title-postpub {
      font-size: 16px !important;
      /* width: 103px ; */
      max-height: 150px;
      line-height: 1.3;
      overflow: hidden;
      width: 100% !important;
      white-space: pre-wrap !important;
      /* height: 21px !important; */
      background-color: transparent;
    }
  /* feed bouttons */
    .block-item button.btn.btn-primary {
      width: auto;
      height: 40px;
      border: 2px solid #8C51FF;
      background-color: #fff;
      color: #8C51FF;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .block-item button.btn.btn-primary:hover {
      border: 2px solid #8C51FF;
      background-color: #8C51FF;
      color: #fff;
    }
    button#go {
      margin-right: 3.5%;
    }
    .grid-view-radio:checked~.content-container .block-item, .insta-view-radio:checked~.content-container .block-item{
      float: left;
      margin-right: 0;
      width: 100%;
      aspect-ratio: 1/1;
      padding: 7px;
      text-align: center;
      text-align: -webkit-center;
      text-align: -moz-center;
      text-align: -o-center;
      text-align: -ms-center;
      text-align: -khtml-center;
    }

  .block-item a.kl-del-med {
    color: #FF5182;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
  }

  .block-item a.kl-del-med:hover {
    color: #f73030;
    text-decoration: none;
  }

  .block-item .form-check {
    margin-right: 10px;
    bottom: -3px;
    align-self: center;
  }

  .block-item .form-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }

  .block-item .form-check .form-check-input {
    outline: auto;
    outline-color: transparent;/*#8c8c8c*/;
  }

  .block-item a.kl-trash {
    color: #6A6A6A;
    cursor: default;
    pointer-events: none;
  }

  .block-item a.kl-trash:hover{
    /* color: #f73030; */
    cursor: default;
  }

  .block-item a.kl-trash.active:hover,
  .block-item a.kl-trash.active,
  .text-post-select {
    cursor: pointer;
    color: #f73030;
    pointer-events: auto;
  }

  .block-item .kl-trash-col {
    text-align: center;
    position: relative;
    right: 0;
  }

  .kl-down-pub {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .kl-img-pub {
    background: #000;
    overflow: hidden;
  }
  
  .kl-img-pub img {
    width: 100%;
    height: 100%;
    opacity: 1;
    display: block;
    transition: transform .5s, filter 1.5s ease-in-out;
    backface-visibility: hidden;
    object-fit: cover;
  }
  
  .kl-img-pub img:hover {
    transform: scale(1.1);
  }
  
  .kl-img-pub .kl-middle-after img:hover {
    transform: scale(1);
  }
  
  .kl-img-pub:hover img {
    opacity: 0.4;
  }
  
  .kl-img-pub .kl-middle-after img {
    width: auto;
    height: 100%;
    display: inline-block;
    object-fit: none;
  }
  
  .kl-img-pub:hover .kl-middle-after img {
    opacity: 1;
  }
  
  .kl-img-pub:hover .kl-middle {
    opacity: 1;
  }
  
  .kl-img-pub .kl-middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .kl-img-pub .kl-middle-before {
    top: 70%;
    left: 50%;
  }
  
  .kl-img-pub .kl-middle-before h5 {
    color: #fff;
  }
  
  .kl-img-pub .kl-middle-after {
    top: 85%;
    left: 50%;
    display: flex;
  }
  
  .kl-img-pub .kl-middle a {
    background: #fff;
    color: #000;
    font-size: 16px;
    padding: 10px 11px;
    border-radius: 30px;
    cursor:pointer;
  }
  
  .kl-img-pub .kl-middle-after a {
    display: block;
    padding: 8px;
    margin: 0 10px;
    width: 40px;
    height: 40px;
  }
  
  .kl-img-pub .kl-middle a:hover {
    opacity: 0.9;
  }
  
  .kl-img-pub:hover .kl-middle-prime {
    opacity: 1;
  }
  
  .kl-img-pub .kl-middle-prime {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  
  .kl-img-pub .kl-middle-prime a {
    background: #fff;
    color: #000;
    font-size: 16px;
    padding: 10px 12px;
    border-radius: 30px;
    cursor:pointer;
  }
  
  .kl-img-pub .kl-middle-prime a:hover {
    opacity: 0.9;
  }

  /* feed nav */
    .kl-pub-filter {
      display: flex;
      float: none;
      width: 100%;
      justify-content: space-between;
      margin-bottom: 0px;
    }

    .kl-pub-filter select.form-control {
      width: 220px !important;
      height: 45px;
      font-weight: 500;
      color: #35303F;
      border-radius: 5px;
      margin-right: 45px;
      margin-left: -10px;
      border: none;
      background-image: url(../img/stroke-black.svg);
      background-repeat: no-repeat;
      background-position: right .75rem center;
      background-size: 16px 12px;
      -webkit-appearance: none;
      -moz-appearance: none;
      -o-appearance: none;
      -ms-appearance: none;
      -khtml-appearance: none;
      appearance: none;
    }

    .kl-pub-filter .sdropdown .sdropdown-menu {
      box-shadow: 0px 4px 25px rgb(0 0 0 / 8%)!important;
    }

    .kl-pub-search img {
      position: absolute;
      color: #35303F;
      top: 15px;
      right: 15px;
      z-index: 9;
    }

    .kl-pub-filter input.form-control {
      width: 100%;
      height: 45px;
      font-weight: 400;
      color: #6A6A6A;
      border: none;
      border-radius: 5px;
      box-shadow: none !important;
    }

    .kl-pub-filter input.kl-date-filter {
      width: 100%;
      padding: 13px 15px;
      line-height: 1.2;
      height: 45px;
      margin: 0;
      font-weight: 500;
      color: #35303F;
      font-size: 16px;
      cursor: pointer;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: none !important;
      border: none !important;
      background-image: url(../img/stroke-black.svg);
      background-repeat: no-repeat;
      background-position: right .75rem center;
      background-size: 16px 12px;
      -webkit-appearance: none;
      -moz-appearance: none;
      -o-appearance: none;
      -ms-appearance: none;
      -khtml-appearance: none;
      appearance: none;
      font-weight: normal !important;
    }

    /* .grid-view-radio:checked~.kl-pub-filter .kl-date-filter {
      display: none;
    } */

    .kl-pub-filter input.kl-date-filter::-moz-placeholder {
      color: #35303F;
    }

    .kl-pub-filter input.kl-date-filter::-ms-input-placeholder {
      color: #35303F;
    }

    .kl-pub-filter input.kl-date-filter::-webkit-input-placeholder, .kl-pub-filter input.kl-date-filter::-o-input-placeholder, .kl-pub-filter input.kl-date-filter::-khtml-input-placeholder {
      color: #35303F;
    }

  .kl-pub-title {
    display: inline-block;
    font-size: 30px;
    margin: 0;
    position: relative;
    top: -12px;
    line-height: 1;
    cursor: default;
  }

  .kl-pub-title span {
    font-weight: normal;
    font-size: 16px;
  }

  .wrap {
    margin: 0 auto;
  }

  .block-item {
    width: 100%;
    float: none;
    text-align: center;
  }
  
  .view-radio {
    display: none;
  }

  .view-radio+label {
    color: #D8D8D8;
    cursor: pointer;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 3px 5px 20px 5px;
    position: relative;
    top: -15px;
    margin-bottom: 10px;
  }

  .view-radio+label:hover {
    color: #35303F;
    transition: .2s ease-in-out;
  }

  .view-radio:checked+label {
    color: #35303F;
    transition: .1s ease-in-out;
  }
  
  .list-view-radio:checked~.content-container .block-item {
    width: 100%;
    margin-right: 0;
    text-align: left;
    background-color: white;
    border-top: 1px solid #D8D8D8;
    /* padding: 25px 20px; */
    padding: 15px 0px;
  }
  
  .kl-tags-col {
    min-width: 215px;
  }
  
  .kl-head-item {
    display: none;
  }

  .list-view-radio:checked~.content-container .kl-head-item {
    display: block;
    border: none;
  }

  .block-item .kl-social-media {
    width: 150px;
    text-align: initial;
  }

  .block-item .kl-social-media li {
    display: inline-block;
    margin: 1px 2px;
    background-color: #F0F0F3;
    padding: 7px;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 30px;
    opacity: 1;
  }

  .block-item .kl-social-media li a img {
    float: none !important;
    margin-right: 0 !important;
  }

  .custom-select {
    position: relative;
    font-size: 12px;
    height: 45px;
    font-weight: 500;
    color: #35303F;
    border-radius: 5px;
    margin: 0 15px 0 10px;
    border: none;
    background-image: url(../img/stroke-black.svg);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    -khtml-appearance: none;
    appearance: none;
    padding: 0;
  }
  
  .custom-select .selected-value {
    padding: 13px 15px 13px 15px;
    line-height: 1.2;
    height: 45px;
    margin: 0;
    width: auto;
    font-weight: 500;
    color: #35303F;
    font-size: 0.95rem;
    cursor: pointer;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: none !important;
    border: none !important;
    background-image: url(../img/stroke-black.svg);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    -khtml-appearance: none;
    appearance: none;
    font-weight: normal !important;
  }
  
  .custom-select .select-list {
    z-index: 100;
    position: absolute;
    left: -999em;
    top: -999em;
    padding: 0;
    margin: 2px 0 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }
  
  .custom-select.select-open .select-list {
    left: 0 !important;
    top: auto !important;
  }
  
  .custom-select .select-list dl {
    background: #fff;
  }
  
  .custom-select .select-list dl.defaultScrollbar {
    overflow-x: hidden;
    overflow-y: scroll;
  }
  
  .custom-select dl,
  .custom-select dd {
    margin: 0;
  }
  
  .custom-select dd {
    zoom: 1;
    cursor: pointer;
  }
  
  .custom-select .disabled {
    color: #999;
    cursor: default;
  }
  
  .custom-select .selected {
    color: #fff;
    text-decoration: none;
    background-color: #8c51ff;
  }
  
  .custom-select .select-list dd.hovered {
    background: #999;
    color: #fff;
  }
  
  .custom-select .select-list dd.disabled.hovered {
    background: none;
    color: #999;
  }
  
  .custom-select dt {
    font-weight: bold;
    font-style: italic;
    padding: 2px 10px 2px 6px;
  }
  
  .custom-select dd {
    display: flex;
    padding: 10px 15px 5px;
  }

  .hasJS select.custom {
    position: absolute;
    left: -999em;
  }
  
  .hasJS select.custom.use-default {
    position: absolute;
    left: auto;
    height: auto;
    width: 100%;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    -khtml-appearance: none;
    opacity: 0;
    /* prevents iOS from zooming in on field */
    font-size: 16px;
  }
  
  .custom-select.custom.kl-select-box.form-control {
    margin: 0;
    width: 100% !important;
  }
  
  .custom-select.focused .selected-value {
    box-shadow: 0 0 2px #00aedb;
  }
  
  .custom-select.disabled .selected-value {
    border: 1px solid #ccc;
    color: #ccc;
    cursor: default;
  }
  
  .custom-select .jspPane {
    overflow-x: hidden;
  }
  
  .custom-select .jspVerticalBar {
    background: none;
    width: 8px;
  }
  
  .custom-select .jspHorizontalBar {
    height: 0;
    overflow: hidden;
  }
  
  .custom-select .jspTrack {
    background: none;
    right: 5px;
    border-radius: 5px;
  }
  
  .custom-select .jspDrag {
    border-radius: 5px;
    color: #fff;
    opacity: .5;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #363636;
    background-color: #222222;
    background-image: -moz-linear-gradient(top, #444444, #222222);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
    background-image: -webkit-linear-gradient(top, #444444, #222222);
    background-image: -moz-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
    background-image: -moz-linear-gradient(top, #444444, #222222);
    background-image: -o-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
    background-image: -o-linear-gradient(top, #444444, #222222);
    background-image: -ms-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
    background-image: -ms-linear-gradient(top, #444444, #222222);
    background-image: -khtml-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
    background-image: -khtml-linear-gradient(top, #444444, #222222);
    background-image: -o-linear-gradient(top, #444444, #222222);
    background-image: linear-gradient(to bottom, #444444, #222222);
    background-repeat: repeat-x;
    border-color: #222222 #222222 #000000;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  }

  dd span,
  .selected-value span {
    position: relative;
    top: -2px;
    display: block;
    height: 23px;
    width: 23px;
    float: left;
    clear: right;
    right: 5px;
  }

  dd span.instagram,
  .selected-value span.instagram {
    background: url("../img/instagram.svg") no-repeat;
  }

  dd span.tiktok,
  .selected-value span.tiktok {
    background: url("../img/tiktok.svg") no-repeat;
  }

  dd span.facebook,
  .selected-value span.facebook {
    background: url("../img/facebook.svg") no-repeat;
    left: 0;

  }

  textarea #result-search {
    hyphens: auto;
  }

  .d-flex> textarea.tiret{
    hyphens: manual;
    margin-top: 7px;
  }

  .block-item .form-check > input[type="checkbox"].checkSingle {
    bottom: 10%;
   }

  .img-recadrage{
    object-fit: cover;
    width: 175px;
    height: 175px;
  }

  .kl-tags-col > .tags-input{
    margin: 5px 0px;
    cursor: pointer !important;
  }

  .kl-tags-col > .tags-input:hover{
    background-color: white !important;
    color: black !important;
  }
  
  /* feed filtres */
    #publi-edit > #select-edition-filter > #edition-filter{
      margin-top: 0px;
    }
  /* feed pas de publication */
    .blockEmpty {
      display: block !important;
    }

  /* feed publi */
    .d-flex > textarea.tiret {
      margin-top: 8px;
      overflow-y: auto !important;
    }
    textarea.kl-title-category.kl-title-postpub.tiret {
      overflow-y: scroll !important;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    textarea.kl-title-category.kl-title-postpub.tiret::-webkit-scrollbar,textarea.kl-title-category.kl-title-postpub.tiret::-moz-scrollbar, textarea.kl-title-category.kl-title-postpub.tiret::-o-scrollbar, textarea.kl-title-category.kl-title-postpub.tiret::-ms-scrollbar, textarea.kl-title-category.kl-title-postpub.tiret::-khtml-scrollbar {
      display: none;
    }

    .finissons {
      overflow: hidden !important;
    }
    article > .row > .col > .d-flex > .tiret {
      height: fit-content;
      overflow: auto;
      overflow-y: auto !important;
      overflow-wrap: break-word;
      min-height: 0;
    }
  
    .control-radio > input {
      left: 0%;
      top: 0%;
    }  
  /* feed checkbox */
    .col > .d-flex > .form-check {
      margin-right: 0px;
    }

  #result-search > .kl-head-item {
    padding: 17.5px 0px !important;
  }
  /* feed reseau */
    .kl-social-media > li > a {
      top: -4.5px;
      right: 5px;
      position: relative;
    }
    label.lbl-checkbox-image{
      transition: all ease-in-out 0.35s;
    }
    label.lbl-checkbox-image:hover {
      background-color: #8c51ff25;
    }
  /* feed validation / publié */

  .square-feed .material-symbols-outlined{
    font-variation-settings: 'FILL' 1,;
  }

  /* feed responsiv */
    @media screen and (max-width:  1305px){
      .kl-pub-filter {
        float: none;
        margin-bottom: 25px;
      }
    }
    @media screen and (max-width:  1230px){
      article.block-item .col {
        min-width: 145px!important;
      }
    }
    @media (width >=  1229px) and (max-width:  1640px) {
      article.block-item .col {
        min-width: 162px!important;
      }
    }

    @media screen and (max-width:  1199.98px){
      .kl-pub-filter {
        float: none;
        margin-bottom: 25px;
      }
    }
    @media screen and (max-width:  768px){
      .kl-down-pub .kl-img-down {
        margin: 0 1px;
      }
    }
    @media screen and (max-width:  767.98px){
      .kl-pub-filter select.form-control {
        width: 100%;
      }
      .kl-img-down {
        margin: 0 5px;
      }
      .kl-pub-filter {
        display: flex;
      }
      .custom-select.custom.kl-select-box.form-control {
        width: 100% !important;
        margin: 15px 0 0;
      }
      .custom-select .selected-value {
        width: 100% !important;
      }
    }
    @media screen and (max-width:  574.98px){
      .kl-pub-title {
        font-size: 27px;
      }
    }
    @media screen and (max-width: 572px){
      .kl-pub-filter input.kl-date-filter{
        font-size: 9.5px;
      }
    }
    @media screen and (max-width: 570px){
      select#published-filter {
        font-size: 6.5px;
      }
    }
    @media screen and (max-width:  520px){
      .kl-pub-filter input.kl-date-filter{
        font-size: 8px;
      }
    }
    @media screen and (max-width:  445px){
      select.custom.kl-select-box{
        font-size: 14px;
      }
    }
    @media screen and (max-width:  430px){
      .kl-pub-filter input.kl-date-filter{
        font-size: 5px;
      }
    }
    @media screen and (max-width:  415px){
      select.custom.kl-select-box{
        font-size: 12px;
      }
    }

/*
==================================================
Gestion projet
==================================================
*/

  .kl-boot-tagsin {
    background-color: #fff;
    border-bottom: 1px solid #D8D8D8;
    padding: 15px 25px;
    text-align: left;
  }

  .kl-boot-tagsin .kl-boot-tagsedit{
    cursor: pointer;
  }

  
  /* Gestion projet notifications */
    .kl-list-camp .row {
      padding: 0 13px;
      margin-bottom: 15px;
    }
    .kl-list-camp .kl-del-med {
      color: #FF5182;
      font-size: 14px;
      font-weight: bold;
      margin: 5px 0 0;
    }
    .kl-list-camp .col {
      padding: 0 3px;
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
    }
    .notifProjet{
      display: flex;
      padding: 15px !important;
      align-items: center;
      transition: all 0.3s ease-in-out;
    }
    .notifProjet:hover{
      color: white;
      background-color: #8C51FF;
    }
    .mailing > .row {
      display: flex;
      padding: 0 !important;
      margin-left: 0;
      margin-right: 0px;
    }
  /* Gestion projet publication */
    .kl-img-camp {
      position: relative;
      width: 50px;
      height: 50px;
      margin-bottom: 6px;
      border: 3px transparent solid;
      font: bold 50px/25px "Gilroy";
      text-decoration: none !important;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
    figure.kl-figure-post:checked a {
      border: 3px solid #28476d;
    }
  /* Gestion projet attribution projet */
    .kl-boot-tagsedit span.select2-selection.select2-selection--multiple {
      min-height: 25px;
      border: none;
    }
    
    .kl-boot-tagsedit input.select2-search__field {
      font-size: 14px!important;
      color: #979797;
      border: none!important;
      box-shadow: none;
      padding: 0.375rem 0!important;
      margin: 0!important;
    }
    
    .kl-boot-tagsedit li.select2-selection__choice {
      border: none!important;
      text-align: center;
      transition: all 0.5s;
      color: #fff;
      background-color: #35303F!important;
      font-size: 12px;
      border-radius: 25px!important;
      padding: 3px 10px!important;
      font-weight: bold;
    }

    span.select2-container {
      max-width: 100%;
    }
    
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #cacafe;
        color: #35303F;
    }
    
    .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: #ffabf3;
        color: white;
    }
    
    .select2-container--default .select2-results>.select2-results__options {
        max-height: 216px;
    }

    #team > .select2-container > .selection > .select2-selection > .select2-selection__rendered > .select2-selection__choice:hover {
      color: #4204ba !important;
    }

  /* gestion projet tags */
    .kl-boot-tagsedit .form-control {
      font-size: 14px;
      color: #979797;
      border: none;
      box-shadow: none;
      padding: 0.375rem 0;
    }
    
    .kl-boot-tagsedit .form-control::-webkit-input-placeholder,.kl-boot-tagsedit .form-control::-moz-input-placeholder, .kl-boot-tagsedit .form-control::-o-input-placeholder, .kl-boot-tagsedit .form-control::-ms-input-placeholder, .kl-boot-tagsedit .form-control::-khtml-input-placeholder
    .kl-boot-tagsedit .form-control::placeholder {
      color: #979797;
    }
    
    .kl-boot-tagsin .kl-button-tag.kl-tag-feed {
      margin: 0 0;
    }
    
    .kl-boot-tagsin .kl-meta-tag {
      margin-right: 5px;
      color: #8C51FF;
      font-size: 14px;
    }

    .kl-boot-tagsedit{
      cursor: pointer;
    }
  /* gestion projet Date */
    .kl-pub-date {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .kl-pub-date span:nth-child(2) {
      text-align: right;
    }
    .card > .kl-datelist-in > textarea.dropdown-item {
      margin-top: 10px;
      margin-left: 40px;
      height: 30px !important;
    }
    
  /* gestion projet titre */
    input.kl-title-category {
      font-size: 30px;
      font-weight: bold;
      border: none !important;
      padding: 0;
      margin: 0;
      color: #35303F;
      display: inline-block;
      background: white;
      overflow: hidden;
      max-width: 100%;
      box-shadow: none !important;
    }
    
    textarea.kl-title-category {
      height: 33px;
      font-size: 30px;
      font-weight: bold;
      border: none !important;
      padding: 0;
      margin: 0;
      color: #35303F;
      display: inline-block;
      background: white;
      overflow: hidden;
      max-width: 100%;
      box-shadow: none !important;
      width: 100%;
      resize: none;
      line-height: 1.1;
      word-break: break-all !important;
      min-height: 33px;
    }
  /* gestion projet boutton */
    .link.btn.btn-secondary.gris {
       background-color: #CACACA;
      border-color:#CACACA;
    }
    .link.btn.btn-secondary.gris:hover {
       background-color: #A09898;
       border-color:#A09898;
    }
    .link-ajout-camp{
      background: #8c51ff;
      display: flex;
      height: 35px;
      width: 100%;
      padding: 0px 10px;
      border-radius: 3px;
      font-weight: 600;
      align-items: center;
      transition: all 0.3s ease-in-out;
    }
    .link-ajout-camp:hover{
      background: #763de4;
      text-decoration: none;
    }
  /* gestion projet membre */
    .select2-container--default .select2-search--inline .select2-search__field{ 
      width: 103% !important;
    }
    .select2-container .select2-search--inline{ 
      width:100% !important;
    }
    .box-team-prjt{
      border-bottom: none;
    }
    .arrowIcone {
      border: solid black;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 3px;
      transform: rotate(45deg);
      margin-bottom: 4px;
    }
    .box-team-prjt{
      max-height: 100px;
    }
    .box-team-prjt > select > option {
      background-color: transparent !important
    }
    .arrowBox{
      height: 20px;
      background-color: transparent;
    }
  /* gestion projet mail */
    .crosSupp{
      float: right;
      color: red;
      font-weight: bold !important;
      margin-top: -3px;
      cursor: pointer;
    }
    ul.mail-list{
      display: flex;
      padding: 0;
      white-space:unset;
      margin-bottom: 0px;
    }
    .noMail {
      margin-left: 5%;
      cursor: pointer;
      text-align: initial;
      display: none;
    }
    .tagsMail-container {
      display: flex;
      align-items: center;
    }
    .tagsMail-container > a {
      display: flex;
      margin-top: 3.5px;
    }
    .mailing{
      display: flex;
      align-items: center;
      border-bottom: 1px solid grey;
      cursor: pointer;      
    }
  .select {
    width: 15vw;
  }
  /* gestion projet description */
    .card-header > .dropdown-item:hover {
      background-color: transparent;
      font-weight: bold;
    }
    .card-header > .dropdown-item:focus {
      background-color: transparent;
    }
    textarea#description_campagne {
      margin-top: 6px;
    }
  /* gestion projet publication */
    .card > .kl-list-camp > .row {
      max-height: 110px;
      height: 110px;
      overflow: hidden;
    }
    
  /* gestion projet responsiv */
    @media screen and (max-width:  991.98px){
      .kl-boot-tagsin .kl-button-tag span {
        padding-right: 0;
      }
    }
    @media screen and (max-width:  991px){
      .px-md-5 {
        padding-left: 2rem !important;
      }
    }
    @media (width >=  768px) and (width <=  1199.98px) {
      .kl-category-page .card .card-body .kl-btn2-project {
        display: block;
      }
    
      .kl-category-page .card .card-body .kl-btn2-project button.btn {
        width: 100%;
        display: block;
      }
    
      .kl-category-page .card .card-body .kl-btn2-project .btn-primary {
        margin-bottom: 10px;
      }
    }
    @media screen and (max-width:  475px){
      .text-camp-ajt{
        font-size: 12px;
      }
    }

/* 
  ==================================================
  Membre modal
  ==================================================
*/
  #membre select,
  .blocCustomColor select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    -khtml-appearance: none;
    background-image: url(../img/stroke.svg);
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px 12px;
    height: 45px;
    cursor: pointer;
  }

  #membre select:focus,
  .blocCustomColor select:focus {
    border-color: #8c51ff !important;
  }

  .modalMembre {
    max-width: 635px;
    margin: 0 auto;
  }

/* responsiv membre modal */
  @media screen and (max-width: 768px){
    .inputNom {
      margin-bottom: 25px;
    }
  }

  @media screen and (max-width: 600px){
    #membre .modal-footer {
      flex-direction: column-reverse !important;
    }
  } 
/* /* 
  ==================================================
  gestion profile
  ==================================================
*/
/* autre part */
  .bloc-user {
    background: #fff;
    border-radius: 10px;
    padding-bottom: 25px !important;
    min-width: 100%;
  }
  .img-name-user {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 25px;
  }
  .bloc-img-user {
    margin-right: 15px;
    align-items: center;
  }
  .imgUser2 {
    background: transparent;
    position: relative;
    margin-bottom: 0.5vh;
    min-width: 50px;
    width: 7vw;
    max-width: 150px;
    min-height: 50px;
    height: 7vw;
    max-height: 150px;
    border: 3px transparent solid;
    border-radius: 50%;
    font: bold 50px/25px "Gilroy";
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    overflow: hidden;
    text-decoration: none !important;
    }
  
  .imgUser3 {
    background: transparent;
    position: relative;
    width: 70px;
    height: 70px;
    border: 3px transparent solid;
    border-radius: 50%;
    font: bold 50px/25px "Gilroy";
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    overflow: hidden;
    text-decoration: none !important;
    }
  .imgUser4 {
    background: transparent;
    position: relative;
    width: 50px;
    height: 50px;
    border: 3px transparent solid;
    border-radius: 50%;
    font: bold 50px/25px "Gilroy";
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    overflow: hidden;
    text-decoration: none !important;
    }

  .img-user {
    background: transparent;
    position: relative;
    width: 100px;
    height: 100px;
    border: 3px transparent solid;
    border-radius: 50%;
    font: bold 50px/25px "Gilroy";
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    text-decoration: none !important;
    overflow: hidden;
    transition: all 400ms ease-in-out;
  }
  
  .img-user:hover {
    border: 3px dashed #8c51ff;
    background: transparent;
  }
  
  .img-user img {height: 100%;}
  .img-user .kl-middle a, .img-user .kl-middle-prime a {
    background: #fff;
    color: #000;
    font-size: 16px;
    padding: 5px 8px;
    border-radius: 30px;
    margin: 0 15px;
  }
  .hideMenu {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  }
  .hideMenu a {
  background: #fff;
  width: 35px;
  height: 35px;
  margin: 0 3px;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #000;
  }
  
  .imgTable3{
    background: transparent;
    position: relative;
    width: 70px;
    height: 70px;
    border: 3px transparent solid;
    font: bold 50px/25px "Gilroy";
    display: inline;
    justify-content: center;
    align-items: center;
    color: #000;
    text-decoration: none !important;
    overflow: hidden;
  }
  
  .imgTable2{
    background: transparent;
    position: relative;
    width: 100%;
    height: 100%;
    border: 3px transparent solid;
    font: bold 50px/25px "Gilroy";
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    text-decoration: none !important;
    overflow: hidden;
  }
  .trouver{
    border: none !important;
    background-color: transparent !important;
  }
  
  .trouver > .align-items-center > .text-center {
    display: none !important;
  }

  .trouver > .row > .col {
    height: 100%;
  }
  .trouver > .row {
    /* width: 100%; */
    height: 100%
  }
  
  .imgTable {
    background: transparent;
    position: relative;
    width: 130px;
    height: 130px;
    border: 3px transparent solid;
    font: bold 50px/25px "Gilroy";
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    text-decoration: none !important;
    overflow: hidden;
  }

  .imgTable img {
    height: 100%;
    /* border-radius: 70px; */}

  .img-user:hover {
  border: 3px dashed #8c51ff;
  background: transparent;
  }
  
  .img-user-edit {
    position: relative;
    width: 100px;
    height: 100px;
    background: transparent;
    max-width: 100%;
  }
  
  .img-user-edit:hover img {
    opacity: 1;
  }
  
  .img-user-edit img:hover {
    transform: none;
  }
  .imgUser2 img {
    height: 100%;
    /* border-radius: 70px; */
    object-fit: cover;
  }
  
  .imgUser3 img {
    height: 100%;
    /* border-radius: 70px; */
    object-fit: cover;
    width: 70px !important;
  }
  
  .img-user img {
    height: 100%;
    /* border-radius: 70px; */
    object-fit: cover;
  }
  
  .imgUser2 .kl-middle a, .imgUser2 .kl-middle-prime a {
    background: #fff;
    color: #000;
    font-size: 16px;
    padding: 5px 8px;
    border-radius: 30px;
    margin: 0 15px;
  }
  
  .imgUser3 .kl-middle a, .imgUser3 .kl-middle-prime a {
    background: #fff;
    color: #000;
    font-size: 16px;
    padding: 5px 8px;
    border-radius: 30px;
    margin: 0 15px;
  }
  
  .img-user .kl-middle a, .img-user .kl-middle-prime a {
    background: #fff;
    color: #000;
    font-size: 16px;
    padding: 5px 8px;
    border-radius: 30px;
    margin: 0 15px;
  }
  .hideMenu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
  }
  .hideMenu a {
    background: #fff;
    width: 35px;
    height: 35px;
    margin: 0 3px;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #000;
  }
  .hideMenu a:focus {
    border-color: transparent !important;
  }
  
  .bloc-user .modal-footer {
    padding: 0 !important;
  }
  .profilModal .modal-content {
    max-width: 550px;
    margin: 0 auto;
  }
  .profilModal .modal-title {
    width: 100%;
  }
  .profilModal .kl-upload-file .btn-primary  {
    padding: 11px 35px;
  }

  .containerFull {
    width: 50vw;
  }
  .profil-card {
    border: 1px solid #8c51ff;
    box-shadow: 0px 0px 10px #8c51ff;
    width: 100%;
    height: fit-content;
  }
  #nom{
   margin-top: 6px;
  }
  .form-area:disabled, .form-area[readonly]{
    background-color: #8c51ff15;
    opacity: 1;
  }
  .form-profil{
    padding: 1.5rem 0.75rem !important;
  }
  /* input.mdpInput {
    margin: 0px 15px 0px 0px;
  } */
  .groupe-div-flex{
    display: flex !important;
  }
  input#box-profil{
    position: relative;
    appearance: none; 
    outline: none;
    width: 40px; 
    height: 20px;
    background-color: #fff; 
    border: 2px solid #ababab;
    border-radius: 50px; 
    box-shadow: inset -20px 0 0 0 #ababab;
    transition-duration: 200ms;
  }
  input#box-profil:after{
    position: absolute;
    top: 1px; 
    left: 1px;
    width: 26px; 
    height: 26px;
    background-color: transparent;
    border-radius: 50%; 
    box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
  }
  input#box-profil:checked{
    border-color: #8c51ff8c;
    box-shadow: inset 20px 0px 0 0 #8c51ff8c;
  }
  input#box-profil:after:checked{
    left: 20px;
    box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
  }
  p.text-box-profil {
    margin-bottom: 0rem;
    display: flex;
    align-items: center;
    margin-left: 10px;
  }
  .buttonDiv {
    display: flex;
    justify-content: flex-end;
  }
  #valider-pdp {
    background-color: black;
    border: none;
  }
  .row > .col-md-6 > ul {
    padding-left: 15px;
  }

/* Gestion profile responsive  */
  
  @media screen and (max-width: 1200px){
  .img-user {
    position: relative;
    width: 100px;
    height: 100px;
    flex-direction: column;
    overflow: auto !important;
    border: none !important;
    border-radius: inherit !important;
  }
  .img-user img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
  }
  .hideMenu {
    position: relative;
    margin: 5px 0;
    opacity: 1 !important;
  }
  .hideMenu a {
    background: #8d50ff !important;
    opacity: 1 !important;
    color: #fff !important;
  }
  .img-user:hover img {
    opacity: 1 !important;
  }
  .kl-img-pub img:hover {
    transform: none !important;
  }
  }
  
  @media screen and (max-width: 768px){
  .bloc-user {
    min-width: auto !important;
    overflow: hidden;
  }
  
  .confirm {
    display: none !important;
  }
  }
  
  @media screen and (max-width: 600px){
    .bloc-user {
      padding: 25px 20px !important;
    }

    .img-name-user {
      flex-direction: column;
    }

    .kl-upload-gcp {
      text-align: center;
      display: block;
    }

    .bloc-img-user {
      margin-right: 0;
      margin-bottom: 20px;
    }

    .txt-user {
      margin-top: 0;
    }

    .custom-modal-content h2{
      margin-bottom: 10px;
    }

    #social-select-modal > .custom-modal-content{
      width: 90%;
    }

    .custom-modal-content h2{
      font-size: 1.5rem;
    }

    .titre-campagne-modal{
      flex-direction: column;
    }

    .link-ajout-camp{
      justify-content: center;
    }
  }

/* 
  ==================================================
  Calendrier
  ==================================================
*/
  .fc-daygrid.fc-dayGridMonth-view.fc-view {
    display: flex;
  }
  table.fc-col-header {
    width: 100% !important;
  }
  .fc-view-harness.fc-view-harness-active {
    width: 100%;
  }
  .fc-daygrid-body.fc-daygrid-body-unbalanced {
    width: 100% !important;
    height: 100% !important;
  }
  table.fc-scrollgrid-sync-table {
    width: 100% !important;
    height: 100% !important;
  }
  #blocCalendar > .cont2 {
    display: flex;
    justify-content: flex-end;
  }

/* Calendrier responsiv */
  @media screen and (max-width:  991px){
    #calendar {
      height: 54vw !important;
    }
  }
  @media screen and (max-width:  880px){
    #blocCalendar > .filter > .cont {
      width: max-content;
    }
    #blocCalendar > .filter > .cont2 {
      width: 33%;
    }
  }
  @media screen and (max-width:  730px){
    #blocCalendar > .filter > .cont {
      width: max-content;
    }
    #blocCalendar > .filter > .cont2 {
      width: 40%;
    }
  }
  @media screen and (max-width: 640px){
    #calendar {
      height: 74vw !important;
    }
  }
  @media screen and (max-width: 600px){
    #blocCalendar > .filter > .cont {
      width: max-content;
    }
    #blocCalendar > .filter > .cont2 {
      width: 60%;
    }
  }
  @media screen and (max-width: 535px){
    #calendar {
      height: 80vw !important;
    }
  }
  @media screen and (max-width: 510px){
    #calendar {
      height: 85vw !important;
    }
  }

  @media screen and (max-width:  475px){
    #calendar {
      height: 95vw !important;
    }
  }
  @media screen and (max-width:  430px){
    #calendar {
      height: 100vw !important;
    }
  }

/* 
  ==================================================
  Entreprise
  ==================================================
*/
  #alert-ssh{
    display: flex;
    z-index: 1;
    background-color: white;
    color: black;
    height: 15%;
    margin-top: 2.5%;
    align-items: center;
    border-radius: 15px;
  }
  #copy-ssh {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }
  .croix-ssh{
    width: 90px;
    margin-bottom: 12%;
  }
  /* Entreprise reglage */
    .menue-show {
      display: flex !important;
      flex-wrap: wrap;
      flex-direction: column;
      border-radius: 5px;
      background-color: white;
      opacity: 1 !important;
    }
/* Template babylone */
  .description-Show{
    display: flex;
    height: 33px;
    width: 95%;
    background-color: white;
    margin-top: 15px;
  }
  .enSavoirPlus{
    position: absolute;
    border-radius: 5px;
    padding: 7px 60px;
    margin-top: 10px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    background-color: #8C51FF;
    transition: all 0.2s ease-in-out;
  }
  .enSavoirPlus:hover{
    background-color: transparent;
    color: #8C51FF;
    border: 2px solid #8C51FF;
  }
  .media-body {
    word-wrap: break-word;
    width: 100%;
    overflow-y: hidden;
  }
  .showMore{
    position: absolute;
    color: #8C51FF;
    font-weight: bold;
    cursor: pointer;
  }
  img#test {
    z-index: 1;
    position: fixed;
  }
  .titre-link{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .bouton-achatLink{
    padding: 2.5px 30px;
    background-color: #8c51ff;
    border-radius: 15px;
    color: white !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out;
    border: none;
  }
  .bouton-achatLink:hover{
    background-color: white;
    color: #8c51ff !important;
    border: 2px solid #8c51ff;
  }
  /* template 2 */
    .contentTab.tab-content.grid2 {
      width: 100%;
    }
/* Edition */
  #noCampSet{
    height: 100vh;
    width: 100%;
  }
  #containerNoCamp {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .descriptionCamp {
    display: flex;
    height: 20%;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
  .campNotSetString {
    font-size: 2vw;
    font-weight: 600;
  }
  .campNotSetStringprec {
        font-size: 1.25vw;
  }
  .campagneButtonRed {
    height: 35px;
    width: 100%;
    background-color: #8c51ff;
    color: white;
    font-weight: 600;
    border-radius: 5px;
    border: 0;
  }
  #link-backcamp{
    width: 40%;
  }
/* Abonnements */
  #buttonDeco{
    padding: 0px 15px;
    border: none;
    margin: 10px 10px 0px 0px;
    height: 40px;
    color: white;
    border-radius: 5px;
    background-color: #fe3434;
  }
  #logo-abn{
    display: flex;
    justify-content: space-between;
  }
/* choix de compte */
  .nav-UnderChoice {
    width: 100%;
    display: flex;
    margin-top: 20px;
    justify-content: space-evenly;
    pointer-events: all;
  }
  .kl-modal-change-account > .modal-dialog > .modal-content > .modal-header {
    display: flex;
    position: static;
    align-items: center;
    flex-direction: column;
    border-bottom: 1px solid #dee2e6;
  }
  .VCMarge {
    margin: 17px;
  }


/*-----------POP up VIDEO IMAGE----------*/
.modal-body-video { padding: 0 5vw 1vh}
.slide-img .img {  max-width: 100%; height: 490px ;margin: 0 auto  }

/* .slide-img .img img { display: block; width: 100%;  height: 490px; object-fit: cover } */
.slide-img  { border:#D3D3D3 solid 1px; padding:25px 25px 10px; border-radius: 10px }
.slide-img .item .img img { display: block; width: 100% }
.slide-img .inner-text { padding: 20px 14px 0}
.slide-img .inner-text h3 { font-size: 30px; overflow-wrap: anywhere; }
  .thumb-img { 
    border:#D3D3D3 solid 1px; 
    padding:25px 25px 10px; 
    border-radius: 10px; 
    margin-bottom: 20px  
  }

  .thumb-thread {
    padding:10px 10px 10px !important; 
  }

  .thumb-img h4 { 
    font-size: 16px; 
    margin-bottom: 10px; 
    display: block; 
  }

  .thumb-img.thumb-thread h4 { 
    font-size: 13px !important; 
  }

.card-sub { cursor: move; border: none;}
.carousel-control-next-icon { background:url(../img/arrow.svg) !important; width: 40px; height: 46px; background-color: transparent !important; }
.carousel-control-prev-icon { background:url(../img/arrow.svg) !important; width: 40px; height: 46px; background-color: transparent !important; transform: rotate(180deg); }
.card-block .card-sub span { opacity: 1; background:url(../img/close-black.svg); width: 15px; height: 15px; position: absolute; top: 2px; right: 2px; background-size: cover; cursor: pointer }
.card-block .card-sub img { display: block; height: 98px; width: 100%; object-fit: cover;}
.card-block .card-sub { position: relative; max-width: 100px;height: 100px; margin-bottom: 15px}
.card-video { border:#D3D3D3 solid 1px; margin-top: 10px; padding:25px; border-radius: 10px  }
.card-video h4 { font-size: 16px; margin-bottom: 20px; display: block; }
.card-video .kl-upload-file .btn-primary { border-color: #8C51FF; color: #8C51FF;padding-left: 40px;padding-right: 40px; max-width: 360px}
.card-video .kl-upload-file .btn-primary:hover { background-color: #8C51FF; color: #fff }
.btn-primary.newPost { border:none; background:url(../img/new-post.svg); width: 42px !important; height: 42px; margin-bottom: 17px;   -moz-transition: all 225ms ease-in-out 0ms;
  animation: bounceIn 0.6s;
transform: rotate(0deg) scale(1) translateZ(0);
transition: all 0.3s cubic-bezier(0.8, 1.8, 0.75, 0.75);  }


.dropdown-item.active, .dropdown-item:active{
  background-color: transparent !important;
}

/*---------- Responsive -----------*/

@media screen and (max-width:  767.98px){
  .slide-img .img { height:100%; width:100% }
  .slide-img .img img { height:100%; object-fit: cover }
  .slide-img .img video { height: 100% ; width:100% }
}

@media screen and (max-width:  574.98px){ 
  .modal-body-video {
    padding: 0 20px 40px;
  }
  .slide-img { padding: 10px; margin-bottom: 20px }
  .slide-img .img { height:100%; width:100% }
  .slide-img .img img {height:100%; width:100%; object-fit: cover }
  .slide-img .img video {height:100%; width:100% }
  .btn-video { 
    width: 50px ;
    height: 50px;
    background-size: cover;
    opacity: 0.5;
    -moz-transition: all 225ms ease-in-out 0ms;
    -o-transition: all 225ms ease-in-out 0ms;
    -webkit-transition: all 225ms ease-in-out;
    -ms-transition: all 225ms ease-in-out;
    -khtml-transition: all 225ms ease-in-out;
    transition-delay: 0ms;
    transition: all 225ms ease-in-out 0ms; 
  }
  .btn-video:hover { opacity: 1 }
  .card-video .kl-upload-file .btn-primary { height: auto }
  .card-block .card-sub { margin: 0 auto 10px }
  .btn-primary.newPost { display: block; margin: 0 auto }

  .card-video .kl-upload-file .btn-primary input {
    position: absolute;
  }
}

@media screen and (max-width:  424.98px){
  .kl-upload-file .btn-primary {
    white-space: normal;
    width: 100%;
  }
}

@media (min-width: 576px) {
  .modal-dialog {
      max-width: 90vw;
      /* margin: 1.75rem auto; */
  }
}

/* Mention légal */
a.nav-link.legal{
  font-size: 28px !important;
}

/* afficher publication sur calendrier */
  #publi-show-body-desc{
    white-space: pre-wrap;
  }
/* Supprimer */

.oneContent{
  display: grid !important;
  grid-template-columns: repeat(1, 1fr) !important;
}

.twoContent {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
}

.threeContent {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

#container-footer {
  display: flex;
  flex-direction: column;
  padding-top: 0;
  gap: 10px;
}

.footer-logo-bbl {
  display: flex;
  gap: 10px;
}

.container-footer-projet-nav {
  display: flex;
  gap: 15px;
  max-width: 400px;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.container-footer-projet-nav::-webkit-scrollbar{
  display: none;
}

.container-button-change {
  display: flex;
  flex-direction: row;
  width: 50%;
  justify-content: space-between;
  margin-top: 50px;
}

.button-change {
  display: flex;
  align-items: center;
  width: 150px;
  gap: 10px;
  padding: 10px 20px;
  border: none;
  background-color: white;
}

.button-change > p{
  margin: 0;
}

.bloc-container-footer-project-nav {
  display: flex;
  height: 100px;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #D8D8D8;
}

button.button-change > p {
  font-weight: 600;
}

/* #myTabContent{
  border: 1px solid #cfcfcf;
} */

.footer-project-nav{
  text-wrap: nowrap;
}

@media (min-width: 768px){
  #changementphoto_entreprise > .form-group > .row > .col-md-6 {
      max-width: 100%;
  }
}

@media screen and (max-width: 1210px){
  #changementphoto_entreprise > .form-group > div.row{
    flex-direction: column;
  }

  .confirm{
    margin: 0;
  }
}

@media screen and (max-width: 600px){
  
  .container-button-change{
    width: 100%;
    justify-content: space-around;
  }

  .search .form-inline .form-control{
    width: 65% !important;
  }

  .search .form-inline{
    justify-content: center;
  }

  .imgUser3{
    width: unset;
  }
  
  .tab2, .tab3{
    column-count: 1;
  }
}