@font-face 
{
font-family: 'DefaultFont'; 
src: url('/fonts2/DefaultFont.woff') format('woff'); 
font-weight: normal; 
font-style: normal;
}

@font-face 
{
font-family: 'DefaultFontBoldItalic'; 
src: url('/fonts2/ArsenalBoldItalic.woff') format('woff'); 
font-weight: normal; 
font-style: normal;
}

@font-face 
{
font-family: 'DefaultFontBold'; 
src: url('/fonts2/ArsenalBold.woff') format('woff'); 
font-weight: normal; font-style: normal;
}

@keyframes rotation 
{
    0% 
    {
        transform:rotate(0deg);
    }
    100% 
    {
        transform:rotate(360deg);
    }
}

html, 
body
{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font: 14px 'DefaultFont', sans;
color: #333333;
}

body.non_auth
{
justify-content: center;
align-items: center;
}

.virt_keyboard_disabled input:not([type="checkbox"],[type="radio"]),
.virt_keyboard_disabled .glagolik_editor
{
    background: #fdfaf3 !important;
}

body.non_auth form[name="AuthForm"]
{
display: flex;
flex-direction: column;    
width: 300px;
}

body.non_auth form[name="AuthForm"] fieldset
{
border: 1px solid #cdcdcd;
border-radius: 8px;
padding: 16px;
box-sizing: border-box;
}

body.non_auth form[name="AuthForm"] p:last-of-type
{
text-align: center;
margin: 8px 0 0 0;
padding: 0; 
}

table, tbody, tr, td
{
padding: 0;
margin: 0;
border-collapse: collapse;
display: block;
}

tr:not(:last-of-type) > td
{
padding-bottom: 16px;    
}

.hide
{
display: none;    
}

.empty 
{
background: #ffe2d2 !important;
padding: 13px;
box-sizing: border-box;
border-top: #f1f1f1 1px solid;
border-bottom: #f1f1f1 1px solid;
width: 100%;
display: flex;
align-items: center;
}

body
{
display: flex;    
}

body > .left
{
min-width: 274px;    
max-width: 274px;   
background: #f0f0f1;
}

body > .left  button 
{
color: inherit;
outline: none;
border: none;
padding: 8px 0;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
user-select: none;
font: inherit;   
cursor: pointer;
width: 100%;
border-top: #ebebeb 1px solid;     
background: #f0f0f1;
}

body > .left  button img
{
width: 32px;
height: 32px;    
}

body > .right
{
overflow: hidden;
width: 100%;
position: relative;    
display: flex;
flex-direction: column;
background-color: #fff;
}

/* Вкладки */

#MainContentTab
{
display: flex;    
flex-direction: column;
flex-grow: 1;
overflow: hidden;
}

#MainContentTab .captions
{
display: flex;   
overflow: hidden; 
overflow: auto;
scrollbar-width: none;
}

#MainContentTab .contents
{
flex-grow: 1;    
display: flex;
overflow: hidden;
margin-top: -1px;
}

#MainContentTab .caption
{
letter-spacing: -0.2px;    
color: #000000;
z-index: 2 !important;
height: 40px;
border: 1px solid #ebebeb;   
position: relative;
min-width: 200px;
max-width: 200px;
white-space: nowrap;
background: #ebebeb; /* или #e5f3ff*/
cursor: pointer;
opacity: 0.5;  
}

#MainContentTab .caption ~ .caption
{
margin-left: -1px;
}

#MainContentTab .caption img
{
position: absolute;
top: 6px;
left: 8px;
right: 0;
width: 24px;
height: 24px; 
}

#MainContentTab .caption > .title
{
position: absolute;
top: 11px;
left: 38px;
right: 0;
text-overflow: ellipsis;
overflow: hidden;
font-size: 12px;
padding-right: 32px;
letter-spacing: 0.1px;
}

#MainContentTab .caption.active
{
background-color: white;
opacity: 1;   
}

#MainContentTab .caption.active::after
{
content: "";    
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background: #fff;
}

#MainContentTab .caption .tab_close
{
position: absolute;
top: 12px;
right: 8px;
width: 16px;
height: 16px;
z-index: 2;
padding: 0;
margin: 0;
border: none;
background: url(/_modules/filesystem/img/svg1/close.svg) top left no-repeat;
background-size: 16px 16px;
cursor: pointer;
}

