/************************************************************************************************************************
	components.css: Reusable UI components extending Bootstrap 5. 
		Includes badges, cues, sortable tables, wiki forms, icons, and other common interactive patterns.

		Copyright (c) 2012-Present - agileKaizen, Ltd., all rights reserved. http://agileKaizen.com
************************************************************************************************************************/


/* ============================== CUE CONTAINER ============================== */
.cue-container li .cue-btn a,.cue-container a.cue-btn {border:1px solid transparent; border-radius:4px;}
.cue-container.cue-inactive li .cue-btn a,.cue-container.cue-inactive a.cue-btn,.cue-container.cue-inactive button.cue-btn {background-color:var(--bs-gray-300) !important; border-color:var(--bs-gray-500) !important; color:var(--text-body) !important; font-weight:normal;}
.cue-container.cue-default li .cue-btn a,.cue-container.cue-default a.cue-btn,.cue-container.cue-default button.cue-btn {background-color:var(--brand-contrast) !important; border-color:var(--brand-primary-dark) !important; color:var(--text-body) !important;}
.cue-container.cue-edited li .cue-btn a,.cue-container.cue-edited a.cue-btn,.cue-container.cue-edited button.cue-btn {background-color:var(--brand-primary-dark) !important; border-color:var(--brand-primary) !important; color:var(--bs-white) !important;}
.cue-container.cue-processing li .cue-btn a,.cue-container.cue-processing a.cue-btn,.cue-container.cue-processing button.cue-btn {background-color:var(--brand-primary) !important; border-color:var(--brand-primary-dark) !important; color:var(--bs-white) !important;}
.cue-container.cue-success li .cue-btn a,.cue-container.cue-success a.cue-btn,.cue-container.cue-success button.cue-btn {background-color:var(--bs-success) !important; border-color:var(--bs-success-border,var(--bs-success)) !important; color:var(--bs-white) !important;}
.cue-container.cue-error li .cue-btn a,.cue-container.cue-error a.cue-btn,.cue-container.cue-error button.cue-btn {background-color:var(--bs-danger) !important; border-color:var(--bs-danger-border,var(--bs-danger)) !important; color:var(--bs-white) !important;}
.cue-container .cue-msg-default {display:inline-block;}
.cue-container .cue-msg-edited,.cue-container .cue-msg-processing,.cue-container .cue-msg-success {display:none;}
.cue-container.cue-edited .cue-msg-default,.cue-container.cue-processing .cue-msg-default,.cue-container.cue-success .cue-msg-default {display:none;}
.cue-container.cue-edited .cue-msg-edited {display:inline-block;}
.cue-container.cue-processing .cue-msg-processing {display:inline-block;}
.cue-container.cue-success .cue-msg-success {display:inline-block;}


