/* Menü */

html{
    background-color: rgb(var(--color-slate-200) / var(--tw-bg-opacity));
}

.form-check-input[type="checkbox"]:not(.form-switch > [type="checkbox"], :checked) {
    border-color: rgba(var(--color-slate-400) / .75) !important;
}

.dropdown-content{
    background: #164e63;
}

html:has(body.no-js) {
    background-color: initial;
}

body:is(.no-js) {
    background-color: initial;

    &:before, 
    &:after ,
    & > *:not(noscript) {
        display: none;
    }
}

noscript {
    position: fixed;
    top: 0;
    left: 0;

    display: grid;
    width: 100%;
    height: 100%;
    place-content: center;
    
    z-index: 999;
    
    margin: 0;
    padding: 1rem;
    
    & > .alert {
        max-width: 70ch;
    }
}

@media screen and (min-width: calc(1300px)){
    .side-nav {
        width: 290px;
    }
}


/* DataTables  Suche/Filter/Pagination */


.dataTable td {
    border-bottom-width: 1px;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

table.dataTable.no-footer {
    border-bottom: 0px!important;
}

.dataTables_length{
    margin-bottom: 10px;
}

.dataTables_filter input{
    border-radius: 0.375rem!important;
    --tw-border-opacity: 1;
    border-color: rgb(var(--color-slate-200) / var(--tw-border-opacity))!important;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    margin-left:10px!important;
}

.dataTables_length select{
    box-shadow: 0px 3px 20px #0000000b;
    position: relative;
    border-radius: 0.375rem!important;
    border-color: transparent!important;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    width: 5rem;
    --tw-border-opacity: 1!important;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-top: 0.5rem!important;
    padding-bottom: 0.5rem!important;
    padding-left: 0.75rem!important;
    padding-right: 2rem!important;
}

.paginate_button.current {
    box-shadow: 0px 3px 20px #0000000b;
    position: relative;
    border-radius: 0.375rem !important;
    border-color: transparent !important;
    --tw-bg-opacity: 1;
    font-weight: 500!important;
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    --tw-text-opacity: 1;
    color: rgb(var(--color-slate-800) / var(--tw-text-opacity));
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    background: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
}

.paginate_button{
    margin-right: 0.5rem;
}

.paginate_button:hover {
    box-shadow: 0px 3px 20px #0000000b;
    position: relative;
    border-radius: 0.375rem !important;
    border-color: transparent !important;
    --tw-bg-opacity: 1;
    font-weight: 500!important;
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    --tw-text-opacity: 1;
    color: rgb(var(--color-slate-800) / var(--tw-text-opacity));
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    background: #86b79f !important;
}

.dataTables_wrapper .dataTables_paginate {
    text-align: center!important;
    float: none!important;
}

.paging_simple_numbers {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.paging_simple_numbers a, .paging_simple_numbers span{
    vertical-align: bottom;
}

@media screen and (max-width: 640px){
    .dataTables_wrapper .dataTables_filter {
        float: right!important;
    }
    .dataTables_wrapper .dataTables_length {
        float: left!important;
    }
}

@media screen and (max-width: calc(1279px)){
    .login{
        overflow: auto;
    }

}
/* Topbar */

.profilname {
    color: #fff;
    margin: auto;
    text-align: center;
    width: 100%;
    display: block;
    font-size: 15px;
    border-radius: 15px;
    border: 1px solid #fff;
    padding: 4px;
}

.notification.notification--bullet.red::before {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: -2px;
    right: 0px;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--color-danger) / var(--tw-bg-opacity));
}

.notification.notification--bullet.green::before {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: -2px;
    right: 0px;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: green;
}

/* Hauptseite */

.loadingscreen{
    margin-top: 0px;
    margin-left: 0px;
    padding-left: 0px;
    z-index: 10000000;
    transition: visibility 0s ease-in-out 0s, opacity 0.4s ease-in-out 0s;
    visibility: visible;
    opacity: 1;
    background: #000000a6;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
}

.loadingscreen svg{
    position: absolute;
    top: calc(50% + (50px / 2));
    left: calc(50% + (50px / 2));
    margin-top: -50px;
    margin-left: -50px;
    width: 50px;
    height: 50px;
}

.loadingscreen circle {
    fill: white;
}

