

container {
  padding-top:70px ;
  margin-left:15px
}

h4 {
  padding-top: 10px;
  padding-bottom: 15px;
  padding-left: 0px;
}

h6 {
  padding-top: 10px;
  padding-bottom: 15px;
  padding-left: 0px;
}

.gain-loss-table-cell {
  font-size: x-small;
}

/* Modify BS5 accordion : no focus box, backgound, arrow black... */

.accordion-button {
  padding-top: .75rem;
  padding-bottom: .75rem;
}

/* style de départ avant qu'on replie l'accordéon */
.accordion-button:not(.collapsed) {
  color: black  !important;
  background-color: lightgray !important;
  box-shadow: 0px !important;
  border: hidden !important;
}

/* the following makes the arrow black" */
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23YOUR_HEX_CODE'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  box-shadow: 0px !important;
  border: hidden !important;
}


/* style après qu'on replie l'accordéon (pas si initialement plié) */
.accordion-button.collapsed {
  color: black; /* couleur texte et icone */
  background: #6c757d; /* pas utile */
  background-color: lightgray !important; /* couleur du fond */
}
.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active  {
  background-color: #f5f5f5 !important;
  color: black !important;
  text-decoration: none !important;
  border: hidden !important;
  border-color: #f5f5f5 !important;
  box-shadow: 0px !important;

}

.accordion-button:focus {
  z-index: 3;
  border-color: #f5f5f5 !important;
  outline: 0;
  box-shadow: 0 0 0 .0rem #f5f5f5 !important;
  background-color: lightgray;
}

/* The content  area */
.accordion-body {
  border: none !important;
}


/* Styles pour les écrans larges */
.font-sm {
}
.display-md {
  display: inline;
}
.display-sm {
  display: none;
}

/* Styles pour les smartphones modernes (breakpoint medium = 758px) */
@media only screen and (max-width: 768px) {
  .font-sm {
    font-size: 11px;
  }
  .display-md {
    display: none;
  } 
  .display-sm {
    display: inline;
  }
}