/*
    (c) 2009-2024 SOL-System Sp. z o.o.
    All rights reserved (wszelkie prawa zastrzeżone).
*/

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Arial', 'Ubuntu', Sans-Serif;
    overflow: auto;
    margin: 0;
    background: rgba(240, 240, 240, 1);
}

/* utility classes */

.sol-card {
    background: white;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 10px;
}

.with-border {
    border: 1px solid #e0e0e0;
}

.with-border-bottom {
    border-bottom: 1px solid #e0e0e0;
}

.with-border-white {
    border: 1px solid white;
}

.with-shadow {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}

.in-content {
    width: 90%;
    max-width: 90%;
    min-width: 90%;
}

.with-gap-bottom {
    margin-bottom: 20px;
}

.with-double-gap-bottom {
    margin-bottom: 40px;
}

.with-gap-top {
    margin-top: 20px;
}

.with-double-gap-top {
    margin-top: 40px;
}

.with-half-gap-top {
    margin-top: 10px;
}

.with-gap-left {
    margin-left: 20px;
}

.with-double-gap-left {
    margin-left: 40px;
}

.with-gap-right {
    margin-right: 20px;
}

.with-double-gap-right {
    margin-right: 40px;
}

.with-gap-all {
    margin: 20px;
}

.with-margin-lr-auto {
    margin-left: auto;
    margin-right: auto;
}

.align-to-end {
    align-self: flex-end;
}

.rounded {
    border-radius: 8px;
}

.flex-row-space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    gap: 20px;
}

.flex-row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 20px;
}

.flex-row-left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
    gap: 20px;
}

.flex-align-start {
    align-items: flex-start;
    align-content: flext-start;
}

.flex-column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 20px;
}

.flex-column-space-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.flex-column-center-stretch {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
    gap: 20px;
}

.flex-row-center-stretch {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
    gap: 20px;
}

.with-wrap {
    flex-wrap: wrap;
}

.flex-without-gap {
    gap: 0;
}

.flex-with-half-gap {
    gap: 10;
}

.flex-break {
    flex-basis: 100%;
    height: 0;
}

.min-width-50 {
    min-width: 50%;
}

.min-width-5em {
    min-width: 5em;
}

.min-width-7em {
    min-width: 7em;
}

.min-width-40 {
    min-width: 40%;
}

.width-100 {
    width: 100%;
}

.width-90 {
    width: 90%;
}

.width-80 {
    width: 80%;
}

.width-50 {
    width: 50%;
}

.width-40 {
    width: 40%;
}

.max-width-10 {
    max-width: 10em;
}

.height-100 {
    height: 100%;
}

.pad-top {
    padding-top: 0.5em;
}

.pad-bottom {
    padding-bottom: 0.5em;
}

.pad-bottom-20 {
    padding-bottom: 20px;
}

.pad-left {
    padding-left: 1em;
}

.pad-right {
    padding-right: 1em;
}

.pad-10 {
    padding: 10px;
}

.pad-lr-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.pad-20 {
    padding: 20px;
}

.pad-30 {
    padding: 30px;
}

.flex-break {
    flex-basis: 100%;
}

.flex-basis-50 {
    flex-basis: 50%;
}

.flex-basis-40 {
    flex-basis: 40%;
}

.flex-basis-30 {
    flex-basis: 30%;
}

.flex-grow {
    flex-grow: 1;
}

.flex-stretch-1 {
    flex-grow: 1;
    flex-shrink: 1;
}

.bold {
    font-weight: bold;
}

.color-primary {
    color: var(--color-primary);
}

.color-header {
    color: var(--color-header);
}

.color-link {
    color: var(--color-link);
}

.color-highlight {
    color: var(--color-highlight);
}

.color-black {
    color: black !important;
}

.color-steelblue {
    color: steelblue !important;
}

.color-red {
    color: red !important;
}

.cursor-pointer {
    cursor: pointer;
}

.font-large {
    font-size: large;
}

.font-110 {
    font-size: 110%;
}

.font-120 {
    font-size: 120%;
}

.font-130 {
    font-size: 130%;
}

.font-150 {
    font-size: 150%;
}

.text-shadow {
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}

.box-shadow {
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}

.like-button {
    background: white;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.like-button:hover {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
    text-decoration: none;
    background: #f8f8f8;
}

.like-button:active {
    box-shadow: none;
    text-decoration: none;
    transform: translateY(3px);
    text-decoration: none;
}

.like-button img {
    height: 1em;
    vertical-align: middle;
}

.like-button img.doublesize {
    height: 2em;
}

.display-block {
    display: block;
}

.light_orange {
    background: var(--color-row-background);
}

.with-horiz-lines td {
    border-bottom: 1px solid #e0e0e0;
}

.without-overflow {
    overflow: hidden;
}

.with-scroll {
    overflow: auto;
}

.without-padding {
    padding: 0;
}

details.fold summary {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer;
}

details.fold img.chevron {
    height: 1em;
    margin-left: 2em;
}

details.fold:not([open]) img.chevron {
    animation: rot0 .3s ease-in-out;
}

details.fold[open] img.chevron {
    animation: rot90 .3s ease-in-out;
    transform: rotate(90deg);
}

details.fold[open] summary~* {
    animation: sweep .3s ease-out;
}

@keyframes sweep {
    0% {
        opacity: 0;
        margin-top: -80px;
    }

    100% {
        opacity: 1;
        margin-top: 0px;
    }
}

@keyframes rot90 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(90deg);
    }
}

@keyframes rot0 {
    0% {
        transform: rotate(90deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

select {
    border-radius: 4px;
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    background-color: white;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

select:hover {
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
}

select:active {
    box-shadow: none;
    transform: translateY(3px);
}

div#middle {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
}

#content {
    width: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    background: whitesmoke;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:visited {
    color: var(--color-link);
}

a:hover {
    text-decoration: underline;
}

/* Header */

div#top {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: stretch;
    gap: 20px;
    padding: 20px;
}

div.top-msg {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

div#header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    align-content: center;
    justify-content: space-between;
    align-items: stretch;
    flex-grow: 0;
}

div#top-data {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 20px;
    flex-grow: 1;
}

div#sm-logo {
    flex-grow: 1;
    margin-top: 10px;
    margin-bottom: 10px;
}

div.wyloguj {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
}

a.wyloguj {
    font-weight: bold;
    color: var(--color-link);
}

#menu,
#bottom,
#top {
    background-color: whitesmoke;
}


div.rezygnacja button.rezygnacja {
    font-weight: bold;
    cursor: pointer;
    color: var(--color-link);
}

p.back_to_cathegories {
    margin-top: 20px;
    margin-bottom: 20px;
}

p.back_to_cathegories a {
    font-weight: bold;
}

div.sumanal table {
    width: 100%;
}

div.sumanal table td:nth-child(2) {
    text-align: right;
    padding-left: 1em;
}

.razem {
    font-weight: bold;
}

