/* Example usage */

body {
  background-color: #FFFAFA;
  ;
  padding: 0px;
  margin: 0px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

textarea {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  height: 20px;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
}

/* Pageconexion */
.global {
  display: flex;
  width: 100%;
  padding: 0;
}

.left {
  align-content: center;
  width: 50%;
  background-color: #D4E5FF;
  height: 100vh;
  text-align: -webkit-center;

}

.logoleft {
  position: fixed;
  top: 6px;
  display: flex;
  padding: 30px;
}

.logoleft img {
  width: 150px;
  align-self: flex-start;
}

.blockcenter {
  display: flex;
  flex-direction: column;
  height: 55%;
  text-align: left;
  margin-top: 7%;
  padding: 20px;
  width: 60%;
  background-color: #FFFFFF;
  overflow: hidden;
  border-radius: 5px;
  justify-content: space-between;
}

.right .blockcenter {
  height: 55%;
  -webkit-box-shadow: 10px 10px 31px -1px rgba(205, 47, 47, 0.13);
  -moz-box-shadow: 10px 10px 31px -1px rgba(205, 47, 47, 0.13);
  box-shadow: 10px 10px 31px -1px rgba(205, 47, 47, 0.13);
  text-align: left;
  margin-top: 7%;
  padding: 20px;
  width: 60%;
  background-color: #FFFFFF;
  overflow: hidden;
  border-radius: 5px;
  justify-content: space-between;
}

.blockcenter img {
  height: auto;
}

.blockcenter H2 {
  color: #586E90;
  margin: 0;
}

.blockcenter p {
  color: #92AEDA;
  margin: 0;
}

.left .blockcenter button {
  width: 100%;
  text-align: center;
  background-color: #7096D1;
  padding: 10px 0px;
  color: white;
  font-weight: bold;
  border: 0px;
  border-radius: 5px;
}

.right .blockcenter button {
  width: 100%;
  text-align: center;
  background-color: var(--main-color);
  padding: 10px 0px;
  color: white;
  border: 0px;
  font-weight: bold;
  border-radius: 5px;
}

.right {
  align-content: center;
  width: 50%;
  background-color: #FFFAFA;
  height: 100vh;
  text-align: -webkit-center;

}

.logoright {
  position: fixed;
  top: 6px;
  right: 5px;
  display: flex;
  justify-content: end;
  padding: 30px;
}

.logoright img {
  width: 150px;
  align-self: flex-end;
}







/* loginpage */







.login {

  width: 100%;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.blockcenterlogin {
  display: flex;
  flex-direction: column;
  -webkit-box-shadow: 10px 10px 31px -1px rgba(205, 47, 47, 0.13);
  -moz-box-shadow: 10px 10px 31px -1px rgba(205, 47, 47, 0.13);
  box-shadow: 10px 10px 31px -1px rgba(205, 47, 47, 0.13);
  text-align: left;

  padding: 20px;
  width: 40%;
  background-color: #FFFFFF;
  overflow: hidden;
  border-radius: 12px;
  justify-content: space-between;
}

.blockcenterlogin .form {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.gap-10 {
  gap: 10px;
}



.blockcenterlogin H2 {
  color: #586E90;
  margin: 5px 0px;
}

.blockcenterlogin p {
  color: #92AEDA;
  margin: 5px 0px;
}

.inputlogin {

  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 10px 0px;

}

.inputlogin H5 {
  font-size: 12px;
  font-weight: normal;
  color: #586E90;
  margin: 5px 0px;
}

.inputt {
  font-size: 14px;
  color: #586E90;
  padding: 15px 10px;
  background-color: #F9FEFF;
  border: solid #4384923c 1px;
  border-radius: 5px;


}

.submitt {
  background-color: var(--main-color);
  padding: 15px 10px;
  border: 0px;
  border-radius: 7px;
  color: white;
  font-size: 14px;

}

.inputlogin a {

  color: var(--main-color);
  text-decoration: none;
  margin: 10px 0px;
}




/* Sidebar */






.sidebar {
  padding: 1.5% 2%;
  width: 13%;
  position: fixed;
  left: 0;
  top: 0;
  height: 94vh;
  background-color: white;
  -webkit-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  -moz-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  box-shadow: 0px 4px 32px -1px rgba(205, 47, 47, 0.13);
}

.logosidebar {
  padding-bottom: 20px;
  border-bottom: solid #E1E8F4 1.5px;
}

.logosidebar img {
  width: 100px;
}

.sidebar H2 {
  margin-top: 20px;
  margin-bottom: 0px;
  font-size: 14px;
  color: #586E90;
  font-weight: bold;
}

.sidebar a {
  font-size: 10px;
  color: var(--main-color);
  font-weight: bold;
  text-decoration: none;
  align-items: center;
}

.menu-item a {
  color: #586E90;
  display: flex;
  gap: 7px;
}

.menu-item {


  font-size: 13px;
  color: #586E90;

  padding: 10px 0px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  display: flex;

  gap: 10px;

  text-decoration: none;
  flex-direction: column;
}


.menu-item i {
  font-size: 18px;
  /* Adjust the icon size */
}

.menu-item .active {
  font-size: 13px;
  display: flex;
  color: var(--main-color);
}

.menu-item .active a {
  font-size: 13px;

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

.side-menu {

  padding: 0px;
}


.dropdown {
  font-size: 13px;
  width: 100%;
  position: relative;
  display: inline-block;
}

/* Hide the checkbox */
.dropdown input[type="checkbox"] {
  display: none;

}

/* Label Styling */
.dropdown label {
  font-size: 13px;

  color: #586E90;

  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Space between icon and text */
}

/* Icon Styling (optional) */
.dropdown label i {
  font-size: 18px;
  /* Adjust the icon size */
}

/* Dropdown List Styling */
.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  display: none;
  /* Hidden by default */
  z-index: 1;
}

.dropdown ul li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.dropdown ul li:last-child {
  border-bottom: none;
}

.dropdown ul li:hover {
  background-color: #f0f0f0;
}

/* Show list when checkbox is checked */
.dropdown input[type="checkbox"]:checked~ul {
  display: block;

}

input::placeholder {
  color: #92AEDA;
}

.submittt {
  background-color: var(--main-color);
  padding: 8px 10px;
  border: 0px;
  border-radius: 7px;
  color: white;
  font-size: 14px;
  font-weight: 600;
}


/* Existing CSS remains unchanged */

/* Ensure the sidebar can scroll */
.sidebar {
  overflow-y: auto;
  /* Enables vertical scrolling */
  overflow-x: hidden;
  /* Prevent horizontal scrolling */
  scrollbar-width: thin;
  /* For modern browsers */
}

/* Custom scrollbar styling for better appearance */
.sidebar::-webkit-scrollbar {
  width: 8px;
  /* Width of the scrollbar */
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  /* Scrollbar thumb color */
  border-radius: 10px;
  /* Rounded scrollbar */
}

.sidebar::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* Track color */
}

/* Submenu styles */
.sub-menu {
  display: none;
  /* Hidden by default */
  list-style: none;
  padding-left: 20px;
  /* Indentation for submenus */
  margin: 0;
}

.sub-menu li {
  padding: 5px 0;
}

.sub-menu li a {
  font-size: 12px;
  color: #586E90;
  text-decoration: none;
}

.sub-menu li a:hover {
  color: var(--main-color);
  /* Highlight submenu links on hover */
}

/* Show submenu when active class is added */
.menu-item.active .sub-menu {
  display: block;
}

/* Highlight active menu item */
.menu-item.active {
  color: var(--main-color);
}

.menu-item.active a {
  color: var(--main-color);
}

/* Highlight active submenu item */
.sub-menu li.active a {
  color: var(--main-color);
  font-weight: bold;
}

.menu-toggle {
  position: fixed;
  top: 15px;
  right: 15px;
  background-color: var(--main-color);
  color: white;
  padding: 10px;
  border-radius: 5px;
  z-index: 1100;
  display: none;
  cursor: pointer;
}

.menu-toggle i {
  font-size: 20px;
}

/* Responsive Styles */



/* Homepage */

.page {
  margin-left: 17%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 1% 1%;
  padding-bottom: 50px;
}


.alertt {
  margin-left: 17%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 1% 1%;

}

.alert-cont {

  display: flex;
  justify-content: space-between;
  border-left: 4px solid #E26262;
  color: #E26262;
  ALIGN-ITEMS: center;
  padding: 10px;
  background-color: white;

}

.alertt-success {
  border-left: 4px solid #438492;
  color: #438492;
}

.alert {

  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 1% 1%;

}

.gap {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}

.page p {
  color: #92AEDA;
  font-size: 14px;
  font-weight: 600;
  margin: 0px
}

.alert p {
  color: #92AEDA;
  font-size: 14px;
  font-weight: 600;
  margin: 0px
}

.questionnaire {
  background-color: #E5F4F8;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  width: 172px;
  height: 35px;
  gap: 5px;
  font-size: 14px;
  color: #438492;
  font-weight: bold;
  align-items: center;

}

.page a {
  color: #92AEDA;
  font-size: 14px;
  font-weight: 600;
  margin: 0px
}

.alert a {
  color: #92AEDA;
  font-size: 14px;
  font-weight: 600;
  margin: 0px
}

.page H4 {
  font-size: 22px;
  font-weight: bolder;
  color: #586E90;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 10px;
}

.alert H4 {
  font-size: 22px;
  font-weight: bolder;
  color: #586E90;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 10px;
}

.flex {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

.one {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-content: center;
  width: 61%;
  background-color: white;
  padding: 20px 20px;
  border-radius: 10px;
  -webkit-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  -moz-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  box-shadow: 0px 4px 32px -1px rgba(205, 47, 47, 0.13);

}

.three {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-content: center;
  width: 32%;
  background-color: white;
  padding: 20px 20px;
  border-radius: 10px;
  -webkit-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  -moz-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  box-shadow: 0px 4px 32px -1px rgba(205, 47, 47, 0.13);

}

.five {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-content: center;
  width: 97%;
  background-color: white;
  padding: 20px 20px;
  border-radius: 10px;
  -webkit-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  -moz-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  box-shadow: 0px 4px 32px -1px rgba(205, 47, 47, 0.13);

}

.four {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-content: center;
  width: 50%;
  background-color: white;
  padding: 20px 20px;
  border-radius: 10px;
  -webkit-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  -moz-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  box-shadow: 0px 4px 32px -1px rgba(205, 47, 47, 0.13);

}

.two {
  width: 36%;
  padding: 20px 20px;
  display: flex;
  flex-direction: column;

  justify-content: center;

  border-radius: 10px;
  background-color: white;
  -webkit-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  -moz-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  box-shadow: 0px 4px 32px -1px rgba(205, 47, 47, 0.13);

}

.charts {
  padding: 10px 20px;
  gap: 0px;
}

.two H4 {
  font-size: 18px;
  margin-top: 10px;
}

.flexx {
  display: flex;
  gap: 10px;
  flex-direction: row;
  align-items: end;
  padding-bottom: 24px;
  height: 100%;
  justify-content: space-between;

}

.profile {
  border-radius: 50%;
  font-size: 34px;
  width: 30%;
  height: 30%;
  margin-right: 25px;
  border: solid 1px #E1E8F4;

}

.imageprofile img {
  width: 80px;

}

.three .imprimer {
  background-color: #E5F4F8;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  width: 172px;
  height: 35px;
  gap: 5px;
  font-size: 14px;
  color: #438492;
  font-weight: bold;
  align-items: center;

}

.three .exporter {
  background-color: #438492;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  width: 172px;
  height: 35px;
  gap: 5px;
  font-size: 14px;
  color: white;
  font-weight: bold;
  align-items: center;

}

.exporter {
  background-color: #438492;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  width: 172px;
  height: 35px;
  gap: 5px;
  font-size: 14px;
  color: white;
  font-weight: bold;
  align-items: center;
  border: 0px;
  padding: 2px 7px;


}

.gerer {

  background-color: #E5F4F8;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  width: 172px;
  height: 35px;
  gap: 5px;
  font-size: 14px;
  color: #438492;
  font-weight: bold;
  align-items: center;
  border: 0px;
  padding: 2px 7px;


}

.gerer a {
  color: #438492;
}

.televeser {
  background-color: #438492;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  width: 182px;
  height: 35px;
  gap: 5px;
  font-size: 14px;
  color: white;
  font-weight: bold;
  align-items: center;
  border: 0px;
  padding: 2px 7px;

}

.exporter a {
  background-color: #438492;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  width: 172px;
  height: 35px;
  gap: 5px;
  font-size: 14px;
  color: white;
  font-weight: bold;
  align-items: center;

}

.televeser a {
  background-color: #438492;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  width: 172px;
  height: 35px;
  gap: 5px;
  font-size: 14px;
  color: white;
  font-weight: bold;
  align-items: center;

}

.exporter p {

  color: white;
  font-weight: bold;
  align-items: center;
}

.televeser p {

  color: white;
  font-weight: bold;
  align-items: center;
}


.questionnaire {
  background-color: #E5F4F8;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  width: 172px;
  height: 35px;
  gap: 5px;
  font-size: 14px;
  color: #438492;
  font-weight: bold;
  align-items: center;

}

.questionnaire p {

  color: #438492;
  font-weight: bold;
  align-items: center;
}

.three .exporter p {

  color: white;
  font-weight: bold;
  align-items: center;

}

.imprimer {
  background-color: #E5F4F8;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  width: 233px;
  height: 35px;
  padding: 2px 7px;
  gap: 5px;
  font-size: 14px;
  color: #438492;
  font-weight: bold;
  align-items: center;
}

.imprimer p {
  color: #438492;
}

.imprimer i {
  font-size: 16px;
}


.poser {
  background-color: #E5F4F8;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  width: 210px;
  height: 35px;
  padding: 7px;
  gap: 5px;
  font-size: 14px;
  color: #438492;
  font-weight: bold;
  align-items: center;
}

.poser p {
  color: #438492;
}









.chart-container {

  border-radius: 8px;
  width: 40%;
  height: 100%;

  text-align: center;

}

.chart-container h2 {
  font-size: 16px;
  margin-bottom: 20px;
  color: #586E90;
}

.chart-containerh2 {
  font-size: 16px;
  margin-bottom: 20px;
  color: #586E90;
}

.chart-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.chart-legend {
  list-style: none;
  padding: 0;
  width: 55%;
  margin: 20px 0 0;
  text-align: left;
}

.chart-legend li {
  color: #586E90;
  font-weight: 500;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.legend-color {
  width: 10px;
  height: 10px;
  font-size: 12px;
  margin-right: 10px;
  display: inline-block;
  border-radius: 50%;
}

.legend-color.red {
  background-color: #f15b5b;
}

.legend-color.blue {
  background-color: #8cb1e8;
}

.legend-color.green {
  background-color: #4da283;
}

.tableur {
  display: none;
}


.table-container {

  width: 47%;
  min-height: 300px;
  height: auto;
  padding: 20px 20px;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  -moz-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  box-shadow: 0px 4px 32px -1px rgba(205, 47, 47, 0.13);
}

.table-container h2 {
  text-align: left;
  font-size: 16px;
  width: 310px;
  padding: 15px 12px;
  margin: 0px;
  font-weight: bolder;
  border-bottom: solid 2px #438492;
  margin: 0;
  color: #438492;


}


.table-container-traitements h2 {
  text-align: left;
  font-size: 20px;
  width: 340px;
  padding: 15px 12px;
  margin: 0px;

  border-bottom: solid 2px #438492;
  margin: 0;
  color: #438492;



}

.header {
  display: flex;
  justify-content: space-between;
  color: #92AEDA;
  font-size: 14px;
  align-items: center;
  font-weight: bold;
  border-bottom: solid 1px #E1E8F4;
  margin-bottom: 20px;
}

.headretour {
  justify-content: flex-start;
  gap: 5px;
  display: flex;
  align-items: center
}

.headretour a {
  color: #438492
}

.table-container-traitements {

  width: 97%;
  min-height: 300px;
  margin: 0;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 10px 10px 31px -1px rgba(205, 47, 47, 0.13);
  -moz-box-shadow: 10px 10px 31px -1px rgba(205, 47, 47, 0.13);
  box-shadow: 10px 10px 31px -1px rgba(205, 47, 47, 0.13);
}

.table-container-traitements .styled-table {
  width: 100%;
  border-collapse: collapse;
  border-top: solid 0px #E1E8F4;
}

.styled-table {
  width: 100%;
  border-collapse: collapse;
  border-top: solid 1px #E1E8F4;
}

.styled-table th,
.styled-table td {
  padding: 20px 12px;
  text-align: left;


}

.styled-table th {

  font-weight: 500;

}

.styled-table td {

  border-bottom: 2px solid #CCE3F5;
  color: #92AEDA;
  font-size: 14px;
  text-align: left;

}

.styled-table thead {

  color: #586E90;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  font-weight: 400;


}

.styled-table tbody tr:nth-child(even) {
  background: #F9FBFD;
}

.styled-table tbody tr:hover {
  background: #EAF4FC;
}

.options {
  display: flex;
  justify-content: center;
  gap: 10px;

}





.options button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 5px;
  margin-bottom: 0px !important;
}

.options a {
  align-content: center;
}

.options .edit {
  background-color: #E5F4F8;
  color: #438492;
  border-radius: 5px;
  padding: 5px 10px;
  height: 80%;
}

.options .edit a {
  color: #438492 !important;

}

.options .delete {
  background-color: #FFEEF0;
  color: #E57373;
  border-radius: 5px;
  padding: 5px 10px;
  height: 80%;
}

.options .delete a {

  color: #E57373 !important;

}

.column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: Solid 1px #E1E8F4;
}

.column .item {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  border-bottom: Solid 1px #E1E8F4;
}

.column .item h3 {
  font-size: 14px;
  font-weight: 600;
  color: #92AEDA;
}


.tablee-container h3 {
  color: #586E90;
  font-size: 16px;
  margin: 0px;
  font-weight: 600;
}

.tablee-container h4 {
  color: #438492;
  font-size: 16px;
  font-weight: 600;
}

.tablee-container h5 {
  color: #92AEDA;
  font-size: 14px;
  margin-top: 0;
  font-weight: 600;
}

.tablee-container .item {
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.tablee-container {
  width: 47%;
  min-height: 300px;

  padding: 20px;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  -moz-box-shadow: 10px 10px 25px -1px rgba(205, 47, 47, 0.13);
  box-shadow: 0px 4px 32px -1px rgba(205, 47, 47, 0.13);
}

.tablee-container img {
  width: 80px;
}

.tablee-container button {
  border: none;
  background: none;
  cursor: pointer;
  width: auto;
  background-color: #FFEEF0;
  color: #E57373;
  border-radius: 10px;
  padding: 10px 10px;
}


.tablee-container button i {
  font-size: 17px;
}


.checkbox input {
  color: var(--main-color);
}

.checkbox {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-bar {
  width: 100%;
  height: 5px;
  background-color: #FFE5E5;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.progress-bar .progress {
  height: 100%;
  background-color: #ff6b6b;
  border-radius: 5px 0 0 5px;
  transition: width 0.3s ease;
}

.progress-bar-two {
  width: 100%;
  height: 5px;
  background-color: #E1E8F4;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.progress-bar-two .progress-two {
  height: 100%;
  background-color: #7096D1;
  border-radius: 5px 0 0 5px;
  transition: width 0.3s ease;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f8ff;
  /* Light blue background */
  border-radius: 10px;
  /* Rounded corners */
  padding: 10px 10px;
  width: 100%;
  /* Adjust as needed */
  max-width: 600px;
  /* Optional for maximum width */

}

.search-icon-left {
  position: absolute !important;
  left: 10px !important;
  font-size: 13px !important;
  margin-bottom: 12px !important;
  color: #92AEDA !important;
}

.inp-field-search {
  padding-left: 35px !important;
  padding-right: 35px !important;
  width: 100% !important;
}

.arrow-down-right {
  position: absolute !important;
  right: 10px !important;
  font-size: 12px !important;
  pointer-events: none !important;
  font-size: 11px !important;
  margin-bottom: 12px !important;
  color: #92AEDA !important;
}

.search-icon {
  font-size: 14px !important;
  /* Adjust size */
  color: #92AEDA !important;
  /* Light gray color for the icon */
  margin-right: 10px !important;
  padding-bottom: 3px !important;
  /* Space  between icon and input */
}

.search-bar input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  /* Full width for the input */
  font-size: 14px;
  color: #586E90;
  /* Text color */

}


/* Dropdown Container */
.dropdownn {
  position: relative;
  display: inline-block;


}

.buttons {
  display: flex;
  gap: 10px;
  align-items: center;

}

/* Button Styling */
.dropdown-button {
  background: none;
  border: none;
  margin-bottom: 0;
  color: #3e8c94;
  /* Match the font color in the image */
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.traitment-button {
  background: none;
  border: none;
  margin-bottom: 0px;
  color: #3e8c94;
  /* Match the font color in the image */
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.dropdown-icon {
  margin-left: 5px;
  font-size: 12px;
}

/* Dropdown Menu */
.dropdown-menu {
  display: none;
  /* Hidden by default */
  position: absolute;
  background-color: white;
  z-index: 1000 !important;
  /* Same color as the font */
  color: #fff;
  /* White text for contrast */
  padding: 10px 0;
  border-radius: 5px;
  list-style: none;
  margin: 5px 0 0;

  min-width: 100%;
  /* Adjust as needed */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Optional shadow */
}

/* Menu Items */
.dropdown-menu li {
  padding: 8px 15px;
  cursor: pointer;
  width: 94%;
  transition: background-color 0.3s ease;
}

.dropdown-menu li:hover {
  background-color: #e6e6e6;
  /* Slightly darker shade */
}

.dropdown-menu a {
  color: #586E90;
  /* Slightly darker shade */
}


.traitment-menu {
  display: none;
  /* Hidden by default */
  position: absolute;
  background-color: #438492;
  /* Same color as the font */
  color: #fff;
  /* White text for contrast */
  padding: 10px 0;
  border-radius: 5px;
  list-style: none;
  margin: 5px 0 0;
  min-width: 150px;
  /* Adjust as needed */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Optional shadow */
}

/* Menu Items */
.traitment-menu li {
  padding: 8px 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.traitment-menu a {
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.traitment-menu li:hover {
  background-color: #2e6b6f;
  /* Slightly darker shade */
}


.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-size: 14px;
  color: #3e8c94;
  /* Matching font color */
  width: 100%;

  margin-top: 25px;

}

/* Results-per-page section */
.results-per-page {
  display: flex;
  align-items: center;
}

.results-per-page label {
  margin-right: 5px;
}

.results-select {
  margin: 0 5px;
  padding: 5px;
  font-size: 14px;
  border: 1px solid #3e8c94;
  border-radius: 5px;
  background-color: #f5f8ff;
  /* Light blue background */
  color: #3e8c94;
  /* Match font color */
  cursor: pointer;
}

/* Pagination controls */
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-button {
  background-color: #f5f8ff;
  /* Light blue background */
  color: #3e8c94;
  /* Match font color */
  border: 1px solid #3e8c94;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 0px;
  width: auto;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination-button:hover {
  background-color: #3e8c94;
  /* Hover color */
  color: #fff;
  /* White text */
}

.pagination-button.disabled {
  background-color: #f0f0f0;
  color: #ccc;
  cursor: not-allowed;
  border-color: #ccc;
}

.pagination-info {
  margin: 0 10px;
}

.tabs {
  display: flex;

  margin-bottom: 1rem;
  width: 65%;
  gap: 35px;
}

.tab {
  border-bottom: 2px solid #ccc;
  text-align: center;
  padding: 10px 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  color: #92AEDA;
}

.tab.active {
  border-bottom: 2px solid #438492;
  color: #438492;
  border-radius: 0;
}


/* Basic styles for the switch container */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
}

/* Hide the checkbox */
.switch input {
  opacity: 0;
  width: 40px;
  height: 20px;
  position: absolute;
  z-index: 100;
  cursor: pointer;
}

/* The slider */
.switch label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 25px;
  transition: 0.4s;
  margin-bottom: 0;
}

/* The circle inside the slider */
.switch label:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

/* When the checkbox is checked */
.switch input:checked+label {
  background-color: #6ca0dc;
  /* Matches the blue color in your image */
}

.switch input:checked+label:before {
  transform: translateX(25px);
  /* Moves the circle to the right */
}

.mon-container {
  width: 96%;
  display: flex;
  justify-content: space-between;
  gap: 90px;
  padding: 20px;
}

.mon {
  display: flex;
  flex-direction: column;
  width: 32%;
  gap: 20px;

}

.mon-item {
  display: flex;
  justify-content: space-between;
  color: #92AEDA;

}

.mon-item1 {
  display: flex;
  justify-content: space-between;
  color: #92AEDA;

}

.mon-item.active {
  display: flex;
  justify-content: space-between;
  color: #438492;

}

.mon-item1.active {
  display: flex;
  justify-content: space-between;
  color: #438492;

}

.mon-item2.active {
  display: flex;
  justify-content: space-between;
  color: #438492;

}




@media only screen and (max-width: 980px) {

  /* Pageconexion */
  .global {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
  }

  .left {
    width: 100%;
  }

  .right {
    width: 100%;
    position: relative;
  }

  .logoleft {
    position: absolute;
    top: 6px;
    display: flex;
    padding: 30px;
  }

  .logoright {
    position: absolute;
    top: 6px;
    display: flex;
    padding: 30px;
  }

  .blockcenter {
    text-align: left;

    padding: 20px;
    width: 80%;
    background-color: #FFFFFF;
    overflow: hidden;
    border-radius: 5px;
  }

  .right .blockcenter {
    text-align: left;

    padding: 20px;
    width: 80%;
    background-color: #FFFFFF;
    overflow: hidden;
    border-radius: 5px;
  }

  .blockcenterlogin {
    display: flex;
    flex-direction: column;

    text-align: left;

    padding: 20px;
    width: 90%;
    background-color: #FFFFFF;
    overflow: hidden;
    border-radius: 5px;
    justify-content: space-between;
  }
}





/* General dropdown styling */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown toggle */
.dropdown-toggle {
  cursor: pointer;
  color: #007bff;
  font-weight: bold;
  text-decoration: none;
  padding: 5px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.dropdown-toggle:hover {
  background-color: #f8f9fa;
  color: #0056b3;
  border-radius: 5px;
}

/* Dropdown menu */
.page .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  min-width: 100%;
  z-index: 1000;
}


.sidebar .dropdown-menu {

  bottom: 100% !important;
  display: none;
  position: absolute;

  left: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  min-width: 100%;
  z-index: 1000;

}

/* Dropdown menu items */
.dropdown-item {
  padding: 10px 15px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  display: block;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
  color: #000;
}

/* Show dropdown menu on click */
.dropdown.show .dropdown-menu {
  display: block;
}



.sort-options {
  display: inline-flex;
  gap: 5px;
  cursor: pointer;
  font-size: 0.85em;
  margin-left: 5px;
}

.chck-gap {
  display: flex;
  gap: 5px;
}




.sous-traitantform {
  color: #7096D1;
}

.container {
  max-width: 800px;
  margin: 50px auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.form-group-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.form-group {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.form-group1 {
  width: 48%;
}

.form-group label {
  display: block;
  color: #586E90;
  font-weight: 500;
  margin-bottom: 5px;
  font-size: 11px;
}

.form-group input,
.form-group textarea {
  border: solid 1px #D4E5FF;
  color: #586E90;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #92AEDA;
  opacity: 1;
}

.sectt {
  border-top: solid 1px #E1E8F4;
}

label {
  display: block;
  font-weight: 400;
  margin-bottom: 9px;
}

.select2-selection {
  height: auto !important;
  min-height: 10px !important;
  border: 1px solid #D4E5FF !important;
  padding: 3px !important;

}

.select2-selection__choice {
  background-color: #F5FBFC !important;
  border: 1px solid #D4E5FF !important;
  color: #7096D1 !important;

}

.select2-dropdown {
  border: 1px solid #D4E5FF !important;
  color: #7096D1 !important;

}

.form-group input,
select,
button,
textarea,
.select2-selection {
  width: 98% !;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #D4E5FF;
  border-radius: 5px;
  font-size: 14px;

  color: #586E90;

}

.form-group1 input,
select,
button,
textarea {
  width: 96%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #D4E5FF;
  border-radius: 5px;
  font-size: 14px;
  color: #586E90;
  font-weight: 480;

}

.form-group1 input,
textarea {

  height: 20px;
}

#appbundle_treatment_description,
#appbundle_treatment_dataRetentionPeriod,
#appbundle_treatment_dataSource {
  width: 98% !important;
}

.checkbox-group input,
select,
button {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #D4E5FF;
  border-radius: 5px;
  font-size: 14px;
  color: #586E90;

}

.dropdownform {
  position: relative;
  width: 100%;
}

.disp-inline {
  display: inline-block !important;
}

#dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #F4F8FF;
  color: #92AEDA;
  border: 1px solid #ccc;
  border-radius: 5px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}

#dropdown-menu li {
  padding: 10px;
  cursor: pointer;
}

#dropdown-menu li:hover {
  background-color: #f0f0f0;
}

.file-button {
  background-color: #E5F4F8;
  color: #438492;
  border: none;
  display: flex;
  padding: 3px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  width: 200px;
  border: solid 1px #438492;
}

.file-button i {
  font-size: 20px;
}

#standard-search {
  background-color: #F4F8FF;
  color: #92AEDA;
  border: solid 0px;

}



.submit-button {
  background-color: #438492;
  width: auto;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 10px 60px;
}



.checkbox-group {
  display: flex;
  align-items: center;
  margin-top: 60px;
  margin-bottom: 20px;
}

.checkbox-group input {
  width: auto;

}

.checkbox-group label {
  margin-left: 10px;
  margin-bottom: 0;
}


.title-cat {
  margin-top: 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.title-cat h4 {
  font-size: 16px;
  color: #7096D1;
}

.title-cat a {
  font-size: 14px;
  color: #438492;
  text-decoration: none;
}


.catogro {
  width: 50%;
}

.pagination-container select,
button {
  width: auto;
  margin-bottom: 0;
}

.pagination-container label {
  margin-bottom: 0;
  font-weight: 400;
}



.sous-traitantform {
  color: #7096D1;
}

.container {
  max-width: 800px;
  margin: 50px auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.form-group {

  display: flex;
  justify-content: space-between;
  padding: 2px 5px;
  width: 95%;
}

.form-group input::placeholder {
  color: #92AEDA;
  opacity: 1;
}

.form-group input {
  border: solid 1px #D4E5FF;
}

.form-group1 {
  margin-bottom: 10px;
  width: 48%;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 11px;
}

.sectt {
  border-top: solid 1px #E1E8F4;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.form-group input,
select,
button {
  width: 94%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #D4E5FF;
  border-radius: 5px;
  font-size: 14px;
  color: #586E90;

}

.checkbox-group input,
select,
button {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #D4E5FF;
  border-radius: 5px;
  font-size: 14px;
  color: #586E90;

}

.dropdownform {
  position: relative;
  width: 100%;
}

#dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #F4F8FF;
  color: #92AEDA;
  border: 1px solid #ccc;
  border-radius: 5px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}

#dropdown-menu li {
  padding: 10px;
  cursor: pointer;
}

#dropdown-menu li:hover {
  background-color: #f0f0f0;
}

.file-button {
  padding: 10px;
  background-color: #E5F4F8;
  color: #438492;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  width: 200px;
  border: solid 1px #438492;
}

.file-button i {
  font-size: 20px;
}

#standard-search {
  background-color: #F4F8FF;
  color: #92AEDA;
  border: solid 0px;

}


.submit-button {
  background-color: #438492;
  width: auto;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 10px 60px;
}


.checkbox-group {
  display: flex;
  align-items: center;
  margin-top: 60px;
  margin-bottom: 20px;
}

.checkbox-group input {
  width: auto;

}

.checkbox-group label {
  margin-left: 10px;
  margin-bottom: 0;
}


.title-cat {
  margin-top: 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.title-cat h4 {
  font-size: 16px;
  color: #7096D1;
}

.title-cat a {
  font-size: 14px;
  color: #438492;
  text-decoration: none;
}


.catogro {
  width: 50%;
}





.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip content (hidden by default) */
.tooltip-content {
  visibility: hidden;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  bottom: 125%;
  /* Position above the icon */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

/* Arrow for the tooltip */
.tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  /* Position below the tooltip */
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Show the tooltip when hovering over the container */
.tooltip-container:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
}

.radiosbutt input {
  width: auto;
  margin: 0;
}

.radiosbutt label {

  margin: 0;
}

.radiosbutt input[type="radio"] {
  accent-color: #205c67;
}

.containrr {

  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;

}








/* Styles for Modal Popup */
.modal.fade {
  display: flex;
  /* Add flex to center the modal */
  display: none;
  position: fixed;
  z-index: 1050;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
  background-color: rgba(0, 0, 0, 0.5);

  justify-content: center;
  align-items: center;
}

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0;
  /* Remove extra margins */
}

.modal-content {
  position: relative;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ddd;
  border-radius: 0.3rem;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  max-height: 80vh;
  /* Restrict modal height */
  overflow-y: auto;
  /* Enable scrolling for overflowing content */
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dee2e6;
}

.modal-header h5 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #438492;
}

