/*site wide font reduction*/
/*html, body {
    font-size: 12px !important;
}*/
/*.w3-row-padding > * {
    padding: 4px 4px !important;
}*/

/* Horizontal scroll + grab-to-scroll base */
.en-scrollableGrid {
    overflow-x: auto; /* shows bottom scrollbar */
    overflow-y: hidden;
    cursor: grab; /* visual hint you can drag */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x; /* better horizontal touch scrolling */
}

    /* While dragging */
.en-scrollableGrid.is-dragging {
     cursor: grabbing;
     user-select: none; /* avoid text selection while dragging */
}

    /* Make horizontal width expand to content but never shrink below container */
.en-scrollableGrid .w3-table,
.en-scrollableGrid table {
     min-width: 100%;
     width: max-content; /* enables horizontal scroll when needed */
}
     /* Fixed-table variant for scrollable grids (lets header widths control columns + ellipsis work) */
.en-scrollableGrid .w3-table.en-fixed {
     table-layout: fixed;
     width: auto; /* override width:max-content */
     min-width: 100%; /* keep at least container width */
}

    .en-scrollableGrid .w3-table.en-fixed th,
    .en-scrollableGrid .w3-table.en-fixed td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; /* needed for ellipsis in most browsers */
 }

    /* Keep normal cursor over interactive controls (nice with the input-friendly JS) */
        .en-scrollableGrid input, .en-scrollableGrid textarea, .en-scrollableGrid select, .en-scrollableGrid button, .en-scrollableGrid a, .en-scrollableGrid [contenteditable="true"] {
     cursor: pointer;
}

    /* Images inside fixed tables should never exceed the cell */
.en-scrollableGrid .w3-table.en-fixed td img,
.en-scrollableGrid .w3-table.en-fixed th img {
     max-width: 100%;
     height: auto;
     display: block; /* avoids baseline overflow */
}


.en-pager {
    vertical-align: middle;
}

.en-coleight {
    width: 12.49% !important;
}

.en-number {
    width: 8em;
    text-align: right;
}

.en-number-lft {
    width: 8em;
    text-align: left;
}

.en-barcode {
    width: 15em;
}

input[type="submit"] {
    margin-top: 5px !important;
    margin-bottom: 2px !important;
    margin-right: 10px !important;
}

.en-displayLabel {
    display: block !important;
}

.en-checkbox {
    display: block !important;
}

.autoCompleteList {
    visibility: hidden;
    margin: 0px !important;
    background-color: Gray;
    color: windowtext;
    border: buttonshadow;
    border-width: 1px;
    border-style: solid;
    cursor: default;
    overflow: auto;
    height: 220px;
    text-align: left;
    list-style-type: none;
    white-space: nowrap;
    z-index: 10005 !important;
}

.autoCompleteSelectedItem {
    background-color: #ffff99;
    color: black;
    padding: 1px;
    overflow: hidden;
}

.autoCompleteItem {
    background-color: Gray;
    color: windowtext;
    padding: 1px;
}
/*Hover Menu*/
.popupMenu {
    position: absolute;
    visibility: hidden;
    background-color: #F5F7F8;
    opacity: .9;
    filter: alpha(opacity=90);
}

.popupHover {
    background-image: url(images/header-opened.png);
    background-repeat: repeat-x;
    background-position: left top;
    background-color: #F5F7F8;
}

/*Modal Popup*/
.modalPopup {
    background-color: White;
    width: 50em;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
}

.modalBackground {
    background-color: Gray;
    opacity: .7;
}

.closePopup {
    float: right;
    margin: 3px;
}
/* ajax hover menu extender */

.popupMessage {
    background-color: white;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    border-radius: 12px;
    padding: 6px;
}


/* Keep label, textbox, and button on one line and vertically centered */
.controls-inline {
    display: flex;
    align-items: center;
    gap: 8px; /* space between items */
}

/* Match textbox height to W3 button */
.match-btn {
    height: 38px; /* match w3-button height */
    line-height: normal;
    padding: 0 8px;
    box-sizing: border-box;
    margin-top: 5px; /* align with default w3-button top margin */
}

/* Optional: your custom medium grey button background */
.w3-medium-grey {
    background-color: #939597 !important;
    color: #fff !important;
}

