/* Variables CSS*/

:root {

  /* Colors */

  --color-red: #b10000;

  --color-dark-red: #800101;

  --color-light-grey: #d9d9d9;

  --color-dark-grey: #9e9e9e;

  --color-white: #ffffff;

  --color-dark: #000000;

  --color-blue: #007566;

  /* Tailles de texte */

  --font-size-xs: 12px;

  --font-size-sm: 14px;

  --font-size-md: 16px;

  --font-size-lg: 20px;

  --font-size-xl: 24px;

  --font-size-xxl: 40px;

  /* Tailles des marges et des espacements */

  --spacing-xs: 4px;

  --spacing-sm: 8px;

  --spacing-md: 16px;

  --spacing-lg: 24px;

  --spacing-xl: 32px;

  --spacing-xxl: 48px;

  /* Tailles des boutons */

  --button-height-sm: 32px;

  --button-height-md: 40px;

  --button-height-lg: 48px;

  --button-padding-sm: 8px 16px;

  --button-padding-md: 12px 20px;

  --button-padding-lg: 16px 24px;

  /* Tailles des icônes */

  --icon-size-sm: 16px;

  --icon-size-md: 24px;

  --icon-size-lg: 32px;

  --icon-size-xl: 48px;

  /* Largeurs des conteneurs */

  --container-width-sm: 80vw;

  --container-width-md: 60vw;

  --container-width-lg: 40vw;

  --container-width-xl: 30vw;

  /* Largeurs */

  --width-xs: 10vw;

  --width-sm: 20vw;

  --width-ss: 30vw;

  --width-md: 40vw;

  --width-lg: 60vw;

  --width-xl: 80vw;

  --width-xxl: 100vw;

  /* Hauteurs */

  --height-xs: 10vh;

  --height-sm: 20vh;

  --height-md: 40vh;

  --height-lg: 60vh;

  --height-xl: 90vh;

  --height-xxl: 100vh;

  /* Familles de polices */

  --font-family-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --font-family-serif: "Georgia", "Times New Roman", Times, serif;

  --font-family-mono: "Lucida Console", Monaco, monospace;

  /* Poids des polices */

  --font-weight-light: 300;

  --font-weight-normal: 400;

  --font-weight-medium: 500;

  --font-weight-semibold: 600;

  --font-weight-bold: 700;

  /* Styles de texte */

  --font-style-normal: normal;

  --font-style-italic: italic;

  /* main colors */

  --main-bg-color: #ffffff;

  --main-text-color: #080808;

  --second-text-color: #030303;

  --third-text-color: #888;

  --second-bg-color: #ffffff;

  /* link */

  --link-color-base: #080808;

  --link-color-active: #080808;

  --link-color-visited: #080808;

  /* nav-bar */

  --nav-bar-height: 40px;

  --banner-height: var(--nav-bar-height);

  --content-height: calc(var(--height-xxl) - var(--banner-height));

  /* side-bar */

  --open-side-bar-width: 300px;

  --closed-side-bar-width: 30px;

  --side-bar-width: 300px;

  --side-bar-item-height: 40px;

  /* borders */

  --light-border-width: 1px;

  --border-light-grey: var(--color-light-grey);

  --strong-border-width: 3px;

  --border-critical: var(--color-red);

  --border-warning: #ffa41b;

  /* Status bar */

  --status-bar-width: 300px;

  --status-bar-success: #70c87c;

  --status-bar-error: #f38172;

  /* Nb results*/

  --nb-results-width: 30px;

  --nb-results-border-color: var(--color-light-grey);

  --shadow-x-offset: 3px;

  --bs-body-font-family: "Plus Jakarta Sans", "Red Hat Display", "Helvetica",

    "Arial", sans-serif;

  --bs-body-font-weight: 500;

	--submit-btn-color: var(--color-blue);

}

img,

svg {

  vertical-align: middle;

}

*,

::after,

::before {

  box-sizing: border-box;

}

html,

body {

  height: 100%;

  overflow-x: hidden;

  overflow-y: auto;

}

body {

  font-family: var(--bs-body-font-family);

  font-weight: var(--bs-body-font-weight);

  font-size: 1.02rem;

}

a {

  text-decoration: none;

  color: var(--link-color-base);

}

a:hover {

  text-shadow: #999 1px 0 2px;

  text-decoration: none;

  color: var(--link-color-base);

}

h4 {

  width: 100%;

  text-align: center;

  margin: 0px;

  margin-bottom: 10px;

  padding: 0;

  padding-bottom: 5px;

  border-bottom: var(--light-border-width) solid var(--border-light-grey);

}

.main-container {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  padding: 0 1rem;

}

.copyright {

  text-align: center;

  /* padding: 1rem; */

  padding: 0.1rem 1rem;

  font-size: 0.875rem;

  margin-top: 2rem;

}

/* 

Banner

*/

#banner {

  display: flex;

  justify-content: space-between;

  background-color: var(--color-red);

  color: var(--color-white);

  padding: 5px 20px;

  width: 100%;

  height: var(--banner-height);

}

.banner-img {

  height: 30px;

  width: 181px;

}

/*

Nav bar

*/

#nav-bar {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  height: var(--nav-bar-height);

  border-bottom: var(--light-border-width) solid var(--border-light-grey);

}

#nav-bar-menu {

  margin-inline-end: 30px;

  display: flex;

  align-items: center;

}

#nav-bar-menu div {

  text-align: center;

  width: fit-content;

  white-space: nowrap;

  overflow: hidden;

}

.header-adjustement {

  margin: 3px 15px 0px 15px !important;

}

.header-adjustement i {

  margin-inline-end: 5px;

}

.logout,

.header-adjustement i,

.header-adjustement a,

.header-adjustement i:hover,

.header-adjustement a:hover  {

  text-decoration: none;

  color: white;

}

#nav-bar-menu.open {

  position: absolute;

  top: 5px;

  inset-inline-end: 5px;

  display: block;

  padding: 0.5rem;

  border: 1px solid #000;

  border-radius: 4px;

  background-color: white;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  z-index: 1010;

}

#nav-bar-menu.open a,

#nav-bar-menu.open select {

  color: var(--color-dark);

  text-decoration: none;

}

#nav-bar-menu.open div {

  position: relative;

  inset-inline-start: 0;

  width: 100%;

  padding: 0 !important;

  margin: 0 !important;

  flex-direction: column;

  text-align: start;

}

#nav-bar-menu.open a {

  padding: 0 !important;

  margin: 0 !important;

}

#nav-bar-menu.open select {

  background: #ffffff;

  color: var(--color-dark);

  font-size: 1rem;

  outline: none;

  cursor: pointer;

  width: 100%;

  appearance: auto;

}

/* 

Side bar

*/

