/*#region aoverrides.css */
.wf-hidden {
    display: none !important;
}
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
textarea {
    resize: none;
    text-align: left;
    overflow: auto;
    font-family: var(--text-font-family);
    font-size: var(--text-font-size);
    line-height: var(--text-line-height);
    font-weight: var(--text-font-weight);
}

body {
    font-family: var(--text-font-family);
    font-size: var(--text-font-size);
    line-height: var(--text-line-height);
    font-weight: var(--text-font-weight);
  }
  input {
    font-family: var(--text-font-family);
    font-size: var(--text-font-size);
    line-height: var(--text-line-height);
    font-weight: var(--text-font-weight);
  }
  select {
    font-family: var(--text-font-family);
    font-size: var(--text-font-size);
    line-height: var(--text-line-height);
    font-weight: var(--text-font-weight);
  }
  
  button {
    font-family: var(--button-font-family);
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    font-weight: var(--button-font-weight);
  }
  
  h1, h2, h3 {
    font-family: var(--title-font-family);
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    font-weight: var(--title-font-weight);
  }
/*#endregion aoverrides.css */
/*#region common.css */
.wf-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}
.wf-col-grow {
    display: flex;
    flex-direction: column;
    flex-grow: 9;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}

.wf-row-grow {
    display: flex;
    flex-direction: row;
    align-items:  center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
    flex-grow: 9;
}
.wf-row {
    display: flex;
    flex-direction: row;
    align-items:  center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
}



.row, .row-centered {
    display: flex;
    flex-direction: row;
    align-items:  center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.align-items-center {
    align-items: center !important;
}
.row-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
}
.row-centered {
    align-items: center;
}
.col-gap-0 {
    column-gap: 0px;
}
.col-gap-1 {
    column-gap: 5px;
}
.row-gap-0 {
    row-gap: 0px;
}
.row-gap-1 {
    row-gap: 5px;
}
.hidden-div {
    display: block;
    position: fixed;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
.collapsed-div {
    display: block;
    height: 0px;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    overflow:  hidden;
}
.scroll-y {
    overflow-y: auto;
    overflow-x: hidden; 
}

.col {
    flex-shrink: 1;
    width: auto;
}

.wf-flex-wrap {
    flex-wrap: wrap;
}
.wf-flex-nowrap {
    flex-wrap: nowrap;
}
.wf-icon-button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    column-gap: 5px;
    background-color: gray;
}
.wf-droparea {
    text-align: left;
    overflow: auto;
}
.wf-over-droparea {
    border-width: 3px;
    border-style: dotted;
    border-color: black;
}
.wf-label-div {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.wf-label {
    white-space: nowrap;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.text-right {
    text-align: right !important;
}
.text-center {
    text-align: center !important;
}
.text-start {
    text-align: start !important;
}
.text-justify {
    text-align: justify !important;
}
.text-left {
    text-align: left !important;
}
.modal-div {
    display: none; 
    position: fixed;
    /*z-index: 1998;  Sit on top */
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
}
.wf-select-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    row-gap: 1px;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-left: 10px;
    margin-right: 22px;  /*there is a bug in the right margin by 12px - formResize needs to be fixed, but for now fixed it here*/
}
.wf-checkbox-empty {
    display: inline-block;
    width: 24px;
    height: 24px;
    padding-left: 5px !important;
}
.wf-checkbox-label
{
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.wf-checkbox-div {
    display: flex;
    flex-direction: row;
    cursor: pointer;
    margin-left: 5px;
    margin-right: 5px;
}


.wf-checkbox {
    width: 24px;
    height: 24px;
    transition: all 0.3s;
    cursor: pointer;
    padding-left: 5px !important;
}
.wf-horz-button-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    column-gap: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.pos-abs {
    position: absolute;
}
.btn-list {
    height: 32px;
    width: 100%;
    text-align: left !important;    
}
.btn-list-null {
    height: 32px;
    width: 100%;
}
.wf-field-label-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    flex-wrap: nowrap;
}
.wf-field-label-top {
    display: flex;
    flex-direction: column;
    row-gap: 3px;
    justify-content: flex-start;
    flex-wrap: nowrap;
}
.wf-no-button {
    appearance: textfield;
    -moz-appearance: textfield;
}
.wf-no-button input[type=number]::-webkit-inner-spin-button,
.wf-no-button input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.wf-input-color {
    display: block;
    height: 24px !important;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    box-shadow: inset 0 0 3px 0 var(--input-border-color);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.wf-input-div {
    display: block;
    width: 100%;
}
.wf-cursor-pointer {
    cursor: pointer;
}
.wf-input, .wf-select-input {
    display: block;
    width: 100%;
    height: 100%;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    outline: none !important;
    border: 3px solid gray;
    background-color: transparent;
    background-clip: padding-box;
    color: black;
    overflow: auto;
    border-radius: var(--bs-border-radius);
}
.wf-input:focus, .wf-select-input:focus {
    outline: none !important;
    border: 3px solid green;
}
.wf-color-view {
    display: block;
    width: 100%;
    height: 100%;
}
.readonly-view {
    background-color: white;
}
.readonly-view:disabled {
    background-color: white;
}
.pointer-events-none {
    pointer-events: none;
}
.bgcanvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #cfe2ff;
    opacity: 0.5;
}
.wf-page {
    height: 97vh;
    width: 100%;
}
.wf-main-layout {
    height: calc(100vh - 40px);
    width: 100vw;
    background-color: white;
}
.spacer {
    flex-grow: 1;
}
/*#endregion common.css */
/*#region dragable.css */
.drag-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 200px;
    margin: 20px auto;
  }
  .draggable {
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: grab;
    text-align: center;
  }
  .drag-over {
    background-color: #d0f0d0;
  }
 
/*#endregion dragable.css */
/*#region fieldgroup.css */
.wf-fieldgroup {
    display: block;
    position: relative;
    padding-left: var(--paddingLeft);
    padding-right: var(--paddingRight);
    color: var(--color);
}
.wf-fieldgroup.th {
    background-color:rgb(91, 156, 255);
    color: black;
    padding-left: var(--paddingLeft);
    padding-right: var(--paddingRight);
    --paddingLeft: 10px;
    --paddingRight: 0px;
}

.wf-fieldgroup.tr {
    padding-left: var(--paddingLeft);
    padding-right: var(--paddingRight);
    --paddingLeft: 10px;
    --paddingRight: 0px;
}
.wf-fieldgroup.td {
    padding-left: var(--paddingLeft);
    padding-right: var(--paddingRight);
    --paddingLeft: 10px;
    --paddingRight: 0px;
}