.modal-header .close {
  font-size: 1.5rem;
  width: auto;
  font-weight: bold;
  color: #438492;
  border: none;
  background: none;
  cursor: pointer;
}

.modal-body {
  padding: 10px 20px;
}

.modal-footer {

  padding: 10px 20px;
  text-align: right;
  border-top: 1px solid #dee2e6;
  display: flex;
  justify-content: end;

}

.modal-footer .btn {
  margin-left: 10px;
}


/* Checkbox List Styling */
.custom-control {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.container-fluid p {
  color: #1b2955
}

.custom-checkbox input[type="checkbox"] {
  margin-right: 10px;
  width: auto;
}

.custom-control-label {
  cursor: pointer;
  color: #333;
}

/* "Select All / Unselect All" Links */
.modal-body .mb-3 {
  margin-bottom: 20px;
  font-size: 14px;
}

.modal-body .mb-3 span {
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
}

#block_documents {
  flex-direction: column;
}

.popup-header svg {
  cursor: pointer;

}








@media (max-width: 980px) {
  .menu-toggle {
    display: block;
  }

  .flex {
    flex-direction: column;
    align-items: center;

  }

  .one,
  .two,
  .three,
  .four {
    width: 90%;
  }

  .sidebar {
    width: 100%;
    display: fixed;
    z-index: 10;
    height: auto;
  }

  .mobile {
    display: none;
  }

  .side-menu {
    display: none;
  }

  .page {
    margin-top: 15%;
    margin-left: 0%;

    width: 100%
  }

  .table-container {
    width: 93%;
    overflow: auto;
  }

  .left,
  .right {
    height: 50vh;

  }

  .logoleft img,
  .logoright img {
    width: 70px;
  }

  .blockcenter img {
    display: none;
  }

  .blockcenter,
  .right .blockcenter {
    height: auto;
  }


}


























