@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300&display=swap');
body
{
	margin: 0 20px;
	font-family: 'Oxanium', sans-serif;
}

.cim
{
	margin-top: 10px;
	color:white;
	background-color: #3399ff;
	text-align:center;
	padding: 15px 0px;
	text-shadow: 0 0 15px #000000;
   	font-size: 36px;
	box-shadow: inset 0 0 12px #1e1e1e;
	box-shadow: 0 0 15px #1e1e1e;
	cursor: default;
	border-radius: 10px;
}
.kulon
{
	margin-top: 5px;
	width: max-content;
	color:white;
	background-color: red;
	text-align:center;
	padding: 15px 10px;
	text-shadow: 0 0 15px #000000;
   	font-size: 22px;
   	box-shadow: inset 0 0 10px #1e1e1e;
	box-shadow: 0 0 15px #1e1e1e;
	cursor: default;
	border-radius: 10px;
}
h3.alcim
{
	color:white; 
	border-bottom: 7px solid #3399ff; 
	background-color: black; 
	padding:5px
}

div.bal
{
	float:left;
	width:49%;
}

div.jobb
{
	float:right;
	width:49%;
}

p.szoveg
{
	font-size: 1.25em;
	text-align:justify;
	color:white;
	text-shadow:5px 5px 5px black;
}

p.login
{
	font-size: 18px;
	text-align:center;
	color:white;
	text-shadow:5px 5px 5px black;
}

table.menu
{
	background-color:black;
	border-color:#3399ff;
	border-width:3px;
	text-align:center;
	font-size:125%;
}

