@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&display=swap');
@import url('switcher-resources/themes.css');
@import url('switcher-resources/theme-switcher.css');


 .w-100 {
    width: 100% !important;
}

 .cw-240 {
    max-width: 240px;
    width: 100%;
}

 .minw-0 {
    min-width: 0;
}

 .text-decoration-underline {
    text-decoration: underline;
}

 .cw-320 {
    max-width: 320px;
    width: 100%;
}

 .cw-400 {
    max-width: 400px;
    width: 100%;
}

 .cw-480 {
    max-width: 480px;
    width: 100%;
}

 .cw-640 {
    max-width: 640px;
    width: 100%;
}

 .cw-800 {
    max-width: 800px;
    width: 100%;
}

 .cw-880 {
    max-width: 880px;
    width: 100%;
}

.fs-825 {
    font-size: 0.825rem;
}

.tm-8 {
    opacity: 0.8;
}

.toolbar:not(.appbar) {
    padding: 0.5rem 0.5rem;
    margin-bottom: 1rem;
}

.toolbar .title {
    color: var(--dxds-color-content-neutral-default-rest);
    font-family: var(--dxds-font-family-sans-serif);
    font-weight: 400;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin: 0 0.5rem;
    height: 100%;
    display: flex;
    align-items: center;
}

.toolbar .custom-item {
    display: flex;
    height: 100%;
    margin: 0 0.5rem;
}

.main-content .module-content {
    padding: 1.5rem;
}

.content {
    margin: 0 auto;
}


.module-content {
    height: 100%;
    overflow: auto;
}


.content-root {
    height: 100%;
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    .main-content .module-content {
        padding: 0; /* remove padding on small screens */
    }
}

/*    background-color: var(--bs-body-bg, var(--dxbl-body-bg, inherit));*/

