<br />
<b>Warning</b>:  Undefined array key "app" in <b>/srv/www/diagnosthu/www/diagnost.hu/_sys/css.php</b> on line <b>31</b><br />
<br />
<b>Warning</b>:  Undefined array key "dba" in <b>/srv/www/diagnosthu/www/diagnost.hu/_sys/css.php</b> on line <b>40</b><br />
<br />
<b>Warning</b>:  Undefined array key "ico" in <b>/srv/www/diagnosthu/www/diagnost.hu/_sys/css.php</b> on line <b>41</b><br />
<br />
<b>Warning</b>:  Undefined array key "lan" in <b>/srv/www/diagnosthu/www/diagnost.hu/_sys/css.php</b> on line <b>42</b><br />
<br />
<b>Deprecated</b>:  explode(): Passing null to parameter #2 ($string) of type string is deprecated in <b>/srv/www/diagnosthu/www/diagnost.hu/_sys/css.php</b> on line <b>48</b><br />
<br />
<b>Deprecated</b>:  explode(): Passing null to parameter #2 ($string) of type string is deprecated in <b>/srv/www/diagnosthu/www/diagnost.hu/_sys/css.php</b> on line <b>204</b><br />

@font-face {
  font-family: "garamond_r";
  src: url("https://diagnost.hu/_sys/_fnt/Garamond-Regular.woff");
}
@font-face {
  font-family: "jost_r";
  src: url("https://diagnost.hu/_sys/_fnt/Jost-Regular.woff");
}
@font-face {
  font-family: "jost_m";
  src: url("https://diagnost.hu/_sys/_fnt/Jost-Medium.woff");
}
@font-face {
  font-family: "jost_b";
  src: url("https://diagnost.hu/_sys/_fnt/Jost-Bold.woff");
}
@font-face {
  font-family: "raleway_medium";
  src: url("https://diagnost.hu/_sys/_fnt/raleway-medium.woff2");
}
@font-face {
  font-family: "raleway_regular";
  src: url("https://diagnost.hu/_sys/_fnt/raleway-regular.woff2");
}
@font-face {
  font-family: "raleway_semibold";
  src: url("https://diagnost.hu/_sys/_fnt/raleway-semibold.woff2");
}
@font-face {
  font-family: "raleway_bold";
  src: url("https://diagnost.hu/_sys/_fnt/raleway-bold.woff2");
}
body{
	font-family: raleway_regular;	
}

.font-1-sb{
	font-family: "raleway_semibold" !important;
}
.font-1-b{
	font-family: "raleway_bold" !important;
}
*{
	margin: 0; 
	padding: 0; 
	list-style-type: none;
	font-weight: normal;	
	text-decoration: none;
	border: 0;
}


[id^="rough_"] {
	display: inline-block;
	position: relative;   
	margin-bottom: 10px;
}

.need_load{
	filter: blur(10px);
	transition: filter 0.2s ease-in-out;	
}

.need_load.loaded{
	filter: blur(0px);	
}

br{
	position: static;
	float: none;	
}

html{
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-y: scroll;
}
html.noscroll{
	overflow: hidden;
}
body{
	width: 100%;
	height: auto;
    cursor: default;   
	color: #2e4557;
	background: #fff;
	/*user-select: none;*/
	/*
	-webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	*/
}
body[data-typ="2"] .show_1,
body[data-typ="1"] .show_2{
	display: none;
}


div, span, p, img, ol, li, a, h1, h2, h3{
	position: relative;
	float: left;	
}


.jarallax,
.jarallax-container{
  clip-path: none !important;
}

.jarallax-img{
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

.jarallax{ position: relative; z-index: 0; }
.jarallax-container{ z-index: 0 !important; }


/* width */
::-webkit-scrollbar{
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track{
  background: #061e28;
  border-left: 0px solid #061e28;
}

/* Handle */
::-webkit-scrollbar-thumb{
	background: #e2d08d;
	min-height: 200px;
	cursor: pointer !important;
	transition: background 0.2s ease-in-out;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover{
	background: #e2d08d;
	cursor: pointer !important;
}



p{
    line-height: 24px;	
}


#chatbase-bubble-button{
	z-index: 1 !important;	
}



div.synlab_partner{
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	max-width: 200px;	
	text-align: center;
	text-transform: uppercase;
	font-family: 'raleway_bold';
	color: #0b346a;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -2px -2px 4px rgba(255, 255, 255, 0.3);
	padding: 20px 30px 25px 30px;
	border-radius: 25px;
	margin-bottom: 15px;
}
div.synlab_partner img{
	width: 100%;	
}



#popup{
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2e4557;
    z-index: 100;
    padding: 40px;
    color: #fff;
	border-radius: 25px;
	transform: scale(0.0);
	opacity: 0.0;
	transition: translate 0.2s ease-in-out, opacity 0.2s ease-in-out;
	box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.4),0px 0px 20px rgba(0,0,0,0.4);	
}
#popup.visible{
	transform: scale(1.0) translate(-50%, -50%);
	opacity: 1.0;	
}
#popup s{
	position: absolute;
    top: 0;
	right: 0px;
	height: 50px;
	width: 50px;
	cursor: pointer;
	line-height: 50px;
	text-align: center;	
}



html {
	-webkit-tap-highlight-color: transparent; /* iOS/Android */
}

/* ha teljesen mindenre akarod */
* {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;              /* iOS: long-press menü (copy/save) */
}

/* =========================================================
   GLOBAL TYPOGRAPHY (basics.css)
   - egy helyről kezeld a betűméreteket
   ========================================================= */

:root{
  /* alap betű */
  --fs-base: clamp(15px, 0.9vw + 12px, 18px);
  --lh-base: 1.6;

  /* címsor skála */
  --fs-h1: clamp(34px, 2.6vw + 18px, 60px);
  --fs-h2: clamp(26px, 1.8vw + 16px, 42px);
  --fs-h3: clamp(20px, 1.2vw + 14px, 28px);
  --fs-h4: clamp(18px, 0.9vw + 13px, 22px);

  /* “kisebb” szövegek */
  --fs-large: clamp(20px, 1.2vw + 14px, 28px);
  --fs-medium: clamp(16px, 0.55vw + 13px, 20px);
  --fs-small: clamp(12px, 0.35vw + 10.5px, 14px);
  --fs-micro: 12px;

  /* kényelmi: gyakran használt méretek */
  --fs-nav: clamp(14px, 0.5vw + 12px, 18px);
  --fs-btn: clamp(13px, 0.45vw + 11.5px, 16px);
  
  --fs-display: clamp(32px, 0.8vw + 25px, 40px);
  
  /* csStats-hoz (mobil ~36px, fullHD körül ~44px) */
  --fs-stat: clamp(36px, 0.6vw + 33px, 44px);

  /* ha később még nagyobb kell */
  --fs-hero: clamp(42px, 2.2vw + 22px, 72px);
  
    /* címsor skála */
  --fs-h1: clamp(34px, 2.6vw + 18px, 60px);
  --fs-h2: clamp(26px, 1.8vw + 16px, 42px);
  --fs-h3: clamp(20px, 1.2vw + 14px, 28px);
  --fs-h4: clamp(18px, 0.9vw + 13px, 22px);

  /* “p” skála */
  --fs-p-m: 1em; /* alap */

	--fs-p-xxl: clamp(22px, 1.2vw + 16px, 30px);
	--fs-p-xl:  clamp(20px, 1.0vw + 15px, 26px);
	--fs-p-l:   clamp(18px, 0.9vw + 14px, 22px);
	
	--fs-p-s:   clamp(15px, 0.45vw + 13px, 17px);
	--fs-p-xs:  clamp(14px, 0.35vw + 12px, 16px);
	--fs-p-xxs: clamp(12px, 0.25vw + 11px, 13px);
}

/* alap */
html{ font-size: 100%; }
body{
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* head-ek egységesen */
h1, h2, h3, h4{
  line-height: 1.15;
  font-weight: normal;
}

/* konkrét méretek */
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }
h4{ font-size: var(--fs-h4); }

p, li{
  font-size: 1em;      /* a body-hoz igazodik */
  line-height: var(--lh-base);
}

small, .txt-small{ font-size: var(--fs-small); }
.txt-micro{ font-size: var(--fs-micro); }

/* link/btn alap (ha kell egységesíteni) */
a, button, input, select, textarea{
  font-size: inherit;
}
.btn, a.btn{
  font-size: var(--fs-btn);
  line-height: 1.2;
}


/* utility classok */
.fs-stat{ font-size: var(--fs-stat) !important; line-height: 1.05; }
.fs-hero{ font-size: var(--fs-hero) !important; line-height: 1.05; }
.fs-small{
  font-size: var(--fs-small) !important;
  line-height: 1.6;
}
.fs-micro{
  font-size: var(--fs-micro) !important;
  line-height: 1.5;
}
.fs-medium{
  font-size: var(--fs-medium) !important;
  line-height: 1.55;
}
.fs-large{
  font-size: var(--fs-large) !important;
  line-height: 1.3;
}

.fs-display{ font-size: var(--fs-display) !important; line-height: 1.1; }



/* head utility */
.fs-h1{ font-size: var(--fs-h1) !important; line-height: 1.15; }
.fs-h2{ font-size: var(--fs-h2) !important; line-height: 1.15; }
.fs-h3{ font-size: var(--fs-h3) !important; line-height: 1.15; }
.fs-h4{ font-size: var(--fs-h4) !important; line-height: 1.15; }

/* p utility */
.fs-p-xxl{ font-size: var(--fs-p-xxl) !important; line-height: 1.35; }
.fs-p-xl{  font-size: var(--fs-p-xl)  !important; line-height: 1.4; }
.fs-p-l{   font-size: var(--fs-p-l)   !important; line-height: 1.5; }

.fs-p-m{   font-size: var(--fs-p-m)   !important; line-height: var(--lh-base); }

.fs-p-s{   font-size: var(--fs-p-s)   !important; line-height: 1.6; }
.fs-p-xs{  font-size: var(--fs-p-xs)  !important; line-height: 1.65; }
.fs-p-xxs{ font-size: var(--fs-p-xxs) !important; line-height: 1.7; }



.col_bck_0{
	background: #ffffff;
	color: #2e4557;	
}

.col_bck_1{
	background: #f7f7f7;
	color: #2e4557;	
}/*MENÜ - FŐMENÜ*/
#M.base_menu{
	position: fixed;
	width: calc(100% - 20px);
	
	font-family: 'jost_m';
	text-transform: lowercase;
	padding: 0px 10px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	overflow: hidden;	
}




#M ol.user{
	float: right;
	margin: 20px 50px 20px 15px;	
}
#M ol.user li{
	margin-left: 25px;
	cursor: pointer;
}
#M ol.user li .icon{
	float: left;	
	height: 50px;
	width: 50px;
}
#M ol.user li .text{	
	height: 40px;
	color: #fff;
	margin: 5px 0px 5px 12px;
}
#M ol.user li .text *{	
	position: relative;
	float: left;
	clear: both;
	line-height: 20px;
}
#M ol.user li .text b{	
	font-family: 'jost_b';
}
#M ol.user li .text em{	
	font-family: 'jost_r';
}

#M ol.user li .icon:before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
	height: 48px;
	width: 48px;
	content: '';
	transition: width 0.4s cubic-bezier(0.77, 0, 0.175, 1), height 0.4s cubic-bezier(0.77, 0, 0.175, 1);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.sticky #M ol.user li .icon:before{
    background: rgba(255, 255, 255, 0.0);
	border: 1px solid #2e4557;
}

.sticky #M ol.user li .icon svg path {
    fill: #2e4557;
}

.sticky #M ol.user li .text {
    color: #2e4557;
}

#M ol.user li:hover .icon:before{
	height: 46px;
	width: 46px;
}
#M ol.user li .icon svg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 26px;
	width: 26px;
	transition: width 0.4s cubic-bezier(0.77, 0, 0.175, 1), height 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
#M ol.user li:hover .icon svg{
	height: 30px;
	width: 30px;
}


#M ol.user li path {
    fill: #FFF;
}


#M.base_menu > div.logo{
	margin-right: 0px;
	margin: 5px 0 15px 0;
}

#M.base_menu > div.logo{
	left: 50%;
	transform: translateX(-50%);
}

#M.base_menu div.logo img{
	height: 50px;
    width: auto;
    margin: 15px 5px;
}


#M.base_menu > div.logo img{
	opacity: 0.0;
	transition: opacity 0.2s ease-in-out;
}

#M > ol.main{
	position: absolute;
	clear: both;
	left: 50%;
	transform: translateX(-50%);
	top: 90px;
}
.open_menu #M > ol.main{
	display: none;
}

#M > ol.main li.menu a{
	color: #2e4557;
	text-transform: uppercase;
	padding: 5px 10px 0px 10px;
}



#M > ol.main li.menu > a{
	font-family: jost_m
}





#M .menu_bck{
	height: 150px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;	
	transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
#M .menu_bck svg{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
#M .menu_bck svg path{
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -2px -2px 4px rgba(255, 255, 255, 0.3);
}

#M .menu_bck svg path {
    fill: #FFF;
}
#sticky_logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    font-size: 120px;
    text-align: center;
    color: rgba(255, 255, 255, 1.0);
    transition: 0.2s color ease-in-out, 0.2s font-size ease-in-out, 0.2s top ease-in-out, 0.2s opacity ease-in-out;
}

.sticky #sticky_logo{
    position: fixed;
    top: 16px;
    font-size: 28px;
    color: #ed6a33;
	opacity: 0.0;
}

.sticky #M > div.logo img{
	opacity: 1.0;
}


#M .menu_bck{
	height: 0px;
	width: 100%;
	position: fixed;
	top: -150px;
	left: 0;	
	transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1), top 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
