:root {
		--SECTechGrey: #eeeeee;
		--SECTechwhite: #ffffff;
		--SECTechLightGrey: #d7d8d6;
		--SECTechMidGrey: #9c9ea0;
		--SECTechPurple: #8d5fff;
		--SECTechLightPurple: #c2b4fc;
		--SECTechMidPurple: #55419e;
		--SECTechDarkPurple: #26224c;
		--SECTechSECNavy: #031f30;
		--SECTechSECRed: #fc273f;
	}
	body { margin: 15px; font-family: Arial, Helvetica, sans-serif;color: var(--SECTechSECNavy); background: url(wallpaper_white.png) no-repeat center center fixed, var(--SECTechGrey); background-size: cover; background-repeat: no-repeat; background-position: center center; }
	article {padding-top: 50px; }
	header {padding-top: 0px; }
	a,a:visited,a:hover,a:active{color: var(--SECTechSECNavy);-webkit-backface-visibility:hidden;backface-visibility:hidden;position:relative;transition:0.5s color ease;text-decoration:none;}
	a:hover{ color: var(--SECTechSECRed); }
	body > header > h1 { color: var(--SECTechSECNavy); font-size:100px;font-size:30px; display: flex; justify-content: left; align-items: center; height: 70px; }
	body > header > h1 > img { width: 100px; }
	.logo { content:url("https://mservice.securitas.de/css/Securitas_Technology_blue.png"); }
	.mServiceLogo { width: 150px; }
	.ui.inverted.menu { background: var(--SECTechSECNavy); }
	.noaccess {padding:5px; width: 100%;height: 100px;font-weight:bold;background-color: #ff0000;text-align:center;display: flex; align-items: center; justify-content: center; }
/* footer */
	footer { position: fixed; left: 0; bottom: 0; width: 100%; background-color: var(--SECTechSECNavy); color: var(--SECTechGrey); text-align: center; padding: 5px; }
	footer a,footer a:visited,footer a:hover,footer a:active{color: var(--SECTechGrey);-webkit-backface-visibility:hidden;backface-visibility:hidden;position:relative;transition:0.5s color ease;text-decoration:none;}
	footer a:hover{ color: var(--SECTechMidGrey);text-decoration: underline; }
/* boxen (übersicht) */
	.flex-container { display: flex; justify-content: flex-start; flex-wrap: wrap; align-content: space-evenly; align-items: stretch; }
	.flex-container > div { background-color: var(--SECTechGrey); color: var(--SECTechSECNavy); font-size: 20px; width: 200px; height: 200px; text-align: left; vertical-align:top; box-shadow: 0px 0px 10px 2px var(--SECTechMidGrey); }
	.flex-container .boxn  > p { padding: 5px; }
	.box { height: 20px;cursor:pointer;width: 200px;height: 150px;position: relative;background-color: #f0f0f0;border: 1px solid #ccc;  }
	.box:hover { background-color: var(--SECTechMidGrey) !important; }
	.box XXa:hover { color: var(--SECTechSECNavy) }
	.box2 { float: left; width: 49%; margin-right: 2%; padding: 0px;  box-sizing: border-box; }
	.box2:last-child { margin-right: 0; }
	.fas {padding-right: 6px; }
	.new_box {  width: 200px;  height: 150px !important; position: relative; background-color: #f0f0f0; border: 1px solid #9C9EA0; }
	.box_headline { position: absolute; top: 0;left: 0;margin: 0;padding: 5px;font-size:20px;font-weight: normal; padding-left: 4px; padding-top: 4px; border: 0px;cursor:pointer }
	.box_center-content { position: absolute;top: 60%;left: 50%;transform: translate(-50%, -50%);font-size: 14px;font-size:35px;  border: 0px;cursor:pointer; }
/* Impressum / Datenschutz */
	.impressum a,.impressum a:visited,.impressum a:hover,.impressum a:active{color: var(--SECTechMidPurple);-webkit-backface-visibility:hidden;backface-visibility:hidden;position:relative;transition:0.5s color ease;text-decoration:none;}
	.impressum a:hover{ color: var(--SECTechMidPurple);text-decoration: underline; }
	.datenschutz a,.datenschutz a:visited,.datenschutz a:hover,.datenschutz a:active{color: var(--SECTechMidPurple);-webkit-backface-visibility:hidden;backface-visibility:hidden;position:relative;transition:0.5s color ease;text-decoration:none;}
	.datenschutz a:hover{ color: var(--SECTechMidPurple);text-decoration: underline; }
/* tabelle (service) */
	table > thead { background-color: var(--SECTechSECNavy); }
	table { box-shadow: 0px 0px 10px 2px var(--SECTechMidGrey); }
	.table { box-shadow: 0px 0px 10px 2px var(--SECTechMidGrey); }
	td { color: var(--SECTechSECNavy); }
	tr:hover td { background-color: var(--SECTechMidGrey); } /* cursor: pointer; } */
	.ui.table { background-color: var(--SECTechGrey); box-shadow: 0px 0px 10px 2px var(--SECTechMidGrey); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; outline:0px solid black; }
	.erstezelle { font-weight: bold; }
	tr.table-hover-pointer:hover { cursor: pointer; }
	tr.table-no-pointer:hover { cursor: normal; }	
	.ui.table thead tr:first-child>th:last-child { border-radius: 0 0 0 0; }
	table thead th:nth-child(2) { width: 120px; }
	th { position: sticky; top: 0px; }
	#tabelleAnlagenliste > thead > tr > th:nth-child(n)  { border-radius: 0 0 0 0; }
	#tabelleServiceauftraege > thead > tr > th:nth-child(5) { width: 15% !important; }
	
	.tableMserviceBorder. .tableMserviceBorder:hover { background-color: var(--SECTechSECNavy) !important;color: var(--SECTechGrey) !important;border-radius: 0 0 0 0 !important; }
	.tableMservice, .tableMservice:hover {background-color: var(--SECTechSECNavy) !important;color: var(--SECTechGrey) !important; }

	.hidden { display: none !important; }
	tr.hidden, tr.hidden td, tr.hidden .tablebreak { display: none !important; }

/* Submenü */
	body > nav:nth-child(n) > div > div > div, .dropdown, .active {color: #ffffff !important; }
	body > nav:nth-child(n) > div > div > div > span > a {color: #ffffff; }
	body > nav > div > div > div > div > div:nth-child(n) > a {color: #031f30 !important; }
/* logos */
	.firmenlogo { float:left;display: flex; flex-direction: column; justify-content: flex-end; height: 140px; width: 200px; }
	.customerlogo { float:right;display: flex; flex-direction: column; justify-content: flex-end; height: 140px; width: 190px; }
	.XX_Customer { max-width:150px; }
	.XX_Customer_align { text-align: right; } 
	.mserviceLogo { width: 180px; }
/* popup */
	.featherlight .featherlight-content { position: relative; text-align: left; vertical-align: middle; display: inline-block; overflow: auto; padding: 0px 0px 0; border-bottom: 0px solid transparent; margin-left: 5%; margin-right: 5%; max-height: 95%; background: #fff; cursor: auto; white-space: normal; max-width: 90%; width: 90%; max-height: 90vh; overflow-y: auto; }
	.featherlight .featherlight-close-icon { background: transparent; position: fixed !important; color: #000000; font-size: 20px; top: 5px; right: 5px; background-color: #D7D8D6; font-weight: bold; }
	.featherlight.popup-kennwort .featherlight-content { width: 400px; max-width: 100%; }
	.featherlight.popup-benutzerverwaltung .featherlight-content { max-width: 90%; width: 90%; max-height: 90vh;height: 90vh; }
	.featherlight .featherlight-close-icon:hover { color: #ff0000; }
/* Drucken in Popup */
	.drucken { border: none; background: transparent; cursor:pointer; }
	.drucken:hover { color: #ff0000; }
	#printButton { bottom: 1pox; background-color: #ffffff;color: #000000;font-weight: normal;margin-left: 20px; }
	#printButton:hover { background-color: #9C9EA0; }
/* Kontakt in Popup */
	#kontaktButton { margin-bottom: 1rem; background-color: #ffffff;color: #000000;font-weight: normal;margin-left: 10px; }
	.serviceauftragKontaktButton { float:right;width: 350px;text-align:right;padding-top: 10px; }
	#kontaktButton:hover { background-color: #9C9EA0; }
	#printButton, #kontaktButton { background-color: #8d5fff; color: #eeeeee; height: 38px; width: 150px; border: none; border-radius: 4px; font-weight: normal; margin-left: 10px; cursor: pointer; }
	#printButton:hover, #kontaktButton:hover { color: #031f30; background-color: #c2b4fc; }
/* Filter */
	.item {color: green; }
	body > article > div.box2 > div > div.ui.selection.dropdown.active.visible > div.menu.transition.visible > div.item.active.selected {color: #000000 !important; }
	body > article > div > div > div.ui.selection.dropdown > i { color: #000000 !important; }
	#searchInput { width: 400px !important; }
/* Infoicon */
	.infoicon { width: 50px; display: inline-block; font-size: 16px; padding-left: 11px; bottom: 2px; text-align: left; position: relative; padding-top: 0px; color: var(--SECTechPurple); }
	/* .infoicon { padding: 0px; text-align: right;} */ 
/* Scroll to top */
	#scroll-to-top { position: fixed; bottom: 30px; right: 10px; cursor: pointer; display: none; }
	.image_totop { width: 40px; }
/* Kein Javascript */
	.no-javascript {width: 100%; padding: 5px; color: green; background-color: #d1ffd1; border: 1px solid green;font-weight: bold;text-align:center;}
/* Abstandshalter bottom */
	.abstand_bottom { clear:both;padding-bottom: 60px; } 
/* Icons Benutzerverwaltung tauschen gegen Text */
	.tab-desktop-only { display: block; }
	.tab-mobile-only {  display: none; }
/* div speichern benutzer verwaltet */
	.divSpeichernButtonBenutzerVerwalten { text-align:right;float:right;position: sticky; z-index: 9999; top: 50px; }
	.speichernButtonBenutzerVerwalten { border: none;border-radius: 4px;width: 200px;height:42px !important; }
/* TAB 1 - Benutzerverwaltung inputfeld */
	#add-user { height: 3em;width:200px; }
/* TAB 1 - Benutzerverwaltung Speichern button */
	#submitbutton_add_user { border: none;border-radius: 4px;height: 3em !important;width: 200px !important; }
	#submitbutton_add_another_user { border: none;border-radius: 4px;height: 3em !important;width: 200px !important;display:none; }
	#generated_password { border-radius: 4px;height:38px;display: inline;border: 1px solid #000000;padding:6px; }
/* Registerkarte Benutzverwaltung */
	.registerKarteBenutzverwaltung { font-family: Arial, Helvetica, sans-serif;color: var(--SECTechSECNavy); background: url(wallpaper_white.png) no-repeat center center fixed, var(--SECTechGrey);background-size: cover; background-repeat: no-repeat; background-position: center center;padding: 10px;height:100%; }

	.impressumDiv {font-family: Arial, Helvetica, sans-serif;color: var(--SECTechSECNavy); background: url(css/wallpaper_white.png) no-repeat center center fixed, var(--SECTechGrey);background-size: cover; background-repeat: no-repeat; background-position: center center;padding: 10px;}


@media only screen and (max-width: 767px)
{
	
/* MOBIL */
    .flex-container { display: flex !important; width: 100%; gap: 20px;  }
	.column { width :100%; }
    .box2 { float: left; width: 100%;  }
    .flex-container > div { width: 100%;height: 80px; }
	.boxcount { height: 80px;margin-left: 150px;font-size: 25px  }
	p { font-size: 18px; }
	.erstezelle { font-weight: normal; font-size: 18px; }
	.zweitezelle { font-size: 12px;margin-left:4px }
	.drittezelle { font-width:bold;font-size: smaller; }
/* Suchen und Drucken button */
	body > article:nth-child(4) > div.box2 > div > div.ui.input { width: 100%; }
	#searchInput {width: 100% !important; }
	body > article:nth-child(4) > div.box2 > div > div.ui.selection.dropdown {width: 100%; }
	#printButton { display:none; }
/* Scroll to top */
	#scroll-to-top { position: fixed; bottom: 30px; right: 10px; cursor: pointer; display: none; }
	.image_totop { width: 30px; }
/* Drucken in Auftragdetails */
	#printButton {width: 107pt; }
/* Tabelle Neuer Serviceauftrag */
	#tabelleUserliste > thead > tr > th:nth-child(5), #tabelleUserliste > tbody > tr > td:nth-child(5) { text-align: right !important; }
	table.ui.table tr { display: block; margin-bottom: 1rem; padding: 0.5rem; }
	table.ui.table td { display: flex; flex-direction: row; align-items: flex-start; width: 100%; padding: 0.75rem 1rem; border-top: 1px solid #eee; text-align: left !important; }
	table.ui.table td::before { content: attr(data-label); display: inline-block; width: 85px; color: #666; margin-right: 1rem; white-space: nowrap; flex-shrink: 0; }
	#tabelleUserliste > tbody > tr > td { padding: 0px !important;font-size:14px; }
	#tabelleUserliste > tbody > tr > td:nth-child(1n) { padding: 0px !important;font-size:14px; }
	#tabelleUserliste > tbody > tr:nth-child(n) > td:nth-child(n) { margin: 0px; padding: 0px !important;font-size:14px;font-weight: normal;  font-size: 100%; }
	#newServiceauftragButton {margin-top: 10px; }
	#tabelleUserliste > thead:nth-child(1) { display: none; }
	.ui.table { box-shadow: none; border: none; }

/* Tabelle Benutzerverwaltung Benutzer löschen */
	#tabelleUserlisteDelete > thead > tr > th:nth-child(5), #tabelleUserlisteDelete > tbody > tr > td:nth-child(5) { text-align: right !important; }
	table.ui.table tr { display: block; margin-bottom: 1rem; padding: 0.5rem; }
	table.ui.table td { display: flex; flex-direction: row; align-items: flex-start; width: 100%; padding: 0.75rem 1rem; border-top: 1px solid #eee; text-align: left !important; }
	table.ui.table td::before { content: attr(data-label); display: inline-block; width: 85px; color: #666; margin-right: 1rem; white-space: nowrap; flex-shrink: 0; }
	#tabelleUserlisteDelete > tbody > tr > td { padding: 0px !important;font-size:14px; }
	#tabelleUserlisteDelete > tbody > tr > td:nth-child(1n) { padding: 0px !important;font-size:14px; }
	#tabelleUserlisteDelete > tbody > tr:nth-child(n) > td:nth-child(n) { margin: 0px; padding: 0px !important;font-size:14px;font-weight: normal;  font-size: 100%; }
	#newServiceauftragButton {margin-top: 10px; }
	#tabelleUserlisteDelete > thead:nth-child(1) { display: none; }
	.ui.table { box-shadow: none; border: none; }

/* Tabelle Serviceaufträge Startseite */
	body > article:nth-child(4) > div.box2 > div {padding-bottom: 15px; }
	#tabelleServiceauftraege thead, #tabelleWartungseauftraege thead { display: none; }
	#tabelleServiceauftraege tr, #tabelleWartungseauftraege tr { margin-bottom: 1rem; padding: 0.5rem; display: table-row !important; }
	#tabelleServiceauftraege td, #tabelleWartungseauftraege td { display: flex; flex-direction: row; align-items: flex-start; padding: 0.75rem 1rem; border-top: 1px solid #eee; text-align: left !important; margin: 0px; padding: 0px !important;font-size:14px;font-weight: normal;  font-size: 100%; display: inline-block; flex-grow: 1; word-break: break-word !important; gap: 20px;margin: 5px; }
	#tabelleServiceauftraege td::before, #tabelleWartungseauftraege td::before { content: attr(data-label); display: inline-block; width: 85px; margin-right: 1rem; white-space: nowrap; flex-shrink: 0; }
	.tablebreak { padding-left:99px;width:100%;margin-top: -20px; word-break: break-word !important; }
	#tabelleServiceauftraege tr[style*="display: none"], #tabelleWartungseauftraege tr[style*="display: none"] { display: none !important; }

/* Tabelle Anlagenliste Benutzverwaltung Tab 2 */
	body > article:nth-child(4) > div.box2 > div {padding-bottom: 15px; }
	#tabelleAnlagenliste thead { display: none; }
	#tabelleAnlagenliste tr { margin-bottom: 1rem; padding: 0.5rem; display: table-row !important; }
	#tabelleAnlagenliste td { display: flex; flex-direction: row; align-items: flex-start; padding: 0.75rem 1rem; border-top: 1px solid #eee; text-align: left !important; margin: 0px; padding: 0px !important;font-size:14px;font-weight: normal;  font-size: 100%; display: inline-block; flex-grow: 1; word-break: break-word !important; gap: 20px;margin: 5px; }
	#tabelleAnlagenliste td::before { content: attr(data-label); display: inline-block; width: 85px; margin-right: 1rem; white-space: nowrap; flex-shrink: 0; }
	#tabelleAnlagenliste tr[style*="display: none"] { display: none !important; }
	
/* Tabelle Email versenden (Serviceauftrag) */
	#tabelleEmailVersenden thead { display: none; }
	#tabelleEmailVersenden tr { margin-bottom: 1rem; padding: 0px; display: table-row !important; }
	#tabelleEmailVersenden td { display: flex; flex-direction: row; align-items: flex-start; padding: 0.75rem 1rem; border-top: 1px solid #eee; text-align: left !important; margin: 0px; padding: 0px !important;font-size:14px;font-weight: normal;  font-size: 100%; display: inline-block; flex-grow: 1; word-break: break-word !important; gap: 20px;margin: 5px; }
	#tabelleEmailVersenden td::before { content: attr(data-label); display: inline; width: 85px; margin-right: 0px; white-space: nowrap; flex-shrink: 0; }
	#tabelleEmailVersenden tr[style*="display: none"] { display: none !important; }
	header { margin-top: 0px !important; }

/* Customerlogo ausblenden */
	.customerlogo {display: none; }
/* Header oben bündig */
	header { margin-top: -41px; }
/* Boxen Startseite nebeneinander */
	.flex-container > div { width: 43%; }
	.box_headline { font-size: 15px; }
/* popup */
	.featherlight .featherlight-content { margin-left: 0px; margin-right: 0px; max-width: 100%; width: 100% !important; max-height: 100% !important; overflow-y: auto; vertical-align: top; }
/* popup - schließen button */
	.featherlight .featherlight-close-icon { background: transparent; position: fixed !important; color: #000000; font-size: 20px; top: 5px; right: 11px; background-color: #D7D8D6; font-weight: bold; }
/* KontaktButton Serviceauftrag Popup */
	.serviceauftragKontaktButton, .wartungsauftragKontaktButton { float:left;width: 100%;text-align:right;padding-top: 20px; }
	.serviceauftragKontaktButton #kontaktButton, .wartungsauftragKontaktButton #kontaktButton {width: 100%;margin-left: 0px; }
/* Tabelle Auftragsdetails */
	#tabelleAuftragsdetails td, #tabelleWartungsdetails td { text-align: left !important; }
	#tabelleAuftragsdetails td::before, #tabelleWartungsdetails td::before { width: 0px; margin-right: -10px; }
/* Popup - Benutzerverwaltung */
	body > div.featherlight.popup-benutzerverwaltung > div { max-width: 100% !important; width: 100% !important; max-height: 100% !important; overflow-y: auto; }
/* Icons Benutzerverwaltung tauschen gegen Text */
	.tab-desktop-only { display: none; }
	.tab-mobile-only {  display: block; }


/* TAB 1 - Benutzerverwaltung inputfeld */
	#add-user { width: 100%  !important;}
/* TAB 1 - Benutzerverwaltung Speichern button */
	#submitbutton_add_user { width: 100%  !important; }
	#submitbutton_add_another_user { width: 100%  !important; }
	#generated_password { display: block; width: 100% !important;margin-top: 10px; }

/* TAB 2 - Benutzerverwaltung div speichern benutzer verwaltet */
	.divSpeichernButtonBenutzerVerwalten { text-align:right;float:right;position: unset;z-index: 9999;top: 50px;width: 100%; }
	.speichernButtonBenutzerVerwalten { width: 100% !important;margin-top: 20px; }
/* TAB 2 - Benutzerverwaltung Dropdown benutzer verwalten */
	#emailDropdown {width: 100%; }
/* TAB 3 - Tabelle */
	#tabelleUserlisteDelete > tbody > tr:nth-child(1) > td.left.aligned.erstezelle {width: 0px !important; }
	#tabelleUserlisteDelete > tbody > tr:nth-child(n) > td:nth-child(2) { text-align: right !important; }
/* TAB 3 - Tabelle Benutzverwaltung Benutzer löschen */
	#tabelleUserlisteDelete > tbody > tr > td::before { width: 0px !important;white-space: nowrap;}
	#tabelleUserlisteDelete > tbody > tr > td { width: 100% !important; border: 1px solid #ff0000; white-space: nowrap;}
/* Registerkarte Benutzverwaltung */
	.registerKarteBenutzverwaltung { padding: 0px; width: 100%; border-radius: 0px; border: 0px; }
	body > div.featherlight.popup-benutzerverwaltung > div > div > div.ui.top.attached.tabular.menu { border-radius: 0px; padding-left: 10px;padding-top: 10px;overflow-y: none; }


	#tabelleAnlagenliste > tbody > tr > td:nth-child(1),
	#tabelleServiceauftraege > tbody > tr > td.left.aligned.erstezelle {margin-top: 17px; }
	#tabelleServiceauftraege > tbody > tr > td:not(:first-child),#tabelleAnlagenliste > tbody > tr > td:not(:first-child) {margin-left: 15px; !important }


	tr.hidden,
	tr.hidden td,
	tr.hidden .tablebreak {
		display: none !important;
	}

/* Wichtig: Pseudoelemente gezielt ausblenden */
	tr.hidden td::before,
	tr.hidden .tablebreak::before {
		content: none !important;
		display: none !important;
	}
	tr.hidden,
	td.hidden,
	td.hidden *::before,
	td.hidden *::after,
	td.hidden .tablebreak {
		display: none !important;
	}
}