body {
    background-color: #FEFEFE;
    background-image: url(/admin-assets/images/backgrounds/noise-100x100-soft.png);
}

.main {
    min-height: 100vh;
    max-height: 100vh;
    width: 100vw;
}

/* no horizontal scrolling on mobile */
body:has(.main.mobile) {
    max-width: 100%;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 9px;
}

::-webkit-scrollbar-track {
}

::-webkit-scrollbar-thumb {
    background-color: rgba(155, 155, 155, 0.5);
    border-radius: 20px;
    border: transparent;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(155, 155, 155, 0.8);
}

/* ---- COMMON ---------------------------------------------------------------------------------- */

.ui.nowrap {
    white-space: nowrap;
}

/* ---- SIDEBAR ---------------------------------------------------------------------------------- */

.main .sidebar-container > .backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1998;
    overflow: hidden;
}

.main .sidebar-container > .sidebar {
    z-index: 1999 !important;
}

.main .sidebar-container > .sidebar .ui.accordion .ui.item {
    padding-top: 12px;
    padding-bottom: 12px;
}

.main .sidebar-container > .sidebar .ui.accordion .ui.active.content .ui.item {
    background-color: #1e2129;
}

/* ---- TOOLBAR ---------------------------------------------------------------------------------- */

.page-container > .toolbar {
    position: sticky;
    top: 0;
    z-index: 999 !important;

    /*-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.125);*/
    /*-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.125);*/
    /*box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.125);*/
}

.page-container > .toolbar .avatar {
    padding-right: 10px;
}

.page-container > .toolbar .avatar img {
    border-radius: 50%;
    max-height: 32px;
    max-width: 32px;
}

/* ---- CONTENT ---------------------------------------------------------------------------------- */

.page-container > .content .page-header {
    position: sticky;
    top: 57px;
    z-index: 990;
    padding-top: 40px;
    padding-bottom: 40px;

    -webkit-box-shadow: inset 0px -1px 3px 1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0px -1px 3px 1px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0px -1px 3px 1px rgba(0, 0, 0, 0.25);
}

.main.desktop .page-container > .content .simple-page-header {
    position: sticky;
    z-index: 990;
    top: 56px;
}

.page-container > .content .simple-page-header {
    background-color: #f9fafb;
    background-image: url(/admin-assets/images/backgrounds/noise-100x100-soft.png);
}

.page-container > .content .simple-page-header .ui.horizontal.segments {
    width: 100%;
    margin: 0 0.5rem 0 0.5rem;
}

.page-container > .content .simple-page-header .ui.horizontal.segments > .ui.segment:first-child {
    flex-grow: 0;
    padding-left: 0;
}

.main.desktop .page-container > .content .page-header-segmented {
    position: sticky;
    z-index: 990;
    top: 56px;
}

.page-container > .content .page-header-segmented {
    background-image: url(/admin-assets/images/backgrounds/noise-100x100-soft.png);

    -webkit-box-shadow: inset 0px -1px 5px 1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0px -1px 5px 1px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0px -1px 5px 1px rgba(0, 0, 0, 0.25);
}

.page-container > .content .page-header H1 {
    color: white;
}

.devtools {
    position: fixed;
    bottom: 0;
    right: 0;
}


.main.desktop table.sticky thead tr:first-child > th {
    position: sticky !important;
    top: 190px;
    z-index: 999;
}

.modal-stage {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
}

.responsive-container {
    position: relative;
    padding-bottom: 56%;
    height: 0;
    overflow: hidden;
}

.responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}