@font-face
{
	font-family: 'WorkSans';
	src: url(font/WorkSans-SemiBold.ttf);
}

@font-face
{
	font-family: 'WorkSans-Light';
	src: url(font/WorkSans-Light.ttf);
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

::-webkit-scrollbar 
{
    width: 7px;
}
::-webkit-scrollbar-track 
{
    background-color: silver;
    border-left: 1px solid #ccc;
}

::-webkit-scrollbar-thumb 
{
    background-color:#0E2F50;
	border-radius: 3.5px;
}

::-webkit-scrollbar-thumb:hover 
{
  background-color: #444;
}

html
{
    display: block;
    border: none;
    margin: 0;
    padding: 0;
    text-align: center;
    overflow: hidden;
}

.oldal
{
    display: block;
    background-image: url('pic/backgrnd.jpg');
    background-size: 100% 110%;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

.rejtett
{
    visibility: hidden;
}

.csempeterulet
{
    position: relative;
    bottom: 3vh;
    left: 5vw;
    float: left;
    display: grid;
    grid-template-columns: auto auto auto auto;
    width: min-content;
    margin: auto;
    padding-left: 15vw;
}

.link
{
    font-family: WorkSans;
    font-weight: 100;
    text-decoration: none;
    color: #0E2F50;
}

.link:hover
{
    opacity: 0.7;
}

.help_link
{
    font-family: WorkSans;
    font-weight: 100;
    text-decoration: none;
    color: #0E2F50;
    opacity: 0.7;
}

.help_link:hover
{
    opacity: unset;
}

.focel_csempe
{
    width: 18vh;
    height: 18vh;
    margin: auto;
    border-style: solid;
    border-width: thin;
}

.focel_csempe:hover
{
    opacity: 0.9;
    box-shadow: 1px 1px 10px 2px rgb(195, 193, 193);
}

.eredmeny_csempe
{
    width: 18vh;
    height: 18vh;
    margin: auto;
    border-color: orange;
    border-style: solid;
    border-width: thin;
}

.eredmeny_csempe:hover
{
    opacity: 0.9;
    box-shadow: 1px 1px 10px 2px rgb(195, 193, 193);
}

.eredmeny_kep
{
    position: relative;
    top: 3vh;
    right: 2vh;
    margin: auto;
    height: 9vh;
    text-align: center;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
}

.eredmeny_szoveg
{
    position: relative;
    top: 2vh;
    right: 2vh;
    width: 20vh;
    display: block;
    color: orange;
    text-align: center;
    font-family: WorkSans;    
    font-size: 1.5vh;
    font-weight: 100;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
    padding-left: 1.5vh;
}

.rotated
{
    transform: rotate(45deg);
}

.csempe_tartalom
{
    margin: auto;
    padding: 1vh;
    text-align: center;
}

.focel_kep
{
    position: relative;
    right: 3.5vh;
    margin: auto;
    height: 9vh;
    text-align: center;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
}

.focel_szoveg
{
    width: 15vh;
    display: block;
    color: white;
    text-align: center;
    font-family: WorkSans;
    font-size: 1.5vh;
    font-weight: 100;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
    padding-left: 3.5vh;
}

.lablec_container
{
    position: absolute;
    bottom: 2px;
    width: 100%;
    height: 15vh;
}

.lablec_logo_kep_old
{
    position: absolute;
    bottom: 2px;
    left: 2vw;
    height: 12vh;
    float: left;
    z-index: -1;
}

.lablec_logo_kep
{
    position: absolute;
    top: 60%;
    right: 2vw;
    height: 12vh;
    z-index: -1;
}

.lablec_szoveg_old
{
    position: absolute;
    width: 30vw;
    bottom: 2px;
    right: 2vw;
    float: right;
    color: #333;
    font-family: WorkSans;
    font-weight: bold;
    font-size: 3vh;
    text-align: right;
}

.lablec_szoveg
{
    position: absolute;
    width: 30vw;
    top: 50%;
    right: 2vw;
    transform: translate(0, -50%);
    float: right;
    color: #0E2F50;
    font-family: WorkSans;
    font-weight: bold;
    font-size: 3vh;
    text-align: right;
}

.lablec_szoveg_cim
{
    font-size: 4vh;
    color: #0E2F50;
    font-family: WorkSans;
}

.kerdoiv_kepernyo
{
    display: grid;
    grid-template-columns: auto auto;
}

.kerdoiv_frame
{
    width: 49vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-spacing: 0;
}

.balra
{
    float: left;
    left: 0;
}

.jobbra
{
    float: right;
}

.focel_topic
{
    width: 50vw;
    height: 100vh;
    float: left;
    vertical-align: middle;
    padding-top: 20vh;
    padding-bottom: 30vh;
}

.focel_tartalom
{
    width: 50vw;
    height: 100vh;
    background-color: white;
    float: right;
    vertical-align: middle;
    //padding-top: 10vh;
    //padding-bottom: 10vh;
    margin-top: 30vh;
    margin-bottom: 30vh;
    overflow-y: auto;
}

.focel_topic_tartalom_box_old
{
    display: block;
    margin: auto;
    width: 60%;
    max-height: 60vh;
    text-align: center;
}

.focel_topic_tartalom_box
{
    position: fixed;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    display: block;
    margin: auto;
    width: 30%;
    max-height: 60vh;
    text-align: center;
}

.focel_topic_cim
{
    display: block;
    font-family: WorkSans;
    font-weight: 600;
    font-size: 3vh;
    text-transform: uppercase;
    margin: 20px;
    color: white;
}

.focim_topic_kep
{
    margin: 20px;
    height: 15vh;
}

.focel_topic_motto
{
    display: block;
    position:relative;
    bottom: 0px;
    font-family: WorkSans-Light;
    font-weight: 100;
    font-size: 3vh;
    margin: 20px;
    color: white;
}

.topic_lablec
{
    position: absolute;
    bottom: 1vh;
    text-align: center;
    left: 25%;
    transform: translate(-50%);
}

.topic_lablec_szoveg
{
    font-family: WorkSans;
    font-size: 1.5vh;
    text-align: center;
    color: white;
}

.focel_tartalom_box
{
    position: fixed;
    top: 50%;
    right: 25%;
    transform: translate(50%, -50%);
    display: block;
    margin: auto;
    width: 30%;
    height: auto;
    //min-height: 40%;
    //max-height: 90%;
    text-align: left;
}

.kerdes_felso
{
    width: 10vw;
    color:green;
    border: 1px solid green;
    float: left;
}

.focel_tartalom_kerdes
{
    font-family: WorkSans;
    font-size: medium;
    font-weight: 600;
    text-align: left;
}

.focel_tartalom_szoveg
{
    font-family: WorkSans;
    font-size: 2.5vh;
    font-weight: 100;
    text-align: left;
    color: #0E2F50;
}

.vonal_gombok_felett
{
    width: 30vw;
    color:gray;
    border: 1px solid gray;
    float: left;
    margin-top: 20vh;
}

.radio_container
{
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-family: WorkSans-Light;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radio_container input 
{
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom radio button */
.radio_checkmark 
{
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio_container:hover input ~ .radio_checkmark
{
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio_container input:checked ~ .radio_checkmark 
{
    background-color: #1BB576;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio_checkmark:after 
{
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio_container input:checked ~ .radio_checkmark:after 
{
    display: block;
}

/* Style the indicator (dot/circle) */
.radio_container .radio_checkmark:after 
{
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.csuszka_container
{
    display: block;
    position: relative;
    margin-top: 18px;
    margin-bottom: 0px;
    cursor: pointer;
    font-family: WorkSans-Light;
    font-size: 2vh;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.csuszka 
{
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 15px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    border-radius: 20px;
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.csuszka:hover 
{
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.csuszka::-webkit-slider-thumb 
{
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    border-radius: 50%;
    background: #1BB576; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.csuszka::-moz-range-thumb 
{
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #1BB576; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.gombterulet
{
    width: 80vw;
}

.focel_tartalom_gomb
{
    cursor: pointer;
    width: auto;
    height: auto;
    font-family: WorkSans;
    font-size: 2vh;
    border: none;
    border-radius: 5px;
    float: right;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 5px;
    color: white;
}

.focel_tartalom_gomb:hover
{
    opacity: 0.9;
    box-shadow: 1px 1px 10px 2px rgb(195, 193, 193);
}

.elozogomb
{
    background-color: gray;
    color: lightgray;
}

.kovetkezogomb
{
    background-color:#1BB576;
    color: whitesmoke;
}

.gombszoveg
{
    font-family: WorkSans;
    font-size: 3vh;
    font-weight: bold;
}

.statuszbar_old
{
	position: relative;
    border-radius: 5px;
    width: 5vh;
	height: 1vh;
    transform: rotate(-135deg);
    left: 5vh;
    bottom: 15vh;
}

.statuszbar
{
    position: relative;
    border-radius: 5px;
    left: 5vh;
    bottom: 1vh;
    width: 5vh;
	height: 1vh;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
}

.statuszbar::-webkit-progress-bar 
{
    background-color: whitesmoke;
    border-radius: 5px;
}

.statuszbar::-webkit-progress-value
{
    color: white;
    border-radius: 5px;
}

.profil_statusbar
{
    border-radius: 5px;
    left: 5vh;
    bottom: 1vh;
    width: 20%;
	height: 30px;
}

.profil_statusbar::-webkit-progress-bar 
{
    background-color: whitesmoke;
    border-radius: 5px;
}

.profil_statusbar::-webkit-progress-value
{
    background-color: #1BB576;
    border-radius: 5px;
}

.kviz_statusbar
{
    border-radius: 5px;
    left: 5vh;
    bottom: 1vh;
    width: 20%;
	height: 30px;
}

.kviz_statusbar::-webkit-progress-bar 
{
    background-color: whitesmoke;
    border-radius: 5px;
}

.kviz_statusbar::-webkit-progress-value
{
    background-color: #1BB576;
    border-radius: 5px;
}

.profil
{
    z-index: 2;
    visibility: hidden;
}

.profil_ikon
{
    position: absolute;
    top: 2px;
    right: 2vw;
    height: 30px;
    cursor: pointer;
}

.profil_ikon:hover
{
    opacity: 0.7;
}

.help_ikon
{
    position: absolute;
    top: 2px;
    right: 4vw;
    height: 30px;
    cursor: pointer;
}

.help_ikon:hover
{
    opacity:0.7;
}

.profil_kiskep
{
    height: 30px;
}

.kisikon
{
    height: 15px;
}

.profil_ablak_old
{
	position: fixed; /* Stay in place */
	padding-top: 3vh; /* Location of the box */
	width: 20%;
	height: auto;
    right: 5%;
	top: 2px;
    z-index: 1;
}

.profil_adatok
{
    overflow-y: auto;
}

.profil_ablak
{
	position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    background: rgba(14,47,80,0.9);
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

.profil_tartalom_old
{
 	margin: auto;
	padding: 20px;
	border: 1px solid #888;
	width: 100%;
	border-radius: 5px;
	text-align: center;
    border-style: solid;
    border-color: #1BB576;
    border-width: thin;
    box-shadow: #888;
    background-color: white;
    opacity: 0.9;
}

.profil_tartalom
{
 	position: fixed;
    top: 50%;
    left: 50%;
    max-width: 90%;
    height: auto;
    margin: auto;
	padding: 20px;
	border: 1px solid #888;
	border-radius: 5px;
	text-align: center;
    border-style: solid;
    border-color:#0E2F50;
    border-width: thin;
    box-shadow: #888;
    background-color: white;
    transform: translate(-50%, -50%);
    //border-color: #1BB576;
}

.profil_szoveg
{
    font-family: WorkSans;
    font-weight: 100;
    color: #0E2F50;
}

.profil_cim
{
	color: #0E2F50;
	font-family: WorkSans;
	font-weight: 100;
	font-size: larger;
	text-align: center;
}

.profil_fej
{
	padding: 2px 16px;
	background-color: whitesmoke;
	color: #0E2F50;
	border-radius: 5px;
}
  
.profil_test
{
	padding: 2px 16px;
	border-radius: 5px;
	grid-auto-columns: 50%;
}
  
.profil_lab
{
	padding: 2px 16px;
	background-color: whitesmoke;
	color: #0E2F50;
	border-radius: 5px;
}

.profil_bezar_old
{
    position: absolute;
    top: 0px;
    right: 20px;
    color: #1BB576;
	float: right;
	margin-bottom: 5px;
	font-family: WorkSans;
	font-weight: 100;
	font-size: 6vh;
}

.profil_bezar
{
    position: fixed;
    top: 4px;
    right: 20px;
    float: right;
    color: #0E2F50;
	font-family: WorkSans;
	font-weight: 100;
	font-size: 5vh;
}
  
.profil_bezar:hover, .profil_bezar:focus 
{
	color: #0E2F50;
	text-decoration: none;
	cursor: pointer;
}

.flex_doboz
{
    display: flex;
    flex-direction: row;
}

.belepes_adatok
{
	width: fit-content;
	margin: auto;
}

.belepes_input_doboz
{
    display:inline-block;
    border-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
	padding-left: 5px;
    padding-right: 5px;
    border-bottom: solid #0E2F50;
    border-right: solid #0E2F50;
	border-top: none;
	border-left: none;
	height: 6vh;
	font-family: WorkSans;
	font-weight: 100;
	font-size: medium;
	text-align: center;
    color:#0E2F50;
    width: 80%;
    //border-bottom: solid #1BB576;
	//border-right: solid #1BB576;
    //color: #1BB576;
}

.belepes_input_doboz:hover
{
    font-size:small;
    -webkit-transition-duration: 0.7s; /* Safari */
    transition-duration: 0.7s;
}

.belepesgomb
{
	width: fit-content;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
	border-radius: 5px;
    background-color: #0E2F50;
    //background-color: #1BB576;
	min-height: 4vh;
	font-size: large;
	color: white;
	font-family: WorkSans;
	font-weight: 100;
	text-align: center;
}

.belepesgomb:hover
{
	background-color: white;
	color:#0E2F50;
    border-color: #0E2F50;
    //color: #1BB576;
    //border-color: #1BB576;
	-webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
	cursor: pointer;
}

.gomb
{
    cursor: pointer;
    width: auto;
    height: auto;
    font-family: WorkSans;
    font-size: 2vh;
    border: none;
    border-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 5px;
    color: white;
}

.gomb:hover
{
    opacity: 0.9;
    box-shadow: 1px 1px 10px 2px rgb(195, 193, 193);
}

.gomb_old
{
	width: fit-content;
	border-radius: 5px;
	border-color: #1BB576;
	min-height: 2vh;
	font-size: 2vw;
	color: #0E2F50;
	font-family: WorkSans;
	font-weight: 100;
	box-shadow: 2px silver;
	text-align: center;
}

.gomb_old:hover
{
	border-color: #0E2F50;
	background-color: #1BB576;
	color: silver;
	-webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
	cursor: pointer;
}

.belepes_kep
{
	height: 7vh;
}

.belepes_kep:hover
{
	opacity: 0.7;
}

.hshlogo
{
	height: 3vh;
	margin: 2px;
}

.hshlogo:hover
{
    opacity: 0.7;
}

.rejtett
{
	display: none;
}

.reg_ablak_terulet
{
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    width: 40vw;
    height: auto;
    overflow-y: auto;
    border-color: #1BB576;
    border-width: thin;
    border-style: solid;
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.reg_cim_terulet
{
    background-color: whitesmoke;
    color: #1BB576;
    font-family: WorkSans;
    font-size: large;
    font-weight: 600;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 10px;
}

.reg_logo_kep
{
    height: 100px;
    max-width: 90%;
}

.reg_logo_szoveg
{
    color: #0E2F50;
    font-family: WorkSans;
    font-weight: bold;
    font-size: 3vh;
}

.reg_cim_szoveg
{
    color:#0E2F50;
    font-family: WorkSans;
    font-weight: bold;
    font-size: 3vh;
    //color: #1BB576;
}

.reg_input_doboz
{
    display:inline-block;
    border-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
	padding-left: 5px;
    padding-right: 5px;
	border-top: none;
	border-left: none;
	height: 6vh;
	font-family: WorkSans;
	font-weight: 100;
	font-size: medium;
	text-align: center;
    width: 80%;
    border-bottom: solid #1BB576;
	border-right: solid #1BB576;
    color: #1BB576;
}

.reg_input_doboz:hover
{
    font-size:small;
    -webkit-transition-duration: 0.7s; /* Safari */
    transition-duration: 0.7s;
}

.opcio
{
    border-bottom: solid #1BB576;
	border-right: solid #1BB576;
	border-top: none;
	border-left: none;
	height: 6vh;
	font-family: WorkSans;
	font-weight: 100;
	font-size: medium;
	text-align: center;
    color: #1BB576;
    //color: #0E2F50;
    background-color: white;
    border-radius: 5px;
    width: 80%;
}

#opcio:disabled
{
    color: #333;
}

.opcio:hover
{
    font-size:small;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 0.7s;
}

.opcio_history
{
    border-bottom: solid #1BB576;
	border-right: solid #1BB576;
	border-top: none;
	border-left: none;
	height: 6vh;
	font-family: WorkSans;
	font-weight: 100;
	font-size: medium;
	text-align: center;
    color: #1BB576;
    background-color: white;
    border-radius: 5px;
    width: 20%;
}

#opcio_history:disabled
{
    color: #333;
}

.opcio_history:hover
{
    font-size:small;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 0.7s;
}

.gomb_terulet
{
    text-align: center;
    align-items: center;
}

.lathato
{
	display: block;
}

/* The container must be positioned relative: */
.custom-select 
{
    position: relative;
    font-family: Arial;
}
  
.custom-select select {
display: none; /*hide original SELECT element: */
}

.select-selected {
background-color: DodgerBlue;
}

/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
}

/* Style items (options): */
.select-items {
position: absolute;
background-color: DodgerBlue;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}

.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}

.warning
{
    position: relative;
    left: 50%;
    transform: translate(-50%);
    width: 60vw;
    height: auto;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #DC7633;
}

.info
{
    position: relative;
    left: 50%;
    transform: translate(-50%);
    width: 60vw;
    height: auto;
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #1BB576;
}

.eredmeny_terulet
{
    width: 50vw;
    height: 100vh;
    float: left;
    //position: absolute;
    //left: 50%;
    border: 0px;
    //max-width: 48vw;
    //max-height: 80vh;
    margin-top: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
	text-align: center;
    background-color: white;
    //transform: translate(0%, 0%);
    //box-shadow: #888;
}

.eredmeny_terulet_fejlec
{
    display: block;
    font-family: WorkSans;
    font-weight: 600;
    font-size: 3vh;
    margin: 10px;
    color:#0E2F50;
}

.eredmeny_terulet_tartalom
{
    display: block;
    height: 70vh;
    overflow: auto;
    margin: 0;
    box-shadow: #888;
    background-image: radial-gradient(white, whitesmoke);
    border-radius: 10px;
}

.eredmeny_terulet_lablec
{
    display: block;
    margin: 10px;
}

.eredmeny_fejlec
{
    position:sticky;
    top: 0;
    max-height: 5vh;
    margin-top: 10px;
}

.eredmeny_tartalom
{
    position: absolute;
    left: 50%;
    border: 0px;
    max-width: 48vw;
    max-height: 80vh;
    margin-top: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    overflow-y: auto;
	text-align: center;
    background-color: white;
    //transform: translate(0%, 0%);
    //box-shadow: #888;
}

.eredmeny_lablec
{
    position: absolute;
    bottom: 7vh;
    left: 75%;
    transform: translate(-75%, 0%);
    max-height: 5vh;
}

.kis_csempe
{
    width: 9vh;
    height: 9vh;
    margin: auto;
    border-style: solid;
    border-width: thin;
}

.kis_csempe_kep
{
    height: 6vh;
}

.focel_nev
{
    font-family: WorkSans;
	font-weight: 600;
	font-size: medium;
	text-align: center;
}

.indikator_nev
{
    font-family: WorkSans;
	font-weight: 400;
	font-size: medium;
	text-align: center;
}

.eredmeny_tablazat
{
    font-family: WorkSans;
	font-weight: 100;
	font-size: medium;
	text-align: center;
    width: 80%;
	max-height: 40%;
	margin: auto;
	text-align: center;
	overflow-x: auto;
	overflow-y: auto;
}

.eredmeny_tabla
{
    border-bottom: solid;
	border-color:#0E2F50;
    font-family: WorkSans;
	font-weight: 100;
	font-size: medium;
	text-align: center;
    width: 80%;
	max-height: 40%;
	margin: auto;
	text-align: center;
	overflow-x: auto;
	overflow-y: auto;
}

.eredmeny_tabla tr:hover
{
    background-color: #0E2F50;
    color:white;
}

.kerdes_szoveg
{
    font-family: WorkSans;
	font-weight: 100;
	font-size: small;
	text-align: left;
}

.valasz_szoveg
{
    font-family: WorkSans;
	font-weight: 100;
	font-size: small;
	text-align: right;
}

.quickstat_doboz
{
    position: fixed;
    top: 50px;
    right: 50px;
    border-color: #0E2F50;
    border-style: solid;
    border-width: thin;
    width: 200px;
    height: auto;
    border-radius: 10px;
    padding-top: 10px;
    padding-left: 10px;
}

.quickstat_szoveg
{    
    font-family: WorkSans;
	font-weight: 100;
	font-size: small;
	text-align: left;
    color:#0E2F50;
}

.ketoszlop
{
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 2vw;
}

.gombsor_terulet
{
	display: flex;
    flex-direction: row;	
	align-items: center;
	justify-content: center;
	gap: 0.5vw;
}

.tanusitvany_terulet
{
    height: 80vh;
    //overflow-y: auto;
}

.tanusitvany_terulet_fejlec
{
    display: block;
    font-family: WorkSans;
    font-weight: 600;
    font-size: 3vh;
    margin: 20px;
    color:#0E2F50;
}

.sdg_tanusitvany_terulet_tartalom
{
    position: relative;
    height: 80%;
    width: auto;
    min-width: 60vw;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: thin;
    border-color: #0E2F50;
    overflow-y: auto;
    aspect-ratio: 210 / 297;
}

.canvas_div_pdf
{
    size: 210mm 297mm;
    margin: 30mm 45mm 30mm 45mm;
    padding-top: 25mm;
    padding-bottom: 25mm;
    padding-left: 25mm;
    padding-right: 25mm;
}

.tanusitvany_fejlec
{
    display: block;
    font-family: WorkSans;
    font-weight: 600;
    font-size: 7vh;
    color:#0E2F50;
    margin: 5px;
}

.tanusitvany_test
{
    display: block;
    font-family: WorkSans;
    font-weight: 600;
    font-size: 5vh;
    margin: 20px;
    color:#0E2F50;
}

.tanusitvany_lablec
{
    display: block;
    font-family: WorkSans;
    font-weight: 600;
    font-size: 3vh;
    margin: 10px;
    color:#0E2F50;
}

.tanusitvany_terulet_lablec
{
    display: block;
}

.oszlopos
{
    display: grid;
    row-gap: 2vh;
    grid-template-columns: auto auto;
}

.egyoszlop
{
    display: grid;
    row-gap: 2vh;
    grid-template-columns: auto;
}

.tanusitvany_fejlec_kep
{
    margin: 20px;
    height: 15vh;
}

.tanusitvany_csempe
{
    width: 15vh;
    height: 15vh;
    margin: auto;
    border-style: solid;
    border-width: thin;
}

.tanusitvany_csempe_kep
{
    height: 12vh;
}

.tanusitvany_szoveg
{
    font-family: WorkSans;
    font-size: 2.5vh;
    font-weight: 100;
    text-align: center;
    color: #0E2F50;
}

.history_terulet
{
    display: block;
    overflow-y: auto;
}

.history_terulet_fejlec
{
    display: block;
    height: 15vh;
}

.history_terulet_tartalom
{
    display: block;
    height: 70vh;
    //margin-left: 30vw;
    //margin-right: 30vw;
    margin-bottom: 15px;
    width: 100vw;
    //transform: scale(80%);
}

.history_terulet_lablec
{
    display: block;
    height: auto;
    position: relative;
    margin-bottom: 5px;
}

.history_szoveg
{
    font-family: WorkSans;
    font-size: 2.5vh;
    font-weight: 100;
    text-align: center;
    color: #0E2F50;
}

.help_terulet
{
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    height: auto;
    overflow-y: auto;
    font-family: WorkSans;
    color: #0E2F50;
}

.help_fejlec
{
    font-size: medium;
    margin-bottom: 10px;
}

.help_tartalom
{
    font-size: medium;
    text-align: left;
    margin-bottom: 10px;
}

.help_lablec
{
    font-size: small;
}

.sdg_canvas_div_pdf
{
    display: block;
    width: 80vw;
    height: auto;
    aspect-ratio: 210 / 297;
    //height: 80vh;
    //max-width: 60vw;
    //overflow-y: auto;
}

.sdg_tanusitvany_oldal
{
    border-style: solid;
    border-width: thin;
    border-color: #0E2F50;
    padding-right: 25mm;
    aspect-ratio: 210 / 297;
}

.sdg_tanusitvany_oldal_pdf
{
    size: 210mm 297mm;
    margin: 30mm 45mm 30mm 45mm;
    aspect-ratio: 210 / 297;
    border-style: solid;
    border-width: thin;
    border-color: #0E2F50;
    padding-right: 25mm;
}

.sdg_tanusitvany_vizjel_pdf
{
    top: 50%;
    text-align: center;
    top: 150mm;
    left: 50%;
    transform: translate(-50%, 0);
    opacity: 0.2;
    height: 125mm;
    z-index: -1;
}

.sdg_tanusitvany_ikonterulet
{
    position: absolute;
    width: 0.12vw;
    float: left;
    margin-top: 5%;
    margin-bottom: 5%;
    display: grid;
    grid-template-columns: auto;
    //width: 12%;
    //top: 0;
}

.sdg_tanusitvany_tartalom_terulet
{
    display: block;
    position: relative;
    float: right;
    margin-right: 0.12vw;
    padding-top: 10%;
    padding-bottom: 10%;
    padding-right: 0.12vw;
    align-items: center;
    text-align: center;
    //left: 0.12vw;
    //width: 80%;
}

.sdg_tanusitvany_csempe
{
    display: block;
    //width: 7.2vw;
    width: 6vw;
    aspect-ratio: 1 / 1;
    margin: auto;
    border-style: solid;
    border-width: thin;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.sdg_tanusitvany_csempe_tartalom
{
    padding: 1px;
    text-align: center;
}

.sdg_tanusitvany_csempe_ketoszlop
{
    display: grid;
    grid-template-columns: auto auto;
}

.sdg_tanusitvany_csempe_szoveg_terulet
{
    position: relative;
    height: 50%;
}

.sdg_tanusitvany_csempe_szoveg
{
    position: relative;
    height: 100%;
    font-family: WorkSans;
    font-size: 10px;
    font-weight: lighter;
    float: right;
    color: white;
}

.sdg_tanusitvany_csempe_kep_terulet
{
    position: relative;
    height: 50%;
}

.sdg_tanusitvany_csempe_kep
{
    //height: fit-content;
    position: relative;
    height: 100%;
    //height: 10mm;
}

.sdg_tanusitvany_csempe_szam
{
    font-family: WorkSans;
    font-size: 4mm;
    font-weight: bold;
    float: left;
    color: white;
}

.sdg_tanusitvany_cim
{
    font-family: WorkSans;
    //font-size: 2vh;
    font-weight: 900;
    color:#0E2F50;
    margin: 5px;
    text-align: center;
    margin-top: 1%;
    margin-bottom: 10%;
    font-size: 48pt;
    //margin-top: 20mm;
    //margin-bottom: 30mm;
    //font-size: 20mm;
}

.sdg_tanusitvany_fejlec p
{
    height: 12mm;
}

.sdg_tanusitvany_terkoz
{
    height: 20mm;
}

.sdg_tanusitvany_test
{
    display: block;
    margin: 20px;
    color:#0E2F50;
    text-align: center;
    background: transparent url('/pic/kovet_allo_vizjel.png') no-repeat center center;
    background-clip: content-box;
    background-size: contain;
}

.sdg_tanusitvany_szoveg
{
    font-family: WorkSans;
    font-size: 11mm;
    font-weight: 100;
    text-align: center;
    color: #0E2F50;
}

.sdg_tanusitvany_vallalkozasnev
{
    margin-top: 35mm;
    margin-bottom: 35mm;
    font-size: 12mm;
}

.sdg_tanusitvany_ketoszlop
{
    display: grid;
    grid-template-columns: auto auto;
    font-family: WorkSans;
    font-size: 8mm;
    font-weight: 100;
    text-align: center;
    color: #0E2F50;
    margin-top: 35mm;
    margin-bottom: 35mm;
}

.sdg_tanusitvany_tanusito_szervezet
{
    margin-top: 30mm;
    margin-bottom: 20mm;
    font-family: WorkSans;
    font-size: 8mm;
    font-weight: 100;
    text-align: center;
    color: #0E2F50;
}

.sdg_tanusitvany_alairas, .sdg_tanusitvany_tanusitasdatum
{
    margin-top: 40mm;
    margin-bottom: 20mm;
}

.sdg_tanusitvany_alairas_kep
{
    padding-top: 20mm;
    height: 20mm;
}

.sdg_tanusitvany_alairas_szoveg
{
    font-family: WorkSans;
    font-size: 8mm;
    font-weight: 100;
    text-align: center;
    color: #0E2F50;
}

.sdg_tanusitvany_lablec
{
    margin-top: 35mm;
    margin-bottom: 35mm;
    font-family: WorkSans;
    font-size: 5mm;
    font-weight: 100;
    text-align: left;
    margin-left: 5%;
    margin-right: 5%;
}

@media screen and (max-width:1880px)
{
    .sdg_tanusitvany_ikonterulet
    {
        position: absolute;
        width: 0.12vw;
        float: left;
        margin-top: 5%;
        margin-bottom: 5%;
        display: grid;
        grid-template-columns: auto;
    }

    .sdg_tanusitvany_csempe
    {
        //width: 12%;
    }
    
    .sdg_tanusitvany_tartalom_terulet
    {        
       float: unset;
       position: relative;
       left: 12%;
       padding-right: 12%;
       width: 85%;
    }

    .sdg_tanusitvany_cim
    {
        font-size: 36pt;
    }

    .sdg_tanusitvany_fejlec p
    {
        height: 12mm;
    }

    .sdg_tanusitvany_terkoz
    {
        height: 20mm;
    }

    .sdg_tanusitvany_szoveg
    {
        font-size: 24pt;
    }

    .sdg_tanusitvany_vallalkozasnev
    {
        margin-top: 35mm;
        margin-bottom: 35mm;
        font-size: 28pt;
    }

    .sdg_tanusitvany_tanusito_szervezet
    {
        margin-top: 30mm;
        margin-bottom: 0mm;
        font-size: 16pt;
    }

    .sdg_tanusitvany_alairas, .sdg_tanusitvany_tanusitasdatum
    {
        margin-top: 10mm;
        margin-bottom: 10mm;
    }

    .sdg_tanusitvany_alairas_kep
    {
        padding-top: 0mm;
        height: 20mm;
    }

    .sdg_tanusitvany_alairas_szoveg
    {
        font-size: 16pt;
    }

    .sdg_tanusitvany_lablec
    {
        font-size: 12pt;
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

@media screen and (max-width:1024px)
{
    html
    {
        overflow: auto;
    }

    .csempeterulet
    {
        position: relative;
        bottom: 0;
        left: 0;
        float: none;
        align-self: center;
        margin-top: 20vh;
        padding-left: 0.1vh;
        grid-template-columns: auto auto;
  	    grid-gap: 2vw;
    }

    .focel_csempe
    {
        height: 45vw;
        width: 45vw;
        margin: auto;
    }

    .eredmeny_csempe
    {
        height: 45vw;
        width: 45vw;
        margin: auto;
    }

    .rotated
    {
        transform: none;
    }

    .kerdoiv_kepernyo
    {
        display: grid;
        grid-template-columns: auto;
    }

    .focel_topic
    {
        width: 100vw;
        height: 50vh;
        float: none;
        padding: 0;
        vertical-align: middle;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .focel_topic_tartalom_box
    {
        position: relative;
        top: 10%;
        left: unset;
        transform: translate(0, -10%);
        display: block;
        width: 90%;
        height: auto;
        text-align: center;
    }

    .gomb
    {
        font-size: 12px;
    }

    .focel_topic_cim
    {
        font-size: 2.5vh;
        color: #0E2F50;
    }

    .focim_topic_kep
    {
        margin: 5px;
        height: 15vh;
    }

    .focel_topic_motto
    {
       font-size: 2.5vh;
    }

    .focel_tartalom
    {
        width: 100vw;
        height: 50vh;
        float: none;
        overflow-x: auto;
        margin: auto;
    }

    .focel_kep
    {
        transform: none;
        height: 15vw;
        right: 0;
    }

    .focel_szoveg
    {
        transform: none;
        width: 40vw;
        font-size: 4vw;
        padding: 2px;
        left: 0;
    }

    .eredmeny_kep
    {
        transform: none;
        height: 15vw;
        right: 0;
    }

    .eredmeny_szoveg
    {
        transform: none;
        width: 40vw;
        font-size: 4vw;
        padding: 2px;
        right: 0;
    }

    .lablec_container
    {
        position: absolute;
        top: 2px;
        width: 100%;
        z-index: -1;
    }

    .lablec_logo_kep
    {
        position: absolute;
        //top: 2px;
        top: 80px;
        left: 3vw;
        width: 35vw;
        height: auto;
    }

    .lablec_szoveg_cim
    {
        top: 2px;
        font-size: 3vh;
        max-width: 60vw;
        max-height: 20vh;
    }

    .lablec_szoveg
    {
        position: absolute;
        top: 70px;
        right: 3vw;
        font-size: 2vh;
        width: 55vw;
        max-height: 20vh;
    }

    .topic_lablec
    {
        display: block;
        position: absolute;
        left: 50%;
        top: 48.5%;
    }

    .focel_tartalom_box
    {
        position: relative;
        display: block;
        top: unset;
        right: unset;
        transform: translate(0,0);
        //margin: auto;
        padding-top: 10px;
        width: 80%;
        height: auto;
        text-align: center;
        overflow-y: auto;
    }

    .radio_container
    {
        font-size: 3vh;
    }

    .radio_checkmark 
    {
        height: 3vh;
        width: 3vh;
        margin: 1vh;
    }

    .radio_container .radio_checkmark:after 
    {
        top: 1vh;
        left: 1vh;
        width: 1vh;
        height: 1vh;
        border-radius: 50%;
        background: white;
    }

    .csuszka
    {
        height: 2vh;
    }

    .csuszka::-webkit-slider-thumb
    {
        height: 3vh;
        width: 3vh;
    }

    .csuszka::-moz-range-thumb
    {
        height: 3vh;
        width: 3vh;
    }

    .statuszbar
    {
        transform: none;
        width: 30vw;
        height: 1.5vh;
        bottom: 0.5vh;
        left: 0;
        margin-top: 1vh;
    }

    .focel_tartalom_kerdes
    {
        font-family: WorkSans;
        font-size: 2.5vh;
        font-weight: 600;
        text-align: left;
    }

    .focel_tartalom_szoveg
    {
        font-size: 3vw;
    }
    
    .focel_tartalom_gomb
    {
        height: 4vh;
        width: auto;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 2.5vw;
    }

    .profil_ikon
    {
        top: 2px;
        //top: 80px;
        left: 3vw;
    }

    .help_ikon
    {
        top: 2px;
        //top: 80px;
        left: 10vw;
    }

    .flex_doboz
    {
        display: flex;
        flex-direction: column;
    }

    .belepes_ablak
    {
        left: 30%;
        top: 50%;
        transform: translate(-30%, -50%);
        width: 70%;
    }

    .reg_ablak_terulet
    {
        width: 80vw;
    }

    .eredmeny_terulet
    {
        width: 100vw;
        height: 50vh;
        margin-top: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 5px;
        margin-right: 5px;
        border-style: none;
        overflow-y: auto;
    }

    .eredmeny_terulet_fejlec
    {
        font-size: 2vh;
    }

    .eredmeny_tartalom
    {
        max-width: 90vw;
        margin-top: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 5px;
        margin-right: 5px;
        border-style: none;
    }

    .quickstat_doboz
    {
        visibility: hidden;
    }

    .canvas_div_pdf
    {
    padding-top: 2.5mm;
    padding-bottom: 2.5mm;
    padding-left: 2.5mm;
    padding-right: 2.5mm;
    }

    .tanusitvany
    {
        transform: scale(50%, 50%);
    }

    .tanusitvany_fejlec_kep
    {
        margin: 20px;
        height: 30px;
    }

    .tanusitvany_csempe
    {
        width: 30px;
        height: 30px;
        margin: auto;
        border-style: solid;
        border-width: thin;
    }

    .tanusitvany_csempe_kep
    {
        height: 20px;
    }

    .tanusitvany_fejlec
    {
        display: block;
        font-family: WorkSans;
        font-weight: 600;
        font-size: 18px;
        color:#0E2F50;
        margin: 5px;
    }

    .tanusitvany_test
    {
        display: block;
        font-family: WorkSans;
        font-weight: 600;
        font-size: 12px;
        margin: 5px;
        color:#0E2F50;
    }

    .tanusitvany_lablec
    {
        display: block;
        font-family: WorkSans;
        font-weight: 600;
        font-size: 1vh;
        margin: 2px;
        color:#0E2F50;
    }

    .tanusitvany_szoveg
    {
        font-family: WorkSans;
        font-size: 12px;
        font-weight: 100;
        text-align: center;
        color: #0E2F50;
    }

    .history_terulet_fejlec
    {
        display: block;
        height: 15vh;
    }

    .opcio_history
    {
        height: 30px;
        font-size: 12px;
        width: 20%;
    }

    .history_terulet_tartalom
    {
        display: block;
        height: 60vh;
        //margin-left: 30vw;
        //margin-right: 30vw;
        margin-bottom: 15px;
        width: 100vw;
        //transform: scale(80%);
    }

    .history_terulet_lablec
    {
        display: block;
        height: auto;
        position: relative;
        margin-bottom: 5px;
    }

    .history_szoveg
    {
        font-family: WorkSans;
        font-size: 12px;
        font-weight: 100;
        text-align: center;
        color: #0E2F50;
    }

    .sdg_tanusitvany_terulet_tartalom
    {
        //position: relative;
        //height: 80%;
        //aspect-ratio: 210 / 297;
    }

    .sdg_canvas_div_pdf
    {
        aspect-ratio: 210 / 297;
        //transform: scale(100vh);
    }

    .sdg_tanusitvany_oldal
    {
        aspect-ratio: 210 / 297;
        //height: 100vh;
        //width: 100vw;
    }

    .sdg_tanusitvany_csempe
    {
        width: 5.5vw;
        height: 5.5vw;
        aspect-ratio: 1/1;
        margin: auto;
        padding: 0;
    }

    .sdg_tanusitvany_csempe_tartalom
    {
        padding: 0px;
    }

    .sdg_tanusitvany_csempe_szoveg
    {
        font-size: 0.5vw;
    }

    .sdg_tanusitvany_csempe_szam
    {
        font-family: WorkSans;
        font-size: 1.2vw;
        font-weight: bold;
        float: left;
        color: white;
    }

    .sdg_tanusitvany_tartalom_terulet
    {
        width: 80%;
        //width: 90%;
        //margin-right: 0;
        //padding-top: 10%;
        //padding-bottom: 10%;
        //padding-right: 0;
    }

    .sdg_tanusitvany_cim
    {
        font-size: 2vh;
        //margin: 5px;
        //margin-top: 20mm;
        //margin-bottom: 30mm;
    }

    .sdg_tanusitvany_fejlec p
    {
        height: 3vh;
    }

    .sdg_tanusitvany_terkoz
    {
        height: 3vh;
    }

    .sdg_tanusitvany_szoveg
    {
        font-size: 1.5vh;
    }

    .sdg_tanusitvany_vallalkozasnev
    {
        margin-top: 3vh;
        margin-bottom: 3vh;
        font-size: 2.5vh;
    }

    .sdg_tanusitvany_ketoszlop
    {
        font-size: 1vh;
        margin-top: 3vh;
        margin-bottom: 3vh;
    }

    .sdg_tanusitvany_tanusito_szervezet
    {
        margin-top: 2vh;
        margin-bottom: 2vh;
        font-size: 1vh;
    }

    .sdg_tanusitvany_alairas, .sdg_tanusitvany_tanusitasdatum
    {
        margin-top: 2vh;
        margin-bottom: 2vh;
        font-size: 1vh;
    }

    .sdg_tanusitvany_alairas_kep
    {
        padding-top: 2vh;
        height: 2vh;
    }

    .sdg_tanusitvany_alairas_szoveg
    {
        font-size: 1vh;
    }

    .sdg_tanusitvany_lablec
    {
        margin-top: 3vh;
        margin-bottom: 3vh;
        font-size: 0.8vh;
    }
}

@media print
{
    .sdg_tanusitvany_oldal
    {
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
    }
}