/* Mobile */
@media only screen and (max-width: 992px) {
    body {
        font-size: 12pt;
        padding: 0;
    }

    input {
        font-size: 1em;
    }

    .in-content {
        width: 95%;
    }

    .s-width-100 {
        min-width: 100%;
        width: 100%;
    }

    div#layout {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 20px;
    }

    #menu {
        display: none;
    }

    .navmenu {
        display: block;
        float: left;
        margin-right: 20px;
        position: fixed;
        left: 10px;
        top: 10px;
        z-index: 99;
        max-height: 88vh;
        overflow-x: hidden;
        overflow-y: auto;
        box-shadow: 0pt 2pt 4pt #888888;
        border-radius: 8px;
    }

    .navmenu h2 {
        display: none;
    }

    .navmenu-button {
        background-color: var(--color-hamburger);
        color: white;
        text-align: center;
        padding-left: 10pt;
        padding-right: 10pt;
        padding-top: 6pt;
        padding-bottom: 6pt;
        cursor: pointer;
        margin: 0px;
        width: 21pt;
        transition: 0.5s;
        border-radius: 8px;
    }

    .change.navmenu-button {
        width: 85vw;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .bar1,
    .bar2,
    .bar3 {
        width: 21pt;
        height: 4pt;
        background-color: white;
        margin: 4pt 0;
        transition: 0.5s;
    }

    .change .bar1 {
        -webkit-transform: translate(0pt, 8pt) rotate(-45deg);
        transform: translate(0pt, 8pt) rotate(-45deg);
    }

    .change .bar2 {
        opacity: 0;
    }

    .change .bar3 {
        -webkit-transform: translate(0pt, -8pt) rotate(45deg);
        transform: translate(0pt, -8pt) rotate(45deg);
    }

    .navmenu-content {
        padding-left: 1em;
        padding-right: 1em;
        padding-bottom: 10pt;
        padding-top: 0;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
        background-color: var(--color-hamburger);
        color: white;
        box-shadow: 0pt 2pt 4pt #888888;
        transition: 0.5s;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        font-size: 120%;
        font-weight: normal;
        width: 100%;
    }

    .navmenu-content.change {
        opacity: 0;
        display: none;
    }

    .navmenu-content a {
        background-color: var(--color-hamburger);
        color: white;
        text-decoration: none;
    }

    .navmenu-content a:hover {
        background-color: var(--color-hamburger);
        color: white;
        text-decoration: underline;
    }

    .navmenu-content ul {
        list-style-type: none;
    }

    .navmenu-content ul li {
        margin-bottom: 1em;
        margin-top: 0pt;
    }

    .navmenu-content ul.nested.active {
        margin-top: 1em;
        margin-left: 2em;
    }

    .navmenu-content h2 {
        display: none;
    }

    .navmenu ul li {
        cursor: pointer;
        background-color: var(--color-hamburger);
        color: white;
    }

    .print_btn {
        display: none;
    }

    .navmenu li[menu="yes"]:hover {
        text-decoration: underline;
    }

    .navmenu ul li.selected {
        font-weight: bold;
        list-style-type: disc;
    }

    .doklok-menu-opis-nowe {
        font-style: italic;
    }

    .navmenu .m_selected a {
        text-decoration: underline;
        font-style: italic;
    }

    #logoFirmy {
        max-width: 90%;
        max-height: 90%;
    }

    /* Footer */

    #footer {
        width: 100%;
        text-align: center;
        font-size: 0.8em;
    }

    /* Naliczenia */

    table.naliczenia tr.t_header {
        padding-top: 1em;
        padding-bottom: 1em;
        vertical-align: top;
    }

    table.naliczenia tr[sum="yes"] {
        vertical-align: bottom;
        border-top: 1px solid #e0e0e0;
    }

    table.naliczenia tr[sum="yes"] td {
        font-size: 1.1em;
    }

    table.naliczenia tr td {
        padding: 0.5em 0 0.5em 0;
    }

    table.naliczenia tr td.pobierzPDF {
        padding: 0.5em;
    }

    table.naliczenia tr td:nth-child(2) {
        text-align: right;
    }

    table.naliczenia td:last-child {
        text-align: right;
    }

    .nal_fold td:first-child:before {
        content: url('./../img/plus.png')" ";
        padding-left: 2pt;
    }

    .nal_unfold td:first-child:before {
        content: url('./../img/minus.png')" ";
        padding-left: 2pt;
    }

    .nal_fold:hover,
    .nal_unfold:hover {
        cursor: pointer;
    }

    /* Naliczenia szczegolowe */

    div.ext_nal_info {
        padding: 0;
        margin: 0;
        color: #666;
    }

    /* Wpłaty */

    table.wplaty tr.t_header {
        vertical-align: top;
    }

    table.wplaty tr[sum="yes"] {
        vertical-align: bottom;
        border-top: 1px solid #e0e0e0;
    }

    table.wplaty tr[sum="yes"] td {
        font-size: 1.1em;
    }

    table.wplaty tr td {
        padding-left: 0.5em;
        padding-right: 0.5em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        text-align: left;
    }

    table.wplaty tr td:nth-child(1) {
        min-width: 8em;
    }

    table.wplaty tr td:nth-child(2) {
        text-align: right;
    }

    table.inner_wpl {
        margin-top: 5pt;
        margin-bottom: 5pt;
        text-align: left;
    }

    table.inner_wpl tr td {
        text-align: left !important;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 2em;
    }

    div.link_zawiadomienie {
        text-align: center;
        margin-top: 10pt;
        margin-bottom: 30pt;
    }

    /* Faktury i korekty */

    table#faktury caption {
        margin-top: 20pt;
    }

    table#korekty caption {
        margin-top: 20pt;
    }

    table#faktury tr td:nth-child(n+3) {
        text-align: right;
    }

    table#korekty tr td:nth-child(n+3) {
        text-align: right;
    }

    /* Syntetyka */

    table#syntetyka {
        text-align: left;
    }

    table#syntetyka tr td:first-child {
        text-align: left;
    }

    table#syntetyka tr td:nth-child(2) {
        text-align: left;
    }

    table#syntetyka tr td {
        text-align: right;
    }

    table#syntetyka tr td:last-child.negative {
        color: red;
    }

    table#syntetyka tr td.liczbowe {
        text-align: right;
    }

    table#syntetyka tr.miesiac td:first-child {
        min-width: 7em;
    }

    table#syntetyka tr td {
        padding: 0 0.2em 0 0.2em;
        word-wrap: break-word;
    }

    td.woda_rozliczenie a {
        display: block;
    }

    table.zad_nier_krotnosci {
        width: 100%;
    }

    td.zad_nier_val {
        text-align: right;
        font-weight: bold;
        padding-left: 2em;
    }

    table.zad_nier_krotnosci td {
        border-bottom: 1px solid #e0e0e0;
        padding-left: 0.5em;
        padding-right: 0.5em;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
    }

    div.konfiguracja {
        margin: 0 auto;
    }

    .pwd_bad {
        font-size: small;
        color: red;
        margin-left: calc(40% + 20px);
    }

    table.odczyt_wody {
        border: none;
        padding: 0.2em;
        width: 100%;
        margin-bottom: 1em;
        margin-top: 1em;
    }

    table.odczyt_wody td {
        border: none;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    table.wodomierzeZW td {
        border: 1px solid white;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    table.wodomierzeCW td {
        border: 1px solid white;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    #info-zm-oplat {
        overflow: auto;
    }

    span.btn {
        display: block;
        border: 1pt dotted black;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 1em;
        padding-right: 1em;
        margin-top: 2em;
        margin-bottom: 2em;
        background-color: white;
    }

    div#lista_kategorii {
        width: 100%;
    }

    .dk-tel {
        display: block;
        font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Arial', 'Ubuntu', Sans-Serif;
        font-size: 12pt;
        border-radius: 3pt;
        padding-top: 2pt;
        padding-bottom: 2pt;
        padding-left: 0.5em;
        padding-right: 0.5em;
        border: 1px solid #ccc;
        width: 80%;
        margin-left: 2em;
        margin-bottom: 0.5em;
    }

    .dk-email {
        display: block;
        width: 80%;
        font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Arial', 'Ubuntu', Sans-Serif;
        font-size: 12pt;
        border-radius: 3pt;
        padding-top: 2pt;
        padding-bottom: 2pt;
        padding-left: 0.5em;
        padding-right: 0.5em;
        border: 1px solid #ccc;
        margin-left: 2em;
    }

    table.ceny_wody td.ceny_wody_nazwa {
        padding-left: 0.5em;
        padding-right: 0.5em;
        text-align: left;
    }

    table.ceny_wody td.ceny_wody_cena {
        text-align: right;
        padding-right: 0.5em;
    }

    table.ceny_wody td.ceny_wody_data {
        text-align: right;
        padding-right: 0.5em;
    }

    table.ceny_wody {
        border: 0px;
        padding: 0px;
        width: 100%;
    }

    table.kartabud-dane,
    table.kartabud-co,
    table.kartabud-cw {
        border: none;
        border-collapse: collapse;
        margin: 1em auto;
        width: 100%;
        background-color: white;
    }

    div.soldok-kategoria {
        width: calc(90% + 20px);
    }

    #glosowanie_naglowek {
        text-align: center;
        font-size: 120%;
        font-weight: bold;
        margin-bottom: 1em;
        margin-top: 0.5em;
    }

    #glosowanie_tresc {
        margin-left: 5%;
        margin-right: 5%;
        max-width: 90%;
        overflow: scroll;
        padding: 1em 2em;
    }

    #glosowanie_dol {
        margin-top: 1em;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
    }

    #glosowanie_dol.glosowanie_info {
        margin-top: 2em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        text-align: center;
        font-size: 110%;
        font-weight: bold;
        column-gap: 0.5em;
    }

    .glosowanie-przycisk {
        width: 90%;
    }

    .glosowanie_active {
        font-style: italic;
        color: yellow;
    }

    #zadl-kl-container {
        margin-left: 2%;
        margin-right: 2%;
        margin-top: 2em;
    }

    #zadl-kl-stannadzien {
        margin-left: 1em;
        margin-top: 1em;
    }

    #zadl-kl-stannadzien span.zadl-kl-data {
        margin-left: 0.5em;
        font-weight: bold;
    }

    #zadl-kl-tab-kl {
        margin-top: 2em;
    }

    #zadl-kl-tab-kl tr td {
        min-width: 5em;
        padding: 0.5em 0.5em;
    }

    #zadl-kl-tab-kl tr td:nth-of-type(2) {
        text-align: right;
    }

    #zadl-kl-tab-kl tr.razem td {
        border-top: 1px solid lightgray;
    }

    #zadl-kl-tab-kl tr.zadl-kl-klatka td {
        border-top: 1px solid #eee;
    }

    #zadl-kl-tab-kl tr.header td {
        border-bottom: 1px solid lightgray;
        font-style: italic;
    }

    #zadl-kl-tab-bud tr td {
        min-width: 5em;
        padding: 0.5em 0.5em;
    }

    #zadl-kl-tab-bud tr td:nth-of-type(2) {
        text-align: right;
        font-weight: bold;
    }

}

