/* Material Icons */

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

/* Main layout  */

body,
#page_container {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow: auto;
}


/* API wait screen */
.wait_overlay {
    display: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: transparent;
    z-index: 9999;
}

.wait_overlay:hover {
    cursor: url(/530c8e1e82e79015a890.svg), pointer;
}


.clipboard_hover:hover {
    color: blue;
    text-decoration: underline;
    cursor: url(/b42414d9b458136b34b4.svg), pointer;
}
.ms.form.element {
    padding: 10px;
}



/* 
.ms.form.row:not(.first) {
    margin-top: 0.2rem;
}
 */

.ms.form.element input:invalid {
  box-shadow: 0 0 5px 1px red;
}

.ms.form.element input:focus:invalid {
  box-shadow: 0 0 5px 1px orange;
}

/*
Separators
*/

.text-divider {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: silver;
}

.text-divider::before {
  content: '';
  margin-top: 0.2rem;
  margin-right: 0.5rem;
  height: 2px;
  background-color: silver;
  flex-grow: 1;
}

.text-divider::after {
  content: '';
  margin-top: 0.2rem;
  margin-left: 0.5rem;
  height: 2px;
  background-color: silver;
  flex-grow: 1;
}

input[type="email"] {
  text-transform: lowercase;
}

/*
color_field
*/
.color_field input.unset {
  border-width: 0px;
}

.color_field input.set {
  border-width: 2px;
}

.color_field svg {
  height: 1em;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 0.2rem;
}

.color_field label {
  margin-right: 0.2rem;
}

/* 
  check-form-button
  
  Modification d'accordion-button
  
*/


