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

/*@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000');*/

:root {
    --toolbar-padding-bottom: 20px;
    /* MenuBlock */
    --menu-width: 210px;
    /* CenterBlock */
    --center-block-margin-side: 0px;
    /* FirstTopBlock */
    --first-top-block-height: 60px;
    --first-top-block-margin-left: 30px;
    --first-top-block-margin-right: 0px;
    --toolbar-height: 60px;
    /* RenderBlock */
    --render-block-margin-top: 30px;
    --render-block-margin-left: 0px;
    --render-block-margin-right: 0px;
    /* ContentBlock */
    --content-block-margin-left: 0px;
    --content-block-margin-right: 0px;
    /* Color */
    --color-logo-red: #AE2631;
    --color-font-grey: #646464;
    --color-font-black: #000000;
    /* Grid */
    --grid-gap: 15px;
}

@font-face {
    font-family: "Mulish";
    src: url("../../../WB.Resources/css/devextreme/fonts/Mulish-VariableFont_wght.ttf");
}

body {
    margin: 0;
    padding: 0;
    font-family: "Mulish", "Segoe UI", helvetica, verdana, sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 18px;
    line-height: 23px;
    text-align: center;
    /*color: #000000;*/
    cursor: url("../icons/svg/cursor_white.svg"), auto;
}

@-moz-document url-prefix() {
    body {
        font-weight: lighter !important;
    }
}

.main {
    display: contents;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    position: relative;
}

/*** ПЕРЕОПРЕДЕЛЕНИЕ СТАНДАРТА ***/

a {
    color: #4D4AE4; /*hsl(241, 74%, 59%);*/
}

    a:hover {
        color: hsl(241, 100%, 30%);
    }

/*.dx-toolbar .dx-toolbar-items-container {
    height: var(--navbar-height);
}*/

/* #Entity, #Users, */
/*.content  {
    height: calc(100dvh - var(--navbar-height));
}*/

.padding-0 {
    padding: 0;
}

.link_padding_left {
    margin: 0 8px 0px 0px;
}

/*** ПЕРЕОПРЕДЕЛЕНИЕ BOOTSTRAP ***/