/* Mobile */


/* Desktop */
@media only screen and (min-width: 992px) {
    body {
        font-size: 10pt;
    }

    div#layout {
        margin-left: auto;
        margin-right: auto;
        max-width: 80rem;
        width: 90%;
        margin-top: 2rem;
        margin-bottom: 2rem;
        padding: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 20px;
    }

    .navmenu {
        display: none;
    }

    #content {
        min-width: 450pt;
    }

    #sidebar {
        width: 20em;
        min-width: 100px;
    }

    #menu {
        width: 22em;
    }

    #menu ul {
        margin: 0;
        padding: 0 0 0 0;
        list-style: none;
        line-height: normal;
    }

    #menu li li[menu="yes"] {
        margin: 10px 0;
        padding: 10px 20px;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        background: white;
        font-weight: bold;
        border: 1px solid lightgray;
        transition: all 0.2s ease;
    }

    #menu li li[menu="yes"].selected {
        box-shadow: none;
        border: 1px solid var(--color-highlight);
    }

    #menu li li[menu="yes"]:not(.selected):hover {
        cursor: pointer;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
        transform: translateY(-3px);
        background: #f8f8f8;
    }

    #menu li li[menu="yes"]:not(.selected):active {
        box-shadow: none;
        transform: translateY(3px);
    }

    #menu h2 {
        padding: 5pt 5pt;
        border-bottom: 1pt solid rgba(0, 0, 0, 0.3);
        font-size: 130%;
        color: var(--color-header)
    }

    #menu h3 {
        font-size: 77%;
        color: #D4C792;
    }

    #menu p {
        margin: 0;
        line-height: normal;
        color: #D4C792;
    }

    #menu a {
        margin-left: 2em;
        border: none;
        text-decoration: none;
        color: #222222;
        cursor: pointer;
    }

    #menu a:hover {
        text-decoration: underline;
        font-weight: bold;
        border: none;
    }

    #menu a:visited {
        text-decoration: none;
    }

    .selected:before {
        padding-right: 4pt;
    }

    #menu .m_selected a {
        color: var(--color-highlight);
    }

    #logoFirmy {
        max-width: 40vw;
        max-height: 9rem;
    }

    /* Footer */

    #footer {
        width: 100%;
        text-align: center;
        font-size: 0.8em;
    }

    table.naliczenia {
        min-width: 375pt;
        width: 450pt;
        max-width: 450pt;
    }

    table.inner_nal {
        width: 350pt;
        margin-top: 5pt;
        margin-bottom: 5pt;
    }

    /* Naliczenia */

    table.naliczenia tr.t_header {
        height: 25pt;
        vertical-align: top;
    }

    table.naliczenia tr[sum="yes"] {
        height: 25pt;
        vertical-align: bottom;
        border-top: 1px solid #e0e0e0;
    }

    table.naliczenia tr[sum="yes"] td {
        font-size: 1.1em;
    }

    table.naliczenia tr td {
        padding: 1pt 0 1pt 0;
    }

    table.naliczenia tr td.pobierzPDF {
        padding: 1em 0;
    }

    table.naliczenia tr td:nth-child(2) {
        text-align: right;
    }

    table.naliczenia td:last-child {
        text-align: right;
    }

    .nal_fold td:first-child:before {
        content: url('./../img/plus.png')" ";
        padding-left: 2pt;
    }

    .nal_unfold td:first-child:before {
        content: url('./../img/minus.png')" ";
        padding-left: 2pt;
    }

    .nal_fold:hover,
    .nal_unfold:hover {
        cursor: pointer;
    }

    /* Naliczenia szczegolowe */

    div.ext_nal_info {
        padding: 0;
        margin: 0;
    }

    /* Wpłaty */

    table.wplaty {
        min-width: 375pt;
        width: 450pt;
        max-width: 450pt;
    }

    table.wplaty tr.t_header {
        height: 25pt;
        vertical-align: top;
    }

    table.wplaty tr[sum="yes"] {
        height: 25pt;
        vertical-align: bottom;
        border-top: 1px solid #e0e0e0;
    }

    table.wplaty tr[sum="yes"] td {
        font-size: 1.1em;
    }

    table.wplaty tr td {
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 0.1em;
        padding-bottom: 0.1em;
        min-width: 70pt;
    }

    table.wplaty tr td {
        text-align: left;
    }

    table.wplaty tr td:nth-child(1) {
        width: 8em;
    }

    table.wplaty tr td:nth-child(2) {
        text-align: right;
    }

    table.inner_wpl {
        margin-top: 5pt;
        margin-bottom: 5pt;
        text-align: left;
    }

    table.inner_wpl tr td {
        text-align: left !important;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 2em;
    }

    div.link_zawiadomienie {
        text-align: center;
        margin-top: 10pt;
        margin-bottom: 30pt;
    }

    /* Faktury i korekty */

    table#faktury caption {
        margin-top: 20pt;
    }

    table#korekty caption {
        margin-top: 20pt;
    }

    table#faktury,
    table#korekty {
        width: 375pt;
    }

    table#faktury tr td:nth-child(n+3) {
        text-align: right;
    }

    table#korekty tr td:nth-child(n+3) {
        text-align: right;
    }

    /* Syntetyka */

    table#syntetyka {
        min-width: 375pt;
        text-align: left;
    }

    table#syntetyka tr td:first-child {
        width: 5em;
        text-align: left;
    }

    table#syntetyka tr td:nth-child(2) {
        text-align: left;
    }

    table#syntetyka tr td:nth-child(n+3) {
        min-width: 9em;
    }

    table#syntetyka tr td {
        text-align: right;
    }

    table#syntetyka tr td:last-child.negative {
        color: red;
    }

    table#syntetyka tr td.liczbowe {
        text-align: right;
        width: 7em;
    }

    table#syntetyka tr.miesiac {
        height: 25pt;
    }

    table#syntetyka tr.miesiac td:first-child {
        min-width: 5em;
        width: 8em;
        padding-right: 0.5em;
    }

    table#syntetyka tr td {
        padding: 0pt 2pt 0pt 2pt;
    }

    td.zad_nier_val {
        min-width: 6em;
        text-align: right;
        font-weight: bold;
        padding-left: 2em;
    }

    table.zad_nier_krotnosci td {
        border-bottom: 1px solid #e0e0e0;
        padding-left: 2em;
        padding-right: 2em;
        min-width: 10em;
        padding-top: 0.3em;
        padding-bottom: 0.3em;
    }

    .pwd_bad {
        font-size: small;
        color: red;
    }

    table.odczyt_wody {
        border: none;
        padding: 0.5em;
        width: 100%;
        margin-bottom: 1em;
        margin-top: 1em;
    }

    table.odczyt_wody td {
        border: 1px solid red;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 1em;
        padding-right: 1em;
    }

    table.wodomierzeZW td {
        border: 1pt solid white;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
        padding-left: 1em;
        padding-right: 1em;
    }

    table.wodomierzeCW td {
        border: 1pt solid white;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
        padding-left: 1em;
        padding-right: 1em;
    }

    .doklok-menu-opis-nowe {
        font-weight: bold;
        color: red;
    }

    span.btn {
        border: 1pt dotted black;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        padding-left: 1em;
        padding-right: 1em;
        margin-top: 2em;
        margin-bottom: 2em;
        background-color: white;
    }

    p#naglowek_kategorii {
        margin-left: 4em;
    }

    div.soldok-kategoria {
        width: calc(90% + 20px);
    }

    .dk-tel {
        font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Arial', 'Ubuntu', Sans-Serif;
        font-size: 12pt;
        border-radius: 3pt;
        padding-top: 2pt;
        padding-bottom: 2pt;
        padding-left: 0.5em;
        padding-right: 0.5em;
        border: 1px solid #ccc;
        width: 20%;
        margin-left: 2em;
    }

    .dk-email {
        font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Arial', 'Ubuntu', Sans-Serif;
        font-size: 12pt;
        border-radius: 3pt;
        padding-top: 2pt;
        padding-bottom: 2pt;
        padding-left: 0.5em;
        padding-right: 0.5em;
        border: 1px solid #ccc;
        width: 40%;
        margin-left: 2em;
    }

    table.ceny_wody td.ceny_wody_nazwa {
        padding-left: 2em;
        padding-right: 2em;
        text-align: left;
    }

    table.ceny_wody td.ceny_wody_cena {
        text-align: right;
        padding-right: 2em;
    }

    table.ceny_wody td.ceny_wody_data {
        text-align: right;
        padding-right: 2em;
    }

    table.ceny_wody {
        border: 0px;
        padding: 0px;
        width: 90%;
    }

    table.kartabud-dane,
    table.kartabud-co,
    table.kartabud-cw {
        border: none;
        border-collapse: collapse;
        margin: 1em auto;
        width: 90%;
        background-color: white;
    }

    #pol_kto_placi {
        width: 70%;
    }

    #redirDiv {
        width: 70%;
    }

    #glosowanie_naglowek {
        text-align: center;
        font-size: 120%;
        font-weight: bold;
        margin-bottom: 1em;
        margin-top: 0.5em;
    }

    #glosowanie_tresc {
        margin-left: 5%;
        margin-right: 5%;
        max-height: 60vh;
        overflow: scroll;
        padding: 1em 5em;
    }

    #glosowanie_dol {
        margin-top: 1em;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        row-gap: 1em;
        width: 100%;
    }

    #glosowanie_dol.glosowanie_info {
        margin-top: 2em;
        font-size: 110%;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        row-gap: 1em;
        column-gap: 0.5em;
        width: 100%;
    }

    .glosowanie-przycisk {
        min-width: 20%;
    }

    .glosowanie_active {
        color: red;
    }

    #zadl-kl-container {
        margin-top: 2em;
        padding: 2em 4em;
    }

    #zadl-kl-stannadzien {
        margin-left: 2em;
        margin-top: 1em;
    }

    #zadl-kl-stannadzien span.zadl-kl-data {
        margin-left: 1.5em;
        font-weight: bold;
    }

    #zadl-kl-tab-kl {
        margin-top: 2em;
    }

    #zadl-kl-tab-kl tr td {
        min-width: 15em;
        padding: 0.5em 2em;
    }

    #zadl-kl-tab-kl tr td:nth-of-type(2) {
        text-align: right;
    }

    #zadl-kl-tab-kl tr.razem td {
        border-top: 1px solid lightgray;
    }

    #zadl-kl-tab-kl tr.zadl-kl-klatka td {
        border-top: 1px solid #eee;
    }

    #zadl-kl-tab-kl tr.header td {
        border-bottom: 1px solid lightgray;
        font-style: italic;
    }

    #zadl-kl-tab-bud tr td {
        min-width: 15em;
        padding: 0.5em 2em;
    }

    #zadl-kl-tab-bud tr td:nth-of-type(2) {
        text-align: right;
        font-weight: bold;
    }
}