.wf-fieldgroup-label {
    display: block;
    position: relative;
    z-index: 1;
    width: 50px;
    width: fit-content;
    background-color: var(--backgroundColor);
    color: var(--color);
    padding-left: var(--paddingLeft);
    padding-right: var(--paddingRight);
    padding-bottom: var(--paddingBottom);
    padding-top: var(--paddingTop);
    border-width: var(--borderWidth);
    border-radius: var(--radius);
    border-style: solid;
    --borderWidth: 0px;
    --radius: 5px;
    --fontSize: 20px;
    --backgroundColor: rgb(91, 156, 255);
    --backgroundColor: #cfe2ff;
    --color: black;
    --paddingLeft: 5px;
    --paddingRight: 5px;
    --paddingTop: 1px;
    --paddingBottom: 1px;
}
.wf-fieldgroup-header {
    display: block;
    position: absolute;
    left: 120px;
    top: -15px;
    z-index: 2;
    width: fit-content;
    background-color: var(--backgroundColor);
    color: var(--color);
    padding-left: var(--paddingLeft);
    padding-right: var(--paddingRight);
    padding-bottom: var(--paddingBottom);
    padding-top: var(--paddingTop);
    --radius: 5px;
    --fontSize: 20px;
    --backgroundColor: rgb(91, 156, 255);
    --backgroundColor: #cfe2ff;
    --color: black;
    --paddingLeft: 5px;
    --paddingRight: 5px;
    --paddingTop: 1px;
    --paddingBottom: 1px;
}
.wf-fieldgroup-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    padding-right: var(--paddingRight);
    padding-top: var(--paddingTop);
    padding-bottom: var(--paddingBottom);
    row-gap: var(--rowGap);
    column-gap: var(--columnGap);
    background-color: var(--backgroundColor);
    color: var(--color);
    border-radius: var(--radius);
    --radius: 5px;
    --paddingLeft: 1em;
    --paddingRight: 1em;
    --paddingTop: 1em;
    --paddingBottom: 1em;
    --rowGap: 1em;
    --columnGap: 1em;
    --backgroundColor: white;
    --color: black;
}
/*#endregion fieldgroup.css */
/*#region fonts.css */

.wf-font-size-16 {
    font-size: 16px;
}
.wf-font-size-18 {
    font-size: 18px;
}
.wf-font-size-20 {
    font-size: 20px;
}


.bubblegumsans 
{
    font-family: 'BubblegumSansRegular';
}
.notosans {
    font-family: 'NotSans';
}
.notosans-bold {
    font-family: 'NotSansBold';
}
.notosans-italic {
    font-family: 'NotoSansItalic';
}
.notosans-bold-italic {
    font-family: 'NotoSansBoldItalic';
}


@font-face {
    font-family: 'BubblegumSansRegular';
    src: url('fonts/bubblegum-sans-regular.ttf');
}

@font-face {
    font-family: 'NotoSans';
    src: url('fonts/noto-sans.ttf');
}

@font-face {
    font-family: 'NotoSansBold';
    src: url('fonts/noto-sans-bold.ttf');
}

@font-face {
    font-family: 'NotoSansItalic';
    src: url('fonts/noto-sans-italic.ttf');
}

@font-face {
    font-family: 'NotoSansBoldItalic';
    src: url('fonts/noto-sans-bold-italic.ttf');
}

/*#endregion fonts.css */
/*#region groupbox.css */

.wf-scroll-box {
    display: inline-block;
    overflow-y: auto;
    background-color: var(--backgroundColor);
    color: var(--color);
    border-radius: var(--radius);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    --radius: 10px;
    --backgroundColor: rgb(91, 156, 255);
    --color: black;
    margin-bottom: 10px;
    padding: 10px;
    height: 100%;
}
.wf-groupbox {
    display: inline-block;
    background-color: var(--backgroundColor);
    color: var(--color);
    border-radius: var(--radius);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    --radius: 10px;
    --backgroundColor: rgb(91, 156, 255);
    --color: black;
}
.wf-groupbox-header {
    align-self: center;
    font-size: var(--title-font-size);
    background-color: var(--backgroundColor);
    color: var(--color);
    padding-left: var(--paddingLeft);
    padding-right: var(--paddingRight);
    padding-bottom: var(--paddingBottom);
    padding-top: var(--paddingTop);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    --fontSize: 18px;
    --backgroundColor: white;
    --color: black;
    --paddingLeft: 10px;
    --paddingRight: 10px;
    --paddingTop: 5px;
    --paddingBottom: 5px;
}
.wf-groupbox-footer {
    align-self: center;
    font-size: var(--title-font-size);
    background-color: var(--backgroundColor);
    color: var(--color);
    padding-left: var(--paddingLeft);
    padding-right: var(--paddingRight);
    padding-bottom: var(--paddingBottom);
    padding-top: var(--paddingTop);
    --fontSize: 14px;
    --backgroundColor: color-mix(in srgb, rgb(91, 156, 255) 80%, black);
    --color: black;
    --paddingLeft: 10px;
    --paddingRight: 10px;
    --paddingTop: 5px;
    --paddingBottom: 5px;
}
.wf-groupbox-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
    padding-left: var(--paddingLeft);
    padding-right: var(--paddingRight);
    padding-top: var(--paddingTop);
    padding-bottom: var(--paddingBottom);
    row-gap: var(--rowGap);
    column-gap: var(--columnGap);
    background-color: var(--backgroundColor);
    --paddingLeft: 1em;
    --paddingRight: 1em;
    --paddingTop: 1em;
    --paddingBottom: 1em;
    --rowGap: 1em;
    --columnGap: 1em;
    --backgroundColor: rgb(91, 156, 255);
}
/*#endregion groupbox.css */
/*#region margins.css */
.ml1 { 
    margin-left: 5px;
}

.mlr1 {
    margin-left: 5px;
    margin-right: 5px;
}

