@font-face { 
    font-family: 'MarkPro'; 
    src: url('../fonts/MarkProNormal.otf') format('opentype'); 
    font-weight: normal; 
    font-style: normal; 
 } 

@font-face { 
    font-family: 'MarkPro'; 
    src: url('../fonts/MarkProBold.otf') format('opentype'); 
    font-weight: 600; 
    font-style: normal; 
 } 

@font-face { 
    font-family: 'MarkPro'; 
    src: url('../fonts/MarkPro500.otf') format('opentype'); 
    font-weight: 500; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'MarkPro'; 
    src: url('../fonts/MarkPro300.otf') format('opentype'); 
    font-weight: 300; 
    font-style: normal; 
} 


/*Scrollbar*/
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #ec874f #fff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 10px;
  }

  *::-webkit-scrollbar-track {
    background: #c4c4c4;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #ec874f;
    border-radius: 10px;
    border: 3px solid #ffffff;
  }


button:disabled,
button[disabled]{
    background-color: #c4c4c4!important;
}

/*Helper class*/
.d-non{
    display: none;
}
 

 body{
    font-family: "MarkPro";
    /*overflow: hidden;*/
 }

 .text-left{
    text-align: left;
 }



/*General styles*/
.std-input{
    width: 100%;
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px solid black;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.std-input:focus{
    border: 2px solid #ec874f;
    outline: none!important;
}

.std-input.donotShow{
    opacity: 0;
    height: 0px;
}

.headline{
    font-size: 35px;
    font-family: "MarkPro";
    font-weight: 500;
}

.smallHeadline{
    font-size: 25px;
    font-weight: 400;
}

.smallBoldHeadline{
    font-size: 20px;
    font-weight: 600;
}
.text-center{text-align: center;}


.highlightLabel{
    background-color: white;
    border: 2px solid #ec874f;
    color: #ec874f;
    padding: 9px 30px;
    font-size: 17px;
    border-radius: 15px;
    font-weight: 600;
    filter: drop-shadow(4px 11px 15.5px rgba(0,0,0,0.16 ));
}

.highlightLabel.blue{
    border: 2px solid #8f7fff;
    color: #8f7fff;
}


.w-100{width: 100%;}
.std-btn{
    padding: 10px 20px;
    border-radius: 20px;
    background-color: black;
    color: white;
    border: 2px solid black;
    margin-top: 5px;
    cursor: pointer;
}

.sec-btn{
    padding: 10px 20px;
    border-radius: 20px;
    background-color: white;
    color: black;
    border: 1px solid black;
    margin-top: 5px;
    cursor: pointer;
    filter: drop-shadow(4px 11px 15.5px rgba(0,0,0,0.16 ));
}

.white-btn{
    padding: 10px 20px;
    border-radius: 15px;
    filter: drop-shadow(4px 11px 15.5px rgba(0,0,0,0.16 ));
    cursor: pointer;
    color: black;
    border: 2px solid white;
    background-color: white;
    transition: all 0.5s ease;
    webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}

.white-btn:hover{
    border-color: #ec874f;
    transform: translateY(-3px);
    color: #ec874f;
}

body{
    padding: 0px;
    margin: 0px;
}



header{
    display: inline-block;
  width: 100vw;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 45;
  transition: all 1s ease;
  -webkit-transition: all 1s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 1s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 1s ease; 

    background: transparent;
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%);
}


header{
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%);
}

header.small{
    width: 75vw;
    background: transparent;
}

header .logo{
    margin-left: 75px;
    margin-top: 75px;
    display: inline-block;
}


header .logo svg{
    display: block;
}


header .logo{
    opacity: 1;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}

header .logo.hideit{
    opacity: 0;
}

body.loadingOpen .logo svg path{
    fill: black;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 

}

body.loadingOpen .logo svg path{
    fill: white;
}

header .rightHeaderSection{
    display: inline-block;
    float: right;
    width: 20vw;
    margin: 85px 75px;
    position: relative;
}

.headerSlideSection{
    display: inline-block;
    width: 150px;
    position: absolute;
    top: 40px;
    right: 0px;
    display: none;
}
/*

header .rightHeaderSection .gotoPassword,
header .rightHeaderSection .logoutButton{
    position: absolute;
    right: 0px;
    top: 30px;
    display: none;
}
*/
header .rightHeaderSection .gotoPassword
{
    margin-top: 10px;   
}

header .rightHeaderSection .name{
    display: inline-block;
    float: right;
    cursor: pointer;
}

header .rightHeaderSection .backArrow{
    display: inline-block;
    float: left;

    transform: translateY(-100%);
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
    cursor: pointer;
    opacity: 0;
}

header .rightHeaderSection .backArrow.show{
    transform: translateY(0%);
    opacity: 1;
}


main{
    height: 100vh;
    width: 100vw;
    position: relative;
    left: 0px;
    top: 0px;
    overflow: hidden;
    overflow-x: hidden;
}

main.scroll{
    overflow-y: scroll;
}

#login{
    width: 100vw;
    display: block;
    height: 100vh;
    position: relative;
}
#login .overLoginForm{
    display: inline-block;
    float: left;
    width: 20%;
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

#login .loginLogo{
    text-align: center;
    margin-bottom: 50px;
}

#login .loginLogo img{
    width: 50px;
}

#login .overLoginForm .loginHeadline{
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
    font-size: 31px;
    padding: 0px 20px;

    font-family: 'MarkPro';
}

#login .overLoginForm .error{
    display: inline-block;
    width: 100%;
    margin-top: 20px;
    font-size: 20px;
    padding: 0px 20px;
    text-align: center;
    display: none;

    font-family: 'MarkPro';
}
#login .overLoginForm .error span{
    font-weight: 600;
    font-family: 'MarkPro';

}


#overlayBackground{
    width: 100vw;
  height: 100vh;
  background: black;
  position: fixed;
  top: 0px;
  left: 0px;
  opacity: 0.3;
  z-index: 3;

  transform: translateY(-100%);

  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
  -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
  -o-transition: all 0.5s ease; 
}

body.overlayBackgroundOpen #overlayBackground{
    transform: translateY(0);
}


#loading_overlay{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    width: 0vw;
    height: 0vh;
    opacity: 0;
    left: 50vw;
    top: 50vh;
    z-index: 98;


    /* for smooth operator */
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 

}
body.loadingOpen #loading_overlay{
    left: 0vw;
    top: 0vh;
    width: 100vw;
    height: 100vh;
    opacity: 1;
}

#loading_overlay div.icon{
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translateX(-50%) translateY(-50%);

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}


section#resetpassword .headline{
    margin-bottom: 35px;
}

section#resetpassword,
section#home{
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translateY(-50%) translateX(-50%);
}

#home .container {
    text-align: center;
    display: flex;
}

#home .over_box{
    display: inline-block;
    float: left;
    margin: 0px 70px;
}

#home .over_box .box_head{
    text-align: left;
    font-size: 31px;
    margin-bottom: 41px;
    font-weight: 500;
}


#home .container .box {
    width: 150px;
    height: 150px;
    margin: 10px;
    
    position: relative;
    cursor: pointer;
    
    border-color: #ffffff;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;

    filter: drop-shadow(4px 11px 15.5px rgba(0,0,0,0.16 ));

    background: #ffffff;
    
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}


#home .container .box:hover{
    border-color: #ec874f;
    border-style: solid;
    transform: translateY(-5px);
}

#home .container .box svg{
    position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}

#home .container .box:hover svg path{
    stroke: #ec874f;
}



#calendar{
    margin-top: 150px;
}

#calendar .mobildSwitch,
#calendar .dayCalendar{
    display: none;
}



#calendar .slick-dots{
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0px;
}


#calendar .slick-dots li    {
    display: inline-block;
    margin: 0px 5px;
    width: 5px;
    height: 5px;
    background-color:#c4c4c4;
    opacity: 0.1;
    content: ' ';
    border-radius: 50%;
}


#calendar .slick-dots li button{
    display: none;
}


#calendar .slick-dots li.slick-active{
    opacity: 1;
}


.calendarButton{
    position: absolute;
    width: 20%;
    left: 50%;
    transform: translateX(-50%);
    top: 180px;
    z-index: 44;
}


.calendarButton .prev{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-top: 2px solid #C4C4C4;
    border-right: 2px solid #C4C4C4;
    transform: rotate(-130deg);
    cursor: pointer;
}


.calendarButton .next{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-top: 2px solid #C4C4C4;
    border-right: 2px solid #C4C4C4;
    transform: rotate(45deg);
    cursor: pointer;
    float: right;
}




#calendar .overshowHideOtherPerson{
    display: block;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

#calendar .overshowHideOtherPerson .showHideOtherPerson{
    display: inline-block;
    float: right;
    height: 30px;
    width: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}

#calendar .overshowHideOtherPerson .showHideOtherPerson svg{
    margin-top: 3px;
}
#calendar .overshowHideOtherPerson .showHideOtherPerson svg path{
    fill: #000000;
    stroke: #000000;
}

#calendar .overshowHideOtherPerson .showHideOtherPerson.active svg path{
    fill: #ffffff;
    stroke: #ffffff;
}

#calendar .overshowHideOtherPerson .showHideOtherPerson.active{
    color: white;
    background-color: #ec874f;
    border-color: #ec874f;
}

#calendar .overshowHideOtherPerson .showHideOtherPerson:hover{
    background-color: white;
}
#calendar .overshowHideOtherPerson .showHideOtherPerson:hover svg path{
    fill: #ec874f;
    stroke: #ec874f;
}


