@font-face {
	font-family: 'Libre Franklin';
	src: url('../webfonts/librefranklin-medium-webfont.woff') format('woff');
	font-weight: regular;
	font-style: normal;
}
@font-face {
	font-family: 'Libre Franklin';
	src: url('../webfonts/librefranklin-bold-webfont.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Sora';
	src: url('../webfonts/sora-regular-webfont.woff') format('woff');
	font-weight: regular;
	font-style: normal;
}
@font-face {
	font-family: 'Sora';
	src: url('../webfonts/sora-semibold-webfont.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

:root {
	--white: #ffffff;
	--yellow: #F8B132;
	--blue: #4B94FD;
	--grey: #707070;
	--grey2: #949494;
	--green: #6BE0C5;  /* aqua */
	--red: #FC6C42;    /* pumpkin */
	--orchid: #B450E0; /* orchid */
	--lightgrey: #E2E2E2;
	--lightgrey2: #EDEDED;
	--darkgrey: #2B2B2A;
	--bggrrey: #EAEAEA;

	--grey3: #93A0B2;
	--dark1: #12161C;
	--dark2: #1E2228;
	--wc-highlight:#1E2228;
	--dark3: #292B37;
	--dark4: #3B414A;
	--green: #6BE0C5;
	--red: #FC6C42;

	--small: 13px;
	--norm: 16px;
	--norm2: 18px;
	--title1: 42px;
	--title2: 36px;
	--title3: 30px;
	--title4: 24px;
	--title5: 21px;

}

body {
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	margin: 0;
	padding: 0;
	font-family: 'Libre Franklin', sans-serif;
	font-size: var(--norm);
	line-height: 135%;
	color: var(--grey);
	background-color: var(--white);
}

a { transition: all 1s; transition: all 0.5s; text-decoration: none; }
	a:hover, a:active { text-decoration: none; }

p:empty { display: none; }
ul { padding: 0; margin: 0; }
	ul li { list-style: none; }
b, strong { font-weight: bold; }
img { max-width: 100%; height: auto; }
h1,h2,h3,h4,h5 { line-height: 110%; }
	h1 { font-size: var(--title1); }
	h2 { font-size: var(--title2); color: var(--dark2); }
	h3 { font-size: var(--title3); }
	h3 small { font-size: var(--title5) }
	h4 { font-size: var(--title4); }
small { font-size: var(--small); line-height: 100%; }
div.form h2, div.form h3, div.form h4:not(.invitationOnly), div.form h5 { display: block; width: 100%; }
section.content h2 { margin-top: 20px; }
section .pop h3 { color: var(--dark2);}
section .dark h3 { color: var(--white);}
section .orchid, section .orchid h3 { color: var(--white);}
section .blue, section .blue h3 { color: var(--white);}

/*
h2.the_title:not(:empty) {
    display: inline-block;
    background-color: var(--yellow);        
    color: var(--white);                 
    padding: 0.45em 1.1em 0.45em 1.1em;
    border-radius: 0.55em;             
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    font-size: var(--title5, 0.85rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}
*/

.the_title{
    position: relative;
    display: inline-block;
    font-weight: 700;
    padding-bottom: 14px;
    background: none; /* leveszi a jelenlegi lekerekitett-gomb hatteret */
    border-radius: 0;
	margin-top: 60px !important;
}
.the_title::after{
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 64px; height: 8px;
    background: var(--pop, var(--yellow));
    border-radius: 3px;
}

.container.has-hero { text-align: center; }
.the_title:not(:empty).has-hero { top: 129px !important; margin-top: -129px !important; color:var(--white); }

/* .container { border-left: 1px dashed cyan; border-right: 1px dashed cyan; }
.row { border-left: 1px dotted magenta; border-right: 1px dotted magenta; } */

.clear { clear:both }

/* NAVIGATION */

.show-menu { cursor: pointer; position: relative; transform: scale(0.75); }
.outer-nav { display: flex; z-index: 2000000010; position: fixed; top: 0; right: -200%; height: 100dvh; width: 10-vw; transition: all 0.5s; }
	.outer-nav .transparent { width: 20vw; height: 100vh; }
	.outer-nav .container {
		display: flex; background: var(--yellow); height: 100vh; width: 80vw; z-index: 2; position: relative;
		padding-left: 50px; max-width: 440px !important; flex-direction: column;
	}

.outer-nav li { list-style: none; margin: 0; padding-left: 15px; margin-bottom:-7px; }
	.outer-nav li a { color: var(--darkgrey); font-size: var(--title5); display: inline-block; line-height: 125%; margin: 0 0 10px; position: relative; }
	.outer-nav li a:after { content: ''; position: absolute; left: 0; bottom: -2px; background: rgba(0, 0, 0, 0.5); transition: all 0.5s; height: 1px; width: 0; }
	.outer-nav li a:hover:after { width: 100%; }
body.showmenu .outer-nav { top: 0; right: 0; }

body.app .outer-nav { right: -200%; }
body.app.showmenu .outer-nav { right: 0; top: 0; }
body.showmenu .outer-nav { right: 0; top: 0; }


.outer-nav a.outer-nav-close { color: var(--dark1); font-size: 2rem; 
	z-index: 2000000020;
    position: absolute;
    top: 20px;
    right: 22px;
    display: block;
}
body.showmenu .outer-nav a.outer-nav-close { position: fixed;}

header { padding: 10px 0; z-index: 10; position: relative; --header-h: 68px; }
	header .menucol { display: flex; align-items: center; justify-content: flex-end; }	
	header ul { display: flex; justify-content: flex-end; margin-right: 20px; /*padding-top:22px*/ }
		header ul li { padding: 0 5px; }
			header ul li a { padding: 5px; color: var(--darkgrey); /*margin-top:8px;*/ }
			header ul li a:not(.button):hover { color: var(--grey); border-bottom: 2px solid var(--yellow); }
	.button { display: inline-block; margin-bottom:10px; border-radius: 50px; padding: 10px 20px; font-weight: bold; background-repeat: no-repeat; background-position: 20px center; white-space: nowrap; }
		.tablerow .button { color: var(--dark1); }
		.button.primary { background-color: var(--yellow); color: var(--white); margin-top:30px !important; }
		.button.primary.disabled { background-color: var(--lightgrey); color: var(--white); }
		.button.black { background-color: var(--darkgrey); color: var(--white); }
			.button.black:hover { background-color: var(--grey);}
		.button.white { background-color: var(--white); color: var(--darkgrey) }
			.button.white:hover { background-color: var(--darkgrey); color: var(--white) }
		li .button.primary { margin-top:0 !important; }
			.button.primary:hover { background-color: var(--darkgrey);}
		.yellowbox .button.primary { background-color: var(--darkgrey); }
			.yellowbox .button.primary:hover { background-color: var(--white); color: var(--darkgrey) }
		.button.secondary { background-color: var(--lightgrey); color: var(--darkgrey); }
			.button.secondary:hover { background-color: var(--yellow); }
			.yellowbox .button.secondary:hover { background-color: var(--grey3); color: var(--white); } 
		.b-reg { background-image: url(../../img/button_reg.svg); padding: 10px 20px 10px 50px; }
		.b-login { background-image: url(../../img/button_login.svg); padding: 10px 20px 10px 50px; }

		.button.b-blue { background-color: var(--blue); color: var(--white); text-align: center; margin-top:30px }
		.btn-outline-primary { color: var(--blue); border-color: var(--blue); }
		.btn-outline-primary:hover { background-color: var(--blue); }
		.btn-primary, .btn-check:checked+.btn-outline-primary { background-color: var(--blue); border-color: var(--blue); }
		.button.b-red { background-color: var(--red); color: var(--white); margin-top:30px }
		.button.b-orchid { background-color: var(--orchid); color: var(--white); margin-top:30px }
		.button.b-pumpkin { background-color: var(--red); color: var(--white); }
		.button.b-pumpkin { background-color: var(--white); color: var(--dark); }

	header ul#menu-desktop li a { position: relative; top: 15px; }
	header ul#menu-desktop li a.button { top: 7px; }


/* ====== Desktop gomb ====== */
	.lang-toggle-btn{
		display:inline-flex;
		align-items:center;
		gap:7px;
		cursor:pointer;
		color:var(--dark1);
		font-size:16px;
		font-weight:500;
		background:none;
		border:none;
		padding:6px 4px;
		margin-right:6px;     /* 12px helyett 6px, ahogy kérted */
		line-height:1;
	}
	.lang-toggle-btn:hover{ opacity:.7; }
	.lang-toggle-btn .lang-globe{ width:19px; height:19px; flex:none; }
	.lang-toggle-btn .lang-chevron{ width:13px; height:13px; flex:none; transition: transform .18s ease; }
	.lang-toggle-btn[aria-expanded="true"] .lang-chevron{ transform: rotate(180deg); }

	header{ position:relative; }
	header ul{ margin-right:6px; }

	/* ====== Panel -- nincs felső border, eggyé olvad a header sávval ====== */
	#lang-flags-panel{
		display:none;
		position:fixed;            /* <-- absolute helyett, mert nincs már header-szülő */
		top: var(--header-h, 68px);;                 /* <-- ÁLLÍTSD a fejléc TÉNYLEGES magasságára px-ben */
		left:0; right:0;
		background:#fff;
		border-top:none;
		box-shadow: 0 8px 20px rgba(0,0,0,.10);
		z-index: 2147483000;       
	}
	#lang-flags-panel.show{ display:block; }
	#lang-flags-panel .lang-flags-inner{ padding: 28px 28px 32px; }
	#lang-flags-panel h6.lang-region{
		font-size:13px; text-transform:uppercase; letter-spacing:.05em;
		color:#999; margin: 0 0 14px;
	}
	.lang-flag-row{
		display:flex;
		align-items:center;
		gap:9px;
		padding: 7px 0;
		color: var(--dark1) !important;
		text-decoration:none;
		font-size:15px;
	}
	.lang-flag-row img.flag{ width:20px; height:14px; object-fit:cover; border-radius:2px; flex:none; }
	.lang-flag-row:hover{ }
	.lang-flag-row.active{ font-weight:700; ; }
	.lang-panel-close{ display:none; } /* desktopon nem kell, csak mobil módban */


	/* ============================================================
	MOBIL MENÜ -- TELJES REDESIGN
	============================================================ */

	/* a Language sor a <li class="mobile-lang-row-wrap"> BELSEJÉBEN van,
	ezért a szelektor a li-n keresztül megy, !important-tel felülírva
	mindent, ami a .outer-nav li a-ra vonatkozna */
	.outer-nav li.mobile-lang-row-wrap{ list-style:none; margin-top: auto; padding-bottom: 15px; }
	.outer-nav li.mobile-lang-row-wrap .mobile-lang-row{
		display:flex;
		align-items:center;
		gap:9px;
		width:100%; text-align:left;
		background:none; border:none; cursor:pointer;
		color: var(--darkgrey) !important;
		font-size: var(--title5) !important;
		font-family: inherit !important;
		font-weight:500 !important;
		line-height:125% !important;
		padding: 5px 0 15px !important;
		margin:0;
	}
	.outer-nav li.mobile-lang-row-wrap .lang-globe{ width:20px; height:20px; flex:none; }
	.outer-nav li.mobile-lang-row-wrap .lang-chevron{ width:13px; height:13px; flex:none; transform: rotate(180deg); }
	.mobile-lang-row-wrap{ display:block; margin-top:14px; }

	@media (max-width: 640px){
		.lang-toggle-btn{ display:none !important; }
		.mobile-lang-row-wrap{ display:block; }

		#lang-flags-panel.mobile-mode{
			display:block;
			position:fixed;
			inset:0;
			transform: translateY(100%);
			transition: transform .32s cubic-bezier(.2,.7,.2,1);
			z-index: 2147483000;
			border:none;
			overflow-y:auto;
			background:#fff;
		}
		#lang-flags-panel.mobile-mode.show{ transform: translateY(0); }

		/* nyelvek száma szerint 1 vagy 2 oszlop -- desktopon (col-md-3) ettől függetlenül 4 marad */
		#lang-flags-panel.mobile-mode.lang-few .col-md-3{ width:100%; }
		#lang-flags-panel.mobile-mode.lang-many .col-md-3{ width:50%; }

		/* a userboxhoz/menühöz illő bal-behúzás és lejjebb-tolás, hogy az első
		nyelv kb. ugyanott legyen, mint az első menüpont -- finomítsd, ha
		élesben pixelre nem pontos */
		#lang-flags-panel.mobile-mode .lang-flags-inner{
			padding-top: 25px;
			padding-left: 10vw;
			padding-right: 28px;
		}
		#lang-flags-panel.mobile-mode .lang-flag-row{
			font-size: var(--title5) !important;
			gap: 12px;             /* a menüikonok gap-jével egyező */
			padding: 10px 0;
		}
		#lang-flags-panel.mobile-mode .lang-flag-row img.flag{
			width:22px; height:16px;   /* nagyjából a nav-ikonok vizuális súlyával egyező */
		}
		#lang-flags-panel.mobile-mode .lang-panel-close{
			display:flex; align-items:center; justify-content:center;
			position:absolute; top:18px; right:18px;
			width:28px; height:28px; background:none; border:none; padding:0;
			color: var(--dark1);
		}
		#lang-flags-panel.mobile-mode .lang-panel-close svg{ width:20px; height:20px; }
	}

	/* ====== Felső "ki vagyok bejelentkezve" doboz ====== */
	.outer-nav-userbox{
		display:flex; align-items:center; gap:12px;
		margin: 0 40px 0 0px; 
		padding: 0 0 10px; /* was 0 0 25px */
		border-bottom: 1px solid rgba(0,0,0,.18);
	}
	.outer-nav-userbox .avatar{
		width:46px; height:46px; border-radius:50%;
		background: rgba(0,0,0,.12);
		display:flex; align-items:center; justify-content:center;
		flex:none;
	}
	.outer-nav-userbox .avatar svg{ width:26px; height:26px; color: var(--dark1); }
	.outer-nav-userbox .who{ overflow:hidden; }
	.outer-nav-userbox .who b{ display:block; font-size:18px; color:var(--dark1); white-space:nowrap; }
	.outer-nav-userbox .who small{ display:block; font-size:13px; color: rgba(0,0,0,.6); font-weight:400; }
	.outer-nav-userbox .register-btn{

		background: var(--dark1) !important;
		color: #fff !important;
		text-decoration: none !important;
		display: inline-block !important;
		border-radius: 6px;
		padding: 10px 18px;
		font-weight: 600;
		font-size: 15px;
		white-space: nowrap;
		line-height: normal;
		margin-top:-72px;

	}

	/* ====== Menü szélesség -- ne essen 2 oszlopra kijelentkezett állapotban ====== */
	.outer-nav .container{
		max-width: 440px !important;
		padding-top: 70px;
		box-sizing: border-box;
	}
	.outer-nav ul#menu-primary{
		display:flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		flex: 1;
		padding-left: 0;     /* <-- ÚJ: a böngésző alap UL-paddingje csúsztatta el a userboxhoz képest */
		margin-left: 0;   
		margin-top: 15px;  
	}

	/* ====== Sortáv finomítása ====== */
	.outer-nav li a{ padding: 9px 0 9px !important; }

	/* ====== Új, finomvonalú close ikon (X szöveg helyett) ====== */
	.outer-nav a.outer-nav-close{
		width:28px; height:28px;
		display:flex; align-items:center; justify-content:center;
		font-size:0;
	}
	.outer-nav a.outer-nav-close::before{
		content:'';
		width:20px; height:20px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312161C' stroke-width='2.2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	/* ====== Menüpont-ikonok a li class-okból (WP menüszerkesztő a <li>-re teszi a class-t) ====== */
	.outer-nav li[class] > a{ display:flex; align-items:center; gap:0; }
	.outer-nav li[class] > a::before{
		content:''; display:inline-block; flex:none;
		background-repeat:no-repeat;;
		filter: brightness(0) saturate(100%);
		width: 27px;
		height: 21px;
		background-size: 17px 17px;
		background-position: 0px 4px;		
	}
	.outer-nav li.dash > a::before  { background-image: url(../../../app/inc/img/nav/menu_home.svg); background-position-y: 2px; }
	.outer-nav li.vehi > a::before  { background-image: url(../../../app/inc/img/nav/menu_diagnostic.svg); }
	.outer-nav li.heal > a::before  { background-image: url(../../../app/inc/img/nav/menu_health.svg); }
	.outer-nav li.loca > a::before  { background-image: url(../../../app/inc/img/nav/menu_diary.svg); }
	.outer-nav li.down > a::before  { background-image: url(../../../app/inc/img/nav/menu_certificate.svg); }
	.outer-nav li.prof > a::before  { background-image: url(../../../app/inc/img/nav/menu_settings.svg); }
	.outer-nav li.help > a::before  { background-image: url(../../../app/inc/img/nav/menu_help.svg); background-position-y: 1px; }
	.outer-nav li.exit > a::before  { background-image: url(../../../app/inc/img/nav/menu_logout.svg); }
	.outer-nav li.login > a::before  { background-image: url(../../../app/inc/img/nav/menu_login.svg); }
	.outer-nav li.dealer > a::before{ background-image: url(../../../app/inc/img/nav/menu_clients.svg); }	
	.outer-nav li.wrench > a::before{ background-image: url(../../../app/inc/img/nav/menu_wrench.svg); background-position-y: 1px; }	
	.outer-nav li.cam > a::before{ background-image: url(../../../app/inc/img/nav/menu_cam.svg); }	
	.outer-nav li.yt > a::before{ background-image: url(../../../app/inc/img/nav/menu_yt.svg); }	
	.outer-nav li.shop > a::before{ background-image: url(../../../app/inc/img/nav/menu_shop.svg); background-position-y: 1px; }	
	.outer-nav li.mail > a::before{ background-image: url(../../../app/inc/img/nav/menu_mail.svg); background-position-y: 3px; }	
	.outer-nav li.comm > a::before{ background-image: url(../../../app/inc/img/nav/menu_commission.svg); background-position-y: 2px; }	
	.outer-nav li.park > a::before{ background-image: url(../../../app/inc/img/nav/menu_park.svg); background-position-y: 2px; }	

	/* 202606 end */




.headbox { height: 300px; background-position: center center; position: relative; transition: all 0.5s ease; }
	.headbox::before {
		content: ''; width: 100%; height: 100%; position: absolute; background: linear-gradient(transparent 0%, rgba(0,0,0,0.75) 100%); top: 0;
	}
	.headbox .container { display: flex; align-items: flex-end; padding: 20px 0; height: 100%; position: relative; }
	.headbox h1 { color: var(--yellow); }

.loginbox { height: 75vh; background-size: cover; background-position: center center; }
	.loginbox .container { display: flex; justify-content: center; align-items: center; height: 100%; }
		.loginbox p { text-align: center; padding: 20px; color: var(--white); }
			.loginbox p a { color: var(--yellow); font-weight: bold; }
		.loginbox input {
			background-image: url(../../img/input_user.svg); background-repeat: no-repeat; background-position: 10px center; padding: 10px 10px 10px 30px;
		}
		.loginbox input::placeholder { color: var(--grey3); }
		.loginbox input.mypass { background-image: url(../img/input_pass.svg); }
		.loginbox a.showpass {
			background-image: url(../../img/input_eye.svg); width: 12px; height: 10px; margin: 17px 12px 0 -35px; text-decoration: none;
		}
	.b-fingerprint { border-radius: 3px; background-image: url(../../img/button_fingerprint.svg); padding: 10px 20px 10px 50px;  }

/* content */

.intro { padding: 0 0 150px; }
	.intro .col { position: relative; }
	.intro h2 { color: var(--darkgrey); font-size: var(--title3); margin: 70px 0 30px; }
		.intro h2 b { color: var(--yellow); font-size: var(--title1); }
		.intro h2 + p + img { width: 350px; position: absolute; left: 150px; }
	.intro .col-6 p { line-height: 150%; max-width: 90%; margin-bottom: 50px; }
		.intro .col-6 p b { font-weight: normal; border-bottom: 2px solid var(--yellow); }
	.intro .col-6 img.whitecar { transform: scale(1.15) translateY(-20px); position: relative; z-index: 0; }
	.intro .button { position: relative; display: table; margin: 0 0 20px; }
	.intro .hungary { display: flex; align-items: center; color: var(--grey2); margin: 50px 0 0 -100px; }
		.intro .hungary p { margin: 0; }
		.intro .hungary img { margin-right: 20px; }
.middleboxes { background-size: cover; background-position: center center; }
	.middleboxes .col { display: flex; }
	.yellowbox {
		background: var(--yellow); color: var(--white); text-align: center; padding: 15px 30px; margin: 180px 10px 120px 10px; border-radius: 5px;
	    display: flex; flex-direction: column; justify-content: center; width: 100%;
	}
	.yellowbox h2 { font-size: var(--title2); font-family: 'Sora', sans-serif; font-weight: normal; }
.threecol { padding: 100px 0 100px; }
	.threecol h3 { color: var(--darkgrey); font-size: var(--title3); margin: 0 0 50px; }
		.threecol h3 span { font-size: var(--title4); }
	.threecol .col { position: relative; }
		.threecol .col img { width: 800px; max-width: 800px; right: 0; position: absolute; }
	.boxes { display: flex; gap: 50px; }
		.box { width: 40%; font-size: 15px; }
			.box p b { color: var(--darkgrey); }
	
.services { padding: 0 0 50px; } /* was: 100px */
	.services h2 { color: var(--darkgrey); font-size: var(--title2); }
	.slide-controls, .slide-alt-controls { display: flex; justify-content: space-evenly; align-items: center; padding: 10px 0 0; gap: 5px; }
	.slide-content { margin: 60px 0 0; display: flex !important; }
		.slide-content > div { padding-right: 50px;}
		.slide-content.slide_event_log > div { padding-right: 0;}
			.slide-content > div:last-child { padding-right: 0; }
			.slide-content > div img { margin-bottom: 30px; height: 80px; padding: 20px; background: var(--yellow); width: 80px; border-radius: 20px; }
	.services h3 { font-size: var(--title3); margin-top: 100px; }
.fluid { padding: 0px 0 100px; background-position-x: center; background-size: cover; }
.fluid ul { padding: 0 0 0 20px; list-style: inside; }
.fluid ul li { list-style-type: disc; }

.twelve { padding: 0px 0 100px; } /* 100px */
	.twelve .col { position: relative; }
	.yellowcircle {
		background-color: var(--yellow); border-radius: 150px; color: var(--darkgrey); text-align: center; width: 150px; height: 150px;
		padding: 48px 0 0; position: absolute; margin: 30px 20px 0 0; line-height: 100%;
	}
	.yellowcircle b { font-size: var(--title2); font-family: 'Sora', sans-serif; font-weight: normal; display: block; margin: 0 0 10px; }
	.greybox { background-color: var(--lightgrey2); border-radius: 5px; padding: 50px 100px; margin-left: 100px; }
		.greybox h3 { font-size: var(--title4); color: var(--darkgrey); }
			.greybox h3 b { color: var(--yellow); display: block; }
		.greybox p { margin: 0; width: 65%; }
	.greybox + img { position: absolute; right: 0; height: 400px; top:-50px; }
	.greybox + img + p { width: 70%; padding: 20px 0 0 200px; line-height: 100%; color: var(--grey2); }

.adminslides { margin: 0 0 50px; }
	.tabs.slide-controls, .tabs.slide-alt-controls { padding: 50px 0 5px; justify-content: flex-start; gap: 5px; align-items: stretch; }
		.tabs li { display: flex; }
		.tab {
			border-radius: 5px; padding: 10px; font-size: 13px; font-weight: bold;
			background-repeat: no-repeat; background-position: 15px center; display: block;
			cursor: not-allowed; display: flex; align-items: center; line-height: 100%;
		}
		.tab.secondary { background-color: var(--lightgrey); color: var(--white); }
			.tab.secondary:hover { background-color: var(--lightgrey); }
		.tab.done { background-color: var(--grey); color: var(--white); cursor: pointer; }
			.tab.done:hover { background-color: var(--darkgrey);}
		.tab.has-notification { background-color: var(--red); color: var(--white); }
		.tab.primary { background-color: var(--yellow); color: var(--white); }
			.tab.primary:hover { background-color: var(--darkgrey);}
		.t-car { background-image: url(../../img/white_car.svg); padding: 10px 20px 10px 50px; }
		.t-pay { background-image: url(../../img/white_payment.svg); padding: 10px 20px 10px 50px; }
		.t-invoice { background-image: url(../../img/white_invoice.svg); padding: 10px 20px 10px 50px; }
		.t-user { background-image: url(../../img/white_user.svg); padding: 10px 20px 10px 50px; }
		.t-stripe { background-image: url(../../img/white_payment.svg); padding: 10px 20px 10px 50px; }
		.t-active { background-image: url(../../img/white_active.svg); padding: 10px 20px 10px 50px; }
		.t-event { background-image: url(../../img/white_event.svg); padding: 10px 20px 10px 50px; background-size: 31px; background-position: 14px center !important; }
	.adminslides .slide-content, .bggrey { border-radius: 5px; background-color: var(--bggrrey); padding: 50px; flex-direction: column; margin: 0; }
		.adminslides .slide-content h2 { font-size: var(--title4); margin-bottom: 30px; }
	.kperc span, .vperc span { font-size: 13px; }

.userlist { margin: 0 0 50px; }
	.userlist .slide-content {
		border-radius: 5px; background-color: var(--bggrrey); padding: 50px; flex-direction: column; align-items: flex-start; margin: 0;
	}
	.userlist .slide-content h2 { font-size: var(--title4); margin-bottom: 30px; }
	.userlist button {
		border: none; text-transform: uppercase; font-size: 14px; padding: 10px 10px 10px 40px; border-radius: 5px;
		background-position: 10px center; background-image: url(../../img/button_arrow.svg); margin-top: 30px;
	}
	.tablehead, .tablerow { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 13px; padding: 15px !important; }
		.tablehead span { width: 10%; }
			.tablehead span:first-child, .tablehead span:last-child { width: 5%; }
			.tablehead span:nth-child(3), .tablehead span:nth-child(7) { width: 20%; }
	.tablerow { background: var(--white); border-radius: 3px; margin-top: 5px; }
	.tablerow.snap { margin-top:0px; padding-top:5px !important; }
		.tablerow h4 { font-size: 13px; color: var(--darkgrey); font-weight: bold; width: 10%; margin: -10px 0 0 0; }
		.tablerow p { font-size: 13px; color: var(--grey); width: 10%; margin: 0; }
		.tablerow p[data-field=dtc] { font-size: 15px }
			.tablerow p:nth-child(3), .tablerow p:nth-child(7) { width: 20%; }
			.tablerow p:first-child, .tablerow p:last-child { width: 5%; }
			.tablerow p a { background-repeat: no-repeat; background-position: center center; display: block; overflow: hidden; line-height: 500%; }
				.tablerow p a.row-edit { background-image: url(../../img/icon_edit.svg); width: 24px; height: 22px; margin-left: -8px; }
				.tablerow p a.row-details { background-image: url(../../img/icon_chevron.svg); width: 22px; height: 22px;}
				.tablerow p a.row-details.open { transform: rotate(180deg); }
				.tablerow p a.row-delete { background-image: url(../../img/icon_delete.svg); width: 30px; height: 21px;}
				.tablerow p a.cert-download { background-image: url(../../img/cert_download.svg); width: 30px; height: 26px; float: right; background-size: 28px; cursor: pointer; }
				.tablerow p a.cert-download.grey { background-image: url(../../img/cert_download-grey.svg); }
				.tablerow p a.trash { background-image: url(../../../app/inc/img/vehicles/trash.svg); width: 26px; height: 26px; float: right; background-size: 16px; background-position: right center; cursor: pointer; }
				.tablerow p a.unlink { background-image: url(../../img/unlink.svg); width: 26px; height: 26px; float: right; background-size: 19px; background-position: right center; cursor: pointer; }
				.tablerow p a.placeholder { width: 26px; height: 26px; float: right; cursor:auto }
				.tablerow p a.phone { display: inline; padding-left:5px; }

	.page-template-page-dealer-list2 section.twelve { padding-bottom: 0; }

	#serviceAggregateAlarm .tablerow p a { line-height: 100%; }
	#serviceAggregateAlarm .tablerow.snap { background-color: #f2f2f2;}
	.tablerow.chevron{ position: relative; cursor: pointer; }
	.tablerow.chevron::after{
		content: "";
		position: absolute;
		left: 18px;
		right: auto;
		top: calc( 50% - 1px );
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;   /* a vonal a szövegszínt örökli */
		border-bottom: 2px solid currentColor;
		transform: translateY(-65%) rotate(45deg);   /* ▼ lefelé mutató chevron */
		transform-origin: center;
		transition: transform .25s ease;
		pointer-events: none;
	}
	#serviceAggregateAlarm .tablerow p[data-field=model_owner] { padding-left: 26px; }

	.tablerow.chevron.open::after{ transform: translateY(-35%) rotate(225deg); }	

		.detailBox {
			margin:0 2px 7px 0;
			padding: 5px 7px;
			background-color: #f4f4f4;
			border-radius: 4px;;
		}
		.contactBox { background-color: var(--lightgrey); }
		.detailBox i { height:1.25rem; }
		.detailBox.icon { padding-left:37px; background-repeat: no-repeat;}
		.detailBox.icon_name { background-image: url(../../img/icon_name.svg); background-size: 19px; background-position: 8px 8px; }
		.detailBox.icon_email { background-image: url(../../img/icon_email.svg); background-size: 19px; background-position: 8px 6px; }
		.detailBox.icon_phone { background-image: url(../../img/icon_phone.svg); background-size: 16px; background-position: 10px 7px; }
		.detailBox span.value, .detailBox span.unit { font-size:1.25rem; font-family: 'Sora', sans-serif; }
		.detailBox span.value { font-weight: bold; color:var(--dark1); }
		.detailBox span.label {
			width: 100%;
			display: block;
		}


	.tablerow.details .container { /* ööö */
		padding: 0 8% 0 6%;
	}
	.tablerow.details { padding: 5px 0 0 13px !important }
	.tablerow.details .col { text-align: left; }
	.tablerow.details p a { line-height: normal;}

	#serviceBookContent strong { color: var(--dark1); }
	.servicebook-list { list-style: none; padding: 0; margin: 0 0 0 0; }
	.servicebook-list li { padding: 5px 7px; }
	.servicebook-list li:nth-child(odd) { background-color: var(--lightgrey); }
	.servicebook-list li.selected { background-color: var(--blue); border-radius: 3px; }
	.servicebook-list li a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		text-decoration: none;		
	}

	.servicebook-list li a span { color: var(--dark1); }
	.servicebook-list li.selected a, .servicebook-list li.selected a span { color: var(--white); }
	.modal .form-label { font-size: var(--small); margin-bottom: 0;}
	.modal .form-check-input { margin-top: 0; }
	.modal .form-check-label { margin-left: 10px; }

	#serviceSettingsModal input[type=number] {
		width: 90px;
		margin-right: 10px;
	}

	.pill-link {
		display: inline-block;
		padding: 7px 10px 7px 10px;
		margin: 10px 0 0 0;
		background: var(--white);
		border-radius: 999px;
		box-shadow: 0 4px 5px rgba(0,0,0,0.12);
		text-decoration: none;
		color: var(--grey);
		font-weight: normal;
		font-size: var(--small);
		transition: all 0.15s ease;
		line-height: 8px;
	}

	.pill-link:hover {
		background: #f5f5f5;
		transform: translateY(-1px);
	}

	.pill-link:active {
		transform: translateY(0);
	}

	.pill-link.last_pressed {
		background: var(--blue);
		color: var(--white);
	}	

	a.loading, span.loading, a.cert-download.loading, .tablerow p a.cert-download.loading {
		background-image: url(../../img/loader.svg); width: 30px; height: 26px; background-size: 24px;
		animation-name: spin;
		animation-duration: 1000ms;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}
	span.loading {
		width: 24px;
		display: inline-block;
	}
	.js_search_list {
		float:right;
		background-color: transparent;
		border-bottom: 1px var(--dark1) solid;
		background-image: url(../../img/icon_magnifier.svg);
		background-size: 15px;
		background-repeat: no-repeat;
		background-position: 4px 3px;
		padding: 0px 0 0 25px;
		border-radius: 0;
	}
	.js_search_list:focus { background-color: var(--white); outline: none;}
	.autolist-connection {
		display: block;
		width: 10px; height: 10px;
		border: none;
		border-radius: 5px;
		background-color: transparent;
		position: relative;
		top: 11px;
		left: -20px;
	}
	.autolist-connection.online { background-color: var(--green); }
	.autolist-connection.offline { background-color: var(--red); }

	.feedback-circle {
		display: block;
		width: 10px; height: 10px;
		border: 2px #444 solid;
		border-radius: 5px;
		background-color: transparent;
		position: relative;
		top: 15px;
		left: -15px;
	}
	.feedback-circle.green { border-color: var(--green); }
	.feedback-circle.yellow { border-color: var(--yellow); }
	.feedback-circle.red { border-color: var(--red); }

	.footnote { font-size:0.8rem; }
	ul.footnote li { padding-left: 15px; }
	ul.footnote .autolist-connection { top:15px; left:-15px; }


	.hide_no_fault { display: none; }
	.tablerow .button {
		padding: 5px 10px;
		align-self: flex-end;
		text-align: center;
		font-size: var(--small);
		font-weight: normal;
		display: inline;
	}
	.tablerow input[type=radio] {
		padding:0 !important;
		width: 20px !important;
		height: 20px !important;


		-webkit-appearance: none;
		appearance: none;
		border: 3px #0f0 solid;
		border-radius: 50%;
		background: transparent;
		border: 3px #888 solid;

	}
	.tablerow input[type=radio]:checked {
		background-color: #888;
	}

	.air-datepicker-global-container{ z-index: 1000000 !important;}

	.marker {  
		background-image: url(../../../app/inc/img/map/map_white.svg);
		background-size: 100%;
		background-position: center -0px;
		background-repeat: no-repeat;
		width: 20px;
		height: 40px;
		cursor: pointer;
	  }
	
	  .marker.cadet {	background-image: url(../../../app/inc/img/map/map_grey.svg); background-color: transparent; }
	  .marker.pop {	background-image: url(../../../app/inc/img/map/map_yellow.svg); background-color: transparent; }
	  .marker.orchid {	background-image: url(../../../app/inc/img/map/map_orchid.svg); background-color: transparent; }
	  .marker.alarm {	background-image: url(../../../app/inc/img/diary/yellow_alert.svg); background-color: transparent; }

	  .marker.aqua {	background-image: url(../../../app/inc/img/map/map_aqua.svg); background-color: transparent; }
	  .marker.bluberry { background-image: url(../../../app/inc/img/map/map_bluberry.svg); background-color: transparent; }
	  .marker.pumpkin {	background-image: url(../../../app/inc/img/map/map_pumpkin.svg); background-color: transparent; }




