/* Var Definitions */
.userProfileCard {
	--bg-color: transparent;
	--border-radius: 10px;
	--signal-color: var(--logo-color-1);
	/* already defined in global.css
	--font-color: var(--font-color, #ffffff);
	--button-bg-color: var(--logo-color-1, #007559);
	--link-color: var(--logo-color-1, #ffffff);
	--h1-color: var(--font-color);
	--h2-color: var(--font-color);
	--h3-color: var(--font-color);
	*/
}

.userProfileCard {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--neutral-color-dark);
  padding: 20px;
  box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.5);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.userProfileCard .avatar { flex-basis: 50%;  }
.userProfileCard .avatar img { border-radius: var(--border-radius); }
.userProfileCard .profile { flex-basis: 50%; display: flex; flex-direction: column; justify-content: flex-end; gap: 30px; }
.userProfileCard .profile .person, .userProfileCard .profile .contact { display: flex; flex-direction: column; gap: 10px; }
.userProfileCard .profile .person > div, .userProfileCard .profile .contact > div { display: flex; }
.userProfileCard .profile .person > div > div:first-child, .userProfileCard .profile .contact > div > div:first-child { margin-right: 5px; }
.userProfileCard .profile .position { font-style:	oblique; }
.userProfileCard .profile .position > div:first-child { display:	none; }
.userProfileCard .profile .email { font-size: 14px; }

.userProfileCard .avatar img { margin: 0 auto; max-width: 100%; width: 100%; }
.userProfileCard h1, .userProfileCard .h1s { color: var(--h1-color); }
.userProfileCard h2, .userProfileCard .h2s { color: var(--h2-color); margin-bottom: 0; }
.userProfileCard p { color: var(--font-color); }
.userProfileCard a { color: var(--link-color); }

.userProfileCard .flag { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background-color: var(--signal-color);
						border-radius: 0 0 0 calc( var(--border-radius) * 4); }