/*
* === MAJOR SECTION HEADING ===
*/

/*
* - Minor Section Heading -
*/

body {
    background-color: #c2c2c2;
    overflow: hidden;
/*  font-family: 'Arial'; */
    font-size: 12px;
    margin: 0;
}

.dialog {
    background-color: #f1f1f1;
    border: 1px solid #d3d3d3;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden; /* needed to inherit above radii (???) */
    position: absolute;
/*  resize: both;  NO!! */
/*  pointer-events: none; NO!! */
    font-family: "Tahoma", sans-serif;
    font-size: 12px;
    outline: none;
}

.dialog-header {
    height: 30px;
    background-color: white;
    display: flex;
    flex-direction: row;
}

.hidden {
    display: none;
}

.dialog-handle {
    width: 100%;
    height: 14px;
    margin-top: 3px;
    padding: 5px;
    margin-bottom: 0px;
    background-color: white;
/*  text-align: center; */
    user-select: none;
}

.dialog-body {
/*  padding: 10px;*/
/*  display: grid;*/
/*  place-items: center;*/
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
/*  resize: both; */
/*  overflow: auto; */
/*  height: 100% - 30px; */
/*  top:30px; */
/*  bottom:0px; */
/*  height: 100%; */
}

/*.dialog-body div {
    margin: 5px;
}*/

svg.minmax {
    width: 45px;
    height: 30px;
    background-color: white;
    margin-bottom: 5%;
}

svg.icon {
    width: 30px;
    height: 30px;
    background-color: white;
    margin-bottom: 5%;
}

svg.icon.Application path {
    fill:limegreen;
}

.Maximise svg:hover {
    background-color: #e1e1e1;
    transition: all 0.3s ease;
}

.Close svg:hover {
    background-color: red;
/*  color: #fff; */
/*  color: white;*/
    stroke: white;
    transition: all 0.3s ease;
}

/*.Close svg path:hover {
    stroke: white;
}*/

svg.resize {
    /* (the tiny bottom right "/." handle for resizing) */
    width: 8px;
    height: 8px;
    position: absolute;
    bottom: 0;
    right: 0;
    pointer-events: none;
    stroke-width: 0.5; 
}

svg.restore path {
    d: path("M13,12 L13,10 L20,10 L20,17 L18,17  M10,13 L10,20 L17,20 L17,13 Z");
}

svg path {
    fill: none;
    stroke: black;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 0.5; 
    transition: 0.2s;
}

a:link { color: blue; }
a:visited { color: purple; }

@media screen and (max-width: 640px) {
    .win {
        top: 0;
        left: 0;
/*      width: 100%;    */ /* interferes with debugging! */
    }

/* ??
:root { font-size: calc(0.6em + 1vw); }
*/

}

.frame {
    margin: 5px;
/*  height: 15px;*/
/*  background-color: green;*/
    border-style: solid;
/* nah: IupFrame has exactly one child (plus a legend) */
/*  display: grid; */
/*  display: inline-grid; */
/* Taken out for Audio frequency generator 26/5/22: */
/*  display: flex;*/
/*  display: inline-flex; */
    padding: 0;
/*  width: 100%;*/
}


.label {
/*  margin: 5px;*/
/*removed 24/5/22 for virtunome*/
/*  height: 15px;*/
/*  background-color: yellow; */
/* added 29/10/21: */
/*  display: contents; */
}

.labelhsep {
    margin: 3px;
    border: 0;
    height: 1px;
    display: flex;      /* (anything but "contents" seems to be ok)*/
    background: #dedede;
}

.datepick {
/*  min-width: fit-content; -- not supported by firefox! */
    min-width: min-content;
}

.list {
/*  margin: 5px;*/
/*  height: 15px; */
/*  background-color: yellow;*/
}

.multibox {
    display: flex;
    flex-wrap: wrap;
}

.text {
    margin: 5px;
/*  height: 15px;*/
}

input:invalid {
    border: 3px solid red;
}

.expandh {
/*  background-color: green;*/
/*  flex-grow: 1; */
}

.button {
    margin: 5px;
    height: 22px;
/*  background-color: yellow; */
}