.check-form-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 1rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}
@media (prefers-reduced-motion: reduce) {
  .check-form-button {
    transition: none;
  }
}
.check-form-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.check-form-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%27http://www.w3.org/2000/svg%27 viewBox%3D%270 0 448 512%27 fill=%27%2300DF00%27  %3E%3Cpath d%3D%27M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z%27/%3E%3C/svg%3E");
}
.check-form-button::after {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 384 512%22 fill=%27%23DF0000%27%3E%3C%21--%21Font Awesome Free 6.7.2 by %40fontawesome - https%3A%2F%2Ffontawesome.com License - https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree Copyright 2025 Fonticons%2C Inc.--%3E%3Cpath d%3D%22M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
}
@media (prefers-reduced-motion: reduce) {
  .check-form-button::after {
    transition: none;
  }
}
.check-form-button:hover {
  z-index: 2;
}
.check-form-button:focus {
  z-index: 3;
  outline: 0;
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

.white-space-break-spaces {
    white-space: break-spaces;
}
.w-10{
    width: 10%;
}
.w-20{
    width: 20%;
}
.w-30{
    width: 30%;
}
.w-40{
    width: 40%;
}
.w-50{
    width: 50%;
}
.w-60{
    width: 60%;
}
.w-70{
    width: 70%;
}
.w-80{
    width: 80%;
}
.w-90{
    width: 90%;
}
.flex-1{
    flex: 1;
}
.flex-10{
    flex: 10%;
}
.flex-20{
    flex: 20%;
}
.flex-30{
    flex: 30%;
}
.flex-40{
    flex: 40%;
}
.flex-50{
    flex: 50%;
}
.flex-60{
    flex: 60%;
}
.flex-70{
    flex: 70%;
}
.flex-80{
    flex: 80%;
}
.flex-90{
    flex: 90%;
}
.flex-100{
    flex: 100%;
}
.font-0_5{
    font-size: 0.5rem !important;
}
.font-0_6{
    font-size: 0.6rem !important;
}
.font-0_7{
    font-size: 0.7rem !important;
}
.font-0_8{
    font-size: 0.8rem !important;
}
.font-0_9{
    font-size: 0.9rem !important;
}
.font-1_25{
    font-size: 1.25rem !important;
}
.font-1_5{
    font-size: 1.5rem !important;
}
.font-1_75{
    font-size: 1.75rem !important;
}
.font-2{
    font-size: 2rem !important;
}
.italic{
    font-style: italic;
}
.underline{
    text-decoration: underline;
}
.underline-red{
    text-decoration: underline;
    text-decoration-color: var(--red_tc);
}
.bold{
    font-weight: bold;
}
.uppercase{
    text-transform: uppercase;
}
.capitalize{
    text-transform: capitalize;
}
.lowercase{
    text-transform: lowercase;
}
.justify{
    text-align: justify;
}
.opacity-0{
    opacity: 0;
}
.opacity-0-5{
    opacity: 0.5 !important;
}
.opacity-1{
    opacity: 1 !important;
}
.pointer{
    cursor: pointer;
}
.disabled{
    background-color: rgba(0,0,0,0.7) !important;
}
.overflow-x-hidden{
    overflow-x: hidden;
}
.overflow-y-hidden{
    overflow-y: hidden;
}
.overflow-hidden{
    overflow: hidden;
}
.text-ellipsis{
    text-overflow: ellipsis;
}
.white-space-nowrap{
    white-space: nowrap;
}
.hide{
    display: none !important;
}
.text-decoration-none{
    text-decoration: none !important;
}
.line-height-1{
    line-height: 1 !important;
}

.bg-green-MS{
    background-color: var( --green_ms) !important;
}
.bg-red-MS{
    background-color: var( --red_ms) !important;
}
.bg_button_ms{
    background-color: var(--bg_button_ms);
}
.text-blue-MS{
    color: var(--blue_ms) !important;
}
.text-red-MS{
    color: var(--red_ms) !important;
}
.text-green-MS{
    color: var(--green_ms) !important;
}

.radius-5 {
    border-radius: 5px;
}
.radius-10 {
    border-radius: 10px;
}
.radius-15 {
    border-radius: 15px;
}






.sidebar_accordion .nav-item {
    display: flex;
    padding: 1em 0.5em;
    margin: 0 0.5em;
    border-bottom: 1px solid black;
}

.sidebar_accordion .nav-item .wrap {
    width: 100%;
}

.sidebar_accordion .nav-item .wrap .link {
    color: black;
    text-decoration: none;
    width: 100%;
    padding: 0.5em;
    display: block;
    border-radius: 5px;
}

.sidebar_accordion .nav-item .wrap .link:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

.sidebar_accordion .nav-item .wrap i {
    margin: auto;
    padding-right: 15px;
    font-size: 1.25rem;
    width: 40px;
}

.sidebar_accordion .nav-item .wrap .text {
    margin: auto;
    font-size: 1.25rem;
}

.sidebar_accordion .nav-item .wrap .collapse-link {
    color: black;
    text-decoration: none;
    width: 100%;
    padding: 0.5em;
    display: block;
    border-radius: 5px;
}

.sidebar_accordion .nav-item .wrap .collapse-link:hover {
    background-color: rgba(0, 0, 0, 0.15);
    color: black !important;
}

.sidebar_accordion .nav-item .wrap .collapse-link i {
    margin-right: 5px;
    font-size: 1rem;
}

.sidebar_accordion .nav-item .wrap .collapse-text {
    font-size: 1rem;
}

.sidebar_accordion li {
    list-style: none;
}
body {
  font-family: "Montserrat", "roboto", sans-serif;
}

.small-font {
  font-size: 12px;
}

.mb_text {
  font-size: 32px;
  margin: 0 0 0 1rem;
  padding: 1rem;
}

.default_height {
  flex: 1;
  overflow-y: scroll;
  scrollbar-width: none;
  /* Masquer la scrollbar pour Firefox */
  -ms-overflow-style: none;
  /* Masquer la scrollbar pour IE et Edge */
}

.default_height::-webkit-scrollbar {
  display: none;
  /* Masquer la scrollbar pour les navigateurs WebKit */
}

.default_color {
  color: #45a59d;
}

.default_bg_color {
  background-color: #45a59d !important;
}

.bg_color_secondary {
  background-color: #519689b7 !important;
}
.bg_warning {
  background-color: #ffeeba;
}
.nouvelle-classe {
  background-color: initial !important;
  border-color: initial !important;
  color: initial !important;
}

/************************************************* Modal */
.modal-header {
  background-color: #45a59d;
  color: white;
  font-size: 20px;
}

.modal-footer button {
  background-color: #45a59d;
  border: none;
  color: white;
}

.modal-body b {
  color: #45a59d;
}

.modal-footer button:hover {
  background-color: #08adad;
  color: white;
}

/************************************************* Global Btn  & input */
.btn_no_rounded {
  width: 200px;
  background-color: #45a59dde;
  color: white;
  border-radius: 10px;
  transition: all ease-in 0.1s;
}

.btn_no_rounded_danger {
  width: 200px;
  background-color: #a54545de;
  color: white;
  border-radius: 10px;
  transition: all ease-in 0.1s;
}
.btn_danger {
  width: 200px;
  background-color: #a54545de;
  color: white;
  border-radius: 25px;
  transition: all ease-in 0.1s;
  padding: 10px 20px;
}

.standard_btn {
  width: 200px;
  background-color: #45a59d;
  color: white;
  border-radius: 25px;
  transition: all ease-in 0.1s;
}
.standard_btn_filter {
  width: 200px;
  background-color: #6c757d;
  color: white;
  border-radius: 25px;
  transition: all ease-in 0.1s;
}

.btn_sm {
  width: 80px;
}

.standard_btn_sm {
  width: auto;
  background-color: #45a59d;
  color: white;
  transition: all ease-in 0.1s;
}

.standard_btn:disabled,
.standard_btn_sm:disabled {
  background-color: #d3d3d3;
  color: #a9a9a9;
  border: 1px solid #d3d3d3;
  cursor: not-allowed;
}

.standard_btn_lg {
  width: 350px;
  background-color: #45a59d;
  color: white;
  border-radius: 25px;
  transition: all ease-in 0.1s;
}

.mob_btn {
  width: 120px;
  background-color: #45a59d;
  color: white;
  border-radius: 25px;
  transition: all ease-in 0.1s;
}

.standard_btn_modal {
  background-color: #45a59d;
  color: white;
  transition: all ease-in 0.1s;
}
.standard_btn_filter:hover {
  opacity: 0.8;
  background-color: #6c757d;
  color: white;
}
.standard_btn:hover,
.btn_no_rounded:hover,
.standard_btn_modal:hover,
.standard_btn_lg:hover,
.standard_btn_sm:hover {
  background-color: #08adad;
  color: white;
}

.btn_no_rounded_danger:hover,
.btn_danger:hover {
  background-color: #a54545b0;
  color: white;
}

.btn:focus {
  outline: none;
  box-shadow: none;
}

/* secousse aux boutons standard lors du survol */
.pulse_anim:hover {
  animation: pulse 1s;
}

/* Ajouter une animation de secousse aux boutons de suppression lors du survol */
.delete_btn:hover {
  animation: shake 0.5s;
}

/* Animation pour le bouton standard d'accès */
.standard_access_btn:hover {
  animation: pulse 1s;
}
.voucherBtnInfo {
  background-color: #45a59d;
  border: none;
  color: white;
  transition: 0.2s ease-in;
}

.voucherBtnInfo:hover {
  transform: scale(1.1);
  background-color: #08adad;
}
.voucherBtnInfoWarning {
  background-color: #ffc004;
  border: none;
  color: white;
  transition: 0.2s ease-in;
}

.voucherBtnInfoWarning:hover {
  transform: scale(1.1);
  background-color: #ffdd03;
}
/*****Array Btn  */
.standard_Tab_btn {
  border: none;
  background-color: inherit;
  color: #45a59d;
  transition: all ease-in 0.1s;
}

.standard_Tab_btn:hover {
  transform: scale(1.1);
  background-color: #08adad;
  color: white;
}
.disabled-hover {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}

.disabled-hover:hover {
  background-color: inherit !important;
  color: inherit !important;
  border-color: inherit !important;
}
/*****input & Btn  */
.input_style {
  border: 2px solid #45a59d;
  border-radius: 15px;
}

.sideRow {
  width: 50px;
  height: 10px;
  background-color: #45a59d;
  border-radius: 15px;
}

.siderow_md {
  width: 20px;
  height: 5px;
  background-color: #45a59d;
  border-radius: 15px;
}

.gl_container_size {
  height: 80vh;
}

.container_desk_title {
  display: flex;
  align-items: center;
}

/******   Gestion des input de choix des dates via pickaday ****/
.pika-single .pika-table td:hover,
.pika-single .pika-table td:hover .pika-button {
  background-color: #08adad !important;
  color: #ffffff !important;
  border-radius: 3px !important;
}

/* Couleur de la date sélectionnée */
.pika-single .pika-table td.is-selected,
.pika-single .pika-table td.is-selected .pika-button {
  background-color: #45a59d !important;
  color: #ffffff !important;
  border-radius: 3px !important;
}

.pika-single .pika-table td.is-today,
.pika-single .pika-table td.is-today .pika-button {
  color: #45a59d !important;
  border-radius: 3px !important;
}

#dashboard {
  color: #08adad;
}