img.ico_rounded { margin: 15px auto 30px auto; display: block; height: 80px; padding: 20px; background: var(--yellow); width: 80px; border-radius: 20px; }
.mt-5rem { margin-top: 5rem !important; }

h3.dropdown { padding-left: 10px; padding-right:20px; cursor: pointer; padding-top:6px; background: #f4f4f4; font-size: 1.2em; }
i.dropdown_icon::before { width: 100%; height: 100%; position: absolute; top: 5px; font-style:normal; font-weight: bold; font-weight: bold; color: var(--grey); font-size: 1.5em; padding-left:10px; }
i.dropdown_icon.closed::before { content: '+'; }
i.dropdown_icon:not(.closed)::before { content: '-'; }
i.dropdown_icon { color: var(--dark4); float:right; font-size: 15px; cursor: pointer; padding-right:10px; }
div.slidedown { padding: 5px 10px; }
/* shop */

p.woocommerce-result-count, .woocommerce select[name=orderby] { display:none }
.woocommerce section a { color:var(--yellow) }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { background-color: var(--yellow); color: var(--white); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background-color: var(--darkgrey);}
.woocommerce-info { border-top-color: transparent; }
span.subtitle { color: var(--grey);}
.vp-woo-pont-shipping-method-icons { display:none; }
.shop_table input[type=radio] { width: unset; }
p.available-on-backorder { font-size: 1.25em !important; color:var(--red) !important; }
p.backorder_notification { font-size: var(--norm) !important; color:var(--red) !important; }
#wc-stripe-express-checkout-element, #wc-stripe-express-checkout-button-separator { display:none !important; }
.woocommerce span.posted_in { display: none !important;}
.related.products { display: none; }
.woocommerce form input { background-color: var(--lightgrey2);}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price{color:var(--yellow); font-weight: bold;}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock{color:var(--dark2)}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price{color:var(--dark2)}

#add_payment_method .cart-collaterals .cart_totals .discount td,
.woocommerce-cart .cart-collaterals .cart_totals .discount td,
.woocommerce-checkout .cart-collaterals .cart_totals .discount td{color:#777335}

/* .woocommerce img, .woocommerce-page img { max-width: 70% !important;} */

/* footer */

#CookiebotWidget { z-index:0 !important; bottom: 20px !important; left: 26px !important; }
.abovefooter { background-size: cover; background-position: center center; position: relative; height: 300px; }
	.abovefooter::before {
		content: ''; width: 100%; height: 100%; position: absolute; background: linear-gradient(transparent 0%, rgba(0,0,0,0.75) 100%); top: 0;
	}
	.abovefooter img { margin: 100px auto; display: block; position: relative; }
footer { font-size: var(--small); color: var(--grey2); padding: 20px 0; }
	footer ul { display: flex; justify-content: flex-end; }
		footer li a { color: var(--grey2); padding-left: 20px; }
			footer li a:hover { color: var(--darkgrey); }

/* form styling */

.stripebox { background-image: url(../../img/stripe.svg); background-repeat: no-repeat; background-position: calc(100% - 30px) 30px; }

div.form { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 10px; }
	.buttons { width: 100%; padding: 20px 0 0; }
		div.form button { border: none; text-transform: uppercase; }
		.buttons button, .buttons a { font-size: 14px; background-position: 10px center; padding: 10px 10px 10px 40px; border-radius: 5px; }
		.buttons a.noicon { padding-left: 10px; }
		.buttons button { background-image: url(../../img/button_next.svg); }
		.buttons button + a {
			background-color: #ccc !important; color: var(--white) !important; background-image: url(../../img/button_save.svg);
			padding: 12px 12px 12px 35px; background-size: 17px;
		}
		.buttons button + a:hover { background-color: var(--grey2) !important; }
		.b-camera {
			background-image: url(../../img/icon_qr.svg); background-color: var(--darkgrey); background-position: 15px center;
			color: var(--white) !important; font-weight: normal; font-size: 13px; line-height: 13px; border-radius: 3px; padding: 15px 15px 15px 55px;
		}
		.b-camera + input { padding: 17px; width: 320px; }
		.b-stripe {
			background-image: url(../../img/white_payment.svg); background-color: #635BFF; color: var(--white) !important; border-radius: 3px;
				font-size: 13px; text-transform: uppercase; padding: 10px 15px 10px 50px; background-position: 15px center;
		}
		.b-grey { background-color: var(--lightgrey); }
		.b-aqua { background-color: var(--green); }
		.stripebox input { color: #635BFF; font-weight: bold; }
	form input, form select, form textarea { padding: 10px 15px; font-size: 15px; border: none; border-radius: 3px; width: 230px; outline: none; resize: none; }
	form input#price_partner { font-size:20px; font-weight: bold;}
	form input[type=checkbox] { width: unset; }
	form select {
		background-image: url(../../img/arrow.svg); background-repeat: no-repeat; background-position: 95% center;
		padding: 10px; appearance: none; color: var(--grey);
	}
	form .with-label { display: flex; align-items: center; gap: 10px; }
		form .with-label select { width: 360px; }
		form .with-label label.kperc { font-weight: bold; }
	form input:focus { outline: 1px solid #bbb; }
	form p { font-size: 15px; width: 100%; }
		form .terms p { padding: 20px 0 0; border-top: 1px solid #ccc; margin-top: 20px; }
	form input.input_as_label { background-color: transparent; color:var(--dark1); }

	.woocommerce-page form div#terms .form-row::before,
	.woocommerce-page form div#terms .form-row::after,
	.woocommerce-page form div#terms_withdrawal .form-row::before,
	.woocommerce-page form div#terms_withdrawal .form-row::after
		{ display: unset; }

	#companyFields .form-label { margin: .5rem 0 0 0; }
	/* 202503
	input.radio_green, input.radio_yellow, input.radio_red {
		accent-color: #f00;
	}
	*/

	input.radio_green { margin-right: 10px; accent-color: var(--green); border-color: var(--green) !important; } /* box-shadow: 0 0 0 3px var(--green);  */
	input.radio_yellow { margin-right: 10px; accent-color: var(--yellow); border-color: var(--yellow) !important; } /* box-shadow: 0 0 0 3px var(--yellow); */
	input.radio_red {  margin-right: 10px; accent-color: var(--red); border-color: var(--red) !important; } /* box-shadow: 0 0 0 3px var(--red); */
	input.radio_green:checked { background-color: var(--green) !important; }
	input.radio_yellow:checked { background-color: var(--yellow) !important; }
	input.radio_red:checked { background-color: var(--red) !important; }
	label.feedback {
		position: relative;
		top: -5px;
		font-size: 0.75rem;
		text-transform: uppercase;
	}

div.form form { border-radius: 5px; background-color: var(--bggrrey); padding: 50px; width: 100%; }
	form.connectiniUI > input { width: 100%; margin: 0 0 5px; }
	form.connectiniUI .switch { justify-content: flex-end; }
	.invitationOnly { display:none; }

div.form #qr-video { width: 300px; height: auto; }

.terms { width: 100%; display: flex; flex-direction: column; align-items: flex-start; }

.customrange { padding: 10px 30px 50px; border: 1px solid #eee; border-radius: 3px; width: 100%; }
.customrange input {
	width: 100%; background-color: transparent; height: 3px; border-radius: 3px; appearance: none; position: relative; z-index: 2;
	width: calc(100% + 16px); margin-left: -8px; outline: none !important; padding: 0;
}
.customrange input::-webkit-slider-thumb {
	width: 20px; height: 20px; margin-top: 15px; background-color: var(--yellow); border-radius: 20px; appearance: none;
}
.customrange input::-webkit-slider-runnable-track { background-color: transparent; }
.customrange input + div { display: flex; width: 100%; justify-content: space-between; }
	.customrange input + div { background: var(--lightgrey); height: 3px; width: 100%; border-radius: 3px; }
	.customrange input + div span { display: inline-block; width: 30px; color: var(--grey2); font-size: 12px; margin-top: 20px; position: relative; }
	.customrange input + div span:before { 
		content: ''; height: 20px; width: 3px; background: var(--lightgrey); position: absolute; border-radius: 3px;
		display: inline-block; top: -20px; left: 12.5px; z-index: 1;
	}
	.customrange input + div span:first-child:before { left: 0; }
	.customrange input + div span:nth-child(2) { transform: translateX(-6px); }
	.customrange input + div span:nth-child(3) { transform: translateX(1px); }
	.customrange input + div span:nth-child(4) { transform: translateX(7px); }
	.customrange input + div span:last-child:before { left: auto; right: 0; }

.switch { border: none; background: transparent; display: flex; flex-direction: row-reverse; align-items: center; padding: 10px; }
	.switch span { float: left; line-height: 100%; margin: 0 5px 0 0; }
	.switch div, .switch .cb { position: relative; float: left; }
		.switch div input[type=checkbox], .switch .cb input[type=checkbox] {
			opacity: 0; position: absolute; top: 0; left: 0; width: 240px; height: 100%; cursor: pointer; z-index: 999;
		}
		.switch div input + span, .switch .cb input + span {
			background: var(--grey2); width: 100%; height: 100%; width: 40px; height: 20px; border-radius: 20px; transition: all .5s; z-index: 997;
		}
		.switch div input + span + span, .switch .cb input + span + span {
			content: ''; width: 16px; height: 16px; background: var(--lightgrey); border-radius: 10px;
			position: absolute; left: 2px; top: 2px; display: inline-block; transition: all .5s; z-index: 998;
		}
		.switch div input:checked + span, .switch .cb input:checked + span { background: var(--yellow); }
		.switch div input:checked + span + span, .switch .cb input:checked + span + span { left: 22px; background: var(--white); }
	.switch span a { color: var(--darkgrey); font-weight: bold; }

form .error { background: var(--red); color: var(--white); font-weight: bold; padding: 5px 20px !important; border-radius: 3px; text-align: center; margin-top:1rem; margin-bottom:0; }
form .success { background: var(--green); color: var(--dark); padding: 5px 20px !important; border-radius: 3px; text-align: center; margin-top:1rem; margin-bottom:0; }
form .error a, form .success a { background: #fff; padding: 3px; border-radius: 3px 10px; color: var(--dark2); margin-left: 10px;}
form .error a.button, form .success a.button { background-color: var(--darkgrey) !important; color: var(--white) !important; margin-left:0; }
form .error a.button:hover, form .success a.button:hover { background-color: var(--white) !important; color: var(--darkgrey) !important; }

@keyframes spin { 
	from { 
		transform: rotate(0deg); 
	} to { 
		transform: rotate(360deg); 
	}
}

/******************** RESPONSIVE ********************/

/* sm - tablet (mobile first) */ @media (min-width: 640px) {}
/* md - tablet landscape or really small desktop screen */ @media (min-width: 768px) {}
/* lg - smaller desktop screen */ @media (min-width: 1024px) {}
/* xl - normal/big desktop screen */ @media (min-width: 1280px) {}
/* 2xl - huge screen or tv */ @media (min-width: 1536px) {}

/* Larger desktop */
@media (min-width: 1281px) {

	.desktophide { display: none !important; }

}

/* Desktop only */
@media (min-width: 1024px) and (max-width: 1280px) {

	.desktophide { display: none !important; }
	header .show-menu { display: block; }
	.intro .hungary { margin: 0 0 0 -50px; }
	.greybox + img + p { width: 95%; padding: 120px 0 0 200px; }
	.intro h2 { width: 90% }
	.intro .hungary { margin: -50px 0 0 25px; width: 50%; }
	.boxes { flex-direction: column; width: 100%; gap: 0; }
	.threecol .col img { width: 700px; top: 175px; }
	.services .col-6:first-child { width: 40%; }

}

/* Breakpoint */
@media (max-width: 1199px) {
	header ul li a:not(.button) { display: none; }
	a.logo img { padding-top: 4px; height: 58px; max-width: unset; }

}

@media (max-width: 767px) {
	a.logo img { padding-top: 5px; margin-bottom:3px; height: 45px; }
}

/* Tablet or small screen */
@media (min-width: 641px) and (max-width: 1023px) {

	.desktophide { display: none !important; }
	.container { max-width: 90%; }
	header ul li a:not(.button) { display: none; }
	.slide-controls, .slide-alt-controls { flex-direction: column; align-items: flex-start; }
	.button { display: block; }
	.intro { padding: 30px 0 100px; }
	.intro h2 + p + img { top: 520px; left: 0; }
		.intro .hungary { margin: -25px 0 0 -25px; } 
			.intro .hungary p { margin: 40px 0 0 0; }
			.intro .col-6 p { width: 200%; max-width: 200%; padding: 30px 0 0; }
	.boxes { flex-direction: column; width: 100%; gap: 0; }
	.threecol { padding: 100px 0 0; }
	.threecol .col img { width: 540px; top: 110px; }
		.boxes { flex-direction: column; width: 100%; gap: 0; }
	    .boxes > div:last-child { width: 100%; }
	.services { padding: 0 0 50px; } /* was: 100px */
		.services h3 { font-size: var(--title4); margin-top: 0; }
    	.slide-content > .col-3:first-child { width: 100%; padding-top: 0; }
    	.slide-content .col-3 { width: 33.33%; padding-top: 50px; }
    .twelve { padding: 0 0 100px; }
	.yellowbox h2 { font-size: var(--title4); }
		.yellowbox h2 + p { font-size: 13px; line-height: 110%; }
	.greybox { padding: 50px 50px 50px 100px; }
		.greybox p { width: 100%; }
	.greybox + img { right: -50px; top: 250px; transform: scale(0.9) translate(-10px, -50px); }
		.greybox + img + p { width: 55%; padding: 30px 0 0 100px; line-height: 90%; }
			.greybox + img + p small { font-size: 12px; }
	footer .col-12 { display: flex; justify-content: center; }

}

/* Smaller tablet */
@media (max-width: 767px) {
	.mobilehide { display: none !important; }
}

/* =============================================================================
   2026-07 -- page-dealer-list2.php REBUILD (Jarmu lista / DTC / PID uj UI)
   Minden szabaly a #connectiniDealerList hatokoren belul ervenyes, hogy semmi
   ne fusson at mas oldalakra generikus classnevek (pl. .tablerow, .detailBox,
   .js_search_list) miatt.
   ============================================================================= */

/* --- tab-panel valtas (slick helyett) --- */
#connectiniDealerList .dealerList > .slide-content { display:none !important; }
#connectiniDealerList .dealerList > .slide-content.active { display:flex !important; }

/* --- egyseges "expand" chevron -- a h4 (Rendszam) cellahoz van rogzitve, NEM
       a teljes sorhoz, igy a sor magassaga (desktop 1-soros vs. mobil 2-soros
       grid) nem befolyasolja a fuggoleges pozíciót -- mindig a "Rendszam"
       felirat/ertek magassagahoz kepest kozepen marad. currentColor helyett
       explicit var(--grey), hogy ugyanolyan szurke legyen, mint a
       #serviceAggregateAlarm .tablerow.chevron::after (ld. fent). --- */
#connectiniDealerList .tablerow[data-item-source=user]{ position:relative; cursor:pointer; }
/* Desktop: a h4 ELOTT mar ott az ures 6%-os akcio-cella (a regi row-details
   helye) -- oda kerul a chevron negativ left-tel, a h4-nek NEM kell sajat
   padding, igy a "Rendszam" ertek megkapja a teljes oszlopszelesseget (nem
   torik ket sorba). Mobilon (ld. media query lent) az akcio-cella el van
   rejtve, ott a h4 SAJAT paddingje adja a helyet a chevronnak. */
#connectiniDealerList .tablerow[data-item-source=user] h4[data-desc]{
    position:relative; width:13% !important; flex:0 0 13% !important; white-space:nowrap; padding-left: 20px !important;
}
#connectiniDealerList .tablerow[data-item-source=user] h4[data-desc]::after{
    content:""; position:absolute; left:0px; top:5px; width:8px; height:8px;
    border-right:2px solid var(--grey); border-bottom:2px solid var(--grey);
    transform: translateY(-65%) rotate(45deg); transition: transform .25s ease; pointer-events:none;
}
#connectiniDealerList .tablerow[data-item-source=user][aria-expanded=true] h4[data-desc]::after{ transform: translateY(-35%) rotate(225deg); }
#connectiniDealerList .tablerow p .row-details{ display:none; } /* a regi ikon-alapu chevron marad DOM-ban (JS kompat), de vizualisan mar nem kell */

/* --- h4 margin es kapcsolat-pötty: a regi ertekek (margin:-10px.., top:11px;left:-20px)
       egy masik, oszlop-alapu sorelrendezeshez keszultek -- itt nullazzuk, es
       normal inline folyasba tesszuk a pöttyot, kozvetlenul a rendszam ele.
       A pötty igy mindig a RENDSZAM ERTEKKEL egy sorban all (a chevron a
       cella tetejen/kozepen, a label soraban), a kettő nem "csuszhat el"
       egymastol, mert ugyanabban a h4 dobozban vannak. --- */
#connectiniDealerList .tablerow[data-item-source=user] h4{ margin:0 !important; }
#connectiniDealerList .tablerow[data-item-source=user] h4 .autolist-connection{
    position:static !important; top:auto !important; left:auto !important; display:inline-block; margin-right:6px;
}

/* --- Tanusitvany gomb athelyezve a lenyitott panelbe. Flexbox (nem grid!),
       mert flex-wrap eseten a justify-content:center TENYLEG kozepre rendezi
       a tort sorokat is -- gridnel az oszlopok maradnak fix nyomvonalon.
       A gomboknak min-width van, NEM 100% -- a markupon mar ott a
       "justify-content-center" class is, ezzel most osszhangban vagyunk. --- */
#connectiniDealerList .detail-actions{
    display:flex !important; flex-wrap:wrap; justify-content:center;
    gap:14px; margin:0 0 20px 0px; width:100%;
}
#connectiniDealerList .detail-actions .button,
#connectiniDealerList .detail-actions a.cert-download{
    margin:0 !important; width:auto; min-width:190px; flex:0 1 auto; box-sizing:border-box; text-align:center;
    display:flex; align-items:center; justify-content:center; position:relative; padding-left:24px;
}
/* --- feher ikonok a 4 gombon: balra igazitva, a label a TELJES gombhoz kepest
       kozepen marad (az ikon abszolut pozicionalt pszeudo-elem, nem foglal helyet) --- */
/* #connectiniDealerList .detail-actions .ico-btn{ padding-left:44px; } */
#connectiniDealerList .detail-actions .ico-btn::before{
    content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
    width:18px; height:18px; background:no-repeat center/contain; filter:brightness(0) invert(1); /* #12161c -> feher */
}
#connectiniDealerList .detail-actions .ico-wrench::before{ background-image:url(https://connectini.com/ui/app/inc/img/nav/menu_wrench.svg); }
#connectiniDealerList .detail-actions .ico-settings::before{ background-image:url(https://connectini.com/ui/app/inc/img/nav/menu_settings.svg); }
#connectiniDealerList .detail-actions .ico-certificate::before{ background-image:url(https://connectini.com/ui/app/inc/img/nav/menu_certificate.svg); }
#connectiniDealerList .detail-actions .ico-settings2::before{ background-image:url(https://connectini.com/ui/app/inc/img/nav/menu_settings2.svg); }

/* --- Tanusitvany "tolt" allapot: a regi ".loading" szabaly a kis negyzet-ikon
       korabol maradt (30x26px-re zsugorodott es forgott a TELJES gomb) -- itt
       felulirjuk sajat context alatt: a gomb megtartja a meretet/formajat,
       csak a BAL OLDALI ikon valt pörgő loaderre, es a gomb ideiglenesen nem
       kattinthato. */
#connectiniDealerList .detail-actions a.cert-download.loading{
    background-image:none !important; width:auto !important; height:auto !important;
    animation:none !important; pointer-events:none; opacity:.7; cursor:progress;
}
#connectiniDealerList .detail-actions a.cert-download.loading.ico-btn::before{
    background-image:url(../../img/loader.svg) !important; filter:brightness(0) invert(1);
    animation-name:spinCertIcon; animation-duration:1000ms; animation-iteration-count:infinite; animation-timing-function:linear;
}
/* a kozos "@keyframes spin" csak rotate()-ot allit, ami animalaskor
   TELJESEN felulirja a transform property-t -- ezert csuszott le a loading
   ikon (elveszett a translateY(-50%) kozepre-igazitas). Sajat keyframe,
   ami mindket transformot egyutt tartalmazza. */
