.podex-ass-container {
    background: url('/assets/img/registration-loading-bg-min.png') top/cover no-repeat;
}

.ass-container {
    width: 232px;
    height: 127px;
    margin-top: 163px;

    background: url('/assets/img/ass-bg-min.png') center/cover no-repeat;

    @media (min-width: 576px) {
        width: 275px;
        height: 150px;
        margin-top: 163px;
    }

    @media (min-width: 992px) {
        margin-top: 220px;
    }

    @media (min-width: 1200px) {
        margin-top: 265px;
    }
}

.app-tool-bar .mud-toolbar {
    justify-content: space-between;
}

.no-radio .mud-button-root.mud-icon-button.mud-ripple.mud-ripple-radio {
    display: none;
}

.gallery-item button {
    background: #dddddd;
    position: relative;
    top: -145px;
    left: -16px;
}

.gallery-item button:hover {
    background: #e2e2e2;
}

.selected-nav-link .mud-nav-link.mud-ripple {
    color: var(--mud-palette-primary);
    background-color: var(--px-surface-input);
}

.profile-online-badge .mud-badge-dot {
    margin-top: -6px;
    margin-left: -8px;
    width: 17px;
    height: 17px;
}

.guest-host-online-badge {
    vertical-align: middle;
}

.guest-host-online-badge .mud-badge-dot {
    width: 13px;
    height: 13px;
}

.party-picture-container {
    display: flex;
    min-height: 100%;
}

.party-picture-card {
    border-radius: 4px 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
    object-fit: cover;
    height: 100%;
    width: 100%;

    @media (min-width: 576px) {
        border-radius: 4px 0 0 4px;
        min-height: 100%!important;
        width: 450px;
    }
}

.profile-status-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
}

.profile-status-pill,
.party-status-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--pallette-form-input-background);
    border-radius: 8px;
    font-size: 15px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-status-pill.button,
.party-status-pill.button {
    cursor: pointer;
}
.profile-status-pill.button:hover,
.party-status-pill.button:hover {
    cursor: pointer;
    background: var(--pallette-form-input-custom-hover);
}

.profile-status-pill .online-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.profile-gallery-overlay,
.party-gallery-overlay {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.profile-picture-feedback-pill {
    background-color: var(--pallette-form-input-background);
    height: 34px;
    width: 64px;
    border-radius: 8px;
    font-size: 15px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-picture-wrapper,
.party-picture-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 10px 10px 0 0!important;

    @media (min-width: 576px) {
        border-radius: 10px 0 0 0!important;
    }
}

.profile-picture-wrapper.empty,
.party-picture-wrapper.empty {
    background: linear-gradient(135deg, rgb(31, 31, 31) 0%, var(--mud-palette-primary) 100%);
}

.profile-picture,
.party-picture {
    height: 100%!important;
    object-fit: cover!important;
    vertical-align: middle;
    width: 550px;

    @media (min-width: 576px) {
        height: 100%;
        width: 405px;
    }
}

.party-card-guests {
    width: 100%;

    @media (min-width: 576px) {
        min-height: 350px!important;
    }
}

.drop-zone-hover {
    background-color: var(--mud-palette-primary);
}

.gallery-checkbox .mud-button-root {
    position: absolute;
    left: 176px;
    top: 176px;
    background-color: #ffffff;
    box-shadow: none !important;
    padding: 0;
    border-radius: 15% 0 0 0;
}

.gallery-checkbox-xs .mud-button-root {
    position: absolute;
    left: 76px;
    top: 76px;
    background-color: #ffffff;
    box-shadow: none !important;
    padding: 0;
    border-radius: 15% 0 0 0;
}

.thumbnails-container {
    overflow-x: auto;
    width: 95%;

    @media (max-width: 600px) {
        padding-left: 190px;
    }
}

.thumbnails-image {
    max-height: 60vh;

    @media (min-width: 900px) {
        max-height: 75vh;
    }
}

.image-preview-button-left {
    position: absolute;
    background-color: #ffffff40;
    left: 5px;
}

.image-preview-button-right {
    position: absolute;
    right: 5px;
    background-color: #ffffff40;
}

.red-line-vertical {
    width: 4px;
    background-color: var(--mud-palette-primary);
    align-self: stretch;
    border-radius: 1px;
}

.text-error {
    color: var(--mud-palette-error);
}