/************************************************* section & Pane */
section > #pane_container {
  padding: 0;
  height: 85vh;
  margin-left: 30vh;
}

#page_panes {
  margin: 0;
  min-height: 100vh;
  min-width: 100vw;
}

#pane_container {
  order: 2;
  flex: 1 1;
}

#pane_container > .pane {
  display: none;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

#page_container > .page {
  display: none;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

header {
  height: 4rem;
  padding: 0;
  background-color: inherit;
  margin-left: 0;
}

.uglyNabar {
  background-color: yellow;
}

.drop_menu {
  border: none;
  background-color: #45a59d;
}

.drop_hov_item {
  color: white;
}

.drop_hov_item:hover {
  background-color: #08adad;
  color: white;
}

.header_container_logo {
  width: 30vh;
  position: fixed;
}

.header_logo {
  width: 50px;
  height: 44px;
  margin: 0.3rem 0.5rem;
}

.header_Rounded_logo {
  background-color: #fdfdfde5;
  margin-top: 2px;
}

.main_btn_menu {
  width: auto;
  margin: 0.3rem 2rem 0 0;
  padding: 0.5rem 1rem;
  background-color: #45a59d;
  color: white;
  border-radius: 25px;
  transition: all ease-in 0.1s;
  border: none;
  z-index: 2000;
}