/* Desktop */

/* General rules */

h1,
h2 {
    text-align: center;
    margin-bottom: 1em;
    font-size: large;
}

h1 {
    color: var(--color-header);
    font-size: 150%;
}

h3.rejestr {
    font-size: large;
    margin-top: 3em;
    margin-bottom: 1em;
    border-bottom: 1pt solid green;
    padding-left: 2em;
    text-align: center;
    background-color: #ccffcc;
}

div.brakdanych {
    margin-top: 2em;
    text-align: center;
    font-weight: bold;
}

div.chart-container {
    width: 100%;
}

hr.naliczenia {
    color: gray;
    background-color: gray;
    height: 1pt;
    margin-top: 1em;
    margin-bottom: 1em;
}

img {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 2pt;
    margin-right: 2pt;
}

div#jserror {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: white;
    background: linear-gradient(139deg, rgba(255, 241, 234, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(241, 253, 255, 1) 100%);
    color: red;
    font-size: 16pt;
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em 3em;
}

/* Message box */

#msgbox {
    width: 375pt;
    height: 37.5pt;
    border: 1pt solid green;

    margin: 0pt auto 10pt auto;
}

/* Custom */
.custom {
    display: block;
    width: 148pt;
    padding: 2pt 5pt 5pt 5pt;
    margin: 15pt 5pt 10pt 5pt;
    border: 1pt dotted silver;
    text-align: justify;
}

