/*ZZ Basic Els Style*/


DIV,INPUT,TEXTAREA {box-sizing:border-box;}





DIV.Z_CROP_CONT
{
  overflow-y:scroll;
  overflow-x:scroll;
  position:relative;
  xborder:1px solid black;
  margin: 0 auto 0 auto;
}

DIV.Z_CROP_CONT::-webkit-scrollbar 
{
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
DIV.Z_CROP_CONT 
{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}



DIV.Z_CROP_IMG img
{
  width:100%;height:100%;

}

DIV.Z_CROP_IMG
{
  position:absolute;
  cursor: grab;
}


DIV.Z_BLOCK_CONT
{
  xborder:1px solid red;
  position:relative;  /*Пока только для table=loading*/
}






TABLE.Z_MAIN
{
  border-collapse: collapse;
  max-width:100%;
  border:0px;
}

TABLE.Z_MAIN TH
{
  padding:3px;
  border:0.5px solid #999999;
  background:#EEEEEE;
  overflow:hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
  xmin-width:40px;  /*Doesnt work*/
}



TABLE.Z_MAIN TH IMG 
{
  width:10px;
  height:10px;
  padding-right:1px;
}

TABLE.Z_MAIN TR:hover
{
  cursor:pointer;
  background:#EEEEEE;
}


TABLE.Z_MAIN TD
{
  border:0.5px solid #999999;
  padding:3px;
  overflow:hidden;
  max-width:400px;
}

TABLE.Z_MAIN TD > IMG
{
  xwidth:100%; 
  max-height:24px;
}

TABLE.Z_MAIN IMG.Z_ICON
{
  height: 14px;
  width:auto;
  padding-right:4px;
  vertical-align:middle;
}

DIV.Z_TABLE_TOP_PANEL
{
  xbackground:#EEEEEE;
  display:flex;
  xflex-wrap:wrap;
  padding:2px;
  xxborder-bottom:1px solid #CCCCCC;
  margin-bottom:3px;
  justify-content:flex-end;
  align-items:center;
}

DIV.Z_TABLE_TOP_PANEL_EL
{
  margin-left:15px;
}
DIV.Z_TABLE_TOP_PANEL_EL INPUT
{
  padding:0px;
}
DIV.Z_TABLE_TOP_PANEL_EL SELECT
{
  padding-bottom:1px;
}
DIV.Z_TABLE_TOP_PANEL_EL IMG
{
  width: 12px;
  height:12px;
}

DIV.Z_TABLE_CHECKED_PANEL
{
  padding:5px;
  xxbackground:white;
  background:#FFF5BB;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  position:sticky; 
  top:0;
  margin:10px 3px 0 3px;
  border-radius:5px;
}

DIV.Z_TABLE_LIST {margin:3px 0 3px 0;padding:4px 0 4px 2px;}

DIV.Z_TABLE_LOADING
{
  background: #FFFFFF;
  border:1px solid #CCC;
  border-radius: 5px;
  padding:5px;
  width:160px;
  position: absolute;
  top: calc(100% - 25px);
  left:calc( 50% - 80px);
  text-align:center;
}

TABLE.Z_MAIN tr.Z_TABLE_FOOTER:nth-child(even), TABLE.Z_MAIN tr.Z_TABLE_FOOTER:nth-child(odd)
{
  background:white;  
  cursor:default;
  border-top:1px solid #aaa;
  
}

TABLE.Z_MAIN tr.Z_TABLE_FOOTER td
{
  padding-top:10px;
}

DIV.Z_TABLE_NAV_ASK_CONT
{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  justify-content: center;
}



DIV.Z_COL_BLOCK
{
  xflex-grow:1;
  margin:5px;
}
DIV.Z_COL_TITLE
{
  font-weight:bold;
  text-align:center;
  border-bottom:1px solid #AAAAAA;
  margin-bottom:3px;
}

DIV.Z_LIST_ITEM
{
  padding:4px 2px 4px 2px;
}
DIV.Z_LIST_ITEM:hover
{
  border-radius:3px;
  background:#EEEEEE;
}

DIV.Z_VIDEO
{
  position:relative;
  cursor:pointer;
}

IMG.Z_VIDEO_PLAY
{
  width: 20%;
  height: 20%;
  position:absolute;
  left:40%;
  top:40%;
  opacity:0.8;
}

DIV.Z_VIDEO:hover IMG.Z_VIDEO_PLAY
{
  opacity:1;
}

DIV.Z_FILE
{
  margin:10px 10px 0 0;
  height:90px;
  xbackground:red;
  cursor:pointer;
}

DIV.Z_FILE DIV.Z_VIDEO          {height:90px;}
DIV.Z_FILE IMG.Z_VIDEO_PREVIEW  {height:90px;}
DIV.Z_FILE IMG.Z_IMAGE          {height:90px;width:auto;}









DIV.Z_FORM_TITLE
{
  background:#EEEEEE;
  padding:3px;
  text-align:center;
}

DIV.Z_FORM_BTN
{
  background:#3333DD;
  color:white;
  text-align:center;
  border-radius:5px;
  padding:7px;
  font-size:14px;
  cursor:pointer;
}

DIV.Z_FLD_CONT
{
  display:flex;
  margin:9px 0 9px 0;
  xxjustify-content:space-around;
}

DIV.Z_FLD_TITLE  {width:40%;flex-shrink:0;}
DIV.Z_FLD_FLD    {flex-grow:1;}

DIV.Z_FLD_DESC   {font-size:12px; margin-top:2px;}

DIV.Z_FLD_CONT_LINE {display:block;}
DIV.Z_FLD_CONT_LINE DIV.Z_FLD_TITLE {width:100%;margin:6px 0 3px 0;}
DIV.Z_FLD_CONT_LINE DIV.Z_FLD_FLD   {width:100%;margin:0 0 6px 0;}

DIV.Z_FLD_FLD INPUT,SELECT
{
  width:100%;
  
}

DIV.Z_FLD_FLD SELECT.ZX_COMBO_DATE {width:auto;}
DIV.Z_FLD_FLD SELECT.ZX_COMBO_TIME {width:auto;}



DIV.Z_FLD_FLD TEXTAREA
{
  width:100%;
  height:70px;
}

DIV.Z_FLD_FLD_FROMTO INPUT
{
  width:60px;
}

DIV.Z_FLD_FLD INPUT[type=checkbox] {width:auto;}

DIV.Z_FLD_CHECKS_SEP
{
  font-weight:bold;
  margin-top:10px;
}

DIV.Z_FORM_TOP_BTNS
{
  display:flex;
  justify-content:flex-end;
  border-bottom:1px solid #AAAAAA;
  margin-bottom:3px;
}

DIV.Z_FORM_TOP_BTN
{
  padding:2px 4px 2px 4px;  
}


DIV.Z_HELP_CONT
{
  display:flex;
}

DIV.Z_HELP_TREE_CONT
{
  max-width:250px;
  min-width:200px;
  margin-right:10px;
  border-right:1px solid #CCCCCC;
}

DIV.Z_HELP_TREE_CONT .ZX_TREE_TITLE 
{
  font-size:12px;
  padding:2px 2px 2px 2px;
  border-radius: 5px 0 0 5px;
}

DIV.Z_HELP_TREE_CONT .ZX_TREE_EXP
{
  margin:0;
  font-size:0px;
  padding:2px 0 0 0;
}

DIV.Z_HELP_TREE_CONT DIV.ZX_TREE_CONT
{
  margin:2px 0 8px 0;
}

DIV.Z_HELP_DOC_CONT
{
  flex-grow:1;
}

DIV.Z_HELP_DOC_CONT h1
{
  margin-top:0px;padding-top:0px;  
}

DIV.Z_HELP_DOC_CONT h2
{
  margin-top:50px;
}



DIV.Z_RTF_AREA
{
  width:100%;
  height:100%;
  border:none;
  outline: none;
  overflow-y:scroll;
  padding:5px;
  flex-grow:1;
  min-height: 0;
}

DIV.Z_RTF_PANEL
{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  xmargin-bottom:5px;
  background:#F3F3F3;
  border-bottom:1px solid #CCCCCC;
  border-top:1px solid #CCCCCC;
}

DIV.Z_RTF_BTN_SEP
{
  width:10px;
}

DIV.Z_RTF_BTN
{
  padding:4px 4px 0px 4px;
  xborder-radius:4px;
  cursor:pointer;
}

DIV.Z_RTF_BTN:hover, DIV.Z_RTF_MENU_ITEM:hover
{
  background:#DDDDDD;
}

DIV.Z_RTF_BTN IMG
{
  width:16px;
  height:16px;
  xopacity:0.8;
}


DIV.Z_RTF_MENU_ITEM
{
  padding:1px 5px 1px 5px;
  margin:1px 3px 1px 3px;
  border-radius:4px;
  cursor:pointer;  
  font-size:14px;
}



.Z_RTF_LINK
{
  color:blue;
  cursor:pointer;
}


DIV.Z_DRAG_BACK
{
  position:fixed;
  top:0;left:0;width:100%;height:100%;
  opacity:0;
  background:black;
  cursor:move;
  display: none;
  z-index: 500;
  xxpointer-events: none;
}

DIV.Z_DRAG_SNAP
{
  position: absolute;
  opacity:0.5;
  background:black;
  pointer-events: none;
  display: none;
  z-index: 205;
}

DIV.Z_DRAG_ICON
{
  position: absolute;
  xopacity:0.5;
  background:rgba(0,0,0,0.5);
  color:white;
  pointer-events: none;
  display: none;
  z-index: 205;
  padding:4px;
  border-radius:5px;
}

DIV.Z_DRAG_SELECT
{
  position:absolute;
  border:1px solid #555555;
  background:rgba(0,0,0,0.1);
  display:none;
  z-index: 1300;
}

DIV.Z_DRAG_SEL_HL
{
  position:absolute;
  z-index: 1202;
  background:rgba(0,0,0,0.3);
  border:1px solid #222222;
}

DIV.Z_DRAG_SIZE_BOX
{
  position:fixed;
  background:rgba(0,0,0,0.7);
  display:none;
  z-index: 400;
  
}


DIV.Z_DRAG_SELECTED
{
  position:absolute;
  z-index: 300;
  xxbackground:rgba(255,0,0,0.3);
  display: block;
  pointer-events: none;
}










DIV.ZZL_FIND_CONT INPUT
{
  width:100%;
  margin-bottom:5px;
}

DIV.ZZL_REC
{
  padding:2px 0 2px 0;
}

DIV.ZZL_REC_SEL {font-weight:bold;}

DIV.ZZL_SELS_CONT
{
  margin-bottom:5px;
  padding:0 0 5px 0;
  border-bottom:1px solid #CCC;
}



DIV.ZZP_CONT
{
  display:flex;
  flex-wrap: wrap;
  gap:10px;
  transition: all 0.3s ease;
}

DIV.ZZP_CONT_DRAG_OVER
{
  background: #EEEEEE;
  xoutline: 1px solid #AAA;
}

DIV.ZZP_FILE
{
  height:150px;
  overflow:hidden;

  position: relative;
  display: inline-block;

}

IMG.ZZP_IMG
{
  display: block;
  height:100%; 
  width:auto; 
}

IMG.ZZP_IMG_EMPTY
{
  opacity:0.5;  
}

IMG.ZZP_IMG_EMPTY:hover
{
  opacity: 1;
}

DIV.ZZP_FILE_OTHER
{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  max-width: 150px;
  height: 100%;
}
DIV.ZZP_FILE_OTHER_TEXT
{
  text-align: center;  
  font-size: 13px;
}

DIV.ZZP_FILE_OTHER_ICON img
{
  width:32px;
  height:32px;
}

DIV.ZZP_ICON_OVERLAY
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Центрирование */
  font-size:0px;
  opacity:0.7;
}

