@media (prefers-color-scheme: dark) {
    body {
        background-color: rgb(54, 54, 64);
        color: #ccc;
    }
}


:root {
    --mud-elevation-5: 
        0px 3px 5px -1px rgba(0,0,0,0.2),
        0px 5px 8px 0px rgba(0,0,0,0.14),
        0px 1px 14px 0px rgba(0,0,0,0.12);
}


/* Small to large phone < 600px */
@media (max-width: 599px) {

    .xs { display: inherit; }
    .sm { display: none!important; }
    .md { display: none!important; }
    .lg { display: none!important; }
    .xl { display: none!important; }
    .xx { display: none!important; }
}
/* Small to medium tablet < 960px */
@media (max-width: 959px) {
    .xs { display: inherit; }
    .sm { display: inherit; }
    .md { display: none!important; }
    .lg { display: none!important; }
    .xl { display: none!important; }
    .xx { display: none!important; }
}


/* Large tablet to laptop < 1280px */
@media (max-width: 1279px) {
    .xs { display: inherit; }
    .sm { display: inherit; }
    .md { display: inherit; }
    .lg { display: none!important; }
    .xl { display: none!important; }
    .xx { display: none!important; }
}


/* Desktop < 1920px */
@media (max-width: 1919px) {
    .xs { display: inherit; }
    .sm { display: inherit; }
    .md { display: inherit; }
    .lg { display: inherit; }
    .xl { display: none!important; }
    .xx { display: none!important; }
}


/* HD and 4k < 2560px */
@media (max-width: 2559px) {
    .xs { display: inherit; }
    .sm { display: inherit; }
    .md { display: inherit; }
    .lg { display: inherit; }
    .xl { display: inherit; }
    .xx { display: none!important; }
}


/* 4k+ and ultra-wide >= 2560px* */
@media (min-width: 2560px) {
    .xs { display: inherit; }
    .sm { display: inherit; }
    .md { display: inherit; }
    .lg { display: inherit; }
    .xl { display: inherit; }
    .xx { display: none!important; }
}


body {
    position: fixed;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


.se-app-toolbar {
    /* --mud-elevation-5 */
    box-shadow: var(--mud-elevation-5);
}

.se-app-menu .dx-state-hover {
    color: yellow!important;
}
.se-app-menu .dx-treeview-node .dx-state-focused span {
    color: yellow!important;
}

.se-app-menu .dx-placeholder,
.se-app-menu .dx-treeview-toggle-item-visibility {
    color: #cccccc!important;
}

.se-app-menu,
.se-app-menu input {
    color: white!important;
}

#app-header {
    font-weight: bold;
    font-size: .8em;
}
#app-header-hint {
    font-weight: normal;
    font-size: .8em;
}

#se-app {
    display: grid;
    grid-template-areas:
        "header"
        "drawer"
        "footer";
    grid-template-rows: auto 1fr auto;
    height: 100%;
    width: 100%;
}

#se-header {
    grid-area: header;
    min-width: 0;
    min-height: 0;
}

#se-drawer {
    grid-area: drawer;
    height: 100%;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

#se-content {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.se-page {
    width: 100%;
    height: 100%;
}
.se-page-header {
    grid-area: page-header;
    min-width: 0;
    min-height: 0;
    padding: 3px;
    color: #fff;
    white-space: nowrap;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    font-size: 1.2em!important;
    width: 100%;

    box-shadow: var(--mud-elevation-5)!important;
    z-index: 1;
}
.se-page-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}
.se-close-page-button i {
    cursor: pointer;
}
.se-close-page-button {
    padding: 0 5px;
    vertical-align: middle;
    text-align: right;
}
.se-page-content {
    grid-area: page-content;
    min-width: 0;
    min-height: 0;
    overflow: initial;
    width: 100%;
    height: 100%;
    padding: 10px;
}

#se-footer {
    grid-area: footer;
    min-width: 0;
    min-height: 0;
}
#se-footer > .dx-tabs-wrapper > .dx-empty-message {
    padding: 5px!important;
    text-align: right;
    font-size: .9em;
}


.far, .fas {
    font-size: 1.2em!important;
}

/*****************************************************************************/
/* Стили расписаний dxSheduler */
.se-scheduler-occuped {
    background-color: #f0a400; /* #007700;*/
}
.se-scheduler-free {
    background-color: darkcyan; /*#ff5722;*/
    color: white!important;
}

