/*------------ Raadix 2019 STYLESHEET ---------------*/
/*------------ Hadrion: 6 mei 2019 ------------------*/
/* TIMELINE PAGE */

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

#timeline {
	position: relative;
}
.tlzoom05 { scale: 0.5; transform-origin: top right; }
.tlzoom04 { scale: 0.6; transform-origin: top right; }
.tlzoom03 { scale: 0.7; transform-origin: top right; }
.tlzoom02 { scale: 0.8; transform-origin: top right; }
.tlzoom01 {	scale: 0.9; transform-origin: top right; }
.tlzoom00 { scale: 1.0; transform-origin: top right; }
.tlzoom10 { scale: 1.1; transform-origin: top right; }
.tlzoom20 { scale: 1.2; transform-origin: top right; }
.tlzoom30 { scale: 1.3; transform-origin: top right; }
.tlzoom40 { scale: 1.4; transform-origin: top right; }
.tlzoom50 { scale: 1.5; transform-origin: top right; }

.page-borders {
	border-left:   2px dashed #878787;
	border-bottom: 2px dashed #878787;
	border-right:  2px dashed #878787;
}

.size-square {
	position: absolute;
	z-index: 100;
	display: block;
	width: 100mm;
	height: 100mm;
	right: 0;
	top: 0;
	background: none;
	border: 1px solid red;
}

#time-arrow {
	position: absolute;
	left: 0;
	right: 0;
/*	top: 91mm; /* 97mm;*/
	height: 12mm; /* 8mm;*/
	display: grid;
	grid-template-columns: repeat(21, 1fr);
	gap: 4mm;
	background-color: #E0E0E0;
	padding: 0;
	margin: 0;
	border-top: 1mm solid var(--grey-color);
	border-bottom: 1mm solid var(--grey-color);
	cursor: pointer;
}
#time-arrow > div {
	font-size: 8mm; /*5mm;*/
	line-height: 10mm;
	color: var(--grey-color);
	text-align: center;
	padding: 0;
	margin: 0; 
}
.arrow-move {
	transition: top 0.5s ease-out;
}


#tl-explain-section, #ct-explain-section {
	display: none;
	border: none;
	padding: 2mm;
	margin: 0 0 3mm 0;
	font-size: 3.6mm;
	line-height: 5mm;
}

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

.radio-type-section {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 2mm;
	padding: 0; 
	width: 100%;
	margin: 0;
}
.radio-type-section > button {
	border-radius: 4mm;
	height: 14mm;
	font-size: 7mm;
	font-family: inherit;
	cursor: pointer;
	padding: 2mm;
	margin: 0;
}

#tl-delete-btn {
	display: none;
}

.action-button {
	color: var(--grey-text);
	background-color: white;
	border: 1mm solid var(--yellow-color);
}
.action-select, .action-button:hover {
	color: var(--grey-text);
	background-color: var(--yellow-color);
	border-color: var(--grey-text);
}

.condition-button {
	color: var(--grey-text);
	background-color: white;
	border: 1mm solid #009FE3;
}
.condition-select, .condition-button:hover {
	color: white;
	background-color: #009FE3;
	border-color: var(--grey-text);
}

.bad-barrier-button {
	color: var(--grey-text);
	background-color: white;
	border: 1mm solid #E53312;
}
.bad-barrier-select, .bad-barrier-button:hover {
	color: white;
	background-color: #E53312;
	border-color: var(--grey-text);
}

.good-barrier-button {
	color: var(--grey-text);
	background-color: white;
	border: 1mm solid #6EAB28;
}
.good-barrier-select, .good-barrier-button:hover {
	color: white;
	background-color: #6EAB28;
	border-color: var(--grey-text);
}

.question-button {
	color: var(--grey-text);
	background-color: white;
	border: 1mm solid #FB05DE;
}
.question-select, .question-button:hover {
	color: white;
	background-color: #FB05DE;
	border-color: var(--grey-text);
}

.blank-button {
	color: #B7B7B7;
	background-color: white;
	border: 1mm solid #B7B7B7;
}
.blank-select, .blank-button:hover {
	color: white;
	background-color: #B7B7B7;
	border-color: var(--grey-text);
}

/*============= Sticky ==================================*/

.sticky-block {
	position: absolute;
	user-select: none;
	display: grid;
	grid-template-columns: 6.0mm auto 6.0mm;
	gap: 0;
	background-color: white;
	width: 32mm;
	border: 2px solid #164194; 
	cursor: pointer;
}
.sticky-move {
	transition: right 0.5s ease-out, top 0.5s ease-out;
}

.sticky-block > button {
	grid-column: span 1;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 3.6mm;
	line-height: 6.0mm;
	padding: 0;
	margin: 0;
	border-radius: 0;
	border: none;
	cursor: pointer;
}

.sticky-top {
	grid-column: span 1;
	font-size: 3.2mm;
	line-height: 6.0mm;
	text-align: center;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0;
	margin: 0;
	border: none;
}

.sticky-body {
	grid-column: 1 / -1;
	min-height: 17mm;
	font-size: 3.7mm;
	line-height: 4.2mm;
	text-align: left;
	padding: 0 1mm;
	margin: 0;
	border: none; 
	resize: none;
	overflow-x: hidden;
	overflow-y: hidden;
	overflow-wrap: break-word;
}

.sticky-datetime {
	display: block;
	grid-column: 1 / -1;
	font-size: 3.4mm;
	line-height: 6.0mm;
	color: white;
	text-align: left;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 1mm;
	background-color: var(--grey-color);
	border: none;
}