.go_start{
	color:#E6564E;
	cursor:pointer;
}



.rotated_90 {
	transform-origin: center;
	transform: rotate(90deg);
}


.rotated {
	border: solid red;

	-webkit-transform: rotate(90deg);
	-webkit-transform-origin: 0 -250px;

	transform: rotate(90deg);
	background-color: green;
}

.fa-1x {
  font-size: 1em; }

.fa-2x {
  font-size: 2em; }

.fa-3x {
  font-size: 3em; }

.fa-4x {
  font-size: 4em; }

.fa-5x {
  font-size: 5em; }

.fa-6x {
  font-size: 6em; }

.fa-7x {
  font-size: 7em; }

.fa-8x {
  font-size: 8em; }

.fa-9x {
  font-size: 9em; }

.fa-10x {
  font-size: 10em; }

.fa-2xs {
  font-size: 0.625em;
  line-height: 0.1em;
  vertical-align: 0.225em; }

.fa-xs {
  font-size: 0.75em;
  line-height: 0.08333em;
  vertical-align: 0.125em; }

.fa-sm {
  font-size: 0.875em;
  line-height: 0.07143em;
  vertical-align: 0.05357em; }

.fa-lg {
  font-size: 1.25em;
  line-height: 0.05em;
  vertical-align: -0.075em; }

.fa-xl {
  font-size: 1.5em;
  line-height: 0.04167em;
  vertical-align: -0.125em; }

.fa-2xl {
  font-size: 2em;
  line-height: 0.03125em;
  vertical-align: -0.1875em; }

.fa-fw {
  text-align: center;
  width: 1.25em; }

.box {
    display: inline-block;
    background: white;
    border-radius: 6px;       /* arrondi un peu plus doux */
    padding: 2px 6px;         /* plus d’espace intérieur */
    margin: 2px;              /* petit espacement externe */
    box-shadow: 0 1px 3px rgba(0,0,0,0.15); /* légère ombre */
}

/* Only Print */
@media print
{  
	#navbar_haut {
		display: none;
	}

	#nav_ss_menu {
		display: none;
	}

	div.data {
		top:  10px;
		left: 10px;
	}
}


@media (max-width: 1026px) {
	#siicre_label {
		display: none;
	}
}


/* Body */

