/**
 *  Full width with sidebar(s)
*/
header {
	height: 80px;
}

#main-sidebar-static-wrapper,
#content-wrapper {
	height: calc(100vh - 120px); 
	overflow-y: scroll;
}

.sidebar-nav {
	width: 470px;
	padding: 1rem;
}

/**
 *  Loading overlay
*/

/**.hidden {
  display: none !important;
}*/

div.loading{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(16, 16, 16, 0.5);
  z-index: 1001;
}

@-webkit-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes uil-ring-anim {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.uil-ring-css {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 200px;
}
.uil-ring-css > div {
  position: absolute;
  display: block;
  width: 160px;
  height: 160px;
  top: 20px;
  left: 20px;
  border-radius: 80px;
  box-shadow: 0 6px 0 0 #ffffff;
  -ms-animation: uil-ring-anim 1s linear infinite;
  -moz-animation: uil-ring-anim 1s linear infinite;
  -webkit-animation: uil-ring-anim 1s linear infinite;
  -o-animation: uil-ring-anim 1s linear infinite;
  animation: uil-ring-anim 1s linear infinite;
}

/**
 *  Loading overlay
*/

#notifications-area .alert {
	overflow-wrap: break-word;
}

#notes-table td p {
	margin-bottom: 0;
}

.cursor-hand {
	cursor: pointer;
}

.layer-info {
	/*border-top: 1px solid var(--bs-secondary);
	padding-top: 1rem;
	margin-top: 1rem;*/
}

.layer-info .alert {
	padding: 0.5em 1em 0.5em 1em;
	font-size: 90%;
}

.layer-info .alert .layer-selector {
	margin-right: 0.5rem;
}

.editor-hint {
	font-size: 90%;
	padding: 0.5rem 0.75rem;
}

.selected-suggestion {
	font-size: 90%;
}

.hierarchical-property-table > caption {
	display: none;
}

.form-check-input.form-vocabulary-select-item {
	margin-left: 0.5em;
}

.form-check-input {
    border: 1px solid var(--bs-primary);
}

.layered-content {
	color: green;
}

.form-control-plaintext, 
.property-preview {
	word-break: break-word;
}

.property-modification-buttons .btn-link {
	text-decoration: none;
}

.property-layer-container span.property-value+span.property-value::before {
	content: "\F63B"; /* Unicode for the icon */
	
	display: inline-block;
	font-family: "bootstrap-icons" !important;
	font-style: normal;
	font-weight: normal !important;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	vertical-align: -.125em;
	color: var(--bs-secondary);
}

ul.layer-hierarchical-property {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

ul.layer-hierarchical-property li {
    position: relative;
    padding-left: 1rem;
}

ul.layer-hierarchical-property li::before {
    content: "\F479";/*"•";*/
    position: absolute;
    left: 0;
    color: var(--bs-secondary);
    
    font-family: "bootstrap-icons" !important;
	font-style: normal;
	font-weight: normal !important;
	font-variant: normal;
	text-transform: none;

	color: var(--bs-secondary);
}


/*
 * Uncomment for debugging placement of validation messages 
 *
.invalid-feedback {
	display: block;
}
.invalid-feedback::before {
	content: "some text goes here";
}
*/

/** ====================================================================
 *	  Home
 *  ==================================================================== */

.home-entity-flex {
	background-color: var(--bs-white);
	margin: 0.5em;
}

.home-entity-flex a {
    display: block;	
	border: var(--bs-border-width) var(--bs-border-style);
	border-radius: var(--bs-border-radius);
}

.home-entity-flex-primary a {
	color: var(--bs-primary);
	border-color: var(--bs-primary);
	padding: 2em 4em;
}

.home-entity-flex-primary a .badge {
	color: var(--bs-white);
	background-color: var(--bs-primary);
}

.home-entity-flex-primary a:hover {
	background-color: var(--bs-primary);
	color: var(--bs-white);
}

.home-entity-flex-primary a:hover .badge {
	color: var(--bs-primary);
	background-color: var(--bs-white);
}

.home-entity-flex-secondary a {
	color: var(--bs-tertiary);	
	border-color: var(--bs-tertiary);
	padding: 1.5em 3em;
}

.home-entity-flex-secondary a .badge {
	color: var(--bs-white);
	background-color: var(--bs-tertiary);
}

.home-entity-flex-secondary a:hover {
	background-color: var(--bs-tertiary);
	color: var(--bs-white);
}

.home-entity-flex-secondary a:hover .badge {
	color: var(--bs-tertiary);
	background-color: var(--bs-white);
}


/** ====================================================================
 *	  (Primary) data tables
 *  ==================================================================== */

.data-tables-table {
	overflow-x: scroll;
}

.primary-table.table-bordered {
	border-color: var(--bs-primary);
	border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-primary);
}

.primary-table.table-bordered thead th {
	background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
	border: var(--bs-border-width) var(--bs-border-style) var(--bs-primary);
}

.search-panes-container {
	border: var(--bs-border-width) var(--bs-border-style) var(--bs-secondary);
	border-radius: var(--bs-border-radius);
	margin-bottom: 0.5rem;
	padding: 0.25rem 0.5rem 0 0.5rem;
}