.btn-primary {
    color: #FFFFFF;
    border: none;
    width: 320px;
    height: 50px;
    background: linear-gradient(268.83deg, #4D4AE4 13.51%, rgba(73, 47, 175, 0.98) 107.67%);
}

    .btn-primary:hover {
        color: #FFFFFF;
        text-shadow: 0 0 3px #FFFFFF;
        background: linear-gradient(268.83deg, #4D4AE4 13.51%, rgba(53, 37, 155, 0.98) 107.67%);
    }

.nav-item {
}

    .nav-item:active {
    }

.nav-link {
    color: #323232;
}

.nav-pills .nav-link.active {
    color: #FFFFFF;
    background-color: #4D4AE4;
}

/*** ПЕРЕОПРЕДЕЛЕНИЕ DEVEXPRESS THEME ***/

.dx-toolbar {
    margin: 0;
    padding: 0;
}

.dx-toolbar-item-content > .dx-texteditor,
.dx-toolbar-item-content.dx-texteditor {
    width: 100%;
}

.dx-datagrid-header-panel .dx-toolbar {
    margin-bottom: 0;
}

.doc-toolbal-label {
    padding-left: 5px !important;
}

.panel-list {
    height: calc(100dvh - var(--navbar-height));
    width: 16dvw;
    padding-left: 0 !important;
    border: 1px solid;
}

.dx-datagrid-header-panel .dx-toolbar {
    margin-bottom: 0;
}

.dx-popup-bottom.dx-toolbar {
    padding: 0 15px 10px 10px;
}

.dx-form-group-with-caption > .dx-form-group-content { /* карточка: группы */
    padding-top: 10px;
    margin-top: 5px;
    padding-bottom: 10px;
}

.form-data-container {
    margin: 10px 30px 15px 30px;
    /*max-height: 650px;*/
}

/*** ИКОНКИ ***/

/*** МЕНЮ ***/

/*.main-toolbar {*/ /*TODO*/
/*margin: 0 10px 0 5px !important;
    height: var(--navbar-height);
    min-width: 10dvh;
    position: fixed;
    top: 0;
    z-index: 1503;
    padding-right: 5px;
}*/

.content {
    height: 100dvh; /* TODO */
}

.panel-list { /* TODO */
    min-width: 150px;
    position: fixed;
    top: calc(var(--navbar-height) + 5px);
    height: calc(100dvh - var(--navbar-height) - 5px);
}

.main-toolbar {
    height: calc(var(--navbar-height) + 5px);
}

.dx-toolbar-button {
    margin-left: 5px;
    vertical-align: central;
    /*vertical-align: bottom;*/
    /*vertical-align: top;*/
}

.dx-list-item {
    padding-top: 4px;
    padding-bottom: 4px;
}

/*.dx-checkbox {
    display: block;
}*/

/*** Таблица Менеджеры ***/

/* Grid отображение аватара в таблице */

.avatarPhoto {
    height: 200px;
    /*width: 100px;*/ /* не используется, т.к. тянет фото */
    margin-right: 10px;
    border: 12px solid none;
    border-radius: 5%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* стиль для группы */
.avatarGroupPopup {
    /*width: 400px;*/
}

/* Popup отображение аватара */

.avatarPhotoPopup {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 2px;
    margin: 0px;
    margin-top: 7.5px;
    border: 2px #dee2e6 dashed;
    border-color: rgba(255, 255, 255, .5);
    border-width: 1px;
    border-radius: 2px;
    border-style: dashed;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* сброс для горизонтального Popup отображения !Important */
.dx-layout-manager .dx-field-item:not(.dx-last-col) {
    -webkit-padding-end: 0;
    padding-inline-end: 0;
}

/*  */
.gridPhoto {
    /*border: 2px solid none;
    background-size: contain;
    background-repeat: repeat;
    background-position: center;*/
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

    .gridPhoto img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.listPhoto {
    width: 200px;
    /*    height: 300px;*/
    border: 2px solid none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.listValue {
    font-size: 1.2em;
}

    .listValue a {
        color: inherit;
        text-decoration: none;
    }

        .listValue a:hover {
            color: gray;
        }

.listContent { /* TODO ! */
    height: calc(100dvh - var(--navbar-height));
}

.listCard:hover {
    background: rgba(0,0,0,0.05);
}

.listCardItem {
    width: 80%;
    max-width: 1000px;
}

@media screen and (max-width: 700px) {
    .listCardItem {
        width: 100%;
        max-width: 600px;
        min-width: 300px;
        font-size: 0.60em;
    }
}

/*** STATUS_COLOR ***/

.statusContainer {
    display: flex;
    align-items: center;
}

.statusColor {
    width: 20px;
    height: 20px;
    /*border: 1px solid black;*/
    border-radius: 50%;
    border-radius: 50%;
    min-width: 20px;
    min-height: 20px;
}

.statusText {
    margin-left: 10px; /* добавляйте отступ по вашему усмотрению */
}

.vertMiddle {
    vertical-align: middle;
    position: relative;
}

.redColor { /* TODO: del */
    color: red;
}

/* PROGRESS BAR */

.progress {
    --bs-progress-height: 1rem;
    --bs-progress-font-size: 0.75rem;
    --bs-progress-bg: #e9ecef;
    --bs-progress-border-radius: 0.375rem;
    --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --bs-progress-bar-color: #fff;
    --bs-progress-bar-bg: #0d6efd;
    --bs-progress-bar-transition: width 0.6s ease;
    display: flex;
    height: var(--bs-progress-height);
    height: 20px;
    overflow: hidden;
    font-size: var(--bs-progress-font-size);
    background-color: var(--bs-progress-bg);
    border-radius: var(--bs-progress-border-radius);
    border-radius: 0;
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-progress-bar-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--bs-progress-bar-bg);
    background-color: #4D4AE4;
    transition: var(--bs-progress-bar-transition);
}

/* Карточки */

.dx-layout-manager.dx-widget {
    height: 100%;
}

.dx-first-col.dx-last-col.dx-last-row.dx-field-item.dx-col-0.dx-field-item-optional.dx-field-item-has-tabs {
    height: 100%;
}

.dx-field-item-content.dx-field-item-content-location-right {
    height: 100%;
}

.dx-item-content .dx-multiview-item-content {
    position: absolute;
}