/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
  padding: 30px;
  padding-top: 2px;
  font-size: 0.9em;
  font-family: sans-serif;
  /*background-color:azure;*/
  background-image: url("/images/background-618226.png")
}


input {
  margin-left: 10px;  
}

canvas {
  background-color: azure;
}

/* Pour les tableaux */
.styled-table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 14px;
  font-family: sans-serif;
  min-width: 400px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  background-color: azure;
  }


.styled-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.styled-table tbody tr.active-row {
  font-weight: bold;
  color: #009879;
}

/* CSS */
input[type=submit]{
  background-color: #009879;
  border-radius: 100px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: 009879;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  color: #ffffff;
  font-size: 14px;
}

/*input[type=submit]:hover {
  box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
  position: absolute;
  float: center;
}*/

/* bouton */
button{
  background-color: #009879;
  border-radius: 100px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: 009879;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  color: #ffffff; 
  margin-left: 30px;
  font-size: 16px;
  margin-top: 5px;
}

button.gris{
  background-color: lightslategray;
  border-radius: 100px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: 009879;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  color: #ffffff; 
  margin-left: 30px;
  font-size: 16px;
}

button.rouge{
  background-color: rgb(187, 33, 72);
  border-radius: 100px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: 009879;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  color: #ffffff; 
  margin-left: 30px;
  font-size: 16px;
}

/*buton:hover {
  box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
  position: absolute;
  float: center;
}*/

/* formulaire */
input[type=text], select, input[type=week],input[type=date]{
  width: 80%;
  padding: 12px 20px;
  margin: 8px 10px;
  display: inline-block;
  border: 1px solid #009879;
  font-size: 14px;
  }

div.azure {
  background-color: azure; 
  padding:10px;
  border-radius: 25px;
}

table tr td{
  padding: 20px;
}

#image_entete{

  border-radius: 25px;
  height: 100px;
  /*border: 2px solid #009879;*/
 
}

#images {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color:azure;
}

hr {
  border-top: 1px dashed;
  color: #009879;
}

row.no-margin {
  margin:0 !important;
  
}

col-md-6 {
  background-color: lightgray !important; 
}


p {
  font-size: 14px
}

p.consigne {
  font-size: 16px;
  color: brown;
  font-family: sans-serif;
  

}

li.consigne {
  font-size: 16px;
  color: brown;
  font-family: sans-serif;
  

}

P.information {
  background-color: yellow;
  color: red;
  text-align: center;
  border-radius: 25px;
  font-size: large;
  
}

/* Large rounded green border */
hr.tableau {
  border: 1px dotted  green;
  
}

/* _______________ GESTION DES FILTRES _________________*/
.container {
  overflow: hidden;
}

.filterDiv {
  display: none; /* Hidden by default */
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Add a light grey background on mouse-over */
.btn:hover {
  background-color: #ddd;
}

/* Add a dark background to the active button */
.btn.active {
  background-color: #666;
  color: white;
}

h2 {
  background-color: #009879;
  color: azure;
  border-radius: 100px;
  text-align: center;
  padding: 10px;
  
}

h3 {
  background-color: #009879;
  color: azure;
  border-radius: 100px;
  text-align: center;
  padding: 10px;
  
}

h1 {
  background-color: #009879;
  color: azure;
  border-radius: 100px;
  text-align: center;
  padding: 10px;
  
}

#filtre {
  background-color: #ac8811;
  color: white;
  padding: 10px;
}


.btn {
  border-radius: 100px;
}

head {
  background-color: #ac8811;
}

.centered-element{
  margin-left: auto;
  margin-right: auto;
  padding-left: 100px

}

.componentWrapper {
  border: solid #009879;
  border-radius: 40px;
  padding: 15px 10px 10px;
  width: 95%;
}

.componentWrapper .header {
  position:absolute;
  margin-top:-25px;
  margin-left:10px;
  color:white;
  background: #009879;
  border-radius:10px;
  padding:2px 10px;
  font-size: 12px;
}


footer {
  text-align:center;
  padding-top:24px;
  
  font-size:13px;
  margin-bottom:0;
}

/* Sidenav menu */
.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: -250px;
  background-color: azure;
  padding-top: 60px;
  transition: left 0.5s ease;
}

/* Sidenav menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 14px;
  color: #009879;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #111;
}

.sidenav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Active class */
.sidenav.active {
  left: 0;
}

/* Close btn */
.sidenav .close {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 22px;
  color: #009879;
  opacity: 1;
}

/* Icône burger */
.burger-icon span {
  display: block;
  width: 35px;
  height: 5px;
  background-color: #009879;
  margin: 6px 0;
}

#divbanner{
  background-color: #009879;
}

#banner {
  max-height: 5%;
  width: 20%;
  border-bottom-left-radius: 15%;
  border-bottom-right-radius: 15%;
  float:right;
  opacity: 90%;
}

#logoepisol {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}



#benevole_recherche  {
  animation-duration: 0.8s;
  animation-name: clignoter;
  animation-iteration-count: 3;
  transition: none;
  margin-left: auto;
  margin-right: auto;
  width: 15%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 30px;
  border: 4mm ridge rgba(33, 161, 70, 0.6);
}

@keyframes clignoter {
 0%   { opacity:1; }
 40%   {opacity:0; }
 100% { opacity:1; }
}