o#tactics{
	transition: background-color .4s;
}

#ball{
	opacity: 0;
}



#tactics[fullscreenstatus="1"]{
}
sorter{
	height: 40px;
	width: 40px;
	display: flex;
	justify-content: center;
	align-items: center;	
	margin-left: -45px;
}

.sorterIcon{
	height: 20px;
	width: 20px;
	fill: rgba(208,208,208,1.00);
	display: block;
}
.sorterIcon .ned, .sorterIcon .opp{
	fill: transparent;
}

#playSnaps[status="0"] .stop{
	fill: transparent;
}
#playSnaps[status="1"] .play{
	fill: transparent;
}
/*
nameplayer:last-of-type .sorterIcon .ned{
	fill: transparent;
}
nameplayer:first-of-type .sorterIcon .opp{
	fill: transparent;
}
*/
scaleslider{
	width: 100%;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#slider{
	height: 1px;
	width: 100%;
	max-width: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: gray;
}

#slider .knob {
	display: flex;
	height: 40px;
	width: 40px;
	border-radius: 100px;
	position: relative;
	overflow: visible;
	justify-content: center;
	align-items: center;
}
#slider .knob innerknob {
	display: block;
	height: 50%;
	width: 50%;
	background-color: gray;
	border-radius: 100px;
}

bunn svg {fill:white;}
bunn button {
	border-radius: 5px;
	height: 40px;
	width: 40px;
	box-sizing: border-box;
	min-height: unset;
	min-width: unset;
	transition: all .2s;
	touch-action: manipulation;

}

bunn tools{
	position:absolute;
	right:4px;
	display: flex;
	gap:4px;
	height: 100%;
	width: auto;
	top:0;
}
bunn maintools, bunn editsnapshot{
	position:relative;
	display: flex;
	gap:4px;
	height: 100%;
	width: auto;
	align-items: center;
	flex-direction: row-reverse;
}
snapshots_outher{
	height: 100%;
	width: calc(100% - 88px);
	display: flex;
	position: relative;
	justify-content: flex-start;
	align-items: center;
	overflow: hidden;
	-webkit-mask-image: -webkit-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(00,0,0,1) 4px, rgba(0,0,0,1) calc(100% - 8px), rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(00,0,0,1) 4px, rgba(0,0,0,1) calc(100% - 8px), rgba(0,0,0,0) 100%);
}
animationtools{
	width: 100%;
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
}
snapshots{
	display:flex;
	gap:4px;
	margin-right: 10px;
	width: 100%;
}

topp{height: 40px;}
bunn{position: relative;}
bunn bunn_inner{
	display:flex;
	align-items: center;
	justify-content: space-between; 
	gap:4px;
	height: 100%;
	width: 100%;
	padding:0 0px;
}
nametag{
	position: absolute;
	background-color: rgba(0,0,0,0.20);
	padding: .2em 1.2em;
	box-sizing: border-box;
	text-shadow: 0 0 2px black;
	border-radius: 100px;
	font-weight: 700;
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
}
ytre_bane{
	display:flex;
	justify-content: center;
	align-items: center;
}
/* Chrome, Safari, Edge, Opera */
spillerspecs input::-webkit-outer-spin-button,
spillerspecs input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
spillerspecs input[type=number] {
  -moz-appearance: textfield;
	text-align: center;
	width: 40px;
}
spillerspecs {
	display: flex;flex-wrap: wrap; gap:1em;margin-top: 1em;justify-content: center;align-items: center;
}
spillerspecs lag{
	display: flex;flex-direction: column;justify-content: center;align-items: center;
}			
spillerspecs team1, spillerspecs team2{
	display: flex;justify-content: center;align-items: center;flex-direction: column;
}
spillerspecs team1 input[type=number]{
	background-color: var(--team1p);
	color:var(--team1s);
}
spillerspecs team2 input[type=number]{
	background-color: var(--team2p);
	color:var(--team2s);
}
spillerspecs input{
	height: 40px; margin-bottom: 3px;
	border-radius: 100px;
	border: solid 0px transparent;
	box-sizing: border-box;
	font-size: 1.4em;
}
spillerspecs input.navn{
	padding: 10px 30px;
}
spillerspecs #nt1p1 input.nr{
	background-color: var(--team1s);
	border: solid var(--team1p) 3px;
	color:var(--team1p)
}
spillerspecs #nt2p1 input.nr{
	background-color: var(--team2s);
	border: solid var(--team2p) 3px;
	color:var(--team2p)
}
nameplayer{
	display: flex;gap:2px;width: 100%;text-align: center;
}

