#profile {
    position: relative;
    padding-top: 80px !important;
    max-width: 1400px !important;
    background: url(../img/parchment_texture_bw.png) top center repeat var(--backgorund-color) !important;
    color: var(--light);
    overflow: hidden;
}

#profile .header,
#profile .title,
#profile .websites,
#profile .quick_buttons,
#profile .character_selection,
#profile .user_bio>div:not(.content),
#profile.is_self .user_bio,
#profile form input[type="submit"],
#profile .bio>div:not(.content),
#profile .button.remove_all,
#profile .pending_revisions>div>div:not(.editable),
#profile .bio_history>div>div:not(.editable) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#profile>div {
    margin: 0 auto 20px;
    max-width: 1300px;
}

#profile .linked_item.ready {
    cursor: pointer;
}

#profile .header,
#profile select,
#profile .user_bio,
#profile .bio,
#profile .button.remove_all,
#profile .pending_revisions,
#profile .bio_history,
#profile .websites {
    background: #0d0d0d;
    -webkit-box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 75%), inset 0px 0px 30px 2px rgb(0 0 0 / 50%);
    -moz-box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 75%), inset 0px 0px 30px 2px rgb(0 0 0 / 50%);
    box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 75%), inset 0px 0px 30px 2px rgb(0 0 0 / 50%);
    border: 2px solid rgba(255, 255, 255, 0.15);
}

#profile .pending_revisions,
#profile .pending_revisions .controls {
    border-color: rgba(128, 128, 255, 0.5);
}

#profile .bio_history,
#profile .bio_history .controls {
    border-color: rgba(128, 255, 255, 0.5);
}

#profile>div.title,
#profile .quick_buttons,
#profile .bio,
#profile .user_bio,
#profile .pending_revisions,
#profile .editable.format span.c,
#profile .bio_history,
#profile .websites {
    font-size: 20.48px;
}

#profile .header {
    font-size: 25.6px;
}

#profile>div.title {
    position: relative;
    padding-top: 0;
    margin-bottom: 0;
    font-variant: small-caps;
}

#profile .header>.content {
    min-height: 309px;
}

#profile .header,
#profile .bio {
    position: relative;
}

#profile .edit:after,
#profile .websites a:before {
    font: normal normal normal smaller/1 Ionicons;
    text-rendering: auto;
    vertical-align: super;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#profile .allowed_revisions,
#profile .controls>div:first-child:not(.editable)>div:first-child,
#profile .controls .text_formatting,
#profile .button.remove_all,
#profile .character_selection,
#profile .header .privacy_setting {
    font-size: 20.48px;
    height: auto;
    font-variant: small-caps;
}

#profile .allowed_revisions,
#profile .header .privacy_setting,
#profile .button.remove_all {
    position: absolute;
}

#profile .header .privacy_setting,
#profile .button.remove_all {
    top: -4px;
    transform: translateY(-100%);
}

#profile .header .privacy_setting,
#profile .button.remove_all {
    right: -2px;
}

#profile .allowed_revisions {
    bottom: 2px;
    right: 0;
}

#profile .allowed_revisions>div {
    display: inline-block;
}

#profile select,
#profile .button.remove_all {
    background: #060606;
    border-color: #313131;
    padding: 0 0.5882em;
}


#profile .character_selection>div {
    width: fit-content;
}

#profile:not(.is_self) .allowed_revisions,
#profile:not(.is_self) .character_selection,
#profile:not(.is_self) .privacy_setting {
    display: none;
}

#profile.inactive .bio:after,
#profile.inactive .user_bio:after,
#profile.inactive .websites:after {
    content: "";
}

#profile.inactive .bio:after,
#profile.inactive .user_bio:after,
#profile.inactive .websites:after,
#profile .backdrop {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.67);
}

#profile:not(.inactive) .backdrop {
    display: none;
}

#profile .backdrop span {
    position: absolute;
    text-align: center;
    left: -200px;
    right: -200px;
    top: 50%;
    font-size: 22.464px;
    padding: 0.5em 0;
    color: #fff;
    background: var(--dark-orange);
    transform: translateY(-50%);
}

#profile .backdrop span:after {
    content: "";
    display: block;
    margin: 0 auto;
    background: transparent url('/media/gui/64/badge_eye_white.png') no-repeat center center;
    background-image: -webkit-image-set(url('/media/gui/64/badge_eye_white.png') 1x, url('/media/gui/128/badge_eye_white.png') 2x);
    background-image: image-set(url('/media/gui/64/badge_eye_white.png') 1x, url('/media/gui/128/badge_eye_white.png') 2x);
    background-size: 90% auto;
    width: 1.61429em;
    height: 1em;
}

