@import url('../fonts/font-awesome/css/all.css?2');
/* MAIN */
	* {
		padding: 0;
		margin: 0;
	    box-sizing: border-box;
		--color-accent: #4A596D;
		--color-accent-lighter: #566378;
		--color-link: #566378;
		--color-red: #E33C3F;
		--color-text: #000000;
		--color-text-secondary: #555555;
		--color-text-tertiary: #808896;
		--color-form-label: #555555;
		--color-secondary: #4673B6;
		--color-light-grey: #F3F3F3;
		--color-border: #D3D3D3;
		--color-input-placeholder: #ABABAB;
		--color-awaiting: #9AA2B2;

		--header-height: 8em;
	}
	html, body {
		width: 100%;
		height: 100%;
		background-color: white;
		color: var(--color-text);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.4;
		background-size: 100% 100%;
		background-attachment: fixed;
		scroll-behavior: smooth;
		font-family: 'Montserrat', sans-serif;
		margin: 0;
		padding: 0;	
		height: 100%; /* Ensures the body takes up the full height of the viewport */
	    margin: 0; /* Removes default margin */
	    overflow: hidden; /* Disables scrolling */
	}
	html, body, input, button, textarea{
		font-family: 'Montserrat', sans-serif;
		font-weight: 400;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: transparent;
		-webkit-focus-ring-color: rgba(255, 255, 255, 0.0);
		-webkit-backface-visibility: hidden;
		-webkit-font-smoothing: antialiased;
		font-smoothing: antialiased;
		-moz-osx-font-smoothing: graygauge;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	}
	input, button, textarea {
		-webkit-appearance: none;
   		-moz-appearance:    none;
   		appearance:         none;
   		outline: none;
	}
	.body {
		width: 100vw;
		height: 100vh;
		max-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		background-color: var(--color-body-bg);
		height: 100vh;
		overflow: hidden !important;
	}
	main {
		flex: 0 0 calc(100vh - var(--header-height));
		width: 100vw;
		max-width: 100vw;
		height: calc(100vh - var(--header-height));
		max-height: calc(100vh - var(--header-height));
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 3;
		background: transparent;
		overflow-y: scroll;
	}
	main.top {
		justify-content: flex-start;
	}
	::-webkit-input-placeholder {

		color: var(--color-input-placeholder);
	}
	::-moz-placeholder {

		color: var(--color-input-placeholder);
	}
	:-ms-input-placeholder {

		color: var(--color-input-placeholder);
	}
	:-moz-placeholder {

		color: var(--color-input-placeholder);
	}
	a {
		text-decoration: underline;
		color: var(--color-link);
		text-transform: none;
	}
	sup {

		font-size: 0.9em;
	}