#MainContentTab .caption.active .tab_close
{
opacity: 1;    
}

.content
{
display: flex;    
flex-direction: column;
border: 1px solid #ebebeb;
flex-grow: 1;   
width: 100%;
display: none;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

.content.active
{
display: block;    
}

.tab_button_panel
{
display: flex;    
flex-direction: row;
gap: 8px;
order: 2;
overflow: auto;
scrollbar-width: none;
border-bottom: 1px solid #ebebeb;
min-height: 41px;
max-height: 41px;
}

.tab_button_panel button 
{
color: inherit;
border: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
user-select: none;
padding: 8px 0;
margin: 0;
font: inherit;
cursor: pointer;
background: #fff;
min-width: 48px;
max-width: 48px;
white-space: nowrap;
overflow: hidden;
}

.tab_button_panel button > img
{
width: 24px;
height: 24px;
}

.tab_button_panel button .title
{
display: none;
width: 100%;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
}

.bcrumbs_nav 
{
scrollbar-width: none;
display: flex;
align-items: center;
padding: 8px;
box-sizing: border-box;
margin: 0;
overflow: auto;
order: 1;
border-bottom: 1px solid #ebebeb;
min-height: 33px;
max-height: 33px;
}

.bcrumbs_nav a 
{
color: #666666;
font-size: 12px;
position: relative;
flex-shrink: 0;
text-underline-offset: 2px;
}

.bcrumbs_nav a:not(:last-child) 
{
margin-right: 8px;
padding-right: 16px;
}

.bcrumbs_nav a:not(:last-child)::after 
{
content: ">";
width: 7px;
height: 9px;
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
right: 0;
}

.content_data
{
order: 3;   
position: relative;
padding: 0 8px 8px 8px;
position: absolute;
top: 88px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
scrollbar-width: thin;
word-break: break-word; 
display: flex;
gap: 16px;
flex-direction: column;
}

h1 
{
font-family: 'DefaultFont', sans;
margin: 0 -8px;
font-size: 1.5em;
padding: 4px 8px;
font-weight: normal;
color: #373c41;
white-space: nowrap;
background-color: #fafafa;
/*position: absolute;
top: 0;
left: 0;
right: 0;*/
}

h2 
{
font-family: 'DefaultFont', sans;
margin: 0;
font-size: 1.2em;
padding: 0;
font-weight: normal;
color: #373c41;
}

form h2
{
padding: 16px 0;    
}

/* Списки */

.table_recs_counter,
.list_recs_counter
{
padding: 0;
margin: 0;    
}

ul.tree
{
padding: 0;
margin: 0;
list-style-type: none;
position: relative;   
width: 100%;     
}

ul.tree > li
{
position: relative;    
min-height: 80px;
}

ul.tree > li > .wrapper
{
position: relative;    
display: flex;
gap: 8px;
}

ul.tree .bground
{
position: absolute; 
left: 0; 
height: 80px;
width: 100%; 
z-index: 0; 
border-top: #f1f1f1 1px solid; 
box-sizing: border-box;
}

ul.tree > li:nth-of-type(odd) .bground
{
background: #f0f0f0;
}

ul.tree > li:last-of-type .bground
{
border-bottom: #f1f1f1 1px solid;     
}

ul.tree .x 
{
display: flex;
height: 80px;
justify-content: center;
align-items: center;    
z-index: 1;
padding-left: 8px;
min-width: 16px;
max-width: 16px;
}

ul.tree .item
{
height: 80px;
flex-grow: 1;
align-content: center;
z-index: 0;
overflow-y: auto;
scrollbar-width: none;
} 

ul.tree .item .select_zone
{
display: flex;
align-items: center;
gap: 4px;    
}

ul.tree .item .item_date
{
font-size: 10px;
white-space: nowrap;
padding-top: 2px;
padding-right: 8px;
}    

ul.tree .item .item_title
{
white-space: nowrap;    
display: flex;
height: 72px;
align-items: center;
gap: 8px;
}

ul.tree .item .item_title > .preview
{
    min-width: 90px;
    max-width: 90px;
    height: 64px;
    border: #ebebeb 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.tree .item .item_title > .preview img
{
max-height: 100%;
max-width: 100%;
}

ul.tree .context
{
min-width: 24px;
max-width: 24px;
display: flex;
justify-content: flex-start;
z-index: 2;
position: relative;
}

ul.tree .context li
{
overflow: hidden;
cursor: pointer;
white-space: nowrap;     
flex-grow: 1;
display: block;
align-content: center;
padding: 0 4px;
height: 40px;
}

ul.tree .context li:hover
{
background: #e5f3ff !important;  
}

ul.tree .context button
{
width: 16px;
height: 16px;
align-self: center;
border: none;
background: url(/_modules/filesystem/img/svg1/context.svg) center center no-repeat;
background-size: 16px 16px;
cursor: pointer;
}

ul.tree .context_menu
{
display: flex;
flex-direction: column;
position: absolute;
top: 22px;
right: 28px;
background: #fff;
min-width: 150px;
border: #cccccc 1px solid;
z-index: 9999999;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 4px;
margin: 0;
}

ul.tree[data-sortable="true"]::before
{
content: "";
position: absolute;
top: -32px;
right: 9px;
width: 16px;
height: 16px;
background: url(/_modules/filesystem/img/svg1/sort.svg) top left no-repeat;
background-size: 16px 16px;
display: block;
z-index: 2;
}

ul.tree[data-sortable="true"][data-sorting=true] li[data-sort=true] .context button.context_button_src
{
background: url(/_modules/filesystem/img/svg1/close.svg) top left no-repeat;
background-size: 16px 16px;
}

ul.tree[data-sortable="true"][data-sorting=true] .context button.context_button_dest
{
background: url(/_modules/filesystem/img/svg1/sort.svg) top left no-repeat;
background-size: 16px 16px;
}
/*
ul.tree[data-sorting-process=true] .context
{
display: none;
}*/

.fc_sorter_panel
{
position: absolute;
display: flex;
right: 32px;
top: 23px;
z-index: 2;
border: 1px solid #ebebeb;
border-radius: 8px;
gap: 8px;
padding: 8px;
box-sizing: border-box;
background: #fff;
}

.fc_sorter_panel button
{
border: none;
padding: 0;
margin: 0;
background-color: #fff; 
cursor: pointer;   
}

.fc_sorter_panel button img
{
width: 16px;    
height: 16px;
}

ul.tree .bground.new
{
background: #afefc3 !important;       
}

ul.tree .bground.disable ~ .item .item_title, 
.select .option.disable 
{
color: #FA5252;
}

ul.tree .more_data
{
display: none;
}

.founded
{
display: flex;
flex-direction: column;    
gap: 16px;
}

.more
{
text-align: center;    
}

.more a
{
background: #ebebeb;
padding: 8px 16px;
border-radius: 8px;
color: #000;
position: relative;
text-underline-offset: 4px;
}

.more a.wait
{
color: #ebebeb;
}

.more a.wait:before
{
content: "";
width: 16px;
height: 16px;
display: block;
position: absolute;
left: 0;
margin: 0 auto;
right: 0;
background: url(/_modules/filesystem/img/svg1/hourglass.svg) center center no-repeat;
background-size: 16px 16px;
animation-name: rotation;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

button[name='VirtKeyboard']
{
display: none;    
}

/* #################################################################################### */
/* ###################################### 661 - 1024 ################################## */
/* #################################################################################### */

@media (max-width: 1024px)  
{

    body
    {
    flex-direction: column;     
    overscroll-behavior: none;   
    }

    body > .right
    {
    flex-grow: 1;    
    margin-top: 1px;
    }

    body > .left
    {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    bottom: 8px;
    display: flex;
    z-index: 2;
    min-width: auto;
    max-width: none;   
    flex-wrap: wrap; 
    }

    body > .left button
    {
        width: 50%;
        justify-content: center;
    }

    body > .left.mobile
    {
    position: relative;  
    left: 0; 
    right: 0; 
    top: 0;
    bottom: 0;
    gap: 12px;
    flex-wrap: nowrap; 
    overflow-y: auto;
    scrollbar-width: none;
    padding: 0 8px;
    }

    body > .left.mobile button
    {
    width: auto;
    white-space: nowrap;        
    }

    button[name='VirtKeyboard']
    {
    display: block;    
    }    
}

/* #################################################################################### */
/* ###################################### <= 660 ###################################### */
/* #################################################################################### */

@media (max-width: 660px)  
{
    body.non_auth form[name="AuthForm"]
    {
    width: 98%;
    }
    
}