/* Color Variables */
:root {

    --jqm-dlweb-color-text-default: #333333;
    --jqm-dlweb-color-disabled-text: #4c4c4c;

    --jqm-dlweb-color-primary: #174f96;
    --jqm-dlweb-color-toast-bg: #002D72;

    --jqm-dlweb-color-disabled-bg: #90979e;
    --jqm-dlweb-color-border: #dddddd;
    --jqm-dlweb-color-grid-striped: #FBFBFB;
    --jqm-dlweb-color-gallery-border: #3c3c3c;

    --jqm-dlweb-color-alert: #ca4721;
    --jqm-dlweb-color-success: #4da85a;
    --jqm-dlweb-color-warning: orange;

    --jqm-dlweb-color-hover-bg: #bbbbbb;
    --jqm-dlweb-color-fab-hover-bg: #eceff3;
    --jqm-dlweb-color-fab-options-hover: #3e72b6;
    --jqm-dlweb-color-fab-bg: #ffffff;

    --jqm-dlweb-color-default-white: white;
    --jqm-dlweb-color-default-black: black;
    --jqm-dlweb-color-flipswitch-forecolor-inactive: black;
    --jqm-dlweb-color-flipswitch-forecolor-active: white;
    --jqm-dlweb-color-default-highlight: #ffffff;
    --jqm-dlweb-fab-color-default-highlight: #ffffff;

    --jqm-dlweb-color-default-popup: black;
    --jqm-dlweb-color-default-popup-active: white;
    --jqm-dlweb-color-default-popup-hov: black;

    --jqm-dlweb-color-shadow-0-3: rgba(0, 0, 0, 0.3);
    --jqm-dlweb-color-shadow-0-2: rgba(0, 0, 0, 0.2);
    --jqm-dlweb-color-shadow-0-1: rgba(0, 0, 0, 0.1);
    --jqm-dlweb-color-shadow-0-14: rgba(0, 0, 0, 0.14);
    --jqm-dlweb-color-shadow-0-12: rgba(0, 0, 0, 0.12);
    --jqm-dlweb-color-action-shadow: #1e1e1e;
    --jqm-dlweb-color-action-bg: gray;
}

@media (prefers-color-scheme: dark) {
    :root {

        --jqm-dlweb-color-text-default: #e7e7e7;
        --jqm-dlweb-color-disabled-text: #4c4c4c;

        --jqm-dlweb-color-primary: #174f96;
        --jqm-dlweb-color-toast-bg: #002D72;

        --jqm-dlweb-color-disabled-bg: #90979e;
        --jqm-dlweb-color-border: #545454;
        --jqm-dlweb-color-grid-striped: #bababa;
        --jqm-dlweb-color-gallery-border: #545454;

        --jqm-dlweb-color-alert: #ca4721;
        --jqm-dlweb-color-success: #4da85a;
        --jqm-dlweb-color-warning: orange;

        --jqm-dlweb-color-hover-bg: #b8b8b8;
        --jqm-dlweb-color-fab-hover-bg: #b8b8b8;
        --jqm-dlweb-color-fab-options-hover: #3c3c3c;
        --jqm-dlweb-color-fab-bg: #121212;

        --jqm-dlweb-color-default-white: var(--jqm-body-background-color);
        --jqm-dlweb-color-default-black: #e7e7e7;
        --jqm-dlweb-color-default-highlight: #3388cc;
        --jqm-dlweb-fab-color-default-highlight: #e7e7e7;
        --jqm-dlweb-color-flipswitch-forecolor: #121212;

        --jqm-dlweb-color-default-popup: #e7e7e7;
        --jqm-dlweb-color-default-popup-active: #e7e7e7;
        --jqm-dlweb-color-default-popup-hov: #121212;

        --jqm-dlweb-color-shadow-0-3: rgba(0, 0, 0, 0.3);
        --jqm-dlweb-color-shadow-0-2: rgba(0, 0, 0, 0.2);
        --jqm-dlweb-color-shadow-0-1: rgba(0, 0, 0, 0.1);
        --jqm-dlweb-color-shadow-0-14: rgba(0, 0, 0, 0.14);
        --jqm-dlweb-color-shadow-0-12: rgba(0, 0, 0, 0.12);
        --jqm-dlweb-color-action-shadow: white;
        --jqm-dlweb-color-action-bg: #1e1e1e;
    }

    /* ver5.30 */
    textarea:placeholder-shown,
    input:placeholder-shown {
        font-style: italic !important;
    }

    ion-card-title {
        color: var(--jqm-dlweb-color-text-default);
    }

    a.link-dark {
        color: var(--jqm-dlweb-color-default-black);
    }

    a.link-dark:hover {
        color: var(--jqm-dlweb-color-hover-bg);
    }

    .action-section {
        background-color: var(--jqm-dlweb-color-action-bg);
        border: 1px solid gray;
        border-radius: 10px;
        padding: 6px;

        h2 {
            border-bottom-width: 1px;
        }

        ul {
            li:not(:last-child) {
                box-shadow: 0 24px 2px -24px var(--jqm-dlweb-color-action-shadow);
            }
        }
    }

    .history-btn {
        --color: var(--jqm-dlweb-color-text-default);
        color: var(--jqm-dlweb-color-text-default);
    }
}

