@charset "UTF-8";
/*!
 * Start Bootstrap - Modern Business (https://startbootstrap.com/template-overviews/modern-business)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-logomodern-business-nav/blob/master/LICENSE)
 */
 
 #panel, #flip {} #panel { display: none; }
 #panel2, #flip2 {} #panel2 { display: none; }
 #panel3, #flip3 {} #panel3 { display: none; }
 #panel4, #flip4 {} #panel4 { display: none; }
 #panel5, #flip5 {} #panel5 { display: none; }
 #panel6, #flip6 {} #panel6 { display: none; }
 #panel7, #flip7 {} #panel7 { display: none; }
 #panel8, #flip8 {} #panel8 { display: none; }
 #panel9, #flip9 {} #panel9 { display: none; }
 #panel10, #flip10 {} #panel10 { display: unset; }
 
 #panel20, #flip20 {} #panel20 { display: none; }
 #panel21, #flip21 {} #panel21 { display: none; }
 #panel22, #flip22 {} #panel22 { display: none; }
 #panel23, #flip23 {} #panel23 { display: none; }
 #panel24, #flip24 {} #panel24 { display: none; }
 #panel25, #flip25 {} #panel25 { display: none; }
 #panel26, #flip26 {} #panel26 { display: none; }

 #panel100, #flip100 {} #panel100 { display: unset; }
 #panel101, #flip101 {} #panel101 { display: unset; }
 #panel102, #flip102 {} #panel102 { display: unset; }
 #panel103, #flip103 {} #panel103 { display: unset; }
 #panel104, #flip104 {} #panel104 { display: unset; }
 
 #panel405, #flip405 {} #panel405 { display: none; }
 #panel406, #flip406 {} #panel406 { display: unset; }

 #panel1009, #flip1009 {} #panel1009 { display: unset; }

 

 /* ----------------- SECTION PROFIL -------------------- */

 .top-left {
  text-align:center;
  padding-top:60px;
 }

 .top-right {
  padding-top:50px;
 }

 .titre-left {
  padding-top: 10px;
  padding-left: 10px;
  font-size: 22px;
  text-align: left;
  color: rgb(54, 126, 56);
}

.separator-left {
  border: 0.5px solid #c0c0c0;
  width: 55%;
  margin-bottom: 10px;
}
.caractere-gains {
  padding-left: 10px;
  font-size: 13px;
  color: #474747;
  text-align: left;
}

.caractere-left {
  padding-left: 10px;
  font-size: 14px;
  color: #474747;
  text-align: left;
}

.chiffre-left {
  padding-left:10px;
  font-weight:bold;
}
.chq-image {
  width:70%;
}
.form6 {
  padding-top: 5px;
  padding-bottom: 20px;
  background-color:rgb(222, 246, 223);
}

.controls-form {
  margin-bottom: 15px;
}

.form-control2 {
  font-size:11px;
  margin-top: -30px;
}

.controls-form3 {
  text-align: left;
}

.form-profil {
  padding-top: 10px;
  padding-bottom: 0px;
  background-color: rgb(222, 246, 223);
}

.form-profil select, .form-profil textarea {
  
  width: 100%;
  height:55px;
  padding-left: 7px;  
  color: #474747; 
  font-size: 20px; 
  border-radius: 4px;
  border: 1px solid rgb(196, 196, 196);
}

.form-profil input[type=email], .form-profil input[type=text] {
  display: block;
  width: 100%;
  font-size: 20px;
  border-radius: 4px;
  background: #ffffff;
}

.form-control3 {
  font-size:13px;
  padding-bottom: 5px;
}

.controls-form3 input[type=email], .controls-form3 input[type=text] {
  width: 225px;
  height:50px;
  padding: 11px;
  font-size:13px;
  background-color: #fff;
  border: 1px solid rgb(224, 224, 224);
  cursor: auto;
}

