:root {
/*
	--columns
	--delimiter
	--dateFormat
	--monthNames
	--taskLabel
	--startDateLabel
	--endDateLabel
	--ownerLabel
	--showOwner
	--showStartEndDates
	
	--monthCellWidthRatio
*/
	
	--rowHeight: 30px;
	
	--taskTitleCellWidth: 200px;
	--taskTitleFontSize: 13px;
	--taskTitleFontWeight: bold;
	--taskTitleFont: Calibri;
	--taskTitleColor: black;

	
	--taskTitleDateCellWidth: 100px;
	--taskTitleDateFontSize: 12px;	
	
	--taskDateFontSize: 11px;
	
/*	
	--taskBarStyle
*/

	--taskLineColor: grey;

	--monthBorderColor: black;
	--leftColumnsBorderLeftColor: grey;
	--rowBorderBottomColor: grey;
	
/*
	--taskLinePercCompletedColor
	--taskLineColorGood
	--taskLineColorWarn
	--taskLineColorCritical
*/	
	
	--rowHeaderFontSize: 17px;
	--rowHeaderFontWeight: bold;
	--rowHeaderFont: Calibri;
	--rowHeaderColor: black;
	--rowHeaderBackgroundColor: grey;
	--rowGroupBackgroundColor: grey;
	--rowGroupFontSize: 14px;
	--rowGroupFontWeight: bold;
/*
	--showGroupBar
	--showGroupDates
	--taskGroupLineColor
	--verticalBarLabelFontSize
	--verticalBarColor
	--todayVerticalBarColor
*/
}

.gantt-header-text {

}

.gantt-header-dates-text {

}


/* GENERIC */

.gantt-row {
	white-space: nowrap;
	position: relative;
	border-width: 0 0 1 0;
	border-style: solid;
	border-color: var(--rowBorderBottomColor);
	height: var(--rowHeight);
}

.gantt-cell {
	display: inline-block;
	position: relative;
	border-width: 0 0 0 1;
	border-style: solid;
	text-align: center;
	height: 100%;
}


/* HEADER */
.gantt-header-row {
	font-weight: var(--rowHeaderFontWeight);
	font-family: var(--rowHeaderFont);	
	font-size: var(--rowHeaderFontSize);
	color: var(--rowHeaderColor);
	background-color: var(--rowHeaderBackgroundColor);
}
.gantt-header-cell {


	
	
}


/* TASKS */
.gantt-task-row {

}

.gantt-task-cell-title {
	width: var(--taskTitleCellWidth);
}

.gantt-task-row .gantt-task-cell-title {
	font-size: var(--taskTitleFontSize);
	font-weight: var(--taskTitleFontWeight);
	font-family: var(--taskTitleFont);
	color: var(--taskTitleColor);
	
}
.gantt-task-cell-title span {
	display: block;
	position: absolute;
	padding-left: 3px;	
}

.gantt-task-cell-dates {
	width: var(--taskTitleDateCellWidth);
}

.gantt-task-row .gantt-task-cell-dates {
	font-size: var(--taskTitleDateFontSize);
	border-color: var(--leftColumnsBorderLeftColor);
}

.gantt-task-cell-dates {
	border-color: var(--leftColumnsBorderLeftColor);
}

.gantt-task-cell-dates span {
	display: block;
	position: absolute;
	width: 100%;	
}

.gantt-task-bar {
	color: var(taskLineColor);
}

.gantt-task-bar-dates {
	font-size: var(--taskDateFontSize);
}

.gantt-task-cell-month {
	border-color: var(--monthBorderColor);
}

.gantt-task-cell-month span {
	display: block;
	position: absolute;
	width: 100%;	
}

/* GROUPS */
.gantt-group-row {
	background-color: var(--rowGroupBackgroundColor);
	font-size: var(--rowGroupFontSize);
	font-weight: var(--rowGroupFontWeight);
}
.gantt-group-cell {
	
}


.gantt-cell-month-days {
	display: inline-block;
	position: relative;
	border-width: 0 0 0 1;
	border-style: solid;
	border-color: #efefef;
	text-align: center;
	height: 100%;
	font-size: 9;
	font-weight: lighter;
	font-family: Tahoma;
	vertical-align: bottom;
}



body {
	font-family: 'Calibri', sans-serif;
  color: #383838;
  margin: 0;
}
a.menu {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}

a.menu:hover {
  color: #FF7F96;
}

a.menu:active {
  /* color: white; */
}

a.menu:visited {
  /* color: white; */
}

.history-nav-tabs {
  padding-left: 10px !important;
  border-bottom: 1px solid #383838 !important;
}
.history-nav-tabs .nav-item .nav-link {
  color: #696969;
}
.history-nav-tabs .nav-item.show .nav-link {
  color: #383838 !important;
  background-color: #fff;
  /*border-color: #383838 #383838 #fff !important;*/
}