#profile .user_bio,
#profile .websites {
    position: relative;
}

#profile .websites {
    padding: 0;
}

#profile .websites .content {
    text-align: center;
}

#profile .user_bio .content:empty:after,
#profile .websites .content:empty:after,
#profile .bio .content:empty:after {
    content: "-";
    visibility: hidden;
}

#profile div:not(.header) .content,
#profile .editable,
#profile .header {
    padding: 10px;
}

#profile.is_self .header {
    margin-bottom: 2px;
}

/* 
#profile div:not(.header) .content,
#profile .editable {
    padding-right: 28.25px;
} */
/* 
#profile .websites .content:not(:empty) {
    padding: 0 28.25px;
} */

#profile .bio:empty:before,
#profile .content:empty:before {
    display: block;
    content: "-";
    opacity: 0;
}

#profile.is_self .user_bio .content:empty:before,
#profile.is_self .websites .content:empty:before {
    content: "Write a description (Character limit: 255)";
    font-variant: small-caps;
    opacity: 0.5;
}

#profile.is_self .websites .content:empty:before {
    content: "Add websites & external links (Use comma/space to separate links)";
    text-align: left;
}

#profile .user_bio .content {
    overflow-wrap: break-word;
}

#profile .editable {
    overflow-y: auto;
    white-space: pre-line;
    outline: none;
    border: none;
}

#profile .bio .content,
#profile .controls .editable {
    white-space: pre-wrap;
}

#profile>div:not(.bio):not(.bio_history):not(.pending_revisions) .editable * {
    display: inline-block;
}

#profile .editable::-webkit-scrollbar {
    display: none;
}

#profile .editable {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#profile .edit {
    position: absolute;
    top: 10px;
    right: 10px;
    -webkit-transition: color 100ms linear;
    -moz-transition: color 100ms linear;
    transition: color 100ms linear;
    cursor: pointer;
}

#profile .user_bio .content:before,
#profile .websites .content:before,
#profile .bio .content:before {
    display: block;
    float: right;
    visibility: hidden;
    padding-left: 0.2em;
}

#profile .user_bio .content:before,
#profile .websites .content:before,
#profile .bio .content:before,
#profile .edit:after {
    content: "\f2bf";
}

#profile .user_bio.editing .content:before,
#profile .websites.editing .content:before,
#profile .bio.editing .content:before,
#profile .editing .edit:after {
    content: "\f122";
}

#profile .edit:hover {
    color: #fff;
}

#profile .websites a {
    display: inline-block;
    padding: 10px;
    color: #fff;
    filter: brightness(79%);
    -webkit-transition: filter 100ms linear;
    -moz-transition: filter 100ms linear;
    transition: filter 100ms linear;
}

#profile .websites a:hover {
    filter: brightness(100%);
}

#profile .websites a:before {
    content: "\f1f7";
    vertical-align: bottom;
    font-size: 1.2em;
    margin-right: 10px;
}

#profile .websites a.image:before {
    content: "\f147";
}

#profile .websites a.twitter:before {
    content: "\f243";
}

#profile .websites a.instagram:before {
    content: "\f350";
}

#profile .websites a.tumblr:before {
    content: "\f241";
}

#profile .websites a.facebook:before {
    content: "\f231";
}

#profile .websites a.linkedin:before {
    content: "\f239";
}

#profile .websites a.reddit:before {
    content: "\f23a";
}

#profile .websites a.youtube:before {
    content: "\f24d";
}

#profile .websites .content>div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#profile .websites a.discord:before,
#profile .websites a.patreon:before,
#profile .websites a.tiktok:before,
#profile .websites a.furaffinity:before,
#profile .websites a.flist:before,
#profile .websites a.deviantart:before,
#profile .websites a.twitch:before {
    content: "";
    display: inline-block;
    background: transparent url('../img/website_discord.png') no-repeat center center;
    width: 24px;
    height: 24px;
}

#profile .websites a.patreon:before {
    background-image: url('../img/website_patreon.png');
}

#profile .websites a.tiktok:before {
    background-image: url('../img/website_tiktok.png');
}

#profile .websites a.twitch:before {
    background-image: url('../img/website_twitch.png');
}

#profile .websites a.flist:before {
    background-image: url('../img/website_flist.png');
}

#profile .websites a.furaffinity:before {
    background-image: url('../img/website_furaffinity.png');
}