.sticky #M .menu_bck{
	top: -50px;
	height: 150px;	
}
#M .menu_bck svg {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

#M .menu_bck svg path {
    fill: #FFF;
}







@media all and (max-width: 1600px){
	#M ol.user{
		margin: 20px 30px 20px 15px;	
	}
}



@media all and (max-width: 800px){
	#M ol.user{
		position: fixed;
		top: 0;
		right: 0;
		margin: 15px;
	}
	#M ol.user li {
		margin-left: 5px;
		cursor: pointer;
	}
	#M ol.user li .text{
		display: none;	
	}
	
	
}


@media all and (max-width: 600px){
	#M.base_menu .logo {
        height: 40px;
        padding: 0px 0 0px 0;
        left: 0;
        transform: none;
    }
	#M.base_menu .logo {
        height: 50px;
        padding: 0;
		margin: 0;
    }
	#M.base_menu > div.logo{
	
	}
	#M.base_menu div.logo img{
		height: 34px;
		margin: 0;	
		margin: 13px;
		
	}
	#M ol.user li.user_alert,
	#M ol.user li.user_settings{
		display: none;	
	}
	
	#M ol.user li .icon{
		float: left;	
		height: 40px;
		width: 40px;
	}
	#M ol.user li .text{	
		height: 40px;
		color: #fff;
		margin: 0px 0px 0px 10px;
	}
	
	
	
	#M ol.user li .icon:before{
		height: 38px;
		width: 38px;
	}
	
	
	#M ol.user li:hover .icon:before{
		height: 36px;
		width: 36px;
	}
	#M ol.user li .icon svg{
		height: 20px;
		width: 20px;
	}
	#M ol.user li:hover .icon svg{
		height: 24px;
		width: 24px;
	}
}


@media all and (max-width: 600px){
	#sticky_logo {
		top: 150px;
		font-size: 50px;
	}
	
	.sticky #M .menu_bck {
		height: 120px;
	}
	
	
}











@media (min-width: 1025px){
  #M.base_menu{ overflow: visible !important; }
}
















/* =========================================================
   CLEAN: SLIDE MENU + SUBMENUS (EGYSÉGES, DUPE-FREE)
   - Panel zárva, body.open_menu nyitja
   - Desktop: a submenu hozzá van ragasztva a fő panelhez
   - Mobil/tablet: teljes szélességű panel, lenyíló almenükkel
   - Globális float/position reset miatt több explicit override van
   ========================================================= */

body.open_menu #M.base_menu{
  z-index: 115;
}

/* ---------- SLIDE PANEL ---------- */
#M > ol.slide_menus{
  position: fixed !important;
  top: 104px;
  left: 0;

  width: 300px;
  max-height: calc(100vh - 150px);

  margin: 0 !important;
  padding: 0 !important;

  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 35px rgba(46,69,87,.18);

  transform: translateX(-330px);
  opacity: 0;
  pointer-events: none;

  overflow: hidden;
  overflow-y: auto;

  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
  z-index: 20;
}

body.open_menu #M > ol.slide_menus{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

#M > ol.slide_menus::-webkit-scrollbar{
  width: 3px;
}
#M > ol.slide_menus::-webkit-scrollbar-track{
  background: rgba(46,69,87,.06);
}
#M > ol.slide_menus::-webkit-scrollbar-thumb{
  background: #8cbbb6;
  min-height: 80px;
  border-radius: 10px;
}
#M > ol.slide_menus::-webkit-scrollbar-thumb:hover{
  background: #8cbbb6;
  cursor: pointer !important;
}

/* Desktopon kell, hogy a jobbra nyíló submenu látszódjon */
@media (min-width: 1025px){
  #M.base_menu{
    overflow: visible !important;
  }

  body.open_menu #M > ol.slide_menus{
    overflow: visible;
  }
}

/* ---------- MENU ITEM ---------- */
#M > ol.slide_menus li.menu{
  position: relative !important;
  float: none !important;
  clear: both;

  width: 100%;
  margin: 0 !important;
  padding: 0 !important;

  line-height: 1.25;
  box-sizing: border-box;
}

#M > ol.slide_menus li.menu > a{
  position: relative !important;
  float: none !important;
  display: block;

  width: 100%;
  box-sizing: border-box;

  right: auto !important;
  opacity: 1 !important;

  padding: 15px 46px 15px 26px;

  color: #2e4557;
  text-transform: uppercase;
  text-align: left;
  line-height: 1.25;
  white-space: normal;

  transition: color .18s ease, background .18s ease, padding-left .18s ease;
}

#M > ol.slide_menus li.menu > a:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: #8cbbb6;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .18s ease;
}

#M > ol.slide_menus li.menu.act > a,
body.open_menu #M > ol.slide_menus li.menu:hover > a,
body.open_menu #M > ol.slide_menus li.menu.sub_open > a{
  color: #8cbbb6;
  background: rgba(140,187,182,.10);
  padding-left: 31px;
}

#M > ol.slide_menus li.menu.act > a:before,
body.open_menu #M > ol.slide_menus li.menu:hover > a:before,
body.open_menu #M > ol.slide_menus li.menu.sub_open > a:before{
  transform: scaleY(1);
}

/* Submenu jelző nyíl */
#M > ol.slide_menus li.menu:has(> ol.hover_sub) > a:after{
  content: '›';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  line-height: 20px;
  color: rgba(46,69,87,.42);
  transition: color .18s ease, transform .18s ease;
}

body.open_menu #M > ol.slide_menus li.menu:hover > a:after,
body.open_menu #M > ol.slide_menus li.menu.sub_open > a:after{
  color: #8cbbb6;
}

/* ---------- SUBMENU RESET ---------- */
#M > ol.slide_menus li.menu > ol.hover_sub{
  list-style: none;
  margin: 0;
  padding: 0;
}

#M > ol.slide_menus li.menu > ol.hover_sub li{
  position: relative !important;
  float: none !important;
  clear: both;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

#M > ol.slide_menus li.menu > ol.hover_sub li span{
  width: 100%;
  box-sizing: border-box;
}

#M > ol.slide_menus li.menu > ol.hover_sub li a{
  position: relative !important;
  float: none !important;
  display: block;
  box-sizing: border-box;
  text-align: left;
  white-space: normal;
}

/* =========================================================
   DESKTOP: hozzáillesztett submenu panel
   ========================================================= */
@media (min-width: 1025px){

  #M > ol.slide_menus li.menu:has(> ol.hover_sub):after{
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 14px;
    height: 100%;
    background: transparent;
  }

  #M > ol.slide_menus li.menu > ol.hover_sub{
    position: absolute !important;
    top: 0;
    left: 100%;
    transform: none;

    width: 280px;
    max-height: calc(100vh - 120px);

    margin: 0 !important;
    padding: 12px 0 !important;

    background: rgba(255,255,255,.97);
    border-left: 1px solid rgba(140,187,182,.35);
    border-radius: 0 16px 16px 0;
    box-shadow: 18px 22px 38px rgba(46,69,87,.20);

    overflow-x: hidden;
    overflow-y: auto;

    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .16s ease, visibility 0s linear .18s;
  }

  #M > ol.slide_menus li.menu > ol.hover_sub.helyszin{
    width: min(430px, calc(100vw - 330px));
    min-width: 360px;
  }

  #M > ol.slide_menus li.menu:hover > ol.hover_sub,
  #M > ol.slide_menus li.menu > ol.hover_sub:hover{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .16s ease, visibility 0s linear 0s;
  }

  #M > ol.slide_menus li.menu > ol.hover_sub li a{
    width: 100%;
    padding: 10px 18px;

    color: #2e4557;
    text-transform: uppercase;
    line-height: 1.25;

    border-left: 3px solid transparent;
    transition: background .18s ease, color .18s ease, border-color .18s ease, padding-left .18s ease;
  }

  #M > ol.slide_menus li.menu > ol.hover_sub li a:hover{
    color: #2e4557;
    background: rgba(140,187,182,.13);
    border-left-color: #8cbbb6;
    padding-left: 22px;
  }

  #M > ol.slide_menus li.menu > ol.hover_sub.helyszin li a{
    padding-top: 9px;
    padding-bottom: 9px;
  }

  #M > ol.slide_menus li.menu > ol.hover_sub.helyszin span.font-1-sb{
    display: block;
    float: none !important;
    clear: both;

    font-size: 15px;
    line-height: 18px;
    color: #2e4557;
  }

  #M > ol.slide_menus li.menu > ol.hover_sub.helyszin span.sub{
    display: block;
    float: none !important;
    clear: both;

    font-size: 12px;
    line-height: 16px;
    margin-top: 2px;
    color: rgba(46,69,87,.78);
    text-transform: uppercase;
  }

  #M > ol.slide_menus li.menu > ol.hover_sub::-webkit-scrollbar{
    width: 4px;
  }
  #M > ol.slide_menus li.menu > ol.hover_sub::-webkit-scrollbar-track{
    background: rgba(46,69,87,.06);
  }
  #M > ol.slide_menus li.menu > ol.hover_sub::-webkit-scrollbar-thumb{
    background: #8cbbb6;
    border-radius: 10px;
    min-height: 70px;
  }
}

/* =========================================================
   MOBILE/TABLET: teljes szélességű menü + lenyíló submenu
   ========================================================= */
@media (max-width: 1024px){

  #M.base_menu{
    overflow: visible !important;
  }

  #M > ol.main{
    display: none;
  }

  body #HBM{
    opacity: 1.0;
  }

  #M > div.logo{
    margin: 15px 0;
  }

  #M > ol.slide_menus{
    top: 76px;
    left: 0;

    width: 100vw;
    max-height: calc(100vh - 76px);

    background: rgba(255,255,255,.97);
    box-shadow: 0 18px 38px rgba(46,69,87,.22);

    transform: translateX(-105vw);

    border-top: 1px solid rgba(140,187,182,.22);
  }

  body.open_menu #M > ol.slide_menus{
    transform: translateX(0);
  }

  #M > ol.slide_menus li.menu > a{
    padding: 18px 58px 18px 30px;
    border-bottom: 1px solid rgba(46,69,87,.06);
  }

  #M > ol.slide_menus li.menu:has(> ol.hover_sub) > a:after{
    right: 28px;
    transform: translateY(-50%) rotate(90deg);
  }

  #M > ol.slide_menus li.menu.sub_open > a:after{
    transform: translateY(-50%) rotate(-90deg);
  }

  #M > ol.slide_menus li.menu > ol.hover_sub{
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    display: none;
    float: none !important;
    clear: both;

    width: calc(100% - 40px);
    max-height: none;

    margin: 10px 20px 16px 20px !important;
    padding: 10px 0 !important;

    background: #eef6f5;
    opacity: 1 !important;
    border-left: 4px solid #8cbbb6;
    border-radius: 12px;
    box-shadow: none;

    overflow: hidden;
  }

  #M > ol.slide_menus li.menu.sub_open > ol.hover_sub{
    display: block;
  }

  #M > ol.slide_menus li.menu > ol.hover_sub li a{
    width: 100%;
    padding: 12px 16px;

    color: #2e4557;
    text-transform: none;
    text-align: left;
    line-height: 1.35;

    border-radius: 0;
    transition: background .18s ease, color .18s ease;
  }

  #M > ol.slide_menus li.menu > ol.hover_sub li a:hover{
    background: #8cbbb6;
    color: #fff;
  }

  #M > ol.slide_menus li.menu > ol.hover_sub.helyszin span.font-1-sb,
  #M > ol.slide_menus li.menu > ol.hover_sub.helyszin span.sub{
    display: block;
    float: none !important;
    clear: both;
    width: 100%;
  }

  #M > ol.slide_menus li.menu > ol.hover_sub.helyszin span.font-1-sb{
    font-size: 14px;
    line-height: 18px;
  }

  #M > ol.slide_menus li.menu > ol.hover_sub.helyszin span.sub{
    font-size: 12px;
    line-height: 16px;
    margin-top: 2px;
  }
}

@media all and (max-width: 600px){
  #M > div.logo img{
    height: 30px;
    width: auto;
    margin: 5px 0px;
  }

  #M > ol.slide_menus{
    top: 64px;
    max-height: calc(100vh - 64px);
  }

  #M > ol.slide_menus li.menu > a{
    padding: 16px 54px 16px 26px;
  }

  #M > ol.slide_menus li.menu > ol.hover_sub{
    width: calc(100% - 28px);
    margin: 10px 14px 14px 14px !important;
  }
}





/*MENÜ - HAMBURGERMENÜ*/

#HBM{
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	cursor: pointer;
	
	z-index: 110;
	border-radius: 50%;
	pointer-events: auto;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	transition: opacity 0.2s ease-in-out, right 0.2s ease-in-out;
	margin-top: 15px;
	top: 10px;
	left: 30px;
}




.hbml{
	width: 28px;
	height: 2px;
	overflow: hidden;
	position: absolute;
	z-index: 10;
}

.hbml-in{
	width: 84px;
	height: 2px;
	position: absolute;
	top: 0;
	left: 0;
}

.hbml-in::before,
.hbml-in::after{
	width: 28px;
	height: 2px;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	background: #fff;
	transition: background 0.9s cubic-bezier(0.7, 0, 0.3, 1);
}


.sticky .hbml-in::before,
.sticky .hbml-in::after{
	background: #000;
}

.hbml-in::before{
	left: -56px;
}

.hbml-in::after{
	left: 0;
}

.hbml--01,
.hbml--02,
.hbml--03,
.hbml--cross01,
.hbml--cross02{
	left: 12px;
}

.hbml--01{
	top: 16px;
}

.hbml--02,
.hbml--cross01,
.hbml--cross02{
	top: 23px;
}

.hbml--03{
	top: 30px;
}

