html,
body,
app {
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
}
app,
app > div,
.bt-content-container > .bt-content,
.bt-content > div:not(.modal-backdrop),
.main > .content,
.content > .bt-page,
.bt-page > .bt-page-nav-container,
.bt-page-nav-container > .bt-page-nav {
    background-color: inherit;
}
app.root {
    min-width: 375px;
}

/* Header */
.bt-header-container:after {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: 3.5rem;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
    z-index: 1030;
    pointer-events: none;
}

.bt-header.navbar {
    margin: 0 auto;
    max-width: 1920px;
    position: relative;
    height: 3.5rem;
    flex-wrap: nowrap;
    justify-content: flex-start;
    border: none;
    background-color: inherit;
    border-radius: 0;
    box-shadow: none;
}

.bt-header.navbar .navbar-toggler {
    outline: none;
    border-radius: 0;
    padding-left: .75rem;
    padding-right: .75rem;
    align-self: stretch;
}

.bt-header.navbar .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    background-color: transparent !important;
    height: 2rem;
    width: 2rem;
}

.bt-header.navbar .bt-btn-container {
    margin-left: auto;
}

.bt-header .logo-image {
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    cursor: pointer;
    margin-left: 16px;
    width: 180px;
    height: 30px;
    background-image: url("../images/full-dark.svg");
    mask-image: url("../images/full-dark.svg");
    -webkit-mask-image: url("../images/full-dark.svg");
}

.download-btn.navbar-toggler {
    height: 3.5rem;
    padding: calc((3.5rem - 22px)/2) !important;
}

.bt-theme-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    mask-image: url("../images/theme.svg");
    -webkit-mask-image: url("../images/theme.svg");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* Breadcrumbs */
.bt-breadcrumbs-container {
    height: 3.5rem;
}

.bt-breadcrumbs {
    margin: 0 auto;
    max-width: 1920px;
    position: relative;
    height: 3.5rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.bt-breadcrumbs .breadcrumbs-items {
    margin-left: 330px;
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
}

.bt-breadcrumbs .breadcrumbs-items > * {
    display: inline-block;
    font-size: 1rem;
    opacity: 0.6;
    margin-right: 0.8rem;
    white-space: nowrap;
}

.bt-breadcrumbs .breadcrumbs-items > span {
    cursor: default;
}

.bt-breadcrumbs .breadcrumbs-items > span.separator {
    border-width: 5px!important;
    border-top-color: transparent!important;
    border-right-color: transparent!important;
    border-bottom-color: transparent!important;
    width: 0;
    height: 0;
    margin-top: 0.1rem;
    margin-right: 0.5rem;
}

.bt-breadcrumbs .breadcrumbs-items > span:last-child {
    display: none;
}

@media (max-width: 1199.98px) {
    .bt-breadcrumbs-container:after {
        content: '';
        position: fixed;
        left: 0;
        top: 3.5rem;
        right: 0;
        height: 3.5rem;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
        z-index: 1025;
        pointer-events: none;
    }

    .bt-breadcrumbs .breadcrumbs-items {
        margin-left: 0;
        padding: 1rem 1.5rem;
    }
}
/* SideBar */
.sidebar {
    position: fixed;
    top: 3.5rem;
    bottom: 0;
    width: 330px;
    overflow: hidden;
    padding-bottom: calc(3.5rem + 5px);
    box-shadow: inset -140px -8px 30px -100px rgba(0, 0, 0, 0.08);
    z-index: 1029;
}

.sidebar > div {
    width: 330px;
}

.sidebar .info-wrapper {
    font-size: 0.8em;
    margin-left: 5px;
    padding: 0.5rem 0.6rem;
    position: relative;
    width: 295px;
}

.sidebar .info-wrapper:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 1px solid currentColor;
    opacity: 0.15;
}

.sidebar .info-wrapper .version
.sidebar .info-wrapper .copyright {
    font-size: .75em;
}

@media (min-width: 1200px) {
    .bt-content.sidebar-hidden .sidebar,
    .bt-content.sidebar-shown .sidebar {
        transition: width 0.2s ease-in-out;
    }
    .bt-content.sidebar-hidden .sidebar {
        width: 0;
    }
    .bt-breadcrumbs.sidebar-hidden .breadcrumbs-items,
    .bt-breadcrumbs.sidebar-shown .breadcrumbs-items,
    .bt-content.sidebar-hidden .main,
    .bt-content.sidebar-shown .main {
        transition: all 0.2s ease-in-out;
    }
    .bt-breadcrumbs.sidebar-hidden .breadcrumbs-items,
    .bt-content.sidebar-hidden .main {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 1199.98px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 3.5rem;
        height: calc(100% - 3.5rem);
        transform: translateX(-100%);
        padding-bottom: 0;
    }
    .sidebar .dx-scrollable {
        height: calc(100% - 3.5rem);
    }
    .sidebar-shown .sidebar,
    .sidebar-hidden .sidebar {
        transition: transform 0.1s ease-out;
    }
    .sidebar-shown .sidebar {
        transform: translateX(0);
    }
    .sidebar .info-wrapper {
        display: none;
    }
}

