@charset "utf-8";
/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "Kalam";
  src: url("../fonts/Kalam-Regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/Kalam-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Kalam-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/Kalam-Regular.woff") format("woff"), /* Modern Browsers */
    url("../fonts/Kalam-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

a[href^="tel"] {
	color: inherit;
	text-decoration: none;
}


.match-blue {
	background-color: #e0f0ff;
}

.match-yellow {
	background-color: #fffacc;
}

.match-green {
	background-color: #dfffe0;
}

.square-blue {
	width: 25px;
	height: 25px;
	background-color: #e0f0ff;
}

.square-yellow {
	width: 25px;
	height: 25px;
	background-color: #fffacc;
}

.square-green {
	width: 25px;
	height: 25px;
	background-color: #dfffe0;
}

/* Menü alapstílus */
.menu {
    text-align: center;
    padding: 0;
    margin-top: 17px;
}

.menu li {
    /*position: relative;*/
	width: 100%;
}

.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
	text-align: center;
    display: flex;
    justify-content: center;
}

.menu a {
	width: 100%;
	text-decoration: none;
	color: #000000;
	background-color: #A79B94;
	display: block;
	padding-top: 3px;
	padding-bottom: 3px;
	font-weight: 400;
	font-size: 1.3em;
	font-family: 'Kalam', cursive;
}

.menu a:hover{
	background-color: #154677;
	color: #FFFFFF;
}

.menu a.active{
	color: #FFFFFF;
}

.dropdown-menu li a{
	background-color: #cac2be;
}

/* --- Általános beállítások --- */

body{
	font-family: 'Kalam', cursive;
	background-color: #F3F4F6;
	color: #000000;
	margin: 0;
	text-align: center; /* eredmeny szamlalo sor*/
}

/* eredmeny szamlalo eleje */
button, input, select {
    text-align: center;
	font-family: 'Kalam', cursive;
}

#match-select, #deleteResultButton, #delete-button, #unlock-button {
	font-family: 'Kalam', cursive;
}

#refresh, #reset-filters {
    margin-bottom: 20px;
}

#team-filter {
	margin-bottom: 20px;
}

.highlight-row {
    background-color: yellow !important;
    font-weight: bold;
}

.draggable {
	cursor: move;
}

.disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

/* --- Táblázatok és konténer beállítások --- */
.table-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    gap: 10px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

.group-box {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
}

/* --- Táblázat stílusok --- */
table {
    width: 100%;
    max-width: 580px;
    border-collapse: collapse;
    margin: 0 auto;
}

th {
    padding: 5px;
    border: 1px solid #000;
    height: 16px;
    background-color: #3498db;
}

td {
    color: #000;
    border: 1px solid #000;
	padding: 3px;
    /*padding: 5px; /* Adj egy kis belső térközt a szebb megjelenésért */
}

/* --- Oszloparányok --- */
.input-teams {
    text-align: left;
    width: 44%;
}

.input-stats {
    text-align: center;
    width: 8%;
}

.data-order {
    width: 5%;
    text-align: center;
}

.data-match {
    width: 50%;
    text-align: left;
}

.data-score {
    width: 25%;
    text-align: center;
}

.data-submit {
    width: 20%;
    text-align: center;
}

.data-group {
    width: 20%;
    text-align: center;
}

/* --- Score input mérete --- */
.score-field {
    width: 20px;
    text-align: center;
	font-family: 'Kalam', cursive;
}

/* eredmeny szamlalo vege */

a:link{
	text-decoration: none;
}
a:visited{
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}
a:active{
	text-decoration: none;
}

.clearfix::after{
  	content: "";
  	clear: both;
  	display: table;
}

/*.clearfix{
  	overflow: auto;
}*/

/* Hide spin buttons for type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number]{
    -moz-appearance:textfield; /* Firefox */
}

::placeholder{
	color: grey;
	font-style: Italic;
	font-size: 13px;
}

.info{
	text-align: center;
	margin-left: 2%;
	margin-right: 2%;
}

h2,h3{
	color: #154677;
	text-align: center;
}

h6{
	color: grey;
	font-style: Italic;
	font-size: 13px;
}

/* LANGUAGE SELECTOR */

.Top-Frame{
	max-width: 500px;
	height: 32px;
	margin-left: auto;
	margin-right: auto;
}