.layer {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: none;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: fixed;
  z-index: 3;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

/* Popup container */
.popup {
  width: 35%;
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  max-height: 90vh;
  overflow: auto;
}

@media (max-width:991px) {
  .popup {
    width: 55%;
  }
}

@media (max-width:767px) {
  .popup {
    width: 75%;
  }
}

@media (max-width:567px) {
  .popup {
    width: 85%;
  }
}

/* Popup header */
.popup-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #438492;
  font-weight: bold;
  margin-bottom: 20px;
}

.popup-header img {
  cursor: pointer;
}

/* Divider */
.divider {
  height: 1.5px;
  background-color: #E1E8F4;
  margin-bottom: 20px;
}

.sub-divider {
  height: 2.5px;
  width: 50%;
  background-color: #438492;

}

/* Form group */
.popup .form-group {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  margin-bottom: 20px;
}

.popup .form-group label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #586E90;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 10px;
}

.popup .form-group input[type="file"] {
  display: none;
}

.custom-file-input {
  display: flex !important;
  align-items: center;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border: 1px solid #438492;
  border-radius: 8px;
  background-color: #eaf8fb;
  color: #438492 !important;
  cursor: pointer;
  font-size: 14px;
  width: fit-content;
}

input[type="checkbox"] {
  accent-color: #ef5f6f;
}