/* HEADER */
	header {
		width: 100%;
		color: white;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		background-color: var(--color-accent);
		height: var(--header-height);
		padding: 1.5em 0;
		z-index: 3;
		/* padding: 1.0em 2em; */
	}
	header .logo {
		width: 50%;
		max-width: 240px;
	}
	header .logo > div {
		width: 100%;
		height: 0;
		padding-bottom: calc(125 / 450 * 100%);
		background-image: url('/images/logo.svg?2');
		background-size: 100% 100%;
		
		position: relative;
	}
	header .logo.ko > div {
		width: 100%;
		height: 0;
		padding-bottom: calc(125 / 450 * 100%);
		background-image: url('/images/logo-ko.svg?1');
		background-size: 100% 100%;
		
		position: relative;
	}
	header .logo > div > a {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

/* FOOTER */
	footer {
		width: 100%;
		padding: 1.5rem 2em;
		font-size: 0.9rem;
		color: var(--color-text-secondary);
		z-index: 2;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
	footer > div {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	footer .logo {
		width: 60px;
		margin-bottom: 0.35em;
	}
	footer .logo > div {
		width: 100%;
		height: 0;
		padding-bottom: calc(113 / 400 * 100%);
		background-image: url('/images/logo-cdek.svg?2');
		background-size: 100% 100%;
		position: relative;
	}

/* FORM */
	.form-container {
		width: 90%;
		max-width: 700px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		filter: drop-shadow(0 2em 1em rgba(74, 89, 109, 0.1));
		margin-top: -2em;
	}
	.form-container .form {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.form-container .form > * {
		width: 100%;
	}
	.form-container .form h2 {
		font-weight: 400;
		margin-bottom: 2rem;
		padding-bottom: 0;
		line-height: 1;
		font-size: 2em;
		text-align: center;
		text-transform: capitalize;
		text-shadow: 0 0 6px white;
	}
	.form-container .form .form-item {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		position: relative;
		margin-top: 1.5em;
		z-index: 1;
	}
	.form-container .form .form-item > div {
		width: 100%;
	}
	.form-container .form .form-item > label {
		color: var(--color-form-label);
		font-size: 1em;
		font-weight: 500;
		/* margin: 0 0.5rem 0.5rem 0.5rem; */
		position: absolute;
		top: 0;
		left: 0.75em;
		z-index: 2;
		background-color: white;
		display: block;
		padding: 0 0.5em;
		transform: translate(0, -50%);
		line-height: 1;
		height: 1em;
		border-radius: 0.5em;
	}
	.form-container .form .form-item > label::before{
		content: 'Номер заказа / Трек-номер';
	}
	.form-container .form .form-item > label.alert {
		color: var(--color-red);
		font-weight: 600;
	}
	.form-container .form .form-item > label.alert::before{
		content: 'Заказ с этим трек-номером не найден';
	}
	.form-container .form .form-item .custom-checkbox {
		padding: 0.6rem 0 0 0;
	}

/* TRACKING */
	.tracking {
		width: 90%;
		max-width: 700px;
		padding: 2em 0 16em 0;
	}

	.tracking-summary {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		background-color: white;
		border-radius: 1em;
		border: 1px solid var(--color-border);
		padding: 1.5em;
		margin-bottom: 1.5em;
	}
	.tracking-summary .details {
		flex: 1 0 auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		margin-right: 2em;
	}
	.tracking-summary .details h1 {
		color: var(--color-accent);
		font-weight: 600;
		text-decoration: none !important;
		pointer-events: none !important;
	}
	.tracking-summary .details span {
		text-transform: uppercase;
		font-weight: 600;
		color: var(--color-accent);
		font-size: 1.1em;
	}
	.tracking-summary .details small {
		text-transform: uppercase;
		font-weight: 500;
		color: var(--color-accent);
	}

	.tracking-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* filter: drop-shadow(0 2em 1em rgba(74, 89, 109, 0.1)); */
		background-color: white;
		border-radius: 1em;
		border: 1px solid var(--color-border);
		padding: 2em;
	}
	.tracking-container .tracking-status {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		
		width: 100%;
	}
	.tracking-container .tracking-status .details {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 1.5em 0;
	}
	.tracking-container .tracking-status .details b {
		text-transform: uppercase;
		font-weight: 600;
		color: var(--color-accent);
		font-size: 0.9em;
	}
	
	.tracking-container .tracking-status .details span {
		text-transform: uppercase;
		font-weight: 400;
		color: var(--color-accent);
		font-size: 0.8em;
	}
	.tracking-container .tracking-status .details small {
		text-transform: uppercase;
		font-weight: 500;
		color: var(--color-accent);
		margin-top: 0.25em;
	}

	.tracking-container .tracking-status.future .details > * {
		color: var(--color-awaiting) !important;
	}

	.tracking-container .tracking-status.awaiting .details{
		padding: 3em 0 3em 0;
	}
	.tracking-container .tracking-status.awaiting .details::before {
		content: '\f141';
		font-family: 'Font Awesome 5 Pro';
		color: var(--color-awaiting) !important;
		font-size: 3.3em;
		line-height: 1;
		height: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tracking-container .tracking-status .marker {
		flex: 0 0 4em;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 4em;
		position: relative;
		margin-right: 2em;
	}
	.tracking-container .tracking-status .marker::before {
		content: '';
		width: 1em;
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(50% - 0.5em);
		background-color: var(--color-accent);
		z-index: 1;
	}
	.tracking-container .tracking-status:first-of-type .marker::before {
		top: 1.5em;
		border-top-left-radius: 0.5em;
		border-top-right-radius: 0.5em;
	}
	.tracking-container .tracking-status:last-of-type .marker::before {
		bottom: 1.5em;
		border-bottom-left-radius: 0.5em;
		border-bottom-right-radius: 0.5em;
	}
	.tracking-container .tracking-status.awaiting .marker::before {
		background-color: var(--color-border);
		background: linear-gradient(to bottom, var(--color-accent), var(--color-awaiting));
	}
	.tracking-container .tracking-status.future .marker::before {
		background-color: var(--color-awaiting);
	}

	.tracking-container .tracking-status .marker::after {
		content: '';
		width: 6px;
		height: 6px;
		position: absolute;
		z-index: 2;
		top: 2em;
		left: 50%;
		transform: translate(-3px, 0);
		background-color: white;
		border-radius: 50%;
	}
	.tracking-container .tracking-status.current .marker::after {
		content: '\f0a4';
		font-family: 'Font Awesome 5 Pro';
		font-weight: bold;
		font-size: 1.8rem;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		width: 5.4rem;
		height: 5.4rem;
		position: absolute;
		z-index: 2;
		top: 50%;
		left: 50%;
		transform: translate(-2.9rem, -2.9rem);
		background-color: var(--color-accent);
		border-radius: 50%;
		border: 0.2rem solid white;
	}
	.tracking-container .tracking-status.current.complete .marker::after {
		content: '\f11e';
		font-weight: normal;
	}
	.tracking-container .tracking-status.awaiting .marker::after {
		top: 3.3em;
	}

	.cdek-start {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
		margin: 0.5em 0;
		line-height: 1;
	}
	.cdek-start .logo {
		width: 46px;
		/* margin-bottom: 0.35em; */
	}
	.cdek-start .logo > div {
		width: 100%;
		height: 0;
		padding-bottom: calc(113 / 400 * 100%);
		background-image: url('/images/logo-cdek.svg?2');
		background-size: 100% 100%;
		position: relative;
	}
	.cdek-start a {
		font-size: 1rem;
		font-weight: 500;
		margin-left: 0.5em;
	}

/* INPUT */

	main input[type="text"],
	main input[type="tel"] {
		width: 100%;
		outline: none;
		color: var(--color-text);
		border: 1px solid var(--color-border);
		background-color: white !important;
		border-radius: 0.5rem;
		padding: 0 1.5rem;
		font-size: 1.4rem;
		margin: 0;
		background: transparent;
		outline: none;
		height: 5rem;
		font-weight: 500;
		letter-spacing: 2px;
	}
	main input[type="text"].alert,
	main input[type="tel"].alert {
		border: 2px solid var(--color-red);
	}

	.input-container {
		width: 100%;
		position: relative;
	}

/* BUTTON */
	a.button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		background-color: var(--color-accent);
		color: white;
		text-transform: uppercase;
		font-weight: 700;
		text-align: center;
		font-size: 1.1em;
		height: 5rem;
		border-radius: 2.5rem;
		text-decoration: none;
	}
	a.button:hover {
		background-color: var(--color-accent-lighter);
	}
	a.button.small {
		flex: 0 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		padding: 0 1em;
		background-color: var(--color-accent);
		color: white;
		text-transform: uppercase;
		font-weight: 700;
		text-align: center;
		font-size: 0.8em;
		height: 3rem;
		border-radius: 0.5rem;
		text-decoration: none;
	}

/* CANVAS */
	canvas {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1 !important;
	}

/* ANIMATIONS */
	@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
	}
	@-webkit-keyframes spin { 
	    100% { -webkit-transform: rotate(360deg); } 
	}
	@keyframes spin { 
	    100% { 
	        -webkit-transform: rotate(360deg); 
	        transform:rotate(360deg); 
	    } 
	}