/* uklad */
.pageWrapper {
	flex: 1;
	display: flex;
}
.info-column {
	display: flex;
	flex-direction: column;
	width: 25%;
	min-width: 400px;
	background: var(--color-a1);
}
.form-column {
	display: flex;
	flex-direction: column;
	width: 75%;
	background: #999 no-repeat center;
	background-size: cover;
}
.form-column .info-header {
	display: none;
}

/* pasek informacyjny */
.info-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	color: #222;
	width: 100%;
	padding: 2em calc(2em - 5px);
	box-sizing: border-box;
	background: none;
	border: none;
	overflow: hidden;
}
.info-header .store-logo {
	margin: 5px 10px 5px 5px;
	color: #222;
}
.info-header .store-logo .under .text {
	color: #22222280;
}
.info-header > div {
	margin: 5px;
	font-size: .9em;
}
.info-header > div  + div {
	padding-left: 10px;
	border-left: 1px solid #00000022;
}
.info-header .text {
	overflow: hidden;
}
.info-header span + span {
	margin-left: .5em;
}
.info-header .brand {
	margin: 0;
}

/* banner */
.helpBanner {
	flex: 1;
}
.helpBanner .wrapper {
	display: flex;
	flex-direction: column;
	width: calc(100% - 4em);
	height: 100%;
}
.helpBanner .content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.helpBanner section + section {
	margin-top: 20px;
	border: none;
}
.helpBanner section {
	display: block;
}
.helpBanner .text {
	color: #222;
	display: flex;
}
.helpBanner .action {
	margin: 2em 0 0 0;
}
.helpBanner .search input[type="text"] {
	flex: 1;
	width: 100%;
	margin: 0 -30px 0 0;
	padding: 0 40px 0 20px;
	border: none !important;
	border-radius: 1000px;
	outline: none;
}
.helpBanner .problems {
	align-self: flex-end;
}
.helpBanner .problems .action {
	justify-content: flex-end;
	align-items: center;
	margin-top: 4em;
}
.helpBanner .problems .graphic {
	width: 105px;
	height: 20px;
	margin-right: 4em;
}
.helpBanner .image {
	justify-content: flex-start;
	margin: 0;
	overflow: hidden;
}
.helpBanner .image img {
	max-width: 50%;
}

.helpBanner form .button {
	box-shadow: 0 5px 10px #00000044;
}
.helpBanner form .button:hover {
	box-shadow: 0 0 0 transparent;
}

.helpBanner .group-2 .button:hover {
	box-shadow: 0 5px 10px #00000044;
}
.chat-show {
	color: var(--color-b1)
}
button.chat-show {
	margin-left: 2em;
	width: 6em;
	height: 6em;
	background: rgb(var(--rgb-contrast-accent));
	-webkit-mask: url(../../../images/icons/botadd.svg) no-repeat center;
	mask: url(../../../images/icons/botadd.svg) no-repeat center;
	cursor: pointer;
}
/* formularz */
.form-column .wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.form-column .content {
	width: calc(500px + 8vw);
	max-width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: white;
	box-shadow: 5px 5px 50px #00000088;
}
.form-column form {
	padding: 2em 4vw;
	box-sizing: border-box;
}
.form-column .links {
	display: flex;
	justify-content: space-between;
	padding: 1em;
}
.form-column .links2 {
	display: none;
}
.form-column .button-link {
	--color-button: #8d48e7;

	display: inline-flex;
	align-items: stretch;
	padding: 2px;
	text-decoration: none;
}
.form-column .button-link .text {
	position: relative;
	z-index: 2;
	padding: 10px;
	line-height: 20px;
	color: var(--color-button);
	background: white;
	border: 1px solid var(--color-button);
	border-radius: 10px;
}
.form-column .button-link .icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 15px;
	padding: 0 10px 0 60px;
	margin: 0 0 0 -60px;
	font-size: 22px;
	color: white;
	background: var(--color-button);
	border-radius: 10px;
	transition: .2s;
}
.form-column .button-link:hover .icon {
	transform: translateX(10px);
}
.form-column .button-link.left {
	--color-button: var(--color-a1);
}
.form-column .button-link.left .icon {
	display: flex;
	align-items: center;
	padding: 0 60px 0 10px;
	margin: 0 -60px 0 0;
	font-size: 22px;
	color: white;
	background: var(--color-button);
	border-radius: 10px;
	transition: .2s;
}
.form-column .button-link.left:hover .icon {
	transform: translateX(-10px);
}
.form-column form h1 {
	text-align: center;
}
.form-column form h3 {
	margin: 20px 0;
	text-align: center;
	font-size: 1.2em;
	color: #444;
}
.form-column form input[type='text'],
.form-column form input[type='password'] {
	width: 100%;
	margin: 10px 0;
	padding: 10px;
	box-sizing: border-box;
	font-size: 1.5em;
	border: 2px solid #f0f0f0;
	background: white;
	transition: 0.2s;
	outline: none;
}
.form-column form input[type='text']::-webkit-input-placeholder,
.form-column form input[type='password']::-webkit-input-placeholder {
	color: #777;
}
.form-column form input[type='text']:focus,
.form-column form input[type='password']:focus,
.form-column form input[type='text']:hover,
.form-column form input[type='password']:hover {
	border: 2px solid var(--color-a1);
}

