/*#app-profile, header, footer {
	background: #221d2b !important;
}*/

#app-profile {
    width: 100%;
    height: 100%;
}

#app-profile.flex {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

#app-profile .profile-header {
    position: relative;
    width: 100%;
    height: 24rem;

    overflow: hidden;
}

#app-profile .profile-header .background-bg-swept {
   width: 100%;
   height: 100px;

   background-image: url('../images/bg-swept.png');
   background-repeat: repeat-x;
   background-position: center;
   background-size: contain;
   margin-top: -6.25rem;
   position: relative;
}

#app-profile .background-cover {
    width: 100%;
    height: 100%;
    background-size: 50% !important;
    background-repeat: repeat !important;
    background-color: #222;
    background-position: center;
    filter: blur(.5rem);
    transform: scale(1.2);
}

#app-profile .background-cover:not(.default_cover) {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center;
}

#app-profile .background-cover-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .3;
}

#app-profile .background-cover.default_cover {
    background-image: url('../images/default_cover.jpg');

}

#app-profile .profile-body .change-cover {
    margin: .5rem;
    padding: .75rem;
    color: #DDD;
    border: 1px solid #AAA;
    background: #000;
    opacity: .7;
    font-size: 1rem;
    border-radius: .5rem;
    cursor: pointer;
    float: right;
}

#app-profile .profile-body .change-cover:hover {
    opacity: .8;
    color: #EAEAEA;
    border-color: #EAEAEA;
}


#app-profile .profile-body {
    margin: -22rem auto 0 auto;
    border-radius: 1rem;
    width: 64rem;
    min-height: 100vh;

    position: relative;
}

#app-profile .profile-body .cover {
    width: 100%;
    height: 24rem;
    background: #000;
    border-radius: 10px;

    position: relative;
    z-index: 100;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#app-profile .profile-body .cover.default_cover {
    background-image: url('../images/default_cover.jpg');
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

#app-profile .profile-body .photo {
    width: 12rem;
    height: 12rem;
    background: #222;
    border-radius: 6rem;
    border: .25rem solid #4d4d98;
    flex: 0 0 auto;

    z-index: 100;
    margin-top: -7rem;
    position: relative;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#app-profile .profile-body .photo.default_photo {
    background-image: url('../images/default_photo.jpg');
}

#app-profile .profile-body .info {
    padding: .5rem;
    width: 100%;
    height: auto;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

#app-profile .profile-body .info.base {
    padding: .5rem 2rem;
}

#app-profile .profile-body .info.actions {
    justify-content: flex-end;
}

#app-profile .profile-body .user {
    display: flex;
    position: relative;
    flex: 1;
    flex-direction: column;
}

#app-profile .profile-body .user .first {
    display: flex;
    font-size: 2rem;
    gap: .5rem;
    justify-content: center;
    align-items: center;
}

#app-profile .profile-body .user .first .flag {
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 3rem;
    height: 2rem;
}

#app-profile .profile-body .user .first .username {
    font-weight: bold;
    flex: 1;
}

#app-profile .profile-body .user .first .actions {
    font-weight: bold;
    flex: 0 0 auto;
    font-size: 1.5rem;
    cursor: pointer;
    padding: .5rem .75rem;
}

#app-profile .profile-body .user .first .actions:Hover {
    background-color: #4d4d98;
    border-radius: .5rem;
}

#app-profile .profile-body .user .first .menu-actions {
  position: absolute;
  top: 2.75rem;
  right: 0;
  min-width: 12rem;
  background:#4d4d98;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 .5rem 2rem rgba(0,0,0,0.06);
  border-radius: .5rem;
  padding: .25rem;
  transform-origin: top right;
  transform:translateY(-.5rem) scale(.98);
  opacity:0;
  transition:transform .15s ease, opacity .15s ease;
  z-index:1000;
}

#app-profile .profile-body .user .first .menu-actions a:Hover {
  color: #FFF;
}

#app-profile .profile-body .user .first .menu-actions[hidden] { 
    display: none; 
}

#app-profile .profile-body .user .first .menu-actions.open {
  transform:translateY(0) scale(1);
  opacity:1;
}

#app-profile .profile-body .user .first .menu-actions .menu-item {
  padding:1rem;
  font-size:1rem;
  border-radius: .5rem;
}

