body * {background-repeat: no-repeat;}
body * {background-position: 2px center;}
body * {background-size: 16px;}

h1 {margin-top: 4px; margin-bottom: 4px;}
h2 {margin-top: 4px; margin-bottom: 4px;}
h3 {margin-top: 3px; margin-bottom: 3px;}
h4 {margin-top: 3px; margin-bottom: 3px;}
h5 {margin-top: 2px; margin-bottom: 2px;}
h6 {margin-top: 2px; margin-bottom: 2px;}

/* site loading */
body.siteLoading * {opacity: 0.5;}
body.siteLoading .divBoxModalBG {opacity: 1;}
body.siteLoading .divBoxModalBG * {opacity: 1;}
body.siteLoading .divBoxModalBG .divBox {box-shadow: 6px 6px 12px #333; }
body.siteLoading .divBoxModalBG .divBoxBody {font-size: 26pt; font-family: cursive; color: #777;}

/* ajax waiting */
.bdyReqWait, .bdyReqWait * {cursor: wait !important;}
.crsrWait, .crsrWait > * {cursor: wait !important;}
.elAjaxWaiting  {background-image: url('/images/ajax-loader.gif'); background-repeat: no-repeat; background-position: center; opacity: .5;}
.elAjaxWaiting  > * {opacity: 0.5;}

/* generic */
.centerInit {position: absolute; left: 30%; top: 30%;}
.centered {position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);}
.centerAuto {position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);}
.centerAutoHz {position: absolute; left: 50%; transform: translate(-50%, 0);}
.centerAutoVt {position: absolute; top: 40%; transform: translate(0, -50%);}
.pos {position: absolute; top: 40%; transform: translate(0, -50%);}
.draggable {cursor: move;}
.sizable {cursor: se-resize;}
.dispNone {display: none;}
.dispInline {display: inline;}
.dispInlineBlk {display: inline-block;}
.floatLeft {float: left;}
.floatRight {float: right;}
.clear {clear: both;}
.pointer {cursor: pointer;}
.disabled {opacity: 0.5; cursor: default;}
.urlLink {cursor: pointer; text-decoration: underline;}
.htTrans {transition: height 0.5s, opacity 0.25s;}
.wdTrans {transition: width 0.5s, opacity 0.25s;}
.wsWrap {white-space: normal;}
.wsPre {white-space: pre-line;}
.txtBold {font-weight: bold;}
.txt200 {font-size: 200%;}
.txt150 {font-size: 150%;}
.txt100 {font-size: 100%;}
.txt075 {font-size: 75%;}
.txt050 {font-size: 50%;}
.zeroWidth {margin: 0 !important; padding: 0 !important; border: none !important; overflow: hidden !important;}
.zeroWidth * {margin: 0 !important; padding: 0 !important; border: none !important; overflow: hidden !important;}
.noUsrSel {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.allowUsrSel * {-webkit-user-select: unset !important; -moz-user-select: unset !important; -ms-user-select: unset !important; user-select: unset !important;}
.noScrBar::-webkit-scrollbar {display: none;}
.noScrBar {overflow: auto; -ms-overflow-style: none; scrollbar-width: none;}

/* default background icons */
.checkbox {background-image: url(/images/checkbox_no.png)}
.checkbox.checked {background-image: url(/images/checkbox_yes.png)}
.checkbox.selected {background-image: url(/images/checkbox_yes.png)}
.tag {background-image: url(/images/taggable64.png)}
.tag.tagged {background-image: url(/images/tagged64.png)}
.explore {background-image: url(/images/browse32.png);}
.search {background-image: url(/images/search64.png);}
.browse {background-image: url(/images/folder.png)}
.folder {background-image: url(/images/folder.png)}
.folderQry {background-image: url(/images/folderQry.png)}
.folderCloud {background-image: url(/images/folderCloud.png)}
.folderNew {background-image: url(/images/folderNew.png)}
.folderEdit {background-image: url(/images/folderEdit.png)}
.folderRefresh {background-image: url(/images/folderRefresh.png)}
.folderProps {background-image: url(/images/folderProperties.png)}
.folderPub {background-image: url(/images/folderPub64.png)}
.home {background-image: url(/images/home32.png);}
.contact {background-image: url(/images/contact32.png);}
.user {background-image: url(/images/user.png);}
.grpMmbr {background-image: url(/images/members.png)}
.pwReset {background-image: url(/images/pwReset32.png)}
.members {background-image: url(/images/members32.png)}
.team {background-image: url(/images/team64.png)}
.player {background-image: url(/images/player64.png)}
.trophy {background-image: url(/images/trophy64.png)}
.gear {background-image: url(/images/gear32.png)}
.help {background-image: url(/images/help.png)}
.notes {background-image: url(/images/notes.png)}
.lock {background-image: url(/images/unlocked.png)}
.lock.selected {background-image: url(/images/locked.png)}
.keys {background-image: url(/images/keys.png)}
.refresh {background-image: url(/images/refresh.png)}
.columns {background-image: url(/images/columns64.png)}
.summation {background-image: url(/images/summation64.png)}
.filter {background-image: url(/images/filter.png)}
.filterOff {background-image: url(/images/filterOff.png)}
.mnuTop {background-image: url(/images/mnuTop.png)}
.next {background-image: url(/images/next.png)}
.prev {background-image: url(/images/prev.png)}
.navBak {background-image: url(/images/navBak.png)}
.navFwd {background-image: url(/images/navFwd.png)}
.navUp {background-image: url(/images/navUp.png)}
.leftPane {background-image: url(/images/leftPane.png)}
.viewTabular {background-image: url(/images/table.png)}
.viewChart {background-image: url(/images/chart32.png)}
.lineChart {background-image: url(/images/lineChart32.png)}
.barChart {background-image: url(/images/barChart32.png)}
.stackedBarChart {background-image: url(/images/stackedBarChart32.png)}
.expandH {background-image: url(/images/expandH.png)}
.expandH.selected {background-image: url(/images/contractH.png)}
.max {background-image: url(/images/maximize.png)}
.maxed {background-image: url(/images/restore.png)}
.expandV {background-image: url(/images/expandV.png)}
.expandH {background-image: url(/images/expandH.png)}
.popout {background-image: url(/images/popOut48.png)}
.pin {background-image: url(/images/pin64.png)}
.webLink {background-image: url(/images/hyperlink.png);}
.download {background-image: url(/images/download64.png)}
.export {background-image: url(/images/export64.png)}
.publish {background-image: url(/images/publish64.png)}
.mailMerge {background-image: url(/images/mailMerge32.png)}
.dataProc {background-image: url(/images/data.png)}
.email {background-image: url(/images/e-mail32.png)}
.objEdit {background-image: url(/images/edit.png)}
.objDel {background-image: url(/images/delete.png)}
.objNew {background-image: url(/images/objNew32.png)}
.qryExec {background-image: url(/images/exec.png)}
.clear {background-image: url(/images/clear.png)}
.copy {background-image: url(/images/copy64.png)}
.cut {background-image: url(/images/cut64.png)}
.delete {background-image: url(/images/delete.png)}
.save {background-image: url(/images/disc.png);}
.unlink {background-image: url(/images/unlink64.png)}
.insertTop {background-image: url(/images/insertTop.png)}
.insertBtm {background-image: url(/images/insertBtm.png)}
.insertAt {background-image: url(/images/insertAt.png)}
.editStat {background-image: url(/images/checkGreen32.png)}
.editStat.dirty {background-image: url(/images/edit.png)}
.info {background-image: url(/images/info.png)}
.alert {background-image: url(/images/alert.png)}
.dataHub {background-image: url(/images/dataHub32.png);}
.tools {background-image: url(/images/tools32.png);}
.history {background-image: url(/images/history32.png);}
.calendar {background-image: url(/images/calendar32.png);}
.entryForm {background-image: url(/images/entryForm32.png);}
.referral {background-image: url(/images/referral64.png);}
.closedBiz {background-image: url(/images/money64.png);}
.payment {background-image: url(/images/money64.png);}
.invite {background-image: url(/images/invite64.png);}
.meetup {background-image: url(/images/meetup64.png);}
.webMeet {background-image: url(/images/zoomLogo.png);}
.debug {background-image: url(/images/debug.png);}
.project {background-image: url(/images/porjectCon64.png);}
.vendor {background-image: url(/images/company64.png);}
.contract {background-image: url(/images/contract64.png);}
.worker {background-image: url(/images/worker64.png);}
.hiring {background-image: url(/images/hiring64.png);}
.design {background-image: url(/images/design.png);}
.quality {background-image: url(/images/quality.png);}
.regulatory {background-image: url(/images/regulatory.png);}
.docs {background-image: url(/images/doc.png)}
.reports {background-image: url(/images/report32.png)}
.list {background-image: url(/images/list64.png)}
.sigma {background-image: url(/images/sigma64.png)}
.numbered {background-image: url(/images/number64.png)}

.sql {background-image: url(/images/sql.png)}
.csv {background-image: url(/images/csv.png)}
.pdf {background-image: url(/images/pdf.png)}
.pdfDl  {background-image: url(/images/pdfDl.png)}
.pdfDl.sel {background-image: url(/images/pdfDlSel.png)}
.pdfDl.cur {background-image: url(/images/pdfDlCur.png)}

.bg16 {background-size: 16px; width: 16px; height: 16px;}
.bg24 {background-size: 24px; width: 24px; height: 24px;}
.bg32 {background-size: 32px; width: 32px; height: 32px;}

/* file-type background icons */
[filetyp] {background-image: url(/images/doc.png)}
[filetyp="PDF"] {background-image: url(/images/pdf.png)}
[filetyp="DOC"] {background-image: url(/images/msWord.png)}
[filetyp="DOCX"] {background-image: url(/images/msWord.png)}
[filetyp="XLS"] {background-image: url(/images/msExcel.png)}
[filetyp="XLSX"] {background-image: url(/images/msExcel.png)}
[filetyp="PPT"] {background-image: url(/images/msPowerpoint.png)}
[filetyp="PPTX"] {background-image: url(/images/msPowerpoint.png)}
[filetyp="MPP"] {background-image: url(/images/msProject.png)}
[filetyp="PUB"] {background-image: url(/images/msPublisher.png)}
[filetyp="MDB"] {background-image: url(/images/msAccess.png)}
[filetyp="ACCDB"] {background-image: url(/images/msAccess.png)}
[filetyp="VSD"] {background-image: url(/images/msVisio.png)}
[filetyp="VSDX"] {background-image: url(/images/msVisio.png)}
[filetyp="URL"] {background-image: url(/images/url80.png)}
[filetyp="JSON"] {background-image: url(/images/json.png)}
[filetyp="TXT"] {background-image: url(/images/text.png)}
[filetyp="CSV"] {background-image: url(/images/csv.png)}
[filetyp="ZIP"] {background-image: url(/images/zip.png)}
[filetyp="RAR"] {background-image: url(/images/zip.png)}
[filetyp="TGZ"] {background-image: url(/images/zip.png)}
[filetyp="HEX"] {background-image: url(/images/bin.png)}
[filetyp="BIN"] {background-image: url(/images/bin.png)}
[filetyp="JPG"] {background-image: url(/images/jpg.png)}
[filetyp="PNG"] {background-image: url(/images/png.png)}
[filetyp="TIF"] {background-image: url(/images/png.png)}
[filetyp="GIF"] {background-image: url(/images/png.png)}
[filetyp="AVI"] {background-image: url(/images/vid64.png)}
[filetyp="MPG"] {background-image: url(/images/vid64.png)}
[filetyp="MP3"] {background-image: url(/images/vid64.png)}
[filetyp="MP4"] {background-image: url(/images/vid64.png)}
[filetyp="MOV"] {background-image: url(/images/vid64.png)}
[filetyp="SQL"] {background-image: url(/images/sql.png)}


.checkbox.labeled {padding-left: 24px;}
input[type="text"] {background-position: 2px center;}


/* single-page paneled app */
.divApp {overflow: hidden;}
.divApp > div.header {width: 100%;}
.divApp > .header .divMenu {font-size: 120%;}
.divApp .fitHt {display: inline-block; margin-left: 0px; position: relative; vertical-align: top;}
.divApp .fitHt:first-child {margin-left: 0px;}
.divApp .fitHt.divTabs {display: block; position: unset; vertical-align: unset;}
.divApp .fitWd:first-child {width: 100%;}
.divApp .fitWd {width: 10%;} /* set initially low to avoid wrapping before inner divs ht/wd are computed */
.divApp .fitHt > .divToolbar {white-space: nowrap;}    /* avoid wrapping before inner divs ht/wd are computed */
.divApp .divToolbar + .fitHt {margin-left: 0px;}
.divApp div.presented {-webkit-animation: fadeIn50 0.7s ease; animation: fadeIn50 0.7s ease;}
.sizerHz {width: 6px; margin: 0 !important; cursor: ew-resize; background-color: #ddd;}
.sizerHz:hover {background-color: #7ab7cf;}
.sizerHz > .divToggle {height: 32px; background-color: #ddd; position: relative; top: calc(50% - 32px);}
.sizerHzMv {cursor: ew-resize; background-color: #7ab7cf; z-index: 10000;}
.divApp tr {user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}


/* flex styling */
.divFlexRow {display: flex; gap: 10px;}
.divFlexCol {display: flex; flex-direction: column; gap: 10px;}
.divFlexWrap {display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-evenly;}
.divFlexCntr {display: flex; justify-content: center; align-items: center; gap: 10px;}
.divFlexEven {display: flex; justify-content: space-evenly; gap: 10px;}
.divFlexAuto {flex: auto;}
.divFlexGrow {flex: 1;}

.divFlex2Col {display: flex; flex-wrap: wrap;}
.divFlex2Col > div {flex: 50%; width: 100%;}
.divFlexCol > div:first-child {border-top-left-radius: inherit; border-top-right-radius: inherit;}
.divFlexCol > div:last-child {border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;}
        

/* default divPanel style */
.divPanel {border: 1px solid #ddd; padding: 2px; border-radius: 5px; margin: 3px; background: rgba(255,255,255,0.6);}
.divPanel {border: 2px solid #ccc;}

.divPanel > .divHdr {background-color: #e4e4e4; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 3px 3px 3px 10px; font-weight: bold;}
.divPanel > .divHdr + table thead {display: none;}

/* .divPanel > .divHdr + div {padding: 4px 10px;}  */ /* .divBody */
.divPanel > .divHdr + .divPanel {padding: 2px;}
.divPanel > .divHdr + table {margin: 4px 10px;}
.divPanel > .divBody > div {margin: 6px 0;}
.divPanel table {width: 100%;}
.divPanel.divPicker {padding: 0;}
.divPanel.divPicker .divInput {padding: 0px;}
.divPanel.divPicker .divInput .divButtonGrp  {padding: 0; margin: 0;}


.divSidebar.fitHt {background-color: #efefef; padding: 12px; overflow: unset;}
.divSidebar .fltrForm .divInput input[dattyp] {width: 100%;}

.divHdr > .divToolbar {background-color: transparent; height: unset; border: none; margin-right: 2px;}
.divHdr > .divToolbar .divBtn {margin: 0 1px; background-color: transparent; background-size: 12px;}

.divTog {cursor: pointer; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; transition: transform 1s;}
.vtTog .divTog {background-image: url(/images/arrowDown.png); }
.vtTog.toggled .divTog {-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg);}
.vtTog ~ .htAnimate {max-height: 0px; transition: max-height 0.5s ease-in-out; overflow-y: hidden;}
.vtTog.toggled ~ .htAnimate {max-height: 1200px; overflow-y: auto;}


/*  dialog box  */
.divBoxModalBG {top: 0; left: 0; position: fixed; background-color: rgba(0,0,0,0.6); z-index: 99999;}
.divBox {background-color: #ddd; border-radius: 1px; min-width: 150px; min-height: 80px; font-size: 100%; font-family: Ebrima; border-radius: 4px;}
.divBox .divBoxTitle {background-color: #bbb; padding: 2px 0 2px 5px; font-size: 80%; box-shadow: 0 0 0 #aaa, 0 1px 5px #aaa; min-height: 8px; border-top-right-radius: 4px; border-top-left-radius: 4px; text-transform: capitalize;}
.divBox .divBoxBody {padding: 10px;}
.divBox .divBoxBody .divMenu {max-height: 240px;}
.divBox .divBoxBtns {padding: 12px 8px 8px 8px; text-align: center; font-family: Calibri;}
.divBox .divBoxBtns .divBtn {cursor: pointer; opacity: 0.7; margin-left: 8px; display: inline-block; border: 1px solid #888; border-radius: 2px; padding: 2px 4px;}
.divBox .divBoxBtns .divBtn:hover {opacity: 1.0; background-color: #ddd;}
.divBox .divBoxBtns .divBtn:first-child {margin-left: 0;}
.divBox .divBoxBody .divHdr {width: 400px; text-align: center; padding: 10px;}
.divBox .divBoxBody.divDataBody {max-height: 360px;}
.divBox .divBoxBtns .divBtn.waiting {font-style: italic; opacity: 0.5;}
.divBox .divBoxResize {margin-top: -16px;}
.divBox .divBoxResize .divSizer {background: url(/images/cornerResize.png) 0px/16px; float: right; height: 16px; width: 16px;}
.divBox.centerInit {display: inline-block;}
    /* .divBox.centerInit .divTab table {width: 10px;} */

/* message box */
.divBox .divBoxMsg {border-top: 2px solid #bbb;}
.divBox .divBoxMsg .divMsg {margin: 6px; opacity: 0.7; font-size: 14px;}

.divBoxMsg .divMsg {background-image: url(/images/info.png); padding: 2px; border: 1px solid #bbb; padding-left: 28px; background-position: 4px; background-color: #bbb;}
.divMsg.alert {background-image: url(/images/alert.png); background-color: #f3cbcb;}

.divNotice {
    position: fixed;
    bottom: -80px;
    right: 20%;
    transition: bottom 1s linear;
    padding: 8px 32px 8px 8px;
    border-top-left-radius: 6px;
    border: 2px solid #7f89c6;
    border-bottom: none;
    background-color: #adcbef;
    font-family: system-ui;
    box-shadow: 6px 2px 12px #888;
    white-space: pre-line;
}
.divNotice.icon {background-position-x: 8px; padding-left: 32px;} 
.divNotice.info {background-image: url(/images/info64.png);}
.divNotice.alert {background-image: url(/images/alert32.png); background-color: #f5c6ba; border-color: #844;}
.divNotice.present {bottom: 0px;}

/*  progress bar  */
.divProgress {border: 1px solid #777; border-radius: 3px; padding: 2px; min-height: 12px; position: relative; text-align: center;}
.divProgress > .divPct {position: absolute; top: 10%; width: 0%; height: calc(100% - 6px); background-color: #55b15b; border-radius: 3px; opacity: 0.5;}
.divProgress > .divTxt {font-size: 14px; line-height: 24px;}

/*  menus  */
.divMenu {position: absolute; left: 10px; z-index: 9999; min-width: 120px; background-color: #ccc; border: 2px solid #bbb; padding: 2px; color: #555; font-family: sans-serif; font-size: 12px;}
.divMenu {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.divMenu {max-height: 50%; overflow-y: auto; overflow-x: hidden;}
.divMenu::-webkit-scrollbar {display: none; width: 2px;}

.divMenu.withIcons > div {padding-left: 24px;}
.divMenu > div {cursor: pointer; white-space: nowrap; display: block; float: none;}
.divMenu > div {font-family: unset; font-size: 1em; line-height: 1.6em; padding: 0 8px; background-color: #ccc;}
.divMenu > div.separator {border-bottom: 1px solid #888;}
.divMenu > div.dispNone {display: none;}


.divMenu > div:hover {color: #448; background-color: #ddd;}
.divMenu > div.selected {filter: brightness(110%);}
.divMenu > div.selected.selectable {background-image: url(/images/check5.png);}

.divMenu div[cmd][dscfg="relDel"] {display: none;}
.divMenu div[cmd][dscfg="relDel"][relid] {display: block;}

.mnuHdr {cursor: pointer; min-width: 20px; min-height: 20px;}

/* divDrop (like menu but multi-purpose div area) */
.divDrop {position: absolute; left: 10px; z-index: 9999; min-width: 120px; background-color: #ccc; border: 2px solid #bbb; padding: 2px; color: #555; font-family: sans-serif; font-size: 12px;}
.divDrop {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.divDrop .divMenu {max-height: 240px;}

.divItemFlex {border: 2px solid #555; display: inline-flex; flex-direction: column; border-radius: 4px;}
.divItemFlex .divHdr {font-weight: bold; padding: 4px; background-color: #ddd;}
.divItemFlex .divCont {background-color: #eee; flex: auto;}


.divItems.withIcons > div {padding-left: 24px;}
.divItems > div {cursor: pointer; white-space: nowrap; display: block; float: none;}

div.focus {background-color: rgba(0,0,0,0.07);} 


/* file dropZone */
.divFileDrop {border: 5px dashed #ccc; width: auto; min-height: 200px; margin-bottom: 8px; background-color: #f8f8f8;}
.divFileDrop.singleSel {min-height: 80px;}
.divFileDrop .divDropMsg {text-align: center; padding: 8px 4px; background-color: #eee;}
.divFileDrop.hover {border-color: #005500; opacity: 0.5;}
.divFileDrop.hover .divDropMsg {background-color: #bbddbb;}
.divFileDrop .divDropInner {max-height: 320px; overflow-y: auto;}
.divFileDrop .divDropButtons {display: inline; margin-left: 12px; text-align: center;}
.divFileDrop .divButton {margin-right: 8px; margin-top: 12px; padding: 2px 4px; font-size: 12px;}
.tblFileUpload {border-collapse: collapse; border: none;}
.tblFileUpload td {padding: 5px; border: none;}
.tblFileUpload td:first-child {width: 1%;}
.tblFileUpload td:nth-child(2) {background-image: url(/images/bg32ddd.png); background-repeat: no-repeat; background-size: 0% 100%;}
.tblFileUpload td > img {width: 40px; padding: 0px; border: none;}
.tblFileUpload tr.waiting td:first-child {background-image: url(/images/waiting.gif); background-size: 16px; background-position-x: center;}


/* toolbars */
.divToolbar input {font-size: 11px; margin: 3px;}
.divStatusBar {border: 1px solid #bbb; overflow: auto; background-color: #ccc; font-size: 0.9em;}
.divStatusBar > div {float: left; min-height: 20px; min-width: 40px; border: 1px solid #bbb; background-color: #eee; margin: 1px; padding: 3px;}
.divStatusBar > div.img {padding-left: 20px;}
.divStatusBar > div[cmd] {cursor: pointer;}


.divToolbar {border: 1px solid #bbb; background-color: #ddd; font-size: 11px; padding-bottom: 1px;}
.divToolbar {text-align: left; overflow: hidden;}  /* fixed-height, no-wrap */
.divToolbar > div {max-height: 30px; overflow: hidden; white-space: nowrap;}
.divToolbar > div {display: inline-block; vertical-align: middle;}
.divToolbar > input {vertical-align: top;}
.divToolbar > span {margin-left: 4px; font-weight: bold;}
.divToolbar .divBtn {cursor: pointer; border-radius: 3px; margin: 3px 1px; height: 18px; line-height: 18px;}
.divToolbar .divBtn.text {padding: 2px 6px; border: solid 1px #777;}
.divToolbar .divBtn.text > a {font-size: inherit !important; color: inherit; text-decoration: inherit;}
.divToolbar .divBtn.img {border: none; padding: 0; width: 18px;}
.divToolbar .divBtn.img.text {padding: 2px 6px 2px 24px; border: solid 1px #777; width: unset;}
.divToolbar .divBtn:hover {background-color: #eee;}
.divToolbar .divBtn.selectable {opacity: 0.3;}
.divToolbar .divBtn.selectable1 {opacity: 0.3;}
.divToolbar .divBtn.selectable.selected {opacity: 1;}
.divToolbar .divBtn.selectable1.selected {opacity: 1;}
.divToolbar .divBtn[disabled] {cursor: default; opacity: 0.3;}
.divToolbar > div.separator {margin: 0 8px; background-color: #999; height: 70%; width: 2px;}

.divToolbar .section {border: 1px solid #bbb; padding: 1px 6px; margin: 1px; display: inline-block; vertical-align: top;}  
.divToolbar .section > div {display: inline-block; vertical-align: top;} 
.divToolbar .section .divText {padding: 4px;}
.divToolbar .section.icon {padding-left: 20px;}
.divToolbar.footer .colSmry {float: right; margin-right: 12px; font-size: 1.2em; border: 1px solid #999;}
.divToolbar.footer .colSmry .section {}
.divToolbar.footer .colSmry .divLabel {font-weight: bold; border: none;}
.divToolbar .divToolbar {border: unset; background-color: unset; font-size: unset; height: unset;}
.divToolbar > div:first-child {margin-left: 4px;}

.divToolbar.wrap {overflow: auto;}  /* user interaction that impacts tb height in fixed-height app would require dynamic resize of other content */
.divToolbar.wrap > * {float: left;}
.divToolbar.footer {background-color: #ddd;}

.noFilterOff .filterOff {display: none;}
.noFieldSel .fieldSel {display: none;}
.noCollapse .expandH {display: none;}

/*  tabs  */
.divTabGrp {height: 100%; width: 100%; overflow: hidden;}  /*  inner-containers responsible for scroll */
.divTabBtns {overflow: auto; background-color: #f4f4f4;}
.divTabBtns {user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
.divTabBtns .divTabBtn {opacity: 0.5; float: left; margin: 2px 4px 0 4px; padding: 2px 4px; text-align: center; cursor: pointer; border: 1px solid #bbb; background-color: #ccc;}
.divTabBtns .divTabBtn.selected {opacity: 1.0; border-bottom: 1px solid transparent;}
.divTabBtns .divTabBtn.img {min-width: 12px; min-height: 16px;}
.divTabBtns .divTabBtn.img.text {padding: 2px 6px 2px 24px; background-position: 4px;}

/*.divFlexCol > .divTabGrp {height: unset; overflow: unset;}
.divFlexCol > .divTabGrp > .divTabs * {height: unset; overflow: unset;}
    */

/* vertical tab-bar */
.divTabGrp.tabBtnsVert > div.fitHt.divTabs {display: inline-block;}
.divTabGrp.tabBtnsVert > .divTabBtns {padding: 8px 16px 8px 8px;}
.divTabGrp.tabBtnsVert > .divTabBtns > .divTabBtn {float: none; display: block; margin-bottom: 12px; text-align: left;}


/* tab buttons to the right (so that a small tool-bar can occupy the space to the left) */
.divTabGrp.tabBtnsRightX > .divTabBtns {float: right;}

.divTabGrp.tabBtnsRight {
    > .divTabBtns {background-color: transparent; direction: rtl;
        > .divTabBtn {float: right;}
    }
    > .divTabs > .divTab > .divToolbar {display: inline-block; margin-top: -30px;}
}



/* tabs as buttons */
.tabBtnsTool > .divTabBtns {background-color: #ddd; padding: 3px;}
.tabBtnsTool > .divTabBtns > .divTabBtn {border: 1px solid #333; border-radius: 3px;}

.divTabs {height: 100%; }
.divTabs .divTab {height: 100%; display: none;}
.divTabs .divTab.selected {display: block; -webkit-animation: fadeIn50 0.7s ease; animation: fadeIn50 0.7s ease;}

/* buttons */
.divButton {background-color: #d4d4d4; padding: 8px; border-radius: 4px; display: inline-block; cursor: pointer; border: solid 1px rgba(0,0,0,0.2);}
.divButton[disabled] {opacity: 0.5;}
.button {float: left; cursor: pointer; background-color: #ddd; border-radius: 3px; border: 1px solid #777; padding: 3px; text-align: center;}
.button:hover {filter: brightness(108%);}


/*  table elements  */
tr.selected {background-color: #d4d4d4;}
th.sortable {cursor: pointer;}
th, td {white-space: nowrap;}

table > thead > tr > th.tdIconOnly {padding-left: 2px; padding-right: 2px; font-size: 0px;}
table > thead > tr > th.tdIconOnly.thIconHide {background-image: none !important;}
table > tbody > tr > td.tdIconOnly {padding-left: 2px; padding-right: 2px;} 
th.tdIconOnly, td.tdIconOnly {background-position: center; min-width: 24px; max-width: 24px !important; width: 1%;}
th.tdIconOnly > div {display: none;}
td.tdIconOnly > div[cmd] {background-image: unset;}
td.tdIconOnly > a {font-size: 0; display: block; width: 100%; height: 20px; background-image: url(/images/hyperlink.png);}
td.elIcon20 {padding-left: 2px; padding-right: 2px;}
td.elIcon20 > * {padding-left: 20px;}

td.tdLink {cursor: pointer; color: #445;}
td.tdLink:hover {background-color: #dcdcf3;}
td.tdLink > div[cmd] {min-height: 20px; line-height: 20px;}
td.tdLink > a {text-decoration: none; color: #445;}
td.tdSmall {width: 1%;}

tr.btnLink .tdLink:hover {background-color: unset; cursor: unset;}
tr.btnLink .tdLink > div {cursor: pointer; border: 1px solid #777; border-radius: 4px; padding: 4px; background-color: #dde; width: 100px; text-align: center; font-weight: bold;}



/* 2-column table */
.tbl2Col tr.trBtn {display: block;}
.tbl2Col tr.trBtn:last-child {border-top: 12px solid transparent;}
.tbl2Col tr.trBtn:hover {background-color: unset;}
.tbl2Col .trBtn td:first-child {width: 0px  !important; padding: 0 !important;}
.tbl2Col .trBtn .tdLink {background-color: #ddd; border-radius: 3px; border: 1px solid #777; padding: 3px 16px; text-align: center;}
.tbl2Col td {text-align: left;}
.tbl2Col td:first-child {white-space: nowrap; width: 1%; padding-right: 12px;}
.tbl2Col tr.wsWrap td:nth-child(2) {white-space: normal;} 
.tbl2Col tr.noLabel td:first-child {display: none;}

/* table directly within divContent */
.divContent {width: 100%;}  /* overflow: auto; */
.divContent > table {clear: both; width: 100%;}
.divContent > table th {padding: 4px 8px; border-radius: 2px; background-color: #bbb;}
.divContent > table td {padding: 0 12px 0 4px;}
.divContent > table tbody tr:hover {background-color: #e4e4e4;}
.divContent > table tr.resFail {background-color: #f2dede;}
.divContent > table td.tdSmall {padding: 0 2px;}
.divContent > table td.mnuTop {opacity: 0.2;}
.divContent > table td.mnuTop:hover {opacity: 1;}


/* table w/ fixed-header */
.contFixHdr {overflow-y: hidden !important;}
.tblFixHdr {border-collapse: collapse;}
.tblFixHdr > thead {display: block; white-space: nowrap;}
.tblFixHdr > thead > tr > th {display: inline-block; overflow: hidden; font-size: 12px; white-space: nowrap;}
.tblFixHdr > thead > tr > th div {position: relative; top: 50%; transform: translateY(-50%);}
.tblFixHdr > tbody {display: block; overflow-y: scroll;}
.tblFixHdr > thead > tr > th.dispNone {display: none;}
.tblFixHdr > thead > tr > th {min-width: 24px; border-right: 1px solid #fff;}
.tblFixHdr > tbody > tr > td {min-width: 24px; border-right: 1px solid transparent;}

/* labeled data w/in divs  */
.divDataGroup > div > div {display: inline-block;} 
.divDataGroup > div > .divLabel {white-space: nowrap; font-size: 0.8em; margin-right: 0.8em;} 
.divDataGroup > div.iconOnly {display: inline-block; margin-left: 8px; vertical-align: text-top; font-size: 0; background-size: 100%; width: 24px; height: 24px;}


.divCloseX {position: absolute; width: 16px; height: 16px; top: 3px; left: calc(100% - 20px); background-image: url(/images/closeX.png); background-position: center; background-size: 12px; cursor: pointer; opacity: 0.5; transition: opacity 1s; z-index: 999;} 
.divCloseX:hover {opacity: 1.0; background-size: 14px;}

/* editable elements - to be deprecated w/ .divEditable */
.allowEdits .editable {cursor: text;}
.allowEdits .editable:hover {background-color: #dac0c0;}
.allowEdits .editing {display: none;}
.allowEdits .dirty {background-color: #eaa; font-style: italic;}

.divEditable {-webkit-user-modify: read-write; background-color: #f4f4f4; border: 1px solid #444; border-radius: 2px; padding: 1px 12px 1px 2px;}

/* tree-nav panel */
.divTree {height: 100%;}
.divTree .treeNavPath {overflow: hidden; font-size: 11px; background-color: #d8d8d8; min-height: 15px; padding: 2px 6px 2px 2px; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa;}
.divTree .treeNavPath div div {display: inline-block; cursor: pointer; white-space: nowrap;}

/* item list */
ul.itemList {list-style-type: none; margin: 1px; padding: 2px 1px; width: calc(100% - 12px); font-size: 13px; white-space: nowrap; overflow-y: auto; overflow-x: hidden;}
ul.itemList > li {padding: 0 0 1px 24px; cursor: pointer;}
ul.itemList > li:hover {background-color: #d0d0d0;}
ul.itemList > li.selected {background-color: #c0c0ee;}

/* file widget */
div[cmd="browse"] {background-image: url(/images/folder.png);}
div[cmd="docGet"][docfiletyp="URL"][itm="download"] {display: none;}

/*  Login div  */
.divLoginPage {min-width: 360px; font-family: verdana; font-size: smaller; background-color: #fafafa; border-radius: 8px; border: 8px solid #eee; padding: 24px;}
.divLoginPage .divLogin {margin: auto; width: 80%;}
.divLoginMsg {text-align: center; font-weight: bold; margin: 30px;}
.divLogin .divInput {overflow: auto;}
.divLogin .divInput > * {float: left;}
.divLogin .divInput > span {width: 100px; min-height: 16px; font-size: 120%; margin-top: 4px;}
.divLogin .divInput input {width: 160px; margin: 2px; font-size: 110%;}
.divLogin .divInput input[type="checkbox"] {width: unset; margin-right: 4px;}
.divLogin span.lblCheckBox {margin: 0; font-size: 80%;}

.divLoginSubmit {margin-top: 18px;}
.divLoginSubmit input.button {border: solid #ababab; border-top: thin #676767; border-left: thin #676767; background-color: #cdcdcd; width: 120px; height: 26px; font-weight: bold;}
.divLogin .validation-summary-valid {min-height: 50px;}
.divLogin .validation-summary-errors {min-height: 50px; white-space: nowrap; font-style: italic; color: #ee3344;}


.grpListActv[dscfg="grpListActv"] table tr {opacity: 0.4;}
.grpListActv[dscfg="grpListActv"] table tr.selected {background-color: #f4f4ff; opacity: 1;}

/*  data entry style*/
.divDataBody {padding: 16px 2px 12px 2px; overflow: auto; transition: height 1s;} 
.divDataBody .divInput.divDatInline {float: left; margin-left: 6px;}
.divDataBody .divInput.divDatBlock {display: block; clear: both; padding-top: 16px;}
.divDataBody .divInput.divDatBlock:first-child {padding-top: 0;}
.divDataBody .divInput.divDatBlock .lblPrompt {margin-left: 16px;}

/* following should be for .divInput.divDatInline */
.divDataBody .divInput .lblPrompt {width: unset; padding-right: 16px;}
.divDataBody .divInput .divButtonGrp .divBtnOption {width: unset;}

.divDataBody .divInput {clear: both; margin-bottom: 8px;}
.divDataBody .divInput.hidden {opacity: 0.0; transition: opacity 2s; overflow: hidden; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important;}
.divDataBody .divInput.divGrpToggle {float: left;}

.divInput {opacity: 1.0; transition: opacity 2s;}
.divInput .lblPrompt {float: left; padding-right: 8px; width: 120px; white-space: nowrap; overflow: hidden;}
.divInput input {width: 180px; border-radius: 4px; padding: 2px 5px; box-sizing: border-box;}  
.divInput textarea {min-height: 100px; min-width: 240px; border-radius: 4px; padding: 2px 5px; box-sizing: border-box;}
.divInput input[type="radio"] {cue: unset;}
.divInput input[type="checkbox"] {cue: unset;}

.divInput.divDatInline input[type="text"], .divInput.divDatInline input[type="password"] {margin-top: 13px;}   
.divInput input[maxlength="1"], .divInput input[maxlength="2"], .divInput input[maxlength="3"] {text-align: center; max-width: 40px;}
.divInput[ctrltyp] input[readonly="readonly"] {color: #777; background-color: #eee;}
.divInput[ctrltyp="dropdown"] > input[readonly="readonly"] {background-color: #fefefe; background-image: url(/images/dropWidget1.png); background-position-x: calc(100% - 2px); padding-right: 24px;}
.divInput[ctrltyp="dropdown"] > input:last-child {background-image: none; background-color: #eee;}
.divInput[ctrltyp="dropdownNav"] .divInputNav {width: 100%; clear: left; display: flex;}
.divInput[ctrltyp="dropdownNav"] .divInputNav > div {display: inline-block; cursor: pointer; background-color: #fff; width: 10%; background-size: 0.7em; border: 2px solid #aaa;}
.divInput[ctrltyp="dropdownNav"] .divInputNav > div.selectPrv {background-image: url(/images/prev.png);}
.divInput[ctrltyp="dropdownNav"] .divInputNav > div.selectNxt {background-image: url(/images/next.png);}
.divInput[ctrltyp="dropdownNav"] .divInputNav input {display: inline-block; width: 80%; border-radius: 0; background-color: #fff;}


.divInput.invalid > input {background-color: #fbc9c9 !important;}
.divInput.invalid textarea {background-color: #fbc9c9 !important;}
.divInput.invalid .divButtonGrp {background-color: #fbc9c9 !important;}
.divInput.invalid .divFileDrop {background-color: #fbc9c9 !important;}

.divInput.divGrpBox {border-left: 2px solid #999; border-right: 2px solid #999; padding: 4px 12px; margin: 0px; overflow: hidden;}
.divInput.divGrpBox.divGrpBoxTop {border-top: 2px solid #999; margin-top: 16px; padding-top: 12px;}
.divInput.divGrpBox.divGrpBoxBtm {border-bottom: 2px solid #999; margin-bottom: 16px; padding-bottom: 12px;}

.divInput[ctrltyp="dropdown"] input {cursor: pointer;}
.divInput[ctrltyp="dropdownNav"] input {cursor: pointer;}
.divInput[ctrltyp="datepick"] input {cursor: pointer;}
.divInput[ctrltyp="textNum"] .lblPrompt {padding: 0 16px;}
.divInput[ctrltyp="textNum"] div {display: inline-block;}
.divInput[ctrltyp="textNum"] input[type="text"] {margin-right: 8px; margin-top: 0;}
.divInput[ctrltyp="datepick"] input[type="text"] {text-indent: 28px; background-image: url(/images/calSelSingle.png);}
.divInput[ctrltyp="anchor"] a {display: inline-block; width: 160px; overflow: hidden;}
.divInput.txtBoxLbl input {border: none; border-radius: 0;}

.divButtonGrp {overflow: auto; border: 1px solid #aaa; background-color: #dfdfdf; margin: 0 4px; transition: opacity 1s; font-size: 12pt; line-height: 12pt;}
.divButtonGrp span {display: block; font-size: 14pt; text-align: center;}
.divInput.binary .divButtonGrp .divBtnOption {margin: 6px; padding: 3px 10px; width: 40px; border: 1px solid #bbb; border-radius: 4px; background-color: #ccc;}
.divInput.iconOnly .divButtonGrp .divBtnOption {width: 32px; font-size: 0; background-size: 100%;}


.divBtnOption {float: left; cursor: pointer; border: 1px solid #dfdfdf; text-align: center; padding: 15px 6px; margin: 2px; background-color: #efefef; opacity: 0.6; border-radius: 3px;}
.divBtnOption.selected {text-shadow: 0px 0px 0.5px black; border: 1px solid #888; opacity: 1.0}

.divTxtNum {margin-top: 12px;}
.divTxtNum span {margin: 0 12px;}
.divTxtNum div {display: inline-block;}
.divTxtNum .divInc {background-size: 100%; width: 16px; height: 16px; transition: width 1s, height 1s; cursor: pointer; position: relative; top: 8px; margin-top: -8px;}
.divTxtNum .divInc:hover {width: 30px; height: 30px;}
.divInc[inc="1"] {background-image: url(/images/arrowUp.png);}
.divInc[inc="-1"] {background-image: url(/images/arrowDown.png);}

.divSlider {border: 1px solid #aaa; padding: 0 16px; height: 32px; min-width: 120px;}
.divSlider .divSlide {position: relative; width: 100%; height: 100%; cursor: pointer;}
.divSlider hr {position: relative; top: 50%; margin: 0;}
.divSlider .divHandle {position: relative; height: 60%; top: 15%; width: 12px; border: solid 1px #aaa; background-color: #ccc; cursor: pointer; opacity: 0.9; left: calc(00% - 6px);}

.fltrForm .divButtonGrp {display: inline-block; font-size: 90%; line-height: 90%; border-radius: 3px;}
.fltrForm .divButtonGrp .divBtnOption  {padding: 2px; margin: 4px;}
.fltrForm .divInput {margin-top: 2px;} 
.divDrop .divForm {padding: 6px; width: max-content;}
.divDrop .fltrForm .lblPrompt {width: 80px; line-height: 180%;}
.divDrop .fltrForm input[type] {width: auto;}
.divDrop .propSelForm .divInput {height: 20px; padding-left: 24px;}
.divDrop .propSelForm .divInput .lblPrompt {width: 80px; overflow: hidden;}
.divDrop .propSelForm .divInput input {width: 60px; padding-right: unset; margin: 1px; background-image: none; display: none;}
.divDrop .propSelForm .divInput.selected {background-image: url(/images/check5.png);}
.divDrop .propSelForm.sigma .divInput {padding-left: 0px; background-image: none;}
.divDrop .propSelForm.sigma input {display: inline-block;}
.divDrop .divToolbar {max-height: 22px;}

/* text divs */
.divTxtBlurb {padding: 0.5em; border-radius: 0.5em; border: 1px solid #bbb; background-color: #dde;}


/* calendar */
.divInput .divCalendar {position: absolute; z-index: 9999;}
.divInput .divCalendar table th {min-width: unset; background-color: unset; padding: unset; border-radius: unset;}
.divInput.calFixed input {display: none;} 
.divInput.calFixed .divCalendar {position: unset; display: unset;} 
.divCalendar.elPinned {position: unset; display: unset;}
.divCalendar.elPinned table.tblCal th {min-width: unset;}

.divCalendar {font-family: Verdana; font-size: 12px; -webkit-user-select: none; text-align: left;}
.divCalendar * {background-repeat: no-repeat; background-position: center center; background-size: 16px;}

.divCalendar .divHeader > div {display: inline-block;}
.divCalendar input[type="text"] {cursor: pointer; background-image: url('/images/calSelSingle.png'); background-repeat: no-repeat; background-position: 2px 0px; background-color: #ededed; text-indent: 28px;}
.divCalendar.selSingle input[type="text"] {background-image: url('/images/calSelSingle.png');}
.divCalendar.selMulti input[type="text"] {background-image: url('/images/calSelMulti.png');}
.divCalendar.selRange input[type="text"] {background-image: url('/images/calSelRange.png');}
.divCalendar.selBefore input[type="text"] {background-image: url('/images/calSelBefore.png');}
.divCalendar.selAfter input[type="text"] {background-image: url('/images/calSelAfter.png');}  

.divCalendar select {display: none;}
.divCalendar .divHeader {height: 100%; text-align: center; width: calc(100% - 4px); background-color: #e4e4e4; padding: 2px;}
.divCalendar .divButton {cursor: pointer; min-height: 20px; min-width: 20px; padding: 0; border: none; background-color: unset;}

.divCalendar table th .divHeader > div {height: 100%;}

.divViewMode {cursor: pointer; float: left; width: 20px; min-height: 20px; margin-left: 4px;}
.divViewMode.cal {background-image: url(/images/calviewCal.png);}
.divViewMode.list {background-image: url(/images/calviewLst.png);}
.divViewMode.tbl {background-image: url(/images/calviewTbl.png);}

.divMonthNav {margin-left: -12px;}
.divMonthNav > div {display: inline-block; margin: 0 5px; vertical-align: middle;}
.divCalendar .divButton.prev {background-image: url(/images/arrowLeft.png);}
.divCalendar .divButton.next {background-image: url(/images/arrowRight.png);}

.divCalendar .divMonthClear {height: 100%; cursor: pointer; background-image: url(/images/clear1.png); background-repeat: no-repeat; background-position: 2px 2px;}

.divCalendar.selSingle .tdConfig {background-image: url('/images/calSelSingle.png');}
.divCalendar.selMulti .tdConfig {background-image: url('/images/calSelMulti.png');}
.divCalendar.selRange .tdConfig {background-image: url('/images/calSelRange.png');}
.divCalendar.selBefore .tdConfig {background-image: url('/images/calSelBefore.png');}
.divCalendar.selAfter .tdConfig {background-image: url('/images/calSelAfter.png');}

.divCalendar .tdConfig {opacity: 0.5; background-color: #e8e8e8ee;}
.divCalendar .tdConfig:hover {opacity: 1.0;}
.divCalendar .tdPin {opacity: 0.5; background-color: #e8e8e8ee;}
.divCalendar .tdPin:hover {opacity: 1.0;}

.divMonth  {border: 2px solid #dedede; min-height: 50px; z-index: 99; box-shadow: 2px 2px 12px #888;}
.divCalendar .hdrCtrl th {height: 1%;}

.divCalendar table.tblCal {width: 100%; border-spacing: 1px; background-color: #bbb; border-collapse: separate;}
.divCalendar table.tblCal tr:first-child {background-color: #f4f4ff; color: #000055;}
.divCalendar table.tblCal tr:first-child  th {min-height: 20px;}
.divCalendar table.tblCal th {min-width: 25px; overflow: hidden; border: 1px solid #777; text-align: center; white-space: normal; padding: 0;}
.divCalendar table.tblCal td {width: 14.28%; min-height: 15px; font-size: 11px;  border: 1px solid #eef; vertical-align: top; white-space: normal; padding: 0;}
.divCalendar table.tblCal .tdSelected {background-color: #faa;}

.divCalendar table.tblLst {width: 100%; border-spacing: 1px; background-color: #bbb; border-collapse: collapse;}
.divCalendar table.tblLst th {border: 1px solid #777; text-align: center;  font-size: 150%; padding: 6px; background-color: #ccc;}
.divCalendar table.tblLst td {width: unset; border: 1px solid #eef; font-size: 150%; white-space: nowrap; padding: 2px 4px;}
.divCalendar table.tblLst td.wsWrap {white-space: normal;}


.divCalendar .tblCal td {background-color: #f8f8f8; color: #999;}
.divCalendar .trDays > td .divEvent {display: none;}
.divCalendar .trDays > td .divEvent .evtDate {display: none;}
.divCalendar .tblCal td.tdOffMonth {background-color: #e8e8e8ee; color: #bababa;}
.divCalendar .tblCal td.hasEvents {background-color: #c3deea; cursor: pointer; color: black;}
.divCalendar .tblCal td.tdOffMonth.tdSelected {background-color: #eebbbbbb;}
.divCalendar .tdSelectable {cursor: pointer; color: #222; font-weight: bold;}
.divCalendar .tdConfig {cursor: pointer; background-image: url(../images/gear16.png);}
.divCalendar table .trDtPeriod td {text-align: center; cursor: pointer; padding: 4px;}
.divCalendar.calQtrs .trDtPeriod td {height: 32px; vertical-align: middle;}

.divCalendar .divEvent {color: black; font-weight: normal; background-color: #d0d0d0; margin: 1px 0; padding: 2px; border: 1px solid #ccc; border-radius: 2px; overflow: auto;}
.divCalendar .divEvent.linkedxx {background-image: url(/images/hyperlink.png); background-position: calc(100% - 2px) 2px; background-size: 12px;}
.divCalendar .divEvent.linked:hover {background-color: #d1d0ff; border-color: #000;}
.divCalendar .divEvent:hover {border-color: #000;}
.divCalendar .divEvent a {font-weight: normal; color: black; cursor: pointer; display: inline-block;}
.divCalendar .divEvent > div {float: left; padding: 0 2px;}
.divCalendar .divEvents {background-color: #eee;}
.divCalendar .divEvents .divEvent .evtDate {width: 40px; vertical-align: middle; font-weight: bold; background-color: #ddeeee;}

.divCalendar .divEvent > div.evtName {width: calc(100% - 64px);}
.divCalendar.large .divEvent > div.evtName {width: calc(100% - 144px);}
.divCalendar .trDays > td .divEvent > div.evtName {width: calc(100% - 24px);}
.divCalendar .divEvent > div.evtLink {float: right;}
.divCalendar .divEvent > div.evtLink a {background-image: url(/images/hyperlink.png); width: 12px; height: 12px; background-size: 12px;}

.divCalendar .divEvents .divEvent {display: block; filter: grayscale(0.4);}
.divCalendar .divEvents .divMsg {text-align: center; padding-top: 20%; font-size: 150%;}

/* large-size */
.divCalendar.large .hdrCtrl > th {height: 40px;}
.divCalendar.large .hdrDays > th {height: 40px;}
.divCalendar.large .divHdrNav {font-size: 200%; font-family: monospace;}
.divCalendar.large td.hasEvents {background-color: #f8f8f8; color: #999; cursor: default;}
.divCalendar.large td > span.lblDay {padding: 2px;}
.divCalendar.large .trDays > td .divEvent {display: block;}
.divCalendar.large .divEvents .divEvent {font-size: 180%;}
.divCalendar.large .divEvent .evtDate {display: table-cell; width: 120px;}
.divCalendar.large .hasEvents.tdOffMonth {background-color: #e8e8e8;}
.divCalendar.large td.tdOffMonth .divEvent {opacity: 0.5;}
.divCalendar.large .divMonthNav > div {margin: 5px;}
.divCalendar.large * {background-size: 24px;}

/* Calendar toolbars */
.divCalendar .divHeader > .divToolbar {display: none; background-color: unset;}
.divCalendar .divHeader > .divToolbar .divBtn {background-color: unset;}
.divCalendar.large .divHeader > .divToolbar {float: right; height: unset; background-color: unset; border: none;}
.divCalendar.large .divHeader > .divToolbar .divBtn {width: 24px; height: 24px; background-size: 24px;}

/* calendar color themes  */
.divCalendar table {background-color: #9fc3e4;}
.divCalendar thead.hdrCtrl .divHeader {background: linear-gradient(to bottom, #a9e4f7 0%,#0fb4e7 100%);}
.divCalendar .divEvent {background-color: #c8dfe2;}
.divCalendar tr.hdrDays th {background-color: #a6b7c7;}


.divDataInline * {display: inline-block;} /* float: left;*/
.divDataInline *.dispNone {display: none;}
.divDataInline * {width: unset; vertical-align: middle; font-size: 9pt;}
.divDataInline .divInput * {width: unset; vertical-align: middle;}
.divDataInline .divInput .lblPrompt {padding: 4px 2px 0 2px;}
.divDataInline .divInput input[type] {width: 80px; font-size: 9pt;}
.divDataInline .divBtnOption {padding: 1px 4px; width: unset; margin: 1px 2px;}

.divToolbar div + .divDataInline {margin-left: 8px;} 
.divToolbar.tbFloat {position: absolute; top: 0px; left: 50%; overflow: visible;}
.divToolbar.tbPlain {background-color: unset; border: none; display: inline;}

[tbname] .divDrop .fltrForm .lblPrompt {width: 80px;}
[mergetmplt] {display: none;}

/*  report content style */
.divRpt {width: 8.5in; padding: 0.5in; font-family: Arial; font-size: 10pt; margin: auto; border: 1px solid #efefef;}
.divRpt .divRptSect {width: 100%; overflow: auto; padding: 0 2% 16px 2%;}
.divRpt .divRptSect .divTitle {font-weight: bold; font-size: 15pt; padding: 12px;}        
.divRpt .divRptSect.divHdr {padding: 0 2% 2% 2%;}

.divContent.divRptRes {overflow: auto;}
.divContent.divRptRes > .divReportTop {height: 100%;}
.divContent.divChartItems {height: 100%; overflow-x: auto; overflow-y: hidden;}

.divReportTop > div > .divChartTop {margin: 12px;}
.divReportTop canvas {
    background: hsla(0, 0%, 100%, 1);
    background: radial-gradient(circle, hsla(0, 0%, 100%, 1) 0%, hsla(0, 0%, 95%, 1) 100%);
    background: -moz-radial-gradient(circle, hsla(0, 0%, 100%, 1) 0%, hsla(0, 0%, 95%, 1) 100%);
    background: -webkit-radial-gradient(circle, hsla(0, 0%, 100%, 1) 0%, hsla(0, 0%, 95%, 1) 100%);
    border: solid 2px #aaa;
    border-radius: 3px;
}



.divHdr > span {font-size: 14px; font-weight: bold; display: inline-block; padding-left: 12px;}
/*
.divHdr.collapsable {cursor: pointer;}
.divHdr.collapsable + * {min-height: unset !important; max-height: 500px; transition: max-height 1s ease-in-out; overflow: hidden;}
.divHdr.collapsed + * {max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);  -webkit-transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);}
*/
/*.divHdr.collapsed + * {display: none !important;}
    .divHdr.collapsable .expandWidget {float: right; width: 24px; height: 24px;}
*/

.collapsable > .divHdr {cursor: pointer;}
.collapsable.collapseVert > .divHdr + * {min-height: unset !important; max-height: 1000px; transition: max-height 1s ease-in-out; overflow: hidden;}
.collapsable.collapseVert.collapsed {height: auto !important;}
.collapsable.collapseVert.collapsed > .divHdr + * {max-height: 0 !important; overflow: hidden; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);  -webkit-transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);}
.collapsable.collapseVert.collapsed.collapsing > .divHdr + * {transition: max-height 0s;}



.divHdr > .divToolbar > .divBtn {margin: 0 1px; background-size: 12px;}


.divPanel50 .tbl2Col {width: 100%;}
.divRptSect tr:first-child td.hdr {font-weight: bold; text-decoration: underline; padding-bottom: 4px;}
.divRptSect tr td:first-child {padding-right: 12px; width: 33%;}
.divPercent {text-align: right;}
.divDollar {text-align: right;}
.divPercent:after {content: "%";}
div.divDollar:before {content: "$";}
td.divDollar:before {content: "$";}
.divParenthesis:before {content: "(";}
.divParenthesis:after {content: ")";}
.divAsterisk:after {content: "*";}
.divParenthesis.divAsterisk:after {content: ")*";}

/* charts/graphs */
.divChartVal {background-color: #999;}
/* legend (bottom-hz) */
.divLegendTop {background-color: #fefefe; opacity: 0.8; display: block;}
.divLegend {padding: 0.7em; font-size: 0.8em; font-family: system-ui; display: flex; flex-direction: row; gap: 12px;}
.divLegend .divItem .divColor {display: inline-block; width: 0.9em; height: 0.9em; border-radius: 3px; margin-right: 4px;}
.divLegend + .divLegend {padding-top: 0;}
.divLegend > .divNmSpace {width: 6em; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 2px 6px; border-radius: 4px;}
.divLegend .divBtn {margin-left: auto; width: 20px; opacity: 0.1; cursor: pointer;}
.divLegend:hover .divBtn {opacity: 1.0; transition: opacity 1s ease-in-out;}
.divNmSpace.selectable {cursor: pointer; opacity: 0.5; background-color: #ccc; border: 1px solid #bbb;}
.divNmSpace.selectable.selected {opacity: 1; border: 1px solid #333;}
.divNmSpace ~ .divItem {opacity: 0.5;}
.divNmSpace.selected ~ .divItem {opacity: 1.0;}

.divLegendTop .divItem .divColor > div {display: none;}
.divLegendTop.numLbls.sumY .divItem .divColor {width: unset; height: unset; padding: 0.2em;}
.divLegendTop.numLbls.sumY .divItem .divColor > div {display: unset;}
.divLegendTop.fltrActv .divLegend {display: none;}
.divLegendTop.fltrActv .divLegend  {display: none;}
.divLegendTop.fltrActv .divLegend.selected  {display: flex;}

/* bar-chart */
.divChartBar {height: 88%; display: flex; justify-content: space-around; padding: 10px 10px 0 10px;}
.divChartAxis {height: 12%; border-top: 3px solid #000;}
.divChartBar > div {display: flex;}
.divChartBar.preValTrans .divChartVal {max-height: 0px !important;}
.divChartBar .divChartVal {align-self: flex-end; width: 32px; margin: 0 3px; max-height: 1000px; transition: max-height 2s ease-in-out;}
.divChartBar .divChartVal > .divCount {text-align: center; font-weight: bold; color: #333; padding-top: 5px; width: 100%;}
.divChartBar .divChartVal.small > .divCount {margin-top: -24px; color: #333;}
.divBarLabel.vert {margin-left: 8px; writing-mode: vertical-rl; transform: rotate(-180deg); padding-top: 2px;}
.divBarLabel.vert:first-child {padding-left: unset;}

/* point-chart */
.divChartPnt {height: 88%; display: flex; justify-content: space-around; padding: 10px 10px 0 10px;}
.divChartPnt > div {display: flex;}
.divChartPnt.preValTrans .divChartVal {top: 100% !important;}
.divChartPnt > div {position: relative; width: 36px;}
.divChartPnt > div > .divChartVal {position: absolute; border-radius: 50%; width: 32px; height: 32px; margin: 0 3px; top: 100%; transition: top 2s ease-in-out;}
.divChartPnt .divChartVal > .divCount {text-align: center; font-weight: bold; color: #333; padding-top: 5px; width: 100%;}


.divLine {position: relative; border: 1px solid #f00; height: 0; width: 75%; left: 12.5%; top: -136px;}



/* transitions */
@-webkit-keyframes fadeIn {from { opacity: 0; } to { opacity: 1; }}
@keyframes fadeIn {from { opacity: 0; } to { opacity: 1; }}
@-webkit-keyframes fadeIn50 {from { opacity: 0.5; } to { opacity: 1; }}
@keyframes fadeIn50 {from { opacity: 0.5; } to { opacity: 1; }}
@keyframes scaleYin {0% {transform: scaleY(0);} 100% {transform: scaleY(1);}}
@keyframes scaleYout {0% {transform: scaleY(1);} 100% {transform: scaleY(0);}}
@keyframes scaleXin {0% {transform: scaleX(0);} 100% {transform: scaleX(1);}}
@keyframes scaleXout {0% {transform: scaleX(1);} 100% {transform: scaleX(0);}}

tr.inserted {animation: scaleYin 1s ease;}





/* Scrape Dashboard */
body.scrape {background-image: url(/images/scraper050.png); background-size: 100%; background-color: #dde0e4; font-family: Calibri;}

.divBtn.exec {background-image: url(/images/exec.png);}
.divBtn.saveCfg {background-image: url(/images/disc.png);}
.divBtn.saveAsCfg {background-image: url(/images/discSaveAs.png);}
.divBtn.newCfg {background-image: url(/images/new.png);}
.divBtn.download {background-image: url(/images/download64.png);}

.divStat.domain {background-image: url(/images/domain.png);}
.divStat.urlCount {background-image: url(/images/sigma.png);}
.divStat.urlFltrCount {background-image: url(/images/filter.png);}
.divStat.linkProc {background-image: url(/images/domain.png);}
.divStat.dataProc {background-image: url(/images/data.png);}

.divUrlSpec .txtUrlTop {width: 45%; padding-left: 20px; background-image: url(/images/url.png);}
.divUrlSpec .txtUrlFltr {width: 120px; padding-left: 20px; background-image: url(/images/filter.png);}

.divPanel.divUrlSpec > .divToolbar .txtJsonFile {width: 50%;}

.divURLs {font-size: 13px;}
.divURLs tr {cursor: pointer;}
.divURLs tr:hover {background-color: #bbb;}
.divURLs tr.current {background-color: #abc;}

.divParse .divTab {height: 100%; display: none;}
.divParse .divTab.selected {display: block;}
.divParse .divTab[tab="request"] table {white-space: nowrap; font-size: 13px;}
.divParse .divTab[tab="tables"] table {white-space: nowrap; font-size: 13px;}

.divParse .tblResults {font-size: 11px; white-space: nowrap;}

.tblMappings {font-size: 12px; width: 100%; white-space: nowrap; border-collapse: collapse;}
.tblMappings tr.rowChecked {background-color: #ccc;}
.tblMappings tr.rowChecked td.editable {font-weight: bold;}
.tblMappings tr:hover {background-color: #cde !important;}
.tblMappings th {border-radius: 0; border: 1px solid #ccc;}
.tblMappings td {padding: 0 4px;}
.tblMappings td.editable {cursor: pointer;}
.tblMappings td.editable:hover {background-color: #eaa;}
.tblMappings td.editing {background-color: #eaa; border: 1px solid #e44;}
.tblMappings td.truncate div {max-width: 100px; overflow: hidden; cursor: pointer;}


/* obj Manager */
.divApp.appMgr .objFilter > div {
    height: 100%;
    > .fltrForm {height: calc(100% - 30px);}
}

/* JSON Editor */
body.json {background-image: url(/images/json025.png); background-size: 50%; background-color: #dde0e4; font-family: Calibri;}

.objTop {overflow: auto; clear: left;}
.objTree {overflow: auto;}
.objTree .objTop[objlevel] {padding-left: 20px;}
.objTree .objTop[objlevel="0"] {padding-left: 0;}
.objTop > div {float: left;}

.objTop.object.expanded > .objTop {display: block;}
.objTop.object > div.objTop {float: none; display: none;}

.objOption {cursor: pointer; width: 24px; height: 20px;}
.objTree .objTop > .objOption {cursor: default;}
.objTree .objTop.object > .objOption {background-image: url(/images/arrR.png);}
.objTree .objTop.object.expanded > .objOption {background-image: url(/images/arrD.png);}
.objBranch .objOption:hover {background-image: url(/images/mnuTop.png);}
.objBranch.fitHt {overflow: auto;}
.objBranch > table {white-space: nowrap;}
.objBranch > table > tbody > tr > td {padding: 1px 6px 1px 2px; max-width: 300px; overflow: hidden;}
.objBranch > table tr.objTop:hover {background-color: #d6d6d6;}
.objBranch > table tr.objTop > td:first-child:hover {cursor: pointer;}
.objBranch > table tr.objTop.selected {background-color: #ccc;}
.objBranch > table tr.objTop > td.selected {background-color: #bbb; background-image: none;}
.objBranch > table tr.objTop > td > div {min-height: 20px;}

.objName {font-weight: bold; width: 120px; overflow: hidden; padding: 2px;}
.objKeyCount {margin-left: 8px; padding: 3px; cursor: pointer; font-family: courier; line-height: 20px;}

td > div.objName {width: unset;}

.objTop > .objValue {margin-left: 8px; padding: 2px; min-height: 18px; max-height: 60px; overflow: hidden; white-space: pre; transition: max-height 1s ease; -webkit-transition: max-height 1s ease; border: 1px solid #bbb; border-radius: 3px; opacity: 0.7; background-color: #efefef;} 
.objTop .objValue:hover {max-height: 320px;}
.objTop .objValue.dirty {background-color: #ecc;}
.objTop:hover > .objName {background-color: #bbc;}
.objTop:hover > .objValue {background-color: #cbb;}
.objTop.selected > .objName {background-color: #a5daf9;}

.objTop[jtype="array"] > .objName {color: #831717;} 
.objTop[jtype="string"] > .objValue {color: #000;} 
.objTop[jtype="number"] > .objValue {color: #3c824e;} 
.objTop[jtype="boolean"] > .objValue {color: #0ea1f7;} 
.objTop[jtype="null"] > .objValue {background-color: #ecd5d8;} 
  
.objTree > .msg, .objBranch > .msg {padding: 12px; font-size: 18px; font-weight: bold; color: #722c2c; background-color: #eee; border: 2px solid #888;}

.objPath {padding: 3px 6px; background: #ddd; border: 1px solid #bbb;}
.objPath > span {cursor: pointer;}
.objPath > span:hover {background-color: #cdc;}
.objPath > span.array {color: #de5f5f;}

.divPanel.json > .divToolbar .txtJsonFile {width: 200px;}
.divPanel.json .txtAreaEdit {overflow: hidden;}

/* File Uploader */
body.fileUp {background-image: url(/images/upload.png); background-size: 30%; background-color: #dde0e4; background-blend-mode: soft-light; font-family: Calibri;}

/* Hash App */
body.hash {background-color: #dde0e4; font-family: Calibri;}

.divApp.hash textarea.divInput {width: 400px; height: 200px;} 
.divApp.hash div.divOutput {border: 1px solid #888; width: 400px; height: 200px; display: inline-block; overflow-y: scroll;} 


/* Server Vars */
.divContent.srvrVars table {font-size: 10pt; font-family: courier; background-color: #f5f0f0;}
.divContent.srvrVars table td {padding: 3px 8px; background-color: #d1e1f1; border: 1px solid #aaa; border-radius: 3px;}
.divContent.srvrVars table td:first-child {font-weight: bold; background-color: #cbcff7;}