.page {
    position: relative;
    min-height: calc(100% - 65px);
    background: #bdbcbc;
}
.text-warning{
    color:#f19408;
}
.layout-full .page {
    height: 100%;
    padding: 0;
    margin: 0!important;
    background-color: #bdbcbc;
}
.page-login-v3:before{
    background-color: #bdbcbc;
}
.page-login-v3 .panel{
    border: 4px solid #f19408;
    border-radius: 10px;
}
.site-menu-item.active, animsition-link {
    background: #f19408;
    color:#ffffff;
}
#widgetUserList .card-header .overlay-background {
    background-color: rgb(236 121 2 / 75%);
}
.site-navbar {
    background-color: #015780;
}
.site-navbar .navbar-header .navbar-brand{
    color:#015780;
}
.navbar-default .navbar-toolbar .nav-link {
    display: block;
    color: #ffffff;
}
.navbar-default .navbar-toolbar .nav-link:focus, .navbar-default .navbar-toolbar .nav-link:hover {
    color: #ffffff;
    background-color: #f19408;
    max-height: 60px;
}
.navbar-default .navbar-toolbar .nav-link.active, .navbar-default .navbar-toolbar .nav-link.active:focus, .navbar-default .navbar-toolbar .nav-link.active:hover, .navbar-default .navbar-toolbar>.active>.nav-link, .navbar-default .navbar-toolbar>.active>.nav-link:focus, .navbar-default .navbar-toolbar>.active>.nav-link:hover {
    color: #ffffff;
    background-color: #f19408;
}
.site-menu>.site-menu-item>a {
    padding: 0 20px;
    line-height: 46px;
}
.navbar-default .hamburger .hamburger-bar, .navbar-default .hamburger::after, .navbar-default .hamburger::before {
    background: #ffffff;
}
.global{
    height: 80%;
}
.site-sidebar.slidePanel.slidePanel-left, .site-sidebar.slidePanel.slidePanel-right {
    width: 0px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.slidePanel-show {
    visibility: visible;
    width: 300px !important;
}
.lvl1-sidePanel-show {
    visibility: visible;
    width: 40% !important;
}
.lvl2-sidePanel-show {
    visibility: visible;
    width: 100% !important;
    overflow: scroll;
}

.lvl3-sidePanel-show {
    visibility: visible;
    width: 50% !important;
}

.animsition-link i{
    font-size: 25px;
    color:#ffffff;
}
.site-menu-title{
    margin-bottom: 10px;
    color:#ffffff;
}
.panel-heading{
    background-color: #f19408;
    border-top-left-radius: unset;
    border-top-right-radius: unset;
}
.panel-title{
color:#ffffff;
}
.checkbox-custom{
border-bottom: 1px solid;
padding-bottom: 10px;
}
.dropdown-menu-media>.dropdown-menu-footer {
background-color: #f19408;
border-top: 1px solid #e0e0e0;
}
.dropdown-menu-media>.dropdown-menu-footer>a {
padding: 15px 20px!important;
margin: 0;
color: #ffffff!important;
}
.warning{
background-color: #f19408;

}
.nav-tabs .nav-item.open .nav-link, .nav-tabs .nav-item.open .nav-link:focus, .nav-tabs .nav-item.open .nav-link:hover, .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-item.show .nav-link:focus, .nav-tabs .nav-item.show .nav-link:hover, .nav-tabs .nav-link.active, .nav-tabs .nav-link.active:focus, .nav-tabs .nav-link.active:hover{
background-color: #f19408;
border-color: transparent;
border-bottom-color: #f19408;
    color:#ffffff;
}
.page-item.active .page-link{
background-color: #f19408 ;
border-color: #f19408;
}
.page-item:first-child .page-link {
margin-left: 0;
border-top-left-radius: 1.215rem;
border-bottom-left-radius: 1.215rem;
}
.page-item:last-child .page-link {
border-top-right-radius: 1.215rem;
border-bottom-right-radius: 1.215rem;
}
.clara-modal-header{
background-color: #f19408 ;
}
.clara-modal-content{
border: 4px solid #f19408;
border-radius: 10px;
}
.clara-modal-body{
margin-top: 15px;
}
.clara-modal-title{
color: #ffffff;
}
.text-help-sm{
display: block;
margin-top: 7px;
color: #b5b5b5;
font-size: 10px;
}
.swal2-container {
z-index: 9998;
}
.swal2-container.swal2-center{
z-index: 9998;
}
.custom-swal-class {
    overflow-x: visible;
    overflow-y: visible;
    max-height: 550px !important;
    min-height: 550px !important;
}
.page-aside .list-group-item.active{
    background-color: #f19408;
    color: #ffffff;
}
.page-aside .list-group-item.active>.icon{
    color: #ffffff;
}
.ClaraMenuIcon{
    position: absolute;
    width: 40px;
    top: 3px;
    left: 10px;
}
.ClaraMenuTitle{
    margin-left: 45px;
}
.example{
    border: unset;
}
.dashBoxIcon{
    width: 80px;
    position: relative;
    float: left;
    top: 15px;
    left: 29px;
    margin-right: 40px;
}
.indexBoxTitleIcon{
    width: 55px;
    float: left;
    position: relative;
    top: 2px;
    left: 30px !important;
    margin-right: 40px !important;
}

.fc-timegrid-slots tr{
    height: 40px;
}
.fc-event-main:hover{
    cursor: pointer;
}
.fc-button .fc .fc-button-primary{
    background-color: #f19408;
}
.calc .nav-tabs .nav-item.open .nav-link, .nav-tabs .nav-item.open .nav-link:focus, .nav-tabs .nav-item.open .nav-link:hover, .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-item.show .nav-link:focus, .nav-tabs .nav-item.show .nav-link:hover, .nav-tabs .nav-link.active, .nav-tabs .nav-link.active:focus, .nav-tabs .nav-link.active:hover{
    background-color: #f1940b;
    color: #ffffff;
}
.calc .nav-tabs-inverse .nav-tabs-solid .nav-link.active, .nav-tabs-inverse .nav-tabs-solid .nav-link.active:focus, .nav-tabs-inverse .nav-tabs-solid .nav-link.active:hover{
    background-color: #f1940b;
    color: #ffffff;
}
.calc .nav-tabs-inverse .nav-tabs-solid .nav-link.active{
    background-color: #f1940b;
    color: #ffffff;
}
.nav-tabs-inverse .nav-tabs-solid .nav-link.active, .nav-tabs-inverse .nav-tabs-solid .nav-link.active:focus, .nav-tabs-inverse .nav-tabs-solid .nav-link.active:hover{
    background-color: #f1940b;
    color: #ffffff;
}
.pearl.active .pearl-icon, .pearl.active .pearl-number, .pearl.current .pearl-icon, .pearl.current .pearl-number {
    color: #f1940b;
    background-color: #fff;
    border-color: #f1940b;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}
.pearl.done .pearl-icon, .pearl.done .pearl-number {
    color: #fff;
    background-color: #f1940b;
    border-color: #f1940b;
}
.pearl.done::after, .pearl.done::before {
    background-color: #f1940b;
}
.pearl.active::after, .pearl.active::before, .pearl.current::after, .pearl.current::before {
    background-color: #f1940b;
}
.panel-group .panel-title:focus, .panel-group .panel-title:hover {
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}
.artikelIconSelector{
    width: 30px;
}
.artikelIconSelector:hover{
    width: 45px;
}
table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected{
    background-color: #f19409;
}

.page-item.active .page-link {
    background-color: lightgrey !important;
    border: 1px solid black;
}
.page-link {
    color: black !important;
}
.owl-carousel .owl-nav .owl-next:before {
    content: ">";
    color: black;
    font-size: 35px;
    font-weight: bold;
    top: 40px;
    position: relative;
}
.owl-carousel .owl-nav .owl-prev:before {
    content: "<";
    color: black;
    font-size: 35px;
    font-weight: bold;
    top: 40px;
    position: relative;
}
.badge-warning {
    color: #212121;
    background-color: #f19409;
}
.loader-overlay {
    position: unset;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
    height: 100%;
    background: #3949ab;
}
.modal-dialog {
    width: auto;
    /* margin: 30px auto; */
}
.bgimage{
    background-image: url("../images/welcomebg.jpg");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.checkbox-custom {
    border-bottom: unset;
    padding-bottom: 10px;
}
.nav-tabs .nav-link {
    color: #757575;
    transition: .25s;
}
.nav-tabs-line .nav-link:hover {
    border-bottom-color: #f19409;
}
.owl-clara-calendar-img{
    height: 400px;
    margin-right: 10px;
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
    ;
}
.owl-carousel .innerOwlImage {
    position: relative;
}

.owl-carousel .innerOwlDescription {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgb(194, 120, 0);
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.owl-carousel .owl-item:hover .innerOwlDescription {
    opacity: 1;
}
.owl-clara-calendar-img {
    position: relative;
}

.innerOwlButtons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center; /* Vertikale Ausrichtung in der Mitte hinzufügen */
    gap: 10px; /* Abstand zwischen den beiden Links anpassen, wenn gewünscht */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.innerOwlButtons a {
    display: block; /* Um sicherzustellen, dass die Links nebeneinander stehen */
}

.owl-clara-calendar-img:hover .innerOwlButtons {
    opacity: 1;
}
html body .panel-heading .panel-actions{
    width: calc(28% - 35px) !important;
    display: inline-block;
    text-align: right;
}
html body .panel-heading .panel-title{
    width: calc(70% - 35px) !important;
    display: inline-block;
}
.taskOWLOuter {
    height: 300px;
    border: 1px solid #f29407;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden; /* Verhindert, dass sich der Inhalt bei der Animation ausdehnt */
    transition: all 0.3s ease; /* Fügt eine 0.3s Transition mit einer sanften Beschleunigungsfunktion hinzu */

}
.taskOWLOuter:hover {
    transform: scale(0.95); /* Vergrößert die Box um 5% bei Hover */
    background-color: lightyellow;
}
.taskheader {
    display: flex;
    justify-content: space-between; /* Platziert die inneren Elemente am Anfang und am Ende des Containers */
    align-items: center; /* Zentriert die inneren Elemente vertikal */
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #f29407;
    padding: 10px;
    box-sizing: border-box; /* Neue Eigenschaft hinzugefügt */
}

.taskheadericon {
    order: 1; /* Ändert die Reihenfolge des Icons, um es rechts zu platzieren */
}
.taskheaderActionIcon{
display: flex;
}
.taskcontent {
    flex: 1; /* Damit der Inhalt den verfügbaren Platz gleichmäßig aufteilt */
    padding: 5px;
}

.taskfooter {
    width: 100%; /* Füllt den verfügbaren Platz aus */
}

.color-circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 10px;
}
.modal-content .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100%;
}
.site-navbar .navbar-container {
    max-height: 60px;
}
.panel.accordion {
    transition: height 0.5s ease-in-out;
}

.panel.accordion.is-collapse {
    /*  height: 0; oder ein anderer minimaler Wert, der Ihren Bedürfnissen entspricht */
}
@media only screen and (max-width: 768px) {
    .slidePanel tbody {
        width: 10px !important;
        max-width: 100%;
        min-width: 100%;
        overflow: scroll;
        display: block;
    }
    .sidePanel table {
        width: 100% !important;
        /* min-width: 10px !important; */
        max-width: 100% !important;
        /* width: 10px !important; */
        display: inline;
        overflow: hidden;
        /* background: red; */
    }

    .dropdown-menu.show {
        display: block;
        left: 0px !important;
        margin-left: 0;
        overflow: hidden !important;
        left: 0px !important;
        right: 0;
        margin-right: 0;
        width: 100% !important;
        position: relative !important;
        transform: unset !important;
        max-width: unset !important;
        min-width: unset !important;
    }

    .indexBoxTitleIcon {
        width: 30px; /* Ändere die Breite für kleinere Bildschirme */
        float: left; /* Aufhebung des Floats für die Anpassung an schmalere Bildschirme */
        top:16px;
    }
    html body .fc .fc-toolbar{
        display: block !important;
        text-align: center !important;
    }
    html body .fc-toolbar-chunk {
        width: 100% !important;
        display: block !important;
        margin-top:10px !important;
    }

    html body .panel-heading .panel-actions{
        vertical-align: top;
        padding-top: 15px;
    }
    .nav.navbar-toolbar.navbar-right.navbar-toolbar-right{
        /* background: #004263 !important; */
        width: 100% !important;
        left: 0 !important;
        margin-left: -15px !important;
        transition: none  !important;
        height: 60px !important;
        transition: all 9s ease-in-out !important;
    }

    .site-navbar-small .site-navbar .navbar-toolbar>li>a {
        padding-right: 0 !important;
        padding-bottom: 11px !important;
    }


    .avatar img {
        border-radius: 100% !important;
        background: #FFF;
        padding-top: 5px;
        padding-bottom: 7px;
    }

    .nav-link.navbar-avatar.waves-effect.waves-light.waves-round{
        font-weight: bold;
        line-height: 35px;
        padding-top: 12px;
        padding-bottom: 12px;
        padding-right: 20px !important;
        padding-bottom: 12px !important;
        padding-top: 12px !important;
    }

    .navbar-avatar .avatar {
        margin-left: 10px;
    }

    .nav.navbar-toolbar:not(.navbar-right){
        display:none !important;
    }

    .nav.navbar-toolbar.navbar-right .dropdown-menu.show{
        top: 0 !important;
    }


    .navbar-default .navbar-toolbar>.open>.nav-link, .navbar-default .navbar-toolbar>.open>.nav-link:focus, .navbar-default .navbar-toolbar>.open>.nav-link:hover, .navbar-default .navbar-toolbar>.show>.nav-link, .navbar-default .navbar-toolbar>.show>.nav-link:focus, .navbar-default .navbar-toolbar>.show>.nav-link:hover {
        color: #ffffff !important;
        background-color: rgb(242 148 7) !important;
    }

    #pvproducts {
        table-layout: fixed; /* Stellt sicher, dass die Spaltenbreiten beibehalten werden */
        width: 100%; /* Setzt die Gesamtbreite der Tabelle */
    }

    #pvproducts td {
        word-break: break-all; /* Erlaubt das Umbruch von langen Wörtern */
        overflow-wrap: break-word; /* Alternative zu word-wrap */
    }

    #pvproducts tr td:nth-child(1) {
        width: 1%; /* Breite der ersten Spalte (Checkbox) */
        white-space: nowrap; /* Verhindert Umbruch in der Checkbox-Spalte */
    }

    #pvproducts tr td:nth-child(2) {
        width: 50%; /* Breite der zweiten Spalte */
    }

    #pvproducts tr td:nth-child(3),
    #pvproducts tr td:nth-child(4) {
        width: 24.5%; /* Breite der dritten und vierten Spalte */
    }

}