.profileheaderbox {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;

    border: 1px solid #c0c0c0;
    border-radius: 0.2rem;
    box-shadow: 1px 1px 2px 0px #808080;

    padding: 0.2rem;
    background-color: white;
    box-sizing: border-box;
    max-width: 100%;
}

.profilemedia {
    flex: 0 0 auto;
}

.profilemedia img {
    display: inline-block;
    background-image: linear-gradient(to bottom left,
                                      #69af85,
                                      #e0f4e8,
                                      #69af85);
    border: 1px solid #eeeeee;
    border-radius: 4px;
    padding: 1px;
    box-sizing: border-box;
    max-width: 99%;
    margin: 0 0.3rem;
}

.profileheaderbox .profileinfobox {
    flex: 0 1 auto;
    word-wrap: break-word;
    box-sizing: border-box;
    max-width: 80%;
}

.contentcontainer .profileinfobox {
    max-width: 21rem;
}

.profileheaderbox .profileinfobox * {
    text-align: left;
}

.profileinfo {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.profileinfo .detailsbox_width, .profileinfo audio {
    width: 17rem;
    max-width: calc(100% - 1.2rem);
    box-sizing: border-box;
}

.profileentry audio {
    width: 17rem;
    max-width: 100%;
}


.profilenav > .profileheaderbox {
    margin: 1.4rem 0 1rem 0;
}

.profilenav {
    text-align: center;
}

#favourites p {
    margin: 1rem auto;
}

#favourites img, #favourites a {
    vertical-align: middle;
}

#favourites a {
    margin-left: 1rem;
}

.page_form .profilesections textarea,
.page_form .profilesections input[type="text"],
.page_form .profilesections h3,
.page_form .profilesections p {
    margin-left: 3%;
    width: 100%;
    max-width: 30rem;
}

.page_form .profilesections textarea {
    height: 30ex;
    border: 1px solid #cbb59a;
    padding: 0.3rem 0.1rem 0.3rem 0.2rem;
    border-radius: 4px;
}

.page_form .profilesections input[type="text"],
.page_form .profilesections h3 {
    padding: 0.1rem 0.1rem 0.1rem 0.3rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-style: normal;
}

.page_form .profilesections section {
    border-bottom: 1px solid #808080;
    margin-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.profileentry {
    margin: 0.4rem auto 0.8rem auto;
    border: 1px solid #e9dde9;
    border-radius: 0.4rem;
    padding: 0.5rem;
    word-wrap: break-word;
    background-color: white;
    text-align: left;
}

.profileentry > p {
    white-space: pre-wrap;
}

.profileentry > p.standard_button_row, .profileentry#favourites > p {
    white-space: normal;
}

.profileentry > h3 {
    text-align: center;
}

.profileentry {
    width: 26rem;
}

.profileentry_wide {
    width: 34rem;
}

.profileactions {
    padding: 0.2rem;
    width: 100%;
    box-sizing: border-box;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.profileactions > * {
    text-align: center !important;
}

.profileactions > p {
    white-space: normal;
}

.profileinfo > .profileactions {
    margin: 0;
}

.ProfileList {
    margin-top: 0.3rem;
    margin-bottom: 1.2rem;
}

.profile-list-sort {
    margin: 0.3rem 0;
}

.profile_directory > div {
    margin: 0.5rem 0.3rem;
    padding: 0.3rem 0.5rem;
}

.profile_directory > div > div > a {
    display: inline-block;
}

.profile_directory p {
    overflow-wrap: break-word; 
}

.profile_directory h2 {
    font-weight: bold;
}

.settings {
    border: 1px solid #808080;
    padding: 0.2rem 0.2rem 0.2rem 1rem;
}

.settings h2, .settings h2 a {
    text-align: center;
}

.settings ul {
    padding-left: 0;
    margin-left: 0;
    margin-top: 8px;
    list-style-position: inside;
    list-style-type: square;
}

header {
    text-align: center;
}

header.profile_page_header {
    margin: 0.7rem 0.2rem;
}

.profile_page {
    background-image: linear-gradient(to bottom right,
                                      white,
                                      #efe7ef);
    padding: 0 0.5rem 1rem 0.5rem;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    margin-bottom: 1.0rem;
}

p.profile_page_end {
    text-align: center;
    margin-top: 1.5rem;
}

section.activity_section {
    border-bottom: 2px solid #cccccc;
}

ul.TabPage {
    margin: 0 0 -2px 0.2rem;
    padding: 0;
}

ul.TabPage li {
    margin: 0 0.2rem;
    list-style-position: inside;
    display: inline-block;
}

ul.TabPage a {
    padding: 0.2rem;
    margin-bottom: 1px;
    font-weight: normal;
    display: block;
    border: 1px solid #808080;
    border-bottom: 0;
    border-radius: 2px;
}

ul.TabPage a.TabPage-selected {
    font-weight: bold;
    color: black;
    border-bottom: 0;
    background-color: white;
    z-index: 10;
}

/* Font Awesome Overrides */
.profileinfo p > .fas, .profileinfo p > .fab {
    line-height: inherit !important;
    font-size: 120%;
    vertical-align: -0.1rem;
}

a > .fas {
    color: initial;
}

.profileinfo audio,
.profileinfo p > .fa-play-circle {
    vertical-align: middle;
}

.profileheaderbox h1,
.profileinfo p > .fas,
.profileinfo p > .fab,
.profileinfo p > .profilefield {
    color: #3e293e;
}

.profileinfo p > .profilefield {
    font-weight: bold;
}

/* Narrower screens */
@media (max-width: 640px) {

.profileentry, .profileentry_wide {
    width: 100%;
    box-sizing: border-box;
}

.profileheaderbox .profileinfobox {
    max-width: 100%;
}

.profile_page {
    padding-left: 0;
    padding-right: 0;
}

.page_form .profileheaderbox input:not([type=checkbox]),
.page_form .profileheaderbox select {
    width: 100%;
}

.page_form .profilesections textarea,
.page_form .profilesections input[type="text"],
.page_form .profilesections input[type="email"],
.page_form .profilesections h3,
.page_form .profilesections p {
    margin-left: 0;
}

.page_form .profilesections h3 {
    padding-left: 0;
}

}