body {
  font-family: Calibri, Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
  background-color:#f2f2f2;
  
   -moz-user-select: none; /* Firefox */
 -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
 -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
 user-select: none; /* Propriété standard */
 
}

#splash_screen{

  position:absolute;
  top:0px;  bottom:0px;
  left:0px; right:0px;
  z-index:11003;
  font-size:80px;
  background-color:#000;
  opacity:0.5; 
  text-align:center;
}

#appname {
font-weight:bold;
font-size:24px;
}

#filterout_helper{

  position:absolute;
  top:0px;  bottom:0px;
  left:0px; right:0px;
  z-index:11001;
  background-color:#000;
  opacity:0.3;
  text-align:center;
}

.zzzidgenbox { position:relative; zzzz-index:11002; }

.txtnotselectable
{
 -moz-user-select: none; /* Firefox */
 -webkit-user-select: none; /* Chrome, Safari, Opéra depuis la version 15 */
 -ms-user-select: none; /* Internet explorer depuis la version 10 et Edge */
 user-select: none; /* Propriété standard */
}

.mymodalclose{ float:right; }
.mymodalclose:hover{ }

.lyzone {
	box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24);
	margin: 2px;
	padding: 3px;
	border-width: 0px 0px 0px 0px;
	border-style: solid;
	border-color: #e2e2e2;
	border-radius: 0px;
	outline-width: 0px;
	outline-style: solid;
	outline-color: #e2e2e2;
}


/***************** global page **********************/
#warningzone{ opacity:0.95; z-index:20001	; position:absolute; background-color:#ffffff; top:0px; bottom:0px; left:0px; right:0px;  }
#warningzone-window {
	background-color:#ffffff;
	width:600px; margin:100px auto auto auto; 
	border:solid thin #000000;
	text-align:center;
	padding-bottom:20px;
}
#loadingspinner{ opacity:0.9; z-index:20000	; position:absolute; background-color:#f9f9f9; top:55px; bottom:0px; left:0px; right:0px;  }

#fra_interface {  width:100%; top:100px; bottom:100px;}


/***************** zones de parametrage page **********************/
#zone_recherche_under{ color:#6c757d; opacity:1; z-index:10999	; position:absolute;background-color:#fff; top:63px;	bottom:0px; left:0px; width:380px; }
#zone_color_under{color:#6c757d;  opacity:1; z-index:10999	; position:absolute;	background-color:#fff; top:63px;	bottom:0px; left:0px; width:380px; }
#zone_calque_under{color:#6c757d;  opacity:1; z-index:10999; position:absolute;	background-color:#fff; top:63px;	bottom:0px; left:0px; width:380px; }

#zone_calque{ margin:10px 15px;  }
#zone_color{ margin:10px 15px;  }
#zone_recherche{ overflow-y:scroll; position:absolute; top:74px; bottom:0px;}
#zone_recherche>div { padding:10px 15px; border-bottom:solid thin #ddd; }

/***************** global page **********************/
#zone_filtre_under{ opacity:1; z-index:10999 ; position:absolute;	background-color:#fff; top:63px;	bottom:0px; left:0px; width:380px;padding:10px; }

#zone_filtre{  zzzz-index:11002	; position:absolute;	top:115px;	bottom:0px;		left:0px;	width:380px;  }
#zone_map	{ position:absolute;	background-color:#f9f9f9;	top:55px;	bottom:0px;	left:0px; right:0px; }
#zone_fiche	{ position:absolute;	background-color:#f9f9f9;	top:63px;	bottom:210px; right:0px; width:315px; }
#zone_traj	{ opacity:1; z-index:10000; position:absolute;	background-color:#f9f9f9; bottom:0px; left:385px; right:0px; height:305px; }
#zone_traj_alt	{ opacity:1; z-index:10000; position:absolute; background-color:#f9f9f9; top:200px; bottom:0px; right:0px;width:400px;}

#zone_filtre 		{ overflow-y:hidden;  }
#zone_filtre:hover	{ overflow-y:auto; }
#zone_map			{ overflow-y:auto;  background-color:#f9f9f9; min- width:606px; }
#zone_fiche			{ overflow-y:auto;  background-color:#f9f9f9; }
#zone_traj	{ overflow-x:hidden; overflow-y:auto;   }

