/* Sidebar BackgroundColor */
.m-aside-menu.m-aside-menu--skin-light{
    background-color:#FFF
}
/* Bereich über der Sidebar und links vom Header - Inline überschreibt diese Einstellung */
.m-stack__item.m-stack__item--middle.m-brand__logo{
    background-color:#FFF;
}
/* Header BackgroundColor */
.m-stack__item.m-stack__item--fluid.m-header-head{
    background-color:#FFF;
}
/* Header Titel Backgroundcolor */
.m-header__title{
    background-color:#FFF;
}
/* Header Titel Color - Inline überschreibt diese Einstellung */
.m-header__title-text{
    color:white;
}
/* Header Toolbar Right backgroundColor - Hintergrund Lübeck svg*/
.m-topbar.m-stack.m-stack--ver.m-stack--general{
    background-color:#FFF;
}
/* Header Toolbar Right Profil Icon backgroundColor - !importnat wird gebraucht */
.m-nav__link-icon-wrapper{
    background-color:#FFF !important;
}
/* Header Toolbar Right Profil Icon backgroundColor At Hover - !importnat wird gebraucht */
.m-topbar .m-topbar__nav.m-nav>.m-nav__item>.m-nav__link .m-nav__link-icon.m-nav__link-icon--active .m-nav__link-icon-wrapper>i,.m-topbar .m-topbar__nav.m-nav>.m-nav__item>.m-nav__link .m-nav__link-icon:hover .m-nav__link-icon-wrapper>i{
    color: black !important
}
/* Sidebar Icon Color Open At hover Clicked*/
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item.m-menu__item--open>.m-menu__heading .m-menu__link-icon,.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item.m-menu__item--open>.m-menu__link .m-menu__link-icon{
    color:rgb(212, 15, 20)
}
/* Sidebar Icon Color Closed */
.m-aside-left--minimize .m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item>.m-menu__link>.m-menu__link-icon{
    color:#777c9d
}
/* Sidebar Icon Color Closed Clicked Collapse */
.m-aside-left--minimize .m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item.m-menu__item--hover>.m-menu__link>.m-menu__link-icon,.m-aside-left--minimize .m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item.m-menu__item--open>.m-menu__link>.m-menu__link-icon{
    color:rgb(212, 15, 20) !important
}
/* Sidebar Icon Color Open At Hover */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__heading .m-menu__link-icon,.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__link .m-menu__link-icon{
    color:rgb(212, 15, 20) !important
}
/* Sidebar Icon Color Open */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item>.m-menu__heading .m-menu__link-icon,.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item>.m-menu__link .m-menu__link-icon{
    color:#777c9d
}
/* Sidebar Item Color */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item>.m-menu__heading .m-menu__link-text,.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item>.m-menu__link .m-menu__link-text{
    color:#777c9d
}
/* Sidebar Item Color At hover */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__heading .m-menu__link-text,.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__link .m-menu__link-text{
    color:#777c9d
}
/* Sidebar Item Color Clicked */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item.m-menu__item--open>.m-menu__heading .m-menu__link-text,.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item.m-menu__item--open>.m-menu__link .m-menu__link-text{
    color:rgb(212, 15, 20)
}
/* Sidebar Item BackgroundColor */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__heading,.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active)>.m-menu__link{
    background-color:#FFF
}
/* Sidebar Item BackgroundColor At Hover */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__heading,.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__link{
    background-color:#FFF
}
/* Sidebar Item BackgroundColor Clicked open */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item.m-menu__item--open>.m-menu__heading,.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item.m-menu__item--open>.m-menu__link{
    background-color:#FFF
}
/* Sidebar Item BackgroundColor Clicked collapse */
.m-aside-left--minimize .m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item.m-menu__item--hover>.m-menu__link,.m-aside-left--minimize .m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item.m-menu__item--open>.m-menu__link{
    background-color:#FFF
}
/* Sidebar SubItem Color */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__heading .m-menu__link-text,.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__link .m-menu__link-text{
    color:rgb(212, 15, 20)
}
/* Sidebar SubItem BackgroundColor */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__heading .m-menu__link-text,.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active)>.m-menu__link{
    background-color:#FFF
}
/* Sidebar SubItem BackgroundColor At Hover */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__heading .m-menu__link-text,.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__link{
    background-color:#FFF
}
/* Sidebar SubItem Padding Left side */
.m-aside-menu .m-menu__nav>.m-menu__item>.m-menu__submenu .m-menu__subnav>.m-menu__item>.m-menu__link {
    padding-left: 50px
}
/* Sidebar SubItem Icon active Color*/
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active>.m-menu__heading .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active>.m-menu__link .m-menu__link-icon {
    color: rgb(212, 15, 20)
}
/* Sidebar Subitem Icon hover Color */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__heading .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover>.m-menu__link .m-menu__link-icon {
    color: rgb(212, 15, 20)
}
/* Sticky Menu Right Side */
.m-nav-sticky{
    background:#FFF;
    -webkit-box-shadow:0 0 15px 1px rgba(69,65,78,.2);
    box-shadow:0 0 15px 1px rgba(69,65,78,.2)
}
/* Content Head backgroundColor */
.m-portlet__head{
    background-color:#FFF !important
}
/* Contentbereich backgroundColor */
.m-content{
    background-color:#FFF !important
}
/* Footer backgroundColor - !important wird benötigt*/
.m-grid__item.m-footer{
    background-color:#FFF !important;
}
#app-logo{
    width: 200px !important;
    max-width: 300px;
}
/* Fullsize Dashboard */
#list-portlet{
    height: calc(100%);
}
#content-body {
    height: calc(100%);
}
#main-dashboard-container{
    height: calc(100%);
}
#main-dashboard-iframe{
    height: calc(99%);
}
/* Fullsize Dashboard Mobile */
#app{
    height: calc(96%);
}
/* .m-stack__item.m-brand.m-brand--skin-light{
    width: 230px;
} */
@media (min-width:1025px) {
    .m-stack.m-stack--desktop.m-stack--ver>.m-stack__item {
        width: 230px;
    }
}


