@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");
			:root{
				--header-height: 3rem;
				--nav-width: 68px;
				--first-color: #000000; /*#4723D9;*/
				--first-color-light: #000000; /*#AFA5D9;*/
				--white-color: #ffffff;/*#F7F6FB;*/
				--gray-color: lightgray;
				--body-font: 'Montserrat', 'Nunito', sans-serif;
				--normal-font-size: 1rem;
				--z-fixed: 100;
			}
			*,::before,::after {
				box-sizing: border-box
			}
			body{
				position: relative;
				margin: var(--header-height) 0 0 0;padding: 0 1rem;
				font-family: var(--body-font);
				font-size: var(--normal-font-size);
				transition: .5s
			}
			a{
				text-decoration: none
			}
			.header{
				width: 100%;
				height: auto;
				position: fixed;
				top: 0;
				left: 0;
/*
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 1rem;
*/
				background-color: white;
				border-bottom: 1px solid LightGray;
				z-index: var(--z-fixed);
				transition: .5s
			}
			.header_toggle{
				color: var(--first-color);
				font-size: 1.5rem;
				cursor: pointer
			}
			.header_img{
				width: 35px;
				height: 35px;
				display: flex;
				justify-content: center;
				border-radius: 50%;
				overflow: hidden
			}
			.header_img img{
				width: 40px
			}
			.l-navbar{
				position: fixed;
				top: 0;
				left: -30%;
				width: var(--nav-width);
				height: 100vh;
				background-color: var(--first-color);
				padding: .5rem 1rem 0 0;
				transition: .5s;
				z-index: var(--z-fixed)
			}
			.nav_menu {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				overflow: hidden
			}
			.nav_logo, .nav_link{
				display: grid;
				grid-template-columns: max-content max-content;
				align-items: center;
				column-gap: 1rem;
				padding: .5rem 0 .5rem 1.5rem
			}
			.nav_logo{
				margin-bottom: 2rem
			}
			.nav_logo-icon{
				font-size: 1.25rem;
				color: var(--white-color)
			}
			.nav_logo-name{
				color: var(--white-color);
				font-weight: 700
			}
			.nav_link{
				position: relative;
				color: var(--gray-color);
				margin-bottom: 1.5rem;
				transition: .3s
			}
			.nav_link:hover{
				color: var(--white-color)
			}
			.nav_icon{
				font-size: 1.25rem
			}
			#nav-bar.show{
				left: 0
			}
			.body-pd{
				padding-left: calc(var(--nav-width) + 1rem)
			}
			.active_menu{
				color: var(--white-color)
			}
			.active_menu::before{
				content: '';
				position: absolute;
				left: 0;
				width: 2px;
				height: 32px;
				background-color: var(--white-color)
			}
			.height-100{
				height:100vh
			}


			.font-8 {
				
				font-size:8pt;
			}
			.font-9 {
				
				font-size:9pt;
			}
			.font-10 {
				
				font-size:10pt;
			}
			.font-11 {
				
				font-size:11pt;
			}
			.font-12 {
				
				font-size:12pt;
			}
			.font-14 {
				
				font-size:14pt;
			}
			.font-16 {
				
				font-size:16pt;
			}
			.font-18 {
				
				font-size:18pt;
			}
			.font-20 {
				
				font-size:20pt;
			}
			.font-22 {
				
				font-size:22pt;
			}
			.font-24 {
				
				font-size:24pt;
			}
			
			.cpointer {
				
				cursor: pointer;
			}
			
			.scroll-100 {
				
				width: 100%;
				height: 100px;
				overflow-y: scroll;
			}
			.scroll-150 {
				
				width: 100%;
				height: 150px;
				overflow-y: scroll;
			}
			.scroll-200 {
				
				width: 100%;
				height: 200px;
				overflow-y: scroll;
			}
			.scroll-300 {
				
				width: 100%;
				height: 300px;
				overflow-y: scroll;
			}
			.scroll-400 {
				
				width: 100%;
				height: 400px;
				overflow-y: scroll;
			}
			.scroll-500 {
				
				width: 100%;
				height: 500px;
				overflow-y: scroll;
			}
			.scroll-600 {
				
				width: 100%;
				height: 600px;
				overflow-y: scroll;
			}
			.scroll-800 {
				
				width: 100%;
				height: 800px;
				overflow-y: scroll;
			}
			
			.bg-gray {
				
				background-color: #f2f2f2;
			}
			
			.text-gray {
				
				color: #f2f2f2;
			}
			
			.myBtn:hover {
				
				background-color: rgb(96%,96%,96%);
			}			
			.myHover:hover {
				
				background-color: rgb(96%,96%,96%);
			}
			.blueHover:hover {
				
				background-color: #deebff;
				color: #0d6efd;
			}
			.greenHover {
				
				background-color: white;
			}
			.greenHover:hover {
				
				background-color: #e5ffe6;
				color: #198754;
			}
			
			.fixed-btn-top {
    
				position: fixed;
				top: 68px;
				right: -130px;
				z-index: 1000;
			}
			.fixed-btn-top:hover {
    
				-webkit-transform: translateX(-120px);
			}

			.displaynone {
				
				display: none;
			}
			
			.float_right {
				
				display: flex;
				justify-content:flex-end;
			}
			
			#soll_top_btn {
				
				  display: none;
				  position: fixed;
				  bottom: 20px;
				  right: 30px;
				  z-index: 99;
				  font-size: 18px;
				  border: none;
				  outline: none;
				  background-color: red;
				  color: white;
				  cursor: pointer;
				  padding: 15px;
				  border-radius: 4px;
			}
			#soll_top_btn:hover {
 
				background-color: #555;
			}


			.modal-70 { max-width: 70%; }
			.modal-80 { max-width: 80%; }
			.modal-90 { max-width: 90%; }


			#btn_fixed {
				
				  position: fixed;
				  bottom: 20px;
				  right: 30px;
				  z-index: 99;
				  font-size: 18px;
				  border: none;
				  outline: none;
				  background-color: black;
				  color: white;
				  cursor: pointer;
				  padding: 15px;
				  border-radius: 4px;
			}
			#btn_fixed:hover {
 
				background-color: #555;
			}


			.nobr {
				white-space: nowrap;
			}
			
			
			.btn-custom {
				
				background-color: #b5ebce;
				border-color: #008b41;
				color: #008b41;
			}
			.btn-custom:hover {
				
				background-color: #008b41;
				color: #ffffff;
			}