/* Formularze */

form#naliczenia_form {
    padding: 10pt 0 0 0;
    margin: 10pt 0 0 0;
}

/* Rozne ogolnego przeznaczenia */

.bold {
    font-weight: bold;
}

.large {
    font-size: large;
}

.small {
    font-size: small;
}

.framed {
    border: 1pt solid black;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

.liczbowe {
    text-align: right !important;
}

.border_bottom_light {
    border-bottom: 1pt dotted silver;
}

.nopadding {
    padding: 0 0 0 0;
}

.clickable {
    cursor: pointer;
    border-bottom: 1pt dotted silver;
}

.clickable:hover {
    border-bottom: none;
}

/* Tabele domyślnie */

table {
    margin: 0 auto;
    padding: 0;
    border-collapse: collapse;
}

table tr.t_header {
    font-weight: bold;
}

table tr.t_header span.komentarz {
    font-size: small;
    font-weight: normal;
}

table caption {
    font-size: 140%;
    font-weight: bold;
    margin-bottom: 20px;
    color: black;
}

table caption span.komentarz {
    text-shadow: none;
    font-size: 75%;
    font-weight: normal;
    color: black;

}

table.arial tr td {
    font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Arial', 'Ubuntu', Sans-Serif;
}

/* Karta lokalu */

table.karta_lokalu {
    min-width: 300px;
    width: 75%;
    max-width: 95%;
    margin-bottom: 2em;
}

table.karta_lokalu tr {
    height: 18pt;
}

table.karta_lokalu tr td {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

table.karta_lokalu tr td:first-child {
    font-weight: bold;
    text-align: left;
}

table.karta_lokalu tr td:last-child {
    text-align: right;
}

table.karta_lokalu tr.accented {
    font-weight: bold;
    background-color: #FFAB91;
}

.link_obciazenia {
    color: var(--color-link);
    cursor: pointer;
    padding: 0.1em 0.5em;
}

.link_obciazenia:hover:after {
    position: absolute;
    font-size: 0.9em;
    background-color: white;
    border: 1pt solid black;
    color: black;
    width: 20em;
    content: "Kliknięcie powoduje wyświetlenie obciążeń dla wybranego miesiąca";
}

/* Podsumowanie obrotow */

table#syntetyka tr.bottom_border {
    border-bottom: 1pt solid #e0e0e0;
}

table#syntetyka tr.bottom_border td {
    padding-bottom: 1em;
}

table#syntetyka tr.miesiac {
    vertical-align: bottom;
}

table#syntetyka tr.miesiac td {
    padding-top: 0.5em;
}

table#syntetyka tr.razem td {
    padding-top: 0.5em;
}

table#podsumowanie_syntetyka {
    min-width: 430pt;
    text-align: left;
    margin-bottom: 20px;
}

table#podsumowanie_syntetyka tr {
    height: 22pt;
    vertical-align: bottom;
}

table#podsumowanie_syntetyka tr:first-child {
    height: 22pt;
    vertical-align: top;
}

table#podsumowanie_syntetyka tr td {
    text-align: right;
}

table#podsumowanie_syntetyka tr td:first-child {
    text-align: left;
}

table#podsumowanie_syntetyka.bigger {
    font-size: 120%;
}

table#podsumowanie_syntetyka tr.summary {
    font-weight: bold;
}

table#podsumowanie_syntetyka tr.summary td:last-child.negative {
    color: red;
}

/* Odsetki */

table#odsetki_syntetyka {
    margin-top: 25pt;
    margin-bottom: 10pt;
}

table#odsetki_syntetyka tr td {
    padding-top: 5pt;
    padding-bottom: 5pt;
}

table#odsetki_syntetyka tr td:first-child {
    text-align: left;
}

table#odsetki_syntetyka tr td:nth-child(2) {
    font-weight: bold;
    text-align: right;
    width: 9em;
}

table#odsetki_syntetyka tr td:nth-child(2).negative {
    color: red;
}

p.zestawienie-syn-txt-koniec {
    text-align: center;
    font-size: 110%;
    margin-top: 2em;
    margin-bottom: 2em;
}


/* Konfiguracja */

div.konfiguracja_header {
    font-size: 1.15em;
    font-weight: bold;
    border-bottom: 2pt solid gray;
    margin-bottom: 10pt;
    margin-top: 15pt;
}

div.konfiguracja_content {
    font-size: 1em;
}

.pwd_good:after {
    content: url(../img/ok_small.png);
}

/* Overlay */

#masteroverlay {
    position: fixed;
    top: 0pt;
    left: 0pt;
    width: 100%;
    height: 100%;
    visibility: hidden;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#masteroverlay:hover {
    cursor: wait;
}

#load_info {
    width: 30em;
    padding: 20px;
    border-radius: 6px;
    background: white;
    background: linear-gradient(139deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 100%);
    color: #4682b4;
    font-size: 120%;
    font-weight: bold;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
}

#load_info p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

#load_info img {
    border: 0;
    width: 2em;
}

table.listaKont {
    min-width: 300px;
    width: 75%;
    max-width: 95%;
    margin-bottom: 2em;
}

table.listaKont td {
    padding: 0.5em;
}

table.listaKont .naglowek {
    font-weight: bold;
}

table.listaKont em {
    font-weight: bold;
    font-style: normal;
}

.wyrozniony {
    font-weight: bold;
}

table.odczyt_wody .odczyt_wody_naglowek {
    border-bottom: 1px solid #e0e0e0;
}

table.odczyt_wody td.wodomierzeZW {
    vertical-align: top;
    border-bottom: 1px solid #e0e0e0;
}

table.odczyt_wody td.wodomierzeCW {
    vertical-align: top;
    border-bottom: 1px solid #e0e0e0;
}

table.wodomierzeZW {
    background-color: #c5e3ed;
    width: 100%;
}

table.wodomierzeCW {
    background-color: #ffcccc;
    width: 100%;
}

td.nr_wodomierza {
    font-weight: bold;
}

td.stan_wodomierza {
    font-weight: bold;
}

td.wodomierze_naglowek_gorny {
    text-align: center;
}

table.odczyt_wody .woda_rozliczenie {
    width: 50%;
}

table.ceny_wody {
    width: 100%;
}

table.ceny_wody td {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1pt solid white;
}

table.ceny_wody tr.cena_zw {
    background-color: #c5e3ed;
}

table.ceny_wody tr.cena_kn {
    background-color: #c5e3ed;
}

table.ceny_wody tr.cena_cw {
    background-color: #ffcccc;
}

table.prevnexttable {
    border: none;
    margin-top: 1em;
    margin-bottom: 1em;
}

span.prevbtn {
    border: 1pt dotted;
    padding: 0.5em;
    margin-right: 1em;
}

span.nextbtn {
    border: 1pt dotted;
    padding: 0.5em;
    margin-left: 1em;
}

span.prevbtn:hover {
    cursor: pointer;
}

span.nextbtn:hover {
    cursor: pointer;
}

td.prevbtn {
    text-align: right;
    margin-right: 1em;
}

td.nextbtn {
    text-align: left;
    margin-left: 1em;
}

span.btn:hover {
    cursor: pointer;
}

