

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-Thin.ttf');
	font-weight:100;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-ThinItalic.woff2');
	font-weight:100;
	font-style:italic;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-ExtraLight.ttf');
	font-weight:200;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-ExtraLightItalic.woff2');
	font-weight:200;
	font-style:italic;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-Light.ttf');
	font-weight:300;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-LightItalic.woff2');
	font-weight:300;
	font-style:italic;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-Regular.ttf');
	font-weight:400;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-Italic.woff2');
	font-weight:400;
	font-style:italic;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-Medium.ttf');
	font-weight:500;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-MediumItalic.woff2');
	font-weight:500;
	font-style:italic;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-SemiBold.ttf');
	font-weight:600;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-SemiBoldItalic.woff2');
	font-weight:600;
	font-style:italic;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-Bold.ttf');
	font-weight:700;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-BoldItalic.woff2');
	font-weight:700;
	font-style:italic;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-ExtraBold.ttf');
	font-weight:800;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-ExtraBoldItalic.woff2');
	font-weight:800;
	font-style:italic;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-Black.ttf');
	font-weight:900;
}

@font-face {
	font-family: Inter;
	src: url('fonts/Inter/Inter-BlackItalic.woff2');
	font-weight:900;
	font-style:italic;
}

*{
	font-family:Inter!important;
}

body, html, .background_container, .inhalt_container {
	height: 100%;
	width: 100%;
	color:#495057;
}

body
{
	background-color:#f5f5f7;
}

code
{
	color:#313131;
}

a
{
	color:#0056b3;
}

.error_font
{
	color:#dc3444;
}

.white_font
{
	color:white;
}


.background_container
{
	padding:0px;
}

.inhalt_container
{
	margin:0px;
	/* display: flex; */
	/* flex-wrap: wrap; */
}


/*User Info*/
	.user_container
	{
		background-color:#313131; 
		color:white;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		z-index: 100;
		padding-left:15px;
		padding-right:15px;
		-webkit-box-shadow: 0px 2px 4px 0px #dddddd; 
		box-shadow: 0px 2px 4px 0px #dddddd;
	}

	.user_container img
	{
		max-width:48px; 
		height:48px; 
		border-radius:50%;
		margin-top:10px;
		margin-bottom:10px;
		margin-right:10px;
	}

	.user_container div.user_text
	{
		display:flex;
		align-items:center;
		height:100%;
		vertical-align:middle;
		float:left;
		/* font-weight:bold; */
	}
	
	.search_bar
	{
		width:100%;
	}

	.user_container div.top_button
	{
		display:flex;
		/* align-items:right; */
		vertical-align:middle;
		padding-top:10px;
		padding-bottom:10px;
		margin-top:5px;
		margin-left:10px;
		height:auto;
	}

/*User Info*/

/*Gliederung*/
	.gliederung_container
	{
		background-color:white;
		height:100%;
		padding-top:68px;
		padding-bottom:46px;
		padding-left:10px;
		padding-right:10px;
		overflow-y:auto;
	}
	
	.gliederung_container 
	{
		/* margin-top:10px; */
		position:relative;
	}
	
	.gliederung_container li.list-group-item
	{
		cursor:pointer;
		border-radius:5px;
		border:none;
		padding:5px;
		font-size:1rem;
		/* font-weight:bold; */
	}
	
	.gliederung_container li.list-group-item.list-group-item-dark
	{
		background-color:#e9ecef;
	}
	
	.dropdown-menu li{
	   font-family:Inter;
	   /* font-size:16px */
	}
	
	.close_gliederung
	{
		position:absolute;
		right:15px;
		top:119px;
		z-index:2;
		cursor:pointer;
		color:#313131;
	}
	
	.close_gliederung:hover
	{
		color:#313131;
	}
	
	.background_container_todo .close_gliederung,
	.background_container_todo_edit .close_gliederung,
	.background_container_admin .close_gliederung
	{
		top:73px;
	}
	
	.open_gliederung
	{
		z-index:1000;
		cursor:pointer;
		display:none;
		margin-left:3px;
	}
	
	.gliederung_nutzer_rollen
	{
		font-size:10px;
		line-height:1.2!important;
	}
	/* .admin_username */
	/* { */
		/* font-size:10px; */
	/* } */

/*Gliederung*/