/* ============================== LEGENDS ============================== */
legend, div.legend {font-size:.7rem; font-weight:bolder; color:var(--text-muted); margin-bottom:12px; text-transform:uppercase; text-shadow:0 0 1px var(--bs-border-color); border-bottom:1px solid var(--bs-border-color); width:100%;}
.legend-description {margin-top:-12px; margin-bottom:8px; font-size:.75rem; color:var(--text-muted-light);}
.legend-selector {position:absolute; top:0; right:0;}
.legend-selector .nav-pills .nav-link {padding:0 .5rem; font-size:.7rem; font-weight:bolder; text-transform:uppercase; color:var(--text-muted); text-shadow:0 0 1px var(--bs-border-color);}

  
/* ============================== FORMS ============================== */
.form-elegant .mb-100 .col-form-label {font-weight:normal; font-size:.9rem;}
.form-elegant .mb-100 .form-control-static {padding-bottom:0;}
.form-compact .mb-100 {margin-bottom:.25rem;}
.form-compact .mb-100 .form-control-static {padding-top:4px; margin-bottom:0;}
.form-compact-md .mb-100 {margin-bottom:.5rem;}
.form-compact-sm .mb-100 {margin-bottom:0;}
.form-compact-sm .mb-100 .col-form-label {padding-top:calc(.005rem + 1px); padding-bottom:calc(.005rem + 1px);}
.form-compact-sm .mb-100 .form-control-static {padding-top:0; margin-bottom:0;}

  
/* ============================== BADGES ============================== */
.badge-topic,.badge-topic-sm,.badge-topic-more,.badge-topic-more-sm {display:inline-flex; vertical-align:middle; margin-bottom:.25rem; cursor:pointer; border:1px solid var(--bs-border-color); color:var(--text-body); font-weight:normal;}
.badge-topic {padding:.3rem .5rem; background-color:rgba(var(--brand-primary-rgb),.1);}
.badge-topic-sm {padding:.2rem .4rem; background-color:rgba(var(--brand-primary-rgb),.1); font-size:65%;}
.badge-topic-more {padding:.3rem .5rem; background-color:rgba(var(--brand-primary-rgb),.25);}
.badge-topic-more-sm {padding:.3rem .5rem; background-color:rgba(var(--brand-primary-rgb),.25); font-size:65%;}
.badge-topic:hover,.badge-topic-more:hover {background-color:rgba(var(--brand-primary-rgb),.35);}
.badge-topic.active,.badge-topic-more.active {background-color:rgba(var(--brand-contrast-rgb),.75);}
.badge-topic-spaced {margin-bottom:.5rem; margin-right:.25rem;}
.badge-btn,.badge-btn-sm,.badge-btn-lg {display:flex; align-items:center; border-radius:.35rem;}
.badge-btn {height:calc(2.5rem + 2px); padding:0 1rem;}
.badge-btn-sm {height:calc(1.75rem + 2px); padding:0 .75rem;}
.badge-btn-lg {height:calc(3rem + 2px); padding:0 1.25rem;}

.badge.bg-yellow {background-color:var(--bs-warning) !important; color:var(--brand-complimentary) !important;}
.badge.bg-light {background-color:var(--bs-gray-100) !important; color:var(--bs-gray-700) !important;}

/* Topic Badge */
.topic-badge {display:inline-block; border-radius:0.25em; font-size:0.8rem; line-height:13px; padding:0.25em 0.75em; text-align:center; vertical-align:middle; white-space:nowrap; 
		margin-right:4px; margin-bottom:6px; border:1px solid var(--bs-border-color); background-color:var(--brand-surface); }

  
/* ============================== TABLES ============================== */
.table-sortable thead>tr>th,.table-sortable thead>tr>td {height:36px; padding:0; border:none; border-bottom:1px solid var(--bs-border-color); vertical-align:middle;}
.table-sortable thead .sortColName {padding-left:18px;}
.table-sortable tbody>tr:first-child>td {border-top:none;}
.table-sortable thead>tr>th.status-items,.table-sortable thead>tr>td.status-items {text-align:center;}
.table-sortable thead>tr>th.status-items a,.table-sortable thead>tr>td.status-items a {display:inline-block; position:relative; padding:8px 0; width:36px; text-decoration:none;}
.table-feedback input.inlineEditElement.form-control {height:20px;}


/* ============================== FORM ITEMS ============================== 
/* Entity Description */
input.entity-description, textarea.entity-description, textarea.entity-synopsis {margin-bottom:2px; outline:none; font-size:.9rem;
	-webkit-transition:all 0.30s ease-in-out; -moz-transition:all 0.30s ease-in-out; -ms-transition:all 0.30s ease-in-out; -o-transition:all 0.30s ease-in-out;}
	span.entity-name {display:block; min-height:20px; padding:2px 0px;}
	button.entity-name {font-size:1.25rem !important}

	input.entity-description, textarea.entity-description {height:30px}
	textarea.entity-synopsis {height:30px;}

/* Icon Action */
.icon-action {display:inline-block; font-size:1.5rem; padding:2px 10px; cursor:pointer; color:var(--text-muted);}
	.icon-action:hover {color:var(--text-body);}
	
/* Button Apply */
.btn-apply {background-color:var(--brand-surface); border-color:var(--bs-border-color);}
	.btn-apply:hover {background-color:var(--brand-surface-hover,var(--brand-background)); border-color:var(--brand-primary);}
	