div.infoframe {
    text-align: center;
    margin-right: 10%;
    margin-left: 10%;
    border: 1pt dotted black;
    padding: 2em;
    background-color: #e0e0e0;
}

.pobierzPDF img {
    border: 0px;
    margin-left: 20px;
}

/* Analiza smieci */
table#analiza_smieci {
    border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    font-weight: normal;
    min-width: 90%;
    margin-bottom: 4em;
}

table#analiza_smieci tr.analiza_smieci_naglowek {
    font-weight: bold;
    text-align: center;
    background-color: #F0F0F0;
    border: 1px solid black;
    margin: 0;
}

table#analiza_smieci tr.analiza_smieci_podsumowanie {
    font-weight: bold;
    background-color: #F0F0F0;
    border-top: 1px solid black !important;
    border-bottom: 1px solid black !important;
    margin: 0;
}

table#analiza_smieci tr.analiza_smieci_pozycja {
    font-weight: normal;
    background-color: white;
    border-top: 1px solid #CECECE;
    margin: 0;
}

table#analiza_smieci tr td {
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

table#analiza_smieci tr td.analiza_smieci_data {
    color: black;
    text-align: center;
    min-width: 4em;
}

table#analiza_smieci tr td.analiza_smieci_opis {
    color: black;
    text-align: left;
    min-width: 8em;
}

table#analiza_smieci tr td.analiza_smieci_wn {
    color: red;
    text-align: right;
    min-width: 5em;
}

table#analiza_smieci tr td.analiza_smieci_ma {
    color: green;
    text-align: right;
    min-width: 5em;
}


/* WebDoc */

ul#lista_kategorii li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

a.text_link {
    font-weight: bold;
    margin-left: 2em;
    margin-right: 2em;
}

p#naglowek_listy_dokumentow {
    font-size: 130%;
    font-weight: bold;
    margin-bottom: 10pt;
}

div.webdoc_dokument {
    margin-top: 10px;
    margin-bottom: 10px;
}

div.webdoc_dokument_tytul {
    font-size: 100%;
    font-weight: bold;
    margin-bottom: 10pt;
}

div.webdoc_dokument_opis {
    font-size: 100%;
    font-weight: normal;
    margin-bottom: 10pt;
    text-align: justify;
}

div.webdoc_dokument_daty {
    font-size: 80%;
    font-weight: normal;
    color: #888;
}

table.zad_nier {
    border: none;
    font-size: 110%;
    text-align: left;
    margin-right: auto;
    margin-left: 0px;
    margin-top: 1em;
}

.red {
    color: red;
}

.green {
    color: #00a060;
}

.black {
    color: black;
}

td.right {
    text-align: right;
}

p.zad_nier_wtym {
    margin-top: 1em;
    margin-bottom: 2em;
}

p.zad_nier_wtym_rej {
    margin-bottom: 1em;
    font-style: italic;
}


table.zad_nier_krotnosci {
    border: 1px solid #e0e0e0;
    font-size: 100%;
    text-align: left;
}

table.zad_nier_krotnosci tr.zad_nier_header {
    background: #e0e0e0;
    font-weight: bold;
}

i.icon-envelope {
    width: 2em;
    background-image: "../img/envelope.svg";
}

div.rezygnacja a.rezygnacja {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    border: 1px solid #666;
    border-radius: 0.2em;
    color: black;
    font-weight: bold;
    cursor: pointer;
}

div.rezygnacja a.rezygnacja:hover {
    background: #b2dee3;
}

p.rezygnacja-top {
    color: black;
    margin-bottom: 2em;
}

p.rezygnacja-link {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
}

p.rezygnacja-bottom {
    color: gray;
    margin-top: 2em;
}

/* Panel odnosnikow logowania do bankow */

.odnosniki_bankow img {
    margin-left: 1em;
    height: 30px;
}

div.wodomierze-uwagi {
    font-weight: bold;
    text-align: left;
}

.ramka-info-tytul {
    color: var(--color-header);
    margin-bottom: 1em;
    font-size: large;
    font-weight: bold;
    text-align: center;
}

#ramka-info-2 {
    text-align: justify;
}

#ramka-info-2 p {
    margin-top: 1em;
    margin-bottom: 1em;
}

p.doklok {
    margin-top: 6pt;
}

.doklok-ikona-nowy {
    display: inline;
    visibility: visible;
    margin: 0pt;
    width: 10pt;
    position: relative;
    top: -0.075em;
    vertical-align: middle;
}

.doklok-ikona-pobrany {
    width: 10pt;
    display: inline;
    visibility: hidden;
    margin: 0pt;
}

.odstep-prawa {
    margin-right: 6pt;
}

.doklok-data-nowy {
    font-weight: bold;
    margin-left: 12pt;
    margin-right: 12pt;
}

.doklok-data-pobrany {
    font-weight: normal;
    margin-left: 25pt;
    margin-right: 13pt;
}

.doklok-opis-nowy {
    font-weight: bold;
}

.doklok-opis-pobrany {
    font-weight: normal;
}

.doklok-menu-ikona-nowe {
    display: inline;
    vertical-align: middle;
    margin-right: 3pt;
    width: 10pt;
    margin-left: -10pt;
    position: relative;
    top: -0.1em;
}

.doklok-menu-ikona-brak {
    width: 10pt;
    display: none;
    vertical-align: middle;
}

.ramka-info-zmiany {
    border: 2px solid red;
    margin-left: 2em;
    margin-right: 2em;
    background-color: #f0f0f0;
    font-size: 105%;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: left;
    margin-bottom: 2em;
    overflow: hidden;
    clear: both;
}

.ramka-info-zmiany-tx {
    font-size: 110%;
    font-weight: bold;
    text-align: center;
}

.tab-zmiany-oplat {
    min-width: 50%;
}

.tab-zmiany-oplat td {
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border: 1px solid #e0e0e0;
}

.tab-zmiany-oplat-nagl {
    background-color: #e0e0e0;
    font-weight: bold;
    text-align: center;
}

.tab-zmiany-oplat-kwota {
    text-align: right;
}

.tab-zmiany-oplat-suma {
    font-weight: bold;
}

.tab-zmiany-oplat-popmies {
    color: gray;
}

.tab-zmiany-oplat-ods-nadzien {
    font-size: 75%;
}