.hbml--cross01{
	transform: rotate(45deg);
}

.hbml--cross02{
	transform: rotate(-45deg);
}

.hbml{
	transition-duration: 0.6s;
	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hbml-in{
	transition-duration: 0.6s;
	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hbml-in::before,
.hbml-in::after{
	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
}

.hbml-in--cross01,
.hbml-in--cross02{
	transform: translateX(-33.3%);
}

.hbml-in--01{
	transition-delay: 0.2s;
}

.hbml-in--02{
	transition-delay: 0.25s;
}

.hbml-in--02::before,
.hbml-in--02::after{
	transition-delay: 0.05s;
}

.hbml-in--03{
	transition-delay: 0.3s;
}

.hbml-in--03::before,
.hbml-in--03::after{
	transition-delay: 0.1s;
}

.hbml-in--cross01{
	transition-delay: 0.0s;
}

.hbml-in--cross02{
	transition-delay: 0.05s;
}

.hbml-in--cross02::before,
.hbml-in--cross02::after{
	transition-delay: 0.1s;
}

body.open_menu #HBM .hbml-in--01,
body.open_menu #HBM .hbml-in--02,
body.open_menu #HBM .hbml-in--03{
	transform: translateX(33.3%);
}

body.open_menu #HBM .hbml-in--cross01,
body.open_menu #HBM .hbml-in--cross02{
	transform: translateX(0);
}

body.open_menu #HBM .hbml-in--01{
	transition-delay: 0s;
}

body.open_menu #HBM .hbml-in--02{
	transition-delay: 0.05s;
}

body.open_menu #HBM .hbml-in--03{
	transition-delay: 0.1s;
}

body.open_menu #HBM .hbml-in--cross01{
	transition-delay: 0.25s;
}

body.open_menu #HBM .hbml-in--cross02{
	transition-delay: 0.3s;
}

#HBM:hover .hbml-in::before,
#HBM:hover .hbml-in::after{
	transform: translateX(200%);
}

#HBM:hover .hbml-in--01::before,
#HBM:hover .hbml-in--01::after,
#HBM:hover .hbml-in--02::before,
#HBM:hover .hbml-in--02::after,
#HBM:hover .hbml-in--03::before,
#HBM:hover .hbml-in--03::after{
	transition-duration: 1s;
}

#HBM:hover .hbml-in--cross01::before,
#HBM:hover .hbml-in--cross01::after,
#HBM:hover .hbml-in--cross02::before,
#HBM:hover .hbml-in--cross02::after{
	transition-duration: 0s;
}

body.open_menu #HBM:hover .hbml-in--cross01::before,
body.open_menu #HBM:hover .hbml-in--cross01::after,
body.open_menu #HBM:hover .hbml-in--cross02::before,
body.open_menu #HBM:hover .hbml-in--cross02::after{
	transition-duration: 1s;
}

body.open_menu #HBM:hover .hbml-in--01::before,
body.open_menu #HBM:hover .hbml-in--01::after,
body.open_menu #HBM:hover .hbml-in--02::before,
body.open_menu #HBM:hover .hbml-in--02::after,
body.open_menu #HBM:hover .hbml-in--03::before,
body.open_menu #HBM:hover .hbml-in--03::after{
	transition-duration: 0s;
}



@-webkit-keyframes intervalHamburgerBorder{
	0%{
		opacity: 1;
		transform: scale(1);
	}
	80%{
		transform: scale(1.6);
	}
	100%{
		opacity: 0;
		transform: scale(1.6);
	}
}

@keyframes intervalHamburgerBorder{
	0%{
		opacity: 1;
		transform: scale(1);
	}
	80%{
		transform: scale(2.0);
	}
	100%{
		opacity: 0;
		transform: scale(2.0);
	}
}






@media all and (max-width: 600px){
	#HBM {
		margin-top: 0px;
		top: 10px;
		left: 10px;
	}
}










/*TERMIN*/

#HBM2{
	width: 64px;
	height: 64px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 110;
	transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out, background 0.2s ease-in-out;
	opacity: 0.0;
	
	pointer-events: none;
	background-image: url(/_sys/_img/circles.png);
	background-size: contain;
}

#HBM2 .clickable {
	width: 64px;
	height: 64px;
	display: block;
	cursor: pointer;
	z-index: 110;
	border-radius: 50%;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
	text-align: center;
	color: #fff;
	line-height: 64px;

	pointer-events: auto; 
}

body.fixed #HBM2{
	opacity: 1.0;
}


#HBM2.light .clickable {
	color: #73adaa;
}
#HBM2 .clickable:hover{
	/*background-color: #7f5d20;*/
	color: #fff;
}


	#HBM2{
		position: fixed;
		bottom: 10px;
		right: 10px;
		transform: scale(0.75);
	}	
	
	
	#HBM2 {
	pointer-events: none;
}




#HBM2 .clickable:not(:hover):after{
	width: 64px;
	height: 64px;
	box-sizing: border-box;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	border: 4px solid #f3e2a9;
	border-radius: 50%;
	-webkit-animation-duration: 1.2s;
	animation-duration: 1.2s;
	-webkit-animation-name: intervalHamburgerBorder;
	animation-name: intervalHamburgerBorder;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

#HBM2.light .clickable:not(:hover):after{
	border: 4px solid #ffffff;
}


@-webkit-keyframes intervalHamburgerBorder{
	0%{
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	80%{
		-webkit-transform: scale(1.6);
		transform: scale(1.6);
	}
	100%{
		opacity: 0;
		-webkit-transform: scale(1.6);
		transform: scale(1.6);
	}
}

@keyframes intervalHamburgerBorder{
	0%{
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	80%{
		-webkit-transform: scale(1.6);
		transform: scale(1.6);
	}
	100%{
		opacity: 0;
		-webkit-transform: scale(1.6);
		transform: scale(1.6);
	}
}






#TERMIN{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100vh;
	background: rgba(255,255,255,0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 120;
	transition: opacity 0.2s ease-in-out;
	opacity: 0.0;
	display: none;
}
#TERMIN.block{
	display: block;
}
#TERMIN.visible{
	opacity: 1.0;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

#TERMIN form{
	width: 400px;
	padding: 40px;
	height: calc(100vh - 80px);
	overflow: hidden;
	overflow-y: auto;

	position: absolute;
	top: 0;
	right: -600px;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
	transition: right 0.2s ease-in-out;
	
	color: #ffffff;
    background: #2e4557;
	
}

#TERMIN form.visible{
	right: 0;
}

#TERMIN form h5{
	width: 100%;
	line-height: 50px;
	padding: 0;
	margin: 0;
	font-family: "raleway_bold";
	text-transform: uppercase;
}
#TERMIN form h5 s{
	float: right;
	cursor: pointer;
}

#TERMIN form ol{
	width: calc(100% - 4px);
	padding: 50px 0px 0 0px;
	max-height: 0;
	transition: max-height 0.2s ease-in-out;
	overflow: hidden;
	background: #2e4557;
	border: 2px solid #ffffff;
	border-radius: 3px;
}
#TERMIN form .choose.err ol{
	border: 2px solid #F04E72;
}



#TERMIN form ol li{
	width: calc(100% - 40px);
	padding: 0px 20px 0 20px;
	height: 50px;
	line-height: 50px;
	cursor: pointer;
}

#TERMIN form ol li span{
	width: calc(100% - 40px);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 20px;
	line-height: 20px;
}

#TERMIN form ol li[data-typ="0"]:not(.sel){
	display: none;
}
#TERMIN form ol.open{
	max-height: 100000px;
	background: #ffffff;
	color: #2e4557;
}
#TERMIN form ol li.sel{
	position: absolute;
	top: 0px;
	left: 0px;
}

#TERMIN form ol.open li:hover{
	background: #e2d08d;
	color: #2e4557;
}

#TERMIN form .step{
	width: 100%;
}

#TERMIN form p{
	margin-top: 20px;
	width: 100%;
}

#TERMIN form div.step[data-step="5"]{
	margin-top: 30px;	
}
#TERMIN form div.step[data-step="5"] p{
	margin-top: 0px;	
}

#TERMIN form p.mt{
	margin-top: 40px;
	width: 100%;
}
#TERMIN form p.mb{
	margin-bottom: 20px;
	width: 100%;
}

#TERMIN form p b{
	float: left;
	width: 100%;
	margin-bottom: 5px;
	font-family: "raleway_semibold";
}

#TERMIN form p a{
	float: left;
	width: 100%;
	margin-bottom: 5px;
}
#TERMIN form p a:hover{
	color: #e2d08d;
}

#TERMIN form .ui-state-active, .ui-widget-content .ui-state-active{
    border: 1px solid #61121c;
    background: #61121c;
	color: #fff;
}


#TERMIN form p.err b{
	color: #fa6c51;
}

#TERMIN form > *{
	float: left;
	margin: 5px 0;
}

#TERMIN.success form > *,
#TERMIN form > .success{
	display: none;
}

#TERMIN.success form > .success,
#TERMIN.success form > h5{
	display: block;
}

#TERMIN form p a{
	float: none;
	text-decoration: underline;
	color: inherit;
}
#TERMIN form p a:hover{
	color: #e2d08d;
}

#TERMIN form p span{
	float: left;
	width: 100%;
	line-height: 30px;
	margin-top: 5px;
}
#TERMIN form p.checks{
	margin-top: 0;
}

#TERMIN form p span.check{
	cursor: pointer;
}
#TERMIN form p span.check:before{
	float: left;
	width: 30px;
	line-height: 28px;
	content: '\e065';
	font-family: i065;
	transition: color 0.2s ease-in-out;
	margin-right: 4px;
}
#TERMIN form p span.check.oke:before{
	content: '\e066';
	font-family: i066;
	color: #47cead;
}

#TERMIN form p.input{
	border: none;
	box-shadow: none;
	border-bottom: 2px solid rgba(255,255,255,0.2);
	width: 100%;
	background: #2e4557;
}

#TERMIN #timepicker{
		
	width: 100%;

}


#TERMIN form .logo{
    margin-top: 30px;
    height: 50px;
	width: auto;
}
#TERMIN #timepicker span{
	cursor: pointer;
	width: calc(25% - 16px);	
	padding: 0 5px;
	line-height: 32px;
	height: 30px;
	margin: 0;
	margin: 0px 2px 2px 0px;
	background: #eee;
	text-align: center;
	transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
	border-radius: 3px;
	border: 2px solid #ccc;
	font-family: "jost_m";
}
#TERMIN #timepicker span:hover{
	backgrund: #ddd;	
}
#TERMIN #timepicker span.sel{
	cursor: default;
}
#TERMIN #timepicker span:not(.sel):hover{
	background: #ccc;
}
#TERMIN #timepicker span.sel{
	background: #61121c !important;
	color: #fff;
	border: 2px solid #61121c;
}

#TERMIN form .choose{
	width: 100%;
}
#TERMIN form #choose_2,
#TERMIN form #choose_3{
	display: none;
	margin-top: 20px;
}

#TERMIN form p.input input{
	line-height: 40px;
	height: 40px;
	width: 100%;
	font-family: inherit;
	background: #2e4557;
	color: #ffffff;
}

#TERMIN form p.input textarea{
	line-height: 24px;
	height: auto;
	min-height: 96px;
	width: 100%;
	resize: vertical;
	font-family: inherit;
	background: #2e4557;
	color: #ffffff;
}

#TERMIN form p.input:after{
	position: absolute;
	bottom: -3px;
	left: 0px;
	transition: width 0.2s ease-in-out;
	content: '';
	width: 0px;
	height: 4px;
	background: #fff;
	border-radius: 1px;
}

#TERMIN form p.input.focus:after{
	width: 100%;
	box-shadow: none;
}

#TERMIN form p.input input,
#TERMIN form p.input textarea{
	font-family: inherit;
	font-size: inherit;
}
#TERMIN form p.input input:focus,
#TERMIN form p.input textarea:focus{
	border: none;
	outline: none;
}



#TERMIN .step{
	display: none;	
}
#TERMIN[data-step="1"] .step[data-step="1"],
#TERMIN[data-step="2"] .step[data-step="1"],
#TERMIN[data-step="2"].calendar .step[data-step="2"],
#TERMIN[data-step="3"] .step[data-step="1"],
#TERMIN[data-step="3"].calendar .step[data-step="2"],
#TERMIN[data-step="3"] .step[data-step="3"],
#TERMIN[data-step="5"] .step[data-step="5"]{
	display: block;	
}

#TERMIN .step[data-step="1"]{
	/*display: none !important;*/
}

#TERMIN form #send{
	left: 0;
	transform: none;
	margin-top: 25px;
	margin-bottom: 100px;
}

@media all and (max-width: 1366px){
	
}

@media all and (max-width: 1024px){


	

}
@media all and (max-width: 800px){
	#TERMIN form{
		width: calc(100% - 40px);
		padding: 20px;
		height: calc(100vh - 40px);
		
		right: -120%;
		box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
		transition: right 0.2s ease-in-out;
	}
	


}











/*LOGIN*/


