::-ms-clear {
    display: none;
  }

  .lien, .lien:hover {
      color: var(--secondary); 
  }

  .form-control-clear {
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top : 10px;
  }

  .ui-dialog{
      overflow: initial !important;
  }


  table > tbody > tr > td:first-child {
      border-radius: 10px 0 0 10px;
  }

  table > tbody > tr > td:last-child {
      border-radius: 0 10px 10px 0;
  }
  
  .margin-bottom {
       margin-bottom:10px;
     }
  
  .table-responsive {
      overflow:visible !important;
  }
  
  .tr_delay_hover {
      -webkit-transition: color 1s ease,background-color 1s ease,box-shadow 1s ease;
      -moz-transition: color 1s ease,background-color 1s ease,box-shadow 1s ease;
      -o-transition: color 1s ease,background-color 1s ease,box-shadow 1s ease;
      transition: color 1s ease,background-color 1s ease,box-shadow 1s ease;
  }
  .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
      color: var(--secondary);
  }
  .navbar-light .navbar-nav .nav-link {
      color: var(--secondary);
  }
  .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
      color: var(--primary) !important;
  }

  iframe{
      border:0;
  }

  .titrecompte, .titrecompte2 {
      display:inline;
  }

  .inscription {
      font-size: 1.3em;
  }

  .desinscription {
      font-size: 1.3em;
  }

  label.required:before {
      content: "* ";
      color:red;
  }           

  .filtres { 
      display: none;
  }
  
  .error{
      color:red;
  }

  .error2{
      color:red;
  }

  .error3{
      color:red;
  }

  *{
    font-family: 'Poppins', sans-serif;
      font-size: 1em;
      
  }

  p
  {
      font-size: 1em;
      color:var(--primary);
  }

  .modal-backdrop
  {
      opacity:0.8 !important;
  }

  .a
  {
      display: inline;
  }

  .b
  {
      display: inline;
  }            

  #btnChangeEmail
  {
      margin-right:10px;
  }

  #boutonInscription1
  {
      border: solid 2px;
      background-color: var(--secondary);
      display: block;
     
      padding: 10px 20px;
      font-size: 1em;
      cursor: pointer;
      text-align: center;
  }

  #boutonInscription1:hover {
      background-color: var(--primary);
  }


  .scrollmenu {
      -webkit-overflow-scrolling: touch !important;
      overflow: auto !important;
      height: 350px;
  }

  .scrollmenu iframe
  {
      width: 1px;
      min-width: 100%;
      max-width: 100%;
      height: 1px;
      min-height: 100%;
      max-height: 100%;
      position: absolute;
      top:0;
      right:0;
      padding-left:1rem;
  }

  #carte
  {
      display:none;
  }

  #tel
  {
      display:none;
  }

  #cardholder-name
  {
      width:100% !important;
      font-weight:normal !important;
      
      box-sizing: border-box;
      
      height: 40px;

      padding: 10px 12px;

      border: 1px solid var(--lightgrey);
      border-radius: 4px;
      background-color: white;

      box-shadow: 0 1px 3px 0 var(--lightgrey);
      -webkit-transition: box-shadow 150ms ease;
      transition: box-shadow 150ms ease;
  }

  #cardholder-name--focus 
  {
      box-shadow: 0 1px 3px 0 var(--darkgrey);
  }

  #cardholdername--webkit-autofill 
  {
      background-color: var(--lightgrey) !important;
  }

  .menu-diwio {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      left: auto;
      right: 0;
      width: 100%;
      display: flex;
      z-index: 42;
      box-sizing: border-box;
      flex-shrink: 0;
      flex-direction: column;
      background-color: var(--secondary);
  }

  .diwio-gradient {
      background-image: linear-gradient(0deg, var(--primary), var(--primary));
      color: white;
  }

  .white, .white:hover{
      color: white;
      text-decoration: none;
  }

  .intertitre {
      color: var(--primary);
      font-size: 1.5em;
      font-weight: 900; 
  }

  .titre {
    color: var(--primary);
    font-size: 2em;
    font-weight: 900; 
    }

  .gras {
      font-weight: 900;
  }

  .sticky-gradient {
      position: fixed;
      height: 100vh;
      width: 20%;
      max-width: 200px;
      z-index: 0; 
      background-image: linear-gradient(0deg, var(--primary), var(--primary));
      pointer-events: none;
  }

  .StripeElement 
  {
      box-sizing: border-box;

      height: 40px;

      padding: 10px 12px;

      border: 1px solid var(--lightgrey);
      border-radius: 4px;
      background-color: white;

      box-shadow: 0 1px 3px 0 var(--lightgrey);
      -webkit-transition: box-shadow 150ms ease;
      transition: box-shadow 150ms ease;
  }

  .StripeElement--focus 
  {
      box-shadow: 0 1px 3px 0 var(--darkgrey);
  }

  .StripeElement--invalid 
  {
      border-color: #fa755a;
  }

  .StripeElement--webkit-autofill 
  {
      background-color: #fefde5 !important;
  }

  .text-responsive {
     font-size: calc(100% + 1vw + 1vh);
  }

  .large-screen {display:block;}
  .mobile-screen {display:none}

  @media all and (max-width: 767px) {
      .large-screen {display:none;}
      .mobile-screen {display:block}
  }

  .appBar {
      top: 0;
      left: auto;
      right: 0;
      position: -webkit-sticky;
      position: sticky;
      width: 100%;
      display: flex;
      z-index: 100;
      box-sizing: border-box;
      flex-shrink: 0;
      flex-direction: row;
      justify-content: space-between;
      margin-left: auto;
      margin-right: auto;
      padding-left: 16px;
      padding-right: 16px;
  }

  .box-shadow{
      box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
  }

  .chapeau, .chapeau:hover {
      background-color: #718C3D;
      color: white;
  }

  .souschapeau, .souschapeau:hover {
      background-color: var(--primary);
      color: white;
  }

  .brand {
      max-height: 64px;
      min-height: 64px;
  }

  .connect-button {
      color: #718C3D;
  }

  .connect-button:hover {
      color: var(--primary);
  }

  .btn-outline-info {
      color: var(--secondary);
      background-color: transparent;
      background-image: none;
      border-color: var(--secondary);
      border-radius: 5rem;
  }

  .btn-outline-info:hover, .btn-outline-info:active, .btn-outline-info:focus {
      color: #fff;
      background-color: var(--primary);
      border-color: var(--primary);
  }

  .btn-info {
        color: white;
        background-color: var(--secondary);
        background-image: none;
        border-color: var(--secondary);
        border-radius: 5rem;
    }

    .btn-info:hover, .btn-info:active, .btn-info:focus {
        color: #fff;
        background-color: var(--primary);
        border-color: var(--primary);
    }

    .btn-light {
        color: var(--primary);
        background-color: white;
        background-image: none;
        border-color: white;
        border-radius: 5rem;
    }
  
    .btn-light:hover, .btn-light:active, .btn-light:focus {
        color: white;
        background-color: var(--primary);
        border-color: var(--primary);
    }
  

    .btn-secondary {
        color: white;
        background-color: var(--tertiary);
        background-image: none;
        border-color: var(--tertiary);
        border-radius: 1rem;
    }
  
    .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
        color: white;
        background-color: var(--secondary);
        border-color: var(--secondary);
    }

  @media (min-width: 757px) {
      .appBar {
          padding-left: 24px;
          padding-right: 24px;
          min-height: 64px;
      }
  }

  @media (max-width: 767px) {
      .offcanvas-collapse {
          position: fixed;
          top: 97px; /* Height of navbar */
          bottom: 0;
          width: 100%;
          padding-right: 1rem;
          padding-left: 1rem;
          overflow-y: auto;
          background-color: white;
          transition: -webkit-transform .3s ease-in-out;
          transition: transform .3s ease-in-out;
          transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
          -webkit-transform: translateX(-150%);
          transform: translateX(-150%);
      }
      .offcanvas-collapse.open {
          -webkit-transform: translateX(-1rem);
          transform: translateX(-1rem); /* Account for horizontal padding on navbar */
      }
  }

  .back-button {
      position:absolute;
  }

  .ui-datepicker{ z-index: 9999 !important;}

  .service-header {
    color: var(--primary);
    width: 100%;
    height: 20%;
    padding: 16px 0;
    background: white;
    margin-bottom: 0px;
    background-size: cover;
    background-position: center;
}

.service-image {
    right: 8px;
    height: 300px;
    object-fit: cover;
    box-shadow: 0px 6px 6px -3px rgb(0 0 0 / 20%), 0px 10px 14px 1px rgb(0 0 0 / 14%), 0px 4px 18px 3px rgb(0 0 0 / 12%);
}

.service-container {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: row;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

.service-button {
    margin-top: 8px;
    margin-bottom: 8px;
}

@media (min-width: 767px) {
    .service-button {
        margin-left: 16px;
        margin-right: 16px;
    }
}
.service-buttons {
    width: 100%;
    padding-top: 2%;
    padding-bottom: 2%;
}

.list-group-item {
    color: white;
    background-color: var(--primary);
    border: none;
}

.separation {
    color: var(--tertiary);
}