.ramka-info-dol {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.info-zmiany-btn {
    float: right;
    margin-left: auto;
    font-size: 110%;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.hint-icon {
    width: 1.5em;
}

.smapi-reg {
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: 2em;
}

.smapi-reg img {
    margin: auto;
}

.smapi-reg-button {
    font-size: 125%;
    font-weight: bold;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}

.smapi-container {
    padding-left: 2em;
    padding-right: 2em;
}

.smapi-reg-code {
    font-family: monospace;
    font-size: 200%;
    font-weight: bold;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    margin-top: 1em;
    border: 1px solid #CCC;

}

.smapi-reg-code-time {
    font-size: 110%;
    font-weight: bold;
    color: red;
}

h2.danekon {
    font-size: 16px;
    font-weight: bold;
    margin-top: 1em;
}

div.dk-form {
    border: 1px solid #666;
    border-radius: 5px;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    font-size: 12pt;
    margin-bottom: 1em;
    box-shadow: 2pt 2pt 5pt lightgray;
}

div.dk-form p {
    margin-top: 0.5em;
}

div.dk-form h2 {
    font-size: 16pt;
    font-weight: bold;
}

.dk-check {
    width: 2em;
    height: 2em;
    vertical-align: middle;
    margin-right: 1em;
}

.dk-daneos {
    font-weight: bold;
    margin-bottom: 0.5em;
    background-color: #f0f0f0;
    border: 1px solid #e0e0e0;
    padding: 5px 5px 5px 1em;
    border-radius: 5px;
}

.dk-label {
    display: inline-block;
    min-width: 8em;
    width: 8em;
}

p.dk-oswiadczenie {
    font-size: small;
    color: #01678f;
    margin-bottom: 2em;
}

div.dk-msg-ok {
    background-color: #B2DFDB;
    border: 1px solid #00796B;
    border-radius: 5px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 2em;
    padding-right: 2em;
    box-shadow: 2pt 2pt 5pt lightgray;
}

div.dk-msg-ok img {
    border: 0px;
    margin-right: 1em;
}

div.dk-msg-err {
    background-color: #FFAB91;
    border: 1px solid #D84315;
    border-radius: 5px;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 2em;
    padding-right: 2em;
    box-shadow: 2pt 2pt 5pt lightgray;
}

div.dk-msg-err img {
    border: 0px;
    margin-right: 1em;
}

p.dk-icon {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
}

p.dk-icon img {
    height: 3em;
    border: 0px;
}

h1.dk-txt-ok {
    color: #00796B;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    font-weight: 900;
}

h1.dk-txt-err {
    color: #D84315;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16pt;
    font-weight: 900;
}

p.dk-txt-ok,
p.dk-txt-err {
    margin-bottom: 2em;
}

p.dk-btn-row {
    margin-top: 1em;
    text-align: center;
}

div.dk-osw {
    overflow: auto;
    height: 15em;
}

span.dk-akcept {
    color: #D84315;
    font-weight: bold;
}

/* zużycie ciepła w budynku */

div.zuzciepla-prevnext-container {
    width: 100%;
    margin-top: 2em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 2em;
}

button.zuzciepla-prev-btn {
    font-size: 120%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    cursor: pointer;
    box-shadow: 0px 2px 2px lightgray;
}

button.zuzciepla-prev-btn:active {
    box-shadow: none;
}

button.zuzciepla-prev-btn img {
    margin-right: 1em;
}

button.zuzciepla-next-btn {
    font-size: 120%;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    cursor: pointer;
    box-shadow: 0px 2px 2px lightgray;
}

button.zuzciepla-next-btn:active {
    box-shadow: none;
}

button.zuzciepla-next-btn img {
    margin-left: 1em;
}

div.tab-zuzciepla {
    min-width: 75%;
}

table.tab-zuzciepla {
    background-color: white;
    box-shadow: 0px 2px 4px lightgray;
    width: 100%;
}

table.tab-zuzciepla tbody {
    border-radius: 8px;
}

table.tab-zuzciepla tr.tab-zuzciepla-hdr th {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

table.tab-zuzciepla th.tab-zuzciepla-hdr-miesiac {
    border-top-left-radius: 8px;
}

table.tab-zuzciepla th.tab-zuzciepla-hdr-cw {
    border-top-right-radius: 8px;
}

table.tab-zuzciepla tr.tab-zuzciepla-dane:nth-child(2n+1) {
    background-color: #f2f2f2;
}

table.tab-zuzciepla tr.tab-zuzciepla-hdr {
    background-color: #e0e0e0;
    font-weight: bold;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-align: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

table.tab-zuzciepla td {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

table.tab-zuzciepla td.tab-zuzciepla-miesiac {
    text-align: center;
}

table.tab-zuzciepla td.tab-zuzciepla-zuz {
    text-align: center;
}

div.dop-rach {
    font-size: 100%;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 2em 1em 2em;
    border: 1px solid lightgray;
    border-radius: 4px;
    box-shadow: 0px 2px 4px gray;
}

table.kartabud-dane td {
    padding: 0.2em 1em;
}

table.kartabud-dane td.dane {
    font-weight: bold;
}

table.kartabud-dane td.label {
    min-width: 30%;
}

table.kartabud-dane,
table.kartabud-co,
table.kartabud-cw {
    border-radius: 4px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
}

table.kartabud-co td {
    padding: 0.2em 1em;
    width: 25%;
}

table.kartabud-cw td {
    padding: 0.2em 1em;
    width: 20%;
}

table.kartabud-co td.header {
    border-bottom: 1px solid lightgray;
    font-weight: bold;
}

table.kartabud-cw td.header {
    border-bottom: 1px solid lightgray;
    font-weight: bold;
}

table.kartabud-co tr.podsumowanie {
    font-weight: bold;
}

table.kartabud-cw tr.podsumowanie {
    font-weight: bold;
}

table.kartabud-co td.odkreslenie {
    border-top: 1px solid lightgray;
}

table.kartabud-cw td.odkreslenie {
    border-top: 1px solid lightgray;
}

table.kartabud-dane tr:first-child td,
table.kartabud-co tr:first-child td,
table.kartabud-cw tr:first-child td {
    padding-top: 1em;
}

table.kartabud-dane tr:last-child td,
table.kartabud-co tr:last-child td,
table.kartabud-cw tr:last-child td {
    padding-bottom: 1em;
}


.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

.align-left {
    text-align: left;
}

.align-justify {
    text-align: justify;
}

.bold {
    font-weight: bold;
}

.margin-top {
    margin-top: 2em;
}

#pol_zest_nal {
    min-width: 75%;
    overflow: auto;
}

#pol_zest_nal table {
    width: 100%;
    border: none;
    border-collapse: collapse;
}

#pol_zest_nal td {
    min-width: 5em;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

#pol_zest_nal td.hdr {
    border-bottom: 1px solid lightgray;
    font-weight: bold;
}

#pol_zest_nal td.odkresl {
    border-top: 1px solid lightgray;
}

#pol_zest_nal td.razem {
    font-weight: bold;
}

#pol_zest_nal td.cell_opis {
    text-align: left;
    width: 40%;
}

#pol_zest_nal tr:hover {
    background-color: #f0f0f0;
}

#pol_zest_nal td.cell_opis_rej {
    padding-left: 3em;
}

#pol_zest_nal tr.rej td.cell_opis_rej {
    color: #888;
}

#pol_zest_nal td.cell_kwota {
    text-align: right;
    width: 20%;
}

#pol_zest_nal .odstep {
    padding-top: 0.5em;
}

#pol_zest_nal tr.rej td.cell_kwota {
    color: #888;
}

#pol_zest_nal td.cell_saldo {
    font-weight: bold;
}

.kwota_minus {
    color: red;
}

.kwota_plus {
    color: green;
}

#pol_zest_nal tr.rej td.kwota_minus {
    color: #ff8080;
}

#pol_zest_nal tr.rej td.kwota_plus {
    color: #70c070;
}

#pol_ramka_pl {
    min-width: 75%;
    overflow: auto;
}

#pol_ramka_pl .info_naleznosc {
    text-align: center;
    font-weight: bold;
    font-size: large;
    margin-top: 1em;
}

#pol_lista_wplat {
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    border: none;
}

#pol_lista_wplat .wiersz_wplat {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#pol_lista_wplat .hdr {
    font-weight: bold;
}

#pol_lista_wplat .wiersz_wplat .data_wplaty {
    text-align: right;
}

#pol_lista_wplat .wiersz_wplat .kwota_wplaty {
    text-align: right;
    width: 6em;
    margin-left: 2em;
}

.wiersz_przycisku {
    text-align: center;
    font-weight: bold;
}

.wiersz_logo {
    text-align: center;
}

.wiersz_logo img {
    width: 100%;
    border: none;
}