/* If you ever need to force a W3 input inline in other places */
.inline-input {
    display: inline-block !important;
    vertical-align: middle;
}


/* All table headers inside .w3-table should be dark grey */
.w3-table thead tr,
.w3-table tr:first-child {
    background-color: #616161 !important; /* same as w3-dark-grey */
    color: #fff !important;
}

/* Center-align and vertically middle all table content */
.w3-table td,
.w3-table th {
    text-align: left;
    vertical-align: middle;
    border: 1px solid #ccc; /* consistent border */
}

/* Ensure tables always have border collapse for clean look */
.w3-table {
    border-collapse: collapse;
}

/* 60% width variants of your existing sizes */
.en-number--sm {
    width: 4.8em !important;
    text-align: right;
}
/* 60% of 8em */
.en-barcode--sm {
    width: 9em !important;
}
/* 60% of 15em */

/* Inline row helper (you already have .controls-inline; this complements it) */
.en-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    /* Keep labels and inputs on the same line where needed */
.en-inline label, .en-inline .w3-input, .en-inline input, .en-inline button {
    display: inline-block;
    }
/* Ensure .w3-third actually behaves like a third in our forms */
.w3-row .w3-third, .w3-row-padding .w3-third {
    float: left !important;
    width: 33.3333% !important;
    box-sizing: border-box;
}

.w3-sixth {
    float: left;
    width: 16.66%;
}
/* 8-column style helpers */
.w3-quarter en-coleight {
    float: left;
    width: 12.5% !important; /* 1/8 */
    box-sizing: border-box;
}

.en-col1-8 {
    float: left;
    width: 12.5% !important; /* 1/8 */
    box-sizing: border-box;
}

.en-col2-8 {
    float: left;
    width: 25% !important; /* 2/8 */
    box-sizing: border-box;
}

.en-col3-8 {
    float: left;
    width: 37.5% !important; /* 3/8 */
}

.en-col4-8 {
    float: left;
    width: 50% !important; /* 4/8 */
    box-sizing: border-box;
}

.en-col8-8 {
    float: left;
    width: 100% !important; /* full row */
    box-sizing: border-box;
}
/* Optional: add padding like w3-row-padding does */
.en-row:after {
    content: "";
    display: table;
    clear: both;
}

.en-row > [class*="en-col"] {
    padding: 0 8px;
}
/* Two-column block that stacks on smaller screens */
.en-two-col .en-col4-8 {
    float: left;
    width: 50% !important;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .en-two-col .en-col4-8 {
        width: 100% !important;
        float: none;
    }
}
/* right column naturally drops under */
/* lightweight, plays nice with W3.CSS */

.client-selector {
    display: flex;
    flex-wrap: wrap; /* still responsive if the screen is too narrow */
    width: 100%;
}

.login-bg {
    position: relative;
    min-height: 100vh; /* full viewport */
    background: url('/ImageStore/img/Login_BG.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    background: rgba(255, 255, 255, 0.85);
    padding: 15px;
    border-radius: 10px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    /* shift upwards by 25% of its own height */
    transform: translateY(-70%);
}

/* Compact grids everywhere */
.en-tight-table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Cells */
.en-tight-table.w3-table th,
.en-tight-table.w3-table td {
    padding: 2px 4px !important; /* ~2px each side */
    line-height: 1;
    font-size: 13px !important;
}

    /* Inputs rendered inside grid cells */
.en-tight-table.w3-table input.w3-input,
.en-tight-table.w3-table select.w3-input,
.en-tight-table.w3-table textarea.w3-input {
    padding: 2px 4px !important;
    height: 28px; /* tweak if you want 30–32px */
    line-height: 1;
    font-size: 13px !important;
}

    /* Optional: header buttons/links inside cells */
.en-tight-table.w3-table .w3-button {
    padding: 4px 8px !important;
}

.en-tight-table.w3-table a,
.en-tight-table.w3-table .aspNetDisabled {
    line-height: 1.2;
}

/* Optional: reduce gutter if you wrap grids in .en-grid-wrap */
.en-grid-wrap.w3-row-padding {
    padding-left: 2px;
    padding-right: 2px;
}

.en-grid-wrap.w3-row-padding > [class*="w3-"] {
    padding-left: 2px;
    padding-right: 2px;
}