.hbox {
    display: flex;
    flex-direction: row;
/*  place-items: center;*/
/* width removed for Musical_scale 21/5/22 */
/* removed for the benefit of rc/sleep 26/5/22: */
/*  width: 100%;*/
    height: 100%;
/*  background-color: pink;*/
    justify-content: space-evenly;
/* removed 1/8/22, for d/r/Speech.exw */
/*  gap: 10px; */
    margin: 10px;
/* 18/5/22 replicated from vbox, untested: */
/*  overflow: auto;*/
}

.vbox {
    display: flex;
    flex-direction: column;
/*  display: grid;*/
/*  place-items: center;*/
    width: 100%;
/* removed for the benefit of rc/sleep 26/5/22: */
/*  height: 100%;*/
/*  background-color: pink;*/
    justify-content: space-evenly;
/*  justify-content: space-around;*/
/*  gap: 10px;*/
/*  margin: 10px;*/
/* 18/5/22 this fixed a bug in Morse_code.exw, whereby input overran after the initial 2*$maxWindow() calls in IupShow: */
/* (24/5/22 virtunome does not want this...) */
/* (Neither does Audio frequency generator 26/5/22... */
    overflow: auto;
}

.fill {
    width: 100%;
    height: 100%;
/*  background-color: orange;*/
}

/* menus */

.menuheader {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
.menubar {
    list-style:none;
    margin:0;
    padding:0;
    font-family:"Tahoma", sans-serif;
    font-size:12px;
    user-select:none;
}
.mush {
    text-decoration: underline;
}
/* (==topmenu) */
.menubar > li {
    position: relative;
    float: left;
}
.menubar > li > span {
    padding:2px 8px;
    border:solid 1px #ffffff;
    display:block; 
}
.menubar > li > span:hover,
.menubar > li > span:focus {
    background-color:#e6f7ff;
    border:solid 1px #ccefff;
    outline: none;
}
.submenu {
    position:absolute;
    margin:0;
    padding:2px;
    min-width:114px;
    list-style:none;
    background:#f2f2f2;
    border:solid 1px #dfdfdf;
    box-shadow:5px 5px 2px -3px #8f8f8f;
    opacity:0;
    visibility:hidden;
}
.separator {
    margin:3px;
    margin-left:28px;
    border:0;
    height:1px;
    background:#dedede; 
}
.nestmenu > span:after {
    content:"\203A";
    text-align:right;
    float:right;
}
.nestmenu:hover,
.menuitem:hover,
.nestmenu.open {
    background-color:#99ccff;
}
.menuitem span,
.nestmenu span {
    padding:4px 5px 4px 20px;
    cursor:pointer;
    display:block; 
}
span > .malt {
    padding: 0;
    display: contents;
}
.nestmenu i,
.menuitem i {
    display:inline-block;
    margin-right:13px;
}
.nestmenu .submenu {
    margin-left:113px;
    top:-2px;
}
/* DEV renamed as mopen[?] */
.open > ul {
    opacity: 1;
    visibility: visible;
}
.menubar li {
    position: relative;
}
#mobbtn {
    background-color: #333;
    color: #fff;
    cursor: pointer;
    display: none;
    line-height: 20px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 200;
}
@media screen and (max-width: 140px) {
  #mobbtn {
    display: block;
    padding: 0px 5px;
  }
  #menu {
    width: 220px;
    position: fixed;
    right: -220px;
    top: 0;
  }
  .mobile {
    max-height: 100%;
    overflow: auto;
  }
  #menu.mobile ul li, 
  #menu.mobile ul li ul li {
    display: block;
    margin: 0;
    width: auto !important;
  }
  #menu.mobile ul li a, 
  #menu.mobile ul li ul li a {
    background-color: #333;
    color: #fff;
  }
  #menu.mobile ul li a:hover, 
  #menu.mobile ul li ul li a:hover {
    background-color: #333;
  }
  #menu.mobile ul li ul {
    position: relative;
  }
  #menu.mobile ul li ul li {
    padding-left: 20px;
    width: 80px;
  }
  .topmenu.open {
    background-color: #333 !important;
    color: #fff !important;
  }
  #menu.mobile li.topmenu ul.open li:last-child {
    padding-bottom: 0;
  }
}