.m0 {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.m1 {
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 5px;
    margin-right: 5px;
}
.small-div-margin {
    margin-top:     5px;
    margin-bottom:  5px;
    margin-left:    5px;
    margin-right:   5px;
}
.med-div-margin {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
.large-div-margin {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}
.exlarge-div-margin {
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 40px;
    margin-right: 40px;
}


.wf-bm {
    margin-bottom: 10px;
}

.lh1 {
    line-height: 1rem !important;
}
.lh15 {
    line-height: 1.5rem !important;
}
.lh2 {
    line-height: 2rem !important;
}

/*#endregion margins.css */
/*#region menu.css */
#MenuBody {
    background: #dbe2e9;
    color: #333;
    position: fixed;
    top: 40px;
    left: -220px;
    width: 200px;
    height: calc(100vh - 40px);
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s; 
}
#MenuBody button {
    display: block;
    
    text-align: left;
    background: var(--btn-bg-color);
    color: var(--btn-txt-color);
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    font-weight: var(--button-font-weight);
    border-width: 2px;
    border-style: solid;
    border-color: var(--btn-border-color);
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    width: 200px;
}


#MenuBody button:not(:last-child) {
    border-bottom: none; /* Prevent double borders */
}

#MenuBody button:hover {
    color: var(--btn-txt-hover-color);
    background-color: var(--btn-bg-hover-color);
}
#MenuBody.on {
    left: 0;
}
.wf-top-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;
    background: #333;
    color: #fff;
    height: 40px;
    line-height: 40px;
}
/*#endregion menu.css */
/*#region padding.css */
.pl10 {
    padding-left: 10px !important;
}
.pr10 {
    padding-right: 10px !important;
}
.plr10 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.p0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.p2 {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}
.pg10 {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    row-gap: 10px !important;
    column-gap: 10px !important;
    
}
.g10 {
    row-gap: 10px !important;
    column-gap: 10px !important;
}
.rg10 {
    row-gap: 10px !important;
}
.cg10 {
    column-gap: 10px !important;
}
.m0 {
    margin: 0px 0px 0px 0px !important;
}
/*#endregion padding.css */
/*#region popup.css */
.wf-popup-pos {
    display: block;
    position: relative;
    height: 1px;
    top: 0px;
    left: 10px;
}

.wf-popup-src:focus {
    background-color: var(--alt-bg-color);
    color: var(--alt-text-color);
    --alt-bg-color: hsl(216, 100%, 95%);
    --alt-text-color: black;
}

.wf-popup {
    display: block;
    position: absolute;
    z-index: 100;
    background-color: var(--bg-color);
    color: var(--text-color);
    --bg-color: hsl(216, 100%, 35%);
    --text-color: white;
}

.wf-popup-item:hover {
    background-color: var( --btn-bg-hover-color);
    color: var(--text-color);
    cursor: pointer;
    --bg-color: hsl(216, 100%, 95%);
    --text-color: black;
}

/*#endregion popup.css */
/*#region root.css */
:root {
    --h1FontSize: 1.5rem;
    --h2FontSize: 1.2rem;
    --smPadding: .1rem;
    --rgPadding: .2rem;
    --lgPadding: .3rem;
    
    --pri-btn-bg-color: #42A5F5;
    --cancel-btn-bg-color: #ac2828;
    
    /*regular button*/
    --btn-bg-color: #83c0f3;

    --btn-bg-color-0: #8ecae6;
    --btn-color-0: black;

    --btn-bg-color-1: #219ebc;
    --btn-color-1: black;

    --btn-bg-color-2: #945c02;
    --btn-color-2: white;

    --btn-bg-color-3: #ffb703;
    --btn-color-3: black;

    --btn-bg-color-4: #fb8500;
    --btn-color-4: white;

    --btn-bg-color-5: #0a7800;
    --btn-color-5: white;

    --btn-bg-color-6: #123bc1;
    --btn-color-6: white;

    --btn-bg-color-7: #fdf0d5;
    --btn-color-7: black;

    --btn-bg-color-8: #606c38;
    --btn-color-8: white;

    --btn-bg-color-9: #283618;
    --btn-color-9: white;


    --btn-txt-color: black;
    --btn-border-color: black;
    --alt-btn-bg-color: #f0f0f0;
    --alt-btn-txt-color: black;
    --alt-btn-border-color: black;


    --btn-hover-color: #00E676;
    --btn-focus-color: #00FF00;
    --btn-disabled-color: #bab8b8;
    
    /*selected button*/
    --sel-btn-bg-color: #4CAF50;
    --sel-btn-txt-color: white;

    --div-titlebar-bg-color: lightgray;
    --div-header-bg-color: rgb(231, 231, 231);
    --div-titlebar-color: black;
    --div-titlebar-btn-bg-color: lightgray;
    --div-titlebar-btn-color: black;
    --div-tab-btn-bg-color: rgb(161, 161, 161);
    --div-tab-btn-color: black;


    /**/
    --list-text-color: black;
    --list-bg-color: lightgray;
    --wfbox: linear-gradient(90deg, rgba(36,57,0,1) 0%, rgba(91,115,50,1) 100%);
    --wfboxText: white;
    --winCLR: hsl(0, 0%, 100%);
    --winBGC: hsl(198, 50%, 30%);
    --winTitleBarCLR: hsl(0, 0%, 100%);
    --winTitleBarBGC: hsl(198, 50%, 30%);
    --winBorderCLR: hsl(198, 80%, 80%);
    --input-border-color: black;
    --cancelBtnBGC: hsl(0, 63%, 43%);
    --cancelBtnCLR: hsl(0, 0%, 0%);
    
    --contentCLR: hsl(0, 0%, 0%);
    --contentBGC: hsl(198, 10%, 90%);
    --panelCLR: black;
    --panelBGC: white;
    --headerDivBGC: white;


    --pageBGC: hsl(0, 0%, 100%);
    --pageCLR: hsl(0, 0%, 0%);
    --font-stack: 'NotoSans';

    --btitle-font-family: "Noto Sans", sans-serif;
    --btitle-font-size: 22px !important;
    --btitle-line-height: 1.2;
    --btitle-font-weight: 700;

    --btext-font-family: "Noto Sans", sans-serif;
    --btext-font-size: 22px !important;
    --btext-line-height: 1.2;
    --btext-font-weight: 400;

    --text-font-family: "Noto Sans", sans-serif;
    --text-font-size: 16px;
    --text-line-height: 1.5;
    --text-font-weight: 400;
    
    --button-font-family: "Noto Sans", sans-serif;
    --button-font-size: 22px;
    --button-line-height: 1.5;
    --button-font-weight: 500;
    
    --title-font-family: "Noto Sans Bold", sans-serif;
    --title-font-size: 19px;
    --title-line-height: 1.3;
    --title-font-weight: 600;
}

