.hidden {
  display: none;
}

.text-center {
  text-align: center !important;
}

#pagination_block {
  display: flex;
  justify-content: center;
}

#search_fields_buttons_container {
  display: flex;
  justify-content: right;
  padding-right: 15px;
}

input.search-filters,
select.search-filters,
div.search-filters-container span.select2 {
  height: 40px !important;
  width: 33% !important;
  margin-top: 5px !important;
}

#pagination_nav {
  margin-top: 5em;
}


form div.search-filters-container {
  margin-bottom: 1em;
  margin-top: 2em;
}


/*Bouton plus pour "Voir plus"*/
.button_plus,
.button_minus {
  position: relative;
  width: 35px;
  height: 35px;
  background: #fff;
  cursor: pointer;
  border: 2px solid #2592A9;
  margin: auto;
}

/*barre horizontale*/
.button_minus:after {
  content: '';
  position: absolute;
  transform: translate(-50%, -50%);
  height: 4px;
  width: 50%;
  background: #2592A9;
  top: 50%;
  left: 50%;
}

/*barre verticale*/
.button_plus:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #2592A9;
  height: 50%;
  width: 4px;
}

.button_plus:hover:before,
.button_minus:hover:after {
  background: #fff !important;
  transition: 0. !important;
}

.button_plus:hover,
.button_minus:hover {
  background-color: #2592A9;
  transition: 0.2s;
}

/*Fin bouton plus pour "Voir plus"*/

button.export_button,
div#search_fields_buttons_container button {
  margin-left: 5px;
}

a#superadmin_button {
  margin-bottom: 15px;
  border: #010718 1px solid;
  margin-left: 15px;
}

/*titre admin et superadmin*/
nav div#nav_admin_section_title,
div#superadmin_section_title {
  padding: 15px;
  margin-bottom: 10px;
  text-align: center;
  border: #010718 1px solid;
}

div#superadmin_section_title {
  background-color: #CF4944;
}

nav div#nav_admin_section_title {
  background-color: #DD823B;
  margin-right: 15px;
  margin-left: 15px;
}

nav div#nav_admin_section_title h1,
div#superadmin_section_title h1 {
  display: inline;
}

nav div#nav_admin_section_title i,
div#superadmin_section_title i {
  vertical-align: bottom;
}

/*Fin titres*/

/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Nav */
nav#main_top_nav {
  background-color: #f8f9fa;
  /* Light gray background color */
  padding: 10px 0;
  /* Padding top and bottom */
  text-align: center;
  /* Center-align menu items */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Add subtle shadow for depth */
}

nav#main_top_nav #nav_admin_section_title {
  color: #495057;
  /* Dark gray text color */
  font-size: 18px;
  /* Font size */
  margin-bottom: 10px;
  /* Add space between section title and links */
}

nav#main_top_nav #nav_admin_section_title i {
  vertical-align: middle;
  /* Align icon vertically with text */
  margin-left: 5px;
  /* Add space between text and icon */
}

nav#main_top_nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav#main_top_nav ul li {
  display: inline-block;
  border: 2px solid transparent;
  /* Add transparent border to each navigation link */
  border-radius: 5px;
  /* Add rounded corners */
  margin: 0 5px;
  /* Add spacing between each navigation link */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Add subtle shadow */
  background-color: #ffffff;
  /* Change background color to white */
  border: 2px solid #949AA5;
  /* Add border color */
}

nav#main_top_nav ul li a {
  display: block;
  color: #495057;
  /* Dark gray text color */
  text-decoration: none;
  padding: 10px 20px;
  /* Padding inside menu items */
  font-size: 16px;
  /* Font size */
  transition: background-color 0.3s, color 0.3s;
  /* Smooth transition for background and text color */
}

nav#main_top_nav ul li a:hover {
  background-color: #ffac33;
  /* Light gray background on hover */
}

/*
        2025-01-14 - JPL
        warning! 
        Remettre a dans pointeur ci-dessous pour consistance avec test preprod
        À revérifier/tester 
*/
nav#main_top_nav ul li.active a {
  background-color: #ffac33;
  /* Orange active state background color */
  color: black;
  /* Active state text color */
}

/* Add indicator for hover state */
nav#main_top_nav ul li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background-color: #DD823B;
  /* Blue color for hover indicator */
  transition: width 0.3s ease;
}