/* Input Rows */
label.label-row {display:flex; align-items:center; width:100%; gap:.5rem; cursor:pointer; padding:.25rem .5rem; border-radius:var(--radius-md);}
label.label-row:hover {background-color:rgba(var(--brand-contrast-rgb), .2);}
label.label-row input {margin:0;} /* avoid baseline weirdness */
label.label-row .input-label {align-items:center; flex:1 1 auto; min-width:0;}


/* 	============================  ul.tree  ===========================	
	ul.tree transforms a list element into a hierarchical tree (like a folder structure).  
	It can be combined with form-control to produce a tree element in a form control.  It does not need a wrapper.
*/
ul.tree {margin:0; padding:0px; list-style:none; width:100%;} 
	ul.tree ul {list-style:none; padding:0; margin-left:0.975rem;}
	ul.tree ul ul {margin-left:0.975rem; padding-bottom:0.25rem;}
	ul.tree ul li {background:url(../../images/tree/node.png) no-repeat 0 -16px; padding-left:1rem; padding-bottom:.25rem;}
	ul.tree ul li:not([style*="display:none"]):last-child {background:rgba(var(--brand-surface-rgb),0.001) url(../../images/tree/lastnode.png) no-repeat 0 -108px; padding-left:1.25rem; padding-top:.25rem;}
	ul.tree ul li:not([style*="display:none"]):nth-last-child(2) {padding-bottom:1rem;} 
	ul.tree ul li ul li:not([style*="display:none"]):nth-last-child(2) {padding-bottom:0rem;}

ul.tree .tree-row {display:flex; align-items:center; min-height:2.5em;}

ul.tree .tree-lg {}
	ul.tree.tree-lg .tree-row {height:3em;}
	ul.tree.tree-lg .tree-cell {line-height:1.5em;}
	ul.tree.tree-lg ul li {background:url(../../images/tree/node.png) no-repeat 0 -8px;}
	ul.tree.tree-lg ul li:last-child {background:var(--brand-surface) url(../../images/tree/lastnode.png) no-repeat 0 -102px;}

/* Row styling */
ul.tree .tree-cell {min-width:2rem; justify-content:center; text-align:center;}
	ul.tree .tree-cell i, .icon-selector i.icon-braille, .icon-selector i.icon-reorder {color:var(--text-muted); cursor:pointer;}
	ul.tree .tree-cell i:hover, .icon-selector:hover i.icon-braille, .icon-selector:hover i.icon-reorder {color:var(--text-body);}
	ul.tree .tree-row .tree-cell.icon-selector {}
	ul.tree .tree-cell input[type="checkbox"], ul.tree input[type="radio"] {position:absolute; margin:-3px 0 0 0; cursor:pointer;}
	ul.tree .tree-cell label {margin-bottom:0px; width:100%; cursor:pointer;}

ul.tree .cell-wide {width:100%; text-align:left; position:relative;}
	ul.tree .cell-wide i {cursor:default;}

ul.tree .tree-cell.cell-offset {padding-left:1rem; min-width:2.000rem;}
	ul.tree .tree-cell.cell-offset-sm {padding-left:.5rem; min-width:1.625rem;}
	ul.tree .tree-cell.cell-offset-lg {padding-left:1.5rem; min-width:3.075rem;}
	ul.tree .tree-cell.cell-offset-xl {padding-left:2rem; min-width:3.450rem;}
	
	ul.tree .tree-cell.cell-top {vertical-align:top;}
	ul.tree .tree-cell.cell-sm {min-width:.825rem;}

	/* coloring */
	ul.tree.tree-hover .tree-row:hover {background:rgba(var(--brand-primary-rgb),.05);}
	ul.tree .tree-row.active, ul.tree li.active > .tree-row {background-color:rgba(var(--brand-primary-rgb),.1);}		
	ul.tree .tree-row.active label .input-label {font-weight:bolder;}

ul.tree.form-control {height:auto; padding:10px; padding-top:4px;}