DIV.ZZP_ICON_OVERLAY IMG
{
  width: 58px;  /* Заданный размер */
  height: 58px;
}

DIV.ZZP_FILE:hover .ZZP_ICON_OVERLAY
{
  opacity:1;
}

DIV.ZZP_FILE_SEL
{
  outline:3px solid #DDD;
}

DIV.ZZP_FILE_DESC
{
  font-size:11px;
  margin:0 0 3px 0;
  text-align: center;  
  max-height: 25px;
}

#zzp_back
{
  position:fixed;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.99);
  color:#FFF;
  z-index: 300;
}

#zzp_cont
{
  position:absolute;
  display:flex;
  width:100%;
  height:100%;
  top:0;
  left:0;
  overflow:hidden;
}

#zzp_list
{
  width:150px;  
  xbackground: green;
  padding:10px;
  overflow-y:scroll;
  min-height:0;
  height:100%;
  min-height:100%;
  display:flex;
  flex-direction: column;  
  gap:10px;
  flex-shrink: 0;
}

DIV.ZZP_LIST_SUBGR
{
  font-size:12px;
  font-weight: bold;
  xborder-top: 1px solid #555;
  xpadding: 5px 0 5px 0;
  margin:15px 0 5px 0;
  text-align: center;
  word-wrap: break-word;
  max-height: 33px;
  overflow: hidden;
  flex-shrink: 0;
}


