/**
* Above the Fold Parts
* Please add everything which is not important for the first screen on loading below!
*/
/* montserrat-regular - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/montserrat-v21-latin/montserrat-v21-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./fonts/montserrat-v21-latin/montserrat-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/montserrat-v21-latin/montserrat-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/montserrat-v21-latin/montserrat-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('./fonts/montserrat-v21-latin/montserrat-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/montserrat-v21-latin/montserrat-v21-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-600 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('./fonts/montserrat-v21-latin/montserrat-v21-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./fonts/montserrat-v21-latin/montserrat-v21-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/montserrat-v21-latin/montserrat-v21-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/montserrat-v21-latin/montserrat-v21-latin-600.woff') format('woff'), /* Modern Browsers */
         url('./fonts/montserrat-v21-latin/montserrat-v21-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/montserrat-v21-latin/montserrat-v21-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
  }


.container.error_container {
    position: fixed;
    z-index: 9998;
}

/**
* Copy Properties of .container for .container-sidebar.
* Otherwise there could be an error with the corrisponding pwa.js
*/
#main_content_current > .container-sidebar,
#main_content_next > .container-sidebar {
    width:100%;
    /* padding-right:var(--bs-gutter-x,.75rem); */
    /* padding-left:var(--bs-gutter-x,.75rem); */
    margin-right:auto;
    margin-left:auto;
}

#main_content_current .container.force-full-width {
    --container-force-full-width-margin: 1em;
    --ls-container-sidebar-width: 250px;
    --container-force-full-width-padding: var(--container-force-full-width-margin);


    position: relative;
    width: 100%;
    max-width: calc(100vw - var(--ls-sidebar-width));
    /* left: calc(1em + var(--ls-sidebar-width)); */
    left: var(--ls-sidebar-width);
    margin-left: var(--container-force-full-width-margin);
    padding-right: var(--container-force-full-width-padding);
}
#main_content_current .container.force-full-width.has-sidebar-left {
    max-width: calc(100vw - var(--ls-sidebar-width) - var(--ls-container-sidebar-width) - var(--container-force-full-width-margin) - var(--container-force-full-width-padding) );
    left: calc(var(--ls-sidebar-width) + var(--ls-container-sidebar-width));
}
#main_content_current .container.force-full-width.has-sidebar-right {
    max-width: calc(100vw - var(--ls-sidebar-width) - var(--ls-container-sidebar-width) - var(--container-force-full-width-margin) - var(--container-force-full-width-padding) );
}
#main_content_current .container.force-full-width.has-sidebar-right {
    max-width: calc(100vw - var(--ls-sidebar-width) - var(--ls-container-sidebar-width) - var(--ls-container-sidebar-width) - var(--container-force-full-width-margin) - var(--container-force-full-width-padding) );
}

.alert.alert_fixed {
    position: absolute;
    top: 20px;
    z-index: 10000;
    width: 80%;
    left: 10%;
}
.alert.alert_fixed p {
    color:#fff;
    margin-bottom:0;
}
.alert-danger {
    background-color: var(--ls-danger);
    color: var(--ls-white);
    border-color: var(--ls-danger);
}
[class^="ri-"], [class*=" ri-"] {
    display: inline-block;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}
::-webkit-scrollbar {
    width:5px;
    height: 4px;
}
.sidenav-wrapper::-webkit-scrollbar {
    width: 2px;
}
::-webkit-scrollbar-thumb {
    background: rgb(0 0 0);
    height: 1px !important;
    border-radius: 25px !important;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 6px inset !important;
}
::-webkit-scrollbar-track {
    background: rgb(173 173 173 / 10%);
}



/**
* Core Parts
* This is important for the first screen loaded
*/
/* .arrow_icon_right::before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f105";
    position:absolute;
    right:0;
} */


.sidenav-nav li a, h1, h2, h3, h4, h5, h6, .card-header {
    font-family: Montserrat;
}