/*****************************************************************************/
.se-error { color: red; }
.se-success { color: #007700; }

/* Стиль кнопок в списках dxDataGrid */
.se-grid-button { padding: 5px!important; text-overflow: clip!important; }
.se-grid-button > a { text-decoration: none!important; font-size: 1.3em; }


/*****************************************************************************/
.se-key-value tr { vertical-align: top; }
.se-key-value hr { border-top: none!important; border-bottom: 1px dotted; }


/*****************************************************************************/
/* .se-badge-info { } */
.se-badge-success { background-color: #2c7e17!important; color: #fff!important; }
.se-badge-warn { background-color: #f0a400!important; color: #fff!important; }
.se-badge-error { background-color: red!important; color: #fff!important; }

.se-badge-status-1 { background-color: blueviolet!important; color: #fff!important; }
.se-badge-status-2 { background-color: brown!important; color: #fff!important; }
.se-badge-status-3 { background-color: lightcoral!important; color: #fff!important; }
.se-badge-status-4 { background-color: royalblue!important; color: #fff!important; }
.se-badge-status-5 { background-color: #777; color: #fff!important; }
.se-badge-status-6 { background-color: orchid; color: #fff!important; }
.se-badge-status-7 { background-color: fuchsia; color: #fff!important; }
.se-badge-status-8 { background-color: darkcyan; color: #fff!important; }
.se-badge-status-9 { background-color: #fa6f92; color: #fff !important; }

.se-badge-group {
    display: flex;
    flex-direction: column;
}

/*
 * Стиль ячейки шаблонизированной под строку таблицы dxDataGrid
 */
.se-cell-row-template { display: flex; flex-wrap: wrap; justify-content: space-between; }

/*
    Стилизация всплывающего диалогового окна в
    элементах управления dxDropDownBox,
    версия 22.1.3, Desktop
 */
.se-drop-down-popup-desktop {
    height: 80%!important;
    width: 80%!important;
    transition: none!important;
    transform: none!important;
    width: 100%!important;
    height: 100%!important;
}

.se-key-value-pair {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    overflow: visible;
    margin: 0;
}
.se-key-value-pair > dt {
    flex: 0 0 40%;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: bold;
    margin-bottom: 3px;
}
.se-key-value-pair > dd {
    flex:0 0 60%;
    margin-left: auto;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 3px;
}


/*****************************************************************************/

/* Иконки файлов */
.se-file-icon-large { text-align: center; }
.se-file-icon-large i { font-size: 5em!important; }


.se-tile-item {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.se-tile-item-image {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.se-tile-title {
    position: absolute;
    bottom: 0;
    text-align: center;
    background-color: #000;
    opacity: .7;
    color: #fff;
    width: 100%;
    padding: 6px;
    height: 50px;
}
.se-tile-icon { text-align: center; }
.se-tile-icon i { font-size: 6em!important; padding: 45px; }

.se-tile-toolbar {
    position: absolute;
    top: 0;

    padding: 5px 5px!important;
    background-color: transparent!important;
}
.se-tile-toolbar .dx-toolbar-items-container {
    height: auto!important;
}
.se-tile-toolbar .dx-toolbar-button {
    background-color: #777!important;
    border-radius: 50%;
}


/*****************************************************************************/
.se-schedule-resource { padding: 5px 0 5px 0; }
.se-schedule-resource .avatar {
    vertical-align: middle;
    display: inline-block
}
.img-medium {
    width: 80px;
    border-radius: 50%;
    box-shadow: 0 0 5px #666;
    border: solid 1px #fff;
}
.se-schedule-resource .name {
    vertical-align: middle;
    display: inline-block;
    padding-left: 20px;
}

.se-schedule-resource .party {
    font-weight: bold;
    font-size: 1.2em;
}


.dx-tab {
    padding: 8px 8px!important;
}
.dx-tabs-nav-button {
    height: auto!important;
    padding: 8px 8px!important;
}

.dx-datagrid-header-panel {
    padding-left: 0!important;
    padding-right: 0!important;
}

.dx-device-mobile .dx-toolbar .dx-toolbar-items-container {
    height: 48px!important;
}

.dx-button-text, .dx-tab-text {
    text-transform: none !important;
}

.dx-tab .dx-icon {
    display: inline!important;
    padding: 0 10px 0 0!important;
}

.dx-badge {
    white-space: nowrap;
}

/**
 * Чтобы элементы dxDropDownButton были по своей ширине, необходимо в параметры dxDropDownButton
 * добавить:
 *     {
 *         ....
 *         dropDownOptions: { width: 'auto!important' },
 *         ....
 *     }
 */
.dx-dropdownbutton-content .dx-list-item {
    display: block;
}
/**
* Поддержка скролла в гридах, которые находятся в табах формы
*/
.dx-form>.dx-layout-manager {
    height: 100%;
}

.tabbedGrid.dx-field-item,
.tabbedGrid .dx-field-item-content,
.tabbedGrid .dx-tabpanel {
    height: 100%;
}
.boldSelectBox .dx-texteditor-container .dx-texteditor-input {
    font-weight: bold;
}