/**
 * @copyright 2025 USTP
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as
 * published by the Free Software Foundation; either version 2 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307, USA.
 *
 * @author: Fabian Gabler <fabian.gabler@ustp.at>
 * @author: Florian Halbartschlager <florian.halbartschlager@ustp.at>
 */

:root {
	--colors-primary-color-50: #f3f8fb;
	--colors-primary-color-200: #c7dcec;
	--colors-primary-color-700: #0f3570;
	--colors-primary-color-950: #0b0923;

	--colors-on-primary-color-50: black;
	--colors-on-primary-color-100: black;
	--colors-on-primary-color-200: black;
	--colors-on-primary-color-300: white;
	--colors-on-primary-color-400: white;
	--colors-on-primary-color-500: white;
	--colors-on-primary-color-600: white;
	--colors-on-primary-color-700: white;
	--colors-on-primary-color-800: white;
	--colors-on-primary-color-900: white;
	--colors-on-primary-color-950: white;


	--colors-surface-color-50: #f8fafc;
	--colors-surface-color-100: #f1f5f9;
	--colors-surface-color-200: #e2e8f0;
	--colors-surface-color-300: #cbd5e1;
	--colors-surface-color-400: #94a3b8;
	--colors-surface-color-500: #64748b;
	--colors-surface-color-600: #475569;
	--colors-surface-color-700: #334155;
	--colors-surface-color-800: #1e293b;
	--colors-surface-color-900: #0f172a;
	--colors-surface-color-950: #020617;

	--colors-on-surface-color-50: black;
	--colors-on-surface-color-100: black;
	--colors-on-surface-color-200: black;
	--colors-on-surface-color-300: black;
	--colors-on-surface-color-400: black;
	--colors-on-surface-color-500: white;
	--colors-on-surface-color-600: white;
	--colors-on-surface-color-700: white;
	--colors-on-surface-color-800: white;
	--colors-on-surface-color-900: white;
	--colors-on-surface-color-950: white;


	/* @deprecated use: --color-primary-500 */
	--color-primary: var(--colors-primary-color-500);
	/* @deprecated use: --color-primary-300 */
	--color-primary-light: var(--colors-primary-color-300);

	--color-primary-50: var(--colors-primary-color-50);
	--color-primary-100: var(--colors-primary-color-100);
	--color-primary-200: var(--colors-primary-color-200);
	--color-primary-300: var(--colors-primary-color-300);
	--color-primary-400: var(--colors-primary-color-400);
	--color-primary-500: var(--colors-primary-color-500);
	--color-primary-600: var(--colors-primary-color-600);
	--color-primary-700: var(--colors-primary-color-700);
	--color-primary-800: var(--colors-primary-color-800);
	--color-primary-900: var(--colors-primary-color-900);
	--color-primary-950: var(--colors-primary-color-950);

	--color-on-primary-50: var(--colors-on-primary-color-50);
	--color-on-primary-100: var(--colors-on-primary-color-100);
	--color-on-primary-200: var(--colors-on-primary-color-200);
	--color-on-primary-300: var(--colors-on-primary-color-300);
	--color-on-primary-400: var(--colors-on-primary-color-400);
	--color-on-primary-500: var(--colors-on-primary-color-500);
	--color-on-primary-600: var(--colors-on-primary-color-600);
	--color-on-primary-700: var(--colors-on-primary-color-700);
	--color-on-primary-800: var(--colors-on-primary-color-800);
	--color-on-primary-900: var(--colors-on-primary-color-900);
	--color-on-primary-950: var(--colors-on-primary-color-950);


	--color-surface-50: var(--colors-surface-color-50);
	--color-surface-100: var(--colors-surface-color-100);
	--color-surface-200: var(--colors-surface-color-200);
	--color-surface-300: var(--colors-surface-color-300);
	--color-surface-400: var(--colors-surface-color-400);
	--color-surface-500: var(--colors-surface-color-500);
	--color-surface-600: var(--colors-surface-color-600);
	--color-surface-700: var(--colors-surface-color-700);
	--color-surface-800: var(--colors-surface-color-800);
	--color-surface-900: var(--colors-surface-color-900);
	--color-surface-950: var(--colors-surface-color-950);

	--color-on-surface-50: var(--colors-on-surface-color-50);
	--color-on-surface-100: var(--colors-on-surface-color-100);
	--color-on-surface-200: var(--colors-on-surface-color-200);
	--color-on-surface-300: var(--colors-on-surface-color-300);
	--color-on-surface-400: var(--colors-on-surface-color-400);
	--color-on-surface-500: var(--colors-on-surface-color-500);
	--color-on-surface-600: var(--colors-on-surface-color-600);
	--color-on-surface-700: var(--colors-on-surface-color-700);
	--color-on-surface-800: var(--colors-on-surface-color-800);
	--color-on-surface-900: var(--colors-on-surface-color-900);
	--color-on-surface-950: var(--colors-on-surface-color-950);

	/* custom darkmode colors @cis_theme_dark.css*/
	--color-dm-surface-white: white;
	--color-dm-on-surface-white: black;
	--color-dm-surface-white-light: white;
	--color-dm-on-surface-white-light: black;
	--color-dm-on-surface-white-grey: grey;

	--color-green: #028A0F;
	--color-lime: #ADDA45;
	--color-yellow: #FD0;
	--color-orange: #F80;
	--color-red: #B44040;
	--color-red-bright: #FF0000;
	--color-purple: #4B0082;

	--color-on-green: white;
	--color-on-lime: black;
	--color-on-yellow: black;
	--color-on-orange: white;
	--color-on-red: white;
	--color-on-red-bright: white;
	--color-on-purple: white;

	--color-ms-excel: #1D6F42;
	--color-ms-word: #2B579A;
	--color-ms-powerpoint: #D04423;
	--color-pdf: #F40F02;

	--color-on-ms-excel: white;
	--color-on-ms-word: white;
	--color-on-ms-powerpoint: white;
	--color-on-pdf: white;

	--color-lvp-hover: lemonchiffon;

	--color-ffa-incomplete: #CCFFFF;
	--color-ffa-fg: #FF9900;
	--color-ffa-ok: #CCFFCC;
	--color-ffa-no: #FF99CC;

	--color-oles-bg: #FFDFDF;
	--color-oles-ok: #C8FFBF;

	--color-zahlungen-pending: #FFA69F;
	--color-zahlungen-credit: #D1EFDB;

	--color-ressource-hover: #fbffc1;

	--color-sem-header: var(--colors-primary-color-800);
	--color-sem-on-header: var(--colors-on-primary-color-800);
	--color-sem-header-hover: var(--colors-primary-color-500);
	--color-sem-on-header-hover: var(--colors-on-primary-color-500);

	--color-sem-header-menu: var(--colors-primary-color-500);
	--color-sem-on-header-menu: var(--colors-on-primary-color-500);
	--color-sem-header-menu-hover: var(--colors-primary-color-700);
	--color-sem-on-header-menu-hover: var(--colors-on-primary-color-700);

	--color-sem-footer: var(--colors-primary-color-800);
	--color-sem-on-footer: var(--colors-on-primary-color-800);


	--p-300: .25rem;
	--p-500: .625rem;
	--p-700: .938rem;

	/* @deprecated */
	--small-padding: .25rem;
	/* @deprecated */
	--standard-padding: .625rem;
	/* @deprecated */
	--big-padding: .938rem;


	--header-height: 3rem;


	--btn-color-bg: var(--color-primary-500);
	--btn-color-text: var(--color-on-primary-500);
	--btn-color-border: var(--color-primary-500);
	--btn-hover-color-bg: var(--color-on-primary-500);
	--btn-hover-color-text: var(--color-primary-500);
	--btn-hover-color-border: var(--color-primary-500);

	/* For: grid-cols-auto-fit */
	--grid-layout-gap: .5rem;
	--grid-column-count: 5;
	--grid-item--min-width: 20ch;

	--cis_timeline-line-width: min(calc(.5em / 2), calc((.5em / 4) + 4px));
	--cis_timeline-line-color: var(--color-primary-light);
	--cis_timeline-circle-diameter: calc((1em / 2) + 8px);
	--cis_timeline-circle-color: var(--color-primary);
}