.history-nav-tabs .nav-link.active {
  color: #383838 !important;
  background-color: #efefef !important;
  border-color: #383838 #383838 #efefef !important;
}



#app-header {
  border-bottom: 3px solid #FF7F96;
  background-color: #323232;
  padding-bottom: 3px;
  padding-left: 10px;
  margin: 0 0px;
  color: #efefef;
  vertical-align: middle;
  line-height: 60px;
  height: 65px;
}
.header-item {
  float: left;
}
.header-item-right {
  float: right;
  margin-right: 10px;
}

#editor {
  height: 100%;
}

textarea {
  width: 100%;
  border: 1px solid #7F9FFF;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 10px;
}
#container {
	/*display: flex;*/
  position: relative;
	overflow:hidden;
	width: 100%;
  height: 100%;
	height: calc(100% - 66px);
}
#code-area {
	height: 100%;
  padding:0;
  overflow: hidden;  
  background-color: #efefef;
	float: left;
}
.ace-tm {
  background-color: #efefef !important;
}

#toggle-editor {
  position: relative;
  -ms-flex: 0 0 20px;
  flex: 0 0 20px;
  padding:0;
  height: 100%;
  border-top: 1px solid #c5c5c5;
  background-color: #efefef;
}

#close-editor-icon {
  position: absolute;
  left: 0px;
  z-index: 100;
  top: 0px;  
  color: #383838;
}
#open-editor-icon {
  display: none;
  position: absolute;
  right: 0px;
  z-index: 100;
  top: 0px;  
  color: #383838;
}

#open-styles-icon {
  display: none;
}

#toggle-styles {
  position: relative;
  -ms-flex: 0 0 20px;
  flex: 0 0 20px;
  padding:0;
  height: 100%;
  background-color: #efefef;
}

#gantt-styles {
  height: 100%;
  background-color: #efefef;
  overflow: auto;
  /*display: none;*/
}

.style-form-divisor {
	font-weight: bold;
}

#gantt-area-container {
	overflow: hidden;
	background-color: #fff;
	height: 100%;
  position: relative;
}
#gantt-area {
	/*flex: 1;*/
	/*
	height: 100%;
	overflow: auto;
	*/
  height: 100%;
  background-color: #fff;
  overflow: auto;
  height: -webkit-fill-available;
  width: 100%;
  position: absolute;
  width: -webkit-fill-available;
  padding: 10px;
  border: 1px solid #383838;  
  border-width: 0 1px;
}

#gantt-div {
  position: relative;
}

#history {
  padding: 3px 0px 0px 0px;
  border: 1px solid #383838;
  border-width: 0 1px;
}

#create-new-gantt {
  color: #FF7F96 !important;
  font-weight: bold !important;
}

#gantt-name {
  padding: 5px 0px;
  background-color: #efefef;
  border: 1px solid #383838;
  border-width: 0 0px 1px 0px;
}


.gantt-row-header .gantt-month-block {
  border-bottom: 2px solid #383838;
}



.gantt-task-group {
  border: 1px solid slategray;
	background-color: black;
  position: absolute;
  top: 50%;
  height: 10%;
}

.gantt-task {
  border: 1px solid slategray;
  position: absolute;
  top: 10%;
  height: 80%;
}



.gantt-task-innertext {
  padding-right: 5px;
}

.gantt-task-date-label {
  position: absolute;
  background-color: transparent;
  color: black;
  top: 0;
  font-size: 10px;
  z-index: 11;
}

.vertical-bar {
  border-left-width: 1px;
  border-left-style:  solid;
  border-left-color: GoldenRod;
  position: absolute;
  z-index: 9;
}

.vertical-bar-label {
  position: absolute;
  z-index: 10;
  font-size: 11px;
  border-left: 1px solid GoldenRod;
  padding-left: 1px;
  background-color: transparent;
  width: 80px;
}
.vertical-bar-label-today {
  /* border-width: 0 !important; */
  /* padding: 0 !important; */
  /* background-color: transparent !important; */
}

/* shapes */

.triangle {
      /*
	  width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 16px solid #323232;
	  */
      position: absolute;
	  background-image: url("star.png");
	  background-size: 16px;
	  width: 16px;
	  height: 16px;
	  top: 25%;
	  
}
.jsonexample {display: none;}
canvas { margin:20px;}



/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #696969 #323232; /*#efefef;*/
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: #323232; /*#efefef;*/
}

*::-webkit-scrollbar-thumb {
  background-color: #696969;
  border-radius: 20px;
  border: 3px solid #323232; /*#efefef;*/
}