.tytul_strony {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(21px, 7vw, 70px);
    color: limegreen;
    text-align: center;
}
.naglowek_zielony {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(15px, 5vw, 50px);
    color: limegreen;
    text-align: center;
}
.naglowek_fioletowy {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(15px, 5vw, 50px);
    color: purple;
    text-align: center;
}
.naglowek_pomaranczowy {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(15px, 5vw, 50px);
    color: orange;
    text-align: center;
}
.naglowek_czerwony {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(15px, 5vw, 50px);
    color: red;
    text-align: center;
}
.baner_grafika {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
}
.baner_grafika img {
    max-width: 50%;
    height: auto;
    display: block;
}
.linia_szara {
    height: clamp(1px, 0.25vw, 4px);
    background: gray;
    width: min(85%, 1200px);
}
.blad {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: red;
    text-align: center;
}
.przycisk_zielony {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: limegreen;
    background-color: black;
    text-align: center;
    cursor: pointer;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-top-color: silver;
    border-left-color: silver;
    border-bottom-color: dimgray;
    border-right-color: dimgray;
}
.przycisk_zielony:active {
    border-top-color: black;
    border-left-color: black;
    border-bottom-color: gray;
    border-right-color: gray;
    transform: translateY(clamp(1px, 0.3vw, 6px));
    background-color: black;
}
.przycisk_fioletowy {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: purple;
    background-color: black;
    text-align: center;
    cursor: pointer;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-top-color: silver;
    border-left-color: silver;
    border-bottom-color: dimgray;
    border-right-color: dimgray;
}
.przycisk_fioletowy:active {
    border-top-color: black;
    border-left-color: black;
    border-bottom-color: gray;
    border-right-color: gray;
    transform: translateY(clamp(1px, 0.3vw, 6px));
    background-color: black;
}
.przycisk_pomaranczowy {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: orange;
    background-color: black;
    text-align: center;
    cursor: pointer;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-top-color: silver;
    border-left-color: silver;
    border-bottom-color: dimgray;
    border-right-color: dimgray;
}
.przycisk_pomaranczowy:active {
    border-top-color: black;
    border-left-color: black;
    border-bottom-color: gray;
    border-right-color: gray;
    transform: translateY(clamp(1px, 0.3vw, 6px));
    background-color: black;
}
.przycisk_czerwony {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: red;
    background-color: black;
    text-align: center;
    cursor: pointer;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-top-color: silver;
    border-left-color: silver;
    border-bottom-color: dimgray;
    border-right-color: dimgray;
}
.przycisk_czerwony:active {
    border-top-color: black;
    border-left-color: black;
    border-bottom-color: gray;
    border-right-color: gray;
    transform: translateY(clamp(1px, 0.3vw, 6px));
    background-color: black;
}
.tekst_zielony {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: limegreen;
    text-align: center;
}
.tekst_fioletowy {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: purple;
    text-align: center;
}
.tekst_pomaranczowy {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: orange;
    text-align: center;
}
.tekst_czerwony {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: red;
    text-align: center;
}
.pole_zielone {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: limegreen;
    background-color: black;
    text-align: center;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: gray;
}
.pole_fioletowe {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: purple;
    background-color: black;
    text-align: center;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: gray;
}
.pole_pomaranczowe {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: orange;
    background-color: black;
    text-align: center;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: gray;
}
.pole_czerwone {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: red;
    background-color: black;
    text-align: center;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: gray;
}
.dokument_fioletowy {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: purple;
    background-color: black;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: gray;
    width: min(85%, 1200px);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.dokument_fioletowy span:first-child, .dokument_fioletowy div:first-child {
    text-align: left;
}
.dokument_fioletowy span:last-child, .dokument_fioletowy div:last-child {
    text-align: right;
    white-space: nowrap;
}
.dokument_zielony {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: limegreen;
    background-color: black;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: gray;
    width: min(85%, 1200px);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.dokument_zielony span:first-child, .dokument_zielony div:first-child {
    text-align: left;
}
.dokument_zielony span:last-child, .dokument_zielony div:last-child {
    text-align: right;
    white-space: nowrap;
}
.dokument_pomaranczowy {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: orange;
    background-color: black;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: gray;
    width: min(85%, 1200px);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.dokument_pomaranczowy span:first-child, .dokument_pomaranczowy div:first-child {
    text-align: left;
}
.dokument_pomaranczowy span:last-child, .dokument_pomaranczowy div:last-child {
    text-align: right;
    white-space: nowrap;
}
.dokument_czerwony {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: red;
    background-color: black;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: gray;
    width: min(85%, 1200px);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.dokument_czerwony span:first-child, .dokument_czerwony div:first-child {
    text-align: left;
}
.dokument_czerwony span:last-child, .dokument_czerwony div:last-child {
    text-align: right;
    white-space: nowrap;
}
.form_pion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 24px);
}
.forma_poziom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 24px);
}
.div_pion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 24px);
}
.div_poziom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2vw, 24px);
}
.data_czas {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: white;
    background-color: black;
    text-align: center;
}
.odliczanie {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(9px, 3vw, 30px);
    color: white;
    background-color: black;
    text-align: center;
}
.tlo_czarne {
    background-color: black;
}
.kontener_tabeli {
    width: 85%;
    margin: 0 auto;
    overflow: visible;
    position: relative;
    display: flex;
    justify-content: center;
}
.tabela {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
.tabela_flex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.tabela_flex form {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.panel_zwijany summary::-webkit-details-marker {
    display: none;
}
.panel_zwijany summary {
    list-style: none;
    outline: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 2vw, 24px);
}
.panel_zwijany_zawartosc {
    padding: clamp(6px, 1vw, 12px);
}
.panel_zwijany_strzalka {
    transition: transform 0.3s ease;
    font-size: clamp(16px, 3vw, 64px);
    display: inline-block;
    transform: rotate(0deg);
}
details[open].panel_zwijany .panel_zwijany_strzalka {
    transform: rotate(180deg);
}
.status1 {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 64px);
    color: purple;
    text-align: center;
    background-color: black;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: purple;
}
.status1_online {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 64px);
    color: limegreen;
    text-align: center;
    background-color: black;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: limegreen;
}
.status1_offline {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 64px);
    color: red;
    text-align: center;
    background-color: black;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: red;
}
.status2 {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 64px);
    color: purple;
    text-align: center;
    background-color: black;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: purple;
}
.status2_online {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 64px);
    color: limegreen;
    text-align: center;
    background-color: black;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: limegreen;
}
.status2_offline {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 64px);
    color: red;
    text-align: center;
    background-color: black;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: red;
}
.status2inv {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 64px);
    color: purple;
    text-align: center;
    background-color: black;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-color: purple;
}
.status2inv_online {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 64px);
    color: limegreen;
    background-color: black;
    text-align: center;
    cursor: pointer;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-top-color: silver;
    border-left-color: silver;
    border-bottom-color: dimgray;
    border-right-color: dimgray;
}
.status2inv_online:active {
    border-top-color: black;
    border-left-color: black;
    border-bottom-color: gray;
    border-right-color: gray;
    transform: translateY(clamp(1px, 0.3vw, 6px));
    background-color: black;
}
.status2inv_offline {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 64px);
    color: red;
    background-color: black;
    text-align: center;
    cursor: pointer;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-top-color: silver;
    border-left-color: silver;
    border-bottom-color: dimgray;
    border-right-color: dimgray;
}
.status2inv_offline:active {
    border-top-color: black;
    border-left-color: black;
    border-bottom-color: gray;
    border-right-color: gray;
    transform: translateY(clamp(1px, 0.3vw, 6px));
    background-color: black;
}
.gracze1 {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 64px);
    color: purple;
    text-align: center;
}
.gracze2 {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 64px);
    color: purple;
    text-align: center;
}
.sterowanie_start {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 64px);
    color: limegreen;
    background-color: black;
    text-align: center;
    cursor: pointer;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-top-color: silver;
    border-left-color: silver;
    border-bottom-color: dimgray;
    border-right-color: dimgray;
}
.sterowanie_start:active {
    border-top-color: black;
    border-left-color: black;
    border-bottom-color: gray;
    border-right-color: gray;
    transform: translateY(clamp(1px, 0.3vw, 6px));
    background-color: black;
}
.sterowanie_stop {
    font-family: ui-monospace;
    font-weight: bold;
    font-size: clamp(16px, 3vw, 64px);
    color: red;
    background-color: black;
    text-align: center;
    cursor: pointer;
    border-style: solid;
    border-width: clamp(2px, 0.6vw, 10px);
    border-top-color: silver;
    border-left-color: silver;
    border-bottom-color: dimgray;
    border-right-color: dimgray;
}
.sterowanie_stop:active {
    border-top-color: black;
    border-left-color: black;
    border-bottom-color: gray;
    border-right-color: gray;
    transform: translateY(clamp(1px, 0.3vw, 6px));
    background-color: black;
}