@keyframes spinCertIcon{
    from{ transform: translateY(-50%) rotate(0deg); }
    to{ transform: translateY(-50%) rotate(360deg); }
}

/* --- Leválasztás (unlink) -- szandekosan visszafogott, a lenyitott resz legaljan --- */
#connectiniDealerList .unlink-wrap{ margin-top:6px; text-align:center; }
#connectiniDealerList .unlink-wrap a.unlink{ font-size:12px; color:var(--grey2); text-decoration:underline; background-image:none; width:auto; height:auto; float:none; }
#connectiniDealerList .unlink-wrap a.unlink:hover{ color:var(--red); }

/* --- lenyitott resz hattere: UGYANAZ a szurke, mint az esemenynaplo (#f2f2f2),
       szimmetrikus belso terrel -- a regi ".tablerow.details{padding:5px 0 0 13px}"
       es ".tablerow.details .container{padding:0 8% 0 6%}" ferdesege helyett --- */
#connectiniDealerList .tablerow.details{ background:#f2f2f2 !important; padding:16px !important; }
#connectiniDealerList .tablerow.details .container{ padding:0 !important; }

/* --- Nev / Email / Telefon -- UGYANAZ a racs, mint a PID dobozok, hogy pontosan alignoljanak --- */
#connectiniDealerList .contact-grid{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(min(260px,100%),1fr));
    gap:14px; width:100%; align-items:start; box-sizing:border-box;
}
#connectiniDealerList .contact-grid .detailBox,
#connectiniDealerList .pid-group{ margin:0 !important; box-sizing:border-box; }
#connectiniDealerList .detailBox.contactBox{ background-color:#fff !important; background-position:8px center !important; }