/* ### General Styles ### */
html {
	min-height: 100vh;
}

body {
	min-height: 100vh;
	background-color: var(--color-surface-50);
	color: var(--color-on-surface-50);
	display: flex;
	flex-direction: column;
	font-weight: 100;
}

p,
.p {
	font-size: 1em;
	line-height: 1.5em;
}

h1,
.h1 {
	font-size: 2rem;
}

h2,
.h2 {
	font-size: 1.5rem;
}

h3,
.h3 {
	font-size: 1.17rem;
}

h4,
.h4 {
	font-size: 1rem;
	font-weight: 500;
}

h5,
.h5 {
	font-size: .83rem;
}

h6,
.h6 {
	font-size: .75rem;
}


/* ### Layout ### */
#body.no-scroll {
	overflow: hidden;
}

#main {
	display: flex;
	flex: 1;
	min-height: calc(100vh - 8rem);
	width: 100%;
}

#content {
	display: flex;
	flex: 1;
	flex-direction: column;
}

#header {
	height: 3rem;
	z-index: 220;
	position: fixed;
	top: 0;
}

#subheader {
	height: 3rem;
	top: 3rem;
	z-index: 5;
	z-index: 12;
}

#footer {
	padding: var(--p-700);
}

#navigation,
#notifications_sidebar,
#settings_sidebar,
#personal_sidebar,
#message_sidebar {
	z-index: 10;
}

#navigation,
#notifications_sidebar,
#settings_sidebar,
#personal_sidebar {
	width: 20rem;
}

#message_sidebar,
#notifications_sidebar,
#settings_sidebar,
#personal_sidebar {
	position: fixed;
	top: var(--header-height);
	right: 0;
	max-height: calc(100% - var(--header-height));
	font-size: 0.9em;
}

#personal_menu {
	z-index: 20;
	top: var(--header-height);
}

#personal_menu ul li {
	list-style-type: none;
}

#cis_profile_icon {
	height: 2rem;
	width: 2rem;
}

#navigation {
	flex-direction: column;
	transition: margin .3s;
	position: fixed !important;
	top: var(--header-height);
	height: calc(100% - var(--header-height));
}

#navigation a,
#navigation .dropdown_title {
	padding-top: var(--p-300);
	padding-bottom: var(--p-300);
}

#quicklink_menu {
	top: 3rem;
	z-index: 20;
}

#actual_content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

#actual_content a:not(.cis_btn) {
	color: var(--color-primary);
}

#actual_content a:not(.cis_btn):hover {
	text-decoration: underline;
}

#actual_content .hover\:no-underline:hover {
	text-decoration: none !important;
}