/* #side-bar {
  display: none;
  position: relative;
  flex-direction: column;
  flex-shrink: 0;
  width: var(--open-side-bar-width) !important;
  height: calc(100dvh - var(--nav-bar-height));
  border-inline-end: var(--light-border-width) solid var(--border-light-grey);
  overflow: visible; 
  transition: margin-inline-start 0.3s ease;
  z-index: 1010;
  background-color: #fff;
  box-shadow: var(--shadow-x-offset) 0 5px rgba(0, 0, 0, 0.4);
} */

#side-bar {
  display: none;
  position: relative;
  flex-direction: column;
  flex-shrink: 0;
  width: var(--open-side-bar-width) !important;
  height: 100%;
  border-inline-end: var(--light-border-width) solid var(--border-light-grey);
  overflow-y: auto;
  overflow-x: hidden;
  transition: margin-inline-start 0.3s ease;
  z-index: 1010;
  background-color: #fff;
  box-shadow: var(--shadow-x-offset) 0 5px rgba(0, 0, 0, 0.4);
  margin: 0;
  padding: 0;
  flex-grow: 0;
}


[dir="rtl"] #side-bar {

  box-shadow: calc(var(--shadow-x-offset) * -1) 0 5px rgba(0, 0, 0, 0.4);

}

/* #mini-bar {
  width: var(--closed-side-bar-width) !important;
  height: calc(100dvh - var(--nav-bar-height));
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  cursor: pointer;
  font-size: 24px;
  box-shadow: var(--shadow-x-offset) 0 5px rgba(0, 0, 0, 0.4);
} */

#mini-bar {
  width: var(--closed-side-bar-width) !important;
  height: 100%;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  font-size: 24px;
  box-shadow: var(--shadow-x-offset) 0 5px rgba(0, 0, 0, 0.4);
  overflow-y: auto;
}

[dir="rtl"] #mini-bar {

  box-shadow: calc(var(--shadow-x-offset) * -1) 0 5px rgba(0, 0, 0, 0.4);

}

#mini-bar i {

  font-size: 16px;

  line-height: 32px;

}

#mini-bar.hidden {

  width: 0;   

  opacity: 0;

  pointer-events: none;

}

.vertical-text span {

  display: block;

  font-size: 16px;

  line-height: 16px;

}

.side-bar-toggle {

  position: absolute;

  top: 0.5rem;

  right: 0.5rem;

  width: 35px;

  height: 35px;

  background: white;

  border: 1px solid #ccc;

  border-radius: 50%;

  padding: 0.5rem;

  cursor: pointer;

  align-items: center;

  justify-content: center;

  transition: transform 0.3s ease;

  color: black;

  z-index: 1000; 

  display: none;

}

.side-bar-toggle i {

  transition: transform 0.3s ease;

  color: black;

  font-size: 1.2rem;

}

#side-bar.open .side-bar-toggle {

  display: flex;

}

.side-bar-toggle:focus {

  outline: none;

}

#side-bar.open {

  display: flex;

}

.side-bar-header,

.side-bar-item {

  display: flex;

  align-items: center;

  height: var(--side-bar-item-height);

}

#side-bar .side-bar-item a {

  text-decoration: none;

  color: var(--link-color-base);

  display: flex;

  flex-direction: row;

  align-items: center;

  margin-inline-start: 20px;

}

#side-bar .side-bar-item a i {

  margin-inline-end: 10px;

}

#side-bar .side-bar-header {

  color: var(--third-text-color);

  padding-inline-start: 15px;

  border-top: var(--light-border-width) solid var(--border-light-grey);

}

#side-bar .side-bar-header i,

#side-bar .side-bar-item i {

  margin-inline-end: 10px;

}

#side-bar .side-bar-active {

  font-weight: bold;

  text-shadow: #999 1px 0 2px;

  border-inline-start: 5px solid black;

  margin-inline-start: 4px;

}

#side-bar .side-bar-active i {

  margin-inline-start: -9px; /* 4px margin + 5px border */

}

/*

Content

*/

/* #content {

  display: flex;

  flex-wrap: none;

  flex-direction: row;

  width: 100vw;

} */

#content {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
  /* height: calc(100vh - var(--nav-bar-height) - var(--banner-height)); */
  height: calc(100vh - var(--banner-height));
  gap: 0;
  margin: 0;
  padding: 0;
}

.content {

  position: relative;

  flex: 1;

}

/* .back-button {

  position: absolute;

  top: 0;

  left: 0;

  background: var(--color-red);

  color: white;

  border: none;

  border-radius: 30px;

  padding: 0.3rem 1rem;

  cursor: pointer;

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);

  transition: background-color 0.3s ease;

  z-index: 10;

}

.back-button:hover {

  background: var(--color-dark-red);

} */

.navigation-buttons {

    width: 100%

    position: absolute;

    top: 0;

    left: 0;

    display: flex;

    justify-content: space-between;

    gap: 10px;

    z-index: 10;

}

.success-page-nav {

    justify-content: flex-end !important;

}

.back-button, 

.home-button {

    background: var(--color-red);

    color: white;

    /* border: none; */

    border-radius: 30px;

    padding: 0.3rem 1rem;

    cursor: pointer;

    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); */

    transition: background-color 0.3s ease;

    text-decoration: none; /* Pour le lien */

    display: inline-flex;

    align-items: center;

    justify-content: center;

    /* min-width: 2rem;

    max-width: 3rem; */

    width: 2.5rem;

    height: auto;

}

.back-button {

    background: var(--color-red);

    color: white;

    border: none;

}

.home-button {

    background: white;

    color: var(--color-red);

    border: solid 1px var(--color-red);

}

.back-button:hover {

    /* background: #a00000ff; */

    background: var(--color-dark-red);;

}

.home-button:hover {

    background: #b4b4b4ff;

}

.back-button:focus {

    /* background: #a00000ff; */

    background: var(--color-dark-red);;

}

.home-button:focus {

    background: #b4b4b4ff;

}

.back-button i, 

.home-button i {

    font-size: 1rem;

}

/*

Page content

*/

#page-content {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

/* Adaptation pour les utilisateurs sans navbar (ex: Technicien) */

#page-content.no-sidebar {

  width: 100vw;

  margin: 0 auto;

}

#page-content.no-sidebar .main-container {

  max-width: 1200px;

  margin: 0 auto;

}

#page-content .page-content-title {

  margin-top: 0;

}

#page-content .page-content-tiles-container {

  display: flex;

  flex-wrap: wrap;

  flex-direction: row;

  justify-content: space-between;

}

#page-content .tile-xs {

  width: 12.5%;

}

#page-content .tile-s {

  width: 20%;

}

#page-content .tile-m {

  width: 25%;

}

#page-content .tile-l {

  width: 45%;

}

#page-content .tile-full {

  width: 100%;

}