.container_nav {
  background-color: white;
  width: 30vh;
  height: 100vh;
  z-index: 300;
  position: fixed;
  overflow-y: auto;
}

.sidebar_accordion .nav-item .wrap .link {
  color: black;
  text-decoration: none;
  width: 100%;
  padding: 0.5em;
  display: block;
  border-radius: 0;
  border: none;
  transition: all 0.1s ease;
}

.sidebar_accordion .nav-item .wrap .link:hover {
  background-color: white;
  color: #45a59d;
}

.sidebar_accordion .nav-item {
  border: none;
}

.sidebar {
  border: none;
}

section {
  height: calc(auto - 4rem);
  display: flex;
}

.header_logo {
  cursor: pointer;
}

.order_img_container {
  background-image: url(/22d4af4f9dbcc1810206.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 200px;
  height: 300px;
}

@media (min-width: 768px) {
  .header_logo {
    cursor: default;
  }
}

@media (max-width: 767.98px) {
  .header_container_logo {
    width: 30vh;
    position: relative;
  }

  .header_Rounded_logo {
    margin-top: 2px;
    background-color: #d8dddd75;
  }

  .container_nav {
    display: none !important;
  }

  .container_nav_clone {
    display: block !important;
  }

  .container_desk_title {
    display: flex;
  }
}

@media (max-width: 767.98px) {
  .default_height {
    min-height: auto;
  }

  section > #pane_container {
    margin-left: 0;
  }
}

