@charset "utf-8";
@import url('/assets/css/acp-navi.css');

@import url('/assets/fontawesome/css/all.min.css');
@import url('/assets/css/dropzone-basic.css');
@import url('/assets/css/dropzone.css');
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/Lato-italic-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url(/assets/fonts/Lato-italic-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/Lato-normal-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/Lato-normal-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Grundeinstellungen */
*													{ margin: 0; padding: 0; box-sizing: border-box; }
body											{ font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 400; background: #ffffff; }
#acp header								{ display: none; overflow: auto; }
#acp main									{ width: 100%; }
#acp footer								{ width: 100%; }

/* Farben global */
#acp .cwback							{ background: #7dc241; color: #ffffff; }
#acp .jsback							{ background: #f69608; color: #ffffff; }
#acp .light								{ background: #f1f1f1; color: #000000; }
#acp .dark								{ background: #333333; color: #ffffff; }
#acp .accent							{ background: #333333; color: #ffffff; }
#acp .accent:hover				{ background: #999999; color: #ffffff; }
#acp .accentcw						{ background: #7dc241; color: #ffffff; }
#acp .accentcw:hover			{ background: #333333; color: #ffffff; }
#acp .accentjs						{ background: #f69608; color: #ffffff; }
#acp .accentjs:hover			{ background: #333333; color: #ffffff; }


/* Abstände und Flexboxen */
#acp .flexcc							{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
#acp .centered						{ margin: 0 auto 1.000rem; }
#acp .center							{ text-align: center; }
#acp .flex								{ display: flex; flex-wrap: wrap; }
#acp .flexalign						{ display: flex; flex-wrap: wrap; align-content: center; }
#acp .flexstart						{ display: flex; flex-wrap: wrap; align-content: flex-start; }
#acp .flexstartx						{ display: flex; flex-wrap: wrap; justify-content: flex-start;}
#acp .flexspace						{ display: flex; flex-wrap: wrap; justify-content: space-between; }
#acp .flexaround					{ display: flex; flex-wrap: wrap; justify-content: space-around; }
#acp .flexend							{ display: flex; flex-wrap: wrap; justify-content: flex-end; }
#acp .flexspacetop				{ display: flex; display: -webkit-flex; display: -ms-flexbox; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;  }
#acp .mb0									{ margin-bottom: 0 !important; }
#acp .mb05								{ margin-bottom: 0.500rem; }
#acp .mb10								{ margin-bottom: 1.000rem; }
#acp .mb15								{ margin-bottom: 1.500rem; }
#acp .mauto								{ margin: 0 auto; }
#acp .mauto15							{ margin: 0 auto 1.500rem; }
#acp .pad0								{ padding: 0 !important; }
#acp .trans								{ width: 100%; display: block; clear: both; border: none; }
#acp .trans05							{ width: 100%; display: block; clear: both; margin-bottom: 0.500rem; border: none; }
#acp .trans10							{ width: 100%; display: block; clear: both; margin-bottom: 1.000rem; border: none; }
#acp .transtb							{ width: 100%; display: block; clear: both; margin: 1.000rem 0; border: none; }
#acp .linecw							{ width: 100%; display: block; clear: both; margin-bottom: 1.000rem; border-top: 1px solid #7dc241; border-right: none; border-bottom: none; border-left: none; }
#acp .line								{ width: 100%; display: block; clear: both; border-top: 1px solid #000000; border-right: none; border-bottom: none; border-left: none; }
#acp .linejs							{ width: 100%; display: block; clear: both; margin-bottom: 1.000rem; border-top: 1px solid #f69608; border-right: none; border-bottom: none; border-left: none; }
#acp .linecwtb						{ width: 100%; display: block; clear: both; margin: 1.000rem 0; border-top: 1px solid #7dc241; border-right: none; border-bottom: none; border-left: none; }
#acp .linejstb						{ width: 100%; display: block; clear: both; margin: 1.000rem 0; border-top: 1px solid #f69608; border-right: none; border-bottom: none; border-left: none; }

/* Global */
.navcontainer							{ display: none; }
#acp h1										{ font-size: 2.000rem; font-weight: 500; margin-bottom: 2.000rem; }
#acp h3										{ font-size: 1.250rem; font-weight: 500; padding-bottom: 0.500rem; margin-bottom: 1.250rem; border-bottom: 1px solid #000000; }
#acp content							{ display: flex; flex-direction: row; height: 100%; overflow: hidden; }
#acp #navdesk							{ width: 240px; height: 100%; border-right: 1px solid #000; padding: 0 1.500rem 1.500rem; position: fixed; }
#acp #workspace						{ margin-left: 240px; display: flex; flex-direction: column; width: 100%;  padding: 1.500rem 2.000rem; }
#acp .searchform					{ width: 100%; margin-bottom: 1.000rem; }

/* Startseite */
#acp #start								{ width: 100%; height: 100vh; max-width: 60em; margin: 0 auto; }
#acp .login								{ width: 350px; min-height: 300px; margin: 0 auto; border-radius: 5px; padding: 1.5rem; }

/* Dasboard & ACP Seiten */
#acp .databox							{ width: 100%; }
#acp .col100							{ width: 100%; padding: 1.500rem; }
#acp .col70								{ width: 70%; padding: 1.500rem; }
#acp .col60								{ width: 60%; padding: 1.500rem; }
#acp .col50								{ width: 50%; padding: 1.500rem; }
#acp .col40								{ width: 40%; padding: 1.500rem; }
#acp .col30								{ width: 30%; padding: 1.500rem; }

#acp .section							{ margin-bottom: 2.000rem; }
#acp .sbtn25js,
#acp .sbtn25cw						{ width: 23%; padding: 1.000rem; text-decoration: none; color: #000000; }
#acp .sbtn25js:hover			{ background: #f69608; color: #ffffff; }
#acp .sbtn25cw:hover			{ background: #7dc241; color: #ffffff; }
#acp .sbtn33							{ width: 31%; padding: 1.000rem; text-decoration: none; }
#acp .sb100								{ width: 100%; padding: 1.000rem; }
#acp .border							{ border-radius: 10px; border: 1px solid #666; }

/* Datenfelder */
#acp .listhead						{ width: 100%; border-bottom: 5px solid #666666; }
#acp .listheadjs					{ width: 100%; border-bottom: 5px solid #f69608; }
#acp .listheadcw					{ width: 100%; border-bottom: 5px solid #7dc241; }
#acp .sumbox							{ width: 100%; }
#acp .listbox							{ width: 100%; }
#acp .listbox:nth-child(odd)	{ background: #fff; }
#acp .listbox a						{ color: #000; text-decoration: none; }
#acp .listbox:hover a			{ background: #333 !important; color: #fff !important; }
#acp .blocked							{ background: #ff9999 !important; color: #000; }
#acp .listinner						{ width: 100%; }
#acp .listinner a					{ width: 100%; }
#acp .mahn100							{ width: 100%; border-bottom: 1px solid #000; }
#acp .mahn1								{ width: 33.3333%; padding: 0.625rem; border-left: 0.625rem solid #FFCB4A; }
#acp .mahn2								{ width: 33.3333%; padding: 0.625rem; border-left: 0.625rem solid #FF5E00; }
#acp .mahn3								{ width: 33.3333%; padding: 0.625rem; border-left: 0.625rem solid #F50000; }
#acp .df05								{ width: 5%; padding: 0.500rem; }
#acp .df10								{ width: 10%; padding: 0.500rem; }
#acp .df15								{ width: 15%; padding: 0.500rem; }
#acp .df20								{ width: 20%; padding: 0.500rem; }
#acp .df25								{ width: 25%; padding: 0.500rem; }
#acp .df30								{ width: 30%; padding: 0.500rem; }
#acp .df35								{ width: 35%; padding: 0.500rem; }
#acp .df50								{ width: 50%; padding: 0.500rem; }
#acp .df85								{ width: 85%; padding: 0.500rem; }
#acp .alignr							{ text-align: right; }
#acp .alignm							{ text-align: center; }
#acp .fontgreen						{ color: #66cc00; }
#acp .fontred							{ color: #ff3333; }

/* Navigation */
#acp #sidebar							{ width: 240px; height: 100%; float: left; position: fixed; overflow: visible; padding: 1.500rem; box-shadow: rgba(0,0,0,1) 0px 0px 15px; }
#acp .navlogo img					{ width: 100%; margin: 0 auto 1.500rem; display: block; outline: none; }
#acp ul.nav								{ list-style: none; }
#acp ul.nav > li a				{ list-style: none; line-height: 2.0; font-size: 1.000rem; color: #000; font-weight: 400; text-decoration: none; margin-left: 1.000rem; }
#acp ul.nav > li a:before	{ content: "\f105"; font-family: FontAwesome; color: #000000; margin-left: -1.000rem; padding-right: 0.400rem; }
#acp ul.nav > li a:hover	{ color: #A88B5C; }

.back-to-top							{ bottom: 0; background: #f69608; color: #000000; font-size: 2rem; left: 50%; padding: 0 1rem; position: fixed; transform: translate(-50%, 0); z-index: 999;  cursor: pointer;  }
.back-to-top i						{ margin: 0; }
.back-to-top:hover				{ background: #333333; color: #ffffff;  }

/* Formulare */
#acp label								{ width: 100%; font-size: 0.936rem; font-style: italic; margin-bottom: 0.250rem; display: block; }
#acp .fb100								{ width: 100%; }
#acp .fb100	img						{ width: 100%; display: block; outline: none; }
#acp .fb50								{ width: 49%; }
#acp .fb30								{ width: 32%; }		
#acp .input,
#acp .select,
#acp .textarea						{ background: #ffffff; color: #000000; font-size: 1.000rem; padding: 0.500rem; border-radius: 5px; border: 1px solid #666; margin-bottom: 0.500rem; }
#acp .gesperrt						{ background: #ff9999 !important; }
#acp .i100								{ width: 100%; }
#acp .i90									{ width: 89%; }
#acp .i50									{ width: 48%; }
#acp .i10									{ width: 9%; }

#acp .s100								{ width: 100%; }

#acp .submitjs						{ cursor: pointer; outline: none; border: none; border-radius: 5px; font-size: 1.000rem; }
#acp .submitjs:hover			{ background: #333333; color: #fff; }
#acp .submitcw						{ cursor: pointer; outline: none; border: none; border-radius: 5px; font-size: 1.000rem; }
#acp .submitcw:hover			{ background: #f69608; color: #fff; }

#acp .note								{ width: 100%; border: 1px solid #333; border-radius: 5px; background: #FFCD00; padding: 1.000rem; }

#acp .alert								{ width: 100%; font-weight: normal; font-size: 1.000rem; padding: 0.500rem; margin-bottom: 1.000rem; border: 1px solid #666; border-radius: 5px; display: block; text-align: center; }
#acp .orange							{ background: #f69608; color: #000; }
#acp .blue								{ background: #99ccff; color: #000; }
#acp .red									{ background: #ff9999; color: #000; }
#acp .green								{ background: #99cc66; color: #000 !important; }

/* Checkboxen für DSGVO */
/* The container */
.agb, .dsgvo, .zusatz1, .zusatz2, .zusatz3
{ display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 0.936rem; font-style: italic; color: #333; text-align: justify; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.zusatz1 { background: #fff; }

.agb input, .dsgvo input, .zusatz1 input, .zusatz2 input, .zusatz3 input
{ position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }

.checkmark
{ position: absolute; top: 0; left: 0; height: 22px; width: 22px; background-color: #ffffff; border-radius: 5px; }


.agb:hover input ~ .checkmark, .dsgvo:hover input ~ .checkmark, .zusatz1:hover input ~ .checkmark, .zusatz2:hover input ~ .checkmark, .zusatz3:hover input ~ .checkmark
{ background-color: #999999; }

.agb input:checked ~ .checkmark, .dsgvo input:checked ~ .checkmark, .zusatz1 input:checked ~ .checkmark, .zusatz2 input:checked ~ .checkmark, .zusatz3 input:checked ~ .checkmark
{ background-color: #f69608; }

.checkmark:after
{ content: ""; position: absolute; display: none; }

.agb input:checked ~ .checkmark:after,.dsgvo input:checked ~ .checkmark:after, .zusatz1 input:checked ~ .checkmark:after, .zusatz2 input:checked ~ .checkmark:after, .zusatz3 input:checked ~ .checkmark:after
{ display: block; }

.agb .checkmark:after, .dsgvo .checkmark:after, .zusatz1 .checkmark:after, .zusatz2 .checkmark:after, .zusatz3 .checkmark:after
{ left: 6px;  top: 4px;  width: 5px; height: 8px;  border: solid white;  border-width: 0 3px 3px 0;  -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

/* Radio Buttons Container  */

.contradio { color: #000 !important; display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 1.200rem;-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* Hide the browser's default radio button */
.contradio input { position: absolute; opacity: 0; cursor: pointer; }
/* Create a custom radio button */
.checkmarkR { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; }
/* On mouse-over, add a grey background color */
.contradio:hover input ~ .checkmarkR { background-color: #ccc; }
/* When the radio button is checked, add a blue background */
.contradio input:checked ~ .checkmarkR {background-color: #f69608; }
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmarkR:after { content: ""; position: absolute; display: none; }
/* Show the indicator (dot/circle) when checked */
.contradio input:checked ~ .checkmarkR:after { display: block; }
/* Style the indicator (dot/circle) */
.contradio .checkmarkR:after { top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: white; }

/* Buttons */
#acp a.btn								{ text-decoration: none; cursor: pointer; }
#acp .btn									{ font-size: 1.000rem; text-align: center; padding: 0.500rem; border-radius: 5px; border-color: transparent; display: block; cursor: pointer; }
#acp .btn i								{ margin-right: 0.500rem; }
#acp .btn100							{ width: 100%; }
#acp .btn50								{ width: 48%; }
#acp .btn33								{ width: 31%; }
#acp .btn25								{ width: 23%; }
#acp .btn10								{ width: 9%; border-radius: 5px; text-align: center; }
#acp .btn10 i							{ margin: 0 !important; }
#acp a.btnm								{ width: 15%; margin: 0 2% 1rem 0; border: 1px solid #333; color: #333; }
#acp a.btnm:nth-child(6n)	{ margin-right: 0; }
#acp a.btnm:hover					{ border: 1px solid #333; background: #333; color: #fff;}
#acp a.btnq								{ width: 23%; margin: 0 2.666% 1rem 0; border: 1px solid #333; color: #333; }
#acp a.btnq:nth-child(4n)	{ margin-right: 0; }
#acp a.btnq:hover					{ border: 1px solid #333; background: #333; color: #fff;}

/* Tabs */
#acp .tabs													{ width: 100%; }
#acp .tab .hrborder:last-child			{ display: none; }
#acp label.tab											{ width: auto; font-size: 1rem; color: #ffffff; order: 1; padding: 0.625rem 1.000rem; cursor: pointer; transition: background ease 0.2s; text-align: center; margin-right: 1.000rem; background: #333333; border: 1px solid #333333; border-radius: 5px; }
#acp label.tab:hover								{ background: #f69608; border: 1px solid #f69608; border-radius: 5px; box-sizing: border-box; color: #ffffff; }
#acp label.tab:last-child						{ margin-right: 0; }
#acp label.tab i										{ margin-right: 10px; }
#acp .tabcontent										{ display: none;  height: auto; order: 99; overflow: hidden; padding: 1rem 0 0 0; position: relative; width: 100%; }
#acp .tabcontent p:last-of-type			{ margin: 0; }

#acp .tabcontent a.listR						{ display: inline-block;  padding: 0.625rem; width: 31.333%; margin: 0 1% 0.625rem 1%; background: #fff; color: #000; text-decoration: none; border-radius: 5px; }
#acp .tabcontent a.listR:hover			{ background: #f69608; color: #fff; border-radius: 5px; }
#acp .tabcontent a.listR i					{ margin-right: 1.000rem; }
#acp .tabcontent p									{ line-height: 1.5; }
#acp input[type="radio"].tab				{ display: none; height: 0; width: 0; }
#acp input[type="radio"]:checked.tab  + label { display: block; }
#acp input[type="radio"]:checked.tab  + label + .tabcontent { display: block; }
#acp .tabcontent .name							{ width: 15%; padding: 0.500rem 1rem; }
#acp .tabcontent .data							{ width: 25%; padding: 0.500rem 1rem; }
#acp .tabcontent .data a						{ text-decoration: none; color: #000000; }
#acp .tabcontent .data a:hover			{ text-decoration: underline; color: #f69608; }
#acp .hrleer												{ clear: both; width: 100%; border: none; color: transparent; }


@media screen and (max-width: 1366px){
	header									{ position: fixed; width: 100%; margin: 0 auto; display: block; background: #f1f1f1; color: #000000; z-index: 99; }
	.navcontainer						{ display: block; }
	#sidebar								{ display: none; }
	main										{ padding-top: 60px; }
	#acp #workspace					{ margin: 0 auto 0 0; width: 100%; overflow: auto; padding: 1.500rem; }
	#acp .col50							{ width: 90%; padding: 1.500rem; margin: 0 auto; }
	#acp .col60							{ width: 90%; padding: 1.500rem; margin: 0 auto; }
	#acp .col40							{ width: 90%; padding: 1.500rem; margin: 0 auto; }
	}