.btn_place {
    background-color: white;
    border-radius: 4px;
    padding: 10px;
    font-weight: bold;
    border: 1px solid green;
    box-shadow: 0px 4px 8px rgba(0, 128, 0, 0.5);
    margin-top: 2em;
    margin-bottom: 3em;
    cursor: pointer;
    color: green;
    padding-left: 3em;
    padding-right: 3em;
    padding-top: 1em;
    width: 22em;
    transition: all 0.2s ease;
}

.btn_place img {
    max-height: 4em;
}

.btn_place:hover {
    box-shadow: 0px 4px 12px rgba(0, 128, 0, 0.5);
    transform: translateY(-3px);
}

.btn_place:active {
    box-shadow: 0px 1px 2px rgba(0, 128, 0, 0.5);
    transform: translateY(3px);
}

#combo_wplacajacy {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
    font-size: 110%;
}

#pol_wplacajacy_form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

#pol_wplacajacy_form .pol_wplacajacy_form_label {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    width: 35%;
    vertical-align: middle;
}

#pol_wplacajacy_form .pol_wplacajacy_form_input {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    width: 40%;
    vertical-align: middle;
    margin-right: 10px;
}

#pol_wplacajacy_form .pol_wplacajacy_form_input input {
    width: 100%;
    font-size: 110%;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px;
    margin: 0;
}

#pol_wplacajacy_form .pol_wplacajacy_form_input input.error {
    box-shadow: 0px 0px 4px red;
}

#pol_kwota {
    font-size: 110%;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px;
}

#pol_kwota.error {
    box-shadow: 0px 0px 4px red;
    background-color: #ffd2d2;
}

#pol_wplacajacy_error {
    display: none;
    text-align: center;
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 1em;
    color: red;
}

#pol_wplacajacy_error.error {
    display: block;
}

#pol_za_lokal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1em;
    gap: 10px;
}

#pol_za_lokal div.pol_za_lokal_label {
    width: 25%;
}

#pol_za_lokal_kwota,
#pol_za_lokal_adres {
    font-weight: bold;
    width: 70%;
}

#errorDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#errorDiv #errorImg {
    width: 8em;
    border: none;
    margin-top: 3em;
    margin-bottom: 3em;
}

#errorDiv #errorMsg {
    width: 70%;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid red;
    background-color: #ffc0c0;
    box-shadow: 0px 2px 4px gray;
}

#redirDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 4px;
    padding: 16px;
    box-shadow: 0px 2px 4px gray;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 2em;
}

#redirDiv #redirInfo {
    font-weight: bold;
    margin-top: 2em;
}

#redirDiv #progressImg {
    height: 2em;
    border: none;
    margin-top: 2em;
    margin-bottom: 2em;
}

#redirDiv #paymentLogo {
    border: none;
    height: 5em;
    margin-bottom: 2em;
}

#redirDiv #manualRedir {
    text-align: ceneter;
}

#redirDiv #manualRedir p {
    color: #666;
}

#redirDiv #manualRedir .buttonLine {
    text-align: center;
    margin-top: 2em;
}

#redirDiv #redirButton {
    padding: 0.5em 2em;
}

#paylock_msg {
    font-size: 110%;
    font-weight: bold;
    margin-top: 5em;
    padding-left: 2em;
    padding-right: 2em;
    color: darkred;
    text-align: center;
}

#paylock_img {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3em;
}

#paylock_img img {
    border: none;
    width: 7em;
}

div.chevron-right {
    float: right;
}

div.chevron-right img {
    height: 1em;
}

#emailFormContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 95%;
}

#emailFormContainer .sol-card {
    margin-bottom: 1em;
}

#emailFormContainer .form-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

#emailFormContainer .combo-row {
    margin-bottom: 1.5em;
}

#emailFormContainer .error-row {
    margin-bottom: 1em;
    color: red;
}

#emailFormContainer .card-header {
    font-weight: bold;
    margin-bottom: 1em;
}

#emailFormContainer input,
#emailFormContainer select {
    min-width: 50%;
    margin-left: 2em;
}

#emailFormContainer #sendRow {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#emailFormContainer #sendRow a {
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}


#emailFormContainer textarea {
    width: 100%;
    min-height: 8em;
    white-space: pre-wrap;
}

/* wydruk */
@media print {

    body {
        background: white;
    }

    .navmenu {
        display: none;
    }

    div#menu {
        display: none;
    }

    #logo {
        float: left;
        text-align: center;
        margin-top: 3pt;
        margin-left: 0pt;
    }

    #logoFirmy {
        height: 54pt;
        border: none;
    }

    #layout {
        width: 90%;
        min-width: 0pt;
        padding: 0pt;
    }

    #info {
        width: 100%;
        margin: 0pt;
    }

    #user_info {
        width: 100%;
        margin: 0pt;
    }

    div.wyloguj {
        display: none;
    }

    #footer {
        text-align: center;
    }

    #footer a {
        text-decoration: none;
    }

    form {
        display: none;
    }

    a {
        color: black !important;
        text-decoration: none !important;
    }

    h3.rejestr {
        border-bottom: 1pt solid black;
        background-color: white;
    }

    .link_obciazenia {
        color: black;
        border: none;
    }

    div.link_zawiadomienie {
        display: none;
    }

    table.prevnexttable {
        display: none;
    }

    .pobierzPDF {
        display: none;
    }

    a.back_to_cathegories {
        display: none;
    }

    div.dk-osw {
        height: min-content;
        overflow: hidden;
        font-size: 80%;
    }

    .dk-tel {
        font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Arial', 'Ubuntu', Sans-Serif;
        font-size: 10pt;
        border-radius: 3pt;
        padding-top: 2pt;
        padding-bottom: 2pt;
        padding-left: 0.5em;
        padding-right: 0.5em;
        border: 1px solid #ccc;
        width: 20%;
        margin-left: 2em;
    }

    td.zad_nier_val {
        min-width: 6em;
        text-align: right;
        font-weight: bold;
        padding-left: 2em;
    }

    div.zad_nier_krotnosci {
        max-width: 90%;
    }

    table.zad_nier_krotnosci td {
        border-bottom: 1px solid #e0e0e0;
        padding-left: 2em;
        padding-right: 2em;
        min-width: 5em;
        padding-top: 0.3em;
        padding-bottom: 0.3em;
    }

    .prevnext {
        display: none;
    }

    #zadl-kl-container {
        padding: 2em 4em;
    }

    #zadl-kl-stannadzien {
        margin-left: 2em;
        margin-top: 1em;
    }

    #zadl-kl-stannadzien span.zadl-kl-data {
        margin-left: 1.5em;
        font-weight: bold;
    }

    #zadl-kl-tab-kl {
        margin-top: 2em;
    }

    #zadl-kl-tab-kl tr td {
        min-width: 15em;
        padding: 0.5em 2em;
    }

    #zadl-kl-tab-kl tr td:nth-of-type(2) {
        text-align: right;
    }

    #zadl-kl-tab-kl tr.razem td {
        border-top: 1px solid lightgray;
    }

    #zadl-kl-tab-kl tr.zadl-kl-klatka td {
        border-top: 1px solid #eee;
    }

    #zadl-kl-tab-kl tr.header td {
        border-bottom: 1px solid lightgray;
        font-style: italic;
    }

    #zadl-kl-tab-bud tr td {
        min-width: 15em;
        padding: 0.5em 2em;
    }

    #zadl-kl-tab-bud tr td:nth-of-type(2) {
        text-align: right;
        font-weight: bold;
    }

}

/* koniec print */