/* CSS Document */
/* ========== Thank you for looking at this code ========== */
/* ========== WARNUNG! COPYRIGHT BY haller.id | SWITZERLAND ========== */

:root {	
	--oneColor: #e5ebf3;
	--twoColor:#AFC789;
	--threeColor:/*#AFC789*/ #789747;
	--inputColor:#21468b;
	--buttonColor:#EFEFEF;
	--hover1Color:#F5F5F5;
	--hover2Color:#A0A0A1;
	
	--successColor: #28a745;
    --infoColor: #17a2b8;
    --warningColor: #ffc107;
	--dangerColor: #dc3545;
    --lightColor: #f8f9fa;
    --darkColor: #343a40;
	--grayColor: #6c757d;
	--whiteColor: #fff;
	
	--black: #000000;
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Verdana","Segoe UI","Roboto","Helvetica Neue","Arial","Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace: "Verdana","SFMono-Regular","Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace;

	--p: 16px;
	--psmall: 14px;
	--h1:34px;
	--h1small:24px;
	--h2:28px;
    --h2small:23.6px;
    --h3: 12px;
    --h3small: 10px;
	--h4:24px;
	--h4small:24px;
  	--h5: 17px;
    --h5small: 14px;
	--h6:17px;
	--h6small: 14px;
		
    --oneFont: 'web_font_regular';   
	--twoFont: 'web_font_regular_bold'; 

	--borderRadi4:4px;
	--borderRadi10:10px;
    --borderRadi20:20px;
	--borderRadi50:50%;

	--randAbstand1:1rem;
		
	--bewegung:all 0.3s ease-in-out;
	--bewegung6:all 0.4s ease-in-out;
}
	@font-face {
		font-family:'web_font_regular_bold';
		src:url("../assets/MADE TOMMY ExtraBold_PERSONAL USE.otf");
	}
	@font-face {
		font-family:'web_font_regular';
		src:url("../assets/HelveticaLt.ttf");
		/*font-weight: bolder;*/
	}
/* Hiermit können Safari >=1.1, Opera >=9.5, IE9 was anfangen*/
::selection {
    background:var(--oneColor);
    /*color: #336699;*/
	color:var(--twoColor);
}
/* und hiermit der Firefox >=1 */
::-moz-selection {
    background:var(--oneColor);
    /*color: #336699;*/
	color:var(--twoColor);
}
/* ========== ========== DESIGN BODY - HEADQUARTER ========== ========== */
* {
    padding: 0;
    margin: 0;
	font-family:var(--font-family-sans-serif);
    color: var(--whiteColor);
    font: var(--p);
    box-sizing: border-box;
}
html {
	font-size: var(--p);
	margin:0;	
	padding:0;
}
body {
	font-family:sans-serif;
	text-decoration:none;
	margin:0rem 0 0 0 ;
	padding:0;
}
header {
	position: relative;
	width: 100%;
	background-color:var(--twoColor);	
}
main {
	min-height: 700px; 
}
footer {
	position: absolute; 		
	width:  100%;
}
p {
	font-size: var(--p);
	color: var(--darkColor);
}
h1 {
	font-size:var(--h1);
	letter-spacing: 2px;
	font-family:'web_font_regular_bold'!important;
	color: var(--darkColor);
}
h2 {
	font-size:var(--h2);
	color: var(--darkColor);
	letter-spacing: 2px;
	text-transform: uppercase;
    font-weight: bold;
	font-family:'web_font_regular_bold'!important;
}