#app-profile .profile-body .user .first .menu-actions.open .menu-item:hover { 
    background:#7575df; 
    cursor:pointer;
}

#app-profile .profile-body .change-info {
    margin: .5rem;
    padding: .75rem;
    color: #DDD;
    border: 1px solid #AAA;
    background: #000;
    opacity: .7;
    font-size: 1rem;
    border-radius: .5rem;
    cursor: pointer;
    float: right;
}

#app-profile .profile-body .change-info:hover {
    opacity: .8;
    color: #EAEAEA;
    border-color: #EAEAEA;
}

#app-profile .profile-body .user .second {
    display: flex;
    font-size: 1.25rem;
    gap: .5rem;
    flex-direction: column;
}

#app-profile .profile-body .user .second .status {
    color: #6FBAFF;
    flex: 1;
    display: inline-flex;
}

#app-profile .profile-body .user .second .status:Hover {
    color: #9DD0FF;
}

#app-profile .profile-body .change-status {
    padding: 1rem 0;
}

#app-profile .profile-body .actions-fields .action-field {
    cursor: pointer;
    color: #AAA;
    font-size: 1.25rem;
}

#app-profile .profile-body .actions-fields .action-field:Hover {
    color: #EAEAEA;
}

#app-profile .profile-body .user .follow {
    display: inline-flex;
    gap: 1.5rem;
}

#app-profile .profile-body .user .follow .finfo {
    flex: 0 0 auto;
}

#app-profile .profile-body .user .follow .finfo-clickable {
    cursor: pointer;
    transition: color .15s ease;
}

#app-profile .profile-body .user .follow .finfo-clickable:hover,
#app-profile .profile-body .user .follow .finfo-clickable:focus {
    color: #9DD0FF;
    outline: none;
}

input[type="file"]#profile-upload-cover,
input[type="file"]#profile-upload-photo {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

#app-profile .cr-viewport {
    border-radius: .5rem;
}

#app-profile .cr-slider {
    position: absolute;
    top: -25px;
    left: 0;
    background: #CCC;
}

#app-profile .profile-body .cover #profile-crop-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
}

#app-profile .profile-body .cover #profile-crop-cover .body-cover-crop {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

#app-profile .profile-body .cover #profile-crop-cover .cover-crop-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

#app-profile .profile-body .cover #profile-crop-cover .actions-cover {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
}

#app-profile .profile-body .cover #profile-crop-cover .action-cover {
    margin: 1rem;
    padding: 1rem;
    color: #222;
    border: 1px solid #AAA;
    background: #FFF;
    opacity: .5;
    font-size: 1rem;
    border-radius: .5rem;
    cursor: pointer;
    display: inline-block;
}

#app-profile .profile-body .cover #profile-crop-cover .action-cover:hover {
    opacity: .8;
}

#profile-crop-cover #profile-crop-cover-stage {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

#profile-crop-cover #profile-crop-cover-stage.croppie-container,
#profile-crop-cover #profile-crop-cover-stage .croppie-container {
    width: auto !important;
    height: auto !important;
    margin: 0 auto;
}

#profile-crop-cover .cr-boundary {
    margin: 0 auto;
}

#profile-crop-cover .cr-viewport {
    border-radius: 0.5rem;
}

#profile-crop-cover .cr-slider-wrap {
    width: min(100%, 22rem);
    max-width: calc(100% - 1.5rem);
    margin: 0.75rem auto 0;
    box-sizing: border-box;
}

@media screen and (min-width: 769px) {
    #app-profile .profile-body .cover #profile-crop-cover #profile-crop-cover-stage.croppie-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100% !important;
        height: 100% !important;
        margin: 0;
    }

    #app-profile .profile-body .cover #profile-crop-cover #profile-crop-cover-stage .cr-boundary {
        flex: 1 1 auto;
        margin: 0;
        align-self: stretch;
    }

    #app-profile .profile-body .cover #profile-crop-cover .cr-slider-wrap {
        order: -1;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0.55rem 1rem 0.35rem;
        box-sizing: border-box;
        z-index: 5;
        flex: 0 0 auto;
    }

    #app-profile .profile-body .cover #profile-crop-cover .cr-slider {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        background: #CCC;
    }

    #app-profile .profile-body .cover #profile-crop-cover .actions-cover {
        top: 2.85rem;
    }

    #app-profile .profile-body .cover #profile-crop-cover .cr-viewport {
        border-radius: 10px;
    }
}

