/***************************************

	pbStdStyle CSS
	by philbide
	Version 1.0.1

	w/ theme.css

	based on Moduli Layout CSS 2.1.8
	
	- sections
	- structs
	- inputs
	- ...

***************************************/

/***************************************

1.0.1
	- Fixed input type=number and type=checkbox style

***************************************/

/*
	Search Prefixes

	#1		| °
	#2		| !
*/



/****************/
/*   °Section   */
/****************/

.section-head {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	width: calc(100% + 10px);
	margin: -5px -5px 15px -5px;
}

.section-head>* {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	max-width: 100%;
	padding: 5px 5px 5px 5px;
	box-sizing: border-box;
}

.section-head h2,
.section-head h3,
.section-head h4,
.section-head h5 {
	margin: 0;
}


.section {
	margin-top: 30px;
}

.section:first-child {
	margin-top: 0px;
}


.section.gap-none {
	margin-top: 0px;
}


.section.gap-small {
	margin-top: 15px;
}

.section.gap-small:first-of-type {
	margin-top: 0px;
}

.section.gap-large {
	margin-top: 50px;
}

.section.gap-large:first-of-type {
	margin-top: 0px;
}


.section>p:first-child {
	margin-top: 0;
}

.section>p:last-child {
	margin-bottom: 0;
}

.section>p:only-child {
	margin-top: 0;
	margin-bottom: 0;
}

.section-content {}

/*   boxed   */

.section.boxed {
	padding: 15px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--border-color);
	border-radius: 4px;
	background-color: transparent;
	box-sizing: border-box;
}

/*   colored   */

.section.colored {
	padding: 15px;
	border-radius: 4px;
	background-color: var(--bg-color);
}

/*   break-line   */

.section.break-line {
	padding-top: 30px;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: var(--border-color);
}

.section.break-line.gap-small {
	padding-top: 15px;
}

.section.break-line.gap-large {
	padding-top: 50px;
}

/*   centered   */

.section.centered {
	margin-right: auto;
	margin-left: auto;
	width: 100%;
}

/*   text centered   */

.section.text-centered {
	text-align: center;
}

/*   hover   */

.section.hover-color:hover {
	background-color: var(--bg-hover-color);
}

.section.hover-shadow:hover {
	box-shadow: var(--bg-hover-shadow);
}

.section.hover-shadow {
	transition: box-shadow 0.5s;
}

/*   limited   */

.section.limited {
	max-width: 985px;
}

/*   widths   */

.section.x-small {
	max-width: 320px;
}

.section.small {
	max-width: 620px;
}

.section.medium {
	max-width: 940px;
}

.section.large {
	max-width: 1200px;
}

/*   min-widths   */

.section.min-x-small {
	min-width: 320px;
}

.section.min-small {
	min-width: 620px;
}

.section.min-medium {
	min-width: 940px;
}

.section.min-large {
	min-width: 1200px;
}

/*   fullwidth   */

/* abhaengig von #main-content */
.section.fullwidth {
	width: calc(100% + 46px);
	margin: 0px 0 0 -23px;
}

@media only screen and (max-width: 620px) {
	.section.fullwidth {
		width: calc(104%);
		margin: 0px 0 0 -2%;
	}
}

/*   invalid   */

.section.invalid {
	background-color: var(--bg-invalid-color) !important;
}


@media only screen and (max-width: 620px) {
	.section.boxed {
		padding: 10px 8px 10px 8px;
	}
}



/****************/
/*   °Structs   */
/****************/

/***   !flex-table   ***/

.struct.flex-table.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	width: calc(100% + 10px);
	margin: 0px -5px -5px -5px;
	margin-top: 20px;
}

.struct.flex-table.row:first-of-type {
	margin-top: -5px;
}

.struct.flex-table.row.nowrap {
	flex-wrap: nowrap !important;
}


.struct.flex-table.row.gap-none {
	margin-top: -5px;
}

.struct.flex-table.row.gap-small {
	margin-top: 15px;
}

.struct.flex-table.row.gap-small:first-of-type {
	margin-top: -5px;
}

.struct.flex-table.row.gap-large {
	margin-top: 35px;
}

.struct.flex-table.row.gap-large:first-of-type {
	margin-top: -5px;
}


.struct.flex-table.row>* {
	flex-grow: 0;
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding: 5px 5px 5px 5px;
	box-sizing: border-box;
}

/*
.struct.flex-table.row:not(.nowrap) > * {
	padding:5px 5px 5px 5px;
}
*/

.struct.flex-table.row>*.v-align-center {
	align-self: center;
}


.struct.flex-table .controls-ctr {
	flex-basis: 0 !important;

	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #cccccc;
}

.struct.flex-table .controls-ctr .controls {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;

	width: calc(100% + 10px);
	height: 100%;
	margin: 0 -5px 0 -5px;
}

.struct.flex-table .controls-ctr .controls>* {
	margin: 2px 5px 2px 5px;
}

@media only screen and (max-width: 620px) {
	.struct.flex-table .controls-ctr .controls {
		flex-wrap: wrap;
	}
}

/*
.struct.flex-table.row [class*="col"] {
	
}
*/