#zzp_col2
{
  flex-grow:1;
  xbackground: red;
  display:flex;
  flex-direction: column;
}

#zzp_view
{
  flex-grow: 1;
  min-height:0;
  overflow: hidden;
  position:relative;
}

#zzp_close_btn
{
  position:absolute;
  padding:10px;
  top: 0;
  right: 0;  
  opacity:0.5;
  z-index: 1000;
}
#zzp_close_btn:hover
{
  opacity:1;
}
#zzp_close_btn img
{
  width:32px;
  height:32px;
}

#zzp_desc
{
  padding: 5px 0 5px 0;
  flex-shrink: 0;
  text-align: center;
  font-size:12px;
  color:#AAA;
}

#zzp_btns
{
  padding: 10px 0 10px 0;
  flex-shrink: 0;
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap:2px;
  align-items:center;
}

#zzp_btns_edit
{
  xpadding: 10px 0 10px 0;
  flex-shrink: 0;
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap:2px;
  align-items:center;
}

DIV.ZZP_BTN
{
  xfont-size:30px;
  xcolor:white;
  padding:8px 10px 5px 10px;
}

DIV.ZZP_BTN:hover
{
  background: rgba(255,255,255,0.15);
  xborder-radius:5px;
}

DIV.ZZP_BTN img
{
  width:24px;
  height:24px;
}