/* schwarz Kontrast */
body.swKontrast .btn,
body.swKontrast .form-control,
body.swKontrast .form-select,
body.swKontrast .box,
body.swKontrast .content,
body.swKontrast .side-nav > ul ul::after,
body.swKontrast .side-nav > ul ul::before,
body.swKontrast .side-nav > ul > li > .side-menu.side-menu--active,
body.swKontrast .dropdown-content,
body.swKontrast .modal-content,
body.swKontrast .side-nav ul:not(.side-menu__sub-open) > li > * {
    background:#000;
    color:#fff;
    border: 1px solid #fff
}

body.swKontrast .grid {
    background:#000;
}

body.swKontrast label,
body.swKontrast .top-bar-boxed * {
    color: #fff;
    stroke: #fff;
}

body.swKontrast .side-nav > ul > li > .side-menu.side-menu--active::after{
    background-image: none!important;
}

body.swKontrast:after,
body.swKontrast:before,
.swKontrast,
body.swKontrast td,
body.swKontrast .top-bar-boxed,
body.swKontrast .top-bar-boxed::after,
body.swKontrast .top-bar-boxed::before,
body.swKontrast .dropdown-menu{
    background:#000!important;
    color:#fff!important;
    border-color: #000!important;
}

body.swKontrast .top-bar-boxed::after,
body.swKontrast .top-bar-boxed::before {
    outline: 1px solid #fff!important;
}

body.swKontrast .flex,
body.swKontrast .text-lg,
body.swKontrast .side-menu,
body.swKontrast .side-menu__icon,
body.swKontrast .side-menu__sub-icon,
body.swKontrast .side-menu__title,
body.swKontrast .lucide{
    color:white!important;
}

body.swKontrast .btn.btn-elevated-secondary:hover {
    color: #000 !important;
}

body.swKontrast .btn.btn-elevated-secondary svg path {
    transition: 200ms ease-in-out;
}

body.swKontrast .btn.btn-elevated-secondary:hover svg path {
    stroke: #000 !important;
}

/* weiß Kontrast */
body.wKontrast .btn,
body.wKontrast .form-control,
body.wKontrast .box,
body.wKontrast .content,
body.wKontrast .side-nav > ul ul::after,
body.wKontrast .side-nav > ul ul::before,
body.wKontrast .side-nav > ul > li > .side-menu.side-menu--active,
body.wKontrast .dropdown-content {
    background:#fff;
    color:#000;
    border: 1px solid #000;
}

body.wKontrast .grid {
    background:#fff;
}

body.wKontrast .dropdown-content * {
    color:#000;
    border-color: #000;
}

body.wKontrast .side-nav > ul > li > .side-menu.side-menu--active::after{
    background-image: none!important;
}

body.wKontrast:after,
body.wKontrast:before,
.wKontrast,
body.wKontrast td,
body.wKontrast .top-bar-boxed::after,
body.wKontrast .top-bar-boxed::before,
body.wKontrast .dropdown-menu{
    background:#fff!important;
    color:#000!important;
    border-color: #fff!important;
}

body.wKontrast .flex,
body.wKontrast .text-lg,
body.wKontrast .side-menu,
body.wKontrast .side-menu__icon,
body.wKontrast .side-menu__sub-icon,
body.wKontrast .side-menu__title,
body.wKontrast .profilname,
body.wKontrast .lucide{
    color:black!important;
}

body.wKontrast label,
body.wKontrast .top-bar-boxed * {
    color: #000;
    stroke: #000;
}

body.wKontrast .btn.btn-elevated-secondary:hover {
    border: 1px solid #000 !important;
}

body.login {
    padding: 1rem !important;
}

.content-container {
    min-height: calc(100vh - 2rem);
    overflow: hidden;
}

.customText{
    border: 1px dotted #fff;
    padding: 5px;
    cursor: pointer;
}

a:not(a.btn, .top-bar-boxed a, .side-nav a, td a, .dropdown-content a, a[href^="javascript:;"], .login a[href^="/"]) {
    text-decoration: underline;
}

.red{
    color:red;
}

.backgroundgray{
    background: #e8ebf0;
    height:100%;
}

[data-modal-replacer]{
    display: none!important;
}

.minheight{
    min-height:75px;
}