#MENY_OK{
	width: 100%;
	margin-top: 2em;
	background-color: green;
	border-width: 0;
	max-width: 350px;
}
gruppe {justify-content: center;align-items: center;display: flex;flex-direction: column;margin-top: 10px;width: 100%;}
farger {display: flex;align-items: center;justify-content: center;flex-direction: row;gap:4px}
farger team {border-radius: 100px; overflow: hidden; display: flex;justify-content: center;align-items: center;height: 50px;width: 50px;max-height: 50px;max-width: 50px;min-height: 50px;min-width: 50px;}
input[type="color"]{
	display: block;
	height: 100px;
	width: 100px;
	min-width: 100px;
	box-sizing: border-box;
}
input[type="color"] div div {display: flex;justify-content: center;align-items: center;}
:root {
  --team1p: red;
  --team1s: white;
  --team2p: blue; 
  --team2s: white; 
  --animationActive: rgba(50,200,0,0.3);
}
editsnapshot button{background-color: var(--animationActive);}
formasjon team1, formasjon team2{display: flex;gap:4px;flex-wrap: wrap;justify-content: center;align-items: center;}
formasjon team2{margin-top: .5em;}
formasjon{
	display: flex;
	flex-direction: column;
	gap:4px;
}
brytere{margin-top: 10px; display:flex;max-width: 90%;flex-wrap: wrap;justify-content: center;align-items: flex-end;flex-direction: column;}
bryter{display:flex;flex-direction: row;justify-content: center;align-items: center;padding: 0 1em;gap:10px;margin-top:4px;}


