/*  PODZIAŁ EKRANU DLA MOBILNYCH START*/

/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
		
		
		
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}


    tr {
   /*    margin: 0 0 1rem 0; */
    }
      
    tr:nth-child(odd) {
    /*   background: #ccc; */
    }
    
		td {
			/* Behave  like a "row" 
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%; */
						
		}

		td:before {
			/* Now like a table header */
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			white-space: nowrap;
		font-family: 'Open Sans',sans-serif;
		
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		td.pierwszy:not(:empty):nth-of-type(1):before { content: "h0,85m"; }
		td:not(:empty):nth-of-type(2):before { content: "h1,55m"; }
		td:not(:empty):nth-of-type(3):before { content: "h2,35m"; }
		td:not(:empty):nth-of-type(4):before { content: "h3,10m"; }
		td:not(:empty):nth-of-type(5):before { content: "h3,85m"; }
		td:not(:empty):nth-of-type(6):before { content: "h4,60m"; }
		td:not(:empty):nth-of-type(7):before { content: "h5,35m"; }
		td:not(:empty):nth-of-type(8):before { content: "h6,10m"; }




	}


 /*  PODZIAŁ EKRANU DLA MOBILNYCH KONIEC */





input {
  
  /*   width: 100%;
    min-width: 100%; 
    padding-bottom: 25px;
    font-size: 20px; */
    }
    
    table {
  
  overflow: hidden; 
  position: relative; 
  z-index: 0;
  width: 100%;
  
}


td, th {
  padding-top: 19px;
  position: relative;
  outline: 0;
  color: #656565;
  
  text-align: center;

}

td:not(:empty):hover { background-color: #1b4a72;
	color: white;
}

body:not(.nohover) tbody tr:hover {
  background-color: #efefef;
}

td:hover::after,
thead th:not(:empty):hover::after,
td:focus::after,
thead th:not(:empty):focus::after { 
  content: '';  
  height: 10000px;
  left: 0;
  position: absolute;  
  top: -5000px;
  width: 100%;
  z-index: -1;
}

td.linia:not(:empty):hover:after,
th:not(:empty):hover::after  {
  background-color: #efefef;
}

td:focus::after,
th:focus::after {
  background-color: lightblue;
}

/* Focus stuff for mobile */
td:focus::before,
tbody th:focus::before {
  background-color: lightblue;
  content: '';  
  height: 100%;
  top: 0;
  left: -5000px;
  position: absolute;  
  width: 10000px;
  z-index: -1;
}