.header-content {
    z-index:3;
}
#main_content_next {
    position:absolute;
    z-index:2;
    width:100%;
    top:0;
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
    display:none;

}
#main_content_next.ontop {
    display:block;
}
.btn-block {
    width:100%;
}
.loginpage {
    background-color: #fff;
}
[data-theme="dark"] body .loginpage {
    background-color: var(--ls-body-bg);
}
.loginpage .card {
    box-shadow: inherit;
}
.loginpage .footer-nav-area {
    display: none;
}
#preloader {
    z-index: 999999999;
}
.subpreloader {
    z-index: 999999999;
}

.remix {
    width: 18px;
    height: 18px;
}
/**
* Logged In Part!
* Not important for google page speed! Can be loaded on public above the fold
*/
.loggedin .logo-img.brand {
    background-color: var(--ls-sidenav-bg);
    border-bottom: 1px solid #ebebeb;
    box-shadow: 1px 1px 15px rgb(0 0 0 / 7%);
    height:50px;
    padding:4px 0px;
}

.loggedin .logo-img.brand img {
    height:100%;
    width:auto;
}

.footer-nav {
    overflow-x: auto;
}

[data-theme="dark"] #sidebarleftpanel li.active > a {
    font-weight:600;
    background-color:transparent;
    color:var(--ls-sidebar-active);
}
#sidebarleftpanel li.active > a {
    font-weight:600;
    background-color:var(--ls-sidenav-bg);
    border-right:5px solid var(--ls-sidebar-active);
}

[data-theme="dark"] #sidebarleftpanel li.active > a {
    font-weight:600;
    background-color:#202124;
}
body.member ul.public_menu,
body.admin ul.public_menu  {
    display: none!important;
}
body.admin ul.lspwa--admin_menu,
body.admin #loggedinfootermenu {
    display: flex!important;
}
body.member ul.lspwa--member_menu,
body.member #loggedinfootermenu  {
    display: flex!important;
}

/* hide navbar if needed */
body.hidemenu #sidenavWrapper,
body.hidenavbar #sidenavWrapper,
/* hide navbar on auth if forcedlogin */
body.forcedlogin.auth #sidenavWrapper {
    display: none !important;
}
/* hide header-navbar if needed */
body.hideheadermenu .header-navbar,
body.hidenavbar .header-navbar,
/* hide header-navbar on auth if forcedlogin */
body.forcedlogin.auth .header-navbar {
    display: none !important;
}
/* hide footer-navbar if needed */
body.hidefootermenu .footer-nav,
body.hidenavbar .footer-nav,
/* hide footer-navbar on auth if forcedlogin */
body.forcedlogin.auth .footer-nav {
    display: none !important;
}

/* hide on auth if forcedlogin */
body.forcedlogin.auth .footer-nav-area,
body.forcedlogin.auth .header-area {
    display: none !important;
}
body.forcedlogin.auth .container,
body.forcedlogin.auth .page-content-wrapper.py-3 {
    padding: 0 !important;
}


body.auth.login #main-content,
body.auth.register #main-content,
body.auth.register_done #main-content,
body.auth.forgot_password #main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.auth.login #main_content_current > .container ,
body.auth.register #main_content_current > .container ,
body.auth.register_done #main_content_current > .container ,
body.auth.forgot_password #main_content_current > .container {
    margin-left: 0!important;
}

body.auth #ls_error_alert,
body.auth #ls_success_alert,
body.auth #ls_info_alert {
    margin-top: 50px;
    margin-bottom: 62px;
}

body.auth .container {
    left: unset;
    right: 0px;
  } 


/* Notification notifications */
.notification-dropdown {
    min-width: 320px;;
}

.ls_help, .ls-help {
  color: var(--ls-secondary) !important;
  font-size: .875em;
}



.list-group-striped .list-group-item:nth-child(odd) {
    background-color: #f6f6f6;
}
[data-theme="dark"] .list-group-striped .list-group-item:nth-child(odd) {
    background-color: #222121;
}

.striped .stripe:nth-child(even) {
    background-color: #f6f6f6;
}
[data-theme="dark"] .striped .stripe:nth-child(even) {
    background-color: #222121;
}


