:root {
    --status-direct: #e50a0a;
    --status-private: #ddb02a;
    --status-unlisted: #6ea95b;
    --status-public: #459ae5;
    --status-announcement: #2b90d9;
}

/* Background */
body {
    background-image: url(/system/site_uploads/files/000/000/002/original/Practice_by_Job_Menting.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;

    .columns-area__panels__pane.columns-area__panels__pane--compositional {

        .columns-area__panels__pane__inner {

            .compose-panel {

                .compose-form,
                .link-footer {
                    background-color: var(--background-color-tint);
                    padding: 5px;
                }

                .server-banner {
                    background-color: var(--background-color-tint);
                    padding: 5px;

                    .image {
                        background: none;
                    }
                }
            }
        }
    }

    .columns-area__panels__main {

        .tabs-bar__wrapper {
            background: none;
            backdrop-filter: unset;

            #tabs-bar__portal {
                background-color: var(--background-color-tint);
            }
        }
        .columns-area.columns-area--mobile {
            background-color: var(--background-color-tint);
        }
    }

    .columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational {

        .columns-area__panels__pane__inner {
            background-color: var(--background-color-tint);
        }
    }

    .columns-area {

        .drawer {

            .drawer__header {
                background-color: var(--background-color-tint);
            }
        }

        .column {

            >div {
                background-color: var(--background-color-tint);
            }
        }
    }

    .admin-wrapper {

        .content-wrapper {
            background: var(--background-color);
        }
    }

    .form-container {
        background: var(--background-color);
    }
}

/* Mascot */
.compose-panel .compose-form,
.page-header {
  background-image: url(/system/site_uploads/files/000/000/001/original/72243_RoleplayMonster_LOGO_A_04_cut.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  margin-bottom: 5px;
}
.compose-panel .compose-form {
    margin-bottom: 5px;
}

/* Branding colores */
.firstpart {
  font-family: "Dancing Script", cursive;
  color: #078d4e;
}
.lastpart {
  font-family: "Dancing Script", cursive;
  color: #dd6418;
}

/* Colorize post visibility status */
span.status__visibility-icon svg.icon.icon-at,
div.detailed-status__meta svg.icon.icon-at,
div.privacy-dropdown__option__icon svg.icon.icon-at,
button.dropdown-button svg.icon.icon-at {
  color: var(--status-direct);
}
span.status__visibility-icon svg.icon.icon-lock,
div.detailed-status__meta svg.icon.icon-lock,
div.privacy-dropdown__option__icon svg.icon.icon-lock,
button.dropdown-button svg.icon.icon-lock {
  color: var(--status-private);
}
span.status__visibility-icon svg.icon.icon-unlock,
div.detailed-status__meta svg.icon.icon-unlock,
div.privacy-dropdown__option__icon svg.icon.icon-unlock,
button.dropdown-button svg.icon.icon-unlock {
  color: var(--status-unlisted);
}
span.status__visibility-icon svg.icon.icon-globe,
div.detailed-status__meta svg.icon.icon-globe,
div.privacy-dropdown__option__icon svg.icon.icon-globe,
button.dropdown-button svg.icon.icon-globe {
  color: var(--status-public);
}
button.column-header__button i.icon-with-badge svg.icon.icon-bullhorn {
  color: var(--status-announcement) !important;
}


.user-role-3 {
  --user-role-accent: #dd6418;
}

.user-role-2 {
  --user-role-accent: #dd6418;
}

.user-role-1 {
  --user-role-accent: #078d4e;
}