/* STANDARDISED STYLING (e) --------------------------------------------------*/
button {
	height:1.75em; margin:0 0.5em; border-width:0.1em; border-style:solid; border-radius: 0.5em;
	font-size:1em; padding: 0.1em 0.5em;
	background-color:var(--e_btn_bg); color:var(--e_btn_fg); border-color:var(--e_btn_bd); }
button.red { color:var(--e_red); font-weight:bold }
button.tick::before { content:'\2714'; margin-right:0.5em; color:var(--e_green); font-weight:bold }
button.cross::before { content:'\2718'; margin-right:0.5em; color:var(--e_red); font-weight:bold }
button.aroRight::before { content:'\1f87a'; margin-right:0.5em; color:var(--e_blue); font-weight:bold }
button.aroUp::before { content:'\1f879'; margin-right:0.5em; color:var(--e_blue); font-weight:bold }
button.aroDown::before { content:'\1f87b'; margin-right:0.5em; color:var(--e_blue); font-weight:bold }
button:hover { background-color:var(--e_btn_bgh); color:var(--e_btn_fgh); border-color:var(--e_btn_bdh); }
button:disabled { background-color:var(--e_btn_bgd); color:var(--e_btn_fgd); border-color:var(--e_btn_bdd); }

.btnRow { display:block; text-align:center; padding:1em 0 0 0; }
.btnRow.right { text-align:right; }
.btnRow.left { text-align:left; }
.btnRow>button:first-child { margin-left:0; }
.btnRow>button:last-child { margin-right:0; }

button.icon, span.icon {
	height:1.5em; width:1.5em; max-width:1.5em; min-width:1.5em; margin:0.2em; padding: 0.1em;
	border-width:0.1em; border-style:solid; border-radius: 0.5em; font-size:1em; text-align:center; }












/* NAMED PAGE ELEMENTS (e) ---------------------------------------------------*/

/* User / login panel */
#eUser {
	margin:0.5em; width:12em; min-width:12em; border:0 solid #FFFFFF; padding:0.5em;
	font-family:"Arial", sans-serif; color:#808080; text-align:center }
#eUser>label {
	display:block; width:100%; height:1.5em; border:0 solid #000000; 
	text-align:right; }
#eUserU, #eUserP { width:50%; }

/* Message and modal boxes */
#eMsg {
	z-index:100; border: 0.25em solid #ffffff; border-radius:1.25em; padding:1.5em 2.5em; box-shadow:0 0 10em 1em black; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); }
#eMsg.none { display:none; }
#eMsg.good { display:block; background-color:var(--e_msgGood_bg); color:var(--e_msgGood_fg); border-color:var(--e_msgGood_bd); }
#eMsg.info { display:block; background-color:var(--e_msgInfo_bg); color:var(--e_msgInfo_fg); border-color:var(--e_msgInfo_bd); }
#eMsg.bad { display:block; background-color:var(--e_msgBad_bg); color:var(--e_msgBad_fg); border-color:var(--e_msgBad_bd); }

/* The async call 'busy' box */
#eAsyncBusy {
	z-index:101; border: 0.25em solid var(--e_msgBad_bd); border-radius:1.25em; padding:1.5em 2.5em; box-shadow:0 0 10em 1em black; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); display:none; background-color:var(--e_msgBad_bg); color:var(--e_msgBad_fg); }
#eAsyncBusy.show  { display:block; }


/* STANDARDISED ELEMENTS (e) -------------------------------------------------*/

