/* Body */
body {
	background-color: #3399CC; 
	margin: 20px 0px 20px 0px;
	-webkit-text-size-adjust: 100%;
}

a {
	text-decoration: none;
}

	/* knapp */

.knapp-2, 
.knapp-2-a {
	margin: 0px 10px 0px 0px;
	margin-bottom: 5px;
	padding: 0px;
	width: fit-content;
	height: 30px;
	float: left;
	color: black;
	background-color: LightGray;
	border: 1px solid black;
	border-radius: 5px;
	text-align: center;
	font-weight: bold;
}

.knapp-none {
	display: inline;
	white-space: nowrap;
}

.knapp-2 {
	margin-bottom: 0px;
	padding: 0px 10px 0px 10px;
}

.knapp-2-a {
	width: 190px;
	text-align: left;
}

#rew,
.grid-cont-test div.knapp-2 {
	height: fit-content;
	display: flex;
	align-items: center;
}

	/* radio-toolbar */
.radio-toolbar {
	float: left;
}

.radio-toolbar input[type=checkbox],
.radio-toolbar input[type=radio] {
	opacity: 0;
	position: fixed;
	width: 0;
}

.radio-toolbar label {
	display: inline-block;
	background-color: #ddd;
	border: 1px solid #444;
	border-radius: 5px;
	width: 50px;
	text-align: center;
	font-size: 12px;
	vertical-align: top;
}

.radio-toolbar input[type=checkbox]:checked + label,
.radio-toolbar input[type=radio]:checked + label {
	color: white;
	background-color: blue;
}

.radio-toolbar input[type=checkbox]:focus + label,
.radio-toolbar input[type=radio]:focus + label {
	border: 1px dashed #444;
}

.radio-toolbar label:hover {
	background-color: #dfd;
}

	/* grid_container */
.grid-container,
.grid-cont-test {
	display: grid;
	grid-template-columns: auto;
	gap: 5px;
	width: 800px;
	margin: auto;
}

.grid-container > div, 
.grid-cont-test > div {
	background-color: #ffff99;
	border: 1px solid black;
	border-radius: 5px;
	padding: 5px 25px;
}

.vanster {
	margin-left: 20px;
}

.hoger {
	margin-right: 20px;
}

	/* gemensamt grid-container, grid-cont-test */
	/* grid-container */
.grid-container > div:nth-child(1) {
	font-size: 50px;
}

.grid-container > div:nth-child(1) span {
	display: inline-block;
}

.grid-container > div:nth-child(4) {
	//padding: 5px 25px;
	text-align: right;
}

	/* grid-cont-test */
.grid-cont-test {
	background-color: #3399CC;
	padding: 5px;
	border-radius: 5px;
	grid-template-columns: auto auto auto auto auto;
	grid-template-areas:
	'ett ett ett ett ett'
	'.   .   tva .   .  '
	'.   .   tva .   .  '
	'tre tre tre tre tre';
	width: 80%;
}

.grid-cont-test > div:nth-child(1) {
/*	grid-area: 1 / 1 / 2 / 6; */
	grid-area: ett;
}

.grid-cont-test > div:nth-child(2) {
/*	grid-area: 2 / 3 / 4 / 4; */
	grid-area: tva;
	font-size: 50px;
}

.grid-cont-test > div:nth-child(3) {
/*	grid-area: 4 / 1 / 5 / -1; */
	grid-area: tre;
}

.grid-cont-test {
	counter-reset: grcote;
}

.grid-cont-test > div:not(:nth-of-type(2))::before {
	counter-increment: grcote;
	content: '' counter(grcote) '';
}

.grid-cont-test > div:nth-of-type(2) > center::before {
	counter-increment: grcote;
	content: '' counter(grcote) '';
}

	/* media ola */
.flyt {
	float: left;
}

	/* view-box-710 */
.view-box-710 {
	width: 720px;
	overflow: auto;
/*	display: none; */
/*	visibility: hidden; */
}

	/* full-box-945 */