.tab{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(46, 69, 87, 0.7);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 120;
	transition: opacity 0.2s ease-in-out;
	opacity: 0.0;
	display: none;
	color: #fff;
	
	will-change: opacity;
	contain: layout paint;
}
.tab.block{
	display: block;
}
.tab.visible{
	opacity: 1.0;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.tab.animating{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


.tab form {
	width: 480px;
	padding: 0px 0px 0px 0px;
	max-height: calc(100% - 80px);
	overflow: hidden;
	background: #2e4557;
	position: absolute;
	left: 50%;

	transform-origin: top center;
	transition: none; 
	
	transform: translate3d(-50%, -16px, 0); 
	  will-change: transform, opacity;
	  opacity: 0;
	  pointer-events: none;
	  box-shadow: 0 0 30px rgba(0,0,0,0.2);
}

@keyframes modalIn {
  from { transform: translate3d(-50%, -24px, 0); opacity: 0; }
  to   { transform: translate3d(-50%, 0, 0);     opacity: 1; }
}
@keyframes modalOut {
  from { transform: translate3d(-50%, 0, 0);     opacity: 1; }
  to   { transform: translate3d(-50%, -24px, 0); opacity: 0; }
}



/* Use the new animations (shorter, easing tuned for snappiness) */
.tab form.visible{
  animation: modalIn .28s cubic-bezier(.2,.8,.2,1) forwards;
  pointer-events: auto;
}
.tab form.hiding{
  animation: modalOut .22s cubic-bezier(.4,0,.6,1) forwards;
  pointer-events: none;
}

/* Optional: trim shadows during motion for even less overdraw */
.tab form.animating {
  /*box-shadow: none;*/
}

@media (prefers-reduced-motion: reduce) {
  .tab, .tab form { transition: none !important; animation: none !important; }
  .tab.visible { opacity: 1; }
  .tab form.visible { transform: translate3d(-50%, 0, 0); opacity: 1; }
}


.tab form .step .inn{
	max-height: calc(100vh - 250px);
	overflow: hidden;
	overflow-y: auto;
	padding: 15px 40px;
}

.tab form .step .inn::-webkit-scrollbar{
  width: 5px;
}
.tab form .step .inn::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.1);
}

.tab form h5{
	width: calc(100% - 80px);
	line-height: 50px;
	padding: 10px 40px;
	margin: 0;
	font-family: 'jost_m';
	color: #fff;
	background: rgba(0,0,0,0.1);
}
.tab form h5 s{
	float: right;
	cursor: pointer;
}

.tab form .inn{
	width: calc(100% - 80px);
	padding: 0 40px;
}

.tab form p{
	margin-top: 20px;
	width: calc(100% - 0px);
	margin: 0 0px;
}

.tab form p.mt{
	margin-top: 15px;
	width: 100%;
}
.tab form p.mb{
	margin-bottom: 20px;
	width: 100%;
}


.tab form .btn{
	transform: none;
	left: 0;
	margin-top: 20px;
	cursor: pointer;
	margin-bottom: 40px;
}


.tab form p b{
	float: left;
    width: 100%;
    margin-bottom: 0px;
    line-height: 22px;
	height:22px;
    font-family: 'jost_m';
}

.tab form p a:not(.button_class){
	width: 100%;
	margin-bottom: 5px;
	font_family: 'jost_m';
	color: inherit;
	float: none;
}
.tab form p a:not(.button_class):hover{
	color: #e2d08d;
}

.tab form p.input label.label-checkbox{
	line-height: 20px;
    height: 20px;
    float: left;
    width: 100%;
	margin-top: 15px;	
}

.tab form label a{
	text-decoration: underline;
	float: none;
	position: static;
}

.tab form p.err b{
	color: #F04E72 !important;
}

.tab form > *{
	float: left;
	margin: 5px 0;
}

.tab.success form > *,
.tab form > .success{
	display: none;
}

.tab.success form > .success,
.tab.success form > h5{
	display: block;
}



.tab form p span{
	float: left;
	width: 100%;
	margin-top: 5px;
}
.tab form p.checks{
	margin-top: 0;
}
.tab form p span.check{
	cursor: pointer;
}
.tab form p span.check.err{
	color: #F04E72;
}

.tab form p span.check b{
	font_family: 'jost_m';
}
.tab form p span.check:before{
	float: left;
	width: 30px;
	line-height: 28px;
	content: '\e065';
	font-family: i065;
	transition: color 0.2s ease-in-out;
	margin-right: 4px;
}
.tab form p span.check.oke:before{
	content: '\e066';
	font-family: i066;
	color: #47cead;
}

.tab form p.input{
	border: none;
	box-shadow: none;
	margin-top: 40px;
}



.tab form p.input[data-typ="birth"]{
	display: none;	
}

#LOGIN.tab form p.input[data-typ="birth"]{
	display: block;	
}

.tab form p.input[data-typ="birth"] input[maxlength="4"]{
	width: 80px;
	text-align: center;
	padding: 0;
}
.tab form p.input[data-typ="birth"] input[maxlength="2"]{
	width: 40px;
	text-align: center;
	padding: 0 10px;

}



.tab form p.input[data-typ="phone"] input[maxlength="4"]{
	width: 40px;
	text-align: center;
}
.tab form p.input[data-typ="phone"] input[maxlength="3"]{
	width: 40px;
	text-align: center;
}
.tab form p.input[data-typ="phone"] input[maxlength="7"]{
	width: 120px;
	text-align: left;
}

.tab #timepicker{
		
	width: 100%;

}

.tab form ul.password-rules{
	margin-top: 15px;
	position: relative;
	float: left;
	width: calc(100% - 10px);
	margin-left: 10px;
}
.tab form ul.password-rules li{
	width: 100%;	
	position: relative;
	float: left;
}

.tab form ul.password-rules li.ok{
		
}
.tab form ul.password-rules li.ok:before{
	content: '\e066';
	font-family: i066;
	color: #47cead;
	float: left;
	margin-right: 5px;
}

.tab form .separator{
	width: calc(100% - 20px);
	margin: 15px 10px 5px 10px;
	border-top: 1px solid rgba(255,255,255,0.05);
	border-bottom: 1px solid rgba(0,0,0,0.2);
}

.tab #timepicker .time{
	cursor: pointer;
	width: calc(25% - 16px);	
	padding: 0 5px;

	margin: 0;
	margin: 0px 2px 2px 0px;
	background: #eee;
	text-align: center;
	transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
	border-radius: 3px;
	border: 2px solid #ccc;
	font-family: "p_700";
}
.tab #timepicker .time:hover{
	backgrund: #ddd;	
}
.tab #timepicker .time.sel{
	cursor: default;
}
.tab #timepicker .time:not(.sel):hover{
	background: #ccc;
}
.tab #timepicker .time.sel{
	background: #f1613e !important;
	background: #ed300b !important;
	color: #fff;
	border: 2px solid #f1613e;
	border: 2px solid #ed300b;
}

.tab form .behandlung{
	width: 100%;
}
.tab form #choose_2{
	margin-top: 20px;
}
.tab form #choose_1.visible,
.tab form #choose_2.visible{
	display: block;
}


.tab form #choose_1{
	display: none;
}
.tab form #choose_1_title{
	display: none;
}
.tab form #choose_1_title.visible,
.tab form #choose_2_title.visible{
	display: block;	
}

.tab form p.input input{
	line-height: 40px;
	height: 40px;
	width: calc(100% - 40px);
	padding: 0 20px;
	font-family: inherit;
	color: #fff;
	background: rgba(0, 0, 0, 0.1);
    border-radius: 20px;

}

.tab form p.input input:focus{
	box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2), inset -2px -2px 4px rgba(0,0,0,0.1);
}

.tab form p.input b{
	position: absolute;	
	left: 10px;
	pointer-events: none;	
}

.tab form p.input b{
	top: -30px;
	color: #a5afb6;
	transition: color 0.1s ease-in-out, top 0.3s ease-in-out;	
}
.tab form p.input.focus b{
	top: -27px;
	color: #fff;
}

.tab #synlab_code{
	height: 30px;
	line-height: 30px;
	padding: 5px 10px;
	width: calc(100% - 24px);
	border-radius: 3px;
	border: 2px solid #ccc;
}
.tab #synlab_code:focus{
	border: 2px solid #bbb;
}
.tab #synlab_code.err{
	border: 2px solid #f1613e;
}

.tab form p.input textarea{
	line-height: 24px;
	height: auto;
	min-height: 96px;
	width: 100%;
	resize: vertical;
	font-family: inherit;
}

.tab a.arlista{
	display: none;	
	margin-top: 20px;
}

.tab[data-place="35"] a.arlista_35,
.tab[data-place="36"] a.arlista_36,
.tab[data-place="37"] a.arlista_37,
.tab[data-place="38"] a.arlista_38,
.tab[data-place="39"] a.arlista_39,
.tab[data-place="40"] a.arlista_40,
.tab[data-place="41"] a.arlista_41,
.tab[data-place="42"] a.arlista_42,
.tab[data-place="43"] a.arlista_43,
.tab[data-place="44"] a.arlista_44,
.tab[data-place="45"] a.arlista_45,
.tab[data-place="46"] a.arlista_46,
.tab[data-place="47"] a.arlista_47{
	display: block;	
}




.tab form p.input input,
.tab form p.input textarea{
	font-family: inherit;
	font-size: inherit;
}
.tab form p.input input:focus,
.tab form p.input textarea:focus{
	border: none;
	outline: none;
}


.tab form .button{
	padding: 0px 25px;
	line-height: 50px;
	height: 50px;
	background: #eee;
	cursor: pointer;
	margin-bottom: 50px;
	transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
	cursor: pointer;
	font_family: 'p_700';
	margin-top: 20px;
}

.tab form .button:hover{
	background: #f1613e;
	background: #ed300b;
	color: #fff;
}

.tab form .errors:empty,
.tab form .okay_login:empty,
.tab form .okay_reminder:empty{
	display: none;	
}

.tab form .okay_login,
.tab form .okay_reminder{
	font-family: 'jost_m';	
}
.tab form .okay_login:before,
.tab form .okay_reminder:before{
	content: '\e253';
	font-family: 'i253';
	position: relative;
	float: left;
	margin-right: 5px;	
}

.tab form .errors{
	color: #F04E72;
	font-family: 'jost_m';	
}

.tab .step{
	display: none;
	width: 100%;	
}
.tab[data-step="1"] .step[data-step="1"],
.tab[data-step="2"] .step[data-step="1"],
.tab[data-step="2"] .step[data-step="2"],
.tab[data-step="3"] .step[data-step="1"],
.tab[data-step="3"] .step[data-step="2"],
.tab[data-step="3"] .step[data-step="3"],
.tab[data-step="4"] .step[data-step="1"],
.tab[data-step="4"] .step[data-step="2"],
.tab[data-step="4"] .step[data-step="3"],
.tab[data-step="4"] .step[data-step="4"],
.tab[data-step="5"] .step[data-step="5"],
.tab[data-step="login"] .step[data-step="login"],
.tab[data-step="registration"] .step[data-step="registration"],
.tab[data-step="reminder"] .step[data-step="reminder"],
.tab[data-step="logout"] .step[data-step="logout"]{
	display: block;	
}



.tab form .inn.toggles{
	margin-top: 30px;
	padding: 20px 40px;
	background: rgba(0,0,0,0.1);	
	margin: 0;
}

.tab .btn_toggle{
	cursor: pointer;
	color: rgba(255,255,255,0.5);
	width: calc(100%/3);	
}
.tab[data-step="login"] .btn_toggle[data-type="login"],
.tab[data-step="registration"] .btn_toggle[data-type="registration"],
.tab[data-step="reminder"] .btn_toggle[data-type="reminder"]{
	color: rgba(255,255,255,1.0);
	cursor: default;
}

.tab .btn_toggle[data-type="registration"]{
	text-align: right;	
}
.tab .btn_toggle[data-type="reminder"]{
	text-align: center;	
}


.tab .label-checkbox {
  cursor: pointer;
  user-select: none;
}

.tab .label-checkbox input[type="checkbox"] {
  width: 14px;
    height: 14px;         /* szöveghez igazítás */
  accent-color: #02374f;   /* egységes szín */
  margin-right: 5px;
}

/* Hibaállapot kiemelése */
.tab .input.err .label-checkbox input[type="checkbox"],
.tab .datenschutz.err .label-checkbox input[type="checkbox"] {
  outline: 2px solid #dc3545;
  outline-offset: 2px;
}

@media all and (max-width: 1366px){
	#M .navi ol.main > li > a {
		padding: 10px 10px;
	}
	#M .navi ol.main > li:first-of-type > a {
		padding: 10px 10px 10px 30px;
	}
	#M .navi ol.main > li:last-of-type > a {
		padding: 10px 25px 10px 10px;
	}
}

@media all and (max-width: 1024px){

	
	#M{
		position: absolute;
		top: 0px;
		left: 0px;
		width: calc(100% - 0px);
		border-radius: 0px 0px 0px 0px;
	}
	
	#M .navi{
		display: none;
	}
	

	


	body.open_menu #N2{
		right: 0px;	
	}
	
	body #N2B{
		display: none !important;
	}
	
	
	
	#N2{
		width: 100%;
		background: rgba(81,58,34,0.75);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		right: -100%;
	}

	#N2 a{
		text-align: center;
		width: 100%;
		padding: 0px;
	}

}
@media all and (max-width: 800px){
	.tab form{
		width: 100%;
		box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
		max-height: 100%;
	}
	
	.tab form h5 {
		width: calc(100% - 60px);
		font-family: 'jost_b';
		padding: 10px 30px;
	}
	
	.tab form .button{
		width: calc(100% - 50px);
		margin-top: 25px;
		margin-bottom: 100px;
		line-height: 60px;
		height: 60px;
		text-align: center;
	}
	
	.tab[data-step="3"] .step[data-step="3"]{
		margin-bottom: 200px;	
	}
	
	
	.tab[data-step="1"] .step[data-step="1"]{
		margin-bottom: 200px;	
	}
	
	
	.tab form .inn {
		width: calc(100% - 50px);
		padding: 0px 25px;
	}
	.tab form .inn.toggles{
		padding: 20px 25px;
	}
	.tab form .step .inn {
		padding: 15px 25px;
	}
	
	.tab form p.input[data-typ="phone"] input[maxlength="4"] {
		width: 40px;
		padding: 0px 10px;
	}
	.tab form p.mt.datenschutz,
	.tab p.input[data-typ="taj"]{
		width: calc(100% - 10px);
		padding-left: 10px;
	}
	.tab form .btn {
		margin-bottom: 100px;
	}
	
}