/*** Mobile ***/


.m-aside-left-close{
    display:none
}
    @media (max-width:1024px){
        #list-portlet > div:nth-child(1) {
            display: block !important;
            }
            Element
            #content-head-title {
            display: block !important;
            }
            #content-head-title {
                display: block !important;
                margin: auto;
                margin-top: 15px;
            }
        
        .m-brand {
            width: calc(100% - 60px);
        }
        .m-aside-left{
            display:block!important;
            z-index:1001;
            position:fixed;
            -webkit-overflow-scrolling:touch;
            top:0;
            bottom:0;
            overflow-y:auto;
            -webkit-transform:translate3d(0,0,0);
            backface-visibility:hidden;
            -webkit-backface-visibility:hidden;
            width:auto!important;
            height: 400px;
            -webkit-transition:all .3s ease;
            transition:all .3s ease;
            left: 0;
            top: -400px;
        }
        .m-aside-left.m-aside-left--on{
            -webkit-transition:all .3s ease;
            transition:all .3s ease;
            top:61px
        }
        .menu-custom-toggle {
            cursor: pointer;
            width: 25px;
            height: 25px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding: 0px;
            background-color: #FFF;
            border-radius: 5px;
        }        
        .bar {
            width: 100%;
            height: 3px;
            background-color: #333;
            border-radius: 3px;
            transition: all 0.3s ease-in-out;
            transition-delay: 200ms;
        }
        /* Stile für das geöffnete Menü */
        .menu-custom-toggle.open .bar:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
        .menu-custom-toggle.open .bar:nth-child(2) {
            opacity: 0;
        }
        .menu-custom-toggle.open .bar:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }
    }