.custom-file-input:hover {
  background-color: #d4f0f4;
}

.form-group input[type="text"] {
  padding: 10px 15px;
  border: 1px solid #D4E5FF;
  border-radius: 8px;
  font-size: 14px;
  color: #586E90;
  outline: none;

}

.form-group input[type="text"]:focus {
  border-color: #205c67;
}

/* Checkbox group */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  margin-top: 50px;
  color: #666666;
}

input[type="radio"] {
  accent-color: #205c67 !important;
}

.checkbox-group input[type="checkbox"] {
  accent-color: #ef5f6f;
  margin-bottom: 5px;

}

/* Submit button */
.submit-btn {
  background-color: #438492;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 50px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 15px;
}

.submit-btn:hover {
  background-color: #187a89;
}

.accounts {
  color: #92AEDA;
  font-size: 14px;
}


.selected-item {
  margin: 3px;
  display: inline-block;
  background-color: #F5FBFC;
  border: 1px solid #D4E5FF;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: default;
  font-size: 14px;
  position: relative;
  margin-bottom: 10px;
}

.selected-item span.remove-button {
  color: red;
  font-weight: bold;
  margin-left: 10px;
  cursor: pointer;

  transform: translateY(-50%);
}

.selected-item span.remove-button:hover {
  color: darkred;
}