#calendar .headline_week{
    text-align: center;
    font-size: 30px;
    margin-bottom: 70px;
}

#calendar .overContentCalendar .slick-arrow{
    top: 0px;
    position: absolute;
    z-index: 100;


    content: ' ';
    color: transparent;
    background: transparent;
    border: none;
}




#calendar .overContentCalendar .slick-arrow.slick-prev{
    left: 38%;
}

#calendar .overContentCalendar .slick-arrow.slick-prev:after{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-top: 2px solid #C4C4C4;
    border-right: 2px solid #C4C4C4;
    transform: rotate(-130deg);
    cursor: pointer;
}


#calendar .overContentCalendar .slick-arrow.slick-next{
    right: 38%;
}

#calendar .overContentCalendar .slick-arrow.slick-next:after{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-top: 2px solid #C4C4C4;
    border-right: 2px solid #C4C4C4;
    transform: rotate(45deg);
    cursor: pointer;
}




#calendar .headline_week .weeknumber{
    display: inline-block;
    font-size: 31px;
    color: #C4C4C4;
}

#calendar .content_calendar,
#calendar .headline_calendar{
    display: inline-block;
    width: 90vw;
}


#calendar .content_calendar{
    border-bottom: 1px solid  #e3e3e3;
}

main.editEnable #calendar .content_calendar  .calendarEntry.addEntry:hover,
main.editEnable #calendar .content_calendar  .calendarEntry.deleteEntry:hover{
    -webkit-box-shadow: inset -1px -74px 48px -47px rgba(236,135,79,1);
    -moz-box-shadow: inset -1px -74px 48px -47px rgba(236,135,79,1);
    box-shadow: inset -1px -74px 48px -47px rgba(236,135,79,1);
}

#calendar .content_calendar .calendarEntry,
#calendar .headline_calendar .headlineEntry{
    flex: 1;
    display: inline-block;
    /*float: center;
    width: 8%;*/
    text-align: center;



    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}
.headlineEntry,
.TopLegendEntry,
.calendarEntry{
    flex: 0 0 10.7%!important;
    max-width: 10.7%!important;
}

.headlineEntry.first,
.TopLegendEntry.firstdummyLegend,
.calendarEntry.userEntry{
    max-width: 25%!important;
    flex: 0 0 25%!important;
}

.headlineEntry.weekend,
.TopLegendEntry.weekend,
.calendarEntry.weekend{
    background-color: rgba(196,196,196,0.15);
}
.headlineEntry.weekend{
    background-color: white;
}
.TopLegendEntry.weekend{
    color: transparent!important;
    background-color: transparent;
}


.headlineEntry.today{
    position: relative;
}

.headlineEntry.today:after{
    position: absolute;
    content: ' ';
    width: 0px;
    height: 0px;
    top: 0px;
    right: 0px;
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #c4c4c4;
    transition: rotate(90deg);
    transform: rotate(-45deg) translateY(-100%);
}


#calendar .headline_calendar .headlineEntry .day{
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 500;
}

#calendar .headline_calendar .headlineEntry .date{
    margin-bottom: 15px;
    font-size: 15px;
}
#calendar .headline_calendar .headlineEntry{
    border-bottom: 0.2px solid #707070;
    text-align: center;
}

#calendar .headline_calendar .headlineEntry.pastDate{
    color: #C4C4C4!important;
}


#calendar .TopLegend{
    display: flex;
    width: 90vw;
    margin-top: 25px;
    padding-bottom: 25px;
}

#calendar .TopLegend .TopLegendEntry{
    float: left;
    width: 8%;
    flex: 1;
    text-align: center;
    color: #707070;

}
#calendar .TopLegend .TopLegendEntry.firstdummyLegend{
    flex: 0 0 25%;
    color: transparent;
}

#calendar .TopLegend .TopLegendEntry div{
    display: inline-block;
    float: left;
    width: 50%;
}


#calendar .content_calendar .calendarEntry.userEntry .line{
    margin-bottom: 15px;
}

#calendar .content_calendar .calendarEntry.userEntry .usernameLine{
    display: inline-block!important;
    float: left!important;
}

#calendar .content_calendar .calendarEntry.userEntry .line{
    display: inline-block;
    float: right;
    text-align: right;
}

#calendar .content_calendar .calendarEntry.userEntry .border{
    content: ' ';
    height: 110%;
    width: 1px;
    background: #000000;
    position: absolute;
    top: 0px;
    left: 25%;
}

#calendar .content_calendar .calendarEntry.userEntry .line.time,
#calendar .content_calendar .calendarEntry.userEntry .line.Block2{
    width: 100%;
}
#calendar .content_calendar .calendarEntry{
    flex: 1;
}

#calendar .content_calendar .calendarEntry.userEntry,
#calendar .headline_calendar .headlineEntry.first{
    flex: 0 0 25%;
    border-bottom: transparent!important;
}

#calendar .headline_calendar .headlineEntry.first{
    font-size: 35px;
    text-align: left;
}

#calendar .headline_calendar .headlineRow{
    width: 100%;
    display: flex;
}
#calendar .content_calendar .calenderContentRow{
    display: flex;
    width: 90vw;
    border-top-color: #e3e3e3;
    border-width: 1px;
    border-top-style: solid;
    position: relative;
}

#calendar .mobileHeadline{display: none;}

.overContentCalendar{
    width: 80vw;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 25px;
    width: calc(100vw - 150px);
}


#addDayEntry .workLine,
#calendar .dayCalendar .line.workLine,
#calendar .calendarEntry .line.workLine{
   border: 1px solid #EC874F;
   text-align: center;
   background-color: rgba(236,135,79, 0.2);
   border-radius: 20px;
   color: #EC874F;
   position: relative;

   transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
   -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
   -o-transition: all 0.5s ease; 
}


#addDayEntry .workLine.detailed,
#calendar .dayCalendar .line.workLine.detailed,
#calendar .calendarEntry .line.workLine.detailed{
    margin-bottom: 90px!important;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

#addDayEntry .workLine.detailed .number,
#calendar .line.workLine.detailed .number{
    border-bottom-right-radius: 0px!important;
}

#addDayEntry .workLine .perHoure,
#calendar .calendarEntry .line.workLine .perHoure,
#calendar .dayCalendar .line.workLine .perHoure{
    position: absolute;
    width: 50%;
    background-color: white;
    padding: 5px 0px;
    left: -1px;
    top: 100%;
    border-bottom: 1px solid ;
    border-left: 1px solid ;
    line-height: 1;
    height: 30px;
    z-index: 99;
    border-top: 1px solid;
}


#addDayEntry .workLine .perHoure .unit,
#calendar .calendarEntry .line.workLine .perHoure .unit,
#calendar .dayCalendar .line.workLine .perHoure .unit{
    font-size: 12px;
}


#addDayEntry .workLine .perHoure.second,
#calendar .calendarEntry .line.workLine .perHoure.second,
#calendar .dayCalendar .line.workLine .perHoure.second {
    left: auto;
    right: -1px;
    border-right: 1px solid;
    border-left: 0px solid;
}
#addDayEntry .workLine .perHoure.fird,
#calendar .calendarEntry .line.workLine .perHoure.fird,
#calendar .dayCalendar .line.workLine .perHoure.fird {
    top: calc(100% + 41px);
    width: 100%;
    border-right: 1px solid;
    border-bottom-right-radius: 20px;
    border-left: 1px solid;
    border-bottom-left-radius: 20px;
}

#addDayEntry .restzeit{
    color: #ec874f;
}


#addDayEntry .restzeit.negative{
    color: #8f7fff;
}

@media (max-width: 1090px) {
    #calendar .calendarEntry .line.workLine .perHoure,
    #calendar .dayCalendar .line.workLine .perHoure{
        width: 100%!important;
        border: 1px solid;
    } 
    #calendar .calendarEntry .line.workLine .perHoure.second,
    #calendar .dayCalendar .line.workLine .perHoure.second{
        top: calc(100% + 41px);
        border: 1px solid;
    }

    #calendar .calendarEntry .line.workLine .perHoure.fird,
    #calendar .dayCalendar .line.workLine .perHoure.fird {
        top: calc(100% + 82px);
    }

    #calendar .calendarEntry .line.workLine .perHoure .unit,
    #calendar .dayCalendar .line.workLine .perHoure .unit{
        font-size: 6px;
        font-weight: bold;
    }

    #calendar .dayCalendar .line.workLine.detailed,
    #calendar .calendarEntry .line.workLine.detailed{
        margin-bottom: 130px!important;
    }
}


#calendar .dayCalendar .line.workLine.special,
#calendar .calendarEntry .line.workLine.special{
    border-color: #8f7fff;
    color: #8f7fff;
    background-color: rgba(143,127,255,0.2);
}

#calendar .calendarEntry.pastDates .line.special,
#calendar .calendarEntry.pastDates .line.workLine{
    border-color: #C4C4C4;
    color: #C4C4C4;
    background-color: rgba(196, 198, 196, 0.2);
}

#calendar .dayCalendar .line.workLine .number,
#calendar .calendarEntry .line.workLine .number{
    background-color: white;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-left: 1px solid #EC874F;
}

#calendar .calendarEntry.pastDates .line.workLine .number{
    border-color: #C4C4C4;
}

#calendar .dayCalendar .line .step,
#calendar .calendarEntry .line .step{
    display: inline-block;
    flex: 1;
    padding: 5px;
}

#calendar .dayCalendar .line .number,
#calendar .calendarEntry .line .number{
    display: inline-block;
    padding: 5px;
    flex:1;
}

