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:#411989;border-color:#411989;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:#411989;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;
	}


.customer_tree 
	{
		position	: relative;
		margin-top	: 0px;
		padding		: 10px;
		border		: 0px solid red;
	}
	
.customer_tree ul 
	{
		padding-left	: 10px;
		list-style		: none;
		line-height		: 20px;
		border			: 0px solid red;
		padding-bottom	: 0px;
	}
	
	
.customer_tree ul li 
	{
	  position			: relative;
	  padding-top		: 5px;
	  padding-bottom	: 5px;
	  padding-left		: 15px;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing	: border-box;
	  box-sizing		: border-box;
	}
	
.customer_tree ul li:before 
	{
		position		: absolute;
		top				: 20px;
		left			: 0;
		width			: 15px;
		height			: 1px;
		margin			: auto;
		content			: "";
		background-color: #666;
	}
	
.customer_tree .active_link:before
	{
		height			: 2px !important;
		background-color: #0d6efd !important;
	}
	
.customer_tree ul li:after 
	{
		position		: absolute;
		top				: 0;
		bottom			: 0;
		left			: 0;
		width			: 1px;
		height			: 100%;
		content			: "";
		background-color: #666;
	}

.customer_tree .active_link_vert:after
	{
		width			: 2px !important;
		background-color: #0d6efd !important;
	}	
	
.customer_tree .li_root 
	{
		padding-left	: 0px !important;
	}
.customer_tree .li_root:before
	{
		background-color: rgba(0,0,0,0) !important;
	}
.customer_tree .li_root:after 
	{
		background-color: rgba(0,0,0,0) !important;
	}

.customer_tree ul li:last-child:after 
	{
		height			: 20px;
	}
	
.customer_tree ul a 
	{
		cursor			: pointer;
	}

.customer_tree ul a:hover 
	{
		text-decoration	: none;
	}

.customer_tree .div_group
	{
		/* background-color:#d63384; */
		background-color:#79DFC1;
	}
	
.customer_tree .li_group:before
	{		
		height			: 2px !important;
		background-color: #79DFC1 !important;
	}
	
.customer_tree .div_root
	{
		/* background-color:#0d6efd; */
		background-color:#20c997;
	}
	
.customer_tree .div_root .dark
	{
		/* background-color:#0d6efd; */
		background-color:#0d503c;
		color : #fff;
		border: 1px solid #0d503c;
	}
	
.customer_tree .div_leaf .dark
	{
		/* background-color:#0d6efd; */
		/*background-color:#0f0;*/
		/* background-color:#333;*/
		background-color:#0d6efd;
		color : #fff;
		
	}
.customer_tree .div_leaf:hover
	{
		/* background-color:#0d6efd; */
		background-color:#e9ecef;
	}
	
	
.dropzone
	{
		width 				: calc(100% - 10px);
		height 				: 100px;
		line-height 		: 100px;
		border 				: 2px dashed #ccc;
		text-align 			: center;
		color				: #0d6efd;
		font-weight			: bold;
		margin				: 5px;
		background-image	: url("data:image/svg+xml,%3Csvg height='100%25' width='100%25' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'  viewBox='0 0 312.602 312.602' xml:space='preserve' fill='%23CCCCCC'%3E%3Cpath style='' d='M251.52 137.244c-3.966 0-7.889 0.38-11.738 1.134c-1.756-47.268-40.758-85.181-88.448-85.181c-43.856 0-80.964 32.449-87.474 75.106C28.501 129.167 0 158.201 0 193.764c0 36.106 29.374 65.48 65.48 65.48h54.782c4.143 0 7.5-3.357 7.5-7.5c0-4.143-3.357-7.5-7.5-7.5H65.48c-27.835 0-50.48-22.645-50.48-50.48c0-27.835 22.646-50.48 50.48-50.48c1.367 0 2.813 0.067 4.419 0.206l7.6 0.658l0.529-7.61c2.661-38.322 34.861-68.341 73.306-68.341c40.533 0 73.51 32.977 73.51 73.51c0 1.863-0.089 3.855-0.272 6.088l-0.983 11.968l11.186-4.367c5.356-2.091 10.99-3.151 16.747-3.151c25.409 0 46.081 20.672 46.081 46.081c0 25.408-20.672 46.08-46.081 46.08c-0.668 0-20.608-0.04-40.467-0.08c-19.714-0.04-39.347-0.08-39.999-0.08c-4.668 0-7.108-2.248-7.254-6.681v-80.959l8.139 9.667c2.667 3.17 7.399 3.576 10.567 0.907c3.169-2.667 3.575-7.398 0.907-10.567l-18.037-21.427c-2.272-2.699-5.537-4.247-8.958-4.247c-3.421 0-6.686 1.548-8.957 4.247l-18.037 21.427c-2.668 3.169-2.262 7.9 0.907 10.567c1.407 1.185 3.121 1.763 4.826 1.763c2.137 0 4.258-0.908 5.741-2.67l7.901-9.386v80.751c0 8.686 5.927 21.607 22.254 21.607c0.652 0 20.27 0.04 39.968 0.079c19.874 0.041 39.829 0.081 40.498 0.081c33.681 0 61.081-27.4 61.081-61.08C312.602 164.644 285.201 137.244 251.52 137.244z'/%3E%3Ctext x='160' y='300' text-anchor='middle' font-size='50px'%3EDrag file here%3C/text%3E%3C/svg%3E");
		background-repeat	: no-repeat;
		background-position	: center;
	}

