/* Login */

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

html,
body {
    min-height: 100%;
}

/* verhindert Scrollen der Seite wenn Modal geöffnet ist */
body:has(.modal.show) {
    overflow-y: hidden;
    pointer-events: none;

    & .modal:is(.show) {
        pointer-events: auto;
    }
}

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

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

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

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

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

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;
    }
}

/* Menü */

@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;
}

.toastify.on + .toastify-top {
    transform: translateY(calc(100% + 1.75rem)) !important;
}

@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-x: auto;
        overflow-y: auto;
    }

    .login:has(.modal.show) {
        overflow-y: hidden;
    }
}

/* Topbar */

.profilname {
    color: #fff;
    margin: auto;
    text-align: center;
    width: 100%;
    display: block;
    font-size: 12px;
    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: 1000000000000;
    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-color:#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,
body.swKontrast .modalnachrichtinfo, 
body.swKontrast .text-primary,
body.swKontrast .text-slate-600 {
    color:white!important;
}

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

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

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

body.swKontrast form#vertrag .alert.alert-secondary {
    background-color: #000 !important;
    border-color: #fff !important;
    color: #fff !important
}

body.swKontrast form#vertrag .alert.btn-primary {
    background-color: #fff !important;
    border-color: #000 !important;
    color: #000 !important
}

body.swKontrast form#vertrag .alert.btn-primary .text-lg {
    color: #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;
}

/* Vertragswesen */

#step1-produkt,
#step2-produkt{
    cursor: pointer;
}

#rahmenvertrag, #tarifAuswahl{
    display:none;
}

#info-modal-preview{
    z-index: 100000;
}

.red{
    color:red;
}

.tarifuser{
    cursor: pointer;
}

#searchresult, #searchresultstreets{
    position: absolute;
    background: #fff;
    z-index: 999;
    padding:10px;
}

#searchresult p, #searchresultstreets p{
    cursor:pointer;
}

.hiddenimportant{
    display:none!important;
}

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

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

/* Tarifrechner */
#content_tarif_finden .form-inline {
    display: flex;
}

.minheight{
    min-height:75px;
}

/* TW Hilfsklassen*/

.invisible {
    visibility: hidden;
}

.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;
}

.col-span-10{
    grid-column: span 10 / span 10;
}

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

.gap-1 {
    gap: 0.25rem;
}