#page_help {
	z-index: 10;
}

#page_help_text {
	position: absolute;
	right: 1rem;
	width: 600px;
	height: 370px;
	height: auto;
	top: 3.5rem;
	font-size: .875rem;
	border-radius: 6px;
	opacity: 1;
}

#page_help_text:after {
	content: '';
	position: absolute;
	top: -9px;
	right: 4px;
	width: 0;
	height: 0;
	border: 19px solid transparent;
	border-top-color: #2F3543;
	border-bottom: 0;
	border-left: 0;
	margin-left: 9.5px;
	margin-bottom: 19px;
	transform: rotate(-45deg);
}

.page_help_hidden {
	top: 1.5rem !important;
	opacity: 0 !important;
	display: none;
}

#nachoben {
	right: 16px;
	z-index: 20;
	bottom: -1000px;
}

@media (max-width:768px) {

	#navigation,
	#notifications_sidebar,
	#personal_menu {
		position: fixed;
	}

	#page_help {
		top: 4.8rem;
		right: 1rem;
	}

	#page_help_button {
		top: -1rem;
		right: 4rem;
		color: #407CB4;
	}

	#page_help_text {
		width: 90%;
		right: 5%;
		max-height: 80%;
	}

	#page_help_text:after {
		content: '';
		position: absolute;
		top: -9px;
		right: 4px;
		width: 0;
		height: 0;
		border: 19px solid transparent;
		border-top-color: transparent;
		border-bottom: 0;
		border-left: 0;
		margin-left: 9.5px;
		margin-bottom: 19px;
		transform: rotate(-45deg);
	}
}


/* ### Background-Color ### */
.bg-primary-50 {
	background-color: var(--color-primary-50);
	color: var(--color-on-primary-50);
}

.hover\:bg-primary-50:hover {
	background-color: var(--color-primary-50);
	color: var(--color-on-primary-50);
}

.bg-primary-100 {
	background-color: var(--color-primary-100);
	color: var(--color-on-primary-100);
}

.hover\:bg-primary-100:hover {
	background-color: var(--color-primary-100);
	color: var(--color-on-primary-100);
}

.bg-primary-200 {
	background-color: var(--color-primary-200);
	color: var(--color-on-primary-200);
}

.hover\:bg-primary-200:hover {
	background-color: var(--color-primary-200);
	color: var(--color-on-primary-200);
}

.bg-primary-300 {
	background-color: var(--color-primary-300);
	color: var(--color-on-primary-300);
}

.hover\:bg-primary-300:hover {
	background-color: var(--color-primary-300);
	color: var(--color-on-primary-300);
}

.bg-primary-400 {
	background-color: var(--color-primary-400);
	color: var(--color-on-primary-400);
}

.hover\:bg-primary-400:hover {
	background-color: var(--color-primary-400);
	color: var(--color-on-primary-400);
}

.bg-primary-500 {
	background-color: var(--color-primary-500);
	color: var(--color-on-primary-500);
}

.hover\:bg-primary-500:hover {
	background-color: var(--color-primary-500);
	color: var(--color-on-primary-500);
}

.bg-primary-600 {
	background-color: var(--color-primary-600);
	color: var(--color-on-primary-600);
}

.hover\:bg-primary-600:hover {
	background-color: var(--color-primary-600);
	color: var(--color-on-primary-600);
}

.bg-primary-700 {
	background-color: var(--color-primary-700);
	color: var(--color-on-primary-700);
}

.hover\:bg-primary-700:hover {
	background-color: var(--color-primary-700);
	color: var(--color-on-primary-700);
}

.bg-primary-800 {
	background-color: var(--color-primary-800);
	color: var(--color-on-primary-800);
}

.hover\:bg-primary-800:hover {
	background-color: var(--color-primary-800);
	color: var(--color-on-primary-800);
}

.bg-primary-900 {
	background-color: var(--color-primary-900);
	color: var(--color-on-primary-900);
}

.hover\:bg-primary-900:hover {
	background-color: var(--color-primary-900);
	color: var(--color-on-primary-900);
}

.bg-primary-950 {
	background-color: var(--color-primary-950);
	color: var(--color-on-primary-950);
}

.hover\:bg-primary-950:hover {
	background-color: var(--color-primary-950);
	color: var(--color-on-primary-950);
}

.bg-surface-50 {
	background-color: var(--color-surface-50);
	color: var(--color-on-surface-50);
}

.hover\:bg-surface-50:hover {
	background-color: var(--color-surface-50);
	color: var(--color-on-surface-50);
}

.bg-surface-100 {
	background-color: var(--color-surface-100);
	color: var(--color-on-surface-100);
}

.hover\:bg-surface-100:hover {
	background-color: var(--color-surface-100);
	color: var(--color-on-surface-100);
}

.bg-surface-200 {
	background-color: var(--color-surface-200);
	color: var(--color-on-surface-200);
}

.hover\:bg-surface-200:hover {
	background-color: var(--color-surface-200);
	color: var(--color-on-surface-200);
}

.bg-surface-300 {
	background-color: var(--color-surface-300);
	color: var(--color-on-surface-300);
}

.hover\:bg-surface-300:hover {
	background-color: var(--color-surface-300);
	color: var(--color-on-surface-300);
}

.bg-surface-400 {
	background-color: var(--color-surface-400);
	color: var(--color-on-surface-400);
}

.hover\:bg-surface-400:hover {
	background-color: var(--color-surface-400);
	color: var(--color-on-surface-400);
}

