/* define fonts */
@font-face {
    font-family: "Open-Sans-Emoji";
    src:    local("Open Sans Emoji"),
            local("OpenSansEmoji"),
            url(../fonts/OpenSansEmoji.ttf) format("truetype");
}

/* Diese Klassen sind auch in der custom.css*/

/***********************************************************
**********************  nav-icon-big  ********************
************************************************************/

/* Platzhalter */
.placeholder {
    visibility: hidden;
}

/* nur für Profilbild */
.profilepicture{
    overflow:hidden;
}

.nav-icon-big{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width:48px;
    min-height:48px;
    height:48px; /* IE11 */
    margin: 5px 2px 5px 2px;
    border: 1px solid #41464c;
    border-radius:100%;

    display: -webkit-inline-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */

    color:#41464c; /* für hover, damit nur die border hovert und nicht der Text */
}

/* hover - nur wenn a link */
a .nav-icon-big:hover {
    border: 1px solid #8d919a;
    transition: all 0.5s ease 0s;
}

a .nav-icon-big.active{
    text-decoration: none;
    border: 1px solid #aebe45;
    color:#aebe45;
    /*    transition: all 0.5s ease 0s;*/
}


.toolbar-suche{
    background-image: url(d0e183903e43.aebe45.ebizA_V3_sprite.svg);
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    background-position: -175px 0px;

    padding:0px;
    display: inline-block;
    vertical-align: middle;
}

.toolbar-person{
    background-image: url(d0e183903e43.aebe45.ebizA_V3_sprite.svg);
    background-repeat: no-repeat;
    width: 21px;
    height: 25px;
    background-position: -75px -25px;

    padding:0px;
    display: inline-block;
    vertical-align: middle;
}

.toolbar-message{
    background-image: url(d0e183903e43.aebe45.ebizA_V3_sprite.svg);
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    background-position: -625px -25px;

    padding:0px;
    display: inline-block;
    vertical-align: middle;
}

.toolbar-events{
    background-image: url(d0e183903e43.aebe45.ebizA_V3_sprite.svg);
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    background-position: -600px -25px;

    padding:0px;
    display: inline-block;
    vertical-align: middle;
}

.toolbar-logout{
    background-image: url(d0e183903e43.aebe45.ebizA_V3_sprite.svg);
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    background-position: -575px -25px;

    padding:0px;
    display: inline-block;
    vertical-align: middle;
}

.vcard-flex{
    border: 1px solid #b3b7bd;
    float: left;
    margin: 0px 10px 10px 0px;
    padding: 10px 10px 10px 10px;
    min-height: 250px;
    max-width: 360px;
}

.vcard-flex-header{
    border-bottom: 2px solid #aebe45;
    display:table;

    padding: 0px 0px 5px 0px;
}

.vcard-flex-body{
    padding: 10px 0px 10px 0px;
}

/* bis hier sind die Klassen auch in der custum.css*/



/*  ################## LOGIN V3 ##################  */

.form-body {
    height:100%;
}

.form-body .logo-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0px 30px 0px;    
}

/* Logo für login */

/*2025Logoumbau */ 
/*.login-logo-position {
    padding: 0px 0px 0px 0px;
    margin: 40px 0px 0px 50px;    
}


.login-logo-big{
    background-image: url(d0e183903e43.aebe45.RGB_e-bizA_logo.svg);
    background-repeat:no-repeat;
    background-position: left;
    width: 300px;
    height: 75px;
}

.login-logo-big.login-logo-v3{
    background-image: url(d0e183903e43.aebe45.RGB_e-bizA_logo.svg);
    background-repeat:no-repeat;
    background-position: center;
    background-size: auto 50px;
    width: 320px;
    height: 76px;
    padding-left: 10px;
    padding-right: 10px;
}


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

@media screen and (max-width: 620px){
    .logo-position{
        margin: 0px 0px 0px 0px;
    }
    
    .logo{
        background-position: center;
        background-size: auto 40px;
    }
    
    .login-logo-big.login-logo-v3{
        background-size: auto 40px;
        width: 210px;
        height: 55px;
    }
}*/