.struct.flex-table .col-auto {
	flex-basis: auto;
	flex-shrink: 1;
	width: auto;
}

.struct.flex-table [class*="col"].ellipsis {
	display: grid;
	max-width: 100%;
	overflow-x: hidden;
}

.struct.flex-table [class*="col"].ellipsis * {
	display: block;
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.struct.flex-table .col-25 {
	flex-basis: auto;
	width: 25%;
}

.struct.flex-table .col-33 {
	flex-basis: auto;
	width: 33.333%;
}

.struct.flex-table .col-50 {
	flex-basis: auto;
	width: 50%;
}

.struct.flex-table .col-66 {
	flex-basis: auto;
	width: 66.666%;
}

.struct.flex-table .col-75 {
	flex-basis: auto;
	width: 75%;
}

.struct.flex-table .col-100 {
	flex-basis: auto;
	width: 100%;
}


/*   relative widths   */
/* todo: muss getestet werden */

.struct.flex-table .col-0 {
	flex-shrink: 1;
	flex-basis: auto;
}

.struct.flex-table .col-1 {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;

	width: auto;
	max-width: auto;
}

.struct.flex-table .col-2 {
	flex-grow: 2;
	flex-shrink: 1;
	flex-basis: auto;

	width: auto;
	max-width: auto;
}

.struct.flex-table .col-3 {
	flex-grow: 3;
	flex-shrink: 1;
	flex-basis: auto;

	width: auto;
	max-width: auto;
}


@media only screen and (max-width: 620px) {

	.struct.flex-table.row:not(.nowrap) .col-25,
	.struct.flex-table.row:not(.nowrap) .col-33,
	.struct.flex-table.row:not(.nowrap) .col-50,
	.struct.flex-table.row:not(.nowrap) .col-66,
	.struct.flex-table.row:not(.nowrap) .col-75 {
		width: 100%;
	}
}



/***   !flex   ***/

.struct.flex {
	display: flex;
}

/*   container   */

.struct.flex.nowrap {
	flex-wrap: nowrap !important;
}

.struct.flex.center {
	justify-content: center;
}

.struct.flex.space-around {
	justify-content: space-around;
}

.struct.flex.space-between {
	justify-content: space-between;
}

.struct.flex.row {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 15px 50px;
}

.struct.flex.row.gap-small {
	gap: 5px 50px;
}

.struct.flex.row.gap-large {
	gap: 30px 50px;
}


.struct.flex.column {
	flex-direction: column;
	gap: 15px;
}

.struct.flex.column.gap-small {
	gap: 5px;
}

.struct.flex.column.gap-large {
	gap: 30px;
}

.struct.flex.items-stretch {
	align-items: stretch;
}

/*   items   */

.struct.flex.grow-even > * {
	flex-grow: 1;
}



/***   !grid   ***/

.struct.grid.column {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, auto));
	column-gap: 10px;
	row-gap: 10px;
	justify-items: stretch;
	align-items: stretch;
}

.struct.grid.column.small {
	grid-template-columns: repeat(auto-fill, minmax(60px, auto));
}

.struct.grid.column.large {
	grid-template-columns: repeat(auto-fill, minmax(300px, auto));
}

.struct.grid.column>*,
.struct.grid.column>*:first-child,
.struct.grid.column>*:last-child {
	margin: 0;
}



/***   !controls   ***/

.struct.controls {
	display: flex;
	align-items: flex-end;
}

.controls-left {
	text-align: left;
	flex-grow: 1;
	flex-shrink: 1;
	margin: -3px 8px -3px -8px;

	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-end;
}

.controls-right {
	text-align: right;
	flex-grow: 1;
	flex-shrink: 1;
	margin: -3px -8px -3px 8px;

	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-end;
}

.controls-left>*,
.controls-left>*:last-of-type {
	display: inline-block;
	margin: 3px 0px 3px 8px;
}

.controls-right>*,
.controls-right>*:last-of-type {
	display: inline-block;
	margin: 3px 8px 3px 0px;
}

@media only screen and (max-width: 410px) {
	.struct.controls {
		flex-wrap: wrap;
	}

	.controls-left {
		width: 100%;
		margin: -3px 0px -3px -8px;
	}

	.controls-right {
		justify-content: flex-start;
		width: 100%;
		margin: -3px 0px -3px -8px;
	}

	.controls-right>*,
	.controls-right>*:last-of-type {
		margin: 3px 0px 3px 8px;
	}

	/* dont use special mobile styling */
	.section-head .controls-left,
	.overlay-window-header .controls-left,
	.overlay-window-footer .controls-left {
		width: auto;
	}

	.section-head .controls-right,
	.overlay-window-header .controls-right,
	.overlay-window-footer .controls-right {
		justify-content: flex-end;
		width: auto;
		margin: -3px -8px -3px 8px;
	}

	.section-head .controls-right>*,
	.section-head .controls-right>*:last-of-type,
	.overlay-window-footer .controls-right>*,
	.overlay-window-footer .controls-right>*:last-of-type {
		margin: 3px 8px 3px 0px;
	}
}



/***   !data   ***/