.sidebar-tree {
    width: 300px;
}

.sidebar-tree > .nav-pills > .nav-item:first-of-type {
    padding-top: 0rem;
}

.sidebar-tree > .nav-pills > .nav-item:last-of-type {
    padding-bottom: 0rem;
}

.sidebar-tree .nav-pills > .nav-item a {
    border-radius: 0px;
    display: flex;
    align-items: center;
}

.sidebar-tree > .nav-pills > .nav-item > a {
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: .25rem 1rem .25rem .125rem;
}

.sidebar-tree > .nav-pills > .nav-item > a[aria-expanded] ~ ul {
    margin: 0;
}

.sidebar-tree .nav-pills > .nav-item a:not(.active) {
    color: inherit !important;
}

.sidebar-tree .nav-pills .nav-item .nav-link {
    text-transform: none;
}

.sidebar-tree .nav-pills .nav-item .nav-link > span:not(.expand-btn):not(.image):not(.badge) {
    flex: 1;
}

.sidebar-tree .nav-pills .nav-item .nav-link > span.expand-btn {
    margin-right: 4px;
}

.sidebar-tree .nav-pills .nav-item .nav-link > span.badge {
    flex: 0;
    border-radius: 0.25rem !important;
    min-width: 2.7em;
}

.dxbs-tree.sidebar-tree > ul.nav ul.nav {
    margin: 0 !important;
}

.dxbs-tree.sidebar-tree > ul.nav ul.nav .nav-item {
    padding-bottom: 0;
}

.dxbs-tree.sidebar-tree > ul.nav ul.nav .nav-link {
    font-size: 0.825rem;
    font-weight: 400;
    padding: 0 1rem;
}

.dxbs-tree.sidebar-tree .badge {
    margin: 0;
    border: 0 !important;
    padding: 3px 4px;
    color: var(--white) !important;
    background-color: var(--gray) !important;
    font-size: 0.75rem;
    font-weight: 500;
}

.dxbs-tree.sidebar-tree .item-ctp .badge {
    color: var(--gray-dark) !important;
    background-color: var(--yellow) !important;
    letter-spacing: 0.025em;
}

.sidebar .nav-pills .nav-item {
    margin: 0;
}

.sidebar-tree .nav-pills > .nav-item > a:not(.active) {
    background-image: none !important;
}

.sidebar-tree .nav-pills > .nav-item > a {
    border: none !important;
}

.sidebar-tree .nav-pills .nav-item.dx-badge-preview .nav-link > span.badge {
    min-width: inherit;
    font-weight: 700;
    color: #212529 !important;
    background-color: #ffc107 !important;
}

.search-box {
    min-width: 175px;
    padding: 0.25rem;
}

    .search-box .search-input {
        padding-right: calc(24px+0.5rem);
    }

    .search-box .search-button {
        right: 0px;
        top: 0px;
        pointer-events: auto;
        z-index: 3;
        width: auto;
        display: flex;
        align-items: center;
        height: 100%;
        position: absolute;
        color: gray;
    }

    .search-box .search-button .search-icon {
        background-color: currentColor;
        cursor: pointer;
        width: 24px;
        height: 24px;
        mask-image: url("../images/Search.svg");
        -webkit-mask-image: url("../images/Search.svg");
    }

/* Search */

.search-editor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem 0 2.1rem;
    width: 100%;
    height: 3.5rem;
    min-height: 3.5rem;
}

/* Menu Search */
.menu-search-editor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem 0 2.1rem;
    width: 330px;
    height: 3.5rem;
    min-height: 3.5rem;
    box-shadow: inset -140px -8px 30px -100px rgba(0, 0, 0, 0.08);
}

.menu-search-editor .dxbs-textbox {
    flex-grow: 1;
}

    .menu-search-editor .dxbs-textbox input {
        background-color: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        font-size: 1rem;
        outline: 0;
        padding: 0;
        width: 100%;
        height: 32px;
    }

    .menu-search-editor .icon {
        display: inline-block;
        opacity: 0.6;
        background-size: contain;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        background-position: center center;
        background-color: currentColor;
        margin: 0 0 0 4px;
    }

    .menu-search-editor .icon-search {
        cursor: pointer;
        width: 24px;
        height: 24px;
        mask-image: url("../images/Search.svg");
        -webkit-mask-image: url("../images/Search.svg");
    }

/*.search-editor .icon-cancel-search {
    cursor: pointer;
    width: 18px;
    height: 18px;
    mask-image: url("../images/CancelSearch.svg");
    -webkit-mask-image: url("../images/CancelSearch.svg");
}*/

.search-results {
    transition: transform 0.1s ease-in-out;
    transform: translateY(-100%);
}

.search-results.shown {
    padding: 1rem 2.1rem;
    position: relative;
    transform: translateY(0);
}

.search-results ul {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    padding: 0;
}

.search-results ul > li {
    list-style: none;
    padding-bottom: 1rem;
}

.search-results ul > li:last-child {
    padding-bottom: 0;
}

.search-results ul > li > a {
    color: inherit;
    padding: 0;
}

.search-results ul > li > a:first-child {
    display: block;
}

