html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.body_main
	{
		padding-top		:56px; 
		padding-bottom	:0px;
	}
iframe 
	{
		position:relative; 
		height:100%; 
		width:100%;
	}
	
.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}




 .btn-purple{color:#fff;background-color:#6f42c1;border-color:#6f42c1;}
 .btn-purple:hover{color:#fff;background-color:#411989;border-color:#411989;}
 .btn-check:focus+.btn-purple,.btn-purple:focus{color:#fff;background-color:#0b5ed7;border-color:#0a58ca;box-shadow:0 0 0 .25rem rgba(49,132,253,.5)}
 .btn-check:active+.btn-purple,.btn-check:checked+.btn-purple,.btn-purple.active,.btn-purple:active,.show>.btn-purple.dropdown-toggle{color:#fff;background-color:#0a58ca;border-color:#0a53be}
 .btn-check:active+.btn-purple:focus,.btn-check:checked+.btn-purple:focus,.btn-purple.active:focus,.btn-purple:active:focus,.show>.btn-purple.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(49,132,253,.5)}
 .btn-purple.disabled,.btn-purple:disabled{color:#fff;background-color:#6f42c1;border-color:#6f42c1}
 
 .alert-purple{color:#111;background-color:#6f42c1;border-color:#6f42c1}
 .alert-purple .alert-link{color:#6f42c1}

.bg-purple{--bs-bg-opacity:1;background-color:#6f42c1;!important}
 
 
/* DEBUT breadcrumbs */
.breadcrumb 
	{
		/*centering*/
		display			: inline-block;		
		text-align		: center;
		overflow		: hidden;
		border-radius	: 0px;
		/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
		counter-reset	: flag; 
	}

.breadcrumb a 
	{
		text-decoration	: none;
		outline			: none;
		display			: block;
		float			: left;
		font-size		: 15px;
		line-height		: 52px;
		color: white;
		
		/*need more margin on the left of links to accomodate the numbers*/
		padding			: 0 20px 0 70px;
		background		: #666;
		background		: linear-gradient(#666, #333);
		position		: relative;
	}
	
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child 
	{
		padding-left	: 46px;
		border-radius	: 0px 0 0 0px; /*to match with the parent's radius*/
	}
	
.breadcrumb a:first-child:before 
	{
		left			: 10px;
	}
	
.breadcrumb a:last-child 
	{
		border-radius	: 0 5px 5px 0; /*this was to prevent glitches on hover*/
		padding-right	: 40px;
	}

/*hover/active styles*/
.breadcrumb a.active, 
.breadcrumb a:hover
	{
		background		: #F00;
	}

.breadcrumb a.active:after, .breadcrumb a:hover:after 
	{
		background		: #333;
		background		: linear-gradient(135deg, #333, #000);
	}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after 
	{
		content			: '';
		position		: absolute;
		background		: #F00;
		top				: 0; 
		right			: -27px; /*half of square's length*/
		/*same dimension as the line-height of .breadcrumb a */
		width			: 54px; 
		height			: 54px;
		/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
		length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
		if diagonal required = 1; length = 1/1.414 = 0.707*/
		transform: scale(0.707) rotate(45deg);
		/*we need to prevent the arrows from getting buried under the next link*/
		z-index			: 1;
		/*background same as links but the gradient will be rotated to compensate with the transform applied*/
		/*stylish arrow design using box shadow*/
		box-shadow: 4px -4px 0px 3px teal;
		
		/* chevron done with a shadow box*/
		border-radius: 0 5px 0 50px;
	}
	
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after 
	{
		content			: none;
	}
	
/*we will use the :before element to show numbers*/
.breadcrumb a:before 
	{
		content			: counter(flag);
		counter-increment: flag;
		/*some styles now*/
		border-radius	: 100%;
		width			: 30px;
		height			: 30px;
		line-height		: 30px;
		margin			: 11px 0;
		position		: absolute;
		top				: 30;
		left			: 35px;
		background		: #444;
		background		: linear-gradient(#444, #222);
		font-weight		: bold;
	}


.flat a, 
.flat a:after 
	{
		background		: white;
		color			: black;
		transition		: all 0.5s;
	}
	
.flat a:before 
	{
		background		: white;
	}



/* done */
/* base */
.flat a.done, 
.flat a.done:after
{background: #AAA;}
/* hover */
.flat a.done:hover,
.flat a.done:hover:after
{background: #BBB;}


/* active */
.flat a.active, 
.flat a.active:after
{background: #9EEB62;}

.flat a.active:hover, 
.flat a.active:hover:after
{background: #B1FB77;}

.flat a:hover, 
.flat a:hover:after{
	background: #CCC;
}


/* FIN breadcrumbs */


.form-signin 
	{
		width: 100%;
		max-width: 330px;
		padding: 15px;
		margin: auto;
	}

.form-signin .checkbox 
	{
		font-weight: 400;
	}

.form-signin .form-floating:focus-within 
	{
		z-index: 2;
	}

.form-signin input[type="email"] 
	{
		margin-bottom: -1px;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 0;
	}

.form-signin input[type="password"] 
	{
		margin-bottom: 10px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

#logbox 
	{
		background-color:rgba(20,20,20,0.5); 
		margin: 0 auto;
		padding:10px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 300px;
		border:1px solid #888;
		z-index:2;		
	}
	
/* Page layout main */
.wrapper 
	{
		display		: flex;
		position 	: absolute;
		top			: 20px;
		width		: 100%;
		border		: 0px solid red;
		z-index 	: 1;
	}

.main 
	{
		width		: calc(100% - 255px);
		border		: 0px solid green;
		position	: relative;
		height 		: 100%;
		z-index 	: 1;
		padding-top	: 0px;
	}

.flyingMenu 
	{
		min-width	: 320px;
		height		: 75vh;
		position	: -webkit-sticky;
		position	: sticky;
		top			: 0;
		min-height	: 300px;		
		z-index 	: 2;
	}
	
/* hover help (no formating) */
.hoverhelp {}

.hoverhelp:hover .tiptext 
	{
		visibility: visible;
		opacity: 1;
	}
	
.hoverhelp:hover
	{
		/*
		background-color:rgba(0,0,0,0.3);
		padding:0px 4px;
		*/
	}

.hoverhelp .tiptext 
	{
		visibility: hidden;
		width: 140px;
		background-color: #555;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px;
		position: absolute;
		z-index: 1;
		bottom: 110%;
		left: 50%;
		margin-left: -75px;
		opacity: 0;
		transition: opacity 0.3s;
	}

.hoverhelp .tiptext::after 
	{
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: #555 transparent transparent transparent;
	}

.hoverhelp:hover .tiptext 
	{
		visibility: visible;
		opacity: 1;
	}
	
/* tooltip perso */		
.tip 
	{
		position: relative;
		display: inline-block;
		cursor:copy;
	}


.tip .tiptext 
	{
		visibility: hidden;
		width: 40px;
		background-color: #555;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px;
		position: absolute;
		z-index: 1;
		bottom: 110%;
		left: 50%;
		margin-left: -25px;
		opacity: 0;
		transition: opacity 0.3s;
	}

.tip .tiptext::after 
	{
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: #555 transparent transparent transparent;
	}

.tip:hover .tiptext 
	{
		visibility: visible;
		opacity: 1;
	}
	
.tip:hover
	{
		background-color:rgba(0,0,0,0.3);
		padding:0px 4px;
	}
	

/* tooltip perso */	

/* tooltip perso Field*/
	
.tip_format 
	{
		position: relative;
		display: inline-block;
		cursor:help;
	}


.tip_format .tip_formattext 
	{
		visibility: hidden;
		background-color: #555;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px;
		position: absolute;
		z-index: 1;
		bottom: 110%;
		right: 50%;
		margin-right: -25px;
		opacity: 0;
		transition: opacity 0.3s;
	}

.tip_format .tip_formattext::after 
	{
		content: "";
		position: absolute;
		top: 100%;
		right: 20px;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: #555 transparent transparent transparent;
	}

.tip_format:hover .tip_formattext 
	{
		visibility: visible;
		opacity: 1;
	}
	
.tip_format:hover
	{
		background-color:rgba(0,0,0,0.3);
	}	
/* tooltip perso */	
	
	
/* Page title block */
.page_title
	{	z-index:2;
		position	: -webkit-sticky;
		position	: sticky;
		top			: 0;
		margin-bottom :10px;
		padding-top:5px;
	}

/* button return to top */
#BtnReturnTop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#BtnReturnTop:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/* buttons */	
.btn-primary:focus,
.btn-primary:active,
.btn-secondary:focus,
.btn-secondary:active,
.btn-success:focus,
.btn-success:active,
.btn-danger:focus,
.btn-danger:active,
.btn-warning:focus,
.btn-warning:active,
.btn-info:focus,
.btn-info:active,
.btn-light:focus,
.btn-light:active,
.btn-dark:focus,
.btn-dark:active,
.btn-group:focus,
.btn-group:active,
.btn:focus,
.btn:active,
.btn
	{
		box-shadow:none !important;
		outline:0px !important;
	}
	
.btn-head{margin-left:2px; margin-right:2px;}

.btn-square 
	{
		width		: 40px !important;
		max-width	: 100% !important;
		max-height	: 100% !important;
		height		: 40px !important;
		line-height : 40px !important;
		text-align	: center !important;
		padding		: 0px  !important;
		margin-right: 4px  !important;
		font-size	: 17px !important;
	}
	

	
/* table sorting */
.table_sorting th
{
	cursor: pointer;
}
.table_sorting th:hover, .table_sorting th:hover::after
{ color:#0d6efd;}

.th_sorted_up::after { color:black; content:' \2191';}
.th_sorted_down::after {  color:black; content:' \2193';}
.th_sorted_up_down::after {  color:#ccc; content:' \2195';}

/* table don't have separator on the bottom of the last line */
table_horizontal tr:last-child {border-bottom:0px solid rgba(0,0,0,0);}

/* Menu context actions and lineage */
.context_menu_wrapper
	{
		width		: 70px; 
		z-index		: 2;  
		border		: 0px solid blue; 
		display		: inline-block; 
		min-height	: 100%;  
		background-color:rgba(0,0,0,0.7);
		
	}

.context_menu
	{
		border		: 0px solid red; 
		width		: 70px; 
		display		: block; 
		position	: sticky; 
		top			: 0;
	}

.cell_menu_hover, .cell_menu
	{
		width		: 70px !important;
		max-width	: 100% !important;
		max-height	: 100% !important;
		height		: 70px !important;
		line-height : 70px !important;
		text-align	: center !important;
		padding		: 0px  !important;
		margin-right: 0px  !important;
		border-bottom:1px solid #555;
	}
	
.cell_menu_hover:hover
	{
		background-color : #801f4f;
	}
	
.cell_menu_hover:hover .cell_details
	{
		display:block;
	}
		
.cell_details
	{
		border:0px solid black;   
		background-color:rgba(0,0,0,0.7); 
		position:absolute; 
		top:-1px; 
		left:70px; 
		width:350px; 
		min-height:30px;
		display:none;
		line-height:30px; 
		padding:0px;
	}
	
.cell_details_head
	{
		border:0px solid blue; 
		line-height:30px; 
		background-color:#801f4f;
		padding:5px;
	}