/* Sidebar SubItem Color Clicked/Active */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active>.m-menu__heading .m-menu__link-text,.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active>.m-menu__link .m-menu__link-text{
    color:rgb(212, 15, 20)
}
/* Sidebar SubItem backgroundColor Clicked/Active */
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active>.m-menu__heading,.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active>.m-menu__link{
    background-color:#f8f8fb
}
/* Siedebar unten backgroundColor */
.m-aside-left.m-aside-left--skin-light{
    background-color:#FFF
}
/* Header backgroundColor links und rechts vom Content */
.m-brand{
    background-color:#FFF
}
/* Header Content backgroundColor */
.m-stack.m-stack--ver.m-stack--general {
    background-color: #FFF
}
#m_aside_left_offcanvas_toggle{
    float: right;
}
#m_aside_header_menu_mobile_toggle
{
    visibility: collapse;
}
#m_aside_header_topbar_mobile_toggle{
    visibility: visible;
}


/*** Login ***/


/* Login Description */
#login-description {
    color: #fff;
}
/* Login visit Button */
#m_login_visit.btn.btn-outline-primary {
    color: #d40f14;
    border-color: #d40f14;
}
#m_login_visit.btn.btn-outline-primary:hover {
    background-color: #d40f14;
}
#m_login_visit.btn.btn-outline-primary:focus {
    background-color: #d40f14;
}
/* Login Sign In Button */
#m_login_signin_submit {
    background-color: #d40f14;
    border-color: #d40f14;
}
/* Login Sign In Button Hover */
#m_login_signin_submit:hover {
    background-color: #d40f14;
    border-color: #d40f14;
}
/* Login Sign up Button */
#m_login_signup.btn.btn-outline-primary {
    color: #d40f14;
    border-color: #d40f14;
}
#m_login_signup.btn.btn-outline-primary:hover {
    background-color: #d40f14;
}
#m_login_signup.btn.btn-outline-primary:focus {
    background-color: #d40f14;
}
/* Login Sign up Form */
#m_login_signup_submit {
    background-color: #d40f14;
    border-color: #d40f14;
}
#m_login_signup_cancel.btn.btn-outline-primary {
    color: #d40f14;
    border-color: #d40f14;
}
#m_login_signup_cancel.btn.btn-outline-primary:hover {
    background-color: #d40f14;
}
#m_login_signup_cancel.btn.btn-outline-primary:focus {
    background-color: #d40f14;
}

/* Login Forgot Password */

#m_login_forget_password_submit {
    background-color: #d40f14;
    border-color: #d40f14;
}
#m_login_forget_password_cancel.btn.btn-outline-primary {
    color: #d40f14;
    border-color: #d40f14;
}
#m_login_forget_password_cancel.btn.btn-outline-primary:hover {
    background-color: #d40f14;
}
#m_login_forget_password_cancel.btn.btn-outline-primary:focus {
    background-color: #d40f14;
}
/* Login Content */
#m_login .m-login__logo img {
    width: 100%;
    height: calc(100% - 20px);
}
/* Visit Label*/
.m-checkbox {
}

/* Login Container
.m-login.m-login--5 .m-login__wrapper-1 .m-login__contanier {
    width: 230px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem;
    background-color: rgba(255,255,255,.8);
    border-radius: 15px;
}

 TODO Nochmal angucken vor dem Merge Review
*/

/* Loading Screen */
@media (min-width: 992px) {
    .loader {
        margin: 25% 0px 0px 50%;
    }
}

/*Breakpoint Login- und Anmeldefenster zur Desktopansicht*/
@media (min-width:769px) and (max-width:1024px) {
    .m-login.m-login--5 .m-login__wrapper-1 .m-login__wrapper-1-1 .m-login__contanier .m-login__content {
        width: 100%;
        padding: 2rem 3rem
    }

    .m-login.m-login--5 .m-login__wrapper-2 .m-login__contanier {
        width: 380px;
        margin: 0 auto;
        padding: 1.5rem 1.5rem;
        background-color: rgba(255,255,255,.8);
        border-radius: 15px;
    }

    .m-login.m-login--5 .m-login__wrapper-2 .m-login__contanier .m-login__signup .m-login__form .m-login__form-action .btn {
        padding: 1.2rem 3rem;
        margin-right: 2rem
    }

    .m-login.m-login--5 .m-login__wrapper-2 .m-login__contanier .m-login__signup .m-login__form .m-login__form-action .btn:last-child {
        margin-right: 0
    }

    .m-login.m-login--5 .m-login__wrapper-2 .m-login__contanier .m-login__forget-password .m-login__form .m-login__form-action .btn {
        text-align: center;
        padding: 1.2rem 3rem;
        margin-right: 2rem
    }

    .m-login.m-login--5 .m-login__wrapper-2 .m-login__contanier .m-login__forget-password .m-login__form .m-login__form-action .btn:last-child {
        margin-right: 0
    }
}