nav#main_top_nav ul li a:hover::after {
  width: 100%;
}

/* End Nav */

/*Fix pour que la hauteur des select soit normale*/
div.wrapper_a_pmi_admin select.form-control:not([size]):not([multiple]) {
  height: auto;
}

/* Sticky header*/
div.customer-detail thead.course-header tr.course-header-item,
div.table-bordered div#header {
  position: sticky;
}

div.table-bordered div#header {
  top: 0;
  z-index: 10;
}

div.customer-detail thead.course-header tr.course-header-item {
  top: 50px;
}

/*Fin sticky header*/

/*onglet 3*/
.container-subtabs {
  margin: 1rem;

  .nav-subtabs {
    float: left;
    width: 100%;
    margin: 0;
    list-style-type: none;
    border-bottom: 1px solid #ddd;

    >li {
      float: left;
      margin-bottom: -1px;

      >a {
        float: left;
        margin-right: 2px;
        line-height: 1.42857143;
        padding: 10px;
        border: 1px solid transparent;
        border-radius: 4px 4px 0 0;

        &:hover {
          border-color: #eee #eee #ddd;
        }
      }

      &.active {

        >a,
        >a:hover,
        >a:focus {
          color: #555;
          cursor: default;
          background-color: #fff;
          border: 1px solid #ddd;
          border-bottom-color: transparent;
        }
      }
    }
  }

  .subtab-content {
    float: left;
    width: 100%;

    >.subtab-pane {
      display: none;

      &.active {
        display: block;
        padding: 2.5% 3.5%;
        background-color: #efefef;
      }
    }

    >.active {
      display: block;
    }
  }

}

tr.disabled {
  background-color: grey;
}

/* Style the container */

/* Style the form groups */
.form-group {
  margin-bottom: 15px;
}

/* Style labels */
.form-group label {
  font-weight: bold;
  color: #333;
  /* Dark gray text color */
}

/* Style required field indicators */
div#subtab-1 .form-group label span {
  color: red;
}

/* Style form inputs */
.form-control {
  width: 100%;
  border: 1px solid #ccc;
  /* Light gray border */
  border-radius: 3px;
  background-color: #fff;
  /* White background */
  transition: border-color 0.3s ease-in-out;
}

/* Style form inputs on focus */
.form-control:focus {
  border-color: #007bff;
  /* Blue border color on focus */
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  /* Blue shadow on focus */
}

.toggle-arrow {
  cursor: pointer;
}

.collapsed-section {
  display: none;
}

div#subtab-4 h2 {
  color: #fff;
  /* White text color */
  padding: 10px;
  /* Add some padding for spacing */
  border-radius: 5px 5px 0 0;
  /* Rounded corners on top */
  margin-top: 0;
}

/* Style the <h2> header on hover */
div#subtab-4 h2.togglable:hover {
  background-color: #e0e0e0;
  /* Slightly darker gray on hover */
}

form#update-customers-form input:invalid {
  border: 2px solid red;
}

form#update-customers-form td:has(button) {
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
}

form#update-customers-form td button.edit-row {
  background-color: #3498db;
  cursor: pointer;
}

form#update-customers-form td button.cancel-changes-row {
  background-color: #95a5a6;
  cursor: pointer;
}

/*A CHANGER, MAKE IT MORE SPECIFIC*/
div.subtab-content span.col-md-10 {
  width: 100%;
}

.success-bubble {
  display: none;
  position: fixed;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  padding: 10px;
  background-color: #4CAF50;
  /* Green color */
  color: #fff;
  /* White text */
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.error-bubble {
  display: none;
  position: fixed;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  padding: 10px;
  background-color: #c21515;
  /* Green color */
  color: #fff;
  /* White text */
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.empty-required-field {
  border-color: red;
}

/* Add modal styles */
.modal {
  display: none;
  position: fixed;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.modal-content {
  padding: 20px 10px 30px 10px;
  /* top right bottom left */
  text-align: center;
  width: 200px;
  /* Set width to 'auto' or adjust as needed */
  height: 150px;
  margin: 0 auto;
  /* Center the content horizontally */
  background-color: #DD823B;
  /* Match the background color of the modal */
}

.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 40px;
  /* Adjust width for a smaller spinner */
  height: 40px;
  /* Adjust height for a smaller spinner */
}

.lds-spinner div {
  transform-origin: 20px 20px;
  /* Adjust transform origin for a centered spinner */
  animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 2px;
  left: 18px;
  width: 3px;
  /* Adjust width for a thinner line */
  height: 9px;
  /* Adjust height for a shorter line */
  border-radius: 10%;
  background: #007BFF;
}

/* ... rest of your spinner styles ... */

.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}

.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}