#app-profile .profile-body .actions-cover {
    position: absolute;
    z-index: 1000;
    right: 0;
}

#app-profile .profile-body .action-cover {
    margin: 1rem;
    padding: 1rem;
    color: #222;
    border: 1px solid #AAA;
    background: #FFF;
    opacity: .5;
    font-size: 1rem;
    border-radius: .5rem;
    cursor: pointer;
    display: inline-block;
}

#app-profile .profile-body .action-cover:hover {
    opacity: .8;
}

#app-profile .profile-body .change-photo {
    width: 3rem;
    height: 3rem;
    padding: .5rem;
    color: #EAEAEA;
    border: 1px solid #EAEAEA;
    background: #000;
    opacity: .6;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 1.5rem;
    position: absolute;
    bottom: 0rem;
    right: 0rem;
}

#app-profile .profile-body .change-photo:hover {
    opacity: .8;
    border: 1px solid #CCC;
}


#app-profile .profile-body .actions-fields {
    padding: 1rem;
    display: flex;
    gap: 2rem;
}

#app-profile .profile-body .badges {
    min-width: 13.5rem;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    align-items: center;
    justify-content: start;
}

#app-profile .profile-body .badges .add {
    width: 12.5rem;
    min-height: 2.65rem;
    padding: 0.65rem 0.85rem;
    border: 1px dashed var(--fnc-border-strong, rgba(255, 255, 255, 0.18));
    border-radius: var(--fnc-radius-pill, 999px);
    text-align: center;
    margin: 0.35rem auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--fnc-text-muted, rgba(235, 235, 245, 0.58));
    transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

#app-profile .profile-body .badges .add:hover {
    border-color: var(--fnc-accent, #7c3aed);
    color: var(--fnc-accent, #7c3aed);
    background: var(--fnc-accent-soft, rgba(124,58,237,0.1));
}

#app-profile .profile-body .badges .profile-app-badge {
    margin: 0.35rem auto;
}

#app-profile .profile-body .actions {
    flex: 0 0 auto;
    display: flex;
    align-items: end;
    align-self: flex-start;
    justify-content: center;
}

#app-profile .profile-body .actions.list {
    width: 13.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

#app-profile .profile-body .actions .follow.profile-follow-btn,
#app-profile .profile-body .actions .profile-follow-btn,
#app-profile .profile-body .actions .profile-message-btn {
    flex: 1;
    padding: .75rem 2rem;
    color: #D2D2F0 !important;
    background: #4d4d98 !important;
    border-radius: .5rem;
    cursor: pointer;
    border: 0;
    display: flex;
    gap: .5rem;
    align-items: center;
    width: 13.25rem;
    height: 3rem;
    justify-content: center;
    font-weight: 600;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    text-decoration: none;
    box-sizing: border-box;
}

#app-profile .profile-body .actions .profile-message-btn {
    background: #2f5f8a !important;
}

#app-profile .profile-body .actions .follow.profile-follow-btn:Hover,
#app-profile .profile-body .actions .profile-follow-btn:Hover {
    background: #7575df !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

#app-profile .profile-body .actions .profile-message-btn:Hover {
    background: #3d7eb5 !important;
}

#app-profile .profile-body .actions .follow.profile-follow-btn[disabled],
#app-profile .profile-body .actions .profile-follow-btn[disabled],
#app-profile .profile-body .actions .follow.profile-follow-btn[disabled]:Hover,
#app-profile .profile-body .actions .profile-follow-btn[disabled]:Hover {
    background: #444 !important;
    color: #222 !important;
    cursor: default;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

#app-profile .profile-body .actions form {
    display: inline-block;
}

#app-profile-modal {
    position: fixed;
    background: rgba(0,0,0,.5);

    width: 100%;
    height: 100%;
    z-index: 10000;

    display: flex;
    justify-content: center;
    align-items: center;
}