.search-results ul > li > :not(:first-child) {
    display: inline-block;
    font-size: 0.9em;
    opacity: .75;
}

.search-results ul > li > a:not(:first-child) {
    border-bottom: 1px dashed;
    font-size: 0.9em;
    opacity: .75;
}

.search-results ul > li > a:not(:first-child):hover {
    text-decoration: none;
}

.search-results ul > li > span.link-separator {
    border-radius: 0;
    border-style: solid;
    border-width: 5px !important;
    border-left-color: currentColor !important;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    width: 0;
    height: 0;
    margin: 0 0.2rem 0 0.4rem;
    padding: 0;

}

.search-results.shown:after {
    content: '';
    position: absolute;
    left: 5px;
    bottom: 0;
    border-top: 1px solid currentColor;
    opacity: 0.15;
    width: 295px;
    height: 0;
}

/* Content */
.bt-content-container {
    height: calc(100% - 7rem);
    overflow-y: scroll;
    overscroll-behavior: none;
    position: relative;
}

.bt-content-container.animated {
    scroll-behavior: smooth;
}

.bt-content {
    margin: 0 auto;
    max-width: 1900px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
}

.bt-content .main {
    -webkit-overflow-scrolling: touch;
    margin-left: 330px;
    width: calc(100% - 330px);
}

.modal-open .main {
    -webkit-overflow-scrolling: auto;
}

.bt-toolbar-top-order {
    z-index: 1095;
}

.bt-content .main > .content {
    padding: 1.1rem 1rem 0;
}

.bt-content .main > .content-footer {
    height: 1em;
}

@media (max-width: 1199.98px) {
    .bt-content .main {
        margin-left: 0;
        width: 100%;
    }
    .bt-content .main {
        display: flex;
        flex-flow: column nowrap;
    }
    .bt-content .main > .content {
        flex: 1 1 auto;
        padding: 1.1rem 1.5rem 0 1.5rem;
    }
}

/* Content Modal */
.bt-content-modal.modal-backdrop {
    opacity: 0;
    pointer-events: none;
    top: 3.5rem;
    z-index: 1026;
}

.bt-content-modal.modal-backdrop.modal-backdrop-shown,
.bt-content-modal.modal-backdrop.modal-backdrop-hidden {
    transition: opacity 0.2s ease-in-out;
}

.bt-content-modal.modal-backdrop.modal-backdrop-shown {
    cursor: pointer;
    pointer-events: all;
    opacity: 0.5;
}

/* Theme Switcher */
.themeswitcher-container {
    background-color: inherit;
    position: absolute;
    top: calc(3.5rem + 1px);
    right: 0;
    width: 320px;
    height: 0;
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
    z-index: 1029;
}
.themeswitcher-container-shown,
.themeswitcher-container-hidden {
    transition: height 0.2s ease-in-out;
}
.themeswitcher-container-shown {
    height: calc(100vh - 3.5rem);
}

@media (max-width: 1199.98px) {
    .themeswitcher-container {
        position: fixed;
        top: 3.5rem;
        width: 320px;
        height: calc(100% - 3.5rem);
        transform: translateX(100%);
    }
    .themeswitcher-container-shown,
    .themeswitcher-container-hidden {
        transition: transform 0.2s ease-in-out;
    }
    .themeswitcher-container-shown {
        transform: translateX(0);
    }
}

.bt-task-content {
    min-height: 75vh;
}

.context-menu {
    z-index:-1;
}

/* Page */
.bt-page {
    display: flex;
    flex-flow: row nowrap;
    margin-left: -2rem;
    margin-right: -2rem;
}
.bt-page .bt-page-content {
    flex: 1 1 auto;
    overflow: hidden;
    padding-right: 2rem;
    padding-left: 2rem;
    max-width: 1370px;
    margin-right: 200px;
}
.sidebar-shown .bt-page .bt-page-content,
.sidebar-hidden .bt-page .bt-page-content {
    transition: max-width 0.2s ease-in-out;
}
.sidebar-hidden .bt-page .bt-page-content {
    max-width: 1700px;
}
.bt-page .bt-page-content .bt-anchor {
    scroll-margin-top: 2rem;
    scroll-snap-margin-top: 2rem;
}

