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


DIV.Z_CROP_CONT 
{ -ms-overflow-style: none; 
 scrollbar-width: none; }



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



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: 200;
 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: 204;}

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


DIV.Z_DRAG_SELECTED
{ position:absolute;
 z-index: 203;
 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;
 align-items: center;
 max-width: 150px;
 height: 100%;}
DIV.ZZP_FILE_OTHER_TEXT
{ text-align: center; 
 font-size: 13px;}

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 #FFF;}

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

#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;
 xborder-top: 1px solid #555;
 padding: 5px 0 0 0;
 margin:15px 0 0px 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;}

#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:5px 15px 5px 15px;}

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:15px;}


#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);
 }