.confirmForm {
	justify-content: space-between;
	margin: 20px 0;
}
.confirmForm a {
	margin-left: 0;
}
.confirmForm button {
	padding: 1em 5em;
}
.passForgottenPage .confirmForm {
	justify-content: center;
}
.passForgottenPage .confirmForm button {
	margin: 10px 0 0 0;
}

.selectLanguage {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 2em;
}
.selectLanguage a {
	box-shadow: 1px 1px 3px rgba(0,0,0, .2);
}
.selectLanguage a + a {
	margin-left: 5px;
}

/* zapomniane haslo */
.forgottenPage form .confirmForm {
	justify-content: flex-end;
}

@media (max-width: 1180px) {
	.helpBanner .image {
		display: block;
	}
}
@media (max-width: 980px) {
	.pageWrapper {
		flex-direction: column;
	}
	.info-column {
		width: 100%;
		min-width: auto;
		order: 2;
	}
	.form-column {
		width: 100%;
		background: var(--color-a1);
		background-image: none !important;
	}
	.form-column .wrapper {
		max-width: 600px;
		margin: auto;
	}
	.info-column .info-header {
		display: none;
	}
	.form-column .info-header {
		display: flex;
		justify-content: center;
	}
	.helpBanner .content {
		align-items: stretch;
		max-width: 600px;
		margin: auto;
	}
	.helpBanner .problems {
		align-self: auto;
	}
	.helpBanner .problems .action {
		justify-content: center;
	}
	.helpBanner section {
		flex-direction: column;
		text-align: center;
	}
	.form-column .content {
		width: 100%;
		padding: 1em;
		background: none;
		box-shadow: none;
	}
	.form-column .links {
		display: none;
	}
	.form-column .links2 {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.form-column .links2 a {
		display: block;
		padding: 2px;
		color: RGB(var(--rgb-background2));
		font-size: .8em;
		border-bottom: 1px solid RGB(var(--rgb-background2));
	}
	.form-column form {
		padding: 2em 0 1em 0;
	}
	.form-column form h1,
	.form-column form h3 {
		text-align: left;
		color: #222;
	}
	.form-column form h3 span {
		display: none;
	}
	.form-column form input[type='text'],
	.form-column form input[type='password'] {
		padding: 5px 10px;
		border: none !important;
	}
	.confirmForm button:not(.normal) {
		color: RGB(var(--rgb-text));
		background: var(--color-highlight);
		padding: .5em 4em;
	}
}

@media (max-width: 490px) {
	button.chat-show {
		width: 4em;
	}
	.form-column .shop-link {
		margin: .5rem 0;
	}
	.form-column .info-header {
		justify-content: flex-start;
		padding: 0 1em;
	}
	.info-header > div + div {
		border: none;
	}
	.info-header .store-logo .under {
		margin-left: 26px;
		text-align: right;
	}
	.info-header .store-logo .under .text.first {
		display: none;
	}
	.info-header .products {
		margin-left: auto;
	}
	.form-column .links {
		align-items: flex-start;
		margin: -2em -2em 0 -2em;
		padding: 1em 0;
	}
	.form-column .button-link .text {
		padding: 2px 5px;
		border-radius: 3px;
	}
	.form-column .button-link .icon {
		border-radius: 3px;
	}
	.form-column form h1 {
		margin: 0;
	}
	.form-column form h3 {
		margin: .5rem 0;
	}
	.confirmForm {
		flex-direction: column;
		align-items: flex-end;
		margin: 0;
	}
	.confirmForm a {
		padding: 0;
		background: none;
		box-shadow: none;
	}
	.selectLanguage {
		margin: 1rem 0;
	}
	.helpBanner section {
		padding: 0;
	}
	.helpBanner .text {
		font-size: .7rem;
	}
	.helpBanner .problems {
		border-color: #22222288;
	}
	.helpBanner .problems .action {
		margin-top: 0;
	}
}