.js-plotly-plot {
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.15);
    touch-action: pan-y;
}

/* Prevent Plotly from capturing touch events on mobile */
.js-plotly-plot .plot-container {
    touch-action: auto;
}


/*
* The figure main title
*/

/*.js-plotly-plot .gtitle {
  display: block;
  position: fixed;
}*/

.js-plotly-plot .plugin-editable.editable{
  left: auto;
  width: auto;
  height: auto;
  display: inline-table;
  word-break: break-all;
  word-wrap: anywhere;
}

/*@media (min-width: 801px) {
  .js-plotly-plot {
    transform: scale(1.05, 1);
    transition: transform 0.3s linear 0s;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    z-index: 1000
  }
}*/
  
/* styles for screen widths up to 800px */
@media (max-width: 800px) {
  
  .js-plotly-plot {
   
    transform: scale(1.02,1);
    transition: transform 0.3s ease;
    
    width: 98% !important;
		max-width: 100% !important;
		margin: 25px 4px !important;
  }
  
  .dashboard_tab_title .js-plotly-plot{
    margin-left: 0;
    margin-right: 0;
    inset-left: 0;
    inset-right: 0;
    left: 2px !important;
  }
  
  .js-plotly-plot .main-svg {
    /*transform: scale(0.8);
    transition: transform 0.3s ease;
     font-size: 10px;*/
  }
  
  .legendtext, .annotation-text {
    font-size: 10px;
  }
  
  .js-plotly-plot .gtitle {
    font-size: 16px;
  }
  
  .js-plotly-plot .xtitle, .js-plotly-plot .ytitle {
    font-size: 14px;
  }
  
  .js-plotly-plot .annotation-text{
    font-size: 10px;
  }
  
 
  
}

/*
* Change modebar width
*/
.js-plotly-plot .plotly .modebar {
  display: flex;
  flex-wrap: wrap;
}

/*  
@media (max-width: 810px) {
  .js-plotly-plot .plotly .modebar {
    display: flex;
    flex-wrap: wrap;
  }
}*/

/*.js-plotly-plot .plotly .modebar-btn {
                    position: relative;
                    font-size: 12px;
                    padding: 3px 4px;
                    height: 22px;
                    cursor: pointer;
                    line-height: normal;
                    box-sizing: border-box;
                  }*/

/*
* Define css style for the figure elements
*/
.myPlotTitleModifClass {
	display:none;
}

.myPlotTitleModifClass {
	position:absolute; 
	display: table;
	border:2px double #333; 
	width:100%; 
	padding:0px;
	margin:0px;
	background-color:#e0e0e0;
	box-shadow:0px 0px #909090;
	color:#333;
	visibility:hidden;
	overflow:hidden;
	z-index:1000;
}
						
table.myPlotTitleModifClass { 
	display: table;
	border-collapse: collapse;
	border-spacing: 5px;
	border-color: gray;
	text-align:left;
	font-family:arial;
	font-size:12px;
}

.myPlotTitleModifClass th, .myPlotTitleModifClass td {
  padding: 5px;
}

.myPlotTitleModifClass table{
	border:2px solid silver;
}

.myPlotTitleModifClass th,.myPlotTitleModifClass td{
	border-left:2px double black;
	border-top:2px double black;
}

.myPlotTitleModifClass .nav-tabs > li > a{
	color:white;
}

.myPlotTitleModifClass .nav-tabs > li > a:hover,
.myPlotTitleModifClass .nav-tabs > li > a:focus,
.myPlotTitleModifClass .nav-tabs > .active >a{
	color:black;
}


/*
* Define css style for customized icons elements
*/
.icon-container {
	width: 1em;
	height: 1em;
}