#page-content .page-content-tile {

  margin: 10px;

  padding: 10px;

  border: var(--light-border-width) solid var(--border-light-grey);

  border-radius: 3px;

}

/* 

Login

*/

.login-body {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  width: var(--width-xxl);

  height: calc(var(--content-height) - 20px);

  padding: var(--spacing-md);

  background-image: url(/static/img/glass-break.png);

  background-repeat: no-repeat;

  background-position: center center;

  background-size: 100% 100%;

}

.login-form {

  display: flex;

  flex-direction: column;

  padding: var(--spacing-lg);

  width: var(--width-ss);

  min-width: 400px;

  height: auto;

  background-color: var(--color-white);

  align-items: center;

  justify-content: center;

  border-radius: var(--spacing-lg);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  gap: var(--spacing-md);

}

.login-form-row {

  width: 100%;

  display: flex;

  flex-direction: column;

  gap: var(--spacing-xs);

}

.form-field-label {

  font-size: var(--font-size-md);

  font-weight: var(--font-weight-semibold);

  color: var(--color-dark);

}

.form-field {

  width: 100%;

  padding: var(--spacing-sm);

  border: 1px solid var(--color-dark-grey);

  border-radius: var(--spacing-sm);

  font-size: var(--font-size-md);

  transition: all 0.3s ease;

  background-color: var(--color-white);

}

.form-field:focus {

  outline: none;

  border-color: var(--color-red);

  box-shadow: 0 0 5px rgba(177, 0, 0, 0.4);

}

.form-button {

  width: 100%;

  height: var(--button-height-md);

  background-color: var(--color-red);

  color: var(--color-white);

  font-size: var(--font-size-lg);

  font-weight: var(--font-weight-bold);

  font-family: var(--font-family-sans);

  border: none;

  border-radius: var(--spacing-md);

  cursor: pointer;

  transition: background-color 0.3s ease;

}

.form-button:hover {

  background-color: var(--color-dark-red);

}

.error-login {

  color: var(--color-red);

  text-align: center;

  margin-bottom: 1rem;

}

.login-password-visibility {

  position: absolute;

  top: 50%;

  inset-inline-end: 10px;

  transform: translateY(-50%);

  background: none;

  border: none;

  cursor: pointer;

}

.password-container {

  position: relative;

}

/* 

User menu

*/

.user-menu-container {

  position: relative;

  margin: 0 !important;

  margin-left: auto;

  height: 30px;

  width: 30px;

  padding: 0;

}

.user-avatar {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  background-color: #4a90e2;

  color: white;

  font-weight: bold;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  border: none;

}

.dropdown {

  position: absolute;

  top: calc(var(--banner-height) + 10px);

  right: 0;

  background: rgb(241, 241, 241);

  border-radius: 32px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  min-width: 350px;

  padding: 0.5rem 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 0.5rem;

  z-index: 1100;

}

.dropdown.hidden {

  display: none;

}

.dropdown-close {

  position: absolute;

  top: 16px;

  right: 16px;

  background: none;

  border: none;

  color: #5f6368;

  font-size: 20px;

  cursor: pointer;

}

.dropdown-close:hover {

  background: #f1f3f4;

  border-radius: 50%;

}

.dropdown-header {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 1rem;

  text-align: center;

}

.user-email {

  font-size: 0.85rem;

  color: #9aa0a6;

}

.dropdown-avatar {

  width: 100px;

  height: 100px;

  border-radius: 50%;

  background: #4a90e2;

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 50px;

  font-weight: bold;

  margin: 0.5rem 0;

}

.dropdown-greeting {

  font-weight: bold;

  font-size: 24px;

  padding: 0.5rem 1rem;

  color: black;

  margin-bottom: 0;

}

.manage-account {

  display: inline-block;

  background: none;

  border: 1px solid #5f6368;

  border-radius: 20px;

  padding: 0.3rem 1rem;

  margin-top: 0.5rem;

  font-size: 1rem;

  text-decoration: none;

  color: black;

}

.manage-account:hover {

  background: rgba(255,255,255,0.1);

}

.dropdown-divider {

  border: none;

  margin: 0.5rem 0;

}

.dropdown-items {

  display: flex;

  flex-direction: column;

  width: 80%;

}

.dropdown-section-title {

  font-size: 0.8rem;

  font-weight: 600;

  color: #5f6368;

  padding: 0.3rem 1rem;

  text-transform: uppercase;

}

.dropdown-item {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding: 0.75rem 1rem;

  text-decoration: none;

  color: black;

  background-color: white;

  margin-bottom: 10px;

  cursor: pointer;

  border: 1px solid #5f6368;

  border-radius: 20px;

  width: 100%;

  text-align: left;

}

.dropdown-item:hover {

  background: rgba(255,255,255,0.1);

}

.dropdown-item.active {

  background: #e8f0fe;

  font-weight: 500;

  color: black;

}

.dropdown-item.active:hover {

  background: #d2e3fc;

}

/*

user profile 

*/

.user-profile-container {

  width: 90%;

  margin: 0 auto;

  padding: 20px;

  border: 1px solid #ddd;

  border-radius: 8px;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  color: #333;

  margin-bottom: 2rem;

}

.header-container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;

}

.user-profile-buttons {

  display: flex;

  gap: 10px;

  margin-bottom: 1rem;

}

#edit-profile-button {

  width: auto;

  padding: 8px;

  border-radius: 5px;

  border: none;

  background-color: #d69f3a;

}

#save-profile-button {

  width: auto;

  padding: 8px;

  border-radius: 5px;

  border: none;

  background-color: #647295;

}

.user-profile-container h2 {

  font-size: 1.5rem;

  color: #555;

  margin-bottom: 20px;

  text-align: center;

}

.profile-details {

  display: flex;

  flex-direction: column;

  gap: 15px;

}

.profile-detail {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 10px 15px;

  border-radius: 5px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

}

.profile-detail .label {

  font-weight: bold;

  color: #444;

  flex: 2;

  text-align: start;

  margin-inline-end: 10px;

}

.profile-detail .value {

  flex: 3;

  color: #666;

  word-wrap: break-word;

  text-align: start;

}

/* 

Forms 

*/

.create-new-section {

  display: flex;

  justify-content: center;

  width: 100%;

}

#create-new-form {

  width: 100%;

}

.form-main {

  width: 100%;

  max-width: 1000px;

  margin: 0 auto;

}

.form-title-container {

  margin-bottom: 2rem;

}

.form-title {

  text-align: center;

  margin: 1.5rem 1.2rem;

}

.form-section {

  display: flex;

  justify-content: center;

  width: 100%;

}

.item-form {

  width: 100%;

}

.form-container {

  display: grid;

  grid-template-columns: 1fr;

  gap: 10px;

  width: 100%;

  grid-auto-flow: dense;

  padding-bottom: 20px;

}