h3 {
	font-size:var(--h3);
	color: var(--darkColor);
	text-transform: uppercase;
	text-align:center;
	/*letter-spacing: 2px;
	font-family:'web_font_regular'!important;*/
}
h4 {
	font-size:var(--h4);
	color: var(--darkColor);
	text-transform: uppercase;
	/*text-align:center;*/
	letter-spacing: 2px;
    font-weight: bold;
	/*font-family:'web_font_regular_bold'!important;*/
}
h5 {
	/*font-family:'web_font_regular_bold'!important;
	letter-spacing: 2px;*/
	font-size:var(--h5);
	color: var(--darkColor);
	/*text-transform: uppercase;
	text-align:center;*/
    font-weight: bold;
}
h6 {
	/*font-family:'web_font_regular_bold'!important;*/
	font-size:var(--h6);
	color: var(--darkColor);
	/*text-transform: uppercase;*/
	text-align:center;
    font-weight: bold;
}
a {
	color: var(--darkColor);
	text-decoration:none; 
	cursor: pointer;
}
li {
	list-style:none;
}

.hoverbox:hover{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	transition: var(--bewegung6);
}
.main-left{
	width: 20%;
	min-width: 250px;
	background-color:var(--oneColor);
}
.main-right{
	width: 80%;
	display:block;
	background-color:var(--oneColor);
}
.main-right h1{
	padding: 1rem;
}
.main-right h2{
	padding: 1rem;
}


.form_hr {
	position: relative;
	width: 100%;
	height: 50px;
	margin: 1rem 0 1rem 0;
   	background-color: #ddd;
	color: #ddd!important;
}
/* ========== ========== Header ========== ========== */
.header_top_support{
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding:0rem 2rem;
	margin:0;
	background-color:var(--whiteColor);
}
.header_top_support_div1{
	padding-top:0.5rem;
}
.header_top_support_div_ul{
	display: flex;
}
.header_top_support_div_ul img{
	height: 30px;
}
.header_top_support a{
	position: relative;
	display: block;
	padding:0.5rem 2rem 0.5rem 0.2rem;
	transition: var(--bewegung6);
	color:var(--grayColor);
}
.header_top_support a:hover{
	padding:0.5rem 2.4rem 0.5rem 0.2rem;
	transition: var(--bewegung6);
}
.header_top_cms{
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding:0rem 0rem;
	margin:0;
	background-color:var(--oneColor);
}
.main-left img{
	width: 250px;
	height:auto;
	object-fit: contain;
	display: flex;
	justify-content: center;
    margin:0 auto;
}


	/* ========== ========== Main MENU ========== ========== */