.controls-form3 select {
  width: 225px;
  height:50px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid rgb(224, 224, 224);
  cursor: pointer;
}

.form-text {   /* ----------------- email -------------------- */
  color: #474747; 
  padding-top: 15px;
  margin-bottom: 2px;
  padding-left:5px;
  font-size:14px;
}



.titre-right {
    padding-top: 20px;
    padding-left: 10px;
    font-size: 22px;
    cursor: pointer;
  }

  .titre > p::before {
    content:" ▼";
    padding-right: 10px;
    font-size: 22px;
}

.titre-right:hover, .titre-right:active {
    display: block;
    color: rgb(54, 126, 56);
    text-decoration: none;
  }

  .b-formulaire-profil {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 12px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 22px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 6px;
  }
  
  .b-formulaire-profil:hover, .b-formulaire-profil:active {
    background-color: rgb(54, 126, 56);
    text-decoration: none;
  }

  .b-calcul {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 6px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 6px;
  }
  
  .b-calcul:hover, .b-calcul:active {
    background-color: rgb(54, 126, 56);
    text-decoration: none;
  }

  .ajouter-ami {
    color: #505050;
    cursor: pointer;
    }

  .retrait-ajouter {
    display:none;
  }

  .retrait-ajouter2 {
    display:none;
  }

  .ajouter-pers {
    margin-bottom: 10px;
    text-align: right;
    padding-right: 10px;
    font-size: 20px; 
  }

  .ajouter-pers:hover, .ajouter-pers:active {
    color: rgb(54, 126, 56);
    text-decoration: none;
}
  
.ajouter-pers > a::before {
  content:" +";
  padding-left: 5px;
  font-size: 20px;
  font-weight: bold;
}
  .ajout {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .ajout input[type=email], .ajout input[type=text] {
    width: 100%;
    font-size: 20px;
    border-radius: 4px;
    display: block;
    background: #ffffff;
  }

  .ajout-buttom {
  margin-top: 3px;
  }

  .b-ajout {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 9px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 6px;
  }
  
  .b-ajout:hover, .b-ajout:active {
    background-color: rgb(54, 126, 56);
    text-decoration: none;
  }

  .calcul-participant {
    padding-left:10px;
    font-size:20px;
  }

  .button-form {
    padding-top: 20px;
    text-align: right;
    }
    
    .container-inline {
      display: inline-block;
      margin-left:5px;
    }

    .container-inline2 {
      margin-left:5px;
    }
    
    .separator-container {
      border: 0.5px solid #c0c0c0;
      width: 100%;
      margin-top: 10px;
      margin-bottom: 15px;
    }

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 17px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border: solid 1px #a7a7a7;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 7px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.btn-mouse{
  display: block; 
  margin-left: 115px; 
  margin-top: -33px; 
  padding-bottom:0px;
  width:27px;
  cursor: pointer;
}

.btn-mouse span{
  visibility:hidden;
}

.btn-mouse img:hover + span {
  visibility:visible;
  color: #505050;
  font-size:13px;
  margin-left: 100px; 
}

/* ----------  TABLEAU -------------------------*/

.font-ajout {
  font-size:13px;
}


.tableau {
  padding-bottom: 70px;
  border-radius: 5px;
  border-collapse: collapse;
  width: 100%;
}

.tableau-th {
  background-color:#0060a9;
  color: white;
  font-size: 17px;
  text-align: center;
  padding: 15px;
}

.tableau-td {
  text-align: center;
  padding: 15px;
  font-size: 13px;
  border-bottom: 1px solid #ddd;
  text-decoration: none;
}

.tableau-td a {
  text-align: left;
  color: black;
  font-size: 10px;
  text-decoration: none;
  border: 1px solid rgb(104, 104, 104);
  padding: 5px;
}

.tableau-td a:hover, .tableau-td a:active {
  color: white;
  background-color: #0060a9;
  border: 1px solid #0060a9;
  text-decoration: none;
}

