@import url(../style.css);
#sort {
	display: grid;
    grid-template-areas:
    "baner1 baner2"
    "metoda wykres"
    "liczba wykres"
    "szybkosc wykres"
    "losowanie wykres"
    "losowanie wykrestmp"
    "statystyka statystyka";
    grid-template-columns: 2fr 8fr;
}
#baner1 {
	grid-area: baner1;
	background-color: #adf;
}
#baner2 {
	grid-area: baner2;
	background-color: #cef;
	text-align: center;
}
#opis {
	grid-area: opis;
	width: 100%;
}
#opis summary{
	font: 14pt monospace;
}
#opis div{
	padding:10px;
	background-color: #ffdc;
	border:2px solid #aaa;
	border-radius:10px;
	position: fixed;
}
#opisokno {
	position:fixed;
	background-color: #fdde;
	width: 76%;
	height: 85%;
	left:23%;
}
#wykres {
	grid-area: wykres;
	background-color: #cef;
	height:520px;
	margin: 10px auto;
	padding:5px;
	vertical-align: bottom;
	
	box-shadow: 7px 7px 15px darkblue;
	display: inline-flex;
	align-items:flex-end;
}
#baner h3 {
	background-color: #cef;
	text-align: center;
	padding: 0 200px;
}
#wykres div {
	width:2px;
	height: 5px;
	background-color: blue;
	margin-left: 1px;
}
#wykrestmp {
	grid-area: wykrestmp;
	background-color: #daf;
	height:60px;
	margin: 10px auto;
	vertical-align: bottom;
	display: inline-flex;
	align-items:flex-end;
}
#wykrestmp div {
	width:2px;
	height: 5px;
	background-color: green;
	margin-left: 1px;
}
#metoda {
	grid-area: metoda;
	background-color: #fed;
	text-align: center;
}
#metoda select {
	overflow: hidden;
	padding:5px;
	font-size:110%;
}
#metoda option {
	padding: 1px 20px;
	text-align: center;
}
#metoda option.aktywna {
	background-color: #f84;
	color:black;

}
#liczba {
	grid-area: liczba;
	background-color: #fed;
}
#liczba>div{
	display: inline-flex;
}
#liczba>div>div{
	width: 50px;
	text-align: center;
}
#statystyka {
	grid-area: statystyka;
	background-color: #afd;
}
#statystyka table,#statystyka th, #statystyka td {
	border: 1px solid green;
	border-collapse: collapse;
	padding: 2px 10px;
}
#losowanie {
	grid-area: losowanie;
	background-color: #fed;
}
#losowanie select {
	overflow: hidden;
}
#szybkosc {
	grid-area: szybkosc;
	background-color: #fed;
}
#baner1 h1 , #liczba h1 , #szybkosc h1 , #losowanie h1{
	text-align: center;
	font: normal 18pt  sans-serif;
	font-weight: bold;
	background-color: #aad;
	border-radius: 5px;
}