@borderColor : #dddddd;
@borderRadius: 12px;

.accountProfile {
	.card {
		display       : flex;
		flex-direction: column;
		color         : var(--background-color-contrast);

		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		span {
			color: var(--background-color-contrast);
		}

		.header {
			position: relative;
			display : inline-flex;

			align-items    : center;
			justify-content: space-between;

			z-index: 15;
			width  : 100%;
			padding: 12px 24px;

			font-family: "Roboto Mono", monospace;

			color        : var(--background-color-contrast);
			border       : 1px solid var(--border-color);
			border-radius: @borderRadius;

			word-break: break-all;

			img {
				width : 70px;
				height: 70px;
			}

			h1 {
				margin   : 0;
				font-size: 35px;

				span {
					font-size: 12px;
				}
			}

			>div {
				display    : inline-flex;
				align-items: center;
			}
		}

		.extension {
			position: relative;
			display : inline-flex;

			top    : -10px;
			width  : 100%;
			padding: 19px 10px 10px 10px;

			border-top  : 0;
			border-right: 0;

			border-style: solid;
			border-width: 1px;

			border-color    : var(--border-color);
			border-top-color: transparent;

			border-radius: 0 0 @borderRadius @borderRadius;
		}
	}

	>div {
		margin-bottom: 10px;
	}
}