:root {
  --menuWidth: 200px;
  --menuBackgroundColor: #494848;
  --menuBorderColor: #474747;
  --menuHeadBackgroundColor: #ececec;
  --menuActiveBackground: #fff;
  --menuHoverBackground: rgba(255,255,255,0.1);

  --topBackgroundColor: #05b31c;

  --kundenMenuWidth: 300px;

  --fontSizeDefault: 16px;

  --colorInputFocus: #f0fff2;
  --colorInputFocusText: #000;

  --colorKundenHover: #f0fff2;
  --colorKundenAktiv: #05b31c;

  --colorError: #a8071a;
  --colorErrorLight: #f5222d;
  --colorSucess: #237804;
  --colorWarning: #ad6800;

  --orange: #ea5b0c;

  --grey1: #494848;
  --grey2: #262626;
  --grey3: #595959;
  --grey4: #8c8c8c;
  --grey5: #bfbfbf;
  --grey6: #d9d9d9;
  --grey7: #f0f0f0;
  --grey8: #f5f5f5;
  --grey9: #fafafa;
}


*                 			{ hyphens: none; overscroll-behavior: none; padding: 0; margin: 0; box-sizing: border-box; font-family: "Roboto"; font-weight: 400; font-size: var(--fontSizeDefault);  }
*:focus 					{ outline: none; }

h1							{ font-size: 24px; line-height: 34px; margin: 0 0 20px 0; padding: 0; width: 100%; text-align: center; }
h2							{ font-size: 20px; line-height: 30px; margin: 0 0 10px 0; padding: 0; width: 100%; text-align: center; }

b, strong					{ font-weight: 500; }

ul, ol 						{ list-style: none; padding: 0; margin: 0; }
li							{ margin: 0; padding: 0; }

