/* @import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600;700&display=swap'); */

/* https://fonts.google.com/specimen/Poppins */
/* https://cssgradient.io/ */

body {
		background: var(--body-bg);
		color: var(--body-text);
		font-family: 'Poppins', sans-serif;
		margin: 0px;
		padding: 0px;
		font-weight: 100;
		font-size: 14px;;
}

[screenmode="prompter"] {
	body {
		background: #000;
		color: #FFF;
	}
}


input, select, textarea, button{font-family:inherit;}

	a {
/*		color: var(--common-a-text); */
		text-decoration: none;
	}
/*
	#dashboard {
		overflow-y: scroll;
		max-height: 80vh;
	}
*/
	#dashboard a {
		color: var(--common-a-text);
	}

	a.speaking {
		background-color: blueviolet;
	}
	
	* {
		padding: 0px;
		margin: 0px;
	}
	




	#root { 	margin: 0px; padding: 0px; color: var(--body-text); }	/* hier grün nur zur Fehlersuche */
	
	p { margin: 0px; padding: 0px; }
	.clearfix  { clear: both; }
	h2 { font-size: 21px; }
	

	#bottom {
		clear: both;
		display: block;
/*		position:fixed;
		z-index: 100;		
		bottom: 0;
		left:0;
*/		width:100%;
		background-color: unset;
		text-align: center;
		font-weight: 100;
		font-size: 12px;
		color: var(--bottom-hint-text);
		margin-bottom: 40px;
	}
	#bottom > a { 	text-decoration: underline; color: var(--bottom-hint-text); }
	
	#blackbar {
		position:fixed;
		z-index: 100;		
		top:0;
		left:0;
		width:100%;
		height:50px;
		background-color: var(--toolbar-bg);	
	/*	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(45,45,45,1) 100%); */
		opacity: 1.0;
		display:	inline-flex;
		align-items: center;
		justify-content: center;
		user-select: none;
	}

	[screenmode="prompter"] {
		#blackbar {
			background-color: #000;
		}
	}
	
	.navtree {
		font-weight: 100;
		user-select: none;
	}

	#icons {
		height: 50px;
		line-height: 50px;
		display:	inline-block;
		border: 1px solid green;
		box-sizing: border-box;
	}
	
	#content  {  min-height: 90vh;	width: 100%; }
	
	#cueline  {
		margin-top: 50px; 
		margin: 50px auto auto auto;
/*		max-width: 1280px;	*/

		width: 90%;
		max-width: 2500px;

		overflow-x: hidden;
		font-size: 14px;
		margin-bottom: 100px;
	}

	[screenmode="prompter"] {
		#cueline  {
			max-width: unset;
		}
	}

	[mode="export"] {
			#cueline  {
					max-width: 1280px;
			}
	}

	@media screen and (max-width: 767px) {
		#cueline  {
			font-size: 12px;
		}
	}
	

	#cueline .testlab {
		background-color: orange;
		border: 1px solid red;
	}
	
	#cueline p {
		padding: 0px;
		margin: 0px;
	}
	
	/* box around the cue to position cuetools */
	.cuebox {
		/* border: 1px solid red; */
		position: relative;
		margin-bottom: 10px;
		border-radius: 4px;
		background-color: var(--colorset-grey-B);
	/*	user-select: none; */
	}
	
	.cuebox.hidden {
		display: none;
	}
	
	.cuebox span.cueTitle {
		color: var(--colorset-grey-A-text);
		padding: 3px;
		font-weight: 400;
	}
	
	.cuebox span.cueText {			/* used in cues */
		position: relative;
		word-break: break-word;
		display: inline-block;
		font-weight: 300;
		width: 100%;
		color: var(--colorset-grey-B-text);
		padding: 5px;
		margin-bottom: 0px;
		-moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
		vertical-align: top;
		box-sizing: border-box;			/* doesnt work - why?*/
	}
	/*
	[id^='end'] td:empty 
	{
		border: 1px solid green;
	}	
	*/
	
	[id^='end'] td:nth-child(2)
	{
		background-color: transparent !important; 
		padding: 0px !important;
	
	}
	[id^='end'] .cuebox {
		width: 32%;
		display: inline-block;
		margin: 10px 10px 10px 0px;
	}
	
	#cueline span.cueinfo {
		font-size: 12px;
		position: absolute;
		display: inline;
		top: 0px;
		right: 0px;
		padding: 0px;
		margin: 0px;
		background: none;
		color: var(--cue-text);
		width: unset;
		padding: 1px 5px 1px 5px;
		font-weight: 300;
	}
	
	/* editing icons */
	
	#cueline span.cuetools {
		position: absolute;
		display: inline;
		top: 0px;
		right: 0px;
		padding: 0px;
		margin: 0px;
		background: none;
		width: unset;
		padding: 1px 5px 1px 5px;
		font-weight: 300;
	}
	
	#cueline span.cuetools i:hover {
		color: var(--cue-tools-hover);
	}
	
	.tx1 {
		width: 40%;
	}
	
	
	/* 	https://codepen.io/stephenpaton-tech/full/JjRvGmY */
	/* ===== Scrollbar CSS ===== */
	  /* Firefox */
	  * {
		scrollbar-width: auto;
		scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
	  }
	
	  /* Chrome, Edge, and Safari */
	  *::-webkit-scrollbar {
		width: 16px;
	  }
	
	  *::-webkit-scrollbar-track {
		background: var(--scrollbar-track);
	  }
	
	  *::-webkit-scrollbar-thumb {
		background-color: var(--scrollbar-thumb);
		border-radius: 0px;
		border: none;
	  }

