/***************************************************************
* Styles for clickable openEHR template HTML display
***************************************************************/
.clickabletree, .clickabletree-button, .section, .annotation, .path, .usagenote {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
}

body.clickabletree {
	font-size: medium;
	margin: 6px;
	padding: 6px;
	border: solid 1px #06c;
}

p.clickabletree {
	font-size: 13px;
	margin-top: 6px;
	padding: 0px;
	color: #555555;
}

td.clickabletree {
	font-size: 12px;
	color: #555555;
}

th.clickabletree {
	border-top: solid 1px #06c;
}

.clickabletree-archetyperoot {
	font-size: 14px;
	font-weight: bold;
	line-height: 160%;
	color: #555555; /*fallback only*/
	color: var(--default-text-color);
	background-color: #E0E0E0;
	/*background-color:#E5F0FF; bluish alternative*/
	padding-bottom: 2px;
	padding-top: 2px;
}

.clickabletree-templateroot {
	font-size: 19px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 2px;
	margin-top: 0px;
	color: #555555; /* fallback only */
	color: var(--default-text-color);
}

.clickabletree-archetype {
	border: 1px solid #E0E0E0;
	padding: 0 0 10px 10px;
}

.clickabletree-cluster-hierarchy {
	border: 1px dotted #E0E0E0;
	margin: 6px 10px 2px 17px;
	padding: 0 0 10px 5px;
}

/*For the first archetype directly underneath another archetype we add an extra margin. 
(Reconsider: Could also do this for all fitting children, not only first.*/
.clickabletree-archetype > .clickabletree-archetyperoot:first-child {
	margin-top: 10px;
}

/* If an archetype is inside a hierarchy such as a protocol, activity or so, we do not want two borders - a dashed and then the solid one.
The trick is to modify the margin of the inner so that the border is directly on top of the other border in this case. */
.clickabletree-cluster-hierarchy > .clickabletree-archetyperoot {
	margin: 0 -1px -1px -6px;
}

.clickabletree-cluster-hierarchy > .clickabletree-archetype {
	margin: 0 -1px -11px -6px;
	padding: 4px 4px 20px 10px;
}

.clickabletree-other-hierarchy {
	margin-left: 12px;
	padding-left: 5px;
}

.clickabletree-top-level {
	border: 1px solid #ACACAC;
	margin: 0 10px 6px 0;
	padding-bottom: 10px;
	display: block;
}

.clickabletree-inner-level {
	/*no longer required?*/
}

.clickabletree select, .clickabletree input {
	vertical-align: top;
	color: #555555;
	padding: 2px;
}

.clickabletree select[size="1"] {
	height: 24px;
}

.clickabletree input {
	height: 16px;
}

.clickabletree select {
	min-width: 187px;
	max-width: 258px;
}

.clickabletree input[type="text"], .clickabletree input[type="number"],
	.clickabletree input[type="email"], .clickabletree input[type="date"],
	.clickabletree input[type="url"] {
	min-width: 179px;
	max-width: 250px;
}

.clickabletree input[type="date"] {
	height: 16px; /* At least in Chrome, 16px leads to the same total height as the rest =24px*/
}
	
.clickabletree input[type="checkbox"] {
	padding: 6px; /* Defined by ckm.css - but need to maintain the padding. */
}

.clickabletree textarea {
	vertical-align: top;
	font-size: 12px;
	color: #555555;
	width: 181px;
}

.clickabletree textarea.single-line {
	height: 18px;
}

.clickabletree textarea.multi-line {
	height: 51px;
}

a.clickabletree {
	font-size: 12px;
	color: #555555;
}

a.clickabletree:link {
	text-decoration: none;
}

a.clickabletree:visited {
	color: #008;
	text-decoration: none;
}

a.clickabletree:hover {
	text-decoration: underline;
	color: #222222;
}

a.clickabletree:active {
	border-top-color: #1b435e;
	background: #1b435e;
	color: white;
}

img.image { /*To render the icon top, even if the text next to it is on multiple lines in the OPT view. text-top doesn't do this.*/
	vertical-align: top;
}
	
img.headerimage { /* For the header images text-top is more appropriate */
	vertical-align: text-top;
} 

.errors {
	min-width: 400px;
	max-width: 400px;
	width: 400px;
	font-size: 8px;
	color: #f00;
}

#top {
	clear: left;
	padding-top: 70px;
	color: #06c;
	min-width: 400px;
	max-width: 400px;
	width: 400px;
	font-size: 12px;
	border: 0px;
	background-repeat: no-repeat;
	float: left;
}

.bordered-title {
	border-top: solid 2px #06c;
	border-bottom: solid 2px #06c;
}

.primary-metadata {
	float: left;
	margin-left: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
	min-width: 33%;
	max-width: 45%;
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
}

.secondary-metadata {
	float: right;
	padding: 10px;
	margin: 10px;
	min-width: 30%;
	max-width: 45%;
	border: 2px dotted grey;
}

.section {
	color: #555555;
	padding: 2px;
	background: white;
}

.section-head {
	font-size: 14px;
	font-weight: bold;
	padding: 2px;
	margin: 0px;
}

.section-body {
	font-size: 12px;
	border: 0px;
	padding: 2px;
	margin: 0px 0px 0px 15px;
	white-space: pre-wrap; /* preserve linebreaks */
}

.path {
	font-size: 11px;
	font-style: italic;
	font-weight: normal;
	/* still non-wcag in headings: color: #727272; on-wcag: #A4A4A4;*/
}

.treeRoot {
	clear: both;
}

.annotation {
	color: #416aa3;
	font-size: 11px;
	margin: 10px;
	font-style: italic;
	border-style: none;
	line-height: 125%;
}

.annotation table {
	border-collapse: collapse;
}

.usagenote {
	font-size: 12px;
	color: #757575;
}

.exposed-rm-attribute {
	color: #707070;
	font-style: normal;
	padding-top: 2px;
}

img.exposed-rm-attribute {
	vertical-align: text-bottom;
}

.clickabletree-button {
	text-decoration: none;
	text-align: center;
	padding: 2px 8px 1px 8px;
	border: solid 1px #ACACAC;
	border-bottom: none;
	border-radius: 8px 8px 0px 0px;
	font-size: 12px;
	font-weight: bold;
	color: #36639E; /* Fallback only */
	background-color: #D2DEF1; /* Fallback only */
	color: var(--dashboard-link-color); /*707070 not WCAG AA compliant with background color. */
	background-color: var(--dashboard-vivid-background-color); /*#E0E0E0 not WCAG compliant in combination with font color. */
}

a.clickabletree-button:hover, a.clickabletree-button:active {
	text-decoration: underline; border-top-color : #416aa3;
	border-left-color: #416aa3;
	border-right-color: #416aa3;
	background-color: #36639E; /*fallback only, was #416aa3; */
	background-color: var(--dashboard-link-color);
	color: white;
	border-top-color: #416aa3;
}

a.clickabletree-button:active {
	filter: brightness(115%);
}