/* 	============================  Cards  ===========================	
	Styles cards  
*/
/* ----- Card Slide Hover ----- */
.card-slide-hover {position:relative; padding-bottom:5px; height:100%; overflow:hidden; box-shadow:0 1px 1px rgba(var(--bs-black-rgb),0.1), 0 2px 2px rgba(var(--bs-black-rgb),0.1); transition:0.15s;}
	.card-slide-hover:hover {color:rgb(var(--brand-primary-rgb)); -webkit-transform:translateY(-5px); transform:translateY(-5px); cursor:pointer;
		-webkit-box-shadow:0 2px 2px rgba(var(--brand-primary-rgb),0.075), 0 4px 4px rgba(var(--brand-primary-rgb),0.075), 0 6px 6px rgba(var(--brand-primary-rgb),0.075), 0 8px 8px rgba(var(--brand-primary-rgb),0.075);
		box-shadow:0 2px 2px rgba(var(--brand-primary-rgb),0.075), 0 4px 4px rgba(var(--brand-primary-rgb),0.075), 0 6px 6px rgba(var(--brand-primary-rgb),0.075), 0 8px 8px rgba(var(--brand-primary-rgb),0.075);}
	a.card-slide-hover {text-decoration:none !important;}

	.card-slide-hover .thumbnail-image {position:relative; display:block; height:8rem; background-size:cover; background-repeat:no-repeat; background-position:center;}
	.card-slide-hover .thumbnail-image:after {content:""; background:var(--brand-contrast); left:0; top:0; width:100%; height:100%; position:absolute; opacity:0; -webkit-transition:.25s; transition:.25s}
	.card-slide-hover:hover .thumbnail-image:after {opacity:.6;}
	
	.card-slide-hover .hover-child:hover {background-color:var(--brand-surface-hover,var(--brand-background)) !important;}
	
	.card-slide-hover figure {overflow:auto;}

/* ----- Card Brief ----- */
.card-brief {position:relative; height:100%; overflow:hidden; box-shadow:0 1px 1px rgba(var(--bs-black-rgb),0.1), 0 2px 2px rgba(var(--bs-black-rgb),0.1); transition:0.15s;
			border-radius:.5rem; -webkit-border-radius:.5rem; -moz-border-radius:.5rem; -ms-border-radius:.5rem; -o-border-radius:.5rem;}
	.card-brief:hover {color:rgb(var(--brand-primary-rgb)); -webkit-transform:translateY(-5px); transform:translateY(-5px);
		-webkit-box-shadow:0 2px 2px rgba(var(--brand-primary-rgb),0.075), 0 4px 4px rgba(var(--brand-primary-rgb),0.075), 0 6px 6px rgba(var(--brand-primary-rgb),0.075), 0 8px 8px rgba(var(--brand-primary-rgb),0.075);
		box-shadow:0 2px 2px rgba(var(--brand-primary-rgb),0.075), 0 4px 4px rgba(var(--brand-primary-rgb),0.075), 0 6px 6px rgba(var(--brand-primary-rgb),0.075), 0 8px 8px rgba(var(--brand-primary-rgb),0.075);}
	a.card-brief {text-decoration:none !important;}
	
	.card-brief .card-header {background-color:var(--bs-white); text-transform:uppercase; font-weight:bold; border-bottom:1px dotted rgba(var(--bs-black-rgb),.125);}
	
	.card-brief .card-body {padding:0;}
		.card-brief .card-body .legend {text-transform:none; padding:.5rem 0 0 1rem; margin-bottom:0; font-weight:normal; border:0;}
		.card-brief .card-body .border-top {border-top-style:dotted !important;}
		.card-brief .card-body .border-bottom {border-bottom-style:dotted !important;}
		
	.card-brief .card-footer {display:flex; justify-content:space-between; align-items:center; background:none; border-top-style:dotted;}

/*----- CARD-INPUT-ELEMENTS ------*/
.card-input-element:checked + .card-input {box-shadow:0 0 1px 1px rgb(var(--brand-primary-rgb)); background:rgba(var(--brand-primary-rgb),.1);}
.card-input-element:checked + .card-input > .icon-radio::before {content:'\e600'} /* icon-ok */
.card-input-element:disabled + .card-input {background-color:var(--bs-gray-300); opacity:.5;}