.form-body > .row {
    margin-left: 0;
    margin-right: 0;
    height: 100%;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.img-holder {
    display: inline-block;
    position: absolute;    
    top: 0;
    left: 0;
    
    width:100%;
    height: 100%;    
    min-height: 100vh;    
    overflow: hidden;

    text-align: center;
}


.form-body .img-holder .bg {
    min-height: 100vh;
    
    background-image: url("d0e183903e43.aebe45.kv_background.jpg");       
/*    background-attachment:  fixed;*/
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;  
    background-repeat: no-repeat;
    background-position: center center;
}


.form-holder {
    width: 100%;
}

.form-body .form-holder .form-content {
    background-color: transparent;
}


.form-content {
    position: relative;
}

.form-holder .form-content {
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    
    padding: 100px 10px 20px 10px;
    min-height: 100%;
    
    opacity: 0.95;
}

/* inhalt */
.form-body .form-content .form-items {
    padding: 20px;
    background-color: #fff;
}
.form-content .form-items {
    max-width: 340px;
    text-align: left;
}

/* ################### ENDE LOGIN ###########################*/

/* 80% = 11px = 1em */
body { 
    height: 99%;
    margin: 0px; 
    padding: 0px; 
    font-family: Verdana,Helvetica,Arial,sans-serif;
    font-size: 70%;
    font-weight: normal;
    color: #41464c;
     -webkit-text-size-adjust: none;
    /*overflow: scroll;	*/
    /* es werden in jedem Falle Scrollbalken platziert, egal ob sie benoetigt werden oder nicht */
    
    -webkit-hyphens: unset;
    -moz-hyphens: unset;
    -ms-hyphens: unset;
    hyphens: unset;
}

.no-hyphenation {    
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}

.hyphenation {    
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* ep = ebiza portal */
#epcontainer {    
    min-height:100%;     
    position:relative;
    background-color: #ffffff;
    padding-bottom: 35px;
    /* new: bei zu breiten Seiten - z.B. mit Tabellen */
/*    min-height:100%;     */
/*    position:absolute;*/
/*    background-color: #ffffff;*/
/*    min-width:calc(100vw);*/
}

#epcontent {
    background-color: #ffffff;
    padding-bottom: 3em;
    z-index: 1;	
}

/* formularbereich umschließt .themenframe und .frame in einem div */
.formularbereich{
    background: #ffffff;
}

div.formularbereich {
    margin-top: 0;
    position: relative;
} 


.frame {
    padding: 10px 15px 10px 15px; 
}




/* #########################################
#################### header ################
###########################################*/
#customerHeader { 
    position: relative;
    z-index: 999;
}
#customerHeader.statistic {
    padding-bottom:60px;
}

.epheader-user {
    float:right;
    padding: 0px 13px 0px 15px;    
}

.epheader-user div {
    float:left;    
}

/*2025Logoumbau */
/*.logo-position{ 
    float:left;
    margin: 0px 0px 0px 15px;
    height: 60px;
    display: flex;
    align-items: center;
}

.logo{
    background-image: url(d0e183903e43.aebe45.RGB_e-bizA_logo.svg);
    background-repeat:no-repeat; 
    background-size: 83px 50px;       
    width:83px;
    height: 50px;        
}*/

.logo.logo-errorpage {
    background-position: center;
}


/* ################################################
############### profilelinks header ###############
##################################################*/

/* css wie .container-nav-icon in der custom.css nur mit justify-content: end */
.epheader-profile { 
    display: flex;
    display: -webkit-flex; /* Safari */
    display: -moz-flex;
    display: -ms-flexbox;/* IE10*/
    
    flex-wrap: wrap;
    
    justify-content: flex-end;  /* alle browser ok */     
    
    margin: 10px 15px 10px 0px;
}


/* ########################################################################
##################  button zum auf- und zuklappen im content V2 !!!!!! #### 
###########################################################################*/
.ico-nav-toggle {
    background-image: url(d0e183903e43.aebe45.ebizA_V3_sprite.svg); /* grau */
    background-repeat: no-repeat;
    width: 22px;
    height: 18px;
    background-position: -0px -1000px;

    padding:0px;
    display: inline-block;
    vertical-align: middle;
    
}

.nav-toogle:hover {
    background-image: url(d0e183903e43.aebe45.ebizA_V3_sprite.svg); /* Hausfarbe */
    background-repeat: no-repeat;
    width: 22px;
    height: 18px;
    background-position: -25px -1000px;

    padding:0px;
    display: inline-block;
    vertical-align: middle;        
}


/* ################## nav-toogle - button zum auf- und zuklappen - funktion ist ein button ################## */
.nav-toogle {
    background-color: transparent;
    border: 0px solid transparent;   
    cursor: pointer;  
    
    /* runde ecken entfernen */
    border-radius: 0px;
    -webkit-border-radius:0; 
    -moz-border-radius: 0;
}