@media (min-width: 600px) {

  .form-container {

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

  }

}

.form-group {
  
  min-width: 250px;

}

.form-group label {

  /* display: block; */

  margin-bottom: 0.5rem;

  font-weight: 500;

  /* color: #374151; */

  color: var(--color-dark); /* Couleur uniforme pour les labels */

}

.form-group input[type="text"],

.form-group input[type="email"],

.form-group input[type="password"],

.form-group input[type="number"],

.form-group input[type="file"],

.form-group input[type="datetime-local"],

.form-group textarea,

.form-group select {

  /* width: 100%;

  padding: 0.5rem;

  border: 1px solid #d1d5db;

  border-radius: 0.375rem;

  height: 2.5rem;

  box-sizing: border-box;

  transition: border-color 0.2s, box-shadow 0.2s; */

  width: 100%;

  height: 3rem;

  padding: 0.75rem;

  border: 1px solid #ced4da; /* Couleur de bordure uniforme */

  border-radius: 4px;

  font-size: 1rem;

  color: #495057; /* Couleur du texte uniforme */

  background-color: #ffffff; /* Fond uniforme */

  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}

.form-group input[type="text"]:focus,

.form-group input[type="number"]:focus,

.form-group input[type="email"]:focus,

.form-group input[type="password"]:focus,

.form-group input[type="file"]:focus,

.form-group input[type="datetime-local"]:focus,

.form-group textarea:focus,

.form-group select:focus {

  /* outline: none;

  border-color: var(--color-red);

  box-shadow: 0 0 5px rgba(177, 0, 0, 0.4); */

  border-color: var(--color-blue); /* Couleur de bordure au focus */

  box-shadow: 0 0 0 0.2rem rgba(0, 117, 102, 0.25); /* Ombre légère au focus */

  outline: none;

}

/* Champs spécifiques au certificat */

.certificate-field input[type="text"],

.certificate-field input[type="date"] {

  /* height: 45px; */

  height: 3rem;

  width: 100%;

  padding: 0.75rem;

  border: 1px solid #ced4da;

  border-radius: 4px;

  font-size: 1rem;

  color: #495057;

  background-color: #ffffff;

}

.certificate-field input[type="text"]:focus,

.certificate-field input[type="date"]:focus {

  border-color: var(--color-blue);

  box-shadow: 0 0 0 0.2rem rgba(0, 117, 102, 0.25);

  outline: none;

}

.form-group input[type="checkbox"] {

  margin-left: auto;

  align-items: center;

}

.password-container {

  position: relative;

}

.toggle-password {

  position: absolute;

  inset-inline-end: 0.625rem;

  top: 50%;

  transform: translateY(-50%);

  background: none;

  border: none;

  cursor: pointer;

  color: #666;

  outline: none;

}

.toggle-password:focus {

  outline: none;

}

/* 

filters 

*/

.filter-form {

  display: grid;

  grid-template-columns: 1fr;

  gap: 10px;

  width: 100%;

  grid-auto-flow: dense;

  margin-bottom: 20px;

}

@media (min-width: 600px) {

  .filter-form {

    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

  }

}

.filters-title {

  font-size: 18px;

  display: inline-block;

  margin: 0;

}

.filter-container:hover {

  cursor: pointer;

}

.filter-container {

  display: flex;

  align-items: center;

  margin: 10px 0px;

}

.filter-form-group {

  display: none;

}

.active-filters {

  display: flex;

  flex-wrap: wrap;

  margin-bottom: 20px;

}

.active-filter-item {

  background-color: #f1f1f1;

  padding: 5px 10px;

  margin: 5px;

  border-radius: 5px;

  display: flex;

  align-items: center;

}

.active-filter-item .remove-filter {

  margin-left: 5px;

  cursor: pointer;

  color: red;

}

.filter-form-group {

  display: none;

  min-width: 250px;

}

.filter-form-group label {

  display: block;

  font-weight: bold;

  margin-bottom: 5px;

}

.filter-form-group input[type="text"],

.filter-form-group input[type="number"],

.filter-form-group input[type="email"],

.filter-form-group input[type="password"],

.filter-form-group input[type="date"],

.filter-form-group input[type="datetime-local"],

.filter-form-group select {

  width: 100%;

  border: 1px solid #ccc;

  border-radius: 4px;

  box-sizing: border-box;

  height: 26px;

}

.filter-form-group input[type="text"]:focus,

.filter-form-group input[type="number"]:focus,

.filter-form-group input[type="email"]:focus,

.filter-form-group input[type="password"]:focus,

.filter-form-group input[type="date"]:focus,

.filter-form-group input[type="datetime-local"]:focus,

.filter-form-group select:focus {

  outline: none;

  border-color: var(--color-red);

  box-shadow: 0 0 5px rgba(177, 0, 0, 0.4);

}

.filter-btn-submit-container {

  display: flex;

  flex-direction: row;

  justify-self: flex-end;

  align-self: flex-end;

  height: 40px;

  gap: 10px;

  width: fit-content;

  grid-column-start: -2;

}

.filter-btn-submit-container button,

.filter-btn-submit-container a {

  width: 100%;

}

.hidden {

  display: none !important;

}

/* 

Sumbit buttons 

*/

.btn-submit-container {

  display: flex;

  flex-flow: row;

  justify-content: center;

  margin-top: -0.9rem;

  margin-bottom: 1rem;

  gap: 1rem;

}

.btn-submit {

  min-width: fit-content;

  padding: 0.5rem 1.2rem;

  font-size: 16px;

  font-weight: 500;

  background-color: var(--color-red);

  color: white;

  border: none;

  cursor: pointer;

  border-radius: 5px;

  outline: none;

  text-decoration: none;

  white-space: normal;

  word-break: break-word; 

  display: inline-block;

  text-align: center;

}

.btn-submit:hover {

  background-color: var(--color-dark-red);

  text-decoration: none;

  color: white;

}

.btn-create-new i {

  font-size: 18px;

  font-weight: bold;

}

/*

Error message

*/

.error-message {

  color: var(--color-red);

  font-size: 0.83rem;

  margin: 0.5rem 0.25rem;

  line-height: 1rem;

}

/*

Data tables

*/

.data-table-main {

  width: 100%;

  background-color: white;

  border-radius: 0.5rem;

}

.table-container {

  width: 100%;

  overflow-x: auto;

  overflow-y: auto;

  max-height: 70vh;

  margin-top: 20px;

}

.data-table {

  width: 100%;

  border-collapse: collapse;

  min-width: 1000px;

}

.data-table th,

.data-table td {

  text-align: start;

  border-bottom: 1px solid #e5e7eb;

  font-size: 0.8rem;

  width: fit-content;

  white-space: nowrap;

  padding-inline-end: 15px;

}