.block_document {
  gap: 10px;
  align-items: center;
}

.block_document button {
  background-color: red;
  /* Red background */
  color: white;
  /* White text color */
  border: none;
  /* Remove border */
  border-radius: 5px;
  /* Make it circular */
  width: 25px;
  /* Width of the button */
  height: 25px;
  /* Height of the button */
  display: flex;
  /* Flex to center the icon */
  align-items: center;
  justify-content: center;
  font-size: 13px;
  /* Size of the "X" */
  cursor: pointer;
  /* Pointer cursor on hover */
  outline: none;
  /* Remove focus outline */
  position: relative;
}

.block_document button::before {
  content: "X";
  /* The "X" symbol */
  /* Ensure it's a clear "X" font */
  font-weight: 400;
}

.block_document button:hover {
  background-color: darkred;
  /* Slightly darker red on hover */
}

.block_document button:focus {
  outline: 2px solid #ffcccc;
  /* Optional: Add focus outline for accessibility */
}





.custom-radio {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.custom-radio input {
  width: auto;
}

.questionnaire-section {
  margin-top: 20px;
}

.questionnaire-section label {
  color: #586E90;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 10px;
}

.campaign-type-section label {
  color: #586E90;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 10px;
}

.questionnaire-section h3 {
  font-size: 16px;
  font-weight: bold;
  color: #7096D1;
  margin-bottom: 10px;
}

.questionnaire-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #D4E5FF;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.questionnaire-item:hover {
  border-color: #205c67;
  background-color: #eaf8fb;
}

.questionnaire-item input[type="radio"] {
  accent-color: #205c67;
  margin-right: 10px;
}

.questionnaire-item label {
  font-size: 11px;
  color: #586E90;
  cursor: pointer;
  margin-bottom: -4px;
}






.form-group p {
  font-size: 11px;
  color: #586E90;
  font-weight: 400;
}



.header h2 {
  width: fit-content;
  padding: 12px 0;
}

.header h2 img {
  width: 15px;
  margin: 0 7px 0 0;
}