/* ############################################# 
################# layer-close   ################
###############################################*/
.layer-close{ 
    margin: 15px 15px 15px 15px; 
    float:right;
    
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/* für footer weiss */
.ico-layer-close-footer{ 
    background-image:url(d0e183903e43.aebe45.ebizA_V3_sprite.svg);
    background-repeat:no-repeat;
    width:20px;
    height:20px;
    background-position: 0px -500px;
    
    padding:0px;
    display: inline-block; 
    vertical-align: middle;
}


/* Kreuz black */
.ico-layer-close{
    background-image:url(d0e183903e43.aebe45.ebizA_V3_sprite.svg);
    background-repeat:no-repeat;
    width:20px;
    height:20px;
    background-position: -20px -500px;
    
    padding:0px;
    display: inline-block; 
    vertical-align: middle;
}



/* ############################################# 
######## page-overlay - wenn popup aufgeht #####
###############################################*/
.page-overlay {
/*    background-color: rgba(115, 123, 130, 0.85);*/
    background-color: hsla(0, 0%, 100%, 0.9);
    bottom: 0;

    position: fixed;
    right:0;
    left:0;
    width: 100%;
    height: 100%; 
    
    z-index: 999;
    display: none;  
    
    transition: all 200ms linear 0s;
}


/* ####################################################################################################################### 
############ layer-search.popup / .layer-myaccount.popup / .layer-message.popup / .layer-events.popup  / ..... ############
########################################################################################################################## */

/* .layer-search.popup, .layer-myaccount.popup, .layer-message.popup, .layer-events.popup, .layer-senden-an.popup,
   .layer-upload.popup, .layer-personal-presence.popup, .layer-ablehnen.popup, .layer-freigeben.popup */
.popup {
    width:100%;
    position: absolute;
    z-index: 999;
    background-color: #ffffff; 
    border-bottom:1px solid #9ea2ac;
    padding: 0px 0px 0px 0px;    
}

/* ############################################# 
################# layer .popup  #################
###############################################*/

.popup .layer-title{
    box-sizing: border-box;
    width:100%;
    height: 48px;/* höhe wie mainmenu*/
/*    padding: 15px 15px 15px 15px;*/
    
    font-size: 1.3em;
/*    color: #fff;  */
    
    background-color: #9ea2ac;
    display: block;         
}


.popup .layer-title > span:nth-child(1) {
     margin: 15px 15px 15px 15px;
     float: left;
}


.popup .layer-container-columns{
    display: flex;
    display: -webkit-flex; /* Safari */
    display: -moz-flex;
    display: -ms-flexbox;/* IE*/

    flex-wrap: wrap;

    /*    justify-content: space-between;
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        -ms-justify-content: space-between;*/

    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-flex-pack: flex-start; 

    width:100%;
}

.start{   
    justify-content: flex-start !important;
    /*    -webkit-justify-content: flex-start !important;
        -moz-justify-content: flex-start !important;
        -ms-flex-pack: flex-start !important;    */
}

.end{   
    justify-content: flex-end !important;
    /*    -webkit-justify-content: flex-end !important;
        -moz-justify-content: flex-end !important;
        -ms-flex-pack: flex-end !important;   */   
}

.center{   
    justify-content: center !important;
    /*    -webkit-justify-content: center !important;
        -moz-justify-content: center !important;
        -ms-flex-pack: center !important;   */   
}

.space-between{   
    justify-content: space-between;
    /*    -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        -ms-justify-content: space-between;*/
}

.popup .layer-content{
    padding: 15px 15px 15px 15px;
    display: block;
    width: calc(33.33% - 30px);
}
.popup .layer-content.wide{
    width: calc(50% - 30px);
}

/* für zwei zusammenhängende .layer-content // davor ist .container-nav-linklist mit 20% */
.popup .container-layer-content{
    width: 80%;
}


/****** Inhalt -- layer-search.popup ******/
.a-search-input {
    border-bottom: 2px solid #9ea2ac;    
}

.search-action {
    border: medium none; 
    background-color: transparent;
    font-size: 1.7em;    
    height: 36px; 
    color: #41464c;
    width: 100%;
}

/* input[type="txt"] */
.search-action:focus{ 
    background-color: transparent; 
    outline: medium none;
}


/*********** Inhalt layer-myaccoount*************/

/* MENÜ IM LAYER - wie layer-content - Verwendung nur innerhalb von einem popup!! */
.container-nav-linklist {
    padding: 5px 15px 30px 15px;
    font-size: 1.1em;
    display: block;
    box-sizing: border-box;
    width:calc(20% - 30px);
}

/* vcard-flex im layer*/
.layer-vcard-flex {    
    border: none;   
    float: left;
    margin: 0;
    padding: 0px;
    min-height: 220px;
    min-width: unset;
    max-width: 320px;
}



/* Name nicht änderbar */
.fixed-values {
    color: #aebe45;
    font-size: 1.3em;
}


/* INHALT layer-message.popup */



/* INHALT layer-termine.popup */



/* #########################################
################## main-nav ################
###########################################*/

#epheader3.stuck {
    position:fixed;
    top:0;
    z-index:999;
/*    width:98.5%;*/
/*    width:100%;*/
    width:calc(100%);
}

