.rounded-cell {
	border-radius: 2rem;
	overflow: hidden;
	padding: 1rem;
}

.green-rounded-cell {
	@extend .rounded-cell;
	background-color: $green-blue;
	color: white;

	input {
		background-color: white;
		color: $green-blue-dark;
	}
	button {
		@extend %cancel-button;
	}
	a {
		color: inherit;
	}
}

.script-title {
	font-size: 3em;
	text-align: center;
	font-family: $ff-script;
	text-transform: none;
	line-height: 1;
	color: inherit;
	small {
		display: block;
		font-weight: 400;
		font-family: $ff-ss-serif;
		font-size: .45em;
	}
}

%button {
	font-weight: 600;
	text-transform: uppercase;
	font-size: $fz-small;
}

%cancel-button {
	&, &:hover {
		color: $primary-color;
		background-color: white;
		border: 1px solid;
	}
	&:hover {
		color: $button-hover-background;
	}
}

// Header
.site-header {
	border-top: $topLinks_height solid $primary-color;
	#top {
		display: flex;
		align-items: center;
		@media ($min-desktop-viewport) {
			justify-content: center;
		}
	}
	#logo.has-logo {
		margin-top: -1rem;
		margin-bottom: 1rem;
		font-size: 1.6em;
		@media ($min-desktop-viewport) {
			margin-bottom: 1.5rem;
			font-size: 2em;
		}
		a {
			padding-top: 1rem;
			color: $font-color;
			padding-top: 100px;
			text-indent: 0 !important;
			background-size: auto 90px !important;
			background-position: top left !important;
			font-family: $ff-script;
			text-align: left;

			@media ($min-desktop-viewport) {
				display: flex;
				align-items: flex-end;
				padding-left: 260px;
				height: 115px;
				background-size: 230px auto !important;

			}
		}
	}
}

// User-info
#toplinks {
	// Reset user links
	border: none;
	box-shadow: none;
	border-radius: 0;
	background-color: transparent;
	color: white;
	// position
	top: auto;
	bottom: 100%;
	height: $topLinks_height;
	padding: 0;
	line-height: $topLinks_height;

	a {
		color: inherit;
		font-size: $fz-small;
		text-transform: uppercase;
	}

	// user icon
	&::before {
		content: "\f2c0";
		font-family: fontawesome;
		margin-right: .33em;
	}
}

// Main nav
div.gru-nav > ul {
	margin: 0;

	@media (min-width: $nav-mobile-limit + 1) {
		text-align: center;
	}

	li {
		a {
			text-transform: uppercase;
			font-weight: 600;
		}
	}
}
// Desktop Subnav
body {
	border-left: none;
}
div.gru-nav > ul ul {
	@media (min-width: $nav-mobile-limit + 1) {
		li:hover a {
			color: $green-yellow;
		}
	}
}

// Mobile nav
@media (max-width: $nav-mobile-limit) {
	div.gru-nav .gru-nav-button {
		top: 0;
		left: 0;
	}
}

// Page picture
body.has-picture .site-nav::after {
	position: static;
}


// main
main {
	border-top: 1px solid $green-blue;
	padding-top: 1rem;
}


// Cells

// sidebar cells
#sidebar {
	.cell {
		@extend .green-rounded-cell;
	}
	.tracking-code-input-cell {
		h2:first-child {
			@extend .script-title;

			& + div {
				padding: 0;
			}
		}
	}
}

// Links-list
div.links-list ul {
	& > li > a {
		font-size: 1.1em;
		font-weight: 600;
	}
}

// Picture position
.gru-content div.link-list-cell.has-asset-picture,
.gru-content div.wcsformsofcategorycell.has-asset-picture {
	> div {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;

		> * {
			flex: 0 0 100%;
		}

		> h2:first-child {
			flex: 1 0 50%;
		}

		> picture {
			display: block;
			order: -1;
			flex: 0 0 $title-font-size;
			align-self: center;
			margin-left: 1rem;

			img {
				padding: 0;
			}
		}
	}
}

// text Cell
div.text-cell {
	padding: 1px 1rem;
	h3, h4, h5, p, table {
		margin: 1rem 0;
	}
}

// WCS
.gru-content div#tracking-code {
	@extend .cell;
	@extend .green-rounded-cell;
	text-align: center;
	margin-right: 0;
	margin-left: 0;
	padding: 1rem;

	h3 {
		@extend .script-title;
		font-size: 2em;
	}
	button {
		margin-right: 0;
	}
}
// Title
.form-content--title,
div#rub_service h2 {
	font-size: 2.5em;
	padding-left: 0;

	@media (max-width: $very-small-limit) {
		font-size: 1.5em;
	}
}
// wcs buttons
div#rub_service .buttons {
	.submit-button button::after {
		content: ">";
		content: ">" / "";
		margin-left: .66em;
	}
	.previous-button button::before {
		content: "<";
		content: "<" / "";
		margin-right: .66em;
	}
}


// Authentic
#registration-blocks > .a2-block,
#login-page > .block {
	background: transparent;
}

// Footer
#footer a {
	color: white;
}