@media (max-width: 430px) {
  header {
    position: relative;
  }

  section > #pane_container {
    padding: 0;
    height: auto;
    overflow: hidden;
    width: 100%;
  }

  /* ajoute de la hauteur a tous les containers header des pages pour la version mobile */
  .mob-header-ct {
    margin: 1rem 0 0 0;
  }

  .mb_text {
    font-size: 25px;
    margin: 0 0 0 1rem;
    padding: 1rem;
  }

  .default_height {
    overflow: hidden;
    width: 425px;
  }

  .logo_menu_mob {
    animation: pulse infinite 1s;
    /* L'animation 'pulse' avec une durée de 1 seconde en boucle */
  }
}

/************************************************* Side Bar  */

/* .sidebar.show {
    left: 0;
    width: 300px;
} */

/* .sidebar {
    width: 200px;
    overflow-y: auto;
    border-right: 2px solid #45a59d;
    position: absolute;
    left: -50vw;
    width: 0;
    top: 4rem;
    height: calc(100vh - 4rem);
    transition: 0.5s;
    background-color: #fff;
    z-index: 1040;
} */

/* .sidebar_overlay {
    display: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: transparent;
    z-index: 1039;
} 

/* *******************************************************footer */

.footerPageBot {
  display: none;
  width: 100%;
  /* Cache le footer par défaut */
}

.activeFooterBot {
  display: block;
  /* Affiche le footer quand la classe activeFooter est ajoutée */
}

.footerPage {
  width: 100%;
  margin: 1rem 0;
}

.footerPage nav {
  height: 100%;
  margin-left: 30vh;
}

.footerPageBot nav {
  height: 100%;
  padding: 2rem 0;
}

.footerPage button,
.footerPageBot button {
  width: 200px;
  background-color: #45a59d;
  color: white;
  border-radius: 20px;
  border: none;
  transition: all ease-in 0.2s;
}

.footerPage button:hover {
  background-color: #08adad;
  transform: scale(1.1);
}

.footerPage li a,
.footerPageBot li a {
  color: black;
}

.footerPage li a:hover,
.footerPageBot li a:hover {
  color: #45a59d;
}

@media (max-width: 767.98px) {
  .footerPage,
  .footerPageBot {
    height: auto;
  }

  .footerPage nav,
  .footerPageBot nav {
    margin-left: 0;
  }
}

#wait_overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
  font-size: 1.5em;
  text-align: center;
}

.overlay_logo {
  width: 150px;
  height: 150px;
}

@media (max-width: 430px) {
  .footerPage {
    padding: 1rem 0;
    background-color: #45a59d;
    overflow-x: hidden;
    margin-bottom: 0;
    /* Couleur de fond pour se démarquer */
  }

  .footerPage nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    /* Ajustement pour les petits écrans */
    padding: 0;
  }

  .footerPage li {
    margin-bottom: 0.5rem;
    text-align: center;
    width: 100%;
  }

  .footerPage li a {
    color: white;
    font-size: 1rem;
    /* Taille de police ajustée pour la lisibilité */
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 0.5rem;
    /* Couleur d'arrière-plan des liens */
    border-radius: 10px;
  }

  .footerPage li a:hover {
    background-color: white;
    color: black;
    /* Effet hover pour les liens */
  }

  /* Bouton "nous contacter" */
  .footerPage button {
    width: auto;
    padding: 0.7rem 1.5rem;
    background-color: #08adad;
    color: white;
    border-radius: 20px;
    border: none;
    transition: all ease-in 0.2s;
    margin-top: 1rem;
  }

  .footerPage button:hover {
    background-color: #06baba;
    transform: scale(1.05);
  }
}