#app-profile-modal .modal {
    width: 50%;
    padding: 1rem;
    background: #222;
    border-radius: .5rem;
    overflow: auto;
    flex: 0 0 auto;
}

#app-profile-modal .modal .body {
    padding: 1rem;
    width: 100%;
}

#app-profile-modal .modal .options {
    padding: .25rem;
    width: 100%;
    gap: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

#app-profile-modal .modal .options .option {
    flex: 0 0 auto;
}

#app-profile-modal .modal .modal-loader {
    text-align: center;
}

#app-profile-modal .modal.profile-follow-list-modal {
    width: min(92vw, 28rem);
    max-height: min(85vh, 32rem);
    display: flex;
    flex-direction: column;
    padding: 0;
}

#app-profile-modal .profile-follow-list-title {
    padding: 1rem 1rem .5rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #EAEAEA;
}

#app-profile-modal .profile-follow-list-body {
    flex: 1 1 auto;
    min-height: 8rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0 1rem;
}

#app-profile-modal .profile-follow-list-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: inherit;
    text-decoration: none;
}

#app-profile-modal .profile-follow-list-item:last-child {
    border-bottom: 0;
}

#app-profile-modal .profile-follow-list-item:hover {
    color: #9DD0FF;
}

#app-profile-modal .profile-follow-list-photo {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #333;
}

#app-profile-modal .profile-follow-list-photo.default_photo {
    background-image: url('../images/default_photo.jpg');
}

#app-profile-modal .profile-follow-list-meta {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

#app-profile-modal .profile-follow-list-name {
    font-weight: 600;
    word-break: break-word;
}

#app-profile-modal .profile-follow-list-status {
    font-size: .9rem;
    color: #AAA;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#app-profile-modal .profile-follow-list-empty {
    padding: 1rem 0 1.5rem;
    color: #AAA;
    text-align: center;
}

#app-profile-modal .profile-follow-list-loader {
    text-align: center;
    padding: .5rem 0 1rem;
}

#app-profile-modal .modal.profile-follow-list-modal .options {
    padding: .75rem 1rem 1rem;
}

#modal-photo {
    position: fixed;
    background: rgba(0,0,0,.5);

    width: 100%;
    height: 100%;
    z-index: 100000000;

    display: flex;
    justify-content: center;
    align-items: top;
}

#modal-photo .body-photo {
    width: auto;
    padding: 1rem;
    background: #222;
    border-radius: .5rem;
    height: auto;
    max-height: 42.5rem;
    overflow: hidden;
    margin-bottom: 3rem;
}

#modal-photo .body-photo .photo-content {
    padding: 1rem;
    overflow-y: auto;
    height: 100%;
}

#modal-photo .body-photo .croppie-container  {
    height: auto !important;
}

#modal-photo .actions-photo {
    width: 100%;
    text-align: center;
}

#modal-photo .action-photo {
    margin: 1rem;
    padding: 1rem;
    color: #FFF;
    border: 1px solid #AAA;
    background: #000;
    opacity: .5;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
}

#modal-photo .action-photo:hover {
    opacity: .8;
}

#app-profile .accent {
    cursor: pointer;
}

#app-profile .modules {
    padding: 1rem;
    width: 100%;
    display: flex;
}

#app-profile .modules .items {
    width: 25%;
    flex: 0 0 auto;
}

#app-profile .modules .items .item {
    padding: 1rem;
    border-radius: .5rem 0 0 .5rem;
    font-weight: bold;
}

#app-profile .modules .items .item.active {
    background: #2e273b;
}

#app-profile .modules .items .item:Hover:not(.active) {
    background: #4d4261;
    cursor: pointer;
}

#app-profile .modules .module {
    flex: 1;
    background: #2e273b;
    border-radius: 0px .5rem .5rem 0;
}

#app-profile .profile-body .module .sheet {
    padding: 1rem;
    width: 100%;
    height: 100%;
    text-align: justify; 
}

#app-profile textarea  {
    width: 100%;
    resize: vertical;
    line-height: 1.4;
    padding: 1rem;
    border: 1px solid #444;
    border-radius: .5rem;
}

#app-profile .unavailable {
    text-align: justify;
    flex: 0 0 auto;
    width: 50%;
    max-width: 36rem;
    padding: 1rem;
    border-radius: .5rem;
    border: 1px solid #777;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