.bg-surface-500 {
	background-color: var(--color-surface-500);
	color: var(--color-on-surface-500);
}

.hover\:bg-surface-500:hover {
	background-color: var(--color-surface-500);
	color: var(--color-on-surface-500);
}

.bg-surface-600 {
	background-color: var(--color-surface-600);
	color: var(--color-on-surface-600);
}

.hover\:bg-surface-600:hover {
	background-color: var(--color-surface-600);
	color: var(--color-on-surface-600);
}

.bg-surface-700 {
	background-color: var(--color-surface-700);
	color: var(--color-on-surface-700);
}

.hover\:bg-surface-700:hover {
	background-color: var(--color-surface-700);
	color: var(--color-on-surface-700);
}

.bg-surface-800 {
	background-color: var(--color-surface-800);
	color: var(--color-on-surface-800);
}

.hover\:bg-surface-800:hover {
	background-color: var(--color-surface-800);
	color: var(--color-on-surface-800);
}

.bg-surface-900 {
	background-color: var(--color-surface-900);
	color: var(--color-on-surface-900);
}

.hover\:bg-surface-900:hover {
	background-color: var(--color-surface-900);
	color: var(--color-on-surface-900);
}

.bg-surface-950 {
	background-color: var(--color-surface-950);
	color: var(--color-on-surface-950);
}

.hover\:bg-surface-950:hover {
	background-color: var(--color-surface-950);
	color: var(--color-on-surface-950);
}

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

.bg-lime {
	background-color: var(--color-lime);
	color: var(--color-on-lime);
}

.bg-yellow {
	background-color: var(--color-yellow);
	color: var(--color-on-yellow);
}

.bg-orange {
	background-color: var(--color-orange);
	color: var(--color-on-orange);
}

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

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

.bg-sem-header {
	background-color: var(--color-sem-header);
	color: var(--color-sem-on-header);
}

.hover\:bg-sem-header:hover {
	background-color: var(--color-sem-header-hover);
	color: var(--color-sem-on-header-hover);
}

.bg-sem-header-menu {
	background-color: var(--color-sem-header-menu);
	color: var(--color-sem-on-header-menu);
}

.hover\:bg-sem-header-menu:hover {
	background-color: var(--color-sem-header-menu-hover);
	color: var(--color-sem-on-header-menu-hover);
}

.bg-sem-footer {
	background-color: var(--color-sem-footer);
	color: var(--color-sem-on-footer);
}


/* ### Text-Color ### */
.text-color-base {
	color: var(--color-on-surface-50);
}

.hover\:text-color-base:hover {
	color: var(--color-on-surface-50);
}

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

.hover\:text-green:hover {
	color: var(--color-green);
}

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

.hover\:text-lime:hover {
	color: var(--color-lime);
}

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

.hover\:text-yellow:hover {
	color: var(--color-yellow);
}

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

.hover\:text-orange:hover {
	color: var(--color-orange);
}

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

.hover\:text-red:hover {
	color: var(--color-red);
}

.text-red-bright {
	color: var(--color-red-bright);
}

.hover\:text-red-bright:hover {
	color: var(--color-red-bright);
}

.text-surface-50 {
	color: var(--color-surface-50);
}

.text-on-surface-50 {
	color: var(--color-on-surface-50);
}

.text-surface-100 {
	color: var(--color-surface-100);
}

.text-on-surface-100 {
	color: var(--color-on-surface-100);
}

.text-surface-200 {
	color: var(--color-surface-200);
}

.text-on-surface-200 {
	color: var(--color-on-surface-200);
}

.text-surface-300 {
	color: var(--color-surface-300);
}

.text-on-surface-300 {
	color: var(--color-on-surface-300);
}

.text-surface-400 {
	color: var(--color-surface-400);
}

.text-on-surface-400 {
	color: var(--color-on-surface-400);
}

.text-surface-500 {
	color: var(--color-surface-500);
}

.text-on-surface-500 {
	color: var(--color-on-surface-500);
}

.text-surface-600 {
	color: var(--color-surface-600);
}

.text-on-surface-600 {
	color: var(--color-on-surface-600);
}

.text-surface-700 {
	color: var(--color-surface-700);
}

.text-on-surface-700 {
	color: var(--color-on-surface-700);
}

.text-surface-800 {
	color: var(--color-surface-800);
}

.text-on-surface-800 {
	color: var(--color-on-surface-800);
}

.text-surface-900 {
	color: var(--color-surface-900);
}

.text-on-surface-900 {
	color: var(--color-on-surface-900);
}

.text-surface-950 {
	color: var(--color-surface-950);
}

.text-on-surface-950 {
	color: var(--color-on-surface-950);
}

.text-primary-50 {
	color: var(--color-primary-50);
}

.text-on-primary-50 {
	color: var(--color-on-primary-50);
}

.text-primary-100 {
	color: var(--color-primary-100);
}

.text-on-primary-100 {
	color: var(--color-on-primary-100);
}

.text-primary-200 {
	color: var(--color-primary-200);
}

.text-on-primary-200 {
	color: var(--color-on-primary-200);
}

.text-primary-300 {
	color: var(--color-primary-300);
}

.text-on-primary-300 {
	color: var(--color-on-primary-300);
}

.text-primary-400 {
	color: var(--color-primary-400);
}

.text-on-primary-400 {
	color: var(--color-on-primary-400);
}

.text-primary-500 {
	color: var(--color-primary-500);
}