/* --- PID csoportositas, Q-Idogep mintajara (ld. tm.html META) --- */
#connectiniDealerList .piddata-groups{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(min(260px,100%),1fr));
    gap:14px; width:100%; margin:0; box-sizing:border-box;
}
#connectiniDealerList .pid-group{ background:#fff; border:1px solid var(--lightgrey); border-radius:10px; padding:0 16px 14px; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; }
#connectiniDealerList .pid-footer{ margin-top:auto; padding-top:10px; font-size:11px; color:var(--blue); text-align:center; }
#connectiniDealerList .pid-group h5{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#fff; font-weight:700; margin:0 -16px 12px; padding:14px 16px; background:var(--grey2); }
#connectiniDealerList .pid-item{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid #f1f1f2; }
#connectiniDealerList .pid-item:first-child{ border-top:none; }
#connectiniDealerList .pid-item .label{ font-size:12.5px; color:var(--grey); }
#connectiniDealerList .pid-item .value{ font-weight:700; color:var(--dark1); white-space:nowrap; font-family:'Sora',sans-serif; font-size:1.25rem; }
#connectiniDealerList .pid-item .value avl{ display:inline-block; }
#connectiniDealerList .pid-item .unit{ font-weight:400; color:var(--grey); font-size:12px; margin-right:-3px; display: inline-block; width: 33px; text-align: center; padding: 0; }
#connectiniDealerList .pid-item .unit.d-none{ display:none; }
#connectiniDealerList .pid-item.is-unsupported{ opacity:.4; }
#connectiniDealerList .pid-item.is-unsupported avl::after{ content:"\2013"; color:var(--grey2); }