@media (max-width: 375px) {
  .default_height {
    width: 375px;
  }
}

/* Custom Animation CSS */
.animated {
  animation-duration: 1.5s;
}

.login_panel {
  animation: fadeInUp 1s ease-in-out;
}

.header_logo {
  animation: bounceIn 1.5s ease-in-out;
}

/* .btn {
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.btn:hover {
  background-color: #08adad;
  transform: scale(1.05);
} */

#btn_submit_login {
  transition: background-color 0.3s, transform 0.3s ease-in-out;
}


.text-divider {
  animation: fadeIn 1.5s ease-in-out;
}

#google_sso_btn {
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#google_sso_btn:hover {
  background-color: #f1c40f;
  transform: scale(1.05);
}

#sso_bar img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}


.container_log {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 2;
}

.container_log_title {
  height: 50px;
}

.log_standard_btn {
  background-color: #45a59d;
}

.background-blur {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  /* background-image: url('https://static.monnaie-services.com/imspass/fond-ecran-cinema-billetterie.webp'); */
  background-position: left;
  background-size: cover;
  filter: blur(0px) opacity(0.9);
  z-index: 1;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ffffffda, #9ccecaa2, #45a59d63, #9ccecaa2, #ffffffda);
  background-size: 400% 400%;
  animation: gradientAnimation 50s ease infinite;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.login_panel {
  position: relative;
  margin: 0 0vh 0 0;
  background-color: rgba(255, 255, 255, 0.973);
  border: #45a59d52 solid 5px;
  border-radius: 20px;
  padding: 2rem;
  z-index: 3;
  width: 380px;
}

.ms.form.element {
  padding: 10px;
}

.login_panel .btn {
  margin-top: 1rem;
  width: 100%;
}

.text-divider {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  --text-divider-gap: 1rem;
}

.text-divider::before,
.text-divider::after {
  content: '';
  height: 1px;
  background-color: silver;
  flex-grow: 1;
}

.text-divider::before {
  margin-right: var(--text-divider-gap);
}

.text-divider::after {
  margin-left: var(--text-divider-gap);
}

.sso_btn img {
  margin: 6px;
  width: 20px;
  height: 20px;
}

.log_input input {
  border: 2px solid #45a59d;
  border-radius: 15px;
}

.log_input input:invalid {
  box-shadow: none;
}

.sso_btn {
  margin-top: 1rem;
  width: 100%;
  display: flex;
}

@media(max-width : 992px) {
  .login_panel {
    position: relative;
    margin: 0 0 0 0;
    background-color: rgba(255, 255, 255, 0.973);
    border: #45a59d solid 5px;
    border-radius: 20px;
    padding: 2rem;
    z-index: 3;
    width: 380px;
  }
}

@media(max-width : 400px) {
  .login_panel {
    border: none;
    border-radius: 0px;
    width: 100%;
  }
}
/* Custom Animation CSS */
.animated {
  animation-duration: 1.5s;
}

.wl_card {
  transition: transform 0.3s ease-in-out;
}

.wl_card:hover {
  transform: translateY(-10px) scale(1.05);
}

.wl_header_title h2 {
  animation-delay: 0.5s;
}

.wl_header_img img {
  animation-delay: 0.5s;
  animation-duration: 2s;
}

.wl_footer_page nav a {
  transition: color 0.3s;
}


/* Ajout du CSS existant */
.wl_btn {
  width: 200px;
  background-color: #45a59d;
  color: white;
  border-radius: 25px;
  transition: all ease-in 0.1s;
  border: none;
  padding: 0.5rem;
  text-align: center;
  text-decoration: none;
}

.wl_btn:hover {
  background-color: #08adad;
  color: white;
  text-decoration: none;
}

.wl_btn_margin {
  margin-left: 28%;
}

.responsive-text {
  font-size: clamp(0.5rem, 2rem);
}

.wl_header {
  position: relative;
  overflow: hidden;
  height: 70vh;
}

.wl_header_img {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.wl_header_container_img {
  width: 50%;
}

.wl_header_container_log {
  width: 50%;
}

.wl_container_Img {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: end;
}

.wl_container_Img img {
  height: 70vh;
  z-index: 1;
  width: 68%;
}

.wl_header_img img {
  width: 150px;
  height: 190px;
  object-fit: contain;
  object-position: center;
}

.wl_container_info {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
}

.wl_header_info_top {
  height: 20vh;
}

.wl_header_info_bot {
  height: 40vh;
  margin: auto;
  display: block;
}

.wl_header_title {
  width: 32%;
  text-align: end;
}

.wl_header_title span {
  font-size: 25px;
  font-weight: 600;
}

.wl_card {
  width: 15rem;
  border: none;
}

.wl_card_img {
  height: 8rem;
}

.wl_bot_container {
  overflow: hidden;
}

.wl_bot_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.wl_footer_page {
  width: 100%;
  margin: 3rem 0;
  padding: 1rem 0;
}

.wl_footer_page nav {
  height: 100%;
}

.wl_footer_page button {
  width: 200px;
  background-color: #45a59d;
  color: white;
  border-radius: 20px;
  border: none;
  transition: all ease-in 0.2s;
}

.wl_footer_page button:hover {
  background-color: #08adad;
  transform: scale(1.1);
}

.wl_footer_page li a {
  color: black;
}

.wl_footer_page li a:hover {
  color: #45a59d;
}

@media(max-width : 769px) {
  .wl_header {
    height: 60vh;
  }

  .wl_header_container_img {
    width: 20%;
  }

  .wl_header_container_log {
    width: 80%;
  }

  .wl_header_img {
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .wl_container_Img {
    width: 100%;
    text-align: center;
  }

  .wl_header_img img {
    width: 100px;
    height: 90px;
    object-fit: contain;
    object-position: center;
  }

  .wl_container_Img img {
    width: 80%;
    height: 45vh;
  }

  .wl_header_info_top {
    height: 20vh;
  }

  .wl_header_info_bot {
    height: 65vh;
    margin: 0;
    padding: 0;
  }

  .wl_header_title {
    width: 100%;
    text-align: start;
    display: flex;
    margin-top: 1rem;
  }

  .wl_header_title h2 {
    margin: 2rem 0 0 0.5rem;
  }

  .wl_btn_margin {
    margin: 2rem 0 2rem auto;
  }
}

@media(max-width : 560px) {
  .wl_header {
    height: 50vh;
  }

  .wl_header_img {
    width: 80px;
    height: 80px;
    text-align: center;
  }

  .wl_header_img img {
    width: 80px;
    height: 90px;
    object-fit: contain;
    object-position: center;
  }

  .wl_container_Img {
    width: 100%;
    text-align: center;
  }

  .wl_container_Img img {
    width: 80%;
    height: 30vh;
    margin-top: 5rem;
  }

  .wl_card {
    width: 10rem;
    border: none;
  }

  .wl_card_img {
    height: 5rem;
  }

  .wl_header_title h2 {
    font-size: 25px;
  }
}

@media(max-width : 450px) {
  .wl_header_title {
    margin: 2rem 0 5rem 0;
  }

  .wl_header_title h2 {
    font-size: 15px;
  }

  .wl_footer_page {
    padding: 1rem 0;
    background-color: #45a59d;
    overflow-x: hidden;
    margin-bottom: 0;
  }

  .wl_footer_page nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    padding: 0;
  }

  .wl_footer_page li {
    margin-bottom: 0.5rem;
    text-align: center;
    width: 100%;
  }

  .wl_footer_page li a {
    color: white;
    font-size: 1rem;
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 0.5rem;
    border-radius: 10px;
  }

  .wl_footer_page li a:hover {
    background-color: white;
    color: black;
  }

  .wl_footer_page button {
    width: auto;
    padding: 0.7rem 1.5rem;
    background-color: #08adad;
    color: white;
    border-radius: 20px;
    border: none;
    transition: all ease-in 0.2s;
    margin-top: 1rem;
  }

  .wl_footer_page button:hover {
    background-color: #06baba;
    transform: scale(1.05);
  }
}

@media(max-width : 376px) {
  .wl_card {
    width: 100%;
    border: none;
  }

  .wl_card_img {
    height: 5rem;
  }

  wl_header a {
    font-size: 9px;
  }
}
.user_account_icon{
font-size: 200px;
color: white;
}
.acc_container_main{
    display: flex;
    justify-content: center;
    border: double 5px #45a59d;
    margin-bottom: 1rem;
    height: auto;
    background-color: #45a59d;
    overflow: hidden;
}
.acc_container_info{
    width: 50%;
    padding: 0 1rem;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.acc_container_logo{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: inherit;
    height: auto;
}
.acc_p span{
    color: #45a59d;
}
.acc_p i{
    color: #08adad;
}

@media (max-width:750px) {
    .user_account_icon{
        font-size: 150px;
        }
        .acc_container_main{
            display: flex;
            flex-direction: column;
            border: none;
        }
        .acc_container_info{
            width: 100%;
        }
        .acc_container_logo{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .button-container{
            padding: 0 0 2rem 0;
        }
}
.conditional_content {
    display: flex;
}

.mention_content {
    width: 90%;
}

.conditional_side_nav {
    width: 50px;
    margin: 0 0 0 20px;
    height: 100vh;
    position: sticky;
    top: 0;
    bottom: 0;
    width: apx;
    overflow-y: auto;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#conditional_footer_legal {
    display: none;
}

#page_notices {
    overflow: auto;
}
#conditional_footer_cgv {
    display: none;
}

@media(max-width:450px) {
    .conditional_side_nav {
        display: none;
    }
}
/* .navbar {
    background-color: #343a40;
}

.navbar-brand,
.nav-link {
    color: #fff !important;
} */

.about_header {
    background: linear-gradient(rgba(0, 0, 0, 0.349), rgba(0, 0, 0, 0.267)), url('https://images.pexels.com/photos/258160/pexels-photo-258160.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1') no-repeat center center;
    background-size: cover;
    height: 600px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.about_header .logo img {
    width: 150px;
    height: 150px;
}

.about_header .text h1 {
    font-size: 4rem;
    margin-bottom: 20px;
}

.about_header .text p {
    font-size: 1.5rem;
}

.about_content {
    padding: 50px 0;
}

.about_content h2 {
    margin-bottom: 20px;
}

.team .card {
    border: none;
    margin-bottom: 30px;
}

.team .card img {
    border-radius: 50%;
}

/* .footer {
    background-color: #343a40;
    color: white;
    padding: 20px 0;
    text-align: center;
} */
.about_history,
.about_mission {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.about_history .text,
.about_mission .text,
.about_mission .image,
.about_history .image {
    flex: 1 1 45%;
    margin: 10px;
}

.about_history .image img,
.about_mission .image img {
    width: 100%;
    border-radius: 10px;
}

#conditional_footer_about {
    display: none;
}

@media(max-width:430px) {
    .about_header {
        height: 400px;
    }

    .about_mission {
        margin-top: 3rem;
        flex-direction: column-reverse;
    }

    .about_header .logo img {
        width: 100px;
        height: 100px;
    }

    .about_header .text h1 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .about_header .text p {
        font-size: 1rem;
    }
}

/*# sourceMappingURL=bundle.css.map*/