:root {
  --header-height: 1.7rem;
}

body {
  font-family: 'Open Sans', sans-serif;
  /* font-size: 1em; */
  /* background-color: #f7f8f9; */
  margin: 0 auto 0 auto;
  width: 100%;
  overflow-y: scroll;
}

[name=loginForm] {
  width:600px;
}


[name=str]{
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .132), 0 0.3px 0.9px 0 rgba(0, 0, 0, .108);
}
.ui-list-item .ui-data-element{
    border-bottom: solid 1px #ccc;
}

[name=docGroup]{
    background-color: white;
    padding: 10px 0 0 10px;
}

[name=docViewer]{
    text-align: justify;
    padding: 0 10px 0 10px;
    margin: 10px 0 10px 0;
}


.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;
}

[name=treeList],
[name=listOfHeaders],
[name=str]{
    scrollbar-width: thin;
}

form {
    container: formContainer / inline-size;
}

/*=========================================================================================================================
УПРАВЛЕНИЕ ОТОБРАЖЕНИЕМ ДЕРЕВА В АДАПТИВНОМ ДИЗАЙНЕ
<form>
    <div name=treePanel style='flex: 0 0 20%;'>
        <div name=treeList>

*/
/*При ширине form менее 900 убираем ширину treePanel 20%, чтобы он мог растягиваться на всю ширину экрана*/
@container formContainer (width < 1130px) {                  
    [name=treePanel] {
        display: flex !important;/*Перекрывает display:none, заданный для элемента*/
        flex-basis: auto !important;/*Перекрывает flex-basis: '20%', заданный для элемента treePanel. Позволяет схлопываться при [name=treeList] {display:none}*/
    }
    [name=leftMenu]{
        flex-basis: auto !important;/*Перекрывает flex-basis: '20%', заданный для элемента leftMenu.*/        
    }    
    [name=adaptiveLeftMenuButton]{
        display: flex;/*Показывает кнопку переключатель для адаптивного контента, когда ширина небольшая и дерево слева скрыто.*/
    }
    [name=standardLeftMenuButton]{
        display: none;/*Скрывает кнопку переключатель для стандартного контента, когда ширина небольшая и дерево слева скрыто.*/
    }    
}
@container formContainer (width > 1130px) {                  
    [name=adaptiveLeftMenuButton]{
        display: none;/*Скрывает кнопку переключатель для адаптивного контента, когда ширина позволяет показывать дерево слева.*/
    }
    [name=standardLeftMenuButton]{
        display: flex;/*Показывает кнопку переключатель для стандартного контента, когда ширина позволяет показывать дерево слева.*/
    }
}


/*При ширине treePanel менее 150 скрываем treeList*/
[name=treePanel]{
    container: treePanelContainer / inline-size;
}
@container treePanelContainer (width < 230px) {                  
    [name=treeList] {
        display: none;
    }
}
@container treePanelContainer (width > 230px) {                  
    [name=treeList] {
        display: flex;
    }
}
/*=======================================================================================================================*/

/*=========================================================================================================================
УПРАВЛЕНИЕ ОТОБРАЖЕНИЕМ СОДЕРЖАНИЯ В АДАПТИВНОМ ДИЗАЙНЕ
<form>
    <div name=rightPanel style='flex: 0 0 20%;'>
        <div>Содержание документа</div>
        <div name=listOfHeaders>

*/
/*При ширине form менее 750 убираем ширину rightPanel 20%, чтобы он мог растягиваться на всю ширину экрана*/
@container formContainer (width < 750px) {                  
    [name=rightPanel] {
        display: flex !important;/*Перекрывает display:none, заданный для элемента*/
        flex-basis: auto !important;/*Перекрывает flex-basis: '20%', заданный для элемента rightPanel. Позволяет схлопываться при [name=listOfHeaders] {display:none}*/
        margin-left: 0px !important;
    }
    [name=rightMenu]{
        flex-basis: auto !important;/*Перекрывает flex-basis: '20%', заданный для элемента rightMenu.*/        
    }
    [name=adaptiveRightMenuButton]{
        display: flex;/*Показывает кнопку переключатель для адаптивного контента, когда ширина небольшая и оглавление справа скрыто.*/
    }
    [name=standardRightMenuButton]{
        display: none;/*Скрывает кнопку переключатель для стандартного контента, когда ширина небольшая и оглавление справа скрыто.*/
    }       
}
@container formContainer (width > 750px) {                  
    [name=adaptiveRightMenuButton]{
        display: none;/*Скрывает кнопку переключатель для адаптивного контента, когда ширина позволяет показывать оглавление справа.*/
    }
    [name=standardRightMenuButton]{
        display: flex;/*Показывает кнопку переключатель для стандартного контента, когда ширина позволяет показывать оглавление справа.*/
    }
}

/*При ширине rightPanel менее 150 скрываем содержание*/
[name=rightPanel]{
    container: rightPanelContainer / inline-size;
}
@container rightPanelContainer (width < 150px) {                  
    [name=captionListOfHeaders], [name=listOfHeaders] {
        display: none;
    }
}
@container rightPanelContainer (width > 150px) {                  
    [name=captionListOfHeaders], [name=listOfHeaders] {
        display: flex;
    }
}
/*=======================================================================================================================*/

[name=leftMenu],
[name=rightMenu]{
    cursor: pointer;
} 

[name=productName]{   
    font-size: var(--header-height);
    font-weight: 700;
}

[name=treePanel].tempShow {
    position: absolute;
    z-index: 10;
    width:70%;
    height: 100%;
    background-color: var(--bg-color);
    border-right: solid 1px #ccc;
}

[name=rightPanel] {
    /* margin-left: 10px; */
    /* max-width: 20%; */
    background-color: white;
}
[name=rightPanel].tempShow {
    position: absolute;
    right: 0px;
    z-index: 10;
    width:70%;
    height: 100%;
    background-color: var(--bg-color);
    border-left: solid 1px #ccc;
}

p.img{
    text-align: center;
}

img {
    border: solid 1px grey;
    max-width: 99%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.cm-editor {
    width: 100%;
    height: 100%;
}
.cm-scroller {
    scrollbar-width: thin;
}

.cm-selectionBackground {
    background: lightgray !important;
}

[name=docMenu]{
        border-bottom: solid 1px gray;
}

/*==================================
            #ERRORS
==================================*/

[name=err] {
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 15px;
  margin: 0px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 0.7em;
}

:not(.warning)[name=err] {
  border: 2px solid #ee372e;
  background: #fce6be;
}

.warning[name=err]{
  border: 2px solid #eebb2e;
  background: #fce6be;
}

/*==================================
            UIButton
==================================*/
[name=buttonGroup]{
    margin: 2px 0px 2px 0px !important;
}

/* [name=buttonGroup]  */
.ui-button button {
  background-color: rgb(119, 145, 181);
  color: white;
  margin: 0px !important;
}

/* [name=buttonGroup]  */
.ui-button.disable button{
  background-color: #7e817e;
}

.ui-menu-item.selected{
    border-top: solid 1px rgb(119, 145, 181);
    border-left: solid 1px rgb(119, 145, 181);
    border-right: solid 1px rgb(119, 145, 181);
}

/*==================================
            Chat
==================================*/

[name=chatList] .ui-str.question {
    background-color: var(--bg-toolbar-color);
}
[name=sendButton] {
    margin: 10px !important;
    cursor: pointer;
}

[name=questionBox], .question{
    white-space: pre-line;
}