#profile .websites a.deviantart:before {
    background-image: url('../img/website_deviantart.png');
}

#profile .bio.editing .edit:after {
    content: "\f12a";
}

#profile ins {
    color: #2fdc2f;
}

#profile del {
    color: #dc2f2f;
}

#profile>div .controls {
    background: #1b1b1b;
    margin: 28.25px;
    padding: 18.25px 28.25px;
    border-left: 0.25em solid var(--light);
    -webkit-box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 75%);
    -moz-box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 75%);
    box-shadow: 0px 0px 3px 0px rgb(0 0 0 / 75%);
}

#profile>div .controls>div:nth-child(2) {
    margin: 10px 0;
}

#profile>div .controls>form {
    display: block;
    font-size: 17px;
}

#profile>div .controls>form>div {
    display: inline-block;
}

#profile>div .controls>form>div:not(:first-child) {
    margin-left: 10px;
}

#profile form .enable {
    position: relative;
    text-align: left;
}

#profile form .enable.inactive {
    opacity: 0.5;
    pointer-events: none;
}

#profile form .enable input {
    display: none;
}

#profile form .enable label {
    cursor: pointer;
}

#profile form .enable label span {
    margin-left: 5px;
}

#profile form .enable label:before {
    display: inline-block;
    width: 17px;
    height: 17px;
    content: '';
    background: #222;
    border: 1px solid #eee;
    vertical-align: text-bottom;
}

#profile form .enable label:after {
    position: absolute;
    left: 3px;
    top: 2px;
    width: 14px;
    height: 6px;
    content: '';
    opacity: 0;
    border: 3px solid var(--tough);
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.3), inset 1px -1px 1px 0 rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.3), inset 1px -1px 1px 0 rgba(0, 0, 0, 0.3);
    box-shadow: -1px 1px 1px 0 rgba(0, 0, 0, 0.3), inset 1px -1px 1px 0 rgba(0, 0, 0, 0.3);
    -webkit-transition: all 100ms linear;
    -moz-transition: all 100ms linear;
    transition: all 100ms linear;
}

#profile form .enable label:hover:after {
    opacity: 0.3;
}

#profile form .enable input[type=checkbox]:checked+label:after {
    opacity: 1;
}

#profile form .enable label:hover:before,
#profile form .enable input[type=checkbox]:checked:hover+label:after {
    border-color: #fff;
}

#profile>div .controls>form .enable {
    opacity: 0.5 !important;
}

#profile>div .controls>form .enable label:before {
    background: #0d0d0d !important;
    border-color: var(--light) !important;
}

#profile form .button {
    background: #0d0d0d;
    border: 1px solid var(--light);
    cursor: pointer;
}

#profile form .button:hover {
    background: #fff;
    border-color: #fff;
    color: #333;
}

#profile #revision_settings {
    position: relative;
}

#profile #revision_settings>div:last-child {
    position: absolute;
    right: 0;
    visibility: visible !important;
}

#profile .pending_revisions,
#profile .bio_history {
    position: relative;
}

#profile .controls .time {
    display: inline-block;
    font-size: 0.8em;
    margin-left: 0.4em;
}

#profile .bio_history form,
#profile .pending_revisions form {
    text-align: right;
}

#profile .button.remove_all {
    cursor: pointer;
}

#profile>div .controls>div:first-child:not(.editable) {
    position: relative;
}

#profile>div .controls>div:first-child:not(.editable)>div:first-child,
#profile .revision_author>div.label {
    display: inline-block;
}

#profile .revision_author {
    opacity: 0.5;
}

#profile #revision_settings>div:last-child .button:not(:last-child),
#profile .bio_history .button:not(:last-child),
#profile .pending_revisions .button:not(:last-child),
#profile .revision_author>div.label {
    margin-right: 0.2em;
}

#profile .controls .text_formatting {
    position: absolute;
    top: 0;
    right: 0;
}

#profile .controls .text_formatting a {
    color: inherit;
    text-decoration: underline;
    opacity: 0.5;
}

#profile .controls .text_formatting a:hover {
    color: #fff;
    opacity: 1;
}

#profile>div .pending_revisions>.editable,
#profile>div .controls>.editable {
    white-space: pre;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
}

#profile>div .controls>.editable {
    /* padding: 18.25px; */
    background: #0d0d0d;
    -webkit-box-shadow: inset 0px 0px 30px 2px rgb(0 0 0 / 50%);
    -moz-box-shadow: inset 0px 0px 30px 2px rgb(0 0 0 / 50%);
    box-shadow: inset 0px 0px 30px 2px rgb(0 0 0 / 50%);
}