.notification-indicator {
    content: '';
    position: absolute;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: var(--ls-text-danger);
    animation: .9s infinite beatHeart;
    transform-origin: center;
}

.animation--beatHeart {
    animation: .9s infinite beatHeart;
}

.animation--blinker {
    --animation--blinker-speed: 1s;
    animation: blinker var(--animation--blinker-speed) linear infinite;
}
.animation--blinker[data-speed="slower"]{
    --animation--blinker-speed: 2.5s;
}

.card, .btn, .form-control, .list-group, .alert, .form-select, .tox-tinymce { border-radius: 15px; }
.tox-tinymce,.fc .fc-button { border-radius: 15px !important; }
.fc-direction-ltr .fc-button-group>.fc-button:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.fc-direction-ltr .fc-button-group>.fc-button:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}


.card-header, .card-header span {
    background:var(--ls-card-header);
    position: relative;
    padding: 20px 23px;
    background: -webkit-linear-gradient(var(--ls-gradient-success-start), var(--ls-gradient-success-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.card-header span {
    padding-left:0;
}

.ls-display,.fc-toolbar-title {
    background: -webkit-linear-gradient(var(--ls-gradient-success-start), var(--ls-gradient-success-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-header > * {
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
}

.card-header:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(45deg, var(--ls-gradient-success-start) 19%, var(--ls-gradient-success-end) 92%);
    bottom: 0;
    left: 0;
}


/* Fix for modals */
.modal-cleanup-class {
    left:0;
}



.form-switch.form-switch-sm {
    margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
  }
  
  .form-switch.form-switch-sm .form-check-input {
    height: 1rem;
    width: calc(1rem + 0.75rem);
    border-radius: 2rem;
  }
  
  .form-switch.form-switch-md {
    margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
  }
  
  .form-switch.form-switch-md .form-check-input {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 3rem;
  }
  
  .form-switch.form-switch-lg {
    margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
  }
  
  .form-switch.form-switch-lg .form-check-input {
    height: 2rem;
    width: calc(3rem + 0.75rem);
    border-radius: 4rem;
  }

  .form-switch.form-switch-lg .form-check-label {
      padding-top:0.5rem;
      margin-left:10px;
  }
  
  .form-switch.form-switch-xl {
    margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
  }
  
  .form-switch.form-switch-xl .form-check-input {
    height: 2.5rem;
    width: calc(4rem + 0.75rem);
    border-radius: 5rem;
  }

@keyframes beatHeart {
    0% {
        transform: scale(0.9);
    }
    25% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(0.9);
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0.9);
    }
}

@keyframes blinker {
    50% {
        opacity: 0;
      }
}


.ls-gradient-success-bg {
    background: linear-gradient(45deg, var(--ls-gradient-success-start) 19%, var(--ls-gradient-success-end) 92%);
}

.alert.alert-warning::before {
    content: '\EE59';
    font-family: remixicon!important;
    top: 2px;
    position: relative;
}

.ls_info_icon::before {
    content: '\EE59';
    font-family: remixicon!important;
    top: 2px;
    position: relative;
}

.content-sidebar-right .sidebar-title {
    margin-top:10px;
    position:relative;
    font-size: 1rem;
    font-weight: 600;
}

.content-sidebar-right .sidebar-title::after {
    position: absolute;
    content: '';
    width: 40%;
    height: 1px;

    bottom: 0;
    left: 0;
    background: rgb(201,201,201);
    background: linear-gradient(45deg, rgba(201,201,201,1) 46%, rgba(201,201,201,0) 60%);
}

.btn-save::before {
    content: '\F0B3';
    font-family: remixicon!important;
    top: 2px;
    position: relative;
}


.user-profile-wrapper {

   
    overflow: hidden;

    margin-left:10px;

}

.fc .fc-button-primary {
    color: #fff;
    background-color:var(--ls-primary) !important;
    border-color: var(--ls-primary) !important; 
}
.fc .fc-button-primary:hover {
    color: #fff;
    background-color:var(--ls-blue-hover) !important;
    border-color: var(--ls-blue-hover) !important; 
}


.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active {
    color: #fff;
    
    background-color:var(--ls-success) !important;
    border-color: var(--ls-success) !important; 
    
}

.fc-daygrid-day:hover {
    background:var(--ls-card-background);
    cursor:pointer;
}

.cursor-pointer {
    cursor:pointer;
}

[data-theme="dark"] .tox .tox-toolbar, [data-theme="dark"] .tox .tox-toolbar__overflow, [data-theme="dark"] .tox .tox-toolbar__primary {
    background-color:#171717 !important;
}

.btn-checkbox-empty::before {
    content: '\EB7D';
    font-family: remixicon!important;
    top: 2px;
    position: relative;
}
.btn-checkbox::before {
    content: '\EB81';
    font-family: remixicon!important;
    top: 2px;
    position: relative;
}

:root {
--fc-border-color: #4c4b4b;
    
}

.member.profile #profile_picture {
    width:200px;
    height:auto;
    border:1px solid var(--ls-secondary);
    margin-bottom:25px;
}




/* in einer list group sind die ersten list group items mit runden borders oben links/rechts */
.list-group-item:first-child {
	border-top-left-radius: 0;
    border-top-right-radius: 0;
}


/* form check hook. eg in todolists */
.form-check-hook {
    background-image : unset;
    opacity: 0;
    transition: transform .3s ease-in-out , -webkit-transform .3s ease-in-out;
    text-decoration: none;
    display: none;
}

input[type="checkbox"].form-check-hook+label {
    font-family: 'remixicon' !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    position: relative;
    top: 5px;
    text-decoration: none;

    font-size: 1.5em;
}
input[type="checkbox"].form-check-hook+label::before {
    color: var(--ls-dark);
    content: "\eb7f";
}
[data-theme="dark"] input[type="checkbox"].form-check-hook+label::before {
    color: var(--ls-light);
}
input[type="checkbox"].form-check-hook:checked+label::before {
    color: var(--ls-success);
    content: "\eb85";
}
input[type="checkbox"].form-check-hook.form-check-hook-rounded+label::before {
    content: "\eb7d";
}
input[type="checkbox"].form-check-hook.form-check-hook-rounded:checked+label::before {
    content: "\eb81";
}


/* Border colors */
.border-secondary-hover { border-color: var(--ls-secondary-hover) !important; }
.border-success-hover { border-color: var(--ls-success-hover) !important; }
.border-purple { border-color: var(--ls-purple) !important; }
.border-blue { border-color: var(--ls-blue) !important; }
.border-blue-hover { border-color: var(--ls-blue-hover) !important; }
.border-black { border-color: var(--ls-black) !important; }
.border-white { border-color: var(--ls-white) !important; }
.border-card { border-color: var(--ls-card-background) !important; }
.border-body { border-color: var(--ls--body-bg) !important; }
.border-sidenav { border-color: var(--ls-sidenav-bg) !important; }

/* Text colors */
.text-secondary-hover { color: var(--ls-secondary-hover) !important; }
.text-success-hover { color: var(--ls-success-hover) !important; }
.text-purple { color: var(--ls-purple) !important; }
.text-blue { color: var(--ls-blue) !important; }
.text-blue-hover { color: var(--ls-blue-hover) !important; }
.text-black { color: var(--ls-black) !important; }
.text-white { color: var(--ls-white) !important; }
/* .text-card { color: var(--ls-card-background) !important; } */
.text-body { color: var(--ls--body-bg) !important; }
.text-sidenav { color: var(--ls-sidenav-a) !important; }

/* background colors */
.bg-secondary-hover { background-color: var(--ls-secondary-hover) !important; }
.bg-success-hover { background-color: var(--ls-success-hover) !important; }
.bg-purple { background-color: var(--ls-purple) !important; }
.bg-blue { background-color: var(--ls-blue) !important; }
.bg-blue-hover { background-color: var(--ls-blue-hover) !important; }
.bg-black { background-color: var(--ls-black) !important; }
.bg-white { background-color: var(--ls-white) !important; }
.bg-card { background-color: var(--ls-card-background) !important; }
.bg-body { background-color: var(--ls--body-bg) !important; }
.bg-sidenav { background-color: var(--ls-sidenav-bg) !important; }

@media only screen and (max-device-height: 1366px) {

    /*kann media query only && max width iPad Pro z.b. und muss auf Font-Size 16px gesetzt sein, da alles darunter bei iOS dann in das input Feld "hüpft" bzw. "reinzoomt"*/
    button, 
    input, 
    optgroup, 
    select, 
    textarea,
    .form-control {
        font-size: 16px;
        color: #073984; /* SET A DEFAULT COLOR TO PREVENT IOS15 BLUE COLOR */
    }
}

/**
 * Login Page placeholder erklären es ja super. Labels also Überflüssig
 */
.loginpage label {
	display: none;
}
.loginpage h4 {
    margin-bottom: 1rem;
}



/* break new line in flex */
.flex-break {
    flex-basis: 100%;
    /* height: 0; */
}




/**
Media Queries needs to be on the end of the File
*/

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    body.auth .container {
      max-width: 100%; 
    } 
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767.98px) {}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 991.98px) {}

