* {
  box-sizing: border-box;
}

html {scroll-behavior: smooth;}

body, html { 
	height: 100%; 
    margin: 0;
	font-family: 'Inria Serif', sans-serif;
	font-size: 14px;
	line-height: 1.2;
}

main {
	position: relative;
	padding: 36px;	
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 1px 1px 6px #ccc;
}

footer {
	position: relative;
	width: 100%;
	padding: 12px;
	background-color: #e6e6e6;
}

footer .p-12 {
	font-family: 'Inria Serif', sans-serif;
	font-size: 16px;
	line-height: 1.8;
}

a {
	color: #000;
	text-decoration: none;
}

p {margin: 6px 0px;}

label {
	color: #777;
}

ol {
	font-family: 'Inria Serif', sans-serif;
	font-size: 17px;
	padding: 18px;
}

li {
	margin: 0px 0px 6px 0px;
	text-align: justify;
}

.szakasz {
	position: relative;
	width: 100%;
	margin: 0px;
	padding: 24px 12px;
}

.alcim {
	margin-top: 0px;	
	font-family: 'Inria Serif', sans-serif;
	font-size: 22px;
	line-height: 1.2;
	margin-left: 12px;
}

.blokk-cim {
	font-family: 'Inria Serif', sans-serif;
	font-size: 28px;
	line-height: 1.2;
	text-align: center;
}

footer .blokk-cim {
	font-family: 'Inria Serif', sans-serif;
	font-size: 18px;
	padding: 12px 12px 0px 12px;
	font-weight: bold;
}

.round {
	padding: 16px;
	border-radius: 8px;
	box-shadow: 1px 1px 6px #ccc;
	background-color: #fff;
}

.ar {
	font-size: 24px;
	text-align: center;
	margin: 6px;
	line-height: 1.5;
}

.tudas {
	font-size: 18px;
	text-align: center;
	margin: 6px;
	line-height: 1.5;
}

.download-link {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	color: #33cc33;
}

.download-link:hover {
	color: #00aaff;
}

.kiscim {
	font-family: 'Inria Serif', sans-serif;
	font-size: 22px;
	margin: 18px 0px;
}

.p-12 {
	margin: 12px 0px;
	text-align: justify;
	}

.p-16 {
	margin: 12px 0px;
	text-align: justify;
	font-size: 16px;
	}

.p-help {
	margin: 12px 0px;
	font-family: 'Inria Serif', sans-serif;
	font-size: 18px;
	text-align: justify;
	}

.p-head {
	color: #0099e6;
}

.cim {
	font-size: 16px;
	font-weight: bold;
	color: #b30000;
}

.alert {
	font-size: 18px;
	color: red;
	text-align: center;
}

.lista-int {
	font-size: 17px;
	color: #000;
}

.lista-osztaly {
	font-size: 17px;
	color: blue;
}

.lista-nev {
	font-size: 15px;
	font-weight: bold;
	padding-left: 4mm;
}

.lista-datum {
	font-size: 14px;
	padding-left: 8mm;
}

.fejlec {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 58px;
	margin: 0px;
	background: #e6e6e6;
	z-index: 99;
}

.fejlec-container {
	position: relative;
	top: 0px;
	width: 100%;
	margin: 0px;
}

.content {
	position: relative;
	display: block;
	margin: 67px auto;
	max-width: 1200px;
	padding-top: 30px;
	height: 100%;
}

.cim-mezo {
	position: relative;
	display: block;
	margin: 12px auto;
	padding: 12px 170px;
	font-family: 'Inria Serif', sans-serif;
	font-size: 28px;
}
.cim-mezo-logo {
	position: absolute;
	top: 0;
	left: 0;
	height: 50px;
}
 
.main-mezo {
	margin: 0px;
	padding: 36px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 1px 1px 6px #ccc;
}

.menu-item {
	display: block;
	font-size: 16px;
	padding: 20px;
	letter-spacing: 0.5px;
	color: #fff;
	background-color: #666;
	border-bottom: 1px solid #fff;
}

.open-button {
	position: fixed;
	top: 10px;
	right: 16px;
	width: 44px;
	height: 40px;
	outline: none;
	border: none;
	font-size: 22px;
	background-color: #002080;
	color: #fff;
	cursor: pointer;
	border-radius: 6px;
	box-shadow: 1px 1px 6px #ccc;
	z-index: 12;
}