.text-on-primary-500 {
	color: var(--color-on-primary-500);
}

.text-primary-600 {
	color: var(--color-primary-600);
}

.text-on-primary-600 {
	color: var(--color-on-primary-600);
}

.text-primary-700 {
	color: var(--color-primary-700);
}

.text-on-primary-700 {
	color: var(--color-on-primary-700);
}

.text-primary-800 {
	color: var(--color-primary-800);
}

.text-on-primary-800 {
	color: var(--color-on-primary-800);
}

.text-primary-900 {
	color: var(--color-primary-900);
}

.text-on-primary-900 {
	color: var(--color-on-primary-900);
}

.text-primary-950 {
	color: var(--color-primary-950);
}

.text-on-primary-950 {
	color: var(--color-on-primary-950);
}

/* ### Border ### */
.border-surface-50 {
	border-color: var(--color-surface-50);
}

.border-surface-100 {
	border-color: var(--color-surface-100);
}

.border-surface-200 {
	border-color: var(--color-surface-200);
}

.border-surface-300 {
	border-color: var(--color-surface-300);
}

.border-surface-400 {
	border-color: var(--color-surface-400);
}

.border-surface-500 {
	border-color: var(--color-surface-500);
}

.border-surface-600 {
	border-color: var(--color-surface-600);
}

.border-surface-700 {
	border-color: var(--color-surface-700);
}

.border-surface-800 {
	border-color: var(--color-surface-800);
}

.border-surface-900 {
	border-color: var(--color-surface-900);
}

.border-surface-950 {
	border-color: var(--color-surface-950);
}

.border-green {
	border-color: var(--color-green);
}

.border-yellow {
	border-color: var(--color-yellow);
}

.border-red {
	border-color: var(--color-red);
}

.border-red-bright {
	border-color: var(--color-red-bright);
}

.border-3 {
	border-width: 3px;
}

.border-t-3 {
	border-top-width: 3px;
}

.border-r-3 {
	border-right-width: 3px;
}

.border-b-3 {
	border-bottom-width: 3px;
}

.border-l-3 {
	border-left-width: 3px;
}

.border-6 {
	border-width: 6px;
}

.border-t-6 {
	border-top-width: 6px;
}

.border-r-6 {
	border-right-width: 6px;
}

.border-b-6 {
	border-bottom-width: 6px;
}

.border-l-6 {
	border-left-width: 6px;
}


/* ### Shaddows ### */
.shadow {
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12), 1px 1px 2px rgba(0, 0, 0, 0.24);
}

.hover\:shadow:hover {
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12), 1px 1px 2px rgba(0, 0, 0, 0.24);
}

.shadow-big {
	box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22) !important;
}

.shadow-medium {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.better-shadow {
	box-shadow: 0 1px 1px rgba(16, 27, 30, 0.15), 0 2px 2px rgba(16, 27, 30, 0.15), 0 4px 4px rgba(16, 27, 30, 0.15), 0 8px 8px rgba(16, 27, 30, 0.15), 0 16px 16px rgba(16, 27, 30, 0.15);
}

.shadow-inset {
	box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.12), inset 1px 1px 2px rgba(0, 0, 0, 0.24);
}

.better_shadow {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12),
		0 2px 2px rgba(0, 0, 0, 0.12),
		0 4px 4px rgba(0, 0, 0, 0.12),
		0 8px 8px rgba(0, 0, 0, 0.12),
		0 16px 16px rgba(0, 0, 0, 0.12);
}

.shadow-light {
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}


/* ### Hover ### */
.hover\:border:hover {
	border-width: 1px;
}

.hover\:border-2:hover {
	border-width: 2px;
}

.hover\:rounded-sm:hover {
	border-radius: .125rem;
}

.hover\:color-primary:hover {
	color: var(--color-primary);
}

.hover\:opacity\.9:hover {
	opacity: .9;
}

.hover_underline:hover {
	text-decoration: underline;
}

.hover\:opacity-1-\! {
	opacity: 1 !important;
}


/* ### Text ### */
.text-shadow-white {
	text-shadow: 1px 1px 0px white;
}

.text-nowrap {
	text-wrap: nowrap;
}

.text-xxs {
	font-size: .5rem
}

.font-monospace {
	font-family: monospace;
}

.normal_link,
.cis_link {
	text-decoration: underline;
	color: #417BB4;
	cursor: pointer;
}

.normal_link:hover,
.cis_link:hover {
	color: var(--color-primary);
}


/* ### Margin/Padding ### */
.mr--20 {
	margin-right: -20rem;
}

.ml--20 {
	margin-left: -20rem;
}

.ml-20 {
	margin-left: 20rem;
}

.ml-0 {
	margin-left: 0rem;
}

.py-2 {
	padding-top: .416rem;
	padding-bottom: .416rem;
}

.mx-3 {
	margin-left: var(--p-500);
	margin-right: var(--p-500);
}