.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}

.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}

.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}

@keyframes lds-spinner {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

div#subtab4 select#inscription_course span.select2 {
  width: 500px !important;
}

div#subtab-4 table .btn {
  padding: 10px;
}

section#wrapper>div.container:first-child:has(div.a_pmi_admin-container) {
  width: 1400px;
}

div.container-subtabs {
  margin: 0;
}

div.subtab-content {
  background-color: lightblue;
}

div#admin_onglet_3 form#customer-form {
  margin-top: 3em;
  margin-bottom: 1em;
}

.responsable-info,
div#gestion_inscriptions_content,
div#container_listes_clients {
  background-color: #F5F5F5;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.container-categories-courses {
  display: flex;
  flex-wrap: wrap;
}

.left-panel {
  flex: 1;
  padding: 20px;
  background-color: #f2f2f2;
}

.right-panel {
  flex: 3;
  padding: 20px;
  background-color: #fff;
}

.category-item {
  margin-bottom: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.category-item:hover {
  background-color: #e6e6e6;
}

.course-item {
  margin-bottom: 10px;
}

h2 {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .container-categories-courses {
    flex-direction: column;
  }

  .left-panel,
  .right-panel {
    flex: auto;
    width: 100%;
  }
}


h1.page-title #shop_name {
  color: #007bff;
  font-weight: normal;
  display: inline-block;
}

h1.page-title {
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 24px;
  /* Adjust font size */
  font-weight: bold;
  /* Make the title bold */
  margin-bottom: 20px;
  /* Add some space below the title */
  color: #333;
  /* Text color */
}

#message_inscription_en_cours td,
#message_inscription_en_cours th {
  border: 1px solid black !important;
}

/* Dropdown search email */
.position-relative {
  position: relative;
}

.dropdown-item {
  cursor: pointer;
}


.dropdown-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.dropdown-menu.show {
  display: block;
}

/* Fin */

.lists-section {
  margin-top: 40px;
}

.list-table {
  width: 100%;
  border-collapse: collapse;
}

.list-table th,
.list-table td {
  padding: 10px;
  text-align: left;
}

.list-table th {
  background-color: #f0f0f0;
  font-weight: bold;
}

.list-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.list-table tbody tr:hover {
  background-color: #e0e0e0;
}

.list-actions button {
  margin-right: 5px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #f0f0f0;
  cursor: pointer;
}

.list-actions button:hover {
  background-color: #e0e0e0;
}

.member-row td {
  padding-left: 20px;
}

.member-row td:first-child {
  padding-left: 3em;
}

.select2-container .select2-selection--single {
  height: 35px !important;
}

ul.liste_instructions_panier {
  list-style-type: disc;
  padding-left: 25px;
}

/*STYLE POUR SOUS ONGLET 4 - PAGE 3*/
/* Style for the tree view */
.course-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.course-item {
  margin-bottom: 10px;
  position: relative;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  min-height: 4em;
}

.course-name {
  cursor: pointer;
  padding-left: 20px;
  position: relative;
  font-weight: bold;
  display: inline-block;
}

.course-name.active::before {
  content: "\f0d7";
  /* Font Awesome up arrow */
}

.subcategory-list {
  list-style: none;
  padding-left: 20px;
  display: none;
  margin-top: 10px;
  margin-bottom: 0;
  border-left: 1px solid #ddd;
  padding-left: 15px;
}

.subcategory-item,
.group-item {
  margin-bottom: 5px;
  padding: 5px 0;
}

/* Show/hide subcategories and groups on click */
.has-categories-indicator.active+.subcategory-list {
  display: block;
}

.course-name:hover,
.has-categories-indicator:hover {
  color: #007bff;
  cursor: pointer;
}

/* Add more styles as needed */

/*Styles menu*/
#main_top_nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #f8f9fa;
  padding: 10px;
}

.nav-section {
  text-align: center;
}

.nav-section h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.nav-section ul {
  list-style: none;
  padding: 0;
}

