#qrblocks-dialog-background > .dialog-container.mailing-list-container {
    width: 500px;
    text-align: start;
    margin: auto;
}

.app.mailing-list + .section.profile > .profile-photo:empty {
    border: red 1px solid;
    display: none;
}

.mailing-list-form {
    text-align: end;
}

.mailing-list-app {
    padding: 1em;
}

.mailing-list-app .app-content {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    gap: 16px;
    align-items: center;
    align-content: center;
}

.mailing-list-app .app-content > * { 
    cursor: pointer;
    opacity: 0.8;
    text-shadow: 0 0 8px #00000077;
}

.mailing-list-app .app-content:hover > * { 
    opacity: 1.0;
}

.mailing-list-app .app-content > .app-icon > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    width: 100%;
    padding: 0.75em;
    text-decoration: none;
    border-radius: 8px;
    gap: 12px;
}

.mailing-list-app .app-content > .app-icon > a {
    color: var(--link-color);
}

.mailing-list-completed { 
    margin: auto;
    display: inline-block;
}

/* Defined in dialog.css */
.app-dialog-complete { 
    gap: 16px;
}

.app-dialog-complete > * { 
    text-align: start;
}

.app-dialog-complete h3,
.app-dialog-complete h2,
.app-dialog-complete h1 { 
    margin-top: 0;
    margin-bottom: 0;
}

.app-dialog-complete p { 
    line-height: 1.2;
    color: #000000AA;
}

.app-dialog-complete h3 + p,
.app-dialog-complete h2 + p,
.app-dialog-complete h1 + p { 
    padding: 0;
    margin-top: 8px;
}

.app-dialog-complete-icon { 
    color: green;
    font-size: 2em;
}

.light .mailing-list-app .app-content > .app-icon > a {
    background-color: #FFFFFF33; text-shadow: 0 0 8px #00000077;
}

.dark .mailing-list-app .app-content > .app-icon > a {
    background-color: #FFFFFF33; text-shadow: 0 0 8px #00000077;
}

.crimson-red .mailing-list-app .app-content > .app-icon > a {
    background-color: #FFFFFF33; text-shadow: 0 0 8px #00000077;
}

.night-blue .mailing-list-app .app-content > .app-icon > a {
    background-color: #FFFFFF33; text-shadow: 0 0 8px #00000077;
}

.hornet-yellow .mailing-list-app .app-content > .app-icon > a {
    background-color: #FFFFFF33; text-shadow: 0 0 8px #00000077;
}

.nature-brown .mailing-list-app .app-content > .app-icon > a {
    background-color: #FFFFFF33; text-shadow: 0 0 8px #00000077;
}

.forrest-green .mailing-list-app .app-content > .app-icon > a {
    background-color: #FFFFFF33; text-shadow: 0 0 8px #00000077;
}

.plum-purple .mailing-list-app .app-content > .app-icon > a {
    background-color: #00000099; text-shadow: 0 0 8px #00000077;
}


@media (max-width: 768px) {
    #qrblocks-dialog-background > .dialog-container.mailing-list-container.active {
        width: 90%;
        text-align: start;
        margin: auto;
    }

    .mailing-list-form {
        width: unset;
        text-align: start;
        margin: auto;
    }

}