.struct.data .struct-title {
	font-size: 0.9em;
}

.struct.data .struct-content {
	font-size: 1.4em;
}

.struct.data .struct-content span {
	font-size: 0.7em;
}

.struct.data.small .struct-content {
	font-size: 1.2em;
}

.struct.data.large .struct-content {
	font-size: 3em;
}



/***   !indicator   ***/

.struct.indicator {
	display:flex;
	align-items:baseline;
	margin:5px 0 5px 0;
}

.struct.indicator:first-child {
	margin:0px 0 5px 0;
}

.struct.indicator:last-child {
	margin:5px 0 0px 0;
}

.struct.indicator.inline {
	display:inline-flex;
	margin:0;
}

.struct.indicator > div:first-child {
	flex-shrink:0;
	width:10px;
	height:10px;
	border-radius:var(--indicator-border-radius);
}

.struct.indicator > div:first-child + div {
	padding-left:6px;
}



/****************/
/*   °widgets   */
/****************/

/***   !datetime   ***/

.widget.datetime {
	display:inline-block;
	margin: 3px 8px 3px 0px;
}

.widget.datetime:last-of-type {
	margin: 3px 0px 3px 0px;
}

.widget.datetime.boxed {
	padding: 6px 10px 6px 10px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--border-color);
	border-radius: 4px;
	background-color: transparent;
	box-sizing: border-box;
}

.widget.datetime.centered {
	text-align:center;
}

.widget.datetime.horizontal .date > * {
	display:inline-block;
	padding-right: 3px;
}

.widget.datetime.horizontal .date > *:last-child {
	padding-right: 0px;
}

.widget.datetime .day {
	font-size: 2em;
}

.widget.datetime .month {
	font-size: 0.9em;
}

.widget.datetime .year {
	font-size: 0.9em;
}

.widget.datetime .time {
	font-size: 1.2em;
}



/**********************/
/*   °Images / °img   */
/**********************/

.image img {
	width: 100%;
	height: 100%;
	border-radius: var(--border-radius);
	object-fit: cover;
}

.image {
	max-width: 600px;
	max-height: 600px;
}

.image.square {
	width: 600px;
	height: 600px;
}

.image.small {
	max-width: 50px;
	max-height: 50px;
}

.image.small.square {
	width: 50px;
	height: 50px;
}

.image.medium {
	max-width: 120px;
	max-height: 120px;
}

.image.medium.square {
	width: 120px;
	height: 120px;
}

.image.large {
	max-width: 1200px;
	max-height: 800px;
}

.image.large.square {
	width: 1200px;
	height: 1200px;
}


.image.inline {
	display: inline-block;
	vertical-align: middle;
}

.input-item .image {
	vertical-align: middle;
	min-height: inherit;
	width: 32px;
	height: 32px !important;
	margin: 0 5px 0 0px;
	padding: 0;
	box-sizing: border-box;
}

table .image {
	display: inline-block;
	vertical-align: sub;
	width: 80px;
	height: 80px;
}



/****************/
/*   °Spacers   */
/****************/

.spacer {
	display: inline-block;
	width: 15px;
}

.spacer.small {
	display: inline-block;
	width: 8px;
}

.spacer.large {
	display: inline-block;
	width: 25px;
}



/***************/
/*   °Inputs   */
/***************/

.input.no-title {
	display: flex;
	align-items: flex-end;
	height: 100%;
}

.input.no-title .input-value,
.input.no-title .input-item {
	width: 100%;
}

.input-title {
	display: block;
	text-align: left;
	width: max-content;
	font-family: inherit;
	font-size: var(--title-font-size);
	line-height: 150%;
	font-weight: inherit;
	color: var(--title-color);
}

.input-title.multiline {
	width: initial;
	/* word-wrap:anywhere;
	-webkit-hyphens:auto; */
}

