

/* Start:/local/components/swifts/serial.code/templates/.default/style.css?173701049910653*/
:root {
	/*--sn-container-w: 475px;*/
	--sn-container-w: 590px;
	--sn-margin: 6px;
	--sn-line-1: 144px;
	--sn-line-2-3: 35px;
	--sn-line-4-5-6: 18px;
	--sn-line-7: 66px;
	/*--sn-info-w: 274px;*/
	--sn-info-pd: 15px;
	--sn-line-speed: 800ms;
	--sn-height-line: 105px;
	--sn-height-line-2: 50px;
}
.sn-container {
	width: var(--sn-container-w);
	/*width: calc(var(--sn-container-w) + var(--sn-info-w));*/
	padding-top: var(--sn-height-line-2);
	padding-bottom: 80px;
/*	padding-right: var(--sn-info-w);*/
}
.serial-code-form-wrapper {
	display: flex;
	width: 100%;
}
.sn-search-inputs {
	display: flex;
	position: relative;
	cursor: pointer;
}
.serial-code-form.found .sn-search-inputs > li:before {
	content:"";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -9px;
	background-color: #45B0F2;
	height: 3px;
}
.sn-search-inputs > li {
	display: flex;
	align-items: center;
	position: relative;
	cursor: pointer;
}
.sn-search-inputs > li input {
	width: 100%;
	cursor: pointer;
}
.sn-search-inputs,
.serial-code-lines ul {
	list-style: none;
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
}
.serial-code-lines li:not(:last-child),
.sn-search-inputs > li:not(:last-child) {
	margin-right: 6px;
}
.sn-search-inputs input {
	border: 0;
	outline: none;
	font-size: 20px;
	text-transform: uppercase;
	font-family: Futura PT, Arial, Helvetica, sans-serif;
}
.sn-search-inputs input[readonly] {
	cursor: default;
}
.serial-code-lines li[data-type=serial],
.serial-number-input-1 {
	width: var(--sn-line-1);
}
.serial-code-lines li[data-type=version],
.serial-code-lines li[data-type=factory],
.serial-number-input-2,
.serial-number-input-3 {
	width: var(--sn-line-2-3);
}
.serial-code-lines li[data-type=year],
.serial-code-lines li[data-type=month],
.serial-code-lines li[data-type=day],
.serial-number-input-4,
.serial-number-input-5,
.serial-number-input-6 {
	width: var(--sn-line-4-5-6);
}
.serial-code-lines li[data-type=number],
.serial-number-input-7 {
	width: var(--sn-line-7);
}
.sn-headline {
	font-size: 20px;
	color: #97a4af;
	display: flex;
	align-items: center;
}
.sn-headline,
.sn-search-inputs {
	background-color: #FCFCFC;
	border: 1px solid #E1E4E9;
	border-radius: 5px;
	height: 56px;
	max-width: 410px;
	width: 100%;
	margin-right: 8px;
	padding-left: 15px;
	padding-right: 15px;
}