a							{ color: #000; }

table 						{ border-collapse: collapse; }

hr							{ margin: 20px 0 ; border:0; height: 1px; background: var(--menuBackgroundColor); }


p 							{ margin: 0 0 10px 0; }
p.notes 					{ padding: 5px; background: yellow; font-style: italic; }

input[type=text],
input[type=email],
input[type=search],
input[type=password]		{ height: 28px; line-height: 28px; border:1px solid var(--grey1); font-size: var(--fontSizeDefault); display: block; padding: 0 8px; font-weight: 400; -webkit-appearance: none; border-radius: 0; }

input[type=date]			{ width: 120px !important; height: 28px; line-height: 28px; border:1px solid var(--grey1); font-size: var(--fontSizeDefault); display: block; padding: 0 5px; font-weight: 400; -webkit-appearance: none; border-radius: 0; }
input[type=time]			{ width: 110px; height: 28px; line-height: 28px; border:1px solid var(--grey1); font-size: var(--fontSizeDefault); display: block; padding: 0 5px; font-weight: 400; -webkit-appearance: none; border-radius: 0;}

input::placeholder			{ font-weight: 300; }
input:focus					{ }

select 						{ line-height: 28px; height: 30px border-radius:0; border:1px solid var(--menuBorderColor); padding: 0 5px; color:#000; }
textarea 					{ width:100%; border:1px solid var(--grey1); font-weight: 400; border-radius: 0px; }
textarea::placeholder		{ font-weight: 300; }

input[type=submit]			{ color: #000; line-height: 28px; height:fit-content; border:1px solid var(--grey1); font-size: var(--fontSizeDefault); padding: 0 10px; margin: 0 0 10px 0; display: block; white-space: nowrap; background:#fff; cursor: pointer; -webkit-appearance: none; border-radius: 0; }
input[type=submit]:hover 	{ color: #fff; background:var(--grey6); }
button						{ color: #000; line-height: 28px; height:fit-content; border:1px solid var(--grey1); font-size: var(--fontSizeDefault); padding: 0 10px; margin: 0 0 10px 0; display: block; white-space: nowrap; background:#fff; cursor: pointer; -webkit-appearance: none; border-radius: 0; }
button:hover 				{ color: #fff;background:var(--grey6); }
button i 					{ margin: 0 7px 0 0; }

/* Scrollbar */
::-webkit-scrollbar 			{ width: 14px; }
::-webkit-scrollbar-track 		{ background: #f1f1f1; }
::-webkit-scrollbar-thumb 		{ background: #888; }
::-webkit-scrollbar-thumb:hover { background: #555; }

.mono 					{ font-family: "Roboto Mono";}
.left 					{ text-align: left !important; }
.right 					{ text-align: right !important; }
.center 				{ text-align: center !important; }
.hide					{ display: none !important; }
.boxShadow 				{ box-shadow: 0 10px 5px 0px rgba(0,0,0,0.15); }

.copy2Clipboard			{ cursor: pointer; }
.copy2Clipboard:hover	{ color: var(--orange); }

.delete			{ cursor: pointer; }
.delete:hover	{ color: red; }

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

.datainfo				{ cursor: pointer; }
.datainfo:hover			{ color: var(--orange); }



#messageWrap						{ width: auto; margin: 0; display: flex; flex-wrap: wrap; position: fixed; top:10px; left:50%; transform: translateX(-50%); z-index: +2; }
#messageWrap .text 					{ width: 100%; text-align: center; align-self: center; }
#messageWrap .is-success			{ text-align: center; padding: 10px 40px; background: var(--colorSucess); color: #fff; border:2px solid #fff; display: inline-block; line-height: 30px; border-radius: 5px; }
#messageWrap .is-error				{ text-align: center; padding: 10px 40px; background: var(--colorError); color: #fff; border:2px solid #fff; display: inline-block; line-height: 30px; border-radius: 5px; }

#container							{ width: 100%; min-height: 100vh; padding: 0; display: flex; flex-wrap: wrap; }

#openMenu							{ width: 50px; height: 50px; position: absolute; top:20px; left: 20px; text-align: center; }
#openMenu i 						{ font-size: 30px; line-height: 50px; cursor: pointer; }
#openMenu i:hover					{ color: var(--orange); }

#closeMenu							{ width: 50px; height: 50px; position: absolute; top:20px; left: 0; text-align: center; }
#closeMenu i 						{ color:#fff; font-size: 30px; line-height: 50px; cursor: pointer; }
#closeMenu i:hover					{ color: var(--orange); }

aside#menu							{ width: var(--menuWidth); height: 100vh; position: absolute; top:0; left: 0; border-radius: 0; background:var(--grey1); padding: 20px 10px; z-index: +1; }
aside#menu .menuList				{ padding:0; margin: 70px 0 0 0; }
aside#menu .menuList li				{ margin: 0 0 5px 0; }
aside#menu .menuList li a 			{ padding: 0 0 0 10px; width: 100%; text-align: left; display: block; line-height: 40px; text-decoration: none; color: #fff; border-radius: 7px;}
aside#menu .menuList li a:hover 	{ color:#fff; }
aside#menu .menuList li a.isActive 		{ background: #fff; color:#000; border-radius: 5px;  }
aside#menu .menuList li a.isActive i 	{ color: var(--orange); }
aside#menu .menuList li a i 		{ font-size: 16px; margin: 0 10px 0 0; }
aside#menu .user 					{ position: absolute; bottom: 0; width: 100%; padding: 20px 0; color: #fff; text-align: center;}

aside#menu .box						{ margin-left: 10px; margin-right: 10px; }

#content							{ width: 94%; max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; padding: 0; align-content: flex-start; }


.message-header		{ padding: .75em 1.5em; }

.column-Login		{ padding: 100px 0; }

.file-cta,
.file-name,
.input,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous,
.select select,
.textarea			{ padding-left: 8px; padding-right: 8px; }
.textarea			{ padding: 4px; }

.inputDatalist::-webkit-calendar-picker-indicator { opacity: 100; }

.select					{ width: 100%; }
.select select			{ width: 100%; }

.loginWrap				{ width: 50%; max-width: 500px; height: fit-content; margin: 150px auto 0 auto; padding: 20px 20px 10px 20px; border-radius: 0; }
.loginWrap h5			{ text-align: center; margin: 0 0 20px 0; font-weight: 400; }
.loginWrap .field		{ width: 100%; margin: 0 0 10px 0; }
.loginWrap input		{ width: 50%; margin: 0 auto; }
.loginWrap button		{ width: auto; margin: 0 auto; }


.boxenWrap				{ width: 100%; max-height: 100%; padding: 25px 20px 20px 20px; margin: 0 0 20px 0; height: fit-content; display: flex; flex-wrap: wrap; justify-content: space-between; }
.boxenWrap .box50		{ width: calc(50% - 10px); background: #fff; padding: 0; border-radius: 5px; }
.boxenWrap .box100		{ width: 100%; background: #fff; padding:0; border-radius: 5px; }
.box .innerWrap			{ padding: 0 20px 10px 20px; }
.box h5					{ font-size: 20px; line-height: 40px; font-weight: 400; margin: 0 0 15px; padding: 0 15px; width: 100%; color:#000; }
.box h5:after			{ content:""; width: 50px; height: 2px; background: var(--orange); display: block; margin: 0 auto; }
.box h6					{ font-size: 16px; line-height: 22px; font-weight: 600; margin: 0 0 5px 0; padding: 0 20px; width: 100%; }



table									{ width: 100%; clear: both; position: relative; margin: 0 0 30px 0; }
table thead th 							{ border-bottom: 2px solid #f0f2f5; font-weight: 400; text-transform: uppercase; padding: 3px 5px 3px 5px; line-height: 20px; text-align: left; z-index: +1; color:#7b809a; font-size: 12px; background: #fff; }
table thead th:first-of-type			{ padding-left: 10px; }
table thead th:last-of-type 			{ text-align: right; padding-right: 10px; }
table thead th span						{ font-weight: 400; text-transform: uppercase; font-size: 12px; line-height: 20px;}

table tfoot td 							{ border-top: 2px solid #f0f2f5; border-bottom: 0; font-weight: 700; padding: 3px 5px 3px 5px; line-height: 26px; background: #fff; text-align: left; }
table tfoot td:first-of-type			{ padding-left: 10px; }
table tfoot td:last-of-type 			{ text-align: right; padding-right: 10px; }

table tbody tr:hover td 				{ background: #eee; }

table tr.hide 							{ display: none; }
table tr.deleted td 					{ background: rgba(255,0,0,0.2); }
table tr.deleted:hover td				{ background: rgba(255,0,0,0.4); }

table td 		 						{ border-bottom: 1px solid #f0f2f5; padding: 3px 5px 3px 5px; vertical-align: top; line-height: 26px; 	 }
table td:first-of-type					{ padding-left: 10px; }
table td:last-of-type 					{ text-align: right; padding-right: 10px; }
table td:last-of-type i:last-of-type 	{ margin: 0; }
table td i 								{ margin-right: 10px; }


table.dataTable										{ margin-top: 0 !important; }
div.dataTables_wrapper div.dataTables_filter       { width: 100%; }
div.dataTables_wrapper div.dataTables_filter input { width: 100%; margin: 0; font-weight: bold; }


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

	.loginWrap				{ width: 94%; max-width: 500px; }
	.loginWrap input		{ width: 90%; text-align: center; }



	input[type=text],
	input[type=email],
	input[type=search],
	input[type=password],
	input[type=submit],
	input[type=date],
	input[type=time],
	button				{ height: 34px; line-height: 34px;  }


}