/* This is a work-a-round for getting ionic to recognize dark mode, should be a better way of doing this */
/* ion-item::part(native) == select element with attribute part=native for shadow elements attached to ion-item */
/*ion-card, ion-card-header, ion-card-content, ion-item, ion-grid, ion-row, ion-col, ion-item::part(native) {
    background-color: var(--ion-dlweb-color-bg);
    color: var(--ion-dlweb-color-text);
}*/


/* General Settings */
/* class to make things invisible */
.displaynone,
.ui-header .ui-btn.displaynone,
.dlweb-hidecell {
    display: none;
}

.dlweb-padding-bottom-10 {
    padding-bottom: 10px;
}

.dlweb-padding-top-10 {
    padding-top: 10px;
}

/* class for creating margins around a control.  Used for Home page buttons */
.dlweb-margin-point-five-em {
    margin: 0 .5em 0 .5em;
}

/* padding used in li elements around the inputs like dropdowns and text */
.ui-listview>li.dlweb-input {
    /* padding top right bottom left */
    padding: .1em 15px .1em 10px;
}

/* background white for data entry. */
.dlweb-content,
.ui-input-text input {
    background: none;
    background-color: var(--jqm-dlweb-color-default-white);
    color: var(--jqm-dlweb-color-text-default);
}

/* Notification 'Dot' in corner */
.dot-notification:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 20px;
    top: 0px;
    background-image: radial-gradient(circle at center, var(--jqm-dlweb-color-primary) 5px, transparent 5px);
    background-size: 20px 20px;
    background-position: top center;
    background-repeat: no-repeat;
    right: 0px;
}

.ui-btn-active.dot-notification:after {
    background-image: radial-gradient(circle at center, white 5px, transparent 5px);
}

/* Disabled fields selector.  Want to override opacity so it won't look too light */
.ui-disabled,
.ui-state-disabled,
button[disabled],
.ui-select .ui-btn.ui-state-disabled,
.dlweb-label-disabled,
.ui-state-disabled>input {
    /* style rule of thumb is below 40% opacity for disabled fields depending on pallette of background, and do not change forecolor opacity */
    opacity: .8;
    font-style: italic;
}

/* input's for some reaon get .8 applied twice, change to 1 for this type of input */
.ui-state-disabled>input {
    opacity: 1;
}

/* disabled listboxes, change color of the button */
.ui-state-disabled.ui-btn-icon-right:after {
    background-color: var(--jqm-dlweb-color-disabled-bg);
}

/* selector of all disabled text fields to remove border 
div.ui-input-text.ui-state-disabled {
    border:none;
}
/* selector of all disabled list boxes to remove the button and border 
a.ui-icon-carat-d.ui-state-disabled.ui-btn-icon-right, a.ui-icon-carat-d.ui-state-disabled.ui-btn-icon-right:after {
    border:none;
    background-color:var(--jqm-dlweb-color-default-white);
}
*/
/* help text used at the top of the screen explaining the key entry information */
.dlweb-helptext {
    color: var(--jqm-dlweb-color-text-default);
    padding-left: 16px;
    padding-right: 16px;
}