.km-overlay{
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	background: rgba(255,255,255,.45);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 20px;

	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.km-overlay.is-open{ display:flex; }

/* kártya */
.km-card{
	position: relative;
	width: 100%;
	max-width: 520px;
	background: #fff;
	border-radius: 34px;
	box-shadow: 0 18px 60px rgba(0,0,0,.22);
	color: #1f2937;

	max-height: calc(100dvh - 60px);
	overflow: hidden;
}

/* belső görgethető rész (scrollbar beljebb tolva, hogy ne rondítsa a kerek sarkot) */
.km-card__scroll{
	max-height: calc(100dvh - 60px);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;

	padding: 26px 26px 22px 26px;
	padding-right: 36px;
	margin-right: -10px;
}

/* X */
.km-x{
	position: absolute;
	right: 18px;
	top: 16px;
	width: 38px;
	height: 38px;
	border: 0;
	background: #f3f4f6;
	border-radius: 999px;
	cursor: pointer;
	font-size: 22px;
	line-height: 38px;
	color: #111827;
}
.km-x:hover{ background:#e5e7eb; }

/* fej */
.km-head h2{ margin: 6px 38px 10px 0; }
.km-head p{ margin: 0 0 10px 0; color: #374151; }

/* form mezők */
.km-form{ margin-top: 12px; }

.km-field{
	display: block;
	margin-top: 12px;
}

.km-lab{
	display: block;
	color: #111827;
	margin-bottom: 6px;
}
.km-lab em{ color:#ef4444; font-style: normal; margin-left: 3px; }

.km-field input{
	width: 100%;
	height: 44px;
	border-radius: 999px;
	border: 0;
	background: #f2f2f2;
	padding: 0 16px;
	font-size: 14px;
	outline: none;
	box-sizing: border-box;
}
.km-field input:focus{
	box-shadow: 0 0 0 3px rgba(46,69,87,.18);
	background: #fff;
}

/* GDPR */
.km-gdpr{
	width: 100%;
	clear: both;
	margin-top: 14px;
}

.km-gdpr-title{
	font-size: 12px;
	margin-bottom: 8px;
}
.km-gdpr-title em{ color:#ef4444; font-style: normal; }

.km-check{
	width: 100%;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 12px;
	line-height: 1.35;
	color: #374151;
}

.km-check input{
	flex: 0 0 auto;
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: #2e4557;
}

.km-check span{
	flex: 1 1 auto;
	width: 100%;
	display: block;
}

.km-check a{
	color: inherit;
	text-decoration: underline;
}

.km-gdpr label{
	width: 100%;
	max-width: none;
}

/* errors */
#km_errors{
	display:none;
	margin-top: 10px;
	padding: 10px 12px;
	border: 1px solid #e74c3c;
	background: #fff6f6;
	color: #7f1d1d;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.3;
}
#km_errors.show{ display:block; }

.km-send{
	position: relative;
	margin-top: 25px;
}

/* scrollbar */
.km-card__scroll::-webkit-scrollbar{ width: 3px; }
.km-card__scroll::-webkit-scrollbar-track{ background: #eee; }
.km-card__scroll::-webkit-scrollbar-thumb{
	background: #8cbbb6;
	min-height: 100px;
}
.km-card__scroll::-webkit-scrollbar-thumb:hover{ background: #8cbbb6; }

/* mobil */
@media (max-width: 520px){
	.km-overlay{ align-items: flex-start; }
	.km-card{ border-radius: 26px; }
	.km-card__scroll{
		padding: 22px 18px 18px 18px;
		padding-right: 16px;
		margin-right: -10px;
	}
	.km-send{ width: 100%; }
}

.book {
	width: 200px;
	background: #ffffff;
	border-radius: 40px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 15%;
	overflow: hidden;
	transition: width 0.4s ease;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.3), -2px -2px 4px rgba(255,255,255,0.3);
	padding-right: 30px;
	z-index: 10;
	text-align: center;
}

.book[data-step="1"] {
	width: 230px;
}

.book[data-step="2"] {
	width: 460px;
}

.book[data-step="3"] {
	width: 890px;
}

.book > .inners{
	width: 890px;	
}

.book > div > div{
	width: 200px;
	padding-left: 30px;
	margin-top: 10px;
	margin-bottom: 15px;
	opacity: 1;
	transition: opacity 0.3s ease, margin 0.3s ease;
}

.book > div > div.helyszin{
	width: 400px;	
}


.book > div {
	margin-top: 20px;
	margin-bottom: 10px;
}

.book > div.helyszin {
	border-left: 1px solid #eee;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease 0.2s;
}

.book[data-step="2"] > div.helyszin {
	opacity: 1;
	pointer-events: all;
	max-height: 1000;
}

.book[data-step="2"] div.rendeles ol,
.book[data-step="2"] div.kezeles ol,
.book[data-step="3"] div.rendeles ol,
.book[data-step="3"] div.kezeles ol,
.book[data-step="3"] div.helyszin ol{
	max-height: 1000px;
}



.book[data-step="2"] .kezkat ol,
.book[data-step="3"] .kezkat ol{
	max-height: 1000px;
}

.book > div > * {
	width: 100%;
	float: left;
}

.book > div u {
	color: #2e4557;
	font-family: "raleway_bold";
}


.book.open ol.rendeles{
	max-height:0;	
}


.book ol,
.book ol li {
	position: relative; 
	display: block;
}

.book > div ol {
	width: 100%;
	max-height: 20px;
	padding-top: 0px;
	line-height: 20px;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.book > .inners > div ol{
	max-height: 32px;   /* 20px sor + padding */
	line-height: 20px;
}

.book > div ol:hover,
.book > div ol.open {
	max-height: 400px;
}

.book ol,
.book ol li {
	float: left;
	display: block;
	position: relative;
}
.book > div ol li {
	padding: 5px 0px;
	cursor: pointer;
	width: 100%;
}

.book > div ol li,
.book > div ol li a{
	color: #999;
}

.book > div ol li a{
	text-decoration: none;	
}

.book > div ol li:hover,
.book > div ol li:hover a{
	color: #2e4557;	
	font-family: "raleway_semibold";
}
.book > div ol li.sel,
.book > div ol li.sel a{
	font-family: "raleway_semibold";
	color: #2e4557;	
}

@media all and (max-width: 1024px) {
	.e11.sub_0.vid_1{
		background: #2e4557;
	}
	
	.book{
	    float: left;
		position: relative;
		margin: 30px;
		left: 0;
		transform: none;
		width: calc(100% - 120px) !important;
		padding: 0 30px;
		z-index: 8;
	}
	
	.book > div > div {
		padding-left: 0px;
	}
	
	.book > .inners{
		width: 100%;	
	}
	.book > .inners > div{
		width: 100% !important;
		text-align: center;	
	}
	
	.book .kezeles,
	.book .helyszin{
		display: none;	
	}
	
	.book[data-step="2"] .kezeles,
	.book[data-step="3"] .kezeles,
	.book[data-step="3"] .helyszin{
		display: block;
	}
	
	.book .kezeles,
	.book .helyszin{
		padding-top: 15px;
	}
	
	.book > div ol li{
		padding: 15px 0;	
	}
}




.bookModal{ display:none; position:fixed; inset:0; z-index:9999; }
.bookModal.is-open{ display:block; }

.bookModal__backdrop{
	position:absolute; inset:0;
	background: rgba(0,0,0,0.55);
}

.bookModal__panel{
	position:absolute;
	left:50%; top:50%;
	transform: translate(-50%, -50%);
	border-radius: 25px;
	/*box-shadow: 0 20px 60px rgba(0,0,0,0.35);*/
	padding: 22px;
	color: #fff;
}

.bookModal__close{
	position:absolute;
	right:0px; top:0px;
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 0;
	cursor:pointer;
	background: rgba(255,255,255,1.0);
	box-shadow: 0px 0px 0px 5px rgba(255,255,255,0.3);
	
	color:#2e4557;
	font-size: 22px;
	line-height: 35px;
	z-index: 20;
}
.bookModal__close:hover{
	box-shadow: 0px 0px 0px 5px rgba(255,255,255,1.0);
}

.bookModal__body{
	margin-top: 10px;
}

/* Modálban a book ne legyen absolute/bottom */
.bookModal .book{
	position: relative;
	left: 0;
	bottom: auto;
	transform: none;
	margin: 0 auto;
}


/* === BOOK MODAL: reszponzív, használható mobilon === */
.bookModal__panel{
	/* középen maradhat, de legyen viewport-korlátos */
	width: min(740px, calc(100vw - 24px));
	max-height: calc(100vh - 50px);
	overflow: auto;              /* ez a kulcs: legyen scroll a panelben */
	-webkit-overflow-scrolling: touch;
}

/* a body ne tolja le a close gombot */
.bookModal__body{
	margin-top: 40px;            /* a close gombnak helyet hagy */
}

/* modálban a book mindig férjen be */
.bookModal .book{
	width: 100% !important;
	max-width: 740px;
	padding-right: 0;            /* desktopon van 30px, modálban csak árt */
	box-sizing: border-box;
}

/* mobilon kisebb padding + a close gomb maradjon látható */
@media (max-width: 1024px){
	.bookModal__panel{
		padding: 14px;
		border-radius: 18px;
		margin-top: 30px;
	}

	.bookModal__close{
		right: 10px;
		top: 20px;
		position: absolute;
		z-index: 2;
	}
}





/* === MODÁLON BELÜL KÖZÉPRE IGAZÍTÁS (mobil) === */

/* a modal body legyen középre rendező konténer */
.bookModal__body{
	display: flex;
	justify-content: center;
}

/* a book ne floatoljon, és legyen középen */
.bookModal .book{
	float: none !important;
	margin: 0 auto !important;
}

/* a belső wrapper is középre */
.bookModal .inners{
	margin: 0 auto;
	width: 730px;
}

/* ha a 3 blokk (kezkat/kezeles/helyszin) is elcsúszik */
.bookModal .kezkat,
.bookModal .kezeles,
.bookModal .helyszin{
	margin-left: auto;
	margin-right: auto;
}

.bookModal .helyszin{
	padding-right: 20px;
}

@media (max-width: 1024px){
	.bookModal .inners{
		width: calc(100% - 30px);
	}
	
	.bookModal__body{
		width: 100%;	
		margin-bottom: 40px;
	}
	
	.bookModal .book > div ol li a{
		width: 100%;	
	}
	
	.bookModal .kezkat{
		margin-top: 20px;
	}
}











/* ===== BOOK MODAL FIX ===== */

.bookModal{
	display: none;
	position: fixed !important;
	inset: 0;
	z-index: 9999;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.bookModal.is-open{
	display: block;
}

.bookModal__panel{
	position: relative !important;
	float: none !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;

	width: min(930px, calc(100vw - 40px)) !important;
	max-width: min(930px, calc(100vw - 40px)) !important;

	margin: 30px auto !important;
	padding: 26px 26px 30px 26px !important;
	border-radius: 25px;
	box-sizing: border-box !important;

	overflow: visible !important;   /* fontos: ne vágja le az X gombot */
}

.bookModal__body{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	margin-top: 22px !important;
	margin-bottom: 0 !important;
	float: none !important;
}

.bookModal .book{
	position: relative !important;
	float: none !important;
	left: auto !important;
	bottom: auto !important;
	transform: none !important;
	margin: 0 auto !important;

	width: 890px !important;
	max-width: 890px !important;
	padding-right: 30px !important;
	box-sizing: border-box !important;
	overflow: hidden;
}

.bookModal .book > .inners{
	width: 890px !important;
	float: left;
	margin: 0 !important;
}

.bookModal .book > .inners > div{
	float: left !important;
	box-sizing: border-box !important;
}

.bookModal .book > .inners > div.kezkat{
	width: 230px !important;
}

.bookModal .book > .inners > div.kezeles{
	width: 230px !important;
}

.bookModal .book > .inners > div.helyszin{
	width: 430px !important;
	padding-right: 20px !important;
}

.bookModal__close{
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	float: none !important;
	z-index: 50 !important;
}

/* tablet / mobil */
@media (max-width: 1024px){
	.bookModal{
		padding: 0 !important;
	}

	.bookModal__panel{
		width: calc(100vw - 20px) !important;
		max-width: calc(100vw - 20px) !important;
		margin: 10px auto 20px auto !important;
		padding: 18px 14px 20px 14px !important;
		border-radius: 18px;
	}

	.bookModal__body{
		margin-top: 36px !important;
	}

	.bookModal .book{
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 0 !important;
	}

	.bookModal .book > .inners{
		width: 100% !important;
	}

	.bookModal .book > .inners > div,
	.bookModal .book > .inners > div.kezkat,
	.bookModal .book > .inners > div.kezeles,
	.bookModal .book > .inners > div.helyszin{
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.bookModal__close{
		top: 10px !important;
		right: 10px !important;
	}
}.btn{
	width: auto;
	left: 50%;
	transform: translateX(-50%);
	background: #e2d08d;
	color: #22242e;
	padding: 15px 25px;
	line-height: 20px;
	border-radius: 25px;
	transition: color 0.2s ease-in-out, border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	font-family: "raleway_semibold";
	overflow: hidden;
	box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
	text-align: center;
	text-decoration: none;
}

.btn span{
	width: 100%;
}

.e13.btn_0 a.btn{
    background: #fff;
}
.e13.btn_1 a.btn,
a.btn.btn_1{
    background: #8cbbb6;
	color: #fff !important;
}
.e13.btn_2 a.btn,
a.btn.btn_2{
    background: #f67d74;
	color: #fff !important;
}


.btn:before{
	content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgb(136, 101, 60) 0%, rgb(226, 208, 141) 100%);
    transition: width 0.2s cubic-bezier(0, 0, 1, 1), height 0.2s cubic-bezier(0, 0, 1, 1);
}
.btn{
	color: #fff;
}
.btn:hover{
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}


.btn:hover:before{
	width: 200%;
	height: 200%;
}

.btn:hover:after{
	top: 0;
}

.e11 a.btn{
	left: auto;
	transform: none;
}
.e11.ali_0 a.btn,
.e11.ali_1 a.btn{
	float: right;
}

.e11.c1 a.btn,
.e11.col_1 a.btn,
.e11.col_2 a.btn{
	border: 2px solid #292b36;
	color: #292b36;
}
.e11.c1 a.btn:before,
.e11.col_1 a.btn:before,
.e11.col_2 a.btn:before{
	background: #292b36;
}
.e11.c1 a.btn:hover,
.e11.col_1 a.btn:hover,
.e11.col_2 a.btn:hover{
	color: #EBF2FA;
}


.e11.sub_1.txt_ali_2 .ele a.btn,
.e11.sub_0.txt_ali_2 a.btn{
	left:50%;
	transform: translateX(-50%);
	float: left;
	margin-top: 0;
}


.e11.sub_0.c1 a.btn:before{
	background: #354C3A;
}

.e11.sub_0.c1 a.btn{
    border: 2px solid #354C3A;
    color: #354C3A;
}
.e11.sub_0.c1 a.btn:hover{
    color: #fff;
}



.e11 .button_center{
	left: 50%;
	transform: translateX(-50%);
}

.e11 .button_center .btn:first-of-type{
	margin-right: 25px;	
}

.e11 .button_center .btn:first-of-type{
	margin-bottom: 25px;	
}
.e11 .button_center .btn:last-of-type{
	margin-bottom: 0px;	
}


@media all and (max-width: 1920px) {

}

@media all and (max-width: 1600px) {

}

@media all and (max-width: 1366px) {

}

@media all and (max-width: 1024px) {

}
@media all and (max-width: 800px) {
	.e11 .button_center{
		width: 100%;
		left: 0;
		transform: none;
	}
	.e11 .button_center .btn{
		clear: both;
		left: 50%;
		margin-right: 0 !important;
		transform: translateX(-50%);
	}
}	
@media all and (max-width: 600px) {
	.e11 a.btn, .e11 a.btn {
		float: left !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
	}
}
	

#naptar{
	width: calc(100% - 0px);
	background: #2e4557;	
	padding: 50px 0;
}


#naptar.empty{
	text-align: center;
	color: #fff;
}


#naptar_content div{
	float:none;	
}

#naptar_content{
	width: calc(100% - 80px);
	padding: 0 40px;	
}

#naptar_content .outer-book{
	width: 100%;
	margin-top: 50px;	
}

#naptar_head{
	width: calc(100% - 100px);
	padding: 0 50px;
	line-height: 40px;	
}

#naptar_head .naptar-nav{
	float: right;	
}

