* {
  box-sizing: border-box;
}

body {
  max-width: 900px;
  margin: auto;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  background: rgb(238, 238, 238);
  color: rgb(34, 40, 49);
  box-sizing: border-box;
}

::-webkit-scrollbar {
    display: none!important; /* for Chrome, Safari, and Opera */
}

input[type=submit]{
  background: rgba(250, 250, 250);
  font-size: 15px;
  border: 0;
  border-radius: 4px;
  padding: 10px;
  text-decoration: none;
  color: rgb(34, 40, 49);
  -webkit-appearance: none;
}

input[type=number]{
  padding: 15px;
  font-size: 15px;
  margin: 0 auto;
  border-radius: 10px;
}

input[type="text"],
input[type="password"]{
  -webkit-appearance: none;
  border-radius: 10px;
  height: 2.5em;
  width: 40%;
}

textarea,
input.text,
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 10px;
height: 2.5em;
}

input[type=button],input[type="submit"]{
  display: inline-block;
  color: rgb(34, 40, 49);
  text-align: center;
  padding: 10px;
  background: rgba(250, 250, 250);
  font-size: 15px;
  border-radius: 10px;
  border: 0;
  font-weight: normal;
  text-decoration: none;
  -webkit-appearance: none;
}

h1 {
  font-size: 2em;
  padding: 0 0px;

}

h2 {
    margin: 10px 0 0;
    font-size: 1.5em;
    padding: 0 0px;
}

a {
  text-decoration: none;
  padding: 10px;

  color: rgb(34, 40, 49);
}


a:visited{
text-decoration: none;
}

button {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  color: rgb(34, 40, 49);
  text-align: center;
  padding: 10px;
  background: rgb(238, 238, 238);
  font-size: 12px;
  border-radius: 10px;
  border: 0;
  font-weight: normal;
  text-decoration: none;
  -webkit-appearance: none;
}
button b {
  font-size: 24px;
  color: rgb(34, 40, 49);
}
.buttonPress {
  color: rgb(238, 238, 238);
  background: rgb(57, 62, 70);
}
.buttonPress b {
  color: rgb(238, 238, 238);
}
button:hover {
  background: rgb(57, 62, 70);
  color: rgb(238, 238, 238);
}

button:hover b {
  color: rgb(238, 238, 238);
}




.nazwaUstawien {
  margin: 0 auto;
  text-align: left;
  border-radius: 10px;
  font-weight: normal;
  text-decoration: none;
  -webkit-appearance: none;
  max-width: 500px;
  background: rgb(238, 238, 238);
  color: rgb(34, 40, 49);
}

.stanPlaner {
  margin: 0 auto;
  text-align: left;
  padding: 10px;
  background: rgba(200, 200, 200);
  font-size: 15px;
  border-radius: 10px;
  font-weight: normal;
  text-decoration: none;
  -webkit-appearance: none;
  max-width: 500px;
}


.stanWydatki {
  margin-right: 10px;
  display: inline-block;
  text-align: left;
  padding: 15px;
  background: rgba(200, 200, 200);
  font-size: 15px;
  border-radius: 10px;
  border: 0;
  font-weight: normal;
  text-decoration: none;
  -webkit-appearance: none;

}

.stanWydatki b {
  font-size: 25px;
}





#tabela {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
}

#tabela td, #tabela th {
  border: 0px solid #fff;
  padding: 10px;
}

#tabela tr:hover {background-color: #FC4445; color: white;}

#tabela th {
  padding: 10px;
  text-align: left;
  background-color: #333;
  color: rgb(34, 40, 49);
}

#tabelaPlaner {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
  max-width: 500px;
}

#tabelaPlaner td, #tabelaPlaner th {
  border: 0px solid #333;
  padding: 5px;
}

#tabelaPlaner th {
  padding: 5px;
  text-align: left;
  color: rgb(34, 40, 49);
  font-size: 15px;
}

#tabelaPlaner input[type=number]{
    width: 100%;
    max-width: 80px;
    padding: 3px;
    font-size: 15px;
    margin: 0 auto;
    border-radius: 4px;
  }


.main {
  margin: 0 auto;
  width: 100%;
  padding: 0 15px;
  position: relative;
}



.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(34, 40, 49);
  max-width: 900px;
  width: 100%;
  padding: 10px;
  z-index: 999;
}

.navbar-links {
  height: 100%;
  width: 100%;
}