#app-profile .unavailable .unavailable-message,
#app-profile .unavailable .txt-center {
    text-align: center;
}

#app-profile .unavailable .unavailable-message h3,
#app-profile .unavailable .txt-center h3 {
    margin-top: 0;
}

#app-profile .unavailable .options {
    width: 100%;
    gap: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

#app-profile .unavailable .options .option {
    flex: 0 0 auto;
}



#app-profile .profile-suspended-admin-strip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.85rem 1.25rem;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	letter-spacing: 0.02em;
	color: #fff8f5;
	background: #8b2430;
	position: sticky;
	top: 5rem;
	z-index: 900;
	width: 100%;
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

#app-profile .profile-suspended-admin-strip::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: #ffb84d;
	box-shadow: none;
}

@media screen and (max-width: 1024px) 
{
    .profile-body
    {
        width: 100% !important;
        border-radius: 0 !important;
    }

    #app-profile .profile-body .cover
    {
        border-radius: 0;
    }
}

@media screen and (max-width: 799px)
{
	#app-profile .profile-body .info.base,
	#app-profile .profile-body > .info:not(.base):not(.actions) {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
		text-align: center;
		box-sizing: border-box;
	}

	#app-profile .profile-body .info.base {
		padding-top: 0.5rem;
		padding-bottom: 0.75rem;
	}

	#app-profile .profile-body > .info:not(.base):not(.actions) {
		gap: 1rem;
		padding-bottom: 1.25rem;
	}

	#app-profile .profile-body .info.base .photo {
		margin-left: auto;
		margin-right: auto;
	}

	#app-profile .profile-body .user {
		align-items: center;
		width: 100%;
		max-width: 22rem;
		margin: 0 auto;
	}

	#app-profile .profile-body .user .first {
		display: grid;
		grid-template-columns: 3rem 1fr 3rem;
		align-items: center;
		width: 100%;
		max-width: 100%;
		padding: 0;
		box-sizing: border-box;
		column-gap: 0.35rem;
	}

	#app-profile .profile-body .user .first .flag {
		grid-column: 1;
		grid-row: 1;
		justify-self: center;
		width: 2.5rem;
		height: 1.65rem;
	}

	#app-profile .profile-body .user .first .username {
		grid-column: 2;
		grid-row: 1;
		flex: none;
		width: auto;
		max-width: 100%;
		min-width: 0;
		text-align: center;
		justify-self: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	#app-profile .profile-body .user .first .actions {
		grid-column: 3;
		grid-row: 1;
		position: relative;
		top: auto;
		right: auto;
		transform: none;
		justify-self: end;
		padding: 0.35rem 0.25rem;
	}

	#app-profile .profile-body .user .first .menu-actions {
		right: 0;
		left: auto;
		top: 2.5rem;
	}

	#app-profile .profile-body .user .second {
		align-items: center;
		width: 100%;
	}

	#app-profile .profile-body .user .second .status {
		justify-content: center;
		text-align: center;
		width: 100%;
	}

	#app-profile .profile-body .user .follow {
		justify-content: center;
		width: 100%;
		gap: 1.25rem;
	}

	#app-profile .profile-body .actions {
		align-self: center;
		width: 100%;
		max-width: 20rem;
		justify-content: center;
	}

	#app-profile .profile-body .actions.list {
		width: 100%;
		max-width: 20rem;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.55rem;
	}

	#app-profile .profile-body .actions form {
		display: block;
		width: 100%;
		margin: 0 auto;
	}

	#app-profile .profile-body .actions .follow,
	#app-profile .profile-body .actions .profile-message-btn {
		width: 100%;
		max-width: 20rem;
		margin: 0 auto;
		box-sizing: border-box;
	}

	#app-profile .profile-body .badges {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 20rem;
		min-width: 0;
		margin: 0 auto;
	}

	#app-profile .profile-body .badges .profile-app-badge,
	#app-profile .profile-body .badges .profile-app-badge.full,
	#app-profile .profile-body .badges .add,
	#app-profile .profile-body .badges a {
		margin-left: auto;
		margin-right: auto;
	}

	#app-profile .profile-body .profile-app-badge.full {
		margin-left: auto;
		margin-right: auto;
		justify-content: center;
	}

	#app-profile .profile-body .profile-app-badge.full i,
	#app-profile .profile-body .profile-app-badge.full .name {
		margin-left: 0;
	}

	#app-profile .profile-body .info.actions {
		justify-content: center;
		width: 100%;
	}
}