.nav-section ul li {
  margin-bottom: 5px;
}

.nav-link {
  color: #007bff;
  text-decoration: none;
}

.nav-link:hover {
  text-decoration: underline;
}

.nav-side-menu .brand {
  background-color: #23282e;
  line-height: 50px;
  display: block;
  text-align: center;
  font-size: 14px;
}

.nav-side-menu .toggle-btn {
  display: none;
}

.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 35px;
  cursor: pointer;
  /*    
    .collapsed{
       .arrow:before{
                 font-family: FontAwesome;
                 content: "\f053";
                 display: inline-block;
                 padding-left:10px;
                 padding-right: 10px;
                 vertical-align: middle;
                 float:right;
            }
     }
*/
}

.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  font-family: FontAwesome;
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
}

/*
        2025-01-14 - JPL
        warning! 
        Remettre bloc ci-dessous pour consistance avec test preprod
        À revérifier/tester 
*/

.nav-side-menu ul .active,
.nav-side-menu li .active {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
}

.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
  color: #d19b3d;
}

.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
  color: #d19b3d;
}

/* FIN */

.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
  background-color: #181c20;
  border: none;
  line-height: 28px;
  border-bottom: 1px solid #23282e;
  margin-left: 0px;
}

.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
  background-color: #020203;
}

.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
  font-family: FontAwesome;
  content: "\f105";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}

.nav-side-menu li {
  padding-left: 0px;
  border-left: 3px solid #2e353d;
  border-bottom: 1px solid #23282e;
}

.nav-side-menu li a {
  text-decoration: none;
  color: #e1ffff;
}

.nav-side-menu li a i {
  padding-left: 10px;
  width: 20px;
  padding-right: 20px;
}

.nav-side-menu li:hover {
  border-left: 3px solid #d19b3d;
  background-color: #4f5b69;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

@media (max-width: 767px) {
  .nav-side-menu {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
  }

  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10 !important;
    padding: 3px;
    background-color: #ffffff;
    color: #000;
    width: 40px;
    text-align: center;
  }

  .brand {
    text-align: left !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important;
  }
}

@media (min-width: 767px) {
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
}

div.a_pmi_admin-container {
  width: 1000px;
  margin-left: 40px;
}

.nav-side-menu {
  font-family: verdana;
  font-size: 12px;
  font-weight: 200;
  background-color: #2e353d;
  width: 250px;
  height: fit-content;
  color: #e1ffff;
  float: left;
  margin-top: 40px;
  /*pour s'aligner avec l'element de droite*/
}

.wrapper_a_pmi_admin {
  display: flex;
  /* Use flexbox for layout */
}

.box_a_pmi_admin {
  flex: 0 0 auto;
  /* Allow flex items to grow and shrink */
}

/* Style for second-level submenu items */
.sub-menu>li>ul.sub-menu>li {
  padding-left: 15px;
}

/* Custom styles for the email modal */
#emailModal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}

.modal-dialog {
  max-height: 800px;
}

.modal-content {
  width: auto;
  height: auto;
}

.modal-body {
  width: 100%;
  /* Make the modal body take up all the width */
}

/*Style searchfields*/
div.buttons_searchfields {
  margin-bottom: 10px;
}

/* Add some styling to the recipient bubbles */
.recipient-bubble {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 5px 10px;
  border-radius: 20px;
  margin-right: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}

.recipient-bubble .remove-recipient {
  margin-left: 5px;
  font-weight: bold;
  cursor: pointer;
}

.is-invalid {
  border-color: red;
}

.modal label {
  font-size: 15px;
}

.modal-header {
  font-size: larger;
}

.invalid-feedback {
  color: #dc3545;
  /* Red color */
  font-size: 14px;
}

/*Sales page styles*/
/* Limiting all column widths */
div.box_a_pmi_admin div#container_sales_infos table#table_sales_infos th,
div.box_a_pmi_admin div#container_sales_infos table#table_sales_infos td {
  max-width: 150px;
  /* Adjust the max-width value as needed */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*Styles page create catalogs*/
/* Center content horizontally and vertically */
.catalog-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100vh;
}


/* Group list styling */
.customer-groups-section {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
  width: 400px;
  /* Adjust as needed */
}

.section-label {
  font-weight: bold;
  margin-bottom: 10px;
}