.full-box-945 {
	width: 960px;
}

	/* Grid till pop_rad */
.grid-container-pop-rubrik,
.grid-container-pop-rad {
	display: grid;
	grid-template-columns: 40px 605px 35px 40px 40px 100px 100px;
	gap: 0px;
}

#nyyy2 {
	max-height: 187px;
	overflow-x: hidden;
}

	/* span på 2 olika sätt */
.grid-container-pop-rubrik > div:nth-of-type(1) {
/*	grid-area: 1 / 1 / 1 / 5; */
	grid-column: span 4;
	background-color: black;
	color: white;
}

.grid-container-pop-rubrik > div:nth-of-type(2) {
/*	grid-area: 1 / 5 / 1 / 8; */
	grid-column: span 3;
	background-color: black;
	color: white;
}

.grid-container-pop-rubrik > div:nth-of-type(1) div:nth-of-type(1) {
	float: right;
}

	/* rubrik på 2 olika sätt */
.grid-container-pop-rubrik > div:nth-of-type(n+3):nth-of-type(-n+9) {
	background-color: black;
	color: white;
}

.grid-container-pop-rubrik > div:nth-of-type(n+3):nth-of-type(-n+8) a {
	color: white;
	text-decoration: underline;
	cursor: pointer;
}

.grid-container-pop-rad > div:nth-of-type(7n+1) {
	text-align: right;
}

.grid-container-pop-rad > div:nth-of-type(7n+1)::after {
	content: '\00a0';
}



.grid-container-pop-rad div:nth-child(14n+1),
.grid-container-pop-rad div:nth-child(14n+2),
.grid-container-pop-rad div:nth-child(14n+3),
.grid-container-pop-rad div:nth-child(14n+4),
.grid-container-pop-rad div:nth-child(14n+5),
.grid-container-pop-rad div:nth-child(14n+6),
.grid-container-pop-rad div:nth-child(14n+7) {
	background-color: blue;
	color: white;
} 

.grid-container-pop-rad div:nth-child(14n-6),
.grid-container-pop-rad div:nth-child(14n-5),
.grid-container-pop-rad div:nth-child(14n-4),
.grid-container-pop-rad div:nth-child(14n-3),
.grid-container-pop-rad div:nth-child(14n-2),
.grid-container-pop-rad div:nth-child(14n-1),
.grid-container-pop-rad div:nth-child(14n-0) {
	background-color: black;
	color: white;
} 

	/* randigt på 2 olika sätt */
.zgrid-container-pop-rad:nth-child(2n) {
	background-color: black;
	color: white;
}

.zgrid-container-pop-rad:nth-child(2n+1) {
	background-color: blue;
	color: white;
}

.stripe1:nth-child(2n+1) {
	background-color: lime;
}

.stripe2:nth-child(2n+1) {
	background-color: orangered;
}

.stripe3:nth-child(2n+1) {
	background-color: aquamarine;
}

.stripe4:nth-child(2n+1) {
	background-color: deeppink;
}

/* media ola */

button {
	font: inherit;
	cursor: pointer;
}

.meny {
	height: 0px;
	margin-top: 35px;
 	width: 0px;
	color: white;
 	overflow: hidden;
	position: fixed;
	background-color: rgba(255, 255, 255, 0);
	transition: 0.5s;
	z-index: 99;
	interpolate-size: allow-keywords;
}

.grid-meny {
	display: grid;
	grid-template-columns: auto;
	gap: 15px;
	width: fit-content;
	background-color: rgba(255, 255, 153, 1);
	border: 2px solid black;
	border-radius: 5px;
}

.grid-meny > div, 
.grid-meny > a > div {
	border-radius: 5px;
	color: black;
	cursor: pointer;
	padding: 5px 5px;
	font-weight: bold;
	white-space: nowrap;
}

.full > div,
.full > a > div {
	background-color: LightGray;
	border: 1px solid black;
}