/* Page NavPanel */
.bt-page-nav-container {
    flex: 1 0 auto;
    width: 200px;
    position: fixed;
    right: calc((100% - 1900px + 20px) / 2);
    top: 7rem;
    bottom: 0;
    pointer-events: none;
}
.bt-page-nav .nav-pills {
    padding: 1.5rem 0;
    pointer-events: initial;
}
.bt-page-nav .nav-pills .nav-link {
    border-radius: 0;
    border: none;
    font-size: .875rem;
    color: inherit;
    background: none;
    padding: .2195rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bt-page-nav .nav-pills .nav-link.active {
    color: inherit;
    position: relative;
    transform: scale(1);
}
.bt-page-nav .nav-pills .nav-link.active:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: var(--primary);
}
.bt-page-nav .nav-pills .nav-link.active:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    opacity: 0.05;
    z-index: -1;
}
.bt-page-nav .nav-pills .nav-link .badge:empty,
.bt-page-nav .nav-header .badge:empty {
    display: none;
}
.bt-page-nav .nav-pills .nav-link .badge,
.bt-page-nav .nav-header .badge {
    margin-left: 0.3em;
    border: 0;
    padding: 3px 4px;
    color: #fff;
    background-color: #a1a6ab;
    font-size: 0.75rem;
    font-weight: 400;
    border-radius: 0.25rem;
    min-width: 2.7em;
}
.bt-page-nav .nav-header .badge {
    margin-left: 8px;
}
.bt-page-nav .nav-header {
    display: none;
    pointer-events: initial;
}
.bt-page-nav .nav-title {
    font-size: 1rem;
    font-weight: 600;
    padding: .5rem .75rem;
}
@media (min-width: 1199.98px) and (max-width: 1900px) {
    .bt-page-nav-container {
        right: 20px;
    }
}
@media (max-width: 1199.98px) {
    .bt-page {
        flex-flow: column nowrap;
        margin: 0;
    }
    .bt-page .bt-page-content {
        order: 1;
        padding-top: 0;
        padding-right: 0;
        padding-left: 0;
        margin-right: 0;
        overflow: visible;
    }
    .bt-page .bt-page-content:not(:only-child) {
        padding-top: 2.5rem;
    }
    .bt-page .bt-page-content .bt-anchor {
        scroll-margin-top: calc(2.875rem + 2rem);
        scroll-snap-margin-top: calc(2.875rem + 2rem);
    }
    .bt-page-nav-container {
        position: fixed;
        z-index: 1020;
        top: 7rem;
        left: 0;
        right: 0;
        width: auto;
        height: 2.875rem;
        display: flex;
        flex-direction: row;
        visibility: hidden;
    }
    .bt-page-nav-container:after {
        content: '';
        height: 100%;
        overflow-y: scroll;
        visibility: hidden;
    }
    .bt-page-nav {
        height: 2.875rem;
        width: 100%;
        visibility: visible;
    }
    .bt-page-nav .nav-pills {
        padding: 0.5rem 0;
    }
    .bt-page-nav .nav-header {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        color: inherit;
        position:relative;
        transform: scale(1);
        padding: 0.7rem 1.5rem;
        font-size: 1rem;
    }
    .bt-page-nav .nav-header .nav-header-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bt-page-nav .nav-header .nav-header-btn {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        padding: .375rem;
        cursor: pointer;
        color: inherit;
        position: relative;
        transform: scale(1);
        margin-right: -.5rem;
    }
    .bt-page-nav .nav-header .nav-header-btn:before {
        content: "";
        display: block;
        width: .75rem;
        height: .75rem;
        mask-image: url("../images/CollapseButton.svg");
        -webkit-mask-image: url("../images/CollapseButton.svg");
        color: var(--gray);
        background-color: currentColor;
    }
    .bt-page-nav .nav-header:not(.collapse) .nav-header-btn:before {
        transform: rotate(180deg);
    }
    .bt-page-nav .nav-header .nav-header-btn:hover:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: currentColor;
        opacity: 0.09;
        z-index: -1;
    }
    .bt-page-nav .nav-header.collapse + .nav-pills {
        display: none;
    }
    .bt-page-nav .nav-pills {
        width: 100%;
        box-shadow: 0px 1px 6px 0 rgba(0, 0, 0, 0.12);
        background-color: inherit;
    }
    .bt-page-nav .nav-title {
        padding: .8rem 1.5rem;
    }
    .bt-page-nav .nav-pills .nav-link {
        padding: .2195rem 1.25rem .2195rem 1.5rem;
    }
    .bt-page-nav .nav-pills .nav-link .badge {
        margin-right: -.5rem;
    }
}

/* Page Section */
.bt-page-section {
    margin-bottom: 2.5rem;
}

.bt-page-section-title .bt-anchor {
    opacity: 0;
    transition: opacity 150ms;
    width: 1.5rem;
    margin-left: -1.5rem;
    display: inline-block;
    text-decoration: none !important;
    text-align: center;
}

.bt-page-section-title .bt-anchor:before {
    content: "#";
}

@media (min-width: 1200px) {
    .bt-page-section-title .bt-anchor {
        width: 2rem;
        margin-left: -2rem;
    }
}

.bt-page-section-title > h1:hover .bt-anchor,
.bt-page-section-title > h2:hover .bt-anchor {
    opacity: 1;
}

.bt-page-section > .card {
    margin-top: 1rem;
    box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
    position: static;
}

.bt-page-section > .card > .card-header {
    padding: 4px 0 0;
}

.bt-page-section > .card > .card-header {
    padding: 0;
    border-bottom: 0;
}

.theme-blazing-berry .bt-page-section > .card > .card-header > .nav-tabs > .nav-item > .nav-link.active,
.theme-office-white .bt-page-section > .card > .card-header > .nav-tabs > .nav-item > .nav-link.active,
.theme-purple .bt-page-section > .card > .card-header > .nav-tabs > .nav-item > .nav-link.active,
.theme-materia .bt-page-section > .card > .card-header > .nav-tabs > .nav-item > .nav-link.active {
    background: none;
}