.data-table th {

  background-color: #f9fafb;

  font-weight: 500;

  color: #374151;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}

.data-table th {

  position: sticky;

  top: 0;

  z-index: 1;

}

.data-table tbody tr:hover {

  background-color: #f9fafb;

}

.data-table td {

  color: #4b5563;

}

.data-table th.center-column,

.data-table td.center-column {

  text-align: center !important;

  white-space: nowrap;

  width: fit-content;

}

.data-table th.sticky-column,

.data-table td.sticky-column {

    position: sticky;

    padding-left: 0.5rem;

    right: 0;

    background: white;

    z-index: 2;

    box-shadow: -1px 0 2px rgba(0,0,0,0.1); 

}

.data-table th.sticky-column{

    z-index: 3;

}

.status-cell .text-success { color: green; }

.status-cell .text-failed { color: red; }

/*

FAQ

*/

.faq-section {

  width: 90%;

}

.faq-category {

  margin-bottom: 20px;

  margin-top: 10px;

  border-radius: 12px;

}

.category-toggle, .faq-question {

  width: 100%;

  border: 1px solid #ddd;

  text-align: left;

  font-weight: bold;

  cursor: pointer;

  transition: background 0.3s ease, color 0.3s ease;

  border-radius: 12px;

  white-space: pre-wrap;

}

.category-toggle {

  background: #e0e0e0;

  font-size: 1.3em;

  padding: 18px;

  border-radius: 12px;

}

.faq-question {

  background: #f9f9f9;

  font-size: 1.1em;

  padding: 12px 15px;

  border-left: 5px solid var(--color-red);

}

.faq-question::before {

  content: "\f059";

  font-family: "Font Awesome 6 Free";

  font-weight: 900;

  color: var(--color-red);

  margin-right: 10px;

}

.faq-question:hover::before {

  color: white;

}

.category-toggle:hover, .faq-question:hover {

  background: var(--color-red);

  color: white;

}

.category-toggle:focus, .faq-question:focus {

  outline: none;

}

.faq-items {

  display: none;

  padding-left: 20px;

  margin-top: 10px;

}

.faq-item {

  border-bottom: 1px solid #f1f1f1;

}

.faq-item:last-child {

  border-bottom: none;

}

.faq-items .faq-item {

  padding-bottom: 10px;

}

.faq-items {

  padding-left: 30px;

}

.faq-answer {

  display: none;

  padding: 10px;

  background: #fff;

  border-left: 4px solid var(--color-red);

  margin-bottom: 10px;

  font-size: 1rem;

  color: #555;

  white-space: pre-wrap;

}

.show {

  display: block;

}

/*

Documentation

*/

.search-container {

  text-align: center;

  margin-bottom: 20px;

  width: 100%;

}

.search-input {

  width: 90%;

  padding: 10px;

  font-size: 1.2em;

  border: 1px solid #ccc;

  border-radius: 8px;

}

.search-input:focus-visible {

  outline:  2px solid  var(--color-red);

}

.category-container {

  display: grid;

  width: 90%;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  gap: 10px;

  margin-bottom: 20px;

}

.category-btn {

  background: var(--color-red);

  width: 100%;

  color: white;

  padding: 10px 15px;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  transition: background 0.3s ease;

  text-align: center;

}

.category-btn:hover {

  background: var(--color-red);

}

.document-list {

  width: 90%;

  margin: auto;

}

.document-item {

  background: #f1f1f1;

  padding: 15px;

  border: 1px solid #ddd;

  border-radius: 8px;

  margin-bottom: 10px;

  cursor: pointer;

  transition: background 0.3s ease;

}

.document-item:hover {

  background: #ddd;

}

.document-title {

  font-weight: bold;

  font-size: 1.2em;

}

.document-details {

  display: none;

  padding: 10px;

  background: #fff;

  border-left: 4px solid var(--color-red);

  margin-top: 10px;

  font-size: 1rem;

  color: #333;

  border-radius: 5px;

}

.download-link, .preview-link {

  display: inline-block;

  text-decoration: none;

  color: var(--color-red);

  font-weight: bold;

  margin-top: 5px;

  margin-right: 10px;

}

.download-link:hover, .preview-link:hover {

  text-decoration: underline;

  color: var(--color-red);

}

.icon {

  width: 20px;

  height: 20px;

  vertical-align: middle;

  margin-right: 5px;

}

/*

Legend

*/

#legend-container {

  position: absolute;

  top: 0;

  right: 0;

  z-index: 5;

}

#toggle-legend {

  background: none;

  border: none;

  cursor: pointer;

  font-size: 1.3rem;

  position: relative;

}

.status-legend {

  position: absolute;

  right: 2.2rem;

  top: 0;

  display: none;

  flex-direction: column;

  gap: 0.4rem;

  align-items: flex-start;

  justify-content: space-between;

  padding: 0.5rem 0.8rem;

  border: 1px solid #ddd;

  border-radius: 8px;

  background-color: #f9f9f9;

  font-size: 0.8rem;

  white-space: nowrap;

}

.status-legend.visible {

  display: flex;

}

.legend-title {

  font-weight: bold;

  margin-right: 0.8rem;

  padding-right: 1rem;

  font-size: 0.9rem;

  color: #333;

}

.legend-item {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  width: 100%;

}

.legend-item i {

  width: 1.2rem;

  text-align: center;

}

.legend-item span {

  flex: 1;

}

#toggle-legend:focus {

  outline: none;

  box-shadow: none;

}

.icon-green {

  color: green;

}

.icon-orange {

  color: orange;

}

.icon-red {

  color: red;

}

.icon-grey {

  color: grey;

}

.icon-brown {

  color: brown;

}

.icon-black {

  color: black;

}

.icon-blue {

  color: rgb(59, 120, 253);

}

/*

kit

*/

.diagnostics-section {

  width: 100%;

  margin: 20px 0;

  padding: 20px;

  background-color: #f9f9f9;

  border-radius: 8px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

}

.diagnostics-section h4 {

  font-size: 1.5em;

  font-weight: bold;

  color: #333;

  margin-bottom: 20px;

}

.diagnostics-section .diagnostic-item {

  margin-bottom: 10px;

  padding: 15px;

  background-color: #ffffff;

  border: 1px solid #e0e0e0;

  border-radius: 6px;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}

.diagnostics-section .diagnostic-item p {

  text-align: start;

  font-size: 1em;

  color: #555;

  margin-bottom: 10px;

}

.diagnostics-section .diagnostic-item ul {

  list-style-type: none;

  padding-left: 0;

}

.diagnostics-section .diagnostic-item ul li {

  font-size: 1em;

  color: #333;

  padding-left: 1.25em;

  position: relative;

}

.diagnostics-section p {

  font-size: 1em;

  color: #888;

  text-align: center;

  font-style: italic;

}