DIV.ZZP_BTN_SEP
{
  width:20px;
}


#zzp_image_now
{
  width:100%;
  height:100%;
  object-fit: contain;
}

#zzp_video_now
{
  width:100%;
  height:100%;
  object-fit: contain;
}


#zzp_other_file
{
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   
}

#zzp_other_file_text
{
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  max-width: 350px;
}

#zzp_other_file_icon
{
  font-size: 60px;
}

#zzp_other_preview
{
  max-width: 350px;
}





  .Z_VSCROLL_H 
  {
    overflow-y:hidden;
    
  }
  
  .Z_VSCROLL_H:hover 
  {
    overflow-y: scroll;
    xbackground:Red;
  }
  
  .Z_VSCROLL
  {
    scrollbar-gutter: stable;
  }
  

  .Z_VSCROLL::-webkit-scrollbar 
  {
    width: 8px;
  }

  .Z_VSCROLL::-webkit-scrollbar-track 
  {
    xbackground: #ffffff;
    background: transparent;
  }

  .Z_VSCROLL::-webkit-scrollbar-thumb 
 {
    background-color: rgba(120,120,120,0.3);
    border-radius: 5px;
    xborder: 1px solid rgba(0,0,0,0.5);
   }

#zzp_editmode_panel
{
  position: fixed;
  
  
  xtop:5px;
  xleft:5px;

  bottom: 50px;           /* distance from bottom – change as needed */
  left: 50%;
  transform: translateX(-50%);


  z-index: 300;
  background: white;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

.ZZP_EM_TITLE
{
  display:flex;
  background:black;
  color:white;
  justify-content: space-between;
  padding:5px;
  font-size:14px;
  gap:20px;
}

.ZZP_EM_CLOSE
{
  color:#FFAAAA;
  font-weight: bold;
}

.ZZP_EM_SEL
{
  text-align: center;
  padding:4px;
  font-size: 13px;
  color:#555;
}

.ZZP_EM_CONT
{
  padding:5px;
  display:flex;
  gap:15px;
  align-items:center;
  justify-content: space-between;
}

.ZZP_EM_SEP
{
  background-color:#AAA;
  min-width:1px;
  width:1px;
  flex-shrink: 0;
}

.ZZP_EM_UNDO
{
  text-align: center;
  padding:4px;
  font-size: 13px;
  color:#555;
}



.ZZP_EM_ICON IMG
{
  width:18px;
  height:18px;
  vertical-align: middle;
  padding-right: 5px;
}

.ZZP_EM_ICON
{
  font-size: 12px;
  text-align: center;
  color:#555;
  xline-height: 26px;
  padding:3px;
  border-radius: 3px;
}
.ZZP_EM_ICON:hover
{
  background: #EEE;
}


.ZZP_EM_NOTE
{
  font-size:15px;
  color:#555;
}


/* #74: панель форматирования и вывод текста с разметкой */
DIV.Z_FMT_BAR {display:flex; gap:4px; margin:0 0 4px 0;}
BUTTON.Z_FMT_BTN {min-width:32px; height:28px; padding:0 8px; border:1px solid #CCC; border-radius:4px; background:#FFF; color:#333; font-size:14px; line-height:26px; cursor:pointer;}
BUTTON.Z_FMT_BTN:hover {background:#F2F2F2;}
BUTTON.Z_FMT_B {font-weight:bold;}
BUTTON.Z_FMT_I {font-style:italic;}
BUTTON.Z_FMT_U {text-decoration:underline;}
BUTTON.Z_FMT_A {font-size:13px; color:#1A6FC9;}
.Z_FMT_TEXT A {text-decoration:underline; word-break:break-word;}

DIV.Z_TABLE_LOAD_ERR {cursor:pointer;}