/* Header and Navbar overflow setting for Z-order */
.ui-panel-fixed-toolbar.dlweb-header {
    overflow-x: visible;
}

/* remove borders around heads and footers */
.ui-header,
.ui-footer {
    border-style: none;
}

.ui-navbar {
    border-color: var(--jqm-dlweb-color-border);
    border-width: 1px 0;
    border-bottom-style: solid;
}

/* clocked in image */
.dlweb-clocked-in {
    content: url('../images/icons8-clock-48.png');
}

/* Popup Messages (Toast) Settings */
/* Toast message on save/error/etc */
.toast-msg {
    display: none;
    min-width: 150px;
    background-color: var(--jqm-dlweb-color-toast-bg);
    text-align: left;
    border-radius: 15px;
    padding: 16px;
    position: fixed; /* ✅ changed from absolute */
    z-index: 10;
    left: 50%;
    top: 50%; /* ✅ use top instead of bottom for more intuitive centering */
    transform: translate(-50%, -50%);
}

/* Grid Settings */
/* grid definitions used in search screens and older entry windows */
.dlweb-grid {
    overflow: hidden;
}

.dlweb-block1-25,
.dlweb-block1-30,
.dlweb-block1-50,
.dlweb-block1-75 {
    margin: 0;
    padding: 0;
    border: 0;
    clear: left;
    min-height: 1px;
}

.dlweb-grid .dlweb-block1-25 {
    width: 25%;
}

.dlweb-grid .dlweb-block1-30 {
    width: 30%;
}

.dlweb-grid .dlweb-block1-50 {
    width: 50%;
}

.dlweb-grid .dlweb-block1-75 {
    width: 75%;
}

.dlweb-block2-25,
.dlweb-block2-50,
.dlweb-block2-75,
.dlweb-block2-20 {
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    min-height: 1px;
}

.dlweb-grid .dlweb-block2-25 {
    width: 25%;
}

.dlweb-grid .dlweb-block2-50 {
    width: 50%;
}

.dlweb-grid .dlweb-block2-70 {
    width: 70%;
}

.dlweb-grid .dlweb-block2-75 {
    width: 75%;
}