.customer-groups-list {
  margin-left: 20px;
  /* Adjust as needed */
}

.group-label {
  margin-left: 5px;
}

/*Footer panel sections of actions - styles*/
.custom-footer-panel {
  background-color: #f7f7f7;
  /* Background color */
  padding: 15px 20px;
  /* Padding */
  border-top: 1px solid #ddd;
  /* Top border */
}

.custom-footer-panel .form-actions {
  display: flex;
  /* Use flexbox for alignment */
  justify-content: flex-end;
  /* Align buttons to the right */
}

.custom-footer-panel .form-actions button {
  margin-left: 10px;
  /* Add spacing between buttons */
}

/*Fin*/

/* Styles for Group Management page */
.group-management-list {
  margin-top: 20px;
}

/* Group Item */
.manage-groups-li {
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
}

/* Group Item Header */
.group-item-header {
  background-color: #f5f5f5;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.group-name {
  font-weight: bold;
}

/* Group Item Content */
.group-item-content {
  padding: 10px;
}

/* Customer Management Section */
.customer-management {
  margin-top: 10px;
}

/* Add/Remove Customers Form */
#customer_management_form {
  display: flex;
  flex-direction: column;
}

.add-customer-section,
.remove-customer-section {
  margin-bottom: 10px;
}

.add-customer-section input[type="text"],
.remove-customer-section select {
  padding: 5px;
  margin-right: 10px;
}

/*Styles page manage groups*/
div.remove-customer-section div.scrollable-checkboxes input {
  margin-left: 0px;
}

/*Styles for display tables made with divs - display users and courses*/
#table-clients {
  display: block;
  width: 100%;
  overflow-x: auto; /* Enable horizontal scrolling */
  border-collapse: collapse;
}

.tr {
  display: flex; /* Use flexbox for the row */
  flex-wrap: nowrap; /* Prevent wrapping */
}

.th, .td {
  box-sizing: border-box;
  border: 1px solid #ddd;
  text-align: left;
  flex: 1;
  min-width: 150px;
  text-align: center;
}

.td {
  padding: 10px;
  overflow-x: auto;
  scrollbar-width: thin; /* Thin scrollbar (supported in Firefox) */
  scrollbar-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0); /* Change scrollbar color (track and thumb) */
}

.th {
  padding: 10px 0px 10px 0px;
  font-weight: bold;
  background-color: #f9f9f9;
  white-space: nowrap; /* Prevent text wrapping */
}

.customer-detail {
  grid-column: 1 / -1;
  background-color: #f1f1f1;
  padding: 10px;
}

.tr.item:hover + .customer-detail {
  display: block;
}

@media (max-width: 768px) {
  .tr {
      display: block;
  }

  .th, .td {
      display: block;
      width: 100%;
      text-align: left;
  }

  .td::before {
      content: attr(data-label);
      font-weight: bold;
      display: inline-block;
      width: 100%;
      margin-right: 10px;
  }

  .customer-detail {
      display: block;
  }
}

.th, div.td.checkbox-group-actions {
  text-align: center;
}

/*FIN STYLES DISPLAY TABLES*/



/*Tableau présentation*/
/*div.table {
  display: block;
  overflow: auto;
  max-height: 550px;
}

table.customer {
  margin-bottom: 0;
}

tr,
div.tr {
  width: 100%;
  table-layout: fixed;
}

tr.customer-detail td {
  padding: 0;
}

.table {
  display: table;
  padding-right: 0.5em;
}

.td,
.th {
  display: table-cell;
  height: 50px;
  padding: 5px 5px 5px 5px;
  border: 1px solid #e9e9e9;
}

.th,
thead th {
  text-align: center;
  vertical-align: middle;
  font-family: Noto Sans, sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
}

.th {
  background-color: #CCCCCC;
}

thead.course-header tr.course-header-item th {
  background-color: #2FB5D2 !important;
}

div.customer-name {
  width: 200px !important;
}

form#search_fields .search-button {
  height: 40px;
  font-size: 14px;
  margin-left: 5px;
}

div.customer-learnerid,
div.course-name {
  width: 400px !important;
}

nav#pagination_nav a {
  text-decoration: none;
}

div.course-code {
  width: 200px;
}*/

#select-all-container label {
  font-size: 1.25em;
}

