/* custom header style */
.divApp {
    font-family: Calibri; margin: 0 2.5em;
      .appHeader {background-color: #c4c4c4; border-radius: 8px; box-shadow: #ddd 20px -12px 4px 17px; padding: 0.5em; margin-bottom: 0.5em; border: 2px solid #ddd; overflow: auto;
        width: unset !important; height: 4em; background-image: url(/img/btfLogo.png); background-size: 6em; background-position: 0.5em 0.5em; padding-left: 8em;
        > .divText {margin-left: 1.5em; font-size: 2em; color: #eee; filter: drop-shadow(2px 2px 2px #aaa); opacity: 0.8;}
        a {text-decoration: none; color: #333;}
        .divInfo.usrInfoHdr {cursor: pointer; padding-left: 2em; padding-right: 1em; background-image: url(/images/user32.png); background-position: 8px 3px;}
        .mnuHdr {
            &.txt {font-size: 180%; color: rgba(50,50,100,0.7); font-weight: bold;}
            &.img {min-width: 48px; background-size: 2em; background-position: center top;}
            &.img.txt {background-position: left top; padding-left: 2.5em;}
            &.txt .divMenu {font-size: 0.7em;  font-weight: normal;}
        }
        
        .divToolbar.btnBig {background-color: unset; border: unset; 
            div {max-height: unset;}
            .divBtn.img {width: 4em; height: 4em; background-size: contain; background-position: center;}}
            .divBtn:hover {background-color: #aaa;}
    }
    &.bokeh * {opacity: 0.9;}

    &[guiPanes="guiPanes1"] {margin: 0 18em;}
   
}



/* GL Layout */
body.glTools {
    font-family: Calibri; background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
    [tabGrp="glToolTabs"] {background-color: unset;}
    [tabGrp="tabsSubjWorking"] {display: none;}
    .divTabBtns .divTabBtn.selected {text-shadow: 0 0 #000;} 
    .divLeft {width: 25%;}
    .divList {padding: 2px; overflow: auto;
        > div {cursor: pointer;}
        > div.selected {background-color: #d4e9ce; text-shadow: 0px 0px 0.5px black;}
        &.withIcons > div {padding-left: 1.5em;}
    }
}

#glToolInfoTop {
    .glToolInfo {font-size: 0.7em; justify-content: center;
        .glToolNm {font-weight: bold; font-size: 2.5em;}
        .glToolIcons {display: flex; align-items: center; 
            > div {width: 2.5em; height: 2.5em; background-size: 2.5em;}
        }
    }
    .divToolbar {background: unset; border: unset;
        .divBtn {background-color: #ddd;}
    }
    .divTabBtns {
        margin-left: auto; background-color: unset;
        .divTabBtn.img.text {border-radius: 4px; border: 1px solid #555; font-size: 1.5em; background-size: 1.2em; padding-left: 1.6em;}
    }
}


/* GL Tool Design */

#glToolDesign { 

    .divCompliance {
        .divCompGrps {overflow-y: auto;
            .divCompGrp {
                &[status="compliant"] > .divHdr {background-color: #b1dbb1;}
                &[status="nonCompliant"] > .divHdr {background-color: #dbb1b1;}
                &[status="mixed"] > .divHdr {background-color: #d3dbb1;}
                .divRecLvl {text-transform: capitalize; margin: 0; padding: 0 0.2em; border: 0.5px solid gray; background-color: #eef; border-radius: 25%;}
                > .divHdr > .divToolbar {float: right; 
                    .divBtn {background-size: 16px;}
                }
            }
        }
        ul {padding-left: 2em; margin: 0.6em 0 0.3em 0;
            li {padding-left: 0.5em;
                &.glRec[status="compliant"] {list-style-type: '✔️'}
                &.glRec[status="nonCompliant"] {list-style-type: '❌'}
                &.glRec[status="pending"]  {opacity: 0.7;}
                .divToolbar {display: inline-table;
                    .divBtn:last-child {margin-right: 4px;}
                }
            }
            lix:hover .divGlLink {visibility: visible;}
        }
        .divGlLink {display: inline-flex; gap: 0.1em; margin: 0.2em 1.2em 0.5em; line-height: 1.5em; padding: 0.3em; border: 0.5px solid rgba(0,0,0,0); color: #1c4484; font-size: 0.8em; font-weight: bold; cursor: pointer;
            .divIcon {background-size: 1.5em; background-position: 0% 25%; width: 1.5em; height: 1.5em;}
            &:hover {background-color: #eee; border-radius: 10%; border: 0.5px solid #bbb;}
        }
        .divToolbar[tbname="tbCompDesign"] {margin-left: auto;}
        .divToolbar {display: flex; align-items: center;
            &.dispNone {display: none;}
        }
    }
    > .divPanel > .divHdr.large {font-size: 2.5em; padding-left: 1.2em; background-size: 1.1em; background-color: #9bd1fa;}
    .divGroup {
        > .divHdr {
            background-color: #cbd1e1; padding: 4px 12px; font-style: italic; font-size: 1.2em; border: 1px solid #aaa;
            > div.editable {display: inline-block;
                &:focus {background-color: #e3e3e3; padding-left: 0.4em; padding-right: 0.4em;}}
            }
        &.divDsGrp {background-image: none;} 
        > .divHdr {background-color: #cbd1e1;}
        .divHdr.assmnt {padding-left: 1.5em; background-position-x: 0.3em; background-color: #d4d4d4;}
        .divHdr.trtmnt {padding-left: 1.5em; background-position-x: 0.3em; background-color: #a7cbc2;}
    }
    .divInputGrps {
        overflow-y: auto; width: 100%;
        .divGroup .itm.dragover[draggable="true"] {background-color:#9bd1fa;}
        .itm.itmHilite td {background-color: #d8ebd8 !important;}
        .divInputGrp 
            .tblInputCfg {
                td {width: 1%; padding: 0.2em;} 
                td.varCd {font-style: italic; border-radius: 4px; background-color: #efefef;
                            min-width: 10em; padding: 0.1em 0.5em; font-weight: bold;} 
                td.prompt {width: unset; white-space: break-spaces;}
                td.reorder {cursor: pointer;}
                td.reorder {width: 1em;}}
        .divInput {
            margin: 0.1em; padding: 0.1em; background-color: #f0f0f0;
            &.itmHilite {background-color: #d8ebd8 !important;}
            .lblPrompt {width: 80%}
            .divButtonGrp {margin: 0; display: inline-block;
                .divBtnOption {padding: 4px 8px; float: none; display: inline-block;}}
            input {width: 6em;}
        }
    }
 
    .divToolbar[tbName="tbZoom"] {font-weight: bold; font-size: 1.2em;}
    .sidePanel > .divHdr {background: #a8bdce;}

    .divPathwayTree  {width: 100%; user-select: none; background: linear-gradient(135deg, #eaeaea, #c2c0c0);
        .divNode {margin-bottom: 1px; background-image: unset;
            &.master .divButton {background-color: #ddd; border-color: #2a3a41;}
            &.stage .divButton {background-color: #a5b5cc; border-color: #2a3a41;}
            &.assmnt .divButton {background-color: #d4d4d4; border-color: #191c1e; padding-left: 1.5em; background-image: url(/images/medRecord64.png);}
            &.trtmnt .divButton {background-color: #a7cbc2; border-color: #4d8f6b; padding-left: 1.5em; background-image: url(/images/treatment128.png);}
            &.toolkit .divButton {background-color: #71beda; border-color: #1995c9; opacity: 0.6; padding-left: 1.5em; background-image: url(/images/flow64.png);}
            &.current {
                background-size: 2em;
                background-position-x: calc(100% - 1em);
                background-color: #ccc;
                &.stage {background-image: url(/images/pathPntr1.png);}
                &.assmnt {background-image: url(/images/pathPntr3.png);}
                &.trtmnt {background-image: url(/images/pathPntr3.png);}
                &.toolkit {background-image: url(/images/pathPntr3.png);}
            }
            &.excluded {opacity: 0.3; display: none;}
            &.rizz .divButton {opacity: 1; filter: brightness(1.2);}
        }  
    }

    
    .divGlSecs {
        .divHdr {background-color: #bbb;}
        .divToolbar {
            .separator {width: 0; margin: 0 3px;}
            .divBtn.img {border: 1px solid #bbb; background-color: #ccc; background-size: 18px; width: 20px; height: 20px;}
            .divBtn.active {background-color: #ada;}
            > .divToolbar {padding: 0; margin-left: 0;
                + .divToolbar {padding-left: 16px;}
            }
            &[tbname="tbFltrGlStages"] .divBtn.selectable {background-color:#a5b5cc; border-color: #2a3a41;}
        }
        .divList {width: 100%; overflow-x: hidden;
            .divGlGroup {padding-left: 0; user-select: none;
                .divHdr {user-select: none; background-color: #ccc; padding: 0.2em 0.4em; font-size: 0.9em; border: 1px solid #999; cursor: pointer;}
                .divGlLinkX {padding-left: 1.5em;}
            }
            &.subjCntxtOn {.divGlLink[relevance] {background-color: #bcd9e8; display: none;}}
            &.subjCntxtOn.rel2 {.divGlLink[relevance="2"] {display: block;}}
            &.subjCntxtOn.rel1 {.divGlLink[relevance="1"] {display: block; opacity: 0.75;}}
            &.subjCntxtOn.rel0 {.divGlLink[relevance="0"] {display: block; opacity: 0.50; background-color: #f3cbcb;}}
            &.subjCntxtOn.relx {.divGlLink[relevance="-1"] {display: block; opacity: 0.50; background-color: #ccc;}}
            &.subjCntxtX {
                .divGlLink[relevance] {background-color: #bcd9e8;}
                .divGlLink[relevance="1"] {opacity: 0.75;}
                .divGlLink[relevance="0"] {opacity: 0.50; background-color: #f3cbcb;}
                .divGlLink[relevance="-1"] {opacity: 0.50; background-color: #ccc;}
            }
        }
    }

}

.divGlToolkit {background-color: #e6e7e9; font-family: system-ui;
            
    .divBlockTk {background-color: #71beda; border: 3px solid #1a90c2; border-radius: 0.3em;}
    .divBlockActn {background-color: #fcdfbd; border: 3px solid #ee9320;}
    .divBlockCnsdr {background-color: #fefefe; border: 3px solid #973572;}
    .divBlockDecsn {background-color: #d9d192; border: 3px solid #a7aa41;}
    .divBlockPitfall {
        > .icon {width: 4em; height: 4em; margin-bottom: 1em; background-image: url(/images/pitfall.png); background-size: 120%; background-position: center;}
        > .text {border-top: 3px solid #cac8cd; text-align: left;}
        &.iconLeft {display: flex; align-items: center; justify-content: flex-start;
            > .icon {display: inline-block; margin: 0;}
            > .text {display: inline-block; width: 80%; border-top: none; border-left: 3px solid #cac8cd; padding-left: 1em; margin-left: 1em;}
        }
    }

    .divTkOuter {padding: 2em;}
    .divBlockHdr {text-align: center; font-weight: bold; font-size: 2em; padding: 0.5em;}
    .divBlockTxt {padding: 1em; text-align: left;
        &.small {padding: 0.6em; width: fit-content; text-align: center;}
        span.divGlLink {text-decoration: underline; cursor: pointer;}
        [prop] {
            &:hover {cursor: pointer;}
            &.boolNull {background-color: #c0c0c0;
                &.true {font-weight: bold; background-color:#c8f6c8;}
                &.false {font-weight: bold; background-color:#f6c8c8;}
            }
            &.chkConfirm {padding-left: 2em; background-image: url(/images/unchecked.png); background-position-y: 0.3em;}
            &.chkConfirm.true {padding-left: 2em; background-image: url(/images/checked.png);}
            &.chkConfirm.false {padding-left: 2em; background-image: url(/images/xChecked.png);}
            
        }

        .xxx.divBlockTk[glsecid] {cursor: pointer;
            &:hover {text-shadow: 0px 0.5px 0.5px;}
        }

    }

    .divFlexColSpcr {margin-top: 2em; margin-bottom: 3em;}
    .flexRow {display: flex; flex-direction: row; gap: 1em; justify-content: space-evenly;
        &.flex2Col {flex-wrap: wrap;} > div {width: 40%}
    }
    .flexCol {display: flex; flex-direction: column; gap: 2em;
        > .divBlockTk.small {width: 75%;}
    }
    .blockCntr {width:fit-content; margin:auto;}
    ol > li > ol {list-style: lower-alpha;}
    ul, ol {padding-left: 1.5em;}
            li {text-align: left;}

    .divBlockTk[tkcode] {cursor: pointer;
        &:hover {text-shadow: 0px 0.5px 0.5px;}
        &.rizz {filter: brightness(1.2);}
     }
            
}

/* tab backgrounds */
.divTab[srccontent] > div {width: 100%;}
.divTab[srccontent="pathwayTree"] {background: linear-gradient(135deg, #eaeaea, #c2c0c0);}
.divTab[srccontent="subjDigests"] {background: linear-gradient(135deg, #eaeaea, #c2c0c0);}

/* subject panel */
.divTabBtns[tabgrp="tabsSubjPanel"] {display: none;}
.divToolbar[tbname="tbSubjPanel"] {border: none; padding: 0.3em 0.5em 0;}

/* subject panes */

#tabSubject {display: flex; flex-direction: column;
    > .divToolbar {min-height: 30px;}
    .divSubjProfile {flex-grow: 1; max-height: 25%;
        &:has(~ #divSubjWorking.dispNone) {max-height: unset;}
    }
    #divSubjWorking {flex-grow: 1; min-height: 0;
        > div {height: 100%;}
        .divDsGrp > .divHdr {position: relative;}
    }
}

.divSubjProfile {

    height: 25%; background-color: #ddd; gap: 0.3em; padding: 0.5em;
    &.dispNone {display: none;}

    .divSubjGrafx > .divIconX {width: 8em; height: 8em; margin: 0.2em; border: 2px solid #aaa; border-radius: 0.4em; 
        background-color: #eee;
        background-size: cover;
        background-image: url(/images/patient512.png); }
    
    .divSubjGrafx {gap: 0px;
        > .divIcon {width: 8em; height: 8em; margin: 0.2em; border: 2px solid #aaa; border-radius: 0.4em;
            position: relative; background-color: #bbb;
            .image {position: absolute; left: 0; top: 0; width: 100%; height: 100%;
                transition: opacity 0.5s ease-in-out; opacity: 0;
                background-color: #0000;
                background-size: cover;
                &.patient {background-image: url(/images/patient_mtbi.png); opacity: 1.0;}
                &.infnt {background-image: url(/images/patient_infnt.png);}
                &.adol {background-image: url(/images/patient_adol.png);}
                &.adlt {background-image: url(/images/patient_adlt.png);}
                &.snr {background-image: url(/images/patient_snr.png);}
                &.stbi {background-image: url(/images/patient_stbi.png);}
                &.ptbi {background-image: url(/images/patient_ptbi.png);}
                &.combat {background-image: url(/images/patient_combat.png);}
                &.conc {background-image: url(/images/patient_conc.png);}
            }
        }
        .divLabel {text-align: center; line-height: 0.8em; font-size: 0.8em;}
    }

    &[subjagerange="INFNT"] .image.infnt {opacity: 1;}
    &[subjagerange="CHILD"] .image.child {opacity: 1;}
    &[subjagerange="ADOL"] .image.adol {opacity: 1;}
    &[subjagerange="ADLT"] .image.adlt {opacity: 1;}
    &[subjagerange="SNR"] .image.snr {opacity: 1;}
    &[tbityp="STBI"] .image.stbi {opacity: 1;}
    &[tbityp="PTBI"] .image.ptbi {opacity: 1;}
    &[subjcombat="true"] .image.combat {opacity: 1;}
    &[concominj="true"] .image.conc {opacity: 1;}
    
    > .divLabel {text-align: center; font-size: 0.9em; background-color: #e9e9e9; border-radius: 3px; border: 2px solid #777; width: 90%; margin: auto;}
  
}

.divSubjDigests {width: 100%; gap: 0.3em; flex-basis: 100%; padding: 0.1em;
        > div {border: 1px solid #bbb;}
        .divDigest {background-image: none; background-color: #efefef66;
            .divLabel {cursor: pointer; display: flex; flex-direction: column; justify-content: center; padding: 0.2em; padding-left: 1.5em; flex: 0 0 6em; text-overflow: ellipsis; background-color: #ccc;}
            .divText {padding: 0.4em 0.2em;}
            .divLabel.progress + .divText {cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 0.5px; text-decoration-color: #888;}
        }
}

.divSubjInput {
    
    .divButtons {background-color: #ccc;
        .divButton {margin: 0.4em 0.2em; opacity: 0.6; border-width: 2px; font-size: 0.85em;
            &.selected {opacity: 1; border-color: #777;}
        }
    }
    .divBtnOption {background-image: none;}
    .divDataBody {background-color: #ddd; padding: 1em; display: block;
        .divInput {padding: 0.2em 1em;
            &:hover {box-shadow: 0 0 8px rgba(0,0,0,0.2);}
            &.active {box-shadow: 0 0 4px #000000;}
            &.lev1 .lblPrompt {padding-left: 0.5em; margin-right: -0.5em;}
            .lblPrompt + * {user-select: none;}
            input {font-size: 1.3em}
            .divBtnOption {padding: 8px 6px;}
            .divBtnOption.guidance {background-color: #afe4c8;}
            .divMenu > div.guidance {background-color: #afe4c8;}
            .divSlider div.guidance {position: absolute; left: 0%; width: 100%; height: 110%; background-color: rgba(175, 255, 175, 0.4);}
        }
    }

    .divGlToolkit 
        .divTkButtons {margin: 1em 0; overflow: auto;
        .divButton.disabled {opacity: 0.5;}
    }


}





.divSubjSmryXX  {background-color: #ddd;
    &[status="complete"] .divButton[cmd="glSubjResume"] {display: none;}
    .divHdr {background-color: #bbb; padding: 2px 0 2px 5px; font-size: 0.8em; min-height: 1em; text-transform: capitalize; position: relative;}
    .tblSummary {padding: 2em; border: none; border-spacing: 1em;}
    .divLbl {font-weight: bold;}
    .divButton {display: inline-block; margin-right: 1em;}
}

/* GL Content popup */
.divGlPanel {
    left: -3000px; padding: 2px; border: 2px solid #444; border-radius: 0.3em;
    box-shadow: 0 0 0 #aaa, -3px 3px 7px #aaa;
    background: #ececec; background: linear-gradient(135deg, #ececec, #ccc);
    .divBoxTitle {width: 368px; padding: 0.3em 1.5em; background-color: #9bbbe4; background-position-x: 0.2em; font-weight: bold; font-size: unset;}
    .divBoxBody {width: 400px; height: 300px; padding: 0.5em;}
    .divBody {height: calc(100% - 8px); gap: 0; align-items: stretch;
        .divGlSecHdr {margin: 0.5em 0; user-select: none;}
        .divGlSecToc {
            > div {cursor: pointer;}
            > div.selected {font-weight: bold;}
        }
        .divGlSecCont {background-color: #f8f8f8; border: 2px solid #aaa; border-radius: 0.5em; overflow: auto; flex: 1;
            > div {padding: 1em; font-size: 0.9em; overflow: auto; display: none; text-align: justify;
                &.selected {display: block;}
                p {margin-top: 0; text-align: justify;}
                > *:first-child {margin-block-start: 1em;}
                li {margin-bottom: 0.3em;}
                span.spanRec {font-size: 1.1em; font-weight: bold; font-style: italic; margin-bottom: 0.2em; display: inline-block;}
                span.spanRec ~ ul {margin: 1em 0;}
                sup {font-size: 0.7em;}
                sub {font-size: 0.5em;}
                ssref {vertical-align: super; font-size: 0.6em;}
                .divExcerpt {padding: 0.5em 1.5em; background-color: rgba(0, 0, 0, 0.05); border-radius: 0.5em;}
                &.visOff {max-height: 0; padding: 0;}
                &.hasTablesY h3 {text-align: center; margin: 1em 0;}
                .itmHilite {background-color: #d8ebd8;}
            }
            .divGlToolkit {font-size: 0.7em;}
            img {width: -webkit-fill-available;}
            
            ssref {vertical-align: super; font-size: 0.6em;}
        }   
    }
    .divArrowRight {display: none; position: absolute; border: 2em solid transparent; border-right-width: 0; border-left-color: #5555; left: 101%; top: calc(50% - 2em);}
    &.tethered {
        .divHdr {cursor: default; 
            .divCloseX {display: none;}
        }
        .divArrowRight {display: block;}
    }

}

#tabGlGuidance {
    .divGuidanceTk {display: none;
        .divTopToolkit {transform: scale(0.6); transform-origin: left top; width: 166.67%;}
    }
    &.toolkit {
        .divGuidanceTxt {display: none;}
        .divGuidanceTk {display: block;}
    }
    .divTopToolkit {
        .divBlockTxt {
            &.blkHilite {border-color: #229322; box-shadow: 0 0 0 #aaa, -3px 3px 7px #deffca;}
        }
    }        
}

/* Guidance panel */
.divGlGuidance  {overflow: auto; height: 100%;
    .divHdr {padding: 0.2em; padding-left: 1.5em; text-align: left;}
    .divCont {padding: 0.4em; font-size: 0.8em; max-width: 360px;}
    .divCntxtVars {
        span:first-child {width: 40%;}
        span:last-child {font-weight: bold;}
        span {display: inline-block; margin-right: 0.4em;}
    }
    .glRecLvl {font-weight: bold; color: #229322; font-size: 1.2em;}
    .glRecTxt {font-size: 1.2em;}
    [txtag].hilite {background-color: #cfc;}
    .glTxtEval {font-weight: bold; font-size: 1.8em; text-align: center; padding: 0.2em; margin: 0.2em 0; background-color: #ddd;}
  
    &.itmList {max-height: 360px;
        .itm {border: 1px solid #777; opacity: 0.7; background-color: #eee; padding: 0.3em; border-radius: 0.3em; margin-bottom: 0.5em; cursor: pointer;
            &.selected {opacity: 1.0; background-color: #f4f4f4;}
        }
        .divHdr {font-weight: bold; padding: 0.2em 1.5em; text-align: left;}
        .divCont {padding-top: 0;}
    }
}
    


/* other dialogs */

.divProjFileList {padding: 1em; background-color: #dde4df; border: 4px solid #4e5c4e; border-radius: 0.3em; min-width: 24em;
    .divAltTxt {font-style: italic; font-size: 0.8em;}
    div[cmd] {cursor: pointer; padding: 0.1em 0.3em; margin: 0.2em; border-radius: 0.2em; display: block; font-size: 1.2em; line-height: 1.5em;
        &:hover {background-color: #9bb493; font-weight: bold;}
        .divToolbar {float: right;}
    }
}
.divSubjList {max-height: 18em;
    div[cmd] {cursor: pointer; padding: 0.1em 0.3em; margin: 0.2em; border-radius: 0.2em; display: block; width: fit-content; font-size: 1.2em; line-height: 1.5em;
        &:hover {background-color: #9bb493; font-weight: bold;}
    }
}
.divExclusion {min-width: 12em; min-height: 6em; font-size: 1.2em; padding: 1em;}

.divTabBtns[tabgrp="glToolTabs"] {visibility: hidden;} /*  temp hide until we clean up guiCfg for app */
.divTbFloat {position: absolute; left: 62%; top: 3%; z-index: 9999; min-width: unset; min-height: unset; display: inline-block;
    .divBoxTitle {font-size: 0.6em; background-color: #aaa;}
    .divBtn:last-child {margin-right: 6px;}
}
.divToolbar > .divTabBtns {background-color: unset;}
.divToolbar .divBtn.filter.active {background-color: #ada;}
.dlgHidden {display: none;}

.divBoxModalBG .divBox {
    &.centerInit {width: fit-content; margin: auto; margin-top: 5%; position: unset; display: block;}
}

.divBox  {
    .divInput.btnList {clear: unset;
        .lblPrompt {float: none; display: block;}
        .divBtnOption {float: none; padding: 0.5em; text-align: left; padding-left: 2em; background-size: 1.5em;}
    }
    .divInput .divBtnOption {padding: 0.1em;}
    &.divTos {max-width: 70%; height: 70%;
       .divBoxBody {height: calc(100% - 100px);}
    }
    &.fltrFrm {position: absolute; border: 1.5px solid #888; background-color: #ccc; z-index: 9999;
        .divBoxTitle {display: none;}
        .divInput {display: flex; align-items: anchor-center; margin-bottom: 0.3em;
            .lblPrompt {width: 6em;}
            .divButtonGrp {background-color: #bbb;}
            .divBtnOption {padding: 0.3em; font-size: 0.8em; min-height: 1em; min-width: 1em; background-color: #ddd;}
        }
        .divBtnOption[optval="surgical"] {background-image: none;}    
    }
}


.divApp {
    &[status="running"] {
        div.dsgnMode {display: none !important;}
        div.editable, td.editable {-webkit-user-modify: read-only;}
    }
    &[status="stopped"] {
        div.runMode {display: none !important;}
        .divToolbar[tbName="tbGuiPanels"] {.separator {display: none;}}
    }
    &[toolid="0"] {
        .divBtn.runMode, .divBtn.dsgnMode, .divTbFloat {display: none;}
    }
    &[toolmode="player"] {
        .divToolbar[tbName="tbGlTool"] {
            .divBtn, .separator {display: none;}
            .divBtn.browse {display: inline-block;}
        }
        .divToolbar[tbName="tbGuiPanels"] {
            .separator, .divBtn.stop {display: none;}
        }
    }
}

/* GL Icons */
div {
    &.build {background-image: url(/images/build128.png);}
    &.design {background-image: url(/images/design128.png);}
    &.config {background-image: url(/images/config128.png);}

    &.glTxt {background-image: url(/images/txtBook128.png);}
    &.glLogic {background-image: url(/images/compLogc128.png);}
    &.glActions {background-image: url(/images/actions128.png);}
    &.glCompliance {background-image: url(/images/criteria128.png);}

    &.glPathway {background-image: url(/images/pathway128.png);}
    &.glNorthStar {background-image: url(/images/northStar64.png);}
    &.glLibrary {background-image: url(/images/library128.png);}
    &.glStage {background-image: url(/images/glStage128.png);}
    &.glKeywords {background-image: url(/images/keywords128.png);}
    &.glTreatment {background-image: url(/images/medRecord64.png);}
    &.glLevel {background-image: url(/images/levels128.png);}

    &.glTest {background-image: url(/images/powerBtn128.png);}
    &.glFltr {background-image: url(/images/filterList64.png);}

    &.btfClick {background-image: url(/images/btfClick.gif);}
    &.btfLearn {background-image: url(/images/btfLearn.gif);}

    &.trtmnt {background-image: url(/images/medRecord64.png);}
    &.assmnt {background-image: url(/images/treatment128.png);}

    &.progress {background-image: url(/images/progress128.png);}
    &.headExam {background-image: url(/images/headExam128.png);}
    &.ctScan {background-image: url(/images/ctScan128.png);}
    &.bloodwork {background-image: url(/images/bloodwork128.png);}
    &.monitoring {background-image: url(/images/monitoring128.png);}
    &.brainInj {background-image: url(/images/brainInjury64.png);}
    &.respiration {background-image: url(/images/lungs128.png);}
    &.futility {background-image: url(/images/thumbsDown128.png);}
    &.trauma {background-image: url(/images/trauma128.png);}
    &.threshold {background-image: url(/images/threshold128.png);}

    &.MTBI, &[glbook="inhospital"], &[optval="MTBI"] {background-image: url(/images/mtbi.png);}
    &.STBI, &[glbook="prehospital"], &[optval="STBI"] {background-image: url(/images/stbi.png);}
    &.PTBI, &[glbook="surgical"], &[optval="PTBI"] {background-image: url(/images/ptbi.png);}

    &.inhospital, &[glbook="inhospital"], &[optval="inhospital"] {background-image: url(/images/inHospital256.gif);}
    &.prehospital, &[glbook="prehospital"], &[optval="prehospital"] {background-image: url(/images/ambulance256.gif);}
    &.surgical, &[glbook="surgical"], &[optval="surgical"] {background-image: url(/images/surgeon256.gif);}
    &.pediatric, &[glbook="pediatric"], &[optval="pediatric"] {background-image: url(/images/pediatric256.gif);}
    &.combat-related, &[glbook="combat-related"], &[optval="combat-related"] {background-image: url(/images/combat256.gif);}
    &.penetrating, &[glbook="penetrating"], &[optval="penetrating"] {background-image: url(/images/medivac256.png);}

    &.divBtn.patient {background-image: url(/images/patient64.png);}
    &.divBtn[relevance="rel2"] {background-image: url(/images/blueHi32.png);}
    &.divBtn[relevance="rel1"] {background-image: url(/images/blueLo32.png);}
    &.divBtn[relevance="rel0"] {background-image: url(/images/redLo32.png);}
    &.divBtn[relevance="relx"] {background-image: url(/images/circleGray32.png);}

    &.divTabBtn.pitfall { background-image: url(/images/pitfall.png); }

    .divBtn.browseSubj {background-image: url(/images/subjSelect.png)}

    &.guiPanes1 {background-image: url(/images/guiPanes1.png);}
    &.guiPanes2l {background-image: url(/images/guiPanes2l.png);}
    &.guiPanes2r {background-image: url(/images/guiPanes2r.png);}
    &.guiPanes3 {background-image: url(/images/guiPanes3.png);}

    &.collapseAll {background-image: url(/images/collapseAll64.png);}
    &.expandAll {background-image: url(/images/expandAll64.png);}
}


/* generic style */

.divPanel.fitHt > .divInfo {min-width: 280px;}  /* avoid word wrap at start-up */
.divPanel > .divHdr {position: relative;}

.divHdr {
    &:has(~ .collapsable) {cursor: pointer;}
    &.hdrSlim {background-color: #bbb; padding: 2px 0 2px 5px; font-size: 0.8em; min-height: 1em; position: relative;}
}

div.collapsable {transition: all 0 ease-in; overflow: auto;
    &.collapsed {height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;}
}


.elHideVert {min-height: unset !important; max-height: 1000px; transition: max-height 1s ease-in-out; overflow: hidden;}
.elHideVert.hidden {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);}

.divBubble {margin-left: 1em; margin-top: 0.5em; border: 2px solid #120049; 
            border-radius: 0.5em; overflow: hidden; box-shadow: 0 0 0 #aaa, -3px 3px 7px #aaa;}

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


/* htm tree  */

.divHtmTree {
    > div {display: flex; align-items: center;
        > .divSymbol {font-size: 3em; line-height: 0.8em;}
        > .divButton {padding: 4px 6px; border-width: 2px;}
        &.selected > .divButton {font-weight: bold; box-shadow: 4px 4px 4px #000;}
        &.expandable > .divSymbol {cursor: pointer;}
    }
    > div.collapsed {display: none;}
    > div.dispNone {display: none;}
    > div[nodelev="1"] {margin-left: 1em;}
    > div[nodelev="2"] {margin-left: 2em;}
    > div[nodelev="3"] {margin-left: 3em;}
}



/* json viewer */
.dlgJsonVw .divBoxBody {width: 520px; height: 320px; display: flex; flex-direction: column;}

.objTree {
    height: -webkit-fill-available;
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0.5em;
    border-radius: 3px;
    border: 1px solid #aaa;
}
.glTools div.editable, td.editable {-webkit-user-modify: read-write;}
.objTree table {clear: both; width: 100%;}
.objTree table th {padding: 4px 8px; border-radius: 2px; background-color: #bcb;}
.objTree table td {padding: 0 12px 0 4px;}
.objTree table tbody tr:hover {background-color: #e4e8e4;}

.divPanel > .divHdr~.divInfo {border: 1px solid #bbb; text-align: justify; padding: 0.2em; font-size: 0.7em; background-color: #e3e9ed;}

.objTree {display: flex; flex-direction: column;}
.objTree .objTop2.object > .objOption {background-image: url(/images/arrR.png);}
.objTree .objTop2.object.expanded > .objOption {background-image: url(/images/arrD.png);}
.objTop2 {display: flex; flex-direction: row; flex-wrap: wrap;}
.objTop2[objlevel] {padding-left: 1.2em;}
.objTop2[objlevel="0"] {padding-left: 0;}
.objValue2.primitive {flex-grow: 1; margin-left: 0.5em; padding: 2px; min-height: 1.2em; 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;} 
.objValue2.object {display: flex; flex-direction: column; flex-basis: 100%;}
.objOption.expand {background-image: url(/images/arrR.png);}
.objOption.expand.expanded {background-image: url(/images/arrD.png);}
.objOption.expand ~ .objValue2 {max-height: 0; overflow: hidden; transition: max-height 1s ease; -webkit-transition: max-height 1s ease;}
.objOption.expand.expanded ~ .objValue2 {max-height: 1200px;}

.divBox .divBoxBody .objTop2 .objValue2 {width: unset;}
.objTop2 .objValue2.editable {background-color: #f4f4f4;}
.objTop2 .objValue2.editable:focus {background-color: #fff; opacity: 1;}



body.rpt .divPrint {position: fixed; top: 3%; left: calc(100% - 5em); background-image: url(/images/print64.png); background-size: 100%;
                        width: 3em; height: 3em; background-color: rgba(255, 255, 255, 0.2); border-radius: 10px; cursor: pointer;}