html{
    font-size: 20px;
    font-family: "Open Sans", sans-serif;
    background-color: rgb(226, 236, 255);

}

.naglowek{
   display: grid;
   grid-template-columns: 250px auto;
}

.grid-item_przyklad{
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 10px;
    font-size: 30px;
    text-align: center;
}
.grid-item{
    padding-left: 5px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}


.logo{
    font-size: 30px;
    font-family:'Arial Black';
    color:black;
    float:left;
}

.logo_niebieski{
    font-size: 30px;
    font-family:'Arial Black';
    color:blue;
    padding: 0px;
    float:left;
}

.logo_czerwony{
    font-size: 30px;
    font-family:'Arial Black';
    color:red;
    padding: 0px;
    float:left;
}


.tytul{
    font-size: 30px;
    color:black;
}

.wersja{
    font-size: 15px;
    color:black;
}

.zastrzezenia{
    font-size: 20px;
    font-family: "Open Sans", sans-serif;
    color: red;
}


.rysunek{
    background-color: rgb(255, 255, 255);
    padding: 2px;
    align-content: center;
}

.rysunki{
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}

.dane{
    background-color: rgb(227, 243, 155);

    border-style: groove;
    border-radius: 25px;

    padding-left: 15px;
    padding-bottom: 10px;
    display: block;
}

.pole_liczbowe{
    font-size: 25px;

    border-style: groove;
    border-radius: 10px;

    width: 70px;
    text-align: right;

    -webkit-appearance: none;
    -moz-appearance: textfield;
}


.pole_tekstowe_250px{
    font-size: 25px;

    border-style: groove;
    border-radius: 10px;
    text-align: left;
    margin: auto;
    width: 250px;
}

.pole_tekstowe{
    font-size: 25px;

    border-style: groove;
    border-radius: 10px;
    text-align: left;
    margin: auto;
    width: 70%;
}

.przycisk_zgoda{
    font-size: 25px;

    border-style:ridge;
    border-width: 10px;
    border-radius: 15px;
    border-color:dimgrey;

    background-color:lightskyblue;

    height: 80px;
    font-weight: bold;
    text-align: center;

    width: 100%;
}



.przycisk_oblicz{
    font-size: 25px;

    border-style:ridge;
    border-width: 10px;
    border-radius: 15px;
    border-color:dimgrey;

    background-color:lightskyblue;

    height: 80px;
    font-weight: bold;
    text-align: center;

    width: 100%;
}

.przycisk_oblicz:hover{
    background-color:yellow;
}

.przycisk_oblicz:active{
    transform: translateY(4px);
    border-color: white;
}


.przycisk_menu{
    font-size: 20px;

    border-style:outset;
    border-width: 5px;
    border-radius: 9px;
    border-color:dimgrey;

    background-color:lightskyblue;

    width: 100px;
    height: 40px;
    font-weight: bold;
    text-align: center;
}

.przycisk_menu:hover{
    background-color:yellow;
}









.przycisk_wyboru{
    width: 120px;
    height: 50px;
    cursor: pointer;
    vertical-align: 5px;

    font-size: 20px;
}

.dropdown{
    position: relative;
    display: inline-block;
}

.lista_rozwijana{
    display: none;
    position: absolute;

    font-size: 25px;
    text-align: center;
    cursor: pointer;

    border-radius: 15px;

    background-color: rgb(156, 156, 156);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.lista_rozwijana a:hover{
    background-color: yellow;
}

.show{display: block;}


.obliczenia{
    background-color: rgb(136, 165, 207);

    border-style: groove;
    border-radius: 25px;

    padding-left: 15px;
    padding-bottom: 10px;
}

.wyniki{
    background-color: rgb(179, 179, 179);
    border-style: groove;
    border-radius: 25px;

    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
}

.wyjasnienia{
    background-color: rgb(168, 255, 212);
    border-style: groove;
    border-radius: 25px;

    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
}
.autor{
    background-color: rgb(250, 255, 174);
    border-style: groove;
    border-radius: 25px;

    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
}


.stopka{
    font-size: 15px;
    font-family: "Open Sans", sans-serif;
}

.przekroj_zbrojony{
    background-color: rgb(199, 255, 236);
    border-style: groove;
    border-radius: 25px;

    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;


}

.warunek_koniecznosci_zbrojenia{
    font-size: 50;
    font-style: italic;
    font-family:Verdana;
}

.warunek_koniecznosci_zbrojenia_TAK{
    color: rgb(255, 0, 0);
    font-size: 20px;
    font-weight: bolder;
    font-family:Verdana;
}

.wytezenie_80{
    color: rgb(0, 141, 19);
    font-size: 20px;
    font-weight: bolder;
    font-family:Verdana;
}

.wytezenie_90{
    color: rgb(238, 255, 0);
    font-size: 20px;
    font-weight: bolder;
    font-family:Verdana;
}

.wytezenie_95{
    color: rgb(201, 57, 0);
    font-size: 20px;
    font-weight: bolder;
    font-family:Verdana;
}

.wytezenie_100{
    color: rgb(204, 0, 0);
    font-size: 20px;
    font-weight: bolder;
    font-family:Verdana;
}

.pogrubienie{
    color:black;
    font-size: 20px;
    font-weight: bolder;
    font-family:Verdana;
}


.radio {
    width: 25px;
    height: 25px;
}

.checkbox{
    width: 30px;
    height: 30px;
}

table{
    margin-left: 0px;
    margin-right: auto;
    width: auto;
    border: 2px solid;
    border-collapse: collapse;
}

.tabela_szeroka{
    margin-left: 0px;
    margin-right: auto;
    width: 100%;
    border: 2px solid;
    border-collapse: collapse;
}

th{
    border: 2px solid;
}

.tabela_kolumna_opis{
    width: 100px;
}

.tabela_komorka_opis{
    text-align: center;
}

td{
    width: 100px;
    border: 1px solid;
    text-align: right;
}

/* ==========================================================================
   BLOKADA INTERFEJSU KALKULATORA PRZED AKCEPTACJĄ REGULAMINU
   ========================================================================== */

/* Ukrywamy całą zawartość kalkulatora przed kliknięciem zgody */
#naglowek, 
#dane, 
#obliczenia, 
#wyniki, 
#wyjasnienia, 
#autor, 
#stopka, 
.rysunki, 
h4,
#przycisk_oblicz, 
#przycisk_rtf, 
#przycisk_zapisz_txt, 
#przycisk_wczytaj_txt {
    display: none !important;
}

/* Panel warunków korzystania musi pozostać cały czas widoczny na starcie */
#warunki_block,
#warunki_blok {
    display: block !important;
}