* {
  margin: 0;
  padding: 0;
}

label {
  margin: 0;
}

h2 {
  font-size: 18px;
  font-weight: bold;
}

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

.hauteurliste::-webkit-scrollbar {
  display: block;
  width: 10px;
}

.hauteurliste::-webkit-scrollbar-track {
  background: #019add;
}

.hauteurliste::-webkit-scrollbar-thumb {
  background-color: white;
  border-radius: 20px;
  border: 3px solid #019add;
}

:root {
  --melpro-color: #008dc0;
  --green-color: green;
}

a {
  color: white;
  text-decoration: none;
}

td {
  padding: 0 10px !important;
  vertical-align: middle !important;
}

/* Couleurs */
.color-blue {
  color: blue !important;
  fill: blue !important;
}

.color-black {
  color: black !important;
  fill: black !important;
}

.color-orange {
  color: orange !important;
  fill: orange !important;
}

.color-red {
  color: red !important;
  fill: red !important;
}

input::file-selector-button {
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
  border: 1px solid var(--melpro-color);
  padding: 2px 15px;
  margin: 5px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  background-color: var(--melpro-color);
}

.styled_melpro {
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
  border: 1px solid #008dc0;
  padding: 2px 15px;
  margin: 5px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  background-color: #008dc0;
  white-space: nowrap;
}

.styled_melpro svg {
  fill: #fff;
}

.styled_melpro:hover {
  text-decoration: none;
  background-color: white;
  color: #008dc0;
}

.styled_melpro:hover svg {
  fill: #008dc0;
}

.styled_melpro:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.styled_black {
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
  border: 1px solid #000000;
  padding: 2px 15px;
  margin: 5px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  background-color: #000000;
  white-space: nowrap;
}

.styled_black svg {
  fill: #fff;
}

.styled_black:hover {
  text-decoration: none;
  background-color: white;
  color: #000080;
}

.styled_black:hover svg {
  fill: #000080;
}

.styled_black:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.styled_actif {
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
  border: 1px solid #800080;
  padding: 2px 15px;
  margin: 5px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  background-color: #800080;
  white-space: nowrap;
}

.styled_actif svg {
  fill: #fff;
}

.styled_actif:hover {
  text-decoration: none;
  background-color: white;
  color: #800080;
}

.styled_actif:hover svg {
  fill: #800080;
}

.styled_actif:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.styled_red {
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
  border: 1px solid #db0000;
  padding: 2px 15px;
  margin: 5px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  background-color: #db0000;
  white-space: nowrap;
}

.styled_red svg {
  fill: #fff;
}

.styled_red:hover {
  text-decoration: none;
  background-color: white;
  color: #db0000;
}

.styled_red:hover svg {
  fill: #db0000;
}

.styled_red:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.styled_orange {
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
  border: 1px solid orange;
  padding: 2px 15px;
  margin: 5px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  background-color: orange;
  white-space: nowrap;
}

.styled_orange svg {
  fill: #fff;
}

.styled_orange:hover {
  text-decoration: none;
  background-color: white;
  color: orange;
}

.styled_orange:hover svg {
  fill: orange;
}

.styled_orange:active {
  box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.message {
  transform: translateY(-25px);
  animation-duration: 10s;
  animation-name: message;
  transition: transform 500ms;
}

.message_success {
  position: fixed;
  right: 5px;
  z-index: 999;
  background-color: #55d755;
  display: flex;
  justify-content: center;
  padding: 5px 20px;
  font-weight: bold;
  border-radius: 0 0 10px 10px;
  color: white;
}

.message_errors {
  position: fixed;
  right: 5px;
  z-index: 999;
  background-color: #f54141;
  display: flex;
  justify-content: center;
  padding: 5px 20px;
  font-weight: bold;
  border-radius: 0 0 10px 10px;
  color: white;
}

.message:hover {
  transform: translateY(0px);
  animation-duration: 500ms;
}

@keyframes message {
  0% {
    transform: translateY(-100px);
  }
  10% {
    transform: translateY(0px);
  }
  90% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-25px);
  }
}

.header_success {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  width: 100%;
  background-color: rgba(0, 255, 0, 0.9);
  color: white;
  padding: 5px;
}