/*#endregion root.css */
/*#region tableWriter.css */
 .wf-table 
 {
    border-collapse: collapse;
}


.wf-table  th {
    background-color: #f2f2f2;
    padding: 2px;
    text-align: left;
}


.wf-table  td {
    border: 1px solid #ddd;
    padding: 2px;
}

.wf-table td:nth-child(n+2)
{
    text-align: right;
}
.wf-table th:nth-child(n+2)
{
    text-align: right;
}


.wf-table  tr:nth-child(even) {
    background-color: #f9f9f9;
}

.report-grid {
    display: grid;
    grid-auto-rows: auto;
    width: fit-content;
    max-width: 100%;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    font-size: clamp(10px, 3.5vw, 12.5px);
}
.report
{
    display: flex; 
    flex-direction: column; 
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px; 
    min-width: 600px;
}
.sub-report
{
    display: flex; 
    flex-direction: column; 
    background-color: #fcf7dd;
    padding: 10px;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    min-width: 500px;
   
}
.sub-report.collapsed
{
    display: none; 
}

.sub-report-col
{
    display: flex; 
    flex-direction: column; 
    row-gap: 5px;
    column-gap: 5px;
}
.sub-report-row
{
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap;
    row-gap: 5px;
    column-gap: 5px;

}
.sub-report-row.collapsed
{
    display: none; 
}
.sub-report-col.collapsed
{
    display: none; 
}
.report-grid-row {
    display: contents;
    
}

.report-grid-btn-div{
    display: flex;
    flex-direction: row;
    height: 24px;
    margin-left: auto;
}
.report-grid-btn
{
    height: 24px;
    width: 24px;
    margin-left: auto;
}
.report-grid-btn:hover
{
    background-color: green;
}



.report-grid-btn-img
{
    width: 24px;
    height: 24px;
    vertical-align: middle;
}
.report-grid .header-row > div {
    background-color: black;
    color: white;
    text-align: left;
}
.report-grid .header-row > div[style*="span"] {
    background-color: black;
    text-align: center;
    font-size: 1.2em; 
}
.report-grid .body-row > div {
    border-bottom: 1px solid darkgray;
    text-align: left;
    scrollbar-width: none;

}
.report-grid .body-row:nth-child(even) > div {
    background-color: #f9f9f9;
}
.report-grid .body-row:hover > div {
    background-color: #9ec796 !important;
    transition: background-color 0.2s ease;
}
.report-grid .footer-row > div {
    background-color: black;
    color: #ffffff;
    text-align: left;
    scrollbar-width: none;
}
.report-grid .footer-row > div:hover {
    background-color: #9ec796 !important;
    color: black !important;
}
.report-grid-taleft {
    text-align: left !important;
    white-space: nowrap; 
    height: max-content;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
}
.report-grid-taright {
    text-align: right !important;
    white-space: nowrap;
    height: max-content;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
}
.report-grid-tacenter {
    text-align: center !important;
    white-space: nowrap;
    height: max-content;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px;
    padding-bottom: 1px;

}
.report-grid-color-default {
    color: #2c3e50 !important;
    background-color: #6e9dcc !important;
}
.report-grid-color-default:hover {
    background-color: #9cccfd !important;
}


.report-grid-color-primary {
    background-color: #6e9dcc !important;
    color: black !important;
}
.report-grid-color-primary:hover {
    background-color: #9cccfd !important;
}
.report-grid-color-highlight {
    background-color: #f1c40f !important;
    color: #2c3e50 !important;
}
.report-grid-color-highlight:hover {
    background-color: #f9e79f !important;
}
.report-grid-color-success {
    background-color: #27ae60 !important;
    color: white !important;
}
.report-grid-color-success:hover {
    background-color: #7dcea0 !important;
}
.report-grid-color-alert {
    background-color: #e74c3c !important;
    color: white !important;
}
.report-grid-color-alert:hover {
    background-color: #f5b7b1 !important;
}

.report-grid a {
    color: #2980b9;
    text-decoration: none;
}
.report-grid a:hover {
    text-decoration: underline;
    color: #3498db;
}
.report-grid.toggleable .body-row > div {
    max-height: 100px;
    opacity: 1;
    overflow: hidden;
}
.report-grid.toggleable.collapsed .body-row > div {
    max-height: 0;
    opacity: 0;
    padding: 0;
    border-bottom: 0;
}
.toggle-btn {
    cursor: pointer;
    display: inline; 
}
.toggle-btn:hover {
    color: greenyellow !important;
}
/*#endregion tableWriter.css */
/*#region text-editor.css */
/*SET THE DEFAULT FONT*/
#WFTextEditor {
    font-family: "NotoSans";
    font-size: var(--text-font-size);
    line-height: var(--text-line-height);
    font-weight: var(--text-font-weight);
}

.ql-font-BubblegumSans {
    font-family: 'BubblegumSansRegular';
}

.ql-font-NotoSans {
    font-family: 'NotoSans';
}

.ql-font-NotoSansBold {
    font-family: 'NotoSansBold';
}

.ql-font-NotoSansItalic {
    font-family: 'NotoSansItalic';
}

.ql-font-NotoSansBoldItalic {
    font-family: 'NotoSansBoldItalic';
}

/*#endregion text-editor.css */
/*#region theme.css */
.btn-color {
    background-color: var(--btn-bg-color);
    color: var(--btn-txt-color);
}

.sel-btn-color {
    background-color: var(--sel-btn-bg-color);
    color: var(--sel-btn-txt-color);

}
.btn-hover-color {
    background-color: var(--button-hover-color);
    color: var(--button-text-hover-color);
}
.title-color {
    color: var(--winTitleBarCLR);
    background-color: var(--winTitleBarBGC);
}

/*#endregion theme.css */
/*#region util.css */
.wf-header {
    border-radius: 0px 0px;
    border: 0px solid #000000ff;
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    font-weight: var(--title-font-weight);
    margin: 0px 0px 0px 0px;
}