/* ### Loader ### */
.skeleton-loader {
	width: 300px;
	height: 24px;
	background: linear-gradient(90deg, #EEEEEE 25%, #DEDEDE 50%, #EEEEEE 75%);
	background-size: 200% 100%;
	animation: loading 2s infinite ease-in-out;
	border-radius: 4px;
	content: '';
}

@keyframes loading {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

.spinner.rectangles.white>div {
	background-color: #fff;
}


/* ### Cursor ### */
.cursor-help {
	cursor: help;
}

.cursor-wait {
	cursor: wait;
}


/* ### Height/Width ### */
.h3rem {
	height: 3rem;
}

.w3rem {
	width: 3rem;
}

.w-4\.5\/12 {
	width: 37.5%
}

.w-1\/5 {
	width: 20%;
}

.w-6 {
	width: 50%;
}

.max-w-10ch {
	max-width: 10ch;
}

.max-w-15ch {
	max-width: 15ch;
}

.max-w-20ch {
	max-width: 20ch;
}

.max-w-30ch {
	max-width: 30ch;
}

.max-w-50ch {
	max-width: 50ch;
}

.max-w-fit-content {
	max-width: fit-content;
}

.min-w-max-cont {
	min-width: max-content;
}

.w-x-4 {
	width: 25%;
}


/* ### Fixes ### */
.clearer {
	background: transparent none repeat scroll 0 0;
	border: medium none;
	clear: both;
	display: block;
	height: 1px;
	margin: 0;
	padding: 0;
}

.fix_ul_ol ul,
.fix_ul_ol ol,
ul.fix_ul_ol,
ol.fix_ul_ol {
	padding: revert;
}

.webkit-appearance-unset {
	-webkit-appearance: unset !important;
	appearance: unset !important;
	background-color: var(--color-surface-50);
}

.no-hyphens {
	hyphens: none;
}

.noscroll {
	overflow: hidden;
}

.sm\:show {
	display: none;
}

.outline_none {
	outline: none !important;
}


/* ### stperfmon ### */
div.stperfmon {
	padding: 5px;
	margin: 25px 10px;
	background-color: gold;
	font-family: courier;
	font-size: small;
}

table.stperfmon {
	padding: 5px;
	border: 1px solid;
	margin: 5px;
	border-collapse: collapse;
}

table.stperfmon th {
	background-color: darkorange;
	border: 1px solid;
	padding: 3px;
}

table.stperfmon td {
	border: 1px solid;
	padding: 3px;
}


/* ### Flex/Grid ### */
.subgrid {
	grid-template-columns: subgrid;
}

.gap-025 {
	gap: .25rem;
}

.gap-05 {
	gap: .5rem;
}

.gap-1 {
	gap: 1rem;
}

.row-gap-05 {
	row-gap: .5rem;
}


/* ### Styles ### */
/* CIS-Menü */
.group .cis_menu_star :not(.fa-solid) {
	opacity: 0;
	transition: opacity .1s;
}

@media (max-width:768px) {
	.group .cis_menu_star :not(.fa-solid) {
		opacity: .2;
	}
}

.group:hover .cis_menu_star :not(.fa-solid) {
	opacity: 1
}

.seperator {
	border-bottom: 2px solid #cccccc;
}

/* Für cis.js displayFeedback() */
.dialog_feedback[open] {
	width: min(50ch, 100vw);
	display: flex;
	flex-direction: column;
	gap: var(--p-500);
}

.dialog_feedback::backdrop {
	background-color: rgba(0, 0, 0, .5);
}

.dialog_feedback .fb_head {
	display: flex;
	justify-content: space-between;
}

.dialog_feedback .fb_head button {
	border-bottom: 2px solid transparent;
}

.dialog_feedback .fb_head button:focus {
	outline: none;
	border-bottom: 2px solid var(--color-primary);
}

.dialog_feedback .fb_btn {
	display: flex;
	gap: var(--p-300);
	justify-content: flex-end;
}

.dialog_feedback .fb_heading {
	font-weight: bold;
}

.dialog_feedback a:not(.cis_btn) {
	color: var(--color-primary);
}

.dialog_feedback a:not(.cis_btn):hover {
	text-decoration: underline;
}

/* Dropdown */
.dropdown_open .dropdown_content {
	display: block;
}

.dropdown_closed .dropdown_content {
	display: none;
}

.dropdown_open .dropdown_indicator {
	transform: rotate(90deg);
}

.dropdown_closed .dropdown_indicator {
	transform: rotate(0deg);
}

/* Tippy */
.tippy-box {
	width: initial;
}

.tippy-title {
	text-align: center;
	font-weight: 600;
	border-radius: .125rem;
	margin-bottom: .25rem;
}

.tippy-title-primary-400 {
	text-align: center;
	font-weight: 600;
	border-radius: .125rem;
	margin-bottom: .25rem;
	background-color: var(--color-primary-400);
	color: var(--color-on-primary-400);
}

.tippy-title-green {
	text-align: center;
	font-weight: 600;
	border-radius: .125rem;
	margin-bottom: .25rem;
	background-color: var(--color-green);
	color: var(--color-on-green);
}

.tippy-title-yellow {
	text-align: center;
	font-weight: 600;
	border-radius: .125rem;
	margin-bottom: .25rem;
	background-color: var(--color-yellow);
	color: var(--color-on-yellow);
}

.tippy-title-red {
	text-align: center;
	font-weight: 600;
	border-radius: .125rem;
	margin-bottom: .25rem;
	background-color: var(--color-red);
	color: var(--color-on-red);
}

/* Modal */
.cis_modal_backdrop {
	z-index: 1000;
	background-color: rgba(0, 0, 0, .3);
}

/* Feedback Bar */
.cis_feedback_bar_container {
	z-index: 10000;
}

.cis_feedback_bar_container>* {
	position: relative;
	border-bottom: 3px solid var(--color-primary-500);
	animation-name: cis_feedback_bar_container_fade_out;
	animation-duration: 3s;
	animation-delay: 7s;
	animation-fill-mode: forwards;
}

.cis_feedback_bar_container>*:hover {
	animation-play-state: paused;
}

@keyframes cis_feedback_bar_container_fade_out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		display: none;
	}
}