.dlweb-grid .dlweb-block1-25,
.dlweb-grid .dlweb-block1-50,
.dlweb-grid .dlweb-block1-70,
.dlweb-grid .dlweb-block1-75 {
    clear: left;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.dlweb-grid .dlweb-block2-25,
.dlweb-grid .dlweb-block2-50,
.dlweb-grid .dlweb-block2-70,
.dlweb-grid .dlweb-block2-75 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.dlweb-grid .dlweb-block2-20 {
    width: 20%;
}

/* Password entry settings */
/* Style for capslock warning on password entry */
.capslock {
    /* layout */
    position: relative;
    max-width: 14em;
    display: none;
    /* looks */
    background-color: var(--jqm-dlweb-color-alert);
    color: var(--jqm-dlweb-color-default-white);
    padding: 1em 1em;
    border-radius: 1rem;
    box-shadow: 0 0.125rem 0.5rem var(--jqm-dlweb-color-shadow-0-3), 0 0.0625rem 0.125rem var(--jqm-dlweb-color-shadow-0-2);
}

.capslock::before {
    /* layout */
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: 100%;
    left: 1.5em;
    /* offset should move with padding of parent */
    border: .75rem solid transparent;
    border-top: none;
    /* looks */
    border-bottom-color: var(--jqm-dlweb-color-alert);
    filter: drop-shadow(0 -0.0625rem 0.0625rem var(--jqm-dlweb-color-shadow-0-1));
}

/* List Settings */
/* List results such as work order lists */
.dlweb-list-label {
    color: var(--jqm-dlweb-color-default-black);
    font-weight: normal;
    font-size: 10px;
}

.dlweb-list-data {
    color: var(--jqm-dlweb-color-default-black);
    font-weight: normal;
    font-size: 12px;
}

ul.dlweb-list,
.ui-content .ui-listview.dlweb-list {
    margin-bottom: 0;
}

.dlweb-list table {
    font-weight: normal;
    font-size: 10px;
    line-height: normal;
    display: table;
    border-collapse: separate;
    border-spacing: 0px;
    border: 0;
    padding: 0;
    width: 100%;
}

.dlweb-list table thead .dlweb-list-col1 {
    width: 60px;
    padding: 0;
}

.dlweb-list table thead .dlweb-list-col2 {
    padding: 0;
}

.dlweb-list table tr td {
    vertical-align: top;
    text-align: left;
    padding: 0 0 1px 0;
    padding-right: 5px;
}

.dlweb-list-wrapper {
    margin-top: -1em;
}

/* override for h5/h3 list elements if we want them to appear as normal items */
.ui-listview>li h5.dlweb-list-label,
.ui-listview>li h3.dlweb-list-label {
    font-weight: normal;
}

/* simple dropdown list style */
.ui-listview>li[role="option"]>.ui-btn {
    color: var(--jqm-dlweb-color-default-popup);
}

.ui-listview>li[role="option"]>.ui-btn:hover {
    color: var(--jqm-dlweb-color-default-popup-hov);
}

.ui-listview>li[role="option"][aria-selected="true"]>.ui-btn:not(.ui-checkbox-on) {
    color: var(--jqm-dlweb-color-default-popup-active);
}

/* List settings page style */
.dlweb-settings.dlweb-page[data-role="page"] {
    padding-top: 81px;
}

/* List Cards - subset of lists like work order list to be used for some of our lists */
ul.dlweb-card-list a.ui-btn {
    margin: 0px;
    padding: 0px;
    border: none;
}

/* Card Padding*/
ion-card {
    margin: 5px 10px 5px 10px;
}

/* Card Header */
ion-card-header {
    padding-top: 6px;
    padding-bottom: 6px;
}


/* List Card title */
ion-card-title {
    font-size: 16px;
    font-weight: 700;
}

/* List Card sub title */
ion-card-subtitle {
    font-size: 14px;
    font-weight: normal;
    color: var(--jqm-dlweb-color-text-default);
    margin: 0px;
    padding-top: 2px;
}

ion-card-subtitle,
ion-card-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* ion-card-header+.card-content-md */
.dlweb-card-list ion-card ion-card-content.card-content-md {
    color: var(--jqm-dlweb-color-text-default);
    padding-top: 0;
    padding-bottom: 6px;
}


/* List Card content */
.dlweb-list-label,
.dlweb-list-data {
    font-size: 10px;
    font-weight: normal;
}

/* List Card content additional padding */
.dlweb-card-list.dlweb-content-list ion-card-content ion-row {
    padding-top: 1px;
}

/* list flag style general for all notification items like overdue and checklist attached  */
.dlweb-list-flag,
.ui-listview .dlweb-list-flag {
    top: 2px;
    right: 6px;
    width: 70%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Label Settings */
/* labels - usually in column #1 */
.dlweb-label,
.dlweb-label label {
    font-size: 16px;
    font-weight: normal;
    color: var(--jqm-dlweb-color-text-default);
    text-align: right;
    padding-inline-end: 10px;
}

.dlweb-label-small,
.dlweb-label-small label {
    font-size: 12px;
    text-align: right;
    font-weight: normal;
    color: var(--jqm-dlweb-color-text-default);
    padding-inline-end: 10px;
}

.dlweb-label-bold,
.dlweb-label-bold label {
    font-size: 14px;
    text-align: right;
    font-weight: bold;
    color: var(--jqm-dlweb-color-text-default);
    padding-inline-end: 10px;
}

.dlweb-wrap,
.dlweb-wrap label {
    white-space: normal;
    word-break: break-word;
    line-height: normal;
}

.dlweb-wrap-break-all,
.dlweb-wrap-break-all label {
    white-space: normal;
    word-break: break-all;
    line-height: normal;
}

.dlweb-label-left,
.dlweb-label-left label {
    font-size: 16px;
    font-weight: normal;
    color: var(--jqm-dlweb-color-text-default);
    text-align: left;
    padding-inline-start: 10px;
}

/* remove jquery margin so it lines up properly with other controls */
.ui-mobile label {
    margin: 0 0 0;
}

/* class for data appearing under labels/controls as small description */
.dlweb-data-small,
.dlweb-data-small label {
    font-size: 12px;
    font-weight: normal;
    text-align: left;
    color: var(--jqm-dlweb-color-toast-bg);
}

.dlweb-msg-red,
.dlweb-msg-red label {
    color: var(--jqm-dlweb-color-alert);
}

.dlweb-msg-green,
.dlweb-msg-green label {
    color: var(--jqm-dlweb-color-success);
}

.dlweb-msg-orange,
.dlweb-msg-orange label {
    color: var(--jqm-dlweb-color-warning);
}

/* the nomargin css settings are for label created using O4WTextOptions() and the label is not in a ion-grid*/
.dlweb-nomargin {
    margin: 0px;
}

.dlweb-nomargin-top {
    margin-top: 0px;
}

.dlweb-nomargin-bottom {
    margin-bottom: 0px;
}

/* Search Screen Settings */
/* search screen custom styles to vertically center the labels on the left */
.dlweb-table {
    display: table;
    padding-right: .5em;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    max-width: 100%;
}

.dlweb-table-cell-middle {
    display: table-cell;
    vertical-align: middle;
}

.dlweb-table-cell-middle label {
    margin-bottom: .6em;
    margin-top: .6em;
    /* padding-inline-end: 2px; */
    padding-inline-end: 5px;
}

/* Search TextBox (text and button) */
div.dlweb-search-textbox {
    padding-right: 40px;
}

/* Search TextBox internal div (text location)*/
div.dlweb-search-wrapper1 {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    right: -36px;
}

/* Search TextBox internal div 2 (button location)*/
div.dlweb-search-wrapper2 {
    margin: 0;
}

/* Label custom class heights for search text boxes */
.dlweb-table-height-text {
    min-height: 20px;
}

.dlweb-table-height-listbox {
    min-height: 60px;
}

.dlweb-table-height-link {
    min-height: 60px;
}

.dlweb-table-height-textbox {
    min-height: 53px;
}

.dlweb-table-height-flipswitch {
    min-height: 48px;
}

.dlweb-table-height-checkbox {
    min-height: 60px;
}

/* block settings for search screen to make labels appear left of data */
.dlweb-block1-25,
.dlweb-block1-30,
.dlweb-block1-50,
.dlweb-block1-75 {
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    min-height: 1px;
}

/* settings screen or search lists */
.ui-listview>li p {
    font-size: inherit;
}

/* search popups additional classes */
div.dlweb-table {
    display: table;
    padding-right: .5em;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    max-width: 100%;
}

/* style change so dropdown results list doesn't overlap the filter screen */
.ui-selectmenu.ui-dialog .ui-selectmenu-list {
    margin-top: 0;
}

/* Header of simple dropdowns with type aheads (ie: building) */
.dwv.ui-header,
.ui-selectmenu .ui-header[role="banner"] {
    border-bottom-width: 1px;
}

/* dialog box 'border' done with shadows for thinner lines */
div[role="dialog"].ui-dialog-contain {
    border-style: solid;
    border-width: 1px;
    border-color: var(--jqm-dlweb-color-border);
}

div[role="dialog"].ui-body-a {
    border-width: 3px;
}

/* List settings page style */
div[role="dialog"] div[data-role="footer"].dlweb-footer {
    display: none;
}

/* Button settings */
/* listbox button / dropdown styles.  Order is important */
a.ui-btn[role="button"]:not(.dwwb),
.dlweb-listbox div.ui-select div.ui-btn {
    background-color: var(--jqm-dlweb-color-default-white);
    text-align: left;
    padding-top: 7px;
    padding-bottom: 7px;
    font-weight: normal;
}

a.ui-btn[role="button"]:not(.dwwb):hover,
.dlweb-listbox div.ui-select div.ui-btn:hover {
    background-color: var(--jqm-dlweb-color-hover-bg);
}

/* listbox list options */
li[role=option] a.ui-btn {
    background-color: var(--jqm-dlweb-color-default-white);
}

/* Update to padding on buttons for search screens */
div[role="dialog"] a.ui-btn[role="button"]:not(.dwwb),
#lnkhdrdone {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
}

/* bottom buttons of time/date dropdown (mobiscroll scroller) */
div[role="dialog"] a.ui-btn.dwb[role="button"],
.dlweb-label-centered {
    text-align: center;
}

/* selection buttons of time/date dropdown (mobiscroll scroller) */
.dwwl,
.dwwb.ui-btn {
    -webkit-box-shadow: 0 0px 2px;
    -moz-box-shadow: 0 0px 2px;
    box-shadow: 0 0px 2px;
}

/* Month buttons for Calendar style picker (mobiscroll calendar) */
div[role="dialog"] a.ui-btn[role="button"].dw-cal-btn-txt {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* dialog box x in corner, must be below listbox button updates */
div.dlweb-page[data-role=dialog] a.ui-corner-all.ui-btn-right:not([aria-haspopup="true"]) {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* checkbox buttons */
.ui-checkbox .ui-btn {
    background-color: var(--jqm-dlweb-color-default-white);
    color: var(--jqm-dlweb-color-text-default);
    font-weight: normal;
    padding-top: 7px;
    padding-bottom: 7px;
}

/* flipswitch buttons */
.ui-flipswitch.ui-shadow-inset.ui-bar-inherit.ui-corner-all {
    background-color: lightgray;
    color: var(--jqm-dlweb-color-flipswitch-forecolor-inactive);
}

.ui-flipswitch.ui-shadow-inset.ui-bar-inherit.ui-corner-all.ui-flipswitch-active {
    background-color: var(--jqm-dlweb-color-primary);
    color: var(--jqm-dlweb-color-flipswitch-forecolor-active);
}

/* edit button - next to text box*/
ion-col.dlweb-cell-button {
    align-self: center;
}

.dlweb-cell-button div.ui-icon-edit {
    margin-left: 5px;
}

/* Document Settings */
/* Gallery styles for images/documents shown in "Documents" collapsable section */
.dlweb-padding-10 {
    padding: 10px;
}

.gallery {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gallery:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.gallery li {
    float: left;
    width: 33.33333333%;
}

.gallery li a {
    display: block;
    margin: 5px;
    border: 1px solid var(--jqm-dlweb-color-gallery-border);
}

.gallery li img {
    display: block;
    width: 100%;
    height: auto;
}

.gallery-page .ui-content {
    overflow: hidden;
}

/* style for zoomed in gallery view (when you click a photo to view) */
.phototo {
    /* width: auto; */
    width: 53vw;
    position: fixed;
    z-index: 20;
    max-width: 1024px;
    max-height: 1024px;
}

/* reduce padding and spaces within the document collapsible section */
div.dlweb-data h5 {
    margin: 0px;
}

/* Collapsible Settings */
/* collapsible content section remove padding */
.ui-collapsible-content {
    padding: 0px;
}

/* change collapsible heading to white background */
.ui-collapsible-heading .ui-collapsible-heading-toggle {
    background-color: var(--jqm-dlweb-color-default-white);
}

/* change collapsible menu headings to white background */
#menu_MenuList .ui-collapsible-heading-toggle.ui-btn:hover {
    background-color: var(--jqm-dlweb-color-hover-bg);
}

/* children entities of menu entities */
.ui-collapsible-content>.ui-listview {
    margin: inherit;
}

/* DLWEB Ionic Settings */
/* ionic label column reposition */
ion-col.dlweb-label {
    align-self: center;
}

ion-col.header {
    color: var(--jqm-dlweb-color-text-default);
}

ion-row.dlweb-table-row {
    border-top: 1px solid var(--jqm-dlweb-color-border);
}

/* updated lastrow in a table so we can apply additional styles */
ion-row.dlweb-table-lastrow {
    border-bottom: 1px solid var(--jqm-dlweb-color-border);
    margin-bottom: 5px;
}

/* last row remove the add/remove buttons via style */
ion-row.dlweb-table-lastrow ion-col div.ui-icon-plus,
ion-row.dlweb-table-lastrow ion-col div.ui-icon-delete {
    display: none;
}

ion-row.dlweb-table-row ion-col.dlweb-data {
    padding-right: 5px;
}

ion-row.dlweb-table-row ion-col:has(div.ui-btn) {
    padding-top: 3px;
    padding-left: 5px;
}

/* override for dlweb labels that have the 'containing' etc options under */
ion-col.dlweb-label-top {
    align-self: start;
    padding-top: 15px;
}

ion-col.dlweb-list-label,
ion-col.dlweb-list-data {
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;
}

.dlweb-content {
    --ion-grid-padding: 0px;
    --ion-grid-column-padding: 0px;
}

/* Additional styling that can be added to an ionic row. */
.dlweb-ion-row {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--jqm-dlweb-color-border);
}

/* apply classes dlweb-grid-ion and dlweb-grid-ion-striped to gridclass if you want ionic rows to cycle colours */
.dlweb-grid-ion.dlweb-grid-ion-striped ion-row:nth-child(even) {
    /*background-color: rgb(248,248,248);*/
    background-color: var(--jqm-dlweb-color-grid-striped);
}

.dlweb-grid-ion.dlweb-grid-ion-striped ion-row:last-child {
    border-bottom: 1px solid var(--jqm-dlweb-color-border);
    margin-bottom: 5px;
}

.dlweb-grid-ion.dlweb-grid-ion-striped .dlweb-ion-row {
    margin-top: 0;
    padding-bottom: 5px;
    padding-top: 5px;
    border-top: 1px solid var(--jqm-dlweb-color-border);
}

/* Adding style to barcode buttonss */
.dlweb-barcode-btn-div {
    width: calc(100% - 38px);
    float: left;
}

.dlweb-barcode-btn {
    float: left;
    top: 3px;
}

.dlweb-barcode-popup {
    left: 10%;
    width: 80%;
    height: auto;
    max-height: 85%;
    position: fixed;
    z-index: -1;
    overflow-y: scroll;
}

.dlweb-uppercase {
    text-transform: uppercase;
}

/* FAB Section*/
.fab-container-wrapper {
    /* display: flex; */
    /* justify-content: flex-end; */
    position: absolute;
    bottom: 0px;
    right: 50px;
}

.fab-options a,
.fab-options a:visited {
    color: var(--jqm-dlweb-fab-color-default-highlight);
    background-color: var(--jqm-dlweb-color-primary);
}

.fab-options .ui-state-disabled a,
.fab-options .ui-state-disabled a:visited {
    color: var(--jqm-dlweb-color-disabled-text);
    background-color: lightgrey;
}

.fab-options .ui-state-disabled {
    opacity: 1.0;
}

.fab-options a:hover {
    color: var(--jqm-dlweb-color-fab-hover-bg);
    background-color: var(--jqm-dlweb-color-fab-options-hover);
}

.fab-container {
    position: fixed;
    top: 90%;
    cursor: pointer;
    z-index: 20;
    background-color: var(--jqm-dlweb-color-fab-bg);
}

/* .dlweb-page .dlweb-header a.fab-icon-holder, */
.fab-icon-holder {
    display: inline-block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    /* background-color: var(--jqm-dlweb-color-primary); */
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    transition: 0.2s ease-out;
    box-shadow: 0 2px 2px 0 var(--jqm-dlweb-color-shadow-0-14), 0 1px 5px 0 vvar(--jqm-dlweb-color-shadow-0-12), 0 3px 1px -2px var(--jqm-dlweb-color-shadow-0-2);
    cursor: pointer;
    color: var(--jqm-dlweb-color-default-highlight);
}

/* .dlweb-page .dlweb-header a.fab-icon-holder:hover, */
.fab-icon-holder:hover {
    background-color: var(--jqm-dlweb-color-fab-hover-bg);
    box-shadow: 0 3px 3px 0 var(--jqm-dlweb-color-shadow-0-14), 0 1px 7px 0 vvar(--jqm-dlweb-color-shadow-0-12), 0 3px 1px -1px var(--jqm-dlweb-color-shadow-0-2);
}

.fab-icon {
    color: var(--jqm-dlweb-color-primary);
    /* font-size: 50px; */
    font-size: 40px;
    padding-top: 5px;
    pointer-events: none;
}

.fab-icon-file {
    color: var(--jqm-dlweb-color-primary);
    font-size: 16px;
    display: inline-block;
    vertical-align: top;
}

.fab-icon-text {
    display: inline-block;
}

.fab-btn-large {
    /* width: 60px; */
    /* height: 60px; */
    width: 45px;
    height: 45px;
    line-height: 60px;
}

.fab-options {
    list-style-type: none;
    margin: 0;
    right: 0px;
    /* transition: all 0.3s ease; */
    transform-origin: 85% bottom;
    /* z-index: 20; */
    z-index: 0;
}

.fab-options-open {
    z-index: 20;
}

.fab-dir-down {
    top: 35px;
    position: absolute;
}

.fab-dir-up {
    /* bottom: 70px; */
    bottom: 50px;
    position: absolute;
}

.fab-options li {
    display: flex;
    justify-content: flex-end;
    padding: 5px;
    background-color: var(--jqm-dlweb-color-default-white);
}

li.dlweb-fabli {
    background-color: transparent;
}

.fab-card ul {
    -webkit-padding-start: 0;
    list-style: none;
    text-align: left;
}

.scale-transition {
    transition: transform 0.3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
}

.scale-transition.scale-out {
    transform: scale(0);
    transition: transform 0.2s !important;
    display: none;
}


/* Media change section */

/* for xl screen (>1200px, add two extra columns to grid to show insert/remove columns) - Nov 21/2022 */
@media screen and (min-width: 1200px) {
    .dlweb-table-ion-14col {
        --ion-grid-columns: 14;
    }
}

/* popup location from the top of the screen based on screen orientation  Used in things like zoomed picture view */
@media screen and (orientation: portrait) {
    .ui-popup {
        top: 10%;
    }
}

@media screen and (orientation: landscape) {
    .ui-popup {
        top: 2%;
    }
}

/* phototo settings for screen size */
@media screen and (max-width: 800px) {
    .phototo {
        width: 80%;
        top: 10%;
        left: 10%;
    }
}

/* reduce font sizes on smaller screens */
@media screen and (max-width: 450px) {
    .ui-grid-b {
        font-size: 15px;
    }

    .ui-block-a.dlweb-label-small {
        width: 33%;
    }

    .ui-block-b.dlweb-data {
        width: 67%;
    }
}

/* label sizes reduction when screen is smaller */
@media (max-width: 800px) {

    .dlweb-table-cell-middle label,
    .dlweb-label,
    .dlweb-label label,
    .dlweb-helptext {
        font-size: 12px;
    }

    /* set the same as normal due to feedback.  Left here in case we want to be able to change it */
    ion-card-title {
        font-size: 16px;
    }

    /* set the same as normal due to feedback.  Left here in case we want to be able to change it */
    ion-card-subtitle {
        font-size: 14px;
    }

    /* buttons that are typically in button bars at bottom */
    .dlweb-content .ui-btn.ui-input-btn:not(.ui-btn-icon-notext) {
        font-size: 12px;
    }

    /* collapsible sections */
    h5 .ui-btn.ui-collapsible-heading-toggle {
        font-size: 12px;
    }

    h5 .ui-btn.ui-collapsible-heading-toggle span {
        padding-left: 5px;
    }

    /* checklist attached/overdue/high priority value reduced font */
    .dlweb-list-flag,
    .ui-listview .dlweb-list-flag {
        font-size: 12px;
    }
}

/* ver5.30 */
.action-section {
    border: 1px solid gray;
    border-radius: 10px;
    padding: 6px;

    h2 {
        border-bottom-width: 1px;
    }

    ul {
        li:not(:last-child) {
            box-shadow: 0 24px 2px -24px var(--jqm-dlweb-color-action-shadow);
        }
    }
}

.drag-handle {
    cursor: grab;
}

.drag-handle.grabbing {
    cursor: grabbing;
}

.toggle-group.dragging {
    opacity: 0.6;
    background-color: #f0f0f0;
    border: 2px dashed #888;
}

.toggle-group {
    transition: transform 0.2s ease, background 0.2s ease;
}

/* ver5.40 */
.dynamic-tooltip {
    position: absolute;
    background: #333;
    color: #fff;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 6px;
    min-width: 160px;
    max-width: 260px;
    white-space: normal;
    word-wrap: break-word;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    text-align: left;
}

ion-col.dlweb-label:not(.displaynone):not(.dlweb-label-left):not(.dlweb-hidecell) {
    display: flex;
    align-items: center;
    justify-content: end;
    opacity: 1;
}