.card-input-element-lg:checked + .card-input {box-shadow:0 0 3px 3px rgb(var(--brand-primary-rgb)); background:rgba(var(--brand-primary-rgb),.1);}
.card-input-element-lg:disabled + .card-input {background-color:var(--bs-gray-300); opacity:.5;}
 
.category {position:absolute; display:inline-block; z-index:1; border-radius:8px; padding:2px 10px 1px; font-size:.85rem; background:rgba(var(--bs-white-rgb),0.875);
			font-weight:600; left:1rem; top:1rem; max-width:calc(100% - 32px); -webkit-transition:0.35s; transition:0.35s}
	
.resourceType {display:flex; top:.75rem; right:.75rem; align-items:center; border-radius:50%; color:rgb(var(--brand-primary-rgb)); background-color:var(--brand-surface);
				width:2rem; height:2rem; padding:.25rem; font-size:1.1rem; opacity:.9;}
	.resourceType.floatRight {position:absolute;} 
				
.avatars {display:inline-flex; list-style-type:none; margin:auto 0; z-index:1;}
	.avatar {position:relative; border:2px solid var(--bs-white); border-radius:50%; overflow:hidden;}
	.avatar:not(:first-child) {margin-left:-26px;}
	.avatar img {width:100%; display:block;}
	.avatar:nth-child(1) {z-index:9;}
	.avatar:nth-child(2) {z-index:8;}
	.avatar:nth-child(3) {z-index:7;}
	.avatar:nth-child(4) {z-index:6;}
	.avatar:nth-child(5) {z-index:5;}
	.avatar:nth-child(6) {z-index:4;}
	.avatar:nth-child(7) {z-index:3;}
	.avatar:nth-child(8) {z-index:2;}
	.avatar:nth-child(9) {z-index:1;}


/* 	============================  Timeline  ============================ 
 	Formats a list as stacked set of cards along a vertical line
*/

/* Timeline */
.timeline {position:relative; padding-left:44px; /* space for line + dots */ }
	.timeline::before {content:""; position:absolute; left:18px; top:0; bottom:0; width:2px; background:var(--brand-border);}
	.timeline li {list-style-type:none;}	.timeline li .card li {list-style-type:disc;}
	.timeline .step {position:relative; margin-block:var(--brand-surface);}
	.timeline .marker {position:absolute; left:-34px; top:28px; width:18px; height:18px; border-radius:50%; background:var(--brand-border);}
	.timeline .card {position:relative; border:2px solid var(--brand-border)}
	.timeline .card::before { /* little triangle pointer */ content:""; position:absolute; left:-12px; top:28px; border-width:8px 12px 8px 0; border-style:solid; border-color:transparent var(--brand-surface) transparent transparent; filter:drop-shadow(-1px 1px 0 var(--brand-border));}


/* 	============================  progressCircle  =========================== */
.progressCircle {position:relative; display:table;}

svg.progressRing {width:40px; height:40px;}
	svg.progressRing circle {width:100%; height:100%; fill:none; stroke-width:3; stroke-linecap:round; stroke-dasharray:113px;}

.progressCircle .progressLabel {position:absolute; top:31%; left:25%; color:rgba(var(--brand-primary-rgb),.85);}

.progressCircle.pending {}
	.progressCircle.pending svg.progressRing circle {stroke:var(--bs-border-color); fill:var(--bs-border-color);}
	.progressCircle.pending .progressLabel {color:var(--text-muted);}

.progressCircle.inProgress {}
	.progressCircle.inProgress svg.progressRing circle {stroke:rgb(var(--brand-primary-rgb)); fill:var(--brand-surface);}
	.progressCircle.inProgress .progressLabel {color:rgba(var(--brand-primary-rgb),.85);}