:root {
	--background_color:			#F5F5F5;	/* Bleu Proche du blanc */
	--font_color:				#686868;	/* Gris foncé */
	--font_color_selected:		#0280D4;	/* Bleu */
	--background_selected_color:#B6E8FF;	/* Bleu clair */
	--border_left_color:		#0280D4;	/* Bleu */
	--background_hover_color:	linear-gradient(to right, #B6E8FF, #FAFCFD);	/* Bleu Proche du blanc */
}


.scrollbar
{
    overflow-x:hidden;
	overflow-y:auto
}

.scrollbar::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 8px;
	background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar
{
	width: 8px;
	height: 8px;
	background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar-thumb
{
	border-radius: 8px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}



.scrollbar_xy
{
    overflow-x:auto;
	overflow-y:auto
}

.scrollbar_xy::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 8px;
	background-color: #F5F5F5;
}

.scrollbar_xy::-webkit-scrollbar
{
	width: 8px;
	height: 8px;
	background-color: #F5F5F5;
}

.scrollbar_xy::-webkit-scrollbar-thumb
{
	border-radius: 8px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

ul.navbar_ss_menu_ul {
	position:absolute;
	margin:10px;
	padding:10px;
	top:86px;
	left:0px;
	background:var(--background_color);
	width:206px;
	padding:0;
	list-style: none;
	overflow:hidden;
}

.navbar_ss_menu_ul li a {
	width:206px;
	padding-left:10px;
	height:40px;
	line-height:40px;
	display:block;
	overflow:hidden;
	position:relative;
	text-decoration:none;
	font-size:13px;
	color:var(--font_color);
	border-left:5px solid var(--background_color);
}

.navbar_ss_menu_ul li a:hover {
	background: var(--background_hover_color);
	border-left:5px solid var(--border_left_color);
	border-radius: 5px; /* Adjust the radius as needed */
	color:var(--font_color);
}

.navbar_ss_menu_ul li a:active {
  background: --background_selected_color; /* Change to the desired color for the active state */
  color: var(--font_color_selected); /* Change to the desired font color for the active state */
  font-weight:bold;
  border:1px var(--border_left_color) solid;
}

.navbar_ss_menu_ul li.selected a {
	background:var(--background_selected_color);
	border-left:5px solid var(--border_left_color);
    border-right: 5px solid var(--background_selected_color);
	border-radius: 5px; /* Adjust the radius as needed */
	color:var(--font_color_selected);
	font-weight:bold;
}

.navbar_ss_menu_ul i {
	margin-right:10px;
}

.data_service {
	position: absolute;
	top:80px;
	left:0px;
	width:100%;
	height: calc(100vh - 80px);
	padding-left: 20px; 
}

.data_menu {
	position: absolute;
	top:112px;
	left:0px;
	width:100%;
	height:calc(100vh - 112px);
	padding-left: 20px; 
}

.data_ss_menu {
	position: absolute;
	top:112px;
	left:206px;
	width: calc(100% - 206px);
	height: calc(100vh - 112px);
	padding-left: 20px;

	min-width:600px;
	text-align:left;
	vertical-align: top;
	background-color: #F5F5F5;
}

.data_ss_menu_with_right_panel_small {
	position: absolute;
	top:112px;
	left:206px;
	width: calc(100% - 506px);
	height: calc(100vh - 112px);
	padding-left: 20px; 

	min-width:600px;
	text-align:left;
	vertical-align: top;
	background-color: #F5F5F5;
}

.data_ss_menu_width_right_panel_large {
	position: absolute;
	top:112px;
	left:206px;
	width: calc(100% - 606px);
	height: calc(100vh - 112px);
	padding-left: 20px; 

	min-width:600px;
	text-align:left;
	vertical-align: top;
	background-color: #F5F5F5;
}

.right_panel_small {
  position: absolute;
  top: 112px;
  right: 0;          /* position visible */
  width: 306px;
  height: calc(100vh - 112px);
  padding-right: 10px;
  background-color: #F5F5F5;
  z-index: 1;
  /* Pas de display:none ici, on joue sur right */
}


.data_expand {
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	height: 100vh;
	padding-left: 20px;
}






.title {
	text-align:left;
	font-weight: bold;
	color:red;
	padding-top:9px;
	padding-bottom:9px;
}

td		{ font-size: 10pt; }
th		{ font-size: 10pt; color: #000099; }


.navbar {
  z-index: 1;
}

.table-fixe-scroll thead th {
  position: sticky;
  top: 0px;
  padding: 12px;
  color: #555;
  background-color: #f9f9f9;
}

.vignette {
	border-radius:15px;
	color:#FFFFFF;
	padding: 5px;
	font-weight:bold;
	width: 20px;
	height: 20px;
	
}



.mac-button {
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: white;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.mac-button:hover {
    transform: scale(1.1);
}

.mac-button.red {
    background-color: #ff5f57;
}

.mac-button.green {
    background-color: #28a745;
}

.mac-button i {
    font-size: 0.6rem;
}


.grey_header {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	background-color: #D3D3D3;
	height: 40px;
	padding: 0 12px;
	gap: 10px;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	border-bottom: 1px solid #dee2e6;
	justify-content: space-between;
}

.icon-wrapper {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 34px;
	height: 34px;
}

.icon-wrapper i {
	color: #666;
	font-size: 22px;
	transition: color 0.2s ease, filter 0.2s ease;
}

.icon-wrapper:hover i {
	color: #007aff; /* bleu iOS */
	filter: drop-shadow(0 0 3px rgba(0, 122, 255, 0.4));
	animation: rebound 0.3s ease;
	cursor: pointer;
}

@keyframes rebound {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.08); }
	70%  { transform: scale(0.97); }
	100% { transform: scale(1); }
}

.data_footer {
	height: 30px;
	background-color: #f8f9fa;
	border-top: 1px solid #dee2e6;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.8rem;
	color: #6c757d;
	flex-shrink: 0;
}