.jstree-clicked{
		background: #beebff!important;

}


body{
	--background: #fff;
	--fontcolor : black;
	--borders : 1px solid #ddd;
	--colorHover : #8d8d8d;

	--tabHeight : 50px;
	--editorHeight :  calc( 100vh - var(--tabHeight) - 1px );

	--innerBorders : 1px solid #ddd;
}

li a{
	display: inline-block!important;
}

/* SCROLLBAR*/
#main ::-webkit-scrollbar{
	width: 8px;
	height: 8px;
	padding-top: 40px;
}

#main ::-webkit-scrollbar-track{
	background: #e8e8e8;
	border-radius: 2px;
}

#main ::-webkit-scrollbar-thumb{
	border-radius:2px;
	height: 30px;
	width: 8px;
	border: 1px solid grey;
	background: rgb(111,111,111);
	background: -webkit-linear-gradient(rgb(200,200,200), rgb(150,150,150));
}

#main ::-webkit-scrollbar-track-piece {
	height: 30px;
	width: 30px;
}

/*MAIN*/
#main{
	width: 100%;
	height : 100vh;
	/*min-heigh : 200px;*/

	border: var(--borders);
	background-color: var(--background);

	position: relative;
}

.topMenu{
  display: flex;
  border-bottom: var(--innerBorders);
  position: fixed;
  top: 0;
  z-index: 8;
  width: 100%;
	background-color: #FFF;
}

.bodyEditor{
	display:flex;
	margin-top: 50px;
}

/*TOOLBOX*/

#toolBox{
  width: 20%;
  height: 50px;
  float: left;
  border-right: var(--innerBorders);
  display: inline-flex;
  margin: 0;
  padding-left: 20px;
  display: inline-block;
	min-width: 280px;
	background-color:#fff;
}

#toolBox .glyphicon{
	padding-right: 30px;
}

.divToolBox {
	display: inline-block;
	cursor: pointer;
	width:13%;
	margin-top: -17px;
}

#toolBox .divToolBox span{
	transition: color 0.1s;
}

#toolBox .divToolBox:hover span{
	color: rgba(144, 144, 144, 0.7);
}

#toolBox span {
	cursor: pointer;
}

span.glyphicon {
	font-size: calc(15px + 0.9vw);
	padding: 10px;
	color: rgb(144, 144, 144);
	margin:auto;
}

span.glyphicon.glyphicon-plus {
	padding: 0px!important;
	margin-right: -18px;
	    top: 25px;
	font-size: 8px;
	background-color: var(--background);
	z-index: 5;
	border: solid 2px;
}

.glyphicon::before{
	cursor: pointer;
}

.divToolBox:active span{
	color : #c4c4c4!important;
}

/*size selector*/

#editorStatus{
	padding: 10px;
	top : -7px;
	position: relative;
}

/*toolBox Border*/

#treeDiv{
	border-right : var(--innerBorders);
	min-width: 220px;
}

span.back.glyphicon.glyphicon-floppy-disk {
    top: 20px;
    margin-left: 5px;
    font-size: 20px;
    padding: 0px;
    padding-right: 0px!important;
    background-color: white;
    z-index: 5;
}

span.front.glyphicon.glyphicon-floppy-disk {
    font-size: 23px;
    padding: 0;
    padding-left: 14px;
}

/*ONGLET*/

#tab{
	height: var(--tabHeight);
	width:80%;
	background-color: var(--background);
	margin: 0;
	background-color: #f9f9f9;
	overflow: hidden;
	min-width: 200px;
}

#tabList{
	overflow: hidden;
	background-color: #f9f9f9;
	margin-top:8px;
}

.tabListElement {
	cursor: pointer;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .nav-tabs>li>a{
	color : var(--fontcolor);
}

.nav-tabs {
    border-bottom: none;
}

button.close{
	position: absolute;
	display: inline-block;
	right: 5px;
}

.modified a{
	color: #8e0000!important;
}
.modified a:before{
	content: "*";
}

/* EXPAND BUTTON*/

#expandDiv{
	position : absolute;
	z-index: 9;
	display: inline-block;
	float: right;

	top : 0px;
	right: 0px;
}

/*ARBORESCENCE - Jstree*/

#treeDiv{
	height: var(--editorHeight);
	width: 20%;

	display: inline-block;

	position: relative;
	top: 0;

	background-color: var(--background);
	color: var(--fontcolor);

	overflow: auto;
	padding-top: 20px;
  padding-left: 20px;

	min-width: 280px;
}

li[data-type="file"]>a>i, li[data-type="dir"]>a>i{
	background-image: none!important;
	font-family: 'Glyphicons Halflings';
	font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
	color:rgb(144, 144, 144)!important;
}

li[data-type="file"]>a>i:before {
  content: "\e022";
}

li[data-type="dir"]>a>i:before {
  content: "\e118";*/
}

.jstree-default .jstree-hovered{
  background: #f9f9f9!important;*/
}

/*EDITEUR*/
#editor{
	width: 80%;
	display: inline-block;

	float: right;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

/* RIGHT CLICK MENU*/

#RightClickMenu{
  height: auto;
  width: auto;
  background-color: #f9f9f9;
  border-radius: 2px;
  display: none;
  position: absolute;
  border: 1px solid #ddd;
  border-top: 0px;
  z-index: 5;
}

#RightClickMenu ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#RightClickMenu li {
  border-top: 1px solid #ddd;
	width: 150px;
	cursor: pointer;
}

#RightClickMenu span.glyphicon {
  font-size: 15px!important;
  padding: 10px!important;
  color: rgb(130, 130, 130)!important;
}

.rightClick{
	margin : 0 10px 0 0;
}

/* EXPAND */

#ExpandMenu{
	height : auto;
	width : auto;
	background-color: #f9f9f9;
	border-radius: 2px;
	position: fixed;
	z-index:5;
	border:1px solid #ddd;
	border-top:0px;

	right: 10px;
  top: 45px;
}

#ExpandMenu ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#ExpandMenu li {
	border-top: 1px solid #ddd;
	padding: 5px;
}

.ExpandMenu{
	margin : 0 10px 0 0;
}

.ExpandMenuElement:hover{
	cursor: pointer;
}

/* POP UP STYLE*/

.fa{
	margin-left:10px;
}

#dialog{
	display:none;
}

#popup{
	display: none;
}

.dialogButton, #popup button{
	margin-top:10px;

	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	float: right;
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4;
}

.dialogButton:focus, #popup button:focus {
    color: #fff;
    background-color: #286090;
    border-color: #122b40;
    text-decoration: none;
}

.dialogButton:hover, #popup button:hover {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}

.dialogButton:disabled {
	color: black;
	background-color: #8492a8;
}

#btnConfirm{
	margin-left: 10px;
}

.ui-dialog .ui-dialog-title{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
	font-weight: 500;
	text-align: center;
}

.ui-draggable .ui-dialog-titlebar{
	border-radius: 0;
	background-color: #e3e3e3;
}
.ui-dialog{
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	padding: 5px 0;
	margin: 2px 0 0;
	font-size: 14px;
	text-align: left;
	list-style: none;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.ui-widget.ui-widget-content{
	padding:0;
}

.ui-widget.ui-widget-content input{
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}


.ui-widget.ui-widget-content input:focus{
   border-color: #66AFE9;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
   outline: 0 none;
}
.ui-widget.ui-widget-content input.forbiddenChar:focus{
   border-color: #f20000;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(242, 0, 0, 0.6);
   outline: 0 none;
}

#forbiddenCharMessage{
	color : #f20000;
	font-size: 0.8em;
	display: none;
}