.row {
	display: inline-block;
	position: relative;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

.col-100 {
	width: 100%;
	margin: 0px;
	padding: 12px;
}

.col-80 {
	float: left;
	width: 80%;
	margin: 0px;
	padding: 12px;
}

.col-70 {
	float: left;
	width: 70%;
	margin: 0px;
	padding: 12px;
}

.col-60 {
	float: left;
	width: 60%;
	margin: 0px;
	padding: 12px;
}

.col-50 {
	float: left;
	width: 50%;
	margin: 0px;
	padding: 6px;
}

.col-40 {
	float: left;
	width: 40%;
	margin: 0px;
	padding: 12px;
}

.col-30 {
	float: left;
	width: 30%;
	margin: 0px;
	padding: 12px;
}

.col-33 {
	float: left;
	width: 33.333%;
	margin: 0px;
	padding: 12px;
}

.col-35 {
	float: left;
	width: 35%;
	margin: 0px;
	padding: 12px;
}

.col-25 {
	float: left;
	width: 25%;
	margin: 0px;
	padding: 12px;
}

.col-20 {
	float: left;
	width: 20%;
	margin: 0px;
	padding: 12px;
}

.col-15 {
	float: left;
	width: 15%;
	margin: 0px;
	padding: 12px;
}

.col-10 {
	float: left;
	width: 10%;
	margin: 0px;
	padding: 12px;
}

.col-50 p, .col-25 p {
	margin-top: 6px;
}

.input-field {
	width: 100%;
	height: 36px;
	padding: 8px;
	margin: 0px;
	outline: none;
	font-family: 'Inria Serif', sans-serif;
}

.input-field-big {
	width: 100%;
	padding: 12px;
	margin: 0px;
	outline: none;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
}

.input-keret-nelkul {
	width: 100%;
	padding: 0px;
	margin: 0px;
	border: none;
	outline: none;
	font-family: 'Inria Serif', sans-serif;
}

.search-input-field {
	width: 100%;
	padding: 8px;
	margin: 0px;
	outline: none;
	font-family: 'Inria Serif', sans-serif;
}
.submit-button, .submit-button-right, .submit-button-center {
	display: inline-block;
	transition: 0.4s;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	padding: 10px;
	background-color: #0099e6;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	border: none;
	border-radius: 4px;
	outline: none;
	cursor: pointer;
}

.submit-button-green {
	display: inline-block;
	transition: 0.4s;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	padding: 10px;
	background-color: green;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	border: none;
	border-radius: 4px;
	outline: none;
	cursor: pointer;
}
.submit-button-right {float: right;}

.submit-button-center {
	display: block;
	margin: auto;
	}

.search-button {
	position: absolute;
	right: 8px;
	height: 36px;	
	transition: 0.4s;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	padding: 4px 12px;
	background-color: #0099e6;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	border: none;
	border-radius: 4px;
	outline: none;
	cursor: pointer;
}

.login-button {
	display: block;
	width: 100px;
	margin: auto;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	padding: 12px 16px;
	background-color: #0099e6;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	text-align: center;
	border: none;
	border-radius: 6px;
	outline: none;
	cursor: pointer;
}

.login-button:hover {
	background-color: #00aaff;
	box-shadow: 1px 1px 16px #ccc;
	transition: 0.6s;
}

.submit-button:hover, .search-button:hover, .submit-button-right:hover {
	background-color: #00aaff;
	box-shadow: 1px 1px 16px #ccc;
}

.ok-button {
	display: inline-block;
	transition: 0.4s;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	padding: 8px 12px;
	background-color: green;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: bold;
	border: none;
	border-radius: 4px;
	outline: none;
	cursor: pointer;
}

.ok-button-center {
	display: block;
	margin: auto;
	transition: 0.4s;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	padding: 8px 12px;
	background-color: green;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	border: none;
	border-radius: 4px;
	outline: none;
	cursor: pointer;
}

.ok-button:hover, .ok-button-center:hover, .submit-button-green:hover {
	background-color: #00cc00;
}

.arrow-button {
	display: inline-block;
	transition: 0.4s;
	height: 40px;
	width: 100%;
	vertical-align: middle;	
	text-decoration: none;
	margin: 0px;
	padding: 8px 16px;
	background-color: #0099e6;
	color: #fff;
	font-size: 17px;
	border: none;
	outline: none;
	cursor: pointer;
}

.arrow-button:hover {
	background-color: #00aaff;
}

.close-button {
	position: absolute;
	top: 6px;
	right: 0px;
	transition: 0.4s;
	padding: 6px;
	overflow: hidden;
	text-decoration: none;
	text-align: center;
	font-size: 26px;
	width: 43px;
	height: 43px;
	background-color: #fff;
	color: #666;
	border: 1px solid #666;
	border-radius: 4px;
	outline: none;
	cursor: pointer;
}

.close-button:hover {
	color: #00aaff;
}

.icon-button {
	display: block;
	margin: auto;
	width: 30px;
	height: 30px;
	vertical-align: text-bottom;
	text-decoration: none;
	padding: 2px;
	background-color: #fff;
	box-shadow: 1px 1px 4px 1px #888;
	border: none;
	outline: none;
	cursor: pointer;
}

.icon-button:active {
	box-shadow: 1px 1px 1px 1px #888;
}

.icon-right {
	float: right;
	margin-right: 20px;
	width: 30px;
	height: 30px;
}

.icon-center {
	display: block;
	margin: auto;
	width: 30px;
	height: 30px;
}

.confirm-content {
	width: 50%;
	height: 50%;
	display: block;
	margin: auto;
	color: #fff;
	background-color: rgba(40,40,40,0.85);
	margin-top: 14%;
	padding: 24px;
	border: 1px solid gray;
	line-height: 1.1;
}

.message-content {
	max-width: 300px;
	height: 220px;
	display: block;
	margin: auto;
	text-align: center;
	background-color: #fff;
	padding: 36px 12px;
	border: 1px solid red;
	box-shadow: 1px 1px 6px #ccc;
	line-height: 1.1;
}

.message-warning-icon {
	height: 36px;
	display: block;
	margin: auto;
}

#felh-adatok {
	position: relative;
	margin-top: 58px;
	padding: 8px;
	background-color: #b30000;
	color: #fff;
	font-size: 12px;
}