@media screen and (min-width: 640px){
    .sm\:flex-col{
        flex-direction: column;
    }

    .sm\:flex-row{
        flex-direction: row;
    }

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

    .sm\:grid-cols-1{
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .sm\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .sm\:grid-cols-4{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .sm\:grid-cols-5{
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .sm\:grid-cols-6{
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .sm\:grid-cols-7{
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .sm\:grid-cols-8{
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    .sm\:grid-cols-9{
        grid-template-columns: repeat(9, minmax(0, 1fr));
    }
    .sm\:grid-cols-10{
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
    .sm\:grid-cols-11{
        grid-template-columns: repeat(11, minmax(0, 1fr));
    }
    .sm\:grid-cols-12{
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .sm\:col-span-1{
        grid-column: span 1 / span 1;
    }
    .sm\:col-span-2{
        grid-column: span 2 / span 2;
    }
    .sm\:col-span-3{
        grid-column: span 3 / span 3;
    }
    .sm\:col-span-4{
        grid-column: span 4 / span 4;
    }
    .sm\:col-span-5{
        grid-column: span 5 / span 5;
    }
    .sm\:col-span-6{
        grid-column: span 6 / span 6;
    }
    .sm\:col-span-7{
        grid-column: span 7 / span 7;
    }
    .sm\:col-span-8{
        grid-column: span 8 / span 8;
    }
    .sm\:col-span-9{
        grid-column: span 9 / span 9;
    }
    .sm\:col-span-10{
        grid-column: span 10 / span 10;
    }
    .sm\:col-span-11{
        grid-column: span 11 / span 11;
    }
    .sm\:col-span-12{
        grid-column: span 12 / span 12;
    }

    .sm\:flex-col-reverse{
        flex-direction: column-reverse;
    }

    .sm\:w-40{
        width: 10rem;
    }

    .sm\:w-52{
        width: 13rem;
    }

    .sm\:w-56{
        width: 14rem;
    }

    .sm\:w-60{
        width: 15rem;
    }
}

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

    body.login {
        padding: 0.75rem 2rem !important;
    }

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

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

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

    .md\:flex-col{
        flex-direction: column;
    }

    .md\:flex-wor{
        flex-direction: row;
    }

    .md\:justify-between {
        justify-content: space-between;
    }
    
    .md\:grid-cols-1{
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .md\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .md\:grid-cols-4{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .md\:grid-cols-5{
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .md\:grid-cols-6{
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .md\:grid-cols-7{
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .md\:grid-cols-8{
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    .md\:grid-cols-9{
        grid-template-columns: repeat(9, minmax(0, 1fr));
    }
    .md\:grid-cols-10{
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
    .md\:grid-cols-11{
        grid-template-columns: repeat(11, minmax(0, 1fr));
    }
    .md\:grid-cols-12{
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    
    .md\:col-span-1{
        grid-column: span 1 / span 1;
    }
    .md\:col-span-2{
        grid-column: span 2 / span 2;
    }
    .md\:col-span-3{
        grid-column: span 3 / span 3;
    }
    .md\:col-span-4{
        grid-column: span 4 / span 4;
    }
    .md\:col-span-5{
        grid-column: span 5 / span 5;
    }
    .md\:col-span-6{
        grid-column: span 6 / span 6;
    }
    .md\:col-span-7{
        grid-column: span 7 / span 7;
    }
    .md\:col-span-8{
        grid-column: span 8 / span 8;
    }
    .md\:col-span-9{
        grid-column: span 9 / span 9;
    }
    .md\:col-span-10{
        grid-column: span 10 / span 10;
    }
    .md\:col-span-11{
        grid-column: span 11 / span 11;
    }
    .md\:col-span-12{
        grid-column: span 12 / span 12;
    }

    .md\:flex-col-reverse{
        flex-direction: column-reverse;
    }
    
    .md\:w-auto{
        width: auto;
    }

    .md\:w-40{
        width: 10rem;
    }

    .md\:w-52{
        width: 13rem;
    }

    .md\:w-56{
        width: 14rem;
    }

    .md\:w-60{
        width: 15rem;
    }

    .md\:ml-2{
        margin-left: 0.5rem;
    }

    .md\:ml-3{
        margin-left: 0.75rem;
    }
}

@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;
    }
}

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

@media (min-width: 1024px){
    .lg\:flex-col{
        flex-direction: column;
    }

    .lg\:flex-row{
        flex-direction: row;
    }

    .lg\:grid-cols-1{
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .lg\:grid-cols-2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-3{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:grid-cols-5{
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .lg\:grid-cols-6{
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .lg\:grid-cols-7{
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .lg\:grid-cols-8{
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    .lg\:grid-cols-9{
        grid-template-columns: repeat(9, minmax(0, 1fr));
    }
    .lg\:grid-cols-10{
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
    .lg\:grid-cols-11{
        grid-template-columns: repeat(11, minmax(0, 1fr));
    }
    .lg\:grid-cols-12{
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .lg\:col-span-1{
        grid-column: span 1 / span 1;
    }
    .lg\:col-span-2{
        grid-column: span 2 / span 2;
    }
    .lg\:col-span-3{
        grid-column: span 3 / span 3;
    }
    .lg\:col-span-4{
        grid-column: span 4 / span 4;
    }
    .lg\:col-span-5{
        grid-column: span 5 / span 5;
    }
    .lg\:col-span-6{
        grid-column: span 6 / span 6;
    }
    .lg\:col-span-7{
        grid-column: span 7 / span 7;
    }
    .lg\:col-span-8{
        grid-column: span 8 / span 8;
    }
    .lg\:col-span-9{
        grid-column: span 9 / span 9;
    }
    .lg\:col-span-10{
        grid-column: span 10 / span 10;
    }
    .lg\:col-span-11{
        grid-column: span 11 / span 11;
    }
    .lg\:col-span-12{
        grid-column: span 12 / span 12;
    }

    .lg\:flex-col-reverse{
        flex-direction: column-reverse;
    }

    .lg\:w-40{
        width: 10rem;
    }
    
    .lg\:w-52{
        width: 13rem;
    }

    .lg\:w-56{
        width: 14rem;
    }

    .lg\:w-60{
        width: 15rem;
    }
}

@media (min-width: 1280px){
    .xl\:col-span-1{
        grid-column: span 1 / span 1;
    }
    .xl\:col-span-2{
        grid-column: span 2 / span 2;
    }
    .xl\:col-span-3{
        grid-column: span 3 / span 3;
    }
    .xl\:col-span-4{
        grid-column: span 4 / span 4;
    }
    .xl\:col-span-5{
        grid-column: span 5 / span 5;
    }
    .xl\:col-span-6{
        grid-column: span 6 / span 6;
    }
    .xl\:col-span-7{
        grid-column: span 7 / span 7;
    }
    .xl\:col-span-8{
        grid-column: span 8 / span 8;
    }
    .xl\:col-span-9{
        grid-column: span 9 / span 9;
    }
    .xl\:col-span-10{
        grid-column: span 10 / span 10;
    }
    .xl\:col-span-11{
        grid-column: span 11 / span 11;
    }
    .xl\:col-span-12{
        grid-column: span 12 / span 12;
    }

    .xl\:flex-col-reverse{
        flex-direction: column-reverse;
    }

    .xl\:w-40{
        width: 10rem;
    }

    .xl\:w-52{
        width: 13rem;
    }

    .xl\:w-56{
        width: 14rem;
    }


    .xl\:w-60{
        width: 15rem;
    }
}

@media (min-width: 1536px){
    .\32xl\:col-span-1{
        grid-column: span 1 / span 1;
    }
    .\32xl\:col-span-2{
        grid-column: span 2 / span 2;
    }
    .\32xl\:col-span-3{
        grid-column: span 3 / span 3;
    }
    .\32xl\:col-span-4{
        grid-column: span 4 / span 4;
    }
    .\32xl\:col-span-5{
        grid-column: span 5 / span 5;
    }
    .\32xl\:col-span-6{
        grid-column: span 6 / span 6;
    }
    .\32xl\:col-span-7{
        grid-column: span 7 / span 7;
    }
    .\32xl\:col-span-8{
        grid-column: span 8 / span 8;
    }
    .\32xl\:col-span-9{
        grid-column: span 9 / span 9;
    }
    .\32xl\:col-span-10{
        grid-column: span 10 / span 10;
    }
    .\32xl\:col-span-11{
        grid-column: span 11 / span 11;
    }
    .\32xl\:col-span-12{
        grid-column: span 12 / span 12;
    }
}

.timerdiv{
    height:20px;
}