.user-profile {
    .workout-options {
    	.font-size(13);
		margin-right: 2em;
    }
}

.user-profile-account {
	background-color: @color-main-xtralight;
	border-bottom: 1px solid @color-main-light;
    padding: 2em  1em;
    @media (min-width: @screen-s){
        padding: 2em 6em;
    }
    >div {
    	display: flex;
    	align-items: center;
    }
    img {
        width: 140px;
        height: 140px;
        object-fit: cover;
        border-radius: 50%;
        margin-bottom: .5em;
        margin-right: 1em;
    }
	h2 {
		margin: 0 0 .15em 0;
		.font-size(21);
		font-weight: 400;
	}
	p{
		color: @color-main-dark;
		.font-size(14);
		margin: 0;
		span {
			color: @color-main-medium;
		}
	}
}
.total-workouts {
	.font-size(13);
	font-weight: bold;
	span {
		color: @color-main-medium;
		margin-right: .5em;
		&:first-child {
			color: @color-main;
			&:after {
				content: "|";
				color: @color-main-light;
				margin-left:  .5em;
			}
		}
	}
}

.profile-data {
	list-style-type: none;
	padding: 0;
	.font-size(14);
	background-color: white;
	padding: .5em .75em;
	border-radius: 4px;
	border: 1px solid @color-main-light;
	li {
		display: flex;
		justify-content: space-between;
		color: @color-main-medium;
		&:not(:last-child) {
			margin-bottom: .5em;
			padding-bottom: .5em;
			border-bottom: 1px solid @color-main-light;
		}
		span {
			font-weight: bold;
			color: @color-main;
		}
	}
}

.profile-bio {
	margin: .5em 0;
	.font-size(14);
}

.month-stats,
.latest-workouts {
	max-width: 700px
}

.center {
	text-align: center;
}

.month-stats {
	margin-bottom: 4em;
}

.latest-workouts {
	h4 {
		margin:0;
		a {
			color: @color-main;
			text-decoration: none;
		}
	}
	>span {
		.font-size(13);
	}
	p {
		margin-top: .25em;
		color: @color-main-medium;
		.font-size(13);
	}
}