/* // SWITCH ........................................................................................................................... */
/* Das label-Element */ 
.switch {
	/* Um im nächsten Schritt den runden Button mit position:absolute festzusetzen */ 
	position: relative;
	width: 58px;
	height: 28px;
	display: inline-block;
}

/* Der graue Untergrund des Schalters */ 
.switch span {		    
	position: absolute;
	background-color: #ccc;
	border-radius: 17px;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: background-color .4s;
}
/* Der kreisrunde Button im Switch */ 
.switch span::before {    
	background-color: white;
	border-radius: 50%;
	content: "";
	position: absolute;
	left: 4px;
	bottom: 4px;
	height: 20px;
	width: 20px;
}
input:checked + span {
  background-color: darkgreen;
}

input:checked + span::before {
  transform: translateX(30px);
}

			
			
			@media screen and (min-width: 768px){
				body{
					margin: calc(var(--header-height) + 1rem) 0 0 0;
					padding-left: calc(var(--nav-width) + 2rem)
				}
				.header{
					height: calc(var(--header-height) + 1rem);
					padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
				}
				.header_img{
					width: 40px;height: 40px
				}
				.header_img img{
					width: 45px
				}
				.l-navbar{
					left: 0;
					padding: 1rem 1rem 0 0
				}

				#nav-bar.show{
					width: calc(var(--nav-width) + 156px)
				}

				.body-pd{
					padding-left: calc(var(--nav-width) + 188px)
				}
			}