.theme-lumen .bt-page-section > .card > .card-header > .nav-tabs > .nav-item > .nav-link {
    margin-top: 0;
}

.bt-page-section > .card > .card-body {
    padding: 0;
    display: flex;
    flex-direction: row;
}

.bt-page-section > .card > .card-header > .nav-tabs {
    padding: 1px 0 0 16px;
}

.bt-page-section > .card > .card-header > .nav-tabs > .nav-item > .nav-link {
    font-size: 0.875rem;
    padding-top: .6rem;
    padding-bottom: .4rem;
}

.bt-page-section > .card > .card-header .bt-page-section-toolbar {
    align-self: center;
    margin-right: 0.6rem;
}

.bt-page-section.no-code .bt-page-section-component-area {
    padding: 1rem 0 0;
}

.bt-page-section.no-code.h-scroll .bt-page-section-component-area {
    overflow-x: auto;
}

.bt-page-section.h-scroll > .card > .card-body {
    overflow-x: auto;
}

@media (max-width: 575.98px) {
    .bt-page-section.h-scroll .bt-page-section-component-area,
    .bt-page-section.h-scroll .bt-page-section-component-area .component-container {
        width: auto;
    }
}

.bt-page-section-component-area {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 240px;
    width: 100%;
}

.bt-page-section-component-area .bt-text {
    font-size: 0.75rem;
}

.bt-page-section-component-area p.bt-text {
    margin-bottom: 0;
}

.bt-page-section-component-area .bt-text b {
    font-weight: 600;
}

.popup-bt-events .popup-bt-events-button {
    width: 80px;
}
.popup-bt-events .dxbs-modal-footer {
    flex-wrap: nowrap;
}
.popup-bt-events-checkbox {
    width: 100%;
}

.bt-page-section-component-area .cw-240 {
    max-width: 240px;
    width: 100%;
}

.bt-page-section-component-area .text-decoration-underline {
    text-decoration: underline;
}

.cw-320 {
    max-width:320px;
    width:100%
}
.bt-page-section-component-area .cw-320 {
    max-width: 320px;
    width: 100%;
}

.bt-page-section-component-area .cw-400 {
    max-width: 400px;
    width: 100%;
}

.bt-page-section-component-area .cw-480 {
    max-width: 480px;
    width: 100%;
}

.bt-page-section-component-area .cw-640 {
    max-width: 640px;
    width: 100%;
}

.bt-page-section-component-area .cw-800 {
    max-width: 800px;
    width: 100%;
}

.bt-page-section-component-area .cw-880 {
    max-width: 880px;
    width: 100%;
}

.bt-page-section-component-area .chi-220 {
    height: 220px !important;
}

.bt-page-section-component-area .ch-360 {
    height: 360px;
}

.bt-page-section-component-area .ch-480 {
    height: 480px;
}

.bt-page-section-component-area .ch-720 {
    height: 720px;
}

.bt-page-section-component-area .fs-825 {
    font-size: 0.825rem;
}

.bt-page-section-component-area .options-container {
    border-left: 0!important;
    border-right: 0!important;
    border-top: 0!important;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 9px 2rem calc(9px - 0.35rem);
    margin: -2rem -2rem 2rem;
    width: calc(100% + 4rem);
    min-height: 2.8rem;
}

.bt-page-section-component-area .options-container .option-component {
    display: flex;
    align-items: center;
    margin-right: 0.75rem;
    margin-bottom: 0.35rem;
}

.bt-page-section-component-area .options-container .option-component:last-child {
    margin-right: 0;
}

.bt-page-section-component-area .options-container .option-component .ow-100 {
    width: 100px;
}

.bt-page-section-component-area .options-container .option-component .ow-120 {
    width: 120px;
}

.bt-page-section-component-area .options-container .option-component .ow-150 {
    width: 150px;
}

.bt-page-section-component-area > .w-100,
.bt-page-section-component-area > .dxbs-gridview {
    align-self: start;
}

.bt-page-section-component-area .component-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    min-height: 240px;
    width: 100%;
}

.bt-page-section-component-area .component-container > .w-100,
.bt-page-section-component-area .component-container > .dxbs-gridview {
    align-self: start;
}

.bt-page-section-component-area .options-container .option-component.option-component-button > label {
    display: none;
}

@media (min-width: 480px) and (max-width: 575.98px){
    .bt-page-section-component-area .options-container {
        display: table;
    }
    .bt-page-section-component-area .options-container  .option-component {
        display: table-row;
    }
    .bt-page-section-component-area .options-container  .option-component > * {
        display: table-cell;
        padding-bottom: 0.35rem;
    }
    .bt-page-section-component-area .options-container .option-component.option-component-button > label {
        display: table-cell;
    }
    .bt-page-section-component-area .options-container  .option-component > label {
        padding-right: 0.75rem;
        white-space: nowrap;
    }
    .bt-page-section-component-area .options-container  .option-component > div,
    .bt-page-section-component-area .options-container  .option-component > div > button {
        width: 100%!important;
    }
    .bt-page-section-component-area .options-container .option-component .custom-radio .custom-control-label {
        white-space: nowrap;
    }
}

