/*------------------------------------------------------------------
[Master Stylesheet]

Project:		NOVENTER NNSF-FRONTEN
Version:		1.0
Last change: 	12/05/2023
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of Contents]

1. Importing Sass Variables
2. Importing Web Fonts
	2.1 Lato Font
	2.2 Rubik Mono One Font
3. Body CSS
4. Loading CSS
5. Re Usable Styles
	5.1 Anchor Reset
	5.2 HR
	5.3 Unorder List
	5.4 Headings
	5.5 Images
	5.6 Background Colors
    5.7 Border Colors
	5.9 Text Colors
6. Layout CSS
	6.1 Page Wrapper
	6.2 Sidebar Wrapper
	6.3 Main Container
	6.4 Page Header
    6.5 Welcome Note
	6.6 Search Container
	6.7 Leads Dropdown
    6.8 Header Ations
	6.9 Header Profile Actions
	6.10 Breadcrumb Container
	6.11 Content Wrapper
	6.12 App Footer
7. Country Dropdown
8. Components/Widgets
	8.1 Button Icon
	8.2 Custom Button Group
	8.3 Custom Icon Group
	8.4 Custom Badge Group
	8.5 Chart Heights
	8.6 Card Heights
	8.7 Number Stats
    8.8 Notifications Container
	8.9 Stats Tiles
	8.10 Reports Summary
    8.11 Day Selection
    8.12 Activity Container
    8.13 Transactions Container
    8.14 Task List
    8.15 User Messages
    8.16 Info Stats
    8.17 Income Stats
    8.18 Tickets Container
    8.19 Task Stats
    8.20 Meetings Container
    8.21 Nav Tabs
    8.21 Stacked Images
    8.22 Orders
    8.23 Logs
    8.24 Global Slaes
    8.25 Social Tile
    8.26 Databar Container
    8.27 Weather widget
    8.28 Ratings
    8.29 Product Cards
    8.30 Product Cards
    8.31 Product Checkout List
    8.32 Edit Customer Status
    8.33 Add Product
    8.34 Create Invoice Wrapper
    8.35 Invoice List
    8.36 Create Invoice
    8.37 Form Actions Footer
    8.38 Icons Container
    8.39 Sales Stats
    8.40 Monthly Stats
    8.41 Chart Notify
    8.42 Vertical line
9. Plugins
	9.1 Overlay Scroll
	9.2 DropZone
	9.3 Credit Card
	9.4 jVector Maps
	9.5 Apex Graphs
10. Pages
	10.1 Login
	10.2 Maintenance Screen
	10.3 Contacts
    10.4 Pricing Plan
    10.5 Account Settings
    10.6 Error Page
11. Bootstrap Overwrite CSS
	11.1 Badge
	11.2 Placeholder
	11.3 Accordion
	11.4 Alerts
	11.5 Tabs
	11.6 Cards
	11.7 Buttons
    11.8 Button Primary
    11.9 Button Secondary
    11.10 Button Info
    11.11 Button Danger
    11.12 Button Warning
    11.13 Button Success
    11.14 Button Light
    11.15 Button Dark
    11.16 Button White
    11.17 Dropdown Menu
    11.18 List Group
    11.19 Carousel
    11.20 Form Controls
    11.21 File Upload
    11.22 Checkbox and Radio
    11.23 Modal
    11.24 Tables
    11.25 Pagination
    11.26 Progress
    11.27 Spinners
    11.28 Off Canvas
    11.29 Off Canvas
    11.30 Row Gutters


-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Typography]

# Lato - Main Font
# Rubik Mono One Font - Additional Font
-------------------------------------------------------------------*/
/************************************************
	************************************************
				1. Importing Sass Variables
	************************************************
************************************************/
/************************************************
	************************************************
				2. Importing Web Fonts
	************************************************
************************************************/
@font-face {
  font-family: 'Lato';
  src: url("../fonts/lato/Lato-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url("../fonts/lato/Lato-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

 @font-face {
  font-family: 'Lato';
  src: url("../fonts/lato/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url("../fonts/lato/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik Mono One';
  src: url("../fonts/rubik-mono/RubikMonoOne-Regular.ttf") format("truetype");
  font-style: normal;
  font-style: normal;
  font-display: swap;
} /**/

/************************************************
	************************************************
					3. Body CSS
	************************************************
************************************************/
html, body {
  height: 100%;
  font-size: 100%;
}

/* Cacher la scrollbar globalement tout en gardant le défilement */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

html, body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

body {
  margin: 0;
  padding: 0;
  font: 400 .9rem 'Lato', sans-serif;
  color: #13181e;
  min-height: 100%;
  position: relative;
  background: #e7e8fd;
}

body:before {
  content: '';
  position: absolute;
  left: -25%;
  top: 0;
  bottom: 0;
  opacity: 0.2;
  width: 70%;
  background: url(../img/circle.png);
  background-position: center 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
  body:before {
    background: none;
  }
}

/************************************************
	************************************************
					4. Loading CSS
	************************************************
************************************************/
.loading-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999999999999;
  background: rgba(0, 0, 0, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.loading-wrapper .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -40px;
  margin-top: -30px;
  width: 80px;
  height: 60px;
}

.loading-wrapper .spinner > div {
  background-color: #1395ba;
  height: 100%;
  width: 9px;
  border-radius: 10px;
  display: inline-block;
  -webkit-animation: linedelay 1.1s infinite ease-in-out;
  animation: linedelay 1.1s infinite ease-in-out;
}

.loading-wrapper .spinner .line2 {
  background-color: #5ca793;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.loading-wrapper .spinner .line3 {
  background-color: #a2b86c;
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.loading-wrapper .spinner .line4 {
  background-color: #ebc844;
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.loading-wrapper .spinner .line5 {
  background-color: #ecaa38;
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.loading-wrapper .spinner .line6 {
  background-color: #ef8b2c;
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.loading-wrapper.active {
  visibility: visible; /* Show when active */
}

@-webkit-keyframes linedelay {
  0%, 50%, 100% {
    -webkit-transform: scaleY(0.4);
  }
  30% {
    -webkit-transform: scaleY(1);
  }
}

@keyframes linedelay {
  0%, 50%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  30% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}

/************************************************
	************************************************
				5. Re Usable Styles
	************************************************
************************************************/
/************* 5.1 Anchor Reset *************/
a {
  color: #13181e;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: inherit;
}

/************* 5.2 HR *************/
hr {
  background: #e1e1e1;
  opacity: 1;
}

/************* 5.3 Unorder List *************/
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.custom {
  margin: 20px 0 0 20px;
}

ul.custom li {
  line-height: 180%;
}

/************* 5.4 Headings *************/
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

h1 {
  font-size: 3rem;
  margin-bottom: .8rem;
}

h2 {
  font-size: 2.5rem;
  margin-bottom: .5rem;
}

h3 {
  font-size: 2rem;
  margin-bottom: .5rem;
}

h4 {
  font-size: 1.5rem;
  margin-bottom: .4rem;
}

h5 {
  font-size: 1rem;
  margin-bottom: .3rem;
}

h6 {
  font-size: .925rem;
  margin-bottom: .2rem;
}

p {
  margin-bottom: .2rem;
  font-size: .875rem;
  line-height: 180%;
}

/************* 5.5 Images *************/
img {
  border-radius: 3px;
}

/************* 5.6 Background Colors *************/
.shade-white, .modal .modal-content {
  background: #ffffff;
}

.shade-primary {
  background: #0f59c9;
}

.shade-secondary {
  background: #41464b;
}

.shade-yellow, .header-actions > li .user-settings .avatar .status.away {
  background: #dda50e;
}

.shade-red, .page-header .toggle-sidebar:hover, .page-header .toggle-sidebar-fullscreen:hover, .page-header .sidebar-togglescreen:hover, .header-actions > li .user-settings .avatar .status.busy {
  background: #EB3333;
}

.shade-green, .page-header .toggle-sidebar, .page-header .toggle-sidebar-fullscreen, .page-header .sidebar-togglescreen, .header-actions > li .user-settings .avatar .status.online {
  background: #149865;
}


.shade-blue, .login-box .login-form .btn .icon, .page-item.active .page-link {
  background: #0078b9;
  padding: 8px;
}

.shade-light {
  background: #dbe1e9;
}

.shade-dark {
  background: #9ba2ab;
}

/************* 5.7 Border Colors *************/
.shade-bdr-white {
  border: 1px solid #ffffff;
  color: #ffffff;
}

.shade-bdr-primary {
  border: 1px solid #0f59c9;
  color: #0f59c9;
}

.shade-bdr-secondary {
  border: 1px solid #41464b;
  color: #41464b;
}

.shade-bdr-yellow {
  border: 1px solid #dda50e;
  color: #dda50e;
}

.shade-bdr-red {
  border: 1px solid #EB3333;
  color: #EB3333;
}

.shade-bdr-green {
  border: 1px solid #149865;
  color: #149865;
}

.shade-bdr-blue {
  border: 1px solid #0078b9;
  color: #0078b9;
}

.shade-bdr-light {
  border: 1px solid #dbe1e9;
  color: #dbe1e9;
}

.shade-bdr-dark {
  border: 1px solid #9ba2ab;
  color: #9ba2ab;
}

/************* 5.8 Text Colors *************/
.text-primary {
  color: #0f59c9 !important;
}

.text-secondary {
  color: #41464b !important;
}

.text-light {
  color: #dbe1e9 !important;
}

.text-dark {
  color: #9ba2ab !important;
}

.text-red {
  color: #EB3333 !important;
}

.text-green {
  color: #149865 !important;
}

.text-yellow {
  color: #dda50e !important;
}

.text-blue {
  color: #0078b9 !important;
}

.text-white {
  color: #ffffff !important;
}

.text-black {
  color: #000000 !important;
}

.text-orange {
    color: #caa10c !important;
}

.text-purple {
    color: #764ba2 !important;
}

.text-muted {
  color: rgba(0, 0, 0, 0.5) !important;
}

/************************************************
	************************************************
					6. Layout CSS
	************************************************
************************************************/
/************* 6.1 Page Wrapper *************/
.page-wrapper {
  padding: 10px;
  position: relative;
}

.page-wrapper.fullscreen .sidebar-wrapper {
  left: -280px;
}

.page-wrapper.fullscreen .main-container {
  padding-left: 0px;
}

.page-wrapper.togglescreen .sidebar-wrapper {
  left: -280px;
}

.page-wrapper.togglescreen .main-container {
  padding-left: 0px;
}

@media (max-width: 576px) {
  .page-wrapper {
    padding: 0;
  }
}

/************* 6.2 Sidebar Wrapper *************/
.sidebar-wrapper {
  width: 110px;
  padding: 0;
  height: 100vh;
  border-radius: 0 90px 90px 0;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  -webkit-transition: left .3s ease, width .3s ease;
  transition: left .3s ease, width .3s ease;
 text-align: center;
  /************* Sidebar Brand *************/
  /************* Sidebar Icon Animation *************/
  /************* Sidebar Menu *************/
}

.sidebar-wrapper .sidebar-brand {
  margin: 0;
}

.sidebar-wrapper .sidebar-brand .logo {
  padding: 2rem 1.5rem 0rem 1.5rem;
  min-height: 85px;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.sidebar-wrapper .sidebar-brand .logo img {
  max-width: 150px;
  max-height: 70px;
}

@-webkit-keyframes iconUpDown {
  0%, 100% {
    -webkit-transform: translateY(3px);
            transform: translateY(3px);
  }
  50% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
}

@keyframes iconUpDown {
  0%, 100% {
    -webkit-transform: translateY(3px);
            transform: translateY(3px);
  }
  50% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
}

.sidebar-wrapper .sidebar-menu {
  padding: 20px 0;
  height: calc(100vh - 120px);
}

.sidebar-wrapper .sidebar-menu ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  padding: 20px 15px 20px 15px;
  color: #272727;
  font-size: .925rem;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: relative;
}

.sidebar-wrapper .sidebar-menu ul li a i {
  margin-bottom: 7px;
  font-size: 1.7rem;
  text-shadow: none;
  color: #13181e;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 50px;
}

.sidebar-wrapper .sidebar-menu ul li a .menu-text {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  overflow: hidden;
}

.sidebar-wrapper .sidebar-menu ul li a:hover {
  color: #696969;
  background-color: rgba(0, 0, 0, 0.02);
}

.sidebar-wrapper .sidebar-menu ul li a:hover i {
  -webkit-animation: iconUpDown 1s linear infinite;
          animation: iconUpDown 1s linear infinite;
}

.sidebar-wrapper .sidebar-menu ul li.active-page-link {
  position: relative;
}

.sidebar-wrapper .sidebar-menu ul li.active-page-link a {
  color: #0078b9;
}

.sidebar-wrapper .sidebar-menu ul li.active-page-link a i {
  color: #0078b9;
  border-radius: 50px;
}

.sidebar-wrapper .sidebar-menu ul li.active a i {
  color: #0078b9;
  border-radius: 50px;
}

.sidebar-wrapper .sidebar-menu ul li.active a.current-page {
  position: relative;
  color: #0078b9;
}

.sidebar-wrapper .sidebar-menu ul li.active a.current-page:hover {
  background-color: rgba(0, 0, 0, 0.02);
  color: #0078b9 !important;
}

.sidebar-wrapper .sidebar-menu ul li.active .sidebar-submenu {
  display: block;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
  font-family: 'bootstrap-icons' !important;
  font-weight: 700;
  font-size: 1rem;
  content: "\f282";
  display: inline-block;
  position: absolute;
  right: 65px;
  top: 28px;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;  
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu {
  display: none;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
  padding: 0;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 10px 7px 10px 7px;
  margin: 0 8px;
  border-radius: 5px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a:hover {
  color: #696969;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  right: 65px;
}

.sidebar-wrapper.dark {
  background-color: #2f313a;
}

.sidebar-wrapper.dark .sidebar-menu ul li a {
  color: #ffffff;
}

.sidebar-wrapper.dark .sidebar-menu ul li a i {
  color: #ffffff;
}

.sidebar-wrapper.dark .sidebar-menu ul li a:hover {
  background-color: #3a3d48;
  color: #ffffff;
}

.sidebar-wrapper.dark .sidebar-menu ul li a:hover i {
  color: #ffffff;
}

.sidebar-wrapper.dark .sidebar-menu ul li.active a.current-page {
  background-color: #3a3d48;
  color: #ffffff;
}

.sidebar-wrapper.dark .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
  padding: 0;
}

.sidebar-wrapper.dark .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a:hover {
  color: #ffffff;
}

@media (max-width: 576px) {
  .sidebar-wrapper {
    background-color: #ffffff;
    border-radius: 10px 90px 90px 10px;
  }
}

/************* 6.3 Main Container *************/
.main-container {
  border-radius: 10px;
  -webkit-transition: padding-left .3s ease;
  transition: padding-left .3s ease;
  padding: 0 0 0 115px;
  height: calc(100vh);
}

@media screen and (max-width: 1024px) {
  /************* Page Wrapper *************/
  .page-wrapper {
    /************* Main Container *************/
  }
  .page-wrapper .sidebar-wrapper {
    left: -280px;
  }
  .page-wrapper.toggled .sidebar-wrapper {
    left: 10px;
  }
  .page-wrapper .main-container {
    padding-left: 0px;
  }
}

@media screen and (min-width: 1024px) {
  /************* Page Wrapper fullscreen *************/
  .page-wrapper.toggled-fullscreen .sidebar-wrapper {
    left: 10px;
  }
  .page-wrapper.toggled-fullscreen .main-container {
    padding-left: 230px;
  }
}

@media screen and (min-width: 1024px) {
  /************* Page Wrapper fullscreen *************/
  .page-wrapper.toggled-togglescreen .sidebar-wrapper {
    left: 10px;
  }
  .page-wrapper.toggled-togglescreen .main-container {
    padding-left: 0;
  }
}

@media (max-width: 576px) {
  .main-container {
    height: calc(100vh);
  }
}

/************* 6.4 Page Header *************/
.page-header {
  padding: 10px 14px 20px 14px;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.page-header .toggle-sidebar {
  border-radius: 30px;
  cursor: pointer;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  z-index: 1000;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.page-header .toggle-sidebar i {
  color: #ffffff;
  font-size: 1.4rem;
}

.page-header .toggle-sidebar-fullscreen {
  border-radius: 30px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  min-width: 40px;
  margin: 0 10px 0 0;
  height: 40px;
  z-index: 1000;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.page-header .toggle-sidebar-fullscreen i {
  color: #ffffff;
  font-size: 1.4rem;
}

.page-header .sidebar-togglescreen {
  border-radius: 30px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  min-width: 40px;
  margin: 0 10px 0 0;
  height: 40px;
  z-index: 1000;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.page-header .sidebar-togglescreen i {
  color: #ffffff;
  font-size: 1.4rem;
}

@media screen and (max-width: 1024px) {
  .page-header .toggle-sidebar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .page-header .toggle-sidebar-fullscreen {
    display: none;
  }
  .page-header .sidebar-togglescreen {
    display: none;
  }
}

/************* 6.5 Welcome Note *************/
.welcome-note {
  font-size: 1.5rem;
  font-weight: 300;
  margin: 0;
}

.welcome-note span {
  color: #0078b9;
}

/************* 6.6 Search Container *************/
.search-container {
  margin: 0;
  padding: 0;
}

.search-container .input-group {
  position: relative;
}

.search-container .input-group .form-control {
  background: #ffffff;
  border: 0;
  border-radius: 30px !important;
  min-width: 240px;
  -webkit-box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
          box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
}

.search-container .input-group .form-control:focus {
  outline: none !important;
  border: 0;
  -webkit-box-shadow: 0 10px 10px rgba(0, 10, 10, 0.15);
          box-shadow: 0 10px 10px rgba(0, 10, 10, 0.15);
}

.search-container .input-group .form-control:focus .btn i {
  color: #EB3333;
}

.search-container .input-group .btn {
  position: absolute;
  right: 5px;
  top: 5px;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  z-index: 10;
}

.search-container .input-group .btn i {
  color: #13181e;
}

.search-container .input-group .btn:hover i {
  color: #EB3333;
}

@media screen and (max-width: 767px) {
  .search-container .input-group .form-control {
    min-width: 180px;
  }
}

/************* 6.7 Leads Dropdown *************/
.leads {
  margin: 0 0 0 1.5rem;
  background-color: #ffffff;
  border-radius: 30px;
  padding: .375rem 1.25rem;
  position: relative;
  min-height: 40px;
  font-size: .9rem;
  line-height: 1.5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
          box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
}

.leads .lead-details .count {
  color: #149865;
  font-weight: 700;
  margin: 0 2px;
}

.leads span.lead-icon {
  position: relative;
}

.leads span.lead-icon i {
  color: #dda50e;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.4rem;
  margin: 0 0 0 5px;
}

.leads span.lead-icon .dot {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 7px;
  height: 7px;
  border-radius: 30px;
  background: #149865;
}

.leads:hover {
  outline: none !important;
  border: 0;
  -webkit-box-shadow: 0 10px 10px rgba(0, 10, 10, 0.15);
          box-shadow: 0 10px 10px rgba(0, 10, 10, 0.15);
}

@media screen and (max-width: 1280px) {
  .leads {
    padding: .375rem 1rem;
  }
  .leads .lead-details {
    display: none;
  }
  .leads .lead-icon i {
    margin: 0;
  }
}

/************* 6.8 Header Ations *************/
.header-actions-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-left: auto;
}

.header-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-left: .725rem;
}

.header-actions > li > a {
  padding: 1rem .725rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.header-actions > li > a > i {
  font-size: 1.5rem;
  color: #13181e;
}

.header-actions > li > a img.flag-img {
  width: 24px;
  height: 24px;
  border-radius: 50px;
}

.header-actions > li .user-settings {
  padding: 0 0 0 .725rem;
  color: #13181e;
}

.header-actions > li .user-settings .avatar {
  position: relative;
  margin: 0;
  width: 48px;
  height: 48px;
}

.header-actions > li .user-settings .avatar > img {
  width: 48px;
  height: 48px;
  border-radius: 50px;
}

.header-actions > li .user-settings .avatar .status {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-radius: 10px;
}

.header-actions > li .user-settings span.user-name {
  margin-right: 8px;
  vertical-align: middle;
  display: inline-block;
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.header-actions > li:hover > a i, .header-actions > li:focus > a i {
  color: #13181e;
}

.header-actions > li:hover .dropdown-menu, .header-actions > li:focus .dropdown-menu {
  margin-top: 0;
  display: block;
}

@media (max-width: 576px) {
  .header-actions {
    margin-left: 0;
  }
  .header-actions > li > a.user-settings span.user-name {
    display: none;
  }
}

/************* 6.9 Header Profile Actions *************/
.header-profile-actions {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.header-profile-actions a {
  padding: 8px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: .925rem;
}

.header-profile-actions a:hover {
  background-color: rgba(0, 0, 0, 0.02);
  color: #0078b9;
}

/************* 6.10 Breadcrumb Container *************/
.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
}

.breadcrumb-link {
    font-size: 1.5rem;
    margin-right: 8px;
    color: #0545a5;
    margin-top:-10px;
}

.breadcrumb .breadcrumb-item {
    color: #13181e;
    font-weight: 400;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.breadcrumb .breadcrumb-item i {
  font-size: 2rem;
  margin-right: 15px;
  color: #0078b9;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #13181e;
  font-family: 'bootstrap-icons' !important;
  content: '\f285';
  font-size: 1.3rem;
  line-height: 1;
  vertical-align: middle;
}

.breadcrumb .breadcrumb-item a {
   color: #0545a5;
}

.breadcrumb .breadcrumb-item a:hover {
    color: #00897b;
    text-decoration: underline;
}

.breadcrumb .breadcrumb-active {
  color: #13181e;
}

@media screen and (max-width: 1024px) {
  .breadcrumb {
    margin-left: 15px;
  }
  .breadcrumb .breadcrumb-item i {
    font-size: 1.4rem;
    margin-right: 5px;
  }
  .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 768px) {
  .breadcrumb {
    margin-right: auto;
  }
}

/************* 6.11 Content Wrapper *************/
.content-wrapper-scroll {
  padding: 0;
}

.content-wrapper {
  padding: 0 14px 0 0;
  height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
}

@media (max-width: 576px) {
  .content-wrapper {
    height: calc(100vh - 180px);
    padding: 0 15px 0 15px;
  }
}

/************* 6.12 App Footer *************/
.app-footer {  
  font-size: .7rem;  
  margin: 0;
  margin-top: -30px;
  /* padding: 0 14px 0 24px; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.app-footer span {
  background-color: #ffffff;
  padding: 8px 30px;
  border-radius: 100px 100px 30px 30px;
}

@media (max-width: 576px) {
  .app-footer {
    padding: 15px 15px 0 15px;
  }
}

/************************************************
	************************************************
				7. Country Dropdown
	************************************************
************************************************/
.country-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.country-container a {
  margin: 10px 0 10px 0;
}

.country-container a img {
  width: 20px;
  height: 20px;
  border-radius: 100px;
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

.country-container a:hover img {
  opacity: 0.6;
}

/************************************************
	************************************************
				8. Components/Widgets
	************************************************
************************************************/
/************* 8.1 Button Icon *************/
.btn-icon {
  padding: .5rem .5rem !important;
}

.btn-icon i {
  margin: 0 !important;
}

/************* 8.2 Custom Button Group *************/
.custom-btn-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.custom-btn-group.flex-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.custom-btn-group.flex-end .btn {
  margin: .25rem 0 .25rem .25rem;
}

.custom-btn-group .btn {
  margin: .25rem;
}

/************* 8.3 Custom Icon Group *************/
.custom-icon-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.custom-icon-group.flex-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.custom-icon-group .btn {
  margin: .2rem;
}

.custom-icon-group .btn i {
  margin: 0;
}

/************* 8.4 Custom Icon Group *************/
.custom-link-group a {
  margin: 0 1rem;
}

/************* 8.4 Custom Badge Group *************/
.custom-badge-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.custom-badge-group.flex-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.custom-badge-group .badge {
  margin: .25rem;
}

/************* 8.5 Chart Heights *************/
.chart-height {
  position: relative;
  height: 250px;
}

.chart-height-md {
  position: relative;
  height: 220px;
}

.chart-height-sm {
  position: relative;
  height: 180px;
}

.chart-height-xl {
  position: relative;
  height: 300px;
}

.chart-height-xxl {
  position: relative;
  height: 420px;
}

.chart-height-m350 {
  position: relative;
  height: 350px;
}

.chart-height-m250 {
  position: relative;
  height: 320px;
}

.auto-align-graph .apexcharts-canvas {
  margin: 0 auto;
}

/************* 8.6 Card Heights *************/
.card-183 {
  min-height: 183px;
}

.card-320 {
  min-height: 320px;
}

.card-370 {
  min-height: 370px;
}

.card-390 {
  min-height: 390px;
}

.card-420 {
  min-height: 420px;
}

.card-450 {
  min-height: 450px;
}

.card-500 {
  min-height: 500px;
}

/************* 8.7 Number Stats *************/
.num-stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
}

.num-stats h3 {
  margin: 0 0 5px 0;
  font-weight: 700;
  line-height: 100%;
  color: #0078b9;
}

.num-stats h6 {
  font-size: .85rem;
  opacity: 0.7;
  line-height: 100%;
  font-weight: 400;
}

/************* 8.8 Notifications Container *************/
.num-stats2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.num-stats2 .num-icon {
  height: 75px;
  width: 75px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 0 7px 0;
  border-radius: 50px;
}

.num-stats2 .num-icon i {
  color: #ffffff;
  font-size: 1.8rem;
}

.num-stats2 .num-details h5 {
  margin: 0 0 5px 0;
  font-weight: normal;
}

.num-stats2 .num-details h3 {
  margin: 0;
}

/************* 8.9 Stats Tiles *************/
.stats-tile {
   padding: 10px 10px; 
  margin: 0 0 15px 0;
  border-radius: 8px;
  background: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
  -webkit-box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
          box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
}

.stats-tile .sale-icon {
  height: 60px;
  width: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 15px;
  text-align: center;
  border-radius: 50px;
}

.stats-tile .sale-icon i {
  font-size: 1.8rem;
  color: #ffffff;
}

.stats-tile .sale-icon-bdr {
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 15px;
  text-align: center;
  border-radius: 50px;
  border: 2px solid #0078b9;
}

.stats-tile .sale-icon-bdr i {
  font-size: 1.2rem;
  color: #0078b9;
}

.stats-tile .sale-icon-bdr.green {
  border: 2px solid #149865;
}

.stats-tile .sale-icon-bdr.green i {
  color: #149865;
}

.stats-tile .sale-details h3 {
  margin: 0;
}

.stats-tile .sale-details h5 {
  margin: 0 0 10px 0;
}

.stats-tile .sale-details p {
  margin: 0;
}

.stats-tile .sale-details p.growth {
  margin: 5px 0 0 0;
}

.stats-tile .sale-graph {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -15px;
}

.stats-tile.justify-center {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
}

.stats-tile.justify-center .sale-icon {
  margin: 0 0 20px 0;
}

.stats-tile2-container {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.stats-tile2 {
  padding: 1rem .5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.stats-tile2 .sale-icon {
  margin-right: 15px;
}

.stats-tile2 .sale-icon i {
  font-size: 2rem;
}

.w250{
  width: 250px;
}

.stats-tile2 .sale-details h5 {
  margin: 0 0 3px 0;
  color: #6c7788;
  font-weight: 400;
}

.stats-tile2 .sale-details p {
  margin: 0;
  font-weight: 600;
}

/******** 8.10 Reports Summary ********/
.reports-summary {
  position: relative;
  padding: 1.25rem 1rem;
}

.reports-summary .reports-summary-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 0 1.5rem 0;
}

.reports-summary .reports-summary-block h5 {
  margin: 0;
}

.reports-summary .reports-summary-block h6 {
  margin: 0 0 10px 0;
  font-weight: 400;
  color: #6c7788;
}

/******** 8.11 Day Selection ********/
.graph-day-selection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.graph-day-selection .btn {
  font-size: .875rem;
  padding: .2rem .8rem;
  border: 0;
  background: transparent;
  border-radius: 30px;
}

.graph-day-selection .btn.active {
  background: #149865;
  color: #ffffff;
}

.graph-day-selection a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #0078b9;
  font-size: .825rem;
  font-weight: 600;
  padding: .2rem .8rem;
  line-height: 1.5;
  background: #149865;
  border-radius: 30px;
}

.graph-day-selection a:hover {
  color: #0078b9;
}

.graph-day-selection a.reportrange {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #0078b9;
  font-weight: 600;
}

.graph-day-selection a.reportrange span.range-text {
  margin: 0 5px 0 5px;
}

/************* 8.12 Activity Container *************/
.activity-container {
  margin: 30px 0 0 0;
}

.activity-container .activity-block {
  margin: 0 0 30px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
}

.activity-container .activity-block:before {
  content: '';
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 29px;
  top: 0;
  bottom: 0;
  z-index: 0;
}

.activity-container .activity-block .activity-user {
  margin: 0 20px 0 0;
  z-index: 1;
}

.activity-container .activity-block .activity-user img {
  border-radius: 100px;
  width: 60px;
  height: 60px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.activity-container .activity-block .activity-details h4 {
  margin: 0 0 5px 0;
  font-weight: bold;
  color: #000000;
  font-size: 1rem;
}

.activity-container .activity-block .activity-details h5 {
  margin: 0 0 3px 0;
  font-weight: normal;
}

.activity-container .activity-block .activity-details p {
  margin: 0 0 5px 0;
  color: #6c7788;
}

.activity-container .activity-block .activity-details span.badge {
  margin: 0;
  padding: 7px 10px;
  min-width: 80px;
}

.activity-container .activity-block:last-child {
  margin: 0;
}

/************* 8.13 Transactions Container *************/
.transactions-container {
  margin: 30px 0 0 0;
}

.transactions-container .transaction-block {
  margin: 0 0 30px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  position: relative;
}

.transactions-container .transaction-block .transaction-icon {
  margin: 0 20px 0 0;
  z-index: 1;
  border-radius: 8px;
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.transactions-container .transaction-block .transaction-icon i {
  font-size: 1.8rem;
  color: #ffffff;
}

.transactions-container .transaction-block .transaction-details h4 {
  margin: 0 0 5px 0;
  font-weight: bold;
  color: #000000;
  font-size: 1rem;
}

.transactions-container .transaction-block .transaction-details p {
  margin: 0;
  line-height: 100%;
  color: #6c7788;
}

.transactions-container .transaction-block .transaction-amount {
  margin-left: auto;
  font-size: 1.2rem;
  font-weight: 700;
}

.transactions-container .transaction-block:last-child {
  margin: 0;
}

/************* 8.14 Task List *************/
.task-list-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding: 10px 0 0 0;
  margin: 10px 0 10px 0;
  border-top: solid 1px #13181e;
}

.task-list-container .task-list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
}

.task-list-container .task-list-item .task-icon {
  border-radius: 50px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 60px;
  width: 60px;
  margin-right: 10px;
}

.task-list-container .task-list-item .task-icon i {
  font-size: 1.8rem;
  color: #ffffff;
}

.task-list-container .task-list-item .task-info {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.task-list-container .task-list-item .task-info h5.task-title {
  margin: 0;
  font-weight: 700;
}

.task-list-container .task-list-item .task-info p.amount-spend {
  font-size: .925rem;
  margin: 0;
  color: #6c7788;
}

/************* 8.15 User Messages *************/
ul.user-messages {
  margin: 30px 0 0 0;
}

ul.user-messages li {
  margin-bottom: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

ul.user-messages li .customer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 60px;
  height: 60px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: #ffffff;
  font-size: 1rem;
  border-radius: 30px;
}

ul.user-messages li .delivery-details {
  margin-left: 20px;
}

ul.user-messages li .delivery-details .badge {
  margin: 0 0 15px 0;
}

ul.user-messages li .delivery-details h5 {
  margin: 0 0 5px 0;
}

ul.user-messages li .delivery-details p {
  margin: 0;
  line-height: 160%;
  color: #6c7788;
}

/************* 8.16 Info Stats *************/
.info-stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 1rem 0 1rem 0;
}

.info-stats i {
  margin: 0 0 .7rem 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.info-stats img.stats-icon {
  width: 30px;
  height: 30px;
  border-radius: 50px;
  margin: 0 0 .7rem 0;
}

.info-stats h5 {
  color: #6c7788;
  font-weight: 400;
}

.info-stats h3 {
  margin: 0;
  font-weight: 700;
  color: #0078b9;
}

/************* 8.17 Income Stats *************/
.income-stats-container {
  margin: 30px 0 0 0;
}

.income-stats-container .income-stats {
  margin: 0 0 10px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.income-stats-container .income-stats .income-graph {
  width: 100px;
  height: 100px;
  margin: 0 .5rem 0 0;
}

.income-stats-container .income-stats .income-graph .circliful {
  margin: 0;
}

.income-stats-container .income-stats .income-info h3 {
  margin: 0;
  font-weight: 600;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.income-stats-container .income-stats .income-info h3 i {
  font-size: 1.3rem;
  margin-left: .3rem;
}

.income-stats-container .income-stats .income-info p {
  color: #6c7788;
  margin: 0;
}

.income-stats-container .income-stats .income-high-low {
  margin: 0 0 0 auto;
  color: #6c7788;
  font-weight: 700;
}

.income-stats-container .income-stats .income-high-low .bi {
  font-size: 1.2rem;
}

/************* 8.18 Tickets Container *************/
.tickets-container {
  margin: 30px 0 0 0;
}

.tickets-container li {
  margin: 0 0 20px 0;
  padding-bottom: .5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.tickets-container li img.avatar {
  border-radius: 30px;
  width: 60px;
  height: 60px;
  margin: 0 20px 0 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.tickets-container li .ticket-details {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.tickets-container li .ticket-details h4 {
  margin: 0 0 7px 0;
  font-weight: 700;
  color: #000000;
  font-size: 1rem;
}

.tickets-container li .ticket-details h5 {
  margin: 0 0 7px 0;
  font-weight: normal;
  color: #6c7788;
  line-height: 150%;
}

.tickets-container li .ticket-details p.ticket-time {
  margin: 0;
  font-weight: normal;
  color: #6c7788;
}

.tickets-container li .ticket-status {
  margin-left: auto;
}

.tickets-container li .ticket-status .badge {
  min-width: 80px;
}

/************* 8.19 Task Stats *************/
.task-stats-container {
  border-radius: 8px;
  background: #ffffff;
  padding: 25px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 24px;
  -webkit-box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
          box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
}

.task-stats-container .task-stats .task-title {
  font-size: 1.2rem;
  margin: 3px 0;
  font-weight: 400;
  color: #6c7788;
  line-height: 150%;
}

.task-stats-container .task-stats .task-count {
  font-size: 1.8rem;
  font-weight: 700;
  color: #13181e;
}

.task-stats-container .task-stats-graph {
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/************* 8.20 Meetings Container *************/
.meetings-container {
  margin: 0;
}

.meetings-container li {
  margin: 0 0 15px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 15px;
  border-radius: 6px;
  background-color: #b4d0fa;
}

.meetings-container li img.avatar {
  border-radius: 30px;
  width: 60px;
  height: 60px;
  margin: 0 15px 0 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.meetings-container li .meeting-details {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.meetings-container li .meeting-details h6 {
  margin: 0 0 .5rem 0;
  font-size: 1rem;
}

.meetings-container li .meeting-details .meeting-time {
  font-size: .875rem;
  color: #6c7788;
}

.meetings-container li .meeting-more {
  margin-left: auto;
}

.meetings-container li .meeting-more i {
  font-size: 1.8rem;
}

.meetings-container li:last-child {
  margin: 0;
}


/************* 8.20 Meetings Container Archivr *************/
.meetings-container-archive {
    margin: 0;
}

    .meetings-container-archive li {
        margin: 0 0 15px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 10px 15px;
        border-radius: 6px;
        background-color: #E6EAFF;
    }

        .meetings-container-archive li img.avatar {
            border-radius: 30px;
            width: 60px;
            height: 60px;
            margin: 0 15px 0 0;
            -ms-flex-negative: 0;
            flex-shrink: 0;
        }

        .meetings-container-archive li .meeting-details {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

            .meetings-container-archive li .meeting-details h6 {
                margin: 0 0 .5rem 0;
                font-size: 1rem;
            }

            .meetings-container-archive li .meeting-details .meeting-time {
                font-size: .875rem;
                color: #6c7788;
            }

        .meetings-container-archive li .meeting-more {
            margin-left: auto;
        }

            .meetings-container-archive li .meeting-more i {
                font-size: 1.8rem;
            }

        .meetings-container-archive li:last-child {
            margin: 0;
        }


/************* 8.21 Nav Tabs *************/

/************* 8.20 Process Setting Container *************/
.processsetting-container {
  margin: 0;
}

.processsetting-container li {
  margin: 0 0 15px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 15px;
  border-radius: 6px;
  background-color: #b4d0fa;
}

.processsetting-container li img.avatar {
  border-radius: 30px;
  width: 60px;
  height: 60px;
  margin: 0 15px 0 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.processsetting-container li .meeting-details {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.processsetting-container li .meeting-details h6 {
  margin: 0 0 .5rem 0;
  font-size: 1rem;
}

.processsetting-container li .meeting-details .meeting-time {
  font-size: .875rem;
  color: #6c7788;
}

.processsetting-container li .meeting-more {
  margin-left: auto;
}

.processsetting-container li .meeting-more i {
  font-size: 1.8rem;
}

.processsetting-container li:last-child {
  margin: 0;
}

/************* 8.21 Nav Tabs - DESIGN MODERNE & SOFT *************/

.custom-tabs-container .nav-tabs {
  margin: 0 -20px;
  border-bottom: 2px solid #f0f1f7;
  background: transparent;
  gap: 8px;
  padding: 0 20px;
}

.custom-tabs-container .nav-tabs .nav-link {
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 12px 12px 0 0;
  color: #6c7788;
  font-weight: 500;
  position: relative;
  background: transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: -2px;
  overflow: hidden;
}

/* Effet hover soft */
.custom-tabs-container .nav-tabs .nav-link:hover:not(.active) {
  color: #4a5568;
  background: rgba(100, 116, 139, 0.05);
  transform: translateY(-2px);
}

/* Onglet actif - Style moderne avec bordure inférieure */
.custom-tabs-container .nav-tabs .nav-link.active {
  color: #0078b9;
  font-weight: 600;
  background: linear-gradient(to bottom, rgba(0, 120, 185, 0.05) 0%, rgba(255, 255, 255, 0.95) 40%);
  backdrop-filter: blur(10px);
  border: none;
  box-shadow:
    0 -2px 8px rgba(0, 120, 185, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04);
  border-bottom: 3px solid #0078b9;
}

/* Animation d'entrée pour l'onglet actif */
.custom-tabs-container .nav-tabs .nav-link.active::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0078b9, #00a8e8);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Badges modernes et soft */
.custom-tabs-container .nav-tabs .nav-link .badge {
  border-radius: 20px;
  margin-left: 8px;
  height: 24px;
  line-height: 24px;
  padding: 0 10px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(108, 119, 136, 0.12);
  color: #6c7788;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
}

/* Badge dans l'onglet actif */
.custom-tabs-container .nav-tabs .nav-link.active .badge {
  background: linear-gradient(135deg, #0078b9 0%, #00a8e8 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 120, 185, 0.25);
  transform: scale(1.05);
}

/* Badge au hover */
.custom-tabs-container .nav-tabs .nav-link:hover .badge {
  transform: scale(1.08);
  background: rgba(108, 119, 136, 0.18);
}

/* Icônes avec espacement amélioré */
.custom-tabs-container .nav-tabs .nav-link i {
  font-size: 1.2rem;
  margin-right: 8px;
  vertical-align: middle;
  transition: transform 0.3s ease;
  display: inline-block;
}

/* Animation de l'icône au hover */
.custom-tabs-container .nav-tabs .nav-link:hover i {
  transform: scale(1.1);
}

/* Icône dans l'onglet actif */
.custom-tabs-container .nav-tabs .nav-link.active i {
  color: #0078b9;
  transform: scale(1.05);
}

.custom-tabs-container .nav-tabs .nav-item:first-child {
  margin-left: 20px;
}

/* Contenu des onglets avec animation d'apparition */
.custom-tabs-container .tab-content {
  padding: 0.5rem 0 0 0;
  animation: fadeInUp 0.4s ease-out;
}

.custom-tabs-container .tab-pane {
  /* Prépare l'animation pour chaque onglet */
  animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation optionnelle pour les lignes du tableau (stagger effect) */
.custom-tabs-container .table tbody tr {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Espacement mobile - Responsive */
@media screen and (max-width: 992px) {
  .custom-tabs-container .nav-tabs {
    gap: 4px;
    padding: 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .custom-tabs-container .nav-tabs .nav-link {
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  .custom-tabs-container .nav-tabs .nav-link i {
    font-size: 1rem;
    margin-right: 5px;
  }

  .custom-tabs-container .nav-tabs .nav-item:first-child {
    margin-left: 10px;
  }
}

/* Cache la scrollbar mais garde la fonctionnalité */
.custom-tabs-container .nav-tabs::-webkit-scrollbar {
  height: 3px;
}

.custom-tabs-container .nav-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.custom-tabs-container .nav-tabs::-webkit-scrollbar-thumb {
  background: rgba(0, 120, 185, 0.2);
  border-radius: 3px;
}

.custom-tabs-container .nav-tabs::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 120, 185, 0.4);
}

/************* 8.21 Stacked Images *************/
.stacked-images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.stacked-images img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  border-radius: 30px;
  overflow: hidden;
  margin-right: -10px;
  margin-right: -10px;
  border: 2px solid #ffffff;
  letter-spacing: .03rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.stacked-images img.sm {
  width: 36px;
  height: 36px;
}

.stacked-images .plus {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  border-radius: 30px;
  overflow: hidden;
  margin-right: -10px;
  margin-right: -10px;
  border: 2px solid #ffffff;
  background: #0078b9;
  letter-spacing: .03rem;
  font-weight: 700;
  font-size: .9rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.stacked-images .plus.sm {
  width: 36px;
  height: 36px;
  color: #ffffff;
}

/************* 8.22 Orders *************/
ul.recent-orders {
  margin-top: 20px;
}

ul.recent-orders li {
  margin-bottom: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

ul.recent-orders li .order-img {
  position: relative;
}

ul.recent-orders li .order-img img {
  height: 90px;
  border-radius: 8px;
}

ul.recent-orders li .order-img .badge {
  position: absolute;
  bottom: 10px;
  left: 0px;
}

ul.recent-orders li .order-details {
  margin-left: 15px;
}

ul.recent-orders li .order-details h5.order-title {
  margin: 0 0 7px 0;
}

ul.recent-orders li .order-details p.order-desc {
  line-height: 150%;
  color: #6c7788;
}

ul.recent-orders li .order-details p.order-revenue {
  color: #6c7788;
}

ul.recent-orders li .order-details p.order-revenue span {
  color: #0078b9;
}

/************* 8.23 Logs *************/
.logs {
  margin: 0;
}

.logs .log-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 12px 0;
}

.logs .log-list .log-dot {
  width: 30px;
  height: 30px;
  padding-top: 3px;
  font-weight: bold;
  background: #0078b9;
  border-radius: 30px;
  margin: 0 12px 0 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.logs .log-list .log-dot15 {
  width: 15px;
  height: 15px;
  padding-top: 3px;
  font-weight: bold;
  background: #0078b9;
  border-radius: 15px;
  margin: 0 12px 0 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.logs .log-list .log-dot.green {
  background: #149865;
}

.logs .log-list .log-dot.red {
  background: #EB3333;
}

.logs .log-list .log-dot.yellow {
  background: #dda50e;
}

.logs .log-list .log-title {
  font-size: 1rem;
}

.logs .log-list .log-time {
  margin: 0 0 0 auto;
  color: #6c7788;
}

/************* 8.24 Global Slaes *************/
.global-sales {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.global-sales h3 {
  margin: 0 0 15px 0;
}

.global-sales h3 .icon {
  font-size: 3.5rem;
  color: #149865;
  margin: 0 10px 0 0;
}

.global-sales p {
  font-size: 1rem;
}

/************* 8.25 Social Tile *************/
.social-tile {
  padding: 1rem 1rem;
  margin: 0 0 24px 0;
  border-radius: 25px;
  background: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  position: relative;
  -webkit-box-shadow: 0 20px 20px rgba(0, 10, 10, 0.1);
          box-shadow: 0 20px 20px rgba(0, 10, 10, 0.1);
}

.social-tile .social-icon {
  height: 80px;
  width: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 15px;
  text-align: center;
  border-radius: 100px;
  background-color: #e6eaff;
}

.social-tile .social-icon i {
  font-size: 2.5rem;
  color: #0078b9;
}

.social-tile .social-details h1 {
  margin: 15px 0 15px 0;
  font-weight: 300;
  color: #6c7788;
}

.social-tile .social-details h5 {
  margin: 0 0 20px 0;
}

.social-tile .social-details p.growth {
  margin: 0;
  padding: 3px 15px;
  border-radius: 30px;
}

.social-tile .social-details p.growth.high {
  background-color: #edfff9;
  color: #149865;
}

.social-tile .social-details p.growth.low {
  background-color: #fdeded;
  color: #EB3333;
}

/************* 8.26 Databar Container *************/
.databar-container {
  margin: 0;
}

.databar-container .databar-header {
  margin: 10px 0 10px 0;
}

.databar-container .databar-header img {
  width: 30px;
  height: 30px;
  margin: 0 0 15px 0;
}

.databar-container .databar-header h4 {
  font-weight: 400;
}

.databar-container .databar-body {
  margin: 0;
}

/************* 8.27 Weather widget *************/
.weather-widget {
  margin-bottom: 24px;
  background-position: bottom center;
  color: #ffffff;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: right;
}

.weather-widget.rainy {
  background: url("../img/vivo-rainy.jpg") no-repeat;
  background-size: cover;
}

.weather-widget.sunny {
  background: url("../img/vivo-sunny.jpg") no-repeat;
  background-size: cover;
}

.weather-widget.cloudy {
  background: url("../img/vivo-cloudy.jpg") no-repeat;
  background-size: cover;
}

.weather-widget h2 {
  margin: 0 0 10px 0;
}

.weather-widget h4 {
  margin: 0 0 10px 0;
}

.weather-widget h6 {
  margin: 0 0 10px 0;
}

@media screen and (max-width: 1280px) {
  .weather-widget {
    padding: 1.5rem 1rem;
  }
}

/******** 8.28 Ratings ********/
.rating-block {
  width: 70px !important;
  line-height: 100%;
}

.rating-block img {
  width: 17px;
  height: 17px;
}

/******** 8.29 Product Cards ********/
.product-card {
  background: #ffffff;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 4px;
  margin-bottom: 24px;
  -webkit-box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
          box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
}

.product-card .product-card-body {
  padding: 1rem 1rem;
  position: relative;
}

.product-card .product-card-body .product-title {
  margin-bottom: .7rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 100%;
}

.product-card .product-card-body .product-price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-size: .9rem;
}

.product-card .product-card-body .product-price .disount-price {
  color: #13181e;
  margin-right: 7px;
}

.product-card .product-card-body .product-price .actucal-price {
  color: #6c7788;
  margin-right: 7px;
  text-decoration: line-through;
}

.product-card .product-card-body .product-price .off-price {
  color: #149865;
}

.product-card .product-card-body .product-rating {
  margin: 8px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.product-card .product-card-body .product-rating .rating-stars {
  width: 120px !important;
  line-height: 100%;
}

.product-card .product-card-body .product-rating .rating-stars img {
  width: 18px;
  height: 18px;
}

.product-card .product-card-body .product-rating .total-ratings {
  font-size: .9rem;
  color: #6c7788;
}

.product-card .product-card-body .product-description {
  min-height: 50px;
  font-size: .9rem;
  margin: 0 0 10px 0;
  color: #6c7788;
  line-height: 150%;
}

.product-card .product-card-body .product-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.product-card .product-card-body .product-actions .btn {
  margin-right: 5px;
}

.product-card .product-card-img-top {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
}

/******** 8.30 Product Cards ********/
.product-added-card {
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  margin-bottom: 24px;
  padding: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.product-added-card .product-added-card-body {
  padding: 1rem;
  position: relative;
}

.product-added-card .product-added-card-body .product-added-title {
  margin-bottom: 15px;
  font-size: 1rem;
  line-height: 100%;
}

.product-added-card .product-added-card-body .product-added-price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-size: 1.5rem;
  margin: 0 0 10px 0;
  font-weight: 700;
  color: #149865;
}

.product-added-card .product-added-card-body .product-added-description {
  font-size: .9rem;
  margin: 0 0 20px 0;
  color: #6c7788;
  line-height: 150%;
}

.product-added-card .product-added-card-body .product-added-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.product-added-card .product-added-card-body .product-added-actions .btn {
  margin-right: 5px;
}

.product-added-card .product-added-img {
  border-radius: 5px;
  max-height: 200px;
  margin: 0 10px 0 0;
}

.sub-total-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-top: 1px solid #e1e1e1;
  margin-top: 10px;
  padding-top: 20px;
}

.sub-total-container .total {
  margin: 0 0 20px 0;
  font-size: 1.2rem;
  font-weight: 700;
}

/******** 8.31 Product Checkout List ********/
.product-list-card {
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  margin-bottom: 24px;
  padding: 1rem;
}

.product-list-card h5 {
  margin: 0 0 20px 0;
}

.product-list-card .product-list-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}

.product-list-card .product-list-block .product-list-img {
  border-radius: 5px;
  max-height: 70px;
  margin: 0 10px 0 0;
}

.product-list-card .product-list-block .product-list-details .product-list-title {
  margin-bottom: 10px;
  font-size: .9rem;
  line-height: 100%;
}

.product-list-card .product-list-block .product-list-details .product-list-price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-size: 1.2rem;
  line-height: 100%;
  margin: 0;
  font-weight: 700;
  color: #149865;
}

.product-list-card .product-list-block:last-child {
  margin: 0;
}

/******** 8.32 Edit Customer Status ********/
.customer-card {
  padding: 15px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.customer-card h6 {
  font-size: .85rem;
  margin: 0 0 8px 0;
  font-weight: normal;
}

.customer-card h5 {
  font-size: .9rem;
  margin: 0;
  color: #6c7788;
}

/******** 8.33 Add Product ********/
.card-border {
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 1rem;
  margin: 0 0 24px 0;
}

.card-border .card-border-title {
  font-size: 1.1rem;
  margin: 0 0 30px 0;
  font-weight: bold;
  color: #13181e;
}

.card-border .card-border-body {
  padding: 0;
}

/******** 8.34 Create Invoice Wrapper ********/
.create-invoice-wrapper {
  background: #fdf1e3;
  padding: 15px;
  margin: 0 0 15px 0;
  border-radius: 8px;
}

/******** 8.35 Invoice List ********/
.invoice-table td {
  vertical-align: middle;
}

.invoice-table .customer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.invoice-table .customer img.user-avatar {
  width: 60px;
  height: 60px;
  margin-right: 15px;
  border-radius: 100px;
}

.invoice-table .customer .name {
  font-size: .9rem;
  margin: 0 0 5px 0;
}

.invoice-table .details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.invoice-table .details h5 {
  margin: 0 0 5px 0;
  font-weight: 300;
}

.invoice-table .details h6 {
  font-weight: 300;
}

.invoice-table .badge {
  padding: 10px 10px;
  border-radius: 20px;
  min-width: 80px;
}

/******** 8.36 Create Invoice ********/
.invoice-container {
  padding: 0;
}

.invoice-container .invoice-header .invoice-logo {
  margin: .8rem 0 1rem 0;
  display: inline-block;
}

.invoice-container .invoice-header .invoice-logo img {
  width: 50px;
  height: 50px;
}

.invoice-container .invoice-header address {
  font-size: .9rem;
  color: #13181e;
  margin: 0;
  text-align: right;
  line-height: 180%;
}

.invoice-container .invoice-details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 1rem 0 .5rem 0;
  padding: 1rem;
  line-height: 180%;
  background: #fdf1e3;
}

.invoice-container .invoice-details .invoice-num {
  text-align: right;
  margin-left: auto;
  font-size: .8rem;
}

.invoice-container .invoice-body {
  padding: 3rem 0;
}

.invoice-container .invoice-footer {
  text-align: center;
  font-size: .7rem;
}

.invoice-container .invoice-footer span {
  display: inline-block;
  background: #ffffff;
  padding: 3px 10px;
  border-radius: 30px;
}

/******** 8.37 Form Actions Footer ********/
.form-actions-footer {
  background: #edf0f5;
  border-radius: 5px;
  padding: 15px;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

.form-encadrer {
  background: #edf0f5;
  border-radius: 5px;
  padding: 10px;
  width: 100%;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: left;
}

.form-actions-bouton { 
  
  padding: 15px;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

.form-actions-footer .btn {
  margin: 0 0 0 10px;
}

.form-section-title {
  background: #edf0f5;
  border-radius: 5px;
  padding: 15px;
  margin: 10px 0 15px 0;
  font-size: 1rem;
  font-weight: 600;
}

.form-planning-title {
  background: #edf0f5;
  border-radius: 5px;
  padding: 10px;
  margin: 8px 0 5px 0;
  font-size: 0.9rem;
  font-weight: 600;
  height: 40px;
}

.form-planning-title-total {
  background: #0078b9;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  margin: 8px 0 5px 0;
  font-size: 0.9rem;
  font-weight: 600;
  height: 40px;
}
.form-planning-value-total {
  background: #0078b9;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  margin: 8px 0 5px 0;
  font-size: 1.1rem;
  font-weight: 600;
  height: 40px;
  text-align: center;
  cursor: pointer;
}

.form-planning-value {
  background: #f1f1f1;
  color: #197499;
  border-radius: 5px;
  padding: 10px;
  margin: 8px 0 5px 0;
  font-size: 0.9rem;
  font-weight: 600;
  height: 40px;
  text-align: center;
  cursor: pointer;
}
.form-planning-value:hover {
  background: #ddf2fb;
  border-radius: 5px;
  padding: 10px;
  margin: 8px 0 5px 0;
  font-size: 0.9rem;
  font-weight: 600;
  height: 40px;
  text-align: center;
  cursor: pointer;
}
.card-planning-title {
  font-size: 1rem;
  margin: 0;
  color: #13181e;
  font-weight: 600;
  line-height: 150%;
  text-align: center;
}

.value-vert{
  color: #0a8154;
  font-size: 1.1rem;
}

.value-orange{
  color: #dba905;
  font-size: 1.1rem;
}
.value-rouge{
  color: #ff0404;
  font-size: 1.1rem;
}


/******** 8.38 Icons Container ********/
.icons-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[8];
      grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 100px;
  -webkit-column-gap: 15px;
          column-gap: 15px;
  row-gap: 1em;
  text-align: center;
}

.icons-container .icon {
  border-radius: 5px;
  background: #F3F2F7;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.icons-container .iconf {
  border-radius: 5px;
  background: #ffffff;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.icons-container .iconf:hover {
  border-radius: 5px;
  background: #f2f2f2;
  font-weight: bold;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.icons-container .icon i {
  font-size: 2rem;
}

.icons-container .icon:hover {
  background: #edebf3;
}

/******** 8.39 Sales Stats ********/
.sales-stats-container {
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 1rem;
}

ul.sales-stats li {
  margin-bottom: 15px;
}

ul.sales-stats li p {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

ul.sales-stats li p span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

ul.sales-stats li p span i {
  font-size: 16px;
  margin-right: 10px;
}

ul.sales-stats li p span small {
  margin-left: 10px;
}

/******** 8.40 Monthly Stats ********/
.monthly-stats {
  text-align: center;
}

.monthly-stats h5 {
  margin: 15px 20px 35px 20px;
  line-height: 150%;
  font-weight: 400;
}

.monthly-stats .avg-block {
  margin-bottom: 35px;
}

.monthly-stats .avg-block h3.avg-total {
  margin: 0;
}

.monthly-stats .avg-block h6.avg-label {
  font-weight: 400;
  margin: 0;
  color: #6c7788;
}

/******** 8.41 Chart Notify ********/
.chart-notify {
  position: absolute;
  z-index: 100;
}

.chart-notify.tr {
  top: 20px;
  right: 20px;
}

.chart-notify.tl {
  top: 20px;
  left: 20px;
}

.chart-notify.bl {
  bottom: 20px;
  left: 20px;
}

.chart-notify.br {
  bottom: 20px;
  right: 20px;
}

.chart-notify a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50px;
  width: 40px;
  height: 40px;
}

.chart-notify a i {
  font-size: 1.2rem;
  color: #ffffff;
}

/******** 8.42 Vertical line ********/
.vs, .or {
  margin: auto;
  width: 0;
  text-align: center;
  position: relative;
}

.vs:before, .or:before {
  position: absolute;
  background: #e1e1e1;
  width: 1px;
  height: 150px;
  content: "";
  top: 50%;
  left: 0;
  margin-top: -75px;
}

.vs:after, .or:after {
  position: absolute;
  content: "vs";
  border-radius: 100px;
  width: 36px;
  height: 36px;
  background: #0078b9;
  top: 50%;
  left: 0;
  margin-left: -18px;
  margin-top: -18px;
  color: #ffffff;
  line-height: 36px;
  text-align: center;
}

.or:after {
  content: "or";
}

/************************************************
	************************************************
					9. Plugins
	************************************************
************************************************/
/******** 9.1 Overlay Scroll ********/
.sidebarMenuScroll {
  height: 100%;
}

.scroll500 {
  height: 500px;
}

.scroll400 {
  height: 400px !important;
}

.scroll370 {
  height: 370px;
}

.scroll300 {
  height: 300px;
}

.scroll250 {
  height: 250px;
}

.scroll240 {
  height: 240px;
}

.scroll206 {
  height: 206px;
}

.scrollA10 {
  height: auto;
  min-height: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.scroll150 {
  height: 150px;
}

.scroll100 {
  height: 100px;
}

.scroll50 {
  height: 50px;
}
/******** 9.2 DropZone ********/
#dropzone {
  margin: 0;
  min-width: 240px;
}

.dropzone {
  border: 2px dashed #c3cbd6 !important;
  border-radius: 6px;
  background: #ffffff !important;
  min-height: 250px !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.dropzone .dz-message {
  font-weight: 700;
  text-align: center;
  margin: 0 auto !important;
}

.dropzone .dz-message .note {
  font-size: .9rem;
  display: block;
  margin-top: 1rem;
  color: #13181e !important;
}

.dropzone .dz-message .dz-button {
  background: transparent;
  color: #13181e !important;
  font-size: 1.5rem !important;
  border: 0;
}

#dropzone-sm .dropzone {
  min-height: 120px !important;
}

#dropzone-sm .dropzone .dz-button {
  font-size: 1rem !important;
}

/******** 9.3 Credit Card ********/
#creditCardType {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

#creditCardType .credit-card {
  margin: 5px 5px 0 0;
  display: inline-block;
}

#creditCardType .credit-card img {
  max-width: 36px;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

#creditCardType .credit-card.highlight img {
  -webkit-filter: grayscale(10%);
          filter: grayscale(10%);
}

/******** 9.4 jVector Maps ********/
.jvectormap-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
}

.jvectormap-tip {
  position: absolute;
  display: none;
  border-radius: 0px;
  background: #000000;
  color: #ffffff;
  font-size: .75rem;
  padding: 6px 12px;
}

@-webkit-keyframes showHideDot {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes showHideDot {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.jvectormap-marker {
  opacity: 0;
  -webkit-animation: showHideDot 1.5s ease-in-out infinite;
  animation: showHideDot 1.5s ease-in-out infinite;
}

/******** 9.5 Apex Graphs ********/
.apex-hide-lines .apexcharts-xaxis {
  display: none;
}

.apex-hide-lines .apexcharts-grid {
  display: none;
}

.apex-dark-legend .apexcharts-legend-text {
  color: #13181e !important;
}

.apex-dark-legend .apexcharts-xaxis-label {
  fill: #13181e !important;
}

/************************************************
	************************************************
						10. Pages
	************************************************
************************************************/
/************* 10.1 Login *************/
.login-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
}

.login-box {
  padding: 30px 20px 30px 20px;
  margin: auto;
  width: 420px;
  min-height: 320px;
  border-radius: 30px;
  position: relative;
  -webkit-box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
          box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
  background: #ffffff;
  text-align: center;
}

.login-box .login-form .login-logo {
  margin: 0 0 10px 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
          box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
  background: #e7e8fd;
  padding: 15px;
  width: 100px;
  min-height: 80px;
  border-radius: 80px;
  text-align: center;
}

.login-icon{
    height: 100px;
    width: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-right: 15px;
    text-align: center;
    border-radius: 80px;
    -webkit-box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
          box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
  background: #e7e8fd;
  text-align: center;
  margin: 0 0 10px 0;
}
.iconsize80{
  font-size: 5.5rem;
  color: #27aae0;
}

.login-logo-img {
  width: 60px;
  height: 60px;
}

.login-box .login-form .login-logo img {
  width: 70px;
  height: 70px;
}

.login-box .login-form .login-welcome {
  font-size: 1rem;
  line-height: 24px;
  margin: 0 0 30px 0;
}

.login-novtext{
  padding: 0 0px 0px 30px;
}
.login-novtext-title{
  margin: 40px 0 20px 0;
  color: #000000;
}
.login-novtext-detail{
  font-size: 1.5rem;
  line-height: 34px;
  margin: 0 0 30px 0;
}

.login-box .login-form .login-form-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 0 15px 0;
}

.login-box .login-form .btn {
  border-radius: 50px;
  background: #ffffff;
  -webkit-box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
          box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
  border: 1px solid #e1e1e1;
  padding: 3px 15px 3px 3px;
  line-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: .875rem;
  margin-left: 10px;
}

.login-box .login-form .btn .icon {
  border-radius: 50px;
  width: 30px;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 7px 0 0;
}

.login-box .login-form .btn .icon i {
  margin: 0;
  font-size: 1rem;
  color: #ffffff;
}

.login-box .login-form .btn img.login-icon {
  width: 30px;
  height: 30px;
  margin: 0 5px 0 0;
}

.login-box .login-form a.btn-link {
  font-size: .875rem;
  color: #0078b9;
  text-decoration: none;
  border: 0;
  background: transparent;
  padding: 4px 3px 4px 3px;
}

.login-box .login-form .additional-link {
  font-size: .875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #6c7788;
}

.login-box .login-form .additional-link a {
  color: #0078b9;
  border-bottom: 1px dashed;
  margin-left: 10px;
}

.login-box .login-form .login-form-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 20px 0 0 0;
  padding: 20px 0 0 0;
}

@media (max-width: 576px) {
  .login-box {
    padding: 30px 20px 30px 20px;
    width: auto;
  }
}

/******** 10.2 Maintenance Screen ********/
.maintenance-page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #ffffff;
}

.maintenance-page::before {
  content: '';
  background: none;
}

.maintenance-message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  text-align: center;
  color: #0078b9;
  position: relative;
  z-index: 100;
}

.maintenance-message .message-title-block {
  padding: 20px;
  border: 3px solid #0078b9;
  margin-bottom: 20px;
  border-radius: 10px;
}

.maintenance-message h1 {
  font-size: 3rem;
  margin: 0 0 1rem 0;
  line-height: 100%;
  font-weight: 700;
}

.maintenance-message h4 {
  font-size: 1.8rem;
  margin: 0;
  font-weight: 400;
}

.maintenance-message p {
  font-size: .85rem;
  margin: 0;
  line-height: 160%;
}

.maintenance-message .btn {
  padding: .7rem 1.8rem;
}

@media screen and (max-width: 768px) {
  .maintenance-message {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .maintenance-message p {
    text-align: center;
  }
}

/************* 10.3 Contacts *************/
.contact-card {
  padding: 2rem 1rem;
  position: relative;
  text-align: center;
}

.contact-card a.edit-contact-card {
  position: absolute;
  right: 25px;
  top: 25px;
  width: 40px;
  height: 40px;
  background: #f3f3f3;
  border-radius: 50px;
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.contact-card a.edit-contact-card i {
  font-size: 1.2rem;
  color: #0078b9;
}

.contact-card a.edit-contact-card:hover {
  width: 50px;
  height: 50px;
  -webkit-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

.contact-card .contact-avatar {
  border-radius: 50px;
  max-width: 90px;
  margin-bottom: 10px;
}

.contact-dash-img {
  border-radius: 50px;
  max-width: 60px;
  margin-bottom: 10px;
}

.contact-card h5 {
  margin-bottom: 10px;
}

/************* 10.4 Pricing Plan *************/
.pricing-plan {
  margin: 0 0 1.5rem 0;
  width: 100%;
  position: relative;
  border-radius: 10px;
  color: #ffffff;
  text-align: center;
}

.pricing-plan .pricing-header {
  padding: 20px 0 0 0;
}

.pricing-plan .pricing-header .pricing-title {
  font-size: 1.2rem;
  padding: 1rem 0 0 0;
  text-transform: uppercase;
  font-weight: 100;
  margin: 0;
  text-shadow: 0 30px 10px rgba(0, 0, 0, 0.15);
}

.pricing-plan .pricing-header .pricing-cost {
  padding: 1rem 0 0 0;
  font-size: 3rem;
  font-weight: bold;
  text-shadow: 0 30px 10px rgba(0, 0, 0, 0.15);
}

.pricing-plan .pricing-header .pricing-save {
  padding: .8rem 0;
  font-size: 1rem;
  font-weight: 400;
}

.pricing-plan .pricing-features {
  padding: 20px 0;
  margin: 0;
}

.pricing-plan .pricing-features li {
  padding: 12px 15px 12px 15px;
  font-size: .9rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  line-height: 100%;
}

.pricing-plan .pricing-footer {
  border-radius: 0 0 3px 3px;
  text-align: center;
  padding: 1rem 0 2rem 0;
}

@media (max-width: 767px) {
  .pricing-plan-container {
    height: auto;
  }
  .pricing-plan .pricing-header {
    text-align: center;
  }
  .pricing-plan .pricing-header i {
    display: block;
    float: none;
    margin-bottom: 1.5rem;
  }
}

/************* 10.5 Account Settings *************/
.change-img-avatar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 20px 15px 0;
  border-radius: 6px;
  max-height: 120px;
}

.account-settings-block {
  border-left: 1px solid #e1e1e1;
  margin-bottom: 20px;
  height: 100%;
  padding: 0 0 0 1rem;
}

.account-settings-block .settings-block {
  margin-bottom: 1rem;
}

.account-settings-block .settings-block .settings-block-title {
  margin: 0 0 .7rem 0;
  font-size: 1rem;
  font-weight: 400;
}

.account-settings-block .settings-block .settings-block-body {
  padding: 0;
}

.account-settings-block .settings-block .settings-block-body .form-check {
  margin: 0;
  min-height: 1.1rem;
}

@media (max-width: 992px) {
  .account-settings-block {
    border-left: 0;
    padding: 0;
  }
}

.pricing-change-plan {
  margin: 0 0 1rem 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.pricing-change-plan a {
  padding: 4rem 1rem 1rem 1rem;
  border-radius: 6px;
  min-width: 90px;
  max-width: 90px;
  min-height: 100px;
  margin: 0 10px 10px 0;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: #ffffff;
}

.pricing-change-plan a > h5 {
  font-size: 1.4rem;
  margin: 0 0 5px 0;
  font-weight: 600;
}

.pricing-change-plan a > h6 {
  font-size: .9rem;
  margin: 0;
  font-weight: 400;
}

.pricing-change-plan a.active-plan:after {
  font-family: "bootstrap-icons" !important;
  font-weight: bold;
  content: '\f26b';
  background: url();
  position: absolute;
  top: 20px;
  left: 50%;
  margin-left: -15px;
  font-size: 2rem;
}

/************* 10.6 Error Page *************/
.error-page {
  background: #EB3333;
}

.error-page::before {
  background: none;
}

.error-screen {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  color: #ffffff;
  height: 100%;
}

.error-screen h1 {
  font-family: Rubik Mono One;
  font-size: 15rem;
  margin: 0;
  line-height: 100%;
}

.error-screen h5 {
  margin-bottom: 2rem;
  line-height: 180%;
  font-weight: 300;
}

.error-screen .btn {
  padding: .7rem 1.8rem;
  border-radius: 50px;
  color: #ffffff;
  background: transparent;
  border: 2px solid #ffffff;
}

.error-screen .btn:hover {
  color: #000000;
  background: #ffffff;
  border: 2px solid #ffffff;
}

@media screen and (max-width: 768px) {
  .error-screen h1 {
    font-size: 8rem;
  }
}

/************* 10.7 Profile Page *************/
.profile-header {
  position: relative;
  padding: 0;
  margin-bottom: 20px;
}

.profile-header h1 {
  font-weight: 300;
  color: #0f59c9;
  font-size: 1.8rem;
  margin: 0 auto 1rem auto;
}

.profile-header .profile-header-content {
  border-radius: 4px;
 /* background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(84,84,124,0) 43%, rgba(64,102,110,1) 100%);*/
  background: #9ba2ab; 
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); 
  /* background-size: 1.5rem 1.5rem; */
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  
}



.profile-header .profile-header-content .profile-header-tiles {
  width: 100%;
  margin-right: 1rem;
  z-index: 100;
}

.profile-header .profile-header-content .profile-header-tiles .profile-tile {
  background-color: #ffffff;
  border-radius: 4px;
  padding: .6rem;
  margin: .2rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.profile-header .profile-header-content .profile-header-tiles .profile-tile > .icon {
  width: 36px;
  height: 36px;
  border-radius: 50px;
  margin: 0 .6rem 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #0078b9;
}

.profile-header .profile-header-content .profile-header-tiles .profile-tile > .icon i {
  font-size: 1rem;
  color: #ffffff;
  text-shadow: none;
}

.profile-header .profile-header-content .profile-header-tiles .profile-tile h6 {
  margin: 0;
  line-height: 150%;
  font-weight: 400;
  font-size: .8rem;
  color: #6c7788;
}

.profile-header .profile-header-content .profile-header-tiles .profile-tile h6 span {
  font-weight: 600;
  color: #13181e;
}

.profile-header .profile-header-content .profile-avatar-tile {
  background-color: #ffffff;
  border-radius: 4px;
  padding: .7rem;
  margin: -60px 0 0 auto;
  z-index: 100;
}

.profile-header .profile-header-content .profile-avatar-tile img {
  border-radius: 4px;
  width: 180px;
}

@media screen and (max-width: 768px) {
  .profile-header .profile-header-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .profile-header .profile-header-content .profile-header-tiles {
    margin-right: 0;
  }
  .profile-header .profile-header-content .profile-avatar-tile {
    margin: 20px 0;
  }
}

/******** 10.8 Create Offer ********/
.create-offer-container .form-control {
  margin: 0 0 .3rem 0;
  max-height: 69px;
}

.create-offer-container .share-thoughts-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.create-offer-container .share-thoughts-footer .btn {
  max-height: 32px;
  padding: 0.35rem .75rem;
}

.create-offer-container .share-thoughts-footer .share-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.create-offer-container .share-thoughts-footer .share-icons a {
  width: 32px;
  height: 32px;
  margin: 0 .3rem 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #dbe1e9;
  border-radius: 3px;
}

.create-offer-container .share-thoughts-footer .share-icons a i {
  color: #13181e;
  font-size: .9rem;
}

/******** 10.9 Award Tile ********/
.award-tile {
  padding: 1.5rem 1rem 1rem 1rem;
  margin: 0 0 20px 0;
  border-radius: 4px;
  min-height: 182px;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1.5rem 1.5rem;
}

.award-tile .award-icon {
  margin: 0 0 1rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.award-tile .award-icon i {
  font-size: 1.2rem;
  color: #ffffff;
  text-shadow: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 15px;
}

.award-tile h3 {
  margin: 0 0 .5rem 0;
  line-height: 100%;
  font-size: 1.6rem;
}

.award-tile h4 {
  margin: 0;
  font-size: .75rem;
}

/******** 10.10 Top Rated Items ********/
.top-items-container .top-item-img {
  max-height: 180px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.top-items-container .top-item-details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.top-items-container .top-item-details h6 {
  margin: 15px 0 10px 0;
  color: #6c7788;
}

.top-items-container .top-item-details .rating-block {
  margin: 0 auto 10px auto;
  width: 124px !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.top-items-container .top-item-details .rating-block img {
  width: 16px;
  height: 16px;
}

.top-items-container .top-item-details .rating-block .rating-count {
  font-size: 14px;
  margin: 0 0 0 3px;
  font-weight: 300;
  color: #6c7788;
}

/******** 10.11 Polls ********/
.polls-container p {
  color: #6c7788;
  font-size: .75rem;
  margin: 0 0 1rem 0;
}

.polls-container .poll-block {
  margin: 0 0 1.5rem 0;
}

.polls-container .poll-block .poll-block-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0;
}

.polls-container .poll-block .poll-block-header .score {
  font-size: .65rem;
}

.polls-container .poll-block .progress .progress-bar {
  font-size: .65rem;
}

/******** 10.12 Timeline Activity ********/
.timeline-activity {
  margin: 0;
}

.timeline-activity .activity-log {
  padding-left: 1.8rem;
  padding-bottom: 1.5rem;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.timeline-activity .activity-log:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0px;
  background: #0f59c9;
  border: 3px solid #dbe1e9;
  width: 15px;
  height: 15px;
  border-radius: 50px;
  z-index: 1;
}

.timeline-activity .activity-log:after {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  border-left: 1px dashed #e1e1e1;
  height: 100%;
  width: 1px;
}

.timeline-activity .activity-log .log-name {
  font-weight: 600;
}

.timeline-activity .activity-log .log-details {
  font-size: .875rem;
  color: #6c7788;
}

.timeline-activity .activity-log .log-time {
  color: #6c7788;
  margin-left: .5rem;
}

.timeline-activity .activity-log:last-child {
  padding-bottom: 0;
}

/******** 10.13 Chat Widget ********/
.chats {
  position: relative;
  padding: 0;
}

.chats li {
  margin-bottom: 25px;
}

.chats li.chats-left, .chats li.chats-right {
  position: relative;
}

.chats li img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}

.chats li .chats-avatar {
  float: left;
}

.chats li.chats-right > .chats-avatar {
  float: right;
}

.chats li .chats-name {
  font-size: .875rem;
  text-align: center;
  margin-top: 5px;
  color: #6c7788;
}

.chats li .chats-hour {
  margin: 0 0 0 70px;
  padding: 2px;
  margin-bottom: 20px;
  font-size: .65rem;
}

.chats li .chats-hour > span {
  font-size: .825rem;
  color: #149865;
}

.chats li .chats-text {
  margin: 0 0 0 70px;
  padding: 15px;
  border-radius: 20px;
  background-color: #dbe1e9;
  left: 15px;
  line-height: 170%;
}

.chats li .chats-text:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 28px;
  left: 52px;
  border: 10px solid;
  border-color: transparent #dbe1e9 transparent transparent;
}

.chats li.chats-right > .chats-text {
  text-align: right;
  right: 16px;
  margin: 0 70px 0 0;
  background-color: #dbe1e9;
}

.chats li.chats-right > .chats-text:before {
  left: auto;
  right: 52px;
  border-color: transparent transparent transparent #dbe1e9;
}

.chats li.chats-right > .chats-hour {
  text-align: right;
  margin: 0 70px 0 0;
}

/******** 10.14 Customer Rating ********/
ul.customer-rating li {
  margin-bottom: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

ul.customer-rating li .customer {
  margin-right: 10px;
}

ul.customer-rating li .customer img {
  width: 48px;
  height: 48px;
  border-radius: 30px;
}

ul.customer-rating li .customer-review .stars {
  margin: 10px 0 15px 0;
  width: 100%;
}

ul.customer-rating li .customer-review .stars img {
  width: 12px;
  height: 12px;
}

ul.customer-rating li .customer-review h5 {
  margin: 0 0 9px 0;
  font-size: .875rem;
}

ul.customer-rating li .customer-review h6.by {
  margin: 0 0 10px 0;
  font-size: .8rem;
  font-weight: 400;
}

ul.customer-rating li .customer-review h6.by a {
  color: #6c7788;
}

ul.customer-rating li .customer-review p {
  margin: 0 0 5px 0;
  line-height: 150%;
  color: #6c7788;
}

ul.customer-rating li:last-child {
  margin-bottom: 0px;
}

/************************************************
	************************************************
				11. Bootstrap Overwrite CSS
	************************************************
************************************************/
/************* 11.1 Badge *************/
.badge {
  font-weight: 400;
  font-size: .75rem;
  border-radius: 2px;
}

/************* 11.2 Placeholder *************/
.placeholder {
  background-color: rgba(0, 0, 0, 0.3);
}

.placeholder.light {
  background-color: rgba(255, 255, 255, 0.4);
}

/************* 11.3 Accordion *************/
.accordion {
  background: #ffffff;
}

.accordion .accordion-item {
  background-color: #ffffff;
}

.accordion .accordion-button {
  background-color: #dfe1fd;
  border: solid 1px #fff;
}

.accordion .accordion-button::after {
  background-image: none;
  font-family: "bootstrap-icons" !important;
  font-weight: bold;
  font-size: 1.2rem;
  content: "\f282";
}

.accordion .accordion-button:not(.collapsed)::after {
  background-image: none;
  font-family: "bootstrap-icons" !important;
  font-weight: bold;
  font-size: 1.2rem;
  content: "\f286";
}

.accordion .accordion-button:not(.collapsed) {
  background-color: #04388dbe;
  color: #ffffff;
}

.accordion .accordion-body {
  line-height: 150%;
}


/* Styles verts */
.accordion .accordion-button.green {
  background-color: #e6fff5;
  color: #18533b;
}

.accordion .accordion-button.green:not(.collapsed) {
  background-color: #06784b;
  color: #ffffff;
}

/* Styles rouges */
.accordion .accordion-button.red {
  background-color: #ffe6e6;
  color: #7d1a1a;
}

.accordion .accordion-button.red:not(.collapsed) {
  background-color: #fc8c8c;
  color: #ffffff!important;
}

/* Styles violet */
.accordion .accordion-button.purple {
  background-color: #9fa3fc;
  color: #7d1a1a;
}

.accordion .accordion-button.purple:not(.collapsed) {
  background-color: #777dfb;
  color: #ffffff!important;
}



.accordion .accordion-button-success {
  background-color: #e6fff5;
  border: solid 1px #fff;
}

.accordion .accordion-button-success::after {
  background-image: none;
  font-family: "bootstrap-icons" !important;
  font-weight: bold;
  font-size: 1.2rem;
  content: "\f282";
}

.accordion .accordion-button-success:not(.collapsed)::after {
  background-image: none;
  font-family: "bootstrap-icons" !important;
  font-weight: bold;
  font-size: 1.2rem;
  content: "\f286";
}

.accordion .accordion-button-success:not(.collapsed) {
  background-color: #37fbad;
  color: #ffffff;
}

/************* 11.4 Alerts *************/
.alert .alert-icon {
  font-size: 1.2rem;
  margin: 0 10px 0 0;
  line-height: 100%;
  vertical-align: middle;
}

.alert.alert-dismissible .btn-close {
  padding: 1.1rem 1rem;
}

.alert.alert-primary {
  color: #0f59c9;
  background: #e0ecff;
  border-color: #b6c6df;  
}

.alert.alert-secondary {
  color: #41464b;
  background: #f0f4fd;
  border-color: #d0d6e3;
}

.alert.alert-success {
  color: #149865;
  background: #e6fff5;
  border-color: #aee3ce;
}

.alert.alert-warning {
  color: #dda50e;
  background: #fff5db;
  border-color: #e7d6a7;
}

.alert.alert-danger {
  color: #EB3333;
  background: #fde2e2;
  border-color: #fca9a9;
}

.alert.alert-info {
  color: #0078b9;
  background: #e6eaff;
  border-color: #aab8ff;
}

.alert.alert-light {
  color: #13181e;
  background: #dbe1e9;
  border-color: #aeb8c4;
}

.alert.alert-dark {
  color: #ffffff;
  background: #9ba2ab;
  border-color: #757c85;
}

.alert-fixed {
  position: fixed;
  right: 45px;
  top: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.alert-fixed i {
  font-size: 3rem;
  margin: 0 10px 0 0;
}

/************* 11.5 Tabs *************/
.nav-tabs .nav-link {
  margin-bottom: -2px;
}

/************* 11.6 Cards *************/
.card {
  border: 0;
  border-radius: 30px;
  position: relative;
  margin-bottom: 24px;
  cursor: pointer;
  -webkit-box-shadow: 0 15px 15px rgba(0, 15, 15, 0.2);
          box-shadow: 0 15px 15px rgba(0, 15, 15, 0.2);
}

.card:hover {
  border: 0;
  border-radius: 30px;
  background-color: #fff;
  position: relative;
  margin-bottom: 24px;
  cursor: pointer;
  -webkit-box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
          box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
}

.card .card-header {
  padding: 1rem 1rem 0 1rem;
  background: transparent;
  border: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.card .card-header .card-title {
  font-size: 1.2rem;
  margin: 0;
  color: #13181e;
  font-weight: 600;
  line-height: 150%;
}

.card .card-body {
  padding: 1rem 1.25rem;
}

.card .card-body .card-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 150%;
  color: #13181e;
}

.card .card-body.h-170 {
  min-height: 170px;
}

.card .card-body.h-250 {
  min-height: 250px;
}

.card .card-body.h-300 {
  min-height: 300px;
}

.card .card-loading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border-radius: 8px;
  cursor: wait;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: rgba(255, 255, 255, 0.3);
}

.card .card-footer {
  padding: 1rem 1.25rem 1rem 1.25rem;
  background: transparent;
  border-top: 1px solid #e1e1e1;
}

.card.border-primary {
  border: 1px solid #0f59c9;
}

.card.border-secondary {
  border: 1px solid #41464b;
}

.card.border-red {
  border: 1px solid #EB3333;
}

.card.border-green {
  border: 1px solid #149865;
}

.card.border-blue {
  border: 1px solid #0078b9;
}

.card.border-yellow {
  border: 1px solid #dda50e;
}

.card-img, .card-img-top {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.card-img, .card-img-bottom {
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

/************* 11.7 Buttons *************/
button:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

button:focus:not(:focus-visible) {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.btn {
  border-radius: 4px;
  border: 0;
  font-size: .9rem;
  font-weight: 400;
  padding: .3rem 0.8rem;

}

.btn i {
  font-size: 1.3rem;
  margin: 0 3px 0 0;
  line-height: 100%;
  vertical-align: middle;
}

.btn-check:focus + .btn, .btn:focus {
  outline: 0;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
}

.btn.btn-rounded {
  border-radius: 50px;
}

.btn-lg {
  padding: .9rem 1.75rem;
  font-size: 1rem;
}

/************* 11.8 Button Primary *************/
.btn-primary {
  color: #ffffff;
  background: #0f59c9;
  border: 1px solid #0f59c9;
}

.btn-primary:hover {
  color: #ffffff;
  background: #0545a5;
  border: 1px solid #0545a5;
}

.btn-check:focus + .btn-primary, .btn-primary:focus {
  color: #ffffff;
  background: #0545a5;
  border: 1px solid #0545a5;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(5, 69, 165, 0.2);
          box-shadow: 0 0 0 0.2rem rgba(5, 69, 165, 0.2);
}

.btn-primary.dropdown-toggle.show,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active {
  color: #ffffff;
  background: #0545a5;
  border: 1px solid #0545a5;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(5, 69, 165, 0.2);
          box-shadow: 0 0 0 0.2rem rgba(5, 69, 165, 0.2);
}

.btn-primary.dropdown-toggle.show:focus,
.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus {
  color: #ffffff;
  background: #0545a5;
  border: 1px solid #0545a5;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(5, 69, 165, 0.2);
          box-shadow: 0 0 0 0.2rem rgba(5, 69, 165, 0.2);
}

.btn-primary:disabled, .btn-primary.disabled,
fieldset:disabled .btn-primary {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #1d70ee;
  background: #357ff0;
}

.btn-outline-primary {
  color: #0f59c9;
  border: 1px solid #0f59c9;
}

.btn-outline-primary:hover {
  color: #ffffff;
  background: #0545a5;
  border: 1px solid #0545a5;
}

.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
  color: #ffffff;
  background: #0545a5;
  border: 1px solid #0545a5;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(5, 69, 165, 0.2);
          box-shadow: 0 0 0 0.2rem rgba(5, 69, 165, 0.2);
}

.btn-outline-primary.dropdown-toggle.show,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active {
  color: #ffffff;
  background: #0545a5;
  border: 1px solid #0545a5;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(5, 69, 165, 0.2);
          box-shadow: 0 0 0 0.2rem rgba(5, 69, 165, 0.2);
}

.btn-outline-primary.dropdown-toggle.show:focus,
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus {
  color: #ffffff;
  background: #0545a5;
  border: 1px solid #0545a5;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(5, 69, 165, 0.2);
          box-shadow: 0 0 0 0.2rem rgba(5, 69, 165, 0.2);
}

.btn-outline-primary:disabled, .btn-outline-primary.disabled,
fieldset:disabled .btn-outline-primary {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #1d70ee;
  background: #357ff0;
}

/************* 11.9 Button Secondary *************/
.btn-secondary {
  color: #ffffff;
  background: #41464b;
  border: 1px solid #41464b;
}

.btn-secondary:hover {
  color: #ffffff;
  background: #282b2e;
  border: 1px solid #282b2e;
}

.btn-check:focus + .btn-secondary, .btn-secondary:focus {
  color: #ffffff;
  background: #282b2e;
  border: 1px solid #282b2e;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 43, 46, 0.2);
          box-shadow: 0 0 0 0.2rem rgba(40, 43, 46, 0.2);
}

.btn-secondary.dropdown-toggle.show,
.btn-check:checked + .btn-secondary,
.btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active {
  color: #ffffff;
  background: #282b2e;
  border: 1px solid #282b2e;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 43, 46, 0.2);
          box-shadow: 0 0 0 0.2rem rgba(40, 43, 46, 0.2);
}

.btn-secondary.dropdown-toggle.show:focus,
.btn-check:checked + .btn-secondary:focus,
.btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus {
  color: #ffffff;
  background: #282b2e;
  border: 1px solid #282b2e;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 43, 46, 0.2);
          box-shadow: 0 0 0 0.2rem rgba(40, 43, 46, 0.2);
}

.btn-secondary:disabled, .btn-secondary.disabled,
fieldset:disabled .btn-secondary {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #596066;
  background: #656c74;
}

.btn-outline-secondary {
  color: #41464b;
  border: 1px solid #41464b;
}

.btn-outline-secondary:hover {
  color: #ffffff;
  background: #282b2e;
  border: 1px solid #282b2e;
}

.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {
  color: #ffffff;
  background: #282b2e;
  border: 1px solid #282b2e;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 43, 46, 0.2);
          box-shadow: 0 0 0 0.2rem rgba(40, 43, 46, 0.2);
}

.btn-outline-secondary.dropdown-toggle.show,
.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active {
  color: #ffffff;
  background: #282b2e;
  border: 1px solid #282b2e;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 43, 46, 0.2);
          box-shadow: 0 0 0 0.2rem rgba(40, 43, 46, 0.2);
}

.btn-outline-secondary.dropdown-toggle.show:focus,
.btn-check:checked + .btn-outline-secondary:focus,
.btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus {
  color: #ffffff;
  background: #282b2e;
  border: 1px solid #282b2e;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(40, 43, 46, 0.2);
          box-shadow: 0 0 0 0.2rem rgba(40, 43, 46, 0.2);
}

.btn-outline-secondary:disabled, .btn-outline-secondary.disabled,
fieldset:disabled .btn-outline-secondary {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #596066;
  background: #656c74;
}

/************* 11.10 Button Info *************/
.btn-info {
  color: #ffffff;
  background: #0078b9;
  border: 1px solid #0078b9;
}

.btn-info:hover {
  color: #ffffff;
  background: #2f49dd;
  border: 1px solid #2f49dd;
}

.btn-check:focus + .btn-info, .btn-info:focus {
  color: #ffffff;
  background: #2f49dd;
  border: 1px solid #2f49dd;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 74, 237, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(45, 74, 237, 0.25);
}

.btn-info.dropdown-toggle.show,
.btn-check:checked + .btn-info,
.btn-check:active + .btn-info, .btn-info:active, .btn-info.active {
  color: #ffffff;
  background: #2f49dd;
  border: 1px solid #2f49dd;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 74, 237, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(45, 74, 237, 0.25);
}

.btn-info.dropdown-toggle.show:focus,
.btn-check:checked + .btn-info:focus,
.btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus {
  color: #ffffff;
  background: #2f49dd;
  border: 1px solid #2f49dd;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 74, 237, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(45, 74, 237, 0.25);
}

.btn-info:disabled, .btn-info.disabled,
fieldset:disabled .btn-info {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #7286f3;
  background: #8a9af5;
}

.btn-outline-info {
  color: #0078b9;
  border: 1px solid #0078b9;
}

.btn-outline-info:hover {
  color: #ffffff;
  background: #2f49dd;
  border: 1px solid #2f49dd;
}

.btn-check:focus + .btn-outline-info, .btn-outline-info:focus {
  color: #ffffff;
  background: #2f49dd;
  border: 1px solid #2f49dd;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 74, 237, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(45, 74, 237, 0.25);
}

.btn-outline-info.dropdown-toggle.show,
.btn-check:checked + .btn-outline-info,
.btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active {
  color: #ffffff;
  background: #2f49dd;
  border: 1px solid #2f49dd;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 74, 237, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(45, 74, 237, 0.25);
}

.btn-outline-info.dropdown-toggle.show:focus,
.btn-check:checked + .btn-outline-info:focus,
.btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus {
  color: #ffffff;
  background: #2f49dd;
  border: 1px solid #2f49dd;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 74, 237, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(45, 74, 237, 0.25);
}

.btn-outline-info:disabled, .btn-outline-info.disabled,
fieldset:disabled .btn-outline-info {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #7286f3;
  background: #8a9af5;
}

/************* 11.11 Button Danger *************/
.btn-danger {
  color: #ffffff;
  background: #EB3333;
  border: 1px solid #EB3333;
}

.btn-danger:hover {
  color: #ffffff;
  background: #cf2323;
  border: 1px solid #cf2323;
}

.btn-check:focus + .btn-danger, .btn-danger:focus {
  color: #ffffff;
  background: #cf2323;
  border: 1px solid #cf2323;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(218, 8, 0, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(218, 8, 0, 0.3);
}

.btn-danger.dropdown-toggle.show,
.btn-check:checked + .btn-danger,
.btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active {
  color: #ffffff;
  background: #cf2323;
  border: 1px solid #cf2323;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(218, 8, 0, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(218, 8, 0, 0.3);
}

.btn-danger.dropdown-toggle.show:focus,
.btn-check:checked + .btn-danger:focus,
.btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus {
  color: #ffffff;
  background: #cf2323;
  border: 1px solid #cf2323;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(218, 8, 0, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(218, 8, 0, 0.3);
}

.btn-danger:disabled, .btn-danger.disabled,
fieldset:disabled .btn-danger {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #f06161;
  background: #f27979;
}

.btn-outline-danger {
  color: #EB3333;
  border: 1px solid #EB3333;
}

.btn-outline-danger:hover {
  color: #ffffff;
  background: #cf2323;
  border: 1px solid #cf2323;
}

.btn-check:focus + .btn-outline-danger, .btn-outline-danger:focus {
  color: #ffffff;
  background: #cf2323;
  border: 1px solid #cf2323;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(218, 8, 0, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(218, 8, 0, 0.3);
}

.btn-outline-danger.dropdown-toggle.show,
.btn-check:checked + .btn-outline-danger,
.btn-check:active + .btn-outline-danger, .btn-outline-danger:active, .btn-outline-danger.active {
  color: #ffffff;
  background: #cf2323;
  border: 1px solid #cf2323;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(218, 8, 0, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(218, 8, 0, 0.3);
}

.btn-outline-danger.dropdown-toggle.show:focus,
.btn-check:checked + .btn-outline-danger:focus,
.btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus {
  color: #ffffff;
  background: #cf2323;
  border: 1px solid #cf2323;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(218, 8, 0, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(218, 8, 0, 0.3);
}

.btn-outline-danger:disabled, .btn-outline-danger.disabled,
fieldset:disabled .btn-outline-danger {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #f06161;
  background: #f27979;
}

/************* 11.12 Button Warning *************/
.btn-warning {
  color: #ffffff;
  background: #dda50e;
  border: 1px solid #dda50e;
}

.btn-warning:hover {
  color: #ffffff;
  background: #c29007;
  border: 1px solid #c29007;
}

.btn-check:focus + .btn-warning, .btn-warning:focus {
  color: #ffffff;
  background: #c29007;
  border: 1px solid #c29007;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(197, 147, 11, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(197, 147, 11, 0.3);
}

.btn-warning.dropdown-toggle.show,
.btn-check:checked + .btn-warning,
.btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active {
  color: #ffffff;
  background: #c29007;
  border: 1px solid #c29007;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(197, 147, 11, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(197, 147, 11, 0.3);
}

.btn-warning.dropdown-toggle.show:focus,
.btn-check:checked + .btn-warning:focus,
.btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus {
  color: #ffffff;
  background: #c29007;
  border: 1px solid #c29007;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(197, 147, 11, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(197, 147, 11, 0.3);
}

.btn-warning:disabled, .btn-warning.disabled,
fieldset:disabled .btn-warning {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #f2bc2c;
  background: #f3c444;
}

.btn-outline-warning {
  color: #dda50e;
  border: 1px solid #dda50e;
}

.btn-outline-warning:hover {
  color: #ffffff;
  background: #c29007;
  border: 1px solid #c29007;
}

.btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {
  color: #ffffff;
  background: #c29007;
  border: 1px solid #c29007;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(197, 147, 11, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(197, 147, 11, 0.3);
}

.btn-outline-warning.dropdown-toggle.show,
.btn-check:checked + .btn-outline-warning,
.btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active {
  color: #ffffff;
  background: #c29007;
  border: 1px solid #c29007;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(197, 147, 11, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(197, 147, 11, 0.3);
}

.btn-outline-warning.dropdown-toggle.show:focus,
.btn-check:checked + .btn-outline-warning:focus,
.btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus {
  color: #ffffff;
  background: #c29007;
  border: 1px solid #c29007;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(197, 147, 11, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(197, 147, 11, 0.3);
}

.btn-outline-warning:disabled, .btn-outline-warning.disabled,
fieldset:disabled .btn-outline-warning {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #f2bc2c;
  background: #f3c444;
}

/************* 11.13 Button Success *************/
.btn-success {
  color: #ffffff;
  background: #149865;
  border: 1px solid #149865;
}

.btn-success:hover {
  color: #ffffff;
  background: #0a8154;
  border: 1px solid #0a8154;
}

.btn-check:focus + .btn-success, .btn-success:focus {
  color: #ffffff;
  background: #0a8154;
  border: 1px solid #0a8154;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(18, 129, 86, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(18, 129, 86, 0.3);
}

.btn-success.dropdown-toggle.show,
.btn-check:checked + .btn-success,
.btn-check:active + .btn-success, .btn-success:active, .btn-success.active {
  color: #ffffff;
  background: #0a8154;
  border: 1px solid #0a8154;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(18, 129, 86, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(18, 129, 86, 0.3);
}

.btn-success.dropdown-toggle.show:focus,
.btn-check:checked + .btn-success:focus,
.btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus {
  color: #ffffff;
  background: #0a8154;
  border: 1px solid #0a8154;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(18, 129, 86, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(18, 129, 86, 0.3);
}

.btn-success:disabled, .btn-success.disabled,
fieldset:disabled .btn-success {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #1ac583;
  background: #1ddc92;
}

.btn-outline-success {
  color: #149865;
  border: 1px solid #149865;
}

.btn-outline-success:hover {
  color: #ffffff;
  background: #0a8154;
  border: 1px solid #0a8154;
}

.btn-check:focus + .btn-outline-success, .btn-outline-success:focus {
  color: #ffffff;
  background: #0a8154;
  border: 1px solid #0a8154;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(18, 129, 86, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(18, 129, 86, 0.3);
}

.btn-outline-success.dropdown-toggle.show,
.btn-check:checked + .btn-outline-success,
.btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active {
  color: #ffffff;
  background: #0a8154;
  border: 1px solid #0a8154;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(18, 129, 86, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(18, 129, 86, 0.3);
}

.btn-outline-success.dropdown-toggle.show:focus,
.btn-check:checked + .btn-outline-success:focus,
.btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus {
  color: #ffffff;
  background: #0a8154;
  border: 1px solid #0a8154;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(18, 129, 86, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(18, 129, 86, 0.3);
}

.btn-outline-success:disabled, .btn-outline-success.disabled,
fieldset:disabled .btn-outline-success {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #1ac583;
  background: #1ddc92;
}

/************* 11.14 Button Light *************/
.btn-light {
  color: #000000;
  background: #dbe1e9;
  border: 1px solid #dbe1e9;
}

.btn-light:hover {
  color: #000000;
  background: #a7afb9;
  border: 1px solid #a7afb9;
}

.btn-check:focus + .btn-light, .btn-light:focus {
  color: #000000;
  background: #a7afb9;
  border: 1px solid #a7afb9;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(204, 212, 223, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(204, 212, 223, 0.3);
}

.btn-light.dropdown-toggle.show,
.btn-check:checked + .btn-light,
.btn-check:active + .btn-light, .btn-light:active, .btn-light.active {
  color: #000000;
  background: #a7afb9;
  border: 1px solid #a7afb9;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(204, 212, 223, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(204, 212, 223, 0.3);
}

.btn-light.dropdown-toggle.show:focus,
.btn-check:checked + .btn-light:focus,
.btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus {
  color: #000000;
  background: #a7afb9;
  border: 1px solid #a7afb9;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(204, 212, 223, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(204, 212, 223, 0.3);
}

.btn-light:disabled, .btn-light.disabled,
fieldset:disabled .btn-light {
  pointer-events: none;
  color: #000000;
  border: 1px solid #a7afb9;
  background: #fbfbfc;
}

.btn-outline-light {
  color: #000000;
  border: 1px solid #dbe1e9;
}

.btn-outline-light:hover {
  color: #ffffff;
  background: #a7afb9;
  border: 1px solid #a7afb9;
}

.btn-check:focus + .btn-outline-light, .btn-outline-light:focus {
  color: #000000;
  background: #a7afb9;
  border: 1px solid #a7afb9;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(204, 212, 223, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(204, 212, 223, 0.3);
}

.btn-outline-light.dropdown-toggle.show,
.btn-check:checked + .btn-outline-light,
.btn-check:active + .btn-outline-light, .btn-outline-light:active, .btn-outline-light.active {
  color: #000000;
  background: #a7afb9;
  border: 1px solid #a7afb9;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(204, 212, 223, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(204, 212, 223, 0.3);
}

.btn-outline-light.dropdown-toggle.show:focus,
.btn-check:checked + .btn-outline-light:focus,
.btn-check:active + .btn-outline-light:focus, .btn-outline-light:active:focus, .btn-outline-light.active:focus {
  color: #000000;
  background: #a7afb9;
  border: 1px solid #a7afb9;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(204, 212, 223, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(204, 212, 223, 0.3);
}

.btn-outline-light:disabled, .btn-outline-light.disabled,
fieldset:disabled .btn-outline-light {
  pointer-events: none;
  color: #000000;
  border: 1px solid #ebeef3;
  background: #fbfbfc;
}

/************* 11.15 Button Dark *************/
.btn-dark {
  color: #ffffff;
  background: #9ba2ab;
  border: 1px solid #9ba2ab;
}

.btn-dark:hover {
  color: #ffffff;
  background: #646b74;
  border: 1px solid #646b74;
}

.btn-check:focus + .btn-dark, .btn-dark:focus {
  color: #ffffff;
  background: #646b74;
  border: 1px solid #646b74;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(140, 149, 159, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(140, 149, 159, 0.3);
}

.btn-dark.dropdown-toggle.show,
.btn-check:checked + .btn-dark,
.btn-check:active + .btn-dark, .btn-dark:active, .btn-dark.active {
  color: #ffffff;
  background: #646b74;
  border: 1px solid #646b74;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(140, 149, 159, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(140, 149, 159, 0.3);
}

.btn-dark.dropdown-toggle.show:focus,
.btn-check:checked + .btn-dark:focus,
.btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus {
  color: #ffffff;
  background: #646b74;
  border: 1px solid #646b74;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(140, 149, 159, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(140, 149, 159, 0.3);
}

.btn-dark:disabled, .btn-dark.disabled,
fieldset:disabled .btn-dark {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #b7bcc2;
  background: #c5c9ce;
}

.btn-outline-dark {
  color: #000000;
  border: 1px solid #9ba2ab;
}

.btn-outline-dark:hover {
  color: #ffffff;
  background: #646b74;
  border: 1px solid #646b74;
}

.btn-check:focus + .btn-outline-dark, .btn-outline-dark:focus {
  color: #ffffff;
  background: #646b74;
  border: 1px solid #646b74;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(140, 149, 159, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(140, 149, 159, 0.3);
}

.btn-outline-dark.dropdown-toggle.show,
.btn-check:checked + .btn-outline-dark,
.btn-check:active + .btn-outline-dark, .btn-outline-dark:active, .btn-outline-dark.active {
  color: #ffffff;
  background: #646b74;
  border: 1px solid #646b74;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(140, 149, 159, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(140, 149, 159, 0.3);
}

.btn-outline-dark.dropdown-toggle.show:focus,
.btn-check:checked + .btn-outline-dark:focus,
.btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus {
  color: #ffffff;
  background: #646b74;
  border: 1px solid #646b74;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(140, 149, 159, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(140, 149, 159, 0.3);
}

.btn-outline-dark:disabled, .btn-outline-dark.disabled,
fieldset:disabled .btn-outline-dark {
  pointer-events: none;
  color: #ffffff;
  border: 1px solid #b7bcc2;
  background: #c5c9ce;
}

/************* 11.16 Button White *************/
.btn-white {
  color: #000000;
  background: #ffffff;
}

.btn-white:hover {
  color: #000000;
  border: 1px solid #e6e6e6;
  background: #f2f2f2;
}

.btn-check:focus + .btn-white, .btn-white:focus {
  color: #000000;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(138, 157, 177, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(138, 157, 177, 0.3);
}

.btn-white.dropdown-toggle.show,
.btn-check:checked + .btn-white,
.btn-check:active + .btn-white, .btn-white:active, .btn-white.active {
  color: #000000;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(138, 157, 177, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(138, 157, 177, 0.3);
}

.btn-white.dropdown-toggle.show:focus,
.btn-check:checked + .btn-white:focus,
.btn-check:active + .btn-white:focus, .btn-white:active:focus, .btn-white.active:focus {
  color: #000000;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(138, 157, 177, 0.3);
          box-shadow: 0 0 0 0.2rem rgba(138, 157, 177, 0.3);
}

.btn-white:disabled, .btn-white.disabled,
fieldset:disabled .btn-white {
  pointer-events: none;
  color: #000000;
  border: 1px solid #e6e6e6;
  background: #f2f2f2;
}

/************* 11.17 Dropdown Menu *************/
.dropdown-menu {
  background-color: #ffffff;
  border: 0;
  border-radius: 8px;
  /*width: 12rem;*/
  cursor: pointer;
  -webkit-box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
          box-shadow: 0 10px 10px rgba(0, 10, 10, 0.1);
}

.dropdown-menu:before {
  position: absolute;
  top: -9px;
  left: 12px;
  content: '';
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 9px solid #ffffff;
}

.dropdown-menu.dropdown-menu-end {
  right: 0;
}

.dropdown-menu.dropdown-menu-end:before {
  right: 15px;
  left: auto;
  top: -9px;
}

.dropdown-menu.smp {
  width: 10rem;
  min-width: auto;
}

.dropdown-menu.mini {
  width: 46px;
  min-width: auto;
}

.dropdown-menu.sm {
  width: 15rem;
  min-width: auto;
}

.dropdown-menu.msd {
  width: 19rem;
}

.dropdown-menu.md {
  width: 22rem;
}

.dropdown-menu.lrg {
  width: 24rem;
}

.dropdown-menu .dropdown-item {
  padding: .5rem 1rem .5rem 1rem;
  line-height: 100%;
  position: relative;
  color: #13181e;
}

.dropdown-menu .dropdown-item:hover {
  background: #eeeeee;
}



.dropdown-menu .dropdown-item-perso {
  padding: .5rem 1rem .5rem 1rem;
  line-height: 100%;
  position: relative;
  color: #fff;
}

.dropdown-menu .dropdown-item-perso:hover {
  background: #0078b9;
}

.dropdown-menu .dropdown-item-perso:first-child {
  border-radius: 0px;
}

.dropdown-menu .dropdown-item-perso:last-child {
  border-radius: 0px;
}

.dropdown-menu .dropdown-item-perso.active-page {
  background: #e6e6e6;
  pointer-events: none;
  cursor: not-allowed;
}




.dropdown-menu .dropdown-item:first-child {
  border-radius: 0px;
}

.dropdown-menu .dropdown-item:last-child {
  border-radius: 0px;
}

.dropdown-menu .dropdown-item.active-page {
  background: #e6e6e6;
  pointer-events: none;
  cursor: not-allowed;
}

.dropdown-menu .dropdown-divider {
  border-top: 1px solid #eeeeee;
}

.dropdown-menu .dropdown-menu-header {
  padding: .7rem 1rem;
  margin-bottom: .5rem;
  background: #eeeeee;
  color: #13181e;
  font-size: .925rem;
  font-weight: bold;
}

.dropdown-menu.white-dropdown {
  background-color: #ffffff;
}

.dropdown-menu.white-dropdown:before {
  border-bottom: 9px solid #ffffff;
}

.dropdown-toggle::after {
  vertical-align: middle;
}

.dropdown-toggle.sub-nav-link::after {
  float: right;
  margin: .15rem 0 0 0;
  border-right: 0;
  border-left: 5px solid;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/************* 11.18 List Group *************/
.list-group .list-group-item {
  padding: .75rem 1rem;
  background-color: rgba(0, 0, 0, 0.01);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.list-group .list-group-item + .list-group-item {
  border-top-width: 0;
}

/************* 11.19 Carousel *************/
.carousel-control-next-icon,
.carousel-control-prev-icon {
  width: 4rem;
  height: 4rem;
}

/******** 11.20 Form Controls ********/
.form-label {
  margin-bottom: .5rem;
  font-size: .9rem;
  /*font-weight: bold;*/
  color: #0b5e95;
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
}

.form-control {
  border: 1px solid #c3cbd6;
  border-radius: 4px;
  /* font-weight: 400; */
  color: #000;
  font-size: 1rem;
  min-height: 40px;
  background-color: #ffffff;
}

.form-control:hover {
  border: 1px solid #9ba5b3;
}

.form-control:focus {
  border-color: #9ba5b3;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 2px;
  outline: 0 !important;
  outline-color: #9ba5b3 !important;
  background-color: #e7e8fd !important;
}

.form-control:disabled {
  opacity: .7;
}

.form-select {
  border: 1px solid #c3cbd6;
  border-radius: 4px;
  color: #232629;
  font-size: 1rem;
  min-height: 40px;
  background-color: #ffffff;
 
}

.form-select:hover {
  border: 1px solid #9ba5b3;
}

.form-select:focus {
  border-color: #9ba5b3;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 2px;
  outline: auto !important;
  outline-color: #9ba5b3 !important;
}

.form-select:disabled {
  opacity: .7;
}

.col-form-label {
  padding-top: calc(.595rem + 1px);
  padding-bottom: calc(.595rem + 1px);
  min-height: 40px;
}

.input-group-text {
  border: 1px solid #c3cbd6;
  background: #ffffff;
  border-radius: 4px;
  font-size: 1rem;
  min-height: 40px;
  margin: 0;
}

.input-group-text i {
  color: #232629;
}

.input-group .btn {
  border-radius: 4px;
}

.form-control[type=file]:not(:disabled):not([readonly]) {
  font-size: 1rem;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #149865;
  -webkit-text-fill-color: #232629;
  -webkit-box-shadow: 0 0 0px 100px rgba(0, 0, 0, 0.8) inset;
          box-shadow: 0 0 0px 100px rgba(0, 0, 0, 0.8) inset;
}

/******** 11.21 File Upload ********/
.form-control::-webkit-file-upload-button {
  background: #ffffff;
  font-size: 1rem;
  min-height: 40px;
  margin: -1rem 1rem -1rem -.75rem;
  color: #13181e;
  line-height: 40px;
}

/******** 11.22 Checkbox and Radio ********/
.form-check {
  margin: 0 1rem 0 0;
  min-height: 2rem;
}

.form-check .form-check-label {
  font-weight: 400;
  font-size: .9rem;
  margin: 5px 0 0 10px;
  color: #232629;
}

.form-check .form-check-input {
  background-color: #fff;
  border-color: #c3cbd6;
}

.form-check .form-check-input [disabled] ~ .form-check-label, .form-check .form-check-input:disabled ~ .form-check-label, .form-select:disabled {
  opacity: 0.7;
}

.form-check .form-check-input:checked {
  background-color: #0078b9;
  border-color: #0078b9;
}

.form-check .form-check-input[type="checkbox"], .form-check .form-check-input[type="radio"] {
  border-radius: 2px;
  height: 1.2rem !important;
  margin-top: 0.15em;
  min-height: auto;
  padding: 0;
  width: 1.2rem !important;
}

.form-check .form-check-input[type="radio"] {
  border-radius: 50px;
  height: 1.5rem !important;
  width: 1.5rem !important;
}

.form-check .form-check-label {
  color: #232629;
  font-size: 0.9rem;
  font-weight: 400;
  margin: 5px 0 0 10px;
}

.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}

.form-check.form-switch {
  margin: 0 0 10px;
  min-height: 1.5rem;
}

.form-check.form-switch .form-check-input {
  border-radius: 30px;
  height: 1em !important;
  width: 2em !important;
}

.form-check.form-switch .form-check-label {
  margin: 0;
}
.cbwh22 {
  width: 22px!important;
  height: 22px!important;
  margin: 0 10px 0 0;
}
/******** 11.23 Modal ********/
.modal .modal-content {
  border-radius: 10px;
  border: 0;
  z-index: 1100!important;
}

.modal .modal-header {
  color: #000000;
  border: 0;
  padding: 1rem 1.2rem;
  border-radius: 10px 10px 0 0;
}

.modal .modal-header .btn-close {
  background: url(../img/cancel.svg) center/1em auto no-repeat;
}

.modal .modal-body {
  padding: 1.2rem;
}

.modal .modal-footer {
  border-top: 1px solid #ced9e6;
  padding: .5rem 1.2rem;
}

.modal-backdrop.show {
  opacity: 0.7;
}

/******** 11.24 Tables ********/
.table {
  color: #242424;
  font-size: .85rem;
}

.table .flag-img {
  width: 18px;
  height: 18px;
  margin: 0 10px 0 0;
}

.table .flag-img-lg {
  width: 24px;
  height: 24px;
  margin: 0 7px 0 0;
}

.table > thead td, .table > thead th {
  font-weight: bold;
  font-size: .925rem;
}

.table.v-middle {
  vertical-align: middle;
}

.table .user-details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.table .user-details img {
  width: 60px;
  height: 60px;
  margin: 0 10px 0 0;
  border-radius: 50px;
}

.table .badge.min-70 {
  min-width: 70px;
}

.table .badge.min-90 {
  min-width: 90px;
}

.table .td-status i {
  font-size: 1.5rem;
  vertical-align: middle;
  margin: 0 5px 0 0;
}

.table .actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.table .actions a {
  width: 36px;
  height: 36px;
  font-size: 1rem;
  margin: 3px;
  border: 1px solid #ededed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: .3s ease;
  transition: .3s ease;
}

.table .media-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.table .media-box img.media-avatar {
  height: 60px;
  margin: 0 15px 0 0;
}

.table .media-box img.media-avatar-lg {
  height: 90px;
  margin: 0 15px 0 0;
}

.table .media-box .media-box-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.table .media-box .media-box-body p {
  color: #13181e;
  padding: 5px 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  color: #242424;
}

.table > :not(:first-child) {
  border-top: 3px solid #ededed;
}

/******** 11.25 Pagination ********/
.page-item.disabled .page-link {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid #e1e1e1;
  color: #13181e;
}

.page-item .page-link {
  padding: .594rem 1.25rem;
  font-size: .9rem;
}

.page-item .page-link:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.page-item:first-child .page-link {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.page-item.active .page-link {
  border: 1px solid #0078b9;
}

.page-link {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid #e1e1e1;
  color: #13181e;
}

.page-link:hover, .page-link:focus {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid 1px solid #e1e1e1;
  color: #13181e;
}

/******** 11.26 Progress ********/
.progress {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.progress.thin {
  height: 3px;
}

.progress.small {
  height: 5px;
}

.progress.medium {
  height: 8px;
}

.progress.lg {
  height: 10px;
}

/******** 11.27 Spinners ********/
.spinner-w1 {
  width: 1rem;
  height: 1rem;
}

.spinner-w2 {
  width: 2rem;
  height: 2rem;
}

.spinner-w3 {
  width: 3rem;
  height: 3rem;
}

.spinner-w5 {
  width: 5rem;
  height: 5rem;
}

/******** 11.28 Off Canvas ********/
.offcanvas-start {
  border-right: 0;
}

.offcanvas-end {
  border-left: 0;
}

.offcanvas-bottom {
  border-top: 0;
}

.offcanvas-top {
  border-bottom: 0;
}

/******** 11.29 Off Canvas ********/
.popover {
  border: 1px solid #e1e1e1;
}

.popover-header {
  background: #F3F2F7;
  border-bottom: 1px solid #e1e1e1;
  padding: 10px 15px;
  font-weight: 600;
}

/************* 11.30 Row Gutters *************/
.gutters {
  margin-right: -10px;
  margin-left: -10px;
}

.gutters > .col,
.gutters > [class*="col-"] {
  padding-right: 10px;
  padding-left: 10px;
}
/*# sourceMappingURL=main.css.map */


/* ----- Left Menu ----------------------*/

.iconMenu {


  margin: 2px;
  cursor: pointer;
  position: relative;

  color: #27aae0;
  width: 65px;
  height: 65px;
  padding: 10px;
  font-size: 2.2rem;
  color: #0078b9;
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  /* display: inline-flex; */
  display: inline-block;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 16px;
  border: 1px solid transparent;

}

.iconMenu:hover {

  background-color: #f0f4ff;
  color: #27aae0;
  width: 65px;
  height: 65px;
  border: 1px solid #d0d8f0;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
  transition: all 0.2s ease;
  font-size: 2.2rem;
  color: #2f49dd;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 16px;
}


.iconMenu:active {
  transform: scale(0.9); /* Réduction temporaire de la taille */
}

/* Style pour l'élément sélectionné */
.iconMenu.selected {
  background-color: #27aae0;
  color: white;
}



.tooltipText {
  display: none;
  position: fixed;
  padding: 5px 10px;
  background-color: #0078b9;
  color: #fff;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1000;
  font-size: 14px;
  top: 50%;
  margin-top: 20px;
}

.tooltipText::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px; /* Adjust this value to position the arrow properly */
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent #0078b9 transparent transparent;
}

.iconMenu:hover .tooltipText {
  display: block;
}

.icon-navbar{  
  color: #2f49dd;
}

.icon-setting{  
  font-size: 1.3rem;
}

.icon-task{
  font-size: 1.2rem;
}

/* Style spécifique pour les icônes de fichiers dans le datagrid */
.openFilePDF.icon-task {
  position: relative;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.openFilePDF.icon-task:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.85);
}

.openFilePDF.icon-task:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Styles pour les autres variantes de classes d'icônes de fichiers */
.openFilePDFCreated.icon-task,
.openFilePDFReceive.icon-task,
.openFilePDFTreated.icon-task,
.openFilePDFInitiated.icon-task,
.openFilePDFOntheway.icon-task,
.openFilePDFNPTOngoing.icon-task,
.openFilePDFNPTCreated.icon-task,
.openFilePDFNPTReceive.icon-task,
.openFilePDFNPTTreated.icon-task,
.openFilePDFNPTInitiated.icon-task {
  position: relative;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.openFilePDFCreated.icon-task:hover,
.openFilePDFReceive.icon-task:hover,
.openFilePDFTreated.icon-task:hover,
.openFilePDFInitiated.icon-task:hover,
.openFilePDFOntheway.icon-task:hover,
.openFilePDFNPTOngoing.icon-task:hover,
.openFilePDFNPTCreated.icon-task:hover,
.openFilePDFNPTReceive.icon-task:hover,
.openFilePDFNPTTreated.icon-task:hover,
.openFilePDFNPTInitiated.icon-task:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.85);
}

.openFilePDFCreated.icon-task:active,
.openFilePDFReceive.icon-task:active,
.openFilePDFTreated.icon-task:active,
.openFilePDFInitiated.icon-task:active,
.openFilePDFOntheway.icon-task:active,
.openFilePDFNPTOngoing.icon-task:active,
.openFilePDFNPTCreated.icon-task:active,
.openFilePDFNPTReceive.icon-task:active,
.openFilePDFNPTTreated.icon-task:active,
.openFilePDFNPTInitiated.icon-task:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.icon-dashboard{  
  font-size: 1.5rem;
}

.cadre-parapheur {
  border-bottom: 1px solid #c4c5c3;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px;
  text-align: left;
}

.cadre-stat-tache{
  margin-bottom: 10px;  
  color: #5a5a5a;
  font-weight: 500;
}

.cadre-stat-tache:hover{
  margin-bottom: 10px;  
  color: #0f59c9;
  font-weight: 600;
}

.label-qte-elt{
  cursor: pointer !important;

}

.text-setting{
  padding-top: 4px;
}


/*  ---- nav sitebar -----------*/
.itemMenuParametrage {
  float: left;
  margin: 10px;
  color: #000;
  width: 130px;
  height: 80px;
  padding: 10px;            
  border: 1px solid #acb2bc;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
  text-align: center;
}

.itemMenuParametrage:hover {
  float: left;
  margin: 10px;
  background-color: white;
  color: #0078b9;
  width: 130px;
  height: 80px;
  border: 1px solid #8c96dc;
  padding: 8px;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(200, 3, 254, 0.2), 0 6px 20px 0 rgba(229, 204, 242, 0.19);
  transition: width 0.4s ease-in-out;
  cursor: pointer;
  text-align: center;
}


.itemPageMenuParametrage {
  float: left;
  margin: 10px;
  color: #000;
  width: 150px;
  height: 90px;
  padding: 10px;            
  border: 1px solid #acb2bc;
  border-radius: 25px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
  text-align: center;
}

.itemPageMenuParametrage:hover {
  float: left;
  margin: 10px;
  background-color: white;
  color: #0078b9;
  width: 150px;
  height: 90px;
  border: 1px solid #8c96dc;
  padding: 8px;
  border-radius: 25px;
  box-shadow: 0 2px 4px 0 rgba(200, 3, 254, 0.2), 0 6px 20px 0 rgba(229, 204, 242, 0.19);
  transition: width 0.4s ease-in-out;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
}

.user-connect-title{
  padding: 15px;
  border-bottom: solid 1px #acb2bc;
}

.welcomeTilte{
  font-size: 16px;  
  font-weight: bold;
  color: #000;
}
.welcomeSubTilte{
  font-size: 15px;  
  color: #8e9197; 
  margin-top: 10px;
}


.status-user {
  
  width: 18px;
  height: 18px;  
  border-radius: 30px;
  
}

.encoursGreen {
  
  width: 40px;
  height: 40px;  
  border-radius: 30px;
  background-color: #0a8154;
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 5px;
  
}

.encoursRed {
  
  width: 40px;
  height: 40px;  
  border-radius: 30px;
  background-color: #cf2323;
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 5px;
  
}

.encoursOrange {
  
  width: 40px;
  height: 40px;  
  border-radius: 30px;
  background-color: #c29007;
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 5px;
  
}


.occupe {
  background: #EB3333;
}

.enline {
  background: #149865;
}

.onleave {
  background: #dfdada;
}

.onmission {
  background: #65a6ff;
}

.ontraining {
  background: #11604e;
}

.onmeeting {
  background: #984dff;
}

.onbreak {
  background: #d86c0c;
}

.onoutofofficek {
  background: #716e6e;
}

.ligne-statut{
  padding: 10px;
  margin: 0px;
  cursor: pointer;
  border-bottom: solid 1px #acb2bc;
  color: #000;
}

.ligne-statut:hover{
  padding: 10px;
  margin: 0px;
  cursor: pointer;
  border-bottom: solid 1px #acb2bc;
  color: #1d70ee;
  font-weight: bold;
}

.cadre-logout{
  padding: 10px 70px 10px 70px;
  text-align: center;
}

.badgeInside {
  font-size: 11px;
  font-weight: bold;
  line-height: 19px;
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 4px 0 5px;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
  color: #fff;
  border-radius: 10px;
  background-color: #2ecc71;
  position: absolute;
  margin-left: 20px;
  margin-top: 0px;
  z-index: 99999999999200;
}


.ligne-menu-dashboard{
  padding: 5px;
  margin: 8px;
  cursor: pointer;  
  color: #000;
}

.ligne-menu-dashboard:hover{
  padding: 5px;
  margin: 8px;
  cursor: pointer;
  border: solid 1px #b6c0f9;
  color: #1d70ee;
  font-weight: bold;
  border-radius: 10px;
}


/* ----------------------- DEBUT CSS CHART ------------------------------ */

            .pie {
            --p: 5;
            --b: 8px;
            --c: darkred;
            --w: 80px;

            width: var(--w);
            aspect-ratio: 1;
            position: relative;
            display: inline-grid;
            margin: 5px;
            place-content: center;
            font-size: 20px;
            font-weight: bold;
            font-family: sans-serif;
            opacity: 0.8;
            }
            .pie:before,
            .pie:after {
            content: "";
            position: absolute;
            border-radius: 50%;
            }
            .pie:before {
            inset: 0;
            background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b)
                var(--b) no-repeat,
                conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
            -webkit-mask: radial-gradient(
                farthest-side,
                #0000 calc(99% - var(--b)),
                #000 calc(100% - var(--b))
            );
            mask: radial-gradient(
                farthest-side,
                #0000 calc(99% - var(--b)),
                #000 calc(100% - var(--b))
            );
            }
            .pie:after {
            inset: calc(50% - var(--b) / 2);
            background: var(--c);
            transform: rotate(calc(var(--p) * 3.6deg))
                translateY(calc(50% - var(--w) / 2));
            }
            .animate {
            animation: p 1s 0.5s both;
            }
            .no-round:before {
            background-size: 0 0, auto;
            }
            .no-round:after {
            content: none;
            }
            @keyframes p {
            from {
                --p: 0;
            }
            }  
            
            
            
            .piesmall {
              --p: 5;
              --b: 5px;
              --c: darkred;
              --w: 50px;
  
              width: var(--w);
              aspect-ratio: 1;
              position: relative;
              display: inline-grid;
              margin: 5px;
              place-content: center;
              font-size: 14px;
              font-weight: bold;
              font-family: sans-serif;
              opacity: 0.8;
              }
              .piesmall:before,
              .piesmall:after {
              content: "";
              position: absolute;
              border-radius: 50%;
              }
              .piesmall:before {
              inset: 0;
              background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b)
                  var(--b) no-repeat,
                  conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
              -webkit-mask: radial-gradient(
                  farthest-side,
                  #0000 calc(99% - var(--b)),
                  #000 calc(100% - var(--b))
              );
              mask: radial-gradient(
                  farthest-side,
                  #0000 calc(99% - var(--b)),
                  #000 calc(100% - var(--b))
              );
              }
              .piesmall:after {
              inset: calc(50% - var(--b) / 2);
              background: var(--c);
              transform: rotate(calc(var(--p) * 3.6deg))
                  translateY(calc(50% - var(--w) / 2));
              }
              .animatesmall {
              animation: p 1s 0.5s both;
              }
              .no-roundsmall:before {
              background-size: 0 0, auto;
              }
              .no-roundsmall:after {
              content: none;
              }
              @keyframes p {
              from {
                  --p: 0;
              }
              }    

            
            
            
.algcenter {
  align-items: center;
  display: flex;
  justify-content: center;
}

.algright {
  display: inline-block;
  text-align: right;
}

.alingcenter {
  padding-top: 30px;
  text-align: center;
}

.alingRight {
  text-align: right;
}

/* ----------------------- FIN CSS CHART ------------------------------ */
/*
.actions.show-actions .task-icon-button {

    height: 20px;
    width: 20px;
    margin-right: 0px;
    cursor: pointer;
    color: #808083;
    align-items: center;
    justify-content: center;
}

.actions.show-actions .task-icon-button:hover {
 
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 20px; 
  padding: 4px; 
  height: auto; 
  width: auto; 
  color: #fff;
  cursor: pointer;

  background-color: #e5e2e2;
}*/



  /* ----------------------- FIN CSS CHART ------------------------------ */

  .task-icon-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 24px;
      width: 24px;
      margin-right: 1px;
      margin-left: 4px;
      color: #808083;
      cursor: pointer;
      border-radius: 50%;
      transition: background-color 0.15s ease, color 0.15s ease;
  }

  .task-icon-button i {
      font-size: 0.90rem;
      transition: none;
  }

  .task-icon-button:hover {
      color: #fff;
      background-color: #667eea;
      box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
  }

  .task-icon-button:hover i {
      font-size: 0.90rem;
  }

  .task-icon-button:active {
      transform: scale(0.95);
      background-color: #5a67d8;
  }

  /* Conteneur des boutons d'action - poussé à droite */
  .actions.show-actions ul.pagination {
      margin-right: 0;
      padding-right: 15px;
      justify-content: flex-end;
  }


.ligneDataGray{
  background-color: #fff;
  cursor: pointer;
}

.ligneDataGray:hover{
  background-color: #bec4fc;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}



/* Tronquer le texte du message - géré par JavaScript DatagridRowHover */
.ligneDataGray td:nth-child(5) {
  transition: max-width 0.2s ease;
}

.textboldP{
  font-weight: bold;
}

.top35{
  margin-top: 35px;
}

.top30{
  margin-top: 30px;
}
       
.top25{
  margin-top: 25px;
}
.top20{
  margin-top: 20px;
}
.top15{
  margin-top: 15px;
}
.top10{
  margin-top: 10px;
}
.top5{
  margin-top: 5px;
}

.top-50{
  margin-top: -50px;
}

.top-35{
  margin-top: -35px;
}
.top-25{
  margin-top: -25px;
}
.top-20{
  margin-top: -20px;
}
.top-15{
  margin-top: -15px;
}
.top-10{
  margin-top: -10px;
}
.top-5{
  margin-top: -5px;
}

.witdh50{
  width: 50px;
}

.witdh20{
  width: 20px;
}

.witdh430{
  width: 437px;
}

.witdh500{
  width: 500px;
}
.witdh550{
  width: 550px;
}
.witdh700{
  width: 700px;
}
.witdh750{
  width: 750px;
}
.witdh850{
  width: 850px;
}
.witdh1000{
  width: 1000px;
}
.witdh1280{
  width: 1280px;
}

.witdh100p{
  width: 100%;
}

.dropdown-menu-perso{
  background-color: #0545a5; border-radius: 0px; color: #fff; margin-top: -15px;
}


.inputSearch{
  width: 200px;
  box-sizing: border-box;
  border: 1px solid #8c96dc;
  border-radius: 20px;
  font-size: 16px;
  background-color: white;
  background-image: url('images/searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 6px 10px 6px 40px;
  transition: width 0.4s ease-in-out;
  }

  .inputSearch:focus {
      width: 100%;
      border: 1px solid #8c95dd;
  }

  .itemMenu{
    width: auto;
    min-width: 100px;
    padding: 8px;
    color: rgb(14, 14, 16);
    font-size: 14px;
    font-weight: bold;
    color: #1d7198;
    border-radius: 20px;
    background-color: #fff;
    /*border-bottom: solid 1px #3a9ddc;*/
    margin-top: 7px;
    text-align: left;
}

.itemMenu:hover{
    width: auto;
    min-width: 100px;
    padding: 8px;
    color: rgb(14, 14, 16);
    font-size: 15px;
    font-weight: bold;
    color: #3a9ddb;
    border-radius: 10px;
    background-color: #d7def6;                
    box-shadow: 2px 8px 20px #0c2a6a33;
    margin-top: 7px;
    text-align: left;
}

.elementv100{
  width: 100%
}

.iconBC{
  font-size: 65px;
  color: #1395ba;
}

.ml10{
  margin-left: 10px;
}
.ml-70{
  margin-left: -70px;
}

.eltBold{
  font-weight: bold !important;
}

.w100p{
  width: 100%;
}

.formatText{
  font-family: "Century Gothic";
  line-height: 22px;
  font-size: 16px;
  text-align: justify;
  color: #000;

}

.textBoldBlue{
  font-weight: bold;
  color: #0545a5;
}


.list-group-item {
  cursor: grab;
}
.list-group-item.dragging {
  position: absolute;
  z-index: 100;
  opacity: 0.5;
}

.cadreEltlist{
  border: 1px solid #f2f2f2;
}

.cadreEltlist:hover{
  border: 1px solid #ccc;
  background-color: #f4f4f4;
}


.cadreEltlistPrg{  
  border: 1px solid #ccc;
  background-color: #f4f4f4;
}

.cadreEltlistPrg:hover{
  border: 1px solid #f2f2f2;
}

.cadreEltlistKPI{
  border: 1px solid #ccc;
}

.cadreEltlistKPI:hover{
  border: 1px solid #ccc;
  background-color: #f4f4f4;
}
.operationText{
  font-size: 14px;
  color: #000;
  font-weight: bold;
  padding-left: 8px;
}
.operationText-white{
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  padding-left: 8px;
}


/* ------------------------ form wizard begin----------------------------*/

.wizard-content-left {
  background-blend-mode: darken;
  background-color: rgba(0, 0, 0, 0.45);
  background-position: center center;
  background-size: cover;
  height: 100vh;
  padding: 30px;
}
.wizard-content-left h1 {
  color: #ffffff;
  font-size: 38px;
  font-weight: 600;
  padding: 12px 20px;
  text-align: center;
}

.form-wizard {
  color: #888888;
  padding: 10px;
  padding-top: 0px;
}
.form-wizard .wizard-form-radio {
  display: inline-block;
  margin-left: 5px;
  position: relative;
}
.form-wizard .wizard-form-radio input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-color: #dddddd;
  height: 25px;
  width: 25px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}
.form-wizard .wizard-form-radio input[type="radio"]:focus {
  outline: 0;
}
.form-wizard .wizard-form-radio input[type="radio"]:checked {
  background-color: #fb1647;
}
.form-wizard .wizard-form-radio input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  display: inline-block;
  background-color: #ffffff;
  border-radius: 50%;
  left: 1px;
  right: 0;
  margin: 0 auto;
  top: 8px;
}
.form-wizard .wizard-form-radio input[type="radio"]:checked::after {
  content: "";
  display: inline-block;
  webkit-animation: click-radio-wave 0.65s;
  -moz-animation: click-radio-wave 0.65s;
  animation: click-radio-wave 0.65s;
  background: #000000;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
  border-radius: 50%;
}
.form-wizard .wizard-form-radio input[type="radio"] ~ label {
  padding-left: 10px;
  cursor: pointer;
}
.form-wizard .form-wizard-header {
  text-align: center;
  margin-top: -25px;
  margin-bottom: -20px;
}
.form-wizard .form-wizard-next-btn, .form-wizard .form-wizard-previous-btn, .form-wizard .form-wizard-submit {
  background-color: #27aae0;
  color: #ffffff;
  display: inline-block;
  min-width: 100px;
  min-width: 120px;
  padding: 10px;
  text-align: center;
}
.form-wizard .form-wizard-next-btn:hover, .form-wizard .form-wizard-next-btn:focus, .form-wizard .form-wizard-previous-btn:hover, .form-wizard .form-wizard-previous-btn:focus, .form-wizard .form-wizard-submit:hover, .form-wizard .form-wizard-submit:focus {
  color: #ffffff;
  opacity: 0.6;
  text-decoration: none;
}
.form-wizard .wizard-fieldset {
  display: none;
}
.form-wizard .wizard-fieldset.show {
  display: block;
}
.form-wizard .wizard-form-error {
  display: none;
  background-color: #d70b0b;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
}
.form-wizard .form-wizard-previous-btn {
  background-color: #fb1647;
}
.form-wizard .form-control {
  font-weight: 500;
  height: auto !important;
  padding: 6px;
  color: #000000;
  background-color: #ffffff;
  border: solid 1px #000;
}
.form-wizard .form-control:focus {
  box-shadow: none;
}
.form-wizard .form-group {
  position: relative;
  margin: 10px 0;
}
.form-wizard .wizard-form-text-label {
  position: absolute;
  left: 10px;
  top: 10px;
  transition: 0.2s linear all;
}
.form-wizard .focus-input .wizard-form-text-label {
  color: #27aae0;
  top: -18px;
  transition: 0.2s linear all;
  font-size: 12px;
}
.form-wizard .form-wizard-steps {
  margin: 30px 0;
}
.form-wizard .form-wizard-steps li {
  width: 32%;
  float: left;
  position: relative;
}
.form-wizard .form-wizard-steps li::after {
  background-color: #f3f3f3;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  border-bottom: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
}
.form-wizard .form-wizard-steps li span {
  background-color: #dddddd;
  border-radius: 50%;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  position: relative;
  text-align: center;
  width: 40px;
  z-index: 1;
}
.form-wizard .form-wizard-steps li:last-child::after {
  width: 50%;
}
.form-wizard .form-wizard-steps li.active span, .form-wizard .form-wizard-steps li.activated span {
  background-color: #27aae0;
  color: #ffffff;
}
.form-wizard .form-wizard-steps li.active::after, .form-wizard .form-wizard-steps li.activated::after {
  background-color: #27aae0;
  left: 50%;
  width: 50%;
  border-color: #27aae0;
}
.form-wizard .form-wizard-steps li.activated::after {
  width: 100%;
  border-color: #27aae0;
}
.form-wizard .form-wizard-steps li:last-child::after {
  left: 0;
}
.form-wizard .wizard-password-eye {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
@keyframes click-radio-wave {
  0% {
    width: 25px;
    height: 25px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    width: 60px;
    height: 60px;
    margin-left: -15px;
    margin-top: -15px;
    opacity: 0.0;
  }
}
@media screen and (max-width: 767px) {
  .wizard-content-left {
    height: auto;
  }
}


/* ------------------------ form wizard End----------------------------*/




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

th, td {
  border: 0px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

.actions {
  position: absolute;
  right: 28%;
  opacity: 0;
  width: 0px;
  visibility: hidden;
}

.barreInfoTache {
  display: none;
}


tr:hover .actions {
  opacity: 1;
  width: 150px;
  right: 28%;
  border: 0px solid #ddd;
  visibility: visible;
  /* position: relative; */
}

.hide-actions {
  display: none;
}

/* .show-actions {
  display: block;
} */

tr:hover .barreInfoTache {
  display: block;
}


.action-button {
  margin-right: 8px;
}



table tr:hover td {
  padding-left: 10px;
  padding-right: 10px;
}

table tr:hover button {
  margin-left: 10px;
  margin-right: 10px;
}


.boutonTop {
  

}


/* (A) BUILD TOOLTIP USING BEFORE PSEUDO-CLASS */
[data-tooltip]::before {
  content: attr(data-tooltip);
}

/* (B) POSITION TOOLTIP */
[data-tooltip] {
  position: relative;
  display: inline-block;
}
[data-tooltip]::before {
  position: absolute;
  z-index: 99999999;
}
[data-tooltip].top::before {
  bottom: 100%;
  margin-bottom: 10px;
}
[data-tooltip].bottom::before {
  top: 100%;
  margin-top: 10px;
}
[data-tooltip].left::before {
  right: 100%;
  margin-right: 10px;
}
[data-tooltip].right::before {
  left: 100%;
  margin-left: 10px;
}

/* (C) SHOW TOOLTIP ONLY ON HOVER */
[data-tooltip]::before {
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s;
}
[data-tooltip]:hover::before {
  visibility: visible;
  opacity: 1;
}

/* (D) STYLE THE TOOLTIP */
[data-tooltip] { 
    /* background: #fea;  */
}
[data-tooltip]::before {
  background: #27aae0;
  color: #fff;
  padding: 5px;
  min-width: 70px;
  width: auto;
  text-align: center;
  white-space: nowrap;
  border-radius: 8px;
}


#boutonElement { 
  display: none; 
  height: 30px;
  padding: 15px;
  margin-top: -10px;
  margin-bottom: 15px;
  
}


.iconRoundedNext {
  /*background-color: white;*/
  color: #636366;
  /* border-radius: 50%;
  border: 1px solid #636366; */
  padding: 4px;
  width:25px;
  height:25px;
  /*box-shadow: 0 2px 4px 0 rgba(300, 4, 259, 0.2), 0 6px 20px 0 rgba(129, 104, 142, 0.11);
  box-shadow: 0 0.25em 0 #c3c6d1;*/
  transition: width 0.4s ease-in-out;
  margin-left: 15px;
  margin-bottom: 10px;  
  cursor: pointer;
  text-align: center;
}
.iconRoundedNext:hover {
  background-color: #e5e2e2;
  color: #636366;
  /*border-radius: 50%;*/
  border: 0px solid #636366;
  padding: 4px;
  width:25px;
  height:25px;
  box-shadow: 0 2px 4px 0 rgba(200, 3, 254, 0.2), 0 6px 20px 0 rgba(229, 204, 242, 0.19);
  margin-left: 15px;
  margin-bottom: 10px;  
  cursor: pointer;
  text-align: center;
  /*box-shadow: 0 0.25em 0 #c3c6d1;*/
}






/* .titreTache:hover  .barreInfoTache {
  display: block;
} */

.mgl-50{
  margin-left: 50px; 
  overflow: hidden;
}

.mglr-15{
  margin-left: 15px;
  margin-right: 15px;
}

.avaterw30{
  width: 30px;
}


.avatar1 {
  position: relative;
  margin: 0;
  width: 38px;
  height: 38px;
  border-radius: 40px;
  background-color: #f5f5f5;
  text-align: center;
  vertical-align: middle;
  margin-right: 10px;
  padding-top: 5px;
  
}

.iconDetailTask{
  font-size: 25px;
}

.listeEtapeSaute{
  margin-top: 10px; 
  width: 100%;
  margin-bottom: 10px;
}

.bgGris{
  background-color: #dcdada;
  padding-top: 8px;
  padding-bottom: 8px;
}

.ml3px{
  margin-left:3px
}
.mt15m{
  margin-top: -15px;
}
.mt-30{
  margin-top: -30px;
}

.mt-20{
  margin-top: -20px;
}
.mt-15{
  margin-top: -15px;
}

.mr-40{
  margin-right: -40px;
}

.mr-38{
  margin-right: -38px;
}




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

.pdbtm-15{
  padding-bottom: -15px;
}

.mr15{
  margin-right: 15px;
}

.fz15{
  font-size: 15px;
}

.cadreParafeur{
  border: solid 1px #ccc;
  background-color: #dbe1e9;
  border-radius: 20px;
  margin-top: 15px;
  padding: 5px;
}

.curpt{
  cursor: pointer;
}

.mlm20{
  margin-left: -20px;
}

.ml20{
  margin-left: 20px;
}
.ml40{
  margin-left: 40px;
}
.ml70{
  margin-left: 70px;
}
.bg-red-light{
  background-color: #fee9e9;
}

.btsolid{
  border-top: solid 1px #000000;
}

.ptop10{
  padding-top: 10px;
}
.ptop15{
  padding-top: 15px;
}
.pd10{
  padding: 10px;
}
.pd5{
  padding: 5px;
}
.pd8{
  padding: 8px;
}
.pd1{
  padding: 1px;
}
.ml8{
  margin-left: 8px;
}

.bordCard{
  border: solid 1px #d6d8fc;
}
.textBold500{
  font-weight: 500;
}
.textBold{
  font-weight: 700;
}
.textZise15{
  font-size: 16px;
}
.textZise16{
  font-size: 16px;
}

.slttachep{
  margin-top: -10px; 
  margin-bottom: -20px;
}

.positionBPview{
  position: absolute; 
  right: 20px; 
  top: 30px;
}

.prelineWS {
  word-break: break-all;
}
.fsTreatmentOp{
  font-size: 16px;
}

.bgHeaderLP{
  background-color: #0078b9;
  color: #fff;
}

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

.rounded-circle {
  border-radius: 50% !important;
}

.ms-2 {
  margin-left: .5rem !important;
}

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

.chat-time {
  font-size: 13px;
  color: #6c757d;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.chat-left-msg-bleu {
  width: fit-content;
  background-color: #dcedff;
  padding: 0.80rem;
  border-radius: 12px;
    border-top-left-radius: 12px;
  max-width: 480px;
  text-align: left;
  border-top-left-radius: 0;
}

.chat-left-msg-gris {
  width: fit-content;
  background-color: #eff2f5;
  padding: 0.80rem;
  border-radius: 12px;
    border-top-left-radius: 12px;
  max-width: 480px;
  text-align: left;
  border-top-left-radius: 0;
}

.chat-left-msg-gris100 {
  width: fit-content;
  background-color: #eff2f5;
  padding: 0.80rem;
  border-radius: 12px;
    border-top-left-radius: 12px;
  max-width: 100%;
  text-align: left;
  border-top-left-radius: 0;
}

.chat-left-msg {
  width: fit-content;
  background-color: #eff2f5;
  padding: 0.80rem;
  border-radius: 12px;
    border-top-left-radius: 12px;
  max-width: 480px;
  text-align: left;
  border-top-left-radius: 0;
}

.cadreLeftMsg{
  width: fit-content;
  background-color: #eff2f5;
  padding: 0.80rem;
  border-radius: 12px;
    border-top-left-radius: 12px;
  max-width: 480px;
  text-align: left;
  border-top-left-radius: 0;
}

.cadreRightMsg{
  width: fit-content;
  background-color: #dcedff;
  padding: 0.80rem;
  border-radius: 12px;
    border-bottom-right-radius: 12px;
  float: right;
  max-width: 480px;
  text-align: left;
  border-bottom-right-radius: 0;
}

.cadreJourReunion{
  background: #dcddf1;
  color: #000;
  text-align: center;
  font-weight: bold;
}

.mr30{
  margin-right: 30px;
}

.textADroite{
  text-align: right;
}

/* ------------------------Debut Gantt CSS -------------------------- */



/* ------------------------Fin Gantt CSS -------------------------- */


.nobarrehz {
  overflow-x: hidden !important;
}

.nobarrevt {
  overflow-y: hidden !important;
}


.itemViewMeetingRoom {
  float: left;
  margin: 20px;
  color: #000;
  width: 96%;
  min-height: 60px;
  height: auto;
  padding: 10px;            
  border: 5px solid #acb2bc;
  border-radius: 25px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
  text-align: center;
}

.itemViewMeetingRoom:hover {
  float: left;
  margin: 20px;
  background-color: white;
  color: #0078b9;
  width: 96%;
  min-height: 60px;
  height: auto;
  border: 1px solid #8c96dc;
  padding: 8px;
  border-radius: 25px;
  box-shadow: 0 2px 4px 0 rgba(200, 3, 254, 0.2), 0 6px 20px 0 rgba(229, 204, 242, 0.19);
  transition: width 0.4s ease-in-out;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
}



.itemViewMeetingRoomBlue {
  float: left;
  margin: 20px;
  color: #000;
  background-color: #1395ba;
  width: 96%;
  min-height: 60px;
  height: auto;
  padding: 10px;            
  border: 1px solid #acb2bc;
  border-radius: 25px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
  text-align: center;
}

.itemViewMeetingRoomBlue:hover {
  float: left;
  margin: 20px;
  background-color: white;
  color: #0078b9;
  width: 96%;
  min-height: 60px;
  height: auto;
  border: 1px solid #8c96dc;
  padding: 8px;
  border-radius: 25px;
  box-shadow: 0 2px 4px 0 rgba(200, 3, 254, 0.2), 0 6px 20px 0 rgba(229, 204, 242, 0.19);
  transition: width 0.4s ease-in-out;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
}

.paginationBar{
  display: none;
}

.dataTableNov{
  display: none;
}

.tableLoading.visible {
  margin-left: 50%!important;
  display: block!important;
}

.alertSuccess{
  width: auto;
  min-width: 300px;
  position: fixed;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;  
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  border-radius: 25px;
  display: none;
}

.alertWarning{
  width: auto;
  min-width: 300px;
  position: fixed;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;  
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  border-radius: 25px;
  display: none;
}

.alertSuccessNotification{
  width: auto;
  min-width: 300px;
  position: fixed;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;  
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  border-radius: 25px;
  display: none;
}

.alertWarningNotification{
  width: auto;
  min-width: 300px;
  position: fixed;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;  
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  border-radius: 25px;
  display: none;
}


.alertWarningModal{
  width: auto;
  min-width: 300px;
  position: fixed;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;  
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  border-radius: 25px;
  display: none;
}

.invalid {
  border-color: red;
}

.valid {
  border-color: green;
}

.alignend{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}


.color-blue {
  color: #0f59c9;
}

.color-green {
  color: #128e0a;
}

.color-orange {
  color: #dba905;
}

.color-red {
  color: #d70b0b;
}


/* DEBUT CSS AUTOCOMPLETE */

/* .autocomplete {
  background-color: #fff;
  cursor: text;
  display: inline-block;
  position: relative;
  width: 100%;
}

.autocomplete-item {
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
  cursor: pointer;
  padding: 10px;
}

.autocomplete-item:hover {
  background-color: #e9e9e9;
}

.autocomplete-list {
  border: #d4d4d4 solid 1px;
  border-top: none;
  color: #0078b9;
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  font-weight: bold;
  left: 0;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 99;
}

.inputAutoComplete {
  border: none;
  border-color: #fff;
  height: 35px;
  margin-top: -5px;
  width: 50px;
}

.inputAutoComplete:focus {
  border-color: #fff;
  height: 35px;
  margin-top: -5px;
  outline: none;
  width: 50px;
}

.selected-item {
  align-items: center;
  background-color: #e7e8fd;
  border-radius: 5px;
  color: #0078b9;
  display: inline-flex;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
  margin-right: 8px;
  padding: 5px 6px;
}

.selected-items {
  border: #d4d4d4 solid 1px;
  display: flex;
  flex-wrap: wrap;
  height: auto;
  min-height: 40px;
  padding: 5px;
  width: 100%;
}

.remove-button {
  background-color: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  font-weight: bold;
  margin-left: 5px;
  padding: 0;
}

.remove-button:hover {
  color: #f00;
} */

.autocomplete {
  background-color: #fff;
  cursor: text;
  display: inline-block;
  position: relative;
  width: 100%;
}

.autocomplete input {
  border-color: #fff;
  border: none;
  height: 35px;
  margin-top: -2px;
  outline: none;
  width: 50px;
}

.autocomplete-list {
  position: absolute;
  z-index: 99999!important;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #cccccc;
  border: 0px solid #d4d4d4;
  max-height: 200px;
  overflow-y: auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  flex-direction: column;
  border: 0px solid #ccc; /* Border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow */
  border-top: none;
  
}

.autocomplete-item {
  padding-left: 10px;
  cursor: pointer;
}

.autocomplete-item:hover {
  background-color: #0d87da;
  color: #ffffff;
}

.selected-item {
  align-items: center;
  background-color: #ffffff;
  border: #d4d4d4 solid 1px;
  border-radius: 5px;
  color: #5f6368;
  display: inline-flex;
  font: 400 .855rem 'Lato', sans-serif;
  /* font-family: "Google Sans","Roboto","RobotoDraft",Helvetica,Arial,sans-serif; */
  /* font-size: 14px; */
  font-weight: bold;
  margin-bottom: 2px;
  margin-right: 8px;
  padding: 3px 4px;
}

.selected-item:hover {
  align-items: center;
  background-color: #ffffff;
  border: #d4d4d4 solid 1px;
  border-radius: 5px;
  color: #000;
  display: inline-flex;
  font: 400 .855rem 'Lato', sans-serif;
  /* font-family: "Google Sans","Roboto","RobotoDraft",Helvetica,Arial,sans-serif; */
  /* font-size: 12px; */
  font-weight: bold;
  margin-bottom: 2px;
  margin-right: 8px;
  padding: 3px 4px;
}
/* .selected-item {
  background: var(--pkw-background,#fff);
  border-radius: 50vh;
  box-shadow: 0 0 0 1px var(--pkw-outline,rgb(218,220,224)) inset;
  color: var(--pkw-on-surface-variant,rgb(95,99,104));
  display: -moz-box;
  display: flex;
  display: inline-block;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-direction: column;
  -moz-box-pack: center;
  justify-content: center;
  margin: 4px;
  min-width: 1px;
  outline: 1px solid transparent;
  -moz-user-select: none;
  user-select: none;
  padding: 3px 4px;
} */
.remove-button {
  margin-left: 5px;
  background-color: #f2f2f2;
  color: #000000;
  border: none;
  padding: 3px 5px;
  border-radius: 3px;
  cursor: pointer;
}

.remove-button:hover {
  margin-left: 5px;
  background-color: #f2f2f2;
  color: #c20827;
  border: none;
  padding: 3px 5px;
  border-radius: 3px;
  cursor: pointer;
}
.inputAutoComplete {
  border: none;
  border-color: #fff;
  height: 35px;
  margin-top: -5px;
  width: 50px;
}

.inputAutoComplete:focus {
  border-color: #fff;
  height: 35px;
  margin-top: -5px;
  outline: none;
  width: 50px;
}

.selected-items {
  border: #d4d4d4 solid 1px;
  display: flex;
  flex-wrap: wrap;
  height: auto;
  min-height: 40px;
  padding: 5px;
  width: 100%;
}

.cadreBautoList {
  width: 36px;
  height: 36px;
  border-radius: 25px;
  background-color: #0d87da;
  color: #ffffff;
  text-align: center;
  font-size: 18px;
}

/* FIN CSS AUTOCOMPLETE */


.titleEPSetting{
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  margin-left: 10px;
  margin-right: 10px;
  color: #262d3a;
}

.titleStepProcess{
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  margin-left: 10px;
  margin-right: 10px;
  color: #262d3a;
}
.timeEPSetting{
  font-size: .875rem;
  color: #6c7788;
  border: dashed 1px #0078b9 ;
  padding: 8px;
  background-color: #ffffff;
  border-radius: 25px;
}

.timeStepProcessD{
  font-size: .8rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1.5px solid currentColor;
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
}

.timeStepProcessD:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

/* Badge pour la durée de la procédure (header) - même taille que les étapes */
.timeStepProcessD.duration-header {
  font-size: .75rem;
  padding: 4px 10px;
}

.timeStepProcessS{
  font-size: .875rem;
  color: #ffffff;
  border: solid 1px #0078b9 ;
  padding: 8px;
  background-color: #0b5e95;
  border-radius: 25px;
}

.timeStepTraited{
  font-size: .875rem;
  color: #ffffff;
  border: solid 1px #0078b9 ;
  padding: 8px;
  background-color: #099d62;
  border-radius: 25px;
}

.timeSubStepProcessS{
  font-size: .875rem;
  color: #0b5e95;
  border: solid 1px #0078b9 ;
  padding: 8px;
  background-color: #ffffff;
  border-radius: 25px;
}

.percentRequest{
  font-size: .8rem;
  font-weight: 600;
  color: #ffffff;
  padding: 5px 12px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cadreEPSetting{
  height: auto;
  min-height: 10px;
}

.imoveStep{
  color: #000;
  font-size: 30px;
}


/* .sortable-container {
  position: relative;
}

.sortable-item {
  transition: transform 0.2s ease-in-out;
}

.sortable-item.dragging {
  z-index: 999;
  opacity: 0.5;
}

.sortable-item.placeholder {
  opacity: 0;
}
 */


 .sortable-container {
  position: relative;
}

.sortable-group {
  min-height: 40px;
}

.sortable-group .sortable-item.file-list-item {
  background: #ffffff !important;
  border: 1px solid #e8ecf1 !important;
  border-radius: 12px !important;
  padding: 13px 16px !important;
  margin-bottom: 7px !important;
  cursor: grab !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

.sortable-group .sortable-item.file-list-item:hover {
  background: #f4f7ff !important;
  border-color: #b8c6f7 !important;
  box-shadow: 0 3px 12px rgba(74, 108, 247, 0.1) !important;
  transform: translateY(-1px);
}

.sortable-group .sortable-item .bi-grip-vertical {
  cursor: grab;
  color: #b0b8c9;
  transition: color 0.3s, transform 0.3s;
}

.sortable-group .sortable-item:hover .bi-grip-vertical {
  color: #4a6cf7;
  transform: scale(1.15);
}

.sortable-ghost {
  background: #edf2ff !important;
  border: 2px dashed #7c9afc !important;
  border-radius: 12px !important;
  opacity: 0.4 !important;
  box-shadow: none !important;
}

.sortable-chosen {
  background: #f0f4ff !important;
  border-color: #4a6cf7 !important;
  box-shadow: 0 6px 20px rgba(74, 108, 247, 0.2) !important;
  border-radius: 12px !important;
  transform: scale(1.02) rotate(0.5deg);
}

.sortable-drag {
  opacity: 0.85 !important;
  box-shadow: 0 10px 30px rgba(74, 108, 247, 0.25) !important;
  border-radius: 12px !important;
  transform: scale(1.03);
}

.sortable-group .sortable-item.dragging {
  opacity: 0.3 !important;
}

.sortable-item.dragging {
  z-index: 999;
  opacity: 0.5;
}

.sortable-item.placeholder {
  opacity: 0;
}

.sortable-item.selected {
  opacity: 0.5;
}

.brradius20{
  border-radius: 20px;
}

#listDataSpecificPeople{
  display: none;
  height: auto;
  min-height: 10px;
  max-height: 350px;
  overflow-y: auto;
}

.cadreFormOperation{
  margin-top: 15px!important;
  padding: 5px!important;
  padding-left: 15px!important;
  margin-left: 15px!important; 
  width: 96%!important;
  margin-bottom: -10px!important;
}


.cadreFichierAttaches a:hover { color:#ff0000; }

.cadreFichierAttaches a {
		color:#666;
		font-weight:bold; font-size:13px; text-decoration:none;
	
}



/* *********************************Debut CSS Fichiers Attaches ********************************** */

.custom-file-upload {
  position: relative;
  display: inline-block;
}

.custom-file-upload input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.custom-file-upload label {
  /* display: inline-block; */
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ffffff;
  border: solid 1px #e2e2e2;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px; 
  color: rgb(5, 87, 210);
}

.custom-file-upload:hover label {
  /* display: inline-block; */
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e0ecff;
  border: solid 1px #e2e2e2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-file-upload img {
  width: 50px; /* Ajustez la taille de l'icône selon vos besoins */
  height: 50px; /* Ajustez la taille de l'icône selon vos besoins */
}



.file-upload {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.file-upload input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.file-upload label {
  display: inline-block;
  padding: 8px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#file-preview {
  margin-top: 20px;
}

#file-preview img {
  max-width: 200px;
  max-height: 200px;
  margin-right: 10px;
}

#file-info {
  margin-top: 20px;
  width: 100%;
}
.fileInfo {
  margin-top: 20px;
  width: 100%;
}

.progress-bar {
  width: 0;
  height: 100%;
  border-radius: 5px;
}

.shadeprog-red{
  background: #EB3333;
  color: #EB3333;
}

.shadeprog-orange{
  background: #dda50e;
  color: #dda50e;
}

.shadeprog-green{
  background: #149865;
  color: #149865;
}

.fileLayaut{
  background: linear-gradient(135deg, #ecedfd, #c9ccfb);
	color:#042330;
	border-bottom: 1px dotted #c3cbd6;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font: 400 .855rem 'Lato', sans-serif;
	margin-top: 5px;
	padding: 5px;
	height:40px;
	padding-top: 5px;
	padding-bottom: 3px;
	font-weight: bold;  
  height: auto;
  min-height: 20px;
  display: flex;
  align-items: center;
}

.fileLayautUpdate{
  background: linear-gradient(135deg, #fcfba6, #b7b518);
	color:#042330;
	border-bottom: 1px dotted #c3cbd6;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font: 400 .855rem 'Lato', sans-serif;
	margin-top: 5px;
	padding: 5px;
	height:40px;
	padding-top: 5px;
	padding-bottom: 3px;
	font-weight: bold;  
  height: auto;
  min-height: 20px;
  display: flex;
  align-items: center;
}

.floatright{
  float: right;
}

.ftsize20{
  font-size: 20px;
}
.color-org-ppt{
  color:#c84723;
}
.color-blue-oth{
  color:#135493;
}
.color-blue-sql{
  color:#4de1fd;
}

.dayTableTle{
  font-weight: 600;
  color:#135493;
}
.hght25{
  height: 20px!important;
}
/* *********************************FIN CSS Fichiers Attaches ********************************** */


/* 
.modal {
  z-index: 1050 !important;
}


.modal-backdrop { 
  position: relative;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}


.modal-backdrop-Internal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: none;
} */


.modal-backdrop {
  z-index: 1040 !important;
}
.modal {
  z-index: 9999;
  position: fixed;
}

/* ============================================
   MODAL AU-DESSUS DU VIEWER DE DOCUMENTS
   Le modal est DÉPLACÉ dans #modalContainerOverViewer
   qui est à l'intérieur de #fullScreenDiv
   ============================================ */
#modalContainerOverViewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
#modalContainerOverViewer .modal {
  pointer-events: auto;
}
#modalContainerOverViewer .modal-backdrop {
  pointer-events: auto;
}
/* ============================================ */

.h320 {
  height: 320px!important;
  overflow-y: auto;
}

.loadDataTable{
  display: none;
}


.h-450 {
  height: 450px !important;
}

.h-470 {
  height: 450px !important;
}

.h-550 {
  height: 550px !important;
}

.h-600 {
  height: 600px !important;
}

.h100 {
  height: 100px !important;
  overflow: hidden auto;
}

.h130 {
  height: 130px !important;
  overflow: hidden auto;
}

.h140 {
  height: 140px !important;
  overflow: hidden auto;
}

.h150 {
  height: 150px !important;
  overflow: hidden auto;
}

.h160 {
  height: 160px !important;
  overflow: hidden auto;
}

.h170 {
  height: 170px !important;
  overflow: hidden auto;
}

.h180 {
  height: 180px !important;
  overflow: hidden auto;
}

.h200 {
  height: 200px !important;
  overflow: hidden auto;
}

.h215 {
  height: 215px !important;
  overflow: hidden auto;
}

.h220 {
  height: 220px !important;
  overflow: hidden auto;
}

.mh70mh250 {
  height: auto !important;
  min-height: 70px!important;
  max-height: 250px!important;
  overflow: hidden auto;
}

.h230 {
  height: 230px !important;
  overflow: hidden auto;
}

.h250 {
  height: 250px !important;
  overflow: hidden auto;
}

.h260 {
  height: 260px !important;
  overflow: hidden auto;
}

.h275 {
  height: 275px !important;
  overflow: hidden auto;
}

.h300 {
  height: 300px !important;
  overflow: hidden auto;
}

.h350 {
  height: 350px !important;
  overflow: hidden auto;
}

.h350oh {
  height: 350px !important;
  overflow: hidden;
}

.h400 {
  height: 400px !important;
  overflow: hidden auto;
}

.h420 {
  height: 420px !important;
  overflow: hidden auto;
}

.h450 {
  height: 450px !important;
  overflow: hidden auto;
}

.h50 {
  height: 50px !important;
  overflow: hidden auto;
}

.h500 {
  height: 500px !important;
  overflow: hidden auto;
}

.hbgris {
  border-top: 1px solid #2c2d2b;
  margin-top: 8px;
  padding-top: 10px;
}




.chat-content {
  height: 480px;
  margin-left: 340px;
  padding: 85px 15px 15px;
  position: relative;
  width: auto;
}

.chat-content-leftside .chat-left-msg {
  background-color: #eff2f5;
  border-top-left-radius: 0;
}

.chat-content-leftside .chat-left-msg, .chat-content-rightside .chat-right-msg {
  border-radius: 12px;
  max-width: 480px;
  padding: 0.8rem;
  text-align: left;
  width: fit-content;
}

.chat-content-rightside .chat-right-msg {
  background-color: #dcedff;
  border-bottom-right-radius: 0;
  float: right;
}

.chat-footer {
  background: #f8f9fa;
  border-bottom-right-radius: 0.25rem;
  border-top: 1px solid rgb(0,0,0,0.125);
  bottom: 0;
  height: 70px;
  left: 360px;
  margin-bottom: 25px;
  padding: 15px;
  position: absolute;
  right: 0;
}

.chat-footer, .chat-header {
  height: 70px;
  left: 340px;
  padding: 15px;
  position: absolute;
  right: 0;
}

.chat-footer-menu a, .chat-top-header-menu a {
  border: rgb(0,0,0,0.15) solid 1px;
  border-radius: 50%;
  color: #6c757d;
  display: inline-block;
  font-size: 17px;
  height: 35px;
  line-height: 35px;
  margin: 2px;
  text-align: center;
  width: 35px;
}

.chat-header {
  background: #fff;
  border-bottom: 1px solid rgb(0,0,0,0.125);
  border-top-right-radius: 0.25rem;
  top: 0;
  z-index: 1;
}

.chat-left-msg-bleu {
  background-color: #dcedff;
  border-top-left-radius: 0;
}

.chat-list {
  height: 400px;
  position: relative;
}

.chat-list .chat-user-online::before {
  background: #16e15e;
  border-radius: 50%;
  bottom: 7px;
  box-shadow: 0 0 0 2px #fff;
  content: "";
  height: 8px;
  left: 36px;
  position: absolute;
  width: 8px;
}

.chat-list .list-group-item {
  background-color: transparent;
}

.chat-list .list-group-item, .chat-list .list-group-item:hover {
  border: rgb(0,0,0,0) solid 1px;
}

.chat-list .list-group-item.active, .chat-list .list-group-item:hover, .email-navigation a.list-group-item:hover {
  background-color: rgb(13,110,253,0.12);
}

.chat-msg, .chat-time {
  color: #6c757d;
  font-size: 13px;
}

.chat-sidebar {
  border-bottom-left-radius: 0.25rem;
  border-right: 1px solid rgb(0,0,0,0.125);
  bottom: 0;
  height: 500px;
  left: 0;
  overflow-y: hidden;
  position: absolute;
  top: 0;
  width: 340px;
  z-index: 2;
}

.chat-sidebar, .chat-sidebar-header {
  background: #fff;
  border-top-left-radius: 0.25rem;
}

.chat-sidebar-content {
  padding: 0;
}

.chat-sidebar-header {
  border-bottom: 1px solid rgb(0,0,0,0.125);
  border-right: 0 solid rgb(0,0,0,0.125);
  height: auto;
  padding: 15px;
  position: relative;
  width: auto;
}

.chat-sidebar-header .chat-user-online::before {
  bottom: 7px;
  left: 40px;
}

.chat-sidebar-header .chat-user-online::before, .email-hangout .chat-user-online::before {
  background: #16e15e;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
  content: "";
  height: 8px;
  position: absolute;
  width: 8px;
}

.chat-tab-menu .nav-pills .nav-link.active, .chat-tab-menu .nav-pills .show > .nav-link {
  background-color: rgb(0,123,255,0);
  color: #0d6efd;
}

.chat-tab-menu li a.nav-link {
  color: #4a4b4c;
  line-height: 1.2;
  padding: 0.3rem 0.2rem;
}

.chat-title {
  color: #272b2f;
  font-size: 14px;
}

.chat-toggle-btn {
  background-color: #fff;
  border: rgb(0,0,0,0.15) solid 1px;
  border-radius: 50%;
  color: #6c757d;
  cursor: pointer;
  font-size: 24px;
  height: 40px;
  line-height: 40px;
  margin-right: 15px;
  text-align: center;
  width: 40px;
}

.chat-top-header-menu a:hover {
  border: #27aae0 solid 1px;
  border-radius: 50%;
  color: #27aae0;
  display: inline-block;
  font-size: 17px;
  height: 35px;
  line-height: 35px;
  margin: 2px;
  text-align: center;
  width: 35px;
}

.chat-user-online {
  position: relative;
}

.chat-wrapper {
  background: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.1rem 0.7rem rgb(0,0,0,0.1);
  height: 550px;
  overflow-y: hidden;
  position: relative;
  width: auto;
}

.chats {
  padding: 0;
}

.chats li .chats-avatar {
  float: left;
}

.chats li .chats-hour {
  font-size: 0.65rem;
  margin: 0 0 20px 70px;
  padding: 2px;
}

.chats li .chats-hour > span {
  color: #149865;
  font-size: 0.825rem;
}

.chats li .chats-name {
  color: #6c7788;
  font-size: 0.875rem;
  margin-top: 5px;
  text-align: center;
}

.chats li .chats-text {
  background-color: #dbe1e9;
  border-radius: 20px;
  left: 15px;
  line-height: 170%;
  margin: 0 0 0 70px;
  padding: 15px;
}

.chats li .chats-text::before {
  border: solid 10px;
  border-color: transparent #dbe1e9 transparent transparent;
  content: "";
  height: 0;
  left: 52px;
  position: absolute;
  top: 28px;
  width: 0;
}

.chats li img {
  border-radius: 50px;
  height: 50px;
  width: 50px;
}

.chats li.chats-right > .chats-avatar {
  float: right;
}

.chats li.chats-right > .chats-hour, .chats li.chats-right > .chats-text {
  margin: 0 70px 0 0;
  text-align: right;
}

.chats li.chats-right > .chats-text {
  background-color: #dbe1e9;
  right: 16px;
}

.chats li.chats-right > .chats-text::before {
  border-color: transparent transparent transparent #dbe1e9;
  left: auto;
  right: 52px;
}

.chats, .chats li.chats-left, .chats li.chats-right {
  position: relative;
}

.chip {
  background-color: #f1f1f1;
  border: rgb(0,0,0,0.15) solid 1px;
  border-radius: 16px;
  box-shadow: none;
  color: rgb(0,0,0,0.7);
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  height: 32px;
  line-height: 32px;
  margin-bottom: 1rem;
  margin-right: 1rem;
  padding: 0 12px;
  transition: all 0.3s linear;
}

.chip .closebtn {
  cursor: pointer;
  float: right;
  font-size: 16px;
  font-weight: 700;
  padding-left: 10px;
}

.chip img {
  border-radius: 50%;
  float: left;
  height: 32px;
  margin: 0 8px 0 -12px;
  width: 32px;
}

.chip, .cursor-pointer {
  cursor: pointer;
}

.chip.chip-md {
  border-radius: 21px;
  height: 42px;
  line-height: 42px;
}

.chip.chip-md img {
  height: 42px;
  width: 42px;
}




/* ///////////////////////////////SLIDER /////////////////////////////////////////*/


.carousel-container {
    position: relative;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

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

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
    padding: 20px;
    padding-left: 50px;
    padding-right: 50px;
    display: none;
}

.carousel-item.active {
    display: block;
}

.carousel-control {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    /* background-color: rgba(0, 0, 0, 0.5); */
    border: none;
    color: #0d87da;
    font-size: 8rem;
    cursor: pointer;
    padding: 0px;
    z-index: 1000;
}

.carousel-control.prev {
    left: 10px;
}

.carousel-control.next {
    right: 10px;
}

.carousel-indicators {
    display: flex;
    justify-content: center;
    margin-top: 20px!important;
}

.indicator {
    background-color: #ddd;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 0 8px;
    cursor: pointer;
}

.indicator.active {
    background-color: #0d87da;
}

.fade-in {
  animation: fadeInAnimation 1s ease-in-out;
  opacity: 1;
}

@keyframes fadeInAnimation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}




.custom-audio-input {
  width: 250px;
  height: 38px;
  border: 2px solid #ccc;
  border-radius: 25px;
  background-color: #f5f5f5;
  padding: 5px;
  font-size: 16px;
  color: #0d87da;
}

.custom-audio-input::-webkit-media-controls-panel {
  background-color: #f5f5f5;
}

.custom-audio-input::-webkit-media-controls-play-button,
.custom-audio-input::-webkit-media-controls-pause-button {
  background-color: #007bff;
  color: #fff;
  border-radius: 50%;
}

.custom-audio-input::-webkit-media-controls-timeline {
  background-color: #ccc;
  height: 4px;
}

.custom-audio-input::-webkit-media-controls-current-time-display,
.custom-audio-input::-webkit-media-controls-time-remaining-display {
  color: #0d87da;
  font-size: 14px;
}


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

/* Personnaliser ------------------------------------------- */
.emojicon{
	height: 30px;
	width: 30px;
	margin: 8px;
}
.emojicon:hover{
	height: 35px;
	width: 35px;
	margin: 8px;
}



.progress {
  background-color: rgb(0,0,0,0.1);
  border-radius: 2px;
}

.progress.lg {
  height: 10px;
}

.progress.medium {
  height: 8px;
}

.progress.small {
  height: 5px;
}

.progress.thin {
  height: 3px;
}

.progressbarWidth100p {
  width: 100%;
}

.progressbarWidth10p {
  width: 10%;
}

.progressbarWidth20p {
  width: 20%;
}

.progressbarWidth30p {
  width: 30%;
}

.progressbarWidth40p {
  width: 40%;
}

.progressbarWidth50p {
  width: 50%;
}

.progressbarWidth60p {
  width: 60%;
}

.progressbarWidth70p {
  width: 70%;
}

.progressbarWidth80p {
  width: 80%;
}

.progressbarWidth90p {
  width: 90%;
}

.progressbarWidth95p {
  width: 95%;
}

.progressbarWidth98p {
  width: 98%;
}

.progressbarWidth99p {
  width: 99%;
}

.progressbarWidth100p {
  width: 100%;
}

.pt8 {
  padding-top: 8px !important;
}

.ptop10 {
  padding-top: 10px;
}

.ptop15 {
  padding-top: 15px;
}

.ptop3 {
  padding-top: 3px;
}

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

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

.radius-30 {
  border-radius: 30px;
}

.rating-block {
  line-height: 100%;
  width: 70px !important;
}

.rating-block img {
  height: 17px;
  width: 17px;
}

.fontLineNormal{
  font-size: 15px;
}

.fontLineBold{
  font-size: 15px;
  font-weight: bold;
}

.showFormOperationSendTeamMember{
  font-size: 18px;
  float: right;
  cursor: pointer;
  color: #099d62;
  font-weight: bold;
  margin-top: 15px;
  
}

.showFormOperationSendTeamMember:hover{
  font-size: 18px;
  float: right;
  cursor: pointer;
  color: #f06161;
  font-weight: bold;
  margin-top: 15px;
}


.showFormOperationGoOutOfProcedure{
  font-size: 18px;
  float: right;
  cursor: pointer;
  color: #099d62;
  font-weight: bold;
  margin-top: 15px;
}

.showFormOperationGoOutOfProcedure:hover{
  font-size: 18px;
  float: right;
  cursor: pointer;
  color: #f06161;
  font-weight: bold;
  margin-top: 15px;
}

.overlayOpenFile {
  position: fixed; /* La div reste en place même lorsque vous faites défiler la page */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  z-index: 999999999999999; /* Assurez-vous que cette div est au-dessus de toutes les autres */
  display: flex;
  justify-content: center;
  /*align-items: center;*/
  color: white; /* Texte blanc pour contraster avec le fond */
  font-size: 24px;
}



.content-file-container {  

  background-color: #fff!important;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  max-width: 90%;
  width: 90%;
  margin: 20px;
  /* text-align: center; */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  color: #000000;

}

.badge-notification{
  position:absolute;
  border-radius:50%;
  top: -10px;
  right: -12px;
  width:30px;
  height:30px;
  font-size:11px;
  font-weight:700;
  color:#ffffff;
  padding: 0;
  text-align: center;
  line-height: 26px;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(46, 139, 87, 0.35);
  display: none;
}

.badge-notification.show {
  display: flex;
  justify-content: center;
  align-items: center;
}

.shade-green {
  background: #098c1c;
  padding: 8px;
}

.shade-gray {
  background: #6f6c70;
  padding: 8px;
}

.shade-graylight {
  background: #ccc;
  padding: 8px;
}

.shade-pulple {
  background: #670679;
  padding: 8px;
}

.shade-red {
  background: #791106;
  padding: 8px;
}

.shade-orange {
  background: #c49108;
  padding: 8px;
}

.shade-yellow {
  background: #c4b808;
  padding: 8px;
}

.shade-bluedark {
  background: #110763;
  padding: 8px;
}

.shade-bluelight {
  background: #05f3fc;
  padding: 8px;
}

.shade-blueSkylight {
  background: #08f4fc;
  padding: 8px;
}



/* *********************Knowledge base Publication Start********************************** */


/*======== brand area start ======*/
.brand_area {
  padding: 60px 0 55px;
}
.br_brand {
  padding: 45px 0 120px;
}
.inner_brand_area {
  text-align: -webkit-center;
}
/* service */
.service_brand {
  margin: -80px 0 10px;
}
/*====== brand area end ======*/


/*======== blog area start  ==========*/
.blog_area{
  padding: 45px 0 60px;
}
/* inner blog area css */
.inner_blog_area {
  overflow: hidden;
  position: relative;
  padding: 8px;
  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
}
/* inner blog thumb css */
.wblogovermeta {
  position: absolute;
  z-index: 999;
}
.wblogovermeta span {
  display: inline-block;
  color: #ffffff;
  background: #1395ba;
  padding: 5px 10px;
  font-size: 14px;
  text-align: center;
}
.inner_blog_thumb{
  position: relative;
  overflow: hidden;
}
.inner_blog_img img{
  width: 100%;
  transition: .5s;
}
.inner_blog_area:hover .inner_blog_img img{
  transform: scale(1.2);
}
/* blog overlay css */
.blog_overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 50%);
  transform: scale(0);
  transition: .5s;
}
.inner_blog_area:hover .blog_overlay{
  transform: scale(1.2);
}
/* inner blog absolute css */
.inner_blog_absolute {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-block;
  color: var(--whitec);
  background: var(--brcolor);
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
}
/* inner blog text css */
.single_blog_title {
  padding: 10px 10px 10px;
  position: relative;
}
.allcostyle {
  border-style: solid;
  border-width: 0px 0px 2px 0px;
  border-color: var(--bgcolor);
}
.allcostyle:hover{
  border-color: var(--brcolor);
}
.inner_blog_text span a{
  color: #0545a5;
  font-weight: 400;
}
.inner_blog_text span {
  font-size: 11px;
  margin-right: 10px;
  color: #0545a5;
}
.inner_blog_text span i{
  margin-right: 3px;
  color: #000000;
}
/*inner blog content css */
.inner_blog_content {
  padding: 8px 0px 0px;
}
.inner_blog_content h2 a {
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 18px;
}
.inner_blog_content h2 a:hover{
  color: var(--bgcolor);
}
.inner_blog_content p{
  font-size: 14px;
}
.inner_blog_content >a{
  font-size: 14px;
  color: var(--brcolor);
}
.inner_blog_content >a:hover{
  color: var(--bgcolor);
}
/* inner blog btn css */
.inner_blog_btn {
  padding: 17px 0px 0px;
}

.inner_blog_btn a {
  font-size: 14px;
  color: var(--bgcolor);
  font-weight: 600;
  background-color: #F1F1F1;
  border-style: none;
  transition: .5s;
  border-radius: 0px 30px 0px 30px;
  padding: 12px 30px 12px 30px;
  text-transform: uppercase;
}
.inner_blog_btn a:hover{
  color: #ffffff;
  background: #0078b9;
}
.inner_blog_btn a i{
  font-weight: 700;
  margin-left: 4px;
}
.csingle_contant input {
  width: 100% !important;
}
.csingle_contant textarea {
  width: 100% !important;
}
.product_meta {
  margin-top: 30px;
}
.prdc-lft {
  position: relative;
}
/*======== blog area end  ==========*/


/*========cadre view categories begin ========*/

.cardCat-container {
  perspective: 1000px;
}

.cardCat {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 0.6s;
  
  padding: 1rem 1rem;
  margin: 0 0 24px 0;
  border-radius: 25px;
  background: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  -webkit-box-shadow: 0 20px 20px rgba(0, 10, 10, 0.1);
  box-shadow: 0 20px 20px rgba(0, 10, 10, 0.1);


}

.cardCat-social-icon {
  height: 80px;
  width: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 15px;
  text-align: center;
  border-radius: 100px;
  background-color: #e6eaff;
}

.cardCat:hover {
  transform: rotateY(180deg);
}

.cardCat-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 2em;
  color: #0545a5;
  border-radius: 30px;
  
}

.cardCat-front {
  background-color: #ffffff;

  padding: 1rem 1rem;
  margin: 0 0 24px 0;
  border-radius: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
}

.cardCat-back {
  background-color: #0195da;
  color: #ffffff;
  padding: 10px;
  transform: rotateY(180deg);
}

/*========cadre view categories end ========*/

/* *********************Knowledge base Publication End ********************************** */


.cadreFichierContenu{
  border: 1px solid #cccccc; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); margin:10px; width:130px; height:100px;
}
.cadreFichierContenu:hover{
  border: 1px solid #cccccc; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); margin:10px; width:130px; height:100px;
}

#pubContentPageContent p{
  font-size: 17px;
  margin-bottom: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

.boutAfficherCat{
  font-size: 16px; border-radius: 10px;padding: 8px;
}


.ligneSelect.selected {
  background-color: #cce5ff; /* Couleur de fond bleu clair */
}

/* Style de la ligne non sélectionnée */
.ligneSelect {
  background-color: #f8f9fa; /* Couleur de fond par défaut */
  cursor: pointer; /* Curseur pour indiquer que la ligne est cliquable */
}



/* *************************Beging Lixicon CSS *********************************** */

.alphabet-header {
  background-color: #0078b9;
  padding: 10px 0;
  text-align: center;
}

.alphabet-header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.alphabet-header ul li {
  display: inline;
  margin: 0 10px;
}

.alphabet-header ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}

.alphabet-header ul li a:hover {
  text-decoration: underline;
}

.section {
  padding: 15px;
  background-color: #fff;
  margin: 10px 0;
  border: 1px solid #ddd;
  cursor: text;
}

.section h2 {
  margin-top: 0;
  color: #1d7198;
}

.section p {
  padding: 10px;
}

.section p:hover {
  background-color: #cdeffd;
  padding: 10px;
}

/* *************************End Lixicon CSS *********************************** */


/* *************************Begin KB Photo CSS *********************************** */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.photo-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.photo-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 15px;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.photo-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.photo-card:hover .photo-info {
  transform: translateY(0);
}

.photo-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.photo-info p {
  margin: 0;
  font-size: 14px;
}





/* 
.slider-photo-cadre {
  display: none; 
  position: fixed;
  top: 10%;
  left: 50%;
  width: 850px;
  height: 550px;
  transform: translateX(-50%);
  background-color: #333;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 999999999;
}

.slider {
  width: 100%;
  height: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

}

.slider-image {

  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider-image.active {
  opacity: 1;
}

.slider-image.active {
  display: block;
}

.slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15%;
  background-color: #222;
  padding: 10px;
  border-top: 1px solid #444;
}

.slider-controls button {
  background-color: #555;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.slider-controls button:hover {
  background-color: #007BFF;
}

.gallery {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
  cursor: pointer;
}

.photo-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.photo-card img {
  width: 100%;
  height: auto;
  display: block;
}

.photo-card p {
  text-align: center;
  margin: 5px 0;
}

.photo-card:hover {
  transform: translateY(-5px);
}
 */


 .slider-photo-cadre {
  display: none; /* Initialement caché */
  position: fixed;
  top: 10%;
  left: 50%;
  width: 850px;
  height: 550px;
  transform: translateX(-50%);
  background-color: #333;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 999999999; /* Assurez-vous que le slider est au-dessus de l'overlay */
}

.slider {
  width: 100%;
  height: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider-image.active {
  opacity: 1;
}

.slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15%;
  background-color: #222;
  padding: 10px;
  border-top: 1px solid #444;
}

.slider-controls button {
  background-color: #555;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.slider-controls button:hover {
  background-color: #007BFF;
}

.gallery {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
  cursor: pointer;
}

.photo-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.photo-card img {
  width: 100%;
  height: auto;
  display: block;
}

.photo-card p {
  text-align: center;
  margin: 5px 0;
}

.photo-card:hover {
  transform: translateY(-5px);
}

.overlay {
  display: none; /* Initialement caché */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Couleur de la couverture transparente */
  z-index: 999999998; /* Assurez-vous que l'overlay est en dessous du slider */
}

/* *************************End KB Photo CSS *********************************** */

/* *************************Begin KB Video CSS *********************************** */
.slider-video-cadre {
  display: none; /* Initialement caché */
  position: fixed;
  top: 10%;
  left: 50%;
  width: 850px;
  height: 550px;
  transform: translateX(-50%);
  background-color: #333;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 999999999; /* Assurez-vous que le slider est au-dessus de l'overlay */
}


.slider-video {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider-video.active {
  opacity: 1;
}

.video-card video {
  width: 100%;
  height: auto;
  display: block;
  max-height: 200px; /* Hauteur maximale pour toutes les vidéos */
  object-fit: cover; /* Ajuste l'image vidéo pour remplir le cadre */
}

.video-card {
  width: 300px; /* Largeur uniforme pour chaque carte vidéo */
  height: 230px; /* Hauteur uniforme pour chaque carte vidéo */
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.video-card p {
  text-align: center;
  margin: 5px 0;
}


.video-card:hover {
  transform: translateY(-5px);
}

/* *************************End KB Video CSS *********************************** */

/* *************************Begin KB Audio CSS *********************************** */

.audio-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 audios par ligne */
  gap: 20px; /* Espace entre les éléments */
  width: 100%;
  max-width: 100%; /* Assurez-vous que la largeur maximale de la galerie s'étend sur tout l'écran */
}

.audio-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
  text-align: center;
  transition: transform 0.2s ease;
}

.audio-card p {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.custom-audio-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 10px;
}

.play-pause-btn {
  background-color: #007BFF;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.play-pause-btn:hover {
  background-color: #0056b3;
}

.equalizer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100px;
  height: 30px;
}

.bar {
  width: 4px;
  height: 20%;
  background-color: #007BFF;
  transition: height 0.3s ease;
}

.time {
  font-size: 14px;
  color: #555;
}


.specialFigure {

  text-align: center; 
  font-weight: bold; 
  font-size: 20px; 
  color: steelblue;
}


.audio-card:hover {
  transform: translateY(-5px);
}

.is-playing .bar:nth-child(1) {
  animation: equalizer 1s infinite ease-in-out;
}

.is-playing .bar:nth-child(2) {
  animation: equalizer 1s infinite ease-in-out 0.2s;
}

.is-playing .bar:nth-child(3) {
  animation: equalizer 1s infinite ease-in-out 0.4s;
}

.is-playing .bar:nth-child(4) {
  animation: equalizer 1s infinite ease-in-out 0.6s;
}

.is-playing .bar:nth-child(5) {
  animation: equalizer 1s infinite ease-in-out 0.8s;
}

.is-playing .bar:nth-child(6) {
  animation: equalizer 1s infinite ease-in-out 1s;
}

.is-playing .bar:nth-child(7) {
  animation: equalizer 1s infinite ease-in-out 1.2s;
}

.is-playing .bar:nth-child(8) {
  animation: equalizer 1s infinite ease-in-out 1.4s;
}

.is-playing .bar:nth-child(9) {
  animation: equalizer 1s infinite ease-in-out 1.6s;
}

.is-playing .bar:nth-child(10) {
  animation: equalizer 1s infinite ease-in-out 1.8s;
}





@keyframes equalizer {
  0%, 100% {
      height: 20%;
  }
  50% {
      height: 100%;
  }
}




/* *************************End KB Audio CSS *********************************** */

.disabledElt {
  pointer-events: none; /* Désactive les interactions de souris */
  opacity: 0.6; /* Diminue l'opacité pour indiquer visuellement que l'élément est désactivé */
}



.pdf-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: left;
}

.pdf-box {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 200px;
  text-align: center;
  padding: 20px;
  cursor: pointer;
}

.pdf-box a {
  text-decoration: none;
  color: #333;
}

.pdf-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.pdf-icon i {
  font-size: 40px;
  color: #dc3545; /* Couleur rouge pour l'icône PDF */
  margin-bottom: 10px;
}

.pdf-title {
  font-size: 13px;
  font-weight: bold;
  width: 180px;
}


.loadDataTable1 {

  position: absolute; /* Use absolute positioning */
  top: 50%; /* Move down to the middle of the page */
  left: 50%; /* Move right to the middle of the page */
  transform: translate(-50%, -50%); /* Adjust position to center */
  width: 100%; /* Full width of the parent */
  height: 100%; /* Full height of the parent */
  display: flex; /* Use flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  
}


.greenQuantity {

  background-color: #149865;
  
}



#fullScreenDiv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond avec opacité */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999999999;
  overflow: hidden;
}

/* Cacher la barre de défilement sur fullScreenDiv */
#fullScreenDiv::-webkit-scrollbar {
  display: none;
  width: 0;
}
#fullScreenDiv {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Cacher la scrollbar du body quand fullScreenDiv est visible */
body.fullscreen-active {
  overflow: hidden !important;
}
body.fullscreen-active::-webkit-scrollbar {
  display: none;
  width: 0;
}

/* Conteneurs de fichiers pour visualisation PDF/Office */
#fileContainerFS, #fileContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

/* Iframes dans les conteneurs de fichiers - dimensionnement automatique */
#fileContainerFS iframe, #fileContainer iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
  margin: 0;
  padding: 0;
}

/* Assurer que les iframes PDF.js prennent toute la hauteur disponible */
#fullScreenDiv #fileContainerFS,
#fullScreenDiv #fileContainer {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}




#fullScreenDivOFD {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999999999;
}

/* Bouton Fermer moderne pour OFD */
.ofd-close-btn {
  position: fixed;
  top: 20px;
  right: 80px;
  z-index: 999999999999;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fca5a5 0%, #ef4444 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
  transition: all 0.3s ease;
}
.ofd-close-btn i {
  font-size: 20px;
  color: white;
}
.ofd-close-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(239, 68, 68, 0.6);
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}
.ofd-close-btn:active {
  transform: scale(0.95);
}

#closeButtonFS {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

#closeButtonFS:hover {
  color: red;
}

.contentFS {
  text-align: center;
  width: 99%;
}


/* Nouvelle div qui occupe toute la largeur en haut */
#topDiv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.1); /* Fond léger pour voir l'arrière-plan */
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  z-index: 100000000000;
}

/* Bouton pour masquer et afficher la div */
#toggleButton {
  background-color: white;
  color: black;
  padding: 10px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 100000000001;
}

#toggleButton:hover {
  background-color: red;
  color: white;
}

/* Masquer la div */
.hiddenDiv {
  display: none;
}




.sidebarOpenFile {
  position: absolute;
  top: 80px;
  right: 40px;
  width: 60px;
  height: auto;
  background-color: #f8f9fa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 10px;
  cursor: move;
  z-index: 1000;
}

.sidebarOpenFile button {
  background-color: #0056b3;
  border: none;
  color: white;
  padding: 10px;
  border-radius: 50%;
  font-size: 18px;
  transition: transform 0.1s ease-in-out, background-color 0.3s;
  margin-top: 10px;
}

.sidebarOpenFile button:hover {
  background-color: #007bff;
}


/* Couleurs spécifiques par bouton */
.button-fermer {
  background-color: #e81318!important;
}
.button-fermer:hover {
  background-color: #750507!important;
}




.sidebarOpenFile button:active {
  transform: scale(0.9); /* Réduit légèrement la taille pour l'effet "mou" */
}

/* Info-bulle personnalisée */
.tooltip-custom {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* Centrer verticalement */
  left: -200px; /* Positionner la tooltip à gauche du bouton */
  background-color: #0545a5;
  color: white;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999;
}


/* Responsive styling for small screens */
@media (max-width: 600px) {
  .tooltip-custom  {
      padding: 8px 16px;
      font-size: 14px;
  }
}


.tooltip-custom::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent transparent;
}


.sidebarOpenFile button:hover .tooltip-custom {
  opacity: 1;
  visibility: visible;
}


/* =====================================================================
   FILE VIEWER SIDEBAR - COPIE EXACTE DU STYLE KPI
   ===================================================================== */

/* Barre latérale verticale - Style KPI */
.file-viewer-sidebar {
   position: fixed;
   right: 0;
   top: 60px;
   bottom: 15px;
   height: auto;
   background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
   border-radius: 50px 0 0 50px;
   box-shadow: -4px 0 20px rgba(59, 130, 246, 0.3);
   padding: 20px 0;
   padding-top: 45px;
   z-index: 100000;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   gap: 12px;
   width: 60px;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.file-viewer-sidebar:hover {
   box-shadow: -6px 0 30px rgba(59, 130, 246, 0.5);
}

/* État fermé de la barre */
.file-viewer-sidebar.collapsed {
   right: -60px;
}

.file-viewer-sidebar.collapsed .file-sidebar-toggle {
   right: 60px;
   border-radius: 50px 0 0 50px;
}

.file-viewer-sidebar.collapsed .file-sidebar-toggle i {
   transform: rotate(180deg);
}

.file-sidebar-item {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 46px;
   height: 46px;
   margin: 0 auto;
   color: white;
   font-size: 1.4rem;
   cursor: pointer;
   transition: all 0.3s ease;
   border-radius: 50%;
   border: 2px solid transparent;
}

.file-sidebar-item:hover {
   background: rgba(255, 255, 255, 0.2);
   border-color: rgba(255, 255, 255, 0.4);
   transform: scale(1.1);
}

.file-sidebar-item.active {
   background: rgba(255, 255, 255, 0.25);
   border-color: #60a5fa;
}

.file-sidebar-item i {
   transition: transform 0.3s ease;
}

.file-sidebar-item:hover i {
   transform: scale(1.15);
}

/* Tooltip personnalisé à gauche */
.file-sidebar-tooltip {
   position: absolute;
   right: 70px;
   top: 50%;
   transform: translateY(-50%) translateX(10px);
   background: #1f2937;
   color: white;
   padding: 10px 16px;
   border-radius: 8px;
   font-size: 0.875rem;
   font-weight: 500;
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
   pointer-events: none;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   z-index: 100001;
}

/* Flèche du tooltip */
.file-sidebar-tooltip::after {
   content: '';
   position: absolute;
   right: -6px;
   top: 50%;
   transform: translateY(-50%);
   width: 0;
   height: 0;
   border-left: 6px solid #1f2937;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
}

.file-sidebar-item:hover .file-sidebar-tooltip {
   opacity: 1;
   visibility: visible;
   transform: translateY(-50%) translateX(0);
}

/* Bouton Toggle */
.file-sidebar-toggle {
   position: absolute;
   bottom: 0;
   right: 0;
   width: 60px;
   height: 47px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(255, 255, 255, 0.15);
   color: white;
   cursor: pointer;
   transition: all 0.3s ease;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 0 0 0 50px;
}

.file-sidebar-toggle:hover {
   background: rgba(255, 255, 255, 0.25);
}

.file-sidebar-toggle:active {
   background: rgba(255, 255, 255, 0.1);
   transform: scale(0.95);
}

.file-sidebar-toggle i {
   font-size: 1.3rem;
   transition: transform 0.3s ease;
}

.file-sidebar-toggle:hover i {
   transform: scale(1.1);
}

/* Animation au chargement */
@keyframes fileViewerSlideIn {
   from {
      transform: translateX(100%);
      opacity: 0;
   }
   to {
      transform: translateX(0);
      opacity: 1;
   }
}

.file-viewer-sidebar {
   animation: fileViewerSlideIn 0.5s ease-out;
}

/* =====================================================================
   RESPONSIVE - Adaptation aux différents écrans
   ===================================================================== */

/* Grands écrans (> 1200px) - Taille par défaut */
@media (min-width: 1201px) {
   .file-viewer-sidebar {
      width: 60px;
   }
   .file-sidebar-item {
      width: 46px;
      height: 46px;
      font-size: 1.4rem;
   }
   .file-sidebar-toggle {
      width: 60px;
      height: 47px;
   }
}

/* Écrans moyens / Tablettes paysage (992px - 1200px) */
@media (max-width: 1200px) and (min-width: 993px) {
   .file-viewer-sidebar {
      width: 56px;
      gap: 10px;
   }
   .file-sidebar-item {
      width: 42px;
      height: 42px;
      font-size: 1.3rem;
   }
   .file-sidebar-tooltip {
      font-size: 0.85rem;
      padding: 8px 14px;
   }
   .file-sidebar-toggle {
      width: 56px;
      height: 44px;
   }
   .file-sidebar-toggle i {
      font-size: 1.2rem;
   }
}

/* Tablettes portrait (768px - 992px) */
@media (max-width: 992px) and (min-width: 769px) {
   .file-viewer-sidebar {
      width: 52px;
      gap: 8px;
      padding-top: 35px;
      border-radius: 40px 0 0 40px;
   }
   .file-sidebar-item {
      width: 38px;
      height: 38px;
      font-size: 1.2rem;
   }
   .file-sidebar-tooltip {
      right: 60px;
      font-size: 0.8rem;
      padding: 7px 12px;
   }
   .file-sidebar-toggle {
      width: 52px;
      height: 42px;
      border-radius: 0 0 0 40px;
   }
   .file-sidebar-toggle i {
      font-size: 1.1rem;
   }
}

/* Mobiles / Petits écrans (< 768px) */
@media (max-width: 768px) {
   .file-viewer-sidebar {
      width: 48px;
      gap: 6px;
      padding-top: 30px;
      border-radius: 35px 0 0 35px;
      top: 50px;
      bottom: 10px;
   }
   .file-sidebar-item {
      width: 34px;
      height: 34px;
      font-size: 1.1rem;
   }
   .file-sidebar-tooltip {
      right: 55px;
      font-size: 0.75rem;
      padding: 6px 10px;
   }
   .file-sidebar-toggle {
      width: 48px;
      height: 38px;
      border-radius: 0 0 0 35px;
   }
   .file-sidebar-toggle i {
      font-size: 1rem;
   }
}

/* Très petits écrans (< 480px) */
@media (max-width: 480px) {
   .file-viewer-sidebar {
      width: 44px;
      gap: 5px;
      padding-top: 25px;
      border-radius: 30px 0 0 30px;
   }
   .file-sidebar-item {
      width: 30px;
      height: 30px;
      font-size: 1rem;
   }
   .file-sidebar-tooltip {
      right: 50px;
      font-size: 0.7rem;
      padding: 5px 8px;
   }
   .file-sidebar-toggle {
      width: 44px;
      height: 35px;
      border-radius: 0 0 0 30px;
   }
   .file-sidebar-toggle i {
      font-size: 0.9rem;
   }
}

/* =====================================================================
   FIN FILE VIEWER SIDEBAR
   ===================================================================== */


#centeredDivOpenFile {
  position: absolute;
  top: 20px;
  left: 15%;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.3); /* Effet d'ombre */
  /*text-align: center;*/
  max-width: 1100px; /* Largeur max de la div */
  width: 100%; /* Remplir tout l'espace disponible dans max-width */
  display: none;
  z-index: 99999999999;
}

#centeredDivOpenFileChangeProcess {
  position: absolute;
  top: 20px;
  left: 15%;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.3); /* Effet d'ombre */
  /*text-align: center;*/
  max-width: 1100px; /* Largeur max de la div */
  width: 100%; /* Remplir tout l'espace disponible dans max-width */
  display: none;
  z-index: 99999999999;
}

#centeredDivOpenFileNodeAnnotationer {
  position: absolute;
  top: 20px;
  left: 15%;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.3); /* Effet d'ombre */
  /*text-align: center;*/
  max-width: 1100px; /* Largeur max de la div */
  width: 100%; /* Remplir tout l'espace disponible dans max-width */
  display: none;
  z-index: 99999999999;
}

.close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
}

.close-btn:hover {
  color: red;
}

.alertSuccessSurAnnotationner{

  position: absolute;
  top: 25px;
  right: 40%;

}

.alertWarningSurAnnotationner{

  position: absolute;
  top: 25px;
  right: 40%;

}


.custom-tabs-container .nav-link {
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.custom-tabs-container .nav-link:hover {
    background-color: rgba(0, 123, 255, 0.1); /* Light blue background on hover */
    color: #007bff; /* Change text color on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.custom-tabs-container .nav-link.active {
    background-color: #b4d0fa; /* Active tab background */
    color: white; /* Active tab text color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow for active tab */
}


.badge-fileToOpen{
  position:absolute;
  border-radius:50%;
  width:20px;
  height:20px;
  font-size:9px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight:700;
  color:#ffffff;
  padding: 2px;
  text-align: center;
  top: -8px;
  right: -8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.shade-gray-f {
  background: #6f6c70;
}



/* ============================================================ */
/* BARRE LATÉRALE DE NAVIGATION DES PIÈCES JOINTES (SIDEBAR)   */
/* Affichage moderne avec fond blanc dégradé, icônes colorées  */
/* et effet hover. Utilisée pour naviguer entre fichiers       */
/* multiples d'une requête. ID: #barreMultipleFiles            */
/* ============================================================ */
.side-bar {
  position: absolute;
  left: 0;
  top: 70px;
  height: 88%;
  width: 160px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  color: #333;
  text-align: center;
  border-radius: 0 12px 12px 0;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
  z-index: 9999999999999999999;
  overflow: hidden;
  display: none;
  border: 1px solid #e2e8f0;
}

/* Carousel vertical personnalisé */
.carousel-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Indicateurs de scroll modernes - Ombres dégradées */
.carousel-container::before,
.carousel-container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Ombre dégradée en haut (quand on peut scroller vers le haut) */
.carousel-container::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%);
}

/* Ombre dégradée en bas (quand on peut scroller vers le bas) */
.carousel-container::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(248, 249, 250, 0.95) 0%, rgba(248, 249, 250, 0) 100%);
}

/* Afficher les ombres quand nécessaire (contrôlé par JS) */
.carousel-container.has-scroll-top::before {
  opacity: 1;
}

.carousel-container.has-scroll-bottom::after {
  opacity: 1;
}

.file-icons {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
  margin: 10px 5px;
  height: 90%;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 5px 0;
  position: relative;
}

/* Scrollbar invisible et transparente */
.file-icons::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.file-icons::-webkit-scrollbar-track {
  background: transparent;
}

.file-icons::-webkit-scrollbar-thumb {
  background: transparent;
}

.file-icons::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

/* Pour Firefox - scrollbar invisible */
.file-icons {
  scrollbar-width: none;
}

.file-icon {
  padding: 12px 8px;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s ease;
  border-radius: 8px;
  background: transparent;
  margin-bottom: 8px;
}

.file-icon:hover {
  background: #f0f4f8;
  transform: translateX(4px);
}

.file-icon i {
  font-size: 32px;
  /* NE PAS forcer de couleur ici - laisser les classes text-* définir la couleur */
  transition: transform 0.3s ease;
  cursor: pointer;
  display: block;
}

.file-icon i:hover {
  transform: scale(1.15);
}

.file-icon p {
  font-size: 13px;
  color: #64748b;
  transition: color 0.3s ease;
  word-break: break-word;
  font-style: normal;
  margin-top: 6px;
  line-height: 1.3;
  font-weight: 500;
}

.file-icon:hover p {
  color: #334155;
}

.activeFileOpen {
  background: #e0f2fe !important;
  border-left: 3px solid #667eea;
}

.activeFileOpen i {
  color: #667eea !important;
}

.activeFileOpen p {
  color: #667eea !important;
  font-weight: 600;
}

/* Flèches de navigation modernes */
.scroll-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(102, 126, 234, 0.9);
  color: white;
  font-size: 14px;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  z-index: 100;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.scroll-arrow.up {
  top: 5px;
}

.scroll-arrow.down {
  bottom: 40px; /* Au-dessus de la barre de contrôle (boutfilebar) */
}

/* Afficher les flèches au hover du conteneur */
.carousel-container:hover .scroll-arrow.visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-arrow:hover {
  background-color: rgba(102, 126, 234, 1);
  transform: translateX(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

.scroll-arrow:active {
  transform: translateX(-50%) scale(0.95);
}

/* Animation pulse subtile pour attirer l'attention */
@keyframes pulse-arrow {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(3px); }
}

.scroll-arrow.down.visible {
  animation: pulse-arrow 2s ease-in-out infinite;
}

.scroll-arrow.up.visible {
  animation: pulse-arrow 2s ease-in-out infinite reverse;
}

/* Anciennes flèches de navigation (conservées pour compatibilité) */
.nav-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1d7198;
  color: white;
  font-size: 1rem;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1000;
  border-radius: 50%;
}

.nav-arrow.up {
  top: 10px;
}

.nav-arrow.down {
  bottom: 10px;
}

.nav-arrow:hover {
  background-color: #27aae0;
}



#infoBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ecedfd;
  color: white;
  text-align: center;
  padding: 10px;
  z-index: 999999999999999999999999999; /* Pour s'assurer que la barre est au-dessus de toutes les fenêtres */
  display: none; /* Initialement caché */
}



#errorMessageBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ecedfd;
  color: white;
  text-align: center;
  padding: 10px;
  z-index: 999999999999999999999999999; /* Pour s'assurer que la barre est au-dessus de toutes les fenêtres */
  display: none; /* Initialement caché */
}



#fullScreenDiv button {

  border: 2px solid transparent; /* Default border */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s, border-color 0.3s; /* Smooth transition */
}


#fullScreenDiv button:hover {
  background-color: rgba(0, 128, 0, 0.3); /* Light green on hover */
  border-color: green; /* Green border on hover */
}

#fullScreenDiv button:active {
  background-color: rgba(0, 128, 0, 0.5); /* Darker green when clicked */
  border-color: darkgreen; /* Darker border when clicked */
}

/* Optional: Keep the active state until the click is released */
#fullScreenDiv button:active:hover {
  background-color: rgba(0, 128, 0, 0.5); /* Darker green on click */
  border-color: darkgreen; 
}


/* Barre de contrôle (boutons réduire/agrandir) - style moderne */
#boutfilebar {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 99999999999999999999999999999;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  text-align: center;
  width: 160px;
  padding: 8px 0;
  display: none;
  border-radius: 0 0 12px 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.control-bar button,
#boutfilebar button {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 12px;
  margin: 0 4px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.control-bar button:hover,
#boutfilebar button:hover {
  background-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Pour le contenu masqué quand réduit */
.file-icons {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
  margin: 20px 10px 20px 10px;
  height: 90%;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ============================================================ */
/* MEDIA QUERIES RESPONSIVE POUR BARRES LATÉRALES              */
/* Adaptation des barres de navigation des fichiers pour       */
/* tablettes et mobiles                                         */
/* ============================================================ */

/* Tablettes (768px et moins) */
@media (max-width: 768px) {
  .side-bar, #barreMultipleFiles {
    width: 100px; /* Réduire la largeur pour tablettes */
    top: 60px; /* Réduire l'espace en haut */
    height: 90%; /* Augmenter la hauteur */
  }

  #boutfilebar {
    width: 100px; /* Même largeur que la barre latérale */
  }

  .file-icon i {
    font-size: 24px; /* Icônes plus petites */
  }

  .file-icon p {
    font-size: 11px; /* Texte plus petit mais lisible */
    margin-top: 4px;
  }

  .file-icon {
    padding: 8px 4px; /* Réduire le padding */
  }

  /* Ajuster la flèche du bas pour petits écrans */
  .scroll-arrow.down {
    bottom: 38px;
  }
}

/* Tablettes petites (576px et moins) */
@media (max-width: 576px) {
  .side-bar, #barreMultipleFiles {
    width: 80px; /* Encore plus étroit pour petites tablettes */
    top: 50px; /* Réduire encore l'espace en haut */
    height: 92%; /* Augmenter la hauteur */
  }

  #boutfilebar {
    width: 80px;
  }

  .file-icon i {
    font-size: 20px; /* Icônes encore plus petites */
  }

  .file-icon p {
    font-size: 10px;
    line-height: 1.2;
  }

  /* Ajuster la flèche du bas pour tablettes petites */
  .scroll-arrow.down {
    bottom: 38px;
  }
}

/* Mobile (480px et moins) */
@media (max-width: 480px) {
  .side-bar, #barreMultipleFiles {
    width: 60px; /* Très étroit sur mobile */
    top: 40px; /* Espace minimal en haut */
    height: 94%; /* Maximiser la hauteur */
  }

  #boutfilebar {
    width: 60px;
  }

  .file-icon i {
    font-size: 18px;
  }

  .file-icon p {
    display: none; /* Cacher le texte, garder juste les icônes */
  }

  .file-icon {
    padding: 6px 2px;
    margin-bottom: 4px;
  }

  /* Ajuster les boutons de contrôle */
  .control-bar button,
  #boutfilebar button {
    padding: 4px 8px;
    font-size: 12px;
    margin: 0 2px;
  }

  /* Ajuster la flèche du bas pour mobile */
  .scroll-arrow.down {
    bottom: 35px;
  }

  /* Réduire la taille des flèches sur mobile */
  .scroll-arrow {
    width: 25px;
    height: 25px;
    font-size: 12px;
  }
}

/* ============================================================ */
/* FIN MEDIA QUERIES RESPONSIVE BARRES LATÉRALES               */
/* ============================================================ */


/* Couverture pleine page avec fond noir transparent */
.cover-page {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Fond noir avec opacité de 80% */
  z-index: 9999999999999999999999999999999;
  display: none;
}

/* Spinner circulaire */
.spinner-doc {
  position: absolute;
  z-index: 99999999999999999999999999999999;
  left: 50%;
  top: 50%;

  border: 8px solid #f3f3f3; /* Couleur de fond du spinner */
  border-top: 8px solid #3498db; /* Couleur du spinner */
  border-radius: 50%; /* Pour arrondir le cercle */
  width: 60px; /* Largeur du spinner */
  height: 60px; /* Hauteur du spinner */
  animation: spin 2s linear infinite; /* Animation */
  display: none;
}

.spinner-doc-text {
  position: absolute;
  z-index: 99999999999999999999999999999999;
  left: 44%;
  top: 45%;
  color: #fff;
  font-size: 14px;
  display: none;
  
}
/* Animation de rotation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*
#multipleTransmissionVisibility {
  position: absolute;
  top: 120px;
  left: 18%;
  width: 64%;
  background-color: #ecedfd;
  color: white;
  text-align: center;
  padding: 10px;
  z-index: 9999999999999999999999999999; /* Pour s'assurer que la barre est au-dessus de toutes les fenêtres *
   display: none; Initialement caché 
}
*/




.input-select-container {
  white-space: nowrap; /* Pour empêcher le retour à la ligne */
}
.input-select-container input,
.input-select-container select {
  display: inline-block;
  padding: 10px;
  font-size: 16px;
  width: 48%; /* Ajuster la largeur pour que les deux tiennent sur la même ligne */
  margin-right: 4%;
  box-sizing: border-box;
}
.input-select-container select {
  width: 25%; /* Ajuster la largeur du select */
}
.input-select-container input:last-child {
  margin-right: 0;
}




#notoficationView{
  display: none;
}




#progress-container {
  width: 100%;
  background-color: #f3f3f3;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 20px;
  height: 30px;
  position: relative;
}

#progress-bar {
  width: 0%;
  height: 100%;
  background-color: #4caf50;
  text-align: center;
  line-height: 30px;
  color: white;
  border-radius: 5px;
  transition: width 0.4s ease;
}

.griseLigne {
  background-color: #d3d3d3; /* Couleur de fond grise */
  color: #808080; /* Couleur du texte gris */
}



.password-container {
  position: relative;
  width: 100%;
}

#password {
  padding-right: 30px; /* Pour que l'icône ne chevauche pas le texte */
}

#togglePassword {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 20px;
  color: #0056b3;
}



.custom-select {
  position: relative;
  display: inline-block;
  width: 300px;
  font-family: Arial, sans-serif;
}

.select-selected {
  background-color: #f1f1f1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.select-items {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  z-index: 99;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 5px;
  display: none;
}

.select-hide {
  display: none;
}

.select-items div {
  padding: 10px;
  cursor: pointer;
}

.select-items div:hover {
  background-color: #ddd;
}

.select-search {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 5px 5px 0 0;
  margin-bottom: 5px;
}



.typeOfTaskCategory{
  cursor: pointer;
  transition: all 0.2s ease; /* Transition douce pour les changements de style */
  color: #000000;
}

.typeOfTaskCategory:hover {
  background-color: #1d7198; /* Bleu foncé */
  color: #ffffff;
}

/* Style pour l'élément cliqué */
.typeOfTaskCategory.active {
  background-color: #b4d0fa; /* Bleu foncé */
  color: #0078b9;
  transform: translateY(4px); /* Légère descente pour simuler l'effet de pression */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Diminuer l'ombre pour renforcer l'effet de pression */
}



.box {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée */
  transition: transform 0.2s, box-shadow 0.2s; /* Transition pour l'effet de clic */
  text-align: center; /* Centrer le texte et l'icône */
  cursor: pointer; /* Changer le curseur au survol */
  height: 120px;
}

.box:hover {
  transform: scale(1.02);
  color: #000;
  background-color: #ecedfd;
}


.box:hover {
  transform: scale(1.02);
  color: #000;
}

.box:active {
  transform: scale(0.95); /* Réduire légèrement la taille lors du clic */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Réduire l'ombre lors du clic */
}

.sidebarTask {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.sidebarTask-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  display: flex; /* Utiliser flex pour aligner les icônes et le texte */
  align-items: center; /* Centrer verticalement le contenu */
}

.sidebarTask-item:last-child {
  border-bottom: none;
}

.sidebarTask-item:hover {
  background-color: #f1f1f1;
}

.sidebarTask-item i {
  margin-right: 10px; /* Espacement entre l'icône et le texte */
}

.box-qte{

  position:absolute;
  border-radius:50%;
  margin-left:140px;
  margin-top: -10px;
  width:30px;
  height:30px;
  font-size:10px;
  display: flex;
  justify-content: center; 
  align-items: center;
  font-weight:700;
  color:#ffff; 
  padding: 10px;
  text-align: center;
  
}



.shade-clearblue {
  background: #37fbad;
}


.icon-select-wrapper {
  position: relative;
  display: inline-block;
}
.icon-select-wrapper select {
  padding-left: 30px; /* Space for icon */
}
.icon-select-wrapper .selected-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 1.2em;
}




.carousel-container-site {
  position: absolute;
  width: 80%;
  width: 99%;
  overflow: hidden;
  bottom: 10px;
  border-radius: 25px;
  height: 65px;
  z-index: 999999999999999999;
  background-color: #b6c6df;
  padding: 10px;
}

.carousel-site {
  display: flex;
  gap: 15px;
  transition: transform 0.5s ease-in-out;
  margin-left: 40px;
  margin-right: 40px;
}

.carousel-site-item {
  min-width: 200px;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
  transition: transform 0.3s ease-in-out;
}

.carousel-site-item i {
  font-size: 1.5em;
  color: #007bff;
}

.carousel-site-item:hover {
  transform: scale(1.1);
}

.carousel-site-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #007bff;
  color: #ffffff;
  border: none;
  padding: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.2s;
  z-index: 1;
  border-radius: 50%;
}

.carousel-site-btn.left {
  left: 10px;  
}

.carousel-site-btn.right {
  right: 10px;
}

.carousel-site-btn:hover {
  background-color: #0056b3;
}

.box-qte-site{

  position:absolute;
  border-radius:50%;
  margin-left:155px;
  margin-top: -10px;
  width:30px;
  height:30px;
  font-size:10px;
  display: flex;
  justify-content: center; 
  align-items: center;
  font-weight:700;
  color:#ffff; 
  padding: 10px;
  text-align: center;
  
}




.carousel-container-dashboard {
  position: absolute;
  width: 80%;
  width: 99%;
  overflow: hidden;
  bottom: 10px;
  border-radius: 25px;
  height: 65px;
  z-index: 999999999999999999;
  background-color: #b6c6df;
  padding: 10px;
}

.carousel-dashboard {
  display: flex;
  gap: 15px;
  transition: transform 0.5s ease-in-out;
  margin-left: 40px;
  margin-right: 40px;
}



.carousel-dashboard-item {
  min-width: 200px;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
  transition: transform 0.3s ease-in-out;
}

.carousel-dashboard-item i {
  font-size: 1.5em;
  color: #007bff;
}

.carousel-dashboard-item:hover {
  transform: scale(1.1);
}

.carousel-dashboard-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #007bff;
  color: #ffffff;
  border: none;
  padding: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.2s;
  z-index: 1;
  border-radius: 50%;
}

.carousel-dashboard-btn.left {
  left: 10px;  
}

.carousel-dashboard-btn.right {
  right: 10px;
}

.carousel-dashboard-btn:hover {
  background-color: #0056b3;
}

.box-qte-dashboard{

  position:absolute;
  border-radius:50%;
  margin-left:155px;
  margin-top: -10px;
  width:30px;
  height:30px;
  font-size:10px;
  display: flex;
  justify-content: center; 
  align-items: center;
  font-weight:700;
  color:#ffff; 
  padding: 10px;
  text-align: center;
  
}


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

.bouton-moue:hover {
  transform: scale(1.1);
}

.bouton-moue:active {
  transform: scale(0.9); /* Réduction temporaire de la taille */
}

.bouton-moue.selected {
  background-color: #27aae0;
  color: white;
}





/* ============================================================
   BARRE D'OUTILS FICHIERS (Apparition au survol)
   ============================================================ */

.file-action-bar {
  position: fixed;
  right: 0;
  top: 60px;
  bottom: 15px;
  height: auto;
  width: 60px;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  border-radius: 50px 0 0 50px;
  box-shadow: -4px 0 20px rgba(59, 130, 246, 0.3);
  padding: 20px 0;
  padding-top: 45px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(60px); /* Cachée par défaut */
}

/* État visible au survol */
.file-action-bar.visible {
  transform: translateX(0);
}

.file-action-bar:hover {
  box-shadow: -6px 0 30px rgba(59, 130, 246, 0.5);
}

/* Zone de déclenchement invisible */
.file-action-bar-trigger {
  position: fixed;
  top: 60px;
  right: 0;
  width: 30px;
  height: calc(100% - 60px);
  z-index: 99999;
  pointer-events: auto;
}

.file-action-bar .action-btn {
  position: relative;
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid transparent;
  background: transparent;
  color: #ffffff;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-action-bar .action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
}

.file-action-bar .action-btn.active {
  background: rgba(255, 255, 255, 0.25);
  border-color: #60a5fa;
}

.file-action-bar .action-btn i {
  font-size: 1.3rem;
  color: #ffffff;
  transition: transform 0.3s ease;
}

.file-action-bar .action-btn:hover i {
  transform: scale(1.15);
}

/* Conteneur des fichiers - forcer largeur complète */
#contentFichierAttacher {
  width: 100% !important;
  max-width: 100% !important;
}

#contentFichierAttacher > div {
  width: 100% !important;
}

/* Layer latéral */
.side-layer {
  position: fixed;
  top: 0;
  right: -680px;
  width: 680px;
  height: 100%;
  background: white;
  box-shadow: -3px 0 8px rgba(0,0,0,0.2);
  transition: right 0.4s ease-in-out;
  z-index: 200000;
}

.side-layer.open {
  right: 0;
}

.layer-content {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

/* Forcer le masquage de la file-action-bar quand le side-layer est ouvert */
.file-action-bar.hidden-by-layer {
  transform: translateX(60px) !important;
  pointer-events: none;
}

.close-layer {
  float: right;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  transition: all 0.2s ease;
}

.close-layer:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
}



/* Zone de drag & drop pour upload de fichiers */
.dropzone-upload {
  position: relative;
  border: 2px dashed #b0c4de;
  border-radius: 12px;
  padding: 15px 20px;
  text-align: center;
  background: #f8faff;
  transition: all 0.3s ease;
  cursor: pointer;
}

.dropzone-upload .dropzone-content i {
  font-size: 30px;
}

.dropzone-upload:hover,
.dropzone-upload.dragover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.dropzone-upload .dropzone-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.dropzone-upload .dropzone-content {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.dropzone-upload .dropzone-content i {
  color: #3b82f6;
}

.dropzone-upload .dropzone-content p {
  margin: 0;
  font-size: 15px;
  color: #555;
  font-weight: 500;
}

.dropzone-upload .dropzone-content span {
  font-size: 13px;
  color: #999;
}

.dropzone-upload .btn-browse {
  pointer-events: auto;
  position: relative;
  z-index: 3;
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  color: #fff;
  border: none;
  padding: 8px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropzone-upload .btn-browse:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Bouton Enregistrer modernisé */
.btn-modern-save {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  border: none;
  padding: 8px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-modern-save:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.btn-modern-save i {
  font-size: 18px;
}

/* Boutons d'action modernes pour les fichiers */
.btn-modern-action {
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.btn-modern-action.action-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 3px 8px rgba(239, 68, 68, 0.3);
}
.btn-modern-action.action-danger:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.btn-modern-action.action-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.3);
}
.btn-modern-action.action-warning:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.btn-modern-action.action-info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
}
.btn-modern-action.action-info:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.btn-modern-action.action-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 3px 8px rgba(16, 185, 129, 0.3);
}
.btn-modern-action.action-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-modern-action.action-dark {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
  box-shadow: 0 3px 8px rgba(71, 85, 105, 0.3);
}
.btn-modern-action.action-dark:hover {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(71, 85, 105, 0.4);
}

/* Bouton groupé (Tout confirmer, Tout valider, etc.) */
.btn-modern-action-group {
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-modern-action-group.action-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.btn-modern-action-group.action-danger:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.btn-modern-action-group.action-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.btn-modern-action-group.action-warning:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

.btn-modern-action-group.action-info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.btn-modern-action-group.action-info:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.btn-modern-action-group.action-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.btn-modern-action-group.action-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.btn-modern-action-group.action-dark {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
  box-shadow: 0 4px 12px rgba(71, 85, 105, 0.3);
}
.btn-modern-action-group.action-dark:hover {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(71, 85, 105, 0.4);
}

/* Éléments de la liste de fichiers dans le side-layer */
.file-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease;
}
.file-list-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.file-list-item .file-list-name {
  font-size: 13px;
  color: #334155;
  font-weight: 500;
  word-break: break-word;
}
.file-list-item .file-list-icon {
  margin-right: 8px;
}

/* Keyword file block */
.file-keyword-block {
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.file-keyword-block .file-keyword-name {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}

/* ---- Tooltip stylé pour la barre d'actions fichiers ---- */
.tooltip-action {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  padding: 6px 14px;
  background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%);
  color: #fff;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  box-shadow: 0 4px 15px rgba(30, 64, 175, 0.35);
  z-index: 100001;
}

/* Flèche vers la droite */
.tooltip-action::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent #1e40af;
}

/* Apparition au hover */
.action-btn:hover .tooltip-action {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Legacy class (garder pour compat) */
.tooltipText-action-bar {
  display: none !important;
}


.file-checkbox {
  
  margin-top: -40px!important;
}

.history-timeline {
  position: relative;
  margin-left: 10px;
  padding-left: 20px;
  border-left: 2px solid #dee2e6;
}

.history-item {
  position: relative;
  margin-bottom: 20px;
  padding-left: 20px;
}

.history-icon {
  position: absolute;
  left: -14px;
  top: 5px;
  background-color: white;
  border: 2px solid #198754;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 24px;
  color: #198754;
  font-size: 16px;
}

.history-content {
  background-color: #f8f9fa;
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.history-header {
  margin-bottom: 5px;
  font-size: 14px;
}

.history-body p {
  margin: 0;
  font-size: 13px;
}

.history-body small {
  color: #6c757d;
}


#sortableList .history-item {
  cursor: move;
  background-color: #f8f9fa;
  transition: background 0.2s;
}

#sortableList .history-item:hover {
  background-color: #e9ecef;
}





.custom-modal {
  border-radius: 1rem;
  overflow: hidden;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, #007bff, #0056b3);
}

.intro-message p {
  font-size: 1rem;
}

.task-scroll-container {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
  margin-bottom: 1rem;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #f8f9fa;
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  transition: background 0.3s, box-shadow 0.3s;
}

.task-item:hover {
  background: #e9ecef;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.15);
}

.task-text {
  font-weight: 500;
  font-size: 1rem;
  flex: 1;
  margin-right: 1rem;
}

.sticky-footer {
  background: #fff;
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding-top: 1rem;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
}



.toggle-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1060;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  padding: 6px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease-in-out;
}

.toggle-btn:hover {
  background-color: #f1f1f1;
}

.toggle-btn i {
  font-size: 18px;
}


.backup-role-bar {
  position: fixed;
  top: 0;
  left: 140px;             /* Décalage gauche */
  right: 0;                /* Jusqu'au bord droit */
  z-index: 1055;
  background-color: #ffffff;
  border-bottom: 1px solid #dee2e6;
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 25px 0 25px 25px;  /* Coins arrondis en bas uniquement */
  width: calc(100% - 140px);     /* Largeur automatique - décalage */
  display: flex;
  flex-wrap: wrap;              /* Pour que les éléments aillent à la ligne */
  gap: 0.75rem;
  align-items: center;
}

.backup-role-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.backup-role-item {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  background: #e9ecef;
  border-radius: 2rem;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 123, 255, 0.1);
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: background-color 0.2s ease-in-out;
  cursor: pointer;
}

.backup-role-item:hover {
  background: #1a69b2;
  color: #fff;
}


.reject-reason {
  display: flex;
  flex-direction: column;
}

.reject-all-reason {
  display: flex;
  flex-direction: column;
}


.task-item {
  display: block; /* ou rien du tout */
}

.linkEffect {
    font-size: 1.2rem;
    color: #13181e;
    font-weight: 600;
    line-height: 150%;
}

.linkEffect:hover {
    font-size: 1.2rem;
    color: #0545a5;
    font-weight: 600;
    line-height: 150%;
}




/* ================================= CSS GESTION DSE ARCHIVES ================================
   Styles des Boutons Modernes & Soft
   (Même CSS que précédemment, il gère le centrage des 3 éléments)
   ===========================================================================================
*/
/* Conteneur des boutons */
.custom-buttons-row {
    /* Ceci est la clé pour centrer les 3 éléments col-3 dans la ligne */
    justify-content: left;
    margin-left:1px;
}

/* Style de base pour le bouton */
.custom-soft-button {
    /* ... (Reste du style inchangé) ... */
    width: 90px;
    height: 75px;
    padding: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #ffffff;
    color: #3f51b5;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    float:left;
    margin-left:5px;
    
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    /* Effet au survol (Hover) */
    .custom-soft-button:hover {
        background-color: #e8eaf6;
        color: #303f9f;
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }

/* Style de l'icône */
.icon-top {
    font-size: 1.3rem;
    margin-bottom: 5px;
}

/* Style du texte */
.text-bottom {
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
}




/* Conteneur principal (comme la carte de recherche Google) */
.search-container-archive {
/*    max-width: 900px;*/
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Ombre douce */
}

    /* Style du titre */
    .search-container-archive h2 {
        color: #34495e; /* Couleur sombre mais douce */
        font-weight: 300; /* Poids de police léger pour un aspect moderne */
    }

/* Étiquettes de formulaire */
.form-label {
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
    font-size: 0.95rem;
}

/* Champs de formulaire (pour un aspect plus épuré) */
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid #ced4da;
    padding: 10px 15px;
    transition: border-color 0.2s;
}

    .form-control:focus, .form-select:focus {
        border-color: #4a86e8; /* Bleu vif à la sélection */
        box-shadow: 0 0 0 0.25rem rgba(74, 134, 232, 0.25);
    }

/* Bouton de recherche (Principal) */
.search-btn {
    background-color: #4a86e8;
    border-color: #4a86e8;
    padding: 10px 25px;
    font-weight: 600;
    border-radius: 20px; /* Coins très arrondis pour l'effet Google */
    transition: background-color 0.2s;
}

    .search-btn:hover {
        background-color: #3b74d4;
        border-color: #3b74d4;
    }

/* Bouton de réinitialisation (Secondaire) */
.reset-btn {
    background-color: #ecf0f1;
    border-color: #ecf0f1;
    color: #7f8c8d;
    padding: 10px 25px;
    font-weight: 600;
    border-radius: 20px;
}

    .reset-btn:hover {
        background-color: #bdc3c7;
        border-color: #bdc3c7;
        color: #5d6d7e;
    }

full-height-container {

    min-height: 100vh;
   
}



/* Styles de la ligne pour garantir le centrage et l'espacement */
.history-row {
    justify-content: center;
    gap: 15px 0; /* Espacement vertical et horizontal */
}

/* Style principal de la carte d'historique */
.history-card {
    /* Design Soft */
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Ombre douce */
    border: 1px solid #e0e0e0;
    padding: 15px;
    height: 100%; /* S'assurer que toutes les cartes ont la même hauteur */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    /* Effet au survol (Hover) */
    .history-card:hover {
        transform: translateY(-3px); /* Léger soulèvement */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    /* En-tête de la carte (Date et Icône) */
    .history-card .card-header {
        border-bottom: 1px dashed #cccccc;
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-size: 0.8rem;
        color: #6c757d; /* Couleur discrète */
        font-weight: 500;
        display: flex;
        align-items: center;
    }

    /* Corps de la carte */
    .history-card .card-body {
        flex-grow: 1; /* Permet au corps de prendre l'espace disponible */
        padding: 0;
        margin-bottom: 15px;
    }

    /* Titre de la recherche (Ex: Recherche Documentaire) */
    .history-card .search-title {
        font-size: 1rem;
        font-weight: 700;
        color: #3f51b5; /* Couleur de marque */
        margin-bottom: 5px;
    }

    /* Critères de recherche */
    .history-card small {
        display: block;
        color: #777;
        line-height: 1.3;
    }

    /* Bouton Relancer la recherche */
    .history-card .btn-outline-primary {
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        color: #4a86e8;
        border-color: #4a86e8;
        transition: all 0.2s;
    }

        .history-card .btn-outline-primary:hover {
            background-color: #4a86e8;
            color: #ffffff;
        }

/* Réactivité (S'assurer que sur mobile, ils passent en colonne) */
/* Bootstrap gère déjà le col-md-6 et col-sm-12 pour une bonne réactivité */
@media (max-width: 768px) {
    .history-card {
        margin-bottom: 15px; /* Ajouter de l'espace entre les cartes sur les petits écrans */
    }
}


.history-card .card-header {
    /* Le style de base du card-header est conservé, mais sans le display flex/align, 
       car les classes Bootstrap d-flex le gèrent maintenant. */
    border-bottom: 1px dashed #cccccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 500;
    /* Suppression des propriétés Flexbox ici si elles étaient dans le CSS précédent */
}

/* Style du bouton de suppression (discret par défaut) */
.btn-delete {
    /* Le rendre très petit et sans texte pour un look minimaliste */
    padding: 2px 5px !important;
    line-height: 1;
    border-radius: 50% !important; /* Rendre le bouton rond */
    border: none !important;
    background-color: transparent !important;
    color: #bdbdbd !important; /* Couleur très pale pour être discret */
    transition: all 0.2s ease;
}

    /* Rendre le bouton plus visible au survol de la carte (expérience utilisateur moderne) */
    .history-card:hover .btn-delete,
    .btn-delete:hover {
        color: #dc3545 !important; /* Rouge vif au survol */
        background-color: #fcebeb !important;
        transform: scale(1.1);
    }

/* Ajustement pour l'icône de l'horloge pour qu'elle soit correctement alignée */
.history-card .card-header i {
    font-size: 1rem;
    vertical-align: middle;
}

/* Assurez-vous que le conteneur du texte de gauche s'aligne bien */
.history-card .card-header span {
    display: inline-flex;
    align-items: center;
}


/*================================================POOLS DE NUMERISATION================================================*/

.scan-pool-container {
    /*max-width: 1200px;*/ /* Largeur maximale pour une meilleure lisibilité côte à côte */
}

/* ---------------------------------
   Style de la Colonne Gauche (Configuration)
   --------------------------------- */
.scanning-config-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Ombre douce et nette */
    height: 100%; /* Important pour aligner avec la colonne de droite */
    border-left: 5px solid #3f51b5; /* Bande couleur pour identification rapide */
}

    .scanning-config-card .card-title {
        color: #3f51b5;
        font-weight: 600;
        margin-bottom: 25px;
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 10px;
    }

.form-label {
    font-weight: 500;
    color: #555;
}

.scan-btn {
    background-color: #3f51b5;
    border-color: #3f51b5;
    font-weight: 600;
    transition: background-color 0.2s;
}

/* ---------------------------------
   Style de la Colonne Droite (Liste d'Attente)
   --------------------------------- */
.waiting-list-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    height: 100%;
}

    .waiting-list-card .card-title {
        color: #00897b; /* Couleur différente pour le contraste */
        font-weight: 600;
        margin-bottom: 20px;
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 10px;
    }

/* Style des éléments de la liste */
.document-list .list-group-item {
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 12px 15px;
    transition: background-color 0.2s;
}

    .document-list .list-group-item:hover {
        background-color: #e8f5e9; /* Léger surlignage au survol */
    }

/* Style pour l'élément d'avertissement */
.list-group-item-warning {
    background-color: #fff9e6 !important;
    border-left: 4px solid #ff9800;
}

    .list-group-item-warning:hover {
        background-color: #fff4d1 !important;
    }

.actions .btn-sm {
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 6px;
}




/* ---------------------------------
   Styles Généraux de l'Arborescence
   --------------------------------- */
.archive-tree-container {
/*    max-width: 800px;*/
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.modern-tree {
    padding: 0;
    margin: 0;
}

/* ---------------------------------
   Style de l'élément de dossier (item)
   --------------------------------- */
.folder-item {
    margin-bottom: 2px;
}

/* Style du bouton/lien de dossier cliquable */
.tree-toggle {
    display: block;
    width: 100%;
    text-align: left;
    background-color: transparent;
    border: none;
    padding: 8px 10px;
    color: #34495e;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    border-radius: 4px;
}

    .tree-toggle:hover {
        background-color: #e8eaf6; /* Léger surlignage au survol */
        color: #3f51b5;
    }

    /* Ajustement pour le bouton quand il est actif/déployé */
    .tree-toggle:not(.collapsed) {
        background-color: #e8eaf6;
        color: #3f51b5;
        font-weight: 600;
    }

/* ---------------------------------
   Icônes et Niveaux
   --------------------------------- */

/* Icône du dossier principal */
.folder-icon {
    color: #ffc107;
    font-size: 1.1rem;
}

/* Icône des sous-dossiers */
.sub-icon {
    color: #ffc107;
    font-size: 0.95rem;
}

/* Appliquer l'indentation à tous les niveaux de liste imbriqués */
.tree-level-2 {
    padding-left: 20px;
}

.tree-level-3 {
    padding-left: 20px;
}

.tree-level-4 {
    padding-left: 20px;
}

.tree-level-5 {
    padding-left: 20px;
}

/* Style pour les dossiers qui n'ont pas de lien de déploiement (niveaux terminaux) */
.tree-leaf {
    display: block;
    padding: 8px 10px;
    color: #555;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 4px;
    /* Ajoutez une légère indentation pour les aligner avec les boutons */
    padding-left: 10px;
}

    .tree-leaf:hover {
        background-color: #f0f0f0;
    }

/* Masquer les puces par défaut */
.list-unstyled {
    list-style: none;
}


.titleListDoc {
    font-size: 1.1rem;
}

.fileIcon {
    font-size: 1.5rem;
}



/* ---------------------------------
   Conteneur de Catégorie (Box)
   --------------------------------- */
.file-explorer-container {
/*    max-width: 1200px;*/
}

.category-box {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Ombre douce */
    border: 1px solid #e0e0e0;
    overflow: hidden; /* Important pour les coins arrondis */
}

/* En-tête de la Catégorie */
.category-header {
    background-color: #3f51b5; /* Bleu Principal */
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 15px 20px;
    border-bottom: 3px solid #6574c8;
    display: flex;
    align-items: center;
}

.legal-header {
    background-color: #00897b; /* Vert pour la conformité/légalité */
    border-bottom: 3px solid #00a08e;
}

.category-icon {
    font-size: 1.3rem;
}

/* ---------------------------------
   Liste de Fichiers
   --------------------------------- */
.file-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.file-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .file-item:last-child {
        border-bottom: none;
    }

    .file-item:hover {
        background-color: #f8f9fa; /* Surlignage au survol */
    }

.file-icon-recent {
    font-size: 1.4rem;
    margin-right: 8px;
    flex-shrink: 0; /* Empêche l'icône de rétrécir */
}

.file-name-recent {
    flex-grow: 1; /* Permet au nom de prendre l'espace disponible */
    font-weight: 500;
    color: #444;
}

.file-size-recent {
    font-size: 0.85rem;
    font-weight: 400;
    flex-shrink: 0;
}

/* ---------------------------------
   Code Couleur des Icônes par Type de Fichier
   --------------------------------- */
.pdf-color {
    color: #dc3545;
}
/* Rouge pour PDF */
.doc-color {
    color: #0d6efd;
}
/* Bleu pour Word */
.img-color {
    color: #ffc107;
}
/* Jaune pour Image */
.zip-color {
    color: #6c757d;
}
/* Gris pour ZIP/Archives */
.xls-color {
    color: #198754;
}
/* Vert pour Excel */
.ppt-color {
    color: #fd7e14;
}
/* Orange pour PPT */
.legal-color {
    color: #00897b;
}
/* Couleur légale (vert-cyan) */


/*llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll*/


/* ---------------------------------
   Conteneur de Liens et Catégories
   --------------------------------- */
.category-dashboard-num {
/*    max-width: 1200px;*/
}

/* Règle pour transformer le lien en bloc et retirer le style de lien par défaut */
.category-box-link-num {
    text-decoration: none;
    display: block;
    height: 100%;
}

/* Le Box (Carte) de Catégorie */
.category-box-num {
    /* Design Soft et Moderne */
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    /* Disposition interne (Icône à gauche, Texte à droite) */
    display: flex;
    align-items: center;
    height: 100%;
    /* Effet de Clic/Survol */
    transition: all 0.3s ease;
}

/* Effet de Clic/Survol sur la Box */
.category-box-link-num:hover .category-box-num {
    transform: translateY(-5px); /* Léger soulèvement */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    background-color: #f5f7ff; /* Changement de couleur au survol */
    border-color: #3f51b5;
}

/* ---------------------------------
   Icône
   --------------------------------- */
.category-icon-wrapper-num {
    /* Fond rond coloré derrière l'icône (Optionnel) */
    background-color: #e8eaf6;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    min-width: 60px; /* Assure que le wrapper ne se contracte pas */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
}

.folder-icon-color-num {
    color: #3f51b5; /* Couleur icône */
    font-size: 1.8rem;
}

/* ---------------------------------
   Détails (Nom et Compteur)
   --------------------------------- */
.category-details-num {
    flex-grow: 1;
}

.category-name-num {
    font-size: 1.15rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0;
}

.item-count-num {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 0;
}

/* Maintenir la couleur du texte survolé pour les détails */
.category-box-link-num:hover .category-name-num {
    color: #3f51b5;
}



/* ----------------------------------
           Section 1: Présentation du Plan
           ---------------------------------- */
.presentation-box {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-left: 5px solid #00897b; /* Couleur thème Archivage Physique */
}

    .presentation-box h1 {
        color: #00897b;
        font-weight: 700;
        margin-bottom: 10px;
    }

.key-metric {
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    background-color: #e0f2f1; /* Fond très clair */
    color: #004d40;
    margin-bottom: 15px;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
}

/* ----------------------------------
           Section 2: Parcours Visuel (Arborescence)
           ---------------------------------- */
.path-navigation {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Style des liens de navigation (Fil d'Ariane) */
.breadcrumb-item a {
    color: #3f51b5;
    text-decoration: none;
}

.breadcrumb-item.active {
    font-weight: 600;
    color: #00897b;
}

/* Style des éléments du parcours (Salle, Dépôt, Contenant) */
.path-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: #333;
}

    .path-item:hover {
        background-color: #e6f8f7; /* Surlignage couleur thème */
        border-color: #00897b;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

.path-icon {
    font-size: 1.5rem;
    margin-right: 15px;
    color: #00897b;
}

.item-title {
    font-size: 1.1rem;
    font-weight: 600;
    flex-grow: 1;
}

.item-details {
    font-size: 0.9rem;
    color: #6c757d;
}

    .item-details strong {
        color: #333;
    }

/* Style pour le Contenant Final (qui ne se développe plus) */
.path-item.final {
    background-color: #fff9e6;
    border-left: 5px solid #ffc107;
}

    .path-item.final .path-icon {
        color: #ffc107;
    }

    .path-item.final:hover {
        background-color: #fff4d1;
    }


/* ----------------------------------
           Styles Formulaire de Gestion (Nouveau)
           ---------------------------------- */

.management-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

    .management-card h4 {
        color: #3f51b5;
        font-weight: 600;
        margin-bottom: 25px;
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 10px;
    }

/* Liste des Salles (Tableau/Liste) */
.room-list-item {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

    .room-list-item:last-child {
        border-bottom: none;
    }

    .room-list-item:hover {
        background-color: #f8f9fa;
    }

.action-icon {
    font-size: 1.1rem;
    cursor: pointer;
    margin-left: 10px;
    transition: color 0.2s;
}

    .action-icon.edit:hover {
        color: #ffc107;
    }

    .action-icon.delete:hover {
        color: #dc3545;
    }

.room-name {
    font-weight: 500;
}



/*lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll*/

/* ----------------------------------
           Styles Formulaire de Gestion (Général)
           ---------------------------------- */

.management-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

    .management-card h2 {
        color: #3f51b5;
        font-weight: 600;
        margin-bottom: 25px;
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 10px;
    }

/* Liste des Salles (Tableau/Liste) */
.room-list-item, .depot-list-item, .container-list-item {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

    .room-list-item:last-child, .depot-list-item:last-child, .container-list-item:last-child {
        border-bottom: none;
    }

    .room-list-item:hover, .depot-list-item:hover, .container-list-item:hover {
        background-color: #f8f9fa;
    }

.action-icon {
    font-size: 1.1rem;
    cursor: pointer;
    margin-left: 10px;
    transition: color 0.2s;
}

    .action-icon.edit:hover {
        color: #ffc107;
    }

    .action-icon.delete:hover {
        color: #dc3545;
    }

.room-name, .depot-name, .container-code {
    font-weight: 500;
}

.management-card-container {
    border-left: 5px solid #ffc107;
}


.management-card-loan-gen {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

    .management-card-loan-gen h4 {
        color: #3f51b5;
        font-weight: 600;
        margin-bottom: 25px;
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 10px;
    }

/* Styles pour le Module Prêt (M4) */
.management-card-loan {
    border-left: 5px solid #dc3545; /* Rouge pour l'alerte/mouvement */
}

/* Style général des éléments de la liste */
.loan-list-item {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    transition: background-color 0.15s ease;
}

    .loan-list-item:last-child {
        border-bottom: none;
    }

    .loan-list-item:hover {
        background-color: #f8f9fa;
    }

/* Actions spécifiques à la liste de prêts */
.loan-actions button {
    background: none;
    border: none;
    padding: 5px;
    margin-left: 5px;
    font-size: 1.2rem;
    transition: color 0.15s;
}

    .loan-actions button:hover {
        opacity: 0.8;
    }

.loan-actions .btn-return {
    color: #28a745;
}
/* Vert */
.loan-actions .btn-relance {
    color: #007bff;
}
/* Bleu */
.loan-actions .btn-details {
    color: #17a2b8;
}
/* Cyan/Info */


/* ---------------------------------
  Styles Spécifiques au Module d'Impression des etiquettes
--------------------------------- */
.management-card-print {
    border-left: 5px solid #ff9800; /* Orange pour l'impression/logistique */
}

.label-preview-container {
    border: 2px dashed #cccccc;
    padding: 15px;
    min-height: 400px;
    background-color: #ffffff;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
}

/* Style de l'Étiquette (simulée) */
.label-box {
    width: 200px; /* Taille typique d'une étiquette (pour l'aperçu) */
    height: 100px;
    border: 1px solid #333;
    padding: 5px;
    border-radius: 3px;
    text-align: center;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

    .label-box .code {
        font-size: 1.2rem;
        font-weight: 700;
        color: #3f51b5;
        line-height: 1.1;
    }

    .label-box .location {
        font-size: 0.8rem;
        color: #6c757d;
    }

/* Styles spécifiques pour l'impression réelle */
@media print {
    body {
        background: none !important;
    }
    /* Masquer tout ce qui n'est pas l'aperçu d'étiquette lors de l'impression */
    .management-card-print *:not(.label-preview-container):not(.label-box) {
        display: none;
    }

    .label-preview-container {
        border: none !important;
        padding: 0;
        box-shadow: none;
        /* Réinitialiser la taille pour l'impression sur format A4/étiquette */
        width: 100%;
        min-height: auto;
        justify-content: space-between;
    }

    .label-box {
        /* Adapter la taille pour l'impression (Ex: 3 étiquettes par ligne) */
        width: 30%;
        height: 80px;
        border: 1px solid #000;
        margin-bottom: 10px;
    }
}


.management-card-cat {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    height: 100%; /* S'assurer que les deux colonnes s'alignent */
    border-left: 5px solid #3f51b5; /* Thème Catégorie/Admin */
}

    .management-card-cat h4 {
        color: #3f51b5;
        font-weight: 600;
        margin-bottom: 25px;
        border-bottom: 2px solid #e0e0e0;
        padding-bottom: 10px;
    }

/* ----------------------------------
           Zone de Formulaire (Gauche)
           ---------------------------------- */
.form-area {
    height: 100%;
}

/* ----------------------------------
           Liste des Catégories (Droite)
           ---------------------------------- */
.category-list {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.list-header {
    background-color: #f8f9fa;
    font-weight: 600;
    padding: 10px 15px;
    border-bottom: 1px solid #dee2e6;
}

.category-item {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.15s ease;
}

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

.action-icon {
    font-size: 1.1rem;
    cursor: pointer;
    margin-left: 10px;
    transition: color 0.2s;
}

    .action-icon.edit:hover {
        color: #ffc107;
    }

    .action-icon.delete:hover {
        color: #dc3545;
    }

.category-name {
    font-weight: 500;
    color: #3f51b5;
}

/* ----------------------------------
           TreeView Select (Custom Dropdown)
           ---------------------------------- */
.tree-select-container {
    position: relative;
}

/* Bouton qui ouvre l'arborescence */
.tree-select-toggle {
    width: 100%;
    height:45px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Arborescence déroulante */
.tree-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 100%;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}

/* Item de l'arborescence */
.tree-item {
    padding: 5px 15px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.9rem;
}

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

/* Indentation des niveaux (simulée avec padding) */
.level-0 {
    padding-left: 10px;
    font-weight: 600;
}

.level-1 {
    padding-left: 30px;
}

.level-2 {
    padding-left: 50px;
}

.level-3 {
    padding-left: 70px;
}

.level-4 {
    padding-left: 90px;
}

.tree-icon {
    color: #ffc107;
    margin-right: 5px;
}

.selected-item {
    background-color: #e8eaf6 !important;
    color: #3f51b5;
}


.indexation-card {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
/*    max-width: 1500px;*/
    margin: 10px;
    border-left: 5px solid #ff9800; /* Thème orange pour l'indexation/capture */
}

    .indexation-card h4 {
        color: #ff9800;
        font-weight: 700;
        margin-bottom: 25px;
        border-bottom: 2px solid #ffcc80;
        padding-bottom: 10px;
    }

/* Conteneur de Glisser/Déposer (Drag and Drop) */
.drop-zone {
    border: 2px dashed #cccccc;
    background-color: #fafafa;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .drop-zone.dragover {
        border-color: #ff9800;
        background-color: #fff3e0;
    }

    .drop-zone i {
        font-size: 2.5rem;
        color: #ff9800;
        margin-bottom: 10px;
    }

    .drop-zone p {
        margin: 0;
        font-weight: 500;
    }

/* Indicateur de fichier chargé */
.file-loaded-info {
    background-color: #e8f5e9;
    border: 1px solid #66bb6a;
    color: #388e3c;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

/* NOUVEAU STYLE: Connecteurs Cloud */
.cloud-connectors {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 15px 0 5px 0;
    border-top: 1px solid #eeeeee;
}

.cloud-connector-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    transition: color 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
}

    .cloud-connector-btn:hover {
        color: #3f51b5;
    }

    .cloud-connector-btn i {
        font-size: 2rem;
        margin-bottom: 5px;
    }

/* Couleurs pour les icônes de cloud (simulées avec BI) */
.dropbox-color {
    color: #007ee5;
}

.drive-color {
    color: #34a853;
}
/* Google Drive green */
.onedrive-color {
    color: #0078d4;
}

.vault-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    margin-bottom: 30px;
    border-left: 5px solid #673ab7; /* Thème Violet pour la sécurité/CFD */
}

    .vault-card h5 {
        color: #673ab7;
        font-weight: 700;
        margin-bottom: 25px;
        border-bottom: 2px solid #b39ddb;
        padding-bottom: 10px;
    }

/* Section de Configuration */
.config-section {
    background-color: #fcfcfd;
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

/* Liste des Documents Sécurisés */
.document-list-cfd {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.list-header-cfd {
    background-color: #e9ecef;
    font-weight: 600;
    padding: 10px 15px;
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.document-item-cfd {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.15s ease;
}

    .document-item-cfd:hover {
        background-color: #f3f3ff;
    }

/* Indicateurs de sécurité */
.badge-security {
    font-size: 0.75rem;
    padding: 5px 8px;
    border-radius: 12px;
    margin-left: 5px;
}

.action-button-cfd {
    padding: 4px 8px;
    font-size: 0.8rem;
    margin-left: 5px;
    border-radius: 6px;
}

.alert-security {
    font-size: 0.9rem;
    margin-top: 15px;
}


.rights-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin: 30px auto;
/*    max-width: 1000px;*/
    border-left: 5px solid #2196f3; /* Thème Bleu pour les droits/permissions */
}

    .rights-card h4 {
        color: #2196f3;
        font-weight: 700;
        margin-bottom: 25px;
        border-bottom: 2px solid #90caf9;
        padding-bottom: 10px;
    }

/* Section de Définition des Permissions */
.permission-section {
    background-color: #e3f2fd;
    border: 1px solid #90caf9;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

/* Liste des Droits Appliqués (Résumé) */
.applied-rights-list {
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.list-header-rights {
    background-color: #e9ecef;
    font-weight: 600;
    padding: 10px 15px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.right-item {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

    .right-item:nth-child(even) {
        background-color: #f8f9fa;
    }

/* Badges de Droit */
.badge-right {
    font-size: 0.75rem;
    padding: 5px 8px;
    border-radius: 12px;
    margin-right: 5px;
}




.main-content {
    width: 100%;
    max-width: 1200px;
    text-align: center;
}

/* ---------------------------------
           1. Zone de Recherche Centrale
           --------------------------------- */
.search-area {
    margin-bottom: 60px;
    padding: 40px;
    border-radius: 15px;
    background-color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.search-input {
    height: 60px;
    border-radius: 30px;
    font-size: 1.1rem;
    padding-left: 30px;
    padding-right: 30px;
    border: 2px solid #e0e0e0;
    transition: border-color 0.3s;
}

    .search-input:focus {
        border-color: #3f51b5;
        box-shadow: 0 0 10px rgba(63, 81, 181, 0.2);
    }

/* Bouton de recherche dans la barre */
.search-area .btn-search {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #3f51b5;
    font-size: 1.5rem;
    padding: 0 15px;
}

/* ---------------------------------
           2. Boutons d'Action Rapide (Encadrés Modernes)
           --------------------------------- */
.action-buttons-row {
    justify-content: center;
}

.action-box {
    display: flex; /* Utilisation de flexbox pour aligner l'icône/texte */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120px; /* Légèrement plus compact */
    text-align: center;
    padding: 15px 10px;
    border-radius: 12px;
    text-decoration: none;
    /* Design Minimaliste/Soft */
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #ffffff; /* Bordure blanche par défaut */
    color: #444;
    transition: all 0.3s ease;
}

    .action-box:hover {
        transform: translateY(-3px); /* Soulèvement subtil */
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
        background-color: #ffffff;
        border-color: #3f51b5; /* Bordure bleue au survol */
        color: #3f51b5;
    }

.action-icon {
    font-size: 2rem; /* Légèrement réduit */
    color: #3f51b5;
    margin-bottom: 5px;
    display: block;
}

.action-text {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    display: block;
}

/* Ajustement CRITIQUE pour diminuer la largeur des boutons */
.col-custom-5 {
    width: 18%; /* Réduit de 20% à 18% */
    padding: 0 10px;
}

@media (max-width: 1200px) {
    .col-custom-5 {
        width: 50%; /* 2 par ligne sur grand tablette */
    }
}

@media (max-width: 576px) {
    .col-custom-5 {
        width: 100%; /* 1 par ligne sur mobile */
    }
}



/* ---------------------------------
           2. Liste des Résultats
           --------------------------------- */
.result-stats {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.result-card {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    border-left: 5px solid #3f51b5; /* Bande latérale pour l'impact */
}

.result-title a {
    font-size: 1.3rem;
    color: #1a0dab; /* Bleu Google pour le titre */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

    .result-title a:hover {
        text-decoration: underline;
        color: #0000a0;
    }

.result-url {
    color: #006621; /* Vert Google pour l'URL */
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.result-description {
    color: #545454;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

/* ---------------------------------
           3. Actions Contextuelles (Boutons)
           --------------------------------- */
.action-buttons button {
    margin-right: 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Styles spécifiques aux boutons d'action */
.btn-action-primary {
    background-color: #3f51b5;
    border-color: #3f51b5;
    color: white;
}

    .btn-action-primary:hover {
        background-color: #303f9f;
        border-color: #303f9f;
        color: white;
    }

.btn-action-secondary {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
    color: #444;
}

    .btn-action-secondary:hover {
        background-color: #c0c0c0;
        border-color: #c0c0c0;
        color: #333;
    }

/* Style pour les permissions non accordées */
.btn-action-disabled {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
    cursor: not-allowed;
    opacity: 0.8;
}

/* ========================================================
   KPI VALIDATION - STYLES PERSONNALISÉS
   ======================================================== */

/* --- Filtres de validation KPI --- */
.kpi-validation-filters {
    padding: 15px 0;
}

.kpi-validation-filters .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 8px;
}

.kpi-validation-count {
    font-size: 0.9rem;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 600;
}

/* --- Table de validation KPI --- */
.kpi-validation-table {
    table-layout: fixed;
    width: 100%;
}

.kpi-validation-table thead th:nth-child(1) { width: 50px; } /* Checkbox */
.kpi-validation-table thead th:nth-child(2) { width: 70px; } /* Envoyé par (image) */
.kpi-validation-table thead th:nth-child(3) { width: 140px; } /* Envoyé le */
.kpi-validation-table thead th:nth-child(4) { width: 25%; } /* Libellé objectif */
.kpi-validation-table thead th:nth-child(5) { width: 100px; } /* Date début */
.kpi-validation-table thead th:nth-child(6) { width: 100px; } /* Date fin */
.kpi-validation-table thead th:nth-child(7) { width: 280px; } /* Employé/Unité */
.kpi-validation-table thead th:nth-child(8) { width: 110px; } /* Statut */
.kpi-validation-table thead th:nth-child(9) { width: 110px; } /* Actions */

.kpi-validation-table thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 0.9rem;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

.kpi-validation-table tbody td {
    white-space: nowrap;
}

.kpi-validation-table tbody td.kpi-title-cell {
    white-space: normal;
    min-width: 250px;
}

.kpi-validation-table tbody tr {
    transition: all 0.3s ease;
}

.kpi-validation-table tbody tr:hover {
    background-color: #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- Utilisateur qui a envoyé --- */
.kpi-validation-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kpi-validation-user .stacked-images {
    flex-shrink: 0;
}

.kpi-validation-username {
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
}

/* Tooltips pour les images de profil */
.kpi-validation-table .stacked-images {
    position: relative;
    cursor: pointer;
}

.kpi-validation-table .stacked-images img[title] {
    position: relative;
    transition: transform 0.2s ease;
}

.kpi-validation-table .stacked-images img[title]:hover {
    transform: scale(1.1);
}

.kpi-validation-table .stacked-images img[title]:hover::after {
    content: attr(title);
    position: fixed;
    top: auto;
    bottom: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -120px) !important;
    padding: 10px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 8px;
    z-index: 99999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    display: block;
    letter-spacing: 0.3px;
    animation: tooltipFadeIn 0.2s ease;
}

.kpi-validation-table .stacked-images img[title]:hover::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70px) !important;
    border: 6px solid transparent;
    border-top-color: #764ba2;
    z-index: 99999;
    pointer-events: none;
    display: block;
    animation: tooltipFadeIn 0.2s ease;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -110px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -120px);
    }
}

/* --- Titre du KPI --- */
.kpi-validation-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    line-height: 1.4;
    display: block;
}

/* --- Date d'envoi --- */
.kpi-validation-date {
    font-size: 0.85rem;
    color: #6c757d;
    white-space: nowrap;
}

/* --- Période --- */
.kpi-validation-period {
    font-size: 0.85rem;
    line-height: 1.6;
}

.kpi-validation-period small {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Badges de priorité --- */
.kpi-priority-badge {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-priority-haute {
    background-color: #dc3545;
    color: #fff;
}

.kpi-priority-moyenne {
    background-color: #fd7e14;
    color: #fff;
}

.kpi-priority-basse {
    background-color: #28a745;
    color: #fff;
}

/* --- Badges de statut --- */
.kpi-status-badge {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-status-pending {
    background-color: #ffc107;
    color: #000;
}

.kpi-status-approved {
    background-color: #28a745;
    color: #fff;
}

.kpi-status-rejected {
    background-color: #dc3545;
    color: #fff;
}

/* --- Badges Employé/Unité --- */
.kpi-validation-table .badge.bg-secondary {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    display: inline-block;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
}

/* Tooltips pour les badges Employé/Unité */
.kpi-validation-table .badge.bg-secondary[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(0) !important;
    padding: 8px 14px;
    background-color: #6c757d;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 6px;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
    display: block;
}

.kpi-validation-table .badge.bg-secondary[title]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(0) !important;
    border: 5px solid transparent;
    border-top-color: #6c757d;
    z-index: 10000;
    pointer-events: none;
    display: block;
}

/* --- Colonne des actions --- */
.kpi-actions-cell {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    padding: 8px !important;
}

/* --- Boutons d'actions --- */
.kpi-validation-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.kpi-validation-actions .btn-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: none !important;
    flex-shrink: 0;
    box-shadow: none !important;
}

.kpi-validation-actions .btn-icon i {
    font-size: 0.95rem;
}

.kpi-validation-actions .btn-icon:not(.btn-success):not(.btn-danger) {
    background-color: #e9ecef;
    color: #495057;
}

.kpi-validation-actions .btn-icon:not(.btn-success):not(.btn-danger):hover:not(:disabled) {
    background-color: #0d6efd;
    color: #fff;
}

.kpi-validation-actions .btn-success {
    background-color: #28a745;
    color: #fff;
}

.kpi-validation-actions .btn-success:hover:not(:disabled) {
    background-color: #1e7e34;
    color: #fff;
}

.kpi-validation-actions .btn-danger {
    background-color: #dc3545;
    color: #fff;
}

.kpi-validation-actions .btn-danger:hover:not(:disabled) {
    background-color: #bd2130;
    color: #fff;
}

.kpi-validation-actions .btn-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #6c757d !important;
    color: #fff !important;
}

/* Override tous les styles Bootstrap qui pourraient causer des décalages */
.kpi-validation-actions .btn-icon:hover,
.kpi-validation-actions .btn-icon:focus,
.kpi-validation-actions .btn-icon:active {
    outline: none !important;
}

/* Tooltips personnalisés pour les boutons d'actions */
.kpi-validation-actions .btn-icon {
    position: relative;
}

.kpi-validation-actions .btn-icon[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(0) !important;
    padding: 6px 10px;
    background-color: #212529;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 4px;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    display: block;
}

.kpi-validation-actions .btn-icon[title]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(0) !important;
    border: 5px solid transparent;
    border-top-color: #212529;
    z-index: 10000;
    pointer-events: none;
    display: block;
}

/* --- Actions groupées --- */
.kpi-validation-bulk-actions {
    margin-top: 15px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.kpi-validation-bulk-actions .alert {
    margin: 0;
    padding: 12px 20px;
}

/* --- Animations --- */
@keyframes kpi-validation-success {
    0%, 100% {
        background-color: transparent;
    }
    50% {
        background-color: #d4edda;
    }
}

@keyframes kpi-validation-reject {
    0%, 100% {
        background-color: transparent;
    }
    50% {
        background-color: #f8d7da;
    }
}

.kpi-validation-success-animation {
    animation: kpi-validation-success 1.5s ease-in-out;
}

.kpi-validation-reject-animation {
    animation: kpi-validation-reject 1.5s ease-in-out;
}

/* --- Modales personnalisées --- */
#kpiValidationDetailModal,
#kpiValidationApproveModal,
#kpiValidationRejectModal {
    z-index: 1060 !important;
}

#kpiValidationDetailModal .modal-dialog,
#kpiValidationApproveModal .modal-dialog,
#kpiValidationRejectModal .modal-dialog {
    z-index: 1061 !important;
}

.modal-backdrop {
    z-index: 1055 !important;
}

#kpiValidationDetailModal .modal-body,
#kpiValidationApproveModal .modal-body,
#kpiValidationRejectModal .modal-body {
    padding: 20px;
}

#kpiValidationDetailModal .table-bordered {
    border: 1px solid #dee2e6;
}

#kpiValidationDetailModal .table-bordered th {
    background-color: #f8f9fa;
    font-weight: 600;
}

#kpiValidationApproveModal .modal-header,
#kpiValidationRejectModal .modal-header {
    border-bottom: none;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .kpi-validation-filters {
        gap: 10px;
    }

    .kpi-validation-filters .col-xxl-3,
    .kpi-validation-filters .col-xxl-2 {
        margin-bottom: 15px;
    }

    .kpi-validation-table {
        font-size: 0.85rem;
    }

    .kpi-validation-actions {
        flex-direction: column;
        gap: 3px;
    }

    .kpi-validation-actions .btn-icon {
        width: 100%;
        height: 30px;
    }

    .kpi-validation-bulk-actions .alert {
        flex-direction: column;
        text-align: center;
    }

    .kpi-validation-bulk-actions .alert > div {
        margin-top: 10px;
        width: 100%;
    }

    .kpi-validation-bulk-actions .alert button {
        width: 100%;
        margin: 5px 0;
    }
}

/* --- Checkbox styling --- */
.kpi-validation-table .form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 0;
    cursor: pointer;
}

.kpi-validation-table .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* --- Amélioration des tooltips --- */
[data-tooltip] {
    position: relative;
    cursor: pointer;
}

[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background-color: #333;
    color: #fff;
    font-size: 0.75rem;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
}

[data-tooltip].bottom:hover::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 5px;
}

/* ========================================================
   FIN KPI VALIDATION STYLES
   ======================================================== */

/* ========================================================
   KPI TASK VALIDATION - STYLES PERSONNALISÉS
   ======================================================== */

/* --- Table de validation des tâches KPI --- */
.kpi-task-validation-table {
    table-layout: fixed;
    width: 100%;
}

.kpi-task-validation-table thead th:nth-child(1) { width: 50px; } /* Checkbox */
.kpi-task-validation-table thead th:nth-child(2) { width: 70px; } /* Par (image) */
.kpi-task-validation-table thead th:nth-child(3) { width: 140px; } /* Envoyé le */
.kpi-task-validation-table thead th:nth-child(4) { width: 30%; } /* Libellé tâche */
.kpi-task-validation-table thead th:nth-child(5) { width: 110px; } /* Périodicité */
.kpi-task-validation-table thead th:nth-child(6) { width: 200px; } /* Catégorie */
.kpi-task-validation-table thead th:nth-child(7) { width: 130px; } /* KPI atteint */
.kpi-task-validation-table thead th:nth-child(8) { width: 110px; } /* Statut */
.kpi-task-validation-table thead th:nth-child(9) { width: 110px; } /* Actions */

.kpi-task-validation-table thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 0.9rem;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

.kpi-task-validation-table tbody td {
    white-space: nowrap;
}

.kpi-task-validation-table tbody td.kpi-task-title-cell {
    white-space: normal;
}

.kpi-task-validation-table tbody tr {
    transition: all 0.3s ease;
}

.kpi-task-validation-table tbody tr:hover {
    background-color: #e9ecef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- Tooltips images profil --- */
.kpi-task-validation-table .stacked-images {
    position: relative;
    cursor: pointer;
}

.kpi-task-validation-table .stacked-images img[title] {
    position: relative;
    transition: transform 0.2s ease;
}

.kpi-task-validation-table .stacked-images img[title]:hover {
    transform: scale(1.1);
}

.kpi-task-validation-table .stacked-images img[title]:hover::after {
    content: attr(title);
    position: fixed;
    top: auto;
    bottom: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -120px) !important;
    padding: 10px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 8px;
    z-index: 99999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    display: block;
    letter-spacing: 0.3px;
    animation: tooltipFadeIn 0.2s ease;
}

.kpi-task-validation-table .stacked-images img[title]:hover::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70px) !important;
    border: 6px solid transparent;
    border-top-color: #764ba2;
    z-index: 99999;
    pointer-events: none;
    display: block;
    animation: tooltipFadeIn 0.2s ease;
}

/* --- Titre de la tâche --- */
.kpi-task-validation-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212529;
    line-height: 1.4;
    display: block;
}

/* --- Date d'envoi --- */
.kpi-task-validation-date {
    font-size: 0.85rem;
    color: #6c757d;
    white-space: nowrap;
}

/* --- Barre de progression KPI --- */
.kpi-progress-container {
    width: 100%;
    height: 28px;
    background-color: #e9ecef;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}

.kpi-progress-bar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    transition: width 0.3s ease;
    position: relative;
}

.kpi-progress-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.kpi-progress-high {
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
}

.kpi-progress-medium {
    background: linear-gradient(90deg, #fd7e14 0%, #ffc107 100%);
}

.kpi-progress-low {
    background: linear-gradient(90deg, #dc3545 0%, #e83e8c 100%);
}

/* --- Badges de statut tâches --- */
.kpi-task-status-badge {
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-task-status-pending {
    background-color: #ffc107;
    color: #000;
}

.kpi-task-status-approved {
    background-color: #28a745;
    color: #fff;
}

.kpi-task-status-rejected {
    background-color: #dc3545;
    color: #fff;
}

/* --- Badges catégorie avec tooltip --- */
.kpi-task-validation-table .badge.bg-secondary {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
}

.kpi-task-validation-table .badge.bg-secondary[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(0) !important;
    padding: 8px 14px;
    background-color: #6c757d;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 6px;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25) !important;
    display: block;
}

.kpi-task-validation-table .badge.bg-secondary[title]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(0) !important;
    border: 5px solid transparent;
    border-top-color: #6c757d;
    z-index: 10000;
    pointer-events: none;
    display: block;
}

/* --- Colonne des actions tâches --- */
.kpi-task-actions-cell {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    padding: 8px !important;
}

/* --- Boutons d'actions tâches --- */
.kpi-task-validation-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.kpi-task-validation-actions .btn-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: none !important;
    flex-shrink: 0;
    box-shadow: none !important;
}

.kpi-task-validation-actions .btn-icon i {
    font-size: 0.95rem;
}

.kpi-task-validation-actions .btn-icon:not(.btn-success):not(.btn-danger) {
    background-color: #e9ecef;
    color: #495057;
}

.kpi-task-validation-actions .btn-icon:not(.btn-success):not(.btn-danger):hover:not(:disabled) {
    background-color: #0d6efd;
    color: #fff;
}

.kpi-task-validation-actions .btn-success {
    background-color: #28a745;
    color: #fff;
}

.kpi-task-validation-actions .btn-success:hover:not(:disabled) {
    background-color: #1e7e34;
    color: #fff;
}

.kpi-task-validation-actions .btn-danger {
    background-color: #dc3545;
    color: #fff;
}

.kpi-task-validation-actions .btn-danger:hover:not(:disabled) {
    background-color: #bd2130;
    color: #fff;
}

.kpi-task-validation-actions .btn-icon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #6c757d !important;
    color: #fff !important;
}

/* Override tous les styles qui pourraient causer des décalages */
.kpi-task-validation-actions .btn-icon:hover,
.kpi-task-validation-actions .btn-icon:focus,
.kpi-task-validation-actions .btn-icon:active {
    outline: none !important;
}

/* Tooltips pour les boutons d'actions tâches */
.kpi-task-validation-actions .btn-icon {
    position: relative;
}

.kpi-task-validation-actions .btn-icon[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(0) !important;
    padding: 6px 10px;
    background-color: #212529;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 4px;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    display: block;
}

.kpi-task-validation-actions .btn-icon[title]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(0) !important;
    border: 5px solid transparent;
    border-top-color: #212529;
    z-index: 10000;
    pointer-events: none;
    display: block;
}

/* --- Actions groupées tâches --- */
.kpi-task-validation-bulk-actions {
    margin-top: 15px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.kpi-task-validation-bulk-actions .alert {
    margin: 0;
    padding: 12px 20px;
}

/* ========================================================
   FIN KPI TASK VALIDATION STYLES
   ======================================================== */

/* ========================================================
   KPI RECONCILIATION STYLES
   ======================================================== */

/* Table layout fixe pour éviter les mouvements */
.kpi-reconciliation-table {
    table-layout: fixed;
    width: 100%;
}

.kpi-reconciliation-table thead th:nth-child(1) { width: 40px; } /* Checkbox */
.kpi-reconciliation-table thead th:nth-child(2) { width: 80px; } /* Réalisée par */
.kpi-reconciliation-table thead th:nth-child(3) { width: 130px; } /* Réalisée le */
.kpi-reconciliation-table thead th:nth-child(4) { width: auto; } /* Libellé */
.kpi-reconciliation-table thead th:nth-child(5) { width: 120px; } /* Réalisation */
.kpi-reconciliation-table thead th:nth-child(6) { width: 130px; } /* Attribuée par */
.kpi-reconciliation-table thead th:nth-child(7) { width: 250px; } /* KPI associé */
.kpi-reconciliation-table thead th:nth-child(8) { width: 80px; } /* Statut */
.kpi-reconciliation-table thead th:nth-child(9) { width: 100px; } /* Actions */

/* Row hover */
.kpi-reconciliation-table tbody tr:hover {
    background-color: #f8f9fa !important;
}

/* Actions cell */
.kpi-reconciliation-actions-cell {
    text-align: center;
}

.kpi-reconciliation-actions {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

/* Boutons avec dimensions fixes */
.kpi-reconciliation-actions .btn-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s, color 0.2s;
}

.kpi-reconciliation-actions .btn-icon:hover {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* Status icons - Chain */
.kpi-reconciliation-status-icon {
    font-size: 24px;
    display: inline-block;
}

.kpi-reconciliation-status-icon.linked {
    color: #28a745;
}

.kpi-reconciliation-status-icon.unlinked {
    color: #dc3545;
}

/* Animation de succès */
@keyframes kpiReconciliationSuccess {
    0% { background-color: transparent; }
    50% { background-color: rgba(40, 167, 69, 0.2); }
    100% { background-color: transparent; }
}

.kpi-reconciliation-success-animation {
    animation: kpiReconciliationSuccess 1.5s ease;
}

/* Select KPI - Optimisation */
.kpi-reconciliation-table .kpi-select {
    font-size: 14px;
    min-height: 32px;
}

/* Bulk actions */
.kpi-reconciliation-bulk-actions {
    margin-bottom: 15px;
}

.kpi-reconciliation-bulk-actions .alert {
    margin: 0;
    padding: 12px 20px;
}

/* Filters optimisation */
.kpi-reconciliation-filters .form-label {
    font-weight: 500;
    margin-bottom: 5px;
}

.kpi-reconciliation-filters .form-control,
.kpi-reconciliation-filters .form-select {
    font-size: 14px;
}

/* Responsive */
@media (max-width: 1200px) {
    .kpi-reconciliation-table thead th:nth-child(7) { width: 200px; }
}

@media (max-width: 992px) {
    .kpi-reconciliation-table {
        table-layout: auto;
    }
}


.kpi-task-validation-count {
    font-size: 0.9rem;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 600;
}

.kpi-reconciliation-count {
    font-size: 0.9rem;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 600;
}


/* ========================================================
   FIN KPI RECONCILIATION STYLES
   ======================================================== */

/* ========================================================
   KPI DASHBOARD STYLES
======================================================== */

/* Dashboard Summary Cards */
.kpi-dashboard-summary-card {
    transition: all 0.3s ease;
}

.kpi-dashboard-summary-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* KPI Dashboard Card */
.kpi-dashboard-card {
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.kpi-dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Card Header */
.kpi-dashboard-card-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9ecef;
}

.kpi-dashboard-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.kpi-dashboard-icon i {
    font-size: 24px;
}

.kpi-dashboard-trend {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.kpi-trend-up {
    background-color: #d4edda;
    color: #28a745;
}

.kpi-trend-down {
    background-color: #f8d7da;
    color: #dc3545;
}

/* Card Body */
.kpi-dashboard-card-body {
    padding: 20px 15px;
    flex: 1;
}

.kpi-dashboard-dept-name {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.kpi-dashboard-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.kpi-stat-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.kpi-stat-label {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.kpi-stat-target {
    color: #0d6efd;
}

.kpi-stat-excellent {
    color: #28a745;
}

.kpi-stat-good {
    color: #17a2b8;
}

.kpi-stat-average {
    color: #ffc107;
}

.kpi-stat-poor {
    color: #dc3545;
}

/* Progress Bar */
.kpi-dashboard-progress {
    margin-top: 10px;
}

.kpi-progress-bar-container {
    width: 100%;
    height: 32px;
    background-color: #e9ecef;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.kpi-progress-bar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-radius: 16px;
}

.kpi-progress-excellent {
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
}

.kpi-progress-good {
    background: linear-gradient(90deg, #17a2b8 0%, #138496 100%);
}

.kpi-progress-average {
    background: linear-gradient(90deg, #ffc107 0%, #e0a800 100%);
}

.kpi-progress-poor {
    background: linear-gradient(90deg, #dc3545 0%, #c82333 100%);
}

.kpi-progress-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Card Footer */
.kpi-dashboard-card-footer {
    padding: 12px 15px;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: center;
}

.kpi-view-details {
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
}

.kpi-view-details:hover {
    background-color: #e9ecef;
    transform: scale(1.05);
}

/* Filtres */
.kpi-dashboard-filters .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kpi-dashboard-item {
    animation: fadeInUp 0.5s ease;
}

/* Responsive */
@media (max-width: 1200px) {
    .kpi-dashboard-dept-name {
        font-size: 0.9rem;
        min-height: 45px;
    }

    .kpi-stat-value {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .kpi-dashboard-card-header {
        padding: 12px;
    }

    .kpi-dashboard-card-body {
        padding: 15px 12px;
    }

    .kpi-dashboard-icon {
        width: 40px;
        height: 40px;
    }

    .kpi-dashboard-icon i {
        font-size: 20px;
    }

    .kpi-dashboard-dept-name {
        font-size: 0.85rem;
        min-height: 50px;
    }

    .kpi-stat-value {
        font-size: 1rem;
    }

    .kpi-progress-bar-container {
        height: 28px;
    }

    .kpi-progress-label {
        font-size: 0.75rem;
    }
}

/* ========================================================
   FIN KPI DASHBOARD STYLES
======================================================== */

/* Fix for best department text overflow */
#kpiDashboardBestDept {
    font-size: 1.5rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.kpi-dashboard-summary-card .sale-details {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kpi-dashboard-summary-card .sale-details h2 {
    margin-bottom: 5px;
    line-height: 1.2;
}

.kpi-dashboard-summary-card .sale-details p {
    margin-bottom: 0;
    font-size: 0.875rem;
}

/* ========== STYLES DU MODAL KPI DASHBOARD ========== */

/* Cards de statistiques dans le modal */
.kpi-modal-stat-card {
   display: flex;
   align-items: center;
   padding: 20px;
   background: #f8f9fa;
   border-radius: 10px;
   border-left: 4px solid #007bff;
   transition: all 0.3s ease;
}

.kpi-modal-stat-card:hover {
   background: #e9ecef;
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.kpi-modal-stat-icon {
   font-size: 2.5rem;
   margin-right: 15px;
}

.kpi-modal-stat-content h6 {
   margin: 0;
   font-size: 0.85rem;
   color: #6c757d;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.kpi-modal-stat-content h3 {
   margin: 5px 0 0 0;
   font-size: 1.8rem;
   font-weight: bold;
   color: #212529;
}

/* Barre de progression dans le modal */
.kpi-modal-progress-container {
   width: 100%;
   height: 35px;
   background: #e9ecef;
   border-radius: 20px;
   overflow: hidden;
   position: relative;
   box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.kpi-modal-progress-bar {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: width 0.8s ease;
   position: relative;
}

.kpi-modal-progress-label {
   font-weight: bold;
   font-size: 0.9rem;
   color: white;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
   z-index: 1;
}

.kpi-modal-progress-excellent {
   background: linear-gradient(90deg, #28a745, #20c997);
}

.kpi-modal-progress-good {
   background: linear-gradient(90deg, #17a2b8, #0dcaf0);
}

.kpi-modal-progress-average {
   background: linear-gradient(90deg, #ffc107, #fd7e14);
}

.kpi-modal-progress-poor {
   background: linear-gradient(90deg, #dc3545, #c82333);
}

/* Cards d'information dans le modal */
.kpi-modal-info-card {
   padding: 15px;
   background: #ffffff;
   border: 1px solid #dee2e6;
   border-radius: 8px;
}

.kpi-modal-info-card h6 {
   margin-bottom: 10px;
   color: #495057;
   font-weight: 600;
}

.kpi-modal-status-badge {
   margin-top: 5px;
}

.kpi-modal-status-badge .badge {
   font-size: 0.95rem;
   padding: 8px 15px;
}

.kpi-modal-trend-indicator {
   font-size: 1.1rem;
   font-weight: 600;
}

.kpi-modal-trend-indicator i {
   font-size: 1.5rem;
   margin-right: 5px;
}

/* Section des détails */
.kpi-modal-details-section {
   background: #f8f9fa;
   padding: 20px;
   border-radius: 8px;
}

.kpi-modal-details-section h6 {
   color: #495057;
   font-weight: 600;
}

.kpi-modal-detail-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px;
   background: white;
   border-radius: 5px;
   border: 1px solid #e9ecef;
}

.kpi-modal-detail-label {
   font-weight: 500;
   color: #6c757d;
}

.kpi-modal-detail-value {
   font-weight: bold;
   color: #212529;
   font-size: 1.05rem;
}

/* Section historique */
.kpi-modal-history-section {
   background: #ffffff;
   padding: 20px;
   border-radius: 8px;
   border: 1px solid #dee2e6;
}

.kpi-modal-history-section h6 {
   color: #495057;
   font-weight: 600;
}

.kpi-modal-history-section table {
   margin-top: 15px;
}

.kpi-modal-history-section thead {
   background: #f8f9fa;
}

.kpi-modal-history-section thead th {
   font-weight: 600;
   color: #495057;
   border-bottom: 2px solid #dee2e6;
   padding: 12px;
}

.kpi-modal-history-section tbody td {
   padding: 10px 12px;
   vertical-align: middle;
}

.kpi-modal-history-section tbody tr:hover {
   background: #f8f9fa;
}

/* Modal header et footer pour KPI */
#kpiDetailsModal .modal-header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   border-bottom: none;
}

#kpiDetailsModal .modal-header .modal-title {
   font-weight: 600;
}

#kpiDetailsModal .modal-header .btn-close {
   filter: brightness(0) invert(1);
}

#kpiDetailsModal .modal-footer {
   border-top: 1px solid #dee2e6;
   background: #f8f9fa;
}

/* Animations du modal KPI */
@keyframes slideInKpi {
   from {
      opacity: 0;
      transform: translateY(-20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

#kpiDetailsModal.show .modal-content {
   animation: slideInKpi 0.3s ease;
}

/* ============================================================
   MODERN VOICE RECORDER COMPONENT - NOVENTER
   Created: 2025-10-24
   Description: Composant moderne d'enregistrement vocal avec visualisation
   ============================================================ */

/* Container principal du voice recorder */
.modern-voice-recorder {
   position: absolute;
   z-index: 99999;
   width: 420px;
   top: -220px;
   right: -60px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border-radius: 16px;
   box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3);
   overflow: hidden;
   transition: all 0.3s ease;
}

.modern-voice-recorder.hidden {
   display: none;
}

/* Header du recorder */
.voice-recorder-header {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   padding: 10px 15px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.voice-recorder-header-left {
   display: flex;
   align-items: center;
   gap: 10px;
}

.voice-recorder-header-icon {
   width: 28px;
   height: 28px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 14px;
}

.voice-recorder-header-title {
   color: white;
   font-size: 14px;
   font-weight: 600;
   margin: 0;
}

.voice-recorder-close-btn {
   width: 28px;
   height: 28px;
   background: rgba(255, 255, 255, 0.2);
   border: none;
   border-radius: 50%;
   color: white;
   font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
}

.voice-recorder-close-btn:hover {
   background: rgba(255, 255, 255, 0.3);
   transform: rotate(90deg);
}

/* Body du recorder */
.voice-recorder-body {
   padding: 20px;
   background: white;
}

/* État initial - Avant enregistrement */
.voice-recorder-initial {
   text-align: center;
}

.voice-recorder-microphone-btn {
   width: 60px;
   height: 60px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border: none;
   border-radius: 50%;
   color: white;
   font-size: 24px;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
}

.voice-recorder-microphone-btn::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   transform: translate(-50%, -50%) scale(0);
   transition: transform 0.6s ease;
}

.voice-recorder-microphone-btn:hover::before {
   transform: translate(-50%, -50%) scale(1.5);
   opacity: 0;
}

.voice-recorder-microphone-btn:hover {
   transform: scale(1.1);
   box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
}

.voice-recorder-microphone-btn.recording {
   animation: pulse-recording 1.5s infinite;
}

@keyframes pulse-recording {
   0%, 100% {
      box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
   }
   50% {
      box-shadow: 0 10px 50px rgba(102, 126, 234, 0.8), 0 0 0 20px rgba(102, 126, 234, 0.1);
   }
}

.voice-recorder-hint {
   margin-top: 12px;
   color: #6c757d;
   font-size: 13px;
}

/* État d'enregistrement */
.voice-recorder-recording {
   display: none;
}

.voice-recorder-recording.active {
   display: block;
}

.voice-recorder-status {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 15px;
   padding: 12px;
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   border-radius: 10px;
}

.voice-recorder-status-left {
   display: flex;
   align-items: center;
   gap: 10px;
}

.recording-indicator {
   width: 10px;
   height: 10px;
   background: #dc3545;
   border-radius: 50%;
   animation: blink 1s infinite;
}

@keyframes blink {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.3; }
}

.recording-label {
   color: #495057;
   font-size: 13px;
   font-weight: 600;
}

.recording-timer {
   color: #0078b9;
   font-size: 16px;
   font-weight: 700;
   font-family: 'Courier New', monospace;
}

/* Visualiseur de forme d'onde */
.voice-recorder-visualizer {
   height: 60px;
   background: #f8f9fa;
   border-radius: 10px;
   margin-bottom: 15px;
   padding: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2px;
   overflow: hidden;
}

.visualizer-bar {
   width: 3px;
   background: linear-gradient(to top, #667eea, #764ba2);
   border-radius: 2px;
   transition: height 0.1s ease;
   height: 10px;
}

/* Contrôles d'enregistrement */
.voice-recorder-controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
}

.voice-control-btn {
   width: 48px;
   height: 48px;
   border: none;
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.voice-control-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.voice-control-pause {
   background: #ffc107;
   color: white;
}

.voice-control-pause:hover {
   background: #ffb300;
}

.voice-control-stop {
   background: #dc3545;
   color: white;
   width: 54px;
   height: 54px;
   font-size: 22px;
}

.voice-control-stop:hover {
   background: #c82333;
}

.voice-control-delete {
   background: #6c757d;
   color: white;
}

.voice-control-delete:hover {
   background: #5a6268;
}

/* État après enregistrement - Player */
.voice-recorder-player {
   display: none;
}

.voice-recorder-player.active {
   display: block;
}

.voice-player-waveform {
   height: 70px;
   background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
   border-radius: 10px;
   margin-bottom: 15px;
   padding: 10px;
   position: relative;
   overflow: hidden;
   cursor: pointer;
}

.waveform-progress {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   background: linear-gradient(90deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
   width: 0%;
   transition: width 0.1s linear;
   pointer-events: none;
}

.waveform-bars-container {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2px;
   height: 100%;
}

.waveform-bar {
   width: 2px;
   background: #dee2e6;
   border-radius: 2px;
   transition: background 0.2s ease;
}

.waveform-bar.active {
   background: linear-gradient(to top, #667eea, #764ba2);
}

.voice-player-controls {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
}

.voice-player-play-btn {
   width: 48px;
   height: 48px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border: none;
   border-radius: 50%;
   color: white;
   font-size: 20px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
   transition: all 0.3s ease;
}

.voice-player-play-btn:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.voice-player-timeline {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.voice-player-progress-bar {
   width: 100%;
   height: 5px;
   background: #e9ecef;
   border-radius: 3px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
}

.voice-player-progress-fill {
   height: 100%;
   background: linear-gradient(90deg, #667eea, #764ba2);
   width: 0%;
   border-radius: 3px;
   transition: width 0.1s linear;
}

.voice-player-time {
   display: flex;
   justify-content: space-between;
   font-size: 11px;
   color: #6c757d;
   font-family: 'Courier New', monospace;
}

.voice-player-actions {
   display: flex;
   gap: 8px;
   justify-content: center;
}

.voice-action-btn {
   padding: 8px 16px;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   font-size: 12px;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 6px;
   transition: all 0.3s ease;
}

.voice-action-download {
   background: #28a745;
   color: white;
}

.voice-action-download:hover {
   background: #218838;
   transform: translateY(-2px);
}

.voice-action-rerecord {
   background: #ffc107;
   color: #212529;
}

.voice-action-rerecord:hover {
   background: #ffb300;
   transform: translateY(-2px);
}

.voice-action-delete {
   background: #dc3545;
   color: white;
}

.voice-action-delete:hover {
   background: #c82333;
   transform: translateY(-2px);
}

/* Animations */
@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.modern-voice-recorder {
   animation: fadeIn 0.3s ease;
}

/* Responsive */
@media (max-width: 576px) {
   .modern-voice-recorder {
      width: 90vw;
      right: 5vw;
   }
}

/* ============================================================
   FIN MODERN VOICE RECORDER COMPONENT
   ============================================================ */


/* ============================================================
   MODERN VIDEO RECORDER COMPONENT - NOVENTER
   Created: 2025-10-27
   Description: Composant moderne d'enregistrement vidéo avec preview et playback
   COMMENTÉ TEMPORAIREMENT - À RÉACTIVER PLUS TARD
   ============================================================ */

/*

/* Container principal du video recorder */
.modern-video-recorder {
   position: absolute;
   z-index: 99999;
   width: 500px;
   top: -400px;
   right: -60px;
   background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
   border-radius: 16px;
   box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3);
   overflow: hidden;
   transition: all 0.3s ease;
}

.modern-video-recorder.hidden {
   display: none;
}

/* Header du recorder */
.video-recorder-header {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   padding: 10px 15px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.video-recorder-header-left {
   display: flex;
   align-items: center;
   gap: 10px;
}

.video-recorder-header-icon {
   width: 28px;
   height: 28px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 14px;
}

.video-recorder-header-title {
   color: white;
   font-size: 14px;
   font-weight: 600;
   margin: 0;
}

.video-recorder-close-btn {
   width: 28px;
   height: 28px;
   background: rgba(255, 255, 255, 0.2);
   border: none;
   border-radius: 50%;
   color: white;
   font-size: 14px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
}

.video-recorder-close-btn:hover {
   background: rgba(255, 255, 255, 0.3);
   transform: rotate(90deg);
}

/* Body du recorder */
.video-recorder-body {
   padding: 12px;
   background: white;
}

/* État initial - Avant enregistrement */
.video-recorder-initial {
   text-align: center;
}

.video-recorder-camera-btn {
   width: 60px;
   height: 60px;
   background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
   border: none;
   border-radius: 50%;
   color: white;
   font-size: 24px;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 10px 30px rgba(245, 87, 108, 0.4);
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
}

.video-recorder-camera-btn::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   transform: translate(-50%, -50%) scale(0);
   transition: transform 0.6s ease;
}

.video-recorder-camera-btn:hover::before {
   transform: translate(-50%, -50%) scale(1.5);
   opacity: 0;
}

.video-recorder-camera-btn:hover {
   transform: scale(1.1);
   box-shadow: 0 15px 40px rgba(245, 87, 108, 0.6);
}

.video-recorder-camera-btn.recording {
   animation: pulse-recording-video 1.5s infinite;
}

@keyframes pulse-recording-video {
   0%, 100% {
      box-shadow: 0 10px 30px rgba(245, 87, 108, 0.4);
   }
   50% {
      box-shadow: 0 10px 50px rgba(245, 87, 108, 0.8), 0 0 0 20px rgba(245, 87, 108, 0.1);
   }
}

.video-recorder-hint {
   margin-top: 12px;
   color: #6c757d;
   font-size: 13px;
}

/* Vue d'enregistrement */
.video-recorder-recording {
   display: none;
}

.video-recorder-recording.active {
   display: block;
}

.video-recorder-status {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 15px;
   padding: 10px 15px;
   background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
   border-radius: 8px;
}

.video-recorder-status-left {
   display: flex;
   align-items: center;
   gap: 8px;
}

.recording-indicator {
   width: 10px;
   height: 10px;
   background: #dc3545;
   border-radius: 50%;
   animation: blink-recording 1s infinite;
}

@keyframes blink-recording {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.3; }
}

.recording-label {
   color: #dc3545;
   font-size: 13px;
   font-weight: 600;
}

.recording-timer {
   color: #495057;
   font-size: 14px;
   font-weight: 700;
   font-family: 'Courier New', monospace;
}

/* Preview vidéo */
.video-preview {
   width: 100%;
   height: 360px;
   background: #000;
   border-radius: 8px;
   margin-bottom: 5px;
   object-fit: cover;
}

/* Contrôles d'enregistrement */
.video-recorder-controls {
   display: flex;
   justify-content: center;
   gap: 12px;
}

.video-control-btn {
   width: 42px;
   height: 42px;
   border: none;
   border-radius: 50%;
   color: white;
   font-size: 16px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.video-control-pause {
   background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}

.video-control-pause:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
}

.video-control-stop {
   background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.video-control-stop:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

.video-control-delete {
   background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
}

.video-control-delete:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}

/* Vue Player - Après enregistrement */
.video-recorder-player {
   display: none;
}

.video-recorder-player.active {
   display: block;
}

/* Video player */
.video-player {
   width: 100%;
   height: 280px;
   background: #000;
   border-radius: 8px;
   margin-bottom: 15px;
   object-fit: cover;
}

/* Contrôles du player */
.video-player-controls {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 15px;
}

.video-player-play-btn {
   width: 42px;
   height: 42px;
   background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
   border: none;
   border-radius: 50%;
   color: white;
   font-size: 16px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
   box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);
   flex-shrink: 0;
}

.video-player-play-btn:hover {
   transform: scale(1.05);
   box-shadow: 0 6px 20px rgba(245, 87, 108, 0.4);
}

.video-player-timeline {
   flex: 1;
}

.video-player-progress-bar {
   width: 100%;
   height: 6px;
   background: #e9ecef;
   border-radius: 10px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   margin-bottom: 8px;
}

.video-player-progress-fill {
   height: 100%;
   background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
   border-radius: 10px;
   width: 0%;
   transition: width 0.1s linear;
}

.video-player-time {
   display: flex;
   justify-content: space-between;
   font-size: 11px;
   color: #6c757d;
   font-family: 'Courier New', monospace;
}

/* Actions du player */
.video-player-actions {
   display: flex;
   gap: 8px;
   justify-content: center;
}

.video-action-btn {
   padding: 8px 16px;
   border: none;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 6px;
   transition: all 0.2s ease;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-action-download {
   background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
   color: white;
}

.video-action-download:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.video-action-rerecord {
   background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
   color: white;
}

.video-action-rerecord:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
}

.video-action-delete {
   background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
   color: white;
}

.video-action-delete:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
   .modern-video-recorder {
      width: 90%;
      left: 5%;
      right: auto;
      top: -350px;
   }

   .video-preview,
   .video-player {
      height: 200px;
   }

   .video-action-btn span {
      display: none;
   }

   .video-action-btn {
      padding: 8px 12px;
   }
}

/* ============================================================
   FIN MODERN VIDEO RECORDER COMPONENT
   ============================================================ */


/* ============================================================
   MODERN AUDIO PLAYER & FILE CARDS - NOVENTER
   Designer: Claude Code | Date: 2025-10-27
   ============================================================ */

/* ===================================
   1. LECTEUR AUDIO MODERNE
   =================================== */

.modern-audio-player {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border-radius: 12px;
   padding: 16px 23px;
   box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
   position: relative;
   overflow: hidden;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   width: 100%;
   max-width: 100%;
   margin: 0 auto;
   height: 192px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.modern-audio-player::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 100%);
   pointer-events: none;
}

.modern-audio-player:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 50px rgba(102, 126, 234, 0.4);
}

/* Checkbox en bas au centre des players audio/vidéo */
.media-with-checkbox {
   position: relative;
}

.media-checkbox-side {
   position: absolute;
   bottom: -28px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 10;
}

.media-checkbox-side .form-check-input {
   width: 18px;
   height: 18px;
   margin: 0;
   cursor: pointer;
   border: 2px solid rgba(255, 255, 255, 0.8);
   background-color: rgba(255, 255, 255, 0.15);
}

.media-checkbox-side .form-check-input:checked {
   background-color: #3b82f6;
   border-color: #3b82f6;
}

/* Audio Wave Icon */
.audio-wave-icon {
   position: absolute;
   top: 15px;
   left: 15px;
   width: 35px;
   height: 35px;
   background: rgba(255, 255, 255, 0.15);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   backdrop-filter: blur(10px);
}

.audio-wave-icon i {
   font-size: 16px;
   color: white;
   opacity: 0.9;
}

/* Controls Container */
.audio-controls-container {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 8px;
}

/* Play/Pause Button */
.audio-play-btn {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: white;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   flex-shrink: 0;
}

.audio-play-btn:hover {
   transform: scale(1.1);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.audio-play-btn:active {
   transform: scale(0.95);
}

.audio-play-btn i {
   font-size: 24px;
   color: #667eea;
   margin-left: 2px;
}

.audio-play-btn.playing i {
   margin-left: 0;
}

/* Progress Container */
.audio-progress-container {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

/* Progress Bar */
.audio-progress-bar {
   width: 100%;
   height: 6px;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 10px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
}

.audio-progress-fill {
   height: 100%;
   background: white;
   border-radius: 10px;
   width: 0%;
   transition: width 0.1s linear;
   position: relative;
}

.audio-progress-fill::after {
   content: '';
   position: absolute;
   right: -1px;
   top: 50%;
   transform: translateY(-50%);
   width: 12px;
   height: 12px;
   background: white;
   border-radius: 50%;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Time Display */
.audio-time-display {
   display: flex;
   justify-content: space-between;
   font-size: 11px;
   color: rgba(255, 255, 255, 0.9);
   font-weight: 500;
}

/* Volume Control - MASQUÉ pour compacité, peut être réactivé si besoin */
.audio-volume-container {
   display: none;
}

.audio-volume-icon {
   color: white;
   font-size: 18px;
   cursor: pointer;
   transition: transform 0.2s;
}

.audio-volume-icon:hover {
   transform: scale(1.1);
}

.audio-volume-slider {
   flex: 1;
   height: 4px;
   -webkit-appearance: none;
   appearance: none;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 10px;
   outline: none;
}

.audio-volume-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 14px;
   height: 14px;
   background: white;
   cursor: pointer;
   border-radius: 50%;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.audio-volume-slider::-moz-range-thumb {
   width: 14px;
   height: 14px;
   background: white;
   cursor: pointer;
   border-radius: 50%;
   border: none;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Loading State */
.audio-loading {
   opacity: 0.6;
   pointer-events: none;
}

.audio-loading::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 30px;
   height: 30px;
   border: 3px solid rgba(255, 255, 255, 0.3);
   border-top-color: white;
   border-radius: 50%;
   animation: audioSpin 0.8s linear infinite;
}

@keyframes audioSpin {
   to { transform: translate(-50%, -50%) rotate(360deg); }
}




/* ===================================
   2. CARTES DE FICHIERS MODERNES
   =================================== */

.file-group-separator {
   width: 100%;
   padding: 2px 0;
   margin: 10px 0 0 0;
   display: flex;
   align-items: center;
   gap: 12px;
}
.file-group-separator::before,
.file-group-separator::after {
   content: '';
   flex: 1;
   height: 4px;
   background: linear-gradient(90deg, #4a6cf7, #6c5ce7);
   border-radius: 2px;
}
.file-group-separator span {
   font-size: 13px;
   font-weight: 600;
   color: #4a6cf7;
   white-space: nowrap;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.modern-file-card {
   background: white;
   border-radius: 16px;
   padding: 20px 23px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(0, 0, 0, 0.05);
   width: 100%;
   max-width: 100%;
   height: 192px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.modern-file-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(90deg, #667eea, #764ba2);
   transform: scaleX(0);
   transition: transform 0.3s ease;
}

.modern-file-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.modern-file-card:hover::before {
   transform: scaleX(1);
}

.modern-file-card:active {
   transform: translateY(-4px);
}

/* Cacher la barre d'actions fichiers pendant le viewer */
.file-action-bar-hidden {
   display: none !important;
}

/* Overlay fichier supprimé */
.file-deleted {
   opacity: 0.55;
   pointer-events: auto;
}
.file-deleted-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
   pointer-events: none;
   border-radius: 16px;
}
.file-deleted-overlay::before,
.file-deleted-overlay::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 80%;
   height: 3px;
   background-color: rgba(220, 30, 30, 0.75);
   border-radius: 2px;
}
.file-deleted-overlay::before {
   transform: translate(-50%, -50%) rotate(45deg);
}
.file-deleted-overlay::after {
   transform: translate(-50%, -50%) rotate(-45deg);
}
.media-with-checkbox.file-deleted {
   opacity: 0.55;
}
/* Bloquer lecture audio/vidéo sur fichiers supprimés */
.file-deleted .modern-audio-player,
.file-deleted .modern-video-player-thumbnail,
.file-deleted audio,
.file-deleted video {
   pointer-events: none;
}

/* Fichier désactivé - grisé pour tout le monde */
.file-deactivated {
   opacity: 0.45;
   filter: grayscale(100%);
   pointer-events: auto;
}
.file-deactivated .file-checkbox:disabled {
   opacity: 0.3;
   cursor: not-allowed;
}
.media-with-checkbox.file-deactivated {
   opacity: 0.45;
   filter: grayscale(100%);
}
/* Bloquer lecture audio/vidéo sur fichiers désactivés */
.file-deactivated .modern-audio-player,
.file-deactivated .modern-video-player-thumbnail,
.file-deactivated audio,
.file-deactivated video {
   pointer-events: none;
}
/* Garder la checkbox cliquable dans les deux cas */
.file-deleted .file-checkbox,
.file-deactivated .file-checkbox:not(:disabled),
.file-draft .file-checkbox:not(:disabled) {
   pointer-events: auto;
}

/* ---- Fichier Brouillon ---- */
.file-draft {
   opacity: 0.65;
   border: 2px dashed #f59e0b !important;
   position: relative;
}
.media-with-checkbox.file-draft {
   opacity: 0.65;
   border: 2px dashed #f59e0b !important;
}
.file-draft-badge {
   position: absolute;
   top: 8px;
   right: 8px;
   background: linear-gradient(135deg, #f59e0b, #d97706);
   color: #fff;
   width: 26px;
   height: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   z-index: 11;
   box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
   pointer-events: none;
}
.file-draft-badge i {
   font-size: 12px;
}
.file-draft .file-checkbox:disabled {
   opacity: 0.3;
   cursor: not-allowed;
}
/* Bloquer lecture audio/vidéo sur fichiers brouillon */
.file-draft .modern-audio-player,
.file-draft .modern-video-player-thumbnail,
.file-draft audio,
.file-draft video {
   pointer-events: none;
}

/* Checkbox en bas à gauche pour les fichiers */
.modern-file-card .form-check {
   position: absolute;
   bottom: 10px;
   left: 10px;
   margin: 0 !important;
   padding: 0 !important;
   z-index: 10;
   display: block !important;
   text-align: left !important;
}

.modern-file-card .form-check-input {
   cursor: pointer;
   width: 18px;
   height: 18px;
   margin: 0 !important;
}

/* File Icon Container */
.file-icon-container {
   width: 45px;
   height: 45px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 10px;
   position: relative;
   transition: all 0.3s ease;
}

.modern-file-card:hover .file-icon-container {
   transform: scale(1.1) rotate(5deg);
}

/* PDF - Rouge */
.file-icon-container.pdf-icon {
   background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
   box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
}

/* Word - Bleu */
.file-icon-container.word-icon {
   background: linear-gradient(135deg, #4285f4 0%, #0652b8 100%);
   box-shadow: 0 8px 25px rgba(66, 133, 244, 0.3);
}

/* Excel - Vert */
.file-icon-container.excel-icon {
   background: linear-gradient(135deg, #34a853 0%, #0f9d58 100%);
   box-shadow: 0 8px 25px rgba(52, 168, 83, 0.3);
}

/* PowerPoint - Orange */
.file-icon-container.powerpoint-icon {
   background: linear-gradient(135deg, #f4b400 0%, #e37400 100%);
   box-shadow: 0 8px 25px rgba(244, 180, 0, 0.3);
}

/* ZIP - Violet */
.file-icon-container.zip-icon {
   background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
   box-shadow: 0 8px 25px rgba(155, 89, 182, 0.3);
}

/* Texte - Gris */
.file-icon-container.text-icon {
   background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
   box-shadow: 0 8px 25px rgba(149, 165, 166, 0.3);
}

/* Image - Rose */
.file-icon-container.image-icon {
   background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
   box-shadow: 0 8px 25px rgba(253, 121, 168, 0.3);
}

/* Vidéo - Cyan */
.file-icon-container.video-icon {
   background: linear-gradient(135deg, #00cec9 0%, #00b894 100%);
   box-shadow: 0 8px 25px rgba(0, 206, 201, 0.3);
}

/* Audio - Pourpre */
.file-icon-container.audio-icon {
   background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
   box-shadow: 0 8px 25px rgba(162, 155, 254, 0.3);
}

.file-icon-container i {
   font-size: 28px;
   color: white;
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Extension Badge */
.file-extension-badge {
   position: absolute;
   bottom: -8px;
   right: -8px;
   background: white;
   color: #667eea;
   font-size: 9px;
   font-weight: 700;
   padding: 2px 6px;
   border-radius: 6px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   text-transform: uppercase;
}

/* File Name */
.file-name-text {
   font-size: 14px;
   font-weight: 400;
   color: #2d3436;
   text-align: center;
   line-height: 1.4;
   margin-top: 5px;
   margin-bottom: 8px;
   word-break: break-word;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* File Size */
.file-size-text {
   font-size: 12px;
   color: #636e72;
   text-align: center;
   font-weight: 500;
   margin-top: 4px;
}

/* Download Icon */
.file-download-icon {
   position: absolute;
   top: 15px;
   right: 15px;
   width: 32px;
   height: 32px;
   background: rgba(102, 126, 234, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transform: scale(0.8);
   transition: all 0.3s ease;
}

.modern-file-card:hover .file-download-icon {
   opacity: 1;
   transform: scale(1);
}

.file-download-icon i {
   font-size: 14px;
   color: #667eea;
}


/* ===================================
   3. RESPONSIVE DESIGN
   =================================== */

@media (max-width: 768px) {
   .modern-audio-player {
      max-width: 100%;
      padding: 15px;
   }

   .audio-wave-icon {
      width: 50px;
      height: 50px;
   }

   .audio-wave-icon i {
      font-size: 24px;
   }

   .audio-play-btn {
      width: 40px;
      height: 40px;
   }

   .modern-file-card {
      padding: 15px;
   }

   .file-icon-container {
      width: 60px;
      height: 60px;
   }

   .file-icon-container i {
      font-size: 28px;
   }

   .file-name-text {
      font-size: 13px;
   }
}

/* ============================================================
   FIN MODERN AUDIO PLAYER & FILE CARDS
   ============================================================ */

/* ============================================================
   MODERN VIDEO PLAYER THUMBNAIL (Miniature vidéo)
   ============================================================ */

.modern-video-player-thumbnail {
   width: 100%;
   max-width: 100%;
   height: 192px;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   transition: all 0.3s ease;
   cursor: pointer;
   background: #000;
   display: flex;
   flex-direction: column;
}

.modern-video-player-thumbnail:hover {
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
   transform: translateY(-2px);
}

.video-thumbnail-container {
   position: relative;
   width: 100%;
   flex: 1;
   background: #000;
   overflow: hidden;
}

.video-thumbnail-preview {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.video-thumbnail-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.3);
   opacity: 0;
   transition: opacity 0.3s ease;
}

.modern-video-player-thumbnail:hover .video-thumbnail-overlay {
   opacity: 1;
}

.video-thumbnail-play-btn {
   width: 48px;
   height: 48px;
   border: none;
   background: rgba(255, 255, 255, 0.9);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.video-thumbnail-play-btn:hover {
   background: #fff;
   transform: scale(1.1);
}

.video-thumbnail-play-btn i {
   font-size: 24px;
   color: #e53935;
   margin-left: 2px;
}

.video-thumbnail-info {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   font-size: 13px;
   font-weight: 600;
}

.video-thumbnail-info i {
   font-size: 16px;
   margin-right: 6px;
}

.video-thumbnail-duration {
   background: rgba(0, 0, 0, 0.4);
   padding: 3px 8px;
   border-radius: 4px;
   font-size: 12px;
}

.modern-video-player-thumbnail.video-loading .video-thumbnail-preview {
   filter: blur(4px);
}

.modern-video-player-thumbnail.video-loading::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 40px;
   height: 40px;
   border: 4px solid rgba(255, 255, 255, 0.3);
   border-top-color: #fff;
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

@keyframes spin {
   to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================================================
   FIN MODERN VIDEO PLAYER THUMBNAIL
   ============================================================ */

/* ============================================================
   DEBUT MODERN VIDEO RECORDER
   ============================================================ */

.modern-video-recorder {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 90%;
   max-width: 650px;
   background: #ffffff;
   border-radius: 16px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   z-index: 10000;
   overflow: hidden;
   animation: videoRecorderFadeIn 0.3s ease-out;
}

.modern-video-recorder.hidden {
   display: none;
}

@keyframes videoRecorderFadeIn {
   from {
      opacity: 0;
      transform: translate(-50%, -48%) scale(0.95);
   }
   to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
   }
}

.video-recorder-header {
   background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
   color: white;
   padding: 8px 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.video-recorder-header-left {
   display: flex;
   align-items: center;
   gap: 12px;
}

.video-recorder-header-icon {
   width: 32px;
   height: 32px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
}

.video-recorder-header-title {
   margin: 0;
   font-size: 15px;
   font-weight: 600;
   letter-spacing: 0.3px;
}

.video-recorder-close-btn {
   background: rgba(255, 255, 255, 0.2);
   border: none;
   color: white;
   width: 30px;
   height: 30px;
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
   font-size: 14px;
}

.video-recorder-close-btn:hover {
   background: rgba(255, 255, 255, 0.3);
   transform: rotate(90deg);
}

.video-recorder-body {
   padding: 12px;
   max-height: 60vh;
   overflow-y: auto;
}

.video-recorder-initial-view,
.video-recorder-recording-view,
.video-recorder-player-view {
   display: none;
}

.video-recorder-initial-view.active,
.video-recorder-recording-view.active,
.video-recorder-player-view.active {
   display: block;
}

.video-preview-container {
   width: 100%;
   background: #000;
   border-radius: 12px;
   overflow: hidden;
   position: relative;
   margin-bottom: 12px;
   aspect-ratio: 16/9;
}

.video-preview-container video {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
}

.video-preview-placeholder {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
}

.video-preview-placeholder i {
   font-size: 64px;
   margin-bottom: 16px;
   opacity: 0.9;
}

.video-preview-placeholder p {
   margin: 0;
   font-size: 16px;
   opacity: 0.9;
}

.video-recording-indicator {
   position: absolute;
   top: 16px;
   left: 16px;
   background: rgba(220, 53, 69, 0.95);
   color: white;
   padding: 8px 16px;
   border-radius: 20px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 600;
   font-size: 14px;
   z-index: 1;
}

.video-recording-dot {
   width: 12px;
   height: 12px;
   background: white;
   border-radius: 50%;
   animation: videoRecordingPulse 1.5s ease-in-out infinite;
}

@keyframes videoRecordingPulse {
   0%, 100% {
      opacity: 1;
      transform: scale(1);
   }
   50% {
      opacity: 0.6;
      transform: scale(0.8);
   }
}

.video-recording-timer {
   font-variant-numeric: tabular-nums;
}

.video-controls-container {
   display: flex;
   justify-content: center;
   gap: 12px;
   margin-top: 8px;
   margin-bottom: 4px;
}

.video-control-btn {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
   font-size: 20px;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.video-control-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.video-control-btn:active {
   transform: translateY(0);
}

.video-start-btn {
   background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
   color: white;
   width: auto;
   min-width: 100px;
   height: 37px;
   padding: 12px 24px;
   border-radius: 8px;
   border: none;
   font-size: 15px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 8px rgba(239, 83, 80, 0.3);
}

.video-start-btn:hover {
   background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
   box-shadow: 0 6px 12px rgba(239, 83, 80, 0.4);
   transform: translateY(-2px);
}

/* Contrôles de la vue initiale */
.video-recorder-initial-controls {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 5px 0;
   margin-top: 0;
}

/* Contrôles pendant l'enregistrement */
.video-recording-controls {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 5px 0;
   margin-top: 0;
}

.video-stop-btn {
   background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
   color: white;
   width: auto;
   min-width: 100px;
   height: 37px;
   padding: 12px 24px;
   border-radius: 8px;
   border: none;
   font-size: 15px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.video-stop-btn:hover {
   background: linear-gradient(135deg, #5a6268 0%, #4e555b 100%);
   box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4);
   transform: translateY(-2px);
}

.video-save-btn {
   background: linear-gradient(135deg, #28a745 0%, #218838 100%);
   color: white;
}

.video-save-btn:hover {
   background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
}

.video-delete-btn {
   background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
   color: white;
}

.video-delete-btn:hover {
   background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
}

.video-cancel-btn {
   background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
   color: white;
}

.video-cancel-btn:hover {
   background: linear-gradient(135deg, #5a6268 0%, #545b62 100%);
}

.video-download-btn {
   background: linear-gradient(135deg, #868e96 0%, #6c757d 100%);
   color: white;
}

.video-download-btn:hover {
   background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
}

.video-permission-message {
   text-align: center;
   padding: 32px;
   color: #666;
}

.video-permission-message i {
   font-size: 56px;
   color: #dc3545;
   margin-bottom: 20px;
   display: block;
}

.video-permission-message h4 {
   color: #333;
   margin-bottom: 12px;
   font-size: 20px;
   font-weight: 600;
}

.video-permission-message p {
   margin: 0;
   line-height: 1.6;
   font-size: 15px;
}

.video-error-message {
   background: #f8d7da;
   border: 1px solid #f5c6cb;
   color: #721c24;
   padding: 16px;
   border-radius: 8px;
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   gap: 12px;
}

.video-error-message i {
   font-size: 20px;
   flex-shrink: 0;
}

@media (max-width: 768px) {
   .modern-video-recorder {
      width: 95%;
      max-width: none;
   }

   .video-recorder-body {
      padding: 20px;
   }

   .video-control-btn {
      width: 56px;
      height: 56px;
      font-size: 20px;
   }

   /*.video-start-btn {
      width: 64px;
      height: 50px;
   }*/

   .video-preview-placeholder i {
      font-size: 48px;
   }

   .video-preview-placeholder p {
      font-size: 14px;
   }
}



/* ============================================================
   POSITION DU BOUTON VIDÉO - RESPONSIVE
   ============================================================ */

/* Desktop (XL - 1200px et plus) */
.video-btn-position {
   margin-top: -40px;
   margin-left: 115px;
   display: inline-block;
   vertical-align: top;
}

/* Large tablets et petits desktops (LG - 992px à 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
   .video-btn-position {
      margin-top: -40px;
      margin-left: 80px;
   }
}

/* Tablets (MD - 768px à 991px) */
@media (max-width: 991px) and (min-width: 768px) {
   .video-btn-position {
      margin-top: -40px;
      margin-left: 40px;
   }
}

/* Mobile (SM et XS - moins de 768px) */
@media (max-width: 767px) {
   .video-btn-position {
      margin-top: 25px;
      margin-left: 5px;
   }
}

/* Desktop (XL - 1200px et plus) */
.video-btn-position-one {
   margin-top: -40px;
   margin-left: 128px;
   display: inline-block;
   vertical-align: top;
}

/* Large tablets et petits desktops (LG - 992px à 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
   .video-btn-position-one {
      margin-top: -40px;
      margin-left: 89px;
   }
}

/* Tablets (MD - 768px à 991px) */
@media (max-width: 991px) and (min-width: 768px) {
   .video-btn-position-one {
      margin-top: -40px;
      margin-left: 45px;
   }
}

/* Mobile (SM et XS - moins de 768px) */
@media (max-width: 767px) {
   .video-btn-position-one {
      margin-top: 25px;
      margin-left: 6px;
   }
}



/* ============================================================
   FIN MODERN VIDEO RECORDER
   ============================================================ */





			


/* ============================================================
   SYSTÈME DE NOTIFICATIONS MODERNE NOVENTER (NV)
   ============================================================ */

/* Container des notifications */
#nvNotificationContainer {
   position: fixed;
   top: 20px;
   right: 20px;
   z-index: 999999;
   display: flex;
   flex-direction: column;
   gap: 10px;
   max-width: 500px;
}

/* Notification Card */
.nv-notification {
   display: flex;
   align-items: center;
   gap: 15px;
   background: white;
   border-radius: 12px;
   padding: 16px 20px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
   border-left: 4px solid;
   transition: all 0.3s ease;
   cursor: pointer;
}

.nv-notification:hover {
   transform: translateX(-5px);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* Types de notifications */
.nv-notification-success {
   border-left-color: #48bb78;
}

.nv-notification-error {
   border-left-color: #f56565;
}

.nv-notification-warning {
   border-left-color: #ed8936;
}

.nv-notification-info {
   border-left-color: #4299e1;
}

/* Icône de notification */
.nv-notification-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   font-size: 1.3rem;
   flex-shrink: 0;
}

.nv-notification-success .nv-notification-icon {
   background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
   color: white;
}

.nv-notification-error .nv-notification-icon {
   background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
   color: white;
}

.nv-notification-warning .nv-notification-icon {
   background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
   color: white;
}

.nv-notification-info .nv-notification-icon {
   background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
   color: white;
}

/* Contenu de notification */
.nv-notification-content {
   flex: 1;
}

.nv-notification-message {
   margin: 0;
   font-size: 0.95rem;
   color: #2d3748;
   line-height: 1.5;
}

/* Bouton fermer */
.nv-notification-close {
   background: transparent;
   border: none;
   color: #a0aec0;
   cursor: pointer;
   font-size: 1.2rem;
   padding: 4px;
   border-radius: 4px;
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   flex-shrink: 0;
}

.nv-notification-close:hover {
   background: #f7fafc;
   color: #2d3748;
}



/* ============================================================
   DIALOGUE DE CONFIRMATION MODERNE NOVENTER (NV)
   ============================================================ */

/* Overlay du dialogue */
.nv-confirm-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(4px);
   z-index: 999999;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
}

/* Boîte de dialogue */
.nv-confirm-dialog {
   background: white;
   border-radius: 16px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
   max-width: 500px;
   width: 100%;
   overflow: hidden;
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Header du dialogue */
.nv-confirm-header {
   background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
   color: white;
   padding: 25px 30px;
   display: flex;
   align-items: center;
   gap: 15px;
}

.nv-confirm-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.2);
   font-size: 1.8rem;
   flex-shrink: 0;
}

.nv-confirm-title {
   margin: 0;
   font-size: 1.3rem;
   font-weight: 600;
}

/* Body du dialogue */
.nv-confirm-body {
   padding: 30px;
}

.nv-confirm-message {
   margin: 0;
   font-size: 1rem;
   color: #4a5568;
   line-height: 1.6;
}

/* Footer du dialogue */
.nv-confirm-footer {
   padding: 20px 30px 30px;
   display: flex;
   justify-content: flex-end;
   gap: 12px;
}

/* Boutons du dialogue */
.nv-confirm-btn {
   padding: 12px 24px;
   border: none;
   border-radius: 8px;
   font-size: 0.95rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.nv-confirm-cancel {
   background: #e2e8f0;
   color: #4a5568;
}

.nv-confirm-cancel:hover {
   background: #cbd5e0;
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nv-confirm-ok {
   background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
   color: white;
}

.nv-confirm-ok:hover {
   background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
   transform: translateY(-2px);
   box-shadow: 0 4px 16px rgba(245, 101, 101, 0.4);
}




/* ============================================================
   RESPONSIVE NOTIFICATIONS & DIALOGUES
   ============================================================ */

/* Mobile (< 768px) */
@media (max-width: 768px) {
   #nvNotificationContainer {
      left: 10px;
      right: 10px;
      max-width: none;
   }

   .nv-notification {
      padding: 12px 16px;
   }

   .nv-notification-icon {
      width: 36px;
      height: 36px;
      font-size: 1.1rem;
   }

   .nv-confirm-dialog {
      margin: 10px;
   }

   .nv-confirm-header {
      padding: 20px;
   }

   .nv-confirm-body {
      padding: 20px;
   }

   .nv-confirm-footer {
      padding: 15px 20px 20px;
      flex-direction: column;
   }

   .nv-confirm-btn {
      width: 100%;
      justify-content: center;
   }
}

/* ============================================================
   FIN SYSTÈME DE NOTIFICATIONS MODERNE NOVENTER
   ============================================================ */



/* ============================================================
   SECOND MODAL DE CONFIRMATION POUR INFORMATION PAS POUR SUPPRESSION
   ============================================================ */

/* Modal de confirmation */
.users-confirm-modal .modal-content {
   border: none;
   border-radius: 16px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.users-confirm-modal .modal-header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   border-radius: 16px 16px 0 0;
   padding: 20px 24px;
}

.users-confirm-modal .modal-header.danger {
   background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
}

.users-confirm-modal .modal-header .btn-close {
   filter: brightness(0) invert(1);
}

.users-confirm-modal .modal-body {
   padding: 32px 24px;
   text-align: center;
}

.users-confirm-modal .modal-icon {
   width: 64px;
   height: 64px;
   margin: 0 auto 20px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2rem;
   color: white;
}

.users-confirm-modal .modal-icon.danger {
   background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
}

.users-confirm-modal .modal-footer {
   border-top: none;
   padding: 16px 24px 24px;
   justify-content: center;
   gap: 12px;
}

/* ============================================
   SPINNER PLEINE PAGE - Style Premium
   ============================================ */
.page-loading-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, #0078b9 0%, #005a8c 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 99999;
   opacity: 1;
   transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loading-overlay.hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

.page-loading-content {
   text-align: center;
   color: white;
}

/* Spinner avec anneaux animés */
.page-loading-spinner {
   position: relative;
   width: 80px;
   height: 80px;
   margin: 0 auto 30px;
}

.spinner-ring {
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   border: 3px solid transparent;
}

.spinner-ring:nth-child(1) {
   border-top-color: rgba(255, 255, 255, 0.9);
   animation: spinPageLoader 1.2s linear infinite;
}

.spinner-ring:nth-child(2) {
   border-right-color: rgba(255, 255, 255, 0.6);
   animation: spinPageLoader 1.8s linear infinite reverse;
   width: 70%;
   height: 70%;
   top: 15%;
   left: 15%;
}

.spinner-ring:nth-child(3) {
   border-bottom-color: rgba(255, 255, 255, 0.3);
   animation: spinPageLoader 2.4s linear infinite;
   width: 40%;
   height: 40%;
   top: 30%;
   left: 30%;
}

.spinner-dot {
   position: absolute;
   width: 12px;
   height: 12px;
   background: white;
   border-radius: 50%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   animation: pulsePageLoader 1.5s ease-in-out infinite;
}

@keyframes spinPageLoader {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

@keyframes pulsePageLoader {
   0%, 100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
   }
   50% {
      transform: translate(-50%, -50%) scale(1.3);
      opacity: 0.7;
   }
}

/* Texte de chargement */
.page-loading-text {
   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2px;
}

.loading-text-main {
   letter-spacing: 0.5px;
}

.loading-text-dots span {
   animation: dotBlinkPageLoader 1.4s infinite;
   opacity: 0;
}

.loading-text-dots span:nth-child(1) { animation-delay: 0s; }
.loading-text-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-text-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBlinkPageLoader {
   0%, 20% { opacity: 0; }
   40% { opacity: 1; }
   100% { opacity: 0; }
}

.page-loading-subtext {
   font-size: 0.875rem;
   opacity: 0.8;
   font-weight: 400;
}

/* Animation de disparition douce */
.page-loading-overlay.fade-out {
   animation: fadeOutOverlayPageLoader 0.6s ease forwards;
}

@keyframes fadeOutOverlayPageLoader {
   0% {
      opacity: 1;
      transform: scale(1);
   }
   100% {
      opacity: 0;
      transform: scale(1.05);
   }
}