DIV, BODY, TR, TD, INPUT, TEXTAREA, SELECT
{ font-family: "Roboto", sans-serif;
 font-weight: 300;}

B
{ font-weight:500;}

INPUT, TEXTAREA, SELECT
{ border:1px solid #AAA;
 border-radius:2px;}

textarea {  white-space: pre-wrap; }


DIV.Z_DRAG_SNAP
{ border-radius:3px;
 background-color: rgba(0,0,0,0.6);
 z-index:500;}

DIV.Z_DRAG_ICON {z-index:505;}


DIV.ZX_POPUP_MENU_ITEM {font-size:13px;}

DIV.ZX_OPT_ICON SVG {width:32px;height:32px;}

#mx_cont
{ background: #EEE;
 position: fixed;
 width:100%;
 height:100%;
 left:0px;
 top:0px; 
 display:flex;
 flex-direction: column;
 min-height:0;
 overflow:hidden;}



#mx_debug
{ height:200px;
 min-height:200px;
 display:none;
 background:#EEEEEE;
 xbackground:blue;

 border-top:1px solid #CCC;
 overflow:auto;
 position:fixed;} 

#mx_debug_btns
{ background:#555555;
 color:white;}

#mx_debug_btns .A_BTNS_CONT {display:flex;gap:15px;padding:3px;font-size:12px;}

.leaflet-attribution-flag {display:none;opacity:0;}