@media (max-width: 479.98px) {
    .bt-page-section-component-area,
    .bt-page-section-component-area .component-container {
        min-height: 120px;
    }
    .bt-page-section-component-area .options-container {
        flex-direction: column;
        padding-bottom: 0.5rem;
    }
    .bt-page-section-component-area .options-container  .option-component {
        flex-direction: column;
        margin-right: 0;
        width: 100%!important;
    }
    .bt-page-section-component-area .options-container .option-component.option-component-button > label {
        display: none;
    }
    .bt-page-section-component-area .options-container  .option-component > label {
        margin-right: 0!important;
        width: 100%;
    }
    .bt-page-section-component-area .options-container  .option-component > div,
    .bt-page-section-component-area .options-container  .option-component > div > button {
        width: 100%!important;
    }
    .bt-page-section-component-area .cw-320,
    .bt-page-section-component-area .cw-400,
    .bt-page-section-component-area .cw-480 {
        max-width: 100%;
    }
}

.bt-page-section-code-area {
    position: relative;
    width: 100%;
    min-height: 240px;
    display: flex;
    flex-grow: 1;
}

.bt-page-section-code-area > .card {
    width: 100%;
    border: 0;
}

.bt-page-section-code-area > .card > .card-body {
    padding: 0;
}

.bt-page-section-code-area > .card > .card-body,
.bt-page-section-code-area > .card > .card-body > pre {
    display: flex;
}

.bt-page-section-code-area > .card > .card-body > pre:last-child {
    margin-bottom: 0;
}

.bt-page-section-code-area > .card > .card-body > pre  > code {
    padding: 1rem!important;
}

.bt-page-section-code-area > .card > .card-body > pre,
.bt-page-section-code-area > .card > .card-body > pre > code {
    width: 100%;
}

.bt-page-section-code-area > .card > .card-header {
    background: transparent;
    display: flex;
    align-items: start;
    font-size: 0.75rem;
    font-weight: 400;
    padding: 0.45rem 1.2rem;
}

.bt-page-section-code-area > .card > .card-header .nav-item {
    display: flex;
}

.bt-page-section-code-area > .card > .card-header .nav-link {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.5rem;
    margin-right: 0.7em;
}

.bt-page-section-code-area > .card > .card-header .nav-link:not(.active) {
    color: inherit;
}

.bt-page-section-code-area > .card > .card-header .btn.btn-sm {
    margin-left: 8px;
    margin-left: 8px;
}

.bt-page-section-code-area > .card > .card-header .btn.btn-sm.copy-code {
    font-size: 0.75rem;
    margin-left: auto;
}

.bt-page-section-code-area > .card > .card-header .copy-code > span,
.bt-page-section-code-area > .card > .card-header .doc-link > span {
    display: inline-block;
    vertical-align: middle;
}

.bt-page-section-code-area > .card > .card-header .copy-code > span:last-child,
.bt-page-section-code-area > .card > .card-header .doc-link > span:last-child {
    margin-left: 0.3rem;
}

@media (max-width: 1199.98px) {
    .bt-page-section-code-area > .card > .card-header .copy-code > span:last-child,
    .bt-page-section-code-area > .card > .card-header .doc-link > span:last-child {
        display: none;
    }
}

.bt-page-section-code-area .icon {
    opacity: 0.6;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
}

/*.bt-page-section-code-area .icon-doc {
    width: 16px;
    height: 16px;
    mask-image: url("../images/Document.svg");
    -webkit-mask-image: url("../images/Document.svg");
}

.bt-page-section-code-area .icon-copy {
    width: 16px;
    height: 16px;
    mask-image: url("../images/Copy.svg");
    -webkit-mask-image: url("../images/Copy.svg");
}
*/
.bt-page-section-code-area .more-code > .btn {
    margin: 0.6em 0;
    padding: 0 0.2em;
}

.bt-page-section-code-area .more-code > .btn:before {
    content: '...';
    display: block;
    margin-top: -0.5em;
    font-size: 0.8em;
}

.bt-page-section-status-text {
    margin-top: 0.5rem;
}

.bt-page-section-description {
    margin-top: 1.5rem;
}

.bt-page-section-status-text a,
.bt-page-section-description a {
    text-decoration: underline;
}

/* Code Editor */
.hljs {
    background-color: transparent !important;
    padding: 0 !important;
}

.theme-solar .hljs,
.theme-superhero .hljs {
    background-color: rgba(255,255,255,0.8)!important;
}

/* Products */
.bt-products .row > div {
    margin-bottom: 2rem;
}

.bt-products .bt-product {
    cursor: pointer;
    display: block;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.5rem;
    padding-bottom: 1.5rem;
    height: 100%;
    margin: 0;
}
.bt-products .bt-product:hover {
    transform: translate(0, -6px);
    transition: all .2s ease-out;
    box-shadow: 0 0.25rem 0.25rem rgba(0,0,0,0.1) !important;
}
.bt-products-description > h2 {
    margin-bottom: 24px;
}
.bt-products-description p a {
    text-decoration: underline;
}
.bt-products .bt-product .bt-product-info {
    display: inline-block;
    font-size: 13px;
}