#epheader3 {
    height:48px;
    background-color:#2c2e3a;
    padding:0px 15px 0px 15px; 
    margin: 0px;
}

#epheader3-responsive {
    display: none;    
}

.mainnav-container-left {
    border-left: 1px solid #41464c;  
}


/* responsive header wird ausgeblendet !!!!!!!!! responsive_menu.js  */
/*#epheader3-responsive{
    margin:0;   
}*/



/* ##########################################
##############   button mainnav  ############
#############################################*/
#notification-badge div.badge{
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 1000;
    pointer-events: none;

    font-size: 0.8em;
    font-weight: normal;

    margin-bottom: 0px;
    padding: 0;
    
    border-radius: 100%;   
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;    
}




.button-group3 { 
    position: relative; /* für #notification-badge */
    float:left;    
    display: inline-block;
    height:48px;
    line-height: 48px;
    border-right: 1px solid #41464c;
    background-color:#2c2e3a;
    text-decoration: none;
    text-align: center;
}

.button-group3 a{ 
    color:#ffffff !important;
}

.button-group3 :hover {   
    background-color: #41464c; 
    color:#ffffff !important;
    text-decoration: none;
    transition: all 0.5s;/* tempo des farbwechsels */  
}

.button-group3.active {   
    background-color: #aebe45;
}

.button-group3.active :hover {   
    background-color: #aebe45;
}


.nav-button3{ 
    display: inline-block;
    
    -moz-box-orient: vertical;
    padding-right: 15px;
    padding-left: 15px;
    
    font-family: Verdana,Helvetica,Arial,sans-serif; /* IE9 nimmt nicht die Schrift vom body */
    font-size: 1.1em;
    color: #ffffff;
    
    cursor: pointer;

    height:100%;
    float:left;
    transition: all 0.5s; /* tempo des farbwechsels */
}


/* ################################################################
##############   icon auf Hauptnavigation ---  weiss  #############
###################################################################*/

.nav-arbeitsplatz, .nav-arbeitsplatz-responsive{
    background-image: url(d0e183903e43.aebe45.ebizA_V3_sprite.svg);
    background-repeat: no-repeat;
    width: 21px;
    height: 16px;
    background-position: 0px -550px;

    padding:0px;
    display: inline-block;
    vertical-align: middle;  
}

.nav-kommunikation{
    background-image: url(d0e183903e43.aebe45.ebizA_V3_sprite.svg);
    background-repeat: no-repeat;
    width: 19px;
    height: 16px;
    background-position: -25px -550px;

    padding:0px;
    display: inline-block;
    vertical-align: middle;  
}


.nav-group{
    background-image: url(d0e183903e43.aebe45.ebizA_V3_sprite.svg);
    background-repeat: no-repeat;
    width: 19px;
    height: 16px;
    background-position: -50px -550px;

    padding:0px;
    display: inline-block;
    vertical-align: middle;  
}

.nav-person{
    background-image: url(d0e183903e43.aebe45.ebizA_V3_sprite.svg);
    background-repeat: no-repeat;
    width: 15px;
    height: 16px;
    background-position: -125px -550px;

    padding:0px;
    display: inline-block;
    vertical-align: middle;  
}


/* ######################################################### 
############ MAINMENÜ -- dropdown-menue - layer ############
###########################################################*/

.layer.navig {
    font-size: 1.1em;
    display: none;
    box-sizing: border-box;
    position: absolute;
    z-index: 1021;
}

/* ######################################################### 
#############  MAINMENÜ Listennavigation - layer ############
######################################################### */
/* Listennavigation */
ol.layer-listnav {
    width: 100%;
    padding: 0px;
    margin: 0px;
}

ol.layer-listnav li {
    list-style-type: none;
    margin: 0px;
/*    padding: 10px;*/
    padding: 0px 10px 0px 10px;
    
    height:34px;
    line-height:34px;
    
    border-bottom: 1px solid #fff;   
}