.header-con {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bnt-impeme {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background-color: #E5F4F8;
  padding: 10px 15px;
  color: #438492;
  border-radius: 8px;

}

.bnt-impeme img {
  width: 20px;
  margin: 0;
}

.bnt-impeme p {
  font-size: 14px;
  font-weight: 600;
  color: #438492;
}

.tect h3 {
  color: #7096D1;
}

.tect p {
  color: #586E90;
  font-size: 11px;
  font-weight: 11px;
}

.user_img_con {
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user_img_con img {
  width: 130px;
}

.no_boder {
  border-top: none;
}

.form-group {

  margin-bottom: 0px;
}

.form-group1 {
  margin-bottom: 0px;
}

input:focus {
  outline: none;
  border: 1px solid #438492;
  transition: 0.2s;
}

.Fonction {
  width: 100%;
}

.table-container-traitements {
  min-height: 100px;
}

.bondou {
  background-color: #F5FBFC;
  border-radius: 8px;
  padding: 16px;
  width: 95%;
  margin: 20px 0 20px;
  border: 1px solid #D4E5FF;
}

.bondou h3,
.bondou p {
  margin: 0 0 10px;
  color: #586E90;
  font-size: 11px;
  font-weight: 600;
}

.sectt .user_e {
  margin-bottom: 25px;
  color: #586E90;
  font-size: 11px;
  font-weight: 600;
}

.checkbox-group {
  margin: 10px 0;
  width: 96%;
}

.checkbox-group label {
  color: #586E90;
  margin-bottom: 0;
}

jmnodes.theme-primary jmnode.selected {
  background-color: #E5F4F8;
  color: #438492;
}

jmnodes.theme-primary jmnode:hover {
  background-color: #E5F4F8;

  color: #438492;
}


.header-con {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page {
  background-color: white;
}

.con {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}

@media (min-width:667px) {
  .con {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    ;

  }
}

@media (min-width:991px) {
  .con {
    grid-template-columns: repeat(3, minmax(200px, 1fr));

  }
}

@media (min-width:1300px) {
  .con {
    grid-template-columns: repeat(4, minmax(200px, 1fr));

  }
}


.con .cart_item {
  padding: 30px;
  border-radius: 26px;
  border: 1px solid #E1E8F4;
  display: flex;
  flex-direction: column;

  align-items: center;
  gap: 10px;
  height: 90%;
}

.con .cart_item img {
  width: 80px;
  margin: 0;
}

.con .cart_item h3 {
  color: #586E90;
  font-size: 20px;
  font-weight: 700;
}

.con .cart_item p {
  font-size: 12px;
  color: #92AEDA;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}

.form-state-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.foter {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  margin-top: 20px;
}

.foter .affichage {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;

}

.foter .affichage p {
  color: #586E90;
  font-size: 13px;
}

.foter .affichage input {
  border: 1px solid #438492;
  width: 30px;
  color: #438492;
  border-radius: 5px;
  background-color: #E5F4F8;
  padding: 3px 0;
  text-align: center;
}

.foter .affichage input:focus {
  outline: none;
}

.foter .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.foter .pagination p {
  font-size: 14px;
  color: #586E90;
}

.foter .pagination .icon {
  width: 40px;
  height: 40px;
  font-size: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  cursor: pointer;

}

.foter .pagination .left1 {
  color: #B0B0B0;
  background-color: #F6F6F6;
  border: 1px solid #B0B0B0;
}

.foter .pagination .right1 {
  color: #438492;
  background-color: #E5F4F8;
  border: 1px solid #438492;
}


/* Avatar Upload Container */
.avatar-upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Label Styling */
.avatar-input-label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.avatar-input-label:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Avatar Container */
.avatar-container {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.avatar-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Upload Icon */
.avatar-upload-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #007bff;
  border-radius: 50%;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transform: translate(50%, 50%);
  transition: background-color 0.3s ease;
}

.avatar-upload-icon:hover {
  background-color: #0056b3;
}

/* Hidden File Input */
.avatar-file-picker {
  display: none;
}

/* Form Feedback Styling */
.form-feedback {
  color: #e74c3c;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  text-align: center;
}

.modal.fade.show {
  display: flex !important;
}

.modal-header {
  padding: 10px;
}

.badge-danger {
  color: #EF6D6F;
  background-color: #ef6d6f1b;
}

.badge-success {
  background-color: #52b48a1e;

  color: #52B489;
}

.badge-warning {
  color: #FFC375;
}

#treatments-search,
#sheets-search {
  width: 92% !important;
}

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

.poser {
  cursor: pointer;
}

#informationModal.modal-body {
  overflow: auto;
  /* Allow content to scroll if needed */
  word-wrap: break-word;
  /* Break long text gracefully */
  white-space: pre-wrap;
}

.form-group tags {
  padding: 1px 15px;
  border: 1px solid #D4E5FF;
  border-radius: 8px;
  font-size: 14px;
  color: #586E90;
  outline: none;
  width: 100%;
}


.badge {

  padding: 3px 13px;
  border-radius: 10px;
}

.badge-secondary {
  background-color: #f3a25219;
  color: #F3A352;
}

.badge-primary {
  background-color: #7097d12d;
  color: #7096D1;
}

.avatar-input {
  display: flex;
  justify-content: center;
}

.avatar-input i {
  font-size: 100px;
  cursor: pointer;
}

.avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;

}

.form-group.block_document {
  display: flex;
}

.p-t-20 i {
  color: #EF6D6F;
  margin-right: 3px;

}

.h4 {
  font-weight: 600;
}


.node-3-actions {
  position: absolute;
  left: 110%;
  top: 30%;
}

.node-2-actions {
  display: none;
  position: absolute;
  top: -10%;
  right: -10%;
  background-color: #7096D1;
  border-radius: 50%;
  padding: 5px 0px;
  color: white;
}

jmnode:hover .node-2-actions {
  display: block;
}

.node-2-actions a {



  color: white;
}

.node-2-actions i {
  margin: 7px !important;

  font-size: 16px !important;
}

jmexpander {
  background-color: white !important;
  z-index: 100 !important;
}

.styled-table span {
  display: block !important;
}

.d-none {
  display: none;
}

.avatar-title.rounded-circle i {
  font-size: 50px;
}

.options .editer2 {
  background-color: #E5EDF8;
  color: #7096D1;
  border-radius: 5px;
  padding: 5px 10px;
  height: 100%;
}

.ajoutercilent {
  display: flex;
  color: #438492 !important;
  cursor: pointer;
}

.ajoutercilent i {
  background-color: #E5F4F8;
  align-content: center;
  border-radius: 50%;
  height: auto;
  PADDING: 10px 15px;
  font-size: 25px;
  MARGIN-RIGHT: 5px;
}

.btn-dangerr {
  background-color: #FFEAEA;
  color: #EF6D6F;
}

.container-catogrophie .styled-table td {
  color: #586E90 !important;
}

.container-catogrophie .styled-table td strong {
  color: #7096D1 !important;
}

/* Ensure the container is scrollable */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  /* Enables horizontal scrolling */
}

/* Table width should not exceed container */

.d-flexx {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.d-flex input {
  margin-bottom: 0px;
}

.mdi-file-remove {
  color: red;
}

.mdi-eye {
  color: #438492;
}





/* Sorting styles specifically for .styled-table */
#datatable thead .sorting,
#datatable thead .sorting_asc,
#datatable thead .sorting_desc,
#datatable thead .sorting_asc_disabled,
#datatable thead .sorting_desc_disabled {
  cursor: pointer;
  position: relative;
  background: rgba(210, 221, 236, 0.1);
  /* Light background on sorting headers */
}

/* Sorting icons */
#datatable thead .sorting:before,
#datatable thead .sorting_asc:before,
#datatable thead .sorting_desc:before,
#datatable thead .sorting_asc_disabled:before,
#datatable thead .sorting_desc_disabled:before {
  right: 1em;
  content: "\2191";
  /* Up arrow */
  position: absolute;

  display: block;
  opacity: 0.3;
}

#datatable thead .sorting:after,
#datatable thead .sorting_asc:after,
#datatable thead .sorting_desc:after,
#datatable thead .sorting_asc_disabled:after,
#datatable thead .sorting_desc_disabled:after {
  right: 0.5em;
  content: "\2193";
  /* Down arrow */
  position: absolute;
  top: 1.5rem;
  display: block;
  opacity: 0.3;
}

/* Highlight active sorting */
#datatable thead .sorting_asc:before,
#datatable thead .sorting_desc:after {
  opacity: 1;
}

#datatable thead .sorting_asc_disabled:before,
#datatable thead .sorting_desc_disabled:after {
  opacity: 0;
}


.badge-info {
  background-color: #FFEAEA;
}



.tooltip-inner {
  background-color: #E5EDF8 !important;
  color: #7096D1 !important;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 5px;
}

.tooltip.bs-tooltip-top .arrow::before {
  border-top-color: #7096D1 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.tooltip.bs-tooltip-bottom .arrow::before {
  border-bottom-color: #7096D1 !important;
}

.tooltip.bs-tooltip-left .arrow::before {
  border-left-color: #7096D1 !important;
}

.tooltip.bs-tooltip-right .arrow::before {
  border-right-color: #7096D1 !important;
}






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

.badge {
  text-align: center;
}

.mb-22 label,
.mb-22 input {
  margin-bottom: 0px !important;

}


.avatar-img-contain {
  width: 100%;
  border-radius: 50%;
  height: 120%;
  font-size: 0px !important;

}


.select2-container--default {
  width: 97% !important;
}

#appbundle_action_forDpo {
  margin-bottom: 5px;
}