arrow{
	transform-origin: center;
	position: absolute;
	display: flex;
	height: 100%;
	height: 100%;
	justify-content: center;
	align-content: center;
	align-items: center;
	opacity:0;
}
player[f1="1"]{z-index: 0;}
player[team="team1"] arrow svg {fill:var(--team1p)}
player[team="team2"] arrow svg {fill:var(--team2p)}
player[f1="1"] arrow{
	opacity:1;
}
arrow svg{
	display: flex;
	height: 15px;
	width: 15px;
	justify-content: center;
	align-content: center;
	align-items: center;
}
close{
	display: flex;
	width: 50px;
	height: 50px;
	justify-content: center;
	align-items: center;
	position: absolute;
	top:0;
	right: 0;
}
by {margin-top: 3em;opacity: .5;}
logo{
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
#close{height: 100%;width: 100%;fill:gray;max-height: 20px;max-width: 20px;}
topp_inner{display: flex;justify-content: center;align-items: center;width: 300px;height: 100%}
offsideBryter{
	display: flex;justify-content: center;align-items: center;
}

bryter outer{
	width: 60px;
	height: 40px;
	display: flex;
	border-radius: 100px;
	padding: .3em .3em;
	border: solid 1px gray;
	background-color: transparent;
	color: white;
	margin: 0 1px;
	border-radius: 100px;

	justify-content: center;
	align-items:center;
}
bryter inner{
	width: 30px;
	height: 30px;
	background-color: rgba(128,128,128,0.2);
	display: block;
	border-radius: 100px;
	margin: 0 20px 0 0;
	transition: all .4s;
	flex: 1 1 1;
	height: 100%;
	width: 100%;
}
bryter[status="1"] inner{
	background-color: green;
	margin:0 0 0 20px;
	box-shadow: 0 0 10px green;
}
text{
	font-size: 1.0em;text-transform: uppercase;letter-spacing: .1em;margin-bottom: .5em;letter-spacing: .2em;
}
meny{
	height: 100%;
	width: 100%;
	background-color: rgba(22,22,22,.95);
	display: flex;
	position: absolute;
	z-index: 1000;
	flex-direction: column;

	font-family: 'Open Sans', sans-serif;
	padding: 20px 40px;


	width: 100%;
	flex:1;
	flex-basis: auto;
	display: flex;
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	align-items: center;
	justify-content: flex-start;
	gap:4px;

	overflow-y: auto;
	overflow-x: hidden;

}

hamburger{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	width: 40px;
	position: relative;
}

svg#logo{position: relative;left:20px;max-height: 30px;max-width: 200px;justify-content: flex-start;height: 100%;}

hamburger svg{ fill:white; width: 100%;height: 100%;overflow: visible;
}
topp, bunn{
	display: flex;justify-content: center;align-items:center;position: relative; padding: 0 0px;box-sizing: border-box;
}
bunn{
	background-color: transparent;
	display: flex;
	position: relative;
	bottom: 0;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
button{
	padding: .5em .5em;
	border: solid 1px gray;
	background-color: transparent;
	color:white;
	margin: 0 0;
	border-radius: 100px;
	min-width: 50px;
	min-height: 50px;
}

button.active{
	background-color: rgba(128,128,128,0.2)
		
}



snapshots button {position: relative;min-width: 40px;}
snapshots button.active{
	border: solid 3px white;
	background-color: rgba(255,200,0,0.20)
}





team1 button.active{
	background-color: var(--team1p);
		border-color: var(--team1p);
}
team2 button.active{
	background-color: var(--team2p);
		border-color: var(--team2p);
}
players{
	display: flex;
	flex-direction: row;
	padding: 0 40px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap:4px;
}
bunn formasjon{
	display: flex;
	flex-direction: row;
}

offside_frame{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100px;
	height: 100px;
	display:flex;
}
.offside{
	width: 2px;
	height: 2px;
	background-color:  var(--team2p);
	position: absolute;
	display: block;
	z-index: 10;
	opacity: 1;
	box-shadow: 0 0 3px white;

}
offside2.offside{
	background-color: var(--team1p);
}
[team="team1"]{
	background-color: var(--team1p);
	border: var(--team1p) solid 1px;
	color: var(--team1s)
}
[team="team1"][posisjon="keeper"]{
	background-color: var(--team1s);
	border: var(--team1p) solid 3px;
	color:var(--team1p);
}			
[team="team2"]{
	background-color: var(--team2p);
	border: var(--team2p) solid 1px;
	color: var(--team2s)
}
[team="team2"][posisjon="keeper"]{
	background-color: var(--team2s);
	border: var(--team2p) solid 3px;
	color:var(--team2p);
}
player{
	border-radius: 100vmax;
	width: 3rem;
	height: 3rem;
	min-width: 30px;
	min-height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Open Sans', sans-serif;
	position: absolute;
	font-weight: 800;
	box-shadow: 0px 0px 0px white;
	margin-bottom: 0em;
	transition: box-shadow .4s, border .2s;
	z-index: 1;
}
player[f1="1"]{
	border-width: 2px;
	border-style: dotted;
	border-color: white;
}
player nr{
	transition: margin-bottom .4s;
}

player[ballhaver="1"]{
	box-shadow: 0 0 20px white,0 0 4px white,0 0 40px white;
	z-index: 100;
}
player[ballhaver="1"] nr{
	margin-bottom: 5em;
}

ball{
	background-color: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
	width: 3rem;
	height: 3rem;
	border-radius: 100vmax;
	position: relative;
}
ball inner{
	background-color: transparent;
	background-image: url('ball.png');
	background-position: center;
	background-size: 120%;
	z-index: 100;
	box-shadow: 0px 0px 10px black,0px 0px 15px black;
	width: 2rem;
	height: 2rem;
	border-radius: 100vmax;			
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	overflow: hidden;
	background-color: rgba(22,22,22,1);
	color: white;
	font-family: 'Open Sans', sans-serif;
}
html{
	font-size: 12px;
}
section {
	position: fixed;
	top: 0;
	left: 0;
	outline: none;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: black;
}
topp{
	background-color: transparent;
	display: flex;
	position: relative;
	top:0;
	flex-basis: 40px;
}
bunn {
	background-color: transparent;
	display: flex;
	position: relative;
	bottom: 0;
	flex-basis: 0px;
}
topp,bunn{
}
main{
	background-color: transparent;
	width: 100%;
	flex:1;
	flex-basis: auto;
	overflow: hidden;
	display: flex;
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	align-items: center;
	justify-content: center;
}
main_inner{
	background-color: transparent;
	width: 100%;
	flex:1;
	flex-basis: auto;
	overflow: hidden;
	display: flex;
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	align-items: center;
	justify-content: center;
}
bane{
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
}

.noselect, player {
  -webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	 -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Old versions of Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none; /* Non-prefixed version, currently
								  supported by Chrome, Edge, Opera and Firefox */
}


scaleslider{
	width: 100%;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#slider{
	height: 1px;
	width: 100%;
	max-width: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: gray;
}

#slider .knob {
	display: flex;
	height: 40px;
	width: 40px;
	border-radius: 100px;
	position: relative;
	overflow: visible;
	justify-content: center;
	align-items: center;
}
#slider .knob innerknob {
	display: block;
	height: 50%;
	width: 50%;
	background-color: gray;
	border-radius: 100px;
}