.input-title.ellipsis {
	width: initial;
	overflow-x: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.pw-showhide {
	display: inline-block;
	margin: 0 0 0 5px;
	vertical-align: middle;
}

.input-value {
	font-size: 1.3em;
}

.input-value>pre,
.input-value>p {
	margin: 0;
}

.input-item {
	min-height: 32px;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
textarea,
select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}


input:not([type="checkbox"]:not([type="radio"])),
select,
textarea {
	box-shadow: var(--box-shadow);
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
}

input:not([type="checkbox"]:not([type="radio"])):hover,
select:hover,
textarea:hover {
	box-shadow: var(--box-hover-shadow);
	-webkit-box-shadow: var(--box-hover-shadow);
	-moz-box-shadow: var(--box-hover-shadow);
}

input:not([type="checkbox"]:not([type="radio"])):focus,
select:focus,
textarea:focus {
	box-shadow: var(--box-focus-shadow);
	-webkit-box-shadow: var(--box-focus-shadow);
	-moz-box-shadow: var(--box-focus-shadow);
}


input,
select,
textarea {
	vertical-align: middle;
	width: 100%;
	min-height: inherit;
	margin: 0;
	padding: 4px 5px 4px 5px;
	border-style: solid;
	border-width: var(--border-width);
	border-color: var(--border-color);
	border-radius: var(--border-radius);
	background-color: var(--bg-color);
	box-sizing: border-box;

	font-size: 1em;
	color: var(--input-text-color);

	transition: var(--input-transition);
}

@media only screen and (max-width: 760px) {

	input,
	select,
	textarea {
		font-size: 16px;
	}
}

select {
	padding: 5px 25px 5px 5px;
	/* was comment */
	background-image: var(--select-icon);
	background-size: 20px 15px;
	background-position: right;
	background-repeat: no-repeat;
}

textarea {
	min-height: 85px;
	resize: vertical;
}

input:disabled,
select:disabled,
textarea:disabled {
	border-color: var(--border-disabled-color);
	cursor: not-allowed;
}

input:enabled:hover,
textarea:enabled:hover,
select:enabled:hover {
	background-color: var(--bg-hover-color);
	color: var(--input-text-hover-color);
}

input:focus,
textarea:focus,
select:focus {
	background-color: var(--bg-focus-color);
	color: var(--input-text-focus-color) !important;

	outline-style: solid;
	outline-width: 2px;
	outline-color: var(--outline-focus-color);
}


/*   normal   */

.input-item.checkbox,
.input-item.radio {
	display: table;
	margin: 4px 0 4px 0;
	padding: 4px 0 0 0;
	/* random gap to align with other inputs */
	box-sizing: border-box;
}

.input-item.checkbox:not(.horizontal),
.input-item.radio:not(.horizontal) {
	min-height: 0;
}

.input-item.checkbox:first-of-type,
.input-item.radio:first-of-type {
	margin: 0px 0 4px 0;
}

.input-item.checkbox:last-of-type,
.input-item.radio:last-of-type {
	margin: 4px 0 0px 0;
}

.input-item.checkbox:only-of-type,
.input-item.radio:only-of-type {
	margin: 0px 0 0px 0;
}

.input-item.checkbox>input:disabled+label,
.input-item.radio>input:disabled+label {
	opacity: 0.4;
	cursor: not-allowed;
}

/*   horizontal   */

.input-item.checkbox.horizontal,
.input-item.radio.horizontal {
	display: inline-table;
	margin: 0 22px 0 0px;
}

.input-item.checkbox.big.horizontal,
.input-item.radio.big.horizontal {
	margin: 0 8px 0 0px;
}


.input-item.checkbox input[type="checkbox"],
.input-item.radio input[type="radio"] {
	display: table-cell;
	width: auto;
	min-height: auto;
	margin: 0;
}

.input-item.checkbox input[type="checkbox"]+label,
.input-item.radio input[type="radio"]+label {
	display: table-cell;
	min-height: auto;
	padding: 0 0 0 5px;
	word-wrap: anywhere;
	-webkit-hyphens: auto;
	/* todo */
}


/*   checkbox/radio big   */

.input-item.checkbox.big,
.input-item.radio.big {
	padding: 0;
}

.input-item.checkbox.big.fullwidth,
.input-item.radio.big.fullwidth {
	width: 100%;
}

.input-item.checkbox.big input[type="checkbox"],
.input-item.radio.big input[type="radio"] {
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	opacity: 0.0;

	border: none;

	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.input-item.checkbox.big input[type="checkbox"]+label,
.input-item.radio.big input[type="radio"]+label {
	display: table-cell;
	vertical-align: middle;
	margin-left: 0;
	padding: 2px 12px 2px 12px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--border-color);
	border-radius: var(--border-radius);
	background-color: var(--bg-color);
	box-sizing: border-box;
	color: var(--big-color);
}

.input-item.checkbox.big input[type="checkbox"]:disabled+label,
.input-item.radio.big input[type="radio"]:disabled+label {
	color: var(--big-color-disabled);
	background-color: var(--big-bg-color-disabled);
	cursor: not-allowed;
}

.input-item.checkbox.big input[type="checkbox"]:enabled+label:hover,
.input-item.radio.big input[type="radio"]:enabled+label:hover {
	background-color: var(--bg-hover-color);
	color: var(--big-color-hover);
}

.input-item.checkbox.big input[type="checkbox"]:focus+label,
.input-item.radio.big input[type="radio"]:focus+label {
	outline-style: solid;
	outline-width: 2px;
	outline-color: var(--outline-focus-color);
	/*
	background-color:rgba(15,160,63,0.2) !important;
	color:inherit !important;
	*/
}

.input-item.checkbox.big input[type="checkbox"]:checked+label,
.input-item.radio.big input[type="radio"]:checked+label {
	border-color: var(--big-border-color-checked);
	background-color: var(--big-bg-color-checked);
	color: var(--big-color-checked);
}

.input-item.checkbox.big input[type="checkbox"]:checked:hover+label,
.input-item.radio.big input[type="radio"]:checked:hover+label {
	background-color: var(--big-bg-color-checked-hover);
	color: var(--big-color-checked-hover);
}



/*   file   */

.input-item input[type="file"] {
	display: none;
}

.input-item input[type="file"]:enabled:hover+label {}

.input-item input[type="file"]:disabled+label.force-button.formular {
	border-color: var(--btn-formular-border-disabled-color);
	color: var(--btn-formular-disabled-color);
	background-color: var(--btn-formular-bg-disabled-color);
	cursor: not-allowed;
}

/* von button.formular:disabled */


/*   required   */

.input.required .input-title {
	color: var(--required-title-color);
}

.input.required.w-symbol .input-title::after {
	content: " *";
}

.input.required .input-item label {
	color: var(--required-input-label-color);
}

.input.required.w-symbol .input-item label::after {
	content: " *";
}

.input.required input,
.input.required select,
.input.required textarea {
	color: var(--required-input-text-color);
}


/*   invalid   */

.input.invalid .input-title::after {
	content: var(--invalid-tag-text) !important;
	display: inline-block;
	margin: 0 0 0 5px;
	color: var(--invalid-tag-color);
}

.input.invalid input,
.input.invalid select,
.input.invalid textarea {
	border-color: var(--invalid-border-color);
}

.input.invalid input[type="radio"]+label:not(.force-button),
.input.invalid input[type="checkbox"]+label:not(.force-button) {
	color: var(--invalid-tag-color);
}



/*************/
/*   °Text   */
/*************/

* {
	font-family: var(--main-font-family);
}

body>div {
	font-size: var(--main-font-size);
}

@media only screen and (max-width: 620px) {
	body>div {
		font-size: 16px;
	}
}


/***   !headlines   ***/

h1 {
	font-family: var(--h1-font-family);
	font-size: var(--h1-font-size);
	line-height: normal;
	font-weight: var(--h1-font-weight);
	color: var(--h1-color);
	letter-spacing: 0px;
	text-transform: none;
	text-decoration: none;
	margin: 0;
}

h2 {
	font-family: var(--h2-font-family);
	font-size: var(--h2-font-size);
	line-height: normal;
	font-weight: var(--h2-font-weight);
	color: var(--h2-color);
	text-decoration: none;
	margin: 0px 0 10px 0;
}


h3 {
	font-family: var(--h3-font-family);
	font-size: var(--h3-font-size);
	line-height: normal;
	font-weight: var(--h3-font-weight);
	color: var(--h3-color);
	text-decoration: none;
	margin: 0 0 10px 0;
}

h3.school-name {
	color: #0fa03f;
	margin: 0 0 0px 0;
}


h4 {
	font-family: var(--h4-font-family);
	font-size: var(--h4-font-size);
	line-height: normal;
	font-weight: var(--h4-font-weight);
	color: var(--h4-color);
	text-decoration: none;
	margin: 0 0 10px 0;
}

#protocols-details-general h4 {
	font-size: 1em;
	color: #183f60;
	margin: 0;
}