#naptar_head #week-interval{
	margin: 0 10px;	
	width: 180px;
	text-align: center;
	color: #fff;
}
#naptar_head select,
#naptar_head .naptar-arrow {
	height: 40px;
	border: 1px solid #ccc;
	background: #fff;
	font-size: 14px;
	padding: 0 10px;
	border-radius: 4px;
}

#naptar_head select{
	margin-right: 10px;	
}

#naptar_doctor{
	width: calc(100% - 40px);
    padding: 10px;
	margin: 10px 10px;
	color: #22242e;
	overflow: hidden;
	cursor: pointer;
}

#naptar_doctor:empty{
	display: none;
}
#naptar_doctor .img{
	width: 100%;
	padding-top: 125%;
	overflow: hidden;
		
}
#naptar_doctor .img img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: auto;
	height: 100%;	
}

#naptar_doctor h3{
	width: 150px;	
	text-align: center;
	font-family: 'raleway_bold';
	font-size: 12px;
	clear: both;
	margin: 10px 0;
}


#naptar_doctor p.info{
	width: 100%;
}
#naptar_doctor .lin{
	width: 100%;
	border-top: 1px solid #eee;	
	font-size: 12px;
}
#naptar_doctor .lin *{
	position: relative;
	float: left;
}
#naptar_doctor .lin em{
	float: right;
	text-align: right;
	font-style: normal;
}


#naptar_head .naptar-arrow {
	width: 40px;
	text-align: center;
	cursor: pointer;
	line-height: 38px;
}

#naptar_head .naptar-arrow:hover {
	background: #eee;
}

#naptar_weeks_wrapper {
	overflow: hidden;
	width: 100%;
	position: relative;
	
}

#naptar_weeks {
	display: flex;
	transition: transform 0.4s ease;
	min-height: 200px;
}

#naptar_weeks .choose{
	color: #fff;
	padding: 20px 10px;	
	font-family: 'raleway_bold';
}

#naptar_weeks .choose:before{
	content: '\e118';
	font-family: i118;	
	float: left;
	margin-right: 10px;
	
}

.naptar-week {
	min-width: 100%;
	display: flex;
	justify-content: space-between;
}

.naptar-day {
	flex: 1;
	padding: 20px 10px 10px 10px;
	text-align: center;
	border: 0px solid #ccc;
	margin: 10px;
	background: #f9f9f9;
	border-radius: 3px;
	display: flex;
	flex-direction: column;
	align-items: center;
}



.naptar-day,
#naptar_head .naptar-arrow,
#naptar_head select{
	box-shadow: -3px 3px 10px 0px rgba(0, 0, 0, 0.3);	
}



.naptar-day .day-name {
	font-weight: bold;
	margin-bottom: 5px;
}

.naptar-day .day-date {
	margin-bottom: 5px;
	font-size: 13px;
	color: #555;
}
.time-row {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 4px;
	margin: 2px 0;
}
.time-slot {
	flex: 1;
	min-width: 50px;
	max-width: 80px;
	text-align: center;
	padding: 10px 0;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: #f0f0f0;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.2s;
	font-family: raleway_semibold;
}

.time-slot:hover {
	background: #d0e8ff;
}

.no-slots {
	color: #999;
	font-style: italic;
	padding: 1em;
	text-align: center;
}

.time-slot.inactive {
	color: #999;
	background: #eee;
	pointer-events: none;
	cursor: default;
}


#naptar_head .naptar-nav {
	visibility: hidden;
}
#naptar_head .naptar-nav.visible {
	visibility: visible;
	margin-bottom: 25px;
}




#first-free-btn,
.jump-first-btn {
  margin-left: 10px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  box-shadow: -3px 3px 10px 0 rgba(0,0,0,.15);
}

#first-free-btn:hover {
  background: #f2f2f2;
}

/* Mobilon teljes szélességű, kényelmes érintés */
@media (max-width: 800px){
  #first-free-btn {
    display: block;
    width: 100%;
    margin: 20px 0 0 0;
    text-align: center;
	float: left;
  }
}

@media all and (max-width: 800px) {

	#naptar_head select{
		width: 100%;
		text-align: center;	
	}
	
	#naptar_head select:first-of-type{
		margin-bottom: 10px;
	}
	
	#naptar_head select option{
		padding: 20px 10px;
	}
	



	#naptar_weeks {
		flex: none !important;
	}
	
	.naptar-week {
		flex-direction: column;
		align-items: flex-start;
		
		min-width: calc(100% - 60px);
		margin: 0 30px;
	}

	.naptar-day {
		display: block;
		width: 100%;
		margin: 0 0 10px 0; /* Only bottom spacing */
		padding: 10px;      /* Uniform padding */
		box-sizing: border-box; /* Include padding in width */
	}
	
	#naptar_head .naptar-nav{
		width: 100%;	
	}
	
	#naptar_head .naptar-nav{
		margin-top: 15px;	
	}
	
	
	#naptar_head{
		width: calc(100% - 60px);
		padding: 0 30px;
	}
	
	#naptar_content{
		width: calc(100% - 0px);
		padding: 0 0px;
	}
	
	#naptar_head #week-interval {
		margin: 0 0px;
		width: calc(100% - 80px);
		font-family: 'raleway_bold';
	}
	#naptar_head #prev-week{
		float: left;	
	}
	#naptar_head #next-week{
		float: right;	
	}
	
	.time-row {
		display: contents;
		flex-wrap: wrap;
		justify-content: flex-start;
		width: auto !important;
		max-width: 100%;
	}

	.time-slot {
		flex: none;         
		width: 30px;         
		margin: 3px;        
		min-width: unset;   
		max-width: unset;    
		padding: 6px 10px; 
		gap: 0; 
	}
	
	
	.naptar-day {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.naptar-day > :not(.time-row):not(.time-slot) {
		width: calc(100% - 2em);
	}
	
	
	.naptar-day {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
	}

	/* Flatten time-row layout */
	.time-row {
		display: contents;
	}

	/* Make time-slots wrap nicely */
	.time-slot {
		flex: none;
		width: auto;
		min-width: 60px;
		margin: 3px;
		padding: 6px 10px;
		box-sizing: border-box;
	}

	/* Keep day-name and day-date full-width */
	.naptar-day > .day-name,
	.naptar-day > .day-date {
		width: 100%;
	}
	
	
	.naptar-day {
		display: block;
		border-radius: 10px;
		box-shadow: none;
		padding: 15px;
	}
	
	
.naptar-week {
		display: block !important;       /* No flex layout */
		width: 100% !important;
	}

	.naptar-day {
		display: block !important;       /* No flex behavior */
		width: 100% !important;
		height: auto !important;         /* Auto height */
		margin-bottom: 15px;
		box-shadow: none;
		border-radius: 10px;
	}

	.day-name,
	.day-date {
		width: 100%;
		display: block;
		margin-bottom: 5px;
	}

	/* Create a forced flexbox container inside each .naptar-day */
	.naptar-day::after {
		content: '';
		display: table;
		clear: both;
	}

	/* Override .time-row layout */
	.time-row {
		display: block;
		float: left;
	}

	/* Make .time-slot inline-blocks so they flow next to each other */
	.time-slot {
		display: inline-block;
		width: auto;
		min-width: 60px;
		padding: 6px 10px;
		margin: 4px;
		background: #f0f0f0;
		border: 1px solid #ccc;
		border-radius: 3px;
		box-sizing: border-box;
		font-size: 13px;
		white-space: nowrap;
		float: left !important;
	}
	
	
	.choose{
		left: 50%;
		transform: translateX(-50%);
		text-align: center;	
	}
	#naptar_weeks {
		min-height: 40px;
	}
	#naptar_head .naptar-arrow {
		height: 40px;
		border: 1px solid #ccc;
		background: #fff;
		font-size: 24px;
		line-height: 34px;
		text-indent: -3px;
	}
}












.modal-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: rgba(255, 255, 255, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	display: none;
	backdrop-filter: blur(10px);
}

.modal-box {
	background: #fff;
	border-radius: 8px;
	width: 90%;
	max-height: calc(100vh - 20px);
	
	max-width: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	font-family: sans-serif;
	font-size: 14px;
	overflow: hidden;
}

.modal-box-inner{
	max-height: calc(100vh - 180px);
	padding: 40px;
	overflow: hidden;
	overflow-y: auto;
	width: calc(100% - 80px);		
}

.modal-header{
	width: 100%;	
}
.modal-header h2 {
	margin-top: 0;
    margin-bottom: 0px;
    font-size: 20px;
    color: #2e4557;
    text-align: center;
    font-family: 'raleway_bold';
    height: 20px;
    line-height: 20px;
    padding: 40px 40px 0px 40px;
}




.modal-box .modal-close {
	position: absolute;
	top: 20px; right: 20px;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
}

.modal-box .modal-send {
	margin-top: 10px;
	background: #007BFF;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	clear: both;
}

.modal-box .modal-send:hover {
	background: #0056b3;
}

.modal-box .modal-details p {
	margin: 5px 0;
	width: 100%;
}

.modal-box .modal-details p *{
	position: relative;
	float: left;
}

.modal-box .modal-details p > strong {
	width: 120px;
	font-family: 'raleway_bold';
}
.modal-box .modal-details p > span{
	width: calc(100% - 120px);
}

.modal-box h3{
	margin-top: 25px;
	margin-bottom: 10px;
	font-size: 16px;
	font-family: 'raleway_bold';
}





.modal-box .required {
	color: red;
	font-weight: bold;
	margin-left: 4px;
}


.modal-box textarea{ 
	width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px;
}



.modal-box .modal-send {
	margin-top: 20px;
	background: linear-gradient(135deg, rgb(136, 101, 60) 0%, rgb(226, 208, 141) 100%);
	color: white;
	padding: 12px 24px;
	border: none;
	border-radius: 25px;
	cursor: pointer;
	font-weight: bold;
	font-size: 14px;
	transition: all 0.3s ease;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.modal-box .modal-send:hover {
	background: linear-gradient(135deg, rgb(126, 91, 50) 0%, rgb(206, 188, 121) 100%);
	transform: translateY(-1px);
}


.modal-box .phone-split { display:flex; align-items:center; gap:6px; }
.modal-box .phone-split em { opacity:.6; }

.modal-box #phone_cc   { width:70px; text-align:center; }
.modal-box #phone_area { width:70px; text-align:center; }
.modal-box #phone_local{ width:140px; }

.taj-block .taj-wrap {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.taj-block input[type="text"],
.taj-block input[type="tel"],
#taj {
  width:130px;
  text-align:center;
}

label.taj-none {
	line-height: 20px;
}


.hidden { display:none; }




.modal-box .phone-split input,
.modal-box #bookingForm input[type="text"],
.modal-box #bookingForm input[type="tel"],
.modal-box #bookingForm input[type="email"],
.modal-box #bookingForm input[type="number"],
.modal-box #bookingForm input[type="date"],
.modal-box #bookingForm select,
.modal-box #bookingForm textarea {
  appearance: none;
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #d7dbe0;
  border-radius: 10px;
  background: #f9fbfc;
  outline: 0;
  transition: border-color .2s, background .2s;
  box-sizing: border-box;
}