/* Tag Cloud */
.cis_tag_cloud {
	display: flex;
	flex-wrap: wrap;
}

.cis_tag_cloud_column {
	flex-wrap: nowrap;
	flex-direction: column;
}

.cis_tag_cloud_tag {
	border-radius: .4rem;
	background: var(--color-primary-300);
	color: var(--color-on-primary-300);
	font-size: 0.8rem;
	min-width: 40px;
	text-align: center;
	font-weight: 400;
	margin: 0.2rem;
	padding: 0.2rem 0.4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	position: relative;
	overflow: hidden;
}

.cis_tag_cloud_tag_delete::after {
	font-weight: 900;
	content: "\f00d";
	font-family: "FONT AWESOME 5 FREE";
	font-size: 0.8rem;
	margin-left: 0.2rem;
	padding-left: 0.25rem;
}

.cis_tag_cloud_tag_delete_button {
	padding-left: 0.5rem;
	height: 100%;
	position: absolute;
	right: 0px;
	padding-right: 0.5rem;
	border-left: 1px solid white;
	transition: 0.3s all;
	outline: none !important;
	border-radius: 0 .4rem .4rem 0;
	background: var(--color-primary-300);
	color: var(--color-on-primary-300);
}

.cis_tag_cloud_tag_delete_button:hover {
	background: var(--color-red-bright);
	color: var(--color-on-red-bright);
}

.cis_tag_cloud_tag_delete_button:disabled {
	background: var(--color-surface-300);
	color: var(--color-on-surface-300);
}

.cis_tag_cloud_tag_delete_button:active {
	opacity: 0.8;
}

.cis_tag_cloud_tag_delete:hover {
	background: var(--color-red-bright);
	color: var(--color-on-red-bright);
	cursor: pointer;
}

/* Table sortable */
th.table-sortable {
	border: 1px solid #fff;
	cursor: pointer;
}

th.table-sortable::before {
	font-family: 'Font Awesome 5 Free';
	content: '\f0dc';
	color: #ccc;
	margin-right: 5px;
}

th.table-sortable.table-sorted-asc::before {
	content: '\f0de';
	color: #fff;
}

th.table-sortable.table-sorted-desc::before {
	content: '\f0dd';
	color: #fff;
}

.grid-cols-auto-fit {
	--gap-count: calc(var(--grid-column-count) - 1);
	--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
	--grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
	grid-gap: var(--grid-layout-gap);
}

/* Snackbar */
#snackbar {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 4px;
	padding: 4px 8px;
	bottom: -5rem;
	z-index: 1000;
	opacity: 0;
	transition: .4s all;
	color: #e1e1e1;
	display: flex;
	font-size: .875rem;
	font-weight: 400;
	letter-spacing: .0178571429em;
	line-height: 1.25rem;
	padding: 14px 16px;
	max-width: 400px;
	box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
		0 2px 2px hsl(0deg 0% 0% / 0.075),
		0 4px 4px hsl(0deg 0% 0% / 0.075),
		0 8px 8px hsl(0deg 0% 0% / 0.075),
		0 16px 16px hsl(0deg 0% 0% / 0.075);
	overflow: hidden;
}

#snackbar_close {
	cursor: pointer;
	display: flex;
	align-items: center;
	opacity: .62;
	transition: .4s all;
}

#snackbar_close:hover {
	opacity: 1;
}

#snackbar_progress {
	background: white;
	position: absolute;
	bottom: -1px;
	left: 0;
	height: 3px;
	opacity: 0.41;
	width: 0%;
	transition: .2s all;
}

.snackbarCloseIcon {
	width: 1rem;
	margin-left: 14px;
	color: #fff;
	font-size: 1.4rem;
	text-align: center;
}

#snackbar.show {
	bottom: 1rem;
	opacity: 1;
}

/* CIS-Datatable */
.cis_datatable {
	font-size: 14px;
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 1rem;
}

.cis_datatable .cis_datatable_container {
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	width: 100%;
}

.cis_datatable table {
	width: 100%;
}

.cis_datatable table thead {
	background-color: var(--color-surface-400);
	color: var(--color-on-surface-400);
}

.cis_datatable table thead td:hover {
	background-color: var(--color-surface-500);
	color: var(--color-on-surface-500);
	cursor: pointer;
}

.cis_datatable table thead td div {
	display: flex;
	flex-direction: column;
}

.cis_datatable table thead td div p {
	padding-bottom: .5rem;
}

.cis_datatable table tbody tr:hover {
	background-color: var(--color-surface-200);
	color: var(--color-on-surface-200);
	cursor: pointer;
}

.cis_datatable input,
.cis_datatable select {
	background-color: var(--color-surface-50);
	color: var(--color-on-surface-50);
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 4px;
	width: 100%;
}

.cis_datatable td,
.cis_datatable th {
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
	padding: 8px;
}

.cis_datatable tbody tr:last-child td {
	border-bottom: none;
}

.cis_datatable tr td:last-child {
	border-right: none;
}

/* CIS-Tabs */
.cis_tabs {
	display: flex;
	align-items: center;
	border-bottom: 1px solid lightgray;
}

.cis_tabs_tab {
	font-size: .875rem;
	padding: 0 .5rem;
	cursor: pointer;
	padding-bottom: 5px;
}