.accordion {

  max-height: 0;

  overflow: hidden;

  opacity: 0;

}

.accordion.active {

  max-height: 100%;

  opacity: 1;

  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;

  padding-top: 10px;

  border-top: 2px solid #ddd;

}

.kit-details-section {

  display: flex;

  flex-direction: column;

  width: 100%;

  margin-bottom: 20px;

  padding: 10px 20px;

  border-radius: 8px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);

}

.kit-section-title {

  cursor: pointer;

  display: inline-flex;

  justify-self: flex-start;

  align-items: center; 

  margin-right: 10px;  

  font-size: 1.5rem;

  font-weight: bold;

  margin-bottom: 0 ;

  border: none;

  padding: 0 ;

}

.kit-details-info {

  display: flex;

  flex-direction: row;

}

.kit-details-info:not(:last-child) {

  margin-bottom: 20px;

}

.kit-details-content {

  flex-grow: 1;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  border: 2px solid #ddd;

  gap: 10px 20px;

  background-color: #f9f9f9;

  padding: 20px;

  border-radius: 12px;

}

.diagnostic-status {

  width: auto;

  height: auto;

  display: flex;

  align-items: center;

  justify-items: center;

  justify-content: center;

  margin-bottom: 20px;

}

.diagnostic-status i {

  font-size: 6vw; 

  width: auto;

  height: auto;

  margin-right: 15px;

}

.kit-details-content:not(:last-child) {

  margin-bottom: 20px;

}

.kit-details-content p {

  width: 100%;

  padding: 10px;

  border-radius: 5px;

  border: 1px solid #ddd;

  font-size: 1rem;

  margin: 0;

}

.kit-details-button-container {

  grid-column: 2;

  display: flex;

  gap: 10px;

  width: 100%;

  justify-content: flex-end;

}

.kit-details-button-container button,

.kit-details-button-container a {

  height: 100%; 

  width: 100%;

  display: inline-flex;

  align-items: center; 

  padding: 10px 20px; 

  font-size: 1rem;

  justify-content: center;

  align-items: center;

}

.kit-composition-button {

  display: block;

  width: 100%;

  border: 1px solid #ddd;

  color: black !important;

  padding: 10px 15px;

  text-decoration: none !important;

  margin-bottom: 10px;

  border-radius: 5px;

  transition: background-color 0.3s ease, border-color 0.3s ease;

}

.kit-composition-button:hover {

  border-color: red;

}

.separator {

    padding: 0 1rem;

}

.add-e2h-button-container {

  display: flex;

  align-items: center; 

  justify-content: end;

  margin-bottom: 20px;

  width: 100%;

  gap: 10px;

}

.add-e2h-button-container  button{

  height: 100%; 

  width: 50%;

  display: inline-flex;

  align-items: center; 

  padding: 10px 20px; 

  font-size: 1rem;

  justify-content: center;

  align-items: center;

}

.scanner-button {

  display: none;

}

#qr-reader-container {

  position: fixed;

  top: var(--banner-height);

  left: 0;

  width: 100vw;

  height: calc(100dvh - var(--banner-height)) !important;

  display: none;

  justify-content: center;

  align-items: center;

  z-index: 9999;

}

#qr-reader {

  width: 100dvw !important;

  height: 100% !important;

  background: rgba(0, 0, 0, 0.5);

  padding: 20px;

  border: none !important;

}

#qr-reader__scan_region {

  height: 100%;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  align-content: center;

  justify-items: center;

}

#qr-shaded-region {

  border-width: calc(50vh - 200px) calc(50vw - 150px) !important;

}

#qr-reader__scan_region video {

  height: 100% !important;

  width: auto !important;

}

#qr-reader__dashboard {

  position: absolute;

  bottom: 1rem

}

#qr-reader__scan_region img {

  width: 600px;

}

#qr-reader__dashboard_section {

  margin-top: 30px;

  display: flex;

  flex-direction: column;

  gap: 20px;

}

#qr-reader__dashboard button,

#qr-reader__dashboard span {

  border: none;

  padding: 12px 16px;

  border-radius: 16px;

  background-color: var(--color-light-grey);

  text-decoration: none !important;

  line-height: 1;

}

#qr-reader__dashboard button:active {

  border: none;

   outline: none;

}

#qr-reader__dashboard button:hover {

  cursor: pointer;

}

#html5-qrcode-select-camera {

  display: inline-block;

  vertical-align: middle;

  margin-left: 8px;

  padding: 4px 8px;

  font-size: 14px;

}

html span:has(#html5-qrcode-select-camera) {

  display: flex !important;

  align-items: center;

  gap: 8px;

  flex-wrap: nowrap;

  margin-bottom: 1rem;

}

#html5-qrcode-anchor-scan-type-change {

    display: none !important;

}

#close-scanner {

  width: auto;

  height: auto;

  position: absolute;

  top: 30px;

  right: 5%;

  color: black;

  background-color: var(--color-light-grey);

  border: none;

  padding: 12px 16px;

  border-radius: 16px;

  font-size: 16px;

  z-index: 10000; 

}

/* 

Select 2

*/

.select2-container--default .select2-results__option--highlighted[aria-selected] {

  background-color: var(--color-red) !important;

  color: white;

}

/* 

Icons 

*/

.delete-button {

  background: none;

  border: none;

}

.action-icon {

  cursor: pointer;

  margin: 0.55rem 0.2rem;

  border-radius: 0.25rem;

  transition: background-color 0.2s;

}

.edit-icon {

  color: var(--submit-btn-color);

}

.delete-icon {

  color: #ef4444;

}

.view-icon {

  color: cornflowerblue;

}

.download-icon {

  color: purple;

}

.action-icon:hover {

  background-color: #f3f4f6;

}

.toggle-icon {

  font-size: 1.4rem;

  cursor: pointer;

  margin-inline-start: 10px;

  vertical-align: middle;

}

.show-icon {

  display: block;

}

.hide-icon {

  display: none;

}

/*

Buttons 

*/

.create-button-container {

  display: flex;

  justify-content: flex-end;

  margin-bottom: 20px;

}

.btn-save,

.btn-delete,

.btn-cancel {

  padding: 0.75rem 1.5rem;

  border-radius: 5px;

  cursor: pointer;

  font-size: 1rem;

  border: none;

}

.btn-save {

  background-color: var(--submit-btn-color);

  color: white;

}

.btn-delete {

  background-color: #ef4444;

  color: white;

}

.btn-cancel {

  background-color: #6b7280;

  color: white;

}

.action-btn {

  background: none;

  border: none;

  padding: 0;

  margin: 0;

  cursor: pointer;

  display: inline;

}

.action-btn:focus {

  outline: none;

}

/* 

Modals 

*/