bunn svg {fill:white;}
bunn button {
	border-radius: 5px;
	height: 40px;
	width: 40px;
	box-sizing: border-box;
	min-height: unset;
	min-width: unset;
	transition: all .2s;
	touch-action: manipulation;
}
topp button {
	border-radius: 5px;
	height: 40px;
	width: 40px;
	box-sizing: border-box;
	min-height: unset;
	min-width: unset;
	transition: all .2s;
	touch-action: manipulation;
	border: none;
	fill:white;
	padding: 1px;
}
bunn tools{
	position:absolute;
	right:4px;
	display: flex;
	gap:4px;
	height: 100%;
	width: auto;
	top:0;
}
topp tools{
	right:4px;
	display: flex;
	gap:4px;
	height: 100%;
	width: auto;
	top:0;
	flex-grow: 1;
	justify-content: end;
	margin-right: 20px;
}
bunn maintools, bunn editsnapshot{
	position:relative;
	display: flex;
	gap:4px;
	height: 100%;
	width: auto;
	align-items: center;
	flex-direction: row-reverse;
}
snapshots_outher{
	height: 100%;
	width: calc(100% - 88px);
	display: flex;
	position: relative;
	justify-content: flex-start;
	align-items: center;
	overflow: hidden;
	-webkit-mask-image: -webkit-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(00,0,0,1) 4px, rgba(0,0,0,1) calc(100% - 8px), rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(00,0,0,1) 4px, rgba(0,0,0,1) calc(100% - 8px), rgba(0,0,0,0) 100%);
}
animationtools{
	width: 100%;
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
}
snapshots{
	display:flex;
	gap:4px;
	margin-right: 10px;
	width: 100%;
}

topp{height: 40px;}
bunn{position: relative;}
bunn bunn_inner{
	display:flex;
	align-items: center;
	justify-content: space-between; 
	gap:4px;
	height: 100%;
	width: 100%;
	padding:0 0px;
}
nametag{
	position: absolute;
	background-color: rgba(0,0,0,0.20);
	padding: .2em 1.2em;
	box-sizing: border-box;
	text-shadow: 0 0 2px black;
	border-radius: 100px;
	font-weight: 700;
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
}
ytre_bane{
	display:flex;
	justify-content: center;
	align-items: center;
}
/* Chrome, Safari, Edge, Opera */
spillerspecs input::-webkit-outer-spin-button,
spillerspecs input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
spillerspecs input[type=number] {
  -moz-appearance: textfield;
	text-align: center;
	width: 40px;
}
spillerspecs {
	display: flex;flex-wrap: wrap; gap:1em;margin-top: 1em;justify-content: center;align-items: center;
}
spillerspecs lag{
	display: flex;flex-direction: column;justify-content: center;align-items: center;
}			
spillerspecs team1, spillerspecs team2{
	display: flex;justify-content: center;align-items: center;flex-direction: column;
}
spillerspecs team1 input[type=number]{
	background-color: var(--team1p);
	color:var(--team1s);
}
spillerspecs team2 input[type=number]{
	background-color: var(--team2p);
	color:var(--team2s);
}
spillerspecs input{
	height: 40px; margin-bottom: 3px;
	border-radius: 100px;
	border: solid 0px transparent;
	box-sizing: border-box;
	font-size: 1.4em;
}
spillerspecs input.navn{
	padding: 10px 30px;
}
spillerspecs #nt1p1 input.nr{
	background-color: var(--team1s);
	border: solid var(--team1p) 3px;
	color:var(--team1p)
}
spillerspecs #nt2p1 input.nr{
	background-color: var(--team2s);
	border: solid var(--team2p) 3px;
	color:var(--team2p)
}
nameplayer{
	display: flex;gap:2px;width: 100%;text-align: center;
}