.progressCircle.danger {}
	.progressCircle.danger svg.progressRing circle {stroke:rgb(var(--brand-primary-rgb)); fill:var(--bs-danger);}
	.progressCircle.danger .progressLabel {color:rgb(var(--brand-primary-rgb));}

.progressCircle.awaiting {}
	.progressCircle.awaiting svg.progressRing circle {stroke:var(--brand-contrast); fill:var(--brand-contrast);}
	.progressCircle.awaiting .progressLabel {color:var(--text-muted);}

.progressCircle.completed {}
	.progressCircle.completed svg.progressRing circle {stroke:var(--bs-success); fill:var(--bs-success);}
	.progressCircle.completed .progressLabel {color:var(--bs-white);}

	
/* 	============================  Status Items  ============================ 
 	Formatting the status icons
*/
table td.status-item {width:2.75rem; padding:0; font-size:1.75rem; text-align:right; vertical-align:middle;}
	table td.status-item .icon-pending {color:var(--bs-warning);}
	table td.status-item .icon-inProgress {color:var(--bs-info);}
	table td.status-item .icon-completed, table td.status-item .icon-accepted, table td.status-item .icon-closed {color:var(--bs-success);}
	table td.status-item .icon-rejected, table td.status-item .icon-discarded {color:var(--bs-danger);}
	table td.status-item .icon-paused, table td.status-item .icon-highlighted {color:var(--bs-danger);}

table td.action-item {padding:0px; vertical-align:middle !important; text-align:right; width:4rem;}

.table tbody > tr > th.status-items, .table tbody > tr > td.status-items {padding:0px; text-align:center; vertical-align:middle;}
	td.status-items > a > [class^="icon-"] {font-size:2em; cursor:default;}
	th.status-items > a > [class^="icon-"] {font-size:2em;}

li.status-items > a {}
	li.status-items > a > i {display:table-cell; vertical-align:middle; font-size:1.25rem;}
	li.status-items > a > span {display:table-cell; vertical-align:middle; padding:6px;}
	i.status-items {font-size:1rem;}

	.status-items .icon-pending, .status-items.icon-pending, .status-items, .status-pending {color:var(--bs-warning);}

	.status-items .icon-inProgress, .status-items.icon-inProgress {color:var(--bs-info);}
	
	.status-items .icon-completed, .status-items.icon-completed, 
		.status-items .icon-accepted, .status-items.icon-accepted,
		.status-items .icon-closed, .status-items.icon-closed {color:var(--bs-success);}

	.status-items .icon-rejected, .status-items.icon-rejected,
		.status-items .icon-discarded, .status-items.icon-discarded {color:var(--bs-danger);}

	.status-items .icon-paused, .status-items.icon-paused, 
		.status-items .icon-highlighted, .status-items.icon-highlighted {color:var(--bs-danger);}

	.status-items .icon-draft {color:var(--text-muted);}
	.status-items .icon-published {color:var(--bs-info);}
	.status-items .icon-archived {color:var(--text-body);}
	
	.status-items .icon-text {display:block; margin-left:10px; border-radius:50%; width:24px; height:24px; background-color:var(--text-muted);}
	.status-items .icon-text .text {color:var(--bs-white); font-weight:bolder; font-size:0.8rem; line-height:24px;}