.main_cms{
	position: relative;
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between;
	padding:0rem 0rem;
	margin:0.2rem 0;
	background-color:var(--oneColor);
}
.main-left_01{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1rem 0;
}
.main-left_02{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 0 3rem 0;
}
.main-left_hr{
	margin:0.5rem 0;
}
.main_cms_link_1{
	position: relative;
	margin: 0.2rem;
	padding: 0.5rem 0.1rem 0.1rem 0.1rem;
	width: 110px;
	height: 100px;
	background-repeat:no-repeat;
	background-size:cover;
    background-attachment: inherit;
	background-position: center center;
    object-fit: contain;
	background-size: 50px 50px;
	/*background-color:var(--darkColor);*/
	background-color:var(--threeColor);
	text-align: center;
	justify-content:center;
}
.main_cms_link_1:hover{
	background-size: 60px 60px;
}
.main_cms_link_2{
	position: relative;
	margin: 0.2rem;
	padding: 0.5rem 0.1rem 0.1rem 0.1rem;
	width: 227px;
	height: 100px;
	background-repeat:no-repeat;
	background-size:cover;
    background-attachment: inherit;
	background-position: center center;
    object-fit: contain;
	background-size: 50px 50px;
	background-color:var(--twoColor);
	text-align: center;
	justify-content:center;
}
.main_cms_link_2:hover{
	background-size: 60px 60px;
}
.img_icon_01{
	position: relative;
	width: 20px;
	height: 20px;
	margin: 0 0.2rem;
	background-repeat:no-repeat;
	background-size:cover;
    background-attachment: inherit;
	background-position: center center;
    object-fit: contain;
	background-size: 15px 15px;
	background-color: rgba(127,179,255,1.00);
	cursor: pointer;
}
.img_icon_01:hover{
	background-size: 20px 20px;
}
.img_icon_02{
	position: relative;
	min-width: 28px;
	width: 100px;
	height: 30px;
	margin: 0 0.5rem;
	background-repeat:no-repeat;
	background-size:cover;
    background-attachment: inherit;
	background-position: center center;
    object-fit: contain;
	background-size: 20px 20px;
	cursor: pointer;
	
}
.img_icon_02:hover{
	background-size: 25px 25px;
}
.img_icon_02 button{
	border:none;
	background-color: none;
}
.img_bestellungen{
	background-image: url("../bilder/icon/icons_em_ch_bestellungen.png");
}
.img_produkte{
	background-image: url("../bilder/icon/icons_em_ch_produkte.png");
}
.img_online_shop{
	background-image: url("../bilder/icon/icons_em_ch_online_shop.png");
}
.img_rechnung{
	background-image: url("../bilder/icon/icons_em_ch_rechnungen.png");
}
.img_kunden{
	background-image: url("../bilder/icon/icons_em_ch_kunden.png");
}
.img_lieferscheine{
	background-image: url("../bilder/icon/icons_em_ch_lieferketten.png");
}
.img_lieferetiketten{
	background-image: url("../bilder/icon/icons_em_ch_lieferketten.png");
}
.img_zweiterfassung{
	background-image: url("../bilder/icon/icons_em_ch_zeiterfassung.png");
	background-color: var(--grayColor);
	color: var(--grayColor);
}
.img_website{
	background-image: url("../bilder/icon/icons_em_ch_website.png");
}
.img_kampagnenplaner{
	background-image: url("../bilder/icon/icons_em_ch_planer.png");
}
.img_newsletter{
	background-image: url("../bilder/icon/icons_em_ch_newsletter.png");
}
.img_aufgaben{
	background-image: url("../bilder/icon/icons_em_ch_aufgaben.png");
}
.img_chat{
	background-image: url("../bilder/icon/icons_em_ch_chat.png");
}
.img_bearbeiten{
	background-image: url("../bilder/icon/icons_em_ch_bearbeiten.png");
	background-color: var(--cyan);
	color: var(--cyan);
}
.img_loeschen{
	background-image: url("../bilder/icon/icons_em_ch_loeschen.png");
	background-color: var(--red);
	color: var(--red);
}
.img_favorit{
	background-image: url("../bilder/icon/icons_em_ch_favorit.png");
}
.img_bezahlt{
	background-image: url("../bilder/icon/icons_em_ch_bezahlt.png");
	background-color: var(--successColor);
}
.img_unbezahlt{
	background-image: url("../bilder/icon/icons_em_ch_unbezahlt.png");
}
.img_prio{
	background-image: url("../bilder/icon/icons_em_ch_prio.png");
	background-color: var(--warningColor);
}
.img_wird_bearbeitet{
	background-image: url("../bilder/icon/icons_em_ch_wird_bearbeitet.png");
}
.img_wird_speichern{
	background-image: url("../bilder/icon/icons_em_ch_speichern.png");
}
.img_wird_einstellung{
	background-image: url("../bilder/icon/icons_em_ch_einstellung.png");
}
.img_bild_platzhalter{
	background-image: url("../bilder/icon/icons_em_ch_bilder.png");
}

.img_icon_03{
	position: relative;
	width: 25px;
	height: 25px;
	margin: 0 0.2rem;
	background-repeat:no-repeat;
	background-size:cover;
    background-attachment: inherit;
	background-position: center center;
    object-fit: contain;
	cursor: pointer;
}
	/* ========== ========== Main LEFT ========== ========== */