.tableau-tr {
  text-align: center;
}

.tableau-tr:hover {
  background-color:#d1d1d1;
}

.titre-tableau {
    font-size: 32px;
    text-decoration: none;
  }

.titre-head {
  padding-top: 50px;
  padding-bottom: 0px;
}

.titre-tableau-head{
  margin-bottom: -50px;
  margin-left: 10px;
}

/* --------------------   SECTION ADMIN -----------------------------------     */

.tableau-admin {
  padding-bottom: 70px;
  border-radius: 5px;
  border-collapse: collapse;
  width: 100%;
}

.tableau-admin-th {
  background-color:#1364bc;
  color: white;
  font-size: 17px;
  text-align: center;
  padding: 15px;
}

.tableau-admin-td {
  text-align: center;
  padding: 15px;
  font-size: 13px;
  border-bottom: 1px solid #ddd;
  text-decoration: none;
}

.tableau-admin-td a {
  text-align: left;
  color: black;
  font-size: 10px;
  text-decoration: none;
  border: 1px solid rgb(180, 179, 179);
  padding: 5px;
}

.tableau-admin-td a:hover, .tableau-admin-td a:active {
  color: white;
  background-color: #75b3f5;
  border: 1px solid #75b3f5;
  text-decoration: none;
}

.tableau-admin-tr {
  text-align: center;
}

.tableau-tr:hover {
  background-color:#d1d1d1;
}

.form8 {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #c491a0;;
}

.form8 select {
  width: 100%;
  padding:12.5px;  
  color: #5f5f5f; 
  font-size: 20px; 
  border-radius: 4px;
}

.form8 input[type=email], .form8 input[type=text] {
  width: 100%;
  font-size: 20px;
  border-radius: 4px;
  display: block;
  background: #ffffff;
}

.ajout-admin {
  padding-right: 0px;
  margin-top: 10px;
  text-align:right;
  }

  .button-condition{
    padding-top: 20px;
    text-align: right;
  }
  
  .text-condition {
    color:red; 
    font-size: 18px;
    padding-right: 20px; 
    display: flex; 
    align-items: flex-end; 
    justify-content: flex-end;
  }
  
  /* The container */
  .container-condition {
    display: block;
    text-align: end;
    position: relative;
    padding-right: 63px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .container-condition input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox - tout le carre*/
  .checkmark-condition {
    position: absolute;
    top: 0px;
    padding-right: 20px;
    height: 37px;
    width: 37px;
    background-color: #eee;
    border: solid 1px #a7a7a7;
  }
  
  /* On mouse-over, add a grey background color */
  .container-condition:hover input ~ .checkmark-condition {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .container-condition input:checked ~ .checkmark-condition {
    background-color: #4CAF50;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark-condition::before {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .container-condition input:checked ~ .checkmark-condition::before {
    display: block;
  }
  
  /* Style the checkmark/indicator - crochet interieur */
  .container-condition .checkmark-condition::before {
    left: 12px;
    top: 1px;
    width: 11px;
    height: 28px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  /* .check-admin */
  .check-admin {
    display: block;
    text-align: end;
    position: relative;
    padding-right: 63px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .check-admin input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox - tout le carre*/
  .checkmark-admin {
    position: absolute;
    top: -9px;
    height: 55px;
    width: 55px;
    background-color: #eee;
    border: solid 1px #a7a7a7;
    border-radius: 4px;
  }
  
  /* On mouse-over, add a grey background color */
  .check-admin:hover input ~ .checkmark-admin {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .check-admin input:checked ~ .checkmark-admin {
    background-color: #4CAF50;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark-admin::before {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .check-admin input:checked ~ .checkmark-admin::before {
    display: block;
  }
  
  /* Style the checkmark/indicator - crochet interieur */
  .check-admin .checkmark-admin::before {
    left: 18px;
    top: 4px;
    width: 16px;
    height: 36px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }