@import "../config/config.less";

@success-color: @theme-color;
@info-color: #3454B4;
@required-color: @error-color;
@theme-color-2: #2a5ba5;

// #f4cac9 - fejléc gomb háttér
// #db4e49 - fejléc háttér
// #dedede - szlogen háttér

.smartbill {
	.box-sizing(border-box);
	color: #393939;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 14px;
	margin: 0;

	.fejlec-1 {
		background-color: #393939;
		color: #d0d0d0;
		font-size: 20px;
		padding: 7px 0 7px 0; /*top, right, bottom, left*/

		.belso {
			margin: 0 auto 0 auto; /*top, right, bottom, left*/
			max-width: 980px;
			overflow: auto;
			position: relative;

			a {
				color: #ffffff;
				text-decoration: none;

				span {
					display: inline-block;
					padding: 0 5px 0 0; /*top, right, bottom, left*/
					vertical-align: middle;
				}
				img {
					display: inline-block;
					vertical-align: middle;
				}
			}
			.bal {
				float: left;
			}
			.jobb {
				float: right;
			}
		}
	}
	.fejlec-2 {
		background-color: #db4e49;
		color: #ffffff;
		padding: 0 0 0 0; /*top, right, bottom, left*/

		.belso {
			margin: 0 auto 0 auto; /*top, right, bottom, left*/
			max-width: 980px;
			overflow: auto;
			position: relative;
			text-align: center;
			img {
				display: inline-block;
			}
			div {
				display: inline-block;
				padding: 0 0 0 10px; /*top, right, bottom, left*/
			}
			h1 {
				font-size: 30px;
				font-weight: 100;
				margin: 15px auto 0 auto; /*top, right, bottom, left*/
			}
			h3 {
				font-size: 16px;
				font-weight: 400;
				margin: 10px auto 15px auto; /*top, right, bottom, left*/
			}
		}
	}

	.lablec {
		background-color: #393939;
		color: #d0d0d0;
		padding: 2vw 0 2vw 0; /*top, right, bottom, left*/
		width: 100%;

		.belso {
			display: table;
			margin: 0 auto 0 auto; /*top, right, bottom, left*/
			max-width: 980px;

			.bal {
				display: table-cell;
				padding: 0 0.5vw 0 0.5vw; /*top, right, bottom, left*/
				text-align: center;
				vertical-align: top;
				width: 75%;

				.menu {
					color: #db4e49;
					display: block;
					list-style-type: none;
					margin: 0 0 30px 0; /*top, right, bottom, left*/
					padding: 0 0 0 0; /*top, right, bottom, left*/

					li:first-of-type {
						border-left: none;
					}
					li {
						border-left: 1px solid #db4e49;
						cursor: pointer;
						display: inline-block;
						line-height: 24px;
						padding: 0 4px 0 4px; /*top, right, bottom, left*/
						text-transform: uppercase;
						vertical-align: top;
						a {
							color: #db4e49;
							display: inline-block;
							margin: auto;
							text-decoration: none;
						}
					}
				}
			}
			.jobb {
				display: table-cell;
				vertical-align: top;

				.doboz {
					border: 1px solid #db4e49;
					margin: 0 0.5vw 0 0.5vw 0; /*top, right, bottom, left*/
					padding: 1vw; /*top, right, bottom, left*/

					div {
						display: table-row;

						img {
							display: table-cell;
							vertical-align: middle;
						}
						p {
							display: table-cell;
							padding: 0 0 15px 5px; /*top, right, bottom, left*/
							vertical-align: middle;
						}
						a {
							color: #d0d0d0;
						}
					}
				}
			}
		}
	}

	.e-uszi-tartalom {
		/*.bg-linear-gradient2 (to bottom, #ffffff, #d0d0d0);*/
		background-color: #fff;
		padding: 10px 0 10px 0; /*top, right, bottom, left*/

		.belso {
			margin: 0 auto 0 auto; /*top, right, bottom, left*/
			max-width: 980px;
		}

		a {
			color: #db4e49;
		}
		a.gomb {
			border: 1px solid #db4e49;
			display: table;
			font-size: 16px;
			font-weight: 100;
			margin: 10px auto 10px auto; /*top, right, bottom, left*/
			padding: 10px 13px 10px 13px; /*top, right, bottom, left*/
			text-decoration: none;
		}

		ul {
			list-style-image: url('img/smartbill/menu_icon_red_mini.png');
			li {
				padding: 5px 0 5px 0; /*top, right, bottom, left*/
			}
		}

		h2 {
			color: #db4e49;
			font-weight: 100;
		}
		h2.center {
			text-align: center;
		}

		h5 {
			font-size: 14px;
			font-weight: 100;
			margin: 5px auto 5px auto; /*top, right, bottom, left*/
			text-decoration: underline;
		}

		table.ugyfelek {
			border-collapse: separate;
			table-layout: fixed;
			tr {
				td {
					border: 1px solid #bcbcbc;
					font-size: 12px;
					padding: 15px; /*top, right, bottom, left*/
					img {
						display: block;
						margin: 5px auto 20px auto; /*top, right, bottom, left*/
						text-align: center;
						width: 100%;
					}
					span {
						color: #db4e49;
						display: block;
						margin: 0 auto 5px auto; /*top, right, bottom, left*/
						text-align: center;
					}
					a {
						display: block;
						text-align: center;
					}
				}
			}
		}
		table.partnerek {
			border-collapse: collapse;
			tr {
				td:first-of-type {
					width: 25%;
				}
				td {
					border: 1px solid #bcbcbc;
					font-size: 12px;
					padding: 15px; /*top, right, bottom, left*/
					img {
						display: block;
						margin: 5px auto 5px auto; /*top, right, bottom, left*/
						max-width: 100%;
						text-align: center;
						vertical-align: middle;
					}
					a {
						display: block;
						text-align: left;
					}
				}
			}
		}

		.szamlazz_velunk, .kata_vallalkozoknak, .szamlazo_szoftver, .kozosseg, .dijak, .akcio, .ajanlatok, .szamlazoval_uj_ugyfelet, .online-megrendelo {
			#e-uszi-headline {
				display: none;
			}
		}
		.euszi-content.szamlazz_velunk {
			.oldal {
				.tartalom {
					display: table;
					padding: 1vw 1vw 1vw 1vw; /*top, right, bottom, left*/
					.kozep {
						text-align: center;

						h2 {
							color: #393939;
						}
						h3 {
							color: #db4e49;
						}
					}
					.bal {
						display: table-cell;
						padding: 1vw 1vw 1vw 1vw; /*top, right, bottom, left*/
						width: 20%;

						h2 {
							.box-sizing(border-box);
							font-size: 25px;
							font-weight: bold;
							text-align: center;
						}

						.telepites {
							display: block;
							padding: 0 50% 0 0; /*top, right, bottom, left*/
							width: 100%;
						}
						.perc {
							display: block;
							padding: 0 0 0 30%; /*top, right, bottom, left*/
							width: 100%;
						}
						.inline, img {
							display: inline-block;
							vertical-align: middle;
						}

						p {
							color: #db4e49;
							text-align: center;
						}
					}
					.jobb {
						background-color: #ffffff;
						display: table-cell;
						padding: 1vw 1vw 1vw 1vw; /*top, right, bottom, left*/
					}
					.kiemelt {
						color: #db4e49;
					}
					.kiemelt_1 {
						color: #db4e49;
						font-size: 1.5em;
						font-weight: bold;
						text-align: center;
					}
					.kiemelt_2 {
						color: #db4e49;
						font-size: 1.2em;
						font-weight: bold;
					}
					.tablazat_1 {
						tr {
							td {
								img {
									border: none;
									height: 1.2em;
								}
							}
						}
					}

					.tablazat_2 {
						border-collapse: collapse;
						margin: 30px 0 30px 0; /*top, right, bottom, left*/
						table-layout: fixed;
						tr {
							td {
								border: none;
								color: #757575;
								font-size: 12px;
								text-align: center;
								width: 100%;

								img {
									border: none;
									margin: 10px;
									padding: 10px;
								}

								ul {
									text-align: left;
								}
							}
						}
						tr.kiemelt_3 {
							td {
								color: #db4e49;
							}
						}
						tr.kiemelt_4 {
							td {
								color: #db4e49;
								font-weight: bold;
							}
						}
					}

					img {
						max-width: 100%;
					}
				}
				.kiemelt_5 {
					color: #db4e49;
					font-size: 1.2em;
					font-weight: bold;
					text-align: left;
				}
			}
		}
		.euszi-content.szamlazo_szoftver
		, .euszi-content.szamlazz_velunk
		, .euszi-content.kata_vallalkozoknak
		, .euszi-content.kozosseg
		, .euszi-content.ajanlatok
		, .euszi-content.szamlazoval_uj_ugyfelet
		, .euszi-content.impresszum
		, .euszi-content.adatvedelmi_tajekoztato
		, .euszi-content.aszf
		, .euszi-content.szamlazo_kapcsolat {
			.oldal {
				.tartalom {
					display: block;
					padding: 1vw 0 1vw 0; /*top, right, bottom, left*/
					.belso {
						background-color: #ffffff;
						display: block;
						padding: 1vw 1vw 1vw 1vw; /*top, right, bottom, left*/
					}
					div.kiemelt {
						font-weight: bold;
					}
				}
			}
		}
		.euszi-content.kata_vallalkozoknak {
			ol {
				margin-top: 30px;
				li {
					color: #db4e49;
					padding: 0.2vw 0.1vw 0.2vw 0.1vw; /*top, right, bottom, left*/
					span {
						color: #393939;
					}
				}
			}
			p {
				line-height: 1.5;
				margin: 1vw auto 1vw auto; /*top, right, bottom, left*/
				text-align: justify;
			}
			.kiemelt_1 {
				color: #db4e49;
				font-weight: bold;
			}
			.kiemelt_2 {
				color: #db4e49;
			}
			.kiemelt_3 {
				font-size: 1.30em;
			}
			.kiemelt_4 {
				color: #db4e49;
			}
			.kiemelt_5 {
				color: #db4e49;
				font-size: 1.30em;
			}
			.kozep {
				text-align: center;
			}

			table {
				border-collapse: collapse;
				margin: 30px 0 30px 0; /*top, right, bottom, left*/
				table-layout: fixed;
				tr {
					td {
						border: none;
						color: #757575;
						font-size: 12px;
						text-align: center;
						width: 100%;

						img {
							border: none;
							margin: 10px;
							padding: 10px;
						}
					}
				}
			}
			img {
				max-width: 100%;
			}
			.blokk {
				margin: 40px 0 40px 0; /*top, right, bottom, left*/
			}
			.bottom {
				text-align: center;

				div {
					margin: 30px 0 30px 0; /*top, right, bottom, left*/
				}
			}
		}
		.euszi-content.szamlazo_szoftver {
			.kozep {
				padding: 10px 0 10px 0; /*top, right, bottom, left*/
				text-align: center;
			}
			.bal {
				display: inline-block;
				max-width: 35%;
				vertical-align: top;
				img {
					width: 100%;
				}
			}
			.jobb {
				display: inline-block;
				max-width: 65%;
				vertical-align: top;
			}
			h3 {
				background-color: #ec7672;
				color: #ffffff;
				padding: 7px 5px 7px 5px; /*top, right, bottom, left*/
				margin: 15px 0 3px 0; /*top, right, bottom, left*/
			}
			table {
				border-collapse: collapse;
				margin: 0 0 30px 0; /*top, right, bottom, left*/
				table-layout: fixed;
				tr {
					td {
						border: none;
						color: #757575;
						font-size: 12px;
						text-align: center;
						width: 100%;

						img {
							border: none;
							margin: 10px;
							padding: 10px;
						}
					}
				}
				tr.kiemelt_1 {
					td {
						color: #db4e49;
						font-weight: bold;
					}
				}
			}
		}
		.euszi-content.dijak #e-uszi-content {
			.oldal {
				.tartalom {
					display: block;
					padding: 1vw 0 1vw 0; /*top, right, bottom, left*/
					.belso {
						background-color: #ffffff;
						display: block;
						padding: 1vw 1vw 1vw 1vw; /*top, right, bottom, left*/

						h2 {
							background-color: #ec7672;
							color: #ffffff;
							padding: 7px 5px 7px 5px; /*top, right, bottom, left*/
						}

						table.tablazat_1 {
							border-collapse: collapse;
							table-layout: fixed;
							width: 100%;
							th {
								background-color: #db4e49;
								border: 1px solid #bcbcbc;
								color: #ffffff;
								padding: 5px; /*top, right, bottom, left*/
								span {
									display: block;
									font-weight: 100;
									text-align: center;
								}
								span.kiemelt {
									font-style: italic;
									font-weight: bold;
								}
							}
							td {
								padding: 5px 5px 10px 5px; /*top, right, bottom, left*/
								.megjegyzes {
									font-size: small;
									font-style: italic;
									text-align: left;
								}
							}
							td:nth-of-type(2) {
								min-width: 230px;
								text-align: center;
								width: 230px;
							}
							td.igen {
								background-image: url('img/smartbill/jelol_be_icon.png');
								background-position: center;
								background-repeat: no-repeat;
							}
						}
						table.tablazat_1.arak {
							td:nth-of-type(2) {
								text-align: right;
							}
						}
						.kiemelt_1 {
							color: #db4e49;
							font-weight: bold;
						}
						.kiemelt_2 {
							color: #db4e49;
						}
						.megjegyzes {
							font-style: italic;
							text-align: center;
						}
						.doboz {
							border: none;
							font-size: 1.2em;
							font-weight: bold;
							padding: 5px 5px 5px 5px; /*top, right, bottom, left*/
						}
						.megrendeles {
							margin: 5px auto 10px auto; /*top, right, bottom, left*/
							img {
								display: block;
								margin: 5px auto 5px auto; /*top, right, bottom, left*/
							}
							button {
								display: block;
								margin: 0 auto 0 auto; /*top, right, bottom, left*/
							}
						}
						.center {
							margin: 20px auto 20px auto; /*top, right, bottom, left*/
							text-align: center;
						}
						.long {
							width: auto;
						}
					}
				}
			}
		}
		.euszi-content.akcio {
			.oldal {
				.tartalom {
					display: block;
					padding: 1vw 0 1vw 0; /*top, right, bottom, left*/
					.belso {
						background-color: #ffffff;
						display: block;
						padding: 1vw 1vw 1vw 1vw; /*top, right, bottom, left*/
						h1 {
							color: #db4e49;
							font-weight: normal;
						}
						p {
							margin: 5px auto 5px auto; /*top, right, bottom, left*/
						}
						.center {
							margin: 20px auto 20px auto; /*top, right, bottom, left*/
							text-align: center;
						}
						.kerdesek {
							color: #595959;
						}
						.kiemelt_1 {
							font-weight: bold;
						}
						.kiemelt_2 {
							font-size: 16px;
						}
						.kiemelt_3 {
							color: #db4e49;
							font-size: 16px;
							font-weight: bold;
						}
						.kiemelt_4 {
							color: #db4e49;
						}
						.kiemelt_5 {
							font-size: 18px;
						}
						.kiemelt_6 {
							color: #db4e49;
							font-size: 17px;
						}
						a {
							font-weight: bold;
						}
						.nagy_1 {
							font-size: 18px;
						}
						.line_1 {
							width: 100%;
							height: 2px;
							background-color: #db4e49;
						}
						.sortores {
							display: block;
						}
					}
				}
			}
		}
		.euszi-content.kata_feltetelek_reszletes_informacioi {
			.tartalom {
				display: block;
				padding: 1vw 0 1vw 0; /*top, right, bottom, left*/
				.belso {
					h3 {
						color: #595959;
						.betujel {
							color: #000000;
						}
					}
					p {
						text-align: justify;
					}
				}
			}
		}
		.euszi-content.adatvedelmi_tajekoztato, .euszi-content.aszf {
			h1, h2, h3 {
				color: #db4e49;
			}
		}
		.euszi-content.szamlazo_kapcsolat {
			a.gomb {
				margin: 10px 0 10px 0; /*top, right, bottom, left*/
			}
		}
		.euszi-content.balos {
			.oldal {
				.tartalom {
					display: table;
					padding: 1vw 1vw 1vw 1vw; /*top, right, bottom, left*/
					.bal {
						background-color: #ffffff;
						display: table-cell;
						padding: 1vw 1vw 1vw 1vw; /*top, right, bottom, left*/
					}
					.jobb {
						display: table-cell;
						width: 20%;
					}
				}
			}
		}
		.euszi-content.bejelentkezes {
			.box-sizing('border-box');
			background-color: #f5f5f5;
			border: 1px solid #f5f5f5;
			.border-radius(0);
			display: block;
			margin: 50px auto;
			min-width: 340px;
			padding: 30px;
			width: 340px;

			h2 {
				color: #393939;
				font-size: 30px;
				text-align: center;
			}

			ul {
				list-style-image: none;
				list-style-type: none;

				label {
					display: inline-block;
					padding: 7px 0 !important;  /*top-bottom right-left*/
					width: 120px;
				}
				#ldap_username-label {
					display: none;
				}
				#ldap_password-label {
					display: none;
				}
				input[type=text], input[type=password] {
					width: 250px;
				}
				input[name=ldap_username] {
					background-image: none;
					background-repeat: no-repeat;
					width: 100%;
				}
				input[name=ldap_password] {
					background-image: none;
					background-repeat: no-repeat;
					width: 100%;
				}
				a.password_recovery {
					display: block;
					padding-left: 10px;
				}
				button {
					width: 100%;
				}
			}
		}
		#e-uszi-headline {
			.countdown-row {
				display: inline-block;
				text-align: center;
			}
			.countdown-amount {
				margin-right: 5px;
			}
			#logout_countdown {
				.bg-linear-gradient2 (top, lighten(#006400, 15%), #006400);
				border-color: #006400 #006400 lighten(#006400, 10%);
				display: inline-block;
				.e-ugyfelszolgalat-button();
				margin-bottom: 10px;
				margin-right: 0;
			}
			#logout_countdown.highlight-1 {
				.bg-linear-gradient2 (top, lighten(#FF8C00, 15%), #FF8C00);
				border-color: #FF8C00 #FF8C00 lighten(#FF8C00, 10%);
			}
			#logout_countdown.highlight-2 {
				.bg-linear-gradient2 (top, lighten(#990000, 15%), #990000);
				border-color: #990000 #990000 lighten(#990000, 10%);
			}
			#logout_countdown:hover {
				opacity: 0.8;
			}
			.left {
				float: left;
			}
			.right {
				float: right;
				text-align: right;
			}
			.clear {
				clear: both;
			}

			@openExoColor: #a7ca59;
			.openExo {
				.bg-linear-gradient2 (top, @openExoColor, darken(@openExoColor, 10%));
				.border-radius (25px);
				.box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset);
				border-color: @openExoColor @openExoColor lighten(@openExoColor, 20%);
				border-style: solid;
				border-width: 1px;
				color: #fff;
				cursor: pointer;
				display: inline-block;
				float: right;
				font-family: @fontfamily;
				font-size: @fontsize-s;
				font-weight: bold;
				padding: 2px 10px;
				text-decoration: none;
				text-shadow: 1px 1px #777777;
			}
			.openExo:hover {
				.bg-linear-gradient2 (top, lighten(@openExoColor, 10%), @openExoColor);
			}
		}
		#e-uszi-content {
			input[type=button].icon16, button.icon16 {
				.border-radius (0px);
				padding: 0;
				border: 0;
				width: 16px;
				height: 16px;
				margin-left: 5px;
				margin-right: 5px;
				background-color: transparent;
			}
			input[type=button].icon16.xml {
				background: url("img/download.jpg") no-repeat;
			}
			input[type=button].icon16.pdf {
				background: url("img/list.png") no-repeat;
			}
			input[type=button].icon16.bankkartyas_fizetes {
				background: url("img/Credit_cards.png") no-repeat;
			}
			input[type=button].icon16.szlainfo {
				background: url("img/invoice-info.png") no-repeat;
			}
			button.icon16.details {
				background: url("img/details.png") no-repeat;
			}
			.grid {
				height: 500px;
				font-size: @fontsize-s;
				margin-bottom: 7px;
				width: 100%;
			}
			.tetelek, .folyoszamla, .grid {
				.slick-header.ui-state-default {
					background-image: none;
					border-bottom-width: 0;
					border-left-width: 0;
					border-right-width: 0;
					.slick-header-columns {
						background-color: #f3f8fc;
						background-image: none;
						border-bottom: 1px solid #669cbe;
						.slick-header-column {
							background-color: #f3f8fc;
							background-image: none;
							border-color: silver;
							border-style: none solid none none;
							border-width: 0 1px 0 0;
							font-weight: bold;
						}
					}
				}
				.slick-cell.center {
					text-align: center;
				}
				.slick-cell {
					border-style: solid solid solid solid;
				}
			}
			.grid-canvas {
				overflow-x: hidden;
			}
			table.name.horizontal {
				margin-bottom: 10px;
				width: 100%;
				tr {
					td {
						height: auto;
						padding: 2px;
						vertical-align: top;
						label, input {
							width: 100%;
						}
					}
					td.titulus {
						max-width: 5em;
						min-width: 5em;
						width: 5em;
					}
				}
				tr.labels {
					text-align: center;
				}
			}
			table.address.horizontal {
				border-bottom: 1px solid #669cbe;
				margin-bottom: 20px;
				width: 100%;
				tr {
					td {
						height: auto;
						padding: 2px;
						vertical-align: top;
						label, input {
							width: 100%;
						}
						div.hazszam, div.ajto {
							white-space: nowrap;
							width: 100%;
							label {
								.box-sizing(border-box);
								max-width: 4em;
								min-width: 4em;
								width: 4em;
							}
						}
					}
					td.hazszam-input {
						width: 150px;
					}
					td.ajto-input {
						width: 100px;
					}
					td.hazszam-input, td.ajto-input {
						white-space: nowrap;
						input {
							.box-sizing(border-box);
							max-width: 4em;
							min-width: 4em;
							width: 4em;
						}
					}
					td.irsz-input, td.lepcsohaz-input, td.emelet-input {
						max-width: 4em;
						min-width: 4em;
						width: 4em;
					}
				}
				tr.labels {
					text-align: center;
				}
				tr.inputs td {
					padding-bottom: 20px;
				}
			}
			/*--------------------Szolgaltatasaim--------------------*/
			.szolgaltatasaim {

				table.email {
					margin-top: 32px;
					th, th:first-child, th:last-child {
						border: none;
						background-color: transparent;
						border-radius: 0;
						border-bottom: 1px solid #A7D8DF;
					}
					th:first-child {
						font-size: 14px;
						font-weight: normal;
					}
				}

				th {
					font-weight: normal;
					padding: 2px 10px;
					font-size: 14px;
					color: #B1B1B1;
					background-color: #F4FAFB;
					border-top: 1px solid #A7D8DF;
					border-bottom: 1px solid #A7D8DF;
				}

				table:not(.euszi_paylink, .email) th:first-child{
					font-weight: bold;
					text-align: left;
					font-size: 18px;
					color: #309CAB;
					border-left: 1px solid #A7D8DF;
					border-radius: 20px 0 0 20px;
				}

				table:not(.euszi_paylink, .email) th:last-child{
					border-right: 1px solid #A7D8DF;
					border-radius: 0 20px 20px 0;
				}


				table.email th:first-child {
					font-size: 18px;
					color: #309CAB;
				}

				tr:not(:first-child) td:not(.child) {
					border-top: 1px solid #A7D8DF;
				}

				.switch_container {
					font-family: sans-serif;
					cursor: pointer;
					font-size: 14px;
					border: 1px solid #D8D8D8;
					width: 110px;
					height: 20px;
					border-radius: 25px;
					position: relative;
					background: linear-gradient(#f7f7f7, #e2e2e2);
					margin: 0 auto;
				}
				.switch_container .dot {
					left: 0px;
					border-radius: 25px;
					height: 16px;
					width: 16px;
					background-color: #309CAB;
					z-index: 10;
					position: absolute;
					transition: ease-out 0.25s;
					border: 2px solid #ffffff;
					box-shadow: 0px 0px 2px #777;
				}
				.switch_container .dot.right {
					left:  ~"calc(100% - 20px)";
				}
				.switch_container .switch_text {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					user-select: none;
					color: #000;
					transition: ease-out 0.25s;
					color: #ccc;
					font-size: 11px;
				}
				.switch_container .switch_text.off {
					color: #000;
				}

				input[type=button], button {
					border-radius: 16px;
					font-size: 13px;
					border: 1px solid #309CAB;
					padding: 4px 10px;
					min-width: 16px;
					min-height: 16px;
					cursor: pointer;
					outline: 0;
					transition: ease-out 0.15s;
					background-color: #fff;
					width: auto;
					color: #393939;
				}

				input[type=button].online_szolg_reszletek {
					border: 1px solid #d9d9d9;
					color: #393939;
				}

				.icon16.add, .icon16.remove {
					width: 16px;
					height: 16px;
					padding: 0;
					border: 0;
					border-radius: 0;
					vertical-align: middle;
					margin: 0 4px;
				}
				.icon16.add {
					background: url("img/Add.png") no-repeat;
				}
				.icon16.remove {
					background: url("img/Remove.png") no-repeat;
				}

				input[type=button]:hover, button:hover:not(.icon16) {
					background-color: #309CAB;
					color: #fff;
				}

				input[type=button].disabled, button.disabled {
					cursor: default;
					background-color: #D8D8D8;
					color: #B1B1B1;
					border: 1px solid #D8D8D8;
				}

				input[type=button].online_szolg_reszletek:hover {
						background-color: #666666;
						color: #ffffff;
				}

				.szolg_icon {
					vertical-align: middle;
					display: inline-block;
					width: 50px;
					height: 50px;
					background-repeat: no-repeat;
					background-size: 50px;
				}
				.szolg_nev {
					vertical-align: middle;
					display: inline-block;
					margin-left: 16px;
					width: calc(~'100% - (50px + 16px)');
					input {
						display: block;
					}
				}
				.reszlet {
					display: none;
					margin: 0 64px;
					overflow: auto;
					.head {
						border-bottom: 1px solid #A7D8DF;
						color: #309CAB;
						font-weight: normal;
					}
					.content {
						padding: 0 16px;
						.box {
							display: inline-block;
							width: 50%;
							vertical-align: top;
						}
					}
					.img_container {
						overflow-x: scroll;
						white-space: nowrap;
						border: 1px solid #309CAB;
						padding: 4px;
						background: #F4FAFB;
						img {
							border: 1px solid #309CAB;
							border-radius: 0.25em;
							margin: 0 8px;
							display: inline-block;
							background: #fff;
							max-height: 300px
						}
					}
				}
				.elofizetes {
					margin-bottom: 10px;
					padding: 10px 0 0;
					.elofizetes-header {
						padding: 0 3px 3px;
						.elofizetes_info {
							width: calc(100% - 66px);
							vertical-align: middle;
							display: inline-block;
							margin-left: 16px;
							.title {
								font-weight: bold;
								margin: 0;
							}
							p, p span {
								font-size: @fontsize-m;
								margin-bottom: 5px;
							}
							display: inline-block;
							width: 70%;
							min-width: 60%;
						}
						.elofizetes_icon {
							background: url("img/DEFAULTICON.png") no-repeat;
							min-width: 48px;
							height: 48px;
							display: inline-block;
							margin-right: 7px;
							vertical-align: top;
						}
						.elofizetes_icon.ICON1 {
							background: url("img/ICON1.png") no-repeat;
						}
						.elofizetes_icon.ICON2 {
							background: url("img/ICON2.png") no-repeat;
						}
						.elofizetes_icon.ICON3 {
							background: url("img/ICON3.png") no-repeat;
						}
						.elofizetes_commands {
							text-align: right;
							display: inline-block;
							float: right;
							width: 20%;
							max-width: 30%;
						}
					}
					.euszi_accordion_button {
						background-color: #f3f8fc;
						font-size: @fontsize-s;
						padding: 5px 10px 5px 3px;
					}
				}
			}
			/*--------------------Accordion--------------------*/
			.euszi_accordion_button {
				color: #444;
				cursor: pointer;
				font-size: @fontsize-m;
				font-weight: bold;
				padding: 7px 10px 8px 2px;
				border-bottom: 1px solid #669cbe;
			 	border-top: 1px solid #669cbe;

			}
			.euszi_accordion_button * {
				color: #444;
				cursor: pointer;
				font-size: @fontsize-m;
				font-weight: bold;
				text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
			}
			div.euszi_accordion_button{
				background-color: #f3f8fc;
				margin-top: 3px;
				margin-bottom: 3px;
				border-top: 1px solid #669cbe;
				padding-right: 3px;
				padding-left: 3px;
			}
			.euszi_accordion_button .sign {
				background: url("img/accordion_closed.png") no-repeat 0 0;
				width: 13px;
				height: 13px;
				float: right;
			}
			.myActive .sign {
				background: url("img/accordion_opened.png") no-repeat 0 0;
			}
			#paylink_info_content .euszi_accordion_content {
				border: 1px dotted #669cbe;
				border-top: none;
				padding: 16px;
			}
			/*--------------------Űrlap--------------------*/
			.euszi_urlap, .result {
				ul {
					list-style-type: none;
					padding: 0;
					li {
						display: table-row;
						label, select, input {
							display: table-cell;
							margin-left: 0;
						}
						label {
							padding-right: 7px;
						}
						select {
							width: auto;
						}
					}
				}
				label {
					display: block;
					margin-left: 5px;
				}
			}
			input.rovid {
				width: 5em;
			}
			p.felkover {
				color: #505050;
				font-size: @fontsize-s;
				font-weight: bold;
				text-transform: uppercase;
				border-bottom: 2px solid #505050;
				margin-bottom: 5px;
				margin-top: 5px;
			}
			/*--------------------Táblázat--------------------*/
			td {
				padding: 5px;
				vertical-align: middle;
			}
			table.fooldal {
				text-align: left;
			}
			.teljes_azonosito {
				word-wrap: break-word;
				max-width: 90px;
			}
			table, tbody {
				vertical-align: middle;
				width: 100%;
			}
			thead {
				width: 100%;
			}

			table {
				table-layout: fixed;
				border-collapse: separate;
				border-spacing: 0;
				width: 100%;
			}

			td {
				padding: 4px 10px !important;
				font-size: 14px;
				text-align: center;
			}

			.euszi_tablazat td:first-child {
				text-align: left;
			}

			table.euszi_paylink td {
				border-bottom: 1px ;
			}

			table.euszi_paylink thead {
				border-bottom: 1px solid #C0C0C0;
			}
			table.euszi_paylink th.ures {
				background: none repeat scroll 0 0 transparent;
				border-top: 0;
			}

			#paylink_info_content {
				.euszi_ok {
					background-color: #ffffff;
				}
				.error {
					background-color: #ffffff;
				}
				table {
					* {
						font-size: 11px;
					}
					tbody {
						border-top: 1px solid #C0C0C0;
						border-bottom: 1px solid #C0C0C0;
					}
					tbody.euszi_paros td.hozzarend {
						background-color: #C7E48E;
					}
					tbody.euszi_paratlan td.hozzarend {
						background-color: #EBF5D6;
					}
					th {
						font-size: 12px;
						color: #323232;
						font-weight: bold;
						padding: 7px 1px 8px;
						border-top: 0;
						border-bottom: 1px solid #669cbe;
						border-left: 1px dotted #C0C0C0;
						border-right: 1px dotted #C0C0C0;
					}
					thead tr:first-child th{
						border-top: 1px solid #669cbe;
					}
					td {
						border-left: 1px dotted #C0C0C0;
						border-right: 1px dotted #C0C0C0;
						border-bottom: 1px dotted #C0C0C0;
					}
					tbody:nth-child(even) td {
						background-color: #F4FAFB;
					}
				}
			}
		}
		/*--------------------Fejléc--------------------*/
		#e-uszi-headline {
			margin-bottom: 5px;
			.info {
				background: transparent;
				border: none;
				position: absolute;
				font-weight: bold;
				top: 10px;
				padding: 0;
				right: 30px;
				text-align: right;
				.last_login {
					display: inline-block;
					font-size: @fontsize-s;
					vertical-align: middle;
				}
				img.logout {
					display: none;
				}
			}
			.left {
				border: none;
			}
			.right {
				float: right;
				padding-top: 3px;
				text-align: right;
				.subscriber_code {
					font-weight: bold;
				}
			}
			.countdown-row {
				display: inline-block;
				text-align: center;
			}
			.countdown-amount {
				margin-right: 5px;
			}
			#logout_countdown {
				cursor: pointer;
				display: inline-block;
				margin-right: 0;
			}
			#logout_countdown.highlight-1 {
				color: #FF8C00;
			}
			#logout_countdown.highlight-2 {
				color: #990000;
			}
			#logout_countdown:hover {
				opacity: 0.8;
			}
		}
	}
}

.ui-dialog.szlainfo {
	#e-uszi-szamlafejlec {
		border-bottom: 1px solid #669cbe;
		margin-bottom: 25px;
		padding-bottom: 10px;
		.szamla-kiallitoja, .vevo-adatai, .vevo-lev {
			display: inline-block;
			vertical-align: top;
			width: 50%;
			h5 {
				font-size: @fontsize-s;
				font-weight: bold;
				margin: 5px 0;
				padding: 0;
				text-decoration: underline;
			}
			div {
				line-height: 25px;
			}
			ul {
				width: 100%;
			}
		}
		ul {
			display: inline-block;
			list-style-type: none;
			margin: 5px 0;
			padding: 0;
			width: 50%;
			li {
				display: table-row;
				line-height: 25px;
				label, span {
					display: table-cell;
				}
				label {
					padding-right: 5px;
				}
			}
		}
		ul.szamla-adatok label {
			font-weight: bold;
		}
	}
	p {
		font-weight: bold;
		margin: 10px 0 0;
		padding: 0;
	}
}

.ui-dialog.simplepay {
	p {
		text-align: justify;
	}
	label {
		display: block;

		input, span {
			display: inline-block;
			vertical-align: middle;
		}
	}
	.center {
		margin: 15px 0 30px;
		text-align: center;
	}
}

/* EXO  - TODO: remove*/
.online_megrendelo {
	* {
		font-size: @fontsize-s;
	}
	.form-info {
		color: #515256;
		font-size: @fontsize-s;
		font-weight: bold;
	}
	.urlap_tip_03.form-info {
		text-align: center;
	}
	.urlap_tip_04.form-info {
		text-align: center;
		width: 500px;
		margin: auto;
	}
	.validation {
		white-space: nowrap;
		width: 350px;
		img, label {
			display: inline-block;
			vertical-align: middle;
		}
		img {
			margin-left: 10px;
			margin-right: 10px;
		}
		label {
			padding: 0 2px;
			white-space: normal;
		}
		label.error {
			color: @error-color;
		}
	}
	#online_rendelo_tabs {
		.online_rendelo_tabs {
			display: table;
			margin: 0 auto;
			table {
				tr {
					td:first-of-type {
						padding-right: 40px;
					}
					td {
						padding: 10px 0;
						input[type=text], input[type=password], label.radio, label.checkbox {
							width: 300px;
						}
						input[type=text], input[type=password] {
							background-position: 270px center;
							background-repeat: no-repeat;
							padding-right: 30px;
						}
						input[name=nev_cegnev], input[name=iranyitoszam], input[name=telepules], input[name=utca_hazszam],
						input[name=teljes_nev], input[name=email_cim], input[name=jelszo], input[name=jelszo_ujra] {
							background-image:  none;
						}
						input[name=adoszam], input[name=telefonszam] {
							background-image:  none;
						}
						label.radio, label.checkbox {
							display: block;
						}
						.megjegyzes {
							font-size: @fontsize-xs;
						}
					}
					td.jelszo_input, td.email_cim_input {
						padding-bottom: 0;
					}
				}
			}
			h2 {
				font-size: 25px;
			}
		}
		ul {
			.border-radius(0);
			display: table;
			margin-bottom: 30px;
			padding: 0;
			white-space: nowrap;
			width: 100%;
			li {
				display: table-cell;
				font-size: @fontsize-m;
				list-style-type: none;
				text-align: center;
				text-transform: uppercase;
				width: 33%;
				span {
					.box-sizing(border-box);
					border: 1px solid #df635f;
					color: #dc5651;
					display: inline-block;
					margin: 0 10px;
					padding: 7px 0;
					vertical-align: text-top;
					width: 90%;
				}
			}
			li.active {
				span {
					border: 1px solid #c5c5c5;
					color: #464646;
				}
			}
			li:first-of-type.active {
			}
			li:last-of-type.active {
			}
		}
		.rendelo_page {
			margin: 0 auto;
		}
		.buttons {
			cursor: pointer;
			display: table;
			margin: 0 auto;
			#tovabb_01 {
				background-image: none;
			}
			#tovabb_02 {
				background-image: none;
			}
			button.vissza {
				background-image: none;
			}
			#megrendelem_03 {
				background-image: none;
			}
			.fooldalra {
				background-image: none;
			}
		}
		#kerem_a_kedv, #nem_kerem_a_kedv {
			font-weight: bold;
			vertical-align: top;
			span {
				display: inline;
				margin: 0;
				vertical-align: baseline;
			}
		}
		.elore_szamlazzuk {
			display: block;
		}
		.kata_vallalkozo {
			display: block;
		}
		.early_bird {
			display: block;
		}
		#onlinerend_02_megrendelo {
			label.checkbox {
				span {
					margin: 0;
				}
				div {
					display: inline-block;
					vertical-align: top;
					width: 275px;
					#elfogadom_a_felhaszn_felt {
						display: block;
					}
				}
			}
			td.validation.top {
				vertical-align: top;
			}
		}
		#adatkezelesi_tajekoztato {
			color: @theme-color;
			cursor: pointer;
			font-style: italic;
			text-decoration: underline;
		}
		#info_havi_eves {
			display: block;
			margin: 50px auto 35px;
		}
		#online_rendelo_tabs_04, #online_rendelo_tabs_05 {
			h2, p {
				text-align: center;
			}
		}
	}
}
.e-ugyfelszolgalat .euszi-content, .ui-dialog.eugyfelszolgalat, .e-ugyfelszolgalat .online-megrendelo {
  button.icon16.add {
		width: auto;
		padding: 8px;
		border: none;
		vertical-align: middle;
		background: url("img/Add.png") no-repeat;
   }
   button.icon16.remove {
		width: auto;
		padding: 8px;
		border: none;
		vertical-align: middle;
		background: url("img/Remove.png") no-repeat;
   }
	#euszi-infobar {
		margin-top: 10px;
		margin-bottom: 5px;
		min-height: 40px;
		border-bottom: 1px dotted #D1D1D1;
		border-top: 1px dotted #D1D1D1;
		font-weight: bold;
		padding: 3px 10px;
		.box-sizing(border-box);
		img, .msg {
			background: none repeat scroll 0 0 transparent;
			border: none;
			display: inline-block;
			font-size: @fontsize-s;
			margin: 0 5px 0 5px; /*top right bottom left*/
			vertical-align: middle;
		}
		.info {
			color: @info-color;
		}
		.success {
			color: @success-color;
		}
		.error {
			color: @error-color;
		}
	}
	span.important {
		color: #ed1c24;
	}

	input[type=text], input[type="password"], textarea, select {
		border: 1px solid #d3d2d2;
		height: auto;
		line-height: normal;
		padding: 6px 10px;
		margin-bottom: 1px;
	}
	input[type=text], input[type=password], textarea {
		outline-width: 1px !important;
	}
	input[readonly], input[disabled], input[type=text][disabled], textarea[disabled], select[disabled] {
		background-color: #FFFFFF !important;
		cursor: default !important;
		color: #AAAAAA;
	}
	input[type=button][readonly], input[type=button][disabled],
	input[type=submit][readonly], input[type=submit][disabled] {
		background-color: #D8D8D8 !important;
		border: none;
	}
	button:not(.ui-button-icon-only), button.ui-button.ui-widget.ui-button-text-only, input[type="button"], input[type="submit"] {
		background-color: #db4e49;
		background-image: none;
		border-color: #bcbcbc;
		border-style: solid;
		border-width: 1px;
		color: #f5f5f5;
		font-size: 18px;
		margin: 0px 5px 5px 0;
		padding: 8px 15px;
		width: 240px;
		.ui-button-text {
			padding: 0 5px;
		}
	}
	button:not(.ui-button-icon-only, .icon16):hover, button:not(.image, .icon16):hover, button.ui-button.ui-widget.ui-button-text-only:hover, input[type="button"]:hover, input[type="submit"]:hover {
		background-color: #aa4844;
	}
	button:not(.ui-button-icon-only)[readonly], button:not(.ui-button-icon-only)[disabled],
	button:not(.ui-button-icon-only)[readonly]:hover, button:not(.ui-button-icon-only)[disabled]:hover,
	input[type="button"][readonly], input[type="button"][disabled],
	input[type="submit"][readonly], input[type="submit"][disabled],
	input[type="button"][readonly]:hover, input[type="button"][disabled]:hover,
	input[type="submit"][readonly]:hover, input[type="submit"][disabled]:hover {
		cursor: default;
		.bg-linear-gradient2 (top, lighten(@btn-bg, 45%), lighten(@btn-bg, 40%));
		border-color: lighten(@btn-bg, 40%) lighten(@btn-bg, 40%) lighten(@btn-bg, 55%);
	}
	button.image, button.image:hover {
		background-color: transparent;
		background-repeat: no-repeat;
		border: none;
		.border-radius(0);
		cursor: pointer;
		height: 51px;
		padding: 0;
		width: 131px;
	}
	button.image.kiprobalom {
		background-image: url("img/exo/Kiprobalom.png");
	}
	button.image.megrendelem {
		background-image: url("img/exo/Megrendelem.png");
	}
	input[type="button"], input[type="submit"], input[type="checkbox"],
	input[type="image"], input[type="radio"], input[type="reset"],
	select, button {
		cursor: pointer;
	}

	label.checkbox.img {
		* {
			cursor: pointer;
		}
		input {
			display: none;
		}
		input + .img {
			background-image: url("img/exo/checkbox0.png");
			background-repeat: no-repeat;
			height: 18px;
			width: 18px;
			display: inline-block;
		}
		input:checked + .img {
			background-image: url("img/exo/checkbox1.png");
		}
	}
	label.checkbox.switch {
		* {
			cursor: pointer;
		}
		input {
			display: none;
		}
		input ~ span.status {
			background-image: url("img/exo/x.png");
			background-repeat: no-repeat;
			height: 8px;
			width: 8px;
			display: inline-block;
		}
		input ~ span.switch {
			background-image: url("img/exo/switch_off.png");
			background-repeat: no-repeat;
			height: 20px;
			width: 44px;
			display: inline-block;
		}
		input:checked ~ span.status {
			background-image: url("img/exo/pipa.png");
		}
		input:checked ~ span.switch {
			background-image: url("img/exo/switch_on.png");
		}
	}
	label.radio, label.checkbox {
		margin-right: 3px;
		white-space: nowrap;
		input, span {
			display: inline-block;
			float: none;
			margin: 3px;
			vertical-align: middle;
			white-space: normal;
		}
		div span {
			display: inline;
		}
	}
}