DIV.I_LOADING
{ text-align:center;
 padding:50px 0 0 0;
 color:#777;}

DIV.SP_TOP_BTNS_TINY    
{ font-size:13px;
 display:flex;
 justify-content:flex-end;
 gap:10px;
 border-bottom:1px solid #CCC;
 padding:0 0 8px 0;
 margin-bottom:10px;
 cursor:pointer;}

DIV.SP_TOP_BTN
{ cursor:pointer;}

DIV.SP_TOP_TIP
{ font-size:13px;
 padding:0px 0 5px 0;
 margin:0 0 10px 0;
 border-bottom:1px solid #CCC;}


DIV.SP_TOP_BTN:hover
{ text-decoration:underline;}
 

.S_BTN, DIV.Z_FORM_BTN           
{ text-align:center;
 width:100%;
 padding:7px 0 7px 0;
 font-size: 16px;
 font-weight:400;
 border-radius: 4px;
 ;background: #ffdd33;
 cursor:pointer;
 box-sizing: border-box;
 display:block;
 color:black;}

DIV.Z_FORM_BTN {margin-top:10px;}

.S_BTN:hover   {background: #ffee66;}
.Z_FORM_BTN:hover {background: #ffee66;}

.S_BTN_MARGIN_TOP {margin-top:10px;}


DIV.S_BTNS_MID_V 
{ width:300px;
 margin:0px auto 0px auto;}

DIV.S_BTNS_MID_V .S_BTN
{ margin:10px 0 10px 0;}






DIV.A_GREY_HL    {color: #222;}
DIV.A_GREY_HL:hover {color: #000;}

DIV.A_GREY_HL    IMG {opacity:0.5;}
DIV.A_GREY_HL:hover IMG {opacity:0.8;}





#mx_tpanel
{ z-index:10;
 position:absolute;
 left:0px;
 top:-1px;
 width:100%;
 display:flex;
 justify-content:space-between;
 align-items:center;
 xbackground:white;
 $xshadow1$}



DIV.DIR_TITLE
{ xbackground: white;
 xborder-radius:0 0 5px 0;
 xpadding:5px 10px 5px 10px;
 font-weight:400;
 display:flex;
 gap:10px;
 align-items:center;}

DIV.DIR_TITLE IMG, DIV.DIR_TITLE SVG
{ width:20px;
 height:20px;}



DIV.DIR_PAN1
{ display:flex;
 gap:10px;
 padding:0px 5px 0px 5px;
 xborder-bottom:1px solid #CCC;
 background:white;
 border-radius:0 0 5px 5px;
 box-shadow: 0 0 5px rgba(0,0,0,0.2);}






.AL_CONT
{ z-index:10;
 position:fixed;
 left:10px;
 width:250px;
 max-width:250px;
 min-width:250px;
 xheight:600px;
 xbackground:red;
 scrollbar-gutter: stable;
 padding-right:3px;
}

.AL_PAN
{ background:white;
 border-radius: 5px;
 margin-bottom:10px;
 box-shadow: 0 0 5px rgba(0,0,0,0.2);}

.AL_PAN_IN
{}




DIV.AN_CONT
{ z-index:10;
 position:fixed;
 xbackground:red; }

DIV.AN_ONE
{ background:white;
 border-radius: 5px;
 margin-bottom:10px;
 padding:3px;
 font-size:13px;
 opacity:0.97;
 box-shadow: 0 0 5px rgba(0,0,0,0.2);}




DIV.AM_CARD_CONT
{ xcursor:pointer;
 xbackground:white;border-radius:10px;
 xmargin:0px 0px 20px 0px;
 xpadding:10px;
 xborder:1px solid #CCC;
 overflow:hidden;}

DIV.AM_CARD_MENU_LEFT
{ padding:10px 5px 2px 8px;
 xbackground:#EEE;
 xborder-right:1px solid #EEE;}


DIV.AM_CARD_BODY
{ padding:10px;
 flex-grow:1;}

DIV.AM_CARD_CONT DIV.AM_CARD_MENU_LEFT IMG
{ width:22px;
 height:22px;
 opacity:0;}

DIV.AM_CARD_CONT:hover DIV.AM_CARD_MENU_LEFT IMG
{ opacity:0.3}

DIV.AM_CARD_CONT DIV.AM_CARD_MENU_LEFT DIV.AM_CHECKBOX_1 IMG
{ opacity:1;}

DIV.AM_CARD_CONT DIV.AM_CARD_MENU_LEFT IMG:hover
{ opacity:0.7;}


DIV.AM_CARD:hover
{ xbackground:#EEE;}

DIV.AM_FILES
{ display:flex;
 flex-wrap:wrap;
 gap:10px;
 margin:20px 0 10px 0; }

DIV.AM_FILES DIV.Z_FILE IMG {height:50px;}
DIV.AM_FILES DIV.Z_FILE {margin:0px;height:auto;}


DIV.AM_ITEM_TINY {font-size:12px;}

DIV.AM_ITEM_TINY IMG
{ width:14px;
 height:14px;}

DIV.AM_MORE
{ display:flex;
 gap:6px 20px;
 flex-wrap:wrap;}



DIV.AM_CHECKBOX DIV.Z_TABLE_CHECK
{ width: 22px;
 height: 22px;}

DIV.AM_CHECKBOX_TINY DIV.Z_TABLE_CHECK
{ width: 16px;
 height: 16px;}




DIV.AM_SELS_COLS
{ display:flex;
 gap:10px;
 margin:10px 0 10px 0;}

DIV.AM_SELS_COL
{ max-height:300px;
 overflow-y:scroll;
 padding:0px 5px 0px 5px;}

DIV.AM_SEL
{ display:flex;
 gap:3px;
 font-size:13px;

 padding:2px 0 2px 0;
 cursor:pointer;
 align-items:center;}

DIV.AM_ICON_TINY {font-size:0px;}
DIV.AM_ICON_TINY IMG
{ width:16px; 
 height:16px;
 opacity:0.7;}





DIV.A_TFS_CONT
{ border:1px solid #AAA;
 padding:0; 
 margin-top:10px;}

DIV.A_TFS_TITLE
{ text-align:center;
 xbackground:#EEE;
 border-bottom:1px solid #AAA;
 margin:0 5px 0 5px;
 padding:2px;
 display:flex;
 justify-content:center;}

DIV.A_TFS_TITLE DIV
{ padding:1px 10px 1px 10px;
 border-radius:2px;
 }

DIV.A_TFS_FIELDS
{ display:flex;
 flex-wrap:wrap;
 gap:5px 15px;
 margin:10px 10px 10px 10px;
 xjustify-content:center;
 justify-content:space-between;}

DIV.A_TF_CONT
{ display:flex;
 gap:5px;}

DIV.A_TF_FIELD INPUT[zx_type="number"]
{ width:75px;}




DIV.A_MAP_INPUT
{}



DIV.A_TAGS
{ display:flex;
 gap: 4px 12px;
 flex-wrap:wrap;
 font-size:13px;}

DIV.A_TAGS_LIST DIV.ZZL_FIND_CONT
{ margin-bottom:5px;}

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

DIV.A_TAG
{ padding:2px 4px 2px 4px;
 border-radius:2px;
 display:flex; 
 align-items:center;
 gap:5px;}

DIV.A_TAG_MENU_ICON IMG
{ width: 10px;
 height: 10px;}

DIV.A_TAG_MENU_ICON
{ border-radius:2px;
 padding:1px 3px 1px 3px;}

DIV.A_TAG_SEP {width:5px;}

DIV.A_TAG_VAL_CONT
{ margin:0 7px 0 7px;}

DIV.A_TAG_MENU_ICON:hover
{ background: rgba(200,200,200,0.5);}



DIV.AF_HINT
{ font-size:13px;
 border:1px solid #CCC;
 border-radius:5px;
 padding:10px;
 margin-bottom:10px;}

DIV.AF_HINT P {margin:10px 0 0 0;}





DIV.AMF_FLD {flex-grow:1;}

DIV.AMF_TITLE {padding:5px 5px 5px 0px;width:130px;min-width:130px;}

DIV.AMF_IMAGE {max-width:120px;width:120px;min-width:120px;margin-right:15px;}


DIV.AMF_IMAGE_CHANGE     {font-size:13px;text-align:center;margin-top:4px;}
DIV.AMF_IMAGE_UPLOAD     {font-size:13px;text-align:center;margin-top:10px;}
DIV.AMF_IMAGE_UPLOAD IMG   {width:60%;}
DIV.AMF_IMAGE .ZX_FILES IMG {width:100%;height:auto;padding:0;}

DIV.AMF_FILES DIV.Z_FLD_LAY_CONT
{ display:flex;
 gap:10px;
 flex-wrap:wrap;
 align-items:center;
 margin:10px 0 10px 0;}

DIV.AMF_FILES DIV.ZX_UPLOAD 
{ font-size:12px;
 text-align:center;
 max-width:80px;
 }
DIV.AMF_FILES DIV.ZX_UPLOAD IMG
{ width:18px;
 height:18px;
 opacity:0.3;}
DIV.AMF_FILES DIV.ZX_UPLOAD:hover IMG {opacity:0.7;}


DIV.AMF_DESC {flex-grow:1;}

DIV.AMF_FLD
{ padding:5px 0px 5px 5px;}

DIV.AMF_FLD DIV.Z_FLD_LAY_CONT INPUT
{ width:100%;}


DIV.AMF_CANCEL
{ width:200px;
 background:#DDD;}

DIV.AMF_CANCEL:hover
{ background:#EEE;}

DIV.Z_FLD_LAY_CONT {border-top:0.1px solid white;} 






DIV.A_PIC_ICONS
{ display:flex;
 flex-wrap:wrap;
 gap:3px;}

DIV.A_PIC_ICON .Z_IMAGE
{ height:72px; 
 border:3px solid white;}

DIV.A_PIC_ICON SVG
{ width:48px;
 height:48px;
 border:3px solid white;
 border-radius:5px;}

DIV.A_PIC_ICON_SEL .Z_IMAGE {border:3px solid black;}
DIV.A_PIC_ICON_SEL SVG    {border:3px solid black;}

DIV.A_PIC_ICON_SYS 
{ height:72px;
 width:110px;
 text-align:center;
 font-size:12px;
 padding-top:4px;
 }

DIV.A_PIC_ICON_SYS IMG
{ height:36px;}

DIV.A_PIC_PREVIEW 
{ width:250px;
 height:250px;
 border:1px solid black;
 padding:10px;}

DIV.A_PIC_PREVIEW SVG
{ xpadding:10px;
 width:100%;
 height:100%;}

DIV.A_PIC_INPUT_FLD
{ min-height:22px;
 height:22px;
 text-align:center;
 border:1px solid #AAA;
 border-radius:2px;
 overflow:hidden;}

DIV.A_PIC_INPUT_FLD SVG
{ height:20px;
 width:20px;}

DIV.A_PIC_INPUT_BIG DIV.A_PIC_INPUT_FLD, DIV.A_PIC_INPUT_BIG DIV.A_PIC_INPUT_FLD SVG
{ width:100%;
 height:100%;
 min-height:auto;
 border:0px;}