.modal {

  display: none;

  justify-content: center;

  align-items: center;

  position: fixed;

  top: 0;

  inset-inline-start: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

  z-index: 1000;

}

.modal-content {

  position: relative;

  background-color: white;

  padding: 2rem;

  border-radius: 0.5rem;

  width: 90%;

  max-width: 600px;

  margin: auto;

  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),

    0 2px 4px -1px rgba(0, 0, 0, 0.06);

}

.modal-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 1.5rem;

}

.close-modal {

  background: none;

  border: none;

  font-size: 1.5rem;

  cursor: pointer;

  color: #6b7280;

}

.modal-footer {

  display: flex;

  justify-content: center;

  gap: 2rem;

  margin-top: 1.5rem;

}

/*

Pagination 

*/

.pagination-main {

  display: flex;

  flex-flow: row;

  justify-content: space-between;

  margin-top: 10px;

}

.pagination {

  align-items: center;

}

.pagination a {

  padding: 4px 10px;

  margin: 0 1px;

  border: 1px solid #ddd;

  text-decoration: none;

  width: var(--nb-results-width);

  color: var(--color-red);

}

.pagination .current {

  padding: 4px 10px;

  margin: 0 1px;

  border: 1px solid #ddd;

  background-color: #f0f0f0;

}

[dir="rtl"] .pagination span a i {

  transform: rotate(180deg);

}

#nb-results {

  display: flex;

  align-items: center;

  gap: 2px;

}

#nb-results span {

  margin-inline-end: 10px;

}

#nb-results input {

  display: none;

}

#nb-results label {

  cursor: pointer;

  width: var(--nb-results-width);

  text-align: center;

  padding: 2px;

  border: 1px solid var(--nb-results-border-color);

  border-radius: 4px;

  background-color: var(--color-red);

  color: white;

}

#nb-results input[type="radio"]:checked + label {

  background-color: var(--color-dark-red);

}

/*

Status bar 

*/

/* 

#status-bar {

  position: absolute;

  z-index: 2020;

  top: calc(var(--nav-bar-height) + 30px);

  width: var(--status-bar-width);

  inset-inline-start: calc(50%);

  padding: 10px;

  color: white;

  text-align: center;

  border-radius: 8px;

  display: none;

  white-space: pre-line;

} */

#status-bar {

	position: absolute;

	top: 100px;

	left: 50%;

	transform: translateX(-50%);

	z-index: 9999;

	padding: 10px 20px;

	color: white;

	text-align: center;

	border-radius: 8px;

	display: none;

	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

	pointer-events: none;

	max-width: 40vw;

}

/* 

Language

*/

.switch-language select {

  display: flex;

  align-items: center;

  appearance: none;

  background-color: var(--second-bg-color);

  border: 1px solid #000;

  border-radius: 5px;

  padding: 0rem 1rem;

  font-size: 1rem;

  color: var(--main-text-color);

  cursor: pointer;

  transition: all 0.3s ease;

  text-align: left;

  box-shadow: none;

  height: 2.05rem;

}

.switch-language select {

  text-align: left;

}

.switch-language select option {

  appearance: none;

  box-shadow: none;

  padding-bottom: 1px;

}

div .leaflet-container .leaflet-control-attribution {

  background-color: #00000000;

}

div .switch-language select:hover {

  background-color: rgba(177, 170, 170, 0.2);

  box-shadow: none;

}

.switch-language select:focus {

  outline: none;

  box-shadow: none;

}

.switch-language {

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0;

}

.side-bar-footer {

  width: 100%;

  justify-content: center;

  display: none;

  margin-top: auto;

  padding: 1rem;

  text-align: center;

}

div .side-bar-item.search {

    width: 100%;

}

.search-bar {

    width: 100%;

    display: flex;

    flex-flow: row;

    align-items: center;

    justify-content: center;

    margin-inline-start: 20px;

}

.search-bar-input {

    text-align: start;

    width: 90%;

    height: 100%;

    border-radius: 5px;

    background-color: #FFFFFF;

    border-color: darkred;

    outline: none;

    transition: box-shadow 0.3s ease;

    height: 1.5rem;

    padding: 0.5rem 0;

    font-size: 0.9rem;

    margin-right: 5px;

}

.search-bar:hover {

    background-color: #00000007;

}

.search-button {

    border-radius: 5px;

    border: none;

    outline: none;

    margin: 0;

    padding: 0;

    background-color: #FFFFFF;

}

/*

Dashboard

*/

.dashboard-container {

    max-width: 960px;

    margin: 40px auto;

    padding: 20px;

    background-color: #ffffff;

}

.dashboard-header {

    text-align: center;

    margin-bottom: 30px;

}

.dashboard-title {

    font-size: 2rem;

    font-weight: 600;

    color: #2c3e50;

}

.dashboard-stats-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}

.dashboard-stat-card-link {

    text-decoration: none !important;

    color: inherit;

    display: block;

}

.dashboard-stat-card-link:hover .dashboard-stat-card:hover {

    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);

    cursor: pointer;

}

.dashboard-stat-card {

    background: #ecf0f1; 

    padding: 20px;

    border-radius: 12px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);

    text-align: center;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

    text-decoration: none;

}

.dashboard-stat-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 6px 14px rgba(44, 62, 80, 0.2);

}

.dashboard-stat-label {

    font-size: 1rem;

    color: #7f8c8d;

    margin-bottom: 8px;

}

.dashboard-stat-value {

    font-size: 1.8rem;

    font-weight: bold;

    color: var(--color-red); 

}

.defiling-bar-container {

  position: absolute;

  top: calc(var(--banner-height) + 1rem);

  /* left: calc(var(--side-bar-width)); */
  left: 0;

  /* width: calc(100% - var(--side-bar-width)); */
  width: 100%;

  overflow: hidden;

  background: #f8d7da;

  color: #721c24;

  border: 1px solid #f5c6cb;

  /* padding: 1rem 0; */
  padding: 1.1rem 1rem;
  /* margin: 0 1rem; */

  white-space: nowrap;

}

.defiling-bar {

  position: relative;

  white-space: nowrap;

}

.message-span {

  position: absolute;

  top: -0.5rem;

  white-space: nowrap;

  will-change: transform;

}

/*

Bar d'actualité

*/

#bandeau-actualites {

  display: flex;

  justify-content: center;

  width: 100%;

  z-index: 9999;

  height: 20px;

  font-size: 14px;

  overflow: hidden;

  margin-bottom: 20px;

}

