#attribute {
	.page::before {
		position: absolute;
		@include calc(width, "100% - 70px");
		height: 1px;
		content: "";
		background: $color10;
		// background: #3a322b;
		// background: #1f282d;
		top: 0;
		left: 35px;
	}

	.scroll-inner {
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
	}

	.counter {
		margin-top: 10px;
		text-align: center;
	}

	.main, .calculated {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		.number-box {
			top: 70px;
			right: -6px;
			width: 24px;
			z-index: 2;

			+ .btn-round {
				margin-top: 8px;
			}
		}
	}

	.main {
		padding-bottom: 16px;
		// border-bottom: 1px solid transparentize(white, .925);
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		.number-box {
			width: 24px;
		}
	}

	.calculated {
		.value {
			background: transparent;
		}

		.number-box {
			width: 40px;
		}
	}

	.short {
		font: bold 14px/28px Alegreya;
		color: $color1;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		text-align: center;
	}

	.value {
		border: 2px solid transparent;
		padding: 2px;
		background: $background4;
	}
	
	.value-inner {
		border: 1px solid $color4;
		padding: 1px;

		> div {
			@include size(45px);
			text-align: center;
			font: bold 28px/45px Alegreya Sans;
			color: $color1;
			letter-spacing: 0.05em;
			text-transform: uppercase;
			background: $background2;
			overflow: hidden;
		}
	}

	.btn-round {
		margin-top: 5px;
	}

	.attr {
		margin: 10px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		flex: none;
		position: relative;

		$colors: (1: $attr1, 2: $attr2, 3: $attr3, 4: $attr4, 5: $attr5, 6: $attr6, 7: $attr7, 8: $attr8);

		@for $i from 1 through 8 {
			&.ATTR_#{$i} > .value {
				border-color: map-get($map: $colors, $key: $i);
			}
		}
	}
}

.overlay > .calc-attr-overlay {
	width: 280px;

	p.calc-text {
		font-style: italic;
	}
}