.block_documentt {

  border: 1px solid #D4E5FF;
  border-radius: 10px;
  align-items: center;
  padding: 10px;
}

.block_documentt label {
  margin-bottom: 0px;
}

.block_documentt .custom-control {
  margin-bottom: 0px;
}



#map {
  min-height: 600px;
  height: auto;
  width: 100%;
  border: 1px solid #ddd;
  margin: 20px auto;
}

.parent {
  position: relative;
  width: 400px;
  /* Adjust width as needed */
  height: 120px;
  /* Adjust height as needed */
  background-color: #eaf8fb;
  /* Light blue background color */
  border-radius: 16px;
  /* Rounded corners */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  /* Base border to ensure shape */
}

.jm-line {
  stroke: #666;
  /* Set line color */
  stroke-width: 2px;
  /* Adjust line thickness */
}


.parent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  border: 2px dashed #3b8397;
  /* Dashed border for dotted look */
  box-sizing: border-box;
  clip-path: polygon(5% 0%, 95% 0%, 95% 10%, 100% 10%, 100% 90%, 95% 90%, 95% 100%, 5% 100%, 5% 90%, 0% 90%, 0% 10%, 5% 10%);
  /* Adjusted to create "breaks" */
}

#map .icon {
  color: #3b8397;
  /* Icon color */
  font-size: 32px;
  /* Adjust font size */
  text-align: center;
}

jmnodes.theme-primary jmnode {
  border: 3px solid #438492;
  background-color: #E5F4F8;
  color: #438492;
  padding: 20px 34px;
  border-radius: 16px;
  box-shadow: none;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  overflow: visible;
  min-width: 120px;
  height: 80px;
  align-content: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

jmnodes.theme-primary jmnode i {
  font-size: 40px;
  margin: 10px;
}

#map img {
  width: 40px;
  margin: 0 auto 15px;

}

.border {
  background-color: #E5F4F8;
  z-index: 1212;
  position: absolute;
  width: 20px;
  height: 4px;
}

.border1 .circle {
  width: 6px;
  height: 6px;
  background-color: #438492;
  border-radius: 50%;
  position: absolute;
  top: -2px;
  left: -3px;

}

.border.border1 {
  top: -2.5px;
  left: 30px;
}

.border.border2 {
  top: 20px;
  right: -3px;
  height: 20px;
  width: 4px;
}

.border2 .circle {
  width: 6px;
  height: 6px;
  background-color: #438492;
  border-radius: 50%;
  position: absolute;
  bottom: -2px;
  left: -0;

}

.border.border3 {
  bottom: -2.5px;
  right: 25px;
  width: 20px;
  height: 4px;
}

.border3 .circle {
  width: 6px;
  height: 6px;
  background-color: #438492;
  border-radius: 50%;
  position: absolute;
  bottom: -2px;
  right: -2px;

}

.border.border4 {
  bottom: 20px;
  left: -2.5px;
  height: 20px;
  width: 4px;
}

.border4 .circle {
  width: 6px;
  height: 6px;
  background-color: #438492;
  border-radius: 50%;
  position: absolute;
  top: -2px;
  left: -2px;

}


jmnode[nodeid="root"] {
  background-color: #EFEFEF !important;
  /* A different background color */
  color: #A2A2A2 !important;
  border: 3px solid #A2A2A2 !important;
}

jmnode[nodeid="root"] .circle {
  background-color: #A2A2A2 !important;
  /* A different background color */

}

jmnode[nodeid="root"] .border {
  background-color: #EFEFEF !important;
  /* A different background color */

}

jmnode[nodeid="physical"] {
  background-color: #E5ECF8 !important;
  /* A different background color */
  color: #7096D1 !important;
  border: 3px solid #7096D1 !important;
}

jmnode[nodeid="physical"] .circle {
  background-color: #7096D1 !important;
  /* A different background color */

}

jmnode[nodeid="physical"] .border {
  background-color: #E5ECF8 !important;
  /* A different background color */

}


/* General styling for specific jmnode elements */
jmnode[nodeid="physical_partitioning"],
jmnode[nodeid="physical_information"],
jmnode[nodeid="921"],
jmnode[nodeid="1068"] {
  background-color: #E5ECF8 !important;
  /* A different background color */
  color: #7096D1 !important;
  border: 3px solid #7096D1 !important;
}

/* Styling the circles inside these nodes */
jmnode[nodeid="physical_partitioning"] .circle,
jmnode[nodeid="physical_information"] .circle,
jmnode[nodeid="921"] .circle,
jmnode[nodeid="1068"] .circle {
  background-color: #7096D1 !important;
  /* Circle background color */
}

/* Styling the borders inside these nodes */
jmnode[nodeid="physical_partitioning"] .border,
jmnode[nodeid="physical_information"] .border,
jmnode[nodeid="921"] .border,
jmnode[nodeid="1068"] .border {
  background-color: #E5ECF8 !important;
  /* Border background color */
}

jmnode[nodeid="action"] {
  background-color: #F8E5E5 !important;
  /* A different background color */
  color: #EF6D6F !important;
  border: 3px solid #EF6D6F !important;
}

jmnode[nodeid="action"] .circle {
  background-color: #EF6D6F !important;
  /* A different background color */

}

jmnode[nodeid="action"] .border {
  background-color: #F8E5E5 !important;
  /* A different background color */

}


/* General styling for specific jmnode elements */
jmnode[nodeid="action_minimization"],
jmnode[nodeid="action_anonymization"],
jmnode[nodeid="action_pseudonymization"],
jmnode[nodeid="action_sensitization"],
jmnode[nodeid="action_supervision"],
jmnode[nodeid="action_destruction"],
jmnode[nodeid="1069"],
jmnode[nodeid="1070"] {
  background-color: #F8E5E5 !important;
  /* A different background color */
  color: #EF6D6F !important;
  border: 3px solid #EF6D6F !important;
}

/* Styling the circles inside these nodes */
jmnode[nodeid="action_minimization"] .circle,
jmnode[nodeid="action_anonymization"] .circle,
jmnode[nodeid="action_pseudonymization"] .circle,
jmnode[nodeid="action_sensitization"] .circle,
jmnode[nodeid="action_supervision"] .circle,
jmnode[nodeid="action_destruction"] .circle,
jmnode[nodeid="1069"] .circle,
jmnode[nodeid="1070"] .circle {
  background-color: #EF6D6F !important;
  /* Circle background color */
}

/* Styling the borders inside these nodes */
jmnode[nodeid="action_minimization"] .border,
jmnode[nodeid="action_anonymization"] .border,
jmnode[nodeid="action_pseudonymization"] .border,
jmnode[nodeid="action_sensitization"] .border,
jmnode[nodeid="action_supervision"] .border,
jmnode[nodeid="action_destruction"] .border,
jmnode[nodeid="1069"] .border,
jmnode[nodeid="1070"] .border {
  background-color: #F8E5E5 !important;
  /* Border background color */
}

jmnode[nodeid="supplier"] {
  background-color: #E5ECF8 !important;
  /* A different background color */
  color: #7096D1 !important;
  border: 3px solid #7096D1 !important;
}

jmnode[nodeid="supplier"] .circle {
  background-color: #7096D1 !important;
  /* A different background color */

}

jmnode[nodeid="supplier"] .border {
  background-color: #E5ECF8 !important;
  /* A different background color */

}

/* General styling for specific jmnode elements */
jmnode[nodeid="supplier_supplier"],
jmnode[nodeid="997"],
jmnode[nodeid="996"] {
  background-color: #E5ECF8 !important;
  /* Background color */
  color: #7096D1 !important;
  /* Text color */
  border: 3px solid #7096D1 !important;
  /* Border color */
}

/* Styling the circles inside these nodes */
jmnode[nodeid="supplier_supplier"] .circle,
jmnode[nodeid="997"] .circle,
jmnode[nodeid="996"] .circle {
  background-color: #7096D1 !important;
  /* Circle background color */
}

/* Styling the borders inside these nodes */
jmnode[nodeid="supplier_supplier"] .border,
jmnode[nodeid="997"] .border,
jmnode[nodeid="996"] .border {
  background-color: #E5ECF8 !important;
  /* Border background color */
}

.disp-none {
  display: none;
}

.disp-flex {
  display: flex !important;
}

.margin-top {
  margin-top: 20px !important;
}

.seconnecter {
  width: 100% !important;
  margin-top: 3px !important;
}

