/** © 1995-2026 rsaccess GmbH */
.btnResize:hover,
.bar .tab.resize, .bar .tab.btnResize
{cursor: nwse-resize;}
.btnResize.horizontal:hover, .horizontal .btnResize:hover,
.bar .tab.resize.horizontal, .bar .tab.resize.horizontal.btnResize
{cursor: ew-resize;}
.btnResize.vertical:hover, .vertical .btnResize:hover,
.bar .tab.resize.vertical, .bar .tab.resize.vertical.btnResize
{cursor: ns-resize;}
.btnResize.horizontal.vertical:hover, .horizontal.vertical .btnResize:hover
{cursor: nwse-resize;}

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

.formFrame.code {overflow: auto; font-family: "Courier New", "Monospace", sans-serif; font-weight: 700; background: #202020; color: #c0c0c0; width: 100%; height: 100%; padding: 0; margin: 0;}
.formFrame.code .form.doc {flex-wrap: nowrap; background: #202020; color: #c0c0c0;}

.formFrame.code {counter-reset: rowCount 0;}
.formFrame.code div.rowHead::before {counter-increment: rowCount; content: counter(rowCount);}

.formFrame.code .formBoard {padding: 4px;}
.formFrame.code .code {display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; height: 100%;}
.formFrame.code .code .codeRow {display: flex; flex-direction: row; flex-wrap: nowrap; flex: 1 1 auto; width: 100%; height: 100%; padding: 0; margin: 0;}
.formFrame.code .rowHead {border-right: 1px solid #c0c0c0; width: 3rem; margin: 0;}
.formFrame.code .rowHead-3 .rowHead { width: 3rem;}
.formFrame.code .rowHead-4 .rowHead { width: 4rem;}
.formFrame.code .rowHead-5 .rowHead { width: 5rem;}
.formFrame.code .form.doc.noSpaceWrap .rowBody {white-space: nowrap;}
.formFrame.code .rowBody {width: 100%; padding-left: 4px; margin: 0;}
.formFrame.code .rowBody button.toggle {background: #202020; color: yellow; border: none; width: 2em; height: 2em;}
.formFrame.code .rowBody button.toggle:after {content: "\20";}
/*.formFrame.code .rowBody button.toggle:after {content: "\25bc";}*/
.formFrame.code .rowBody button.toggle.toggleDown:after {content: "\25b2";}
.formFrame.code .rowBody button.toggle.toggleRight:after {content: "\25b6";}
.formFrame.code span.op {color: orange;}
.formFrame.code span.fun {color: #c0c0c0;}
.formFrame.code span.tab {border-left: 1px solid #a0a0a0; padding: .4em 0; margin: 0;}

.formFrame .form.doc.ctr >div {display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%;}

.header, .footer {display: flex; flex-direction: column;}
.header.stick {position: sticky; top: 0; z-index: 1000;}
.footer.stick {position: fixed; left: 0; bottom: 0; width: 100%;}
.header.top {overflow: hidden; position: fixed; top: 0; width: 100%; z-index: 1100;}
.header.bottom {position: fixed; top: 0; width: 100%; z-index: 1100;}
.header .logo {display: flex; padding: 0; margin: auto 0.5em;}
.header .title {display: flex; align-content: center; padding: 0; margin: 0;}

.headerBtn {display: flex; flex-direction: column;}
.headerBtn ul {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-end; list-style-type: none; padding: 0; margin: 0;}
.headerBtn ul li {display: flex; justify-content: flex-end; flex-wrap: wrap; text-decoration: none; color: black; padding: 0; margin: 0;}
.headerBtn ul li a {text-decoration: none; color: #FFFFFF;  border-color: #f0f0f0; border-width: 2px; border-style: solid;}
.headerBtn ul li a:not(.disabled):hover {text-decoration: none; background-color: #eee0f0; opacity: .70; border-color: #00ff00;}
.headerBtn ul li a.active {background-color: #f0f0f0; opacity: .50;}
.headerBtn ul li a.disabled {text-decoration: none; background-color: #A0A0A0; opacity: .50;}
.headerBtn ul li a button {text-decoration: none; color: #FFFFFF; background-color: #634a4a; padding: 2px; margin: 2px;}
.headerBtn ul li a button.active {background-color: #f0f0f0; opacity: .50;}
.headerBtn ul li a button:not(.active):hover {background-color: #eee0f0; opacity: .70; border-color: #00ff00;}
.headerBtn ul li a button.disabled {background-color: #A0A0A0; opacity: .50;}
.headerBtn ul li a button img {border-color: #f0f0f0; border-width: 2px; border-style: solid; padding: 2px; margin: 2px;}

@media screen and (max-width: 40rem) {
  .header {justify-content: center;}
}

.nav.top, .nav.side {display: flex; flex-direction: column; flex: 1 0 auto;  width: 100%;  margin: 0;}
.nav {text-decoration: none;}
.nav.edit .gridPickColor .gridItem a {padding: 0; margin: 0;}
.nav.top ul, .nav.side ul {display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; margin: 0;}
.nav.top >ul {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; flex: 1 0 auto; width: 100%; white-space: nowrap; margin: 0;}
.nav.seg >ul {display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 0; margin: 0; width: 100%;}
.nav.seg >ul >li {display: flex; flex-direction: row; flex-wrap: nowrap; white-space: nowrap; margin: 0;}
.nav.seg >ul >li >ul {display: flex; flex-direction: column; flex: 1 0 auto; margin: 0;}
.nav.seg >ul >li >ul >li {display: flex; flex-direction: row; flex-wrap: nowrap; white-space: nowrap; padding: 1px; margin: 0;}
.nav.seg >ul >li >ul >li button {height: 2rem;}
body.navPosSide .main .l1 {position: relative;}
.nav.side {padding: 0; margin: 0;}
.nav.side >ul {padding-left: 0;}
.nav.side.btnCommand >ul >li:first-child {position: absolute;}
.nav.side.btnCommand >ul >li:nth-child(2) {padding-top: 3em;}
.nav.top:not(.edit) ul li, .nav.side:not(.edit) ul li {display: flex; flex: 0 0 auto; flex-direction: column; list-style-type: none; justify-content: start;}
.nav.edit ul li {list-style-type: none;}

.nav.top ul li i, .nav.top >ul >li >a, .nav.top >ul >li >a button, .nav.side ul li i, .nav.top >ul >li >a, .nav.top >ul >li >a button {
  margin-top: auto; margin-bottom: auto;}
.nav.top >ul >li >a {width: fit-content;}
.nav.side ul li {width: 100%;}
.nav.top ul li a, .nav.side ul li a
{display: flex; flex-direction: row; flex-wrap: nowrap; flex: 0 0 auto; text-decoration: none; white-space: normal; overflow: hidden; word-break: break-word;}
.nav.top ul li a:not(.linkToggle) button:not(.btnCommand), .nav.side ul li a:not(.linkToggle) button:not(.btnCommand) {visibility: hidden;}
.nav div.btnCommand, .nav.navBtnCommand, .nav.navBtnCommand >div {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: start; width: 100%;}
.nav.side div.btnCommand {justify-content: space-around;}
.nav.top a.btnCommand button.btnNav, .nav.side a.btnCommand button.btnNav {display: none;}
.nav.side.btnEnd ul li a, .nav.btnEnd ul li a.linkNav-2 {justify-content: space-between;}

/* Why: navTop and navEdit are stacked inside a2; keep the top editor row below navTop and stretched full width. */
.a2 {display: flex; flex-direction: column; width: 100%;}
.nav.top.btnEnd >ul >li >a {justify-content: flex-start;}
.nav.side.btnEnd >ul >li ul li a {justify-content: space-between;}
.nav.top.btnEnd ul li a button.linkToggle, .nav.side.btnEnd ul li a button.linkToggle {order: 1;}
.nav.top:not(.btnEnd) ul li a button.navToggle, .nav.side:not(.btnEnd) ul li a button.navToggle {order: -1;}

.nav.top ul li ul:not(.toggleMenuFlag), .nav.side ul li ul:not(.toggleMenuFlag) {display: none;}
.nav.top >ul >li ul.toggleMenuFlag, .nav.side >ul >li ul.toggleMenuFlag {display: flex; flex-direction: column; flex: 1 0 auto; justify-content: space-between;}
.nav.top >ul >li ul li, .nav.side >ul >li ul li {justify-content: space-between; width: 100%;}
.nav.top >ul >li {position: relative; z-index: 1000; align-items: flex-start;}
.nav.top >ul >li:has(a button.toggleBtnFlag) {z-index: 1200;}
.nav.top >ul >li >ul {position: absolute;}

@media screen and (max-width: 36rem) {
  .nav.top {display: block;}
  .nav.top ul, .nav.top ul li, .nav.side ul, .nav.top ul li {margin: 0;}
  .nav.top ul.group li > a, .nav.side ul.group li > a {margin-left: 0; margin-right: 0; border-radius: 0;}
  .nav.top ul.group > li:first-child a, .nav.side ul.group > li:first-child a {margin-left: 1rem; border-top-left-radius: .5rem; border-bottom-left-radius: .5rem;}
  .nav.top ul.group > li:last-child a, .nav.side ul.group > li:last-child a {margin-right: 1rem; border-top-right-radius: .5rem; border-bottom-right-radius: .5rem;}
}

.nav.top ul li >ul, .nav.side ul li >ul {display: none; flex: 1 0 auto;}
.nav.top ul li ul li:not(.flex), .nav.side ul li ul li:not(.flex) {display: flex; flex: 1 0 auto; flex-direction: column; border-style: none;}
.nav.top ul li ul li ul:not(.toggleMenuFlag) {display: none; flex: 1 0 auto;}
.nav .navToggle {content: "";}
.nav.btnChar-161 .navToggle:after {content: "\25bc";}
.nav.btnChar-161 .navToggle.toggleBtnFlag:after {content: "\25b2";}
.nav.btnChar-162 .navToggle:after {content: "\25bd";}
.nav.btnChar-162 .navToggle.toggleBtnFlag:after {content: "\25b3";}
.nav.btnChar-163 .navToggle:after {content: "\2228";}
.nav.btnChar-163 .navToggle.toggleBtnFlag:after {content: "\2227";}
.nav.btnChar-164 .navToggle:after {content: "+";}
.nav.btnChar-164 .navToggle.toggleBtnFlag:after {content: "–";}
.nav.btnChar-165 .navToggle:empty:before {content: "≡";}
.nav.btnChar-165 .navToggle.toggleBtnFlag:after {content: "▲"; display: inline-block; font-weight: bold; font-size: 0.6em;}
.nav.btnChar-165 .navToggle:not(.toggleBtnFlag):after { content: "▼"; display: inline-block; font-weight: bold; font-size: 0.6em;}

.navAside.toc .searchRequest {display: flex; flex-direction: row; overflow: hidden; width: 100%; height: fit-content; margin: 0;}
.navAside.toc .searchRequest .searchInput {width: 100%; margin: .25em; padding: 2px;}
.navAside.toc .searchRequest .btnClear {padding: 0 4px;}
.navAside.toc .searchRequest .btnSearch {padding: 0 2px;}
.navAside.toc .searchRequest .btnResize {padding: 2px 5px;}
.navAside.toc .searchRequest button {margin: .25em 2px;}

.ctrNav.toc {display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; height: 100%; padding: 0; margin: 0;}
.ctrNav.toc .search {display: flex; flex: 1 1 auto; flex-direction: row; flex-wrap: nowrap; max-height: 2.5em; justify-content: space-between; padding: 2px; margin: auto 2px;}
.ctrNav.toc .search >input {padding: 2px; margin: auto 0;}
.ctrNav.toc .search >button {margin: auto 0;}
.ctrNav.toc .search >button.btnClear {font-weight: 500; font-size: 120%; padding: 0 .3em;}
.ctrNav.toc .search >button.btnSearch {font-weight: 500; font-size: 120%; padding: 0 .1em;}
.ctrNav.toc ul.navLevel-1 {padding: 0;}

.wrapper:not(.hidden) {display: flex; flex: 0 0 auto; flex-direction: column; overflow: hidden;
  width: 100vw; max-width: 100vw; min-width: 100vw; height: 100vh; max-height: 100vh; min-height: 100vh;
  position: relative; padding: 0; margin: 0;}
.a, .b, .y, .z {display: flex; flex: 0 0 auto; flex-direction: column; width: 100%; padding: 0; margin: 0;}
.scrollArea {display: flex; flex: 0 1 auto; flex-direction: column; overflow-y: hidden; width: 100%; height: 100%;}
.main {display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: nowrap; width: 100%; height: 100%; padding: 0; margin: 0;}
.main >div {display: flex; flex: 0 1 auto; flex-direction: column; width: 100%; height: 100%; padding: 0; margin: 0;}
.main .l .doc, .main .r .doc {display: flex; flex: 0 1 auto; flex-direction: column; overflow: auto; padding: 0; margin: 0;}
.main .winRows >div {display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: nowrap; padding: 0; margin: 0;}
.main .winRows .views {display: flex; flex: 0 1 auto; flex-direction: column; width: 100%; height: 100%; padding: 0; margin:0;}
.main .winRows .tocView {overflow: auto;}
.main .winRows .bar .tab {display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: nowrap;}
.main .winRows .bar .tab >div {display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: nowrap; white-space: nowrap;}
.main .winRows .bar .tab .tabText {cursor: default;}
.main .winRows .views {display: flex; flex: 0 1 auto; flex-direction: column; width: 100%; padding: 0; margin: 0;}
.main .winRows .views >div {display: flex; flex: 0 1 auto; flex-direction: row; width: 100%; height: 100%; padding: 0; margin: 0;}
.main .winRows .views >div >div {display: flex; flex: 0 1 auto; flex-direction: column; width: 100%; height: 100%; padding: 0; margin: 0;}

.main .winRows .win .bar {display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: nowrap;}
.main .winRows .win .labelBtn {font-size: 100%;}

@media screen and (max-width: 36rem) {
  article {padding: .3rem;}
  div.formFrame {padding: 0; margin: 0;}
  div.formBoard {border: none; padding: 0; margin: 0;}
  div blockquote {padding: 0.25rem; margin: 0.25rem; margin-block: 0.25rem;}

  .flex.row:not(.noWrap, .nonWrap) {flex-direction: column; flex-wrap: unset;}
  .flex.row.noWrap {flex-wrap: wrap;}
  .flex.row img {width: calc(100% - .5rem);}
  .flex.row .img.vertical img {max-width: 16rem;margin-left: 25vw;}
  .flex.row .img .text {padding: 1rem; margin: .5rem;}
  .flex.row .text {padding: 1rem; margin: .5rem}
  .flex.column figure {padding: 0; margin-top: 1rem;}

  div img {margin-left: auto; margin-right: auto;}
  div.img {margin-left: auto; margin-right: 0;}
  div.img.logo2 {margin-left: auto; margin-right: 0;}
  div.logoTitle {margin-left: auto; margin-right: auto;}

  h1, t-1, .s-1 {padding: .25em; margin: .3em 0 0 0;}
  h2, t-2, .s-2 {padding: .25em; margin: .3em 0 0 0;}
  h3, t-3, .s-3 {padding: .25em; margin: .3em 0 0 0;}
  h4, t-4, .s-4 {padding: .25em; margin: .3em 0 0 0;}
  h5, t-5, .s-5 {padding: .25em; margin: .2em 0 0 0;}
  h6, t-6, .s-6 {padding: .25em; margin: .2em 0 0 0;}
  t-7, .s-7 {padding: .25em; margin: .2em 0 0 0;}
  t-8, .s-8 {padding: .25em; margin: .2em 0 0 0;}

  .main >div, .main .cts, .main .html {width: 100%;}
  .main .cts {width: 100%;}
}

.flex.row, .flex.row.leftToRight {display: flex; flex-direction: row; flex: 1 1 auto; margin: 0;}
.flex.row.rightToLeft {flex-direction: row-reverse;}
.flex.row.noWrap, .flex.row.nonWrap {flex-direction: row; flex-wrap: nowrap; overflow-x: auto;}
.flex.column {display: flex; flex: 1 1 auto; flex-direction: column; flex-wrap: nowrap; margin: 0;}

@media screen and (max-width: 48rem) {
  article {padding: .3rem;}
  div.formFrame {padding: 0; margin: 0;}
  div blockquote {padding: 0.25rem; margin: 0.25rem; margin-block: 0.25rem;}
  div.formBoard {border: none; padding: 0; margin: 0;}

  div img {margin-left: auto; margin-right: auto;}
  div.img {margin-left: auto; margin-right: auto;}

  .flex.row.noWrap {flex-wrap: wrap;}

  h1, t-1, .s-1 {padding: .3em; margin: .5em 0 0 0;}
  h2, t-2, .s-2 {padding: .3em; margin: .5em 0 0 0;}
  h3, t-3, .s-3 {padding: .3em; margin: .5em 0 0 0;}
  h4, t-4, .s-4 {padding: .3em; margin: .5em 0 0 0;}
  h5, t-5, .s-5 {padding: .3em; margin: .3em 0 0 0;}
  h6, t-6, .s-6 {padding: .3em; margin: .3em 0 0 0;}
  t-7, .s-7 {padding: .3em; margin: .3em 0 0 0;}
  t-8, .s-8 {padding: .3em; margin: .3em 0 0 0;}

  .winRows >div >div {padding: 0;}
  .nav.top {padding: 0 0 1em 0;}
  .nav.side {padding: .1rem;}
}

@media screen and (min-width: 48rem) {
  .flex.column {display: flex; flex-direction: column; flex: 0 1 auto;}
  .flex.columns {display: flex; flex-direction: row; flex-wrap: wrap; overflow: hidden;}
  .flex.flex {display: flex !important;}
  .flex.card, .flex.classNames {display: flex; flex-direction: row; flex-wrap: wrap; flex: 0 1 auto;}
  .flex.card >article, .flex.card >form {display: flex; flex-direction: column; flex: 1 1 auto; overflow: hidden;}
  .flex.card >article img {width: 100%;}
  .flex.card >article img.vertical {width: 25%; padding: 1rem;}
  .flex.column {display: flex; flex-direction: column; flex: 1 1 auto;}
  .flex.column >article,
  .flex.column >form {display: flex; flex-direction: row; flex: 0 1 auto; max-width: 120rem;}
  .flex.column.textLeft >article figure {order: 1;}
  .flex.column >article figure, .flex.column >form figure {padding: 1em;}
  .flex.column >article >div, .flex.column >form >div {display: flex; flex-direction: column; flex: 1 1 150%;}
}

@media screen and (min-width: 48rem) and (max-width: 56rem) {
  div.formBoard {padding: 0;}
  div blockquote {padding: 0.25rem; margin: 1rem;}

  div img {margin-left: auto; margin-right: auto;}
  div.img {margin-left: auto; margin-right: auto;}
  div.img.logo2 {margin-left: auto;}

  div p {padding: 0.25rem; margin: 0;}

  .flex {padding-right: 0.25rem; padding-left: 0.25rem; margin: 0.25rem;}
  .flex.row.noWrap {flex-wrap: wrap;}
}

@media screen and (min-width: 70rem) {
  .flex.column2.card >article, .flex.column3.card >article, .flex.column4.card >article,
  .flex.column5.card >article {width: calc(50% - 1 * (1rem + 1rem)); max-width: calc(50% - 1 * (1rem + 1rem));}
  .flex.column2.card >article img, .flex.column3.card >article img, .flex.column4.card >article img, .flex.column5.card >article img {width: 100%;}
}

@media screen and (min-width: 105rem) {
  .flex.column3.card >article, .flex.col4.card >article, .flex.column5.card >article {width: calc(33.33% - (1 * 1rem + 1rem)); max-width: calc(33.33% - (1 * 1rem + 1rem));}
  .flex.column3.card >article img, .flex.column4.card >article img, .flex.column5.card >article img {width: 100%;}
}

@media screen and (min-width: 140rem) {
  .flex.column4.card >article, .flex.column5.card >article {width: calc(25% - 1 * (1rem + 1rem)); max-width: calc(25% - 1 * (1rem + 1rem));}
  .flex.column4.card >article img, .flex.column5.card >article img {width: 100%;}
}

@media screen and (min-width: 175rem) {
  .flex.column5.card >article {width: calc(20% - 1 * (1rem + 1rem)); max-width: calc(20% - 1 * (1rem + 1rem));}
  .flex.column5.card >article img {width: 100%;}
}

.flex.alignItems.baseline {align-items: baseline;}
.flex.alignItems.center {align-items: center;}
.flex.alignItems.end {align-items: flex-end;}
.flex.alignItems.start {align-items: flex-start;}
.flex.alignItems.stretch {align-items: stretch;}

.flex.alignSelf.auto {align-self: auto;}
.flex.alignSelf.baseline {align-self: baseline;}
.flex.alignSelf.center {align-self: center;}
.flex.alignSelf.end {align-self: flex-end;}
.flex.alignSelf.start {align-self: flex-start;}
.flex.alignSelf.stretch {align-self: stretch;}

.flex.justify.center {justify-content: center;}
.flex.justify.end {justify-content: flex-end;}
.flex.justify.start {justify-content: flex-start;}
.flex.justify.around {justify-content: space-around;}
.flex.justify.between {justify-content: space-between;}
.flex.justify.evenly {justify-content: space-evenly;}

.flex.grow.on {flex-grow: 1;}
.flex.grow.off {flex-grow: 0;}
.flex.shrink.on {flex-shrink: 1;}
.flex.shrink.off {flex-shrink: 0;}

.flex.pad-0 {padding: 0;}

.formFrame {display: flex; flex: 0 1 auto; flex-direction: column; width: 100%; height: 100%; margin: 0;}
.formBoard {display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; overflow: auto; width: 100%; margin: 0;}

.form {display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; margin: 0;}
.form.grow {flex: 1 1 auto;}
.form .html {display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; overflow: auto; resize: none;}
.form .formBlock, .form .formBlock.leftToRight {display: flex; flex-direction: row; flex-wrap: wrap;}
.form .formBlock.rightToLeft {flex-direction: row-reverse;}
.form .checkList {display: flex; flex-wrap: wrap; justify-content: flex-start;}
.form .checkList li {display: flex; flex-direction: row; flex-wrap: nowrap; list-style: none;}
.form .color {max-width: 3em;}
.form .btnGroup, .form .btnGroup >div {display: flex; flex-direction: row; flex-wrap: wrap;}
.form button {cursor: pointer;}
.form .column >div {display: flex; flex-direction: column; width: 100%;}
.form .detForm {display: flex; flex: 1 1 auto; flex-direction: column; overflow: auto; margin: 0;}
.form input {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.form input[type="checkbox"] {flex-grow: 0;}
.form input[type="range"] {-webkit-appearance: none; appearance: none; width: 100%; outline: none; margin-top: auto; margin-bottom: auto; cursor: pointer;}
.form input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; cursor: pointer;}
.form input[type="range"]::-webkit-slider-thumb {cursor: pointer;}
.form input[type="range"]::-moz-range-thumb {cursor: pointer;}

.form .formHeader {display: flex; flex: 0 0 auto; justify-content: space-between; margin: 0;}
.form .formHeader >div, .form .formHeader >div >div {display: flex; flex-direction: row; flex-wrap: nowrap; padding: 0; margin: 0;}
.form .formHeader >div >h1 {background: none;}
.form .row {display: flex; flex: 1 1 auto; flex-direction: column; flex-wrap: unset;}
.form .row >div {display: flex; flex-direction: column; width: 100%;}
.form .row.wrap >div {flex-direction: row; flex-wrap: wrap;}
.form .row.noWrap >div {flex-direction: row; flex-wrap: nowrap;}
.form .row.wrap >div >label:first-child {width: 100%; margin-bottom: .2em;}
.form .slider {margin: .5em;}
.form textarea {width: 100%; height: 100%;}
.form .vSpace {height: 1em;}

.form .row.wrap.label-1 >div >label, .form .row.noWrap.label-1 >div >label {min-width: 1rem; max-width: 1rem;}
.form .row.wrap.label-2 >div >label, .form .row.noWrap.label-2 >div >label {min-width: 2rem; max-width: 2rem;}
.form .row.wrap.label-3 >div >label, .form .row.noWrap.label-3 >div >label {min-width: 3rem; max-width: 3rem;}
.form .row.wrap.label-4 >div >label, .form .row.noWrap.label-4 >div >label {min-width: 4rem; max-width: 4rem;}
.form .row.wrap.label-5 >div >label, .form .row.noWrap.label-5 >div >label {min-width: 5rem; max-width: 5rem;}
.form .row.wrap.label-6 >div >label, .form .row.noWrap.label-6 >div >label {min-width: 6rem; max-width: 6rem;}
.form .row.wrap.label-7 >div >label, .form .row.noWrap.label-7 >div >label {min-width: 7rem; max-width: 7rem;}
.form .row.wrap.label-8 >div >label, .form .row.noWrap.label-8 >div >label {min-width: 8rem; max-width: 8rem;}
.form .row.wrap.label-9 >div >label, .form .row.noWrap.label-9 >div >label {min-width: 9rem; max-width: 9rem;}
.form .row.wrap.label-10 >div >label, .form .row.noWrap.label-10 >div >label {min-width: 10rem; max-width: 10rem;}
.form .row.wrap.label-11 >div >label, .form .row.noWrap.label-11 >div >label {min-width: 11rem; max-width: 11rem;}
.form .row.wrap.label-12 >div >label, .form .row.noWrap.label-12 >div >label {min-width: 12rem; max-width: 12rem;}
.form .row.wrap.label-13 >div >label, .form .row.noWrap.label-13 >div >label {min-width: 13rem; max-width: 13rem;}
.form .row.wrap.label-14 >div >label, .form .row.noWrap.label-14 >div >label {min-width: 14rem; max-width: 14rem;}
.form .row.wrap.label-15 >div >label, .form .row.noWrap.label-15 >div >label {min-width: 15rem; max-width: 15rem;}
.form .row.wrap.label-16 >div >label, .form .row.noWrap.label-16 >div >label {min-width: 16rem; max-width: 16rem;}
.form .row.wrap.label-17 >div >label, .form .row.noWrap.label-17 >div >label {min-width: 17rem; max-width: 17rem;}
.form .row.wrap.label-18 >div >label, .form .row.noWrap.label-18 >div >label {min-width: 18rem; max-width: 18rem;}
.form .row.wrap.label-19 >div >label, .form .row.noWrap.label-19 >div >label {min-width: 19rem; max-width: 19rem;}
.form .row.wrap.label-20 >div >label, .form .row.noWrap.label-20 >div >label {min-width: 20rem; max-width: 20rem;}
.form .row.wrap.label-21 >div >label, .form .row.noWrap.label-21 >div >label {min-width: 21rem; max-width: 21rem;}
.form .row.wrap.label-22 >div >label, .form .row.noWrap.label-22 >div >label {min-width: 22rem; max-width: 22rem;}
.form .row.wrap.label-23 >div >label, .form .row.noWrap.label-23 >div >label {min-width: 23rem; max-width: 23rem;}
.form .row.wrap.label-24 >div >label, .form .row.noWrap.label-24 >div >label {min-width: 24rem; max-width: 24rem;}
.form .row.wrap.label-25 >div >label, .form .row.noWrap.label-25 >div >label {min-width: 25rem; max-width: 25rem;}
.form .row.wrap.label-26 >div >label, .form .row.noWrap.label-26 >div >label {min-width: 26rem; max-width: 26rem;}
.form .row.wrap.label-27 >div >label, .form .row.noWrap.label-27 >div >label {min-width: 27rem; max-width: 27rem;}
.form .row.wrap.label-28 >div >label, .form .row.noWrap.label-28 >div >label {min-width: 28rem; max-width: 28rem;}
.form .row.wrap.label-29 >div >label, .form .row.noWrap.label-29 >div >label {min-width: 29rem; max-width: 29rem;}
.form .row.wrap.label-30 >div >label, .form .row.noWrap.label-30 >div >label {min-width: 30rem; max-width: 30rem;}
.form .row.wrap.label-31 >div >label, .form .row.noWrap.label-31 >div >label {min-width: 31rem; max-width: 31rem;}
.form .row.wrap.label-32 >div >label, .form .row.noWrap.label-32 >div >label {min-width: 32rem; max-width: 32rem;}
.form .row.wrap.label-33 >div >label, .form .row.noWrap.label-33 >div >label {min-width: 33rem; max-width: 33rem;}
.form .row.wrap.label-34 >div >label, .form .row.noWrap.label-34 >div >label {min-width: 34rem; max-width: 34rem;}
.form .row.wrap.label-35 >div >label, .form .row.noWrap.label-35 >div >label {min-width: 35rem; max-width: 35rem;}
.form .row.wrap.label-36 >div >label, .form .row.noWrap.label-36 >div >label {min-width: 36rem; max-width: 36rem;}
.form .row.wrap.label-37 >div >label, .form .row.noWrap.label-37 >div >label {min-width: 37rem; max-width: 37rem;}
.form .row.wrap.label-38 >div >label, .form .row.noWrap.label-38 >div >label {min-width: 38rem; max-width: 38rem;}
.form .row.wrap.label-39 >div >label, .form .row.noWrap.label-39 >div >label {min-width: 39rem; max-width: 39rem;}
.form .row.wrap.label-40 >div >label, .form .row.noWrap.label-40 >div >label {min-width: 40rem; max-width: 40rem;}
.form .row.wrap.label-41 >div >label, .form .row.noWrap.label-41 >div >label {min-width: 41rem; max-width: 41rem;}
.form .row.wrap.label-42 >div >label, .form .row.noWrap.label-42 >div >label {min-width: 42rem; max-width: 42rem;}
.form .row.wrap.label-43 >div >label, .form .row.noWrap.label-43 >div >label {min-width: 43rem; max-width: 43rem;}
.form .row.wrap.label-44 >div >label, .form .row.noWrap.label-44 >div >label {min-width: 44rem; max-width: 44rem;}
.form .row.wrap.label-45 >div >label, .form .row.noWrap.label-45 >div >label {min-width: 45rem; max-width: 45rem;}
.form .row.wrap.label-46 >div >label, .form .row.noWrap.label-46 >div >label {min-width: 46rem; max-width: 46rem;}
.form .row.wrap.label-47 >div >label, .form .row.noWrap.label-47 >div >label {min-width: 47rem; max-width: 47rem;}
.form .row.wrap.label-48 >div >label, .form .row.noWrap.label-48 >div >label {min-width: 48rem; max-width: 48rem;}
.form .row.wrap.label-49 >div >label, .form .row.noWrap.label-49 >div >label {min-width: 49rem; max-width: 49rem;}
.form .row.wrap.label-50 >div >label, .form .row.noWrap.label-50 >div >label {min-width: 50rem; max-width: 50rem;}
.form .row.wrap.label-55 >div >label, .form .row.noWrap.label-55 >div >label {min-width: 55rem; max-width: 55rem;}
.form .row.wrap.label-60 >div >label, .form .row.noWrap.label-60 >div >label {min-width: 60rem; max-width: 60rem;}
.form .row.wrap.label-65 >div >label, .form .row.noWrap.label-65 >div >label {min-width: 65rem; max-width: 65rem;}
.form .row.wrap.label-70 >div >label, .form .row.noWrap.label-70 >div >label {min-width: 70rem; max-width: 70rem;}
.form .row.wrap.label-75 >div >label, .form .row.noWrap.label-75 >div >label {min-width: 75rem; max-width: 75rem;}
.form .row.wrap.label-80 >div >label, .form .row.noWrap.label-80 >div >label {min-width: 80rem; max-width: 80rem;}
.form .row.wrap.label-85 >div >label, .form .row.noWrap.label-85 >div >label {min-width: 85rem; max-width: 85rem;}
.form .row.wrap.label-90 >div >label, .form .row.noWrap.label-90 >div >label {min-width: 90rem; max-width: 90rem;}
.form .row.wrap.label-95 >div >label, .form .row.noWrap.label-95 >div >label {min-width: 95rem; max-width: 95rem;}
.form .row.wrap.label-100 >div >label, .form .row.noWrap.label-100 >div >label {min-width: 100rem; max-width: 100rem;}

@media screen and (min-width: 50rem) {
  .form.widthMaxM {width: 100%; max-width: 50rem; margin-left: auto; margin-right: auto;}
  .form.widthMaxN {width: 100%; max-width: 70rem; margin-left: auto; margin-right: auto;}
  .form.widthMaxL {width: 100%; max-width: 105rem; margin-left: auto; margin-right: auto;}
  .form.widthMaxXl {width: 100%; max-width: 140rem; margin-left: auto; margin-right: auto;}
  .form.widthMaxXxl {width: 100%; max-width: 175rem; margin-left: auto; margin-right: auto;}
}

.tableForm input[type='color'] {width: 100%; height: 100%;}

.tableForm .progress.trip >div >div:nth-child(3n+1),
.tableForm .progress.trip >div >div:nth-child(3n+3) {background: #ff5e00;}
.tableForm .progress.trip >div >div:nth-child(3n+2) {background: #c4ff00;}
.tableForm .progress.trip >div >div:nth-child(6n+1),
.tableForm .progress.trip >div >div:nth-child(6n+2),
.tableForm .progress.trip >div >div:nth-child(6n+3) {top: .2em;}
.tableForm .progress.trip >div >div:nth-child(6n+4),
.tableForm .progress.trip >div >div:nth-child(6n+5),
.tableForm .progress.trip >div >div:nth-child(6n+6) {top: 1em;}

.tableForm .range >div {margin-top: auto; margin-bottom: auto;}

.tableForm {display: flex; flex: 0 1 auto; flex-direction: column; overflow: auto; width: 100%; margin: 0;}
.tableForm.noFrame {border: none; outline-style: none; outline-width: 0; padding: 0;}
.tableForm.noBorder .tableFormBody, .tableForm.noBorder .tableFormHeader, .tableForm.noBorder .tableFormHead >div, .tableForm.noBorder .tableFormRow >div
{border-style: none; border-width: 0; outline-style: none; outline-width: 0;}
.tableForm.noBorder table {border-collapse: collapse !important; border: none !important; outline: none !important;}
.tableForm.noBorder table tr, .tableForm.noBorder table th, .tableForm.noBorder table td {display: flex; border:none !important; outline: none !important;}

/*.tableForm .tableFormHeader{display: flex; flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; user-select: none;}*/
/*.tableForm .tableFormHeader .tableFormHeaderTitle, .tableForm .tableFormHeader .tableFormHeaderText {overflow: hidden; margin: auto 0;}*/
/*.tableForm .tableFormHeader .tableFormHeaderText.table {padding: .5em;}*/
/*.tableForm .tableFormHeader .tableFormHeaderBtn {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end;}*/
/*.tableForm .tableFormHead, .tableForm .tableFormSel, .tableForm .tableFormRow, .tableForm .tableFormFoot {display: flex; flex: 0 1 auto;flex-wrap: nowrap; flex-direction: row;}*/
.tableForm .formHeader{display: flex; flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; user-select: none;}
.tableForm .formHeader .tableFormHeaderTitle, .tableForm .tableFormHeader .tableFormHeaderText {overflow: hidden; margin: auto 0;}
.tableForm .formHeader .tableFormHeaderText.table {padding: .5em;}
.tableForm .formHeader .tableFormHeaderBtn {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end;}
.tableForm .formHead, .tableForm .tableFormSel, .tableForm .tableFormRow, .tableForm .tableFormFoot {display: flex; flex: 0 1 auto;flex-wrap: nowrap; flex-direction: row;}

.tableForm .tableFormFoot input[type="range"] {width: 100%;}

/*.tableForm .tableFormBodyHead {position: sticky; top: 0; z-index: 100; width: 100%;}*/
.tableForm .tableFormBody .tableHead {position: sticky; top: 0; z-index: 100; width: 100%;}

.tableForm .tableFormBodyRow {display: flex; flex-direction: column; z-index: 0;}
.tableForm .tableFormHead, .tableForm .tableFormRow, .tableForm .tableFormSel
{display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: nowrap; z-index: 100; opacity: 1; width: 100%; padding: 0; margin: 0;}
.tableForm .tableFormHead >div, .tableForm .tableFormHead >div >div, .tableForm .tableFormSel >div, .tableForm .tableFormSel >div >div, .tableForm .tableFormRow >div, .tableForm .tableFormRow >div >div
{display: flex; flex: 1 1 auto; flex-direction: row; flex-wrap: nowrap; overflow: auto; width: 100%;}
.tableForm .tableFormBody {overflow: auto; scroll-behavior: initial;}
/*.tableForm .tableFormRow >div >div {display: block; overflow: auto;}*/
.tableForm .tableHead .headColumnLabel:hover {cursor: col-resize;}
.tableForm input[type="number"] {align-self: start; text-align: right; height: 100%; max-height: 2em; margin-left: auto;}
.tableForm input[type="text"] {align-self: start; text-align: left; width: 100%; height: 100%; max-height: 2em;}
.tableForm select {width: 100%; height: 100%; max-height: 2em; margin-bottom: auto;}
.tableForm .tableFormRow .progress:not(.trip) >div {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.tableForm .progress.trip {position: relative;}
.tableForm .progress.trip >div >div {position: absolute; overflow: hidden; margin-top: 0 !important; margin-bottom: 0 !important;}


/* ### markdown tables */
.tableForm .tableFormRow {flex-grow: 1;}
.tableForm .tableFormHead .progress div div {border-radius: 4px;}
.tableForm .tableFormRow .div h1, .tableForm .tableFormRow .div h2, .tableForm .tableFormRow .div h3,
.tableForm .tableFormRow .div h4, .tableForm .tableFormRow .div h5, .tableForm .tableFormRow .div h6 {padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0;}
.tableForm .tableFormRow .div p {margin: 0; padding-top: 0; padding-bottom: 0;}
.tableForm .tableFormRow >div >div input[type='date'],
.tableForm .tableFormRow >div >div input[type='range'] {border-width: 0; overflow: initial !important;}
.tableForm .tableFormRow button {overflow: hidden;}
.tableForm .tableFormRow .div {display: block; overflow: auto; width: 100%; height: 100%;}
.tableForm .tableFormBody {display: flex; flex: 0 1 auto; flex-direction: column; flex-wrap: nowrap; height: 100%; margin: 0;}
.tableForm .tableFormRow textarea {resize: none; width: 100%; height: 100%;}
.tableForm .tableFormRow >div >div input {overflow: hidden; white-space: initial;}
.tableForm .tableFormHead >div, .tableForm .tableFormHead >div >textarea {user-select: none;}

.tableForm .tableFormRow >div, .tableForm .tableFormRow >div >button, .tableForm .tableFormRow >div >div, .tableForm .tableFormRow >div >input, .tableForm .tableFormRow >div >textarea,
.tableForm .tableFormSel >div, .tableForm .tableFormSel >div >button, .tableForm .tableFormSel >div >div, .tableForm .tableFormSel >div >input, .tableForm .tableFormSel >div >textarea
{opacity: .99;}
.tableForm.stripe .tableFormRow:nth-child(2n) >div, .tableForm.stripe .tableFormRow:nth-child(2n) >div >button, .tableForm.stripe .tableFormRow:nth-child(2n) >div >div,
.tableForm.stripe .tableFormRow:nth-child(2n) >div >input, .tableForm.stripe .tableFormRow:nth-child(2n) >div >textarea
{opacity: .93;}
.tableForm .tableFormRow:hover >div, .tableForm .tableFormRow:hover >div >button, .tableForm .tableFormRow:hover >div >div, .tableForm .tableFormRow:hover >div >input,
.tableForm .tableFormRow:hover >div >textarea
{opacity: .80 !important;}
.tableForm .tableFormRow.active >div, .tableForm .tableFormRow.active >div >button, .tableForm .tableFormRow.active >div >div, .tableForm .tableFormRow.active >div >input,
.tableForm .tableFormRow.active >div >textarea
{opacity: .75;}
.tableForm >div.tableFormVertResize, .tableForm >div.tableFormVertResize >div {padding: 0; margin: 0;}
.tableForm .tableFormVertResize textarea {resize: vertical;}
.tableForm .tableFormRow .range {width: 100%;}
.tableForm .tableFormRow .range >div {display: flex; align-items: center;}
.tableForm .tableFormRow .redThumb::-moz-range-thumb {background: red !important;}
.tableForm .tableFormRow .redThumb::-webkit-slider-thumb {background: red !important;}
.tableForm .tableFormRow .greenThumb::-moz-range-thumb {background: green !important;}
.tableForm .tableFormRow .greenThumb::-webkit-slider-thumb {background: green !important;}
.tableForm .progress >div {padding-left: 0 !important; padding-right: 0 !important;}

.tableForm .hidden {display: none;}
.tableForm .mainTable.fixHead >thead {position: sticky; top: 0; z-index: 100; opacity: 1;}
.tableForm .mainTable.fixHead >tbody >tr, .tableForm .mainTable.fixHead >tbody >tr >td {z-index: -100;}
.tableForm.hiddenSel .tableSelect {display: none;}

.tableForm .selectRow th.selectColumn.inputCheck {
  text-align: center;
}

.tableForm .selectRow .checkTri {
  /* Why: let the tri-state box scale with the local font size so it stays proportional to regular check controls. */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  background: transparent;
  border: 1px solid currentColor;
  line-height: 1;
  font-size: 1em;
  width: 1.3em;
  height: 1.3em;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
}

.tableForm .selectRow .checkTri > i {
  line-height: 1;
}

.tableForm td, .tableForm td:hover {user-select: none; cursor: default;}
.tableForm .tableColumnHead:hover {cursor: ew-resize;}

.tableForm.maxHeight-1 tr td div {max-height: 1rem;}
.tableForm.maxHeight-2 tr td div {max-height: 2rem;}
.tableForm.maxHeight-3 tr td div {max-height: 3rem;}
.tableForm.maxHeight-4 tr td div {max-height: 4rem;}
.tableForm.maxHeight-5 tr td div {max-height: 5rem;}
.tableForm.maxHeight-6 tr td div {max-height: 6rem;}
.tableForm.maxHeight-7 tr td div {max-height: 7rem;}
.tableForm.maxHeight-8 tr td div {max-height: 8rem;}
.tableForm.maxHeight-9 tr td div {max-height: 9rem;}
.tableForm.maxHeight-10 tr td div {max-height: 10rem;}
.tableForm.maxHeight-11 tr td div {max-height: 11rem;}
.tableForm.maxHeight-12 tr td div {max-height: 12rem;}
.tableForm.maxHeight-13 tr td div {max-height: 13rem;}
.tableForm.maxHeight-14 tr td div {max-height: 14rem;}
.tableForm.maxHeight-15 tr td div {max-height: 15rem;}
.tableForm.maxHeight-16 tr td div {max-height: 16rem;}
.tableForm.maxHeight-17 tr td div {max-height: 17rem;}
.tableForm.maxHeight-18 tr td div {max-height: 18rem;}
.tableForm.maxHeight-19 tr td div {max-height: 19rem;}
.tableForm.maxHeight-20 tr td div {max-height: 20rem;}

.gridFrame {display: flex; flex-direction: column; margin: 0; width: 100%;}
.grid {display: grid; grid-template-columns: auto; grid-template-rows: auto; width: 100%; overflow: auto; margin-top: 0; margin-bottom: 0;}
.grid.noBorder {border-width: 0;}
.grid.noFrame, .grid.noBorder {border-style: none; border-width: 0; margin: 0;}
.gridHead {position: sticky; top: 0; z-index: 100; width: 100%; height: 100%; margin: 0;}
.gridOrg {display: flex; margin: 0;}
.gridOrg.center {justify-content: center;}
.gridPickColor, .gridPickSymbol {display: grid; cursor: pointer;}
.gridOrg.vertical {display: flex; transform: scale(-1); writing-mode: vertical-rl; margin: 0;}
.gridOrg.vertical div {margin: auto; text-align: center;}
.gridBox {display: flex; margin: 0;}
.gridBox div, .grid.organize div {margin: auto; text-align: center; overflow-wrap: normal;}
.gridBox.vertical {text-align: start; transform: scale(-1); writing-mode: vertical-rl;}
.gridGap {padding: 0; margin: 0;}
.gridItem {display: flex; overflow-wrap: anywhere; min-width: 2em; margin: 0;}
.gridItem a {width: 100%;}
.gridItem.vertical {transform: scale(-1); writing-mode: vertical-rl; padding: 0; margin: 0;}
.gridLine {display: grid; min-width: 10px; width: 100%; height: 100%; padding: 0; margin: 0;}
.gridLine svg {display: grid; width: 100%; height: 100%;}

.gridItem.number {display: block; text-align: right;}


/* spreadsheet grid application */
.gridWkb {display: grid;}

.gridWkb .gridItem.sticky-left {position: sticky; left: 0; z-index: 8;}
.gridWkb .gridItem.sticky-left-1 {position: sticky; z-index: 1;}
.gridWkb .gridItem.sticky-left-top {position: sticky; z-index: 1;}

.gridWkb .gridItem.sticky-top {position: sticky; top: 0; z-index: 4;}
.gridWkb .gridItem.sticky-top-left {position: sticky; top: 0; z-index: 5;}
.gridWkb .gridItem.sticky-top-left-1 {position: sticky; z-index: 5;}
.gridWkb .gridItem.sticky-top-1 {position: sticky; z-index: 2;}

.gridWkb .gridItem.sticky {position: sticky; left: 0; top: 0; z-index: 10;}
.gridWkb .gridItem.sticky-1 {position: sticky; left: 0; z-index: 10;}

.Wkb .formulaLine {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  line-height: 1.2em;
  padding: .3em;
  margin: 1px;
  border: 1px solid gray;
}
.Wkb .cellNr {width: fit-content; min-width: 4em;}

.docInfo textarea {resize: vertical;}
.docInfo .docBaseInfo, .docInfo .docVerInfo{display: flex; flex: 0 0 auto; flex-direction: column; min-width: 34rem;}
.docInfo .docBaseInfo>div, .docInfo .docVerInfo>div {display: flex; flex: 0 0 auto; flex-direction: column;}

.form.print.a4p {width: 210mm; min-width: 210mm; max-width: 210mm; height: 297mm; min-height: 297mm; max-height: 297mm; padding: 0; margin: 0;}

.form.print .gridFrame {width: 100%; height: 100%; padding: 0; margin: 0;}
.form.print .gridFrame >div.grid {width: 100%; height: 100%;}
.form.print .printBodyHead, .form.print .printBodyFoot {display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; padding: 0; margin: 0;}

.form.print .printBodyHead >div, .form.print .printBodyFoot >div {display: flex; flex-direction: column; flex: 0 1 auto; flex-wrap: nowrap; padding: 0; margin: 0;}
.form.print .printBodyHead .headBody, .form.print .printBodyFoot .footBody {display: flex; flex-direction: column; padding: 0; margin: 0;}
.form.print .tableForm, .form.print .tableFormBody {height: initial;}
.form.print .printHide {display: none !important;}

.printShow {display: none;}
.form.print .printShow {display: initial;}
/*#pagePrint .formFrame.print.portrait {padding: 0; margin: 0;}*/

/*#pagePrint .formFrame.print .formBoard {overflow: visible; width: 100%; height: 100%; padding: 0; margin: 0; }*/

/*@page { size: a4 portrait; margin: 0; }*/
@page { margin: 0 !important; }

@media print {
  .pageBreakBeforeAlways {page-break-before: always;}
  .pageBreakAfterAlways {page-break-after: always;}
  .pageBreakInsideAvoid {page-break-inside: avoid;}
  .pageBreakAfterAvoid {break-after: avoid;}
  .breakBeforeAvoid {break-before: avoid;}
  .breakInsideAvoid {break-inside: avoid;}
  /*.printHeader, .printHeaderSpace {position: fixed; top: 0; height: 3em;}*/
  /*.printFooter, .printFooterSpace {position: fixed; bottom: 0; height: 3em;}*/
}
/*
https://stackoverflow.com/questions/13154147/how-to-set-safari-print-margins-via-css-to-print-borderless
*/



/*!* ========== TODO MODERN UI ENHANCEMENTS ========== *!*/
/*!* Subtle modernization that preserves business application aesthetics *!*/

/*:root {*/
/*  --modern-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);*/
/*  --modern-radius: 3px;*/
/*  --modern-transition: all 0.15s ease;*/
/*  --tab-active-bg: #ffffff;*/
/*}*/

/*!* Modern button enhancements *!*/
/*.form button:not(.disabled),*/
/*.btnCommand button:not(.disabled),*/
/*button:not(.disabled) {*/
/*  border-radius: var(--modern-radius);*/
/*  transition: var(--modern-transition);*/
/*}*/

/*.form button:hover:not(.disabled),*/
/*.btnCommand button:hover:not(.disabled),*/
/*button:hover:not(.disabled) {*/
/*  box-shadow: var(--modern-shadow);*/
/*  transform: translateY(-0.5px);*/
/*}*/

/*!* Modern form styling *!*/
/*.form input:not([type="checkbox"]):not([type="range"]),*/
/*.form textarea,*/
/*.form select {*/
/*  border-radius: var(--modern-radius);*/
/*  transition: var(--modern-transition);*/
/*}*/

/*.form input:focus:not([type="checkbox"]):not([type="range"]),*/
/*.form textarea:focus,*/
/*.form select:focus {*/
/*  box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.15);*/
/*  outline: none;*/
/*}*/

/*!* Modern table styling *!*/
/*.tableForm {*/
/*  border-radius: var(--modern-radius);*/
/*  overflow: hidden;*/
/*}*/

/*.tableForm .tableFormHead > div {*/
/*  font-weight: 500;*/
/*}*/

/*!* Modern form blocks *!*/
/*.form .formBlock,*/
/*.detForm {*/
/*  border-radius: var(--modern-radius);*/
/*  box-shadow: var(--modern-shadow);*/
/*}*/

/*.form .formHeader {*/
/*  border-radius: var(--modern-radius) var(--modern-radius) 0 0;*/
/*  font-weight: 500;*/
/*}*/

/*!* Modern grid styling *!*/
/*.gridFrame {*/
/*  border-radius: var(--modern-radius);*/
/*}*/

/*.gridHead,*/
/*.gridHead2 {*/
/*  font-weight: 500;*/
/*}*/

/*!* Modern navigation *!*/
/*.nav a {*/
/*  transition: var(--modern-transition);*/
/*}*/

/*.nav.top .root > ul {*/
/*  border-radius: var(--modern-radius);*/
/*}*/

/*!* Modern depth effects *!*/
/*.main .bar .tab {*/
/*  box-shadow: var(--modern-shadow);*/
/*}*/

/*!* Improved typography *!*/
/*h1, h2, h3, h4 {*/
/*  font-weight: 600;*/
/*}*/

/*!* Disabled state improvements *!*/
/*.disabled,*/
/*.form button.disabled,*/
/*button.disabled {*/
/*  opacity: 0.7;*/
/*  filter: grayscale(30%);*/
/*}*/

/*!* ========== MODERN TAB BAR ENHANCEMENTS ========== *!*/
/*!* Document Management Tabs (DMT) improvements *!*/

/*!* Tab container modernization *!*/
/*.main .bar .tab {*/
/*  border-radius: var(--modern-radius) var(--modern-radius) 0 0;*/
/*  box-shadow: var(--modern-shadow);*/
/*  border-bottom: none;*/
/*  min-height: 36px;*/
/*  height: 36px;*/
/*}*/

/*!* Individual tab styling *!*/
/*.main .bar .tab .tabText {*/
/*  border-radius: var(--modern-radius) var(--modern-radius) 0 0;*/
/*  margin-right: 2px;*/
/*  transition: var(--modern-transition);*/
/*  overflow: hidden;*/
/*  position: relative;*/
/*  opacity: 0.75;*/
/*  background: rgba(0, 0, 0, 0.03);*/
/*  border: 1px solid rgba(0, 0, 0, 0.1);*/
/*  border-bottom: none;*/
/*}*/

/*.main .bar .tab .tabText:hover {*/
/*  transform: translateY(-1px);*/
/*  box-shadow: var(--modern-shadow);*/
/*  opacity: 0.9;*/
/*}*/

/*!* Active tab - prominent and merged with content *!*/
/*.main .bar .tab .tabText.focus,*/
/*.main .bar .tab .tabText.active {*/
/*  opacity: 1;*/
/*  background: var(--tab-active-bg, #ffffff) !important;*/
/*  border-color: rgba(0, 0, 0, 0.2);*/
/*  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);*/
/*  z-index: 10;*/
/*  transform: translateY(1px);*/
/*  margin-bottom: -1px;*/
/*}*/

/*!* Ensure active tab children inherit the active background *!*/
/*.main .bar .tab .tabText.focus .bar .tabText,*/
/*.main .bar .tab .tabText.active .bar .tabText,*/
/*.main .bar .tab .tabText.focus .bar .tabBtn,*/
/*.main .bar .tab .tabText.active .bar .tabBtn {*/
/*  background: inherit !important;*/
/*  color: inherit !important;*/
/*}*/

/*!* Make inactive tabs more receded *!*/
/*.main .bar .tab .tabText:not(.focus):not(.active) {*/
/*  background: rgba(0, 0, 0, 0.08);*/
/*  border-color: rgba(0, 0, 0, 0.15);*/
/*  transform: translateY(2px);*/
/*  z-index: 1;*/
/*}*/

/*!* Tab text styling - ensure consistent background with button *!*/
/*.main .bar .tab .bar .tabText,*/
/*.main .bar .tab .btn.bar .tabText,*/
/*.main .bar .tab .selectBtn.bar .tabText {*/
/*  font-weight: 500;*/
/*  padding: 0.4em 0.8em 0.4em 0.5em;*/
/*  white-space: nowrap;*/
/*  overflow: hidden;*/
/*  text-overflow: ellipsis;*/
/*  max-width: 200px;*/
/*  background: transparent !important;*/
/*  border: none !important;*/
/*  color: inherit !important;*/
/*}*/

/*!* Modern close button styling - override all button classes *!*/
/*.main .bar .tab .bar .tabBtn,*/
/*.main .bar .tab button.bar .tabBtn,*/
/*.main .bar .tab .btn.bar .tabBtn,*/
/*.main .bar .tab .selectBtn.bar .tabBtn {*/
/*  width: 28px;*/
/*  height: 28px;  */
/*  border-radius: 50%;*/
/*  padding: 0 !important;*/
/*  margin: auto 8px auto 6px;*/
/*  font-size: 0;*/
/*  line-height: 1;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  opacity: 0.6;*/
/*  transition: all 0.2s ease;*/
/*  border: 1px solid transparent !important;*/
/*  background: transparent !important;*/
/*  color: inherit !important;*/
/*  flex-shrink: 0;*/
/*  cursor: pointer;*/
/*  min-width: 28px;*/
/*  touch-action: manipulation;*/
/*}*/

/*.main .bar .tab .bar .tabBtn:hover,*/
/*.main .bar .tab button.bar .tabBtn:hover,*/
/*.main .bar .tab .btn.bar .tabBtn:hover,*/
/*.main .bar .tab .selectBtn.bar .tabBtn:hover {*/
/*  opacity: 1 !important;*/
/*  background: rgba(255, 0, 0, 0.15) !important;*/
/*  border-color: rgba(255, 0, 0, 0.4) !important;*/
/*  transform: scale(1.05);*/
/*  color: #d32f2f !important;*/
/*}*/

/*.main .bar .tab .bar .tabBtn:active,*/
/*.main .bar .tab button.bar .tabBtn:active,*/
/*.main .bar .tab .btn.bar .tabBtn:active,*/
/*.main .bar .tab .selectBtn.bar .tabBtn:active {*/
/*  transform: scale(0.9);*/
/*  background: rgba(255, 0, 0, 0.25) !important;*/
/*  color: #d32f2f !important;*/
/*}*/

/*!* Replace Unicode X with better styled one *!*/
/*.main .bar .tab .bar .tabBtn::before {*/
/*  content: "×";*/
/*  font-weight: bold;*/
/*  font-size: 16px;*/
/*  color: currentColor;*/
/*}*/


/*!* Control button modernization *!*/
/*.main .bar .tab .bar .tabCtl button {*/
/*  border-radius: var(--modern-radius);*/
/*  padding: 0.3em 0.6em;*/
/*  font-weight: 500;*/
/*  transition: var(--modern-transition);*/
/*}*/

/*.main .bar .tab .bar .tabCtl button:hover {*/
/*  box-shadow: var(--modern-shadow);*/
/*  transform: translateY(-1px);*/
/*}*/

/*!* Tab separator improvements *!*/
/*.main .bar .tab > div {*/
/*  border-radius: var(--modern-radius) var(--modern-radius) 0 0;*/
/*}*/

/*!* Improved tab focus states *!*/
/*.main .bar .tab .tabText.focus .bar .tabText,*/
/*.main .bar .tab .tabText.active .bar .tabText {*/
/*  font-weight: 600;*/
/*}*/

/*!* Enhanced hover state for close button in different themes *!*/
/*.main .bar .tab .tabText:hover .bar .tabBtn {*/
/*  opacity: 0.8;*/
/*}*/

/*.main .bar .tab .tabText.active .bar .tabBtn,*/
/*.main .bar .tab .tabText.focus .bar .tabBtn {*/
/*  opacity: 0.7;*/
/*}*/

/*!* Better tab spacing and alignment *!*/
/*.main .bar .tab .tabText > div {*/
/*  display: flex;*/
/*  align-items: center;*/
/*  padding: 4px 0;*/
/*  margin: 0;*/
/*  min-height: 36px;*/
/*  height: 36px;*/
/*}*/

/*!* Responsive tab behavior *!*/
/*@media (max-width: 768px) {*/
/*  .main .bar .tab .bar .tabText {*/
/*    max-width: 120px;*/
/*  }*/
/*  */
/*  .main .bar .tab .bar .tabBtn {*/
/*    width: 18px;*/
/*    height: 18px;*/
/*    font-size: 11px;*/
/*  }*/
/*}*/

/*!* Tab dragging visual feedback *!*/
/*.main .bar .tab .tabText.dragging {*/
/*  opacity: 0.8;*/
/*  transform: rotate(2deg);*/
/*  z-index: 1000;*/
/*}*/