#calendar .dayCalendar .line,
#calendar .calendarEntry .line{
    /*margin: 5px!important;*/
    display: flex;
    justify-content: center;
    margin-top: 8px;
    margin-left: 15px;
    margin-right: 15px;
}

#calendar .calendarEntry .line:first-child{
    margin-top: 15px;
}


#calendar .calendarEntry .line:last-child{
    margin-bottom: 15px;
}


#calendar .calendarEntry .line.none{
    color: transparent;
}

.absolutNumbers{
    border-top: 1px solid #e3e3e3;
    padding-top: 50px;
}

.absolutNumbers .table{
    display: inline-block;
    width: 75%;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 25%;
}
.absolutNumbers .table .over{
    border: 1px solid #EC874F;
  text-align: center;
  background-color: rgba(236,135,79, 0.2);
  border-radius: 20px;
  color: #EC874F;

  display: inline-block;
  float: left;
  width: 10vw;
  position: relative;

  height: 30px;
  margin: 10px 10px;
}

.absolutNumbers .table .over .innerLeft{
    
}


.absolutNumbers .table .over .innerRight{
    background-color: white;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-left: 1px solid #EC874F;
    left: 49%;

}

.absolutNumbers .table .over div{
    position: absolute;
    width: 50%;
    height: 100%;
    line-height: 30px;
}




#finder .openCloseAside{
    display: none;
}



#finder .loadingAnimation{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 75vw;
    z-index: 9;
}
#finder .loadingAnimation svg{
    margin-top: 50%;
    margin-left: 50%;
    animation: pulseRotate 2s linear infinite;
}





@keyframes pulseRotate {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.8) rotate(180deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}

#finder aside .searchInput{
    left: 75vw;
    width: 25vw;
    position: fixed;
    bottom: 0px;
    max-width: 30vw;
    z-index: 99;

    background-color: #F5F5F5;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 

    -webkit-box-shadow: 0px -13px 20px -11px rgba(0,0,0,0.55); 
    box-shadow: 0px -13px 20px -11px rgba(0,0,0,0.55);
}



#finder aside .searchInput input{
    background-color: transparent;
    border: none;
    border-bottom: 1px solid black;
    margin-bottom: 20px;
    margin-top: 20px;
    color: black;
    border-radius: 0px;

    width: calc(100% - 200px);
    margin-left: 90px;
}

#finder aside .searchInput input{
    padding: 15px 25px;
    border-width: 1px;
    padding-left: 8px;
    padding-bottom: 8px;
}

#finder aside .searchInput input::placeholder {
    color: black;
    font-weight: 500;
    font-family: "MarkPro";
}

#finder aside .searchInput .searchIcon{
    position: absolute;
    right: 0px;
    border-top-right-radius: 35px;
    bottom: 20px;
    right: 14px;
    cursor: pointer;
    margin-right: 95px;
}

#finder aside .searchInput .searchIcon img{
    height: 28px;
}



#finder #imageSection{
    display: inline-block;
    width: 75vw;
    left: 0px;
    float: left;
    height: 100vh;
    position: relative;

    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 43%, rgba(196,196,196,1) 100%);
}

#finder #imageSection svg{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
}

#finder #imageSection .marker{
    position: absolute;
    padding: 15px 70px;
    border: 1px solid #ec874f;
    font-size: 35px;
    border-radius: 15px;
}


/*SVG style*/
#finder #imageSection svg g[data-name="Material Highlight"] path{
    fill-opacity: 0;
    stroke-opacity: 0;
}


#finder #imageSection svg g.active path{
    fill-opacity: 0.2;
    stroke-opacity: 1;
}



#finder aside{
    display: inline-block;
    width: 25vw;
    height: 100vh;
    background-color: #F5F5F5;
    position: relative;
    overflow: hidden;
    overflow-x: hidden;
}

#finder aside .innerAside{
    position: relative;
    height: 100vh;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;

}

#finder aside .mobileCloser{
    display: none;
}

#finder aside .screen{
    position: absolute;
    left: 0px;
    width: 100%;
    top: 0px;

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}
#finder aside .screen .inner{
    padding: 80px 90px;
}


#finder aside .screen.firstScreen{
    min-height: 100vh;
}

#finder aside .screen.firstScreen.out{
    left: -25vw;
}


#finder aside .screen.firstScreen .logo{
    left: 0px;
    text-align: center;
    width: 100%;
    margin-top: 20px;
    bottom: 20px;
}





#finder aside .screen.secondScreen.out{
    left: 25vw;
}

.addToolToFinderBtn{
    margin-bottom: 25px;
}
#finder aside .firstScreen .categorieEntry{
    padding: 15px 25px;
    background-color: white;
    border: 1px soild #282727;
    margin-bottom: 25px;
    color: #282727;
    border-radius: 35px;
    border:1px solid black;
    text-align: left;
    position: relative;
    cursor: pointer;
}

#finder aside .firstScreen .stepSelection{
    padding: 15px 25px;
    background-color: white;
    border: 1px soild #282727;
    margin-bottom: 25px;
    color: #282727;
    border-radius: 35px;
    border:1px solid black;
    text-align: left;
    position: relative;
    width: 100%;
    -webkit-appearance: none;
}

#finder aside .firstScreen .categorieEntry:after{
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 1px solid #282727;
    border-right: 1px solid #282727;
    transform: rotate(45deg);
    position: absolute;
    right: 40px;
    top: 19px;
}


#finder aside .firstScreen .smallHeadline{
    font-weight: 600;
}
#finder aside .specialheadline{
    font-size: 18px;
    margin-top: 40px;
    margin-bottom: 25px;
}




#finder aside .overTools{
    display: inline-block;
    padding: 20px;
    background: white;
    border-radius: 20px;
    width: 100%;
    box-sizing: border-box;
}


#finder .secondScreen .backButton{
    padding: 10px 0px;
    color: #282727;
    display: inline-block;
    float: left;
    width: 100%;
    cursor: pointer;
    margin-bottom: 20px;
}


#finder .secondScreen .backButton img{
    padding-right: 10px;
    transform: translateY(3px);
}

#finder aside .selectetKategorie{
    text-align: left;
    padding: 10px 0px;
    margin-bottom: 20px;
}
#finder aside .headline{
    margin-bottom: 20px;
}

#finder aside .tool{
    display: inline-block;
    width: 100%;
    padding: 10px 20px;

    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    float: left;
    box-sizing: border-box;


    border-color: #e4e5e4;
    border-width: 1px;
    border-style: solid;
    border-radius: 23px;

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 

}

#finder aside .tool.invisible{
    transform: translateY(-100%)!important;
    opacity: 0;
    height: 0px;

    margin: 0px!important;
    border: none!important;
    padding: 0px!important;
}

#finder aside .tool:hover{
    color: #ec874f;
    border-color: #ec874f;
    transform: translateY(-5px);
}


#finder aside .tool span{
    color: #c4c4c4;
    position: absolute;
    right: 15px;
}


#finder aside .tool.active span{
    color: white;
    position: absolute;
    right: 15px;
}


#finder aside .tool.active{
    border-color: #ec874f;
    background-color: #ec874f;
    color: white;
}



.calendarEntry.active,
.headlineEntry.active{
    background-color: rgba(236,135,79, 0.2);
}

.overContentCalendar .slick-list {
    height: auto!important;
}


#stepDetail{
    display: inline-block;
    width: calc(60vw - 225px);
    height: calc(100vh - 150px);
    top: 150px;
    position: relative;
    text-align: center;
    float: left;

    text-align: left;
    padding: 50px 75px;
    padding-left: 150px;
}




#stepDetail .headline{
    margin-bottom: 40px;
}

#stepDetail .overStepByStep{
    height: auto;
    max-height: calc(100vh - 150px);
    width: calc(90%);
}

#stepDetail .stepEntry{
    border-color: #ec874f;
    border-width: 1.5px;
    border-style: solid;
    border-left-width: 7px;

    filter: drop-shadow(4px 4px 9.5px rgba(0,0,0,0.16 ));


    background: #ffffff;
    margin: 20px 0px;
    padding: 41px;

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}

main.editEnable #stepDetail .stepEntry .fistLine:after{
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url(.././img/edit_Icon.svg) no-repeat;
    background-size: contain;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}


#stepDetail .stepEntry .number{
    display: inline-block;
    float: left;
    width: 30%;
}

#stepDetail .stepEntry .name{
    display: inline-block;
    float: left;
    width: 70%;
}

#stepDetail .stepEntry .description{
    display: inline-block;
    float: right;
    width: 70%;
    height: 150px;
    overflow-y: scroll;
    line-height: 1.5;
}

#stepDetail .stepEntry .fistLine{
    border-bottom: 1px dashed #707070;
    display: inline-block;
    float: left;
    width: 100%;
    padding: 20px 0px;
    margin-bottom: 20px;
}

#stepDetail .stepEntry .secondLine{
    display: inline-block;
    float: left;
    width: 100%;
}


#stepDetail .stepEntry .secondLine .icon{
    display: inline-block;
    float: left;
    width: 10%;
    text-align: left;
    margin-right: 3%;
}
#stepDetail .stepEntry .secondLine .icon img{
    max-width: 35px;
    margin: auto;
}


#stepDetail .stepEntry:not(.slick-active){
    border-color: #707070!important;
    opacity: 0.15;
}

#stepDetail .stepEntry:not(.slick-active) .secondLine .important{
    color: gray;
}

#stepDetail .stepEntry:not(.slick-active) .secondLine .icon{
    opacity: 0;
}