#select-all-container {
  margin-bottom: 10px;
  width: fit-content;
  padding: 5px;
}

.box_a_pmi_admin .table-bordered td, .box_a_pmi_admin .table-bordered th {
  border: 1px solid #428BCA;
}

.customer-detail .alert-info {
  font-size: 1em;
  width: 100%;
  text-align: center;
}

div.search-filters-container label {
  font-size: 13px !important;
}


/* ----------------------------- */
/* Style pour le bouton d'export */
/* ----------------------------- */


.a_pmi_admin_export_data_apprenants{
  cursor: pointer;
  padding: 12px;
  font-size: 18px;
  background-color: #09d609;
  border: solid 3px black;
  border-radius: 10px;
  color: white;
  font-weight: 600;

  &:hover{
    background-color: #059305;
  }
}


/* ---------------------------- */
/* Style pour la partie période */
/* ---------------------------- */

/* conteneur principal de tous les éléments */
.a_pmi_admin-periode-container{
  margin-bottom: 40px;

  
  .change-periode-apprenant-by-link-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;

    .cpabl{
      margin-top: 265px;
    }
  }

  /* style pour les titres */
  h2{
    font-weight: 700;
    font-size: 18px;
    text-decoration: underline;
    margin: 20px 0;
  } 
}

/* conteneur du menu et des parties création et modification */
.a_pmi_admin-periode-creation-container{
  border: solid 1px gray;

  /* style pour les textes */
  p{
    color: black;
    font-size: 14px;
  }
}

/* style pour les parties création et modification de période */
.a_pmi_admin-periode-create, .a_pmi_admin-periode-liste-create, .a_pmi_admin-periode-modify{
  padding: 10px;
}


/* Style pour la div et les boutons creation et modification (menu) */
.a_pmi_admin-periode-creation-menu{
  width: 100%;
  display: flex;
  justify-content: center;

  button{
    width: 50%;
    border-radius: 0;
    border: solid 1px black;
    padding: 5px;
    background-color: #2e353d;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: inset -2px -2px 2px black;

    &:hover{
      transition: all 0.3s ease;
      background-color: #4f5b69;
    }
  }

  .active{
    background-color: #4f5b69;
    border-left: 5px solid #d19b3d;
    box-shadow: inset -2px -2px 4px black;
  }
}




/* style pour le conteneur de la partie création */
.a_pmi_admin-periode-create-container {
  display: flex;
  flex-direction: column;

  /* style pour la partie création de période */ 
  .a_pmi_admin-periode-create-container-2{
    display: flex;

    .a_pmi_admin-periode-create{
      width: 75%;

      /* style pour les label dans le formulaire */
      .a_pmi_admin-create-form-input{
        label{
          font-size: 14px;
          font-weight: 500;
        }
      }

      /* style pour les dates */
      .a_pmi_admin-create-date{
        display: flex;
        flex-direction: column;

        div{
          margin-bottom: 10px;

          label{
            width: 80px;
            text-align: left;
          }
        }
      }

      /* style pour les heures */
      .a_pmi_admin-create-heure{
        input{
          height: 37px;
          width: 35px;
          text-align: center;
        }
      }

      /* style du button de validation du formulaire */
      .a_pmi_admin-create-button{
        width: 100%;
        display: flex;
        justify-content: end;
        margin-top: 20px;

        button{
          border-radius: 10px;
          border: solid 1px black;
          padding: 5px;
          background-color: #0074e8;
          color: white;
          box-shadow: 2px 2px black;

          &:hover{
            background-color: #094a8b;
          }

          &:focus{
            background-color: #094a8b;
            box-shadow: inset 2px 2px black;
          }
        }
      }
    }
  }

  
  /* style pour la liste de période dans la partie création */
  .a_pmi_admin-periode-liste-create{
    border-left: dashed 1px gray;

    /* liste des périodes */
    .a_pmi_admin-periode-liste-ul-create{
      list-style: disc;
      margin-left: 15px;
    }
  }
}