.layer-list-item {
    background-color: #2c2e3a;
    color: #ffffff;
}

.layer-list-item > a {
    color: #ffffff !important;
    text-decoration: none;
    display: block;
}

.layer-list-item:hover {
    background-color: #41464c;
    color: #ffffff !important;
}

/* ############################################# 
#####################  footer ##################
############################################### */
#epfooter {
    position:fixed;
    bottom: 0px;		
    width: 100%;
    z-index: 999;
    background-color: #ffffff;
    border-top:1px solid #8d919a;
}

/* ############################################################### 
############## button FOOTER zum auf- und zuklappen ############## 
################################################################## */
.ico-nav-toggle-footer {
    background-image: url(d0e183903e43.aebe45.ebizA_V3_sprite.svg); 
    background-repeat: no-repeat;
    background-position: -75px -1000px;  
    width: 18px;
    height: 4px;

    padding:0px;
    display: inline-block;
    vertical-align: middle;      
}

.btn-footer {
    background-color: transparent;
    border: 0 solid transparent !important;    
    cursor: pointer;
    float: right; 
    padding:0px;
    margin: 10px 15px 10px 10px;
}

.btn-footer:hover span {
    background-image: url(d0e183903e43.aebe45.ebizA_V3_sprite.svg);
    background-repeat: no-repeat; 
    background-position: -100px -1000px;
    width: 18px;
    height: 4px;
    
    padding:0px;
    display: inline-block;
    vertical-align: middle;
}

/* ################## legalinfo im footer ################## */

.legalinfo {
    color: #8d919a;   
    padding: 8px 5px 5px 5px;
    text-align: center;
    width:80%;
    margin:0 auto;
}

.legalinfo a {
    color: #8d919a; 
    text-decoration:none;
}

.legalinfo a:hover{
    text-decoration: underline; 
}

/* ############################################# 
#############  layer-footer.popup ##############
###############################################*/
.layer-footer-popup{   
    width: 100%;   
    position: fixed; 
    z-index: 1050;
    background-color: #2c2e3a;
    bottom: 0;
    height: auto;
    display:block;
    max-height: 100vh;
    overflow: auto;
}

.layer-footer-content{ 
    padding: 48px 15px 10px 15px; 
    border-top:1px solid #fff;
    font-size: 1.1em;
}

/* INHALT layer-footer.popup */
.container-footer{     
    margin-left: auto;
    margin-right: auto;
    width: 66.6667%;
}

.column-footer {
    float:left;
    margin: 0 5% 0 0;
    color:#ffffff;
}

.footer {
    color:#ffffff !important;    
}


.headline-footer {
    color:#ffffff;
    margin-bottom: 5px;
}

/* fon und mail*/
a.footer {
    color:#ffffff;
}

a:visited.footer {
    color:#ffffff;
}

a:hover.footer {
    color: #ffffff;
}


ol.linklist-footer li a::before {
    content: " ";
    background-image: url("d0e183903e43.aebe45.ebizA_V3_sprite.svg");
    background-position: -20px -470px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 20px;
    width: 10px;
    padding: 0;
    vertical-align: middle;  
    /* wird in ".linklist li" wieder aufgehoben */
    position: absolute;
    left: 0em;
    top: 0.5em; 
}

ol.linklist-footer li a{ 
    position: relative; 
    padding: 8px 2px 8px 15px;
    display:block;    
    color: #ffffff;
}

ol.linklist-footer li a:hover{     
    color: #ffffff;
}

.vcard-flex.footer {
    border: none !important;
    float: left;
    margin:10px 0px 0px 0px; 
    padding: 0;
    min-height: auto !important;  
}

.vcard-flex.footer > .vcard-flex-header{
     border-bottom: 1px solid #ffffff;
}

.vcard-flex.footer div > .vcard-flex-title{
     font-weight: normal !important;
     color:#ffffff;
}

.vcard-flex.footer div > ol li label{
     font-weight: normal !important;
     color:#ffffff;
}

.vcard-flex.footer div > .nav-icon-big{
     border: 1px solid transparent;   
}

.vcard-flex.footer div > .profilepicture{
     background-color: #ffffff;
}


/*.vcard-flex-header.footer {
    border-bottom: 1px solid #ffffff;
}

.vcard-flex-header.footer span.nav-icon-big{
    border: 1px solid transparent;        
}


.vcard-flex-title.footer {   
    font-weight: normal;
}

ol.form li > label.footer{
    color:#ffffff;
    font-weight:normal;
}*/