/* Large devices (desktops, 992px and up) */
@media (max-width: 1199.98px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .sidenav-wrapper {
        left: 0;
    }
    .modal-cleanup-class {
        /* 285px: width of .sidenav-wrapper */
        width: calc(100% - var(--ls-sidebar-width));
        left: var(--ls-sidebar-width);
    }
    #main_content_current > .container,
    #main_content_current > .container-sidebar,
    #main_content_next > .container,
    #main_content_next > .container-sidebar,
    #headerArea > .container,
    #footerNav > .container {
        margin-left: 283px;
    }
    .loginpage #main_content_current > .container {
        margin-left: auto;
    }


    .loginpage .page-content-wrapper {
        margin-top:0;
        margin-bottom:0;
       
    }

    .loginpage label {
        margin-bottom:5px;
    }

    .loginpage .login_logo {
        max-width:150px;
        height:auto;
    }

    .loginpage .login-form {
        min-width:100%;
    }

    #affanNavbarToggler {
        display: none;
    }

    /* show content even if trigger is set to hide */
    #ls_view_sidebar_left,
    #ls_view_sidebar_right {
        display: block;
    }
    #goBack {
        display:none;
    }

    .flex-break-sm-none {
        flex-basis: unset;
    }
    
}



/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1500px) {
    #main_content_current > .container,
    #main_content_current > .container-sidebar,
    #main_content_next > .container,
    #main_content_next > .container-sidebar,
    #headerArea > .container,
    #footerNav > .container {
        margin-left: auto;
    }

    /* actually the .desktop_subnav mediaquery just need to be 1450px */
    .card.desktop_subnav.d-none + div {
        margin-left: calc(345px - 10%);
    }
    .card.desktop_subnav {
        position: fixed;
        top: 40px;
        height: 100%;
        margin-left: 0;
        padding: 0;
        padding-bottom: 92px; /*Because of Footer*/
        left: 286px;
        border: 0;
        border-radius: 0;
        display: inline-block!important;
        width:250px;
        z-index:100;
        background:var(--ls-sidenav-right-bg);
        border-left: 1px solid #e3e3e5;
    }
    .card.desktop_subnav.hidden{
        display: none!important;
    }
    body[data-hnlosml] .card.desktop_subnav.left {
        left: 0;
    }
    body[data-hnlosml] .navbar--toggler,
    body[data-hnlosml] .sidenav-wrapper,
    body[data-hnlosml] #sidenavWrapper {
        display: none !important;
    }

    /* div ~ .card.desktop_subnav.d-none {
        margin-right: calc(345px - 10%);
    } */
    .card.desktop_subnav.right {
        left: unset;
        right:0px;
        width:250px;
        overflow:auto;
       
    }
}
@media (min-width: 1820px) {
    .card.desktop_subnav.d-none + div {
        margin-left: 10%;
    }
}