#message-window {
	position: fixed;
	top: 30%;
	left: 0;
	width: 100%;
	height: 300px;
	background-color: inherit;
	display: none;
	z-index: 10;
}

#message {
	margin: 16px;
}

#confirm-window {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	display: none;
}

#fejlec-bal {
	float: left;
	height: 66px;
	margin: 0px;
	color: #0099e6;
}

#fejlec-jobb {
	float: left;
	height: 66px;
	margin: 0px;
	padding: 8px;
}

#fejlec-jobb p {
	font-family: 'Inria Serif', sans-serif;
	font-size: 15px;
	margin: 0px;
}

#logo {	
	height: 66px;
	padding: 6px;
}

#program-cim {
	float: left;
	height: 66px;
	padding: 6px;
	font-family: 'Inria Serif', sans-serif;
	font-size: 30px;
	line-height: 0.8em;
}

#menu {
	position: relative;
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-color: #fff;
	z-index: 10;
	display: none;
}

#szabi-logo {
	position: absolute;
	top: 10px;
	left: 6px;
	width: 100px;
}

#szervezet-neve {
	position: absolute;
	right: 12px;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	color: #004d99;
}

#uzenet {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	min-height: 40px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 1px 1px 6px #ccc;
	padding: 24px;
	margin: 0px;
	color: blue;
	font-family: 'Inria Serif', sans-serif;
	font-size: 17px;
	text-align: center;
	display: none;
}

#message-div {
	position: absolute;
	top: 67px;
	left: 0px;
	width: 338px;
	background-color: #fff;	
}

#top-button {
	position: fixed;
	right: 20px;
	bottom: 0px;	
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	padding: 12px 16px;
	background-color: #0099e6;
	color: #fff;	
	font-size: 15px;
	text-align: center;
	border: none;
	border-radius: 6px;
	outline: none;
	cursor: pointer;
	z-index: 99;
	opacity: 0;
	transition: opacity 0.6s;
}

#top-button:hover {
	background-color: #00aaff;
	box-shadow: 1px 1px 16px #ccc;
	transition: 0.6s;
}