#profile .quick_buttons {
    text-align: center;
    padding: 0;
    margin-bottom: 0;
}

#profile .quick_buttons>span:before {
    content: "|";
    font-size: 1.5em;
}

#profile .quick_buttons>div {
    display: inline-block;
    margin: 0 10px;
    font-size: 1.5em;
    font-variant: small-caps;
    -webkit-transition: color 100ms linear;
    -moz-transition: color 100ms linear;
    transition: color 100ms linear;
}

#profile .quick_buttons>div:hover {
    color: #fff;
    cursor: pointer;
}

#profile:not(.logged_in) .quick_buttons,
#profile:not(.logged_in) .edit,
#profile:not(.is_self) .button.approve,
#profile:not(.is_self) .button.remove_all,
#profile:not(.revisions_allowed) .button.update,
#profile:not(.is_self)>div:not(.bio) .edit,
#profile:not(.revisions_allowed)>div.bio .edit,
#profile #pending_revisions_title.inactive,
#profile #bio_history_title.inactive,
#profile .user_bio:not(.editing) .editable,
#profile .websites:not(.editing) .editable,
#profile .bio:not(.editing) .controls,
#profile .user_bio.editing .content,
#profile .pending_revisions.inactive,
#profile .bio_history.inactive,
#profile .websites.editing .content {
    display: none;
}

#profile:not(.is_self)>div .controls>form>div {
    visibility: hidden;
}

#profile .menu_inspect .buttons {
    top: 10px;
    right: 10px;
}

#profile .action_bar_button {
    position: relative;
    width: 1.8em;
    height: 1.8em;
    margin: 0.05em;
    pointer-events: all;
    overflow: hidden;
}

#profile .action_bar_button>div {
    position: relative;
    width: 100%;
    height: 100%;
}

#profile .action_bar_button>div>div {
    background: #000 none no-repeat center center;
    background-size: auto 92.2523%;
    width: 100%;
    height: 100%;
}

#profile .action_bar_button>div:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/media/gui/64/status_frame_square.png');
    background-image: -webkit-image-set(url('/media/gui/64/status_frame_square.png') 1x, url('/media/gui/128/status_frame_square.png') 2x);
    background-image: image-set(url('/media/gui/64/status_frame_square.png') 1x, url('/media/gui/128/status_frame_square.png') 2x);
    background-size: 100%;
}

#profile .action_bar_button.desires>div>div {
    background-image: url("/media/effects/64/addiction.png");
    background-image: -webkit-image-set(url('/media/effects/64/addiction.png') 1x, url('/media/effects/128/addiction.png') 2x);
    background-image: image-set(url('/media/effects/64/addiction.png') 1x, url('/media/effects/128/addiction.png') 2x);
}

#profile .action_bar_button.focus>div>div {
    background-image: url("/media/effects/64/disease.png");
    background-image: -webkit-image-set(url('/media/effects/64/disease.png') 1x, url('/media/effects/128/disease.png') 2x);
    background-image: image-set(url('/media/effects/64/disease.png') 1x, url('/media/effects/128/disease.png') 2x);
}

#profile .action_bar_button.cards>div>div {
    background-image: url("/media/effects/64/curse.png");
    background-image: -webkit-image-set(url('/media/effects/64/curse.png') 1x, url('/media/effects/128/curse.png') 2x);
    background-image: image-set(url('/media/effects/64/curse.png') 1x, url('/media/effects/128/curse.png') 2x);
}

#profile .action_bar_button.passives>div>div {
    background-image: url("/media/effects/64/poison.png");
    background-image: -webkit-image-set(url('/media/effects/64/poison.png') 1x, url('/media/effects/128/poison.png') 2x);
    background-image: image-set(url('/media/effects/64/poison.png') 1x, url('/media/effects/128/poison.png') 2x);
}

#profile .menu_inspect>.expansion {
    position: relative;
    transform: none;
    max-width: 576px;
    margin: 0 auto;
}

#profile .menu_inspect>.expansion>div {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

#profile .menu_inspect.passives>.content,
#profile .menu_inspect.focus>.content,
#profile .menu_inspect.desires>.content,
#profile .menu_inspect.cards>.content {
    display: none;
}

#character_limit {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    background: #000;
    border: 2px solid #fff;
    font-size: 19.2px;
    word-wrap: break-word;
    pointer-events: none;
    transform: translateY(-50%);
    filter: brightness(0.5);
    z-index: 20;
}

#character_limit.inactive {
    opacity: 0;
}