.sn-search-inputs.is-active input {
	background-color: #FCFCFC;
}
.sn-search-wrapper {
	height: 450px;
}
.sn-search-icon,
.sn-search-clear {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 56px;
	height: 56px;
	background-color: #45B0F2;
	border-radius: 5px;
	cursor: pointer;
}
.sn-headline:not(.is-active),
.sn-search-inputs:not(.is-active),
.sn-search-icon:not(.is-active),
.sn-search-clear:not(.is-active) {
	display: none;
}
.sn-search-icon {
	color: #fff;
}
.sn-search-icon img {
	max-width: 100%;
	max-height: 100px;
	width: 100%;
	height: 100%;
}
.serial-code-form:not(.found) .serial-number-lines {
	display: none;
}
.serial-number-input-1 .serial-number-lines {
	height: 55px;
	width: calc(var(--sn-container-w) - (var(--sn-line-1) / 2) - var(--sn-info-pd));
}
.serial-number-input-2 .serial-number-lines {
	height: var(--sn-height-line);
	width: calc(var(--sn-container-w) - var(--sn-line-1) - var(--sn-margin) - (var(--sn-line-2-3) / 2) - var(--sn-info-pd));
}
.serial-number-input-3 .serial-number-lines {
	height: calc(var(--sn-height-line) + var(--sn-height-line-2));
	width: calc(var(--sn-container-w) - var(--sn-line-1) - (var(--sn-margin) + var(--sn-line-2-3)) - var(--sn-margin) - (var(--sn-line-2-3) / 2) - var(--sn-info-pd));
}
.serial-number-input-4 .serial-number-lines {
	height: calc(var(--sn-height-line) + (var(--sn-height-line-2) * 2));
	width: calc(var(--sn-container-w) - var(--sn-line-1) - (var(--sn-margin) + var(--sn-line-2-3))*2 - var(--sn-margin) - (var(--sn-line-4-5-6) / 2) - var(--sn-info-pd));
}
.serial-number-input-5 .serial-number-lines {
	height: calc(var(--sn-height-line) + (var(--sn-height-line-2) * 3));
	width: calc(var(--sn-container-w) - var(--sn-line-1) - (var(--sn-margin) + var(--sn-line-2-3))*2 - var(--sn-margin) - (var(--sn-margin) + var(--sn-line-4-5-6)) - (var(--sn-line-4-5-6) / 2) - var(--sn-info-pd));
}
.serial-number-input-6 .serial-number-lines {
	height: calc(var(--sn-height-line) + (var(--sn-height-line-2) * 4));
	width: calc(var(--sn-container-w) - var(--sn-line-1) - (var(--sn-margin) + var(--sn-line-2-3))*2 - var(--sn-margin) - (var(--sn-margin) + var(--sn-line-4-5-6))*2 - (var(--sn-line-4-5-6) / 2) - var(--sn-info-pd));
}
.serial-number-input-7 .serial-number-lines {
	height: calc(var(--sn-height-line) + (var(--sn-height-line-2) * 5));
	width: calc(var(--sn-container-w) - var(--sn-line-1) - (var(--sn-margin) + var(--sn-line-2-3))*2 - var(--sn-margin) - (var(--sn-margin) + var(--sn-line-4-5-6))*3 - (var(--sn-line-7) / 2) - var(--sn-info-pd));
}
.serial-number-lines {
	position: absolute;
	left: calc(50% - 1px);
	top: 67px;
}
.serial-number-lines .circle,
.serial-number-lines .circle-2 {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: #45B0F2;
	display: block;
}
.serial-number-lines .line-h,
.serial-number-lines .line-w {
	background-color: #45B0F2;
	position: absolute;
	display: block;
}
.serial-code-form.found .serial-number-lines .line-w {
	animation: progress var(--sn-line-speed) ease-in var(--sn-line-speed) 1;
}
.serial-code-form.found .serial-number-lines .line-h {
	animation: progressH var(--sn-line-speed) ease-in 1;
}
.serial-code-form.found .serial-number-lines .line-w,
.serial-code-form.found .serial-number-lines .line-h {
	animation-fill-mode: forwards;
}
.serial-number-lines .line-h {
	height: 0;
	left: 0;
	width: 3px;
}
.serial-number-lines .line-w {
	width: 0;
	bottom: 0;
	height: 3px;
}
.serial-number-lines .circle {
	position: absolute;
	top: 0;
	left: -3px;
	display: none;
}
.serial-number-lines .circle-2 {
	position: absolute;
	bottom: -3px;
	right: 0;
	opacity: 0;
}
.serial-code-form.found .serial-number-lines .circle-2 {
	transition: 0s all ease-in;
	transition-delay: calc(--sn-line-speed*2);
	opacity: 1;
}
.serial-code-form.found .serial-number-lines .circle {
	display: block;
}
.serial-number-lines .result:hover {
	/*background-color: #f1f1f1;*/
}
.serial-number-lines .result {
	position: absolute;
	left: calc(100% + var(--sn-info-pd));
	bottom: -19px;
	/*width: var(--sn-info-w);*/
	display: flex;
	flex-direction: column;
	font-size: 22px;
	line-height: 22px;
	/*padding-left: 15px;*/
	cursor: default;
	white-space: nowrap;
}
.serial-code-mobile-result > ul > li span:first-child,
.serial-number-lines .result span:first-child {
	color: #9DA9B3;
}
.sn-content {
	overflow: auto;
}
.sn-ears {
	width: 100%;
}
.serial-code-form .input:not(.is-active) {
	display: none;
}
.serial-code-form .input {
	margin-right: 8px;
}
.serial-code-form .input input {
	outline: none;
	font-size: 20px;
	text-transform: uppercase;
	background-color: #FCFCFC;
	border: 1px solid #E1E4E9;
	border-radius: 5px;
	height: 56px;
	max-width: 410px;
	width: 410px;
	padding-left: 15px;
	padding-right: 15px;
	font-family: Futura PT, Arial, Helvetica, sans-serif;
}
.sn-search-icon .appeal-label__icon {
	margin: 0;
}
@keyframes progress {
	to {
		width: 100%;
	}
}
@keyframes progressH {
	to {
		height: 100%;
	}
}
.serial-code-mobile-result {
	display: none;
}
@media(max-width: 800px) {
	.sn-container #sn-search-detail-mobile.is-active {
		display: flex;
	}
	.sn-container #sn-search-detail.is-active {
		display: none;
	}
	.serial-number-lines {
		display: none;
	}
	.sn-search-inputs > li:after {
		position: absolute;
		bottom: -36px;
		left: calc(50% - 20px / 2);
	}
	.sn-search-inputs > li:after,
	.serial-code-mobile-result li:after {
		width: 20px;
		height: 20px;
		border: 1px solid #22B0F3;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 15px;
		color: #22B0F3;
	}
	.serial-code-mobile-result > ul > .serial-name:after,
	.serial-number-input-1:after {
		content: "1"
	}
	.serial-code-mobile-result > ul > .version-name:after,
	.serial-number-input-2:after {
		content: "2"
	}
	.serial-code-mobile-result > ul > .factory-name:after,
	.serial-number-input-3:after {
		content: "3"
	}
	.serial-code-mobile-result > ul > .year-name:after,
	.serial-number-input-4:after {
		content: "4"
	}
	.serial-code-mobile-result > ul > .month-name:after,
	.serial-number-input-5:after {
		content: "5"
	}
	.serial-code-mobile-result > ul > .day-name:after,
	.serial-number-input-6:after {
		content: "6"
	}
	.serial-code-mobile-result > ul > .number-name:after,
	.serial-number-input-7:after {
		content: "7"
	}
	.sn-container {
		max-width: 475px;
		width: 100%;
		padding-right: 0;
	}
	.serial-code-mobile-result > ul {
		list-style: none;
		padding-left: 0;
		margin-bottom: 0;
		margin-top: 55px;
		column-count:2;
	}
	.serial-code-mobile-result > ul > li {
		position: relative;
		padding-left: 28px;
		display: inline-block;
		margin-bottom: 10px;
	}
	.serial-code-mobile-result > ul > li:after {
		position: absolute;
		left: 0;
		top: 0;
	}
	.serial-code-mobile-result > ul > li span {
		display: block;
	}
	.serial-code-mobile-result > ul > li span {
		font-size: 18px;
		line-height: 18px;
	}
	.serial-code-form.found .serial-code-mobile-result {
		display: block;
	}
	.sn-search-wrapper {
		height: auto;
	}
}
@media(max-width: 530px) {
	:root {
		--sn-margin: 6px;
		--sn-line-1: 144px;
		--sn-line-2-3: 35px;
		--sn-line-4-5-6: 18px;
		--sn-line-7: 66px;
		--sn-info-pd: 15px;
	}
	.serial-code-mobile-result > ul {
		column-count: 1;
		display: flex;
		flex-direction: column;
	}
	.sn-search-icon, .sn-search-clear {
		width: 35px;
		height: 35px;
	}
	.serial-code-form .input input,
	.sn-headline, .sn-search-inputs {
		height: 35px;
	}
	.serial-code-form .input input,
	.sn-search-inputs input {
		font-size: 14px;
	}
	.sn-headline,
	.sn-search-inputs {
		padding-left: 5px;
		padding-right: 5px;
		width: calc(100% - 35px - 8px);
	}
	.serial-code-form .input {
		width: calc(100% - 35px - 8px);
	}
	.serial-code-form .input input {
		width: 100%;
	}
	.sn-search-inputs > li:after {
		width: 15px;
		height: 15px;
		font-size: 12px;
	}
}
#sn-search-detail {
	margin-left: 15px;
}
.sn-search-detail {
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	width: 100px;
	height: 56px;
	padding: 0 14px;
	box-shadow: none;
	font-size: 16px;
	line-height: 1;
	margin-top: auto;
	background: #22b0f3;
	border-radius: 8px;
	font-weight: 500;
}
.sn-search-detail.is-active {
	display: flex;
}
#sn-search-detail-mobile {
	display: none;
	margin-top: 20px;
}
#sn-search-clear img {
	width: 19px;
}
/* End */
/* /local/components/swifts/serial.code/templates/.default/style.css?173701049910653 */