/* Icons */
.bt-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 9px!important;
    margin-left: -3px!important;
    background-color: currentColor;
}
.bt-icon-expand,
.bt-icon-collapse {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
}
.bt-icon-collapse {
    mask-image: url("../images/CollapseButton.svg");
    -webkit-mask-image: url("../images/CollapseButton.svg");
}
.bt-icon-expand {
    mask-image: url("../images/ExpandButton.svg");
    -webkit-mask-image: url("../images/ExpandButton.svg");
}
/*.bt-icon-overview {
    mask-image: url("../images/Overview.svg");
    -webkit-mask-image: url("../images/Overview.svg");
}
.bt-icon-grid {
    mask-image: url("../images/GridView.svg");
    -webkit-mask-image: url("../images/GridView.svg");
}
.bt-icon-pivotgrid {
    mask-image: url("../images/PivotGrid.svg");
    -webkit-mask-image: url("../images/PivotGrid.svg");
}
.bt-icon-treeview {
    mask-image: url("../images/TreeView.svg");
    -webkit-mask-image: url("../images/TreeView.svg");
}
.bt-icon-formlayout {
    mask-image: url("../images/FormLayout.svg");
    -webkit-mask-image: url("../images/FormLayout.svg");
}
.bt-icon-editform-validation {
    mask-image: url("../images/EditFormValidation.svg");
    -webkit-mask-image: url("../images/EditFormValidation.svg");
}
.bt-icon-toolbar {
    mask-image: url("../images/Toolbar.svg");
    -webkit-mask-image: url("../images/Toolbar.svg");
}
.bt-icon-tabs {
    mask-image: url("../images/Tabs.svg");
    -webkit-mask-image: url("../images/Tabs.svg");
}
.bt-icon-editors {
    mask-image: url("../images/Editors.svg");
    -webkit-mask-image: url("../images/Editors.svg");
}
.bt-icon-pager {
    mask-image: url("../images/Pager.svg");
    -webkit-mask-image: url("../images/Pager.svg");
}
.bt-icon-info {
    width: 20px;
    height: 20px;
    mask-image: url("../images/Info.svg");
    -webkit-mask-image: url("../images/Info.svg");
}
*/
/* Target Container */
.target-container {
    flex-grow: 1;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: -2rem;
    padding: 2rem;
    width: calc(100% + 4rem);
}
.target-container .target-caption {
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

/* Upload Container */
.upload-container,
.upload-container > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.drop-file-icon {
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    width: 42px;
    height: 42px;
    -webkit-mask-image: url("../images/DropFile.svg");
    mask-image: url("../images/DropFile.svg");
}

/* Misc */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.online-only-warning {
    margin-top: 32px;
    margin-bottom: 40px;
    padding: 16px 16px 0 66px;
    max-width: 1024px;
}

.online-only-warning > img {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 21px;
    left: 16px;
}

.online-only-warning .info-caption {
    font-size: 16px;
    margin-bottom: 2px;
}

.online-only-warning .info-description {
    font-size: 14px;
    margin-bottom: 16px;
}

/*BusinessTime specific*/
/*.grid table tr:not(:first-child) > td {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
}*/

.grid .table,
.grid .table tr > td,
.grid .card,
.grid .table thead > tr,
.grid .table thead > tr > th,
.grid .dxbs-data-row,
.grid .dxbs-empty-data-row
.grid .dxbs-grid-first-level-group {
    border: none;
}

.grid .dx-grid-summary-row {
    border: none;
    background-color: transparent;
}

.grid .dx-grid-summary-row > td {
    background-color: transparent;
    border-top: solid thin;
    border-color: lightgray;
}

.grid .table thead > tr {
    border-bottom: solid thin;
    border-bottom-color: lightgray;
}


.grid .dxbs-gridview > .card {
    border: none;
}

.grid-lookup table > thead {
    font-size: small;
}

.grid-lookup table > thead > th {
    font-size: small;
}

.grid-lookup table tr > td {
    border-top: none;
    border-bottom: none;
    border-left: none;
    border-right: none;
    font-size: small;
}

.grid-lookup table {
    border: none;
    font-size: x-small;
}

.timeentry-header {
    justify-content: center;
    align-content: center;
    padding: 4px;
    text-align: center;
    font-size: 125%;
}

.timeentry-weekly-header {
    border: solid;
    border-width: 1px;
    border-color: darkgray;
    background-color: whitesmoke;
    padding: 4px;
}

.timeentry-description {
}

.icon-darkgrey {
    color: darkgrey;
}

.fs-smaller {
    font-size: 75%;
}
.fs-small {
    font-size: small;
}

.fs-medium {
    font-size: medium;
}

.fs-xsmall {
    font-size: x-small;
}

.bt-combo input {
    border: none;
    margin-left: 0px;
}

.bt-combo .dxbs-dropdown-toggle {
    border: none;
}

.text-size-nine {
    font-size: 9px;
}

.text-size-eleven {
    font-size: 11px;
}

.text-size-tweleve {
    font-size: 12px;
}

.text-size-sixteen {
    font-size: 16px;
}

.text-size-twenty {
    font-size: 20px;
}

.text-size-twentyfour {
    font-size: 24px;
}

.text-size-thirtytwo {
    font-size: 32px;
}

.bt-label {
    color: darkgray;
    font-size: .8em;
}

.bt-data-text {
    font-size: .8em;
}

.bt-btn .btn:focus {
    outline: none;
    box-shadow: none;
}

.bt-tab {
    font-size: .8rem;
    border: solid;
    border-width: 1px;
    border-color: lightgrey;
}

.bt-tab > a {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    font-style: normal;
}

.max-viewport {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.text-smaller {
    font-size: smaller;
}

.bt-fs-xs {
    font-size: 70%;
}

.bt-fs-sm {
    font-size: 80%;
}

.bt-fs-md {
    font-size: 90%;
}

.bt-fs-lg {
    font-size: 125%;
}

.bt-fs-xlg {
    font-size: 150%;
}

.bt-toolbar-combobox {
    min-width: 250px;
}

.required-label::after {
    color: red;
    content: "  *";
}

.table-md {
    font-size: 12px;
    margin: 0;
}

.table-md > tbody > tr > td {
    padding-left: .25rem;
    padding-right: .25rem;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.table-condensed {
    font-size: 12px;
}

.table-condensed > tbody > tr > td {
    padding-left: .25rem;
    padding-right: .25rem;
    padding-top: 1px;
    padding-bottom: 1px;
}

.parent-table {
    margin: 0px;
}

.parent-table > tbody > tr > td {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 0px;
    padding-right: 0px;
    border-bottom: solid;
    border-bottom-width: 1px;
    border-bottom-color: lightgrey;
}

.parent-table > tbody > tr:last-child > td {
    border-bottom: none;
}

.btn-col {
    width: 12px;
}

.col-bottom-border > div:last-child {
    border-bottom: none;
}

.small-spinner {
    width: 16px;
    height: 16px;
}

.card-detail {
    padding: 0px;
    border-top: solid;
    border-color: lightgray;
    border-width: 1px;
    min-height: 250px;
    max-height: 250px;
}

.signin {
    max-width: 500px;
    min-width: 300px;
}

.wait-spinner .spinner-border {
    border: .2em solid;
    border-color: #5f368d #bfbfbf #bfbfbf;
    width: 48px;
    height: 48px;
}

.splash-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    height: 100vh;
    font-family: "Segoe UI",Roboto,"Helvetica Neue","-apple-system",BlinkMacSystemFont,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

.splash-screen .spinner-border {
    border: .2em solid;
    border-color: #f00000 #bfbfbf #bfbfbf;
    width: 120px;
    height: 120px;
}

.userprofile {
    width: 300px;
}

.menu-icon-user-profile {
    mask-image: url("../images/UserProfile.svg");
    -webkit-mask-image: url("../images/UserProfile.svg");
}

.userprofile-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    mask-image: url("../images/UserProfile.svg");
    -webkit-mask-image: url("../images/UserProfile.svg");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.bt-primary-button {
    min-width: 7em;
}

.bt-secondary-button {
    min-width: 5em;
}

.popup-body {
    max-height: calc(100vh * .50);
    min-height: calc(100vh * .50);
}

.select-resource {
    border: none;
    height: 200px;
    max-height: 200px;
}

.search-results {
    transition: transform 0.1s ease-in-out;
    transform: translateY(-100%);
}

    .search-results.shown {
        padding: .1rem 1rem;
        position: relative;
        transform: translateY(0);
    }
        .search-results.shown:after {
            content: '';
            position: absolute;
            left: 5px;
            bottom: 0;
            border-top: 1px solid currentColor;
            opacity: 0.15;
            width: 295px;
            height: 0;
        }

   .search-results ul {
        display: flex;
        flex-direction: column;
        font-size: .8rem;
        padding: 0;
    }

        .search-results ul > li {
            list-style: none;
            padding-bottom: 1rem;
        }
/*            .search-results ul > li > div {
                padding: .1rem 1rem;
            }*/

            .search-results ul > li:last-child {
                padding-bottom: 0;
            }

/*            .search-results ul > li > a {
                color: inherit;
                padding: 0;
            }*/
            .search-results ul > li > a {
                padding: 0;
            }

                .search-results ul > li > a:first-child {
                    display: block;
                }

            .search-results ul > li > :not(:first-child) {
                display: inline-block;
                font-size: 0.9em;
                opacity: .75;
            }

            .search-results ul > li > a:not(:first-child) {
                border-bottom: 1px dashed;
                font-size: 0.9em;
                opacity: .75;
            }

                .search-results ul > li > a:not(:first-child):hover {
                    text-decoration: none;
                }

            .search-results ul > li > ul > li {
                padding: .1rem 1.25rem;
            }
            .search-results ul > li > span.link-separator {
                border-radius: 0;
                border-style: solid;
                border-width: 5px !important;
                border-left-color: currentColor !important;
                border-top-color: transparent !important;
                border-right-color: transparent !important;
                border-bottom-color: transparent !important;
                width: 0;
                height: 0;
                margin: 0 0.2rem 0 0.4rem;
                padding: 0;
            }