@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);}

/* .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: 100vh; width: 10-vw; transition: all 0.5s; }
	.outer-nav .transparent { width: 20vw; height: 100vh; }
	.outer-nav .container {
		display: flex; align-items: center; background: var(--yellow); height: 100vh; width: 80vw; z-index: 2; position: relative;
		padding-left: 10vw; max-width: 540px;
	}

.outer-nav li { list-style: none; margin: 0 0 5px; }
	.outer-nav li a { color: var(--darkgrey); font-size: var(--title3); display: inline-block; line-height: 125%; margin: 0 0 10px; }
	.outer-nav li a:after { content: ''; background: rgba(0, 0, 0, 0.5); transition: all 0.5s; display: table; height: 1px; width: 0; }
	.outer-nav li a:hover:after { width: 100%; }
body.showmenu .outer-nav { top: 0; right: 0; }
.outer-nav a.outer-nav-close { color: var(--dark1); font-size: 2rem; 
	z-index: 2000000020;
    position: absolute;
    top: 20px;
    right: 22px;
    display: block;
}

header { padding: 10px 0; z-index: 10; position: relative; }
	header .col-8 { 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; }
		.button.primary { background-color: var(--yellow); color: var(--white); margin-top:30px !important; }
		.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 }
		.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; }

.headbox { height: 300px; background-size: cover; background-position: center center; position: relative; }
	.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: 150px 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 > 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; }
	.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;}
				.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 }

		.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;}

	a.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;
	}
	.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;
		color: var(--dark1);
		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;
	}

	.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 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}

/* 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 { padding: 10px 15px; font-size: 15px; border: none; border-radius: 3px; width: 230px; outline: 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; }
	.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; }
	/* 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: 10px; border-radius: 3px; text-align: center; margin-top:1rem; margin-bottom:0; }
form .error a { background: #fff; padding: 3px; border-radius: 3px 10px; color: var(--dark2); margin-left: 10px;}

@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 ul li a:not(.button) { display: none; }
	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%; }

}

/* 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 (min-width: 641px) and (max-width: 767px) {

}

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

	.mobilehide { display: none !important; }
	/*.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 { max-width: 250px; }
	.show-menu { position: fixed; top: 0; right: 0; }
	.outer-nav li a { font-size: var(--title4); }
	.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: 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: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;
	}

}