.Frame{
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.Top-Bar{
	float: right;
	/*display: inline;*/
	width: 100%;
	height: 32px;
	text-align: right;
}

.dropbtn{
	background-color: #F3F4F6;
	height: 32px;
	width: 160px;
	color: black;
	padding: 0 10 0 10;
	font-size: 14px;
	font-family: 'Kalam', cursive;
	border: none;
	cursor: pointer;
	/*display: inline;*/
}

.dropbtn:hover, .dropbtn:focus{
  	background-color: #ddd;
	color: #000000;
}

.Flag{
	vertical-align: sub;
}

.dropdown{
	text-align: left;
  	position: relative;
  	display: inline-block;
}

.dropdown-content{
	display: none;
	position: absolute;
	right: 0;
	background-color: #F3F4F6;
	min-width: 160px;
	overflow: auto;
	/*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
	z-index: 1;	
}

.dropdown-content a{
	font-size: 14px;
	text-align: center;
  	color: #000000;
  	padding: 5px 10px;
  	text-decoration: none;
  	display: block;
}

.dropdown a:hover{background-color: #ddd;}

.show{display: block;}

/* END OF LANGUAGE SELECTOR */

/* SCROLL DOWN MENU */

.Scroll-Bar-Frame{
	width: 500px;
	height: 40px;
	background-color: #F3F4F6;
	/*border: dashed #000000 2px;*/
	margin-left: auto;
	margin-right: auto;
	position: fixed;
	top: -50px;
	left: 0;
	right: 0;
}

.Scroll-Bar-Content{
	width: 100%;
	display: inline-block;
	justify-content: space-between
}

.Scroll-Menu{
	width: 40px;
	height: 40px;
	float: left;
	text-align: center;
}

.open{
	font-size: 30px;
	cursor: pointer;
}

.sidenav{
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	background-color: black;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
}

.sidenav a{
	font-family: 'Kalam', cursive;
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: #818181;
	display: block;
	transition: 0.3s;
	text-align: left;
}

.sidenav a:hover{
	color: #f1f1f1;
}

.sidenav .closebtn{
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}

/* END OF SCROLL DOWN MENU */

/* START OF REGISTRATION PART*/

.Form-Frame{
	width: 100%;
}

.Form-Container{
	width: 100%;
	text-align: center;
}

.Form-Text{
	width: 70%;
	font-family: 'Kalam', cursive;
}

.CheckboxGroup{
	display: inline-block;
	text-align: left;
}

.Headcount{
	width: 10%;
	font-family: 'Kalam', cursive;
}

.Form-Comment{
	width: 70%;	
	min-width: 70%;
	max-width: 70%;
	height: 150px;
	min-height: 150px;
	max-height: 150px;
	font-size: 14px;
	font-family: 'Kalam', cursive;
}

#submit{
	text-align: center;
	margin: auto;
	display: block;
	font-size: 16px;
	padding: 10px;
	border-radius: 20px;
	border-collapse: collapse;
	font-family: 'Kalam', cursive;
}

#submit:hover{
	background-color: #154677;
	color: #FFFFFF;
}

/* END OF REGISTRATION PART*/

/*TOOGLE SWITCH*/

 /* The switch - the box around the slider */
.center-container {
  display: flex;
  align-items: center; /* Függőlegesen középre igazítja a szöveget és a kapcsolót egy sorban */
  justify-content: center; /* Vízszintesen középre igazítás */
  gap: 10px; /* Kisebb térköz a szöveg és a kapcsoló között */
}

.center-container1 {
  display: flex;
  align-items: center; /* Függőlegesen középre igazítja a szöveget és a kapcsolót egy sorban */
  justify-content: center; /* Vízszintesen középre igazítás */
  gap: 5px;
  margin-bottom: 5px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 16px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 1px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
} 

/*TOOGLE SWITCH VÉGE*/

/* Start of mobile View */

.Banner{
	width: 100%;
	height: 350px;
	background-image: url("../Images/Banner/banner_s.jpg");
	background-position: center;
	background-size: cover;
	text-align: center;
	}

.Banner img{
	width: 100%;
	max-width: 150px;
}

.Banner h1{
	font-size: 90%;
	text-transform: uppercase;
}

.Logo{
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 90px;
	color: #FFFFFF;
}

.Main{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.Article-Container{
	width: 100%;
}

#Article-Main-Image{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	/*background-attachment: fixed;*/
	background-image: url("../Images/Home/team_s.jpg");
	background-position: 50% 10%;
	background-size: cover;
	height: 400px;
}

.Training-Image{
	width: 100%;
	height: 540px;
	/*background-attachment: fixed;*/
	background-position: 50% 10%;
	background-size: cover;
}
	