.navbar-links ul {
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-links li {
  list-style: none;
  width: 20%;
}

.navbar-links li a {
  text-decoration: none;
  color: rgb(238, 238, 238);
  padding: 10px 0 10px 0;
  display: block;
  text-align: center;
  font-size: 20px;
}

.active i {
  color: rgb(255, 211, 105);
}

.duch {
  height: 60px;
  width: 100%;
}

.duch10 {
  height: 10px;
  width: 100%;
  float: none;
}

.duch25 {
  height: 25px;
  width: 100%;
}

.duch10Res {
  width: 100%;
  height: 10px;
}





div.scrollmenu {
  overflow: auto;
  white-space: nowrap;
  padding: 5px 0;
}



div.scrollmenu::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

div.scrollmenu label {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 20px;
  border-radius: 4px;
  background: rgba(200, 200, 200);
}

div.scrollmenu label.wydatki {
  margin: 0 5px 0 0;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  border-radius: 10px;
  font-weight: normal;
  text-decoration: none;
  -webkit-appearance: none;
  max-width: 400px;
  background: rgb(250, 250, 250);
  color: rgb(34, 40, 49);
}

div.scrollmenu label.przychody {
  margin: 0 5px 0 0;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  border-radius: 10px;
  font-weight: normal;
  text-decoration: none;
  -webkit-appearance: none;
  max-width: 400px;
  background: rgb(250, 250, 250);
  color: rgb(34, 40, 49);
}


div.scrollmenu label.zasoby {
  margin: 0 5px 0 0;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  border-radius: 10px;
  font-weight: normal;
  text-decoration: none;
  -webkit-appearance: none;
  max-width: 400px;
  background: rgb(250, 250, 250);
  color: rgb(34, 40, 49);
}

div.scrollmenu input[type="radio"] {
  opacity: 0;
  z-index: 100;
  display: none;
}

div.scrollmenu input[type="radio"]:checked + label {
  background: rgb(57, 62, 70);
  color: rgb(250, 250, 250);
}




.wierszTabela{
  display: flex;
  width: 100%;
  align-items: center;
  padding: 10px 0 0;
  justify-content: space-between;
}

.elementNazwa{
  align-items: center;
  height: 100%;
  width: 100%;
  vertical-align: middle;

  display: flex;
  justify-content: space-between;
}

.elementTabela{
  display: inline-block;
  height: auto;
  align-items: baseline;
  justify-content: space-between;
  height: 100%;
  vertical-align: middle;
}

.elementOnoff{
  font-size: 0.7em;
  text-align: center;
  padding: 0px 10px;
}

.elementrazem{
  display: flex;
}





.okna{
  padding: 20px 0;
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 15px;
}


.okienko{
  margin: 0 auto;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 0.5em rgb(57 62 70 / 26%);
  padding: 10px;
  background-color: rgb(250, 250, 250);
}



.okienko b{
  font-size: 20px;
  font-weight: bolder;
  text-align:  right;
  margin-right: auto;
}

.kategoria{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.kwotaKategoria{
  display: block;
  align-items: flex-end;
  justify-content: space-between;
}
.kwotaRealna{
}

.kwotaPlanowana{
  text-align: right;
  font-size: 0.6em;
}



.tytulokienko{
  padding: 5px;
  border-radius: 10px;
  color: rgb(34, 40, 49);
  font-size: 20px;
  font-weight: bolder;
  font-stretch: ultra-condensed;
  font-shadow: 0 0 0.5em rgb(57 62 70 / 26%);
}



.oknaPodsumowanie{
  padding: 10px 0;
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 15px;
  align-items: baseline;
}

.okienkoPodsumowanie{
  margin: 0 auto;
  border-radius: 10px;
  padding: 5px;
  font-size: 20px;
  text-align: center;
  justify-content: center;
  font-weight:  bold;
}

.okienkoPodsumowaniePodpis {
  text-align: center;
  justify-content: center;
  padding: 5px;
  font-size: 10px;
  font-weight:  bold;
}

.maleOkna{
  padding: 10px 0;
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 15px;
}

.maleOkienko{
  margin: 0 auto;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 0.5em rgb(57 62 70 / 26%);
  padding: 10px;
  background-color: rgb(250, 250, 250);
}




.BarZew{
  width: 100%;
  background-color: rgb(200, 200, 200);
  height: 0.5em;
  border-radius: 10px;
  display: flex;
}
.bar5{
  background-color: rgb(34, 40, 49);
  height: 100%;
  width: 5%;
  display: inline-block;
}
.bar5L{
  background-color: rgb(34, 40, 49);
  height: 100%;
  width: 5%;
  display: inline-block;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.bar5R{
  background-color: rgb(34, 40, 49);
  height: 100%;
  width: 5%;
  display: inline-block;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.logowanie {
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  background-color: #fff;
  text-align: center;
  max-width: 500px;
  box-shadow: 0 0 0.5em rgb(57 62 70 / 26%);
  padding: 10px;

}

.btransakcje {
  display:  inline-block;
}


#red {
  box-shadow: 0 0 0.5em rgb(200 0 0 / 26%);
}
#redButton {
  color: rgb(255 105 105);
}

#green {
  box-shadow: 0 0 0.5em rgb(0 200 0 / 26%);
}
#blue {
  box-shadow: 0 0 0.5em rgb(0 0 200 / 26%);
}
#Podsumowanie {
  background: rgb(255, 211, 105);
}
#btnDel {
  display: none;
}





.OknoKwota {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 15px;
}

.OknoKwotaL{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  margin-bottom: 5px;
}
.OknoKwotaR{
  display: none;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
}

.OknoKwotaC{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 5px;
}

.maleOknoKwota{
}

.cyfry {
  width: 100%;
}

.kwotaonoff{
  font-size: 20px;
}




@media (max-width: 670px) {
  .navbar{
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  .header {
    display: none;
  }
  .okna{
    grid-template-columns: repeat(1, 1fr);
  }
  .maleOkna{
    grid-template-columns: repeat(2, 1fr);
  }
  .duch10Res {
    width: 100%;
    height: 0px;
  }
  .OknoKwotaR {
    margin-left: 0;
    margin-right: 0;
    display: grid;
    position: fixed;
    width: 100%;
    bottom: 70px;
  }
  .kwotaonoff{
    display: none;
  }
  .OknoKwotaL{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5px;
    margin-bottom: 5px;
    position: fixed;
    bottom: 235px;
  }
  #btnDel {
    display: block;
  }
  #sm3 {
    position: fixed;
    bottom: 280px;
  }
  .scrollmenu2{
    position: fixed;
    bottom: 330px;
  }
  #sm1 {
    position: fixed;
    bottom: 380px;
  }

}