.seconnecterbutton {
  background-color: #438492 !important;
}

.action-realise {
  display: flex !important;
  margin-top: 10px !important;
  width: 100% !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  align-items: center !important;
}

.chk {
  display: flex !important;
  gap: 7px !important;
  align-items: center !important;
}

.consentasked {
  display: flex !important;
  gap: 30px !important;
}

.add-doc-modalbutton {
  width: 250px !important;
  text-decoration: none !important;
  color: inherit !important;
}

.chck-consentasked {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 10px !important
}

.width-985 {
  width: 98.5% !important;
}

.width-15 {
  width: 15px !important;
}

.priorite {
  display: flex !important;
  margin: 10px 0px !important;
  width: 100% !important;
  gap: 15px !important;
}

.margin-top-30 {
  margin-top: 30px !important;
}

.margin-bottom-10 {
  margin-bottom: 10px !important;
}

.mt-3 {
  margin: 40px 0px !important;
}

.col-12 {
  margin-top: 10px !important;
}

.width-400 {
  width: 400px !important;
}

.width-50 {
  width: 50% !important;
}

.pointer {
  cursor: pointer !important;
}

.search-container {
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.width-100 {
  width: 100% !important;
}

.option {
  min-width: 240px !important;
}

.opacity-03 {
  opacity: 0.3 !important;
}

.vos-actions {
  display: flex !important;
  gap: 20px !important;
}

.actions-export {
  text-decoration: none !important;
  color: inherit !important;
}

.actions-imprimer {
  width: 100% !important;
  cursor: pointer !important;
}

.font-16 {
  font-size: 16px !important;
}

.width-200 {
  width: 200px !important;
}

.action-danger {
  color: #EF6D6F !important;
  background-color: #ef6d6f2a !important;
  border-radius: 10px !important;
  padding: 7px 11px !important;
  width: auto !important;
}

.action-warning {
  color: #FFC375 !important;
  background-color: rgba(255, 195, 117, 0.14) !important;
  border-radius: 10px !important;
  padding: 7px 11px !important;
  width: auto !important;
}

.action-success {
  color: #52B489 !important;
  background-color: rgba(82, 180, 138, 0.17) !important;
  border-radius: 10px !important;
  padding: 7px 11px !important;
  width: auto !important;
}

.width-250 {

  width: 250px !important;
}

.datecolor {
  color: #EF6D6F !important;
}

.sous-trait-select {
  width: auto !important;
  padding: 0px 10px !;
}

.monitem-display {
  display: flex !important;
  justify-content: space-between !important;
}

.hiddenfile {
  opacity: 0 !important;
  pointer-events: none !important;
}

.piafileinputstyle {
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: -1 !important;
  width: 2px !important;
}

.bckgrnd-color-grey {
  background-color: #e5f4f861 !important;
  border-radius: 10px !important;
  margin-top: 10px !important;
  padding: 0 10px !important;
  border: 1px solid #E1E8F4 !important;
}

.requestdate {
  text-align: center !important;
  color: #EF6D6F !important;
}

.text-center {
  text-align: center !important;
  border-radius: 10px !important;
  padding: 2px !important;
  width: auto !important;
}

.answersucces {
  color: #52B489 !important;
  background-color: rgba(82, 180, 138, 0.15) !important;
}

.answerwarning {
  color: #EF6D6F !important;
  background-color: #ef6d6f2a !important;
}

.dategreen {
  color: #438492 !important;
}

.form-descrp {
  width: 98% !important;
  height: 200px !important;
}

.form-discount {
  width: 97% !important;
  margin-bottom: 40px !important;
}

.ou {
  margin: 30px 0px !important;
}

.overflow-visible {
  overflow: visible !important;
}

.daterouge {
  color: #EF6D6F !important;
}

.submit-index {
  align-items: center !important;
  display: flex !important;
  justify-content: center !important;
  gap: 5px !important;
}


.info-container {
  display: flex !important;
  gap: 15px !important;
  align-items: center !important;
}

.card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px
}

.galaxiehead {
  width: 100% !important;
  justify-content: space-between !important
}

.relative-flex {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.search-span {
  position: absolute !important;
  left: 10px !important;
  font-size: 13px !important;
  margin-bottom: 12px !important;
  color: #92AEDA !important;
}

.down-span {
  position: absolute !important;
  right: 10px !important;
  font-size: 16px !important;
  pointer-events: none !important;
  font-size: 13px !important;
  margin-bottom: 12px !important;
  color: #92AEDA !important;
}

.padding-left {
  padding-left: 30px !important;
}

.chckbox-margin {
  margin-top: 10px !important;
  margin-bottom: 20px !important;
}

.headretour-icon {
  margin-top: 4px !important;
}

.training-imprimer {
  width: 140px !important;
  color: #438492 !important;
}

.trainee-oui {
  text-align: center !important;
  color: #52B489 !important;
  background-color: rgba(82, 180, 138, 0.14) !important;
  border-radius: 10px !important;
  padding: 2px !important;
}

.trainee-non {
  text-align: center !important;
  color: #EF6D6F !important;
  background-color: #ef6d6f2a !important;
  border-radius: 10px !important;
  padding: 2px !important;
}

.traitment-green {
  color: #438492 !important;
  align-content: center !important;
}

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

.flex-column {
  flex-direction: column !important;
}

.personaldate {
  height: 100% !important;
  margin-bottom: 0px !important;
  display: flex !important;
  align-items: center !important;
  padding: 10px !important;
}

.pia-analyse-button {
  font-weight: bold;
  margin-bottom: 5px !important;
  font-size: 11px !important;
  color: #586E90 !important;
}

.width-99 {
  width: 99% !important;
}

.height-100 {
  height: 100px !important;
}

.width-97 {
  width: 97% !important;
}

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

.col-12-label {
  align-content: center !important;
  margin-right: 15px !important;
}

.subs-imp {
  color: #438492 !important;
  width: auto !important;
  margin: 3px !important;
  padding: 3px 5px !important;
  height: auto !important;
}

.border-top-none {
  border-top: none !important;
}

.list-categorie {
  color: #7096D1 !important
}

.categorie-search {
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 20px !important;
}

.opt-delete {
  margin-bottom: 0px !important;
  width: 40px !important;
}

.width-94 {
  width: 94%;
}

.width-60p {
  width: 60px !important;
}

.white {
  color: white !important;
}

.margin-bottom-0 {
  margin-bottom: 0px !important;
}

.pia-criteria-container {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.chck-piacriteria {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  font-size: 14px !important;
  flex: 1 1 calc(50% - 20px) !important;
}

.chck-widget {
  width: 15px !important;
  margin: 0 !important;
}

.margin-0 {
  margin: 0 !important;
}

.tooltip-span {
  font-size: 15px !important;
  color: #438492 !important;
}

.piaExoneration {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 0px !important;
}

.piaExoneration-container {
  display: flex !important;
  width: 100% !important;
  gap: 30px !important;
  margin-top: 10px !important;
}

.piaExoneration-container1 {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  font-size: 11px !important;
  color: #586E90 !important;
  font-weight: bold !important;
}

.measures-container {
  display: flex !important;
  gap: 10px !important;
}

.cartographie-cont-style {
  border: solid 1px #E1E8F4 !important;
  border-radius: 10px !important;
  padding: 10px !important;
  margin-top: 30px !important
}

.libellecolor {
  color: #586E90 !important;
}

.typechild {
  text-align: left !important;
  color: #7096D1 !important
}

.width-45 {
  width: 45% !important;
}

.pia-file-container {
  margin-bottom: 40px !important;
  flex-direction: column !important;
  margin-top: 20px !important;
  gap: 10px !important
}

.sous-trait-container {
  display: flex !important;
  gap: 10px !important;
  width: auto !important;
  align-items: center !important;
}

.form-state {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  font-size: 14px !important;
}

/* Styles pour la cartographie des SI - Curseur pointer sur les nœuds cliquables */
.jmnode-level-3:hover {
  cursor: pointer !important;
}

.jmnode-level-3 {
  cursor: pointer !important;
}

/* Assurer que tous les nœuds cliquables de la mindmap ont un curseur pointer */
jmnode[nodeid]:not([nodeid="root"]) {
  cursor: pointer !important;
}

jmnode[nodeid]:not([nodeid="root"]):hover {
  cursor: pointer !important;
}