#Picture5{
	background-image: url("../Images/Training/training_s.jpg");
	}

.Download-Image{
	width: 100%;
	height: 620px;
	/*background-attachment: fixed;*/
	background-position: 50% 10%;
	background-size: cover;
}

#Picture6{
	background-image: url("../Images/Download/download_s.jpg");
	}

.TAO-Image{
	width: 100%;
	height: 610px;
	/*background-attachment: fixed;*/
	background-position: 50% 10%;
	background-size: cover;
}

#Picture8{
	background-image: url("../Images/TAO/tao_s.jpg");
	}

.Article-Main p{
	text-align: justify;
	margin-left: 2%;
	margin-right: 2%;
}

.Article p{
	text-align: justify;
	margin-left: 2%;
	margin-right: 2%;
}

.Article1 p{
	text-align: center;
	margin-left: 2%;
	margin-right: 2%;
}

#Picture1{
	background-image: url("../Images/Home/aventics.jpg");
}

#Picture2{
	background-image: url("../Images/Home/agriapipe.jpg");
}

#Picture3{
	background-image: url("../Images/Home/registration2.jpg");
}

#Picture4{
	background-image: url("../Images/Home/placeholder1.jpg");
}

.Section-Container{
	margin: 2%;
	float: left;
}

.Section-Frame{
	display: block;
	width: 100%;
	text-align: center;
}

.Section a{
	display: block;
	width: 160px;
	height: 160px;
	margin-left: auto;
	margin-right: auto;
}

.Section-Image{
	width: 150px;
	height: 150px;
	border-radius: 100%;
	background-size: cover;
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
	border-color: #154677;
	border-width: thick;
}

.Section{
	width: 96%;
	margin-left: 1%;
	margin-right: 1%;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.Footer{
	width: 100%;
	height: 280px;
	color: #FFFFFF;
	background-image: url("../Images/Footer/footer_s.jpg");
	background-size: cover;
	background-position: center top;
	text-align: center;
	padding: 14px 6px 6px 6px;
	box-sizing: border-box;
}

.Footer h4{
	font-size: 14px;
}

.Footer-Container{
	width: 48%;
	margin-left: 1%;
	margin-right: 1%;
	float: left;
}

/* eredmeny szamlalo eleje*/
@media screen and (max-width: 480px) {
    .table-container {
        max-width: 430px;
    }
    
    table {
        max-width: 430px;
    }
}
/* eredmeny szamlalo vege*/

/* END OF MOBILE VIEW */

@media (max-width: 768px) {
	.table-container {
        grid-template-columns: 1fr;
    }
	
	.menu ul {
        flex-direction: column;
        align-items: center;
    }

    .menu li {
        width: 100%;
    }

    .menu a {
        width: 100%;
        text-align: center;
		margin-bottom: 3px;
    }

    .dropdown-menu {
        /*position: relative;*/
        width: 100%;
		font-size: 16px;
        display: none !important; /* Alapból rejtve van */
    }

    .dropdown1.active .dropdown-menu {
        display: block !important; /* Ha az aktív, akkor megjelenik */
    }
	
	.dropdown-menu li a {
		font-size: 1.1em;
	}
	
	.sidenav ul a{
		font-family: 'Kalam', cursive;
		padding: 4px 4px 4px 16px;
		text-decoration: none;
		font-size: 16px;
		color: #818181;
		display: block;
		transition: 0.3s;
		text-align: left;
		background-color: black;
	}
	
	.sidenav li {
    	margin: 0;
    	padding: 0;
    	list-style: none;
	}
	
	.sidenav li {
   		margin: 0;
    	padding: 0;
    	list-style: none;
	}
	
}

@media only screen and (min-width: 769px){
	.menu li{
		position: relative;
		width: 16.66666666666667%;
	}
	
    .dropdown-menu {
        display: none !important; /* Alapértelmezetten rejtve van */
        position: absolute;
        top: 100%;
        left: 0;
        /*background: #444;*/
        /*min-width: 150px;*/
        padding: 0;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    }

    .dropdown1.active .dropdown-menu {
        display: block !important; /* Kattintásra látszik */
    }

    .dropdown-menu li a {
        padding-top: 5px;
		padding-right: 5px;
		padding-bottom: 5px;
		padding-left: 10px;
        color: black;
        text-decoration: none;
        text-align: left;
		display: block;
		width: 185px;
		font-size: 1.1em;
		
    }
	
	.sidenav ul a{
		font-family: 'Kalam', cursive;
		padding: 4px 4px 4px 16px;
		text-decoration: none;
		font-size: 16px;
		color: #818181;
		display: block;
		transition: 0.3s;
		text-align: left;
		background-color: black;
	}
	
	.sidenav li {
    	margin: 0;
    	padding: 0;
    	list-style: none;
	}
	
	.Top-Frame{
		max-width: 768px;
		height: 32px;
		margin-left: auto;
		margin-right: auto;
	}
		
	.Frame{
		max-width: 768px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.Banner{
		background-image: url("../Images/Banner/banner_m.jpg");
		}
		
	.Footer{
		background-image: url("../Images/Footer/footer_m.jpg");
		}
		
	#Article-Main-Image{
		height: 535px;
		background-image: url("../Images/Home/team_m.jpg");
		}
		
	.Training-Image{
		height: 825px;
	}
		
	#Picture5{
		background-image: url("../Images/Training/training_m.jpg");
		}
		
	.Download-Image{
		height: 970px;
	}
	
	#Picture6{
		background-image: url("../Images/Download/download_m.jpg");
		}
		
	.TAO-Image{
		height: 930px;
	}
	
	#Picture8{
		background-image: url("../Images/TAO/tao_m.jpg");
		}
}