.header_error {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  width: 100%;
  background-color: rgba(255, 0, 0, 0.9);
  color: white;
  padding: 5px;
}

.admin {
  display: flex;
  flex-direction: row;
}

.admin_menu {
  display: flex;
  flex-direction: column;
  height: 100svh;
  background-color: #5b5b5b;
  overflow-y: scroll;
}

.admin_menu_bouton {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
  border-top: 1px solid #ffffff21;
  padding: 5px 0;
  color: #ffffff;
  background-color: transparent;
  white-space: nowrap;
}

.admin_menu_bouton svg {
  min-height: 30px;
  max-height: 30px;
  min-width: 30px;
  max-width: 30px;
  margin: 5px 10px;
  fill: #ffffff;
}

.admin_menu_bouton_actif {
  text-decoration: none;
  color: #ffffff;
  background-color: #ffffff21;
}

.admin_menu_bouton_actif:hover {
  text-decoration: none;
  color: #ffffff;
}

.admin_menu_bouton_innactif {
  text-decoration: none;
  color: #ffffff;
  background-color: transparent;
}

.admin_menu_bouton_innactif:hover {
  text-decoration: none;
  color: #ffffff;
  background-color: #ffffff21;
}

.admin_menu_bouton_title {
  min-width: 200px;
  margin: 0 10px 0 0;
  padding: 0;
  border: none;
  background-color: transparent;
  text-align: left;
  color: white;
}

.admin_menu_bouton_titre {
  margin-left: 20px;
}

.admin_menu details {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
  border-top: 1px solid #ffffff21;
  text-align: left;
  color: #ffffff;
  white-space: nowrap;
}

.admin_menu details:hover {
  text-decoration: none;
  color: #ffffff;
  background-color: #ffffff21;
}

.admin_menu details > summary {
  display: flex;
  align-items: center;
  list-style: none;
}

.admin_menu details > summary svg {
  min-height: 30px;
  max-height: 30px;
  min-width: 30px;
  max-width: 30px;
  margin: 5px 10px;
  fill: #ffffff;
}

#afficher {
  display: none;
  justify-content: flex-end;
}

#masquer {
  display: flex;
  justify-content: flex-end;
}

/* ?????????? */
details > summary::-webkit-details-marker {
  /* display: none; */
}

/* ?????????? */
details > summary::before {
  /* content: "+";
    display: inline-block;
    margin-right: 5px; */
}

/* ?????????? */
details > summary {
  cursor: pointer;
}

.ts-wrapper {
  max-width: 50svw;
}

.information_bulle {
  height: 18px;
  fill: green;
  margin: 5px 0;
}

.guest_body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100svh;
  overflow: scroll;
}

.guest_body_screen {
  padding: 20px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.facture_notice_bouton {
  position: absolute;
  z-index: 998;
  right: 0;
  padding: 2px 15px;
}

.facture_notice_bouton svg {
  height: 30px;
  fill: black;
}

.facture_notice_bouton:hover + .facture_notice_texte {
  max-width: 90svw;
  max-height: calc(100% - 150px);
  overflow: scroll;
}

.facture_notice_texte {
  position: absolute;
  z-index: 998;
  right: 0;
  max-height: 0;
  max-width: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, max-width 0.5s ease-in-out;
  background-color: var(--melpro-color);
  color: black;
  border-radius: 10px 0 0 10px;
}

.facture_notice_texte:hover {
  max-width: 90svw;
  max-height: calc(100% - 150px);
  overflow: scroll;
}

.facture_notice_texte_zone {
  width: calc(100% - 10px);
  margin: 5px;
  padding-bottom: 10px;
  background-color: white;
  border-radius: 5px 0 0 5px;
}

.facture_notice_texte_zone h2 {
  font-size: 25px;
  padding: 20px 10px 5px 25px;
  margin: 0;
}

.facture_notice_texte_zone div {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  height: 30px;
  padding: 0 5px;
  margin: 2px 0;
  white-space: nowrap;
}

.facture_notice_texte_zone div img {
  width: 66px;
  margin-right: 5px;
}

.facture_notice_texte_zone div svg {
  margin: 0;
  margin-right: 5px;
}

.facture_notice_texte_zone div a {
  margin: 0;
  margin-left: 5px;
}