.dropzone_over
	{
		width 				: calc(100% - 10px);
		height 				: 100px;
		line-height 		: 100px;
		border 				: 2px dashed #198754;
		text-align 			: center;
		margin				: 5px;
		background-image	: url("data:image/svg+xml,%3Csvg height='100%25' width='100%25' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'  viewBox='0 0 312.602 312.602' xml:space='preserve' fill='%23198754'%3E%3Cpath style='' d='M251.52 137.244c-3.966 0-7.889 0.38-11.738 1.134c-1.756-47.268-40.758-85.181-88.448-85.181c-43.856 0-80.964 32.449-87.474 75.106C28.501 129.167 0 158.201 0 193.764c0 36.106 29.374 65.48 65.48 65.48h54.782c4.143 0 7.5-3.357 7.5-7.5c0-4.143-3.357-7.5-7.5-7.5H65.48c-27.835 0-50.48-22.645-50.48-50.48c0-27.835 22.646-50.48 50.48-50.48c1.367 0 2.813 0.067 4.419 0.206l7.6 0.658l0.529-7.61c2.661-38.322 34.861-68.341 73.306-68.341c40.533 0 73.51 32.977 73.51 73.51c0 1.863-0.089 3.855-0.272 6.088l-0.983 11.968l11.186-4.367c5.356-2.091 10.99-3.151 16.747-3.151c25.409 0 46.081 20.672 46.081 46.081c0 25.408-20.672 46.08-46.081 46.08c-0.668 0-20.608-0.04-40.467-0.08c-19.714-0.04-39.347-0.08-39.999-0.08c-4.668 0-7.108-2.248-7.254-6.681v-80.959l8.139 9.667c2.667 3.17 7.399 3.576 10.567 0.907c3.169-2.667 3.575-7.398 0.907-10.567l-18.037-21.427c-2.272-2.699-5.537-4.247-8.958-4.247c-3.421 0-6.686 1.548-8.957 4.247l-18.037 21.427c-2.668 3.169-2.262 7.9 0.907 10.567c1.407 1.185 3.121 1.763 4.826 1.763c2.137 0 4.258-0.908 5.741-2.67l7.901-9.386v80.751c0 8.686 5.927 21.607 22.254 21.607c0.652 0 20.27 0.04 39.968 0.079c19.874 0.041 39.829 0.081 40.498 0.081c33.681 0 61.081-27.4 61.081-61.08C312.602 164.644 285.201 137.244 251.52 137.244z'/%3E%3Ctext x='160' y='300' text-anchor='middle' font-size='50px'%3EDrop file here%3C/text%3E%3C/svg%3E");
		background-repeat	: no-repeat;
		background-position	: center;
	}
	
.div_icon
	{
		max-width			: 100px !important;
		background-color	: #CCC;
	}	
.div_icon i
	{
		font-size			: 35px;
	}
	
.search_input	
	{
		border-color: #bbb !important;
		background-image: none  !important;
	}
.search_input:focus	
	{
		border-color: #bbb !important;
		box-shadow: none !important;
		outline: 0 none !important;
	}
	
/* search widget */
#search_pannel
	{
		position	: absolute; 
		top			: 45px; 
		left		: 0; 
		width		: 100%; 
		height		: 0px; 
		background-color:rgba(0,0,0,0.3); 
		color		: #fff; 
		padding 	: 0px; 
		transition	: height 0.75s;
		overflow	: hidden;
	}



.widget_search_block
	{
		border : 0px solid red;
		padding: 0px;
	}
	
/* timeline widget */
.metadata_stepper_line
	{
		width:2px; border:1px solid grey;
	}
		
.metadata_stepper_puce
	{
		border-radius: 30px;
		background: red; 
		width: 30px;
		height: 30px; 
		line-height:30px;
		text-align:center;
		font-size: 20px;
	}