/* 	================== Entity definitions  ==================
	Styling for all livanto entities, including single or listing of posts that can be used in combination with ui-group-buttons
*/
.entity {padding:1rem;} 
	.entity-name, .entity-name input.input-borderless {font-size:1.25rem; font-weight:bolder; color:var(--text-body);}
		.entity-name .input-group-text.input-borderless {font-size:.85rem; font-weight:normal;}
	.entity-definition, .entity-definition input.input-borderless {color:var(--text-muted);}
	.entity-description {margin-bottom:16px;}
	.entity-synopsis {padding:12px 20px; margin:20px 0px 26px 0px; min-height:72px; border-top:1px solid var(--bs-border-color); border-bottom:1px solid var(--bs-border-color);}
	.entity-meta {border-left:5px solid var(--brand-surface); padding:10px 20px; margin-bottom:20px; font-style:italic;}
	.entity-legend {font-size:0.9rem; color:var(--text-muted); font-variant:small-caps; margin-bottom:4px; font-style:normal;}
	.entity-source {margin-left:15px;} .entity-source .form-control {font-size:0.9rem;}
	
	.entity-info {font-size:0.8rem; color:var(--text-muted); margin:4px 0px; font-style:italic;}
	.entity-body {color:var(--text-body); margin-top:6px; margin-bottom:12px;}
		.entity-body p {font-size:1rem;}
	
	.entity-authorship {padding:0 0 5px 5px;}
		.entity-author {line-height:22px; font-weight:bolder; margin-left:45px;}
		.entity-author-info {line-height:16px; font-size:.85rem; color:var(--text-muted); margin-left:45px;}
		img.author-image {float:left; height:32px; width:32px; margin:4px 8px 0 0; background-color:var(--text-muted);}

	.entity-comment {border-left:5px solid var(--brand-surface); padding:1rem; margin-top:1.25rem;}
	.entity-rating {font-size:0.7rem; margin-left:10px; border:1px solid var(--bs-border-color); color:var(--text-muted); border-radius:3px; padding:2px 4px; vertical-align:text-top; cursor:default}
	.entity-count {border-left:1px solid var(--text-muted); font-weight:bolder; margin-left:4px; padding-left:8px;}
	.entity-actions {display:inline-block;}
	.entity-status {float:right; height:32px; width:32px; margin:6px 4px 0 0;}
		.entity-status i {font-size:28px;}

	.entity-expand {border:1px solid var(--bs-border-color); border-radius:4px; padding:0 4px; margin-left:10px; cursor:pointer;}
		.entity-expand:hover {background:var(--brand-surface); border-color:var(--bs-border-color);}

	.entity-expand-paragraph {display:table; margin-top:1.5rem; cursor:pointer; background-color:var(--bs-white); border:1px solid var(--bs-border-color); border-radius:.2rem;}
		.entity-expand-paragraph:hover {background:rgba(var(--brand-contrast-rgb),.85); border-color:var(--bs-border-color);}
		
	.entity.active {background-color:var(--brand-surface);}
		.entity.active .action-items i.icon-right, .entity.active .entity-name {color:var(--text-body);}
	
	.subEntity {padding:30px 0px; border-bottom:1px solid var(--bs-border-color);}
		.entity-subName {font-size:1.25rem; font-weight:bolder; color:var(--text-body); min-height:36px; line-height:1.2em; padding-top:4px;}
		
	.mb-100.entity-name, .mb-100.entity-definition, .mb-100.entity-synopsis, .mb-100.entity-body {margin-bottom:0px;} 


/* 	================== Cover Background  ================= */
.cover {}
	.cover-background {
		background-color:var(--brand-primary-dark);
		background-position:center bottom; background-repeat:no-repeat; background-size:cover;
	 	position:relative; min-height:250px; height:100%; width:100%; margin-bottom:0; z-index:1;
	 	text-align:center; vertical-align:middle;
	 	
	 	display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex;
		-webkit-box-pack:center; -webkit-box-align:center; -moz-box-align:center; -ms-flex-pack:center; -ms-flex-align:center;
		-webkit-flex-pack:center; -webkit-flex-align:center; -webkit-align-items:center; align-items:center;
		-ms-flex-direction:column; -webkit-flex-direction:column; flex-direction:column;
		-webkit-justify-content:center; justify-content:center;
	}
	.cover-background-opacity {position:absolute; background-color:var(--brand-primary); opacity:0.85; height:100%; width:100%; top:0; bottom:0; left:0; right:0; z-index:0;}
	.cover-background-opacity-light {position:absolute; background-color:var(--brand-primary); opacity:0.35; height:100%; width:100%; top:0; bottom:0; left:0; right:0; z-index:0;}
	.cover-background-tint {background:radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.45) 100%); background-size:cover; background-position:center;}
	
	.cover-banner {width:100%; z-index:2; color:var(--bs-white); line-height:1.25;}
	.cover-footer-left {position:absolute; left:25px; bottom:25px;}
	.cover-footer-right {position:absolute; bottom:2rem; text-align:right; color:var(--bs-white); z-index:2;}
		.cover-footer-right a, .cover-footer-right a:active, .cover-footer-right a:visited {color:var(--bs-white); text-shadow:-1px -1px 0 rgb(var(--brand-primary-rgb)), 1px -1px 0 rgb(var(--brand-primary-rgb)), -1px 1px 0 rgb(var(--brand-primary-rgb)), 1px 1px 0 rgb(var(--brand-primary-rgb));}
		.cover-footer-right a:hover, .cover-footer-right a:focus {color:var(--brand-surface-hover,var(--brand-background));}