.color-picker {
    color: #c5d46b;
}
#mapid {
    height: 100%;
    width: 100%;
}
.wf-window {
    display: flex;
    flex-direction: column;
    color: var(--winCLR);
    background-color: var(--winBGC);
    position: absolute;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.wf-header-div 
{
    display: flex;
    flex-direction: column;
    -ms-flex-align: start;
    color: var(--panelCLR);
    background-color: var(--div-header-bg-color);
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    height: fit-content;
    width: 100%;
}
.wf-panel-content {
    display: flex;
    flex-direction: column;
    -ms-flex-align: start;
    flex: 9;
    color: var(--panelCLR);
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.wf-window-content {
    display: flex;
    flex-direction: column;
    -ms-flex-align: start;
    flex: 9;
    color: var(--contentCLR);
    background-color: var(--contentBGC);
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    height: fit-content;
}
.wf-row-content {
    display: flex;
    flex-direction: row; 
    -ms-flex-align: start;
    align-items: flex-start;
    flex-wrap: wrap;
    color: var(--contentCLR);
    background-color: var(--contentBGC);
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.wf-video-form.wf-window-content {
    margin-top: 2px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.wf-map-form.wf-window-content {
    margin-top: 2px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.wf-video-player {
    border: 0px solid black;
}
.wf_iframe {
    border: 0px solid black;
    width: 100%;
    height: 100%;
}
.wf-vert-panel {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}
.wf-horz-panel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    height: fit-content;
}
.wf-label {
    flex: 9;
    text-align: left;
    height: 32px;
    line-height: 32px;
}
.wf-accordian {
    display: block;
}
.wf-accordian-content {
    display: flex; 
    flex-direction: column;
    padding-top: 5px !important;
    padding-bottom: 2px !important;
    row-gap: 5px !important;
    column-gap: 10px !important;
}
.wf-accordian-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: rgb(95, 95, 95);
    color: white;
    border-radius: 5px;
    box-shadow: 1px 1px var(--btn-border-color);
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    font-weight: var(--button-font-weight);
    overflow-x: clip;
    margin: 0px 0px 0px 0px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    padding-block: 0px;
    padding-inline: 0px;
    border-width: 0px;
    border-style: none;
}
.wf-accordian-child-btn {
    background-color: rgb(95, 95, 95);
    color: white;
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    font-weight: var(--button-font-weight);
    overflow-x: clip;
    margin-right: 3px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    padding-block: 0px;
    padding-inline: 0px;
    border-width: 0px;
    border-style: none;
    height:32px;
    border-style:solid;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 2px;
    border-color: greenyellow;
}


.wf-titlebar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:  space-between;
    align-items: center;
    height: 32px;
    color: var(--winTitleBarCLR);
    background-color: var(--winTitleBarBGC);
    /* cursor: move; */
    padding-top: 0px;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 0px;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
}
.wf-titlebar-btn {
    display: grid;
    flex-grow: 0;
    cursor: pointer;
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    font-weight: var(--title-font-weight);
}
.wf-titlebar-title {
    display: grid;
    flex-grow: 9;
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    font-weight: var(--title-font-weight);
}
.wf-titlebar-btn:hover {
    background-color: #00000012;
}
.wf-svg-icon {
    display: grid;
    overflow: clip !important;
    align-self: center;
}
.wf-titlebar-icon {
    /* cursor: move; */
    padding-left: 5px;
}
.line-break {
  flex-basis: 100%; 
  height: 0; 
  width: 0; 
}
.wf-listinput-div {
    position: relative;
}
.wf-listinput-list {
    position: absolute;
    color: black;
    background-color: white;
    margin: 0px 0px 0px 0px;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    text-align: left;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    top: 30px;
    left: 0px;
    z-index: 100;
}
.wf-subform {
    flex-direction: column;
    border: 1px;
    border-color: black;
    background-color: #36374b8f;
}
.wf-selection {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: black;
    background-color: transparent;
    margin: 0px 0px 0px 0px;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    text-align: center;
    cursor: pointer;
    border-width: 0px;
    border-style: none;
   
}
.wf-div-titlebar-btn select {
    background-color: darkgrey !important;  
}
.wf-btn-color-red {
    color: black !important;
    background-color: red !important;
}
.wf-btn-color-0 {
    color: var(--btn-color-0) !important;
    background-color: var(--btn-bg-color-0) !important;
}
.wf-btn-color-1 {
    color: var(--btn-color-1) !important;
    background-color: var(--btn-bg-color-1) !important;
}
.wf-btn-color-2 {
    color: var(--btn-color-2) !important;
    background-color: var(--btn-bg-color-2) !important;
}
.wf-btn-color-3 {
    color: var(--btn-color-3) !important;
    background-color: var(--btn-bg-color-3) !important;
}
.wf-btn-color-4 {
    color: var(--btn-color-4) !important;
    background-color: var(--btn-bg-color-4) !important;
}
.wf-btn-color-5 {
    color: var(--btn-color-5) !important;
    background-color: var(--btn-bg-color-5) !important;
}
.wf-btn-color-6 {
    color: var(--btn-color-6) !important;
    background-color: var(--btn-bg-color-6) !important;
}
.wf-btn-color-7 {
    color: var(--btn-color-7) !important;
    background-color: var(--btn-bg-color-7) !important;
}
.wf-btn-color-8 {
    color: var(--btn-color-8) !important;
    background-color: var(--btn-bg-color-8) !important;
}
.wf-btn-color-9 {
    color: var(--btn-color-9) !important;
    background-color: var(--btn-bg-color-9) !important;
}
.wf-btn-color-10 {
    color: black !important;
    background-color: lightgray !important;
}
.wf-btn-color-11 {
    color: black !important;
    background-color: gray !important;
}
.wf-btn-color-12 {
    color: black !important;
    background-color:  lightcyan !important;
}
.wf-btn-color-13 {
    color: black !important;
    background-color:  pink !important;
}
.wf-btn-color-14 {
    color: black !important;
    background-color:  lightsteelblue !important;
}
.wf-btn-color-15 {
    color: black !important;
    background-color:  steelblue !important;
}
.wf-selected-btn {
    color: var(--sel-btn-txt-color) !important;
    background-color: var(--sel-btn-bg-color) !important;
}
.wf-btn-bar {
    display: flex;
    flex-direction: row;
    padding-left: 2px !important;
    padding-right: 2px !important;
    padding-top: 2px !important;
    padding-bottom: 5px !important;
    column-gap: 5px !important; 
    height: fit-content;
}

.wf-link-btn {
  background: none; 
  border: none; 
  padding: 0; 
  font: inherit; 
  background-color: transparent !important;
  color: #0a0b31 !important;  
  text-decoration: underline; 
  cursor: pointer; 
  -webkit-appearance: none;
  -moz-appearance: none; 
} 

.wf-link-btn-white {
  background: none; 
  border: none; 
  padding: 0; 
  font: inherit; 
  background-color: transparent !important;
  color: white !important; 
  text-decoration: underline; 
  cursor: pointer; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
}


.wf-btn {
    display: flex;
    flex-direction: row;
    color: var(--btn-txt-color);
    background-color: var(--btn-bg-color);
    border-radius: 5px;
    box-shadow: 1px 1px var(--btn-border-color);
    font-size: var(--button-font-size);
    line-height: 28px;
    font-weight: var(--button-font-weight);
    overflow-x: clip;
    margin: 0px 0px 0px 0px;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 5px !important;
    padding-right: 5px !important; 
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    padding-block: 0px;
    padding-inline: 0px;
    border-width: 0px;
    border-style: none;
    width: fit-content;
    line-height: 30px;
}
.wf-btn-sel
{
    background-color: lightgreen !important;
}
.no-radius {
    border-radius: 0px;
}


.wf-tab-btn {
    border-top-left-radius: 5px !important;  
    border-top-right-radius: 5px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    background-color: var(--div-tab-btn-bg-color);
    color: var(--div-tab-btn-color);
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    font-weight: var(--button-font-weight);
    overflow-x: clip;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 2px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    padding-block: 0px;
    padding-inline: 0px;
    border-style:solid;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    height: 32px;


}
.wf-alt-btn {
    color: var(--alt-btn-txt-color);
    background-color: var(--alt-btn-bg-color);
}

.wf-btn:hover {
    color: var(--btn-txt-color);
    background-color: var(--btn-hover-color);
}
.wf-btn:active {
    position: relative;
    left: 1px;
    top: 1px;
    box-shadow: none;
}
.wf-btn:focus {
    color: var(--btn-txt-color);
    background-color: var(--btn-focus-color);
}
.wf-btn:disabled {
    color: var(--btn-txt-color) !important;
    background-color: var(--btn-disabled-color) !important;
    position: relative;
    left: 0px !important;
    top: 0px !important;
    box-shadow: 3px 3px var(--btn-border-color) !important;
}
.wf-div-titlebar-btn
{
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    font-weight: var(--button-font-weight);
    overflow-x: clip;
    margin-top: 0px;
    margin-bottom: 1px;
    margin-left: 2px;
    margin-right: 0px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    padding-block: 0px;
    padding-inline: 0px;
    background-color: darkgrey;
    color: black;
    border-style:solid;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 2px;
    border-color: greenyellow;
    min-height: 32px;
    
}
.wf-div-titlebar-btn::selection {
    color: var(--btn-txt-color);
    background-color: rgb(191, 191, 191);
}
.wf-div-titlebar-btn:hover {
    color: var(--btn-txt-color);
    background-color: white;
}
.wf-div-titlebar-btn::content {
    color: var(--btn-txt-color);
    background-color: white;
}





.wf-default-btn {
    color: var(--btn-txt-color);
    background-color: var(--pri-btn-bg-color);
}
.wf-div-titlebar {
    display: flex;
    flex-direction: row;
    background-color: var(--div-titlebar-bg-color);
    color: var(--div-titlebar-color);
    padding-left: 0px;
    align-items: center;
}
.wf-div-spacer {
    flex-grow: 9;
}
.wf-title-text {
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    font-weight: var(--title-font-weight);
    vertical-align: middle;
}
.wf-scrollable-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    white-space: pre-wrap;
    background-color: white !important;
    color: black;
    padding-right: 10px;
    outline: none;
    padding: 10px;
}
.wf-scroll-panel {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    background-color: white !important;
    color: black;
    padding-right: 10px;
    outline: none;
    padding: 10px;
}



.wf-center-content
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.wf-cancel-btn {
    color: var(--btn-txt-color);
    background-color: var(--cancel-btn-bg-color);
}
.wf-icon {
    display: inline-grid;
    padding: 4px !important;
    height: 100%;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-align-content: center;
    -webkit-align-content: center;
    align-content: center;
}
.wf-simple-icon-btn {
    display: inline-grid;
    padding: 4px !important;
    height: 100%;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-align-content: center;
    -webkit-align-content: center;
    align-content: center;
}
.wf-simple-icon-btn:hover {
    background-color: var(--btn-hover-color);
    color: var(--btn-txt-color);
}
.wf-simple-icon-btn:focus {
    background-color: var(--btn-focus-color);
    color: var(--btn-txt-color);
}
.wf-pinnable-btn {
    display: inline-grid;
    padding-left: 3px !important;
    padding-right: 3px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;

    height: 100%;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-align-content: center;
    -webkit-align-content: center;
    align-content: center;
}
.wf-pinnable-btn:hover {
    background-color: var(--btn-hover-color);
    color: var(--btn-txt-color);
}
.wf-pinnable-btn:focus {
    background-color: var(--btn-focus-color);
    color: var(--btn-txt-color);
}
.wf-image {
    align-self: center;
    margin: 0px;
    object-fit: contain;
}
.wf-upload-preview {
    margin-top: 20px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
}
.wf-upload-preview.wf-hover {
    border: 2px solid black;
}
.wf-modal {
    display: none; 
    position: fixed;
    z-index: 2000; /* Sit on top */
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
}
#wf-background {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-height: 96px;
    height: calc(100vh);
    color: var(--pageCLR);
    background-color: var(--pageBGC);
    font-family: var(--font-stack);
}
#wf-windows {
    display: block;
    position: absolute; 
    color: var(--pageCLR);
    background-color: var(--pageBGC);
}
.add-Icon {
    width: 32px;
    height: 32px;
    fill: black;
}
.add-line {
    fill: rgb(127, 129, 255);
}
.wf-slider-div {
    display: flex;
    position: absolute;
    flex-direction: column;
    bottom: 0px;
    height: 300px;
}
.wf-slider {
    display: block;
    min-height: 10px;
    height: 10px;
    background-color: black;
}
.wf-console-div {
    overflow: auto;
    background-color: white;
    width: 100vw;
    color: black;
}
.wf-vert-spacer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    height: 25px;
}
/*#endregion util.css */
/*#region wfform.css */
.wf-form {
    display: flex;
    flex-shrink: 0;
    background: var(--backgroundColor);
    color: var(--color);
    /* border-radius: var(--radius);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);*/
    border: 1px;
    border-color: black;
    border-style: solid;
    --radius: 10px;
    --backgroundColor: #cfe2ff;
    --color: black;
}
.wf-form-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: var(--paddingBottom);
    padding-top: var(--paddingTop);
    --paddingTop: 0px;
    --paddingBottom: 0px;
    width: 100%;
    height: fit-content;
}
.wf-form-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 5;
    padding-left: var(--paddingLeft);
    padding-right: var(--paddingRight);
    column-gap: var(--columnGap);
    --paddingLeft: .5em;
    --paddingRight: .5em;
    --columnGap: .1em;
}
.wf-form-footer {
    padding-left: var(--paddingLeft);
    padding-right: var(--paddingLeft);
    padding-bottom: var(--paddingBottom);
    padding-top: var(--paddingTop);
    --paddingLeft: 0px;
    --paddingRight: 0px;
    --paddingBottom: 10px;
    --paddingTop: 10px;
}
.wf-form-header {
    align-self: center;
    font-size: var(--title-font-size);
    line-height: var(--title-line-height);
    font-weight: var(--title-font-weight);
    background-color: var(--backgroundColor);
    color: var(--color);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    padding-left: var(--paddingLeft);
    padding-bottom: var(--paddingBottom);
    padding-top: var(--paddingTop);
    --fontSize: 20px;
    --backgroundColor: white;
    --color: black;
    --paddingLeft: .5em;
    --paddingBottom: .5em;
    --paddingTop: .5em;
}

