body {
    margin: 0;
}

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.alert-danger {
    color: var(--DS-color-content-danger-default-rest);
    background-color: var(--DS-color-surface-danger-subdued-rest);
    border-color: var(--DS-color-border-danger-default-rest);
}

.alert-warning {
    color: var(--DS-color-content-danger-warning-rest);
    background-color: var(--DS-color-surface-warning-subdued-rest);
    border-color: var(--DS-color-border-warning-default-rest);
}

.alert-success {
    color: var(--DS-color-content-success-warning-rest);
    background-color: var(--DS-color-surface-success-subdued-rest);
    border-color: var(--DS-color-border-success-default-rest);
}

.w-100 {
    width: 100%;
}

.text-danger {
    color: var(--DS-color-surface-danger-default-rest);
}

.p-4 {
    padding: 1.5rem;
}

.navigation-drawer {
    --dxbl-drawer-separator-border-width: 0;
}

.menu-item {
    --dxbl-menu-item-color: #fff;
    --dxbl-menu-item-image-color: #fff;
}

[data-fluent-darkmode] .dxbl-theme-fluent .welcome-card {
    color: var(--DS-primary-70);
}

.icon {
    --icon-width: 1.25rem;
    --icon-height: 1.25rem;
    --icon-back-mask-image: url("/images/back-fluent.svg");
    --icon-close-mask-image: url("/images/close-fluent.svg");
    --icon-menu-mask-image: url("/images/menu-fluent.svg");
    --icon-docs-mask-image: url("/images/doc-fluent.svg");
    --icon-demos-mask-image: url("/images/demos-fluent.svg");
    --icon-home-mask-image: url("/images/home-fluent.svg");
    --icon-weather-mask-image: url("/images/weather-fluent.svg");
    --icon-counter-mask-image: url("/images/counter-fluent.svg");
    --icon-log-in-mask-image: url("/images/account/log-in-fluent.svg");
    --icon-log-out-mask-image: url("/images/account/log-out-fluent.svg");
    --icon-add-mask-image: url("/images/add-fluent.svg");
    --icon-delete-mask-image: url("/images/delete-fluent.svg");
    --icon-user-mask-image: url("/images/account/user-fluent.svg");
    --icon-profile-mask-image: url("/images/account/manage-profile-fluent.svg");
    --icon-email-mask-image: url("/images/account/manage-email-fluent.svg");
    --icon-two-factor-mask-image: url("/images/account/manage-two-factor-fluent.svg");
    --icon-password-mask-image: url("/images/account/manage-password-fluent.svg");
    --icon-personal-mask-image: url("/images/account/manage-personal-fluent.svg");
    --icon-external-mask-image: url("/images/account/user-fluent.svg");
    --icon-settings-mask-image: url("/images/account/settings-fluent.svg");
}

/* === BASE TOOLBAR ICON === */
.dxbl-image {
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 6px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}

.dxbl-toolbar .dxbl-btn {
    background: transparent;
    border-radius: 6px;
    padding: 6px 10px;
    transition: background-color .15s ease, box-shadow .15s ease;
}

    .dxbl-toolbar .dxbl-btn:hover {
        background-color: rgba(0,0,0,.06);
        box-shadow: 0 2px 6px rgba(0,0,0,.12);
    }


.dxbl-menu-item:hover {
    background-color: rgba(0,0,0,.06);
}

.dxbl-menu-item:hover {
    background-color: rgba(0,120,212,.08);
}

.dxbl-image.grid-toolbar-column-chooser {
    background-image: url("/images/column-chooser-fluent.svg");
}

.dxbl-image.grid-toolbar-export {
    background-image: url("/images/export-fluent.svg");
}

.dxbl-image.grid-toolbar-document-csv {
    background-image: url("/images/document-csv-fluent.svg");
}

.dxbl-image.grid-toolbar-document-xls {
    background-image: url("/images/document-xls-fluent.svg");
}

.dxbl-image.grid-toolbar-document-xlsx {
    background-image: url("/images/document-xlsx-fluent.svg");
}

.dxbl-image.grid-toolbar-document-pdf {
    background-image: url("/images/document-pdf-fluent.svg");
}



.icon-external-provider {
    --icon-provider-width: 1.25rem;
    --icon-provider-height: 1.25rem;
}

.icon-google {
    --icon-provider-background-image: url("/images/account/providers/google-logo-fluent.svg");
}

.icon-facebook {
    --icon-provider-background-image: url("/images/account/providers/facebook-logo-fluent.svg");
}

.icon-microsoft {
    --icon-provider-background-image: url("/images/account/providers/microsoft-logo-fluent.svg");
}

/* === FIX for mask-based icons (add / delete) === */
.icon-add,
.icon-edit,
.icon-delete,
.icon-survey,
.icon-report,
.icon-people,
.icon-home,
.icon-briefcase,
.icon-list,
.icon-questions,
.icon-settings,
.icon-location {
    display: inline-block;
    width: var(--icon-width);
    height: var(--icon-height);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.icon-add {
    --icon-mask-image: url("/images/add-fluent.svg");
}

.icon-edit {
    --icon-mask-image: url("/images/edit-fluent.svg");
}

.icon-delete {
    --icon-mask-image: url("/images/delete-fluent.svg");
}

.icon-survey {
    --icon-mask-image: url("/images/survey-fluent.svg");
}

.icon-report {
    --icon-mask-image: url("/images/report-fluent.svg");
}

.icon-people {
    --icon-mask-image: url("/images/people-fluent.svg");
}

.icon-home {
    --icon-mask-image: url("/images/home-fluent.svg");
}

.icon-briefcase {
    --icon-mask-image: url("/images/briefcase-fluent.svg");
}

.icon-list {
    --icon-mask-image: url("/images/list-fluent.svg");
}

.icon-questions {
    --icon-mask-image: url("/images/questions-fluent.svg");
}

.icon-settings {
    --icon-mask-image: url("/images/account/settings-fluent.svg");
}

.icon-location {
    --icon-mask-image: url("/images/location-fluent.svg");
}

.icon-twitter {
    --icon-provider-background-image: url("/images/account/providers/x-logo-fluent.svg");
}