:root {
    --gray-200: #e5e7eb; /* Exemple de gris clair */
    --text-default: #000000; /* Exemple de couleur de texte par défaut */
	--base_color: #0088FF;
	--base_color_light: #006FD0;
	--selected_tab_background_color: #0088FF;
	--font_secondary: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
	--font_message_text_size: 15px;
	--suggestion_gradient: linear-gradient(#FFFFFF,#FFFFFF)padding-box,linear-gradient(268.46deg,#f1671e99 -12.32%,#fcbc0199 14.81%,#ffba0099 14.82%,#dfa48746);
}

.js-plotly-plot .plotly .cursor-ns-resize {
    cursor:pointer;
}

.star {
	color: #ffcf10;
	cursor: pointer;
	margin: 0 5px;
	transition: color 0.2s;
}

.div_around_features {
	display: flex;
	width: auto;
	border: 1px solid #ffcf10;
	background: white;
	/*border: 2px solid #0000;	*/
    border-radius: 10px;
    padding: 6px 10px 16px 10px;    
	gap: 12px;
}

.source_div_class
{
	"backgroundColor": "#ffffff",
	"padding": "2px",
	"marginBottom": "2px",	
	"textAlign": "left",
	"alignSelf": "flex-start",
}

.source_class
{
	"backgroundColor": "#ffffff",
	"padding": "10px",
	"marginBottom": "10px",	
	"textAlign": "left",
	"alignSelf": "flex-start",
}


.custom_tab  {
	padding: 10px 15px !important;
}

.tab--selected  {
    /*border-top-color: #f6b220 !important;*/
    border-top-color: var(--selected_tab_background_color) !important;
	border-top-width: 2px  !important;	
}

.menu_button
{
	background-color:#FFFFFF;
	height: 50px; /* Assurez-vous que la hauteur est définie */    
    text-align: center; /* Centre horizontalement */
    vertical-align: middle; /* Pour supporter les variations de navigateur */
	width: 100%;	
	text-align: left;
	/*font-size:  clamp(18px, calc(5px + 1.5vw), 20px);*/
	font-weight: 500;
	font-size: 0.9em;
	/*font-family: Helvetica Neue, sans-serif;*/
	background-color": transparent;
	box-sizing: border-box;
	border-radius: 10px;
	/*padding-top: 30px;
	
	padding-bottom: 30px;*/	
	padding-left: 10px;	
	box-sizing: border-box;
	border: 1px solid #FFFFFF;
	transition: border-color 0.3s;
}

.menu_text
{
	padding-left:calc(10px + 1vw);
	font-size: clamp(20px, calc(5px + 2vw), 30px);
	/*font-family: Helvetica Neue, sans-serif;*/
}

.menu_button:focus {
	outline: none;
}

.menu_button:active {
  background-color: #F0F0F0;
  color: white;
  border: none;
}

.menu_button:hover
{
	/*background-color:#F0F0F0;	*/
	border: 1px solid #E0E0E0;	
}

.top_menu
{
	height: 4.5rem;
	border-bottom: 1px solid #e6e6e6;
	display: flex!important;
	padding-left: 1.5rem!important;
	padding-right: 1.5rem!important;
	align-items: center!important;
}

.lateral_menu
{
	position:absolute;left:-100%;
	border-right: 1px solid #e6e6e6;
	width: 200px;
	min-width: 150px;
	box-sizing: border-box;
	height: 100%;
	display: flex;
	padding-right: 15px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;	
	background-color: #FFFFFF;
	/*font-family: 'Helvetica Neue', sans-serif;*/
	transition-property: left;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 250ms;
	z-index:10;
}

.lateral_menu.open{left:0;}

.plot_layout
{
	width: 100%;
	height: 100%;
	display": flex;
    background-color": "#FAFAAF";
}

.app_container
{
	height: 100%;
	display: flex!important;
	flex-direction: column!important;
}

.dashboard_container
{
	display: flex!important;
	position: relative!important;
	flex-grow: 1!important;
}

.sidebar-toggle 
{
	border: 0px solid #E0E0E0;
	background-color: #FFFFFF;
	
	margin-right: 0.5rem!important;
    cursor: pointer;
    justify-content: center;
    padding-bottom: calc(0.5em - 2px);
    padding-left: 0em;
    padding-right: 1em;
    padding-top: calc(0.5em - 2px);
    text-align: center;
    white-space: nowrap;
}

.menu_container
{
	width: 100%;
    padding-left: 20px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-start;
    box-sizing: border-box;
}

.menu_icon{
	height: 1.5em;
	width: 1.5em;
}

.menu_icon:hover {	
	background-color: #FF0000;
	width: 100px;
}

button.menu_icon:hover {	
	background-color: #FF0000;
	width: 100px;
}

button.sidebar-toggle:focus {
	outline: none;
}

.menu_icon:active {  
  border: none;
  background-color: #FF0000;
}

.logo_tost_unlimited img
{
	width: clamp(70px, calc(15vw), 80px); 
}

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

.logo_customer img
{
	width: clamp(80px, calc(20vw), 100px); 
	/*margin-top: auto;*/
	padding-top: 40px;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 10px;
	align-self: flex-start;
}

@media(min-width:1024px){
	.lateral_menu {position:initial}
	.sidebar-toggle {display:none}
}

.range_button
{	
    font-size: 12px;
    color: black;
    /*background-color: #F0F0F0;*/
    border: 0px solid grey;
    padding: 5px 6px;
    margin: 2px;
    cursor: pointer;
}

.range_button.active {
    /*background-color: #e0e0e0;*/
    font-weight: bold;
}

.time_nav_button
{	
	width: auto;
	/*min-width:150px;*/
	font-size:17px;
    color: black;
    background-color: #FFFFFF;
    border: 0px solid grey;
    padding: 5px 6px;
    margin: 2px;
    cursor: pointer;
	margin-right:5px;	
	font-size: 1em;
}

.time_nav_button:hover {
	color: #FFFFFF;
	background-color:var(--base_color);
	border-radius: 5px;
}

.time_nav_button.active {
    /*background-color: #e0e0e0;*/
    font-weight: bold;
}

.range_time_text{
	display: inline-block;
    width: auto;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    font-size: 14px;
    padding: 6px;
    line-height: 20px;
    background: transparent;
    border-width: 1px;
    border-style: solid;
    border-color: var(--gray-200);
    color: var(--text-default);
    user-select: none;
    border-radius: 8px;
}

.download_button
{
	color: #000000;
    border-width: 1px;
    border-style: solid;	
	background-color:#FFFFFF;	
    vertical-align: middle; /* Pour supporter les variations de navigateur */	
	text-align: center;	
	/*font-size:  clamp(18px, calc(5px + 1.5vw), 20px);*/
	font-weight: 500;
	font-size: 0.9em;
	/*font-family: Helvetica Neue, sans-serif;*/
	background-color": transparent;
	box-sizing: border-box;
	border-radius: 10px;
	border-color: var(--gray-200);
	padding-top: 10px;	
	padding-bottom: 10px;
	padding-left: 40px;	
	padding-right: 40px;
	box-sizing: border-box;	
	transition: border-color 0.3s;
}

.download_button:hover {	
    color: #FFFFFF;
	background-color:var(--base_color);	
}

.download_button:active {
	color: #FFFFFF;
	background-color:var(--base_color_light);	
}

.show_button
{ 
    font-size: 13px;    
	color: #000000;
    border-width: 0.5px;
    border-style: solid;	
	background-color:#FFFFFF;	
    vertical-align: middle;
	text-align: center;			
	border-radius: 10px;
	border-color: var(--gray-200);	    
	padding-top: 4px;	
	padding-bottom: 4px;
	padding-left: 5px;	
	padding-right: 5px;
	box-sizing: border-box;
	margin-top: -6px;
	margin-left: 10px;
}

.show_button:hover {	
    color: #FFFFFF;
	background-color:var(--base_color);	
}

.show_button:active {
	color: #FFFFFF;
	background-color:var(--base_color_light);	
}

.hide_button
{ 
    font-size: 13px;    
	color: #000000;
    border-width: 0.5px;
    border-style: solid;	
	background-color:#FFFFFF;	
    vertical-align: middle;
	text-align: center;			
	border-radius: 10px;
	border-color: var(--gray-200);	    
	padding-top: 4px;	
	padding-bottom: 4px;
	padding-left: 5px;	
	padding-right: 5px;
	box-sizing: border-box;
	margin-top: -6px;
	margin-left: 10px;	
}

.hide_button:hover {	
    color: #FFFFFF;
	background-color:var(--base_color);	
}

.hide_button:active {
	color: #FFFFFF;
	background-color:var(--base_color_light);	
}

.feedback_button 
{
	color: #000000;
	border-color: var(--border-clr);
    border-width: 1.5px;
    border-style: solid;		
    vertical-align: middle; /* Pour supporter les variations de navigateur */	
	text-align: center;	
	/*font-size:  clamp(18px, calc(5px + 1.5vw), 20px);*/	
	font-size: 13px;
	/*font-family: Helvetica Neue, sans-serif;*/
	background-color": transparent;
	box-sizing: border-box;
	border-radius: 10px;	
	padding-top: 4px;	
	padding-bottom: 4px;
	padding-left: 5px;	
	padding-right: 5px;
	box-sizing: border-box;	
	transition: border-color 0.3s;	
	margin-top: -6px;
	margin-left: 10px;
}


.correct_button
{
	--border-clr: #2ECC71;
    --text-clr: white;	
	background-color:white;	
	margin-left: 20px;
}

.improvable_button
{
	--border-clr: #F7DC6F;
    --text-clr: #7b6200;	
	background-color:white;		
}

.false_button
{
	--border-clr: #FF8C00;
	--text-clr: white;
	background-color:white;	
}

.critic_button
{
	--border-clr: #D72638;
	--text-clr: white;	
	background-color:white;	
}

/* Au survol, applique la couleur du border en fond */
.feedback_button:hover {
    background-color: var(--border-clr);
    color: var(--text-clr);
}

/*.feedback_button:not(.selected) {
    background-color: initial;
}*/

.feedback_button.selected {
	background-color: var(--border-clr);
    color: var(--text-clr); 
}

.div_analysis {
	display: flex;
	width: auto;
	border: 1px solid;
	background: white;	
    border-radius: 0px;
    padding: 6px 10px 16px 10px;    
	gap: 12px;
}


.correct_color {
	color: #2ECC71;
	border-color: #2ECC71;
}

.improve_color {
	color: #e8bc0d;
	border-color: #F7DC6F;
}
 
.false_color {
	color: #FF8C00;
	border-color: #FF8C00;
}

.critic_color {
	color: #D72638;
	border-color: #D72638;
}

.footer {
    width: 100%;
    padding: 10px 0;        
    margin-top: auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe UI Emoji', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Cantarell', 'Helvetica Neue', sans-serif !important;
    font-size: 12px;
    color: #777777;
    display: flex;
    position: relative;
    bottom: 5px;
    left: 0px;
}

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

.footer-black
{
	color: #000000;
}

.footer-gray
{
	color: #6c757d;
}

.footer-text {
    
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe UI Emoji', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Cantarell', 'Helvetica Neue', sans-serif !important;
    font-size: 12px;
	padding: 0px 0px; 
	margin: 0px 0px; 
}

.footer-text-bold {    
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;  /* Ajout du style gras */
}

.footer-logo {
    height: 16px;
    width: auto;
}

.chat_bot_image	{	
	max-height:20vh;
	cursor:pointer;
	width: auto;
    height: auto;
	margin: 10px 5px;
    object-fit: contain; /* ou cover selon votre besoin */
    aspect-ratio: attr(width) / attr(height);
}

.div_large_chat_bot_image	{		
	cursor:pointer;
	background-color: white;
	background-color: white;
	border: 1px solid #00000050;
	box-shadow: 0 0 50px #00000050;
	display:none;
	width: 90vw;
	max-height: 90vh;
	position: fixed;
	z-index:2000;	
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}