h5 {
	display: inline;
	font-family: var(--h5-font-family);
	font-size: var(--h5-font-size);
	line-height: normal;
	font-weight: var(--h5-font-weight);
	color: var(--h5-color);
	text-decoration: none;
	margin: 0;
}

h6 {
	font-family: var(--h6-font-family);
	font-size: var(--h6-font-size);
	line-height: normal;
	font-weight: var(--h6-font-weight);
	color: var(--h6-color);
	text-decoration: none;
	margin: 0;
}

/*   break-line   */

h2.break-line,
h3.break-line,
h4.break-line,
h5.break-line,
h6.break-line {
	margin: 0px 0 18px 0;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: var(--headline-break-line-color);
}



/***   !text   ***/

.text {
	font-family: var(--text-font-family);
	font-size: var(--text-font-size);
	line-height: var(--text-line-height);
	font-weight: var(--text-font-weight);
	color: var(--text-color);
	text-decoration: none;
}

/* vorher: .hint-text */
.text.hint {
	color: var(--hint-color);
}

.text.warning {
	color: var(--warning-color);
}

.text.error {
	color: var(--error-color);
}

.text.success {
	color: var(--success-color);
}


/***   !links   ***/

a {
	color: var(--link-color);
	text-decoration: underline;
	cursor: pointer;
}

a:hover {
	color: var(--link-hover-color);
	text-decoration: none;
}

a.force-button {
	text-decoration: none;
}

a.force-button:hover {
	color: var(--link-btn-hover-color);
}


/***   !code   ***/

.code {
	font-family: var(--code-font-family);
}

.code.bg {
	display: inline-block;
	margin: 2px 0 2px 0;
	padding: 0 4px 0 4px;
	border-radius: 3px;
	background-color: var(--code-bg-color);
}



/***************/
/*   °Tables   */
/***************/

.table-ctr {
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
}

table tr th,
table tr td {
	padding: 5px 6px 5px 6px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: var(--th-td-bottom-border-color);
}

table thead tr {
	background-color: var(--thead-bg-color);
}

table thead th,
table thead td {
	text-align: left;
	font-weight: normal !important;
	color: var(--thead-color);
}

table thead th.clickable:hover {
	background-color: var(--thead-clickable-hover-bg-color);
	color: var(--thead-clickable-hover-color);
	cursor: pointer;
}

.table.even table tbody tr:nth-child(even),
table.even tbody tr:nth-child(even) {
	background-color: var(--tbody-tr-bg-even-color);
}