.mg
{
	border-radius: 5px;
	box-shadow: inset 0 0 10px black;
	padding: 5px;
	animation: unszinez 0.5s;
}
.mge
{
	border-radius: 5px;
	box-shadow: inset 0 0 10px black;
	padding: 5px;
	animation: unszineze 0.5s;
	color: rgb(3, 0, 168);
}
.mgr1
{
	border-radius: 5px;
	box-shadow: inset 0 0 10px black;
	padding: 5px;
	animation: unszinezr1 0.5s;
	color: turquoise;
}
.mg2
{
	border-radius: 5px;
	box-shadow: inset 0 0 10px black;
	padding: 5px;
	animation: unszinez2 0.5s;
	color: red;
}
.mg:hover
{
	cursor: pointer;
	animation: szinez 0.5s;
	background-color: #3399ff;
}
.mge:hover
{
	cursor: pointer;
	animation: szineze 0.5s;
	background-color: rgb(3, 0, 168);
	color: white;
}
.mgr1:hover
{
	cursor: pointer;
	animation: szinezr1 0.5s;
	background-color: turquoise;
	color: white;
}
.mg2:hover
{
	cursor: pointer;
	animation: szinez2 0.5s;
	background-color: red;
	color: white;
}
@keyframes szinez
{
      0%{ background-color: black; }
    100%{ background-color: #3399ff; }
}
@keyframes unszinez
{
    0%{ background-color: #3399ff; }
	100%{ background-color: black; }
}
@keyframes szineze
{
      0%{ background-color: black; color: rgb(3, 0, 168);}
    100%{ background-color: rgb(3, 0, 168); color: white;}
}
@keyframes unszineze
{
    0%{ background-color: rgb(3, 0, 168); color: white;}
	100%{ background-color: black; color: rgb(3, 0, 168);}
}
@keyframes szinezr1
{
      0%{ background-color: black; color: turquoise;}
    100%{ background-color: turquoise; color: white;}
}
@keyframes unszinezr1
{
    0%{ background-color: turquoise; color: white;}
	100%{ background-color: black; color: turquoise;}
}
@keyframes szinez2
{
      0%{ background-color: black; color: red;}
    100%{ background-color: red; color: white;}
}
@keyframes unszinez2
{
    0%{ background-color: red; color: white;}
	100%{ background-color: black; color: red;}
}


ul
{
	list-style: none;
}
ul li::before
{
	content: "\2022";
	color: white;
	font-weight: bold;
	display: inline-block; 
	width: 1em;
	margin-left: -1em;
	font-size: 24px;
}
li
{
	font-size: 20px;
	padding: 5px;
	padding-left: 10px;
	margin-right: 30px;
	border-radius: 5px;
	box-shadow: inset 0 0 10px black;
	background-color: rgb(66, 66, 66);
}
li:hover
{
	cursor: pointer;
	background-color: #3399ff;
}
.ih
{
	font-size: 20px;
	padding: 5px;
	padding-left: 10px;
	margin-right: 30px;
	border-radius: 5px;
	box-shadow: inset 0 0 10px black;
	background-color: rgb(50, 150, 50);
}
.r1-nor
{
	font-size: 20px;
	padding: 5px;
	padding-left: 10px;
	margin-right: 30px;
	border-radius: 5px;
	box-shadow: inset 0 0 10px black;
	background-color: #0050a0;
	color:white;
}
.r1-lmx
{
	font-size: 20px;
	padding: 5px;
	padding-left: 10px;
	margin-right: 30px;
	border-radius: 5px;
	box-shadow: inset 0 0 10px black;
	/* background-color: #0050a0; */
	background-color: #00a080;
	color:white;
}
.r1-dsh
{
	font-size: 20px;
	padding: 5px;
	padding-left: 10px;
	margin-right: 30px;
	border-radius: 5px;
	box-shadow: inset 0 0 10px black;
	/* background-color: #0050a0; */
	background-color: #3e3e3e;
	color:white;
}
.r1-wim
{
	font-size: 20px;
	padding: 5px;
	padding-left: 10px;
	margin-right: 30px;
	border-radius: 5px;
	box-shadow: inset 0 0 10px black;
	/* background-color: #0050a0; */
	background-color: #60008d;
	color:white;
}
.r1-gld
{
	font-size: 20px;
	padding: 5px;
	padding-left: 10px;
	margin-right: 30px;
	border-radius: 5px;
	box-shadow: inset 0 0 10px black;
	/* background-color: #0050a0; */
	background-color: goldenrod;
	color:white;
}

a
{
	color:white;
	text-decoration: none;
}

a.sgg
{
	color:blue;
}

p.sql
{
	position: fixed; 
	bottom: 0; 
	right: 15px; 
	color: #DDDDDD; 
	text-shadow: 4px 4px 8px #000000;
	cursor: pointer;
}
p.sql:hover
{
	color: yellow;
}
p.aktivkodok
{
	position: fixed; 
	bottom: 0; 
	left: 10px; 
	width: auto; 
	color: #DDDDDD; 
	text-shadow: 4px 4px 8px #000000;
}
p.aktivkodok:hover
{
	cursor: pointer;
	transform: scale(8, 8) translate(50%, -50%);
	color: red;
	text-shadow: 0px 0px 1px yellow;
	background-color: #1e1e1e;
	border: #3399ff solid 0.2px;
	border-radius: 2px;
	padding: 1px;
}

p.help
{
	position: fixed; 
	/*transform: rotate(180deg);*/
	bottom: 0; 
	left: 7px; 
	width: 150px; 
	color: #DDDDDD; 
	text-shadow: 4px 4px 8px #000000;
}
.aj
{
	position: fixed; 
	/*transform: rotate(180deg);*/
	bottom: 0; 
	left: 0; 
	/* text-shadow: 4px 4px 8px #000000; */
}

iframe
{
	background-color: white;
	border: solid;
	border-color: #1e1e1e;
	border-width: 5px;
}
#x1
{
	width: 420px;
	height: 231px;
}
#x2
{
	width: 432px;
	height: 243px;
}
#graf1
{
	width: 764px;
	height: 401px;
}


input.kodCSS
{
	width: 120px;
	height: 40px;
	font-size: 32px;
	text-align: center;
	margin: 3px;
	padding: 3px;
	border-radius: 10px;
	border-color: green;
}

input.nevCSS
{
	width: 300px;
	height: 30px;
	font-size: 24px;
	text-align: center;
	margin: 3px;
	padding: 3px;
	border-radius: 10px;
	border-color: green;
}

input.azonositoCSS
{
	width: 200px;
	height: 30px;
	font-size: 24px;
	text-align: center;
	margin: 3px;
	padding: 3px;
	border-radius: 10px;
	border-color: green;
}

.belepesCSS
{
	/* width: 90px;
	height: 30px; */
	padding: 5px;
	font-size: 20px;
	text-align: center;
	margin: 3px;
	padding: 8px;
	border-radius: 10px;
	border-color: black;
	box-shadow: inset 0 0 10px #000;
}
.kevesido
{
	background-color: yellow;
	border-color: red;
	box-shadow: inset 0 0 10px red;
}

select
{
	font-size: 18px;
	margin: 3px;
	padding: 5px;
	border-radius: 10px;
	border-color: green;
}
#dolg
{
	width: 306px;
}
#K
{
	width: 500px;
}
select[multiple]:focus, option:checked
{
	background: green linear-gradient(0deg, green 0%, green 100%);
}
.flexCenter
{
	display: flex;
	justify-content: center;
	align-items: center;
}

@keyframes shake
{
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes zoominoutsinglefeatured
{
    0% { transform: scale(1,1); }
    50% { transform: scale(4,4); }
    100% { transform: scale(1,1); }
}
.villanim
{
	animation: zoominoutsinglefeatured 1s; 
	animation-iteration-count: 5;
}
p.villogos
{
	color: red;
	text-shadow: 0px 0px 20px yellow;
	font-size: 100px;
}
.kevesidoanim
{
	animation: shake 0.5s;
	animation-iteration-count: infinite;
}
.ajanlo
{
	font-size: 15px;
}
.jav
{
	color: white;
	cursor: pointer;
}
.javmozg
{
	animation: shake 1.5s;
	animation-iteration-count: infinite;
}

.kozepkonzol
{
	margin: 25px;
	width: 700px;
	height: 475px;
	background-color: #333333;
	border: #3399ff solid 3px;
	border-radius: 15px;
	box-shadow: inset 0 0 15px #1e1e1e;
}
.kozepkonzolErtekeles
{
	margin: 25px;
	width: 700px;
	height: 600px;
	background-color: #333333;
	border: #3399ff solid 3px;
	border-radius: 15px;
	box-shadow: inset 0 0 15px #1e1e1e;
}
.kozepkonzolOktatoi
{
	margin: 25px;
	padding-top: 30px;
	padding-bottom: 30px;
	width: 700px;
	height: auto;
	background-color: #333333;
	border: #3399ff solid 3px;
	border-radius: 15px;
	box-shadow: inset 0 0 15px #1e1e1e;
}

span.hatarido
{
    animation: kiemel 3s infinite;
}
@keyframes kiemel
{
      0%{ color: white; }
     40%{ color: yellow; }
     60%{ color: yellow; }
    100%{ color: white; }
}