#stepDetail .slick-arrow{
    position: absolute;
    z-index: 100;
    top: 50%;
    transform: translateX(-110%) translateY(-100%);
    color: transparent;
    background-color: transparent;
    width: 80px;
    float: left;
    border: none;
}

#stepDetail .slick-arrow.slick-prev:after{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-top: 4px solid #ec874f;
    border-right: 4px solid #ec874f;
    transform: rotate(-45deg);
    cursor: pointer;
    float: left;
}


#stepDetail .slick-arrow.slick-prev{
    content: 'next';
}

#stepDetail .slick-arrow.slick-next{
    transform: translateX(-110%) translateY(100%);
}
#stepDetail .slick-arrow.slick-next:after{
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-top: 4px solid #ec874f;
    border-right: 4px solid #ec874f;
    transform: rotate(135deg);
    float: left;
    cursor: pointer;
}

.touchHelper{display: none;}

#BigImageOverlay{
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    left: 0vw;
    top: -100vh;
    position: fixed;

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}


#BigImageOverlay.show{
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    left: 0vw;
    top: 0vh;
    position: fixed;
    z-index: 50;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}

#BigImageOverlay .inner{
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
}

#BigImageOverlay .inner img{
    border-radius: 23px;
}

#BigImageOverlay .closeIcon{
    position: absolute;
    right: 20px;
    top: 20px;
    display: inline-block;
    cursor: pointer;
    z-index: 51;
    font-weight: 600;
}

#BigImageOverlay .inner img{
    max-height: 90vh;
    max-width: 90vw;
}


#description_edit .delete{
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url(.././img/trash.svg);
    background-repeat: no-repeat;
    background-color: white;
    background-size: 70% 70%; /* Bild wird auf 90% der Breite und 90% der Höhe skaliert */
    background-position: center center;
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    border: 2px solid black;
    border-radius: 15px;
}   


#stepDetail .stepEntry .secondLine .important{
    display: inline-block;
    float: left;
    width: 87%;
    text-align: left;
    color: #EC874F;
    height: 75px;
    line-height: 1.5;
    overflow-y: scroll;
}

#stepDetailImageSection{
    float: left;
    display: inline-block;
    width: 40vw;
    max-height: 100vh;
    position: absolute;
    bottom: 0px;
    right: 0px;

}

#stepDetailImageSection .stepEntryImage{
    height: 100vh;
    position: relative;
}
#stepDetailImageSection .stepEntryImage img{
   width: 35vw;
   height: 35vw;
   object-fit: cover;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   border-radius: 23px;
   will-change: filter;
    filter: drop-shadow(0px 9px 9px rgba(0,0,0,0.3 ));
}


#stepDetailImageSection .changeImage{
    position: relative;
    width: 20%;
    height: auto;
    margin-top: 50%;
    margin-left: 36%;
    z-index: 9;
    display: none;
    cursor: pointer;
}

#stepDetailImageSection .changeImage svg{
    width: 100%;
}
main.editEnable #stepDetailImageSection .changeImage {
    display: inline-block;
}

.stepDetailStepView{
    position: fixed;
    left: 0px;
    top: 100vh;
    width: 100vw;
    height: 100vh;
    background-color: white;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}

body.stepDetailOverviewOpen .stepDetailStepView{
    top: 0vh;
}

.stepDetailStepView #stepDetail .slick-list{
    padding: 20% 0 20% 0!important;
}


.stepDetailStepView #stepDetail .headline span.addDesciption{
    float: right;
    display: none;
    cursor: pointer;
}

main.editEnable .stepDetailStepView #stepDetail .headline span.addDesciption{
    display: inline-block;
}




#stepEdit .secondLine .openKomponents{
    display: inline-block;
    float: left;
    width: 25%;
}
#stepEdit .secondLine .openKomponents:nth-child(2){
    float: right;
}

#stepKomponents .content .entry{
    display: inline-block;
    float: left;
    padding: 5px 15px;
    margin: 5px 5px;
    border: 1px solid black;
    border-radius: 15px;
    cursor: pointer;

    transform: translateY(0px);

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease;


}

#stepKomponents .content .entry:hover{
    border-color: #ec874f;
    color: #ec874f;
    transform: translateY(-5px);
}


#stepKomponents .content .entry.active{
    border-color: #ec874f;
    color: #fff;
    background-color: #ec874f;
}


#stepOverview .trashDropper{
    padding: 10px 20px;
    display: none;
    position: absolute;
    right: 10px;
    transform: scale(1);

    filter: drop-shadow(4px 11px 15.5px rgba(0, 0, 0, 0.16));
    background-color: white;
    border-radius: 15px;
    border:2px solid white;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease;

}
main.editEnable #stepOverview .trashDropper{
    display: inline-block;
}
#stepOverview .trashDropper.hoveranimation{
    transform: scale(1.2);
    border-color: #ec874f;
}
#stepOverview .trashDropper svg{
    width: 30px;
    height: 30px;
}

#stepOverview .trashDropper.hoveranimation svg{
    fill: #EC874F;
    stroke: #ec874f;
}


#stepOverview {
    display: inline-block;
    width: calc(100% - 150px);
    margin: 40px 75px;  
    margin-bottom: 200px;
}


#stepOverview .addNewStep{
    font-size: 45px;
    font-weight: 500;
    position: fixed;
    right: 50px;
    bottom: 50px;
    cursor: pointer;
    display: none;
    padding: 5px 20px;
    filter: drop-shadow(4px 11px 15.5px rgba(0, 0, 0, 0.16));
    background-color: white;
    border-radius: 15px;
    padding-bottom: 10px;
    line-height: 1;
    border: 2px solid white;

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease;
}

#stepOverview .addNewStep:hover{
    color: white;
    transform: translateY(-3px);
    border-color: #ec874f;
    color: #ec874f;
}

main.editEnable #stepOverview .addNewStep{
    display: inline-block;
}

#stepOverview .headline{
    margin: 50px 0px;
}
#stepOverview .headline{
    margin-top: 70px;
}
#stepOverview .stepCategory{
    margin: 20px;
}

#stepOverview .stepCategoryHealdine{
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    color: #282727;
    text-align: center;
    background: #f5f5f5;
    padding: 10px 0px;
    cursor: pointer;
    margin-bottom: 20px;
    font-weight: 600;
  border-radius: 15px;
}


#stepOverview .stepCategory .stepCategoryHealdine:after{
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 1px solid #282727;
    border-right: 1px solid #282727;
    transform: rotate(135deg);
    position: absolute;
    right: 40px;
    top: 11px;

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}


#stepOverview .stepCategory.open .stepCategoryHealdine:after{
    transform: rotate(315deg);
    top: 18px;
}





.stepLegend .inner{
    display: inline-block;
    float: left;
    width: 25%;
    text-align: center;
    padding: 10px 0px;
}

.stepLegend .inner:last-child{
    text-align: center;
}

#stepOverview .stepCategory .overSteps .stepEntry{
    cursor: pointer;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
}
#stepOverview .stepCategory .overSteps .stepEntry .first3{
    display: inline-block;
    float: left;
    width: calc(100% - 5px);
    padding: 10px 0px;
    border: 2px solid #dddddc;
    border-radius: 20px;

    transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.25s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.25s ease;
}

#stepOverview .stepCategory .overSteps .stepEntry .first3:hover{
    color: #ec874f;
    border-color: #ec874f;
    transform: translateY(-5px);
}


#stepOverview .stepCategory .overSteps .stepEntry .first3 .inner{
    display: inline-block;
    float: left;
    width: 25%;
    text-align: center;
}

#stepOverview .stepCategory .overSteps .stepEntry .LastOne{
    display: inline-block;
    float: left;
    width: 25%;
    text-align: right;
    padding: 10px 0px;
}


#stepOverview .stepEntry{
    width: 100%;
} 

.stepEntry.intern-link.hasDetail:after {
    content: ' ';
    width: 8px;
    height: 15px;
    position: absolute;
    right: 15px;
    border-bottom: 2px solid #0000FF;
    border-right: 2px solid #0000FF;
    transform: rotate(43deg);
    margin-top: 0px;
    border-bottom-right-radius: 2px;
}


#stepOverview .stepCategory{
    width: 30%;
    display: inline-block;
    float: left;
    position: relative;
}


#stepOverview.design_2 .stepCategory{
    width: 22%;
}

#stepOverview.design_2  #mobileNav{
    display: none;
}

#stepOverview.design_2{
    margin-top: 250px;
}
#stepOverview.design_2 .stepCategoryHealdine {
    background-color: white;
    padding-left: 25px;
    text-align: left;
    margin-bottom: 40px;
}
#stepOverview.design_2 .stepCategoryHealdine.headline{
    font-size: 35px;
}
#stepOverview.design_2 .stepCategoryHealdine::after{
    border-color: transparent;
}

#stepOverview.design_2 .first3 .inner{width: 25%!important;}
#stepOverview .first3 .inner.plus{
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    text-align: left;
}



#stepOverview.design_2 .stepCategory .overSteps .stepEntry .first3{
    width: calc(100% - 2px);
}

#monday_stats .content {
    overflow-x: auto; /* Aktiviert das horizontale Scrollen */
    white-space: nowrap; /* Verhindert Zeilenumbruch */
    width: 100vw; /* Nimmt die volle Breite des Viewports ein */
    position: relative;
    margin-top: 150px;
    height: calc(100vh - 150px);
}