.verticalStackBar {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect x='64' y='288' width='96' height='192' fill='%230074D9'/%3E%3Crect x='64' y='160' width='96' height='128' fill='%232ECC40'/%3E%3Crect x='64' y='32' width='96' height='96' fill='%23FFDC00'/%3E%3Crect x='224' y='192' width='96' height='288' fill='%230074D9'/%3E%3Crect x='224' y='128' width='96' height='64' fill='%232ECC40'/%3E%3Crect x='224' y='32' width='96' height='96' fill='%23FFDC00'/%3E%3Crect x='384' y='96' width='96' height='384' fill='%230074D9'/%3E%3Crect x='384' y='32' width='96' height='64' fill='%232ECC40'/%3E%3Crect x='384' y='224' width='96' height='256' fill='%23FFDC00'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.horizontalStackBar {
	display: inline-block;
	width: 1em;
	height: 1.5em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect x='60' y='50' width='200' height='50' fill='red' /%3E%3Crect x='55' y='50' width='100' height='50' fill='green' /%3E%3Crect x='50' y='50' width='50' height='50' fill='orange' /%3E%3Crect x='90' y='120' width='170' height='50' fill='red' /%3E%3Crect x='70' y='120' width='120' height='50' fill='green' /%3E%3Crect x='50' y='120' width='100' height='50' fill='orange' /%3E%3Crect x='80' y='190' width='140' height='30' fill='red' /%3E%3Crect x='50' y='190' width='120' height='30' fill='green' /%3E%3Crect x='50' y='190' width='80' height='30' fill='orange' /%3E%3Cline x1='50' y1='220' x2='250' y2='220' stroke='black' stroke-width='2' /%3E%3Cline x1='50' y1='220' x2='50' y2='10' stroke='black' stroke-width='2' /%3E%3Ctext x='40' y='230' font-size='0.8em'%3E0%3C/text%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.lineMarkersPlot {
	display: inline-block;
	vertical-align: middle;
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.5em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cline x1='20' y1='180' x2='160' y2='180' stroke='black' stroke-width='15' /%3E%3Cline x1='20' y1='20' x2='20' y2='180' stroke='black' stroke-width='15' /%3E%3Cpolyline points='20,180 50,50 80,120 110,80 140,160,160,20' fill='none' stroke='blue' stroke-width='10' /%3E%3Ccircle cx='20' cy='180' r='15' fill='red' stroke-width='10' /%3E%3Ccircle cx='50' cy='50' r='15' fill='red' /%3E%3Ccircle cx='80' cy='120' r='15' fill='red' /%3E%3Ccircle cx='110' cy='80' r='15' fill='red' /%3E%3Ccircle cx='140' cy='160' r='15' fill='red' /%3E%3Ccircle cx='160' cy='20' r='15' fill='red' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.lineDashedPlot {
	display: inline-block;
	vertical-align: middle;
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.5em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cline x1='20' y1='180' x2='160' y2='180' stroke='black' stroke-width='15' /%3E%3Cline x1='20' y1='20' x2='20' y2='180' stroke='black' stroke-width='15' /%3E%3Cpolyline points='20,180 50,50 80,120 110,80 140,160,160,20' fill='none' stroke='purple' stroke-width='10' stroke-dasharray='30,10' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.lineDashDotPlot {
	display: inline-block;
	vertical-align: middle;
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.5em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cline x1='20' y1='180' x2='160' y2='180' stroke='black' stroke-width='15' /%3E%3Cline x1='20' y1='20' x2='20' y2='180' stroke='black' stroke-width='15' /%3E%3Cpolyline points='20,180 50,50 80,120 110,80 140,160,160,20' fill='none' stroke='orange' stroke-width='10' stroke-dasharray='10,3,2,3' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.lineDashPointPlot {
	display: inline-block;
	vertical-align: middle;
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.5em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cline x1='20' y1='180' x2='160' y2='180' stroke='black' stroke-width='15' /%3E%3Cline x1='20' y1='20' x2='20' y2='180' stroke='black' stroke-width='15' /%3E%3Cpolyline points='20,180 50,50 80,120 110,80 140,160,160,20' fill='none' stroke='purple' stroke-width='10' stroke-dasharray='30,10' /%3E%3Ccircle cx='20' cy='180' r='15' fill='red' stroke-width='10' /%3E%3Ccircle cx='50' cy='50' r='15' fill='red' /%3E%3Ccircle cx='80' cy='120' r='15' fill='red' /%3E%3Ccircle cx='110' cy='80' r='15' fill='red' /%3E%3Ccircle cx='140' cy='160' r='15' fill='red' /%3E%3Ccircle cx='160' cy='20' r='15' fill='red' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* Contexmenu panel media css for figure types */
@media (max-width: 800px) {
  
  .myPlotTitleModifClass .figurestypes-contextmenu-panel .col-sm-12 {
    display: block;
    flex-wrap: wrap;
  }
  
  .figurestypes-contextmenu-panel .col-sm-4{
    height: 20%;
    width: 100%;
    margin: auto;
  }
  
  .figurestypes-contextmenu-panel .col-sm-8{
    height: 80%;
    width: 100%;
    margin: auto;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    
  }
  
  .figurestypes-contextmenu-panel .col-sm-8 select{
    height: 34px;
  }
  
}



/* Contexmenu panel media css for main layout page @Mise en forme avancée */

.myPlotTitleModifClass .layout-contextmenu-panel table {
    background-color: whitesmoke;
}

.myPlotTitleModifClass .layout-contextmenu-panel .row {
    max-height: 510px;
}

@media (min-width: 801px) {
  .layout-contextmenu-panel .col-sm-10,.layout-contextmenu-panel .col-sm-2 {
    max-height: 510px;
  }
}

@media (max-width: 800px) {
  
  .myPlotTitleModifClass .layout-contextmenu-panel .row {
    margin: auto;
    display: block;
  }
  
  
  .layout-contextmenu-panel .col-sm-2{
    width: 100%;
    height: 20%;
    /*overflow-y: auto;*/
    display: inline-table;
  }
  
  .layout-contextmenu-panel .col-sm-2 .well{
    display: -webkit-box;
    padding: 5px;
    flex-wrap: wrap;
  }
  
  .layout-contextmenu-panel .col-sm-10{
    /*height: 80%;*/
    height: 300px;
    width:100%;
    overflow-y: auto;
    margin-bottom: 1em;
    border: 2px solid silver;
    font-size: 10px;
    font-family: revert;
  }
  
}

/*
* Style of modebar when it turns to vertical
*/

.modebar.vertical{
  background: bisque;
  text-align: center;
  width:70px;
 /* height:98%;*/
}

.modebar.vertical .modebar-group a.modebar-btn li.ui-menu-item ul{
  text-align: left;
}


/* Style the plotly table menu */
#plotly_table_menu {
  display: none; /* Hidden by default */
  position: absolute;
  top: 90px;
  right: 50px;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 2000; /* Ensure it appears above the plot */
  width: 200px;
  background-color: rgb(5, 66, 102);
  color: white;
}

#plotly_histogram_menu {
  display: none; /* Hidden by default */
  position: absolute;
  top: 90px;
  right: 50px;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 2000; /* Ensure it appears above the plot */
  width: 200px;
  background-color: rgb(86, 87, 100);
  color: white;
}

#plotly_pie_menu {
  display: none; /* Hidden by default */
  position: absolute;
  top: 90px;
  right: 50px;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 2000; /* Ensure it appears above the plot */
  width: 200px;
  background-color: rgb(98, 74, 128);
  color: white;
}

/* Menu items style */
.plotly_table_menu-item,.plotly_pie_menu-item,.plotly_histogram_menu-item {
  padding: 5px 10px;
  cursor: pointer;
}

.plotly_table_menu-item:hover,.plotly_pie_menu-item:hover,.plotly_histogram_menu-item:hover {
  /*background-color: #f0f0f0;*/
  background-color: black;
}

.plotly_table_menu-item input,.plotly_pie_menu-item input,.plotly_histogram_menu-item input {
  float: right;
}

/* Style the gear icon */
.plotly_table_gear-icon {
  cursor: pointer;
  font-size: 24px;
}