*{
  box-sizing: border-box;
}
 html{
  background-color: #282828;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  margin: 0;
  padding: 0;
}

body{
  margin: 0;
  padding: 0;
  width: 100%;
}
.tabela{
  display: flex;
  flex-direction: column;
  width: 100%;
  
}
table {
  border-collapse: collapse;
  
}

table,
th,
td {
  text-align: center;
  font-size:15px;
}
tr{
  display: grid;
  width:100%;
  /* background-color: red; */
  grid-template-rows: 1fr;
  grid-row: inherit;
  grid-template-columns:50px repeat(5, 80px 150px); ; 
  grid-row: 1;
}

td{
  border: 1px solid black;
  padding: 5px;
  width: 100%;
  display: flex;
  text-align:center;
  justify-content: center;
  align-items: center;
  
}
td:nth-child(even){
  /* width:5%; */
  /* min-width: 50px; */
}

.inf1{
  background-color: cyan;
}
.inf2{
  background-color: #32a848;
}
.inf3{
  background-color: orange;
}

.date{
  background-color: #ccc;
  /* width: 60px; */
  /* min-width: 60px; */
  /* max-width: 60px; */
  /* height: 40px; */
  /* min-height: 50px; */
  overflow-wrap: break-word;
  /* flex : 2; */

}

b{
  color: #ccc;
  margin:auto;
  font-size:24px;
  text-align:center;
}
button{
  margin: 2px;
  width: 50px;
  height: 30px;
  cursor:pointer;
}

/* styl dla telefonów  */
@media only screen and (max-width: 600px) {
  tr{
    grid-template-columns:100%;
    /* grid-template-rows: 1fr; */
  }
  .date{
    /* większa wysokość */
    height: 50px;
    min-height: 50px;
    font-weight:bold;
  }
  td{
  border: 0px solid black;
  border-top: 0px solid black;
  }
  td:nth-child(even){
  border-top: 2px solid black;

  }
  .date{
    border-top: 2px solid black;
  }
  b{
    margin-top: 30px;
  }
  /* first child */
  b:nth-child(1){
    margin-top: 10px;
  }
}