#zzzzone_calque>div>div 
#zone_color>div>div, 
#zone_recherche>div>div { display:inline-block; margin-left:20px; width:200px;}

.block-entete {
  zzzwidth:100%;
  padding:20px 25px;
  background-color:#3f51b5;
  color:white;
}


.block-entete>* {
  display:inline-block;
  font-size:28px;
  margin:0px 5px;
}

.block-entete>img {
  margin-top: -10px;
  }


.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.selected_item{
   display:inline-block;
  border: solid thin #4283b9;
  background-color:#ddeeff;
  color: #4283b9;
  border-radius:2px;
  margin-top:5px; margin-left: 5px; 
}

.selected_value{
    color: #4283b9;
	padding: 3px 5px; 
    cursor:default;
}

.trash { 
  border-right: solid thin #4283b9;  color: #4283b9;  width:30px;   text-align:center; 
  cursor: pointer; 
  padding: 3px 5px;  
}

.trash:hover { background-color:#bbccdd; }


.trashbutton {
   float:right;
   border:solid thin #777; 
   width:20px;   text-align:center;
   margin-top:-25px;
   background-color:"#777"; 
   border-radius:2px;
  cursor: pointer; 
   
}
.trashbutton img {	width:16px; }
.trashbutton:hover { background-color:#bbccdd; }

.idlabel {   cursor: pointer; }

table {  background-color: #fff; border-collapse:collapse; }

.filterselection {
  border:None;
  color: #4283b9;
  text-align:left;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 3px 10px;
  text-overflow: ellipsis;
}

.ws1 .filterselection, .wsundefined  .filterselection {	width:110px; border-bottom:solid thin #ddd; }
.ws2 .filterselection {	width:270px; }
.ws3 .filterselection {	width:430px; }


.filterpreselection { background-color: #f9f9f9;  color:#4283b9;  cursor: pointer; width: 125px;  padding: 3px 10px;}
.ws1 .filterpreselection, .wsundefined  .filterpreselection {	width:110px; }
.ws2 .filterpreselection {	width:270px; }
.ws3 .filterpreselection {	width:430px; }


.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}



.B1 { 
	position:relative;  z-index:11002;

    margin:5px;
	padding:5px;
	min-width:160px;
    min-height:30px;
	border:solid thin #ccc;
	border-radius:5px ;
	padding-top:5px; 
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
    background-color:#ffffff;
 }
 
 .B1_selected{
	max-height:300px;
    overflow:auto;	
 }
	  
 .B2 {
	min-width:150px;
	position:absolute;
	background-color:#ffffff;
	border:solid thin #cccccc;
    z-index:10;

	margin-top:5px;
	min-height:125px; 
	border-radius:0 0 5 5;
 }
 
.ws1, .wsundefined { width:165px; }
.ws2 { width:345px; }
.ws3 { width:520px; }
 
.ws1 .B2, .wsundefined  .B2 {	width:150px; }
.ws2 .B2 {	width:310px; }
.ws3 .B2 {	width:470px; }

 
 .B2>.i2label {

	 text-align:center; padding:5px 10px;
 }
 .B22 { 
 	background-color:#ffffff;
	border:solid thin #cccccc;
    height:120px;  
    overflow-y:auto; 
	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
 }

.filter_input:focus  {  background-color:yellow;  }

.filter_input {
	border: none;
	border-top: 1px solid #999;
	background: rgba(0, 0, 0, 0.003);
	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
	text-transform: uppercase;	
	margin: 0;
	width:150px;
	font-size: 24px;
	font-family: inherit;
	font-weight: inherit;
	line-height: 1.4em;
	color: inherit;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.ws1 .filter_input, .wsundefined  .filter_input {	width:150px; }
.ws2 .filter_input {	width:310px; }
.ws3 .filter_input {	width:470px; }


#placeforvue2D { min-height:300px; height:100%; width:100%; border-radius:5px; border:solid thin #ccc;
background-color:#ffffff; }


.cttabledata {
	zzzmax-height:180px;
	zzzoverflow-y : auto;
}

.tabledata{
	border-collapse:collapse;
	margin:2px;
	position:relative;
	left:10px; right:10px;
	width:100%
}

.tabledata tr{
}

.tabledata tr>th{
	:w-resizeborder:solid thin #4283b9; 
	background-color:#ddeeff;
	color:#4283b9; 
	text-align:center;
}

.tabledata tr>td{
	border-bottom:solid thin #ddeeff;
	color:#4283b9;
	zzzpadding:2px 10px;
}


.trajtab_fra_cell	{ width:80px }
.trajtab_E		{ width:80px }
.trajtab_X		{ width:80px }
.trajtab_utilisation		{ max-width:120px }
.trajtab_time_availability	{ max-width:120px }


.ptooltip {
  position: relative;
  display: inline-block;
}

.ptooltip .ptooltiptext {
  visibility: hidden;
  min-width: 200px;
  
  background-color: #555555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.ptooltip:hover .ptooltiptext {
  visibility: visible;
}

.cnxterrain {
  display:block;
  border: solid thin #83b942;
  background-color:#eeffdd;
  color: #83b942;
  border-radius:2px;
  margin-top:5px; margin-left: 5px; 
}

.cnxterrain>span {
    color: #83b942;
	padding: 3px 5px; 
    cursor:default;
}


 .bar {
    /* font-size: 10px */
    width: auto;
    height: 12em;
    border-radius: 0.5em;
    position: relative;
    background: #f2f2f2;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
  }

#loadbar { position:absolute; top:45%; left:25%; right:25%; height:120px;; z-index:200}


.bar .percentage {
    position: relative;
    font-size: 1em;
    background: #ff7700;
    height: 1em;
    zzzborder-radius: 0.5em;
  }
  
.has-tip:before,
  .has-tip:after {
    content: "";
    position: absolute;
    opacity: 0;
  }  
  
.has-tip:before {
    bottom: -10px;
    right: -5px;
    border: 5px solid;
    border-color: transparent transparent tomato transparent;
    transition: opacity 0.1s;
  }
  
  .has-tip:after {
    content: attr(data-perc);
    bottom: 0;
    right: 0;
    white-space: nowrap;
    padding: 0.6em 1em;
    border-radius: 2em;
    line-height: 1;
    color: #fff;
    background: tomato;
    transform: translateX(50%) translateY(100%);
    transition: transform 0.2s, opacity 0.1s;
  }
  
.has-tip:hover:before,
  .has-tip.active:before {
    opacity: 1;
  }

  .has-tip:hover:after,
  .has-tip.active:after {
    opacity: 1;
    transform: translateX(50%) translateY(100%) translateY(10px);
  }
  
  
 .label-point{
	 padding:8px 6px;
 }
 
 .info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}
#cttraj_selected{
	position: fixed;
	background: rgba(0, 0, 0, 0.7) ;
	z-index:10000;
	bottom:0;	
	left:0px; 
	right:0px;
	top: 0px;	
}

#traj_selected {
	background: rgba(255, 255, 255, 0.95) ;
	border-radius:5px;
	position: fixed;
	bottom:210px;	
	left:60px; 
	right:60px;
	top: 100px;
	overflow-y:auto;
	zzzmin-height:120px;
	font-size: 72px;	
	padding: 4px 8px 8px 8px;
	border: none;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1)
}




.rowhover:hover, ztr:hover{
background-color:#ccc;
}

.copycolumn{
width:40px;
padding-left:5px;
}
.actionicon{
	width:16px; height:16px;
}

.actionicon:hover{
	margin-left:2px;
	width:20px; height:20px;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24);
}



.command {
    padding: 4px 6px;
    background: white;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    min-width: 200px;
}

.configwidget{
border-bottom:solid thin#eee;
margin-top:20px
}

.divswitch {
	background-color:#ffffff;
	zzzborder:solid thin #ddd;
	text-align:center;
	margin:auto;
	display:inline-block;
	
	width:50%
}


#zone_mapsearchmode_info-label { font-weight:bold; width:100% ;}
#zone_mapsearchmode_info-libelle { font-weight:bold; width:100% ;}