:root {
	--main-color: rgba(0, 130, 200);
	--main-color-darker: rgba(0, 105, 172);
	--second-color: rgba(0, 163, 251);
	--color-light-grey: #DCDCDC;
	--color-white: rgba(255, 255, 255);
	--color-grey: rgba(20, 20, 20);
	--black-box-10-shadow: rgba(0, 0, 0, 0.2);
	--text-shadow-12-trans: rgba(0, 0, 0, 0.12);
	--black-box-50-shadow: rgba(0, 0, 0, 0.5);
	--color-h1: var(--main-color);
	--color-h2: rgba(0, 130, 200, 0.9);
	--color-h3: rgba(0, 130, 200, 0.8);
	--color-h4: rgba(0, 130, 200, 0.7);
	--color-selected-on-menu: black;
	--inbox-28-shadow: rgba(255, 255, 255, 0.28);
	--box-sahow-17-trans: rgba(255, 255, 255, 0.17);
	--menu-2n-color: rgba(167, 114, 166, 0.5);
	--color-contains: rgba(255, 166, 0);
	--color-contains-error: red;
}

@font-face {
	font-family: 'UniversalisADFStdRegular';
	src: url('../fonts/UniversalisADFStd-Regular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

html {
	margin: 0px;
	height: calc(100%);
	padding: 0px;
}

body {
	margin: 0px;
	height: 100%;
	padding: 0px;
	font-family: 'Open Sans', sans-serif;
}

.jsClient .headline {
	color: #575757;
}

.jsClient .text {
	color: #575757;
}

h1, .h1TextStyle {
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.jsClient h2, .jsClient .h2TextStyle {
	color: var(--color-white);
	letter-spacing: 2px;
}

.header select {
	float: right;
	margin-top: .4rem;
}

.holder.tool {
	background-color: var(--second-color);
	display: flex;
	min-height: 5rem;
	position: absolute;
	overflow: hidden;
	z-index: 1010;
	top: 3rem;
	right: 1rem;
	min-width: 13rem;
	flex-direction: column;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
	padding: 0.4em 0 0.4em 0;
	border-radius: 5px 5px;
}

.holder.tool:before {
	background: url("../images/icons3.svg") no-repeat scroll;
	content: "";
	background-position: -144px -0px;
	opacity: .4;
	height: 16px;
	width: 16px;
	transform: scale(10, 10);
	position: absolute;
	right: 4.5rem;
	top: 5rem;
	z-index: -1;
}

.holder {
	/* 	needed for tests to see that it is visible */
	min-height: 1px;
	min-width: 1px;
	display: inline-block;
}

.holder.tool input {
	margin: 1rem;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
}

.jsClient.mainView {
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-template-rows: max-content minmax(0, 1fr);
	grid-template-areas: "header header" "sideBar workArea";
	height: 100%;
	border-color: var(--main-color);
	position: relative;
	/* 	overflow: hidden; */
	background: linear-gradient(to bottom, #f2f2f2 0%, #f9fafb 100%);
}

.progress {
	height: 1rem;
	width: 50%;
	margin: 1rem;
}

.jsClient>.header {
	grid-area: header;
	height: 3rem;
	font-size: 2.5rem;
	text-align: center;
	font-family: 'UniversalisADFStdRegular';
	color: white;
	border-color: inherit;
	background:  linear-gradient(to bottom,var(--main-color),var(--main-color-darker));
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.5rem;
	border-bottom: 1px solid var(--second-color);
}

.jsClient>.header .menuView {
	display: block;
	float: left;
	height: auto;
	font-size: 1.2rem;
	text-align: center;
	color: white;
	border-bottom: none;
	border-color: inherit;
	padding-left: 1rem;
	cursor: pointer;
	position: relative;
	margin-top: .5rem;
	text-shadow: none;
}

.jsClient>.header .menuView.uploading::before {
	background: url("../images/icons3.svg") no-repeat scroll -79px 0px;
	content: "";
	height: 16px;
	width: 16px;
	opacity: 1;
	position: absolute;
	transition: opacity 0.5s ease 0s;
	z-index: 100;
	top: 3px;
	right: 2px;
	animation: rotation2 2s linear;
	animation-iteration-count: infinite;
}

@keyframes rotation2 {
	from { 
		transform:rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}
.iconButton.loginManagerView {
	transform: none;
	font-size: 1.2rem;
	float: right;
	margin-right: 1rem;
	margin-top: .5rem;
	cursor: pointer;
}

.iconButton.loginManagerView:before, .iconButton.loginManagerView:after
	{
	background: none;
}

.holder.loginManagerView {
	position: absolute;
	z-index: 1015;
	background: var(--color-white);
	padding: 10px;
	/*Calculation of headers height*/
	top: calc(3rem + 9px);
	right: 0rem;
	box-shadow: -10px 10px 10px var(--black-box-10-shadow);
	border-radius: 0px 0px 4px 4px;
}

.holder.loginManagerView .menuOption:hover {
	color: var(--main-color);
}

.loginManagerView .menuOption {
	display: block;
	cursor: pointer;
	padding: 5px;
}

.jsClient>.sideBar {
	grid-area: sideBar;
	overflow: auto;
	border-right: 1px solid;
	border-color: inherit;
	color: var(--color-grey);
	background: var(--color-white);
	display: inline-block;
	padding: 0rem .5rem;
	width: 20rem;
	border-left: 1px solid;
}

.openGuiItemHandlerView, .searchesView {
	border-bottom: 1px solid;
	display: block;
}

.openGuiItemHandlerView {
	padding-top: .5rem;
	padding-bottom: 1rem;
}

.openGuiItemHandlerView .header {
	font-weight: bold;
}

.sideBar .openGuiItemHandlerView>.header, .searchesViewHeadline,
	.recordTypeGroupHeadline {
	color: var(--main-color);
	font-size: 1.1rem;
	font-weight: bold;
	margin-top: 1rem;
	position: relative;
	border-bottom: none;
	letter-spacing: -1px;
}

.searchesView {
	padding-bottom: 1rem;
}

.searchesViewHeadline {
	margin-left: 1.5rem;
}

.searchesViewHeadline::before {
	background: url("../images/icons3.svg") no-repeat scroll;
	content: "";
	background-position: -224px -32px;
	opacity: 1;
	height: 16px;
	width: 16px;
	transform: scale(1, 1);
	position: absolute;
	left: -1.5rem;
	top: .4rem;
}

.recordTypesView>.recordTypeGroup {
	display: block;
	border-color: inherit;
	margin-bottom: 1rem;
	margin-top: 1rem;
	width: 100%;
	position: relative;
	font-weight: bold;
}

.openGuiItemHandlerView>.recordType, .recordTypesView .recordType,
	.searchesView>.searchRecord {
	display: block;
	border-color: inherit;
	width: 100%;
	position: relative;
	font-weight: normal;
}

.openGuiItemHandlerView>.header, .recordTypesView>.header {
	padding: .2rem;
}

.openGuiItemHandlerView .changed:before, .recordTypesView .changed:before
	{
	content: "* ";
}

.sideBar .menuView {
	min-height: 1rem;
	position: relative;
}

.sideBar .menuView:nth-child(2n) {
	background-color: rgba(0, 130, 201, 0.1);
}

.sideBar .menuView>.removeButton {
	position: absolute;
	right: 0px;
	top: 2px;
}

.sideBar .header {
	margin-bottom: 1rem;
	margin-left: .5rem;
	border-bottom: 1px dashed;
	border-color: inherit;
}

.sideBar .header.clickable:hover, .sideBar .childrenView .menuView:hover
	{
	text-decoration: underline;
	cursor: pointer;
	color: var(--main-color);
}

.openGuiItemHandlerView .childrenView span, .openGuiItemHandlerView .childrenView div,
	.recordTypesView .childrenView span, .recordTypesView .childrenView div
	{
	text-decoration: inherit;
}

.sideBar .childrenView {
	display: block;
	width: 100%;
	border-color: inherit;
	background-color: rgba(180, 216, 216, 0.07);
	font-size: .8rem;
}

.sideBar .childrenView>span {
	border-left: 1px solid;
	border-right: 1px solid;
	border-color: inherit;
	padding: .2rem;
	padding-left: .4rem;
}

.sideBar .childrenView>span:nth-child(even) {
	border-color: inherit;
}

.sideBar .childrenView>span:last-child {
	border-bottom: 1px solid;
	border-color: inherit;
}

.sideBar .active, .header .active {
	font-weight: bold;
}

.sideBar .childrenView .active::after {
	content: ">";
	position: absolute;
	left: -.6rem;
}

.jsClient .sideBar .openGuiItemHandlerView [class*="indicatorClassName"]
	{
	padding-left: 0.7rem;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName1 {
	box-shadow: 0px 0px black inset, .5rem 0 #C5C5C5 inset;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName2 {
	box-shadow: 0px 0px black inset, .5rem 0 #e74c3c inset;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName3 {
	box-shadow: 0px 0px black inset, .5rem 0 #c0392b inset;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName4 {
	box-shadow: 0px 0px black inset, .5rem 0 #FF7F50 inset;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName5 {
	box-shadow: 0px 0px black inset, .5rem 0 #F0AD4E inset;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName6 {
	box-shadow: 0px 0px black inset, .5rem 0 #f39c12 inset;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName7 {
	box-shadow: 0px 0px black inset, .5rem 0 #FFD700 inset;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName8 {
	box-shadow: 0px 0px black inset, .5rem 0 #5CB85C inset;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName9 {
	box-shadow: 0px 0px black inset, .5rem 0 #2ecc71 inset;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName10 {
	box-shadow: 0px 0px black inset, .5rem 0 #20B2AA inset;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName11 {
	box-shadow: 0px 0px black inset, .5rem 0 #5BC0DE inset;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName12 {
	box-shadow: 0px 0px black inset, .5rem 0 #0275D8 inset;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName13 {
	box-shadow: 0px 0px black inset, .5rem 0 #9370DB inset;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName14 {
	box-shadow: 0px 0px black inset, .5rem 0 #9b59b6 inset;
}

.jsClient .sideBar .openGuiItemHandlerView .indicatorClassName15 {
	box-shadow: 0px 0px black inset, .5rem 0 #000000 inset;
}

.openGuiItemHandlerView .menuView, .recordTypesView .recordType  span,
	.searchesView>.searchRecord  span {
	display: block;
}

.jsClient>.workArea {
	grid-area: workArea;
	height: 100%;
	width: 100%;
}

.workArea .workView {
	display: block;
	width: 100%;
	height: 100%;
	overflow: auto;
	position: relative;
}

.editView>.presentation, .showView>.presentation {
	padding-bottom: 1rem;
}

.workArea .workView>.workItem {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	height: 100%;
	align-content: flex-start;
}

.workArea .workView>.workItem.recordHandler {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: max-content minmax(0, 1fr);
	grid-template-areas: "topBar topBar" "editView showView";
}

@media(max-width:74em){
	.workArea .workView>.workItem.recordHandler {
		grid-template-columns: 1fr;
		grid-template-rows: max-content minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "topBar" "editView" "showView";
	}
}

.workArea .workView>.workItem.search {
	overflow-y: scroll;
}

.workArea .workView>.resultHolder {
	overflow-y: scroll;
}

.topBar {
	grid-area: topBar;
	height: 2rem;
	border-bottom: 1px solid var(--main-color);
}

.topBar .iconButton {
	transform: scale(1.3, 1.3);
	top: 0.5rem;
	right: 0.5rem;
}

.jsClient .serverAddress {
	font-size: 0.7em;
	color: #575757;
}

.jsClient .workItem>.searchFormHolder {
	flex: 0 0 100%;
}

.jsClient .editView, .jsClient .showView {
	overflow: scroll;
}

.jsClient .editView {
	grid-area: editView;
}

.jsClient .showView {
	grid-area: showView;
}

.jsClient .workItem>.buttonView {
	position: absolute;
	bottom: 0rem;
	right: 1rem;
	background-color: var(--main-color);
	padding: 0.2rem 0.2rem 0.2rem 0.2rem;
	z-index: 1009;
}

.jsClient .workItem>.incomingLinksView {
	box-shadow: -3px -3px 6px rgba(0, 0, 0, 0.2);
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: #f6f6f7;
	height: 30%;
	z-index: 12;
	overflow: auto;
}

.jsClient .incomingLink:hover {
	background-color: rgba(0, 130, 201, 0.1);
	cursor: pointer;
}

.jsClient  .incomingLinksList, .jsClient .incomingLinks, .jsClient .incomingLink
	{
	display: flex;
	flex: 0 0 100%;
	flex-wrap: wrap;
}

.jsClient .incomingLink span {
	flex: 1 1 20%;
}

.workArea .workView .presentation {
	box-shadow: none;
}

.workArea .childrenView>.workItem {
	display: inline;
	position: relative;
}

.openGuiItemHandlerView .menuView div, .jsClient .openGuiItemHandlerView .menuView span,
	.recordTypesView .menuView div, .jsClient .recordTypesView .menuView span
	{
	display: inline;
	border: none;
	padding: 0;
	background: none;
	box-shadow: none;
	margin: 0;
}

.openGuiItemHandlerView .menuView .pVar span, .jsClient .openGuiItemHandlerView .menuView .text,
	.recordTypesView .menuView .pVar span, .jsClient .recordTypesView .menuView .text
	{
	max-width: 95%;
	overflow: hidden;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: pre;
}

.openGuiItemHandlerView [class*='recordInfo'] .pVar span:before,
	.recordTypesView [class*='recordInfo'] .pVar span:before {
	content: "(";
}

.openGuiItemHandlerView [class*='recordInfo'] .pVar span:after,
	.recordTypesView [class*='recordInfo'] .pVar span:after {
	content: ")";
}

.openGuiItemHandlerView [class*='recordInfo'] .pVar span,
	.recordTypesView [class*='recordInfo'] .pVar span {
	padding-right: 1rem;
	max-width: 70%;
	overflow: hidden;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: pre;
}

.openGuiItemHandlerView .recordType .buttonView, .recordTypesView .recordType .buttonView
	{
	min-width: 20px;
	min-height: 20px;
	position: absolute;
	display: inline-block;
	top: 0px;
	right: 0px;
}

.createButton {
	cursor: pointer;
	min-width: 16px;
	min-height: 16px;
	display: block;
	float: right;
	position: relative;
	margin-right: 2px;
	top: 0px;
}

.openGuiItemHandlerView .recordType .buttonView>span::before,
	.openGuiItemHandlerView .recordType .buttonView>span::after,
	.recordTypesView .recordType .buttonView>span::before, .recordTypesView .recordType .buttonView>span::after
	{
	top: 3px;
	right: 2px;
}

.createButton::before {
	background: url("../images/icons3.svg") no-repeat scroll -128px -32px;
	content: "";
	height: 16px;
	width: 16px;
	opacity: 1;
	position: absolute;
	transition: opacity 0.5s ease 0s;
	z-index: 100;
}

.createButton:hover::before {
	opacity: 0;
}

.createButton::after {
	background: url("../images/icons3.svg") no-repeat scroll -128px -16px;
	content: "";
	height: 16px;
	width: 16px;
	position: absolute;
	opacity: 0;
	transition: opacity 0.5s ease 0s;
	z-index: 101;
}

.createButton:hover::after {
	opacity: 1;
}

.jsClient .workView {
	counter-reset: record;
}

.jsClient .listView {
	width: 100%;
	padding: 0.3rem;
	cursor: pointer;
}

.jsClient .listItem {
	font-size: .8rem;
	counter-increment: record;
	display: flex;
	border-bottom: 1px dashed;
	padding: 0.3rem;
}

.jsClient .listItem::before {
	content: counter(record) ".";
	font-size: 2rem;
	display: block;
	left: 0rem;
	padding-right: 0.5rem;
}

.jsClient .listItem .presentation {
	border: none;
	border-radius: 0;
	flex: 1;
}

.jsClient .listItem .pVar {
	min-height: 0;
}

.jsClient .workItem .presentation {
	border: none;
}

.jsClient .listItem .pGroup, .jsClient .listItem .repeatingElement {
	background-color: transparent;
	border: none;
}

.jsClient .listItem [class*='recordInfo'] {
	font-weight: bold;
}

.jsClient .listItem [class*='recordInfo'] .pVar  .infoButton:before,
	.jsClient .listItem [class*='recordInfo'] .pVar  .infoButton:after {
	content: "";
}

.jsClient .attributes {
	font-size: 0.8rem;
}

.jsClient .attributes .pCollVar {
	display: inline;
}

.jsClient .attributeName {
	font-style: italic;
}

.jsClient .attributeName::after {
	content: ": ";
}

.jsClient .listItem .textPartAlternativePGroup .text {
	font-weight: bold;
	margin: 0;
}

.jsClient .editView .repeatingElement .repeatingElement .repeatingElement .maximized
	{
	border: none;
	background-color: transparent;
}

.jsClient {
	font-size: .9rem;
}

.jsClient .showView .pGroup, .jsClient .showView .repeatingElement {
	border: none;
}

.searchResultHolder {
	flex: 1;
}

.pRecordLink  .searchResultHolder {
	max-height: 30em;
	overflow: auto;
	display: block;
}

.indexOrder {
	display: block;
}

.indexOrder .indexItem {
	display: block;
}

.indexOrder input[type="button"] {
	margin-left: 1rem;
}

/* Spike */
.header .logoHeader, .logoHeaderLogo {
	position: absolute;
}

.containsData .pSurroundingContainer>.text:is(.h2TextStyle, .h3TextStyle,
	.h4TextStyle, .h5TextStyle, .h6TextStyle), .containsData>.clickableHeadline
	{
	color: var(--color-contains);
}
.containsError .pSurroundingContainer>.text:is(.h2TextStyle, .h3TextStyle,
	.h4TextStyle, .h5TextStyle, .h6TextStyle), .containsError>.clickableHeadline
	{
	color: var(--color-contains-error);
}

.definitionViewer {
	position: relative;
	display: block;
}

.definitionViewer .header {
	font-size: 2rem;
	color: #243bb7;
}

.definitionViewer .nameInData {
	font-size: .9rem;
	color: orange;
	font-weight: bold;
	padding-right: 0.2rem;
	cursor: pointer;
}

.definitionViewer .finalValue {
	font-size: .8rem;
	color: #b30b0b;
	font-weight: bold;
	padding-right: 0.2rem;
}

.definitionViewer .attributes {
	font-size: 0.8rem;
	color: #2e7af0;
	font-weight: bold;
	padding-right: 0.2rem;
	display: inline;
}

.definitionViewer .details {
	font-size: 0.8rem;
	color: #188014;
	/* 	padding-right: 0.2rem; */
}

.definitionViewer .legend {
	color: #243bb7;
	/* 	font-weight: bold; */
	/* 	margin-right: auto; */
	position: absolute;
	top: 3rem;
	right: 3rem;
	border: 1px solid gray;
	border-radius: 0.5rem;
	padding: 0.5rem;
	box-shadow: 10px 5px 5px #b9b9b9;
}

.definitionViewer .legend.blink {
	animation: blink-animation 0.2s linear 1;
}
@keyframes blink-animation { 
	50% {
		background-color: #D3D3D3;
	}
}
.definitionViewer .storage {
	color: #2e7af0;
	font-weight: bold;
}

.definitionViewer .permission {
	color: #2e7af0;
	font-weight: bold;
}

.definitionViewer .index {
	color: #2e7af0;
	font-weight: bold;
}

.definitionViewer .details .type {
	/* 	color: red; */
	/* 	padding-right: 0.2rem; */
	
}

.definitionViewer .details .cardinality {
	/* 	color: gren; */
	/* 	padding-right: 0.2rem; */
	
}

.definitionViewer .details .constraint {
	/* 	color: blue; */
	/* 	padding-right: 0.2rem; */
	
}

.recursiveDelete {
	position: relative;
	display: block;
}

.recursiveDelete .header {
	font-size: 2rem;
	color: #c84600;
	padding-left: 0.2rem;
}

.recursiveDelete .labelType {
	font-size: .7rem;
	color: #0082c8;
	color: #001ec8;
	padding-right: 0.2rem;
}

.recursiveDelete .id {
	font-size: .9rem;
	color: #0082c8;
	font-weight: bold;
	padding-right: 0.2rem;
}

.recursiveDelete .nameInData {
	font-size: .9rem;
	color: #9558C7;
	font-weight: bold;
	padding-right: 0.2rem;
}

.recursiveDelete .type {
	font-size: .9rem;
	color: #c84600;
	padding-right: 0.2rem;
}

.recursiveDelete .dataDivider {
	font-size: .7rem;
	padding-right: 0.2rem;
}

.recursiveDelete .linked {
	cursor: pointer;
}

.recursiveDelete .deleting {
	animation: blink 1s infinite;
	position: relative;
	will-change: opacity;
}

@keyframes blink { 
	0% {opacity: 1;}
	50% {opacity: 0.2;}
	100% {opacity: 1;}
}
.workView>.recursiveDelete {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: max-content minmax(0, 1fr);
	grid-template-areas: "header" "mainView";
	height: 100%;
}

.recursiveDelete>.header {
	grid-area: header;
}

.recursiveDelete>.metadata {
	grid-area: mainView;
	overflow: scroll;
}

.recursiveDelete .failed {
	background-color: rgb(215, 108, 130);
	border-radius: 0.5rem;
}

.recursiveDelete .deleted {
	background-color: rgb(126, 212, 173);
	border-radius: 0.5rem;
}

.recursiveDelete li.recursiveDeleteItemCollection {
	max-height: 15rem;
	overflow: scroll;
	border: 1px dotted black;
	width: fit-content;
	border-radius: 5px;
}

.recursiveDelete>input {
	display: block;
	position: absolute;
	bottom: 1rem;
	right: 1rem;
}