#MENY_OK{
	width: 100%;
	margin-top: 2em;
	background-color: green;
	border-width: 0;
	max-width: 350px;
}
gruppe {justify-content: center;align-items: center;display: flex;flex-direction: column;margin-top: 10px;width: 100%;}
farger {display: flex;align-items: center;justify-content: center;flex-direction: row;gap:4px}
farger team {border-radius: 100px; overflow: hidden; display: flex;justify-content: center;align-items: center;height: 50px;width: 50px;max-height: 50px;max-width: 50px;min-height: 50px;min-width: 50px;}
input[type="color"]{
	display: block;
	height: 100px;
	width: 100px;
	min-width: 100px;
	box-sizing: border-box;
}
input[type="color"] div div {display: flex;justify-content: center;align-items: center;}
:root {
  --team1p: red;
  --team1s: white;
  --team2p: blue; 
  --team2s: white; 
  --animationActive: rgba(50,200,0,0.3);
}
editsnapshot button{background-color: var(--animationActive);}
formasjon team1, formasjon team2{display: flex;gap:4px;flex-wrap: wrap;justify-content: center;align-items: center;}
formasjon team2{margin-top: .5em;}
formasjon{
	display: flex;
	flex-direction: column;
	gap:4px;
}
brytere{margin-top: 10px; display:flex;max-width: 90%;flex-wrap: wrap;justify-content: center;align-items: flex-end;flex-direction: column;}
bryter{display:flex;flex-direction: row;justify-content: center;align-items: center;padding: 0 1em;gap:10px;margin-top:4px;}


arrow{
	transform-origin: center;
	position: absolute;
	display: flex;
	height: 100%;
	height: 100%;
	justify-content: center;
	align-content: center;
	align-items: center;
	opacity:0;
}
player[f1="1"]{z-index: 0;}
player[team="team1"] arrow svg {fill:var(--team1p)}
player[team="team2"] arrow svg {fill:var(--team2p)}
player[f1="1"] arrow{
	opacity:1;
}
arrow svg{
	display: flex;
	height: 15px;
	width: 15px;
	justify-content: center;
	align-content: center;
	align-items: center;
}
close{
	display: flex;
	width: 50px;
	height: 50px;
	justify-content: center;
	align-items: center;
	position: absolute;
	top:0;
	right: 0;
}
by {margin-top: 3em;opacity: .5;}
logo{
	height: 100%;
	width: 240px;
	display: flex;
	justify-content: center;
	align-items: center;
	fill:white;
}
logo svg{width: 200px;}
#close{height: 100%;width: 100%;fill:gray;max-height: 20px;max-width: 20px;}
topp_inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 300px;
	height: 100%}
offsideBryter{
	display: flex;justify-content: center;align-items: center;
}

bryter outer{
	width: 60px;
	height: 40px;
	display: flex;
	border-radius: 100px;
	padding: .3em .3em;
	border: solid 1px gray;
	background-color: transparent;
	color: white;
	margin: 0 1px;
	border-radius: 100px;

	justify-content: center;
	align-items:center;
}
bryter inner{
	width: 30px;
	height: 30px;
	background-color: rgba(128,128,128,0.2);
	display: block;
	border-radius: 100px;
	margin: 0 20px 0 0;
	transition: all .4s;
	flex: 1 1 1;
	height: 100%;
	width: 100%;
}
bryter[status="1"] inner{
	background-color: green;
	margin:0 0 0 20px;
	box-shadow: 0 0 10px green;
}
text{
	font-size: 1.0em;text-transform: uppercase;letter-spacing: .1em;margin-bottom: .5em;letter-spacing: .2em;
}
meny{
	height: 100%;
	width: 100%;
	background-color: rgba(22,22,22,.95);
	display: flex;
	position: absolute;
	z-index: 1000;
	flex-direction: column;

	font-family: 'Open Sans', sans-serif;
	padding: 20px 40px;


	width: 100%;
	flex:1;
	flex-basis: auto;
	display: flex;
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	align-items: center;
	justify-content: flex-start;
	gap:4px;

	overflow-y: auto;
	overflow-x: hidden;

}


svg#logo{position: relative;left:20px;max-height: 30px;max-width: 200px;justify-content: flex-start;height: 100%;}