/*Breakpoint Login- und Anmeldefenster zur Mobileansicht*/
@media (max-width:768px) {
    .m-login.m-login--5 .m-login__wrapper-1 {
        width: 100%;
        display: block;
        margin: 0 auto
    }

    .m-login.m-login--5 .m-login__wrapper-1 .m-login__wrapper-1-1 {
        padding-bottom: 0;
        margin: 0 auto
    }

    .m-login.m-login--5 .m-login__wrapper-1 .m-login__wrapper-1-1 .m-login__contanier {
        display: block;
        width: 100%
    }

    .m-login.m-login--5 .m-login__wrapper-1 .m-login__wrapper-1-1 .m-login__contanier .m-login__content {
        width: 100%
    }

    .m-login.m-login--5 .m-login__wrapper-1 .m-login__wrapper-1-1 .m-login__border {
        display: block;
        margin-top: 150px;
        padding-top: 0
    }

    .m-login.m-login--5 .m-login__wrapper-1 .m-login__wrapper-1-1 .m-login__border>div {
        height: 30px;
        background: #fff;
        width: 100%;
        -webkit-box-shadow: 0 -15px 30px -7px #f5f5f5;
        box-shadow: 0 -15px 30px -7px #f5f5f5;
        position: relative
    }

    .m-login.m-login--5 .m-login__wrapper-2 {
        width: 100%;
        display: block
    }

    .m-login.m-login--5 .m-login__wrapper-2 .m-login__contanier {
        width: 94%;
        margin: 0 3%;
        padding: 1.5rem 1.5rem;
        background-color: rgba(255,255,255,.8);
        border-radius: 15px;
    }


    .m-login.m-login--5 .m-login__wrapper-2 .m-login__contanier .m-login__signup .m-login__form .m-login__form-action .btn {
        padding: 1rem 1.95rem;
        margin-right: .5rem
    }

    .m-login.m-login--5 .m-login__wrapper-2 .m-login__contanier .m-login__signup .m-login__form .m-login__form-action .btn:last-child {
        margin-right: 0
    }

    .m-login.m-login--5 .m-login__wrapper-2 .m-login__contanier .m-login__forget-password .m-login__form .m-login__form-action .btn {
        text-align: center;
        padding: 1rem 2rem;
        margin-right: .5rem
    }

    .m-login.m-login--5 .m-login__wrapper-2 .m-login__contanier .m-login__forget-password .m-login__form .m-login__form-action .btn:last-child {
        margin-right: 0
    }
}

/*Flipeffekt für Login- und Anmeldefenster*/
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    /*
        40% {
            -webkit-transform: perspective(400px) rotateX(-20deg);
            transform: perspective(400px) rotateX(-20deg);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in
        }

        60% {
            -webkit-transform: perspective(400px) rotateX(10deg);
            transform: perspective(400px) rotateX(10deg);
            opacity: 1
        }

        80% {
            -webkit-transform: perspective(400px) rotateX(-5deg);
            transform: perspective(400px) rotateX(-5deg)
        }

     */

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }
    /*
        40% {
            -webkit-transform: perspective(400px) rotateX(-20deg);
            transform: perspective(400px) rotateX(-20deg);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in
        }

        60% {
            -webkit-transform: perspective(400px) rotateX(10deg);
            transform: perspective(400px) rotateX(10deg);
            opacity: 1
        }

        80% {
            -webkit-transform: perspective(400px) rotateX(-5deg);
            transform: perspective(400px) rotateX(-5deg)
        }

     */

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}
/*Ende Flipeffekt*/