@media screen and (max-width: 768px)
{
	#profile-crop-cover {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100000010;
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		box-sizing: border-box;
		overflow: hidden;
		background: rgba(0, 0, 0, 0.94);
		border-radius: 0;
		flex-direction: column;
		align-items: stretch;
		justify-content: stretch;
	}

	#profile-crop-cover .body-cover-crop {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding-top: calc(var(--fnc-header-height, 5rem) + 0.35rem);
		box-sizing: border-box;
		overflow: hidden;
	}

	#profile-crop-cover .cover-crop-content {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	#profile-crop-cover .cr-viewport {
		border-radius: 0;
	}

	#profile-crop-cover .cr-slider-wrap {
		width: min(100%, 22rem);
		max-width: calc(100vw - 1.5rem);
		margin: 0.75rem auto 0;
	}

	#profile-crop-cover .cr-slider {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		max-width: 100%;
	}

	#profile-crop-cover .actions-cover {
		position: relative;
		top: auto;
		right: auto;
		flex: 0 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		gap: 0.5rem;
		width: 100%;
		padding: 0.75rem;
		padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(10, 10, 14, 0), rgba(10, 10, 14, 0.96) 35%);
	}

	#profile-crop-cover .action-cover {
		margin: 0;
		padding: 0.75rem 0.85rem;
		flex: 1 1 calc(50% - 0.5rem);
		max-width: calc(50% - 0.25rem);
		text-align: center;
		font-size: 0.85rem;
		box-sizing: border-box;
		color: #222;
		border: 1px solid #AAA;
		background: #FFF;
		opacity: .85;
		border-radius: .5rem;
		cursor: pointer;
	}

	#profile-crop-cover .action-cover:hover {
		opacity: 1;
	}

	#profile-crop-cover .action-cover#profile-upload-cover-loading {
		flex: 1 1 100%;
		max-width: 100%;
	}

	#modal-photo {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		align-items: stretch;
		justify-content: stretch;
		padding: 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	#modal-photo .body-photo {
		width: 100%;
		max-width: 100vw;
		height: 100%;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0;
		display: flex;
		flex-direction: column;
		padding:
			calc(var(--fnc-header-height, 5rem) + 0.35rem)
			0
			0;
		box-sizing: border-box;
		overflow: hidden;
	}

	#modal-photo .body-photo .photo-content {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		padding: 0.5rem 0.75rem 0;
		overflow: hidden;
		box-sizing: border-box;
	}

	#modal-photo #profile-crop-photo,
	#modal-photo #profile-crop-photo .croppie-container {
		flex: 1 1 auto;
		min-height: 0;
		width: 100% !important;
		max-width: 100%;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
	}

	#modal-photo .body-photo .croppie-container .cr-boundary {
		transform: scale(min(1, calc((100vw - 1.5rem) / 500)));
		transform-origin: center center;
		flex: 0 0 auto;
	}

	#modal-photo #profile-crop-photo .cr-slider-wrap {
		order: 1;
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		margin-top: calc((100vw - 1.5rem) / 2 - 250px);
		padding: 0.35rem 1rem;
		box-sizing: border-box;
		flex: 0 0 auto;
		z-index: 5;
	}

	#modal-photo #profile-crop-photo .cr-slider {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		max-width: 100%;
		background: #CCC;
	}

	#modal-photo .actions-photo {
		flex: 0 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		width: 100%;
		padding: 0.75rem;
		padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(10, 10, 14, 0), rgba(10, 10, 14, 0.96) 35%);
	}

	#modal-photo .action-photo {
		margin: 0;
		padding: 0.75rem 0.85rem;
		flex: 1 1 calc(50% - 0.5rem);
		max-width: calc(50% - 0.25rem);
		font-size: 0.85rem;
		box-sizing: border-box;
		text-align: center;
	}

	#modal-photo .action-photo#profile-upload-photo-loading {
		flex: 1 1 100%;
		max-width: 100%;
	}
}