.table.odd table tbody tr:nth-child(odd),
table.odd tbody tr:nth-child(odd) {
	background-color: var(--tbody-tr-bg-odd-color);
}

.table.hover table tbody tr:hover td,
table.hover tbody tr:hover td {
	background-color: var(--tbody-tr-bg-hover-color);
}

table tr td.pre {
	white-space: pre;
}


table tbody tr.clickable:hover,
table tbody td.clickable:hover {
	color: var(--tbody-bg-clickable-hover-color);
	cursor: pointer;
}

.table.v-align-top table tbody tr,
table.v-align-top tbody tr,
table tbody tr.v-align-top,
table tbody td.v-align-top {
	vertical-align: top;
}

/*   bordered   */

.table.bordered,
table.bordered {
	border-radius: var(--table-bordered-radius);
}

.table.bordered table tr th,
.table.bordered table tr td,
table.bordered tr th,
table.bordered tr td {
	border-style: solid;
	border-width: 1px;
	border-color: var(--table-bordered-border-color);
}

/*   clean   */

.table.clean table tr th,
.table.clean table tr td,
table.clean tr th,
table.clean tr td {
	padding: 5px 10px 5px 10px;
	border-bottom-style: none;
}

.table.clean table tr th:first-child,
.table.clean table tr td:first-child,
table.clean tr th:first-child,
table.clean tr td:first-child {
	padding: 5px 10px 5px 0px;
}

.table.clean table tr th:last-child,
.table.clean table tr td:last-child,
table.clean tr th:last-child,
table.clean tr td:last-child {
	padding: 5px 0px 5px 10px;
}

.table.clean table tr th:only-child,
.table.clean table tr td:only-child,
table.clean tr th:only-child,
table.clean tr td:only-child {
	padding: 5px 0px 5px 0px;
}

.table.clean table thead tr,
table.clean thead tr {
	background-color: transparent;
}

.table.clean table thead th,
.table.clean table thead td,
table.clean thead th,
table.clean thead td {
	color: inherit;
}


/*   permission table   */

.table.clean table.permissions-table tr th,
.table.clean table.permissions-table tr td,
table.clean.permissions-table tr th,
table.clean.permissions-table tr td {
	padding: 8px 14px 8px 14px !important;
}

.table.clean table.permissions-table tr th:first-child,
.table.clean table.permissions-table tr td:first-child,
table.clean.permissions-table tr th:first-child,
table.clean.permissions-table tr td:first-child {
	padding: 8px 14px 8px 0px !important;
}

.table.clean table.permissions-table tbody td,
table.clean.permissions-table tbody td {
	text-align: center;
}

.table.clean table.permissions-table tbody td:first-child,
table.clean.permissions-table tbody td:first-child {
	text-align: left;
}

/***   !table msg   ***/

.table-msg {
	background-color: transparent !important;
}

.table-msg td {
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: transparent !important;
}


/****************/
/*   °Toolbar   */
/****************/

.toolbar {
	margin: 0;
	padding: 15px 6px 15px 6px;
	border-style: none;
	border-radius: var(--toolbar-broder-radius);
	background-color: var(--toolbar-bg-color);
}



/************************/
/*   °Messages / °MSG   */
/************************/

.msg {
	width: 100%;
	margin: 0;
	border-style: none;
	box-sizing: border-box;
}

.msg p {
	margin: 15px 0 15px 0;
}

.msg p:first-child {
	margin: 0 0 15px 0;
}

.msg p:last-child {
	margin: 15px 0 0px 0;
}

.msg p:only-child {
	margin: 0px 0 0px 0;
}


/*   boxed   */

.msg.boxed {
	padding: 15px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--msg-boxed-border-color);
	border-radius: var(--msg-boxed-border-radius);
}

/*   colored   */

.msg.colored {
	padding: 15px;
	border-radius: var(--msg-colored-border-radius);
	background-color: var(--msg-colored-bg-color);
}

/*   centered   */

.msg.centered {
	text-align: center;
}

/*   error   */

.msg.error {
	color: var(--error-color);
}

.msg.boxed.error {
	border-color: var(--error-color);
}

.msg.colored.error {
	color: var(--msg-colored-error-color);
	background-color: var(--msg-colored-error-bg-color);
}

/*   success   */

.msg.success {
	color: var(--success-color);
}

.msg.boxed.success {
	border-color: var(--success-color) !important;
}

.msg.colored.success {
	color: var(--msg-colored-success-color);
	background-color: var(--msg-colored-success-bg-color);
}

/*   hint   */

.msg.hint {
	color: var(--hint-color);
}

.msg.boxed.hint {
	border-color: var(--hint-color) !important;
}

.msg.colored.hint {
	color: var(--msg-colored-hint-color);
	background-color: var(--msg-colored-hint-bg-color);
}

/*   note   */

.msg.note {
	color: var(--note-color);
}

.msg.boxed.note {
	border-color: var(--note-color) !important;
}

.msg.colored.note {
	color: var(--msg-colored-note-color);
	background-color: var(--msg-colored-note-bg-color);
}



/*************/
/*   °flag   */
/*************/