#monday_stats .row {
    display: flex; /* Verwende Flexbox, um die Spalten horizontal zu ordnen */
    flex-wrap: nowrap; /* Zeilen werden nicht umbrochen, auch wenn sie breiter sind als 100% */
    justify-content: flex-start; /* Alle Spalten beginnen am linken Rand */
    width: max-content; /* Zeilen passen sich der Gesamtbreite des Inhalts an */
    margin: 5px 0px;
}
#monday_stats .row:last-child{
    margin-bottom: 150px;
}


#monday_stats .column {
    flex: 0 0 100px; /* Alle Spalten haben eine feste Breite von 200px */
    margin: 0px; /* Abstand zwischen den Spalten */
    background-color: #fff;
    padding: 10px 20px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc
}
#monday_stats .column:first-child{
    flex: 0 0 170px;
}


#monday_stats .headlineRow .column{
    border-color: white !important;
    padding-bottom: 20px;
    background-color: white!important;
    border-bottom: 0.2px solid #707070!important;
    border-radius: 0px!important;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 500;

}

#monday_stats .headlineRow .column:first-child{
    opacity: 0;
}

#monday_stats .column:nth-child(2){
    border-left: 1px solid #e3e3e3;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

#monday_stats .headlineRow .column:nth-child(2){
    border-left: none!important;
}

#monday_stats .column.Arbeitsschritt{
    background-color: rgba(236, 135, 79, 0.2);
    color: #EC874F;
    border-color: #ec874f;
}

#monday_stats .sumRow .column:first-child,
#monday_stats .column.name{
    margin-left: 50px;
    margin-right: 15px;
    font-weight: bold;
    border: 1px solid #000;
    border-radius: 25px;
}


#monday_stats .column.Erfüllungsgrad.notEnough{
    background-color: rgba(233,143,126,0.2);
    color: rgb(233,143,126);
    border-color: rgb(233,143,126);
}

#monday_stats .column.Erfüllungsgrad.thatsEnough{
    border-color: #8f7fff;
    color: #8f7fff;
    background-color: rgba(143, 127, 255, 0.2);
}

#monday_stats .Weekrow{
    text-align: center;
    font-size: 31px;
    color: #C4C4C4;
    margin-bottom: 35px;
    padding-top: 40px;
}


#monday_stats .column:last-child{
    border-right: 1px solid #ccc;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}


#monday_stats .filterIcon{
    position: fixed;
    right: 50px;
    bottom: 50px;

    width: 50px;
    height: 50px;
    background-image: url(.././img/filter_Icon.svg);
    background-repeat: no-repeat;
    background-color: white;
    background-size: 50% 50%; /* Bild wird auf 90% der Breite und 90% der Höhe skaliert */
    background-position: center center;
}


#monday_stats .switchicon{
    position: fixed;
    right: 50px;
    bottom:  150px;

    width: 50px;
    height: 50px;
    background-image: url(.././img/bar.svg);
    background-repeat: no-repeat;
    background-color: white;
    background-size: 50% 50%; /* Bild wird auf 90% der Breite und 90% der Höhe skaliert */
    background-position: center center;
}

#statsFilter{
    position: fixed;
    right: -25vw;
    top: 0px;
    width: 20vw;
    height: 100vw;
    background-color: white;
    z-index: 55;
    padding-top: 50px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    border-left: 2px solid white;
    filter: drop-shadow(4px 11px 15.5px rgba(0, 0, 0, 0.16));

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}
#statsFilter.open{
    right: 0vw;
}

#statsFilter .closeButton{
    width: 30px;
    font-weight: 600;
    position: fixed;
    right: 20px;
    top: 20px;
}

#statsFilter .content .smallBoldHeadline{
    padding-top: 40px;
    padding-bottom: 20px;
    display: inline-block;
    width: 100%;
    text-align: left;
}

#statsFilter .content .filterKat{
    display: inline-block;
    float: left;
}

#statsFilter .content .filterKat .filterEntry{
    display: inline-block;
    float: left;
    padding: 5px 15px;
    margin: 5px 5px;
    border: 1px solid black;
    border-radius: 15px;
    cursor: pointer;

    transform: translateY(0);

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}


#statsFilter .content .filterKat .filterEntry:hover{
    border-color: #ec874f;
    color: #ec874f;
    transform: translateY(-5px);
}


#statsFilter .content .filterKat .filterEntry.active{
    border-color: #ec874f;
    background-color: #ec874f;
    color: #fff;
}







#statsView{
    height:calc(100vh);
    width: 100vw;
    overflow-y: hidden;
    overflow-x: hidden;
}


#statsView .loadingMondayAnimation{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
#statsView .loadingMondayAnimation svg{
    width: 150px;
    height: 150px;
    /* Browserübergreifende Animation */
    animation: rotateLoading 2s linear infinite;

    /* Unterstützung für ältere Browser */
    -webkit-animation: rotateLoading 2s linear infinite; /* Safari, Chrome */
    -moz-animation: rotateLoading 2s linear infinite;    /* Firefox */
    -o-animation: rotateLoading 2s linear infinite;      /* Opera */
    -ms-animation: rotateLoading 2s linear infinite;     /* Internet Explorer 10+ */
}


@keyframes rotateLoading {
    0% {transform: rotate(0deg) scale(1);}
    50%{transform: rotate(180deg) scale(1.5);}
    100% {transform: rotate(360deg) scale(1);}
}
  
  /* Unterstützung für ältere Browser (Präfixe) */
@-webkit-keyframes rotateLoading {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
  
@-moz-keyframes rotateLoading {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(360deg);}
}
  
@-o-keyframes rotateLoading {
    0% {-o-transform: rotate(0deg);}
    100% {-o-transform: rotate(360deg);}
}



#processView{
    position: fixed;
    background-color: white;
    display: inline-block;
    width: calc(100vw);
    height: calc(100vh);
    overflow-x: scroll;
    bottom: 0px;
    transform: translateY(-100vh);
    z-index: 2;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}

body.openBarView #processView{
    transform: translateY(0vh);
}

#monday_stats{
    display: inline-block;
    width: calc(100vw - 150px);
    height: 100vh;
    position: relative; 
    overflow-x: hidden;
}

#monday_stats{
    overflow-y: hidden;
    width: 100vw;
    padding: 0px;
}

#toolOverView{
   display: inline-block;
   width: calc(100vw - 150px);
   position: relative; 
   padding: 75px;
    margin-top: 150px;
}

#monday_stats .topLine,
#toolOverView .topLine{
    width: 100%;
    display: inline-block;
    float: left;
    margin-bottom: 50px;
}

#monday_stats .sideNav{
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
}

#monday_stats .sideNav .navEntry{
    font-size: 20px;
    margin: 5px 0px;
    padding: 5px 0px;
    cursor: pointer;
    position: relative;
    color: #C4C4C4;
    transition: all 0.5s ease;
    -webkit-transition: all 0.2s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.2s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.2s ease; 
}

#monday_stats .sideNav .navEntry:hover{
    font-size: 25px;
    font-weight: 600;
}


#processView .stockKomponentsView{
    margin-top: 180px;
    margin-left: 90px;
    width: calc(100% - 180px);
    display: inline-block;
    white-space: nowrap;
}

#processView .stockKomponentsView .headline{
    margin-bottom: 35px;
    text-align: center;
}
#processView .stockKomponentsView .rightSide,
#processView .stockKomponentsView .leftSide{
    display: inline-block;
    float: left;
    width: 40%;
    margin: 0px 0px;
    padding: 0px 35px;
}

#processView .stockKomponentsView .rightSide{
    float: right;
}



#processView .stockKomponentsView .rightSide .entry,
#processView .stockKomponentsView .leftSide .entry{
    display: inline-block;
    float: left;
    position: relative;
    width: 100%;
    white-space: nowrap;
    padding: 7px 0px;
    border-bottom: 1px solid #c4c4c4;
}

#processView .stockKomponentsView .rightSide .entry .col,
#processView .stockKomponentsView .leftSide .entry .col{
    display: inline-block;
    float: left;
    width: 33.33%;
    font-weight: 500;
}

#processView .stockKomponentsView .entry .col.fillColumn{
    position: relative;
    background-color: #c4c4c4;
}
#processView .stockKomponentsView .entry .col.fillColumn .filler{
    height: 20px;
    background-color: #ec874f;
}

#processView .stockKomponentsView .entry .col.stock{
    text-align: right;
}

#processView .tree-container {
    display: block;
    margin-right: 10px; /* Abstand vom rechten Rand */
    white-space: nowrap;
    overflow-x: auto; /* Falls der Baum zu breit wird, Scrollen ermöglichen */
    margin-top: 150px;
}

#processView .tree-node {
    display: inline-block; /* Damit die Knoten in einer Zeile nebeneinander sind */
    text-align: center;
    vertical-align: top;
    position: relative;
    width: 100%;
}

/*First Step */
#processView .tree-node .step{
    font-size: 25px;
    border-bottom: 1px solid #ddd;
}

#processView .tree-node .step .number{
    display: none;
}


/*other steps */
#processView .tree-node .tree-node{
    width: auto!important;
    margin: 0px 5px;
}
#processView .tree-node .tree-node .step {
    padding: 10px 15px;
    background-color: #fff;
    color: black;
    border-radius: 25px;
    border: 2px solid #dddddc;
    font-size: 13px;
    position: relative;
}
#processView .tree-node .tree-node .step .number{
    display: block;
}

#processView .tree-node .tree-node .step::before{
    content: ' ';
    width: 1px;
    height: 50px;
    background-color: #dddddc;
    position: absolute;
    left: 50%;
    top: -52px;
}



#processView .step .left .topLine{
    font-weight: 600;
}


