/*------------ Raadix 2019 STYLESHEET ---------------*/
/*------------ Gewijzigd: 25 april 2019 -------------*/
/* TREE PAGE */

#page-causetree {
	position: absolute;
	display: none;
	right: 0;
	top: 15mm;
	left: 0;
	bottom: 0;
	background: none;
	padding: 0;
	margin: 0;
	overflow-x: auto;
	overflow-y: auto;
} 

#causetree {
	position: relative;
}
.ctzoom05 { scale: 0.5; transform-origin: top ; }
.ctzoom04 { scale: 0.6; transform-origin: top ; }
.ctzoom03 { scale: 0.7; transform-origin: top ; }
.ctzoom02 { scale: 0.8; transform-origin: top ; }
.ctzoom01 {	scale: 0.9; transform-origin: top ; }
.ctzoom00 { scale: 1.0; transform-origin: top ; }
.ctzoom10 { scale: 1.1; transform-origin: top ; }
.ctzoom20 { scale: 1.2; transform-origin: top ; }
.ctzoom30 { scale: 1.3; transform-origin: top ; }
.ctzoom40 { scale: 1.4; transform-origin: top ; }
.ctzoom50 { scale: 1.5; transform-origin: top ; }


#top-event-center {
	position: relative;
	width: 10mm;
	height: 10mm;
	font-size: 6mm;
	line-height: 10mm;
	text-align: center;
	color: var(--grey-text);
	background: none;
	border: none;
	margin: 0 auto;
}

/*============== CAUSE TREE =========================*/

.cause-block {
	display: block;
	position: absolute;
	user-select: none;
	width: 32mm;
	height: 36mm;
	background: none;
	border: none;
	padding: 0;
	margin: 0; 
}
.cause-move {
	transition: left 0.5s ease-out, top 0.5s ease-out;
}

.cause-sub {
	display: grid;
	grid-template-columns: 6.0mm auto 6.0mm;
	grid-template-rows: 6mm auto;
	gap: 0;
	position: absolute;
	height: 31.6mm;
	left: 0;
	top: 0;
	right: 0;
	padding: 0;
	margin: 0;
	background-color: white;
	border: 2px solid var(--blue-color);
	overflow: hidden; 
}

.cause-sub > button {
	align-self: stretch;
	font-size: 3.6mm;
	line-height: 6mm;
	height: 6.0mm;
	color: white;
	text-align: center;
	margin: 0;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	border: none;
	cursor: pointer;
}

.cause-title {
	align-self: stretch;
	font-size: 3.2mm;
	line-height: 6mm;
	height: 6mm;
	text-align: center;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	padding: 0;
	border: none;
	cursor: pointer;
}
.self-select {
	outline: 1mm solid var(--yellow-color);
	box-shadow: 0 1mm 3mm rgba(0,0,0,0.24), 0 1mm 3mm rgba(0,0,0,0.48);
}
.other-select {
	outline: 1mm solid var(--light-blue-color); /*#FB05DE;*/
	box-shadow: 0 1mm 3mm rgba(0,0,0,0.24), 0 1mm 3mm rgba(0,0,0,0.48);
}

.cause-text {
	grid-column: 1 / -1;
	align-self: stretch;
	min-height: 18.6mm;
	width: 100%;
	font-size: 3.7mm;
	line-height: 4.1mm;
	text-align: center;
	padding: 0 1mm;
	cursor: pointer;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
/*	word-break: break-all;*/
	overflow-wrap: break-word; 
	hyphens: auto;
	border: none;
}

.cause-status {
	display: block;
	grid-column: 1 / -1;
/*	width: 100%;*/
	height: 6mm;
	font-size: 3.4mm;
	line-height: 6.0mm;
	text-align: center;
	padding: 0;
	cursor: pointer;
	border: none; 
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
}

/*=== connecting line ====================*/
.connect-main {
	z-index: -1;
	position: absolute;
	width: 0;
	height: 35mm;
	background: none;
}
.connect-upright {
	bottom: 0;
	left: 15.9mm;
	border-left: 2px solid #575757;
	border-top: 2px solid #575757;
}
.connect-upleft {
	bottom: 0;
	right: 15.9mm;
	border-right: 2px solid #575757;
	border-top: 2px solid #575757;
}
.connect-downright {
	top: 36mm;
	left: 15.9mm;
	border-bottom: 2px solid #575757;
	border-left: 2px solid #575757;
}
.connect-downleft {
	top: 36mm;
	right: 15.9mm;
	border-bottom: 2px solid #575757;
	border-right: 2px solid #575757;
}

.cause-connect {
	position: absolute;
	left: 12.5mm;
	bottom: -3.5mm;
	height: 7.0mm; /* 7.6mm */
	width: 7.0mm;  /* 7.6mm */
	font-size: 4.0mm;
	line-height: 6.6mm;
	text-align: center;
	padding: 0;
	cursor: pointer;
	border-radius: 3.5mm;
	border: 0.2mm solid #575757; 
}

.cause-end {
	position: absolute;
	left: 0;
	bottom: -3.4mm;
	height: 6.8mm;
	width: 32mm;
	font-size: 3.4mm;
	line-height: 6.4mm;
	text-align: center;
	padding: 0 1mm;
	cursor: pointer;
	border-radius: 2.0mm;
	border: 0.2mm solid #575757; 
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
}

/*=================================================================*/

/*== edit section ==*/

#ct-cause-end-section {
	grid-column: 1/-1;
}

#ct-end-code-section, #ct-goto-section {
	display: none;
	grid-column: 1/-1;
}

#ct-cause-end-explain {
	display: none;
	border: 1px solid #878787;
	padding: 2mm;
	margin: 0 0 3mm 0;
	font-size: 3.6mm;
	line-height: 5mm;
	color: #575757;
}

#ct-visibility-section, #ct-delete-section,
#tl-visibility-section, #tl-delete-section {
	margin: 0 0 2mm 0;
	padding: 1mm 2mm;
	background-color: white;
	border: 1px solid #575757;
}