.ticker-content {

  width: 60%;

  color: white;

  background-color: #3f51b5;

  background: linear-gradient(to right, rgba(40, 167, 69, 0) 0%, rgba(63, 81, 181, 1) 30%);

  border-radius: 24px;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.defilement {

  flex-grow: 1;

  overflow: hidden;

}

.item {

  display: inline-block;

  white-space: nowrap;

  padding-left: 100%;

  animation: defiler 30s linear infinite;

}

.close-btn {

  cursor: pointer;

  padding: 0 1rem;

  font-weight: bold;

  color: white;

}

@keyframes defiler {

  from { transform: translateX(0%); }

  to   { transform: translateX(-100%); }

}

/*

Installation/Maintenance

*/

.installation-section {

  margin-top: 2rem;

  display: flex;

  flex-direction: column;

  width: 100%;

  justify-content: center;

}

.installation-button-container {

  display: flex;

  justify-content: center;

  margin-bottom: 20px;

}

.installation-button {

  width: 90%;

  min-width: fit-content;

  padding: 1rem 1rem;

  font-size: 16px;

  font-weight: 500;

  background-color: var(--color-red);

  color: white !important;

  border: none;

  cursor: pointer;

  border-radius: 5px;

  outline: none;

  text-decoration: none;

  white-space: nowrap;

  display: inline-block;

  text-align: center;

}

.installation-button:hover {

  background-color: var(--color-dark-red);

  text-decoration: none;

  color: white !important;

}

.checklist {

    list-style: disc;

    margin-left: 1.5rem;

    font-size: 0.95rem;

    line-height: 1.6;

}

.checklist a {

    color: #2563eb;

    text-decoration: underline;

}

/*

Reset details

*/

.reset-details-button {

  position: absolute;

  top: 0;

  right: 4rem;

  background: none;

  border: none;

  cursor: pointer;

  font-size: 1.3rem;

}

/*

Timeline

*/

.kit-section-title {

  position: relative;

}

/* --- Button style --- */

.timeline-btn {

  position: absolute;

  /* top: 0;

  bottom: 0; */

  /* right: 1rem; */

  right: 0;

  background: none;

  border: none;

  cursor: pointer;

  font-size: 1.3rem;

}

/* --- Popup modal styles --- */

.timeline-modal {

  display: none;

  position: fixed;

  z-index: 50;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background: rgba(0,0,0,0.5);

}

.timeline-modal-content {

  background: white;

  margin: 5% auto;

  padding: 2rem;

  border-radius: 1rem;

  width: 90%;

  max-width: 1100px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);

}

.close {

  float: right;

  font-size: 1.5rem;

  font-weight: bold;

  cursor: pointer;

}

/* --- Timeline styles --- */

.timeline {

  position: relative;

  max-width: 800px;

  margin: auto;

  padding-left: 2rem;

  border-left: 3px solid #e5e7eb;

  justify-items: center;

  margin-top: 20px;

  margin-left: 20rem;

}

.timeline-item {

  position: relative;

  margin-bottom: 2rem;

  padding-left: 1.5rem;

  display: flex;

  flex-direction: row;

  align-items: center;

  overflow: visible;

}

/* Position timestamp to the left of the vertical line */

.timeline-item .timestamp {

  position: absolute;

  left: -11rem;

  width: fit-content;

  text-align: right;

  font-size: 0.85rem;

  color: #6b7280;

  margin-right: 50px;

  z-index: 100;

}

    

.timeline-item .content::before {

  content: '';

  position: absolute;

  left: -2rem;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  border: 3px solid #e5e7eb;

  background: white;

}

.timeline-item .content {

  background: white;

  border-radius: 0.75rem;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  padding: 1rem;

  display: flex;

  align-items: center;

  gap: 0.75rem;

}

.timeline-item.created .content::before {

  border-color: #ef4444;

  background: #fee2e2;

}

.timeline-item.resolved .content::before {

  border-color: #22c55e;

  background: #dcfce7;

}

.icon {

  font-size: 1.5rem;

}

.created .icon {

  color: #dc2626;

}

.resolved .icon {

  color: #16a34a;

}

.timestamp {

  font-size: 0.85rem;

  color: #6b7280;

  margin-top: 0.25rem;

}

/*

Responsive layout 

*/

@media (max-width: 820px) {

  #status-bar {

    position: absolute;

    top: 5rem;

    left: 50%;

  }

  .side-bar-footer {

    display: flex;

  }

  .logout,

  .header-adjustement i,

  .header-adjustement a,

  .header-adjustement i:hover,

  .header-adjustement a:hover  {

    color: black;

  }

  .login-body {

    background-size: auto 100%;

  }

  .login-form {

    display: flex;

    width: 100%;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    min-width: 200px;

  }

  #content {

    display: flex;

    flex-wrap: none;

    flex-direction: row;

    overflow-y: auto;

  }

  #page-content {

    flex-shrink: 0;

    width: calc(100% - var(--closed-side-bar-width));

    min-height: calc(100vh - var(--banner-height));

    /* min-height: calc(100vh - var(--nav-bar-height)); */

  }

  .page-content.base {

    padding: 1rem !important;

  }

  .table-container {

    border-radius: 0;

  }

  .modal-content {

    width: 90%;

  }

  .form-container {

    grid-template-columns: 1fr;

  }

  .btn-submit {

    width: 100%;

  }

  #nav-bar-menu {

    display: none;

  }

  .banner-img {

    align-self: center;

    height: auto;

    max-height: 100%;

    max-width: 363px;

  }

  .not-connected .banner-img {

    margin: 0 auto;

  }

  .modal {

    width: 100dvw;

    padding: 10px 20px

  }

  .modal-content {

    padding: 10px 10px;

  }

  .profile-detail {

    flex-direction: column;

    align-items: flex-start;

    gap: 5px;

    padding: 10px;

  }

  .profile-detail .label {

    margin-inline-end: 0;

    width: 100%;

  }

  .profile-detail .value {

    width: 100%;

  }

  .filter-btn-submit-container {

    width: 100%;

  }

  /* #status-bar {

    inset-inline-start: calc(50% - var(--status-bar-width) / 2);

  } */

  .pagination-main {

    display: flex;

    flex-flow: column;

    justify-content: space-between;

    gap: 10px;

    margin-top: 10px;

  }

  .pagination {

    justify-content: center;

  }

  #nb-results span {

    margin-inline-end: auto;

  }

  .kit-details-content {

    width: auto;

    grid-template-columns: repeat(1, 1fr);

  }

  .kit-details-button-container {

    grid-column: 1;

    flex-direction: column;

  }

  .add-e2h-button-container button {

    width: 100%;

  }

  #qr-reader__scan_region img {

    max-width: 100%;

  }

  .search-input,

  .category-container,

  .document-list {

    width: 100%;

  }

  .scanner-button {

    display: block;

  }

  .btn-submit-container {

    flex-flow: column;

  }

  .faq-section {

    width: 100%;

  }

  .faq-items {

    padding-left: 15px;

  }

  .dashboard-stats-grid {

    grid-template-columns: 1fr;

  }

  .defiling-bar-container {

    left: 0;

    width: calc(100%);

  }

}