.modal-box #bookingForm select{
	cursor: pointer;	
}

/* Placeholder */
.modal-box #bookingForm ::placeholder { color: #9aa3ad; }

/* Focus */
.modal-box .phone-split input:focus,
.modal-box #bookingForm input:focus,
.modal-box #bookingForm select:focus,
.modal-box #bookingForm textarea:focus {
  border: 2px solid #ccc;
  background: #fff;
}

/* Disabled */
.modal-box #bookingForm input:disabled,
.modal-box #bookingForm select:disabled,
.modal-box #bookingForm textarea:disabled {
  background: #f3f4f6;
  color: #9aa3ad;
  cursor: not-allowed;
  opacity: .95;
}

/* Labels */
.modal-box label {
	display: block;
	margin-top: 15px;
	float: left;
	width: 100%;
}

.modal-box label strong{
	font-family: 'raleway_bold';
	margin-bottom: 7px;
	float: left;
}

.modal-box #bookingForm label { display: block; width: 100%; }
.modal-box #bookingForm label strong {
  display: block;
  font-size: 12px;
  letter-spacing: .02em;
  color: #2e4557;
  margin-bottom: 6px;
  width: 100%;
}
.modal-box #bookingForm label{
	line-height: 20px;	
}

/* Helper text */
.modal-box #bookingForm .hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
}

/* Error state (JS already adds .input-error) */
.modal-box #bookingForm .input-error,
.modal-box #bookingForm input.input-error,
.modal-box #bookingForm select.input-error,
.modal-box #bookingForm textarea.input-error {
  border-color: #e74c3c !important;
  background: #fff6f6;
  box-shadow: 0 0 0 3px rgba(231,76,60,.12);
}

/* Optional inline error text */
.modal-box #bookingForm .error-msg {
  margin-top: 8px;
  font-size: 12px;
  color: #b91c1c;
}

/* Flex rows for nice multi-column alignment */
.modal-box #bookingForm .form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.modal-box #bookingForm .form-row > * { flex: 1 1 180px; }

/* Handy column helpers */
.modal-box #bookingForm .col-1 { flex: 1 1 100%; }
.modal-box #bookingForm .col-2 { flex: 1 1 calc(50% - 6px); }
.modal-box #bookingForm .col-3 { flex: 1 1 calc(33.333% - 8px); }

/* Phone split */
.modal-box .phone-split { display: flex; align-items: center; gap: 8px; }
.modal-box .phone-split input { text-align: center; }

/* TAJ block */
.modal-box .taj-block .taj-wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.modal-box .taj-block .taj-wrap input[type="text"] { min-width: 130px; }

/* Checkboxes / radios */
.modal-box #bookingForm input[type="checkbox"],
.modal-box #bookingForm input[type="radio"] {
  accent-color: #2e4557;
  width: 20px; height: 20px;
  float: left;
  margin-right: 10px;
  cursor: pointer;
}

.modal-box .checkbox-text{
	width: calc(100% - 30px);
}
.modal-box .checkbox-text a{
	float: none; position: static;
}

/* Consent rows */
.modal-box .consent-block .consent-line,
.modal-box .register-line,
.modal-box .newsletter-line { }

/* Group spacing */
.modal-box #bookingForm .group { margin-top: 16px; width: 100%;}

/* Synlab code field (when shown by JS) */
#synlab_code { margin-top: 12px; }
#synlab_code input { letter-spacing: .05em; text-align: center; }


.modal-box #bookingForm .form-errors {
  display: none;
  margin: 0 0 12px 0;
  padding: 10px 12px;
  border: 1px solid #e74c3c;
  background: #fff6f6;
  color: #7f1d1d;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.3;
}
.modal-box #bookingForm .form-errors.show { display: block; margin-top: 10px;}

.consent-line a{
	color: inherit;
	text-decoration: underline;	
}


.modal-box .birth-split { display:flex; gap:8px; align-items:center; }
.modal-box .birth-split input { width:70px; text-align:center; }
#birth_y { width:90px; }


.modal-overlay { overscroll-behavior: contain; }
.modal-box-inner {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modal-box-inner .modal-login{
	width: 100%;	
}
.modal-box-inner .modal-login .btn{
	clear: both;
	cursor: pointer;
	margin-bottom: 25px;
	left: 0;
	transform: none;
}
#customModalOverlay .modal-login{
	display: none;	
}
#customModalOverlay.login_1 .modal-login{
	display: block;	
}

#customModalOverlay.login_1 .modal-details,
#customModalOverlay.login_1 #bookingForm{
	display: none;
}

.modal-box-inner .modal-login h2{
	width: 100%;
	font-size: 16px;
	    font-family: 'raleway_bold';
		margin-bottom: 10px;
}
.modal-box-inner .modal-login ul{
	width: 100%;
}
.modal-box-inner .modal-login ul li{
	list-style-type: disclosure-closed;
	width: calc(100% - 20px);
	margin-bottom: 10px;
	margin-left: 20px;
}

#naptar_doctor{
	width: 100%;	
}

#naptar_doctors {
	width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin: 10px 30px 20px 30px;
}

/* Kártya */
#naptar_doctors .doc-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: -3px 3px 10px rgba(0,0,0,.3);
  color: #22242e;
  cursor: pointer;
  overflow: hidden;
  padding: 10px;
  transition: box-shadow .15s, transform .15s;
}
#naptar_doctors .doc-card:hover { transform: translateY(-2px); }
#naptar_doctors .doc-card.active { background: #b7a070; color: #fff;}

/* Kép */
#naptar_doctors .doc-card .img {
  width: 100%;
  padding-top: 125%;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
#naptar_doctors .doc-card .img img{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: auto; height: 100%;
}

/* Név + info */
#naptar_doctors .doc-card h3{
  margin: 15px 0;
  font-family: 'raleway_bold';
  font-size: 14px;
  text-align: center;
  width: 100%;
}
#naptar_doctors .doc-card p.info{
  margin: 0;
  font-size: 12px;
}
#naptar_doctors .doc-card .lin{
  width: 100%;
  border-top: 1px solid #eee;
}
#naptar_doctors .doc-card .lin *{
  float: left; position: relative;
}
#naptar_doctors .doc-card .lin em{
  float: right; font-style: normal; text-align: right;
}

@media (max-width: 800px){
  #naptar_doctors{
    grid-template-columns: 1fr;
    margin: 10px 30px;
  }
}


/* Mobile */
@media (max-width: 800px) {
  .modal-box #bookingForm .form-row { flex-direction: column; }
  .modal-box #bookingForm .col-2,
  .modal-box #bookingForm .col-3 { flex-basis: 100%; }
}


@media all and (max-width: 1366px) {
#naptar_doctor {
    width: calc(100% / 7 * 2 - 60px);
}
}


@media all and (max-width: 800px) {
	.modal-box {
		
	}
	
	.modal-box {
		max-height: calc(100vh - 40px);
	}
	.modal-box-inner{
		padding: 30px;
		width: calc(100% - 60px);
		max-height: calc(100vh - 240px);
		max-width: calc(100% - 60px);	
	}
	
	.modal-box .modal-send{
		margin-bottom: 50px;	
	}
	
	.modal-box .modal-details p > strong{
		width: 100%;	
	}
	
	#naptar_doctor {
		width: calc(100% / 1 - 100px);
		padding: 20px;
		margin: 10px 30px;
		border-radius: 10px;
	}
	
	
	#naptar_doctor .img {
		width: 100px;
		padding-top: 125px;
	}
	#naptar_doctor h3{
		font-size: 16px;	
	}
	#naptar_doctor h3,
	#naptar_doctor p.info{
		width: calc(100% - 120px);
		float: right;
		clear: none;
		text-align: left;
	}
	
	.no-slots {
		padding: 10px;
	}
	

  .naptar-day.is-empty { 
    display: none !important; 
  }

	

}



















#naptar{
	width: calc(100% - 0px);
	background: #2e4557;
	padding: 50px 0;
}

#naptar_content div{ float:none; }

#naptar_content{
	width: calc(100% - 80px);
	padding: 0 40px;
}

#naptar_head{
	width: calc(100% - 100px);
	padding: 0 50px;
	line-height: 40px;
}

#naptar_head .naptar-nav{ float: right; }

#naptar_head #week-interval{
	margin: 0 10px;
	width: 180px;
	text-align: center;
	color: #fff;
}

#naptar_head select,
#naptar_head .naptar-arrow {
	height: 40px;
	border: 1px solid #ccc;
	background: #fff;
	font-size: 14px;
	padding: 0 10px;
	border-radius: 4px;
}

#naptar_head select{ margin-right: 10px; }

#naptar_doctor{
	width: calc(100% - 40px);
	padding: 10px;
	margin: 10px 10px;
	color: #22242e;
	overflow: hidden;
	cursor: pointer;
}

#naptar_doctor:empty{ display: none; }

#naptar_doctor .img{
	width: 100%;
	padding-top: 125%;
	overflow: hidden;
}

#naptar_doctor .img img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: auto;
	height: 100%;
}

#naptar_doctor h3{
	width: 150px;
	text-align: center;
	font-family: 'raleway_bold';
	font-size: 12px;
	clear: both;
	margin: 10px 0;
}

#naptar_doctor p.info{ width: 100%; }

#naptar_doctor .lin{
	width: 100%;
	border-top: 1px solid #eee;
	font-size: 12px;
}

#naptar_doctor .lin *{ position: relative; float: left; }

#naptar_doctor .lin em{
	float: right;
	text-align: right;
	font-style: normal;
}

#naptar_head .naptar-arrow {
	width: 40px;
	text-align: center;
	cursor: pointer;
	line-height: 38px;
}

#naptar_head .naptar-arrow:hover { background: #eee; }

#naptar_weeks_wrapper{
	overflow: hidden;
	width: 100%;
	position: relative;
}

#naptar_weeks{
	display: flex;
	transition: transform 0.4s ease;
	min-height: 200px;
}

#naptar_weeks .choose{
	color: #fff;
	padding: 20px 10px;
	font-family: 'raleway_bold';
}

#naptar_weeks .choose:before{
	content: '\e118';
	font-family: i118;
	float: left;
	margin-right: 10px;
}

.naptar-week{
	min-width: 100%;
	display: flex;
	justify-content: space-between;
}

.naptar-day{
	flex: 1;
	padding: 20px 10px 10px 10px;
	text-align: center;
	border: 0px solid #ccc;
	margin: 10px;
	background: #f9f9f9;
	border-radius: 3px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.naptar-day,
#naptar_head .naptar-arrow,
#naptar_head select{
	box-shadow: -3px 3px 10px 0px rgba(0, 0, 0, 0.3);
}

.naptar-day .day-name { font-weight: bold; margin-bottom: 5px; }

.naptar-day .day-date { margin-bottom: 5px; font-size: 13px; color: #555; }

.time-row{
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 4px;
	margin: 2px 0;
}

.time-slot{
	flex: 1;
	min-width: 50px;
	max-width: 80px;
	text-align: center;
	padding: 10px 0;
	border: 1px solid #ddd;
	border-radius: 3px;
	background: #f0f0f0;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.2s;
	font-family: raleway_semibold;
}

.time-slot:hover{ background: #d0e8ff; }

.no-slots{
	color: #999;
	font-style: italic;
	padding: 1em;
	text-align: center;
}

.time-slot.inactive{
	color: #999;
	background: #eee;
	pointer-events: none;
	cursor: default;
}

#naptar_head .naptar-nav{ visibility: hidden; }

#naptar_head .naptar-nav.visible{
	visibility: visible;
	margin-bottom: 25px;
}

#first-free-btn,
.jump-first-btn{
	margin-left: 10px;
	padding: 8px 12px;
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	line-height: 20px;
	box-shadow: -3px 3px 10px 0 rgba(0,0,0,.15);
}

#first-free-btn:hover{ background: #f2f2f2; }

@media (max-width: 800px){
	#first-free-btn{
		display: block;
		width: 100%;
		margin: 20px 0 0 0;
		text-align: center;
		float: left;
	}
}