.main-right_left_form{
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.main-right_left{
	position: relative;
	background-color:var(--threeColor);
	width: 100%;
}
.main-right_left_erfolgreich-gespeichert{
	position: relative;
	background-color:var(--warningColor);
	color:var(--whiteColor);
	width: 100%;
	padding: 1rem 1rem;
	animation: animation2 3s ease;	
	transition:var(--bewegung);
}
/* Keyframe-Animation */
@keyframes animation2 {
    0% {
       	padding: 0rem 1rem;
		transition:var(--bewegung);
    }
    100% {
        padding: 1rem 1rem;
		transition:var(--bewegung);
    }
}
.main-right_left_erfolgreich-gespeichert h5{
	width: 100%;
	color:var(--whiteColor);
	text-align: center;
	font-size:var(--h1);
}

.main-right_left_titel{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;	
}
.main-right_left_titel a{
	position: relative;
	display: flex;
	background-color: var(--cyan);
	padding: 1rem;
}
.main-right_left_titel a p{
	padding: 0.5rem 0rem 0 0rem;
	color:var(--whiteColor);
	border:none;
	animation: animation1 3s ease;	
	transition:var(--bewegung);
}
/* Keyframe-Animation */
@keyframes animation1 {
    0% {
        padding: 0.5rem 8rem 0 4rem;
		transition:var(--bewegung);
    }
    100% {
        padding: 0.5rem 0 0 0;
		transition:var(--bewegung);
    }
}
.main-right_left_titel button{
	padding: 0.5rem 1rem;
	background-color:var(--successColor);
	color:var(--whiteColor);
	border:none;
	display: flex;
	cursor: pointer;
}
.main-right_left_titel button .img_icon_03{
	margin: 0.4rem 0.5rem 0 0.2rem;
}
.main-right_left_titel button:hover{
	padding: 0.5rem 1.2rem;
}
.main_cms_bestellbox{
	position: relative;
	width: 100%;
	background-color:#ddd;
}
.main_cms_table td.img_bearbeiten a{
	color: var(--cyan)!important;
	display: flex;
}
.main_cms_table td.img_loeschen a{
	color: var(--red)!important;
	display: flex;
}
.main_cms_table {
  	font-family: Arial, Helvetica, sans-serif;
  	border-collapse: collapse;
  	width: 100%;
}

.main_cms_table td, .main_cms_table th {
  	border: 1px solid #ddd;
  	padding: 8px;
	color: var(--darkColor);
}
.main_cms_table td button {
  	width: 100%;
	height: 100%;
	display:flex;
	position: relative;
	z-index: 1;
	cursor: pointer;
	color: var(--grayColor);
	background-color:rgba(242,242,242,0.00);
}
.main_cms_table tr:nth-child(even){
	background-color: #f2f2f2;
}
.main_cms_table tr:hover {
	background-color:var(--threeColor);
}
.main_cms_table th {
  	padding-top: 12px;
  	padding-bottom: 12px;
  	text-align: left;
  	background-color: var(--twoColor);
  	color: var(--buttonColor);
}
.td_img_size img{
	max-width: 600px;
	overflow:hidden;
	max-height: 400px;
}
.td_img_size_2 img{
	max-width: 200px;
	overflow:hidden;
	max-height: 200px;
}
.td_img_size_3 img{
	max-width: 600px;
	overflow:hidden;
	max-height: 400px;
}
.td_img_size_4 img{
	max-width: 150px;
	overflow:hidden;
	max-height: 150px;
}





	/* ========== ========== Formular bearbeiten  ========== ========== */

.main_cms_table select {
	transition:var(--bewegung);
	padding:1rem 3rem 1rem 3rem;
	width: auto;
	color:var(--darkColor);
	background-color:var(--hover1Color);
	border-radius: var(--borderRadi4);
}
.main_cms_table input{
	width: 100%;
	padding: 0.5rem;
	color:var(--darkColor)!important;
}
.main_cms_table img{
	width: auto;
	max-height: 300px;
	display: flex;
}
.main_cms_table textarea {
	color:var(--darkColor);
	background-color:var(--hover1Color);
	-webkit-appearance: none!important;
	padding:1rem;
	width: 100%;
	min-height: 200px;
	border:1px solid var(--darkColor);
	border-radius: var(--borderRadi);
	transition:var(--bewegung);
}
.main_cms_table textarea:focus {
  	border: 3px solid #555;
}
/**
.main_cms_table input {
	-webkit-appearance: none!important;
	padding:1rem;
	transition:var(--bewegung);
	color:var(--darkColor);
	background-color:var(--hover1Color);
	border:1px solid var(--darkColor);
	border-radius: var(--borderRadi);
	width:100%;
	max-width: 1000px;
}
.main_cms_table input:hover {
	background-color:var(--button2Color);
	transition:var(--bewegung);
}
.main_cms_table input[type=text] {
	border:none; 
	width:100%;
	max-width: 1000px;
	margin:1rem 0;
	color:var(--darkColor);
	border:1px solid var(--darkColor);
}
.main_cms_table input[type=text]:focus {
  	border: 3px solid var(--darkColor);
}
.main_cms_table input[type=file] {
	border:none;  
	width:100%;
	max-width: 1000px;
	margin:1rem 0;
	cursor: pointer;
	color:var(--darkColor);
	border:1px solid var(--darkColor);
}
.main_cms_table input[type=checkbox] {
	border: 3px solid rgba(255,245,245,0.00); 
	max-width: 20px;
	background-color:var(--buttonColor);
	cursor:pointer;
}
.main_cms_table input[type=checkbox]:hover {
	background-color:var(--darkColor);
	border: 3px solid #555;
}
.main_cms_table input[type=checkbox]:checked {
	background-color:var(--successColor);
	border: 3px solid #555;
}
.main_cms_table input[type='checkbox']:hover input ~ .checkmark {
	background-color: var(--buttonColor);
}
.main_cms_table input[type=submit] {
  	color:var(--darkColor);
	background-color:var(--buttonColor);
	padding:1rem;
	transition:var(--bewegung);
	cursor:pointer;
	min-width: 200px;
}
.main_cms_table input[type=submit]:hover {
  	background-color:var(--hover1Color);
	transition:var(--bewegung);
	color:var(--darkColor);
}
.main_cms_table button[type=submit] {
  	color: var(--threeColor);
	background-color:var(--buttonColor);
	padding:1rem;
	transition:var(--bewegung);
	cursor:pointer;
	border:none;  
	width: 100%;
	max-width: 1000px;
	margin:1rem 0;	
	border-radius: var(--borderRadi);
	border:1px solid var(--darkColor);
}
.main_cms_table button[type=submit]:hover {
	background-color:var(--successColor);		
	color: var(--darkColor);
	transition:var(--bewegung);
}
**/







	/* ========== ========== Login ========== ========== */
.login_box_01{
	position: relative;
	height: 100%;
	min-height: 700px;
	width: 100%;
	background-color:var(--oneColor);
	margin:0 auto;
	padding: 5rem 2rem 2rem 2rem;
	justify-content: center;
	text-align: center;
}
.login_box_01 h1{
	background-color:var(--oneColor);
	padding: 5rem 2rem 2rem 2rem;
}
.login_box_01 form{
	background-color:var(--whiteColor);
	border-radius: var(--borderRadi4);
	width: 300px;
	margin:0 auto;
	padding: 1rem 0.5rem;	
	justify-content: space-around;
	transition: var(--bewegung6);
}
.login_box_01 form:hover{
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	transition: var(--bewegung6);
}

.loginbox_div{
	position: relative;
	display:block;	
}
.formtext{
	text-align: left;
	width:auto;
	margin: auto 0;
}
.login_box_01 input {
	padding:1rem;
	margin:1rem 0rem;
	background-color:var(--buttonColor);
	color: var(--grayColor);
	border:none;
	border-radius: var(--borderRadi4);
	min-width: 270px;
}
.login_box_01 input[type=text]:focus {	
	
}
.login_box_01 input[type=submit] {
	background-color: var(--buttonColor);
    color: var(--threeColor);
    padding: 0.5rem 1.5rem;
    margin: 1rem 0;
    border-radius: var(--borderRadi20);
    transition: var(--bewegung6);
	cursor:pointer;
	border:none;
}
.login_box_01 input[type=submit]:hover {
	background-color: var(--hover1Color);
	color: var(--threeColor);
	transition: var(--bewegung6);
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.loginbox_div_checkmark{
	position: relative;
	display: flex;
	width: auto;
}
.loginbox_div_checkmark input{
	width: 40px;
	min-width: auto;
}
/* ========== ========== Dashboard ========== ========== */




















/* ========== ========== FOOTER ========== ========== */
.flo_copy_div{
	position: relative;
	display:flex;
	justify-content: center;
	align-content: center;
	margin: 1rem auto;
	color: var(--grayColor);
}
.flo_copy_div p{
	color: var(--grayColor);
}
.mobilefoot{
	color: var(--grayColor);
}
.mobilefoot2{
	display:none;
}
.fva_footer_icon_member img{
	position: absolute;
	width: 40px;
	top: -1.5rem;
	right: 2rem;
	transition: var(--bewegung6);
	transform: scale(1) rotate(0deg);
}
.fva_footer_icon_member img:hover{
	transition: var(--bewegung6);
	transform: scale(1.3) rotate(6deg);
}
/* ========== ========== COOKIE DATENSCHUTZ ========== ========== */	
.cookie-banner {
	position: fixed; /*bezogen auf bildschirm fixiert*/
	bottom:-800px;
	left:0;
	right: 0;
	transition:bottom 2s ease-in-out;
	z-index: 400;
}		
.sichtbarr {
	bottom:0;		
}		
      
/* ========== MEDIA SCREEN  1580px ========== */
/* ========== APPLE NOTEBOOK 16und13zoll ========== */
	@media screen and (min-width:1581px) 
	{
body {
	/*background-color:rgba(151,185,231,1.00); ZUM ARBEITEN */
}  

	
}

/* ========== MEDIA SCREEN  1580px ========== */
/* ========== APPLE NOTEBOOK 16und13zoll ========== */
	@media screen and (max-width:1580px) 
	{
body {
	/*background-color:lightcoral; ZUM ARBEITEN */
}
}

/* ========== MEDIA SCREEN  992px ========== */
	@media screen and (max-width:1300px) 
	{		
body {
	/*background-color: rgba(190,124,223,1.00); /*ZUM ARBEITEN*/
}
.mobile_none{
	display: none;
}
.main_cms{
	display: block;
}
.main-left{
	width: 100%;
	min-width: 250px;
}
.main-right{
	width: 100%;
	display:block;
}
.header_top_support{
	flex-wrap: wrap;
}
.header_top_cms{
	display: none;
}	
.main_cms_link_1{
	margin: 0.2rem;
	padding: 0.5rem 0.1rem 0.1rem 0.1rem;
	width: 100px;
	height: 70px;
	background-size: 25px 25px;
}
.main_cms_link_1:hover{
	background-size: 30px 30px;
}
.main_cms_link_2{
	margin: 0.2rem;
	padding: 0.5rem 0.1rem 0.1rem 0.1rem;
	width: 100px;
	height: 70px;
	background-size: 25px 25px;
}
.main_cms_link_2:hover{
	background-size: 30px 30px;
}		
		
}	
	
/* ========== MEDIA SCREEN  768px ========== */
/* ========== APPLE tablet (kleineres) ========== */
	@media screen and (max-width:768px) 
	{	
body {
	/*background-color:rgba(240,206,164,1.00); /*ZUM ARBEITEN */
}

		
		
	}

	
/* ========== MEDIA SCREEN  600px ========== */
	@media screen and (max-width:600px) 
	{
body {
	/*background-color:rgba(195,245,245,1.00); ZUM BEARBEITEN */
}

	

	}