/*  PODZIAŁ EKRANU DLA MOBILNYCH START*/

 body:not(.woocommerce-cart) .main-content table tr:nth-child(2n+1) {
    background: unset;
}
 section#article01-9z h2 {
    /* color: #004c75; */
    font-weight: 600;
}

body:not(.woocommerce-cart) .main-content th, body:not(.woocommerce-cart) .main-content td, .main-content table {
    border: 0 !important;
    background-color: unset ;
}
	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%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		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: "h 0,85m - "; }
		td:not(:empty):nth-of-type(2):before { content: "h 1,55m - " !important; }
		td:not(:empty):nth-of-type(3):before { content: "h 2,35m - !important"; }
		td:not(:empty):nth-of-type(4):before { content: "h 3,10m - !important"; }
		td:not(:empty):nth-of-type(5):before { content: "h 3,85m - !important"; }
		td:not(:empty):nth-of-type(6):before { content: "h 4,60m - !important"; }
		td:not(:empty):nth-of-type(7):before { content: "h 5,35m - !important"; }
		td:not(:empty):nth-of-type(8):before { content: "h 6,10m - !important"; }




	}
@media screen and (max-width: 1024px) {
	
	table, tbody, th, td, tr{
    display:block !important;
}
	 thead{
    display:block !important;
}
	
		td.pierwszy:not(:empty):nth-of-type(1):before { content: "h 0,85m - "; }
		td:not(:empty):nth-of-type(2):before { content: "h 1,55m - "; }
		td:not(:empty):nth-of-type(3):before { content: "h 2,35m - "; }
		td:not(:empty):nth-of-type(4):before { content: "h 3,10m - "; }
		td:not(:empty):nth-of-type(5):before { content: "h 3,85m - "; }
		td:not(:empty):nth-of-type(6):before { content: "h 4,60m - "; }
		td:not(:empty):nth-of-type(7):before { content: "h 5,35m - "; }
		td:not(:empty):nth-of-type(8):before { content: "h 6,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: 9px;
  position: relative;
  outline: 0;
  color: #656565;
  
  

}

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

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

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 !important;
}

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;
}