/* HIGHLIGHTED PARAGRAPHS */
.eHilight { font-weight:bold; padding:1em 2em; border:0.1em solid #000000; border-radius:0.5em; }
.eHilight.small { padding:0.5em 1em; display:inline-block; }
.eHilight.good { border-color:var(--e_msgGood_bd); background-color:var(--e_msgGood_bg); color:var(--e_msgGood_fg); }
.eHilight.good::before{ content:'\2714'; margin-right:1em; color:var(--e_msgGood_ic); font-weight:bold }
.eHilight.info { border-color:var(--e_msgInfo_bd); background-color:var(--e_msgInfo_bg); color:var(--e_msgInfo_fg); }
.eHilight.info::before{ content:'!!'; margin-right:1em; color:var(--e_msgInfo_ic); font-weight:bold }
.eHilight.bad { border-color:var(--e_msgBad_bd); background-color:var(--e_msgBad_bg); color:var(--e_msgBad_fg); }
.eHilight.bad::before{ content:'!!'; margin-right:1em; color:var(--e_msgBad_ic); font-weight:bold }

/* CONTEXT MENUS */
.eCtx { display:inline-block; position:relative; color:var(--e_ctxIcon_fg);
	text-align:left; font-size:1.25rem; font-weight:bold; cursor:pointer; }
.eCtx>img { pointer-events: none; }
.eCtx>ul,
.eCtx>*:last-child { display:none; position:absolute; top:0.5em; left:0.5em; z-index:2; min-width:12em; padding:0.2em !important;
	font-size:0.8em; box-shadow:0 1em 2em 0 rgba(0,0,0,0.4); background-color:var(--e_ctx_bg); color:var(--e_ctx_fg); }
[data-eVis="1"]>*:last-child { display: block; }
.eCtx>ul>li { display:block; padding:0.1em; font-weight:normal; cursor:pointer; }
.eCtx>ul>li.close { color:var(--e_ctxIcon_fg); font-size:1.25em; font-weight:bold; }
.eCtx>ul>li:hover { background-color:var(--e_ctx_bgh); color:var(--e_ctx_fgh); }
.eCtx img { width:2em; height:2em; vertical-align:middle; margin-right:0.8em; }
.eCtx img.small { width:1em; height:1em; }




/* CAPTIONED CONTROLS */
.eCpCtl { position:relative; display:inline-block; padding:0.1em 0.4em; font-weight:normal; 
	vertical-align:top; line-height:1.5em; text-align:left; background-color:var(--e_capCtl_bg);  }
/*.eCpctl>*:first-child { position:relative; margin:0; border-width:0; padding:0; }*/
.eCpCtl>label>span { font-size:0.75em; color:var(--e_capCtl_fg); }
.eCpCtl>label>input, .eCpCtl>label>select, .eCpCtl>label>textarea,
.eCpCtl>span>input, .eCpCtl>span>select { width:100%; font-size:1em;
	box-sizing: border-box; border-width:0.1em; border-style:solid; border-color:var(--e_capCtl_ibd); padding:0 0.25em; 
	background-color:var(--e_capCtl_ibg); color:var(--e_capCtl_ifg);
	font-weight:normal; height:1.5em; line-height:1.5em;  }
.eCpCtl>label>textarea { resize:none; line-height:1.25em; height:5em; font-family:Arial; }
.eCpCtl>label>input:hover, .eCpCtl>label>select:hover { outline:none; border-color:#ff8000; }
.eCpCtl>label>input:focus, .eCpCtl>label>select:focus,
.eCpCtl>label>input:active, .eCpCtl>label>select:active { outline:none; border-color:#ffffff; }
.eCpCtl>label>*:disabled { background-color:transparent; }
/* Combo Control */
.eCpCtl>span>select:valid+input { display:none; }
.eCpCtl>span>select:invalid+input { display:inline-block; position:absolute; left:0; width:90%; }
/* Standard Widths */
.eCpCtl.wide { width:48em; max-width:48em; min-width:24em; }
.eCpCtl.med { width:24em; max-width:24em; min-width:12em; }
.eCpCtl.naro { width:12em; max-width:12em; min-width:6em; }

.eCpCtl.horz>label>br { display:none; }
.eCpCtl.horz>label>span { font-size:1em; }
.eCpCtl.horz>label>input, .eCpCtl.horz>label>select, .eCpCtl.horz>label>textarea { width:67%; }


/* LIST ELEMENTS */
/* Filter, heading, item (row) and nav containers */
.elfccontainer { position:relative; border-width:0 0 0.1em 0; border-style:solid; border-color:var(--e_lstFlt_bd);
	padding:0.2em 0 0.4em 0; background-color:var(--e_lstFlt_bg); color:var(--e_lstFlt_fg); }
.elhcontainer { position:relative; border-width:0 0 0.06em 0; border-style:solid; border-color:var(--e_lstHd_bd);
	padding:0.4em 0 0 0; background-color:var(--e_lstHd_bg); color:var(--e_lstHd_fg); 
	display:flex; align-items:flex-end; }
.elicontainer { position:relative; border-width:0.1em 0 0.1em 0; border-style:solid;
	padding:0.133em 0 0.133em 0; color:var(--e_lstItm_fg); }
.elicontainer:nth-child(even) { background-color:var(--e_lstItm_bge);  border-color:var(--e_lstItm_bge); }
.elicontainer:nth-child(odd) { background-color:var(--e_lstItm_bgo);  border-color:var(--e_lstItm_bgo); }
.elicontainer:hover { background-color:var(--e_lstItm_bgh); border-color:var(--e_lstItm_bdh); }
.elncontainer { position:relative; margin:0.5em auto; text-align:center; background-color:var(--e_lstNv_bg); font-size:0.667em; }
.elacontainer { position:relative; margin:0.5em auto; padding:0.5em; background-color:var(--e-action-bg); }

/* List filter elements - Caption, controls, buttons */
.elfccapt { display:inline-block; font-weight:bold; vertical-align:middle; margin:0 10px 0 10px; }
.elfcctrl { display:inline-block; vertical-align:middle; font-size:0.75em; }
.elfcbtns { display:inline-block; vertical-align:middle; font-size:0.75em; }
.elfcbtns button { margin:0.1em 0.5em; }

/* List header row elements - column title, sort indicator */
.elhc { padding:0 0.33em; }
.elhc>span { font-size:1.25em; }
.elhc>span>.sort { display:block; width:100%; text-align:center; height:0.5em; line-height:0.5em; font-size:0.5em; }
.elhc.sortable { cursor:pointer; }
.elhc.sortable>span>.sort { background-color:var(--e_lstHd_obg); }
.elhc.sortable.active>span>.sort { background-color:var(--e_lstHd_obga); }

/* List item row elments - column container */
.elicontainer .row { display:flex; align-items:center; }
.elicontainer>.active { margin:0 0 20px 0; position:relative;
	box-shadow:0px 8px 16px 8px rgba(0,0,0,0.4); background-color:var(--e_lstItm_abg); }
.elicontainer>.active>.row { background-color:var(--e_lstItm_rabg); padding-top:0.25em; }
.elic { border-left:0.1em solid var(--e_lstItm_bd); padding:0 0.25em; }
.elic:first-child { border:0; }
.elic>span { display:inline-block; width:100%; white-space:nowrap; overflow:hidden; font-size:0.75em; }
.elicontainer .pnlContent { padding:1em; text-align:left; background-image:linear-gradient(180deg, #e0e0ff, transparent 1em );
	font-size:0.75em; font-weight:normal; }
.lcMenu { align-self:flex-start; width:1.5em; min-width:1.5em; max-width:1.5em; text-align:center; }

/* List page navigation elements - button, input */
.elncontainer>button { margin:0.2em; border-width:0.1em; border-style:solid; border-radius:0.3em; padding:0.3em 0.6em;
	font-size:1.25em; text-align:center; cursor:pointer; border-color:transparent; }
.elncontainer>button:hover { border-color:var(--e_btn_bdh); }
.elncontainer>button:disabled { font-size:1.5em; padding:0.3em 1em; }
.elncontainer>input { width:2em; margin:0.3em; border:0.1em solid var(--e_btn_bd); border-radius:0.3em; padding:0.3em 1em;
	background-color:var(--e_btn_bg); color:var(--e_btn_fg); font-size:1.5em; text-align:center; cursor:pointer; }
.elncontainer>input:hover { border-color:var(--e_btn_bdh); background-color:var(--e_btn_bgh); }

/* INFORMATiON (EDITING) PANEL COMPONENTS */
.pnlContent h4 {
	font-size:1.2em; margin-top:0.8em; margin-bottom:0.2em; padding-top: 0.25em; font-weight: bold;
	border-width:0.1em 0 0 0; border-style:solid; border-image:linear-gradient( to right, #000080 50%, transparent 75% ) 1; }



/* FILE LIST ELEMENTS */
.eflicontainer { display:flex; align-items:center; width:100%; justify-content:space-between; }
.eflicontainer:nth-child(even) { background-color:var(--e_lstItm_bge);  border-color:var(--e_lstItm_bge); }
.eflicontainer:nth-child(odd) { background-color:var(--e_lstItm_bgo);  border-color:var(--e_lstItm_bgo); }
.eflicontainer:hover { background-color:var(--e_lstItm_bgh); border-color:var(--e_lstItm_bdh); }
.eflic { white-space:nowrap; overflow:hidden; padding-right:0.2em; }
.eflic.title { flex:1 1 2em; }
.eflic.name { flex:0 0 12em; font-size:0.8em; }
.eflic.date { flex:0 0 8em; font-size:0.8em; }
.eflic.size { flex:0 0 4em; font-size:0.8em; }


/* Content toggle - (display one of two contents) */
.eCheckSelect { position:relative; }
.eCheckSelect>label>input,
.eCheckSelect>label+.eCheckSelectContent { display:none; }
.eCheckSelect>label:has(> input:checked)+.eCheckSelectContent { display: block; }
.eCheckSelect>label+.eCheckSelectContent+.eCheckSelectContent { display: block; }
.eCheckSelect>label:has(> input:checked)+.eCheckSelectContent+.eCheckSelectContent { display:none; }

/*
div.eCheckSelect>input+label+div.eCheckSelectContent { display:none; }
div.eCheckSelect>input:checked+label+div.eCheckSelectContent { display: block; }
div.eCheckSelect>input+label+div+div.eCheckSelectContent { display: block; }
div.eCheckSelect>input:checked+label+div+div.eCheckSelectContent { display:none; }*/

/*----------------------------------------------------------------------------*/


/* colour picker */
.eColr { position:absolute !important; top:1em; left:1em; width:25em; border:0.1em solid black !important; box-sizing:border-box; background-color:#f0f0f0; margin:0; padding:0.5em !important; }
.eColr input[type="range"] { appearance:none; border:0.1em solid black; box-sizing:border-box; width:100%; height:1.5em; margin:0; padding:0; vertical-align:bottom; font-size:1em; }
.eColr input::-webkit-slider-thumb { appearance:none; width:1.5em; height:1.5em; background-color:#000000; border:0.2em solid white; border-radius:50%; cursor:pointer; }
.eColr input:first-child { background: linear-gradient(to right, #ff0000 0%, #ffff00 16.65%, #00ff00 33.3%, #00ffff 50%, #0000ff 66.6%, #ff00ff 83.35%, #ff0000 100%); }
.eColr>span { position:relative; display:block; width:100%; height:24em; margin:0.5em 0 0.5em 0; padding:0; border:0.1em solid black; overflow:hidden; }
.eColr>span>span { position:absolute; width:1.5em; height:1.5em; border:0.2em solid white; border-radius:50%;
background-color:black; top:0; left:0; transform: translate(-50%, -50%); cursor:pointer; }
.eColr>input[type="text"] { width:43%; }
.eColr>button { width:25%; margin:0.5em 0 0 2%; }