#processView .step .number{
    font-size: 15px;
    font-weight: 600;
    color: #ec874f;
}

#processView .children {
    display: block; /* Kinder unterhalb des Schritts */
    margin-top: 50px;
}



#toolOverView .leftBox .smallHeadline{
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 20px;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}


#toolOverView .leftBox.openStepView{
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
    border: 2px solid transparent;
}



main:not(.editEnable) #toolOverView .rightBox:hover,
#toolOverView .leftBox.openStepView:hover .icon,  
#toolOverView .leftBox.openStepView:hover{
    border-color: #ec874f;
    color: #ec874f;
    transform: translateY(-3px);
    border-color: #ec874f;
}
#toolOverView .rightBox:hover svg path{
    stroke: #ec874f;
}

#toolOverView #addItemButton{
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 50px;
    display: none;
}
main.editEnable #toolOverView #addItemButton{
    display: inline!important;
}


#toolOverView .leftBox.openStepView:hover .icon{
    transform: translateY(0px);
}


#toolOverView .leftBox .smallHeadline{
    padding: 20px 60px;
}


#toolOverView .leftBox.openStepView .icon{
    font-size: 50px;
    font-weight: 300;
    font-style: normal;
    text-align: left;
    color: #282727;
    padding-right: 0px;
}


#toolOverView .leftBox svg{
    width : 85%;
    display: inherit;
    margin: auto;
}



#toolOverView .overFlex{
    display: flex;
    width: 100%;
    justify-content: space-between;
}   

#toolOverView .leftBox{
    /*width: 25%;
    display: inline-block;
    float: left;
    height: 50vh;*/
    flex: 0 0 40%;
    filter: drop-shadow(4px 11px 15.5px rgba(0,0,0,0.16 ));
    background: #ffffff;
    margin-right: 20px;
    min-height: 40vh;
    cursor: pointer;
}

#toolOverView .leftBox .icon1{
    text-align: center;
}


#toolOverView .leftBox img{
   width: 180px;
}


#toolOverView .rightBox{
    /*width: 60%;
    display: inline-block;
    float: left;

    margin-left: 50px;
    height: 50vh;*/
    flex: 0 0 55%;
    padding: 40px;
    will-change: filter;
    filter: drop-shadow(4px 11px 15.5px rgba(0,0,0,0.16 ));
    border-radius: 1px;
    background: #ffffff;
    max-height: 60vh;
    overflow-y: scroll;
    cursor: pointer;

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
    border: 2px solid transparent;
}

#toolOverView .rightBox .smallHeadline{
    display: inline-block;
    margin-bottom: 35px;
    width: 60%;
    float: left;
    margin-top: 15px;

}

#toolOverView .rightBox .icon1{
    text-align: center;
}

#toolOverView .rightBox .toFinder{
    display: inline-block;
    padding: 12px 24px 12px 27px;
    text-align: center;
    float: right;
    cursor: pointer;

    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}
#toolOverView .rightBox .toFinder:hover svg path{
    stroke: #EC874F;
}

#toolOverView .rightBox .MaterialEntry{
    width: 45%;
    padding: 10px 20px;
    border-radius: 20px;
    background-color: white;
    color: black;
    border: 1px solid #dddddc;
    margin-top: 5px;
    display: flex;
    float: left;
    align-items: center;
    justify-content: space-between;
}

#toolOverView .rightBox .MaterialEntry .name{
    display: inline-block;
    width: 90%;
    float: left;
}


#toolOverView .rightBox .MaterialEntry .number{
    display: inline-block;
    width: 10%;
    float: left;
}

#toolOverView .rightBox .MaterialEntry:nth-child(2n){
    margin-left: 1%;
}


main #toolOverView .MaterialEntry .minus{
    display: none;
}
main.editEnable #toolOverView .MaterialEntry .minus{
    display: block;
}


#stepKomponents,
#stepEdit,
#changeImage,
#description_edit,
#addItem,
#RemoveItemOverlay,
#editToolFinder,
#addToolFinder,
#editMondayDetails,
#addDayEntry, 
#deleteConfirmBox{
    position: fixed;
    display: inline-block;
    width: 10vw;
    /* height: 20vw; */
    background: white;
    filter: drop-shadow(4px 11px 15.5px rgba(0,0,0,0.16 ));
    top: -50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    padding: 50px;
    z-index: 98;
    text-align: center;

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease; 
}

#stepKomponents{
    width: 35vw;
}

#addDayEntry{
    width: 20vw;
}

#addDayEntry .smallHeadline span{
    line-height: 1.5;
}
#addDayEntry .smallHeadline{
    margin-bottom: 10px;
}


#stepKomponents.show,
#stepEdit.show,
#changeImage.show,
#description_edit.show,
#addItem.show,
#RemoveItemOverlay.show,
#editToolFinder.show,
#addToolFinder.show,
#addDayEntry.show,
#editMondayDetails.show,
#deleteConfirmBox.show{
    top: 50%;
}


#stepKomponents .cancel,
#stepEdit .cancel,
#changeImage .cancel,
#description_edit .cancel,
#addItem .cancel,
#RemoveItemOverlay .cancel,
#editToolFinder .cancel,
#editMondayDetails .cancel,
#addToolFinder .cancel, 
#deleteConfirmBox .cancel,
#addDayEntry .cancel{
    position: absolute;
    right: 5px;
    top: 5px;
    width: auto;
    padding: 10px 16px;
    color: black;
    background-color: white;
}

#stepKomponents .secondLine button,
#stepEdit .secondLine button,
#changeImage .secondLine button,
#addItem .secondLine button,
#RemoveItemOverlay .secondLine button,
#addDayEntry .secondLine button,
#deleteConfirmBox .secondLine button{
    display: inline-block;
    width: 100%;
    margin: 10px 0px;
}

#changeImage img{
    max-width: 100%;
}

#addDayEntry .addTodo form button,
#addDayEntry .addTodo form input{
    display: inline-block;
    width: 32%;
}

#addDayEntry .Todos.workLine{
    
}

#addItem .cancel{
    background-color: white;
    color: black;
}
#addItem{
    max-height: 70vh;
    overflow-y: scroll;
    text-align: left;
    min-width: 20vw;
}
#addItem .inner .items .item,
#addItem .inner .categorie{
    padding: 15px 25px;
    background-color: white;
    border: 1px soild #282727;
    margin-bottom: 5px;
    color: #282727;
    border-radius: 35px;
    border: 1px solid black;
    text-align: left;
    position: relative;
    cursor: pointer;
}
#addItem .inner .categorie:after
{
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 1px solid #282727;
    border-right: 1px solid #282727;
    transform: rotate(-225deg);
    position: absolute;
    right: 25px;
    top: 17px;
}

#addItem .inner .categorie.open:after{
    transform: rotate(-45deg);
    top: 21px;
}


#addItem .inner .items .item{
    margin-left: 10px;
    padding: 5px 10px;
    margin-bottom: 5px;
    display: inline-block;
}
#addItem .inner .items{
    margin-bottom: 10px;
    display: none;
}

#addItem .inner .items .item.selected{
    background-color: #ec874f;
    border-color: #ec874f;
    color: white;
}


#addDayEntry .Todos{
    display: inline-block;
    width: 100%;
    padding: 10px 0px;
    user-select: none;
}
#addDayEntry .Todos .entry{
    width: 40%;
    display: inline-block;
    float: left;
    margin: 5px 5px;
    line-height: 30px;
} 

#addDayEntry .Todos .entry div{
    width: 50%;
    display: inline-block;
    float: left;
    text-align: center;
} 


#addDayEntry .Todos .entry .second{
    background: white;
}


#description_edit{
    min-width: 20vw;
}

#description_edit input:read-only{
    background-color: #c4c4c4;
    color: black;
}



.generallineBottom{
    content: ' ';
    background: #f5f5f5;
    width: 100vw;
    height: 40px;   
    position: fixed;
    bottom: 0px;
}


#editButton{
    position: fixed;
    left: 50px;
    bottom: 50px;
    z-index: 10;
    cursor: pointer;

    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
    -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
    -o-transition: all 0.5s ease;
}


#editButton.active{
    border-color: #ec874f;
    background-color: #ec874f;
}

#editButton .inner{
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
}
#editButton .inner svg{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    transform: scale(0.8);
}

#editButton .inner svg path{
    fill: #000000;
}

#editButton.active .inner svg path{
    fill: #ffffff;
}

#editButton.active:hover{
    background-color: white;
}

#editButton:hover .inner svg path{
    fill: #ec874f;
}

#toDelete{
    z-index: 9;
}

.openCloseDetailImage{
    display: none;
}