:root,
:root[data-bs-theme="light"] {
    --dxds-color-surface-neutral-default-rest: var(--bs-body-bg, #fff);
    --dxds-color-border-neutral-default-rest: var(--bs-border-color, #dee2e6);
    --dxds-font-family-sans-serif: var(--bs-font-sans-serif, system-ui, sans-serif);
    --dxds-font-size-body-1-strong: var(--bs-body-font-size, 1rem);
    --dxds-font-weight-body-1-strong: var(--bs-body-font-weight, 600);
    --dxds-line-height-body-1-strong: var(--bs-body-line-height, 1.5);
    --dxds-font-size-subtitle-2: var(--bs-body-font-size, 1.1rem);
    --dxds-font-weight-subtitle-2: var(--bs-body-font-weight, 600);
    --dxds-line-height-subtitle-2: var(--bs-body-line-height, 1.4);
    --dxds-font-size-subtitle-1: var(--bs-body-font-size, 1.25rem);
    --dxds-font-weight-subtitle-1: var(--bs-body-font-weight, 700);
    --dxds-line-height-subtitle-1: var(--bs-body-line-height, 1.3);
}

    /* -----------------------------------------------------------
   Dark mode overrides
   ----------------------------------------------------------- */
    :root[data-bs-theme="dark"] {
        --dxds-color-surface-neutral-default-rest: var(--bs-body-bg, #212529);
        --dxds-color-border-neutral-default-rest: var(--bs-border-color, #495057);
        --dxds-font-family-sans-serif: var(--bs-font-sans-serif, system-ui, sans-serif);
        /* text sizing/weight stays same, but you can adjust contrast if needed */
    }

.card:not(.toolbar) {
    padding: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: fit-content;
    overflow-wrap: break-word;
    background-color: var(--dxds-color-surface-neutral-default-rest);
    background-clip: border-box;
    border: var(--dxds-border-radius-10) solid var(--dxds-color-border-neutral-default-rest);
    border-radius: 0.25rem;
}
/*
.card:not(.toolbar) {
    padding: 1rem;
    height: 100%;
    min-height: fit-content;
    margin-bottom:0px;
}
*/

.title {
    font-family: var(--dxds-font-family-sans-serif);
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 1rem;
}

.small-size .title {
    font-size: var(--dxds-font-size-base-md);
    font-weight: var(--dxds-font-weight-base-strong);
    line-height: var(--dxds-line-height-base-md);
}

.medium-size .title {
    font-size: var(--dxds-font-size-base-lg);
    font-weight: var(--dxds-font-weight-base-strong);
    line-height: var(--dxds-line-height-base-lg);
}

.large-size .title {
    font-size: var(--dxds-font-size-title-md);
    font-weight: var(--dxds-font-weight-title-default);
    line-height: var(--dxds-line-height-title-md);
}

.menu-icon-home {
    mask-image: url("../images/icons/home.svg");
    -webkit-mask-image: url("../images/icons/home.svg");
    background-color: currentColor;
}

.menu-icon-chat {
    mask-image: url("../images/icons/chat.svg");
    -webkit-mask-image: url("../images/icons/chat.svg");
    background-color: currentColor;
}

.menu-icon-knowledge {
    mask-image: url("../images/icons/person.svg");
    -webkit-mask-image: url("../images/icons/person.svg");
    background-color: currentColor;
}

.menu-icon-subscriptions {
    mask-image: url("../images/icons/wishlist-saved.svg");
    -webkit-mask-image: url("../images/icons/wishlist-saved.svg");
    background-color: currentColor;
}

.menu-icon-calendar {
    mask-image: url("../images/icons/calendar.svg");
    -webkit-mask-image: url("../images/icons/calendar.svg");
    background-color: currentColor;
}

.menu-icon-files {
    mask-image: url("../images/icons/folder.svg");
    -webkit-mask-image: url("../images/icons/folder.svg");
    background-color: currentColor;
}

.menu-icon-settings {
    mask-image: url("../images/icons/settings.svg");
    -webkit-mask-image: url("../images/icons/settings.svg");
    background-color: currentColor;
}

.menu-icon-knowledge {
    mask-image: url("../images/icons/knowledge.svg");
    -webkit-mask-image: url("../images/icons/knowledge.svg");
    background-color: currentColor;
}

.menu-icon-customers {
    mask-image: url("../images/icons/customers.svg");
    -webkit-mask-image: url("../images/icons/customers.svg");
    background-color: currentColor;
}

.menu-icon-statistics {
    mask-image: url("../images/icons/statistics.svg");
    -webkit-mask-image: url("../images/icons/statistics.svg");
    background-color: currentColor;
}

.menu-icon-usage {
    mask-image: url("../images/icons/usage.svg");
    -webkit-mask-image: url("../images/icons/usage.svg");
    background-color: currentColor;
}

.menu-icon-support {
    mask-image: var(--dxbl-icon-support);
    -webkit-mask-image: var(--dxbl-icon-support);
}

.menu-icon-products {
    mask-image: var(--dxbl-icon-products);
    -webkit-mask-image: var(--dxbl-icon-products);
}

.menu-icon-contacts {
    mask-image: var(--dxbl-icon-contacts);
    -webkit-mask-image: var(--dxbl-icon-contacts);
}

.menu-icon-about {
    mask-image: var(--dxbl-icon-about);
    -webkit-mask-image: var(--dxbl-icon-about);
}

.menu-icon-sort-by {
    mask-image: var(--dxbl-icon-sort);
    -webkit-mask-image: var(--dxbl-icon-sort);
}

.menu-icon-copy {
    mask-image: var(--dxbl-icon-copy);
    -webkit-mask-image: var(--dxbl-icon-copy);
}

.menu-icon-cut {
    mask-image: var(--dxbl-icon-cut);
    -webkit-mask-image: var(--dxbl-icon-cut);
}

.menu-icon-clear {
    mask-image: var(--dxbl-icon-dismiss);
    -webkit-mask-image: var(--dxbl-icon-dismiss);
}

.menu-icon-user-profile {
    mask-image: var(--dxbl-icon-user-profile);
    -webkit-mask-image: var(--dxbl-icon-user-profile);
}

.menu-icon-check {
    mask-image: var(--dxbl-menu-icon-check);
    -webkit-mask-image: var(--dxbl-menu-icon-check);
}

.menu-icon-person-circle {
    mask-image: var(--dxbl-menu-icon-person-circle);
    -webkit-mask-image: var(--dxbl-menu-icon-person-circle);
}

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


.sun-icon {
    mask-image: url("../images/icons/weather-sunny.svg");
}

.moon-icon {
    mask-image: url("../images/icons/weather-moon.svg");
}

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

.back-icon {
    mask-image: url("../images/icons/arrow-left.svg");
}

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

.refresh-icon {
    mask-image: url("../images/icons/arrow-sync.svg");
}

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

.sign-out-icon {
    mask-image: url("../images/icons/sign-out.svg");
}

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

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

.more-icon {
    mask-image: url("../images/icons/more-horizontal.svg");
}

.crm-icon {
    mask-image: url("../images/icons/person.svg");
}

.planning-icon {
    mask-image: url("../images/icons/calendar.svg");
}

.analytics-icon {
    mask-image: url("../images/icons/data-histogram.svg");
}

.hamburger-icon {
    mask-image: url("../images/icons/navigation.svg");
}

.data-area-icon {
    mask-image: url("../images/icons/data-area.svg");
}

.data-pie-icon {
    mask-image: url("../images/icons/data-pie.svg");
}

.data-trending-icon {
    mask-image: url("../images/icons/data-trending.svg");
}

.data-usage-icon {
    mask-image: url("../images/icons/data-usage.svg");
}

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

.export-icon {
    mask-image: url("../images/icons/arrow-export-up.svg");
}

.data-area-icon {
    mask-image: url("../images/icons/data-area.svg");
}

.data-pie-icon {
    mask-image: url("../images/icons/data-pie.svg");
}

.data-trending-icon {
    mask-image: url("../images/icons/data-trending.svg");
}

.data-usage-icon {
    mask-image: url("../images/icons/data-usage.svg");
}

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

.export-icon {
    mask-image: url("../images/icons/arrow-export-up.svg");
}


/* Menu Item States */
.sidebar-menu .dxbl-menu-list-item {
/*    padding: 0.5rem;
    margin: 0.25rem 0;*/
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
}

.sidebar-menu .dxbl-menu-item.menu-item-inactive {
    color: rgb(96, 94, 92);
    background-color: transparent;
}
/*
.sidebar-menu .dxbl-menu-list-item.menu-item-inactive:hover {
    background-color: rgb(243, 242, 241) !important;
}*/

/*.sidebar-menu .dxbl-menu-list-item.menu-item-active {
    color: rgb(0, 120, 212);
    background-color: rgb(243, 242, 241);
}
*/
/*.sidebar-menu .dxbl-menu-list-item.menu-item-active .menu-icon {
    color: rgb(0, 120, 212);
}*/

/*.sidebar-menu .dxbl-menu-item.menu-item-inactive .menu-icon {
    color: rgb(96, 94, 92);
}
*/
.menu-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: currentColor;
    opacity: 0.7;
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-radius: 12px;
    width: 80px;
    gap: 0.5rem;
    color: var(--dxds-color-content-neutral-subdued-rest);
    position: relative;
}

.menu-item:hover {
    background-color: transparent;
}

.menu-item:hover .menu-icon {
    opacity: 1;
    background-color: var(--dxds-color-surface-primary-default-rest);
}

.menu-item:hover .menu-label {
    color: var(--dxds-color-surface-primary-default-rest);
}

.menu-item.active {
    background-color: transparent;
    color: var(--dxds-color-surface-primary-default-rest);
}

.menu-item.active .menu-icon {
    opacity: 1;
    background-color: var(--dxds-color-surface-primary-default-rest);
}

.menu-item.active .menu-label {
    color: var(--dxds-color-surface-primary-default-rest);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.menu-label {
    font-size: 12px;
    color: var(--dxds-color-content-neutral-subdued-rest);
    text-align: center;
    line-height: 20px;
    font-weight: 500;
    vertical-align: baseline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.main-menu-drawer {
    --dxbl-drawer-panel-body-padding-x: 0.5rem;
    --dxbl-drawer-panel-body-padding-y: 1rem;
}

.main-menu-drawer.dxbl-drawer-mini .dxbl-menu-item {
    justify-content: center;
    padding: 1rem 0;
}

.main-menu-drawer.dxbl-drawer-mini .menu-icon {
    width: 24px;
    height: 24px;
}

.main-menu-drawer.dxbl-drawer-mini .dxbl-menu-item-text-container {
    display: none;
}

.main-menu-drawer .dxbl-drawer-panel {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    background-color: var(--dxds-color-surface-neutral-default-rest);
    color: white;
}

.main-menu-drawer .dxbl-menu {
    background-color: inherit;
}