/* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/



:root {

	--bg-part-color: #ADB6C4;

	--bg-chapter-color: #294C60;

	--bg-scene-color: #001B2E;

	--bg2-scene-color: #fcf788;

	--bg-event-color: #fff;

	--font-color-button: #fff;

}



html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

	display: block;

}

body {

	line-height: 1;

	background-color: #eee;

	overflow-x: hidden;

}

ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}



h1 {

	text-align: center;

}



a, h1 a {

	color: #0d93b5;

	text-decoration: none;

}



.hidden {

	display: none;

}



#header {

	height: 150px;

	position: relative;

}



#toolbar {

	position: absolute;

	top: 20px;

	right: 20px;

}



#logout {

	display: inline-block;

}



#main {

	display: flex;

	height: 100%;

	width: 100%;

	overflow: hidden;

	position: absolute;

}



#tree_section {

	overflow-y: auto;

	min-height: 100%;

	height: auto;

}



#tree_section h2 {

	display: flex;

	padding-right: 15px;

}



 #content_section {

 	padding: 20px;

 	overflow-y: auto;

 }



 #content_section ul {

 	list-style-type: disc;

 }



 #content_section ul.sortable {

 	padding-left: 0;

 }



 #content_section ul.sortable li {

 	padding: 10px;

 	color: #fff;

 	background-color: var(--bg-chapter-color);

 }



#content_section ul.sortable li:nth-child(odd) {

  	background-color: var(--bg-scene-color);

}



.fa-add, .fa-trash, .edit {

	cursor: pointer;

}



.fa-arrows-up-down-left-right {

	cursor: move;

}



 .tree {

 	padding-left: 0;

 }



.tree li > span {

	display: flex;

	padding: 20px;

	font-size: 1.2em;

	border-bottom: 2px solid #fff;

	cursor: pointer;

}



.tree li span span.icons, .tree li span img, h2 .fa-arrows-up-down {

	cursor: pointer;

	margin-left: auto;

	margin-top: auto;

}



.tree > li > span {

	background-color: var(--bg-part-color);

	color: #fff;

}



.tree > li > ul > li > span {

	background-color: var(--bg-chapter-color);

	color: #fff;

}



.tree > li > ul > li > ul > li span {

	background-color: var(--bg-scene-color);

	color: #fff;

}



.tree > li strong {

	cursor: pointer;

}



.bg-part {

	background-color: var(--bg-part-color) !important;

	color: var(--font-color-button) !important;

}



.bg-chapter {

	background-color: var(--bg-chapter-color) !important;

	color: var(--font-color-button) !important;

}



.bg-scene {

	background-color: var(--bg-scene-color) !important;

	color: var(--font-color-button) !important;

}



.img_mini {

	width: 64px;

}



input[required], textarea[require] {

	border: 1px solid #c55;

}



.button_toolbar {

	position: fixed;

	bottom: 10px;

	left: 50%;

}



/*** Timeline ***/

#settings_timeline {

	width: 100%;

	padding: 15px;

}



#settings_timeline .dropdown-menu.show {

	z-index: 7000;

}



#settings_timeline .zoom {

	float: right;

}



#timeline_container {

	max-width: 100%;

	overflow: auto;

}



#timeline_container .scenes {

	display: flex;

	margin: 15px;

	padding: 0;

	position: relative;

	height: 700px;

	user-select: none; /* Standard */

   -webkit-user-select: none; /* Safari */

   -ms-user-select: none; /* IE/Edge */

   cursor: grab;

}



#timeline_container .scenes > li {

	position: absolute;

	cursor: default;

	min-width: 150px;

}



#timeline_container .scenes > li.level1 {

	top: 10px;

	height: 450px;

}



#timeline_container .scenes > li.level2 {

	top: 80px;

	height: 380px;

	z-index: 1000;

}



#timeline_container .scenes > li.level3 {

	top: 150px;

	height: 310px;

	z-index: 2000;

}



#timeline_container .scenes > li.level4 {

	top: 220px;

	height: 240px;

	z-index: 3000;

}



#timeline_container .scenes > li.level5 {

	top: 290px;

	height: 170px;

	z-index: 4000;

}