/*IPAD*/
@media (max-width: 1080px)  and (min-width: 850px){

    aside.show .searchInput{position: fixed!important; bottom: 0px!important;background-color: #F5F5F5;    left: 0vw !important;width: 30vw !important;}
    aside.show .searchInput input{margin-left: 35px!important;width: calc(100% - 70px)!important;}
    aside.show .searchInput .searchIcon{margin-right: 35px!important;}
    .absolutNumbers .table{width: 100%;margin-left: 0%;}
    .absolutNumbers .table .over{
        width: 25vw;
    }

    .headline{
        font-size: 25px;
    } 
    
    /*header*/
    header .rightHeaderSection{
        width: 30vw;
    }

    header .logo{
        width: 50px;
        overflow: hidden;
        height: 50px;
    }
    header .rightHeaderSection{
        margin-bottom: 30px;
    }


    header.small{
        width: 90vw;
    }
    header .rightHeaderSection .backArrow{
        position: relative;
    }
    header .rightHeaderSection .backArrow:after{
        position: absolute;
        width: 120px;
        height: 70px;
        transform: translateY(-50%);
        content: ' ';
        background-color: transparent;
        right: 0px;
        top: 0px;
    }


    #home .over_box{
        margin: 0px 35px;
    }


    #login .overLoginForm{
        width: 40%;
    }
    
    /*Calendar*/
    #calendar{
        margin-top: 200px;
    }
    #calendar .TopLegend,
    #calendar .content_calendar .calenderContentRow,
    #calendar .content_calendar, 
    #calendar .headline_calendar,
    .overContentCalendar{
        width: calc(100vw - 150px);
    }

    #stepOverview .stepCategory{
        width: 97%;
    }

    #calendar .TopLegend .TopLegendEntry.firstdummyLegend,
    #calendar .content_calendar .calendarEntry.userEntry, 
    #calendar .headline_calendar .headlineEntry.first{
        flex: 0 0 10%;
    }
    .calendarEntry .border{
        left: 15%!important;
    }

    #calendar .content_calendar .calendarEntry .line{
        flex-wrap: wrap;
    }

    #calendar .content_calendar .calendarEntry .line .step,
    #calendar .content_calendar .calendarEntry .line .number{
        flex-basis: 100%;
    }

    #calendar .content_calendar .calendarEntry .line.workLine .number{
        border-top-right-radius: 0px;
        border-bottom-left-radius: 20px;
        border-left: 0px;
    }


    .calendarButton{
        width: calc(100vw - 150px);
        top: 225px;
    }

    .headlineEntry,
    .TopLegendEntry,
    .calendarEntry{
        flex: 0 0 15%!important;
        max-width: 15%!important;
    }
    
    .headlineEntry.first,
    .TopLegendEntry.firstdummyLegend,
    .calendarEntry.userEntry{
        max-width: 15%!important;
        flex: 0 0 15%!important;
    }
    
    .headlineEntry.weekend,
    .TopLegendEntry.weekend,
    .calendarEntry.weekend{
        flex: 0 0 5%!important;
        max-width: 5%!important;
    }


    /*Sepoverview */

    #stepOverview.design_2{
        display: flex;
        flex-wrap: wrap;
    }
    #stepOverview.design_2 .stepCategory{
        flex-basis: 45%;
        flex-grow: 1;
        flex-shrink: 1;
    }

    #stepOverview.design_2{
        margin-top: 150px;
    }

    #stepOverview .headline{
        margin-top: 40px;
    }



    /*StepDetail */
    #toolOverView{
        padding-top: 25px;
    }

    #toolOverView .rightBox{
        padding: 0px;
    }
    #toolOverView .rightBox .smallHeadline{
        padding-left: 20px;
        padding-top: 20px;
    }
    
    #toolOverView .rightBox .toFinder{
        margin-top: 30px;
        margin-right: 20px;
    }
    #toolOverView .rightBox .overMaterialList{ 
        padding: 40px;
    }
    
    
    #toolOverView .rightBox .MaterialEntry{
        width: 39%;
    }



    #toolOverView .leftBox .smallHeadline {
        padding: 20px 20px;
    }


    #stepDetail{
        top: 90px;
    }

    #stepDetailImageSection,
    #stepDetail .overStepByStep{
        max-height: calc(100vh - 162px);
    }
    #stepDetailImageSection .stepEntryImage img{
        top: 35%;
    }
    #stepDetail .slick-arrow{
        top: 44%;
    }
    #stepDetail .stepEntry.slick-active{
        margin: 20px 0px;
    }


    /*finder*/
    #finder aside{
        position: fixed;
        right: 0px;
        top: 0px;
        width: 30vw;
        transform: translateX(100%);
        z-index: 100;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
        -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
        -o-transition: all 0.5s ease;
    }

    #finder aside .inner{
        padding: 80px 35px!important;
    }   
    .filterNone{
        filter: none!important;
    }


    #finder aside.show{
        transform: translateX(0%); 
    }


    /* finder */
    #finder .openCloseAside{
        display: inline-block;
        position: fixed;
        right: 0px;
        top: 0px;
        height: 100vh;
        width: 10vw;
        background: #F5F5F5;
        cursor: pointer;

        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
        -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
        -o-transition: all 0.5s ease;
        
        transform: translateX(0%);
    }

    #finder .openCloseAside.out{
        transform: translateX(100%); 
    }

    #finder .openCloseAside .inner{
        margin-top: 50vh;
        transform: translateY(-50%);
        text-align: center;
    }

    #finder .openCloseAside .inner img{
        max-width: 35px;
    }

    #finder #imageSection{
        width: 90vw;
    }

    #finder aside .screen.firstScreen.out,
    #finder aside .screen.secondScreen.out{
        left: 40vw;
    }

    #finder aside .mobileCloser{
        display: inline-block;
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 100;
    }



    .highlightLabel{
        padding: 3px 15px;
        font-size: 18px;
        border-radius: 15px;
        font-weight: 600;
        filter: none;
    }

    .stepDetailStepView #stepDetail .slick-list{
        padding: 5% 0 5% 0!important;
    }

    #finder aside .screen.firstScreen{
        padding-bottom: 50px;
    }

    #toolOverView .leftBox img{
        width: 90px;
    }
}