/* --- Kereso mezo: lekerekitett sarok (nem pill), feher/flat, finomabb padding
       a nagyito korul, fokuszban var(--pop) szinu 1px keret --- */
#connectiniDealerList .js_search_list{
    float:right; background-color:#fff;
    border:1px solid var(--lightgrey); border-bottom:1px solid var(--lightgrey);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-size:15px; background-repeat:no-repeat; background-position:14px center;
    border-radius:8px; padding:10px 16px 10px 40px; width:100%; max-width:280px; box-sizing:border-box;
    outline:none; transition:border-color .15s ease; margin-top:-8px;
}
#connectiniDealerList .js_search_list:focus{ background-color:#fff; border-color:var(--pop); }

/* a keresot tartalmazo oszlopnak (col-sm-4) sajat gutter-paddingje van --
   ez okozza, hogy a mezo nem er ki pontosan az oldal jobb szeleig desktopon,
   es balra "arva" margot hagy mobilon. Nullazzuk kifejezetten csak ennel a
   kereso-oszlopnal, a tobbi .col-ot nem erinti. */
#connectiniDealerList .row:has(> .col > .js_search_list){ margin-right:0 !important; }
#connectiniDealerList .row > .col:has(> .js_search_list){ padding-right:0 !important; }
/* A ".slide-content > div{padding-right:50px}" (site.css alapszabaly) csak a
   slide_event_log fulnel volt nullazva -- ezert nezett ki jol ELSORE csak ott.
   Ugyanezt most kifejezetten a kereso-sort tartalmazo containerre is
   alkalmazzuk a masik ket fulnel, a tobbi direct-child divjuket (lista,
   tablehead) nem erintve. */