/* style pour la partie rappel de création automatique */ 
/* .a_pmi_admin-periode-create-container-1{
  border-bottom: dashed 1px gray;
  padding: 10px;

  .a_pmi_admin-periode-create-automatique-checkbox-1{
    display: flex;

    h2{
      margin-right: 20px;
    }

    input{
      margin: 0;
      display: flex;
      align-self: center;
      width: 20px;
      height: 20px;
    }
  }

  .a_pmi_admin-periode-create-automatique-form-1{
    button{
      border-radius: 10px;
      border: solid 1px black;
      padding: 5px;
      background-color: #0074e8;
      color: white;
      box-shadow: 2px 2px black;

      &:hover{
        background-color: #094a8b;
      }

      &:focus{
        background-color: #094a8b;
        box-shadow: inset 2px 2px black;
      }
    }
  }
} */


/* style de la partie modification */
.a_pmi_admin-periode-modify-content {
  display: flex;

  /* style pour la liste des périodes avec les boutons */
  .a_pmi_admin-periode-liste-modify{
    width: 400px;

    .a_pmi_admin-periode-liste-ul-modify{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-bottom: 0;

      li{
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 18px;

        p{
          margin-bottom: 0;
        }
      }

      .a_pmi_admin-periode-liste-ul-modify-button{
        border-radius: 10px;
        border: solid 1px black;
        padding: 5px;
        background-color: #0074e8;
        color: white;
        box-shadow: 2px 2px black;

        &:hover{
          background-color: #094a8b;
        }
      }

      .a_pmi_admin-periode-liste-ul-modify-button.active{
        background-color: #094a8b;
        box-shadow: inset 2px 2px black;
      }

      p.active{
        border-bottom: solid 2px black;
      }

      
      .a_pmi_admin-periode-liste-ul-delete-button{
        border-radius: 10px;
        border: solid 1px black;
        padding: 5px;
        background-color: red;
        color: white;
        box-shadow: 2px 2px black;

        &:hover{
          background-color: #8b1409;
        }

        &:focus{
          background-color: #8b1409;
          box-shadow: inset 2px 2px black;
        }
      }
    }

  }

  
    
  /* style pour la partie avec les modifications */
  .a_pmi_admin-periode-modify-element{
    width: 55%;
    padding: 10px;
    border: dashed 1px gray;

    .a_pmi_admin-periode-modify-element-titre{
      font-size: 16px;
      font-weight: 600;
      font-style: italic;
    }
  }

  /* style pour le formulaire */
  .a_pmi_admin-modify-periode-form{

    form{
      padding: 5px;
      border: solid 1px gray;
    }

    label{
      width: 90px;
      text-align: left;
      font-weight: 500;
      font-size: 14px;
    }

    /* style pour les dates */
    .a_pmi_admin-modify-date_debut, .a_pmi_admin-modify-date_fin{
      margin-bottom: 10px;
    }

    /* style pour les heures */
    .a_pmi_admin-modify-nombre_heure{
      label{
        width: 275px;
      }

      input{
        height: 37px;
        width: 35px;
        text-align: center;
      }
    }

    .a_pmi_admin-to-modify-form{
      label{
        width: 230px;
      }
    }

    .a_pmi_admin-modify-button{
      button{
        border-radius: 10px;
        border: solid 1px black;
        padding: 5px;
        background-color: #0074e8;
        color: white;
        box-shadow: 2px 2px black;
        margin-top: 10px;

        &:hover{
          background-color: #094a8b;
        }

        &:focus{
          background-color: #094a8b;
          box-shadow: inset 2px 2px black;
        }
      }
    }
    
  }


  .a_pmi_admin-periode-delete-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
  }

  
  /* Contenu de la popup */
  .a_pmi_admin-periode-delete-popup {
    position: fixed;
    border: solid 1px black;
    background-color: white;
    padding: 20px;
    top: 40%;
    right: 25vw;
    left: 25vw;
    z-index: 1000;
    display: none;
    border-radius: 10px;
    flex-direction: column;

    button{
      border-radius: 10px;
      border: solid 1px black;
      padding: 5px;
      background-color: red;
      color: white;
      box-shadow: 2px 2px black;
      margin-top: 10px;
      align-self: end;

      &:hover{
        background-color: #8b1409;
      }

      &:focus{
        background-color: #8b1409;
        box-shadow: inset 2px 2px black;
      }
    }
  }

  /* Bouton de fermeture */
  .a_pmi_admin-periode-delete-close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
  }

  /* Style pour le titre */
  .a_pmi_admin-periode-delete-popup h3 {
    margin-top: 15px;
    margin-bottom: 15px;
    color: #333;
    text-transform: initial;
  }

}