/*#endregion wfform.css */
/*#region wfgrid.css */
.wf-grid {
    display: inline-block;
    /*overflow: auto;*/
    background-color: var(--row-bg-color);
    color: var(--row-text-color);
    --header-bg-color: hsl(216, 100%, 35%);
    --header-text-color: white;
    --row-bg-color: white;
    --row-text-color: black;
    --alt-bg-color: hsl(216, 100%, 95%);
    --alt-text-color: black;
    --footer-bg-color: hsl(216, 100%, 35%);
    --footer-text-color: white;
    --border-color: black;
    --header-border-color: hsl(216, 100%, 35%);
    --header-font-size: 16px;
    --border-width: 1px;
    --header-font-weight: normal;
    --header-padding-left: 5px;
    --header-padding-right: 5px;
    --header-padding-top: 2px;
    --header-padding-bottom: 2px;
    --cell-padding-left: 2px;
    --cell-padding-right: 2px;
    --cell-padding-top: 0px;
    --cell-padding-bottom: 0px;
}
.wf-grid.wf-input, .wf-grid.wf-input-select, .wf-grid.wf-input-color {
    box-shadow: none !important;
    border: none !important;
    width: 100%;
    box-sizing: border-box;
}

.wf-grid.table {
    display: block;
    width: auto;
}
.wf-grid.table.th {
    width: fit-content;
    top: 0;
    position: sticky;
    background-color: var(--header-bg-color);
    color: var(--header-text-color);
    font-size: var(--header-font-size);
    border-width: var(--border-width);
    border-style: solid;
    border-color: var(--header-border-color);
    border-radius: 0px;
    padding-left: var(--header-padding-left );
    padding-right: var(--header-padding-right );
    padding-top: var(--header-padding-top );
    padding-bottom: var(--header-padding-bottom );
    font-weight: var(--header-font-weight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-grid.table.tbody {
    white-space: nowrap;
}

.wf-grid.table.td {
        width: fit-content;
        white-space: nowrap;
        line-height: 26px;
        height: 26px;
        border: 1px solid black;
        padding-left: var(--cell-padding-left );
        padding-right: var(--cell-padding-right );
        padding-top: var(--cell-padding-top );
        padding-bottom: var(--cell-padding-bottom );
}

.wf-grid.table.td.div {
    overflow: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-grid.table.alt-color {
    background-color: var(--alt-bg-color);
    color: var(--alt-text-color);
}

.wf-grid.table.tfoot {
    background-color: var(--footer-bg-color);
    color: var(--footer-text-color);
}
.wf-grid.table.td {
    border-width: var(--border-width);
    border-style: solid;
    border-color: var(--header-border-color);
    border-radius: 0px;
    padding-left: var(--header-padding-left );
    padding-right: var(--header-padding-right );
    padding-top: var(--header-padding-top );
    padding-bottom: var(--header-padding-bottom );
}

/*#endregion wfgrid.css */
/*#region wflist.css */
.wf-list-div {
    min-width: 100px;
}
.wf-list-title {
    color: black;
    background-color: gray;
    padding-top: 2px;
    padding-left: 5px;
    padding-right: 5px;
}
.wf-list-input {
    display: block;
    color: black;
    background-color: gray;
    width: 100%;
    height: 32px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    outline: none !important;
    border: 3px solid gray;
    background-color: transparent;
    background-clip: padding-box;
    color: black;
    overflow: auto;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.wf-list-input:focus {
    outline: none !important;
    border: 3px solid lightgreen;
}
.wf-list-input:hover {
    outline: none !important;
    border: 3px solid lightgreen;
}
.wf-list-color {
    background-color: var(--list-bg-color);
    color: var(--list-text-color);

}
/*#endregion wflist.css */
/*#region wfreport.css */
.wf-report-div
{
    display:  flex; 
    margin-top:20px; 
    align-items: center; 
    justify-content: center;
}
.wf-report
{
    display: flex; 
    flex-direction: column; 
    background-color: #fcf7dd;
    padding: 10px;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    min-width: 300px;
    margin: auto; 
    max-width: 600px; 
    font-size: 22px;
}
/*#endregion wfreport.css */
/*#region zbible.css */
.b-main {
    flex-grow: 1;
    background-color: lightgrey; 
}
.b-app-div {
    position: fixed;
    display: flex;
    flex-direction: column;
    background-color: white;
    margin: 0px;
    height: 100vh;
    width: 100vw;
    min-width: 300px;
    z-index: -100;
}
.b-pin-btn {
    display:inline;
    position: absolute; 
    top: 6px;
    left: Calc(100% - 55px);
}
.b-text {
    display: flex;
    flex-direction: column;
    position: fixed;
    background-color: white;
    box-shadow: 0.3em 0.3em 1em rgb(0 0 0 / 60%);
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    font-family: var(--btext-font-family) !important;
    font-size: var(--btext-font-size) !important; 
    line-height: var(--btext-line-height) !important;
    font-weight: var(--btext-font-weight) !important;
}
.b-search-phrase-lookup
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 5px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.b-search {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: -2000;
    background-color: white;
    color: black;
    box-shadow: 0.3em 0.3em 1em rgb(0 0 0 / 60%);
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.b-top-bar-title {
    font-family: 'NotoSansBold';
    font-size: 1.8em;
    margin-left: auto;
    margin-right: auto;
}
.b-menu-btn {
    font-size: 22px;
    overflow-x: clip;
    margin: 0px 0px 0px 0px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    width: fit-content;
}
.b-btn {
    font-size: 18px !important;
    height: 32px;
    line-height: 1.5;
    overflow-x: clip;
    margin: 0px 0px 0px 0px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    text-align: center;
}
.b-btitle { /* Bible Book Title */
    display: inline-block;
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    font-family: var(--btitle-font-family) !important;
    font-size: var(--btitle-font-size) !important; 
    line-height: var(--btitle-line-height) !important;
    font-weight: var(--btitle-font-weight) !important;

}
.b-bname { /* Bible Book Name */

    font-family: 'NotoSansBold';
    font-size: 1.3em;
    margin-bottom: 0.5em;
}
.b-ctitle { /* Bible Chapter Title */
    display: inline-block;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
    font-family: var(--btitle-font-family) !important;
    font-size: var(--btitle-font-size) !important; 
    line-height: var(--btitle-line-height) !important;
    font-weight: var(--btitle-font-weight) !important;
}
.b-h1 { /* For Headers */
    display: inline-block;
    font-family: 'NotoSansBold';
    font-size: 1.3em;
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
 }
/* Bible Verse Title - I think opnly used in The book of Psalms */
.b-vtitle {
    display: inline-block;
    font-size: 1.2em;
    margin-bottom: 3px;
    margin-top: 3px;
    text-align: center;
    width: 100%;
}
.b-form-title {
    display: inline-block;
    font-size: 1.2em;
    margin-bottom: 3px;
    margin-top: 3px;
    text-align: center;
    width: 100%;
    font-size: 21px; 
    font-family: 'NotoSans'; 
    line-height: 1.5; 
    font-weight: bold;
}

/* Bible Colophon - This is text at the end of some of the Apostle Pauls Books*/
.b-colophon {
    font-family: 'NotoSansItalic';
    font-size: 1.2em;
    margin-top: 1rem;
}
.b-vn { /* Bible Verse Number */
    display: inline-block;
    font-size: .8em;
    color: black;
    margin-right: 2px;
    vertical-align: top;
}
.b-vt { /* Bible Verse Text */
    display: block;
    color: black;
    margin-top: 5px;
    background-color: transparent;
    font-family: var(--btext-font-family) !important;
    font-size: var(--btext-font-size) !important; 
    line-height: var(--btext-line-height) !important;
    font-weight: var(--btext-font-weight) !important;
}
.b-ot {
    display: block;
    color: black;
    background-color: transparent;
    font-family: var(--btext-font-family) !important;
    font-size: var(--btext-font-size) !important; 
    line-height: var(--btext-line-height) !important;
    font-weight: var(--btext-font-weight) !important;


}
.b-ot-bold {
    display: block;
    color: black;
    background-color: transparent;
    font-weight: bold !important;
    font-family: var(--btext-font-family) !important;
    font-size: var(--btext-font-size) !important; 
    line-height: var(--btext-line-height) !important;
}

.b-sel {
    background: #dadada;
    color: black;
}
.b-unsel {
    color: black;
}
.b-ht {
    background-color: #dad7bc !important;
    font-family: var(--btext-font-family) !important;
    font-size: var(--btext-font-size) !important; 
    line-height: var(--btext-line-height) !important;
    font-weight: var(--btext-font-weight) !important;
}
.b-rt { /* Bible Red Text - When Jesus is being quoted*/
    display: inline;
    color: darkred;
    font-family: var(--btext-font-family) !important;
    font-size: var(--btext-font-size) !important; 
    line-height: var(--btext-line-height) !important;
    font-weight: var(--btext-font-weight) !important;
}
.b-unsel .b-rt {
    color: darkred;
}
.b-at { /* Bible Added Text - I think these are words not in the original text, but make the english version more readable */
    display: inline;
    font-family: 'NotoSansItalic' !important;
    font-size: var(--btext-font-size) !important; 
    line-height: var(--btext-line-height) !important;
    font-weight: var(--btext-font-weight) !important;
}
.b-para { /* Paragraph - basically turn <BR> into a carrige return. This helps to keep each verse self contained, by not having to group them into <p></p> elements. */
    line-height: 0px;
}
.b-btn-panel{
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    row-gap: 5px !important;
    column-gap: 10px !important;
}
.b-label {
    background-color: white;
    color: black;
    padding-left: 5px;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;

}
.b-input {
    background-color: white;
    color: black;
    padding-left: 2px;
    padding-top: 0px;
    padding-right: 2px;
    padding-bottom: 0px;
}
.b-row
{
    display: flex; 
    flex-direction: row; 
    background-color: black; 
    color: white;
    padding-left: 5px;
    padding-right: 5px;
}
.b-row-text { /* Bible Verse Text */
    display: flex;
    flex-direction: row;
    color: black;
    background-color: white;
    padding-left: 5px;
    padding-right: 5px;
    align-items: center;
}
.b-left-col
{
    width: 33%; 
    text-align: left;
}
.b-right-col
{
    width: 33%; 
    text-align: right;
}
.b-center-col
{
    width: 33%; 
    text-align: center;
}
.b-verse
{
    display: flex; 
    flex-direction: column; 
    background-color: white; 
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5); 
    font-size: 19px; 
    font-family: NotoSans; 
    line-height: 1.5; 
    max-width: 800px; 
    margin-top: 0px;
    margin-bottom: 0px;
}
.b-vdiv
{
    display: flex; 
    flex-direction: column; 
    padding: 10px; color: black; 
    line-height: 1.3; 
    row-gap: 8px;
}
.b-bmverse
{
    display: flex; 
    flex-direction: column; 
    padding: 10px; color: black; 
    line-height: 1.3; 
    white-space: normal !important;
    
}
.b-row-centered-text
{
    display: flex; 
    flex-direction: row; 
    background-color: black; 
    color: white; 
    justify-content: center;
    width: 100%;
}
.b-bm-content
{
    display: flex;
    flex-direction: column;
    padding-left: 5px;
    padding-right: 5px;
   
}
.b-bm {
    border: black;
    border-width: 1px;
    
    margin-bottom: 5px;
    background-color: rgb(231, 231, 231);
    padding: 5px;

}
/*#endregion zbible.css */