.ddx{ display:inline-block; position:relative; margin-right:10px; vertical-align:middle; }
.ddx__btn{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	height:40px; padding:0 14px 0 16px;
	border-radius:999px;
	border:2px solid rgba(255,255,255,.9);
	background:transparent;
	color:#fff;
	cursor:pointer;
	box-shadow:-3px 3px 10px rgba(0,0,0,.3);
}
.ddx.is-picked .ddx__btn{ background:#fff; color:#2e4557; border-color:#fff; }
.ddx__txt{ font-family:'raleway_bold'; font-size:14px; white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis; }
.ddx__arr{
	width:0;height:0;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-top:7px solid currentColor;
	opacity:.9;
}
.ddx__menu{
	position:absolute; top:calc(100% + 8px); left:0;
	min-width:320px;
	background:#fff;
	border-radius:16px;
	box-shadow:-3px 3px 14px rgba(0,0,0,.35);
	overflow:hidden;
	display:none;
	z-index:9999;
}
.ddx.is-open .ddx__menu{ display:block; }
.ddx__list{ list-style:none; margin:0; padding:6px 0; }
.ddx__opt{
	padding:12px 14px;
	cursor:pointer;
	color:#2e4557;
	font-family:'raleway_bold';
	font-size:14px;
	line-height:18px;
	user-select:none;
}
.ddx__opt:hover{ background:#d0e8ff; }
.ddx__opt.is-selected{ background:#eef6ff; }
.ddx__opt.is-hidden{ display:none; }


.ddx.is-locked .ddx__arr{ display:none; }
.ddx.is-locked .ddx__btn{ cursor: default; }
.ddx.is-locked .ddx__menu{ display:none !important; }

@media all and (max-width: 800px) {
	.ddx{ width:100%; margin:0 0 10px 0; }
	.ddx__btn{ width:100%; justify-content:center; gap:10px; }
	.ddx__txt{ max-width: calc(100% - 40px); text-align:center; }
	.ddx__menu{ min-width: 100%; left:0; right:0; }
	#naptar_head{ width: calc(100% - 60px); padding: 0 30px; }
	#naptar_content{ width: calc(100% - 0px); padding: 0 0px; }
	#naptar_head #week-interval {
		margin: 0 0px;
		width: calc(100% - 80px);
		font-family: 'raleway_bold';
	}
	#naptar_head #prev-week{ float: left; }
	#naptar_head #next-week{ float: right; }

	#naptar_weeks { flex: none !important; min-height: 40px; }

	.naptar-week {
		display: block !important;
		width: 100% !important;
		min-width: calc(100% - 60px);
		margin: 0 30px;
	}

	.naptar-day {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		margin-bottom: 15px;
		border-radius: 10px;
		box-shadow: none;
		padding: 15px;
	}

	.time-row { display: contents; }
	.time-slot{
		display: inline-block;
		width: auto;
		min-width: 60px;
		padding: 6px 10px;
		margin: 4px;
		background: #f0f0f0;
		border: 1px solid #ccc;
		border-radius: 3px;
		box-sizing: border-box;
		font-size: 13px;
		white-space: nowrap;
		float: left !important;
	}

	.choose{
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
	}

	#naptar_doctors{
		grid-template-columns: 1fr;
		margin: 10px 30px;
	}

	.naptar-day.is-empty{ display:none !important; }
}



/* --- CSOMAG MODAL UI --- */
.csomag-wrap { margin-top: 15px;}
.csomag-wrap h3 { margin-top: 10px; margin-bottom: 10px; width: 100%;}
.csomag-wrap p { margin-bottom: 10px;}
.csomag-row{
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	width: 100%;
}


.ddx__opt{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ddx__name{
	flex: 1;
	min-width: 0;             /* hogy tudjon ellipsist kapni */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ddx__price{
	flex: 0 0 auto;
	white-space: nowrap;
	text-align: right;
	font-weight: 600;
}

/* ddx legyen “szép dropdown” a modalban is */
#customModalOverlay .ddx .ddx__btn{
	width: 100%;
	min-height: 44px;
	border: 2px solid #d7dbe0;
	border-radius: 12px;
	background: #fff;
	padding: 10px 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}

#customModalOverlay .ddx .ddx__txt{ color:#2e4557; font-family: raleway_bold; font-size: 13px; }
#customModalOverlay .ddx.is-picked .ddx__txt{ font-family: raleway_bold; }

#customModalOverlay .ddx .ddx__chev::before{
	content: "▾";
	font-size: 14px;
	opacity: .7;
}

/* open list */
#customModalOverlay .ddx .ddx__list{
	display: none;
	list-style: none;
	padding: 6px;
	margin: 8px 0 0 0;
	border-radius: 12px;
	border: 1px solid #d7dbe0;
	background: #fff;
	box-shadow: -3px 3px 10px rgba(0,0,0,.15);
	max-height: 260px;
	overflow: auto;
}

#customModalOverlay .ddx.is-open .ddx__list{ display:block; }

#customModalOverlay .ddx .ddx__opt{
	padding: 12px 12px;
	border-radius: 10px;
	cursor: pointer;
	font-family: raleway_semibold;
	font-size: 13px;
	width: calc(100% - 24px);
}

#customModalOverlay .ddx .ddx__opt:hover{ background:#d0e8ff; }
#customModalOverlay .ddx .ddx__opt.is-selected{ background:#2e4557; color:#fff; }
#customModalOverlay .ddx .ddx__opt.is-placeholder{ opacity:.7; }/* ===========================
   FOOTER (grid + célzott underline + social finomítás)
   =========================== */

#footer.site-footer{
	width: 100%;
	background: #fff;
	color: #2e4557;
	overflow: hidden;
}

/* globál float/position reset a footerben
   - az <a> NINCS benne, mert kell neki position:relative az underline-hoz */
#footer.site-footer :where(div, span, p, img, ol, ul, li, h1, h2, h3, h4){
	float: none !important;
	position: static !important;
}

#footer.site-footer *{
	box-sizing: border-box;
}

#footer.site-footer a{
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease-in-out, background 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* 1400px középre */
#footer #footer_in.footer__wrap,
#footer .footer__wrap{
	max-width: 1400px;
	margin: 0 auto;
	padding: 60px 40px;
}

/* GRID */
#footer .footer__grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
}

/* Title */
#footer .footer__title,
#footer h3{
	font-family: 'raleway_bold';
	margin: 0 0 14px 0;
}

#footer .footer__title,
#footer h3{
	margin-top: 30px;	
}
#footer .footer__title:first-of-type,
#footer h3:first-of-type{
	margin-top: 0;	
}

/* Listák */
#footer .footer__list,
#footer .footer__legalList{
	list-style: none;
	margin: 0;
	padding: 0;
}

/* List item spacing */
#footer .footer__list{
	display: grid;
	gap: 8px;
}

/* Link alap */
#footer .footer__list a,
#footer .footer__legalList a{
	position: relative; /* underline-hoz */
	display: inline-block;
	padding: 6px 0;
	line-height: 1.35;
}

#footer .footer__list a span{
	display: block;	
	width: 100%;
}

/* ===========================
   UNDERLINE: alapból OFF
   - majd csak nav + utolsó section (.last) alatt ON
   =========================== */

/* 1) alap: ne legyen underline pseudo a footerben */
#footer_in .bl li a:after,
#footer_in .bl a span:after{
	content: none;
}
/* ===========================
   UNDERLINE (csak nav + last + legal)
   - sima animáció: scaleX
   =========================== */

/* 0) alapból OFF a footerben */
#footer_in .bl li a:after,
#footer_in .bl a span:after{
	content: none;
}

/* 1) ON csak NAV + LAST + LEGAL scope-ban */
#footer_in nav.bl li a:after,
#footer_in section.last.bl li a:after,
#footer_in section.contacts.bl li a:after,
#footer .footer__legalList a:after,
#footer_in nav.bl a span:after,
#footer_in section.last.bl a span:after,
#footer_in section.contacts.bl a span:after{
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;            /* 4) lejjebb a szövegtől (finomítsd -2/-3/-4) */
	height: 2px;
	width: 100%;             /* mindig 100%, csak scaleX-szel "nyitjuk" */
	background: #2e4557;

	transform: scaleX(0);
	transform-origin: left center;  /* alap: balról jobbra */
	will-change: transform;
}

/* 2) Legal: fordított irány (jobbról balra) */
#footer .footer__legalList a:after{
	left: auto;
	right: 0;
	transform-origin: right center;
}

/* 3) .act állapot: legyen nyitva (animáció nélkül) */
#footer_in nav.bl li.act > a:after,
#footer_in section.last.bl li.act > a:after,
#footer .footer__legalList li.act > a:after{
	transform: scaleX(1);
	animation: none;
}

/* 4) Hover: da-damm animáció (transform alapú, sima) */
#footer_in nav.bl li a:hover:after,
#footer_in section.last.bl li a:hover:after,
#footer_in section.contacts.bl li a:hover:after,
#footer .footer__legalList a:hover:after,
#footer_in nav.bl a:hover span:after,
#footer_in section.last.bl a:hover span:after,
#footer_in section.contacts.bl a:hover span:after{
	animation: footerLine2Step 380ms ease-out forwards;
}

/* 5) Ha leviszed az egeret, ne maradjon "félúton" */
#footer_in nav.bl li a:after,
#footer_in section.last.bl li a:after,
#footer .footer__legalList a:after,
#footer_in nav.bl a span:after,
#footer_in section.last.bl a span:after{
	transition: transform 180ms ease-out;
}

@keyframes footerLine2Step{
	0%   { transform: scaleX(0); }
	50%  { transform: scaleX(.80); }  /* első lépcső */
	100% { transform: scaleX(1); }    /* második lépcső */
}

#footer section.contacts .footer__list li{
	display: grid;
	grid-template-columns: 24px 1fr;
	column-gap: 12px;
	align-items: start;
}

/* ikon doboz */
#footer section.contacts .footer__list li .ico{
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 3px; /* finom baseline igazítás */
}

/* svg normalizálás */
#footer section.contacts .footer__list li .ico svg{
	display: block;
	width: 24px;
	height: 24px;
	fill: #2e4557;
}

/* a link ne legyen "inline-block kis szélesség", töltse a cellát */
#footer section.contacts .footer__list li a{
	display: inline-block;
	width: 100%;
}

/* ===========================
   Logo / partner
   =========================== */

/* Diagnost logó blokk szélesség-alapja */
#footer .footer__logo{
	display: block;
	max-width: 220px;
}

#footer .footer__logo img{
	display: block;
	width: 100%;
	height: auto;
}

/* 2) SYNLAB: legyen olyan széles, mint a fenti logó */
#footer .footer__partner{
	display: grid;
	gap: 8px;
	max-width: 220px; /* ugyanaz, mint a footer__logo */
	margin-top: 20px;
	text-align: left;
}

#footer .footer__partner img{
	display: block;
	width: 100%;
	height: auto; /* autoheight */
}

#footer .footer__partnerText{
	font-family: 'raleway_bold';
	color: #0b346a;
	text-transform: uppercase;
}

/* ===========================
   3) Social (btn + kitöltés)
   =========================== */

/* social blokk: olyan széles legyen, mint a Diagnost logó */
#footer .footer__social{
	width: 100%;
	max-width: 220px;          /* ugyanaz, mint a logó */
	display: flex;
	justify-content: space-between; /* 3 gomb egyenletesen töltsön */
	align-items: center;
	gap: 0;                    /* a teret a space-between adja */
	padding-top: 20px;
}

/* gomb 40x40, középre igazítás */
#footer .footer__socialBtn.btn{
	left: auto !important;
	transform: none !important;
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	text-align: center;
	box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}

/* ikon réteg */
#footer .footer__socialBtn.btn span{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	z-index: 2;
}

/* svg középre + méret */
#footer .footer__socialBtn.btn svg{
	display: block;
	width: 30px;   /* finom méret, ha kell 20–26 */
	height: 30px;
	fill: #fff;
}

/* ha a button.css :before adja a gradientet, legyen kör */
#footer .footer__socialBtn.btn:before{
	border-radius: 999px;
}

/* ===========================
   Bottom sor
   =========================== */

#footer .footer__bottom{
	margin-top: 40px;
	padding-top: 18px;
	border-top: 1px solid rgba(46, 69, 87, 0.15);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	align-items: center;
}

#footer .footer__legalList{
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
}

/* ===========================
   Responsive
   =========================== */

@media all and (max-width: 1024px){
	#footer .footer__wrap{
		padding: 50px 30px;
	}
	#footer .footer__grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px;
	}

	#footer .footer__col--brand{
		text-align: center;
	}

	#footer .footer__logo{
		margin: 0 auto;
	}

	#footer .footer__social{
		margin-left: auto;
		margin-right: auto;
	}

	#footer .footer__partner{
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
}

@media all and (max-width: 600px){

	#footer .footer__wrap{
		padding: 40px 20px;
	}

	#footer .footer__grid{
		grid-template-columns: 1fr;
		justify-items: center; /* minden blokk középre */
		text-align: center;
	}

	/* oszlopok */
	#footer .footer__col{
		width: 100%;
		display: grid;
		justify-items: center;
	}

	/* címek */
	#footer .footer__title,
	#footer h3{
		text-align: center;
	}

	/* logók */
	#footer .footer__logo{
		margin: 0 auto;
	}

	#footer .footer__partner{
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	/* menük/listák */
	#footer .footer__list{
		justify-items: center;
	}

	#footer .footer__list li{
		text-align: center;
	}

	#footer .footer__list a{
		text-align: center;
	}

	/* social középre */
	#footer .footer__social{
		margin-left: auto;
		margin-right: auto;
		justify-content: center; /* mobilon ne space-between, hanem középre */
		gap: 14px;
	}

	/* Contacts: ikon + szöveg középre (grid) */
	#footer section.contacts .footer__list li{
		grid-template-columns: 24px auto;
		justify-content: center;
		justify-items: start;
	}

	/* Bottom sor középre */
	#footer .footer__bottom{
		justify-content: center;
		text-align: center;
	}

	#footer .footer__legalList{
		justify-content: center;
	}
}

	@font-face {
		font-family: 'i065'; src:url('https://diagnost.hu/_sys/_ico/065.woff') format('woff');
		font-display: swap;
	}
	.i065:before {
		font-family: i065; content: "\e065";
	}
	
	@font-face {
		font-family: 'i066'; src:url('https://diagnost.hu/_sys/_ico/066.woff') format('woff');
		font-display: swap;
	}
	.i066:before {
		font-family: i066; content: "\e066";
	}
	
	@font-face {
		font-family: 'i118'; src:url('https://diagnost.hu/_sys/_ico/118.woff') format('woff');
		font-display: swap;
	}
	.i118:before {
		font-family: i118; content: "\e118";
	}
	
	@font-face {
		font-family: 'i253'; src:url('https://diagnost.hu/_sys/_ico/253.woff') format('woff');
		font-display: swap;
	}
	.i253:before {
		font-family: i253; content: "\e253";
	}
	/*71849 > 102560 char*/