.cis_tabs_tab_active {
	font-size: .875rem;
	color: #0972ff;
	padding: 0 .5rem;
	cursor: pointer;
	padding-bottom: 4px;
	border-bottom: 2px solid #0972ff;
	margin-bottom: -1px;
}

/* CIS-Timeline */
.cis_timeline {
	padding-left: calc(var(--cis_timeline-circle-diameter) / 2);
	margin-left: calc(var(--cis_timeline-circle-diameter) / 2);
	border-left: var(--cis_timeline-line-width) solid var(--cis_timeline-line-color);
}

.cis_timeline>li {
	position: relative;
	list-style: none;
}

.cis_timeline>li::before {
	--border-width: calc(var(--cis_timeline-circle-diameter) / 8);
	content: "";
	position: absolute;
	border-radius: 50%;
	border: var(--border-width) solid white;
	width: var(--cis_timeline-circle-diameter);
	height: var(--cis_timeline-circle-diameter);
	transform: translateX(calc(-1 * (var(--cis_timeline-circle-diameter) + (var(--cis_timeline-line-width) / 2))));
	left: 0;
	top: calc(.5em - var(--border-width));
	background-color: var(--cis_timeline-circle-color);
}

.cis_timeline>li ul,
.cis_timeline>li ol {
	padding-left: 3ch;
}

/* ### individual Styles ### */
#div_res_header_text {
	background-color: var(--color-primary-500);
	color: #ffffff;
	display: block;
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1;
	width: 100%;
	padding: .5rem;
}

#div_o {
	border: 1px solid var(--color-primary-500);
	padding: 0;
	border-radius: .125rem;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12), 1px 1px 2px rgba(0, 0, 0, 0.24);
	background-color: var(--color-surface-50);
}

#_overlay {
	display: block;
	position: absolute;
	top: 0pt;
	left: 0pt;
	z-index: 70;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.7);
}

#_overlayheader_closer {
	cursor: pointer;
	width: 24px;
}

#_overlay_mover {
	cursor: move;
	width: 24px;
	display: inline-block;
}

.pe_option {
	color: black !important;
}

.res_selected {
	background: var(--color-primary-300);
	color: white;
}

.formfield {
	display: flex;
	align-items: baseline;
}

.formfield label {
	font-size: .875rem;
}

.formfield-horizontal {
	flex-direction: column;
	align-items: start;
}

.cis_dialog {
	padding: 0;
	border-radius: 6px;
	outline: none !important;
	z-index: 500;
	position: relative;
}

.cis_dialog::backdrop {
	background-color: rgba(0, 0, 0, .3) !important;
	/* Semi-transparent black */
}

.backdrop::backdrop {
	background-color: rgba(0, 0, 0, .3) !important;
	/* Semi-transparent black */
}

.card {
	background: var(--color-surface-50);
	color: var(--color-on-surface-50);
	padding: .75rem;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
	border-radius: 0.5rem;
}

/* ### Media Querys ### */
@media (max-width:768px) {
	.ml-20 {
		margin-left: 0rem;
	}

	.sm-w-full {
		width: 100%;
	}

	.sm\:text-sm {
		font-size: .875rem
	}

	.sm-hide,
	.sm\:hide {
		display: none;
	}

	.sm\:show {
		display: block;
	}

	.sm\:inline {
		display: inline !important;
	}

	.sm\:border-t {
		border-top-width: 1px;
	}

	table td:last-child {
		border-bottom: 0;
	}

	.sm\:block {
		display: block
	}

	.sm\:p-3 {
		padding: .625rem;
	}

	.w-s-1 {
		width: 100%;
	}

	.w-6-1-1,
	.w-a-1-1 {
		width: 100%;
	}
}

@media (min-width:768px) and (max-width:768px) {

	.sm-hide,
	.sm\:hide {
		display: unset !important;
	}

	.sm-show,
	.sm\:show {
		display: none !important;
	}
}

@media (min-width:768px) {
	.container {
		max-width: 100%;
	}

	.md-hide,
	.md\:hide {
		display: none;
	}

	.md\:w-6rem {
		width: 6rem;
	}

	.md\:w-4rem {
		width: 4rem;
	}

	.md\:w-3rem {
		width: 3rem;
	}
}

@media (min-width:1024px) {
	.container {
		max-width: 100%;
	}

	.lg-hide,
	.lg\:hide {
		display: none;
	}

	.lg\:w-1\/5 {
		width: 20%;
	}

	.lg\:mw-4\/5\! {
		max-width: 80% !important;
	}

	.lg\:block {
		display: block;
	}
}

@media (min-width:1280px) {
	.container {
		max-width: 100%;
	}

	.xl-hide,
	.xl\:hide {
		display: none;
	}
}
.r_table tr:nth-child(odd), .cis_datatable_container tr:nth-child(even) {
	background-color: var(--color-surface-200);
}
.cis_datatable_container tr:hover {
	background-color: var(--color-surface-100) !important;
}
table.lvplan th, table.lvplan td {
	border: 1px solid #000;
}
table.lvplan th {
	background-color: var(--color-surface-200);
}

#offer_table tbody tr td {
	padding:.5rem;
	vertical-align: baseline;
}

.le_stp.marked {
	border: 5px solid var(--color-yellow) !important;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.12), 1px 1px 2px rgba(0, 0, 0, 0.24);
	animation: pulse 1.5s infinite;
}