@media (max-width: 849px){

    aside.show .searchInput{position: fixed!important; bottom: 0px!important;background-color: #F5F5F5;    left: 0vw !important;width: 100vw !important;max-width: 100vw!important;}
    aside.show .searchInput input{margin-left: 45px!important;width: calc(100% - 90px)!important;}
    aside.show .searchInput .searchIcon{margin-right: 35px!important;}
    .absolutNumbers .table{width: 100%;margin-left: 0%;}

    .absolutNumbers .table{width: 100%;left: 0%;margin-left: 0px;}
    .absolutNumbers .table .over{
        width: 30vw;
    }
    #editButton{
        display: none;
    }

    .filterNone{
        filter: none!important;
    }

    #finder aside .screen.firstScreen{
        padding-bottom: 50px;
    }

    .highlightLabel{
        padding: 3px 15px;
        font-size: 18px;
        border-radius: 15px;
        font-weight: 600;
        filter: none;
    }


    #editButton{
        bottom: 10px;
        left: 10px;
    }

    .headline{
        font-size: 21px;
    }

    .overLoginForm{
        width: 80%!important;
    }



    header .logo{
        width: 50px;
        overflow: hidden;
        height: 50px;
        margin-left: 25px;
        margin-top: 25px;
    }


    header .rightHeaderSection{
        margin-top: 35px;
        margin-right: 25px;
        width: 40vw;
        margin-bottom: 20px;
    }
    header .rightHeaderSection .backArrow.show{
        margin-top: 5px;
    }
    #calendar .slick-dots{
        top: 50px;
    }
    #calendar{
        margin-top: 100px;
    }
    header .rightHeaderSection .name{
        font-size: 25px;
    }
    header.small{width: 100%;}

    section#home{
        height: calc(100vh);
        bottom: 0px;
        position: absolute;
        left: 0px;
        top: auto;
        transform: none;
    }
    section#home .container{
        display: inline-block;
        margin-top: 50vh;
        transform: translateY(-50%);
        width: 100vw;
    }
    section#home .container .over_box{
        display: block;
        margin-left: 50%;
        transform: translateX(-50%);
    }
    section#home .container .over_box .box_head{
        text-align: center;
        margin-bottom: 10px;
        font-weight: 400;
        font-size: 22px;
    }
    #home .container .box{
        height: 100px;
        margin-bottom: 25px;
    }
    #home .container .box svg{
        width: 40px;
    }
    #finder #imageSection,
    #finder{
        width: 100vw;
    }

    #finder aside{
        position: fixed;
        right: 0px;
        top: auto;
        bottom: 0px;
        width: 100vw;
        height: 80vh;
        transform: translateY(100%);
        z-index: 100;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
        -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
        -o-transition: all 0.5s ease;
    }
    #finder aside.show{
        transform: translateY(0%);
    }
    #finder aside .screen.secondScreen.out{
        left: 100vw;
    }
    #finder aside .screen.firstScreen.out{
        left: -100vw;
    }
    #finder aside .screen.firstScreen{
        min-height: auto!important;
    }

    #finder aside .screen .inner{
        padding: 60px 45px;
    }

    #finder .openCloseAside{
        display: block;
        position: fixed;
        left: 0px;
        bottom: 0px;
        width: 100vw;
        text-align: center;
        background: #F5F5F5;
        z-index: 80;
    }

    #finder .openCloseAside .inner{
        padding: 5px 20px;
    }

    #finder .openCloseAside .inner img{
        width: 35px;
    }

    #finder aside .mobileCloser{
        display: inline-block;
        position: fixed;
        right: 20px;
        top: 20px;
        z-index: 100;
    }

    #stepOverview{
        width: 90vw;
        margin-left: 5vw;
    }

    #stepOverview .headline{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    #stepOverview.design_2 .headline{
        margin-top: 70px;
    }

    #stepOverview .stepCategory{
        width: 100%;
        margin: 0px;
    }

    #stepOverview.design_2{
        position: relative;
        height: calc(100vh - 105px);
        margin: 0px;
        margin-top: 100px;
        overflow: scroll;
        margin-bottom: 0px;
        width: 100vw;
        overflow-x: hidden;
    }

    #stepOverview.design_2 .stepCategory
    {
        width: calc(100% - 40px);
        padding: 0px 20px;
        margin: 0px;
        position: fixed;
        top: 30px;
        max-height: calc(100vh - 150px);
        overflow-y: scroll;
        transform: translateY(100vh);
        min-height: 90vh;

        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
        -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
        -o-transition: all 0.5s ease;
    }
    #stepOverview.design_2 .stepCategory .overSteps
    {
        margin-bottom: 300px;
    }

    #stepOverview.design_2 .stepCategory.show{
        transform: translateY(0%);
    }
    

    #stepOverview.design_2 #mobileNav{
        position: fixed;
        display: block;
        bottom: 0px;
        left: 0px;
        width: 100vw;
        text-align: center;
        pointer-events: all;
    }

    #stepOverview.design_2 #mobileNav .navEntry{
        filter: drop-shadow(0px 3px 15px rgba(0,0,0,0.16 ));
        background-color: white;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        padding: 25px;
        padding-bottom: 20px;
        position: relative;

        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
        -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
        -o-transition: all 0.5s ease;


        color: transparent;
        height: 0px;

    }

    .navEntry:after {
        background: white;
        width: 100vh;
        height: 20px;
        content: ' ';
        left: 0px;
        bottom: 0px;
        position: absolute;
        transform: translateY(20px);
    }

    .navEntry:before {
        width: 40px;
        height: 1px;
        background: #DDDDDC;
        position: absolute;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
        content: ' ';
        top: 17px;
    }

    #stepOverview.design_2 #mobileNav.show .navEntry{
        color: black;
        height: 25px;
    }


    #toolOverView{
        padding: 25px;
        width: calc(100vw - 50px);
        padding-top: 80px;
        margin: 0px;
        text-align: center;
        height: 100vh;
        overflow-y: scroll;
        
    }

    #toolOverView .overFlex{
        display: inline-block;
    }
    #toolOverView .overFlex .leftBox{
        margin: 0px;
        min-height: auto!important;
        height: 200px;
        border-radius: 25px;
        margin-bottom: 5vh;
    }
    #toolOverView .overFlex .leftBox .smallHeadline{
        padding: 0px 10px;
    }
    #toolOverView .overFlex .leftBox img{
        max-width: 50px;
        max-height: 150px;
    }

    #toolOverView .overFlex .rightBox{
        height: auto!important;
        border-radius: 25px;
        max-width: auto!important;
        padding: 25px;
        position: relative;
        max-height: unset;
        display: inline-block;
        margin-bottom: 120px;
        width: calc(100vw - 100px);
    }

    #toolOverView .overFlex .rightBox .smallHeadline{
        text-align: left;
    }

    #toolOverView .overFlex .rightBox .toFinder{
        padding-right: 0px;
    }

    #toolOverView .overFlex .rightBox .MaterialEntry{
        width: 87%;
    }


    .stepDetailStepView #stepDetail{
        width: 100vw;
        padding-left: 25px;
        top: 50px;
    }

    .stepDetailStepView #stepDetail .slick-list{
        padding: 0px!important;
        
    }
    #toolOverView .rightBox .MaterialEntry:nth-child(2n){
        margin-left: 0px!important;
    }

    #stepDetailImageSection{
        width: 100vw;
        height: 50vh;
    }
    #stepDetailImageSection .stepEntryImage{
        height: 50vh;
    }
    #stepDetailImageSection .stepEntryImage img
    {
        width: 100%;
        height: 100%;
    }

    #stepDetailImageSection{
        transform: translateY(80%);
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
        -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
        -o-transition: all 0.5s ease;
    }

    #stepDetailImageSection.show{
        transform: translateY(0%);
    }

    .overContentCalendar{
        width: 90vw!important;
    }

    .TopLegend{
        display: none!important;
    }

    #calendar .content_calendar, 
    #calendar .headline_calendar,
    #calendar .content_calendar .calenderContentRow,
    .headline_calendar{
        width: 90vw!important;
    }

    .headlineEntry,
    .TopLegendEntry,
    .calendarEntry{
        flex: 0 0 14.28%!important;
        max-width: 14.28%!important;
    }


    .headlineEntry.first, 
    .TopLegendEntry.firstdummyLegend, 
    .calendarEntry.userEntry{
        max-width: 15%!important;
        flex: 0 0 15%!important;
    }

    #calendar .content_calendar .calendarEntry.userEntry .border{
        display: none;
    }

    #calendar .usernameLine{
        margin-bottom: 0px!important;
    }

    #calendar .content_calendar .calendarEntry{
        min-height: 40px;
    }
    #calendar .content_calendar .calendarEntry .line{
        flex-wrap: wrap;
    }

    #calendar .content_calendar .calendarEntry .line .step,
    #calendar .content_calendar .calendarEntry .line .number{
        flex-basis: 100%;
        font-size: 10px;
    }

    #calendar .content_calendar .calendarEntry .line.workLine .number{
        border-top-right-radius: 0px;
        border-bottom-left-radius: 20px;
        border-left: 0px;
    }

    #calendar .headline_calendar .headlineEntry{
        border-bottom: none;
    }
    #calendar .headline_calendar .headlineEntry .day{
        margin-top: 6px;
        font-weight: 500;
        font-size: 18px;
    }
    #calendar .headline_calendar .headlineEntry .date{
        margin-bottom: 6px;
    }

    #calendar .headlineEntry.first .headline{
        display: none!important;
    }

    #calendar .content_calendar .calendarEntry .line{
        margin-left: 5px!important;
        margin-right: 5px!important;
        margin-bottom: 5px;
    }
    #calendar .headline_week{
        margin-bottom: 50px;
        margin-top: 25px;
    }

    #calendar .calenderContentRow{
        flex-direction: row;
        flex-flow: wrap;
    }
    #calendar .calenderContentRow .calendarEntry.userEntry{
        flex: 0 0 100%!important;
        max-width: 100%!important;
    }

    #calendar .calenderContentRow .calendarEntry .time{
        color: #c4c4c4;
    }

    #calendar .headlineEntry.first{
        display: none;
    }
    .calendarButton{
        width: 80%;
        top: 245px;
    }


    .headlineEntry.today:after{
        right: -21px;
        top: 6px;
    }

    #calendar .mobildSwitch{
        display: inline-block;
        width: 90vw;
        margin-left: 5vw;
        background-color: #F5F5F5;
        border-radius: 20px;
        position: relative;
    }

    #calendar .mobildSwitch .switchEntry{
        display: inline-block;
        width: 49%;
        border-radius: 20px;
        text-align: center;
        padding: 9px 0px;

        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease; /* Für ältere Versionen von Safari und Chrome */
        -moz-transition: all 0.5s ease; /* Für ältere Versionen von Firefox */
        -o-transition: all 0.5s ease;
    }

    #calendar .mobildSwitch .switchEntry.active{
        background-color: white;
        filter: drop-shadow(4px 11px 15.5px rgba(0,0,0,0.16 ));
    }

    #calendar .dayCalendar{
        width: 90vw;
        margin-left: 5vw;
        position: relative;
    }
    #calendar .dayCalendar .headline{
        display: inline-block;
        font-size: 31px;
        font-weight: 400;
        color: #C4C4C4;
        text-align: center;
        width: 100%;
        padding: 45px 0px;
        /*margin-top: 25px;*/
        border-bottom: 1px solid #c4c4c4;

    }

    #calendar .content_calendar .calendarEntry.userEntry .line{
        color: #c4c4c4;
    }
    #calendar .dayCalendar .content .userToDayEntry{
        margin: 5px 0px;
        border-bottom: 1px solid #c4c4c4;
    }

    #calendar .mobileHeadline{
        display: inline-block;
        width: 90vw;
        margin-left: 5vw;
        margin-bottom: 20px;
    }


    #calendar .calendarEntry.weekend{
        position: relative;
    }
    #calendar .calendarEntry.weekend::before{
        position: absolute;
        width: 100%;
        height: 40px;
        background-color: rgba(196,196,196,0.15);
        content: ' ';
        top: -40px;
        left: 0px;
    }

    .mobileButtons{
        position: absolute;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        top: 50px;
        z-index: 100;
    }

    .mobileButtons .prev{
        display: inline-block;
        width: 20px;
        height: 20px;
        border-top: 2px solid #C4C4C4;
        border-right: 2px solid #C4C4C4;
        transform: rotate(-130deg);
        cursor: pointer;
    }


    .mobileButtons .next{
        display: inline-block;
        width: 20px;
        height: 20px;
        border-top: 2px solid #C4C4C4;
        border-right: 2px solid #C4C4C4;
        transform: rotate(45deg);
        cursor: pointer;
        float: right;
    }

    #addToolFinder,
    #editToolFinder,
    #deleteConfirmBox,
    #addDayEntry{
        width: 75vw;
    }

    .content_calendar{
        width: 90vw!important;
    }


    .openCloseDetailImage{
        display: inline-block;
        width: 40px;
        height: 25px;
        position: absolute;
        bottom: 25px;
        content: ' ';
        left: 50%;
        transform: translateX(-50%);
        z-index: 80;
        background-color: transparent;
        border-color: transparent;
    }

    .openCloseDetailImage:after{
        width: 20px;
        height: 20px;
        border-top: 2px solid white;
        border-right: 2px solid white;
        content: ' ';
        display: inline-block;
        transform: rotate(-45deg) translateX(0%) translateY(50%);

    }

    .openCloseDetailImage:hover{
        transform: translateX(-50%);
        border-color: transparent;
    }

    .openCloseDetailImage.open{
        transform: translateX(-50%) rotate(180deg);
    }


    .hiddenXS{
        display: none!important;
    }
}