/** ====================================================================
 *	  Import
 *  ==================================================================== */
#imported-resources {
  max-height: 400px;
  overflow-y: auto;
} 


#imported-resources > .import-result-list {
	padding-left: 0;
}

.import-result-list, .property-values {
	list-style: none
}

.property-label {
	font-weight: bold;
}

.property-resolved-value {
	font-style: italic;
}

.custom-tooltip-primary {
  --bs-tooltip-bg: var(--bs-primary);
  --bs-tooltip-color: var(--bs-white);
}

.custom-tooltip-info {
  --bs-tooltip-bg: var(--bs-info);
  --bs-tooltip-color: var(--bs-black);
}

.custom-tooltip-warning {
  --bs-tooltip-bg: var(--bs-warning);
  --bs-tooltip-color: var(--bs-black);
}


.custom-tooltip-danger {
  --bs-tooltip-bg: var(--bs-danger);
  --bs-tooltip-color: var(--bs-white);
}

/** ====================================================================
 *	  Form Blocks
 *  ==================================================================== */
.form-block {
	border: var(--bs-border-width) var(--bs-border-style) var(--bs-primary);
	border-radius: var(--bs-border-radius);
	margin-bottom: 0.5rem;
}

.form-block legend {
	border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-primary);
	margin-bottom: 0.5rem;
	background-color: var(--bs-primary);
    color: var(--bs-white);
    padding-right: 1rem;
    padding-left: 1rem;
}

.form-block legend h3 {
	margin-top: 0.5rem;
}

/** ====================================================================
 *	  Hints
 *  ==================================================================== */
.input-hint {
	font-size: 85%;
	color: var(--bs-primary);
	font-style: italic;
}

.input-hint::before {
	content: "\f4be";
  	font-family: "bootstrap-icons";
  	font-style: normal;
  	font-weight: normal;
  	font-variant: normal;
  	margin-right: 0.25rem;
  	vertical-align: -0.125em;
}
 

/** ====================================================================
 *	  Typeahead
 *  ==================================================================== */

.tt-menu {
  max-height: 300px;
  overflow-y: auto;
} 

.selected-suggestion ul,
ul.tt-suggestion {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.selected-suggestion .suggestion-label,
.tt-suggestion .suggestion-label {
	font-size: 90%;
	font-weight: normal;
	padding-right: 0.5em;
	text-align: right;
}
 
.input-group > .twitter-typeahead {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
 /* Copied => adapt */
 .twitter-typeahead,
 .tt-hint,
 .tt-input,
 .tt-menu {
 	width: 100%;
 }

 span.twitter-typeahead .tt-menu {
 	cursor: pointer;
 }

 .dropdown-menu,
 span.twitter-typeahead .tt-menu {
 	position: absolute;
 	top: 100%;
 	left: 0;
 	z-index: 1000;
 	display: none;
 	float: left;
 	min-width: 160px;
 	padding: 5px 0;
 	margin: 2px 0 0;
 	font-size: 0.9rem;
 	color: #373a3c;
 	text-align: left;
 	list-style: none;
 	background-color: #fff;
 	background-clip: padding-box;
 	border: 1px solid var(--bs-primary);
 	border-radius: 0.25rem;
 }

 span.twitter-typeahead .tt-suggestion, 
 span.twitter-typeahead .empty-message {
 	display: block;
 	width: 100%;
 	padding: 5px 10px;
 	clear: both;
 	font-weight: normal;
 	line-height: 1.5;
 	color: #373a3c;
 	text-align: inherit;
 	/*white-space: nowrap;*/
 	background: none;
 	border: 0;
 }

 span.twitter-typeahead .tt-suggestion:focus,
 .dropdown-item:hover,
 span.twitter-typeahead .tt-suggestion:hover {
 	color: var(--bs-white);
 	text-decoration: none;
 	background-color: var(--bs-primary);;
 }

 span.twitter-typeahead .active.tt-suggestion,
 span.twitter-typeahead .tt-suggestion.tt-cursor,
 span.twitter-typeahead .active.tt-suggestion:focus,
 span.twitter-typeahead .tt-suggestion.tt-cursor:focus,
 span.twitter-typeahead .active.tt-suggestion:hover,
 span.twitter-typeahead .tt-suggestion.tt-cursor:hover {
 	color: #fff;
 	text-decoration: none;
 	background-color: #0275d8;
 	outline: 0;
 }

 span.twitter-typeahead .disabled.tt-suggestion,
 span.twitter-typeahead .disabled.tt-suggestion:focus,
 span.twitter-typeahead .disabled.tt-suggestion:hover {
 	color: #818a91;
 }

 span.twitter-typeahead .disabled.tt-suggestion:focus,
 span.twitter-typeahead .disabled.tt-suggestion:hover {
 	text-decoration: none;
 	cursor: not-allowed;
 	background-color: transparent;
 	background-image: none;
 	filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)";
 }

 span.twitter-typeahead {
 	width: 100%;
 }

 .input-group span.twitter-typeahead {
 	display: block !important;
 }

 .input-group span.twitter-typeahead .tt-menu {
 	top: 2.375rem !important;
 }