/* 	================== Log definitions  ==================
	Styling for activity logging
*/
.log-panel {display:table; table-layout:fixed; width:100%;}
	.log-panel .row {display:table-row;}
	.log-panel .col {display:table-cell;}

	.log-panel .entry-image {width:2.25rem; vertical-align:middle; padding:.15rem 0 0 0;}
		.log-panel .entry-image img {margin-top:-2px;}
	.log-panel .entry-creator {width:10rem; font-size:.9rem; font-weight:600; vertical-align:middle; line-height:1.1; padding:.5rem 0;}
		.log-panel .entry-creator:hover {cursor:pointer; color:var(--text-body);}
	.log-panel .entry-action {width:7rem; text-align:center; vertical-align:middle; padding:0;}
	.log-panel .entry-details {vertical-align:middle; padding:.25rem .5rem;}
	.log-panel .entry-date {width:6rem; margin-left:.5rem; text-align:center; vertical-align:middle; padding:0;}
	
	/* log-link gives styling to foreign entities included in log messages */
	.log-panel .log-link {quotes:"«" "»"; font-variant:small-caps; line-height:1.2rem;}		/* « = «  » = »*/
		.log-panel .log-link:before {content:open-quote;}
		.log-panel .log-link:after {content:close-quote;}


/* 	==================== Horizontal Rulers ====================  */
hr.soften {height:1px; margin:15px 0; border:0;
	background:linear-gradient(90deg, rgba(var(--brand-divider-rgb),0) 0%, rgba(var(--brand-divider-rgb),0.6) 20%, rgba(var(--brand-divider-rgb),0.6) 80%, rgba(var(--brand-divider-rgb),0) 100%);}
	hr.soften-xs {margin:.5rem 0;}
	hr.soften-sm {margin:.75rem 0;}
	hr.soften-lg {margin:2rem 0;}
	hr.soften-xl {margin:3rem 0;}

hr.soften-surface {height:1px; margin:15px 0; border:0; background-image:-webkit-linear-gradient(left, transparent, rgba(var(--brand-surface-rgb),.25), transparent); background-image:-moz-linear-gradient(left, transparent, rgba(var(--brand-surface-rgb),.25), transparent); background-image:-ms-linear-gradient(left, transparent, rgba(var(--brand-surface-rgb),.25), transparent); background-image:-o-linear-gradient(left, transparent, rgba(var(--brand-surface-rgb),.25), transparent);}

hr.circle-icon {display:block; position:relative; border:none; height:20px; margin:3rem; background-repeat:no-repeat; background-position:50% 50%; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23CBD3DB%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%2F%3E%3C%2Fsvg%3E");}
	hr.circle-icon::before, hr.circle-icon::after {content:""; position:absolute; top:50%; border-bottom:1px solid rgba(var(--brand-divider-rgb),1);}
	hr.circle-icon::before {right:calc(50% + 25px); width:100%;}
	hr.circle-icon::after {left:calc(50% + 25px); width:100%;}


/* 	==================== RANDOM ====================  */
.cookie-alert {background:var(--brand-surface); color:var(--text-body); max-width:420px; border:1px solid var(--bs-border-color); border-radius:6px; padding:2rem; min-height:150px;
	opacity:.975; cursor:default; box-shadow:0 4px 4px rgba(var(--bs-black-rgb),0.1), 0 0 0 1px rgba(var(--bs-black-rgb),0.08);}