body {
    /* text-align: center; */
}

.ui-app {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
}

.fullViewPort {
    height: 100vh;
}


/*=================================================================*/
/*===========================UI-ELEMENT============================*/
/*=================================================================*/

.flexible {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
}

.fixed {
    flex: 0 1 auto;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
}

.positionAbsolute{
    position: absolute !important;
}

:not(.positionAbsolute).topLeft {
    margin-bottom: auto;
    margin-right: auto;
}
:not(.positionAbsolute).topCenter {
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}
:not(.positionAbsolute).topRight {
    margin-bottom: auto;
    margin-left: auto;
}

:not(.positionAbsolute).centerLeft {
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
}
:not(.positionAbsolute).centerCenter {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}
:not(.positionAbsolute).centerRight {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
}

:not(.positionAbsolute).bottomLeft {
    margin-top: auto;
    margin-right: auto;
}
:not(.positionAbsolute).bottomCenter {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}
:not(.positionAbsolute).bottomRight {
    margin-top: auto;
    margin-left: auto;
}

.positionAbsolute.topLeft {
    top: 0px;
    left: 0px;
}
.positionAbsolute.topCenter {
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
}
.positionAbsolute.topRight {
    top: 0px;
    right: 0px;
}

.positionAbsolute.centerLeft {
    top: 50%;
    transform: translate(0, -50%);
    left: 0px;
}
.positionAbsolute.centerCenter {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.positionAbsolute.centerRight {
    top: 50%;
    transform: translate(0, -50%);
    right: 0px;
}

.positionAbsolute.bottomLeft {
    bottom: 0px;
    left: 0px;
}
.positionAbsolute.bottomCenter {
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0);
}
.positionAbsolute.bottomRight {
    bottom: 0px;
    right: 0px;
}

.unselectable {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.ui-element > a,
.ui-data-element > a,
.ui-button > a,
.ui-image > .icon > a,
.ui-menu-item > .icon > a {
    /* display: block; */
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
}

/*=================================================================*/
/*===========================UI-GROUP==============================*/
/*=================================================================*/


.ui-element, .ui-data-element, .ui-context-element, .ui-button, .ui-editor, .ui-form, .ui-group, .ui-label, .ui-list, .ui-list-item, .ui-menu, .ui-menu-item, .ui-panel, .ui-property, .ui-splitter, .ui-str, .ui-table, .ui-tree,
.ui-context-element > .content, .ui-list > .content, .ui-table > .content, .ui-image {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    position: relative;
}

.vertical {
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
}

.horizontal {
    flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
}

.horizontal-wrap {
    flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;

    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

/* :not(.ui-panel .ui-group).flexible {
    overflow:auto;
} */

.overflow-auto {
    overflow:auto;
}

.overflow-hidden {
    overflow:hidden;
}

/*=================================================================*/
/*============== UIContextElement, UIStr, UIList, UITable==========*/
/*=================================================================*/

.ui-context-element,
.ui-list,
.ui-table,
.ui-str
{    
    flex-wrap: nowrap;/*Отменяет wrap, заданный в .horizontal*/
}

/*=================================================================*/
/*===========================UI-PROPERTY===========================*/
/*=================================================================*/

.ui-property {
    /* display: inline-flex; */
    /* display: -webkit-flex;
    display: -ms-flexbox; */
    /* position: relative; */
    /* align-items: baseline; */
}
.ui-property > .caption {
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: default;
    display: inline;
    text-align: left;
}
.ui-property > .field {
    display: inline-flex;
}

.ui-property.equalize.horizontal > .caption {
    /* max-width: 50%; */
    min-width: 50%;
}

.ui-property.equalize.horizontal > .field {
    /* max-width: 50%; */
    min-width: 50%;
}

.ui-property .content {
    display: flex;
}  

/*Для выравнивания заголовков и полей ввода свойств*/
.ui-property .content > .content-helper {
    z-index: -1;
    position: absolute;
    opacity: 0;
    white-space: nowrap;
}       

.ui-property.type-checkbox{
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
}


/*=================================================================*/
/*===========================UI-TREE===============================*/
/*=================================================================*/

.ui-tree {
    cursor: default;
}

.ui-tree-item[level='1'] .ui-tree-item-header {
        padding-left: 15px;
    }

.ui-tree-item[level='2'] .ui-tree-item-header {
        padding-left: 25px;
}

.ui-tree-item[level='3'] .ui-tree-item-header {
        padding-left: 35px;
}

.ui-tree-item[level='4'] .ui-tree-item-header {
        padding-left: 45px;
}

.ui-tree-item[level='5'] .ui-tree-item-header {
        padding-left: 55px;
}

.ui-tree-item[level='6'] .ui-tree-item-header {
        padding-left: 65px;
}

.ui-tree-item[level='7'] .ui-tree-item-header {
        padding-left: 75px;
}

.ui-tree-item[level='8'] .ui-tree-item-header {
        padding-left: 85px;
}

.ui-tree-item[level='9'] .ui-tree-item-header {
        padding-left: 95px;
}

.ui-tree-item-header {
    display: flex;
}

.ui-tree-item-fig {
    width: 20px;
}

.ui-tree-item-fig {
    width: 20px;
}

.ui-tree-item-col {
    width: 16px;
}
.ui-tree-item-col img {
        width:12px;
}

.ui-tree-item-fig {
    width: 22px;
    align-self: baseline;
}
.ui-tree-item-fig img {
        width:20px;
}

/*=================================================================*/
/*===========================UI-PANEL==============================*/
/*=================================================================*/

.ui-panel-container, .ui-panel-tabs {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    position: relative;
}

.ui-panel-box {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    position: relative;
}

.ui-panel-tab:hover{
    opacity: 0.8;
    cursor: pointer;
}

.ui-panel-tabs .ui-panel-tab {
    height: 1.5em;
    padding: 0 5px 0 5px;
}

/*=================================================================*/
/*===========================UI-SPLITTER===========================*/
/*=================================================================*/

.vertical .ui-splitter {
    cursor: ns-resize;
}

.horizontal .ui-splitter {
    cursor: ew-resize;
}


/*=================================================================*/
/*===========================UI-MENU===============================*/
/*=================================================================*/
.ui-menu {
    align-items: center;
}

.ui-menu-item {
    align-items: center;
    height: var(--menu-item-height);
    padding: 0 5px 0 5px;
}

.ui-menu-item:hover {
    opacity: 0.8;
    cursor: pointer;
}

.subMenu {
    position: fixed;
}

.ui-context-menu{
    position: absolute;
}

.ui-context-element .menu {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    position: relative;
}

/*=================================================================*/

.textAlignLeft {
    text-align: left;
}

.textAlignRight {
    text-align: right;
}

.textAlignCenter {
    text-align: center;
}