/* TW Hilfsklassen*/
.max-h-0 {
    max-height: 0px;
}
.max-h-px	{
    max-height: 1px;
}
.max-h-0.5	{
    max-height: 0.125rem;
} /* 2px */
.max-h-1	{
    max-height: 0.25rem;
} /* 4px */
.max-h-1.5	{
    max-height: 0.375rem;
} /* 6px */
.max-h-2	{
    max-height: 0.5rem;
} /* 8px */
.max-h-2.5	{
    max-height: 0.625rem;
} /* 10px */
.max-h-3	{
    max-height: 0.75rem;
} /* 12px */
.max-h-3.5	{
    max-height: 0.875rem;
} /* 14px */
.max-h-4	{
    max-height: 1rem;
} /* 16px */
.max-h-5	{
    max-height: 1.25rem;
} /* 20px */
.max-h-6	{
    max-height: 1.5rem;
} /* 24px */
.max-h-7	{
    max-height: 1.75rem;
} /* 28px */
.max-h-8	{
    max-height: 2rem;
} /* 32px */
.max-h-9	{
    max-height: 2.25rem;
} /* 36px */
.max-h-10	{
    max-height: 2.5rem;
} /* 40px */
.max-h-11	{
    max-height: 2.75rem;
} /* 44px */
.max-h-12	{
    max-height: 3rem;
} /* 48px */
.max-h-14	{
    max-height: 3.5rem;
} /* 56px */
.max-h-16	{
    max-height: 4rem;
} /* 64px */
.max-h-20	{
    max-height: 5rem;
} /* 80px */
.max-h-24	{
    max-height: 6rem;
} /* 96px */
.max-h-28	{
    max-height: 7rem;
} /* 112px */
.max-h-32	{
    max-height: 8rem;
} /* 128px */
.max-h-36	{
    max-height: 9rem;
} /* 144px */
.max-h-40	{
    max-height: 10rem;
} /* 160px */
.max-h-44	{
    max-height: 11rem;
} /* 176px */
.max-h-48	{
    max-height: 12rem;
} /* 192px */
.max-h-52	{
    max-height: 13rem;
} /* 208px */
.max-h-56	{
    max-height: 14rem;
} /* 224px */
.max-h-60	{
    max-height: 15rem;
} /* 240px */
.max-h-64	{
    max-height: 16rem;
} /* 256px */
.max-h-72	{
    max-height: 18rem;
} /* 288px */
.max-h-80	{
    max-height: 20rem;
} /* 320px */
.max-h-96	{
    max-height: 24rem;
} /* 384px */
.max-h-none	{
    max-height: none;
}
.max-h-full	{
    max-height: 100%;
}
.max-h-screen	{
    max-height: 100vh;
}
.max-h-min	{
    max-height: min-content;
}
.max-h-max	{
    max-height: max-content;
}
.max-h-fit	{
    max-height: fit-content;
}

.overflow-auto	{
    overflow: auto;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-clip {
    overflow: clip;
}
.overflow-visible {
    overflow: visible;
}
.overflow-scroll {
    overflow: scroll;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-auto {
    overflow-y: auto;
}
.overflow-x-hidden {
    overflow-x: hidden;
}
.overflow-y-hidden {
    overflow-y: hidden;
}
.overflow-x-clip {
    overflow-x: clip;
}
.overflow-y-clip {
    overflow-y: clip;
}
.overflow-x-visible {
    overflow-x: visible;
}
.overflow-y-visible {
    overflow-y: visible;
}
.overflow-x-scroll {
    overflow-x: scroll;
}
.overflow-y-scroll {
    overflow-y: scroll;
}

.justify-between {
    justify-content: space-between;
}

@media screen and (min-width: 640px){
    .sm\:justify-between {
        justify-content: space-between;
    }
}

@media screen and (min-width: calc(740px)){
    body{
        padding-right: 0px!important;
    }

    .right, .left{
        max-width:50%;
    }

    .btn-grid > button,
    .btn-grid > a {
        margin: 0 0 0.5rem 0;
    }

    .md\:justify-between {
        justify-content: space-between;
    }
}
@media (max-width: calc(740px)){
    body {
        padding-right: 0.75rem!important;
    }

    .right, .left{
        justify-content: center;
        margin-top:10px;
    }

    .btn-grid > button,
    .btn-grid > a {
        margin: 0 0 0.5rem 0;
    }

    .vertragsbuttons{
        display:grid!important;
        text-align:center;
    }

    .vertragsbuttons div{
        margin-right: 0px!important;
        margin-top:2px;
    }
}

@media (max-width: calc(920px)){
    #zaehlerstand-melden .grid > div {
        grid-column: span 12 / span 12;
    }
}