.flag {
	display: inline-block;
	padding: 2px 5px 2px 5px;
	border-radius: 3px;
	vertical-align: middle;

	font-size: 0.6em;
}

.flag.green {
	color: var(--flag-green-color);
	background-color: var(--flag-green-bg-color);
}

.flag.red {
	color: var(--flag-red-color);
	background-color: var(--flag-red-bg-color);
}

.flag.gray {
	color: var(--flag-gray-color);
	background-color: var(--flag-gray-bg-color);
}



/**********************/
/*   category-label   */
/**********************/

.category-label {
	margin: 0px 0px 0px 0px;
}

.category-label.inline {
	display:inline-block;
	margin: 0px 10px 0px 0px;
}

.category-label.inline:last-of-type {
	margin: 0px 0px 0px 0px;
}

.category-label > span {
	display:inline-block;
	vertical-align:middle;
	width:0.6em;
	height:0.6em;
	margin:0 0.2em 0.12em 0;
	border-radius:1em;

	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
}



/****************/
/*   °Buttons   */
/****************/

/*   Default   */

button,
.force-button {
	display: inline-block;
	min-height: 32px;
	margin: 3px 8px 3px 0px;
	padding: 8px 10px 8px 10px;
	border-style: solid;
	border-width: var(--btn-border-with);
	border-color: var(--btn-border-color);
	border-radius: var(--btn-border-radius);
	background-color: var(--btn-bg-color);
	box-sizing: border-box;
	cursor: pointer;

	font-size: 12px;
	line-height: 14px;
	color: var(--btn-color);

	transition: var(--btn-transition);
}

button:last-of-type,
.force-button:last-of-type,
button.textbtn:last-of-type {
	margin: 3px 0px 3px 0px;
}

button.space-none,
.force-button.space-none {
	margin: 0;
}

button:focus,
.force-button:focus {
	outline-style: var(--btn-outline-focus-style);
	outline-width: 2px;
	outline-color: var(--btn-outline-focus-color);
}

button:enabled:hover,
.force-button:hover {
	color: var(--btn-hover-color);
	border-color: var(--btn-border-hover-color);
	background-color: var(--btn-bg-hover-color);
}

button:disabled {
	color: var(--btn-disabled-color);
	background-color: var(--btn-bg-disabled-color);
	cursor: not-allowed;
}


.input-item button,
.input-item .force-button {
	margin-top: 0px;
	margin-bottom: 0px;
}

.html-editor-toolbar button {
	margin: 3px 8px 3px 0px;
}


/*   padding   */

button.padding-none {
	padding:0;
}



/*   fullwidth   */

button.fullwidth,
.force-button.fullwidth {
	width: 100%;
}



/*   Delete Styles   */

button.delete,
.force-button.delete {
	border-color: var(--btn-delete-border-color);
}

button.delete:disabled {
	color: var(--btn-delete-disabled-color);
	background-color: var(--btn-delete-bg-disabled-color);
}

button.delete:enabled:hover,
.force-button.delete:hover {
	border-color: var(--btn-delete-border-hover-color);
	background-color: var(--btn-delete-bg-hover-color);
	color: var(--btn-delete-hover-color);
}

button.textbtn.delete,
.force-button.delete {
	color: var(--delete-color);
}

button.textbtn.delete:disabled {
	background-color: transparent;
	color: var(--btn-delete-disabled-color);
}


/*   Subtle   */

button.subtle,
.force-button.subtle {
	border-width: var(--btn-subtle-border-width, var(--btn-border-with));
	border-color: var(--btn-subtle-border-color, var(--btn-border-color));
	border-radius: var(--btn-subtle-border-radius, var(--btn-border-radius));
	background-color: var(--btn-subtle-bg-color, var(--btn-bg-color));

	color: var(--btn-subtle-color, var(--btn-color));
}

button.formular:enabled:hover,
.force-button.subtle:hover {
	color: var(--btn-subtle-hover-color, var(--btn-hover-color));
	border-color: var(--btn-subtle-border-hover-color, var(--btn-border-hover-color));
	background-color: var(--btn-subtle-bg-hover-color, var(--btn-bg-hover-color));
}

button.subtle:disabled {
	border-color: var(--btn-subtle-border-disabled-color, var(--btn-border-disabled-color));
	color: var(--btn-subtle-disabled-color, var(--btn-disabled-color));
	background-color: var(--btn-subtle-bg-disabled-color, var(--btn-bg-disabled-color));
	cursor: not-allowed;
}


/*   unboxed   */

button.unboxed {
	border-style: none;
}

button.unboxed:enabled:hover,
.force-button.unboxed:hover {
	border-style: none;
}


/*   uncolored   */

button.uncolored {
	background-color:transparent;
}

button.uncolored:enabled:hover,
.force-button.uncolored:hover {
	background-color: transparent;
}


/*   Formular   */

button.formular,
.force-button.formular {
	border-width: var(--btn-formular-border-width, var(--btn-border-width));
	border-color: var(--btn-formular-border-color, var(--btn-border-color));
	border-radius: var(--btn-formular-border-radius, var(--btn-border-radius));
	background-color: var(--btn-formular-bg-color, var(--btn-formular-bg-color));

	color: var(--btn-formular-color, var(--btn-color));
}