hamburger svg{ fill:white; width: 100%;height: 100%;overflow: visible;
}
topp, bunn{
	display: flex;justify-content: center;align-items:center;position: relative; padding: 0 0px;box-sizing: border-box;
}
bunn{
	background-color: transparent;
	display: flex;
	position: relative;
	bottom: 0;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
button{
	padding: .5em .5em;
	border: solid 1px gray;
	background-color: transparent;
	color:white;
	margin: 0 0;
	border-radius: 100px;
	min-width: 50px;
	min-height: 50px;
}

button.active{
	background-color: rgba(128,128,128,0.2)
		
}



snapshots button {position: relative;min-width: 40px;}
snapshots button.active{
	border: solid 3px white;
	background-color: rgba(255,200,0,0.20)
}





team1 button.active{
	background-color: var(--team1p);
		border-color: var(--team1p);
}
team2 button.active{
	background-color: var(--team2p);
		border-color: var(--team2p);
}
players{
	display: flex;
	flex-direction: row;
	padding: 0 40px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap:4px;
}
bunn formasjon{
	display: flex;
	flex-direction: row;
}

offside_frame{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
/*
	width: 100px;
	height: 100px;
*/
	display:flex;
	opacity: 0;
}
.offside{
	width: 2px;
	height: 2px;
	background-color:  var(--team2p);
	position: absolute;
	display: block;
	z-index: 10;
	opacity: 1;
	box-shadow: 0 0 3px white;

}
offside2.offside{
	background-color: var(--team1p);
}
[team="team1"]{
	background-color: var(--team1p);
	border: var(--team1p) solid 1px;
	color: var(--team1s)
}
[team="team1"][posisjon="keeper"]{
	background-color: var(--team1s);
	border: var(--team1p) solid 3px;
	color:var(--team1p);
}			
[team="team2"]{
	background-color: var(--team2p);
	border: var(--team2p) solid 1px;
	color: var(--team2s)
}
[team="team2"][posisjon="keeper"]{
	background-color: var(--team2s);
	border: var(--team2p) solid 3px;
	color:var(--team2p);
}
player{
	border-radius: 100vmax;
	width: 3rem;
	height: 3rem;
	min-width: 30px;
	min-height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Open Sans', sans-serif;
	position: absolute;
	font-weight: 800;
	box-shadow: 0px 0px 0px white;
	margin-bottom: 0em;
	transition: box-shadow .4s, border .2s;
	z-index: 1;
}
player[f1="1"]{
	border-width: 2px;
	border-style: dotted;
	border-color: white;
}
player nr{
	transition: margin-bottom .4s;
}

player[ballhaver="1"]{
	box-shadow: 0 0 20px white,0 0 4px white,0 0 40px white;
	z-index: 100;
}
player[ballhaver="1"] nr{
	margin-bottom: 5em;
}

ball{
	background-color: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 100;
	width: 3rem;
	height: 3rem;
	border-radius: 100vmax;
	position: relative;
}
ball inner{
	background-color: transparent;
	background-image: url('ball.png');
	background-position: center;
	background-size: 120%;
	z-index: 100;
	box-shadow: 0px 0px 10px black,0px 0px 15px black;
	width: 2rem;
	height: 2rem;
	border-radius: 100vmax;			
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	overflow: hidden;
	background-color: rgba(22,22,22,1);
	color: white;
	font-family: 'Open Sans', sans-serif;
}
html{
	font-size: 12px;
}
section {
	position: fixed;
	top: 0;
	left: 0;
	outline: none;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}
topp{
	background-color: transparent;
	display: flex;
	position: relative;
	top:0;
	flex-basis: 40px;
}
bunn {
	background-color: transparent;
	display: flex;
	position: relative;
	bottom: 0;
	flex-basis: 0px;
}
topp,bunn{
}
main{
	background-color: transparent;
	width: 100%;
	flex:1;
	flex-basis: auto;
	overflow: hidden;
	display: flex;
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	align-items: center;
	justify-content: center;
}
main_inner{
	background-color: transparent;
	width: 100%;
	flex:1;
	flex-basis: auto;
	overflow: visible;
	display: flex;
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	align-items: center;
	justify-content: center;
}
bane{
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
}

.noselect, player {
  -webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	 -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Old versions of Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none; /* Non-prefixed version, currently
								  supported by Chrome, Edge, Opera and Firefox */
}