#timeline_container .scenes > li.level6 {

	top: 360px;

	height: 100px;

	z-index: 5000;

}



#timeline_container .scenes > li.open {

	z-index: 6000;

}



#timeline_container .scenes > li::after {

	display: block;

	width: 30px;

	height: 30px;

	border-radius: 50%;

	border: 2px solid var(--bg-scene-color);

	background-color: #fff;

	content: '';

	position: absolute;

	bottom: 0;

	left: -15px;

}



#timeline_container .scenes > li .more_infos {

	cursor: pointer;

}



#timeline_container .scenes > li .scene_infos,
#timeline_container .scenes > li .event_infos {

	color: var(--bg-scene-color);

	background-color: var(--bg2-scene-color);

	border: 2px solid var(--bg-scene-color);

	padding: 3px;

}

#timeline_container .scenes > li .event_infos {
	background-color: var(--bg-event-color);
}



#timeline_container .scenes > li .scene_infos .more,
#timeline_container .scenes > li .event_infos .more {

	display: none;

	position: absolute;

	left: 0;

	width: 100%;

	color: var(--bg-scene-color);

	background-color: #fff;

	border-left: 2px solid var(--bg-scene-color);

  	border-right: 2px solid var(--bg-scene-color);

  	border-bottom: 2px solid var(--bg-scene-color);

	z-index: 6000;

}



#timeline_container .scenes > li .scene_infos .story_arcs ul,
#timeline_container .scenes > li .event_infos .story_arcs ul {

	list-style-type: disc;

}



#timeline_container .scenes > li .line {

	display: block;

	width: 2px;

	background-color: var(--bg-scene-color);

	position: absolute;

	left: 0%;

	bottom: 0;

}



#timeline_container .scenes > li.last_scene .line {

	right: 0;

	left: auto;

}



#timeline_container .scenes > li.last_scene::after {

	right: -15px;

	left: auto;

}



#timeline_container .scenes > li.level1 .line {

	height: 450px;

}



#timeline_container .scenes > li.level2 .line {

	height: 380px;

}



#timeline_container .scenes > li.level3 .line {

	height: 300px;

}



#timeline_container .scenes > li.level4 .line {

	height: 240px;

}



#timeline_container .scenes > li.level5 .line {

	height: 170px;

}



#timeline_container .scenes > li.level6 .line {

	height: 100px;

}



#timeline_container .scenes > li.open {

	z-index: 6000;

}



#timeline_container .scenes > li:hover::after,

#timeline_container .scenes > li.open .scene_infos,

#timeline_container .scenes > li:hover .scene_infos,

#timeline_container .scenes > li.open .event_infos,

#timeline_container .scenes > li:hover .event_infos

{

	background-color: var(--bg-scene-color);

	color: #fff;

}



#timeline_scrolling {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 30px;

    background-color: #eee;

    z-index: 6000;

}



#timeline_scrolling .bullet {
	position: absolute;
	border-radius: 50%;
	border: 1px solid var(--bg-scene-color);
	width: 10px;
	height: 10px;
	top:10px;
}

#timeline_scrolling .bullet.scene {
	background-color: var(--bg2-scene-color);
}

#timeline_scrolling .bullet.event {
	background-color: var(--bg-event-color);
}

#timeline_scrolling #visible {

	width: 200px;

	height: 30px;

	background-color: #555;

	position: absolute;

	opacity: 0.6;

	cursor: grab;

}



#timeline_scrolling #scenes_bullets {

	position: absolute;

	left: 0;

	bottom: 0;

	height: 30px;

}



/*** Check ***/

#check {

	padding: 10px;

}



#result_check tr td {

	border-width: 1px;

	padding: 10px;

}



#result_check tr.sd td {

	background-color: var(--bg-scene-color);

	color: #fff;

}



#result_check tr.cd td {

	background-color: var(--bs-teal);

}



#result_check tr.ac td {

	background-color: var(--bs-green);

}



#result_check tr.ao td {

	background-color: var(--bs-light);

}



#result_check tr.as td {

	background-color: var(--bs-orange);

}



#result_check tr.asa td {

	background-color: var(--bs-yellow);

}