/*inhalt*/
	.content_container
	{
		/* background-color:white;  */
		height:100%;
		padding-top:68px;
		padding-bottom:46px;
		padding-left:10px;
		padding-right:10px;
		overflow-y:auto;
	}
	
	.content_container_inner
	{
		/* background-color:white; */
		/* width:100%; */
		/* display:inline-block; */
		/* padding:10px; */
	}
	
	.inhalts_block
	{
		/* border-bottom:1px solid #313131; */
		width:100%;
		padding-left:10px;
		padding-right:10px;
	}
	
	.prozess_text_summernote
	{
		width:100%;
	}
	
	#prozess_dokumente_saved li.list-group-item 
	{
		cursor:pointer;
	}
	
	#search_results li.list-group-item 
	{
		cursor:pointer;
	}
	
	#prozesschritte_accordion .card-header, #todo_schritte_accordion .card-header
	{
		cursor:pointer;
	}
	
	#prozesschritte_accordion .prozess_schritt_container:first-child .sort_up_prozessschritt
	{
		display:none;
	}
	
	.multiselect-native-select
	{
		margin-top:15px;
	}
	
	/* .prozess_schritt_removed */
	/* { */
		/* background-color: */
	/* } */
	
	.todo_dokumente_liste
	{
		margin:0px;
		width:100%;
		/* font-size:12px; */
		float:left;
		padding:0px;
	}

	.todo_dokumente_liste li
	{
		list-style:none;
		float:left;
	}
	
	.todo_dokumente_liste li:not(:last-child):after
	{
		content:"•";
		margin-left:5px; 
		margin-right:5px; 
	}
	
	.todo_upload_button
	{
		float:right;
		cursor:pointer; 
		width:24px;
		height:24px; 
		margin-top:5px; 
	}
	
	.todo_info_button_container
	{
		
	}
	
	.todo_info_button
	{
		width:22px;
		height:22px; 
		margin-top:-3px; 
		/* margin-left:5px; */
	}
	
	@media (max-width: 766px) {
		.todo_upload_button
		{
			float:left;
			margin-top:0px; 
		}
		
		.todo_info_button_container
		{
			position:absolute;
			right:15px;
			top:-24px;
		}
		
		.todo_info
		{
			padding-right:30px;
		}
		
		/* .todo_info_button */
		/* { */
			/* margin-left:0px; */
		/* } */
	}
	
	.home_kachel
	{
		padding:15px;
	}
	
	.home_kachel a
	{
		text-decoration:none;
		color:#313131;
	}
	
	.home_kachel a:hover
	{
		text-decoration:none;
		color:#313131;
	}
	
	.home_kachel .card
	{
		transition: all .2s ease-in-out;
		width:150px;
		height:150px;
		-webkit-box-shadow: 0px 0px 3px 1px #D6D6D6; 
		box-shadow: 0px 0px 3px 1px #D6D6D6;
		cursor:pointer;
	}
	
	.home_kachel .card:hover
	{
		transform: scale(1.05);
		
	}
/*inhalt*/

/*Checkboxen*/

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before 
{
	background-color:#313131;
}
/*Checkboxen*/

/*Schriften*/

	h1, .h1
	{
		font-size:1.2rem;
		font-weight:bold;
		margin-top:10px;
	}
/*Schriften*/

/*Bottom Bar*/

	.bottom_row_container
	{
		background-color:#f5f5f7;
		width:100%;
		/* border-top:1px solid white; */
		-webkit-box-shadow: 0px -2px 4px 0px #dddddd; 
		box-shadow: 0px -2px 4px 0px #dddddd;
	}
	
	.bottom_icon
	{
		float:left;
	}
	
	.bottom_row_container a
	{
		color:#313131;
		text-decoration:none;
		width:30px;
	}
	
	.bottom_row_container svg
	{
		margin-left:5px;
		margin-right:5px;
		padding:5px;
		cursor:pointer;
	}
	
	.bottom_row_container svg.aktiv
	{
		background-color:#313131;
		border-radius:50%;
		color:white;
	}
/*Bottom Bar*/

/*Copyright*/
	.copyright_container
	{
		text-align:center;
		width:100%;
		/* margin:auto; */
		
	}
	
	.copyright ul
	{
		/* text-align:center;  */
		padding:0px; 
		display:inline-block;
	}

	.copyright ul li
	{
		list-style:none;
		/* float:left;  */
		font-size:11px;
		color:#343a40;
	}
	
	.copyright ul li a
	{
		color:#343a40;
	}
	
	.copyright ul li:not(:last-child):after
	{
		/* content:"•"; */
		/* margin-left:5px;  */
		/* margin-right:5px;  */
	}
/*Copyright*/

/*Impressum DSGVO*/
	.impressum_dsgvo h1
	{
		font-size:1.5rem; 
		font-weight:bold;
		text-transform:uppercase;
		width:100%;
	}
	
	.impressum_dsgvo h2
	{
		font-size:1.2rem; 
		font-weight:bold;
		width:100%;
	}
/*Impressum DSGVO*/


/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: #fff;
	/* background-image: url("/fileadmin/user_upload/kreativbuero_2d.jpg"); */
	/* background-size: cover; */
}



#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #313131;

    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

    z-index: 1001;
}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #313131;

        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #313131;

        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
    }

    @-webkit-keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }
    @keyframes spin {
        0%   { 
            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(0deg);  /* IE 9 */
            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
        }
        100% {
            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: rotate(360deg);  /* IE 9 */
            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
        }
    }

    #loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: white;
        z-index: 1000;
        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: translateX(0);  /* IE 9 */
        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
    }

    #loader-wrapper .loader-section.section-left {
        left: 0;
    }

    #loader-wrapper .loader-section.section-right {
        right: 0;
    }

    /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(-100%);  /* IE 9 */
                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }

    .loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(100%);  /* IE 9 */
                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    }
    
    .loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;  
                transition: all 0.3s ease-out;
    }
    .loaded #loader-wrapper {
        visibility: hidden;

        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateY(-100%);  /* IE 9 */
                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */

        -webkit-transition: all 0.3s 1s ease-out;  
                transition: all 0.3s 1s ease-out;
    }
    
    /* JavaScript Turned Off */
    .no-js #loader-wrapper {
        display: none;
    }
    .no-js h1 {
        color: #222222;
    }

    #content {
        margin: 0 auto;
        padding-bottom: 50px;
        width: 80%;
        max-width: 978px;
    }  