button.formular:enabled:hover,
.force-button.formular:hover {
	color: var(--btn-formular-hover-color, var(--btn-hover-color));
	border-color: var(--btn-formular-border-hover-color, var(--btn-border-hover-color));
	background-color: var(--btn-formular-bg-hover-color, var(--btn-bg-hover-color));
}

button.formular:disabled {
	border-color: var(--btn-formular-border-disabled-color, var(--btn-border-disabled-color));
	color: var(--btn-formular-disabled-color, var(--btn-border-disabled-color));
	background-color: var(--btn-formular-bg-disabled-color, var(--btn-bg-disabled-color));
	cursor: not-allowed;
}

/* auch bei input type file genutzt */


/*   Text   */

button.textbtn {
	min-height: auto;
	margin: 3px 16px 3px 0px;
	padding: 0;
	border-style: none;
	background-color: transparent;

	display: inline-block;

	font-size: inherit;
	line-height: normal;
	color: var(--textbtn-color);
}

button.textbtn:disabled {
	color: var(--textbtn-disabled-color);
}

button.textbtn:enabled:hover {
	border-style: none;
	background-color: var(--textbtn-hover-bg-color);
	color: var(--textbtn-hover-color);
}

button.textbtn.add::before {
	content: '+ ';
}


/*   Icon   */

button.iconbtn {
	/* padding: 5px 10px 3px 10px; */
}

button.iconbtn::after,
.html-editor-button > .iconbtn::after {
	content: '';
	display: inline-block;
	width: 21px;
	height: 21px;
	vertical-align: middle;
}

button.iconbtn.small::after,
.html-editor-button > .iconbtn.small::after {
	width: 14px;
	height: 14px;
}

button.iconbtn.delete:enabled:hover {
	background-color: transparent;
}

button.iconbtn:disabled {
	opacity: 0.4;
}


.html-editor-button:hover {
	background-color: var(--bg-hover-color);
	color: var(--input-text-hover-color);
}

.html-editor-button-selected {
	border-color: var(--big-border-color-checked);
	background-color: var(--big-bg-color-checked);
	color: inherit;
}

.html-editor-button-selected:hover {
	background-color: var(--big-bg-color-checked-hover);
	color: var(--big-color-checked-hover);
}



/*   svg   */

button.svg {
	width: 32px;
	height: 32px;
	padding: 4px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--btn-border-color);
	border-radius: var(--btn-border-radius);
}

button.svg.small {
	width: 16px;
	height: 16px;
	min-height: auto;
	padding: 3px;
	box-sizing: initial;
}

button.svg svg {
	width: 100%;
	height: 100%;
}

button.svg svg line {
	stroke-width: 1;
	stroke: var(--btn-color);
}

button.svg:enabled:hover svg line {
	stroke: var(--btn-hover-color);
}

button.svg:disabled svg line {
	stroke: var(--btn-disabled-color);
}


/*   button with icon   */

button.w-icon,
.force-button.w-icon {
	display: inline-flex !important;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
}

button.w-icon::before,
.force-button.w-icon::before,
button.w-icon::after,
.force-button.w-icon::after {
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	color: var(--btn-bg-color);
	box-sizing: border-box;
	vertical-align: middle;
}

button.w-icon.small::before,
.force-button.w-icon.small::before,
button.w-icon.small::after,
.force-button.w-icon.small::after {
	width: 14px;
	height: 14px;
}

button.w-icon.left::before,
.force-button.w-icon.left::before {
	content: '';
	margin: 0 8px 0 0px;
}

button.w-icon.right::after,
.force-button.w-icon.right::after {
	content: '';
	margin: 0 0 0 8px;
}


/*   input with reset button   */

.input.w-reset .input-item {
	position: relative;
}

.input.w-reset .input-item input {
	padding-right: 20px;
}

.input.w-reset .input-item button {
	position: absolute;
	display: block;

	width: 15px;
	height: 15px;

	right: 5px;
	top: 50%;
	transform: translateY(-50%);

	min-height: 0;
	margin: 0;
	padding: 0;
	border-style: none;
	background-color: transparent;
}

.input.w-reset .input-item button:disabled {
	opacity: 0.3;
}


/*   input with currency   */

.input.w-currency .input-item {
	position: relative;
}

.input.w-currency .input-item::before {
	content: '€';
	position: absolute;
	display: block;

	left: 5px;
	top: 50%;
	transform: translateY(-50%);

	color: #888888;
}

.input.w-currency .input-item input {
	padding-left: 16px;
}


/*   search   */

.input.search .input-item {
	position: relative;
}

.input.search .input-item::before {
	content: '';
	position: absolute;
	display: block;
	width: 14px;
	height: 14px;

	left: 5px;
	top: 50%;
	transform: translateY(-50%);

	background-image: url("../icons_spritesheet.png");
	background-size: 90px auto;
	background-position: 0px -150px;
}

.input.search.black .input-item::before {
	background-position: -30px -150px;
}

.input.search .input-item input {
	min-width: 165px;
	padding-left: 23px;
}