/*<split>*/
/*
.split {
//  flex-direction: column;
//  height: 100vh;
}
*/
.split .drag-x {
    background: #444c5c;
    cursor: col-resize;
    border-style: dotted;
    margin: 2px;
    border: 1px;
    width: 0px;
    background: darkgray;
    border-style: dashed;
    flex: 0 0 0px;
    color: white;
}
.split .drag-y {
    cursor: row-resize;
    margin: 2px;
    border: 2px;
    background: white;
    color: darkgray;
    border-style: none;
    border-top-style: dotted;
    flex: 0 0 1px;
}
/*</split>*/

/*<tables>*/

.container {
    position: relative;  /* (needed for the resizers) */
}

table {
/*  width:600px;*/
/*  height: 257px; */ /* dev visible*23+27 */
/*  overflow: auto;*/
/*  overflow: hidden;*/
/*  min-height: 100px;*/
    display: flex;
    flex-direction: column;
    user-select: none;
}
thead {
    border: 1px solid #A0A0A0;
}
tr {
    display: flex;
    flex: 1 1 0;
    line-height: 25px;
}
th {
    text-align: left;
    background-color: #E4E4E4;
    border-right: 1px solid #E0E0E0;
    border-color: #A0A0A0;
    line-height: 25px;
    font-weight: normal;
    flex: 1 1 0;
    flex-direction: row;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 5px;
    white-space: nowrap;
}
.thlast {
    flex: 0 0 0;
/*  width:15px;*/
/*  width:19px;*/
    padding: 0 7px;
    border-right: 1px solid #E4E4E4;
}
tbody {
    overflow: auto;
/*  overflow-y: scroll;*/
    border: 1px solid #A0A0A0;
    border-top: none;
    flex: 1 1 0;
    outline: none;
}
tbody tr {
    border-bottom: 1px solid #E0E0E0;
    background-color: #FFF;
    line-height: 22px;
}
td {
    border-right: 1px solid #E0E0E0;
    flex: 1 1 0;
    height: 22px;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 5px;
    white-space: nowrap;
}
.column_resizer {
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
/*  height: 100%;*/
    height: 26px;
    background: transparent;
    cursor: col-resize;
}
thead tr [data-sorted=A]:after {
/*  content: '\A\25bc';*/
    content: '\2193';
/*  content: '\21D3';*/
/*  content: '\21E3';*/
/*  content: '\21E9';*/
/*  content: '\FE3D';*/
}
thead tr [data-sorted=D]:after {
 /* content: '\25b2';*/
    content: '\2191';
/*  content: '\21D1';*/
/*  content: '\21E1';*/
/*  content: '\21E7';*/
/*  content: '\FE3E';*/
}
.sortable:after {
    position: sticky;
    top: 3px;
    left: 100%;
/*  content: '\25b2\A\25bc';*/
    white-space: pre;
    line-height: normal;
    margin-left: -12px;
    margin-left: 4px;
}
tbody tr:not(.trActive):hover {
    background-color: #e6f7ff
}
.trActive {
    background-color: #cceeff;
}
/*</tables>*/

/*<tabs>*/
.tabcontainer {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}

.tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.tab {
    background: #eee;
    color: #666;
    padding: 0 1em;
    border: 1px solid #ccc;
    margin-right: 1px;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    top: 1px;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.tab.active {
    background: #fff;
    color: #111;
    position: relative;
    z-index: 2;
}

.panels {
    border: 1px solid #ccc;
    overflow: auto;
    border-bottom: none;
}

.panel {
    display: none;
}

.panel.active {
    display: block;
}
/*</tabs>*/

/*<trees>*/
.tree {
    padding: 5pt;
    border: inset 2px lightGray;
/*  width: 230px;*/
/*  height: 175px;*/
    width: calc(100% - 17px);
    height: 100%;
    overflow: auto;
    margin: 0;
    margin-top: 22px;
/*  font-family: "Tahoma", sans-serif;*/
/*  font-size: 12px;*/
    background-color: whitesmoke;
}

.tree ul.subtree, .tree li.leaf {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
}

.tree li.leaf {
    background-position: -90px 0;
    background-repeat: repeat-y;
    min-height: 18px;
    line-height: 18px;
}

.tree li.leaf:before {
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    background-position: -36px 0;
}

.tree li.leaf li.leaf {
    margin-left: 18px;
}

.tree li.leaf:last-child {
    background-image: none;
}

.tree li.leaf.closed ul.subtree {   
    display: none;
}

.tree li.leaf.showExpander > span.treeToggle {
    display: block;
    width: 18px;
    height: 18px;
    background-position: -72px 0;
    position: absolute;
    left: 0;
    top: 0;
}

.tree li.leaf.showExpander.closed > span.treeToggle {
    background-position: -54px 0;
}

.tree li.leaf.hasChildren > a.leafLabel:before {
/* open folder */
    content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv\
    8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAADRSURBVDhPpZPNEYMgEIVXJ3dqwZuFWAGUBRVYSG5SCxUku8uiohJJ8s0gP857vgXsYowv+IPCYJ6VjB\
    LTFGVUZzUgsTFlGO+7WxM22MQ+ra4YNrkiGz/4WcWjscPepKkQggWlFODHoZe1GyjZvm10zkHzKQyDAa1HTPDEsecEXMJ1/UjAplMfIImWhd+sfC5Bx\
    NxX6Gk3006XG8XsEmgYAcuVFFva6wQk3IkztAdH2KBIkYUHcYZSWCsTpLiJrWQDOoXiX6DL8Q0ng19ovIk1AN7PfmScxjWsvwAAAABJRU5ErkJgggo=');
}

.tree li.leaf.hasChildren.closed > a.leafLabel:before {
/*  closed floder */
    content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARn\
    QU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAACwSURBVDhPpZMxEoQgDEXjzhZ2nEXvYmUJ1/IEHsQOyj0H1Za7BBLHMIuC\
    +2aYxOD/SRE67/0H/kAYrKuiLGEMQLinr988KUbxPL+h719UseEYUEqdmsQJUDyOmkoSaxfKJNOUTHcDrbFjDRac20LDJU72oCqBJhfH\
    hXAgMyjAIoxDSpk6AxSxuGmCvHPzBHnnWxOciBFpwD9grBAjl4tUgvdgfwu4sq0Ig7vU7UERgC+BFVnsERmXXgAAAABJRU5ErkJgggo=');
}

.tree a.leafLabel:before {
/*  dot */
    content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAA\
    ARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAACnSURBVDhP7ZOxDcMgEEUv2QMQNYPQsgoMAquwDDUynsATJLoLJy\
    s2uEiKNHmS9Q9L/8k+y7dt2x7wBfeeH/N7wXQHKSVKrTUl4pzr085QgGUuKqVASgmtNViW5SQ5vUIIgbLWSoklLKMEZTlnus9c7uA\
    oGXESlFJgXdd+epfgxWdm+gQjybGMDJdorQVjDM1CCErGe9+nF9PPiBKERUiMsU87/38B4AnAn1R7xy9XDQAAAABJRU5ErkJgggo=');
    margin-right: 5px;
    position: relative;
    top: 2px;
}

.tree a.leafLabel {
    line-height: 18px;
    display: block;
    vertical-align: top;
    cursor: pointer;
    max-width: 100%;
    margin-left: 18px;
    padding: 0 2px;
}

.tree li.leaf a.leafLabel:hover {
    background-color: #e6f7ff;
}

.tree li.leaf.selected > a.leafLabel {
    background-color: #ccefff;
}

.tree li.leaf, 
.tree li.leaf::before, 
.tree li.leaf.hasChildren > span.treeToggle {
    background-image: url('data:image/gif;base64,R0lGODlhbAASAHAAACH5BAEAAAcALAAAAABsABIAggAAAB\
    0dGyYmJn9/f4uLiv///6mpqQAAAAO1eLrc/jDKSau9GIe8Nc9gKI5kOXYXaqkVa75wbAlDbQ9CRN91TrmP3YBg8wVtx\
    F6rMig4n4VBpAl1SmHU6vWRhW5NWcPz2+iOl5TwGWK2oidqN7sqf8WjUzoeWzAYBn57XH1+gWQQG4kHQE1+gGIEi4OF\
    gZFADJdlT2J1Dm2CYJtrg3SHI3emCp+pIah5pW8Sq69aMbNzsDBCN0YOu0Uxv0oQwjixMsjJysvMMpnN0NHS0zCZCQA7');
}