@media only screen and (min-width: 992px){
	.menu li {
	  width: 16.66666666666667%;
	}
	
	.Top-Frame{
		max-width: 992px;
		height: 32px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.Frame{
		max-width: 992px;
		margin-left: auto;
		margin-right: auto;
	}

	.Banner{
		background-image: url("../Images/Banner/banner_x1.jpg");
	}
	
	.Footer{
		background-image: url("../Images/Footer/footer_x.jpg");
	}
	
	#Article-Main-Image{
		height: 665px;
		background-image: url("../Images/Home/team_x.jpg");
	}

/*	.Article{
		padding-top: 15%;
	}
	
	.Article1{
		padding-top: 15%
	}*/
		
	.Training-Image{
	height: 540px;
	}
	
	#Picture5{
		background-image: url("../Images/Training/training_x.jpg");
	}
	
	.Download-Image{
		height: 620px;
	}

	#Picture6{
		background-image: url("../Images/Download/download_x.jpg");
	}
	
	.Article-Container{
		width: 50%;
		float: left;
	}

	.Article{
/*		padding-top: 15%;*/
		margin: auto; 
	}
	
	.Article1{
/*		padding-top: 15%;*/
		margin: auto; 
	}
	
	.Section{
		width: 48%;
	}
	
	.Section p{
		text-align: justify;
	}
	
	.Form-Container{
		width: 50%;
		float: right;
	}
	
	.Form-Image{
		height: 745px;
		margin-top: 240px;
	}
	
	#Picture7{
		background-image: url("../Images/Registration/registration_x.jpg");
	}
	
	.Form-Text{
		width: 80%;
	}
	
	.Form-Comment{
		width: 80%;
		}
		
	.TAO-Image{
		height: 610px;
	}

	#Picture8{
		background-image: url("../Images/TAO/tao_x.jpg");
	}

	.Footer{
		background-image: url("../Images/Footer/footer_x.jpg");														
		height: 220px;
	}
	
	.Footer-Content{
		float: left;
		width: 44%;
		margin-left: 3%;
		margin-right: 3%;
		padding-top: 10px;
		padding-bottom: 15px;
	}
}

@media only screen and (min-width: 1200px){
	
	.menu li {
	  width: 16.66666666666667%;
	}
	
	.Top-Frame{
		max-width: 1200px;
		height: 32px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.Frame{
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.Banner{
		background-image: url("../Images/Banner/banner_xl.jpg");
	}
	
	.Footer{
		background-image: url("../Images/Footer/footer_xl.jpg");
	}
	
	#Article-Main-Image{
		height: 675px;
		background-image: url("../Images/Home/team_xl.jpg");
	}
	
	.Training-Image{
		height: 650px;
	}
	
	#Picture5{
		background-image: url("../Images/Training/training_xl.jpg");
	}
	
	.Download-Image{
		height: 750px;
	}

	#Picture6{
		background-image: url("../Images/Download/download_xl.jpg");
	}
	
	.Form-Image{
		height: 894px;
		margin-top: 175px;
	}
	
	#Picture7{
		background-image: url("../Images/Registration/registration_xl.jpg");
	}
	
	.TAO-Image{
		height: 730px;
	}

	#Picture8{
		background-image: url("../Images/TAO/tao_xl.jpg");
	}
}