#connectiniDealerList .slide_with_dtc_only > .container:has(.js_search_list),
#connectiniDealerList .slide_with_all > .container:has(.js_search_list),
#connectiniDealerList .slide_with_garage_requests > .container:has(.js_search_list){
    padding-right:0 !important;
}

/* Mobile only */
@media (max-width: 640px) {


	/*.col-3, .col-4, .col-5, .col-6, .col-7, .col-8 { width: 100%; }*/
	.flex { flex-direction: column; align-items: center; gap: 20px; }
	section .container { padding: 0 20px; }
	a.logo img { width:100%; height: auto; }
	/* .show-menu { position: fixed; top: 0; right: 0; } */
	.show-menu img { max-width: none !important; width: auto !important; height: auto !important; }
	.outer-nav .container { width:100vw; }
	.outer-nav li a { font-size: var(--title4); line-height: 100%; }
	.outer-nav li.mobile-lang-row-wrap { margin-top: unset; }
	.outer-nav li.mobile-lang-row-wrap .mobile-lang-row { font-size: var(--title4) !important; }


	.intro { padding: 30px 0 50px; }
		.intro h2 { margin: 0 0 30px; }
		.intro h2 b { font-size: var(--title2); line-height: 100%; margin: 10px 0; display: block; }
		.intro .col-6 h2 + p + img { width: 90% !important; position: relative !important; left: 0 !important; margin: -30px 0 30px; }
		.intro .button { margin: 10px auto; }
		.intro .col-6 img.whitecar { transform: scale(1.05); }
		.intro .hungary { margin: 30px auto 0; flex-direction: column; gap: 20px; }
	.middleboxes { padding: 100px 0; }
		.yellowbox { margin: 50px 10px; }
	.threecol { padding: 30px 15px; }
		.services h2 { font-size: var(--title3); text-align: center; }
		.threecol .col-5 img { width: 150% !important; margin: 0 0 30px -48%; position: relative !important; }
		.boxes { flex-direction: column; }
		.box { width: 100%; }
	.slide-controls, .slide-alt-controls { flex-direction: column; gap: 30px; padding: 30px 0; }
	.slide-content { flex-direction: column; }
		.slide-content > div { padding-right: 0; text-align: center; }
		.slide-content > div img { margin: 30px auto 20px; }
		.services h3 { margin-top: 0; }
	.twelve { padding: 30px 0; }
		.yellowcircle { position: relative; margin: 0 auto -30px; }
		.greybox { padding: 50px 30px; margin-left: 0; text-align: center; }
			.greybox p { margin: 0 0 30px; width: 100%; }
			.greybox + img { left: 0; position: relative !important; margin: 0 auto; display: table; }
			.greybox + img + p { width: 100%; padding: 0 20px 0; }
	.headbox h1 { font-size: var(--title3); padding: 0 30px; }
	.loginbox .container { padding: 100px 20px; align-items: flex-start; }
		.loginbox p a { color: var(--yellow); font-weight: bold; display: block; }
	.tabs.slide-controls, .tabs.slide-alt-controls { flex-direction: row; }
		.tab { width: 54px !important; height: 45px; overflow: hidden; padding: 10px !important; font-size: 0px; background-position: 16px center; }
	.adminslides .slide-content, .userlist .slide-content { padding: 20px; }
		.adminslides .tablehead { display: none; }
		.tablerow { flex-direction: column; align-items: flex-start; position: relative; padding: 50px 15px 5px !important; }
		.tablerow h4, .tablerow p { width: 100% !important; text-align: left; padding: 5px 0; }
		.tablerow h4 { padding-left: 20px; }
		.tablerow h4:before, .tablerow p:before {
			content: attr(data-desc); color: var(--grey3); font-size: 11px; width: 90px; display: inline-block; line-height: 100%;
			}
			.tablerow p:first-child { position: absolute; top: 10px; left: 10px; }
			.tablerow p:last-child { position: absolute; top: 10px; right: 15px; width: auto !important; }
			.tablerow p:first-child:before, .tablerow p:last-child:before { display: none; }
			.tablerow.snap { padding-top: 10px !important; }
			.tablerow.details .container {  padding: 0 0 0 0; /* ööö */ }
		
	form input, form select, form button, form a.button { width: 100% !important; }
	form input[type=checkbox] { width: unset !important; }
	div.form #qr-video { width: 100%; height: auto; }

	.shop_table input[type=radio] { width: unset !important; }
	form .with-label { flex-direction: column; align-items: flex-start; width: 100%; }
	.b-camera + input { font-size: 12px; }
	.customrange { padding: 0 0 60px; }
	.customrange input { width: calc(100% + 16px) !important; }
	.buttons { flex-direction: column; display: flex; gap: 5px; align-items: flex-start; }
	.stripebox { background-image: none; }
	.abovefooter img { width: 200px; }
	footer .col { text-align: center; }
	    footer .col p > a { display: block; margin: 0 0 20px; }
	footer ul { flex-direction: column; }
		footer li a { padding-left: 0; }

	.woocommerce div.product form.cart div.quantity { float:unset }
	.autolist-connection {
		top: -48px;
		left: 25px;
	}

	/* =========================================================================
	   2026-07 -- page-dealer-list2.php REBUILD, mobil (<=640px) finomhangolas.
	   Minden szabaly #connectiniDealerList alatt, hogy mas oldalt ne erintsen.
	   ========================================================================= */

	/* a kapcsolat-pötty mobilon is normal inline folyasban marad, a fenti
	   ".autolist-connection{top:-48px;left:25px}" ezen a sortipuson nem ervenyes */

	.tablerow p a.row-edit { margin-top: -7px; }
	.tablerow p a.trash { margin-top: -8px; }

	#connectiniDealerList .tablerow[data-item-source=user] h4 .autolist-connection{
		position:static !important; top:auto !important; left:auto !important; margin-right:6px;
	}

	#connectiniDealerList .tablerow{ padding-top:16px !important; }
	#connectiniDealerList .tablerow.details .container{ padding:0 !important; }
	#connectiniDealerList .piddata-groups,
	#connectiniDealerList .contact-grid{ grid-template-columns: 1fr; }

	#connectiniDealerList .detail-actions{ gap:10px; }
	#connectiniDealerList .detail-actions .button,
	#connectiniDealerList .detail-actions a.cert-download{ min-width:150px; }	

	#connectiniDealerList .js_search_list{ float:none !important; width:100% !important; max-width:100% !important; margin:0 0 18px !important; }
	#connectiniDealerList .row > .col:has(> .js_search_list){ padding-left:0; padding-right:0; }
	#connectiniDealerList .list-toolbar{ margin-bottom:8px; }

	/* chevron: rogzitett pozicio a sor tetejen, ne "sodrodjon el" a lenti
	   tobbsoros tartalom miatt (ez csak az esemenynaplo riasztas-sorra
	   vonatkozik -- az "Osszes jarmu" chevronja mar a h4-hez van rogzitve,
	   ld. fent, igy annak nincs kulon mobil-specifikus pozicio-fixre szuksege).
	   top:14px, hogy ne csusszon ra a "Quashqai"-szeru cimsorra. */
	#connectiniDealerList .tablerow.chevron::after{ top:20px; transform:rotate(45deg); }
	#connectiniDealerList .tablerow.chevron.open::after{ transform:rotate(225deg); }

	/* az "Osszes jarmu" h4-hez rogzitett chevronja mobilon MASHOL all, mert a
	   h4 doboz itt 2 soros lett ("Rendszam" felirat fent, ertek+pötty lent) --
	   a chevronnak a FELSO (felirat) sorral kell egy magassagban maradnia,
	   nem a teljes 2-soros doboz kozepen. Itt (es csak itt, mobilon) kell a
	   h4-nek sajat padding-left-je is a chevron helyenek -- desktopon az
	   ures 6%-os akcio-cella mar biztositja ezt a helyet, mobilon viszont az
	   a cella el van rejtve. */
	#connectiniDealerList .tablerow[data-item-source=user] h4[data-desc]{ padding-left:26px; }
	#connectiniDealerList .tablerow[data-item-source=user] h4[data-desc]::after{ left:12px; top:14px; transform:rotate(45deg); }
	#connectiniDealerList .tablerow[data-item-source=user][aria-expanded=true] h4[data-desc]::after{ transform:rotate(225deg); }

	/* FONTOS: a fenti ".tablerow p:first-child/p:last-child{position:absolute}"
	   harcban all a sajat grid-elrendezesunkkel -- nullazzuk azon sortipusoknal,
	   ahol sajat racsot hasznalunk */
	#connectiniDealerList .tablerow[data-item-source=user] > p,
	#connectiniDealerList .tablerow[data-item-source=user] > h4,
	#connectiniDealerList .tablerow.snap.prototype > p,
	#connectiniDealerList .tablerow.snap[data-did] > p,
	#connectiniDealerList #serviceAggregateAlarm .tablerow > p{
		position: static !important;
	}

	/* 1) "Osszes jarmu" / "Csak DTC" fosor: 2 oszlop. A rejtett cellak (akcio,
	   Allapot, ures kuka) utan a maradek 4 mezo (rendszam, tipus, datum,
	   alvazszam) magatol pontosan 2x2 racsba rendezodik. Egyseges 16px
	   padding mindenhol -- a chevron helyet mar a h4 SAJAT padding-left-je
	   adja (ld. fent), a sornak magának nem kell extra bal terkozt tartania. */
	#connectiniDealerList .tablerow[data-item-source=user]{
		display:grid; grid-template-columns:1fr 1fr; column-gap:16px; row-gap:14px;
		padding:16px !important; align-items:start;
	}
	#connectiniDealerList .tablerow[data-item-source=user] > h4,
	#connectiniDealerList .tablerow[data-item-source=user] > p{ width:100% !important; margin:0; padding:0 !important; }
	#connectiniDealerList .tablerow[data-item-source=user] > h4:before,
	#connectiniDealerList .tablerow[data-item-source=user] > p:before{ display:block; width:auto; margin:0 0 3px; position:static; }
	#connectiniDealerList .tablerow[data-item-source=user] > p:first-child{ display:none; }
	#connectiniDealerList .tablerow[data-item-source=user] > p:nth-child(6){ display:none; }
	#connectiniDealerList .tablerow[data-item-source=user] > p:last-child{ display:none; }

	/* 2) DTC snap-sor: Hibakod+Leiras egy sorban, Datum+Visszajelzes a
	   kovetkezoben. Ugyanaz a 16px padding, mint a jarmu-fosornal, es
	   ugyanaz az align-items:start -- igy a "Leiras" label pontosan olyan
	   magasan kezdodik, mint a "Hibakod" mellette, es a fenti sor "Gyarto"/
	   "Alvazszam" felirataival is konzisztens a sor teteje. */
	#connectiniDealerList .tablerow.snap.prototype,
	#connectiniDealerList .tablerow.snap[data-did]{
		display:grid; grid-template-columns:1fr 1fr; column-gap:16px; row-gap:14px;
		padding:16px !important; align-items:start;
	}
	#connectiniDealerList .tablerow.snap.prototype > p,
	#connectiniDealerList .tablerow.snap[data-did] > p{ width:100% !important; margin:0; padding:0 !important; align-self:start; }
	#connectiniDealerList .tablerow.snap.prototype > p:before,
	#connectiniDealerList .tablerow.snap[data-did] > p:before{ display:block; width:auto; margin:0 0 3px; position:static; }
	#connectiniDealerList .tablerow.snap.prototype > p:first-child,
	#connectiniDealerList .tablerow.snap[data-did] > p:first-child{ display:none; }

	/* 3) Esemenynaplo riasztas-sor: a chevronos elso sor 1-gyel TOBB sort kap
	   (sajat Modell/Tulaj sor fent), mint a belole nyilo folytatasok. Esemeny+
	   Erzekeles egy sorban, ikonnal felirat helyett; Mert ertek/DTC leiras
	   alatta, sajat teljes szelessegu soraban. */
	#connectiniDealerList #serviceAggregateAlarm .tablerow{
		display:grid; grid-template-columns:1fr 1fr; column-gap:12px; row-gap:8px; padding:16px !important;
	}
	#connectiniDealerList #serviceAggregateAlarm .tablerow > p{ width:100% !important; margin:0; padding:0 !important; }
	#connectiniDealerList #serviceAggregateAlarm .tablerow:not(.snap) > p:nth-child(1){ grid-column:1 / -1; grid-row:1; padding-left:20px !important; }
	#connectiniDealerList #serviceAggregateAlarm .tablerow:not(.snap) > p:nth-child(2){ grid-column:1; grid-row:2; }
	#connectiniDealerList #serviceAggregateAlarm .tablerow:not(.snap) > p:nth-child(4){ grid-column:2; grid-row:2; }
	#connectiniDealerList #serviceAggregateAlarm .tablerow:not(.snap) > p:nth-child(3){ grid-column:1 / -1; grid-row:3; }
	#connectiniDealerList #serviceAggregateAlarm .tablerow.snap > p:nth-child(1){ display:none; }
	#connectiniDealerList #serviceAggregateAlarm .tablerow.snap > p:nth-child(2){ grid-column:1; grid-row:1; }
	#connectiniDealerList #serviceAggregateAlarm .tablerow.snap > p:nth-child(4){ grid-column:2; grid-row:1; }
	#connectiniDealerList #serviceAggregateAlarm .tablerow.snap > p:nth-child(3){ grid-column:1 / -1; grid-row:2; }
	#connectiniDealerList #serviceAggregateAlarm .tablerow > p:nth-child(2):before{
		content:""; display:inline-block; width:13px; height:13px; margin-right:6px; vertical-align:-2px;
		background:no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23707070' d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3l-128 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z'/%3E%3C/svg%3E");
	}
	#connectiniDealerList #serviceAggregateAlarm .tablerow > p:nth-child(4):before{
		content:""; display:inline-block; width:13px; height:13px; margin-right:6px; vertical-align:-2px;
		background:no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23707070' stroke-width='32' d='M256 56a200 200 0 1 0 0 400 200 200 0 1 0 0-400z'/%3E%3Cpolyline points='256,120 256,256 340,300' fill='none' stroke='%23707070' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}

}

/* WooCommerce képfelülírás elleni védelem -- a .woocommerce-page body class
   esetén a woocommerce-layout.css minden img-re ráhúz max-width:100%/height:auto-t,
   ami a logót és a hamburgert is érinti; ezek explicit felülírása: */
a.logo img,
.show-menu img {
	/* max-width: none !important; */
	/* width: auto !important; */
	/*height: auto !important; */
}

/* WooCommerce gombok border-radius visszaállítása az upe-blocks.css
   és wc-blocks.css felülírásai ellen; mivel ezek a footer előtt töltődnek
   be és a site.css-t a footerbe enqueuoljuk, ez a szabály győz: */
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button {
	border-radius: var(--btn-radius, 6px) !important;
}

/* Portrait mobile */

@media screen and (max-height: 400px) {
    .outer-nav { overflow-y: auto; }
	.outer-nav .container { padding-top:0; height: 200vh; }
	.outer-nav-userbox { display:none }
	.outer-nav li.mobile-lang-row-wrap { margin-top: unset }
}

/* end WEB site.css */