/* https://developer.chrome.com/docs/css-ui/scrollbar-styling?hl=de */
[screenmode="prompter"] {
	scrollbar-color: #333 #111;
	scrollbar-width: thin;
}



	.modalContent{
	  background-color: var(--toolbar-bg);
	  position: absolute;
	  top: 40%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  padding: 2% 6%;
	  border-radius: 0.5rem;
	  color: var(--tab-text);
	}
	
	.modeselect {		/* refered in bookselect */
		display: inline-block;
		min-width: 150px;
		word-wrap: none;
		padding: 25px 50px 25px 50px;
		margin: 10px 10px 10px 0px;
		font-size: 24px;
		background: var(--depreciated-list-bg);
		border-radius: 0.5rem;
	}
	
	.msAccount {
		font-size: 16px;
	}
	
	a.modeselect {
		text-decoration:  none;
		color: var(--depreciated-list-text);
	}
	
	a.modeselect:hover{
		color:var(--depreciated-list-hover-text);
		background-color: var(--depreciated-list-hover-bg);
	}
	
	.msSmall {
		font-size: 14px;
	}
	
	.uiDropdown {
		background: var(--dropdown-bg);
		color: var(--dropdown-text);
		padding: 5px;
		-moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; border-radius: 7px;
		border: 1px solid var(--dropdown-border);
	}
	/*
	does not work on select - only for checked, not for hover
	.uiDropdown option:checked, option:hover {
		background: var(--dropdown-checked) !important;
	}
	*/
	/*#ping {
		width: 100px;
	}
	*/
	.spacearea {
		display: block;
		width: 100%;
		height: 700px;
	
	}
	
	#tbook {
		width: 100%;
		margin-top: 20px;
		table-layout: fixed;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
	
	
	#tbook table {
		border-collapse: collapse;
	/*	table-layout: fixed;	*/
	
	/* word-wrap: break-word;
	overflow-wrap: break-word; */
	
	}
	#tbook td, th {
		padding: 0px;
		margin: 0px;
	
	}
	
	#tbook td {
	/*	border: 1px dotted #ddd; */
		vertical-align: top;
	
		
	}
	
	#tbook td:nth-child(2)  {
		border-bottom: 1px dotted var(--text-separator);
	}
	
	#tbook td {
		min-width: 100px;
		max-width:60%;
	
			padding: 10px;
			position: relative;
			 
	
	}
	#tbook tr:first-child td:nth-child(2) {
		border-top: 1px solid var(--book-text-border);
	}
	
	#tbook tr:last-child td:nth-child(2) {
		border-bottom: 1px solid var(--book-text-border);
	}
	
	#tbook td:nth-child(2){
		border-left: 1px solid var(--book-text-border);
		border-right: 1px solid var(--book-text-border);
	/*	box-shadow: 10px 10px 19px 0px rgba(0,0,0,1); */
	
		background-color: var(--text-bg);
	}
	#tbook .rolename {
		opacity: 0.4;
		font-weight: 300;
	}
	
	#tbook th {
		vertical-align: top;
		text-align: left;
	
	}
	

	

	
	
	/*
	[data-mode="prompter"] 
	{
		.tcue  {	display: none; }
		.tcontent {	width: 100%; }
	}
	*/
	#tbook span.debug {
		position: absolute;
		display: inline;
		bottom: 0px;
		right: 0px;
		padding: 0px;
		margin: 0px;
		background: none;
		color: var(--cue-tools-text);
		width: unset;
		padding: 1px 5px 1px 5px;
		font-weight: 300;
		font-size: 12px;
	}
	
	#tbook h1,
	#tbook h2,
	#tbook h3,
	#tbook h4,
	#tbook h5,
	#tbook h6,
	#tbook h7 {
		text-align: center;
	
	}
	
	#tbookwrap {
		position: relative;
	}
	
	.dbg {
		font-size: 12px;
		font-style: italic;
	}
	
	.warn {
		color: var(--general-urgent);
		z-index: 10;
	}
	
	
	#middle {
			position: fixed;
			width: 100%;
			height: 33%;
			top: 50%;
			left: 0%;
			border: none;
			background-color: transparent;
			z-index: -1;
	}

	[screenmode="prompter"]
	{
		#middle {
			background-color: unset;
			background: unset;
		}
	}


	.cuetools {
		white-space: nowrap;
	}
	/* cuetools is  the little icon box right corner of a cue */
	.cuetools i {
		margin-left: 5px;
		color: var(--cue-tools-text);
	}
	
	.cuetools i {
		display: none;
		
		padding: 5px;							/*  hitbox ! */
		margin: -2px;
	}
	
	.cuetools i.menu {
		display: inline;
	}
	
	.cuetools i.startedit {
		display: inline;
	}
	
	.lockinfo {
		display: none;
		font-size: 12px;
	}
	
	.red {
		color: var(--colorset-red-A);
	}
	
	.green {
		color: var(--colorset-green-A);
	}
	
	#contextmenu {
		display: none;
		font-size: 14px;
		color: var(--cue-menu-text);
		z-index: 100;
		position: absolute;
		background: var(--cue-menu-bg);
		top: -100px;
		left: -100px;
		min-width: 50px;
	
		min-height: 20px;
		-moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; border-radius: 7px;
	
		border: 1px solid var(--cue-menu-border);
	}
	#contextmenu > h1 {
		font-size: 14px;
		margin: 10px;
		border-bottom: 1px dotted #fff;
	}
	
	#contextmenu a {
		display: block;
		padding: 5px 10px 5px 10px;
		color: var(--cue-menu-text);
	}
	
	#contextmenu a:hover {
		color: var(--cue-menu-hover-text);
		cursor: pointer;
	}
	
	/* table in context menu */
	.contextRoleTable {
		white-space: nowrap;
		padding: 0px;
		margin: 0px;
	}
	
	cueBridge { display: none; }
	
	cue-user-id {
		display: none;
	}
	
	cue-tab-context {
			display: none;
	}

	/****************************************************/
	/* table roleEditor 								*/
	/****************************************************/
	.roleEditor {
		border-collapse: collapse;
	/*	margin: auto;	*/
	/*	background-color: #fff;	*/
		width: 100%;
	
	}
	
	.roleEditor tr:hover {
			background-color: var(--table-bg-hover);
	}
	
	.roleEditor td,th {
		text-align: left;
		padding: 3px 10px 3px 10px;
		border: 1px dotted var(--table-border);
	}
	
	.roleEditor td.noborder {
		border: none;
	}
	
	.roleEditor a {
		margin: 0px 8px 0px 8px;
		color: var(--table-text);
	}
	.roleEditor a:hover {
		color: var(--table-text-hover);
	}
	/****************************************************/
	/* table acle								*/
	/****************************************************/
	.aclTable {
		border-collapse: collapse;
	/*	margin: auto;	*/
	/*	background-color: #fff;	*/
		width: 90%;
	
	}
	
	.aclTable tr:hover {
			background-color: var(--table-bg-hover);
	}
	
	.aclTable td,th {
		text-align: left;
		padding: 3px 10px 3px 10px;
		border: 1px dotted var(--table-border);
	}
	
	.aclTable td.noborder {
		border: none;
	}
	
	.aclTable a {
		margin: 0px 8px 0px 8px;
		color: var(--table-text);
	}
	.aclTable a:hover {
		color: var(--table-text-hover);
	}
	
	/****************************************************/
	/* memberSelect (notegroups/rolegroups in dashboard	*/
	/****************************************************/
	.memberSelect {
		margin-top: 10px;
	}
	
	.memberSelect td {
		text-align: left;
		padding: 0px !important;
		border: none;
	
	}
	/****************************************************/
	/* table (dashboard, accountlists etc.)				*/
	/****************************************************/
	.userTable {
		border-collapse: collapse;
	/*	margin: auto;	*/
	/*	background-color: #fff;	*/
		width: 90%;
	
	}
	
	.userTable tr:hover {
			background-color: var(--table-bg-hover);
	}
	
	.userTable td,th {
		text-align: left;
		padding: 3px 10px 3px 5px;
	/*	border: 1px dotted var(--table-border);	*/
		border: none;
	}
	
	.userTable>th:last-child,.userTable>th:last-child {
		text-align: right;
	}
	
	.userTable td.noborder {
		border: none;
	}
	
	.userTable a {
		margin: 0px 8px 0px 8px;
		color: var(--table-text);
	}
	.userTable a:hover {
		color: var(--table-text-hover);
	}
	/* function postButton() */
	/* make a button look like a link */
	/* https://stackoverflow.com/questions/8169027/how-can-i-submit-a-post-form-using-the-a-href-tag */
	.post-btn-link {
		border: none;
		outline: none;
		background: none;
		cursor: pointer;
		padding: 0;
		text-decoration: none;
		font-family: inherit;
		font-size: inherit;
		font-weight: inherit;
		color: inherit;
	}
	
	
	.containMe {
		display: block;
		width: auto;
		text-align: center;
	}
	.centerMe {
		display: inline-block;
		text-align: right;
	}
	
	
		
	.errortext {
		color: var(--button-urgent);
	}

	/* new created items or so */
	.highlight {
			color: var(--button-urgent);
	}
	
	/*
	span[contenteditable]:empty:before{
		content: 'Text einfügen';
	}
	*/	
	span[contenteditable]:empty:focus::before{
	}
	
	span[contenteditable]:focus-visible {						/* STUPID FUCKING FOCUS RING was hardly to find */
		outline: none;
	
	}
	
	
	.rs_roles {
		display: none;			/* drop down nicht anzeigen, so lange kein edit modus aktiv ist */
	}
	
	
	.small {
		font-size: 0.9em;
	}
	
	/* style to color the active td under a seq */
	

	td.active {
		background-color: var(--seq-active) !important;
	}

	[screenmode="prompter"] {
		.active {
			background-color: #111 !important;
		}
	}

	[mode="export"] {
		.active {
			background-color: unset !important;
			color: #000;						/* unlogisch aber funktioniert */
		}
	}

	
	#dashboard i {
		display: inline;
		margin-right: 10px;
	}
	
	#debuglog {
		display: none;
		position: fixed;
		bottom: 0px;
		left: 20px;
		height: 300px;
		width: 500px;
		border: 1px solid var(--colorset-blue-A);
		overflow-x: hidden;
		overflow-y: scroll;
		font-size: 12px;
		color: var(--colorset-green-A);
		background: var(--btw0);
		z-index: 100;
	}
	
	/* settings */
	.cue_role_config_table td {
		font-size: 14px;
		width: 33%;
	}
	.cue_role_config_table td:first-child {
		text-align: right;
	}
	.cue_role_config_table td:nth-child(2) {
		text-align: center;
	}
	.cue_role_config_table th {
		text-align: center;
		border: none;
	}
	.cue_role_config_table th:first-child {
		text-align: right;
	}
	.cue_role_config_table th:nth-child(3) {
		text-align: left;
	}
	
	.noselect {
	  -webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		 -khtml-user-select: none; /* Konqueror HTML */
		   -moz-user-select: none; /* Old versions of Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none; /* Non-prefixed version, currently
									  supported by Chrome, Edge, Opera and Firefox */
	}
	
	.pointer {
		cursor: pointer;
	}
	
	.profileimage {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		margin: 5px 0px 0px 0px;
		padding: 0px;
	}
	
	.b1 {
		display: inline-block;
		width: 100%;
	/*	border: 1px solid white;
		box-sizing: border-box;	*/
		font-weight: 100;
		min-height: 500px;
		vertical-align: top;
	}
	
	.b2 {
		display: inline-block;
		width: 50%;
	/*	border: 1px solid white;
		box-sizing: border-box;	*/
		font-weight: 100;
		min-height: 500px;
		vertical-align: top;
	}
	.b3 {
		display: inline-block;
		width: 33%;
	/*	border: 1px solid white;
		box-sizing: border-box;	*/
		font-weight: 100;
		min-height: 500px;
		vertical-align: top;
	/*
		max-height: 500px;
		overflow-x: hidden;
		overflow-y: scroll;
	*/
	}
	
	
	 .uiBackground {
		background-color: var(--toolbar-bg);
	}
	.uiRound {
		-moz-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px; border-radius: 7px;
	}
	
	#login h2 {
		margin-top: 1em;
		margin-bottom: 1em;
	}
	
	#login td {
		text-align: left;
		padding: 0px 20px 0px 20px;
	}
	#login td.forgotpass {
		padding-top: 30px;
		font-weight: 100;
		font-size: 14px;
		text-align: center;
	}
	#login td.registernotice {
		max-width: 400px;
		font-weight: 100;
		font-size: 14px;
		padding-bottom: 10px;
	}
	
	#login td.registerhere {
	
		font-weight: 100;
		font-size: 14px;
		text-align: center;
	}
	
	#login tr:last-child td:last-child {
		padding-bottom: 1em;
	}
	#tableLogin {
		position: fixed;
		z-index: 10;
	}
	
	.colortestbox2 {
		display: inline-block;
		margin: 2px;
		width: 16px;
		height: 16px;
		border: 1px solid #888;
		-moz-border-radius: 1px; -webkit-border-radius: 1px; -khtml-border-radius: 1px; border-radius: 1px;
		text-align: center;
		vertical-align: middle;
		font-size: 8px;
		overflow: hidden;
	
	}
	
	/* roleeditor */
	
	.colortestbox3 {
		display: inline-block;
		margin: 2px;
		width: 16px;
		height: 16px;
		border: 1px solid #888;
		-moz-border-radius: 1px; -webkit-border-radius: 1px; -khtml-border-radius: 1px; border-radius: 1px;
		text-align: center;
		vertical-align: middle;
		font-size: 8px;
		overflow: hidden;
		pointer-events: none;
	}
	
	
	.colormissing {
		background: var(--colorset-red-A);
		color: var(--btw9);
		padding: 0px 5px 0px 5px;
		-moz-border-radius: 1px; -webkit-border-radius: 1px; -khtml-border-radius: 1px; border-radius: 1px;
	}
	.colormissing:hover {
		color: var(--colorset-red-A);
		background: var(--btw9);
	}
	.colortheme td {
		border: none;
	}
	
	
	
	.small {
		font-size: 14px;
		font-weight: 100;
	}
	
	/* wrap text in project to prefix a checkbox for strich selection */
	
	.sw {
		display: flex;
		box-sizing: border-box;
	
	}
	
	.swS {
		flex: 1px;
		display: none;
	}
	
	.swC {
		flex: 90%;
	}
	
	.striched p {
		opacity: 0.5;
		text-decoration:line-through;
	}
	.striched b {
		opacity: 0.5;
		text-decoration:line-through;
	}
	
	.strichoff {
		display: none;
	}
	
	.strichInfo {
		margin-left: 10px;
		font-style: italic;
	}
	
	
	.swS input {
		margin: 0px;
	}
	
	.colortest_helper {
		display: inline-block;
		width:280px;
		margin-right: 10px;
	} 
	.colortheme 
	{
		font-weight: 300;
		font-size: 14px;
		border-collapse: collapse;
	}
	.colortheme td {
		border-bottom: 1px solid var(--btw3);
		padding: 3px;
	}
	/* generic to hide json elements etc. */
	.invisible {
		display: none;
	}
	
	/* testlab */
	#mt {
		pointer-events: none;
	}
	
	cuesing {
		display: inline;
		border-bottom: 1px dashed orange;
	}




	.error {
/*		border: 1px solid var(--button-urgent);*/
		color: #ff2301;
		font-weight: 500;
	}

	.texthover:hover {
		color: var(--color2);
	}